/* =========================================================================
   Playbook365 — Design System Tokens & Shared Modal Styles
   Tokens derived from the @make-kits/playbook365-design-system package
   referenced in the Figma Make file. Built on top of Bootstrap 5.
   ========================================================================= */

:root {
  /* Brand — Playbook365 primary is YELLOW with dark text on it */
  --pb-primary:        #facc15;   /* primary/500 — Playbook365 yellow */
  --pb-primary-hover:  #eab308;
  --pb-primary-soft:   #fef9c3;
  --pb-primary-text:   #1f2937;   /* gray/800 — text color used ON yellow buttons */

  /* Status colors */
  --pb-success:        #22c55e;
  --pb-success-hover:  #16a34a;
  --pb-success-soft:   #dcfce7;
  --pb-success-text:   #166534;

  --pb-danger:         #ef4444;   /* red/500 */
  --pb-danger-hover:   #dc2626;   /* red/600 */
  --pb-danger-soft:    #fee2e2;

  --pb-info:           #3b82f6;
  --pb-info-soft:      #dbeafe;

  /* Surfaces & neutrals (matched to pb-color-* tokens) */
  --pb-bg:             #f3f4f6;   /* pb-color-bg-base — page / sidebar */
  --pb-surface:        #ffffff;   /* pb-color-surface-base — cards / inputs */
  --pb-border:         #e5e7eb;   /* pb-color-border-subtle */
  --pb-text:           #111827;   /* pb-color-text-primary */
  --pb-text-soft:      #1f2937;
  --pb-muted:          #6b7280;   /* pb-color-text-secondary */
  --pb-muted-soft:     #9ca3af;

  /* Toggle (off neutral gray, on green) */
  --pb-toggle-off:     var(--pb-border);
  --pb-toggle-on:      var(--pb-success);

  /* Radii — matching Tailwind rounded-lg and rounded-xl */
  --pb-radius-sm:  6px;
  --pb-radius:     8px;     /* rounded-lg */
  --pb-radius-lg:  12px;    /* rounded-xl */
  --pb-radius-xl:  16px;    /* rounded-2xl */

  /* Shadows */
  --pb-shadow-sm:  0 1px 2px rgba(17, 24, 39, 0.06);
  --pb-shadow-md:  0 4px 12px rgba(17, 24, 39, 0.08);
  --pb-shadow-lg:  0 20px 50px rgba(0, 0, 0, 0.25);

  /* Typography */
  --pb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
}

/* Base body utilities used by the launcher page */
.pb-bg            { background: var(--pb-bg); }
.pb-text-primary  { color: var(--pb-text); }

/* =========================================================================
   Modal Shell
   ========================================================================= */

.playbook-modal .modal-content {
  border: 0;
  border-radius: var(--pb-radius-xl);
  box-shadow: var(--pb-shadow-lg);
  overflow: hidden;
  font-family: var(--pb-font-sans);
  color: var(--pb-text);
  background: var(--pb-surface);
  display: flex;
  flex-direction: column;
}

.playbook-modal .modal-header {
  background: rgba(0, 0, 0, 0.04);     /* matches bg-black/5 in the source */
  border-bottom: 1px solid var(--pb-border);
  padding: 18px 24px;
  align-items: center;
  justify-content: space-between;       /* pushes close button to the right edge */
  flex-shrink: 0;
}

/* Optional red accent under the header for destructive modals */
.playbook-modal--danger-accent .modal-header {
  border-bottom-width: 3px;
  border-bottom-color: var(--pb-danger);
}

/* Stacked sub-modals: layer the second backdrop above the first modal */
.modal-backdrop.show + .modal-backdrop.show {
  z-index: 1070;
}
.modal.show + .modal.show,
.modal.show ~ .modal.show {
  z-index: 1075;
}

.playbook-modal .modal-title {
  flex: 1 1 auto;                       /* title takes remaining space, X sits at far right */
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
  color: var(--pb-text);
}

/* Optional subtitle below modal title — used when context (e.g., a date)
   needs to ride alongside the title without competing with it visually. */
.playbook-modal .modal-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--pb-muted);
  margin: 2px 0 0;
}

.playbook-modal .btn-close {
  margin: 0;
  width: 14px;
  height: 14px;
  background-size: 14px;
  opacity: 0.6;
}
.playbook-modal .btn-close:hover { opacity: 1; }

.playbook-modal .modal-body {
  padding: 0;
  background: var(--pb-surface);
  flex: 1 1 auto;
  min-height: 0;             /* allow children's overflow:auto to work in flex */
  overflow: hidden;          /* keep scroll inside .pb-modal-content */
  display: flex;             /* let .pb-modal-layout fill the body */
}

.playbook-modal .modal-footer {
  background: var(--pb-surface);
  border-top: 1px solid var(--pb-border);
  padding: 14px 20px;
  gap: 10px;
  flex-shrink: 0;
}

/* Wide variant — matches max-w-5xl + 85vh from source */
.playbook-modal--wide .modal-dialog {
  max-width: 1024px;
}

/* Extra-wide variant — for table-driven modals where 8+ columns need to
   fit comfortably without horizontal scroll on a standard desktop. */
.playbook-modal--xl .modal-dialog {
  max-width: 1280px;
}

/* Medium variant — for single-purpose modals that don't need the full wide
   shell but feel cramped at Bootstrap's default ~500px (e.g. Tag edit). */
.playbook-modal--medium .modal-dialog {
  max-width: 640px;
}

/* Simple variant — for one-off form modals that don't have a left-nav layout.
   Opts out of the flex .modal-body so child <div>s stack naturally instead of
   sitting side by side. Use together with .playbook-modal--medium (or alone)
   for plain centered modals like Tag edit. */
.playbook-modal--simple .modal-body {
  display: block;
  padding: 28px 32px;
  overflow: visible;
}

/* Lock the dialog to a fixed height so header + body + footer flex inside it.
   Without this the body grows to fit content and pushes the footer off-screen. */
.playbook-modal--scrollable .modal-dialog {
  height: 85vh;
  max-height: 900px;
}
.playbook-modal--scrollable .modal-content {
  height: 100%;
  max-height: 100%;
}

@media (max-width: 575.98px) {
  .playbook-modal--wide .modal-dialog {
    margin: 0;
    max-width: 100%;
  }
  .playbook-modal--scrollable .modal-content {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* =========================================================================
   Two-Pane Layout: vertical tab nav + content pane
   ========================================================================= */

.pb-modal-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;             /* critical: lets the content pane scroll instead of growing */
  width: 100%;
  overflow: hidden;
}

.pb-modal-nav {
  width: 224px;
  background: var(--pb-bg);
  border-right: 1px solid var(--pb-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.pb-modal-nav__item {
  background: transparent;
  border: 0;
  border-left: 4px solid transparent;
  padding: 14px 22px;
  text-align: left;
  font-size: 14px;
  color: var(--pb-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  width: 100%;
}

.pb-modal-nav__item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--pb-text);
}

.pb-modal-nav__item.is-active {
  background: rgba(0, 0, 0, 0.05);
  color: var(--pb-text);
  border-left-color: var(--pb-primary);
}

.pb-modal-nav__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--pb-primary);
}
/* Warning dot — set on a nav tab that has an unresolved problem (e.g. the
   Included tab when service tags conflict with individual services). */
.pb-modal-nav__item.has-conflict::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pb-danger);
  margin-left: 7px;
  vertical-align: middle;
}

/* Content pane scrolls independently of nav */
.pb-modal-content {
  flex: 1 1 auto;
  min-width: 0;              /* prevents long content from forcing horizontal scroll */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 40px;
  background: var(--pb-surface);
}

@media (max-width: 768px) {
  .pb-modal-layout {
    flex-direction: column;
  }
  .pb-modal-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--pb-border);
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    /* Hide the horizontal scrollbar — swipe still works */
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge legacy */
  }
  .pb-modal-nav::-webkit-scrollbar {  /* Chrome/Safari/Edge */
    display: none;
    height: 0;
    width: 0;
  }
  .pb-modal-nav__item {
    border-left: 0;
    border-bottom: 4px solid transparent;
    padding: 12px 20px;
    white-space: nowrap;
    flex-shrink: 0;
    width: auto;                       /* override desktop width:100% so tabs sit side-by-side */
  }
  .pb-modal-nav__item.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--pb-primary);
  }
  .pb-modal-content { padding: 20px; }
}

/* =========================================================================
   Section blocks
   ========================================================================= */

.pb-section + .pb-section {
  margin-top: 40px;
}

.pb-section__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pb-text);
  margin: 0 0 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.pb-section__container {
  max-width: 768px;     /* mirrors max-w-3xl in the source */
}

/* =========================================================================
   Form controls
   ========================================================================= */

.playbook-modal .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text);
  margin-bottom: 6px;
}

.playbook-modal .form-label .pb-required {
  color: var(--pb-danger);
  margin-left: 2px;
}

.playbook-modal .form-control,
.playbook-modal .form-select {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  font-size: 14px;
  padding: 10px 14px;
  color: var(--pb-text);
  background: var(--pb-surface);
  box-shadow: var(--pb-shadow-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.playbook-modal .form-control:focus,
.playbook-modal .form-select:focus {
  border-color: transparent;
  outline: none;
  box-shadow: 0 0 0 2px var(--pb-primary);
}

.playbook-modal .form-control::placeholder {
  color: var(--pb-muted);
}

.playbook-modal textarea.form-control {
  min-height: 140px;
  padding: 16px;
  resize: vertical;
}

.playbook-modal .input-icon {
  position: relative;
}
.playbook-modal .input-icon > i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--pb-muted);
  font-size: 16px;
  pointer-events: none;
}
.playbook-modal .input-icon > .form-control {
  padding-left: 38px;
}

/* Helper note (the blue-bordered tip box used under "Code") */
.pb-field-tip {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--pb-bg);
  border-left: 2px solid var(--pb-primary);
  border-radius: var(--pb-radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pb-muted);
  line-height: 1.4;
}
.pb-field-tip i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* Tooltip-trigger info icon next to a label/heading */
.pb-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  background: transparent;
  border: 0;
  color: var(--pb-muted);
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 0;
  font-size: 16px;
  vertical-align: middle;
}
.pb-info:hover { color: var(--pb-primary); }

/* Tooltip body styling (matches the dark tooltip in the source) */
.tooltip.show { opacity: 1; }
.tooltip-inner {
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--pb-radius-lg);
  max-width: 320px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.tooltip .tooltip-arrow::before {
  border-top-color: #000 !important;
  border-bottom-color: #000 !important;
}

/* Rich tooltip variant — multi-section with yellow headings + dividers.
   Triggered by data-bs-custom-class="pb-tooltip pb-tooltip--rich" on the trigger.
   Bootstrap copies that class onto the rendered .tooltip element. */
.pb-tooltip--rich .tooltip-inner {
  max-width: 360px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
}
.pb-tooltip--rich .pb-tt-section { display: block; }
/* Sibling sections get a real visual gap so two field explanations don't run
   together as one wall of text. The optional .pb-tt-divider sits between for
   stronger separation when needed. */
.pb-tooltip--rich .pb-tt-section + .pb-tt-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pb-tooltip--rich .pb-tt-section + .pb-tt-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 10px 0;
}
/* If a divider was placed manually, suppress the auto sibling border so we
   don't end up with two lines stacked on top of each other. */
.pb-tooltip--rich .pb-tt-divider + .pb-tt-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.pb-tooltip--rich .pb-tt-heading {
  color: var(--pb-primary);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}
.pb-tooltip--rich .pb-tt-section p {
  margin: 0;
  color: #fff;
}
.pb-tooltip--rich em {
  color: var(--pb-primary);
  font-style: italic;
  font-weight: 600;
}

/* Warning emphasis inside a rich tooltip — design-system red.
   Use <strong class="pb-tt-warning">…</strong> for cautions like
   "Only enable if you really mean it." */
.pb-tooltip--rich .pb-tt-warning {
  color: var(--pb-danger);
  font-weight: 700;
}

/* =========================================================================
   Time Picker (3-segment: hour : minute / period)
   ========================================================================= */

.pb-time-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.pb-time-picker .form-select {
  width: auto;
  min-width: 0;
  padding-right: 32px;            /* room for the dropdown caret */
  background-position: right 10px center;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pb-time-picker__hour,
.pb-time-picker__minute {
  width: 78px;
}

.pb-time-picker__period {
  width: 86px;
  font-weight: 700;
}

.pb-time-picker__sep {
  font-size: 18px;
  font-weight: 700;
  color: var(--pb-muted);
  line-height: 1;
  user-select: none;
}

@media (max-width: 380px) {
  .pb-time-picker { gap: 4px; }
  .pb-time-picker__hour,
  .pb-time-picker__minute { width: 68px; }
  .pb-time-picker__period { width: 76px; }
  .pb-time-picker .form-select {
    padding-left: 8px;
    padding-right: 26px;
  }
}

/* =========================================================================
   Toggle Switch (gray off / green on)
   ========================================================================= */

.pb-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.pb-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pb-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--pb-toggle-off);
  border-radius: 999px;
  transition: background 0.18s ease;
  flex-shrink: 0;
}

.pb-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

.pb-toggle input:checked + .pb-toggle__track {
  background: var(--pb-toggle-on);
}

