/* ═══════════════════════════════════════════════════════════
   FPG Support Admin — Styles
═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #0B1F3A;
  --navy-mid:    #13304F;
  --navy-light:  #1B4570;
  --gold:        #C9A24F;
  --gold-pale:   #FDF6E3;
  --white:       #FFFFFF;
  --off-white:   #F7F8FB;
  --surface:     #FFFFFF;
  --border:      #E5E9F0;
  --text:        #111827;
  --text-mid:    #374151;
  --text-muted:  #6B7280;
  --text-light:  #9CA3AF;
  --success:     #059669;
  --error:       #DC2626;
  --warning:     #D97706;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --transition:  0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
}

/* ─── DARK MODE ──────────────────────────────────────── */
/* Cross-fade when the user flips the theme toggle. We gate the
   transition behind a class that JS adds just before switching and
   removes ~320ms later, because (a) we don't want the flash on
   initial page load when the pre-paint script applies the saved
   theme, and (b) we don't want these transitions to slow down every
   normal hover/focus interaction for the rest of the session.
   Properties chosen to cover every color-carrying token (bg, text,
   borders, and SVG fill/stroke — the admin nav icons use currentColor
   so they'd otherwise snap while surrounding surfaces fade). */
html.theme-switching,
html.theme-switching body,
html.theme-switching *::before,
html.theme-switching *::after,
html.theme-switching * {
  transition:
    background-color 280ms ease,
    color 280ms ease,
    border-color 280ms ease,
    fill 280ms ease,
    stroke 280ms ease,
    box-shadow 280ms ease !important;
}

[data-theme="dark"] {
  --navy:        #E5E9F0;           /* inverted text-on-dark */
  --navy-mid:    #C9D0DC;
  --navy-light:  #9FB1CA;
  --gold:        #D8B96A;
  --gold-pale:   rgba(216, 185, 106, 0.08);
  --white:       #1B2030;           /* card surface */
  --off-white:   #11151F;           /* page background */
  --surface:     #1B2030;
  --border:      #2C3345;
  --text:        #E9EDF3;
  --text-mid:    #B9C1CE;
  --text-muted:  #8C93A3;
  --text-light:  #6B7385;
  --success:     #34D399;
  --error:       #F87171;
  --warning:     #FBBF24;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 6px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
}

