:root {

  --app-primary: #22a047;
  --mgmt-primary: #22a047;
  --mgmt-primary-hover: #1c863b;
  --mgmt-text: #1f2937;
  --mgmt-muted: #64748b;
  --mgmt-bg: #f5f7fb;
  --mgmt-surface: #ffffff;
  --mgmt-menu-bg: #14532d;
  --mgmt-menu-text: rgba(255, 255, 255, 0.95);
  --mgmt-thead-bg: #ecfdf3;
  --mgmt-thead-border: rgba(34, 160, 71, 0.25);
  --mgmt-sticky-top: 57px;

  font-family:
    Heebo,
    system-ui,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--mgmt-text);
  background-color: var(--mgmt-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

#root {
  min-height: 100svh;
  width: 100%;
  margin: 0 auto;
}

/* Swagger / docs pages (narrow column) */
.docs-root-inner {
  max-width: 1126px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.management-app {
  font-family: Heebo, system-ui, sans-serif;
  background-color: var(--mgmt-bg);
  color: var(--mgmt-text);
}

.management-app .navbar {
  background-color: var(--mgmt-menu-bg) !important;
  color: var(--mgmt-menu-text) !important;
  z-index: 1045;
}

.management-app .navbar .navbar-brand,
.management-app .navbar .navbar-text {
  color: rgba(255, 255, 255, 0.95) !important;
}

.management-main {
  background: transparent;
  padding: 24px;
  min-height: calc(100svh - var(--mgmt-sticky-top));
}

.management-app .nav-link.active {
  background-color: transparent;
}

.management-app .nav-link {
  color: var(--mgmt-menu-text);
  border: 0;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.management-app .nav-label-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(12, 18, 31, 0.22);
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.management-app .nav-link.active .nav-label-chip,
.management-app .nav-link:hover .nav-label-chip {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mgmt-primary) 84%, white) 0%, var(--mgmt-primary) 100%);
  border-color: color-mix(in srgb, var(--mgmt-primary) 75%, white);
  color: #fff !important;
}

/* Public footer — same vertical rhythm as `.main-layout-app .custom-navbar` (py-0.375rem + px-3) */
.custom-footer.custom-footer--bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  color: var(--mgmt-menu-text) !important;
  background-color: var(--mgmt-menu-bg) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 55%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
  line-height: 1.35;
}

.custom-footer__glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(253, 224, 71, 0.3) 25%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(134, 239, 172, 0.35) 75%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

.custom-footer__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.custom-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.35rem;
}

@media (min-width: 1200px) {
  .custom-footer__bar {
    flex-wrap: nowrap;
    justify-content: space-between;
    column-gap: 1.25rem;
  }
}

.custom-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .custom-footer__meta {
    justify-content: flex-start;
    flex: 1 1 0;
    min-width: 0;
  }
}

.custom-footer__meta-item,
.custom-footer__meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.custom-footer__meta-item {
  white-space: normal;
}

@media (min-width: 768px) {
  .custom-footer__meta-item {
    white-space: nowrap;
  }
}

.custom-footer__meta-ico {
  width: 1.1em;
  flex-shrink: 0;
  text-align: center;
  opacity: 0.92;
}

.custom-footer__meta-link {
  color: inherit !important;
  text-decoration: none;
  border-radius: 0.25rem;
  padding: 0.1rem 0.15rem;
  margin: -0.1rem -0.15rem;
  transition: background 0.15s ease;
}

.custom-footer__meta-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.custom-footer__docs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.35rem;
  row-gap: 0.2rem;
}

@media (min-width: 1200px) {
  .custom-footer__docs {
    flex: 0 0 auto;
  }
}

.custom-footer__docs .pdf-link.custom-footer__doc-link:not(:first-child)::before {
  content: '·';
  margin-right: 0.35rem;
  opacity: 0.55;
  font-weight: 400;
  pointer-events: none;
}

