/* TraveldocAI v3 — Premium SaaS Design System */

/* ── tokens ──────────────────────────────────────── */
:root {
  /* bg surfaces */
  --bg:           #F0F4FA;
  --surface:      #FFFFFF;
  --surface-2:    #F7F9FD;
  --surface-3:    #EEF2F9;

  /* text */
  --text-1:       #0D1B2E;
  --text-2:       #3D5166;
  --text-3:       #7A90A8;

  /* border */
  --border:       #E1E8F2;
  --border-2:     #EBF0F7;

  /* sidebar */
  --sb-bg:        #0B1E36;
  --sb-bg-2:      #0F2642;
  --sb-item:      rgba(255,255,255,.05);
  --sb-item-h:    rgba(255,255,255,.08);
  --sb-text:      #7EA8CC;
  --sb-text-h:    #D0E6F7;
  --sb-text-a:    #FFFFFF;
  --sb-active:    rgba(56,189,248,.12);
  --sb-accent:    #38BDF8;
  --sb-border:    rgba(255,255,255,.06);

  /* accents */
  --accent:       #0369A1;   /* sky-700 */
  --accent-l:     #E0F2FE;
  --accent-h:     #0284C7;
  --accent-glow:  rgba(3,105,161,.15);
  --orange:       #EA580C;   /* orange-600 */
  --orange-l:     #FFF0E6;

  /* semantic */
  --success:      #059669;
  --success-l:    #D1FAE5;
  --success-b:    rgba(5,150,105,.2);
  --warn:         #D97706;
  --warn-l:       #FEF3C7;
  --warn-b:       rgba(217,119,6,.2);
  --danger:       #DC2626;
  --danger-l:     #FEE2E2;
  --danger-b:     rgba(220,38,38,.2);
  --info:         #2563EB;
  --info-l:       #DBEAFE;
  --info-b:       rgba(37,99,235,.2);
  --muted-chip:   #64748B;
  --muted-chip-l: #F1F5F9;
  --muted-chip-b: #CBD5E1;

  /* shadows */
  --sh-xs:  0 1px 2px rgba(13,27,46,.04);
  --sh-sm:  0 1px 3px rgba(13,27,46,.07), 0 1px 2px rgba(13,27,46,.04);
  --sh-md:  0 4px 8px rgba(13,27,46,.07), 0 2px 4px rgba(13,27,46,.04);
  --sh-lg:  0 10px 20px rgba(13,27,46,.09), 0 4px 8px rgba(13,27,46,.05);
  --sh-xl:  0 20px 40px rgba(13,27,46,.14), 0 8px 16px rgba(13,27,46,.06);
  --sh-2xl: 0 32px 64px rgba(13,27,46,.22), 0 12px 24px rgba(13,27,46,.1);

  /* layout */
  --sw:       240px;   /* sidebar width */
  --sw-c:      68px;   /* collapsed */
  --topbar-h:  60px;
  --r:         10px;
  --r-sm:       6px;
  --r-lg:      14px;
  --r-xl:      18px;

  /* type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* motion */
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --dur:      180ms;
  --dur-f:    100ms;
  --dur-s:    300ms;
}

