/* Shared top-nav styling — used by every authenticated page. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border, hsl(214 32% 91%));
  padding: 0 36px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
.app-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy, hsl(222 47% 11%));
  text-decoration: none;
  letter-spacing: -0.01em;
}
.app-logo:hover { opacity: .9; }
.app-logo span { color: var(--accent, hsl(160 40% 35%)); }
/* The mark IS the shield artwork; no colored container behind it. */
.app-logo .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .12));
}
.app-logo .mark svg { display: block; width: 24px; height: 24px; }
.app-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent, hsl(160 40% 35%));
  color: #fff;
}
.topnav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}
.topnav .nav-link {
  font-size: 12px;
  color: var(--text2, hsl(222 20% 40%));
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.topnav .nav-link:hover {
  color: var(--text, hsl(222 47% 11%));
  border-color: var(--border, hsl(214 32% 91%));
  background: var(--surface, hsl(210 40% 96%));
}
.topnav .nav-link.active {
  color: var(--accent2, hsl(160 45% 28%));
  background: var(--accent-soft, hsl(160 35% 96%));
  border-color: transparent;
  font-weight: 600;
}
.topnav .user-chip {
  font-size: 11px;
  color: var(--text3, hsl(214 20% 60%));
  margin: 0 4px 0 10px;
  font-family: inherit;
  white-space: nowrap;
}
.topnav .user-chip strong { color: var(--accent2, hsl(160 45% 28%)); font-weight: 600; }
.topnav .nav-sep {
  width: 1px;
  height: 18px;
  background: var(--border, hsl(214 32% 91%));
  margin: 0 4px;
}
.topnav .nav-link.signout {
  color: var(--text3, hsl(214 20% 60%));
}
.topnav .nav-link.signout:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: rgba(220, 38, 38, 0.04);
}
/* Old behavior was visibility:hidden until populated, which left the
   header looking broken on first paint. We now paint the primary tabs
   immediately (synchronous in nav.js) and only layer in admin + avatar
   after /auth/me resolves -- so :empty here is essentially never true. */

/* ──────────────── Admin dropdown (super-admin only, in the topnav) ───────── */
.topnav .nav-admin-wrap { position: relative; }
.topnav .nav-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.topnav .nav-admin-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border, hsl(214 32% 91%));
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
  z-index: 60;
  animation: acct-pop .14s ease-out;
}
.topnav .nav-admin-menu[hidden] { display: none; }
.topnav .nav-admin-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text2, hsl(222 20% 40%));
  text-decoration: none;
  font-weight: 500;
}
.topnav .nav-admin-item:hover {
  background: var(--surface, hsl(210 40% 96%));
  color: var(--text, hsl(222 47% 11%));
}
.topnav .nav-admin-item.active {
  background: var(--accent-soft, hsl(160 35% 96%));
  color: var(--accent2, hsl(160 45% 28%));
  font-weight: 600;
}

/* ──────────────── Account dropdown — used on every page header ───────────── */
.acct-wrap { position: relative; margin-left: 6px; }
.acct-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acct-btn:hover {
  background: var(--surface, hsl(210 40% 96%));
  border-color: var(--border, hsl(214 32% 91%));
}
.acct-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsl(210 40% 92%);
  color: var(--text2, hsl(222 20% 40%));
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}
.acct-avatar.admin {
  background: linear-gradient(135deg, hsl(160 40% 35%) 0%, hsl(190 50% 30%) 100%);
  color: #fff;
}
.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border, hsl(214 32% 91%));
  border-radius: 10px;
  padding: 14px 16px 8px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
  z-index: 100;
  animation: acct-pop .14s ease-out;
}
@keyframes acct-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.acct-menu[hidden] { display: none; }
.acct-email {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy, hsl(222 47% 11%));
  word-break: break-all;
}
.acct-role {
  font-size: 10px;
  color: var(--text3, hsl(214 20% 60%));
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
}
.acct-divider {
  height: 1px;
  background: var(--border, hsl(214 32% 91%));
  margin: 10px -16px 6px;
}
.acct-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--text2, hsl(222 20% 40%));
  background: transparent;
  border: none;
  padding: 8px 4px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}
