:root {
  --brand-dark: #04370B;
  --brand-dark-soft: #0a5c17;
  --brand-white: #FFFFFF;
  --brand-gray: #a9abaf;
  --brand-black: #171717;
  --happy: #1f8a3b;
  --happy-bg: #e6f4ea;
  --neutral: #b7791f;
  --neutral-bg: #fdf1dc;
  --sad: #c0392b;
  --sad-bg: #fbe9e7;

  /* Neutral scale — one source of truth for surfaces, borders and quiet text,
     so panels, tables and inputs all sit on the same visual grid. */
  --surface: #ffffff;
  --surface-sunken: #f6f8f6;
  --border: #e6ebe5;
  --border-strong: #d7dfd6;
  --text: #1c211c;
  --text-muted: #6b756a;
  --text-faint: #98a396;
  --app-bg: #f4f6f4; /* the admin shell's own background, behind every panel */

  --radius-sm: .5rem;
  --radius: .75rem;
  --radius-lg: 1rem;

  --shadow-sm: 0 1px 2px rgba(16, 32, 16, .04), 0 1px 3px rgba(16, 32, 16, .05);
  --shadow: 0 2px 4px rgba(16, 32, 16, .04), 0 6px 16px rgba(16, 32, 16, .06);
  --shadow-lg: 0 12px 32px rgba(16, 32, 16, .12);

  --topbar-h: 66px; /* 64px bar + 2px bottom accent */
}

body {
  font-family: 'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f2f3f5;
  color: var(--brand-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand-dark-soft); }

/* Consistent keyboard focus across the admin. */
.admin-body :focus-visible {
  outline: 2px solid var(--brand-dark-soft);
  outline-offset: 2px;
  border-radius: .3rem;
}

/* ---------- Buttons ---------- */
.btn-brand, .btn-outline-brand, .btn-outline-secondary, .btn-outline-danger, .btn-outline-warning {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
}
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
/* One click only: submit buttons get this the instant a form is actually
   submitted, so a second click before the page navigates can't fire a
   duplicate request. */
.btn.is-loading { opacity: .65; cursor: default; pointer-events: none; position: relative; padding-right: 2.25rem; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: .8rem;
  width: .9rem;
  height: .9rem;
  margin-top: -.45rem;
  border-radius: 50%;
  border: 2px solid rgba(127, 127, 127, .35);
  border-top-color: currentColor;
  animation: iconSpin .6s linear infinite;
}
.btn-brand {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-white);
  box-shadow: var(--shadow-sm);
}
.btn-brand:hover, .btn-brand:focus {
  background-color: var(--brand-dark-soft);
  border-color: var(--brand-dark-soft);
  color: var(--brand-white);
  box-shadow: 0 4px 12px rgba(4, 55, 11, .22);
}
.btn-brand:active { transform: translateY(1px); }
.btn-outline-brand {
  border-color: var(--border-strong);
  color: var(--brand-dark);
  background: var(--surface);
}
.btn-outline-brand:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-white);
}
.btn-outline-brand:active, .btn-outline-secondary:active, .btn-outline-danger:active, .btn-outline-warning:active {
  transform: translateY(1px);
}
.btn-outline-secondary {
  border-color: var(--border-strong);
  color: #566054;
  background: var(--surface);
}
.btn-outline-secondary:hover {
  background: var(--surface-sunken);
  border-color: var(--brand-gray);
  color: var(--text);
}
.btn-outline-danger { border-color: #e9cdc9; background: var(--surface); }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none; }
/* Bootstrap's default warning yellow (#ffc107) fails text contrast — the
   app's own --neutral amber (#b7791f, used for badges/icons) is still only
   ~3.6:1 on white, so button text gets its own darker shade to clear 4.5:1. */
.btn-outline-warning {
  --bs-btn-color: #8a5a14;
  --bs-btn-border-color: #8a5a14;
  --bs-btn-hover-color: var(--brand-white);
  --bs-btn-hover-bg: #8a5a14;
  --bs-btn-hover-border-color: #8a5a14;
  --bs-btn-active-color: var(--brand-white);
  --bs-btn-active-bg: #8a5a14;
  --bs-btn-active-border-color: #8a5a14;
  background: var(--surface);
}
/* Same pale-yellow contrast problem on the "Return for Revision" modal
   title icon — Bootstrap's .text-warning is the same washed-out #ffc107. */
.text-warning { color: #8a5a14 !important; }
.btn-sm { --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .82rem; }

/* Revision review card: the "view" pair and the "decide" trio read as two
   distinct clusters instead of one loose row of five buttons. */
.revision-actions { gap: .6rem; }
.revision-actions-decide {
  padding-top: .6rem;
  border-top: 1px dashed var(--border-strong);
}

/* Generic show/hide toggle for any <input type="password">, for admin forms
   outside the login page's own branded auth-* password field. */
.pw-field-wrap { position: relative; }
.pw-field-wrap input { padding-right: 2.5rem; }
.pw-toggle-btn {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  padding: .35rem .5rem;
  line-height: 1;
  border-radius: var(--radius-sm);
}
.pw-toggle-btn:hover { color: var(--brand-dark); background: var(--surface-sunken); }
.pw-toggle-btn:focus-visible { outline: 2px solid var(--brand-dark-soft); outline-offset: 1px; }

/* ---------- Admin Layout ---------- */
.admin-body {
  background: var(--app-bg);
  color: var(--text);
}
.admin-topbar {
  /* Flat brand green with one subtle highlight, plus a lighter hairline at the
     bottom — reads as a corporate application bar rather than a gradient band. */
  background: var(--brand-dark);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
  border-bottom: 2px solid var(--brand-dark-soft);
  height: 64px;
  padding: 0 1.5rem;
  box-shadow: 0 1px 12px rgba(4, 55, 11, .16);
  position: sticky;
  top: 0;
  z-index: 1050;
}
.admin-topbar .container-fluid { height: 100%; }
/* Keep every topbar control above the brand block and give them a real tap
   target, so nothing can sit over them or swallow the click. */
.admin-topbar .container-fluid > * { position: relative; z-index: 2; }
#sidebarToggle {
  position: relative;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
}
#sidebarToggle:hover { background: rgba(255, 255, 255, .14); }
#sidebarToggle:active { background: rgba(255, 255, 255, .22); }
.admin-topbar .navbar-brand { position: relative; z-index: 1; }
.topbar-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: var(--brand-white);
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .2);
}
.topbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
/* Sentence case at a readable size: the hospital name is identification, not a
   banner, so it should not shout. */
.topbar-brand-title {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.005em;
  color: var(--brand-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-brand-subtitle {
  font-size: .64rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ---------- Topbar account area ---------- */
.topbar-account {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-shrink: 0;
}
.topbar-user {
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  min-width: 0;
}
.topbar-user-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}
.topbar-user-role {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.topbar-divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, .18);
  flex-shrink: 0;
}
.topbar-logout-btn {
  position: relative;
  z-index: 3;
  min-width: 40px;
  height: 38px;
  padding: 0 .9rem;
  gap: .45rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .9);
  flex-shrink: 0;
  font-size: .84rem;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.topbar-logout-btn i { font-size: 1rem; }
.topbar-logout-btn:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .45);
  color: var(--brand-white);
}
/* ---------- Notification bell ---------- */
#notifBellBtn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s ease;
}
#notifBellBtn:hover, #notifBellBtn:focus, #notifBellBtn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .14);
}
.notif-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--sad);
  color: var(--brand-white);
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  border: 2px solid var(--brand-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  pointer-events: none;
}
#notifBellBtn.has-unread .notif-badge { animation: notif-pop .45s ease-out 1; }
@keyframes notif-pop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Notifications dropdown ---------- */
.notif-dropdown {
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: 460px;
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: .85rem;
  color: var(--brand-black);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.notif-dropdown-count {
  font-size: .66rem;
  font-weight: 800;
  color: var(--brand-dark);
  background: var(--happy-bg);
  padding: .18rem .6rem;
  border-radius: 2rem;
}
.notif-section-label {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: .7rem 1rem .3rem;
}
.notif-item {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .55rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
a.notif-item:hover { background: var(--surface-sunken); color: inherit; }
.notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-white);
  font-size: .88rem;
  flex-shrink: 0;
  margin-top: .05rem;
}
.notif-item-body { min-width: 0; flex-grow: 1; }
.notif-item-title {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-black);
  line-height: 1.35;
}
.notif-item-sub {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .2rem;
}
.notif-item-action .notif-item-sub { color: var(--brand-dark); font-weight: 700; }
.notif-item-action:hover .notif-item-sub i { transform: translateX(2px); }
.notif-item-sub i { transition: transform .15s ease; }
.notif-empty {
  padding: 2.4rem 1rem;
  text-align: center;
  color: var(--text-faint);
}
.notif-empty i { font-size: 1.9rem; display: block; margin-bottom: .5rem; color: var(--happy); }
.bg-neutral { background-color: var(--neutral); }

.admin-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
  color: var(--brand-white);
  flex-shrink: 0;
}
.admin-avatar-img { object-fit: cover; border-color: var(--border-strong); }

