/* ============================================================================
   AQUA HOMESPACE - ADMIN DASHBOARD
   ============================================================================ */

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-dashboard {
  min-height: 100vh;
  padding: var(--spacing-xl);
  max-width: 1280px;
  margin: 0 auto;
}

/* Wider content column (1440px inside the padding, vs. the usual 1216px) —
   opted into per-section, not a change to the shared .admin-dashboard
   default. Currently used by Aqua League and Resources only. */
.admin-dashboard.admin-dashboard--wide {
  max-width: calc(1440px + var(--spacing-xl) * 2);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-kicker {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.001em;
  color: var(--main);
}

.admin-header h1 {
  margin: var(--spacing-xs) 0;
}

.admin-subtitle {
  margin: 0;
  color: var(--text-muted);
}

.admin-logout-btn {
  border: 1px solid var(--line-soft);
  padding: 10px 16px;
  border-radius: var(--radius-md);
}

.admin-dashboard-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.admin-panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--drop-shadow);
  padding: var(--spacing-lg);
}

/* ── Global panel-wrap modifiers ─────────────────────────────────────────────
   Add .global-panel-wrap to every non-table admin-panel (action rows, filters,
   forms) to get consistent vertical spacing below the panel.
   Add .global-panel-wrap-table to the table's admin-panel: removes padding so
   the table fills edge-to-edge and clips the rounded corners; pagination must
   live as a sibling OUTSIDE this section, not inside it. */
.admin-panel.global-panel-wrap {
  margin-bottom: var(--spacing-lg);
}

.admin-panel.global-panel-wrap-table {
  padding: 0;
  overflow: hidden; /* clips table edges to the panel's border-radius */
}

.admin-documents-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Shared base look for any table using .admin-documents-table that doesn't
   define its own page-scoped override (e.g. #adminResourcesPage does, and
   wins here via higher specificity) — was previously undefined entirely for
   pages like the Notification Manager, rendering as a bare unstyled table. */
.admin-documents-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base, 0.9rem);
}

.admin-documents-table th,
.admin-documents-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-faint, #f0f0f2);
  vertical-align: middle;
}

.admin-documents-table th {
  background: #fbfcfd;
  color: #6a7080;
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 600;
}

.admin-documents-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-documents-table tbody tr:hover {
  background: var(--bg-faint, #f6f8fb);
}

.admin-card {
  background: var(--main);
  border: 1px solid var(--main);
  box-shadow: var(--drop-shadow);
  padding: var(--spacing-lg);
}

.admin-card-label {
  margin: 0 0 var(--spacing-xs);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--font-size-sm);
}

.admin-card-value {
  margin: 0;
  font-family: var(--font-family-headlines);
  font-size: var(--font-size-3xl);
  color: var(--text-on-main);
}

.admin-panel h2 {
  margin-bottom: var(--spacing-md);
}

.admin-progress-track {
  width: 100%;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--line-faint);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.admin-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--main), var(--accent));
}

.admin-panel-copy {
  margin: 0;
  color: var(--text-muted);
}

/* System Logs — Scheduled Jobs tab: manual trigger button + explainer */
.sysLogJobsIntro {
  margin-bottom: 14px;
}

.sysLogJobsTriggerRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sysLogJobsTriggerRow .admin-documents-btn-sm {
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 0;
}

.sysLogJobsTriggerRow .admin-subtitle {
  margin: 0;
}

.sysLogFilesHeading {
  margin: 28px 0 6px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
}

.admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--line-faint);
}

.admin-list li:last-child {
  border-bottom: 0;
}

.admin-list span {
  color: var(--text-muted);
}

.admin-list strong {
  font-family: var(--font-family-headlines);
  color: var(--text-main);
}

.admin-users-content {
  gap: var(--spacing-md);
}

.admin-users-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.admin-users-panel {
  padding: var(--spacing-md);
}

.admin-users-tabs {
  margin: 0 0 25px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line-main);
  border-radius: 12px;
  background: #f7f9fc;
  width: fit-content;
}

