/* Northstar Boxing futuristic visual system
   Loaded after app.css so all existing forms, routes and behaviours remain intact. */
:root {
  --navy-900:#020713;
  --navy-800:#06101f;
  --navy-700:#0a1729;
  --navy-600:#10233c;
  --navy-500:#15375a;
  --navy-400:#245a82;
  --navy-300:#68a5c5;
  --cyan-500:#19ddff;
  --cyan-400:#58eeff;
  --cyan-300:#9af7ff;
  --cyan-100:#dffcff;
  --blue-500:#1688ff;
  --violet-500:#8647ff;
  --violet-400:#a579ff;
  --green-500:#35e49a;
  --green-100:rgba(53,228,154,.14);
  --yellow-500:#ffbd4a;
  --yellow-100:rgba(255,189,74,.13);
  --red-500:#ff526d;
  --red-100:rgba(255,82,109,.13);
  --gray-50:#0d1b2e;
  --gray-100:#0b1728;
  --gray-200:#19304a;
  --gray-300:#36516a;
  --gray-400:#7691a4;
  --gray-500:#91a9b9;
  --gray-600:#b0c3cf;
  --gray-700:#d8e7ee;
  --white:#f6fcff;
  --sidebar-width:272px;
  --radius-sm:9px;
  --radius-md:15px;
  --radius-lg:24px;
  --shadow-sm:0 8px 26px rgba(0,0,0,.18);
  --shadow-md:0 18px 46px rgba(0,0,0,.28);
  --shadow-lg:0 32px 90px rgba(0,0,0,.48);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Oxanium','Inter',sans-serif;
  --panel:rgba(7,20,35,.88);
  --panel-strong:rgba(5,15,29,.96);
  --line:rgba(91,222,255,.16);
  --line-strong:rgba(91,222,255,.34);
}
html { background:#020713; }
body {
  color:#dcebf2;
  background:
    radial-gradient(circle at 78% -10%,rgba(91,40,255,.18),transparent 34rem),
    radial-gradient(circle at 20% 0%,rgba(0,204,255,.13),transparent 30rem),
    linear-gradient(rgba(66,181,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(66,181,255,.028) 1px,transparent 1px),
    #030915;
  background-size:auto,auto,36px 36px,36px 36px,auto;
}
a { color:var(--cyan-500); }
a:hover { color:var(--cyan-300); }
h1,h2,h3,.card-title { color:#f7fcff; }
code { color:var(--cyan-300); background:#06101f; }

/* Application shell */
.sidebar-layout { background:transparent; }
.sidebar {
  background:linear-gradient(180deg,rgba(2,8,19,.99),rgba(4,13,26,.98));
  border-right:1px solid rgba(79,207,255,.13);
  box-shadow:18px 0 70px rgba(0,0,0,.25);
  scrollbar-width:thin;
  scrollbar-color:rgba(51,216,255,.34) transparent;
}
.sidebar::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 48% 2%,rgba(23,207,255,.12),transparent 15rem);
}
.sidebar-brand { position:relative; padding:21px 18px 16px; border-bottom:1px solid var(--line); }
.sidebar-logo { display:block; padding:0; }
.sidebar-logo img { width:218px; height:auto; max-height:74px; object-fit:contain; object-position:left center; filter:drop-shadow(0 0 14px rgba(0,221,255,.22)); }
.product-edition { display:inline-flex; margin-top:8px; padding:4px 8px; color:#95adba; border:1px solid rgba(125,153,255,.18); border-radius:999px; background:rgba(29,51,90,.33); font:700 .58rem var(--font); letter-spacing:.12em; text-transform:uppercase; }
.sidebar-section-label { position:relative; padding:17px 20px 5px; color:#4f7187; font-size:.59rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.sidebar-nav { position:relative; flex:0; padding:4px 10px; }
.sidebar-nav li { margin:2px 0; }
.sidebar-nav li a { min-height:41px; gap:11px; padding:9px 11px; color:#879dab; border:1px solid transparent; border-left:1px solid transparent; border-radius:10px; font-size:.8rem; }
.sidebar-nav li a:hover { color:#e9faff; background:rgba(16,57,82,.55); border-color:rgba(61,213,255,.1); }
.sidebar-nav li a.active { color:#fff; background:linear-gradient(90deg,rgba(11,178,255,.18),rgba(120,62,255,.08)); border-color:rgba(64,217,255,.26); box-shadow:inset 3px 0 0 var(--cyan-500),0 7px 22px rgba(0,0,0,.14); }
.nav-icon { width:17px; height:17px; flex:0 0 17px; fill:currentColor; opacity:.68; }
.sidebar-nav li a.active .nav-icon { opacity:1; color:var(--cyan-400); filter:drop-shadow(0 0 5px rgba(25,221,255,.42)); }
.sidebar-nav kbd { margin-left:auto; padding:2px 5px; color:#5d7888; border:1px solid rgba(116,148,166,.17); border-radius:5px; background:#071321; font:600 .52rem var(--font); }
.sidebar-footer { position:relative; margin-top:auto; padding:13px; border-top:1px solid var(--line); }
.demo-status { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid rgba(255,189,74,.15); border-radius:12px; background:rgba(255,189,74,.05); }
.demo-status > i { width:8px; height:8px; border-radius:50%; background:var(--yellow-500); box-shadow:0 0 10px rgba(255,189,74,.65); }
.demo-status strong,.demo-status small { display:block; }
.demo-status strong { color:#dce7ec; font-size:.68rem; }
.demo-status small { color:#6f8796; font-size:.57rem; margin-top:1px; }

.main-content { background:transparent; }
.top-bar { min-height:67px; padding:10px 25px; color:#d9e8ef; border-bottom:1px solid var(--line); background:rgba(2,9,20,.77); backdrop-filter:blur(19px); box-shadow:0 9px 35px rgba(0,0,0,.17); }
.top-bar-left,.top-bar-right,.user-chip { display:flex; align-items:center; }
.top-bar-left { gap:13px; }
.top-bar-context strong,.top-bar-context span { display:block; }
.top-bar-context strong { color:#edfaff; font:700 .86rem var(--display); letter-spacing:.02em; }
.context-kicker { color:#577586; font-size:.56rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.system-status { display:inline-flex; align-items:center; gap:7px; color:#88b4a4; font-size:.68rem; font-weight:700; }
.system-status i { width:7px; height:7px; border-radius:50%; background:var(--green-500); box-shadow:0 0 10px rgba(53,228,154,.72); }
.user-chip { gap:8px; }
.user-avatar { width:34px; height:34px; display:grid; place-items:center; color:#05111e; border-radius:11px; background:linear-gradient(135deg,#a9f9ff,#40dfff,#784bff); font:800 .82rem var(--display); }
.user-chip strong,.user-chip small { display:block; }
.user-chip strong { color:#e8f5fa; font-size:.7rem; }
.user-chip small { color:#607b8c; font-size:.57rem; }
.top-bar-logout { color:#8fa5b3; border-color:rgba(116,161,187,.17); background:rgba(10,25,43,.58); }
.top-bar-logout:hover { color:#fff; border-color:rgba(255,82,109,.35); background:rgba(255,82,109,.09); }
.sidebar-toggle { color:#caedf5; }
.content-area { width:100%; max-width:1600px; padding:25px 28px 48px; }

/* Shared page components */
.page-header { padding:3px 0 17px; border-bottom:1px solid var(--line); }
.page-header h1 { color:#fff; font:700 clamp(1.35rem,2.2vw,2rem) var(--display); letter-spacing:-.035em; }
.page-header .page-subtitle { color:#7892a2; }
.card,.form-card,.sponsor-card,.bout-card,.briefing-card,.kanban-item,.selection-row {
  color:#cfe0e8; border:1px solid var(--line); background:linear-gradient(145deg,rgba(8,24,41,.92),rgba(5,16,29,.9)); box-shadow:var(--shadow-sm);
}
.card:hover,.sponsor-card:hover,.bout-card:hover { border-color:rgba(65,216,255,.27); }
.card-header,.briefing-header,.briefing-actions,.detail-table div,.task-list-compact li,.change-list-compact li { border-color:var(--line); }
.card-title,.briefing-header h2,.briefing-section h3,.detail-table dt,.error-card h2 { color:#effaff; }
.text-muted,.form-hint,.change-list-compact .change-meta,.sponsor-card .sponsor-package,.kanban-item .kanban-meta,.briefing-header .briefing-meta,.detail-table dd { color:#7893a3; }

.btn { min-height:39px; border-radius:10px; letter-spacing:.01em; }
.btn-primary { color:#03101b; border:0; background:linear-gradient(110deg,#4cf3ff,#18b8ff 54%,#8e4fff); box-shadow:0 9px 25px rgba(27,181,255,.18); }
.btn-primary:hover { color:#020b14; background:linear-gradient(110deg,#a8fbff,#3ed8ff 54%,#a577ff); transform:translateY(-1px); }
.btn-secondary { color:#c7d9e2; border-color:rgba(90,190,225,.18); background:rgba(8,25,43,.82); }
.btn-secondary:hover { color:#fff; border-color:rgba(79,220,255,.35); background:rgba(15,49,72,.83); }
.btn-ghost { color:#b59cff; border:1px solid rgba(139,89,255,.23); background:rgba(99,52,203,.09); }
.btn-ghost:hover { color:#e5dbff; background:rgba(99,52,203,.16); }
.btn-danger { background:linear-gradient(120deg,#ff526d,#e52e57); }
.btn-success { background:linear-gradient(120deg,#35e49a,#0fa978); }

.badge { border:1px solid transparent; }
.badge-green { color:#82f1c4; border-color:rgba(53,228,154,.2); background:rgba(53,228,154,.1); }
.badge-yellow { color:#ffd37c; border-color:rgba(255,189,74,.2); background:rgba(255,189,74,.1); }
.badge-red { color:#ff98aa; border-color:rgba(255,82,109,.2); background:rgba(255,82,109,.1); }
.badge-blue,.badge-cyan { color:#81eeff; border-color:rgba(25,221,255,.2); background:rgba(25,221,255,.09); }
.badge-gray { color:#a1b4c0; background:rgba(111,137,153,.1); }

/* Tables and forms */
.table-container { border:1px solid var(--line); border-radius:15px; background:rgba(5,16,29,.78); box-shadow:var(--shadow-sm); }
table { background:transparent; }
thead th { color:#6f8999; border-color:var(--line); background:rgba(10,31,51,.82); }
tbody td { color:#c8d9e2; border-color:rgba(91,222,255,.08); }
tbody tr:hover { background:rgba(20,75,103,.2); }
.row-highlight td { background:rgba(25,221,255,.07); }
.form-control,.login-form .input { color:#e8f6fb; border-color:rgba(92,185,221,.18); background:#061423; }
.form-control::placeholder,.login-form .input::placeholder { color:#486578; }
.form-control:focus,.login-form .input:focus { border-color:var(--cyan-500); background:#07192a; box-shadow:0 0 0 3px rgba(25,221,255,.08),0 0 25px rgba(25,221,255,.05); }
.form-group label,.login-form label { color:#a9bfcb; }
.filters-bar { border-color:var(--line); background:rgba(7,22,37,.85); }
.tabs { border-color:var(--line); }
.tab { color:#7890a0; }
.tab:hover { color:#dcecf2; }
.tab.active { color:var(--cyan-400); border-color:var(--cyan-500); }
.kanban-column { border:1px solid var(--line); background:rgba(6,18,31,.74); }
.kanban-column h3 { color:#7994a4; border-color:var(--line); }
.bout-fighter.red { color:#ff7388; }
.bout-fighter.blue { color:#5bb5ff; }
.bout-vs { color:#567489; }
.sponsor-card .sponsor-value { color:#71efba; }

/* Login */
.auth-layout { display:block; overflow:auto; background:#020713; }
.login-page { min-height:100vh; padding:0; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr); }
.login-brand-panel { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:60px clamp(34px,6vw,110px); border-right:1px solid var(--line); background:radial-gradient(circle at 17% 50%,rgba(6,194,255,.14),transparent 28rem),radial-gradient(circle at 80% 65%,rgba(117,57,255,.18),transparent 25rem),linear-gradient(135deg,#030916,#06101f); }
.login-brand-panel::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(74,204,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(74,204,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
.login-brand-panel::after { content:""; position:absolute; left:-8%; right:-8%; bottom:-8%; height:34%; border-top:1px solid rgba(63,212,255,.16); transform:perspective(500px) rotateX(63deg); background:repeating-linear-gradient(90deg,rgba(59,200,255,.09) 0 1px,transparent 1px 70px),repeating-linear-gradient(0deg,rgba(59,200,255,.09) 0 1px,transparent 1px 54px); }
.login-brand-inner { position:relative; z-index:1; max-width:760px; }
.login-wordmark { width:min(520px,78%); margin-bottom:43px; filter:drop-shadow(0 0 24px rgba(20,207,255,.18)); }
.login-eyebrow,.login-kicker { display:inline-flex; padding:6px 9px; color:#6deaff; border:1px solid rgba(56,219,255,.23); border-radius:7px; background:rgba(17,111,150,.11); font-size:.61rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-brand-panel h1 { max-width:690px; margin:18px 0; color:#f7fcff; font:700 clamp(2.7rem,5.2vw,5.7rem)/.99 var(--display); letter-spacing:-.065em; }
.login-brand-panel h1 span { color:transparent; background:linear-gradient(105deg,#35e9ff,#1988ff 50%,#9b55ff); -webkit-background-clip:text; background-clip:text; }
.login-brand-panel > div > p { max-width:640px; color:#8fa7b5; font-size:1rem; }
.login-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:35px; }
.login-feature-grid div { padding:15px; border:1px solid var(--line); border-radius:14px; background:rgba(7,22,39,.68); backdrop-filter:blur(8px); }
.login-feature-grid strong,.login-feature-grid span { display:block; }
.login-feature-grid strong { color:#e8f7fb; font-size:.76rem; }
.login-feature-grid span { margin-top:4px; color:#648092; font-size:.67rem; }
.login-form-panel { min-height:100vh; display:grid; place-items:center; padding:35px; background:linear-gradient(180deg,#030914,#07101e); }
.login-card { width:100%; max-width:440px; padding:34px; border:1px solid rgba(84,220,255,.18); border-radius:24px; background:linear-gradient(145deg,rgba(8,26,44,.95),rgba(4,14,28,.96)); box-shadow:0 35px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.03); }
.login-header { margin-bottom:25px; text-align:left; }
.login-icon { width:74px; height:74px; object-fit:contain; margin-bottom:18px; filter:drop-shadow(0 0 16px rgba(24,222,255,.28)); }
.login-header h2 { margin:12px 0 5px; color:#fff; font:700 2rem var(--display); }
.login-header p { color:#718d9d; font-size:.82rem; }
.login-form { gap:15px; }
.demo-credentials { color:#95aebb; border-color:rgba(79,207,255,.14); background:rgba(8,26,43,.8); }
.demo-credentials code { color:#89f0ff; background:#030c18; }
.login-footer-notice { color:#546f7f; }

/* New dashboard */
.command-hero { position:relative; min-height:310px; display:grid; grid-template-columns:minmax(0,1.38fr) minmax(300px,.62fr); gap:25px; align-items:center; margin-bottom:18px; padding:34px 38px; overflow:hidden; border:1px solid rgba(87,221,255,.21); border-radius:24px; background:radial-gradient(circle at 75% 35%,rgba(73,50,255,.18),transparent 23rem),linear-gradient(135deg,rgba(7,27,47,.96),rgba(3,12,25,.96)); box-shadow:0 28px 80px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.03); }
.command-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(37,198,255,.05) 1px,transparent 1px),linear-gradient(rgba(37,198,255,.05) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(110deg,black,transparent 72%); }
.command-hero-copy,.command-hero-visual { position:relative; z-index:1; }
.command-kicker,.panel-kicker { color:#64e8ff; font-size:.61rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.command-hero h1 { max-width:780px; margin:9px 0 6px; color:#fff; font:700 clamp(2rem,4vw,4rem)/1.02 var(--display); letter-spacing:-.055em; }
.command-hero-copy > p { color:#7f9bab; }
.command-hero-copy > p span { margin:0 5px; color:#32556e; }
.hero-status-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:15px; }
.hero-status-row strong { color:#c6dce5; font-size:.76rem; }
.event-status { padding:6px 9px; color:#81f1c2; border:1px solid rgba(53,228,154,.23); border-radius:999px; background:rgba(53,228,154,.08); font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.command-hero-visual { min-height:235px; display:grid; place-items:center; border-left:1px solid rgba(96,206,255,.1); }
.orbit-logo { position:relative; width:154px; height:154px; display:grid; place-items:center; }
.orbit-logo::before,.orbit-logo::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(66,218,255,.24); animation:orbitPulse 4s ease-in-out infinite; }
.orbit-logo::before { inset:0; box-shadow:0 0 34px rgba(14,202,255,.11); }
.orbit-logo::after { inset:17px; border-color:rgba(135,80,255,.28); animation-delay:-2s; }
.orbit-logo img { position:relative; z-index:1; width:128px; filter:drop-shadow(0 0 20px rgba(20,214,255,.31)); }
@keyframes orbitPulse { 50% { transform:scale(1.045); opacity:.55; } }
.hero-readiness-state { margin-top:-3px; text-align:center; }
.hero-readiness-state span,.hero-readiness-state strong,.hero-readiness-state small { display:block; }
.hero-readiness-state span { color:#5f7c8d; font-size:.57rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero-readiness-state strong { margin-top:3px; font:700 1rem var(--display); }
.hero-readiness-state small { color:#607d8e; font-size:.65rem; }
.status-clear { color:#65efb7; }
.status-action { color:#ffbf5e; }
.command-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin-bottom:18px; }
.metric-card { position:relative; min-width:0; display:flex; align-items:center; gap:11px; padding:14px; overflow:hidden; color:inherit; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(8,26,44,.9),rgba(5,16,29,.9)); box-shadow:var(--shadow-sm); transition:.2s ease; }
.metric-card::after { content:""; position:absolute; right:-22px; bottom:-26px; width:70px; height:70px; border-radius:50%; background:var(--metric-glow,rgba(25,221,255,.18)); filter:blur(19px); }
.metric-card:hover { color:inherit; transform:translateY(-2px); border-color:rgba(73,223,255,.32); box-shadow:var(--shadow-md); }
.metric-icon { width:35px; height:35px; flex:0 0 35px; display:grid; place-items:center; color:var(--metric-colour,#58eeff); border:1px solid color-mix(in srgb,var(--metric-colour,#58eeff) 35%,transparent); border-radius:10px; background:color-mix(in srgb,var(--metric-colour,#58eeff) 8%,transparent); font:800 .62rem var(--display); }
.metric-card small,.metric-card strong,.metric-card div > span { display:block; }
.metric-card small { overflow:hidden; color:#678393; font-size:.57rem; font-weight:800; letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.metric-card strong { margin:2px 0; color:#fff; font:700 1.55rem var(--display); line-height:1; }
.metric-card strong em { color:#698798; font-size:.7rem; font-style:normal; }
.metric-card div > span { color:#507084; font-size:.57rem; white-space:nowrap; }
.metric-cyan{--metric-colour:#4ff0ff;--metric-glow:rgba(25,221,255,.22)}.metric-blue{--metric-colour:#469fff;--metric-glow:rgba(31,127,255,.22)}.metric-violet{--metric-colour:#9b72ff;--metric-glow:rgba(134,71,255,.23)}.metric-green{--metric-colour:#55eeb0;--metric-glow:rgba(53,228,154,.19)}.metric-amber{--metric-colour:#ffc25c;--metric-glow:rgba(255,189,74,.2)}.metric-red{--metric-colour:#ff6f87;--metric-glow:rgba(255,82,109,.2)}
.command-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.command-panel { min-width:0; padding:19px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(8,25,43,.91),rgba(4,15,28,.92)); box-shadow:var(--shadow-sm); }
.command-panel-wide { grid-column:span 2; }
.command-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:13px; margin-bottom:16px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.command-panel-header h2 { margin-top:2px; color:#f4fbff; font:700 1.05rem var(--display); }
.command-panel-header > a,.panel-text-link { color:#58badd; font-size:.65rem; font-weight:700; }
.readiness-matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.readiness-item { padding:12px; color:inherit; border:1px solid rgba(83,195,230,.1); border-radius:12px; background:rgba(4,16,29,.62); }
.readiness-item:hover { color:inherit; border-color:rgba(62,216,255,.3); }
.readiness-item-top { display:flex; justify-content:space-between; gap:9px; }
.readiness-item-top span { color:#8aa4b3; font-size:.68rem; font-weight:700; }
.readiness-item-top strong { color:#fff; font:700 .78rem var(--display); }
.readiness-track { height:5px; margin:9px 0 6px; overflow:hidden; border-radius:999px; background:#0c2034; }
.readiness-track i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--segment-colour),color-mix(in srgb,var(--segment-colour) 45%,#a653ff)); box-shadow:0 0 10px color-mix(in srgb,var(--segment-colour) 45%,transparent); }
.readiness-item small { color:#4e6d80; font-size:.6rem; }
.ai-panel { position:relative; overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 50%,rgba(92,48,255,.18),transparent 14rem),linear-gradient(145deg,rgba(8,25,43,.95),rgba(4,15,28,.95)); }
.ai-panel .command-panel-header { text-align:left; }
.live-pill { padding:4px 7px; color:#cebaff; border:1px solid rgba(143,89,255,.3); border-radius:999px; background:rgba(128,75,255,.12); font:800 .56rem var(--display); }
.ai-orb { width:102px; height:102px; display:grid; place-items:center; margin:13px auto; border:1px solid rgba(89,219,255,.26); border-radius:50%; background:radial-gradient(circle,rgba(115,56,255,.37),rgba(10,51,84,.15) 44%,transparent 45%),repeating-radial-gradient(circle,rgba(82,222,255,.27) 0 1px,transparent 1px 13px); box-shadow:0 0 42px rgba(87,72,255,.18); }
.ai-orb span { color:#d9f9ff; font:800 1.15rem var(--display); text-shadow:0 0 14px #52ddff; }
.ai-panel > p { min-height:57px; color:#7893a3; font-size:.73rem; }
.ai-panel .panel-text-link { display:inline-block; margin-top:10px; }
.command-list { list-style:none; }
.command-list li { display:flex; align-items:center; gap:10px; min-height:49px; padding:9px 0; border-bottom:1px solid rgba(91,222,255,.08); }
.command-list li:last-child { border:0; }
.command-list li > div { min-width:0; flex:1; }
.command-list strong,.command-list small { display:block; }
.command-list strong { overflow:hidden; color:#dbe9ef; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.command-list small { margin-top:2px; color:#536f80; font-size:.59rem; }
.command-list li > a { width:26px; height:26px; display:grid; place-items:center; border:1px solid rgba(73,206,247,.13); border-radius:8px; background:rgba(10,41,62,.54); }
.priority-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#70a8be; }
.priority-critical { background:#ff526d; box-shadow:0 0 9px rgba(255,82,109,.6); }.priority-high { background:#ffbd4a; box-shadow:0 0 9px rgba(255,189,74,.45); }
.activity-icon { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; color:#6ceaff; border:1px solid rgba(46,214,255,.17); border-radius:9px; background:rgba(24,126,165,.09); font:800 .55rem var(--display); }
.deadline-date { width:36px; height:40px; flex:0 0 36px; display:grid; place-items:center; align-content:center; border:1px solid rgba(134,71,255,.22); border-radius:9px; background:rgba(134,71,255,.08); }
.deadline-date strong,.deadline-date small { line-height:1; }
.deadline-date strong { color:#d7caff; font:700 .85rem var(--display); }.deadline-date small { color:#8064c5; font-size:.48rem; text-transform:uppercase; }
.clear-state { min-height:122px; display:grid; place-items:center; align-content:center; text-align:center; }
.clear-state strong,.clear-state span { display:block; }.clear-state strong { color:#bcd3dc; font-size:.78rem; }.clear-state span { color:#557182; font-size:.64rem; }
.quick-action-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.quick-action-grid a { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px; color:#a9c2ce; border:1px solid rgba(71,190,230,.11); border-radius:10px; background:rgba(5,18,31,.58); font-size:.67rem; font-weight:700; }
.quick-action-grid a:hover { color:#fff; border-color:rgba(57,222,255,.3); background:rgba(13,55,77,.58); }
.quick-action-grid a span { width:22px; height:22px; display:grid; place-items:center; color:#71eefe; border-radius:7px; background:rgba(25,221,255,.09); }
.command-empty img { width:130px; margin:0 auto 18px; }

/* Search and alerts */
.search-overlay:not([hidden]) { background:rgba(0,4,12,.77); backdrop-filter:blur(8px); }
.search-panel { color:#dcebf2; border:1px solid var(--line-strong); background:linear-gradient(145deg,#071a2c,#040e1c); }
.search-panel-header { color:#eefaff; }
.search-panel input { color:#e9f8fc; border-color:var(--line); background:#051423; }
.search-results li:hover { background:rgba(19,71,98,.28); }
.search-results li a { color:#d5e8ef; }
.alert-success { color:#9ff4d1; border:1px solid rgba(53,228,154,.22); background:rgba(53,228,154,.1); }
.alert-error { color:#ff9cad; border:1px solid rgba(255,82,109,.23); background:rgba(255,82,109,.1); }
.alert-warning { color:#ffd480; border:1px solid rgba(255,189,74,.23); background:rgba(255,189,74,.1); }
.alert-info { color:#91f3ff; border:1px solid rgba(25,221,255,.2); background:rgba(25,221,255,.08); }

/* Responsiveness */
@media (max-width:1280px) {
  .command-metrics { grid-template-columns:repeat(3,1fr); }
  .command-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .command-panel-wide { grid-column:span 2; }
}
@media (max-width:980px) {
  .login-page { grid-template-columns:1fr; }
  .login-brand-panel { min-height:auto; padding:45px 30px; }
  .login-brand-panel h1 { font-size:clamp(2.5rem,8vw,4rem); }
  .login-form-panel { min-height:auto; padding:45px 20px 70px; }
  .command-hero { grid-template-columns:1fr; }
  .command-hero-visual { display:none; }
}
@media (max-width:768px) {
  body.sidebar-open { overflow:hidden; }
  .sidebar { box-shadow:25px 0 80px rgba(0,0,0,.6); }
  .top-bar { padding:9px 14px; }
  .system-status,.user-chip small { display:none; }
  .content-area { padding:15px 12px 35px; }
  .command-hero { min-height:auto; padding:24px 20px; }
  .command-hero h1 { font-size:clamp(1.8rem,9vw,3rem); }
  .command-metrics { grid-template-columns:repeat(2,1fr); }
  .command-grid { grid-template-columns:1fr; }
  .command-panel-wide { grid-column:auto; }
  .readiness-matrix { grid-template-columns:repeat(2,1fr); }
  .login-feature-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .top-bar-context { display:none; }
  .top-bar-right { gap:8px; }
  .user-chip > span:last-child { display:none; }
  .command-metrics { grid-template-columns:1fr; }
  .metric-card div > span { white-space:normal; }
  .readiness-matrix,.quick-action-grid { grid-template-columns:1fr; }
  .login-card { padding:25px 20px; }
}
@media print {
  body { color:#111; background:#fff; }
  .command-hero,.command-panel,.metric-card,.card,.form-card,.table-container { color:#111; border:1px solid #ccc; background:#fff; box-shadow:none; }
  .command-hero h1,.command-panel h2,.card-title,thead th,tbody td { color:#111; }
}

/* Explicit demo identification */
.top-bar-context strong::after {
  content: "DEMO";
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 7px;
  border: 1px solid rgba(111, 232, 255, .42);
  border-radius: 999px;
  color: #8ff6ff;
  background: rgba(24, 194, 255, .09);
  font-family: "Oxanium", sans-serif;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  vertical-align: middle;
}