/* ---------- Settings page (admin/settings.php) — social-profile header ---------- */
.profile-header { overflow: visible; }
.profile-cover {
  height: 112px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 2px solid var(--brand-dark-soft);
  background:
    /* faint diagonal hairlines for texture, so the banner isn't just a flat
       colour wash — same trick as a subtle fabric/paper weave, at a low
       enough opacity to stay out of the way of the avatar and name. */
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 14px),
    radial-gradient(130% 200% at 85% -30%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(60% 140% at 8% 120%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(115deg, var(--brand-dark) 0%, var(--brand-dark-soft) 68%, var(--brand-dark) 130%);
}
.profile-identity {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  padding: .6rem 1.75rem 1.4rem;
  flex-wrap: wrap;
}
/* Only the avatar overlaps the cover — the negative margin lives here, not
   on .profile-identity, so the name/email/pills below always start in the
   white area. They used to share the row's own -44px overlap, which put
   dark text directly on the dark-green cover (near-unreadable). */
.profile-avatar-wrap { position: relative; flex-shrink: 0; margin-top: -56px; }
.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  /* Layered so the ring reads as intentional, not just "border": a hairline
     brand-tinted ring outside the white one, then the drop shadow lifting
     the whole thing off the cover. */
  box-shadow: 0 0 0 1px var(--border), 0 0 0 5px rgba(4, 55, 11, .08), var(--shadow-lg);
  background: var(--surface);
  display: block;
}
.profile-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--happy-bg);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: 2.15rem;
  letter-spacing: 0;
}
.profile-avatar-menu-wrap { position: absolute; right: -2px; bottom: -2px; }
.profile-avatar-edit-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: .82rem;
  list-style: none;
  transition: background .15s ease, transform .15s ease;
}
.profile-avatar-edit-btn::-webkit-details-marker { display: none; }
.profile-avatar-edit-btn:hover { background: var(--brand-dark-soft); transform: scale(1.06); }
.profile-avatar-menu {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .9rem;
  width: 230px;
  z-index: 5;
}
.profile-identity-info { padding-bottom: .2rem; min-width: 0; }
.profile-name-row { position: relative; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.profile-name { font-size: 1.45rem; font-weight: 800; color: var(--brand-black); margin: 0; letter-spacing: -.01em; }
.profile-name-edit { position: relative; display: inline-flex; align-self: center; }
.profile-name-edit-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: .62rem;
  list-style: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.profile-name-edit-btn::-webkit-details-marker { display: none; }
.profile-name-edit-btn:hover { color: var(--brand-dark); border-color: var(--brand-dark); background: var(--happy-bg); transform: scale(1.08); }
.profile-name-edit-menu {
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .75rem;
  width: 260px;
  z-index: 5;
}
.profile-email { color: var(--text-muted); font-size: .85rem; }
.profile-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .55rem; }
.profile-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .28rem .7rem;
}
/* On-brand role pill — same shape as the meta pills, but with an accent
   fill so it still reads as "this is who they are" rather than blending in
   with the department/member-since facts next to it. */
.profile-role-pill {
  display: inline-flex;
  align-items: center;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .28rem .75rem;
  border: 1px solid transparent;
}
.profile-role-pill.role-it { background: var(--brand-dark); color: var(--brand-white); }
.profile-role-pill.role-approver { background: var(--neutral-bg); color: var(--neutral); border-color: #eddcbb; }
.profile-role-pill.role-staff { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border); }

/* Panel headers with a small colour chip instead of a bare icon glyph — the
   same "icon in a tile" language as the dashboard's stat cards. */
.settings-panel-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--brand-black);
  margin: 0 0 1.1rem;
}
.settings-panel-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--happy-bg);
  color: var(--brand-dark);
  font-size: .95rem;
  flex-shrink: 0;
}
.theme-option-group { display: flex; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: 6.5rem;
  padding: .9rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.theme-option:hover { border-color: var(--brand-gray); color: var(--text); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option-icon { font-size: 1.3rem; }
.theme-option-label { font-size: .8rem; font-weight: 700; }
/* :has() gives the whole card the selected look; the sibling rule right
   below is a fallback for browsers without it, so the choice is still
   visible (just without the full card highlight) either way. */
.theme-option input:checked ~ .theme-option-icon,
.theme-option input:checked ~ .theme-option-label { color: var(--brand-dark); }
.theme-option:has(input:checked) {
  border-color: var(--brand-dark);
  background: var(--happy-bg);
  color: var(--brand-dark);
}
.theme-option:has(input:focus-visible) { outline: 2px solid var(--brand-dark-soft); outline-offset: 2px; }
.admin-layout {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
}
.admin-sidebar {
  width: 244px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.35rem .75rem 1rem;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
}
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #dfe5de; border-radius: 3px; }
.sidebar-profile {
  margin-top: auto;
  padding-top: 1rem;
  margin-left: -.75rem;
  margin-right: -.75rem;
  padding-left: .75rem;
  padding-right: .75rem;
  padding-bottom: .5rem;
  border-top: 1px solid #e9ece8;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
a.sidebar-profile:hover { background: var(--surface-sunken); color: inherit; }
/* Initial instead of the hospital logo — the logo is already in the topbar, and
   repeating it here reads as decoration rather than identity. Overridden by
   an <img> instead (same class, so the size/shape stay identical) once the
   account has a photo — see admin/settings.php. */
.sidebar-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--happy-bg);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
}
.sidebar-profile-avatar-img { object-fit: cover; }
.sidebar-profile-info { min-width: 0; flex-grow: 1; }
.sidebar-profile-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-profile-email {
  font-size: .7rem;
  color: var(--brand-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 .75rem;
  margin-bottom: .45rem;
}
/* Sentence case rather than all-caps: nav items are scanned, not shouted. The
   active item gets a tinted pill plus a left accent bar. */
.admin-sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  color: #465044;
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  margin-bottom: .15rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  transition: background .15s ease, color .15s ease;
}
.admin-sidebar .nav-link i { font-size: 1.05rem; opacity: .75; }
.admin-sidebar .nav-link:hover { background: var(--surface-sunken); color: var(--brand-dark); }
.admin-sidebar .nav-link:hover i { opacity: 1; }
.admin-sidebar .nav-link.active {
  background: var(--happy-bg);
  color: var(--brand-dark);
  font-weight: 700;
}
.admin-sidebar .nav-link.active i { opacity: 1; }
.admin-sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--brand-dark);
}
.admin-content {
  flex-grow: 1;
  padding: 1.85rem 2rem;
  min-width: 0;
  max-width: 1500px;
}
/* Page titles (e.g. "Dashboard", "Rooms & QR Codes"). */
.admin-content h1.h4 {
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--text);
}
.admin-content h2.h6, .admin-content h2.h5 {
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text);
}
.admin-content .text-muted { color: var(--text-muted) !important; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .admin-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: -260px;
    bottom: 0;
    z-index: 1030;
    transition: left .2s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,.08);
  }
  .admin-sidebar.show { left: 0; }
  .admin-content { padding: 1.1rem; }

  /* Dims the page behind the drawer and doubles as its tap-to-close target
     (the existing click-outside handler already closes on any click that
     isn't the sidebar or its toggle button, so this needs no JS of its own). */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(4, 20, 6, 0);
    pointer-events: none;
    z-index: 1020;
    transition: background .2s ease;
  }
  .admin-sidebar.show ~ .sidebar-backdrop {
    background: rgba(4, 20, 6, .45);
    pointer-events: auto;
  }
  /* Keeps the page from scrolling behind the open drawer. Progressive
     enhancement only — browsers without :has() just skip the lock. */
  body:has(.admin-sidebar.show) { overflow: hidden; }
}

@media (max-width: 479.98px) {
  .topbar-brand-subtitle { display: none; }
}

/* ---------- Modals & Forms ---------- */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(16, 32, 16, .2);
  overflow: hidden;
}
.modal-backdrop.show { opacity: .55; }
/* A short scale-in reads as deliberate; the default slide can feel loose. */
.modal.fade .modal-dialog {
  transform: scale(.97) translateY(8px);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.modal.show .modal-dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none; }
}
.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 1.15rem 1.4rem;
  background: var(--surface-sunken);
}
.modal-header .btn-close { --bs-btn-close-opacity: .45; }
.modal-header .btn-close:hover { --bs-btn-close-opacity: .9; }

/* ---------- Shared confirmation dialog ---------- */
.modal-sm-plus { max-width: 420px; }
.confirm-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  margin: .25rem auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: var(--sad-bg);
  color: var(--sad);
}
.confirm-icon-warning { background: var(--neutral-bg); color: var(--neutral); }
.confirm-icon-brand { background: var(--happy-bg); color: var(--brand-dark); }
.confirm-title {
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: .5rem;
}
.confirm-text {
  font-size: .88rem;
  color: var(--text-muted);
  margin-bottom: .6rem;
  line-height: 1.55;
}
.confirm-note {
  font-size: .82rem;
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  margin-bottom: 0;
}
#confirmModal .modal-body { padding: 1.75rem 1.6rem 1.25rem; }
.confirm-footer {
  justify-content: center;
  gap: .5rem;
  border-top: 0;
  background: transparent;
  padding-top: 0;
  padding-bottom: 1.5rem;
}
.confirm-footer .btn { min-width: 7rem; }
.modal-footer {
  border-top: 1px solid var(--border);
  padding: 1rem 1.4rem;
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal-body { padding: 1.4rem; }
.modal-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.modal-title i { font-size: 1.05em; vertical-align: -.08em; }

/* ---------- Approver picker (who can review this change) ---------- */
.approver-picker { margin-top: 1.1rem; }
.approver-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.approver-picker-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}
.approver-picker-required {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Each account is its own selectable card rather than a bare checkbox row —
   picking who reviews your work is a decision, not a form detail. */
.approver-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  margin-bottom: .35rem;
  font-size: .86rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.approver-option:hover { border-color: var(--border-strong); }
.approver-option:has(input:checked) {
  border-color: var(--brand-dark);
  background: var(--happy-bg);
}
.approver-option:has(input:focus-visible) { outline: 2px solid var(--brand-dark-soft); outline-offset: 1px; }
.approver-option input { margin: 0; flex-shrink: 0; cursor: pointer; }
.approver-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-dark);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
}
/* Distinct from the per-person avatars without dropping the icon's contrast —
   --brand-gray is too pale to carry white at this size. */
