/* Fabric Sample Follow-Ups (Sales)

   Scoped to .ffs-page so nothing here can leak into the rest of SSIS.

   Dark mode is its own set of values under html.dark-mode, matching how themeHelper.js swaps the
   Radzen theme - it is deliberately not an inversion of the light palette. */

.ffs-page {
    --ffs-page-bg: #f3f5f5;
    --ffs-surface: #ffffff;
    --ffs-surface-alt: #f6f8f8;
    --ffs-chart-surface: #fcfcfb;
    --ffs-border: #dde3e4;
    --ffs-border-strong: #c3cdcf;
    --ffs-text: #24303a;
    --ffs-muted: #5d6a71;
    --ffs-primary: #598087;
    --ffs-primary-dark: #436065;
    --ffs-info: #2cc8c8;
    --ffs-success: #5dbf74;
    --ffs-success-ink: #347a47;
    --ffs-success-tint: #e7f5ea;
    --ffs-warning: #fac152;
    --ffs-warning-ink: #855b06;
    --ffs-danger-ink: #b23e46;
    --ffs-danger: #d1646b;
    --ffs-series-blue: #376df5;
    --ffs-series-slate: #598087;
    --ffs-row-outstanding: #fff9ec;
    --ffs-row-quote: #dcebfa;
    --ffs-row-order: #d9f0de;
    --ffs-row-followed: #fbe1d9;
    --ffs-quote-edge: #86b4e6;
    --ffs-order-edge: #74c18a;
    --ffs-followed-edge: #e8a595;
    --ffs-danger-bg: #fbe3e4;
    --ffs-row-hover: #eef3f4;
    --ffs-pill-bg: #e2edef;
    --ffs-pill-ink: #35545a;
    --ffs-skeleton: #e6eaeb;
    --ffs-age-0: #c3d5d8;
    --ffs-age-1: #8fb0b5;
    --ffs-age-2: #5b8289;
    --ffs-age-alert: #d1646b;

    padding: 20px 24px;
    background: var(--ffs-page-bg);
    color: var(--ffs-text);
    min-height: 100%;
}

html.dark-mode .ffs-page {
    --ffs-page-bg: #151b20;
    --ffs-surface: #1e262d;
    --ffs-surface-alt: #232c34;
    --ffs-chart-surface: #1b2228;
    --ffs-border: #313d46;
    --ffs-border-strong: #46545e;
    --ffs-text: #e3e9eb;
    --ffs-muted: #a0aeb4;
    --ffs-primary: #80a4ab;
    --ffs-primary-dark: #8fb3ba;
    --ffs-success: #6fcf86;
    --ffs-success-ink: #8ade9f;
    --ffs-success-tint: #1f3326;
    --ffs-warning-ink: #f7cd73;
    --ffs-danger-ink: #ff9ca2;
    --ffs-danger: #f9777f;
    --ffs-series-blue: #6f95ff;
    --ffs-series-slate: #6b8a90;
    --ffs-row-outstanding: #28271f;
    --ffs-row-quote: #1d3447;
    --ffs-row-order: #1e3a28;
    --ffs-row-followed: #412a26;
    --ffs-quote-edge: #4a78a8;
    --ffs-order-edge: #4f9a67;
    --ffs-followed-edge: #9a6155;
    --ffs-danger-bg: #43262a;
    --ffs-row-hover: #28333b;
    --ffs-pill-bg: #2a4146;
    --ffs-pill-ink: #c4e2e7;
    --ffs-skeleton: #2a343c;
    --ffs-age-0: #3b5357;
    --ffs-age-1: #5a7c82;
    --ffs-age-2: #86a9af;
    --ffs-age-alert: #f9777f;
}

/* ---------------------------------------------------------------- shell */

.ffs-title h1 { font-size: 22px; font-weight: 700; margin: 0 0 2px; }
.ffs-title p { margin: 0 0 16px; color: var(--ffs-muted); font-size: 13px; }

.ffs-page .ffs-panel {
    background: var(--ffs-surface);
    border: 1px solid var(--ffs-border);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 14px 16px;
    box-shadow: none;
}

.ffs-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ffs-panel-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.ffs-scope { font-size: 12px; color: var(--ffs-muted); }
.ffs-hint { font-size: 12px; color: var(--ffs-muted); margin-left: auto; font-style: italic; }

