/* ==========================================================================
   Filter panel
   Figma source: Table / Search / 14 Jan (3462:17547), 420px wide.
   White surface, 24px padding (30 bottom), soft shadow, 29px title with
   an X-square close button. Sections stack at 24px; footer buttons sit
   right-aligned under 48px clearance. Figma defines NO corner radius on
   the panel frame — kept square deliberately.
   Composes: field/input, chip-group, btn.
   ========================================================================== */

/* A drawer's trigger button shows "selected" while its drawer is open (Peter, 1 Jul 2026). */
[data-drawer-toggle][aria-expanded="true"] { background: var(--color-bg-subtle); }

.filter-panel {
  width: 420px;
  max-width: 100%;
  background: var(--color-surface);
  padding: var(--space-6) var(--space-6) 30px;
  box-shadow: var(--shadow-panel);
}

/* Drawer placement — full-height panel docked right (Tax / Filter, 3462:18467) */
.filter-panel--drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60; /* above the fixed log-out / help corners so they don't overlap the panel */
  overflow-y: auto;
  border-left: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-drawer);
  padding: var(--drawer-pad) var(--drawer-pad) var(--drawer-pad-bottom); /* GLOBAL drawer rhythm (space + calm) */
  /* GLOBAL drawer motion (see CLAUDE.md "Motion"): luxurious slide-in on open */
  animation: drawerOpen 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* sections inside a docked drawer breathe at the global section gap */
.filter-panel--drawer .filter-panel__body { gap: var(--drawer-section-gap); }

/* Closing: a little wind-up bump, then a smooth slide back out to the right.
   ui.js adds .is-closing on the X, then hides/navigates on animationend. */
.filter-panel--drawer.is-closing {
  animation: drawerClose 0.5s cubic-bezier(0.32, 0, 0.1, 1) forwards;
  pointer-events: none;
}

@keyframes drawerOpen {
  0%   { transform: translateX(28px); opacity: 0; }
  72%  { transform: translateX(-7px); opacity: 1; }       /* overshoot in… */
  100% { transform: translateX(0); }                      /* …then settle: a little bounce */
}

@keyframes drawerClose {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-12px); }                 /* the bump to start */
  100% { transform: translateX(calc(100% + 32px)); opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-panel--drawer,
  .filter-panel--drawer.is-closing { animation: none; }
}

.filter-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 32px;
}

/* The head leads with a BACK arrow, never an X (GLOBAL, Peter 17 Jul) — ui.js moves
   the close button in front of the title and this lays the pair out */
.filter-panel__head--back { justify-content: flex-start; gap: 10px; }
.filter-panel__head--back .filter-panel__close { flex: none; margin-top: 5px; }

/* Drawer title matches the breadcrumb page title (GLOBAL, Peter 1 Jul 2026). */
.filter-panel__title {
  font-size: var(--text-title);
  font-weight: var(--weight-regular);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.filter-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 7px; /* optical alignment with the title cap height, from Figma */
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
}

/* A TEXT "Cancel" that also closes the drawer carries .btn as well — and the
   32px icon square above was squashing it to 32px wide, clipping the word
   (Peter, 25 Aug: "the cancel and create project button are squashed").
   When it is a .btn it keeps the button's own geometry. Affects the projects
   create drawer and tax-settings. */
.filter-panel__close.btn {
  width: auto;
  height: auto;
  margin-top: 0;
  padding: calc(var(--space-3) - var(--border-width)) var(--space-4);
  min-height: 40px;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
}

.filter-panel__close > svg {
  width: 24px;
  height: 24px;
}

/* provisional */
.filter-panel__close:hover {
  background: var(--color-bg-subtle);
}

.filter-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* section gap */
}

.filter-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: 48px; /* Figma footer clearance */
}