.admin-users-tab-btn {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #516074;
  height: 38px;
  padding: 0 14px;
  cursor: pointer;
  font-family: var(--font-family-headlines);
  font-size: var(--font-size-sm);
}

.admin-users-tab-btn.is-active {
  background: #ffffff;
  border-color: #d8dde4;
  color: #233248;
  box-shadow: 0 2px 8px rgba(35, 50, 72, 0.08);
}

.admin-users-tab-copy {
  margin: 0;
}

.admin-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.admin-users-toolbar-left {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(140px, 0.8fr));
  gap: var(--spacing-sm);
  flex: 1;
}

.admin-users-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-users-toolbar-right .admin-documents-btn-sm {
  margin-right: 0;
}

.admin-users-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.admin-users-inline-form .app-modal-edit-label {
  flex: 1 1 220px;
  max-width: 320px;
}

.admin-users-inline-form button[type="submit"] {
  margin: 0;
  height: 40px;
}

.admin-users-control-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.admin-users-search input,
.admin-users-search select,
.admin-users-filter select,
.admin-users-invite-grid input,
.admin-users-invite-grid select {
  width: 100%;
  height: 42px;
  border: 1px solid #d8dde4;
  border-radius: 10px;
  padding: 0 12px;
  background: #ffffff;
  color: #252b36;
}

.admin-users-search .ac-wrap { width: 100%; }
.admin-users-search .ac-input {
  height: 42px;
  border-radius: 10px;
  border-color: #d8dde4;
  padding: 0 12px;
}

.admin-users-invite-btn,
.admin-users-invite-submit {
  border: 1px solid #00b5ef;
  border-radius: var(--radius-md);
  background: #00b5ef;
  color: #ffffff;
  height: 36px;
  padding: 0 42px;
  cursor: pointer;
}

.admin-users-invite-form {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: #f8fafc;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.admin-users-invite-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 200px;
  gap: var(--spacing-sm);
}

.admin-users-invite-grid-guest {
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.4fr) minmax(170px, 0.9fr) minmax(170px, 0.9fr) minmax(170px, 0.9fr);
}

.admin-users-invite-grid label {
  display: block;
  font-size: var(--font-size-sm);
  color: #5f6674;
}

.admin-users-invite-actions {
  margin-top: var(--spacing-sm);
  display: flex;
  justify-content: flex-end;
}

.admin-users-invite-feedback {
  margin: 10px 2px 0;
  font-size: var(--font-size-sm);
}

.admin-users-invite-feedback.is-error {
  color: #9d2b2b;
}

.admin-users-invite-feedback.is-success {
  color: #13673c;
}

.admin-users-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--drop-shadow);
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.admin-users-table th,
.admin-users-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-faint);
}

.admin-users-table th {
  font-size: var(--font-size-sm);
  color: #6a7080;
  background: #fbfcfd;
}

.admin-users-table tbody tr:hover {
  background: #f8fbff;
}

.admin-role-display-input {
  width: 100%;
  max-width: 280px;
  height: 38px;
  border: 1px solid #d8dde4;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: #252b36;
  font-size: var(--font-size-sm);
}

.admin-role-display-input:focus {
  outline: none;
  border-color: #00b5ef;
  box-shadow: 0 0 0 3px rgba(0, 181, 239, 0.15);
}

.admin-users-badge {
  display: block;
  max-width: 175px;
  min-width: 115px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
}

.admin-users-badge[class*="role-"] {
  background: #f3f5f8;
  color: #3f4a5c;
  border-color: #cfd6e0;
}

.admin-users-badge.status-active {
  background: rgba(24, 168, 96, 0.12);
  color: #0d6a3b;
  border-color: rgba(24, 168, 96, 0.3);
}

.admin-users-badge.status-inactive {
  background: rgba(120, 126, 141, 0.16);
  color: #4b5262;
  border-color: rgba(120, 126, 141, 0.34);
}

.admin-users-badge.status-pending {
  background: rgba(235, 170, 39, 0.14);
  color: #7d5300;
  border-color: rgba(235, 170, 39, 0.34);
}

