/* ==========================================================================
   MODERN UI — styles.css
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout / flex / grid utilities
   5.  Header, nav & footer
   6.  Panels  (.dev / .card)
   7.  Buttons
   8.  Forms
   9.  Tables
   10. Components (badge, alert, progress, spinner, avatar, tabs, modal...)
   11. Utilities
   12. Responsive helpers
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  color-scheme: light;

  /* --- Brand ------------------------------------------------------------ */
  --primary:          #4f46e5;
  --primary-dark:     #4338ca;
  --primary-light:    #818cf8;
  --primary-soft:     #eef2ff;

  --accent:           #06b6d4;
  --accent-dark:      #0891b2;

  --success:          #10b981;
  --success-dark:     #059669;
  --success-soft:     #d1fae5;

  --warning:          #f59e0b;
  --warning-dark:     #d97706;
  --warning-soft:     #fef3c7;

  --danger:           #e11d48;
  --danger-dark:      #be123c;
  --danger-soft:      #ffe4e6;

  --info:             #0ea5e9;
  --info-dark:        #0284c7;
  --info-soft:        #e0f2fe;

  /* --- Text on soft backgrounds ---------------------------------------- */
  --on-soft-primary:  #4338ca;
  --on-soft-success:  #047857;
  --on-soft-warning:  #b45309;
  --on-soft-danger:   #be123c;
  --on-soft-info:     #0369a1;

  /* --- Surfaces --------------------------------------------------------- */
  --bg:               #f4f6fb;
  --surface:          #ffffff;
  --surface-2:        #f8fafc;
  --surface-3:        #eef2f7;
  --surface-inverse:  #0f172a;

  /* --- Lines & text ----------------------------------------------------- */
  --border:           #e2e8f0;
  --border-strong:    #cbd5e1;
  --text:             #0f172a;
  --text-muted:       #64748b;
  --text-faint:       #94a3b8;
  --text-invert:      #ffffff;
  --link:             #4f46e5;

  /* --- Radii ------------------------------------------------------------ */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill:999px;

  /* --- Shadows ---------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(15,23,42,.06);
  --sh-sm: 0 2px 6px rgba(15,23,42,.07);
  --sh-md: 0 8px 24px rgba(15,23,42,.10);
  --sh-lg: 0 20px 48px rgba(15,23,42,.16);

  /* --- Focus rings ------------------------------------------------------ */
  --ring:        0 0 0 4px rgba(79,70,229,.20);
  --ring-danger: 0 0 0 4px rgba(225,29,72,.20);
  --ring-success:0 0 0 4px rgba(16,185,129,.22);

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t:      180ms cubic-bezier(.4,0,.2,1);
  --t-slow: 320ms cubic-bezier(.4,0,.2,1);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gap:       1rem;
  --header-h:  64px;
}

/* --------------------------- DARK THEME ---------------------------------- */
:root[data-theme="dark"]{
  color-scheme: dark;

  --primary:          #6366f1;
  --primary-dark:     #4f46e5;
  --primary-light:    #a5b4fc;
  --primary-soft:     rgba(99,102,241,.18);

  --accent:           #22d3ee;
  --accent-dark:      #06b6d4;

  --success:          #10b981;
  --success-dark:     #059669;
  --success-soft:     rgba(16,185,129,.16);

  --warning:          #f59e0b;
  --warning-dark:     #d97706;
  --warning-soft:     rgba(245,158,11,.16);

  --danger:           #f43f5e;
  --danger-dark:      #e11d48;
  --danger-soft:      rgba(244,63,94,.16);

  --info:             #38bdf8;
  --info-dark:        #0ea5e9;
  --info-soft:        rgba(56,189,248,.16);

  --on-soft-primary:  #a5b4fc;
  --on-soft-success:  #6ee7b7;
  --on-soft-warning:  #fcd34d;
  --on-soft-danger:   #fda4af;
  --on-soft-info:     #7dd3fc;

  --bg:               #0b1020;
  --surface:          #121a2e;
  --surface-2:        #0f1626;
  --surface-3:        #1b2437;
  --surface-inverse:  #f8fafc;

  --border:           #243049;
  --border-strong:    #334155;
  --text:             #e8edf7;
  --text-muted:       #94a3b8;
  --text-faint:       #64748b;
  --text-invert:      #0b1020;
  --link:             #a5b4fc;

  --sh-xs: 0 1px 2px rgba(0,0,0,.45);
  --sh-sm: 0 2px 6px rgba(0,0,0,.45);
  --sh-md: 0 8px 24px rgba(0,0,0,.55);
  --sh-lg: 0 20px 48px rgba(0,0,0,.65);

  --ring:        0 0 0 4px rgba(99,102,241,.38);
  --ring-danger: 0 0 0 4px rgba(244,63,94,.38);
  --ring-success:0 0 0 4px rgba(16,185,129,.38);
}

