/* Colors from the school seal */
:root{
  --primary:#10478b;--primary-dark:#082f63;--nav:#092b57;--accent:#d3222b;
  --ink:#102a49;--muted:#506680;--line:#dce6f2;--wash:#eef4fb;--paper:#fff;
  color:var(--ink);background:#f3f7fc;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
body{background:radial-gradient(ellipse at 100% 0,#e6effa 0,transparent 58%),#f3f7fc}
.top{position:relative;background:linear-gradient(110deg,#092c59 0%,#10478b 75%,#0d3b77 100%);color:#fff;border:0;box-shadow:0 3px 12px #092b5726}
.top::after{position:absolute;content:"";height:3px;width:70px;bottom:0;left:0;background:var(--accent)}
.top .brand-home,.top .quiet,.top .who small{color:#fff}
.top .brand-home small{color:#dce9fa}
.school-logo{padding:3px;background:#fff;border-radius:50%;object-fit:contain}
.top .brand .school-logo{width:44px;height:44px}
.top .profile .avatar{background:#ffffff1c;border:1px solid #ffffff48}
.top .quiet:hover{background:#ffffff20}
.crumb{background:#ffffffd9;border-color:var(--line)}
.crumb .wrap{min-height:44px;color:#405975}
.panel{border-radius:14px;box-shadow:0 4px 14px #102b4e0b}
.box{padding:22px}
h1,h2,h3{color:var(--ink)}
button,.button{border-radius:8px;border-color:#d4e0ee;color:#173958;font-weight:600}
button:hover,.button:hover{background:#eff5fd}
button.primary,button.add{background:var(--primary);border-color:var(--primary);color:#fff}
button.primary:hover,button.add:hover{background:var(--primary-dark)}
button.green{background:#f0f8f4;color:#285743;border-color:#afc9bd}
button.red{color:#aa2630;border-color:#e2bfc3}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #2674d1;outline-offset:3px}
input,select,textarea{border-radius:7px;border-color:#d4e0ee}
.tabbar{background:#f1f6fc;border-radius:14px 14px 0 0}
.tabbar button.on{border-top-color:var(--primary);color:var(--primary-dark)}
.grid th{background:#eaf2fb;color:#29496d}
.grid td{border-color:#edf2f8}
.tag{background:#e8f1fd;color:#16447b}
.tag.ok{background:#e7f4ee;color:#285743}.tag.bad{background:#faedf0;color:#a52835}
.school{position:relative;overflow:hidden;padding-top:26px}
.school::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent) 0 16%,var(--primary) 16%)}
.tile{border-radius:12px;border-color:var(--line);box-shadow:0 2px 6px #102b4e08}
.tile:hover{border-color:#9cbce1;background:#f4f8ff}
.tile em{background:#e7f0fc;color:#194e8e}
.drawer{background:linear-gradient(170deg,#082b58,#133e73)}
.drawer h3{color:#c0d5ef}
.login{background:radial-gradient(ellipse at 50% 18%,#fff 0,#f5f9ff 43%,#e5effb 100%)}
.loginbox{width:min(100%,415px);padding:33px 32px;border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:17px;box-shadow:0 18px 48px #102f5c19}
.login-brand h1{font-size:21px;color:var(--primary-dark);letter-spacing:-.35px}
.login-brand::after{content:"";display:block;width:30px;height:3px;margin:12px auto;background:var(--accent);border-radius:9px}
.loginbox button.primary{border-radius:9px}
.loginbox .linklike{color:var(--primary)}
.card-workspace-head{display:flex;align-items:center;gap:15px;padding:16px 18px;margin-bottom:18px;background:#edf4fd;border:1px solid #dbe8f7;border-left:4px solid var(--accent);border-radius:10px}
.card-workspace-head h1{margin:0 0 4px}.card-workspace-head p{margin:0}
.card-workspace-head .school-logo,.login-brand .school-logo,.school .school-logo{padding:4px}
@media(max-width:640px){
 .box{padding:13px}.top .brand .school-logo{width:36px;height:36px}.top .brand strong{font-size:13px}.top .wrap{min-height:60px}
 .loginbox{padding:25px 21px}.card-workspace-head{padding:11px;gap:10px}
}

/* School navigation and module icons */
.menu-icon{display:block;width:20px;height:20px;flex:none}
.top-menu-toggle{min-width:38px;min-height:38px}
.drawer{width:min(304px,calc(100vw - 34px));padding:0;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(170deg,#111f39 0%,#12243f 100%);box-shadow:10px 0 36px #07162d38;color:#edf4ff}
.drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 16px 12px}
.drawer-brand{min-width:0;display:flex;align-items:center;gap:10px;color:#f5f8ff;text-decoration:none}
.drawer-brand .school-logo{padding:3px}
.drawer-brand strong{font-size:14px;line-height:1.25;display:block}.drawer-brand small,.drawer-school small{font-size:11px;color:#adbed4;margin-top:3px}
.drawer .drawer-close{width:29px;height:32px;min-height:32px;display:grid;place-items:center;padding:0;color:#b8c9dc}
.drawer-close .menu-icon{width:17px;height:17px}
.drawer-school{display:flex;align-items:center;gap:10px;margin:0 14px 10px;padding:9px 10px;border:1px solid #ffffff21;border-radius:11px;background:#ffffff09}
.drawer-school strong{font-size:12px;letter-spacing:.35px}
.drawer-emblem{height:33px;width:33px;display:grid;place-items:center;flex:none;border-radius:9px;background:#6183d42a;color:#b1c9ff}
.drawer-emblem .menu-icon{width:19px;height:19px}
.drawer-search{display:flex;align-items:center;gap:8px;margin:0 14px 7px;padding:0 10px;border:1px solid #ffffff23;border-radius:8px;background:#ffffff08;color:#afc2dc}
.drawer-search .menu-icon{height:16px;width:16px}.drawer-search:focus-within{outline:2px solid #87b6ff;outline-offset:1px}
.drawer-search input{min-height:36px;padding:6px 0;color:#fff;background:none;border:0;outline:none;font-size:12px}
.drawer-search input:focus-visible{outline:none}.drawer-search input::placeholder{color:#b9c8db}
.drawer-navigation{min-height:0;overflow:auto;padding:0 12px 16px;scrollbar-width:thin;scrollbar-color:#527193 transparent;flex:1;overscroll-behavior:contain}
.drawer-navigation section{margin-top:14px}
.drawer-navigation h3{margin:0 8px 6px;font-size:10px;letter-spacing:1.5px;color:#9db1cb}
.drawer .drawer-link{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:41px;width:100%;margin:2px 0;padding:8px 9px;font-size:12.5px;line-height:1.32;font-weight:600;white-space:normal;color:#d2def0;border-radius:8px}
.drawer-link .menu-icon{width:18px;height:18px;color:#9fb5d2}
.drawer .drawer-link:hover{color:#fff;background:#ffffff12}
.drawer .drawer-link.on{background:#2b5cb2;color:white;box-shadow:inset 3px 0 #a6c8ff}
.drawer .drawer-link.on .menu-icon{color:white}
.drawer .drawer-link[hidden],.drawer-navigation section[hidden],.drawer-empty[hidden]{display:none}
.drawer-empty{margin:20px 8px;color:#b9c8db;font-size:12px}
.drawer-footer{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid #ffffff15;color:#b4c4d9;font-size:10.5px}
.drawer-footer span{width:6px;height:6px;border-radius:50%;background:#65d2ae}
.tile .tile-icon{width:37px;height:37px;display:grid;place-items:center;flex:none;border-radius:10px;background:#e7f0fc;color:#174e91}
.tile .tile-icon.indigo{background:#eaeefe;color:#414da0}.tile .tile-icon.cyan{background:#e3f2f9;color:#146184}
.tile .tile-icon.teal{background:#e3f4ef;color:#206e57}.tile .tile-icon.amber{background:#fff0da;color:#87510d}
.tile .tile-icon.red{background:#fbe9ee;color:#a82645}
.tile>span:not(.tile-icon){min-width:0}
.tabbar button .menu-icon,.sidebox button .menu-icon,.profile details button .menu-icon{width:16px;height:16px;vertical-align:middle;display:inline-block;margin-right:6px}
.tabbar button small{margin-left:22px}
@media(min-width:1150px){
  #app.with-school-menu{margin-left:280px}
  .drawer{width:280px}
  .with-school-menu>.shade{display:none}
  .with-school-menu .workspace>.dashboard{grid-template-columns:170px minmax(0,1fr)}
}
@media(min-width:1150px) and (max-width:1330px){
  .with-school-menu .workspace>.dashboard{grid-template-columns:minmax(0,1fr)}
  .with-school-menu .dashboard .school{display:none}
}
@media(max-width:640px){
  .drawer-heading{padding-top:15px}.drawer .drawer-link{min-height:44px}
  .tile{gap:7px}.tile .tile-icon{width:27px;height:27px;border-radius:7px}
  .tile .tile-icon .menu-icon{width:16px;height:16px}
}
@media(max-width:440px){
  .cards .tile{align-items:flex-start;flex-direction:column}
  .cards .tile .tile-icon{margin-bottom:2px}
}
@media print{.drawer,.shade{display:none!important}}

.scan-photo{margin:14px 0;width:126px;min-height:44px;border-radius:10px}
.scan-photo .card-avatar{display:block;width:126px;height:157px;background:#edf4fc;border:1px solid #cbd9eb;border-radius:10px}
.scan-photo .card-avatar[hidden]{display:none}
.scan-photo figcaption{color:var(--muted);font-size:12px}

.student-overview .quick-grid{margin-top:16px}.student-overview .tile{min-height:68px}
.qr-bulk-tools{margin:14px 0 6px}
.qr-bulk-list{max-height:38dvh;border:1px solid var(--line);border-radius:8px}
.qr-bulk-list thead{position:sticky;top:0;background:#f2f6fb}
.qr-bulk-list [data-empty]{padding:14px;margin:0}

.classroom-layout{display:grid;gap:16px}
.classroom-menu button{text-align:left;white-space:normal}
.classroom-menu .on{background:#e6effb;color:#124582}
.classroom-filter{padding:14px;background:#f3f7fc;border-radius:10px}
.classroom-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.classroom-summary,.classroom-layout h2{margin-top:16px}
.attendance-roster{display:grid;gap:8px}
.attendance-roster fieldset{margin:0;min-width:0;padding:8px 12px 12px;border:1px solid var(--line);border-radius:9px}
.attendance-roster legend{padding:0 5px;font-weight:bold}
.attendance-roster legend span{font-weight:normal;margin-left:5px}
.attendance-status{display:flex;gap:4px 10px;flex-wrap:wrap;margin:0 0 6px}
.attendance-status label{display:inline-flex;align-items:center;gap:4px;min-height:36px;cursor:pointer}
.attendance-status input{accent-color:#114884}
@media(min-width:850px){.classroom-layout:has(.classroom-menu){grid-template-columns:minmax(175px,220px) minmax(0,1fr)}}
@media(max-width:849px){.classroom-menu{display:flex;flex-wrap:wrap}.classroom-menu h3{width:100%}.classroom-menu button{border:1px solid var(--line)}}

.role-options{margin:14px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.role-options legend{font-weight:bold;padding:0 6px}
.role-options .checks{margin:0}

.grid .sort-heading{padding:4px 1px;border:0;background:transparent;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;white-space:nowrap}
.grid .sort-heading:hover,.grid th[aria-sort] .sort-heading{color:#145598}
.grid .sort-heading span{font-size:1.15em}

.achievement-dashboard{margin-bottom:1rem}
.community-filters{display:flex;align-items:end;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.achievement-totals{margin:1rem 0 .3rem}
.achievement-bars{display:grid;gap:.35rem;margin:.75rem 0}
.achievement-bars>div{display:grid;grid-template-columns:minmax(8.5rem,1.1fr) minmax(4rem,3fr) minmax(8rem,1fr);gap:.7rem;align-items:center}
.achievement-bars meter{width:100%;height:1rem}
.achievement-bars meter::-webkit-meter-optimum-value{background:#22639e}
.achievement-bars meter::-moz-meter-bar{background:#22639e}
.achievement-bars small,.notice-meta{color:#53647a}
.notice-row{display:grid;grid-template-columns:1fr auto auto;gap:.65rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
.notice-row h2{margin:0}
.notice-body{white-space:pre-wrap;overflow-wrap:anywhere;max-height:48vh;overflow:auto}
.notice-options{max-height:15rem;overflow:auto;margin:.5rem 0;border:1px solid var(--line);padding:.45rem}
.notice-options label{display:flex;align-items:center;gap:.5rem;padding:.25rem}
.notice-options label[hidden]{display:none}
.notice-options input{width:auto}
@media(max-width:560px){.achievement-bars>div{grid-template-columns:minmax(7rem,1fr) minmax(4rem,1fr)}.achievement-bars small{grid-column:2}.notice-row{grid-template-columns:1fr auto}.notice-row>div{grid-column:1/-1}}

.achievement-chart-card,.achievement-login-summary{margin:12px 0;padding:14px;border:1px solid #dbe6f3;border-radius:14px;background:#f9fcff}
.achievement-chart-title{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.achievement-chart-title h2,.achievement-chart-title h3,.achievement-chart-title p{margin:0}
.achievement-chart-title strong{font-size:1.55rem;color:#17578b}
.achievement-line{width:100%;min-height:174px;margin-top:6px}
.achievement-line.mini{min-height:104px}
.achievement-line svg{display:block}
.achievement-grid line{stroke:#d8e5f0}
.achievement-grid text{fill:#465b73;font-size:11px}
.achievement-legend{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.achievement-legend button{padding:5px 7px;font-size:.82rem}
.achievement-legend button[aria-pressed=true]{border-color:#17578b;background:#e7f1fd}
.achievement-key{display:inline-block;width:15px;height:0;border-top:2px solid #1766a3}
.achievement-key-1{border-color:#a44719;border-top-style:dashed}.achievement-key-2{border-color:#0e7155;border-top-style:dotted}
.achievement-key-3{border-color:#7549a1}.achievement-key-4{border-color:#ad2f62;border-top-style:dashed}.achievement-key-5{border-color:#007585;border-top-style:dotted}
.achievement-key-6{border-color:#866105}.achievement-key-7{border-color:#465c8a;border-top-style:dashed}.achievement-key-8{border-color:#666b74;border-top-style:dotted}
.login.achievement-login{gap:12px;align-content:center}
.achievement-login .achievement-login-summary{width:min(100%,480px);margin:0}
.achievement-entry{border-bottom:1px solid #dbe6f3;padding:10px 0}
.achievement-entry summary{cursor:pointer;color:#173e68}
.achievement-entry summary span{display:inline-block;margin:0 6px}
.achievement-entry dl{display:grid;grid-template-columns:max-content 1fr;gap:5px 12px;padding:0 10px}
.achievement-entry dd{margin:0;overflow-wrap:anywhere}
@media(max-width:460px){.achievement-chart-card,.achievement-login-summary{padding:10px}.achievement-legend button{min-height:38px}}

.public-achievement-embed{padding:4px;background:#fff}
.public-achievement-embed .achievement-dashboard{margin:0}

.module-picker{max-width:900px;margin:8vh auto;text-align:center}.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}.module-card{display:flex;flex-direction:column;align-items:flex-start;gap:18px;background:#fff;border:1px solid #d6e0ee;border-top:5px solid #164986;border-radius:20px;padding:32px;text-align:left;color:#122d50;text-decoration:none;box-shadow:0 12px 35px #193e6812}.module-card:hover{border-color:#164986;box-shadow:0 12px 35px #193e6828}.module-card strong{font-size:25px}.module-card svg{width:42px;height:42px}.module-card span{line-height:1.6;color:#52687f}@media(max-width:640px){.module-grid{grid-template-columns:1fr;gap:16px}.module-picker{margin:28px auto}.module-card{padding:24px}}

/* Presensi cepat: satu baris per siswa, gulir mendatar pada HP. */
.presensi-scroll{overflow:auto;border:1px solid #dce5ef;border-radius:12px;margin:16px 0;max-width:100%}
.presensi-grid{width:100%;min-width:970px;border-collapse:separate;border-spacing:0;font-size:13px}
.presensi-grid th{background:#eef4fb;color:#153b66;text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:13px 12px;border-bottom:1px solid #dce5ef}
.presensi-grid td{padding:10px 12px;border-bottom:1px solid #e8edf4;vertical-align:middle}
.presensi-grid tr:last-child td{border-bottom:0}.presensi-grid tbody tr:nth-child(even){background:#f8fbff}
.presensi-grid .presensi-name{min-width:230px;position:sticky;left:0;background:inherit;z-index:1}.presensi-name small{display:block;color:#63758b;margin-top:5px;font-size:11px}
.presensi-radios{display:flex;gap:9px;align-items:center;flex-wrap:nowrap}.presensi-choice{display:inline-flex!important;align-items:center;gap:6px;min-height:40px;white-space:nowrap;cursor:pointer;font-size:12px;font-weight:500!important;margin:0!important}
.presensi-choice input[type=radio]{appearance:auto;width:18px!important;height:18px!important;min-height:18px!important;margin:0;accent-color:#1769c2;box-shadow:none}
.presensi-choice:has(input:checked){color:#114f94;font-weight:700!important}.presensi-grid input:not([type=radio]){min-width:175px;font-size:12px;padding:9px}
.presensi-status-box{padding:0!important;border:0!important;margin:0!important;min-width:0}.presensi-notice{display:flex!important;align-items:center;gap:10px;font-size:12px;margin-top:5px}.presensi-notice select{width:155px;padding:7px;min-height:34px}
.presensi-save{position:sticky;bottom:8px;z-index:2;display:flex;justify-content:flex-end;padding:12px;background:#fff;border:1px solid #dce5ef;border-radius:12px;box-shadow:0 5px 18px #12345510}.prayer-grid{min-width:1080px}
@media(max-width:700px){.presensi-grid .presensi-name{min-width:190px;max-width:215px;background:#fff}.presensi-grid td{padding:9px}.presensi-save button{width:100%}}

/* Tampilan Data Sekolah selaras dengan E Sarpras. */
:root{--primary:#244d95;--accent:#d91f2c;--muted:#69788e}
body{background:#f5f7fb;color:#17243d}.top{background:#fff;color:#182741;box-shadow:none;border-bottom:1px solid #e1e7f0;position:sticky;top:0;z-index:15}.top::after{display:none}.top .brand-home,.top .quiet,.top .who small{color:#263d5f}.top .brand-home small{color:#70819a}.top .profile .avatar{color:#234b84;background:#eef3fb;border:1px solid #d4dfef}.top .quiet:hover{background:#edf2fa}.top .wrap{min-height:76px}.top .profile>button{border-radius:9px;padding:9px 12px}.top .profile .who{color:#1b2c49}.top details>div{color:#17243d}.drawer{background:linear-gradient(175deg,#111c36,#162741);box-shadow:none}.drawer .drawer-link.on{background:#2858a6;box-shadow:none;border:1px solid #4376c2}.drawer-brand strong{font-size:16px}.drawer-school{border-color:#ffffff18;background:#ffffff06}.drawer-navigation h3{color:#8fa2bd;letter-spacing:1.8px}.panel{border-radius:16px;border-color:#e1e8f1;box-shadow:0 3px 10px #18355204}.crumb{background:#fff;border-bottom:1px solid #e4eaf2}.tools button,.formactions button{border-radius:9px}.password-control{position:relative;display:block}.password-control input{padding-right:48px}.password-eye{position:absolute;right:3px;top:3px;bottom:3px;min-height:30px;width:40px;padding:6px;border:0;background:transparent;color:#3d5477}.password-eye .menu-icon{width:20px;height:20px}.roster-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:8px;border:1px solid #dfe6f0;border-radius:12px;padding:14px;margin:12px 0}.roster-selection label{display:flex;align-items:center;gap:10px;padding:10px;background:#f5f8fd;border-radius:8px;margin:0}.roster-selection input{width:18px;min-height:18px}.roster-selection small{display:block;color:#708099;font-size:11px;margin-top:3px}@media(max-width:640px){.top .wrap{min-height:64px}.top .profile>button{padding:7px;font-size:11px}.roster-selection{grid-template-columns:1fr 1fr}.roster-selection label{padding:9px;font-size:12px}}