/* Red Sky Lighting — shared design tokens & primitives
   Colors sourced from Red_Sky_Lighting_Brand_Guidelines_2025_V1.pdf
   (Red BD081C / Navy 04093A / grayscale), extended with a dark mode
   built from the brand navy rather than plain black. */

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

:root{
  color-scheme: light;

  --page:            #f6f6f4;
  --surface:         #ffffff;
  --surface-raised:  #ffffff;
  --text-primary:    #14152b;
  --text-secondary:  #5a5c6c;
  --text-muted:      #8a8c99;
  --border:          rgba(4,9,58,0.10);
  --track:           #eceae6;
  --shadow:          0 1px 2px rgba(4,9,58,0.05);
  --grid:            #e7e5e1;
  --baseline:        #c7c5bf;

  --brand-red:       #bd081c;
  --brand-red-soft:  rgba(189,8,28,0.10);
  --brand-navy:      #04093a;
  --brand-navy-soft: rgba(4,9,58,0.06);

  --series-us:       #2a78d6;
  --series-odm:      #eb6834;
  --series-intl:     #1baf7a;

  --good:            #1a9a5c;
  --good-soft:       rgba(26,154,92,0.14);
  --warning:         #c9860f;
  --warning-soft:    rgba(201,134,15,0.16);
  --critical:        #bd081c;
  --critical-soft:   rgba(189,8,28,0.10);

  --hero-bg-1:       #0c1348;
  --hero-bg-2:       #04093a;
  --hero-fg:         #ffffff;
  --hero-fg-muted:   rgba(255,255,255,0.74);

  --sidebar-bg:      #080c2c;

  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --page:            #05070f;
  --surface:         #10142c;
  --surface-raised:  #171b3d;
  --text-primary:    #f5f6fa;
  --text-secondary:  #b7b9d2;
  --text-muted:      #82869e;
  --border:          rgba(255,255,255,0.10);
  --track:           #232847;
  --shadow:          0 1px 2px rgba(0,0,0,0.35);
  --grid:            #232847;
  --baseline:        #363c66;

  --brand-red:       #ff5163;
  --brand-red-soft:  rgba(255,81,99,0.16);
  --brand-navy:      #aebbff;
  --brand-navy-soft: rgba(174,187,255,0.10);

  --series-us:       #5b9dee;
  --series-odm:      #f0895a;
  --series-intl:     #35c690;

  --good:            #3ddc84;
  --good-soft:       rgba(61,220,132,0.16);
  --warning:         #ffb648;
  --warning-soft:    rgba(255,182,72,0.16);
  --critical:        #ff5c5c;
  --critical-soft:   rgba(255,92,92,0.14);

  --hero-bg-1:       #151b4d;
  --hero-bg-2:       #080c2c;
  --hero-fg:         #ffffff;
  --hero-fg-muted:   rgba(255,255,255,0.70);

  --sidebar-bg:      #0b0e22;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme: dark;
    --page:            #05070f;
    --surface:         #10142c;
    --surface-raised:  #171b3d;
    --text-primary:    #f5f6fa;
    --text-secondary:  #b7b9d2;
    --text-muted:      #82869e;
    --border:          rgba(255,255,255,0.10);
    --track:           #232847;
    --shadow:          0 1px 2px rgba(0,0,0,0.35);
    --grid:            #232847;
    --baseline:        #363c66;

    --brand-red:       #ff5163;
    --brand-red-soft:  rgba(255,81,99,0.16);
    --brand-navy:      #aebbff;
    --brand-navy-soft: rgba(174,187,255,0.10);

    --series-us:       #5b9dee;
    --series-odm:      #f0895a;
    --series-intl:     #35c690;

    --good:            #3ddc84;
    --good-soft:       rgba(61,220,132,0.16);
    --warning:         #ffb648;
    --warning-soft:    rgba(255,182,72,0.16);
    --critical:        #ff5c5c;
    --critical-soft:   rgba(255,92,92,0.14);

    --hero-bg-1:       #151b4d;
    --hero-bg-2:       #080c2c;
    --hero-fg:         #ffffff;
    --hero-fg-muted:   rgba(255,255,255,0.70);

    --sidebar-bg:      #0b0e22;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-size:16px;line-height:1.45;}

.logo-dark{display:none;}
:root[data-theme="dark"] .logo-light{display:none;}
:root[data-theme="dark"] .logo-dark{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .logo-light{display:none;}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .logo-dark{display:block;}
}

.theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--border); border-radius:99px;
  padding:9px 16px; font:600 13.5px var(--font-body); color:var(--text-secondary);
  cursor:pointer; user-select:none; transition:border-color .15s, color .15s, background .15s;
}
.theme-toggle:hover{border-color:var(--brand-red); color:var(--text-primary);}
.theme-toggle svg{width:15px;height:15px;display:block;flex:0 0 auto;}