.pb-toggle input:checked + .pb-toggle__track::after {
  transform: translateX(20px);
}

.pb-toggle input:focus-visible + .pb-toggle__track {
  box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 4px var(--pb-primary);
}

/* Setting row (gray card with label + toggle on right) */
.pb-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
}

.pb-setting-row + .pb-setting-row {
  margin-top: 16px;
}

.pb-setting-row__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text);
  line-height: 1.3;
  margin: 0;
}

/* =========================================================================
   Buttons
   ========================================================================= */

/* Design-system buttons — brand primitives that apply in any context
   (modal, page, launcher). Sizing + treatment are standard across the lab. */
.btn-pb-primary,
.btn-pb-outline,
.btn-pb-ghost,
.btn-pb-danger,
.playbook-modal .btn {
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--pb-radius);
  padding: 10px 20px;
  transition: background 0.12s ease, opacity 0.12s ease, transform 0.06s ease;
  letter-spacing: 0.01em;
}
.btn-pb-primary:active,
.btn-pb-outline:active,
.btn-pb-ghost:active,
.btn-pb-danger:active,
.playbook-modal .btn:active { transform: scale(0.97); }

/* Primary — Playbook365 yellow with dark text */
.btn-pb-primary,
.playbook-modal .btn-primary {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: var(--pb-primary-text);
  box-shadow: var(--pb-shadow-md);
}
.btn-pb-primary:hover,
.btn-pb-primary:focus,
.playbook-modal .btn-primary:hover,
.playbook-modal .btn-primary:focus {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: var(--pb-primary-text);
  opacity: 0.9;
}
.btn-pb-primary:disabled,
.playbook-modal .btn-primary:disabled {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: var(--pb-primary-text);
  opacity: 0.5;
}

/* Secondary outline (Back / Next) */
.btn-pb-outline {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  color: var(--pb-text);
  box-shadow: var(--pb-shadow-sm);
}
.btn-pb-outline:hover,
.btn-pb-outline:focus {
  background: rgba(0, 0, 0, 0.04);
  color: var(--pb-text);
  border-color: var(--pb-border);
}

/* Ghost (Cancel) */
.btn-pb-ghost {
  background: transparent;
  border: 0;
  color: var(--pb-muted);
}
.btn-pb-ghost:hover,
.btn-pb-ghost:focus {
  background: rgba(0, 0, 0, 0.04);
  color: var(--pb-text);
}

/* Destructive */
.btn-pb-danger {
  background: var(--pb-danger);
  border-color: var(--pb-danger);
  color: #fff;
  box-shadow: var(--pb-shadow-md);
}
.btn-pb-danger:hover,
.btn-pb-danger:focus {
  background: var(--pb-danger-hover);
  border-color: var(--pb-danger-hover);
  color: #fff;
}

/* Small icon-only ghost button (edit/delete in lists) */
.pb-icon-btn {
  background: transparent;
  border: 0;
  color: var(--pb-muted);
  padding: 6px;
  border-radius: var(--pb-radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pb-icon-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--pb-text); }
.pb-icon-btn--danger:hover { background: var(--pb-danger-soft); color: var(--pb-danger); }
.pb-icon-btn--primary:hover { background: var(--pb-primary-soft); color: var(--pb-text); }

/* =========================================================================
   Cards / list items (Contacts, Gates, Spaces)
   ========================================================================= */

.pb-card {
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  padding: 20px;
  box-shadow: var(--pb-shadow-sm);
  transition: box-shadow 0.15s ease;
}
.pb-card:hover { box-shadow: var(--pb-shadow-md); }

.pb-list-card {
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  padding: 12px;
}

.pb-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-sm);
  transition: box-shadow 0.15s ease;
}
.pb-list-row + .pb-list-row { margin-top: 8px; }
.pb-list-row:hover { box-shadow: var(--pb-shadow-md); }

.pb-list-row__handle {
  color: var(--pb-muted);
  cursor: grab;
  font-size: 16px;
}

.pb-list-row__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--pb-text);
}

.pb-list-row__status {
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.pb-list-row__status--on  { color: var(--pb-success-hover); }
.pb-list-row__status--off { color: var(--pb-muted); }

/* Empty state */
.pb-empty {
  background: var(--pb-bg);
  border: 1px dashed var(--pb-border);
  border-radius: var(--pb-radius-lg);
  padding: 32px 20px;
  text-align: center;
  color: var(--pb-muted);
  font-weight: 500;
  font-size: 14px;
}

/* "Add new …" sub-card with input + button */
.pb-add-form {
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  padding: 20px;
  box-shadow: var(--pb-shadow-sm);
}
.pb-add-form__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pb-text);
  margin: 0 0 16px;
}

/* =========================================================================
   Mock Rich Text Editor toolbar
   ========================================================================= */

.pb-rte {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-surface);
  box-shadow: var(--pb-shadow-sm);
  overflow: hidden;
}

.pb-rte__toolbar {
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--pb-muted);
}

.pb-rte__group {
  display: flex;
  gap: 2px;
  padding-right: 8px;
  border-right: 1px solid var(--pb-border);
}
.pb-rte__group:last-child {
  border-right: 0;
  padding-right: 0;
}

.pb-rte__btn {
  background: transparent;
  border: 0;
  color: inherit;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pb-radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.pb-rte__btn:hover { background: var(--pb-surface); color: var(--pb-text); }

.pb-rte__textarea {
  width: 100%;
  min-height: 200px;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--pb-text);
  font-size: 14px;
  resize: vertical;
}
.pb-rte__textarea:focus { outline: none; }

.pb-rte__counter {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pb-muted);
  pointer-events: none;
}
.pb-rte__textarea-wrap { position: relative; }

/* =========================================================================
   Image Uploader — dropzone with optional preview above it
   Used by: Equipment modal (and any future image-upload field)
   ========================================================================= */

.pb-image-uploader {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pb-image-uploader__preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
}

.pb-image-uploader__preview img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--pb-radius);
  background: var(--pb-surface);
  flex-shrink: 0;
}

.pb-image-uploader__preview-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Dropzone — the click/drop target. Uses <label for="…"> so clicking anywhere
   triggers the hidden <input type="file">. */
.pb-image-uploader__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  background: var(--pb-bg);
  border: 2px dashed var(--pb-border);
  border-radius: var(--pb-radius-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pb-image-uploader__dropzone:hover,
.pb-image-uploader__dropzone.is-dragover {
  border-color: var(--pb-primary);
  background: rgba(250, 204, 21, 0.06);
}

.pb-image-uploader__icon {
  font-size: 32px;
  color: var(--pb-muted);
}
.pb-image-uploader__dropzone:hover .pb-image-uploader__icon,
.pb-image-uploader__dropzone.is-dragover .pb-image-uploader__icon {
  color: var(--pb-primary-text);
}

.pb-image-uploader__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pb-text);
}

.pb-image-uploader__hint {
  font-size: 12px;
  color: var(--pb-muted);
  font-weight: 500;
}

/* =========================================================================
   Input Affix — prefix/suffix inside an input wrapper.
   Used for currency $, percent %, etc. Variant of .input-icon that allows
   a trailing element too. The trailing slot can be hidden via [hidden] for
   dynamic swapping (e.g. discount-type changes between $ and %).
   ========================================================================= */

.input-affix {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-affix .form-control {
  flex: 1 1 auto;
}
.input-affix__prefix,
.input-affix__suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pb-muted);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}
.input-affix__prefix { left: 14px; }
.input-affix__prefix:not([hidden]) ~ .form-control { padding-left: 30px; }

.input-affix__suffix { right: 14px; }
.input-affix:has(.input-affix__suffix:not([hidden])) .form-control {
  padding-right: 30px;
}

/* =========================================================================
   Custom Checkbox (data tables, select-all rows)
   ========================================================================= */

.pb-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.pb-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.pb-checkbox__box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--pb-border);
  border-radius: 4px;
  background: var(--pb-surface);
  transition: background 0.12s ease, border-color 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pb-checkbox:hover .pb-checkbox__box { border-color: var(--pb-primary); }
.pb-checkbox input:checked + .pb-checkbox__box {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
}
.pb-checkbox input:checked + .pb-checkbox__box::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--pb-primary-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Indeterminate — used by select-all when partial */
.pb-checkbox input:indeterminate + .pb-checkbox__box {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
}
.pb-checkbox input:indeterminate + .pb-checkbox__box::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 3px;
  width: 10px;
  height: 2px;
  background: var(--pb-primary-text);
  border: 0;
  transform: none;
}
.pb-checkbox input:focus-visible + .pb-checkbox__box {
  outline: none;
  box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 4px var(--pb-primary);
}

/* =========================================================================
   Filter Bar (Services tab of Promo Code modal)
   ========================================================================= */

.pb-filter-bar {
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

/* =========================================================================
   Selection Summary Bar
   Sits between the filters and the list to remind the user how many items
   are selected vs visible.
   ========================================================================= */

.pb-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--pb-primary-soft);
  border: 1px solid #fde68a;
  border-radius: var(--pb-radius);
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-text);
}

/* =========================================================================
   Data Table (Services list and any future bulk-select tables)
   ========================================================================= */

.pb-data-table {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  overflow: hidden;
  background: var(--pb-surface);
}

.pb-data-table__head,
.pb-data-table__row {
  display: grid;
  grid-template-columns: 48px 1fr 200px;
  align-items: center;
  gap: 0;
}

.pb-data-table__head {
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--pb-muted);
}

.pb-data-table__body {
  max-height: 480px;
  overflow-y: auto;
}

.pb-data-table__row {
  cursor: pointer;
  border-bottom: 1px solid var(--pb-border);
  background: var(--pb-surface);
  transition: background 0.1s ease;
  margin: 0;
}
.pb-data-table__row:last-child { border-bottom: 0; }
.pb-data-table__row:hover { background: var(--pb-bg); }
.pb-data-table__row:has(input[type="checkbox"]:checked) {
  background: var(--pb-primary-soft);
}

.pb-data-table__cell {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--pb-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-data-table__cell--check {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px 14px 16px;
}
.pb-data-table__cell--name { font-weight: 600; }
.pb-data-table__cell--meta { color: var(--pb-muted); }

.pb-data-table__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--pb-muted);
  background: var(--pb-bg);
}
.pb-data-table__empty p {
  font-size: 14px;
  font-weight: 500;
  margin: 8px 0 0;
}

@media (max-width: 575.98px) {
  .pb-data-table__head,
  .pb-data-table__row {
    grid-template-columns: 40px 1fr 110px;
  }
  .pb-data-table__cell { padding: 12px; }
}

/* =========================================================================
   Pill (small category/status tag)
   ========================================================================= */

.pb-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pb-muted);
  line-height: 1.4;
  text-transform: none;
}

/* =========================================================================
   Plain Link (in-flow text link)
   ========================================================================= */

.pb-link {
  color: var(--pb-primary-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--pb-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pb-link:hover {
  color: var(--pb-text);
  text-decoration-color: var(--pb-primary-hover);
}

/* =========================================================================
   CSV Uploader — reuses .pb-image-uploader__dropzone styling but adds a
   file-row pattern for the picked file.
   ========================================================================= */

.pb-csv-uploader__file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--pb-success-soft);
  border: 1px solid #bbf7d0;
  border-radius: var(--pb-radius);
  margin-top: 12px;
}
.pb-csv-uploader__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-csv-uploader__size {
  font-size: 12px;
  font-weight: 500;
  color: var(--pb-muted);
}

/* =========================================================================
   Nav counter badge — small pill next to a tab name showing the count of
   items inside it (e.g. "Services 7")
   ========================================================================= */

.pb-nav-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--pb-primary);
  color: var(--pb-primary-text);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  margin-left: auto;
  line-height: 1;
}
.pb-modal-nav__item:not(.is-active) .pb-nav-counter {
  background: var(--pb-border);
  color: var(--pb-muted);
}
@media (max-width: 768px) {
  .pb-nav-counter { margin-left: 8px; }
}

/* =========================================================================
   Spaces tab — nestable drag-drop list
   - Three drop zones per row: top 25% (before), middle 50% (child), bottom 25% (after).
   - Items can only nest within the same type (Courts → Courts only).
   - Empty area of a category container drops the item back to root of that type.
   ========================================================================= */

.pb-space-group {
  padding: 12px;
}

.pb-space-group__heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pb-muted);
  font-weight: 700;
  margin: 0 0 8px;
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--pb-border);
}

/* Dropzone is the outer container that catches "drop on empty area" — used to
   un-nest a space back to root of its type. Min-height keeps it droppable when
   empty, padding gives breathing room around child rows. */
.pb-space-dropzone {
  min-height: 64px;
  border-radius: var(--pb-radius);
  border: 2px dashed transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
  padding: 4px;
}

/* Lit up when a same-type space is hovering over the empty area (not over a row) */
.pb-space-dropzone.is-zone-hover {
  border-color: var(--pb-primary);
  background: rgba(250, 204, 21, 0.06);
}

/* Each draggable row — wraps the visible item AND its nested children container */
.pb-space-row {
  margin-bottom: 4px;
}
.pb-space-row:last-child { margin-bottom: 0; }

