/**
 * Filename: app.css
 * Purpose:  Crown Roster — Kingshot-style dark theme, mobile-first
 * Author:   Searchex Training
 * Date:     2026-08-12
 * Changes:  Full visual redesign — dark navy + gold palette, mobile-first
 */

/* ── Design tokens ───────────────────────────────────────────────────────── */

:root {
    /* Backgrounds */
    --cr-bg:          #07091a;
    --cr-surface:     #0e1428;
    --cr-surface-2:   #151d35;
    --cr-surface-3:   #1c2640;

    /* Borders */
    --cr-border:      #1f2d4a;
    --cr-border-lt:   #2a3d60;

    /* Gold accent — primary CTA, headings, highlights */
    --cr-gold:        #c9901f;
    --cr-gold-lt:     #e5b849;
    --cr-gold-pale:   #f2d07a;
    --cr-gold-bg:     rgba(201,144,31,.12);

    /* Blue — links, secondary actions */
    --cr-blue:        #4a9eff;
    --cr-blue-dk:     #2563eb;

    /* Text */
    --cr-text:        #ddd5c0;
    --cr-text-strong: #f0e8d5;
    --cr-text-muted:  #7a8ba8;
    --cr-text-dim:    #3a4a6a;

    /* Status */
    --cr-danger:      #e53e3e;
    --cr-danger-dk:   #c53030;
    --cr-success:     #22c55e;
    --cr-warning:     #f59e0b;

    /* Slot timeline states */
    --slot-avail-bg:  #071a0f;
    --slot-avail-bd:  #22c55e;
    --slot-amber-bg:  #1a1005;
    --slot-amber-bd:  #d97706;
    --slot-occ-bg:    #1a2235;
    --slot-sel-bg:    #0d1f3d;
    --slot-sel-bd:    var(--cr-blue);

    /* Typography */
    --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Shape */
    --radius:    6px;
    --radius-lg: 12px;
    --shadow:    0 4px 20px rgba(0,0,0,.5);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.4);

    /* Backwards-compat aliases used by older selectors */
    --colour-bg:         var(--cr-bg);
    --colour-surface:    var(--cr-surface);
    --colour-border:     var(--cr-border);
    --colour-primary:    var(--cr-gold);
    --colour-primary-dk: var(--cr-gold-dk, #a0720e);
    --colour-danger:     var(--cr-danger);
    --colour-muted:      var(--cr-text-muted);
    --colour-text:       var(--cr-text);
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    font-family: var(--font-sans);
    background: var(--cr-bg);
    color: var(--cr-text);
    line-height: 1.55;
    min-height: 100vh;
}

/* Subtle repeating texture — diagonal lines for depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 60px,
        rgba(255,255,255,.012) 60px,
        rgba(255,255,255,.012) 61px
    );
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* ── Typography ──────────────────────────────────────────────────────────── */

h1, h2, h3 {
    color: var(--cr-text-strong);
    font-weight: 700;
    letter-spacing: .02em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a {
    color: var(--cr-gold-lt);
    text-decoration: none;
}
a:hover { color: var(--cr-gold-pale); text-decoration: underline; }

p { margin-bottom: .75rem; }
p:last-child { margin-bottom: 0; }

code, .monospace {
    font-family: var(--font-mono);
    font-size: .88em;
    color: var(--cr-gold-pale);
}

.small     { font-size: .85em; }
.sep       { color: var(--cr-border-lt); margin: 0 .35rem; }
.nav-user  { color: var(--cr-gold-pale); font-size: .85rem; font-weight: 600; padding: .3rem .6rem; white-space: nowrap; margin-left: auto; }
.text-muted { color: var(--cr-text-muted); }

/* ── Inputs & selects ────────────────────────────────────────────────────── */

input, select, textarea {
    font: inherit;
    background: var(--cr-surface-2);
    color: var(--cr-text-strong);
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius);
    padding: .55rem .8rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--cr-gold);
    box-shadow: 0 0 0 3px rgba(201,144,31,.25);
}