.approver-avatar-all { background: var(--text-muted); }
.approver-option-body { display: flex; flex-direction: column; min-width: 0; }
.approver-option-name { font-weight: 700; line-height: 1.25; }
.approver-option-meta {
  font-size: .74rem;
  color: var(--text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.approver-option-all { margin-bottom: .5rem; }
.approver-picker-hint {
  font-size: .76rem;
  color: var(--text-faint);
  margin-top: .5rem;
}
.approver-picker-empty {
  font-size: .84rem;
  color: var(--sad);
  background: var(--sad-bg);
  border-radius: var(--radius-sm);
  padding: .6rem .75rem;
  margin-top: 1rem;
}

/* ---------- Submission recap (what you are about to send for review) ---------- */
.submit-recap {
  padding: .8rem .9rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.submit-recap-label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .3rem;
}
.submit-recap-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.submit-recap-meta { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.modal-step-chip {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .15rem;
}

/* ---------- Draft / pending-review inline preview (Surveys editor) ---------- */
.change-badge {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: .18rem .55rem;
  border-radius: 1rem;
  margin-right: .3rem;
}
.change-badge-draft { background: var(--neutral-bg); color: var(--neutral); }
.change-badge-pending { background: #fff3cd; color: #8a6516; }
.change-badge-removal { background: var(--sad-bg); color: var(--sad); }
.change-badge-hide { background: var(--neutral-bg); color: var(--neutral); }
.change-badge-new { background: var(--happy-bg); color: var(--brand-dark); }
.change-old-text {
  text-decoration: line-through;
  color: var(--text-faint);
}
.change-new-text {
  color: var(--brand-dark);
  font-weight: 600;
}
.qlist-item.is-pending-hide {
  background: var(--neutral-bg);
  border-color: var(--neutral);
}
.qlist-item.is-pending-removal, .dept-pill.is-pending-removal {
  background: var(--sad-bg);
  border-color: var(--sad);
}
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-strong);
  font-size: .92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:hover, .form-select:hover { border-color: var(--brand-gray); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(4, 55, 11, .1);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sad); background-image: none; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.valid-feedback { color: var(--happy); }
.invalid-feedback { color: var(--sad); }
.form-label { color: #414a40; font-weight: 600; }
.form-text { color: var(--text-muted); }
.form-check-input:checked { background-color: var(--brand-dark); border-color: var(--brand-dark); }
.form-check-input:focus { border-color: var(--brand-dark-soft); box-shadow: 0 0 0 3px rgba(4, 55, 11, .1); }
.form-check-input:hover:not(:checked) { border-color: var(--brand-gray); }
.form-switch .form-check-input:checked { background-color: var(--brand-dark); border-color: var(--brand-dark); }

/* iOS Safari zooms the whole page on focus of any input under 16px — this
   keeps every admin field just at that threshold on phones without changing
   the tighter desktop density. */
@media (max-width: 575.98px) {
  .form-control, .form-select { font-size: 1rem; }
  /* Buttons in these two spots are what a phone user actually has to hit to
     finish a task (save, confirm, delete) — worth the extra tap target even
     though compact icon-row buttons elsewhere (qlist-actions etc.) stay small
     on purpose. */
  .modal-footer .btn, .confirm-footer .btn { min-height: 2.75rem; }
}

/* ---------- Alerts ---------- */
.admin-content .alert {
  border-radius: var(--radius);
  border-width: 1px;
  box-shadow: var(--shadow-sm);
}
.admin-content .alert-success { background: var(--happy-bg); border-color: #cfe3cd; color: #1c5c2a; }
.admin-content .alert-danger { background: var(--sad-bg); border-color: #eccdc8; color: #8f2c20; }
.admin-content .alert-warning { background: var(--neutral-bg); border-color: #eddcbb; color: #8a5a12; }

/* ---------- Panels & Cards ---------- */
.panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
/* Doubles as a filter chip on the History pages: the stat card you're
   currently filtered to stays visibly picked, not just hoverable. */
.stat-card.is-active {
  border-color: var(--brand-dark);
  border-width: 2px;
  box-shadow: var(--shadow);
}
.stat-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--brand-white);
  flex-shrink: 0;
}

/* ---------- Admin tables ---------- */
.admin-content .table {
  --bs-table-bg: transparent;
  /* Bootstrap colours cells from --bs-table-color on the td/th itself, which
     beats the inherited color below no matter how specific this rule is —
     leaving every un-classed cell at its near-black default in dark mode
     (a .text-muted cell next to it looked fine, which is what gave it away).
     Point the table variables at the same --text token everything else uses
     so cells follow the theme. */
  --bs-table-color: var(--text);
  --bs-table-striped-color: var(--text);
  --bs-table-active-color: var(--text);
  --bs-table-hover-color: var(--text);
  margin-bottom: 0;
  color: var(--text);
}
.admin-content .table > thead > tr > th {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  padding: .55rem .75rem;
  white-space: nowrap;
  background: transparent;
}
.admin-content .table > tbody > tr > td {
  padding: .8rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: .9rem;
}
.admin-content .table > tbody > tr:last-child > td { border-bottom: 0; }
.admin-content .table > tbody > tr { transition: background .12s ease; }
.admin-content .table > tbody > tr:hover { background: var(--surface-sunken); }
.admin-content .table.table-sm > tbody > tr > td { padding: .6rem .7rem; }

/* ---------- Progress bars ---------- */
.admin-content .progress {
  background: #eef1ed;
  border-radius: 2rem;
  overflow: hidden;
}
.admin-content .progress-bar { transition: width .4s ease; }

/* ---------- Badges ---------- */
.admin-content .badge {
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 2rem;
  padding: .35em .7em;
}

/* ---------- "Choose a survey first" cards (Responses / Reports) ---------- */
.survey-pick-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.survey-pick-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-dark);
  box-shadow: var(--shadow);
  color: inherit;
}
.survey-pick-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .5rem;
}
.survey-pick-icon {
  width: 38px;
  height: 38px;
  border-radius: .7rem;
  background: var(--happy-bg);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.survey-pick-name { font-weight: 800; font-size: 1rem; color: var(--brand-black); }
.survey-pick-desc {
  font-size: .82rem;
  color: var(--brand-gray);
  margin-bottom: .8rem;
  flex-grow: 1;
}
.survey-pick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  font-size: .78rem;
  color: var(--brand-gray);
  padding-top: .7rem;
  border-top: 1px solid #eef1ed;
}
.survey-pick-stats strong { color: var(--brand-black); }
.survey-pick-cta {
  margin-top: .8rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.survey-pick-card:hover .survey-pick-cta i { transform: translateX(3px); }
.survey-pick-cta i { transition: transform .15s ease; }

/* ---------- First-run setup checklist (dashboard) ---------- */
.setup-panel {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #0a5c17 100%);
  border-radius: 1rem;
  padding: 1.4rem 1.5rem;
  color: var(--brand-white);
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 26px rgba(4, 55, 11, .22);
}
.setup-panel h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .2rem; }
.setup-panel-sub { font-size: .85rem; opacity: .85; margin: 0 0 1.1rem; }
.setup-steps { display: flex; flex-wrap: wrap; gap: .75rem; }
.setup-step {
  flex: 1 1 210px;
  display: flex;
  gap: .7rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .8rem;
  padding: .8rem .9rem;
  text-decoration: none;
  color: var(--brand-white);
  transition: background .15s ease, transform .15s ease;
}
.setup-step:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); color: var(--brand-white); }
.setup-step.is-done { background: rgba(255, 255, 255, .06); border-style: dashed; }
.setup-step.is-done .setup-step-title { text-decoration: line-through; opacity: .7; }
.setup-step-mark {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  flex-shrink: 0;
}
.setup-step.is-done .setup-step-mark { background: #4ade80; color: var(--brand-dark); }
.setup-step-title { font-weight: 700; font-size: .88rem; }
.setup-step-text { font-size: .77rem; opacity: .82; margin: .15rem 0 0; }

/* ---------- Friendly empty states ---------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; }
.empty-state-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--happy-bg);
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  margin: 0 auto .9rem;
}
.empty-state h3 { font-size: 1rem; font-weight: 800; color: var(--brand-black); margin-bottom: .35rem; }
.empty-state p { font-size: .86rem; color: var(--brand-gray); max-width: 420px; margin: 0 auto 1rem; }

/* ---------- Surveys portal (admin/surveys.php) ---------- */
.portal-hint {
  display: flex;
  gap: .85rem;
  background: var(--happy-bg);
  border: 1px solid #d8e8d6;
  border-radius: .9rem;
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
}
.portal-hint i { color: var(--brand-dark); font-size: 1.15rem; line-height: 1.3; }
.portal-hint-title { font-weight: 800; font-size: .9rem; color: var(--brand-dark); margin-bottom: .15rem; }
.portal-hint-text { font-size: .84rem; color: #4a5a48; margin: 0; }
.portal-hint-warning { background: var(--neutral-bg); border-color: #eddcbb; }
.portal-hint-warning i, .portal-hint-warning .portal-hint-title { color: #8a5a12; }
.portal-hint-warning .portal-hint-text { color: #8a5a48; }

/* Survey cards on the list view */
.survey-manage-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.survey-manage-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.survey-manage-card.is-inactive { background: #fbfcfb; border-style: dashed; }
.survey-manage-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .6rem; }
.survey-manage-icon {
  width: 42px; height: 42px;
  border-radius: .75rem;
  background: var(--happy-bg);
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.survey-manage-name { font-weight: 800; font-size: 1.02rem; color: var(--brand-black); line-height: 1.25; }
.survey-manage-desc { font-size: .83rem; color: var(--brand-gray); margin: 0 0 1rem; flex-grow: 1; }
.survey-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.survey-fact {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #f4f7f3;
  border-radius: 2rem;
  padding: .3rem .7rem;
  font-size: .76rem;
  font-weight: 600;
  color: #4a5a48;
}
.survey-fact strong { color: var(--brand-black); font-weight: 800; }
.survey-fact.is-warning { background: var(--sad-bg); color: var(--sad); }
.survey-manage-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* "Create a new survey" tile */
.survey-new-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 100%;
  min-height: 190px;
  border: 2px dashed #d5e0d3;
  border-radius: 1rem;
  background: transparent;
  color: var(--brand-gray);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.survey-new-card:hover { border-color: var(--brand-dark); color: var(--brand-dark); background: var(--happy-bg); }
.survey-new-card i { font-size: 1.6rem; }
.survey-new-card span { font-weight: 700; font-size: .9rem; }

/* Numbered section headings in the editor */
.section-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .25rem; }
.section-step {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--brand-dark);
  color: var(--brand-white);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
  flex-shrink: 0;
}
.section-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.section-note { font-size: .82rem; color: var(--brand-gray); margin: 0 0 1rem 2.45rem; }

/* "What patients see" flow strip */
.flow-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .85rem 1rem;
  background: #f7faf6;
  border: 1px solid var(--border);
  border-radius: .9rem;
}
.flow-step {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--surface);
  border: 1px solid #e0e9de;
  border-radius: 2rem;
  padding: .35rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  color: #3f4d3e;
  white-space: nowrap;
}
.flow-step i { color: var(--brand-dark); font-size: .85rem; }
.flow-step.is-off { opacity: .45; text-decoration: line-through; }
.flow-step.is-questions { background: var(--happy-bg); border-color: #cfe3cd; color: var(--brand-dark); }
.flow-arrow { color: #b9c7b7; font-size: .7rem; }

/* ---------- Survey editor wizard stepper ---------- */
.wizard-header { }
.wizard-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .75rem;
}
.wizard-step {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: 2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wizard-step:hover { border-color: var(--brand-gray); color: var(--text); }
.wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--surface-sunken);
  font-size: .72rem;
}
.wizard-step.is-active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-white);
}
.wizard-step.is-active .wizard-step-num { background: rgba(255, 255, 255, .2); color: var(--brand-white); }
.wizard-step.is-optional { opacity: .55; }
.wizard-step-arrow { color: #b9c7b7; font-size: .65rem; }

/* Collapsed secondary fields, closed by default */
.wizard-advanced { margin-top: .5rem; }
.wizard-advanced summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-dark);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.wizard-advanced summary::-webkit-details-marker { display: none; }
.wizard-advanced summary::before { content: "\25B8"; transition: transform .15s ease; }
.wizard-advanced[open] summary::before { transform: rotate(90deg); }