[data-theme="dark"] body { background: var(--off-white); color: var(--text); }
[data-theme="dark"] .admin-nav { background: rgba(17, 21, 31, 0.85); border-bottom-color: var(--border); }
[data-theme="dark"] .auth-body { background: linear-gradient(135deg, #050912 0%, #0A1328 50%, #132344 100%); }
[data-theme="dark"] .auth-card { background: var(--surface); }
[data-theme="dark"] .stat-card-link { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .ticket-row,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .card-head { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .auth-input { background: var(--off-white); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .form-input:disabled,
[data-theme="dark"] .form-input[disabled] { background: #0B0F18; color: var(--text-muted); }
[data-theme="dark"] .admin-tab:hover { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .admin-tab.active { background: rgba(216, 185, 106, 0.14); }
[data-theme="dark"] .admin-user-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .admin-user-menu a:hover { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .admin-user-btn { background: var(--surface); }
[data-theme="dark"] .btn-primary { background: #E5E9F0; color: #0B0F18; border-color: #E5E9F0; }
[data-theme="dark"] .btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }
[data-theme="dark"] .btn-outline { background: var(--surface); color: var(--text-mid); }
[data-theme="dark"] .btn-outline:hover { background: rgba(255, 255, 255, 0.03); color: var(--text); }
[data-theme="dark"] .btn-ghost { color: var(--text-mid); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.03); color: var(--text); }
[data-theme="dark"] .quick-action { background: rgba(255, 255, 255, 0.02); border-color: var(--border); }
[data-theme="dark"] .quick-action:hover { background: var(--surface); }
[data-theme="dark"] .inbox-search-input { background: var(--surface); color: var(--text); }
[data-theme="dark"] .inbox-filter-tab { background: var(--surface); border-color: var(--border); color: var(--text-mid); }
[data-theme="dark"] .inbox-filter-tab:hover { color: var(--text); }
[data-theme="dark"] .inbox-filter-tab.active { background: #E5E9F0; color: #0B0F18; }
[data-theme="dark"] .inbox-filter-tab.active .filter-count { background: rgba(11, 15, 24, 0.3); color: #0B0F18; }
[data-theme="dark"] .inbox-empty { background: rgba(255, 255, 255, 0.02); border-color: var(--border); }
[data-theme="dark"] .activity-message { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .ticket-row-subject { color: var(--text); }
[data-theme="dark"] .ticket-num,
[data-theme="dark"] .ticket-num-lg { color: var(--text-muted); }
[data-theme="dark"] .page-title,
[data-theme="dark"] .team-name,
[data-theme="dark"] .submitter-name,
[data-theme="dark"] .aging-subject,
[data-theme="dark"] .responder-count,
[data-theme="dark"] .quick-action-title,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .stat-value { color: var(--text); }
[data-theme="dark"] .auth-title { color: var(--text); }
[data-theme="dark"] .card-head h2 { color: var(--text); }
[data-theme="dark"] .bulk-bar { background: var(--surface); border-color: var(--border); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .chart-empty { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .attachment-list a { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .role-option-card { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .role-option input:checked + .role-option-card { background: rgba(201, 162, 79, 0.1); }
[data-theme="dark"] .cat-toggle-card { background: var(--surface); }
[data-theme="dark"] .cat-toggle-row:hover { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .generated-pw-box { background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, rgba(52, 211, 153, 0.04) 100%); border-color: rgba(52, 211, 153, 0.25); }
[data-theme="dark"] .generated-pw-value { background: var(--off-white); }
[data-theme="dark"] .ghost-note { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ticket-row-wrap:has(input:checked) {
  border-color: var(--gold);
  background: rgba(216, 185, 106, 0.05);
  box-shadow: 0 0 0 3px rgba(216, 185, 106, 0.1);
}
[data-theme="dark"] .mine-toggle { background: var(--surface); color: var(--text-mid); }
[data-theme="dark"] .mine-toggle:hover { color: var(--text); }
[data-theme="dark"] .ticket-assignee { background: rgba(255, 255, 255, 0.04); color: var(--text-mid); }
[data-theme="dark"] .ticket-assignee--me {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.35);
  color: #C4B5FD;
}
[data-theme="dark"] .assignee-empty { background: rgba(255, 255, 255, 0.03); }

html { font-size: 16px; scroll-behavior: smooth; }

/* Visually hidden but exposed to assistive tech.
   Used for labels where we rely on a placeholder or icon for sighted UX.
   Belt-and-suspenders: legacy `clip` + modern `clip-path` so the label
   stays hidden even if one gets overridden by an inherited rule. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--off-white);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
code { font-family: 'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace; font-size: 0.9em; }

/* ─── LOGO MASKS ──────────────────────────────────────── */
.auth-logo-mark, .admin-logo-mark {
  display: block;
  background-color: var(--navy);
  -webkit-mask: url('../../assets/img/fg-logo.png') no-repeat left center / contain;
          mask: url('../../assets/img/fg-logo.png') no-repeat left center / contain;
}
.auth-logo-mark   { width: 180px; height: 40px; margin: 0 auto 8px; }
.admin-logo-mark  { width: 128px; height: 28px; }

/* ═══════════════════════════════════════════════════════════
   AUTH (LOGIN) PAGE
═══════════════════════════════════════════════════════════ */

.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #07182E 0%, #0D2B4E 50%, #1A3A6A 100%);
  padding: 32px 20px;
  position: relative;
  overflow: hidden;
}

.auth-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,162,79,.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(27,69,112,.5) 0%, transparent 55%);
  pointer-events: none;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: authIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes authIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-logo { text-align: center; margin-bottom: 4px; }

.auth-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  text-align: center;
  margin-top: 20px;
}

.auth-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 4px;
  margin-bottom: 28px;
}

.auth-error {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #991B1B;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.auth-label {
  display: block;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 6px;
  margin-top: 14px;
}
.auth-label:first-of-type { margin-top: 0; }

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.auth-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,79,.15);
}

.auth-btn {
  width: 100%;
  margin-top: 22px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(11,31,58,.35);
}

.auth-btn:hover {
  background: var(--navy-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11,31,58,.4);
}

.auth-foot {
  text-align: center;
  margin-top: 24px;
  font-size: 0.825rem;
  color: var(--text-muted);
}
.auth-foot a { color: var(--navy-light); text-decoration: none; }
.auth-foot a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   ADMIN NAVIGATION
═══════════════════════════════════════════════════════════ */

.admin-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.admin-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.admin-nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-nav-divider {
  display: block;
  width: 1px;
  height: 18px;
  background: var(--border);
}

.admin-nav-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  margin-left: 16px;
}

.admin-tab {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all var(--transition);
  position: relative;
}

.admin-tab:hover { color: var(--navy); background: var(--off-white); }

.admin-tab.active {
  color: var(--navy);
  background: rgba(201, 162, 79, 0.1);
}

.admin-tab.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
}

/* User menu */
.admin-user { position: relative; }

.admin-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 5px 10px 5px 5px;
  color: var(--text);
  transition: all var(--transition);
}

.admin-user-btn:hover {
  border-color: var(--navy-light);
  background: var(--off-white);
}

.admin-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  /* No overflow:hidden — that would clip the presence dot against the
     rounded corner. .avatar-img is constrained to 100%/100% with
     border-radius:inherit so it clips itself; the gradient background is
     clipped by the wrapper's border-radius via the default background-clip. */
}

/* Every avatar wrapper site-wide — .admin-avatar, .team-avatar, .assignee-avatar,
   .ticket-assignee-avatar, .responder-avatar — renders EITHER 2-letter initials
   OR an <img class="avatar-img"> from lib/avatars.php::renderAvatarInner().
   This one rule makes the photo fill whatever shape/size the wrapper defines.
   Without it the <img> renders at its natural 256×256 and explodes the layout. */
.admin-avatar .avatar-img,
.team-avatar .avatar-img,
.assignee-avatar .avatar-img,
.ticket-assignee-avatar .avatar-img,
.responder-avatar .avatar-img,
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Every avatar wrapper needs position:relative so the presence dot and
   hover card can absolute-position themselves against it.
   Note: we intentionally do NOT set overflow:hidden here — the presence
   dot sits on the wrapper's bottom-right corner and must extend outside
   the rounded border. .avatar-img clips itself via border-radius:inherit,
   so photos still respect the wrapper's shape without needing the
   wrapper to clip its children. */
.admin-avatar,
.team-avatar,
.assignee-avatar,
.ticket-assignee-avatar,
.responder-avatar {
  position: relative;
}

/* ─── PRESENCE DOT ──────────────────────────────────────
   A tiny colored circle anchored to the bottom-right of an avatar.
   Rendered by renderPresenceDot() in lib/avatars.php. Shown only for
   online (green) or idle (amber) states; offline admins get no dot.
   Positioned with a small negative offset so the dot sits ON the
   wrapper's bottom-right corner and extends slightly past the rounded
   border — otherwise the border-radius clips it and it renders as a
   sliver tucked INTO the corner. The wrapper is overflow:visible (see
   .admin-avatar rule above) so nothing hides the dot. */
.presence-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30%;
  height: 30%;
  min-width: 8px; min-height: 8px;
  max-width: 14px; max-height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface, #fff);
  z-index: 2;
  pointer-events: none;
}
.presence-online { background: #16a34a; } /* green-600 */
.presence-idle   { background: #d97706; } /* amber-600 */
/* The big 64px avatar on the Admin Avatars page deserves a slightly
   bigger dot so it's visible from across the grid. */
.admin-avatar--lg .presence-dot { width: 16px; height: 16px; }

/* ─── ASSIGNEE HOVER CARD ───────────────────────────────
   Pure CSS tooltip — hidden by default, revealed when the parent
   .ticket-assignee or .assignee-current is hovered or contains focus.
   Absolutely positioned so it floats above rows without shifting layout. */
.ticket-assignee,
.assignee-current {
  position: relative;
}
.assignee-hover-card {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 12px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out, visibility 0s linear 0.12s;
  pointer-events: none;
}
.ticket-assignee:hover      .assignee-hover-card,
.ticket-assignee:focus-within .assignee-hover-card,
.assignee-current:hover     .assignee-hover-card,
.assignee-current:focus-within .assignee-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}
.hover-card-head {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 10px;
}
.hover-card-avatar {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy, #0B1F3A) 0%, var(--navy-light, #1f3b6b) 100%);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hover-card-name   { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.hover-card-title  { font-size: 0.8rem; color: var(--text-muted); margin-top: 1px; }
.hover-card-role-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; align-items: center;
}
.hover-card-role {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px;
  background: #eef2ff; color: #4338ca;
}
.hover-card-role.role-master { background: #fef3c7; color: #854d0e; }
.hover-card-presence {
  font-size: 0.7rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.hover-card-presence::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; display: inline-block;
}
.hover-card-presence--online  { color: #16a34a; }
.hover-card-presence--idle    { color: #d97706; }
.hover-card-presence--offline { color: var(--text-muted, #6b7280); }
.hover-card-contact {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.hover-card-link {
  display: flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none;
  font-size: 0.8rem; word-break: break-all;
}
.hover-card-link:hover { color: var(--navy, #0B1F3A); }
.hover-card-link svg {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted, #6b7280);
}
/* Dark mode: softer surface + stronger shadow so the card still reads
   against a dark page background. */
[data-theme="dark"] .assignee-hover-card {
  background: #1e293b;
  border-color: #334155;
  color: #e5e7eb;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .hover-card-link          { color: #e5e7eb; }
[data-theme="dark"] .hover-card-link:hover    { color: #93c5fd; }
[data-theme="dark"] .hover-card-contact       { border-top-color: #334155; }

/* ─── MOBILE RULES for presence + hover card ───────────
   Touch devices don't have :hover, so a hover-triggered tooltip is
   either invisible or gets stuck in a sticky state after the tap.
   Below 768 px we disable the hover card entirely and fall back to
   the native `title=""` attribute restored on the inbox chip. Users
   can tap through to Team / the ticket page to see full contact info.
   The `(hover: none)` query catches desktop-width touch devices (iPad
   Pro landscape, Surface, etc.) too. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .assignee-hover-card {
    display: none !important;
  }
}

/* Presence dot on ultra-small avatars: .ticket-assignee-avatar shrinks
   to 18 px on mobile (see .ticket-assignee-avatar rule in @media
   max-width: 640px). At that size the 8 px min-width floor produces a
   dot that covers almost half the avatar. We pin it to a small fixed
   size and drop the white ring so it reads as a subtle status marker
   rather than a blob. */
@media (max-width: 640px) {
  .ticket-assignee-avatar .presence-dot {
    width: 7px;
    height: 7px;
    min-width: 0;
    min-height: 0;
    bottom: -1px;
    right: -1px;
    box-shadow: 0 0 0 1.5px var(--surface, #fff);
  }
}

/* ─── SHARED AVATAR FORM STYLES ─────────────────────────
   These used to live inside the <style> block of admin/views/avatars.php.
   Account.php reuses the same classes for its self-serve avatar card,
   so the rules live globally. Page-specific layout (grid, card-head,
   preview sizing) stays in each view's own <style> block. */
.avatar-form { margin-bottom: 14px; }
.avatar-form:last-of-type { margin-bottom: 0; }
.avatar-form-label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.avatar-form-row {
  display: flex; gap: 8px;
}
.avatar-form-row .form-input { flex: 1; min-width: 0; }
.avatar-form--remove { text-align: right; margin-top: 6px; }
.btn-link-danger {
  background: none; border: none; color: #b91c1c;
  padding: 4px 8px; cursor: pointer; font-size: 0.82rem;
}
.btn-link-danger:hover { text-decoration: underline; }

/* Stack the URL/file input over its button on phones so neither gets
   crushed. Applies to both the Admin Avatars Dev Tool and My Account. */
@media (max-width: 640px) {
  .avatar-form-row { flex-direction: column; align-items: stretch; }
}

.admin-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.admin-user-name { font-size: 0.825rem; font-weight: 600; }
.admin-user-role { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.admin-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  padding: 8px 0;
  z-index: 200;
}
.admin-user-menu.open { display: block; animation: menuIn 0.15s ease; }

@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.admin-user-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--text-mid);
  text-decoration: none;
  transition: background var(--transition);
}
.admin-user-menu a:hover { background: var(--off-white); color: var(--navy); }
/* Suppress the browser default focus ring on mouse click — keyboard
   users still get a visible ring via :focus-visible. Matches the
   pattern used on .theme-toggle below so the whole menu feels
   consistent when clicked. */
.admin-user-menu a:focus { outline: 0; }
.admin-user-menu a:focus-visible {
  outline: 2px solid var(--gold, #C9A24F);
  outline-offset: -2px;
}
.admin-user-menu-danger { color: var(--error) !important; border-top: 1px solid var(--border); margin-top: 4px; }
.admin-user-menu-danger:hover { background: #FEF2F2 !important; }

/* ─── MOBILE NAV TOGGLE (hamburger) ──────────────────
   Hidden on desktop; the @media block further down turns it on and
   flips .admin-tabs into a slide-down drawer. Sized at 40×40 so the
   tap target clears the WCAG 2.5.5 minimum (24px) with margin to
   spare — phones need ~44px for a comfortable thumb. */
.admin-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  transition: all var(--transition);
}
.admin-nav-toggle:hover {
  border-color: var(--navy-light);
  background: var(--off-white);
}
.admin-nav-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
[data-theme="dark"] .admin-nav-toggle { background: var(--surface); }

/* Hamburger → X morph. Each line rotates about its own center inside
   the 20×20 SVG, and also translates toward the middle so the two
   diagonals cross at the exact center. transform-box:fill-box anchors
   the transform origin to the line's own bounding box (SVG default is
   the parent <svg>'s origin, which would put the rotation way off). */
.admin-nav-toggle-icon line {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.16s ease;
}
.admin-nav-toggle[aria-expanded="true"] .admin-nav-toggle-line-top {
  transform: translateY(4px) rotate(45deg);
}
.admin-nav-toggle[aria-expanded="true"] .admin-nav-toggle-line-mid {
  opacity: 0;
}
.admin-nav-toggle[aria-expanded="true"] .admin-nav-toggle-line-bot {
  transform: translateY(-4px) rotate(-45deg);
}
/* Reduced-motion users skip the morph animation — the icon still
   swaps to the X shape, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .admin-nav-toggle-icon line { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */

.admin-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 28px 80px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.page-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.page-eyebrow a { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 500; text-decoration: none; }
.page-eyebrow a:hover { color: var(--navy); }

.page-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.page-sub {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 620px;
}
.page-sub code { background: var(--off-white); padding: 1px 6px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */

.card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

/* If a card hosts an .assignee-hover-card (e.g. the "Assigned to" card
   on the ticket detail page), flip overflow to visible so the tooltip
   can extend below the card boundary. Keeps the default clip for every
   other card use (avatar grids, attachment previews, etc.). */
.card:has(.assignee-hover-card) {
  overflow: visible;
}

.card-narrow { max-width: 680px; }

/* Two-column toggle layout on desktop — used on the user-edit form
   to keep "Receives tickets for" and "Default assignee for" in view
   without scrolling. Collapses to one column on narrow screens. */
.toggle-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 -14px;  /* slight bleed so the pair feels roomier than the rest of the form */
}

@media (max-width: 820px) {
  .toggle-pair {
    grid-template-columns: 1fr;
    margin: 0;
  }
}

.card-head {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--off-white);
}
.card-head h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}

.card-body { padding: 28px; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD STATS
═══════════════════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}

.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-value--sm { font-size: 1.3rem; }
.stat-value--muted { color: var(--text-light); }

.stat-foot { font-size: 0.8rem; color: var(--text-muted); }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition);
}
.quick-action:hover {
  border-color: var(--navy-light);
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.quick-action-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-action-icon svg { width: 20px; height: 20px; }

.quick-action-title { font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.quick-action-sub   { font-size: 0.8rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   TEAM GRID
═══════════════════════════════════════════════════════════ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.team-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.team-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-avatar {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.role-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.role-badge.role-master, .role-master {
  background: rgba(201, 162, 79, 0.15);
  color: #8B6F1E;
  border: 1px solid rgba(201, 162, 79, 0.35);
}
.role-badge.role-admin, .role-admin {
  background: rgba(29, 78, 216, 0.08);
  color: #1E40AF;
  border: 1px solid rgba(29, 78, 216, 0.2);
}

.team-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.self-chip {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--gold-pale);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Disabled-user markers. The chip appears next to the name on team cards
   and inline on the ticket page (activity timeline + assignee card) so
   it's immediately clear that this user no longer has access. Muted,
   not alarming — disabled is an administrative state, not an error. */
.disabled-chip {
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--off-white);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--border);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme="dark"] .disabled-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text-muted);
}
.disabled-chip--inline {
  /* Smaller variant for inline use in the activity timeline, where we
     don't want the chip to visually dominate the actor's name. */
  font-size: 0.65rem;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.team-card--disabled {
  opacity: 0.65;
}
.team-card--disabled .team-avatar {
  filter: grayscale(0.5);
}

.team-title {
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.team-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.825rem;
  color: var(--text-mid);
  text-decoration: none;
  transition: color var(--transition);
}
.team-contact-row svg { width: 14px; height: 14px; stroke: var(--text-light); flex-shrink: 0; }
.team-contact-row:hover { color: var(--navy-light); }
.team-contact-row:hover svg { stroke: var(--navy-light); }

.team-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ─── SUBSCRIPTIONS ON TEAM CARD ─────────────────────── */
.team-subs {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.team-subs-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}

.team-subs-empty {
  font-size: 0.8rem;
  color: var(--text-light);
  font-style: italic;
}

.cat-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid;
  letter-spacing: 0.01em;
}

.cat-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── CATEGORY TOGGLE CARD (edit form) ───────────────── */
.cat-toggle-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.cat-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}
.cat-toggle-row:last-child { border-bottom: none; }
.cat-toggle-row:hover { background: var(--off-white); }

.cat-toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-toggle-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

/* Muted note appended to a toggle label (e.g. "currently Brandon") */
.cat-toggle-note {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--off-white);
  border: 1px solid var(--border);
}
[data-theme="dark"] .cat-toggle-note {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

/* Owner chip variant — adds a star icon for "default assignee for" */
.cat-chip--owner svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.cat-toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.cat-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cat-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 100px;
  transition: background 0.22s ease;
}

.cat-toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.22s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);
}

.cat-toggle-switch input:checked + .cat-toggle-slider {
  background: var(--navy);
}
.cat-toggle-switch input:checked + .cat-toggle-slider::before {
  transform: translateX(18px);
}
.cat-toggle-switch input:focus-visible + .cat-toggle-slider {
  box-shadow: 0 0 0 3px rgba(201, 162, 79, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 18px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  line-height: 1.2;
}

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 2px 6px rgba(11,31,58,.2);
}
.btn-primary:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11,31,58,.3);
}

.btn-outline {
  background: var(--white);
  color: var(--text-mid);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--navy-light); color: var(--navy); background: var(--off-white); }

.btn-ghost {
  background: transparent;
  color: var(--text-mid);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--off-white); color: var(--navy); }

.btn-danger {
  background: var(--white);
  color: var(--error);
  border-color: rgba(220,38,38,.2);
}
.btn-danger:hover { background: var(--error); color: #fff; border-color: var(--error); }

/* ═══════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */

.form-grid { display: flex; flex-direction: column; gap: 20px; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-mid);
}

.form-input, .form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,79,.15);
}
.form-input:disabled, .form-input[disabled] {
  background: var(--off-white);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-hint {
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
  justify-content: flex-end;
}

.form-section-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.inline-error {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #991B1B;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 14px;
}

/* Role picker */
.role-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.role-option { cursor: pointer; }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }

.role-option-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: all var(--transition);
  background: var(--off-white);
}
.role-option-card strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.role-option-card span {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.role-option input:checked + .role-option-card {
  border-color: var(--navy);
  background: rgba(11,31,58,.03);
  box-shadow: 0 0 0 3px rgba(11,31,58,.08);
}

/* Danger block */
.danger-block {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}
.danger-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--white);
  color: var(--error);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(220,38,38,.2);
}
.danger-icon svg { width: 22px; height: 22px; }
.danger-block h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #991B1B;
  margin-bottom: 6px;
}
.danger-block p { font-size: 0.9rem; color: #7F1D1D; }

.divider {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: 28px 0;
  position: relative;
}
.divider::before, .divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  height: 1px;
  background: var(--border);
}
.divider::before { left: 0; }
.divider::after { right: 0; }

