@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ==========================================================
   RIOS ASSET — DESIGN SYSTEM TOKENS v1.1
   Importe este arquivo em todas as páginas do ERP.
   v1.1: dark mode via [data-theme="dark"], theme toggle,
         ghost actions, legacy aliases.
   ========================================================== */

:root {
  /* brand */
  --rios-navy:        #0E2148;
  --rios-navy-deep:   #081535;
  --rios-navy-soft:   #1A2E5C;
  --rios-gold:        #C9B17A;
  --rios-gold-warm:   #B89A5E;
  --rios-gold-soft:   #E8DCC0;
  --gold-light:       #DDC58E;
  --rios-teal:        #2E8A99;
  --rios-teal-deep:   #1F6573;
  --rios-teal-soft:   #B8D6DC;

  /* neutrals */
  --gray-0:    #FFFFFF;
  --gray-50:   #F7F8FA;
  --gray-100:  #EEF1F5;
  --gray-150:  #E2E7EE;
  --gray-200:  #CDD4DE;
  --gray-300:  #A8B1BF;
  --gray-400:  #818B9C;
  --gray-500:  #5C6678;
  --gray-600:  #3F485A;
  --gray-700:  #2A3142;
  --gray-800:  #1A1F2E;
  --gray-900:  #0F1320;

  /* semantic */
  --pos:           #2F8F5F;
  --pos-bg:        #E6F2EC;
  --pos-border:    #BFE0CE;
  --neg:           #C0394A;
  --neg-bg:        #FAE6E9;
  --neg-border:    #EFC2C8;
  --warn:          #B8740E;
  --warn-bg:       #FBF1DE;
  --warn-border:   #ECD5A0;
  --info:          #2E6BB8;
  --info-bg:       #E5EEF8;
  --info-border:   #BFD3EE;
  --neutral-bg:    var(--gray-100);

  /* surfaces */
  --bg-app:        var(--gray-50);
  --bg-surface:    #F8F6F2;
  --bg-elevated:   var(--gray-0);
  --bg-subtle:     #EEEBE4;
  --bg-sunken:     var(--gray-100);
  --bg-sidebar:    var(--rios-navy-deep);
  --bg-topbar:     var(--gray-0);
  --bg-overlay:    rgba(15, 19, 32, 0.48);

  /* foregrounds */
  --fg-1:          var(--gray-700);
  --fg-2:          var(--gray-500);
  --fg-3:          var(--gray-400);
  --fg-disabled:   var(--gray-300);
  --fg-inverse:    var(--gray-0);
  --fg-on-navy:    var(--gray-0);
  --fg-on-navy-2:  rgba(255, 255, 255, 0.68);
  --fg-on-navy-3:  rgba(255, 255, 255, 0.42);
  --fg-link:       var(--rios-teal);
  --fg-link-hover: var(--rios-teal-deep);

  /* borders */
  --border-subtle:    var(--gray-150);
  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-focus:     var(--rios-teal);
  --border-on-navy:   rgba(201, 177, 122, 0.24);

  /* pending/medium-risk — gold brand tint para itens aguardando ação */
  --pending:        var(--rios-gold-warm);
  --pending-bg:     rgba(201, 177, 122, 0.12);
  --pending-border: rgba(201, 177, 122, 0.32);
  --pending-ink:    #7A5510;

  /* navy-subtle — hover/tint background sobre fundo claro */
  --navy-subtle:    rgba(14, 33, 72, 0.06);

  /* shadows */
  --shadow-xs:           0 1px 0 rgba(15,19,32,.04);
  --shadow-sm:           0 1px 2px rgba(15,19,32,.06), 0 1px 1px rgba(15,19,32,.04);
  --shadow-md:           0 2px 6px rgba(15,19,32,.08), 0 1px 2px rgba(15,19,32,.04);
  --shadow-lg:           0 8px 24px rgba(15,19,32,.12);
  --shadow-xl:           0 16px 40px rgba(15,19,32,.18);
  --shadow-focus:        0 0 0 3px rgba(46,138,153,.22);
  --shadow-inset-input:  inset 0 1px 2px rgba(15,19,32,.04);

  /* typography */
  --font-sans:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Fraunces', 'Times New Roman', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-tabular: 'Space Grotesk', sans-serif;

  /* font sizes */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  /* font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* line heights */
  --lh-tight:    1.15;
  --lh-snug:     1.30;
  --lh-normal:   1.45;
  --lh-relaxed:  1.60;

  /* letter spacing */
  --ls-tight:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;

  /* spacing (4px base) */
  --sp-0:  0;
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  20px;
  --sp-7:  24px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 48px;
  --sp-12: 64px;
  --sp-16: 96px;

  /* radii */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 999px;

  /* layout */
  --sidebar-w:           232px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            52px;
  --row-h-compact:       32px;
  --row-h-default:       40px;
  --row-h-comfortable:   48px;

  /* motion */
  --ease-standard:    cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized:  cubic-bezier(0.3, 0.0, 0.0, 1.0);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;

  /* foreground semântico (para texto sobre fundo claro) */
  --fg-pos:  #1E7A4A;
  --fg-neg:  #A82838;

  /* chart tokens — consumidos por rios-echarts-theme.js */
  --chart-1:  #2E8A99;
  --chart-2:  #C9B17A;
  --chart-3:  #0E2148;
  --chart-4:  #2F8F5F;
  --chart-5:  #C0394A;
  --chart-6:  #818B9C;

  --chart-portfolio:  #0E2148;
  --chart-benchmark:  #C9B17A;
  --chart-pos:        #2F8F5F;
  --chart-neg:        #C0394A;
  --chart-pos-soft:   #BFE0CE;
  --chart-neg-soft:   #EFC2C8;

  --chart-axis:        #CDD4DE;
  --chart-axis-label:  #818B9C;
  --chart-grid:        #E2E7EE;
  --chart-grid-soft:   #EEF1F5;
  --chart-crosshair:   rgba(14,33,72,0.15);

  --chart-tooltip-bg:     #0E2148;
  --chart-tooltip-fg:     #FFFFFF;
  --chart-tooltip-border: rgba(255,255,255,0.12);

  --chart-line-w:      1.5;
  --chart-line-w-bold: 2;
  --chart-line-w-thin: 1;

  --chart-heat-neg-3: #A82838;
  --chart-heat-neg-2: #D4697A;
  --chart-heat-neg-1: #EFC2C8;
  --chart-heat-zero:  #F7F8FA;
  --chart-heat-pos-1: #BFE0CE;
  --chart-heat-pos-2: #6BBF9A;
  --chart-heat-pos-3: #1E7A4A;
}

