/* ============================================================================
   theme.css — the Phase 9 site-wide design system (2026-07-13, PLAN.md Phase 9).

   ONE visual language for every page, derived from the 3D planner workspace
   (the owner-approved reference): dark layered surfaces, hairline borders,
   8–10px radii, a single rust-red accent, and a strict typography split —
   Bebas Neue is for DISPLAY HEADINGS ONLY; all UI text (nav, buttons, forms,
   meta, footers) is Open Sans. Loaded from base.html right after
   header_style.css, BEFORE each page's own CSS: this file owns the shared
   vocabulary; page CSS keeps only page-specific layout.

   ⚠ Don't reintroduce per-page copies of these classes — that drift is what
   this file exists to end. Tokens first; change them here, not downstream.
   ========================================================================= */

:root {
    --rb-bg: #141619;            /* page background */
    --rb-bg-deep: #101214;       /* header / footer / hero scrims */
    --rb-panel: #1b1e23;         /* section cards (old .light_background) */
    --rb-card: #22262c;          /* nested cards, inputs, table rows */
    --rb-card-hover: #272c33;
    --rb-line: #2c3136;          /* hairline borders */
    --rb-line-strong: #3a4048;
    --rb-text: #e8e6e3;
    --rb-text-bright: #f5f4f2;
    --rb-muted: #a7adb5;
    --rb-faint: #7b828b;
    --rb-accent: #cd412b;        /* THE brand red — the only accent */
    --rb-accent-hover: #e04c34;
    --rb-accent-deep: #b8351f;
    --rb-gold: #f0a840;          /* star ratings */
    --rb-good: #4fae6d;
    --rb-radius: 12px;           /* panels */
    --rb-radius-sm: 8px;         /* controls */
    --rb-font-display: "Bebas Neue", sans-serif;
    --rb-font-ui: "Open Sans", system-ui, -apple-system, sans-serif;
    --rb-focus-ring: 0 0 0 3px rgba(205, 65, 43, .28);
}

/* ---- page canvas ---------------------------------------------------------- */
body {
    background-color: var(--rb-bg);
    color: var(--rb-text);
    font-family: var(--rb-font-ui);
    /* Unclassed links (404 page, flashes, form hints) follow the accent instead
       of Bootstrap's stock blue; classed links keep their own colors. */
    --bs-link-color: var(--rb-accent);
    --bs-link-hover-color: var(--rb-accent-hover);
    --bs-link-color-rgb: 205, 65, 43;
    --bs-link-hover-color-rgb: 224, 76, 52;
}
::selection { background: rgba(205, 65, 43, .45); color: #fff; }
hr { border-color: var(--rb-line); opacity: 1; }

/* The two legacy surface classes every page is built from — re-tokened.
   .light_background panels read as CARDS now (surface + hairline + radius). */
.dark_background { background-color: var(--rb-bg) !important; color: var(--rb-text); }
.light_background {
    background-color: var(--rb-panel) !important;
    color: var(--rb-text);
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-radius);
}

/* ---- typography ----------------------------------------------------------- */
/* Display headings keep the brand voice, tightened: slightly tracked, warmer
   white, no heavy text-shadows (pages that sit text on imagery add a scrim). */
.title {
    color: var(--rb-text-bright);
    font-family: var(--rb-font-display);
    font-weight: 500;
    letter-spacing: .022em;
    text-decoration: none;
    transition: color .15s ease;
}
.bread_text {
    color: var(--rb-text);
    font-family: var(--rb-font-ui);
    text-decoration: none;
}
.bread_text:hover { color: var(--rb-text); text-decoration: none; }
/* Small uppercase section label (the planner sidebar's GRADE/INSERTS idiom). */
.rb-label {
    display: block;
    font-family: var(--rb-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rb-muted);
    margin-bottom: 6px;
}

/* ---- header / navigation --------------------------------------------------- */
#header {
    background-color: var(--rb-bg-deep);
    border-bottom: 1px solid var(--rb-line);
    padding: 6px 0;
}
#website_name {
    color: var(--rb-accent) !important;
    font-family: var(--rb-font-display);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: .03em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#website_name img { width: 30px; height: 34px; }
.navbar { --bs-navbar-color: var(--rb-muted); --bs-navbar-hover-color: #fff; --bs-navbar-padding-y: 0; }
/* Nav links: UI font, not display caps — the single biggest "old look" fix. */
.nav-item {
    font-family: var(--rb-font-ui);
    font-size: 15px;
    font-weight: 600;
    margin-right: .25rem;
}
#header .nav-link {
    color: var(--rb-muted) !important;
    padding: 10px 12px;
    border-radius: var(--rb-radius-sm);
    transition: color .15s ease, background-color .15s ease;
}
#header .nav-link:hover, #header .nav-link:focus-visible {
    color: var(--rb-text-bright) !important;
    background: rgba(255, 255, 255, .05);
}
/* Dropdown = a dark panel, never the stock white sheet. */
.dropdown-menu {
    background-color: var(--rb-card);
    border: 1px solid var(--rb-line);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
    min-width: 210px;
}
.dropdown-item {
    color: var(--rb-text);
    font-family: var(--rb-font-ui);
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 12px;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(205, 65, 43, .16) !important;
    color: var(--rb-text-bright) !important;
}
#hamburger {
    background-color: var(--rb-card);
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius-sm);
    padding: 6px 10px;
}
#hamburger .navbar-toggler-icon { filter: invert(1) grayscale(1); }