/* Generated password box */
.generated-pw-box {
  background: linear-gradient(135deg, #F0FDF9 0%, #ECFDF5 100%);
  border: 1.5px solid rgba(5,150,105,.3);
  border-radius: var(--radius-md);
  padding: 24px;
}

.generated-pw-label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 10px;
}

.generated-pw-value {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid rgba(5,150,105,.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.generated-pw-value code {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
  letter-spacing: 0.05em;
}
[data-theme="dark"] .generated-pw-value code { color: var(--text); }

/* Password input with inline Show/Hide toggle — used on admin password
   reset so the starter password isn't exposed while the admin types it. */
.pw-field {
  position: relative;
}
.pw-field .form-input {
  padding-right: 64px;
}
.pw-field-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.pw-field-toggle:hover { color: var(--text); background: rgba(0,0,0,0.04); }
[data-theme="dark"] .pw-field-toggle:hover { background: rgba(255,255,255,0.06); }
.pw-field-toggle:focus-visible {
  outline: 2px solid var(--gold, #C9A24F);
  outline-offset: 0;
}

/* ═══════════════════════════════════════════════════════════
   FLASH
═══════════════════════════════════════════════════════════ */

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  animation: flashIn 0.25s ease;
}

.flash button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  line-height: 1;
}
.flash button:hover { opacity: 1; }

.flash--success { background: #ECFDF5; color: #065F46; border: 1px solid rgba(5,150,105,.25); }
.flash--error   { background: #FEF2F2; color: #991B1B; border: 1px solid rgba(220,38,38,.25); }
.flash--info    { background: #EFF6FF; color: #1E40AF; border: 1px solid rgba(29,78,216,.2); }

@keyframes flashIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.empty-state {
  text-align: center;
  padding: 64px 24px;
}
.empty-state h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.empty-state p { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   INBOX / TICKETS
═══════════════════════════════════════════════════════════ */

.inbox-search {
  position: relative;
  width: 320px;
  max-width: 100%;
}
.inbox-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-light);
  pointer-events: none;
}
.inbox-search-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.inbox-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,79,.15);
}

.inbox-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.inbox-filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.inbox-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-mid);
  border-radius: 100px;
  background: var(--white);
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition: all var(--transition);
}
.inbox-filter-tab:hover {
  border-color: var(--navy-light);
  color: var(--navy);
}
.inbox-filter-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}