/* dark ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0D1521;
    --surface:   #152032;
    --surface-2: #1A2840;
    --surface-3: #1F3050;
    --text-1:    #E8F0FC;
    --text-2:    #8BA5C4;
    --text-3:    #4F6B88;
    --border:    #253650;
    --border-2:  #1F2E45;
    --accent-l:  #0B2D4A;
    --orange-l:  #2A1A0A;
    --success-l: #052818;
    --warn-l:    #261A02;
    --danger-l:  #260808;
    --info-l:    #0B1C3E;
    --muted-chip-l: #1E2C3E;
    --muted-chip-b: #2E3E52;
    --sh-sm:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --sh-md:  0 4px 8px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
    --sh-lg:  0 10px 20px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.2);
    --sh-xl:  0 20px 40px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.25);
    --sh-2xl: 0 32px 64px rgba(0,0,0,.5), 0 12px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg:#0D1521;--surface:#152032;--surface-2:#1A2840;--surface-3:#1F3050;
  --text-1:#E8F0FC;--text-2:#8BA5C4;--text-3:#4F6B88;
  --border:#253650;--border-2:#1F2E45;
  --accent-l:#0B2D4A;--orange-l:#2A1A0A;
  --success-l:#052818;--warn-l:#261A02;--danger-l:#260808;--info-l:#0B1C3E;
  --muted-chip-l:#1E2C3E;--muted-chip-b:#2E3E52;
  --sh-sm:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --sh-md:0 4px 8px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.2);
  --sh-lg:0 10px 20px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.2);
  --sh-xl:0 20px 40px rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.25);
  --sh-2xl:0 32px 64px rgba(0,0,0,.5),0 12px 24px rgba(0,0,0,.3);
}
:root[data-theme="light"] {
  --bg:#F0F4FA;--surface:#FFFFFF;--surface-2:#F7F9FD;--surface-3:#EEF2F9;
  --text-1:#0D1B2E;--text-2:#3D5166;--text-3:#7A90A8;
  --border:#E1E8F2;--border-2:#EBF0F7;
  --accent-l:#E0F2FE;--orange-l:#FFF0E6;
  --success-l:#D1FAE5;--warn-l:#FEF3C7;--danger-l:#FEE2E2;--info-l:#DBEAFE;
  --muted-chip-l:#F1F5F9;--muted-chip-b:#CBD5E1;
  --sh-sm:0 1px 3px rgba(13,27,46,.07),0 1px 2px rgba(13,27,46,.04);
  --sh-md:0 4px 8px rgba(13,27,46,.07),0 2px 4px rgba(13,27,46,.04);
  --sh-lg:0 10px 20px rgba(13,27,46,.09),0 4px 8px rgba(13,27,46,.05);
  --sh-xl:0 20px 40px rgba(13,27,46,.14),0 8px 16px rgba(13,27,46,.06);
  --sh-2xl:0 32px 64px rgba(13,27,46,.22),0 12px 24px rgba(13,27,46,.1);
}

/* ── reset ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans);font-size:14px;line-height:1.5;
  background:var(--bg);color:var(--text-1);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.hidden{display:none!important}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;text-wrap:balance;margin:0;line-height:1.25}
a{cursor:pointer;text-decoration:none}
button{font-family:var(--sans);cursor:pointer}
input,select,textarea{font-family:var(--sans)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── keyframes ───────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── login ───────────────────────────────────────── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#071524 0%,#0B2040 40%,#0D2850 70%,#071524 100%);
  position:relative;overflow:hidden;
}
.login-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%,rgba(56,189,248,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%,rgba(234,88,12,.06) 0%,transparent 55%);
}
.login-card{
  position:relative;z-index:1;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:44px 40px;width:min(420px,92vw);
  box-shadow:var(--sh-2xl);
  animation:scaleIn .25s var(--ease-out);
}
.login-brand{text-align:center;margin-bottom:32px}
.brand-logo{display:inline-flex;margin-bottom:16px}
.brand-logo svg{width:48px;height:48px;filter:drop-shadow(0 4px 12px rgba(56,189,248,.3))}
.login-brand h1{font-size:24px;color:var(--text-1);margin-bottom:6px;letter-spacing:-.03em}
.login-brand p{font-size:13px;color:var(--text-3);line-height:1.4}
.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.input-icon-wrap{position:relative}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);pointer-events:none}
.input-icon-wrap input{
  width:100%;padding:10px 13px 10px 38px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font:14px var(--sans);background:var(--surface-2);color:var(--text-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input-icon-wrap input:focus{
  border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-glow);outline:none;
}
.btn-login{
  width:100%;margin-top:8px;padding:12px 20px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-h) 100%);
  color:#fff;border:none;border-radius:var(--r-sm);
  font:600 14px var(--sans);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity var(--dur) var(--ease),transform var(--dur-f) var(--ease),box-shadow var(--dur) var(--ease);
  box-shadow:0 4px 12px rgba(3,105,161,.35);
}
.btn-login svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.btn-login:hover{opacity:.92;box-shadow:0 6px 16px rgba(3,105,161,.45)}
.btn-login:hover svg{transform:translateX(3px)}
.btn-login:active{transform:scale(.98)}
.form-error{color:var(--danger);font-size:12.5px;min-height:18px;margin-top:10px;text-align:center}

/* ── app shell ───────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--sw) 1fr;min-height:100vh;transition:grid-template-columns var(--dur-s) var(--ease)}
.app.sb-collapsed{grid-template-columns:var(--sw-c) 1fr}
.app-body{display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* ── sidebar ─────────────────────────────────────── */
.sidebar{
  background:var(--sb-bg);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;
  border-right:1px solid var(--sb-border);
  transition:width var(--dur-s) var(--ease);
  width:var(--sw);
}
.app.sb-collapsed .sidebar{width:var(--sw-c)}

