/* ==========================================================================
   RustArchon theme - weathered survival-crafting, restrained neon accents.
   Palette lives here as custom properties - retune here, not per-rule.

   Theme-switchable: --ra-* is redefined per data-bs-theme value (see theme.js for the
   toggle itself), not just hardcoded once - so a component that references --ra-text
   automatically follows the active theme with no extra rule needed. The rust/cyan/
   magenta/green/red/yellow hues stay constant across both themes (that's the brand);
   only the surfaces/text and how hard the glow effects push change.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* Base surfaces - warm parchment/concrete, not stark white (flat/sterile on screen) */
    --ra-bg: #f2efe6;
    --ra-bg-raised: #e8e3d3;
    --ra-bg-card: #fbf9f3;
    --ra-bg-input: #ffffff;
    --ra-border: #d3cdb8;
    --ra-border-soft: #e1dcc9;

    --ra-text: #211f18;
    --ra-text-muted: #55523f;
    --ra-text-dim: #8a8570;

    --ra-rust: #c8500e;
    --ra-rust-bright: #a8420b;
    --ra-rust-dim: #e2a262;

    --ra-cyan: #0a94a8;
    --ra-magenta: #b81c93;
    --ra-green: #157a3d;
    --ra-red: #c22236;
    --ra-yellow: #93690a;

    /* Neon glows read as noise on a light background - keep them switched off here rather
       than just dimmed, and let borders/weight carry emphasis on this theme instead. */
    --ra-glow-rust: none;
    --ra-glow-cyan: none;
    --ra-glow-magenta: none;
    --ra-glow-red: none;
    --ra-glow-green: none;

    --ra-noise-opacity: 0.025;
}

[data-bs-theme="dark"] {
    /* Base surfaces - a warm near-black, not pure black (flat/dead on screen) */
    --ra-bg: #0b0d0a;
    --ra-bg-raised: #14170f;
    --ra-bg-card: #171a13;
    --ra-bg-input: #10120d;
    --ra-border: #2c3122;
    --ra-border-soft: #1f2318;

    --ra-text: #e7e6dd;
    --ra-text-muted: #9aa08c;
    --ra-text-dim: #6b7160;

    --ra-rust: #ff6a1a;
    --ra-rust-bright: #ff8a3d;
    --ra-rust-dim: #b34e15;

    --ra-cyan: #16f2ff;
    --ra-magenta: #ff2ec4;
    --ra-green: #39ff6a;
    --ra-red: #ff2f4e;
    --ra-yellow: #ffd21a;

    /* Subtler than the first pass - a hint of glow on things that are actually interactive
       (hover/focus/active), not a permanent blanket bloom over every heading. */
    --ra-glow-rust: 0 0 10px rgba(255, 106, 26, 0.35);
    --ra-glow-cyan: 0 0 10px rgba(22, 242, 255, 0.35);
    --ra-glow-magenta: 0 0 10px rgba(255, 46, 196, 0.35);
    --ra-glow-red: 0 0 10px rgba(255, 47, 78, 0.35);
    --ra-glow-green: 0 0 10px rgba(57, 255, 106, 0.35);

    --ra-noise-opacity: 0.05;
}

:root {
    /* Bebas Neue reads as poster/military-stencil rather than sci-fi HUD - condensed and
       confident without needing heavy letter-spacing or a glow to carry it. */
    --ra-font-display: 'Bebas Neue', 'Rajdhani', 'Helvetica Neue', Arial, sans-serif;
    --ra-font-body: 'Rajdhani', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ra-font-mono: 'Share Tech Mono', 'Consolas', monospace;
}

