/* ==========================================================================
   CHSA06 — Admin portal
   Loads AFTER public.css and reuses its design tokens (palette, type, radii,
   shadows) plus its shared primitives (.btn, .field, .alert, .panel …), so the
   dashboard and the public site stay visually in step. Everything here is the
   admin shell: sidebar, topbar, tables, KPI tiles, badges, tabs, toolbars.
   ========================================================================== */

:root {
  --sidebar-bg: #111a14;
  --sidebar-hover: rgba(255, 255, 255, .07);
}

/* ─── Shell ───────────────────────────────────────────────────────────── */
.admin-shell { display: flex; min-height: 100vh; background: var(--background); }

.admin-sidebar {
  width: 256px; flex-shrink: 0; padding: 20px 14px;
  background: var(--sidebar-bg); color: #fff;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.admin-sidebar .brand { padding: 6px 10px 24px; }
.admin-sidebar .brand .crest { background: rgba(200, 150, 42, .2); color: var(--accent); }
.admin-sidebar .brand-name { color: #fff; }
.admin-sidebar .brand-sub { color: rgba(255, 255, 255, .4); }

.admin-sidebar nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.admin-sidebar nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  border-radius: var(--radius); color: rgba(255, 255, 255, .65);
  font-size: .89rem; font-weight: 500; text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.admin-sidebar nav a .icon { width: 1.08em; height: 1.08em; opacity: .8; }
.admin-sidebar nav a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.admin-sidebar nav a.active {
  background: linear-gradient(135deg, #1e4d2b, #2d6a3f); color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(30, 77, 43, .4);
}
.admin-sidebar nav a.active .icon { opacity: 1; }
.admin-sidebar .divider { border-top: 1px solid rgba(255, 255, 255, .08); margin: 12px 10px; }
.admin-sidebar .sidebar-foot {
  padding: 14px 12px 6px; font-family: var(--font-mono); font-size: .68rem;
  color: rgba(255, 255, 255, .3); border-top: 1px solid rgba(255, 255, 255, .07); margin-top: 12px;
}

.admin-main { flex: 1; min-width: 0; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 30px; position: sticky; top: 0; z-index: 20;
  background: rgba(250, 248, 243, .88);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.admin-user { display: flex; align-items: center; gap: 12px; }
.admin-user .avatar-chip {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e4d2b, #2d6a3f); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
}
.admin-nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--foreground); padding: 7px; margin: -7px; border-radius: var(--radius);
}
.admin-nav-toggle .icon { width: 1.4em; height: 1.4em; }
.admin-sidebar-backdrop { display: none; }

.admin-content { padding: 32px; max-width: 1480px; }
.admin-content > h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: .3em; }
.admin-content > p.muted { margin-top: -.2em; }

.admin-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.admin-card > h3:first-child, .admin-card > h2:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .admin-nav-toggle { display: flex; }
  .hide-on-mobile { display: none; }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .24s ease; box-shadow: var(--shadow-xl);
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(17, 26, 20, .5); opacity: 0; pointer-events: none; transition: opacity .24s ease;
  }
  .admin-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .admin-content { padding: 22px 16px; }
  .admin-topbar { padding: 12px 16px; }
}

