:root{font-family:Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#182d37;background:#edf3f5;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}
#root{min-height:100vh}.splash{padding:6rem;text-align:center;font-size:2rem;font-weight:800;color:#163842}.splash span{color:#16aa9d}.splash small{display:block;color:#6f8990;font-size:.875rem;font-weight:400;margin-top:1rem}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#e1eff0,#f6f8f9)}
.auth-card{max-width:420px;width:100%;background:white;border:1px solid #dfe8ec;border-radius:20px;padding:32px;box-shadow:0 20px 70px #112b3814}.auth-logo{font-size:25px;font-weight:820;letter-spacing:-.7px}.auth-logo b{color:#0ba79a}.auth-card h1{font-size:24px;margin:36px 0 5px}.muted{color:#788d96}.auth-card p{font-size:14px;color:#7c919a;line-height:1.55}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.field input,.field select{border:1px solid #ccdadd;border-radius:9px;background:white;color:#203944;padding:12px;width:100%;outline-offset:2px}.field small{font-size:12px;color:#9aaeb3;font-weight:400}.stack{display:grid;gap:16px}.btn{padding:10px 15px;border:none;border-radius:9px;background:#079e92;color:white;font-weight:650;min-height:40px}.btn:hover{background:#078e85}.btn-secondary{background:#e7f2f0;color:#13776f}.btn-secondary:hover{background:#d5e8e4}.btn-ghost{background:transparent;color:#657e88;border:1px solid #dce5e7}.btn-ghost:hover{background:#eaf1f2}.btn-sm{padding:6px 10px;min-height:32px;font-size:12px}.auth-card .btn{width:100%;margin-top:7px}.notice{font-size:12px;line-height:1.55;padding:12px 14px;background:#f0f5f6;border-radius:10px;color:#5d7c85}.error{color:#b63b41;background:#fff0f0;padding:11px;border-radius:9px;font-size:13px;line-height:1.45}.success{color:#15756e;background:#e8f6f2;padding:10px 13px;border-radius:9px;font-size:13px}
.shell{min-height:100vh;display:grid;grid-template-columns:224px minmax(0,1fr)}.sidebar{background:#102d3a;color:#cfdee2;padding:25px 17px;display:flex;flex-direction:column;min-height:100vh}.logo{display:flex;gap:10px;align-items:center;color:white;font-size:18px;font-weight:790;letter-spacing:-.35px;margin:3px 0 35px;padding-left:10px}.logo-icon{width:32px;height:32px;border-radius:9px;background:#099c96;display:grid;place-items:center;font-weight:900;color:white}.nav{display:grid;gap:5px}.nav button{width:100%;display:flex;align-items:center;gap:13px;border:0;padding:13px 13px;border-radius:10px;color:#b5cad1;text-align:left;background:transparent;font-size:13px;font-weight:550}.nav button:hover{background:#254654}.nav button.active{background:#2a4d5b;color:white;font-weight:700}.nav .ico{font-size:17px;width:19px;text-align:center}.sidebar-foot{margin-top:auto;color:#95afba;padding:20px 12px 2px;border-top:1px solid #34505b;font-size:12px}.sidebar-foot strong{display:block;color:white;margin:6px 0}
.content{padding:30px 36px 60px;min-width:0;max-width:1500px;width:100%;margin:0 auto}.eyebrow{text-transform:uppercase;letter-spacing:.13em;color:#049f92;font-size:10px;font-weight:800}.top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:20px}.top h1{font-size:27px;letter-spacing:-.8px;margin:6px 0 3px}.top p{margin:0;color:#82949a;font-size:13px}.avatar{display:flex;align-items:center;justify-content:center;background:#d9f4ef;color:#16897d;width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:800}
.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.toolbar select,.toolbar input{background:white;border:1px solid #dbe4e6;color:#3e5965;border-radius:9px;padding:9px 10px;font-size:13px;min-height:38px}.period{margin:8px 0 20px;color:#718791;font-size:13px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:14px}.card,.panel{background:white;border:1px solid #dfe8ea;border-radius:13px;box-shadow:0 1px 2px #17323c05}.card{padding:20px}.card h3{font-size:12px;font-weight:500;color:#8b9fa5;margin:0 0 12px}.value{font-weight:790;letter-spacing:-.65px;font-size:26px;white-space:nowrap}.card .detail{font-size:12px;color:#139e91;margin-top:9px}.detail-muted{font-size:12px;color:#7b9097;margin-top:8px}.panels{display:grid;grid-template-columns:1.25fr 1fr;gap:13px;margin-top:14px}.panel{padding:20px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.panel h2{margin:0;font-size:15px;letter-spacing:-.2px}.tiny{color:#91a5ab;font-size:11px}.list{display:grid}.list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:13px 0;gap:14px;border-bottom:1px solid #edf1f2}.list-item:last-child{border:0}.list-item strong{font-size:13px}.list-item p{font-size:12px;color:#8da0a8;margin:5px 0 0}.time-row{display:flex;align-items:center;gap:14px}.time{font-size:12px;color:#839ba4;width:41px;flex-shrink:0}.chip{display:inline-flex;padding:6px 8px;border-radius:7px;font-size:11px;background:#e5f5f1;color:#168476;font-weight:700}.chip.pale{background:#edf2f4;color:#65818b}.chip.warn{background:#fcf2de;color:#9b7525}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.full{grid-column:1/-1}.empty{color:#79939d;font-size:13px;padding:25px 0;line-height:1.5}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}td,th{padding:13px 10px;border-bottom:1px solid #edf1f2;white-space:nowrap}th{color:#8ba0a7;font-size:11px;font-weight:600}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0;text-align:right}.mini-form{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.mini-form .field{gap:5px}.mini-form .full{grid-column:1/-1}.mini-form .btn{max-width:220px}.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.inline-feedback{min-height:30px}.section-legend{color:#8ba0a8;font-size:12px;margin-bottom:16px}.help{padding:15px;border-radius:10px;background:#f5f8f8;color:#67808b;font-size:12px;line-height:1.55;margin-top:12px}.section{margin-top:14px}.bottom-nav{display:none}.screen-message{margin:15px 0;color:#708992}.callout{padding:12px 14px;border-left:3px solid #219e90;background:#edf7f4;border-radius:4px;font-size:12px;line-height:1.55;color:#43696c}.loading{color:#789098;font-size:13px;padding:10px}
@media(max-width:1050px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.panels{grid-template-columns:1fr}.content{padding:24px}}
@media(max-width:760px){.shell{display:block}.sidebar{display:none}.content{padding:24px 15px 100px}.top h1{font-size:25px}.top{align-items:flex-start}.cards{gap:9px}.card{padding:16px 14px}.card h3{font-size:11px;line-height:1.4}.value{font-size:21px}.panels{margin-top:9px;gap:10px}.panel{padding:16px}.bottom-nav{position:fixed;display:flex;bottom:0;left:0;right:0;background:white;border-top:1px solid #d8e4e6;justify-content:space-around;padding:7px max(5px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom));z-index:9;box-shadow:0 -4px 14px #0929340e}.bottom-nav button{border:0;background:transparent;color:#76909a;display:grid;gap:3px;font-size:10px;min-width:54px;padding:5px}.bottom-nav button.active{color:#079d90;font-weight:700}.bottom-nav .ico{font-size:20px}.mini-form{grid-template-columns:1fr}.mini-form .full{grid-column:auto}.toolbar{gap:6px}.toolbar select{max-width:160px}.desktop-only{display:none}}
@media(max-width:380px){.cards{grid-template-columns:1fr 1fr}.value{font-size:19px}.auth-card{padding:22px}.panel{padding:13px}}
/* v0.7: compact roster and recurring schedule forms */
.form-subtitle{font-size:13px;margin:14px 0;color:#526d77}
.member-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;background:#f4f8f8;border:1px solid #dfebeb;border-radius:10px;margin:9px 0}
.member-row .full{grid-column:1/-1}.member-row .field input,.member-row .field select{width:100%}
.form-actions{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap}.form-actions .btn{max-width:none}
.rename-form{grid-column:1/-1;width:100%;padding:12px;border-radius:10px;background:#f4f8f8}
@media(max-width:760px){.member-row{grid-template-columns:1fr}.member-row .full{grid-column:auto}}

.top-actions{display:flex;align-items:center;gap:10px}.top-logout{font-size:11px;padding:5px 9px;min-height:30px}
@media(max-width:760px){.bottom-nav button{min-width:0;flex:1;padding:5px 1px;font-size:9px}.bottom-nav .ico{font-size:18px}}

/* v0.9: do not compress lesson names behind action buttons on narrow screens. */
.lesson-entry>.move-lesson-form{grid-column:1/-1;width:100%;padding:12px;background:#f4f8f8;border-radius:10px}
@media(max-width:760px){.lesson-entry{grid-template-columns:minmax(0,1fr)}.lesson-entry>.row-actions{justify-content:flex-start}.lesson-entry .time-row{align-items:flex-start}.lesson-entry .time-row>div{min-width:0}}

/* v1.1: editable recurring-schedule card, desktop and narrow screens */
.schedule-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}.shift-schedule-form{margin-top:9px;padding:13px;border:1px solid #dce9e8;border-radius:10px;background:#f8fbfa}.shift-schedule-form .help{margin:0}.list-item:has(.shift-schedule-form){align-items:start}
@media(max-width:760px){.schedule-actions{justify-content:flex-start}.list-item:has(.shift-schedule-form){grid-template-columns:1fr}.shift-schedule-form{grid-column:1;width:100%;min-width:0}}

/* v1.2: on narrow screens the schedule label keeps its own row;
   action buttons and the roster editor never crush the pupil text. */
.roster-schedule-form{margin-top:9px;padding:13px;border:1px solid #dce9e8;border-radius:10px;background:#f8fbfa}
.roster-schedule-form .help{margin:0}
.schedule-item:has(.roster-schedule-form){align-items:start}
@media(max-width:760px){
 .schedule-item{grid-template-columns:minmax(0,1fr)}
 .schedule-item>div:first-child{min-width:0;overflow-wrap:anywhere}
 .schedule-item .schedule-actions{justify-content:flex-start}
 .roster-schedule-form{grid-column:1;min-width:0;width:100%}
}