/* ==========================================================================
   Re-skin Bootstrap 5.3's own light/dark themes (toggled via <html data-bs-theme="...">
   - see theme.js) rather than fighting individual components. Bootstrap's cards, tables,
   dropdowns, list-groups, popovers, etc. all pull their colors from these --bs-* custom
   properties internally - overriding a component's own class (e.g. .card) without also
   overriding the variable it reads (--bs-body-color) leaves every OTHER untouched
   component still wired to Bootstrap's stock palette, which is exactly what caused
   .form-label (inherited color, no class of its own) to render near-black on a dark
   background before this block existed. Fix the variables once, here, for both themes,
   and every Bootstrap component - touched or not - inherits the right colors either way.
   ========================================================================== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--ra-bg);
    --bs-body-color: var(--ra-text);
    --bs-border-color: var(--ra-border);
    --bs-link-color: var(--ra-cyan);
    --bs-link-hover-color: var(--ra-rust-bright);
    --bs-code-color: var(--ra-magenta);
    --bs-form-valid-color: var(--ra-green);
    --bs-form-valid-border-color: var(--ra-green);
    --bs-form-invalid-color: var(--ra-red);
    --bs-form-invalid-border-color: var(--ra-red);

    /* Semantic colors - so any untouched .text-primary/.bg-danger/etc. still lands on-theme */
    --bs-primary: var(--ra-rust);
    --bs-danger: var(--ra-red);
    --bs-success: var(--ra-green);
    --bs-info: var(--ra-cyan);
    --bs-warning: var(--ra-yellow);
}

[data-bs-theme="light"] {
    --bs-body-bg-rgb: 242, 239, 230;
    --bs-body-color-rgb: 33, 31, 24;
    --bs-emphasis-color: #000000;
    --bs-secondary-color: rgba(33, 31, 24, 0.65);
    --bs-secondary-bg: var(--ra-bg-raised);
    --bs-tertiary-color: rgba(33, 31, 24, 0.5);
    --bs-tertiary-bg: var(--ra-bg-card);
    --bs-border-color-translucent: rgba(200, 80, 14, 0.2);
    --bs-focus-ring-color: rgba(200, 80, 14, 0.25);
}

[data-bs-theme="dark"] {
    --bs-body-bg-rgb: 11, 13, 10;
    --bs-body-color-rgb: 231, 230, 221;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(231, 230, 221, 0.65);
    --bs-secondary-bg: var(--ra-bg-raised);
    --bs-tertiary-color: rgba(231, 230, 221, 0.5);
    --bs-tertiary-bg: var(--ra-bg-card);
    --bs-border-color-translucent: rgba(255, 106, 26, 0.18);
    --bs-focus-ring-color: rgba(255, 106, 26, 0.35);
}

/* ==========================================================================
   JumpStart shared-component bridge
   ========================================================================== */
/* Same reasoning as the Bootstrap bridge above, for JumpStart.Components (e.g. TenantSwitcher) -
   those ship their own inline <style> blocks against a generic --text-primary/--background/etc.
   contract with light-mode-appropriate fallbacks (e.g. --text-primary falls back to #111827, a
   near-black), since JumpStart itself has no opinion on any one app's theme. RustArchon never
   defined that contract, so every JumpStart component was silently always rendering its light-mode
   fallback colors regardless of data-bs-theme - invisible-looking (near-black text on a near-black
   background) in dark mode, and only ever looking right in light mode by coincidence. Bridge once,
   here, for both themes, same as the Bootstrap variables above. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --text-primary: var(--ra-text);
    --text-secondary: var(--ra-text-muted);
    --background: var(--ra-bg-input);
    --border-color: var(--ra-border);
    --border-hover: var(--ra-rust);
    --focus-color: var(--ra-cyan);
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
    background-color: var(--ra-bg);
    color: var(--ra-text);
    font-family: var(--ra-font-body);
    font-size: 0.95rem;
}

body {
    /* Faint corrugated-sheet-metal texture - repeating diagonal hairlines, plus a handful of tiny
       fixed-size radial dots standing in for grain/noise. A tried an SVG feTurbulence filter here
       first for genuine noise, but tiling a fractalNoise filter across a full-viewport fixed layer
       is expensive to rasterize and visibly stalled paint - this reads almost as gritty at a
       fraction of the cost, since it's plain gradients the compositor already handles cheaply. */
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255, 255, 255, var(--ra-noise-opacity)) 0.6px, transparent 0.6px),
        radial-gradient(circle at 68% 58%, rgba(255, 255, 255, var(--ra-noise-opacity)) 0.6px, transparent 0.6px),
        radial-gradient(circle at 38% 82%, rgba(255, 255, 255, var(--ra-noise-opacity)) 0.6px, transparent 0.6px),
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, var(--ra-noise-opacity)) 0.6px, transparent 0.6px),
        repeating-linear-gradient(135deg, rgba(255, 106, 26, 0.02) 0px, rgba(255, 106, 26, 0.02) 1px, transparent 1px, transparent 26px),
        radial-gradient(ellipse at top left, rgba(255, 106, 26, 0.05), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(22, 242, 255, 0.035), transparent 55%);
    background-size: 7px 7px, 11px 11px, 9px 9px, 13px 13px, auto, auto, auto;
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ra-font-display);
    color: var(--ra-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 400; /* Bebas Neue only ships one weight - condensed caps carry it, no bold needed */
}