.ffs-collapse {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--ffs-border-strong);
    background: var(--ffs-surface); color: var(--ffs-muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ffs-collapse:hover { background: var(--ffs-row-hover); }

/* ---------------------------------------------------------------- filters */

.ffs-filter-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.ffs-field { display: flex; flex-direction: column; gap: 4px; }
.ffs-field label { font-size: 12px; color: var(--ffs-muted); }
.ffs-field-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
.ffs-check-label { font-size: 13px; }
.ffs-dates { display: flex; align-items: center; gap: 6px; }
.ffs-dash { color: var(--ffs-muted); }
.ffs-filter-actions { display: flex; gap: 8px; margin-left: auto; }
.ffs-filter-actions .rz-button { white-space: nowrap; }

.ffs-segmented { display: inline-flex; border: 1px solid var(--ffs-border-strong); border-radius: 6px; overflow: hidden; }
.ffs-segment {
    border: 0; background: var(--ffs-surface); color: var(--ffs-text);
    padding: 7px 11px; font-size: 12px; cursor: pointer; white-space: nowrap;
    border-right: 1px solid var(--ffs-border);
}
.ffs-segment:last-child { border-right: 0; }
.ffs-segment:hover { background: var(--ffs-row-hover); }
.ffs-segment.is-active { background: var(--ffs-primary); color: #fff; }

.ffs-unassigned-strip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 12px; padding: 9px 12px;
    background: var(--ffs-surface-alt);
    border: 1px dashed var(--ffs-border-strong);
    border-radius: 6px; font-size: 12.5px; color: var(--ffs-muted);
}
.ffs-unassigned-strip .rzi { color: var(--ffs-primary); }

/* ---------------------------------------------------------------- KPI tiles */

.ffs-kpi-row {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px; margin-top: 14px;
}

.ffs-tile {
    text-align: left; cursor: pointer;
    background: var(--ffs-chart-surface);
    border: 1px solid var(--ffs-border); border-radius: 8px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
    color: var(--ffs-text); font: inherit;
}
.ffs-tile:hover { background: var(--ffs-row-hover); }
.ffs-tile.is-active { border: 2px solid var(--ffs-primary); padding: 11px 13px; }
/* The Outstanding tile wears the same cream as an outstanding row in the list, so the two read as one thing.
   Hover matches the rows too; is-clear (nothing outstanding) comes later and turns it green. */
.ffs-tile.ffs-tile-outstanding { background: var(--ffs-row-outstanding); }
.ffs-tile.ffs-tile-outstanding:hover { background: var(--ffs-row-hover); }
/* Converted quotes wear the light blue of a row with a quote, Converted orders the green of a row with an order. */
.ffs-tile.ffs-tile-quote { background: var(--ffs-row-quote); }
.ffs-tile.ffs-tile-order { background: var(--ffs-row-order); }
/* Followed up wears the pastel salmon of a chased row that has not converted. */
.ffs-tile.ffs-tile-followed { background: var(--ffs-row-followed); }
.ffs-tile.ffs-tile-quote:hover, .ffs-tile.ffs-tile-order:hover, .ffs-tile.ffs-tile-followed:hover { background: var(--ffs-row-hover); }
.ffs-tile-label { font-size: 12px; color: var(--ffs-muted); }
.ffs-tile-value { font-size: 32px; font-weight: 700; line-height: 1.1; }
.ffs-tile-sub { font-size: 11.5px; color: var(--ffs-muted); }
.ffs-unit { font-size: 15px; font-weight: 600; color: var(--ffs-muted); margin-left: 4px; }

.ffs-tile.is-clear { background: var(--ffs-success-tint); border-color: var(--ffs-success); }
.ffs-ok { color: var(--ffs-success-ink); display: inline-flex; align-items: center; gap: 8px; }
.ffs-ok .rzi { font-size: 34px; }

/* ---------------------------------------------------------------- charts */

.ffs-charts-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; margin-top: 12px; }

.ffs-chart-card {
    background: var(--ffs-chart-surface);
    border: 1px solid var(--ffs-border); border-radius: 8px; padding: 12px 14px;
}
.ffs-chart-card h3 { font-size: 13px; font-weight: 700; margin: 0 0 2px; }
.ffs-chart-note { font-size: 11.5px; color: var(--ffs-muted); margin: 0 0 8px; }
.ffs-chart-empty { padding: 28px 12px; text-align: center; color: var(--ffs-muted); font-size: 13px; }
.ffs-ok-panel {
    color: var(--ffs-success-ink); background: var(--ffs-success-tint);
    border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px;
}

