/* ============================================
   Quota & Assignment Modal — aligned to canonical
   app primitives (.modal-header / .tab-btn /
   .proposer-chip / .boards-dropdown / .modal-footer).
   See style.css for source-of-truth tokens.
   ============================================ */

/* Modal sizing — wide modal, but uses the canonical
   --radius-2xl, --surface-primary, and shadow stack
   from .modal-content (style.css:12536). */
.quota-assignment-modal .modal-content,
.quota-assignment-modal-content {
  max-width: 1400px;
  width: 98%;
  height: 94vh;
  max-height: 94vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl, 24px);
  background: var(--surface-primary, #ffffff);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    var(--shadow-glow-lg);
}

body.dark-mode .quota-assignment-modal .modal-content,
body.dark-mode .quota-assignment-modal-content {
  background: var(--surface-secondary);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 60px rgba(20, 184, 166, 0.15);
}

/* Header — inherits .modal-header from style.css:13333.
   Local rules only override what the wide layout needs. */
.qa-header {
  flex-shrink: 0;
  gap: 16px;
}

.qa-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.qa-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.qa-header h2 i {
  color: var(--primary-500, #14b8a6);
  font-size: 0.875em;
}

/* Tier badge — chip geometry mirrors .proposer-chip
   (style.css:22826) but tinted with the brand gradient
   to read as "tier indicator" rather than "filter". */
.qa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--accent-500) 100%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  /* NO uppercase (2026-09-01): the 2026-08-14 fix renamed the badge to
     "Business plan" so it names the REQUIREMENT, but text-transform was
     shouting it back to "BUSINESS PLAN" — which reads as a status claim
     ("you are on Business") right beside a plan-locked banner. Sentence
     case keeps it a label, not a verdict. */
  letter-spacing: 0.05em;
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.25);
  flex: 0 0 auto;
}

/* Board selector pill — mirrors .proposer-chip neutral
   resting state (style.css:22826) so it sits beside the
   ENTERPRISE badge as a coherent chip row. */
.qa-board-selector {
  position: relative;
  flex: 0 0 auto;
}

.qa-board-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--white, #fff);
  color: var(--slate-700, #334155);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.qa-board-selector-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  color: var(--primary-700);
}

.qa-board-selector-btn > i:first-child {
  color: var(--primary-500);
  font-size: 0.8125rem;
}

.qa-board-chevron {
  font-size: 0.625rem;
  color: var(--slate-400);
  transition: transform 0.15s ease;
}

.qa-board-selector.open .qa-board-chevron {
  transform: rotate(180deg);
}

body.dark-mode .qa-board-selector-btn {
  background: var(--surface-secondary);
  border-color: var(--slate-700);
  color: var(--slate-200);
}

body.dark-mode .qa-board-selector-btn:hover {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.4);
  color: var(--primary-300);
}

/* Board dropdown — mirrors .boards-dropdown chrome
   (style.css:1044). Same width, radius, shadow, items. */
.qa-board-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, 90vw);
  background: var(--surface-primary);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown, 1040);
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-2, 8px) 0;
}

.qa-board-dropdown.active {
  display: flex;
}

.qa-board-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--slate-700);
  cursor: pointer;
  transition: background 0.15s ease;
}

.qa-board-option:hover {
  background: var(--slate-50);
}

.qa-board-option.active {
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 600;
}

.qa-board-option > i {
  color: var(--primary-500);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.qa-board-count {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 0.6875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qa-board-option.active .qa-board-count {
  background: var(--primary-100, #ccfbf1);
  color: var(--primary-700);
}

.qa-board-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--slate-200);
}

.qa-board-create {
  color: var(--primary-600);
  font-weight: 600;
}

.qa-board-create > i {
  color: var(--primary-500);
}

body.dark-mode .qa-board-dropdown {
  background: var(--surface-secondary);
  border-color: var(--slate-700);
}

body.dark-mode .qa-board-option {
  color: var(--slate-200);
}

body.dark-mode .qa-board-option:hover {
  background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .qa-board-option.active {
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-300);
}

body.dark-mode .qa-board-divider {
  background: var(--slate-700);
}

body.dark-mode .qa-board-count {
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate-300);
}

/* Tabs — mirrors .tab-btn from style.css:21527.
   Same underline animation, same active pill bg,
   same dark-mode pair. */
.qa-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  flex-shrink: 0;
  overflow-x: auto;
  /* A SCROLLING TAB STRIP MUST LOOK SCROLLABLE (2026-08-14, user: "this blank
     version with no options was discovered on mobile").
     Measured at 412px: 609px of tabs inside a 404px strip, so Distribute and
     History sat off-screen with NO visual cue — indistinguishable from "those
     tabs do not exist", which is exactly how it was reported. Snap-scrolling
     plus a fade on the overflowing edge makes the strip legible as something
     you can move, and momentum scrolling makes it feel like one. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* the fade is the affordance */
  position: relative;
}
.qa-tabs::-webkit-scrollbar { display: none; }
.qa-tab { scroll-snap-align: start; }

/* The fade cue itself. It is a STICKY flex item rather than a ::after on the
   strip, because a pseudo-element positioned inside a scrolling container
   scrolls away with the content — it would vanish at exactly the moment it is
   meant to say "there is more this way". Sticky keeps it pinned to the visible
   right edge while the tabs move underneath.
   `position: sticky; right: 0` + a negative margin so it overlays the last tab
   instead of consuming width (which would push yet another tab out of view). */
.qa-tabs::after {
  content: '';
  position: sticky;
  right: 0;
  flex: 0 0 28px;
  margin-left: -28px;
  align-self: stretch;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--white, #fff) 78%);
}
body.dark-mode .qa-tabs::after {
  background: linear-gradient(to right, transparent, var(--slate-900, #0f172a) 78%);
}
/* Desktop has room for all five tabs, so the fade would be a lie there. */
@media (min-width: 768px) {
  .qa-tabs::after { display: none; }
}

.qa-tab {
  flex: 0 0 auto;
  min-width: fit-content;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--slate-500, #746d8f);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qa-tab::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: var(--primary-500, #14b8a6);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.qa-tab:hover {
  color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.08);
}

.qa-tab:hover::before {
  transform: translateX(-50%) scaleX(1);
}

.qa-tab.active {
  color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.12);
  font-weight: 700;
}

.qa-tab.active::before {
  transform: translateX(-50%) scaleX(1);
}

.qa-tab i {
  font-size: 0.875em;
  color: currentColor;
  opacity: 0.85;
}

body.dark-mode .qa-tab {
  color: var(--slate-400, #a0a0b0);
}

body.dark-mode .qa-tab:hover {
  color: var(--primary-400);
  background: rgba(20, 184, 166, 0.12);
}

body.dark-mode .qa-tab.active {
  color: var(--primary-400);
  background: rgba(20, 184, 166, 0.2);
}

body.dark-mode .qa-tabs {
  border-bottom-color: var(--slate-700);
}

/* Tab content — fills remaining space; scrolls if needed.
   Inherits 24px padding rhythm from .modal-body
   (style.css:13412). */
.qa-tab-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Persistent modal footer — mirrors .modal-footer
   (style.css:13423). Reserved for the future
   modal-level sticky action surface; per-tab Save
   buttons keep using the in-tab .qa-action-bar
   block defined further down. */
.qa-modal-action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px 24px calc(16px + var(--safe-area-bottom, 0px));
  border-top: 1px solid var(--slate-200, #e2e8f0);
  background: var(--surface-primary, #fff);
  border-radius: 0 0 var(--radius-2xl, 24px) var(--radius-2xl, 24px);
  flex-shrink: 0;
}

.qa-modal-action-bar-status {
  margin-right: auto;
  font-size: 0.8125rem;
  color: var(--slate-500);
}

body.dark-mode .qa-modal-action-bar {
  border-top-color: var(--slate-700);
  background: var(--surface-secondary);
}

body.dark-mode .qa-modal-action-bar-status {
  color: var(--slate-400);
}

/* ============================================
   UTILITIES — small helpers used across tabs.
   Replace inline style="display:none / width:60px /
   text-transform:uppercase / flex:N" usages so the
   markup stays clean and themeable.
   ============================================ */

.qa-tab-content .is-hidden,
.shift-type-editor .is-hidden {
  display: none !important;
}

.qa-input-narrow {
  width: 60px;
}

.qa-input-uppercase {
  text-transform: uppercase;
}

.qa-form-group-1 {
  flex: 1;
}

.qa-form-group-2 {
  flex: 2;
}

.qa-mt-sm { margin-top: 10px; }
.qa-mt-md { margin-top: 16px; }
.qa-mb-sm { margin-bottom: 10px; }
.qa-mb-md { margin-bottom: 16px; }

/* Stat-card variants — inline border + value colors
   were previously hardcoded; route through classes so
   dark-mode + theme tokens stay coherent. */
.qa-stat-card.qa-stat-warning {
  border-color: rgba(245, 158, 11, 0.4);
}

.qa-stat-card.qa-stat-warning .qa-stat-value {
  color: var(--status-flex, #fbbf24);
}

body.dark-mode .qa-stat-card.qa-stat-warning {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.08);
}

/* Empty-state success/error variants — replace inline
   color="..." on the wrapper. */
.qa-empty-state.qa-success > i {
  color: var(--primary-500, #14b8a6);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(6, 182, 212, 0.10));
}

.qa-empty-state.qa-error > i {
  color: var(--error, #ef4444);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.08));
}

.qa-empty-state.qa-error .qa-empty-state-title {
  color: var(--error, #ef4444);
}

/* ============================================
   SHIFT TYPES TAB
   ============================================ */

/* Tab toolbar — section title on the left, primary
   action on the right. Used at the top of each tab so
   action affordances live in one consistent place. */
.qa-tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.qa-tab-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--slate-800, #1e293b);
  letter-spacing: -0.01em;
}

body.dark-mode .qa-tab-title {
  color: var(--slate-100, #f1f5f9);
}

/* Coverage type cards — card chrome aligned to canonical
   .member-selection-item (style.css:37794). The leading
   color swatch + icon read --qa-type-color from the row
   so no inline style="color:..." is needed. */
.qa-shift-types-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.qa-shift-type-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qa-shift-type-item:hover {
  border-color: var(--primary-300, #5eead4);
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.08);
}

.qa-shift-type-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--qa-type-color, var(--primary-500, #14b8a6));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.qa-shift-type-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--qa-type-color, var(--primary-500, #14b8a6));
  background: color-mix(in srgb, var(--qa-type-color, #14b8a6) 12%, transparent);
  flex-shrink: 0;
}

.qa-shift-type-info {
  flex: 1;
  min-width: 0;
}

.qa-shift-type-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-800, #1f2937);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.qa-shift-type-short {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-400, #94a3b8);
}

.qa-shift-type-meta {
  font-size: 0.75rem;
  color: var(--slate-500, #6b7280);
  margin-top: 2px;
}

.qa-shift-type-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.qa-shift-type-actions button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--slate-500, #6b7280);
  border-radius: var(--radius-sm, 8px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.qa-shift-type-actions button:hover {
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-700, #334155);
}

.qa-shift-type-actions .qa-btn-delete:hover {
  color: var(--error, #ef4444);
  background: rgba(239, 68, 68, 0.08);
}

body.dark-mode .qa-shift-type-item {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700);
}

body.dark-mode .qa-shift-type-item:hover {
  border-color: rgba(20, 184, 166, 0.4);
}

body.dark-mode .qa-shift-type-name {
  color: var(--slate-100);
}

body.dark-mode .qa-shift-type-short {
  color: var(--slate-500);
}

body.dark-mode .qa-shift-type-meta {
  color: var(--slate-400);
}

body.dark-mode .qa-shift-type-actions button {
  color: var(--slate-400);
}

body.dark-mode .qa-shift-type-actions button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate-100);
}

/* Shift Type Editor Form */
.qa-editor-form {
  padding: 20px;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--primary-color, #14b8a6);
  margin-bottom: 20px;
}

.qa-editor-form .qa-form-row {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.qa-editor-form label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  min-width: 90px;
}

.qa-editor-form input[type="text"],
.qa-editor-form input[type="number"],
.qa-editor-form select {
  padding: 10px 14px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-lg, 14px);
  font-size: 0.9375rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
  flex: 1;
  min-width: 80px;
  transition: all var(--transition-fast, 0.15s);
}

.qa-editor-form input[type="text"]:focus,
.qa-editor-form input[type="number"]:focus,
.qa-editor-form select:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

.qa-editor-form .qa-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Empty state — mirrors .empty-state composition
   from style.css:35750 (centered illustration +
   title + hint). Icon sits inside a soft brand-tinted
   circle. */
.qa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--slate-500, #6b7280);
  font-size: 0.9375rem;
  gap: 12px;
}

.qa-empty-state > i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--primary-500, #14b8a6);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(6, 182, 212, 0.08));
  margin-bottom: 6px;
}

.qa-empty-state-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-800, #1e293b);
  letter-spacing: -0.01em;
}

.qa-empty-state-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--slate-500, #6b7280);
  max-width: 320px;
  line-height: 1.45;
}

body.dark-mode .qa-empty-state-title {
  color: var(--slate-100);
}

body.dark-mode .qa-empty-state-hint {
  color: var(--slate-400);
}

/* Info banner — same gradient shape as .collab-cta-banner
   (style.css:13489) but slimmer; reused across tabs as
   the canonical "tip / status" callout. */
.qa-blank-slate-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(20, 184, 166, 0.05));
  border: 1px solid rgba(13, 148, 136, 0.25);
  color: var(--slate-700, #334155);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.qa-blank-slate-hint i {
  color: var(--primary-500, #14b8a6);
  font-size: 1rem;
  flex: 0 0 auto;
}

.qa-blank-slate-hint strong {
  font-weight: 600;
  color: var(--slate-800, #1f2937);
}

body.dark-mode .qa-blank-slate-hint {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.06));
  border-color: rgba(20, 184, 166, 0.35);
  color: var(--slate-200);
}

body.dark-mode .qa-blank-slate-hint strong {
  color: var(--slate-100);
}

.qa-quota-progress-row.qa-row-placeholder .qa-quota-progress-fill {
  opacity: 0.35;
}
.qa-quota-progress-row.qa-row-placeholder .qa-hour-input {
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}
.qa-quota-progress-row.qa-row-placeholder .qa-quota-used em {
  font-style: italic;
  opacity: 0.7;
}

/* ============================================
   QUOTAS TAB
   ============================================ */

.qa-quota-table-wrapper {
  overflow-x: auto;
  margin-bottom: 20px;
}

.qa-quota-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.qa-quota-table th {
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-align: center;
  border-bottom: 2px solid var(--border-subtle, #e5e7eb);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qa-quota-table th:first-child {
  text-align: left;
}

.qa-quota-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  text-align: center;
  vertical-align: middle;
}

.qa-quota-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.qa-quota-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.qa-quota-cell input[type="number"] {
  width: 64px;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.875rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
}

