:root {
  --color-bg: #f4f5f7;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f8fafc;
  --color-sidebar: #f0f1f3;
  --color-sidebar-active: #ffffff;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-text: #171717;
  --color-text-muted: #6b7280;
  --color-text-soft: #9ca3af;
  --color-brand: #4f46e5;
  --color-brand-strong: #3730a3;
  --color-brand-soft: #eef2ff;
  --color-row-hover: #fbfcfd;
  --color-empty-surface: #ffffff;
  --color-info: #2563eb;
  --color-info-soft: #dbeafe;
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-critical: #7f1d1d;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 50px rgba(15, 23, 42, 0.12);
  --app-ui-scale: 0.8;
  --radius-xs: calc(8px * var(--app-ui-scale));
  --radius-sm: calc(10px * var(--app-ui-scale));
  --radius-md: calc(14px * var(--app-ui-scale));
  --radius-lg: calc(18px * var(--app-ui-scale));
  --radius-xl: calc(24px * var(--app-ui-scale));
  --space-1: calc(4px * var(--app-ui-scale));
  --space-2: calc(8px * var(--app-ui-scale));
  --space-3: calc(12px * var(--app-ui-scale));
  --space-4: calc(16px * var(--app-ui-scale));
  --space-5: calc(20px * var(--app-ui-scale));
  --space-6: calc(24px * var(--app-ui-scale));
  --space-8: calc(32px * var(--app-ui-scale));
  --font-xs: calc(12px * var(--app-ui-scale));
  --font-sm: calc(13px * var(--app-ui-scale));
  --font-md: calc(14px * var(--app-ui-scale));
  --font-lg: calc(16px * var(--app-ui-scale));
  --font-xl: calc(20px * var(--app-ui-scale));
  --font-2xl: calc(28px * var(--app-ui-scale));
  --font-3xl: calc(36px * var(--app-ui-scale));
  --sidebar-width: calc(280px * var(--app-ui-scale));
  --sidebar-collapsed-width: calc(82px * var(--app-ui-scale));
  --motion-sidebar: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-bg-elevated: #111827;
  --color-bg-muted: #1f2937;
  --color-sidebar: #0b1120;
  --color-sidebar-active: #1f2937;
  --color-border: #263244;
  --color-border-strong: #334155;
  --color-text: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-text-soft: #94a3b8;
  --color-brand-soft: rgba(79, 70, 229, 0.18);
  --color-row-hover: #172033;
  --color-empty-surface: #111827;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-md);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns var(--motion-sidebar);
}

.app-shell.is-sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-sidebar);
  scrollbar-color: color-mix(in srgb, var(--color-text-soft) 28%, transparent) transparent;
  scrollbar-width: thin;
  transition: padding var(--motion-sidebar), gap var(--motion-sidebar);
}

.app-sidebar::-webkit-scrollbar {
  width: 7px;
}

.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-soft) 24%, transparent);
  background-clip: padding-box;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-text-muted) 44%, transparent);
  background-clip: padding-box;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-4);
  font-size: var(--font-lg);
  font-weight: 800;
  transition: gap var(--motion-sidebar), padding var(--motion-sidebar);
}

.app-brand-mark,
.icon-box {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.icon-box svg {
  width: 19px;
  height: 19px;
}

.icon-box svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-campaign {
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-color: color-mix(in srgb, var(--color-brand) 24%, var(--color-border));
}

.icon-target,
.icon-users {
  color: var(--color-info);
  background: var(--color-info-soft);
  border-color: color-mix(in srgb, var(--color-info) 24%, var(--color-border));
}

.icon-success,
.icon-training {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border));
}

.app-brand-mark {
  color: var(--color-text);
}

.app-nav {
  display: grid;
  gap: var(--space-5);
}

.app-nav-group {
  display: grid;
  gap: var(--space-1);
}

.app-nav-title {
  padding: 0 var(--space-3) var(--space-2);
  color: var(--color-text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-height: 28px;
  overflow: hidden;
  transition: max-height var(--motion-sidebar), opacity var(--motion-sidebar), padding var(--motion-sidebar);
}

.app-nav-link,
.app-nav-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  border-radius: 12px;
  padding: 0 var(--space-3);
  background: transparent;
  color: #4b5563;
  font-weight: 650;
  text-align: left;
  overflow: hidden;
  transition: gap var(--motion-sidebar), padding var(--motion-sidebar), background-color var(--motion-sidebar), color var(--motion-sidebar), box-shadow var(--motion-sidebar);
}

.app-nav-link:hover,
.app-nav-toggle:hover {
  background: color-mix(in srgb, var(--color-bg-elevated) 70%, transparent);
  color: var(--color-text);
}

.app-nav-link.is-active,
.app-nav-link[aria-current="page"] {
  background: var(--color-sidebar-active);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.app-nav-toggle.is-active-parent {
  background: color-mix(in srgb, var(--color-bg-elevated) 76%, transparent);
  color: var(--color-text);
}

.app-nav-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: currentColor;
}

.app-nav-icon svg {
  width: 19px;
  height: 19px;
  overflow: visible;
}

.app-nav-icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-nav-label {
  flex: 1;
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  white-space: nowrap;
  transition: flex-basis var(--motion-sidebar), max-width var(--motion-sidebar), opacity var(--motion-sidebar);
}

.app-nav-toggle > span:not(.app-nav-icon):not(.app-nav-label) {
  max-width: 18px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width var(--motion-sidebar), opacity var(--motion-sidebar);
}

.app-nav-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: var(--font-xs);
  font-weight: 800;
}

.app-submenu {
  display: none;
  margin: var(--space-1) 0 var(--space-2) 26px;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-strong);
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  visibility: hidden;
  transition: max-height var(--motion-sidebar), margin var(--motion-sidebar), padding var(--motion-sidebar), border-color var(--motion-sidebar), opacity var(--motion-sidebar);
}

.app-submenu.is-open {
  display: grid;
  gap: var(--space-1);
  max-height: 320px;
  opacity: 1;
  visibility: visible;
}

.app-submenu .app-nav-link {
  min-height: 36px;
  border-radius: 10px;
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.app-sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: var(--space-3);
  max-height: 96px;
  overflow: hidden;
  transition: max-height var(--motion-sidebar), opacity var(--motion-sidebar);
}

.app-team-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.app-team-card strong,
.app-team-card span {
  display: block;
}

.app-team-card span {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

@media (min-width: 1121px) {
  .app-shell.is-sidebar-collapsed .app-sidebar {
    gap: var(--space-3);
  }

  .app-shell.is-sidebar-collapsed .app-brand {
    justify-content: center;
    gap: 0;
    padding-inline: 0;
  }

  .app-shell.is-sidebar-collapsed .app-nav {
    gap: var(--space-3);
  }

  .app-shell.is-sidebar-collapsed .app-nav-title {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
  }

  .app-shell.is-sidebar-collapsed .app-nav-link,
  .app-shell.is-sidebar-collapsed .app-nav-toggle {
    justify-content: center;
    gap: 0;
    padding-inline: var(--space-3);
  }

  .app-shell.is-sidebar-collapsed .app-nav-label,
  .app-shell.is-sidebar-collapsed .app-nav-toggle > span:not(.app-nav-icon):not(.app-nav-label) {
    flex: 0 1 0;
    max-width: 0;
    opacity: 0;
  }

  .app-shell.is-sidebar-collapsed .app-submenu.is-open {
    margin: 0;
    padding-left: 0;
    border-color: transparent;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .app-shell.is-sidebar-collapsed .app-sidebar-footer {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .app-sidebar,
  .app-brand,
  .app-nav-title,
  .app-nav-link,
  .app-nav-toggle,
  .app-nav-label,
  .app-nav-toggle > span:not(.app-nav-icon):not(.app-nav-label),
  .app-submenu,
  .app-sidebar-footer {
    transition-duration: 1ms;
  }
}

.app-main {
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-8);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  margin: calc(var(--space-5) * -1) calc(var(--space-6) * -1) var(--space-5);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(16px);
}

.topbar-left,
.topbar-right,
.page-actions,
.action-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar-left {
  min-width: 0;
}

.topbar-right {
  flex: 0 0 auto;
}

.public-main {
  min-height: 100vh;
  padding: 28px;
}

.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 28px;
}

.public-nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.centered-card {
  width: min(460px, 100%);
  margin: 8vh auto;
}

.centered-card .compact-title {
  margin-bottom: var(--space-2);
}

.error-card {
  max-width: 680px;
  margin: 12vh auto;
  text-align: center;
}

.hero-card {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 28px;
  text-align: center;
}

.public-section {
  max-width: 980px;
  margin: 18px auto;
}

.hero-title {
  margin: 18px 0;
  font-size: 54px;
  line-height: 1.05;
}

.hero-copy {
  max-width: 680px;
  margin: 0 auto 26px;
  color: var(--color-text-muted);
  font-size: 18px;
}

.center-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.auth-heading {
  margin-bottom: var(--space-6);
}

.auth-panel-title {
  max-width: 420px;
  margin: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.unstyled-form-section {
  border: 0;
  padding: 0;
  box-shadow: none;
}

.split-actions {
  justify-content: space-between;
  margin: 14px 0 18px;
}

.full-width {
  width: 100%;
}

.text-center {
  text-align: center;
}

.message-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.message-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.message-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 850;
}

.message-text {
  flex: 1;
  color: var(--color-text);
  font-size: var(--font-sm);
  line-height: 1.35;
}

.message-close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
}