.ffs-chart-slices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ffs-slice {
    font-size: 11px; padding: 3px 7px; cursor: pointer;
    border: 1px solid var(--ffs-border); border-radius: 999px;
    background: var(--ffs-surface); color: var(--ffs-muted);
}
.ffs-slice:hover { background: var(--ffs-row-hover); color: var(--ffs-text); }

/* Ageing: a plain bar chart in markup. Radzen's column series cannot put an icon in a value
   label, and the 30+ alert has to carry one - colour alone must never be the signal. */
.ffs-age-chart {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    align-items: end; height: 190px; padding-top: 6px;
}
.ffs-age-bar {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 6px; height: 100%; cursor: pointer; background: none; border: 0; font: inherit;
    border-radius: 6px; padding: 4px 2px; color: var(--ffs-text);
}
.ffs-age-bar:hover { background: var(--ffs-row-hover); }
.ffs-age-bar.is-active { outline: 2px solid var(--ffs-primary); }
.ffs-age-value { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.ffs-age-value.is-alert { color: var(--ffs-danger-ink); }
.ffs-age-value .rzi { font-size: 15px; }
.ffs-age-fill { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; }
.ffs-age-0 { background: var(--ffs-age-0); }
.ffs-age-1 { background: var(--ffs-age-1); }
.ffs-age-2 { background: var(--ffs-age-2); }
.ffs-age-alert { background: var(--ffs-age-alert); }
.ffs-age-label { font-size: 12px; color: var(--ffs-muted); }
.ffs-age-label.is-alert { color: var(--ffs-danger-ink); font-weight: 700; }
.ffs-age-axis { text-align: center; font-size: 11px; color: var(--ffs-muted); margin-top: 6px; }

/* ---------------------------------------------------------------- insights */

.ffs-insights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.ffs-insight h4 { font-size: 12px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em; color: var(--ffs-muted); }
.ffs-insight-empty { font-size: 12px; color: var(--ffs-muted); padding: 14px 0; }
.ffs-dashed { border: 1px dashed var(--ffs-border-strong); border-radius: 6px; padding: 14px 10px; text-align: center; }
.ffs-footnote { font-size: 11px; color: var(--ffs-muted); margin-top: 8px; }

.ffs-hbar {
    display: grid; grid-template-columns: 1fr 70px auto; align-items: center; gap: 8px;
    width: 100%; padding: 4px 6px; margin-bottom: 2px; cursor: pointer;
    background: none; border: 0; border-radius: 4px; font: inherit; color: var(--ffs-text);
    text-align: left;
}
.ffs-hbar:hover { background: var(--ffs-row-hover); }
.ffs-hbar.is-active { outline: 1px solid var(--ffs-primary); }
.ffs-hbar.is-static { cursor: default; }
.ffs-hbar.is-static:hover { background: none; }
.ffs-insight-lead { font-size: 11px; color: var(--ffs-muted); margin: 0 0 8px; }
.ffs-hbar-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.ffs-hbar-name .rzi { font-size: 14px; color: var(--ffs-muted); }
.ffs-hbar-track { background: var(--ffs-border); border-radius: 3px; height: 9px; overflow: hidden; }
.ffs-hbar-fill { display: block; height: 100%; background: var(--ffs-primary); border-radius: 3px; }
.ffs-hbar-value { font-size: 11.5px; color: var(--ffs-muted); white-space: nowrap; }

/* ---------------------------------------------------------------- grid */

.ffs-grid-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ffs-grid-toolbar h2 { font-size: 15px; font-weight: 700; margin: 0; }
.ffs-count { font-size: 12px; color: var(--ffs-muted); }
.ffs-grid-foot {
    display: flex; flex-wrap: wrap; gap: 6px 22px;
    padding: 10px 4px 2px; font-size: 12.5px; color: var(--ffs-muted);
}
.ffs-grid-foot strong { color: var(--ffs-text); font-size: 14px; }
.ffs-toolbar-spacer { flex: 1; }
.ffs-legend { font-size: 11.5px; color: var(--ffs-muted); display: inline-flex; align-items: center; gap: 5px; }
.ffs-legend-swatch { width: 11px; height: 11px; border-radius: 2px; background: var(--ffs-row-outstanding); border: 1px solid var(--ffs-border-strong); }
.ffs-legend-swatch.ffs-swatch-quote { background: var(--ffs-row-quote); }
.ffs-legend-swatch.ffs-swatch-order { background: var(--ffs-row-order); }
.ffs-legend-swatch.ffs-swatch-followed { background: var(--ffs-row-followed); }
.ffs-saved { font-size: 12px; color: var(--ffs-success-ink); display: inline-flex; align-items: center; gap: 4px; }

.ffs-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
    background: var(--ffs-pill-bg); color: var(--ffs-pill-ink);
    padding: 3px 5px 3px 9px; border-radius: 999px;
}
.ffs-chip-x { border: 0; background: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 3px; }