h1:focus {
    outline: none;
}

p, label, .form-label, td, th, li {
    font-family: var(--ra-font-body);
}

.lead {
    color: var(--ra-text-muted);
    font-weight: 500;
}

a, .btn-link {
    color: var(--ra-cyan);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: var(--ra-rust-bright);
        text-shadow: var(--ra-glow-cyan);
    }

::selection {
    background: var(--ra-rust);
    color: var(--ra-bg);
}

/* Thin neon scrollbar - Firefox + WebKit */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ra-rust-dim) var(--ra-bg);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ra-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--ra-rust-dim);
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--ra-rust);
    }

.content {
    padding-top: 1.1rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    font-family: var(--ra-font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 400;
    font-size: 0.9rem;
    border-radius: 3px;
    border-width: 1px;
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    color: #0b0d0a;
    background-color: var(--ra-rust);
    border-color: var(--ra-rust);
}

    .btn-primary:hover, .btn-primary:focus {
        color: #0b0d0a;
        background-color: var(--ra-rust-bright);
        border-color: var(--ra-rust-bright);
        box-shadow: var(--ra-glow-rust);
    }

.btn-secondary {
    color: var(--ra-text);
    background-color: transparent;
    border-color: var(--ra-border);
}

    .btn-secondary:hover, .btn-secondary:focus {
        color: var(--ra-text);
        background-color: var(--ra-bg-raised);
        border-color: var(--ra-cyan);
        box-shadow: var(--ra-glow-cyan);
    }

.btn-danger {
    color: #0b0d0a;
    background-color: var(--ra-red);
    border-color: var(--ra-red);
}

    .btn-danger:hover, .btn-danger:focus {
        box-shadow: var(--ra-glow-red);
        background-color: var(--ra-red);
        border-color: var(--ra-red);
    }

.btn-outline-secondary {
    color: var(--ra-text-muted);
    border-color: var(--ra-border);
}

    .btn-outline-secondary:hover {
        color: var(--ra-cyan);
        background-color: transparent;
        border-color: var(--ra-cyan);
        box-shadow: var(--ra-glow-cyan);
    }

.btn-outline-danger {
    color: var(--ra-red);
    border-color: var(--ra-red);
}

    .btn-outline-danger:hover {
        color: #0b0d0a;
        background-color: var(--ra-red);
        border-color: var(--ra-red);
        box-shadow: var(--ra-glow-red);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: var(--ra-glow-rust);
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.5);
}

[data-bs-theme="light"] .btn-close {
    filter: none;
}