.message-close:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

.message-success {
  border-left-color: var(--color-success);
}

.message-success .message-icon {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.message-error,
.message-danger {
  border-left-color: var(--color-danger);
}

.message-error .message-icon,
.message-danger .message-icon {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.message-warning {
  border-left-color: var(--color-warning);
}

.message-warning .message-icon {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.message-info,
.message-debug {
  border-left-color: var(--color-info);
}

.message-info .message-icon,
.message-debug .message-icon {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.danger-confirm {
  width: min(560px, 100%);
  margin: 7vh auto;
  padding: var(--space-6);
}

.modal-backdrop .danger-confirm {
  margin: 0;
}

.danger-confirm-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.danger-confirm-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 22px;
  font-weight: 850;
}

.danger-title {
  margin: var(--space-2) 0 var(--space-2);
}

.delete-context-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-muted);
}

.delete-impact-note {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-soft);
  color: #92400e;
}

.delete-impact-note strong,
.delete-impact-note span {
  display: block;
}

.delete-impact-note span {
  font-size: var(--font-sm);
}

.delete-context-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
}

.delete-context-list dt {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delete-context-list dd {
  margin: 0;
  max-width: 62%;
  color: var(--color-text);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.danger-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.dropdown-action {
  width: 100%;
  border: 0;
  padding: 10px 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.dropdown-action:hover {
  background: var(--color-bg-muted);
}

.danger-action {
  color: var(--color-danger);
  font-weight: 760;
}

.employee-delete-modal .text-muted {
  color: var(--color-text-muted);
}

.group-usage-warning {
  margin-top: var(--space-3);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-warning-soft);
  color: #92400e;
  font-weight: 700;
}

.inline-title {
  margin: 0 0 14px;
}

.compact-title {
  margin: 0 0 12px;
}

.field-with-button {
  display: flex;
  gap: var(--space-2);
}

.password-field {
  position: relative;
}

.password-field .form-control {
  padding-right: 46px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text-muted);
}

.password-toggle:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.password-toggle .eye-closed {
  display: none;
}

.password-toggle.is-visible .eye-open {
  display: none;
}

.password-toggle.is-visible .eye-closed {
  display: block;
}

.password-toggle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.otp-brand {
  margin: 0 auto 14px;
}

.otp-card {
  width: min(430px, 100%);
  margin: 5vh auto;
  padding: 24px 22px;
}

.otp-header {
  margin-bottom: var(--space-4);
}

.otp-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.otp-icon svg {
  width: 20px;
  height: 20px;
}

.otp-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.otp-form-body {
  gap: var(--space-3);
}

.otp-input {
  min-height: 52px;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.42em;
  font-weight: 700;
  padding-left: calc(12px + 0.42em);
}

.otp-countdown {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.otp-countdown.is-expired {
  color: var(--color-danger);
  font-weight: 750;
}

.password-policy-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-4);
  background: var(--color-bg-muted);
}

.password-reset-card {
  width: min(760px, 100%);
  margin: 7vh auto;
}

.password-reset-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: var(--space-5);
  align-items: start;
}

.password-policy-side-card {
  position: sticky;
  top: var(--space-5);
}

.password-policy-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.password-policy-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.password-policy-list li::before {
  content: "×";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 11px;
  font-weight: 850;
}

.password-policy-list li.is-valid {
  color: var(--color-success);
}

.password-policy-list li.is-valid::before {
  content: "✓";
  background: var(--color-success-soft);
  color: var(--color-success);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.stack-list {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-3);
}

.training-player {
  display: grid;
  gap: var(--space-4);
}

.training-player-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.training-player-stage {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.training-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.training-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.32fr);
  gap: var(--space-4);
  align-items: start;
}

.training-detail-preview,
.training-detail-side {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.training-detail-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.training-detail-meta-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.training-detail-meta-strip strong {
  color: var(--color-text);
}

.training-detail-player {
  max-height: 430px;
  background: #000;
}

.training-detail-player .training-video {
  max-height: 430px;
  object-fit: contain;
}

.training-detail-player .training-content {
  max-height: 430px;
  overflow: auto;
  background: var(--color-bg-elevated);
}

.training-detail-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.training-detail-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.training-detail-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.training-detail-list dt,
.training-detail-list dd {
  margin: 0;
}

.training-detail-list dt {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.training-detail-list dd {
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 800;
  text-align: right;
}

.training-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.training-detail-actions .btn {
  width: 100%;
  min-height: 38px;
  padding-inline: 10px;
}

.training-detail-actions .btn-primary {
  grid-column: 1 / -1;
}

.training-assignment-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5);
  background: var(--color-bg-muted);
}

.training-assignment-empty strong {
  color: var(--color-text);
  font-size: var(--font-md);
}

.training-assignment-empty p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.training-program-form {
  display: grid;
  gap: var(--space-3);
}

.program-builder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.32fr);
  gap: var(--space-4);
  align-items: start;
}

.program-main-card,
.program-readiness-card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.program-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.program-active-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  min-width: min(260px, 100%);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-3);
  background: var(--color-bg-muted);
  cursor: pointer;
}

.program-active-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-success) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-success-soft) 44%, var(--color-bg-elevated));
}

.program-active-toggle input {
  margin-top: 3px;
}

.program-active-toggle strong,
.program-active-toggle small {
  display: block;
}

.program-active-toggle small {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.35;
}

.program-details-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(320px, 1.1fr);
  gap: var(--space-3);
  align-items: start;
}

.program-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.program-description-field {
  grid-column: 1 / -1;
}

.training-program-form .form-field {
  gap: 5px;
}

.training-program-form .form-control,
.training-program-form .form-select,
.training-program-form .form-field input,
.training-program-form .form-field select,
.training-program-form .form-field textarea {
  min-height: 38px;
  border-radius: 11px;
}

.training-program-form .form-field textarea {
  min-height: 68px;
  resize: vertical;
}

.training-program-form .program-description-field textarea {
  height: 58px;
  min-height: 58px;
  max-height: 90px;
  resize: vertical;
}

.program-selection-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-3);
}

.program-selection-panel {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-bg-elevated) 86%, var(--color-bg-muted));
}

.program-section-heading {
  display: grid;
  gap: var(--space-3);
}

.program-section-heading h3 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-lg);
}

.program-section-heading p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.45;
}

.program-selection-panel select[multiple] {
  min-height: 178px;
  padding: var(--space-2);
}

.is-enhanced-select-source[hidden] {
  display: none !important;
}

.checklist-select {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.checklist-select-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.checklist-select-toolbar .form-control {
  min-height: 34px;
}

.checklist-select-toolbar span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 850;
  white-space: nowrap;
}

.checklist-select.has-selection .checklist-select-toolbar span {
  border-color: color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.checklist-select-list {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 116px;
  max-height: 176px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--color-bg-elevated);
  scrollbar-width: thin;
}

.checklist-select-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
}

.checklist-select-option:hover,
.checklist-select-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-brand) 26%, var(--color-border));
  background: color-mix(in srgb, var(--color-brand-soft) 44%, var(--color-bg-elevated));
}

