/* ================================================================
   SHARED THEME LAYER
   Adopts the War Monitor design language across the site.
   Link this file LAST on each page so it harmonises the global
   chrome (palette, typography, nav, buttons, inputs, tables)
   while leaving each page's own layout rules intact.
================================================================ */

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

:root {
    /* War Monitor palette (canonical names) */
    --primary:       #f7941d;
    --primary-dim:   #b26214;
    --bg:            #111113;
    --surface:       #1c1c20;
    --surface-2:     #26262c;
    --surface-3:     #303038;
    --text:          #e2e2e6;
    --text-muted:    #7a7a88;
    --border:        #2e2e36;
    --radius-sm:     4px;
    --radius:        6px;
    --radius-lg:     10px;

    /* Status colours */
    --online:   #2ecc71;
    --idle:     #f1c40f;
    --offline:  #55555f;
    --abroad:   #5bc0de;

    /* Player status colours (mirrors War Monitor's own stylesmain.css tokens,
       exposed here too so every themed page can share the same status palette) */
    --status-okay:   #2ecc71;
    --status-hosp:   #e74c3c;
    --status-jail:   #f1c40f;
    --status-travel: #5bc0de;
    --status-other:  #7a7a88;

    /* Legacy aliases used by existing pages — mapped to the new palette
       so older rules pick up the unified look automatically. */
    --primary-light: var(--primary-dim);
    --muted:         var(--text-muted);
}

/* ----------------------------------------------------------------
   BASE
---------------------------------------------------------------- */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
}

/* ----------------------------------------------------------------
   SCROLLBAR
---------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dim); }
::-webkit-scrollbar-button { display: none; }
html { scrollbar-width: thin; scrollbar-color: var(--surface-3) var(--surface); }

/* ----------------------------------------------------------------
   LAYOUT WRAPPERS
---------------------------------------------------------------- */
.container,
#container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

h1 {
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.3px;
}

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
button {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 7px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.15s, opacity 0.15s;
}
button:not(:disabled):hover { background: #e8850f; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Secondary / sort / filter buttons sit on a surface, not the accent */
.sort-btn,
.filter-btn,
.nav-btn,
#sort-controls button,
.tab {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-weight: 600;
}
.sort-btn:hover,
.filter-btn:hover,
.nav-btn:hover,
#sort-controls button:hover,
.tab:hover {
    background: var(--surface-3);
    color: var(--text);
}
.sort-btn.active,
.filter-btn.active,
.tab.active {
    background: var(--surface-3);
    color: var(--primary);
    border-color: var(--primary-dim);
}

.nav-btn {
    text-decoration: none;
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------
   FORM INPUTS / SELECTS
---------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="datetime-local"],
input.api-input,
input.flatpickr-input,
select,
textarea {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.85rem;
}
input::placeholder { color: var(--text-muted); }
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-dim);
}

/* ----------------------------------------------------------------
   TABLES
---------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
th, td { padding: 9px 12px; text-align: left; }
th {
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
tbody tr:nth-child(even) { background: var(--bg); }
tbody tr:hover { background: var(--surface-2); }

/* ----------------------------------------------------------------
   TABS (index / oc2 dashboards)
---------------------------------------------------------------- */
.tab {
    border-radius: var(--radius) var(--radius) 0 0;
}

/* ----------------------------------------------------------------
   TOP BAR (shared, mirrors War Monitor)
---------------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 100;
    flex-wrap: wrap;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-brand .brand-icon { font-size: 1.2rem; }

.topbar-brand .brand-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.topbar-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.topbar-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.topbar-nav a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.topbar-nav a.active {
    color: var(--primary);
    background: var(--surface-2);
}

@media (max-width: 700px) {
    .topbar {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 10px 0;
    }
    .topbar-brand { width: 100%; }
    .topbar-nav {
        width: 100%;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topbar-nav::-webkit-scrollbar { display: none; }
    .topbar-nav a {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 4px 8px;
    }
}

/* Consistent vertical rhythm: the first heading sits the same distance
   below the topbar on every page, at a uniform size. */
.topbar { margin-bottom: 0; }
.topbar + h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    margin: 16px 0 12px;
    border: none;
    padding: 0;
}

/* ----------------------------------------------------------------
   HAMBURGER NAV
---------------------------------------------------------------- */
.nav-toggle span { background: var(--text-muted); }

.nav-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.nav-dropdown a {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.nav-dropdown a:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* ----------------------------------------------------------------
   FOOTER
---------------------------------------------------------------- */
footer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}
footer strong { color: var(--primary); }