/* ==========================================================
   DARK MODE — ativada via <html data-theme="dark">
   ========================================================== */
[data-theme="dark"] {
  --bg-app:     #0A1024;
  --bg-surface: #121A36;
  --bg-elevated:#172248;
  --bg-subtle:  #0E1530;
  --bg-sunken:  #0E1530;

  --fg-1:       #E6E9F2;
  --fg-2:       #9AA3B5;
  --fg-3:       #6F7892;
  --fg-disabled:#4A5168;
  --fg-inverse: var(--gray-900);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  --fg-link:       #5BBFD0;
  --fg-link-hover: #7FCFDD;

  --pos:        #5BC48A;
  --pos-bg:     rgba(91, 196, 138, 0.12);
  --pos-border: rgba(91, 196, 138, 0.28);
  --neg:        #E2697A;
  --neg-bg:     rgba(226, 105, 122, 0.12);
  --neg-border: rgba(226, 105, 122, 0.30);
  --warn:       #E0B25A;
  --warn-bg:    rgba(224, 178, 90, 0.12);
  --warn-border:rgba(224, 178, 90, 0.30);
  --info:       #6FA6E8;
  --info-bg:    rgba(111, 166, 232, 0.12);
  --info-border:rgba(111, 166, 232, 0.30);

  --pending-ink: var(--rios-gold);

  --fg-pos: #5BC48A;
  --fg-neg: #E2697A;

  --chart-1:  #5BBFD0;
  --chart-2:  #E8DCC0;
  --chart-3:  #4A6FA5;
  --chart-4:  #5BC48A;
  --chart-5:  #E2697A;
  --chart-6:  #9AA3B5;

  --chart-portfolio:  #C9B17A;
  --chart-benchmark:  #5BBFD0;
  --chart-pos:        #5BC48A;
  --chart-neg:        #E2697A;
  --chart-pos-soft:   rgba(91,196,138,0.20);
  --chart-neg-soft:   rgba(226,105,122,0.20);

  --chart-axis:        rgba(255,255,255,0.18);
  --chart-axis-label:  #9AA3B5;
  --chart-grid:        rgba(255,255,255,0.06);
  --chart-grid-soft:   rgba(255,255,255,0.03);
  --chart-crosshair:   rgba(201,177,122,0.20);

  --chart-tooltip-bg:     #0A1024;
  --chart-tooltip-border: rgba(255,255,255,0.14);

  --chart-heat-neg-3: #E2697A;
  --chart-heat-neg-2: #C4717F;
  --chart-heat-neg-1: rgba(226,105,122,0.25);
  --chart-heat-zero:  #172248;
  --chart-heat-pos-1: rgba(91,196,138,0.25);
  --chart-heat-pos-2: #4BAB76;
  --chart-heat-pos-3: #5BC48A;

  --shadow-xs:          0 1px 0 rgba(0,0,0,.4);
  --shadow-sm:          0 1px 2px rgba(0,0,0,.5);
  --shadow-md:          0 2px 6px rgba(0,0,0,.55);
  --shadow-lg:          0 8px 24px rgba(0,0,0,.6);
  --shadow-focus:       0 0 0 3px rgba(91,191,208,.32);
  --shadow-inset-input: inset 0 1px 2px rgba(0,0,0,.3);
}

[data-theme="dark"] .rios-table thead th {
  background: rgba(201, 177, 122, 0.05);
  color: var(--rios-gold);
  border-bottom-color: rgba(201, 177, 122, 0.30);
}
[data-theme="dark"] .rios-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .rios-table tr.total td { background: rgba(255,255,255,.04); border-top-color: var(--rios-gold); }
[data-theme="dark"] .rios-topbar .brand { color: var(--rios-gold); }
[data-theme="dark"] .rios-topbar nav a.active { color: var(--rios-gold); }
[data-theme="dark"] .rios-tabs button.active { color: var(--rios-gold); }
[data-theme="dark"] .rios-btn--secondary { background: var(--bg-elevated); }
[data-theme="dark"] .rios-btn--secondary:hover { background: var(--bg-sunken); }
[data-theme="dark"] .rios-btn--gold { background: var(--bg-elevated); color: var(--rios-gold); }
[data-theme="dark"] .rios-btn--gold:hover { background: rgba(201,177,122,.10); color: var(--rios-gold); }
[data-theme="dark"] .rios-chip { background: var(--bg-elevated); color: var(--fg-1); }
[data-theme="dark"] .rios-chip:hover:not(.active) { background: var(--bg-sunken); }
[data-theme="dark"] .rios-input-prefix { background: var(--bg-sunken); border-right-color: var(--border-subtle); color: var(--fg-2); }
[data-theme="dark"] .rios-badge--neutral { background: var(--bg-sunken); }
[data-theme="dark"] .rios-badge--private { background: var(--bg-sunken); color: var(--rios-gold); }
[data-theme="dark"] img.rios-logo-on-light { filter: brightness(0) invert(1); }

[data-theme="dark"] .tab-link:hover,
[data-theme="dark"] .tab-link:focus-visible,
[data-theme="dark"] .tab-btn:hover:not([disabled]),
[data-theme="dark"] .subtab-btn:hover,
[data-theme="dark"] .rios-tabs button:hover,
[data-theme="dark"] .category-option:hover,
[data-theme="dark"] .category-option:focus-visible,
[data-theme="dark"] .catalog-nav-link:hover,
[data-theme="dark"] .catalog-nav-link:focus-visible {
  background: var(--bg-sunken) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg-1) !important;
}