/* The grid header is deliberately NOT restyled.

   Every other grid in SSIS uses the Radzen "software" theme's own header, and dark mode is already
   handled centrally in dark-mode-enhancements.css. An earlier version here forced a teal background
   with white text, which left the sort arrows and filter funnels effectively invisible in light
   mode - they are drawn in the theme's ink, which assumes the theme's own background. Inheriting
   the theme fixes the contrast and keeps this screen looking like the rest of the application.

   Only weight and size are nudged, and the header controls are given room. */
.ffs-page .ffs-grid .rz-grid-table thead th { font-size: 13px; font-weight: 600; }
.ffs-page .ffs-grid td { font-size: 13px; }
.ffs-page .ffs-grid tbody tr { min-height: 50px; }
.ffs-page .ffs-grid tbody tr.ffs-row-outstanding > td { background: var(--ffs-row-outstanding); }
/* Rows that have converted: light blue for a quote, green for an order (an order wins - see FollowUpGridRules.RowClass). */
.ffs-page .ffs-grid tbody tr.ffs-row-quote > td { background: var(--ffs-row-quote); }
.ffs-page .ffs-grid tbody tr.ffs-row-order > td { background: var(--ffs-row-order); }
/* Chased but not converted (yet): pastel salmon. */
.ffs-page .ffs-grid tbody tr.ffs-row-followed > td { background: var(--ffs-row-followed); }
.ffs-page .ffs-grid tbody tr:hover > td,
.ffs-page .ffs-grid tbody tr.ffs-row-outstanding:hover > td,
.ffs-page .ffs-grid tbody tr.ffs-row-followed:hover > td,
.ffs-page .ffs-grid tbody tr.ffs-row-quote:hover > td,
.ffs-page .ffs-grid tbody tr.ffs-row-order:hover > td { background: var(--ffs-row-hover); }

.ffs-strong { font-weight: 600; }
.ffs-muted { color: var(--ffs-muted); font-size: 12px; }
.ffs-email { color: var(--ffs-primary); }
.ffs-date { font-size: 13px; }
.ffs-ago { font-size: 11px; color: var(--ffs-muted); }
.ffs-ago.is-stale { color: var(--ffs-danger-ink); font-weight: 600; }

.ffs-pill-unassigned {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    border: 1px dashed var(--ffs-border-strong); color: var(--ffs-muted);
}
/* A showroom chosen from the customer's postcode: a quiet marker, with the detail in its tooltip. */
.ffs-allocated { margin-left: 4px; color: var(--ffs-muted); cursor: help; }
.ffs-allocated .rzi { font-size: 14px; vertical-align: -2px; }
.ffs-fabric-badge {
    display: inline-block; min-width: 24px; text-align: center;
    background: var(--ffs-pill-bg); color: var(--ffs-pill-ink);
    border-radius: 999px; font-size: 12px; font-weight: 600; padding: 2px 8px;
}
.ffs-refs { display: flex; flex-wrap: wrap; gap: 3px; }
.ffs-ref-pill {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--ffs-info); color: #06343a; font-weight: 600;
    border: 0; font-family: inherit; line-height: inherit; cursor: pointer;
}
.ffs-ref-pill:hover { text-decoration: underline; filter: brightness(0.95); }

/* A quote or order a person linked to the request by hand: a link icon, the colour of the quote or order tile, and a cross
   to remove it. The ones found automatically keep the plain pill above. */