.checklist-select-option input {
  margin-top: 3px;
  accent-color: var(--color-brand);
}

.checklist-select-copy strong,
.checklist-select-copy small {
  display: block;
}

.checklist-select-copy strong {
  color: var(--color-text);
  font-size: var(--font-sm);
  line-height: 1.35;
}

.checklist-select-copy small {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.program-audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.program-readiness-list {
  display: grid;
  gap: var(--space-3);
}

.program-readiness-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2);
}

.program-readiness-list span {
  grid-row: span 2;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}

.program-readiness-list strong,
.program-readiness-list small {
  display: block;
}

.program-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--space-4);
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--color-brand-soft) 86%, transparent), transparent 34%),
    linear-gradient(135deg, var(--color-bg-elevated) 0%, color-mix(in srgb, var(--color-brand-soft) 34%, var(--color-bg-elevated)) 100%);
  box-shadow: var(--shadow-sm);
}

.program-detail-hero-main,
.program-detail-command-card,
.program-detail-snapshot {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.program-detail-hero-main .page-title {
  margin-bottom: var(--space-1);
}

.program-detail-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.program-detail-meta-strip span,
.program-detail-ready {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--color-bg-elevated) 84%, transparent);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
}

.program-detail-meta-strip strong {
  margin-right: 4px;
  color: var(--color-text);
}

.program-detail-command-card {
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-bg-elevated) 82%, transparent);
  box-shadow: var(--shadow-xs);
}

.program-detail-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.program-detail-ready.is-ready {
  border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border));
  background: var(--color-success-soft);
  color: var(--color-success);
}

.program-detail-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.program-detail-secondary-actions .btn,
.program-detail-command-card > .btn {
  width: 100%;
  min-height: 34px;
  padding-inline: 10px;
}

.program-detail-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.program-detail-kpi-card {
  display: grid;
  gap: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.program-detail-kpi-card span,
.program-detail-kpi-card small {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.program-detail-kpi-card strong {
  color: var(--color-text);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.program-detail-kpi-accent {
  border-color: color-mix(in srgb, var(--color-brand) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-brand-soft) 46%, var(--color-bg-elevated));
}

.program-detail-grid,
.program-detail-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: start;
}

.program-detail-readiness,
.program-detail-snapshot,
.program-detail-table {
  align-content: start;
}

.program-detail-checks {
  display: grid;
  gap: var(--space-2);
}

.program-detail-checks article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px var(--space-3);
  background: var(--color-bg-muted);
}

.program-detail-checks article > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-warning);
  box-shadow: 0 0 0 3px var(--color-warning-soft);
}

.program-detail-checks article.is-complete > span {
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}

.program-detail-checks strong,
.program-detail-checks small {
  display: block;
}

.program-detail-checks strong {
  color: var(--color-text);
  font-size: var(--font-sm);
  line-height: 1.25;
}

.program-detail-checks small {
  margin-top: 1px;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.35;
}

.program-detail-checks em {
  color: var(--color-text-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.program-detail-table .table-toolbar {
  padding-bottom: var(--space-2);
}

.program-detail-table .data-table th,
.program-detail-table .data-table td {
  padding-block: 10px;
}

.program-readiness-list strong {
  color: var(--color-text);
  font-size: var(--font-sm);
}

.program-readiness-list small {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.35;
}

.program-tip-card {
  border: 1px solid color-mix(in srgb, var(--color-info) 20%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-info-soft) 38%, var(--color-bg-elevated));
}

.program-tip-card strong {
  display: block;
  color: var(--color-info);
}

.program-tip-card p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.45;
}

.program-actions-sticky {
  align-items: center;
}

.training-content {
  padding: var(--space-5);
}

.training-quiz {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.training-question {
  display: grid;
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0;
}

.training-question legend {
  margin-bottom: var(--space-2);
  font-weight: 800;
}

.training-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.wrap-row {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-stretch {
  align-items: stretch;
}

.justify-center {
  justify-content: center;
}

.text-right {
  text-align: right;
}

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

.topbar-search {
  position: relative;
  flex: 1 1 240px;
  width: min(360px, 36vw);
  min-width: 0;
  max-width: 100%;
}

.topbar-search input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0 78px 0 40px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.theme-toggle {
  font-size: 16px;
}

.profile-menu {
  position: relative;
}

.profile-trigger {
  border: 0;
  padding: 0;
  background: transparent;
}

.profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand), #14b8a6);
  color: #fff;
  font-weight: 850;
  box-shadow: var(--shadow-xs);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  display: none;
  min-width: 240px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
}

.profile-menu.is-open .profile-dropdown {
  display: block;
}

[data-dropdown].is-open [data-dropdown-menu] {
  display: block;
}

.profile-dropdown-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
  display: block;
}

.profile-dropdown-header span {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

.profile-account-type {
  margin-top: var(--space-2);
  color: var(--color-brand) !important;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.profile-dropdown a,
.profile-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  border: 0;
  padding: 12px var(--space-4);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  font-weight: 700;
}

.profile-dropdown a:hover,
.profile-dropdown button:hover {
  background: var(--color-bg-muted);
}

.action-menu {
  position: relative;
}

.action-dropdown {
  min-width: 150px;
  right: 0;
  left: auto;
}

.actions-col {
  width: 1%;
  min-width: 92px;
  text-align: right;
  white-space: nowrap;
}

.dropdown-portal {
  position: fixed;
  z-index: 2000;
  display: block;
}

.topbar-search::before {
  content: "⌕";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}

.topbar-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-soft);
  font-size: var(--font-xs);
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-weight: 700;
}

.app-title,
.page-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-3xl);
  line-height: 1.1;
  font-weight: 820;
  letter-spacing: -0.04em;
}

.page-subtitle {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.section-card,
.app-content-card,
.metric-card,
.stat-card,
.table-shell,
.form-section,
.modal-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.section-card,
.app-content-card,
.table-shell,
.form-section {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.section-header,
.toolbar,
.table-toolbar,
.form-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.section-title {
  margin: 0;
  font-size: var(--font-xl);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-subtitle {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.stat-grid,
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat-card,
.metric-card {
  min-height: 116px;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.stat-card {
  display: grid;
  gap: var(--space-3);
}

.compact-stat-card {
  min-height: 88px;
  align-content: center;
  gap: 6px;
  padding: 14px var(--space-4);
}

.compact-stat-card .icon-box {
  width: 42px;
  height: 42px;
}

.compact-stat-card .icon-box svg {
  width: 22px;
  height: 22px;
}

.compact-stat-card .stat-value {
  font-size: 28px;
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.metric-label,
.stat-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-weight: 720;
}

.metric-value,
.stat-value {
  margin: 0;
  color: var(--color-text);
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.compact-metric-value {
  font-size: 26px;
}

.compact-date-value {
  font-size: 22px;
}

.metric-subtext,
.stat-subtext {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.stat-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  line-height: 1.4;
}

.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: var(--font-xs);
  font-weight: 800;
}

.trend-pill.is-up {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.trend-pill.is-down {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

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

/* Training management overview */
.training-overview-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
  border-radius: var(--radius-xl);
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-bg-elevated) 92%, var(--color-brand-soft)), var(--color-bg-elevated));
  box-shadow: var(--shadow-sm);
}

.training-overview-hero::before {
  content: "";
  position: absolute;
  inset: auto -12% -45% 40%;
  height: 180px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-info) 18%, transparent);
  filter: blur(30px);
  pointer-events: none;
}

.training-hero-copy,
.training-hero-actions {
  position: relative;
  z-index: 1;
}

.training-hero-copy .page-title {
  font-size: clamp(32px, 4vw, 48px);
}

.training-hero-copy .page-subtitle {
  max-width: 760px;
  font-size: var(--font-base);
}

.training-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.training-hero-pills span {
  border: 1px solid color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
  border-radius: 999px;
  padding: 7px 11px;
  background: color-mix(in srgb, var(--color-bg-elevated) 74%, transparent);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
}

.training-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.training-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.training-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.training-summary-grid .stat-card {
  min-height: 112px;
  padding: var(--space-4);
}

.training-kpi-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 132px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  overflow: hidden;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.training-kpi-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--training-accent, var(--color-brand));
}

