@import url('./design-tokens.css');
@import url('./layout.css');
@import url('./components.css');
@import url('./forms.css?v=20260927-soft-rollover-v2');
@import url('./tables.css?v=20260927-soft-rollover-v2');
@import url('./print.css');

@font-face {
  font-family: 'Sarabun';
  src: url('../fonts/sarabun/Sarabun-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('../fonts/sarabun/Sarabun-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

* { box-sizing: border-box; }
.report-preview-dialog { width:calc(100% - 32px); max-width:1200px; margin:16px auto; }
.report-preview-dialog .modal-content { height:calc(100dvh - 32px); border:0; border-radius:12px; overflow:hidden; }
.report-preview-dialog .modal-header { flex:0 0 auto; gap:12px; background:#fff; }
.report-preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-left:auto; }
.report-preview-frame { flex:1; min-height:0; width:100%; border:0; background:#eef2f6; }
#report-preview-loading:empty { display:none; }
@media(max-width:575px) { .report-preview-dialog { width:100%; margin:0; }.report-preview-dialog .modal-content { height:100dvh; border-radius:0; }.report-preview-dialog .modal-header { flex-wrap:wrap; }.report-preview-actions .btn { font-size:.75rem; } }
.report-name-link { padding:0; border:0; background:none; color:var(--cr4-primary); font:inherit; font-weight:700; text-align:left; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.report-name-link:hover { color:#174da0; }.report-name-link:focus-visible { outline:2px solid var(--cr4-primary); outline-offset:4px; }
#scope-detail-view[hidden] { display:none!important; }
.comparison-chart-card { padding:22px; border-radius:12px; }
.comparison-chart-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.comparison-chart-heading h2 { margin:0 0 5px; font-size:1.1rem; color:var(--cr4-navy); }
.comparison-chart-heading p { margin:0; font-size:.75rem; color:#64748b; }
.comparison-chart-heading > span { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:20px; background:#e8f1ff; color:#174da0; font-size:.72rem; }
.comparison-chart-heading .lucide { width:16px; height:16px; }
#comparison-chart { min-height:260px; }
#comparison-chart .trend-grid { height:250px; min-width:0; gap:16px; padding:16px 12px 6px; }
#comparison-chart .trend-column { min-width:70px; }
#comparison-chart .trend-track span { width:min(48px,65%); background:linear-gradient(180deg,#5798f4,#1e63c6); border-radius:8px 8px 0 0; box-shadow:0 3px 12px #1e63c61a; }
#comparison-chart .empty-state { width:100%; background:#f8fafc; border-radius:8px; }
@media(max-width:575px) { .comparison-chart-card { padding:16px; }#comparison-chart .trend-grid { gap:10px; } }
#report-school-name { display:flex; align-items:center; min-height:42px; padding:8px 14px; border:1px solid #dce7f5; border-radius:8px; color:var(--cr4-navy); background:#f7faff; font-weight:700; }
#scope-detail-view .report-scope-title { margin:6px 0 0; color:var(--cr4-navy); font-size:clamp(1.55rem,3vw,2.1rem); font-weight:700; }
.scope-progress-card { padding:24px; border-radius:12px; }
.scope-progress-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; }
.scope-progress-heading h2 { color:var(--cr4-navy); font-size:1.15rem; margin:0 0 5px; }
.scope-progress-heading p { color:#64748b; font-size:.8rem; margin:0; }
.scope-progress-percent { color:#174da0; font-size:1.7rem; font-weight:700; text-align:right; }
.scope-progress-percent small { display:block; color:#64748b; font-size:.7rem; font-weight:400; }
.scope-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.scope-status { display:grid; grid-template-columns:32px 1fr; align-items:center; column-gap:10px; padding:16px; border-radius:10px; background:#eef4ff; color:#174da0; }
.scope-status > .lucide { width:22px; height:22px; grid-row:1/3; }.scope-status > span { font-size:.76rem; }
.scope-status strong { font-size:1.6rem; line-height:1.5; }.scope-status strong small { font-size:.7rem; font-weight:400; margin-left:6px; }
.scope-status-gray { color:#475569; background:#f1f5f9; }.scope-status-amber { color:#92400e; background:#fff7e6; }.scope-status-teal { color:#0f766e; background:#e6f7f2; }
.scope-completion-track { height:9px; overflow:hidden; background:#e9eff7; border-radius:20px; margin:20px 0; }
.scope-completion-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1e63c6,#0ea5a0); }
.scope-progress-foot { border-top:1px solid #edf1f6; padding-top:16px; display:grid; gap:12px; }
.scope-school-chips,.scope-type-chips { display:flex; flex-wrap:wrap; gap:8px; }
.scope-school-chips > span { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid #e2e8f0; border-radius:7px; color:#475569; font-size:.72rem; }
.scope-school-chips .lucide { width:16px; height:16px; color:#1e63c6; }
.scope-type-chips > span { padding:4px 10px; color:#526175; background:#f1f5f9; border-radius:20px; font-size:.7rem; }
@media(max-width:767px) { .scope-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.scope-progress-card { padding:16px; }.scope-status { padding:12px; } }
@media(max-width:375px) { .scope-status { grid-template-columns:1fr; }.scope-status > .lucide { grid-row:auto; margin-bottom:6px; } }
.rt-dashboard-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:16px; margin-bottom:20px; }
.rt-dashboard-filters label { display:grid; gap:5px; flex:1 1 140px; font-size:.8rem; color:#334155; }
.rt-dashboard-filters label:nth-child(3) { flex-grow:2; }
.rt-dashboard-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.rt-stat { position:relative; display:flex; flex-direction:column; min-height:165px; padding:22px; color:white; border-radius:8px; overflow:hidden; }
.rt-stat-0 { background:linear-gradient(120deg,#6554d6,#7367db); }.rt-stat-1 { background:linear-gradient(120deg,#298df1,#287cc8); }.rt-stat-2 { background:linear-gradient(120deg,#b96900,#a55700); }.rt-stat-3 { background:linear-gradient(120deg,#d13b45,#b52f3a); }
.rt-stat > .lucide { position:absolute; right:16px; top:20px; width:22px; height:22px; opacity:.85; }
.rt-stat strong { font-size:clamp(1.1rem,2vw,1.8rem); line-height:1.4; padding-right:20px; overflow-wrap:anywhere; }
.rt-stat span { margin-top:5px; font-size:.9rem; }.rt-stat small { opacity:.95; font-size:.72rem; }
.rt-stat-detail { margin-top:auto; padding-top:16px; font-size:.7rem; border-bottom:3px solid rgba(255,255,255,.3); padding-bottom:8px; }
.rt-dashboard-chart { margin-top:24px; overflow:hidden; }.rt-chart-heading { padding:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }.rt-chart-heading small { color:#64748b; }
.rt-chart-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:.75rem; }.rt-chart-legend span::before { content:''; display:inline-block; width:18px; height:3px; background:#1e63c6; margin-right:6px; vertical-align:middle; }.rt-chart-legend span:last-child::before { background:#0f766e; }
#dashboard-chart { padding:0 12px; }#dashboard-chart svg { width:100%; display:block; min-height:220px; }#dashboard-chart text { font-family:Sarabun,sans-serif; font-size:13px; fill:#475569; }
.rt-dashboard-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:#f8fafc; border-top:1px solid #dfe6ef; padding:18px 12px; gap:12px; text-align:center; }
.rt-dashboard-summary span,.rt-dashboard-summary strong { display:block; }.rt-dashboard-summary span { color:#64748b; font-size:.75rem; }.rt-dashboard-summary strong { color:#193b64; margin-top:5px; font-size:1rem; }
@media(max-width:1199px) { .rt-dashboard-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:575px) { .rt-dashboard-cards { grid-template-columns:1fr; gap:12px; }.rt-stat { min-height:140px; }.rt-dashboard-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
html { scroll-behavior: smooth; }
body { --bs-font-sans-serif: 'Sarabun', sans-serif; --bs-body-font-family: 'Sarabun', sans-serif; margin: 0; color: var(--cr4-text); background: var(--cr4-canvas); font-family: 'Sarabun', sans-serif; }
a { text-decoration: none; }
button, input, select, textarea { font: inherit; }
.btn { border-radius: 6px; font-weight: 600; }
.lucide { flex: 0 0 auto; }
.with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.with-icon .lucide { width: 17px; height: 17px; }
.btn-primary { background: var(--cr4-primary); border-color: var(--cr4-primary); }
.btn-primary:hover, .btn-primary:focus { background: #174fa2; border-color: #174fa2; }
.surface { background: #fff; border: 1px solid #e8edf3; border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 43, 78, 0.04); }
.eyebrow { color: var(--cr4-primary); font-size: .72rem; font-weight: 700; letter-spacing: .09em; }

.public-header { position: sticky; top: 0; z-index: 30; min-height: 72px; background: rgba(255,255,255,.95); border-bottom: 1px solid #e2e8f0; backdrop-filter: blur(12px); }
.public-header nav { min-height: 71px; }
.brand-link { display: flex; align-items: center; gap: 12px; color: var(--cr4-navy); }
.brand-logo { flex: 0 0 auto; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 0 0 1px #dbe3ec; }
.brand-link span { display: grid; line-height: 1.12; }
.brand-link strong { font-size: .98rem; letter-spacing: .01em; }
.brand-link small { margin-top: 4px; color: #64748b; font-size: .7rem; }
.public-navigation { gap: 27px; }
.public-navigation > a:not(.btn) { color: #556275; font-size: .84rem; font-weight: 500; }
.public-navigation > a.active, .public-navigation > a:not(.btn):hover { color: var(--cr4-primary); }
.navbar-toggler { padding: 7px 9px; border-color: #dbe3ec; }
.hero-section { min-height: 560px; position: relative; display: grid; align-items: center; overflow: hidden; background: #fff url('/assets/images/cr4-office-hero.png') 62% center/cover no-repeat; border-bottom: 1px solid #dbeafe; }
.hero-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 35%, rgba(255,255,255,.38) 62%, rgba(255,255,255,0) 82%); }
.hero-section::after { display: none; }
.hero-content { position: relative; z-index: 1; }
.hero-copy { max-width: 690px; padding: 70px 12px; animation: rise-in .45s ease both; }
.hero-pill { width: fit-content; margin-bottom: 22px; padding: 6px 13px; color: #174da0; background: rgba(255,255,255,.91); border: 1px solid #bfdbfe; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.hero-pill span { margin-right: 6px; color: #18a365; font-size: .95rem; }
.hero-copy h1 { margin: 0; color: var(--cr4-navy); font-size: clamp(2.25rem, 5vw, 4.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.hero-copy .hero-subtitle { margin: 12px 0 0; color: var(--cr4-primary); font-size: clamp(1.18rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.4; }
.hero-copy .hero-description { max-width: 650px; margin: 15px 0 0; color: #334155; font-size: 1.02rem; font-weight: 500; line-height: 1.9; }
.hero-copy .btn-lg { min-height: 48px; display: inline-flex; align-items: center; padding: 10px 23px; font-size: .95rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; color: #526175; font-size: .78rem; }
.hero-trust b { margin-right: 6px; color: #18a365; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.dashboard-preview { position: relative; margin-top: -50px; z-index: 2; }
.section-heading, .page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading h2, .page-heading h1 { margin: 6px 0 0; color: var(--cr4-navy); font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 700; }
.section-kicker { color: var(--cr4-primary); font-size: .82rem; font-weight: 600; }
.page-heading p { margin: 5px 0 0; color: #64748b; }
.public-dashboard { max-width: 1440px; }
.public-metric-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.public-metric-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid #dfe6ef; border-radius: 8px; box-shadow: 0 7px 20px rgba(15,59,122,.05); }
.public-metric-card > div { min-width: 0; }
.public-metric-card > div > span { display: block; overflow: hidden; color: #64748b; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.public-metric-card strong { display: inline-block; margin-top: 3px; font-size: 1.55rem; line-height: 1.1; }
.public-metric-card small { margin-left: 4px; color: #64748b; font-size: .68rem; }
.metric-symbol { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 700; }
.metric-blue strong,.metric-blue .metric-symbol { color: #1e63c6; }.metric-blue .metric-symbol { background: #eff6ff; }
.metric-teal strong,.metric-teal .metric-symbol { color: #0e9c95; }.metric-teal .metric-symbol { background: #ecfdfb; }
.metric-green strong,.metric-green .metric-symbol { color: #20a85b; }.metric-green .metric-symbol { background: #effcf3; }
.metric-amber strong,.metric-amber .metric-symbol { color: #e2940c; }.metric-amber .metric-symbol { background: #fff8e6; }
.metric-violet strong,.metric-violet .metric-symbol { color: #6d5bd0; }.metric-violet .metric-symbol { background: #f5f3ff; }
.chart-card { min-height: 385px; padding: 22px; }
.chart-card h3 { margin: 0; color: var(--cr4-navy); font-size: .96rem; font-weight: 700; }.chart-card > p { margin: 5px 0 0; color: #64748b; font-size: .72rem; }
.quality-chart-wrap { min-height: 285px; display: grid; grid-template-columns: minmax(170px,1fr) minmax(120px,.7fr); align-items: center; gap: 24px; }
.quality-donut { width: min(230px,100%); aspect-ratio: 1; display: grid; place-items: center; justify-self: center; border-radius: 50%; background: conic-gradient(#e2e8f0 0 100%); position: relative; }
.quality-donut::after { content: ''; position: absolute; width: 66%; height: 66%; border-radius: 50%; background: #fff; }
.quality-donut > span { position: relative; z-index: 1; display: grid; color: var(--cr4-navy); font-size: 1.7rem; font-weight: 700; text-align: center; }.quality-donut small { color: #64748b; font-size: .65rem; font-weight: 500; }
.quality-legend { display: grid; gap: 13px; }.legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; color: #526175; font-size: .74rem; }.legend-dot { width: 8px; height: 8px; border-radius: 50%; }.legend-row strong { color: #334155; }
.domain-chart { min-height: 295px; display: flex; align-items: end; justify-content: space-around; gap: 18px; padding: 30px 12px 0; border-bottom: 1px solid #dfe6ef; background: repeating-linear-gradient(to top, transparent 0, transparent 58px, #edf1f5 59px, #edf1f5 60px); }
.domain-bar-item { height: 260px; flex: 1; display: grid; grid-template-rows: 1fr 38px; align-items: end; justify-items: center; gap: 7px; }.domain-bar-track { height: 100%; width: min(48px,70%); display: flex; align-items: end; }.domain-bar { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; transition: height .45s ease; position: relative; }.domain-bar b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); color: #334155; font-size: .68rem; white-space: nowrap; }.domain-bar-item > span { color: #526175; font-size: .67rem; text-align: center; line-height: 1.3; }
.about-strip { background: #fff; border-block: 1px solid #dfe6ef; }.about-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; padding-block: 38px; }.about-grid article { display: flex; align-items: flex-start; gap: 13px; }.about-grid h3 { margin: 0; color: var(--cr4-navy); font-size: .88rem; font-weight: 700; }.about-grid p { margin: 5px 0 0; color: #64748b; font-size: .77rem; line-height: 1.65; }.about-icon { font-size: 1.15rem; font-weight: 700; }.about-icon.green { color: #22c55e; }.about-icon.teal { color: #0ea5a0; }.about-icon.blue { color: #1e63c6; }
.metric-card {
  position: relative;
  height: 100%;
  padding: 14px 18px 10px;
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(15, 43, 78, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 43, 78, 0.08);
}
.metric-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.metric-card-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
  color: #ffffff;
}
.metric-card-icon-box .lucide {
  width: 22px;
  height: 22px;
  color: #ffffff;
}
.metric-card-info {
  flex: 1;
  min-width: 0;
}
.metric-card-label {
  display: block;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card-value {
  display: block;
  color: #0f172a;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card-unit {
  font-size: 0.55em;
  font-weight: 500;
  color: #64748b;
  margin-left: 4px;
  display: inline-block;
  vertical-align: baseline;
}
.metric-card-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card-accent {
  height: 3.5px;
  border-radius: 999px;
  margin-top: 10px;
  width: 100%;
}
.metric-card-trend {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.metric-card-trend.trend-up {
  background: #dcfce7;
  color: #15803d;
}
.metric-card-trend.trend-down {
  background: #fee2e2;
  color: #b91c1c;
}

/* Fallback for legacy metric card markup */
.metric-card:not(:has(.metric-card-body)) {
  padding: 20px;
}
.metric-card:not(:has(.metric-card-body)) .metric-card-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
}

/* Tone Variants */
.metric-card-blue .metric-card-icon-box,
.metric-card-blue .metric-card-icon { background: #1877f2; color: #fff; }
.metric-card-blue .metric-card-accent { background: linear-gradient(90deg, #1877f2, #93c5fd); }

.metric-card-green .metric-card-icon-box,
.metric-card-green .metric-card-icon { background: #10b981; color: #fff; }
.metric-card-green .metric-card-accent { background: linear-gradient(90deg, #10b981, #6ee7b7); }

.metric-card-amber .metric-card-icon-box,
.metric-card-amber .metric-card-icon,
.metric-card-orange .metric-card-icon-box,
.metric-card-orange .metric-card-icon { background: #f59e0b; color: #fff; }
.metric-card-amber .metric-card-accent,
.metric-card-orange .metric-card-accent { background: linear-gradient(90deg, #f59e0b, #fde68a); }

.metric-card-red .metric-card-icon-box,
.metric-card-red .metric-card-icon { background: #ef4444; color: #fff; }
.metric-card-red .metric-card-accent { background: linear-gradient(90deg, #ef4444, #fca5a5); }

.metric-card-purple .metric-card-icon-box,
.metric-card-purple .metric-card-icon { background: #8b5cf6; color: #fff; }
.metric-card-purple .metric-card-accent { background: linear-gradient(90deg, #8b5cf6, #c4b5fd); }

/* Quick Action Tiles */
.quick-action-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  border: 0;
  color: #ffffff !important;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.quick-action-tile:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  color: #ffffff !important;
}
.quick-action-tile .tile-step-badge {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  color: #1e293b;
  font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.quick-action-blue .tile-step-badge { color: #1d4ed8; }
.quick-action-green .tile-step-badge { color: #047857; }
.quick-action-orange .tile-step-badge { color: #b45309; }
.quick-action-purple .tile-step-badge { color: #6d28d9; }
.quick-action-tile .tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-action-tile .tile-icon .lucide {
  width: 22px;
  height: 22px;
  color: #ffffff;
}
.quick-action-tile .tile-content {
  flex: 1;
  text-align: left;
}
.quick-action-tile .tile-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}
.quick-action-tile .tile-subtitle {
  display: block;
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}
.quick-action-blue { background: linear-gradient(135deg, #1877f2, #2563eb); }
.quick-action-green { background: linear-gradient(135deg, #10b981, #059669); }
.quick-action-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.quick-action-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.process-grid div { position: relative; display: grid; gap: 5px; padding-left: 15px; border-left: 2px solid #d8e7fb; }
.process-grid b { color: var(--cr4-primary); font-size: .75rem; }
.process-grid strong { color: var(--cr4-navy); }
.process-grid span { color: #64748b; font-size: .8rem; line-height: 1.55; }
.security-card { background: linear-gradient(145deg, #fff, #f2f7ff); }
.check-list { display: grid; gap: 13px; margin: 20px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 27px; color: #475569; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #07806a; font-weight: 700; }
.public-footer { padding: 24px 0; color: #dbeafe; background: var(--cr4-navy); font-size: .72rem; }.public-footer .brand-logo { box-shadow: 0 0 0 2px rgba(255,255,255,.65); }.brand-link-light,.brand-link-light small { color: #fff; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(430px,.95fr); background: #fff; }
.login-visual { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 48px clamp(48px,5vw,64px); color: #fff; overflow: hidden; background: var(--cr4-navy) url('/assets/images/cr4-office-hero.png') center/cover no-repeat; }
.login-visual::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(15,59,122,.15),rgba(8,40,87,.88)); }
.login-visual > * { position: relative; z-index: 1; }
.login-visual .brand-logo { box-shadow: 0 0 0 2px rgba(255,255,255,.72); }
.brand-link-light,.brand-link-light small { color: #fff; }
.login-visual-copy { max-width: 600px; }
.login-trust-pill { width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 12px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: .83rem; backdrop-filter: blur(8px); }
.login-trust-pill svg,.back-link svg,.login-lock-icon svg,.login-field-icon,.password-toggle svg,.login-button-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-trust-pill svg { width: 18px; height: 18px; }
.login-visual-copy h1 { margin: 0; font-size: clamp(2.35rem,4vw,3.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.login-visual-copy p { max-width: 550px; margin: 20px 0 0; color: #eff6ff; font-size: 1rem; line-height: 2; }
.login-visual-footer { margin: 0; color: #dbeafe; font-size: .72rem; }
.login-panel { min-height: 100vh; display: grid; place-items: center; padding: 40px; background: #f8fafc; }
.login-box { width: min(100%,470px); }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: #64748b; font-size: .83rem; font-weight: 500; }
.back-link:hover { color: var(--cr4-primary); }
.back-link svg { width: 17px; height: 17px; }
.login-mobile-brand { display: none; margin-bottom: 32px; }
.login-card { padding: 32px; }
.login-heading { margin-bottom: 28px; }
.login-heading h2 { margin: 0; color: var(--cr4-navy); font-size: 1.55rem; font-weight: 700; }
.login-heading p { margin: 5px 0 0; color: #64748b; font-size: .84rem; }
.login-lock-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; color: var(--cr4-primary); background: #eff6ff; border-radius: 6px; }
.login-lock-icon svg { width: 24px; height: 24px; }
.login-field { display: block; margin-bottom: 16px; }
.login-field > span:first-child { display: block; margin-bottom: 6px; color: #334155; font-size: .82rem; font-weight: 600; }
.login-input-wrap { position: relative; display: block; }
.login-input-wrap .form-control { height: 48px; padding: 10px 44px 10px 40px; border-color: #cbd5e1; border-radius: 6px; font-size: .84rem; }
.login-input-wrap .form-control::placeholder { color: #94a3b8; }
.login-field-icon { position: absolute; left: 13px; top: 50%; z-index: 2; width: 18px; height: 18px; color: #94a3b8; transform: translateY(-50%); pointer-events: none; }
.password-toggle { position: absolute; right: 5px; top: 50%; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; color: #94a3b8; background: transparent; border: 0; border-radius: 6px; transform: translateY(-50%); }
.password-toggle:hover,.password-toggle:focus-visible { color: var(--cr4-primary); background: #f1f5f9; outline: none; }
.password-toggle svg { width: 18px; height: 18px; }
.login-remember { width: fit-content; display: flex; align-items: center; gap: 8px; margin: 2px 0 17px; color: #526175; font-size: .82rem; cursor: pointer; }
.login-remember input { width: 16px; height: 16px; accent-color: var(--cr4-primary); }
.login-submit { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: .9rem; box-shadow: 0 4px 12px rgba(30,99,198,.15); }
.login-button-icon { width: 18px; height: 18px; }
.demo-accounts { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.demo-accounts > p { margin: 0 0 12px; color: #64748b; font-size: .72rem; font-weight: 600; }
.demo-account-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.demo-account-grid button { min-width: 0; padding: 10px 6px; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; text-align: center; }
.demo-account-grid button:hover,.demo-account-grid button:focus-visible { background: #eff6ff; border-color: #93c5fd; outline: none; }
.demo-account-grid strong,.demo-account-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-account-grid strong { color: #174da0; font-size: .7rem; }
.demo-account-grid small { margin-top: 2px; font-size: .59rem; }
.demo-password { display: block; margin-top: 11px; color: #94a3b8; font-size: .65rem; text-align: center; }

/* Login layout inspired by the approved full-width school portal reference. */
.login-page.login-redesign { min-height: 100vh; display: block; background: #f8fafc; }
.login-site-header { min-height: 146px; display: flex; align-items: center; padding: 28px clamp(28px,4vw,72px); background: rgba(255,255,255,.98); border-bottom: 1px solid #dbe4e1; }
.login-site-brand { width: min(100%,1500px); display: flex; align-items: center; gap: 24px; margin: 0 auto; }
.login-site-mark { width: 84px; height: 84px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--cr4-primary); border-radius: 13px; box-shadow: 0 12px 28px rgba(30,99,198,.18); }
.login-site-mark .lucide { width: 43px; height: 43px; stroke-width: 2; }
.login-site-copy { min-width: 0; display: grid; gap: 7px; }
.login-site-copy strong { color: #123f71; font-size: clamp(1.55rem,2.75vw,2.8rem); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; }
.login-site-copy small { color: #64748b; font-size: clamp(.78rem,1.25vw,1.08rem); }
.login-stage { position: relative; min-height: calc(100vh - 198px); min-height: calc(100svh - 198px); display: grid; place-items: center start; padding: clamp(22px,4vh,52px) clamp(16px,5vw,80px); overflow: hidden; background: #d8edf9 url('/assets/images/rt-reading-login-bg-v3.png') 50% center/cover no-repeat; }
.login-stage-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(219,234,254,.22),rgba(191,219,254,.34)); }
.login-card-wrap { position: relative; z-index: 1; width: min(100%,590px); margin: auto 0; }
.login-reference-card { padding: clamp(26px,3vw,44px); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.82); border-radius: 12px; box-shadow: 0 22px 60px rgba(15,59,122,.2); backdrop-filter: blur(8px); }
.login-reference-heading { margin-bottom: 28px; text-align: center; }
.login-cap-icon { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 18px; color: #fff; background: var(--cr4-primary); border-radius: 50%; box-shadow: 0 10px 25px rgba(30,99,198,.22); }
.login-cap-icon .lucide { width: 42px; height: 42px; stroke-width: 2; }
.login-reference-heading h1 { margin: 0; color: #123f71; font-size: clamp(1.55rem,2vw,2rem); font-weight: 700; }
.login-reference-heading p { margin: 6px 0 0; color: #64748b; font-size: .88rem; }
.login-reference-card .login-field { margin-bottom: 17px; }
.login-reference-card .login-field > span:first-child { color: #27364a; font-size: .9rem; }
.login-reference-input { display: grid; grid-template-columns: 56px minmax(0,1fr); min-height: 52px; }
.login-reference-input .login-input-icon { display: grid; place-items: center; color: #344253; background: #f8fafc; border: 1px solid #cbd5e1; border-right: 0; border-radius: 7px 0 0 7px; }
.login-reference-input .login-input-icon .lucide { width: 21px; height: 21px; }
.login-reference-input .form-control { height: 52px; padding: 10px 48px 10px 15px; border-color: #cbd5e1; border-radius: 0 7px 7px 0; font-size: .9rem; }
.login-reference-input .form-control:focus { z-index: 2; border-color: var(--cr4-primary); box-shadow: 0 0 0 3px rgba(30,99,198,.13); }
.login-reference-input .password-toggle { right: 6px; }
.login-reference-submit { min-height: 55px; color: #fff; background: var(--cr4-primary); border-color: var(--cr4-primary); border-radius: 7px; font-size: 1rem; box-shadow: 0 8px 18px rgba(30,99,198,.2); }
.login-reference-submit:hover,.login-reference-submit:focus-visible { color: #fff; background: #174fa2; border-color: #174fa2; }
.demo-accounts-collapsed { margin-top: 20px; padding-top: 16px; }
.demo-accounts-collapsed summary { color: #64748b; font-size: .75rem; text-align: center; cursor: pointer; }
.login-footer { min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 14px; padding: 12px 20px; color: #526175; background: #f4f6f8; border-top: 1px solid #dfe6ef; font-size: .76rem; font-weight: 500; line-height: 1.5; text-align: center; }
.login-version { color: #738197; font-size: .7rem; white-space: nowrap; }

.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.portal-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 260px; display: flex; flex-direction: column; padding: 22px 16px; color: #fff; background: linear-gradient(180deg, #0c326d, #09244e); }
.portal-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 24px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
.portal-brand span { display: grid; line-height: 1.2; }.portal-brand small { margin-top: 3px; color: #a8c4ed; font-size: .64rem; }
.portal-nav { min-height: 0; display: grid; gap: 5px; margin-top: 24px; padding-right: 3px; overflow-y: auto; scrollbar-width: thin; }
.portal-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; color: #c8d8ef; background: transparent; border: 0; border-radius: 6px; text-align: left; font-size: .88rem; }
.portal-nav button:hover, .portal-nav button.active { color: #fff; background: rgba(67,139,235,.23); }
.portal-nav button.active { box-shadow: inset 3px 0 #5da0ff; }
.portal-nav .lucide { width: 19px; height: 19px; }
.nav-group { display: grid; gap: 3px; }
.portal-nav .nav-toggle { font-weight: 650; }
.portal-nav .nav-toggle > span { flex: 1; }
.portal-nav .nav-toggle .nav-chevron { width: 16px; height: 16px; margin-left: auto; transition: transform .2s ease; }
.nav-group.is-open > .nav-toggle .nav-chevron { transform: rotate(180deg); }
.nav-group.has-active > .nav-toggle { color: #fff; background: rgba(67,139,235,.12); }
.nav-submenu { display: grid; gap: 2px; margin: 1px 0 5px 20px; padding: 3px 0 3px 9px; border-left: 1px solid rgba(157,183,218,.34); }
.nav-submenu[hidden] { display: none; }
.portal-nav .nav-submenu button { min-height: 38px; padding: 8px 10px; font-size: .81rem; }
.portal-nav .nav-submenu button .lucide { width: 17px; height: 17px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 15px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--cr4-navy); background: #dceaff; font-weight: 700; }
.sidebar-user-info { min-width: 0; display: grid; }.sidebar-user strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.sidebar-user small { color: #9db7da; font-size: .65rem; }
.system-version { margin-left: auto; padding: 3px 6px; color: #b9cce7; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: .62rem; white-space: nowrap; }
.portal-main { grid-column: 2; min-width: 0; }
@media (min-width: 992px) {
  .portal-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar-collapsed .portal-sidebar { width: 76px; padding: 22px 10px; }
  .sidebar-collapsed .portal-brand { justify-content: center; padding: 2px 0 24px; }
  .sidebar-collapsed .portal-brand img { width: 42px; flex-shrink: 0; }
  .sidebar-collapsed .portal-brand span, .sidebar-collapsed .sidebar-user-info,
  .sidebar-collapsed .system-version, .sidebar-collapsed .portal-nav button > span,
  .sidebar-collapsed .nav-chevron { display: none; }
  .sidebar-collapsed .portal-nav { padding-right: 0; }
  .sidebar-collapsed .portal-nav button { justify-content: center; padding: 12px 0; gap: 0; min-height: 44px; }
  .sidebar-collapsed .portal-nav .nav-submenu { margin-left: 0; padding-left: 0; border-left: 0; }
  .sidebar-collapsed .sidebar-user { justify-content: center; padding: 15px 0 0; }
  .portal-sidebar { transition: width .18s ease, box-shadow .18s ease; }
  .sidebar-collapsed.sidebar-hover-expanded .portal-sidebar { width: 260px; padding: 22px 16px; box-shadow: 12px 0 28px #09244e30; }
  .sidebar-hover-expanded .portal-brand { justify-content: flex-start; padding: 2px 8px 24px; }
  .sidebar-hover-expanded .portal-brand span, .sidebar-hover-expanded .sidebar-user-info { display: grid; }
  .sidebar-hover-expanded .system-version, .sidebar-hover-expanded .portal-nav button > span, .sidebar-hover-expanded .nav-chevron { display: inline; }
  .sidebar-hover-expanded .portal-nav button { justify-content: flex-start; padding: 11px 13px; gap: 12px; }
  .sidebar-hover-expanded .portal-nav .nav-submenu { margin-left: 17px; padding-left: 12px; border-left: 1px solid #ffffff26; }
  .sidebar-hover-expanded .portal-nav .nav-submenu button { padding: 8px 10px; }
  .sidebar-hover-expanded .sidebar-user { justify-content: flex-start; padding: 15px 8px 0; }
}
@media (prefers-reduced-motion: reduce) { .portal-sidebar { transition: none; } }
.portal-topbar { position: sticky; top: 0; z-index: 25; min-height: 70px; display: flex; align-items: center; gap: 14px; padding: 10px 28px; background: rgba(255,255,255,.95); border-bottom: 1px solid #dfe6ef; backdrop-filter: blur(12px); }
.portal-topbar > div { display: grid; margin-right: auto; }.portal-topbar strong { color: var(--cr4-navy); font-size: .86rem; }.portal-topbar small { color: #07806a; font-size: .7rem; }
.topbar-year { color: #526175; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; color: #475569; border: 1px solid #dbe2ea; border-radius: 6px; background: #fff; }
.icon-button .lucide { width: 19px; height: 19px; }
.portal-content { padding: 30px; }
.app-confirm-popup { width: min(480px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; overflow-y: auto; border: 0; border-radius: 16px; color: #334155; background: #fff; box-shadow: 0 24px 80px rgba(15,35,70,.25); }
.app-confirm-popup::backdrop { background: rgba(15,23,42,.48); }
.app-confirm-popup h2 { margin: 16px 0 12px; color: var(--cr4-navy); font-size: 1.25rem; }
.app-confirm-popup p { margin-bottom: 24px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.app-confirm-symbol { display: grid; place-items: center; width: 52px; height: 52px; color: #b45309; background: #fff4d6; border-radius: 50%; }
.app-confirm-symbol .lucide { width: 26px; height: 26px; }
.app-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
#score-student-list[hidden] { display: none !important; }
.score-entry-modal .modal-dialog { width: min(1500px,calc(100vw - 32px)); max-width: 1500px; }
.score-entry-modal .score-workspace { background: #fff; }
.score-entry-modal .score-workspace-header { padding: 14px 16px; }
.score-entry-modal .score-workspace-header .eyebrow { display: none; }
.score-entry-modal .score-workspace-header h2 { color: var(--cr4-navy); font-size: 1.2rem; }
.score-entry-modal .score-workspace-body { padding: 0 12px 12px; }
.score-entry-modal .score-domain-tabs { margin: 0; padding-top: 6px; gap: 6px; }
.score-entry-modal .score-domain-tab { border-radius: 6px 6px 0 0; }
.score-entry-modal .score-format-tabs { padding: 0; border-radius: 0; border-left: 0; border-right: 0; }
.score-entry-modal .score-format-tabs button { border-radius: 4px 4px 0 0; }
.score-entry-modal .compact-score-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; padding: 12px 0 0; min-height: 0; border: 0; }
.compact-score-table { min-width: 0; border: 1px solid #dce6f2; border-radius: 4px; overflow: hidden; }
.compact-score-head,.compact-score-row { display: grid; grid-template-columns: 36px minmax(0,1fr) 42px minmax(126px,auto); align-items: center; }
.compact-score-head { min-height: 34px; color: #17385e; background: #f0f5fc; font-size: .66rem; font-weight: 700; text-align: center; }
.compact-score-head span:nth-child(2) { text-align: left; padding-left: 8px; }
.compact-score-row { min-height: 42px; border-top: 1px solid #e8eef6; font-size: .72rem; }
.compact-score-number,.compact-score-max { text-align: center; color: #24426c; }
.compact-score-prompt { padding: 6px 8px; overflow-wrap: anywhere; color: #203b60; font-weight: 600; }
.compact-score-max { border-left: 1px solid #edf2f8; }
.compact-score-controls { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 2px 4px; padding: 4px 6px; border-left: 1px solid #edf2f8; }
.compact-score-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.compact-score-options .score-choice { min-width: 30px; height: 28px; padding: 0 8px; border-radius: 4px; font-size: .72rem; }
.compact-score-options .score-input { width: 74px; height: 30px; padding: 2px 4px; font-size: .75rem; }
.compact-score-clear { align-self: center; padding: 0; height: 24px; color: #64748b; background: transparent; border: 0; border-radius: 4px; font-size: 1rem; }
.compact-score-clear:disabled { opacity: .25; }
.compact-score-state { grid-column: 1 / -1; color: #64748b; text-align: center; font-size: .54rem; line-height: 1; }
.score-entry-modal .score-summary { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; padding: 10px 0; margin-top: 10px; background: #edf5ff; border-radius: 5px; }
.score-entry-modal .score-summary-card { padding: 2px 12px; border: 0; border-right: 1px solid #cbdcf0; border-radius: 0; background: transparent; }
.score-entry-modal .score-summary-card:last-child { border-right: 0; }
.score-entry-modal .score-summary-card strong { font-size: 1rem; margin-top: 2px; }
.score-entry-modal .score-summary-comprehension strong { color: #0f766e; }
.score-entry-modal .score-progress { margin-top: 5px; height: 5px; }
.score-entry-modal .score-workspace-footer { position: static; padding: 10px 12px; box-shadow: none; }
.score-entry-modal .score-workspace-footer .btn { min-height: 38px; font-size: .75rem; }
@media (max-width: 1199.98px) {
  .score-entry-modal .compact-score-panel { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .score-entry-modal .score-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 0; }
  .compact-score-head,.compact-score-row { grid-template-columns: 28px minmax(0,1fr) 32px 124px; }
  .compact-score-options .score-choice { min-width: 32px; height: 36px; }
  .compact-score-clear { height: 36px; }
}
.score-entry-modal .score-workspace { display: flex; flex-direction: column; width: 100%; border: 1px solid #dfe6ef; border-radius: 12px; overflow: hidden; }
.score-entry-modal .score-workspace-header { display: flex; flex-wrap: wrap; border-bottom: 1px solid #dfe6ef; }
.score-entry-modal .score-workspace-body { width: 100%; padding: 0 12px 12px; overflow-y: auto; }
.score-entry-modal .score-workspace-footer { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid #dfe6ef; }
@media (max-width: 575px) {
  .score-entry-modal .modal-dialog { width: calc(100vw - 16px); margin: 8px auto; }
  .score-entry-modal .score-workspace-header { padding: 14px; }
  .score-entry-modal .score-workspace-header > div { width: 100%; }
  .score-entry-modal .score-workspace-footer { padding: 12px; }
}
.role-badge { padding: 7px 11px; color: var(--cr4-primary); background: #e8f1ff; border: 1px solid #c9ddfb; border-radius: 5px; font-size: .72rem; font-weight: 700; }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.quick-action { display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 11px; padding: 15px; color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; }
.quick-action:hover { color: var(--cr4-primary); border-color: #b8d0f2; background: #f2f7ff; }
.quick-action-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--cr4-primary); background: #e8f1ff; border-radius: 7px; }
.quick-action-icon .lucide { width: 20px; height: 20px; }
.quick-action-copy { min-width: 0; display: grid; gap: 3px; }
.quick-action strong,.quick-action small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-action strong { color: var(--cr4-navy); font-size: .84rem; }.quick-action small { color: #64748b; font-size: .7rem; }
.quick-action-arrow { width: 17px; height: 17px; color: #94a3b8; transition: transform .18s ease; }
.quick-action:hover .quick-action-arrow { color: var(--cr4-primary); transform: translateX(2px); }
.modal-close { width: 36px; height: 36px; display: grid; place-items: center; margin-left: auto; padding: 0; color: #64748b; background: transparent; border: 0; border-radius: 6px; }
.modal-close:hover,.modal-close:focus-visible { color: var(--cr4-navy); background: #f1f5f9; outline: none; }
.modal-close .lucide { width: 20px; height: 20px; }
.toast-close { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: #fff; background: transparent; border: 0; border-radius: 6px; }
.toast-close:hover,.toast-close:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.data-table thead th { padding: 8px 12px; color: #1e40af; background: #eef4fc; border-bottom: 1px solid #dbeafe; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.data-table td { padding: 7px 12px; vertical-align: middle; color: #334155; border-color: #f1f5f9; font-size: .84rem; }
.data-table tbody tr { transition: background-color .12s ease; }
.data-table tbody tr > td, .data-table tbody tr { background-color: #ffffff; }
.data-table tbody tr:hover > td, .data-table tbody tr:hover { background-color: #f4f6f8 !important; }
.data-table tbody tr:hover .student-name-cell strong { color: inherit; }
.student-name-cell:hover strong { color: inherit; cursor: pointer; }
.status-OPEN,.status-COMPLETED,.status-ACTIVE,.status-ADMIN { color: #066b58; background: #dcf8ef; }.status-DRAFT,.status-SUPERVISOR { color: #9a6108; background: #fff2ce; }.status-CLOSED,.status-ARCHIVED,.status-INACTIVE { color: #586579; background: #edf1f5; }.status-NOT_STARTED { color: #9c2d35; background: #fee5e7; }.status-TEACHER { color: #174da0; background: #e8f1ff; }
.empty-state { padding: 55px 20px; color: #64748b; text-align: center; }
.calendar-board { display: grid; gap: 10px; }
.calendar-section-container { max-width: 1040px; margin: 0 auto; }
.calendar-card { border-radius: 12px; border: 1px solid #dfe6ef; box-shadow: var(--cr4-shadow); padding: 14px 16px; }
.calendar-toolbar { padding: 2px 0; }
.calendar-title { color: var(--cr4-navy); font-size: 1.15rem; font-weight: 700; }
.calendar-legend { font-size: 0.74rem; }
.calendar-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.calendar-detail-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.calendar-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #e2e8f0; gap: 1px; min-width: 680px; }
.calendar-day-header { background: #f8fafc; padding: 6px 4px; text-align: center; font-weight: 700; font-size: 0.78rem; color: #475569; user-select: none; }
.calendar-day-header.sun { color: #dc2626; background: #fff5f5; }
.calendar-day-header.sat { color: #7c3aed; background: #fbf7ff; }
.calendar-day-cell { min-height: 60px; max-height: 78px; background: #ffffff; padding: 3px 5px; display: flex; flex-direction: column; gap: 2px; position: relative; transition: background 0.15s ease; overflow: hidden; }
.calendar-day-cell.is-other-month { background: #f8fafc; }
.calendar-day-cell.is-other-month .calendar-day-num { color: #94a3b8; }
.calendar-day-cell.is-today { background: #f0f7ff; }
.calendar-day-cell.can-add:hover { background: #eef6ff; cursor: pointer; }
.calendar-day-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; line-height: 1; }
.calendar-day-num { font-weight: 600; font-size: 0.76rem; color: #334155; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.calendar-day-cell.is-today .calendar-day-num { background: #1e63c6; color: #ffffff; font-weight: 700; box-shadow: 0 1px 3px rgba(30, 99, 198, 0.35); }
.calendar-day-add-icon { opacity: 0; color: #1e63c6; transition: opacity 0.15s; font-size: 11px; display: inline-flex; align-items: center; }
.calendar-day-add-icon .lucide { width: 12px; height: 12px; }
.calendar-day-cell.can-add:hover .calendar-day-add-icon { opacity: 1; }
.calendar-events-list { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; }
.calendar-event-item { display: flex; align-items: center; gap: 3px; padding: 1.5px 4px; border-radius: 3px; font-size: 0.65rem; line-height: 1.2; font-weight: 500; cursor: pointer; text-decoration: none; border-left: 2.5px solid var(--chip-color, #1e63c6); background: rgba(30, 99, 198, 0.08); color: #1e293b; transition: transform 0.1s, box-shadow 0.1s, background 0.1s; user-select: none; }
.calendar-event-item:hover { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); background: rgba(30, 99, 198, 0.16); }
.calendar-event-time { font-size: 0.60rem; font-weight: 700; color: var(--chip-color, #1e63c6); white-space: nowrap; flex-shrink: 0; }
.calendar-event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-event-item.is-cycle { border: 1px solid #bfdbfe; border-left: 2.5px solid #1e63c6; background: #eff6ff; color: #1e40af; font-weight: 600; }
.calendar-event-item.is-cycle:hover { background: #dbeafe; }
.calendar-event-item.is-cycle-end { border-color: #ddd6fe; border-left-color: #7c3aed; background: #fbf7ff; color: #6d28d9; }
.calendar-event-item.is-cycle-end:hover { background: #ede9fe; }
.calendar-event-item.is-cycle-end .calendar-event-time { color: #7c3aed; }
.calendar-more-badge { font-size: 0.64rem; color: #1e63c6; font-weight: 600; padding: 1px 2px; cursor: pointer; background: transparent; border: none; text-align: left; line-height: 1; }
.calendar-more-badge:hover { text-decoration: underline; }
.calendar-event { position: relative; padding: 17px 18px 17px 24px; background: #fff; border: 1px solid #dfe6ef; border-radius: 7px; box-shadow: var(--cr4-shadow); overflow: hidden; }
.calendar-event::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--event-color, var(--cr4-primary)); }
.calendar-event strong,.calendar-event small { display: block; }.calendar-event strong { color: var(--cr4-navy); }.calendar-event small { margin-top: 5px; color: #64748b; font-size: .76rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.settings-grid > div:last-child { grid-column: 1 / -1; }
.preference-list { display: grid; gap: 13px; }.preference-list label { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid #edf1f5; }
.score-domain { margin-bottom: 24px; }.score-domain h3 { padding: 10px 13px; color: var(--cr4-navy); background: #eef5ff; border-left: 3px solid var(--cr4-primary); font-size: .95rem; }
.score-row { display: grid; grid-template-columns: 50px minmax(0,1fr) 130px; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #edf1f5; }.score-row small { color: #64748b; }
.student-score-progress { min-width: 92px; display: grid; gap: 4px; color: #526175; font-size: .7rem; }
.student-score-progress > div { height: 5px; overflow: hidden; background: #e7edf5; border-radius: 999px; }
.student-score-progress i { display: block; height: 100%; background: var(--cr4-primary); border-radius: inherit; }
.score-workspace { --score-reading: #1e63c6; --score-reading-dark: #174da0; --score-reading-light: #e8f1ff; --score-comprehension: #0ea5a0; --score-comprehension-dark: #0f766e; --score-comprehension-light: #e6f7f5; background: #f4f7fb; }
.score-workspace-header { gap: 14px; padding: 16px clamp(16px,3vw,38px); background: #fff; }
.score-workspace-header > div { margin-right: auto; }
.score-workspace-body { width: min(1500px,100%); margin: 0 auto; padding: 24px clamp(12px,3vw,32px); }
.score-domain-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,260px)); gap: 8px; margin-bottom: 8px; }
.score-domain-tab { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #45566d; background: #fff; border: 2px solid #dce5f0; border-radius: 8px; font-weight: 700; text-align: left; }
.score-domain-tab span { flex: 1; font-size: .85rem; }.score-domain-tab strong { font-size: .78rem; }
.score-domain-tab .lucide { width: 19px; height: 19px; flex-shrink: 0; }
.score-domain-tab.reading { color: var(--score-reading-dark); background: var(--score-reading-light); border-color: #b9d2f6; }
.score-domain-tab.comprehension { color: var(--score-comprehension-dark); background: var(--score-comprehension-light); border-color: #aee5df; }
.score-domain-tab.reading.active { color: #fff; background: var(--score-reading); border-color: var(--score-reading); box-shadow: 0 7px 18px rgba(30,99,198,.18); }
.score-domain-tab.comprehension.active { color: #fff; background: var(--score-comprehension); border-color: var(--score-comprehension); box-shadow: 0 7px 18px rgba(14,165,160,.18); }
.score-domain-tab:focus-visible,.score-format-tabs button:focus-visible,.score-choice:focus-visible { outline: 3px solid rgba(30,99,198,.25); outline-offset: 2px; }
.score-format-tabs { display: flex; gap: 6px; padding: 7px; overflow-x: auto; background: #fff; border: 1px solid #dfe6ef; border-radius: 9px 9px 0 0; scrollbar-width: thin; }
.score-format-tabs button { flex: 0 0 auto; min-height: 44px; padding: 7px 10px; color: #526175; background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; font-size: .75rem; font-weight: 650; }
.score-entry-modal .score-domain-tab { min-width: 180px; min-height: 38px; padding: 5px 10px; }
.score-entry-modal .score-domain-tab span { font-size: .76rem; }
.score-entry-modal .score-format-tabs button { min-height: 34px; padding: 5px 8px; font-size: .7rem; }
.compact-score-clear .lucide { width: 14px; height: 14px; }
.compact-score-clear:focus-visible { outline: 2px solid var(--cr4-primary); }
.score-format-tabs.reading button.active { color: var(--score-reading-dark); background: var(--score-reading-light); border-bottom-color: var(--score-reading); }
.score-format-tabs.comprehension button.active { color: var(--score-comprehension-dark); background: var(--score-comprehension-light); border-bottom-color: var(--score-comprehension); }
.score-items-panel { min-height: 280px; padding: 8px 16px; background: #fff; border: 1px solid #dfe6ef; border-top: 0; border-radius: 0 0 9px 9px; }
.score-items-panel.reading { border-left: 4px solid var(--score-reading); }.score-items-panel.comprehension { border-left: 4px solid var(--score-comprehension); }
.score-entry-row { display: grid; grid-template-columns: 48px minmax(200px,1fr) minmax(240px,auto); align-items: center; gap: 16px; padding: 13px 8px; border-bottom: 1px solid #e9eef5; }
.score-entry-row:last-child { border-bottom: 0; }
.score-number { width: 34px; height: 34px; display: grid; place-items: center; color: #174da0; background: #e8f1ff; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.score-items-panel.comprehension .score-number { color: var(--score-comprehension-dark); background: var(--score-comprehension-light); }
.score-prompt { display: grid; gap: 3px; }.score-prompt strong { color: #233a5e; font-size: .86rem; }.score-prompt small { color: #738197; font-size: .68rem; }
.score-choices { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.score-choice { min-width: 46px; height: 40px; padding: 0 12px; color: #174da0; background: #fff; border: 1px solid #b9c9dc; border-radius: 7px; font-weight: 700; }
.score-items-panel.reading .score-choice.selected { color: #fff; background: var(--score-reading); border-color: var(--score-reading); }
.score-items-panel.comprehension .score-choice { color: var(--score-comprehension-dark); }.score-items-panel.comprehension .score-choice.selected { color: #fff; background: var(--score-comprehension); border-color: var(--score-comprehension); }
.score-choices .score-input { width: 88px; height: 40px; text-align: center; }
.score-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.score-summary-card { padding: 14px 16px; background: #fff; border: 1px solid #dfe6ef; border-radius: 9px; }
.score-summary-card span,.score-summary-card strong { display: block; }.score-summary-card span { color: #64748b; font-size: .72rem; }.score-summary-card strong { margin-top: 3px; color: var(--cr4-navy); font-size: 1rem; }
.score-summary-reading { border-top: 4px solid var(--score-reading); background: var(--score-reading-light); }.score-summary-comprehension { border-top: 4px solid var(--score-comprehension); background: var(--score-comprehension-light); }
.score-progress { height: 7px; margin-top: 10px; overflow: hidden; background: #e7edf5; border-radius: 999px; }.score-progress span { height: 100%; background: var(--cr4-primary); border-radius: inherit; transition: width .2s ease; }
.score-workspace-footer { position: sticky; bottom: 0; z-index: 5; justify-content: space-between; padding: 12px clamp(16px,3vw,38px); background: rgba(255,255,255,.97); box-shadow: 0 -8px 22px rgba(24,48,82,.08); }
.score-import-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.score-import-summary > div { padding: 14px; background: #f7faff; border: 1px solid #dce7f5; border-radius: 8px; }.score-import-summary span,.score-import-summary strong { display: block; }.score-import-summary span { color: #64748b; font-size: .7rem; }.score-import-summary strong { margin-top: 3px; color: var(--cr4-navy); font-size: 1.25rem; }
.change-positive { color: #07806a; font-weight: 700; }.change-negative { color: #bf3741; font-weight: 700; }
.state-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; text-align: center; }.state-code { color: #d6e5f9; font-size: 7rem; font-weight: 700; line-height: 1; }.state-page h1 { color: var(--cr4-navy); font-weight: 700; }

@media (max-width: 991.98px) {
  .hero-section { min-height: 560px; background-position: 63% center; }.hero-section::before { background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 48%,rgba(255,255,255,.25) 100%); }
  .public-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.public-metric-card:last-child { grid-column: span 2; }.about-grid { gap: 20px; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .login-page { display: block; }.login-visual { display: none; }.login-panel { min-height: 100vh; padding: 40px 24px; }.login-mobile-brand { display: flex; }
  .portal-shell { display: block; }.portal-sidebar { transform: translateX(-100%); transition: transform .2s ease; }.portal-sidebar.open { transform: translateX(0); }.portal-main { margin-left: 0; }.portal-content { padding: 22px 16px; }
  .login-site-header { min-height: 118px; padding: 22px 28px; }.login-site-mark { width: 68px; height: 68px; }.login-site-mark .lucide { width: 34px; height: 34px; }.login-stage { min-height: calc(100vh - 170px); min-height: calc(100svh - 170px); padding: clamp(24px,4vh,40px) 24px; background-position: 44% center; }.login-card-wrap { width: min(100%,560px); }
}
@media (max-width: 575.98px) {
  .public-navigation { width: 100%; padding: 10px 0 14px; }.public-navigation a { display: block; padding: 9px 12px; }.public-navigation .btn { margin-top: 6px; text-align: center; }
  .hero-section { min-height: 590px; background-position: 68% center; }.hero-section::before { background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 65%,rgba(255,255,255,.55)); }.hero-copy { padding: 55px 0; }.hero-copy h1 { font-size: 2.35rem; }.hero-copy .hero-description { font-size: .9rem; }
  .dashboard-preview { margin-top: -30px; }.process-grid { grid-template-columns: 1fr; }.section-heading,.page-heading { align-items: flex-start; flex-direction: column; }
  .public-metric-grid { grid-template-columns: 1fr; }.public-metric-card:last-child { grid-column: auto; }.quality-chart-wrap { grid-template-columns: 1fr; padding-top: 25px; }.quality-legend { grid-template-columns: repeat(2,1fr); width: 100%; }.domain-chart { gap: 6px; padding-inline: 0; }.domain-bar-item > span { font-size: .58rem; }.about-grid { grid-template-columns: 1fr; }
  .login-panel { padding: 32px 20px; }.login-card { padding: 24px; }.back-link { margin-bottom: 26px; }.login-mobile-brand { margin-bottom: 28px; }.demo-account-grid { grid-template-columns: 1fr; }.demo-account-grid button { display: flex; align-items: center; justify-content: space-between; padding-inline: 12px; }.demo-account-grid strong,.demo-account-grid small { text-align: left; }
  .portal-topbar { padding: 10px 15px; }.topbar-year { display: none; }.settings-grid { grid-template-columns: 1fr; }.score-row { grid-template-columns: 38px minmax(0,1fr); }.score-row .score-control { grid-column: 2; }
  .score-workspace-body { padding: 12px 8px 100px; }.score-domain-tabs { display: flex; overflow-x: auto; }.score-domain-tab { min-width: 250px; min-height: 62px; padding: 11px 14px; }.score-entry-row { grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 12px 2px; }.score-choices { grid-column: 1 / -1; justify-content: flex-start; padding-left: 47px; overflow-x: auto; }.score-summary,.score-import-summary { grid-template-columns: 1fr; }.score-workspace-footer { align-items: stretch; flex-direction: column; }.score-workspace-footer > div,.score-workspace-footer .btn { width: 100%; }
  .login-site-header { min-height: 96px; padding: 16px 18px; }.login-site-brand { gap: 14px; }.login-site-mark { width: 54px; height: 54px; border-radius: 10px; }.login-site-mark .lucide { width: 27px; height: 27px; }.login-site-copy strong { font-size: 1.04rem; line-height: 1.28; }.login-site-copy small { display: none; }.login-stage { min-height: calc(100vh - 148px); min-height: calc(100svh - 148px); place-items: center; padding: 20px 12px; background-position: 39% center; }.login-card-wrap { margin: auto; }.login-reference-card { padding: 23px 19px; }.login-reference-heading { margin-bottom: 21px; }.login-cap-icon { width: 60px; height: 60px; margin-bottom: 13px; }.login-cap-icon .lucide { width: 31px; height: 31px; }.login-reference-heading h1 { font-size: 1.36rem; }.login-reference-heading p { font-size: .78rem; }.login-reference-input { grid-template-columns: 46px minmax(0,1fr); }.login-reference-input,.login-reference-input .form-control { min-height: 48px; height: 48px; }.login-reference-submit { min-height: 49px; }.demo-account-grid { grid-template-columns: 1fr; }.login-footer { min-height: 52px; padding-inline: 14px; font-size: .68rem; }
}
@media (max-height: 800px) and (min-width: 576px) {
  .login-site-header { min-height: 104px; padding-block: 16px; }.login-site-mark { width: 64px; height: 64px; }.login-site-mark .lucide { width: 32px; height: 32px; }.login-stage { min-height: calc(100vh - 156px); min-height: calc(100svh - 156px); padding-block: 20px; }.login-reference-card { padding: 24px 30px; }.login-reference-heading { margin-bottom: 20px; }.login-cap-icon { width: 58px; height: 58px; margin-bottom: 11px; }.login-cap-icon .lucide { width: 30px; height: 30px; }.login-reference-card .login-field { margin-bottom: 12px; }.login-reference-input,.login-reference-input .form-control { min-height: 46px; height: 46px; }.login-reference-submit { min-height: 48px; }.demo-accounts-collapsed { margin-top: 12px; padding-top: 10px; }
}
.school-search-picker { position: relative; font-weight: 400; width: 100%; }
.admin-school-field > .form-label,
.score-import-school-field > .form-label { display: block; width: 100%; }
.admin-school-field .school-picker-trigger,
.score-import-school-field .school-picker-trigger { display: block; width: 100%; min-width: 0; }
.portal-content [data-section][hidden], #scope-detail-view[hidden] { display: none !important; }
.school-picker-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.school-picker-trigger { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #183c67; font-size: .875rem; }
.school-picker-trigger:focus-visible { border-color: #1e63c6; box-shadow: 0 0 0 .2rem #1e63c626; }
.school-picker-panel { position: fixed; z-index: 1080; background: #fff; border: 1px solid #d5e2f2; border-radius: .85rem; box-shadow: 0 12px 32px #153b6826; padding: .6rem; min-width: 280px; max-width: min(540px, calc(100vw - 24px)); }
.school-picker-panel.school-picker-panel-school { min-width: 380px; }
.school-picker-panel[hidden] { display: none !important; }
.school-search-picker[hidden], .school-search-results[hidden] { display: none !important; }
.school-search-input { font-size: .85rem; padding: .45rem .75rem; border-radius: .5rem; }
.school-search-results { max-height: min(280px, 40vh); overflow-y: auto; overscroll-behavior: contain; background: #fff; padding-top: .35rem; }
.school-search-result { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .65rem; border: 0; border-radius: .4rem; background: transparent; color: #1e3a5f; text-align: left; font-size: .85rem; line-height: 1.35; white-space: normal; cursor: pointer; transition: background-color .15s ease; }
.school-search-result:hover, .school-search-result:focus-visible { background: #eef5ff; color: #0f3d7a; outline: none; }
.school-search-result[aria-pressed="true"] { background: #e0edff; color: #0d3872; font-weight: 600; }
.school-search-result .school-item-code { display: inline-flex; align-items: center; font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace); font-size: .78rem; font-weight: 600; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 1px 6px; border-radius: 4px; letter-spacing: .02em; flex-shrink: 0; }
.school-search-result[aria-pressed="true"] .school-item-code { background: #d0e3fc; border-color: #b9d7fb; color: #0d3872; }
.school-search-result .school-item-name { flex-grow: 1; min-width: 0; white-space: normal; word-break: break-word; }

.progress-visual-card { padding: 22px; border-radius: 12px; }
.progress-radar-wrap { position: relative; min-height: 390px; }
#progress-radar-chart { width: 100% !important; height: 390px !important; }
#progress-chart { min-height: 390px; }
#progress-chart .trend-grid { height: 360px; min-width: 0; padding-top: 26px; }
.progress-radar-wrap .empty-state { min-height: 390px; display: grid; place-items: center; padding: 30px; background: #f8fafc; border-radius: 8px; }
.progress-radar-note { margin: 8px 0 0; color: #9a6108; text-align: center; font-size: .75rem; }
@media (max-width: 1199.98px) {
  .progress-radar-wrap { min-height: 430px; }
  #progress-radar-chart { height: 430px !important; }
  .progress-radar-wrap .empty-state { min-height: 300px; }
}
@media (max-width: 575.98px) {
  .progress-visual-card { padding: 16px; }
  .progress-radar-wrap { min-height: 330px; }
  #progress-radar-chart { height: 330px !important; }
  #progress-chart { min-height: 280px; }
  #progress-chart .trend-grid { height: 270px; min-width: 360px; }
}
@media print {
  .progress-visual-grid > * { width: 50% !important; }
  .progress-visual-card { break-inside: avoid; box-shadow: none; }
  .progress-radar-wrap, #progress-radar-chart { min-height: 320px; height: 320px !important; }
  #progress-chart, #progress-chart .trend-grid { min-height: 300px; height: 300px; }
}

/* Action colors remain consistent across static and dynamically rendered reports. */
.btn[data-export-table], #scope-detail-export {
  --bs-btn-color: #fff; --bs-btn-bg: #157347; --bs-btn-border-color: #157347;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #105c39; --bs-btn-hover-border-color: #105c39;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #0e5132; --bs-btn-active-border-color: #0e5132;
  --bs-btn-focus-shadow-rgb: 21, 115, 71;
  color: #fff; background-color: #157347; border-color: #157347;
}
.btn[data-export-table]:hover, #scope-detail-export:hover { color: #fff; background-color: #105c39; border-color: #105c39; }
#scope-detail-preview {
  --bs-btn-focus-shadow-rgb: 109, 40, 217;
  color: #6d28d9; background-color: #faf5ff; border-color: #6d28d9;
}
#scope-detail-preview:hover { color: #fff; background-color: #6d28d9; border-color: #6d28d9; }
#report-preview-download { color: #fff; background-color: #6d28d9; border-color: #6d28d9; --bs-btn-focus-shadow-rgb: 109, 40, 217; }
#report-preview-download:hover { background-color: #5b21b6; border-color: #5b21b6; }
#report-preview-print, #scope-detail-print, .btn[onclick="window.print()"] { color: #475569; background-color: #f8fafc; border-color: #64748b; --bs-btn-focus-shadow-rgb: 100, 116, 139; }
#report-preview-print:hover, #scope-detail-print:hover, .btn[onclick="window.print()"]:hover { color: #fff; background-color: #475569; border-color: #475569; }

#commit-score-import, .btn-orange-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #c2410c;
  --bs-btn-border-color: #c2410c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9a3412;
  --bs-btn-hover-border-color: #9a3412;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7c2d12;
  --bs-btn-active-border-color: #7c2d12;
  --bs-btn-focus-shadow-rgb: 194, 65, 12;
  color: #fff !important;
  background-color: #c2410c !important;
  border-color: #c2410c !important;
}
#commit-score-import:hover, .btn-orange-dark:hover {
  color: #fff !important;
  background-color: #9a3412 !important;
  border-color: #9a3412 !important;
}
#commit-score-import:active, .btn-orange-dark:active,
#commit-score-import:focus, .btn-orange-dark:focus {
  color: #fff !important;
  background-color: #7c2d12 !important;
  border-color: #7c2d12 !important;
  box-shadow: 0 0 0 0.25rem rgba(194, 65, 12, 0.35) !important;
}

#score-bulk-commit:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(60%) !important;
}

.score-bulk-footer.is-all-completed {
  border-color: #86efac;
  background: #f0fdf4;
}
.score-bulk-footer.is-all-completed strong {
  color: #166534;
}
.score-bulk-footer.is-all-completed p {
  color: #15803d;
}

.btn-outline-success {
  --bs-btn-color: #16a34a;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #16a34a;
  --bs-btn-hover-border-color: #16a34a;
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #15803d;
  --bs-btn-active-border-color: #15803d;
  color: #16a34a;
  border-color: #16a34a;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  color: #fff;
  background-color: #16a34a;
  border-color: #16a34a;
}

/* Progress Overview Badges and KPI Cards */
.badge-result-pass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-result-fail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-result-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.progress-kpi-card {
  padding: 1.15rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.progress-kpi-card.kpi-total { border-left: 4px solid #3b82f6; }
.progress-kpi-card.kpi-pass { border-left: 4px solid #22c55e; background: #f0fdf4; }
.progress-kpi-card.kpi-fail { border-left: 4px solid #ef4444; background: #fef2f2; }
.progress-kpi-card.kpi-avg { border-left: 4px solid #8b5cf6; }
.progress-kpi-card .kpi-label { font-size: 0.85rem; color: #64748b; font-weight: 600; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 6px; }
.progress-kpi-card .kpi-value { font-size: 1.85rem; font-weight: 700; color: #0f172a; line-height: 1.1; margin-bottom: 0.35rem; }
.progress-kpi-card.kpi-pass .kpi-value { color: #15803d; }
.progress-kpi-card.kpi-fail .kpi-value { color: #b91c1c; }
.progress-kpi-card .kpi-sub { font-size: 0.78rem; color: #64748b; }

.progress-student-table-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.progress-student-table-wrap::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.progress-student-grid {
  width: 100% !important;
  table-layout: auto;
}
.progress-student-grid th, .progress-student-grid td {
  padding: 6.5px 7px !important;
  vertical-align: middle !important;
  font-size: 12.5px;
  line-height: 1.35;
}
.progress-student-grid th {
  background-color: #f8fafc;
  color: #334155;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.progress-student-grid th.sortable-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}
.progress-student-grid th.sortable-header:hover {
  background-color: #f1f5f9 !important;
}
.sort-target {
  cursor: pointer;
  user-select: none;
}
.sort-target:hover {
  color: #2563eb;
}
.header-filter-trigger {
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.header-filter-trigger:hover, .header-filter-trigger[aria-expanded="true"] {
  opacity: 1;
  color: #2563eb !important;
}
.header-filter-trigger.text-primary {
  opacity: 1;
}
.progress-student-grid tbody tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.progress-student-grid tbody tr:hover {
  background-color: #f4f6f8 !important;
}
.progress-student-grid tbody tr:hover .student-name-clickable {
  color: inherit !important;
  text-decoration: none !important;
}
.progress-student-grid tbody tr:hover .view-student-progress-btn,
.progress-student-grid tbody tr:hover .btn-outline-primary {
  background-color: transparent !important;
  color: #2563eb !important;
  border-color: #2563eb !important;
}
.progress-student-grid .view-student-progress-btn:hover {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}
.progress-student-grid .student-selected-row { background-color: #eff6ff !important; }

.student-name-clickable {
  color: #1e293b;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
.student-name-clickable:hover {
  color: #1e293b !important;
  text-decoration: none !important;
}

.badge-student-type {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: 1px;
  line-height: 1.3;
}
.badge-type-normal { color: #087056; background: #e6f7f2; }
.badge-type-ld { color: #4338ca; background: #eef2ff; }
.badge-type-special { color: #9a6108; background: #fef9c3; }

.badge-result-clean {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  white-space: nowrap;
}

#progress-modal .modal-dialog { width: min(1320px, calc(100vw - 32px)); max-width: 1320px; }
#progress-modal .modal-header { border-bottom: 1px solid #e2e8f0; }
#progress-modal .modal-footer { border-top: 1px solid #e2e8f0; }
#progress-modal .progress-visual-card { border: 1px solid #e2e8f0; border-radius: 8px; }

/* Unified Dashboard Helpers (Bootstrap 5) */
.hover-lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important; }
.bg-primary-subtle { background-color: #e0edff !important; color: #1e63c6 !important; }
.bg-success-subtle { background-color: #dcfce7 !important; color: #15803d !important; }
.bg-danger-subtle { background-color: #fee2e2 !important; color: #b91c1c !important; }
.bg-warning-subtle { background-color: #fef3c7 !important; color: #b45309 !important; }
.bg-info-subtle { background-color: #e0f2fe !important; color: #0369a1 !important; }
.bg-secondary-subtle { background-color: #f1f5f9 !important; color: #475569 !important; }

/* School Report Modal (Matching #progress-modal & Bootstrap 5) */
#school-report-modal .modal-dialog { width: min(1320px, calc(100vw - 32px)); max-width: 1320px; }
#school-report-modal .modal-header { border-bottom: 1px solid #e2e8f0; }
#school-report-modal .modal-footer { border-top: 1px solid #e2e8f0; }

/* School Assessment Status and Quality Badges (Matching Progress Pill Badges) */
.badge-status-completed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-status-completed .lucide { width: 14px; height: 14px; }

.badge-status-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-status-progress .lucide { width: 14px; height: 14px; }

.badge-status-notstarted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-status-notstarted .lucide { width: 14px; height: 14px; }

.badge-status-unregistered {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #f8fafc;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-status-unregistered .lucide { width: 14px; height: 14px; }

.badge-quality-excellent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-quality-excellent .lucide { width: 14px; height: 14px; }

.badge-quality-good {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #e0edff;
  color: #1e63c6;
  border: 1px solid #bfdbfe;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-quality-good .lucide { width: 14px; height: 14px; }

.badge-quality-fair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-quality-fair .lucide { width: 14px; height: 14px; }

.badge-quality-improve {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-quality-improve .lucide { width: 14px; height: 14px; }

.badge-quality-none {
  display: inline-flex;
  align-items: center;
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Compact & Tight Report Tables (บีบพื้นที่กระชับ + วงกลม % ความสมบูรณ์) */
#report-schools-table,
#report-networks-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
}

#report-schools-table th,
#report-schools-table td,
#report-networks-table th,
#report-networks-table td {
  padding: 0.35rem 0.25rem !important;
  font-size: 0.78rem !important;
  vertical-align: middle !important;
}

#report-schools-table thead th,
#report-networks-table thead th {
  padding: 0.45rem 0.2rem !important;
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  background: #eef4fc !important;
  color: #1e40af !important;
}

#report-schools-table thead th .table-sort-button,
#report-networks-table thead th .table-sort-button {
  gap: 0.15rem !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

#report-schools-table thead th .sort-icon,
#report-networks-table thead th .sort-icon {
  font-size: 0.75em !important;
}

#report-schools-table tbody tr:hover,
#report-networks-table tbody tr:hover {
  background-color: #f4f6f8 !important;
}

#report-schools-table .badge-quality-excellent,
#report-schools-table .badge-quality-good,
#report-schools-table .badge-quality-fair,
#report-schools-table .badge-quality-improve,
#report-schools-table .badge-quality-none,
#report-schools-table .badge-status-completed,
#report-schools-table .badge-status-progress,
#report-schools-table .badge-status-notstarted,
#report-schools-table .badge-status-unregistered,
#report-networks-table .badge-quality-excellent,
#report-networks-table .badge-quality-good,
#report-networks-table .badge-quality-fair,
#report-networks-table .badge-quality-improve,
#report-networks-table .badge-quality-none,
#report-networks-table .badge-status-completed,
#report-networks-table .badge-status-progress,
#report-networks-table .badge-status-notstarted,
#report-networks-table .badge-status-unregistered {
  padding: 2px 5px !important;
  font-size: 0.7rem !important;
  gap: 2px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

#report-schools-table .badge-quality-excellent .lucide,
#report-schools-table .badge-quality-good .lucide,
#report-schools-table .badge-quality-fair .lucide,
#report-schools-table .badge-quality-improve .lucide,
#report-schools-table .badge-status-completed .lucide,
#report-schools-table .badge-status-progress .lucide,
#report-schools-table .badge-status-notstarted .lucide,
#report-schools-table .badge-status-unregistered .lucide,
#report-networks-table .badge-quality-excellent .lucide,
#report-networks-table .badge-quality-good .lucide,
#report-networks-table .badge-quality-fair .lucide,
#report-networks-table .badge-quality-improve .lucide,
#report-networks-table .badge-status-completed .lucide,
#report-networks-table .badge-status-progress .lucide,
#report-networks-table .badge-status-notstarted .lucide,
#report-networks-table .badge-status-unregistered .lucide {
  width: 10px !important;
  height: 10px !important;
}

.report-circle-wrap {
  width: 34px;
  height: 34px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.report-circle-svg {
  width: 34px;
  height: 34px;
  display: block;
}

.report-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.report-circle-sub {
  font-size: 0.65rem;
  color: #64748b;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
  text-align: center;
  font-weight: 500;
}

#report-schools-table .btn-view-school-report,
#report-networks-table .btn-view-network-report {
  white-space: nowrap;
  font-size: 0.74rem !important;
  font-weight: 500;
  padding: 0.2rem 0.55rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 6px;
  line-height: 1.25 !important;
}

#report-schools-table .btn-view-school-report .lucide,
#report-networks-table .btn-view-network-report .lucide {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2.2px;
}

/* Scoring Period / Countdown Banner */
#score-period-banner {
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid transparent !important;
}
#score-period-banner.is-waiting {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  border-left: 4px solid #f59e0b !important;
}
#score-period-banner.is-closed {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  border-left: 4px solid #94a3b8 !important;
}
.period-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #fde68a;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.06);
  color: #b45309;
}
.score-countdown-badge {
  background: #ffffff !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px;
  padding: 8px 18px;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.08);
  min-width: 180px;
}
#score-countdown-timer {
  letter-spacing: 0.5px;
  color: #b45309 !important;
  font-weight: 700;
}
.score-entry-button.is-locked {
  pointer-events: auto !important;
  cursor: not-allowed !important;
  opacity: 0.65;
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}