/* Sticky CTA row on docked side-drawers (GLOBAL, Peter 6 Jul): the action row pins to the bottom
   of the scrolling panel on short windows so it never falls below the fold; on tall windows it
   sits naturally under the last field. Solid surface + top hairline so content doesn't bleed
   through. No JS — sticky-bottom rests in flow when there's room and pins when the body overflows.
   The drawer hands its roomy bottom padding to the footer (via :has) so the bar sits FLUSH to the
   drawer's bottom edge while keeping the calm bottom rhythm inside the bar. Scoped ≥641px so the
   mobile bottom-sheet (which is already bottom-anchored) is untouched. */
@media (min-width: 641px) {
  .filter-panel--drawer:has(.filter-panel__actions) { padding-bottom: 0; }
  /* The last field was sitting flush on the footer hairline (0px). The drawer rhythm puts the
     action buttons well clear of the last section, so the BODY carries that space — putting it
     inside the bar would just make the bar tall once it pins. (Peter, 23 Jul) */
  .filter-panel--drawer:has(.filter-panel__actions) .filter-panel__body { padding-bottom: 32px; }
  .filter-panel--drawer .filter-panel__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 calc(var(--drawer-pad) * -1);
    padding: var(--space-4) var(--drawer-pad) var(--drawer-pad-bottom);
    background: var(--color-surface);
    border-top: var(--border-width) solid var(--color-border);
  }
}

/* Sticky CTA row on the create-style two-pane flows (Peter, 6 Jul): the action row pins to the bottom
   of its scrolling tab-panel so Clear/Next/Send never fall below the fold on short windows; sits
   naturally under the last field when there's room. Same idea as the drawers, but the scroll
   container here is the active [data-tab-panel]. Scoped to the ≥901 fixed-pane layout (below that the
   whole page scrolls normally, so the CTA is always reachable). */
@media (min-width: 901px) {
  /* higher specificity than the page's inline `.filter-panel__body > [data-tab-panel]` padding so the
     panel hands its bottom padding to the sticky bar (which then sits flush to the panel's bottom). */
  .create-section .filter-panel__body > [data-tab-panel]:has(.filter-panel__actions) { padding-bottom: 0; }
  .create-section .filter-panel__body > [data-tab-panel] .filter-panel__actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);   /* --space-5 is not a token: this was being dropped */
    background: var(--color-surface);
    border-top: var(--border-width) solid var(--color-border);
  }
}

/* Mobile: panels and drawers go full-width; docked drawers flow below content */
@media (max-width: 900px) {
  .filter-panel { width: 100%; flex: 1 1 100%; }
  .filter-panel--drawer {
    position: static;
    height: auto;
    flex: 1 1 100%;
    max-width: 100%;
    border-left: none;
    border-top: var(--border-width) solid var(--color-border);
    overflow: visible;
    animation: none; /* no slide-in when it's just stacked below content */
  }
}

/* Phone: the docked filter drawer becomes a bottom sheet (matches the bullet-live FilterSheet). */
@media (max-width: 640px) {
  .filter-panel--drawer {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 88vh;
    flex: none;
    overflow-y: auto;
    border-left: none;
    border-top: var(--border-width) solid var(--color-border);
    border-radius: 18px 18px 0 0;
    /* var(--space-5) does not exist, which made this whole shorthand invalid — every
       drawer lost ALL its padding at mobile widths. Sides now use the drawer token,
       which is what the drawer spacing standard says they should have been. */
    padding: var(--drawer-pad) var(--drawer-pad) calc(var(--drawer-pad-bottom) + env(safe-area-inset-bottom, 0px));
    animation: sheetUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  /* grab handle */
  .filter-panel--drawer::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-strong);
    margin: -10px auto 14px;
  }
  .filter-panel--drawer.is-closing { animation: sheetDown 0.3s ease forwards; }
  .filter-panel__actions { padding-top: 32px; }
}

@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetDown { 0% { transform: translateY(0); } 100% { transform: translateY(100%); opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
  @media (max-width: 640px) {
    .filter-panel--drawer, .filter-panel--drawer.is-closing { animation: none; }
  }
}