/* Auto dark for users who have not forced a theme ------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --primary:          #6366f1;
    --primary-dark:     #4f46e5;
    --primary-light:    #a5b4fc;
    --primary-soft:     rgba(99,102,241,.18);

    --accent:           #22d3ee;
    --accent-dark:      #06b6d4;

    --success:          #10b981;
    --success-dark:     #059669;
    --success-soft:     rgba(16,185,129,.16);

    --warning:          #f59e0b;
    --warning-dark:     #d97706;
    --warning-soft:     rgba(245,158,11,.16);

    --danger:           #f43f5e;
    --danger-dark:      #e11d48;
    --danger-soft:      rgba(244,63,94,.16);

    --info:             #38bdf8;
    --info-dark:        #0ea5e9;
    --info-soft:        rgba(56,189,248,.16);

    --on-soft-primary:  #a5b4fc;
    --on-soft-success:  #6ee7b7;
    --on-soft-warning:  #fcd34d;
    --on-soft-danger:   #fda4af;
    --on-soft-info:     #7dd3fc;

    --bg:               #0b1020;
    --surface:          #121a2e;
    --surface-2:        #0f1626;
    --surface-3:        #1b2437;
    --surface-inverse:  #f8fafc;

    --border:           #243049;
    --border-strong:    #334155;
    --text:             #e8edf7;
    --text-muted:       #94a3b8;
    --text-faint:       #64748b;
    --text-invert:      #0b1020;
    --link:             #a5b4fc;

    --sh-xs: 0 1px 2px rgba(0,0,0,.45);
    --sh-sm: 0 2px 6px rgba(0,0,0,.45);
    --sh-md: 0 8px 24px rgba(0,0,0,.55);
    --sh-lg: 0 20px 48px rgba(0,0,0,.65);

    --ring:        0 0 0 4px rgba(99,102,241,.38);
    --ring-danger: 0 0 0 4px rgba(244,63,94,.38);
    --ring-success:0 0 0 4px rgba(16,185,129,.38);
  }
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size:16px;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background var(--t-slow), color var(--t-slow);
}

img,svg,video,canvas{ max-width:100%; display:block; }
input,button,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:none; }
ul,ol{ padding-left:1.25rem; }
hr{
  border:0; height:1px; background:var(--border);
  margin:1.75rem 0;
}
::selection{ background:var(--primary); color:#fff; }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,h6{
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:.5em;
}
h1{ font-size:clamp(1.85rem, 1.35rem + 2.2vw, 2.75rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem); letter-spacing:-.03em; }
h3{ font-size:clamp(1.2rem,  1.05rem + .7vw, 1.55rem); }
h4{ font-size:1.125rem; }
h5{ font-size:1rem; }
h6{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--text-muted);
  font-weight:700;
}

p{ margin-bottom:1rem; }
p:last-child{ margin-bottom:0; }

.lead{ font-size:1.125rem; color:var(--text-muted); font-weight:400; }
small,.small{ font-size:.8125rem; }
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.strong{ font-weight:700; }

a{
  color:var(--link);
  text-decoration:none;
  border-radius:var(--r-xs);
  transition: color var(--t), background var(--t), box-shadow var(--t);
}
a:hover{ text-decoration:underline; text-underline-offset:3px; }
a:focus-visible{ outline:none; box-shadow:var(--ring); }

code,kbd,samp,pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
code{
  font-size:.86em;
  background:var(--surface-3);
  color:var(--on-soft-primary);
  padding:.15em .45em;
  border-radius:var(--r-xs);
  border:1px solid var(--border);
}
kbd{
  font-size:.78em;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-bottom-width:2px;
  border-radius:var(--r-sm);
  padding:.15em .45em;
  box-shadow:var(--sh-xs);
}
pre{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1rem 1.15rem;
  overflow-x:auto;
  font-size:.875rem;
  line-height:1.55;
}
pre code{ background:none; border:0; padding:0; color:inherit; }

blockquote{
  border-left:4px solid var(--primary);
  background:var(--primary-soft);
  color:var(--on-soft-primary);
  padding:.9rem 1.15rem;
  border-radius:0 var(--r-md) var(--r-md) 0;
  margin-bottom:1rem;
  font-style:italic;
}
blockquote footer{ font-style:normal; font-size:.85rem; opacity:.8; margin-top:.35rem; }

.list-clean{ list-style:none; padding-left:0; }
.list-clean li{
  padding:.5rem 0;
  border-bottom:1px solid var(--border);
}
.list-clean li:last-child{ border-bottom:0; }


/* ==========================================================================
   4. LAYOUT — container, flex, grid utilities
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1rem, 3vw, 2rem);
}
.container-wide{ max-width:1500px; }
.container-narrow{ max-width:760px; }

.section{ padding-block:2.5rem; }
.section + .section{ border-top:1px solid var(--border); }

/* --- Flex core ----------------------------------------------------------- */
.flex          { display:flex; }
.inline-flex   { display:inline-flex; }
.flex-col      { flex-direction:column; }
.flex-row      { flex-direction:row; }
.flex-wrap     { flex-wrap:wrap; }
.flex-nowrap   { flex-wrap:nowrap; }
.flex-1        { flex:1 1 0%; min-width:0; }
.flex-auto     { flex:1 1 auto; min-width:0; }
.flex-none     { flex:none; }

.items-start   { align-items:flex-start; }
.items-center  { align-items:center; }
.items-end     { align-items:flex-end; }
.items-stretch { align-items:stretch; }
.items-baseline{ align-items:baseline; }

