/* ==================== PAGE TOOLBAR + STATUS PILLS + CONTROL STRIP ====================
 *
 * Shared layout pattern for list/queue pages. Previously duplicated as inline
 * <style> blocks in 13 templates (legacy from the v2 layout refactor); extracted
 * here so the layout is defined once and changes propagate cleanly.
 *
 * Page structure these classes assume:
 *   .container-full-width
 *     .page-toolbar         ← title + actions (one row)
 *       .title-group .page-title / .page-subtitle
 *       .toolbar-actions    ← button group pushed right via margin-left: auto
 *     .status-pills         ← status navigation tabs (own row)
 *     .control-strip        ← filter form (own row)
 *       .control-select / .control-search / .control-date / .control-actions
 *     .control-strip--card  ← the same form as a white card (List Page Pattern)
 * ==================================================================== */

/* ===== PAGE-LEVEL CONTAINER ===== */
.container-full-width {
  max-width: 1400px;
  padding: 24px 32px;
}

/* ===== PAGE TOOLBAR (title + actions) ===== */
.page-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.page-toolbar .title-group {
  min-width: 0;
}

.page-toolbar .page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--pk-gray-900);
  letter-spacing: -0.3px;
  margin: 0;
}

.page-toolbar .page-subtitle {
  font-size: var(--text-caption);
  color: var(--pk-gray-400);
  margin-top: 1px;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* ===== STATUS PILLS (own row, between toolbar and control strip) =====
 *
 * NOTE: filters.css ALSO defines .status-pills as a padded gray container
 * (the older "segmented pill" pattern). The page-toolbar pattern wants a
 * transparent inline row instead, so we explicitly reset those properties. */
.status-pills {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 12px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  width: auto;
  border: none;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--pk-gray-100);
  color: var(--pk-gray-600);
  cursor: default;
  transition: all 0.15s;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

/* Pointer only when the pill is actually an interactive link */
a.status-pill,
.status-pill[href] {
  cursor: pointer;
}

.status-pill:hover {
  background: var(--pk-gray-200);
  color: var(--pk-gray-700);
}

.status-pill.active {
  background: var(--pk-white);
  border-color: var(--pk-gray-200);
  color: var(--pk-gray-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pill-count {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--pk-gray-200);
  color: var(--pk-gray-600);
}

.status-pill.active .pill-count {
  background: var(--pk-orange);
  color: #ffffff;
}

.pill-count--danger {
  background: var(--pk-error-light) !important;
  color: var(--pk-error-dark) !important;
}

.pill-count--warning {
  background: var(--pk-warning-light) !important;
  color: var(--pk-warning-dark) !important;
}

.pill-count--success {
  background: var(--pk-success-light) !important;
  color: var(--pk-success-dark) !important;
}

/* ===== CONTROL STRIP (filter form) ===== */
.control-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.control-select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--pk-gray-300);
  border-radius: 8px;
  color: var(--pk-gray-700);
  background: var(--pk-white);
  height: 34px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378716c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  min-width: 130px;
}

.control-select:focus {
  border-color: var(--pk-orange);
  box-shadow: 0 0 0 3px var(--pk-orange-subtle);
}

.control-search-wrapper {
  position: relative;
}

.control-search {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 6px 12px;
  border: 1px solid var(--pk-gray-300);
  border-radius: 8px;
  color: var(--pk-gray-700);
  background: var(--pk-white);
  height: 34px;
  outline: none;
  width: 200px;
}

.control-search:focus {
  border-color: var(--pk-orange);
  box-shadow: 0 0 0 3px var(--pk-orange-subtle);
}

.control-search::placeholder {
  color: var(--pk-gray-400);
}

.control-date {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--pk-gray-300);
  border-radius: 8px;
  color: var(--pk-gray-700);
  background: var(--pk-white);
  height: 34px;
  outline: none;
  min-width: 130px;
}

.control-date:focus {
  border-color: var(--pk-orange);
  box-shadow: 0 0 0 3px var(--pk-orange-subtle);
}

.control-divider {
  width: 1px;
  height: 22px;
  background: var(--pk-gray-200);
  flex-shrink: 0;
  margin: 0 4px;
}

.control-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

/* ===== FILTER CARD (List Page Pattern, Sep 2026) =====
 * Opt-in modifier on the same form: a white card, controls stretched to fill
 * the row, Filter as the accent button, Reset always visible. No visible
 * labels — every control carries an aria-label; the placeholder
 * ("All Customers") is the visible cue. Spec §6. */
.control-strip--card {
  background: var(--pk-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.control-strip--card .control-select,
.control-strip--card .control-date,
.control-strip--card .control-search-wrapper {
  flex: 1 1 140px;
  min-width: 0;
}

.control-strip--card .control-search-wrapper {
  flex: 2 1 220px;
}

.control-strip--card .control-search {
  width: 100%;
}

.control-strip--card .control-actions {
  flex: 0 0 auto;
}

/* Magnifier inside the search box: <i class="bi bi-search"> before the input */
.control-search-wrapper--icon .bi {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  color: var(--pk-gray-400);
  pointer-events: none;
}

.control-search-wrapper--icon .control-search {
  padding-left: 32px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .page-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .toolbar-actions {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .container-full-width {
    padding: 16px;
  }

  .page-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .status-pills {
    flex-wrap: wrap;
  }

  .control-actions {
    width: 100%;
    margin-left: 0;
  }

  .control-search {
    width: 100%;
  }

  .control-select {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .container-full-width {
    padding-left: 8px;
    padding-right: 8px;
  }
}