/* The visible row — this is what carries the drop-target visual state */
.pb-space-row__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-sm);
  cursor: move;
  transition: box-shadow 0.15s ease, border-color 0.12s ease, background 0.12s ease;
}
.pb-space-row__inner:hover {
  box-shadow: var(--pb-shadow-md);
}

/* Trash button is hidden by default and revealed on row hover (matches source's
   opacity-0 group-hover:opacity-100 behavior) */
.pb-space-row__remove {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pb-space-row__inner:hover .pb-space-row__remove,
.pb-space-row__remove:focus-visible {
  opacity: 1;
}

/* Faded source row while it's being dragged */
.pb-space-row.is-dragging > .pb-space-row__inner {
  opacity: 0.4;
}

/* Drop-target visual states on .pb-space-row__inner.
   These mirror the source's three drop actions. */
.pb-space-row__inner.is-drop-before {
  border-top: 2px solid var(--pb-primary);
}
.pb-space-row__inner.is-drop-after {
  border-bottom: 2px solid var(--pb-primary);
}
.pb-space-row__inner.is-drop-child {
  border: 2px solid var(--pb-primary);
  background: rgba(250, 204, 21, 0.05);
}

/* Nested children sit indented under the parent row */
.pb-space-children {
  margin-left: 24px;
  margin-top: 4px;
  /* Empty children container collapses to nothing so it doesn't show extra space */
}
.pb-space-children:empty {
  margin: 0;
  height: 0;
}

/* =========================================================================
   SERVICE MODAL COMPONENTS
   New components introduced for the Service modal:
   - Color picker swatch grid          (.pb-color-picker)
   - Data table variants for pricing   (.pb-data-table--ext, --dynamic)
   - Staff assignment 2-col layout     (.pb-staff-grid / .pb-staff-row)
   - Helper banner (yellow tip box)    (.pb-banner)
   - Equipment 3-col assignment board  (.pb-assignment-*)
   - Required/Optional micro-buttons   (.pb-rq-btn)
   - Pill info variant                 (.pb-pill--info)
   ========================================================================= */

/* --- Color picker --------------------------------------------------------
   8 round swatches. Selected swatch gets a yellow ring so it’s visible on
   light backgrounds. Hidden input carries the actual posted hex value. */
.pb-color-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 6px 4px;
}
.pb-color-picker__swatch {
  width: 32px;
  height: 32px;
  border: 2px solid var(--pb-border);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.pb-color-picker__swatch:hover {
  transform: scale(1.08);
}
.pb-color-picker__swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pb-primary-soft);
}
.pb-color-picker__swatch.is-selected {
  border-color: var(--pb-text);
  box-shadow: 0 0 0 3px var(--pb-primary-soft);
  transform: scale(1.05);
}

/* --- Data table variants -------------------------------------------------
   Base .pb-data-table is a 3-column grid. These variants override the column
   count for the Service Pricing tab. Row + head share the same template so
   columns line up vertically. */
.pb-data-table__head--ext,
.pb-data-table__row--ext {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  gap: 12px;
  align-items: center;
}

.pb-data-table__head--dynamic,
.pb-data-table__row--dynamic {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 80px 80px;
  gap: 8px;
  align-items: center;
}

/* Action cell centers its single icon button so the trash icon doesn’t
   visually drift left when the row gets tall. */
.pb-data-table__cell--actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* In the dynamic-pricing row we want the row body itself to follow the same
   column template as the header, so override the default .pb-data-table__row
   block in this context. */
.pb-data-table--dynamic .pb-data-table__row {
  padding: 12px;
}
.pb-data-table--dynamic .pb-data-table__row + .pb-data-table__row {
  border-top: 1px solid var(--pb-border);
}

.pb-time-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pb-time-picker__sep {
  font-size: 13px;
  font-weight: 700;
  color: var(--pb-muted);
  flex-shrink: 0;
}

/* Higher specificity (0,3,0) overrides .pb-time-picker .form-select (0,2,0)
   so the fixed widths and tighter arrow placement actually take effect. */
.pb-time-picker .pb-time-picker__hour,
.pb-time-picker .pb-time-picker__minute {
  width: 58px;
  padding-left: 6px;
  padding-right: 22px;
  background-position: right 4px center;
  background-size: 12px 9px;
  text-align: left;
}

.pb-time-picker .pb-time-picker__ampm {
  width: 66px;
  padding-left: 6px;
  padding-right: 22px;
  background-position: right 4px center;
  background-size: 12px 9px;
  text-align: left;
}

.pb-data-table__head--availability,
.pb-data-table__row--availability {
  display: grid;
  grid-template-columns: 44px 90px 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.pb-data-table__head--blackout,
.pb-data-table__row--blackout {
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  gap: 8px;
  align-items: center;
}

.pb-data-table--availability .pb-data-table__head {
  padding: 6px 10px;
}

.pb-data-table--availability .pb-data-table__row,
.pb-data-table--blackout .pb-data-table__row {
  padding: 2px 10px;
}

.pb-data-table--availability .pb-data-table__row {
  border-bottom: 0;
  cursor: default;
}

.pb-data-table--availability .pb-data-table__cell {
  padding: 0;
}

.pb-data-table--blackout .pb-data-table__row + .pb-data-table__row {
  border-top: 1px solid var(--pb-border);
}

/* Scheduled availability slots table (manual builder review section) */
.pb-data-table__head--avail-slots,
.pb-data-table__row--avail-slots {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  gap: 12px;
  align-items: center;
}

.pb-data-table--avail-slots .pb-data-table__row {
  padding: 10px 12px;
}

.pb-data-table--avail-slots .pb-avail-slot + .pb-avail-slot {
  border-top: 1px solid var(--pb-border);
}

.pb-avail-slot__confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff5f5;
  border-top: 1px solid #fecdd3;
  font-size: 13px;
  color: var(--pb-text);
}

.pb-avail-slot__confirm i {
  color: #dc3545;
  flex-shrink: 0;
}

.pb-avail-slot__confirm span {
  flex: 1;
}

.pb-avail-slot__edit {
  padding: 16px 12px;
  background: var(--pb-surface, #f8f9fa);
  border-top: 1px solid var(--pb-border);
}

/* Program runs (program-type availability interface) */
.pb-program-run {
  border: 1px solid var(--pb-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.pb-program-run__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--pb-surface);
  border-bottom: 1px solid var(--pb-border);
}

.pb-program-run__name-wrap {
  flex: 1;
}

.pb-program-run__name {
  width: 100%;
}

.pb-program-run__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--pb-border);
  background: var(--pb-surface);
}

.pb-program-run__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.pb-program-run__session-head,
.pb-program-run__session-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
}

.pb-program-run__session-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--pb-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--pb-surface);
  border-bottom: 1px solid var(--pb-border);
}

.pb-program-run__session-row + .pb-program-run__session-row {
  border-top: 1px solid var(--pb-border);
}

.pb-program-run__session-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--pb-muted);
  text-align: center;
  width: 24px;
  height: 24px;
  line-height: 22px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Monthly calendar picker (manual availability builder) */
.pb-month-cal {
  width: 100%;
}

.pb-month-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pb-month-cal__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text);
  margin: 0;
}

.pb-month-cal__nav-btn {
  background: none;
  border: 1px solid var(--pb-border);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pb-muted);
  font-size: 13px;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.pb-month-cal__nav-btn:hover {
  background: var(--pb-surface);
  color: var(--pb-text);
}

.pb-month-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.pb-month-cal__day-head {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--pb-muted);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pb-month-cal__day {
  height: 24px;
  width: 24px;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  color: var(--pb-text);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

.pb-month-cal__day:hover {
  background: var(--pb-surface);
  border-color: var(--pb-border);
}

.pb-month-cal__day--empty {
  pointer-events: none;
  cursor: default;
}

.pb-month-cal__day--today {
  border-color: var(--pb-primary);
  color: var(--pb-primary);
  font-weight: 700;
}

.pb-month-cal__day--selected {
  background: var(--pb-primary);
  color: #fff;
  border-color: var(--pb-primary);
  font-weight: 600;
}

.pb-month-cal__day--selected:hover {
  background: var(--pb-primary-dark, var(--pb-primary));
  border-color: var(--pb-primary-dark, var(--pb-primary));
}

.pb-month-cal__day--today.pb-month-cal__day--selected {
  background: var(--pb-primary);
  color: #fff;
}

.pb-data-table .pb-data-table__row--ext {
  padding: 12px;
}
.pb-data-table .pb-data-table__row--ext + .pb-data-table__row--ext {
  border-top: 1px solid var(--pb-border);
}

/* --- Helper banner -------------------------------------------------------
   Yellow tip-style banner used at the bottom of Employees tab. Echoes the
   yellow tooltip-emphasis treatment so it visually slots into our system. */
.pb-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: var(--pb-radius);
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}
.pb-banner i {
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 2px;
}
.pb-banner--info {
  background: var(--pb-primary-soft);
  color: var(--pb-text);
  border: 1px solid #fde68a;
}
.pb-banner--info i {
  color: #b45309;
}

/* --- Pill: info variant --------------------------------------------------
   Lighter blue pill used to mark cross-facility / cross-category status on
   employee cards. Distinct from the default yellow .pb-pill which is loud. */
.pb-pill--info {
  background: var(--pb-info-soft);
  color: #1e40af;
}

/* --- Staff assignment grid ----------------------------------------------
   Two columns: “Can perform” (sortable, with priority numbers) and “Other”
   (parking lot for removed people). Mirrors the original Playbook365 layout
   but reskinned to match our list-card pattern. */
.pb-staff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .pb-staff-grid { grid-template-columns: 1fr; }
}

.pb-staff-col {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  overflow: hidden;
}
.pb-staff-col__header {
  background: #1f2937;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pb-staff-col__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: #fff;
}
.pb-staff-col__count {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  min-width: 28px;
  text-align: center;
}
.pb-staff-col__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  margin: 0;
  font-size: 12px;
  color: var(--pb-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--pb-border);
}
.pb-staff-col__hint i {
  font-size: 14px;
  color: var(--pb-muted-soft);
}

.pb-staff-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}
.pb-staff-list--empty {
  align-items: center;
  justify-content: center;
}
.pb-staff-list__empty {
  text-align: center;
  color: var(--pb-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 24px 16px;
}
.pb-staff-list__empty i {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
  color: var(--pb-muted-soft);
}
.pb-staff-list__empty p { margin: 0; }

/* Drop highlight when a row is being dragged over a list. */
.pb-staff-list.is-drop-target {
  background: var(--pb-primary-soft);
  outline: 2px dashed var(--pb-primary);
  outline-offset: -4px;
}

.pb-staff-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  cursor: grab;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.05s;
}
.pb-staff-row:hover {
  border-color: var(--pb-primary);
  box-shadow: var(--pb-shadow-sm);
}
.pb-staff-row:active {
  cursor: grabbing;
}
.pb-staff-row.is-dragging {
  opacity: 0.4;
}
.pb-staff-row__handle {
  color: var(--pb-muted-soft);
  font-size: 18px;
  flex-shrink: 0;
}
.pb-staff-row__priority {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pb-primary);
  color: var(--pb-primary-text);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pb-staff-row__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pb-border);
  color: var(--pb-text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.pb-staff-row__main {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.pb-staff-row__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text);
  line-height: 1.3;
}
.pb-staff-row__email {
  font-size: 12px;
  color: var(--pb-muted);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-staff-row__sub {
  font-size: 11px;
  color: var(--pb-muted-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Hide the priority badge in the “other” column — only the assigned column
   ranks people. */
.pb-staff-list[data-pb-staff-list="other"] .pb-staff-row__priority {
  display: none;
}

/* --- Assignment board (3 columns: All / Required / Optional) ------------
   Used for Equipment, Resources, and Instructors on the Options tab. Looks
   like a kanban board so the relationship between columns is obvious. */
.pb-assignment-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 992px) {
  .pb-assignment-board { grid-template-columns: 1fr; }
}

.pb-assignment-col {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  overflow: hidden;
}
.pb-assignment-col__header {
  background: #1f2937;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pb-assignment-col__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: #fff;
}
.pb-assignment-col__count {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  min-width: 28px;
  text-align: center;
  background: var(--pb-info-soft);
  color: #1e40af;
}
.pb-assignment-col--required .pb-assignment-col__count {
  background: var(--pb-danger-soft);
  color: #991b1b;
}
.pb-assignment-col--optional .pb-assignment-col__count {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
}

/* Subtle column tinting so Required vs Optional are visually distinct even
   when both are empty. */
.pb-assignment-col--required {
  border-color: #fecaca;
}
.pb-assignment-col--required .pb-assignment-list {
  background: rgba(239, 68, 68, 0.03);
}
.pb-assignment-col--optional {
  border-color: #fde68a;
}
.pb-assignment-col--optional .pb-assignment-list {
  background: rgba(250, 204, 21, 0.04);
}

.pb-assignment-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}
.pb-assignment-list--empty {
  align-items: center;
  justify-content: center;
}
.pb-assignment-list__empty {
  text-align: center;
  color: var(--pb-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 16px;
}
.pb-assignment-list__empty p { margin: 0; }
.pb-assignment-list.is-drop-target {
  background: var(--pb-primary-soft);
  outline: 2px dashed var(--pb-primary);
  outline-offset: -4px;
}

.pb-assignment-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  cursor: grab;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.pb-assignment-row:hover {
  border-color: var(--pb-primary);
  box-shadow: var(--pb-shadow-sm);
}
.pb-assignment-row:active {
  cursor: grabbing;
}
.pb-assignment-row.is-dragging {
  opacity: 0.4;
}
.pb-assignment-row__handle {
  color: var(--pb-muted-soft);
  font-size: 16px;
}
.pb-assignment-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-assignment-row__actions {
  display: flex;
  gap: 4px;
}

/* --- R/O micro-buttons ---------------------------------------------------
   Tiny circular buttons that mark an item required or optional with one
   click — alternative to dragging. Mirrors the original Playbook365 style. */
.pb-rq-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
  padding: 0;
}
.pb-rq-btn:hover { transform: scale(1.08); }
.pb-rq-btn--required {
  color: var(--pb-danger);
  border-color: var(--pb-danger);
}
.pb-rq-btn--required:hover {
  background: var(--pb-danger);
  color: #fff;
}
.pb-rq-btn--optional {
  color: #b45309;
  border-color: var(--pb-primary);
}
.pb-rq-btn--optional:hover {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
}
.pb-rq-btn.is-active {
  /* Once an item is in Required or Optional column, hide the matching button
     so the same action isn’t available twice. The other button remains as
     a quick-swap action. */
  display: none;
}

/* When a toggle-controls target is disabled, fade the section so the user
   can see the relationship but knows it’s inactive. The Equipment board
   uses this when the Equipment toggle is off. */
[data-pb-controlled].is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* =========================================================================
   EMPLOYEE MODAL COMPONENTS
   New components introduced for the Employee modal:
   - Number stepper (− value +)            (.pb-stepper)
   - Radio group + radio button            (.pb-radio-group / .pb-radio)
   - Permission template pills             (.pb-template-pills)
   - Permission tree (collapsible accordion)(.pb-perm-*)
   - Document row (type + file picker)     (.pb-doc-row / .pb-doc-file)
   - Table variants for Facilities + Pay   (.pb-data-table__head--facility / --pay)
   - Toggle-controlled wrapper (Login pwd) (.pb-toggle-controlled)
   ========================================================================= */

/* --- Number stepper -----------------------------------------------------
   Used for the default hourly rate field on the Payments tab. Hides the
   native number input spinners so the buttons are the only way to step. */
.pb-stepper {
  display: inline-flex;
  align-items: stretch;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-sm);
  overflow: hidden;
  max-width: 200px;
}