[data-theme="dark"] .tab-link.is-active,
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .tab-btn.is-active,
[data-theme="dark"] .subtab-btn.active,
[data-theme="dark"] .subtab-btn.is-active,
[data-theme="dark"] .rios-tabs button.active,
[data-theme="dark"] .category-option.is-active,
[data-theme="dark"] .catalog-nav-link.is-active {
  background: rgba(201, 177, 122, 0.10) !important;
  border-color: rgba(201, 177, 122, 0.48) !important;
  color: var(--rios-gold) !important;
}

[data-theme="dark"] .metric,
[data-theme="dark"] .kpi,
[data-theme="dark"] .stat,
[data-theme="dark"] .summary-item,
[data-theme="dark"] .mini-card,
[data-theme="dark"] .status-card,
[data-theme="dark"] .overview-selector-card,
[data-theme="dark"] .pge-stat-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--fg-1) !important;
}

[data-theme="dark"] .metric h2,
[data-theme="dark"] .metric h3,
[data-theme="dark"] .metric span,
[data-theme="dark"] .metric .label,
[data-theme="dark"] .kpi .lab,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .summary-item span,
[data-theme="dark"] .mini-card h4,
[data-theme="dark"] .pge-stat-label {
  color: var(--fg-2) !important;
}

[data-theme="dark"] .metric p,
[data-theme="dark"] .metric strong,
[data-theme="dark"] .metric .value,
[data-theme="dark"] .metric .metric,
[data-theme="dark"] .kpi .val,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .summary-item strong,
[data-theme="dark"] .mini-card .metric,
[data-theme="dark"] .pge-stat-value {
  color: var(--fg-1) !important;
}

[data-theme="dark"] .mini-card .metric {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ==========================================================
   BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'ss02';
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }

a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-link-hover); }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  color: var(--rios-navy);
}

/* ==========================================================
   GHOST ACTIONS — canônico único para todas as páginas
   ========================================================== */
.ghost-link,
.ghost-btn,
.ghost-button {
  color: var(--fg-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font: inherit;
  font-size: calc(var(--text-base) + 2px);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.ghost-link:hover,
.ghost-btn:hover,
.ghost-button:hover {
  background: var(--gray-100);
  border-color: var(--border-strong);
  color: var(--fg-1);
}

[data-theme="dark"] .ghost-link:hover,
[data-theme="dark"] .ghost-btn:hover,
[data-theme="dark"] .ghost-button:hover,
[data-theme="dark"] .ghost-link:focus-visible,
[data-theme="dark"] .ghost-btn:focus-visible,
[data-theme="dark"] .ghost-button:focus-visible {
  background: transparent !important;
  border-color: rgba(201, 177, 122, 0.52) !important;
  color: var(--fg-1) !important;
  box-shadow: 0 0 0 1px rgba(201, 177, 122, 0.28) !important;
}

.ghost-link:focus-visible,
.ghost-btn:focus-visible,
.ghost-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ==========================================================
   APP SIDEBAR
   ========================================================== */
:root {
  --rios-sidebar-w: 248px;
  --rios-sidebar-w-collapsed: 68px;
}

body.rios-sidebar-enabled {
  padding-left: var(--rios-sidebar-w);
  transition: padding-left var(--dur-base) var(--ease-standard);
}

body.rios-sidebar-enabled.rios-sidebar-collapsed {
  padding-left: var(--rios-sidebar-w-collapsed);
}

.rios-app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1200;
  width: var(--rios-sidebar-w);
  background: linear-gradient(180deg, var(--rios-navy-deep), var(--rios-navy));
  color: var(--fg-on-navy);
  border-right: 1px solid var(--border-on-navy);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-md);
  transition: width var(--dur-base) var(--ease-standard);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;

  /* Ancora os tokens de surface para que o dark mode não vaze na sidebar.
     A sidebar é sempre navy — idêntica em light e dark. */
  --bg-app:     var(--rios-navy-deep);
  --bg-surface: var(--rios-navy);
  --bg-elevated:var(--rios-navy-soft);
  --bg-sunken:  var(--rios-navy-deep);
  --bg-subtle:  rgba(255,255,255,0.05);
  --fg-1:       var(--fg-on-navy);
  --fg-2:       var(--fg-on-navy-2);
  --fg-3:       var(--fg-on-navy-3);
  --fg-inverse: var(--gray-0);
  --border-subtle:  var(--border-on-navy);
  --border-default: var(--border-on-navy);
  --border-strong:  rgba(201,177,122,0.40);
  --shadow-focus:   0 0 0 3px rgba(201,177,122,0.32);
}

.rios-app-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--rios-gold);
}

.rios-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 40px;
}

.rios-sidebar-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--sp-3);
  color: var(--fg-on-navy);
  text-decoration: none;
}

.rios-sidebar-logo:hover {
  color: var(--fg-on-navy);
}

.rios-sidebar-logo-img {
  display: block;
  width: 128px;
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
}

.rios-sidebar-logo-mark,
.rios-sidebar-avatar,
.rios-sidebar-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.rios-sidebar-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 177, 122, 0.54);
  background: rgba(255, 255, 255, 0.08);
  color: var(--rios-gold);
}

.rios-sidebar-logo-text,
.rios-sidebar-user-copy,
.rios-sidebar-nav-label {
  min-width: 0;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.rios-sidebar-logo-text {
  display: grid;
  gap: 0;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.rios-sidebar-logo-text strong {
  color: var(--fg-on-navy);
  font-size: var(--text-md);
}

.rios-sidebar-logo-text span {
  color: var(--fg-on-navy-2);
  font-size: var(--text-2xs);
}

.rios-sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 177, 122, 0.26);
  background: rgba(201, 177, 122, 0.08);
  color: var(--rios-gold-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.rios-sidebar-toggle:hover,
.rios-sidebar-toggle:focus-visible {
  color: var(--rios-gold);
  background: rgba(201, 177, 122, 0.14);
  border-color: rgba(201, 177, 122, 0.48);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 177, 122, 0.32);
}

.rios-sidebar-toggle:active {
  transform: translateY(0.5px);
}

.rios-sidebar-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform var(--dur-base) var(--ease-standard);
}

