/*
 * Shared styles for the inline form-line renderer
 * (window.InlineFormLines.render).
 *
 * These rules originally lived as a <style> block inside racecard-popup.html;
 * they're now duplicated here so profile-popup.html can render the same
 * table chrome in its breakdown drill-down modal without copy-pasting the
 * inline block.
 *
 * Variables expected from the host page: --brand (dark blue used for the
 * table-head background and accent colour). racecard-popup and
 * profile-popup both set --brand: #1a365d in their root CSS.
 *
 * If you change a rule here, mirror the change in the matching block in
 * racecard-popup.html (until that inline duplicate is removed in a
 * follow-up PR).
 */

.fl-row td { padding:0 !important; border-bottom:2px solid var(--brand); }
/* The form-line container caps at viewport width minus a small gutter
   so the Export CSV button + right-edge cells stay inside the visible
   area on narrow viewports — without this the container inherits its
   parent's width (which can exceed the viewport via a wide outer
   table) and bleeds past the page right edge. overflow-x:auto then
   lets the table itself scroll inside if it's wider than the (now
   capped) container. */
.fl-container { padding:8px 12px 12px; background:#f8fafc; overflow-x:auto; max-width:calc(100vw - 160px); box-sizing:border-box; }
.fl-container::-webkit-scrollbar { height:6px; }
.fl-container::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.fl-container::-webkit-scrollbar-track { background:transparent; }
.fl-table { width:100%; border-collapse:collapse; font-size:11px; margin-bottom:6px; }
.fl-table-fixed { table-layout:fixed; }
.fl-table th { background:var(--brand); color:white; padding:4px 6px; font-size:10px; font-weight:600; text-transform:uppercase; white-space:nowrap; text-align:center; overflow:hidden; }
.fl-table th.fl-sortable { cursor:pointer; user-select:none; }
.fl-table th.fl-sortable:hover { background:#173a66; }
.fl-table th:first-child { border-radius:4px 0 0 0; }
.fl-table th:last-child { border-radius:0 4px 0 0; }
.fl-table td { padding:4px 6px; text-align:center; border-bottom:1px solid #e5e7eb; white-space:nowrap; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; }
.fl-table tr:last-child td { border-bottom:none; }
.fl-table tr:hover { background:#eef3fa; }
.fl-date { font-weight:600; color:#374151; }
.fl-race { text-align:left !important; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.fl-outcome { text-align:left !important; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.fl-match { background:#dcfce7 !important; }
.fl-match-inline { background:#dcfce7; border-radius:2px; padding:0 2px; }
.fl-prb-high { background:#dcfce7; color:#166534; border-radius:3px; padding:1px 4px; font-weight:700; }
.fl-prb-mid { background:#fef3c7; color:#92400e; border-radius:3px; padding:1px 4px; font-weight:700; }
.fl-prb-low { background:#fee2e2; color:#991b1b; border-radius:3px; padding:1px 4px; font-weight:700; }
.fl-icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; color:#6b7280; transition:color 0.15s; }
.fl-icon:hover { color:var(--brand); }
.fl-icon svg { width:14px; height:14px; }
.fl-replay-icon { color:#16a34a; }
.fl-replay-icon:hover { color:#15803d; }
.fl-footer { display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:11px; }
.fl-footer a { color:var(--brand); text-decoration:none; font-weight:600; }
.fl-footer a:hover { text-decoration:underline; }
.fl-loading { text-align:center; padding:16px; color:#6b7280; font-size:12px; }
.fl-hidden-row { display:none !important; }
.fl-show-all { text-align:center; padding:6px; font-size:11px; color:var(--brand); font-weight:600; cursor:pointer; }
.fl-show-all:hover { text-decoration:underline; }
.fl-pos-won { color:#16a34a; font-weight:700; }
.fl-pos-placed { color:#2563eb; font-weight:600; }
.fl-pos-other { color:#374151; }
.fl-pos-dnf { color:#dc2626; font-weight:600; }
@media (max-width: 900px) {
    .fl-hide-md { display:none !important; }
}
@media (max-width: 640px) {
    .fl-hide-sm { display:none !important; }
    .fl-table { font-size:10px; }
    .fl-table td { padding:3px 4px; }
}

/* Form Lines filter label */
.fl-filter-label { font-size:11px; color:#6b7280; padding:4px 0 6px; font-weight:600; }

/* Top bar above the form-line table: filter label on the left, Export
   CSV button on the right. Replaces the old "button in the footer"
   layout — keeps the export action above the fold even when the table
   gets tall. */
.fl-top-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:2px 0; flex-wrap:wrap; }
.fl-top-bar-left { flex:1 1 auto; min-width:0; }
.fl-top-bar-left .fl-filter-label { padding:0; }
.fl-top-bar-right { flex:0 0 auto; }

/* Sectionals toggle pill — matches PRS "Sectionals" badge */
.fl-sect-toggle {
    display:inline-flex; align-items:center;
    padding:2px 8px; border-radius:9999px; font-size:0.6875rem; font-weight:500;
    cursor:pointer; border:1px solid transparent;
    background:#ede9fe; color:#6d28d9;
    transition:all 0.15s; white-space:nowrap;
    vertical-align:middle; margin-left:6px; line-height:1.2;
}
.fl-sect-toggle:hover { background:#ddd6fe; color:#5b21b6; }
.fl-sect-toggle.active { background:#7c3aed; color:#fff; border-color:#7c3aed; }

/* Mini pace bar in form lines */
.fl-pace-bar {
    display:flex; height:14px; border-radius:2px; overflow:hidden; gap:1px;
    width:100%;
}
.fl-pace-bar > div { flex:1; min-width:4px; }
.pb-mf { background:#22c55e; }
.pb-f { background:#86efac; }
.pb-p { background:#fef9c3; }
.pb-s { background:#fecaca; }
.pb-ms { background:#ef4444; }

/* FS Diff colour classes */
.fl-fs { font-weight:600; }
.fl-fs-mf { color:#16a34a; font-weight:700; }
.fl-fs-f { color:#22c55e; font-weight:600; }
.fl-fs-par { color:#9ca3af; }
.fl-fs-s { color:#ef4444; font-weight:600; }
.fl-fs-ms { color:#dc2626; font-weight:700; }

/* Position gained/lost */
.fl-pos-gained { color:#16a34a; font-weight:600; }
.fl-pos-lost { color:#dc2626; font-weight:600; }
.fl-pos-same { color:#9ca3af; }

/* Running style badge (compact for form lines) */
.fl-rs-badge {
    display:inline-flex; align-items:center; gap:2px;
    padding:1px 5px; border-radius:9999px; font-size:0.5625rem; font-weight:600;
    white-space:nowrap; color:#fff; line-height:1.2;
}
.fl-rs-badge .pf-icon { width:10px; height:10px; }
.rs-front-runner { background-color:#ef4444; }
.rs-prominent { background-color:#3b82f6; }
.rs-stalker { background-color:#f59e0b; }
.rs-mid-division { background-color:#6b7280; }
.rs-closer { background-color:#22c55e; }
.rs-held-up { background-color:#8b5cf6; }

/* Position track in form lines */
.fl-pos-track { font-size:10px; white-space:nowrap; letter-spacing:-0.5px; color:#374151; }
.fl-pos-track .fl-pt-arr { color:#9ca3af; margin:0 1px; }

/* Sortable headers — every column header now opts into sorting via
   data-fl-sort. Lift the contrast slightly on hover so it's discoverable
   without dominating the table chrome. */
.fl-table th.fl-sortable { cursor:pointer; user-select:none; }
.fl-table th.fl-sortable:hover { background:#173a66; }

/* Export-to-CSV button in the footer. Sits on the right of the run
   count; lock variant gets a faded look + the inline Premium pill. */
.fl-export-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:6px; border:1px solid #c7d2fe;
    background:#eef2ff; color:#3730a3; font-size:11px; font-weight:600;
    cursor:pointer; transition:all 0.15s;
}
.fl-export-btn:hover { background:#e0e7ff; border-color:#a5b4fc; }
.fl-export-btn.fl-export-locked {
    background:#f5f3ff; color:#7c3aed; border-color:#ddd6fe;
}
.fl-export-btn.fl-export-locked:hover { background:#ede9fe; }
.fl-premium-pill {
    display:inline-block; padding:1px 6px; border-radius:9999px;
    background:#7c3aed; color:#fff; font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.05em;
}