/* ================================================================
   SCUMOPS SHARED COMPONENT LIBRARY — so-* classes
   ================================================================
   PREFIX: so-  (SCUMOps)

   This is the CANONICAL source for all shared UI component classes.
   Extracted from the Design System kitchen sink.
   All pages MUST use these classes. No page-level duplicates.

   Imported globally via app.css → Components section.
   ================================================================ */


/* ================================================================
   CSS VARIABLE PALETTE — Dark Mode (Default)
   ================================================================
   ALL colors in this file reference these variables.
   Light mode: override via [data-theme="light"] { ... }
   ================================================================ */

:root {
  /* ── Surfaces ── */
  --so-void:          #1a2130;
  --so-void-rgb:      26, 33, 48;
  --so-surface:       #2a3140;
  --so-surface-dim:   #30363d;
  --so-raised:        #2a3343;
  --so-inset:         #1e2535;
  --so-well:          #262f3d;
  --so-toolbar:       #373e4b;
  --so-track:         #3b4350;

  /* ── Brand ── */
  --so-brand:         #f06609;
  --so-brand-rgb:     240, 102, 9;
  --so-brand-hover:   #ff8533;
  --so-accent:        #ff7a00;
  --so-accent-rgb:    255, 122, 0;

  /* ── Semantic ── */
  --so-green:          #22c55e;
  --so-green-rgb:      34, 197, 94;
  --so-green-bright:   #00e676;
  --so-green-bright-rgb: 0, 230, 118;
  --so-red:            #d94a4a;
  --so-red-rgb:        217, 74, 74;
  --so-red-vivid:      #ef4444;
  --so-red-vivid-rgb:  239, 68, 68;
  --so-gold:           #d7ac61;
  --so-gold-rgb:       215, 172, 97;
  --so-amber:          #f59e0b;
  --so-blue:           #4a90d9;
  --so-blue-rgb:       74, 144, 217;
  --so-blue-bright-rgb: 59, 130, 246;
  --so-info:           #4077d1;
  --so-info-rgb:       64, 119, 209;
  --so-info-light:     #5eb8ff;
  --so-info-light-rgb: 94, 184, 255;
  --so-purple:         #9c6eff;
  --so-purple-rgb:     156, 110, 255;
  --so-yellow:         #eab308;
  --so-teal:           #47d5a6;
  --so-teal-rgb:       71, 213, 166;

  /* ── Text ── */
  --so-text:          #c8cdd4;
  --so-text-max:      #fff;
  --so-text-light:    #d4d8e0;
  --so-text-mid:      #8a92a1;
  --so-text-flat:     #6b7280;
  --so-text-icon:     #9ca3af;
  --so-text-on-green: #000;

  /* ── Alpha scale (white-on-dark — flips to black-on-light) ── */
  --so-a95:  rgba(255,255,255,0.95);
  --so-a92:  rgba(255,255,255,0.92);
  --so-a90:  rgba(255,255,255,0.9);
  --so-a85:  rgba(255,255,255,0.85);
  --so-a80:  rgba(255,255,255,0.8);
  --so-a75:  rgba(255,255,255,0.75);
  --so-a70:  rgba(255,255,255,0.7);
  --so-a65:  rgba(255,255,255,0.65);
  --so-a60:  rgba(255,255,255,0.6);
  --so-a55:  rgba(255,255,255,0.55);
  --so-a50:  rgba(255,255,255,0.5);
  --so-a45:  rgba(255,255,255,0.45);
  --so-a40:  rgba(255,255,255,0.4);
  --so-a35:  rgba(255,255,255,0.35);
  --so-a30:  rgba(255,255,255,0.3);
  --so-a25:  rgba(255,255,255,0.25);
  --so-a22:  rgba(255,255,255,0.22);
  --so-a20:  rgba(255,255,255,0.2);
  --so-a18:  rgba(255,255,255,0.18);
  --so-a15:  rgba(255,255,255,0.15);
  --so-a14:  rgba(255,255,255,0.14);
  --so-a12:  rgba(255,255,255,0.12);
  --so-a10:  rgba(255,255,255,0.1);
  --so-a08:  rgba(255,255,255,0.08);
  --so-a06:  rgba(255,255,255,0.06);
  --so-a05:  rgba(255,255,255,0.05);
  --so-a04:  rgba(255,255,255,0.04);
  --so-a03:  rgba(255,255,255,0.03);
  --so-a02:  rgba(255,255,255,0.02);
  --so-a015: rgba(255,255,255,0.015);

  /* ── Shadow ── */
  --so-black-rgb:     0, 0, 0;
  --so-shadow:        rgba(0,0,0,0.4);
}


/* ================================================================
   SCROLLBARS
   ================================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--so-a10); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--so-a18); }


/* ================================================================
   INPUTS
   ================================================================ */

.so-input {
    background: var(--so-a04);
    border: 1px solid var(--so-a08);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--so-a80);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}
.so-input:focus { border-color: rgba(var(--so-brand-rgb),0.4); }
.so-input:disabled { opacity: 0.5; cursor: not-allowed; }
.so-input-mono { font-family: 'Share Tech Mono', monospace; }
.so-input-sm { padding: 4px 8px; font-size: 11px; }


/* ================================================================
   SELECTS
   ================================================================ */

.so-select {
    background-color: #2a3140 !important;
    border: 1px solid var(--so-a08);
    border-radius: 4px;
    padding: 5px 20px 5px 8px;
    color: var(--so-a80) !important;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23f06609'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
}
.so-select:focus { border-color: rgba(var(--so-brand-rgb),0.4); }
.so-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Custom dropdown (replaces native <select> for styled dropdowns) ── */
.so-dropdown {
    position: relative;
    width: 100%;
    display: inline-block;
}
.so-dropdown-trigger {
    display: block;
    box-sizing: border-box;
    background-color: var(--so-surface);
    border: 1px solid var(--so-a08);
    border-radius: 4px;
    padding: 5px 24px 5px 8px;
    color: var(--so-a80);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    outline: none;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23f06609'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    user-select: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.so-dropdown-trigger:hover { border-color: var(--so-a15); }
.so-dropdown-trigger:focus { border-color: rgba(var(--so-brand-rgb),0.4); outline: none; }
.so-dropdown-list {
    /* Popup is position:fixed AND moved to document.body on open so it escapes
       ancestor overflow:hidden AND ancestor CSS transforms (modals etc.).
       soDropdown.js sets top/left/width to the trigger's bounding rect.
       z-index must exceed every modal overlay (asm-overlay is 9000). */
    display: none;
    position: fixed;
    z-index: 10001;
    background: var(--so-surface);
    border: 1px solid var(--so-a15);
    border-radius: 4px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.so-dropdown-list::-webkit-scrollbar { width: 4px; }
.so-dropdown-list::-webkit-scrollbar-thumb { background: var(--so-a10); border-radius: 2px; }
.so-dropdown.open .so-dropdown-list,
.so-dropdown-list.open { display: block; }
.so-dropdown-item {
    padding: 5px 10px;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    color: var(--so-a80);
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.so-dropdown-item:hover { background: var(--so-a08); color: var(--so-a95); }
.so-dropdown-item.selected { color: var(--so-brand); }

/* Group header inside a so-dropdown-list — for category-grouped pickers
   (action catalog by SourceKind, token picker by Group, etc.). */
.so-dropdown-group-head {
    padding: 6px 10px 4px;
    font: 600 10px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--so-brand);
    background: var(--so-a04);
    border-bottom: 1px solid var(--so-a06);
}
.so-dropdown-group-head:not(:first-child) { border-top: 1px solid var(--so-a04); }


/* ── Day-of-week pill selectors (Weekly / Bi-weekly recurrence pickers) ── */
.so-day-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.so-day-pill {
    width: 44px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--so-a15);
    background: var(--so-void);
    color: var(--so-a60);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.so-day-pill:hover { border-color: var(--so-a25); color: var(--so-a95); }
.so-day-pill.selected {
    background: var(--so-brand);
    color: #fff;
    border-color: var(--so-brand);
}


/* ================================================================
   LABELS
   ================================================================ */

/* Primary field label — readable, identifies the input */
.so-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--so-a65);
}

/* Secondary/dim label — subordinate context */
.so-label-dim {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--so-a40);
}

/* Key-value label — inline label, orange-tinted */
.so-kv-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(var(--so-brand-rgb),0.5);
}

/* Key-value value — monospace */
.so-kv-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--so-text-flat);
    min-width: 24px;
    text-align: right;
}

/* Key-value separator — dim divider */
.so-kv-sep {
    color: var(--so-a12);
    font-size: 10px;
    margin: 0 2px;
}


/* ================================================================
   SEARCH BAR
   ================================================================ */

.so-search-wrap { position: relative; }

.so-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--so-a25);
    pointer-events: none;
}

.so-search {
    background: var(--so-a04);
    border: 1px solid var(--so-a08);
    border-radius: 4px;
    padding: 5px 10px 5px 28px;
    color: var(--so-a80);
    font: 12px/1.4 'Barlow Condensed', sans-serif;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}
.so-search:focus { border-color: rgba(var(--so-brand-rgb),0.4); }
.so-search::placeholder { color: var(--so-a25); }


/* ================================================================
   BADGES
   ================================================================ */

.so-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    color: var(--so-text-max);
    border-radius: 8px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
}
.so-badge-purple { background: var(--so-purple); }
.so-badge-blue   { background: var(--so-info); }
.so-badge-yellow { background: var(--so-gold); }
.so-badge-green  { background: var(--so-green); color: var(--so-text-on-green); }
.so-badge-red    { background: var(--so-red); }