.rios-sidebar-toggle svg polyline,
.rios-sidebar-toggle svg path {
  vector-effect: non-scaling-stroke;
}

.rios-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--border-on-navy);
}

.rios-sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  color: var(--rios-navy);
  background: var(--rios-gold-soft);
  border: 1px solid rgba(201, 177, 122, 0.68);
  overflow: hidden;
}

.rios-sidebar-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.rios-sidebar-user-copy {
  display: grid;
  gap: 2px;
}

.rios-sidebar-user-copy strong {
  color: var(--fg-on-navy);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rios-sidebar-user-copy span {
  color: var(--fg-on-navy-2);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rios-sidebar-nav {
  display: grid;
  gap: var(--sp-2);
}

.rios-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 34px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--fg-on-navy-2);
  text-decoration: none;
  border: 1px solid transparent;
}

.rios-sidebar-nav-item:hover,
.rios-sidebar-nav-item:focus-visible {
  color: var(--fg-on-navy);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-on-navy);
  box-shadow: none;
  outline: none;
}

.rios-sidebar-nav-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  color: var(--nav-icon-color, var(--rios-gold));
  font-size: 10px;
}

.rios-sidebar-nav-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

/* Nav tone → icon color mapping (adapted for dark sidebar) */
[data-nav-tone="portal"]     { --nav-icon-color: var(--rios-gold); }
[data-nav-tone="personal"]   { --nav-icon-color: var(--rios-teal-soft); }
[data-nav-tone="admin"]      { --nav-icon-color: var(--gray-300); }
[data-nav-tone="compliance"] { --nav-icon-color: var(--rios-gold-soft); }
[data-nav-tone="risk"]       { --nav-icon-color: var(--rios-teal-soft); }
[data-nav-tone="strategy"]   { --nav-icon-color: var(--rios-gold-soft); }
[data-nav-tone="data"]       { --nav-icon-color: var(--rios-teal-soft); }
[data-nav-tone="automation"] { --nav-icon-color: var(--rios-teal-soft); }
[data-nav-tone="development"]{ --nav-icon-color: var(--rios-teal-soft); }
[data-nav-tone="analysis"]   { --nav-icon-color: var(--rios-teal-soft); }
[data-nav-tone="support"]    { --nav-icon-color: var(--rios-teal-soft); }
[data-nav-tone="django-admin"]{ --nav-icon-color: var(--rios-gold-soft); }

.rios-sidebar-nav-label {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.rios-sidebar-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--sp-3);
  color: var(--rios-gold);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.rios-sidebar-report-form {
  margin: auto 0 0;
  padding: 0;
  border-top: 1px solid var(--border-on-navy);
  padding-top: var(--sp-3);
}

.rios-sidebar-logout-form {
  margin: var(--sp-2) 0 0;
  padding: 0;
}

.rios-sidebar-report-btn {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--rios-gold-soft);
  text-align: left;
}

.rios-sidebar-report-btn:hover,
.rios-sidebar-report-btn:focus-visible {
  color: var(--rios-teal);
  background: rgba(80, 169, 184, 0.12);
  border-color: rgba(80, 169, 184, 0.22);
  box-shadow: none;
  outline: none;
}

.rios-sidebar-logout-btn {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--rios-gold-soft);
  text-align: left;
}

.rios-sidebar-logout-btn:hover,
.rios-sidebar-logout-btn:focus-visible {
  color: var(--neg);
  background: rgba(192, 57, 74, 0.12);
  border-color: rgba(192, 57, 74, 0.2);
  box-shadow: none;
  outline: none;
}

.rios-sidebar-favorites,
.rios-sidebar-recent {
  border-top: 1px solid var(--border-on-navy);
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
}

.rios-sidebar-favorites[hidden],
.rios-sidebar-recent[hidden] {
  display: none;
}

.rios-sidebar-favorites-label {
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-2);
}

body.rios-sidebar-collapsed .rios-sidebar-favorites-label {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

body.rios-sidebar-collapsed .rios-sidebar-favorites,
body.rios-sidebar-collapsed .rios-sidebar-recent {
  width: 100%;
}

.rios-sidebar-footer {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  position: relative;
  border-top: 1px solid var(--border-on-navy);
  padding-top: var(--sp-4);
}

.rios-sidebar-theme {
  min-width: 0;
}

.rios-app-sidebar .rios-theme-toggle {
  height: 28px;
  max-width: 156px;
  padding: 0 var(--sp-3);
  border-color: var(--border-on-navy);
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-on-navy-2);
}

.rios-app-sidebar .rios-theme-toggle:hover,
.rios-app-sidebar .rios-theme-toggle:focus-visible {
  border-color: rgba(201, 177, 122, 0.60);
  background: rgba(201, 177, 122, 0.14);
  color: var(--fg-on-navy);
  box-shadow: 0 0 0 3px rgba(201, 177, 122, 0.32);
}

.rios-app-sidebar .rios-theme-toggle .label-light,
.rios-app-sidebar .rios-theme-toggle .label-dark {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rios-sidebar-info-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-on-navy);
  background: rgba(255, 255, 255, 0.06);
  color: var(--rios-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.rios-sidebar-info-btn:hover,
.rios-sidebar-info-btn[aria-expanded="true"] {
  background: rgba(201, 177, 122, 0.14);
  border-color: rgba(201, 177, 122, 0.60);
}

.rios-sidebar-info-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 177, 122, 0.32);
}

.rios-sidebar-info-popover {
  position: fixed;
  right: auto;
  bottom: 16px;
  left: calc(var(--rios-sidebar-w) + 10px);
  width: 264px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--rios-navy-deep);
  border: 1px solid var(--border-on-navy);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-lg);
  z-index: 2600;
}