input[type="search"] { width: auto; min-width: 10rem; }

input[type="checkbox"] {
    width: auto;
    accent-color: var(--cr-gold);
}

select option { background: var(--cr-surface-2); }

label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--cr-text-muted);
    margin-bottom: .3rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

fieldset {
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
}

legend {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cr-gold);
    padding: 0 .5rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

button {
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius);
    padding: .5rem 1rem;
    background: var(--cr-surface-2);
    color: var(--cr-text);
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

button:hover:not(:disabled) {
    background: var(--cr-surface-3);
    border-color: var(--cr-border-lt);
    color: var(--cr-text-strong);
}

button:disabled { opacity: .4; cursor: not-allowed; }

/* Gold primary button */
.btn-primary {
    background: linear-gradient(135deg, var(--cr-gold), #a0720e);
    border-color: var(--cr-gold);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 2px 8px rgba(201,144,31,.3);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--cr-gold-lt), var(--cr-gold));
    border-color: var(--cr-gold-lt);
    box-shadow: 0 4px 14px rgba(201,144,31,.45);
}

/* Small variant */
.btn-sm {
    padding: .3rem .65rem;
    font-size: .8rem;
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius);
    background: var(--cr-surface-2);
    color: var(--cr-text);
    cursor: pointer;
}
.btn-sm:hover:not(:disabled) { background: var(--cr-surface-3); }

/* Danger */
.btn-danger {
    background: var(--cr-danger);
    border-color: var(--cr-danger);
    color: #fff;
}
.btn-danger:hover:not(:disabled) {
    background: var(--cr-danger-dk);
    border-color: var(--cr-danger-dk);
}

/* Outline variant */
.btn-primary-outline {
    background: transparent;
    border-color: var(--cr-gold);
    color: var(--cr-gold-lt);
}
.btn-primary-outline:hover:not(:disabled) {
    background: var(--cr-gold-bg);
    color: var(--cr-gold-pale);
}

/* Release / icon button */
.action-release {
    padding: .15rem .4rem;
    font-size: .8em;
    border-color: transparent;
    color: var(--cr-danger);
    background: transparent;
}
.action-release:hover:not(:disabled) {
    background: rgba(229,62,62,.15);
    border-color: var(--cr-danger);
}

/* ── Site header / nav ───────────────────────────────────────────────────── */

header, .site-header {
    background: linear-gradient(180deg, var(--cr-surface) 0%, rgba(14,20,40,.95) 100%);
    border-bottom: 1px solid var(--cr-border-lt);
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Crown logo text in header */
header::before, .site-header::before {
    content: '♛ Crown Roster';
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--cr-gold);
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(201,144,31,.5);
    flex-shrink: 0;
}

header nav, .site-header nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

header nav a, .site-header nav a {
    color: var(--cr-text-muted);
    font-size: .85rem;
    font-weight: 500;
    padding: .3rem .6rem;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
}

header nav a:hover, .site-header nav a:hover {
    color: var(--cr-gold-pale);
    background: var(--cr-gold-bg);
    text-decoration: none;
}

/* Round switcher in header */
header select, .site-header select {
    background: var(--cr-surface-2);
    border-color: var(--cr-border-lt);
    color: var(--cr-text);
    padding: .3rem .6rem;
    font-size: .85rem;
    width: auto;
}

/* ── General page layout ─────────────────────────────────────────────────── */

main {
    padding: 1.25rem 1rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Welcome heading */
main h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--cr-border);
    color: var(--cr-gold-pale);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

/* ── Dashboard round table → card list on mobile ─────────────────────────── */

/* Desktop: standard table */
table:not(.roster-grid):not(.compare-table):not(.companion-table) {
    border-collapse: collapse;
    width: 100%;
    background: var(--cr-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

table:not(.roster-grid):not(.compare-table):not(.companion-table) thead th {
    background: var(--cr-surface-2);
    color: var(--cr-text-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cr-border-lt);
    text-align: left;
    white-space: nowrap;
}

table:not(.roster-grid):not(.compare-table):not(.companion-table) td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cr-border);
    vertical-align: middle;
    color: var(--cr-text);
}