/* ================================================================
   ICON BUTTONS
   ================================================================ */

.so-icon-btn {
    background: none;
    border: none;
    color: var(--so-a40);
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.12s, color 0.12s;
    line-height: 1;
}
.so-icon-btn:hover { opacity: 1; }
.so-icon-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.so-icon-btn:disabled:hover { opacity: 0.25; }

/* Semantic hover colors */
.so-icon-revert:hover { color: var(--so-green); }
.so-icon-delete:hover { color: var(--so-red); }
.so-icon-edit:hover   { color: var(--so-gold); }
.so-icon-add:hover    { color: var(--so-green); }
.so-icon-copy:hover   { color: var(--so-info); }
.so-icon-search:hover { color: var(--so-info); }

/* Active state — icon shows its semantic color at full opacity by default */
.so-icon-active.so-icon-revert { color: var(--so-green); opacity: 1; }
.so-icon-active.so-icon-delete { color: var(--so-red); opacity: 1; }
.so-icon-active.so-icon-edit   { color: var(--so-gold); opacity: 1; }
.so-icon-active.so-icon-add    { color: var(--so-green); opacity: 1; }
.so-icon-active.so-icon-copy   { color: var(--so-info); opacity: 1; }
.so-icon-active.so-icon-search { color: var(--so-info); opacity: 1; }

/* Inline copy button — small clipboard icon next to IDs/codes */
.so-copy-btn {
    background: none;
    border: none;
    color: var(--so-a30);
    cursor: pointer;
    padding: 1px 3px;
    font-size: 11px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}
.so-copy-btn:hover { opacity: 1; color: var(--so-brand); }

/* Icon button group — inline row of action icons */
.so-icon-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}


/* ================================================================
   DATA TABLE
   ================================================================ */

.so-table-wrap {
    border: 1px solid var(--so-a06);
    border-radius: 4px;
    overflow: hidden;
}

.so-table {
    width: 100%;
    border-collapse: collapse;
    font: 12px/1.4 'Barlow Condensed', sans-serif;
}

.so-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--so-inset);
    padding: 10px 10px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(var(--so-brand-rgb),0.7);
    border-bottom: 2px solid rgba(var(--so-brand-rgb),0.25);
    white-space: nowrap;
}

.so-table tbody td {
    padding: 6px 10px;
    color: var(--so-a70);
    border-bottom: 1px solid var(--so-a03);
    white-space: nowrap;
}

.so-table tbody tr:hover {
    background: var(--so-a03);
}
.so-table a {
    color: var(--so-brand);
    text-decoration: none;
}
.so-table a:hover {
    color: var(--so-brand-hover);
}
.so-teleport-copy {
    color: var(--so-a25);
    text-decoration: none;
    vertical-align: middle;
    margin-left: 4px;
    transition: color 0.15s;
    cursor: pointer;
}
.so-teleport-copy:hover {
    color: var(--so-brand);
}

.so-col-center { text-align: center; }
.so-col-right  { text-align: right; }

.so-rank-cell {
    color: var(--so-a25);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    width: 30px;
}

.so-name-cell {
    font-weight: 700;
    font-size: 13px;
    color: var(--so-text-max);
}

.so-code-cell {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--so-a30);
}

.so-mono-cell {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
}


/* ================================================================
   NAV PANEL
   ================================================================ */

.so-nav-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(var(--so-void-rgb),0.4);
    border-right: 1px solid var(--so-a06);
}

.so-nav-list { padding: 6px 0; flex: 1; min-height: 0; overflow-y: auto; }

/* Category header — section divider in nav tree */
.so-nav-category {
    padding: 8px 14px 4px;
    font: 700 9px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--so-a30);
    user-select: none;
}
.so-nav-category:not(:first-child) {
    margin-top: 6px;
    border-top: 1px solid var(--so-a04);
    padding-top: 10px;
}

/* Nav item — clickable row */
.so-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 22px;
    font: 500 12px/1.2 'Barlow Condensed', sans-serif;
    color: var(--so-a55);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    user-select: none;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.so-nav-item:hover {
    background: var(--so-a04);
    color: var(--so-a80);
}
.so-nav-item.active {
    background: rgba(var(--so-brand-rgb),0.12);
    color: var(--so-brand);
    font-weight: 700;
    border-left-color: var(--so-brand);
}

/* Nav icon — leading icon in nav item */
.so-nav-icon {
    flex-shrink: 0;
    font-size: 11px;
    width: 16px;
    text-align: center;
}

/* Nav badge — count pill on right side */
.so-nav-badge {
    margin-left: auto;
    font: 700 9px/1 'Share Tech Mono', monospace;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.so-nav-badge-default  { color: var(--so-text-max); background: var(--so-purple); }
.so-nav-badge-health   { color: var(--so-green); background: rgba(var(--so-green-rgb),0.1); }
.so-nav-badge-combat   { color: var(--so-red); background: rgba(var(--so-red-rgb),0.1); }
.so-nav-badge-economy  { color: var(--so-gold); background: rgba(var(--so-gold-rgb),0.1); }
.so-nav-badge-security { color: var(--so-red-vivid); background: rgba(var(--so-red-vivid-rgb),0.1); }
.so-nav-badge-info     { color: var(--so-info-light); background: rgba(var(--so-info-light-rgb),0.1); }

/* ── Standard expand/collapse chevron — use this everywhere ─────── */
/* Character: &#9656; (▶). Add class .open or .expanded to rotate 90°. */
.so-chevron,
.so-nav-expand,
.so-acc-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    width: 18px;
    height: 18px;
    text-align: center;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--so-brand);
    cursor: pointer;
    transition: transform 0.15s;
    padding: 0;
}
.so-chevron:hover,
.so-nav-expand:hover,
.so-acc-chevron:hover { filter: brightness(1.3); }
.so-chevron.open,
.so-chevron.expanded { transform: rotate(90deg); }
.so-nav-group.expanded > .so-nav-item .so-nav-expand,
.so-nav-group.expanded > .so-nav-item .so-grid-chevron {
    transform: rotate(90deg);
}

/* Nav sub-items (hidden by default) */
.so-nav-children { display: none; }
.so-nav-group.expanded > .so-nav-children { display: block; }

/* Nav sub-item — indented, smaller */
.so-nav-sub {
    padding-left: 38px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: var(--so-a40);
}
.so-nav-sub:hover { color: var(--so-a70); }
.so-nav-sub.active { color: var(--so-brand); border-left-color: var(--so-brand); }


/* ================================================================
   ACCORDION
   ================================================================ */

.so-acc-list {
    border: 1px solid var(--so-a06);
    border-radius: 4px;
    overflow: hidden;
}

.so-acc-row {
    border-bottom: 1px solid var(--so-a03);
    border-left: 3px solid transparent;
    transition: border-color 0.15s;
}
.so-acc-row:last-child { border-bottom: none; }
.so-acc-row.so-dirty    { border-left-color: var(--so-yellow); }
.so-acc-row.so-committed { border-left-color: var(--so-info); }
.so-acc-row.so-custom   { border-left-color: var(--so-green); }
.so-acc-row.so-deleted  { border-left-color: var(--so-red); }

.so-acc-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    min-height: 32px;
    transition: background 0.1s;
}
.so-acc-summary:hover { background: var(--so-a02); }

/* .so-acc-chevron — now inherits from .so-chevron standard above */
.so-acc-row.expanded .so-acc-chevron { transform: rotate(90deg); }

.so-acc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--so-text-max);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

.so-acc-code {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--so-a40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.so-acc-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.so-acc-detail {
    padding: 6px 12px 10px 32px;
    background: var(--so-a015);
    border-top: 1px solid var(--so-a03);
    display: none;
}
.so-acc-row.expanded .so-acc-detail { display: block; }

.so-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
}

/* Vertical form stack — modal forms, settings panels */
.so-form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.so-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Side-by-side field row */
.so-detail-row {
    display: flex;
    gap: 16px;
}
.so-detail-row .so-detail-field { flex: 1; }

/* Span 2 columns in a detail grid */
.so-span2 { grid-column: span 2; }

/* Category divider — used when showing all items grouped */
.so-acc-divider {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--so-a50);
    padding: 8px 12px 4px;
    border-top: 1px solid var(--so-a06);
    margin-top: 4px;
}
.so-acc-divider:first-child { border-top: none; margin-top: 0; }

/* Add item bar */
.so-add-bar {
    padding: 8px 12px;
    border-top: 1px solid var(--so-a04);
}
.so-add-btn {
    display: block;
    width: 100%;
    padding: 6px;
    font: 600 11px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--so-green);
    background: none;
    border: 1px dashed rgba(var(--so-green-rgb),0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.so-add-btn:hover {
    background: rgba(var(--so-green-rgb),0.06);
    border-color: rgba(var(--so-green-rgb),0.5);
}


/* ================================================================
   EMPTY STATE
   ================================================================ */

.so-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--so-text-flat);
    gap: 6px;
}
.so-empty-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.so-empty-text {
    font-size: 12px;
    max-width: 280px;
    text-align: center;
    line-height: 1.5;
}


/* ================================================================
   LOADING
   ================================================================ */

.so-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--so-a40);
    font: 12px/1 'Barlow Condensed', sans-serif;
}

.so-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--so-a12);
    border-top-color: var(--so-brand);
    border-radius: 50%;
    animation: so-spin 0.7s linear infinite;
}
@keyframes so-spin { to { transform: rotate(360deg); } }


