/* ═══════════════════════════════════════════════════════════════════════════
   QDB Project Base Theme  —  qdb-base.css
   Dark theme base for Django tools built on the QDB MySQL database.
   This is the NEW Python/Django replacement for the old R&S C# admin system
   (admin.racingandsports.com/Admin/). Load BEFORE any project-specific CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
    /* Backgrounds */
    --bg-primary:     #0d1117;
    --bg-secondary:   #161b22;
    --bg-input:       #1c2128;
    --bg-hover:       #21262d;
    --surface:        var(--bg-primary);   /* base page surface a section gradient fades into */

    /* Borders */
    --border:         #30363d;

    /* Typography */
    --text-primary:   #e6edf3;
    --text-secondary: #8b949e;
    --text-link:      #58a6ff;

    /* Accent palette */
    --accent-blue:    #1f6feb;
    --accent-teal:    #39c5bb;
    --race-red:       #c0392b;
    --value-blue:     #58a6ff;
}

/* ── Base ── */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
}

/* ── Card / Panel ── */
.qp-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
}

/* ── Form label ── */
.qp-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Form inputs ── */
.qp-input,
.qp-select {
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    height: 32px;
}

.qp-input:focus,
.qp-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.25);
}

.qp-select option {
    background-color: var(--bg-input);
    color: var(--text-primary);
}

/* ── Action button base ── */
.qp-btn {
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.qp-btn:hover:not(:disabled) { filter: brightness(1.12); }
.qp-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Plain/secondary button ── */
.qp-btn-plain {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}
.qp-btn-plain:hover:not(:disabled) { background: var(--bg-hover); }
.qp-btn-plain:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Checkbox ── */
.qp-tab-check {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}

/* ── Tab system ── */
.qp-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    gap: 2px;
}

.qp-tab {
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transition: color 0.15s;
}

.qp-tab:hover  { color: var(--text-primary); }
.qp-tab.active {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: var(--border);
    border-bottom-color: var(--bg-secondary);
    margin-bottom: -1px;
}

.qp-tab-content { padding: 10px 0; }

/* ── Generic table ── */
.qp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.qp-table th {
    color: var(--accent-teal);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.qp-table th:last-child                    { border-right: none; }
.qp-table th.num, .qp-table td.num        { text-align: right; }

.qp-table td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text-primary);
    white-space: nowrap;
}
.qp-table td:last-child          { border-right: none; }
.qp-table tr:last-child td       { border-bottom: none; }
.qp-table tr.current-race td     { background: rgba(57, 197, 187, 0.08); font-weight: 600; }
.qp-table td.num                 { color: var(--accent-teal); }
.qp-table .winner-name {
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
}

/* ── Utilities ── */
.qp-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}
.text-muted-qp { color: var(--text-secondary); }

/* ── HTMX loading indicator ── */
.htmx-indicator { opacity: 0; transition: opacity 0.3s; }
.htmx-request .htmx-indicator { opacity: 1; }

/* ── Global loading overlay ── */
#qp-loading {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2000;
    pointer-events: none;
}
#qp-loading.on { display: flex; }
#qp-loading img { width: 64px; height: 64px; object-fit: contain; }