/* Saturated professional theme: structural layout and business state remain in styles.css. */
:root {
  --blue: #1759ed;
  --navy: #102647;
  --ink: #142b4c;
  --muted: #62748e;
  --line: #dfe7f2;
  --shadow: 0 3px 15px #18365b06;
  --purple: #7040dc;
  --teal: #008f83;
  --orange: #c46208;
  color: var(--ink);
  background: #f1f5fb;
}
.sidebar {
  background: var(--navy);
  border-right: 0;
  padding-top: 28px;
}
.sidebar .brand {
  color: #fff;
}
.sidebar .brand > .icon {
  color: #448cff;
  fill: #448cff;
}
.sidebar .brand small {
  color: #a4bad9;
}
.org-switch {
  color: #d9e5f7;
  border-color: #324a6b;
  background: #193456;
  margin-top: 29px;
  margin-bottom: 24px;
}
.org-switch .badge.gray {
  color: #e7efff;
  background: #38577f;
}
.nav-caption {
  color: #95afd2;
}
.sidebar nav {
  gap: 5px;
}
.nav-item {
  color: #c9d8ef;
  font-size: 13px;
  border-radius: 8px;
}
.nav-item:hover {
  background: #234263;
  color: #fff;
}
.nav-item.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 5px 14px #051b3b35;
}
.nav-item.active .icon {
  stroke-width: 2;
}
.nav-dot {
  background: #ffb747;
  width: 6px;
  height: 6px;
}
.help-card {
  background: #1a3659;
  color: #e1ebfa;
  border: 1px solid #2a496e;
}
.help-card small {
  color: #a8bedc;
}
.topbar {
  border-bottom-color: #dfe7f2;
  background: #fff;
}
.breadcrumb {
  color: #5c718e;
  font-size: 13px;
}
.breadcrumb b {
  color: #193859;
}
.top-date,
.user-meta small {
  color: #607591;
}
.user-meta b {
  color: #173758;
  font-size: 12px;
}
.view-switch,
.text-btn,
.btn.text {
  color: #174fc5;
}
.view-switch {
  font-size: 12px;
}
.teacher-avatar {
  color: #1759d6;
  background: #e3edff;
}
.demo-notice {
  color: #50698b;
  font-size: 11px;
}
.notice-secondary {
  color: #607591;
  font-size: 11px;
}
.eyebrow {
  color: #5b7497;
  font-size: 10px;
}
.page-heading h1 {
  color: #142b4c;
  font-size: 27px;
}
.page-heading p {
  color: #5e718e;
  font-size: 12px;
}
.btn {
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
}
.btn.primary {
  background: var(--blue);
  box-shadow: 0 3px 9px #1759ed24;
}
.btn.primary:hover {
  background: #1048c9;
}
.btn.soft {
  background: #edf3ff;
  color: #1752cf;
  border-color: #bcd0fb;
}
.btn.soft:hover {
  background: #dfeaff;
  border-color: #8caff7;
}
.text-btn {
  font-size: 12px;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #6092ff;
  outline-offset: 3px;
}
.metric {
  border: 1px solid #dfe7f2;
  border-top: 3px solid var(--blue);
  border-radius: 10px;
  padding: 18px 21px;
}
.metric-top {
  color: #354e70;
  font-size: 13px;
  font-weight: 550;
}
.metric-number {
  color: #122b4c;
  font-size: 37px;
  font-weight: 700;
}
.metric-number small {
  color: #4e6787;
  font-size: 12px;
}
.metric p {
  color: #5d7190;
  font-size: 11px;
}
.metric:nth-child(2) {
  border-top-color: var(--purple);
}
.metric:nth-child(3) {
  border-top-color: var(--teal);
}
.metric:nth-child(4) {
  border-top-color: #f07818;
}
.icon-box.blue {
  color: #fff;
  background: var(--blue);
}
.icon-box.purple {
  color: #fff;
  background: var(--purple);
}
.icon-box.teal {
  color: #fff;
  background: var(--teal);
}
.icon-box.orange {
  color: #fff;
  background: #e86b10;
}
.metric:first-child {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 5px 15px #1759ed20;
}
.metric:first-child .metric-top,
.metric:first-child .metric-number,
.metric:first-child .metric-number small,
.metric:first-child p {
  color: #fff;
}
.metric:first-child .icon-box {
  background: #3e77f3;
  color: #fff;
}
.panel {
  border-color: #dfe7f2;
  border-radius: 10px;
}
.section-head h2 {
  font-size: 17px;
  color: #183251;
}
.section-head p {
  font-size: 11px;
  color: #5f738f;
}
.chart-legend {
  color: #536d8e;
  font-size: 11px;
}
.chart-legend i {
  width: 7px;
  height: 7px;
  background: #1759ed;
}
.chart-legend i:nth-of-type(2) {
  background: #009e91;
}
.chart-legend i:nth-of-type(3) {
  background: #ef791b;
}
.bluebar {
  background: #1759ed;
}
.tealbar {
  background: #009e91;
}
.orangebar {
  background: #ef791b;
}
.bar span {
  color: #415b7e;
  font-size: 11px;
  font-weight: 600;
}
.chart-column > small {
  color: #506788;
  font-size: 12px;
}
.chart-foot {
  color: #667b98;
  font-size: 10px;
  border-top-color: #e7edf6;
}
.todo-row {
  font-size: 13px;
  color: #354f71;
  border-top-color: #e9eef6;
}
.todo-row:hover {
  background: #f6f9ff;
}
.todo-row > b {
  font-size: 19px;
  color: #1759ed;
}
.todo-row > .icon {
  color: #6b84a6;
}
.todo-row:nth-of-type(2) > b {
  color: var(--teal);
}
.todo-row:nth-of-type(3) > b {
  color: var(--purple);
}
.todo-row:nth-of-type(4) > b {
  color: var(--orange);
}
th {
  background: #eaf1ff;
  color: #315482;
  font-size: 12px;
  font-weight: 600;
}
td {
  color: #344e70;
  font-size: 12px;
  border-bottom-color: #e8eef6;
}
td b {
  color: #183b65;
  font-size: 13px;
}
td small {
  color: #637895;
  font-size: 11px;
}
tbody tr:hover {
  background: #f6f9ff;
}
.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
}
.badge.green {
  background: #dff7ea;
  color: #087344;
}
.badge.blue {
  background: #e4edff;
  color: #174ec3;
}
.badge.orange {
  background: #fff0dc;
  color: #9b4d00;
}
.badge.gray {
  background: #eaf0f6;
  color: #50647e;
}
.green-text {
  color: #087d55;
}
.avatar.blue {
  background: #e0eaff;
  color: #1752ca;
}
.avatar.pink {
  background: #fbe2ef;
  color: #ae216b;
}
.count {
  color: #4b6b95;
  font-size: 13px;
}
.muted {
  color: #5e7390;
}
.filters select,
input,
textarea,
select {
  color: #344e70;
  border-color: #ccd9e9;
  font-size: 13px;
}
input::placeholder,
textarea::placeholder {
  color: #71829a;
}
.search input {
  font-size: 12px;
}
.mini-stats > div {
  border-color: #dfe7f2;
  border-left: 3px solid var(--blue);
}
.mini-stats > div:nth-child(2) {
  border-left-color: var(--teal);
}
.mini-stats > div:nth-child(3) {
  border-left-color: var(--purple);
}
.mini-stats > div:nth-child(4) {
  border-left-color: #ef791b;
}
.mini-stats span,
.mini-stats small {
  color: #607692;
  font-size: 12px;
}
.mini-stats b {
  color: #173f78;
}
.info-banner {
  color: #315c9b;
  background: #eaf1ff;
  border-color: #bfd2f5;
  font-size: 12px;
}
.student-choice {
  color: #2f4c73;
}
.student-choice.selected {
  background: #e6efff;
  box-shadow: inset 3px 0 var(--blue);
}
.student-choice b {
  font-size: 12px;
}
.student-choice small {
  color: #5e7595;
  font-size: 11px;
}
.timeline-item small {
  color: #536e92;
  font-size: 12px;
}
.timeline-item p {
  color: #233f64;
  font-size: 14px;
}
.timeline-dot {
  background: var(--blue);
}
.ratings > div {
  color: #566f91;
}
.stars {
  color: #b96300;
}
.stars > span {
  color: #cad4e3;
}
.profile-details dt,
.modal-body form > label,
.form-grid label,
.question-fields label {
  color: #506a8c;
}
.profile-details dd {
  color: #284a73;
}
.modal-head h2 {
  color: #15375e;
}
.modal-body .muted {
  color: #5b7090;
}
.modal-head {
  border-bottom-color: #dfe7f2;
}
.integration-row {
  color: #334f71;
}
.error-card p,
.practice-card p,
.modal-body form > p {
  font-size: 12px;
}
.desktop-footer {
  color: #697e9b;
  font-size: 10px;
}
.empty {
  color: #607b9d;
}
.empty h3 {
  color: #3d608c;
}
.empty p {
  font-size: 12px;
}
.mobile-nav {
  border-top-color: #d6e1f1;
}
.mobile-nav button {
  color: #5b7192;
}
.mobile-nav button.active {
  color: var(--blue);
  font-weight: 650;
}
.mobile-nav button.active .icon {
  stroke-width: 2.2;
}
.login-intro h1 {
  color: #173d74;
}
.login-intro > p,
.login-card > .muted {
  color: #516e94;
}
.login-card label {
  color: #3c5e8a;
}
.login-tip {
  color: #607899;
}
.login-tip code {
  color: #3c5f92;
}
@media (max-width: 1150px) and (min-width: 761px) {
  .metric {
    padding: 16px;
  }
  .metric-top {
    font-size: 12px;
  }
  .metric p {
    font-size: 10px;
  }
  .page-heading h1 {
    font-size: 24px;
  }
}
@media (max-width: 760px) {
  .page-heading h1,
  .app-mode .page-heading h1 {
    font-size: 22px;
  }
  .page-heading p {
    font-size: 12px;
  }
  .demo-notice {
    font-size: 10px;
  }
  .page-heading .eyebrow {
    font-size: 9px;
  }
  .metric {
    padding: 14px;
  }
  .metric-top {
    font-size: 12px;
  }
  .metric-number {
    font-size: 31px;
  }
  .metric p {
    font-size: 10px;
    line-height: 1.7;
  }
  .metric-number small {
    font-size: 11px;
  }
  .section-head h2,
  .quick-mobile h2 {
    font-size: 15px;
  }
  .section-head p {
    font-size: 11px;
  }
  .shortcut-grid button {
    color: #254570;
    font-size: 12px;
    border-color: #dfe7f2;
  }
  .row-actions .btn {
    font-size: 12px;
    min-height: 36px;
  }
  .mobile-student-card .student-cell small {
    font-size: 11px;
    color: #607694;
  }
  .mobile-student-card p {
    font-size: 11px;
  }
  .mini-stats span {
    font-size: 10px;
  }
  .mini-stats small {
    font-size: 10px;
  }
  .report-actions .btn {
    font-size: 12px;
  }
  .mobile-nav button {
    font-size: 11px;
  }
  .report-preview > .small,
  .info-banner {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}