.rios-sidebar-info-popover[hidden] { display: none; }

.rios-sidebar-info-dl {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.rios-sidebar-info-dl div {
  display: grid;
  gap: 2px;
}

.rios-sidebar-section-label svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.rios-sidebar-info-dl dt {
  color: var(--fg-on-navy-3);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.rios-sidebar-info-dl dd {
  margin: 0;
  color: var(--fg-on-navy);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.rios-sidebar-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.rios-sidebar-info-row span {
  min-width: 0;
}

.rios-sidebar-copy-btn,
.rios-sidebar-copy-all-btn {
  border: 1px solid rgba(214, 184, 113, 0.38);
  background: rgba(214, 184, 113, 0.10);
  color: var(--rios-gold-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.rios-sidebar-copy-btn {
  flex: 0 0 auto;
  padding: 3px 7px;
}

.rios-sidebar-copy-all-btn {
  width: 100%;
  margin-top: var(--sp-3);
  padding: 8px 10px;
}

.rios-sidebar-copy-btn:hover,
.rios-sidebar-copy-btn:focus-visible,
.rios-sidebar-copy-all-btn:hover,
.rios-sidebar-copy-all-btn:focus-visible,
.rios-sidebar-copy-btn.is-copied,
.rios-sidebar-copy-all-btn.is-copied {
  background: rgba(214, 184, 113, 0.18);
  border-color: rgba(214, 184, 113, 0.72);
  color: #fff;
}

.rios-sidebar-info-mono {
  font-family: var(--font-mono) !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: 0;
}

.rios-sidebar-info-divider {
  height: 1px;
  background: var(--border-on-navy);
  margin: var(--sp-3) 0;
}

body.rios-sidebar-collapsed .rios-app-sidebar {
  width: var(--rios-sidebar-w-collapsed);
  align-items: center;
  padding-inline: var(--sp-3);
}

body.rios-sidebar-collapsed .rios-sidebar-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

body.rios-sidebar-collapsed .rios-sidebar-logo-text,
body.rios-sidebar-collapsed .rios-sidebar-user-copy,
body.rios-sidebar-collapsed .rios-sidebar-nav-label {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

body.rios-sidebar-collapsed .rios-sidebar-footer {
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

body.rios-sidebar-collapsed .rios-app-sidebar .rios-theme-toggle {
  width: 28px;
  padding: 0;
  justify-content: center;
}

body.rios-sidebar-collapsed .rios-app-sidebar .rios-theme-toggle .label-light,
body.rios-sidebar-collapsed .rios-app-sidebar .rios-theme-toggle .label-dark {
  display: none;
}

body.rios-sidebar-collapsed .rios-sidebar-brand,
body.rios-sidebar-collapsed .rios-sidebar-user,
body.rios-sidebar-collapsed .rios-sidebar-nav,
body.rios-sidebar-collapsed .rios-sidebar-report-form,
body.rios-sidebar-collapsed .rios-sidebar-logout-form {
  width: 100%;
}

body.rios-sidebar-collapsed .rios-sidebar-report-btn,
body.rios-sidebar-collapsed .rios-sidebar-logout-btn {
  justify-content: center;
  padding-inline: 0;
}

body.rios-sidebar-collapsed .rios-sidebar-brand,
body.rios-sidebar-collapsed .rios-sidebar-user {
  justify-content: center;
}

body.rios-sidebar-collapsed .rios-sidebar-nav-item {
  justify-content: center;
  padding-inline: 0;
}

body.rios-sidebar-collapsed .rios-sidebar-toggle svg {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  body.rios-sidebar-enabled,
  body.rios-sidebar-enabled.rios-sidebar-collapsed {
    padding-left: 0;
    padding-top: 56px;
  }

  .rios-app-sidebar,
  body.rios-sidebar-collapsed .rios-app-sidebar {
    inset: 0 0 auto 0;
    width: 100%;
    height: 56px;
    padding: 10px var(--sp-4);
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    border-right: 0;
    border-bottom: 1px solid var(--border-on-navy);
  }

  .rios-sidebar-user,
  .rios-sidebar-info-btn,
  .rios-sidebar-info-popover {
    display: none;
  }

  .rios-sidebar-footer {
    display: flex;
    margin-left: auto;
    padding-top: 0;
    border-top: 0;
  }

  .rios-app-sidebar .rios-theme-toggle {
    width: 28px;
    padding: 0;
    justify-content: center;
  }

  .rios-app-sidebar .rios-theme-toggle .label-light,
  .rios-app-sidebar .rios-theme-toggle .label-dark {
    display: none;
  }

  .rios-sidebar-brand {
    min-width: max-content;
  }

  .rios-sidebar-nav {
    display: flex;
    overflow-x: auto;
    gap: var(--sp-2);
  }

  .rios-sidebar-nav-item {
    flex: 0 0 auto;
  }

  .rios-sidebar-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rios-sidebar-logout-form {
    margin-top: 0;
  }

  body.rios-sidebar-collapsed .rios-sidebar-logo-text,
  body.rios-sidebar-collapsed .rios-sidebar-nav-label {
    opacity: 1;
    pointer-events: auto;
    position: static;
  }
}

/* ==========================================================
   CARD
   ========================================================== */
.rios-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.rios-card.feature { border-top: 2px solid var(--rios-gold); }
.rios-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.rios-card-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--fg-1); }
.rios-card-meta  { font-size: var(--text-xs); color: var(--fg-3); }
.rios-card-body  { padding: 16px; }
.rios-card-body.flush { padding: 0; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.rios-btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  text-decoration: none;
}
.rios-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rios-btn--primary   { background: var(--rios-navy); color: white; }
.rios-btn--primary:hover { background: var(--rios-navy-soft); color: white; }
.rios-btn--secondary { background: white; color: var(--fg-1); border-color: var(--border-default); }
.rios-btn--secondary:hover { background: var(--gray-100); border-color: var(--border-strong); color: var(--fg-1); }
.rios-btn--ghost     { background: transparent; color: var(--fg-1); }
.rios-btn--ghost:hover { background: var(--gray-100); color: var(--fg-1); }
.rios-btn--danger    { background: var(--neg); color: white; }
.rios-btn--danger:hover { background: #A82E3D; color: white; }
.rios-btn--gold      { background: white; color: var(--rios-navy); border-color: var(--rios-gold); }
.rios-btn--gold:hover { background: var(--rios-gold-soft); color: var(--rios-navy); }
.rios-btn--sm  { height: 26px; padding: 0 10px; font-size: var(--text-sm); }
.rios-btn--lg  { height: 40px; padding: 0 18px; font-size: var(--text-md); }
.rios-btn[disabled],
.rios-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ==========================================================
   INPUTS
   ========================================================== */
.rios-field       { display: flex; flex-direction: column; gap: 4px; }
.rios-field-label { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--fg-2); }
.rios-field-help  { font-size: var(--text-xs); color: var(--fg-3); }
.rios-field-error { font-size: var(--text-xs); color: var(--neg); }

.rios-input {
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--bg-surface);
  box-shadow: var(--shadow-inset-input);
  width: 100%;
  outline: none;
}
.rios-input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.rios-input.error { border-color: var(--neg); }

.rios-input-wrap {
  display: flex;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  box-shadow: var(--shadow-inset-input);
}
.rios-input-wrap:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.rios-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--gray-100);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-right: 1px solid var(--border-subtle);
}
.rios-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: transparent;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

/* ==========================================================
   BADGES
   ========================================================== */
.rios-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  white-space: nowrap;
}
.rios-badge.square { border-radius: var(--radius-sm); }
.rios-badge .dot   { width: 6px; height: 6px; border-radius: 50%; }
.rios-badge--pos     { background: var(--pos-bg);    color: var(--pos);  }
.rios-badge--pos .dot { background: var(--pos); }
.rios-badge--neg     { background: var(--neg-bg);    color: var(--neg);  }
.rios-badge--neg .dot { background: var(--neg); }
.rios-badge--warn    { background: var(--warn-bg);   color: var(--warn); }
.rios-badge--warn .dot { background: var(--warn); }
.rios-badge--info    { background: var(--info-bg);   color: var(--info); }
.rios-badge--info .dot { background: var(--info); }
.rios-badge--neutral { background: var(--gray-100);  color: var(--fg-1); }
.rios-badge--neutral .dot { background: var(--fg-3); }
.rios-badge--private { background: var(--rios-navy); color: var(--rios-gold); }

/* ==========================================================
   ALERTS
   ========================================================== */
.rios-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid; font-size: var(--text-sm); }
.rios-alert--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
.rios-alert--warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.rios-alert--neg  { background: var(--neg-bg);  border-color: var(--neg-border);  color: var(--neg);  }
.rios-alert--pos  { background: var(--pos-bg);  border-color: var(--pos-border);  color: var(--pos);  }

