/* Scholar Ghana Administrator Portal.
   Reuses design tokens from variables.css and form/alert/button classes from
   components.css/accounts.css, plus card/table/tabs/stat-tile/empty-state
   primitives from dashboard.css (now linked as a base stylesheet by
   layouts/admin.php, not a per-controller extra - see that file). Only the
   admin-specific shell (sidebar/topbar/drawer) and data-grid chrome
   (toolbar/bulk bar/responsive table) live here.

   Two distinct layouts share this file:
   1. Unauthenticated pages (login, landing, forgot/reset password) - a
      simple centered card, unchanged from before this redesign.
   2. The authenticated shell (sidebar + topbar + content) - new. */

/* ---------------------------------------------------------------------- */
/* 1. Unauthenticated centered-card layout (unchanged)                     */
/* ---------------------------------------------------------------------- */

.admin-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  font-family: var(--font-family-base);
  color: var(--color-charcoal);
}

.admin-header {
  background-color: var(--color-green-900);
  color: var(--color-white);
}

.admin-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.admin-header__brand {
  font-weight: 700;
  font-size: var(--font-size-md);
  color: var(--color-white);
}

.admin-header__brand-accent {
  color: var(--color-gold-400);
}

.admin-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding-block: var(--space-16);
}

.admin-main .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.auth-card--wide {
  max-width: 34rem;
}

.admin-footer {
  padding-block: var(--space-6);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 32rem) {
  .admin-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ---------------------------------------------------------------------- */
/* 2. Authenticated shell: sidebar + topbar + content                      */
/* ---------------------------------------------------------------------- */

.admin-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-surface);
}

.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: rgba(5, 46, 31, 0.45);
}

.admin-sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  width: min(20rem, 85vw);
  padding: var(--space-5) var(--space-3);
  background-color: var(--color-green-900);
  color: var(--color-white);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transition: width var(--transition-base);
}

.admin-sidebar[hidden] {
  display: none;
}

.admin-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-inline: var(--space-2);
}

.admin-nav {
  flex: 1;
}

.admin-nav__group + .admin-nav__group {
  margin-top: var(--space-4);
}

.admin-nav__group-title {
  padding: var(--space-2) var(--space-3);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.admin-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.admin-nav__icon {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
}

.admin-nav__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

.admin-nav__link--active {
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}

.admin-nav__link--active .admin-nav__icon {
  color: var(--color-gold-400);
}

.admin-sidebar__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-nav__link--logout {
  color: rgba(255, 255, 255, 0.65);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

/* Desktop icon-only rail (collapse toggle) - meaningless on mobile, where
   the drawer is either fully open or fully hidden, so this only applies
   inside the >=1024px block below. */
.admin-sidebar--collapsed .admin-nav__label,
.admin-sidebar--collapsed .admin-nav__group-title,
.admin-sidebar--collapsed .admin-sidebar__header .logo__text {
  display: none;
}

.admin-sidebar--collapsed .admin-nav__link {
  justify-content: center;
}

.admin-main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------- */
/* Topbar                                                                  */
/* ---------------------------------------------------------------------- */

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border);
}

:root[data-theme="dark"] .admin-topbar {
  background-color: rgba(11, 19, 16, 0.97);
}

.admin-topbar__drawer-toggle,
.admin-topbar__rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--color-charcoal);
}

.admin-topbar__drawer-toggle:hover,
.admin-topbar__rail-toggle:hover {
  background-color: var(--color-gray-100);
}

.admin-topbar__rail-toggle {
  display: none;
}

.admin-topbar__breadcrumb {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  overflow: hidden;
}

.admin-topbar__breadcrumb-crumb {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.admin-topbar__title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.admin-topbar__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-charcoal);
  background: none;
  border: none;
  cursor: pointer;
}

.admin-topbar__icon-btn:hover {
  background-color: var(--color-gray-100);
}

.admin-notification-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: 0.2rem;
  border-radius: var(--radius-full);
  background-color: var(--color-red-600);
  color: var(--color-white);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.admin-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: var(--color-green-700);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

/* Shared <details>-based dropdown wrapper for both the notification bell
   and the profile menu. */
.admin-topbar-menu {
  position: relative;
}

.admin-topbar-menu__trigger {
  list-style: none;
  cursor: pointer;
}

.admin-topbar-menu__trigger::-webkit-details-marker {
  display: none;
}

.admin-topbar-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.admin-topbar-menu__panel--wide {
  width: 24rem;
}

.admin-user-menu__name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-charcoal);
}

.admin-user-menu__email {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  word-break: break-all;
}

