/* ==========================================================================
   Dune Wars - Tabler reskin
   Restyles Tabler/Bootstrap classes used by the existing in-game views into
   the flat, sharp desert theme. Load AFTER tabler.min.css and game.css.
   Tabler JS (modals, tabs, tooltips, dropdowns) keeps working unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] [data-bs-theme] {
    --tblr-font-sans-serif: 'Rajdhani', 'Segoe UI', sans-serif;
    --tblr-body-font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    --tblr-body-font-size: 0.95rem;
    --tblr-body-color: #f1e4cf;
    --tblr-body-color-rgb: 241, 228, 207;
    --tblr-body-bg: #0b0805;
    --tblr-body-bg-rgb: 11, 8, 5;
    --tblr-emphasis-color: #fff6e8;
    --tblr-emphasis-color-rgb: 255, 246, 232;
    --tblr-secondary-color: #b39f82;
    --tblr-secondary-color-rgb: 179, 159, 130;
    --tblr-secondary: #b39f82;
    --tblr-muted: #b39f82;
    --tblr-secondary-bg: #1f160d;
    --tblr-tertiary-bg: #18110a;
    --tblr-bg-forms: #0f0a06;
    --tblr-bg-surface: #18110a;
    --tblr-bg-surface-dark: #120d08;
    --tblr-bg-surface-secondary: #1f160d;
    --tblr-bg-surface-tertiary: #120d08;
    --tblr-active-bg: #2b1f12;
    --tblr-border-color: #33261a;
    --tblr-border-color-translucent: rgba(200, 149, 90, 0.16);
    --tblr-border-dark-color: #3d2c19;
    --tblr-border-color-active: #57412a;
    --tblr-dark-mode-border-color: #33261a;
    --tblr-dark-mode-border-color-translucent: rgba(200, 149, 90, 0.16);
    --tblr-link-color: #ffa646;
    --tblr-link-color-rgb: 255, 166, 70;
    --tblr-link-hover-color: #e6c08a;
    --tblr-link-hover-color-rgb: 230, 192, 138;
    --tblr-primary: var(--accent);
    --tblr-code-bg: #1f160d;

    --tblr-border-radius: 0;
    --tblr-border-radius-sm: 0;
    --tblr-border-radius-lg: 0;
    --tblr-border-radius-xl: 0;
    --tblr-border-radius-xxl: 0;
    --tblr-border-radius-pill: 0;
    --tblr-box-shadow-card: none;
    --tblr-box-shadow-input: none;

    /* "-lt" tinted backgrounds used in many views */
    --tblr-primary-lt: rgba(232, 134, 42, 0.14);
    --tblr-secondary-lt: #241a10;
    --tblr-success-lt: rgba(76, 217, 100, 0.12);
    --tblr-info-lt: rgba(63, 169, 255, 0.12);
    --tblr-warning-lt: rgba(232, 134, 42, 0.14);
    --tblr-danger-lt: rgba(219, 59, 44, 0.16);
    --tblr-muted-lt: #241a10;
    --tblr-dark-lt: #18110a;
    --tblr-light-lt: #2b1f12;
    --tblr-blue-lt: rgba(79, 143, 224, 0.14);
    --tblr-azure-lt: rgba(63, 169, 255, 0.12);
    --tblr-green-lt: rgba(76, 217, 100, 0.12);
    --tblr-red-lt: rgba(219, 59, 44, 0.16);
    --tblr-orange-lt: rgba(232, 134, 42, 0.14);
    --tblr-yellow-lt: rgba(224, 164, 58, 0.14);
    --tblr-purple-lt: rgba(167, 139, 214, 0.14);
}

/* No rounded corners anywhere */
.gs-body *,
.gs-body *::before,
.gs-body *::after {
    border-radius: 0 !important;
}