.filter-count {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  padding: 1px 8px;
  border-radius: 100px;
  min-width: 22px;
  text-align: center;
}
.inbox-filter-tab.active .filter-count {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}

.inbox-cat-filter {
  /* Explicit positioning context so the sr-only <label> inside this
     container anchors here (not some far-up ancestor), keeping it
     reliably off-screen. */
  position: relative;
}
.inbox-cat-filter select {
  min-width: 180px;
  padding: 9px 36px 9px 14px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Wrap for right-side filters (Mine toggle + category) */
.inbox-right-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mine-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-mid);
  border-radius: 100px;
  background: var(--white);
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}
.mine-toggle:hover {
  border-color: var(--navy-light);
  color: var(--navy);
}
.mine-toggle.active {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  border-color: #6D28D9;
  color: #FFFFFF;
}
.mine-toggle svg { opacity: 0.85; }

/* ─── ASSIGNEE CHIP ON INBOX ROW ──────────────────────── */
.ticket-assignee {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 100px;
  background: var(--off-white);
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-mid);
}
.ticket-assignee--me {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.25);
  color: #5B21B6;
}
.ticket-assignee-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.ticket-assignee--me .ticket-assignee-avatar {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
}
.ticket-assignee-name {
  font-weight: 600;
  white-space: nowrap;
}

/* ─── ASSIGNEE CARD (ticket detail sidebar) ─────────── */
.assignee-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.assignee-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.assignee-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.assignee-role {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 2px;
}
.assignee-empty {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 12px 14px;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  text-align: center;
}
.assignee-form .form-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}
.assignee-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.assignee-row .form-select { flex: 1; min-width: 0; }

/* ─── ASSIGN ACTIVITY ROW ─────────────────────────── */
.activity-assign .activity-dot { background: #7C3AED; box-shadow: 0 0 0 2px #7C3AED; }

/* ─── Ticket list ──────────────────────────────────────── */
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px 16px 0;   /* left padding lives on the checkbox cell */
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.ticket-row-left { flex: 1; min-width: 0; }

.ticket-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ticket-num {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.02em;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}

.pri-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── BULK SELECT UI ─────────────────────────────────── */
.ticket-list-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px 10px;
}

.bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.bulk-select-all input {
  accent-color: var(--navy);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Each row in the inbox list is a single card: checkbox + ticket content
   live inside a shared .ticket-row-wrap with unified border + hover.

   overflow: visible (NOT hidden) — the .assignee-hover-card inside the
   row is absolutely positioned beneath the assignee chip and must be
   allowed to extend below the row's bottom edge to render fully. Nothing
   else in the row relies on a clip: text truncates at child level
   (.ticket-row-subject has its own overflow:hidden+ellipsis), and the
   hover/selected box-shadows are outer shadows that wouldn't be clipped
   anyway.

   position: relative — not for layout, but so the hovered row can raise
   its z-index and paint above later rows. Without this, the hover card
   would be stamped into row 1's paint slot (DOM index 0) and the NEXT
   row's chip (DOM index 1) would render on top of it wherever they
   overlap. See the :hover/:focus-within rule below. */
.ticket-row-wrap {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: visible;
  transition: all var(--transition);
  position: relative;
}
.ticket-row-wrap:hover,
.ticket-row-wrap:focus-within {
  border-color: var(--navy-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  /* Lift above later rows so the assignee hover-card (z-index: 30 inside
     this row) isn't occluded by a neighboring row's chip where the card
     overhangs the row boundary. Any value higher than 0 works; 10 leaves
     headroom for the bulk-action bar (z-index: 50) above it. */
  z-index: 10;
}

/* Subtle highlight when a row is selected for bulk actions */
.ticket-row-wrap:has(input:checked) {
  border-color: var(--navy);
  background: rgba(11, 31, 58, 0.02);
  box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.06);
}

.ticket-row-select {
  display: flex;
  align-items: center;
  padding: 0 14px 0 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.ticket-row-select input {
  accent-color: var(--navy);
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}

/* Floating bulk action bar */
.bulk-bar {
  position: sticky;
  top: 72px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 32px rgba(11, 31, 58, 0.18);
  animation: bulkIn 0.18s ease-out;
}

/* Override flex-display when the HTML hidden attribute is set */
.bulk-bar[hidden] { display: none; }

@keyframes bulkIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bulk-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.bulk-bar-left #bulkCount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  background: var(--gold-pale);
  padding: 2px 10px;
  border-radius: 6px;
}

.bulk-clear {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.bulk-clear:hover { color: var(--navy); }

.bulk-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bulk-bar-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-right: 4px;
}

/* ─── THEME TOGGLE (in user menu) ────────────────────── */
.theme-toggle {
  /* Rendered as a <button> for a11y (role=menuitemcheckbox); strip the
     default button chrome so it visually matches the sibling <a> menu
     rows (Public Support Portal, Sign Out). */
  appearance: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--text-mid);
  margin-top: 4px;
  transition: background var(--transition), color var(--transition);
}
/* Match the hover feel of the other menu rows so the toggle doesn't
   look like a foreign control dropped into the list. */
.theme-toggle:hover { background: var(--off-white); color: var(--navy); }
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}
/* Kill the default blue focus ring on mouse click (browsers apply
   :focus on click in addition to :focus-visible). Keyboard users still
   get the gold ring via :focus-visible below. */