.admin-user-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-charcoal);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.admin-user-menu__link:hover {
  background-color: var(--color-gray-50);
}

.admin-user-menu__link--danger {
  color: var(--color-red-600);
}

.admin-notification-panel__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.admin-notification-panel__loading,
.admin-notification-panel__error,
.admin-notification-panel__empty {
  padding: var(--space-4) 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Command palette (search stub)                                          */
/* ---------------------------------------------------------------------- */

dialog[data-command-palette] {
  width: min(34rem, 92vw);
  margin-top: 10vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: var(--color-card);
}

dialog[data-command-palette]::backdrop {
  background-color: rgba(5, 46, 31, 0.5);
}

.admin-command-palette__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.admin-command-palette__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size-base);
  background: none;
  color: var(--color-charcoal);
}

.admin-command-palette__hint {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* ---------------------------------------------------------------------- */
/* Content area                                                            */
/* ---------------------------------------------------------------------- */

.admin-content {
  flex: 1;
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-16);
}

/* ---------------------------------------------------------------------- */
/* Data-grid toolbar + bulk-action bar (reusable across every list page)   */
/* ---------------------------------------------------------------------- */

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-toolbar__search {
  flex: 1;
  min-width: 12rem;
}

.admin-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-bulk-bar {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-2));
  z-index: var(--z-dropdown);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background-color: var(--color-green-900);
  color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.admin-bulk-bar__count {
  font-weight: 700;
}

.admin-bulk-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

/* ---------------------------------------------------------------------- */
/* Responsive data table -> card view (<768px)                             */
/* Pure CSS: reuses .dashboard-table markup unchanged, plus a data-label   */
/* attribute per <td> rendered server-side.                                */
/* ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  .dashboard-table--responsive-cards,
  .dashboard-table--responsive-cards thead,
  .dashboard-table--responsive-cards tbody,
  .dashboard-table--responsive-cards tr,
  .dashboard-table--responsive-cards td {
    display: block;
    width: 100%;
  }

  .dashboard-table--responsive-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .dashboard-table--responsive-cards tr {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .dashboard-table--responsive-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--color-border);
    text-align: right;
  }

  .dashboard-table--responsive-cards td:last-child {
    border-bottom: none;
  }

  .dashboard-table--responsive-cards td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    text-align: left;
  }
}

/* ---------------------------------------------------------------------- */
/* KPI grid (admin dashboard)                                              */
/* ---------------------------------------------------------------------- */

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.admin-alert-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-gold-100);
  color: var(--color-gold-600);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Responsive breakpoints                                                  */
/* ---------------------------------------------------------------------- */

@media (min-width: 480px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 640px) {
  .admin-content {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Desktop/tablet: the sidebar becomes a permanent, sticky column instead of
   a slide-out drawer; the hamburger disappears in favor of the collapse
   rail toggle. */
@media (min-width: 1024px) {
  .admin-drawer-overlay {
    display: none;
  }

  .admin-sidebar,
  .admin-sidebar[hidden] {
    display: flex;
    position: sticky;
    top: 0;
    left: auto;
    inset-block: auto;
    height: 100vh;
    width: var(--sidebar-width);
    box-shadow: none;
    z-index: var(--z-sidebar);
  }

  .admin-sidebar--collapsed {
    width: var(--sidebar-width-collapsed);
  }

  .admin-topbar__drawer-toggle {
    display: none;
  }

  .admin-topbar__rail-toggle {
    display: inline-flex;
  }

  .admin-content {
    padding: var(--space-8) var(--space-8) var(--space-16);
  }
}

/* ---------------------------------------------------------------------- */
/* Rich text field (Careers job-posting form)                              */
/* ---------------------------------------------------------------------- */

.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

.rich-text-toolbar__btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-gray-50);
  color: var(--color-charcoal);
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
}

.rich-text-toolbar__btn:hover {
  background-color: var(--color-gray-100);
}

.rich-text-editable {
  min-height: 8rem;
  padding: var(--space-3);
  overflow-y: auto;
  cursor: text;
}

.rich-text-editable:focus {
  outline: 2px solid var(--color-gold-500);
  outline-offset: -1px;
}

.rich-text-editable h2 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: var(--space-2) 0;
}

.rich-text-editable h3 {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin: var(--space-2) 0;
}

.rich-text-editable ul,
.rich-text-editable ol {
  padding-left: var(--space-6);
  margin: var(--space-2) 0;
}

.rich-text-editable a {
  color: var(--color-green-700);
  text-decoration: underline;
}