table:not(.roster-grid):not(.compare-table):not(.companion-table) tr:last-child td {
    border-bottom: none;
}

table:not(.roster-grid):not(.compare-table):not(.companion-table) tbody tr:hover td {
    background: var(--cr-surface-2);
}

/* Actions column links */
table td a {
    color: var(--cr-gold-lt);
    font-size: .85rem;
    font-weight: 500;
    padding: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color .15s, background .15s;
}
table td a:hover {
    border-color: var(--cr-gold);
    background: var(--cr-gold-bg);
    text-decoration: none;
}


/* ── Status chips ────────────────────────────────────────────────────────── */

.status-chip {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 100px;
    font-size: .75em;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .03em;
}

.chip-unallocated { background: rgba(122,139,168,.15); color: var(--cr-text-muted); border: 1px solid var(--cr-border-lt); }
.chip-engine      { background: rgba(74,158,255,.12);  color: #7ec4ff;  border: 1px dashed #3b82f6; }
.chip-manual      { background: rgba(34,197,94,.12);   color: #4ade80;  border: 1px solid #22c55e; }
.chip-locked      { background: rgba(201,144,31,.15);  color: var(--cr-gold-lt); border: 1px solid var(--cr-gold); }

.chip-channel-in_game  { background: rgba(122,139,168,.15); color: var(--cr-text-muted); }
.chip-channel-telegram { background: rgba(74,158,255,.15);  color: #7ec4ff; }
.chip-channel-discord  { background: rgba(114,137,218,.2);  color: #a5b4fc; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

form p {
    margin-bottom: 1.1rem;
}

form .card, form > fieldset {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

form button[type="submit"] {
    width: 100%;
    padding: .75rem;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--cr-gold), #a0720e);
    border-color: var(--cr-gold);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 2px 10px rgba(201,144,31,.35);
    margin-top: .5rem;
}
form button[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--cr-gold-lt), var(--cr-gold));
}

/* Error message */
form > p strong {
    color: var(--cr-danger);
}

/* ── Console layout ──────────────────────────────────────────────────────── */

.page-console {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.page-console .site-header { flex-shrink: 0; }

.console-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Tabs */

.console-tabs {
    display: flex;
    border-bottom: 1px solid var(--cr-border-lt);
    background: var(--cr-surface);
    flex-shrink: 0;
    padding: 4px 4px 0;
    scrollbar-width: none;
}
.console-tabs::-webkit-scrollbar { display: none; }

.console-tabs .tab {
    border: 2px solid #2a4a7a;
    border-radius: 8px 8px 0 0;
    padding: .65rem 1.4rem;
    background: #0d1828;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    color: #8aaad0;
    line-height: 1.2;
    margin-bottom: 0;
    margin-right: 4px;
    flex-shrink: 0;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.console-tabs .tab:hover {
    background: #152238;
    color: #c0d8f0;
    border-color: #4a7aaa;
}

.console-tabs .tab.active {
    background: #111e3a;
    border-color: var(--cr-gold);
    color: var(--cr-gold-pale);
    font-weight: 700;
    box-shadow: 0 -3px 10px #c9a84c33;
}

.tab-role  { font-size: .7em; color: var(--cr-text-dim); }
.tab-badge {
    font-size: .7em;
    background: var(--cr-surface-2);
    border: 1px solid var(--cr-border-lt);
    border-radius: 10px;
    padding: 0 .4rem;
    color: var(--cr-text-muted);
}

/* Toolbar */

.console-toolbar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    background: var(--cr-surface);
    border-bottom: 1px solid var(--cr-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.filter-chips { display: flex; gap: .25rem; }

.filter-chips .chip {
    padding: .2rem .65rem;
    border-radius: 100px;
    font-size: .78em;
    font-weight: 600;
    border: 1px solid var(--cr-border-lt);
    background: transparent;
    color: var(--cr-text-muted);
}

.filter-chips .chip.active {
    background: var(--cr-gold-bg);
    border-color: var(--cr-gold);
    color: var(--cr-gold-lt);
}

.toolbar-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }

/* Section header bar */

.console-section-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: #0d1f3c;
    border-bottom: 2px solid var(--cr-border);
}

.section-bar-left {
    width: 58%;
    min-width: 0;
    padding: .45rem 1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c9a84c;
    border-right: 1px solid var(--cr-border);
}

.section-bar-right {
    width: 42%;
    min-width: 0;
    padding: .45rem 1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7baee8;
}

/* Body panes */

.console-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.pane-left {
    flex: 0 0 58%;
    overflow-y: auto;
    border-right: 1px solid var(--cr-border);
}

.pane-right {
    flex: 0 0 42%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Footer */

.console-footer {
    background: var(--cr-surface);
    border-top: 1px solid var(--cr-border);
    padding: .35rem .75rem;
    font-size: .8em;
    color: var(--cr-text-muted);
    flex-shrink: 0;
}

.no-round {
    padding: 2rem;
    color: var(--cr-text-muted);
}

/* ── Roster grid table ───────────────────────────────────────────────────── */

.roster-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: .83em;
}

.roster-grid th {
    background: var(--cr-surface-2);
    position: sticky;
    top: 0;
    padding: .45rem .5rem;
    text-align: left;
    border-bottom: 1px solid var(--cr-border-lt);
    color: var(--cr-text-muted);
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    z-index: 1;
}

.roster-grid td {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--cr-border);
    vertical-align: middle;
    color: var(--cr-text);
}

.player-row { cursor: pointer; transition: background .1s; }
.player-row:hover { background: var(--cr-surface-2); }
.player-row.row-selected { background: rgba(74,158,255,.12); }
.player-row.row-engine td:first-child { border-left: 3px dashed var(--cr-text-dim); }

.col-name  { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-num   { text-align: right; font-family: var(--font-mono); }
.col-avail { font-size: .78em; color: var(--cr-text-muted); max-width: 8rem; }
.col-slot  { font-family: var(--font-mono); }
.col-pref  { font-size: .8em; }

.copy-target { cursor: copy; }
.copy-target.copied { background: rgba(34,197,94,.2); border-radius: 2px; }

.loading-row, .empty-row {
    text-align: center;
    color: var(--cr-text-muted);
    padding: 1.5rem !important;
}

/* ── Timeline / slot grid ─────────────────────────────────────────────────── */

.timeline-header {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--cr-border);
    background: var(--cr-surface);
    flex-shrink: 0;
}

.timeline-header h2 { font-size: .9em; font-weight: 700; color: var(--cr-text-strong); }
.timeline-hint { font-size: .75em; color: var(--cr-text-muted); margin-top: .25rem; padding-left: 1.2em; }
.timeline-hint li { margin-bottom: .1rem; line-height: 1.4; }

.slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: .5rem;
    background: var(--cr-bg);
}

.slot-card {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius);
    padding: .3rem .4rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-height: 3.8rem;
    transition: filter .1s;
    font-size: .75em;
}
.slot-card:hover { filter: brightness(1.15); }