/* ================================================================
   TOAST
   ================================================================ */

.so-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--so-text-max);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    opacity: 1;
    transition: opacity 0.3s ease;
}
.so-toast.so-toast-fade { opacity: 0; }
.so-toast-success { background: rgba(var(--so-green-rgb),0.9); }
.so-toast-error   { background: rgba(var(--so-red-rgb),0.9); }


/* ================================================================
   DATE RANGE PICKER (mini calendar popup)
   ================================================================ */
.so-date-picker-wrap { position: relative; display: inline-block; }
.so-date-picker-btn { background: none; border: 1px solid var(--so-a15); border-radius: 4px; color: var(--so-a50); cursor: pointer; padding: 4px 10px; font-size: 12px; font-family: 'Barlow Condensed', sans-serif; transition: border-color 0.15s, color 0.15s; display: flex; align-items: center; gap: 6px; }
.so-date-picker-btn:hover { border-color: var(--so-a30); color: var(--so-a70); }
.so-date-picker-btn.active { border-color: var(--scum-orange); color: var(--scum-orange); }
.so-date-picker-label { font-size: 11px; }
.so-date-picker-popup { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--so-raised); border: 1px solid var(--so-a15); border-radius: 6px; padding: 12px; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: none; width: 240px; }
.so-date-picker-popup.open { display: block; }
.so-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.so-dp-title { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--so-a70); }
.so-dp-nav { background: none; border: none; color: var(--so-a35); cursor: pointer; font-size: 12px; padding: 2px 6px; transition: color 0.15s; }
.so-dp-nav:hover { color: var(--so-a70); }
.so-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.so-dp-dow { font-size: 9px; color: var(--so-a30); padding: 2px 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 1px; }
.so-dp-day { font-size: 11px; padding: 4px 0; cursor: pointer; border-radius: 3px; font-family: 'Share Tech Mono', monospace; color: var(--so-a50); transition: background 0.15s; }
.so-dp-day:hover { background: var(--so-a06); }
.so-dp-day.today { color: var(--scum-orange); font-weight: 700; }
.so-dp-day.range-start, .so-dp-day.range-end { background: var(--scum-orange); color: var(--so-void); font-weight: 700; border-radius: 3px; }
.so-dp-day.in-range { background: rgba(240,102,9,0.15); color: var(--so-a70); }
.so-dp-day.disabled { color: var(--so-a15); pointer-events: none; }
.so-dp-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--so-a10); }
.so-dp-clear { background: none; border: none; color: var(--so-a40); cursor: pointer; font-size: 11px; font-family: 'Barlow Condensed', sans-serif; }
.so-dp-clear:hover { color: var(--scum-orange); }
.so-dp-range-label { font-size: 10px; color: var(--so-a40); font-family: 'Share Tech Mono', monospace; }


/* ================================================================
   3-PANEL LAYOUT
   ================================================================ */

.so-panels {
    display: flex;
    overflow: hidden;
}

.so-panel-nav {
    width: 260px;
    min-width: 260px;
    background: var(--so-surface);
    border-right: 1px solid var(--so-a06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.so-panel-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.so-panel-help {
    width: 260px;
    min-width: 260px;
    background: var(--so-surface);
    border-left: 1px solid var(--so-a06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Help panel content */
.so-help-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--so-a06);
    flex-shrink: 0;
}
.so-help-icon { font-size: 14px; color: var(--so-a30); }
.so-help-title {
    font: 700 11px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--so-a50);
}
.so-help-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.so-help-section { margin-bottom: 16px; }
.so-help-section-title {
    font: 700 10px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--so-brand);
    margin-bottom: 6px;
}
.so-help-text {
    font-size: 11px;
    color: var(--so-a50);
    line-height: 1.5;
}
.so-help-text strong { color: var(--so-a70); }

/* Help panel — section label (orange divider) */
.so-help-section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(var(--so-brand-rgb),0.6);
    margin: 16px 0 6px;
}

/* Help panel — key-value detail rows */
.so-help-detail {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 11px;
    border-bottom: 1px solid var(--so-a03);
}
.so-help-detail-label {
    color: var(--so-a55);
}
.so-help-detail-value {
    font-family: 'Share Tech Mono', monospace;
    color: var(--so-a60);
}
.so-help-detail-value.changed {
    color: var(--so-brand);
}

/* Help panel — compact item/tag list */
.so-help-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.so-help-item {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--so-a55);
    padding: 2px 0;
    border-bottom: 1px solid var(--so-a04);
}

/* Help panel — numbered tips */
.so-help-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.so-help-tip {
    /* NOT flex — inline <b>/<code>/<a> tags inside the tip body would each
       become their own flex item, stacking sideways into narrow columns
       and mangling the text. Position the number circle absolutely and
       indent the body via padding so inline content flows as normal text. */
    position: relative;
    padding-left: 30px;
    min-height: 20px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--so-a35);
}
.so-help-tip strong { color: var(--so-a55); font-weight: 500; }
.so-help-tip-num {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--so-brand-rgb),0.15);
    color: var(--so-brand);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
}

/* Help panel — inline semantic text colors */
.so-help-accent { color: var(--so-brand); font-weight: 500; }
.so-help-warn   { color: var(--so-amber); }
.so-help-danger  { color: var(--so-red-vivid); }
.so-help-green   { color: var(--so-green); }


/* ================================================================
   COLUMN HEADERS
   ================================================================ */

.so-col-headers {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 0 10px 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--so-brand);
    border-bottom: 1px solid rgba(var(--so-brand-rgb),0.15);
    margin-bottom: 8px;
}


/* ================================================================
   TOGGLE SWITCH
   ================================================================ */

.so-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.so-toggle {
    position: relative;
    width: 36px;
    height: 18px;
    background: var(--so-a08);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.so-toggle.on { background: rgba(var(--so-brand-rgb),0.5); }

.so-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--so-text);
    border-radius: 50%;
    transition: transform 0.2s;
}
.so-toggle.on .so-toggle-knob {
    transform: translateX(18px);
    background: var(--so-brand);
}

.so-toggle-label {
    font-size: 11px;
    color: var(--so-a50);
}

/* Form-compatible toggle — wraps a real <input type="checkbox">.
   Usage: <label class="so-toggle-input"><input type="checkbox" /><span class="so-toggle-track"><span class="so-toggle-knob"></span></span></label>
   For labeled rows: <label class="so-toggle-row"><input type="checkbox" /><span class="so-toggle-track"><span class="so-toggle-knob"></span></span><span>Label text</span></label> */
.so-toggle-input { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.so-toggle-input input,
.so-toggle-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.so-toggle-track {
    width: 32px;
    height: 16px;
    background: var(--so-a10);
    border-radius: 8px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.so-toggle-track .so-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--so-a40);
    border-radius: 50%;
    transition: all 0.2s;
}
input:checked + .so-toggle-track { background: rgba(var(--so-brand-rgb),0.5); }
input:checked + .so-toggle-track .so-toggle-knob { left: 18px; background: var(--so-brand); }


/* ================================================================
   HEAT SLIDER
   ================================================================ */

.so-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Heat slider — static green→yellow→red gradient track communicates the
   "cold to hot" scale across the whole axis. The brand-orange thumb marks
   the current position. Lets admins read meaning from the bar at a glance
   without needing to check the numeric readout. */
input[type="range"].so-heat-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%;
    height: 6px;
    border: none;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        var(--so-green) 0%,
        #f0c040 50%,
        var(--so-red) 100%
    ) !important;
    padding: 0;
    margin: 0;
}
input[type="range"].so-heat-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}
input[type="range"].so-heat-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--so-brand);
    border: 2px solid var(--so-void);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
    margin-top: -4px;
    transition: transform 0.1s;
}
input[type="range"].so-heat-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}
input[type="range"].so-heat-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--so-brand);
    border: 2px solid var(--so-void);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
}
input[type="range"].so-heat-slider::-moz-range-track {
    background: transparent;
    border-radius: 3px;
    height: 6px;
}


/* ================================================================
   STEP SLIDER
   ================================================================ */

.so-step-control {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 320px;
}

.so-step-slider {
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
    position: relative;
}

.so-step-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    display: flex;
    overflow: hidden;
}

.so-step-segment { flex: 1; height: 100%; }

.so-step-thumb {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--so-text-max);
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 1px 3px rgba(var(--so-black-rgb),0.4);
    z-index: 2;
}
.so-step-thumb:active { cursor: grabbing; }

.so-step-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    width: 95px;
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
}

.so-step-default-tick {
    position: absolute;
    bottom: -8px;
    transform: translateX(-50%);
    font-size: 7px;
    line-height: 1;
    color: var(--so-a30);
    z-index: 1;
    pointer-events: none;
}

/* Clickable stop hit areas */
.so-step-stops {
    position: absolute;
    top: -4px; left: 0; right: 0; bottom: -4px;
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}

.so-step-stop {
    width: 14px;
    height: 14px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 0;
    transition: transform 0.15s;
}
.so-step-stop:hover { transform: scale(1.6); background: var(--so-a15); }


/* ================================================================
   POPUP MENU (floating option list — NOT the native-select replacement)
   Renamed from .so-dropdown* to avoid colliding with the
   select-replacement system (soDropdown.js). Use .so-menu* for
   absolutely-positioned floating menus (e.g. context actions).
   ================================================================ */