.sidebar-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 14px 14px;border-bottom:1px solid var(--sb-border);
  min-height:64px;flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:10px;overflow:hidden}
.brand-icon{flex-shrink:0}
.brand-icon svg{width:32px;height:32px}
.brand-text{display:flex;flex-direction:column;overflow:hidden;transition:opacity var(--dur) var(--ease),width var(--dur-s) var(--ease)}
.brand-name{font:700 14px var(--sans);color:#fff;letter-spacing:-.01em;white-space:nowrap}
.brand-sub{font:500 10px var(--mono);color:var(--sb-accent);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;margin-top:1px}
.app.sb-collapsed .brand-text{opacity:0;width:0;overflow:hidden}

.collapse-btn{
  flex-shrink:0;width:28px;height:28px;border-radius:6px;
  background:var(--sb-item);border:1px solid var(--sb-border);
  color:var(--sb-text);display:flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.collapse-btn:hover{background:var(--sb-item-h);color:var(--sb-text-h)}
.collapse-btn svg{width:16px;height:16px;transition:transform var(--dur-s) var(--ease)}
.app.sb-collapsed .collapse-btn svg{transform:rotate(180deg)}

/* nav ── */
#nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 8px;display:flex;flex-direction:column;gap:1px}
#nav::-webkit-scrollbar{width:3px}
#nav::-webkit-scrollbar-track{background:transparent}
#nav::-webkit-scrollbar-thumb{background:var(--sb-border);border-radius:10px}

.nav-group{margin-bottom:4px}
.nav-group-label{
  font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--sb-text);opacity:.5;
  padding:12px 10px 4px;white-space:nowrap;overflow:hidden;
  transition:opacity var(--dur-s) var(--ease);
}
.app.sb-collapsed .nav-group-label{opacity:0;height:0;padding:0;margin:0}

.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  color:var(--sb-text);font:500 13.5px var(--sans);
  white-space:nowrap;overflow:hidden;
  transition:background var(--dur-f) var(--ease),color var(--dur-f) var(--ease);
  position:relative;
}
.nav-item:hover{background:var(--sb-item-h);color:var(--sb-text-h)}
.nav-item.active{background:var(--sb-active);color:var(--sb-text-a)}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--sb-accent);
}
.nav-icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.nav-icon svg{width:18px;height:18px}
.nav-label{flex:1;transition:opacity var(--dur-s) var(--ease)}
.app.sb-collapsed .nav-label{opacity:0;width:0;overflow:hidden}
.nav-badge{
  background:var(--danger);color:#fff;
  font:700 10px var(--mono);padding:1px 6px;border-radius:10px;flex-shrink:0;
  transition:opacity var(--dur-s) var(--ease);
}
.app.sb-collapsed .nav-badge{opacity:0;display:none}

