:root {
  --bg: #f4efe4;
  --bg-panel: rgba(255, 252, 246, 0.82);
  --bg-panel-strong: #fffaf1;
  --text: #1d2630;
  --muted: #5f6b76;
  --accent: #2b7dd6;
  --accent-dark: #1d4f87;
  --warm: #ef8f4d;
  --accent-soft: rgba(43, 125, 214, 0.14);
  --surface-soft: rgba(29, 38, 48, 0.04);
  --surface-strong: rgba(29, 38, 48, 0.08);
  --panel-glow: rgba(43, 125, 214, 0.12);
  --page-radial-a: rgba(220, 107, 47, 0.16);
  --page-radial-b: rgba(15, 118, 110, 0.18);
  --page-gradient-start: #f6f1e8;
  --page-gradient-mid: #f4efe4;
  --page-gradient-end: #efe8d9;
  --sheet-row-tint: rgba(43, 125, 214, 0.06);
  --border: rgba(29, 38, 48, 0.12);
  --shadow: 0 24px 60px rgba(25, 40, 35, 0.12);
  --radius: 22px;
}

body.theme-dark {
  --bg: #0f1722;
  --bg-panel: rgba(17, 25, 36, 0.9);
  --bg-panel-strong: #182334;
  --text: #edf2fb;
  --muted: #9fb0c5;
  --surface-soft: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --panel-glow: rgba(43, 125, 214, 0.18);
  --page-gradient-start: #0b1220;
  --page-gradient-mid: #101827;
  --page-gradient-end: #132033;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* Dark mode text color overrides - ensure all text is white/light */
body.theme-dark,
body.theme-dark * {
  color: #ffffff !important;
}

body.theme-dark svg {
  fill: currentColor;
}

body.theme-dark .avatar-fallback {
  color: #ffffff !important;
}

body.theme-dark .facility-status-badge {
  color: #ffffff !important;
}

body.theme-dark .login-title span {
  color: #ffffff !important;
}

body.theme-dark button,
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select,
body.theme-dark label {
  color: #ffffff !important;
}

body.theme-dark .text-link-btn {
  color: #ffffff !important;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Source Sans 3", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, var(--page-radial-a), transparent 32%),
    radial-gradient(circle at bottom right, var(--page-radial-b), transparent 34%),
    linear-gradient(135deg, var(--page-gradient-start) 0%, var(--page-gradient-mid) 42%, var(--page-gradient-end) 100%);
}

body.theme-rainbow {
  background:
    radial-gradient(circle at top left, rgba(255, 99, 132, 0.18), transparent 30%),
    radial-gradient(circle at top right, rgba(54, 162, 235, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(255, 205, 86, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(153, 102, 255, 0.18), transparent 34%),
    linear-gradient(135deg, #f6f1e8 0%, #f4efe4 42%, #efe8d9 100%);
}

body.theme-dark.theme-rainbow {
  background:
    radial-gradient(circle at top left, rgba(255, 99, 132, 0.2), transparent 30%),
    radial-gradient(circle at top right, rgba(54, 162, 235, 0.2), transparent 32%),
    radial-gradient(circle at bottom left, rgba(255, 205, 86, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(153, 102, 255, 0.22), transparent 34%),
    linear-gradient(145deg, #0b1220 0%, #101a2c 44%, #121d31 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-transition {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(74, 163, 255, 0.22), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(43, 125, 214, 0.28), transparent 26%),
    radial-gradient(circle at 50% 80%, rgba(239, 143, 77, 0.16), transparent 28%),
    linear-gradient(145deg, #08111d 0%, #102033 44%, #0b1626 100%);
  z-index: 5000;
  overflow: hidden;
}

.login-transition::before,
.login-transition::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  border: 1px solid rgba(138, 198, 255, 0.12);
  animation: transitionPulse 3.2s ease-in-out infinite;
}

.login-transition::before {
  top: -16vw;
  left: -10vw;
}

.login-transition::after {
  right: -12vw;
  bottom: -18vw;
  animation-delay: 0.8s;
}

.login-transition-core {
  position: relative;
  width: min(760px, 100%);
  padding: 46px 34px;
  border-radius: 34px;
  text-align: center;
  color: #edf2fb;
  border: 1px solid rgba(139, 197, 255, 0.18);
  background: rgba(10, 20, 34, 0.72);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.login-transition-rings {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(142, 205, 255, 0.16);
  box-shadow:
    0 0 0 30px rgba(74, 163, 255, 0.05),
    0 0 0 70px rgba(74, 163, 255, 0.04),
    0 0 80px rgba(74, 163, 255, 0.16);
  animation: transitionSpin 8s linear infinite;
}

.login-transition-mark {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  width: 94px;
  height: 94px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(74, 163, 255, 0.22), rgba(17, 36, 59, 0.92));
  box-shadow: 0 0 36px rgba(74, 163, 255, 0.28);
}

.transition-client-logo {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  padding: 8px;
  z-index: 2;
}

.transition-logo {
  width: 48px;
  height: 48px;
}

.transition-title {
  position: relative;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.96;
  color: #f5f8ff;
  margin-bottom: 12px;
}

.transition-title span {
  display: block;
  color: #6cb7ff;
  font-style: italic;
}

.transition-copy {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  color: rgba(237, 242, 251, 0.78);
  font-size: 1.05rem;
}

.transition-beam-row {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.transition-beam-row span {
  width: 92px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(74, 163, 255, 0.16), rgba(108, 183, 255, 0.96), rgba(74, 163, 255, 0.16));
  animation: beamShift 1.2s ease-in-out infinite;
}

.transition-beam-row span:nth-child(2) {
  animation-delay: 0.18s;
}

.transition-beam-row span:nth-child(3) {
  animation-delay: 0.36s;
}

.login-panel {
  width: min(1180px, 100%);
  border-radius: 32px;
  padding: 34px;
  backdrop-filter: blur(12px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel-glow) 100%, transparent), transparent 38%),
    var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.auth-page-panel {
  width: min(760px, 100%);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 28px;
}

.logo-mark {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 34px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-dark) 12%, transparent), var(--accent-soft));
  overflow: hidden;
}

.logo-paper {
  position: absolute;
  left: 34px;
  top: 20px;
  width: 72px;
  height: 96px;
  border: 7px solid #244a7c;
  border-radius: 6px;
  background:
    linear-gradient(#9ecbf0 0 0) 16px 24px / 38px 6px no-repeat,
    linear-gradient(#9ecbf0 0 0) 16px 40px / 38px 6px no-repeat,
    linear-gradient(#9ecbf0 0 0) 16px 56px / 38px 6px no-repeat,
    linear-gradient(#9ecbf0 0 0) 16px 72px / 32px 6px no-repeat,
    white;
}

.logo-check {
  position: absolute;
  left: 74px;
  top: 64px;
  width: 28px;
  height: 54px;
  border-right: 12px solid #3487dc;
  border-bottom: 12px solid #3487dc;
  transform: rotate(45deg);
}

.login-title {
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 0.95;
}

.login-title span {
  display: block;
  color: #2f82d8;
  font-style: italic;
}

.login-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
}

.login-grid-single {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.login-card {
  border-radius: 24px;
  padding: 26px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--accent-soft) 78%, transparent), transparent 42%),
    var(--bg-panel-strong);
  border: 1px solid rgba(29, 38, 48, 0.08);
}

.login-card-centered {
  margin: 0 auto;
  width: 100%;
}

.spotlight-card {
  background:
    radial-gradient(circle at top right, rgba(52, 135, 220, 0.18), transparent 30%),
    var(--bg-panel-strong);
}

.login-copy {
  color: var(--muted);
  line-height: 1.55;
}

.text-link-btn {
  padding: 0;
  margin-top: 12px;
  background: transparent;
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: underline;
}

.auth-checkbox {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(29, 38, 48, 0.12);
  background: var(--surface-soft);
}

@keyframes transitionSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes transitionPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes beamShift {
  0%,
  100% {
    transform: scaleX(0.72);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.feature-list {
  margin: 16px 0 22px;
  padding-left: 20px;
  color: var(--muted);
}

.login-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
}

.avatar-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-fallback {
  background: #c7ccd3;
  color: #4c5662;
  font-weight: 800;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-avatar {
  width: 28px;
  height: 28px;
}

.profile-avatar-medium {
  width: 56px;
  height: 56px;
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.profile-avatar-large {
  width: 72px;
  height: 72px;
  font-size: 1.7rem;
}

.profile-avatar-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-identity-card {
  align-items: center;
}

.profile-identity-card strong {
  margin-bottom: 4px;
}

.auth-grid {
  grid-template-columns: 1fr;
}

.compact-tab-row {
  margin-bottom: 16px;
}

.tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.tab-btn {
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 700;
}

.tab-btn.active {
  background: var(--accent);
  color: white;
}

.tabs-container {
  display: flex;
  flex-direction: column;
}

.tabs-header {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--surface-soft);
  padding-bottom: 12px;
  flex-wrap: wrap;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.form-section {
  margin-bottom: 20px;
}

.form-section h4 {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 16px;
}

.list-container {
  border: 1px solid var(--surface-soft);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-soft);
}

.list-item {
  background: var(--bg-panel-strong);
}

.hamburger-menu {
  position: relative;
  z-index: 3000;
}

.hamburger-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 18px;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  z-index: 3100;
}

.menu-item {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  font-weight: 700;
}

.menu-item.active {
  background: var(--accent);
  color: white;
}

.menu-expand-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-subgroup {
  display: grid;
  gap: 8px;
  padding: 2px 0 4px 14px;
}

.submenu-item {
  background: var(--accent-soft);
}

.menu-caret {
  font-size: 1rem;
  line-height: 1;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}

.brand-logo-mini {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 55%, white) 100%);
  position: relative;
}

.brand-logo-mini::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 6px;
}

.brand-logo-mini::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 14px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  right: 6px;
  bottom: 7px;
  transform: rotate(42deg);
}

