/* ============================================================
   KIM LIEN GROUP — Design Tokens
   Source: Quy Định Màu và Font (brand guidelines, internal)
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */

  /* Primary — metallic gold, the brand's signature */
  --kl-gold: #e5a124;          /* Vàng ánh kim — primary */
  --kl-gold-soft: #d4a96a;     /* softer logo-tint gold (matches horizontal logotype) */
  --kl-gold-deep: #b08019;     /* darker gold for hover / press / contrast on white */

  /* Background — primary surfaces */
  --kl-bg-white: #ffffff;      /* Trắng */
  --kl-bg-blue: #122567;       /* Xanh — primary dark surface */

  /* Secondary neutrals */
  --kl-black: #000000;         /* Đen sang trọng */
  --kl-charcoal: #333333;      /* Xám đậm trung tính */

  /* Accents */
  --kl-silver: #8c8c8c;        /* Xám bạc */
  --kl-platinum: #f4f4f4;      /* Màu bạc — light tint surface */
  --kl-bronze: #b59a77;        /* Be ánh đồng */
  --kl-navy: #0a2a4a;          /* Xanh đậm */
  --kl-moss: #2c5f2d;          /* Xanh rêu đậm */

  /* ---------- SEMANTIC TOKENS ---------- */

  /* Foreground */
  --fg-1: var(--kl-black);             /* primary text on light */
  --fg-2: var(--kl-charcoal);          /* body text on light */
  --fg-3: var(--kl-silver);            /* muted / meta */
  --fg-on-dark: var(--kl-bg-white);    /* text on navy / blue */
  --fg-on-dark-2: #c9d1e8;             /* secondary text on dark */
  --fg-accent: var(--kl-gold);         /* gold for emphasis */

  /* Background */
  --bg-1: var(--kl-bg-white);
  --bg-2: var(--kl-platinum);
  --bg-dark: var(--kl-bg-blue);
  --bg-darker: var(--kl-navy);
  --bg-black: var(--kl-black);

  /* Lines & dividers */
  --line-1: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.16);
  --line-gold: var(--kl-gold);
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --line-on-dark-gold: rgba(229, 161, 36, 0.5);

  /* ---------- TYPE FAMILIES ---------- */
  /* POSM Headings — refined serifs / geometric sans */
  --font-display: "Playfair Display", "Baskerville", "Libre Baskerville",
                  "Times New Roman", Georgia, serif;
  --font-display-sans: "Futura", "Futura PT", "Montserrat", "Raleway",
                       system-ui, sans-serif;

  /* Body — neutral humanist sans */
  --font-body: "Lato", "Open Sans", "Source Sans Pro", "Roboto",
               "Noto Sans", system-ui, -apple-system, sans-serif;

  /* Accent — friendly geometric (callouts, captions, micro) */
  --font-accent: "Poppins", "Barlow", "Quicksand", system-ui, sans-serif;

  /* Document text (formal Vietnamese documents) */
  --font-document: "Times New Roman", "Arial", serif;

  /* ---------- TYPE SCALE ---------- */
  /* Driven by serif display + neutral body. POSM-friendly. */
  --fs-d1: 88px;   --lh-d1: 1.04;   --ls-d1: -0.02em;   /* hero display */
  --fs-d2: 64px;   --lh-d2: 1.06;   --ls-d2: -0.015em;
  --fs-d3: 48px;   --lh-d3: 1.1;    --ls-d3: -0.01em;
  --fs-h1: 36px;   --lh-h1: 1.15;   --ls-h1: -0.005em;
  --fs-h2: 28px;   --lh-h2: 1.2;    --ls-h2: 0;
  --fs-h3: 22px;   --lh-h3: 1.3;    --ls-h3: 0;
  --fs-h4: 18px;   --lh-h4: 1.35;   --ls-h4: 0.005em;
  --fs-body: 16px; --lh-body: 1.6;  --ls-body: 0;
  --fs-small: 14px; --lh-small: 1.5;
  --fs-micro: 12px; --lh-micro: 1.4; --ls-micro: 0.08em;  /* uppercase eyebrow */

  /* ---------- SPACING ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  /* Kim Lien is heritage-luxury — radii are minimal. Use sparingly. */
  --radius-0: 0;        /* default — sharp corners on cards / sheets */
  --radius-1: 2px;      /* soft on chips */
  --radius-2: 4px;      /* inputs, buttons */
  --radius-3: 8px;      /* small images / badges */
  --radius-pill: 999px; /* tag pills */

  /* ---------- SHADOWS ---------- */
  /* Restrained. Heritage brands use shadow as paper-lift, not glow. */
  --shadow-1: 0 1px 2px rgba(10, 42, 74, 0.06),
              0 1px 1px rgba(10, 42, 74, 0.04);
  --shadow-2: 0 4px 12px rgba(10, 42, 74, 0.08),
              0 2px 4px rgba(10, 42, 74, 0.04);
  --shadow-3: 0 12px 32px rgba(10, 42, 74, 0.12),
              0 4px 8px rgba(10, 42, 74, 0.06);
  --shadow-gold-glow: 0 0 0 1px rgba(229, 161, 36, 0.4),
                      0 8px 24px rgba(229, 161, 36, 0.15);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
}