.so-menu {
    position: absolute;
    z-index: 50;
    background: var(--so-raised);
    border: 1px solid var(--so-a12);
    border-radius: 4px;
    min-width: 140px;
    box-shadow: 0 4px 12px rgba(var(--so-black-rgb),0.4);
    padding: 4px 0;
}

.so-menu-option {
    padding: 6px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    color: var(--so-a60);
    cursor: pointer;
    transition: all 0.1s;
}
.so-menu-option:hover {
    background: rgba(var(--so-brand-rgb),0.12);
    color: var(--so-brand);
}

.so-menu-cancel {
    padding: 6px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--so-a30);
    cursor: pointer;
    border-top: 1px solid var(--so-a06);
    margin-top: 4px;
    transition: color 0.1s;
}
.so-menu-cancel:hover { color: var(--so-a60); }


/* ================================================================
   PREVIEW / VALIDATION
   ================================================================ */

.so-preview {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: var(--so-a30);
    padding: 6px 10px;
    background: rgba(var(--so-black-rgb),0.2);
    border: 1px solid var(--so-a05);
    border-radius: 3px;
    min-height: 32px;
    line-height: 20px;
}
.so-preview.is-valid {
    color: var(--so-green);
    border-color: rgba(var(--so-green-rgb),0.2);
}
.so-preview.is-invalid {
    color: var(--so-red-vivid);
    border-color: rgba(var(--so-red-vivid-rgb),0.2);
}


/* ================================================================
   2-PANEL LAYOUT
   ================================================================ */

.so-panels-2 {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr clamp(240px, 28%, 340px);
    overflow: hidden;
}

.so-panel-list {
    overflow-y: auto;
    padding: 16px;
}

/* Help panel inside 2-panel fills its grid cell */
.so-panels-2 > .so-panel-help {
    width: auto;
    min-width: 0;
    padding: 20px 18px;
    overflow-y: auto;
}


/* ================================================================
   PAGE ROOT
   ================================================================ */

.so-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--so-void);
    color: var(--so-text);
}


/* ================================================================
   STATUS TEXT
   ================================================================ */

.so-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--so-a50);
}
.so-status:empty { display: none; }


/* ================================================================
   GRID ROW
   ================================================================ */

.so-grid-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-left: 3px solid transparent;
    border-radius: 2px;
    transition: background 0.15s, border-color 0.15s;
}
.so-grid-row:hover {
    background: rgba(var(--so-brand-rgb),0.08);
}

/* Grid row states */
.so-grid-row.so-new       { border-left-color: var(--so-green); }
.so-grid-row.so-committed { border-left-color: var(--so-blue); }
.so-grid-row.so-dirty     { border-left-color: var(--so-yellow); }
.so-grid-row.so-deleted {
    border-left-color: var(--so-red-vivid);
    opacity: 0.45;
}
.so-grid-row.so-pinned {
    background: rgba(var(--so-brand-rgb),0.08);
    border-left-color: var(--so-brand);
}
.so-grid-row.so-deleted .so-grid-name,
.so-grid-row.so-deleted .so-grid-mono {
    text-decoration: line-through;
}

/* Grid row cells */
/* .so-grid-chevron — inherits .so-chevron standard; kept for backwards compatibility */
.so-grid-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: var(--so-brand);
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
    padding: 0;
}
.so-grid-chevron:hover { filter: brightness(1.3); }
.so-grid-chevron.open { transform: rotate(90deg); }

.so-grid-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--so-a70);
}
.so-grid-name .so-badge {
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Status dots — compact colored indicators ─────────────────── */
.so-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}
.so-dot-green  { background: var(--so-teal); }
.so-dot-yellow { background: var(--so-gold); }
.so-dot-red    { background: var(--so-danger); }
.so-dot-blue   { background: var(--so-info); }
.so-dot-purple { background: var(--so-purple, #9b59b6); }

/* Status legend for help panels */
.so-help-legend { margin-top: 8px; }
.so-help-legend-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--so-a50);
    padding: 3px 0;
}

.so-grid-mono {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--so-a60);
    text-align: right;
    white-space: nowrap;
}


/* ================================================================
   CATEGORY SECTION
   ================================================================ */

.so-category {
    margin-bottom: 16px;
}

.so-category-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(var(--so-brand-rgb),0.8);
    padding: 8px 10px 6px;
    background: rgba(var(--so-brand-rgb),0.04);
    border-bottom: 1px solid rgba(var(--so-brand-rgb),0.1);
    border-top: 1px solid rgba(var(--so-brand-rgb),0.1);
    margin-bottom: 2px;
}
.so-category:first-child .so-category-header {
    border-top: none;
}
.so-category-header.so-custom {
    border-left: 3px solid var(--so-green);
    padding-left: 13px;
}

.so-category-hint {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.3px;
    text-transform: none;
    color: var(--so-a45);
}


/* ================================================================
   INLINE EDITOR
   ================================================================ */

.so-inline-editor {
    display: none;
    padding: 12px 14px 14px;
    margin: 0 0 2px 3px;
    background: var(--so-a02);
    border-left: 3px solid var(--so-brand);
    border-radius: 0 0 4px 4px;
}
.so-inline-editor.open { display: block; }

.so-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    grid-column: 1 / -1;
}

.so-field-hint {
    font-size: 10px;
    color: var(--so-a20);
    line-height: 1.4;
    grid-column: 1 / -1;
    margin-top: -4px;
}


/* ================================================================
   ITEM COUNT / INLINE LIST
   ================================================================ */

.so-item-count {
    font-size: 11px;
    color: var(--so-a30);
}
.so-item-count strong {
    color: var(--so-brand);
    font-weight: 500;
}

.so-item-list-inline {
    margin-top: 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--so-a40);
    line-height: 1.5;
}


/* ================================================================
   ADD ROW / TRIGGER
   ================================================================ */

.so-add-row {
    position: relative;
    padding: 6px 0 6px 16px;
}

.so-add-trigger {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px dashed var(--so-a10);
    border-radius: 3px;
    background: transparent;
    color: var(--so-a30);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
}
.so-add-trigger:hover {
    border-color: rgba(var(--so-brand-rgb),0.4);
    color: var(--so-brand);
    background: rgba(var(--so-brand-rgb),0.04);
}


/* ================================================================
   NAV — ADDITIONAL CLASSES
   ================================================================ */

/* Nav name — flex text label with ellipsis */
.so-nav-name {
    font: 500 13px/1 'Barlow Condensed', sans-serif;
    color: var(--so-a75);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav leaf — deepest level item row */
.so-nav-leaf {
    padding-left: 56px;
    font-size: 13px;
}
.so-nav-leaf:hover { background: rgba(var(--so-brand-rgb),0.06); }
.so-nav-leaf.selected,
.so-nav-item.selected {
    background: rgba(var(--so-brand-rgb),0.1);
    border-left-color: var(--so-brand);
}
.so-nav-leaf.selected .so-nav-name,
.so-nav-item.selected .so-nav-name { color: var(--so-a95); }

/* Nav thumbnail — small item image */
.so-nav-thumb {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 2px;
}

/* Override status badges inline */
.so-ov-badges {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Toggle group — horizontal row of toggles */
.so-toggle-group {
    display: flex;
    gap: 16px;
    padding-top: 2px;
}

/* Chip list — inline tag list */
.so-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}


/* ================================================================
   DETAIL PANEL
   ================================================================ */

/* Detail header — item/entity card header */
.so-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--so-a06);
    flex-shrink: 0;
    background: var(--so-a02);
    flex-shrink: 0;
}

/* Detail image — square thumbnail */
.so-detail-img {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--so-a06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--so-a15);
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}
.so-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
img.so-detail-img { object-fit: contain; }

/* Detail title block */
.so-detail-title-block { flex: 1; min-width: 0; }
.so-detail-name {
    font: 600 18px/1.2 'Barlow Condensed', sans-serif;
    color: var(--so-a95);
}
.so-detail-id {
    font: 11px/1 'Share Tech Mono', monospace;
    color: var(--so-a30);
    margin-top: 4px;
}
.so-detail-subtitle {
    font: 12px/1 'Barlow Condensed', sans-serif;
    color: var(--so-a40);
    margin-top: 4px;
}
.so-detail-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Detail body — scrollable content area */
.so-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 20px;
}


/* ================================================================
   SECTIONS
   ================================================================ */

.so-section { margin-top: 20px; }

.so-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--so-a06);
}

.so-section-title {
    font: 600 12px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--so-a50);
}

.so-section-header .so-badge {
    margin-left: auto;
}

/* ================================================================
   TILE SECTION
   Large card wrapper used by App Setup pages to visually separate
   top-level configuration groups (e.g. Discord channel + cache pool
   on /Apps/DailyCache/Setup). Stacks vertically inside .so-panel-editor.
   Title is always SCUM orange so the eye finds the section at a glance.
   ================================================================ */
.so-tile-section {
    background: var(--so-surface);
    border: 1px solid var(--so-card-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.so-tile-section:last-child { margin-bottom: 0; }

.so-tile-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--so-a06);
}

.so-tile-section-title {
    font: 700 13px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--so-brand);
}

/* Right-side slot inside the header (badge, action button, status). */
.so-tile-section-header > .so-tile-section-actions,
.so-tile-section-header > .btn,
.so-tile-section-header > .so-badge {
    margin-left: auto;
}


/* ================================================================
   MODAL EXTENSIONS
   ================================================================ */

.so-modal-warn {
    color: var(--so-amber);
    font-size: 11px;
}

.so-modal-error {
    flex: 1;
    font-size: 11px;
    color: var(--so-red-vivid);
}