.qa-quota-cell input[type="number"]:focus {
  border-color: var(--primary-color, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

.qa-quota-used {
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
}

.qa-quota-used.over-quota {
  color: var(--status-busy, #64748b);
  font-weight: 600;
}

.qa-quota-period-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}

.qa-quota-period-selector label {
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

.qa-quota-period-selector select {
  padding: 6px 10px;
  border: 1px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.875rem;
  background: var(--surface-primary, #fff);
}

/* ============================================
   AUTO-ASSIGN TAB
   ============================================ */

.qa-assign-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qa-control-group label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #6b7280);
}

.qa-control-group input[type="date"] {
  padding: 10px 14px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-lg, 14px);
  font-size: 0.9375rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
  transition: all var(--transition-fast, 0.15s);
}

.qa-control-group input[type="date"]:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

.qa-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qa-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text-primary, #111827);
  cursor: pointer;
}

.qa-checkbox-label input[type="checkbox"] {
  accent-color: var(--primary-color, #14b8a6);
}

/* In-tab action bar — a CTA row appended at the
   bottom of a tab's body. Visually distinct from
   the (future) modal-level sticky .qa-modal-action-bar:
   no border-top, no surface bg, just spacing. */
.qa-action-bar {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 0 4px;
  margin-top: 8px;
}

.qa-action-centered {
  justify-content: center;
}

/* Buttons - matches platform .propose-btn pattern */
.qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qa-btn i {
  font-size: 0.8125rem;
}

.qa-btn-primary {
  background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--primary-600, #0d9488) 100%);
  color: #fff;
}

.qa-btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-600, #0d9488) 0%, var(--primary-700, #0f766e) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

.qa-btn-secondary {
  background: none;
  color: var(--text-secondary, #4b5563);
  border: 1px solid var(--border-default, #d1d5db);
}

.qa-btn-secondary:hover {
  background: var(--surface-tertiary, #f3f4f6);
  color: var(--text-primary, #111827);
}

.qa-btn-danger {
  background: none;
  color: var(--status-busy, #64748b);
  border: 1px solid color-mix(in srgb, var(--status-busy, #64748b) 30%, transparent);
}

.qa-btn-danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.qa-btn-sm {
  padding: 6px 12px;
  font-size: 0.8125rem;
}

/* Preview table */
.qa-preview-section {
  margin-top: 20px;
}

.qa-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.qa-preview-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  margin: 0;
}

.qa-preview-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.qa-stat-card {
  padding: 14px 18px;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  text-align: center;
  min-width: 100px;
}

.qa-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-color, #14b8a6);
}

.qa-stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 3px;
}

.qa-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.qa-preview-table th {
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-align: left;
  border-bottom: 2px solid var(--border-subtle, #e5e7eb);
  font-size: 0.8125rem;
  text-transform: uppercase;
}

.qa-preview-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  color: var(--text-primary, #111827);
}

.qa-preview-table tr:hover {
  background: var(--surface-secondary, #f9fafb);
}

/* Fairness indicator dots */
.qa-fairness-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Fairness band swatch colours pull from the canonical 9-step ramp in
   css/fairness-view.css (--fv-l1..l9), so the modal speaks the same colour
   vocabulary as the fairness panel + per-row burden shading. Memory
   `traffic_light_palette.md` is the contract. */
.qa-fairness-excellent { background: var(--fv-l2, #15803d); }
.qa-fairness-good { background: var(--fv-l3, #16a34a); }
.qa-fairness-fair { background: var(--fv-l5, #fbbf24); }
.qa-fairness-attention { background: var(--fv-l6, #f59e0b); }
.qa-fairness-critical { background: var(--fv-l8, #dc2626); }
/* Audit-2026-05-30-03-23: degenerate-input / no-coverage case. Neutral
   grey so a 0-shift preview doesn't paint a green "Excellent" pill. */
.qa-fairness-no-data { background: var(--text-muted, #94a3b8); }

/* Fairness label badges in preview stats */
.qa-stat-value .qa-fairness-dot {
  width: 10px;
  height: 10px;
}

.qa-stat-card:has(.qa-fairness-dot) .qa-stat-value {
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Pill text + tint derive from the same --fv-l* ramp the swatch reads.
   color-mix keeps the text legible against light/dark backgrounds without
   hand-tuning per-band hex values. */
.qa-stat-card:has(.qa-fairness-excellent) .qa-stat-value {
  background: color-mix(in srgb, var(--fv-l2, #15803d) 15%, transparent);
  color: color-mix(in srgb, var(--fv-l2, #15803d) 90%, var(--text-primary, #1f2937));
}

.qa-stat-card:has(.qa-fairness-good) .qa-stat-value {
  background: color-mix(in srgb, var(--fv-l3, #16a34a) 15%, transparent);
  color: color-mix(in srgb, var(--fv-l3, #16a34a) 90%, var(--text-primary, #1f2937));
}

.qa-stat-card:has(.qa-fairness-fair) .qa-stat-value {
  background: color-mix(in srgb, var(--fv-l5, #fbbf24) 18%, transparent);
  color: color-mix(in srgb, var(--fv-l5, #fbbf24) 80%, var(--text-primary, #1f2937));
}

.qa-stat-card:has(.qa-fairness-attention) .qa-stat-value {
  background: color-mix(in srgb, var(--fv-l6, #f59e0b) 18%, transparent);
  color: color-mix(in srgb, var(--fv-l6, #f59e0b) 85%, var(--text-primary, #1f2937));
}

.qa-stat-card:has(.qa-fairness-critical) .qa-stat-value {
  background: color-mix(in srgb, var(--fv-l8, #dc2626) 15%, transparent);
  color: var(--fv-l8, #dc2626);
}

.qa-stat-card:has(.qa-fairness-no-data) .qa-stat-value {
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 15%, transparent);
  color: var(--text-secondary, #475569);
}

/* Warnings — canonical flex-amber (memory `traffic_light_palette.md`). */
/* B1: persistent "Local only — not synced" banner at the top of the modal.
   Amber (flex token) = caution, not error-red — committing locally isn't a
   failure, but the admin must know it didn't reach the team. */
.qa-sync-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-primary, #1e293b);
  background: color-mix(in srgb, var(--status-flex, #fbbf24) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-flex, #fbbf24) 35%, transparent);
}
.qa-sync-banner i {
  color: var(--status-flex, #d97706);
  flex: 0 0 auto;
}
.dark-mode .qa-sync-banner {
  color: var(--text-primary, #e2e8f0);
  background: color-mix(in srgb, var(--status-flex, #fbbf24) 18%, transparent);
}

/* READ-ONLY EXPLANATION (2026-08-14, user: "this blank version with no options
   was discovered on mobile enterprise tier. no way to do anything by ui").
   Hiding the three write tabs left an empty state whose CTA jumped to a tab
   that was no longer rendered. This note says WHICH of the three reasons
   applies. Neutral slate rather than the amber sync banner: not knowing your
   plan yet, or not being an admin, is a state of affairs, not a warning. */
.qa-readonly-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-primary, #1e293b);
  background: color-mix(in srgb, var(--status-empty, #e2e8f0) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--slate-400, #94a3b8) 40%, transparent);
}
.qa-readonly-note i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--slate-500, #64748b);
}
.qa-readonly-note .qa-readonly-retry {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 12px;
  min-height: 32px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--white, #fff);
  color: var(--text-primary, #1e293b);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.qa-readonly-note .qa-readonly-retry:hover {
  background: var(--slate-50, #f8fafc);
  border-color: var(--slate-400, #94a3b8);
}
/* On a phone the note + button will not sit on one line without cramping. */
@media (max-width: 560px) {
  .qa-readonly-note { flex-wrap: wrap; }
  .qa-readonly-note .qa-readonly-retry {
    margin-left: 0;
    width: 100%;
    min-height: 44px; /* touch target */
  }
}
.dark-mode .qa-readonly-note {
  color: var(--text-primary, #e2e8f0);
  background: color-mix(in srgb, var(--slate-700, #334155) 55%, transparent);
  border-color: color-mix(in srgb, var(--slate-500, #64748b) 45%, transparent);
}
.dark-mode .qa-readonly-note .qa-readonly-retry {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-100, #f1f5f9);
}

.qa-warnings {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--status-flex, #fbbf24) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-flex, #fbbf24) 25%, transparent);
}

.qa-warnings-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--status-flex, #fbbf24) 80%, var(--text-primary, #1f2937));
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qa-warnings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--status-flex, #fbbf24) 70%, var(--text-primary, #1f2937));
  max-height: 120px;
  overflow-y: auto;
}

.qa-warnings-list li {
  padding: 2px 0;
}

/* High-severity warning block (P1.2 — sleep-hour gate). Uses the canonical
   --status-sleep token (indigo) because the warning code is SLEEP_HOUR; red
   is reserved for confirmed conflicts (--status-busy) per
   traffic_light_palette.md. Falls back to literal indigo if the token isn't
   loaded (e.g. tests). */
.qa-warnings-high {
  background: color-mix(in srgb, var(--status-sleep, #7c3aed) 10%, transparent);
  border-color: color-mix(in srgb, var(--status-sleep, #7c3aed) 30%, transparent);
}
.qa-warnings-high .qa-warnings-title {
  color: var(--status-sleep, #7c3aed);
}
.qa-warnings-high .qa-warnings-list {
  color: color-mix(in srgb, var(--status-sleep, #7c3aed) 85%, var(--text-primary, #1f2937));
}
.qa-ack-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--text-primary, #1f2937);
  cursor: pointer;
}
.qa-ack-row input[type="checkbox"] {
  cursor: pointer;
}

/* ============================================
   HISTORY TAB
   ============================================ */

.qa-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qa-history-item {
  padding: 16px 20px;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  transition: background 0.15s;
}

.qa-history-item:hover {
  background: var(--surface-tertiary, #f3f4f6);
}

.qa-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.qa-history-date {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary, #111827);
}

.qa-history-status {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
}

.qa-history-status.committed {
  background: color-mix(in srgb, var(--status-working, #16a34a) 12%, transparent);
  color: var(--status-working, #16a34a);
}

.qa-history-status.rolled-back {
  background: color-mix(in srgb, var(--status-busy, #64748b) 12%, transparent);
  color: var(--status-busy, #64748b);
}

.qa-history-status.preview {
  background: color-mix(in srgb, var(--status-flex, #fbbf24) 12%, transparent);
  color: color-mix(in srgb, var(--status-flex, #fbbf24) 75%, var(--text-primary, #1f2937));
}

.qa-run-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.qa-run-stat {
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b7280);
}

.qa-run-stat strong {
  color: var(--text-primary, #111827);
}

.qa-history-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.qa-history-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}

/* P4.D — Audit trail disclosure on each run in the History tab. Plain
   monospace list reads as a log; matches the chronological-events feel
   of CLI output rather than competing with the rich stat cards above. */
.qa-history-audit {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle, #e5e7eb);
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b7280);
}
.qa-history-audit summary {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qa-history-audit summary i {
  font-size: 0.75rem;
  opacity: 0.7;
}
.qa-history-audit-list {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
}
.qa-history-audit-list li {
  padding: 2px 0;
  color: var(--text-primary, #1f2937);
}
.qa-audit-when {
  color: var(--text-tertiary, #9ca3af);
  margin-right: 6px;
}
.qa-audit-actor {
  font-weight: 600;
  margin-right: 4px;
}
.qa-audit-action {
  color: var(--text-secondary, #6b7280);
}
.qa-audit-reason {
  color: var(--text-tertiary, #9ca3af);
  font-style: italic;
}
.qa-audit-more {
  padding-top: 6px;
  font-style: italic;
  color: var(--text-tertiary, #9ca3af);
}

.qa-history-toggle {
  font-size: 0.8125rem;
  color: var(--primary-color, #14b8a6);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-weight: 500;
}

.qa-history-toggle:hover {
  text-decoration: underline;
}

/* ============================================
   REDESIGNED UI — SHARED
   ============================================ */

/* Section label (uppercase mini-header) */
.qa-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 10px;
  margin-top: 18px;
}

.qa-section-label:first-child { margin-top: 0; }

/* Colored dot for shift types — reads --qa-type-color
   from the nearest ancestor that sets it; no inline
   style="background:..." needed. */
.qa-shift-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--qa-type-color, var(--slate-300, #cbd5e1));
}

/* Input suffix text ("h/week", "hours") */
.qa-input-suffix {
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

/* Hours number input */
.qa-hours-input {
  width: 68px;
  text-align: center;
  padding: 8px 10px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-lg, 14px);
  font-size: 0.9375rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
  transition: all var(--transition-fast, 0.15s);
}

.qa-hours-input:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

/* Large button */
.qa-btn-lg {
  padding: 10px 22px;
  font-size: 0.9375rem;
}

/* Centered action bar */
.qa-action-centered {
  justify-content: center;
}

/* ============================================
   TAB 1 REDESIGN: PRESET & DURATION CHIPS
   ============================================ */

/* Preset chip container */
.qa-preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

/* Duration chip container */
.qa-duration-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

/* Custom duration input row */
.qa-custom-duration-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 6px;
  position: relative;
}

.qa-custom-duration-input input[type="number"] {
  width: 110px;
  padding: 10px 32px 10px 14px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-lg, 14px);
  font-size: 0.9375rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
  transition: all var(--transition-fast, 0.15s);
  -moz-appearance: textfield;
}

.qa-custom-duration-input input[type="number"]::-webkit-outer-spin-button,
.qa-custom-duration-input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Custom stepper buttons */
.qa-duration-stepper {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qa-duration-stepper button {
  width: 22px;
  height: 16px;
  border: 1px solid var(--border-default, #d1d5db);
  background: var(--surface-secondary, #f9fafb);
  color: var(--text-primary, #374151);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all 0.1s;
  padding: 0;
}

.qa-duration-stepper button:first-child {
  border-radius: 4px 4px 0 0;
}

.qa-duration-stepper button:last-child {
  border-radius: 0 0 4px 4px;
}

.qa-duration-stepper button:hover {
  background: var(--primary-100, #ccfbf1);
  color: var(--primary-600, #0d9488);
}

.qa-custom-duration-input input:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

/* Inline fields row (name + short + color) */
.qa-inline-fields {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-top: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.qa-field {
  flex: 1;
  min-width: 120px;
}

.qa-field input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-lg, 14px);
  font-size: 0.9375rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
  transition: all var(--transition-fast, 0.15s);
}

.qa-field input:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

.qa-field-narrow {
  flex: 0 0 70px;
  min-width: 70px;
}

.qa-field-color {
  flex: 0 0 50px;
  min-width: 50px;
}

.qa-field-color input[type="color"] {
  width: 40px;
  height: 40px;
  padding: 2px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  background: none;
  transition: all var(--transition-fast, 0.15s);
}

.qa-field-color input[type="color"]:hover {
  border-color: var(--primary-500, #14b8a6);
  transform: scale(1.05);
}

/* ============================================
   TAB 2 REDESIGN: MEMBER CARDS & QUOTAS
   ============================================ */

/* Period selector */
.qa-period-selector {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.qa-period-chips {
  display: flex;
  gap: 8px;
}

/* Member cards container */
.qa-member-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* Single member card — mirrors .member-selection-item
   chrome (style.css:37794) so the team-hours row matches
   the rest of the app's "avatar + name + meta" cards. */
.qa-member-card {
  border-radius: var(--radius-md, 12px);
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qa-member-card:hover {
  border-color: var(--primary-300, #5eead4);
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.08);
}

.qa-member-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}

/* The inner <label> wrapping checkbox + avatar + info
   should fill available space; the total badge sits at
   the trailing edge. */
.qa-member-card-header .member-selection-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.qa-member-card-header .qa-member-toggle {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-500, #14b8a6);
  flex-shrink: 0;
  cursor: pointer;
}

.qa-member-card-header .member-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, var(--primary-500, #14b8a6), var(--accent-500, #06b6d4));
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qa-member-card-header .member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.qa-member-card-header .member-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-800, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qa-member-card-header .member-tz {
  font-size: 0.75rem;
  color: var(--slate-500, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode .qa-member-card {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700);
}

body.dark-mode .qa-member-card:hover {
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.12);
}

body.dark-mode .qa-member-card-header {
  border-bottom-color: var(--slate-700);
}

body.dark-mode .qa-member-card-header .member-name {
  color: var(--slate-100);
}

body.dark-mode .qa-member-card-header .member-tz {
  color: var(--slate-400);
}

/* Quota rows inside member card */
.qa-member-quotas {
  padding: 10px 18px;
}

/* ── Per-member date exclusions (Hours-tab card footer) ────────── */
.qa-member-exclusions {
  padding: 8px 18px 10px;
  border-top: 1px solid var(--border-subtle, rgba(229, 231, 235, 0.5));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-exclusions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qa-exclusions-label {
  font-size: 0.75rem;
  color: var(--slate-500, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qa-exclusions-label i {
  font-size: 0.75rem;
  opacity: 0.75;
}

.qa-exclusion-add-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm, 6px);
  border: 1px dashed var(--slate-300, #cbd5e1);
  background: transparent;
  color: var(--slate-500, #6b7280);
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.qa-exclusion-add-btn:hover {
  border-color: var(--primary-400, #2dd4bf);
  color: var(--primary-600, #0d9488);
  background: rgba(20, 184, 166, 0.06);
}

.qa-exclusion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qa-exclusion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  /* Neutral slate — an exclusion is not an error, it's a planned skip.
     Deliberately not the busy-red status token. */
  background: var(--slate-100, #f1f5f9);
  border: 1px solid var(--slate-200, #e2e8f0);
  font-size: 0.75rem;
  color: var(--slate-700, #334155);
  line-height: 1.4;
}

.qa-exclusion-chip i {
  font-size: 0.6875rem;
  color: var(--slate-400, #94a3b8);
}

.qa-exclusion-chip-remove {
  border: none;
  background: transparent;
  color: var(--slate-400, #94a3b8);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
  transition: color 0.15s ease;
}

.qa-exclusion-chip-remove:hover {
  color: var(--status-busy, #64748b);
}

.qa-exclusion-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.qa-exclusion-add[hidden] {
  display: none;
}

.qa-exclusion-date,
.qa-exclusion-reason {
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--surface, #fff);
  font-size: 0.8125rem;
  color: var(--slate-800, #1f2937);
}

.qa-exclusion-reason {
  flex: 1;
  min-width: 120px;
}

.qa-exclusion-date:focus,
.qa-exclusion-reason:focus {
  outline: none;
  border-color: var(--primary-400, #2dd4bf);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

/* Dark mode */
body.dark-mode .qa-member-exclusions {
  border-top-color: var(--slate-700);
}

body.dark-mode .qa-exclusions-label {
  color: var(--slate-400);
}

body.dark-mode .qa-exclusion-add-btn {
  border-color: var(--slate-600);
  color: var(--slate-400);
}

body.dark-mode .qa-exclusion-add-btn:hover {
  border-color: rgba(20, 184, 166, 0.5);
  color: var(--primary-300, #5eead4);
  background: rgba(20, 184, 166, 0.1);
}

body.dark-mode .qa-exclusion-chip {
  background: rgba(30, 41, 59, 0.6);
  border-color: var(--slate-700);
  color: var(--slate-200);
}

body.dark-mode .qa-exclusion-date,
body.dark-mode .qa-exclusion-reason {
  background: rgba(15, 23, 42, 0.6);
  border-color: var(--slate-600);
  color: var(--slate-100);
}

.qa-quota-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 12px;
}

.qa-quota-row + .qa-quota-row {
  border-top: 1px solid var(--border-subtle, rgba(229, 231, 235, 0.5));
}

.qa-quota-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text-primary, #111827);
  min-width: 100px;
  flex: 0 0 auto;
  max-width: 140px;
  overflow: hidden;
}

.qa-quota-row-left > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-quota-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
}

/* Usage badge */
.qa-quota-used-badge {
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 70px;
  text-align: right;
}

.qa-quota-used-badge.over-quota {
  color: var(--status-busy, #64748b);
  font-weight: 600;
}

/* ============================================
   VISUAL PROGRESS BARS (Quota visualization)
   ============================================ */

.qa-quota-progress-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Quota progress row — borderless inside the member
   card chrome; the per-row --qa-type-color custom
   property feeds the dot + bar fill so no inline styles
   leak into the markup. */
.qa-quota-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: transparent;
  border-radius: 0;
  border: none;
}

.qa-quota-progress-row + .qa-quota-progress-row {
  border-top: 1px solid var(--slate-200, #e2e8f0);
}

body.dark-mode .qa-quota-progress-row + .qa-quota-progress-row {
  border-top-color: var(--slate-700, #374151);
}

.qa-quota-type-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
  max-width: 140px;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-700, #334155);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark-mode .qa-quota-type-label {
  color: var(--slate-200, #e2e8f0);
}

.qa-quota-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--qa-type-color, var(--primary-500, #14b8a6));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.qa-quota-progress-bar-wrapper {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qa-quota-progress-bar {
  height: 6px;
  background: var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  position: relative;
}

body.dark-mode .qa-quota-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

.qa-quota-progress-fill {
  height: 100%;
  width: var(--qa-fill-pct, 0%);
  border-radius: var(--radius-full, 9999px);
  background: var(--qa-type-color, var(--primary-500, #14b8a6));
  transition: width 0.3s ease, background-color 0.15s ease;
  min-width: 2px;
}

.qa-quota-progress-row.over-quota .qa-quota-progress-fill {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.qa-quota-progress-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

.qa-quota-progress-value {
  font-weight: 600;
  color: var(--text-primary, #111827);
  min-width: 70px;
  text-align: right;
  flex-shrink: 0;
}

/* Status colors mirror STATUS_PRESENTATION canonical
   greens (#16a34a "working") and the canonical danger
   --error / #ef4444 from the design tokens. */
.qa-quota-progress-value.complete {
  color: var(--status-working, #16a34a);
}

.qa-quota-progress-value.over-quota {
  color: var(--error, #ef4444);
}

.qa-quota-status-icon {
  margin-left: 6px;
  font-size: 0.875rem;
}

.qa-quota-status-icon.complete {
  color: var(--status-working, #16a34a);
}

.qa-quota-status-icon.over-quota {
  color: var(--error, #ef4444);
}

/* Hour chips row below progress bar */
.qa-quota-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 98px; /* Align with progress bar */
}

.qa-quota-chips-row .qa-hour-chips {
  flex-shrink: 0;
}

.qa-quota-chips-row .qa-hours-readout {
  margin-left: auto;
}

/* Member summary line */
.qa-member-summary {
  padding: 8px 14px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b7280);
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface-tertiary, rgba(243, 244, 246, 0.5));
}

.qa-member-summary strong {
  color: var(--text-primary, #111827);
}

/* Quick-apply bar */
.qa-quick-assign-bar {
  padding: 14px 16px;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  margin-bottom: 16px;
}

.qa-quick-assign-bar .qa-section-label {
  margin-top: 0;
  margin-bottom: 10px;
}

.qa-quick-assign-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.qa-quick-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-primary, #111827);
}

.qa-quick-field .qa-hours-readout,
.qa-quick-field .qa-quick-readout {
  width: 50px;
}

/* ============================================
   TAB 3 REDESIGN: DISTRIBUTE
   ============================================ */

/* Setup wrapper */
.qa-distribute-setup {
  margin-bottom: 16px;
}

/* Date range row */
.qa-date-range-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.qa-date-range-row .qa-control-group {
  /* Size each From/To field to its content rather than letting them grow.
     With flex:1 the two date groups absorbed all free space and shoved the
     trailing Refresh button hard against the right edge, reading as a
     right-aligned row. flex:0 0 auto keeps From / To / Refresh as a tidy
     left-packed cluster. The @media(max-width:640px) block still stacks
     them vertically. */
  flex: 0 0 auto;
  min-width: 140px;
}

/* Range quick-select chips */
.qa-range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

/* Shift type toggle chips — same chip family as
   .qa-period-chip / .qa-bulk-preset, but the active
   state borrows the per-row --qa-type-color so the
   user can see which type they're toggling. */
.qa-shift-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

/* ⚠️.qa-workbench-types IS THE SAME WIDGET (2026-08-23, user: "ShiftSupportShift").
   The Schedule/workbench tab renders identical chip markup into
   .qa-workbench-types (quota-assignment-modal.js ~1585) while the Distribute
   tab uses .qa-shift-type-chips (~5064). Every chip rule in this file was
   scoped to the latter, so the workbench chips matched only a leftover
   checkbox-era `.qa-type-toggle` rule further down — no pill shape, no
   background, no separation — and consecutive labels read as one run-on string
   ("Shift" + "Support" + "Shift"). Both containers are listed on every chip
   rule from here down; keep them paired when adding rules. */
.qa-shift-type-chips .qa-type-toggle,
.qa-workbench-types .qa-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  background: var(--white, #fff);
  color: var(--slate-600, #475569);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.qa-shift-type-chips .qa-type-toggle:hover,
.qa-workbench-types .qa-type-toggle:hover {
  border-color: var(--primary-300, #5eead4);
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-700, #0f766e);
  transform: translateY(-1px);
}

.qa-shift-type-chips .qa-type-toggle.active,
.qa-workbench-types .qa-type-toggle.active {
  border-color: var(--qa-type-color, var(--primary-500, #14b8a6));
  background: color-mix(in srgb, var(--qa-type-color, var(--primary-500, #14b8a6)) 15%, transparent);
  /* Darkened toward black rather than the raw hue (2026-08-23). The hue is
     admin-choosable, and on a 15% tint of itself the lighter presets measured
     ~2-3:1 — amber #f59e0b was 1.96:1. 60% is the worst-case-safe value across
     every hue in play (4 CSS presets + 3 JS seeds + JS _PRESETS + arbitrary
     custom): worst case 4.93:1. Re-measure before raising it. */
  color: color-mix(in srgb, var(--qa-type-color, var(--primary-700, #0f766e)) 60%, #000);
  font-weight: 600;
}

.qa-shift-type-chips .qa-type-toggle i,
.qa-workbench-types .qa-type-toggle i {
  font-size: 0.6875rem;
}

body.dark-mode .qa-shift-type-chips .qa-type-toggle,
body.dark-mode .qa-workbench-types .qa-type-toggle {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700, #374151);
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .qa-shift-type-chips .qa-type-toggle:hover,
body.dark-mode .qa-workbench-types .qa-type-toggle:hover {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-300, #5eead4);
}

body.dark-mode .qa-shift-type-chips .qa-type-toggle.active,
body.dark-mode .qa-workbench-types .qa-type-toggle.active {
  background: color-mix(in srgb, var(--qa-type-color, var(--primary-500)) 25%, transparent);
  color: #fff;
}

/* Member filter (details/summary) */
.qa-member-filter {
  margin-bottom: 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  padding: 10px 14px;
}

.qa-member-filter summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary, #111827);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.qa-member-filter summary::-webkit-details-marker { display: none; }

.qa-member-filter summary::before {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.65rem;
  transition: transform 0.15s;
  color: var(--text-tertiary, #9ca3af);
}

.qa-member-filter[open] summary::before {
  transform: rotate(90deg);
}

/* Preview — grouped by member */
.qa-preview-members {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.qa-preview-member-card {
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  overflow: hidden;
}

.qa-preview-member-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-preview-member-header .member-avatar {
  flex-shrink: 0;
}

.qa-preview-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.qa-preview-member-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary, #111827);
}

.qa-preview-member-summary {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

/* Shift rows inside preview card */
.qa-preview-member-shifts {
  padding: 4px 14px 8px;
}

.qa-preview-shift-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.875rem;
}

.qa-preview-shift-row + .qa-preview-shift-row {
  border-top: 1px solid var(--border-subtle, rgba(229, 231, 235, 0.5));
}

.qa-preview-date {
  min-width: 110px;
  color: var(--text-primary, #111827);
  font-weight: 500;
}

.qa-preview-time {
  min-width: 110px;
  color: var(--text-secondary, #6b7280);
}

.qa-preview-type {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  margin-left: auto;
}

/* Collapsible warnings */
.qa-warnings-collapsible {
  margin: 12px 0;
  border-radius: var(--radius-md, 12px);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 10px 14px;
}

.qa-warnings-collapsible summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.qa-warnings-collapsible summary::-webkit-details-marker { display: none; }

/* ============================================
   COLOR SWATCHES (Tab 1)
   ============================================ */

.qa-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.qa-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
  background: none;
}

.qa-color-swatch:hover {
  transform: scale(1.1);
  border-color: var(--primary-500, #14b8a6);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

.qa-color-swatch.active {
  border-color: var(--primary-500, #14b8a6);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
  transform: scale(1.05);
}

.qa-color-swatch .fa-check {
  color: #fff;
  font-size: 0.65rem;
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.qa-color-swatch.active .fa-check {
  opacity: 1;
}

.qa-color-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qa-swatch-primary {
  display: flex;
  align-items: center;
}

.qa-color-expand {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px dashed var(--border-default, #d1d5db);
  background: var(--surface-secondary, #f9fafb);
  color: var(--text-tertiary, #9ca3af);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.15s;
}

.qa-color-expand:hover {
  border-color: var(--primary-400, #14b8a6);
  color: var(--primary-500, #14b8a6);
  background: var(--surface-primary, #fff);
}

.qa-swatch-extended {
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  margin-top: 2px;
}

/* ============================================
   CONTRACT CHIPS (Tab 2)
   ============================================ */

.qa-contract-section {
  margin-bottom: 16px;
}

.qa-contract-section .qa-section-label {
  margin-bottom: 8px;
}

.qa-contract-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ============================================
   HOUR CHIPS (Tab 2 quota rows)
   ============================================ */

.qa-hour-chips {
  display: flex;
  gap: 3px;
}

.qa-hour-chip {
  min-width: 32px;
  height: 26px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--border-default, #e2e8f0);
  background: var(--surface-primary, #fff);
  color: var(--text-secondary, #475569);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 6px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qa-hour-chip:hover {
  border-color: var(--primary-500, #14b8a6);
  color: var(--primary-600, #0d9488);
  transform: translateY(-1px);
}

.qa-hour-chip.active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.qa-hours-readout {
  width: 56px;
  min-width: 56px;
  text-align: center;
  padding: 4px 8px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-lg, 14px);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
  background: var(--surface-primary, #fff);
  transition: all var(--transition-fast, 0.15s);
  flex-shrink: 0;
}

.qa-hours-readout:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

/* ============================================
   HOUR STEPPER COMPONENT
   ============================================ */

.qa-stepper-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.qa-quota-used {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  min-width: 50px;
}

/* Numeric stepper — matches the radius + focus-ring
   token pattern of canonical .form-group input
   (style.css:15960). */
.qa-hour-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: var(--white, #fff);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qa-hour-stepper:focus-within {
  border-color: var(--primary-400, #2dd4bf);
  box-shadow: var(--focus-ring-shadow);
}

.qa-step-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.qa-step-btn:hover {
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-600, #0d9488);
}

.qa-step-btn:active {
  background: var(--primary-100, #ccfbf1);
}

.qa-hour-input {
  width: 44px;
  height: 30px;
  border: none;
  border-left: 1px solid var(--slate-200, #e2e8f0);
  border-right: 1px solid var(--slate-200, #e2e8f0);
  text-align: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--slate-800, #1f2937);
  background: var(--white, #fff);
  -moz-appearance: textfield;
}

.qa-hour-input::-webkit-outer-spin-button,
.qa-hour-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qa-hour-input:focus {
  outline: none;
}

/* Compact stepper for quick apply bar */
.qa-hour-stepper-compact {
  border-radius: var(--radius-md, 8px);
}

.qa-hour-stepper-compact .qa-step-btn {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
}

.qa-hour-stepper-compact .qa-hour-input,
.qa-hour-stepper-compact .qa-quick-input {
  width: 40px;
  height: 26px;
  font-size: 0.875rem;
}

/* Member total badge — small chip-shaped count token. */
.qa-member-total-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-700, #334155);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.qa-period-suffix-inline {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--slate-500, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Dark mode stepper */
body.dark-mode .qa-hour-stepper {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700, #374151);
}

body.dark-mode .qa-hour-stepper:focus-within {
  border-color: rgba(20, 184, 166, 0.6);
  box-shadow: var(--focus-ring-shadow);
}

body.dark-mode .qa-step-btn {
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .qa-step-btn:hover {
  background: rgba(20, 184, 166, 0.15);
  color: var(--primary-300, #5eead4);
}

body.dark-mode .qa-hour-input {
  background: transparent;
  color: var(--slate-100, #f1f5f9);
  border-left-color: var(--slate-700, #374151);
  border-right-color: var(--slate-700, #374151);
}

body.dark-mode .qa-member-total-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate-200, #e2e8f0);
}

/* ============================================
   SCHEDULE TAB (Tab 4) — RETIRED
   ---------------------------------------------
   The standalone Schedule tab and its read-only Member Cards / Coverage
   Heatmap views were merged into the Workbench. The .qa-schedule-* rules
   below (member cards, type breakdown, progress, shift list, shift-type
   swatches) are now DEAD — no JS emits these classes. Left in place
   (harmless, unrendered) to avoid a risky multi-range delete during the
   launch pass; safe to remove wholesale in a dedicated cleanup.
   ============================================ */

.qa-schedule-controls {
  margin-bottom: 20px;
}

.qa-schedule-members {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Schedule member cards — same chrome as Team Hours
   member cards (.qa-member-card). Avatar, name, meta
   layout matches the canonical .member-selection-item
   pattern (style.css:37794). */
.qa-schedule-member-card {
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  padding: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qa-schedule-member-card:hover {
  border-color: var(--primary-300, #5eead4);
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.08);
}

body.dark-mode .qa-schedule-member-card {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700);
}

body.dark-mode .qa-schedule-member-card:hover {
  border-color: rgba(20, 184, 166, 0.4);
}

.qa-schedule-member-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.qa-schedule-member-header .member-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md, 10px);
  background: linear-gradient(135deg, var(--primary-500, #14b8a6), var(--accent-500, #06b6d4));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qa-schedule-member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.qa-schedule-member-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}

.qa-schedule-member-meta {
  font-size: 0.75rem;
  color: var(--slate-500, #6b7280);
}

body.dark-mode .qa-schedule-member-name {
  color: var(--slate-100);
}

body.dark-mode .qa-schedule-member-meta {
  color: var(--slate-400);
}

.qa-schedule-type-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.qa-schedule-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}

.qa-schedule-type-name {
  min-width: 40px;
  color: var(--slate-600, #4b5563);
  font-weight: 500;
}

body.dark-mode .qa-schedule-type-name {
  color: var(--slate-300);
}

.qa-schedule-progress {
  flex: 1;
  height: 6px;
  background: var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  min-width: 60px;
}

body.dark-mode .qa-schedule-progress {
  background: rgba(255, 255, 255, 0.08);
}

.qa-schedule-progress-bar {
  height: 100%;
  width: var(--qa-fill-pct, 0%);
  border-radius: var(--radius-full, 9999px);
  transition: width 0.3s ease;
  background: var(--qa-type-color, var(--primary-500, #14b8a6));
}

.qa-schedule-progress-bar.over {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.qa-schedule-type-hours {
  font-size: 0.75rem;
  color: var(--slate-500, #94a3b8);
  min-width: 55px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.qa-schedule-total {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-200, #e2e8f0);
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
}

body.dark-mode .qa-schedule-total {
  border-top-color: var(--slate-700);
  color: var(--slate-300);
}

.qa-schedule-progress-total {
  max-width: 100px;
}

.qa-schedule-pct {
  font-weight: 700;
  color: var(--primary-600, #0d9488);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.qa-schedule-pct.over {
  color: #d97706;
}

.qa-schedule-assignments {
  margin-top: 10px;
}

.qa-schedule-assignments summary {
  font-size: 0.8125rem;
  color: var(--text-tertiary, #6b7280);
  cursor: pointer;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qa-schedule-assignments summary:hover {
  color: var(--primary-500, #14b8a6);
}

.qa-schedule-shift-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-left: 4px;
}

.qa-schedule-shift-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #4b5563);
  padding: 5px 0;
}

.qa-schedule-shift-date {
  min-width: 90px;
}

.qa-schedule-shift-time {
  min-width: 90px;
  color: var(--text-tertiary, #6b7280);
}

.qa-schedule-shift-type {
  font-weight: 600;
}

/* ============================================
   DARK MODE
   ============================================ */

.dark-mode .quota-assignment-modal-content {
  background: var(--surface-primary, #1f2937);
}

.dark-mode .qa-header {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-header h2 {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-tabs {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-tab {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-tab:hover {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-shift-type-item {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-shift-type-item:hover {
  background: var(--surface-tertiary, #1f2937);
}

.dark-mode .qa-shift-type-name {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-editor-form {
  background: var(--surface-secondary, #111827);
}

.dark-mode .qa-editor-form input,
.dark-mode .qa-editor-form select {
  background: var(--surface-tertiary, #1f2937);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-quota-table th {
  color: var(--text-secondary, #9ca3af);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-quota-table td {
  border-color: var(--border-subtle, #374151);
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-quota-cell input {
  background: var(--surface-tertiary, #1f2937);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-control-group input,
.dark-mode .qa-control-group select {
  background: var(--surface-tertiary, #1f2937);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-stat-card {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-preview-table th {
  color: var(--text-secondary, #9ca3af);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-preview-table td {
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-preview-table tr:hover {
  background: var(--surface-secondary, #111827);
}

.dark-mode .qa-history-item {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-history-item:hover {
  background: var(--surface-tertiary, #1f2937);
}

.dark-mode .qa-history-date {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-btn-secondary {
  background: var(--surface-secondary, #111827);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-btn-secondary:hover {
  background: var(--surface-tertiary, #1f2937);
}

/* Dark mode — redesigned UI */
.dark-mode .qa-section-label {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-input-suffix {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-hours-input {
  background: var(--surface-tertiary, #1f2937);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-field input[type="text"] {
  background: var(--surface-tertiary, #1f2937);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-field-color input[type="color"] {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-custom-duration-input input {
  background: var(--surface-tertiary, #1f2937);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-member-card {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-member-card-header {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-quota-row-left {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-quota-row + .qa-quota-row {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-quota-used-badge {
  color: var(--text-tertiary, #6b7280);
}

/* Dark mode — progress bars */
.dark-mode .qa-quota-progress-row {
  background: var(--surface-secondary, #1f2937);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-quota-progress-row:hover {
  background: var(--surface-tertiary, #374151);
}

.dark-mode .qa-quota-type-label {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-quota-progress-bar {
  background: var(--surface-tertiary, #374151);
}

.dark-mode .qa-quota-progress-value {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-quota-progress-stats {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-member-summary {
  color: var(--text-secondary, #9ca3af);
  border-color: var(--border-subtle, #374151);
  background: rgba(31, 41, 55, 0.5);
}

.dark-mode .qa-member-summary strong {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-quick-assign-bar {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-quick-field {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-member-filter {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-member-filter summary {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-preview-member-card {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-preview-member-header {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-preview-member-name {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-preview-member-summary {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-preview-date {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-preview-time {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-preview-type {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-preview-shift-row + .qa-preview-shift-row {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-warnings-collapsible {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.15);
}

.dark-mode .qa-warnings-collapsible summary {
  color: #fbbf24;
}

/* Dark mode — color swatches */
.dark-mode .qa-color-swatch {
  border-color: transparent;
}

.dark-mode .qa-color-swatch.active {
  border-color: var(--primary-400, #2dd4bf);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}

.dark-mode .qa-color-expand {
  background: var(--surface-tertiary, #374151);
  border-color: var(--border-subtle, #4b5563);
  color: var(--text-tertiary, #6b7280);
}

.dark-mode .qa-color-expand:hover {
  border-color: var(--primary-400, #2dd4bf);
  color: var(--primary-400, #2dd4bf);
}

.dark-mode .qa-swatch-extended {
  border-color: var(--border-subtle, #374151);
}

/* Dark mode — hour chips */
.dark-mode .qa-hour-chip {
  background: var(--surface-secondary, #1f2937);
  border-color: var(--border-subtle, #374151);
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-hour-chip:hover {
  border-color: var(--primary-400, #2dd4bf);
  color: var(--primary-400, #2dd4bf);
}

.dark-mode .qa-hour-chip.active {
  border-color: transparent;
}

.dark-mode .qa-hours-readout {
  background: var(--surface-tertiary, #1f2937);
  color: var(--text-primary, #f9fafb);
  border-color: var(--border-subtle, #374151);
}

/* Dark mode — schedule tab */
.dark-mode .qa-schedule-member-card {
  background: var(--surface-secondary, #1f2937);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-schedule-member-name {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-schedule-member-meta {
  color: var(--text-tertiary, #6b7280);
}

.dark-mode .qa-schedule-type-name {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-schedule-progress {
  background: var(--surface-tertiary, #374151);
}

.dark-mode .qa-schedule-type-hours {
  color: var(--text-tertiary, #6b7280);
}

.dark-mode .qa-schedule-total {
  color: var(--text-secondary, #9ca3af);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-schedule-pct {
  color: var(--primary-400, #2dd4bf);
}

.dark-mode .qa-schedule-assignments summary {
  color: var(--text-tertiary, #6b7280);
}

.dark-mode .qa-schedule-shift-row {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-schedule-shift-time {
  color: var(--text-tertiary, #6b7280);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  .quota-assignment-modal-content {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  /* ⭐2026-08-20 (owner, mobile screenshot: "This banner and other labels ie
     beta, buisness plan etc means the viewable scheduling area seems too
     little especially considering the large mobile ui").
     Measured before: header 143px + tabs 44px + a three-line lock banner ate
     ~800px of an 844px viewport, so the schedule itself started below the
     fold. The chrome all still SAYS the same things — it just stops taking a
     line each. Title and badges share one line (the title no longer wraps
     beside the pill), the plan/BETA pills shrink to true micro-chips, and the
     lock banner tightens to two lines. */
  .qa-header {
    padding: 10px 14px 8px;
    gap: 8px;
    align-items: center;
  }

  .qa-header h2 {
    font-size: 0.98rem;
    line-height: 1.2;
    /* One line beside the badges instead of wrapping under them. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .qa-header-left {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  /* Plan / BETA pills: same words, micro-chip weight. */
  .qa-header .qa-badge,
  .qa-header .beta-badge,
  .qa-header [class*="plan-badge"] {
    font-size: 0.62rem;
    padding: 2px 7px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    flex: 0 0 auto;
  }

  .qa-tabs {
    padding: 0 16px;
  }

  .qa-tab {
    padding: 10px 12px;
    font-size: 0.8125rem;
  }

  .qa-tab-content {
    padding: 16px;
  }

  .qa-assign-controls {
    flex-direction: column;
    gap: 12px;
  }

  .qa-preview-stats {
    gap: 8px;
  }

  .qa-stat-card {
    min-width: 70px;
    padding: 8px 10px;
  }

  .qa-run-stats {
    grid-template-columns: 1fr 1fr;
  }

  .qa-quota-table {
    font-size: 0.75rem;
  }

  .qa-quota-cell input[type="number"] {
    width: 46px;
  }

  .qa-inline-fields {
    flex-direction: column;
    gap: 8px;
  }

  .qa-field-narrow,
  .qa-field-color {
    flex: 1;
    min-width: 0;
  }

  .qa-date-range-row {
    flex-direction: column;
    /* Cross-axis is now horizontal (column layout). The base rule sets
       align-items:flex-end, which on mobile right-shoves the From / To
       fields and the Refresh button. Reset to flex-start so the stacked
       cluster reads left-aligned. */
    align-items: flex-start;
    gap: 10px;
  }

  .qa-quota-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .qa-quota-row-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .qa-quick-assign-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .qa-preview-shift-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  .qa-preview-date {
    min-width: 90px;
  }

  .qa-preview-time {
    min-width: 90px;
  }

  .qa-hours-readout {
    width: 52px;
    min-width: 52px;
  }

  /* Progress bars mobile */
  .qa-quota-progress-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }

  .qa-quota-type-label {
    min-width: auto;
  }

  .qa-quota-chips-row {
    padding-left: 0;
    flex-wrap: wrap;
  }

  /* ── Workbench (the "Schedule" tab) — the primary surface ──
     The week grid is the one editable schedule view now. Make it usable
     one-handed: horizontal-scroll the grid, pin the member column + date
     header so context survives the scroll, and keep cells tappable. */
  .qa-workbench-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .qa-workbench-period,
  .qa-workbench-types,
  .qa-workbench-configure {
    flex-wrap: wrap;
  }

  .qa-workbench-window {
    justify-content: space-between;
  }

  /* Grid scrolls horizontally within its own wrap; the page must not. */
  .qa-week-grid,
  .qa-workbench-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Sticky member column — stays put while days scroll sideways. */
  .qa-week-grid th:first-child,
  .qa-week-grid td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 96px;
    background: var(--surface-primary, #fff);
  }

  /* Sticky cells need an opaque bg so scrolled content can't show through. */
  body.dark-mode .qa-week-grid th:first-child,
  body.dark-mode .qa-week-grid td:first-child,
  body.dark-mode .qa-week-grid thead th {
    background: var(--surface-primary, #0f172a);
  }

  /* Sticky date header — stays put while members scroll down. */
  .qa-week-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-primary, #fff);
  }

  /* Top-left corner cell sits above both sticky axes. */
  .qa-week-grid thead th:first-child {
    z-index: 3;
  }

  /* Keep shift + empty cells a comfortable tap target on touch. */
  .qa-grid-cell,
  .qa-grid-cell-empty {
    min-width: 40px;
    min-height: 40px;
    height: auto;
  }

  /* Hover-scale reads badly on touch (sticky transform jitter) — drop it. */
  .qa-grid-cell:hover {
    transform: none;
  }

  /* Recurring-schedule rows: let actions wrap instead of overflowing. */
  .qa-recurring-actions {
    flex-wrap: wrap;
  }

  /* Distribute + History toolbars stack rather than clip. */
  .qa-tab-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Any inline action bar (commit / discard / generate) goes full-width. */
  .qa-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .qa-workbench-action-buttons {
    display: flex;
    gap: 8px;
  }

  .qa-workbench-action-buttons .qa-btn {
    flex: 1;
  }

  /* 44px minimum touch target on the modal's interactive chrome. */
  .qa-btn,
  .qa-tab,
  .qa-period-chip,
  .proposer-chip,
  .qa-type-toggle {
    min-height: 44px;
  }
}

/* Extra-small phones — tighten the grid without losing tap targets. */
@media (max-width: 480px) {
  .qa-week-grid table {
    font-size: 0.75rem;
  }

  .qa-week-grid th,
  .qa-week-grid td {
    padding: 4px;
  }

  .qa-grid-cell,
  .qa-grid-cell-empty {
    min-width: 36px;
    font-size: 0.7rem;
  }

  .qa-week-grid th:first-child,
  .qa-week-grid td:first-child {
    min-width: 84px;
  }
}

/* ============================================
   NEW: Shift Window Time Inputs
   ============================================ */

.qa-time-window-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.qa-field-time {
  flex: 1;
  min-width: 100px;
}

.qa-field-time label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 4px;
}

.qa-field-time label small {
  font-weight: 400;
  opacity: 0.7;
}

.qa-field-time input[type="time"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-lg, 14px);
  font-size: 0.875rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
  transition: all var(--transition-fast, 0.15s);
}

.qa-field-time input[type="time"]:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

.dark-mode .qa-field-time input[type="time"] {
  background: var(--surface-tertiary, #1f2937);
  border-color: var(--border-subtle, #374151);
  color: var(--text-primary, #f9fafb);
}

/* ============================================
   NEW: Why Button for Assignment Explanations
   ============================================ */

.qa-why-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--surface-tertiary, #f3f4f6);
  color: var(--text-tertiary, #9ca3af);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}

.qa-why-btn:hover {
  background: var(--primary-100, #ccfbf1);
  color: var(--primary-600, #0d9488);
}

.dark-mode .qa-why-btn {
  background: var(--surface-secondary, #374151);
  color: var(--text-tertiary, #9ca3af);
}

.dark-mode .qa-why-btn:hover {
  background: var(--primary-900, #134e4a);
  color: var(--primary-300, #5eead4);
}

/* ============================================
   Time Quality Indicator
   Shows local time quality for shift assignments
   ============================================ */

.qa-time-quality {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  margin-left: auto;
}

.qa-tq-excellent {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.qa-tq-good {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.qa-tq-fair {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.qa-tq-poor {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.dark-mode .qa-tq-excellent {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.dark-mode .qa-tq-good {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.dark-mode .qa-tq-fair {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.dark-mode .qa-tq-poor {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* ============================================
   NEW: Fairness Smoothing Control
   ============================================ */

.qa-smoothing-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  margin-top: 12px;
}

.qa-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.qa-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color, #14b8a6);
  cursor: pointer;
}

.qa-help-text {
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
  margin-left: 24px;
}

/* ============================================
   NEW: Consecutive Days Input
   ============================================ */

.qa-consec-input {
  width: 60px;
  text-align: center;
  padding: 6px 8px;
  border: 1.5px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-md, 10px);
  font-size: 0.875rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
}

.qa-consec-input:focus {
  border-color: var(--primary-400, #14b8a6);
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

.dark-mode .qa-consec-input {
  background: var(--surface-tertiary, #1f2937);
  border-color: var(--border-subtle, #374151);
  color: var(--text-primary, #f9fafb);
}

/* ============================================
   NEW: Preview Shift Row with Why Button
   ============================================ */

.qa-preview-shift-row {
  position: relative;
}

.qa-preview-shift-row[title]:hover {
  background: var(--surface-secondary, #f9fafb);
}

/* ============================================
   NEW: Members Under Minimum Warning Badge
   ============================================ */

.qa-under-minimum-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  font-size: 0.75rem;
  font-weight: 600;
}

.dark-mode .qa-under-minimum-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* ============================================
   HIGH CONTRAST SHIFT TYPE COLOR CODING
   ============================================ */

/* Shift Type Color Variables */
:root {
  --shift-color: #3b82f6;           /* Blue - professional work */
  --shift-bg: rgba(59, 130, 246, 0.12);
  --on-call-color: #f59e0b;         /* Amber - warning/alert */
  --on-call-bg: rgba(245, 158, 11, 0.12);
  --support-color: #8b5cf6;         /* Purple - service/help */
  --support-bg: rgba(139, 92, 246, 0.12);
  --standby-color: #06b6d4;         /* Cyan - ready state */
  --standby-bg: rgba(6, 182, 212, 0.12);
  --custom-color: #6b7280;          /* Gray - neutral */
  --custom-bg: rgba(107, 114, 128, 0.12);
}

/* Shift type list items with left border accent */
.qa-shift-type-item {
  border-left: 4px solid transparent;
}

.qa-shift-type-item[data-preset="shift"],
.qa-shift-type-item:has(.qa-shift-type-color[style*="#3b82f6"]) {
  border-left-color: var(--shift-color);
}

.qa-shift-type-item[data-preset="on-call"],
.qa-shift-type-item:has(.qa-shift-type-color[style*="#f59e0b"]) {
  border-left-color: var(--on-call-color);
}

.qa-shift-type-item[data-preset="support"],
.qa-shift-type-item:has(.qa-shift-type-color[style*="#8b5cf6"]) {
  border-left-color: var(--support-color);
}

.qa-shift-type-item[data-preset="standby"],
.qa-shift-type-item:has(.qa-shift-type-color[style*="#06b6d4"]) {
  border-left-color: var(--standby-color);
}

/* Preview shift type pills with high contrast backgrounds */
.qa-preview-type {
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  font-weight: 600;
}

.qa-preview-type[data-type="shift"],
.qa-preview-type.shift-type-shift {
  background: var(--shift-bg);
  color: #2563eb;
}

.qa-preview-type[data-type="on-call"],
.qa-preview-type.shift-type-on-call {
  background: var(--on-call-bg);
  color: #d97706;
}

.qa-preview-type[data-type="support"],
.qa-preview-type.shift-type-support {
  background: var(--support-bg);
  color: #7c3aed;
}

.qa-preview-type[data-type="standby"],
.qa-preview-type.shift-type-standby {
  background: var(--standby-bg);
  color: #0891b2;
}

/* Schedule shift type badges */
.qa-schedule-shift-type {
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.qa-schedule-shift-type[data-type="shift"],
.qa-schedule-shift-type.shift-type-shift {
  background: var(--shift-bg);
  color: #2563eb;
}

.qa-schedule-shift-type[data-type="on-call"],
.qa-schedule-shift-type.shift-type-on-call {
  background: var(--on-call-bg);
  color: #d97706;
}

.qa-schedule-shift-type[data-type="support"],
.qa-schedule-shift-type.shift-type-support {
  background: var(--support-bg);
  color: #7c3aed;
}

.qa-schedule-shift-type[data-type="standby"],
.qa-schedule-shift-type.shift-type-standby {
  background: var(--standby-bg);
  color: #0891b2;
}

/* Distribute tab type toggle chips with colored borders when active.
   ⚠️THESE MADE THE LABEL INVISIBLE (fixed 2026-08-23, user: "the contrast
   seems wrong"). Each rule set `background: <solid hue>` but NO `color`, so the
   text kept `color: var(--qa-type-color)` from the .active rule above — THE
   SAME HUE. Active chips were coloured text on an identical fill: exactly
   1.00:1, the label simply disappeared.
   `color: #fff` is not the fix either; measured on these hues white gives 3.68
   (shift), 2.15 (on-call), 4.23 (support), 2.43 (standby) — all under the 4.5:1
   AA floor for 12px text.
   So each keeps a 12% TINT of its hue as the fill with the hue darkened for the
   text, at the minimum darkening that clears 4.5:1 for that specific colour.
   The border stays full-strength so the chip still reads as its type. */
.qa-shift-type-chips .qa-type-toggle[data-preset="shift"].active,
.qa-shift-type-chips .qa-type-toggle.shift-type-shift.active,
.qa-workbench-types .qa-type-toggle[data-preset="shift"].active,
.qa-workbench-types .qa-type-toggle.shift-type-shift.active {
  background: color-mix(in srgb, var(--shift-color) 12%, #fff);
  border-color: var(--shift-color);
  color: color-mix(in srgb, var(--shift-color) 80%, #000);   /* 4.68:1 */
}

.qa-shift-type-chips .qa-type-toggle[data-preset="on-call"].active,
.qa-shift-type-chips .qa-type-toggle.shift-type-on-call.active,
.qa-workbench-types .qa-type-toggle[data-preset="on-call"].active,
.qa-workbench-types .qa-type-toggle.shift-type-on-call.active {
  background: color-mix(in srgb, var(--on-call-color) 12%, #fff);
  border-color: var(--on-call-color);
  color: color-mix(in srgb, var(--on-call-color) 60%, #000); /* 4.93:1 */
}

.qa-shift-type-chips .qa-type-toggle[data-preset="support"].active,
.qa-shift-type-chips .qa-type-toggle.shift-type-support.active,
.qa-workbench-types .qa-type-toggle[data-preset="support"].active,
.qa-workbench-types .qa-type-toggle.shift-type-support.active {
  background: color-mix(in srgb, var(--support-color) 12%, #fff);
  border-color: var(--support-color);
  color: color-mix(in srgb, var(--support-color) 85%, #000); /* 4.78:1 */
}

.qa-shift-type-chips .qa-type-toggle[data-preset="standby"].active,
.qa-shift-type-chips .qa-type-toggle.shift-type-standby.active,
.qa-workbench-types .qa-type-toggle[data-preset="standby"].active,
.qa-workbench-types .qa-type-toggle.shift-type-standby.active {
  background: color-mix(in srgb, var(--standby-color) 12%, #fff);
  border-color: var(--standby-color);
  color: color-mix(in srgb, var(--standby-color) 65%, #000); /* 4.73:1 */
}

/* Dark mode adjustments for shift type colors */
.dark-mode .qa-preview-type[data-type="shift"],
.dark-mode .qa-preview-type.shift-type-shift {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.dark-mode .qa-preview-type[data-type="on-call"],
.dark-mode .qa-preview-type.shift-type-on-call {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.dark-mode .qa-preview-type[data-type="support"],
.dark-mode .qa-preview-type.shift-type-support {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.dark-mode .qa-preview-type[data-type="standby"],
.dark-mode .qa-preview-type.shift-type-standby {
  background: rgba(6, 182, 212, 0.2);
  color: #22d3ee;
}

.dark-mode .qa-schedule-shift-type[data-type="shift"],
.dark-mode .qa-schedule-shift-type.shift-type-shift {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.dark-mode .qa-schedule-shift-type[data-type="on-call"],
.dark-mode .qa-schedule-shift-type.shift-type-on-call {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.dark-mode .qa-schedule-shift-type[data-type="support"],
.dark-mode .qa-schedule-shift-type.shift-type-support {
  background: rgba(139, 92, 246, 0.25);
  color: #a78bfa;
}

.dark-mode .qa-schedule-shift-type[data-type="standby"],
.dark-mode .qa-schedule-shift-type.shift-type-standby {
  background: rgba(6, 182, 212, 0.25);
  color: #22d3ee;
}

/* Dark mode stepper buttons */
.dark-mode .qa-duration-stepper button {
  background: var(--surface-secondary, #374151);
  color: var(--text-tertiary, #9ca3af);
}

.dark-mode .qa-duration-stepper button:hover {
  background: var(--primary-900, #134e4a);
  color: var(--primary-300, #5eead4);
}

/* ============================================
   MEMBER CONTRACT DROPDOWN (Team Hours Tab)
   ============================================ */

.qa-contract-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: var(--surface-tertiary, rgba(243, 244, 246, 0.7));
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
}

.qa-contract-dropdown label {
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

.qa-contract-dropdown select {
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #111827);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px;
}

.qa-contract-dropdown select:focus {
  outline: none;
  border-color: var(--primary-400, #14b8a6);
  box-shadow: var(--focus-ring-shadow);
}

.qa-contract-badge {
  padding: 2px 6px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qa-contract-badge.full-time {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #3b82f6;
}

.qa-contract-badge.part-time {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #a855f7;
}

.qa-contract-badge.contractor {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.qa-contract-badge.custom {
  background: #f3f4f6;
  color: #1f2937;
  border: 1px solid #9ca3af;
}

.dark-mode .qa-contract-dropdown {
  background: rgba(31, 41, 55, 0.7);
}

.dark-mode .qa-contract-dropdown label {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-contract-dropdown select {
  background-color: var(--surface-secondary, #1f2937);
  border-color: var(--border-subtle, #374151);
  color: var(--text-primary, #f9fafb);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

.dark-mode .qa-contract-badge.full-time {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  border-color: #3b82f6;
}

.dark-mode .qa-contract-badge.part-time {
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
  border-color: #a855f7;
}

.dark-mode .qa-contract-badge.contractor {
  background: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
  border-color: #f59e0b;
}

.dark-mode .qa-contract-badge.custom {
  background: rgba(107, 114, 128, 0.25);
  color: #d1d5db;
  border-color: #6b7280;
}

/* ============================================
   TIMEZONE REGION FILTER (Distribute Tab)
   ============================================ */

.qa-timezone-filter {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 12px);
}

.qa-tz-region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* Timezone-region chips — chip family. */
.qa-tz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  background: var(--white, #fff);
  color: var(--slate-600, #475569);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.qa-tz-chip i {
  font-size: 0.6875rem;
}

.qa-tz-chip:hover {
  border-color: var(--primary-300, #5eead4);
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-700, #0f766e);
  transform: translateY(-1px);
}

.qa-tz-chip.active {
  border-color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.15);
  color: var(--primary-700, #0f766e);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.15);
}

.qa-tz-chip .tz-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-full, 9999px);
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-600, #475569);
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: 2px;
}

.qa-tz-chip.active .tz-count {
  background: rgba(20, 184, 166, 0.22);
  color: var(--primary-700, #0f766e);
}

/* ⚠️ALIGNMENT (2026-08-23, user: "Fair distribution / Require 24h coverage —
   Alignment wrong"). Three radio labels in a flex row with NO flex-wrap, while
   the sibling chip row directly above (.qa-tz-region-chips) does wrap — so on a
   narrow modal the chips wrapped and this row overflowed, and two adjacent rows
   in the same container visibly disagreed.
   The mechanism for one option sitting off-baseline from another: each label is
   itself display:flex + align-items:center, so when the longest option
   ("Require 24h coverage") was squeezed its text wrapped to two lines INSIDE
   the label, and centring a two-line label against one-line neighbours put them
   on different baselines.
   Fix: let the ROW wrap; stop the LABELS wrapping. */
.qa-coverage-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-coverage-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text-primary, #111827);
  cursor: pointer;
  white-space: nowrap;
}

.qa-coverage-options input[type="radio"] {
  accent-color: var(--primary-color, #14b8a6);
  /* Don't let the control shrink when the row is tight — a squashed radio is
     the other way these options drift out of line with each other. */
  flex: none;
  margin: 0;
}

.dark-mode .qa-timezone-filter {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

body.dark-mode .qa-tz-chip {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700, #374151);
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .qa-tz-chip:hover {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-300, #5eead4);
}

body.dark-mode .qa-tz-chip.active {
  border-color: rgba(20, 184, 166, 0.6);
  background: rgba(20, 184, 166, 0.2);
  color: var(--primary-300, #5eead4);
}

body.dark-mode .qa-tz-chip .tz-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--slate-300);
}

body.dark-mode .qa-tz-chip.active .tz-count {
  background: rgba(20, 184, 166, 0.3);
  color: var(--primary-200);
}

.dark-mode .qa-coverage-options {
  border-top-color: var(--border-subtle, #374151);
}

.dark-mode .qa-coverage-options label {
  color: var(--text-primary, #f9fafb);
}

/* ============================================
   MEMBER REQUIREMENTS MATRIX (Distribute Tab)
   ============================================ */

.qa-requirements-matrix {
  margin-bottom: 14px;
}

.qa-matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.qa-matrix-actions {
  display: flex;
  gap: 6px;
}

.qa-matrix-actions button {
  padding: 4px 10px;
  border: 1px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-primary, #fff);
  color: var(--text-secondary, #6b7280);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.qa-matrix-actions button:hover {
  background: var(--surface-secondary, #f3f4f6);
  color: var(--text-primary, #111827);
}

.qa-member-req-card {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 10px);
  transition: all 0.15s;
}

.qa-member-req-card.excluded {
  opacity: 0.5;
  background: var(--surface-tertiary, #f3f4f6);
}

.qa-member-req-card:hover:not(.excluded) {
  border-color: var(--primary-300, #5eead4);
}

.qa-member-req-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.qa-member-req-header .member-selection-item {
  flex: 1;
  margin: 0;
  padding: 0;
}

.qa-req-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-subtle, #e5e7eb);
}

.qa-req-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qa-req-meta-item i {
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
}

.qa-req-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.qa-req-target {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
}

.qa-req-target label {
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

.qa-req-target select {
  padding: 3px 20px 3px 6px;
  border: 1px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-primary, #fff);
  font-size: 0.8125rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px;
}

.qa-req-priority {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.qa-req-priority label {
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
}

.qa-req-priority select {
  padding: 2px 18px 2px 6px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-primary, #fff);
  font-size: 0.75rem;
  cursor: pointer;
}

.qa-req-note {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
  font-style: italic;
}

.qa-req-note i {
  color: var(--on-call-color, #f59e0b);
}

.qa-matrix-summary {
  padding: 10px 14px;
  background: var(--primary-50, #f0fdfa);
  border: 1px solid var(--primary-200, #99f6e4);
  border-radius: var(--radius-md, 8px);
  font-size: 0.82rem;
  color: var(--primary-800, #115e59);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.dark-mode .qa-member-req-card {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-member-req-card.excluded {
  background: var(--surface-tertiary, #1f2937);
}

.dark-mode .qa-req-meta {
  border-bottom-color: var(--border-subtle, #374151);
}

.dark-mode .qa-req-target select,
.dark-mode .qa-req-priority select {
  background-color: var(--surface-tertiary, #1f2937);
  border-color: var(--border-subtle, #374151);
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-matrix-summary {
  background: rgba(20, 184, 166, 0.1);
  border-color: rgba(20, 184, 166, 0.3);
  color: var(--primary-300, #5eead4);
}

/* ============================================
   SCHEDULE TAB - WEEK GRID VIEW
   ============================================ */

/* P5.C — Recurring schedules section in the Schedule tab. Collapsible
   so admins who don't use the cron see no clutter, but discoverable for
   those who do. Tokens-only — fairness vocabulary stays consistent. */
.qa-recurring-schedules {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-secondary, #f9fafb);
}
.qa-recurring-schedules summary {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
.qa-recurring-schedules summary i {
  color: var(--text-secondary, #64748b);
}
.qa-section-count {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-primary, #fff);
  color: var(--text-secondary, #64748b);
  font-weight: 600;
}
.qa-recurring-list {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-recurring-item {
  padding: 10px 12px;
  background: var(--surface-primary, #fff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qa-recurring-inactive {
  opacity: 0.6;
}
.qa-recurring-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qa-recurring-name {
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
.qa-recurring-pattern {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-working, #16a34a) 12%, transparent);
  color: color-mix(in srgb, var(--status-working, #16a34a) 80%, var(--text-primary, #1f2937));
}
.qa-recurring-badge-inactive {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-flex, #fbbf24) 15%, transparent);
  color: color-mix(in srgb, var(--status-flex, #fbbf24) 75%, var(--text-primary, #1f2937));
  margin-left: auto;
}
.qa-recurring-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
}
.qa-recurring-days {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}
.qa-recurring-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
body.dark-mode .qa-recurring-schedules {
  background: var(--surface-secondary, #1e293b);
  border-color: var(--border-default, #334155);
}
body.dark-mode .qa-recurring-item {
  background: var(--surface-primary, #0f172a);
  border-color: var(--border-default, #334155);
}

/* ── Recurring schedule inline edit form (P5.C) ────────────────── */
.qa-recurring-edit-form {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qa-re-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-re-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qa-re-name,
.qa-re-draftlead,
.qa-re-commitlead {
  padding: 7px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--surface, #fff);
  font-size: 0.875rem;
  color: var(--slate-800, #1f2937);
}

.qa-re-name:focus,
.qa-re-draftlead:focus,
.qa-re-commitlead:focus {
  outline: none;
  border-color: var(--primary-400, #2dd4bf);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.qa-re-pattern-chips,
.qa-re-day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Day-of-week toggle chips — compact, square-ish, on/off. */
.qa-re-day-chip {
  min-width: 42px;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--surface, #fff);
  color: var(--slate-600, #475569);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qa-re-day-chip:hover {
  border-color: var(--primary-400, #2dd4bf);
}

.qa-re-day-chip.active {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #fff;
}

.qa-re-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.qa-re-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--surface, #fff);
  font-size: 0.8125rem;
  color: var(--slate-700, #334155);
  cursor: pointer;
}

.qa-re-check input {
  accent-color: var(--primary-500, #14b8a6);
  flex-shrink: 0;
}

.qa-re-check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--qa-type-color, #14b8a6);
  flex-shrink: 0;
}

.qa-re-empty {
  font-size: 0.8125rem;
  color: var(--slate-500, #6b7280);
  font-style: italic;
}

.qa-re-lead-row {
  flex-direction: row;
  gap: 14px;
  flex-wrap: wrap;
}

.qa-re-lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.qa-re-lead input {
  max-width: 100px;
}

.qa-re-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

/* Dark mode */
body.dark-mode .qa-recurring-edit-form {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700);
}

body.dark-mode .qa-re-label {
  color: var(--slate-400);
}

body.dark-mode .qa-re-name,
body.dark-mode .qa-re-draftlead,
body.dark-mode .qa-re-commitlead,
body.dark-mode .qa-re-day-chip,
body.dark-mode .qa-re-check {
  background: rgba(15, 23, 42, 0.6);
  border-color: var(--slate-600);
  color: var(--slate-100);
}

body.dark-mode .qa-re-day-chip.active {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #fff;
}

/* Schedule view-toggle (Week Grid / Member Cards / Coverage Heatmap) retired:
   the three read-only views were merged into the single editable Workbench
   grid, so .qa-schedule-view-toggle / .qa-view-btn no longer render. */

.qa-week-grid {
  overflow-x: auto;
  margin-bottom: 16px;
}

.qa-week-grid table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.qa-week-grid th {
  padding: 8px 6px;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary, #6b7280);
  border-bottom: 2px solid var(--border-subtle, #e5e7eb);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.qa-week-grid th:first-child {
  text-align: left;
  min-width: 120px;
}

.qa-week-grid td {
  padding: 6px;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  vertical-align: middle;
}

.qa-week-grid td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.qa-week-grid tr:hover td {
  background: var(--surface-secondary, #f9fafb);
}

.qa-week-grid .coverage-row td {
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  background: var(--surface-secondary, #f9fafb);
  border-top: 2px solid var(--border-subtle, #e5e7eb);
}

.qa-grid-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--radius-sm, 4px);
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.qa-grid-cell:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.qa-grid-cell.shift {
  background: var(--shift-bg);
  color: var(--shift-color);
}

.qa-grid-cell.on-call {
  background: var(--on-call-bg);
  color: var(--on-call-color);
}

.qa-grid-cell.support {
  background: var(--support-bg);
  color: var(--support-color);
}

.qa-grid-cell.standby {
  background: var(--standby-bg);
  color: var(--standby-color);
}

.qa-grid-cell.empty {
  color: var(--text-tertiary, #9ca3af);
  background: none;
}

.qa-grid-cell.gap {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.qa-coverage-count {
  font-weight: 700;
}

.qa-coverage-count.good {
  color: var(--success-color, #10b981);
}

.qa-coverage-count.low {
  color: var(--on-call-color, #f59e0b);
}

.qa-coverage-count.gap {
  color: #ef4444;
}

/* Grid legend — small inline key shown above the
   week grid. Swatch reads --qa-type-color from the
   parent .qa-legend-item; "empty" + "no shift" use
   neutral slate tokens. */
.qa-grid-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 14px;
  font-size: 0.75rem;
  color: var(--slate-700, #334155);
}

body.dark-mode .qa-grid-legend {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700);
  color: var(--slate-300);
}

.qa-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qa-legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.625rem;
  font-weight: 700;
  /* ⚠️WAS `color: #fff` over the raw hue — measured 2.15:1 on the amber
     on-call default and 2.37:1 on cyan standby, at 10px where AA needs the full
     4.5:1 (the large-text 3:1 allowance does not apply). The hue is admin-
     chosen, so no fixed foreground is safe for all of them. Tint the fill and
     darken the glyph, both derived from the hue so it holds for any colour:
     worst case across every preset/seed/custom hue is 4.73:1. (2026-08-23) */
  background: color-mix(in srgb, var(--qa-type-color, var(--primary-500, #14b8a6)) 18%, #fff);
  color: color-mix(in srgb, var(--qa-type-color, var(--primary-700, #0f766e)) 60%, #000);
  box-shadow: inset 0 0 0 1px var(--qa-type-color, var(--primary-500, #14b8a6));
  letter-spacing: 0.02em;
}

.qa-legend-swatch.empty {
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .qa-legend-swatch.empty {
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate-500);
}

.dark-mode .qa-week-grid th {
  border-bottom-color: var(--border-subtle, #374151);
}

.dark-mode .qa-week-grid td {
  border-bottom-color: var(--border-subtle, #374151);
}

.dark-mode .qa-week-grid td:first-child {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-week-grid tr:hover td {
  background: var(--surface-secondary, #1f2937);
}

.dark-mode .qa-week-grid .coverage-row td {
  background: var(--surface-secondary, #111827);
  border-top-color: var(--border-subtle, #374151);
}

.dark-mode .qa-grid-legend {
  background: var(--surface-secondary, #111827);
}

/* Coverage Heatmap view retired (merged into the Workbench). */

/* ============================================
   SETTINGS TAB - Accordion Sections
   ============================================ */

.qa-settings-section {
  margin-bottom: 8px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.qa-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-secondary, #f9fafb);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  text-align: left;
  transition: background 0.15s;
}

.qa-accordion-header:hover {
  background: var(--surface-tertiary, #f3f4f6);
}

.qa-accordion-icon {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  transition: transform 0.2s;
}

.qa-section-badge {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--primary-100, #ccfbf1);
  color: var(--primary-700, #0f766e);
}

.qa-accordion-content {
  padding: 16px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-accordion-content.collapsed {
  display: none;
}

.qa-empty-hint {
  font-size: 0.9rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
  padding: 12px 0;
}

/* Work Schedules List */
.qa-work-schedules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-work-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-primary, #fff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
}

.qa-ws-name {
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.qa-ws-hours {
  font-size: 0.9rem;
  color: var(--text-secondary, #6b7280);
}

/* History List */
.qa-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-primary, #fff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
}

.qa-history-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qa-history-date {
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.qa-history-stats {
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b7280);
}

.qa-history-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
}

.qa-history-status.committed {
  background: var(--success-100, #dcfce7);
  color: var(--success-700, #15803d);
}

.qa-history-status.rolled-back {
  background: var(--error-100, #fee2e2);
  color: var(--error-700, #b91c1c);
}

.qa-history-status.preview {
  background: var(--warning-100, #fef3c7);
  color: var(--warning-700, #a16207);
}

.qa-rollback-btn {
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* ============================================
   SCHEDULE TAB - View Toggle
   ============================================ */

/* (Duplicate .qa-schedule-view-toggle / .qa-view-btn segmented-control block
   removed — the three-view switcher was retired with the Schedule tab.) */

/* Section Groups */
.qa-section-group {
  margin-bottom: 20px;
}

.qa-type-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qa-type-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.qa-type-toggle:has(input:checked) {
  background: var(--primary-50, #f0fdfa);
  border-color: var(--primary-300, #5eead4);
}

.qa-type-toggle input {
  width: 16px;
  height: 16px;
}

.qa-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.qa-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qa-option-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-primary, #111827);
  cursor: pointer;
}

.qa-option-toggle input {
  width: 18px;
  height: 18px;
}

/* Dark mode for settings */
.dark-mode .qa-settings-section {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-accordion-header {
  background: var(--surface-secondary, #1f2937);
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-accordion-header:hover {
  background: var(--surface-tertiary, #374151);
}

.dark-mode .qa-accordion-content {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-section-badge {
  background: var(--primary-900, #134e4a);
  color: var(--primary-300, #5eead4);
}

.dark-mode .qa-work-schedule-item,
.dark-mode .qa-history-item {
  background: var(--surface-secondary, #1f2937);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-ws-name,
.dark-mode .qa-history-date {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-type-toggle {
  background: var(--surface-secondary, #1f2937);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-type-toggle:has(input:checked) {
  background: var(--primary-900, #134e4a);
  border-color: var(--primary-700, #0f766e);
}

.dark-mode .qa-option-toggle {
  color: var(--text-primary, #f9fafb);
}

/* ============================================
   BULK PRESET BUTTONS (Capacity Tab)
   ============================================ */

.qa-bulk-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin-top: 16px;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
}

.qa-bulk-actions .qa-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500, #6b7280);
  margin: 0;
}

.qa-bulk-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Mirrors .qa-period-chip / .proposer-chip family. */
.qa-bulk-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  background: var(--white, #fff);
  color: var(--slate-600, #475569);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}

.qa-bulk-preset:hover {
  border-color: var(--primary-300, #5eead4);
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-700, #0f766e);
  transform: translateY(-1px);
}

.qa-bulk-preset:active {
  transform: translateY(0);
}

.qa-bulk-preset.qa-bulk-custom {
  border-style: dashed;
  color: var(--slate-500, #6b7280);
}

.qa-bulk-preset.qa-bulk-custom:hover {
  border-style: solid;
  border-color: var(--primary-300, #5eead4);
  color: var(--primary-700, #0f766e);
}

/* Dark mode bulk presets */
.dark-mode .qa-bulk-actions {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700, #374151);
}

.dark-mode .qa-bulk-actions .qa-section-label {
  color: var(--slate-400, #9ca3af);
}

.dark-mode .qa-bulk-preset {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700, #374151);
  color: var(--slate-200, #f9fafb);
}

.dark-mode .qa-bulk-preset:hover {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.5);
  color: var(--primary-300, #5eead4);
}

.dark-mode .qa-bulk-preset.qa-bulk-custom {
  color: var(--slate-400, #9ca3af);
}

.dark-mode .qa-bulk-preset.qa-bulk-custom:hover {
  color: var(--primary-300, #5eead4);
}

/* Mobile responsive bulk presets */
@media (max-width: 640px) {
  .qa-bulk-preset-row {
    gap: 6px;
  }

  .qa-bulk-preset {
    padding: 5px 12px;
    font-size: 0.75rem;
    flex: 1;
    min-width: 40px;
  }
}

/* ============================================
   PERIOD SELECTOR (Fill Tab)
   ============================================ */

.qa-period-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Period chips — mirrors .proposer-chip geometry
   (style.css:22826) so every filter chip in the modal
   reads the same. Active = teal-tinted, not solid fill. */
.qa-period-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qa-period-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Audit-2026-05-30-03-31: was height:32px which puts the chip below the
     44px touch-target floor on mobile. Use min-height so dense desktop
     layouts can still draw a compact chip, and a media query below tops
     it back to 44px on touch screens. */
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  background: var(--white, #fff);
  color: var(--slate-600, #475569);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (max-width: 600px), (pointer: coarse) {
  .qa-period-chip { min-height: 44px; padding: 0 14px; }
}

.qa-period-chip i {
  font-size: 0.6875rem;
}

.qa-period-chip:hover {
  border-color: var(--primary-300, #5eead4);
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-700, #0f766e);
  transform: translateY(-1px);
}

.qa-period-chip.active {
  border-color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.15);
  color: var(--primary-700, #0f766e);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.15);
}

.qa-period-chip.active:hover {
  background: rgba(20, 184, 166, 0.22);
}

.qa-period-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-primary, #111827);
  font-weight: 500;
}

.qa-period-preview i {
  color: var(--primary-500, #14b8a6);
}

.qa-custom-dates {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--surface-secondary, #f9fafb);
  border-radius: var(--radius-md, 10px);
}

.qa-custom-dates .qa-input {
  flex: 1;
  max-width: 150px;
}

.qa-date-sep {
  color: var(--text-tertiary, #9ca3af);
  font-weight: 500;
}

/* Dark mode period selector */
.dark-mode .qa-period-chip {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700, #374151);
  color: var(--slate-300, #cbd5e1);
}

.dark-mode .qa-period-chip:hover {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-300, #5eead4);
}

.dark-mode .qa-period-chip.active {
  border-color: rgba(20, 184, 166, 0.6);
  background: rgba(20, 184, 166, 0.2);
  color: var(--primary-300, #5eead4);
}

.dark-mode .qa-period-preview {
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-custom-dates {
  background: var(--surface-secondary, #111827);
}

/* Mobile responsive period selector */
@media (max-width: 640px) {
  .qa-period-chips {
    gap: 4px;
  }

  .qa-period-chip {
    padding: 5px 10px;
    font-size: 0.75rem;
    min-height: 24px;
  }

  .qa-custom-dates {
    flex-direction: column;
    gap: 8px;
  }

  .qa-custom-dates .qa-input {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================
   ADVANCED OPTIONS (Shift Type Editor)
   ============================================ */

.qa-advanced-options {
  margin-top: 16px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

.qa-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-secondary, #f9fafb);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  transition: all 0.15s;
  list-style: none;
}

.qa-advanced-toggle::-webkit-details-marker {
  display: none;
}

.qa-advanced-toggle:hover {
  background: var(--surface-tertiary, #f3f4f6);
  color: var(--text-primary, #111827);
}

.qa-advanced-toggle .qa-toggle-icon {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.qa-advanced-options[open] .qa-toggle-icon {
  transform: rotate(90deg);
}

.qa-advanced-content {
  padding: 14px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-advanced-hint {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary, #9ca3af);
  font-style: italic;
}

/* Dark mode advanced options */
.dark-mode .qa-advanced-options {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-advanced-toggle {
  background: var(--surface-secondary, #1f2937);
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-advanced-toggle:hover {
  background: var(--surface-tertiary, #374151);
  color: var(--text-primary, #f9fafb);
}

.dark-mode .qa-advanced-content {
  border-top-color: var(--border-subtle, #374151);
}

/* ============================================
   TAB COMPLETION INDICATORS
   ============================================ */

.qa-tab-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 6px;
  font-size: 0.6rem;
  transition: all 0.2s;
}

/* Pending state - empty circle */
.qa-tab-status[data-status="pending"] {
  border: 2px solid var(--text-tertiary, #9ca3af);
  background: transparent;
}

.qa-tab-status[data-status="pending"]::before {
  content: "";
}

/* Complete state - checkmark */
.qa-tab-status[data-status="complete"] {
  background: var(--success-color, #10b981);
  border: none;
  color: #fff;
}

.qa-tab-status[data-status="complete"]::before {
  content: "✓";
  font-weight: 700;
}

/* In progress state - partial fill */
.qa-tab-status[data-status="in-progress"] {
  border: 2px solid var(--primary-400, #2dd4bf);
  background: linear-gradient(to right, var(--primary-400, #2dd4bf) 50%, transparent 50%);
}

/* Optional state - small dot */
.qa-tab-status[data-status="optional"] {
  width: 8px;
  height: 8px;
  background: var(--text-tertiary, #9ca3af);
  opacity: 0.5;
}

/* Hide indicators when tab is active (less clutter) */
.qa-tab.active .qa-tab-status {
  opacity: 0.6;
}

/* Dark mode */
.dark-mode .qa-tab-status[data-status="pending"] {
  border-color: var(--text-tertiary, #6b7280);
}

.dark-mode .qa-tab-status[data-status="complete"] {
  background: var(--success-color, #10b981);
}

.dark-mode .qa-tab-status[data-status="optional"] {
  background: var(--text-tertiary, #6b7280);
}

/* ============================================
   EDIT MODALS (Team Defaults, Member Leave)
   ============================================ */

.qa-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: qaModalFadeIn 0.15s ease-out;
}

@keyframes qaModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.qa-modal-dialog {
  background: var(--surface-primary, #ffffff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: qaModalSlideIn 0.2s ease-out;
}

@keyframes qaModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.qa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-secondary, #f8fafc);
}

.qa-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 10px;
}

.qa-modal-header h3 i {
  color: var(--primary-500, #14b8a6);
}

.qa-modal-header h3 .qa-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.qa-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full, 9999px);
  color: var(--text-tertiary, #9ca3af);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qa-modal-close:hover {
  background: var(--surface-tertiary, #e2e8f0);
  color: var(--text-primary, #111827);
}

.qa-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.qa-modal-hint {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--text-secondary, #64748b);
}

.qa-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-secondary, #f8fafc);
  justify-content: flex-end;
}

/* Edit Defaults Cards */
.qa-defaults-edit-card {
  padding: 16px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--surface-primary, #ffffff);
}

.qa-defaults-edit-card:last-child {
  margin-bottom: 0;
}

.qa-defaults-edit-header h4 {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.qa-defaults-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qa-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qa-field-group label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qa-field-group label i {
  font-size: 0.75rem;
}

.qa-field-group .qa-input {
  padding: 8px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--surface-primary, #ffffff);
  color: var(--text-primary, #111827);
}

.qa-field-group .qa-input:focus {
  outline: none;
  border-color: var(--primary-500, #14b8a6);
  box-shadow: var(--focus-ring-shadow);
}

.qa-field-group .qa-input:disabled {
  background: var(--surface-secondary, #f8fafc);
  color: var(--text-tertiary, #9ca3af);
}

.qa-sick-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.qa-sick-input-row .qa-input {
  flex: 1;
}

.qa-unlimited-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  white-space: nowrap;
}

.qa-unlimited-toggle input[type="checkbox"] {
  accent-color: var(--primary-500, #14b8a6);
}

/* Leave Edit Grid */
.qa-leave-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qa-leave-edit-row {
  padding: 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: var(--surface-secondary, #f8fafc);
}

.qa-leave-edit-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary, #111827);
}

.qa-leave-edit-label i {
  font-size: 1rem;
}

.qa-leave-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
}

.qa-unlimited-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(249, 115, 22, 0.1);
  border-radius: 8px;
  font-size: 0.875rem;
  color: #c2410c;
  grid-column: span 2;
}

.qa-unlimited-notice i {
  font-size: 0.9rem;
}

/* Dark Mode for Edit Modals */
.dark-mode .qa-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.dark-mode .qa-modal-dialog {
  background: var(--surface-primary, #1e293b);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dark-mode .qa-modal-header {
  background: var(--surface-secondary, #0f172a);
  border-bottom-color: var(--border-color, #334155);
}

.dark-mode .qa-modal-header h3 {
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-modal-close:hover {
  background: var(--surface-tertiary, #334155);
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-modal-hint {
  color: var(--text-secondary, #94a3b8);
}

.dark-mode .qa-modal-footer {
  background: var(--surface-secondary, #0f172a);
  border-top-color: var(--border-color, #334155);
}

.dark-mode .qa-defaults-edit-card {
  background: var(--surface-secondary, #0f172a);
  border-color: var(--border-color, #334155);
}

.dark-mode .qa-defaults-edit-header h4 {
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-field-group label {
  color: var(--text-secondary, #94a3b8);
}

.dark-mode .qa-field-group .qa-input {
  background: var(--surface-primary, #1e293b);
  border-color: var(--border-color, #334155);
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-field-group .qa-input:disabled {
  background: var(--surface-tertiary, #334155);
  color: var(--text-tertiary, #64748b);
}

.dark-mode .qa-leave-edit-row {
  background: var(--surface-secondary, #0f172a);
  border-color: var(--border-color, #334155);
}

.dark-mode .qa-leave-edit-label {
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-unlimited-notice {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

/* Responsive */
@media (max-width: 480px) {
  .qa-modal-dialog {
    width: 95%;
    max-height: 90vh;
  }

  .qa-modal-header {
    padding: 14px 16px;
  }

  .qa-modal-body {
    padding: 16px;
  }

  .qa-modal-footer {
    padding: 14px 16px;
  }

  .qa-leave-edit-fields {
    grid-template-columns: 1fr 1fr;
  }

  .qa-sick-input-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================
   CALENDAR PICKER (Schedule Period)
   ============================================ */

.qa-calendar-picker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: var(--surface-primary, #ffffff);
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.qa-calendar-picker-btn:hover {
  border-color: var(--primary-500, #14b8a6);
  background: var(--primary-50, rgba(20, 184, 166, 0.05));
  color: var(--primary-600, #0d9488);
}

.qa-calendar-picker-btn i {
  font-size: 0.9rem;
}

.qa-date-range-row {
  display: flex;
  /* Left-pack the From / To fields + Refresh button. This is a DUPLICATE
     base rule (the first is at ~line 2019); because it appears later in
     source order with equal specificity it wins the cascade everywhere,
     including the mobile @media block that resets to flex-start. It used
     to set align-items:flex-end, which clobbered the mobile left-align fix
     and right-shoved the date entrance. flex-start reads cleanly on both:
     the From/To labels sit ABOVE their inputs, so there is no baseline to
     align by — top-alignment is correct on desktop and mobile alike. */
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* Calendar Picker Dialog */
.qa-calendar-picker-dialog {
  max-width: 340px;
  width: 90%;
  background: var(--surface-primary, #ffffff);
  border-radius: 16px;
  overflow: hidden;
  user-select: none;
}

.qa-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-secondary, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.qa-cal-month-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.qa-cal-nav {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--surface-primary, #ffffff);
  border-radius: 8px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s;
}

.qa-cal-nav:hover {
  background: var(--primary-500, #14b8a6);
  color: #fff;
}

.qa-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 10px 12px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qa-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 4px 12px 12px;
}

.qa-cal-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary, #111827);
  cursor: pointer;
  transition: all 0.1s;
}

.qa-cal-day.empty {
  cursor: default;
}

.qa-cal-day.today {
  background: var(--surface-tertiary, #e2e8f0);
  font-weight: 700;
}

.qa-cal-day:not(.empty):hover {
  background: var(--primary-50, rgba(20, 184, 166, 0.1));
}

/* Selected range */
.qa-cal-day.selected {
  background: var(--primary-100, rgba(20, 184, 166, 0.15));
  color: var(--primary-700, #0f766e);
  border-radius: 0;
}

.qa-cal-day.selected.range-start {
  background: var(--primary-500, #14b8a6);
  color: #fff;
  border-radius: 8px 0 0 8px;
}

.qa-cal-day.selected.range-end {
  background: var(--primary-500, #14b8a6);
  color: #fff;
  border-radius: 0 8px 8px 0;
}

.qa-cal-day.selected.range-start.range-end {
  border-radius: 8px;
}

/* Selection info */
.qa-calendar-selection {
  padding: 12px 16px;
  background: var(--primary-50, rgba(20, 184, 166, 0.08));
  border-top: 1px solid var(--border-color, #e2e8f0);
  text-align: center;
}

.qa-cal-selection-info {
  font-size: 0.9rem;
  color: var(--text-secondary, #64748b);
}

.qa-cal-hint {
  font-size: 0.875rem;
  color: var(--text-tertiary, #9ca3af);
}

.qa-cal-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.qa-cal-total-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-600, #0d9488);
  line-height: 1;
}

.qa-cal-total-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

.qa-cal-date-range {
  display: block;
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
}

/* Day sequence badges */
.day-seq-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-500, #14b8a6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 7px;
  line-height: 1;
}

.qa-cal-day.range-start .day-seq-badge,
.qa-cal-day.range-end .day-seq-badge {
  background: #fff;
  color: var(--primary-600, #0d9488);
}

/* Dark mode calendar */
.dark-mode .qa-calendar-picker-btn {
  background: var(--surface-tertiary, #1f2937);
  border-color: var(--border-color, #374151);
  color: var(--text-secondary, #94a3b8);
}

.dark-mode .qa-calendar-picker-btn:hover {
  border-color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.15);
  color: var(--primary-400, #2dd4bf);
}

.dark-mode .qa-calendar-picker-dialog {
  background: var(--surface-primary, #1e293b);
}

.dark-mode .qa-calendar-header {
  background: var(--surface-secondary, #0f172a);
  border-bottom-color: var(--border-color, #334155);
}

.dark-mode .qa-cal-month-label {
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-cal-nav {
  background: var(--surface-primary, #1e293b);
  color: var(--text-secondary, #94a3b8);
}

.dark-mode .qa-cal-day {
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-cal-day.today {
  background: var(--surface-tertiary, #334155);
}

.dark-mode .qa-calendar-selection {
  background: rgba(20, 184, 166, 0.1);
  border-top-color: var(--border-color, #334155);
}

.dark-mode .qa-cal-total-number {
  color: var(--primary-400, #2dd4bf);
}

@media (max-width: 480px) {
  .qa-calendar-picker-dialog {
    width: 95%;
  }

  .qa-cal-day {
    width: 34px;
    height: 34px;
    font-size: 0.875rem;
  }
}

/* ============================================
   BOARD SELECTOR
   ============================================ */

.qa-board-selector {
  position: relative;
  margin-left: 12px;
}

.qa-board-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-secondary, #f9fafb);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary, #111827);
  cursor: pointer;
  transition: all 0.15s ease;
}

.qa-board-selector-btn:hover {
  background: var(--surface-tertiary, #f3f4f6);
  border-color: var(--primary-color, #14b8a6);
}

.qa-board-selector-btn i:first-child {
  color: var(--primary-color, #14b8a6);
}

.qa-board-chevron {
  font-size: 0.7em;
  color: var(--text-secondary, #6b7280);
  transition: transform 0.2s ease;
}

.qa-board-dropdown.active + .qa-board-selector-btn .qa-board-chevron,
.qa-board-selector-btn:focus + .qa-board-dropdown .qa-board-chevron {
  transform: rotate(180deg);
}

.qa-board-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--surface-primary, #ffffff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.qa-board-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.qa-board-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 0.9rem;
  color: var(--text-primary, #111827);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.qa-board-option:hover {
  background: var(--surface-secondary, #f9fafb);
}

.qa-board-option.active {
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-color, #14b8a6);
}

.qa-board-option i {
  width: 16px;
  text-align: center;
  color: var(--text-secondary, #6b7280);
}

.qa-board-option.active i {
  color: var(--primary-color, #14b8a6);
}

.qa-board-count {
  margin-left: auto;
  font-size: 0.75rem;
  background: var(--surface-tertiary, #f3f4f6);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #6b7280);
}

.qa-board-divider {
  height: 1px;
  background: var(--border-subtle, #e5e7eb);
  margin: 4px 0;
}

/* (.qa-board-create / .qa-board-create i color rules
   moved into the canonical .qa-board-option block at
   the top of this file. Kept empty as a marker.) */

/* ============================================
   EDITABLE PREVIEW GRID
   ============================================ */

.qa-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.qa-preview-toolbar {
  display: flex;
  gap: 8px;
}

.qa-btn-ghost {
  background: transparent;
  border: 1px solid var(--border-subtle, #e5e7eb);
  color: var(--text-secondary, #6b7280);
}

.qa-btn-ghost:hover:not(:disabled) {
  background: var(--surface-secondary, #f9fafb);
  color: var(--text-primary, #111827);
}

.qa-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qa-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.qa-preview-day {
  background: var(--surface-secondary, #f9fafb);
  border-radius: var(--radius-md, 8px);
  padding: 12px;
  border: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-preview-day-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-preview-day-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
  padding: 4px;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.2s ease;
}

.qa-preview-day-slots.drag-over {
  background: rgba(20, 184, 166, 0.1);
  border: 1px dashed var(--primary-color, #14b8a6);
}

.qa-preview-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-primary, #ffffff);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-subtle, #e5e7eb);
  cursor: grab;
  transition: all 0.15s ease;
}

.qa-preview-slot:hover {
  border-color: var(--primary-color, #14b8a6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.qa-preview-slot.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.qa-slot-color {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}

.qa-slot-content {
  flex: 1;
  min-width: 0;
}

.qa-slot-member-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #111827);
  cursor: pointer;
  transition: all 0.15s ease;
}

.qa-slot-member-select:hover,
.qa-slot-member-select:focus {
  border-color: var(--border-subtle, #e5e7eb);
  background: var(--surface-secondary, #f9fafb);
}

.qa-slot-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

.qa-slot-time-input {
  width: 70px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

.qa-slot-time-input:hover,
.qa-slot-time-input:focus {
  border-color: var(--border-subtle, #e5e7eb);
  background: var(--surface-primary, #ffffff);
}

.qa-slot-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #9ca3af);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.qa-slot-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.qa-slot-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px dashed var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
}

.qa-slot-add:hover {
  border-color: var(--primary-color, #14b8a6);
  color: var(--primary-color, #14b8a6);
  background: rgba(20, 184, 166, 0.05);
}

.qa-fairness-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.9rem;
  font-weight: 700;
}

.qa-fairness-badge.excellent {
  background: rgba(76, 29, 149, 0.15);
  color: #4c1d95;
}

.qa-fairness-badge.good {
  background: rgba(91, 33, 182, 0.15);
  color: #5b21b6;
}

.qa-fairness-badge.fair {
  background: rgba(109, 40, 217, 0.15);
  color: #6d28d9;
}

.qa-fairness-badge.attention {
  background: rgba(124, 58, 237, 0.15);
  color: #7c3aed;
}

/* (.qa-empty-state.qa-success / .qa-error color is
   defined in the empty-state block at the top of
   the file via per-element selectors. !important
   was a workaround for cascading; no longer needed.) */

/* ============================================
   SICK DAYS WIDGET
   ============================================ */

.qa-sick-days-widget {
  padding: 12px 14px;
  background: var(--surface-secondary, #f9fafb);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-subtle, #e5e7eb);
}

.qa-sick-days-widget.warning {
  border-color: var(--warning-color, #f59e0b);
  background: rgba(245, 158, 11, 0.05);
}

.qa-sick-days-widget.critical {
  border-color: var(--danger-color, #ef4444);
  background: rgba(239, 68, 68, 0.05);
}

.qa-sick-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  margin-bottom: 8px;
}

.qa-sick-header i {
  color: var(--text-secondary, #6b7280);
}

.qa-sick-days-widget.warning .qa-sick-header i {
  color: var(--warning-color, #f59e0b);
}

.qa-sick-days-widget.critical .qa-sick-header i {
  color: var(--danger-color, #ef4444);
}

.qa-sick-bar {
  height: 6px;
  background: var(--surface-tertiary, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.qa-sick-fill {
  height: 100%;
  width: var(--qa-fill-pct, 0%);
  background: var(--primary-500, #14b8a6);
  border-radius: var(--radius-full, 9999px);
  transition: width 0.3s ease, background-color 0.15s ease;
}

.qa-sick-days-widget.warning .qa-sick-fill {
  background: #f59e0b;
}

.qa-sick-days-widget.critical .qa-sick-fill {
  background: var(--error, #ef4444);
}

.qa-sick-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

.qa-sick-month {
  font-weight: 500;
}

/* ============================================
   HISTORY VIEW
   ============================================ */

.qa-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary, #6b7280);
}

.qa-history-empty i {
  font-size: 2rem;
  opacity: 0.4;
}

/* History runs — stacked card list. Each card has
   a header (date + status pill), a stats row, and a
   footer (timestamp + action button). Mirrors the
   .qa-member-card chrome and chip family. */
.qa-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qa-history-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--slate-50, #f8fafc);
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--slate-200, #e2e8f0);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qa-history-item:hover {
  border-color: var(--primary-300, #5eead4);
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.08);
}

.qa-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Audit-2026-05-30-03-25: actor attribution line in History tab. The
   cron variant gets a robot icon + slightly muted tint to distinguish
   server-driven runs from admin-driven ones. */
.qa-history-actor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #475569);
}
.qa-history-actor i { font-size: 0.75rem; opacity: 0.8; }
.qa-history-actor-cron { color: var(--text-muted, #64748b); font-style: italic; }

.qa-history-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}

.qa-history-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.qa-history-status.committed {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.3);
}

.qa-history-status.rolled-back {
  background: rgba(239, 68, 68, 0.10);
  color: var(--error, #ef4444);
  border-color: rgba(239, 68, 68, 0.3);
}

.qa-history-status.preview {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}

.qa-run-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.qa-run-stat {
  font-size: 0.75rem;
  color: var(--slate-500, #6b7280);
}

.qa-run-stat strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-800, #1e293b);
  font-variant-numeric: tabular-nums;
}

.qa-history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}

.qa-history-timestamp {
  font-size: 0.6875rem;
  color: var(--slate-500, #94a3b8);
  font-variant-numeric: tabular-nums;
}

body.dark-mode .qa-history-item {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--slate-700, #334155);
}

body.dark-mode .qa-history-item:hover {
  border-color: rgba(20, 184, 166, 0.4);
}

body.dark-mode .qa-history-date {
  color: var(--slate-100);
}

body.dark-mode .qa-run-stat {
  color: var(--slate-400);
}

body.dark-mode .qa-run-stat strong {
  color: var(--slate-100);
}

body.dark-mode .qa-history-footer {
  border-top-color: var(--slate-700);
}

body.dark-mode .qa-history-timestamp {
  color: var(--slate-500);
}

body.dark-mode .qa-history-status.committed {
  background: rgba(22, 163, 74, 0.2);
  color: #4ade80;
  border-color: rgba(22, 163, 74, 0.4);
}

body.dark-mode .qa-history-status.rolled-back {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

body.dark-mode .qa-history-status.preview {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

/* ============================================
   DARK MODE SUPPORT FOR NEW COMPONENTS
   ============================================ */

/* (Legacy .dark-mode .qa-board-selector-btn / dropdown
   / option rules removed during the visual redesign —
   see body.dark-mode rules in the shell block above
   that mirror canonical .boards-dropdown chrome.) */

.dark-mode .qa-preview-day {
  background: var(--surface-secondary, #1e293b);
  border-color: var(--border-color, #334155);
}

.dark-mode .qa-preview-day-header {
  color: var(--text-primary, #f1f5f9);
  border-bottom-color: var(--border-color, #334155);
}

.dark-mode .qa-preview-slot {
  background: var(--surface-primary, #0f172a);
  border-color: var(--border-color, #334155);
}

.dark-mode .qa-slot-member-select {
  color: var(--text-primary, #f1f5f9);
}

.dark-mode .qa-slot-time-input {
  color: var(--text-secondary, #94a3b8);
}

.dark-mode .qa-sick-days-widget {
  background: var(--surface-secondary, #1e293b);
  border-color: var(--border-color, #334155);
}

.dark-mode .qa-sick-header {
  color: var(--text-primary, #f1f5f9);
}

/* (Legacy .dark-mode .qa-history-item / date rules
   removed — see body.dark-mode rules in the history
   block above.) */

/* ============================================
   Validation & Feedback States
   ============================================ */

/* Input Error State — specificity raised via the
   form-input compound selector so we can drop !important. */
.qa-input-error,
input.qa-input-error,
.shift-type-editor .form-input.qa-input-error {
  border-color: var(--error, #ef4444);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

.qa-input-error:focus {
  border-color: var(--danger-color, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Success State for Empty States */
.qa-empty-state.qa-success {
  color: var(--success-color, #22c55e);
}

.qa-empty-state.qa-success i {
  color: var(--success-color, #22c55e);
}

/* Warning State for Empty States */
.qa-empty-state.qa-warning {
  color: var(--warning-color, #f59e0b);
}

.qa-empty-state.qa-warning i {
  color: var(--warning-color, #f59e0b);
}

/* Error State for Empty States */
.qa-empty-state.qa-error {
  color: var(--danger-color, #ef4444);
}

.qa-empty-state.qa-error i {
  color: var(--danger-color, #ef4444);
}

/* Dark mode support */
body.dark-mode .qa-input-error,
body.dark-mode input.qa-input-error,
body.dark-mode .shift-type-editor .form-input.qa-input-error {
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
}

.dark-mode .qa-empty-state.qa-success {
  color: var(--success-color, #4ade80);
}

.dark-mode .qa-empty-state.qa-warning {
  color: var(--warning-color, #fbbf24);
}

.dark-mode .qa-empty-state.qa-error {
  color: var(--danger-color, #f87171);
}

/* ============================================
   Shift Type Editor (Redesigned)
   ============================================ */

.shift-type-editor {
  background: var(--surface-secondary, #f9fafb);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: 20px;
  margin-bottom: 16px;
}

.shift-type-editor .editor-header {
  margin-bottom: 16px;
}

.shift-type-editor .editor-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 8px;
}

.shift-type-editor .editor-header h4 i {
  color: var(--primary-color, #3b82f6);
}

/* Form row for inline fields */
.shift-type-editor .form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}

.shift-type-editor .form-group {
  margin-bottom: 14px;
}

.shift-type-editor .form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 4px;
}

/* Compact chips for shift type editor */
.shift-type-editor .event-type-chips {
  gap: 6px;
}

.shift-type-editor .event-type-chip {
  padding: 6px 12px;
  font-size: 0.75rem;
  min-height: auto;
  border-radius: 9999px;
}

.shift-type-editor .event-type-chip i {
  font-size: 0.75rem;
}

.shift-type-editor .duration-chips {
  gap: 6px;
}

.shift-type-editor .duration-chip {
  padding: 6px 12px;
  font-size: 0.75rem;
  min-height: auto;
  border-radius: 9999px;
}

.shift-type-editor .form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default, #d1d5db);
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
  background: var(--white, #ffffff);
  color: var(--text-primary, #111827);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.shift-type-editor .form-input:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.shift-type-editor .form-input.input-error {
  border-color: var(--danger-color, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Custom duration row */
.shift-type-editor .custom-duration-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-tertiary, #f3f4f6);
  border-radius: var(--radius-md, 8px);
  position: relative;
  z-index: 1;
}

/* Specificity raised so we can drop !important —
   the chained selectors win over generic .form-input. */
.shift-type-editor .custom-duration-row input.form-input,
.shift-type-editor .custom-duration-row input.qa-input-narrow {
  width: 60px;
  padding: 6px 8px;
  text-align: center;
  font-size: 0.875rem;
}

.shift-type-editor .input-suffix {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

/* Color swatches */
.shift-type-editor .color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.shift-type-editor .color-swatches.extended {
  margin-top: 8px;
}

.shift-type-editor .color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--qa-swatch-color, var(--primary-500, #14b8a6));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  padding: 0;
}

.shift-type-editor .color-swatch:hover {
  transform: scale(1.1);
}

.shift-type-editor .color-swatch.active {
  border-color: var(--text-primary, #111827);
  box-shadow: 0 0 0 2px var(--white, #ffffff);
}

.shift-type-editor .color-swatch i {
  color: var(--white, #ffffff);
  font-size: 0.75rem;
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.shift-type-editor .color-swatch.active i {
  opacity: 1;
}

.shift-type-editor .color-swatch.color-expand {
  background: var(--surface-tertiary, #f3f4f6);
  border: 1px dashed var(--border-default, #d1d5db);
}

.shift-type-editor .color-swatch.color-expand i {
  color: var(--text-secondary, #6b7280);
  opacity: 1;
}

/* Advanced section */
.shift-type-editor .advanced-section {
  margin-top: 16px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  padding-top: 12px;
}

.shift-type-editor .advanced-section summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

.shift-type-editor .advanced-section summary:hover {
  color: var(--text-primary, #111827);
}

.shift-type-editor .advanced-section summary i {
  font-size: 0.75rem;
}

.shift-type-editor .advanced-section[open] summary {
  margin-bottom: 12px;
}

.shift-type-editor .advanced-content {
  padding-left: 4px;
}

.shift-type-editor .advanced-content .form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Form actions */
.shift-type-editor .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.shift-type-editor .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.shift-type-editor .btn-primary {
  background: var(--primary-color, #3b82f6);
  color: var(--white, #ffffff);
}

.shift-type-editor .btn-primary:hover {
  background: var(--primary-600, #2563eb);
}

.shift-type-editor .btn-secondary {
  background: var(--white, #ffffff);
  color: var(--text-secondary, #6b7280);
  border: 1px solid var(--border-default, #d1d5db);
}

.shift-type-editor .btn-secondary:hover {
  background: var(--surface-tertiary, #f3f4f6);
  color: var(--text-primary, #111827);
}

/* Dark mode */
.dark-mode .shift-type-editor {
  background: var(--surface-secondary, #1f2937);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .shift-type-editor .form-input {
  background: var(--surface-primary, #111827);
  border-color: var(--border-default, #4b5563);
  color: var(--text-primary, #f9fafb);
}

.dark-mode .shift-type-editor .color-swatch.color-expand {
  background: var(--surface-tertiary, #374151);
  border-color: var(--border-default, #4b5563);
}

.dark-mode .shift-type-editor .btn-secondary {
  background: var(--surface-primary, #111827);
  border-color: var(--border-default, #4b5563);
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .shift-type-editor .advanced-section {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .shift-type-editor .form-actions {
  border-color: var(--border-subtle, #374151);
}

.dark-mode .shift-type-editor .custom-duration-row {
  background: var(--surface-tertiary, #374151);
}

/* ============================================
   TEAM HOURS - MEMBERS HEADER (Attendees style)
   ============================================ */

/* Section header — small uppercase label on the left,
   muted count on the right. Mirrors the section-label
   typography used elsewhere in the modal. */
.qa-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}

.qa-members-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qa-members-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500, #6b7280);
}

.qa-select-all-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--slate-600, #475569);
  font-weight: 500;
}

.qa-select-all-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-500, #14b8a6);
  cursor: pointer;
}

.qa-select-all-label {
  font-weight: 500;
}

.qa-members-count {
  font-size: 0.75rem;
  color: var(--slate-500, #94a3b8);
  font-weight: 500;
}

/* Member list — stacked cards with breathing room.
   Each card keeps its own chrome (border + bg) so the
   row reads as a discrete unit. Mirrors the .member-
   selection-item card pattern (style.css:37794). */
.qa-member-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding: 2px;
  margin: -2px;
}

/* ============================================
   TOTAL HOURS DISTRIBUTE
   ============================================ */

.qa-total-distribute {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-top: 12px;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 12px);
}

.qa-total-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qa-total-input-row .qa-hour-input {
  width: 100px;
}

/* ============================================
   BUTTON STATE VARIANTS
   Specificity raised via .qa-btn.qa-btn-success
   so we can drop !important. STATUS_PRESENTATION
   greens (#22c55e available, #16a34a working).
   ============================================ */

.qa-btn.qa-btn-success {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.qa-btn.qa-btn-success:hover {
  background: #16a34a;
}

.qa-btn.qa-btn-warning {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

.qa-btn.qa-btn-warning:hover {
  background: #d97706;
}

/* ============================================
   LEAVE-TYPE COLOR SYSTEM
   One central place for the three leave-type
   tokens (vacation / sick / personal) so the
   leave bars + edit-modal icons + edit-row
   strips all read from the same source.
   ============================================ */

.qa-leave-vacation { --qa-leave-color: #22c55e; }
.qa-leave-sick     { --qa-leave-color: #f97316; }
.qa-leave-personal { --qa-leave-color: #a855f7; }

.qa-leave-edit-row .qa-leave-edit-label > i,
.qa-leave-bar-row .qa-leave-label,
.qa-leave-bar-used {
  color: var(--qa-leave-color, var(--primary-500, #14b8a6));
}

.qa-leave-bar-used {
  background: var(--qa-leave-color, var(--primary-500, #14b8a6));
  width: var(--qa-used-pct, 0%);
}

.qa-leave-bar-pending {
  width: var(--qa-pending-pct, 0%);
  left: var(--qa-pending-left, 0%);
}

/* Member avatar — reads --qa-member-color when an
   inline custom prop is set, otherwise falls back to
   the canonical brand gradient used in
   .member-selection-item (style.css:37794). */
.qa-member-avatar {
  background: var(--qa-member-color, linear-gradient(135deg, var(--primary-500, #14b8a6), var(--accent-500, #06b6d4)));
}

/* (.qa-period-suffix-inline defined alongside member
   total badge above — duplicate removed during the
   visual-consistency redesign.) */

/* ============================================
   DARK MODE: NEW ELEMENTS
   ============================================ */

.dark-mode .qa-members-header {
  border-bottom-color: var(--border-subtle, #374151);
}

.dark-mode .qa-members-label {
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .qa-members-count {
  color: var(--text-tertiary, #6b7280);
}

.dark-mode .qa-member-list {
  border-color: var(--border-subtle, #374151);
  background: var(--surface-secondary, #111827);
}

.dark-mode .qa-member-list .qa-member-card {
  border-bottom-color: var(--border-subtle, #374151);
}

.dark-mode .qa-total-distribute {
  background: var(--surface-secondary, #111827);
  border-color: var(--border-subtle, #374151);
}

.dark-mode .qa-period-suffix-inline {
  color: var(--text-tertiary, #6b7280);
}

/* ============================================
   READ-ONLY MODE (quotas.view, no quotas.assign)
   ============================================ */
.quota-assignment-modal.qa-readonly .qa-action-bar,
.quota-assignment-modal.qa-readonly .qa-btn-primary,
.quota-assignment-modal.qa-readonly .qa-btn-danger,
.quota-assignment-modal.qa-readonly .qa-rollback-run,
.quota-assignment-modal.qa-readonly .qa-rollback-btn,
.quota-assignment-modal.qa-readonly .qa-edit-type,
.quota-assignment-modal.qa-readonly .qa-delete-type,
.quota-assignment-modal.qa-readonly .qa-edit-shift-type,
.quota-assignment-modal.qa-readonly .qa-delete-shift-type,
.quota-assignment-modal.qa-readonly #qa-add-shift-type,
.quota-assignment-modal.qa-readonly #qa-distribute-btn,
.quota-assignment-modal.qa-readonly .qa-bulk-preset,
.quota-assignment-modal.qa-readonly .qa-step-btn,
.quota-assignment-modal.qa-readonly .qa-hour-input,
.quota-assignment-modal.qa-readonly input[type="number"],
.quota-assignment-modal.qa-readonly input[type="time"],
.quota-assignment-modal.qa-readonly input[type="date"][readonly] {
    pointer-events: none;
}
.quota-assignment-modal.qa-readonly .qa-action-bar,
.quota-assignment-modal.qa-readonly .qa-btn-primary,
.quota-assignment-modal.qa-readonly .qa-btn-danger,
.quota-assignment-modal.qa-readonly .qa-edit-type,
.quota-assignment-modal.qa-readonly .qa-delete-type,
.quota-assignment-modal.qa-readonly .qa-edit-shift-type,
.quota-assignment-modal.qa-readonly .qa-delete-shift-type,
/* 2026-09-01 browser verification: with only pointer-events:none the hour
   steppers and bulk presets still LOOKED live while their Save button was
   hidden — edits changed on screen and silently went nowhere. A read-only
   viewer sees the numbers, not the editors. */
.quota-assignment-modal.qa-readonly .qa-step-btn,
.quota-assignment-modal.qa-readonly .qa-bulk-preset,
.quota-assignment-modal.qa-readonly .qa-total-distribute {
    display: none !important;
}

/* ============================================
   PHASE 3.1 — CELL ACTION POPOVER
   ============================================ */
.qa-grid-cell-action {
    cursor: pointer;
    border: 1px solid transparent;
    background: inherit;
    color: inherit;
    transition: transform .08s ease, box-shadow .08s ease;
}
.qa-grid-cell-action:hover,
.qa-grid-cell-action:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    outline: none;
}
.quota-assignment-modal.qa-readonly .qa-grid-cell-action {
    cursor: default;
}

/* Cell popover — mirrors .meet-now-popup chrome
   (style.css:42241): white surface, soft shadow,
   shared border + radius. */
.qa-cell-popover {
    width: 320px;
    max-width: calc(100vw - 16px);
    background: var(--surface-primary, #ffffff);
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0;
    font-size: 0.8125rem;
    color: var(--slate-800, #1f2937);
    overflow: hidden;
}

.qa-cell-popover-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--slate-50, #f8fafc);
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
}

.qa-cell-popover-meta {
    color: var(--slate-500, #6b7280);
    font-size: 0.6875rem;
}

.qa-cell-popover-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.qa-cell-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qa-cell-popover-row label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--slate-500, #6b7280);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qa-cell-popover-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1.5px solid var(--slate-200, #e2e8f0);
    border-radius: var(--radius-sm, 8px);
    background: var(--white, #fff);
    color: var(--slate-800, #1e293b);
    font-family: inherit;
    font-size: 0.8125rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qa-cell-popover-select:focus {
    outline: none;
    border-color: var(--primary-400, #2dd4bf);
    box-shadow: var(--focus-ring-shadow);
}

body.dark-mode .qa-cell-popover {
    background: var(--surface-secondary, #1e293b);
    border-color: var(--slate-700, #334155);
    color: var(--slate-100, #f1f5f9);
}

body.dark-mode .qa-cell-popover-header {
    background: rgba(15, 23, 42, 0.6);
    border-bottom-color: var(--slate-700);
}

body.dark-mode .qa-cell-popover-meta {
    color: var(--slate-400);
}

body.dark-mode .qa-cell-popover-row label {
    color: var(--slate-400);
}

body.dark-mode .qa-cell-popover-select {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--slate-700);
    color: var(--slate-100);
}

/* ============================================
   PHASE 3.4 — NEEDS-COVER INDICATORS
   ============================================ */
.qa-stat-card.qa-stat-needs-cover {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.06);
}

.qa-stat-card.qa-stat-needs-cover .qa-stat-value {
    color: #d97706;
}

body.dark-mode .qa-stat-card.qa-stat-needs-cover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.1);
}
.qa-needs-cover-banner {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}
.qa-needs-cover-banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #b45309;
    margin-bottom: 8px;
    font-size: 13px;
}
.qa-needs-cover-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qa-needs-cover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--surface, #fff);
    border-radius: 6px;
    font-size: 12px;
}
.qa-needs-cover-meta { flex: 1 1 auto; }
.qa-needs-cover-requestor {
    color: var(--text-tertiary, #6b7280);
    font-size: 11px;
}
body.dark-mode .qa-needs-cover-banner {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.45);
}
body.dark-mode .qa-needs-cover-banner-header { color: #fbbf24; }
body.dark-mode .qa-needs-cover-item {
    background: var(--surface-secondary, #1f2937);
}

/* ============================================================
   WORKBENCH — Phase 1
   One canvas: toolbar / grid / action bar.
   Reuses existing .qa-week-grid / .qa-grid-cell / .qa-action-bar
   styles. Only adds the workbench shell + draft chrome.
   ============================================================ */
.qa-workbench {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 4px 80px; /* bottom padding leaves room for sticky action bar */
}

.qa-workbench-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 10px;
    background: var(--surface-secondary, #f9fafb);
}
body.dark-mode .qa-workbench-toolbar {
    border-color: rgba(255, 255, 255, 0.08);
    background: var(--surface-secondary, #1f2937);
}

.qa-workbench-period,
.qa-workbench-types,
.qa-workbench-configure {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.qa-workbench-configure { margin-left: auto; }

.qa-workbench-window {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 8px;
    background: var(--surface-primary, #ffffff);
}
body.dark-mode .qa-workbench-window {
    background: var(--surface-primary, #0f172a);
    border-color: rgba(255, 255, 255, 0.08);
}
.qa-window-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
    padding: 0 6px;
    min-width: 140px;
    text-align: center;
}
body.dark-mode .qa-window-label { color: var(--text-primary, #f3f4f6); }

.qa-icon-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.qa-icon-btn:hover {
    background: var(--surface-tertiary, #f3f4f6);
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f3f4f6);
}

/* Banner above the grid (needs-cover etc.) */
.qa-workbench-banner {
    margin: 0;
}

/* Empty state CTA — admins land here on first open, no data yet. */
.qa-workbench-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 12px;
    border: 1px dashed var(--border-subtle, #d1d5db);
    border-radius: 12px;
    background: var(--surface-secondary, #f9fafb);
}
.qa-workbench-cta > i {
    font-size: 32px;
    color: var(--accent-primary, #3b82f6);
}
.qa-workbench-cta-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #111827);
}
.qa-workbench-cta-hint {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin: 0;
    max-width: 380px;
}
body.dark-mode .qa-workbench-cta {
    background: var(--surface-secondary, #1f2937);
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .qa-workbench-cta-title { color: var(--text-primary, #f3f4f6); }

/* Grid wrapper just gives the table some breathing room */
.qa-workbench-grid-wrap {
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-primary, #ffffff);
}
body.dark-mode .qa-workbench-grid-wrap {
    background: var(--surface-primary, #0f172a);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Today highlight on the grid header */
.qa-grid-today {
    color: var(--accent-primary, #3b82f6) !important;
    position: relative;
}
.qa-grid-today::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--accent-primary, #3b82f6);
    border-radius: 1px;
}

/* Preview / draft cells — striped overlay so the eye sees them as
   provisional. Same color from --qa-type-color, just less assertive. */
.qa-grid-cell-preview {
    position: relative;
    opacity: 0.85;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.18) 4px,
        rgba(255, 255, 255, 0.18) 8px
    );
}
.qa-grid-cell-preview::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary, #3b82f6);
    box-shadow: 0 0 0 1.5px var(--surface-primary, #fff);
}
body.dark-mode .qa-grid-cell-preview::after {
    box-shadow: 0 0 0 1.5px var(--surface-primary, #0f172a);
}

.qa-preview-swatch {
    background-image: repeating-linear-gradient(
        45deg,
        var(--surface-tertiary, #e5e7eb),
        var(--surface-tertiary, #e5e7eb) 3px,
        var(--surface-secondary, #f3f4f6) 3px,
        var(--surface-secondary, #f3f4f6) 6px
    );
}

/* Workbench action bar — sticky to bottom of the modal body so
   Commit/Discard is always reachable during long scrolls. */
.qa-workbench-action-bar {
    position: sticky;
    bottom: 0;
    margin: 0 -4px -12px;
    padding: 12px 16px;
    background: var(--surface-primary, #ffffff);
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 5;
    box-shadow: 0 -4px 12px -8px rgba(0, 0, 0, 0.12);
}
.qa-workbench-action-bar-light {
    justify-content: flex-end;
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 4px 16px;
}
body.dark-mode .qa-workbench-action-bar {
    background: var(--surface-primary, #0f172a);
    border-color: rgba(255, 255, 255, 0.08);
}
.qa-workbench-draft-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}
.qa-workbench-draft-label i {
    color: var(--accent-primary, #3b82f6);
    font-size: 10px;
}
.qa-workbench-action-buttons {
    display: flex;
    gap: 8px;
}

/* Read-only mode hides the workbench action bar (write actions only) */
.quota-assignment-modal.qa-readonly .qa-workbench-action-bar {
    display: none;
}

/* ============================================================
   WORKBENCH INTERVENTIONS BANNER — Phase 3
   Stacked rows above the grid. Each row has a colored shift-type
   dot, a 2-line meta block, and 1-3 verb buttons.
   ============================================================ */
.qa-interventions-banner {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.dark-mode .qa-interventions-banner {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.32);
}

.qa-interventions-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #b45309;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(245, 158, 11, 0.25);
}
body.dark-mode .qa-interventions-header { color: #fbbf24; }

.qa-intervention-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}
.qa-intervention-row .qa-shift-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--qa-type-color);
    flex-shrink: 0;
}
.qa-intervention-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.qa-intervention-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-intervention-title { color: var(--text-primary, #f3f4f6); }
.qa-intervention-sub {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}
.qa-intervention-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.qa-intervention-verb {
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
}

/* Read-only: no fixes are presented to viewers */
.quota-assignment-modal.qa-readonly .qa-interventions-banner {
    display: none;
}

/* Slim empty-state hint shown below the interventions banner when the
   grid has nothing to draw and the banner is the CTA. */
.qa-workbench-empty-hint {
    margin: 12px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--surface-secondary, #f9fafb);
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.qa-workbench-empty-hint i {
    color: var(--text-tertiary, #9ca3af);
    margin-top: 3px;
}
body.dark-mode .qa-workbench-empty-hint {
    background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   WORKBENCH INSPECTORS — Phase 2
   Right-rail panel mounted over the modal body. Three variants
   share the chrome; the body class .qa-inspector-<variant> lets
   us tweak per-mode if needed.
   ============================================================ */

/* Grid clickability — member labels and empty cells become buttons */
.qa-grid-member-btn {
    appearance: none;
    background: transparent;
    border: none;
    padding: 6px 8px;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    border-radius: 6px;
    transition: background 0.15s;
}
.qa-grid-member-btn:hover {
    background: var(--surface-tertiary, #f3f4f6);
}
body.dark-mode .qa-grid-member-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}
.qa-grid-cell.qa-grid-cell-empty {
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #9ca3af);
}
/* The empty cell is the primary way to place a shift, but a full-strength +
   in every cell of a 7-day grid is louder than the shifts themselves. Keep it
   faint at rest so assigned cells dominate, and bring it up on hover/focus
   where it becomes an obvious target. (user 2026-08-11: "i dont like dots") */
.qa-cell-add {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.28;
    transition: opacity 0.12s ease;
}
.qa-grid-cell.qa-grid-cell-empty:hover .qa-cell-add,
.qa-grid-cell.qa-grid-cell-empty:focus-visible .qa-cell-add {
    opacity: 1;
}
.qa-grid-cell.qa-grid-cell-empty:hover {
    color: var(--text-secondary, #6b7280);
    background: var(--surface-tertiary, #f3f4f6);
    border-radius: 4px;
}
.qa-grid-cell.qa-grid-cell-empty:focus-visible {
    outline: 2px solid var(--accent, #0284c7);
    outline-offset: -2px;
    border-radius: 4px;
}
body.dark-mode .qa-grid-cell.qa-grid-cell-empty:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Inspector panel — fixed inside modal-content. Slides in from right. */
.qa-inspector {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 92vw;
    background: var(--surface-primary, #ffffff);
    border-left: 1px solid var(--border-subtle, #e5e7eb);
    box-shadow: -8px 0 24px -12px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    z-index: 20;
    animation: qa-inspector-in 180ms ease-out;
}
@keyframes qa-inspector-in {
    from { transform: translateX(16px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
body.dark-mode .qa-inspector {
    background: var(--surface-primary, #0f172a);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: -8px 0 24px -12px rgba(0, 0, 0, 0.5);
}

.qa-inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
}
body.dark-mode .qa-inspector-header {
    border-color: rgba(255, 255, 255, 0.06);
}

.qa-inspector-close {
    appearance: none;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.qa-inspector-close:hover {
    background: var(--surface-tertiary, #f3f4f6);
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-inspector-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f3f4f6);
}

.qa-inspector-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px 80px;
}

/* Header variants share the same flex pattern */
.qa-insp-member-head,
.qa-insp-cell-head,
.qa-insp-day-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.qa-insp-member-head {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.qa-insp-member-meta { display: flex; flex-direction: column; min-width: 0; }
.qa-insp-member-name,
.qa-insp-cell-type,
.qa-insp-day-date {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.qa-insp-cell-type .qa-shift-dot {
    background: var(--qa-type-color);
}
.qa-insp-member-sub,
.qa-insp-cell-sub,
.qa-insp-day-sub {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}
body.dark-mode .qa-insp-member-name,
body.dark-mode .qa-insp-cell-type,
body.dark-mode .qa-insp-day-date {
    color: var(--text-primary, #f3f4f6);
}

.qa-insp-draft-pill {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Sections inside the body */
.qa-insp-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle, #f3f4f6);
}
.qa-insp-section:last-child { border-bottom: none; }
body.dark-mode .qa-insp-section { border-color: rgba(255, 255, 255, 0.05); }

.qa-insp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.qa-insp-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.qa-insp-section-head .qa-insp-section-title { margin: 0; }
.qa-insp-section-title i { color: var(--text-tertiary, #9ca3af); font-size: 11px; }
body.dark-mode .qa-insp-section-title { color: var(--text-secondary, #9ca3af); }

.qa-insp-empty {
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-secondary, #f9fafb);
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
}
body.dark-mode .qa-insp-empty {
    background: rgba(255, 255, 255, 0.04);
}

/* Quota period chips (mini version of the toolbar chips) */
.qa-insp-period-chips {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--surface-secondary, #f3f4f6);
    border-radius: 6px;
}
.qa-insp-period-chip {
    appearance: none;
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    border-radius: 4px;
    cursor: pointer;
}
.qa-insp-period-chip.active {
    background: var(--surface-primary, #ffffff);
    color: var(--accent-primary, #3b82f6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
body.dark-mode .qa-insp-period-chips { background: rgba(255, 255, 255, 0.06); }
body.dark-mode .qa-insp-period-chip.active {
    background: var(--surface-tertiary, #374151);
    color: var(--accent-primary, #60a5fa);
}

/* Quota rows in the inspector */
.qa-insp-quota-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.qa-insp-quota-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-insp-quota-label { color: var(--text-primary, #f3f4f6); }
.qa-insp-quota-label .qa-shift-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--qa-type-color);
}
.qa-insp-quota-progress {
    flex: 1 1 auto;
    min-width: 0;
}
.qa-insp-quota-bar {
    height: 4px;
    background: var(--surface-tertiary, #e5e7eb);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.qa-insp-quota-fill {
    height: 100%;
    width: var(--qa-fill-pct, 0%);
    background: var(--qa-type-color, var(--accent-primary, #3b82f6));
    transition: width 0.2s ease;
}
body.dark-mode .qa-insp-quota-bar { background: rgba(255, 255, 255, 0.08); }
.qa-insp-quota-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}
.qa-insp-quota-used { flex: 1 1 auto; }
.qa-insp-hour-input {
    width: 50px;
    padding: 2px 4px;
    border: 1px solid var(--border-subtle, #d1d5db);
    border-radius: 4px;
    font-size: 12px;
    text-align: right;
    background: var(--surface-primary, #ffffff);
    color: var(--text-primary, #111827);
}
.qa-insp-hour-input:focus {
    outline: none;
    border-color: var(--accent-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
body.dark-mode .qa-insp-hour-input {
    background: var(--surface-secondary, #1f2937);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #f3f4f6);
}
.qa-insp-quota-suffix {
    color: var(--text-tertiary, #9ca3af);
}

/* Day toggles */
.qa-insp-field {
    margin: 10px 0;
}
.qa-insp-field-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 6px;
}
.qa-insp-day-row {
    display: flex;
    gap: 4px;
}
.qa-insp-day-toggle {
    appearance: none;
    background: var(--surface-secondary, #f3f4f6);
    border: 1px solid var(--border-subtle, #e5e7eb);
    color: var(--text-primary, #111827);
    border-radius: 6px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
    transition: all 0.15s;
}
.qa-insp-day-toggle.off {
    background: transparent;
    color: var(--text-tertiary, #9ca3af);
    text-decoration: line-through;
    border-style: dashed;
}
.qa-insp-day-toggle:not(.off):hover {
    border-color: var(--accent-primary, #3b82f6);
}
body.dark-mode .qa-insp-day-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f3f4f6);
}
body.dark-mode .qa-insp-day-toggle.off {
    background: transparent;
    color: var(--text-tertiary, #6b7280);
}

.qa-insp-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary, #111827);
    margin: 10px 0;
    cursor: pointer;
}
body.dark-mode .qa-insp-checkbox { color: var(--text-primary, #f3f4f6); }
.qa-insp-stepper-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.qa-insp-stepper-field input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--border-subtle, #d1d5db);
    border-radius: 4px;
    font-size: 13px;
    text-align: right;
    background: var(--surface-primary, #ffffff);
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-insp-stepper-field input {
    background: var(--surface-secondary, #1f2937);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #f3f4f6);
}

/* Leave bars */
.qa-insp-leave-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
}
.qa-insp-leave-label {
    width: 70px;
    color: var(--text-secondary, #6b7280);
}
.qa-insp-leave-bar {
    flex: 1 1 auto;
    height: 6px;
    background: var(--surface-tertiary, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}
.qa-insp-leave-fill {
    height: 100%;
    width: var(--qa-leave-pct, 0%);
    background: var(--accent-success, #14b8a6);
    transition: width 0.2s ease;
}
body.dark-mode .qa-insp-leave-bar { background: rgba(255, 255, 255, 0.08); }
.qa-insp-leave-meta {
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
}
.qa-insp-leave-hint {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    margin-top: 8px;
    font-style: italic;
}

/* Phase 4 — pending-proposals pill in the section header */
.qa-insp-pending-pill {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.dark-mode .qa-insp-pending-pill {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
}

/* Phase 4 — date picker + propose button row */
.qa-insp-propose-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.qa-insp-propose-date {
    flex: 1 1 auto;
    padding: 5px 8px;
    border: 1px solid var(--border-subtle, #d1d5db);
    border-radius: 6px;
    font-size: 12px;
    background: var(--surface-primary, #ffffff);
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-insp-propose-date {
    background: var(--surface-secondary, #1f2937);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #f3f4f6);
}
.qa-insp-leave-banner {
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #b45309;
    margin-bottom: 12px;
}
body.dark-mode .qa-insp-leave-banner {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* Cell-inspector reasons + alternates */
.qa-insp-reason-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.qa-insp-reason-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-primary, #111827);
    line-height: 1.4;
}
body.dark-mode .qa-insp-reason-list li { color: var(--text-primary, #f3f4f6); }
.qa-insp-reason-list li i {
    color: var(--text-tertiary, #9ca3af);
    margin-top: 3px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.qa-insp-reason-list li:first-child i {
    color: var(--accent-success, #14b8a6);
}

.qa-insp-alt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle, #f3f4f6);
}
.qa-insp-alt-row:last-child { border-bottom: none; }
body.dark-mode .qa-insp-alt-row { border-color: rgba(255, 255, 255, 0.04); }
.qa-insp-alt-row .member-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
    flex-shrink: 0;
}
.qa-insp-alt-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.qa-insp-alt-name {
    font-size: 13px;
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-insp-alt-name { color: var(--text-primary, #f3f4f6); }
.qa-insp-alt-sub {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}

.qa-insp-danger {
    padding-top: 16px;
}

/* Day inspector — eligibility rows */
.qa-insp-eligibility-row {
    padding: 10px;
    border-radius: 8px;
    border-left: 3px solid var(--qa-type-color, #94a3b8);
    background: var(--surface-secondary, #f9fafb);
    margin-bottom: 8px;
}
.qa-insp-eligibility-row.eligible {
    background: rgba(20, 184, 166, 0.06);
    border-left-color: var(--accent-success, #14b8a6);
}
body.dark-mode .qa-insp-eligibility-row {
    background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .qa-insp-eligibility-row.eligible {
    background: rgba(20, 184, 166, 0.12);
}
.qa-insp-elig-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.qa-insp-elig-name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-insp-elig-name { color: var(--text-primary, #f3f4f6); }
.qa-insp-elig-verdict {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.qa-insp-eligibility-row.eligible .qa-insp-elig-verdict {
    color: var(--accent-success, #14b8a6);
}
.qa-insp-elig-reasons {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.qa-insp-elig-reasons li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}
.qa-insp-elig-reasons li i {
    width: 12px;
    color: var(--text-tertiary, #9ca3af);
}

/* ── Manual placement: per-row assign action + label field ────────────
   Turns each eligibility row into an actionable "Assign" control so an
   admin can hand-place a shift on an empty cell (wired to manualAssign in
   quota-assignment-modal.js). */
.qa-insp-elig-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
}
.qa-insp-elig-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}
.qa-insp-assign-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.qa-insp-assign-btn i { font-size: 11px; }
/* Blocked-row assign uses the secondary look already, but tint the warning
   glyph so "Assign anyway" reads as an override, not a happy path. */
.qa-insp-eligibility-row:not(.eligible) .qa-insp-assign-btn i {
    color: var(--status-flex, #d97706);
}
.qa-day-assign-label {
    width: 100%;
    margin-top: 2px;
}
.qa-insp-hint {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
}
/* Text-only deeplink button used in the empty-state ("Add one"). */
.qa-btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-primary, #3b82f6);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.qa-btn-link:hover { opacity: 0.85; }

/* Manual (hand-placed) assignment markers. A corner dot on the grid card +
   a "Manual" pill and label line in the cell inspector so a hand-placed
   shift always reads as intentional, not auto-generated. */
.qa-grid-cell-manual {
    position: relative;
}
.qa-grid-cell-manual::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.qa-insp-manual-pill {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--surface-tertiary, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.qa-insp-manual-pill i { font-size: 9px; }
body.dark-mode .qa-insp-manual-pill {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #9ca3af);
}
.qa-insp-cell-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}
body.dark-mode .qa-insp-cell-label { color: var(--text-primary, #f3f4f6); }

/* Read-only — inspector chrome still renders, but writes are disabled
   via the `disabled` attribute on inputs and section-level write actions
   are hidden. */
.quota-assignment-modal.qa-readonly .qa-insp-danger,
.quota-assignment-modal.qa-readonly .qa-insp-swap-btn {
    display: none;
}

/* Push the grid left when an inspector is open so cells aren't hidden.
   We keep it simple: the modal-content gets right padding when an
   inspector is present (selected via :has). Fallback for browsers that
   don't support :has — the modal scrolls horizontally if needed. */
.qa-workbench:has(~ .qa-inspector),
.quota-assignment-modal-content:has(.qa-inspector) .qa-workbench {
    padding-right: 380px;
}
@media (max-width: 720px) {
    .qa-inspector { width: 100%; }
    .quota-assignment-modal-content:has(.qa-inspector) .qa-workbench {
        padding-right: 4px;
    }
}

/* ============================================
   NEXT-STEP CARD (2026-08-23)
   ============================================
   Shown at the top of Team Hours after a successful "Save Hours". The owner
   reported the flow as incomplete — "8 Quotas saved? Shouldn't there be a
   preview and edit step" — and the cause was navigational, not missing
   features: the preview and edit stages exist on Distribute, but Team Hours
   was the only tab in the modal with no onward deeplink, so the flow appeared
   to terminate on a toast that then vanished.
   Styled as a calm informational card, NOT a success banner: the save already
   reported itself on the button and in the toast, and a second celebratory
   green block would double-count one action. */
.qa-next-step-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid var(--primary-200, #99f6e4);
    border-left: 3px solid var(--primary-500, #14b8a6);
    border-radius: var(--radius-md, 10px);
    background: var(--primary-50, #f0fdfa);
}
.qa-next-step-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-primary, #111827);
}
.qa-next-step-card .qa-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Narrow modal: stack so the CTA keeps its full tap target instead of being
   squeezed against the text. */
@media (max-width: 560px) {
    .qa-next-step-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}
body.dark-mode .qa-next-step-card {
    border-color: var(--primary-800, #115e59);
    border-left-color: var(--primary-500, #14b8a6);
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 10%, var(--surface-secondary, #111827));
}
body.dark-mode .qa-next-step-text {
    color: var(--text-primary, #f1f5f9);
}

/* ============================================
   CRON DRAFT REVIEW (review-before-publish)
   ============================================ */
/* Banner above the tab strip: prominent but calm. A cron draft is expected
   behaviour, not a fault, so it uses the primary (teal) family rather than
   the amber caution token — amber stays reserved for "something is off". */
.qa-draft-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-primary, #1e293b);
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-500, #14b8a6) 30%, transparent);
}
.qa-draft-banner > i {
    color: var(--primary-600, #0d9488);
    flex: 0 0 auto;
}
.qa-draft-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}
.qa-draft-banner .qa-draft-banner-review {
    flex: 0 0 auto;
    white-space: nowrap;
}
body.dark-mode .qa-draft-banner {
    color: var(--text-primary, #e2e8f0);
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary-500, #14b8a6) 40%, transparent);
}

/* Review pane */
.qa-draft-review-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--surface-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary, #1f2937);
}
.qa-draft-review-source i {
    color: var(--primary-600, #0d9488);
    margin-right: 6px;
}
.qa-draft-review-when {
    color: var(--text-secondary, #4b5563);
}
body.dark-mode .qa-draft-review-meta {
    background: var(--surface-secondary, #111827);
    border-color: var(--border-color, #374151);
    color: var(--text-primary, #e5e7eb);
}
body.dark-mode .qa-draft-review-when {
    color: var(--text-secondary, #9ca3af);
}

/* Inline notice: the pane's only status channel (owner ruling: no toasts). */
.qa-draft-review-notice {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
    line-height: 1.5;
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-500, #14b8a6) 30%, transparent);
    color: var(--text-primary, #1f2937);
}
.qa-draft-review-notice-error {
    background: color-mix(in srgb, var(--status-busy, #dc2626) 8%, transparent);
    border-color: color-mix(in srgb, var(--status-busy, #dc2626) 30%, transparent);
}
.qa-draft-review-notice-error > i {
    color: var(--status-busy, #dc2626);
}
.qa-draft-review-notice-codes {
    flex-basis: 100%;
    font-size: 0.8125rem;
    color: var(--text-secondary, #4b5563);
}
body.dark-mode .qa-draft-review-notice {
    color: var(--text-primary, #e5e7eb);
}
body.dark-mode .qa-draft-review-notice-codes {
    color: var(--text-secondary, #9ca3af);
}

/* Workbench ack gate sits directly above the workbench action bar. */
.qa-workbench-ack-gate {
    margin: 12px 0 0;
}

/* Recurring form: "Publish drafts" fieldset */
.qa-re-publish-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-primary, #1f2937);
}
.qa-re-publish-line .qa-re-commitlead {
    width: 64px;
}
.qa-re-publish-note {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #4b5563);
}
.qa-re-autoack-row {
    align-items: flex-start;
    line-height: 1.45;
}
.qa-re-autoack-row input[type="checkbox"] {
    margin-top: 2px;
    flex: 0 0 auto;
}
body.dark-mode .qa-re-publish-line {
    color: var(--text-primary, #e5e7eb);
}
body.dark-mode .qa-re-publish-note {
    color: var(--text-secondary, #9ca3af);
}

/* Per-row draft editing. The pencil is a sibling of .qa-why-btn and inherits
   its shape deliberately: the two controls sit next to each other on the same
   row and reading as one pair of small round affordances is the point. Only
   .qa-why-btn carries `margin-left: auto` (it is the first of the pair), so
   the pencil must NOT repeat it or the two would each claim the free space
   and split apart. */
.qa-draft-row-edit {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--surface-tertiary, #f3f4f6);
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
/* When the row has no recorded reason there is no .qa-why-btn to push us
   right, so the pencil takes over the spacer duty. */
.qa-preview-shift-row > .qa-draft-row-edit:first-of-type {
    margin-left: auto;
}
.qa-draft-row-edit:hover {
    background: var(--primary-100, #ccfbf1);
    color: var(--primary-600, #0d9488);
}
body.dark-mode .qa-draft-row-edit {
    background: var(--surface-secondary, #374151);
    color: var(--text-tertiary, #9ca3af);
}
body.dark-mode .qa-draft-row-edit:hover {
    background: var(--primary-900, #134e4a);
    color: var(--primary-300, #5eead4);
}

/* An alternate whose local time for this shift falls in the sleep band. The
   moon glyph is the signal; this only tints the sub-line so the name stays
   legible. Amber, not red: choosing them is allowed, it just needs an
   acknowledgement. */
.qa-insp-alt-sleep .qa-insp-alt-sub {
    color: var(--status-tentative, #d97706);
}
body.dark-mode .qa-insp-alt-sleep .qa-insp-alt-sub {
    color: var(--status-tentative, #fbbf24);
}

/* Touch targets. Placed at the END of the sheet on purpose: a coarse-pointer
   block earlier in this file (and late blocks in style.css) win on source
   order, so these must come last to be authoritative for these controls. */
@media (max-width: 600px), (pointer: coarse) {
    .qa-draft-banner .qa-draft-banner-review,
    .qa-draft-review-actions .qa-btn,
    #qa-draft-back {
        min-height: 44px;
    }
    .qa-ack-row {
        min-height: 44px;
        align-items: center;
    }
    .qa-ack-row input[type="checkbox"],
    .qa-re-autoack-row input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
    /* The pencil and the swap/drop buttons are the whole per-row edit flow on
       touch, so they get real targets. The 22px visual circle is preserved by
       growing the BOX, not the glyph. */
    .qa-draft-row-edit {
        min-width: 44px;
        min-height: 44px;
        background: transparent;
    }
    body.dark-mode .qa-draft-row-edit {
        background: transparent;
    }
    .qa-insp-alt-row .qa-draft-swap-btn,
    #qa-draft-row-drop {
        min-height: 44px;
    }
}

/* Flexible-timing row in the coverage-type editor (2026-09-01) */
.qa-flexible-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 10px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #475569);
  cursor: pointer;
}
.qa-flexible-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--primary-500, #14b8a6);
}
.dark-mode .qa-flexible-row { color: var(--text-secondary, #94a3b8); }

/* Sync-status chip (2026-09-01, stage A): one persistent header signal
   instead of a toast per push outcome. */
.qa-sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  flex: 0 0 auto;
  background: var(--slate-100, #f1f5f9);
  color: var(--text-secondary, #475569);
  cursor: default;
}
.qa-sync-chip-ok { color: var(--success-600, #16a34a); background: rgba(34, 197, 94, 0.1); }
.qa-sync-chip-busy { color: var(--primary-600, #0d9488); background: rgba(20, 184, 166, 0.1); }
.qa-sync-chip-failed {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
  cursor: pointer;
}
.qa-sync-chip-failed:hover { background: rgba(245, 158, 11, 0.24); }
.dark-mode .qa-sync-chip { background: rgba(148, 163, 184, 0.12); color: var(--text-secondary, #94a3b8); }
.dark-mode .qa-sync-chip-ok { color: #4ade80; background: rgba(34, 197, 94, 0.12); }
.dark-mode .qa-sync-chip-failed { color: #fbbf24; background: rgba(245, 158, 11, 0.14); }

/* Acceptance tracker (2026-09-01, stage A) */
.qa-acceptance-rollup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-md, 10px);
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  font-size: 0.8125rem;
  font-weight: 600;
}
.qa-acceptance-rollup .qa-accept-ok { color: var(--success-600, #16a34a); }
.qa-acceptance-rollup .qa-accept-wait { color: #b45309; }
.qa-acceptance-rollup .qa-accept-cover { color: var(--danger-600, #dc2626); }
.qa-acceptance-rollup .qa-accept-sep { color: var(--slate-300, #cbd5e1); margin: 0 2px; }
.qa-acceptance-rollup i { margin-right: 4px; }
.dark-mode .qa-acceptance-rollup { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.2); }

/* Committed-but-awaiting cell: hollow ring + hourglass tint so it reads as
   "held, not settled" — distinct from both the solid confirmed cell and the
   dashed draft cell. */
.qa-grid-cell.qa-grid-cell-awaiting {
  opacity: 0.75;
  box-shadow: inset 0 0 0 2px rgba(180, 83, 9, 0.55);
}
.qa-insp-acceptance-note { font-size: 0.8125rem; color: var(--text-secondary, #475569); margin: 0 0 8px; }
.qa-insp-acceptance-note.qa-insp-accepted { color: var(--success-600, #16a34a); margin-bottom: 0; }

/* Pre-flight feasibility + frame note (2026-09-01, stage B) */
.qa-feasibility {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 10px);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.8125rem;
  color: var(--text-secondary, #475569);
}
.qa-feasibility-blocked { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.35); }
.qa-feasibility-title { font-weight: 700; color: #b45309; margin-bottom: 4px; }
.qa-feasibility-blocked .qa-feasibility-title { color: var(--danger-600, #dc2626); }
.qa-feasibility-title i { margin-right: 6px; }
.qa-feasibility-list { margin: 0 0 6px; padding-left: 18px; }
.qa-feasibility-list li { margin: 2px 0; }
.qa-feasibility-hint { font-size: 0.75rem; opacity: 0.9; }
.dark-mode .qa-feasibility { color: var(--text-secondary, #94a3b8); }
.qa-preview-frame-note {
  font-size: 0.75rem;
  color: var(--text-tertiary, #64748b);
  margin: 2px 0 8px;
}
.qa-preview-frame-note i { margin-right: 5px; }

/* Setup checklist strip (2026-09-01, stage C) */
.qa-setup-checklist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  background: var(--slate-50, #f8fafc);
}
.qa-checklist-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 4px 8px;
  border-radius: var(--radius-full, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  cursor: pointer;
}
.qa-checklist-step:hover { background: var(--slate-100, #f1f5f9); }
.qa-checklist-step .qa-checklist-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--slate-200, #e2e8f0);
  font-size: 0.6875rem;
}
.qa-checklist-step.done { color: var(--success-600, #16a34a); }
.qa-checklist-step.done .qa-checklist-num { background: rgba(34, 197, 94, 0.15); color: var(--success-600, #16a34a); }
.qa-checklist-sep { font-size: 0.625rem; color: var(--slate-300, #cbd5e1); }
.dark-mode .qa-setup-checklist { background: rgba(148, 163, 184, 0.06); border-color: rgba(148, 163, 184, 0.18); }
.dark-mode .qa-checklist-step { color: var(--text-secondary, #94a3b8); }
.dark-mode .qa-checklist-step .qa-checklist-num { background: rgba(148, 163, 184, 0.18); color: inherit; }

/* Preview shortfall headline (stage D) */
.qa-preview-headline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-md, 10px);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #92400e;
  font-size: 0.875rem;
  font-weight: 600;
}
.qa-preview-headline-empty { background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.35); color: var(--danger-600, #dc2626); }
.qa-preview-headline i { margin-top: 2px; }
.dark-mode .qa-preview-headline { color: #fbbf24; }

/* Draft edit controls on preview rows (stage C) */
.qa-preview-reassign {
  max-width: 110px;
  font-size: 0.6875rem;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--surface, #fff);
  color: inherit;
}
.qa-preview-drop-btn {
  border: none;
  background: none;
  color: var(--text-tertiary, #94a3b8);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.qa-preview-drop-btn:hover { color: var(--danger-600, #dc2626); background: rgba(220, 38, 38, 0.08); }
.dark-mode .qa-preview-reassign { background: rgba(15, 23, 42, 0.4); border-color: rgba(148, 163, 184, 0.25); }

/* ============================================
   HEADER ALIGNMENT + DROPDOWN CLAMP (2026-09-01)
   Owner, phone screenshot: "upper area alignment is off" — the title read
   "Quota &" with the rest clipped, and the board dropdown hung past the
   right edge of the modal.
   ROOT 1: .qa-header h2 is `flex: 0 0 auto` (desktop rule) while the mobile
   rule gives it overflow:hidden + ellipsis. Refusing to shrink AND clipping
   itself means the title truncates instead of the row reflowing, on every
   phone width.
   ROOT 2: .qa-board-dropdown is `left: 0` on a trigger that sits at the RIGHT
   of the header, so a min(340px, 90vw) panel starts at the trigger and runs
   off-screen. Anchor it to the trigger's right edge instead.
   ============================================ */
@media (max-width: 640px) {
  /* Let the title shrink before it clips; the ellipsis stays as a backstop
     for genuinely narrow screens rather than being the default outcome. */
  .qa-header h2 {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* The chip row (plan badge, board selector, sync chip) keeps its own line
     when the title needs the width, instead of shouldering it out. */
  .qa-header-left {
    row-gap: 8px;
  }
  .qa-board-selector { margin-left: auto; }
}

/* Right-anchored so the panel opens INSIDE the modal on every width. */
.qa-board-dropdown {
  left: auto;
  right: 0;
  max-width: calc(100vw - 32px);
}

/* Dismissible read-only note (2026-09-01, owner: "should be able to cancel x
   that text for a fuller view"). The note explains a state; it is not a gate,
   so it can be closed to reclaim the panel on a phone. */
.qa-readonly-note { position: relative; padding-right: 34px; }
.qa-readonly-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--text-tertiary, #94a3b8);
  cursor: pointer;
  font-size: 0.875rem;
}
.qa-readonly-dismiss:hover { background: rgba(148, 163, 184, 0.18); color: var(--text-secondary, #475569); }