.justify-start  { justify-content:flex-start; }
.justify-center { justify-content:center; }
.justify-end    { justify-content:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-around { justify-content:space-around; }
.justify-evenly { justify-content:space-evenly; }

.self-start { align-self:flex-start; }
.self-center{ align-self:center; }
.self-end   { align-self:flex-end; }
.self-stretch{ align-self:stretch; }

.center-all{ display:flex; align-items:center; justify-content:center; }

/* --- Gaps ---------------------------------------------------------------- */
.gap-0{ gap:0; }
.gap-1{ gap:.25rem; }
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-4{ gap:1rem; }
.gap-5{ gap:1.5rem; }
.gap-6{ gap:2rem; }
.gap-8{ gap:3rem; }

/* --- Grid ---------------------------------------------------------------- */
.grid{ display:grid; gap:var(--gap); }
.grid-2{ display:grid; gap:var(--gap); grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ display:grid; gap:var(--gap); grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-4{ display:grid; gap:var(--gap); grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid-auto{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.grid-auto-sm{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }

/* --- Toolbar ------------------------------------------------------------- */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  padding:.75rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs);
}
.toolbar .spacer{ flex:1 1 auto; }


/* ==========================================================================
   5. HEADER, NAV & FOOTER
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--sh-xs);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:var(--header-h);
  flex-wrap:wrap;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.02em;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{ text-decoration:none; color:var(--primary); }
.brand-mark{
  width:32px; height:32px;
  border-radius:9px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
  font-size:.85rem;
  font-weight:800;
  box-shadow:var(--sh-sm);
  flex:none;
}

.nav{
  display:flex;
  align-items:center;
  gap:.25rem;
  flex-wrap:wrap;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  padding:.5rem .8rem;
  border-radius:var(--r-md);
  font-size:.9rem;
  font-weight:600;
  color:var(--text-muted);
  text-decoration:none;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.nav-link:hover{
  background:var(--primary-soft);
  color:var(--on-soft-primary);
  text-decoration:none;
}
.nav-link:focus-visible{ outline:none; box-shadow:var(--ring); }
.nav-link.is-active{
  background:var(--primary);
  color:#fff;
}
.nav-link.is-active:hover{ background:var(--primary-dark); color:#fff; }

.site-footer{
  margin-top:auto;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding-block:2.25rem 1.5rem;
  color:var(--text-muted);
  font-size:.9rem;
}
.footer-grid{
  display:grid;
  gap:1.75rem;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom:1.5rem;
}
.footer-col h5{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--text-faint);
  margin-bottom:.75rem;
}
.footer-col ul{ list-style:none; padding:0; }
.footer-col li{ margin-bottom:.4rem; }
.footer-col a{ color:var(--text-muted); }
.footer-col a:hover{ color:var(--primary); }
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:1.1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  justify-content:space-between;
  font-size:.82rem;
}


/* ==========================================================================
   6. PANELS — .dev  (group container with a distinct area on the page)
   ========================================================================== */
.dev{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.25rem 1.5rem;
  box-shadow:var(--sh-sm);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.dev:hover{ box-shadow:var(--sh-md); }
.dev > :last-child{ margin-bottom:0; }

.dev-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--border);
}
.dev-title{
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0;
}
.dev-subtitle{
  font-size:.83rem;
  color:var(--text-muted);
  margin:.15rem 0 0;
  font-weight:400;
}
.dev-body{ }
.dev-footer{
  margin-top:1rem;
  padding-top:.9rem;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

/* Modifiers */
.dev-accent       { border-left:4px solid var(--primary); }
.dev-accent-success{ border-left:4px solid var(--success); }
.dev-accent-warning{ border-left:4px solid var(--warning); }
.dev-accent-danger { border-left:4px solid var(--danger); }
.dev-muted  { background:var(--surface-2); box-shadow:none; }
.dev-flush  { padding:0; overflow:hidden; }        /* perfect for tables   */
.dev-flush .dev-header{ padding:1.25rem 1.5rem 0; border-bottom:0; margin-bottom:.75rem; }
.dev-flush .dev-footer{ padding:0 1.5rem 1.25rem; }
.dev-compact{ padding:.85rem 1rem; border-radius:var(--r-md); }
.dev-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

/* Aliases so you can call it a card/panel if you prefer */
.card, .panel{ /* same look as .dev */ }
.card, .panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.25rem 1.5rem;
  box-shadow:var(--sh-sm);
}

/* Stat block */
.stat{ display:flex; flex-direction:column; gap:.15rem; }
.stat-value{ font-size:1.85rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.stat-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:600; }


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--surface);
  --btn-fg:var(--text);
  --btn-bd:var(--border-strong);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.625rem 1.15rem;
  font-size:.9rem;
  font-weight:600;
  line-height:1.15;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition: background var(--t), color var(--t), border-color var(--t),
              box-shadow var(--t), transform var(--t-fast), opacity var(--t);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--sh-md);
  text-decoration:none;
}
.btn:active{ transform:translateY(0) scale(.985); box-shadow:var(--sh-xs); }
.btn:focus-visible{ outline:none; box-shadow:var(--ring), var(--sh-sm); }
.btn:disabled,
.btn[disabled],
.btn.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  pointer-events:none;
}

/* --- Variants ------------------------------------------------------------ */
.btn-primary{
  --btn-bg:var(--primary); --btn-fg:#fff; --btn-bd:var(--primary);
}
.btn-primary:hover{ --btn-bg:var(--primary-dark); --btn-bd:var(--primary-dark); }
.btn-primary:focus-visible{ box-shadow:var(--ring), var(--sh-sm); }

.btn-secondary{
  --btn-bg:var(--surface-3); --btn-fg:var(--text); --btn-bd:var(--border);
}
.btn-secondary:hover{ --btn-bg:var(--border); --btn-bd:var(--border-strong); }

