/* ============================================================
   MitraKSB — Aura Pulse M3 · Shell + Login reskin
   Loaded AFTER style.css so it wins on equal specificity.
   Only overrides visuals; keeps legacy class hooks intact.
   ============================================================ */

/* ── Aura M3 color channels (RGB triplets) per theme ── */
:root,
[data-theme="dark"] {
  --c-surface: 15 19 28;
  --c-surface-dim: 15 19 28;
  --c-surface-bright: 53 57 67;
  --c-surface-container-lowest: 10 14 23;
  --c-surface-container-low: 24 27 37;
  --c-surface-container: 28 31 41;
  --c-surface-container-high: 38 42 52;
  --c-surface-container-highest: 49 53 63;
  --c-on-surface: 223 226 239;
  --c-on-surface-variant: 195 198 215;
  --c-inverse-surface: 223 226 239;
  --c-inverse-on-surface: 44 48 58;
  --c-outline: 141 144 160;
  --c-outline-variant: 67 70 85;
  --c-surface-tint: 180 197 255;
  --c-primary: 180 197 255;
  --c-on-primary: 0 42 120;
  --c-primary-container: 37 99 235;
  --c-on-primary-container: 238 239 255;
  --c-inverse-primary: 0 83 219;
  --c-primary-fixed: 219 225 255;
  --c-secondary: 76 215 246;
  --c-on-secondary: 0 54 64;
  --c-secondary-container: 3 181 211;
  --c-tertiary: 78 222 163;
  --c-on-tertiary: 0 56 36;
  --c-tertiary-container: 0 125 85;
  --c-on-tertiary-container: 189 255 219;
  --c-error: 255 180 171;
  --c-on-error: 105 0 5;
  --c-error-container: 147 0 10;
  --c-on-error-container: 255 218 214;
  --c-background: 15 19 28;
  --c-on-background: 223 226 239;
  --c-surface-variant: 49 53 63;
}

[data-theme="light"] {
  --c-surface: 248 250 252;
  --c-surface-dim: 248 250 252;
  --c-surface-bright: 255 255 255;
  --c-surface-container-lowest: 248 250 252;
  --c-surface-container-low: 255 255 255;
  --c-surface-container: 241 245 249;
  --c-surface-container-high: 232 238 246;
  --c-surface-container-highest: 226 232 240;
  --c-on-surface: 15 23 42;
  --c-on-surface-variant: 71 85 105;
  --c-inverse-surface: 15 23 42;
  --c-inverse-on-surface: 248 250 252;
  --c-outline: 100 116 139;
  --c-outline-variant: 203 213 225;
  --c-surface-tint: 37 99 235;
  --c-primary: 29 78 216;
  --c-on-primary: 255 255 255;
  --c-primary-container: 37 99 235;
  --c-on-primary-container: 255 255 255;
  --c-inverse-primary: 191 219 254;
  --c-primary-fixed: 219 234 254;
  --c-secondary: 14 116 144;
  --c-on-secondary: 255 255 255;
  --c-secondary-container: 207 250 254;
  --c-tertiary: 4 120 87;
  --c-on-tertiary: 255 255 255;
  --c-tertiary-container: 209 250 229;
  --c-on-tertiary-container: 6 78 59;
  --c-error: 185 28 28;
  --c-on-error: 255 255 255;
  --c-error-container: 254 226 226;
  --c-on-error-container: 127 29 29;
  --c-background: 248 250 252;
  --c-on-background: 15 23 42;
  --c-surface-variant: 241 245 249;
}

:root,
[data-theme="dark"] {
  --aura-canvas: #0a0e17;
  --aura-s1: #181b25;
  --aura-s2: #1c1f29;
  --aura-s3: #262a34;
  --aura-s4: #31353f;
  --aura-border: rgba(67, 70, 85, .55);
  --aura-text: #dfe2ef;
  --aura-text-2: #c3c6d7;
  --aura-outline: #8d90a0;
  --aura-primary: #2563eb;
  --aura-on-primary: #eeefff;
  --aura-lav: #b4c5ff;
  --aura-cyan: #4cd7f6;
  --aura-emerald: #4edea3;
  --aura-error: #ffb4ab;

  /* Remap legacy tokens -> Aura so all existing pages match */
  --bg-base: var(--aura-canvas);
  --bg-app: var(--aura-canvas);
  --bg-0: var(--aura-canvas);
  --bg-1: var(--aura-s1);
  --bg-2: var(--aura-s2);
  --bg-surface: var(--aura-s2);
  --bg-elevated: var(--aura-s3);
  --bg-card: var(--aura-s1);
  --bg-card-2: var(--aura-s2);
  --bg-card-3: var(--aura-s3);
  --sidebar-bg: var(--aura-s1);
  --border: var(--aura-border);
  --border-soft: rgba(67, 70, 85, .4);
  --border-strong: rgba(141, 144, 160, .35);
  --text-primary: var(--aura-text);
  --text-secondary: var(--aura-text-2);
  --text-muted: var(--aura-outline);
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 68px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --success: var(--aura-emerald);
  --warning: #f59e0b;
  --error: var(--aura-error);
  --info: var(--aura-lav);
}