.view-section {
  display: grid;
  gap: 24px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-metrics-large {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
  border-radius: 18px;
  padding: 16px;
  background: var(--accent-soft);
}

.metric-card-button {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.metric-card-button:hover,
.metric-card-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}

.ticket-filter-summary {
  margin-bottom: 16px;
}

.facility-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facility-status-badge.active {
  background: color-mix(in srgb, #1f9d55 18%, transparent);
  color: #187443;
}

.facility-status-badge.termed {
  background: color-mix(in srgb, #a63a3a 18%, transparent);
  color: #8b2020;
}

.state-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 12px;
}

.state-tile {
  min-height: 88px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 55%),
    var(--bg-panel-strong);
  display: grid;
  align-content: space-between;
}

.state-tile.active {
  border-color: color-mix(in srgb, #1f9d55 35%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, #7bd8a9 32%, transparent), transparent 55%),
    var(--bg-panel-strong);
}

.state-tile strong {
  font-size: 1.1rem;
}

.state-count {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.metric-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.metric-card strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
}

.chart-block {
  min-height: 220px;
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0)),
    var(--bg-panel-strong);
  border: 1px solid rgba(29, 38, 48, 0.08);
  margin-bottom: 18px;
}

.bar-chart {
  height: 180px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.file-records {
  display: grid;
  gap: 14px;
}

.file-select-all,
.file-row-select {
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.file-select-all span,
.file-row-select span {
  min-width: 0;
}

.danger-btn {
  color: #f06a6a;
  border-color: color-mix(in srgb, #f06a6a 50%, var(--border));
}

.file-row {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--bg-panel-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
}

.file-row-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}

.status-track {
  height: 14px;
  border-radius: 999px;
  background: var(--surface-strong);
  overflow: hidden;
}

.status-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, white), var(--accent-dark));
}