.ffs-ref-wrap { display: inline-flex; align-items: center; max-width: 100%; }
.ffs-ref-wrap.is-manual { --tone-bg: var(--ffs-row-quote); --tone-edge: var(--ffs-quote-edge); }
.ffs-ref-wrap.is-manual.is-order { --tone-bg: var(--ffs-row-order); --tone-edge: var(--ffs-order-edge); }
.ffs-ref-wrap.is-manual .ffs-ref-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--tone-bg); color: var(--ffs-text); border: 1px solid var(--tone-edge); border-right: 0;
    border-radius: 999px 0 0 999px;
}
.ffs-ref-pill .rzi { font-size: 13px; }
.ffs-ref-remove {
    display: inline-flex; align-items: center; padding: 1px 5px 1px 3px; line-height: 1; cursor: pointer;
    background: var(--tone-bg); color: var(--ffs-muted); border: 1px solid var(--tone-edge); border-left: 0;
    border-radius: 0 999px 999px 0; font: inherit;
}
.ffs-ref-remove .rzi { font-size: 13px; }
.ffs-ref-remove:hover { color: var(--ffs-danger-ink); }
.ffs-ref-add {
    display: inline-flex; align-items: center; padding: 1px 6px; cursor: pointer; line-height: 1; font: inherit;
    background: transparent; color: var(--ffs-primary); border: 1px dashed var(--ffs-border-strong); border-radius: 999px;
}
.ffs-ref-add .rzi { font-size: 15px; }
.ffs-ref-add:hover { background: var(--ffs-row-hover); border-color: var(--ffs-primary); }
.ffs-sheet-marker {
    font-size: 10px; margin-left: 5px; padding: 1px 5px;
    border: 1px solid var(--ffs-border-strong); border-radius: 4px; color: var(--ffs-muted);
}
.ffs-status { display: flex; align-items: center; gap: 5px; }
.ffs-status.is-pending { font-weight: 700; }
.ffs-status .rzi { color: var(--ffs-muted); font-size: 16px; }

.ffs-note-cell {
    display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; font: inherit; color: var(--ffs-text); padding: 0;
}
.ffs-note-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.ffs-note-cell .rzi { color: var(--ffs-muted); font-size: 16px; }

.ffs-note-editor {
    background: var(--ffs-surface-alt); border: 1px solid var(--ffs-border);
    border-radius: 6px; padding: 12px; margin-top: 10px;
}
.ffs-note-editor label { display: block; font-size: 12px; color: var(--ffs-muted); margin-bottom: 5px; }
.ffs-note-editor textarea {
    width: 100%; border: 1px solid var(--ffs-primary); border-radius: 5px;
    padding: 8px; font: inherit; font-size: 13px; resize: vertical;
    background: var(--ffs-surface); color: var(--ffs-text);
}
.ffs-note-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ---------------------------------------------------------------- expanded row */

.ffs-expand {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr) minmax(0, 1.3fr); gap: 20px;
    background: var(--ffs-surface-alt); padding: 14px 16px;
    /* The grid is wider than most screens and scrolls sideways, with its scrollbar below this panel. Pinned to the
       left edge of the visible part, at that width (ffsWatchGrid publishes it), the form is always in view. Without
       the script the variable is unset and the panel is simply full width, as it was. */
    position: sticky; left: 0; box-sizing: border-box; width: var(--ffs-view-width, 100%);
}
/* Radzen clips the cell that holds an opened row (overflow: hidden), which made the panel stick to that cell rather
   than to the grid's scrolling area. Letting it overflow is what lets position: sticky above do its job. */
.ffs-page .ffs-grid .rz-grid-table tbody tr.rz-expanded-row-content > td { overflow: visible; }
/* Notes above fabrics, stacked on the left. */
.ffs-expand-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ffs-expand-col h5 { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ffs-muted); margin: 0 0 8px; }
.ffs-fabric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ffs-fabric-card {
    display: grid; grid-template-columns: 20px 1fr; gap: 2px 8px;
    background: var(--ffs-surface); border: 1px solid var(--ffs-border);
    border-radius: 5px; padding: 6px 8px; font-size: 12px;
}
.ffs-fabric-no { grid-row: span 2; color: var(--ffs-muted); font-weight: 700; }
.ffs-fabric-name { font-weight: 600; }
.ffs-fabric-colour { color: var(--ffs-muted); }
.ffs-words { margin: 0; font-size: 12.5px; }
.ffs-words dt { color: var(--ffs-muted); font-size: 11px; margin-top: 6px; }
.ffs-words dd { margin: 0; }
.ffs-note-full { font-size: 12.5px; white-space: pre-wrap; }
.ffs-imported-note {
    font-size: 11.5px; color: var(--ffs-muted); margin-top: 10px;
    display: flex; gap: 6px; align-items: flex-start;
}