/* sidebar tooltip when collapsed */
.app.sb-collapsed .nav-item{justify-content:center;padding:9px;position:relative}
.app.sb-collapsed .nav-item::after{
  content:attr(data-label);
  position:absolute;left:calc(var(--sw-c) - 4px);top:50%;transform:translateY(-50%);
  background:var(--sb-bg-2);color:var(--sb-text-h);
  font:500 13px var(--sans);padding:6px 12px;border-radius:var(--r-sm);
  white-space:nowrap;pointer-events:none;
  border:1px solid var(--sb-border);
  box-shadow:var(--sh-lg);
  opacity:0;transition:opacity var(--dur-f) var(--ease);
  z-index:100;
}
.app.sb-collapsed .nav-item:hover::after{opacity:1}

/* sidebar footer ── */
.sidebar-footer{padding:12px 8px;border-top:1px solid var(--sb-border);flex-shrink:0}
.user-info{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:8px;margin-bottom:6px;overflow:hidden;
}
.user-avatar{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,var(--sb-accent) 100%);
  display:flex;align-items:center;justify-content:center;
  font:700 13px var(--mono);color:#fff;text-transform:uppercase;
}
.user-meta{overflow:hidden;transition:opacity var(--dur-s),width var(--dur-s)}
.user-name{font:600 13px var(--sans);color:#fff;white-space:nowrap}
.user-role{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sb-accent);margin-top:1px}
.app.sb-collapsed .user-meta{opacity:0;width:0}
.signout-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px;border-radius:7px;
  background:transparent;border:1px solid var(--sb-border);
  color:var(--sb-text);font:500 13px var(--sans);
  transition:background var(--dur-f) var(--ease),color var(--dur-f) var(--ease);
  overflow:hidden;
}
.signout-btn svg{width:16px;height:16px;flex-shrink:0}
.signout-btn span{transition:opacity var(--dur-s),width var(--dur-s);white-space:nowrap}
.app.sb-collapsed .signout-btn span{opacity:0;width:0;overflow:hidden}
.signout-btn:hover{background:rgba(220,38,38,.1);color:#FCA5A5;border-color:rgba(220,38,38,.25)}

/* ── topbar ──────────────────────────────────────── */
.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;gap:12px;
  padding:0 24px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
  box-shadow:var(--sh-xs);
  flex-shrink:0;
}
.mobile-menu-btn{
  display:none;width:36px;height:36px;border-radius:8px;
  background:transparent;border:1px solid var(--border);
  color:var(--text-2);align-items:center;justify-content:center;
}
.mobile-menu-btn svg{width:18px;height:18px}
.topbar-search-wrap{
  position:relative;flex:1;max-width:480px;
}
.topbar-search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--text-3);pointer-events:none;
}
#global-search{
  width:100%;padding:9px 80px 9px 38px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font:14px var(--sans);background:var(--surface-2);color:var(--text-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
#global-search:focus{
  border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-glow);outline:none;
}
#global-search::placeholder{color:var(--text-3)}
.search-kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font:500 11px var(--mono);color:var(--text-3);
  background:var(--surface-3);border:1px solid var(--border);
  padding:2px 7px;border-radius:4px;pointer-events:none;
}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
#ai-badge{
  display:inline-flex;align-items:center;gap:6px;
  font:600 11.5px var(--sans);padding:5px 10px;border-radius:20px;white-space:nowrap;
}
#ai-badge.ok{color:var(--success);background:var(--success-l);border:1px solid var(--success-b)}
#ai-badge.warn{color:var(--warn);background:var(--warn-l);border:1px solid var(--warn-b)}
#ai-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.topbar-user{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,#38BDF8 100%);
  display:flex;align-items:center;justify-content:center;
  font:700 12px var(--mono);color:#fff;text-transform:uppercase;cursor:pointer;
}

/* ── search results ──────────────────────────────── */
.search-results{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh-xl);margin:0 24px 0;overflow:hidden;
  animation:fadeUp .15s var(--ease-out);
}

