/* ============================================================
   qdbadmin.css — QDBAdmin-specific overrides.
   Loads AFTER qdb-base.css. Reuses its tokens + .qp-* components.
   ============================================================ */

/* ---- section header wash (colored band behind a page's title area) ---- */
.section {
    background: linear-gradient(
        180deg,
        var(--sec-top, #dff0fb) 0px,
        var(--sec-top, #dff0fb) 36px,
        var(--surface) 120px
    );
}
.section-header {
    background: var(--sec-top, #dff0fb);
}
[data-theme="dark"] .section {
    --sec-top: #0d2a3a;
}

/* ---- layout ---- */
.qa-topbar {
    display: flex; align-items: baseline; gap: 12px;
    padding: 10px 18px; background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.qa-brand { color: var(--text-primary); font-weight: 700; text-decoration: none; font-size: 16px; }
.qa-brand:hover { color: var(--text-link); }
.qa-brand-sub { color: var(--text-secondary); font-size: 12px; }
.qa-main { padding: 16px 18px 60px; }
.qa-page { max-width: 100%; }
.qa-h1 { font-size: 26px; font-weight: 800; color: #fff; margin: 0; }
.qa-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.qa-head-title { display: flex; align-items: center; gap: 14px; }
.qa-head-icon { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.qa-muted { color: var(--text-secondary); }

.qa-gear {
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary);
    width: 34px; height: 34px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.qa-gear:hover { color: var(--accent-teal); border-color: var(--accent-teal); }

/* ---- filter bar ---- */
.qa-filterbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 6px; padding: 12px; margin-bottom: 12px;
}
.qa-filter { display: flex; flex-direction: column; gap: 4px; }
.qa-filter .qp-label { font-size: 11px; }
.qa-filter-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---- tabs + toolbar ---- */
.qa-tabs { margin-bottom: 0; }
.qa-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.qa-tb-sep { flex: 1; }
.qp-btn-plain.active { background: var(--race-red); color: #fff; border-color: var(--race-red); }

/* ---- grid ---- */
.qa-grid { overflow-x: auto; }
/* fixed layout + width:max-content: the table is exactly the sum of its column
   widths (never stretched to fill), so pinned (fixed) columns keep an identical
   width AND left position when switching tabs. The container scrolls if wider. */
.qa-grid-table { width: max-content; min-width: 0; font-size: 12px; table-layout: fixed; }
.qa-grid-table th { white-space: nowrap; background: var(--bg-secondary); color: var(--accent-teal); overflow: hidden; text-overflow: ellipsis; text-align: left; }
.qa-grid-table td { vertical-align: middle; overflow: hidden; text-align: left; }
/* explicit align classes still win over the left default (higher specificity) */
.qa-grid-table .num { text-align: right; }
.qa-grid-table .qa-center { text-align: center; }
/* pinned (fixed) columns: subtle green-grey tint so they read as "locked in place" */
.qa-grid-table th.qa-fixed,
.qa-grid-table td.qa-fixed { background-image: linear-gradient(rgba(12, 30, 22, 0.55), rgba(12, 30, 22, 0.55)); }
.qa-center { text-align: center; }
.qa-static { color: var(--text-primary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-col-actions { width: 90px; }
.qa-lock-hint { color: var(--text-secondary); font-size: 10px; }

.qa-cell { padding: 2px 6px; }
.qa-editwrap { display: flex; align-items: center; gap: 4px; }
.qa-cell-input {
    width: 100%; background: var(--bg-input); color: var(--text-primary);
    border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; font-size: 12px;
}
.qa-cell-input:hover { border-color: var(--border); }
.qa-cell-input:focus { outline: none; border-color: var(--accent-blue); background: var(--bg-primary); }
.qa-cell-input:disabled { background: transparent; color: var(--text-primary); border-color: transparent; cursor: default; }
.qa-select.qa-cell-input { appearance: auto; }

.qa-lock {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    padding: 0 2px; font-size: 12px; flex: 0 0 auto;
}
.qa-lock:hover { color: var(--accent-teal); }
.qa-lock.unlocked { color: var(--accent-teal); }

/* dirty (pending) cell */
.qa-dirty { background: rgba(233, 196, 106, 0.12); }
.qa-dirty .qa-cell-input { border-color: var(--btn-timefig, #e9c46a); }

/* checkboxes / delete mode */
.qa-col-check { width: 28px; text-align: center; }
.qa-row-check:disabled, .qa-col-check input:disabled { opacity: 0.25; }
.qa-delete-mode .qa-grid-table tr:hover { background: rgba(192, 57, 43, 0.12); }

/* actions */
.qa-col-actions { white-space: nowrap; text-align: center; }
.qa-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin: 0 1px; border-radius: 4px;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-secondary); text-decoration: none; cursor: pointer;
}
.qa-action:hover { color: var(--accent-teal); border-color: var(--accent-teal); }

.qa-empty { text-align: center; color: var(--text-secondary); padding: 24px; }

/* ---- pager ---- */
.qa-pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; }
.qa-pager-info { color: var(--text-secondary); font-size: 12px; }
.qa-pager-btns { display: flex; gap: 8px; }

/* ---- index ---- */
.qa-entity-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.qa-entity-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 120px; height: 96px; justify-content: center;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-primary); text-decoration: none; text-transform: capitalize;
}
.qa-entity-card i { font-size: 26px; color: var(--accent-teal); }
.qa-entity-card:hover { border-color: var(--accent-teal); }

/* Icon-tile variant: the source PNG is a complete, captioned square tile
   (icon + label baked in), so it replaces the card's own icon+text pair
   entirely rather than sitting alongside them. */
.qa-entity-card-img {
    position: relative; width: 128px; height: 128px; padding: 0; gap: 0;
}
.qa-entity-card-img .qa-entity-icon {
    width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
}
.qa-entity-caret-badge {
    position: absolute; top: 6px; right: 6px; z-index: 1;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(13, 17, 23, 0.75); color: var(--accent-teal);
    display: flex; align-items: center; justify-content: center; font-size: 10px;
    pointer-events: none;
}

/* Tile caption — added back after the baked-in captions were removed from
   the icon art itself (they were misaligned per-image). Font styling
   applies to both tile variants; positioning is only added for the image
   tile (.qa-entity-card-img), where it sits over the blank space the new
   icons leave at the bottom of the artwork. */
.qa-entity-tile-label {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.1;
}
.qa-entity-card-img .qa-entity-tile-label {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 1;
    padding: 4px 6px 0;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* ---- grouped nav tile (hover dropdown, e.g. "Features", "Results") ---- */
.qa-entity-group { position: relative; cursor: default; }
.qa-entity-caret { font-size: 11px; margin-left: 2px; vertical-align: 1px; }

/* .qa-entity-dropdown is an invisible strip flush against the tile's bottom
   edge — it bridges the visual gap to the menu below. Without it, the mouse
   crosses "dead space" that belongs to neither element, :hover drops, and the
   menu closes before you can reach it. Its child .qa-entity-dropdown-menu
   carries all the actual visible styling and sits right after the strip. */
.qa-entity-dropdown {
    position: absolute; top: 100%; left: 0; width: 100%; height: 10px; z-index: 20;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, visibility .15s;
}
.qa-entity-group:hover .qa-entity-dropdown,
.qa-entity-group:focus-within .qa-entity-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.qa-entity-dropdown-menu {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    min-width: 170px;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column; padding: 6px;
}
.qa-entity-dropdown-menu a {
    padding: 7px 10px; border-radius: 6px; font-size: 13px; white-space: nowrap;
    color: var(--text-primary); text-decoration: none; text-transform: none;
}
.qa-entity-dropdown-menu a:hover { background: var(--bg-hover); color: var(--accent-teal); }

/* ---- modals ---- */
.qa-modal { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); }
.qa-modal .modal-header, .qa-modal .modal-footer { border-color: var(--border); }
.qa-config-text {
    width: 100%; min-height: 380px; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px; background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 6px; padding: 10px;
}
.qa-config-msg { margin: 8px 0 0; white-space: pre-wrap; font-size: 12px; }
.qa-config-msg.ok { color: var(--accent-teal); }
.qa-config-msg.err { color: var(--race-red); }
.qa-error { color: var(--race-red); white-space: pre-wrap; }

/* ---- loading overlay ---- */
#qa-loading {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(13, 17, 23, 0.45); z-index: 1080;
}
#qa-loading.on { display: flex; }
.qa-spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 4px solid var(--border); border-top-color: var(--accent-teal);
    animation: qa-spin 0.8s linear infinite;
}
@keyframes qa-spin { to { transform: rotate(360deg); } }

/* ---- drilldown context header (race / runner pages) ---- */
.qa-ctx-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 18px; margin: 4px 0 12px;
}
.qa-ctx-title { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.15; letter-spacing: 0.2px; }
.qa-ctx-sub { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }
.qa-ctx-meta { font-size: 12px; color: var(--text-secondary); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.4px; }
.qa-ctx-right { text-align: right; flex: 0 0 auto; }
.qa-ctx-right-val { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.qa-ctx-right-lbl { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }

/* ---- row select + per-row delete-X ---- */
.qa-col-check { width: 34px; text-align: center; }
.qa-col-check input, .qa-row-check { cursor: pointer; }
.qa-col-del { width: 34px; text-align: center; display: none; }        /* hidden until Delete SHOW */
.qa-delete-mode .qa-col-del { display: table-cell; }
.qa-del-x {
    background: none; border: none; cursor: pointer; line-height: 1;
    font-size: 15px; font-weight: 700; color: var(--race-red); padding: 0 5px; border-radius: 3px;
}
.qa-del-x:hover { color: #fff; background: var(--race-red); }

/* ==== Compare screen (v0.5.0) ==== */
.qa-cmp-n { color: var(--text-secondary); font-weight: 600; }
.qa-cmp-notice {
    background: rgba(210, 153, 34, 0.12); border: 1px solid rgba(210, 153, 34, 0.4);
    color: var(--text-primary); font-size: 12px; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;
}

/* Smart advice panel */
.qa-advice { margin-bottom: 14px; }
.qa-advice > summary {
    cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent-teal);
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0;
}
.qa-advice-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.qa-advice-pair {
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px; min-width: 260px; flex: 0 1 auto;
}
.qa-advice-head { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.qa-advice-line { font-size: 12px; line-height: 1.8; display: flex; align-items: center; gap: 7px; }
.qa-advice-ok  { color: #3fb950; }
.qa-advice-bad { color: #f85149; }
.qa-advice-na  { color: var(--text-secondary); }

/* Horizontally-scrollable card row */
.qa-cmp-row { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 10px; }
.qa-cmp-card {
    flex: 0 0 auto; min-width: 380px; max-width: 640px;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
}
.qa-cmp-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.qa-cmp-title {
    font-size: 16px; font-weight: 800; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qa-cmp-remove {
    background: none; border: none; cursor: pointer; line-height: 1; flex: 0 0 auto;
    font-size: 18px; font-weight: 700; color: var(--race-red); padding: 0 5px; border-radius: 3px;
}
.qa-cmp-remove:hover { color: #fff; background: var(--race-red); }

/* Card field label/value rows */
.qa-cmp-fields {
    display: grid; grid-template-columns: minmax(90px, auto) 1fr; column-gap: 12px; row-gap: 2px;
    font-size: 12px; margin-bottom: 10px;
}
.qa-cmp-flabel { color: var(--text-secondary); white-space: nowrap; }
.qa-cmp-fvalue { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Per-card related-runs sub-table */
.qa-cmp-relhead {
    font-size: 11px; font-weight: 700; color: var(--accent-teal);
    text-transform: uppercase; letter-spacing: 0.5px; margin: 6px 0 4px;
}
.qa-cmp-table { width: 100%; font-size: 11px; table-layout: fixed; }
.qa-cmp-table th {
    white-space: nowrap; background: var(--bg-input); color: var(--accent-teal);
    overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.qa-cmp-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.qa-cmp-pager { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 0; }

/* List-page compare toolbar bits (entity.html) */
#qa-compare[disabled] { opacity: 0.55; }
.qa-cmp-clear { display: none; }