/* =========================================
   1) VARIABLES (Design tokens)
   ========================================= */
:root {
  --background: #f5f5f7;
  --foreground: #0b0c0f;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --primary: #111319;
  --primary-contrast: #ffffff;
  --error: #ef4444;
  --ring: rgba(17,19,25,0.25);
  --shadow: 0 8px 24px rgba(0,0,0,0.08);

  /* UI surface helpers */
  --surface-muted: #f7f7f7;       /* subtle bg (e.g., active nav, hover) */
  --surface-soft: #f9fafb;        /* softer hover */
  --text-strong: #374151;         /* stronger text for pills */

  /* Derived accents */
  --primary-weak: rgba(17,19,25,0.15);
  
  /* Pills */
  --pill-text: var(--text-strong);
  --pill-border: var(--border);
   
  /* Layout */
  --sidebar-width: 240px;
   --sidebar-compact-width: 80px; /* mobile sidebar width */
}

/* =========================================
   2) BASE / RESET
   ========================================= */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
   background: var(--background);
   color: var(--foreground);
   font: 14px/1.5 -apple-system, system-ui, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* =========================================
   3) TYPOGRAPHY UTILITIES
   ========================================= */
.muted { color: var(--muted); }
.text-center { text-align: center; }
.brand-title { font-size: 20px; font-weight: 800; }
.brand-sep { margin: 0 8px; color: var(--muted); }
.brand-account { font-weight: 600; }

/* =========================================
   4) LAYOUT UTILITIES
   ========================================= */
.container { width: min(1100px, 92vw); margin: 0 auto; }
.centered { display: grid; place-items: center; min-height: 100vh; }
.min-h-screen { min-height: 100vh; }

.row { display: flex; flex-wrap: wrap; }
.row.align-end { align-items: end; }
.row .grow { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.grid { display: grid; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-responsive { grid-template-columns: repeat(2, minmax(0,1fr)); }

.gap-3 { gap: 12px; }
.gap-6 { gap: 24px; }

.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.mt-6 { margin-top: 24px; }
.p-24 { padding: 24px; }

.max-w-420 { max-width: 420px; }
.max-w-540 { max-width: 540px; }

/* =========================================
   5) APP SHELL & CONTENT
   ========================================= */
.app-shell { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.content { min-height: 60vh; }

/* =========================================
   6) SIDEBAR (FIXED)
   ========================================= */
.sidebar-fixed { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--card); z-index: 50; }
.sidebar-fixed .sidebar-inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 16px; }
.sidebar-fixed .brand-title { font-size: 16px; font-weight: 800; }
.sidebar-fixed .brand-block { display: flex; gap: 10px; flex-direction: column; }
.sidebar-fixed .brand-logo { width: 40px; height: 40px; border-radius: 6px; }
.sidebar-fixed .brand-account { color: var(--muted); font-size: 14px; }
.sidebar-fixed .sidebar-bottom { margin-top: 12px; display: flex; gap: 12px; flex-direction: column; }
.sidebar-fixed .btn-logout { width: 100%; border-color: var(--border); }

.nav-list { display: grid; gap: 4px; margin-top: 24px; }
.nav-list a { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.nav-list a:hover { background: var(--surface-soft); }
.nav-list a.active { background: var(--surface-muted); }
.nav-list a .icon { width: 18px; height: 18px; flex: 0 0 18px; color: inherit; margin-right: 4px; }

.nav-actions { display: flex; gap: 8px; flex-direction: column; margin-top: 24px; }
.sidebar-fixed .btn { justify-content: flex-start; }
.sidebar-fixed .btn:not(.btn-primary):hover { background: var(--surface-muted); color: var(--foreground); }
.sidebar-fixed .btn .icon { margin-right: 4px; }

.content-shell { margin-left: var(--sidebar-width); width: calc(100vw - var(--sidebar-width)); min-height: 100vh; display: flex; flex-direction: column; }

/* =========================================
   7) COMPONENTS — CARDS
   ========================================= */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.card-title { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; }

/* =========================================
   8) COMPONENTS — STACKS & FIELDS
   ========================================= */
.stack { display: grid; }
.stack.gap-3 { gap: 12px; }

.field { display: grid; gap: 8px; }
.field-label { color: var(--muted); font-size: 12px; }
.field-wide { width: 100%; }

.input { appearance: none; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { box-shadow: none; outline: none; border-color: var(--primary); }
.input-sm { padding: 6px 10px; border-radius: 8px; }

/* =========================================
   9) COMPONENTS — BUTTONS
   ========================================= */
.btn {
   appearance: none; display: flex; align-items: center; gap: 4px; text-decoration: none;
   border: 1px solid var(--border); background: var(--surface-soft); color: var(--foreground);
   padding: 10px 14px; border-radius: 10px; cursor: pointer;
   transition: transform .06s ease, background .2s, border-color .2s;
}
.small-btn { padding: 4px 10px; border-radius: 6px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--foreground); color: white; border-color: transparent; }
.btn-primary:hover { background: color-mix(in srgb, var(--foreground) 92%, white); }
.btn-ghost { background: transparent; }
.btn-text-left { text-align: left; }
.btn .icon { width: 18px; height: 18px; flex: 0 0 18px; color: inherit; margin-right: 4px; }

/* Icon-only buttons */
.icon-btn {
   display: inline-flex; align-items: center; justify-content: center;
   width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px;
   background: transparent; color: var(--muted); cursor: pointer;
   transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-muted); color: var(--foreground); }
.icon-btn:focus { outline: none; }

/* =========================================
   10) COMPONENTS — PILLS / TAGS
   ========================================= */
.pill {
   padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.025em;
   white-space: nowrap; border: 1px solid var(--pill-border); color: var(--pill-text); background: var(--surface-muted);
}

/* =========================================
   11) COMPONENTS — ALERTS
   ========================================= */
.alert { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); }
.alert-error {
   background: color-mix(in srgb, var(--error) 15%, transparent);
   border-color: color-mix(in srgb, var(--error) 40%, transparent);
   color: #fecaca;
}