.pb-stepper__btn {
  background: var(--pb-bg);
  border: 0;
  color: var(--pb-text);
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}
.pb-stepper__btn:hover {
  background: var(--pb-primary-soft);
  color: var(--pb-text);
}
.pb-stepper__btn:focus-visible {
  outline: none;
  background: var(--pb-primary-soft);
  box-shadow: inset 0 0 0 2px var(--pb-primary);
}
.pb-stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.playbook-modal .pb-stepper__input.form-control {
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--pb-border);
  border-right: 1px solid var(--pb-border);
  box-shadow: none;
  text-align: center;
  width: 80px;
  flex: 0 0 80px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  -moz-appearance: textfield;            /* Firefox: hide spinner */
}
.playbook-modal .pb-stepper__input.form-control:focus {
  box-shadow: inset 0 0 0 2px var(--pb-primary);
  border-color: transparent;
}
/* Hide native number-input arrows (Webkit) */
.pb-stepper__input::-webkit-inner-spin-button,
.pb-stepper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Radio group --------------------------------------------------------
   Custom-styled radios used for Gender on the Contact tab. Same visual
   language as .pb-checkbox but circular. */
.pb-radio-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0 4px;            /* visual height ~ a regular form-control */
  min-height: 44px;
}

.pb-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--pb-text);
  font-weight: 500;
  position: relative;
}

.pb-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.pb-radio__dot {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--pb-border);
  border-radius: 50%;
  background: var(--pb-surface);
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pb-radio:hover .pb-radio__dot { border-color: var(--pb-primary); }
.pb-radio input:checked + .pb-radio__dot {
  border-color: var(--pb-primary);
  background: var(--pb-surface);
}
.pb-radio input:checked + .pb-radio__dot::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pb-primary);
}
.pb-radio input:focus-visible + .pb-radio__dot {
  outline: none;
  box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 4px var(--pb-primary);
}

/* --- Toggle-controlled wrapper -----------------------------------------
   A region whose visibility is driven by a checkbox using the existing
   data-pb-toggle-controls helper. The Login tab uses this for the password
   fields. The helper toggles a `disabled` attribute and `is-disabled` class
   on the wrapper — we also hide it entirely so the fields don't take space
   when off. */
.pb-toggle-controlled[disabled],
.pb-toggle-controlled.is-disabled {
  display: none;
}

/* --- Template pills (Permissions tab) ----------------------------------
   Yellow rounded pills used for "Copy from template" quick actions. These
   are buttons not status pills — clicking applies the template. */
.pb-template-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.pb-template-pill {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--pb-shadow-sm);
  transition: opacity 0.12s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.pb-template-pill:hover {
  opacity: 0.92;
  box-shadow: var(--pb-shadow-md);
}
.pb-template-pill:active { transform: scale(0.97); }
.pb-template-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pb-primary-soft), var(--pb-shadow-md);
}
.pb-template-pill i { font-size: 12px; }

/* --- Permission tree ----------------------------------------------------
   Three levels:
     .pb-perm-group       — Menu / Functions / Other Listings (top-level accordion)
     .pb-perm-subgroup    — e.g. Communication, Invoice (nested accordion)
     .pb-perm-leaf        — individual checkbox row
   Backend should render the full tree based on the role's permission set.
*/
.pb-perm-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pb-perm-group {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
  overflow: hidden;
}

.pb-perm-group__header {
  width: 100%;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--pb-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.12s ease;
}
.pb-perm-group__header:hover { background: rgba(0, 0, 0, 0.03); }
.pb-perm-group__header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--pb-primary);
}

.pb-perm-group__chevron {
  font-size: 14px;
  color: var(--pb-muted);
  transition: transform 0.15s ease;
}

.pb-perm-group__title {
  flex: 1 1 auto;
}

.pb-perm-group__count {
  background: var(--pb-border);
  color: var(--pb-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}
.pb-perm-group__count[data-has-checked] {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
}

.pb-perm-group__body {
  padding: 12px 16px 16px;
  background: var(--pb-surface);
  border-top: 1px solid var(--pb-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pb-perm-group__hint {
  font-size: 12px;
  color: var(--pb-muted);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 8px 12px;
  background: var(--pb-bg);
  border-left: 2px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
}

.pb-perm-subgroup {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-surface);
  overflow: hidden;
}

.pb-perm-subgroup__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-text);
}
.pb-perm-subgroup__header:hover { background: rgba(0, 0, 0, 0.03); }

.pb-perm-subgroup__title {
  flex: 1 1 auto;
}

.pb-perm-subgroup__toggle {
  padding: 4px;
  font-size: 14px;
  color: var(--pb-muted);
}

.pb-perm-subgroup__body {
  padding: 8px 12px 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (max-width: 575.98px) {
  .pb-perm-subgroup__body { grid-template-columns: 1fr; }
}

.pb-perm-leaf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--pb-radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--pb-text);
  font-weight: 500;
  transition: background 0.1s ease;
  margin: 0;
}
.pb-perm-leaf:hover { background: var(--pb-bg); }

.pb-perm-leaf__label {
  line-height: 1.3;
}

/* --- Facility table column override ------------------------------------
   The default .pb-data-table is 48px / 1fr / 200px. The Facilities tab uses
   the same template — but we want the toggle column slightly wider so the
   "Always available" header text fits comfortably. */
.pb-data-table__head--facility,
.pb-data-table__row--facility {
  display: grid;
  grid-template-columns: 48px 1fr 220px;
  align-items: center;
}
.pb-data-table__row--facility .pb-data-table__cell--meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
@media (max-width: 575.98px) {
  .pb-data-table__head--facility,
  .pb-data-table__row--facility {
    grid-template-columns: 40px 1fr 100px;
  }
}

/* --- Pay table column override -----------------------------------------
   3-column layout for Payments → Per-service pay table:
   service name (1.2fr), pay type select (1fr), value input (1fr). */
.pb-data-table__head--pay,
.pb-data-table__row--pay {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  align-items: center;
}
/* Each pay row gets its own border + padding because we ditched the default
   row click target — clicking inside a row shouldn't select anything. */
.pb-data-table--pay .pb-data-table__row {
  cursor: default;
  padding: 12px 14px;
}
.pb-data-table--pay .pb-data-table__row:hover {
  background: var(--pb-surface);   /* don't tint on hover — selects/inputs already provide affordance */
}
.pb-data-table--pay .pb-data-table__cell {
  padding: 0;                       /* row already has padding; cell padding would over-stack */
  white-space: normal;              /* allow names to wrap if long */
  overflow: visible;                /* don't clip the affix dollar sign */
}
.pb-data-table--pay .pb-data-table__head .pb-data-table__cell {
  padding: 14px 16px;
}

@media (max-width: 575.98px) {
  .pb-data-table__head--pay,
  .pb-data-table__row--pay {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  /* On narrow screens, hide the head row entirely — each row's value is
     self-explanatory and the table reads as a card stack. */
  .pb-data-table--pay .pb-data-table__head { display: none; }
}

/* --- Document row (Documents tab) --------------------------------------
   Type select + file picker + remove. Stacks on narrow screens.
   File picker is a custom button + filename label since the native
   <input type="file"> styling is unfixable across browsers. */
.pb-doc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pb-doc-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 16px;
  align-items: end;
  padding: 16px;
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
}

.pb-doc-row__field { min-width: 0; }
.pb-doc-row__field .form-label {
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 700;
  color: var(--pb-muted);
}

.pb-doc-row__actions {
  padding-bottom: 4px;             /* aligns trash with the bottom of the inputs */
}

.pb-doc-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-sm);
  min-height: 38px;                /* match form-control-sm height */
}

.pb-doc-file__pick {
  flex-shrink: 0;
  font-size: 12px;
  padding: 4px 10px;
}

.pb-doc-file__name {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--pb-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* When a file has been picked, swap the muted name for darker text so the
   user sees the difference. JS toggles the .has-file modifier. */
.pb-doc-file.has-file .pb-doc-file__name {
  color: var(--pb-text);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .pb-doc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "type    remove"
      "file    file";
    gap: 12px;
  }
  .pb-doc-row__field:first-child { grid-area: type; }
  .pb-doc-row__field--file       { grid-area: file; }
  .pb-doc-row__actions           { grid-area: remove; }
}

/* =========================================================================
   PACKAGE MODAL COMPONENTS
   New components introduced for the Package modal:
   - 5-col membership pricing table   (.pb-data-table--membership)
   - Disabled-row visual fade         (.pb-data-table__row--membership :disabled)
   ========================================================================= */

/* --- Membership pricing table -----------------------------------------
   5 columns: checkbox, name, cost, included, weekly limit. The checkbox
   in column 1 enables/disables the three pricing inputs in the same row.
   Reuses the standard .pb-data-table shell. */
.pb-data-table__head--membership,
.pb-data-table__row--membership {
  display: grid;
  grid-template-columns: 48px 1.4fr 1fr 1.7fr;
  gap: 12px;
  align-items: center;
}
/* Extra-uses cell: the input plus the "= N total" math readout beside it. */
.pb-data-table--membership .pkg-extra-cell { display: flex; align-items: center; gap: 10px; }
.pb-data-table--membership .pkg-extra-cell .form-control { max-width: 90px; }
.pkg-total-math { font-size: 12px; font-weight: 700; color: var(--pb-muted); white-space: nowrap; }
.pkg-total-math strong { color: var(--pb-text); }

.pb-data-table--membership .pb-data-table__row {
  cursor: default;            /* the inputs themselves are the click targets */
  padding: 12px 14px;
}
.pb-data-table--membership .pb-data-table__row:hover {
  background: var(--pb-surface);
}
.pb-data-table--membership .pb-data-table__row:has(input[type="checkbox"][data-pb-membership-toggle]:checked) {
  background: var(--pb-primary-soft);
}
.pb-data-table--membership .pb-data-table__cell {
  padding: 0;
  white-space: normal;
  overflow: visible;
}
.pb-data-table--membership .pb-data-table__head .pb-data-table__cell {
  padding: 14px 16px;
}

/* Disabled inputs in the row fade slightly so checked vs unchecked rows
   are obvious at a glance. The browser also dims them, but our soft fade
   makes the relationship explicit. */