/* ---- Theme toggle ---- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid var(--ra-border);
    background: transparent;
    color: var(--ra-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .theme-toggle:hover {
        border-color: var(--ra-rust);
        color: var(--ra-rust-bright);
    }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control, .form-select {
    background-color: var(--ra-bg-input);
    border: 1px solid var(--ra-border);
    color: var(--ra-text);
}

    .form-control:focus, .form-select:focus {
        background-color: var(--ra-bg-input);
        color: var(--ra-text);
        border-color: var(--ra-rust);
        box-shadow: var(--ra-glow-rust);
    }

    .form-control::placeholder {
        color: var(--ra-text-dim);
    }

.form-floating > label {
    color: var(--ra-text-dim);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-check-input {
    background-color: var(--ra-bg-input);
    border-color: var(--ra-border);
}

    .form-check-input:checked {
        background-color: var(--ra-rust);
        border-color: var(--ra-rust);
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--ra-text-dim);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ra-green);
    box-shadow: var(--ra-glow-green);
}

.invalid {
    outline: 1px solid var(--ra-red);
}

.validation-message {
    color: var(--ra-red);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    color: var(--ra-text);
    border-color: var(--ra-border);
}

    .table > thead {
        font-family: var(--ra-font-display);
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.06em;
        color: var(--ra-rust-bright);
        border-bottom: 2px solid var(--ra-rust-dim);
    }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--ra-bg-raised);
    color: var(--ra-text);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 106, 26, 0.09);
    color: var(--ra-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--ra-border-soft);
}

/* ==========================================================================
   Cards / Alerts / Badges
   ========================================================================== */

.card {
    background-color: var(--ra-bg-card);
    border: 1px solid var(--ra-border);
}

.card-header {
    background-color: var(--ra-bg-raised);
    border-bottom: 1px solid var(--ra-border);
    font-family: var(--ra-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    color: var(--ra-rust-bright);
}

.alert {
    background-color: var(--ra-bg-raised);
    border: 1px solid var(--ra-border);
    border-left-width: 4px;
    color: var(--ra-text);
}

.alert-danger {
    border-left-color: var(--ra-red);
}

.alert-success {
    border-left-color: var(--ra-green);
}

.alert-info {
    border-left-color: var(--ra-cyan);
}

.alert-warning {
    border-left-color: var(--ra-yellow);
}

code, .badge {
    font-family: var(--ra-font-mono);
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-content {
    background-color: var(--ra-bg-card);
    border: 1px solid var(--ra-rust-dim);
    box-shadow: var(--ra-glow-rust);
}

.modal-header, .modal-footer {
    border-color: var(--ra-border);
}

.modal-title {
    font-family: var(--ra-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modal-backdrop {
    background-color: #000;
}

    .modal-backdrop.show {
        opacity: 0.75;
    }

/* ==========================================================================
   Framework chrome (error UI, boundaries) - kept functional, restyled to fit
   ========================================================================== */

.blazor-error-boundary {
    background: #2a0d0d;
    border: 1px solid var(--ra-red);
    box-shadow: var(--ra-glow-red);
    padding: 1rem 1rem 1rem 1rem;
    color: var(--ra-text);
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
        font-family: var(--ra-font-display);
        text-transform: uppercase;
    }

#blazor-error-ui {
    color-scheme: dark;
    background: #2a0d0d;
    color: var(--ra-text);
    border-top: 2px solid var(--ra-red);
    bottom: 0;
    box-shadow: var(--ra-glow-red);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        color: var(--ra-text);
    }

/* ==========================================================================
   Marketing pages (Home, Features, Pricing, Contact) - shared building blocks.
   Scoped to MarketingLayout's pages only by convention (these classes aren't used
   inside the authenticated app), not by CSS selector - keep that in mind if the app
   shell ever needs a ".hero" of its own.
   ========================================================================== */

.text-glow-rust {
    color: var(--ra-rust-bright);
    text-shadow: var(--ra-glow-rust);
}

.text-glow-cyan {
    color: var(--ra-cyan);
    text-shadow: var(--ra-glow-cyan);
}

.eyebrow {
    font-family: var(--ra-font-display);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ra-cyan);
    margin-bottom: 0.75rem;
}

    .eyebrow::before {
        content: "// ";
        color: var(--ra-text-dim);
    }

/* ---- Hazard stripe ---- */
/* A reusable diagonal black/yellow accent bar - the one piece of unmistakably "industrial
   worksite" iconography that carries zero trademark risk, used sparingly as a section divider or
   underline rather than a border everywhere. */
.hazard-stripe {
    height: 5px;
    background-image: repeating-linear-gradient(135deg, #17150f 0 10px, var(--ra-yellow) 10px 20px);
    border: none;
    opacity: 0.9;
}

/* ---- Hero ---- */

.hero {
    position: relative;
    padding: 4.5rem 1.5rem 3.5rem;
    overflow: hidden;
    text-align: center;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.05;
    margin-bottom: 1.1rem;
}

.hero-sub {
    font-size: 1.05rem;
    color: var(--ra-text-muted);
    max-width: 600px;
    margin: 0 auto 1.75rem;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hero-note {
    font-size: 0.85rem;
    color: var(--ra-text-dim);
}

.hero-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 106, 26, 0.16), transparent 70%),
        radial-gradient(ellipse 40% 40% at 15% 90%, rgba(22, 242, 255, 0.09), transparent 70%),
        radial-gradient(ellipse 40% 40% at 85% 90%, rgba(255, 46, 196, 0.08), transparent 70%);
    pointer-events: none;
}

/* ---- Stat strip ---- */

.strip {
    border-top: 1px solid var(--ra-border);
    border-bottom: 1px solid var(--ra-border);
    background: var(--ra-bg-raised);
}

.strip-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1.5rem;
    text-align: center;
}