/* ---------------------------------------------------------------- column filter */

/* The contents of a column's filter popup. Radzen draws the popup itself - surface, border and
   shadow - so this only lays out what goes inside it. */
.ffs-colfilter-pop { width: 230px; padding: 10px; box-sizing: border-box; }
.ffs-colfilter-pop label { display: block; font-size: 12px; color: var(--ffs-muted); margin-bottom: 5px; }
.ffs-colfilter-pop input {
    width: 100%; padding: 6px 8px; font: inherit; font-size: 13px; box-sizing: border-box;
    border: 1px solid var(--ffs-border-strong); border-radius: 4px;
    background: var(--ffs-surface); color: var(--ffs-text);
}
.ffs-colfilter-hint { font-size: 11px; color: var(--ffs-muted); margin-top: 4px; }
.ffs-colfilter-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }

/* The Status popup is a checklist rather than a text box, so undo the text-box styling the shared
   popup rules above would otherwise put on every checkbox. */
.ffs-status-pop { width: 250px; }
.ffs-status-options { display: flex; flex-direction: column; gap: 2px; }
.ffs-colfilter-pop .ffs-status-option {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 4px;
    font-size: 13px; color: var(--ffs-text); border-radius: 4px; cursor: pointer;
}
.ffs-colfilter-pop .ffs-status-option:hover { background: rgba(127, 127, 127, .14); }
.ffs-colfilter-pop .ffs-status-option input {
    width: auto; padding: 0; margin: 0; flex: none; cursor: pointer;
}
.ffs-status-option .rzi { font-size: 18px; color: var(--ffs-muted); }
/* An outcome sits under Spoke to customer, indented with a guide line, as in the follow-up box. */
.ffs-colfilter-pop .ffs-status-option.is-outcome {
    margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--ffs-border-strong); border-radius: 0 4px 4px 0;
}

/* ---------------------------------------------------------------- empty & loading */

.ffs-empty { text-align: center; padding: 32px 16px; color: var(--ffs-muted); }
.ffs-empty .rzi { font-size: 34px; }
.ffs-empty h3 { font-size: 15px; color: var(--ffs-text); margin: 8px 0 4px; }
.ffs-empty p { font-size: 13px; max-width: 520px; margin: 0 auto; }
.ffs-empty-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

.ffs-skeleton { background: var(--ffs-skeleton); border-radius: 8px; animation: ffs-pulse 1.4s ease-in-out infinite; }
.ffs-skeleton-tile { height: 104px; }
.ffs-skeleton-chart { height: 220px; }
@keyframes ffs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
    .ffs-skeleton { animation: none; }
}

/* ---------------------------------------------------------------- narrow screens

   Desktop-first by design - showroom staff are on laptops - but the page should not break
   when the nav is open on a smaller screen. */

/* Five tiles: three across, then two, before they get too narrow to read. */
@media (max-width: 1500px) {
    .ffs-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1400px) {
    .ffs-insights { grid-template-columns: repeat(2, 1fr); }
    /* Too narrow for three columns: the order history drops under the other two, full width. */
    .ffs-expand { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); }
    .ffs-expand-orders { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
    .ffs-kpi-row { grid-template-columns: 1fr 1fr; }
    .ffs-charts-row { grid-template-columns: 1fr; }
    .ffs-expand { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- showroom answer & typed refs

   Added when the customer's own "nearest showroom" answer started being kept. About half the
   answers are "Online Purchase", which maps to no showroom - showing the words is better than
   collapsing them into "Unassigned", so it gets its own quieter pill, distinct from both a real
   showroom and a genuine blank. */

.ffs-pill-answer {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--ffs-surface-alt); color: var(--ffs-muted);
    border: 1px solid var(--ffs-border);
}

.ffs-address { font-size: 12.5px; line-height: 1.45; }
.ffs-address .ffs-muted { font-size: 11.5px; }
.ffs-h5-spaced { margin-top: 14px !important; }

/* ---------------------------------------------------------------- note editing in the row

   The editor used to sit at the foot of the grid, where the row you were reading had already
   scrolled away from it. It now renders inside the expanded row, directly beneath the customer
   it belongs to. */

.ffs-note-edit textarea {
    width: 100%; min-height: 84px; resize: vertical;
    border: 1px solid var(--ffs-primary); border-radius: 5px;
    padding: 8px; font: inherit; font-size: 13px;
    background: var(--ffs-surface); color: var(--ffs-text);
}
.ffs-note-edit textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ffs-row-hover);
}
.ffs-note-edit .ffs-note-actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}
.ffs-note-edit-btn { margin-top: 8px; }

