/* ==================== CSS Variables ==================== */
:root {
    /* Dark-mode palette (unchanged) */
    --dm-bg: #1a1a2e;
    --dm-bg2: #16213e;
    --dm-bg3: #0f3460;
    --dm-border: #2a2a4a;
    --dm-text: #d8d8e8;
    --dm-muted: #a0a0b8;

    /* ---- Middle-earth heraldic palette ---- */
    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-body: 'Spectral', 'Iowan Old Style', Georgia, serif;

    /* Parchment canvas + surfaces (light mode) */
    --parchment: #efe6d0;
    --parchment-deep: #e6d9bb;
    --surface: #faf5e9;          /* raised card surface */
    --surface-2: #f3ead6;        /* secondary panels */
    --ink: #2e2418;              /* primary body text */
    --ink-muted: #6b5d45;        /* muted / secondary text */
    --rule: #d8c7a2;             /* hairline borders on parchment */

    /* Heraldic accents */
    --forest: #3f7d4e;           /* primary action / success-ish green */
    --forest-deep: #2f5f3b;
    --gold: #b8893b;             /* highlight / royal */
    --gold-deep: #8a6526;
    --bronze: #a86f24;           /* secondary action */
    --steel: #3a6098;            /* info / links */
    --steel-deep: #2c4a78;
    --wine: #a8342a;             /* danger / destructive */
    --wine-deep: #822018;

    /* Shell */
    --sidebar-top: #16241a;      /* deep ranger green-black */
    --sidebar-bottom: #0c160f;
    --sidebar-rail: var(--gold);
    --toprow-bg: var(--surface);
    --toprow-border: var(--rule);

    /* Dark-mode accent *text* tones — light enough to read on the
       dark canvas (used when an accent hex is applied as text color). */
    --dark-green-ink: #7fc08c;
    --dark-blue-ink: #7bb0e6;
    --dark-orange-ink: #d8a85e;
    --dark-red-ink: #e58c83;
    --dark-purple-ink: #bf9cdb;
}

/* ==================== Base Styles ==================== */
html, body {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
}

    [data-theme="dark"] html, [data-theme="dark"] body,
    html[data-theme="dark"], html[data-theme="dark"] body {
        background-color: var(--dm-bg) !important;
        color: var(--dm-text) !important;
    }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--steel);
}

[data-theme="dark"] a:not([style*="color: white"]):not([style*="color:white"]):not(.nav-link):not(.navbar-brand) {
    color: #64b5f6 !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--forest);
    border-color: var(--forest-deep);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--forest-deep);
        border-color: var(--forest-deep);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