[data-theme="light"] {
  --aura-canvas: #f8fafc;
  --aura-s1: #ffffff;
  --aura-s2: #f1f5f9;
  --aura-s3: #e2e8f0;
  --aura-s4: #cbd5e1;
  --aura-border: #e2e8f0;
  --aura-text: #0f172a;
  --aura-text-2: #475569;
  --aura-outline: #64748b;
  --bg-base: var(--aura-canvas);
  --bg-app: var(--aura-canvas);
  --bg-card: var(--aura-s1);
  --bg-card-2: var(--aura-s2);
  --bg-card-3: var(--aura-s3);
  --sidebar-bg: var(--aura-s1);
  --border: var(--aura-border);
  --text-primary: var(--aura-text);
  --text-secondary: var(--aura-text-2);
  --text-muted: var(--aura-outline);
}

/* ---------- APP SHELL ---------- */
html, body { background: var(--aura-canvas); }
.app-shell { background: var(--aura-canvas); }

/* ---------- SIDEBAR ---------- */
.sidebar {
  background: var(--aura-s1);
  border-right: 1px solid var(--aura-border);
}
.sidebar-logo {
  border-bottom: 1px solid var(--aura-border);
  background: var(--aura-s1);
}
.logo-name { color: var(--aura-text); font-family: 'Plus Jakarta Sans', sans-serif; }
.logo-sub { color: var(--aura-text-2); }
.sidebar-toggle { color: var(--aura-text-2); border-radius: 8px; }
.sidebar-toggle:hover { background: var(--aura-s3); color: var(--aura-text); }

/* Workspace card */
.sidebar-sppg {
  border-bottom: 1px solid var(--aura-border);
  background: var(--aura-s2);
  border: 1px solid var(--aura-border);
  border-radius: 12px;
  margin: 12px;
  padding: 12px;
}
.sppg-label {
  color: var(--aura-cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  font-weight: 700;
}
.sppg-name { color: var(--aura-text); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
.sppg-sub { color: var(--aura-text-2); }

/* Nav */
.sidebar-nav { padding: 6px 10px; }
.nav-item {
  color: var(--aura-text-2);
  border-radius: 10px;
  font-size: 12.5px;
}
.nav-item:hover { background: var(--aura-s3); color: var(--aura-text); }
.nav-item.active {
  background: var(--aura-s3);
  color: var(--aura-text);
  border-left: 3px solid var(--aura-primary);
  font-weight: 600;
}
.nav-item.active svg { stroke: var(--aura-lav); }
.nav-item.nav-cta {
  background: var(--aura-primary);
  color: var(--aura-on-primary);
  box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .6);
}
.nav-item.nav-cta:hover { filter: brightness(1.06); }
.nav-item.nav-cta svg { stroke: var(--aura-on-primary); }
.nav-badge { background: rgba(147, 0, 10, .5); color: var(--aura-error); border: 1px solid rgba(255, 180, 171, .3); }
.nav-divider { background: var(--aura-border); }

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--aura-border);
  background: var(--aura-s1);
}
#user-badge { color: var(--aura-text-2) !important; }
.sidebar-version { color: var(--aura-outline); font-family: 'JetBrains Mono', monospace; }
.mk-theme-toggle {
  background: var(--aura-s3);
  color: var(--aura-text);
  border: 1px solid var(--aura-border);
  border-radius: 8px;
}

/* ---------- MAIN ---------- */
.main-content { background: var(--aura-canvas); }

/* Mobile hamburger + overlay */
.app-menu-btn {
  background: var(--aura-s2);
  border: 1px solid var(--aura-border);
  color: var(--aura-text);
  border-radius: 10px;
}
.sidebar-overlay { background: rgba(2, 5, 12, .62); backdrop-filter: blur(4px); }