.training-kpi-card.is-assignments { --training-accent: var(--color-brand); }
.training-kpi-card.is-completion { --training-accent: var(--color-success); }
.training-kpi-card.is-attention { --training-accent: var(--color-warning); }
.training-kpi-card.is-content { --training-accent: var(--color-info); }

.training-kpi-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--training-accent, var(--color-brand)) 14%, transparent);
  color: var(--training-accent, var(--color-brand));
}

.training-kpi-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.training-setup-card {
  margin-bottom: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-brand-soft) 45%, var(--color-bg-elevated)), var(--color-bg-elevated));
  box-shadow: var(--shadow-sm);
}

.training-setup-card.is-neutral {
  margin-top: 0;
  margin-bottom: var(--space-4);
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.training-setup-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.training-step-card {
  border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-bg-elevated) 84%, transparent);
}

.training-step-card.is-neutral {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: start;
  min-height: auto;
  padding: var(--space-3);
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
}

.training-step-card span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--space-3);
  border-radius: 10px;
  background: var(--color-brand);
  color: white;
  font-size: var(--font-xs);
  font-weight: 900;
}

.training-step-card.is-neutral span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  margin-bottom: 0;
  background: var(--color-bg-muted);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.training-step-card strong {
  display: block;
  color: var(--color-text);
  font-size: var(--font-sm);
}

.training-step-card p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  line-height: 1.45;
}

.training-step-card.is-neutral p {
  margin-top: 0;
  font-size: var(--font-xs);
}

.training-insight-grid,
.training-activity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.training-panel {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.training-panel.is-empty-panel {
  min-height: 210px;
  display: grid;
  align-content: center;
}

.training-panel .empty-state {
  padding: var(--space-5) var(--space-4);
}

.chart-card {
  min-height: 300px;
}

.chart-placeholder,
.soft-chart {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(79, 70, 229, 0.08), rgba(20, 184, 166, 0.02)),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(229, 231, 235, 0.55) 64px 65px);
}

.chart-placeholder::after,
.soft-chart::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 28%;
  height: 86px;
  border-bottom: 5px solid var(--color-brand);
  border-radius: 50%;
  transform: rotate(-4deg);
  opacity: 0.72;
}

.table-shell {
  overflow: hidden;
}

.table-toolbar {
  align-items: center;
}

.table-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-panel {
  display: grid;
  gap: var(--space-3);
}

.filter-search {
  min-height: 48px;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.library-shell {
  padding: var(--space-4);
}

.library-toolbar {
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

.library-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.library-search-control {
  min-width: min(320px, 100%);
  min-height: 38px;
}

.library-empty-state {
  min-height: 260px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.library-empty-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.library-row-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.library-row-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 900;
}

.library-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.library-summary-strip div {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-muted);
}

.library-summary-strip strong,
.library-summary-strip span {
  display: block;
}

.library-summary-strip strong {
  color: var(--color-text);
  font-size: var(--font-xl);
  line-height: 1;
}

.library-summary-strip span {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.template-library-toolbar {
  margin-bottom: var(--space-2);
}

.template-library-toolbar .library-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  min-width: min(460px, 100%);
}

.template-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.template-filter-chips a {
  text-decoration: none;
}

.template-library-list {
  display: grid;
  gap: var(--space-2);
}

.template-library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
}

.template-library-item:hover {
  border-color: color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
  background: var(--color-row-hover);
}

.template-library-item h3,
.template-library-item p {
  margin: 0;
}

.template-library-item h3 {
  color: var(--color-text);
  font-size: var(--font-md);
  line-height: 1.25;
}

.template-library-item p {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

.template-library-meta {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.template-library-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px;
  background: var(--color-bg-muted);
}

.template-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 300px));
  gap: var(--space-3);
  justify-content: start;
}

.template-preview-card {
  overflow: hidden;
  display: grid;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.template-preview-card:hover {
  border-color: color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
  box-shadow: var(--shadow-sm);
}

.template-preview-frame {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  height: 124px;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2);
  background: var(--color-bg-muted);
}

.template-preview-scale {
  flex: 0 0 640px;
  width: 640px;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transform: scale(0.31);
  transform-origin: top center;
  pointer-events: none;
}

.template-preview-iframe {
  flex: 0 0 640px;
  width: 640px;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
  transform: scale(0.31);
  transform-origin: top center;
  pointer-events: none;
}

.template-preview-overlay {
  position: absolute;
  inset: auto var(--space-2) var(--space-2);
  display: grid;
  place-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 800;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.template-preview-frame:hover .template-preview-overlay {
  opacity: 1;
  transform: translateY(0);
}

.template-preview-scale table {
  max-width: 100% !important;
  table-layout: fixed;
}

.template-preview-scale img {
  max-width: 100% !important;
  height: auto !important;
}

.template-preview-body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.template-preview-card h3,
.template-preview-card p {
  margin: 0;
}

.template-preview-card h3 {
  color: var(--color-text);
  font-size: var(--font-sm);
  line-height: 1.3;
}

.template-preview-card p {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

.template-preview-card .template-library-actions {
  justify-self: end;
  margin: 0 var(--space-3) var(--space-2);
}

.email-template-form-section form {
  display: grid;
  gap: var(--space-4);
}

.email-template-settings-grid,
.email-template-content-grid {
  display: grid;
  gap: var(--space-3);
}

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

.email-template-content-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: start;
}

.email-template-form-section .form-field {
  gap: var(--space-1);
}

.email-template-form-section .form-label {
  font-size: var(--font-xs);
}

.email-template-form-section input,
.email-template-form-section select,
.email-template-form-section textarea {
  min-height: 38px;
}

.email-template-content-grid textarea {
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-xs);
  line-height: 1.55;
}

.email-template-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-muted);
}

.email-template-options .form-check-row {
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
}

.email-template-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(180px, 0.55fr);
  gap: var(--space-3);
}

.email-template-description-field textarea {
  min-height: 64px;
}

.email-template-editor-shell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-muted);
}

.editor-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.email-template-editor-shell textarea {
  min-height: 300px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-xs);
  line-height: 1.55;
}

.email-template-secondary-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.email-template-secondary-panel summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-weight: 800;
}

.email-template-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3);
}

.email-template-secondary-grid textarea {
  min-height: 150px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-xs);
}

.email-template-secondary-grid .email-template-options {
  align-content: start;
  display: grid;
}

.landing-page-form-section form {
  display: grid;
  gap: var(--space-4);
}

.landing-page-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr) minmax(240px, 0.8fr);
  gap: var(--space-3);
}

.landing-page-form-section .form-field {
  gap: var(--space-1);
}

.landing-page-form-section .form-label {
  font-size: var(--font-xs);
}

.landing-page-description-field textarea {
  min-height: 64px;
}

.landing-page-editor-shell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-muted);
}

.landing-page-editor-shell textarea {
  min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-xs);
  line-height: 1.55;
}

.email-ai-grid {
  align-items: stretch;
}

.email-ai-panel {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  height: 100%;
}

.email-ai-panel .form-field {
  gap: var(--space-1);
}

.email-ai-prompt {
  min-height: 154px;
}

.email-ai-review-grid {
  display: grid;
  gap: var(--space-3);
}

.email-ai-description textarea {
  min-height: 68px;
}

.email-ai-html textarea {
  min-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-xs);
  line-height: 1.55;
}

.email-ai-status {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--color-info) 18%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-info-soft) 40%, var(--color-bg-elevated));
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 700;
}

.email-ai-status.is-error {
  border-color: color-mix(in srgb, var(--color-danger) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger-soft) 50%, var(--color-bg-elevated));
  color: var(--color-danger);
}

.email-ai-preview-empty {
  min-height: 260px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.email-ai-preview-modal {
  width: min(760px, 100%);
  max-height: min(760px, 88vh);
}

.email-ai-preview-modal .modal-body {
  max-height: 68vh;
  overflow: auto;
  background: var(--color-bg-muted);
}

.email-ai-preview-modal iframe,
.email-ai-preview-modal .email-preview-frame,
.email-ai-preview-modal #aiPreviewFrame {
  max-width: 100%;
}