.admin-users-badge.status-suspended {
  background: rgba(216, 74, 74, 0.12);
  color: #8e2323;
  border-color: rgba(216, 74, 74, 0.3);
}

.admin-users-badge.status-expired {
  background: rgba(216, 74, 74, 0.12);
  color: #8e2323;
  border-color: rgba(216, 74, 74, 0.3);
}

.admin-users-row-action {
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  background: #ffffff;
  color: #263347;
  font-size: var(--font-size-sm);
  height: 34px;
  padding: 0 12px;
  cursor: pointer;
}

.admin-users-row-action:hover {
  border-color: #98aac1;
  background: #f6f9fc;
}

.admin-users-empty,
.admin-users-result-count {
  margin: var(--spacing-sm) 2px 0;
  color: var(--text-muted);
}

.is-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .admin-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-users-summary {
    grid-template-columns: 1fr;
  }

  .admin-users-toolbar-left {
    grid-template-columns: 1fr;
  }

  .admin-users-invite-grid,
  .admin-users-invite-grid-guest {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-dashboard {
    padding: var(--spacing-lg);
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   DOCUMENT TEMPLATES (Digital Documents feature)
   ============================================================================ */

.admin-documents-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.admin-documents-list-header h2 {
  margin-bottom: 0;
}

tr.doc-template-inactive-hidden {
  display: none;
}

.admin-documents-empty {
  margin: var(--spacing-sm) 2px 0;
  color: var(--text-muted);
}

.app-modal-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

.admin-documents-checkbox-label.app-modal-edit-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-documents-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--main);
}

.admin-documents-json-editor {
  width: 100%;
  margin-top: 6px;
  border: 1px solid #d7dde7;
  border-radius: 10px;
  padding: 10px;
  background: #ffffff;
  color: #222c3a;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  resize: vertical;
}

/* Field Map builder (Digital Documents — Objective Document Links "Edit Field Map" modal) */

.dfm-field-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.dfm-empty {
  padding: 12px 0;
}

/* Live preview of the guest-facing section grouping — appears wherever a
   field's Section differs from the one before it, mirroring the blue title
   bars documentIntake.php renders for the guest. */
.dfm-section-divider {
  background: var(--main);
  color: var(--text-on-accent, #ffffff);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
}

.dfm-field-row {
  border: 1px solid #d7dde7;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fbfcfe;
}

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

.dfm-field-row-title {
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-main, #263347);
  font-size: var(--font-size-sm);
}

.dfm-field-row-controls .admin-documents-btn-sm {
  margin-right: 4px;
}

.dfm-field-row-controls .admin-documents-btn-sm:last-child {
  margin-right: 0;
}

.dfm-placement-label {
  margin: 10px 0 4px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.app-modal-edit-grid.dfm-placement-grid {
  grid-template-columns: repeat(4, 1fr);
}

.dfm-place-btn {
  margin-top: 8px;
}

/* Visual PDF placement tool — click the rendered page instead of typing X/Y */

.dfm-placement-tool {
  border: 1px solid #d7dde7;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fbfcfe;
}

.dfm-placement-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.dfm-page-indicator {
  font-size: var(--font-size-sm);
  color: var(--text-main, #263347);
  font-weight: var(--font-weight-medium, 500);
}

.dfm-placement-armed-label {
  font-size: var(--font-size-sm);
  color: var(--main);
  font-weight: var(--font-weight-medium, 500);
}

.dfm-placement-canvas-wrap {
  position: relative;
  max-height: 480px;
  overflow: auto;
  border: 1px solid #d7dde7;
  border-radius: 8px;
  background: #e9edf3;
}

#dfmPdfCanvas {
  display: block;
}

#dfmPdfCanvas.is-armed {
  cursor: crosshair;
}

.dfm-placement-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* left/top on this element mark the EXACT target coordinate — it has no
   size and no transform of its own. Previously the dot+label were laid out
   as a flex row and the whole group was centered on the point, which pulled
   the dot away from the true coordinate by roughly half the label's width
   (very visible for longer labels like "Emergency Contact"). Now the dot is
   what's centered on the point, and the label just hangs off to the side of
   it, so the point itself is always exactly where the dot sits. */
.dfm-placement-marker {
  position: absolute;
  /* Overlay itself is click-through (see .dfm-placement-overlay) so the
     canvas's own click-to-place still works; re-enable it just on the
     marker's children (dot/label) so either can be grabbed and dragged. */
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.dfm-placement-marker.is-dragging {
  cursor: grabbing;
  z-index: 1;
}

.dfm-placement-marker.is-dragging .dfm-placement-marker-dot {
  background: var(--main);
  box-shadow: 0 0 0 1px var(--main);
}

.dfm-placement-marker-dot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d94040;
  border: 1px solid #ffffff;
  box-shadow: 0 0 0 1px #d94040;
  pointer-events: auto;
}

/* Invisible, larger drag hit-area centered on the dot without changing its
   own 8px visual size (an enlarged border/padding on the dot itself would
   also stretch its border and box-shadow into a big square ring). */
.dfm-placement-marker-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.dfm-placement-marker-label {
  position: absolute;
  left: 8px;
  top: 0;
  transform: translateY(-50%);
  font-size: 0.72rem;
  line-height: 1.2;
  color: #ffffff;
  background: rgba(38, 51, 71, 0.85);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: auto;
}

.admin-documents-json-toggle {
  display: inline-block;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--main);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-decoration: underline;
}