.bar {
  flex: 1;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, white), var(--accent-dark));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: white;
  font-weight: 700;
  padding-bottom: 10px;
  min-height: 24px;
}

.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  padding: 24px;
}

.panel,
.hero-panel {
  backdrop-filter: blur(12px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel-glow) 92%, transparent), transparent 36%),
    var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.77rem;
  font-weight: 700;
  color: var(--warm);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
}

h1 {
  font-size: 2.4rem;
  line-height: 1;
}

.lede {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.summary-card {
  margin-top: 24px;
  padding: 18px;
  border-radius: 20px;
  background: var(--bg-panel-strong);
  border: 1px solid rgba(29, 38, 48, 0.08);
}

.summary-card.accent {
  background: linear-gradient(145deg, var(--accent-soft), rgba(255, 250, 241, 0.92));
}

.summary-card ul {
  padding-left: 18px;
  margin: 12px 0 0;
  color: var(--muted);
}

.card-label {
  margin: 0;
  font-weight: 700;
}

.main-content {
  display: grid;
  gap: 24px;
  overflow: visible;
}

.hero-panel {
  border-radius: 28px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 2000;
  overflow: visible;
}

.hero-brand {
  display: grid;
  gap: 10px;
}

.hero-subcopy {
  margin: 0;
  color: var(--muted);
}

.hero-panel p:not(.eyebrow) {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 720px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.ticket-time-actions {
  min-width: 0;
}

.ticket-time-actions > .small-btn {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.ticket-time-manual-form {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.ticket-time-manual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.ticket-time-manual-form label {
  min-width: 0;
}

.ticket-time-manual-grid > label {
  min-width: 0;
}

.ticket-time-manual-form input,
.ticket-time-manual-form textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.ticket-time-manual-form input[type="datetime-local"] {
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.9rem;
}



#ticketTimeManualSubmitBtn,
#ticketTimeManualToggleBtn {
  white-space: nowrap;
}

.alert-bell-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.alert-bell-icon {
  position: relative;
  width: 18px;
  height: 16px;
  border: 2px solid currentColor;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.alert-bell-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 20px;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  border-radius: 999px;
}

.alert-bell-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 8px;
  height: 4px;
  border: 2px solid currentColor;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  transform: translateX(-50%);
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.hamburger-icon {
  position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
  position: absolute;
  left: 0;
}

.hamburger-icon::before {
  top: -6px;
}

.hamburger-icon::after {
  top: 6px;
}

.alert-bell-label {
  font-weight: 700;
}

.alert-bell-count {
  font-weight: 800;
  color: #bf1f2f;
  min-width: 1ch;
  text-align: right;
}

.alert-bell-count.has-alerts {
  color: #d3172f;
}

/* Alert System Styling */
.alert-item {
  border-left: 4px solid var(--accent);
  background: var(--surface-soft);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.alert-item.alert-unviewed {
  border-left: 4px solid #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.alert-type {
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}

.alert-unviewed-badge {
  color: #ef4444 !important;
  font-weight: 800 !important;
}

.alert-time {
  font-size: 12px;
  color: var(--muted);
}

.alert-message {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0;
  color: var(--text);
}

.alert-details {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
  font-style: italic;
}

.dismiss-alert-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  transition: all 180ms ease;
}

.dismiss-alert-btn:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-1px);
}

.alerts-popup-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Alerts Tab badge styling - red for unviewed */
.alert-tab-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  background: #ef4444;
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

.alert-tab-badge.no-unviewed {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

button:hover,
.file-input-label:hover {
  transform: translateY(-1px);
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.file-input-label {
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
}

.primary-btn {
  background: var(--accent);
  color: white;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 30%, transparent);
}

.secondary-btn,
.file-input-label {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

#queueConfigList > button {
  background: var(--bg-panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
}

#queueConfigList > button:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-panel-strong));
}

#queueConfigList > button strong {
  color: var(--text);
}

#queueConfigList > button span {
  color: var(--muted);
}

.ghost-btn {
  background: var(--surface-soft);
  color: var(--text);
}

.small-btn {
  padding: 9px 14px;
  font-size: 0.92rem;
}

#importInput {
  display: none;
}

#documentInput {
  display: none;
}

.grid-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}

.bottom-grid {
  grid-template-columns: 1fr 360px;
}

.panel {
  border-radius: var(--radius);
  padding: 22px;
  overflow: visible;
}

.view-section {
  position: relative;
  z-index: 1;
}

.panel-wide {
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.facility-list {
  display: grid;
  gap: 12px;
}

.sheet-list {
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-panel-strong);
}

.sheet-list .field-card,
.facility-sheet-list .facility-item {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  box-shadow: none;
  background:
    linear-gradient(90deg, var(--sheet-row-tint), transparent),
    var(--bg-panel-strong);
}

.sheet-list .field-card:last-child,
.facility-sheet-list .facility-item:last-child {
  border-bottom: 0;
}

.sheet-list .field-card {
  padding: 0;
}