.custom-footer a.pdf-link.custom-footer__doc-link {
  display: inline-block;
  color: rgba(255, 255, 255, 0.98) !important;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.25rem;
  padding: 0.1rem 0.15rem;
  margin: -0.1rem -0.15rem;
  transition: background 0.15s ease;
}

.custom-footer a.pdf-link.custom-footer__doc-link:hover {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: underline;
}

.custom-footer__copyright-row {
  width: 100%;
  text-align: center;
  padding-top: 0.3rem;
  margin-top: 0.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.custom-footer__copyright {
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.9;
  text-align: center;
}

.custom-footer__copyright-brand {
  font-weight: 600;
  opacity: 1;
}

.main-layout-app .custom-navbar {
  background: var(--mgmt-menu-bg) !important;
  color: var(--mgmt-menu-text) !important;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.main-layout-app .custom-navbar .container-fluid {
  align-items: center;
}

.main-layout-app .custom-navbar .navbar-brand,
.main-layout-app .custom-navbar .navbar-text,
.main-layout-app .custom-navbar .nav-link {
  color: var(--mgmt-menu-text) !important;
}

.main-layout-logo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  flex: 0 0 auto;
}

.main-layout-app .main-layout-user-cluster {
  position: relative;
  flex-shrink: 0;
}

.main-layout-app .main-layout-user-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
}

.main-layout-app .main-layout-user-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.main-layout-app .main-layout-user-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Chips sit below the circle; margin keeps navbar from clipping them */
  margin-bottom: 6px;
}

.main-layout-app .main-layout-user-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  background-color: var(--app-primary);
}

.main-layout-app .main-layout-user-initials {
  line-height: 1;
}

.main-layout-app .main-layout-user-avatar-chip {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--app-primary);
  font-size: 0.62rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  border: 1px solid rgba(20, 83, 45, 0.2);
}

.main-layout-app .main-layout-user-avatar-chip:hover,
.main-layout-app .main-layout-user-avatar-chip:focus-visible {
  background: #fff;
  color: var(--mgmt-primary-hover);
  outline: none;
}

.main-layout-app .main-layout-user-avatar-chip--roles {
  bottom: -12px;
  left: -2px;
}

.main-layout-app .main-layout-user-avatar-chip--style {
  bottom: -12px;
  right: -2px;
}