.email-ai-preview-canvas {
  width: min(620px, 100%);
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.email-ai-preview-document {
  overflow: hidden;
  width: 100%;
  color: #111827;
  font-size: 14px;
  line-height: 1.55;
}

.email-ai-preview-document > * {
  max-width: 100% !important;
}

.email-ai-preview-document table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

.email-ai-preview-document img {
  max-width: 100% !important;
  height: auto !important;
}

.email-ai-preview-document td,
.email-ai-preview-document th,
.email-ai-preview-document p,
.email-ai-preview-document div {
  overflow-wrap: anywhere;
}

.email-ai-preview-placeholder {
  padding: var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}

.filter-grid,
.employee-filter-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) repeat(2, minmax(180px, 0.8fr));
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  align-items: center;
}

.filter-grid-with-actions {
  grid-template-columns: minmax(280px, 1.35fr) repeat(2, minmax(180px, 0.8fr)) minmax(208px, auto);
}

.filter-grid-search,
.employee-filter-search {
  min-height: 44px;
}

.filter-grid-actions,
.employee-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-left: var(--space-2);
}

.content-library-filter-card {
  padding: var(--space-4);
}

.content-library-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.content-library-summary-strip article {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
  min-height: 116px;
}

.content-library-summary-strip strong,
.content-library-summary-strip span {
  display: block;
}

.content-library-summary-strip strong {
  color: var(--color-text);
  font-size: var(--font-2xl);
  line-height: 1;
}

.content-library-summary-strip span {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
}

.content-library-filter-card .filter-grid-with-actions {
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 0.7fr)) auto;
  column-gap: var(--space-3);
}

.content-library-filter-card .filter-grid-actions {
  justify-content: flex-end;
  gap: var(--space-2);
  padding-left: 0;
  white-space: nowrap;
}

.content-library-filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.content-library-filter-summary span {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--color-bg-muted);
}

.content-library-table .table-toolbar {
  padding-bottom: var(--space-3);
}

.content-library-data-table .content-library-title-cell {
  width: 38%;
}

.program-data-table .content-library-title-cell {
  width: 30%;
}

.content-library-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.content-library-meta-chips > span:not(.badge) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.content-library-usage strong,
.content-library-usage small {
  display: block;
}

.content-library-usage strong {
  color: var(--color-text);
  font-size: var(--font-sm);
}

.content-library-usage small {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

.content-library-action-trigger {
  width: 34px;
  min-height: 32px;
  padding: 0;
  font-size: var(--font-lg);
  line-height: 1;
  letter-spacing: 0.08em;
}

.assignment-filter-card {
  padding: var(--space-4);
}

.assignment-filter-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(180px, 0.42fr) minmax(190px, 0.46fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.assignment-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-left: var(--space-2);
  white-space: nowrap;
}

.assignment-advanced-filters {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.assignment-advanced-filters summary {
  width: fit-content;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-weight: 800;
}

.assignment-advanced-filters summary:hover {
  color: var(--color-text);
}

.assignment-advanced-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.table-search {
  min-width: 280px;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.target-group-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.target-group-summary-strip div {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.target-group-summary-strip strong,
.target-group-summary-strip span {
  display: block;
}

.target-group-summary-strip strong {
  color: var(--color-text);
  font-size: var(--font-xl);
  line-height: 1;
  font-weight: 850;
}

.target-group-summary-strip span {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.target-group-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.target-group-card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 94%, var(--color-brand-soft)), var(--color-bg-elevated));
  box-shadow: var(--shadow-xs);
}

.target-group-card:hover {
  border-color: color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
  box-shadow: var(--shadow-sm);
}

.target-group-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.target-group-card-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-xl);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.target-group-card-kicker {
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.target-group-card-description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.target-group-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.target-group-card-pills span {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--color-bg-muted);
  color: var(--color-text);
  font-size: var(--font-xs);
  font-weight: 800;
}

.target-group-departments {
  display: grid;
  gap: var(--space-2);
}

.target-group-departments strong {
  display: block;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: var(--color-bg-muted);
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.target-group-meta-label {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.target-group-card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}

.target-group-card-meta span {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.target-group-card-meta strong {
  max-width: 62%;
  color: var(--color-text);
  font-size: var(--font-sm);
  text-align: right;
  overflow-wrap: anywhere;
}

.target-group-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-md);
}

.data-table th,
.data-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.data-table tbody tr:hover {
  background: var(--color-row-hover);
}

.select-col {
  width: 44px;
}

.select-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand);
}

.empty-table-row:hover {
  background: transparent;
}

.empty-table-cell {
  padding: 0;
  background: var(--color-empty-surface);
}

.compact-table th,
.compact-table td {
  padding-block: 11px;
}

.list-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
}

.row-title {
  display: block;
  color: var(--color-text);
  font-weight: 760;
}

.row-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-left: auto;
  width: fit-content;
}

.data-table th.text-right,
.data-table td.text-right,
.data-table td:has(.row-actions),
.data-table td:has(.action-menu) {
  text-align: right;
}

.data-table th.actions-col,
.data-table td:has(.row-actions),
.data-table td:has(.action-menu) {
  width: 1%;
  min-width: 92px;
  white-space: nowrap;
}

.data-table td:has(.action-menu) .action-menu {
  display: inline-flex;
  justify-content: flex-end;
}

.bulk-action-bar {
  position: sticky;
  bottom: var(--space-4);
  z-index: 15;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: fit-content;
  margin: var(--space-4) auto 0;
  border-radius: 999px;
  padding: var(--space-2);
  background: #111827;
  color: #fff;
  box-shadow: var(--shadow-md);
}

.bulk-action-bar.is-visible {
  display: flex;
}

.btn,
.btn-primary,
.btn-ghost,
.btn-danger,
.btn-link,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  padding: 0 12px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.btn:hover,
.btn-ghost:hover,
.icon-button:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-muted);
}

.btn-primary {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.btn-primary:hover {
  border-color: var(--color-brand-strong);
  background: var(--color-brand-strong);
}

.btn-danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: #fff;
}

.btn-ghost,
.btn-link {
  border-color: transparent;
  background: transparent;
}

.btn-link {
  min-height: auto;
  padding: 0;
  color: var(--color-brand);
}

.icon-button {
  width: 38px;
  padding: 0;
}

.icon-button-sm {
  width: 32px;
  min-height: 32px;
  border-radius: 9px;
}

.btn-compact {
  min-height: 32px;
  padding-inline: 10px;
  border-radius: 9px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: var(--font-xs);
  font-weight: 820;
  line-height: 1;
}

.badge-success,
.status-active,
.status-completed,
.status-none {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge-warning,
.status-paused,
.status-medium {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge-danger,
.status-failed,
.status-high {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.badge-info,
.status-draft,
.status-low {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.form-grid,
.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form-section {
  display: grid;
  gap: var(--space-4);
}

.form-section.unstyled-form-section {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.auth-simple-form {
  display: grid;
  gap: var(--space-4);
}

.auth-simple-form .form-field {
  gap: 8px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.employee-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.employee-email-field {
  align-content: start;
}

.required-marker {
  margin-left: 2px;
  color: var(--color-danger);
  font-weight: 850;
}

.domain-guidance {
  display: grid;
  gap: var(--space-2);
}

.domain-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.domain-chip-label {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 760;
}

.form-summary-error {
  margin-bottom: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-soft);
  color: var(--color-critical);
  font-size: var(--font-sm);
  font-weight: 650;
}

.form-summary-error p {
  margin: 0;
}

.employee-form-actions {
  align-items: center;
}

.modal-card.import-export-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.import-export-modal .modal-body {
  max-height: calc(100vh - 170px);
  overflow: auto;
}

.import-export-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--space-4);
}

.import-export-section {
  align-content: start;
}

.import-export-primary,
.import-export-secondary {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.import-export-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.import-export-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--font-lg);
  font-weight: 850;
}

.import-export-form {
  display: grid;
  gap: var(--space-3);
}

.file-upload-panel {
  display: grid;
  gap: var(--space-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-muted);
}

.export-action-list {
  display: grid;
  gap: var(--space-3);
}

.export-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
}

.export-action-card:hover {
  border-color: color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
  background: var(--color-brand-soft);
}

.export-action-card strong,
.export-action-card small {
  display: block;
}

.export-action-card small {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.35;
}

.import-error-summary ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

.import-error-summary li + li {
  margin-top: var(--space-1);
}

.import-domain-row {
  margin-bottom: var(--space-3);
}

.form-label {
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 760;
}

.form-help,
.form-error {
  margin: 0;
  font-size: var(--font-xs);
}

.form-help {
  color: var(--color-text-muted);
}

.form-error {
  color: var(--color-danger);
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.form-select,
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.form-select option {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

input[type="file"].form-control,
.form-field input[type="file"] {
  padding: 7px 10px;
}

input[type="file"].form-control::file-selector-button,
.form-field input[type="file"]::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button,
.form-field input[type="file"]::-webkit-file-upload-button {
  margin-right: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 7px 11px;
  background: var(--color-bg-muted);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-xs);
  font-weight: 800;
  cursor: pointer;
}

input[type="file"].form-control::file-selector-button:hover,
.form-field input[type="file"]::file-selector-button:hover,
input[type="file"].form-control::-webkit-file-upload-button:hover,
.form-field input[type="file"]::-webkit-file-upload-button:hover {
  border-color: var(--color-border-strong);
  background: var(--color-brand-soft);
  color: var(--color-text);
}

textarea.form-control {
  min-height: 96px;
  resize: vertical;
}

.form-field textarea {
  min-height: 96px;
  resize: vertical;
}

.target-group-details-card .form-grid {
  align-items: start;
}

.target-group-primary-card {
  border-color: color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
}

.target-group-secondary-card {
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, var(--color-bg-muted));
}

.target-group-details-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.target-group-details-grid .target-group-field:has(textarea) {
  grid-column: auto;
}

.target-group-field textarea {
  min-height: 78px;
}

.target-group-employee-tools {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 0.4fr) auto;
}