.pb-data-table__row--membership input:disabled {
  background: var(--pb-bg);
  color: var(--pb-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.pb-data-table__row--membership .input-affix:has(input:disabled) .input-affix__prefix {
  opacity: 0.5;
}

@media (max-width: 768px) {
  /* Stack to a 2-col card layout on narrow screens. Each row becomes:
       [check]  [name]
       [cost ]  [cost-input ]
       [incl ]  [incl-input ]
       [wkly ]  [wkly-input ]
     We achieve this by switching to a single column and prefixing inputs
     with their column label via a pseudo-element. */
  .pb-data-table__head--membership { display: none; }
  .pb-data-table__row--membership {
    grid-template-columns: 48px 1fr;
    gap: 8px;
    grid-template-areas:
      "check  name"
      "check  cost"
      "check  extra";
  }
  .pb-data-table__row--membership > .pb-data-table__cell--check { grid-area: check; align-self: start; padding-top: 6px; }
  .pb-data-table__row--membership > .pb-data-table__cell--name  { grid-area: name; }
  .pb-data-table__row--membership > .pb-data-table__cell:nth-of-type(3) {
    grid-area: cost;
  }
  .pb-data-table__row--membership > .pb-data-table__cell:nth-of-type(4) {
    grid-area: extra;
  }
  /* Stack-mode mini labels — invisible on desktop, shown when stacked. */
  .pb-data-table__row--membership > .pb-data-table__cell:nth-of-type(3)::before { content: "Cost"; }
  .pb-data-table__row--membership > .pb-data-table__cell:nth-of-type(4)::before { content: "Extra uses"; }
  .pb-data-table__row--membership > .pb-data-table__cell:nth-of-type(n+3)::before {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--pb-muted);
    margin-bottom: 4px;
  }
}

/* =========================================================================
   FULL PAGE LAYOUT
   Used by standalone admin pages (Facilities, etc.) that aren't modals.
   The page is wrapped in .pb-page; it provides the off-white background, a
   sticky header with page title + primary actions, and a centered content
   container.
   ========================================================================= */

.pb-page {
  background: var(--pb-bg);
  min-height: 100vh;
  font-family: var(--pb-font-sans);
  color: var(--pb-text);
  display: flex;
  flex-direction: column;
}

.pb-page-header {
  background: var(--pb-bg);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pb-page-header__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--pb-text);
  line-height: 1.2;
}

.pb-page-header__subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--pb-muted);
  margin: 2px 0 0;
}

.pb-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pb-page-body {
  flex: 1 1 auto;
  padding: 24px 32px 48px;
}

.pb-page-body__container {
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pb-page-header { padding: 16px 20px; }
  .pb-page-body   { padding: 16px 20px 32px; }
}

/* =========================================================================
   PAGE TOOLBAR
   The bar of search + filters that sits above a list table. Lives in its
   own card so it visually groups with the table without merging.
   ========================================================================= */

.pb-toolbar {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pb-toolbar__search {
  flex: 1 1 280px;
  min-width: 240px;
  position: relative;
}
.pb-toolbar__search > i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--pb-muted);
  font-size: 16px;
  pointer-events: none;
}
.pb-toolbar__search input {
  width: 100%;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 10px 14px 10px 40px;
  font-size: 14px;
  background: var(--pb-surface);
  color: var(--pb-text);
  box-shadow: var(--pb-shadow-sm);
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pb-toolbar__search input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--pb-primary);
}

.pb-toolbar__filter {
  flex-shrink: 0;
}

/* =========================================================================
   BULK ACTION BAR
   Slides into view when 1+ rows are selected. Replaces the toolbar (or sits
   above it) with bulk-action buttons + a clear-selection button.
   ========================================================================= */

.pb-bulk-bar {
  background: var(--pb-primary-soft);
  border: 1px solid #fde68a;
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pb-bulk-bar[hidden] { display: none; }

.pb-bulk-bar__count {
  font-size: 14px;
  font-weight: 700;
  color: var(--pb-text);
}
.pb-bulk-bar__count strong {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  margin-right: 6px;
}

.pb-bulk-bar__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* =========================================================================
   LIST TABLE
   The flagship admin table component. Different from .pb-data-table (which
   is for in-modal lists) — the list table is denser, supports sortable
   columns, and lives inside a .pb-page-body__container card.

   Column structure for Facilities:
   [check 48px] [name] [code 110px] [city] [state 70px]
   [postal 110px] [primary 110px] [created 120px] [actions 240px]
   ========================================================================= */

.pb-list-table {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
  overflow: hidden;
}

.pb-list-table__scroller {
  /* Horizontal scroll only when columns truly don't fit — grid below sets
     min-width via grid-template-columns to keep cells from collapsing. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pb-list-table__head,
.pb-list-table__row {
  display: grid;
  grid-template-columns:
    48px                   /* checkbox */
    minmax(180px, 1.4fr)   /* name */
    minmax(100px, 0.7fr)   /* code */
    minmax(140px, 1fr)     /* city */
    72px                   /* state */
    minmax(100px, 0.7fr)   /* postal */
    110px                  /* primary */
    120px                  /* created */
    260px;                 /* actions */
  align-items: center;
  min-width: 1060px;       /* triggers horizontal scroll on narrow viewports */
}

.pb-list-table__head {
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--pb-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}

.pb-list-table__row {
  background: var(--pb-surface);
  border-bottom: 1px solid var(--pb-border);
  transition: background 0.1s ease;
  position: relative;
}
.pb-list-table__row:last-child { border-bottom: 0; }
.pb-list-table__row:hover { background: var(--pb-bg); }
.pb-list-table__row:has(input[type="checkbox"][data-pb-row-check]:checked) {
  background: var(--pb-primary-soft);
}

.pb-list-table__cell {
  padding: 14px 14px;
  font-size: 13px;
  color: var(--pb-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-list-table__head .pb-list-table__cell {
  padding: 12px 14px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sortable column header — button styled to look like the cell. */
.pb-list-table__sort {
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s ease;
}
.pb-list-table__sort:hover { color: var(--pb-text); }
.pb-list-table__sort i {
  font-size: 12px;
  opacity: 0.4;
  transition: opacity 0.12s ease;
}
.pb-list-table__sort.is-sorted i {
  opacity: 1;
  color: var(--pb-text);
}

.pb-list-table__cell--check {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 12px 14px;
}

.pb-list-table__cell--name {
  font-weight: 600;
  color: var(--pb-text);
  cursor: pointer;
}
.pb-list-table__cell--name:hover {
  color: var(--pb-primary-text);
  text-decoration: underline;
  text-decoration-color: var(--pb-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pb-list-table__cell--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--pb-muted);
}

.pb-list-table__cell--actions {
  padding: 8px 14px;
}

/* Status pill used in the Primary Facility column. */
.pb-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pb-status-pill--yes {
  background: var(--pb-success-soft);
  color: var(--pb-success-text);
}
.pb-status-pill--no {
  color: var(--pb-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Action button cluster (per row). Six small icon buttons grouped tight. */
.pb-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.pb-row-action {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--pb-bg);
  color: var(--pb-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease, transform 0.05s ease;
  flex-shrink: 0;
}
.pb-row-action:hover {
  transform: scale(1.08);
}
.pb-row-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 4px var(--pb-primary);
}

/* Color variants — each maps to a row action's purpose. */
.pb-row-action--spaces   { background: var(--pb-success-soft); color: var(--pb-success-hover); }
.pb-row-action--spaces:hover   { background: var(--pb-success); color: #fff; }

.pb-row-action--services { background: var(--pb-primary-soft); color: var(--pb-primary-text); }
.pb-row-action--services:hover { background: var(--pb-primary); color: var(--pb-primary-text); }

.pb-row-action--view     { background: var(--pb-info-soft); color: #1e40af; }
.pb-row-action--view:hover     { background: var(--pb-info); color: #fff; }

.pb-row-action--hours    { background: #e0e7ff; color: #4338ca; }
.pb-row-action--hours:hover    { background: #6366f1; color: #fff; }

.pb-row-action--delete   { background: var(--pb-danger-soft); color: var(--pb-danger); }
.pb-row-action--delete:hover   { background: var(--pb-danger); color: #fff; }

.pb-row-action--edit     { background: var(--pb-bg); color: var(--pb-text); }
.pb-row-action--edit:hover     { background: var(--pb-text); color: var(--pb-surface); }

.pb-list-table__empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--pb-muted);
  background: var(--pb-bg);
}
.pb-list-table__empty i {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
  color: var(--pb-muted-soft);
}
.pb-list-table__empty p {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* =========================================================================
   PAGINATION FOOTER
   ========================================================================= */

.pb-pagination {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-top: 0;                            /* sits flush with the table */
  border-radius: 0 0 var(--pb-radius-lg) var(--pb-radius-lg);
  padding: 12px 16px;
  margin-top: -1px;                         /* overlap table border */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--pb-muted);
  font-weight: 500;
}

.pb-pagination__total strong {
  color: var(--pb-text);
  font-weight: 700;
}

.pb-pagination__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pb-pagination__per-page {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-pagination__per-page select {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  background: var(--pb-surface);
  color: var(--pb-text);
  font-weight: 600;
  cursor: pointer;
}

.pb-pagination__pages {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pb-pagination__page {
  min-width: 32px;
  height: 32px;
  border-radius: var(--pb-radius-sm);
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-text);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pb-pagination__page:hover:not(:disabled) {
  background: var(--pb-bg);
  border-color: var(--pb-text);
}
.pb-pagination__page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pb-pagination__page.is-active {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: var(--pb-primary-text);
}

.pb-pagination__goto {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-pagination__goto input {
  width: 56px;
  text-align: center;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  font-weight: 600;
}

/* =========================================================================
   PAGE-LEVEL FILTER PILLS (a.k.a. saved-views row)
   Sits OUTSIDE the white card, on the gray page background, between the
   page header and the toolbar. Use this for saved views, scope chips, or
   any always-visible top-level filter. NOT to be confused with the
   in-toolbar column-filter chips below (.pb-table__filter-pill).
   ========================================================================= */
.pb-page-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 16px;
  margin: 0;
}
.pb-page-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  color: var(--pb-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pb-page-filter:hover {
  border-color: var(--pb-text);
  background: var(--pb-surface);
}
.pb-page-filter.is-active {
  background: var(--pb-text);
  border-color: var(--pb-text);
  color: var(--pb-surface);
}
.pb-page-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pb-bg);
  color: var(--pb-muted);
  font-size: 11px;
  font-weight: 700;
}
.pb-page-filter.is-active .pb-page-filter__count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--pb-surface);
}
.pb-page-filter--add {
  background: transparent;
  border-style: dashed;
  color: var(--pb-muted);
}
.pb-page-filter--add:hover {
  color: var(--pb-text);
  border-color: var(--pb-text);
  background: var(--pb-surface);
}

/* =========================================================================
   PB-TABLE — new data table component
   Distinct from .pb-list-table (page lists) and .pb-data-table (modal
   tables). Features:
     - Toolbar with search + inline filter pills (column scope)
     - Bulk select w/ indeterminate
     - Sortable headers with chevron
     - Expandable rows with key/value detail panel
     - Cells flaggable green/red
     - Status pills, blue ID-column links
     - Dashed "+ Add" row at the bottom of the body
     - COUNT / TOTAL footer with blue active pagination
   The table is a CSS-grid layout — every row is a grid container so the
   columns line up regardless of which row variant is used (header / data
   / detail / add). Column track widths are defined once on the wrapper
   via CSS custom properties so consumers can override per-page.
   ========================================================================= */

.pb-table {
  background: var(--pb-surface);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
  overflow: hidden;             /* clip rounded corners around children */
  margin-bottom: 0;             /* footer below sits flush */
  /* Default column tracks. Pages override via inline style or a more
     specific selector. The sequence is:
       check / expand / id / name / code / city / state / postal / primary / created / actions */
  --pb-table-cols:
    44px 36px 64px minmax(180px, 1.6fr) minmax(80px, 0.9fr)
    minmax(110px, 1.1fr) 60px 90px 90px 100px 56px;
}

/* Header + every row + add-row share the same grid template. */
.pb-table__head,
.pb-table__row,
.pb-table__add {
  display: grid;
  grid-template-columns: var(--pb-table-cols);
  align-items: center;
  gap: 0;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--pb-border);
}

.pb-table__head {
  background: var(--pb-bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-muted);
  min-height: 40px;
  border-bottom: 1px solid var(--pb-border);
}

.pb-table__cell {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--pb-text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pb-table__head .pb-table__cell {
  /* Headers don't ellipsize the same way — let buttons size themselves */
  white-space: nowrap;
}

.pb-table__cell--check,
.pb-table__cell--expand,
.pb-table__cell--actions {
  justify-content: center;
  padding: 8px 4px;
}
.pb-table__cell--id {
  justify-content: flex-start;
  font-variant-numeric: tabular-nums;
}
.pb-table__cell--name {
  font-weight: 600;
  cursor: pointer;
}
.pb-table__cell--name:hover { color: var(--pb-info); }
.pb-table__cell--mono {
  font-family: var(--pb-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--pb-muted);
}

/* --- Body row states --- */
.pb-table__row {
  background: var(--pb-surface);
  transition: background 0.12s ease;
}
.pb-table__row:hover { background: var(--pb-bg); }
.pb-table__row.is-selected { background: var(--pb-primary-soft); }
.pb-table__row.is-selected:hover { background: var(--pb-primary-soft); }
.pb-table__row.is-expanded { background: var(--pb-bg); }

/* --- Sort buttons --- */
.pb-table__sort {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pb-table__sort:hover { color: var(--pb-text); }
.pb-table__sort.is-sorted { color: var(--pb-text); }
.pb-table__sort i { font-size: 12px; }

/* --- Expand button --- */
.pb-table__expand-btn {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pb-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.18s ease;
}
.pb-table__expand-btn:hover {
  background: var(--pb-surface);
  border-color: var(--pb-border);
  color: var(--pb-text);
}
.pb-table__expand-btn[aria-expanded="true"] {
  color: var(--pb-text);
  transform: rotate(90deg);
}

/* --- ID column → blue link --- */
.pb-table__id-link {
  color: var(--pb-info);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.pb-table__id-link:hover {
  color: var(--pb-info);
  text-decoration: underline;
}

/* --- Cell flag (green/red dot accent) ---
   Wraps a cell value. Adds a left-side colored bar so the flag is visible
   without re-coloring text. Use sparingly — meant to call out "missing"
   or "verified" data, not to colorize the whole row. */
.pb-cell-flag {
  position: relative;
  padding-left: 10px;
  display: inline-flex;
  align-items: center;
}
.pb-cell-flag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--pb-border);
}
.pb-cell-flag--green::before { background: var(--pb-success); }
.pb-cell-flag--red::before   { background: var(--pb-danger); }

/* --- Detail (expanded row) panel ---
   Sits as a full-width row inside the table body. Spans every grid column
   so the panel goes edge-to-edge under its parent row. */
.pb-table__detail {
  grid-column: 1 / -1;
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
  padding: 16px 24px 20px;
}
.pb-table__detail[hidden] { display: none; }

.pb-table__detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 32px;
}
.pb-table__detail-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pb-table__detail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-muted);
}
.pb-table__detail-value {
  font-size: 13px;
  color: var(--pb-text);
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}
.pb-table__detail-value a {
  color: var(--pb-info);
  text-decoration: none;
}
.pb-table__detail-value a:hover { text-decoration: underline; }

.pb-table__contact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--pb-border);
  font-size: 13px;
}
.pb-table__contact:last-child { border-bottom: 0; }
.pb-table__contact-name {
  font-weight: 600;
  color: var(--pb-text);
}
.pb-table__contact-role {
  font-size: 11px;
  color: var(--pb-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pb-table__contact-meta {
  font-size: 12px;
  color: var(--pb-muted);
}
.pb-table__contact-meta a {
  color: var(--pb-info);
  text-decoration: none;
}
.pb-table__contact-meta a:hover { text-decoration: underline; }

/* --- Dashed add-row at the bottom of the table body --- */
.pb-table__add {
  border-bottom: 0;
  padding: 0;
}
.pb-table__add-btn {
  grid-column: 1 / -1;
  appearance: none;
  background: transparent;
  border: 1px dashed var(--pb-border);
  border-radius: var(--pb-radius);
  margin: 8px 16px 12px;
  padding: 10px 16px;
  width: calc(100% - 32px);
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.pb-table__add-btn:hover {
  color: var(--pb-text);
  border-color: var(--pb-text);
  border-style: dashed;
  background: var(--pb-bg);
}

/* --- Empty state --- */
.pb-table__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--pb-muted);
}
.pb-table__empty i { font-size: 32px; opacity: 0.5; }
.pb-table__empty p { margin: 8px 0 0; font-size: 13px; font-weight: 500; }

/* --- Toolbar inside the .pb-table card ---
   This is the top strip of the table card with search + inline filter
   chips. Distinct from the page-level .pb-page-filters above. */
.pb-table__toolbar {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--pb-border);
  background: var(--pb-surface);
}
.pb-table__toolbar-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 320px;
}
.pb-table__toolbar-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pb-muted);
  font-size: 14px;
  pointer-events: none;
}
.pb-table__toolbar-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  font-size: 13px;
  background: var(--pb-surface);
  color: var(--pb-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pb-table__toolbar-search input:focus {
  outline: 0;
  border-color: var(--pb-text);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.pb-table__filter-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Inline filter pill (for column-scope filters in the table toolbar).
   Visually similar to .pb-page-filter but smaller and quieter. */
.pb-table__filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--pb-bg);
  border: 1px solid transparent;
  color: var(--pb-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pb-table__filter-pill:hover {
  background: var(--pb-surface);
  border-color: var(--pb-border);
}
.pb-table__filter-pill.is-active {
  background: var(--pb-surface);
  border-color: var(--pb-text);
  color: var(--pb-text);
}
.pb-table__filter-pill i { font-size: 12px; color: var(--pb-muted); }
.pb-table__filter-pill .pb-table__filter-pill-value {
  color: var(--pb-info);
  font-weight: 700;
}
.pb-table__filter-pill-clear {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 2px;
  color: var(--pb-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.pb-table__filter-pill-clear:hover { color: var(--pb-danger); }

.pb-table__toolbar-spacer { flex: 1 1 auto; }

.pb-table__toolbar-icon-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: var(--pb-radius);
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pb-table__toolbar-icon-btn:hover {
  background: var(--pb-bg);
  border-color: var(--pb-text);
}

/* --- Footer (count / total / pagination) ---
   Lives inside the same white card so it sits flush with the table.
   Reuses the .pb-pagination layout patterns but with blue active page
   instead of yellow, scoped via .pb-table-pagination class. */
.pb-table-footer {
  background: var(--pb-surface);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--pb-muted);
  font-weight: 500;
  border-top: 1px solid var(--pb-border);
}
.pb-table-footer__count strong {
  color: var(--pb-text);
  font-weight: 700;
}
.pb-table-footer__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pb-table-footer__per-page {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-table-footer__per-page select {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  background: var(--pb-surface);
  color: var(--pb-text);
  font-weight: 600;
  cursor: pointer;
}
.pb-table-footer__pages {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pb-table-footer__page {
  min-width: 32px;
  height: 32px;
  border-radius: var(--pb-radius-sm);
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-text);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pb-table-footer__page:hover:not(:disabled) {
  background: var(--pb-bg);
  border-color: var(--pb-text);
}
.pb-table-footer__page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pb-table-footer__page.is-active {
  background: var(--pb-info);
  border-color: var(--pb-info);
  color: var(--pb-surface);
}
.pb-table-footer__goto {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-table-footer__goto input {
  width: 56px;
  text-align: center;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  font-weight: 600;
}

/* --- Kebab menu trigger ---
   Used in the per-row actions cell. The dropdown menu itself uses
   Bootstrap's .dropdown-menu — only the trigger is custom-styled. */
.pb-table__kebab {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: var(--pb-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--pb-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pb-table__kebab:hover,
.pb-table__kebab[aria-expanded="true"] {
  background: var(--pb-bg);
  border-color: var(--pb-border);
  color: var(--pb-text);
}
.pb-table__kebab i { font-size: 18px; }

/* Bootstrap dropdown for the kebab — modest tweaks to match PB tone. */
.pb-table__menu.dropdown-menu {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-md);
  padding: 6px;
  font-size: 13px;
  min-width: 200px;
}
.pb-table__menu .dropdown-item {
  border-radius: var(--pb-radius-sm);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pb-text);
  font-weight: 500;
}
.pb-table__menu .dropdown-item:hover,
.pb-table__menu .dropdown-item:focus {
  background: var(--pb-bg);
  color: var(--pb-text);
}
.pb-table__menu .dropdown-item i {
  font-size: 14px;
  color: var(--pb-muted);
  width: 16px;
  text-align: center;
}
.pb-table__menu .dropdown-item--danger {
  color: var(--pb-danger);
}
.pb-table__menu .dropdown-item--danger i { color: var(--pb-danger); }
.pb-table__menu .dropdown-item--danger:hover {
  background: var(--pb-danger-soft);
  color: var(--pb-danger);
}
.pb-table__menu .dropdown-divider {
  margin: 4px 2px;
  border-color: var(--pb-border);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .pb-table {
    /* On narrow widths, drop the State + Postal columns visually by
       letting the user scroll horizontally instead of crushing layout.
       Keeping the grid tracks identical to the head ensures rows align. */
    overflow-x: auto;
  }
  .pb-table__head,
  .pb-table__row,
  .pb-table__add {
    min-width: 1000px;
  }
  .pb-table__detail { min-width: 1000px; }
}

/* =========================================================================
   PB-TABLE — modern data-grid component (separate from .pb-list-table and
   .pb-data-table). Used for backend listing pages where the user needs:
     - filter pills (saved views) above the table
     - per-column inline filter chips
     - sortable headers
     - bulk select (with PB-yellow indeterminate)
     - expandable rows with a key/value detail panel
     - per-row kebab menu instead of icon strips
     - dashed +Add row at the bottom
     - footer with COUNT / TOTAL
     - pagination with BLUE active page (not yellow — distinguishes the
       newer .pb-table component from older pages)
   ========================================================================= */

/* --- Saved views (page-level filter pills, sit on gray bg above card) -- */
.pb-saved-views {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0;
}

.pb-saved-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.pb-saved-view:hover {
  background: var(--pb-bg);
  color: var(--pb-text);
  border-color: var(--pb-text-soft);
}
.pb-saved-view.is-active {
  background: var(--pb-text);
  color: #fff;
  border-color: var(--pb-text);
}
.pb-saved-view__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
}
.pb-saved-view.is-active .pb-saved-view__count {
  background: rgba(255, 255, 255, 0.2);
}
.pb-saved-view--add {
  border-style: dashed;
  background: transparent;
  color: var(--pb-muted);
}
.pb-saved-view--add:hover {
  background: transparent;
  border-color: var(--pb-primary);
  color: var(--pb-text);
}

/* --- Outer card containing toolbar + table + pagination --------------- */
.pb-table-card {
  background: var(--pb-surface);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
  overflow: hidden;
}

/* --- Toolbar inside the card (search + filter chips + import/export) -- */
.pb-table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pb-border);
  flex-wrap: wrap;
}
.pb-table-toolbar__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
  max-width: 360px;
}
.pb-table-toolbar__search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pb-muted);
  pointer-events: none;
  font-size: 14px;
}
.pb-table-toolbar__search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
  color: var(--pb-text);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pb-table-toolbar__search input:focus {
  outline: 0;
  background: var(--pb-surface);
  border-color: var(--pb-text-soft);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}