/* ---------- LOGIN ---------- */
.login-overlay {
  background:
    radial-gradient(circle at 30% 20%, rgba(37, 99, 235, .22), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(76, 215, 246, .18), transparent 60%),
    var(--aura-canvas);
}
.login-card {
  background: rgba(13, 21, 42, .78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: 20px;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .7);
  color: var(--aura-text);
}
.login-card h2 { color: var(--aura-text); font-family: 'Plus Jakarta Sans', sans-serif; }
.login-card p { color: var(--aura-text-2); }
.login-card label { color: var(--aura-text-2) !important; }
.login-input {
  background: #080c18;
  border: 1px solid #1e293b;
  color: var(--aura-text);
  border-radius: 10px;
}
.login-input:focus {
  border-color: var(--aura-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .25) !important;
}
.login-btn {
  background: var(--aura-primary);
  color: var(--aura-on-primary);
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  box-shadow: 0 10px 26px -10px rgba(37, 99, 235, .7);
}
.login-btn:hover { background: #3b82f6; }
.login-btn:active { background: #1d4ed8; }
.login-btn:disabled { background: #262a34; color: #8d90a0; box-shadow: none; cursor: not-allowed; }
.login-oauth-divider { color: var(--aura-outline); }
.login-oauth-divider::before,
.login-oauth-divider::after { background: var(--aura-border); }
.google-login-btn {
  background: #ffffff;
  color: #0f172a;
  border-radius: 10px;
  font-weight: 600;
}
.google-login-btn:hover { background: #f1f5f9; }

/* Light-mode login card */
[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--aura-border);
}
[data-theme="light"] .login-input { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .login-btn { color: #ffffff; }

/* Login helper: inline spinner */
.login-btn .login-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  display: inline-block;
  animation: mk-spin .8s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ============================================================
   LEGACY CLASS HARMONIZATION -> Aura Pulse M3
   Applies to pages not (yet) rebuilt, so the whole app matches.
   ============================================================ */

/* Headers */
.page-header { border-bottom: 1px solid var(--aura-border); padding-bottom: 16px; margin-bottom: 20px; }
.page-breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--aura-cyan); margin-bottom: 6px;
}
.page-title { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--aura-text); letter-spacing: -.01em; }
.page-subtitle { color: var(--aura-text-2); }
.page-body { color: var(--aura-text); }

/* Cards */
.card, .mk-stat {
  background: var(--aura-s1);
  border: 1px solid var(--aura-border);
  border-radius: 14px;
  color: var(--aura-text);
}
.card-title { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--aura-text); }
.section-title { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--aura-text); }
.section-sub { color: var(--aura-text-2); }