.admin-documents-json-toggle:hover {
  color: var(--main-dark, #0070b8);
}

.admin-documents-btn-sm {
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  background: #ffffff;
  color: #263347;
  font-size: var(--font-size-sm);
  height: 30px;
  padding: 0 10px;
  margin-right: 6px;
  cursor: pointer;
}

.admin-documents-btn-sm:hover {
  border-color: #98aac1;
  background: #f6f9fc;
}

.admin-documents-btn-sm.is-active-btn {
  border-color: rgba(74, 159, 94, 0.4);
  color: #1f6d39;
}

.admin-documents-btn-sm.is-active-btn:hover {
  background: rgba(74, 159, 94, 0.08);
}

.admin-documents-btn-sm.is-danger {
  border-color: rgba(216, 74, 74, 0.4);
  color: #8e2323;
}

.admin-documents-btn-sm.is-danger:hover {
  background: rgba(216, 74, 74, 0.08);
}

.admin-documents-table-actions {
  white-space: nowrap;
}

/* ── AquaLeague: admin team management ───────────────────────────────────── */

.league-team-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.league-team-card-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.league-team-card-heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.league-team-card-heading .admin-panel-title {
  margin: 0;
}

.league-team-roster-panel {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--line-faint);
}

.admin-documents-doctype-input {
  width: 100%;
  min-width: 160px;
  height: 34px;
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: #222c3a;
  font-size: var(--font-size-sm);
}

a.admin-documents-btn-sm {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.admin-accordion-group {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.admin-accordion-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  cursor: pointer;
  user-select: none;
}

.admin-accordion-group-header:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: -2px;
}

.admin-accordion-group-header:hover {
  background: #f8fbff;
}

.admin-accordion-group-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--main);
}

.admin-accordion-group-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.admin-accordion-group-count {
  font-size: var(--font-size-xs);
  color: var(--main);
  background: rgba(0, 181, 239, 0.1);
  border: 1px solid rgba(0, 181, 239, 0.25);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  white-space: nowrap;
}

.admin-accordion-group-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.admin-accordion-group.is-expanded .admin-accordion-group-chevron {
  transform: rotate(180deg);
}

.admin-accordion-group-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.22s ease;
}

.admin-accordion-group.is-expanded .admin-accordion-group-body {
  max-height: 3000px;
  opacity: 1;
}

.admin-accordion-group-body .admin-users-table-wrap {
  border: none;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
}

.checklist-guest-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 4px;
  background: #ede9fe;
  color: #6d28d9;
  vertical-align: middle;
  line-height: 1.4;
}

