/*
 * 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; }
/* Sectional mode only (fl-table-fixed is not applied in normal mode). Under
   table-layout:fixed the width-less Race Pace column gets only the LEFTOVER
   after every fixed-width column — which reaches zero once the container
   narrows toward the sum of fixed widths (~1050px), silently deleting the
   pace bars. The floor hands the bars a real share at every screen width and
   lets the container's existing horizontal scroller absorb the overflow.
   Screen-only: on paper (My Card print) the old squeeze-to-fit is the lesser
   evil — a clipped right edge is worse than thin bars. */
@media screen { .fl-table-fixed { min-width:1250px; } }
/* The floor alone was not enough: once Stride/Cad (and the admin 3D column)
   are on screen the fixed widths plus padding already exceed 1250px, so the
   pace bars still collapsed — for exactly the horses with the richest data.
   Giving the column a real width fixes it at the root: a fixed-layout table
   grows to the sum of its column widths and the container scrolls. Screen
   only, so print keeps squeeze-to-fit. */
@media screen { .fl-table-fixed th.fl-th-pace { width:120px; } }
.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; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fl-top-bar-left .fl-filter-label { padding:0; }
.fl-top-bar-right { flex:0 0 auto; }

/* Quick filters — the desktop's strip above the form (All / Wins / Wins &
   Places, then the five race types + All), in the top bar's left slot.
   Amber while a filter is active so a forgotten filter is obvious; faded
   with a padlock for anyone outside Proform Premium (RM Pro included). */
.fl-quick { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; padding:3px 6px; border:1px solid transparent; border-radius:6px; }
.fl-quick-active { background:#fffbeb; border-color:#f59e0b; }
.fl-quick-group { display:inline-flex; align-items:center; gap:3px; }
.fl-quick-group + .fl-quick-group { padding-left:8px; border-left:1px solid #d1d5db; }
.fl-quick-chip {
    padding:2px 8px; border-radius:9999px; border:1px solid #cbd5e1;
    background:#fff; color:#475569; font-size:10px; font-weight:700; line-height:1.4;
    cursor:pointer; white-space:nowrap; transition:all 0.15s;
}
.fl-quick-chip:hover { border-color:#94a3b8; background:#f8fafc; }
.fl-quick-chip.fl-quick-on { background:var(--brand, #1a365d); border-color:var(--brand, #1a365d); color:#fff; }
/* Race-type chips keep the desktop's caps and colours */
.fl-quick-chip[class*="fl-qt-"], .fl-quick-chip.fl-quick-all { text-transform:uppercase; letter-spacing:0.03em; }
.fl-quick-chip.fl-qt-1 { color:#15803d; }
.fl-quick-chip.fl-qt-2 { color:#c2410c; }
.fl-quick-chip.fl-qt-3 { color:#7c2d12; }
.fl-quick-chip.fl-qt-4 { color:#1d4ed8; }
.fl-quick-chip.fl-qt-5 { color:#6d28d9; }
.fl-quick-chip.fl-qt-1.fl-quick-on { background:#15803d; border-color:#15803d; color:#fff; }
.fl-quick-chip.fl-qt-2.fl-quick-on { background:#c2410c; border-color:#c2410c; color:#fff; }
.fl-quick-chip.fl-qt-3.fl-quick-on { background:#7c2d12; border-color:#7c2d12; color:#fff; }
.fl-quick-chip.fl-qt-4.fl-quick-on { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.fl-quick-chip.fl-qt-5.fl-quick-on { background:#6d28d9; border-color:#6d28d9; color:#fff; }
.fl-quick-locked .fl-quick-chip { opacity:0.5; cursor:not-allowed; }
.fl-quick-locked .fl-quick-chip:hover { border-color:#cbd5e1; background:#fff; }
.fl-quick-lock { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#7c3aed; cursor:pointer; white-space:nowrap; }
.fl-quick-readout { font-size:11px; font-weight:700; color:#b45309; white-space:nowrap; }
tr.fl-quick-empty td { text-align:center; font-size:11px; font-style:italic; color:#6b7280; padding:10px 6px !important; }
.fl-breaks-btn.fl-breaks-muted { opacity:0.55; }

/* 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; }

/* IRE pill on the OffGng header: the official (Irish) going wording */
.fl-gng-words {
    display:inline-flex; align-items:center;
    padding:1px 5px; border-radius:9999px; font-size:0.625rem; font-weight:600;
    cursor:pointer; border:1px solid #cbd5e1;
    background:#fff; color:#475569;
    vertical-align:middle; margin-left:4px; line-height:1.2;
}
.fl-gng-words:hover { background:#f1f5f9; }
.fl-gng-words.active { background:#15803d; color:#fff; border-color:#15803d; }

/* Race Tempo grade in the form lines (sectionals view) */
.fl-tempo { display:inline-block; padding:0 6px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap; }
.fl-tempo-g1, .fl-tempo-g2 { background:#dbe7ea; color:#06414F; }
.fl-tempo-g3 { background:#ececec; color:#3f3f46; }
.fl-tempo-g4, .fl-tempo-g5 { background:#fde9a8; color:#5c4400; }

/* 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. */
/* Headgear column — the first/second-time numeral is the signal, so it is the
   part that carries the weight. */
.fl-hg { white-space: nowrap; }
.fl-hg-n { color: #b45309; font-weight: 800; }
/* My Ratings "My" column — the figure this run earned on the viewer's default scale */
.fl-my { white-space: nowrap; font-weight: 700; color: #6d28d9; }
.fl-my-pre { color: #9ca3af; font-weight: 400; font-size: 0.9em; }
/* Trainer trend (T Trend): the yard's rating move in the 14 days before the run */
.fl-trend { white-space: nowrap; font-weight: 700; }
.fl-trend-up { color: #16a34a; }
.fl-trend-down { color: #dc2626; }
.fl-trend-flat, .fl-trend-none { color: #9ca3af; font-weight: 400; }
/* "N days break" separator rows (account preference; see getFormBreakDays) */
/* "Data change" lines — 1st time headgear, trainer change — sit UNDER the
   run they first applied to (newest-first order), the race-guide convention.
   Green so they never read as a break. */
tr.fl-change-row td {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #166534;
    background: #ecfdf5;
    padding: 2px 6px !important;
    border-bottom: 1px solid #d1fae5;
}
tr.fl-change-today td { border-top: 2px solid #86efac; }
tr.fl-break-row td {
    text-align: center;
    font-size: 10px;
    font-style: italic;
    color: #6b7280;
    background: #f9fafb;
    padding: 2px 6px;
    border-top: 1px dashed #d1d5db;
    border-bottom: 1px dashed #d1d5db;
}
.fl-breaks-btn.fl-breaks-on { border-color: #1d4ed8; color: #1d4ed8; }
.fl-changes-btn.fl-changes-on { border-color: #15803d; color: #15803d; }
.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;
}