.strip-num {
    display: block;
    font-family: var(--ra-font-display);
    font-size: 1.7rem;
    color: var(--ra-rust-bright);
}

.strip-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ra-text-muted);
}

/* ---- Generic section ---- */

.section {
    padding: 3.5rem 1.5rem;
}

.section-alt {
    background: var(--ra-bg-raised);
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    margin-bottom: 2.25rem;
}

.section-cta {
    text-align: center;
    margin-top: 2.5rem;
}

.link-arrow {
    font-family: var(--ra-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    color: var(--ra-cyan);
}

    .link-arrow:hover {
        color: var(--ra-rust-bright);
    }

.cta-banner {
    text-align: center;
}

    .cta-banner h2 {
        margin-bottom: 0.75rem;
    }

    .cta-banner p {
        color: var(--ra-text-muted);
        margin-bottom: 2rem;
    }

/* ---- Feature grid ---- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--ra-bg-card);
    border: 1px solid var(--ra-border);
    border-left: 3px solid var(--ra-border);
    border-radius: 4px;
    padding: 1.4rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .feature-card:hover {
        border-color: var(--ra-rust);
        border-left-color: var(--ra-rust);
        box-shadow: var(--ra-glow-rust);
        transform: translateY(-2px);
    }

    .feature-card i {
        font-size: 1.4rem;
        color: var(--ra-rust);
        margin-bottom: 0.75rem;
        display: inline-block;
    }

    .feature-card h3 {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .feature-card p {
        color: var(--ra-text-muted);
        font-size: 0.88rem;
        margin-bottom: 0;
    }

/* ---- Pricing ----
   Horizontal rows rather than tall boxes (a comparison table you scan top-to-bottom, not a wall of
   competing cards), color-coded per row after Rust's own building-material progression - wood,
   stone, metal, HQM, then a fifth "beyond the tech tree" row for custom/enterprise inquiries. Each
   tier class sets --tier-color once; every other rule in this block just reads that variable, so
   adding a tier later is a one-line addition. */

.pricing-table {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-row {
    display: grid;
    grid-template-columns: 11rem 8rem 1fr auto;
    align-items: center;
    gap: 1.5rem;
    background: var(--ra-bg-card);
    border: 1px solid var(--ra-border);
    border-left: 4px solid var(--tier-color, var(--ra-border));
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
}

.pricing-row.featured {
    box-shadow: var(--ra-glow-rust);
}

.pricing-row-tier {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tier-swatch {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--tier-color, var(--ra-border));
    flex-shrink: 0;
}

.pricing-tier {
    font-family: var(--ra-font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.15rem;
    color: var(--ra-text);
    line-height: 1;
}

.pricing-amount {
    font-family: var(--ra-font-display);
    font-size: 1.6rem;
    color: var(--tier-color, var(--ra-rust-bright));
    white-space: nowrap;
}

.pricing-period {
    font-size: 0.8rem;
    color: var(--ra-text-dim);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    /* A grid item won't shrink below its content's intrinsic width by default (min-width: auto) -
       without this, a row of nowrap <li>s just pushes the 1fr track (and the whole row) wider
       than the container instead of wrapping, causing horizontal overflow at moderate widths. */
    min-width: 0;
}

    .pricing-features li {
        color: var(--ra-text-muted);
        font-size: 0.85rem;
        white-space: nowrap;
    }

        .pricing-features li i {
            color: var(--tier-color, var(--ra-green));
            margin-right: 0.4rem;
        }

.pricing-row-cta {
    justify-self: end;
}

@media (max-width: 860px) {
    .pricing-row {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 0.75rem;
    }

    .pricing-row-cta {
        justify-self: start;
        width: 100%;
    }

        .pricing-row-cta .btn {
            width: 100%;
        }

    .pricing-features {
        white-space: normal;
    }

        .pricing-features li {
            white-space: normal;
        }
}

/* Material-tier accent colors - deliberately distinct from the brand's rust/cyan/magenta accents,
   evoking the actual materials rather than the RustArchon palette itself. Raid-Proof (the custom-
   inquiry tier) uses the brand rust color instead of a "material," marking it as the outlier row it
   is - contact-based, not self-serve. */
.tier-wood { --tier-color: #b08553; }
.tier-stone { --tier-color: #9a988c; }
.tier-metal { --tier-color: #7e94a6; }
.tier-hqm { --tier-color: #4fc3d9; }
.tier-raidproof { --tier-color: var(--ra-rust); }

/* ---- Contact ---- */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.contact-card {
    background: var(--ra-bg-card);
    border: 1px solid var(--ra-border);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
}

    .contact-card i {
        font-size: 2rem;
        color: var(--ra-cyan);
        margin-bottom: 1rem;
        display: inline-block;
    }

    .contact-card h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .contact-card a {
        word-break: break-word;
    }

/* ==========================================================================
   Server console page
   ========================================================================== */

.status-badge {
    font-family: var(--ra-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
    border-radius: 3px;
}

.status-pending {
    background: rgba(255, 210, 26, 0.12);
    color: var(--ra-yellow);
    border: 1px solid var(--ra-yellow);
}

.status-connected {
    background: rgba(57, 255, 106, 0.12);
    color: var(--ra-green);
    border: 1px solid var(--ra-green);
}

.status-disconnected {
    background: rgba(255, 47, 78, 0.12);
    color: var(--ra-red);
    border: 1px solid var(--ra-red);
}

/* The Logs tab's badge for a diagnostic entry with no RconConnectionStatus (see
   ServerDetail.razor's LevelBadgeClass) - Info level only, since Warning/Error already reuse
   status-pending/status-disconnected above. */
.status-info {
    background: rgba(22, 242, 255, 0.12);
    color: var(--ra-cyan);
    border: 1px solid var(--ra-cyan);
}

.console-tabs {
    border-bottom-color: var(--ra-border);
}

    .console-tabs .nav-link {
        font-family: var(--ra-font-display);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.85rem;
        color: var(--ra-text-muted);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
    }

        .console-tabs .nav-link:hover {
            color: var(--ra-cyan);
        }

        .console-tabs .nav-link.active {
            color: var(--ra-rust-bright);
            border-bottom-color: var(--ra-rust);
            text-shadow: var(--ra-glow-rust);
        }

.console-pane {
    background: var(--ra-bg-input);
    border: 1px solid var(--ra-border);
    border-radius: 4px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.console-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ra-text-muted);
}

    .console-empty i {
        font-size: 2.5rem;
        color: var(--ra-border);
        margin-bottom: 1rem;
    }

    .console-empty p {
        margin-bottom: 0.4rem;
        max-width: 420px;
    }

.console-input {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--ra-border);
}

    .console-input .form-control {
        font-family: var(--ra-font-mono);
    }

/* ---- Live console/chat log (ServerDetail.razor) ---- */

.console-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ra-border);
}

    .console-toolbar label {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        font-size: 0.75rem;
        color: var(--ra-text-dim);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .console-toolbar select,
    .console-toolbar input {
        min-width: 8.5rem;
    }

    .console-toolbar button {
        white-space: nowrap;
    }

.console-log {
    flex: 1;
    overflow-y: auto;
    max-height: 420px;
    padding: 0.75rem 1rem;
    font-family: var(--ra-font-mono);
    font-size: 0.85rem;
}

.console-line {
    display: flex;
    gap: 0.75rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--ra-border-soft);
}

.console-line-time {
    flex-shrink: 0;
    color: var(--ra-text-dim);
}

.console-line-message {
    color: var(--ra-text);
    word-break: break-word;
    white-space: pre-wrap;
}

/* Site-admin-only "unfiltered" toggle and the badges it makes visible - see ServerDetail.razor's
   Console tab remarks (RconEventDto.Interactive/Direction). Only ever rendered for a site admin
   currently acting as this tenant, so there's no need to hide these from ordinary users in CSS on
   top of the server never sending them the rows in the first place. */
.console-unfiltered-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--ra-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.console-line-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-family: var(--ra-font-display);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    height: fit-content;
}

.console-line-badge-sent {
    background: rgba(22, 242, 255, 0.12);
    color: var(--ra-cyan);
    border: 1px solid var(--ra-cyan);
}

.console-line-badge-background {
    background: rgba(255, 210, 26, 0.12);
    color: var(--ra-yellow);
    border: 1px solid var(--ra-yellow);
}

.console-line-background {
    background: rgba(255, 210, 26, 0.05);
}

.chat-username {
    font-weight: 600;
}

.players-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .players-columns {
        grid-template-columns: 1fr;
    }
}

.players-current,
.players-kills {
    min-width: 0;
}

.players-kills .console-log {
    max-height: 480px;
    border: 1px solid var(--ra-border);
    border-radius: 0.375rem;
}

.player-table {
    margin-bottom: 0;
}

.player-table code {
    font-size: 0.8rem;
}

.players-inactive {
    padding: 0 1rem 1rem;
}

.players-banlist {
    padding: 0 1rem 1rem;
}

.players-inactive .player-table {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ---- Stats tab ---- */

.stats-pane {
    padding: 1rem;
}

.server-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
}

.server-info-grid > div {
    background: var(--ra-bg-card);
    border: 1px solid var(--ra-border-soft);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

.server-info-grid dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ra-text-dim);
    margin-bottom: 0.15rem;
}

.server-info-grid dd {
    margin: 0;
    color: var(--ra-text);
    font-weight: 500;
}

/* Scrollable rather than unbounded - a flapping connection (see ConnectionLogEntry's remarks) can
   produce dozens of transitions inside the 24-hour default window. 480px, not the tighter 260px this
   used when it shared the Stats tab with the Trends charts - it has the whole Logs tab to itself now,
   same ceiling as .players-kills' own .console-log variant. */
.connection-log {
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--ra-border-soft);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background: var(--ra-bg-card);
}