.theme-toggle:focus { outline: 0; }
.theme-toggle:focus-visible {
  outline: 2px solid var(--gold, #C9A24F);
  outline-offset: -2px;
}
.theme-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 100px;
  flex-shrink: 0;
  transition: background var(--transition);
}
.theme-toggle-switch::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--white);
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .theme-toggle { color: var(--text); }
[data-theme="dark"] .theme-toggle-switch { background: var(--gold); }
[data-theme="dark"] .theme-toggle-switch::before { transform: translateX(16px); background: #0B0F18; }

/* "NEW REPLY" badge on inbox rows — customer replied, admin owes a response */
.new-reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  border-radius: 100px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid rgba(217, 119, 6, 0.3);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.08);
  animation: pulseReply 2.4s ease-in-out infinite;
}

@keyframes pulseReply {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.08); }
  50%      { box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.15); }
}

/* Dashboard alert state on the "Awaiting Reply" card */
.stat-card-alert {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: rgba(217, 119, 6, 0.3) !important;
}
.stat-card-alert .stat-value { color: #B45309 !important; }

/* Dashboard stat-label accents — light-mode tuned. The matching
   [data-theme="dark"] overrides above pick brighter hues so the
   labels clear WCAG AA on the dark surface. */
.stat-label--amber  { color: #B45309; }
.stat-label--purple { color: #7C3AED; }
.stat-label--blue   { color: #2563EB; }
.stat-label--orange { color: #D97706; }

[data-theme="dark"] .stat-card-alert {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.14) 0%, rgba(217, 119, 6, 0.06) 100%);
  border-color: rgba(251, 191, 36, 0.35) !important;
}
[data-theme="dark"] .stat-card-alert .stat-value { color: #FBBF24 !important; }
[data-theme="dark"] .stat-label--amber  { color: #FCD34D; }
[data-theme="dark"] .stat-label--purple { color: #C4B5FD; }
[data-theme="dark"] .stat-label--blue   { color: #93C5FD; }
[data-theme="dark"] .stat-label--orange { color: #FDBA74; }
.pri-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ticket-row-subject {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-row-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.ticket-row-meta strong { color: var(--text-mid); }

.ticket-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light);
}
.ticket-row-time {
  font-size: 0.78rem;
  white-space: nowrap;
}
.ticket-row-arrow {
  width: 18px;
  height: 18px;
}

/* Ghost note at the end of the All list */
.ghost-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--text-light);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-style: italic;
}
.ghost-note svg { opacity: 0.6; flex-shrink: 0; }
.ghost-note strong { color: var(--text-muted); font-style: normal; font-weight: 600; }

/* Inbox pagination — prev / "Page X of Y" / next, shown only when
   the filtered result set exceeds one page. Keeps the list anchored
   while the user walks through results. */
.inbox-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding: 10px 0;
}
.inbox-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
}
.inbox-page-btn:hover {
  border-color: var(--navy-light);
  color: var(--navy-light);
  background: var(--off-white);
}
.inbox-page-btn.is-disabled {
  color: var(--text-muted);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.inbox-page-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 100px;
  text-align: center;
}
[data-theme="dark"] .inbox-page-btn {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .inbox-page-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--navy-light);
  color: var(--gold);
}

/* Empty state */
.inbox-empty {
  background: var(--white);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 64px 24px;
  text-align: center;
}
.inbox-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--off-white);
  color: var(--text-muted);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-empty-icon svg { width: 26px; height: 26px; stroke: var(--text-muted); }
.inbox-empty h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.inbox-empty p { color: var(--text-muted); font-size: 0.9rem; }
.inbox-empty a { color: var(--navy-light); text-decoration: underline; }

/* Dashboard stat cards become links in Phase 2 */
.stat-card-link {
  text-decoration: none;
  transition: all var(--transition);
}
.stat-card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy-light);
}

/* ═══════════════════════════════════════════════════════════
   TICKET DETAIL PAGE
═══════════════════════════════════════════════════════════ */

.ticket-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ticket-num-lg {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.ticket-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ticket-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: flex-start;
}

.ticket-main,
.ticket-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ticket-main .card,
.ticket-side .card { margin-bottom: 0; }

.ticket-description {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.ticket-attachments {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.ticket-attachments h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}
.attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attachment-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-mid);
  font-size: 0.85rem;
  transition: border-color var(--transition);
}
.attachment-list a:hover { border-color: var(--navy-light); color: var(--navy); }
.attachment-list svg { width: 16px; height: 16px; stroke: var(--text-muted); }
.attachment-list em { color: var(--text-light); font-style: normal; font-size: 0.78rem; margin-left: auto; }

/* Sidebar */
.submitter-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.submitter-email {
  color: var(--navy-light);
  text-decoration: none;
  font-size: 0.875rem;
}
.submitter-email:hover { text-decoration: underline; }

/* Hairline between the submitter name/email block and the custom
   form fields list inside the merged Submitter card. Anchors the
   fields to the submitter above instead of letting them float as a
   separate section. */
.submitter-fields {
  border-top: 1px solid var(--border);
}

.ticket-fields { padding: 0; }
.ticket-field {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.ticket-field:last-child { border-bottom: none; }
.ticket-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 4px;
}
.ticket-field-value {
  font-size: 0.875rem;
  color: var(--text);
  word-break: break-word;
}
/* Subtle "CT" suffix next to Central-time timestamps so admins don't
   have to infer what timezone the clock refers to. */
.ticket-field-tz {
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
/* Monospace the IP so digits line up when admins eyeball repeat
   submissions from the same device. */
.ticket-field-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

/* ───────────────────────────────────────────────────────────
   TICKET AGE CARD — sidebar analytics-style mini card that
   shows how long this ticket has been open, plus time-to-
   first-response and time-since-last-activity. Styled in the
   KPI vein used on the analytics page but tuned for the
   narrower sidebar column (no 4-wide grid, single prominent
   value instead). Accent stripe color is driven by the
   ticket's status via --ticket-age-accent (set inline in
   ticket.php), so the card visually tracks state changes.
   ─────────────────────────────────────────────────────────── */
.ticket-age-card {
  position: relative;
}
.ticket-age-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--ticket-age-accent, var(--gold));
  border-radius: 0 4px 4px 0;
  /* Sit above the card's own border-radius clip so the stripe
     reaches the rounded corners cleanly. */
  z-index: 1;
}

/* The card-head hosts the H2 and an optional "Final" chip side-by-side,
   so flex-justify them. Regular .card-head is block-level. */
.ticket-age-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ticket-age-frozen {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* Primary metric: big number with small eyebrow above + tiny caption
   below. Mirrors the .kpi-value treatment from the analytics page but
   a touch smaller so it fits the sidebar without crowding. */
.ticket-age-primary {
  padding: 18px 22px 16px;
}
.ticket-age-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}
.ticket-age-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  /* Tabular nums so "3d 12h" and "3d  4h" line up if the user scrolls
     past multiple tickets in a tab row. */
  font-variant-numeric: tabular-nums;
}
.ticket-age-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.ticket-age-arrow {
  margin: 0 2px;
  color: var(--text-light);
  font-weight: 600;
}

/* Secondary metrics grid: first-response time + last-activity age.
   Two equal cells with a hairline divider between them. */
.ticket-age-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.ticket-age-metric {
  padding: 14px 18px;
}
/* Hairline between the two cells. Drawn as a left-border on the 2nd
   cell so it doesn't double up with the card's right border. */
.ticket-age-metric + .ticket-age-metric {
  border-left: 1px solid var(--border);
}
.ticket-age-metric-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}
.ticket-age-metric-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}
.ticket-age-metric-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
  /* Allow up to two lines so short prose like "No replies or updates yet"
     wraps gracefully, while still clamping anything absurd with an
     ellipsis so the row height stays predictable. Timestamps like
     "Apr 23, 2026 · 11:12 PM" fit on one line at normal sidebar widths. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* "Not yet responded" state — coral to match the :customer-reply accent
   used in the inbox pulse chip, keeping the "admin owes a reply" signal
   consistent across views. */
.ticket-age-metric-value--warn,
.ticket-age-metric-sub--warn {
  color: #DC2626;
}