/* Question list */
.qlist { display: flex; flex-direction: column; gap: .55rem; }
.qlist-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  padding: .75rem .9rem;
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qlist-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.qlist-item.is-hidden { background: #fafbfa; border-style: dashed; }
.qlist-item.is-hidden .qlist-text { color: var(--brand-gray); text-decoration: line-through; }
.qlist-num {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--happy-bg);
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 800;
  flex-shrink: 0;
  margin-top: .1rem;
}
.qlist-body { flex-grow: 1; min-width: 0; }
.qlist-text { font-size: .92rem; font-weight: 600; color: var(--brand-black); }
.qlist-fil { font-size: .8rem; color: var(--brand-gray); margin-top: .15rem; }
.qlist-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.qlist-tag {
  font-size: .66rem;
  font-weight: 700;
  color: #8a958a;
  background: #f2f5f1;
  border-radius: 2rem;
  padding: .12rem .5rem;
}
.qlist-tag.is-hidden-tag { background: #fdf1dc; color: #a9741d; }
/* align-items:center keeps every control the same height — without it the
   Reword button (a direct flex child) stretches while the ones wrapped in a
   <form> keep their natural height. */
.qlist-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
}
.qlist-actions form { display: flex; margin: 0; }
.qlist-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  white-space: nowrap;
}
.qlist-order { display: flex; flex-direction: column; gap: .15rem; }
.qlist-order .btn {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: .4rem;
  height: .95rem;
  min-width: 1.7rem;
  font-size: .65rem;
  line-height: 1;
}

/* Add-question / add-department composer */
.composer {
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  border-radius: .9rem;
  padding: 1rem;
  margin-top: 1rem;
}
.composer-title { font-size: .85rem; font-weight: 800; color: var(--brand-dark); margin-bottom: .7rem; }
.composer-accent { border-left: 3px solid var(--brand-dark); }
.composer .form-text { font-size: .76rem; margin-top: .3rem; }

/* Optional-step toggles */
.toggle-card {
  display: flex;
  gap: .7rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  padding: .8rem .9rem;
  height: 100%;
  background: var(--surface);
}
.toggle-card .form-check { margin: 0; }
.toggle-card-title { font-weight: 700; font-size: .87rem; color: var(--brand-black); }
.toggle-card-text { font-size: .78rem; color: var(--brand-gray); margin: .15rem 0 0; }

/* Department pills */
.dept-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.dept-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #f4f7f3;
  border: 1px solid #e4ebe2;
  border-radius: 2rem;
  padding: .35rem .5rem .35rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: #3f4d3e;
}
.dept-pill form { display: inline-flex; }
.dept-pill button {
  border: none;
  background: transparent;
  color: #b0bcae;
  line-height: 1;
  padding: .1rem .2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s ease;
}
.dept-pill button:hover { color: var(--sad); }

/* Bar naming the survey currently being viewed, with a link back to the picker */
.survey-scope-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-dark);
  border-radius: var(--radius-sm);
  padding: .6rem 1rem;
  margin-bottom: 1.15rem;
  font-size: .85rem;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.survey-scope-bar > i { color: var(--brand-dark); }
.survey-scope-bar .survey-scope-name { font-weight: 800; color: var(--brand-dark); }
.survey-scope-bar .survey-scope-switch { margin-left: auto; font-weight: 700; }
.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-gray { background-color: var(--brand-gray); }
.bg-happy { background-color: var(--happy); }
.bg-sad { background-color: var(--sad); }
.stat-value {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: .7rem;
  color: var(--text-faint);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .15rem;
}

/* ---------- Dashboard: department ranking rows ---------- */
.dept-rank-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem 0;
  border-bottom: 1px solid #f0f2ef;
}
.dept-rank-row:last-child { border-bottom: none; }
.dept-rank-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: var(--brand-white);
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dept-rank-row-empty { opacity: .55; }
.dept-rank-row-empty .dept-rank-number { background: var(--brand-gray); }

