/* ==========================================================================
   Mithila Sutra Admin Portal — portal.css
   Single CSS file for things Tailwind cannot do:
     • CSS custom properties (design tokens)
     • Dark mode semantic role overrides
     • backdrop-filter glass surface
     • Custom scrollbar
     • @keyframes entrance animation
     • ::selection brand color
     • Component classes that cannot be expressed as Tailwind utilities
   Google Fonts are loaded by base.html <link> tags — not re-imported here.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — CSS custom properties
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --ms-brand-50:  #FDE7E9;
  --ms-brand-100: #FBCFD3;
  --ms-brand-200: #F7A0A7;
  --ms-brand-300: #F2707B;
  --ms-brand-400: #ED414F;
  --ms-brand-500: #DD0618;
  --ms-brand-600: #B30513;
  --ms-brand-700: #88040E;
  --ms-brand-800: #5E0309;
  --ms-brand-900: #330104;
  --ms-brand:     var(--ms-brand-500);

  /* Neutral scale */
  --ms-50:  #fafafa;
  --ms-100: #f4f4f5;
  --ms-200: #e4e4e7;
  --ms-300: #d4d4d8;
  --ms-400: #a1a1aa;
  --ms-500: #71717a;
  --ms-600: #52525b;
  --ms-700: #3f3f46;
  --ms-800: #27272a;
  --ms-900: #18181b;
  --ms-950: #09090b;

  /* Heritage gold (loyalty tiers) */
  --ms-gold-50:  #FBF6E7;
  --ms-gold-100: #F4E7B0;
  --ms-gold-300: #DCC066;
  --ms-gold-500: #B8902C;
  --ms-gold-700: #7A5E10;

  /* Semantic status */
  --ms-success-50:  #ECFDF5;
  --ms-success-500: #10B981;
  --ms-success-700: #047857;
  --ms-warning-50:  #FFFBEB;
  --ms-warning-500: #F59E0B;
  --ms-warning-700: #B45309;
  --ms-danger-50:   #FFF1F2;
  --ms-danger-500:  #F43F5E;
  --ms-danger-700:  #BE123C;
  --ms-info-50:     #EFF6FF;
  --ms-info-500:    #3B82F6;
  --ms-info-700:    #1D4ED8;

  /* Semantic roles — light */
  --bg:         var(--ms-50);
  --bg-surface: #ffffff;
  --bg-muted:   var(--ms-100);
  --bg-inset:   var(--ms-200);
  --fg:         var(--ms-900);
  --fg-muted:   var(--ms-600);
  --fg-subtle:  var(--ms-500);
  --fg-faint:   var(--ms-400);
  --fg-invert:  var(--ms-50);
  --border:        rgba(0,0,0,0.04);
  --border-strong: var(--ms-200);
  --accent:     var(--ms-brand-500);
  --accent-fg:  #ffffff;
  --accent-bg:  var(--ms-brand-50);

  /* Typography */
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --font-mono:  ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  36px;
  --fs-5xl:  48px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  --space-0:  0px;  --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
  --space-4:  16px; --space-5:  20px; --space-6:  24px; --space-8:  32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --radius-xs:   4px;   --radius-sm:  6px;  --radius-md:  8px;
  --radius-lg:   12px;  --radius-xl: 16px;  --radius-2xl: 20px;
  --radius-full: 9999px;

  --shadow-xs:            0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:            0 2px 6px -1px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.02);
  --shadow-premium:       0 4px 20px -2px rgba(0,0,0,0.05), 0 0 3px rgba(0,0,0,0.02);
  --shadow-premium-hover: 0 10px 30px -5px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:    cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  300ms;

  --nav-width-collapsed: 80px;
  --nav-width-expanded:  256px;

  /* Native form controls and scrollbars follow this token, not the OS
     preference — dark mode is opt-in via the theme toggle only. */
  color-scheme: light;
}

/* ── Dark mode token overrides ─────────────────────────────────────────── */
[data-theme="dark"], .dark {
  color-scheme: dark;
  --bg:         var(--ms-950);
  --bg-surface: var(--ms-900);
  --bg-muted:   var(--ms-800);
  --bg-inset:   var(--ms-800);
  --fg:         var(--ms-50);
  --fg-muted:   var(--ms-400);
  --fg-subtle:  var(--ms-500);
  --fg-faint:   var(--ms-600);
  --fg-invert:  var(--ms-950);
  --border:        rgba(63,63,70,0.3);
  --border-strong: var(--ms-800);
  --accent-bg:  rgba(221,6,24,0.18);
  --shadow-xs:            0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:            0 2px 6px -1px rgba(0,0,0,0.4), 0 0 2px rgba(0,0,0,0.2);
  --shadow-premium:       0 4px 20px -2px rgba(0,0,0,0.4), 0 0 3px rgba(0,0,0,0.2);
  --shadow-premium-hover: 0 10px 30px -5px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.3);
}