/* ============================================================
   TYPOGRAPHY — semantic styles
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.kl-display-1, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-d1);
  line-height: var(--lh-d1);
  letter-spacing: var(--ls-d1);
  color: var(--fg-1);
}
.kl-display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  color: var(--fg-1);
}
.kl-display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-d3);
  line-height: var(--lh-d3);
  letter-spacing: var(--ls-d3);
  color: var(--fg-1);
}

h1, .kl-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg-1);
  margin: 0;
}
h2, .kl-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-1);
  margin: 0;
}
h3, .kl-h3 {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
  margin: 0;
}
h4, .kl-h4 {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-1);
  margin: 0;
}

p, .kl-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.kl-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}

/* Eyebrow — uppercase tracked label, often in gold above a heading */
.kl-eyebrow {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--kl-gold);
}

/* Quote / pull-quote — italic display serif */
.kl-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
  color: var(--fg-1);
}

/* Caption / micro on imagery */
.kl-caption {
  font-family: var(--font-accent);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

/* Wordmark (KIMLIEN GROUP) — wide tracked thin serif */
.kl-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kl-gold);
}

/* Document text (Vietnamese formal docs) */
.kl-document {
  font-family: var(--font-document);
  font-size: 13pt;
  line-height: 1.5;
  color: var(--fg-1);
}

/* Inverse text on dark surfaces */
.on-dark {
  color: var(--fg-on-dark);
}
.on-dark .kl-body, .on-dark p { color: var(--fg-on-dark-2); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--fg-on-dark); }

/* ============================================================
   GOLD ACCENT UTILITIES
   ============================================================ */

.kl-rule-gold {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--kl-gold);
  border: 0;
}
.kl-rule-gold--center { margin-left: auto; margin-right: auto; }

.kl-gold-text { color: var(--kl-gold); }
.kl-navy-text { color: var(--kl-navy); }

/* ============================================================
   MOBILE RESPONSIVE PORTAL STYLES (User & Departments Portal)
   ============================================================ */