/* Auth buttons: ghost + primary pills. */
.sign_in, .register {
    font-family: var(--rb-font-ui) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    border-radius: var(--rb-radius-sm) !important;
    padding: 8px 16px !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.sign_in {
    background-color: transparent !important;
    border: 1px solid var(--rb-line-strong) !important;
    color: var(--rb-text) !important;
}
.sign_in:hover { border-color: var(--rb-accent) !important; color: #fff !important; }
.register {
    background-color: var(--rb-accent) !important;
    border: 1px solid var(--rb-accent) !important;
    color: #fff !important;
}
.register:hover { background-color: var(--rb-accent-hover) !important; border-color: var(--rb-accent-hover) !important; }

/* ---- footer ---------------------------------------------------------------- */
#footer {
    background-color: var(--rb-bg-deep);
    border-top: 1px solid var(--rb-line);
    font-family: var(--rb-font-ui);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rb-faint);
    --bs-secondary-color: var(--rb-faint);
    padding-top: 8px;
}
#footer .nav-link { color: var(--rb-muted); font-weight: 600; font-size: 13.5px; }
#footer .nav-link:hover { color: var(--rb-text-bright); }

/* ---- buttons ---------------------------------------------------------------- */
/* Primary action (search / comment / save / send). */
.submit-button {
    background-color: var(--rb-accent);
    border: 1px solid var(--rb-accent);
    border-radius: var(--rb-radius-sm);
    color: #fff;
    font-family: var(--rb-font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 9px 20px;
    transition: background-color .15s ease, border-color .15s ease;
}
.submit-button:hover, .submit-button:focus {
    background-color: var(--rb-accent-hover);
    border-color: var(--rb-accent-hover);
    color: #fff;
}
/* Secondary / pager buttons: quiet cards. */
.next_previous {
    background-color: var(--rb-card) !important;
    border: 1px solid var(--rb-line-strong) !important;
    border-radius: var(--rb-radius-sm) !important;
    padding: 8px 18px !important;
    color: var(--rb-text) !important;
    font-family: var(--rb-font-ui) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: border-color .15s ease, color .15s ease !important;
    margin-left: 8px !important;
}
.next_previous:hover { border-color: var(--rb-accent) !important; color: #fff !important; }
/* "Advanced search" disclosure: a quiet ghost toggle, not an olive slab. */
.advanced_features_button {
    background-color: transparent !important;
    border: 1px solid var(--rb-line-strong) !important;
    border-radius: var(--rb-radius-sm) !important;
    color: var(--rb-muted) !important;
    font-family: var(--rb-font-ui) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    padding: 6px 14px !important;
    transition: border-color .15s ease, color .15s ease !important;
}
.advanced_features_button:hover, .advanced_features_button:focus {
    border-color: var(--rb-accent) !important;
    color: var(--rb-text-bright) !important;
}

/* ---- form controls ----------------------------------------------------------
   One input look everywhere: dark card, hairline, readable UI type (the old
   Bebas-caps-in-inputs is gone). Covers the legacy homepage classes AND
   Bootstrap-Flask's .form-control/.form-select used by auth/contact/add-base. */
.drop_down, .advanced_search_input_styling,
.form-control, .form-select {
    background-color: var(--rb-card);
    border: 1px solid var(--rb-line-strong);
    border-radius: var(--rb-radius-sm);
    color: var(--rb-text);
    font-family: var(--rb-font-ui);
    font-size: 15px;
    padding: 9px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--rb-faint); }
.drop_down:focus, .advanced_search_input_styling:focus,
.form-control:focus, .form-select:focus {
    background-color: var(--rb-card);
    border-color: var(--rb-accent);
    box-shadow: var(--rb-focus-ring);
    color: var(--rb-text);
    outline: none;
}
.form-select, select.drop_down {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7adb5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

/* ---- badges / tags ----------------------------------------------------------
   Feature badges (External TC, Bunker…) become quiet hairline chips. */
.badge.text-bg-secondary {
    background-color: var(--rb-card) !important;
    border: 1px solid var(--rb-line-strong);
    color: var(--rb-muted) !important;
    font-family: var(--rb-font-ui);
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
    margin: 2px 2px 2px 0;
}

/* ---- tables (shared look; page CSS adds layout) ---------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rb-text);
    border-color: var(--rb-line);
}
.table thead th, .table thead a {
    font-family: var(--rb-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rb-muted);
}

/* ---- stars ------------------------------------------------------------------ */
.star { color: var(--rb-gold); }
.star.half:after { color: var(--rb-gold); }

/* ---- misc ------------------------------------------------------------------- */
/* Quiet, consistent focus for keyboard users everywhere. */
a:focus-visible, button:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; }
/* Dark, slim scrollbars to match the shell (WebKit + Firefox). */
* { scrollbar-color: #3a4048 #16181c; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #16181c; }
::-webkit-scrollbar-thumb { background: #3a4048; border-radius: 6px; border: 3px solid #16181c; }
::-webkit-scrollbar-thumb:hover { background: #4a515a; }