/* ==========================================================================
   S34T Admin card system  (the "td-" look)
   Blue gradient card headers, light filter bars, dense data tables.

   Extracted from Pages/Admin/transactions.php and Modules/Admin/
   transactions_table.php so every page can share one definition instead of
   copying a <style> block. Values match those two files exactly, so pages
   that still carry their own inline copy render identically.

   Load order note: this file is linked in the <head>, so a page's own inline
   <style> still wins. Converting a page means deleting its duplicated rules,
   not fighting them.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════
   REQUIRED: neutralise the layout's global float-label rule.

   default_admin_new.php ships an inline `label { position:absolute; left:8px;
   top:16px; pointer-events:none }` to drive its float-label text inputs. Any
   <label> that does not opt out is torn out of normal flow and lands at the
   top-left of the PAGE -- so a card's labels (and any checkbox nested inside
   them) pile up over the masthead.

   Scoping the reset to card containers catches every label at once, including
   ones added later and ones coming from included modules. Do not rely on
   per-class resets: this file previously set position:static on three label
   classes and still shipped two broken ones (.td-check, .td-tix).

   Specificity: `.td-card label` (0,1,1) beats the layout's `label` (0,0,1).
   ══════════════════════════════════════════════════════════════════════ */
.td-card label,
.td-side label,
.td-filters label,
.td-body label,
.td-form-footer label {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    pointer-events: auto;
}

/* ── Shell overrides ─────────────────────────────────────────────────── */
/* The legacy .working-box draws a drop-shadowed panel; card pages supply
   their own surfaces, so it has to become a plain full-width wrapper. */
.td-page .admin_container,
.admin_container.td-page {
    padding: 30px 0 0 0 !important;
}
.td-page .working-box,
.working-box.td-page {
    box-shadow: none !important;
    padding: 0 !important;
    width: 95% !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 auto !important;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.td-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}
.td-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, #11326E 0%, #1a4a9e 100%);
    gap: 12px;
    flex-wrap: wrap;
}
.td-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .01em;
}
.td-card-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #77be45;
}
.td-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .85);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-left: 4px;
}

/* ── Header buttons ──────────────────────────────────────────────────── */
.td-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.td-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: .03em;
    transition: background .15s, color .15s;
    white-space: nowrap;
    font-family: inherit;
    border: 0;
}
.td-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.td-btn-ghost {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .25);
}
.td-btn-ghost:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
/* Active state for a ghost button used as a toggle (e.g. the year picker). */
.td-btn-ghost.td-btn-on {
    background: #fff;
    color: #11326E;
    border-color: #fff;
    font-weight: 800;
}
.td-btn-ghost.td-btn-on:hover { background: #fff; color: #11326E; }
/* Solid accent button for the primary action in a header. */
.td-btn-accent {
    background: #77be45;
    color: #fff;
    border: 1px solid #77be45;
}
.td-btn-accent:hover { background: #68a839; border-color: #68a839; }

/* ── Filter bar ──────────────────────────────────────────────────────── */
.td-filters {
    padding: 16px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e9eef4;
}
.td-filter-form {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.td-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 220px;
}
.td-filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    /* base_admin_v2.css absolutely positions bare labels for its float-label
       inputs; these are static column headings and must not inherit that. */
    position: static;
    top: auto;
    left: auto;
    pointer-events: auto;
}
.td-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1dce8;
    border-radius: 7px;
    font-size: 13px;
    font-family: 'Lato', sans-serif;
    color: #1e293b;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    transition: border-color .15s, box-shadow .15s;
    height: auto;
}
.td-select:focus {
    border-color: #11326E;
    box-shadow: 0 0 0 3px rgba(17, 50, 110, .1);
    outline: none;
}