.selected-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-brand) 24%, var(--color-border));
  border-radius: 12px;
  padding: var(--space-3);
  background: var(--color-brand-soft);
  color: var(--color-text);
}

.selected-action-bar[hidden] {
  display: none;
}

.form-actions-inline {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.no-results-row:hover {
  background: transparent;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.18);
  outline-offset: 2px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-bg-elevated) inset;
  transition: background-color 9999s ease-in-out 0s;
}

:root[data-theme="dark"] .data-table th,
:root[data-theme="dark"] .data-table td {
  border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .empty-table-cell,
:root[data-theme="dark"] .rich-empty-state,
:root[data-theme="dark"] .table-empty-state {
  background: var(--color-empty-surface);
}

.form-check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.training-content-form {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding-bottom: var(--space-4);
}

.training-builder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 248px);
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

.training-builder-shell > .training-form-section,
.training-builder-shell > .training-quiz-panel-card {
  grid-column: 1;
}

.training-builder-shell > .training-readiness-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.training-form-section,
.training-side-card {
  min-width: 0;
  padding: var(--space-3);
}

.training-quiz-panel-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.training-single-card {
  display: grid;
  gap: var(--space-3);
}

.training-builder-intro {
  padding-bottom: 0;
}

.training-builder-intro .section-title {
  margin: 0;
  font-size: var(--font-xl);
}

.training-builder-intro .section-subtitle {
  margin-top: 2px;
  font-size: var(--font-sm);
}

.training-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: stretch;
}

.training-details-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.training-details-stack:not(:has(.training-type-field)) {
  grid-template-rows: 1fr;
}

.training-description-field textarea {
  height: 100%;
}

.training-description-field {
  grid-template-rows: auto minmax(0, 1fr);
}

.training-content-form .form-field {
  gap: 4px;
}

.training-content-form .form-label,
.training-video-mode-field > .form-label {
  font-size: var(--font-sm);
}

.training-content-form .form-control,
.training-content-form .form-select,
.training-content-form .form-field input,
.training-content-form .form-field select,
.training-content-form .form-field textarea {
  min-height: 34px;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: var(--font-md);
}

.training-content-form textarea.form-control,
.training-content-form .form-field textarea {
  min-height: 74px;
}

.training-compact-section {
  display: grid;
  gap: var(--space-2);
}

.training-lower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

.training-lower-grid .training-compact-section {
  padding-top: 0;
}

.training-compact-heading,
.training-quiz-heading,
.training-readiness-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.training-compact-heading h3,
.training-readiness-header h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-lg);
  font-weight: 850;
}

.training-compact-heading p {
  margin: 1px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.training-source-row {
  display: grid;
  grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: end;
  min-width: 0;
}

.training-video-mode-field,
.training-source-input {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.training-video-mode-field div[id^="id_video_type"],
.training-video-mode-field ul {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.training-source-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-weight: 850;
  cursor: pointer;
}

.training-source-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.training-source-switch-track {
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  padding: 2px;
  background: var(--color-border-strong);
  transition: background 160ms ease;
}

.training-source-switch-track span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
  transition: transform 160ms ease;
}

.training-source-switch:has(input:checked) .training-source-switch-track {
  background: var(--color-brand);
}

.training-source-switch:has(input:checked) .training-source-switch-track span {
  transform: translateX(20px);
}

.training-source-switch:has(input:focus-visible) {
  outline: 3px solid rgba(79, 70, 229, 0.18);
  outline-offset: 2px;
}

.training-html-content-field {
  grid-column: 1 / -1;
}

.training-current-upload-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-info) 24%, var(--color-border));
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--color-info-soft) 44%, var(--color-bg-elevated));
  color: var(--color-text);
  font-size: var(--font-xs);
}

.training-current-upload-alert strong {
  color: var(--color-info);
}

.training-current-upload-alert span {
  color: var(--color-text-muted);
}

.training-quiz-toggle,
.training-publish-toggle {
  cursor: pointer;
}

.training-quiz-toggle {
  min-height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--color-bg-elevated);
  font-size: var(--font-sm);
  font-weight: 850;
  white-space: nowrap;
}

.training-quiz-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-brand) 38%, var(--color-border));
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.training-quiz-toggle input {
  width: 14px;
  height: 14px;
}

.training-quiz-settings {
  display: flex;
  align-items: end;
  gap: var(--space-2);
}

.training-quiz-card-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.training-quiz-card-header .section-title {
  margin: 0;
  font-size: var(--font-lg);
}

.training-quiz-card-header .section-subtitle {
  margin-top: 2px;
  font-size: var(--font-sm);
}

.training-quiz-settings .form-field {
  width: 132px;
}

.training-quiz-actions {
  justify-content: flex-start;
}

.training-question-editor {
  padding: var(--space-3);
}

.training-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.training-readiness-panel {
  position: sticky;
  top: var(--space-3);
  min-width: 0;
}

.training-side-card {
  display: grid;
  gap: var(--space-3);
  height: 100%;
  align-content: start;
}

.training-step-kicker {
  display: block;
  margin-bottom: 1px;
  color: var(--color-brand);
  font-size: var(--font-xs);
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.training-readiness-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 850;
}

.training-readiness-state.is-ready {
  border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border));
  background: var(--color-success-soft);
  color: var(--color-success);
}

.training-readiness-list {
  display: grid;
  gap: var(--space-2);
}

.training-readiness-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.training-readiness-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-border-strong);
}

.training-readiness-item.is-ready .training-readiness-dot {
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}

.training-readiness-item strong,
.training-readiness-item small,
.training-publish-toggle strong,
.training-publish-toggle small {
  display: block;
}

.training-readiness-item strong,
.training-publish-toggle strong {
  font-size: var(--font-xs);
}

.training-readiness-item small,
.training-publish-toggle small {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  line-height: 1.3;
}

.training-publish-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-2);
  background: var(--color-bg-muted);
}

.training-publish-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-success) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-success-soft) 44%, var(--color-bg-elevated));
}

.training-publish-toggle input {
  margin-top: 2px;
}

.training-quiz-panel-card[hidden],
[data-video-field][hidden] {
  display: none !important;
}

.form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  backdrop-filter: blur(14px);
}

.training-actions-sticky {
  align-items: center;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-elevated) 94%, transparent);
}

.training-actions-status {
  display: grid;
  gap: var(--space-2);
  min-width: min(360px, 100%);
  margin-right: auto;
}

.training-action-context {
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-weight: 700;
}

.upload-progress-panel {
  display: grid;
  gap: 5px;
  min-width: min(320px, 100%);
}