.connection-log-entry {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--ra-border-soft);
    font-size: 0.85rem;
}

    .connection-log-entry:last-child {
        border-bottom: none;
    }

.connection-log-time {
    color: var(--ra-text-dim);
    font-family: var(--ra-font-mono);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.connection-log-detail {
    color: var(--ra-text-muted);
    word-break: break-word;
}

.stats-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.chart-card {
    background: var(--ra-bg-card);
    border: 1px solid var(--ra-border-soft);
    border-radius: 4px;
    padding: 0.75rem;
}

.chart-card h3 {
    color: var(--ra-text-muted);
    margin-bottom: 0.5rem;
}

.chart-wrap {
    position: relative;
    height: 220px;
}

/* ---- Logs tab ---- */

.logs-pane {
    padding: 1rem;
}

/* ---- Control tab ---- */

.control-pane {
    padding: 1rem;
}

/* auto-fit + align-items: start, same idea as .stats-charts - cards flow as many-per-row as the
   viewport allows (no more single-column stack wasting the rest of the width), and each card sizes
   to its own content height instead of stretching to match the tallest card in its row (these cards'
   content heights vary a lot - World Reset is one row, Weather is three). A narrower 220px floor than
   .stats-charts' 280px on purpose - these cards hold a handful of small buttons each, not a canvas,
   so they stay useful much narrower and packing more of them per row is exactly the point (see the
   .control-card .btn override below for why the buttons themselves can afford to shrink too). */
.control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.control-card {
    background: var(--ra-bg-card);
    border: 1px solid var(--ra-border-soft);
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.control-card h2 {
    margin-bottom: 0;
    font-size: 0.75rem;
}

.control-card-hint {
    color: var(--ra-text-muted);
    font-size: 0.75rem;
    margin: 0;
}

/* Every button/input inside a Control card, sized down from the app's normal .btn - normal size
   makes sense for a standalone action button, but these cards are packing 2-3 tiny on/off/auto
   toggles per row, many rows per card, many cards per screen. Scoped to .control-card rather than
   changing .btn/.btn-sm globally, since nothing else in the app has this many controls this dense. */
.control-card .btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
}

.control-card .form-control-sm {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
}

/* A label + control row, e.g. Weather's Rain/Fog/Clouds or World's Radiation/Animal Move/Animal AI.
   Grid, not flex, so the label column is a fixed width and every row's control column starts at the
   same x position - flex would instead size each label to its own text, leaving "Radiation" and
   "Animal AI" left-aligned but their button groups starting at different offsets. */
.control-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: 0.5rem;
}

