/* ============================================================================
 * fuel-filters.css — the page-level filter bar on Client Schedules.
 * ----------------------------------------------------------------------------
 * Written against the tokens that actually exist in styles.css:
 *
 *     --text-primary  --text-sec  --text-muted
 *     --surface  --surface-1  --surface-2  --surface-3
 *     --border  --border-strong
 *     --accent-primary  --success  --warning  --error
 *     --radius  --radius-sm  --shadow-sm
 *
 * Every var() that could plausibly be themed away carries a fallback. An
 * undefined custom property with no fallback resolves to `unset`, which is how
 * an earlier version of this tab ended up rendering flat grey — worth not
 * repeating.
 *
 * The bar is one button plus whatever is applied. Everything else lives in a
 * popover, so the page's resting state is a search box, a button, and the
 * client cards — not five dropdowns above the fold.
 * ==========================================================================*/

/* Applied filters left, button right. `position` moved off this row onto
   .ffl-anchor — the popover has to hang off the BUTTON, and anchoring it to a
   row that stretches the full width would put it under the chips. */
.ffl-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -6px 0 16px;
}

.ffl-anchor {
  position: relative;
  flex: none;
}

.ffl-btn.on {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.ffl-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--accent-primary);
  color: var(--surface, #fff);
  font-size: 0.66rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── Applied chips ─────────────────────────────────────────────────────────
 *
 * A count on a closed button tells you there are three filters. It does not
 * tell you one of them is a rate range set ten minutes ago and forgotten, which
 * is the failure this row exists to prevent — a page silently showing a third
 * of its data with no visible reason. */

.ffl-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  /* Nudged down so a single row of chips centres against the button rather
     than sitting a couple of pixels proud of it. */
  padding-top: 4px;
}

/* ── One axis ─────────────────────────────────────────────────────────────
 *
 * The axis is named once and its values sit beside it, so "Dry Van" is
 * visibly an equipment type rather than something you have to place. */

.ffl-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 3px 5px 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.ffl-group-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ffl-more {
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-sec);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ffl-more:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* Clears the whole axis. Ticking four equipment types off one at a time to get
   back to "no equipment filter" is four clicks; this is one. */
.ffl-group-x {
  width: 20px;
  height: 20px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.ffl-group-x:hover {
  background: var(--surface-3, var(--surface));
  color: var(--error);
}

.ffl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 5px 8px 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent-primary);
  background: var(--accent-soft, var(--accent-soft));
  color: var(--accent-primary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ffl-chip .x {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.6;
}

.ffl-chip:hover .x {
  opacity: 1;
}

.ffl-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--amber-glow, var(--accent-soft));
}

/* ── Popover ───────────────────────────────────────────────────────────── */

.ffl-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(420px, calc(100vw - 40px));
  max-height: min(560px, 70vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius, 14px);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.ffl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.88rem;
}

/* ── Sections ──────────────────────────────────────────────────────────────
 *
 * One open at a time. Four expanded lists — two of them eleven rows long —
 * would be a 1,500px popover with the rate slider permanently below the
 * scroll. The head carries its own state ("3 selected", "4 in use of 10") so a
 * closed section still answers what it is set to. */

.ffl-section + .ffl-section {
  border-top: 1px solid var(--border);
}

.ffl-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ffl-section-head:hover {
  background: var(--surface-2);
}

.ffl-section-title {
  flex: none;
}

.ffl-section-note {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ffl-caret {
  flex: none;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.ffl-section-body {
  padding: 2px 10px 14px;
}

/* ── Option lists ──────────────────────────────────────────────────────── */

.ffl-optsearch {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.83rem;
}

.ffl-optsearch:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--amber-glow, var(--accent-soft));
}

.ffl-opts {
  max-height: 240px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.ffl-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-sm, 10px);
  color: var(--text-sec);
  font-size: 0.83rem;
  cursor: pointer;
}

.ffl-opt:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.ffl-opt.on {
  color: var(--text-primary);
  font-weight: 600;
}

.ffl-opt input {
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.ffl-opt-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* How many tables carry this value — the option is information before it is
   pressed. "Reefer 4" says the comparison is worth opening. */
.ffl-opt-n {
  flex: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* A value the vocabulary offers but no table uses. Shown rather than hidden:
   "no Reefer table exists anywhere" is a real answer, and a user who can't
   find Reefer in the list has no way to tell that from a broken filter. */
.ffl-opt.none .ffl-opt-label,
.ffl-opt.none .ffl-opt-n {
  opacity: 0.45;
}

.ffl-opt.none:hover .ffl-opt-label,
.ffl-opt.none:hover .ffl-opt-n {
  opacity: 0.75;
}

.ffl-opt-label em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ffl-opt-empty {
  padding: 10px 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.ffl-hint {
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.ffl-hint strong {
  color: var(--text-sec);
}

/* ── Range slider ──────────────────────────────────────────────────────────
 *
 * Two range inputs stacked over one track. Native <input type=range> has no
 * two-thumb mode, and the alternatives are a dependency or a mousedown handler
 * of our own — both worse than two accessible inputs that keyboard users can
 * already drive. pointer-events are off on the input except at the thumb, or
 * the upper input would swallow every click meant for the lower one.
 */

.ffl-range {
  position: relative;
  height: 34px;
  margin: 6px 2px 2px;
  /* The whole strip is a press target: a press off the handles jumps the
     nearer one there. Before this the only grabbable pixels were two 16px
     thumbs, which is what made the control feel like it had to be wrestled. */
  cursor: pointer;
  touch-action: none;
}

.ffl-range-track {
  position: absolute;
  top: 15px;
  pointer-events: none;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3, var(--surface-2));
}

.ffl-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent-primary);
}

.ffl-range-in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.ffl-range-in::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--surface, #fff);
  background: var(--accent-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
}

.ffl-range-in:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.ffl-range-in::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--surface, #fff);
  background: var(--accent-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
}

.ffl-range-in:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--amber-glow, var(--accent-border));
}

.ffl-range-vals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-sec);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ffl-range-mid {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}