/* ==========================================================
   KPI
   ========================================================== */
.rios-kpi { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-xs); }
.rios-kpi.feature { border-top: 2px solid var(--rios-gold); }
.rios-kpi-label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.rios-kpi-value { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.rios-kpi-delta { font-size: var(--text-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ==========================================================
   TABLE
   ========================================================== */
.rios-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rios-table thead th {
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rios-gold-warm);
  padding: 8px 14px;
  background: rgba(14,33,72,.04);
  border-bottom: 1px solid rgba(201,177,122,.4);
  white-space: nowrap;
}
.rios-table thead th.r { text-align: right; }
.rios-table tbody td  { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-1); }
.rios-table tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
.rios-table tbody tr  { transition: background 100ms; }
.rios-table tbody tr:hover { background: var(--gray-100); }
.rios-table tr.total td { background: var(--gray-100); font-weight: var(--fw-semibold); border-top: 2px solid var(--rios-navy); border-bottom: none; }

/* ==========================================================
   TOPBAR
   ========================================================== */
.rios-topbar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--rios-gold);
  border-radius: var(--radius-md);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 18px;
}
.rios-topbar .brand { font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--rios-navy); }
.rios-topbar .brand .sep { color: var(--rios-gold); margin: 0 6px; font-weight: var(--fw-regular); }
.rios-topbar .brand .sub { color: var(--rios-teal); }
.rios-topbar nav { display: flex; gap: 2px; margin-left: 18px; }
.rios-topbar nav a { padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-base); color: var(--fg-2); font-weight: var(--fw-medium); }
.rios-topbar nav a.active { background: var(--gray-100); color: var(--rios-navy); }
.rios-topbar nav a:hover  { background: var(--gray-100); color: var(--fg-1); }

/* ==========================================================
   TABS
   ========================================================== */
.rios-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 14px; }
.rios-tabs button {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rios-tabs button.active { color: var(--rios-navy); border-bottom-color: var(--rios-gold); }
.rios-tabs button:hover  { color: var(--fg-1); }

/* ==========================================================
   CHIP
   ========================================================== */
.rios-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: white; font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; font-family: var(--font-sans); }
.rios-chip.active { background: var(--rios-navy); color: white; border-color: var(--rios-navy); }
.rios-chip:hover:not(.active) { background: var(--gray-100); }

/* ==========================================================
   THEME TOGGLE
   ========================================================== */
.rios-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--border-default);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.rios-theme-toggle:hover,
.rios-theme-toggle:focus-visible { color: var(--fg-1); border-color: var(--border-strong); outline: none; }
.rios-theme-toggle .icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.rios-theme-toggle .icon svg { width: 14px; height: 14px; display: block; }
.rios-theme-toggle .icon-sun  { display: inline-flex; }
.rios-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .rios-theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .rios-theme-toggle .icon-moon { display: inline-flex; }
.rios-theme-toggle .label-light { display: inline; }
.rios-theme-toggle .label-dark  { display: none; }
[data-theme="dark"] .rios-theme-toggle .label-light { display: none; }
[data-theme="dark"] .rios-theme-toggle .label-dark  { display: inline; }
.rios-theme-toggle.compact { width: 32px; padding: 0; justify-content: center; }
.rios-theme-toggle.compact .label-light,
.rios-theme-toggle.compact .label-dark { display: none; }