.slot-time { font-family: var(--font-mono); font-weight: 700; font-size: .88em; color: var(--cr-text-strong); }
.slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.slot-rank { color: var(--cr-text-muted); font-size: .82em; }
.slot-empty { color: var(--cr-text-dim); }

/* Slot colour states */
.slot-green    { background: #071a0f; border-color: #22c55e; }
.slot-yellow   { background: #1a1400; border-color: #c9a84c; }
.slot-purple   { background: #130a20; border-color: #7c5bc9; }
.slot-red      { background: #200505; border-color: #c0392b; }
.slot-amber    { background: var(--slot-amber-bg); border-color: var(--slot-amber-bd); }
.slot-occupied { background: var(--slot-occ-bg); }
.slot-selected { background: var(--slot-sel-bg); border: 2px solid var(--slot-sel-bd); box-shadow: 0 0 0 2px rgba(74,158,255,.2); }
.slot-hatched  {
    background: repeating-linear-gradient(
        45deg,
        var(--cr-surface),
        var(--cr-surface) 5px,
        var(--cr-surface-2) 5px,
        var(--cr-surface-2) 10px
    );
}

/* Provenance accent */
.prov-engine { border-left: 3px dashed var(--cr-text-dim); }
.prov-manual { border-left: 3px solid var(--cr-gold); }

/* ── Dialogs (desktop) / bottom sheets (mobile) ───────────────────────────── */

dialog {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow);
    color: var(--cr-text);
}

dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }

dialog h3 {
    margin-bottom: .75rem;
    font-size: 1.1em;
    color: var(--cr-gold-pale);
}
dialog p  { margin-bottom: .75rem; font-size: .9em; }
.dialog-sub { color: var(--cr-text-muted); }

.dialog-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85em;
    margin-bottom: .5rem;
}
.compare-table th, .compare-table td {
    padding: .35rem .5rem;
    border: 1px solid var(--cr-border-lt);
    text-align: left;
}
.compare-table th {
    background: var(--cr-surface-2);
    color: var(--cr-text-muted);
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.gap-list {
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius);
    margin-bottom: .5rem;
    background: var(--cr-bg);
}
.gap-list li { border-bottom: 1px solid var(--cr-border); }
.gap-list li:last-child { border-bottom: none; }

.gap-pick {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 0;
    padding: .55rem .75rem;
    background: transparent;
    font-size: .85em;
    color: var(--cr-text);
}
.gap-pick:hover { background: var(--cr-surface-2); color: var(--cr-gold-pale); }

#reset-confirm-input { display: block; width: 100%; margin-top: .5rem; }

/* ── Mobile segmented view toggle ────────────────────────────────────────── */

.mobile-view-toggle {
    display: none;
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.mobile-seg-btn {
    border: none;
    border-radius: 0;
    padding: .3rem .9rem;
    background: var(--cr-surface-2);
    font-size: .82em;
    font-weight: 600;
    color: var(--cr-text-muted);
}

.mobile-seg-btn + .mobile-seg-btn { border-left: 1px solid var(--cr-border-lt); }

.mobile-seg-btn.active {
    background: var(--cr-gold);
    color: #fff;
}

.mobile-seg-btn:hover:not(.active):not(:disabled) {
    background: var(--cr-surface-3);
    color: var(--cr-text);
}

/* ── Mobile breakpoint ───────────────────────────────────────────────────── */

@media (max-width: 768px) {

    html { font-size: 14px; }

    .mobile-view-toggle { display: flex; }

    .console-body { flex-direction: column; }

    .pane-left {
        flex: 1;
        border-right: none;
        border-bottom: 1px solid var(--cr-border);
    }
    .pane-right { flex: 1; }

    #console-root[data-mobile-view="list"]     .pane-right { display: none; }
    #console-root[data-mobile-view="timeline"] .pane-left  { display: none; }

    .console-toolbar { gap: .35rem; padding: .4rem .5rem; }
    .toolbar-actions { width: 100%; margin-left: 0; justify-content: flex-start; }

    /* Bottom sheets */
    dialog {
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        max-width: 100%;
        width: 100%;
        max-height: 80dvh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        overscroll-behavior: contain;
    }

    .slot-grid { grid-template-columns: repeat(3, 1fr); }

    .col-avail, .col-pref { display: none; }

    /* Stacked table layout on small screens */
    table:not(.roster-grid):not(.compare-table):not(.companion-table) thead { display: none; }

    table:not(.roster-grid):not(.compare-table):not(.companion-table) tr {
        display: block;
        background: var(--cr-surface);
        border: 1px solid var(--cr-border-lt);
        border-radius: var(--radius-lg);
        margin-bottom: .75rem;
        padding: .75rem;
    }

    table:not(.roster-grid):not(.compare-table):not(.companion-table) td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--cr-border);
        padding: .4rem .25rem;
        font-size: .88rem;
    }

    table:not(.roster-grid):not(.compare-table):not(.companion-table) tr td:last-child {
        border-bottom: none;
    }

    table:not(.roster-grid):not(.compare-table):not(.companion-table) td::before {
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--cr-text-muted);
        flex-shrink: 0;
        margin-right: 1rem;
    }
}