.pb-table-toolbar__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.pb-table-toolbar__spacer { flex: 1 1 auto; }
.pb-table-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* --- Filter chips (column-level filters in toolbar) ------------------- */
.pb-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px dashed var(--pb-border);
  border-radius: 999px;
  background: var(--pb-surface);
  color: var(--pb-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.pb-filter-chip:hover {
  border-color: var(--pb-text-soft);
  color: var(--pb-text);
  background: var(--pb-bg);
}
.pb-filter-chip.is-active {
  border-style: solid;
  border-color: var(--pb-text);
  background: var(--pb-text);
  color: #fff;
}
.pb-filter-chip__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.25;
  margin: 0 2px;
}
.pb-filter-chip__value {
  font-weight: 700;
  color: inherit;
}
.pb-filter-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 10px;
  margin-left: 2px;
  border: 0;
  cursor: pointer;
}
.pb-filter-chip__clear:hover { background: rgba(255, 255, 255, 0.32); }

/* --- The table itself ------------------------------------------------- */
.pb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--pb-text);
}

.pb-table thead th {
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-muted);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.pb-table thead th:first-child { padding-left: 16px; }
.pb-table thead th:last-child  { padding-right: 16px; }

.pb-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.pb-table__sort:hover { color: var(--pb-text); }
.pb-table__sort i { font-size: 12px; opacity: 0.6; }
.pb-table__sort.is-sorted { color: var(--pb-text); }
.pb-table__sort.is-sorted i { opacity: 1; }

.pb-table tbody td {
  padding: 12px;
  vertical-align: middle;
}
.pb-table tbody td:first-child { padding-left: 16px; }
.pb-table tbody td:last-child  { padding-right: 16px; }

.pb-table tbody tr:hover td:not(.pb-table__cell--detail) {
  background: #fafafa;
}
.pb-table tbody tr.is-selected td:not(.pb-table__cell--detail) {
  background: var(--pb-primary-soft);
}
.pb-table tbody tr.is-expanded > td:not(.pb-table__cell--detail) {
  background: #fafafa;
  border-bottom-color: transparent;
}

/* Column widths / specific cell types */
.pb-table__cell--check  { width: 40px; padding-right: 0 !important; }
.pb-table__cell--expand { width: 36px; padding-left: 4px !important; padding-right: 0 !important; }
.pb-table__cell--id     { width: 64px; }
.pb-table__cell--actions{ width: 40px; text-align: right; }

.pb-table__cell--mono {
  font-family: var(--pb-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace);
  font-size: 12px;
  color: var(--pb-muted);
}

/* ID col — blue link */
.pb-table__id-link {
  color: var(--pb-info);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pb-table__id-link:hover { text-decoration: underline; color: var(--pb-info); }

/* Name col — click to edit (kept in pb-table scope) */
.pb-table__name {
  font-weight: 600;
  color: var(--pb-text);
  cursor: pointer;
}
.pb-table__name:hover { color: var(--pb-info); }

/* Cell flag — pure left-edge accent for green/red flagged values. The cell
   keeps its normal background; the flag is a thin left border. */
.pb-table__cell--flag-green { box-shadow: inset 3px 0 0 var(--pb-success); }
.pb-table__cell--flag-red   { box-shadow: inset 3px 0 0 var(--pb-danger); }

/* Expand chevron button */
.pb-table__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--pb-radius-sm);
  border: 0;
  background: transparent;
  color: var(--pb-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.18s ease;
}
.pb-table__expand:hover { background: var(--pb-bg); color: var(--pb-text); }
.pb-table__expand i { font-size: 14px; transition: transform 0.18s ease; }
.pb-table tr.is-expanded .pb-table__expand i { transform: rotate(90deg); }

