/* =============================================================================
   Sachin Deep Cleaning — Shared Design System
   "Emerald Glass": deep ink-navy canvas, emerald brand, periwinkle
   secondary, refined semantic status colors, Sora/Inter/JetBrains Mono type.
   Loaded AFTER tailwind.css so it intentionally re-themes existing utilities.
   ============================================================================= */

/* ---- Fonts (graceful fallback to system stacks if offline) ---- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================== TOKENS ============================== */
:root {
  color-scheme: dark;

  /* Brand + canvas (dark default) */
  --bg:            #0A0F1A;
  --surface:       #131B2C;
  --surface-2:     #1C2740;
  --surface-3:     #27324A;
  --border:        #27324A;
  --border-strong: #364361;

  --text:        #EAF1F9;
  --text-muted:  #94A4BA;
  --text-faint:  #647088;

  --primary:        #F59E0B;
  --primary-strong: #D97706;
  --primary-soft:   rgba(245, 158, 11, 0.16);
  --primary-ring:   rgba(245, 158, 11, 0.35);
  --secondary:      #6C8CFF;

  /* Semantic status */
  --ok:        #34D399;
  --ok-strong: #10B981;
  --ok-bg:     rgba(52, 211, 153, 0.12);
  --ok-fg:     #6EE7B7;
  --warn:      #F5B544;
  --warn-bg:   rgba(245, 181, 68, 0.13);
  --warn-fg:   #F8CE82;
  --danger:    #FB7185;
  --danger-bg: rgba(251, 113, 133, 0.14);
  --danger-fg: #FDA4AF;
  --info:      #60A5FA;
  --info-bg:   rgba(96, 165, 250, 0.13);
  --info-fg:   #93C5FD;

  --card-grad: linear-gradient(162deg, rgba(245, 158, 11, 0.07), transparent 55%), var(--surface);

  /* Type */
  --font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1:      clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-h2:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h3:      1.125rem;
  --fs-body:    0.9375rem;
  --fs-sm:      0.8125rem;
  --fs-xs:      0.75rem;

  /* Radii */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-full: 999px;

  /* Depth (dark) */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow:     0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 18px 44px rgba(0, 0, 0, 0.50);
  --hairline:   0 0 0 1px var(--border);
}

body.light {
  color-scheme: light;

  --bg:            #F4F7FB;
  --surface:       #FFFFFF;
  --surface-2:     #EEF3F9;
  --surface-3:     #E3EAF3;
  --border:        #E4EBF3;
  --border-strong: #D3DDEA;

  --text:        #0B1220;
  --text-muted:  #5A6B83;
  --text-faint:  #8693A6;

  --primary:        #047857;
  --primary-strong: #059669;
  --primary-soft:   rgba(4, 120, 87, 0.12);
  --primary-ring:   rgba(4, 120, 87, 0.30);
  --secondary:      #4F6FE0;

  --ok:        #059669;
  --ok-strong: #047857;
  --ok-bg:     rgba(5, 150, 105, 0.10);
  --ok-fg:     #047857;
  --warn:      #D97706;
  --warn-bg:   rgba(217, 119, 6, 0.12);
  --warn-fg:   #B45309;
  --danger:    #E11D48;
  --danger-bg: rgba(225, 29, 72, 0.10);
  --danger-fg: #BE123C;
  --info:      #2563EB;
  --info-bg:   rgba(37, 99, 235, 0.10);
  --info-fg:   #1D4ED8;

  --card-grad: linear-gradient(162deg, rgba(4, 120, 87, 0.06), transparent 55%), #FFFFFF;

  --shadow-sm:  0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow:     0 6px 20px rgba(16, 24, 40, 0.08);
  --shadow-lg:  0 18px 44px rgba(16, 24, 40, 0.12);
}

/* ============================== BASE ============================== */
* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { display: block; }