/* Critical modal header — destructive/irreversible actions.
   Red top accent bar + warning icon before title. */
.modal-header.so-modal-critical::before {
    background: var(--so-red);
}
.modal-header.so-modal-critical .modal-title::before {
    content: "\F33A";
    font-family: "bootstrap-icons";
    margin-right: 8px;
    font-size: 0.95rem;
    color: var(--so-red);
    vertical-align: -1px;
}


/* ================================================================
   BUTTONS
   ================================================================ */

/* Base: all btn-so-* variants share these properties.
   Ghost-tinted style: subtle colored background, matching border, colored text.
   Default size = md (toolbar / editor workhorse).
   Add btn-so-sm for inline row actions, btn-so-lg for modals / CTAs. */
.btn-so-primary,
.btn-so-secondary,
.btn-so-danger,
.btn-so-warning,
.btn-so-commit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.2;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    white-space: nowrap;
}

/* Primary — Save Draft (blue) */
.btn-so-primary {
    background: rgba(var(--so-blue-rgb),0.08);
    border-color: rgba(var(--so-blue-rgb),0.4);
    color: var(--so-blue);
}
.btn-so-primary:hover {
    background: rgba(var(--so-blue-rgb),0.18);
    border-color: var(--so-blue);
}

/* Secondary — Cancel / Back (white outlined) */
.btn-so-secondary {
    background: var(--so-a04);
    border-color: var(--so-a20);
    color: var(--so-a70);
}
.btn-so-secondary:hover {
    background: var(--so-a10);
    border-color: var(--so-a45);
    color: var(--so-text-max);
}

/* Warning — Pull from Server (gold) */
.btn-so-warning {
    background: rgba(var(--so-gold-rgb),0.08);
    border-color: rgba(var(--so-gold-rgb),0.4);
    color: var(--so-gold);
}
.btn-so-warning:hover {
    background: rgba(var(--so-gold-rgb),0.18);
    border-color: var(--so-gold);
}

/* Danger — Delete (red) */
.btn-so-danger {
    background: rgba(var(--so-red-rgb),0.08);
    border-color: rgba(var(--so-red-rgb),0.4);
    color: var(--so-red);
}
.btn-so-danger:hover {
    background: rgba(var(--so-red-rgb),0.18);
    border-color: var(--so-red);
}

/* Commit — Push to live server (orange) */
.btn-so-commit {
    background: rgba(var(--so-brand-rgb),0.08);
    border-color: rgba(var(--so-brand-rgb),0.4);
    color: var(--so-brand);
}
.btn-so-commit:hover {
    background: rgba(var(--so-brand-rgb),0.18);
    border-color: var(--so-brand);
}

/* Disabled */
.btn-so-primary:disabled,
.btn-so-secondary:disabled,
.btn-so-warning:disabled,
.btn-so-danger:disabled,
.btn-so-commit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Light mode: buttons need stronger presence ── */
[data-theme="light"] .btn-so-primary {
    background: rgba(var(--so-blue-rgb),0.15);
    border-color: rgba(var(--so-blue-rgb),0.5);
}
[data-theme="light"] .btn-so-primary:hover {
    background: rgba(var(--so-blue-rgb),0.25);
    border-color: var(--so-blue);
}
[data-theme="light"] .btn-so-secondary {
    background: var(--so-surface);
    border-color: var(--so-card-border);
    color: #2d3748;
}
[data-theme="light"] .btn-so-secondary:hover {
    background: var(--so-card-header);
    border-color: #5a6577;
    color: #1a2130;
}
[data-theme="light"] .btn-so-warning {
    background: rgba(var(--so-gold-rgb),0.15);
    border-color: rgba(var(--so-gold-rgb),0.5);
}
[data-theme="light"] .btn-so-warning:hover {
    background: rgba(var(--so-gold-rgb),0.25);
    border-color: var(--so-gold);
}
[data-theme="light"] .btn-so-danger {
    background: rgba(var(--so-red-rgb),0.15);
    border-color: rgba(var(--so-red-rgb),0.5);
}
[data-theme="light"] .btn-so-danger:hover {
    background: rgba(var(--so-red-rgb),0.25);
    border-color: var(--so-red);
}
[data-theme="light"] .btn-so-commit {
    background: rgba(var(--so-brand-rgb),0.15);
    border-color: rgba(var(--so-brand-rgb),0.5);
}
[data-theme="light"] .btn-so-commit:hover {
    background: rgba(var(--so-brand-rgb),0.25);
    border-color: var(--so-brand);
}

/* Small — inline row actions */
.btn.btn-so-sm {
    height: auto;
    font-size: 10px;
    padding: 3px 10px;
    gap: 4px;
}

/* Large — modals, landing page CTAs */
.btn.btn-so-lg {
    height: auto;
    font-size: 13px;
    padding: 8px 16px;
}

/* Busy state — operation in progress */
[data-sas-busy] .btn-so-primary,
[data-sas-busy] .btn-so-secondary,
[data-sas-busy] .btn-so-warning,
[data-sas-busy] .btn-so-danger,
[data-sas-busy] .btn-so-commit {
    opacity: 0.38;
    pointer-events: none;
    cursor: not-allowed;
}


/* ================================================================
   TABS
   ================================================================ */

.so-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--so-a08);
    padding: 0 20px;
    align-items: center;
}
.so-tab {
    padding: 8px 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--so-a40);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.so-tab:hover { color: var(--so-a70); }
.so-tab.active {
    color: var(--so-brand);
    border-bottom-color: var(--so-brand);
}
/* Tab with inline count badge */
.so-tab-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--so-a25);
    background: var(--so-a06);
    padding: 1px 5px;
    border-radius: 3px;
    min-width: 16px;
    text-align: center;
}
.so-tab:hover .so-tab-count {
    color: var(--so-a50);
    background: var(--so-a10);
}
.so-tab.active .so-tab-count {
    color: rgba(var(--so-brand-rgb),0.7);
    background: rgba(var(--so-brand-rgb),0.1);
}

/* Subtab bar — secondary level, slightly smaller and darker */
.so-tab-bar.so-subtab-bar {
    background: rgba(var(--so-black-rgb),0.15);
    border-bottom: 2px solid var(--so-a06);
    padding: 0 8px;
}
.so-tab-bar.so-subtab-bar .so-tab {
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 7px 14px;
    color: var(--so-a35);
}
.so-tab-bar.so-subtab-bar .so-tab.active {
    color: rgba(var(--so-brand-rgb),0.9);
    border-bottom-color: rgba(var(--so-brand-rgb),0.6);
}

/* Right-aligned action button inside a tab bar */
.so-tab-bar .so-tab-action { margin-left: auto; }
.so-tab-bar .so-tab-action + .so-tab-action { margin-left: 4px; }


/* ================================================================
   TRI-STATE INDICATOR (Allow / Neutral / Deny)
   ================================================================ */

.so-tri-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.so-tri-state.allow {
    background: rgba(var(--so-green-rgb),0.2);
    color: var(--so-green);
    border: 1px solid rgba(var(--so-green-rgb),0.4);
}
.so-tri-state.neutral {
    background: var(--so-a06);
    color: var(--so-a30);
    border: 1px solid var(--so-a10);
}
.so-tri-state.deny {
    background: rgba(var(--so-red-rgb),0.2);
    color: var(--so-red);
    border: 1px solid rgba(var(--so-red-rgb),0.4);
}
.so-tri-state:hover { opacity: 0.85; transform: scale(1.1); }


/* ================================================================
   SELECTION BAR — context highlight when an item is selected
   ================================================================ */

.so-selection-bar {
    padding: 6px 20px;
    font-size: 11px;
    background: rgba(var(--so-brand-rgb),0.08);
    border-bottom: 1px solid rgba(var(--so-brand-rgb),0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.so-selection-bar .so-selection-name { color: var(--so-brand); font-weight: 600; }
.so-selection-bar .so-icon-btn { margin-left: auto; }


/* ================================================================
   DRAG & DROP
   ================================================================ */

.so-drag-handle {
    color: var(--so-a20);
    font-size: 10px;
    cursor: grab;
    flex-shrink: 0;
}
.so-draggable { transition: opacity 0.15s; }
.so-draggable.so-dragging { opacity: 0.3; }

.so-drop-zone { min-height: 28px; }
.so-drop-indicator {
    height: 2px;
    background: var(--so-brand);
    border-radius: 1px;
    margin: 0 4px;
    position: relative;
    pointer-events: none;
}
.so-drop-indicator::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    background: var(--so-brand);
    border-radius: 50%;
}
.so-drop-empty {
    padding: 8px 12px;
    font-size: 10px;
    color: var(--so-a15);
    text-align: center;
    font-style: italic;
}


/* ================================================================
   MATRIX TABLE — permission / access grids
   ================================================================ */

.so-matrix-wrap {
    overflow: auto;
    height: 100%;
}
.so-matrix {
    border-collapse: collapse;
    font-size: 10px;
}
.so-matrix th,
.so-matrix td {
    padding: 3px 4px;
    text-align: center;
    border: 1px solid var(--so-a05);
}
.so-matrix th {
    position: sticky;
    top: 0;
    background: var(--so-void);
    z-index: 2;
    font-weight: 600;
    color: var(--so-a50);
    padding: 6px 4px;
    min-width: 36px;
    max-width: 60px;
    vertical-align: bottom;
}
.so-matrix-th-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56px;
    cursor: default;
}
.so-matrix-th-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.so-matrix td.so-matrix-label {
    text-align: left;
    white-space: nowrap;
    font-size: 11px;
    color: var(--so-a60);
    position: sticky;
    left: 0;
    background: var(--so-void);
    z-index: 1;
    padding: 4px 8px;
    min-width: 140px;
}
.so-matrix td.so-matrix-group {
    text-align: left;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--so-a35);
    background: var(--so-a02);
    padding: 6px 8px;
    position: sticky;
    left: 0;
}
.so-matrix-cell {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}
.so-matrix-cell.allow { background: rgba(var(--so-green-rgb),0.25); color: var(--so-green); }
.so-matrix-cell.neutral { background: var(--so-a04); color: var(--so-a20); }
.so-matrix-cell.deny { background: rgba(var(--so-red-rgb),0.25); color: var(--so-red); }
.so-matrix-cell:hover { opacity: 0.7; }


