/* ═══════════════════════════════════════════════════════════════
   ARLI v6 — Sage Green Design System
   Premium • Responsive • Accessible • GPU-accelerated
   Palette: Sage #A8BF81 from logo
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables (Light theme default) ── */
:root {
  /* Brand — Sage Green */
  --p: #8AAD5F;
  --p-light: #A8BF81;
  --p-dark: #6B8E42;
  --p-bg: rgba(138, 173, 95, 0.08);
  --p-border: rgba(138, 173, 95, 0.2);
  --gold: #C8A84E;
  --gold-bg: rgba(200, 168, 78, 0.1);

  /* Surfaces — Warm off-white with green undertone */
  --bg: #F7F9F2;
  --bg2: #FFFFFF;
  --bg3: #EEF2E7;
  --bg4: #E4E8DC;

  /* Borders */
  --b1: rgba(0, 0, 0, 0.06);
  --b2: rgba(0, 0, 0, 0.10);
  --b3: rgba(0, 0, 0, 0.14);

  /* Text — Warm dark olive */
  --t1: #1A1F0F;
  --t2: #3B4428;
  --t3: #6B7358;
  --t4: #94A080;

  /* Semantic */
  --red: #DC4A3D;
  --red-bg: rgba(220, 74, 61, 0.08);
  --green: #6B8E42;
  --green-bg: rgba(107, 142, 66, 0.08);
  --amber: #C89030;
  --amber-bg: rgba(200, 144, 48, 0.1);
  --blue: #5B8CBF;
  --blue-bg: rgba(91, 140, 191, 0.08);
  --cyan: #5BA5AF;
  --cyan-bg: rgba(91, 165, 175, 0.08);

  /* Typography */
  --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radii */
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(0,0,0,.03);
  --sh: 0 2px 8px rgba(0,0,0,.05);
  --sh-lg: 0 8px 32px rgba(0,0,0,.07);
  --sh-xl: 0 24px 80px rgba(0,0,0,.10);
  --sh-glow: 0 0 24px rgba(138,173,95,.12);

  /* Transitions */
  --fast: 150ms ease;
  --normal: 250ms ease;
  --slow: 400ms ease;

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-collapsed: 60px;
  --topbar-h: 52px;
}

/* Dark theme */
[data-theme="dark"] {
  --bg: #12180D;
  --bg2: #191F12;
  --bg3: #22291A;
  --bg4: #2B3322;
  --b1: rgba(255,255,255,.06);
  --b2: rgba(255,255,255,.10);
  --b3: rgba(255,255,255,.14);
  --t1: #F2F5EB;
  --t2: #D2D8C5;
  --t3: #A0A890;
  --t4: #6E7860;
  --sh-sm: 0 1px 2px rgba(0,0,0,.2);
  --sh: 0 2px 8px rgba(0,0,0,.3);
  --sh-lg: 0 8px 32px rgba(0,0,0,.4);
  --sh-glow: 0 0 24px rgba(138,173,95,.08);
}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--ff);background:var(--bg);color:var(--t1);line-height:1.6;overflow:hidden;height:100vh;height:100dvh}
a{color:var(--p);text-decoration:none;transition:color var(--fast)}
a:hover{color:var(--p-dark)}
::selection{background:var(--p-bg);color:var(--p-dark)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--b3)}

/* ── App Layout ── */
.app-shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
.app-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--b1);display:flex;flex-direction:column;transition:width var(--slow);z-index:30;overflow:hidden}
.app-sidebar.collapsed{width:var(--sidebar-collapsed)}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* Sidebar Header */
.sb-brand{display:flex;align-items:center;justify-content:center;padding:6px 16px;border-bottom:1px solid var(--b1);height:var(--topbar-h);flex-shrink:0}
.sb-brand .sb-logo{height:40px;width:auto;max-width:90%;border-radius:0;object-fit:contain;flex-shrink:0}
.sb-brand .sb-name{font-size:15px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden}
.sidebar-collapsed .sb-brand{gap:0;justify-content:center}
.sidebar-collapsed .sb-name{display:none}
.sidebar-collapsed .sb-logo{height:28px}

/* Sidebar Nav */
.sb-nav{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
.sb-nav-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--t4);padding:10px 10px 4px;white-space:nowrap;overflow:hidden}
.sidebar-collapsed .sb-nav-label{display:none}
.sb-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:all var(--fast);white-space:nowrap;overflow:hidden;position:relative}
.sb-nav-item:hover{background:var(--bg3);color:var(--t1)}
.sb-nav-item.active{background:var(--p-bg);color:var(--p-dark);font-weight:600}
.sb-nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--p);border-radius:0 3px 3px 0}
.sb-nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:0.7}
.sb-nav-item.active svg{opacity:1}
.sb-nav-item .sb-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--p-bg);color:var(--p-dark);margin-left:auto}
.sidebar-collapsed .sb-nav-item{gap:0;justify-content:center;padding:9px}
.sidebar-collapsed .sb-nav-item span:not(.sb-badge){display:none}
.sidebar-collapsed .sb-nav-item .sb-badge{position:absolute;top:4px;right:4px;font-size:8px;padding:1px 4px}

.sb-footer{padding:12px;border-top:1px solid var(--b1);font-size:10px;color:var(--t4);text-align:center;flex-shrink:0}
.sidebar-collapsed .sb-footer{display:none}
.sb-collapse-btn{display:flex;align-items:center;justify-content:center;padding:8px;margin:0 8px 4px;border-radius:var(--r);cursor:pointer;color:var(--t4);transition:all var(--fast);font-size:11px}
.sb-collapse-btn:hover{background:var(--bg3);color:var(--t2)}