.upload-progress-panel[hidden] {
  display: none !important;
}

.upload-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 750;
}

.upload-progress-header strong {
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}

.upload-progress-track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
}

.upload-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand);
  transition: width 160ms ease;
}

.upload-progress-panel.is-error .upload-progress-header,
.upload-progress-panel.is-error .upload-progress-header strong {
  color: var(--color-danger);
}

.upload-progress-panel.is-error .upload-progress-track span {
  background: var(--color-danger);
}

.form-actions-elevated {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(10px);
}

.modal-backdrop.is-open {
  display: flex;
}

.modal-card {
  width: min(560px, calc(100vw - 32px));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.modal-header,
.modal-body,
.modal-footer {
  padding: var(--space-5);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  margin: 0;
  font-size: var(--font-xl);
  font-weight: 820;
}

.modal-description {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 760px) {
  .employee-form-grid,
  .import-export-grid {
    grid-template-columns: 1fr;
  }
}

.auth-layout {
  min-height: calc(100vh - 56px);
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
}

.auth-panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-8);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(79, 70, 229, 0.65), transparent 36%),
    linear-gradient(145deg, #0f172a 0%, #1e1b4b 48%, #4f46e5 100%);
  color: #fff;
}

.auth-panel::before,
.auth-panel::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  pointer-events: none;
}

.auth-panel::before {
  width: 360px;
  height: 360px;
  left: -160px;
  bottom: -170px;
}

.auth-panel::after {
  width: 220px;
  height: 220px;
  right: -90px;
  top: -70px;
}

.auth-panel p {
  color: rgba(255, 255, 255, 0.74);
}

.auth-brand-lockup,
.auth-panel-copy,
.auth-trust-list {
  position: relative;
  z-index: 1;
}

.auth-brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-size: var(--font-lg);
  font-weight: 850;
}

.auth-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.auth-logo-mark svg {
  width: 20px;
  height: 20px;
}

.auth-logo-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-panel-copy {
  margin-top: 76px;
}

.auth-panel-eyebrow {
  margin: 0 0 var(--space-3);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-trust-list {
  display: grid;
  gap: var(--space-2);
  margin-top: 42px;
}

.auth-trust-list span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-sm);
  font-weight: 700;
}

.auth-trust-list span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

.employee-auth-panel {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.2), transparent 22%),
    radial-gradient(circle at 90% 82%, rgba(20, 184, 166, 0.58), transparent 34%),
    linear-gradient(145deg, #0f172a 0%, #134e4a 46%, #4f46e5 100%);
}

.auth-secondary-panel {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.auth-secondary-panel summary {
  color: var(--color-brand);
  cursor: pointer;
  font-weight: 800;
  text-align: center;
}

.auth-activation-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.auth-form {
  padding: var(--space-8);
}

.empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
}

.empty-state h2 {
  margin: 0 0 var(--space-2);
}

.empty-state p {
  max-width: 520px;
  margin: 0 auto var(--space-4);
  color: var(--color-text-muted);
}

.advisory-ai-panel {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.advisory-ai-image-preview {
  overflow: hidden;
  width: min(260px, 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.advisory-ai-image-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.advisory-library-shell {
  padding: var(--space-4);
}

.advisory-library-toolbar {
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

.advisory-library-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.55fr);
  min-width: min(420px, 100%);
}

.advisory-search-control,
.advisory-status-control {
  min-height: 38px;
}

.advisory-list-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.advisory-list-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-weight: 900;
}

.advisory-created-col {
  width: 130px;
}

.advisory-status-col {
  width: 110px;
}

.advisory-content-card,
.advisory-meta-card {
  align-content: start;
}

.advisory-meta-card {
  display: grid;
  gap: var(--space-4);
}

.advisory-status-panel {
  display: flex;
  gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-info) 18%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-info-soft) 42%, var(--color-bg-elevated));
}

.advisory-status-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-info-soft);
  color: var(--color-info);
  font-weight: 900;
}

.advisory-status-panel strong,
.advisory-subject-card strong,
.advisory-danger-zone strong {
  display: block;
}

.advisory-status-panel p,
.advisory-danger-zone p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.advisory-meta-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.advisory-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.advisory-date-grid div,
.advisory-subject-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-muted);
}

.advisory-date-grid span,
.advisory-date-grid small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

.advisory-date-grid strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text);
}

.advisory-subject-card strong {
  margin-top: var(--space-2);
  line-height: 1.45;
}

.advisory-schedule-list {
  margin: 0;
}

.advisory-danger-zone {
  display: grid;
  gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-danger) 24%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-danger-soft) 42%, var(--color-bg-elevated));
}

.advisory-image-frame {
  overflow: hidden;
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.advisory-image-frame img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.advisory-body {
  color: var(--color-text);
  font-size: var(--font-md);
  line-height: 1.75;
  white-space: normal;
}

.advisory-preview-shell {
  display: flex;
  justify-content: center;
}

.advisory-email-preview {
  width: min(640px, 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}

.advisory-email-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
}

.advisory-email-header h2 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-xl);
  line-height: 1.2;
}

.advisory-email-header p {
  margin: 0;
  color: var(--color-text-muted);
}

.advisory-email-preview .advisory-image-frame {
  margin: var(--space-4) var(--space-4) 0;
}

.advisory-email-preview .advisory-body {
  padding: var(--space-4);
  font-size: var(--font-sm);
}

.advisory-form-section form {
  display: grid;
  gap: var(--space-4);
}

.advisory-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

.advisory-form-section .form-field {
  gap: var(--space-1);
}

.advisory-form-section .form-label {
  font-size: var(--font-xs);
}

.advisory-form-section .form-control,
.advisory-form-section .form-field input,
.advisory-form-section .form-field select {
  min-height: 38px;
}

.advisory-form-section textarea.form-control,
.advisory-form-section .form-field textarea {
  min-height: 132px;
}

.advisory-field-content {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-content: start;
}

.advisory-field-image {
  max-width: 360px;
}

.advisory-field-image .form-control,
.advisory-field-image input[type="file"] {
  min-height: 34px;
  padding: 5px 8px;
  font-size: var(--font-xs);
}

.advisory-field-image input[type="file"]::file-selector-button,
.advisory-field-image input[type="file"]::-webkit-file-upload-button {
  min-height: 26px;
  padding: 0 9px;
  font-size: var(--font-xs);
}

.advisory-schedule-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.advisory-schedule-panel summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-weight: 800;
}

.advisory-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3);
}

.advisory-field-groups {
  grid-column: 1 / -1;
}

.advisory-send-form form {
  display: grid;
  gap: var(--space-4);
}

.multi-select {
  position: relative;
}

.multi-select-trigger {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  padding: 0 var(--space-3);
  color: var(--color-text);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.multi-select-trigger-content {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.multi-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.multi-select-chips span {
  max-width: 118px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-brand-soft);
  padding: 0 6px;
  color: var(--color-brand);
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-trigger:hover,
.multi-select.is-open .multi-select-trigger {
  border-color: color-mix(in srgb, var(--color-brand) 26%, var(--color-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.multi-select-trigger-icon {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

.multi-select-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + var(--space-2));
  z-index: 60;
  display: none;
  overflow: hidden;
  width: min(420px, 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
}

.multi-select.is-open .multi-select-menu {
  display: block;
}

.multi-select-search-wrap {
  padding: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-muted);
}

.multi-select-search-wrap .form-control {
  min-height: 32px;
  padding: 6px 9px;
  font-size: var(--font-xs);
}

.multi-select-options {
  max-height: 176px;
  overflow-y: auto;
}

.multi-select-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  border-bottom: 0;
  cursor: pointer;
}

.multi-select-option:hover,
.multi-select-option:has(input:checked) {
  background: var(--color-bg-muted);
}

.multi-select-option input {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  accent-color: var(--color-brand);
}

.multi-select-option strong {
  overflow: hidden;
  font-size: var(--font-xs);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-option strong,
.multi-select-option small {
  display: block;
}

.multi-select-option small {
  margin-top: 1px;
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-empty {
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  text-align: center;
}

.advisory-send-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-muted);
}

.advisory-send-status {
  display: flex;
  gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-info) 18%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-info-soft) 38%, var(--color-bg-elevated));
}

