/* ==========================================================================
   Theme: russim-dark

   A dark, military-technical look in the spirit of World of Tanks, S.T.A.L.K.E.R.
   and Half-Life 2: graphite and gunmetal, an amber accent, bone-coloured text,
   muted olive and rust for success and danger, chamfered rather than rounded
   corners, headings in spaced capitals.

   Like nebula, this file is values, not a second copy of the rules. The chrome
   is main_new.css of the framework, written against var(); RusSim's sections
   (russim.css) read the --rs-* tokens with their light values as fallbacks.
   What is not a token -- the Tailwind utilities the shell's own markup uses
   (the sign-in card, the header) -- is recoloured under html.russim-dark, the
   class this theme's page puts on its root.

   No fonts from elsewhere: the panel loads nothing from third-party addresses,
   so the stencil feel comes from narrow system faces and letter-spacing.
   Load order in index_russim.html: tailwind -> main_new.css -> this file.
   ========================================================================== */
:root {
    /* Palette */
    --rs-bg: #121412;
    --rs-bg-raised: #181b19;
    --rs-surface: #202421;
    --rs-surface-alt: #262b27;
    --rs-control: #2d332e;
    --rs-control-hover: #384039;
    --rs-border: #3b423c;
    --rs-border-strong: #4c554d;
    --rs-rule: #2a302b;
    --rs-text: #d9d3c0;
    --rs-text-dim: #9c9682;
    --rs-text-faint: #6f6b5e;
    --rs-accent: #e0922f;
    --rs-accent-hover: #f0a640;
    --rs-on-accent: #17130c;
    --rs-on-accent-dim: #3d2c10;
    --rs-link: #f0a640;
    --rs-accent-soft: rgba(224, 146, 47, 0.16);
    --rs-accent-soft-border: rgba(224, 146, 47, 0.45);
    --rs-accent-veil: rgba(224, 146, 47, 0.14);
    --rs-tag-fg: #f0b45c;
    --rs-highlight: rgba(224, 146, 47, 0.24);
    --rs-danger: #d65a3c;
    --rs-danger-soft: rgba(180, 64, 40, 0.2);
    --rs-success: #9aae62;
    --rs-success-soft: rgba(122, 140, 70, 0.2);
    --rs-warning: #d9a441;
    --rs-warning-soft: rgba(217, 164, 65, 0.14);
    --rs-warning-fg: #e8bf6a;
    --rs-window: rgba(24, 27, 25, 0.95);
    --rs-shadow: rgba(0, 0, 0, 0.6);
    --rs-banner: rgba(10, 11, 10, 0.9);
    --rs-banner-fg: #e6dfca;
    --rs-banner-warning: rgba(150, 90, 20, 0.94);
    --rs-banner-error: rgba(140, 40, 25, 0.94);
    --rs-on-person: #ffffff;
    --rs-radius: 2px;
    --rs-heading-font: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --rs-heading-case: uppercase;
    --rs-heading-spacing: 0.08em;
    /* Overcast, not blue: the sky of the editor's scene. */
    --russim-scene-sky: #7c8682;
    /* Muted and a little harder: the catalogue's grass is meant for a sunny day. */
    --russim-scene-filter: saturate(0.62) contrast(1.06) brightness(0.9) sepia(0.12);

    /* Shell tokens (main_new.css) */
    --sidebar-bg: #141715;
    --sidebar-fg: var(--rs-text);
    --sidebar-header-bg: #0e100e;
    --sidebar-width: 16rem;
    --sidebar-width-collapsed: 64px;
    --sidebar-scrollbar-track: #0e100e;
    --sidebar-scrollbar-thumb: #4c554d;
    --sidebar-scrollbar-thumb-hover: var(--rs-accent);
    --nav-item-padding: 0.7rem 1.25rem;
    --nav-item-padding-collapsed: 0.7rem;
    --nav-item-radius: 0;
    --nav-item-fg: var(--rs-text-dim);
    --nav-item-bg: transparent;
    --nav-item-fg-hover: #f0e8d0;
    --nav-item-bg-hover: rgba(224, 146, 47, 0.12);
    --nav-item-fg-active: #f7efd6;
    --nav-item-bg-active: rgba(224, 146, 47, 0.24);
    --drawer-bg: #141715;
    --backdrop-color: rgba(6, 7, 6, 0.72);
    --table-card-bg: var(--rs-surface);
    --table-card-border: var(--rs-border);
    --table-card-label-fg: var(--rs-text-dim);
    --table-sticky-bg: var(--rs-surface);
    --table-sticky-header-bg: var(--rs-surface-alt);
    --border-color: var(--rs-border-strong);
    --input-bg: #161917;
}