.btn-accent{ --btn-bg:var(--accent); --btn-fg:#04212b; --btn-bd:var(--accent); }
.btn-accent:hover{ --btn-bg:var(--accent-dark); --btn-bd:var(--accent-dark); --btn-fg:#fff; }

.btn-success{ --btn-bg:var(--success); --btn-fg:#04231a; --btn-bd:var(--success); }
.btn-success:hover{ --btn-bg:var(--success-dark); --btn-bd:var(--success-dark); --btn-fg:#fff; }
.btn-success:focus-visible{ box-shadow:var(--ring-success), var(--sh-sm); }

.btn-warning{ --btn-bg:var(--warning); --btn-fg:#3a2503; --btn-bd:var(--warning); }
.btn-warning:hover{ --btn-bg:var(--warning-dark); --btn-bd:var(--warning-dark); --btn-fg:#fff; }

.btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--text-muted); --btn-bd:transparent;
  box-shadow:none;
}
.btn-ghost:hover{
  --btn-bg:var(--primary-soft); --btn-fg:var(--on-soft-primary);
  box-shadow:none;
}

.btn-outline{
  --btn-bg:transparent; --btn-fg:var(--primary); --btn-bd:var(--primary);
  box-shadow:none;
}
.btn-outline:hover{ --btn-bg:var(--primary); --btn-fg:#fff; }

.btn-link{
  --btn-bg:transparent; --btn-fg:var(--link); --btn-bd:transparent;
  box-shadow:none; padding-inline:.35rem;
}
.btn-link:hover{ text-decoration:underline; box-shadow:none; transform:none; }

/* --- DELETE button (full word) ------------------------------------------- */
.btn-delete{
  --btn-bg:var(--danger);
  --btn-fg:#fff;
  --btn-bd:var(--danger);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:800;
  font-size:.82rem;
  padding:.65rem 1.25rem;
}
.btn-delete:hover{
  --btn-bg:var(--danger-dark);
  --btn-bd:var(--danger-dark);
  box-shadow:0 8px 20px rgba(225,29,72,.32);
}
.btn-delete:focus-visible{ box-shadow:var(--ring-danger), var(--sh-sm); }

/* --- DELETE button (short "DEL") ----------------------------------------- */
.btn-del{
  --btn-bg:var(--danger-soft);
  --btn-fg:var(--on-soft-danger);
  --btn-bd:transparent;
  padding:.35rem .6rem;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-radius:var(--r-sm);
  box-shadow:none;
}
.btn-del:hover{
  --btn-bg:var(--danger);
  --btn-fg:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(225,29,72,.3);
}
.btn-del:focus-visible{ box-shadow:var(--ring-danger); }

/* --- Outline danger (secondary destructive action) ----------------------- */
.btn-danger-outline{
  --btn-bg:transparent; --btn-fg:var(--danger); --btn-bd:var(--danger);
  box-shadow:none;
}
.btn-danger-outline:hover{ --btn-bg:var(--danger); --btn-fg:#fff; }

/* --- Sizes --------------------------------------------------------------- */
.btn-xs{ padding:.3rem .55rem; font-size:.72rem; border-radius:var(--r-sm); }
.btn-sm{ padding:.45rem .8rem; font-size:.82rem; border-radius:var(--r-sm); }
.btn-lg{ padding:.85rem 1.6rem; font-size:1rem; border-radius:var(--r-lg); }
.btn-block{ display:flex; width:100%; }

/* --- Icon-only / square -------------------------------------------------- */
.btn-icon{
  padding:0;
  width:2.4rem; height:2.4rem;
  border-radius:var(--r-md);
  font-size:1rem;
}
.btn-icon.btn-sm{ width:1.9rem; height:1.9rem; font-size:.8rem; }

/* --- Button group -------------------------------------------------------- */
.btn-group{ display:inline-flex; }
.btn-group .btn{ border-radius:0; margin-left:-1px; box-shadow:none; }
.btn-group .btn:first-child{ border-radius:var(--r-md) 0 0 var(--r-md); margin-left:0; }
.btn-group .btn:last-child{ border-radius:0 var(--r-md) var(--r-md) 0; }
.btn-group .btn:hover{ position:relative; z-index:2; }


/* ==========================================================================
   8. FORMS
   ========================================================================== */
.form{ display:flex; flex-direction:column; gap:1.15rem; }

.form-grid{
  display:grid;
  gap:1.15rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.form-grid .span-2{ grid-column:span 2; }
.form-grid .span-full{ grid-column:1 / -1; }

.field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }

.label{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.label .req{ color:var(--danger); font-size:.9em; }

.help{
  font-size:.78rem;
  color:var(--text-faint);
  line-height:1.45;
}

/* --- Inputs, selects, textareas ------------------------------------------ */
.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
select,
textarea{
  width:100%;
  padding:.65rem .85rem;
  font-size:.925rem;
  font-family:inherit;
  line-height:1.45;
  color:var(--text);
  background:var(--surface);
  border:1.5px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs);
  outline:none;
  appearance:none;
  transition: border-color var(--t), box-shadow var(--t),
              background var(--t), transform var(--t-fast);
}

/* Hover — the "preview" of the selected state */
.input:hover,
.select:hover,
.textarea:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):hover,
select:hover,
textarea:hover{
  border-color:var(--primary-light);
  background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(79,70,229,.10), var(--sh-xs);
}

/* Focus / selected — the state that REMAINS */
.input:focus,
.select:focus,
.textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus{
  border-color:var(--primary);
  background:var(--surface);
  box-shadow:var(--ring), var(--sh-xs);
}

.input::placeholder,
.textarea::placeholder,
input::placeholder,
textarea::placeholder{ color:var(--text-faint); opacity:1; }

.textarea,
textarea{
  min-height:120px;
  resize:vertical;
  line-height:1.55;
}

/* Select arrow (inline SVG, no external file) */
select,
.select{
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:16px;
  cursor:pointer;
}
select[multiple]{ background-image:none; padding-right:.85rem; min-height:130px; }
select[multiple] option{ padding:.35rem .5rem; border-radius:var(--r-xs); }
select[multiple] option:checked{
  background:var(--primary) linear-gradient(0deg, var(--primary), var(--primary));
  color:#fff;
}

/* Number spinners */
input[type="number"]{ -moz-appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.number-wrap{ position:relative; display:flex; align-items:center; }
.number-wrap .input{ padding-right:2.2rem; }

/* Date / time picker indicator */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.55;
  transition:opacity var(--t), transform var(--t);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator{
  opacity:1;
  transform:scale(1.08);
}

/* Color input */
input[type="color"]{
  padding:.25rem;
  height:2.7rem;
  cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
input[type="color"]::-webkit-color-swatch{ border:none; border-radius:var(--r-sm); }

/* File input */
input[type="file"]{
  padding:.55rem .65rem;
  cursor:pointer;
  font-size:.85rem;
}
input[type="file"]::file-selector-button{
  font:inherit;
  font-size:.82rem;
  font-weight:600;
  margin-right:.75rem;
  padding:.4rem .8rem;
  border:1px solid var(--primary);
  border-radius:var(--r-sm);
  background:var(--primary-soft);
  color:var(--on-soft-primary);
  cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t);
}
input[type="file"]:hover::file-selector-button{
  background:var(--primary);
  color:#fff;
}

/* Range slider */
input[type="range"]{
  width:100%;
  height:6px;
  padding:0;
  border:none;
  background:var(--surface-3);
  border-radius:var(--r-pill);
  box-shadow:none;
  appearance:none;
  cursor:pointer;
}
input[type="range"]:hover{ background:var(--border); box-shadow:none; border:none; }
input[type="range"]:focus{ box-shadow:var(--ring); border:none; background:var(--surface-3); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--primary);
  border:3px solid var(--surface);
  box-shadow:var(--sh-sm);
  transition:transform var(--t), background var(--t);
}
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.15); }
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px;
  border-radius:50%;
  background:var(--primary);
  border:3px solid var(--surface);
  box-shadow:var(--sh-sm);
}

/* Checkbox & radio */
input[type="checkbox"],
input[type="radio"]{
  width:1.15rem;
  height:1.15rem;
  flex:none;
  accent-color:var(--primary);
  cursor:pointer;
  transition:transform var(--t-fast), box-shadow var(--t);
}
input[type="checkbox"]:hover,
input[type="radio"]:hover{ transform:scale(1.12); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:var(--r-xs);
}

.check{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
  font-size:.9rem;
  padding:.3rem .1rem;
  border-radius:var(--r-sm);
  transition:color var(--t);
  user-select:none;
}
.check:hover{ color:var(--primary); }
.check input{ margin:0; }

/* Check/radio "card" — selected state persists */
.choice{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.85rem 1rem;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--t), background var(--t), box-shadow var(--t);
}
.choice:hover{
  border-color:var(--primary-light);
  background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(79,70,229,.10);
}
.choice:has(input:checked){
  border-color:var(--primary);
  background:var(--primary-soft);
  box-shadow:var(--ring);
}
.choice input{ margin-top:.15rem; }
.choice-title{ font-weight:600; font-size:.92rem; }
.choice-desc{ font-size:.8rem; color:var(--text-muted); }

/* Switch / toggle */
.switch{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  cursor:pointer;
  user-select:none;
  font-size:.9rem;
}
.switch input{
  position:absolute;
  opacity:0;
  width:0; height:0;
  pointer-events:none;
}
.switch .track{
  position:relative;
  flex:none;
  width:46px; height:26px;
  border-radius:var(--r-pill);
  background:var(--border-strong);
  transition:background var(--t), box-shadow var(--t);
}
.switch .track::after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--sh-sm);
  transition:transform var(--t);
}
.switch:hover .track{ background:var(--primary-light); }
.switch input:checked + .track{ background:var(--primary); }
.switch input:checked + .track::after{ transform:translateX(20px); }
.switch input:focus-visible + .track{ box-shadow:var(--ring); }

