/* SchoolOS Phase 5 – consistent, accessible desktop/iPad/mobile design. */
:root {
  --bg:#f5f7fb; --ink:#172338; --muted:#617087; --line:#dfe5ee; --soft:#eff3f9;
  --border:#e0e6ee; --shadow:0 12px 35px rgba(17,37,68,.075);
  --school-blue:#365dd8; --school-blue-dark:#244ac1; --nav-bg:#132039;
  color:#172338; background:#f5f7fb;
}
html { color-scheme:light; }
body { background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font-family:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:3px solid #5984e8; outline-offset:3px;}
.sidebar { background:var(--nav-bg);color:#e7eefb; border-right:1px solid #172b48;box-shadow:6px 0 20px rgba(19,32,57,.08); }
.brand { padding:25px 18px 25px; }
.brand-mark {display:flex;align-items:center;justify-content:center;background:#476de5;color:white;border-radius:14px;box-shadow:0 5px 15px #0002;font-weight:800;}
.brand-mark span {color:#b9d2ff;}
.brand-label {color:#f2f6ff;font-weight:790;letter-spacing:-.7px;}
.brand-label>span {color:#b5c4df;font-weight:550;}
.brand-label small {color:#8799b5;letter-spacing:1.15px;}
.sidebar .collapse,.sidebar .icon-button {color:#d5e0f5;}
.sidebar .icon-button:hover {background:#293b59;}
.sidebar nav {padding:0 12px 14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#47607e transparent;}
.sidebar .nav-link {color:#b8c7dd;border:1px solid transparent;min-height:46px;border-radius:11px;font-weight:610;letter-spacing:.01em;}
.sidebar .nav-link:hover {background:#243652;color:#fff;}
.sidebar .nav-link.active {background:#eaf0ff;color:#1b3378;border-color:#dfe7fc;box-shadow:0 4px 12px #0a153422;}
.sidebar .nav-link.active .nav-symbol {color:#315ad4;}
.sidebar .nav-symbol {color:#879cbc;font-size:20px;}
.sidebar .nav-divider {background:#30405b;}
.sidebar-footer {color:#adbed5;border-top:1px solid #293853;padding:18px 24px;}
.sidebar .offline-dot {width:8px;height:8px;box-shadow:0 0 0 3px #274754;}
.sidebar .nav-count {background:#a6c2ff;color:#162e64;}
.topbar {background:#fff;border-bottom:1px solid var(--line);padding:0 34px;height:72px;box-shadow:0 2px 6px #14234107;}
.breadcrumbs {color:#6b7790;font-weight:630;letter-spacing:.015em;}
.save-chip {color:#2b805a;font-weight:660;}
.body-area main {max-width:1470px;padding:36px 39px 90px;}
.section-head {margin-bottom:23px;gap:18px;}
.section-head h1 {font-size:clamp(26px,2.5vw,34px);line-height:1.2;letter-spacing:-1.2px;color:#15243b;font-weight:790;}
.section-head p {color:#66748b;line-height:1.55;max-width:750px;}
.eyebrow {color:#4767ad;letter-spacing:1.2px;}
.card,.stat {background:#fff;border:1px solid var(--border);border-radius:17px;box-shadow:0 3px 12px #1c37520a;}
.card {padding:22px;}
.card h2 {color:#20314b;font-size:16px;letter-spacing:-.3px;}
.stat {padding:22px;}
.stat strong {color:#162846;font-weight:790;}
.stat small,.stat span,.muted {color:#69768c;}
.button {border:1px solid #d4ddeb;border-radius:10px;background:#fff;color:#263a57;font-weight:680;transition:background .15s,box-shadow .15s;}
.button:hover {background:#f0f4fb;box-shadow:0 3px 10px #20345c12;}
.button-dark {background:var(--school-blue);color:white;border-color:var(--school-blue);box-shadow:0 3px 11px #365dd821;}
.button-dark:hover {background:var(--school-blue-dark);color:#fff;}
.button-danger {color:#b43346;}
.button-small {font-size:12px;}
.tag {border:1px solid #e0e7f1;color:#41516b;background:#f7f9fc;border-radius:8px;}
.tag.urgent {background:#fff4e7;color:#965213;border-color:#f3dec6;}
.tag.good {background:#e9f7ef;border-color:#d4e9dc;color:#267349;}
.tag.bad {background:#fff0f1;border-color:#f3d9dc;color:#ab324a;}
.kpi-line,.list-item,.task-row {border-bottom-color:#eaf0f5;}
.subject-tile {min-height:165px;text-align:left;transition:transform .12s,box-shadow .15s;}
.subject-tile::before {left:16px;right:16px;top:0;height:4px;border-radius:0 0 6px 6px;}
.subject-tile:hover {transform:translateY(-2px);box-shadow:0 12px 28px #243d6720;}
.subject-tile h2 {font-size:19px;}
.subject-square {border-radius:13px;}
.tab {color:#6a7589;}
.tab.active {color:#315bd3;border-color:#315bd3;}
.tabs {border-bottom-color:#dfe6ef;scrollbar-width:thin;}
.field label {color:#3d4e68;font-weight:700;}
.field input,.field select,.field textarea {border:1px solid #cfd9e7;color:#172338;border-radius:11px;background:#fff;}
.field input:focus,.field textarea:focus,.field select:focus {border-color:#6380d9;}
.notice {background:#eef3fb;color:#435773;border:1px solid #e2e9f5;}
.empty {background:#f9fbff;border:1px dashed #cad6e8;color:#63738d;}
.empty strong {color:#273956;}
.day-tab.selected,.filter.active {background:#345cce;border-color:#345cce;color:white;}
.day-tab {border-color:#d4ddeb;color:#42516b;}
.schedule-wrap {border-color:#dce5ef;}
.day-head {background:#f2f5fb;}
.day-head.today {background:#315acf;color:#fff;}
.tick {border-color:#667a95;}
.tick.checked {background:#345dcf;border-color:#345dcf;}
.grade-circle {border-radius:12px;}
.modal {border-radius:18px;box-shadow:0 26px 80px #14213738;}
#toast {background:#15243b;border:1px solid #263955;box-shadow:0 10px 28px #08193133;}
#main.view-dashboard .section-head h1 {font-size:clamp(29px,3vw,38px);}
#main.view-dashboard>.grid:first-of-type .card {min-height:220px;}
@media(max-width:1100px) {
 .body-area main {padding:28px 24px 70px;}
 .topbar {padding:0 24px;}
}
@media(max-width:760px) {
 .sidebar {width:263px;flex-basis:263px;z-index:25;max-width:88vw;}
 .sidebar.mobile-visible {box-shadow:16px 0 50px #051a3359;}
 .sidebar.collapsed {width:263px;flex-basis:263px;}
 .topbar {height:64px;padding:0 14px;}
 .body-area main {padding:25px 15px 75px;}
 .section-head {align-items:flex-start;}
 .section-head h1 {font-size:27px;}
 .breadcrumbs {font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .card {padding:18px;}
 .stat {padding:16px;}
 .button {min-height:43px;}
 .field input,.field textarea,.field select {font-size:16px;}
 .week-toolbar {align-items:flex-start;}
 .top-actions .button {font-size:12px;padding:9px 11px;}
}
@media(prefers-reduced-motion:reduce){.button,.subject-tile{transition:none;}}

/* Keep compact status chips unbroken. */
.tag{white-space:nowrap;}

/* TikTok reference review: avoid AI-template visual cliches.
   No gradients, glassmorphism, dark UI, gratuitous icons, feature-box triplets,
   hover fades or decorative badge titles. Use a restrained warm editorial palette. */
:root {
  --bg:#f6f5f1; --ink:#222b29; --muted:#65716a; --line:#dedfd8;
  --soft:#eeefe9; --border:#e2e4dd; --shadow:none;
  --school-blue:#27594e; --school-blue-dark:#1d443c; --nav-bg:#f2f2ec;
  background:#f6f5f1;color:#222b29;
}
body {background:#f6f5f1;color:#222b29;}
.sidebar {background:#f0f1eb;color:#293831;border-right:1px solid #dfe3dc;box-shadow:none;}
.brand-mark {background:#27594e;box-shadow:none;border-radius:8px;}
.brand-mark span {color:#dbeee6;}
.brand-label {color:#233a31;}
.brand-label>span {color:#4b685e;}
.brand-label small {color:#7a897f;}
.sidebar .collapse,.sidebar .icon-button {color:#31483e;}
.sidebar .icon-button:hover {background:#e3e9e0;}
.sidebar .nav-link {color:#4c6056;border:0;border-radius:7px;min-height:43px;margin:2px 0;font-size:14px;}
.sidebar .nav-link:hover {background:#e3e9e0;color:#26493b;}
.sidebar .nav-link.active {background:#dce8dd;color:#17483b;border:0;box-shadow:none;}
.sidebar .nav-link.active .nav-symbol {color:#27594e;}
.sidebar .nav-symbol {display:none;}
.sidebar .nav-divider {background:#d9ded6;}
.sidebar .nav-count {background:#dbe9df;color:#285445;}
.sidebar-footer {color:#5d7568;border-top:1px solid #d9ded6;}
.sidebar .offline-dot {box-shadow:none;}
.topbar {background:#f6f5f1;border-color:#e3e4dd;box-shadow:none;}
.breadcrumbs,.save-chip {color:#66766c;}
.body-area main {max-width:1430px;}
.section-head h1 {color:#24332e;font-weight:760;}
.section-head p,.muted,.stat small,.stat span {color:#61746a;}
.eyebrow {color:#527267;}
.card,.stat {border-color:#e4e6df;box-shadow:none;border-radius:10px;}
.card h2 {color:#25372f;}
.button {color:#31483e;background:#fff;border-color:#cdd8cf;border-radius:7px;transition:none;box-shadow:none;}
.button:hover {color:#1a3b31;background:#f0f3ed;box-shadow:none;}
.button-dark {background:#27594e;color:#fff;border-color:#27594e;box-shadow:none;}
.button-dark:hover {background:#1d443c;color:#fff;box-shadow:none;}
.tag {border-color:#e1e6e0;background:#f7f8f5;color:#4e6759;}
.subject-tile {transition:none;}
.subject-tile::before {display:none;}
.subject-tile:hover {transform:none;box-shadow:none;border-color:#b4c8bd;}
.tabs {border-bottom-color:#dfe4dc;}
.tab.active {color:#27594e;border-color:#27594e;}
.field label {color:#43584b;}
.field input,.field textarea,.field select {border-color:#ccd6ce;color:#263c2f;border-radius:7px;}
.notice {background:#edf2ed;color:#415c4d;border-color:#d9e5db;}
.empty {background:#fcfcfa;color:#6a786e;border-color:#dce2d9;}
.empty strong {color:#2d4133;}
.day-tab.selected,.filter.active,.day-head.today {background:#27594e;color:white;border-color:#27594e;}
.grade-circle {border-radius:8px;}
.tick.checked {background:#27594e;border-color:#27594e;}
.modal {border-radius:10px;}
#toast {background:#263f34;border-color:#263f34;}
#main.view-dashboard .dashboard-grid {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;}
#main.view-dashboard .dashboard-grid>.card:nth-child(3) {grid-column:1/-1;}
@media(max-width:760px) {
 .sidebar.mobile-visible {box-shadow:12px 0 30px #1f352821;}
 #main.view-dashboard .dashboard-grid {grid-template-columns:1fr!important;}
 #main.view-dashboard .dashboard-grid>.card:nth-child(3) {grid-column:auto;}
}