/* Dark mode — border + label tone adjustments so the card doesn't sit
   too bright against the dark sidebar.
   NOTE: We intentionally do NOT override .ticket-age-value /
   .ticket-age-metric-value color here. The base rules use `color:
   var(--navy)`, and in dark mode `--navy` is remapped to the light
   text-on-dark color (#E5E9F0) — so the values already render
   correctly. A previous override forced `color: var(--white)` which
   in dark mode is the CARD SURFACE color (#1B2030), painting the
   numbers the same color as the card background and making them
   invisible. Leave them alone. */
[data-theme="dark"] .ticket-age-frozen {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile: stack the two metric cells vertically so each reads full-width
   under a narrow viewport. Matches how the analytics kpi-grid collapses. */
@media (max-width: 640px) {
  .ticket-age-grid {
    grid-template-columns: 1fr;
  }
  .ticket-age-metric + .ticket-age-metric {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* Activity timeline */
.activity-body { padding: 0; }
.activity-item {
  display: flex;
  gap: 14px;
  padding: 16px 28px 16px 28px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }

.activity-dot {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 10px;
  height: 10px;
  background: var(--border);
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--border);
}

.activity-created .activity-dot { background: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.activity-reply   .activity-dot { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.activity-status_change .activity-dot { background: var(--warning); box-shadow: 0 0 0 2px var(--warning); }
.activity-email-in .activity-dot { background: #7C3AED; box-shadow: 0 0 0 2px #7C3AED; }
/* Submitter reply via the "Add info to this ticket" magic link in their
   confirmation email. Teal to distinguish from email-in (purple) and admin
   reply (green) — both are customer-origin but arrive via different paths. */
.activity-magic-link .activity-dot { background: #0D9488; box-shadow: 0 0 0 2px #0D9488; }
/* Admin hit Reply in Gmail on a forwarded notification — fetch-replies.php
   flags it as internal. Override the purple email-in dot with the same amber
   palette the portal-added internal notes use, so "all internal notes look
   the same regardless of how they got there" holds visually. Applied on top
   of .activity-email-in in the HTML, so this rule wins via specificity. */
.activity-internal-reply .activity-dot {
  background: #D97706;
  box-shadow: 0 0 0 2px #FEF3C7;
}
.activity-internal-reply .activity-message {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 3px solid #D97706;
}
.activity-email_failed .activity-dot { background: #DC2626; box-shadow: 0 0 0 2px #DC2626; }

.activity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.activity-badge--danger {
  background: #FEE2E2;
  color: #991B1B;
}
.activity-badge--muted {
  background: #E5E9F0;
  color: #6B7280;
}
[data-theme="dark"] .activity-badge--danger {
  background: rgba(220, 38, 38, 0.18);
  color: #FCA5A5;
}
[data-theme="dark"] .activity-badge--muted {
  background: rgba(255, 255, 255, 0.08);
  color: #9CA3AF;
}

.activity-email-addr {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text-light);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.activity-sub {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-left: 2px;
}

.activity-body-inner {
  flex: 1;
  min-width: 0;
  padding-left: 16px;
}

.activity-head {
  font-size: 0.875rem;
  color: var(--text-mid);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.activity-head strong { color: var(--navy); }

.activity-when {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-left: auto;
}

.activity-message {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Brief highlight when auto-scrolled to the latest activity on page load */
.activity-item.activity-flash {
  animation: activityFlash 2.4s ease-out;
}
@keyframes activityFlash {
  0%   { background: rgba(201, 162, 79, 0.22); }
  100% { background: transparent; }
}

/* ─── PRIVACY NOTICE (HR tickets) ──────────────────────── */
.privacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5B21B6;
  background: #F5F3FF;
  border: 1px solid rgba(91, 33, 182, 0.25);
  border-radius: 100px;
}
.privacy-chip svg { opacity: 0.85; }

.privacy-notice {
  display: flex;
  gap: 16px;
  background: linear-gradient(135deg, #FAFAFF 0%, #F5F3FF 100%);
  border: 1.5px solid #DDD6FE;
  border-radius: var(--radius-md);
  padding: 22px 24px;
}

.privacy-notice-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--white);
  color: #5B21B6;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #DDD6FE;
}
.privacy-notice-icon svg { width: 20px; height: 20px; }

.privacy-notice-body { flex: 1; min-width: 0; }

.privacy-notice h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3B1D7A;
  margin-bottom: 4px;
}

.privacy-notice p {
  font-size: 0.875rem;
  color: #4C1D95;
  line-height: 1.6;
}
.privacy-notice p strong { color: #3B1D7A; }

.privacy-redacted {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(91, 33, 182, 0.08);
  border-radius: var(--radius-sm);
  color: rgba(91, 33, 182, 0.55);
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: none;
  pointer-events: none;
}

.privacy-attach-notice {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.activity-message-private {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: #5B21B6;
  font-style: italic;
}
.activity-message-private svg { opacity: 0.8; }

/* Small amber hint shown above an inbound email-in reply when the IMAP
   cron flagged the body as truncated (> 50 KB) or empty-after-cleanup
   (the stripper removed all content as signature/quoted text). Keeps
   the admin from being misled by a body that isn't the full message. */
.activity-message-hint {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 2px;
  padding: 6px 10px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: #92400E;
  line-height: 1.35;
}
[data-theme="dark"] .activity-message-hint {
  background: rgba(252, 211, 77, 0.08);
  border-color: rgba(252, 211, 77, 0.28);
  color: #FCD34D;
}

.privacy-sidebar-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: #5B21B6;
}

/* Tiny checkbox helper (reply form) */
.checkbox-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-mid);
  cursor: pointer;
  user-select: none;
}
.checkbox-mini input { accent-color: var(--navy); cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   ANALYTICS
═══════════════════════════════════════════════════════════ */

.range-toggle {
  display: inline-flex;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}

.range-toggle-option {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 100px;
  transition: all var(--transition);
  line-height: 1.2;
}
.range-toggle-option:hover { color: var(--navy); }
.range-toggle-option.active {
  background: var(--navy);
  color: #FFFFFF;
}

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--gold);
  border-radius: 0 4px 4px 0;
}

.kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}

.kpi-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.kpi-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Two-column grid for charts/lists */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Chart wrappers */
.chart-wrap {
  position: relative;
  height: 280px;
}
.chart-wrap--tall { height: 320px; }

.chart-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-light);
  font-size: 0.9rem;
  background: var(--off-white);
  border-radius: var(--radius-sm);
}

/* Responder list */
.responder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.responder-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.responder-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.responder-meta {
  flex: 1;
  min-width: 0;
}

.responder-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.responder-bar-outer {
  height: 6px;
  background: var(--off-white);
  border-radius: 100px;
  overflow: hidden;
}

.responder-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 100%);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}

.responder-count {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  min-width: 28px;
  text-align: right;
  letter-spacing: -0.02em;
}