/* Detail row — full-width cell that animates open below the parent row.
   The detail panel itself sits on the soft gray and has its own padding. */
.pb-table__row--detail { display: none; }
.pb-table tr.is-expanded + .pb-table__row--detail { display: table-row; }
.pb-table__cell--detail {
  padding: 0 !important;
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
}
.pb-table__detail {
  padding: 16px 20px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}
.pb-table__detail-section h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-muted);
  margin: 0 0 8px;
}
.pb-table__detail-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
.pb-table__detail-kv dt {
  color: var(--pb-muted);
  font-weight: 500;
}
.pb-table__detail-kv dd {
  margin: 0;
  color: var(--pb-text);
  font-weight: 500;
}
.pb-table__detail-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pb-table__detail-stat {
  flex: 1 1 100px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 10px 12px;
}
.pb-table__detail-stat__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-muted);
  margin-bottom: 4px;
}
.pb-table__detail-stat__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--pb-text);
  line-height: 1.1;
}
.pb-table__detail-stat__hint {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--pb-muted);
  margin-top: 2px;
}
.pb-table__detail-link {
  color: var(--pb-info);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.pb-table__detail-link:hover { text-decoration: underline; }
.pb-table__detail-empty {
  font-style: italic;
  color: var(--pb-muted);
  font-size: 12px;
}

/* Contacts list inside detail panel */
.pb-table__contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pb-table__contact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 8px 12px;
  font-size: 12px;
}
.pb-table__contact__name { font-weight: 700; color: var(--pb-text); }
.pb-table__contact__role { color: var(--pb-muted); font-size: 11px; }
.pb-table__contact__channels {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--pb-muted);
  font-size: 12px;
}
.pb-table__contact__channels a {
  color: var(--pb-info);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pb-table__contact__channels a:hover { text-decoration: underline; }

/* Dashed +Add row at the bottom of the table body */
.pb-table__add-row td {
  background: var(--pb-surface);
  border-top: 1px dashed var(--pb-border);
  border-bottom: 0;
  padding: 10px 16px;
  text-align: left;
}
.pb-table__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 8px 14px;
  color: var(--pb-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.pb-table__add-btn:hover {
  border-color: var(--pb-primary);
  background: var(--pb-primary-soft);
  color: var(--pb-text);
  border-style: solid;
}

/* --- Footer (count/total + per-page + pagination, blue active) -------- */
.pb-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--pb-border);
  font-size: 12px;
  color: var(--pb-muted);
  flex-wrap: wrap;
}
.pb-table-footer__count strong {
  color: var(--pb-text);
  font-weight: 700;
}
.pb-table-footer__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pb-table-footer__per-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pb-table-footer__per-page select {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  background: var(--pb-surface);
  color: var(--pb-text);
  font-weight: 600;
  cursor: pointer;
}
.pb-table-footer__pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pb-table-footer__page {
  min-width: 30px;
  height: 30px;
  border-radius: var(--pb-radius-sm);
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-text);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pb-table-footer__page:hover:not(:disabled) {
  background: var(--pb-info-soft);
  border-color: var(--pb-info);
  color: var(--pb-info);
}
.pb-table-footer__page:disabled { opacity: 0.4; cursor: not-allowed; }
.pb-table-footer__page.is-active {
  background: var(--pb-info);
  border-color: var(--pb-info);
  color: #fff;
}
.pb-table-footer__goto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pb-table-footer__goto input {
  width: 50px;
  text-align: center;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  font-weight: 600;
}

/* --- Empty state inside .pb-table ------------------------------------- */
.pb-table__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--pb-muted);
  font-size: 13px;
  background: var(--pb-surface);
}
.pb-table__empty i { font-size: 28px; color: var(--pb-muted-soft); margin-bottom: 6px; display: block; }

/* --- Kebab menu (per-row dropdown trigger + items) -------------------- */
.pb-kebab-menu {
  min-width: 180px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-md);
  padding: 4px;
  font-size: 13px;
}
.pb-kebab-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--pb-radius-sm);
  font-weight: 500;
  color: var(--pb-text);
}
.pb-kebab-menu .dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--pb-muted);
}
.pb-kebab-menu .dropdown-item:hover,
.pb-kebab-menu .dropdown-item:focus {
  background: var(--pb-bg);
  color: var(--pb-text);
}
.pb-kebab-menu .dropdown-item--danger { color: var(--pb-danger); }
.pb-kebab-menu .dropdown-item--danger i { color: var(--pb-danger); }
.pb-kebab-menu .dropdown-item--danger:hover,
.pb-kebab-menu .dropdown-item--danger:focus {
  background: var(--pb-danger-soft);
  color: var(--pb-danger);
}
.pb-kebab-menu .dropdown-divider {
  margin: 4px 0;
  border-color: var(--pb-border);
}

/* --- Indeterminate state on pb-checkbox (PB yellow dash) -------------- */
/* The existing .pb-checkbox already paints a yellow checkmark when
   :checked. We add a dash overlay when :indeterminate is set so bulk
   select reads as "some-selected" cleanly. */
.pb-checkbox input:indeterminate ~ .pb-checkbox__box {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
}
.pb-checkbox input:indeterminate ~ .pb-checkbox__box::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: var(--pb-primary-text);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  border: 0;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .pb-table__detail { grid-template-columns: 1fr; }
  .pb-table-toolbar { gap: 8px; }
  .pb-table-toolbar__chips { width: 100%; }
}

/* =========================================================================
   SPINNER (.pb-spinner)
   Tiny inline loading indicator. Inherits color from the parent so it
   reads cleanly inside any colored status string (processing/success/
   danger). Use as a sibling of text inside .pb-status.
   ========================================================================= */

.pb-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pb-spin 0.7s linear infinite;
  vertical-align: -2px;
  flex-shrink: 0;
}
@keyframes pb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================================
   STATUS (.pb-status)
   Inline colored status string with an optional leading icon/spinner.
   Used in the Message column of the Unpaid Reservations table — and
   anywhere else a row needs a state callout that isn't pill-shaped.
   ========================================================================= */

.pb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-status i { font-size: 14px; flex-shrink: 0; }

.pb-status--muted {
  color: var(--pb-muted);
  font-weight: 500;
  font-style: italic;
}
.pb-status--processing { color: var(--pb-info); }
.pb-status--success    { color: var(--pb-success-hover); }
.pb-status--danger     { color: var(--pb-danger); }

/* =========================================================================
   UNPAID RESERVATIONS TABLE (.pb-table--unpaid)
   Column-track override for the Unpaid Reservations modal's table. 8 cols:
   Invoice / Customer / Member or Team / Service / Time / Cost / Message /
   Actions. Uses minmax so flexible columns can shrink on narrower viewports
   while fixed-width columns (time, cost, actions) hold their shape.
   ========================================================================= */

.pb-table--unpaid {
  /* Force the table to honor its container width instead of auto-sizing to
     content — without this, the grid-templated rows can blow the table
     wider than the modal-body and the actions column gets clipped. */
  display: block;
  width: 100%;
  --pb-table-cols:
    90px
    minmax(120px, 1.2fr)
    minmax(110px, 1.1fr)
    minmax(130px, 1.3fr)
    80px
    80px
    minmax(140px, 1.4fr)
    240px;
}
.pb-table--unpaid > thead,
.pb-table--unpaid > tbody {
  display: block;
  width: 100%;
}

/* Right-align the cost column for tabular numbers */
.pb-table--unpaid .pb-table__cell--cost {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Action cell — buttons live inside .pb-row-actions and we want them
   right-aligned in the cell with a clear visual gap from the message
   column. Keep overflow:hidden (the default on .pb-table__cell) so buttons
   never bleed left into the message cell. */
.pb-table--unpaid .pb-table__cell--actions {
  /* The legacy `.pb-table__cell--actions { width: 40px }` rule above is meant
     for icon-button columns in older tables; here it shrinks the cell below
     its 240px grid track and the buttons overflow left into the Message
     column. width:auto lets the grid track govern the cell width. */
  width: auto;
  justify-content: flex-end;
  padding: 6px 16px 6px 8px;
}

/* Subtle visual treatment for paid rows — the row recedes once the
   payment has cleared so the admin's eye lands on what still needs work.
   Borders + button backgrounds are softened on tinted rows so they don't
   read as hard white/gray strips painted on top of the color. */
.pb-table--unpaid .pb-table__row.is-paid {
  background: rgba(34, 197, 94, 0.06);
  border-bottom-color: rgba(34, 197, 94, 0.18);
}
.pb-table--unpaid .pb-table__row.is-paid .pb-table__cell {
  color: var(--pb-muted);
}
.pb-table--unpaid .pb-table__row.is-error {
  background: rgba(239, 68, 68, 0.06);
  border-bottom-color: rgba(239, 68, 68, 0.18);
}

/* Outline buttons inside tinted rows: drop the white surface fill so
   the row's color reads through. Keeps the button shape via the border. */
.pb-table--unpaid .pb-table__row.is-paid .btn-pb-outline,
.pb-table--unpaid .pb-table__row.is-error .btn-pb-outline {
  background: transparent;
}

/* Action column inline button row — compact pair of Pay + Add Payment.
   `margin-left: auto` would also work, but justify-content on the cell
   handles right-alignment cleanly here. */
.pb-table--unpaid .pb-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  justify-content: flex-end;
}
.pb-table--unpaid .pb-row-actions .btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;          /* never wrap "Add payment" mid-word */
  flex-shrink: 0;
  box-shadow: none;             /* compact row buttons skip the shadow */
}

/* =========================================================================
   PAGE TAB NAV (.pb-page-tabs)
   Primary section navigation that sits on the gray --pb-bg page background,
   OUTSIDE the white content card. Bold dark labels with a yellow underline
   on the active tab. Used for top-level page navigation like
   Setup → Facilities / Categories / Equipments.
   Hard navigation between sibling files — each tab is its own bookmarkable
   page, not a JS-swapped pane.
   ========================================================================= */

.pb-page-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
}
.pb-page-tabs::-webkit-scrollbar { display: none; height: 0; }

.pb-page-tabs__item {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pb-muted);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.pb-page-tabs__item:hover,
.pb-page-tabs__item:focus { color: var(--pb-text); }

.pb-page-tabs__item.is-active {
  color: var(--pb-text);
  border-bottom-color: var(--pb-primary);
}

.pb-page-tabs__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--pb-primary);
  border-radius: var(--pb-radius-sm) var(--pb-radius-sm) 0 0;
}

@media (max-width: 767.98px) {
  .pb-page-tabs__item { padding: 10px 12px; font-size: 13px; }
}

/* =========================================================================
   FACILITY PICKER (.pb-facility-picker)
   Sits above the Setup tab nav. Scopes every tab below it to a single
   facility — selection persists across tabs via localStorage. White card
   on gray, treated as a top-level page control rather than form chrome.
   ========================================================================= */

.pb-facility-picker {
  background: var(--pb-surface);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
  padding: 14px 18px;
  margin: 0 0 16px;
}

.pb-facility-picker__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pb-facility-picker__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 280px;
}

.pb-facility-picker__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pb-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.pb-facility-picker__select.form-select {
  font-weight: 600;
  font-size: 14px;
  padding: 8px 38px 8px 12px;
  background-color: var(--pb-surface);
  border-color: var(--pb-border);
}

.pb-facility-picker__hint {
  margin: 0 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--pb-muted);
  text-align: right;
  max-width: 280px;
  line-height: 1.4;
}

@media (max-width: 575.98px) {
  .pb-facility-picker__field { min-width: 0; flex: 1 1 100%; }
  .pb-facility-picker__hint  { margin: 0; text-align: left; max-width: none; }
}

/* =========================================================================
   CONTENT CARD SHELL (.pb-card-shell)
   White card that wraps a horizontal section nav + body content. Used as
   the container for any page section that has internal sub-tabs (e.g., the
   Facility Setup → Details page hosts Details / Spaces / Contacts / Gates
   panes inside a single card).
   ========================================================================= */

.pb-card-shell {
  background: var(--pb-surface);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
}

.pb-card-shell__body {
  padding: 32px 40px;
}

/* Tab-nav row: holds the .pb-section-tabs on the left and a primary
   action (e.g. Save changes) on the right. Tabs scroll horizontally on
   narrow viewports while the action stays pinned. */
.pb-card-shell__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pb-card-shell__nav > .pb-section-tabs {
  flex: 1 1 auto;
  min-width: 0;
}
.pb-card-shell__nav-actions {
  flex-shrink: 0;
  margin-left: auto;             /* pin to the right even without sub-tabs */
  padding: 10px 20px 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .pb-card-shell__body { padding: 20px; }
  .pb-card-shell__nav-actions { padding: 8px 12px 8px 0; }
}

/* --- Page-scoped layout overrides ------------------------------------- *
 * These rules apply ONLY when section content sits inside a page card
 * (.pb-card-shell). The modal keeps its default narrow .pb-section__container
 * cap (768px) — pages get the full card width plus a 2-col section grid
 * utility for pairing small related sections side-by-side. The modal's
 * styling is intentionally not affected by anything below.
 * --------------------------------------------------------------------- */