/* ==========================================================
   TYPOGRAPHY UTILITIES
   ========================================================== */
.t-display  { font-family: var(--font-serif);  font-size: var(--text-4xl); font-weight: var(--fw-medium);  line-height: 1.15; letter-spacing: -.01em; color: var(--fg-1); }
.t-greeting { font-family: var(--font-serif);  font-size: var(--text-3xl); font-weight: var(--fw-regular); line-height: 1.15; letter-spacing: -.01em; color: var(--fg-1); }
.t-h1       { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--fg-1); }
.t-h2       { font-size: var(--text-xl);  font-weight: var(--fw-semibold); color: var(--fg-1); }
.t-h3       { font-size: var(--text-lg);  font-weight: var(--fw-semibold); color: var(--fg-1); }
.t-body     { font-size: var(--text-base); color: var(--fg-1); }
.t-caption  { font-size: var(--text-xs);  color: var(--fg-2); }
.t-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-section-label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }

/* color utilities */
.fg-pos  { color: var(--pos);  }
.fg-neg  { color: var(--neg);  }
.fg-warn { color: var(--warn); }
.fg-info { color: var(--info); }
.fg-muted{ color: var(--fg-2); }
.fg-faint{ color: var(--fg-3); }
.fg-gold { color: var(--rios-gold-warm); }
.fg-teal { color: var(--rios-teal); }
.fg-navy { color: var(--rios-navy); }

/* legacy shorthands (usados por alguns templates antigos) */
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ==========================================================
   SMOOTH THEME TRANSITION
   ========================================================== */
html, body, .rios-card, .rios-topbar, .rios-kpi, .rios-input, .rios-btn {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   DARK MODE — patches globais para templates legados
   Cobre padrões de gray-* como surface e navy hardcoded.
   ========================================================== */

/* Cabeçalhos de tabela com background navy hardcoded */
[data-theme="dark"] th {
  background: rgba(201, 177, 122, 0.05) !important;
  color: var(--rios-gold) !important;
  border-bottom-color: rgba(201, 177, 122, 0.30) !important;
}


/* Navy inline hardcoded como background sutil (0.03–0.1 de opacidade) */
[data-theme="dark"] [style*="rgba(14, 33, 72"],
[data-theme="dark"] [style*="rgba(14,33,72"] {
  background: var(--bg-sunken) !important;
}

/* Tabelas com hover navy */
[data-theme="dark"] tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Status-pill navy (ex: risco_terceiros) */
[data-theme="dark"] .status-pill-update {
  background: rgba(201, 177, 122, 0.08) !important;
  color: var(--rios-gold) !important;
  border-color: rgba(201, 177, 122, 0.28) !important;
}

/* ==========================================================
   SIDEBAR — neutraliza qualquer box-shadow teal herdado
   do [data-theme="dark"] em todos os elementos interativos.
   ========================================================== */
.rios-app-sidebar *:focus-visible,
.rios-app-sidebar *:hover {
  box-shadow: none;
  outline: none;
}

.rios-app-sidebar .rios-sidebar-toggle:focus-visible,
.rios-app-sidebar .rios-sidebar-toggle:hover {
  box-shadow: 0 0 0 3px rgba(201, 177, 122, 0.32);
}

.rios-app-sidebar .rios-sidebar-info-btn:focus-visible,
.rios-app-sidebar .rios-sidebar-info-btn:hover {
  box-shadow: 0 0 0 3px rgba(201, 177, 122, 0.32);
}

.rios-app-sidebar .rios-theme-toggle:focus-visible,
.rios-app-sidebar .rios-theme-toggle:hover {
  box-shadow: 0 0 0 3px rgba(201, 177, 122, 0.32);
}

/* ── Sidebar: scrollbar discreta no webkit ─────────────────────────────────── */
.rios-app-sidebar::-webkit-scrollbar {
  width: 8px;
}

.rios-app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.rios-app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.rios-app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* ── Sidebar: banner de impersonação root ──────────────────────────────────── */
.rios-impersonation-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(192, 57, 74, 0.18);
  border: 1px solid rgba(192, 57, 74, 0.55);
  color: #fff;
}

.rios-impersonation-banner-icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(192, 57, 74, 0.45);
  color: #ffd9de;
}

.rios-impersonation-banner-copy {
  display: grid;
  gap: 2px;
  font-size: var(--text-2xs);
  line-height: var(--lh-snug);
}

.rios-impersonation-banner-copy strong {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #ffd9de;
}

.rios-impersonation-banner-copy em {
  font-style: normal;
  font-weight: var(--fw-semibold);
  color: #fff;
}

.rios-impersonation-banner-form {
  margin: 0;
}

.rios-impersonation-banner-btn {
  cursor: pointer;
  padding: 4px 10px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: #fff;
  color: rgb(151, 28, 45);
  border: 1px solid #fff;
}

.rios-impersonation-banner-btn:hover,
.rios-impersonation-banner-btn:focus-visible {
  background: #ffe7eb;
  outline: none;
}

body.rios-sidebar-collapsed .rios-impersonation-banner {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: var(--sp-2);
}

body.rios-sidebar-collapsed .rios-impersonation-banner-copy,
body.rios-sidebar-collapsed .rios-impersonation-banner-form {
  display: none;
}

/* Faixa de alerta também no conteúdo principal para garantir que seja
   visto mesmo em telas que escondem ou minimizam o sidebar. */
body.rios-impersonating::before {
  content: "Visualização root ativa — somente leitura. Encerre na barra lateral.";
  display: block;
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  padding: 6px var(--sp-4);
  background: rgb(192, 57, 74);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-align: center;
}

/* ── Sidebar: grupos colapsáveis por categoria ─────────────────────────────── */
.rios-sidebar-sections {
  border-top: 1px solid var(--border-on-navy);
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  gap: var(--sp-1);
}