/* Input with inline addon */
.input-group{ display:flex; align-items:stretch; width:100%; }
.input-group > .input,
.input-group > .select{ border-radius:0; }
.input-group > :first-child{ border-radius:var(--r-md) 0 0 var(--r-md); }
.input-group > :last-child{ border-radius:0 var(--r-md) var(--r-md) 0; }
.input-group > * + *{ margin-left:-1.5px; }
.input-addon{
  display:inline-flex;
  align-items:center;
  padding:0 .9rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-muted);
  background:var(--surface-3);
  border:1.5px solid var(--border-strong);
  white-space:nowrap;
}

/* Validation states */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea,
.input.is-invalid{
  border-color:var(--danger);
  background:var(--danger-soft);
}
.field.is-invalid .input:focus,
.input.is-invalid:focus{ box-shadow:var(--ring-danger); }
.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea,
.input.is-valid{ border-color:var(--success); }
.field.is-valid .input:focus,
.input.is-valid:focus{ box-shadow:var(--ring-success); }
.error-text{ font-size:.78rem; color:var(--danger); font-weight:600; }

/* Fieldset */
fieldset{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.1rem 1.25rem 1.25rem;
  background:var(--surface-2);
}
legend{
  padding:0 .5rem;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--text-muted);
}

/* Submit button (input-based, styled like .btn-primary) */
input[type="submit"],
button[type="submit"].btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.7rem 1.4rem;
  font-size:.92rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  border:1px solid var(--primary);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  cursor:pointer;
  transition:transform var(--t-fast), box-shadow var(--t), filter var(--t);
}
input[type="submit"]:hover,
button[type="submit"].btn-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(79,70,229,.35);
  filter:brightness(1.06);
}
input[type="submit"]:active{ transform:translateY(0); }
input[type="submit"]:focus-visible{ outline:none; box-shadow:var(--ring), var(--sh-sm); }


/* ==========================================================================
   9. TABLES
   ========================================================================== */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
  min-width:560px;
}
.table caption{
  caption-side:top;
  text-align:left;
  padding:.85rem 1rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.table thead th{
  position:sticky;
  top:0;
  z-index:1;
  text-align:left;
  padding:.8rem 1rem;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-muted);
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.table tbody td{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.table tbody tr{ transition:background var(--t-fast), box-shadow var(--t-fast); }

/* column helpers */
.table .col-num,
.table .col-right{ text-align:right; font-variant-numeric:tabular-nums; }
.table .col-center{ text-align:center; }
.table .col-actions{ text-align:right; white-space:nowrap; width:1%; }

/* striped — defined BEFORE hover so hover wins */
.table-striped tbody tr:nth-child(odd){ background:var(--surface-2); }

.table-hover tbody tr:hover{ background:var(--primary-soft); }
.table tbody tr:hover{ background:var(--primary-soft); }

.table tbody tr.is-selected{
  background:var(--primary-soft);
  box-shadow:inset 3px 0 0 var(--primary);
}
.table tbody tr:last-child td{ border-bottom:none; }

.table tfoot td{
  padding:.8rem 1rem;
  background:var(--surface-2);
  border-top:2px solid var(--border);
  font-weight:700;
  font-size:.88rem;
}

.table-sm tbody td,
.table-sm thead th{ padding:.5rem .7rem; font-size:.85rem; }
.table-fixed{ table-layout:fixed; }

/* Responsive stacked table (add .table-stack + data-label="Header" on <td>) */
@media (max-width: 640px){
  .table-stack{ min-width:0; }
  .table-stack thead{ display:none; }
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td{ display:block; width:100%; }
  .table-stack tr{
    border:1px solid var(--border);
    border-radius:var(--r-md);
    margin-bottom:.75rem;
    background:var(--surface);
    overflow:hidden;
  }
  .table-stack tbody tr:hover{ background:var(--surface); }
  .table-stack td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    text-align:right;
    border-bottom:1px dashed var(--border);
    padding:.6rem .85rem;
  }
  .table-stack td:last-child{ border-bottom:0; }
  .table-stack td::before{
    content:attr(data-label);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-muted);
    text-align:left;
  }
  .table-stack td.col-actions{ justify-content:flex-end; }
}

/* --- 9.1 Sticky actions column ------------------------------------------ */
/* Pins a right-aligned action column (e.g. edit/delete buttons) to the
   right edge of .table-wrap, so it stays visible when the table scrolls
   horizontally. Works in both light and dark themes via the tokens. */
.table th.col-actions,
.table td.col-actions{
  position:sticky;
  right:0;
  z-index:2;
  background:var(--surface);
  box-shadow:-8px 0 10px -8px rgba(15,23,42,.20);
}

/* Header must sit above body cells while scrolling */
.table thead th.col-actions{
  background:var(--surface-2);
  z-index:3;
}

/* Match the row backgrounds so the pinned cell blends in */
.table-striped tbody tr:nth-child(odd) td.col-actions{
  background:var(--surface-2);
}
.table tbody tr:hover td.col-actions,
.table-hover tbody tr:hover td.col-actions{
  background:var(--primary-soft);
}
.table tbody tr.is-selected td.col-actions{
  background:var(--primary-soft);
}

/* ==========================================================================
   10. COMPONENTS
   ========================================================================== */