.main-layout-app[data-portal-density='compact'] .parent-navbar-link {
  min-height: 36px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.main-layout-app[data-portal-density='compact'] main.container {
  margin-top: 0.75rem !important;
}

@media (min-width: 992px) {
  .main-layout-app[data-portal-density='compact'] .parent-navbar-link {
    min-height: 44px;
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;
  }
}

.main-layout-app[data-portal-font-scale='sm'] {
  font-size: 0.9375rem;
}

.main-layout-app[data-portal-font-scale='normal'] {
  font-size: 1rem;
}

.main-layout-app[data-portal-font-scale='large'] {
  font-size: 1.0625rem;
}

.main-layout-app[data-portal-font-scale='xl'] {
  font-size: 1.125rem;
}

.main-layout-app[data-portal-font-family='system'] {
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    sans-serif;
}

.main-layout-app[data-portal-font-family='readable'] {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.main-layout-app[data-portal-font-family='modern'] {
  font-family:
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* Accent: navbar + primary chips (default uses :root tokens) */
.main-layout-app[data-portal-accent='ocean'] {
  --app-primary: #0d9488;
  --mgmt-primary: #0d9488;
  --mgmt-primary-hover: #0f766e;
  --mgmt-menu-bg: #115e59;
}

.main-layout-app[data-portal-accent='slate'] {
  --app-primary: #64748b;
  --mgmt-primary: #64748b;
  --mgmt-primary-hover: #475569;
  --mgmt-menu-bg: #1e293b;
}

.main-layout-app[data-portal-accent='violet'] {
  --app-primary: #7c3aed;
  --mgmt-primary: #7c3aed;
  --mgmt-primary-hover: #6d28d9;
  --mgmt-menu-bg: #4c1d95;
}

.main-layout-app[data-portal-accent='earth'] {
  --app-primary: #d97706;
  --mgmt-primary: #d97706;
  --mgmt-primary-hover: #b45309;
  --mgmt-menu-bg: #78350f;
}

.main-layout-app[data-portal-accent='rose'] {
  --app-primary: #e11d48;
  --mgmt-primary: #e11d48;
  --mgmt-primary-hover: #be123c;
  --mgmt-menu-bg: #881337;
}

.main-layout-app[data-portal-accent='indigo'] {
  --app-primary: #4f46e5;
  --mgmt-primary: #4f46e5;
  --mgmt-primary-hover: #4338ca;
  --mgmt-menu-bg: #312e81;
}

.main-layout-app[data-portal-accent='sky'] {
  --app-primary: #0284c7;
  --mgmt-primary: #0284c7;
  --mgmt-primary-hover: #0369a1;
  --mgmt-menu-bg: #0c4a6e;
}

.main-layout-app[data-portal-accent='crimson'] {
  --app-primary: #dc2626;
  --mgmt-primary: #dc2626;
  --mgmt-primary-hover: #b91c1c;
  --mgmt-menu-bg: #7f1d1d;
}

.main-layout-app[data-portal-accent='emerald'] {
  --app-primary: #059669;
  --mgmt-primary: #059669;
  --mgmt-primary-hover: #047857;
  --mgmt-menu-bg: #064e3b;
}

/* Parent / teacher portal — dark content shell (navbar stays accent strip) */
.main-layout-app[data-portal-color-mode='dark'] {
  --portal-surface: #141c2b;
  --portal-surface-2: #0f1624;
  --portal-border: #2a3a52;
  --portal-text: #e8eef7;
  --portal-muted: #94a3b8;
  background-color: var(--portal-surface-2);
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] main {
  background-color: var(--portal-surface-2);
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .footer {
  background-color: #0a0f18 !important;
  border-color: var(--portal-border) !important;
  color: var(--portal-muted) !important;
}

/* Public footer — keep menu palette in dark portal mode (compact bar) */
.main-layout-app[data-portal-color-mode='dark'] .footer.custom-footer.custom-footer--bar {
  background-color: var(--mgmt-menu-bg) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 55%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--mgmt-menu-text) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .footer.custom-footer,
.main-layout-app[data-portal-color-mode='dark'] .footer.custom-footer a,
.main-layout-app[data-portal-color-mode='dark'] .footer.custom-footer .text-white {
  color: var(--mgmt-menu-text) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .footer.custom-footer a.pdf-link.custom-footer__doc-link {
  color: rgba(255, 255, 255, 0.98) !important;
}

.main-layout-app[data-portal-color-mode='dark'] h1,
.main-layout-app[data-portal-color-mode='dark'] h2,
.main-layout-app[data-portal-color-mode='dark'] h3,
.main-layout-app[data-portal-color-mode='dark'] h4,
.main-layout-app[data-portal-color-mode='dark'] h5,
.main-layout-app[data-portal-color-mode='dark'] .h1,
.main-layout-app[data-portal-color-mode='dark'] .h2,
.main-layout-app[data-portal-color-mode='dark'] .h3,
.main-layout-app[data-portal-color-mode='dark'] .h4,
.main-layout-app[data-portal-color-mode='dark'] .h5,
.main-layout-app[data-portal-color-mode='dark'] .h6 {
  color: #f1f5f9;
}

.main-layout-app[data-portal-color-mode='dark'] .text-muted,
.main-layout-app[data-portal-color-mode='dark'] .form-text {
  color: var(--portal-muted) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .text-dark {
  color: var(--portal-text) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .border,
.main-layout-app[data-portal-color-mode='dark'] .border-top,
.main-layout-app[data-portal-color-mode='dark'] .border-bottom,
.main-layout-app[data-portal-color-mode='dark'] .border-start,
.main-layout-app[data-portal-color-mode='dark'] .border-end {
  border-color: var(--portal-border) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .card {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .card-header,
.main-layout-app[data-portal-color-mode='dark'] .card-footer {
  background-color: rgba(15, 22, 36, 0.85);
  border-color: var(--portal-border);
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .list-group-item {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .table {
  --bs-table-bg: var(--portal-surface);
  --bs-table-color: var(--portal-text);
  --bs-table-border-color: var(--portal-border);
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .table-secondary,
.main-layout-app[data-portal-color-mode='dark'] .table-light {
  --bs-table-bg: #1a2438;
  --bs-table-color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .form-control,
.main-layout-app[data-portal-color-mode='dark'] .form-select {
  background-color: #0f1624;
  border-color: var(--portal-border);
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .form-control:focus,
.main-layout-app[data-portal-color-mode='dark'] .form-select:focus {
  background-color: #0f1624;
  border-color: var(--mgmt-primary, #22a047);
  color: var(--portal-text);
  box-shadow: 0 0 0 0.2rem rgba(34, 160, 71, 0.2);
}

.main-layout-app[data-portal-color-mode='dark'] .form-label {
  color: #cbd5e1;
}

.main-layout-app[data-portal-color-mode='dark'] .bg-light,
.main-layout-app[data-portal-color-mode='dark'] .bg-white {
  background-color: var(--portal-surface) !important;
  color: var(--portal-text) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .alert-light {
  background-color: #1a2438 !important;
  border-color: var(--portal-border) !important;
  color: var(--portal-text) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .alert-secondary {
  background-color: #1e293b !important;
  border-color: var(--portal-border) !important;
  color: #e2e8f0 !important;
}

.main-layout-app[data-portal-color-mode='dark'] .btn-outline-secondary {
  color: #cbd5e1;
  border-color: #64748b;
}

.main-layout-app[data-portal-color-mode='dark'] .btn-outline-secondary:hover {
  background-color: #334155;
  color: #f8fafc;
  border-color: #94a3b8;
}

.main-layout-app[data-portal-color-mode='dark'] .btn-outline-primary {
  color: #86efac;
  border-color: var(--mgmt-primary, #22a047);
}

.main-layout-app[data-portal-color-mode='dark'] .btn-outline-primary:hover {
  background-color: var(--mgmt-primary, #22a047);
  color: #052e16;
}

.main-layout-app[data-portal-color-mode='dark'] .link-primary,
.main-layout-app[data-portal-color-mode='dark'] a.text-primary {
  color: #7dd3fc !important;
}

.main-layout-app[data-portal-color-mode='dark'] .main-layout-user-dropdown {
  background-color: var(--portal-surface) !important;
  border: 1px solid var(--portal-border) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .main-layout-user-dropdown-header {
  color: var(--portal-muted) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .main-layout-user-dropdown .main-layout-user-dropdown-role {
  color: var(--portal-text) !important;
}

.main-layout-app[data-portal-color-mode='dark'] .main-layout-user-dropdown .dropdown-item {
  color: var(--portal-text);
}

.main-layout-app[data-portal-color-mode='dark'] .main-layout-user-dropdown .dropdown-item:hover,
.main-layout-app[data-portal-color-mode='dark'] .main-layout-user-dropdown .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.main-layout-app[data-portal-color-mode='dark'] .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}

.main-layout-app[data-portal-color-mode='dark'] .navbar-toggler-icon {
  filter: invert(1) grayscale(100%);
}

.main-layout-app .main-layout-user-dropdown-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mgmt-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.main-layout-app .main-layout-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s;
}

.main-layout-app .main-layout-user-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.main-layout-app .main-layout-user-dropdown .dropdown-item {
  color: var(--mgmt-text);
}

.main-layout-app .main-layout-user-dropdown .dropdown-item:hover,
.main-layout-app .main-layout-user-dropdown .dropdown-item:focus {
  background-color: rgba(34, 160, 71, 0.1);
  color: var(--mgmt-text);
}

.main-layout-app .main-layout-menu > .nav,
.main-layout-app .main-layout-menu > ul {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.main-layout-app .nav-label-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  color: var(--mgmt-menu-text);
  line-height: 1.1;
}

.main-layout-app .nav-link.active .nav-label-chip,
.main-layout-app .nav-link:hover .nav-label-chip {
  background: rgba(255, 255, 255, 0.16);
}

.main-layout-app .parent-navbar-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow-x: visible;
  overflow-y: auto;
  max-width: 100%;
  max-height: calc(100svh - 96px);
  scrollbar-width: thin;
}

.main-layout-app .parent-navbar-link {
  width: 100%;
  min-height: 40px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: var(--mgmt-menu-text) !important;
  font-size: 0.85rem;
  line-height: 1.1;
  text-align: left;
  white-space: normal;
}

.main-layout-app .parent-navbar-link i {
  font-size: 0.95rem;
  line-height: 1;
}

.main-layout-app .parent-navbar-link.active,
.main-layout-app .parent-navbar-link:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* Phone / collapsed navbar: nav shortcuts in two columns */
@media (max-width: 991.98px) {
  .main-layout-app .main-layout-menu > ul.parent-navbar-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.35rem;
    row-gap: 0.35rem;
    align-items: stretch;
  }

  .main-layout-app .parent-navbar-menu .nav-item {
    min-width: 0;
  }

  .main-layout-app .parent-navbar-menu .parent-navbar-link {
    width: 100%;
    min-height: 44px;
    border-top: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 0.4rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.15;
  }

  .main-layout-app .parent-navbar-menu .parent-navbar-link i {
    font-size: 0.88rem;
    flex-shrink: 0;
  }
}

@media (min-width: 992px) {
  .main-layout-app .main-layout-menu,
  .main-layout-app .main-layout-menu > .nav,
  .main-layout-app .main-layout-menu > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
  }

  .main-layout-app .main-layout-menu ul ul {
    display: none;
  }

  .main-layout-app .parent-navbar-menu {
    width: auto;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
  }

  .main-layout-app .parent-navbar-link {
    width: auto;
    min-width: 76px;
    min-height: 52px;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.3rem 0.42rem;
    border-top: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    font-size: 0.72rem;
    text-align: center;
  }

  .main-layout-app .parent-navbar-link i {
    font-size: 0.88rem;
  }
}

.wrapper {
  position: relative;
  flex: 1 1 auto;
  background: transparent;
}

.mgmt-sidebar {
  position: fixed;
  left: 0;
  top: var(--mgmt-sticky-top);
  width: 308px;
  height: calc(100vh - var(--mgmt-sticky-top));
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--mgmt-menu-bg) 92%, black) 0%, var(--mgmt-menu-bg) 100%);
  color: var(--mgmt-menu-text);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28);
  transform: translateX(-100%);
  transition: transform 180ms ease-in-out;
  z-index: 1044;
}

.management-app.mgmt-sidebar-open .mgmt-sidebar,
.mgmt-sidebar:hover {
  transform: translateX(0);
}

.mgmt-sidebar-content {
  height: 100%;
  overflow-y: auto;
  padding: 14px 12px 18px;
}

.mgmt-sidebar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mgmt-sidebar-eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.mgmt-sidebar-title {
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
}

.management-app .mgmt-static-link,
.management-app .mgmt-nav-tree .nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  border-radius: 16px !important;
  color: rgba(255, 255, 255, 0.9);
}

.management-app .mgmt-static-link:hover,
.management-app .mgmt-static-link.active,
.management-app .mgmt-nav-tree .nav-link:hover,
.management-app .mgmt-nav-tree .nav-link.active,
.management-app .mgmt-nav-tree .nav-link[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.management-app .mgmt-nav-tree .nav-link:hover,
.management-app .mgmt-nav-tree .nav-link[aria-expanded='true'] {
  transform: translateX(1px);
}

.management-app .mgmt-nav-tree .nav-link:focus-visible,
.management-app .mgmt-static-link:focus-visible,
.mgmt-sidebar-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

.mgmt-nav-tree,
.mgmt-nav-subtree {
  position: relative;
}

.mgmt-nav-subtree {
  margin-left: 0.35rem;
  padding-left: 0.7rem !important;
}

.mgmt-nav-subtree::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 0.15rem;
  bottom: 0.35rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}

.mgmt-nav-branch {
  position: relative;
}

.mgmt-nav-depth-1 > .nav-link .nav-label-chip,
.mgmt-nav-depth-2 > .nav-link .nav-label-chip,
.mgmt-nav-depth-3 > .nav-link .nav-label-chip,
.mgmt-nav-depth-4 > .nav-link .nav-label-chip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
    rgba(8, 13, 24, 0.12);
  border-color: rgba(255, 255, 255, 0.06);
}

.mgmt-nav-depth-1 > .nav-link .nav-label-chip {
  font-size: 0.94rem;
}

.mgmt-nav-depth-2 > .nav-link .nav-label-chip,
.mgmt-nav-depth-3 > .nav-link .nav-label-chip,
.mgmt-nav-depth-4 > .nav-link .nav-label-chip {
  font-size: 0.88rem;
  font-weight: 500;
}

.mgmt-sidebar-toggle {
  position: fixed;
  left: 10px;
  top: calc(var(--mgmt-sticky-top) + 12px);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mgmt-primary) 82%, white) 0%, var(--mgmt-primary) 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
  z-index: 1060;
}

.mgmt-sidebar-toggle:hover {
  background-color: var(--mgmt-primary-hover);
  transform: translateY(-1px);
}

.management-app.mgmt-sidebar-open .mgmt-sidebar-toggle i {
  transform: rotate(180deg);
}

.mgmt-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  z-index: 1043;
}

@media (min-width: 992px) {
  .mgmt-sidebar-backdrop {
    display: none;
  }

  .management-main {
    padding-left: 34px;
  }
}

.management-app table:not(.no-mgmt-style) {
  width: 100%;
}

.management-app table:not(.no-mgmt-style) thead th,
.management-app table:not(.no-mgmt-style) thead td {
  background-color: var(--mgmt-thead-bg) !important;
  color: var(--mgmt-text);
  border-bottom: 1px solid var(--mgmt-thead-border);
}

table thead .ci-sortable-column {
  cursor: pointer;
  user-select: none;
}

table thead .ci-sortable-column:focus-visible {
  outline: 2px solid rgba(34, 160, 71, 0.45);
  outline-offset: -2px;
}

table thead .ci-sortable-column::after {
  content: '⇅';
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.8em;
  opacity: 0.45;
}

table thead .ci-sortable-column[data-ci-sort-direction='ascending']::after {
  content: '▲';
  opacity: 0.9;
}

table thead .ci-sortable-column[data-ci-sort-direction='descending']::after {
  content: '▼';
  opacity: 0.9;
}

.management-app .table-responsive {
  width: 100%;
  position: relative;
}

.management-app .card {
  border: 1px solid rgba(2, 6, 23, 0.06);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04);
}

.footer-back {
  color: var(--mgmt-muted);
}

.ci-academic-filter__year {
  min-width: 180px;
}

.ci-academic-filter__semester {
  min-width: 140px;
}

.ci-checklist {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ci-static-modal {
  background: rgba(15, 23, 42, 0.35);
}

.login-page,
.register-page {
  background: linear-gradient(160deg, #ecfdf3 0%, var(--mgmt-bg) 45%, #fff 100%);
}

.public-shell .hero-gradient {
  background: linear-gradient(135deg, #14532d 0%, #166534 45%, #15803d 100%);
}

.parent-calendar-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  margin-right: 6px;
}

.parent-calendar-dot-general {
  background: #3788d8;
}

.parent-calendar-dot-no-school {
  background: #ffc107;
}

.parent-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(84px, 1fr));
  overflow-x: auto;
}

.parent-calendar-cell {
  min-height: 82px;
  padding: 0.45rem;
  border: 1px solid #dee2e6;
  background: #fff;
}

.parent-calendar-head {
  min-height: auto;
  background: #f8f9fa;
  font-weight: 600;
  text-align: center;
}

.parent-calendar-event {
  display: block;
  margin-top: 0.35rem;
  padding: 0.25rem;
  border-radius: 4px;
  background: #3788d8;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
}

.parent-calendar-event-warning {
  background: #ffc107;
  color: #1f2937;
}

.parent-circle {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12);
}

.teacher-calendar-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.teacher-calendar-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.teacher-calendar-stat,
.teacher-calendar-panel {
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.06);
}

.teacher-calendar-stat {
  padding: 1rem;
}

.teacher-calendar-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.teacher-calendar-stat-label {
  display: block;
  margin-top: 0.35rem;
  color: #6c757d;
  font-size: 0.9rem;
}

.teacher-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.9fr);
  gap: 1rem;
}

.teacher-calendar-panel {
  padding: 1rem;
}

.teacher-calendar-toolbar,
.teacher-calendar-agenda-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.teacher-calendar-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.teacher-calendar-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  color: #6c757d;
}

.teacher-calendar-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.teacher-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(88px, 1fr));
  gap: 0.5rem;
}