.advisory-send-status strong,
.advisory-summary-card strong {
  display: block;
}

.advisory-send-status p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.advisory-summary-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-muted);
}

.advisory-summary-card strong {
  margin-top: var(--space-2);
  line-height: 1.35;
}

.advisory-summary-card small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.advisory-send-preview strong {
  display: block;
  margin-bottom: var(--space-2);
}

.advisory-send-preview p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.smtp-services-page {
  display: grid;
  gap: var(--space-5);
}

.smtp-services-page .page-header {
  margin-bottom: 0;
}

.smtp-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-brand-soft) 72%, transparent), transparent 34%),
    var(--color-bg-elevated);
}

.smtp-hero .section-subtitle {
  max-width: 760px;
}

.smtp-hero-status {
  flex: 0 0 auto;
}

.smtp-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: var(--space-4);
}

.smtp-status-card {
  display: grid;
  gap: var(--space-4);
}

.smtp-card-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.smtp-card-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-muted);
}

.smtp-card-icon svg {
  width: 20px;
  height: 20px;
}

.smtp-card-icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smtp-card-icon.icon-info {
  color: var(--color-info);
  background: var(--color-info-soft);
  border-color: color-mix(in srgb, var(--color-info) 24%, var(--color-border));
}

.smtp-card-icon.icon-success {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border));
}

.smtp-card-icon.icon-warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
}

.smtp-metric-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.smtp-metric-row strong {
  font-size: var(--font-3xl);
  line-height: 1;
}

.smtp-metric-row span {
  color: var(--color-text-muted);
  font-weight: 700;
}

.smtp-domain-list {
  display: grid;
  gap: var(--space-2);
}

.smtp-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
}

.smtp-domain-row strong,
.smtp-ip-panel strong,
.smtp-empty-state strong {
  display: block;
  line-height: 1.35;
}

.smtp-domain-row span:not(.badge),
.smtp-ip-panel p,
.smtp-empty-state p,
.smtp-detail-list dd {
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.smtp-domain-row span:not(.badge) {
  display: block;
  margin-top: 2px;
}

.smtp-empty-state,
.smtp-ip-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-muted);
}

.smtp-empty-state p,
.smtp-ip-panel p {
  margin: var(--space-2) 0 0;
}

.smtp-ip-panel {
  display: grid;
  gap: var(--space-2);
}

.smtp-ip-panel.is-enabled {
  border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-success-soft) 36%, var(--color-bg-elevated));
}

.smtp-ip-panel.is-disabled {
  border-color: color-mix(in srgb, var(--color-warning) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning-soft) 38%, var(--color-bg-elevated));
}

.smtp-ip-panel .badge {
  width: fit-content;
}

.smtp-detail-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.smtp-detail-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.smtp-detail-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.smtp-detail-list dt,
.smtp-detail-list dd {
  margin: 0;
}

.smtp-detail-list dt {
  font-weight: 760;
}

.smtp-test-card {
  gap: var(--space-4);
}

.smtp-test-card .section-header {
  margin-bottom: 0;
}

.smtp-test-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.smtp-test-options legend {
  grid-column: 1 / -1;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 760;
}

.smtp-radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 86px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  cursor: pointer;
}

.smtp-radio-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-brand-soft) 54%, var(--color-bg-elevated));
}

.smtp-radio-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

.smtp-radio-card input {
  margin-top: 3px;
  accent-color: var(--color-brand);
}

.smtp-radio-card strong,
.smtp-radio-card small {
  display: block;
}

.smtp-radio-card small {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.smtp-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.smtp-field-wide {
  grid-column: 1 / -1;
}

.smtp-form-feedback {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-weight: 720;
}

.smtp-form-feedback.is-info {
  border-color: color-mix(in srgb, var(--color-info) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-info-soft) 58%, var(--color-bg-elevated));
  color: var(--color-info);
}

.smtp-form-feedback.is-success {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-success-soft) 58%, var(--color-bg-elevated));
  color: var(--color-success);
}

.smtp-form-feedback.is-error {
  border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger-soft) 58%, var(--color-bg-elevated));
  color: var(--color-danger);
}

.smtp-test-actions {
  align-items: center;
  margin-top: var(--space-4);
}

.smtp-test-actions .form-help {
  max-width: 520px;
}

.rich-empty-state {
  padding-block: 56px;
}

.table-empty-state {
  min-height: 168px;
  padding-block: 28px 36px;
}

.rich-empty-state .icon-box {
  margin-bottom: var(--space-3);
}

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

.u-mt-4 {
  margin-top: var(--space-4);
}

.u-mt-5 {
  margin-top: var(--space-5);
}

.section-stack-gap {
  margin-top: var(--space-5);
}

.mini-chart {
  min-height: 180px;
}

@media (max-width: 1120px) {
  .app-shell,
  .app-shell.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .app-topbar {
    position: relative;
    margin: 0 0 var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .topbar-search {
    display: none;
  }

  .content-grid,
  .content-grid.equal,
  .program-builder-shell,
  .program-detail-hero,
  .program-detail-grid,
  .program-detail-content-grid,
  .training-detail-shell,
  .training-builder-shell,
  .training-overview-hero,
  .training-kpi-grid,
  .training-setup-steps,
  .training-insight-grid,
  .training-activity-grid,
  .smtp-summary-grid,
  .library-summary-strip,
  .target-group-summary-strip,
  .stat-grid,
  .program-detail-kpi-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .content-library-filter-card .filter-grid-with-actions {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  }

  .content-library-filter-card .filter-grid-actions {
    justify-content: flex-start;
  }

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

  .assignment-filter-actions {
    justify-content: flex-start;
    padding-left: 0;
  }

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

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

  .content-library-summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .program-selection-grid,
  .program-audience-grid {
    grid-template-columns: 1fr;
  }

  .training-readiness-panel {
    position: static;
  }

  .training-builder-shell > .training-form-section,
  .training-builder-shell > .training-quiz-panel-card,
  .training-builder-shell > .training-readiness-panel {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 1240px) {
  .training-builder-shell {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 232px);
  }

  .training-lower-grid,
  .training-source-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .app-main {
    padding: var(--space-4);
  }

  .page-header,
  .program-card-header,
  .program-section-heading,
  .training-hero-actions,
  .section-header,
  .toolbar,
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .app-title,
  .page-title {
    font-size: var(--font-2xl);
  }

  .form-grid,
  .program-details-grid,
  .program-date-grid,
  .program-detail-secondary-actions,
  .program-selection-grid,
  .program-audience-grid,
  .content-library-summary-strip,
  .training-compact-grid,
  .training-lower-grid,
  .training-source-row,
  .training-details-grid,
  .training-content-grid,
  .training-content-compact-grid,
  .grid-two,
  .smtp-test-grid,
  .smtp-test-options,
  .target-group-details-grid,
  .target-group-employee-tools,
  .password-reset-grid,
  .auth-card {
    grid-template-columns: 1fr;
  }

  .training-summary-grid {
    grid-template-columns: 1fr;
  }

  .training-description-field,
  .training-name-field,
  .training-html-content-field {
    grid-column: auto;
    grid-row: auto;
  }

  .training-builder-intro,
  .training-form-group-header,
  .training-compact-heading,
  .training-quiz-heading,
  .training-quiz-card-header,
  .training-actions-sticky {
    align-items: stretch;
    flex-direction: column;
  }

  .training-action-context {
    margin-right: 0;
  }

  .assignment-filter-grid {
    grid-template-columns: 1fr;
  }

  .assignment-advanced-grid {
    grid-template-columns: 1fr;
  }

  .smtp-hero,
  .smtp-domain-row,
  .smtp-detail-list div {
    align-items: flex-start;
    flex-direction: column;
  }

  .password-reset-card {
    margin: 5vh auto;
  }

  .password-policy-side-card {
    position: static;
  }

  .auth-panel {
    display: none;
  }

  .row-actions,
  .page-actions,
  .action-row,
  .template-library-toolbar .library-controls,
  .filter-grid-actions,
  .employee-filter-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .template-library-toolbar .library-controls {
    display: flex;
    min-width: 0;
  }

  .template-library-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .filter-grid,
  .filter-grid-with-actions,
  .employee-filter-grid {
    grid-template-columns: 1fr;
  }
}