/* =========================================================
   DESIGN TOKENS
========================================================= */
:root {
    /* Palette */
    --color-bg: #f3f5f8;
    --color-surface: #ffffff;
    --color-ink: #1c2430;
    --color-muted: #6b7785;
    --color-border: #e2e6ec;

    --color-primary: #1d4ed8;        /* main brand blue  */
    --color-primary-dark: #15348f;
    --color-primary-light: #e8effd;

    --color-accent: #0fa37f;         /* win / success green-teal */
    --color-accent-dark: #0b7f63;

    --color-danger: #d64550;         /* loss / overdue red */
    --color-warning: #e0a82e;

    --color-header-grad-start: #1d4ed8;
    --color-header-grad-end: #0fa37f;

    --color-dark-nav: #161d2b;
    --color-dark-nav-hover: #232c40;

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

    /* Radius & shadow */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 10px 24px rgba(16, 24, 40, 0.12);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

/* =========================================================
   GLOBAL BASE STYLES
========================================================= */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   LAYOUT ELEMENTS
========================================================= */
#dropdown-container {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 50;
    display: flex;
    gap: var(--space-2);
}

#dropdown-container button,
#dropdown-container select {
    font-family: var(--font-sans);
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

#dropdown-container button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

#bracket {
    margin-top: 20px;
    /* NOT a scroll container: .bracket-wrapper is the single scroller.
       Nested overflow boxes + a transform on the scroller break touch
       scrolling in iOS Safari (finger drag did nothing on iPhone). */
    overflow: visible;
    display: flow-root;   /* contains the floated .round columns */
    width: max-content;   /* size follows the rounds, no hard-coded px */
}

/* =========================================================
   TOP NAVIGATION / TABS
========================================================= */
.tabs {
    display: flex;
    flex-wrap: wrap;
    background: var(--color-dark-nav);
    color: white;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
    /* iPhone notch / Dynamic Island: the page runs edge-to-edge (viewport-fit=cover),
       so push the buttons below the camera area and clear the rounded corners in landscape. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 16px;
    background-color: var(--color-dark-nav);
    cursor: pointer;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: background 0.18s ease, color 0.18s ease;
}

.tab:last-child { border-right: none; }

.tab:hover { background-color: var(--color-dark-nav-hover); }

.tab.active {
    background-color: var(--color-surface);
    color: var(--color-primary-dark);
    font-weight: 600;
}

/* Tournaments tab is a distinct call-to-action */
.tab.tournaments-tab {
    flex: 0 0 auto;
    margin-right: var(--space-5);
    background-color: var(--color-primary);
    color: white;
    border-radius: 0;
    font-weight: 600;
}

.tab.tournaments-tab:hover {
    background-color: var(--color-primary-dark);
}

/* Tabs list container */
.tab-list {
    display: flex;
    flex-wrap: wrap;
}

/* =========================================================
   CONTENT CONTAINERS
========================================================= */
.content-container {
    padding: var(--space-4);
    display: none;
    overflow-x: auto;
    background: var(--color-surface);
    min-width: 300px;
}

.content-container.active { display: block; }

/* Brackets tab: the wrapper below scrolls, not the tab container */
#Spider.content-container { overflow: visible; }

/* =========================================================
   BRACKET ELEMENTS
========================================================= */
.round {
    float: left;
    margin-right: 14px;
}

.round::before {
    content: attr(data-round);
    position: absolute;
    left: -40px;
    top: 0;
    font-weight: 700;
    color: var(--color-muted);
    font-size: 13px;
}

.toggle-round-btn {
    font-size: 11px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 1px 5px;
    color: var(--color-muted);
}

.bracket-game {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.player {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 190px;
    border: 1px solid var(--color-border);
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: #8a93a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: var(--shadow-sm);
}

.player.win {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
}

.player.loss { background: #9aa3b0; }

.player.free { background-color: #b5bcc6; }

.player.free.single { min-height: 30px; }
.player.free.double { min-height: 46px; }
.player.free.triple { min-height: 30px; }

/* =========================================================
   TABLE STYLING (shared base look)
========================================================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-family: var(--font-sans);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

th {
    background: linear-gradient(120deg, var(--color-header-grad-start), var(--color-header-grad-end));
    color: white;
    font-weight: 600;
    font-size: 13px;
    padding: 12px 15px;
    text-align: left;
    letter-spacing: 0.4px;
}

td {
    padding: 10px 15px;
    font-size: 14px;
    border-bottom: 1px solid var(--color-border);
}

tr:nth-child(even) td { background-color: #fafbfc; }

tr:hover td {
    background-color: var(--color-primary-light);
    color: var(--color-ink);
}

/* Info table */
.info-table th {
    width: 180px;
    background: var(--color-accent);
    color: #fff;
}

.info-table td { font-weight: 500; }

/* Player / Darts tables */
#player-list-table th,
#darts-table th,
#queue-table th {
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    vertical-align: middle;
    padding: 10px 15px;
}

#player-list-table tbody td,
#darts-table tbody td,
#queue-table tbody td {
    text-align: center;
    font-weight: 600;
    color: var(--color-ink);
    padding: 10px 15px;
}

#player-list-table tbody tr:nth-child(odd),
#darts-table tbody tr:nth-child(odd),
#queue-table tbody tr:nth-child(odd) {
    background-color: #f4f6f9;
}

#player-list-table tbody tr:nth-child(even),
#darts-table tbody tr:nth-child(even),
#queue-table tbody tr:nth-child(even) {
    background-color: var(--color-surface);
}