.acct-item:hover { background: var(--surface, hsl(210 40% 96%)); color: var(--text, hsl(222 47% 11%)); }
.acct-item.signout:hover { color: #b91c1c; background: rgba(220, 38, 38, .04); }

/* ──────────────── Shared modal + toast (replaces alert/confirm/prompt) ──── */
.sc-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .50);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  animation: sc-modal-fade .14s ease-out;
}
.sc-modal-backdrop.open { display: flex }
@keyframes sc-modal-fade { from { opacity: 0 } to { opacity: 1 } }
.sc-modal {
  background: #fff;
  border: 1px solid var(--border, hsl(214 32% 91%));
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
  width: min(440px, 100%);
  max-height: calc(100vh - 40px); overflow: auto;
  font-family: 'Inter', system-ui, sans-serif;
  animation: sc-modal-pop .16s ease-out;
}
@keyframes sc-modal-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98) }
  to   { opacity: 1; transform: translateY(0)     scale(1) }
}
.sc-modal-head {
  padding: 18px 22px 8px;
  display: flex; align-items: center; gap: 12px;
}
.sc-modal-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.sc-modal-icon.info     { background: hsl(160 35% 92%); color: hsl(160 45% 28%) }
.sc-modal-icon.warn     { background: #fef3c7; color: #92400e }
.sc-modal-icon.danger   { background: #fee2e2; color: #991b1b }
.sc-modal-icon.success  { background: #dcfce7; color: #166534 }
.sc-modal-title {
  font-size: 15px; font-weight: 700;
  color: var(--navy, hsl(222 47% 11%)); flex: 1;
  line-height: 1.4;
}
.sc-modal-body {
  padding: 0 22px 6px;
  font-size: 13.5px; color: var(--text2, hsl(222 20% 40%));
  line-height: 1.55;
}
.sc-modal-body input,
.sc-modal-body select,
.sc-modal-body textarea {
  font-family: inherit; font-size: 13px;
  padding: 9px 12px; margin-top: 6px; width: 100%;
  border: 1px solid var(--border, hsl(214 32% 91%));
  border-radius: 8px; background: #fff;
  color: var(--text, hsl(222 47% 11%));
  outline: none; transition: border-color .12s;
}
.sc-modal-body input:focus,
.sc-modal-body select:focus,
.sc-modal-body textarea:focus {
  border-color: var(--accent, hsl(160 40% 35%));
  box-shadow: 0 0 0 3px hsl(160 30% 92%);
}
.sc-modal-actions {
  padding: 14px 22px 18px;
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.sc-modal-btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; transition: all .12s;
  background: #fff; color: var(--text, hsl(222 47% 11%));
}
.sc-modal-btn.ghost  { border-color: var(--border, hsl(214 32% 91%)); color: var(--text2, hsl(222 20% 40%)) }
.sc-modal-btn.ghost:hover { background: var(--surface, hsl(210 40% 96%)); color: var(--text, hsl(222 47% 11%)) }
.sc-modal-btn.primary{ background: var(--navy, hsl(222 47% 11%)); color: #fff; border-color: var(--navy, hsl(222 47% 11%)) }
.sc-modal-btn.primary:hover { background: hsl(222 47% 18%) }
.sc-modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626 }
.sc-modal-btn.danger:hover { background: #b91c1c }
.sc-modal-btn:disabled { opacity: .6; cursor: not-allowed }

/* Toast — auto-dismissing notification, top-right */
.sc-toast-stack {
  position: fixed; top: 76px; right: 22px; z-index: 1100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.sc-toast {
  background: var(--navy, hsl(222 47% 11%)); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  display: flex; align-items: center; gap: 9px;
  opacity: 0; transform: translateX(20px);
  transition: opacity .18s, transform .18s;
  max-width: 380px;
}
.sc-toast.show { opacity: 1; transform: translateX(0) }
.sc-toast.success { background: #166534 }
.sc-toast.error   { background: #b91c1c }
.sc-toast.warn    { background: #92400e }

/* ──────────────── Global footer (injected by nav.js everywhere) ─────────── */
.app-footer {
  margin-top: 60px;
  padding: 24px 36px;
  border-top: 1px solid var(--border, hsl(214 32% 91%));
  background: hsl(210 40% 99%);
  font-family: 'Inter', system-ui, sans-serif;
}
.app-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text3, hsl(214 20% 60%));
}
.app-footer-inner a {
  color: var(--text2, hsl(222 20% 40%));
  text-decoration: none;
  transition: color .12s;
}
.app-footer-inner a:hover {
  color: var(--accent2, hsl(160 45% 28%));
}
.app-footer-inner .dot {
  color: var(--border, hsl(214 32% 91%));
}