/* --- Badge --------------------------------------------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.2rem .6rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.5;
  border-radius:var(--r-pill);
  background:var(--surface-3);
  color:var(--text-muted);
  white-space:nowrap;
}
.badge-primary{ background:var(--primary-soft); color:var(--on-soft-primary); }
.badge-success{ background:var(--success-soft); color:var(--on-soft-success); }
.badge-warning{ background:var(--warning-soft); color:var(--on-soft-warning); }
.badge-danger { background:var(--danger-soft);  color:var(--on-soft-danger); }
.badge-info   { background:var(--info-soft);    color:var(--on-soft-info); }
.badge-solid  { background:var(--primary); color:#fff; }

/* --- Alert --------------------------------------------------------------- */
.alert{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  padding:.9rem 1.1rem;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  border-left-width:4px;
  background:var(--surface-2);
  font-size:.9rem;
  line-height:1.5;
  margin-bottom:1rem;
}
.alert-title{ font-weight:700; margin-bottom:.15rem; }
.alert-icon{ font-size:1.1rem; line-height:1.3; flex:none; }
.alert-info   { background:var(--info-soft);    border-color:var(--info);    color:var(--on-soft-info); }
.alert-success{ background:var(--success-soft); border-color:var(--success); color:var(--on-soft-success); }
.alert-warning{ background:var(--warning-soft); border-color:var(--warning); color:var(--on-soft-warning); }
.alert-danger { background:var(--danger-soft);  border-color:var(--danger);  color:var(--on-soft-danger); }
.alert a{ color:inherit; text-decoration:underline; font-weight:600; }

/* --- Progress ------------------------------------------------------------ */
.progress{
  width:100%;
  height:10px;
  background:var(--surface-3);
  border-radius:var(--r-pill);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08);
}
.progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  border-radius:var(--r-pill);
  transition:width var(--t-slow);
}
.progress-sm{ height:6px; }
.progress-lg{ height:16px; }
.progress-success .progress-bar{ background:linear-gradient(90deg, var(--success), #34d399); }
.progress-warning .progress-bar{ background:linear-gradient(90deg, var(--warning), #fbbf24); }
.progress-danger  .progress-bar{ background:linear-gradient(90deg, var(--danger),  #fb7185); }

/* --- Spinner ------------------------------------------------------------- */
.spinner{
  display:inline-block;
  width:22px; height:22px;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex:none;
}
.spinner-sm{ width:15px; height:15px; border-width:2px; }
.spinner-lg{ width:38px; height:38px; border-width:4px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --- Avatar -------------------------------------------------------------- */
.avatar{
  display:inline-grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--on-soft-primary);
  font-weight:700;
  font-size:.85rem;
  flex:none;
  overflow:hidden;
  border:2px solid var(--surface);
  box-shadow:var(--sh-xs);
}
.avatar-sm{ width:28px; height:28px; font-size:.72rem; }
.avatar-lg{ width:52px; height:52px; font-size:1.05rem; }
.avatar-group{ display:flex; }
.avatar-group .avatar + .avatar{ margin-left:-10px; }

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  list-style:none;
  padding:0;
  font-size:.85rem;
  color:var(--text-muted);
}
.breadcrumb li + li::before{
  content:"/";
  margin-right:.4rem;
  color:var(--text-faint);
}
.breadcrumb a{ color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--primary); }
.breadcrumb [aria-current="page"]{ color:var(--text); font-weight:600; }

/* --- Pagination ---------------------------------------------------------- */
.pagination{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  list-style:none;
  padding:0;
  margin:0;
}
.pagination a,
.pagination span{
  display:inline-grid;
  place-items:center;
  min-width:36px;
  height:36px;
  padding:0 .6rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  text-decoration:none;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.pagination a:hover{
  background:var(--primary-soft);
  color:var(--on-soft-primary);
  border-color:var(--primary-light);
  transform:translateY(-1px);
  text-decoration:none;
}
.pagination .is-active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.pagination .is-disabled{ opacity:.45; pointer-events:none; }

/* --- List group ---------------------------------------------------------- */
.list-group{
  list-style:none;
  padding:0;
  margin:0;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
}
.list-group-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  font-size:.9rem;
  transition:background var(--t-fast);
}
.list-group-item:last-child{ border-bottom:0; }
.list-group-item:hover{ background:var(--primary-soft); }
.list-group-item.is-active{
  background:var(--primary-soft);
  box-shadow:inset 3px 0 0 var(--primary);
  color:var(--on-soft-primary);
  font-weight:600;
}

/* --- Accordion (details/summary) ----------------------------------------- */
.accordion{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
}
.accordion details + details{ border-top:1px solid var(--border); }
.accordion summary{
  cursor:pointer;
  padding:.85rem 1.1rem;
  font-weight:600;
  font-size:.92rem;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  transition:background var(--t), color var(--t);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content:"+";
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-muted);
  transition:transform var(--t);
}
.accordion details[open] summary::after{ transform:rotate(45deg); }
.accordion summary:hover{ background:var(--primary-soft); color:var(--on-soft-primary); }
.accordion summary:focus-visible{ outline:none; box-shadow:inset var(--ring); }
.accordion .accordion-body{
  padding:0 1.1rem 1rem;
  font-size:.9rem;
  color:var(--text-muted);
}

/* --- Tabs (pure CSS, radio driven) --------------------------------------- */
.tabs{ width:100%; }
.tabs input[type="radio"]{
  position:absolute;
  opacity:0;
  width:0; height:0;
  pointer-events:none;
}
.tab-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  border-bottom:1px solid var(--border);
  margin-bottom:1rem;
}
.tab-nav label{
  padding:.6rem 1rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  cursor:pointer;
  transition:color var(--t), border-color var(--t), background var(--t);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.tab-nav label:hover{ color:var(--primary); background:var(--primary-soft); }
.tab-panel{ display:none; animation:fadeIn var(--t-slow) both; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
#tab1:checked ~ .tab-nav label[for="tab1"],
#tab2:checked ~ .tab-nav label[for="tab2"],
#tab3:checked ~ .tab-nav label[for="tab3"]{
  color:var(--primary);
  border-bottom-color:var(--primary);
  background:var(--primary-soft);
}
#tab1:checked ~ .tab-panels #panel1,
#tab2:checked ~ .tab-panels #panel2,
#tab3:checked ~ .tab-panels #panel3{ display:block; }

/* --- Tooltip ------------------------------------------------------------- */
[data-tip]{ position:relative; }
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translate(-50%, 4px);
  background:var(--surface-inverse);
  color:var(--bg);
  font-size:.75rem;
  font-weight:600;
  padding:.35rem .6rem;
  border-radius:var(--r-sm);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t), transform var(--t);
  z-index:60;
  box-shadow:var(--sh-md);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after{
  opacity:1;
  transform:translate(-50%, 0);
}

/* --- Modal (native <dialog>) --------------------------------------------- */
.modal{
  margin:auto;                                 /* centers native <dialog>   */
  width:min(560px, calc(100vw - 2rem));
  max-height:calc(100vh - 2rem);               /* never taller than viewport */
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--sh-lg);
  overflow:auto;                               /* scroll long content       */
}
.modal::backdrop{
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(3px);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.35rem;
  border-bottom:1px solid var(--border);
}
.modal-title{ font-size:1.05rem; font-weight:700; margin:0; }
.modal-body{ padding:1.35rem; font-size:.92rem; }
.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  padding:1rem 1.35rem;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  flex-wrap:wrap;
}