/* ─── KPI tiles ───────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 30px; }
.kpi-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-tile .kpi-value {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--foreground); line-height: 1; letter-spacing: -.02em;
}
.kpi-tile .kpi-label { font-family: var(--font-mono); font-size: .74rem; color: var(--muted-foreground); margin-top: 8px; }
.kpi-tile .kpi-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 77, 43, .09); color: var(--primary);
}
.kpi-tile .kpi-icon .icon { width: 1.15em; height: 1.15em; }

/* ─── Tables ──────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.admin-table, table.table { width: 100%; border-collapse: collapse; font-size: .89rem; }
table.admin-table th, table.admin-table td,
table.table th, table.table td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--border); }
table.admin-table th, table.table th {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted-foreground); background: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.admin-table th:first-child, table.table th:first-child { border-top-left-radius: var(--radius); }
table.admin-table th:last-child,  table.table th:last-child  { border-top-right-radius: var(--radius); }
table.admin-table tbody tr:hover td, table.table tbody tr:hover td { background: rgba(240, 236, 227, .5); }
table.admin-table tbody tr:last-child td, table.table tbody tr:last-child td { border-bottom: none; }
.text-right { text-align: right; }

/* House-tinted rows in the alumni table */
.admin-table tr.house-crimson td:first-child { box-shadow: inset 3px 0 0 var(--house-crimson-dot); }
.admin-table tr.house-blue    td:first-child { box-shadow: inset 3px 0 0 var(--house-blue-dot); }
.admin-table tr.house-green   td:first-child { box-shadow: inset 3px 0 0 var(--house-green-dot); }
.admin-table tr.house-crimson .house-name, .admin-table tr.house-crimson td:nth-child(2) { color: var(--house-crimson-text); font-weight: 600; }
.admin-table tr.house-blue    .house-name, .admin-table tr.house-blue    td:nth-child(2) { color: var(--house-blue-text); font-weight: 600; }
.admin-table tr.house-green   .house-name, .admin-table tr.house-green   td:nth-child(2) { color: var(--house-green-text); font-weight: 600; }

.photo-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); }

/* ─── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: var(--radius-full); font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; white-space: nowrap;
}
.badge-green { background: var(--house-green-bg);   color: var(--house-green-text);   border: 1px solid rgba(45, 106, 63, .25); }
.badge-amber { background: #fdf6e3;                 color: #8a6414;                   border: 1px solid rgba(200, 150, 42, .3); }
.badge-red   { background: var(--house-crimson-bg); color: var(--house-crimson-text); border: 1px solid rgba(192, 57, 43, .25); }
.badge-gray  { background: var(--muted);            color: var(--muted-foreground);   border: 1px solid var(--border); }

.house-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 500; color: var(--muted-foreground); }
.house-badge .house-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.house-dot.house-crimson { background: var(--house-crimson-dot); }
.house-dot.house-blue    { background: var(--house-blue-dot); }
.house-dot.house-green   { background: var(--house-green-dot); }

/* ─── Tabs / toolbar ──────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; }
.tabs a, .tabs button {
  padding: 11px 18px; font-size: .88rem; font-weight: 500; color: var(--muted-foreground);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
  background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; font-family: inherit;
}
.tabs a:hover, .tabs button:hover { color: var(--foreground); text-decoration: none; }
.tabs a.active, .tabs button.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--accent); }

/* Smaller, card-scoped variant for switching a single field group (e.g. Email vs SMS
   inside one automated-message card) rather than a whole page's content. */
.tabs-sm { border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tabs-sm button { padding: 8px 4px; margin-right: 20px; font-size: .85rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.toolbar-filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.toolbar-filters input, .toolbar-filters select {
  width: auto; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; font-family: var(--font-body); font-size: .88rem; color: var(--foreground);
}
.toolbar-filters input[type=text], .toolbar-filters input[type=email] { min-width: 230px; }
.toolbar-filters input:focus, .toolbar-filters select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 150, 42, .18);
}