/* ================= App shell: fixed left sidebar + main ================= */
.app-shell{display:flex;align-items:stretch;min-height:100vh;}

.sidebar{
  width:292px;flex:0 0 292px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;
  background:var(--sidebar-bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:20;
}
.sidebar-header{position:relative;overflow:hidden;padding:26px 24px 22px;flex:0 0 auto;}
.sidebar-header .brand-logo.logo-light{display:none;}
.sidebar-header .brand-logo.logo-dark{display:block;}
.sidebar-header .brand-logo{height:30px;width:auto;position:relative;z-index:1;}
.sidebar-arc{position:absolute;top:-54px;right:-58px;width:190px;height:190px;opacity:.14;z-index:0;pointer-events:none;}

.sidebar-nav{flex:1;padding:10px 14px;display:flex;flex-direction:column;gap:3px;}
.nav-section-label{font:600 11px var(--font-display);text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.38);padding:16px 12px 6px;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:11px;
  color:rgba(255,255,255,.82);text-decoration:none;font:500 14.5px var(--font-body);
  transition:background .15s,color .15s;position:relative;white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:var(--brand-red);color:#fff;font-weight:700;}
.nav-item.disabled{opacity:.38;pointer-events:none;}
.nav-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.nav-item .badge{
  margin-left:auto;font-size:10px;font-weight:600;padding:3px 8px;border-radius:99px;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.68);white-space:nowrap;flex:0 0 auto;
}
.nav-item.active .badge{background:rgba(255,255,255,.24);color:#fff;}

.sidebar-footer{padding:16px 20px 22px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:14px;}
.sidebar-footer .theme-toggle{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.75);width:100%;justify-content:center;}
.sidebar-footer .theme-toggle:hover{border-color:var(--brand-red);color:#fff;}
.sidebar-footer .maintainer{font-size:12px;color:rgba(255,255,255,.4);line-height:1.5;}

.main{flex:1;min-width:0;padding:40px 44px 64px;max-width:1360px;}

@media (max-width:900px){
  .app-shell{flex-direction:column;}
  .sidebar{
    position:sticky;top:0;width:100%;flex:none;height:auto;
    flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--border);
  }
  .sidebar-header{padding:12px 16px;flex:0 0 auto;}
  .sidebar-header .brand-logo{height:22px;}
  .sidebar-arc{display:none;}
  .sidebar-nav{flex-direction:row;overflow-x:auto;padding:8px 8px;gap:4px;flex:1;}
  .nav-section-label{display:none;}
  .nav-item{white-space:nowrap;padding:9px 13px;font-size:14px;}
  .sidebar-footer{border-top:none;border-left:1px solid rgba(255,255,255,.1);padding:8px 12px;flex-direction:row;}
  .sidebar-footer .maintainer{display:none;}
  .sidebar-footer .theme-toggle{width:auto;}
  .main{padding:26px 20px 48px;}
}

/* ================= Hero band ================= */
.hero-band{
  position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(135deg,var(--hero-bg-1) 0%,var(--hero-bg-2) 100%);
  color:var(--hero-fg);padding:38px 42px;margin-bottom:32px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;
}
.hero-arc{position:absolute;top:-70px;right:-40px;width:340px;height:340px;opacity:.10;pointer-events:none;}
.hero-eyebrow{font:600 12.5px var(--font-display);text-transform:uppercase;letter-spacing:.12em;
  color:var(--hero-fg-muted);margin:0 0 8px;position:relative;z-index:1;}
.hero-title{font:600 34px/1.15 var(--font-display);text-transform:uppercase;letter-spacing:.01em;
  color:var(--hero-fg);margin:0 0 8px;position:relative;z-index:1;}
.hero-sub{font-size:15px;color:var(--hero-fg-muted);margin:0;max-width:640px;position:relative;z-index:1;}
.hero-meta{text-align:right;font-size:13.5px;color:var(--hero-fg-muted);position:relative;z-index:1;}
.hero-meta strong{color:#fff;font-weight:700;}
@media(max-width:640px){.hero-band{padding:28px 26px;} .hero-title{font-size:26px;} .hero-meta{text-align:left;}}