/* =============================================================================
   mh-toolbar.css - THE list-header toolbar: the card/list view toggle and the
   round filter button, rebuilt to the Inset Cool Field Kit.

   SOURCE OF TRUTH: _handoff/System Screens/inset-cool-field-kit/index.html,
   the "Toolbar & Filter" group (.viewtoggle / .toolbtn). Geometry, radii, the
   recessed rest state and the lifts-to-white pressed state are taken from there.

   ONE DELIBERATE DEVIATION FROM THE MOCK - THE COLOUR. The kit paints the active
   toggle in its own green (#5E8157, shadow rgba(94,129,87,.4)). The CEO's
   instruction (Aug 8) was to take the SHAPE but keep the colour we already have,
   so the active pill is brand pine (--mh-green #4E7C72) with a pine shadow. A
   second green in an app that already has one is how palettes rot.

   LOADED LATE so it wins on order over the per-surface copies it replaces; every
   selector matches the existing one exactly, so no !important is needed.

   WHAT THIS MOVES - stated up front ([[mh-shared-component-blast-radius]]).
   These are shared classes, so restyling them restyles every consumer at once:
     .cl-switch     view toggle  -> Clients, Administration, Approvals, Housing Subsidy
     .cl-filterbtn  round button -> Clients, Approvals, Housing Subsidy, and
                                    Program (where it is the EXPORT ROSTER button,
                                    not a filter - same shape language, so it is
                                    meant to move with them)
     .filter-btn        -> Dashboard's activity filter, brought onto the same look
     .mrq-filter-btn    -> the /requests section filter, same
   Teams has no filter control at all, so nothing there changed.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   THE VIEW TOGGLE - a recessed pill holding two round buttons.
   Kit: padding 5px, gap 4px, 40x40 buttons, 20px icons. The app's old version was
   3px/3px/34x30/17px, which is why it read as a cramped afterthought beside the
   search bar rather than as part of the field kit.
   --------------------------------------------------------------------------- */
/* Sized to the row: 30px button + 4px padding either side + 1px border = 40px,
   the same height as the search bar, the country dropdown and the date pickers
   beside it. The 4px of padding is deliberate breathing room - at 3px the
   selected pill's green circle sits flush against the shell's inner edge and
   reads as though it is clipped. */
.mh-app .cl-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 4px;
  height: var(--mh-filter-h, 40px);
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--mh-r-pill, 999px);
  background: #DFE4EA;
  border: 1px solid rgba(40, 60, 80, .08);
  box-shadow: inset 0 1px 2px rgba(40, 60, 80, .10);
}
.mh-app .cl-switch button {
  width: 34px;
  height: 30px;
  border: none;
  background: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--mh-ctrl-ico);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mh-app .cl-switch button svg { width: 18px; height: 18px; }
.mh-app .cl-switch button:hover { color: var(--mh-ink); }

/* PINE, not the kit's green. Same lift, our palette. */
.mh-app .cl-switch button.on,
.mh-app .cl-switch button[aria-selected="true"] {
  background: var(--mh-green, #4E7C72);
  color: #fff;
  box-shadow: 0 3px 8px rgba(78, 124, 114, .40);
}
.mh-app .cl-switch button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(78, 124, 114, .32);
}

/* ---------------------------------------------------------------------------
   THE ROUND TOOL BUTTON - filter, export, anything that is one glyph in a circle.
   Kit: 50x50, fully round, recessed at rest, LIFTS TO WHITE when pressed. That
   lift is the whole point of the kit ([[mh-inset-cool-field-kit]]) - a pressed
   control comes forward out of the surface rather than just changing tint.
   --------------------------------------------------------------------------- */
.mh-app .cl-filterbtn,
.mh-app .filter-btn,
.mh-app .mrq-filter-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  box-sizing: border-box;
  padding: 0;
  gap: 0;
  font-size: 0;                 /* the label-bearing variants become icon-only    */
  border-radius: var(--mh-r-pill, 999px);
  background: #DFE4EA;
  border: 1px solid rgba(40, 60, 80, .08);
  box-shadow: inset 0 1px 2px rgba(40, 60, 80, .10);
  color: var(--mh-ctrl-ico);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.mh-app .cl-filterbtn svg,