/* --- page ------------------------------------------------------------------ */

html.russim-dark body {
    background-color: var(--rs-bg);
    color: var(--rs-text);
    accent-color: var(--rs-accent);
}

/* A vignette and faint scan lines behind everything: the screen of a field
   terminal rather than a web page. Fixed, below the content, and inert. */
.russim-dark-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(60, 66, 58, 0.35), transparent 65%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
        var(--rs-bg);
}

html.russim-dark ::selection { background: var(--rs-accent); color: var(--rs-on-accent); }

/* --- chrome that is not a token -------------------------------------------- */

html.russim-dark #sidebar {
    border-right: 1px solid var(--rs-border);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

html.russim-dark .logo-text,
html.russim-dark #current-section-title {
    font-family: var(--rs-heading-font);
    text-transform: var(--rs-heading-case);
    letter-spacing: var(--rs-heading-spacing);
}

html.russim-dark .logo-text { color: var(--rs-accent); }

/* The active item gets the amber edge of a selected slot. */
html.russim-dark .nav-item.active { box-shadow: inset 3px 0 0 var(--rs-accent); }

/* --- the shell's Tailwind utilities, recoloured ---------------------------- */

html.russim-dark .bg-white,
html.russim-dark .bg-gray-50,
html.russim-dark .bg-gray-100 {
    background-color: var(--rs-surface) !important;
}

html.russim-dark .bg-blue-800 { background-color: var(--sidebar-header-bg) !important; }
html.russim-dark .bg-gray-800 { background-color: var(--rs-bg-raised) !important; }

html.russim-dark .bg-blue-600,
html.russim-dark .bg-blue-700 {
    background-color: var(--rs-accent) !important;
    color: var(--rs-on-accent) !important;
}

html.russim-dark .hover\:bg-blue-700:hover,
html.russim-dark .hover\:bg-blue-600:hover { background-color: var(--rs-accent-hover) !important; }
html.russim-dark .hover\:bg-gray-100:hover { background-color: var(--rs-control) !important; }

html.russim-dark .text-gray-800,
html.russim-dark .text-gray-900,
html.russim-dark .text-gray-700 { color: var(--rs-text) !important; }

html.russim-dark .text-gray-600,
html.russim-dark .text-gray-500 { color: var(--rs-text-dim) !important; }

html.russim-dark .text-gray-400 { color: var(--rs-text-faint) !important; }
html.russim-dark .text-blue-600,
html.russim-dark .text-blue-700,
html.russim-dark .text-blue-800 { color: var(--rs-link) !important; }
html.russim-dark .border-blue-500,
html.russim-dark .border-blue-600 { border-color: var(--rs-accent) !important; }
html.russim-dark .focus\:ring-blue-500:focus { --tw-ring-color: var(--rs-accent) !important; }

html.russim-dark .border-gray-200,
html.russim-dark .border-gray-300,
html.russim-dark .border-gray-700 { border-color: var(--rs-border) !important; }

html.russim-dark .shadow-sm,
html.russim-dark .shadow,
html.russim-dark .shadow-xl {
    box-shadow: 0 0 0 1px var(--rs-border), 0 8px 24px var(--rs-shadow) !important;
}

html.russim-dark .rounded,
html.russim-dark .rounded-md,
html.russim-dark .rounded-lg { border-radius: var(--rs-radius) !important; }

/* The sign-in screen: the shell's page styles .auth-block in its own head. */
html.russim-dark .auth-block {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(60, 66, 58, 0.45), transparent 70%),
        var(--rs-bg);
}

html.russim-dark .auth-block h3 {
    font-family: var(--rs-heading-font);
    text-transform: var(--rs-heading-case);
    letter-spacing: var(--rs-heading-spacing);
}

html.russim-dark .auth-block > div { border-top: 3px solid var(--rs-accent); }

/* Form fields everywhere on the page: native controls default to white. */
html.russim-dark input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.russim-dark select,
html.russim-dark textarea {
    background-color: var(--input-bg);
    color: var(--rs-text);
    border-color: var(--rs-border-strong);
}

html.russim-dark input::placeholder,
html.russim-dark textarea::placeholder { color: var(--rs-text-faint); }

html.russim-dark input:focus,
html.russim-dark select:focus,
html.russim-dark textarea:focus {
    outline: 1px solid var(--rs-accent);
    outline-offset: 0;
    border-color: var(--rs-accent);
}

html.russim-dark button:focus-visible { outline: 1px solid var(--rs-accent); outline-offset: 1px; }