/* CumuloReserve — superuser settings panel (specs/VALIDATION-GENERALIZATION-v1.md § Admin UI).
   Desktop-first, same shell pattern as registry.css, theme is style.css's :root tokens verbatim. */

/* Same defensive override registry.css uses — style.css's .field-input sets display:block, which
   would otherwise beat a plain [hidden] attribute on an element that also carries that class. */
[hidden] { display: none !important; }

.settings-shell {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-5);
}

.settings-auth-gate {
  max-width: 480px;
  margin: var(--space-6) auto;
  text-align: center;
}
.settings-auth-gate p { margin-bottom: var(--space-4); }

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.settings-header__actions { display: flex; align-items: flex-end; gap: var(--space-3); }
.settings-header__actions #settingsPropertySelect { min-width: 220px; margin-bottom: 0; }

/* Tabs */
.settings-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.settings-tab {
  font: inherit;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
}
.settings-tab:hover { color: var(--color-text-primary); }
.settings-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.settings-tab:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }

.settings-panel { max-width: 640px; }
#panelCourts, #panelApprovals, #panelAnalytics { max-width: 100%; }

.settings-panel__toolbar { margin-bottom: var(--space-4); }

.settings-actions { display: flex; gap: var(--space-1); white-space: nowrap; }

/* Courts add/edit modal — day-of-week checkbox grid */
.settings-days-grid {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.settings-days-grid label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Pending Approvals — status pills */
.status-pill {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.status-pill--pending { background: #FEF3C7; color: #92400E; }
.status-pill--approved { background: #DCFCE7; color: #116830; }
.status-pill--rejected { background: #FEE2E2; color: #B91C1C; }

/* Analytics */
.settings-daterange {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.settings-daterange .field-label { margin-bottom: var(--space-1); }
.settings-daterange .field-input { width: auto; margin-bottom: 0; }

.settings-stat-tiles {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.settings-stat-tile {
  flex: 1 1 160px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.settings-stat-tile__value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.settings-stat-tile__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.settings-chart {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  background: #FFFFFF;
}

/* Toast (no undo variant on this page — see settings.js header comment) */
.settings-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  background: var(--color-text-primary);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  font-size: var(--font-size-sm);
  z-index: 20;
}