/* ── Notifications page ──────────────────────────────────────────────────── */

.row-notified { opacity: .55; }

/* ── Entry companion ─────────────────────────────────────────────────────── */

.page-companion { background: var(--cr-bg); }

.companion-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.companion-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--cr-border-lt);
    padding-bottom: .75rem;
}
.companion-header h1 { font-size: 1.4rem; margin: 0; }

.companion-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--cr-text-muted);
}
.companion-round { font-weight: 600; color: var(--cr-gold-lt); }
.companion-progress { color: var(--cr-text-muted); }
.companion-empty { margin: 2rem 0; color: var(--cr-text-muted); }
.companion-section { margin-bottom: 2rem; }

.companion-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    background: var(--cr-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.companion-table th {
    background: var(--cr-surface-2);
    color: var(--cr-text-muted);
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--cr-border-lt);
    text-align: left;
    position: sticky;
    top: 0;
}

.companion-table td {
    padding: .45rem .7rem;
    border-bottom: 1px solid var(--cr-border);
    text-align: left;
}

.day-separator td {
    background: var(--cr-surface-2);
    font-weight: 700;
    font-size: .78rem;
    color: var(--cr-gold);
    padding: .55rem .7rem .3rem;
    border-bottom: 1px solid var(--cr-border-lt);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.alloc-row { transition: background .1s; }
.alloc-row:hover { background: var(--cr-surface-2); }
.alloc-row.row-ticked { opacity: .45; }

.col-tick { width: 44px; text-align: center; }

.tick-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--cr-border-lt);
    background: var(--cr-surface-2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}
