/* EasyKids shared brand system — staff and parent workspaces. */
@font-face{font-family:'LINE Seed Sans TH';src:url('/assets/fonts/LINESeedSansTH-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'LINE Seed Sans TH';src:url('/assets/fonts/LINESeedSansTH-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#080d13;--surface:#10171f;--raised:#172431;--border:#2a3b4c;--text:#edf3fa;--muted:#a3b3c4;--cyan:#49c8f2;--violet:#a98bfa;--green:#8af0c3;--radius:14px;font-family:'LINE Seed Sans TH',Tahoma,sans-serif;font-size:15px;color:var(--text);background:var(--bg)}
body{min-height:100vh;background:radial-gradient(circle at 8% -5%,#49c8f21a,transparent 30rem),radial-gradient(circle at 92% 3%,#a98bfa12,transparent 32rem),linear-gradient(180deg,#09111a,#080d13);background-attachment:fixed;line-height:1.6}
button,input,select,textarea{font:inherit}button{min-height:42px;border:1px solid #4086b5;border-radius:8px;background:linear-gradient(135deg,#2c91ca,#3973cf);padding:10px 16px;font-weight:700;line-height:1.4;color:#fff;transition:background .15s,border-color .15s,box-shadow .15s}button:hover:not(:disabled){filter:none;border-color:#80cdea;box-shadow:0 4px 16px #1676b528}button.secondary,button.text{border:1px solid #34495a;background:#18222c;color:#dceaf5}button.small{min-height:34px;padding:6px 10px;font-size:13px}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #b9eaff;outline-offset:3px}a,summary{color:#80cdea;text-underline-offset:4px}h1,h2,h3{color:#f5f9ff;letter-spacing:-.025em;line-height:1.45}h1{font-size:28px;font-weight:700}h2{font-size:19px}h3{font-size:16px}.muted,.empty{color:var(--muted)}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:.08em}.brand{display:block;line-height:1;letter-spacing:normal}.brand-logo{display:block;width:172px;height:69px;object-fit:contain;object-position:left center}.subtitle,.tag{font-size:10px;letter-spacing:.15em;color:#91a8bd}.subtitle{margin:12px 0 28px}.auth .brand-logo{width:195px;height:78px}.auth{background:linear-gradient(145deg,#152231,#10171f 75%);border:1px solid #34495a;border-radius:18px;box-shadow:0 24px 80px #0005;padding:36px}.auth:before{content:'';display:block;height:3px;width:48px;background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:3px;margin-bottom:24px}.auth p{margin-bottom:22px}.auth h2{margin-top:24px}
aside{width:252px;padding:26px 18px 18px;background:#0b121bf2;border-right:1px solid var(--border);overflow-y:auto}aside .brand,aside .subtitle{margin-left:12px}nav{gap:5px}nav button{display:flex;align-items:center;gap:12px;min-height:44px;padding:11px 13px;border:1px solid transparent;color:#a3b3c4;background:transparent;font-size:14px;text-align:left}nav button.active{background:linear-gradient(110deg,#49c8f21c,#548cff14);border-color:#2e526c;color:#dff7ff;box-shadow:inset 3px 0 var(--cyan)}nav button:hover:not(:disabled){background:#152332;box-shadow:none}.nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.85}.foot{padding:18px 12px 0;border-top:1px solid var(--border);color:var(--muted)}.foot strong{color:var(--text)}.foot button{margin-top:12px}main{margin-left:252px;padding:30px 36px 60px;max-width:1760px;min-width:0}header{border-color:var(--border);padding-bottom:24px;margin-bottom:28px}.page-heading{margin-bottom:26px;align-items:flex-start}.page-heading p{color:var(--muted)}
.stat,.panel,.class-card,.card{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,#121c27,#10171f 75%);box-shadow:0 8px 24px #0000001f;padding:24px}.stats{gap:16px}.stat{position:relative;background:linear-gradient(145deg,#172431,#141e28);overflow:hidden}.stat:before{content:'';display:block;width:28px;height:3px;border-radius:3px;background:var(--cyan);margin-bottom:16px}.stat:nth-child(2):before{background:var(--violet)}.stat:nth-child(3):before{background:var(--green)}.stat:nth-child(4):before{background:#f2b84b}.stat:nth-child(2),.stat.light{background:linear-gradient(145deg,#1b253b,#141e28);border-color:#394465;color:var(--text)}.stat label,.stat:nth-child(2) label,.stat:nth-child(2) .muted{color:var(--muted)}.stat .value,.stat strong{font-size:32px;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#f5f9ff}.class-card{border-top:2px solid #426887}.class-card .muted{font-size:13px}.class-card form{flex-wrap:wrap}.class-card form select{flex:1;min-width:150px}.panel-title{gap:16px}.panel-title h2{margin:0}.list-item,.item,.report-section,.lesson-picker{border-color:#253546}.list-item,.item{padding-top:18px;padding-bottom:18px}.empty{padding:40px 20px;font-size:14px}table{font-size:14px}th{background:#101e2b;color:#91cce7;font-weight:700;font-size:12px}td,th{padding:16px 14px;border-color:#253546}tbody tr:hover{background:#49c8f208}.badge{border:1px solid #27835f;background:#10372b;color:#8af0c3;padding:4px 9px;border-radius:6px;font-size:12px;font-weight:700}.badge.warning,.badge.pending{border-color:#745b2e;background:#302714;color:#f1ca79}.badge.rejected{border-color:#814254;background:#321b24;color:#f2a2b5}.notice{border:1px solid #68512b;border-left:3px solid #f2b84b;background:#292313;color:#f1d39a;border-radius:8px}.success{background:#10372b;border:1px solid #27835f;color:#a0edc6}.error{color:#ffa7b9}
label.field,.field{font-size:13px;color:#bdcbd9;gap:8px}input,select,textarea{min-height:44px;background:#0b141d;color:var(--text);border:1px solid #344b60;border-radius:8px;padding:11px 12px;max-width:100%}input::placeholder,textarea::placeholder{color:#7f94a8}input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:0;box-shadow:0 0 0 3px #49c8f221}input[readonly],select:disabled{background:#141e28;color:#a4b4c3}input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--cyan)}input[type=file]{font-size:13px}input::file-selector-button{font:inherit;background:#223449;color:#dceaf5;border:0;border-radius:5px;padding:6px 9px;margin-right:10px}dialog{background:#101923;color:var(--text);border:1px solid #3b5267;border-radius:16px;padding:28px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#030811c9;backdrop-filter:blur(5px)}.view-filters,.report-filters{background:#0d1722;border:1px solid #2b4053;border-radius:10px;padding:16px}.report-filters{gap:16px}.form-actions{padding-top:12px}.qr{background:#fff;border:8px solid #fff;border-radius:10px}.student-avatar,.avatar.photo{border-color:#3b5267}.avatar{background:#173449;color:#9be3ff}.document-link{background:#173449;color:#a9e8ff;border:1px solid #315f80}.learning-photos img{border:1px solid #344b60}#toast,#message{background:#173449;border:1px solid #4086b5;color:#edf7ff;box-shadow:0 12px 40px #0006}
.lesson-calendar{background:#0c151f;border-color:#2b4053}.calendar-weekday,.calendar-legend{color:#a3b3c4}.calendar-day{background:#182431;color:#a0b3c5;border:2px solid transparent;min-height:40px}.calendar-day.scheduled{background:#103d30;color:#8af0c3;border-color:#275b48}.calendar-day.future.scheduled{background:#182431;color:#a0b3c5;border-color:transparent}.calendar-day.today{border-color:#d69b36}.calendar-day.selected{background:#176b8b!important;color:#effcff!important;border-color:#80cdea;box-shadow:0 0 0 2px #0c151f inset}.calendar-day.future.selected{background:#263442!important;color:#bdcbd9!important;border-color:#6b8399;box-shadow:none}.legend-dot{background:#8af0c3}.attendance-control{width:205px}.status-present{background:#103d30;color:#8af0c3;border-color:#27835f}.status-absent{background:#421e29;color:#ffabb9;border-color:#a54860}.status-pending{background:#182431;color:#bdcbd9;border-color:#344b60}
/* Parent portal uses the same components in a compact, touch-friendly shell. */
body.parent-portal header{background:#0b121bf2;border-bottom:1px solid var(--border);padding:18px max(20px,calc((100vw - 920px)/2));margin:0;backdrop-filter:blur(14px)}body.parent-portal header .brand-logo{width:142px;height:57px}body.parent-portal main{max-width:920px;margin:auto;padding:32px 24px 72px}body.parent-portal .auth{margin:28px auto;max-width:460px}body.parent-portal .tabs{background:#09111af5;border-bottom:1px solid var(--border);padding:10px 0;scrollbar-width:thin}body.parent-portal .tabs button{background:#15212e;color:#a3b3c4;border-color:#2a3b4c}body.parent-portal .tabs button.active{background:#173449;color:#b9eaff;border-color:#4086b5}body.parent-portal input,body.parent-portal select{font-size:16px}body.parent-portal .stat{padding:20px}body.parent-portal .child{gap:12px}body.parent-portal .intro{margin-bottom:28px}
@media(max-width:1100px){aside{width:220px}main{margin-left:220px;padding:26px 24px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid,.settings-grid{grid-template-columns:1fr}}
@media(max-width:700px){aside{position:static;width:auto;padding:18px 16px;border-right:0;border-bottom:1px solid var(--border)}aside .brand,aside .subtitle{margin-left:0}.brand-logo{width:142px;height:57px}.subtitle{margin:8px 0 18px}nav{display:flex;overflow-x:auto;padding:2px 0 10px;gap:6px}nav button{flex-shrink:0;text-align:left;min-height:44px;padding:10px 12px;white-space:nowrap;font-size:13px}nav button.active{box-shadow:none}.nav-icon{width:16px;height:16px}.foot{display:none}main{margin:0;padding:24px 16px 48px}header{flex-wrap:wrap;gap:12px;padding-bottom:18px;margin-bottom:24px}header select{min-width:0;max-width:100%;width:100%}h1{font-size:24px}.page-heading{flex-wrap:wrap;gap:14px}.panel,.class-card,.card{padding:18px}.stats{gap:12px}.stat{padding:18px}.stat .value,.stat strong{font-size:27px}.actions{flex-wrap:wrap;gap:8px}.auth{margin:24px 16px;padding:26px}.class-grid{grid-template-columns:1fr}.attendance-control{width:160px}.attendance .list-item{gap:10px}.view-filters .field,.view-filters .search-field{min-width:0;flex-basis:100%}.report-filters .field{min-width:0;width:100%}dialog{padding:20px}.calendar-day{padding:8px 0;min-height:38px}body.parent-portal header{padding:14px 16px}body.parent-portal main{padding:24px 16px 60px}body.parent-portal .auth{margin:16px 0}body.parent-portal .children{grid-template-columns:1fr}body.parent-portal .card{padding:20px}body.parent-portal header button{font-size:13px}.section-title{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* Theme selector stays outside the app roots so navigation preserves it. */
.theme-controls{position:fixed;right:20px;bottom:max(18px,env(safe-area-inset-bottom));z-index:4;display:flex;gap:3px;padding:4px;border:1px solid var(--border);border-radius:12px;background:#101923f5;box-shadow:0 6px 24px #0004}.theme-controls button{display:flex;align-items:center;gap:7px;padding:8px 11px;min-height:36px;border:1px solid transparent;background:transparent;color:#a3b3c4;font-size:12px;box-shadow:none}.theme-controls button[aria-pressed=true]{background:#173449;color:#b9eaff;border-color:#4086b5}.theme-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#toast,#message{bottom:82px}main,body.parent-portal main{padding-bottom:100px}
:root[data-theme=light]{color-scheme:light;--bg:#f4f7fb;--surface:#fff;--raised:#edf3fa;--border:#dce5ef;--text:#22364b;--muted:#5c7085;--cyan:#176b8b;--violet:#7458ba;--green:#237a55}
[data-theme=light] body{background:radial-gradient(circle at 8% -5%,#49c8f210,transparent 30rem),radial-gradient(circle at 92% 3%,#a98bfa0b,transparent 32rem),#f4f7fb}
[data-theme=light] :is(h1,h2,h3){color:#142e46}[data-theme=light] :is(a,summary){color:#176b8b}[data-theme=light] .brand-logo{filter:invert(1)}[data-theme=light] :is(.subtitle,.tag){color:#597187}
[data-theme=light] :is(.auth,.panel,.card,.class-card,dialog){background:#fff;border-color:#dce5ef;box-shadow:0 8px 28px #203b5710}[data-theme=light] .auth{box-shadow:0 20px 60px #203b5712}[data-theme=light] .class-card{border-top-color:#68a3c4}[data-theme=light] .stat,[data-theme=light] .stat.light{background:linear-gradient(145deg,#fff,#f2f7fc);color:#22364b;border-color:#dce5ef}[data-theme=light] .stat:nth-child(2){background:linear-gradient(145deg,#f3f0fb,#faf9ff);border-color:#ded7ed}[data-theme=light] :is(.stat .value,.stat strong){color:#142e46}
[data-theme=light] aside{background:#fff;border-color:#dce5ef}[data-theme=light] nav button{background:transparent;color:#5c7085}[data-theme=light] nav button.active{background:linear-gradient(110deg,#e5f3fb,#eef1ff);border-color:#bbd8ec;color:#145c85}[data-theme=light] nav button:hover:not(:disabled){background:#edf4fb}[data-theme=light] .foot{border-color:#dce5ef}[data-theme=light] .foot strong{color:#22364b}
[data-theme=light] button.secondary,[data-theme=light] button.text{border-color:#cddce9;background:#edf3f9;color:#315675}[data-theme=light] :is(button,a,summary):focus-visible{outline-color:#176b8b}[data-theme=light] :is(input,select,textarea){background:#fff;color:#22364b;border-color:#c5d5e4}[data-theme=light] :is(input[readonly],select:disabled){background:#edf2f7;color:#5c7085}[data-theme=light] :is(input,textarea)::placeholder{color:#73869a}[data-theme=light] :is(label.field,.field){color:#4a6178}[data-theme=light] :is(input,select,textarea):focus{border-color:#2585b4;box-shadow:0 0 0 3px #2585b41c}[data-theme=light] input::file-selector-button{background:#e8f1f9;color:#315675}
[data-theme=light] :is(.list-item,.item,.report-section,.lesson-picker,td,th){border-color:#e2eaf2}[data-theme=light] th{background:#edf4fa;color:#315f80}[data-theme=light] tbody tr:hover{background:#f4f9fd}[data-theme=light] :is(.view-filters,.report-filters){background:#f8fafd;border-color:#dce5ef}[data-theme=light] .badge{background:#e8f8f0;border-color:#9bd9bf;color:#116f4f}[data-theme=light] :is(.badge.warning,.badge.pending){background:#fff5df;border-color:#e6ca8c;color:#805500}[data-theme=light] .badge.rejected{background:#fff0f3;border-color:#e9b3bf;color:#9f354d}[data-theme=light] .notice{background:#fff8e9;border-color:#ead7a7;border-left-color:#d69b36;color:#805b19}[data-theme=light] .success{background:#e8f8f0;border-color:#9bd9bf;color:#116f4f}[data-theme=light] .error{color:#ae3150}
[data-theme=light] .document-link,[data-theme=light] .avatar{background:#e7f3fb;color:#176b8b;border-color:#bbd8ec}[data-theme=light] :is(.student-avatar,.avatar.photo,.learning-photos img){border-color:#dce5ef}[data-theme=light] .lesson-calendar{background:#f8fafd;border-color:#dce5ef}[data-theme=light] .calendar-day{background:#edf2f7;color:#526b82}[data-theme=light] .calendar-day.scheduled{background:#e0f4eb;border-color:#acd9c4;color:#126546}[data-theme=light] .calendar-day.future.scheduled{background:#edf2f7;color:#526b82;border-color:transparent}[data-theme=light] .calendar-day.today{border-color:#d69b36}[data-theme=light] .calendar-day.selected{background:#176b8b!important;color:#fff!important;border-color:#176b8b;box-shadow:0 0 0 2px #fff inset}[data-theme=light] .calendar-day.future.selected{background:#e2eaf2!important;color:#526b82!important;border-color:#8da5bb;box-shadow:none}[data-theme=light] .status-present{background:#e0f4eb;border-color:#acd9c4;color:#126546}[data-theme=light] .status-absent{background:#fff0f3;border-color:#e9a9b7;color:#a32240}[data-theme=light] .status-pending{background:#edf2f7;border-color:#c5d5e4;color:#526b82}
[data-theme=light] body.parent-portal header{background:#ffffffed;border-color:#dce5ef}[data-theme=light] body.parent-portal .tabs{background:#f4f7fbf5;border-color:#dce5ef}[data-theme=light] body.parent-portal .tabs button{background:#fff;color:#5c7085;border-color:#dce5ef}[data-theme=light] body.parent-portal .tabs button.active{background:#e5f3fb;color:#145c85;border-color:#9fc8e2}[data-theme=light] .theme-controls{background:#fffffff5;box-shadow:0 6px 24px #203b571a}[data-theme=light] .theme-controls button{background:transparent;color:#5c7085;border-color:transparent}[data-theme=light] .theme-controls button[aria-pressed=true]{background:#e5f3fb;color:#145c85;border-color:#9fc8e2}
@media(max-width:700px){.theme-controls{right:14px;bottom:max(14px,env(safe-area-inset-bottom))}.theme-controls button{min-height:38px}#toast,#message{bottom:80px}}
/* Avoid native Safari button surfaces retaining the previous color scheme. */
button{appearance:none;-webkit-appearance:none}
/* Staff roles remain identifiable by both their label and their color. */
.badge.role-executive{background:#28213e;border-color:#7957b8;color:#d4c4ff}.badge.role-admin{background:#103447;border-color:#2f88ad;color:#9de3ff}.badge.role-teacher{background:#103d30;border-color:#27835f;color:#8af0c3}.role-badge{white-space:nowrap}.foot .role-badge{margin-top:6px}
[data-theme=light] .badge.role-executive{background:#f1ebff;border-color:#c7b3ed;color:#6941a5}[data-theme=light] .badge.role-admin{background:#e7f4ff;border-color:#9fc8e2;color:#145c85}[data-theme=light] .badge.role-teacher{background:#e8f8f0;border-color:#9bd9bf;color:#116f4f}
.modal-close{position:sticky;top:0;float:right;z-index:3;min-width:36px;min-height:36px;font-size:24px;line-height:1;padding:4px 8px;margin:-10px -8px 8px 12px;box-shadow:0 2px 10px #0002}dialog h2{padding-right:40px}.attendance-confirm{margin-top:9px;width:100%}.attendance-hint{display:block;margin-top:5px;line-height:1.6}.danger{background:#9f354d;border-color:#d46a80;color:white}[data-theme=light] button.danger{background:#ae3150;border-color:#ae3150;color:white}
/* Keep theme controls beside the branch selector in the workspace header. */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.header-actions select{max-width:330px}.theme-controls{top:18px;bottom:auto;right:20px}.theme-controls.is-docked{position:static;box-shadow:none;flex-shrink:0}.work-queue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.work-queue-item.secondary{display:flex;flex-direction:column;align-items:flex-start;gap:8px;white-space:normal;text-align:left;padding:18px;border-color:var(--border);background:var(--raised);color:var(--text)}.work-queue-item strong{font-size:30px;line-height:1.3;color:var(--cyan);font-variant-numeric:tabular-nums}.work-queue-item small{font-weight:400;color:var(--muted)}.panel-title p{margin:8px 0 0}.duplicate-review{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.follow-up-list{max-height:420px;overflow-y:auto}.follow-up-list .list-item{gap:16px}.follow-up-list .list-item button{flex-shrink:0}.theme-controls~#toast,#toast,#message{bottom:24px}
@media(max-width:1100px){.work-queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions select{max-width:270px}}
@media(max-width:700px){.header-actions{width:100%;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}.header-actions select{flex:1;min-width:140px;width:auto;max-width:100%}.theme-controls{top:14px;bottom:auto;right:14px}.theme-controls.is-docked{position:static}.work-queue-item.secondary{padding:14px;font-size:13px}.work-queue-item strong{font-size:26px}body.parent-portal header{flex-wrap:wrap}body.parent-portal .theme-controls{margin-left:auto}main,body.parent-portal main{padding-bottom:60px}}
.class-photo-tools{border-top:1px solid var(--border);margin-top:22px;padding-top:20px}.class-photo-tools h3{margin-bottom:6px}.class-photo-tools p{margin:6px 0 14px}.class-photo-tools .actions{flex-wrap:wrap;gap:10px}.class-photo-tools button{min-height:42px}

#album-preview figure{margin:0;min-width:0}#album-preview img{width:100%;height:140px;object-fit:contain;background:#09111a;border-radius:8px}#album-preview figcaption{font-size:12px;overflow-wrap:anywhere;margin-top:6px;color:var(--muted)}

.learning-list-heading{flex-wrap:wrap;gap:12px}.learning-list-heading h2{flex:0 0 auto;white-space:nowrap}.learning-list-heading .report-count{white-space:nowrap}.learning-list-heading select{width:auto;min-width:150px;max-width:100%;flex:0 1 220px}

.review-photo{margin:0;display:grid;align-content:start;gap:8px;min-width:0}.review-photo figcaption{font-size:12px;overflow-wrap:anywhere}.review-photo .danger{background:#7e2841;color:#fff;border:1px solid #bd516e}.review-photo img{width:100%;object-fit:contain}