/* ══════════════════════════════════════════════════════════════════════════
   THINGS TAILWIND CANNOT DO
   ══════════════════════════════════════════════════════════════════════════ */

/* backdrop-filter glass sidebar — requires vendor prefix */
.glass-nav {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--border-strong);
}
[data-theme="dark"] .glass-nav {
  background: rgba(9,9,11,0.85);
}

/* @keyframes card entrance */
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-enter { animation: card-in 500ms var(--ease-premium) both; }
.card-enter:nth-child(1) { animation-delay:   0ms; }
.card-enter:nth-child(2) { animation-delay:  50ms; }
.card-enter:nth-child(3) { animation-delay: 100ms; }
.card-enter:nth-child(4) { animation-delay: 150ms; }
.card-enter:nth-child(5) { animation-delay: 200ms; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ms-300); border-radius: 9999px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ms-700); }

/* ::selection brand color */
::selection { background-color: var(--ms-brand-500); color: #ffffff; }

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--ms-brand-500);
  outline-offset: 2px;
}

/* Alpine.js cloak */
[x-cloak] { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   SEMANTIC TYPE CLASSES
   ══════════════════════════════════════════════════════════════════════════ */
.ms-display { font-family: var(--font-serif);  font-size: var(--fs-5xl); line-height: 1.1;  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.ms-hero    { font-family: var(--font-serif);  font-size: var(--fs-4xl); line-height: 1.15; font-weight: var(--fw-regular);  letter-spacing: -0.01em; }
.ms-h1      { font-family: var(--font-sans);   font-size: var(--fs-3xl); line-height: 1.15; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.ms-h2      { font-family: var(--font-sans);   font-size: var(--fs-2xl); line-height: 1.3;  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.ms-h3      { font-family: var(--font-sans);   font-size: var(--fs-xl);  line-height: 1.3;  font-weight: var(--fw-semibold); }
.ms-h4      { font-family: var(--font-sans);   font-size: var(--fs-lg);  line-height: 1.3;  font-weight: var(--fw-semibold); }
.ms-body    { font-family: var(--font-sans);   font-size: var(--fs-base); line-height: 1.5; font-weight: var(--fw-regular);  color: var(--fg); }
.ms-body-sm { font-family: var(--font-sans);   font-size: var(--fs-sm);  line-height: 1.5;  font-weight: var(--fw-regular);  color: var(--fg-muted); }
.ms-label   { font-family: var(--font-sans);   font-size: var(--fs-xs);  line-height: 1.2;  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-subtle); }
.ms-caption { font-family: var(--font-sans);   font-size: var(--fs-xs);  line-height: 1.4;  font-weight: var(--fw-regular);  color: var(--fg-subtle); }
.ms-mono    { font-family: var(--font-mono);   font-size: var(--fs-sm);  font-variant-numeric: tabular-nums; }
.ms-metric  { font-family: var(--font-sans);   font-size: var(--fs-3xl); line-height: 1.1;  font-weight: var(--fw-bold);     letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }


/* ══════════════════════════════════════════════════════════════════════════
   COMPONENT CLASSES
   ══════════════════════════════════════════════════════════════════════════ */

/* Shadows */
.shadow-premium       { box-shadow: var(--shadow-premium); }
.shadow-premium-hover { box-shadow: var(--shadow-premium-hover); }

/* Metric gradient text */
.metric-value {
  background: linear-gradient(135deg, var(--ms-900) 0%, var(--ms-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .metric-value {
  background: linear-gradient(135deg, var(--ms-50) 0%, var(--ms-300) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Transition shorthand */
.transition-premium { transition: all var(--dur-base) var(--ease-premium); }

/* Table hover rows */
.tbl-row { transition: background var(--dur-fast) var(--ease-premium); }
.tbl-row:hover { background: var(--bg-muted); }

/* Status dots */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; }

/* Sidebar active state */
.nav-item-active { background: var(--ms-900); color: var(--ms-50); }
[data-theme="dark"] .nav-item-active { background: var(--ms-50); color: var(--ms-950); }

/* Form components */
.form-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-subtle);
  margin-bottom: var(--space-2);
}
.form-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease-premium),
              box-shadow   var(--dur-fast) var(--ease-premium);
}
.form-input:focus {
  outline: none;
  border-color: var(--ms-500);
  box-shadow: 0 0 0 3px rgba(113,113,122,0.15);
}
.form-input::placeholder { color: var(--fg-faint); }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-track {
  width: 36px; height: 20px; border-radius: 9999px;
  background: var(--ms-300);
  transition: background var(--dur-base) var(--ease-premium);
  position: relative;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 9999px;
  background: #fff;
  transition: transform var(--dur-base) var(--ease-premium);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked ~ .toggle-track { background: var(--ms-900); }
.toggle-switch input:checked ~ .toggle-track::after { transform: translateX(16px); }
[data-theme="dark"] .toggle-switch input:checked ~ .toggle-track { background: var(--ms-50); }
[data-theme="dark"] .toggle-switch input:checked ~ .toggle-track::after { background: var(--ms-950); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border-radius: var(--radius-xl);
  transition: all var(--dur-fast) var(--ease-premium);
  cursor: pointer; white-space: nowrap;
}
.btn-primary { padding: 10px 20px; background: var(--ms-900); color: var(--ms-50); }
.btn-primary:hover { background: var(--ms-800); }
[data-theme="dark"] .btn-primary { background: var(--ms-50); color: var(--ms-950); }
[data-theme="dark"] .btn-primary:hover { background: var(--ms-200); }

.btn-secondary { padding: 10px 20px; background: transparent; color: var(--fg-muted); border: 1px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--ms-300); }
[data-theme="dark"] .btn-secondary { color: var(--ms-300); }

/* Icon buttons */
.admin-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 8px;
  color: var(--ms-400);
  transition: color var(--dur-fast) var(--ease-premium),
              background-color var(--dur-fast) var(--ease-premium);
}
.admin-icon-btn:hover { color: var(--ms-700); background: var(--ms-100); }
[data-theme="dark"] .admin-icon-btn:hover { color: var(--ms-200); background: var(--ms-800); }

.admin-icon-btn-danger:hover { color: #e11d48; background: #fff1f2; }
[data-theme="dark"] .admin-icon-btn-danger:hover { background: rgba(244,63,94,0.2); }

.admin-icon-btn-success { color: #10b981; }
.admin-icon-btn-success:hover { color: #047857; background: #ecfdf5; }
[data-theme="dark"] .admin-icon-btn-success:hover { background: rgba(16,185,129,0.2); }

/* Entity links */
.admin-entity-link { color: var(--fg); font-weight: var(--fw-medium); transition: color var(--dur-fast) var(--ease-premium); }
.admin-entity-link:hover { color: var(--ms-brand-500); }
.admin-entity-link-mono { font-family: var(--font-mono); }

/* Toolbar layout */
.admin-list-toolbar { --admin-toolbar-control-height: 38px; --admin-toolbar-control-padding-y: 0.45rem; margin-bottom: var(--space-6); }
.admin-list-toolbar-form { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-toolbar-row { display: flex; align-items: stretch; gap: var(--space-3); min-height: var(--admin-toolbar-control-height); }
.admin-toolbar-search-field { flex: 1 1 auto; min-width: 0; max-width: none; }
.admin-toolbar-filter-group { display: flex; align-items: stretch; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
.admin-toolbar-filter-group > * { flex: 0 1 220px; min-width: 0; }
.admin-toolbar-actions { display: flex; align-items: stretch; gap: var(--space-3); margin-left: auto; flex-shrink: 0; }
.admin-toolbar-row .form-input, .admin-toolbar-btn { min-height: var(--admin-toolbar-control-height); }
.admin-toolbar-row .form-input { padding-top: var(--admin-toolbar-control-padding-y); padding-bottom: var(--admin-toolbar-control-padding-y); }
.admin-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; padding-top: var(--admin-toolbar-control-padding-y); padding-bottom: var(--admin-toolbar-control-padding-y); padding-inline: var(--space-4); white-space: nowrap; }
.admin-list-toolbar-empty { min-height: calc((var(--admin-toolbar-control-height) * 2) + var(--space-3)); margin-bottom: var(--space-6); }

@media (max-width: 768px) {
  .admin-toolbar-row { flex-wrap: wrap; }
  .admin-toolbar-filter-group { width: 100%; flex-wrap: wrap; }
  .admin-toolbar-filter-group > * { flex: 1 1 180px; }
  .admin-toolbar-actions { width: 100%; margin-left: 0; }
  .admin-toolbar-actions > * { flex: 1 1 0; }
  .admin-toolbar-btn { width: 100%; }
}