/* Player list rows open the bracket filtered to that player */
#player-list-table tbody tr.player-row-link { cursor: pointer; }
#player-list-table tbody tr.player-row-link:hover td {
    background-color: #e3edf9;
}
#player-list-table tbody tr.player-row-link td:nth-child(2)::after {
    content: "\f542";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    margin-left: 8px;
    color: var(--color-accent, #007BFF);
    opacity: 0.6;
}

/* =========================================================
   HAMBURGER MENU (MOBILE)
========================================================= */
.menu-toggle {
    display: none;
    font-size: 22px;
    padding: 14px 18px;
    cursor: pointer;
    color: white;
    background: var(--color-primary);
    user-select: none;
    transition: background 0.2s ease;
}

.menu-toggle:hover { background: var(--color-primary-dark); }

/* =========================================================
   BRACKET ROW LAYOUT
========================================================= */
.bracket-rows-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bracket-rows {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

/* =========================================================
   RESPONSIVE OPTIMIZATION
========================================================= */
@media screen and (max-width: 900px) {
    body { background: var(--color-bg); }

    /* Blue menu bar stays pinned to the top while the page scrolls,
       so the menu is always reachable without scrolling back up.
       On phone there is no hamburger: the tabs are always visible
       as a single row of icons (labels hidden). */
    .tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        background: var(--color-primary);
        color: white;
        position: sticky;
        top: 0;
        z-index: 1000;
        overflow: visible;
        box-shadow: var(--shadow-md);
    }

    .menu-toggle { display: none; }

    .tab-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        background: var(--color-primary);
    }

    .tab {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding: 12px 4px;
        border-top: none;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        background: var(--color-primary);
        color: white;
        font-size: 20px;
        gap: 0;
    }

    .tab:last-child { border-right: none; }

    /* Icons only: hide the text labels */
    .tab span { display: none; }

    .tab.tournaments-tab {
        flex: 1 1 0;
        margin-right: 0;
    }

    .tab:hover { background: var(--color-primary-dark); }

    .tab.active {
        background-color: var(--color-surface);
        color: var(--color-primary-dark);
    }

    table {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    th, td {
        padding: 8px;
        font-size: 13px;
    }

    .player {
        width: 150px;
        font-size: 12px;
    }

    #dropdown-container {
        position: static;
        margin-bottom: 10px;
        width: 100%;
    }

}