/* ── main content ────────────────────────────────── */
.main-content{
  flex:1;padding:24px 24px 60px;min-width:0;overflow:auto;
  animation:fadeUp .2s var(--ease-out);
}

/* ── page header ─────────────────────────────────── */
.page-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.page-title h2{font-size:20px;color:var(--text-1)}
.page-title p{font-size:13px;color:var(--text-3);margin-top:3px}

/* ── section heading ─────────────────────────────── */
.section-title{
  display:flex;align-items:center;gap:10px;
  margin:24px 0 14px;
}
.section-title h2{font-size:15px;color:var(--text-1);font-weight:600}
.section-title .hint{color:var(--text-3);font-size:12px}

/* ── skeleton loaders ────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--border-2) 25%,var(--border) 50%,var(--border-2) 75%);
  background-size:400px 100%;
  animation:shimmer 1.4s infinite linear;
  border-radius:var(--r-sm);
}
.skeleton-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.skeleton-card{height:110px;border-radius:var(--r)}
.skeleton-line{height:14px;border-radius:4px;margin-bottom:8px}
.skeleton-line.w-60{width:60%}
.skeleton-line.w-40{width:40%}
.skeleton-table{border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.skeleton-row{height:52px;margin:0;border-radius:0;border-bottom:1px solid var(--border-2)}
.skeleton-row:last-child{border-bottom:0}

/* ── kpi cards ───────────────────────────────────── */
.kpis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.kpi-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
  animation:fadeUp var(--dur-s) var(--ease-out) both;
}
.kpi-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.kpi-card::before{
  content:'';position:absolute;inset:0 0 0 auto;
  width:3px;background:var(--kpi-c,var(--border));
}
.kpi-card::after{
  content:'';position:absolute;top:0;right:0;
  width:80px;height:80px;border-radius:50%;
  background:var(--kpi-c,transparent);opacity:.06;
  transform:translate(20px,-20px);
}
.kpi-icon{
  width:36px;height:36px;border-radius:9px;
  background:var(--kpi-c-l,var(--surface-3));
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.kpi-icon svg{width:18px;height:18px;color:var(--kpi-c,var(--text-3))}
.kpi-label{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.kpi-value{font:700 26px var(--mono);color:var(--text-1);margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-sub{font:400 12px var(--sans);color:var(--text-3);margin-top:8px;padding-top:8px;border-top:1px solid var(--border-2)}
.kpi-sub strong{color:var(--text-2);font-weight:600}
.kpi-trend{display:inline-flex;align-items:center;gap:3px;font:600 11.5px var(--sans);padding:2px 7px;border-radius:4px;margin-top:6px}
.kpi-trend.up{color:var(--success);background:var(--success-l)}
.kpi-trend.down{color:var(--danger);background:var(--danger-l)}
.kpi-trend svg{width:12px;height:12px}

/* ── charts ──────────────────────────────────────── */
.charts-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;margin-bottom:24px}
.chart-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--sh-sm);
  animation:fadeUp .3s var(--ease-out) .1s both;
}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.chart-title{font:600 14px var(--sans);color:var(--text-1)}
.chart-sub{font:400 12px var(--sans);color:var(--text-3);margin-top:2px}
.chart-body{position:relative}

/* ── dashboard bottom ────────────────────────────── */
.dash-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.dash-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--sh-sm);
  animation:fadeUp .3s var(--ease-out) .15s both;
}
.attention-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border-2);
}
.attention-item:last-child{border-bottom:0}
.attention-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── panels & tables ─────────────────────────────── */
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:16px;
}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead{position:sticky;top:0;z-index:1}
th{
  font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);text-align:left;padding:11px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