/* Aging list */
.aging-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aging-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
}
.aging-row:hover {
  background: var(--white);
  border-color: var(--navy-light);
  transform: translateY(-1px);
}
.aging-row.aging-warning { border-left-color: #D97706; background: #FFFBF0; }
.aging-row.aging-danger  { border-left-color: #DC2626; background: #FEF6F6; }

.aging-age {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  min-width: 42px;
  text-align: center;
  background: var(--white);
  border-radius: 6px;
  padding: 6px 4px;
  border: 1.5px solid var(--border);
  letter-spacing: -0.02em;
}

.aging-danger .aging-age {
  color: #991B1B;
  background: #FEE2E2;
  border-color: rgba(220,38,38,0.3);
}

.aging-warning .aging-age {
  color: #92400E;
  background: #FEF3C7;
  border-color: rgba(217,119,6,0.3);
}

.aging-meta {
  flex: 1;
  min-width: 0;
}

.aging-subject {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aging-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.aging-sub-sep { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid  { grid-template-columns: repeat(2, 1fr); }
  .two-col-grid { grid-template-columns: 1fr; }
  .admin-nav-inner { padding: 0 16px; gap: 16px; }
  .admin-tabs { gap: 2px; }
  .admin-tab { padding: 8px 10px; font-size: 0.8rem; }
  .admin-user-meta { display: none; }
  .ticket-grid { grid-template-columns: 1fr; }
  .inbox-search { width: 100%; }
  .chart-wrap { height: 240px; }
}

@media (max-width: 640px) {
  .admin-main { padding: 24px 16px 60px; }
  .team-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .role-picker { grid-template-columns: 1fr; }
  .admin-nav-title, .admin-nav-divider { display: none; }
  .page-head { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .page-sub { font-size: 0.88rem; }
  .auth-card { padding: 32px 24px; }
}

/* ─── INBOX MOBILE LAYOUT ───────────────────────────────
   Phones hit the inbox with ~343px of content width (iPhone @ 375px
   minus 16px gutters × 2). Desktop layout fights for that space:
   ▸ filter tabs wrap to 2–3 rows before the list appears
   ▸ category + priority selects have min-width:180px → overflow
   ▸ ticket row is flex-row with checkbox + left + assignee + right,
     so the subject truncates to ~10 chars when an assignee is present
   ▸ bulk bar sticks at top:72px (desktop nav height); mobile nav is shorter
   This block restructures all of the above into a phone-native layout:
   horizontally scrollable tabs, stacked filters, card-style rows where
   subject wraps to 2 lines and the meta row sits at the bottom.       */
@media (max-width: 640px) {

  /* Filter bar: tabs scroll horizontally on a single line (edge-bleed
     to the viewport edges so the scroll feels intentional), filters
     stack as a row underneath with the selects going fluid. */
  .inbox-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }
  .inbox-filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Bleed the scroll strip to the viewport edges so cut-off tabs
       read as "scroll for more" instead of "something's missing". */
    margin: 0 -16px;
    padding: 2px 16px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .inbox-filter-tabs::-webkit-scrollbar { display: none; }
  .inbox-filter-tab { flex-shrink: 0; padding: 7px 12px; font-size: 0.82rem; }
  .filter-count { padding: 1px 7px; font-size: 0.68rem; }

  /* Right-side filters: Mine stays compact (icon + short label), the
     two selects split the remaining row evenly. min-width:180px on
     the select would force overflow — override to 0 so they can
     shrink into their flex share. */
  .inbox-right-filters {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .mine-toggle { padding: 8px 12px; }
  .inbox-cat-filter { min-width: 0; }
  .inbox-cat-filter select { min-width: 0; width: 100%; }

  /* Ticket row: reflow into a two-line card. Row 1 = all of
     .ticket-row-left (head pills + subject + meta). Row 2 = optional
     assignee chip on the left, time on the right. The chevron gets
     dropped because the entire <a> is already the tap target and the
     arrow is just decoration on desktop. */
  .ticket-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px 12px 0;
  }
  .ticket-row-left { flex-basis: 100%; }
  .ticket-row-head { gap: 6px; margin-bottom: 5px; }
  .ticket-row-subject {
    /* Allow two lines so the subject is actually readable on a phone.
       Clamp rather than free-wrap so a 200-char subject doesn't push
       the meta off the fold. */
    white-space: normal;
    overflow: hidden;
    text-overflow: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    font-size: 0.95rem;
    line-height: 1.3;
  }
  .ticket-row-meta {
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Bottom row: assignee chip floats left (when present), time always
     right. margin-left:auto on the right cell handles both states —
     with or without an assignee sibling. */
  .ticket-assignee {
    font-size: 0.72rem;
    padding: 3px 8px 3px 3px;
  }
  .ticket-assignee-avatar { width: 18px; height: 18px; font-size: 0.55rem; }
  .ticket-row-right {
    margin-left: auto;
    gap: 6px;
  }
  .ticket-row-time { font-size: 0.72rem; }
  .ticket-row-arrow { display: none; }

  /* Checkbox column: shrink the gutter so the subject gets more real
     estate. Tap target stays >=36px because the checkbox inherits the
     label's cross-axis height (the whole row). */
  .ticket-row-select { padding: 0 8px 0 12px; }
  .ticket-row-wrap:hover { transform: none; }   /* no hover-lift on touch */

  /* Bulk bar: stack the two groups, hide the verbose label, let the
     action buttons fill the row below the count. Match the sticky
     offset to the mobile nav height (64px — see .admin-nav). */
  .bulk-bar {
    top: 64px;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
  }
  .bulk-bar-left { flex: 1 1 100%; justify-content: space-between; }
  .bulk-bar-right { flex: 1 1 100%; gap: 6px; }
  .bulk-bar-label { display: none; }
  .bulk-bar-right .btn { flex: 1; min-width: 0; font-size: 0.8rem; padding: 8px 10px; }

  /* Pagination: tighten so it doesn't eat a phone-screen's worth of
     vertical space under a short list. */
  .inbox-pagination { gap: 8px; margin-top: 14px; padding: 4px 0; }
  .inbox-page-btn { padding: 6px 10px; font-size: 0.8rem; }
  .inbox-page-info { font-size: 0.8rem; }

  /* Select-all: compact row so it doesn't claim a full line's worth
     of padding above the list. */
  .ticket-list-header { padding: 0 2px 8px; }
  .bulk-select-all { font-size: 0.75rem; }
}

/* ─── MOBILE NAV DRAWER ─────────────────────────────────
   At ≤768px (portrait tablet and below) we swap the horizontal tab
   strip for a stacked drawer triggered by the hamburger. The drawer
   is position:fixed so it pins under the sticky nav and body content
   scrolls freely beneath it — same mental model as a native app
   drawer. Out-of-flow also means the hamburger + user button can claim
   the remaining horizontal space without competing with the hidden tabs.

   pointer-events:none on the closed state prevents stale hit-testing
   against the translated-off-screen drawer (otherwise dead space just
   below the nav would silently eat taps intended for the page below). */
@media (max-width: 768px) {
  .admin-nav-toggle { display: inline-flex; margin-left: auto; }

  .admin-tabs {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 8px 12px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.12);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.18s ease,
      transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 90;
  }
  .admin-tabs.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .admin-tab {
    width: 100%;
    padding: 14px 16px;
    font-size: 0.95rem;
    border-radius: 10px;
  }
  /* Desktop shows the active tab with a gold bottom-underline via
     ::after. In the stacked drawer that reads as a divider between
     adjacent tabs, so we swap to an inset left accent instead — a
     standard stacked-nav pattern. */
  .admin-tab.active::after { display: none; }
  .admin-tab.active {
    background: rgba(201, 162, 79, 0.14);
    box-shadow: inset 3px 0 0 var(--gold);
  }

  /* prefers-reduced-motion: skip the slide, just fade. */
  @media (prefers-reduced-motion: reduce) {
    .admin-tabs { transform: none; transition: opacity 0.15s ease; }
    .admin-tabs.open { transform: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════
   INBOX TICKET HEALTH SPARKLINE (.pulse-chip)
   A tiny SVG chip that sits in the right column of each ticket
   row, showing creation + reply events along a left-to-right
   timeline. "Aged" tickets (nobody has touched them in 48h while
   still open/in-progress) get a soft red glow, which the eye
   picks up immediately without having to scan timestamps.
   ═══════════════════════════════════════════════════════════════ */
.pulse-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(11, 31, 58, 0.04);
  /* Transition so the aged glow fades in smoothly rather than
     pop-flashing when a ticket crosses the 48h threshold on
     the next page load. Cheap and feels polished. */
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.pulse-chip svg { display: block; }

/* Dot palette — defined once so tweaks ripple to every row.
   ▸ created:        navy-light   — calm "this was born here"
   ▸ admin-reply:    gold         — on-brand "our side responded"
   ▸ customer-reply: coral        — attention-worthy "ball in our court" */
.pulse-dot--created        { fill: var(--navy-light, #1E3A6B); opacity: 0.55; }
.pulse-dot--admin-reply    { fill: var(--gold, #C9A24F); }
.pulse-dot--customer-reply { fill: #EF4444; }

/* Aged-glow treatment. Two layered shadows: outer soft red bloom
   + inner light wash on the chip itself. The shadow is sized so
   it doesn't bleed into the adjacent assignee avatar. */
.pulse-chip--aged {
  background: rgba(239, 68, 68, 0.08);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.25),
    0 0 8px rgba(239, 68, 68, 0.28);
}

/* Reduced motion: kill the background transition. Glow itself is
   static so it doesn't need a carve-out. */
@media (prefers-reduced-motion: reduce) {
  .pulse-chip { transition: none; }
}

/* Mobile: the row gets cramped at narrow viewports (subject wraps,
   assignee avatar + time stack). Hide the sparkline below 640px —
   the awaiting-response badge + status pill already carry the
   "attention required" signal on phones. */
@media (max-width: 640px) {
  .pulse-chip { display: none; }
}

/* ─── Audit log table ────────────────────────────────────────
   Plain dense table for chain-of-custody review. Striped rows with
   a subtle hover state; the action column gets a pill. Kept minimal —
   this is a compliance surface, not a dashboard. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th,
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #E5E7EB);
  text-align: left;
  vertical-align: middle;
}
.data-table thead th {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  background: var(--surface-alt, #F9FAFB);
}
.data-table tbody tr:hover {
  background: var(--hover, #F3F4F6);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}

.audit-action-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.audit-action-pill--neutral { background: #F3F4F6; color: #374151; }
.audit-action-pill--info    { background: #EFF6FF; color: #1D4ED8; }
.audit-action-pill--warn    { background: #FFFBEB; color: #92400E; }
.audit-action-pill--danger  { background: #FEF2F2; color: #991B1B; }

[data-theme="dark"] .data-table thead th { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .audit-action-pill--neutral { background: rgba(255,255,255,0.06); color: #D1D5DB; }
[data-theme="dark"] .audit-action-pill--info    { background: rgba(37,99,235,0.15); color: #93C5FD; }
[data-theme="dark"] .audit-action-pill--warn    { background: rgba(217,119,6,0.15); color: #FCD34D; }
[data-theme="dark"] .audit-action-pill--danger  { background: rgba(220,38,38,0.15); color: #FCA5A5; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.pagination-info {
  font-size: 13px;
  color: var(--muted, #6B7280);
}

/* Narrow viewports: collapse the IP column to prevent the table from
   overflowing horizontally on phones. IP is nice-to-have, not core. */
@media (max-width: 640px) {
  .data-table th:last-child,
  .data-table td:last-child { display: none; }
  .data-table th,
  .data-table td { padding: 8px 10px; font-size: 12px; }
}

/* ─── Admin reply form: attachment picker ─────────────────
   Compact drag-drop zone (desktop-first — admin UI assumes modern
   browser; the customer-facing version in style.css is the one that
   has to worry about iOS quirks). Clicking the whole zone opens the
   native picker because it's a <label for="…"> wrapping the input,
   same pattern as the public form. */
.reply-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 14px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--off-white);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.reply-upload-zone:hover,
.reply-upload-zone:focus-within {
  border-color: var(--navy-light);
  background: var(--card-bg, #fff);
}
.reply-upload-zone--drag {
  border-color: var(--gold, #b8935a);
  border-style: solid;
  background: rgba(184, 147, 90, 0.06);
}
.reply-upload-input-sr {
  /* Visually hidden but still reachable for keyboard / AT. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.reply-upload-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-mid);
  font-size: 0.88rem;
}
.reply-upload-inner svg { stroke: var(--text-muted); }
.reply-upload-browse {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-label-hint {
  font-weight: 400;
  color: var(--text-light);
  font-size: 0.78rem;
  margin-left: 6px;
}

.reply-file-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reply-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.reply-file-name {
  color: var(--text-dark, var(--navy));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.reply-file-size {
  color: var(--text-light);
  font-style: normal;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.reply-file-remove {
  appearance: none;
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--text-light);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.reply-file-remove:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
}

[data-theme="dark"] .reply-upload-zone { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .reply-upload-zone:hover,
[data-theme="dark"] .reply-upload-zone:focus-within { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .reply-file-item { background: rgba(255,255,255,0.02); }

/* Attachments rendered inline under a specific timeline row (admin
   replies, inbound email replies). Tighter than the original-files
   list on the description card. */
.activity-attachment-list {
  margin-top: 10px;
  gap: 4px;
}
.activity-attachment-list a {
  padding: 6px 10px;
  font-size: 0.82rem;
}
.privacy-attach-notice--inline {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
}

/* ─── Internal Notes ─────────────────────────────────────
   Visual language: pale amber everywhere a note appears (sidebar
   compose card, timeline row) so the eye immediately classifies
   notes vs. replies. Amber is paired with a lock icon to make the
   "internal only" contract unmissable — we never want an admin
   second-guessing whether a note got emailed out. */

/* Sidebar compose card — amber identity stays, chrome gets quieter:
   single-line header, tight body, note-count moves from a wrapping
   footer hint into a badge-style link in the header. */
.note-card {
  background: #FFFBEB;          /* amber-50, matches reply-priority palette */
  border-color: #FCD34D;         /* amber-300 */
}
.note-card .card-head,
.note-card-head {
  background: transparent;
  border-bottom-color: #FDE68A;  /* softer divider so the head doesn't scream */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.note-card .card-head h2,
.note-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #92400E;                /* amber-800 — readable on the tint */
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.2;
}
.note-lock { color: #B45309; flex-shrink: 0; }   /* amber-700 */

/* Note-count badge: lives in the header, jumps to #activity. Keep
   it compact so it stays on the same line as the title even in the
   narrow sidebar column. */
.note-count-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #B45309;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
.note-count-link:hover {
  background: #FDE68A;
  border-color: #F59E0B;
}
.note-count-link::after {
  content: "↓";
  font-size: 0.78rem;
  line-height: 1;
  margin-left: 2px;
}
.note-count-label {
  /* Hidden on narrow viewports — the number + arrow is enough */
  font-weight: 500;
  opacity: 0.85;
}

/* Tighten the body so the textarea sits closer to the header. */
.note-card-body { padding-top: 12px; padding-bottom: 14px; }

.note-input {
  background: #fff;              /* keep the input itself bright so typing is comfortable */
  border-color: #FCD34D;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
}
.note-input::placeholder {
  color: #A16207;                /* amber-700 at placeholder weight reads "internal" */
  opacity: 0.7;
}
.note-input:focus {
  border-color: #D97706;
  outline: 2px solid rgba(217, 119, 6, 0.18);
  outline-offset: 0;
}
.note-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.note-form-hint {
  font-size: 0.72rem;
  color: #B45309;
  opacity: 0.75;
}

/* Very narrow sidebars: drop the "in activity" text, keep the number + ↓. */
@media (max-width: 380px) {
  .note-count-label { display: none; }
}

/* Handoff-note textarea — same amber treatment, scoped to the
   reassign form so it reads as "this will become an internal note". */
.handoff-note-input {
  margin-top: 4px;
  background: #FFFBEB;
  border-color: #FCD34D;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
}
.handoff-note-input:focus {
  border-color: #D97706;
  outline: 2px solid rgba(217, 119, 6, 0.18);
  outline-offset: 0;
}
.form-label-inline-top {
  margin-top: 10px;
}

/* Activity-timeline rendering of notes — the second lens on the
   same data. Amber-tinted row + lock icon + "INTERNAL" pill keep
   the treatment consistent with the sidebar card. */
.activity-note {
  background: #FFFBEB;
}
.activity-note .activity-dot {
  background: #D97706;
  box-shadow: 0 0 0 2px #FEF3C7;
}
.activity-note .activity-message {
  background: #fff;
  border: 1px solid #FDE68A;
  border-left: 3px solid #D97706;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  white-space: pre-wrap;
}
.note-internal-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B45309;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.note-handoff-pill {
  /* Same shape as the internal pill but tonal shift so handoff notes
     stand out from regular internal notes in the timeline. */
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
  margin-left: 4px;
}

/* Dark theme: keep the amber identity but dial the saturation down. */
[data-theme="dark"] .note-card {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.35);
}
[data-theme="dark"] .note-card .card-head,
[data-theme="dark"] .note-card-head {
  border-bottom-color: rgba(217, 119, 6, 0.35);
}
[data-theme="dark"] .note-input,
[data-theme="dark"] .handoff-note-input {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(217, 119, 6, 0.4);
  color: var(--text);
}
[data-theme="dark"] .note-count-link {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.4);
  color: #FCD34D;
}
[data-theme="dark"] .note-count-link:hover {
  background: rgba(217, 119, 6, 0.22);
  border-color: rgba(217, 119, 6, 0.6);
}
[data-theme="dark"] .activity-note {
  background: rgba(217, 119, 6, 0.06);
}
[data-theme="dark"] .activity-note .activity-message {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(217, 119, 6, 0.35);
}