/* CLASSMATE R2.8.3.9.16 | Premium Classmate UI | 14 Oct 2026.
   Post-baseline scoped layer. No print layout, auth, state or database transformations. */
@media screen {
  :root {
    --cm-premium-line:#dbe7ed;
    --cm-premium-shadow:0 4px 15px rgba(7,48,71,.055);
    --cm-premium-radius:17px;
  }
  /* Prevent wide seeded-UAT account tables from enlarging the login grid. */
  .auth-gate {grid-template-columns:minmax(0,1fr);width:100%;max-width:100vw;min-width:0;}
  .auth-card {min-width:0!important;max-width:100%!important;justify-self:center;}
  .auth-card .local-uat-login-panel {max-width:100%;min-width:0;overflow:hidden;}
  .auth-card .local-uat-login-panel table {display:block;max-width:100%;overflow-x:auto;}
  /* Suppress the legacy cross-screen fade that visually flashed during navigation. */
  .screen, .screen.active {animation:none!important;transition:none!important;}
  .main {min-width:0;padding:20px 22px 34px!important;}
  .topbar {align-items:center;gap:12px;margin-bottom:13px!important;}
  .topbar h2 {font-size:clamp(21px,2.1vw,28px)!important;line-height:1.15!important;letter-spacing:-.025em;}
  .topbar p {font-size:12.5px!important;line-height:1.38!important;margin-top:4px!important;}
  .topbar .actions {gap:8px;flex-wrap:wrap;}
  .screen.active {padding-top:5px!important;min-width:0;}
  .screen.active:before {height:2px!important;margin:-5px 0 10px!important;}
  .cm-page-divider {display:none!important;}
  .screen.active > .grid,.screen.active > .card,.screen.active > .section-title,
  .screen.active > .filter-panel {margin-top:0!important;}
  .screen.active > .grid + .grid,.screen.active > .grid + .card,
  .screen.active > .card + .grid,.screen.active > .card + .card {margin-top:12px!important;}
  .grid, .form-grid {gap:12px!important;min-width:0;}
  .grid > *, .form-grid > * {min-width:0;}
  /* Exclude official reports, printed cards and timetable document output. */
  .screen:not(#screen-reports) .card:not(.report-card):not(.official-report-card):not(.clean-report-card),
  .screen .filter-panel {padding:16px!important;border-radius:var(--cm-premium-radius)!important;
    box-shadow:var(--cm-premium-shadow)!important;}
  .section-title {gap:10px!important;align-items:flex-start;flex-wrap:wrap;}
  .section-title h3 {font-size:16px!important;line-height:1.25!important;}
  .section-title p {font-size:12px!important;line-height:1.4!important;}
  .card.kpi {min-height:0!important;}
  .card.kpi .num {font-size:clamp(25px,2.4vw,33px)!important;}
  .btn, button.btn {border-radius:11px!important;min-height:36px;max-width:100%;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    white-space:normal;overflow-wrap:anywhere;line-height:1.25;}
  .btn.small,button.btn.small {min-height:32px!important;}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea {
    max-width:100%;min-width:0;border-radius:10px!important;
  }
  textarea {resize:vertical;}
  .saas-dashboard {gap:13px!important;min-width:0;}
  .saas-hero {gap:16px!important;padding:20px 22px!important;border-radius:20px!important;
    align-items:center;min-width:0;}
  .saas-hero > * {min-width:0;}
  .saas-hero h2 {font-size:clamp(22px,2.55vw,33px)!important;line-height:1.13!important;}
  .saas-hero p {max-width:760px;font-size:13px!important;line-height:1.5!important;}
  .saas-hero-actions {gap:8px!important;align-items:center;}
  .saas-hero-actions .btn {padding:9px 12px!important;font-size:12px!important;}
  .cm-premium-action-icon {width:17px!important;height:17px!important;flex-shrink:0;}
  .saas-signal-grid {gap:10px!important;align-items:start;}
  .saas-signal {padding:13px 15px!important;border-radius:15px!important;min-height:0!important;
    box-shadow:0 3px 12px rgba(7,48,71,.035)!important;}
  .saas-signal .value {font-size:clamp(20px,2vw,27px)!important;line-height:1.1!important;}
  .saas-signal .context {line-height:1.35!important;}
  .saas-content-grid {gap:13px!important;align-items:start!important;}
  .saas-content-grid > * {min-height:0!important;min-width:0;align-self:start!important;}
  .saas-panel {padding:17px!important;border-radius:18px!important;
    box-shadow:var(--cm-premium-shadow)!important;height:auto!important;min-height:0!important;}
  .saas-panel-head {gap:10px!important;margin-bottom:12px!important;flex-wrap:wrap;}
  .saas-panel-head h3 {font-size:16px!important;line-height:1.3!important;}
  .saas-panel-head p {font-size:12px!important;line-height:1.4!important;}
  .saas-action-list {gap:8px!important;}
  .saas-action {gap:10px!important;padding:10px 12px!important;border-radius:13px!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;min-width:0;}
  .saas-action > * {min-width:0;}
  .saas-action .btn {min-height:34px!important;padding:7px 10px!important;font-size:12px!important;}
  .saas-action-icon {width:32px!important;height:32px!important;display:grid!important;place-items:center!important;
    border-radius:10px!important;}
  .saas-action-icon .cm-icon {width:19px!important;height:19px!important;stroke-width:1.9;}
  .saas-action small {line-height:1.4!important;}
  .saas-hero-metric {min-width:0;}
  .saas-mini-row,.saas-column-item {min-width:0;}
  .navGroup {gap:3px!important;}
  .nav button {border-radius:12px!important;min-width:0;}
  .nav button .ico,.nav button .cm-icon {flex-shrink:0;}
  .nav button .nav-label {overflow-wrap:break-word;min-width:0;}
  .sidebar {padding:16px 12px!important;}
  .sidebar .brand {margin-bottom:13px!important;}
  .brand-logo-image {width:auto;max-width:100%;height:auto;object-fit:contain;}
  .table-wrap,.premium-responsive-table {min-width:0;max-width:100%;overscroll-behavior-x:contain;}
  .table-wrap table {min-width:100%;}
  .cm-table-more {gap:7px;flex-wrap:wrap;}
  .cm-table-more-actions {display:flex;gap:6px;flex-wrap:wrap;}
  .screen img:not(.brand-logo-image) {max-width:100%;height:auto;}
  .screen img[class*="avatar"],.screen .avatar img {aspect-ratio:1;object-fit:cover;border-radius:50%;}
  .screen button:focus-visible,.nav button:focus-visible,.cm-mobile-bottom-dock button:focus-visible {
    outline:3px solid #76cad8!important;outline-offset:2px!important;
  }
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .main {padding:17px 17px 28px!important;}
  .saas-content-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .saas-hero {grid-template-columns:minmax(0,1fr)!important;}
  .saas-signal-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media screen and (max-width:767px) {
  /* Navigation dock/More portal remain owned by R2.8.3.9.15. */
  .auth-gate {padding:12px!important;}
  .auth-card {padding:19px!important;border-radius:17px!important;}
  .auth-card h1 {font-size:21px!important;}
  .main {padding:12px 11px calc(112px + env(safe-area-inset-bottom))!important;}
  .topbar {gap:8px!important;margin-bottom:11px!important;flex-wrap:wrap;}
  .topbar h2 {font-size:21px!important;}
  .screen.active {padding-top:4px!important;}
  .screen.active:before {margin:-4px 0 9px!important;}
  .saas-dashboard {gap:10px!important;}
  .saas-hero {padding:16px!important;gap:13px!important;grid-template-columns:minmax(0,1fr)!important;border-radius:17px!important;}
  .saas-hero h2 {font-size:23px!important;}
  .saas-hero-actions {display:flex!important;flex-wrap:wrap!important;gap:7px!important;}
  .saas-hero-actions .btn {max-width:100%;flex:0 1 auto!important;min-height:40px!important;}
  .saas-signal-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .saas-signal {padding:11px 12px!important;}
  .saas-content-grid {grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  .saas-panel {padding:14px!important;}
  .screen:not(#screen-reports) .card:not(.report-card):not(.official-report-card):not(.clean-report-card),
  .screen .filter-panel {padding:13px!important;}
  .grid,.form-grid {gap:9px!important;}
  .saas-action {grid-template-columns:31px minmax(0,1fr)!important;gap:8px!important;}
  .saas-action-icon {width:30px!important;height:30px!important;grid-row:span 2;}
  .saas-action > .btn {grid-column:2!important;justify-self:start;min-height:36px!important;}
  .cm-mobile-bottom-dock button svg {width:20px!important;height:20px!important;stroke-width:1.9!important;}
  .cm-mobile-more-sheet .nav button .cm-icon {width:19px!important;height:19px!important;}
}
@media screen and (max-width:359px) {
  .main {padding-left:8px!important;padding-right:8px!important;}
  .saas-signal-grid {gap:7px!important;}
  .saas-signal {padding:10px!important;}
  .saas-hero-actions .btn {font-size:11px!important;padding:8px 9px!important;}
}
@media (prefers-reduced-motion:reduce) {
  .saas-dashboard *, .screen *, .cm-mobile-bottom-dock * {scroll-behavior:auto!important;}
}