[data-theme="dark"] .content {
    background-color: var(--dm-bg) !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

code {
    color: #c02d76;
}

/* ==================== Blazor UI ==================== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    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;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ==================== Loading ==================== */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #d8c7a2;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #b8893b;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* ==================== Territory labels ==================== */
.territory-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==================== Dark Mode Toggle ==================== */
.dark-mode-toggle {
    background: none;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
}

    .dark-mode-toggle:hover {
        border-color: #888;
        color: #333;
    }

[data-theme="dark"] .dark-mode-toggle {
    border-color: var(--dm-border);
    color: var(--dm-muted);
}

    [data-theme="dark"] .dark-mode-toggle:hover {
        border-color: var(--dm-muted);
        color: var(--dm-text);
    }


/* ==========================================================
   DARK MODE — NUCLEAR OVERRIDES
   ========================================================== */

/* ---- TOP ROW / HEADER BAR ---- */
[data-theme="dark"] .top-row {
    background-color: var(--dm-bg2) !important;
    border-bottom-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

    [data-theme="dark"] .top-row * {
        color: var(--dm-text) !important;
    }

/* ---- FORCE ALL DIVS IN CONTENT AREA DARK ---- */
[data-theme="dark"] article.content div {
    background-color: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
}

/* ---- TUTORIAL MODAL — override blanket dark rule ---- */
[data-theme="dark"] .tutorial-overlay {
    background: rgba(0,0,0,0.6) !important;
}

[data-theme="dark"] .tutorial-modal {
    background-color: #1e1e2e !important;
    border-color: #3a3a5a !important;
    color: #d8d8e8 !important;
}

[data-theme="dark"] .tutorial-header {
    background-color: #16162a !important;
    border-color: #3a3a5a !important;
}

    [data-theme="dark"] .tutorial-header span {
        color: #a0a0b8 !important;
    }

[data-theme="dark"] .tutorial-progress-track {
    background-color: #2a2a4a !important;
}

[data-theme="dark"] .tutorial-body {
    background-color: #1e1e2e !important;
}

    [data-theme="dark"] .tutorial-body h3 {
        color: #e8e8f8 !important;
    }

    [data-theme="dark"] .tutorial-body div {
        background-color: #1e1e2e !important;
        color: #b8b8d0 !important;
    }

[data-theme="dark"] .tutorial-footer {
    background-color: #1e1e2e !important;
    border-color: #3a3a5a !important;
}

    [data-theme="dark"] .tutorial-footer div {
        background-color: #1e1e2e !important;
    }

    [data-theme="dark"] .tutorial-footer button[style*="background: none"] {
        color: #a0a0b8 !important;
        border-color: #3a3a5a !important;
    }

/* ---- RE-APPLY SEMANTIC COLORED BACKGROUNDS (dark versions) ---- */
/* Light red / error */
[data-theme="dark"] article div[style*="background: #ffebee"],
[data-theme="dark"] article div[style*="background:#ffebee"],
[data-theme="dark"] article div[style*="background: #fce4ec"],
[data-theme="dark"] article div[style*="background:#fce4ec"] {
    background-color: #3a1015 !important;
    border-color: #5a2030 !important;
}
/* Light green / success */
[data-theme="dark"] article div[style*="background: #e8f5e9"],
[data-theme="dark"] article div[style*="background:#e8f5e9"] {
    background-color: #0a2a10 !important;
    border-color: #1a4a20 !important;
}
/* Light blue / info */
[data-theme="dark"] article div[style*="background: #e3f2fd"],
[data-theme="dark"] article div[style*="background:#e3f2fd"] {
    background-color: #0a1a3a !important;
    border-color: #1a2a5a !important;
}
/* Light orange / warning */
[data-theme="dark"] article div[style*="background: #fff3e0"],
[data-theme="dark"] article div[style*="background:#fff3e0"],
[data-theme="dark"] article div[style*="background: #fff8e1"],
[data-theme="dark"] article div[style*="background:#fff8e1"],
[data-theme="dark"] article div[style*="background: #fff3cd"],
[data-theme="dark"] article div[style*="background:#fff3cd"],
[data-theme="dark"] article div[style*="background: #fffde7"],
[data-theme="dark"] article div[style*="background:#fffde7"] {
    background-color: #2a1800 !important;
    border-color: #4a3010 !important;
}
/* Light purple */
[data-theme="dark"] article div[style*="background: #faf5ff"],
[data-theme="dark"] article div[style*="background:#faf5ff"],
[data-theme="dark"] article div[style*="background: #f3e5f5"],
[data-theme="dark"] article div[style*="background:#f3e5f5"] {
    background-color: #1a0a2a !important;
    border-color: #2a1a4a !important;
}
/* Light yellow pinned */
[data-theme="dark"] article div[style*="background: #fffff0"],
[data-theme="dark"] article div[style*="background:#fffff0"] {
    background-color: #1a1a00 !important;
}
/* Gradient backgrounds */
[data-theme="dark"] article div[style*="linear-gradient"] {
    background: linear-gradient(135deg, #2a1800, #1a1000) !important;
}

/* ---- SLIGHTLY ELEVATED DIVS (cards, panels, secondary bg) ---- */
/* Use dm-bg2 for card-like containers that previously used white or #f5f5f5 */
[data-theme="dark"] article div[style*="border-radius"] {
    background-color: var(--dm-bg2) !important;
}

/* ---- TEXT COLORS ---- */
[data-theme="dark"] article h1,
[data-theme="dark"] article h2,
[data-theme="dark"] article h3,
[data-theme="dark"] article h4,
[data-theme="dark"] article p,
[data-theme="dark"] article label,
[data-theme="dark"] article strong,
[data-theme="dark"] article small {
    color: var(--dm-text) !important;
}

    /* Override gray text on divs — these would be invisible on dark bg */
    [data-theme="dark"] article div[style*="color: #666"],
    [data-theme="dark"] article div[style*="color:#666"],
    [data-theme="dark"] article div[style*="color: #555"],
    [data-theme="dark"] article div[style*="color: #444"],
    [data-theme="dark"] article div[style*="color: #333"],
    [data-theme="dark"] article p[style*="color: #666"],
    [data-theme="dark"] article p[style*="color:#666"],
    [data-theme="dark"] article p[style*="color: #555"],
    [data-theme="dark"] article p[style*="color: #444"],
    [data-theme="dark"] article p[style*="color: #333"] {
        color: var(--dm-muted) !important;
    }

[data-theme="dark"] article span[style*="color: #666"],
[data-theme="dark"] article span[style*="color:#666"],
[data-theme="dark"] article span[style*="color: #999"],
[data-theme="dark"] article span[style*="color:#999"],
[data-theme="dark"] article span[style*="color: #555"],
[data-theme="dark"] article span[style*="color: #444"],
[data-theme="dark"] article span[style*="color: #333"],
[data-theme="dark"] article span[style*="color: #888"],
[data-theme="dark"] article span[style*="color: #bbb"],
[data-theme="dark"] article span[style*="color: #ccc"] {
    color: var(--dm-muted) !important;
}

/* ---- INPUTS & FORM ELEMENTS ---- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--dm-bg3) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

    [data-theme="dark"] input::placeholder {
        color: #707088 !important;
    }

/* ---- BUTTONS WITH LIGHT BACKGROUNDS ---- */
[data-theme="dark"] article button[style*="background: white"],
[data-theme="dark"] article button[style*="background:white"],
[data-theme="dark"] article button[style*="background: #f5f5f5"],
[data-theme="dark"] article button[style*="background:#f5f5f5"],
[data-theme="dark"] article button[style*="background: #eee"],
[data-theme="dark"] article button[style*="background:#eee"] {
    background-color: var(--dm-bg3) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] article button[style*="background: none"],
[data-theme="dark"] article button[style*="background:none"] {
    color: var(--dm-text) !important;
}

/* ---- TABLES ---- */
[data-theme="dark"] table {
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] th {
    background-color: var(--dm-bg3) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] td {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background-color: var(--dm-bg2) !important;
}

[data-theme="dark"] tr:nth-child(even) td {
    background-color: var(--dm-bg) !important;
}

/* ---- SPANS with light backgrounds (badges, tags) ---- */
[data-theme="dark"] span[style*="background: #e8f5e9"],
[data-theme="dark"] span[style*="background:#e8f5e9"] {
    background-color: #0a2a10 !important;
    color: #66bb6a !important;
}

[data-theme="dark"] span[style*="background: #ffebee"],
[data-theme="dark"] span[style*="background:#ffebee"] {
    background-color: #3a1015 !important;
    color: #ef9a9a !important;
}

[data-theme="dark"] span[style*="background: #e3f2fd"],
[data-theme="dark"] span[style*="background:#e3f2fd"] {
    background-color: #0a1a3a !important;
    color: #90caf9 !important;
}

[data-theme="dark"] span[style*="background: #fff3e0"],
[data-theme="dark"] span[style*="background:#fff3e0"] {
    background-color: #2a1800 !important;
    color: #ffb74d !important;
}

[data-theme="dark"] span[style*="background: #f3e5f5"],
[data-theme="dark"] span[style*="background:#f3e5f5"] {
    background-color: #1a0a2a !important;
    color: #ce93d8 !important;
}

/* ---- LEAFLET MAP ---- */
[data-theme="dark"] .leaflet-container {
    background: var(--dm-bg) !important;
}

[data-theme="dark"] .leaflet-control-zoom a {
    background-color: var(--dm-bg2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

    [data-theme="dark"] .leaflet-control-zoom a:hover {
        background-color: var(--dm-bg3) !important;
    }

[data-theme="dark"] .territory-label {
    color: #e0e0e0 !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.9) !important;
}

/* ---- SCROLLBAR ---- */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--dm-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 4px;
}

    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background: #3a3a5a;
    }

/* ---- LEAFLET POPUP ---- */
[data-theme="dark"] .leaflet-popup-content-wrapper {
    background-color: var(--dm-bg2) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .leaflet-popup-tip {
    background-color: var(--dm-bg2) !important;
}

/* ---- PANEL BACKDROP — must stay semi-transparent, not solid ---- */
[data-theme="dark"] article.content .panel-backdrop {
    background: rgba(0,0,0,0.5) !important;
    background-color: rgba(0,0,0,0.5) !important;
}

/* ---- BATTLE PANEL — elevated surface ---- */
[data-theme="dark"] article.content .battle-panel {
    background-color: var(--dm-bg2) !important;
}

    [data-theme="dark"] article.content .battle-panel .panel-header {
        border-bottom-color: var(--dm-border) !important;
    }

    [data-theme="dark"] article.content .battle-panel .handle-bar {
        background-color: #4a4a6a !important;
    }
    /* Panel inner divs: inherit panel bg instead of nuclear dm-bg */
    [data-theme="dark"] article.content .battle-panel > div,
    [data-theme="dark"] article.content .battle-panel .panel-body div,
    [data-theme="dark"] article.content .battle-panel .panel-handle {
        background-color: var(--dm-bg2) !important;
    }
    /* Re-apply semantic colors inside panel */
    [data-theme="dark"] article.content .battle-panel div[style*="background: #ffebee"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#ffebee"] {
        background-color: #3a1015 !important;
    }

    [data-theme="dark"] article.content .battle-panel div[style*="background: #e8f5e9"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#e8f5e9"] {
        background-color: #0a2a10 !important;
    }

    [data-theme="dark"] article.content .battle-panel div[style*="background: #e3f2fd"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#e3f2fd"] {
        background-color: #0a1a3a !important;
    }

    [data-theme="dark"] article.content .battle-panel div[style*="background: #fff3e0"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#fff3e0"],
    [data-theme="dark"] article.content .battle-panel div[style*="background: #fff8e1"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#fff8e1"] {
        background-color: #2a1800 !important;
    }

    [data-theme="dark"] article.content .battle-panel div[style*="background: #faf5ff"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#faf5ff"],
    [data-theme="dark"] article.content .battle-panel div[style*="background: #f3e5f5"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#f3e5f5"] {
        background-color: #1a0a2a !important;
    }

    [data-theme="dark"] article.content .battle-panel div[style*="background: #f8f9fa"],
    [data-theme="dark"] article.content .battle-panel div[style*="background:#f8f9fa"] {
        background-color: var(--dm-bg3) !important;
    }

    [data-theme="dark"] article.content .battle-panel span[style*="background: #ffcdd2"],
    [data-theme="dark"] article.content .battle-panel span[style*="background:#ffcdd2"] {
        background-color: #5a1520 !important;
    }

/* ---- CHAT WIDGET ---- */
[data-theme="dark"] article.content .chat-widget div[style*="background: white"],
[data-theme="dark"] article.content .chat-widget div[style*="background:#fff"] {
    background-color: var(--dm-bg2) !important;
    border-color: var(--dm-border) !important;
}

/* ==================== Upload spinner ==================== */
.upload-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #bbdefb;
    border-top: 2px solid #1565c0;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==================== Tutorial modal dark mode ==================== */
[data-theme="dark"] article.content div[style*="z-index: 2000"] > div {
    background-color: var(--dm-bg2) !important;
}

    [data-theme="dark"] article.content div[style*="z-index: 2000"] > div div[style*="background: #f8f9fa"] {
        background-color: var(--dm-bg) !important;
    }

    [data-theme="dark"] article.content div[style*="z-index: 2000"] > div div[style*="border-top: 1px solid #eee"],
    [data-theme="dark"] article.content div[style*="z-index: 2000"] > div div[style*="border-bottom: 1px solid #eee"] {
        border-color: var(--dm-border) !important;
    }

/* ==================== Profile links ==================== */
.profile-link {
    color: inherit;
    text-decoration: none;
}

    .profile-link:hover {
        text-decoration: underline;
    }

.profile-campaign-card {
    transition: background 0.15s;
}

    .profile-campaign-card:hover {
        background: #e3f2fd !important;
    }

/* ==================== Territory Editor — Mobile Responsive ==================== */

/* Tabs: horizontal scroll on small screens */
.te-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

    .te-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .te-tabs > button {
        white-space: nowrap;
        flex-shrink: 0;
    }

@media (max-width: 768px) {
    /* Header: stack title and delete button */
    .te-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

        .te-header h1 {
            font-size: 18px !important;
        }

    /* Tabs: smaller padding */
    .te-tabs > button {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* Layout: stack map above sidebar */
    .te-layout {
        flex-direction: column !important;
    }

    /* Map column: full width */
    .te-map-col {
        width: 100% !important;
    }

    /* Editor map: sensible mobile height */
    #editor-map {
        height: 50vh !important;
        min-height: 280px !important;
        max-height: none !important;
    }

    /* Sidebar: full width, limited height, below the map */
    .te-sidebar {
        width: 100% !important;
        flex-shrink: 1 !important;
        max-height: 50vh !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 480px) {
    .te-header h1 {
        font-size: 15px !important;
    }

    .te-tabs > button {
        padding: 7px 9px !important;
        font-size: 11px !important;
    }

    #editor-map {
        height: 40vh !important;
        min-height: 220px !important;
    }
}

/* Dark mode support for te-sidebar scroll */
[data-theme="dark"] .te-sidebar {
    scrollbar-color: var(--dm-border) transparent;
}

/* ==================== Campaign Cards — Mobile Responsive ==================== */

@media (max-width: 768px) {
    /* Campaign card: stack title above buttons */
    .campaign-card-inner {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Buttons row: full width, wrap to start */
    .campaign-card-actions {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* Page header: wrap title + button */
    .page-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Smaller campaign card padding */
    .campaign-card-inner h3 {
        font-size: 16px !important;
    }
}

/* ==========================================================
   MIDDLE-EARTH HERALDIC THEME
   Typography is global; parchment canvas + accent recolor are
   scoped to light mode via html:not([data-theme="dark"]) so the
   existing dark-mode override engine is never disturbed.
   ========================================================== */

/* ---- TYPOGRAPHY (global) ---- */
h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

h1, h2, h3 {
    font-weight: 600;
}

html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4 {
    color: var(--forest-deep);
}

/* ---- PARCHMENT CANVAS (light mode) ---- */
html:not([data-theme="dark"]) body {
    background-color: var(--parchment);
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.45) 0%, transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(138,101,38,0.06) 0%, transparent 45%),
        linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
    background-attachment: fixed;
}

html:not([data-theme="dark"]) .content,
html:not([data-theme="dark"]) article.content {
    background-color: transparent;
}

html:not([data-theme="dark"]) a:not(.nav-link):not(.navbar-brand) {
    color: var(--steel-deep);
}

    html:not([data-theme="dark"]) a:not(.nav-link):not(.navbar-brand):hover {
        color: var(--gold-deep);
    }

html:not([data-theme="dark"]) code {
    color: var(--wine-deep);
}

/* ---- SURFACE WARMING (light mode): cold grays -> warm vellum ---- */
html:not([data-theme="dark"]) [style*="background: #f5f5f5"],
html:not([data-theme="dark"]) [style*="background:#f5f5f5"],
html:not([data-theme="dark"]) [style*="background: #f9f9f9"],
html:not([data-theme="dark"]) [style*="background:#f9f9f9"],
html:not([data-theme="dark"]) [style*="background: #fafafa"],
html:not([data-theme="dark"]) [style*="background:#fafafa"],
html:not([data-theme="dark"]) [style*="background: #f8f9fa"],
html:not([data-theme="dark"]) [style*="background:#f8f9fa"],
html:not([data-theme="dark"]) [style*="background-color: #f5f5f5"],
html:not([data-theme="dark"]) [style*="background-color:#f5f5f5"] {
    background-color: var(--surface-2) !important;
}

html:not([data-theme="dark"]) [style*="background: white"],
html:not([data-theme="dark"]) [style*="background:white"],
html:not([data-theme="dark"]) [style*="background-color: white"],
html:not([data-theme="dark"]) [style*="background-color:white"],
html:not([data-theme="dark"]) [style*="background: #ffffff"],
html:not([data-theme="dark"]) [style*="background:#ffffff"],
html:not([data-theme="dark"]) [style*="background: #fff;"],
html:not([data-theme="dark"]) [style*="background:#fff;"] {
    background-color: var(--surface) !important;
}

/* ---- HERALDIC ACCENT RECOLOR (light mode) ----
   Property-specific + case-insensitive (i). 6-digit hexes do not
   collide; the 3-digit pale tokens (#fff3e0 etc.) are untouched. */

/* Green  #4caf50 -> forest */
html:not([data-theme="dark"]) [style*="background: #4caf50" i],
html:not([data-theme="dark"]) [style*="background:#4caf50" i] {
    background-color: var(--forest) !important;
}
html:not([data-theme="dark"]) [style*="color: #4caf50" i],
html:not([data-theme="dark"]) [style*="color:#4caf50" i] {
    color: var(--forest) !important;
}
html:not([data-theme="dark"]) [style*="solid #4caf50" i],
html:not([data-theme="dark"]) [style*="border-color: #4caf50" i] {
    border-color: var(--forest) !important;
}

/* Blue  #2196f3 -> steel */
html:not([data-theme="dark"]) [style*="background: #2196f3" i],
html:not([data-theme="dark"]) [style*="background:#2196f3" i] {
    background-color: var(--steel) !important;
}
html:not([data-theme="dark"]) [style*="color: #2196f3" i],
html:not([data-theme="dark"]) [style*="color:#2196f3" i] {
    color: var(--steel) !important;
}
html:not([data-theme="dark"]) [style*="solid #2196f3" i],
html:not([data-theme="dark"]) [style*="border-color: #2196f3" i] {
    border-color: var(--steel) !important;
}

/* Red  #f44336 -> wine */
html:not([data-theme="dark"]) [style*="background: #f44336" i],
html:not([data-theme="dark"]) [style*="background:#f44336" i] {
    background-color: var(--wine) !important;
}
html:not([data-theme="dark"]) [style*="color: #f44336" i],
html:not([data-theme="dark"]) [style*="color:#f44336" i] {
    color: var(--wine) !important;
}
html:not([data-theme="dark"]) [style*="solid #f44336" i],
html:not([data-theme="dark"]) [style*="border-color: #f44336" i] {
    border-color: var(--wine) !important;
}

/* Orange  #ff9800 -> bronze */
html:not([data-theme="dark"]) [style*="background: #ff9800" i],
html:not([data-theme="dark"]) [style*="background:#ff9800" i] {
    background-color: var(--bronze) !important;
}
html:not([data-theme="dark"]) [style*="color: #ff9800" i],
html:not([data-theme="dark"]) [style*="color:#ff9800" i] {
    color: var(--bronze) !important;
}
html:not([data-theme="dark"]) [style*="solid #ff9800" i],
html:not([data-theme="dark"]) [style*="border-color: #ff9800" i] {
    border-color: var(--bronze) !important;
}

/* Purple  #9c27b0 -> heraldic violet */
html:not([data-theme="dark"]) [style*="background: #9c27b0" i],
html:not([data-theme="dark"]) [style*="background:#9c27b0" i] {
    background-color: #6d4c91 !important;
}
html:not([data-theme="dark"]) [style*="color: #9c27b0" i],
html:not([data-theme="dark"]) [style*="color:#9c27b0" i] {
    color: #6d4c91 !important;
}

/* ---- CONTROLS POLISH ---- */
.btn {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: 5px;
}

html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) .form-control {
    background-color: var(--surface);
    border-color: var(--rule);
    color: var(--ink);
}

    html:not([data-theme="dark"]) input:focus,
    html:not([data-theme="dark"]) select:focus,
    html:not([data-theme="dark"]) textarea:focus,
    html:not([data-theme="dark"]) .form-control:focus {
        border-color: var(--forest);
        box-shadow: 0 0 0 0.18rem rgba(63,125,78,0.22);
        outline: none;
    }

/* Tables on parchment */
html:not([data-theme="dark"]) th {
    background-color: var(--surface-2);
    color: var(--forest-deep);
    border-color: var(--rule);
    font-family: var(--font-display);
    font-size: 0.92em;
    letter-spacing: 0.02em;
}

html:not([data-theme="dark"]) td {
    border-color: var(--rule);
}

/* Heraldic focus ring (light mode) */
html:not([data-theme="dark"]) .btn:focus,
html:not([data-theme="dark"]) .btn:active:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--gold);
}

/* ==========================================================
   DARK MODE — HERALDIC ACCENT RECOLOR
   The light-mode recolor above is scoped to light mode, so in
   dark mode the bright Material accents (#4caf50, #2196f3, etc.)
   used on buttons, badges, accent text and borders stay glaring.
   Tone them down here, property-specific so text stays readable:
     • accent *background* -> deep heraldic (white text keeps contrast)
     • accent *text*       -> light muted heraldic (visible on dark)
     • accent *border*     -> deep heraldic (subtle divider)
   Scoped to article so the always-dark sidebar stays consistent
   between light and dark themes. Case-insensitive (i) to catch
   #4CAF50 and #4caf50 alike.
   ========================================================== */

/* Green  #4caf50 -> forest */
[data-theme="dark"] article [style*="background: #4caf50" i],
[data-theme="dark"] article [style*="background:#4caf50" i] {
    background-color: var(--forest) !important;
}
[data-theme="dark"] article [style*="color: #4caf50" i],
[data-theme="dark"] article [style*="color:#4caf50" i] {
    color: var(--dark-green-ink) !important;
}
[data-theme="dark"] article [style*="solid #4caf50" i],
[data-theme="dark"] article [style*="border-color: #4caf50" i] {
    border-color: var(--forest) !important;
}

/* Blue  #2196f3 -> steel */
[data-theme="dark"] article [style*="background: #2196f3" i],
[data-theme="dark"] article [style*="background:#2196f3" i] {
    background-color: var(--steel) !important;
}
[data-theme="dark"] article [style*="color: #2196f3" i],
[data-theme="dark"] article [style*="color:#2196f3" i] {
    color: var(--dark-blue-ink) !important;
}
[data-theme="dark"] article [style*="solid #2196f3" i],
[data-theme="dark"] article [style*="border-color: #2196f3" i] {
    border-color: var(--steel) !important;
}

/* Red  #f44336 -> wine */
[data-theme="dark"] article [style*="background: #f44336" i],
[data-theme="dark"] article [style*="background:#f44336" i] {
    background-color: var(--wine) !important;
}
[data-theme="dark"] article [style*="color: #f44336" i],
[data-theme="dark"] article [style*="color:#f44336" i] {
    color: var(--dark-red-ink) !important;
}
[data-theme="dark"] article [style*="solid #f44336" i],
[data-theme="dark"] article [style*="border-color: #f44336" i] {
    border-color: var(--wine) !important;
}

/* Orange  #ff9800 -> bronze */
[data-theme="dark"] article [style*="background: #ff9800" i],
[data-theme="dark"] article [style*="background:#ff9800" i] {
    background-color: var(--bronze) !important;
}
[data-theme="dark"] article [style*="color: #ff9800" i],
[data-theme="dark"] article [style*="color:#ff9800" i] {
    color: var(--dark-orange-ink) !important;
}
[data-theme="dark"] article [style*="solid #ff9800" i],
[data-theme="dark"] article [style*="border-color: #ff9800" i] {
    border-color: var(--bronze) !important;
}

/* Purple  #9c27b0 -> heraldic violet */
[data-theme="dark"] article [style*="background: #9c27b0" i],
[data-theme="dark"] article [style*="background:#9c27b0" i] {
    background-color: #6d4c91 !important;
}
[data-theme="dark"] article [style*="color: #9c27b0" i],
[data-theme="dark"] article [style*="color:#9c27b0" i] {
    color: var(--dark-purple-ink) !important;
}
[data-theme="dark"] article [style*="solid #9c27b0" i],
[data-theme="dark"] article [style*="border-color: #9c27b0" i] {
    border-color: #6d4c91 !important;
}

/* ==========================================================
   DARK MODE — COMPREHENSIVE LEGIBILITY PASS (fix #2)
   The recolor above only handles the 5 primary Material accents
   as saturated fills. Real pages still show, in dark mode:
     (A) other SATURATED accent fills (amber pin, purple Members,
         Discord indigo, deep-orange, teal, blue-grey) — glaring;
     (B) PALE semantic fills on <button>/<a>/<span> (e.g. #fff8e1,
         #e3f2fd, #fff3e0) — the engine only darkens such fills on
         <div>, so these elements stay bright;
     (C) DARK semantic TEXT (#c62828, #1565c0, #e65100, #2e7d32,
         #7b1fa2 …) — invisible / near-invisible on the dark canvas.
   Everything is property-specific + case-insensitive (i) so text
   stays legible on whatever fill ends up behind it. Element-agnostic
   (no tag) at (0,2,1): for <div> the higher-specificity engine rules
   win (same dark families), so these effectively govern button/a/span.
   ========================================================== */

/* ---------- (A) Saturated accent FILLS -> deep heraldic ----------
   White inline text is retained; each fill holds white comfortably
   (amber uses --gold-deep ~5.3:1, the rest 6-9:1). */

/* Amber  #ffa000 / #ff8f00 / #ffb300 / #ffa726  (pinned-card button) */
[data-theme="dark"] article [style*="background: #ffa000" i],
[data-theme="dark"] article [style*="background:#ffa000" i],
[data-theme="dark"] article [style*="background: #ff8f00" i],
[data-theme="dark"] article [style*="background:#ff8f00" i],
[data-theme="dark"] article [style*="background: #ffb300" i],
[data-theme="dark"] article [style*="background:#ffb300" i],
[data-theme="dark"] article [style*="background: #ffa726" i],
[data-theme="dark"] article [style*="background:#ffa726" i] {
    background-color: var(--gold-deep) !important;
}

/* Deep orange  #e65100 / #ef6c00 / #f57c00  (fills) */
[data-theme="dark"] article [style*="background: #e65100" i],
[data-theme="dark"] article [style*="background:#e65100" i],
[data-theme="dark"] article [style*="background: #ef6c00" i],
[data-theme="dark"] article [style*="background:#ef6c00" i],
[data-theme="dark"] article [style*="background: #f57c00" i],
[data-theme="dark"] article [style*="background:#f57c00" i] {
    background-color: #8a4a14 !important;
}

/* Deep orange-red  #ff5722 */
[data-theme="dark"] article [style*="background: #ff5722" i],
[data-theme="dark"] article [style*="background:#ff5722" i] {
    background-color: #9e4a2a !important;
}

/* Purple  #7b1fa2 / #6a1b9a  (Members button) */
[data-theme="dark"] article [style*="background: #7b1fa2" i],
[data-theme="dark"] article [style*="background:#7b1fa2" i],
[data-theme="dark"] article [style*="background: #6a1b9a" i],
[data-theme="dark"] article [style*="background:#6a1b9a" i] {
    background-color: #5a3d78 !important;
}

/* Discord indigo  #5865f2 / #4f46e5 */
[data-theme="dark"] article [style*="background: #5865f2" i],
[data-theme="dark"] article [style*="background:#5865f2" i],
[data-theme="dark"] article [style*="background: #4f46e5" i],
[data-theme="dark"] article [style*="background:#4f46e5" i] {
    background-color: #4350b0 !important;
}

/* Indigo  #3f51b5 */
[data-theme="dark"] article [style*="background: #3f51b5" i],
[data-theme="dark"] article [style*="background:#3f51b5" i] {
    background-color: var(--steel-deep) !important;
}

/* Teal  #00897b / #009688 */
[data-theme="dark"] article [style*="background: #00897b" i],
[data-theme="dark"] article [style*="background:#00897b" i],
[data-theme="dark"] article [style*="background: #009688" i],
[data-theme="dark"] article [style*="background:#009688" i] {
    background-color: #2f6f66 !important;
}

/* Blue-grey  #607d8b */
[data-theme="dark"] article [style*="background: #607d8b" i],
[data-theme="dark"] article [style*="background:#607d8b" i] {
    background-color: #4e5b66 !important;
}

/* ---------- (B) Pale semantic FILLS -> dark semantic surfaces ----------
   Values mirror the engine's <div> mappings so button/a/span match
   their <div> siblings. Background only — the ink on these is a dark
   semantic colour handled in (C). */

/* orange / amber / yellow pales -> #2a1800 */
[data-theme="dark"] article [style*="background: #fff3e0" i],
[data-theme="dark"] article [style*="background:#fff3e0" i],
[data-theme="dark"] article [style*="background: #fff8e1" i],
[data-theme="dark"] article [style*="background:#fff8e1" i],
[data-theme="dark"] article [style*="background: #fff3cd" i],
[data-theme="dark"] article [style*="background:#fff3cd" i],
[data-theme="dark"] article [style*="background: #fffde7" i],
[data-theme="dark"] article [style*="background:#fffde7" i],
[data-theme="dark"] article [style*="background: #fff9c4" i],
[data-theme="dark"] article [style*="background:#fff9c4" i] {
    background-color: #2a1800 !important;
}

/* blue pales -> #0a1a3a */
[data-theme="dark"] article [style*="background: #e3f2fd" i],
[data-theme="dark"] article [style*="background:#e3f2fd" i],
[data-theme="dark"] article [style*="background: #e8eaf6" i],
[data-theme="dark"] article [style*="background:#e8eaf6" i] {
    background-color: #0a1a3a !important;
}

/* green pales -> #0a2a10 */
[data-theme="dark"] article [style*="background: #e8f5e9" i],
[data-theme="dark"] article [style*="background:#e8f5e9" i],
[data-theme="dark"] article [style*="background: #c8e6c9" i],
[data-theme="dark"] article [style*="background:#c8e6c9" i],
[data-theme="dark"] article [style*="background: #f1f8f4" i],
[data-theme="dark"] article [style*="background:#f1f8f4" i] {
    background-color: #0a2a10 !important;
}

/* red / pink pales -> #3a1015 */
[data-theme="dark"] article [style*="background: #ffebee" i],
[data-theme="dark"] article [style*="background:#ffebee" i],
[data-theme="dark"] article [style*="background: #fce4ec" i],
[data-theme="dark"] article [style*="background:#fce4ec" i],
[data-theme="dark"] article [style*="background: #ffcdd2" i],
[data-theme="dark"] article [style*="background:#ffcdd2" i],
[data-theme="dark"] article [style*="background: #fff5f5" i],
[data-theme="dark"] article [style*="background:#fff5f5" i],
[data-theme="dark"] article [style*="background: #fef1f0" i],
[data-theme="dark"] article [style*="background:#fef1f0" i] {
    background-color: #3a1015 !important;
}

/* purple pales -> #1a0a2a */
[data-theme="dark"] article [style*="background: #f3e5f5" i],
[data-theme="dark"] article [style*="background:#f3e5f5" i],
[data-theme="dark"] article [style*="background: #faf5ff" i],
[data-theme="dark"] article [style*="background:#faf5ff" i] {
    background-color: #1a0a2a !important;
}

/* ---------- (C) Dark semantic TEXT -> light, legible ink ----------
   Property-specific "color:" match (engine convention). Each ink
   clears comfortable contrast on its dark surface and the base canvas. */

/* red text */
[data-theme="dark"] article [style*="color: #c62828" i],
[data-theme="dark"] article [style*="color:#c62828" i],
[data-theme="dark"] article [style*="color: #b71c1c" i],
[data-theme="dark"] article [style*="color:#b71c1c" i],
[data-theme="dark"] article [style*="color: #d32f2f" i],
[data-theme="dark"] article [style*="color:#d32f2f" i],
[data-theme="dark"] article [style*="color: #e53935" i],
[data-theme="dark"] article [style*="color:#e53935" i] {
    color: #ef9a9a !important;
}

/* blue text */
[data-theme="dark"] article [style*="color: #1565c0" i],
[data-theme="dark"] article [style*="color:#1565c0" i],
[data-theme="dark"] article [style*="color: #1976d2" i],
[data-theme="dark"] article [style*="color:#1976d2" i],
[data-theme="dark"] article [style*="color: #0d47a1" i],
[data-theme="dark"] article [style*="color:#0d47a1" i],
[data-theme="dark"] article [style*="color: #1e88e5" i],
[data-theme="dark"] article [style*="color:#1e88e5" i] {
    color: #90caf9 !important;
}

/* green text */
[data-theme="dark"] article [style*="color: #2e7d32" i],
[data-theme="dark"] article [style*="color:#2e7d32" i],
[data-theme="dark"] article [style*="color: #388e3c" i],
[data-theme="dark"] article [style*="color:#388e3c" i],
[data-theme="dark"] article [style*="color: #43a047" i],
[data-theme="dark"] article [style*="color:#43a047" i] {
    color: #81c784 !important;
}

/* orange / amber text */
[data-theme="dark"] article [style*="color: #e65100" i],
[data-theme="dark"] article [style*="color:#e65100" i],
[data-theme="dark"] article [style*="color: #ef6c00" i],
[data-theme="dark"] article [style*="color:#ef6c00" i],
[data-theme="dark"] article [style*="color: #f57f17" i],
[data-theme="dark"] article [style*="color:#f57f17" i],
[data-theme="dark"] article [style*="color: #ff6f00" i],
[data-theme="dark"] article [style*="color:#ff6f00" i] {
    color: #ffb74d !important;
}

/* purple text */
[data-theme="dark"] article [style*="color: #7b1fa2" i],
[data-theme="dark"] article [style*="color:#7b1fa2" i],
[data-theme="dark"] article [style*="color: #6a1b9a" i],
[data-theme="dark"] article [style*="color:#6a1b9a" i],
[data-theme="dark"] article [style*="color: #8e24aa" i],
[data-theme="dark"] article [style*="color:#8e24aa" i] {
    color: #ce93d8 !important;
}

/* ---------- Bright decorative BORDERS -> muted family ---------- */
[data-theme="dark"] article [style*="solid #ffd54f" i],
[data-theme="dark"] article [style*="border-color: #ffd54f" i],
[data-theme="dark"] article [style*="solid #ffcc80" i],
[data-theme="dark"] article [style*="border-color: #ffcc80" i],
[data-theme="dark"] article [style*="solid #ffe082" i],
[data-theme="dark"] article [style*="border-color: #ffe082" i] {
    border-color: #4a3010 !important;
}
[data-theme="dark"] article [style*="solid #90caf9" i],
[data-theme="dark"] article [style*="border-color: #90caf9" i],
[data-theme="dark"] article [style*="solid #64b5f6" i],
[data-theme="dark"] article [style*="border-color: #64b5f6" i] {
    border-color: #1a2a5a !important;
}
[data-theme="dark"] article [style*="solid #a5d6a7" i],
[data-theme="dark"] article [style*="border-color: #a5d6a7" i] {
    border-color: #1a4a20 !important;
}
[data-theme="dark"] article [style*="solid #ef9a9a" i],
[data-theme="dark"] article [style*="border-color: #ef9a9a" i],
[data-theme="dark"] article [style*="solid #e57373" i],
[data-theme="dark"] article [style*="border-color: #e57373" i] {
    border-color: #5a2030 !important;
}