@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Sora:wght@500;600;700&display=swap');

/* Shared semantic design tokens (surfaces, text, accent, borders, status,
   tint, shadows, motion) — the SAME token set the user dashboard uses.
   Canonical source: /shared/design-tokens.css. */
/* ============================================================
   COPY of /shared/design-tokens.css — canonical source lives at
   repo-root /shared/design-tokens.css. Kept as a copy here because
   the admin Docker dev/build context is scoped to admin-dashboard/
   and cannot reach a sibling directory. Keep the two in sync until
   the build is restructured to consume the shared file directly.
   ============================================================ */
/* ================================================================
   Shade — shared semantic design tokens.

   SINGLE SOURCE OF TRUTH for colors, radii, shadows and motion used
   by BOTH the user dashboard (website/) and the admin dashboard
   (admin-dashboard/). Values are copied verbatim from the user
   dashboard, which is the design source of truth.

   Consumed today by: admin-dashboard/src/index.css (@import).
   The user dashboard currently inlines an identical copy in
   website/app/globals.css (lines ~6-150) — point it at this file in a
   follow-up so the two can never drift. Keep any edit here in sync
   with that block until then.

   Light is the shipped default; [data-theme="dark"] overrides.
   ================================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;
  /* surfaces */
  --surface: #FBFBFA;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F3F4F3;
  --surface-hover: #F0F1F0;
  --surface-active: rgba(22, 163, 74, 0.10);
  /* color-by-hierarchy surfaces */
  --surface-tint: #EEF6F0;
  --surface-tint-strong: #E1F0E6;
  --accent-gradient: linear-gradient(140deg, #0B3D2A 0%, #11623F 52%, #1C8353 100%);
  --accent-gradient-glow: radial-gradient(60% 80% at 50% 20%, rgba(74, 222, 128, 0.28), transparent 70%);
  --wash-soft: linear-gradient(180deg, #F5FBF7 0%, #EAF4ED 100%);
  /* borders */
  --border: rgba(15, 23, 20, 0.10);
  --border-strong: rgba(15, 23, 20, 0.16);
  --border-accent: rgba(22, 163, 74, 0.35);
  /* text */
  --text: #0E130F;
  --text-muted: #4B534E;
  --text-subtle: #767D78; /* labels/meta ONLY — never body copy */
  /* brand green — fill darkened one step from the spec draft (#16A34A) so
     white button text passes 4.5:1 (spec §4 rule 2: adjust the token) */
  --accent: #15803D;
  --accent-hover: #166534;
  --accent-contrast: #FFFFFF;
  --accent-text: #15803D;
  /* ambient */
  --glow: rgba(34, 197, 94, 0.16);
  --overlay: rgba(8, 18, 12, 0.45);
  /* status */
  --status-active: #15803D;
  --status-testing: #B45309;
  --status-error: #DC2626;
  --status-info: #2563EB;
  --tint-active: rgba(22, 163, 74, 0.10);
  --tint-testing: rgba(180, 83, 9, 0.10);
  --tint-error: rgba(220, 38, 38, 0.10);
  --tint-info: rgba(37, 99, 235, 0.10);
  /* shadows */
  --shadow-card: 0 1px 2px rgba(16, 24, 20, 0.04), 0 12px 32px -12px rgba(16, 24, 20, 0.12);
  --shadow-popover: 0 8px 28px -6px rgba(16, 24, 20, 0.16), 0 0 0 1px var(--border);
  --shadow-cta: 0 0 0 1px rgba(22, 163, 74, 0.30), 0 8px 24px -8px rgba(22, 163, 74, 0.25);
  --shadow-cta-hover: 0 0 0 1px rgba(22, 163, 74, 0.45), 0 10px 30px -8px rgba(22, 163, 74, 0.35);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px rgba(22, 163, 74, 0.45);
}

[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces — lifted off pure black with real luminance steps */
  --surface: #0F1211;
  --surface-raised: #171B1A;
  --surface-sunken: #0B0E0D;
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-active: rgba(74, 222, 128, 0.12);
  /* color-by-hierarchy surfaces */
  --surface-tint: #12211A;
  --surface-tint-strong: #16291F;
  --accent-gradient: linear-gradient(140deg, #0A3527 0%, #124E36 60%, #17663F 100%);
  --accent-gradient-glow: radial-gradient(60% 80% at 50% 20%, rgba(74, 222, 128, 0.32), transparent 70%);
  --wash-soft: linear-gradient(180deg, #0F1211 0%, #101A15 100%);
  /* borders */
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(74, 222, 128, 0.30);
  /* text */
  --text: #F5F7F5;
  --text-muted: #B5BCB7;
  --text-subtle: #868D88;
  /* brand green */
  --accent: #22C55E;
  --accent-hover: #16A34A;
  --accent-contrast: #06110B;
  --accent-text: #5BE58C;
  /* ambient */
  --glow: rgba(74, 222, 128, 0.28);
  --overlay: rgba(0, 0, 0, 0.6);
  /* status */
  --status-active: #4ADE80;
  --status-testing: #FBBF24;
  --status-error: #F87171;
  --status-info: #60A5FA;
  --tint-active: rgba(74, 222, 128, 0.14);
  --tint-testing: rgba(251, 191, 36, 0.14);
  --tint-error: rgba(248, 113, 113, 0.14);
  --tint-info: rgba(96, 165, 250, 0.14);
  /* shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 40px -16px rgba(0, 0, 0, 0.55);
  --shadow-popover: 0 8px 28px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border-strong);
  --shadow-cta: 0 0 0 1px rgba(74, 222, 128, 0.40), 0 0 40px -8px rgba(74, 222, 128, 0.30);
  --shadow-cta-hover: 0 0 0 1px rgba(74, 222, 128, 0.55), 0 0 56px -6px rgba(74, 222, 128, 0.55);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px rgba(74, 222, 128, 0.55);
}

/* gx aliases: the landing's existing var(--gx-*) references resolve to the
   semantic layer, so shared markup follows the active theme. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --gx-bg-base: var(--surface);
  --gx-bg-elevated: var(--surface-sunken);
  --gx-bg-card: var(--surface-raised);
  --gx-bg-card-hover: var(--surface-hover);
  --gx-border-1: var(--border);
  --gx-border-2: var(--border-strong);
  --gx-border-glow: var(--border-accent);
  --gx-green-400: var(--accent-text);
  --gx-green-500: var(--accent);
  --gx-green-600: var(--accent-hover);
  --gx-glow: var(--glow);
  --gx-terminal: var(--accent-text);
  --gx-text-1: var(--text);
  --gx-text-2: var(--text-muted);
  --gx-text-3: var(--text-subtle);
  --gx-on-green: var(--accent-contrast);
  --gx-shadow-card: var(--shadow-card);
  --gx-shadow-cta: var(--shadow-cta);
}

/* ---- Motion tokens (single source of truth) ---- */
:root {
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);        /* signature curve: entrances, reveals, hovers */
  --m-ease-io: cubic-bezier(0.65, 0.05, 0.36, 1); /* symmetric curve: page transitions only */
  --m-micro: 180ms;      /* micro-interactions (hover, press) */
  --m-enter: 550ms;      /* element entrances / reveals */
  --m-exit: 220ms;       /* route exit phase */
  --m-page-enter: 420ms; /* route enter phase */
  --m-stagger: 60ms;     /* choreography step between siblings */
  --m-rise: 18px;        /* standard entrance travel */
  --m-rise-lg: 26px;     /* large entrance travel (reveals) */
  --m-scale-in: 0.96;    /* entrance scale start */
}

/* ---- Font family aliases (map to the same names the tokens/components use) ---- */
:root {
  --font-geist-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-geist: var(--font-geist-sans);
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --font-sora: 'Sora', system-ui, sans-serif;
}

/* Force clean global resets and strip any default Vite root limits */
html, body, #root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body {
  font-family: var(--font-geist-sans);
  letter-spacing: -0.011em;
  background: var(--surface);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
* { box-sizing: border-box; }
::selection { background: rgba(34, 197, 94, 0.22); color: #06302B; }
[data-theme="dark"] ::selection { background: rgba(74, 222, 128, 0.25); color: #EAFBEF; }

/* Force MUI Grid containers to fill available width */
.MuiGrid-container { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.MuiTableContainer-root { width: 100% !important; }
main { width: 100% !important; }

/* ---- Typography helpers (mirror the website) ---- */
.dsp { font-family: var(--font-sora), system-ui, sans-serif; letter-spacing: -0.02em; }
.gmono { font-family: var(--font-geist-mono), ui-monospace, monospace; }

/* ---- Form field helpers (auth screens) — tokenized to match the website ---- */
.gin { height: 46px; width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 14px 0 42px; font-size: 14px; font-family: var(--font-geist), system-ui, sans-serif; color: var(--text); background: var(--surface-raised); outline: none; transition: border-color .15s, box-shadow .15s; }
[data-theme="dark"] .gin { background: var(--surface-sunken); }
.gin:focus { border-color: var(--border-accent); box-shadow: var(--shadow-focus); }
.gin::placeholder { color: var(--text-subtle); }
.glab { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; }
.gfield { position: relative; }
.gfield .gic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); display: flex; }

/* ---- shared keyframes used by kit-style components ---- */
@keyframes gx-spin { to { transform: rotate(360deg); } }
@keyframes gx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes gx-pop-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes gx-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gx-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ghx-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---- kit input focus + label helpers (mirror the website) ---- */
.gx-appin:focus { border-color: var(--border-accent); box-shadow: var(--shadow-focus); }
.gx-appin::placeholder { color: var(--text-subtle); }
.gx-label { font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 12px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.gx-dsp { font-family: var(--font-sora), system-ui, sans-serif; }

.gx-skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-hover) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  animation: gx-shimmer 1.4s ease-in-out infinite;
}
.gx-focus:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---- app shell: sidebar nav rows (mirror the website .gx-sn) ---- */
.gx-shell-side { transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.gx-sn { transition: background 120ms ease, color 120ms ease; }
.gx-sn:hover { background: var(--surface-hover); }
.gx-sn[data-on="1"] { background: var(--surface-active); }

/* ---- command palette (⌘K) ---- */
.gx-cmdk-input { width: 100%; border: none; outline: none; background: transparent; font-size: 15px; color: var(--text); font-family: inherit; }
.gx-cmdk-input::placeholder { color: var(--text-subtle); }
.gx-cmdk-row[data-on="1"] { background: var(--surface-hover); }
@media (prefers-reduced-motion: reduce) { .gx-shell-side { transition: none; } }

/* ---- ShadeLoader: branded loading animation (mark + glow + counter-rotating rings) ---- */
.gb-loader { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.gb-loader-logo {
  position: relative; z-index: 2; height: 42px;
  animation: gb-loader-float 2.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(34, 163, 60, 0.35));
}
.gb-loader-glow {
  position: absolute; inset: -18px; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--tint-active) 0%, transparent 65%);
  animation: gb-loader-breathe 2.6s ease-in-out infinite;
}
.gb-loader-ring { position: absolute; border-radius: 50%; z-index: 1; }
.gb-loader-ring--outer {
  inset: 0; border: 2.5px solid transparent;
  border-top-color: var(--accent); border-right-color: var(--accent);
  animation: gb-loader-spin 1.4s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}
.gb-loader-ring--inner {
  inset: 11px; border: 2px solid transparent;
  border-bottom-color: var(--border-accent); border-left-color: var(--border-accent);
  animation: gb-loader-spin 2.2s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite reverse;
}
.gb-loader-label {
  display: flex; align-items: baseline; gap: 1px;
  font-size: 14px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em;
}
.gb-loader-dots i { font-style: normal; animation: gb-loader-dot 1.3s ease-in-out infinite; }
.gb-loader-dots i:nth-child(2) { animation-delay: 0.18s; }
.gb-loader-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes gb-loader-spin { to { transform: rotate(360deg); } }
@keyframes gb-loader-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.04); }
}
@keyframes gb-loader-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes gb-loader-dot {
  0%, 100% { opacity: 0.2; }
  35% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-loader-logo, .gb-loader-glow, .gb-loader-ring, .gb-loader-dots i { animation: none; }
  .gb-loader-ring--outer { border-color: var(--border-accent); }
  .gb-loader-ring--inner { display: none; }
}

/* ---- auth card responsive ---- */
@media (max-width: 760px) {
  .gb-authcard { flex-direction: column; }
  .gb-authpanel { width: 100% !important; min-height: 150px; }
  .gb-authform { padding: 30px 26px !important; }
}