.rios-sidebar-group {
  border-radius: var(--radius-sm);
}

.rios-sidebar-group-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--rios-gold-soft);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.rios-sidebar-group-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--rios-gold-soft);
}

.rios-sidebar-group-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.rios-sidebar-group-summary::-webkit-details-marker {
  display: none;
}

.rios-sidebar-group-summary:hover,
.rios-sidebar-group-summary:focus-visible {
  color: var(--rios-gold);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.rios-sidebar-group-caret {
  display: inline-flex;
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.rios-sidebar-group-caret svg {
  width: 100%;
  height: 100%;
}

.rios-sidebar-group[open] > .rios-sidebar-group-summary .rios-sidebar-group-caret {
  transform: rotate(180deg);
}

.rios-sidebar-group-items {
  display: grid;
  gap: 2px;
  padding: var(--sp-1) 0 var(--sp-2);
}

.rios-sidebar-group-items .rios-sidebar-nav-item {
  padding-left: var(--sp-5);
  font-size: var(--text-sm);
}

.rios-sidebar-nav-item.is-active {
  color: var(--rios-gold);
  background: rgba(201, 177, 122, 0.12);
  border-color: rgba(201, 177, 122, 0.28);
  box-shadow: inset 2px 0 0 var(--rios-gold);
}

/* Colapsado: esconde labels de grupo e itens, mas mantém o caret como pista
   visual de que existe navegação ali. Para acessar, expandir o sidebar. */
body.rios-sidebar-collapsed .rios-sidebar-group-items {
  display: none;
}

body.rios-sidebar-collapsed .rios-sidebar-group-summary {
  display: flex;
  justify-content: center;
  padding: var(--sp-2);
}

body.rios-sidebar-collapsed .rios-sidebar-group-label,
body.rios-sidebar-collapsed .rios-sidebar-group-caret {
  display: none;
}

/* ── Sidebar secundária (two-pane) ─────────────────────────────────────────
   Padrão: navy contínuo com a sidebar principal, separador gold ao lado.
   Group label uppercase 10px gold-soft. Items 13px brancos com border-left
   2px transparent; ativo recebe border-left gold + bg teal-soft. Sub-itens
   herdam o padrão de sub-abas (.rios-tabs--sub): fundo um nível mais escuro
   (bg-sunken sobre navy), tipografia menor, ativo com underline gold.    */
.rios-secondary-nav-hidden {
  display: none !important;
}

.rios-app-sidebar-secondary {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--rios-sidebar-w-collapsed);
  z-index: 1199;
  width: var(--rios-sidebar-w);
  background: linear-gradient(180deg, var(--rios-navy-deep), var(--rios-navy));
  border-right: 1px solid var(--border-on-navy);
  color: var(--fg-on-navy);
  display: none;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;

  /* Ancora tokens para que o dark mode não vaze. */
  --bg-app:     var(--rios-navy-deep);
  --bg-surface: var(--rios-navy);
  --bg-sunken:  var(--rios-navy-deep);
}

.rios-app-sidebar-secondary::-webkit-scrollbar { width: 8px; }
.rios-app-sidebar-secondary::-webkit-scrollbar-track { background: transparent; }
.rios-app-sidebar-secondary::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

body.rios-secondary-active .rios-app-sidebar-secondary {
  display: flex;
}

/* Header: ocupa o lugar do brand da principal — título da página com o mesmo
   peso visual do wordmark + chevron de retorno. */
.rios-sidebar-secondary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-on-navy);
}

.rios-sidebar-secondary-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: #ffffff;
}

.rios-sidebar-secondary-expand {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-on-navy);
  border-radius: var(--radius-sm);
  color: var(--rios-gold-soft);
  padding: 0;
}

.rios-sidebar-secondary-expand:hover,
.rios-sidebar-secondary-expand:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--rios-gold);
  border-color: rgba(201, 177, 122, 0.42);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.rios-sidebar-secondary-expand svg {
  width: 14px;
  height: 14px;
}

.rios-sidebar-secondary-nav {
  display: grid;
  gap: var(--sp-2);
}

.rios-sidebar-secondary-group {
  display: grid;
  gap: var(--sp-2);
}

/* ── Nav item principal: replica .rios-sidebar-nav-item exatamente ───── */
.rios-sidebar-secondary-item {
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--rios-gold-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  line-height: var(--lh-snug);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.rios-sidebar-secondary-item:hover,
.rios-sidebar-secondary-item:focus-visible {
  color: var(--fg-on-navy);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-on-navy);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.rios-sidebar-secondary-item.is-active {
  color: var(--rios-gold);
  background: rgba(201, 177, 122, 0.12);
  border-color: rgba(201, 177, 122, 0.28);
  box-shadow: inset 2px 0 0 var(--rios-gold);
}

/* ── Sub-lista aninhada: agrupada com border-top sutil ──────────────── */
.rios-sidebar-secondary-sublist {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border-on-navy);
}

.rios-sidebar-secondary-group:not(.is-open) .rios-sidebar-secondary-sublist {
  display: none;
}

.rios-sidebar-secondary-subitem {
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px var(--sp-3) 6px calc(var(--sp-3) + 14px);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  line-height: var(--lh-snug);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.rios-sidebar-secondary-subitem:hover,
.rios-sidebar-secondary-subitem:focus-visible {
  color: var(--fg-on-navy);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-on-navy);
  outline: none;
}

.rios-sidebar-secondary-subitem.is-active {
  color: var(--rios-gold);
  background: rgba(201, 177, 122, 0.10);
  border-color: rgba(201, 177, 122, 0.22);
  box-shadow: inset 2px 0 0 var(--rios-gold);
}

/* Quando a secundária está aberta, soma sua largura ao padding já aplicado
   pela sidebar principal (que está colapsada nesse momento). */
body.rios-sidebar-enabled.rios-sidebar-collapsed.rios-secondary-active {
  padding-left: calc(var(--rios-sidebar-w-collapsed) + var(--rios-sidebar-w));
}