/* =========================================================
   MOBILE: INFO + PLAYER LIST FIT SCREEN
========================================================= */
@media screen and (max-width: 480px) {

    #dart-search-container > div {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
    }
    
    #dart-search-container label {
        white-space: nowrap;
        font-size: 11px;
    }
    
    #dart-search-container input {
        flex: 1;
        min-width: 0;      /* lets it shrink instead of forcing overflow */
        font-size: 11px;
        padding: 5px 6px;
        margin: 0;
    }
    
    #dart-search-container button {
        flex-shrink: 0;
        padding: 5px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Info table */
    #Info table { width: 100%; font-size: 11px; }

    #Info th, #Info td {
        padding: 6px 8px;
        font-size: 11px;
        white-space: normal;
        word-break: break-word;
    }

    #Info th { width: 120px; }

    /* Player list table */
    #player-list-table { width: 100%; font-size: 11px; }

    #player-list-table th,
    #player-list-table td {
        padding: 6px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Hide Win / Loss columns on very small screens */
    #player-list-table th:nth-child(3),
    #player-list-table td:nth-child(3),
    #player-list-table th:nth-child(4),
    #player-list-table td:nth-child(4) {
        display: none;
    }

    /* Player search */
    #player-search-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    #player-search-container label,
    #player-search-container input,
    #player-search-container button {
        font-size: 11px;
    }

    #player-search-container input {
        flex: 1;
        min-width: 140px;
    }

    /* Machines / darts container */
    #Darts { font-size: 11px; }

    #darts-table,
    #queue-table { width: 100%; font-size: 11px; }

    #darts-table th, #darts-table td,
    #queue-table th, #queue-table td {
        padding: 6px;
        font-size: 11px;
        white-space: nowrap;
    }

    #darts-table td,
    #queue-table td {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #dart-search-container label,
    #dart-search-container input,
    #dart-search-container button,
    #reloadTimer {
        font-size: 11px;
    }
}

/* =========================================================
   PLAYER BLOCKS & DART INFO
========================================================= */
.player-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.player-block.triple .player { min-width: 180px; }
.player-block.triple .playerLicence { font-size: 12px; padding: 2px; }

.dart-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    color: white;
    box-sizing: border-box;
    min-height: 21px;
}

.dart-info.black { background: var(--color-ink); }
.dart-info.red { background: var(--color-danger); }
.dart-info.gray { background: var(--color-muted); }

.dart-info.placeholder {
    background: var(--color-muted);
    min-height: 21px;
}

.dart-pos {
    font-weight: 400;
    font-size: 11px;
    opacity: 0.85;
}

.dart-info .dart-text {
    display: inline-block;
    min-height: 1em;
    line-height: 1em;
}

.playerLicence {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dart-mid-space {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 24px;
}

.dart-mid-space .dart-info {
    width: 100%;
    white-space: nowrap;
    text-align: left;
}

/* =========================================================
   BRACKET CONNECTOR LINES
========================================================= */
.bracket-game::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    width: 20px;
    height: 2px;
    background: var(--color-border);
    transform: translateY(-50%);
}

.bracket-game::before {
    content: "";
    position: absolute;
    right: -20px;
    width: 2px;
    background: var(--color-border);
}

/* Top match in pair */
.round .bracket-game:nth-child(odd)::before { top: 50%; height: 50%; }

/* Bottom match in pair */
.round .bracket-game:nth-child(even)::before { top: 0; height: 50%; }

.round:last-child .bracket-game::after,
.round:last-child .bracket-game::before { display: none; }

.round:nth-last-child(2) .bracket-game::before { display: none; }

.round.left .bracket-game::after { right: auto; left: -20px; }

.round.hide-lines .bracket-game::before,
.bracket-game.hide-lines::before { display: none !important; }
/* =========================================================
   DARTS TAB — MACHINE / QUEUE CARDS
   Add this block to spider.css (e.g. right after the
   "PLAYER BLOCKS & DART INFO" section).
   Layout mirrors the bracket card: number/side on the left,
   player 1 stacked above player 2, time badge on the right.
========================================================= */
.machine-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-5);
}

.machine-card {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
}

.machine-number {
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    font-weight: 700;
    color: var(--color-primary-dark);
    font-size: 13px;
    text-align: center;
    padding: 6px 4px;
}

.machine-icon { font-size: 16px; line-height: 1; }
.machine-num-val { font-size: 15px; }
.machine-side-val { font-size: 16px; }
.machine-pos-val { font-size: 10px; opacity: 0.75; font-weight: 500; }