/* ---------- Badges ---------- */
.badge-face {
  display: inline-flex;
  align-items: center;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
.badge-happy { background: var(--happy-bg); color: var(--happy); }
.badge-sad { background: var(--sad-bg); color: var(--sad); }
.badge-na { background: #eef0ee; color: var(--brand-gray); }
.text-happy { color: var(--happy); }
.text-sad { color: var(--sad); }

.face-result { font-size: 2.4rem; line-height: 1; }
.face-happy { color: var(--happy); }
.face-sad { color: var(--sad); }

/* ---------- Satisfaction Ring ---------- */
.satisfaction-ring {
  --pct: 0;
  width: 140px; height: 140px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; color: var(--brand-dark);
  background: conic-gradient(var(--happy) calc(var(--pct) * 1%), #e9ecef 0);
  position: relative;
}
.satisfaction-ring::before {
  content: "";
  position: absolute;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--surface);
}
.satisfaction-ring span { position: relative; z-index: 1; }
.progress-bar.bg-happy-fill { background-color: var(--happy); }
.progress-bar.bg-sad-fill { background-color: var(--sad); }

/* ---------- Reports: live indicator ---------- */
.report-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--happy-bg);
  padding: .3rem .7rem;
  border-radius: 1rem;
}
.report-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--happy);
  animation: reportLivePulse 1.6s ease-in-out infinite;
}
@keyframes reportLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.75); }
}
.report-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.refresh-toggle {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: var(--surface);
  border: 1px solid #e3ece2;
  padding: .3rem .55rem .3rem .85rem;
  border-radius: 1rem;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(4, 55, 11, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.refresh-toggle:hover { border-color: #cfe0cf; }
.refresh-toggle.is-active { border-color: #cbe6cf; background: var(--happy-bg); }
.refresh-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand-gray);
}
.refresh-toggle-label i { font-size: .95rem; transition: transform .5s ease, color .15s ease; }
.refresh-toggle.is-active .refresh-toggle-label { color: var(--happy); }
.refresh-toggle.is-active .refresh-toggle-label i { animation: refreshSpin 1.6s linear infinite; }
.refresh-toggle-interval { color: var(--brand-dark); font-weight: 800; }
.refresh-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
.refresh-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.refresh-switch-track {
  position: absolute;
  inset: 0;
  background: #dde2dc;
  border-radius: 999px;
  transition: background .2s ease;
}
.refresh-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--brand-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.refresh-switch-input:checked ~ .refresh-switch-track { background: var(--happy); }
.refresh-switch-input:checked ~ .refresh-switch-track .refresh-switch-thumb { transform: translateX(14px); }
.refresh-switch-input:focus-visible ~ .refresh-switch-track { box-shadow: 0 0 0 3px rgba(31, 138, 59, .25); }
@keyframes refreshSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Reports: smart insight cards ---------- */
.insight-card {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: var(--surface);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-gray);
  height: 100%;
}
.insight-positive { border-left-color: var(--happy); }
.insight-warning { border-left-color: var(--sad); }
.insight-neutral { border-left-color: var(--brand-gray); }
.insight-icon {
  width: 42px; height: 42px;
  border-radius: .7rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  color: var(--brand-white);
}
.insight-positive .insight-icon { background: var(--happy); }
.insight-warning .insight-icon { background: var(--sad); }
.insight-neutral .insight-icon { background: var(--brand-gray); }
.insight-title { font-weight: 800; font-size: .95rem; margin-bottom: .2rem; }
.insight-text { font-size: .85rem; color: #5a5d5a; line-height: 1.45; }

/* ---------- Reports: 14-day trend chart ---------- */
/* The chart scrolls sideways rather than squashing its columns, so a wide date
   range can never spill outside the panel or collide its labels. */
.trend-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}
.trend-scroll::-webkit-scrollbar { height: 6px; }
.trend-scroll::-webkit-scrollbar-thumb { background: #dfe5de; border-radius: 3px; }
.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: .45rem;
  height: 170px;
  padding-top: .5rem;
  /* Enough room for every column at its minimum width; beyond that, scroll. */
  min-width: calc(var(--cols, 14) * 26px);
}
.trend-col {
  flex: 1 1 0;
  min-width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.trend-bar {
  width: 100%;
  max-width: 26px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #f2f4f1;
  border-radius: .3rem;
  overflow: hidden;
  transition: filter .15s ease;
}
.trend-col:hover .trend-bar { filter: brightness(.94); }
.trend-seg-happy { background: var(--happy); }
.trend-seg-sad { background: var(--sad); }
.trend-label {
  font-size: .62rem;
  color: var(--text-faint);
  font-weight: 600;
  margin-top: .45rem;
  white-space: nowrap;
  min-height: 1em;
}
.legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: .35rem;
}
.legend-happy { background: var(--happy); }
.legend-sad { background: var(--sad); }

/* ================= Dark mode (admin panel only) =================
   Applies only to .admin-body, the shell every signed-in page renders
   inside — the public login portal, the patient-facing survey, and printed
   reports all stay light-only on purpose. Two triggers, matching the
   Light/Dark/Match-device choice on admin/settings.php:
     - .admin-body[data-theme="dark"]            explicit "Dark"
     - (prefers-color-scheme: dark), unless
       [data-theme="light"] is set                "Match device" + dark OS
   Same values in both blocks — keep them in sync if either changes.
   --brand-dark/--brand-white/--brand-gray are deliberately NOT redefined
   here: they're a button/topbar fill or text-on-a-colored-fill, which reads
   fine unchanged in both themes. Where that same dark green is instead used
   as icon/text COLOR sitting on a --happy-bg tint (a badge, an avatar
   circle, a sidebar highlight), that combination goes unreadable once
   --happy-bg turns dark — those specific rules are re-pointed at the
   brightened --happy below instead. */
.admin-body[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { .admin-body:not([data-theme="light"]) { color-scheme: dark; } }

.admin-body[data-theme="dark"] {
  --app-bg: #181c17;
  --surface: #202521;
  --surface-sunken: #272d28;
  --border: #363f37;
  --border-strong: #4a564b;
  --text: #dde3dc;
  --text-muted: #a3ada2;
  --text-faint: #798279;
  --brand-black: #edf0ec;
  --happy-bg: #1c3626;
  --sad-bg: #3c2624;
  --neutral-bg: #3c3019;
  --happy: #4ade80;
  --sad: #f0827a;
  --neutral: #eab857;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .32);
  --shadow: 0 2px 6px rgba(0, 0, 0, .38), 0 8px 20px rgba(0, 0, 0, .42);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  .admin-body:not([data-theme="light"]) {
    --app-bg: #181c17;
    --surface: #202521;
    --surface-sunken: #272d28;
    --border: #363f37;
    --border-strong: #4a564b;
    --text: #dde3dc;
    --text-muted: #a3ada2;
    --text-faint: #798279;
    --brand-black: #edf0ec;
    --happy-bg: #1c3626;
    --sad-bg: #3c2624;
    --neutral-bg: #3c3019;
    --happy: #4ade80;
    --sad: #f0827a;
    --neutral: #eab857;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .32);
    --shadow: 0 2px 6px rgba(0, 0, 0, .38), 0 8px 20px rgba(0, 0, 0, .42);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);
  }
}

/* Everything below is a small set of rules the variables above can't fix on
   their own: a hardcoded near-white hex (not a token), or a --brand-dark
   icon/text color sitting on a tint that just went dark (see note above).
   All routed to the single --text color — not --happy — so dark mode reads
   as one consistent text color instead of scattering green/near-black ink
   across links, nav, and icons. Semantic status colors (badges, alerts,
   happy/sad survey results) are a separate, intentional exception below. */
.admin-body[data-theme="dark"] a,
.admin-body[data-theme="dark"] .btn-outline-brand,
.admin-body[data-theme="dark"] .pw-toggle-btn:hover,
.admin-body[data-theme="dark"] .notif-dropdown-count,
.admin-body[data-theme="dark"] .notif-item-action .notif-item-sub,
.admin-body[data-theme="dark"] .settings-avatar-fallback,
.admin-body[data-theme="dark"] .sidebar-profile-avatar,
.admin-body[data-theme="dark"] .theme-option input:checked ~ .theme-option-icon,
.admin-body[data-theme="dark"] .theme-option input:checked ~ .theme-option-label,
.admin-body[data-theme="dark"] .theme-option:has(input:checked),
.admin-body[data-theme="dark"] .admin-sidebar .nav-link:hover,
.admin-body[data-theme="dark"] .admin-sidebar .nav-link.active,
.admin-body[data-theme="dark"] .confirm-icon-brand,
.admin-body[data-theme="dark"] .change-badge-new,
.admin-body[data-theme="dark"] .change-new-text,
.admin-body[data-theme="dark"] .survey-manage-icon,
.admin-body[data-theme="dark"] .survey-pick-icon,
.admin-body[data-theme="dark"] .survey-pick-cta,
.admin-body[data-theme="dark"] .survey-new-card:hover,
.admin-body[data-theme="dark"] .empty-state-icon,
.admin-body[data-theme="dark"] .portal-hint i,
.admin-body[data-theme="dark"] .portal-hint-title,
.admin-body[data-theme="dark"] .flow-step i,
.admin-body[data-theme="dark"] .flow-step.is-questions,
.admin-body[data-theme="dark"] .qlist-num,
.admin-body[data-theme="dark"] .wizard-advanced summary,
.admin-body[data-theme="dark"] .composer-title,
.admin-body[data-theme="dark"] .survey-scope-bar > i,
.admin-body[data-theme="dark"] .survey-scope-bar .survey-scope-name,
.admin-body[data-theme="dark"] .satisfaction-ring,
.admin-body[data-theme="dark"] .report-live-badge,
.admin-body[data-theme="dark"] .refresh-toggle-interval,
.admin-body[data-theme="dark"] .admin-sidebar .nav-link.active::before {
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  .admin-body:not([data-theme="light"]) a,
  .admin-body:not([data-theme="light"]) .btn-outline-brand,
  .admin-body:not([data-theme="light"]) .pw-toggle-btn:hover,
  .admin-body:not([data-theme="light"]) .notif-dropdown-count,
  .admin-body:not([data-theme="light"]) .notif-item-action .notif-item-sub,
  .admin-body:not([data-theme="light"]) .settings-avatar-fallback,
  .admin-body:not([data-theme="light"]) .sidebar-profile-avatar,
  .admin-body:not([data-theme="light"]) .theme-option input:checked ~ .theme-option-icon,
  .admin-body:not([data-theme="light"]) .theme-option input:checked ~ .theme-option-label,
  .admin-body:not([data-theme="light"]) .theme-option:has(input:checked),
  .admin-body:not([data-theme="light"]) .admin-sidebar .nav-link:hover,
  .admin-body:not([data-theme="light"]) .admin-sidebar .nav-link.active,
  .admin-body:not([data-theme="light"]) .confirm-icon-brand,
  .admin-body:not([data-theme="light"]) .change-badge-new,
  .admin-body:not([data-theme="light"]) .change-new-text,
  .admin-body:not([data-theme="light"]) .survey-manage-icon,
  .admin-body:not([data-theme="light"]) .survey-pick-icon,
  .admin-body:not([data-theme="light"]) .survey-pick-cta,
  .admin-body:not([data-theme="light"]) .survey-new-card:hover,
  .admin-body:not([data-theme="light"]) .empty-state-icon,
  .admin-body:not([data-theme="light"]) .portal-hint i,
  .admin-body:not([data-theme="light"]) .portal-hint-title,
  .admin-body:not([data-theme="light"]) .flow-step i,
  .admin-body:not([data-theme="light"]) .flow-step.is-questions,
  .admin-body:not([data-theme="light"]) .qlist-num,
  .admin-body:not([data-theme="light"]) .wizard-advanced summary,
  .admin-body:not([data-theme="light"]) .composer-title,
  .admin-body:not([data-theme="light"]) .survey-scope-bar > i,
  .admin-body:not([data-theme="light"]) .survey-scope-bar .survey-scope-name,
  .admin-body:not([data-theme="light"]) .satisfaction-ring,
  .admin-body:not([data-theme="light"]) .report-live-badge,
  .admin-body:not([data-theme="light"]) .refresh-toggle-interval,
  .admin-body:not([data-theme="light"]) .admin-sidebar .nav-link.active::before {
    color: var(--text);
  }
}
/* Two of the above are also backgrounds (a solid pill, not a tint), so the
   swapped color above would otherwise vanish against itself. */
.admin-body[data-theme="dark"] .admin-sidebar .nav-link.active::before,
.admin-body[data-theme="dark"] .theme-option:has(input:checked) { background: var(--happy-bg); }
@media (prefers-color-scheme: dark) {
  .admin-body:not([data-theme="light"]) .admin-sidebar .nav-link.active::before,
  .admin-body:not([data-theme="light"]) .theme-option:has(input:checked) { background: var(--happy-bg); }
}

/* Small hardcoded hex values that aren't tokens at all — chips, dividers,
   scrollbars, alerts, and the couple of pale tints left over from the
   --brand-white → --surface cleanup above. */
.admin-body[data-theme="dark"] .form-label { color: #c9d2c7; }
.admin-body[data-theme="dark"] .btn-outline-secondary { color: #b7c0b5; }
/* Selected approver card: --brand-dark is near-invisible as a border once the
   --happy-bg tint behind it goes dark, so the brightened --happy marks it. */
.admin-body[data-theme="dark"] .approver-option:has(input:checked) { border-color: var(--happy); }
.admin-body[data-theme="dark"] .admin-sidebar .nav-link { color: #b7c0b5; }
.admin-body[data-theme="dark"] .admin-sidebar::-webkit-scrollbar-thumb,
.admin-body[data-theme="dark"] .trend-scroll::-webkit-scrollbar-thumb { background: #3a453b; }
.admin-body[data-theme="dark"] .admin-content .progress { background: #2a322b; }
.admin-body[data-theme="dark"] .change-badge-pending { background: #4a3b12; color: #e8c465; }
.admin-body[data-theme="dark"] .admin-content .alert-success { background: #163a22; border-color: #245a35; color: #8fe3a8; }
.admin-body[data-theme="dark"] .admin-content .alert-danger { background: #3a201d; border-color: #5a2f29; color: #f1a599; }
.admin-body[data-theme="dark"] .admin-content .alert-warning,
.admin-body[data-theme="dark"] .portal-hint-warning { background: #3a2d16; border-color: #5a4726; }
.admin-body[data-theme="dark"] .portal-hint-warning i,
.admin-body[data-theme="dark"] .portal-hint-warning .portal-hint-title,
.admin-body[data-theme="dark"] .portal-hint-warning .portal-hint-text { color: #eec27a; }
.admin-body[data-theme="dark"] .portal-hint { border-color: #245a35; }
.admin-body[data-theme="dark"] .portal-hint-text,
.admin-body[data-theme="dark"] .survey-fact,
.admin-body[data-theme="dark"] .flow-step,
.admin-body[data-theme="dark"] .dept-pill { color: #c3ccc1; }
.admin-body[data-theme="dark"] .survey-manage-card.is-inactive,
.admin-body[data-theme="dark"] .survey-fact,
.admin-body[data-theme="dark"] .flow-strip,
.admin-body[data-theme="dark"] .qlist-item.is-hidden,
.admin-body[data-theme="dark"] .qlist-tag,
.admin-body[data-theme="dark"] .dept-pill,
.admin-body[data-theme="dark"] .trend-bar,
.admin-body[data-theme="dark"] .badge-na { background: var(--surface-sunken); }
.admin-body[data-theme="dark"] .qlist-tag { color: var(--text-faint); }
.admin-body[data-theme="dark"] .qlist-tag.is-hidden-tag { background: var(--neutral-bg); color: var(--neutral); }
.admin-body[data-theme="dark"] .dept-pill button { color: var(--text-faint); }
.admin-body[data-theme="dark"] .flow-step,
.admin-body[data-theme="dark"] .dept-pill,
.admin-body[data-theme="dark"] .refresh-toggle,
.admin-body[data-theme="dark"] .dept-rank-row,
.admin-body[data-theme="dark"] .survey-pick-stats { border-color: var(--border); }
.admin-body[data-theme="dark"] .refresh-toggle:hover,
.admin-body[data-theme="dark"] .refresh-toggle.is-active { border-color: var(--border-strong); }
.admin-body[data-theme="dark"] .refresh-switch-track { background: #454f46; }
.admin-body[data-theme="dark"] .satisfaction-ring { background: conic-gradient(var(--happy) calc(var(--pct) * 1%), #3a453b 0); }
.admin-body[data-theme="dark"] .insight-text { color: var(--text-muted); }
.admin-body[data-theme="dark"] .flow-arrow,
.admin-body[data-theme="dark"] .wizard-step-arrow { color: #5a6a5b; }
@media (prefers-color-scheme: dark) {
  .admin-body:not([data-theme="light"]) .form-label { color: #c9d2c7; }
  .admin-body:not([data-theme="light"]) .btn-outline-secondary { color: #b7c0b5; }
  .admin-body:not([data-theme="light"]) .approver-option:has(input:checked) { border-color: var(--happy); }
  .admin-body:not([data-theme="light"]) .admin-sidebar .nav-link { color: #b7c0b5; }
  .admin-body:not([data-theme="light"]) .admin-sidebar::-webkit-scrollbar-thumb,
  .admin-body:not([data-theme="light"]) .trend-scroll::-webkit-scrollbar-thumb { background: #3a453b; }
  .admin-body:not([data-theme="light"]) .admin-content .progress { background: #2a322b; }
  .admin-body:not([data-theme="light"]) .change-badge-pending { background: #4a3b12; color: #e8c465; }
  .admin-body:not([data-theme="light"]) .admin-content .alert-success { background: #163a22; border-color: #245a35; color: #8fe3a8; }
  .admin-body:not([data-theme="light"]) .admin-content .alert-danger { background: #3a201d; border-color: #5a2f29; color: #f1a599; }
  .admin-body:not([data-theme="light"]) .admin-content .alert-warning,
  .admin-body:not([data-theme="light"]) .portal-hint-warning { background: #3a2d16; border-color: #5a4726; }
  .admin-body:not([data-theme="light"]) .portal-hint-warning i,
  .admin-body:not([data-theme="light"]) .portal-hint-warning .portal-hint-title,
  .admin-body:not([data-theme="light"]) .portal-hint-warning .portal-hint-text { color: #eec27a; }
  .admin-body:not([data-theme="light"]) .portal-hint { border-color: #245a35; }
  .admin-body:not([data-theme="light"]) .portal-hint-text,
  .admin-body:not([data-theme="light"]) .survey-fact,
  .admin-body:not([data-theme="light"]) .flow-step,
  .admin-body:not([data-theme="light"]) .dept-pill { color: #c3ccc1; }
  .admin-body:not([data-theme="light"]) .survey-manage-card.is-inactive,
  .admin-body:not([data-theme="light"]) .survey-fact,
  .admin-body:not([data-theme="light"]) .flow-strip,
  .admin-body:not([data-theme="light"]) .qlist-item.is-hidden,
  .admin-body:not([data-theme="light"]) .qlist-tag,
  .admin-body:not([data-theme="light"]) .dept-pill,
  .admin-body:not([data-theme="light"]) .trend-bar,
  .admin-body:not([data-theme="light"]) .badge-na { background: var(--surface-sunken); }
  .admin-body:not([data-theme="light"]) .qlist-tag { color: var(--text-faint); }
  .admin-body:not([data-theme="light"]) .qlist-tag.is-hidden-tag { background: var(--neutral-bg); color: var(--neutral); }
  .admin-body:not([data-theme="light"]) .dept-pill button { color: var(--text-faint); }
  .admin-body:not([data-theme="light"]) .flow-step,
  .admin-body:not([data-theme="light"]) .dept-pill,
  .admin-body:not([data-theme="light"]) .refresh-toggle,
  .admin-body:not([data-theme="light"]) .dept-rank-row,
  .admin-body:not([data-theme="light"]) .survey-pick-stats { border-color: var(--border); }
  .admin-body:not([data-theme="light"]) .refresh-toggle:hover,
  .admin-body:not([data-theme="light"]) .refresh-toggle.is-active { border-color: var(--border-strong); }
  .admin-body:not([data-theme="light"]) .refresh-switch-track { background: #454f46; }
  .admin-body:not([data-theme="light"]) .satisfaction-ring { background: conic-gradient(var(--happy) calc(var(--pct) * 1%), #3a453b 0); }
  .admin-body:not([data-theme="light"]) .insight-text { color: var(--text-muted); }
  .admin-body:not([data-theme="light"]) .flow-arrow,
  .admin-body:not([data-theme="light"]) .wizard-step-arrow { color: #5a6a5b; }
}

/* Form fields have no explicit background of their own (Bootstrap's default
   white), so they were the one thing still showing up as a bright box after
   everything else above went dark — worth its own pass rather than folding
   into the big rule list. Bootstrap's badge color utilities (text-bg-*) are
   the same story: fixed hex from bootstrap.min.css, untouched by any of the
   tokens above. */
.admin-body[data-theme="dark"] .form-control,
.admin-body[data-theme="dark"] .form-select {
  background-color: var(--surface-sunken);
  color: var(--text);
}
.admin-body[data-theme="dark"] .form-control:disabled,
.admin-body[data-theme="dark"] .form-select:disabled { background-color: var(--surface); color: var(--text-faint); }
.admin-body[data-theme="dark"] .sidebar-profile { border-top-color: var(--border); }
/* Bootstrap's modal/dropdown backgrounds are hardcoded white via their own
   --bs-* variables, not our tokens, so they stayed a blinding white popup
   over a dark page until overridden here. */
.admin-body[data-theme="dark"] .modal-content {
  background-color: var(--surface);
  color: var(--text);
}
.admin-body[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.admin-body[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.admin-body[data-theme="dark"] .dropdown-item { color: var(--text); }
.admin-body[data-theme="dark"] .dropdown-item:hover,
.admin-body[data-theme="dark"] .dropdown-item:focus { background-color: var(--surface-sunken); color: var(--text); }
.admin-body[data-theme="dark"] .admin-content .badge.text-bg-light { background-color: var(--surface-sunken) !important; color: var(--text) !important; }
.admin-body[data-theme="dark"] .admin-content .badge.text-bg-secondary { background-color: var(--border-strong) !important; color: var(--text) !important; }
.admin-body[data-theme="dark"] .admin-content .badge.text-bg-dark { background-color: var(--border-strong) !important; color: var(--text) !important; }
.admin-body[data-theme="dark"] .admin-content .badge.text-bg-warning { background-color: var(--neutral-bg) !important; color: var(--neutral) !important; }
.admin-body[data-theme="dark"] .admin-content .badge.text-bg-success { background-color: var(--happy-bg) !important; color: var(--happy) !important; }
.admin-body[data-theme="dark"] .admin-content .badge.text-bg-danger { background-color: var(--sad-bg) !important; color: var(--sad) !important; }
.admin-body[data-theme="dark"] .admin-content .badge.border { border-color: var(--border-strong) !important; }
@media (prefers-color-scheme: dark) {
  .admin-body:not([data-theme="light"]) .form-control,
  .admin-body:not([data-theme="light"]) .form-select {
    background-color: var(--surface-sunken);
    color: var(--text);
  }
  .admin-body:not([data-theme="light"]) .form-control:disabled,
  .admin-body:not([data-theme="light"]) .form-select:disabled { background-color: var(--surface); color: var(--text-faint); }
  .admin-body:not([data-theme="light"]) .sidebar-profile { border-top-color: var(--border); }
  .admin-body:not([data-theme="light"]) .modal-content {
    background-color: var(--surface);
    color: var(--text);
  }
  .admin-body:not([data-theme="light"]) .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
  .admin-body:not([data-theme="light"]) .dropdown-menu {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
  }
  .admin-body:not([data-theme="light"]) .dropdown-item { color: var(--text); }
  .admin-body:not([data-theme="light"]) .dropdown-item:hover,
  .admin-body:not([data-theme="light"]) .dropdown-item:focus { background-color: var(--surface-sunken); color: var(--text); }
  .admin-body:not([data-theme="light"]) .admin-content .badge.text-bg-light { background-color: var(--surface-sunken) !important; color: var(--text) !important; }
  .admin-body:not([data-theme="light"]) .admin-content .badge.text-bg-secondary { background-color: var(--border-strong) !important; color: var(--text) !important; }
  .admin-body:not([data-theme="light"]) .admin-content .badge.text-bg-dark { background-color: var(--border-strong) !important; color: var(--text) !important; }
  .admin-body:not([data-theme="light"]) .admin-content .badge.text-bg-warning { background-color: var(--neutral-bg) !important; color: var(--neutral) !important; }
  .admin-body:not([data-theme="light"]) .admin-content .badge.text-bg-success { background-color: var(--happy-bg) !important; color: var(--happy) !important; }
  .admin-body:not([data-theme="light"]) .admin-content .badge.text-bg-danger { background-color: var(--sad-bg) !important; color: var(--sad) !important; }
  .admin-body:not([data-theme="light"]) .admin-content .badge.border { border-color: var(--border-strong) !important; }
}

/* ---------- Printable Responses Report ---------- */
.print-body {
  background: #eef1ee;
  min-height: 100vh;
  padding: 1.75rem 1rem;
}
.print-toolbar {
  max-width: 1100px;
  margin: 0 auto 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.print-sheet {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--brand-white);
  border-radius: 1rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 4px 16px rgba(4, 55, 11, .08);
  border: 1px solid var(--border);
}
.print-letterhead {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 3px solid var(--brand-dark);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.print-logo { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.print-letterhead h1 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .01em; }
.print-letterhead p { font-size: .85rem; color: #666; margin: 0; }
.print-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8rem;
  color: #666;
  margin-bottom: 1.25rem;
}
.print-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.print-table th, .print-table td { border: 1px solid #dde2dc; padding: .45rem .55rem; text-align: left; vertical-align: middle; }
.print-table thead th { background: #eef4ee; font-weight: 700; color: var(--brand-dark); }
.print-icon-happy { color: var(--happy); font-size: 1rem; }
.print-icon-sad { color: var(--sad); font-size: 1rem; }
.print-result { display: inline-block; padding: .15rem .55rem; border-radius: 1rem; font-weight: 700; font-size: .72rem; }
.print-result-happy { background: var(--happy-bg); color: var(--happy); }
.print-result-sad { background: var(--sad-bg); color: var(--sad); }
.print-comment-row td { font-size: .74rem; color: #555; background: #fafbfa; }
.print-footer { margin-top: 1.5rem; text-align: center; font-size: .72rem; color: #999; }

.report-print-stats {
  display: flex;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1rem;
  background: #f6faf4;
  border-radius: .6rem;
}
.report-print-stats > div { flex: 1; text-align: center; }
.report-print-stat-value { display: block; font-size: 1.4rem; font-weight: 800; color: var(--brand-dark); }
.report-print-stat-label { display: block; font-size: .72rem; color: #666; text-transform: uppercase; letter-spacing: .03em; }

.print-section-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin: 1.5rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid #eef4ee;
}
.print-insight-list {
  margin: 0 0 .5rem;
  padding-left: 1.2rem;
  font-size: .82rem;
  color: #333;
}
.print-insight-list li { margin-bottom: .4rem; }

@media print {
  .no-print { display: none !important; }
  .print-body { background: #fff; padding: 0; }
  .print-sheet { box-shadow: none; border: none; border-radius: 0; padding: 0; max-width: 100%; }
  .print-table thead { display: table-header-group; }
  .print-table tr { page-break-inside: avoid; }
}

/* ================= Admin Portal Landing (login.php) ================= */
/* The landing page always fits the viewport exactly — never scrolls. */
.portal-body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  background: #0b2410;
  overflow: hidden;
}
.portal-hero {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 2rem 1.5rem;
  isolation: isolate;
  overflow: hidden;
}
.portal-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../img/building-web.jpg') center/cover no-repeat;
  transform: scale(1.04);
  animation: portalZoom 18s ease-out both;
}
.portal-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 30, 10, .55) 0%, rgba(4, 45, 14, .32) 35%, rgba(4, 40, 12, .4) 70%, rgba(3, 22, 8, .72) 100%),
    linear-gradient(115deg, rgba(4, 55, 11, .3) 0%, rgba(10, 92, 23, .12) 55%, rgba(4, 55, 11, .28) 100%);
}

/* ---------- Top bar ---------- */
.portal-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  animation: portalFadeDown .6s ease both;
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.portal-brand-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: var(--brand-white);
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.portal-brand-name {
  color: var(--brand-white);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-signin-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: linear-gradient(120deg, #1f9c3a 0%, #16a34a 100%);
  color: var(--brand-white);
  border: none;
  border-radius: 2rem;
  padding: .72rem 1.6rem;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(22, 163, 74, .38);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.portal-signin-btn i { transition: transform .18s ease; }
.portal-signin-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(22, 163, 74, .48);
}
.portal-signin-btn:hover i { transform: translateX(4px); }
.portal-signin-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .65); outline-offset: 3px; }

/* ---------- Hero content ---------- */
.portal-hero-content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(.75rem, 4vh, 2.5rem) 0;
}
.portal-hero-content > * { animation: portalFadeUp .7s cubic-bezier(.22, 1, .36, 1) both; }
.portal-hero-content > *:nth-child(2) { animation-delay: .1s; }
.portal-hero-content > *:nth-child(3) { animation-delay: .18s; }
.portal-hero-content > *:nth-child(4) { animation-delay: .26s; }
.portal-hero-content > *:nth-child(5) { animation-delay: .34s; }
.portal-title {
  margin: 0;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--brand-white);
  text-shadow: 0 6px 30px rgba(0, 0, 0, .45);
}
.portal-kicker {
  margin: clamp(.45rem, 1.6vh, .9rem) 0 0;
  font-size: clamp(.64rem, 1.2vw, .78rem);
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.portal-divider {
  display: block;
  width: 66px;
  height: 3px;
  border-radius: 3px;
  margin: clamp(.8rem, 2.4vh, 1.6rem) 0;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  box-shadow: 0 0 16px rgba(34, 197, 94, .6);
}
.portal-lead {
  max-width: 620px;
  margin: 0 0 clamp(1.1rem, 3.4vh, 2.25rem);
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.portal-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}
.portal-features li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--brand-white);
  font-size: .95rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2rem;
  padding: .6rem 1.25rem;
  backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.portal-features li:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .17);
  border-color: rgba(74, 222, 128, .55);
}
.portal-features i { color: #4ade80; font-size: 1rem; }
.portal-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  animation: portalFadeUp .7s ease .42s both;
}

/* ---------- Sign-in modal ---------- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(3, 22, 8, .72);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.login-overlay.open { opacity: 1; visibility: visible; }
.login-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--brand-white);
  border-radius: 1.35rem;
  padding: 2.25rem 2.1rem 1.9rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  transform: translateY(22px) scale(.97);
  opacity: 0;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.login-overlay.open .login-card { transform: none; opacity: 1; }
.login-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  background: #f1f4f0;
  color: #6b736a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.login-close:hover { background: var(--sad-bg); color: var(--sad); }
.login-close:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.login-card-head { text-align: center; margin-bottom: 1.5rem; }
.login-logo-wrap {
  width: 68px;
  height: 68px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand-dark), #0a5c17);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(4, 55, 11, .3);
}
.login-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--brand-white);
  border-radius: 50%;
  padding: 3px;
}
.login-card-head h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--brand-black);
  margin: 0 0 .3rem;
}
.auth-subtitle {
  color: #7b8079;
  font-size: .85rem;
  font-weight: 600;
  margin: 0;
}
.auth-error {
  background: var(--sad-bg);
  color: var(--sad);
  border: 1px solid rgba(192, 57, 43, .2);
  border-left: 4px solid var(--sad);
  border-radius: .65rem;
  padding: .7rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  animation: authShake .4s ease both;
}
.auth-error i { font-size: 1rem; flex-shrink: 0; }

.auth-field { margin-bottom: 1.05rem; }
.auth-field label {
  font-size: .78rem;
  font-weight: 700;
  color: #4a4d4a;
  margin-bottom: .35rem;
  display: block;
}
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-icon {
  position: absolute;
  left: .9rem;
  color: #a8b3a6;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  transition: color .15s ease;
}
.auth-field input {
  width: 100%;
  border: 2px solid #e3ece2;
  background: #fbfdfa;
  border-radius: .75rem;
  padding: .7rem .9rem .7rem 2.6rem;
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-field input::placeholder { color: #b6bdb4; font-weight: 500; }
.auth-field input:hover { border-color: #d2e0d0; }
.auth-field input:focus {
  outline: none;
  background: var(--brand-white);
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 4px rgba(4, 55, 11, .1);
}
.auth-input-wrap:focus-within .auth-input-icon { color: var(--brand-dark); }
.auth-field input[type="password"],
.auth-field input.has-toggle { padding-right: 2.8rem; }
.auth-toggle-pw {
  position: absolute;
  right: .35rem;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  background: transparent;
  color: #a8b3a6;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.auth-toggle-pw:hover { color: var(--brand-dark); background: #eef4ed; }
.auth-toggle-pw:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 1px; }
.auth-capslock {
  display: none;
  align-items: center;
  gap: .35rem;
  margin-top: .4rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--neutral);
}
.auth-capslock.show { display: flex; }

.auth-submit-btn {
  width: 100%;
  background: linear-gradient(120deg, var(--brand-dark) 0%, #0a5c17 100%);
  color: var(--brand-white);
  border: none;
  border-radius: .75rem;
  padding: .85rem;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .6rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(4, 55, 11, .22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.auth-submit-btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(4, 55, 11, .28); }
.auth-submit-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(4, 55, 11, .22); }
.auth-submit-btn:focus-visible { outline: 3px solid rgba(4, 55, 11, .35); outline-offset: 2px; }
.auth-submit-btn.is-loading { pointer-events: none; opacity: .8; }
.auth-submit-btn.is-loading i { animation: iconSpin .7s linear infinite; }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(4, 55, 11, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
.page-loader.show { opacity: 1; visibility: visible; }
.page-loader-spinner {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: var(--brand-white);
  animation: iconSpin .8s linear infinite;
}
.page-loader-text {
  color: var(--brand-white);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
}

.auth-footnote {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #eef1ed;
  font-size: .74rem;
  font-weight: 600;
  color: #9aa298;
  text-align: center;
  line-height: 1.5;
}

@keyframes portalZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1.04); }
}
@keyframes portalFadeDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes portalFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-hero-bg,
  .portal-topbar,
  .portal-hero-content > *,
  .portal-footer,
  .auth-error { animation: none; }
}

/* ---------- Portal responsive ---------- */
@media (max-width: 767.98px) {
  .portal-hero { padding: 1rem 1.1rem 1.25rem; }
  .portal-brand-logo { width: 38px; height: 38px; }
  .portal-brand-name { font-size: .8rem; white-space: normal; line-height: 1.25; }
  .portal-signin-btn { padding: .58rem 1.15rem; font-size: .88rem; }
  .portal-kicker { letter-spacing: .18em; }
  .portal-divider { margin: 1.2rem 0; }
  .portal-features { gap: .55rem; }
  .portal-features li { font-size: .84rem; padding: .5rem 1rem; }
  .login-card { padding: 1.9rem 1.4rem 1.6rem; }
  /* iOS Safari zooms the page on focus of any input under 16px. */
  .auth-field input { font-size: 1rem; }
}
@media (max-width: 480px) {
  .portal-brand-name { font-size: .72rem; max-width: 9.5rem; }
  .portal-signin-btn { padding: .55rem 1rem; }
}
/* Short viewports: tighten everything further so nothing is cut off. */
@media (max-height: 620px) {
  .portal-hero { padding: .85rem 1.25rem 1rem; }
  .portal-lead { font-size: .9rem; line-height: 1.5; max-width: 540px; }
  .portal-features li { font-size: .82rem; padding: .45rem .95rem; }
  .portal-features i { font-size: .9rem; }
  .portal-footer { font-size: .66rem; }
  .login-card { padding: 1.5rem 1.35rem 1.25rem; }
  .login-logo-wrap { width: 52px; height: 52px; margin-bottom: .6rem; }
  .login-card-head { margin-bottom: 1.1rem; }
}

/* ================= Patient Survey (Conversational Slides) ================= */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
}

.survey-body {
  background: url('../img/building-web.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.75rem 1rem;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
}
.survey-shell {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  background: var(--brand-white);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: row;
  min-height: 460px;
  max-height: 620px;
  box-shadow: 0 2px 6px rgba(4, 55, 11, .06), 0 24px 60px rgba(4, 55, 11, .2);
  border: 1px solid rgba(255, 255, 255, .6);
  overflow: hidden;
}

/* ---------- Left: branded panel ---------- */
.survey-brand-panel {
  position: relative;
  width: 38%;
  flex-shrink: 0;
  background: linear-gradient(155deg, var(--brand-dark) 0%, #0a4d14 55%, #0f3d14 100%);
  color: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1.5rem;
  overflow: hidden;
}
.brand-panel-decor {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(255,255,255,.09) 0, transparent 42%),
    radial-gradient(circle at 88% 90%, rgba(255,255,255,.08) 0, transparent 46%),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.06) 0, transparent 30%);
  pointer-events: none;
}
.brand-panel-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.brand-logo-wrap {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  box-shadow: 0 10px 24px rgba(0,0,0,.3), 0 0 0 5px rgba(255,255,255,.1);
}
.brand-logo { width: 100%; height: 100%; object-fit: contain; }
.brand-hospital-name {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.brand-tagline {
  font-size: .74rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0;
}
.brand-room-pill {
  margin-top: .2rem;
  font-size: .74rem;
  font-weight: 700;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  padding: .4rem .9rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

/* ---------- Right: form panel ---------- */
.survey-form-panel {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Status cards (invalid link / inactive survey / device cap) ----------
   Reuses the same branded-header + decor treatment as .survey-brand-panel so
   every screen the patient can land on — mid-wizard or a dead end — reads as
   one consistent, designed product instead of the wizard looking premium and
   these edge-case screens looking like an afterthought. */
.status-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  margin: 3rem auto;
  background: var(--brand-white);
  border-radius: 1.5rem;
  box-shadow: 0 2px 6px rgba(4, 55, 11, .06), 0 24px 60px rgba(4, 55, 11, .2);
  border: 1px solid rgba(255, 255, 255, .6);
  overflow: hidden;
}
.status-card-brand {
  position: relative;
  background: linear-gradient(155deg, var(--brand-dark) 0%, #0a4d14 55%, #0f3d14 100%);
  padding: 2.25rem 1.5rem 1.5rem;
  text-align: center;
  overflow: hidden;
}
.status-card-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.1) 0, transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(255,255,255,.08) 0, transparent 46%);
  pointer-events: none;
}
.status-card-logo-wrap {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .85rem;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 5px rgba(255,255,255,.1);
}
.status-card-logo { width: 100%; height: 100%; object-fit: contain; }
.status-card-org {
  position: relative;
  z-index: 1;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.status-card-body {
  padding: 2.5rem 2rem 2.75rem;
  text-align: center;
}
.status-card-body h1 { font-weight: 800; }
.status-card-body p { line-height: 1.55; }

.survey-progress {
  height: 5px;
  background: #edf3ec;
}
.survey-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-dark), var(--happy));
  width: 0%;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px rgba(31, 138, 59, .45);
  transition: width .4s ease;
}

/* ---------- Slide stage (conversational form) ---------- */
.slide-stage {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.slide-back-btn {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f2f4f1;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s ease;
}
.slide-back-btn:hover { background: var(--happy-bg); }
.slide-back-btn:active { transform: scale(.94); }

.slide {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1.75rem;
  width: 100%;
}

.slide-exit {
  animation: slideOutUp .28s ease forwards;
}
.slide-enter {
  animation: slideInUp .32s ease both;
}

@keyframes slideOutUp {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-26px); opacity: 0; }
}
@keyframes slideInUp {
  from { transform: translateY(26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-eyebrow {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-gray);
  margin-bottom: .65rem;
}

.slide-question {
  font-size: 1.35rem;
  font-weight: 700;
  color: #4a4d4a;
  line-height: 1.35;
  margin-bottom: 1.3rem;
  max-width: 340px;
}

.slide-control { width: 100%; max-width: 280px; margin: 0 auto 1.1rem; }

.slide-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

/* Happy / Sad choice circles */
.face-choice-row { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; }
.face-choice {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid #e3ece2;
  background: var(--brand-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  font-weight: 800;
  font-size: .74rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  transition: all .15s ease;
}
.face-choice .face-emoji { font-size: 1.85rem; line-height: 1; }

/* Language choice (first slide) — text pills, not the happy/sad circles */
.lang-choice-row { display: flex; gap: 1rem; justify-content: center; }
.lang-choice {
  padding: .85rem 1.75rem;
  border-radius: 2rem;
  border: 2px solid #e3ece2;
  background: var(--brand-white);
  font-weight: 700;
  font-size: .95rem;
  color: #4a4d4a;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  transition: all .15s ease;
}
.lang-choice:hover, .lang-choice.selected {
  border-color: var(--brand-dark);
  background: var(--happy-bg);
  color: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(4, 55, 11, .18);
}
.lang-choice:disabled { pointer-events: none; }
.lang-choice:disabled:not(.selected) { opacity: .4; }
.lang-choice:active { transform: scale(.96); }
.face-choice-happy:hover, .face-choice-happy.selected {
  border-color: var(--happy);
  background: var(--happy-bg);
  color: var(--happy);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(31, 138, 59, .22);
}
.face-choice-sad:hover, .face-choice-sad.selected {
  border-color: var(--sad);
  background: var(--sad-bg);
  color: var(--sad);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(192, 57, 43, .22);
}
.face-choice:active { transform: scale(.94); }
.face-choice:disabled { pointer-events: none; }
.face-choice:disabled:not(.selected) { opacity: .4; }

/* Patient's "what went wrong" note, shown under a sad answer in the admin */
.answer-reason {
  margin-top: .55rem;
  padding: .55rem .8rem;
  background: var(--sad-bg);
  border-left: 3px solid var(--sad);
  border-radius: .5rem;
  font-size: .85rem;
  color: #7a3229;
}
.answer-reason i { color: var(--sad); }


/* Department ranking — tap-to-rank chips (max 3 picks) */
.dept-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto 1.1rem;
}
.dept-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 2px solid #e3ece2;
  background: var(--brand-white);
  border-radius: 2rem;
  padding: .4rem .9rem .4rem .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: #4a4d4a;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
  transition: all .15s ease;
}
.dept-chip-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef1ed;
  color: var(--brand-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  flex-shrink: 0;
}
.dept-chip.selected {
  border-color: var(--brand-dark);
  background: var(--happy-bg);
  color: var(--brand-dark);
  box-shadow: 0 6px 16px rgba(4, 55, 11, .16);
}
.dept-chip.selected .dept-chip-rank {
  background: var(--brand-dark);
  color: var(--brand-white);
}
.dept-chip:disabled { opacity: .4; cursor: not-allowed; }
.dept-chip:active { transform: scale(.96); }

/* Honeypot: invisible to sighted users and screen readers, present in the DOM
   for bots that blindly fill every input on the page. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Minimal centered text input / textarea */
.slide-text-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #dfe6dd;
  background: transparent;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  padding: .5rem .1rem;
  color: var(--brand-black);
}
.slide-text-input::placeholder { color: #c3c9c2; font-weight: 500; }
.slide-text-input:focus { outline: none; border-color: var(--happy); box-shadow: 0 6px 14px rgba(31, 138, 59, .12); }

.slide-textarea {
  width: 100%;
  border: 2px solid #e3ece2;
  border-radius: 1rem;
  padding: .8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
  resize: none;
  min-height: 100px;
}
.slide-textarea::placeholder { color: #c3c9c2; }
.slide-textarea:focus { outline: none; border-color: var(--happy); box-shadow: 0 6px 14px rgba(31, 138, 59, .1); }

.slide-continue-btn {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-soft));
  border: none;
  color: var(--brand-white);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: .92rem;
  padding: .75rem 2.1rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 8px 20px rgba(4, 55, 11, .25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.slide-continue-btn:disabled {
  background: var(--brand-gray);
  color: var(--brand-white);
  opacity: .65;
  box-shadow: none;
}
.slide-continue-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(4, 55, 11, .32);
}
.slide-continue-btn:not(:disabled):active { transform: scale(.97) translateY(0); }

.slide-skip-btn {
  background: none;
  border: none;
  color: var(--brand-gray);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.slide-skip-btn:hover { color: var(--brand-dark); text-decoration-color: currentColor; }

.slide-hint {
  font-size: .78rem;
  color: var(--brand-gray);
  margin-top: .5rem;
}

.big-icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.25rem;
  line-height: 1;
  margin-bottom: 1rem;
  animation: iconPop .4s ease both;
}
.big-icon-happy { color: var(--happy); background: var(--happy-bg); box-shadow: 0 12px 28px rgba(31, 138, 59, .18); }
.big-icon-sad { color: var(--brand-dark); background: var(--happy-bg); box-shadow: 0 12px 28px rgba(4, 55, 11, .16); }
.big-icon-error { color: var(--sad); background: var(--sad-bg); box-shadow: 0 12px 28px rgba(192, 57, 43, .16); }
.big-icon-neutral { color: var(--brand-dark); background: var(--surface-sunken); box-shadow: 0 12px 28px rgba(4, 55, 11, .1); }
.big-icon-spin { color: var(--brand-dark); background: #f2f4f1; animation: iconSpin 1.1s linear infinite; }
@keyframes iconSpin { to { transform: rotate(360deg); } }
@keyframes iconPop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.slide-complete .slide-question { max-width: 100%; }

@media (max-width: 767.98px) {
  .survey-shell { flex-direction: column; min-height: auto; max-height: none; }
  .survey-brand-panel { width: 100%; padding: 1.5rem 1.5rem 1.25rem; }
  .brand-panel-content { gap: .6rem; }
  .brand-logo-wrap { width: 64px; height: 64px; padding: 2px; }
  .brand-hospital-name { font-size: 1.05rem; }
  .brand-tagline { display: none; }
  .auth-form-inner { padding: 1.75rem 1.5rem 2rem; }
  .auth-form-inner h1 { font-size: 1.35rem; }
}

@media (max-width: 575.98px) {
  .survey-body { padding: 0; }
  .survey-shell { border-radius: 0; box-shadow: none; border: none; min-height: 100vh; }
  .auth-body::before { backdrop-filter: none; }
  .slide-question { font-size: 1.25rem; }
  .face-choice { width: 88px; height: 88px; }
  .face-choice .face-emoji { font-size: 1.9rem; }

  /* .survey-body's own padding just went to 0 above (so the full-bleed
     wizard shell can go edge-to-edge on tiny screens) — the status card is a
     floating card, not a full-bleed shell, so it keeps its own gutter here
     instead of inheriting that zeroed padding. */
  .status-card { width: calc(100% - 2rem); margin: 1.5rem auto; }
  .status-card-brand { padding: 1.85rem 1.25rem 1.25rem; }
  .status-card-body { padding: 2rem 1.5rem 2.25rem; }
  .status-card-body .big-icon { width: 92px; height: 92px; font-size: 2.6rem; }
  .status-card-body h1 { font-size: 1.1rem; }
}

@media (max-width: 359.98px) {
  .status-card-logo-wrap { width: 66px; height: 66px; }
  .status-card-org { font-size: .64rem; letter-spacing: .06em; }
  .status-card-body .big-icon { width: 80px; height: 80px; font-size: 2.2rem; }
}