.teacher-calendar-cell {
  border: 1px solid #dee2e6;
  border-radius: 0.85rem;
  background: #fff;
}

.teacher-calendar-head {
  min-height: auto;
  padding: 0.65rem 0.5rem;
  background: #f8f9fa;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6c757d;
}

.teacher-calendar-day {
  min-height: 126px;
  padding: 0.65rem;
  text-align: left;
}

.teacher-calendar-day.is-muted {
  opacity: 0.45;
}

.teacher-calendar-day.is-today {
  border-color: #f59f00;
}

.teacher-calendar-day.is-selected {
  border-color: #198754;
  box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.18);
}

.teacher-calendar-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.teacher-calendar-events {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.teacher-calendar-event-pill,
.teacher-calendar-more {
  display: block;
  padding: 0.28rem 0.4rem;
  border-radius: 0.55rem;
  font-size: 0.74rem;
  line-height: 1.2;
}

.teacher-calendar-event-pill {
  border-left: 4px solid #3788d8;
  color: #1f2937;
}

.teacher-calendar-more {
  background: #f8f9fa;
  color: #6c757d;
}

.teacher-calendar-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.teacher-calendar-agenda-item {
  padding: 0.9rem;
  border: 1px solid #e9ecef;
  border-radius: 0.9rem;
  background: #fcfcfd;
}

.teacher-calendar-agenda-tag {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
  color: #6c757d;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 991.98px) {
  .teacher-calendar-summary,
  .teacher-calendar-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .teacher-calendar-grid {
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    overflow-x: auto;
  }

  .teacher-calendar-toolbar,
  .teacher-calendar-agenda-head {
    flex-direction: column;
    align-items: stretch;
  }

  .teacher-calendar-day {
    min-height: 112px;
    padding: 0.5rem;
  }
}

.parent-circle strong {
  line-height: 1.15;
}

.parent-circle small {
  max-width: 118px;
  overflow-wrap: anywhere;
}

/* Preserve docs styling from App.css */
.docs-root {
  min-height: 100vh;
}
