/* Application shell ------------------------------------------------------ */
:root {
  /* Brand palette — these are the only values to edit for a future theme. */
  --app-primary: #49a9dc;
  --app-primary-strong: #258fc8;
  --app-primary-soft: #eaf6fc;
  --app-primary-pale: #d7eef9;
  --app-primary-ink: #1876ad;
  /* Temporary semantic aliases keep existing component rules readable while
     the pre-overhaul pages are progressively moved onto the new tokens. */
  --app-teal: var(--app-primary);
  --app-teal-deep: var(--app-primary-strong);
  --app-teal-soft: var(--app-primary-soft);
  --app-ink: #29393b;
  --app-muted: #708082;
  --app-line: #dfe9e8;
  --app-canvas: #f5f8f8;
  --app-topbar-height: 64px;
}

body.app-shell { background: var(--app-canvas) !important; }
body.app-shell,
body.app-shell button,
body.app-shell input,
body.app-shell select,
body.app-shell textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The reference uses Inter at a deliberate, compact scale: 14px body copy,
   16px card values, and 20px page headings. Keep this scoped to the app
   shell so worksheet/PDF typography remains independent. */
body.app-shell .main-content { font-size: 14px; line-height: 1.43; color: var(--app-ink); }
body.app-shell .main-content h4,
body.app-shell .main-content .h4 { font-size: 20px; line-height: 26px; font-weight: 600 !important; letter-spacing: -.015em; }
body.app-shell .main-content h5,
body.app-shell .main-content .h5 { font-size: 16px; line-height: 22px; font-weight: 600 !important; }
body.app-shell .main-content h6,
body.app-shell .main-content .h6 { font-size: 14px; line-height: 20px; font-weight: 600 !important; }
body.app-shell .main-content .font-weight-bolder { font-weight: 600 !important; }
body.app-shell .main-content .text-sm { font-size: 14px !important; line-height: 20px; }