/* Segmented sort control, for pages whose "filter" is really a sort toggle. */
.td-segment {
    display: inline-flex;
    background: #fff;
    border: 1px solid #d1dce8;
    border-radius: 7px;
    overflow: hidden;
}
.td-segment a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.td-segment a + a { border-left: 1px solid #e2e8f0; }
.td-segment a:hover { background: #f1f5f9; }
.td-segment a[aria-current="true"] { background: #11326E; color: #fff; }

/* ── Table ───────────────────────────────────────────────────────────── */
.td-table-wrap { overflow-x: auto; }
.td-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.td-table thead tr { background: #f1f5f9; }
.td-table th {
    padding: 10px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.td-table td {
    padding: 11px 20px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}
.td-table tbody tr.transaction-row:hover {
    background: #f0f7ff;
    cursor: pointer;
}
.td-th-num { text-align: right; }
.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-empty {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 24px 20px;
}
.td-totals-row { background: linear-gradient(90deg, #f0f7e8 0%, #eaf4f0 100%); }
.td-totals-row td {
    padding: 12px 20px;
    border-bottom: none;
    border-top: 2px solid #77be45;
    color: #11326E;
    font-size: 14px;
}

/* ── Cell typography ─────────────────────────────────────────────────── */
.tr-date { display: block; font-size: 13px; color: #334155; font-weight: 600; }
.tr-time { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.tr-name { display: block; font-size: 13px; font-weight: 600; color: #1e293b; }
.tr-sub  { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.tr-mono { font-size: 12px; font-family: 'Courier New', monospace; color: #475569; }
.tr-cost { font-weight: 700; color: #11326E; }
.tr-spass { color: #77be45; }
.tr-orderid { font-size: 11px; word-break: break-all; }
.tr-school a { font-size: 12px; font-weight: 600; color: #11326E; text-decoration: none; }
.tr-school a:hover { text-decoration: underline; }

/* ── Event rows ──────────────────────────────────────────────────────── */
.td-ev-row:hover { background: #f8fbff; }
.td-ev-main {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.td-ev-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #eef4fb;
    color: #11326E;
    margin-top: 1px;
}
.td-ev-icon svg, .td-ev-icon i { width: 15px; height: 15px; font-size: 14px; }
.td-ev-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #11326E;
    text-decoration: none;
    line-height: 1.35;
}
.td-ev-name:hover { text-decoration: underline; }
.td-ev-teams { display: block; font-size: 12px; color: #475569; margin-top: 2px; }
.td-ev-vs { color: #94a3b8; font-style: italic; }
.td-ev-loc {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.45;
}
.td-ev-type { display: block; font-size: 13px; font-weight: 600; color: #1e293b; }
.td-ev-meta { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }

/* Ticket stat chips */
.td-ev-stats { display: flex; flex-direction: column; gap: 4px; }
.td-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11.5px;
    color: #475569;
    white-space: nowrap;
}
.td-stat b { font-size: 12.5px; color: #11326E; font-variant-numeric: tabular-nums; }
.td-stat--muted b { color: #94a3b8; }

/* Action stack */
.td-ev-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 108px;
}
.td-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #d1dce8;
    background: #fff;
    color: #334155;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
}
.td-act:hover { background: #f1f5f9; border-color: #94a3b8; color: #11326E; }
.td-act--primary { background: #11326E; border-color: #11326E; color: #fff; }
.td-act--primary:hover { background: #1a4a9e; border-color: #1a4a9e; color: #fff; }
.td-act--danger { color: #b42318; border-color: #f0c8c4; }
.td-act--danger:hover { background: #fef3f2; border-color: #e0928c; color: #912018; }
.td-ev-actions form { margin: 0; }

/* Today marker */
.td-ev-today {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #eaf7e0;
    color: #3f6b21;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   Forms
   Labels sit ABOVE their input rather than floating inside it. The legacy
   float-label pattern relies on a global `label { position:absolute }` in the
   admin layout, which escapes any flex/grid parent and is why stacked labels
   drift out of their column. Every label class here pins position:static.
   ══════════════════════════════════════════════════════════════════════ */
.td-body { padding: 22px 24px 24px; }

/* Two-pane form: fields on the left, a side panel on the right. Collapses to
   one column on narrow screens without any hardcoded grid-row. */
.td-form-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 26px;
    align-items: start;
}

.td-section + .td-section { margin-top: 22px; }
.td-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9eef4;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #11326E;
}
.td-section-title svg { width: 14px; height: 14px; color: #77be45; flex-shrink: 0; }

/* Field grid */
.td-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 16px;
}
.td-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.td-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.td-field--wide { grid-column: 1 / -1; }

.td-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    /* Must beat the layout's global absolute-positioned label. */
    position: static;
    top: auto;
    left: auto;
    pointer-events: auto;
}
.td-label .td-req { color: #b42318; margin-left: 2px; }
.td-label .td-opt {
    color: #94a3b8;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.td-input, .td-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1dce8;
    border-radius: 7px;
    font-size: 13px;
    font-family: 'Lato', sans-serif;
    color: #1e293b;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    /* base_admin_v2.css forces height:50px and top padding on bare inputs. */
    height: auto;
    box-sizing: border-box;
}
.td-textarea { min-height: 70px; resize: vertical; }
.td-input:focus, .td-textarea:focus {
    border-color: #11326E;
    box-shadow: 0 0 0 3px rgba(17, 50, 110, .1);
    outline: none;
}
.td-hint {
    font-size: 11.5px;
    line-height: 1.5;
    color: #94a3b8;
}

/* Checkbox / radio rows */
.td-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
    cursor: pointer;
}
.td-check:hover { border-color: #c3d2e3; background: #f1f6fb; }
.td-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #11326E;
    border-radius: 3px;
    opacity: 1;
    border: 1px solid #94a3b8;
}
.td-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-check-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    position: static;
    pointer-events: auto;
}
.td-check-sub { font-size: 11px; color: #94a3b8; line-height: 1.45; }

/* Progressive disclosure */
.td-disclosure { border-top: 1px dashed #dde5ee; margin-top: 18px; padding-top: 14px; }
.td-disclosure-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #11326E;
    background: transparent;
    border: 0;
    cursor: pointer;
    letter-spacing: .02em;
}
.td-disclosure-btn:hover { text-decoration: underline; }
.td-disclosure-btn svg { width: 12px; height: 12px; transition: transform .18s ease; }
.td-disclosure-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
.td-disclosure-panel { margin-top: 15px; }
.td-disclosure-panel[hidden] { display: none; }

/* Footer action bar */
.td-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 15px 24px;
    background: #f8fafc;
    border-top: 1px solid #e9eef4;
}
.td-form-footer .td-hint { margin-right: auto; }
.td-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 7px;
    border: 1px solid #11326E;
    background: #11326E;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    width: auto;
    line-height: 1.4;
}
.td-submit:hover { background: #1a4a9e; border-color: #1a4a9e; }
.td-submit svg { width: 14px; height: 14px; }
.td-cancel {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 7px;
    border: 1px solid #d1dce8;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.td-cancel:hover { background: #f1f5f9; border-color: #94a3b8; }

/* ── Side panel (ticket picker) ──────────────────────────────────────── */
.td-side {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.td-side-hd {
    padding: 12px 15px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.td-side-title {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #11326E;
}
.td-side-sub { display: block; font-size: 11px; color: #94a3b8; margin-top: 3px; }
/* Action row in a side-panel header (e.g. Create Ticket / Set Ticket Order).
   The panel body scrolls, so actions repeated here stay reachable without
   hunting for the footer link. */
.td-side-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.td-act svg { width: 11px; height: 11px; flex-shrink: 0; }

.td-side-bd { padding: 8px; max-height: 480px; overflow-y: auto; }
.td-side-ft {
    padding: 11px 15px;
    background: #f8fafc;
    border-top: 1px solid #e9eef4;
    font-size: 11.5px;
    color: #64748b;
}
.td-side-ft a { color: #11326E; font-weight: 700; text-decoration: none; }
.td-side-ft a:hover { text-decoration: underline; }

/* One selectable ticket */
.td-tix {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.td-tix:hover { background: #f6faff; border-color: #d8e5f3; }
.td-tix input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #11326E;
    opacity: 1;
    border: 1px solid #94a3b8;
    border-radius: 3px;
}
.td-tix-body { min-width: 0; flex: 1; }
.td-tix-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.td-tix-name { font-size: 12.5px; font-weight: 700; color: #1e293b; line-height: 1.35; }
.td-tix-cost {
    font-size: 12.5px;
    font-weight: 700;
    color: #11326E;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.td-tix-type {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #eef4fb;
    color: #11326E;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.td-tix-desc { display: block; font-size: 11px; color: #94a3b8; margin-top: 4px; line-height: 1.45; }

/* ── Visually hidden, still read by screen readers ───────────────────── */
/* For inputs whose meaning is carried by a column header rather than a
   visible label -- the label still has to exist and point at the input. */
.td-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Reorder controls ────────────────────────────────────────────────── */
/* The native number spinner is suppressed: it ate most of a 68px field and
   clipped the digit, and the Move column already provides up/down. Chrome only
   paints the spinner on hover/focus, so this is easy to miss when testing. */
.td-order-input {
    width: 64px;
    max-width: none;
    padding: 8px 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #11326E;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.td-order-input::-webkit-outer-spin-button,
.td-order-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.td-move {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}
.td-move-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid #d1dce8;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.td-move-btn svg { width: 12px; height: 12px; }
.td-move-btn:hover { background: #11326E; border-color: #11326E; color: #fff; }
.td-move-btn:focus-visible { outline: 2px solid #11326E; outline-offset: 2px; }
/* First row's up arrow and last row's down arrow have nowhere to go. */
.td-order-row:first-child [data-td-move="up"],
.td-order-row:last-child [data-td-move="down"] {
    opacity: .3;
    pointer-events: none;
}
.td-order-row .td-tix-type { margin-top: 0; margin-left: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   KPI tiles
   Shared version of the stat tiles that were inline in tickets_sold.php, so
   more than one page can use them.
   ══════════════════════════════════════════════════════════════════════ */
.td-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
    grid-column: 1 / span 12;
}
.td-kpi {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    /* visible so a label tooltip is not clipped by the tile */
    overflow: visible;
    height: 100%;
    box-sizing: border-box;
}
.td-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
}
.td-kpi--blue::before   { background: #3B82F6; }
.td-kpi--green::before  { background: #10B981; }
.td-kpi--purple::before { background: #8B5CF6; }
.td-kpi--amber::before  { background: #F59E0B; }

.td-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.td-kpi-icon svg { width: 20px; height: 20px; }
.td-kpi--blue   .td-kpi-icon { background: #EFF6FF; color: #2563EB; }
.td-kpi--green  .td-kpi-icon { background: #ECFDF5; color: #059669; }
.td-kpi--purple .td-kpi-icon { background: #F5F3FF; color: #7C3AED; }
.td-kpi--amber  .td-kpi-icon { background: #FFFBEB; color: #D97706; }

.td-kpi-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-kpi-label {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #94a3b8;
}
.td-kpi-value {
    font-size: 23px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.td-kpi-sub { font-size: 11px; color: #94a3b8; }

/* Wrapping a tile in a link keeps the tile styles untouched. */
.td-kpi-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.td-kpi-link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .10); }
.td-kpi-link:focus-visible { outline: 2px solid #11326E; outline-offset: 3px; }
.td-kpi-cta {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: #11326E;
    opacity: 0;
    transition: opacity .15s ease-out;
}
.td-kpi-link:hover .td-kpi-cta,
.td-kpi-link:focus-visible .td-kpi-cta { opacity: 1; }
/* Keyboard and touch users never hover. */
@media (hover: none) { .td-kpi-cta { opacity: 1; } }

/* ── Organisation summary (admin home) ───────────────────────────────── */
.td-org { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.td-org-logo {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border: 1px solid #d1dce8;
    border-radius: 10px;
    object-fit: cover;
    background: #fff;
    padding: 4px;
}
.td-org-noimg {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed #c3d2e3;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    padding: 8px;
    line-height: 1.35;
}
.td-org-noimg:hover { border-color: #11326E; color: #11326E; background: #f1f6fb; }
.td-org-noimg i { font-size: 19px; }
.td-org-body { min-width: 0; flex: 1; }
.td-org-name { margin: 0 0 3px; font-size: 18px; font-weight: 700; color: #11326E; }
.td-org-meta { font-size: 13px; line-height: 1.65; color: #475569; }
.td-org-meta a { color: #11326E; text-decoration: none; }
.td-org-meta a:hover { text-decoration: underline; }
.td-org-contacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 11px; }
.td-org-contact {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 12px;
    color: #334155;
    text-decoration: none;
}
.td-org-contact:hover { background: #e2ebf5; }
.td-org-contact span { color: #94a3b8; font-variant-numeric: tabular-nums; }

/* ── App Users ───────────────────────────────────────────────────────── */
.td-uname {
    font-size: 13px;
    font-weight: 700;
    color: #11326E;
    word-break: break-all;
}
.td-muted { color: #94a3b8; font-style: italic; }
.td-inactive { color: #b42318; font-weight: 600; }
/* A person's login/password cells span their business rows, so the divider
   between businesses should not cut through them. */
.td-table td[rowspan] { vertical-align: top; }

/* ── Inline alert (validation errors returned via cookie) ────────────── */
.td-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 24px;
    font-size: 13px;
    line-height: 1.5;
    border-bottom: 1px solid #e9eef4;
}
.td-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.td-alert--error { background: #fef3f2; color: #912018; border-bottom-color: #f5d5d1; }

/* ── Event image ─────────────────────────────────────────────────────── */
.td-logo {
    display: inline-block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    padding: 4px;
    border: 1px solid #d1dce8;
    border-radius: 8px;
    background: #fff;
}

/* ── Ticket rules (event-edit) ───────────────────────────────────────── */
.td-tix-wrap { border-bottom: 1px solid #f1f5f9; }
.td-tix-wrap:last-child { border-bottom: 0; }
.td-tix-rules {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 0 11px 11px 37px;
}
.td-tix-rules:empty { display: none; }
.td-rule { display: flex; flex-direction: column; gap: 1px; }
.td-rule-lbl {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #3f6b21;
}
.td-rule-val { font-size: 11px; color: #475569; font-variant-numeric: tabular-nums; }
.td-tix-rules .td-act { padding: 4px 9px; font-size: 11px; }

/* Opponent search (preps only) */
.td-vs {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 13px 15px;
    background: #f8fafc;
    border: 1px solid #e9eef4;
    border-radius: 8px;
    margin-bottom: 20px;
}
.td-vs-home { font-size: 14px; font-weight: 700; color: #11326E; }
.td-vs-sep { font-size: 12px; font-style: italic; color: #94a3b8; }
.td-vs .select-dropdown { flex: 1; min-width: 220px; }

/* ══════════════════════════════════════════════════════════════════════
   Hub tiles
   A grid of destination links, for pages that are mainly a directory of
   other tools (admin/internal-data).
   ══════════════════════════════════════════════════════════════════════ */
.td-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
}
.td-hub-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.td-hub-tile:hover {
    border-color: #11326E;
    background: #f6faff;
    transform: translateY(-1px);
}
.td-hub-tile:focus-visible { outline: 2px solid #11326E; outline-offset: 2px; }
.td-hub-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef4fb;
    color: #11326E;
}
/* The legacy markup used inline <svg class="svg-icons"> at whatever size the
   old stylesheet gave them; pin a size here so every tile matches. */
.td-hub-icon svg { width: 16px; height: 16px; fill: currentColor; }
.td-hub-body { min-width: 0; }
.td-hub-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #11326E;
    line-height: 1.35;
}
.td-hub-desc {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #64748b;
}
.td-hub-tile .td-hub-go {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    color: #c3d2e3;
    transition: color .15s, transform .15s;
}
.td-hub-tile .td-hub-go svg { width: 14px; height: 14px; }
.td-hub-tile:hover .td-hub-go { color: #11326E; transform: translateX(2px); }

/* ── Download boxes (admin/downloads) ────────────────────────────────────
   Hub tiles that carry notes: a tile head, a definition list of open
   questions, and a footer pointing at where the data lives today. */
.td-dl-intro { margin: 0; font-size: 13px; line-height: 1.6; color: #475569; }
.td-dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.td-dl-box {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 14px 15px;
}
.td-dl-head { display: flex; align-items: flex-start; gap: 12px; }
.td-dl-status {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.td-dl-status--requested { background: #e0ecf9; color: #11326E; }
.td-dl-status--suggested { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.td-dl-status--live { background: #eef6e8; color: #3f7a1c; border: 1px solid #cfe6bf; }

/* A download form drawn inside its box. */
.td-dl-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e9eef4;
    border-radius: 8px;
}
.td-dl-form .td-filter-group { min-width: 0; flex: none; }
.td-dl-form .s34-presets { margin: 0; }
.td-dl-dates { display: flex; gap: 12px; flex-wrap: wrap; }
.td-dl-dates .td-filter-group { flex: 1 1 140px; }
.td-dl-submit { align-self: flex-start; }
.td-dl-locked {
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}
.td-dl-notes {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 6px 10px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    line-height: 1.5;
}
.td-dl-notes dt { font-weight: 700; color: #11326E; }
.td-dl-notes dd { margin: 0; color: #475569; }
.td-dl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}
.td-dl-current { font-size: 12px; color: #11326E; text-decoration: underline; }
.td-dl-current--none { color: #94a3b8; text-decoration: none; }
.td-dl-soon { font-size: 11px; color: #94a3b8; font-style: italic; }

/* ── Active filter chips ─────────────────────────────────────────────── */
.td-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.td-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px;
    border-radius: 20px;
    background: #eef4fb;
    border: 1px solid #d8e5f3;
    font-size: 12px;
    color: #11326E;
    text-decoration: none;
}
.td-chip:hover { background: #e0ecf9; border-color: #b8d2ea; }
.td-chip span { color: #7e93ab; font-size: 14px; line-height: 1; }
/* A chip that states a condition rather than offering to clear one. */
.td-chip--note {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
    cursor: default;
}
.td-chip--note:hover { background: #fffbeb; border-color: #fde68a; }
/* Disabled year buttons while an event overrides the range. */
.td-btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.td-btn-ghost:disabled:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
.td-chip:hover span { color: #b42318; }

/* Two cards side by side, stacking on narrow screens. */
.td-row2 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
    grid-column: 1 / span 12;
}
.td-row2 > .td-card { margin-bottom: 24px; }
.td-card--flex1 { flex: 1 1 380px; min-width: 0; }

/* ── Narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .td-card-header { align-items: flex-start; }
    .td-table th, .td-table td { padding-left: 12px; padding-right: 12px; }
    .td-ev-actions { min-width: 0; }
    .td-form-split { grid-template-columns: minmax(0, 1fr); }
    .td-row2 { display: block; }
    .td-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .td-side-bd { max-height: none; }
}

/* ---------------------------------------------------------------------------
   Tickets page (.td-tk*)

   Labels sit ABOVE their values rather than beside them. forms.js swaps each
   value span for a bare <input> when a row enters edit mode, and a stacked
   label keeps the row from reflowing when that happens -- the input simply
   fills the cell the value occupied.

   tickets_admin.css is emitted by the controller BEFORE this file, so two of
   its rules are beaten on specificity rather than order:
     .ticket-form { display:grid; grid-column:span 12 } -> .td-tk .ticket-form
     #data-name   { font-size:18px; color:#333 }        -> .td-tk span#data-name
   Its .sub-hid { display:none } is left alone; the save button also carries an
   inline style="display:none" so the row never shows a stray Save Changes even
   if this stylesheet fails to load. forms.js overwrites that inline style.
--------------------------------------------------------------------------- */
.td-tk-list { display: flex; flex-direction: column; gap: 10px; }
.td-tk-list[hidden] { display: none; }

.td-tk {
    border: 1px solid #e4eaf2;
    border-radius: 10px;
    background: #fff;
    padding: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.td-tk:hover { border-color: #cbd9ea; box-shadow: 0 1px 3px rgba(17,50,110,.06); }

/* Undo the legacy 12-column grid so the panel lays out normally. */
.td-tk .ticket-form { display: block; grid-column: auto; grid-gap: 0; margin: 0; }

/* --- header strip --- */
.td-tk-head {
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}
.td-tk-id { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }

.td-tk span#data-name {
    font-size: 15px;
    font-weight: 700;
    color: #11326E;
    line-height: 1.35;
}

.td-tk-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    background: #e7edf6;
    color: #4a5a75;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.td-tk-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* --- field grid --- */
.td-tk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px 22px;
    margin: 0;
    padding: 14px 16px;
}
.td-tk-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.td-tk-f--wide { grid-column: 1 / -1; }

.td-tk-f dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8894a7;
    line-height: 1.4;
}
.td-tk-f dd {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2a3d;
    line-height: 1.45;
    word-break: break-word;
}
/* the long free-text field reads better unbolded */
.td-tk-f--wide dd { font-weight: 400; color: #35415a; }

.td-tk-money, .td-tk-unit { color: #8894a7; font-weight: 600; }
.td-tk-unit { margin-left: 3px; }
/* sits beside a value span that is intentionally left empty so forms.js can
   still find it and read '' rather than placeholder text */
.td-tk-none { color: #9aa5b5; font-style: italic; font-weight: 400; font-size: 13px; }
.td-tk-f dd > span + .td-tk-none { margin-left: 6px; }
.td-tk-f dd > .td-tk-none:first-child { margin-left: 0; }

/* --- notices --- */
.td-tk-notes { margin: 0; padding: 0 16px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.td-tk-note {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    background: #eff6ff;
    border: 1px solid #d7e6fb;
    color: #11326E;
    font-size: 12px;
    font-weight: 600;
}

/* --- save bar, only visible once forms.js opens the row --- */
.td-tk-save { padding: 0 16px; }
.td-tk-editing .td-tk-save { padding: 0 16px 14px; }
.td-tk .sub-hid { display: none; }

/* forms.js injects bare <input> elements with no class, so they are styled by
   element to match .td-input. They fill the cell the value span occupied. */
.td-tk input:not([type="hidden"]):not([type="checkbox"]) {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #cfdae8;
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    color: #1f2a3d;
    position: static;
}
.td-tk input:not([type="hidden"]):focus {
    outline: none;
    border-color: #11326E;
    box-shadow: 0 0 0 3px rgba(17, 50, 110, .11);
}
/* the name input sits in the header strip, where it should read as the title */
.td-tk-id input { max-width: 380px; font-weight: 700; font-size: 14px; }

/* A row in edit mode is visually lifted out of the list. */
.td-tk-editing { border-color: #11326E; box-shadow: 0 2px 10px rgba(17,50,110,.10); }
.td-tk-editing .td-tk-head { background: #f0f5fc; }

/* A row with no field grid under it: the header strip IS the row. */
.td-tk--compact .td-tk-head { background: #fff; border-bottom: none; border-radius: 10px; }
.td-tk--compact.td-tk-editing .td-tk-head { background: #f0f5fc; }

/* An action that is deliberately unavailable, with a tip explaining why.
   Rendered as a <span>, not a disabled <button>, so it still receives the
   hover and focus that reveal the tip. */
.td-act--off {
    color: #9aa5b5;
    border-color: #e6ebf2;
    background: #f8fafc;
    cursor: not-allowed;
    border-bottom-style: solid;
}
.td-act--off:hover { background: #f8fafc; border-color: #e6ebf2; color: #9aa5b5; }
/* admin_guidance.css loads after this file, so .s34-tt's dotted underline wins
   on a bare class. These two carry a real border already and only want the
   tooltip behaviour, so the underline is dropped at higher specificity. */
.td-act.s34-tt, .td-tk-type.s34-tt { border-bottom-style: solid; }
.td-tk-type.s34-tt { border-bottom-color: transparent; cursor: help; }

/* Deleted-tickets expander chevron */
#tk-deleted-toggle svg { transition: transform .18s ease; }
#tk-deleted-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 640px) {
    .td-tk-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 16px; }
    .td-tk-head { align-items: flex-start; }
}