/* ============================================================================
   DOCUMENT SUBMISSIONS (Digital Documents feature, Step 8)
   ============================================================================ */

.admin-foxit-banner {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid rgba(216, 74, 74, 0.34);
  border-radius: var(--radius-md);
  background: rgba(216, 74, 74, 0.08);
  color: #8e2323;
}

.admin-foxit-banner strong {
  display: block;
  margin-bottom: 4px;
}

.admin-foxit-banner p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.admin-document-submission-meta,
.admin-document-submission-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--spacing-md);
  margin: 0 0 var(--spacing-md);
}

.admin-document-submission-meta dt,
.admin-document-submission-fields dt {
  font-weight: var(--font-weight-semibold);
  color: #516074;
}

.admin-document-submission-meta dd,
.admin-document-submission-fields dd {
  margin: 0;
  color: #222c3a;
}

.admin-document-submission-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--line-main);
}

.admin-document-submission-section h3 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-sm);
}

.admin-document-submission-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-document-submission-note {
  margin: var(--spacing-sm) 0 0;
  color: #617287;
  font-size: var(--font-size-sm);
}

.admin-document-foxit-badge {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid #d6dee8;
  background: #f3f6f9;
  color: #617287;
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.admin-document-foxit-badge.is-cancelled {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.admin-document-foxit-badge.is-signed {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #157154;
}

.admin-document-audit-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.admin-document-audit-list small {
  color: #617287;
}


/* ============================================================================
   DAILY QUOTES ADMIN
   ============================================================================ */

.admin-quotes-today-panel {
  margin-bottom: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(0,181,239,0.06) 0%, rgba(184,248,121,0.06) 100%);
  border: 1px solid rgba(0,181,239,0.18);
}

.admin-quotes-today-label {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-quotes-today-text {
  margin: 0;
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--text-main);
  line-height: var(--line-height-relaxed);
  border-left: 3px solid var(--main);
  padding-left: var(--spacing-md);
}

/* ============================================================================
   ADMIN DIRECTORY
   ============================================================================ */

.admin-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .admin-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .admin-directory-grid { grid-template-columns: 1fr; }
}

.admin-directory-group-label {
  margin: 0 0 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-faint);
}

.admin-quotes-today-author {
  margin: var(--spacing-sm) 0 0 calc(var(--spacing-md) + 3px);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.admin-quotes-today-empty {
  margin: 0;
  color: var(--text-muted);
  font-style: italic;
}

.admin-quotes-add-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--text-main);
  background: var(--surface);
}