.sheet-list .field-header,
.sheet-list .form-grid,
.facility-sheet-list .facility-item {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.sheet-list .field-header {
  margin-bottom: 0;
}

.sheet-list .field-header input,
.sheet-list .field-header button,
.sheet-list .form-grid label,
.facility-sheet-list .facility-item strong,
.facility-sheet-list .facility-item p {
  border-right: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

.sheet-list .field-header input:last-child,
.sheet-list .field-header button:last-child,
.sheet-list .form-grid label:last-child,
.facility-sheet-list .facility-item strong:last-child,
.facility-sheet-list .facility-item p:last-child {
  border-right: 0;
}

.sheet-list .field-header input,
.sheet-list .field-header button {
  border-radius: 0;
  min-height: 58px;
  background: transparent;
}

.sheet-list .form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sheet-list .form-grid label {
  margin: 0;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  background: transparent;
}

.sheet-list .form-grid label input,
.sheet-list .form-grid label select,
.sheet-list .form-grid label textarea {
  margin-top: 8px;
  border-radius: 8px;
  min-height: 42px;
}

.sheet-list .full-width {
  grid-column: span 4;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

.facility-sheet-list .facility-item {
  text-align: left;
  padding: 0;
}

.facility-sheet-list .facility-item strong,
.facility-sheet-list .facility-item p {
  display: flex;
  align-items: center;
  padding: 16px;
  margin: 0;
}

.facility-sheet-list .facility-item strong {
  grid-column: span 2;
  font-family: "Space Grotesk", sans-serif;
}

.facility-sheet-list .facility-item p {
  grid-column: span 2;
}

.facility-item {
  width: 100%;
  text-align: left;
  border-radius: 18px;
  padding: 16px;
  background: var(--bg-panel-strong);
  border: 1px solid transparent;
}

.facility-item.active {
  border-color: rgba(15, 118, 110, 0.32);
  background: rgba(15, 118, 110, 0.08);
}

.facility-item p {
  margin: 4px 0 0;
  color: var(--muted);
}

.sheet-grid {
  border: 1px solid rgba(29, 38, 48, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-panel-strong);
}

.sheet-grid-header,
.sheet-grid-row {
  display: grid;
  gap: 0;
  align-items: stretch;
}

.sheet-grid-header {
  background: rgba(29, 38, 48, 0.06);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--muted);
}

.sheet-grid-header span,
.sheet-grid-row span,
.sheet-grid-row button {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid rgba(29, 38, 48, 0.1);
}

.sheet-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  padding: 14px 16px;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.sheet-sort-btn span {
  color: var(--accent);
  font-size: 0.68rem;
}

.sheet-sort-btn.active {
  color: var(--text);
}

.file-queue-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 18px 12px 6px;
}

.pagination-btn {
  min-width: 42px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pagination-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 80%, black);
}

.pagination-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sheet-grid-header span:last-child,
.sheet-grid-row span:last-child,
.sheet-grid-row button:last-child,
.sheet-sort-btn:last-child {
  border-right: 0;
}

.sheet-grid-row {
  border-top: 1px solid rgba(29, 38, 48, 0.1);
  background:
    linear-gradient(90deg, rgba(43, 125, 214, 0.05), rgba(43, 125, 214, 0.015)),
    var(--bg-panel-strong);
}

.sheet-link {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  color: var(--accent-dark);
  text-align: left;
  font-weight: 800;
  text-decoration: underline;
}

.sheet-link-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.sheet-link:hover {
  transform: none;
  box-shadow: none;
}

.it-time-tracker-table {
  table-layout: fixed;
}

.it-time-tracker-table .it-time-tracker-header {
  display: table-row;
}

.it-time-tracker-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--muted);
  border-bottom: 1px solid rgba(29, 38, 48, 0.12);
}

.it-time-tracker-table tbody td {
  padding: 10px;
  border-top: 1px solid rgba(29, 38, 48, 0.08);
  vertical-align: middle;
}

.it-time-tracker-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-panel-strong) 90%, var(--surface-soft));
}

.it-time-tech-btn {
  border: none;
  background: transparent;
  color: var(--accent-dark);
  font-weight: 700;
  text-align: left;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.it-time-tech-btn:hover {
  opacity: 0.82;
}

.it-time-ticket-link {
  border: none;
  background: transparent;
  color: var(--accent-dark);
  font-weight: 700;
  text-align: left;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.sheet-muted {
  color: var(--muted);
}

.sheet-empty {
  padding: 20px;
  color: var(--muted);
}

.filter-panel {
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 48%),
    var(--surface-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background: rgba(8, 14, 24, 0.36);
  backdrop-filter: blur(6px);
  z-index: 4200;
}

.setup-drawer {
  width: min(760px, 100%);
  height: 100%;
  border-radius: 32px;
  padding: 28px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 42%),
    var(--bg-panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.drawer-body {
  overflow: auto;
  display: grid;
  gap: 20px;
  padding-right: 8px;
}

.drawer-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.drawer-actions .primary-btn {
  margin-left: auto;
}

/* ── Resolve Final Note Popup ──────────────────────────────────── */
.resolve-note-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 14, 24, 0.72);
  backdrop-filter: blur(6px);
  z-index: 9100;
}

.resolve-note-overlay.is-open {
  display: flex;
}

.resolve-note-modal {
  width: min(540px, 92vw);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--bg-panel-strong);
  box-shadow: var(--shadow);
  color: var(--text);
}

.resolve-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-panel-strong));
  flex-shrink: 0;
}

.resolve-note-eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.resolve-note-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.resolve-note-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resolve-note-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}

.resolve-note-status {
  font-size: 13px;
  min-height: 20px;
  color: var(--text-soft);
}

.resolve-note-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-panel-strong));
}

@media (max-width: 560px) {
  .resolve-note-modal {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .resolve-note-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

.attachment-preview-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 14, 24, 0.72);
  backdrop-filter: blur(6px);
  z-index: 9000;
}

.attachment-preview-overlay.is-open {
  display: flex;
}

.attachment-preview-modal {
  width: min(1140px, 92vw);
  height: min(92vh, 920px);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 40%, transparent), transparent 38%),
    var(--bg-panel-strong);
  box-shadow: var(--shadow);
  color: var(--text);
}