.tick-btn:hover:not(:disabled) { border-color: var(--cr-gold); }
.tick-btn.ticked {
    background: var(--cr-success);
    border-color: var(--cr-success);
    color: #fff;
}

.col-slot   { font-family: var(--font-mono); font-size: .8rem; color: var(--cr-text-muted); }
.col-gameid { font-family: var(--font-mono); font-size: .8rem; color: var(--cr-text-muted); }

/* Delta section */
.companion-deltas {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.deltas-header { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.deltas-header h2 { font-size: 1rem; margin: 0; }
.delta-row.row-acked { opacity: .4; }

@media (max-width: 600px) {
    .companion-table .col-gameid { display: none; }
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */

.how-it-works {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: 8px;
    padding: .6rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .9em;
}
.how-it-works > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cr-gold);
    user-select: none;
    list-style: none;
}
.how-it-works > summary::-webkit-details-marker { display: none; }
.how-steps {
    margin: .6rem 0 .25rem 1.25rem;
    padding: 0;
    line-height: 1.7;
    color: var(--colour-text);
}
.how-steps li + li { margin-top: .15rem; }

.btn-create-round {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, var(--cr-gold), #a0720e);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: .7rem 1.4rem;
    border-radius: var(--radius);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 2px 10px rgba(201,144,31,.35);
    margin-bottom: 1.5rem;
    text-decoration: none;
}
.btn-create-round:hover {
    background: linear-gradient(135deg, var(--cr-gold-lt), var(--cr-gold));
    box-shadow: 0 4px 18px rgba(201,144,31,.5);
    text-decoration: none;
    color: #fff;
}

.no-rounds-msg {
    color: var(--cr-text-muted);
    padding: 1.5rem;
    background: var(--cr-surface);
    border: 1px dashed var(--cr-border-lt);
    border-radius: var(--radius-lg);
    text-align: center;
}

.round-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.round-card {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border-lt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s;
}
.round-card:hover { border-color: var(--cr-gold); }
.round-card--locked { border-color: rgba(201,144,31,.35); }

/* Card progress line */
.round-progress {
    font-size: .8rem;
    padding: .3rem 1.1rem .35rem;
    border-bottom: 1px solid var(--cr-border);
}
.round-progress--waiting { color: var(--colour-muted); }
.round-progress--partial { color: var(--cr-gold); }
.round-progress--done    { color: #4caf82; }

/* Card header row */
.round-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem .5rem;
}

.round-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cr-text-strong);
}