.ffs-note-error { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--ffs-danger-ink); }

/* ---------------------------------------------------------------- follow-up box and history */

.ffs-followup-box {
    border: 1px solid var(--ffs-primary); border-radius: 6px;
    background: var(--ffs-surface); padding: 10px 12px;
}
.ffs-followup-box h5 { margin: 0 0 8px; }
.ffs-followup-field { margin-bottom: 8px; }
.ffs-followup-label { display: block; font-size: 12px; color: var(--ffs-muted); margin-bottom: 4px; }
.ffs-followup-box textarea {
    width: 100%; min-height: 70px; resize: vertical;
    border: 1px solid var(--ffs-border-strong); border-radius: 5px;
    padding: 8px; font: inherit; font-size: 13px;
    background: var(--ffs-surface); color: var(--ffs-text);
}
.ffs-followup-box textarea:focus { outline: none; border-color: var(--ffs-primary); box-shadow: 0 0 0 2px var(--ffs-row-hover); }
.ffs-followup-hint { margin: 0 0 6px; font-size: 12px; color: var(--ffs-muted); }
.ffs-optional { font-weight: 400; }

/* Finding a quote or order by reference to link it: a search box, matches listed beneath as you type, and the chosen one
   shown in a card in the colour of the quote or order tile. */
.ffs-linksearch { display: flex; flex-direction: column; gap: 6px; }
.ffs-linksearch-field {
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    background: var(--ffs-surface); border: 1px solid var(--ffs-border-strong); border-radius: 6px;
}
.ffs-linksearch-field:focus-within { border-color: var(--ffs-primary); box-shadow: 0 0 0 2px var(--ffs-row-hover); }
.ffs-linksearch-field .rzi { font-size: 18px; color: var(--ffs-muted); }
.ffs-linksearch-input {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 9px 0;
    font: inherit; font-size: 13px; color: var(--ffs-text);
}
.ffs-linksearch-busy { font-size: 12px; color: var(--ffs-muted); white-space: nowrap; }
.ffs-linksearch-msg { font-size: 12px; color: var(--ffs-muted); }
.ffs-linksearch-msg.is-error { color: var(--ffs-danger-ink); }

.ffs-linkres {
    list-style: none; margin: 0; padding: 0; max-height: 270px; overflow-y: auto;
    background: var(--ffs-surface); border: 1px solid var(--ffs-border-strong); border-radius: 6px;
}
.ffs-linkres-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; cursor: pointer;
    font-size: 13px; border-bottom: 1px solid var(--ffs-border);
}
.ffs-linkres-row:last-child { border-bottom: 0; }
.ffs-linkres-row.is-active { background: var(--ffs-row-hover); }
.ffs-linkres-row.is-blocked { opacity: .55; cursor: not-allowed; }
.ffs-linkres-ref { font-weight: 700; }
.ffs-linkres-who { color: var(--ffs-text); }
.ffs-linkres-date { color: var(--ffs-muted); font-size: 12px; }
.ffs-linkres-note { margin-left: auto; font-size: 11.5px; color: var(--ffs-warning-ink); }
.ffs-linkres-type {
    font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
    background: var(--ffs-row-quote); border: 1px solid var(--ffs-quote-edge);
}
.ffs-linkres-type.is-order, .ffs-linkchosen.is-order .ffs-linkres-type { background: var(--ffs-row-order); border-color: var(--ffs-order-edge); }

.ffs-linkchosen {
    padding: 8px 10px; border-radius: 6px; font-size: 13px;
    background: var(--ffs-row-quote); border: 1px solid var(--ffs-quote-edge);
}
.ffs-linkchosen.is-order { background: var(--ffs-row-order); border-color: var(--ffs-order-edge); }
.ffs-linkchosen-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ffs-linkchosen-main .rzi { font-size: 18px; }
.ffs-linkchosen .ffs-linkres-type { background: transparent; }
.ffs-linkchosen-clear {
    margin-left: auto; display: inline-flex; align-items: center; padding: 2px; line-height: 1; cursor: pointer;
    background: transparent; border: 0; border-radius: 50%; color: var(--ffs-muted);
}
.ffs-linkchosen-clear:hover:not(:disabled) { color: var(--ffs-danger-ink); background: var(--ffs-row-hover); }
.ffs-linkchosen-warn { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; color: var(--ffs-warning-ink); }
.ffs-linkchosen-warn .rzi { font-size: 16px; }

