/* Admin theme — minimal black-on-white admin UI for /admin.
   This is the ONLY file to edit when re-theming. ERB templates never
   reference a colour or radius directly; they go through these CSS
   vars and the semantic classes defined below. Adapted from the
   `00_admin_ui_foundation` module in the Rails-modules library. */

:root {
  /* ── Fonts ─────────────────────────────────────────────────────────── */
  --admin-font-sans:    "Inter", system-ui, sans-serif;
  --admin-font-display: "Inter", system-ui, sans-serif;
  --admin-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Text ──────────────────────────────────────────────────────────── */
  --admin-text-primary:   #18181A;
  --admin-text-secondary: #18181A99;
  --admin-text-muted:     #A0A0B8;
  --admin-text-danger:    #B83232;

  /* ── Backgrounds ───────────────────────────────────────────────────── */
  --admin-bg:             #FFFFFF;
  --admin-surface:        #FAFAFA;
  --admin-surface-brand:  #F2F2FA;
  --admin-sidebar-bg:     #FFFFFF;

  /* ── Borders ───────────────────────────────────────────────────────── */
  --admin-border:         rgba(0, 0, 0, 0.07);
  --admin-border-input:   rgba(0, 0, 0, 0.12);
  --admin-border-row:     rgba(0, 0, 0, 0.05);

  /* ── Accent ────────────────────────────────────────────────────────── */
  --admin-accent:         #18181A;
  --admin-accent-hover:   #333333;
  --admin-accent-text:    #FFFFFF;

  /* ── Danger ────────────────────────────────────────────────────────── */
  --admin-danger-bg:      rgba(184, 50, 50, 0.06);

  /* ── Sizing ─────────────────────────────────────────────────────────── */
  --admin-sidebar-width:  200px;
  --admin-topbar-height:  52px;
  --admin-radius-sm:      6px;
  --admin-radius-md:      8px;
  --admin-radius-lg:      12px;

  /* ── Logo ──────────────────────────────────────────────────────────── */
  --admin-logo-bg:        #18181A;
  --admin-logo-text:      #FFFFFF;
  --admin-logo-label:     #18181A;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.admin-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--admin-accent-text);
  background: var(--admin-accent);
  border-radius: var(--admin-radius-sm);
  transition: background 0.15s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.admin-btn-primary:hover { background: var(--admin-accent-hover); }

.admin-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--admin-text-secondary);
  background: transparent;
  border-radius: var(--admin-radius-sm);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.admin-btn-ghost:hover {
  color: var(--admin-text-primary);
  background: rgba(0,0,0,0.04);
}

/* ── Form inputs ─────────────────────────────────────────────────────── */
.admin-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--admin-text-primary);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border-input);
  border-radius: var(--admin-radius-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--admin-font-sans);
}
.admin-input:focus {
  border-color: color-mix(in srgb, var(--admin-accent) 30%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent) 8%, transparent);
}
.admin-input::placeholder { color: var(--admin-text-muted); }

.admin-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text-primary);
}

.admin-hint {
  font-size: 12px;
  color: var(--admin-text-muted);
}

/* ── Nav links ───────────────────────────────────────────────────────── */
.admin-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--admin-radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--admin-text-secondary);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--admin-font-sans);
}
.admin-nav-link:hover {
  color: var(--admin-text-primary);
  background: rgba(0,0,0,0.04);
}
.admin-nav-link.active {
  color: var(--admin-text-primary);
  background: color-mix(in srgb, var(--admin-accent) 8%, transparent);
}

/* ── Flash ───────────────────────────────────────────────────────────── */
.admin-flash-notice {
  padding: 10px 24px;
  font-size: 13px;
  color: #1a4731;
  background: #d1fae5;
  border-bottom: 1px solid #a7f3d0;
}
.admin-flash-alert {
  padding: 10px 24px;
  font-size: 13px;
  color: var(--admin-text-danger);
  background: var(--admin-danger-bg);
  border-bottom: 1px solid rgba(184, 50, 50, 0.15);
}

/* ── Error block ─────────────────────────────────────────────────────── */
.admin-errors {
  padding: 12px 16px;
  border-radius: var(--admin-radius-md);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  font-size: 13px;
  color: var(--admin-text-danger);
}

/* ── Status tabs (for the index page filter bar) ─────────────────────── */
.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-bg);
  overflow-x: auto;
}
.admin-tab {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 13px; font-weight: 500;
  color: var(--admin-text-muted);
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.admin-tab:hover { color: var(--admin-text-secondary); }
.admin-tab.active {
  color: var(--admin-text-primary);
  background: color-mix(in srgb, var(--admin-accent) 8%, transparent);
}

/* ── Status pill (table cells) ───────────────────────────────────────── */
.admin-status-select {
  font-family: var(--admin-font-sans);
  font-size: 12px; font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: var(--admin-surface);
  color: var(--admin-text-primary);
}
.admin-status-active    { background: #DCFCE7; color: #166534; }
.admin-status-suspended { background: #FEF3C7; color: #92400E; }
.admin-status-banned    { background: #FECACA; color: #991B1B; }

/* ── Table ───────────────────────────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--admin-font-sans);
  font-size: 14px;
  color: var(--admin-text-primary);
}
.admin-table th, .admin-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--admin-border-row);
  vertical-align: middle;
}
.admin-table thead th {
  background: var(--admin-surface);
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--admin-border-row);
}
.admin-table tbody tr:hover {
  background: var(--admin-surface);
}
.admin-table .text-muted { color: var(--admin-text-muted); font-size: 13px; }

/* ── Admin scope: force Inter on the whole /admin tree even though the
   public site uses Schoolbell/Caveat. Public pages keep their styles —
   .admin-shell is set on the body when layouts/admin is rendered. ─── */
body.admin-shell,
body.admin-shell * {
  font-family: var(--admin-font-sans);
}