.admin-quotes-optional {
  font-weight: var(--font-weight-normal);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.admin-quotes-feedback {
  margin: 0;
  font-size: var(--font-size-sm);
  min-height: 1.2em;
}

.admin-quotes-feedback.is-success { color: var(--accent-dark); }
.admin-quotes-feedback.is-error   { color: var(--color-danger, #dc2626); }

.admin-quotes-text-cell {
  max-width: 480px;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-quotes-actions-cell {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.admin-quotes-none {
  color: var(--text-muted);
}

.admin-quotes-loading {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-lg);
}

/* ── Pending-count tab badge — shared by any admin tab strip ─────────────────── */
.admin-pending-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(235, 170, 39, 0.14);
  color: #7d5300;
  border: 1px solid rgba(235, 170, 39, 0.34);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
}
.admin-pending-count.is-hidden {
  display: none;
}

/* ============================================================================
   HOME MODULES ADMIN
   ============================================================================ */

.admin-module-form-pickers {
  display: flex;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.admin-module-picker-group {
  flex: 1;
  min-width: 200px;
}

.admin-module-picker-label {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
}

.admin-module-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-module-icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.admin-module-icon-btn:hover {
  border-color: var(--main);
  color: var(--main);
}

.admin-module-icon-btn.is-active {
  border-color: var(--main);
  background: rgba(0, 181, 239, 0.1);
  color: var(--main);
}

.admin-module-theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-module-theme-btn {
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  padding: 3px;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.admin-module-theme-btn:hover {
  transform: scale(1.1);
}

.admin-module-theme-btn.is-active {
  border-color: var(--text-main);
}

.admin-module-theme-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.admin-module-table-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  vertical-align: middle;
  margin-right: 6px;
  background: linear-gradient(145deg, #ffffff 0%, #f5f6f8 100%);
  border: 1.5px solid var(--module-color, #00b5ef);
  color: var(--module-color, #00b5ef);
}

.admin-module-order-cell {
  white-space: nowrap;
}

.admin-module-order-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.admin-module-order-btn:hover:not(:disabled) {
  border-color: var(--main);
  color: var(--main);
}

.admin-module-order-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.admin-module-url-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ============================================================================
   HOME MODULES TABLE — column spacing + layout overrides
   ============================================================================ */

#adminModulesTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

#adminModulesTable th,
#adminModulesTable td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-faint);
  vertical-align: middle;
}

#adminModulesTable th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  background: #fbfcfd;
  white-space: nowrap;
}

#adminModulesTable tbody tr:last-child td {
  border-bottom: none;
}

#adminModulesTable tbody tr:hover {
  background: #f8fbff;
}

/* Order column — fixed narrow width, buttons side-by-side */
#adminModulesTable .admin-module-order-cell {
  width: 72px;
  padding-right: 8px;
}

#adminModulesTable .admin-module-order-cell {
  display: table-cell;
  white-space: nowrap;
}

.admin-module-order-btns {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* Module column — icon + name row, give it room */
#adminModulesTable td:nth-child(2) {
  min-width: 180px;
}

.admin-module-table-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-module-table-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-main);
}

/* Link column — allow it to breathe, limit max width gracefully */
.admin-module-url-cell {
  max-width: 260px;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-family: var(--font-family-body);
  padding-left: 8px;
}

/* Status column — centred badge, fixed width */
#adminModulesTable td:nth-child(4),
#adminModulesTable th:nth-child(4) {
  width: 110px;
  text-align: center;
}

/* Actions column — buttons in a row with gap, no wrapping */
#adminModulesTable .admin-quotes-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 200px;
}

#adminModulesTable .admin-documents-btn-sm {
  margin-right: 0;
}

/* Shared table-wrap for modules */
.admin-modules-page .admin-documents-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}

/* ============================================================================
   ALL QUOTES TABLE — same format treatment as Modules table
   ============================================================================ */

#adminQuotesTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

#adminQuotesTable th,
#adminQuotesTable td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-faint);
  vertical-align: middle;
}

#adminQuotesTable th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  background: #fbfcfd;
  white-space: nowrap;
}

#adminQuotesTable tbody tr:last-child td {
  border-bottom: none;
}

#adminQuotesTable tbody tr:hover {
  background: #f8fbff;
}

/* Quote text column — grows to fill available space */
#adminQuotesTable .admin-quotes-text-cell {
  max-width: 480px;
  white-space: normal;
  word-break: break-word;
  line-height: var(--line-height-relaxed);
}

/* Author column */
#adminQuotesTable td:nth-child(2) {
  min-width: 120px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Status column — centred, fixed width */
#adminQuotesTable td:nth-child(3),
#adminQuotesTable th:nth-child(3) {
  width: 110px;
  text-align: center;
}

/* Actions column — flex row, no wrap */
#adminQuotesTable .admin-quotes-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#adminQuotesTable .admin-documents-btn-sm {
  margin-right: 0;
}

.admin-quotes-page .admin-documents-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}

.admin-tickets-page .admin-documents-table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}

/* ============================================================================
   MODULE COLOR THEMES — --module-color variable + swatch picker
   Lives in admin.css so it loads on admin pages independently of home.css.
   The --module-color variable drives the table preview border/icon colour.
   Swatch buttons (.admin-module-theme-swatch) keep a solid filled background
   so the colour picker remains clearly legible.
   ============================================================================ */