.mh-app .filter-btn svg,
.mh-app .mrq-filter-btn svg {
  width: 20px;
  height: 20px;
  color: inherit;
  stroke-width: 2;
}
.mh-app .cl-filterbtn:hover,
.mh-app .filter-btn:hover,
.mh-app .mrq-filter-btn:hover {
  background: #E7ECF1;
  color: var(--mh-ink);
}
/* PRESSED = lifted to white with a pine ring. */
.mh-app .cl-filterbtn.active,
.mh-app .cl-filterbtn[aria-pressed="true"],
.mh-app .filter-btn.on,
.mh-app .mrq-filter-btn.on {
  background: #fff;
  border-color: rgba(78, 124, 114, .45);
  box-shadow: 0 8px 22px rgba(40, 60, 80, .13);
  color: var(--mh-green, #4E7C72);
}
.mh-app .cl-filterbtn:focus-visible,
.mh-app .filter-btn:focus-visible,
.mh-app .mrq-filter-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(78, 124, 114, .32);
}

/* ---- dark parity ---------------------------------------------------------- */
body.dark .mh-app .cl-switch,
body.dark .mh-app .cl-filterbtn,
body.dark .mh-app .filter-btn,
body.dark .mh-app .mrq-filter-btn {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
body.dark .mh-app .cl-switch button { color: #a7b5b1; }
body.dark .mh-app .cl-switch button:hover { color: #eef2f1; }
body.dark .mh-app .cl-switch button.on,
body.dark .mh-app .cl-switch button[aria-selected="true"] {
  background: var(--mh-green, #4E7C72); color: #fff;
}
body.dark .mh-app .cl-filterbtn,
body.dark .mh-app .filter-btn,
body.dark .mh-app .mrq-filter-btn { color: #a7b5b1; }
body.dark .mh-app .cl-filterbtn:hover,
body.dark .mh-app .filter-btn:hover,
body.dark .mh-app .mrq-filter-btn:hover {
  background: rgba(255, 255, 255, .10); color: #eef2f1;
}
body.dark .mh-app .cl-filterbtn.active,
body.dark .mh-app .cl-filterbtn[aria-pressed="true"],
body.dark .mh-app .filter-btn.on,
body.dark .mh-app .mrq-filter-btn.on {
  background: rgba(78, 124, 114, .22);
  border-color: rgba(78, 124, 114, .55);
  box-shadow: none;
  color: #9fc7bd;
}


/* ---------------------------------------------------------------------------
   THE FILTER POPOVER - the other half of the round button.

   SOURCE OF TRUTH: the same kit file, the .filterpop block. Ported faithfully:
   260px card, 16px padding, 16px gaps, an uppercase "FILTERS" title beside a
   text "Clear all", grouped checkbox rows that tint on hover, and a full-width
   primary action pinned to the foot. The count badge rides the button itself.

   The kit drives this with plain JS and the `hidden` attribute; here the popover
   is simply not rendered when closed, so there is no `[hidden]` rule to write.

   COLOUR DEVIATION, same one the rest of this file makes: the kit's accent is its
   own green, ours is brand pine. Taking the shape and keeping our palette is the
   standing instruction - a second green is how a palette rots.
   --------------------------------------------------------------------------- */
/* ===========================================================================
   ONE FILTER BUTTON, TWO SIZES - and the size is decided by WHERE it sits.

   The Dashboard's Recent Activity button is the one this kit is modelled on: a
   round inset control, a funnel glyph, and a green count badge riding its
   corner. It stays 50px, because it sits alone in a card header where it is the
   only control and has room to be a target.

   Inside a FILTER ROW it cannot be 50. Measured on the Clients toolbar, the row
   held a 40px view switch, a 50px filter button, a 40px search bar, a 40px
   country dropdown and a 36px overflow button - five controls, three heights.
   In a row, matching the neighbours matters more than being generous, so the
   toolbar variants take --mh-filter-h (40px) and the glyph steps down with them.

   Same control, same language, same badge - sized for its context.
   =========================================================================== */
.mh-app .cl-head .cl-filterbtn,
.mh-app .toolbar .cl-filterbtn,
.mh-app .toolbar .mrq-filter-btn,
.mh-app .cl-head .cl-iobtn {
  width: var(--mh-filter-h, 40px);
  height: var(--mh-filter-h, 40px);
  border-radius: var(--mh-r-pill, 999px);
}
.mh-app .cl-head .cl-filterbtn svg,
.mh-app .toolbar .cl-filterbtn svg,
.mh-app .toolbar .mrq-filter-btn svg,
.mh-app .cl-head .cl-iobtn svg { width: 18px; height: 18px; }

/* The count badge, brought onto the toolbar buttons from the Dashboard card so
   an active filter is visible WITHOUT opening the panel - which is the whole
   reason that button reads better than the one it replaces. */
.mh-app .cl-filterbtn .badge,
.mh-app .mrq-filter-btn .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mh-green, #4E7C72);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--mh-surface, #fff);
}
body.dark .mh-app .cl-filterbtn .badge,
body.dark .mh-app .mrq-filter-btn .badge { border-color: var(--mh-surface); }

.mh-app .filterwrap { position: relative; flex: none; display: inline-flex; }

/* The badge sits ON the round button, half outside it, ringed in the panel colour
   so it reads as attached rather than as a stray dot. */
.mh-app .filter-btn .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mh-green, #4E7C72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--mh-surface, #fff);
}

/* An invisible full-viewport catcher: one outside click closes the menu. It sits
   BELOW the popover and above everything else, so the popover stays clickable. */
.mh-app .fp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: transparent;
}

.mh-app .filterpop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;                     /* the kit anchors left; this button is right-aligned
                                   in the panel header, so a left anchor would hang
                                   the card off the edge of the card it belongs to. */
  z-index: 40;
  width: 260px;
  background: var(--mh-surface, #fff);
  border: 1px solid rgba(40, 60, 80, .12);
  border-radius: var(--mh-r-md, 14px);
  box-shadow: 0 14px 40px rgba(33, 50, 58, .18);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  animation: fpIn .16s ease;
}
@keyframes fpIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.mh-app .filterpop .fp-head { display: flex; align-items: center; justify-content: space-between; }
.mh-app .filterpop .fp-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mh-ink-3, #71807C);
}
.mh-app .filterpop .fp-clear {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mh-green, #4E7C72);
}
.mh-app .filterpop .fp-clear:hover:not(:disabled) { text-decoration: underline; }
/* Disabled at rest rather than hidden: the row is part of the card's shape, and a
   control that appears and disappears makes the card jump. */
.mh-app .filterpop .fp-clear:disabled { color: var(--mh-ink-3, #9AA5A1); cursor: default; opacity: .55; }

.mh-app .filterpop .fp-group { display: flex; flex-direction: column; gap: 4px; }
.mh-app .filterpop .fp-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--mh-ink-2, #4A5A56);
  margin-bottom: 4px;
}
.mh-app .filterpop .fp-none { font-size: 13px; color: var(--mh-ink-3, #8A9591); padding: 4px 9px; }

.mh-app .filterpop .fp-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--mh-r-sm, 9px);
  cursor: pointer;
  font-size: 14px;
  color: var(--mh-ink, #253330);
  transition: background .15s ease;
}
.mh-app .filterpop .fp-opt:hover { background: rgba(40, 60, 80, .05); }
.mh-app .filterpop .fp-opt input {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--mh-green, #4E7C72);
  cursor: pointer;
}

.mh-app .filterpop .fp-foot { display: flex; }
.mh-app .filterpop .fp-foot .btn { flex: 1; justify-content: center; height: 42px; }

/* ---- dark parity ---------------------------------------------------------- */
body.dark .mh-app .filterpop {
  background: var(--mh-surface);
  border-color: var(--mh-line);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}
body.dark .mh-app .filterpop .fp-title { color: #8d9a96; }
body.dark .mh-app .filterpop .fp-label { color: #c2d0ca; }
body.dark .mh-app .filterpop .fp-none  { color: #8d9a96; }
body.dark .mh-app .filterpop .fp-clear { color: #9fc7bd; }
body.dark .mh-app .filterpop .fp-opt   { color: #e6ecea; }
body.dark .mh-app .filterpop .fp-opt:hover { background: rgba(255, 255, 255, .07); }
body.dark .mh-app .filter-btn .badge { border-color: var(--mh-surface); }