.attachment-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-panel-strong));
  flex-shrink: 0;
}

.attachment-preview-header-text {
  min-width: 0;
}

.attachment-preview-eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.attachment-preview-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  max-width: min(600px, 48vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.attachment-preview-content {
  flex: 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--bg-panel));
}

.attachment-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .attachment-preview-overlay {
    padding: 10px;
  }

  .attachment-preview-modal {
    width: 100%;
    height: 94vh;
    border-radius: 16px;
  }

  .attachment-preview-header {
    padding: 14px 16px;
    align-items: flex-start;
    flex-direction: column;
  }

  .attachment-preview-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .attachment-preview-title {
    max-width: 100%;
  }
}

.drawer-hero-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-panel-strong) 92%, white);
}

.drawer-hero-mark {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  color: white;
  font-size: 1.55rem;
  font-weight: 800;
  box-shadow: 0 16px 32px rgba(20, 37, 63, 0.18);
}

.drawer-hero-copy h4 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.drawer-hero-copy p {
  margin: 0;
  color: var(--muted);
}

.drawer-hero-stats {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.drawer-stat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 66%, transparent);
  color: var(--accent-dark);
  font-size: 0.9rem;
  font-weight: 800;
}

.drawer-section-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 34%, transparent), transparent 45%),
    color-mix(in srgb, var(--bg-panel-strong) 94%, white);
}

.drawer-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.drawer-section-heading h4 {
  margin: 0 0 6px;
}

.drawer-section-heading p {
  margin: 0;
  color: var(--muted);
}

.drawer-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.drawer-option-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
  cursor: pointer;
}

.drawer-option-card strong,
.drawer-option-card span {
  display: block;
}

.drawer-option-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.checkbox-stack {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
}

.checkbox-option input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.empty-state {
  border: 1px dashed rgba(29, 38, 48, 0.18);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.hidden {
  display: none;
}

.editor-content {
  display: grid;
  gap: 18px;
}

.form-section {
  background: var(--bg-panel-strong);
  border: 1px solid rgba(29, 38, 48, 0.08);
  border-radius: 20px;
  padding: 18px;
}

.embedded-section {
  padding: 0;
  background: transparent;
  border: none;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-title-row p {
  margin: 6px 0 0;
  color: var(--muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-width {
  grid-column: 1 / -1;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg-panel-strong) 88%, var(--bg));
  color: var(--text);
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

textarea {
  resize: vertical;
}

.ticket-rte {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel-strong) 90%, var(--bg));
}

.ticket-rte-toolbar {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-panel-strong) 96%, var(--bg));
  flex-wrap: wrap;
}

.ticket-rte-btn {
  border: 1px solid var(--border);
  background: var(--bg-panel-strong);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

.ticket-rte-btn:hover {
  border-color: var(--accent);
}

.ticket-rte-editor {
  min-height: 120px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px 12px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.45;
}

.ticket-rte-editor:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: -2px;
}

.ticket-note-content {
  margin-top: 8px;
  color: #555;
  white-space: pre-wrap;
  line-height: 1.5;
}

.field-list {
  display: grid;
  gap: 14px;
}

.field-card {
  padding: 16px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 52%, transparent), transparent 50%),
    var(--bg-panel-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

.settings-group {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel-strong) 1.2, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

#emailBrandingPanel .settings-group,
#emailTemplatesPanel .settings-group {
  background: color-mix(in srgb, var(--bg-panel-strong) 94%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 12%, var(--border));
}

#emailBrandingPanel .status-box,
#emailTemplatesPanel .status-box {
  background: color-mix(in srgb, var(--bg-panel-strong) 92%, var(--bg));
}

#emailBrandingPanel #emailBrandingLogoPreview {
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-panel-strong) 90%, var(--bg));
  border: 1px solid var(--border);
}

#emailBrandingPanel #emailLogoPreviewImg {
  background: var(--bg-panel);
}

.settings-group h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 600;
}

.settings-description {
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  margin: 0 0 12px 0;
}

.field-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.field-name-input {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}

.preview-block {
  min-height: 320px;
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  background: #142028;
  color: #f7f5f0;
  overflow: auto;
}

.user-status-stack {
  display: grid;
  gap: 6px;
}

.user-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-box {
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 58%, transparent), transparent 48%),
    var(--bg-panel-strong);
  padding: 12px 14px;
  color: var(--muted);
}

.status-box.error-status {
  border-color: #d1574e;
  background:
    linear-gradient(145deg, rgba(209, 87, 78, 0.12), transparent 48%),
    var(--bg-panel-strong);
  color: #d1574e;
}

.status-box.success-status {
  border-color: #2ecc71;
  background:
    linear-gradient(145deg, rgba(46, 204, 113, 0.12), transparent 48%),
    var(--bg-panel-strong);
  color: #27ae60;
}

.inline-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.inline-link:hover {
  text-decoration: underline;
}

.client-logo-preview {
  display: block;
  max-width: 220px;
  max-height: 96px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 8px;
}

.phi-warning-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(125, 0, 0, 0.92);
  z-index: 6000;
}

.phi-warning-overlay.hidden {
  display: none;
}

.phi-warning-card {
  width: min(760px, 100%);
  padding: 34px;
  border-radius: 28px;
  background: #fff1f1;
  border: 3px solid #c01010;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  text-align: center;
  color: #5a0c0c;
}

.phi-warning-card h2 {
  color: #b00000;
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 14px;
}

.alerts-popup-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 13, 24, 0.78);
  backdrop-filter: blur(14px);
  z-index: 5900;
}

.alerts-popup-overlay.hidden {
  display: none;
}

.alerts-popup-card {
  width: min(900px, 100%);
  max-height: min(84vh, 860px);
  overflow: auto;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 28%),
    var(--bg-panel-strong);
  box-shadow: var(--shadow);
}