.control-row-label {
    color: var(--ra-text-muted);
    font-size: 0.75rem;
}

/* Admin/Plans.razor - the swatch + Name in the grid's Name column. inline-flex + nowrap keeps the two
   glued together on one line even as the table narrows, instead of the table's normal text wrapping
   splitting them onto separate lines once the cell runs out of room. */
.plan-name-cell {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.plan-color-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Quill editor (Admin/EmailTemplates* - the email body WYSIWYG) - forced light
   regardless of --bs-theme. An email always renders on a light background in the
   recipient's own mail client, so the editor representing that content should look
   like paper too; left to inherit the app's own dark-mode text/background, the
   toolbar and typed text render at near-zero contrast against the white editor
   surface. Not a Blazor-scoped .razor.css rule: Quill inserts its toolbar as a
   plain DOM sibling of the container element, outside anything Razor rendered, so
   scoped CSS isolation can never reach it - see EmailTemplateDetail.razor's remarks.
   ========================================================================== */
.ql-toolbar.ql-snow {
    background-color: #fbf9f3;
    border-color: #d3cdb8 !important;
}

.ql-container.ql-snow {
    border-color: #d3cdb8 !important;
}

.ql-editor {
    color: #211f18;
    background-color: #ffffff;
}

.ql-editor.ql-blank::before {
    color: #8a8570;
}

.ql-snow .ql-stroke {
    stroke: #55523f;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: #55523f;
}

.ql-snow .ql-picker {
    color: #211f18;
}

.ql-snow .ql-picker-options {
    background-color: #fbf9f3;
    border-color: #d3cdb8 !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover {
    color: #c8500e;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: #c8500e;
}