/* The status choice in the follow-up box: the steps in a row. Colours follow the same meanings as the tiles and rows
   (quote blue, order green). */
.ffs-journey { display: flex; flex-direction: column; gap: 10px; }
.ffs-journey-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.ffs-step {
    --tone-bg: var(--ffs-row-hover); --tone-edge: var(--ffs-primary);
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 7px 13px; font: inherit; font-size: 13px; line-height: 1.2;
    color: var(--ffs-text); background: var(--ffs-surface);
    border: 1px solid var(--ffs-border-strong); border-radius: 8px; cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.ffs-step .rzi { font-size: 18px; color: var(--ffs-muted); }
.ffs-step:hover:not(:disabled) { background: var(--ffs-row-hover); border-color: var(--tone-edge); }
.ffs-step:focus-visible { outline: 2px solid var(--ffs-primary); outline-offset: 2px; }
.ffs-step:disabled { opacity: .6; cursor: default; }
.ffs-step.is-selected {
    background: var(--tone-bg); border-color: var(--tone-edge);
    box-shadow: inset 0 0 0 1px var(--tone-edge); font-weight: 600;
}
.ffs-step.is-selected .rzi { color: var(--ffs-text); }
.ffs-step .ffs-step-tick { font-size: 17px; margin-left: 2px; color: var(--ffs-success-ink); }
.ffs-step[data-tone="quote"] { --tone-bg: var(--ffs-row-quote); --tone-edge: var(--ffs-quote-edge); }
.ffs-step[data-tone="order"] { --tone-bg: var(--ffs-row-order); --tone-edge: var(--ffs-order-edge); }
.ffs-step[data-tone="followed"] { --tone-bg: var(--ffs-row-followed); --tone-edge: var(--ffs-followed-edge); }
.ffs-step[data-tone="danger"] { --tone-bg: var(--ffs-danger-bg); --tone-edge: var(--ffs-danger); }
.ffs-step[data-tone="muted"] { --tone-bg: var(--ffs-surface-alt); --tone-edge: var(--ffs-muted); }

.ffs-history { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--ffs-border-strong); }
.ffs-history li { margin: 0 0 10px; }
.ffs-history li:last-child { margin-bottom: 0; }
.ffs-history-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.ffs-history-status {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--ffs-pill-bg); color: var(--ffs-pill-ink);
    border-radius: 999px; padding: 1px 8px; font-size: 12px;
}
.ffs-history-status .rzi { font-size: 14px; }
/* The follow-up that linked a quote or order by hand. */
.ffs-history-link {
    display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 1px 8px; border-radius: 999px;
    background: var(--ffs-row-quote); border: 1px solid var(--ffs-quote-edge); color: var(--ffs-text);
}
.ffs-history-link .rzi { font-size: 14px; }
.ffs-history-link.is-removed { text-decoration: line-through; opacity: .7; }
.ffs-history-note { margin-top: 2px; font-size: 12.5px; color: var(--ffs-muted); white-space: pre-wrap; }

/* ---------------------------------------------------------------- order & quote history

   Beside the contact details in an expanded row. Newest first; scrolls rather than stretching the row
   when a customer has bought a lot. A product's description is clamped to two lines, with the whole of it
   in the tooltip. */

.ffs-orders {
    list-style: none; margin: 0; padding: 0 4px 0 0;
    max-height: 340px; overflow-y: auto;
}
.ffs-order { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ffs-border); }
.ffs-order:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ffs-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.ffs-order-type {
    font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
    background: var(--ffs-pill-bg); color: var(--ffs-pill-ink);
}
.ffs-order-type.is-order { background: var(--ffs-success-tint); color: var(--ffs-success-ink); }
.ffs-order-date { font-weight: 600; }
.ffs-order-cancelled { font-size: 11px; font-weight: 700; color: var(--ffs-danger-ink); }
.ffs-order.is-cancelled .ffs-order-products { opacity: .7; }
.ffs-order-products { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; }
.ffs-order-products li {
    margin: 0 0 3px; line-height: 1.35;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ffs-order-products li.ffs-muted { display: block; }