.gs-body {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Typography & page header
   -------------------------------------------------------------------------- */
.gs-body h1, .gs-body h2, .gs-body .h1, .gs-body .h2,
.gs-body .page-title {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    color: var(--dune-light);
}

.gs-body .page-header {
    margin: 0;
    padding: 22px 0 16px;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, var(--sand-900), transparent);
}

.gs-body .page-header .page-title {
    font-size: 1.6rem;
    font-weight: 700;
}

.gs-body .page-pretitle {
    color: var(--accent-hot);
    font-weight: 700;
    letter-spacing: 0.24em;
}

.gs-body .page-body {
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

.gs-body .text-muted,
.gs-body .text-secondary { color: var(--muted) !important; }

.gs-body hr { border-top-color: var(--line-soft); opacity: 1; }

.gs-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.gs-res):not(.gs-store):not(.gs-tab):not(.gs-panel__item):not(.gs-goal):not(.gs-logo):not(.page-link) {
    color: var(--spice-hot);
}

.gs-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.gs-res):not(.gs-store):not(.gs-tab):not(.gs-panel__item):not(.gs-goal):not(.gs-logo):not(.page-link):hover {
    color: var(--dune-light);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.gs-body .card {
    --tblr-card-bg: linear-gradient(160deg, #1c140c, #120d08);
    background: linear-gradient(160deg, #1c140c, #120d08);
    border: 1px solid var(--line-soft);
    box-shadow: none;
}

.gs-body .card-header {
    position: relative;
    background: rgba(255, 255, 255, 0.015);
    border-bottom: 1px solid var(--line-soft);
}

.gs-body .card-header::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 40px;
    height: 2px;
    background: var(--accent);
}

.gs-body .card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--dune-light);
}

.gs-body .card-subtitle { color: var(--muted); }

.gs-body .card-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--line-soft) !important;
    color: var(--text) !important;
}

.gs-body .card-sm .card-body { padding: 0.75rem 1rem; }

.gs-body .card-link { color: var(--spice-hot); }

/* --------------------------------------------------------------------------
   Buttons: flat slab with a solid bottom edge
   -------------------------------------------------------------------------- */
.gs-body .btn {
    --tblr-btn-border-radius: 0;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.06em;
    border-width: 1px;
    box-shadow: 0 3px 0 var(--btn-edge, rgba(0, 0, 0, 0.55));
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, filter 0.12s ease;
}

.gs-body .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--btn-edge, rgba(0, 0, 0, 0.55));
    filter: brightness(1.08);
}

.gs-body .btn:active:not(:disabled):not(.disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--btn-edge, rgba(0, 0, 0, 0.55));
}

.gs-body .btn:focus-visible {
    outline: 2px solid var(--ibad);
    outline-offset: 3px;
}

.gs-body .btn-close,
.gs-body .btn-link,
.gs-body .btn-ghost-primary,
.gs-body .btn-ghost-secondary,
.gs-body .btn-action {
    box-shadow: none !important;
    transform: none !important;
}

.gs-body .btn:not([class*="btn-"]),
.gs-body .btn-default {
    background: var(--sand-700);
    border-color: var(--sand-600);
    color: var(--dune-light);
    --btn-edge: #0c0805;
}

.gs-body .btn-primary {
    --tblr-btn-bg: var(--accent);
    --tblr-btn-border-color: var(--accent);
    --tblr-btn-hover-bg: var(--accent-hot);
    --tblr-btn-hover-border-color: var(--accent-hot);
    --tblr-btn-active-bg: var(--accent);
    --tblr-btn-color: #0b0805;
    --tblr-btn-hover-color: #0b0805;
    --tblr-btn-active-color: #0b0805;
    --btn-edge: var(--accent-edge);
    background: var(--accent);
    border-color: var(--accent);
    color: #0b0805;
}

.gs-body .btn-secondary {
    --btn-edge: #0c0805;
    background: var(--sand-700);
    border-color: var(--sand-600);
    color: var(--dune-light);
}

