/* page-toolbar.css — Shared KPI strip dense overrides + toolbar component
 * Part of: ui-canonical-template-rollout
 * Requires: tokens.css, spacing.css, typography.css, kpi-card.css (load before this file)
 *
 * PURPOSE
 * -------
 * Extracts the page-scoped density overrides for .kpi-card--variant-strip and the
 * toolbar/filter-row pattern from contacts.html inline <style> (lines 86–172) into a
 * single shared stylesheet. Every new page links this file instead of copying inline CSS.
 *
 * LINK TAG — add to <head> in this order (after core/ and kpi-card.css):
 *
 *   Pages under business2/pages/ (e.g. contacts.html, admin.html):
 *     <link rel="stylesheet" href="../components/page-toolbar.css">
 *
 *   SPA root (business2/index.html):
 *     <link rel="stylesheet" href="components/page-toolbar.css">
 *
 * CANONICAL CLASS NAMES
 * ─────────────────────
 *   .page-stats-strip        Wrapper around .kpi-card.kpi-card--variant-strip;
 *                            applies dense §2 overrides.
 *   .page-filters-card       Outer card for the toolbar row.
 *   .filters-row             One-line flex row of controls inside the card.
 *   .filter-search-wrap      Search input host; flex:1 so it fills available space.
 *   .filter-search-clear     Ghost × button absolutely positioned inside search wrap.
 *   .filter-select-sm        Fixed-width 118px select wrapper.
 *   .filters-actions         Right-aligned CTA cluster (margin-left:auto).
 *   .btn-more-filters        Secondary outline "+ Фильтры" button.
 *   .btn-sort                Secondary outline "Сортировка" button.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * §1  KPI STRIP DENSE WRAPPER
 *
 * The canonical strip is .kpi-card.kpi-card--variant-strip (kpi-card.css).
 * Its default cell padding is 0 16px and value font is 18px — generous for
 * analytics dashboards. For the contacts / main-page SaaS layout we want
 * a denser "Direction B §9" spec: 8×12px padding, 13px value, 11px eyebrow.
 * These selectors override only within .page-stats-strip so other pages
 * that embed a strip without this wrapper keep their original sizing.
 * ══════════════════════════════════════════════════════════════════════════ */

.page-stats-strip {
  /* §5 note: with page-header removed, strip is first child of <main>.
   * 16px top margin keeps it off the top-nav; 16px bottom is the canonical
   * card-to-card section gap (Direction B §3 / §5). */
  margin-top:    var(--space-4);  /* 16px */
  margin-bottom: var(--space-4);  /* 16px */
}

/* Dense cell — §2 canonical override table */
.page-stats-strip .kpi-card--variant-strip .kpi-card__cell {
  padding:         8px 12px;       /* was 0 16px in shared component */
  gap:             3px;            /* label-to-value gap (was 2px) */
  justify-content: flex-start;     /* top-align content within 52px cell */
}

/* Dense value — 13px/600 instead of 18px/600 */
.page-stats-strip .kpi-card--variant-strip .kpi-card__value {
  font-size:   var(--font-sm);      /* 13px */
  font-weight: var(--weight-semi);  /* 600 */
  line-height: 1.15;
}

/* Dense eyebrow — already 11px in base; explicit here to document intent */
.page-stats-strip .kpi-card--variant-strip .kpi-card__eyebrow {
  font-size: var(--font-2xs);       /* 11px */
}


/* ══════════════════════════════════════════════════════════════════════════
 * §2  TOOLBAR / FILTERS CARD
 *
 * Promoted from contacts.html inline <style> lines 118–172 with two changes:
 *   1. Root class renamed .contacts-filters-card → .page-filters-card
 *      (page-agnostic; contacts can simply change its class attribute).
 *   2. .filters-actions gains explicit margin-left:auto so the primary CTA
 *      stays right-aligned regardless of whether search is present.
 *
 * All other class names (.filters-row, .filter-search-wrap, etc.) were
 * already page-agnostic in contacts.html — no renames needed there.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Outer card — surface + border + padding */