/* ================================================================
   SORTABLE TABLE HEADERS
   ================================================================ */

.so-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.so-sortable:hover { color: var(--so-a80); }
.so-sort-indicator {
    display: inline-block;
    margin-left: 4px;
    font-size: 8px;
    opacity: 0.3;
    transition: opacity 0.15s, transform 0.15s;
}
.so-sortable.so-sort-active .so-sort-indicator { opacity: 1; color: var(--so-brand); }
.so-sortable.so-sort-desc .so-sort-indicator { transform: rotate(180deg); }


/* ================================================================
   CHROME BADGE — toolbar status pills (PageChrome right slot)
   ================================================================ */

.so-chrome-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
    background: var(--so-a08);
    border: 1px solid var(--so-a12);
    color: var(--so-a70);
}
[data-theme="light"] .so-chrome-badge {
    background: #2a4a52;
    border-color: #2a4a52;
    color: #e8f0f0;
}


/* ================================================================
   COLUMN FILTER — dropdown filter inside table headers
   ================================================================ */

.so-col-filter-wrap {
    position: relative;
    display: inline-block;
}
.so-col-filter-btn {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.so-col-filter-btn i {
    font-size: 9px;
    margin-left: 3px;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.so-col-filter-btn:hover i { opacity: 0.8; }
.so-col-filter-btn.so-col-filter-active { color: var(--so-brand); }
.so-col-filter-btn.so-col-filter-active i { opacity: 1; color: var(--so-brand); }

.so-col-filter-dropdown {
    display: none;
    position: fixed;
    z-index: 100;
    background: var(--so-raised);
    border: 1px solid var(--so-a10);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(var(--so-black-rgb), 0.25);
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.so-col-filter-dropdown.open { display: block; }

.so-col-filter-item {
    padding: 5px 12px;
    font: 500 11px/1.3 'Barlow Condensed', sans-serif;
    color: var(--so-a70);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.so-col-filter-item:hover {
    background: rgba(var(--so-brand-rgb), 0.1);
    color: var(--so-brand);
}
.so-col-filter-item.active {
    color: var(--so-brand);
    font-weight: 700;
}
.so-col-filter-count {
    font: 10px/1 'Share Tech Mono', monospace;
    color: var(--so-a30);
}

[data-theme="light"] .so-col-filter-dropdown {
    background: var(--so-void);
}
[data-theme="light"] .so-col-filter-item {
    color: var(--so-text-body);
}
[data-theme="light"] .so-col-filter-item:hover {
    color: var(--so-brand);
}


/* ================================================================
   KPI STRIP — compact stat tiles (Dashboard, Situation Room, etc.)
   ================================================================ */

.so-kpi-strip {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--so-a06);
    background: rgba(var(--so-void-rgb),0.3);
}
.so-kpi-tile {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 3px;
    background: var(--so-a04);
    border: 1px solid var(--so-a06);
}
.so-kpi-val {
    font: 700 13px/1 'Share Tech Mono', monospace;
    color: var(--so-a85);
}
.so-kpi-lbl {
    font: 600 9px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--so-a35);
}
.so-kpi-highlight .so-kpi-val { color: var(--so-green); }
.so-kpi-danger .so-kpi-val { color: var(--so-red-vivid); }
.so-kpi-danger { border-color: rgba(var(--so-red-vivid-rgb),0.3); }
.so-kpi-sep {
    width: 1px;
    align-self: stretch;
    background: var(--so-a10);
    margin: 0 4px;
}

/* (old teal KPI overrides removed — now using --so-kpi-bg Steel Blue palette below) */


/* ================================================================
   FEED — activity feed items (Situation Room, Player Dossier)
   ================================================================ */

.so-feed { max-height: 520px; overflow-y: auto; }
.so-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--so-a04);
}
.so-feed-item:last-child { border-bottom: none; }
.so-feed-icon { flex-shrink: 0; font-size: 0.85rem; line-height: 1.5; }
.so-feed-body { flex: 1; min-width: 0; }
.so-feed-desc { font-size: 0.82rem; color: var(--so-a80); }
.so-feed-detail { display: inline; font-size: 0.72rem; color: var(--so-a35); margin-left: 6px; }
.so-feed-time { flex-shrink: 0; font-size: 0.68rem; color: var(--so-a30); font-family: 'Share Tech Mono', monospace; }

[data-theme="light"] .so-feed-desc { color: var(--so-text-body); }
[data-theme="light"] .so-feed-detail { color: var(--so-text-mid); }
[data-theme="light"] .so-feed-time { color: var(--so-text-mid); }


/* ================================================================
   TREND INDICATORS
   ================================================================ */

.so-trend { font-size: 9px; margin-left: 2px; }
.so-trend-up { color: var(--so-green); }
.so-trend-down { color: var(--so-red); }
.so-trend-flat { color: var(--so-a30); }


/* ================================================================
   TIMESTAMP
   ================================================================ */

.so-timestamp {
    font: 10px/1 'Barlow Condensed', sans-serif;
    color: var(--so-a20);
    padding: 6px 16px;
}
[data-theme="light"] .so-timestamp { color: var(--so-text-body); }


/* ================================================================
   PLAYER PICKER (typeahead dropdown for Add Player/Admin modals)
   ================================================================ */

.so-player-picker { position: relative; }

.so-picker-wrap { position: relative; }

.so-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--so-raised);
    border: 1px solid var(--so-a10);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 20px rgba(var(--so-black-rgb), 0.3);
    max-height: 220px;
    overflow-y: auto;
}
.so-picker-dropdown.open { display: block; }

.so-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.1s;
}
.so-picker-item:hover { background: rgba(var(--so-brand-rgb), 0.1); }

.so-picker-item-name {
    font: 500 12px/1.2 'Barlow Condensed', sans-serif;
    color: var(--so-a80);
}
.so-picker-item:hover .so-picker-item-name { color: var(--so-brand); }

.so-picker-item-steam {
    font: 10px/1 'Share Tech Mono', monospace;
    color: var(--so-a30);
}

.so-picker-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(var(--so-brand-rgb), 0.08);
    border: 1px solid rgba(var(--so-brand-rgb), 0.2);
    border-radius: 4px;
}

.so-picker-name {
    font: 600 13px/1 'Barlow Condensed', sans-serif;
    color: var(--so-a95);
}

.so-picker-steam {
    font: 11px/1 'Share Tech Mono', monospace;
    color: var(--so-a50);
    margin-left: auto;
}


/* ================================================================
   LIGHT MODE
   ================================================================
   Override all dark-mode variables. Activated via
   <html data-theme="light">  (toggled by header dropdown).
   ================================================================ */

[data-theme="light"] {
  /* ── Surfaces — Steel Blue palette (Option A) ── */
  --so-void:          #dfe3ea;
  --so-void-rgb:      223, 227, 234;
  --so-surface:       #eef0f4;
  --so-surface-dim:   #c0c8d2;
  --so-raised:        #eef0f4;
  --so-inset:         #c0c8d2;
  --so-well:          #eef0f4;
  --so-toolbar:       #eef0f4;
  --so-track:         #c0c8d2;
  --so-card-header:   #a8b4c2;
  --so-card-border:   #c0c8d2;
  --so-kpi-bg:        var(--so-surface);
  --so-kpi-border:    var(--so-card-border);

  /* ── Brand — punchy on light ── */
  --so-brand:         #d85a00;
  --so-brand-rgb:     216, 90, 0;
  --so-brand-hover:   #c14f07;
  --so-accent:        #e06800;
  --so-accent-rgb:    224, 104, 0;

  /* ── Semantic — strong for light-bg readability ── */
  --so-green:         #16a34a;
  --so-green-rgb:     22, 163, 74;
  --so-green-bright:  #059669;
  --so-green-bright-rgb: 5, 150, 105;
  --so-red:           #b91c1c;
  --so-red-rgb:       185, 28, 28;
  --so-red-vivid:     #dc2626;
  --so-red-vivid-rgb: 220, 38, 38;
  --so-gold:          #92700c;
  --so-gold-rgb:      146, 112, 12;
  --so-amber:         #b45309;
  --so-blue:          #2563eb;
  --so-blue-rgb:      37, 99, 235;
  --so-blue-bright-rgb: 37, 99, 235;
  --so-info:          #1d4ed8;
  --so-info-rgb:      29, 78, 216;
  --so-info-light:    #3b82f6;
  --so-info-light-rgb: 59, 130, 246;
  --so-purple:        #7c3aed;
  --so-yellow:        #a16207;
  --so-teal:          #0d9488;
  --so-teal-rgb:      13, 148, 136;

  /* ── Text — warm brown tones (matches header #2c2018) ── */
  --so-text:          #3d2e1e;
  --so-text-max:      #1f1610;
  --so-text-heading:  #2c2018;
  --so-text-body:     #4a3828;
  --so-text-light:    #4a3828;
  --so-text-mid:      #6b5640;
  --so-text-flat:     #a89880;
  --so-text-icon:     #6b5640;
  --so-text-on-green: #fff;

  /* ── Alpha scale — solid warm browns, NOT transparent ──
     Text values (a35+) use near-opaque brown so they always read brown.
     Background/border values (a20 and below) stay transparent for tinting. ── */
  --so-a95:  #1f1610;
  --so-a92:  #1f1610;
  --so-a90:  #1f1610;
  --so-a85:  #2c2018;
  --so-a80:  #2c2018;
  --so-a75:  #3d2e1e;
  --so-a70:  #3d2e1e;
  --so-a65:  #4a3828;
  --so-a60:  #4a3828;
  --so-a55:  #4a3828;
  --so-a50:  #4a3828;
  --so-a45:  #4a3828;
  --so-a40:  #4a3828;
  --so-a35:  #4a3828;
  --so-a30:  #4a3828;
  --so-a25:  rgba(44,32,20,0.50);
  --so-a22:  rgba(44,32,20,0.22);
  --so-a20:  rgba(44,32,20,0.20);
  --so-a18:  rgba(44,32,20,0.18);
  --so-a15:  rgba(44,32,20,0.15);
  --so-a14:  rgba(44,32,20,0.14);
  --so-a12:  rgba(44,32,20,0.12);
  --so-a10:  rgba(44,32,20,0.12);
  --so-a08:  rgba(44,32,20,0.10);
  --so-a06:  rgba(44,32,20,0.08);
  --so-a05:  rgba(44,32,20,0.06);
  --so-a04:  rgba(44,32,20,0.05);
  --so-a03:  rgba(44,32,20,0.04);
  --so-a02:  rgba(44,32,20,0.03);
  --so-a015: rgba(44,32,20,0.02);

  /* ── Shadow — visible depth on light ── */
  --so-black-rgb:     0, 0, 0;
  --so-shadow:        rgba(0,0,0,0.15);

}