th.nowrap,td.nowrap{white-space:nowrap}
th.num,td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
td{
  padding:13px 16px;border-bottom:1px solid var(--border-2);
  vertical-align:middle;color:var(--text-1);
}
tr:last-child td{border-bottom:0}
tbody tr{
  transition:background var(--dur-f) var(--ease);
  position:relative;
}
tbody tr:hover{background:var(--surface-2)}
.row-actions{
  display:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);
  display:flex;gap:4px;align-items:center;
  opacity:0;transition:opacity var(--dur-f) var(--ease);
}
tbody tr:hover .row-actions{opacity:1}
.td-actions{width:1px;padding-right:8px;vertical-align:middle}
.td-actions > div{flex-wrap:nowrap;justify-content:flex-end;align-items:center}
.hide-mobile{}
.empty{
  padding:48px 20px;text-align:center;color:var(--text-3);font-size:13.5px;
}
.empty-icon{width:40px;height:40px;margin:0 auto 12px;color:var(--border);display:flex;align-items:center;justify-content:center}
.empty-icon svg{width:40px;height:40px}
.empty strong{display:block;color:var(--text-2);font-size:14px;margin-bottom:4px}

/* ── buttons ─────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:var(--surface);color:var(--text-1);
  font:600 13px var(--sans);white-space:nowrap;line-height:1.2;
  transition:border-color var(--dur-f) var(--ease),background var(--dur-f) var(--ease),box-shadow var(--dur-f) var(--ease),transform var(--dur-f) var(--ease);
  box-shadow:var(--sh-xs);
}
.btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--sh-sm)}
.btn:active{transform:scale(.97)}
.btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 3px 8px rgba(3,105,161,.3);
}
.btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h);color:#fff;box-shadow:0 4px 12px rgba(3,105,161,.4)}
.btn.success{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 3px 8px rgba(5,150,105,.3)}
.btn.success:hover{opacity:.9;color:#fff}
.btn.danger{color:var(--danger);border-color:var(--danger-b);background:var(--danger-l)}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 3px 8px rgba(220,38,38,.3)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-3);border-color:var(--border);color:var(--text-1)}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:6px}
.btn.xs{padding:3px 8px;font-size:11.5px;border-radius:5px}
.btn.wide{width:100%;justify-content:center;margin-top:4px;padding:11px}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* ── toolbar ─────────────────────────────────────── */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar input,.toolbar select{width:auto;min-width:130px}
.right{margin-left:auto}

/* ── forms ───────────────────────────────────────── */
label{
  display:block;font:600 11.5px var(--sans);
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-2);margin:14px 0 5px;
}
input,select,textarea{
  width:100%;padding:9px 12px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font:13.5px var(--sans);background:var(--surface-2);color:var(--text-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-glow);outline:none;
}
input[type="checkbox"]{width:auto;accent-color:var(--accent)}
input[type="file"]{padding:7px 10px;font-size:12.5px;background:var(--surface)}
.input-note{font-size:11.5px;color:var(--text-3);margin-top:4px}

/* ── status chips ────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font:600 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;white-space:nowrap;
}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.chip.ok    {color:var(--success);background:var(--success-l);border:1px solid var(--success-b)}
.chip.warn  {color:var(--warn);background:var(--warn-l);border:1px solid var(--warn-b)}
.chip.bad   {color:var(--danger);background:var(--danger-l);border:1px solid var(--danger-b)}
.chip.info  {color:var(--info);background:var(--info-l);border:1px solid var(--info-b)}
.chip.muted {color:var(--muted-chip);background:var(--muted-chip-l);border:1px solid var(--muted-chip-b)}

/* ── confidence ──────────────────────────────────── */
.conf{font:600 12px var(--mono);font-variant-numeric:tabular-nums}
.conf.low{color:var(--danger)}.conf.mid{color:var(--warn)}.conf.high{color:var(--success)}

/* ── dropzone ────────────────────────────────────── */
.dropzone{
  border:2px dashed var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:56px 32px;
  text-align:center;color:var(--text-3);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
  box-shadow:var(--sh-sm);
}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-l);color:var(--accent);transform:scale(1.005)}
.dropzone .dz-icon{margin:0 auto 16px;width:48px;height:48px;border-radius:12px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease)}
.dropzone:hover .dz-icon,.dropzone.over .dz-icon{background:var(--accent-l)}
.dropzone .dz-icon svg{width:24px;height:24px}
.dropzone strong{display:block;font:600 15px var(--sans);color:var(--text-1);margin-bottom:6px}
.dropzone small{font-size:12.5px}