/* Signature: ambient emerald/periwinkle glow behind the canvas */
body::before {
  content: "";
  position: fixed;
  inset:0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48rem 34rem at 88% -12%, var(--primary-soft), transparent 62%),
    radial-gradient(40rem 30rem at -6% 4%, color-mix(in srgb, var(--secondary) 9%, transparent), transparent 58%);
}

/* Headings carry the display face */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Fluid type for the utility sizes actually used as titles */
.text-2xl { font-size: var(--fs-h1) !important; }
.text-3xl { font-size: var(--fs-h2) !important; line-height: 1.1 !important; }
.text-xl  { font-size: var(--fs-h3) !important; }

/* Numeric / data treatment */
.font-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* Selection + focus */
::selection { background: var(--primary); color: #04121a; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }

/* ====================== RETHEME LAYER ======================
   Map the existing Tailwind utilities used across both apps onto the new
   tokens. Source order (this file loads after tailwind.css) decides ties. */
.bg-slate-900 { background-color: var(--bg) !important; }
.bg-slate-800 { background-color: var(--surface) !important; }
.bg-slate-700 { background-color: var(--surface-2) !important; }
.bg-slate-600 { background-color: var(--surface-3) !important; }

/* Hero/login gradient canvas (admin login) -> follow theme tokens.
   Tailwind drives gradients through these custom props, so retheme them
   rather than background-color. Only the admin login uses slate stops. */
.from-slate-900 { --tw-gradient-from: var(--bg) var(--tw-gradient-from-position); }
.to-slate-800   { --tw-gradient-to:   var(--surface) var(--tw-gradient-to-position); }

.border-slate-700 { border-color: var(--border) !important; }
.border-slate-600 { border-color: var(--border-strong) !important; }
.border-slate-500 { border-color: var(--border-strong) !important; }

.text-white   { color: var(--text) !important; }
.text-slate-100, .text-slate-200, .text-slate-300 { color: var(--text) !important; }
.text-slate-400 { color: var(--text-muted) !important; }
.text-slate-500 { color: var(--text-faint) !important; }

/* Brand accent (was blue) -> emerald */
.bg-blue-600  { background-color: var(--primary) !important; }
.hover\:bg-blue-700:hover { background-color: var(--primary-strong) !important; }
.border-blue-500 { border-color: var(--primary) !important; }
.text-blue-400, .text-blue-500 { color: var(--primary) !important; }

/* Focus rings -> emerald */
.focus\:ring-green-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-red-500:focus {
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
  border-color: var(--primary) !important;
}

/* ---- Semantic status (keep meaning, refine tints) ---- */
.bg-green-900 { background-color: var(--ok-bg) !important; }
.bg-green-600 { background-color: var(--ok-strong) !important; }
.hover\:bg-green-700:hover { background-color: var(--ok) !important; }
.text-green-100, .text-green-200, .text-green-300, .text-green-400 { color: var(--ok-fg) !important; }

.bg-red-900 { background-color: var(--danger-bg) !important; }
.bg-red-600 { background-color: var(--danger) !important; }
.hover\:bg-red-700:hover { background-color: #e11d48 !important; }
.text-red-300, .text-red-400 { color: var(--danger-fg) !important; }

.bg-yellow-900 { background-color: var(--warn-bg) !important; }
.bg-yellow-600 { background-color: var(--warn) !important; }
.hover\:bg-yellow-700:hover { background-color: #d97706 !important; }
.text-yellow-300, .text-yellow-400 { color: var(--warn-fg) !important; }

.bg-blue-900 { background-color: var(--info-bg) !important; }
.text-blue-300 { color: var(--info-fg) !important; }

/* ====================== CHROME / COMPONENTS ====================== */

/* --- Header bar (glass) — higher specificity to beat .bg-slate-800 / .app-header --- */
header, header.bg-slate-800, header.app-header {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}
header h1 {
  font-size: var(--fs-h1);
  background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 70%, var(--primary)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
header p { color: var(--text-muted) !important; }

/* Brand mark icon uses the emerald accent */
header .icon.text-green-400 { color: var(--primary) !important; }

/* Action buttons (solid brand/danger/success) -> polished pills */
[class*="bg-blue-600"],
[class*="bg-red-600"],
[class*="bg-green-600"] {
  border-radius: var(--r-full) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  letter-spacing: -0.01em;
}
[class*="bg-blue-600"]:hover,
[class*="bg-red-600"]:hover,
[class*="bg-green-600"]:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
[class*="bg-blue-600"]:active,
[class*="bg-red-600"]:active,
[class*="bg-green-600"]:active { transform: translateY(0); }
:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

/* --- Stat cards --- */
.app-stat, .stat-card, .grid-stats > div {
  position: relative;
  overflow: hidden;
  background: var(--card-grad) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.app-stat:hover, .stat-card:hover, .grid-stats > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
}
/* signature: thin emerald top edge */
.app-stat::before, .stat-card::before, .grid-stats > div::before {
  content: "";
  position: absolute;
  top:0; left:0; right:0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent 70%);
  opacity: .7;
}
.app-stat h3, .stat-card h3, .grid-stats p.text-3xl {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

/* --- Tab navigation --- */
.tab-nav, [class*="border-b"][class*="overflow-x-auto"] {
  border-bottom: 1px solid var(--border) !important;
}
.tab-nav button,
[class*="border-b"][class*="overflow-x-auto"] > button {
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  color: var(--text-muted) !important;
  position: relative;
  transition: color .15s ease, background .15s ease;
}
.tab-nav button:hover,
[class*="border-b"][class*="overflow-x-auto"] > button:hover {
  background: var(--surface-2);
  color: var(--text) !important;
}
/* active tab (kept underline classes, recolored via retheme to emerald) */
[class*="border-green-500"], [class*="border-blue-500"] {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* --- Generic cards / panels --- */
.app-card, .bg-slate-800.rounded-lg, .bg-slate-800.rounded-2xl {
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm);
}

/* --- Login card (shared: both apps use shadow-2xl) --- */
[class*="shadow-2xl"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* --- Tables (admin desktop) --- */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
thead th {
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
/* keep table legible inside its scroll container (don't catch the tab bar) */
.desktop-table { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

/* --- Status pills (mobile table rows + inline badges) --- */
.table-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}
.table-card-row { border-bottom: 1px solid var(--border) !important; }
.table-card-row strong { color: var(--text-muted) !important; }
.table-card-value { color: var(--text) !important; }

/* --- Mobile menu (admin) --- */
.mobile-menu { background: rgba(4, 8, 16, 0.55) !important; backdrop-filter: blur(2px); }
.mobile-menu-content {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
}
.mobile-menu-content nav button { border-radius: var(--r-sm) !important; }
.mobile-menu-content nav button:hover { background: var(--surface-2) !important; }
.mobile-hamburger { color: var(--text) !important; }

/* --- Inputs --- */
input, select, textarea {
  border-radius: var(--r-sm) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-faint) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--primary) !important; }

/* ====================== RESPONSIVE POLISH ====================== */
.max-w-7xl {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

/* Fluid stat grids: never leave awkward 1px gaps, scale with viewport */
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 1rem !important; }
.partner-grid, .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

/* Comfortable tap targets on touch */
button, [role="button"], a { min-height: 38px; }
header button, .desktop-header-controls button { min-height: 40px; }

/* Header never overflows on phones: stack title above a scrollable action row */
@media (max-width: 640px) {
  header .max-w-7xl { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  header .max-w-7xl > div:last-child {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
}

/* Lazy image placeholder (skeleton while loading) */
.lazy-image {
  background: var(--surface-2, #f0f0f0);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lazy-image.img-loaded {
  opacity: 1;
}
body.light .lazy-image {
  background: #e5e7eb;
}

/* Pulse animation for active step indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Spin animation for loading */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}