/* ─── Media / hero-slide cards ────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--muted); }
.card-body { padding: 16px 18px; overflow-wrap: anywhere; }
.card-body h3 { font-size: 1rem; margin-bottom: 3px; }
.card-body .muted, .card-body .meta { color: var(--muted-foreground); font-size: .84rem; }
.avatar-placeholder {
  width: 100%; aspect-ratio: 4/3; background: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--primary);
}

/* ─── Misc utilities used by admin views ──────────────────────────────── */
.muted { color: var(--muted-foreground); }
.mt-0 { margin-top: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.checkbox-field { display: flex; align-items: center; gap: 10px; }
.checkbox-field input { width: auto; accent-color: var(--primary); }
.checkbox-field label { margin-bottom: 0; }
.btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn-danger:hover { background: #a52a20; color: #fff; }

/* ─── Auth screens (login / password reset) ───────────────────────────── */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(ellipse at 25% 15%, rgba(30, 77, 43, .1), transparent 55%),
              radial-gradient(ellipse at 80% 80%, rgba(200, 150, 42, .12), transparent 55%),
              var(--background);
}
.auth-card {
  width: 100%; max-width: 420px; padding: 42px 38px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
}
.auth-card .brand { justify-content: center; margin-bottom: 26px; }
.auth-card h1 { font-size: 1.7rem; text-align: center; margin-bottom: .2em; }
.auth-card > p { text-align: center; color: var(--muted-foreground); font-size: .92rem; margin-bottom: 28px; }
.auth-card .field:last-of-type { margin-bottom: 24px; }

/* ─── Event story block builder ───────────────────────────────────────── */
.block-row {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 14px; background: var(--muted);
}
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.block-badge {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--primary); background: rgba(30, 77, 43, .1);
  padding: 4px 11px; border-radius: var(--radius-full);
}
.block-actions { display: flex; gap: 6px; }
.block-actions .btn { padding: 6px 11px; }
.block-row .field input, .block-row .field textarea { background: #fff; }

/* ─── In-page confirm dialog (replaces window.confirm) ────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(17, 26, 20, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal-overlay.open { display: flex; animation: modalFade .16s ease both; }
.modal {
  width: 100%; max-width: 580px; padding: 28px;
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); border: 1px solid var(--border);
  animation: modalPop .18s ease both;
  /* A settings-form modal (modal-wide) can easily be taller than the
     viewport -- without a cap + scroll here, it just extends off the top
     and bottom with nothing to reach the clipped parts, unreachable on
     mobile in particular. dvh tracks the real visible viewport; the vh
     line is a fallback for browsers that don't support dvh yet. See the
     .alumni-modal-panel fix in public.css for the original diagnosis of
     this exact bug shape. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal h3 { margin: 0 0 8px; font-size: 1.2rem; }
.modal p { margin: 0 0 22px; color: var(--muted-foreground); font-size: .93rem; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Wider variant for modals holding a real settings form rather than a short
   confirm message -- e.g. the Paystack/SMS "configure" popups. */
.modal-wide { max-width: 1080px; text-align: left; }
.modal-wide p { margin-bottom: 16px; }
.modal-wide .modal-actions { margin-top: 22px; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open, .modal { animation: none; }
}

@media (max-width: 700px) {
  /* Centering a box taller than the viewport is a separate source of
     unreachable overflow above the fold in WebKit, independent of the
     box's own overflow setting -- starting it at the top removes that
     ambiguity (same fix applied to .alumni-modal earlier). */
  .modal-overlay { align-items: flex-start; padding: 14px; }
}

/* ─── Quill email editor extras: emoji picker ─────────────────────────── */
.ql-emoji-btn {
  font-size: 15px; line-height: 1; padding: 3px 5px; background: none;
  border: none; cursor: pointer; border-radius: 4px;
}
.ql-emoji-btn:hover { background: var(--muted); }
.ql-emoji-popover {
  position: absolute; top: 100%; right: 0; z-index: 30; margin-top: 6px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 10px; width: 264px; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.ql-emoji-popover button {
  font-size: 1.15rem; line-height: 1; padding: 6px; background: none;
  border: none; cursor: pointer; border-radius: 6px;
}
.ql-emoji-popover button:hover { background: var(--muted); }

/* ─── Searchable country picker (alumni admin form) ──────────────────────── */
.country-search { position: relative; }
.country-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 4px;
  max-height: 240px; overflow-y: auto; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.country-search-results button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: none;
  background: none; cursor: pointer; border-radius: 6px; font-size: .95rem;
  color: var(--foreground);
}
.country-search-results button:hover,
.country-search-results button.active { background: var(--muted); }
.country-search-empty { padding: 9px 12px; color: var(--muted-foreground); font-size: .9rem; }