/* ── modal ───────────────────────────────────────── */
#modal-root .backdrop{
  position:fixed;inset:0;z-index:50;overflow:auto;
  background:rgba(9,18,32,.65);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:4vh 16px 40px;
  animation:fadeIn .15s var(--ease-out);
}
.modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);width:min(820px,100%);
  padding:0;box-shadow:var(--sh-2xl);overflow:hidden;
  animation:scaleIn .2s var(--ease-out);
}
.modal-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:22px 24px 18px;border-bottom:1px solid var(--border);
}
.modal-head h3{font-size:17px;color:var(--text-1)}
.modal-body{padding:20px 24px}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.modal .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
.modal-actions{
  display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
  padding:16px 24px;border-top:1px solid var(--border);
  background:var(--surface-2);
}
.pdf-frame{width:100%;height:60vh;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}

/* ── kv list ─────────────────────────────────────── */
.kv{font-size:13px;margin:0}
.kv dt{color:var(--text-3);float:left;clear:left;width:130px;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.04em;line-height:2}
.kv dd{margin:0 0 4px 140px;font-family:var(--mono);color:var(--text-1)}

/* ── totals box ──────────────────────────────────── */
.totals-box{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:14px 16px;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
}
.totals-box div{display:flex;justify-content:space-between;padding:3px 0;color:var(--text-2)}
.totals-box div span:last-child{color:var(--text-1)}
.totals-box .grand{
  border-top:1px solid var(--border);margin-top:8px;
  padding-top:10px;font-weight:700;font-size:14px;color:var(--text-1);
}
.totals-box .grand span:last-child{color:var(--orange)}

/* ── toast ───────────────────────────────────────── */
#toast{position:fixed;bottom:24px;right:24px;z-index:99;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-item{
  background:var(--text-1);color:#E8F0FC;
  padding:13px 18px;border-radius:10px;font:500 13.5px var(--sans);
  box-shadow:var(--sh-xl);border-left:3px solid var(--sb-accent);
  pointer-events:auto;max-width:360px;
  animation:toastIn .2s var(--ease-out);
  display:flex;align-items:center;gap:10px;
}
.toast-item.err{border-left-color:var(--danger)}
.toast-item.err::before{content:'⚠';font-size:16px}
.toast-item::before{content:'✓';font-size:16px;color:var(--success)}
.toast-item.err::before{content:'⚠';color:var(--warn)}

/* ── sidebar overlay (mobile) ────────────────────── */
.sidebar-overlay{
  display:none;position:fixed;inset:0;z-index:40;
  background:rgba(9,18,32,.5);backdrop-filter:blur(2px);
}

/* ── responsive ──────────────────────────────────── */
@media(max-width:1100px){
  .charts-grid{grid-template-columns:1fr}
  .dash-bottom{grid-template-columns:1fr}
}
@media(max-width:900px){
  .app{grid-template-columns:0 1fr}
  .app.sb-collapsed{grid-template-columns:0 1fr}
  .sidebar{position:fixed;left:0;top:0;height:100%;z-index:45;transform:translateX(-100%);transition:transform var(--dur-s) var(--ease)}
  .app.mobile-open .sidebar{transform:translateX(0)}
  .app.mobile-open .sidebar-overlay{display:block}
  .mobile-menu-btn{display:flex}
  .main-content{padding:16px 16px 40px}
  .topbar{padding:0 16px}
  .modal .row,.modal .row3{grid-template-columns:1fr}
  .kpis-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media(max-width:640px){
  .hide-mobile{display:none}
  th,td{padding:9px 10px;font-size:12.5px}
  .btn.xs{padding:5px 7px}
  .td-actions .btn-label{display:none}
}
@media(max-width:480px){
  .login-card{padding:30px 22px}
  .kpis-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}