.alerts-popup-card .split-preview {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.idle-logout-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 13, 24, 0.82);
  backdrop-filter: blur(8px);
  z-index: 6100;
}

.idle-logout-overlay.hidden {
  display: none;
}

.idle-logout-card {
  width: min(560px, 100%);
  padding: 28px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 15%, transparent), transparent 32%),
    var(--bg-panel-strong);
  box-shadow: var(--shadow);
}

.idle-logout-copy {
  margin: 2px 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.idle-logout-timer {
  margin: 0 0 20px;
  color: var(--text);
  font-weight: 600;
}

.idle-logout-timer strong {
  color: var(--accent);
  font-size: 1.15rem;
}

.ticket-detail-modal {
  width: min(1180px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 28px;
  padding: 24px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 58%, transparent), transparent 48%),
    var(--bg-panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.ticket-detail-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 20px;
}

.ticket-detail-main,
.ticket-detail-side {
  display: grid;
  gap: 18px;
}

.ocr-page-gallery {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.ocr-page-card {
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 50%, transparent), transparent 54%),
    var(--bg-panel-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

.ocr-page-card img {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(29, 38, 48, 0.12);
  background: var(--bg-panel-strong);
}

.ocr-page-card p {
  margin: 10px 0 0;
  color: var(--muted);
  white-space: pre-wrap;
  font-size: 0.94rem;
}

.split-preview {
  display: grid;
  gap: 12px;
}

.credentialing-panel {
  display: grid;
  gap: 18px;
}

.metric-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

.progress-stack {
  display: grid;
  gap: 12px;
}

.progress-row {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--accent-soft);
}

.progress-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.progress-track {
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--border));
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white));
}

.client-portal-panel,
.client-portal-section {
  display: grid;
  gap: 18px;
}

.profile-list {
  display: grid;
  gap: 14px;
}

.profile-list-stack {
  display: grid;
  gap: 14px;
}

.profile-list-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-panel-strong) 72%, var(--accent-soft));
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.profile-list-card:hover,
.profile-list-card:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 16px 30px rgba(13, 35, 67, 0.12);
}

.profile-list-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 58%, white));
  color: white;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.profile-list-copy {
  display: grid;
  gap: 6px;
}

.profile-list-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.profile-list-name-row strong {
  font-size: 1.02rem;
}

.profile-list-meta {
  color: var(--muted);
  font-size: 0.94rem;
}

.feed-card,
.feed-reply-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 52%),
    var(--bg-panel-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

.feed-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feed-card-meta {
  display: grid;
  gap: 3px;
}

.feed-card-meta strong {
  margin: 0;
}

.feed-card-meta span,
.feed-card-label {
  color: var(--muted);
  font-size: 0.92rem;
}

.feed-card-body {
  display: grid;
  gap: 8px;
}

.feed-card-body p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.feed-card-actions {
  display: flex;
  justify-content: flex-start;
}

.credentialing-thread-modal {
  width: min(1040px, 100%);
}

.it-ticket-composer-modal,
.beta-ticket-composer-modal {
  width: min(760px, 100%);
}

/* ── Queue filter bar ─────────────────────────────────────── */
.queue-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 0 8px;
}
.queue-filter-bar input[type="text"],
.queue-filter-bar select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text);
  min-width: 140px;
  flex: 1 1 auto;
}
.queue-filter-bar input[type="text"] {
  min-width: 180px;
}
.queue-filter-bar .filter-clear-btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.queue-filter-bar .filter-clear-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.thread-lead-card {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

.comment-entry-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 36%, transparent), transparent 55%),
    var(--bg-panel-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

.split-card {
  padding: 16px;
  border-radius: 18px;
  background: var(--accent-soft);
}

.split-card strong {
  display: block;
  margin-bottom: 6px;
}

.cruncher-user-card {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

.cruncher-assistant-card {
  background: var(--bg-panel-strong);
  border: 1px solid rgba(29, 38, 48, 0.08);
}

.cruncher-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2600;
  display: grid;
  justify-items: end;
  gap: 12px;
}

.cruncher-dock.cruncher-dock-top-pinned {
  top: 86px;
  bottom: auto;
}

.cruncher-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding: 8px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, white), rgba(255, 255, 255, 0.96));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 26px 48px rgba(8, 15, 26, 0.24);
  text-align: center;
}

.cruncher-launcher-art {
  width: 52px;
  height: 52px;
  object-fit: cover;
  filter: drop-shadow(0 12px 18px rgba(18, 34, 58, 0.2));
  border-radius: 999px;
}

.cruncher-launcher-copy {
  display: none;
}

.cruncher-launcher-copy strong {
  font-size: 1rem;
}

.cruncher-launcher-copy span {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.cruncher-panel {
  width: min(540px, calc(100vw - 40px));
  max-height: min(78vh, 820px);
  overflow: auto;
  padding: 18px;
  border-radius: 26px;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border);
  box-shadow: 0 32px 68px rgba(8, 15, 26, 0.32);
  backdrop-filter: blur(14px);
}

.cruncher-panel-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cruncher-panel-art {
  width: 78px;
  height: 78px;
  object-fit: contain;
}

.cruncher-panel-fullbody-art {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  width: auto;
  height: auto;
}

.cruncher-quick-actions {
  margin-top: 12px;
}

.preview-frame-shell {
  height: min(72vh, 860px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background: color-mix(in srgb, var(--bg-panel-strong) 92%, white);
}

.preview-frame-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-panel-strong);
}

#cruncherPrompt {
  min-width: min(520px, 100%);
}