/* ── Light mode: body + app shell + sidebar — direct overrides ──
   Corrects vendor interference: Bootstrap's own theming system (--bs-*
   vars, prefers-color-scheme media queries) fights our cascade.
   !important here is specifically to win against that, as allowed by the
   "correcting vendor interference" exception in the CSS canon contract. */
[data-theme="light"] body {
    background-color: var(--so-void) !important;
    color: var(--so-text-body) !important;
}
[data-theme="light"] .app-header {
    background-color: #2c2018;
}
[data-theme="light"] .app-footer {
    background-color: var(--so-surface);
    border-top-color: var(--so-card-border);
}
[data-theme="light"] .app-content-inner,
[data-theme="light"] .app-content,
[data-theme="light"] .app-body,
[data-theme="light"] .app-shell {
    background-color: var(--so-void);
    color: var(--so-text-body);
}

/* Sidebar wrapper chain — aside.sidebar + inner div + nav.so-sidebar.
   Force all three light so no dark wrapper shows through. */
[data-theme="light"] aside.sidebar,
[data-theme="light"] .sidebar-inner,
[data-theme="light"] nav.so-sidebar {
    background: var(--so-surface) !important;
    color: var(--so-text-body) !important;
}

/* Sidebar link text — overrides Bootstrap's .nav-link color + any
   dark-mode inherited pale values. Every clickable item in the sidebar
   renders dark-on-light with orange hover/active. */
[data-theme="light"] .so-sidebar .nav-link,
[data-theme="light"] .so-sidebar .nav-sub-toggle,
[data-theme="light"] .so-sidebar .so-sidebar-link,
[data-theme="light"] .so-sidebar-link,
[data-theme="light"] .so-sidebar-sep-label,
[data-theme="light"] .nav-server-option {
    color: var(--so-text-body) !important;
}
[data-theme="light"] .so-sidebar .nav-link:hover,
[data-theme="light"] .so-sidebar .nav-sub-toggle:hover,
[data-theme="light"] .so-sidebar .so-sidebar-link:hover:not(.disabled),
[data-theme="light"] .so-sidebar-link:hover:not(.disabled) {
    color: var(--so-text-heading) !important;
    background: rgba(var(--so-brand-rgb), 0.08) !important;
}
[data-theme="light"] .so-sidebar .nav-link.active,
[data-theme="light"] .so-sidebar .nav-sub-toggle.active,
[data-theme="light"] .so-sidebar-link.active {
    color: var(--so-brand) !important;
    background: rgba(var(--so-brand-rgb), 0.12) !important;
}
[data-theme="light"] .so-sidebar .nav-link.disabled,
[data-theme="light"] .so-sidebar-link.disabled {
    color: var(--so-text-flat) !important;
}
/* Section category labels (e.g. "INTELLIGENCE", "LOOT MANAGEMENT") */
[data-theme="light"] .so-sidebar-sep-label {
    color: var(--so-text-mid) !important;
}
/* Sidebar icons (emoji fallbacks + Bootstrap icons) */
[data-theme="light"] .so-sidebar-icon,
[data-theme="light"] .nav-server-caret {
    color: var(--so-text-mid);
}

/* Dashboard + page content: every standard text vehicle should read
   dark-on-light. These override any lingering alpha-white rgba values
   that might leak through from the dark-mode defaults. */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: var(--so-text-heading);
}
[data-theme="light"] .scum-title,
[data-theme="light"] .subtitle,
[data-theme="light"] .welcome-heading,
[data-theme="light"] .welcome-sub,
[data-theme="light"] .dash-category-label,
[data-theme="light"] .tile-name {
    color: var(--so-text-heading);
}
[data-theme="light"] .tile-desc,
[data-theme="light"] .add-server-desc,
[data-theme="light"] .banner-server-detail,
[data-theme="light"] .banner-event,
[data-theme="light"] .maint-card-label,
[data-theme="light"] .maint-card-status {
    color: var(--so-text-body);
}
[data-theme="light"] .banner-server-name {
    color: var(--so-text-heading);
    font-weight: 700;
}

