/* ==========================================================================
   Filter drawer field components — generalised from the bank-transactions
   filter drawer so every page's filter looks/behaves the same (Peter, 29 Jun).
   Use inside a .filter-panel--drawer .filter-panel__body.
   ========================================================================== */

.fgroup { margin-bottom: 0; }                 /* 24px gap comes from filter-panel__body */
.fgroup__label {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: 12px;
}
.fgroup__label.is-active::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FF9F00;
  margin-left: 7px;
  vertical-align: middle;
}

/* Segmented choice (All / X / Y) */
.fseg {
  display: flex;
  flex-wrap: wrap;                  /* >3 options wrap instead of cropping (e.g. Recurring) */
  gap: 2px;
  background: var(--color-bg-translucent);
  border-radius: var(--radius-md);
}
.fseg__pill {
  flex: 1 0 auto;
  min-width: 30%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 6px 10px;
  font: inherit;
  font-size: 16px;
  border: var(--border-width) solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.fseg__pill.is-on {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
/* Multi-row segmented (e.g. Status: 6 options on two rows) — 12px between the rows,
   columns stay tight at the base 2px (Peter, invoice filter Status). */
.fseg--wrap { row-gap: 12px; }

/* Two fields side by side (Client name + Invoice number; Address + Reference; the Download row). */
.fcols { display: flex; gap: 24px; }
.fcols > * { flex: 1; min-width: 0; }

/* Download buttons in the filter drawer (export Invoices / Clients) — a bordered box,
   label left + download icon right, matching the Figma "Container / Text / Logo". */
.fdl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 11px 7px 14px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
}
.fdl:hover { background: var(--color-bg-subtle); }
.fdl svg { width: 20px; height: 20px; flex: none; }

/* From | To range (date or amount) */
.frange {
  display: flex;
  align-items: stretch;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.frange__half {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
}
.frange__half + .frange__half { border-left: var(--border-width) solid var(--color-border); }
.frange__affix { color: var(--color-border-strong); font-size: 14px; flex: none; }
.frange input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  width: 100%;
  min-width: 0;
  padding: 0;
}

/* The themed date/amount popovers (lifted from the transactions filter so they
   look + behave identically). Buttons .js-fdate / .js-famt open these. */
.frange__btn { cursor: pointer; background: none; border: none; font: inherit; color: var(--color-text); text-align: left; }
.frange__val { font-size: 14px; color: var(--color-text); }
.frange__val--empty { color: var(--color-border-strong); }

.famtmenu { position: fixed; z-index: 10001; width: 224px; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); padding: 10px; }
.famtmenu .input { width: 100%; margin-bottom: 8px; }
.famt-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 230px; overflow-y: auto; }
.famt-preset { height: 36px; border: none; background: var(--color-bg-subtle); border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 14px; color: var(--color-text); }
.famt-preset:hover { background: var(--color-border); }
.famt-preset.is-on { background: var(--color-text); color: var(--color-surface); }

.fcal { position: fixed; z-index: 10001; width: 286px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown); padding: 14px; }
/* the multi/range calendar carries a foot with two buttons — a touch wider so
   "Weekdays this month" + "Confirm 23 days" sit on one line (Peter, 17 Jul) */
.fcal:has(.fcal__foot) { width: 340px; }
.fcal__hint { margin: 0 0 10px; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.fcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fcal__nav { width: 30px; height: 30px; border: none; background: none; border-radius: 50%; cursor: pointer; color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; }
.fcal__nav:hover { background: var(--color-bg-subtle); }
.fcal__nav svg { width: 18px; height: 18px; }
/* Confirm foot on the multi-pick + range calendars (Peter, 17 Jul) */
.fcal__foot { margin-top: 10px; padding-top: 10px; border-top: var(--border-width) solid var(--color-border); display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.fcal__confirm { padding: 7px 16px; white-space: nowrap; }
.fcal__quick { margin-right: auto; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.fcal__quick:hover { color: var(--color-text); }
.fcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fcal__dow { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; padding: 6px 0; font-weight: var(--weight-medium); }
.fcal__day { height: 34px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 14px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.fcal__day:hover { background: var(--color-bg-subtle); }
.fcal__day--in, .fcal__day--in:hover { background: var(--color-bg-subtle); border-radius: 0; box-shadow: -2px 0 0 var(--color-bg-subtle), 2px 0 0 var(--color-bg-subtle); }
.fcal__day--from, .fcal__day--to, .fcal__day--from:hover, .fcal__day--to:hover { color: var(--color-surface); border-radius: 0; background: radial-gradient(circle at center, var(--color-text) 0 15px, transparent 15px); }
.fcal__day--linkr, .fcal__day--linkr:hover { background: radial-gradient(circle at center, var(--color-text) 0 15px, transparent 15px), linear-gradient(to right, transparent 50%, var(--color-bg-subtle) 50%); box-shadow: 2px 0 0 var(--color-bg-subtle); }
.fcal__day--linkl, .fcal__day--linkl:hover { background: radial-gradient(circle at center, var(--color-text) 0 15px, transparent 15px), linear-gradient(to left, transparent 50%, var(--color-bg-subtle) 50%); box-shadow: -2px 0 0 var(--color-bg-subtle); }
.fcal__day--off, .fcal__day--off:hover { color: var(--color-border); cursor: not-allowed; background: none; }
.fcal__title { border: none; background: none; font: inherit; font-weight: var(--weight-bold); font-size: var(--text-base); cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--color-text); }
.fcal__title:hover { background: var(--color-bg-subtle); }
.fcal__mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fcal__cell { height: 46px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 14px; color: var(--color-text); }
.fcal__cell:hover { background: var(--color-bg-subtle); }
.fcal__cell.is-sel, .fcal__cell.is-sel:hover { background: var(--color-text); color: var(--color-surface); }
.fcal__cell.is-off, .fcal__cell.is-off:hover { color: var(--color-border); cursor: not-allowed; background: none; }
@media (prefers-reduced-motion: no-preference) { .fcal { animation: fcalIn .14s ease both; } }
@keyframes fcalIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .fseg__pill, .frange input { font-size: 16px; }   /* avoid iOS zoom */
}