.gs-body .btn-success {
    --btn-edge: #1d6b2c;
    background: #3fbf5b;
    border-color: #3fbf5b;
    color: #04130a;
}

.gs-body .btn-danger {
    --btn-edge: var(--blood-edge);
    background: var(--blood);
    border-color: var(--blood-hot);
    color: #fff3ea;
}

.gs-body .btn-warning {
    --btn-edge: var(--spice-edge);
    background: var(--spice);
    border-color: var(--spice);
    color: #1a0e03;
}

.gs-body .btn-info,
.gs-body .btn-azure,
.gs-body .btn-blue {
    --btn-edge: var(--ibad-edge);
    background: #2f8fe0;
    border-color: #2f8fe0;
    color: #fff;
}

.gs-body [class*="btn-outline-"] {
    --btn-edge: rgba(0, 0, 0, 0.5);
    background: transparent;
}

.gs-body .btn-outline-primary { border-color: var(--accent); color: var(--accent-hot); }
.gs-body .btn-outline-primary:hover { background: var(--accent); color: #0b0805; }
.gs-body .btn-outline-secondary { border-color: var(--sand-500); color: var(--dune-light); }
.gs-body .btn-outline-secondary:hover { background: var(--sand-700); color: var(--text); }
.gs-body .btn-outline-danger { border-color: var(--blood-hot); color: #ff8a7a; }
.gs-body .btn-outline-danger:hover { background: var(--blood); color: #fff; }
.gs-body .btn-outline-success { border-color: #3fbf5b; color: #7fe394; }
.gs-body .btn-outline-success:hover { background: #3fbf5b; color: #04130a; }
.gs-body .btn-outline-warning { border-color: var(--spice); color: var(--spice-hot); }
.gs-body .btn-outline-warning:hover { background: var(--spice); color: #1a0e03; }

.gs-body .btn:disabled,
.gs-body .btn.disabled {
    opacity: 0.45;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.gs-body .table {
    --tblr-table-bg: transparent;
    --tblr-table-color: var(--text);
    --tblr-table-border-color: var(--line-soft);
    --tblr-table-hover-bg: rgba(232, 134, 42, 0.05);
    --tblr-table-striped-bg: rgba(255, 255, 255, 0.015);
    color: var(--text);
    border-color: var(--line-soft);
}

.gs-body .table thead th,
.gs-body .table > thead > tr > th,
.gs-body .card-table thead th {
    background: rgba(232, 134, 42, 0.07) !important;
    color: var(--accent-hot) !important;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line) !important;
}

.gs-body .table td,
.gs-body .table th {
    border-color: var(--line-soft);
}

.gs-body .table tbody tr:hover > * {
    background-color: rgba(232, 134, 42, 0.045);
}

/* Bootstrap row/cell variants (table-success etc.) are pale pastel by default.
   Turn them into dark tints with a coloured left edge so they fit the theme. */
.gs-body .table-success,
.gs-body .table-danger,
.gs-body .table-warning,
.gs-body .table-info,
.gs-body .table-primary,
.gs-body .table-secondary,
.gs-body .table-light,
.gs-body .table-dark {
    --tblr-table-color: var(--text);
    --tblr-table-border-color: var(--line-soft);
    --tblr-table-striped-color: var(--text);
    --tblr-table-hover-color: var(--text);
    --tblr-table-active-color: var(--text);
    color: var(--text);
}

.gs-body .table-success   { --tblr-table-bg: rgba(76, 217, 100, 0.07);  --row-edge: var(--oasis); }
.gs-body .table-danger    { --tblr-table-bg: rgba(219, 59, 44, 0.09);   --row-edge: var(--blood-hot); }
.gs-body .table-warning   { --tblr-table-bg: rgba(224, 164, 58, 0.08);  --row-edge: #e0a43a; }
.gs-body .table-info      { --tblr-table-bg: rgba(63, 169, 255, 0.07);  --row-edge: var(--ibad); }
.gs-body .table-primary   { --tblr-table-bg: var(--accent-soft);        --row-edge: var(--accent); }
.gs-body .table-secondary,
.gs-body .table-light,
.gs-body .table-dark      { --tblr-table-bg: rgba(255, 255, 255, 0.025); --row-edge: var(--sand-500); }

.gs-body tr[class*="table-"] > :first-child { box-shadow: inset 3px 0 0 var(--row-edge, transparent); }

.gs-body tr[class*="table-"] > * {
    background-color: var(--tblr-table-bg) !important;
    color: var(--text) !important;
}

.gs-body tr[class*="table-"]:hover > * { background-color: rgba(232, 134, 42, 0.07) !important; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.gs-body .form-control,
.gs-body .form-select,
.gs-body .input-group-text {
    background-color: #0f0a06;
    border: 1px solid var(--sand-600);
    border-bottom-width: 2px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.98rem;
}

.gs-body .form-control::placeholder { color: var(--faint); }

.gs-body .form-control:focus,
.gs-body .form-select:focus {
    background-color: #0f0a06;
    color: var(--text);
    border-color: var(--sand-600);
    border-bottom-color: var(--accent);
    box-shadow: 0 6px 14px -8px var(--accent);
}

.gs-body .form-select option { background: var(--sand-900); color: var(--text); }

.gs-body .input-group-text {
    color: var(--muted);
    background-color: var(--sand-800);
}

.gs-body .form-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.gs-body .form-hint { color: var(--faint); }

.gs-body .form-check-input {
    background-color: #0f0a06;
    border-color: var(--sand-500);
}

.gs-body .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.gs-body .form-switch .form-check-input { border-radius: 0 !important; }

.gs-body .form-range::-webkit-slider-thumb { background: var(--accent); }
.gs-body .form-range::-moz-range-thumb { background: var(--accent); }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.gs-body .alert {
    --tblr-alert-color: var(--text);
    background: rgba(232, 134, 42, 0.08);
    border: 0;
    border-left: 3px solid var(--spice);
    color: var(--text);
    box-shadow: none;
}

.gs-body .alert-success { background: rgba(76, 217, 100, 0.1); border-left-color: var(--oasis); }
.gs-body .alert-danger  { background: rgba(219, 59, 44, 0.14); border-left-color: var(--blood-hot); }
.gs-body .alert-info    { background: rgba(63, 169, 255, 0.1); border-left-color: var(--ibad); }
.gs-body .alert-warning { background: rgba(232, 134, 42, 0.12); border-left-color: var(--spice); }

.gs-body .alert .alert-title { font-family: var(--font-display); color: var(--dune-light); }
.gs-body .alert-icon { color: inherit; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.gs-body .badge {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.gs-body .badge.bg-primary,
.gs-body .badge-primary { background: var(--accent) !important; color: #0b0805 !important; }

/* Readable text on the solid badge colours */
.gs-body .badge.bg-success { background: #3fbf5b !important; color: #04130a !important; }
.gs-body .badge.bg-danger  { background: var(--blood-hot) !important; color: #fff3ea !important; }
.gs-body .badge.bg-warning,
.gs-body .badge.bg-yellow,
.gs-body .badge.bg-orange  { background: var(--spice) !important; color: #1a0e03 !important; }
.gs-body .badge.bg-info,
.gs-body .badge.bg-azure,
.gs-body .badge.bg-blue    { background: #2f8fe0 !important; color: #fff !important; }
.gs-body .badge.bg-secondary,
.gs-body .badge.bg-dark    { background: var(--sand-600) !important; color: var(--dune-light) !important; }

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */
.gs-body .progress {
    background: var(--sand-700);
    box-shadow: none;
}

.gs-body .progress-bar:not([class*="bg-"]) { background: var(--accent); }

/* --------------------------------------------------------------------------
   Modals & dropdowns
   -------------------------------------------------------------------------- */
.gs-body .modal-content {
    background: var(--sand-850);
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    color: var(--text);
}

.gs-body .modal-header,
.gs-body .modal-footer {
    background: rgba(255, 255, 255, 0.015) !important;
    border-color: var(--line-soft) !important;
    color: var(--text) !important;
}

.gs-body .modal-title {
    font-family: var(--font-display);
    color: var(--dune-light);
}

.gs-body .modal-status { height: 3px; background: var(--accent); }

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

.gs-body .btn-close { filter: invert(1) sepia(0.6) brightness(0.9); }

.gs-body .dropdown-menu {
    background: var(--sand-850);
    border: 1px solid var(--line);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

.gs-body .dropdown-item {
    color: var(--text);
    font-weight: 600;
}

.gs-body .dropdown-item:hover,
.gs-body .dropdown-item:focus {
    background: var(--accent-soft);
    color: var(--text);
}

.gs-body .dropdown-item i { width: 18px; color: var(--muted); }
.gs-body .dropdown-divider { border-color: var(--line-soft); }
.gs-body .dropdown-header { color: var(--faint); letter-spacing: 0.18em; text-transform: uppercase; }

.gs-body .tooltip-inner {
    background: var(--sand-700);
    color: var(--text);
    border: 1px solid var(--line);
    font-family: var(--font-body);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Tabs, list groups, pagination
   -------------------------------------------------------------------------- */
.gs-body .nav-tabs { border-bottom-color: var(--line-soft); }

.gs-body .nav-tabs .nav-link {
    color: var(--muted);
    font-weight: 700;
    border: 0;
    border-bottom: 2px solid transparent;
}

.gs-body .nav-tabs .nav-link:hover { color: var(--text); background: transparent; }

.gs-body .nav-tabs .nav-link.active {
    color: var(--text);
    background: var(--accent-soft);
    border-bottom-color: var(--accent);
}

.gs-body .nav-pills .nav-link.active { background: var(--accent); color: #0b0805; }

.gs-body .list-group-item {
    background: transparent;
    border-color: var(--line-soft);
    color: var(--text);
}

.gs-body .list-group-item-action:hover { background: var(--accent-soft); }
.gs-body .list-group-item.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.gs-body .page-link {
    background: var(--sand-850);
    border-color: var(--line-soft);
    color: var(--dune-light);
}

.gs-body .page-link:hover { background: var(--sand-700); color: var(--text); }

.gs-body .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #0b0805;
}

.gs-body .page-item.disabled .page-link { background: transparent; color: var(--faint); }

/* CodeIgniter's default pager (<ul class="pagination"><li><a>) has no Tabler classes */
.gs-body .pagination { flex-wrap: wrap; gap: 4px; margin: 0; }

.gs-body .pagination > li:not(.page-item) > a {
    display: block;
    min-width: 34px;
    padding: 6px 10px;
    text-align: center;
    font-weight: 700;
    color: var(--dune-light);
    background: var(--sand-850);
    border: 1px solid var(--line-soft);
    text-decoration: none;
}

.gs-body .pagination > li:not(.page-item) > a:hover { background: var(--sand-700); color: var(--text); }
.gs-body .pagination > li.active:not(.page-item) > a { background: var(--accent); border-color: var(--accent); color: #0b0805; }

/* --------------------------------------------------------------------------
   Misc Tabler components
   -------------------------------------------------------------------------- */
.gs-body .datagrid-title {
    color: var(--muted);
    letter-spacing: 0.16em;
}

.gs-body .empty-title { font-family: var(--font-display); color: var(--dune-light); }

.gs-body .ribbon { background: var(--accent); color: #0b0805; }

.gs-body .steps { --tblr-steps-color: var(--accent); }

/* --------------------------------------------------------------------------
   Small screens: let card headers wrap instead of overflowing the card
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .gs-body .card-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .gs-body .card-header .card-actions {
        width: 100%;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .gs-body .card-header .btn-group {
        flex-wrap: wrap;
    }

    .gs-body .page-header .page-title {
        font-size: 1.3rem;
    }
}

/* --------------------------------------------------------------------------
   Mobile cards for player tables (Battlefield-style lists)
   Usage: <table class="table mc-table">, then on each row's cells:
     .mc-name    - player name/avatar (first line)
     .mc-rank    - small value shown top-right (rank, #)
     .mc-actions - buttons, full-width bottom row
     .mc-hide    - hidden on phones
     any other cell becomes a labelled stat: add data-label="Army" etc.
   Desktop keeps the normal table.
   -------------------------------------------------------------------------- */
.gs-body .mc-table td.mc-actions { white-space: nowrap; }
.gs-body .mc-table td.mc-actions .btn-list { flex-wrap: nowrap; }

@media (max-width: 767.98px) {
    .gs-body .mc-table thead,
    .gs-body .mc-table tfoot { display: none; }

    .gs-body .mc-table,
    .gs-body .mc-table tbody { display: block; width: 100%; }

    .gs-body .mc-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 12px;
        margin-bottom: 12px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--line-soft);
        border-left: 3px solid var(--accent);
    }

    .gs-body .mc-table tbody tr > td {
        display: block;
        flex: 1 1 calc(25% - 12px);
        min-width: 64px;
        padding: 0;
        border: 0;
        background: none !important;
        text-align: left !important;
        white-space: normal;
        order: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Rows without the card cells (e.g. "no results") stay a single full-width line */
    .gs-body .mc-table tbody tr > td[colspan] { flex-basis: 100%; text-align: center !important; }

    .gs-body .mc-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 1px;
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .gs-body .mc-table td.mc-name {
        flex: 1 1 calc(100% - 90px);
        order: 0;
        overflow: visible;
    }

    .gs-body .mc-table td.mc-rank {
        flex: 0 0 auto;
        min-width: 0;
        order: 1;
        align-self: center;
        text-align: right !important;
        font-weight: 700;
        color: var(--accent-hot);
    }

    .gs-body .mc-table td.mc-actions {
        flex: 1 1 100%;
        order: 3;
        padding-top: 8px;
        border-top: 1px solid var(--line-soft);
        overflow: visible;
    }

    .gs-body .mc-table td.mc-hide { display: none; }

    .gs-body .mc-table td.mc-actions .btn-list,
    .gs-body .mc-table td.mc-actions > .d-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: stretch !important;
        gap: 6px;
    }

    .gs-body .mc-table td.mc-actions .btn-list > *,
    .gs-body .mc-table td.mc-actions > .d-flex > * {
        flex: 1 1 0;
        margin: 0 !important;
    }

    .gs-body .mc-table td.mc-actions .btn {
        width: 100%;
        min-height: 40px;
    }

    .gs-body .mc-table td.mc-actions .btn-icon {
        background: var(--sand-700);
        border: 1px solid var(--sand-600);
    }

    /* Tables in cards: let the card list sit flush */
    .gs-body .table-responsive:has(> .mc-table) { overflow: visible; }
    .gs-body .card-table.mc-table tbody tr { margin: 10px; }
}

.gs-body .text-primary { color: var(--accent-hot) !important; }
.gs-body .bg-primary { background-color: var(--accent) !important; }
.gs-body .border-primary { border-color: var(--accent) !important; }


/* --------------------------------------------------------------------------
   CKEditor 5 (notepad, message compose, any future editor)
   CKEditor's own theme is white; it reads these variables, and the ones set
   on body.gs-body win over its :root defaults. Dropdowns and the link balloon
   render in .ck-body-wrapper, which is also inside the body, so they match.
   -------------------------------------------------------------------------- */
.gs-body {
    --ck-color-base-background: var(--sand-850);
    --ck-color-base-foreground: var(--sand-700);
    --ck-color-base-border: var(--line-soft);
    --ck-color-base-text: var(--text);
    --ck-color-text: var(--text);
    --ck-color-focus-border: var(--accent);
    --ck-color-shadow-inner: transparent;
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.5);
    --ck-color-toolbar-background: var(--sand-850);
    --ck-color-toolbar-border: var(--line-soft);
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: var(--sand-700);
    --ck-color-button-default-active-background: var(--sand-700);
    --ck-color-button-on-background: var(--accent-soft);
    --ck-color-button-on-hover-background: var(--sand-700);
    --ck-color-button-on-active-background: var(--sand-700);
    --ck-color-button-on-color: var(--accent-hot);
    --ck-color-button-action-background: var(--accent);
    --ck-color-button-action-text: #0b0805;
    --ck-color-dropdown-panel-background: var(--sand-850);
    --ck-color-dropdown-panel-border: var(--line);
    --ck-color-list-background: var(--sand-850);
    --ck-color-list-button-hover-background: var(--sand-700);
    --ck-color-list-button-on-background: var(--accent-soft);
    --ck-color-list-button-on-background-focus: var(--accent-soft);
    --ck-color-list-button-on-text: var(--accent-hot);
    --ck-color-input-background: #0f0b07;
    --ck-color-input-border: var(--line);
    --ck-color-input-text: var(--text);
    --ck-color-labeled-field-label-background: var(--sand-850);
    --ck-color-panel-background: var(--sand-850);
    --ck-color-panel-border: var(--line);
    --ck-color-link-default: var(--spice-hot);
    --ck-color-tooltip-background: #000;
    --ck-color-tooltip-text: var(--text);
    --ck-color-engine-placeholder-text: var(--faint);
    --ck-border-radius: 0;
}

.gs-body .ck.ck-editor__main > .ck-editor__editable {
    background: var(--sand-850);
    color: var(--text);
    border-color: var(--line-soft);
}

.gs-body .ck.ck-editor__main > .ck-editor__editable.ck-focused { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.gs-body .ck.ck-editor__editable > .ck-placeholder::before { color: var(--faint); }
.gs-body .ck.ck-toolbar { border-color: var(--line-soft); }
.gs-body .ck-content a { color: var(--spice-hot); }
.gs-body .ck-content blockquote { border-left: 3px solid var(--accent); color: var(--muted); }
.gs-body .ck-content .table table,
.gs-body .ck-content .table td,
.gs-body .ck-content .table th { border-color: var(--line); }
.gs-body .ck-content .table th { background: var(--sand-700); }
.gs-body .ck.ck-powered-by { display: none; }

/* --------------------------------------------------------------------------
   Select2 (message recipient search and similar)
   -------------------------------------------------------------------------- */
.gs-body .select2-container--default .select2-selection--single,
.gs-body .select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 2px);
    color: var(--text);
    background: #0f0b07;
    border: 1px solid var(--line);
    border-radius: 0;
}

.gs-body .select2-container--default.select2-container--focus .select2-selection--single,
.gs-body .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent); }
.gs-body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); }
.gs-body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--faint); }
.gs-body .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--muted); }
.gs-body .select2-dropdown { color: var(--text); background: var(--sand-850); border-color: var(--line); border-radius: 0; }
.gs-body .select2-container--default .select2-search--dropdown .select2-search__field { color: var(--text); background: #0f0b07; border-color: var(--line); }
.gs-body .select2-container--default .select2-results__option { color: var(--text); }
.gs-body .select2-container--default .select2-results__option--highlighted[aria-selected],
.gs-body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { color: var(--dune-light); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.gs-body .select2-container--default .select2-results__option[aria-selected="true"],
.gs-body .select2-container--default .select2-results__option--selected { background: var(--accent-soft); }
.gs-body .select2-container--default .select2-results__message { color: var(--faint); }