/* ── Light mode: sidebar nav ── */
/* ── Light mode: page chrome ── */
[data-theme="light"] .page-chrome { background: var(--so-card-header); }
[data-theme="light"] .page-chrome-current { color: #2d3748; }
[data-theme="light"] .page-chrome-sep { color: #5a6577; }
[data-theme="light"] .page-chrome a { color: var(--so-brand); }

/* ── Light mode: table headers ── */
[data-theme="light"] .so-table thead th { color: rgba(var(--so-brand-rgb),0.85); background: var(--so-card-header); border-bottom-color: var(--so-card-border); }
[data-theme="light"] .so-table tbody td { color: #2d3748; border-bottom-color: var(--so-card-border); }

/* ── Light mode: labels & section titles ── */
[data-theme="light"] .so-label { color: var(--so-text-heading); }
[data-theme="light"] .so-label-dim { color: var(--so-text-mid); }
[data-theme="light"] .so-section-title { color: var(--so-text-heading); }
/* ── Light mode: help panel (light treatment, brown palette) ──
   Previously painted dark (#2a3140) to mirror the sidebar. Flipped to
   light surface + brown text palette per admin feedback — in-page
   panels should match the page, not the sidebar. */
[data-theme="light"] .so-panel-help {
    background: var(--so-surface);
    border-left-color: var(--so-card-border);
}
[data-theme="light"] .so-help-title { color: var(--so-brand); }
[data-theme="light"] .so-help-section-title { color: var(--so-brand); }
[data-theme="light"] .so-help-text { color: var(--so-text-body); }
[data-theme="light"] .so-help-text strong { color: var(--so-text-heading); }
[data-theme="light"] .so-help-tip { color: var(--so-text-body); }
[data-theme="light"] .so-help-icon { color: var(--so-text-mid); }
[data-theme="light"] .so-help-detail-label { color: var(--so-text-body); }
[data-theme="light"] .so-help-detail-value { color: var(--so-text-mid); }
[data-theme="light"] .so-help-section-label { color: var(--so-text-mid); }
[data-theme="light"] .so-help-header { border-bottom-color: var(--so-card-border); }

/* ── Light mode: tabs ── */
[data-theme="light"] .so-tab { color: #5a6577; }
[data-theme="light"] .so-tab:hover { color: #1a2130; }
[data-theme="light"] .so-tab.active { color: var(--so-brand); border-bottom-color: var(--so-brand); }
[data-theme="light"] .so-tab-count { color: #c8ced8; }
[data-theme="light"] .so-tab-bar { border-bottom-color: var(--so-card-border); }
[data-theme="light"] .so-subtab-bar { border-bottom-color: var(--so-card-border); }

/* ── Light mode: nav panel (light treatment, brown palette) ──
   Previously painted dark (#2a3140) to mirror the sidebar. Flipped to
   light surface + brown text palette per admin feedback — in-page
   panels should match the page, not the sidebar. All dark-bg selectors
   below are scoped to `.so-panel-nav` so they don't leak into the
   sidebar (which uses `.so-sidebar-link` — separate class family). */
[data-theme="light"] .so-panel-nav {
    background: var(--so-surface);
    border-right-color: var(--so-card-border);
}
[data-theme="light"] .so-nav-group-section {
    border: 1px solid var(--so-card-border);
    border-radius: 4px;
    margin: 6px 0;
    overflow: hidden;
}
[data-theme="light"] .so-nav-group-section:first-child { margin-top: 0; }
[data-theme="light"] .so-nav-category {
    color: var(--so-brand);
    background: var(--so-card-header);
    padding: 6px 12px;
    border-bottom: 1px solid var(--so-card-border);
    margin: 0;
}

/* Search bar inside light nav panel */
[data-theme="light"] .so-panel-nav .so-search-wrap {
    border-color: var(--so-card-border);
    background: var(--so-void);
}
[data-theme="light"] .so-panel-nav .so-search {
    color: var(--so-text-body);
    background: transparent;
}
[data-theme="light"] .so-panel-nav .so-search::placeholder {
    color: var(--so-text-flat);
}
[data-theme="light"] .so-panel-nav .so-search-icon {
    color: var(--so-text-mid);
}

/* Nav items/leaves inside light nav panel */
[data-theme="light"] .so-panel-nav .so-nav-item,
[data-theme="light"] .so-nav-item {
    color: var(--so-text-body);
}
[data-theme="light"] .so-panel-nav .so-nav-item:hover,
[data-theme="light"] .so-nav-item:hover {
    color: var(--so-text-heading);
    background: rgba(var(--so-brand-rgb),0.06);
}
[data-theme="light"] .so-panel-nav .so-nav-item.active,
[data-theme="light"] .so-panel-nav .so-nav-item.selected,
[data-theme="light"] .so-panel-nav .so-nav-leaf.selected,
[data-theme="light"] .so-nav-item.active,
[data-theme="light"] .so-nav-item.so-nav-active {
    color: var(--so-brand);
    background: rgba(var(--so-brand-rgb),0.12);
}
[data-theme="light"] .so-panel-nav .so-nav-name { color: inherit; }
[data-theme="light"] .so-panel-nav .so-nav-sub,
[data-theme="light"] .so-nav-sub { color: var(--so-text-mid); }
[data-theme="light"] .so-panel-nav .so-nav-sub:hover,
[data-theme="light"] .so-nav-sub:hover { color: var(--so-text-heading); }
[data-theme="light"] .so-panel-nav .so-nav-sub.active,
[data-theme="light"] .so-nav-sub.active { color: var(--so-brand); }
[data-theme="light"] .so-panel-nav .so-nav-badge,
[data-theme="light"] .so-nav-badge { color: var(--so-text-mid); }
[data-theme="light"] .so-panel-nav .so-nav-expand,
[data-theme="light"] .so-nav-expand { color: var(--so-text-mid); }
[data-theme="light"] .so-nav-icon { color: var(--so-text-mid); }

/* ── Light mode: empty states ── */
[data-theme="light"] .so-empty-title { color: var(--so-text-heading); }
[data-theme="light"] .so-empty-text { color: var(--so-text-body); }

/* ── Light mode: sidebar nav (light treatment, brown palette) ──
   Previously painted dark (#2a3140) to match the header. Flipped to
   light surface per admin feedback — the sidebar now reads consistently
   with the rest of light mode. Header alone remains dark. */
[data-theme="light"] .so-sidebar-sep-label {
    color: var(--so-text-mid);
    font-weight: 700;
    font-size: 0.65rem;
}
[data-theme="light"] .so-sidebar-link {
    color: var(--so-text-body);
}
[data-theme="light"] .so-sidebar-link:hover:not(.disabled) {
    color: var(--so-text-heading);
    background: rgba(var(--so-brand-rgb),0.06);
}
[data-theme="light"] .so-sidebar-link.active {
    color: var(--so-brand) !important;
    background: rgba(var(--so-brand-rgb),0.12) !important;
}
[data-theme="light"] .so-sidebar .nav-link,
[data-theme="light"] .so-sidebar .nav-sub-toggle {
    color: var(--so-text-body);
}
[data-theme="light"] .so-sidebar .nav-link:hover,
[data-theme="light"] .so-sidebar .nav-sub-toggle:hover {
    color: var(--so-text-heading);
    background: rgba(var(--so-brand-rgb),0.06);
}
[data-theme="light"] .so-sidebar {
    background: var(--so-surface);
    border-color: var(--so-card-border);
    box-shadow: 0 10px 24px rgba(44,32,20,0.08);
}
[data-theme="light"] .nav-server-current {
    color: var(--so-brand);
    border-color: rgba(var(--so-brand-rgb),0.35);
    background: rgba(var(--so-brand-rgb),0.08);
}
[data-theme="light"] .nav-server-current:hover {
    background: rgba(var(--so-brand-rgb),0.14);
    border-color: var(--so-brand);
}
[data-theme="light"] .nav-server-name {
    color: var(--so-brand);
}
[data-theme="light"] .nav-server-dropdown {
    background: var(--so-raised);
    border-color: var(--so-card-border);
    box-shadow: 0 8px 24px rgba(44,32,20,0.12);
}
[data-theme="light"] .nav-server-option {
    color: var(--so-text-body);
}
[data-theme="light"] .nav-server-option:hover {
    background: rgba(var(--so-brand-rgb),0.06);
    color: var(--so-text-heading);
}
[data-theme="light"] .nav-server-option.active {
    color: var(--so-brand);
}
[data-theme="light"] .nav-server-add {
    color: var(--so-brand);
}
[data-theme="light"] .nav-server-result-owner {
    color: var(--so-text-flat);
}
[data-theme="light"] .nav-server-search-input {
    background: var(--so-void);
    color: var(--so-text-body);
    border-color: var(--so-card-border);
}

/* ── Light mode: card headers (steel blue bar) ── */

/* ── Light mode: KPI tiles (dark treatment) ── */
[data-theme="light"] .so-kpi-strip { background: var(--so-surface); border-bottom-color: var(--so-card-border); }
[data-theme="light"] .so-kpi-tile {
    background: var(--so-kpi-bg);
    border-color: var(--so-kpi-border);
}
[data-theme="light"] .so-kpi-sep { background: var(--so-card-border); }
[data-theme="light"] .so-kpi-val { color: var(--so-text-heading); }
[data-theme="light"] .so-kpi-lbl { color: var(--so-text-mid); }
[data-theme="light"] .so-kpi-highlight .so-kpi-val { color: var(--so-green); }
[data-theme="light"] .so-kpi-danger .so-kpi-val { color: var(--so-red); }

/* ================================================================
   VIEW SWITCHER (tab buttons)
   ================================================================ */

.so-view-switcher {
    display: flex;
    background: var(--so-surface);
    border-radius: var(--radius-xs, 4px);
    overflow: hidden;
    border: 1px solid var(--so-a10);
}

.so-view-btn {
    padding: 6px 14px;
    border: none;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: transparent;
    color: var(--so-a50);
    transition: all 0.15s;
}
.so-view-btn:hover { color: var(--so-a70); }
.so-view-btn.active { background: var(--so-brand); color: #fff; }

/* ── Subscription Expired Overlay ────────────────────────────── */

.so-expired-overlay {
    position: absolute;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.so-expired-card {
    background: var(--so-surface);
    border: 1px solid var(--so-a10);
    border-radius: 12px;
    padding: 40px 48px;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

.so-expired-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.so-expired-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--so-brand);
    margin-bottom: 8px;
}

.so-expired-text {
    font-size: 0.85rem;
    color: var(--so-text-body);
    line-height: 1.5;
    margin-bottom: 24px;
}

.so-expired-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── Tier badges (Recon / Operations / Command) ──────────────────
   Used in two places:
     1. _Header.cshtml — shows the user's CURRENT tier next to the
        profile dropdown. All three tiers render (identity reinforcement).
     2. Dashboard tile top-right — shows the REQUIRED tier for that tile,
        but only when it's higher than the user's current tier (so users
        only see what they don't yet have). Recon never appears on tiles.
   Color discipline: red is reserved for errors/alerts; tier accents use
   gray (Recon), brand orange (Operations), gold (Command).
*/
.so-tier-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}
.so-tier-badge-recon {
    background: rgba(156, 163, 175, 0.15);
    color:      rgba(156, 163, 175, 0.95);
    border-color: rgba(156, 163, 175, 0.30);
}
.so-tier-badge-ops {
    background: rgba(var(--so-brand-rgb), 0.15);
    color:      var(--so-brand);
    border-color: rgba(var(--so-brand-rgb), 0.40);
}
.so-tier-badge-command {
    background: rgba(215, 172, 97, 0.15);
    color:      var(--so-gold);
    border-color: rgba(215, 172, 97, 0.50);
}

/* Dashboard tile corner positioning */
.dash-tile {
    position: relative; /* anchor for the corner badge (already may be set elsewhere) */
}
.dash-tile-tier-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2; /* sit above the icon/body opacity layer */
}

/* ── Sector grid overlay — shared across all Leaflet maps ─────── */
.so-le-grid-overlay {
    position: absolute;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    pointer-events: none;
}
.so-le-grid-overlay.so-le-grid-in-pane {
    z-index: auto; /* pane controls z-index */
}
.so-le-grid-cell {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.4);
    pointer-events: none;
    padding: 4px 6px;
    gap: 4px;
}
.so-le-grid-cell.hover {
    background: rgba(240, 102, 9, 0.12);
}
.so-le-sector-label {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    background: transparent;
    padding: 2px 4px;
}
/* Floating sector labels — positioned independently of grid */
.so-sector-float-label {
    position: absolute;
    z-index: 1001;
    pointer-events: none;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    background: transparent;
    padding: 2px 4px;
}

/* ── Editor Header (shared event/quest editor header) ─────────── */

.so-editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.so-editor-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--so-text-heading);
    flex: 1;
}

.so-editor-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}