/* Page section container fills the card — modal's 768px cap doesn't apply */
.pb-card-shell .pb-section__container {
  max-width: none;
}

/* Two-column section grid for grouping small related sections side-by-side.
   Falls back to a single column on viewports narrower than ~880px (auto-fit
   with 420px minmax) so each section keeps enough room for its inner field
   layout. Spacing between sibling rows is handled by combinators below so
   the first row in a pane doesn't pick up a stray top margin. */
.pb-card-shell .pb-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 40px;
}
.pb-card-shell .pb-section-grid > .pb-section {
  margin-top: 0;             /* the grid gap supersedes pb-section + pb-section spacing */
}
.pb-card-shell .pb-section + .pb-section-grid,
.pb-card-shell .pb-section-grid + .pb-section,
.pb-card-shell .pb-section-grid + .pb-section-grid {
  margin-top: 40px;
}

/* Modifier: forces a 2-col layout regardless of child count, so a single
   section renders at 50% with the right column intentionally empty. Used
   when a section should sit at 50% width but on its own row. */
.pb-card-shell .pb-section-grid--half {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 575.98px) {
  .pb-card-shell .pb-section-grid { gap: 32px; }
  .pb-card-shell .pb-section-grid--half {
    grid-template-columns: 1fr;
  }
}

/* Time picker on a page — use an explicit grid so two stacked pickers
   (e.g. Earliest open + Latest close) have rigidly aligned columns. The
   modal's .pb-time-picker keeps the original inline-flex layout. */
.pb-card-shell .pb-time-picker {
  display: inline-grid;
  grid-template-columns: 78px auto 78px 86px;
  align-items: center;
  gap: 6px;
}

/* Stacked label/time-picker rows. The parent grid declares one column
   per *select* (plus the label and the colon separator), and each
   .pb-time-picker becomes a subgrid spanning the picker columns. Effect:
   the hour, minute, and period selects share parent columns across rows
   and line up rigidly regardless of label-text width. Page-only utility.
   Falls back to a stacked layout on narrow screens. */
.pb-card-shell .pb-form-rows {
  display: grid;
  grid-template-columns: max-content 78px max-content 78px 86px;
  justify-content: start;        /* keep tracks tight; don't distribute extra space */
  align-items: center;
  row-gap: 16px;
  column-gap: 6px;
}
.pb-card-shell .pb-form-rows > .form-label {
  margin-bottom: 0;
  padding-right: 18px;          /* visual gap between label and first select */
}
.pb-card-shell .pb-form-rows .pb-time-picker {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 2 / -1;          /* span picker columns of the parent grid */
  column-gap: 6px;
  align-items: center;
}

@media (max-width: 575.98px) {
  .pb-card-shell .pb-form-rows {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .pb-card-shell .pb-form-rows > .form-label {
    margin-bottom: 4px;
    padding-right: 0;
  }
  /* On mobile, the picker drops back to its standalone inline-grid layout */
  .pb-card-shell .pb-form-rows .pb-time-picker {
    display: inline-grid;
    grid-template-columns: 78px auto 78px 86px;
    grid-column: auto;
  }
}

/* =========================================================================
   SECTION TABS (.pb-section-tabs)
   Horizontal SECONDARY tab nav that lives INSIDE a white container — sits
   at the top of a .pb-card-shell to sub-divide its content into panes.
   Driven by the same data-pb-nav / data-pb-pane API used by the modal's
   vertical nav, so panes can be swapped client-side without page navigation.
   Bold dark labels with a yellow underline on the active tab. A subtle
   bottom border separates the tabs from the pane content below.
   ========================================================================= */

.pb-section-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0 24px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pb-section-tabs::-webkit-scrollbar { display: none; height: 0; }

.pb-section-tabs__item {
  display: inline-flex;
  align-items: center;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pb-muted);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.pb-section-tabs__item:hover,
.pb-section-tabs__item:focus { color: var(--pb-text); }

.pb-section-tabs__item.is-active {
  color: var(--pb-text);
  border-bottom-color: var(--pb-primary);
}

.pb-section-tabs__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--pb-primary);
  border-radius: var(--pb-radius-sm) var(--pb-radius-sm) 0 0;
}

@media (max-width: 575.98px) {
  .pb-section-tabs { padding: 0 12px; }
  .pb-section-tabs__item { padding: 12px; font-size: 13px; }
}

/* =========================================================================
   SETUP PAGE RESPONSIVE REFINEMENTS
   Scoped to content inside the white page card (.pb-card-shell) so the modal
   and other layouts are unaffected. Desktop (>=992px) appearance is unchanged
   — every rule below lives inside a max-width media query. These cover the
   facility-setup pages (services, employees, equipment, memberships,
   discounts, packages, tags, spaces, gates, pages, details).
   ========================================================================= */

/* TABLET (<=991px) ----------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Page card padding eases in slightly before the 768px step. */
  .pb-card-shell__body { padding: 24px 28px; }
}

/* MOBILE (<=575px) ----------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Section heading rows that carry an inline "Add X" action
     (h3.pb-section__title.d-flex.justify-content-between) wrap so the button
     drops beneath the heading instead of crowding/clipping it. */
  .pb-card-shell .pb-section__title.d-flex {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  /* Make the inline Add button full-width once it has wrapped below the
     heading so it reads as a clear primary action on small screens. */
  .pb-card-shell .pb-section__title.d-flex > .btn {
    width: 100%;
  }

  /* List/card rows: the inner "info + actions" flex (inline
     .d-flex.justify-content-between on .pb-card) keeps the action buttons
     pinned right while the text block shrinks. Guarantee the text block can
     shrink rather than push the buttons off-screen. */
  .pb-card-shell .pb-card > .d-flex > div:first-child { min-width: 0; }

  /* Add-form action button spans full width when the row wraps. */
  .pb-card-shell .pb-add-form .col-12.col-md-auto .btn { width: 100%; }

  /* Generic guard: nothing inside the card forces horizontal scroll. */
  .pb-card-shell .pb-section__container { overflow-wrap: break-word; }
}

/* =========================================================================
   PAGE STUB (.pb-page-stub)
   Centered placeholder shown on Setup tabs that haven't been built yet.
   Replace the stub block with real page content as each tab is implemented.
   ========================================================================= */

.pb-page-stub {
  background: var(--pb-surface);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-sm);
  padding: 80px 32px;
  text-align: center;
}

.pb-page-stub__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pb-primary-soft);
  color: var(--pb-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.pb-page-stub__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pb-text);
  margin: 0 0 8px;
}

.pb-page-stub__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--pb-muted);
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.5;
}


/* ── Program: Pricing Model Cards ─────────────────────────────────────── */
.pb-pricing-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 4px 0 24px;
}
@media (max-width: 640px) {
  .pb-pricing-model-grid { grid-template-columns: 1fr; }
}
.pb-pricing-model-card {
  display: block;
  cursor: pointer;
  position: relative;
}
.pb-pricing-model-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.pb-pricing-model-card__inner {
  display: block;
  border: 1.5px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: var(--pb-surface);
  height: 100%;
}
.pb-pricing-model-card:hover .pb-pricing-model-card__inner {
  border-color: var(--pb-primary);
}
.pb-pricing-model-card input[type="radio"]:checked + .pb-pricing-model-card__inner {
  border-color: var(--pb-primary);
  background: var(--pb-primary-soft);
}
.pb-pricing-model-card input[type="radio"]:focus-visible + .pb-pricing-model-card__inner {
  box-shadow: 0 0 0 2px var(--pb-surface), 0 0 0 4px var(--pb-primary);
}
.pb-pricing-model-card__icon {
  display: block;
  font-size: 20px;
  color: #b45309;
  margin-bottom: 8px;
}
.pb-pricing-model-card__title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--pb-text);
  margin-bottom: 4px;
}
.pb-pricing-model-card__desc {
  display: block;
  font-size: 12px;
  color: var(--pb-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* ── Program: Tiered pricing table ────────────────────────────────────── */
.pb-data-table__head--tiered,
.pb-data-table__row--tiered {
  grid-template-columns: 110px 1fr 1fr 1fr 1fr;
  width: auto;
}
.pb-data-table__cell--tier-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--pb-text);
}

/* =========================================================================
   Membership → Included services usage table
   Two groups — service tags and individual services — each with monthly /
   weekly usage caps. A service covered by an included tag AND added
   individually is flagged as a conflict (it can only be counted once).
   ========================================================================= */
.pb-included-section + .pb-included-section { margin-top: 24px; }
.pb-included-section__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.pb-included-section__hint {
  font-size: 12px;
  color: var(--pb-muted);
  font-weight: 500;
  margin: 0 0 12px;
}
.pb-included-table {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  overflow: hidden;
  margin-top: 4px;
}
.pb-included-table__head,
.pb-included-row {
  display: grid;
  grid-template-columns: 1.5fr 160px 160px 40px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
}
.pb-included-table__head {
  background: var(--pb-bg);
  border-bottom: 1px solid var(--pb-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pb-muted);
}
.pb-included-row {
  border-bottom: 1px solid var(--pb-border);
  background: var(--pb-surface);
}
.pb-included-row:last-child { border-bottom: 0; }
/* "Applies to" variant (Package → Services): name + remove only, no usage caps. */
.pb-included-table--applies .pb-included-table__head,
.pb-included-table--applies .pb-included-row { grid-template-columns: 1fr 40px; }
.pb-included__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--pb-text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pb-included__name .bi-tag-fill { color: var(--pb-primary-hover); font-size: 14px; }
.pb-included__members {
  font-size: 12px;
  color: var(--pb-muted);
  font-weight: 500;
  margin-top: 4px;
}
.pb-included__members strong { color: var(--pb-text); font-weight: 600; }

/* Conflict: this individual service is also covered by an included tag */
.pb-included-row.is-conflict {
  background: #fef2f2;
  box-shadow: inset 3px 0 0 var(--pb-danger);
}
.pb-included__conflict {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  margin-top: 5px;
}
.pb-included__conflict[hidden] { display: none; }

.pb-included__remove {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--pb-muted);
  border-radius: var(--pb-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  justify-self: end;
}
.pb-included__remove:hover { color: var(--pb-danger); background: var(--pb-danger-soft); }
.pb-included__col-label { display: none; }

/* Add control + picker dropdown */
.pb-included-add { position: relative; display: inline-block; margin-top: 12px; }
.pb-included-picker {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 260px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-md);
  padding: 0;
  overflow: hidden;
}
.pb-included-picker[hidden] { display: none; }
/* Sticky type-to-filter search at the top; the option list scrolls below it. */
.pb-included-picker__filter { position: relative; padding: 8px; border-bottom: 1px solid var(--pb-border); }
.pb-included-picker__filter i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--pb-muted); font-size: 13px; pointer-events: none;
}
.pb-included-picker__input {
  width: 100%; height: 34px; padding: 0 10px 0 30px;
  border: 1px solid var(--pb-border); border-radius: 6px;
  font-size: 13px; background: var(--pb-surface); color: var(--pb-text);
}
.pb-included-picker__input:focus { outline: none; border-color: var(--pb-primary); box-shadow: 0 0 0 3px var(--pb-primary-soft); }
.pb-included-picker__list { max-height: 220px; overflow-y: auto; padding: 6px; }
.pb-included-picker__item[hidden] { display: none; }
.pb-included-picker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-text);
}
.pb-included-picker__item:hover { background: var(--pb-bg); }
.pb-included-picker__item i { color: var(--pb-muted); font-size: 14px; }
.pb-included-picker__none { padding: 10px; font-size: 12px; color: var(--pb-muted); font-weight: 600; text-align: center; }
.pb-included-empty {
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-bg);
  color: var(--pb-muted);
  font-size: 13px;
  font-weight: 600;
}

/* Stack each row on narrow screens */
@media (max-width: 640px) {
  .pb-included-table__head { display: none; }
  .pb-included-row {
    grid-template-columns: 1fr;
    gap: 10px;
    position: relative;
    padding: 14px 16px;
  }
  .pb-included__remove { position: absolute; top: 12px; right: 10px; }
  .pb-included__col-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pb-muted);
    margin-bottom: 5px;
  }
}

/* =========================================================================
   Chip multi-select — a group of pill checkboxes. Selected chips fill with
   soft yellow + a yellow border. Pure CSS (no JS); posts like any checkbox.
   Used e.g. for a package's facilities on the Details tab.
   ========================================================================= */
.pb-chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chip-check { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.pb-chip-check input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.pb-chip-check__label {
  display: inline-flex; align-items: center;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--pb-border); background: var(--pb-surface);
  font-size: 13px; font-weight: 600; color: var(--pb-text);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pb-chip-check:hover .pb-chip-check__label { border-color: var(--pb-text-soft, #cbd2dc); }
.pb-chip-check input:checked + .pb-chip-check__label {
  border-color: var(--pb-primary); background: var(--pb-primary-soft); color: var(--pb-text);
}
.pb-chip-check input:focus-visible + .pb-chip-check__label {
  box-shadow: 0 0 0 3px var(--pb-primary-soft);
}
.pb-chip-check input:disabled + .pb-chip-check__label { opacity: .5; cursor: not-allowed; }