@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --sc-surface-radius: 22px;
  --sc-surface-line: var(--ui-line, rgba(213, 223, 232, 0.96));
  --sc-surface-bg: linear-gradient(180deg, var(--ui-surface, #ffffff) 0%, var(--ui-surface-soft, #f8fafc) 100%);
  --sc-surface-shadow: 0 14px 28px rgba(33, 55, 75, 0.07);
  --sc-scroll-thumb: #b7cad8;
  --sc-scroll-thumb-hover: #9fb7c8;
  --sc-hero-start: #16324b;
  --sc-hero-mid: #224a6a;
  --sc-hero-end: #315f85;
  --sc-hero-text: #f7fbff;
  --sc-hero-chip-text: #eff7fd;
  --sc-action-start: #f4f9fd;
  --sc-action-end: #d7e8f5;
  --sc-action-text: #16324b;
  --sc-title: #18354b;
  --sc-title-inverse: #ffffff;
  --sc-body-inverse: rgba(236, 245, 251, 0.84);
}

/* Low-specificity primitives for dashboard blocks and action controls. */
:where(.supervision-surface-card, .supervision-hero-sidecard, .supervision-title-frame) {
  border-radius: var(--sc-surface-radius);
}

:where(.supervision-hero-primary-btn, .config-status-btn) {
  transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease;
}

:where(.supervision-hero-primary-btn, .config-status-btn):hover {
  transform: translateY(-1px);
}

.supervision-dashboard-shell [hidden] {
  display: none !important;
}

.supervision-dashboard-shell::-webkit-scrollbar {
  width: 10px;
}

.supervision-dashboard-shell::-webkit-scrollbar-track {
  background-color: transparent;
}

.supervision-dashboard-shell::-webkit-scrollbar-thumb {
  background-color: var(--sc-scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.supervision-dashboard-shell::-webkit-scrollbar-thumb:hover {
  background-color: var(--sc-scroll-thumb-hover);
}

.supervision-management-header {
  align-items: flex-start;
}

.supervision-header-copy {
  display: grid;
  gap: 8px;
  max-width: 860px;
}

.supervision-header-copy h2 {
  margin: 0;
}

.supervision-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) auto;
  gap: 20px;
  padding: 28px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(119, 151, 177, 0.2);
  background:
    radial-gradient(circle at 18% 18%, rgba(130, 181, 214, 0.34), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.16), transparent 22%),
    linear-gradient(135deg, var(--sc-hero-start) 0%, var(--sc-hero-mid) 52%, var(--sc-hero-end) 100%);
  color: var(--sc-hero-text);
}

.supervision-hero::after {
  content: '';
  position: absolute;
  inset: auto -120px -120px auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 62%);
  pointer-events: none;
}

.supervision-hero-single {
  grid-template-columns: minmax(0, 1fr);
}

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

.supervision-title-frame {
  display: grid;
  gap: 10px;
  max-width: 760px;
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid rgba(224, 238, 248, 0.2);
  background:
    linear-gradient(180deg, rgba(6, 18, 31, 0.24) 0%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(11, 24, 37, 0.18);
}

.supervision-title-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(235, 244, 250, 0.16);
  background-color: rgba(6, 20, 34, 0.22);
  color: #f2f8fc;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.supervision-eyebrow {
  margin: 0 0 10px;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 249, 253, 0.92);
}

.supervision-hero h1,
.supervision-hero h2 {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--sc-title-inverse);
}

.supervision-title-frame h1,
.supervision-title-frame h2 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 72px;
  padding: 10px 20px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, #ffffff 0%, #deedf7 100%);
  box-shadow: 0 16px 30px rgba(7, 20, 31, 0.22);
  color: #143149;
  text-shadow: none;
}

.supervision-hero-text {
  max-width: 64ch;
  margin: 14px 0 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(235, 245, 252, 0.86);
}

.supervision-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.supervision-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(219, 234, 245, 0.22);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--sc-hero-chip-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.supervision-hero-actions {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 10px;
}

.supervision-hero-sidecard {
  display: grid;
  gap: 12px;
  width: min(360px, 100%);
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(222, 236, 246, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  backdrop-filter: blur(4px);
}

.supervision-hero-sidecard h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--sc-title-inverse);
}

.supervision-hero-card-text {
  margin: 0;
  color: var(--sc-body-inverse);
  line-height: 1.6;
  font-size: 0.92rem;
}

.supervision-hero-action-row {
  display: grid;
  gap: 10px;
}

.supervision-hero-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sc-action-start) 0%, var(--sc-action-end) 100%);
  color: var(--sc-action-text);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.supervision-hero-primary-btn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #deedf7 100%);
}

.supervision-surface-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--sc-surface-line);
  background: var(--sc-surface-bg);
  box-shadow: var(--sc-surface-shadow);
}

.supervision-section-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.supervision-section-header h3 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--sc-title);
}

.config-status-btn {
  width: auto;
  min-width: 90px;
  padding: 0 10px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

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

.config-form-grid .event-field-wide {
  grid-column: 1 / -1;
}

.config-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.config-modal-actions .secondary-btn,
.config-modal-actions button[type='submit'] {
  margin-top: 0;
  min-width: 130px;
}

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

@media (max-width: 1080px) {
  .supervision-hero {
    grid-template-columns: 1fr;
  }

  .supervision-hero-actions {
    justify-items: stretch;
  }
}

@media (max-width: 760px) {
  .supervision-dashboard-shell {
    padding: 16px;
  }

  .supervision-hero {
    padding: 22px;
  }
}