/* --- Empty state --------------------------------------------------------- */
.empty-state{
  text-align:center;
  padding:3rem 1.5rem;
  color:var(--text-muted);
}
.empty-state .icon{
  font-size:2.5rem;
  margin-bottom:.75rem;
  opacity:.6;
}

/* --- Skeleton loader ----------------------------------------------------- */
.skeleton{
  background:linear-gradient(90deg, var(--surface-3) 25%, var(--border) 37%, var(--surface-3) 63%);
  background-size:400% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
  border-radius:var(--r-sm);
  height:1rem;
  width:100%;
}
@keyframes shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }


/* ==========================================================================
   11. UTILITIES
   ========================================================================== */
.w-full   { width:100%; }
.h-full   { height:100%; }
.min-w-0  { min-width:0; }
.max-w-sm { max-width:420px; }
.max-w-md { max-width:640px; }
.max-w-lg { max-width:900px; }

.text-left  { text-align:left; }
.text-center{ text-align:center; }
.text-right { text-align:right; }
.text-upper { text-transform:uppercase; letter-spacing:.06em; }
.text-nowrap{ white-space:nowrap; }
.text-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.text-primary{ color:var(--primary); }
.text-success{ color:var(--success); }
.text-warning{ color:var(--warning); }
.text-danger { color:var(--danger); }
.text-info   { color:var(--info); }

.fs-xs{ font-size:.75rem; }
.fs-sm{ font-size:.85rem; }
.fs-lg{ font-size:1.1rem; }
.fs-xl{ font-size:1.35rem; }

.fw-400{ font-weight:400; }
.fw-600{ font-weight:600; }
.fw-700{ font-weight:700; }
.fw-800{ font-weight:800; }

.mt-0{margin-top:0}     .mt-1{margin-top:.25rem}  .mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}   .mt-5{margin-top:1.5rem}
.mt-6{margin-top:2rem}   .mt-8{margin-top:3rem}
.mb-0{margin-bottom:0}  .mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.5rem}
.mb-6{margin-bottom:2rem}
.ml-auto{margin-left:auto} .mr-auto{margin-right:auto} .mx-auto{margin-inline:auto}

.p-0{padding:0} .p-1{padding:.25rem} .p-2{padding:.5rem} .p-3{padding:.75rem}
.p-4{padding:1rem} .p-5{padding:1.5rem} .p-6{padding:2rem}
.px-2{padding-inline:.5rem} .px-4{padding-inline:1rem}
.py-2{padding-block:.5rem}   .py-4{padding-block:1rem}

.rounded   { border-radius:var(--r-md); }
.rounded-lg{ border-radius:var(--r-lg); }
.rounded-full{ border-radius:var(--r-pill); }

.shadow-sm{ box-shadow:var(--sh-sm); }
.shadow-md{ box-shadow:var(--sh-md); }
.shadow-lg{ box-shadow:var(--sh-lg); }
.shadow-none{ box-shadow:none; }

.border     { border:1px solid var(--border); }
.border-top { border-top:1px solid var(--border); }
.border-bottom{ border-bottom:1px solid var(--border); }

.cursor-pointer{ cursor:pointer; }
.overflow-hidden{ overflow:hidden; }
.overflow-auto{ overflow:auto; }
.relative{ position:relative; }
.sticky-top{ position:sticky; top:calc(var(--header-h) + 1rem); }

.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;
}

.divider{
  height:1px;
  background:var(--border);
  margin-block:1.5rem;
  border:0;
}
.divider-vertical{
  width:1px;
  align-self:stretch;
  background:var(--border);
  margin-inline:.5rem;
}

.w-auto   { width:auto; }

/* ==========================================================================
   12. RESPONSIVE HELPERS
   ========================================================================== */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hide-lg{ display:none !important; }
}

@media (max-width: 900px){
  .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hide-md{ display:none !important; }
  .flex-md-col{ flex-direction:column; align-items:stretch; }
  .header-inner{ padding-block:.5rem; }
}

@media (max-width: 640px){
  :root{ --gap:.85rem; --header-h:58px; }

  body{ font-size:15.5px; }

  .grid-2,
  .grid-3,
  .grid-4{ grid-template-columns:1fr; }

  .form-grid{ grid-template-columns:1fr; }
  .form-grid .span-2{ grid-column:span 1; }

  .flex-sm-col{ flex-direction:column; align-items:stretch; }
  .flex-sm-wrap{ flex-wrap:wrap; }
  .w-sm-full{ width:100%; }
  .text-sm-center{ text-align:center; }
  .hide-sm{ display:none !important; }

  .dev{ padding:1rem 1.1rem; border-radius:var(--r-md); }
  .dev-footer .btn{ flex:1 1 auto; }

  .btn-group{ display:flex; width:100%; }
  .btn-group .btn{ flex:1 1 auto; }

  .modal-footer{ flex-direction:column-reverse; }
  .modal-footer .btn{ width:100%; }

  .section{ padding-block:1.75rem; }
}

@media (min-width: 641px){
  .show-sm-only{ display:none !important; }
}