/* Buttons */
.btn {
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  transition: all .18s ease;
}
.btn-primary, .mk-btn-grad {
  background: var(--aura-primary) !important;
  color: var(--aura-on-primary) !important;
  border: none;
  box-shadow: 0 8px 22px -10px rgba(37, 99, 235, .7);
}
.btn-primary:hover, .mk-btn-grad:hover { filter: brightness(1.08); }
.btn-secondary {
  background: var(--aura-s3);
  color: var(--aura-text);
  border: 1px solid var(--aura-border);
}
.btn-secondary:hover { background: #31353f; }
.btn-ghost { background: transparent; color: var(--aura-text-2); border: 1px solid var(--aura-border); }
.btn-ghost:hover { background: var(--aura-s3); color: var(--aura-text); }
.btn-success { background: #007d55; color: #bdffdb; border: none; }
.btn-danger { background: rgba(147,0,10,.5); color: #ffb4ab; border: 1px solid rgba(255,180,171,.3); }
.btn-ai { background: var(--aura-primary); color: var(--aura-on-primary); }

/* Badges */
.badge {
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid transparent;
}
.badge-primary { background: rgba(37,99,235,.2); color: var(--aura-lav); border-color: rgba(180,197,255,.3); }
.badge-success { background: rgba(0,125,85,.3); color: var(--aura-emerald); border-color: rgba(78,222,163,.3); }
.badge-warning { background: rgba(245,158,11,.14); color: #f59e0b; border-color: rgba(245,158,11,.3); }
.badge-danger  { background: rgba(147,0,10,.5); color: var(--aura-error); border-color: rgba(255,180,171,.3); }
.badge-info    { background: rgba(3,181,211,.16); color: var(--aura-cyan); border-color: rgba(76,215,246,.3); }
.badge-secondary, .badge-muted { background: var(--aura-s3); color: var(--aura-text-2); border-color: var(--aura-border); }

/* Inputs & forms */
.form-control, .form-label, .form-row, .dark-select, select.login-input, .login-input {
  font-family: 'Inter', sans-serif;
}
select.login-input, .form-control, textarea.login-input,
input.login-input, .settings-panel input, .settings-panel select {
  background: #080c18;
  border: 1px solid var(--aura-border);
  color: var(--aura-text);
  border-radius: 10px;
}
select.login-input option { background: #0a0e17; color: var(--aura-text); }
.form-label { color: var(--aura-text-2); }
.divider { background: var(--aura-border); }

/* Stat cards */
.stat-card {
  background: var(--aura-s1);
  border: 1px solid var(--aura-border);
  border-radius: 14px;
  color: var(--aura-text);
}
.stat-card-label { color: var(--aura-text-2); }
.stat-card-value { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--aura-text); }

/* Empty state */
.empty-state-title { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--aura-text); }
.empty-state-sub { color: var(--aura-text-2); }

/* Poster cards (legacy) */
.poster-card {
  background: var(--aura-s1);
  border: 1px solid var(--aura-border);
  border-radius: 14px;
  overflow: hidden;
}
.poster-card-title { color: var(--aura-text); }
.poster-card-date { color: var(--aura-outline); }

/* Tables */
table { color: var(--aura-text); }
th { color: var(--aura-outline); }
td { border-color: var(--aura-border); }

/* Status dots */
.status-dot.green { background: var(--aura-emerald); }

/* AI status rows */
.ai-status-label { color: var(--aura-text-2); }
.ai-status-val { color: var(--aura-text); }

/* Billing v4 hardcoded tweaks */
.billing-v4-wrap { color: var(--aura-text); }
.billing-v4-subtitle { color: var(--aura-text-2); }
.billing-v4-panel { background: var(--aura-s1); border: 1px solid var(--aura-border); border-radius: 14px; }
.billing-v4-panel-head h3 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--aura-text); }
.billing-v4-table th { color: var(--aura-outline); }
.billing-v4-table td { color: var(--aura-text-2); border-color: var(--aura-border); }
.billing-v4-stat { background: var(--aura-s2); border: 1px solid var(--aura-border); }
.billing-v4-stat strong { font-family: 'JetBrains Mono', monospace; color: var(--aura-text); }

/* Settings nav */
.settings-nav-item { color: var(--aura-text-2); border-radius: 10px; }
.settings-nav-item.active { background: var(--aura-s3); color: var(--aura-text); }

/* mk-* theme toggle & misc */
.mk-theme-toggle { background: var(--aura-s3); color: var(--aura-text); border: 1px solid var(--aura-border); border-radius: 8px; }

/* Scrollbars */
::-webkit-scrollbar-thumb { background: rgba(141,144,160,.3); }

/* ---------- COLLAPSED SIDEBAR (icon rail) ---------- */
.collapsed .nav-item span:not(.nav-badge):not(.material-symbols-outlined) { display: none !important; }
.collapsed .nav-item span.material-symbols-outlined { display: inline-flex !important; }
.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.collapsed .sidebar-nav { padding-left: 6px; padding-right: 6px; }
.collapsed .nav-item .material-symbols-outlined { font-size: 20px; }
.collapsed .sidebar-logo { justify-content: center; padding-left: 0; padding-right: 0; }
.collapsed .nav-badge { position: absolute; top: 4px; right: 6px; }
.collapsed .sidebar-footer { display: none; }

/* ---------- FORM CONTROLS: keep checkboxes/radios intrinsic ---------- */
#main-content input[type="checkbox"],
#main-content input[type="radio"] {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 16px;
  accent-color: rgb(var(--c-primary-container));
  cursor: pointer;
}

/* ---------- LIGHT MODE: readable surfaces for legacy components ---------- */
[data-theme="light"] .card,
[data-theme="light"] .mk-stat,
[data-theme="light"] .stat-card,
[data-theme="light"] .billing-v4-panel { color: rgb(var(--c-on-surface)); }
[data-theme="light"] .badge-primary { background: rgba(37,99,235,.12); color: #1d4ed8; border-color: rgba(37,99,235,.3); }
[data-theme="light"] .badge-success { background: rgba(16,185,129,.14); color: #047857; border-color: rgba(4,120,87,.3); }
[data-theme="light"] .badge-info { background: rgba(14,116,144,.12); color: #0e7490; border-color: rgba(14,116,144,.3); }
[data-theme="light"] .badge-secondary,
[data-theme="light"] .badge-muted { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }
[data-theme="light"] .btn-secondary { background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; }
[data-theme="light"] .btn-ghost { color: #475569; border-color: #cbd5e1; }
[data-theme="light"] .login-input,
[data-theme="light"] select.login-input,
[data-theme="light"] .form-control { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .mk-select-list { background: #ffffff !important; border-color: #cbd5e1 !important; }

/* ---------- WORKSPACE: full-width, left aligned (no centered max-width) ---------- */
#main-content > * {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#main-content .page-header,
#main-content .page-body {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Settings layout: left aligned, readable width */
.settings-layout { max-width: 1280px !important; }