.round-card__status {
    font-size: .78rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 100px;
    white-space: nowrap;
    letter-spacing: .03em;
}
.status-open   { background: rgba(34,197,94,.12);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.status-locked { background: rgba(201,144,31,.15); color: var(--cr-gold-lt); border: 1px solid rgba(201,144,31,.4); }

/* Date pills row */
.round-card__dates {
    display: flex;
    gap: 1.5rem;
    padding: .65rem 1.1rem;
    background: var(--cr-surface-2);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cr-border);
}

.round-date {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.round-date__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cr-text-dim);
}
.round-date__value {
    font-size: .88rem;
    font-family: var(--font-mono);
    color: var(--cr-text);
}

/* Actions row */
.round-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1.1rem;
}

.round-action {
    font-size: .82rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: var(--radius);
    border: 1px solid var(--cr-border-lt);
    color: var(--cr-text);
    background: var(--cr-surface-2);
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
    white-space: nowrap;
}
.round-action:hover {
    background: var(--cr-surface-3);
    border-color: var(--cr-border-lt);
    color: var(--cr-text-strong);
    text-decoration: none;
}

/* Console = gold primary */
.round-action--primary {
    background: linear-gradient(135deg, var(--cr-gold), #a0720e);
    border-color: var(--cr-gold);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    box-shadow: 0 2px 6px rgba(201,144,31,.3);
}
.round-action--primary:hover {
    background: linear-gradient(135deg, var(--cr-gold-lt), var(--cr-gold));
    color: #fff;
    box-shadow: 0 3px 10px rgba(201,144,31,.45);
}

/* Edit / Export = dimmer utility style */
.round-action--util {
    color: var(--cr-text-muted);
    border-color: var(--cr-border);
    background: transparent;
}
.round-action--util:hover {
    color: var(--cr-text);
    background: var(--cr-surface-2);
}

/* ── Field hint text ─────────────────────────────────────────────────────── */

/* Field hint text */
.field-hint {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--cr-text-muted);
    font-style: italic;
}

/* ── Login page ──────────────────────────────────────────────────────────── */

.page-login {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: url('/assets/img/frontpage_landscape.png') center center / cover no-repeat fixed;
}

@media (max-width: 768px) {
    .page-login {
        background-image: url('/assets/img/frontpage.png');
    }
}

/* Darken the bg slightly so the form reads clearly */
.page-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 18, .45);
    z-index: 0;
}

.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
}

.login-box {
    background: rgba(14, 20, 40, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(201, 144, 31, .3);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,.7);
}

.login-logo {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: .25rem;
    line-height: 1;
    color: var(--cr-gold);
    text-shadow: 0 0 20px rgba(201,144,31,.5);
}

.login-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--cr-gold-pale);
    letter-spacing: .1em;
    margin-bottom: 2rem;
}

.login-error {
    background: rgba(229,62,62,.15);
    border: 1px solid rgba(229,62,62,.4);
    color: #fc8181;
    border-radius: var(--radius);
    padding: .6rem .9rem;
    font-size: .88rem;
    margin-bottom: 1rem;
}


/* ── Importer page ───────────────────────────────────────────────────────── */

#importer-root { max-width: 780px; }

/* ── Scrollbar styling (Webkit) ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cr-bg); }
::-webkit-scrollbar-thumb { background: var(--cr-border-lt); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cr-text-dim); }