/* Topbar */
.app-topbar{height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--b1);background:var(--bg2);flex-shrink:0}
.app-topbar .tb-breadcrumb{font-size:13px;font-weight:600;color:var(--t1);flex:1}
.app-topbar .tb-actions{display:flex;align-items:center;gap:8px}
.tb-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;border:none;background:none;font-family:inherit;transition:all var(--fast)}
.tb-btn:hover{background:var(--bg3);color:var(--t1)}
#mobile-menu-btn{display:none}
.tb-avatar{width:30px;height:30px;border-radius:50%;background:var(--p-bg);color:var(--p-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;cursor:pointer}

/* Page Content */
.app-content{flex:1;overflow-y:auto;padding:28px 24px}
.page-header{margin-bottom:24px}
.page-header h1{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-0.5px}
.page-header p{font-size:13px;color:var(--t3);margin-top:4px}

/* ── Component Library ── */

/* Cards */
.card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r-xl);overflow:hidden;transition:all var(--normal)}
.card:hover{border-color:var(--b2);box-shadow:var(--sh)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:700;color:var(--t1)}
.card-body{padding:18px}

/* Bento Grid */
.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.bento-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r-xl);padding:20px;transition:all var(--normal);position:relative;overflow:hidden}
.bento-card:hover{border-color:var(--b2);transform:translateY(-1px);box-shadow:var(--sh)}
.bento-card.span-2{grid-column:span 2}
.bento-card.span-row-2{grid-row:span 2}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all var(--fast);white-space:nowrap;line-height:1}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--p);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.btn-primary:hover{background:var(--p-dark);box-shadow:0 4px 14px rgba(138,173,95,.3);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--b2);color:var(--t2)}
.btn-outline:hover{border-color:var(--p);color:var(--p-dark);background:var(--p-bg)}
.btn-ghost{background:transparent;color:var(--t3)}
.btn-ghost:hover{background:var(--bg3);color:var(--t1)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid transparent}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:6px}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:15px;border-radius:var(--r-lg)}

/* Inputs */
.input{width:100%;padding:9px 14px;border:1px solid var(--b1);border-radius:var(--r);font-size:13px;background:var(--bg);color:var(--t1);outline:none;font-family:inherit;transition:all var(--fast)}
.input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-bg)}
.input::placeholder{color:var(--t4)}
.input-mono{font-family:var(--ff-mono)}
textarea.input{resize:vertical;min-height:80px;line-height:1.5}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
.badge-p{background:var(--p-bg);color:var(--p-dark)}
.badge-gold{background:var(--gold-bg);color:var(--gold)}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-blue{background:var(--blue-bg);color:var(--blue)}
.badge-amber{background:var(--amber-bg);color:var(--amber)}

/* Tabs */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--b1);margin-bottom:20px}
.tab{padding:10px 18px;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--fast)}
.tab:hover{color:var(--t2)}
.tab.active{color:var(--p-dark);border-bottom-color:var(--p)}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--t1);color:var(--bg);padding:10px 24px;border-radius:var(--r);font-size:13px;font-weight:600;z-index:9999;opacity:0;transition:all var(--normal);pointer-events:none;box-shadow:var(--sh-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* Modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
.modal{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r-xl);padding:24px;width:100%;max-width:440px;box-shadow:var(--sh-lg);animation:scaleIn .15s ease}
.modal h3{font-size:16px;margin-bottom:16px}

/* Empty State */
.empty-state{text-align:center;padding:60px 20px}
.empty-state .es-icon{font-size:48px;margin-bottom:16px;opacity:0.4}
.empty-state h3{font-size:17px;color:var(--t1);margin-bottom:8px;font-weight:700}
.empty-state p{font-size:13px;color:var(--t3);max-width:400px;margin:0 auto 20px;line-height:1.6}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat-card{background:var(--bg);border:1px solid var(--b1);border-radius:var(--r-lg);padding:16px;text-align:center;transition:all var(--normal)}
.stat-card:hover{border-color:var(--p-border);box-shadow:var(--sh-glow)}
.stat-card .stat-value{font-size:24px;font-weight:800;color:var(--t1);line-height:1.2}
.stat-card .stat-label{font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
.stat-card .stat-sub{font-size:10px;color:var(--t3);margin-top:2px}

/* Code blocks */
code,pre{font-family:var(--ff-mono)}
code{font-size:12px;background:var(--bg3);padding:2px 6px;border-radius:4px;color:var(--p-dark)}
pre{background:var(--bg);border:1px solid var(--b1);border-radius:var(--r);padding:16px;overflow-x:auto;font-size:12px;line-height:1.6}

/* Divider */
.divider{height:1px;background:var(--b1);margin:16px 0}

/* ── Animations ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── Utility ── */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.text-sm{font-size:12px}.text-xs{font-size:11px}
.text-muted{color:var(--t4)}.text-accent{color:var(--p-dark)}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.mono{font-family:var(--ff-mono)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}

/* ── Responsive ── */
@media(max-width:768px){
  .app-sidebar{position:fixed;top:0;left:-100%;height:100vh;z-index:50;transition:left var(--slow);box-shadow:var(--sh-lg)}
  .app-sidebar.mobile-open{left:0}
  .app-sidebar.collapsed{width:var(--sidebar-w)}
  .bento-grid{grid-template-columns:1fr}
  .bento-card.span-2{grid-column:span 1}
  .app-content{padding:16px}
  .app-topbar{padding:0 12px;gap:6px;height:48px}
  :root{--topbar-h:48px}
  #mobile-menu-btn{display:flex!important}
  .tb-avatar{width:28px;height:28px;font-size:12px}
  .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:49}
  .sb-overlay.open{display:block}
}