/* --- Print --------------------------------------------------------------- */
@media print{
  .site-header, .site-footer, .btn, .no-print{ display:none !important; }
  body{ background:#fff; color:#000; }
  .dev{ box-shadow:none; border-color:#ccc; break-inside:avoid; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   13. NAVBAR & SESSION BAR
   ========================================================================== */

/* --- Navbar shell -------------------------------------------------------- */
.navbar{
  background:var(--primary);
  color:#fff;
  padding:.5rem 1rem;
  position:sticky;      /* ← was: relative */
  top:0;                /* ← new: pin to top of viewport */
  z-index:1000;         /* ← raised so it sits above page content & menus */
  box-shadow:var(--sh-xs);
}

.nav-container{
  display:flex;
  align-items:center;
  gap:.75rem;
  max-width:var(--container);
  margin-inline:auto;
  min-height:48px;
}

/* --- Logo ---------------------------------------------------------------- */
.nav-logo,
.clickable-div{
  display:inline-flex;
  align-items:center;
  color:#fff;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-decoration:none;
  flex:none;
}
.nav-logo:hover,
.clickable-div:hover{
  color:#fff;
  text-decoration:none;
  opacity:.9;
}

/* --- Menu list ----------------------------------------------------------- */
.nav-menu{
  display:flex;
  list-style:none;
  padding:0;
  margin:0 0 0 auto;          /* pushes menu + right cluster to the right */
  gap:0;
}
.nav-menu > li{ position:relative; }

.nav-menu > li > a{
  display:block;
  padding:.65rem 1rem;
  color:#fff;
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--r-sm);
  white-space:nowrap;
  transition:background var(--t), color var(--t);
}
.nav-menu > li > a:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
}
.nav-menu > li > a.is-active{
  background:rgba(0,0,0,.22);
  color:#fff;
}

/* --- Dropdown panels ----------------------------------------------------- */
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  padding:.35rem;
  margin:0;
  list-style:none;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  z-index:999;
}
.dropdown-menu a{
  display:block;
  padding:.55rem .85rem;
  color:var(--text-muted);
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--r-sm);
  transition:background var(--t-fast), color var(--t-fast);
}
.dropdown-menu a:hover{
  background:var(--primary-soft);
  color:var(--on-soft-primary);
  text-decoration:none;
}

/* Hover reveal — desktop only */
@media (min-width: 901px){
  .dropdown:hover        > .dropdown-menu,
  .dropdown-submenu:hover > .dropdown-menu{ display:block; }
}

/* Second level opens to the side */
.dropdown-submenu{ position:relative; }
.dropdown-submenu > .dropdown-menu{
  top:-.35rem;
  left:calc(100% + 2px);
}

/* --- Right-side cluster (session bar + hamburger) ----------------------- */
.nav-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:none;
}

/* --- Session bar --------------------------------------------------------- */
.session-bar{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.session-user{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.2rem .7rem .2rem .2rem;
  background:rgba(255,255,255,.14);
  border-radius:var(--r-pill);
  color:#fff;
}
.session-user .avatar{
  background:rgba(255,255,255,.22);
  color:#fff;
  border-color:rgba(255,255,255,.45);
}
.session-user-info{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width:0;
}
.session-user-name{
  font-size:.8rem;
  font-weight:700;
  max-width:16ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.session-user-role{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.8;
}

.session-timer{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .65rem;
  background:rgba(255,255,255,.14);
  color:#fff;
  border-radius:var(--r-pill);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background var(--t), color var(--t);
}
.session-timer-icon{ font-size:.85rem; }

.session-timer.is-warning{
  background:var(--warning);
  color:#3a2503;
}
.session-timer.is-danger{
  background:var(--danger);
  color:#fff;
  animation:sessionPulse 1.2s ease-in-out infinite;
}
@keyframes sessionPulse{
  0%,100%{ opacity:1; }
  50%    { opacity:.55; }
}

/* Buttons rendered on the dark navbar */
.navbar .btn-secondary{
  --btn-bg:rgba(255,255,255,.14);
  --btn-fg:#fff;
  --btn-bd:transparent;
  box-shadow:none;
}
.navbar .btn-secondary:hover{
  --btn-bg:rgba(255,255,255,.24);
  --btn-bd:transparent;
}
.navbar .btn-danger-outline{
  --btn-fg:#fff;
  --btn-bd:rgba(255,255,255,.45);
  box-shadow:none;
}
.navbar .btn-danger-outline:hover{
  --btn-bg:var(--danger);
  --btn-bd:var(--danger);
  --btn-fg:#fff;
}

/* --- Hamburger ----------------------------------------------------------- */
.nav-toggle{
  display:none;
  cursor:pointer;
  padding:.35rem;
  background:none;
  border:0;
  flex-direction:column;
  gap:5px;
  border-radius:var(--r-sm);
}
.nav-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.5);
}
.bar{
  display:block;
  width:25px;
  height:3px;
  background:#fff;
  border-radius:2px;
  transition:transform .3s, opacity .3s;
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width:900px){

  .nav-toggle{ display:flex; }

  .nav-menu{
    position:absolute;
    top:calc(100% + 4px);
    left:1rem;
    right:1rem;
    flex-direction:column;
    gap:0;
    padding:.5rem;
    margin:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    box-shadow:var(--sh-md);
    display:none;
    max-height:80vh;
    overflow-y:auto;
    z-index:1000;
  }
  .nav-menu.is-open{ display:flex; }

  .nav-menu > li > a{
    color:var(--text);
    padding:.7rem .9rem;
  }
  .nav-menu > li > a:hover{
    background:var(--primary-soft);
    color:var(--on-soft-primary);
  }
  .nav-menu > li > a.is-active{
    background:var(--primary);
    color:#fff;
  }

  /* Dropdowns become inline accordions */
  .dropdown-menu{
    position:static;
    display:none;
    padding:.15rem 0 .15rem .75rem;
    margin:.25rem 0 .35rem .5rem;
    background:transparent;
    border:0;
    border-left:3px solid var(--primary-soft);
    border-radius:0;
    box-shadow:none;
    min-width:0;
  }
  .dropdown.is-open        > .dropdown-menu,
  .dropdown-submenu.is-open > .dropdown-menu{ display:block; }
  .dropdown-submenu > .dropdown-menu{
    top:0;
    left:0;
    margin-left:.5rem;
  }

  /* Right cluster is pushed by nav-right having margin-left:auto */
  .nav-right{ margin-left:auto; }

  /* Compact session bar */
  .session-user-info{ display:none; }
  .session-user{ padding:.2rem; }
  .session-timer{ font-size:.72rem; padding:.3rem .55rem; }
}

@media (max-width:480px){
  .nav-logo{ font-size:.92rem; }
  .navbar{ padding:.4rem .6rem; }
  .session-timer{ font-size:.68rem; }
  .session-timer-icon{ display:none; }
}

/* ==========================================================================
   14. LOGIN PAGE
   ========================================================================== */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:2rem 1rem;
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(79,70,229,.12), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(6,182,212,.12), transparent 55%),
    var(--bg);
}
.login-card{ width:100%; max-width:420px; }
.login-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  margin-bottom:1.5rem;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.02em;
}