.machine-players {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.machine-player-block {
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.machine-divider {
    height: 1px;
    background: var(--color-border);
    margin: 2px 0;
}

.machine-team-name {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
}

.machine-member,
.machine-single-name {
    display: block;
    font-size: 13px;
}

.machine-team-name + .machine-member {
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 500;
}

.machine-time {
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    color: white;
    text-align: center;
}

.machine-time.ok { background: var(--color-accent); }
.machine-time.overdue { background: var(--color-danger); }

.queue-card .machine-number {
    background: var(--color-bg);
    color: var(--color-muted);
}

.empty-state {
    text-align: center;
    padding: 24px;
    color: var(--color-muted);
    font-size: 13px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

@media screen and (max-width: 480px) {
    .machine-card { padding: 8px; gap: 8px; }
    .machine-number { flex-basis: 52px; font-size: 11px; }
    .machine-player-block { font-size: 12px; padding: 4px 6px; }
    .machine-member, .machine-single-name { font-size: 11px; }
    .machine-time { flex-basis: 56px; font-size: 11px; }
}

/* =========================================================
   TEAM LABELS
========================================================= */
.team-name {
    font-weight: 700;
    color: var(--color-primary);
    margin-right: 10px;
}

.team-alias {
    font-weight: 700;
    text-align: center;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.18);
    
    border-radius: var(--radius-sm);
}

.team-name, .team-member, .double-member {
    display: block;
}
.team-name {
    font-weight: bold;
}
.team-member {
    font-size: 0.85em;
    color: #555;
    margin-top: 2px;
}

/* =========================================================
   PLAYER / DART SEARCH BARS
========================================================= */
#player-search-container,
#dart-search-container {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
}

#player-search-container input,
#dart-search-container input {
    padding: 7px 10px;
    margin: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
}

#player-search-container button,
#dart-search-container button {
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
}

#player-search-container button:hover,
#dart-search-container button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.player-country { font-size: 11px; color: var(--color-muted); margin-left: 5px; }
.player-licence { font-size: 10px; color: var(--color-muted); margin-left: 5px; }

/* =========================================================
   BRACKET ZOOM CONTROLS
========================================================= */
.bracket-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.bracket-controls button {
    padding: 6px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 14px;
}

.bracket-controls button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.bracket-wrapper {
    overflow: auto;
    position: relative;
    width: 100%;
    /* One 2D scroll box for the whole bracket: pan in any direction */
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    -webkit-overflow-scrolling: touch;
    /* Browser does one-finger panning; two-finger pinch is handled in JS (zoom) */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

#bracket {
    transform-origin: top left;
    transition: transform 0.2s ease;
}

#bracket.pinching { transition: none; }

/* Player selection highlighting */
.player.selected {
    background: var(--color-primary) !important;
    color: white !important;
    border-radius: 8px;
    padding: 4px;
}

.bracket-game.hide-match { display: none !important; }
.bracket-game.show-match { display: flex !important; }

/* Winner path */
.round .winner-path {
    background: var(--color-warning);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 12px;
    margin-left: 5px;
}

/* =========================================================
   TOAST NOTIFICATIONS
========================================================= */
.toast-message {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px));
    right: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    z-index: 10001;
    font-family: var(--font-mono);
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-lg);
    animation: fadeOut 2s ease-out forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; transform: translateX(0); }
    70% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(20px); display: none; }
}

/* =========================================================
   LAST UPDATE BANNER
========================================================= */
#lastUpdate {
    position: static;
    text-align: center;
    padding: 6px;
    font-size: 12px;
    background: #f4f6f9;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono);
    cursor: default;
    min-height: 20px;
    color: var(--color-muted);
    display: block;
    width: 100%;
    margin: 0;
}

#tournament-name {
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

/* =========================================================
   RANKING EDIT BAR (superadmin only)
========================================================= */
#rank-edit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
}

#rank-edit-bar.editing {
    background: #fff8e1;
    border-color: #f0b429;
}

#rank-edit-bar button {
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    font-family: var(--font-sans);
}

#rank-edit-bar button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

#rank-edit-bar button.rank-save {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

#rank-edit-bar button.rank-save:disabled {
    opacity: 0.6;
    cursor: wait;
}

.rank-edit-note {
    color: var(--color-muted);
    font-size: 12px;
}

.rank-edit-input {
    width: 64px;
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #f0b429;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 13px;
}