@media (max-width: 1100px) {
  .login-grid,
  .app-shell,
  .grid-layout,
  .bottom-grid {
    grid-template-columns: 1fr;
  }

  .login-brand {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px;
  }

  .hero-panel,
  .panel {
    padding: 18px;
  }

  .cruncher-dock {
    right: 16px;
    bottom: 16px;
    left: auto;
    justify-items: end;
  }

  .cruncher-dock.cruncher-dock-top-pinned {
    top: 78px;
    bottom: auto;
  }

  .cruncher-launcher,
  #cruncherPrompt {
    min-width: 0;
  }

  .cruncher-launcher {
    width: 64px;
    height: 64px;
    padding: 7px;
  }

  .cruncher-launcher-art {
    width: 44px;
    height: 44px;
  }

  .cruncher-panel {
    width: min(100vw - 32px, 540px);
  }

  .drawer-overlay {
    padding: 0;
  }

  .setup-drawer {
    width: 100%;
    border-radius: 0;
  }

  .drawer-hero-card,
  .drawer-option-grid {
    grid-template-columns: 1fr;
  }

  .drawer-hero-stats {
    justify-items: start;
  }

  .hero-panel,
  .panel-header,
  .section-title-row,
  .field-header {
    flex-direction: column;
    align-items: stretch;
  }

  .form-grid,
  .compact-grid,
  .dashboard-metrics,
  .dashboard-metrics-large {
    grid-template-columns: 1fr;
  }

  .sheet-list .field-header,
  .sheet-list .form-grid,
  .facility-sheet-list .facility-item {
    grid-template-columns: 1fr;
  }

  .sheet-list .full-width,
  .facility-sheet-list .facility-item strong,
  .facility-sheet-list .facility-item p {
    grid-column: auto;
  }

  .file-row-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========== MODAL STYLES ========== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-in-out;
}

.modal.hidden {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background-color: var(--bg-panel-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
}

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

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: var(--text);
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background-color: var(--accent-soft);
  color: var(--text);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background-color: var(--bg-panel);
}

.ticket-status-modal-overlay {
  z-index: 10020;
}

.ticket-status-modal {
  width: min(640px, 94vw);
  max-width: 640px;
}

.ticket-status-list {
  display: grid;
  gap: 10px;
}