/* =========================================
   12) COMPONENTS — TABLES
   ========================================= */
.table-wrap { overflow: auto; border-radius: 8px; border: 1px solid var(--border); margin-top: 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table tr:not(:last-child) { border-bottom: 1px solid var(--border); }
.table th, .table td { padding: 10px 15px; text-align: left; }
.table th { color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.table tbody td { white-space: nowrap; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end;}
/* Smaller icons inside table action cells */
.table .row-actions .icon { width: 14px; height: 14px; }
.table .row-actions .icon-btn { width: 24px; height: 24px; }

/* Past row highlight (current month only) */
.table tr.row-past td { opacity: 0.5; }

/* Table footer totals */
.table tfoot td { border-top: 1px solid var(--border); font-weight: 600; }
.total-label { color: var(--muted); }
.total-value { font-weight: 700; }

/* =========================================
   13) COMPONENTS — DIALOGS / MODALS
   ========================================= */
.dialog { border: none; border-radius: 14px; padding: 0; background: var(--card); color: var(--foreground); opacity:0; transform: scale(.98); transition: opacity .15s ease, transform .15s ease; }
.dialog[open]{ opacity:1; transform: scale(1); }
.dialog::backdrop { background: rgba(0,0,0,0.6); }
.dialog .dialog-title { margin: 0; font-weight: 600; }
.dialog-content { padding: 16px 18px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.dialog-header { display: flex; align-items: center; justify-content: space-between; }
.dialog .dialog-title { padding: 0; margin: 0; font-weight: 600; }
.dialog-wide { width: min(460px, 92vw); }
.dialog-header { padding: 16px 0; }
.dialog > .dialog-header { padding: 16px 18px; }

/* Search dialog specifics */
#search-dialog { height: 400px; overflow: hidden; }
#search-dialog[open] { display: flex; flex-direction: column; }
#search-dialog[open] .cmdk { display: grid; grid-template-rows: auto 1fr; height: 100%; min-height: 0; }
#search-dialog[open] .cmdk-results { height: 100%; overflow: auto; min-height: 0; max-height: none; }

/* =========================================
   14) COMPONENTS — SEARCH (cmdk)
   ========================================= */
.cmdk { display: grid; gap: 8px; padding: 0 18px 18px; }
.cmdk-input { width: 100%; }
.cmdk-results {
   background: var(--card);
   border-top: 1px solid var(--border);
   max-height: 360px; overflow: auto;
   border-radius: 0 0 12px 12px; padding-bottom: 18px;
}
.cmdk-item {
   display: flex; align-items: center; justify-content: space-between;
   padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
   border-radius: 10px; background: transparent;
}
.cmdk-item:last-child { border-bottom: none; }
.cmdk-item:hover { background: var(--surface-soft); }
.cmdk-title { font-weight: 600; }
.cmdk-meta { color: var(--muted); font-size: 12px; }
.cmdk-empty { padding: 12px; }
/* Inline small close inside item */
.cmdk-item .inline-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; margin-left: auto; }
.cmdk-item .inline-x .icon { width: 14px; height: 14px; }
.cmdk-item .inline-x:hover { background: var(--surface-muted); }

/* =========================================
   15) WORKSPACE & INVITES
   ========================================= */

.ws-list { display: grid; gap: 6px; }
.ws-list .cmdk-item { border: 1px solid var(--border); gap: 10px; }
.ws-list .cmdk-item.active { background: var(--surface-muted); }

.ws-group { display: grid; gap: 6px; }
.ws-group-label { color: var(--muted); font-size: 12px; }

.invite-item { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:10px; height: 42px; padding:10px 12px; font-size: 13px; }
.invite-item.empty { color: var(--muted); background: var(--surface-muted); }

.invite-actions { display:flex; gap:8px; }

/* =========================================
   16) ICONS
   ========================================= */
.icon { width: 18px; height: 18px; flex: 0 0 18px; color: inherit; }

/* =========================================
   17) SUMMARY / STATS
   ========================================= */
.summary-value { font-size: 18px; font-weight: 700; }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.stat { background-color: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.stat-label { color: var(--muted); font-size: 12px; }
.stat-value { font-size: 20px; font-weight: 700; }

.summary-bar { padding: 8px 0 0; }
.stats-inline { display: flex; gap: 16px; align-items: stretch; }
.stats-inline .stat { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background-color: var(--card); }
.stats-inline .stat-value { font-size: 18px; font-weight: 700; }

/* =========================================
   18) CHARTS
   ========================================= */
/* Sparkline */
.sparkline-wrap { width: 100%; height: 120px; }
svg.sparkline { width: 100%; height: 100%; }
svg.sparkline path.line { fill: none; stroke: var(--primary); stroke-width: 2; }
svg.sparkline path.area { fill: var(--primary-weak); }
svg.sparkline .axis { stroke: var(--border); stroke-width: 1; }
svg.sparkline .dot { fill: var(--primary); stroke: var(--card); stroke-width: 1; }
svg.sparkline text.month { fill: var(--muted); font-size: 10px; text-anchor: middle; }
svg.sparkline text.value { fill: var(--foreground); font-size: 10px; text-anchor: middle; }

/* Bar chart (12 months) */
.bars12m { width: 100%; height: 220px; overflow: auto; }
svg.barchart { width: 100%; height: 100%; }
svg.barchart .axis { stroke: var(--border); stroke-width: 1; }
svg.barchart .bar { fill: var(--primary); }
svg.barchart .bar-cap { fill: rgba(255,255,255,.25); }
svg.barchart text.month { fill: var(--muted); font-size: 10px; text-anchor: middle; }
svg.barchart text.value { fill: var(--foreground); font-size: 10px; text-anchor: middle; }

/* Bar chart (10 years) */
.bars10y { width: 100%; height: 220px; overflow: auto; }

/* =========================================
   19) LOADING / SKELETONS
   ========================================= */
.skeleton { position: relative; background: var(--border); border-radius: 6px; overflow: hidden; }
.skeleton::after {
   content: ""; position: absolute; inset: 0; transform: translateX(-100%);
   background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
   animation: shimmer 1.2s infinite;
}
.skel-line { height: 12px; }
.skel-stat { height: 24px; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* =========================================
   20) PAGE-SPECIFIC / NAV MOIS
   ========================================= */
.month-nav { display: flex; gap: 8px; align-items: center; }
.month-label { min-width: 100px; text-align: center; font-weight: 600; }

/* Utilities for skeleton sizing to avoid inline styles */
.util-w-90 { width: 90px; }
.util-w-120 { width: 120px; }
.util-w-100p { width: 100%; }
.util-h-16px { height: 16px; }
.util-mt-6px { margin-top: 6px; }
.util-h-140px { height: 140px; }
.util-h-180px { height: 180px; }

/* =========================================
   21) MISC UTILITIES
   ========================================= */
.hidden { display: none; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Toaster */
#toast-root{position:fixed;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;padding:10px 12px;opacity:0;transform:translateY(-6px);animation:toast-in .2s forwards;display:flex;align-items:center;gap:8px}
.toast-success{border-color:color-mix(in srgb, #16a34a 40%, var(--border));}
.toast-error{border-color:color-mix(in srgb, var(--error) 50%, var(--border));}
.toast-hide{animation:toast-out .25s forwards}
@keyframes toast-in{to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-6px)}}

/* =========================================
   22) RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
   /* Layout grids */
   .grid-responsive { grid-template-columns: 1fr; }
   .grid-3 { grid-template-columns: 1fr; }

   /* Stats inline scroll */
   .stats-inline { overflow: auto; padding-bottom: 8px; }

   /* Stats grid stack */
   .stats-grid { grid-template-columns: 1fr; }

   /* App shell collapse */
   .app-shell { grid-template-columns: 1fr; }

   /* Containers */
   .container { width: auto; }

   /* Sidebar compact */
   .sidebar-fixed { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-compact-width); }
   .content-shell { margin-left: var(--sidebar-compact-width); width: calc(100vw - var(--sidebar-compact-width)); }

   /* Sidebar items center */
   .nav-list a { justify-content: center; gap: 0; }
   .nav-list a .icon { margin-right: 0; }
   .sidebar-fixed .btn { justify-content: center; }
   .sidebar-fixed .btn .icon { margin-right: 0; }

   /* Hide text labels in compact mode */
   .sidebar-fixed .nav-list a span,
   .sidebar-fixed .btn span,
   .sidebar-fixed .brand-account { display: none; }

   .sidebar-content { text-align: center; }
}