.page-filters-card {
  background:    var(--surface-card);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);                /* 10px cards token */
  padding:       var(--space-3) var(--space-4);   /* 12px 16px */
  margin-bottom: var(--space-4);                  /* 16px section gap */
}

/* One-line controls row — no wrap on desktop */
.filters-row {
  display:     flex;
  flex-wrap:   nowrap;
  gap:         var(--space-2);   /* 8px between controls */
  align-items: center;
}

/* Search host — grows to fill available horizontal space */
.filter-search-wrap {
  flex:      1;
  min-width: 0;          /* allow shrink below intrinsic width */
  position:  relative;   /* contains the ghost x button */
}

.filter-search-wrap .form-input-v2 {
  width:         100%;
  padding-right: 28px;   /* room for .filter-search-clear */
}

/* Ghost x clear button — absolutely positioned at right edge of input */
.filter-search-clear {
  position:      absolute;
  right:         8px;
  top:           50%;
  transform:     translateY(-50%);
  background:    none;
  border:        none;
  color:         var(--text-muted);
  cursor:        pointer;
  padding:       2px;
  display:       none;     /* JS adds .visible to show */
  line-height:   1;
  border-radius: 3px;
}

.filter-search-clear:hover   { color: var(--text-primary); }
.filter-search-clear.visible { display: flex; align-items: center; }

/* Inline select — fixed 118px, does not grow */
.filter-select-sm {
  flex:  0 0 auto;
  width: 118px;
}

.filter-select-sm .form-input-v2 {
  width: 100%;
}

/* CTA cluster — pushed to far right by margin-left:auto */
.filters-actions {
  display:     flex;
  gap:         var(--space-2);   /* 8px between buttons */
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;             /* right-align when search is short or absent */
}

/* Secondary outline buttons ("+ Фильтры" / "Сортировка") */
.btn-more-filters,
.btn-sort {
  background:    var(--surface-card);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-base);      /* 8px */
  padding:       7px 12px;
  color:         var(--text-secondary);
  cursor:        pointer;
  font-size:     var(--font-sm);          /* 13px */
  white-space:   nowrap;
  display:       flex;
  align-items:   center;
  gap:           var(--space-1);          /* 4px icon-to-label */
  line-height:   1;
  transition:    border-color 0.15s ease, color 0.15s ease;
}

.btn-more-filters:hover,
.btn-sort:hover {
  border-color: var(--color-brand-500);
  color:        var(--text-primary);
}

/* Active-filter count badge inside .btn-more-filters */
.btn-more-filters .filter-badge {
  background:    var(--color-brand-500);
  color:         #fff;
  border-radius: 10px;
  font-size:     10px;
  font-weight:   700;
  padding:       1px 5px;
  line-height:   1.4;
}


/* ══════════════════════════════════════════════════════════════════════════
 * §3  MOBILE OVERRIDES  (max-width: 768px)
 *
 * Strip: cells wrap to a 2-column grid so a 4–8 cell strip never overflows
 *        horizontally on small screens. Height becomes auto.
 * Toolbar: row wraps so the search goes full-width on its own line, and
 *          the CTA cluster sits below it naturally.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Allow strip cells to wrap instead of overflowing */
  .page-stats-strip .kpi-card--variant-strip {
    flex-wrap:  wrap;
    height:     auto;
    min-height: unset;
  }

  /* 2-column layout: each cell takes half the strip width */
  .page-stats-strip .kpi-card--variant-strip .kpi-card__cell {
    flex:       1 1 50%;
    min-height: 48px;   /* visible cell at half-width with 2-line content */
  }

  /* Toolbar wraps to multiple lines */
  .filters-row {
    flex-wrap: wrap;
  }

  /* Search fills its own row when wrapped */
  .filter-search-wrap {
    flex-basis: 100%;
  }

  /* Reset margin-left:auto — wrapping row handles alignment naturally */
  .filters-actions {
    margin-left: 0;
  }
}