/* Student creation ------------------------------------------------------ */
.student-create-page { min-height: calc(100vh - var(--app-topbar-height)); }
.student-create-layout { width: min(760px, 100%); margin: 0 auto; }
.student-create-intro { margin-bottom: 22px; }
.student-create-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--app-primary-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.student-create-back:hover { color: var(--app-primary-strong); }
.student-create-intro h1 { margin: 0 0 5px; color: var(--app-ink); font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.student-create-intro p { margin: 0; color: var(--app-muted); font-size: 14px; }
.student-create-card { overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(28, 67, 70, .05); }
.student-create-card__header { min-height: 82px; padding: 18px 22px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--app-line); }
.student-create-card__icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--app-primary-soft); color: var(--app-primary-ink); font-size: 15px; }
.student-create-card__header h2 { margin: 0 0 2px; color: var(--app-ink); font-size: 16px; font-weight: 650; }
.student-create-card__header p { margin: 0; color: var(--app-muted); font-size: 13px; }
.student-create-card > .alert { margin: 18px 22px 0; }
.student-create-form { padding: 22px; }
.student-create-form .form-label { margin-bottom: 6px; color: #405052; font-size: 13px; font-weight: 600; }
.student-create-form .form-control,
.student-create-form .form-select { min-height: 42px; padding: 9px 12px; border: 1px solid #cad7d8; border-radius: 6px; color: #334748; font-size: 14px; box-shadow: none; }
.student-create-form .form-control:focus,
.student-create-form .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(73, 169, 220, .16); }
.student-create-help { margin: 6px 0 0; color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.student-create-note { margin-top: 20px; padding: 11px 12px; display: flex; align-items: flex-start; gap: 9px; border-radius: 7px; background: var(--app-primary-soft); color: #456467; font-size: 12px; line-height: 1.45; }
.student-create-note i { margin-top: 2px; color: var(--app-primary-ink); }
.student-create-actions { margin-top: 22px; padding-top: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; border-top: 1px solid var(--app-line); }
.student-create-cancel { padding: 9px 4px; color: var(--app-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.student-create-cancel:hover { color: var(--app-ink); }
.student-create-submit { min-height: 40px; padding: 9px 14px; border: 1px solid var(--app-primary); border-radius: 6px; background: var(--app-primary); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 2px 5px rgba(37, 143, 200, .22); }
.student-create-submit:hover { border-color: var(--app-primary-strong); background: var(--app-primary-strong); }
.student-create-submit i { margin-right: 7px; }
@media (max-width: 575.98px) { .student-create-card__header, .student-create-form { padding: 18px; } .student-create-card > .alert { margin-left: 18px; margin-right: 18px; } .student-create-actions { align-items: stretch; flex-direction: column-reverse; gap: 8px; } .student-create-cancel { text-align: center; } .student-create-submit { width: 100%; } }

#sidenav-main {
  width: 64px !important;
  min-width: 64px;
  height: 100vh;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--app-teal) !important;
  box-shadow: none !important;
  overflow-x: hidden;
  /* The compact icon rail fits at normal desktop heights.  `auto` shows a
     distracting scrollbar even when no navigation item is clipped. */
  overflow-y: hidden;
  transition: width .2s ease, box-shadow .2s ease;
  z-index: 1040;
}

.sidenav.fixed-start ~ .main-content.app-main {
  margin-left: 64px !important;
  min-height: 100vh;
  /* The sidebar is fixed, so the content area must explicitly occupy the
     remaining viewport width. Leaving the framework's 100% main width in
     place makes the 64px sidebar an extra strip of page width. */
  width: calc(100% - 64px) !important;
  max-width: calc(100% - 64px);
  min-width: 0;
}

#sidenav-main:hover,
#sidenav-main:focus-within { width: 272px !important; box-shadow: 8px 0 24px rgba(24, 69, 72, .18) !important; }
#sidenav-main .sidenav-header { height: var(--app-topbar-height); padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.16); }
#sidenav-main .navbar-brand { color: #fff !important; white-space: nowrap; overflow: hidden; padding: 0 !important; }
#sidenav-main .navbar-brand > div { background: rgba(255,255,255,.16) !important; border-radius: 10px !important; }
#sidenav-main .navbar-brand span { opacity: 0; width: 0; margin: 0 !important; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.02em; transition: opacity .12s ease; }
#sidenav-main:hover .navbar-brand span,
#sidenav-main:focus-within .navbar-brand span { opacity: 1; width: auto; margin-left: .35rem !important; }
#sidenav-main > hr { display: none; }
#sidenav-main .navbar-collapse { height: auto !important; overflow: visible !important; padding: 16px 0 130px; }
#sidenav-main .navbar-nav { gap: 3px; }
#sidenav-main .nav-link { min-height: 46px; margin: 0 7px; padding: 7px 6px; color: rgba(255,255,255,.94) !important; border-radius: 7px; white-space: nowrap; }
#sidenav-main .nav-link:hover { background: rgba(255,255,255,.12) !important; }
#sidenav-main .nav-link .icon { width: 38px; height: 38px; margin: -3px 0 -3px 0 !important; background: transparent !important; box-shadow: none !important; color: #fff !important; flex: 0 0 38px; }
#sidenav-main .nav-link .icon i,
#sidenav-main .nav-link .icon svg { color: #fff !important; opacity: 1 !important; font-size: 16px !important; width: 16px; height: 16px; }
#sidenav-main .nav-link-text { max-width: 0; margin-left: 0 !important; overflow: hidden; opacity: 0; font-size: 15px; font-weight: 500; line-height: 22px; transition: opacity .12s ease, max-width .2s ease, margin .2s ease; }
#sidenav-main:hover .nav-link-text,
#sidenav-main:focus-within .nav-link-text { max-width: 180px; margin-left: 10px !important; opacity: 1; }
#sidenav-main .nav-link.active { background: var(--app-teal-deep) !important; box-shadow: none !important; }
#sidenav-main .nav-link.active .icon { background: transparent !important; box-shadow: none !important; }
#sidenav-main .sidenav-footer { display: none; }
#sidenav-main .reviewer-sidebar-summary { display: none; }

/* Keep the compact rail fully visible on short laptop windows.  The sidebar
   has a fixed, small number of icon-only destinations, so tightening those
   controls is clearer than adding a separate scrollbar beside the page. */
@media (max-height: 760px) {
  #sidenav-main .sidenav-header { height: 56px; }
  #sidenav-main .navbar-collapse { padding: 8px 0 16px; }
  #sidenav-main .navbar-nav { gap: 0; }
  #sidenav-main .nav-link { min-height: 40px; padding: 5px 6px; }
  #sidenav-main .nav-link .icon { width: 32px; height: 32px; flex-basis: 32px; }
}

@media (max-height: 560px) {
  #sidenav-main .sidenav-header { height: 48px; }
  #sidenav-main .navbar-collapse { padding: 4px 0 8px; }
  #sidenav-main .nav-link { min-height: 34px; margin-top: 0; margin-bottom: 0; padding: 3px 6px; }
  #sidenav-main .nav-link .icon { width: 28px; height: 28px; flex-basis: 28px; }
}

@media (max-height: 430px) {
  #sidenav-main .sidenav-header { height: 40px; }
  #sidenav-main .navbar-collapse { padding: 2px 0 4px; }
  #sidenav-main .nav-link { min-height: 28px; }
  #sidenav-main .nav-link .icon { width: 24px; height: 24px; flex-basis: 24px; }
}

.app-main { background: var(--app-canvas); }
.dashboard-focus-card { min-height: 250px; border-radius: 12px; overflow: hidden; }
.dashboard-focus-card__header { min-height: 73px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--app-line); }
.dashboard-focus-card__header h6 { font-size: 16px !important; line-height: 22px; }
.dashboard-focus-card__header .text-xs { font-size: 13px !important; line-height: 18px; }
.dashboard-focus-card__header a { color: var(--app-primary-ink); font-weight: 600; text-decoration: none; }
.dashboard-todo { min-height: 68px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--app-line); color: var(--app-ink); text-decoration: none; }
.dashboard-todo:last-child { border-bottom: 0; }
.dashboard-todo:hover { background: #f8fcfd; color: var(--app-ink); }
.dashboard-todo__icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 9px; background: var(--app-primary-soft); color: var(--app-primary-ink); font-size: 13px; }
.dashboard-todo--overdue .dashboard-todo__icon { background: #fef2f2; color: #dc2626; }
.dashboard-todo--invitation .dashboard-todo__icon { background: #fff7ed; color: #c2410c; }
.dashboard-todo__copy, .dashboard-activity__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashboard-todo__copy strong, .dashboard-activity__copy strong { overflow: hidden; color: var(--app-ink); font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-todo__copy small, .dashboard-activity__copy small { overflow: hidden; color: var(--app-muted); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity__copy strong { font-size: 14px; }
.dashboard-activity__copy small { font-size: 12px; }
.dashboard-todo__arrow { margin-left: auto; color: #9db1b4; font-size: 11px; }
.dashboard-todo-empty, .dashboard-activity-empty { min-height: 176px; padding: 28px 22px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: var(--app-muted); font-size: 12px; text-align: center; }
.dashboard-todo-empty i { color: #059669; font-size: 26px; }
.dashboard-todo-empty strong { color: var(--app-ink); font-size: 14px; }
.dashboard-activity { min-height: 58px; padding: 11px 20px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--app-line); color: var(--app-ink); text-decoration: none; }
.dashboard-activity:last-child { border-bottom: 0; }
.dashboard-activity:hover { background: #f8fcfd; color: var(--app-ink); }
.dashboard-activity__dot { width: 7px; height: 7px; margin-top: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--app-primary); }
.app-topbar { height: var(--app-topbar-height); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--app-line); box-shadow: 0 1px 4px rgba(29, 71, 74, .05); }
.app-topbar__title { color: var(--app-ink); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.app-topbar__actions { display: flex; align-items: center; gap: 12px; }
.app-topbar__icon-button, .app-topbar__mobile-menu { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #405052; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.app-topbar__icon-button:hover, .app-topbar__mobile-menu:hover { background: var(--app-teal-soft); color: var(--app-teal-deep); }
.app-topbar__notification-count { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 1px 4px; border-radius: 999px; border: 2px solid #fff; background: #e14553; color: #fff; font-size: 9px; font-weight: 700; line-height: 11px; }
.app-topbar__profile { min-height: 36px; padding: 3px 7px 3px 3px; display: flex; align-items: center; gap: 8px; border-radius: 7px; color: var(--app-ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: background-color .15s ease, color .15s ease; }
.app-topbar__profile:hover { background: var(--app-teal-soft); color: var(--app-teal-deep); }
.app-topbar__avatar, .notification-menu__avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #dff4f4; color: var(--app-teal-deep); font-size: 11px; font-weight: 700; }
.app-page-content > .container-fluid { padding: 32px 36px !important; }

.notification-menu { width: 370px; max-width: calc(100vw - 32px); margin-top: 13px !important; padding: 8px; border: 1px solid var(--app-line); border-radius: 12px; box-shadow: 0 16px 38px rgba(32, 65, 68, .18); overflow: hidden; }
/* Soft UI keeps closed dropdowns transparent for its animation. That invisible
   notification panel still extends beyond the header and creates page-wide
   horizontal scrolling, so remove it from layout until Bootstrap opens it. */
.dropdown-menu.notification-menu:not(.show) { display: none; }
.notification-menu__header { padding: 12px 10px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--app-line); color: var(--app-ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.notification-menu__header form { margin: 0; }
.notification-menu__header button { padding: 0; border: 0; background: transparent; color: var(--app-teal-deep); font-size: 12px; font-weight: 700; text-transform: none; }
.notification-menu__item { position: relative; display: flex; gap: 10px; padding: 12px 10px; color: var(--app-muted); text-decoration: none; border-radius: 8px; }
.notification-menu__item:hover { background: var(--app-teal-soft); color: var(--app-ink); }
.notification-menu__copy { min-width: 0; font-size: 13px; line-height: 1.35; }
.notification-menu__copy strong { color: var(--app-ink); }
.notification-menu__copy em { color: var(--app-teal-deep); font-style: normal; font-weight: 600; }
.notification-menu__copy small { display: block; margin-top: 3px; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notification-menu__unread { width: 7px; height: 7px; margin: auto 0 auto auto; border-radius: 50%; background: var(--app-teal); }
.notification-menu__footer { padding: 10px 4px 3px; border-top: 1px solid var(--app-line); text-align: center; }
.notification-menu__footer a { color: var(--app-teal-deep); font-size: 13px; font-weight: 700; text-decoration: none; }
.notification-menu__empty { padding: 28px 18px; color: var(--app-muted); text-align: center; font-size: 13px; }
.notification-menu__empty i { display: block; margin-bottom: 8px; font-size: 18px; }

/* Notification center ---------------------------------------------------- */
.notification-center { width: min(920px, 100%); margin: 0 auto; }
.notification-center__toolbar { min-height: 58px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--app-line); border-radius: 10px 10px 0 0; background: #fff; }
.notification-center__filters { display: flex; align-items: center; gap: 6px; }
.notification-center__filters a { padding: 8px 11px; border-radius: 6px; color: var(--app-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.notification-center__filters a:hover, .notification-center__filters a.is-active { background: var(--app-primary-soft); color: var(--app-primary-ink); }
.notification-center__filters span { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 999px; background: var(--app-primary); color: #fff; font-size: 10px; }
.notification-center__read-all { padding: 7px 0; border: 0; background: transparent; color: var(--app-primary-ink); font-size: 13px; font-weight: 700; }
.notification-center__read-all:hover { color: var(--app-primary-strong); }
.notification-center__list { overflow: hidden; border: 1px solid var(--app-line); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; }
.notification-center__item { min-height: 76px; padding: 13px 18px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 7px 10px; align-items: center; gap: 13px; color: var(--app-ink); text-decoration: none; border-top: 1px solid var(--app-line); }
.notification-center__item:first-child { border-top: 0; }
.notification-center__item:hover { background: var(--app-primary-soft); }
.notification-center__item.is-unread { background: color-mix(in srgb, var(--app-primary-soft) 55%, #fff); }
.notification-center__avatar { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--app-primary-pale); color: var(--app-primary-ink); font-size: 12px; font-weight: 700; }
.notification-center__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notification-center__body strong, .notification-center__body small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notification-center__body strong { font-size: 14px; font-weight: 650; }
.notification-center__body small, .notification-center__item time { color: var(--app-muted); font-size: 12px; }
.notification-center__item time { white-space: nowrap; }
.notification-center__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--app-primary); }
.notification-center__item > .fa { color: var(--app-muted); font-size: 10px; }
.notification-center__empty { min-height: 245px; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--app-muted); text-align: center; }
.notification-center__empty i { color: var(--app-primary); font-size: 24px; }
.notification-center__empty strong { color: var(--app-ink); font-size: 15px; }
@media (max-width: 600px) { .notification-center__toolbar { padding: 9px 12px; } .notification-center__item { grid-template-columns: 36px minmax(0, 1fr) 7px; padding: 12px; gap: 10px; } .notification-center__item time, .notification-center__item > .fa { display: none; } }

@media (max-width: 1199.98px) {
  #sidenav-main { width: 272px !important; transform: translateX(-288px); }
  /* Soft UI's built-in toggler adds g-sidenav-pinned to <body>. Support that
     state (and the local .show state) so the top-bar menu button opens the
     navigation on tablet and mobile layouts. */
  #sidenav-main.show,
  body.g-sidenav-pinned #sidenav-main { transform: translateX(0); }
  .sidenav.fixed-start ~ .main-content.app-main { margin-left: 0 !important; width: 100% !important; max-width: 100%; }
  #sidenav-main .navbar-brand span, #sidenav-main .nav-link-text { opacity: 1; width: auto; max-width: 180px; margin-left: 10px !important; }
  .app-topbar { padding: 0 16px; }
  .app-page-content > .container-fluid { padding: 24px 20px !important; }
}

@media (max-width: 575.98px) {
  .app-topbar__title { font-size: 18px; }
  .app-topbar__profile-name { display: none; }
  :root { --app-topbar-height: 58px; }
}

/* Worksheet builder topic headers are interactive accordion controls. */
.topic-header:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-primary) 45%, transparent);
  outline-offset: 2px;
  border-color: var(--app-primary) !important;
}

/* Student directory ----------------------------------------------------- */
.students-page { width: 100%; max-width: none; margin: 0; }
.students-tabs { display: flex; height: 58px; margin-bottom: 20px; padding: 0 18px; align-items: stretch; gap: 26px; border: 1px solid #cfdcdd; border-radius: 10px; background: #fff; }
.students-tabs__tab { display: inline-flex; align-items: center; padding: 0 9px; border-bottom: 3px solid transparent; color: #627375; font-size: 14px; font-weight: 600; text-decoration: none; }
.students-tabs__tab:hover { color: var(--app-teal-deep); }
.students-tabs__tab.is-active { border-bottom-color: var(--app-teal); color: var(--app-teal-deep); }
.students-summary { display: flex; align-items: center; gap: 18px; margin: 0 14px 13px; color: #627375; font-size: 14px; }
.students-summary span + span { padding-left: 18px; border-left: 1px solid #9aa8a9; }
.students-summary i, .students-summary strong { color: var(--app-teal-deep); font-weight: 600; }
.students-table-card { overflow: hidden; border: 1px solid #dbe5e5; border-radius: 11px; background: #fff; box-shadow: 0 2px 5px rgba(38, 74, 77, .04); }
.students-toolbar { min-height: 82px; padding: 16px 22px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #dfe9e8; background: #fff; }
.students-toolbar__spacer { flex: 1; }
.students-toolbar__button, .students-toolbar__select { box-sizing: border-box; height: 42px; min-height: 42px; padding: 0 15px; border: 1px solid #cad7d8; border-radius: 6px; background: #fff; color: #405052; font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none; white-space: nowrap; }
.students-toolbar__button { display: inline-flex; align-items: center; gap: 9px; }
.students-toolbar__button:hover { border-color: #8ca8aa; color: #263b3d; }
.students-toolbar__button.is-primary { border-color: var(--app-teal); background: var(--app-teal); color: #fff; }
.students-toolbar__button.is-primary:hover { background: var(--app-teal-deep); color: #fff; }
.students-toolbar__chevron { margin-left: 3px; font-size: 10px; }
.students-toolbar__select { appearance: auto; display: block; width: 158px; line-height: 20px !important; }
.students-toolbar__search { box-sizing: border-box; height: 42px; min-height: 42px; width: 214px; margin-bottom: 0; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #cad7d8; border-radius: 6px; color: #607577; }
.students-toolbar__search:focus-within { border-color: var(--app-teal); box-shadow: 0 0 0 3px rgba(38,158,170,.12); }
.students-toolbar__search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #334748; font-size: 14px; }
.students-columns-menu { min-width: 185px; padding: 7px; border-color: #d9e4e4; box-shadow: 0 10px 26px rgba(37, 70, 73, .15); }
.students-columns-menu label { display: flex; align-items: center; gap: 9px; padding: 8px 9px; color: #405052; font-size: 13px; cursor: pointer; }
.students-columns-menu label:hover { background: var(--app-teal-soft); }
.students-columns-menu input { accent-color: var(--app-teal); }
.students-table { --bs-table-bg: transparent; --bs-table-hover-bg: #f4fbfb; width: 100%; border-collapse: collapse !important; border-spacing: 0; color: #405052; }
.students-table thead th { padding: 17px 18px; border: 0 !important; border-bottom: 1px solid #d8e3e3 !important; background: #edf2f2; color: #405052; font-size: 14px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.students-table thead th:first-child, .students-table tbody td:first-child { padding-left: 24px; }
.students-table thead th:last-child, .students-table tbody td:last-child { padding-right: 24px; }
.students-table thead a { color: inherit; text-decoration: none; }
.students-table thead a:hover { color: var(--app-teal-deep); }
.students-table thead i { margin-left: 4px; font-size: 11px; }
.students-table tbody td { height: 68px; padding: 9px 18px; border-color: #e5eded; color: #627375; font-size: 14px; vertical-align: middle; }
.students-table__student { min-width: 255px; }
.students-table__student-link { display: flex; align-items: center; gap: 12px; color: var(--app-ink); text-decoration: none; }
.students-table__student-link:hover strong { color: var(--app-teal-deep); }
.students-table__student-link strong { display: block; font-size: 15px; font-weight: 600; }
.students-table__student-link small { display: block; margin-top: 1px; color: #819091; font-size: 12px; }
.students-table__avatar { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid #b9dddd; border-radius: 50%; background: #e5f5f5; color: var(--app-teal-deep); font-size: 11px; font-weight: 700; }
.students-table__grade, .students-table__status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.students-table__grade { background: #edf7f8; color: var(--app-teal-deep); }
.students-table__status.is-active { background: #e7f8d4; color: #388126; }
.students-table__status.is-pending { background: #fff1c6; color: #925e12; }
.students-table__status.is-inactive { background: #edf0f1; color: #647274; }
.students-table__action { color: var(--app-teal-deep); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.students-table__action:hover { color: var(--app-teal); }
.students-table__action i { margin-left: 5px; font-size: 11px; }
.students-empty-state { min-height: 300px; padding: 64px 28px; border: 1px solid #dbe5e5; border-radius: 11px; background: #fff; text-align: center; }
.students-empty-state > i { display: block; margin-bottom: 14px; color: var(--app-teal); font-size: 28px; }
.students-empty-state h4 { margin-bottom: 7px; }
.students-empty-state p { max-width: 470px; margin: 0 auto 22px; color: #718183; font-size: 14px; }

@media (max-width: 850px) {
  .students-toolbar { flex-wrap: wrap; }
  .students-toolbar__spacer { display: none; }
  .students-toolbar__search { order: 3; width: 100%; }
}

@media (max-width: 575.98px) {
  .students-tabs { margin-bottom: 14px; }
  .students-summary { margin-left: 4px; gap: 10px; font-size: 13px; }
  .students-summary span + span { padding-left: 10px; }
  .students-toolbar { padding: 14px; }
  .students-toolbar__button.is-secondary, .students-toolbar__select { flex: 1; }
  .students-table thead th, .students-table tbody td { padding-left: 12px; padding-right: 12px; }
  .students-table thead th:first-child, .students-table tbody td:first-child { padding-left: 16px; }
}

/* Keep the floating dashboard settings control perfectly circular. Theme
   link padding can otherwise make it taller than it is wide on narrow views. */
.fixed-plugin .fixed-plugin-button {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* The theme's own .navbar-collapse height (calc(100vh - 360px)) assumes a
   fixed header+footer budget that doesn't grow with the nav list -- once we
   have enough nav items to exceed that guess, the box clips and the
   "Signed in as" footer card (which follows right after in normal flow)
   ends up sitting flush against whatever nav item got cut off, reading as
   an overlap. Let the whole sidenav scroll as one unit instead, sized to
   its real content. */
#sidenav-main .navbar-collapse {
  height: auto !important;
  overflow: visible !important;
}

/* Breathing room above the "Signed in as" card so it doesn't sit flush
   against Logout now that the nav list above it is full height. */
#sidenav-main .sidenav-footer {
  margin-top: 1.5rem !important;
}

.worksheet-due-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.worksheet-due-date-row .form-control {
  min-width: 0;
}

.worksheet-due-date-clear {
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.worksheet-due-date-clear:hover {
  border-color: var(--app-primary-pale);
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
}

.worksheet-due-date-clear[hidden] {
  display: none;
}

/* Searchable/sortable worksheet results table ------------------------- */
.worksheet-data-filters {
  border-radius: 14px;
}

.worksheet-data-apply {
  margin-bottom: 0;
  background: var(--app-primary);
}

.worksheet-data-clear {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

.worksheet-data-clear:hover {
  color: var(--app-primary-ink);
}

.worksheet-data-toolbar {
  min-height: 70px;
  padding: 14px 24px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.worksheet-data-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

.worksheet-data-page-size select {
  min-width: 62px;
  padding: 5px 24px 5px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background-color: #fff;
  color: #334155;
  font-size: 12px;
}

.worksheet-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8491a3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.worksheet-sort-link i {
  color: #cbd5e1;
  font-size: 10px;
}

.worksheet-sort-link:hover,
.worksheet-sort-link.is-active,
.worksheet-sort-link.is-active i {
  color: var(--app-primary-ink);
}

/* Worksheet history ----------------------------------------------------- */
.worksheet-history-card {
  border-radius: 14px;
  overflow: hidden;
}

/* The history list belongs to the page's scroll flow. Bootstrap's generic
   .table-responsive wrapper otherwise becomes a second vertical scrollbar
   once this table changes into stacked cards at narrower widths. */
.worksheet-history-card .table-responsive { overflow: visible; }

.worksheet-history-toolbar {
  min-height: 68px;
  padding: 14px 24px;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.worksheet-history-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.worksheet-history-filter .form-select {
  width: 220px;
  min-height: 34px;
  color: #334155;
  border-color: #dbe3ee;
}

.worksheet-history-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.worksheet-history-summary-review,
.worksheet-history-summary-overdue {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 650;
}

.worksheet-history-summary-review { background: #dbeafe; color: #1d4ed8; }
.worksheet-history-summary-overdue { background: #fef2f2; color: #dc2626; }

.worksheet-history-clear {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.worksheet-history-table {
  width: 100%;
  border-collapse: collapse;
}

.worksheet-history-table thead {
  background: #f8fafc;
}

.worksheet-history-table thead th {
  padding: 10px 16px;
  border-bottom: 1px solid #e9eef5;
  color: #8491a3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.worksheet-history-table thead th:first-child,
.worksheet-history-table tbody td:first-child {
  padding-left: 24px;
}

.worksheet-history-table thead th:last-child,
.worksheet-history-table tbody td:last-child {
  padding-right: 24px;
}

.worksheet-history-table tbody tr {
  border-bottom: 1px solid #f0f3f7;
  transition: background-color .15s ease;
}

.worksheet-history-table tbody tr:last-child {
  border-bottom: 0;
}

.worksheet-history-table tbody tr:hover {
  background: #fafbff;
}

.worksheet-history-table tbody td {
  padding: 15px 16px;
  color: #64748b;
  font-size: 13px;
  vertical-align: middle;
}

.worksheet-history-title-cell {
  width: 34%;
  min-width: 250px;
}

.worksheet-history-title {
  color: #172033;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.worksheet-history-meta {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.3;
}

.worksheet-history-student {
  display: table-cell;
  white-space: nowrap;
}

.worksheet-history-avatar {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
  font-size: 10px;
  font-weight: 700;
}

.worksheet-history-muted-badge,
.worksheet-history-status {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.worksheet-history-muted-badge,
.worksheet-history-status.is-download {
  background: #f1f5f9;
  color: #64748b;
}

.worksheet-history-status.is-ready {
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
}

.worksheet-history-status.is-overdue {
  background: #fef2f2;
  color: #dc2626;
}

.worksheet-history-status.is-scored {
  background: #ecfdf5;
  color: #059669;
}

.worksheet-history-status.is-submitted {
  background: #dbeafe;
  color: #1d4ed8;
}

.worksheet-history-status.is-returned {
  background: #dcfce7;
  color: #166534;
}

.worksheet-history-schedule {
  white-space: nowrap;
}

.worksheet-history-actions {
  text-align: right;
  white-space: nowrap;
}

.worksheet-history-compact-cell { display: none; }

/* The worksheet action menu lives in a right-aligned table cell. Reset those
   inherited table styles inside its modal so the dialog keeps Bootstrap's
   normal width and its text never runs into the close button. */
.worksheet-copy-assign-modal {
  color: #1e293b;
  text-align: left;
  white-space: normal;
}
.worksheet-copy-assign-modal .modal-dialog {
  max-width: 520px;
}
.worksheet-copy-assign-modal .modal-content {
  border-radius: 14px;
}
.worksheet-copy-assign-modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  text-align: left;
}
.worksheet-copy-assign-modal .modal-header > div {
  flex: 1 1 auto;
  min-width: 0;
}
.worksheet-copy-assign-modal .modal-title {
  margin: 0;
  color: #1e293b;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.worksheet-copy-assign-modal .modal-header p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
}
.worksheet-copy-assign-modal .btn-close {
  flex: 0 0 auto;
  margin: 2px 0 0;
}
.worksheet-copy-assign-modal .modal-body {
  padding: 20px 22px;
  text-align: left;
}
.worksheet-copy-assign-modal .form-label {
  display: block;
  margin-bottom: 7px;
  color: #334155;
  text-align: left;
}
.worksheet-copy-assign-modal .form-text {
  margin-top: 7px;
  color: #64748b;
  text-align: left;
}
.worksheet-copy-assign-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
}

.worksheet-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.worksheet-row-primary,
.worksheet-row-more {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.worksheet-row-primary {
  min-width: 112px;
  padding: 7px 12px;
  gap: 7px;
  background: rgba(93,67,198,.09);
  color: #5d43c6;
  font-size: 11px;
  font-weight: 650;
}

.worksheet-row-primary:hover {
  background: rgba(93,67,198,.15);
  color: #4f36b5;
}

.worksheet-row-more {
  width: 34px;
  padding: 0;
  background: transparent;
  color: #94a3b8;
}

.worksheet-row-more:hover,
.worksheet-row-more[aria-expanded="true"] {
  background: #f1f5f9;
  color: #475569;
}

.worksheet-row-menu {
  min-width: 210px;
  padding: 6px;
  border: 1px solid #e7ebf1;
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
}

.worksheet-row-menu .dropdown-item {
  padding: 8px 10px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #475569;
  font-size: 12px;
}

.worksheet-row-menu .dropdown-item i,
.worksheet-row-menu .dropdown-item .svg-inline--fa {
  width: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  text-align: center;
}

.worksheet-row-menu .worksheet-row-delete {
  width: 100%;
  border: 0;
  background: transparent;
  color: #dc2626;
  text-align: left;
}

.worksheet-history-empty {
  padding: 32px 24px;
  color: #64748b;
  font-size: 13px;
}

.worksheet-history-pagination {
  min-height: 72px;
  padding: 12px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border-top: 1px solid #eef2f7;
  color: #64748b;
  font-size: 13px;
}

.worksheet-history-pagination__size,
.worksheet-history-pagination__goto,
.worksheet-history-pagination__pages {
  display: flex;
  align-items: center;
  gap: 12px;
}

.worksheet-history-pagination__goto { justify-content: flex-end; }
.worksheet-history-pagination label { margin: 0; white-space: nowrap; font-weight: 500; }
.worksheet-history-pagination select { height: 36px; min-width: 64px; padding: 5px 28px 5px 10px; border: 1px solid #d8e2e7; border-radius: 6px; background-color: #fff; color: #334748; font-size: 13px; }
.worksheet-history-pagination__pages { gap: 5px; justify-content: center; }
.worksheet-history-pagination__pages a,
.worksheet-history-pagination__pages span { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #334748; font-size: 14px; font-weight: 600; text-decoration: none; }
.worksheet-history-pagination__pages a:hover { background: var(--app-primary-soft); color: var(--app-primary-ink); }
.worksheet-history-pagination__pages .is-current { background: #dff4f4; color: var(--app-teal-deep); }
.worksheet-history-pagination__pages .is-disabled { color: #c7d3d7; }

/* The app sidebar reduces usable workspace before the viewport reaches a
   phone breakpoint. Switch this dense five-column table to cards at this
   width so its .table-responsive wrapper never needs a horizontal scrollbar. */
@media (max-width: 1399.98px) {
  .worksheet-history-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .worksheet-history-filter {
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .worksheet-history-filter label {
    width: 100%;
  }

  .worksheet-history-filter .form-select {
    width: min(100%, 280px);
  }

  .worksheet-history-pagination { grid-template-columns: 1fr auto; }
  .worksheet-history-pagination__size { grid-column: 1 / -1; justify-content: center; }
  .worksheet-history-pagination__goto { justify-content: flex-end; }

  .worksheet-history-table,
  .worksheet-history-table tbody,
  .worksheet-history-table tr,
  .worksheet-history-table td {
    display: block;
    width: 100%;
  }

  .worksheet-history-table thead {
    display: none;
  }

  .worksheet-history-table tbody tr {
    padding: 14px 20px;
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas:
      "title title"
      "student schedule"
      "status actions";
    column-gap: 18px;
    row-gap: 8px;
    justify-content: start;
  }

  .worksheet-history-table tbody td,
  .worksheet-history-table tbody td:first-child,
  .worksheet-history-table tbody td:last-child {
    min-width: 0;
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: right;
  }

  .worksheet-history-table tbody td::before { display: none; }

  .worksheet-history-table tbody .worksheet-history-title-cell {
    grid-area: title;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
  }

  .worksheet-history-table tbody .worksheet-history-title-cell .worksheet-history-meta {
    margin-top: 0;
    text-align: right;
    white-space: nowrap;
  }

  .worksheet-history-student {
    grid-area: student;
    white-space: normal;
    justify-content: flex-start !important;
  }

  .worksheet-history-schedule {
    grid-area: schedule;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px;
    font-size: 12px;
  }

  .worksheet-history-schedule .worksheet-history-meta {
    margin-top: 0;
    white-space: nowrap;
  }

  .worksheet-history-table tbody td:nth-child(4) {
    grid-area: status;
    justify-content: flex-start;
  }

  .worksheet-history-actions {
    grid-area: actions;
    margin: 0;
  }
}

@media (max-width: 575.98px) {
  .worksheet-history-table tbody tr {
    display: block;
    padding: 14px 16px;
  }

  .worksheet-history-table tbody td,
  .worksheet-history-table tbody td:first-child,
  .worksheet-history-table tbody td:last-child {
    padding: 5px 0;
  }

  .worksheet-history-table tbody td::before {
    content: attr(data-label);
    display: block;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .worksheet-history-table tbody .worksheet-history-title-cell {
    display: block;
  }

  .worksheet-history-table tbody .worksheet-history-title-cell .worksheet-history-meta {
    margin-top: 3px;
    text-align: left;
    white-space: normal;
  }

  .worksheet-history-table tbody .worksheet-history-title-cell::before {
    display: none;
  }

  .worksheet-history-schedule {
    display: flex !important;
    justify-content: space-between !important;
  }

  .worksheet-history-actions { margin-top: 4px; }
}

/* At tablet widths, render one purpose-built compact row rather than trying
   to force five table cells into a card. It keeps related details together
   while still using the available width for the next action. */
@media (max-width: 1399.98px) {
  .worksheet-history-table tbody tr {
    display: block;
    padding: 0;
  }

  .worksheet-history-table tbody td:not(.worksheet-history-compact-cell) {
    display: none !important;
  }

  .worksheet-history-table tbody .worksheet-history-compact-cell {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    text-align: left;
  }

  .worksheet-history-compact-cell::before { display: none !important; }

  .worksheet-history-compact-title,
  .worksheet-history-compact-details,
  .worksheet-history-compact-info,
  .worksheet-history-compact-actions {
    display: flex;
    align-items: center;
  }

  .worksheet-history-compact-title {
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid #eef2f7;
  }

  .worksheet-history-compact-title .worksheet-history-meta {
    margin: 0;
    white-space: nowrap;
  }

  .worksheet-history-compact-details {
    justify-content: space-between;
    gap: 16px;
    padding-top: 9px;
  }

  .worksheet-history-compact-info {
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: #64748b;
    font-size: 12px;
  }

  .worksheet-history-compact-info .worksheet-history-student {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: #475569;
  }

  .worksheet-history-compact-info .worksheet-history-avatar {
    width: 25px;
    height: 25px;
    margin-right: 6px;
  }

  .worksheet-history-compact-schedule { white-space: nowrap; }

  .worksheet-history-compact-actions {
    flex: 0 0 auto;
    gap: 10px;
  }

  .worksheet-history-compact-actions .worksheet-row-actions {
    gap: 4px;
  }
}

@media (max-width: 575.98px) {
  .worksheet-history-table tbody .worksheet-history-compact-cell {
    padding: 13px 16px !important;
  }

  .worksheet-history-compact-title,
  .worksheet-history-compact-details {
    align-items: flex-start;
  }

  .worksheet-history-compact-title .worksheet-history-meta {
    white-space: normal;
    text-align: right;
  }

  .worksheet-history-compact-details {
    flex-direction: column;
    gap: 9px;
  }

  .worksheet-history-compact-actions {
    width: 100%;
    justify-content: space-between;
  }
}