.ticket-status-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.ticket-status-swatch {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ticket-status-add-form {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.ticket-status-add-form input[type="text"],
.ticket-status-row input[type="text"] {
  background: var(--bg-panel-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
}

.ticket-status-row input[type="color"],
.ticket-status-add-form input[type="color"] {
  width: 42px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-panel-strong);
}

.ticket-status-settings-btn {
  white-space: nowrap;
}

.ticket-header-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-inline-action-btn {
  margin: 0;
}

.voicemail-modal {
  width: 95%;
  max-width: 1000px;
}

.voicemail-body {
  max-height: calc(90vh - 150px);
}

/* ========== CRUNCHER PRESENTATION STYLES ========== */
.cruncher-container {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(43, 125, 214, 0.08), rgba(239, 143, 77, 0.08));
  border-radius: 16px;
  border: 1px solid var(--border);
}

.cruncher-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cruncher-icon {
  font-size: 48px;
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.cruncher-message {
  flex: 1;
}

.cruncher-header {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transcription-area {
  background-color: var(--bg-panel);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  min-height: 80px;
  max-height: 300px;
  overflow-y: auto;
}

.transcription-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.transcription-status {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  margin: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.cruncher-speech {
  animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(10px);
  }
}

.cruncher-text {
  margin: 8px 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.transcription-box {
  background-color: var(--bg);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  font-style: italic;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--border);
}

.transcription-box.interim {
  opacity: 0.7;
  border-left-color: var(--warm);
}

.transcription-box.final {
  border-left-color: #10b981;
}

.transcription-box p {
  margin: 0;
}

.listening-indicator {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.cruncher-error {
  color: #ef4444;
  font-weight: 500;
  margin: 8px 0;
}

/* ========== VOICEMAIL DETAILS PANEL ========== */
.voicemail-details-panel {
  padding: 16px;
  background-color: var(--bg-panel);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.voicemail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

/* ========== AUDIO CONTROLS ========== */
.audio-controls {
  padding: 16px;
  background-color: var(--bg-panel);
  border-radius: 12px;
  border: 1px solid var(--border);
}

audio {
  outline: none;
  width: 100%;
}

audio::-webkit-media-controls-panel {
  background-color: var(--bg-panel);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .modal-content,
  .voicemail-modal {
    width: 95%;
    max-height: 95vh;
  }

  .cruncher-container {
    flex-direction: column;
  }

  .cruncher-avatar {
    width: 48px;
    height: 48px;
  }

  .cruncher-icon {
    font-size: 36px;
  }

  .voicemail-info-grid {
    grid-template-columns: 1fr;
  }

  .modal-body {
    gap: 16px;
    padding: 16px;
  }

  .modal-header {
    padding: 16px;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer button {
    width: 100%;
  }
}

/* ========== AUTO-PULL VOICEMAIL STATUS ========== */
.auto-pull-status {
  display: inline-block;
  padding: 6px 12px;
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.3s ease;
}

.auto-pull-status.active {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
  color: #059669;
  animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ========== VOICEMAIL NOTIFICATION ========== */
.voicemail-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
  z-index: 10000;
  animation: slideInRight 0.3s ease-out;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.voicemail-notification.show {
  opacity: 1;
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

.notification-icon {
  font-size: 20px;
  animation: bounce 0.6s ease-out;
}

@keyframes bounce {
  0% {
    transform: scale(0) rotateY(0);
  }
  50% {
    transform: scale(1.2) rotateY(10deg);
  }
  100% {
    transform: scale(1) rotateY(0);
  }
}

.notification-text {
  line-height: 1.4;
}

.notification-text strong {
  font-weight: 700;
  font-size: 16px;
}

@media (max-width: 768px) {
  .voicemail-notification {
    top: 10px;
    right: 10px;
    left: 10px;
    margin: 0 auto;
  }
}

/* Voicemail Queue Management Styles */
.voicemail-checkbox {
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.voicemail-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voicemail-row .ticket-info {
  flex: 1;
}

.voicemail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--accent-soft);
  border-radius: 8px;
  margin-bottom: 15px;
}

.voicemail-actions label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
}

.voicemail-actions input[type="checkbox"] {
  margin: 0;
}

.small-btn {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

@media (max-width: 720px) {
  .ticket-time-manual-grid {
    grid-template-columns: 1fr;
  }
}

.primary-btn.small-btn {
  background: var(--accent);
  color: white;
}

.primary-btn.small-btn:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.danger-btn.small-btn {
  background: #dc3545;
  color: white;
}

.danger-btn.small-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.secondary-btn.small-btn {
  background: var(--surface-strong);
  color: var(--text);
}

.secondary-btn.small-btn:hover {
  background: var(--surface-strong);
  opacity: 0.8;
}

.compact-tab-row {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}

.compact-tab-row .tab-btn {
  padding: 8px 16px;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
}

.compact-tab-row .tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.compact-tab-row .tab-btn:hover {
  color: var(--text);
}

/* ── MFA / Email Verify Auth Screens ─────────────────────────────────────── */

/* Shared auth email display */
.auth-email-display {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  margin: 0 0 12px;
  word-break: break-all;
}

.auth-section-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.auth-hint {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 14px;
}

/* Success banner */
.auth-success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(22, 160, 90, 0.12);
  border: 1px solid rgba(22, 160, 90, 0.35);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 18px;
  color: #16a05a;
  font-weight: 600;
  font-size: 0.93rem;
}

.auth-success-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* MFA setup step progress pills */
.mfa-setup-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 24px;
  flex-wrap: nowrap;
}

.mfa-step-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.80rem;
  font-weight: 500;
  border: 1px solid var(--border);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.mfa-step-pill.mfa-step-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.mfa-step-pill.mfa-step-done {
  background: rgba(22, 160, 90, 0.1);
  color: #16a05a;
  border-color: rgba(22, 160, 90, 0.3);
}

.mfa-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: currentColor;
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.mfa-step-active .mfa-step-num { background: var(--accent); }
.mfa-step-done .mfa-step-num { background: #16a05a; }
.mfa-step-pill:not(.mfa-step-active):not(.mfa-step-done) .mfa-step-num { background: var(--text-muted); }

.mfa-step-connector {
  height: 1px;
  width: 20px;
  background: var(--border);
  flex-shrink: 0;
}

/* QR code container */
.mfa-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 14px;
}

.mfa-qr-placeholder {
  width: 160px;
  height: 160px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.mfa-qr-container canvas,
.mfa-qr-container img {
  border-radius: 8px;
  border: 4px solid white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* Manual secret key display */
.mfa-manual-key {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.mfa-secret-code {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--accent);
  word-break: break-all;
  text-align: center;
  padding: 6px 0;
  user-select: all;
}

/* MFA method choice cards (login challenge) */
.mfa-method-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.mfa-method-card {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  text-align: center;
}

.mfa-method-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(43,125,214,0.10);
}

.mfa-method-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mfa-method-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.mfa-method-label {
  font-weight: 700;
  font-size: 0.93rem;
}

.mfa-method-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}


/* ── Team Feed ─────────────────────────────────────────────────── */
.feed-post-card:last-child {
  border-bottom: none !important;
}

.feed-post-card:hover {
  background: var(--surface-soft, rgba(0, 0, 0, 0.03));
}

body.theme-dark .feed-post-card:hover,
body.theme-dark .feed-post-card:focus,
body.theme-dark .feed-post-card:focus-within {
  background: var(--surface-soft, rgba(255, 255, 255, 0.06)) !important;
}

.feed-post-card .feed-like-btn:hover,
.feed-post-card .feed-comment-like-btn:hover {
  color: var(--accent-dark, #1565c0);
  opacity: 1;
}

#feedPostInput:focus,
#feedPostInput:focus-visible {
  outline: 2px solid var(--accent, #1976d2);
  border-color: var(--accent, #1976d2);
}
/* ── End Team Feed ─────────────────────────────────────────────── */

/* ── Team Feed Phase 8: Sidebar + Profile ──────────────────────── */
.feed-sidebar-emp:hover {
  background: var(--accent-soft, #e3f2fd) !important;
}

#feedProfileModal {
  backdrop-filter: blur(2px);
}

#feedProfileModalContent {
  color: var(--text) !important;
}

#feedEmployeeSearchInput:focus,
#feedEmployeeSearchInput:focus-visible {
  outline: 2px solid var(--accent, #1976d2);
  border-color: var(--accent, #1976d2) !important;
}

@media (max-width: 680px) {
  #feedSidebarCol { display: none !important; }
  #feedLayout { padding: 8px !important; }
}
/* ── End Feed Phase 8 ──────────────────────────────────────────── */

/* ── CC User Selector ──────────────────────────────────────────── */
.cc-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--shadow);
}

.cc-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cc-user-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--surface-strong);
  background: var(--bg-panel-strong);
  color: var(--text);
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-user-option:last-child {
  border-bottom: none;
}

.cc-user-option:hover,
.cc-user-option:focus {
  background: var(--accent-soft);
  outline: none;
}

.cc-user-option-name {
  font-weight: 600;
  color: var(--text);
}

.cc-user-option-email {
  font-size: 12px;
  color: var(--muted);
  display: block;
}

.cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
}

.cc-tag-remove {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.cc-tag-remove:hover {
  color: var(--text);
}

.cc-dropdown-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
}
/* ── End CC User Selector ──────────────────────────────────────── */