/* ==========================================================================
   Admin panel — built on the same design tokens as public/css/style.css
   (--navy-*, --blue-*, --orange-*, --ink*, --surface*, --r-*, --shadow-*,
   --font-head/--font-body). This file only adds admin-specific layout and
   components; it never redefines the shared tokens.
   ========================================================================== */

:root {
  --admin-sidebar-w: 268px;
  --admin-topbar-h: 68px;
}

html, body { background: var(--surface-2); }

/* ---------- Auth pages (login / forgot / reset) ---------- */
/* Full-page background photo (set inline via style="background-image:...") with the
   brand gradient overlay and content (copy + form card) floating on top of it. */
.admin-auth {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 40px;
}
.admin-auth::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(7,30,66,.92), rgba(11,42,91,.82) 45%, rgba(26,111,212,.68));
}
.admin-auth::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 12% 8%, rgba(246,130,31,.24), transparent 45%);
}

.admin-auth__brand-mark {
  position: absolute; top: 32px; left: clamp(24px, 4vw, 56px); z-index: 2;
  display: flex; align-items: center; gap: 12px;
}
.admin-auth__brand-mark img { width: 46px; height: 46px; border-radius: var(--r-sm); background: #fff; padding: 4px; }
.admin-auth__brand-mark b { display: block; font-family: var(--font-head); font-size: 1.05rem; color: #fff; }
.admin-auth__brand-mark span { font-size: .74rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .08em; }

.admin-auth__wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 1080px;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
}

.admin-auth__copy { flex: 1 1 420px; color: #fff; max-width: 460px; }
.admin-auth__copy h2 {
  font-family: var(--font-head); font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.25;
  color: #fff; margin-bottom: 16px;
}
.admin-auth__copy p { color: rgba(255,255,255,.8); font-size: .98rem; margin-bottom: 28px; line-height: 1.65; }

.admin-auth__points { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.admin-auth__points li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: #fff; font-weight: 500; }
.admin-auth__points svg { width: 20px; height: 20px; flex: none; color: var(--orange-300); }

.admin-auth__badges { display: flex; gap: 14px; flex-wrap: wrap; }
.admin-auth__badge {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill);
  padding: 9px 16px 9px 10px; backdrop-filter: blur(6px);
}
.admin-auth__badge img { width: 26px; height: 26px; }
.admin-auth__badge span { font-size: .78rem; font-weight: 600; color: #fff; }

/* Form card, floating on top of the same background */
.admin-auth__card {
  flex: 0 1 400px; width: 100%; max-width: 400px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  padding: 38px 34px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.admin-auth__card h1 { font-size: 1.5rem; margin-bottom: 8px; color: var(--ink); }
.admin-auth__card p.lead { color: var(--muted); font-size: .92rem; margin-bottom: 28px; }
.admin-auth__foot { margin-top: 22px; text-align: center; font-size: .85rem; color: var(--muted); }
.admin-auth__foot a { color: var(--blue-600); font-weight: 600; }

@media (max-width: 980px) {
  .admin-auth__wrap { justify-content: center; }
  .admin-auth__copy { text-align: center; max-width: 560px; }
  .admin-auth__points { justify-items: center; }
  .admin-auth__points li { justify-content: center; }
  .admin-auth__badges { justify-content: center; }
}
@media (max-width: 640px) {
  .admin-auth { padding: 90px 16px 32px; }
  .admin-auth__copy { display: none; }
  .admin-auth__card { padding: 30px 24px; }
}

.alert {
  border-radius: var(--r-sm); padding: 12px 16px; font-size: .87rem; margin-bottom: 18px;
}
.alert--error { background: #fdecec; color: #b42318; border: 1px solid #f3c6c4; }
.alert--success { background: #e9f9ef; color: #12794f; border: 1px solid #bfe9d1; }

/* ---------- Shell layout ---------- */
.admin-shell { display: flex; min-height: 100vh; }

/* Fixed (not sticky) on purpose: a sticky sidebar's "stuck" box is computed
   from its position in normal document flow, which broke as soon as the
   sidebar's own content could out-grow 100vh — it started scrolling away
   with the page instead of staying put. Fixed positioning removes it from
   flow entirely, so it always stays pinned to the viewport regardless of
   how tall the main content or the nav list gets. .admin-main below carries
   a matching margin-left so content starts right after it. */
.admin-sidebar {
  width: var(--admin-sidebar-w);
  background: var(--navy-900); color: rgba(255,255,255,.82);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh; overflow: hidden;
  transition: transform .3s var(--ease);
  z-index: 50;
}
.admin-sidebar__brand {
  display: flex; align-items: center; gap: 12px; padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08); flex: none;
}
.admin-sidebar__brand img { width: 38px; height: 38px; border-radius: var(--r-sm); }
.admin-sidebar__brand b { color: #fff; font-family: var(--font-head); font-size: .98rem; display: block; }
.admin-sidebar__brand span { font-size: .72rem; color: rgba(255,255,255,.55); }

/* Only the nav list scrolls — brand header and user footer stay pinned in
   place, so navigating never leaves you back at the top of a long menu.
   min-height:0 overrides the flex default (min-height:auto), which would
   otherwise refuse to shrink this below its full content height and defeat
   overflow-y:auto entirely — a classic flex-column scrolling gotcha. */
.admin-nav { padding: 14px 12px 28px; flex: 1; min-height: 0; overflow-y: auto; }

.admin-sidebar__footer {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
.admin-sidebar__user { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.admin-sidebar__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--grad-blue); color: #fff; font-family: var(--font-head); font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.admin-sidebar__user-info { min-width: 0; }
.admin-sidebar__user-info b { display: block; font-size: .84rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-sidebar__user-info span { font-size: .72rem; color: rgba(255,255,255,.55); }
.admin-sidebar__logout-form { flex: none; }
.admin-sidebar__logout {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.15);
  background: transparent; color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.admin-sidebar__logout svg { width: 16px; height: 16px; }
.admin-sidebar__logout:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.admin-nav__group { margin-bottom: 6px; }
.admin-nav__group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; color: rgba(255,255,255,.5);
  font-family: var(--font-head); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 12px 6px; cursor: pointer;
}
.admin-nav__group-toggle svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.admin-nav__group.is-collapsed .admin-nav__group-toggle svg { transform: rotate(-90deg); }
.admin-nav__group.is-collapsed .admin-nav__group-list { display: none; }
.admin-nav__group-list { display: flex; flex-direction: column; gap: 2px; }

.admin-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: rgba(255,255,255,.78); font-size: .9rem; font-weight: 500;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.admin-nav__link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.admin-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav__link.is-active { background: var(--grad-blue); color: #fff; box-shadow: var(--shadow-sm); }

.admin-sidebar__backdrop {
  display: none; position: fixed; inset: 0; background: rgba(7,30,66,.55); z-index: 40;
}

/* ---------- Main column ---------- */
.admin-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  margin-left: var(--admin-sidebar-w); width: calc(100% - var(--admin-sidebar-w));
}

.admin-topbar {
  height: var(--admin-topbar-h); flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.admin-topbar__toggle {
  display: none; background: none; border: none; cursor: pointer; color: var(--ink);
  width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: var(--r-sm);
}
.admin-topbar__toggle:hover { background: var(--surface-2); }
.admin-topbar__toggle svg { width: 22px; height: 22px; }
.admin-topbar__title { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.admin-topbar__right { display: flex; align-items: center; gap: 16px; }
.admin-topbar__user {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: var(--r-sm);
  font-family: inherit; text-align: left; transition: background-color .2s var(--ease);
}
.admin-topbar__user:hover { background: var(--surface-2); }
.admin-topbar__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--grad-blue); color: #fff;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  flex: none;
}
.admin-topbar__user b { display: block; font-size: .85rem; color: var(--ink); }
.admin-topbar__user span { font-size: .74rem; color: var(--muted); }

/* ---------- User account dropdown ---------- */
.admin-user-menu { position: relative; }
.admin-user-menu__chevron { width: 14px; height: 14px; color: var(--muted); transition: transform .2s var(--ease); flex: none; }
.admin-user-menu.is-open .admin-user-menu__chevron { transform: rotate(180deg); }

.admin-user-menu__panel {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 8px; animation: adminMenuIn .18s var(--ease);
}
.admin-user-menu.is-open .admin-user-menu__panel { display: block; }
@keyframes adminMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.admin-user-menu__head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.admin-user-menu__head b { display: block; font-size: .86rem; color: var(--ink); }
.admin-user-menu__head span { font-size: .74rem; color: var(--muted); word-break: break-all; }

.admin-user-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-sm); border: none; background: none;
  font-size: .86rem; font-weight: 500; color: var(--ink-soft); text-align: left; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.admin-user-menu__item svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.admin-user-menu__item:hover { background: var(--blue-50); color: var(--blue-600); }
.admin-user-menu__item--danger:hover { background: #fdecec; color: #b42318; }
.admin-user-menu__divider { height: 1px; background: var(--line); margin: 6px 4px; }
.admin-topbar__logout {
  background: none; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px; transition: all .2s var(--ease);
}
.admin-topbar__logout:hover { border-color: var(--blue-500); color: var(--blue-600); }

.admin-content { padding: 28px 24px 40px; flex: 1; }

.admin-footer {
  flex: none; padding: 16px 24px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted);
}
.admin-footer__meta { color: var(--muted); }

.admin-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
.admin-breadcrumbs a { color: var(--blue-600); font-weight: 600; }
.admin-breadcrumbs span.sep { opacity: .5; }

/* ---------- Dashboard stat cards ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 28px; }
.admin-stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-xs); display: flex; align-items: center; gap: 16px;
}
.admin-stat-card__icon {
  width: 50px; height: 50px; border-radius: var(--r-md); flex: none;
  background: var(--blue-100); color: var(--blue-600); display: grid; place-items: center;
}
.admin-stat-card__icon svg { width: 24px; height: 24px; }
.admin-stat-card__icon--orange { background: #fff1e2; color: var(--orange-600); }
.admin-stat-card b { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--ink); line-height: 1.1; }
.admin-stat-card span { font-size: .82rem; color: var(--muted); }

.admin-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; box-shadow: var(--shadow-xs); margin-bottom: 24px;
}
.admin-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.admin-panel__head h2 { font-size: 1.05rem; color: var(--ink); }

/* ---------- Tables ---------- */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th {
  text-align: left; font-family: var(--font-head); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle; }
.admin-table tr:hover td { background: var(--surface-2); }
.admin-table__empty { text-align: center; padding: 40px 12px; color: var(--muted); }

.admin-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.admin-badge--green { background: #e9f9ef; color: #12794f; }
.admin-badge--red { background: #fdecec; color: #b42318; }
.admin-badge--gray { background: var(--surface-3); color: var(--muted); }
.admin-badge--blue { background: var(--blue-100); color: var(--blue-600); }
.admin-badge--orange { background: #fef2e7; color: var(--orange-600); }

.admin-row-actions { display: flex; gap: 8px; align-items: center; }
.admin-icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); color: var(--ink-soft); transition: all .2s var(--ease); background: #fff;
}
.admin-icon-btn svg { width: 16px; height: 16px; }
.admin-icon-btn:hover { border-color: var(--blue-500); color: var(--blue-600); }
.admin-icon-btn--danger:hover { border-color: #f3c6c4; color: #b42318; background: #fdecec; }

/* ---------- Toasts ---------- */
.admin-toasts { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.admin-toast {
  background: var(--surface); border-left: 4px solid var(--blue-600); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: 14px 18px; font-size: .87rem; color: var(--ink); min-width: 260px;
  animation: adminToastIn .3s var(--ease);
}
.admin-toast--success { border-color: #12794f; }
.admin-toast--error { border-color: #b42318; }
@keyframes adminToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Modal / confirm-delete (reuses .modal from style.css) ---------- */
.admin-modal .modal__panel { width: min(420px, 100%); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* Sidebar is fixed at every width now; on mobile it also starts off-canvas
     (slides in via .is-open) and the main column no longer reserves space
     for it since it overlays instead of pushing content. */
  .admin-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-sidebar__backdrop.is-open { display: block; }
  .admin-main { margin-left: 0; width: 100%; }
  .admin-topbar__toggle { display: inline-flex; }
  .admin-topbar__user span, .admin-topbar__user b { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 560px) {
  .admin-content { padding: 20px 14px 48px; }
  .admin-topbar { padding: 0 14px; }
  .admin-topbar__user span { display: none; }
}