:root {
  color-scheme: light;
  --navy: #14283f;
  --navy-dark: #102033;
  --text: #172b40;
  --muted: #718096;
  --line: #e4eaf0;
  --surface: #fff;
  --bg: #f4f7fa;
  --teal: #087f73;
  --teal-soft: #e0f4ee;
  --amber: #aa6920;
  --amber-soft: #fff1de;
  --red: #bd4150;
  --blue-soft: #e6effa;
  --shadow: 0 12px 40px rgba(22,42,64,.065);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #70c7b8; outline-offset: 3px;
}
button:focus:not(:focus-visible) { outline: none; }
button, input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
button, .stat-card, .panel, .person-card { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.app-layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: linear-gradient(165deg,#172e48 0%,#11253a 74%,#112a3e 100%); color: white; padding: 30px 22px; display: flex; flex-direction: column; gap: 30px; position: relative; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-square { display: grid; place-items: center; width: 48px; height: 48px; background: #31c3a2; color:#0d3341; font-size: 18px; font-weight: 900; letter-spacing: -.9px; border-radius: 13px; }
.brand-name { font-size: 16px; line-height: 1.1; font-weight: 750; letter-spacing: -.4px; }
.brand-sub { color: #9eb1c4; font-size: 12px; margin-top: 4px; }
.side-section-label { color: #849cb3; letter-spacing: 1.7px; text-transform: uppercase; font-weight: 700; font-size: 10px; margin: 10px 12px 4px; }
.side-link { background: #ffffff11; border: 1px solid #ffffff17; color: #fff; border-radius: 12px; padding: 13px 14px; text-align: left; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; }
.side-link .side-icon { font-size: 19px; }
.side-note { color: #a8bdce; font-size: 12px; line-height: 1.7; margin: auto 5px 0; padding-top: 30px; }
.side-note strong { color:#e8f4fa; }
.main { width:100%; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 28px clamp(20px,3.3vw,60px) 50px; }
.topbar { display:flex; align-items: center; justify-content: space-between; gap:20px; margin-bottom: 29px; }
.crumbs { color: #8696a7; letter-spacing: .2px; font-size: 12px; font-weight: 650; }
.top-user { display: flex; align-items:center; gap: 12px; }
.avatar { width:38px; height:38px; border-radius: 12px; background: #e0eaf2; color:#315370; display:grid;place-items:center;font-weight:800;font-size:13px; }
.user-meta strong { display:block; font-size:13px; }
.user-meta span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.top-logout { border: 1px solid var(--line); background:#fff; border-radius: 10px; padding: 10px 12px; color:#526579; font-size:12px; font-weight: 650; }
.greeting { display: flex; justify-content: space-between; align-items: end; gap:20px; margin-bottom: 22px; }
.eyebrow { color:var(--teal); text-transform: uppercase; font-size: 10px; letter-spacing: 2.3px; font-weight:800; margin:0 0 9px; }
h1 { font-size: clamp(24px, 2.7vw, 34px); line-height:1.19; letter-spacing:-1.1px; margin:0 0 10px; font-weight:790; }
.greeting p { color:var(--muted); margin:0; font-size:13px; line-height:1.65; }
.badge-demo { display: inline-flex; align-items:center; gap:8px; background:#eaf0f6; color:#425b73; border:1px solid #d6e1ec; border-radius:20px; padding: 9px 12px; font-size:11px; font-weight:740; white-space: nowrap; }
.badge-demo::before { content:""; width:7px;height:7px;border-radius:50%;background:#c88f42; }
.demo-toolbar { display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; background:#eaf2f9; border:1px solid #d8e6f2; padding: 12px 17px; border-radius:13px; margin-bottom:23px; }
.demo-toolbar p { font-size:12px;color:#506c84;line-height:1.5;margin:0; }
.demo-toolbar strong { color:#28445f; }
.demo-actions { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
.demo-actions select { border:1px solid #bdcfe0; border-radius:9px; padding:9px 10px;background:white;color:#28445f;font-size:12px;max-width:215px; }
.ghost-link { border:none;background:transparent;color:#456e96;font-size:12px;font-weight:720;padding:9px 2px; }
.weekbar { display:flex; align-items:center; justify-content:space-between;flex-wrap:wrap;gap:14px; margin:25px 0 23px; }
.section-title { margin:0 0 6px; font-size:18px; font-weight:780;letter-spacing:-.4px; }
.section-sub { color:var(--muted);font-size:12px;margin:0; }
.week-actions { display:flex; gap:9px;align-items:center; flex-wrap:wrap; }
.arrow-btn { background:var(--surface);border:1px solid var(--line);height:40px;width:40px;border-radius:11px;font-size:21px;line-height:1;color:#415a73; }
.week-label { padding:10px 13px; background:white;border:1px solid var(--line);border-radius:11px;font-size:12px;font-weight:750;min-width:220px;text-align:center; }
.date-jump { position:relative;display:inline-flex;align-items:center; gap:7px;padding: 7px 10px;background:white;border:1px solid var(--line);border-radius:11px; font-size:12px;color:#526579; }
.date-jump input {width:119px; font-size:12px;color:var(--text);border:none;outline:none;background:none; }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:11px;padding:12px 17px;font-size:12px; font-weight:780;text-decoration:none;white-space:nowrap; }
.btn-primary { background:#097f73;color:#fff;box-shadow:0 7px 16px rgba(9,127,115,.15); }
.btn-primary:hover { background:#056e64; }
.btn-secondary { background:#fff;color:#37546b;border:1px solid #dce4ec; }
.btn-secondary:hover { background:#f6f9fc; }
.btn-danger { background:#fff;color:#b34352;border:1px solid #f0c8cf; }
.btn-danger:hover { background:#fff5f6; }
.stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:21px 0 23px; }
.stat-card { background:var(--surface);border:1px solid #e8edf2;border-radius:16px;padding:20px;box-shadow:var(--shadow);min-height:142px; }
.stat-kicker { display:flex;align-items:center;gap:10px;font-size:11px;color:#6b7d90;font-weight:700; }
.stat-dot { width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#e7edf3;color:#648096;font-size:13px; }
.stat-dot.green { background:var(--teal-soft);color:var(--teal); }
.stat-dot.amber { background:var(--amber-soft);color:var(--amber); }
.stat-dot.blue { background:#e6effa;color:#345e91; }
.stat-number {font-size: 32px;line-height:1.1;font-weight:820;letter-spacing:-1px;margin:19px 0 3px;font-variant-numeric:tabular-nums; }
.stat-foot {font-size:11px;color:#95a2af;line-height:1.5; }
.panel { background:white;border:1px solid #e6ebf0;border-radius:16px;box-shadow:var(--shadow);padding:21px; }
.panel + .panel { margin-top:18px; }
.panel-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px; }
.panel-heading h2 { margin:0;font-size:16px;letter-spacing:-.3px; }
.panel-heading p { margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.55; }
.person-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:0 0 22px; }
.person-card { background:white;border:1px solid #e6ebf0;border-radius:16px;padding:21px;box-shadow:var(--shadow); }
.person-head { display:flex;gap:11px;align-items:center;margin-bottom:18px; }
.person-name { font-size:14px;font-weight:780;line-height:1.4; }
.person-sub { margin-top:4px;color:var(--muted);font-size:11px; }
.person-metrics { display:grid;grid-template-columns:1fr 1fr 1fr; gap:9px;border-top:1px solid #eef1f4;padding-top:15px; }
.person-metrics strong { display:block;font-size:22px;font-variant-numeric:tabular-nums; }
.person-metrics span { color:var(--muted);font-size:10px;line-height:1.4; }
.person-progress { height:6px;background:#edf1f5;border-radius:5px;overflow:hidden;margin-top:17px;display:flex; }
.progress-on { background:#0a917d; }
.progress-off { background:#e8a65e; }
.table-scroll {overflow-x:auto;}
table { width:100%;border-collapse:collapse;text-align:left;white-space:nowrap; }
thead th { color:#8494a4;font-size:10px;text-transform:uppercase;letter-spacing:.9px;font-weight:800;padding:14px 12px;border-bottom:1px solid #edf1f5;background:#f8fafc; }
tbody td {padding:16px 12px;border-bottom:1px solid #f0f3f6;color:#4c6173;font-size:12px;vertical-align:middle;}
tbody tr:last-child td {border-bottom:0;}
tbody .name-cell { font-weight:780;color:#253d52; }
tbody .name-cell small {display:block;font-size:10px;font-weight:500;color:#90a0b0;margin-top:4px; }
.tot-cell { text-align:center;font-weight:800;color:#263d50;font-variant-numeric:tabular-nums; }
.status-pill { display:inline-flex;align-items:center;gap:6px;white-space:normal;line-height:1.3;padding:7px 9px;border-radius:9px;font-size:10px;font-weight:750;max-width:130px; }
.status-pill.reg {background:#def4ec;color:#067e68;}
.status-pill.sem {background:#fff0da;color:#a5661a;}
.status-pill.blank {background:#f0f3f7;color:#9ca9b5;}
.status-pill.future {background:#f7f9fb;color:#aeb8c0;}
.status-pill::before {content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.legend {display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:15px;font-size:11px;color:#8190a1; }
.legend span {display:inline-flex;align-items:center;gap:6px; }
.legend i {width:8px;height:8px;border-radius:50%;background:#aaa; }
.legend .lg-reg {background:#08836f;}.legend .lg-sem {background:#d38b37;}.legend .lg-pend {background:#a1aebb;}
.staff-columns {display:grid;grid-template-columns:minmax(280px, .84fr) minmax(0,1.16fr);gap:19px;align-items:start; }
.input-label {display:block;font-size:12px;font-weight:770;color:#30485f;margin:18px 0 9px;}
.input-label:first-child {margin-top:0;}
.field {width:100%;background:#fff;border:1px solid #dce5ed;border-radius:10px;padding:12px 13px;color:#284159;font-size:13px; }
textarea.field {resize:vertical;min-height:108px;line-height:1.6;}
.field-hint {font-size:10px;line-height:1.6;color:#8798aa;margin-top:8px; }
.choice-list {display:flex;flex-direction:column;gap:10px;}
.choice {display:flex;align-items:center;gap:12px;border:1px solid #e4eaf0;border-radius:12px;padding:15px;cursor:pointer;position:relative; }
.choice:has(input:checked) { border-color:#17a994;background:#f4fffb;box-shadow:0 0 0 1px #90ddce; }
.choice.choice-amber:has(input:checked) {border-color:#dfa355;background:#fffbf4;box-shadow:0 0 0 1px #f5d1a5;}
.choice input {accent-color:#0a8876;width:16px;height:16px;flex-shrink:0;}
.choice strong {display:block;font-size:12px;margin-bottom:4px;}
.choice small {display:block;font-size:11px;color:#8594a5;line-height:1.45;}
.form-actions {display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap;}
.day-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;}
.day-button {display:flex;flex-direction:column;gap:8px;text-align:left;background:#fbfcfe;border:1px solid #e8edf2;border-radius:12px;padding:15px 10px;min-height:140px; }
.day-button:hover:not(:disabled) {border-color:#a4c6d2;background:#f8fcfc;}
.day-button.active {border:2px solid #108e7b;background:#f4fbf9;padding:14px 9px;}
.day-button:disabled {opacity:.63;}
.day-name {font-size:10px;letter-spacing:1px;color:#8b9cac;font-weight:790;text-transform:uppercase;}
.day-num {font-size:24px;letter-spacing:-.9px;color:#273d50;font-weight:800;}
.day-state {font-size:10px;line-height:1.4;font-weight:770;color:#8da0af;margin-top:auto;}
.day-state.reg {color:#05816e;}.day-state.sem {color:#a96d20;}
.callout {background:#f7fafc;border:1px solid #e8eef3;border-radius:12px;padding:15px 16px;margin-top:16px;color:#597083;font-size:11px;line-height:1.7;}
.callout strong {color:#263d51;}
.empty {padding:24px;text-align:center;color:#7c8c9b;font-size:12px;line-height:1.65;}
.footer {font-size:11px;color:#98a6b4;text-align:center;margin:31px 0 0; }
.toast { position:fixed;z-index:30;bottom:24px;right:24px;max-width:min(440px,calc(100vw - 32px));background:#19384a;color:white;padding:14px 18px;border-radius:12px;font-size:12px;line-height:1.6;box-shadow:0 16px 40px #132f4250;opacity:0;transform:translateY(12px);pointer-events:none;transition:all .2s ease; }
.toast.show {opacity:1;transform:none;}
.toast.error {background:#a73d4d;}
.loading-screen {display:flex;min-height:90vh;align-items:center;justify-content:center;gap:13px;color:#708296;font-size:13px;}
.spinner {height:18px;width:18px;border-radius:50%;border:2px solid #d4e5ea;border-top-color:#087f73;animation:spin .7s linear infinite;}
@keyframes spin { to {transform:rotate(360deg);} }
.login-screen {min-height:100vh;background:linear-gradient(125deg,#11263d 0%,#193b53 100%);display:grid;place-items:center;padding:24px;}
.login-card {background:white;border-radius:22px;padding:37px;box-shadow:0 28px 80px #061a284d;width:100%;max-width:435px;}
.login-card .brand {margin-bottom:33px;}
.login-card h1 {font-size:27px;letter-spacing:-.8px;}
.login-card p {font-size:12px;line-height:1.7;color:#78899b;margin:0 0 26px;}
.login-card label {font-size:12px;font-weight:700;color:#365067;display:block;margin:15px 0 8px;}
.login-card .btn-primary {width:100%;margin-top:20px;min-height:44px;}
.login-note {font-size:10px;line-height:1.8;color:#99a8b6;margin-top:24px;padding-top:16px;border-top:1px solid #edf2f6;}
.error-message {background:#fff2f3;color:#a03242;border:1px solid #ffd3da;border-radius:11px;padding:12px 14px;font-size:12px;line-height:1.5;margin:18px 0;}
@media (max-width: 1180px) {
  .app-layout {grid-template-columns:205px minmax(0,1fr);}
  .sidebar {padding:26px 16px;}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));}
  .person-grid {grid-template-columns:1fr;}
  .person-metrics {grid-template-columns:repeat(3,1fr);}
  .staff-columns {grid-template-columns:1fr;}
}
@media (max-width: 750px) {
  .app-layout {display:block;}
  .sidebar {padding:13px 19px;display:block;}
  .brand-square {width:36px;height:36px;font-size:13px;border-radius:9px;}
  .brand-name {font-size:14px;}
  .sidebar .side-section-label,.sidebar .side-link,.sidebar .side-note {display:none;}
  .main {padding:21px 16px 38px;}
  .topbar {margin-bottom:24px;}
  .crumbs {font-size:10px;}
  .user-meta {display:none;}
  .top-user {gap:6px;}
  .avatar {width:32px;height:32px;}
  .top-logout {padding:9px;font-size:11px;}
  .greeting {align-items:start;flex-direction:column;}
  .badge-demo {white-space:normal;}
  .stats {gap:10px;}
  .stat-card {padding:15px;min-height:126px;}
  .stat-number {font-size:29px;}
  .weekbar {align-items:start;}
  .week-actions {width:100%;}
  .week-label {min-width:0;flex:1;}
  .date-jump {width:100%;justify-content:space-between;}
  .date-jump input {width:auto;flex:1;}
  .panel {padding:16px;}
  .day-grid {gap:5px;}
  .day-button {padding:10px 6px;min-height:132px;}
  .day-button.active {padding:9px 5px;}
  .day-name,.day-state {font-size:9px;}
  .day-num {font-size:20px;}
  .person-card {padding:16px;}
  .login-card {padding:27px;}
}
@media (max-width: 400px) {
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-kicker {font-size:10px;}
  .stat-number {font-size:25px;}
  .day-state {word-break:normal;}
}