.home-module--blue   { --module-color: #00b5ef; }
.home-module--purple { --module-color: #7c4dff; }
.home-module--green  { --module-color: #00c853; }
.home-module--teal   { --module-color: #00bcd4; }
.home-module--amber  { --module-color: #f59e0b; }
.home-module--rose   { --module-color: #f50057; }
.home-module--orange { --module-color: #ff6d00; }
.home-module--slate  { --module-color: #546e7a; }

.admin-module-theme-btn.home-module--blue   .admin-module-theme-swatch { background: #00b5ef; }
.admin-module-theme-btn.home-module--purple .admin-module-theme-swatch { background: #7c4dff; }
.admin-module-theme-btn.home-module--green  .admin-module-theme-swatch { background: #00c853; }
.admin-module-theme-btn.home-module--teal   .admin-module-theme-swatch { background: #00bcd4; }
.admin-module-theme-btn.home-module--amber  .admin-module-theme-swatch { background: #f59e0b; }
.admin-module-theme-btn.home-module--rose   .admin-module-theme-swatch { background: #f50057; }
.admin-module-theme-btn.home-module--orange .admin-module-theme-swatch { background: #ff6d00; }
.admin-module-theme-btn.home-module--slate  .admin-module-theme-swatch { background: #546e7a; }

/* ============================================================================
   SECTIONS TABLE (#adminSectionsTable)
   ============================================================================ */

#adminSectionsTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

#adminSectionsTable th,
#adminSectionsTable td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-faint);
  vertical-align: middle;
}

#adminSectionsTable th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  background: #fbfcfd;
  white-space: nowrap;
}

#adminSectionsTable tbody tr:last-child td { border-bottom: none; }
#adminSectionsTable tbody tr:hover { background: #f8fbff; }

#adminSectionsTable td:nth-child(3),
#adminSectionsTable th:nth-child(3) { width: 110px; }

#adminSectionsTable td:nth-child(5),
#adminSectionsTable th:nth-child(5) { width: 90px; text-align: center; }

#adminSectionsTable td:nth-child(6),
#adminSectionsTable th:nth-child(6) { width: 90px; text-align: center; }

#adminSectionsTable .admin-quotes-actions-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#adminSectionsTable .admin-documents-btn-sm    { margin-right: 0; }

.admin-section-admin-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.admin-section-admin-label input { width: 15px; height: 15px; }

.access-template-label {
  font-family: monospace;
  font-size: var(--font-size-xs);
  background: var(--light-mode-bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text-muted);
}

.access-badge--admin  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.access-badge--member { background: rgba(0,181,239,.09); border-color: rgba(0,181,239,.28); color: #165f87; }

/* ============================================================================
   ROLE ACCESS TAB
   ============================================================================ */

.access-control-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.access-control-sidebar {
  border-radius: var(--radius-lg);
  position: sticky;
  top: calc(var(--internal-topbar-height) + var(--spacing-md));
}

.access-control-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.access-control-placeholder {
  padding: var(--spacing-2xl);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  font-style: italic;
}

.access-module-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.access-module-btn {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-main);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.access-module-btn:hover { background: var(--light-mode-bg); border-color: var(--line-soft); }
.access-module-btn.is-active { background: rgba(0,181,239,.08); border-color: rgba(0,181,239,.3); color: var(--main); }

.access-rule-panel { border-radius: var(--radius-lg); }

.access-rule-header { margin-bottom: var(--spacing-md); }

.access-roles-hint {
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(235,170,39,.08);
  border: 1px solid rgba(235,170,39,.25);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: #7d5300;
  margin-bottom: var(--spacing-lg);
}
.access-roles-hint p { margin: 0; }

.access-role-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.access-role-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--text-main);
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--transition-fast);
}
.access-role-check:hover { border-color: var(--main); }
.access-role-check input { width: 15px; height: 15px; accent-color: var(--main); }

.access-role-check--sm {
  padding: 5px 10px;
  font-size: var(--font-size-xs);
}

.access-section-hint {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-muted);
  margin-left: 8px;
}

.access-section-override {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--line-faint);
}
.access-section-override:last-child { border-bottom: none; }

.access-section-override-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.access-section-override-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
}

.access-section-override-url {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: monospace;
}

.access-section-save-btn { margin-left: auto; }

.access-section-feedback {
  font-size: var(--font-size-xs);
  min-width: 60px;
}

.access-section-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.access-section-inherit-note {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

@media (max-width: 860px) {
  .access-control-layout { grid-template-columns: 1fr; }
  .access-control-sidebar { position: static; }
}


/* ── Autocomplete select ─────────────────────────────────────────────────────
   Used by autocomplete.js (global). Wraps any select[data-autocomplete].   */
.ac-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.ac-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line-soft, #e7e7ea);
  border-radius: var(--radius-md, 12px);
  font-size: var(--font-size-sm, 0.875rem);
  background: #fff;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
}

.ac-input:focus {
  outline: 2px solid var(--main, #0ea5e9);
  outline-offset: 1px;
  border-color: var(--main, #0ea5e9);
}

.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line-soft, #e7e7ea);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  z-index: 300;
  max-height: 220px;
  overflow-y: auto;
}

.ac-option {
  padding: 8px 14px;
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  color: var(--text-base, #1a1a2e);
}

.ac-option:hover,
.ac-option.ac-active {
  background: var(--surface-hover, #f3f7ff);
}

.ac-no-results {
  color: var(--text-muted, #7c7779);
  cursor: default;
  font-style: italic;
}

.ac-disabled {
  color: var(--text-muted, #7c7779);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Pagination (global) ─────────────────────────────────────────────────────
   Used by AquaPagination.render() in pagination.js.                         */
.aqua-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 4px 4px;
}

.aqua-pager-info {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-muted, #7c7779);
}

.aqua-pager-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.aqua-pager-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-soft, #e7e7ea);
  border-radius: var(--radius-md, 8px);
  background: #fff;
  color: var(--text-base, #1a1a2e);
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.aqua-pager-btn:hover:not(:disabled):not(.is-active) {
  background: var(--surface-hover, #f3f7ff);
  border-color: #b8c8db;
}

.aqua-pager-btn.is-active {
  background: var(--main, #1b6fc8);
  border-color: var(--main, #1b6fc8);
  color: #fff;
  cursor: default;
}

.aqua-pager-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.aqua-pager-ellipsis {
  padding: 0 6px;
  color: var(--text-muted, #7c7779);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 32px;
}

/* ============================================================================
   STATUS BADGES (PTO + Team Schedule)
   ============================================================================ */

.pto-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pto-badge--pending {
  background: #fef3c7;
  color: #92400e;
}

.pto-badge--approved {
  background: #d1fae5;
  color: #065f46;
}

.pto-badge--denied {
  background: #fee2e2;
  color: #991b1b;
}

.pto-badge--cancelled {
  background: #f1f5f9;
  color: #64748b;
}

/* ============================================================================
   TEAM SCHEDULE — MANAGE SUPERVISORS PANEL
   ============================================================================ */

.schedule-supervisors-list {
  display: flex;
  flex-direction: column;
}

.schedule-supervisors-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-faint);
  flex-wrap: wrap;
}

.schedule-supervisors-row:last-child {
  border-bottom: none;
}

.schedule-supervisors-row-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 240px;
}

.schedule-supervisors-dept-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  min-width: 180px;
}

.schedule-supervisors-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-supervisors-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: #f3f5f8;
  color: #3f4a5c;
  border: 1px solid #cfd6e0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.schedule-supervisors-badge-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  opacity: 0.65;
}

.schedule-supervisors-badge-remove:hover {
  opacity: 1;
  background: rgba(63, 74, 92, 0.14);
}

.schedule-supervisors-empty {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

.schedule-supervisors-row-add {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.schedule-supervisors-row-add select {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  font-family: inherit;
  min-width: 180px;
  background: var(--surface);
}

.schedule-day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.schedule-day-chip {
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-main);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.schedule-day-chip:hover {
  background: #f6f8fb;
  border-color: #c0c8d4;
}

.schedule-day-chip.is-active {
  background: var(--main);
  border-color: var(--main);
  color: #fff;
}