@media (max-width: 768px) {
  /* Header adjustments */
  .user-header-inner {
    padding: 10px 16px !important;
    gap: 12px !important;
  }
  .user-search-trigger {
    width: auto !important;
    flex-grow: 1 !important;
    padding: 6px 10px !important;
  }
  .user-kbd {
    display: none !important;
  }
  .user-notif-dropdown {
    right: -40px !important;
    width: 290px !important;
  }

  /* Account fixed block under header */
  .user-acct-fixed {
    position: static !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-shadow: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line-1) !important;
    padding: 10px 16px !important;
    z-index: 10 !important;
  }

  /* Masthead / Hero section */
  .user-masthead-inner {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    gap: 24px !important;
  }
  .user-masthead h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  .user-masthead-left p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-top: 16px !important;
  }

  /* Main layout body */
  .user-body {
    grid-template-columns: 1fr !important;
    padding: 16px 16px !important;
    gap: 16px !important;
  }

  /* Convert Sidebar directory list to YouTube-style horizontal chips */
  .user-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
    margin: 0 -16px 12px -16px !important;
    padding: 8px 16px 12px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important; /* Firefox */
    border-bottom: 1px solid var(--line-1) !important;
    max-height: none !important;
    gap: 8px !important;
  }
  .user-sidebar::-webkit-scrollbar {
    display: none !important; /* Safari / Chrome */
  }
  
  /* Hide sidebar labels, dividers and hints on mobile */
  .user-sidebar-title,
  .user-sidebar-divider,
  .user-sidebar-hint {
    display: none !important;
  }

  /* Department button styled as pill-shaped category chip */
  .user-sidebar .dept-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    background: var(--kl-platinum) !important;
    color: var(--fg-2) !important;
    font-size: 12px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    border-left: 1px solid var(--line-2) !important;
    margin: 0 !important;
  }
  .user-sidebar .dept-btn.active {
    background: var(--kl-navy) !important;
    color: #fff !important;
    border-color: var(--kl-navy) !important;
    font-weight: 600 !important;
  }
  .user-sidebar .dept-btn-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .user-sidebar .dept-btn-code {
    margin: 0 !important;
    font-weight: bold !important;
    color: var(--kl-gold-deep) !important;
  }
  .user-sidebar .dept-btn.active .dept-btn-code {
    color: var(--kl-gold) !important;
  }
  
  /* Department count styled as count badge inside chip */
  .user-sidebar .user-dept-count {
    font-size: 10px !important;
    background: rgba(0,0,0,0.06) !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    color: var(--fg-3) !important;
    margin-left: 4px !important;
  }
  .user-sidebar .dept-btn.active .user-dept-count {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
  }

  /* Content area adjustments */
  .user-main-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .user-sort-row {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .user-sort-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }

  /* Process lists layout overrides */
  .user-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "mid actions" !important;
    padding: 16px 0 !important;
  }
  /* Hide the indices on mobile to save valuable space */
  .user-row-idx {
    display: none !important;
  }
  /* Scale down the title slightly */
  .user-row-title {
    font-size: 14px !important;
  }

  /* Footer responsiveness */
  .user-footer-inner {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* AI Chat Widget Responsiveness */
  .user-chat-drawer {
    width: calc(100% - 24px) !important;
    height: calc(100dvh - 100px) !important;
    max-height: calc(100dvh - 100px) !important;
    bottom: 88px !important;
    right: 12px !important;
    border-radius: 12px !important;
  }

  .ai-bubble-btn {
    bottom: 16px !important;
    right: 12px !important;
    width: 50px !important;
    height: 50px !important;
  }

  /* Fix header actions not collapsing */
  .user-header-actions {
    gap: 8px !important;
  }
  
  .user-bell-btn {
    width: 32px !important;
    height: 32px !important;
  }

  /* Prevent iOS auto-zoom on input focus (requires >= 16px) */
  .user-chat-drawer input {
    font-size: 16px !important;
  }
}

/* ============================================================
   AI CHAT ANIMATIONS & SCROLLBAR STYLING
   ============================================================ */

/* Pulse animation on the floating bubble */
@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(10, 42, 74, 0.35), 0 0 0 0 rgba(229,161,36,0.35); }
  50% { box-shadow: 0 4px 20px rgba(10, 42, 74, 0.35), 0 0 0 8px rgba(229,161,36,0); }
}

/* Typing dots bounce animation */
@keyframes ai-typing {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.ai-typing-dot {
  animation: ai-typing 1.2s ease-in-out infinite;
}

/* Hover effect on bubble */
.ai-bubble-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 28px rgba(10, 42, 74, 0.4), 0 0 0 4px rgba(229,161,36,0.2) !important;
}

/* Scrollbar styling for chat body */
.ai-chat-body::-webkit-scrollbar {
  width: 4px;
}
.ai-chat-body::-webkit-scrollbar-track {
  background: transparent;
}
.ai-chat-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
}
.ai-chat-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* ============================================================
   AI EXPANDED (FULLSCREEN) MODE
   ============================================================ */

/* When expanded, center the content area with max-width */
.user-chat-drawer.ai-expanded .ai-chat-body {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px !important;
}

/* Expanded header spans full width but content is centered */
.user-chat-drawer.ai-expanded {
  background: #f8f8fa !important;
}

/* Override compact mobile rules when expanded */
@media (max-width: 768px) {
  .user-chat-drawer.ai-expanded {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }
}