:root{--blue:#0b63ce;--blue-dark:#084da3;--blue-soft:#eaf3ff;--ink:#162033;--muted:#667085;--line:#e6eaf0;--soft:#f5f7fb;--green:#07885f;--green-bg:#eaf8f3;--orange:#c96b08;--orange-bg:#fff3e5;--red:#c9362c;--red-bg:#fff0ee;--purple:#7047d7;--purple-bg:#f2edff;--shadow:0 12px 38px rgba(16,24,40,.08);--radius:20px;--sidebar:270px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Poppins,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);background:var(--soft)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}.hidden{display:none!important}.grow{flex:1}.muted,small{color:var(--muted)}small{display:block;font-size:13px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#073b83;color:#fff;padding:24px 18px;display:flex;flex-direction:column;z-index:30;overflow:auto}.brand{display:flex;align-items:center;gap:12px}.brand img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:14px;padding:5px}.brand span{display:block;line-height:1.25}.brand b{display:block;font-size:15px}.brand small{color:rgba(255,255,255,.7);font-size:12px;margin-top:4px}.sidebar nav{margin-top:28px}.nav-group{display:grid;gap:5px;margin-bottom:22px}.nav-group>span{font-size:11px;letter-spacing:.14em;font-weight:800;color:rgba(255,255,255,.55);padding:0 12px 6px}.nav-group a{padding:11px 13px;border-radius:12px;font-weight:650;color:rgba(255,255,255,.86)}.nav-group a:hover,.nav-group a.active{background:rgba(255,255,255,.14);color:#fff}.sidebar-user{margin-top:auto;padding:14px 10px 0;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.sidebar-user small{color:rgba(255,255,255,.6)}.main-content{margin-left:var(--sidebar);min-height:100vh}.content-wrap{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:34px 0 70px}.mobile-top{display:none}.bottom-nav{display:none}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 24px}.page-head.compact{margin-top:30px}.page-head h1{font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.035em;margin:6px 0 10px}.page-head h2{margin:0}.page-head p{font-size:18px;color:var(--muted);margin:0;max-width:760px}.page-actions{display:flex;gap:10px;flex-wrap:wrap}.eyebrow{display:inline-flex;font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:900;color:var(--blue);background:var(--blue-soft);padding:7px 10px;border-radius:999px}.btn{border:0;border-radius:12px;padding:12px 17px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px}.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-dark)}.btn.soft{background:#edf2f8;color:#344054}.btn.full{width:100%}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 7px 25px rgba(16,24,40,.035)}.card h2,.card h3{margin-top:0}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px}.card-head a{color:var(--blue);font-weight:800}.grid{display:grid;gap:18px;margin-top:18px}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.dashboard-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;min-height:110px;display:flex;flex-direction:column;justify-content:center}.stat-card b{font-size:36px;line-height:1}.stat-card span{margin-top:8px;color:var(--muted);font-weight:700}.stat-card.ok{background:var(--green-bg);border-color:#ccecdf}.stat-card.warn{background:var(--orange-bg);border-color:#f4d6b0}.stat-card.danger{background:var(--red-bg);border-color:#f3c9c4}.stat-card.info{background:var(--blue-soft);border-color:#cfe2ff}.stat-card.purple{background:var(--purple-bg);border-color:#dfd5ff}.stat-card.muted{background:#f6f7f9}.pill{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:#f1f3f6;color:#475467}.pill.ok{background:var(--green-bg);color:var(--green)}.pill.warn{background:var(--orange-bg);color:var(--orange)}.pill.danger{background:var(--red-bg);color:var(--red)}.pill.info{background:var(--blue-soft);color:var(--blue)}.pill.purple{background:var(--purple-bg);color:var(--purple)}.pill.muted{background:#f1f3f6;color:#667085}.danger-text{color:var(--red)!important}.alert{border-radius:14px;padding:13px 16px;margin:0 0 18px;font-weight:700}.alert.success{background:var(--green-bg);color:var(--green);border:1px solid #ccecdf}.alert.danger{background:var(--red-bg);color:var(--red);border:1px solid #f3c9c4}.notice{padding:14px 16px;background:#f7f9fc;border:1px solid var(--line);border-radius:14px;color:#475467}.highlight{display:flex;align-items:center;gap:24px;border-left:5px solid var(--blue)}.highlight>div:first-child{min-width:270px}.mini-stats{display:flex;gap:18px;flex-wrap:wrap;flex:1}.mini-stats span{color:var(--muted);font-size:14px}.mini-stats b{color:var(--ink);font-size:21px}.list{display:grid}.list-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border:0}.avatar-sm{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:900}.announcement{padding:13px 0;border-bottom:1px solid var(--line)}.announcement:last-child{border:0}.announcement p{margin:6px 0;color:#475467}.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.filter-bar input,.filter-bar select{min-width:180px}.filter-bar label{display:flex;align-items:center;gap:8px}.table-card{padding:0;overflow:hidden}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}.table-wrap th{background:#f8fafc;color:#475467;font-size:13px;text-transform:uppercase;letter-spacing:.05em}.table-wrap td small{margin-top:4px}.table-wrap tr:hover td{background:#fcfdff}.actions{white-space:nowrap}.actions a,.link-btn{color:var(--blue);font-weight:800;margin-right:10px}.link-btn{border:0;background:transparent;padding:0}.form-grid{display:grid;gap:16px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.span-2{grid-column:span 2}.field{display:grid;gap:7px}.field label{font-weight:800;color:#344054}.field input,.field select,.field textarea,.filter-bar input,.filter-bar select,.inline-form-grid input,.inline-form-grid select,.scanner-controls select,.manual-scan input{width:100%;border:1px solid #d6dce5;background:#fff;border-radius:11px;padding:12px 13px;outline:none}.field input:focus,.field select:focus,.field textarea:focus,.filter-bar input:focus,.filter-bar select:focus,.manual-scan input:focus{border-color:#7bb3f5;box-shadow:0 0 0 3px rgba(11,99,206,.1)}textarea{resize:vertical}.form-actions{display:flex;gap:10px}hr{border:0;border-top:1px solid var(--line);width:100%;margin:4px 0}.form-details summary{font-size:18px;font-weight:900;cursor:pointer;margin:-4px 0 18px}.form-details:not([open]) summary{margin-bottom:-4px}.inline-form{display:inline}.inline-form-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr auto;gap:10px;margin-bottom:18px}.profile-hero{display:flex;align-items:center;gap:18px;margin-bottom:18px}.student-big-avatar{width:72px;height:72px;border-radius:20px;background:var(--blue-soft);color:var(--blue);font-size:30px;font-weight:900;display:grid;place-items:center;flex:0 0 72px}.profile-hero h1{margin:5px 0 6px;font-size:34px}.timeline{display:grid}.timeline-row{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:12px 0;border-bottom:1px solid var(--line)}.timeline-row .dot{width:12px;height:12px;border-radius:50%;margin-top:6px;background:#98a2b3}.timeline-row .dot.ok{background:var(--green)}.timeline-row .dot.warn{background:var(--orange)}.scanner-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:18px}.scanner-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.scanner-controls label{font-weight:800}.camera-box{height:420px;margin:16px 0;border-radius:20px;background:#101828;position:relative;overflow:hidden;display:grid;place-items:center}.camera-box video{width:100%;height:100%;object-fit:cover}.camera-overlay{position:absolute;inset:18% 18%;border:3px solid rgba(255,255,255,.9);border-radius:18px;color:#fff;display:flex;align-items:flex-end;justify-content:center;padding:16px;text-shadow:0 2px 8px rgba(0,0,0,.5)}.scanner-actions{display:flex;gap:10px}.manual-scan{margin-top:16px}.manual-scan label{font-weight:800}.inline{display:flex;gap:8px;margin-top:7px}.scan-result{display:grid;place-items:center;min-height:420px;text-align:center}.scan-success .student-big-avatar{margin:0 auto 12px}.scan-success h2{font-size:30px;margin:5px 0}.scan-success .scan-message{font-size:22px;font-weight:900;color:var(--green)}.empty-state{color:var(--muted)}.big-number{font-size:42px;color:var(--red)}.roll-card{transition:.2s transform,.2s box-shadow}.roll-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.event-list{display:grid;gap:14px}.event-card{display:grid;grid-template-columns:80px 1fr;gap:18px;align-items:center}.event-date{width:68px;height:68px;border-radius:18px;background:var(--blue-soft);display:grid;place-items:center;line-height:1;color:var(--blue)}.event-date b{font-size:28px}.event-date span{font-size:11px;font-weight:900}.report-link:hover{border-color:#a9ccf6}.qr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.qr-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center;break-inside:avoid}.qr-card .qr-target{min-height:160px;display:grid;place-items:center;margin-bottom:10px}.qr-card b{display:block;font-size:14px}.qr-card span{font-size:12px;color:var(--muted)}.report-sheet{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--shadow)}.report-header{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:18px}.report-header img{width:70px}.report-header span{font-size:12px;font-weight:900;letter-spacing:.09em;color:var(--blue)}.report-header h1{margin:4px 0;font-size:32px}.report-header p{margin:0}.report-student{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}.report-student h2{margin:0}.report-student .pill{margin-left:auto}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.report-grid section,.report-sections section{border:1px solid var(--line);border-radius:14px;padding:16px}.report-grid h3,.report-sections h3{margin:0 0 8px}.report-sections{display:grid;grid-template-columns:1fr 1fr;gap:16px}.report-sections p{border-bottom:1px solid var(--line);padding-bottom:8px}.report-sections p:last-child{border:0}.report-footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.child-card{display:flex;gap:16px;align-items:center}.child-card h3{margin:0 0 6px}.child-card small{margin-top:8px}.parent-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.parent-top .wrap{width:min(1100px,calc(100% - 32px));margin:auto;min-height:72px;display:flex;justify-content:space-between;align-items:center}.brand.compact img{width:42px;height:42px}.brand.compact small{color:var(--muted)}.parent-main .content-wrap{max-width:1100px}.minimal-main{min-height:100vh;display:grid;align-items:center;background:linear-gradient(160deg,#f7fbff,#eef4fb)}.minimal-main .content-wrap{max-width:900px}.login-card{max-width:470px;margin:0 auto;padding:30px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.login-brand img{width:52px}.login-brand b,.login-brand small{display:block}.login-card h1{font-size:42px;margin:0 0 4px}.install-wrap{display:grid;gap:18px}.brand-block{display:flex;gap:20px;align-items:center}.brand-block img{width:90px}.brand-block h1{font-size:46px;margin:5px 0}.brand-block p{font-size:18px;color:var(--muted);max-width:720px}.brand-block code{background:#edf2f8;padding:2px 6px;border-radius:6px}.minimal .card{box-shadow:var(--shadow)}
@media(max-width:1080px){.sidebar{width:230px}.main-content{margin-left:230px}.dashboard-stats{grid-template-columns:repeat(2,1fr)}.three-col{grid-template-columns:1fr 1fr}.scanner-grid{grid-template-columns:1fr}.qr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){body{font-size:16px}.sidebar{display:none}.main-content{margin-left:0}.content-wrap{width:min(calc(100% - 22px),1200px);padding:22px 0 92px}.mobile-top{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);padding:10px 12px;position:sticky;top:0;z-index:20}.bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:30;background:#fff;border:1px solid var(--line);box-shadow:0 10px 35px rgba(16,24,40,.16);border-radius:18px;padding:8px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center}.bottom-nav a{text-align:center;font-size:11px;font-weight:800;color:#667085;padding:8px 3px}.bottom-nav .scan{background:var(--blue);color:#fff;border-radius:13px}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:42px}.page-head p{font-size:17px}.page-actions{width:100%}.page-actions .btn{flex:1}.stat-grid,.dashboard-stats,.stat-grid.four{grid-template-columns:1fr 1fr}.two-col,.three-col,.report-grid,.report-sections{grid-template-columns:1fr}.highlight{align-items:flex-start;flex-direction:column}.highlight>div:first-child{min-width:0}.form-grid.two{grid-template-columns:1fr}.span-2{grid-column:auto}.inline-form-grid{grid-template-columns:1fr}.filter-bar>*{width:100%}.profile-hero{align-items:flex-start;flex-wrap:wrap}.profile-hero .page-actions{width:100%}.scanner-controls{grid-template-columns:1fr}.camera-box{height:55vh;min-height:360px}.qr-grid{grid-template-columns:1fr 1fr}.report-sheet{padding:18px}.report-header{grid-template-columns:auto 1fr}.report-header .btn{grid-column:1/-1}.report-student{align-items:flex-start;flex-wrap:wrap}.report-student .pill{margin-left:0}.parent-top .wrap{gap:10px}.parent-top .wrap>div{display:flex;align-items:center}.parent-top .wrap>div span{display:none}.brand-block{align-items:flex-start}.brand-block img{width:70px}.brand-block h1{font-size:38px}.install-wrap .form-grid{padding:18px}}
@media(max-width:470px){.stat-grid,.dashboard-stats,.qr-grid{grid-template-columns:1fr}.page-head h1{font-size:36px}.login-card h1{font-size:36px}.brand-block{display:block}.brand-block img{margin-bottom:14px}.list-row{grid-template-columns:auto 1fr}.list-row .pill{grid-column:2}.event-card{grid-template-columns:64px 1fr}.event-date{width:58px;height:58px}.report-header img{width:56px}.report-header h1{font-size:25px}}
@media print{body{background:#fff}.sidebar,.mobile-top,.bottom-nav,.parent-top,.print-hide,.print-btn{display:none!important}.main-content{margin:0}.content-wrap{width:100%;padding:0}.card,.report-sheet{box-shadow:none}.report-sheet{border:0;padding:0}.report-header{padding-top:0}.qr-grid{grid-template-columns:repeat(3,1fr)}.qr-card{padding:9px}.qr-card .qr-target{min-height:110px}.qr-card canvas,.qr-card img{max-width:105px!important;max-height:105px!important}.page-head{margin-bottom:12px}.table-wrap{overflow:visible}.table-wrap table{font-size:11px}}

/* v1.1.0 — Role access, parent portal, WhatsApp and SCF typography hardening */
:root{--wa:#128c5e;--wa-dark:#0b6f49;--font-base:16px;--font-lead:18px;--font-card:20px;--font-subsection:24px;--font-section:32px;--font-page:40px;--font-feature:48px;--font-hero:64px}
body{font-size:var(--font-base)}
small,.brand small,.nav-group>span,.pill,.table-wrap th,.eyebrow,.bottom-nav a,.qr-card span,.report-header span,.report-footer,.event-date span{font-size:16px}
.sidebar{width:290px}.main-content{margin-left:290px}.brand b{font-size:18px}.nav-group a{font-size:16px;padding:13px 14px}.sidebar-user small{font-size:16px}
.page-head h1{font-size:var(--font-page)}.page-head p{font-size:var(--font-lead)}.card h3{font-size:var(--font-card)}.btn{font-size:16px}.btn.small{min-height:40px;padding:9px 13px}.btn.wa{background:var(--wa);color:#fff}.btn.wa:hover{background:var(--wa-dark)}.wa-text{display:inline-block;color:var(--wa);font-weight:800;margin-top:7px}.danger-badge{background:var(--red-bg);color:var(--red)}
.access-home{display:grid;gap:26px}.access-brand{display:flex;align-items:center;gap:24px}.access-brand img{width:100px;height:100px;object-fit:contain}.access-brand h1{font-size:var(--font-hero);line-height:1.06;letter-spacing:-.04em;margin:8px 0 12px}.access-brand p{font-size:20px;color:var(--muted);max-width:820px;margin:0}.access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.access-card{display:block;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow);transition:.18s transform,.18s box-shadow}.access-card:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(16,24,40,.12)}.access-card b{display:block;font-size:26px;margin-bottom:5px}.access-card span{display:block;font-weight:800;color:var(--blue);margin-bottom:10px}.access-card p{margin:0;color:var(--muted);font-size:17px}.access-card.primary-card{background:linear-gradient(145deg,#0b63ce,#07499a);color:#fff}.access-card.primary-card span,.access-card.primary-card p{color:#eaf3ff}
.login-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;color:var(--muted)}.login-foot a{color:var(--blue);font-weight:800}.login-foot span{font-size:16px}.alert.credential{background:#fff7da;border:1px solid #eed78d;color:#704d00}.focus-student{margin-bottom:18px}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 24px}.quick-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}.quick-card b{display:block;font-size:20px}.quick-card span{display:block;color:var(--muted);margin-top:5px}.role-banner{margin:18px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.12);font-weight:900;font-size:16px;letter-spacing:.06em}.monitor-sidebar{background:#123c6a}
.guard-top{min-height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:12px 22px;position:sticky;top:0;z-index:30}.guard-top .brand{margin-right:auto}.guard-top nav{display:flex;gap:8px}.guard-top nav a{padding:10px 13px;border-radius:10px;font-weight:800}.guard-top nav a.active{background:var(--blue-soft);color:var(--blue)}.guard-main .content-wrap{max-width:1380px}.role-guard .scanner-grid{grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr)}
.parent-children{display:grid;gap:18px}.parent-child-panel{padding:26px}.child-summary{display:flex;align-items:center;gap:18px}.child-summary h2{font-size:30px;margin:5px 0 6px}.parent-timeline{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.parent-timeline h3{margin-bottom:4px}.parent-admin-grid .card{display:flex;flex-direction:column}.parent-actions,.card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.mini-details{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.mini-details summary{font-weight:900;cursor:pointer;margin-bottom:12px}.check-row{display:flex!important;align-items:flex-start!important;gap:10px!important;font-weight:600!important}.check-row input{width:auto!important;min-width:18px;height:18px;margin-top:4px}.check-row span{display:block}.check-row small{margin-top:2px}.form-stack{display:grid;gap:18px}.report-privacy{margin-top:16px}
.parent-top .wrap>div{display:flex;align-items:center;gap:8px}
@media(max-width:1180px){.sidebar{width:250px}.main-content{margin-left:250px}.quick-grid{grid-template-columns:repeat(2,1fr)}.access-brand h1{font-size:56px}}
@media(max-width:780px){.access-brand{align-items:flex-start}.access-brand img{width:72px;height:72px}.access-brand h1{font-size:48px}.access-grid,.quick-grid{grid-template-columns:1fr}.guard-top{padding:10px 12px;gap:10px}.guard-top nav{display:none}.guard-main .content-wrap{width:min(calc(100% - 22px),1200px);padding:18px 0 30px}.child-summary{align-items:flex-start;flex-wrap:wrap}.child-summary .btn{width:100%}.parent-child-panel{padding:18px}.parent-top .wrap{align-items:flex-start;padding:10px 0}.parent-top .wrap>div{flex-wrap:wrap;justify-content:flex-end}.page-head h1{font-size:40px}}
@media(max-width:470px){.access-brand{display:block}.access-brand img{margin-bottom:12px}.access-brand h1{font-size:40px}.access-card b{font-size:22px}.page-head h1{font-size:36px}.child-summary h2{font-size:26px}.parent-top .brand span small{display:none}}
.report-actions{display:flex;gap:8px;align-items:center}.scan-extra{margin:16px auto;padding:14px 16px;border-radius:14px;background:#f7f9fc;border:1px solid var(--line);text-align:left;max-width:360px}.scan-extra b{color:var(--ink)}
@media(max-width:780px){.report-actions{grid-column:1/-1;width:100%;flex-wrap:wrap}.report-actions .btn{flex:1}}

/* v1.1.0 readable-text completion */
.mini-stats span,.qr-card b,.qr-card span{font-size:16px}


/* v1.2.0 — Operasi 24 jam, duty chain, approvals, kepulangan */
.duty-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}.duty-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:6px}.duty-card.primary{background:var(--blue-soft);border-color:#cfe2ff}.duty-card small{font-size:14px;font-weight:900;letter-spacing:.06em;color:var(--muted)}.duty-card b{font-size:20px}.duty-card span,.duty-card a{font-size:16px}.duty-card a{color:var(--blue);font-weight:800}.duty-mini{margin-top:18px}.duty-mini p{margin:8px 0}.approval-actions{display:flex;flex-wrap:wrap;gap:8px}.approval-actions .inline-form{margin:0}.ok-text{color:var(--green)!important}.directory-card .card-actions{margin-top:auto}.role-ppm .sidebar{background:#0b4c75}.role-pkhem .sidebar,.role-headmaster .sidebar{background:#163d66}.role-guard .scan-result{min-height:360px}.scanner-controls{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.duty-chain{grid-template-columns:1fr 1fr}.scanner-controls{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.duty-chain,.scanner-controls{grid-template-columns:1fr}}
/* v1.2.0 — approval trace and operational refinements */
.approval-history{margin-top:8px;min-width:220px}.approval-history summary{cursor:pointer;font-weight:700;color:var(--primary,#0b63ce)}.approval-history small{display:block;margin-top:6px;line-height:1.45;color:var(--muted,#667085)}

/* v1.3.0 — Profil murid diperkaya daripada Excel Julai 2026 */
.stat-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-summary{margin-bottom:18px}.profile-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.profile-data-grid{align-items:stretch}.info-list{display:grid;gap:0;margin:0}.info-list>div{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(0,1.2fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.info-list>div:last-child{border-bottom:0}.info-list dt{font-weight:800;color:#667085}.info-list dd{margin:0;font-weight:700;overflow-wrap:anywhere}.profile-source-card{margin-top:18px}.profile-source-card .grid{margin-top:4px}.form-section-title{padding-top:8px;border-top:1px solid var(--line);margin-top:4px}.form-section-title:first-of-type{border-top:0;padding-top:0}.form-section-title h3{margin:8px 0 0;font-size:24px}.warn-note{background:var(--orange-bg);border-color:#f4d6b0;color:#7a4708;margin-bottom:18px}.report-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.stat-grid.three,.report-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.stat-grid.three,.report-grid{grid-template-columns:1fr}.info-list>div{grid-template-columns:1fr;gap:3px}}

/* v1.3.1 — Foto pasport murid + Media Library */
.photo-box{overflow:hidden;background:#eef3f9;padding:0!important}.photo-box img{width:100%;height:100%;object-fit:cover;display:block}.student-big-avatar.photo-box{width:78px;height:112px;flex:0 0 78px;border-radius:14px}.student-list-identity{display:flex;align-items:center;gap:11px;min-width:240px}.student-list-photo{width:38px;height:54px;flex:0 0 38px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:900;overflow:hidden}.student-list-photo img{width:100%;height:100%;object-fit:cover}.student-photo-editor{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fafcff}.passport-photo-stage{width:210px;aspect-ratio:7/10;border-radius:16px;overflow:hidden;background:#edf2f7;border:1px solid #d6dce5;display:grid;place-items:center}.passport-photo-stage img{width:100%;height:100%;object-fit:cover}.passport-placeholder{display:grid;place-items:center;gap:5px;text-align:center;color:#667085}.passport-placeholder b{font-size:26px;color:#98a2b3}.passport-placeholder span{font-weight:800}.photo-editor-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.photo-upload-status{margin-top:12px}.ok-note{background:var(--green-bg)!important;border-color:#ccecdf!important;color:var(--green)!important}.passport-camera-panel,.media-picker{grid-column:2}.passport-camera-panel{margin-top:14px}.passport-camera-frame{position:relative;width:min(360px,100%);aspect-ratio:7/10;border-radius:18px;overflow:hidden;background:#101828;margin-bottom:12px}.passport-camera-frame video{width:100%;height:100%;object-fit:cover}.passport-face-guide{position:absolute;inset:7%;border:2px dashed rgba(255,255,255,.85);border-radius:42% 42% 36% 36%;display:flex;align-items:flex-end;justify-content:center;padding:16px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none}.media-picker{margin-top:14px}.media-picker summary{cursor:pointer;font-weight:900;color:var(--blue)}.media-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:16px}.library-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}.compact-media-grid{grid-template-columns:repeat(6,minmax(90px,1fr))}.media-card,.media-pick-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:12px;text-align:left}.media-card{display:grid;gap:10px}.media-pick-card{cursor:pointer;color:var(--ink)}.media-pick-card:hover:not(:disabled),.media-pick-card.selected{border-color:#7bb3f5;box-shadow:0 0 0 3px rgba(11,99,206,.1)}.media-pick-card.is-used{opacity:.48;cursor:not-allowed}.passport-media-frame{display:block;width:100%;aspect-ratio:7/10;border-radius:12px;overflow:hidden;background:#eef3f9}.passport-media-frame img{width:100%;height:100%;object-fit:cover;display:block}.media-meta{min-width:0}.media-meta b,.media-meta small{overflow-wrap:anywhere}.media-upload-card{margin-bottom:18px}.scan-success .student-big-avatar.photo-box{margin:0 auto 12px}
@media(max-width:900px){.student-photo-editor{grid-template-columns:190px minmax(0,1fr)}.passport-photo-stage{width:180px}.media-grid,.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-media-grid{grid-template-columns:repeat(4,minmax(90px,1fr))}}
@media(max-width:620px){.student-photo-editor{grid-template-columns:1fr}.passport-photo-stage{width:min(210px,70vw);margin:auto}.photo-editor-actions{justify-content:center}.passport-camera-panel,.media-picker{grid-column:1}.media-grid,.library-grid,.compact-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-big-avatar.photo-box{width:70px;height:100px;flex-basis:70px}.profile-hero{align-items:flex-start;flex-wrap:wrap}}
@media print{.student-big-avatar.photo-box{width:58px;height:83px;flex-basis:58px}.photo-editor-actions,.photo-upload-status,.media-picker,.passport-camera-panel{display:none!important}}


/* v1.3.2 — Kad QR: identiti sekolah + kelas, tanpa nama blok/dorm */
.qr-card-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 4px 12px;margin-bottom:8px;border-bottom:1px solid var(--line);text-align:left}.qr-card-brand img{width:42px;height:42px;object-fit:contain;flex:0 0 42px}.qr-card-brand div{min-width:0}.qr-card-brand strong{display:block;font-size:16px;line-height:1.2;letter-spacing:.02em}.qr-card-brand small{font-size:16px;line-height:1.25;margin-top:2px}.qr-student-name{font-size:16px!important;line-height:1.3;margin-top:2px}.qr-student-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);text-align:left}.qr-student-meta span{font-size:16px!important;color:var(--ink)!important;line-height:1.35}.qr-student-meta strong{font-weight:900}
@media(max-width:620px){.qr-student-meta{grid-template-columns:1fr}.qr-card-brand{justify-content:flex-start}}
@media print{.qr-card-brand{gap:6px;padding-bottom:6px;margin-bottom:4px}.qr-card-brand img{width:30px!important;height:30px!important}.qr-card-brand strong{font-size:10px}.qr-card-brand small{font-size:9px}.qr-student-name{font-size:10px!important}.qr-student-meta{gap:3px 6px;margin-top:5px;padding-top:5px}.qr-student-meta span{font-size:9px!important}.qr-card{border-radius:10px}}


/* v1.3.5 — Smart Print Kad QR A4 Portrait: maksimum 9 kad setiap halaman (3 × 3). */
@page{size:A4 portrait;margin:8mm}
.smart-print-root{display:grid;gap:16px}
.smart-print-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px}
.smart-print-head h2{margin:6px 0 8px;font-size:32px;line-height:1.05;letter-spacing:-.03em}
.smart-print-head p{margin:0;color:var(--muted);font-size:16px}
.smart-print-actions{display:flex;gap:10px;flex-wrap:wrap}
.qr-print-page{background:#fff}
.qr-print-page+.qr-print-page{margin-top:16px}

@media print{
  html,body{width:auto!important;min-width:0!important;margin:0!important;padding:0!important;background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .app-shell,.main-content,.content-wrap,.minimal-main{width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;background:#fff!important}
  .smart-print-head{display:none!important}
  .smart-print-root{display:block!important;margin:0!important;padding:0!important}
  /* v1.5.29 — each QR batch occupies one physical A4 page only.
     Avoid full-printable-height containers because Chromium can treat the
     explicit page break as an additional blank sheet. */
  .qr-print-page{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important;break-after:page!important;break-inside:avoid-page!important;page-break-inside:avoid!important}
  .qr-print-page:last-child{break-after:auto!important}
  .qr-print-page .qr-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,84mm)!important;grid-auto-rows:84mm!important;gap:3mm!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;max-width:none!important;margin:0!important;padding:0!important;align-items:stretch!important}
  .qr-print-page .qr-card{width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:3mm!important;border:0.25mm solid #d9dee7!important;border-radius:2.8mm!important;box-shadow:none!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important;display:flex!important;flex-direction:column!important;text-align:center!important}
  .qr-print-page .qr-card-brand{min-height:11mm!important;gap:2mm!important;padding:0 0 2mm!important;margin:0 0 1.5mm!important;justify-content:flex-start!important;border-bottom:0.25mm solid #e3e7ed!important}
  .qr-print-page .qr-card-brand img{width:10mm!important;height:10mm!important;max-width:10mm!important;max-height:10mm!important;flex:0 0 10mm!important}
  .qr-print-page .qr-card-brand strong{font-size:9pt!important;line-height:1.08!important;letter-spacing:0!important}
  .qr-print-page .qr-card-brand small{font-size:7.5pt!important;line-height:1.08!important;margin-top:.5mm!important}
  .qr-print-page .qr-target{min-height:42mm!important;height:42mm!important;margin:0 auto 1.5mm!important;display:grid!important;place-items:center!important;flex:0 0 42mm!important}
  .qr-print-page .qr-target canvas,.qr-print-page .qr-target img{width:42mm!important;height:42mm!important;max-width:42mm!important;max-height:42mm!important}
  .qr-print-page .qr-student-name{min-height:10mm!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:9.5pt!important;line-height:1.12!important;font-weight:900!important}
  .qr-print-page .qr-student-meta{margin-top:auto!important;padding-top:1.6mm!important;gap:1mm 2mm!important;grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr)!important;border-top:0.25mm solid #e3e7ed!important;text-align:left!important}
  .qr-print-page .qr-student-meta span{min-width:0!important;font-size:7.5pt!important;line-height:1.14!important;white-space:nowrap!important}
}

/* v1.3.6 — Operasi & Laporan Syif PPM + Rondaan Asrama */
.shift-report-list{display:grid;gap:18px;margin-top:18px}.shift-report-card{border-left:5px solid var(--blue)}.aspect-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}.aspect-chip{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fbfcfe;display:grid;gap:6px;align-content:start}.aspect-chip b{font-size:14px}.aspect-chip small{font-size:12px}.shift-aspect{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fbfcfe}.shift-aspect label{font-size:15px}.shift-aspect small{min-height:36px}.patrol-card{overflow:hidden}.patrol-evidence{width:100%;max-height:320px;object-fit:cover;border-radius:14px;margin:4px 0 14px;border:1px solid var(--line)}
@media(max-width:1000px){.aspect-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.aspect-grid{grid-template-columns:1fr 1fr}.shift-aspect{grid-column:span 2}.patrol-evidence{max-height:240px}}
@media print{.shift-report-card{break-inside:avoid;page-break-inside:avoid}.patrol-evidence{max-height:60mm}.aspect-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.aspect-chip{padding:7px}.aspect-chip small{font-size:9pt}}

/* v1.3.6 — operational media */
.operation-media-frame{aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:#eef3f8;display:flex;align-items:center;justify-content:center}
.operation-media-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* v1.3.6 — daily operation report */
.daily-brand{display:flex;align-items:center;gap:14px}.daily-brand>img{width:62px;height:62px;object-fit:contain}.daily-shifts{display:grid;gap:14px}.daily-shift-card{break-inside:avoid}.daily-system-summary{break-inside:avoid}.daily-operation-report .report-footer{margin-top:18px}
@media print{.daily-operation-report .daily-report-head{break-after:avoid}.daily-operation-report .daily-shift-card{page-break-inside:avoid}.daily-operation-report .stat-card{box-shadow:none}.daily-operation-report .card{border-color:#ccd4df}.daily-operation-report .daily-brand>img{width:48px;height:48px}}


/* ==========================================================================
   v1.4.0 — Premium Panel System
   Visual system upgrade for dashboard, forms, actions, tables and reports.
   No domain/business logic changes.
   ========================================================================== */
:root{
  --blue:#0a66d8;
  --blue-dark:#074da8;
  --blue-deep:#072b5f;
  --blue-soft:#edf5ff;
  --cyan:#0ea5c6;
  --ink:#12213a;
  --ink-2:#23334f;
  --muted:#69758a;
  --line:#dce4ef;
  --line-strong:#cbd6e4;
  --soft:#f3f6fb;
  --panel:#ffffff;
  --green:#067a58;
  --green-bg:#eaf8f2;
  --orange:#b95c08;
  --orange-bg:#fff5e8;
  --red:#bd342e;
  --red-bg:#fff1ef;
  --purple:#6547c9;
  --purple-bg:#f3efff;
  --shadow-sm:0 4px 14px rgba(15,34,63,.06);
  --shadow:0 18px 48px rgba(15,34,63,.10);
  --shadow-lg:0 28px 80px rgba(8,39,83,.15);
  --radius:22px;
  --radius-sm:14px;
  --sidebar:286px;
}
html{background:#eef3f9}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 92% 3%,rgba(10,102,216,.085),transparent 26rem),
    radial-gradient(circle at 50% 100%,rgba(14,165,198,.05),transparent 30rem),
    linear-gradient(180deg,#f7f9fd 0,#f2f5fa 50%,#eef3f9 100%);
}
body::selection{background:#cfe6ff;color:#082d62}

/* Premium shell */
.sidebar{
  width:var(--sidebar);
  background:
    radial-gradient(circle at 25% 0,rgba(56,139,255,.26),transparent 17rem),
    linear-gradient(180deg,#082e64 0%,#073b7d 48%,#062a59 100%);
  border-right:1px solid rgba(255,255,255,.08);
  padding:20px 16px 18px;
  box-shadow:16px 0 48px rgba(7,43,95,.10);
}
.sidebar .brand{
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  border-radius:18px;
  backdrop-filter:blur(10px);
}
.sidebar .brand img{width:50px;height:50px;border-radius:15px;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.sidebar .brand b{font-size:16px;letter-spacing:-.01em}
.sidebar .brand small{font-size:16px;color:rgba(255,255,255,.72)}
.role-banner{
  margin:13px 4px 0;
  padding:9px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#dcecff;
  font-size:16px;
  font-weight:900;
  letter-spacing:.055em;
}
.sidebar nav{margin-top:18px}
.nav-group{gap:4px;margin-bottom:18px}
.nav-group>span{padding:0 11px 7px;font-size:16px;color:rgba(255,255,255,.52);letter-spacing:.16em}
.nav-group a{
  position:relative;
  display:flex;
  align-items:center;
  min-height:43px;
  padding:10px 13px 10px 15px;
  border:1px solid transparent;
  border-radius:13px;
  font-size:16px;
  font-weight:700;
  color:rgba(244,249,255,.82);
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}
.nav-group a::before{
  content:"";
  width:7px;height:7px;
  flex:0 0 7px;
  margin-right:11px;
  border-radius:999px;
  background:rgba(255,255,255,.27);
  box-shadow:0 0 0 4px rgba(255,255,255,0);
  transition:.18s ease;
}
.nav-group a:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.08);transform:translateX(2px);color:#fff}
.nav-group a.active{
  color:#072b5f;
  background:linear-gradient(135deg,#fff 0%,#edf6ff 100%);
  border-color:rgba(255,255,255,.45);
  box-shadow:0 10px 26px rgba(2,22,51,.17);
}
.nav-group a.active::before{background:var(--blue);box-shadow:0 0 0 4px rgba(10,102,216,.13)}
.sidebar-user{
  margin-top:auto;
  padding:13px 11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.065);
}
.sidebar-user .avatar-sm{background:#fff;color:#0a4f9e;box-shadow:0 7px 18px rgba(0,0,0,.13)}
.sidebar-user b{font-size:16px}
.sidebar-user small{font-size:16px;color:rgba(255,255,255,.62)}
.sidebar-user>a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08)}

.main-content{margin-left:var(--sidebar)}
.desktop-topbar{
  position:sticky;
  top:0;
  z-index:24;
  height:70px;
  border-bottom:1px solid rgba(203,214,228,.78);
  background:rgba(248,250,253,.86);
  backdrop-filter:blur(16px) saturate(150%);
}
.desktop-topbar .topbar-inner{
  width:min(1320px,calc(100% - 56px));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.topbar-context{min-width:0;display:flex;align-items:center;gap:12px}
.topbar-mark{width:10px;height:10px;border-radius:50%;background:#16a36f;box-shadow:0 0 0 5px rgba(22,163,111,.11)}
.topbar-context strong{display:block;max-width:660px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;letter-spacing:-.01em}
.topbar-context small{display:block;margin-top:1px;font-size:16px;color:var(--muted)}
.topbar-user{display:flex;align-items:center;gap:10px}
.topbar-role{
  display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;
  border:1px solid #cfe0f7;border-radius:999px;background:#edf5ff;color:#0753b0;
  font-size:16px;font-weight:900;letter-spacing:.025em;text-transform:uppercase;
}
.topbar-profile{display:flex;align-items:center;gap:9px;padding:6px 8px 6px 6px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.topbar-profile .avatar-sm{width:34px;height:34px;border-radius:10px}
.topbar-profile b{font-size:16px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content-wrap{width:min(1320px,calc(100% - 56px));padding:34px 0 86px}

/* Page heading */
.page-head{align-items:center;margin-bottom:26px;padding:2px 2px 0}
.page-head>div:first-child{min-width:0}
.page-head h1{font-size:clamp(38px,4.4vw,56px);line-height:1.02;letter-spacing:-.045em;color:#10213d;margin:8px 0 10px}
.page-head h2{font-size:30px;letter-spacing:-.025em;color:#10213d}
.page-head p{max-width:820px;font-size:18px;line-height:1.65;color:#657187}
.eyebrow{
  gap:7px;
  background:#eaf4ff;
  border:1px solid #d3e7ff;
  color:#0759bd;
  padding:7px 11px;
  font-size:16px;
  letter-spacing:.09em;
  box-shadow:0 3px 10px rgba(10,102,216,.04);
}
.page-actions{align-items:center}

/* Buttons */
.btn{
  min-height:48px;
  padding:12px 18px;
  border:1px solid transparent;
  border-radius:13px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.005em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  color:#fff;
  background:linear-gradient(135deg,#0c70e8 0%,#0758be 100%);
  border-color:#0a5fc8;
  box-shadow:0 10px 24px rgba(10,102,216,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.primary:hover{background:linear-gradient(135deg,#0a65d7,#064ba5);box-shadow:0 13px 30px rgba(10,102,216,.28)}
.btn.soft{
  color:#2e405e;
  background:#fff;
  border-color:#d7e0eb;
  box-shadow:0 4px 12px rgba(15,34,63,.04);
}
.btn.soft:hover{background:#f8fbff;border-color:#bfcde0;box-shadow:0 8px 20px rgba(15,34,63,.075)}
.btn.small{min-height:42px;padding:9px 13px;border-radius:10px;font-size:16px}
.link-btn{font-weight:800;text-underline-offset:3px}
.link-btn:hover,.actions a:hover{text-decoration:underline}

/* Cards and stats */
.card{
  border:1px solid rgba(215,225,237,.92);
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fefeff 100%);
  box-shadow:0 10px 32px rgba(20,43,78,.065);
  padding:24px;
}
.card:hover{border-color:#ccd8e7}
.card-head{margin-bottom:17px;padding-bottom:13px;border-bottom:1px solid #e8edf4}
.card-head h2,.card-head h3{letter-spacing:-.02em;color:#142743}
.card-head a{font-size:16px}
.stat-grid{gap:16px;margin-bottom:20px}
.stat-card{
  position:relative;
  overflow:hidden;
  min-height:122px;
  padding:20px 20px 18px;
  border:1px solid #dce5f0;
  border-radius:20px;
  background:linear-gradient(145deg,#fff 0%,#f9fbfe 100%);
  box-shadow:0 9px 26px rgba(18,45,82,.055);
}
.stat-card::after{content:"";position:absolute;right:-25px;top:-28px;width:92px;height:92px;border-radius:50%;background:rgba(10,102,216,.055)}
.stat-card b{position:relative;z-index:1;font-size:38px;letter-spacing:-.035em;color:#122a4a}
.stat-card span{position:relative;z-index:1;font-size:16px;color:#68758b}
.stat-card.ok{background:linear-gradient(145deg,#fff,#effaf6);border-color:#caeadf}.stat-card.ok::after{background:rgba(6,122,88,.075)}
.stat-card.warn{background:linear-gradient(145deg,#fff,#fff6ea);border-color:#f1dbc0}.stat-card.warn::after{background:rgba(185,92,8,.07)}
.stat-card.danger{background:linear-gradient(145deg,#fff,#fff2f0);border-color:#efd3cf}.stat-card.danger::after{background:rgba(189,52,46,.07)}
.stat-card.info{background:linear-gradient(145deg,#fff,#edf6ff);border-color:#cfe1f8}.stat-card.info::after{background:rgba(10,102,216,.08)}
.stat-card.purple{background:linear-gradient(145deg,#fff,#f5f1ff);border-color:#dfd5f7}.stat-card.purple::after{background:rgba(101,71,201,.07)}
.quick-grid{gap:16px}
.quick-card{
  position:relative;overflow:hidden;
  border:1px solid #dce5ef;border-radius:20px;padding:21px;
  background:linear-gradient(155deg,#fff 0%,#f8fbff 100%);
  box-shadow:0 8px 24px rgba(15,34,63,.05);
  transition:.18s ease;
}
.quick-card:hover{transform:translateY(-3px);border-color:#bcd4ef;box-shadow:0 16px 35px rgba(15,50,91,.11)}
.quick-card b{font-size:19px;color:#173257;letter-spacing:-.015em}
.quick-card span{font-size:16px;line-height:1.55}
.highlight{border-left:0;position:relative;background:linear-gradient(145deg,#fff,#f2f8ff);border-color:#cfe0f4}
.highlight::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:99px;background:linear-gradient(#0a70e5,#16a4c4)}

/* Premium forms */
.card.form-grid,form.card{
  border-color:#d8e2ee;
  box-shadow:0 18px 50px rgba(16,42,77,.075);
}
.form-grid{gap:18px}
.form-section-title{
  margin:6px -6px 0;
  padding:17px 18px 15px;
  border:1px solid #dfe8f2;
  border-radius:17px;
  background:linear-gradient(135deg,#f8fbff 0%,#f1f7ff 100%);
}
.form-section-title h3{margin:8px 0 4px;font-size:22px;letter-spacing:-.025em;color:#153259}
.form-section-title p{margin:0;color:#6a7689;line-height:1.58;font-size:16px}
.field{gap:8px}
.field label,.manual-scan label,.scanner-controls label{font-size:16px;font-weight:800;color:#263b5b;letter-spacing:-.005em}
.field input,.field select,.field textarea,.filter-bar input,.filter-bar select,.inline-form-grid input,.inline-form-grid select,.scanner-controls select,.manual-scan input{
  min-height:50px;
  border:1px solid #ccd7e5;
  border-radius:13px;
  background:#fbfdff;
  color:#162844;
  padding:12px 14px;
  box-shadow:inset 0 1px 2px rgba(15,34,63,.025);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field textarea{min-height:108px;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover,.filter-bar input:hover,.filter-bar select:hover{border-color:#b8c7da;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus,.filter-bar input:focus,.filter-bar select:focus,.manual-scan input:focus,.inline-form-grid input:focus,.inline-form-grid select:focus{
  border-color:#4f9aef;
  background:#fff;
  box-shadow:0 0 0 4px rgba(10,102,216,.11),0 7px 18px rgba(10,102,216,.055);
}
.field small{font-size:16px;line-height:1.5;color:#7a8496}
.form-actions{
  margin-top:5px;
  padding-top:18px;
  border-top:1px solid #e5ebf2;
  align-items:center;
  flex-wrap:wrap;
}
.form-actions .btn.primary{min-width:150px}
.form-details{border:1px solid #e0e7f0;border-radius:16px;background:#fbfcfe;padding:16px}
.form-details summary{color:#17365e}
.filter-bar{
  padding:12px;
  border:1px solid #dce5ef;
  border-radius:17px;
  background:rgba(255,255,255,.84);
  box-shadow:0 7px 20px rgba(20,43,78,.045);
}
.filter-bar input,.filter-bar select{min-width:190px;background:#fff}

/* Tables */
.table-card{border:1px solid #d9e2ed;border-radius:20px;box-shadow:0 14px 36px rgba(20,43,78,.06);background:#fff}
.table-wrap table{min-width:720px}
.table-wrap th{
  position:sticky;top:0;z-index:2;
  padding:14px 17px;
  background:linear-gradient(180deg,#f7faff,#f1f6fb);
  color:#435570;
  font-size:16px;
  letter-spacing:.055em;
  border-bottom:1px solid #d9e3ee;
}
.table-wrap td{padding:15px 17px;border-bottom:1px solid #e9eef4;color:#263650}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tr:hover td{background:#f8fbff}
.actions a,.actions .link-btn{display:inline-flex;align-items:center;min-height:34px;padding:5px 8px;border-radius:8px;margin:0 4px 4px 0}
.actions a:hover,.actions .link-btn:hover{background:#edf5ff;text-decoration:none}

/* Pills, notices and alerts */
.pill{padding:6px 10px;border:1px solid rgba(102,112,133,.12);font-size:16px;letter-spacing:.01em}
.alert{padding:14px 17px;border-radius:15px;box-shadow:0 6px 18px rgba(20,43,78,.04)}
.notice{background:#f7faff;border-color:#dce6f1;color:#4d5f79}
.ok-note{border-color:#c9e8dc!important;background:#effaf6!important;color:#086c50!important}
.warn-note{border-color:#f0d7b8!important;background:#fff6ea!important;color:#a15008!important}

/* Profiles / media / operations */
.profile-hero{padding:18px;border:1px solid #dbe4ef;border-radius:20px;background:linear-gradient(145deg,#fff,#f5f9ff);box-shadow:var(--shadow-sm)}
.student-big-avatar{border:1px solid #cfe1f7;box-shadow:0 8px 20px rgba(10,102,216,.08)}
.profile-hero h1{letter-spacing:-.035em;color:#112c50}
.timeline-row{padding:14px 2px}
.event-card,.directory-card,.shift-report-card,.patrol-card{box-shadow:0 10px 28px rgba(17,43,79,.055)}
.shift-report-card{border-left:0;position:relative}
.shift-report-card::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:5px;border-radius:99px;background:linear-gradient(#0a70e6,#11a8c8)}
.shift-aspect{border-color:#dbe4ef;background:linear-gradient(180deg,#fbfdff,#f7faff);border-radius:17px;padding:16px}
.passport-photo-stage,.passport-camera-frame{box-shadow:0 10px 30px rgba(17,43,79,.09)}
.media-card,.media-pick-card{border-color:#d9e4ef;box-shadow:0 7px 19px rgba(17,43,79,.045)}
.media-card:hover,.media-pick-card:hover:not(:disabled){border-color:#a9ccef;box-shadow:0 12px 28px rgba(10,102,216,.10)}

/* Scanner */
.scanner-card{box-shadow:0 18px 48px rgba(15,34,63,.08)}
.camera-box{border:1px solid #21324b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 16px 38px rgba(8,23,47,.16)}
.camera-overlay{border-color:rgba(255,255,255,.92);box-shadow:0 0 0 999px rgba(0,0,0,.12)}
.scan-result{border-radius:18px;background:linear-gradient(145deg,#fbfdff,#f2f8ff);border:1px dashed #c9d9eb}

/* Reports */
.report-link{transition:.18s ease}
.report-link:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(17,43,79,.09);border-color:#b6cee8}
.report-sheet,.daily-operation-report{
  position:relative;
  border:1px solid #d2ddea;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 68px rgba(16,42,77,.12);
}
.report-sheet::before,.daily-operation-report::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#0870e9,#0ea5c6 55%,#6b56ca);
}
.report-header{padding-bottom:19px;border-bottom:1px solid #c9d5e3}
.report-header img{width:72px;height:72px;object-fit:contain;padding:5px;border:1px solid #dfe7ef;border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.report-header h1{font-size:32px;letter-spacing:-.035em;color:#102a4a}
.report-header span{color:#0a61c9}
.report-student{background:#f8fbff;margin:18px 0 0;padding:18px;border:1px solid #e0e8f1;border-radius:17px}
.report-grid section,.report-sections section{border-color:#dce5ef;border-radius:17px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.report-grid h3,.report-sections h3{font-size:16px;color:#173559}
.daily-brand>img{padding:4px;border-radius:14px;border:1px solid #dfe7ef;background:#fff;box-shadow:var(--shadow-sm)}
.daily-report-head{padding-bottom:17px;border-bottom:1px solid #d9e2ed}
.daily-shift-card{border-color:#dce5ef;background:linear-gradient(180deg,#fff,#fbfdff)}
.report-footer{font-size:16px;color:#718096}

/* Login/access surfaces */
.minimal-main .content-wrap{padding-top:54px}
.login-card{border:1px solid #d5e1ee;box-shadow:0 28px 80px rgba(13,43,81,.14)}
.login-brand img{padding:5px;border:1px solid #dfe7ef;border-radius:15px;background:#fff}
.access-card{border-color:#d9e3ee;box-shadow:0 15px 42px rgba(16,42,77,.08)}
.access-card:hover{box-shadow:0 22px 58px rgba(16,42,77,.14);border-color:#bad2ec}
.access-card.primary-card{background:linear-gradient(145deg,#0b6ddd,#073f89);box-shadow:0 22px 52px rgba(7,69,148,.24)}

/* Guard and parent headers */
.guard-top,.parent-top{border-bottom:1px solid #dbe4ee;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 7px 24px rgba(20,43,78,.05)}
.guard-top nav a{border-radius:10px;padding:8px 10px;font-weight:700}
.guard-top nav a.active,.guard-top nav a:hover{background:#edf5ff;color:#0759bd}

/* Responsive refinements */
@media(max-width:1180px){
  :root{--sidebar:250px}
  .desktop-topbar .topbar-inner,.content-wrap{width:min(1180px,calc(100% - 40px))}
  .topbar-profile b{display:none}
}
@media(max-width:780px){
  .desktop-topbar{display:none}
  .content-wrap{width:min(100% - 28px,760px);padding-top:24px;padding-bottom:104px}
  .page-head{align-items:flex-start}
  .page-head h1{font-size:40px}
  .page-head p{font-size:16px}
  .card{padding:19px;border-radius:18px}
  .form-section-title{margin-left:0;margin-right:0}
  .btn{min-height:48px}
  .filter-bar{padding:10px}
  .filter-bar input,.filter-bar select{min-width:min(100%,230px)}
}
@media(max-width:470px){
  .content-wrap{width:calc(100% - 22px)}
  .page-head h1{font-size:36px}
  .page-actions{width:100%}.page-actions .btn{flex:1}
  .form-actions .btn{flex:1 1 100%}
  .card{padding:17px}
}

/* Printing must stay clean and document-like. */
@media print{
  .desktop-topbar{display:none!important}
  body{background:#fff!important;color:#111!important}
  .card,.table-card,.report-sheet,.daily-operation-report,.stat-card,.quick-card,.event-card,.directory-card,.shift-report-card,.patrol-card{box-shadow:none!important}
  .report-sheet,.daily-operation-report{border-radius:0!important}
  .report-sheet::before,.daily-operation-report::before{display:none!important}
  .report-student{background:#fff!important}
  .table-wrap th{position:static!important;background:#f4f4f4!important}
}

/* SCF typography guard: all readable panel text is at least 16px.
   QR physical-card print rules remain a documented compact print exception. */
body:not(.smart-print-mode) small,
.sidebar .brand small,.role-banner,.nav-group>span,.nav-group a,.sidebar-user b,.sidebar-user small,
.topbar-context small,.topbar-role,.topbar-profile b,.eyebrow,.btn,.btn.small,.card-head a,.stat-card span,.quick-card span,
.field label,.field small,.manual-scan label,.scanner-controls label,.table-wrap th,.pill,.report-footer,.event-date span{font-size:16px}

/* Additional readable metadata guard for operational cards. */
.mini-stats span,.aspect-chip b,.shift-aspect label,.qr-card b{font-size:16px}

/* ==========================================================================
   v1.4.1 — UI Refinement
   Navigation accordion, consistent icons, compact account bar, denser reports,
   visual operational summaries and premium empty states.
   ========================================================================== */
:root{--sidebar:300px}

/* Sidebar refinement */
.sidebar{padding:18px 15px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar .brand{padding:10px 11px;margin-bottom:2px}
.sidebar .brand img{width:46px;height:46px}
.sidebar .brand small{margin-top:2px}
.sidebar nav.sidebar-nav{margin-top:16px;display:grid;gap:7px}
.nav-section{margin:0;border:1px solid transparent;border-radius:15px;overflow:hidden}
.nav-section[open]{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.055)}
.nav-section>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:10px 12px;color:rgba(236,246,255,.66);font-size:16px;font-weight:900;letter-spacing:.11em;cursor:pointer;user-select:none;text-transform:uppercase}
.nav-section>summary::-webkit-details-marker{display:none}
.nav-section>summary:hover{color:#fff;background:rgba(255,255,255,.045)}
.nav-chevron{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .16s ease;margin-right:4px;margin-top:-4px}
.nav-section[open] .nav-chevron{transform:rotate(225deg);margin-top:4px}
.nav-section .nav-group{display:grid;gap:3px;margin:0;padding:0 7px 8px}
.nav-section .nav-group a{min-height:44px;padding:9px 10px;border-radius:11px;font-size:16px;gap:10px}
.nav-section .nav-group a::before{display:none!important}
.nav-ico{width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px;color:rgba(226,240,255,.64)}
.nav-ico svg{width:19px;height:19px;display:block}
.nav-group a:hover .nav-ico{color:#fff}
.nav-group a.active .nav-ico{color:#0a66d8}
.nav-group a>span:last-child{min-width:0;line-height:1.28}
.sidebar-user{margin-top:14px;position:sticky;bottom:0;background:linear-gradient(145deg,rgba(10,61,129,.96),rgba(7,45,98,.98));backdrop-filter:blur(12px)}

/* Cleaner desktop top bar */
.desktop-topbar{height:66px}
.topbar-context strong{font-size:17px}
.topbar-context small{font-size:16px}
.topbar-account{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 10px 6px 7px;border:1px solid #d8e2ee;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(15,34,63,.055)}
.topbar-account .avatar-sm{width:36px;height:36px;border-radius:10px;flex:0 0 36px}
.topbar-account>div:last-child{min-width:0}
.topbar-account b{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:1.2;color:#18304f}
.topbar-account small{display:block;margin-top:2px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:1.15;color:#65758b}

/* Page rhythm and action refinement */
.content-wrap{width:min(1280px,calc(100% - 52px));padding-top:30px}
.page-head{margin-bottom:22px}
.page-head.compact{margin-top:24px;margin-bottom:16px}
.page-head.compact h2{font-size:28px}
.page-head.compact p{font-size:16px;line-height:1.55}
.page-actions .btn{white-space:nowrap}
.btn{box-shadow:0 3px 10px rgba(20,43,78,.04)}
.btn:focus-visible{outline:3px solid rgba(10,102,216,.22);outline-offset:2px}

/* Forms: clearer grouping and action hierarchy */
.field label{display:flex;align-items:center;gap:6px}
.field input::placeholder,.field textarea::placeholder{color:#98a5b7}
.field select{background-color:#fff}
.form-actions{justify-content:flex-end}
.form-actions .btn.soft{order:-1}
.inline-form-grid{align-items:end}
.check-row{min-height:44px;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #e0e7f0;border-radius:11px;background:#fbfdff}
.check-row input{width:18px;height:18px;accent-color:var(--blue)}

/* Tables: less spreadsheet-like, more operational */
.table-card{overflow:hidden}
.table-wrap th{height:48px;vertical-align:middle}
.table-wrap td{line-height:1.5}
.table-wrap tbody tr{transition:background .14s ease}
.table-wrap tbody tr:nth-child(even) td{background:#fcfdff}
.table-wrap tbody tr:hover td{background:#f3f8ff}
.table-wrap td:first-child,.table-wrap th:first-child{padding-left:20px}
.table-wrap td:last-child,.table-wrap th:last-child{padding-right:20px}

/* Report KPI cards */
.daily-operation-report{padding:0 0 4px;overflow:hidden}
.daily-operation-report>.daily-report-head,.daily-operation-report>.daily-kpi-grid,.daily-operation-report>.daily-system-summary,.daily-operation-report>.page-head.compact,.daily-operation-report>.daily-shifts,.daily-operation-report>.table-card,.daily-operation-report>.premium-empty,.daily-operation-report>.report-footer{margin-left:0;margin-right:0}
.daily-operation-report .daily-report-head{padding:26px 26px 20px;margin-bottom:20px;background:linear-gradient(135deg,#fbfdff,#f6faff)}
.daily-operation-report .daily-kpi-grid{padding:0 26px;margin-bottom:16px}
.daily-kpi-grid .stat-card{min-height:104px;padding:16px 17px;display:grid;grid-template-columns:46px 1fr;gap:13px;align-items:center}
.metric-symbol{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#edf5ff;border:1px solid #d5e7fb;color:#0b62cc;font-size:18px;font-weight:900;line-height:1}
.stat-card.warn .metric-symbol{background:#fff2df;border-color:#f0d6b4;color:#a95308}
.stat-card.ok .metric-symbol{background:#eaf8f2;border-color:#cae9dd;color:#087458}
.metric-copy{min-width:0}.metric-copy b{display:block;font-size:31px}.metric-copy span{display:block;margin-top:4px;font-size:16px}

.daily-operation-report .daily-system-summary{margin:0 26px 10px;padding:20px}
.daily-system-summary .card-head{margin-bottom:15px;padding-bottom:13px}
.daily-system-summary .card-head p{margin:5px 0 0;color:#718096;font-size:16px}
.summary-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.summary-metric{min-height:74px;padding:12px 13px;border:1px solid #e1e8f1;border-radius:14px;background:#f9fbfe;display:flex;flex-direction:column;justify-content:center}
.summary-metric span{font-size:16px;color:#6c7890;font-weight:700}
.summary-metric b{font-size:26px;line-height:1.05;color:#15345c;margin-top:5px}
.status-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #e4eaf2}
.status-summary-strip>div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:9px 12px;border-radius:12px;background:#f4f8fc;border:1px solid #e1e8f0}
.status-summary-strip span{font-size:16px;color:#596981;font-weight:750}
.status-summary-strip b{font-size:21px;color:#17365f}
.status-summary-strip .is-alert{background:#fff1ef;border-color:#efcfca}.status-summary-strip .is-alert span,.status-summary-strip .is-alert b{color:#ad312c}
.daily-operation-report>.page-head.compact{padding:0 26px}
.daily-operation-report>.daily-shifts{padding:0 26px}
.daily-operation-report>.table-card{margin:0 26px}
.daily-operation-report>.premium-empty{margin:0 26px}
.daily-operation-report>.report-footer{margin:22px 26px 0;padding:15px 0 20px}
.daily-shift-card{padding:20px}

/* Premium empty states */
.premium-empty{min-height:150px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 24px;background:linear-gradient(145deg,#fff,#f8fbff);border-style:dashed}
.empty-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#edf5ff;border:1px solid #d3e6fb;color:#0a62cc;font-size:20px;font-weight:900}
.premium-empty h3{margin:0 0 5px;font-size:20px;color:#193557}
.premium-empty p{margin:0;max-width:680px;color:#6c7890;line-height:1.55;font-size:16px}
.empty-actions{display:flex;align-items:center;justify-content:flex-end}

/* Report visual density */
.daily-operation-report .aspect-grid{gap:8px;margin:13px 0}
.daily-operation-report .aspect-chip{padding:11px;border-radius:13px}
.daily-operation-report .card-head h3{margin-bottom:3px}
.report-footer{text-align:left}

@media(max-width:1180px){
  :root{--sidebar:268px}
  .content-wrap,.desktop-topbar .topbar-inner{width:min(1180px,calc(100% - 38px))}
  .nav-section .nav-group a{padding-left:9px;padding-right:9px}
  .topbar-account b,.topbar-account small{max-width:150px}
}
@media(max-width:980px){
  .summary-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  :root{--sidebar:0px}
  .content-wrap{width:min(100% - 28px,760px)}
  .daily-operation-report .daily-report-head{padding:20px 18px 16px}
  .daily-operation-report .daily-kpi-grid,.daily-operation-report>.page-head.compact,.daily-operation-report>.daily-shifts{padding-left:18px;padding-right:18px}
  .daily-operation-report .daily-system-summary,.daily-operation-report>.table-card,.daily-operation-report>.premium-empty{margin-left:18px;margin-right:18px}
  .daily-operation-report>.report-footer{margin-left:18px;margin-right:18px}
  .daily-kpi-grid .stat-card{grid-template-columns:40px 1fr}.metric-symbol{width:40px;height:40px}
  .premium-empty{grid-template-columns:auto 1fr}.empty-actions{grid-column:1/-1;justify-content:flex-start}.empty-actions .btn{width:100%}
}
@media(max-width:560px){
  .summary-metric-grid,.status-summary-strip{grid-template-columns:1fr 1fr}
  .daily-operation-report .daily-kpi-grid{grid-template-columns:1fr}
  .premium-empty{grid-template-columns:1fr;text-align:center}.empty-icon{margin:auto}.empty-actions{justify-content:center}
}

@media print{
  @page{size:A4 portrait;margin:11mm}
  .daily-operation-report{border:0!important;padding:0!important;overflow:visible!important}
  .daily-operation-report>.daily-report-head{padding:0 0 5mm!important;margin:0 0 4mm!important;background:#fff!important;border-bottom:1px solid #bbb!important}
  .daily-operation-report>.daily-kpi-grid{padding:0!important;margin-bottom:4mm!important;gap:2.5mm!important}
  .daily-kpi-grid .stat-card{min-height:19mm!important;padding:3mm!important;grid-template-columns:9mm 1fr!important;border:1px solid #bbb!important;background:#fff!important}
  .metric-symbol{width:8mm!important;height:8mm!important;border-radius:2mm!important;font-size:10pt!important;background:#fff!important}
  .metric-copy b{font-size:17pt!important}.metric-copy span{font-size:9pt!important}
  .daily-operation-report .daily-system-summary{margin:0 0 4mm!important;padding:4mm!important}
  .summary-metric-grid{grid-template-columns:repeat(4,1fr)!important;gap:2mm!important}.summary-metric{min-height:auto!important;padding:2.5mm!important}.summary-metric span{font-size:8.5pt!important}.summary-metric b{font-size:15pt!important}
  .status-summary-strip{grid-template-columns:repeat(4,1fr)!important;gap:2mm!important;margin-top:3mm!important;padding-top:3mm!important}.status-summary-strip>div{min-height:auto!important;padding:2mm!important}.status-summary-strip span{font-size:8pt!important}.status-summary-strip b{font-size:12pt!important}
  .daily-operation-report>.page-head.compact{padding:0!important;margin:4mm 0 2.5mm!important}.daily-operation-report>.page-head.compact h2{font-size:16pt!important}.daily-operation-report>.page-head.compact p{display:none!important}
  .daily-operation-report>.daily-shifts{padding:0!important}.daily-operation-report>.table-card,.daily-operation-report>.premium-empty{margin:0!important}
  .premium-empty{min-height:auto!important;padding:4mm!important;grid-template-columns:1fr!important;text-align:left!important}.premium-empty .empty-icon,.premium-empty .empty-actions{display:none!important}.premium-empty h3{font-size:11pt!important}.premium-empty p{font-size:9pt!important}
  .daily-operation-report>.report-footer{margin:4mm 0 0!important;padding:3mm 0 0!important;font-size:8.5pt!important}
}

/* SCF readable-text guard for new v1.4.1 components */
.nav-section>summary,.nav-section .nav-group a,.topbar-account b,.topbar-account small,.summary-metric span,.status-summary-strip span,.premium-empty p{font-size:16px}


/* ==========================================================================
   v1.4.2 — Panduan Aliran Kerja
   Role-aware workflow guide with direct links to live system routes.
   ========================================================================== */
.guide-page-head{align-items:flex-end}
.guide-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;padding:25px 27px;background:linear-gradient(135deg,#f7fbff,#fff);border-color:#d7e6f6}
.guide-hero h2{margin:8px 0 7px;font-size:28px;color:#15345c}.guide-hero p{margin:0;color:#687892;line-height:1.6}
.guide-role-chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;border-radius:999px;background:#eaf4ff;border:1px solid #cfe4fa;color:#075dbd;font-weight:850;font-size:16px}
.guide-base-url{min-width:300px;padding:16px 18px;border:1px solid #dce6f0;border-radius:15px;background:#fff}.guide-base-url small{display:block;color:#78879b;font-size:16px;font-weight:850;letter-spacing:.08em}.guide-base-url a{display:block;margin-top:6px;color:#075dbd;font-weight:800;overflow-wrap:anywhere}
.guide-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:30px 0 15px}.guide-section-head h2{margin:4px 0 4px;font-size:30px;color:#17365d}.guide-section-head p{margin:0;color:#6c7890;font-size:16px}
.flow-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.flow-guide-grid.secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow-guide-card{display:flex;flex-direction:column;min-width:0;padding:21px;border:1px solid #dde6f0;border-radius:19px;background:#fff;box-shadow:0 10px 30px rgba(15,42,78,.055)}
.flow-guide-card.is-core{border-color:#cfe1f4;background:linear-gradient(145deg,#fff,#f9fcff)}
.flow-guide-card header{display:flex;gap:14px;align-items:flex-start;margin-bottom:15px}.flow-number{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:15px;background:#0a63ce;color:#fff;font-weight:900;font-size:17px;box-shadow:0 8px 18px rgba(10,99,206,.2)}
.flow-guide-card h3{margin:1px 0 5px;font-size:22px;color:#18375e}.flow-guide-card header p{margin:0;color:#6c7890;font-size:16px;line-height:1.48}
.flow-step-list{display:grid;gap:8px;margin-bottom:15px}.flow-step-link,.flow-step-disabled{min-height:54px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:10px 12px;border:1px solid #e0e8f1;border-radius:13px;background:#fbfdff;text-decoration:none}
.flow-step-link span,.flow-step-disabled{font-size:16px;font-weight:820;color:#27425f}.flow-step-link small{grid-column:1/2;margin-top:3px;color:#7b899b;font-size:14px;overflow-wrap:anywhere}.flow-step-link b{grid-column:2;grid-row:1/3;color:#0a63ce;font-size:22px}.flow-step-link:hover{border-color:#b8d3f0;background:#f2f8ff;transform:translateY(-1px)}
.flow-step-disabled{display:block;color:#8793a3;background:#f6f7f9}.flow-step-disabled small{font-size:14px;color:#9aa4b1}
.flow-guide-card footer{margin-top:auto;padding-top:13px;border-top:1px dashed #dfe7f0;color:#63748a;font-size:16px;line-height:1.5}.flow-guide-card footer b{color:#294767}
.guide-escalation{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.2fr);gap:24px;align-items:center;margin-top:22px;background:linear-gradient(135deg,#0b376d,#092a56);border:0;color:#fff}.guide-escalation h2{margin:5px 0 7px;color:#fff}.guide-escalation p{margin:0;color:#d8e6f6;line-height:1.55}.guide-escalation .eyebrow{color:#bcd8f7}.escalation-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.escalation-chain span{padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-weight:800;font-size:16px}.escalation-chain b{color:#90bff0}
@media(max-width:1050px){.guide-hero,.guide-escalation{grid-template-columns:1fr}.guide-base-url{min-width:0}.flow-guide-grid,.flow-guide-grid.secondary{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.flow-guide-grid,.flow-guide-grid.secondary{grid-template-columns:1fr}.guide-hero{padding:20px}.guide-section-head{margin-top:25px}.guide-escalation{padding:21px}.escalation-chain{justify-content:flex-start}.flow-step-link small{font-size:13px}}
@media print{.guide-page-head .page-actions,.guide-base-url,.flow-step-link small{display:none!important}.flow-guide-grid,.flow-guide-grid.secondary{grid-template-columns:1fr 1fr!important;gap:4mm!important}.flow-guide-card{box-shadow:none!important;break-inside:avoid;padding:4mm!important}.guide-hero,.guide-escalation{box-shadow:none!important;break-inside:avoid}.flow-step-link,.flow-step-disabled{min-height:auto!important;padding:2mm!important}.flow-number{width:9mm;height:9mm;min-width:9mm;font-size:9pt}.flow-guide-card h3{font-size:12pt}.flow-guide-card p,.flow-guide-card footer,.flow-step-link span,.flow-step-disabled{font-size:9pt!important}}


/* v1.4.3 — Roll-call notes & bulk confirmation */
.rollcall-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line,#dce6f2);background:linear-gradient(135deg,#f8fbff 0%,#f3f8ff 100%)}
.rollcall-toolbar>div:first-child{display:grid;gap:4px;min-width:0}.rollcall-toolbar b{font-size:16px;color:#10213c}.rollcall-toolbar span{font-size:14px;line-height:1.45;color:#64748b;max-width:760px}
.rollcall-table .check-col{width:44px;text-align:center}.rollcall-table input[type="checkbox"]{width:18px;height:18px;accent-color:#1769d2;cursor:pointer}.rollcall-table input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.35}
.rollcall-note-cell{min-width:250px}.rollcall-note-cell input{width:100%;min-width:220px;padding:10px 12px;border:1px solid #d7e1ee;border-radius:10px;background:#fff;font:inherit;color:#18263d;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.rollcall-note-cell input:focus{outline:0;border-color:#3787e8;box-shadow:0 0 0 4px rgba(55,135,232,.12)}.rollcall-note-cell input[readonly]{background:#f7f9fc;color:#64748b}
.rollcall-table tr.is-confirmed{background:rgba(22,163,74,.025)}.rollcall-table tr.is-excluded{background:rgba(124,58,237,.025)}.rollcall-table td{vertical-align:middle}
@media (max-width:900px){.rollcall-toolbar{align-items:stretch;flex-direction:column}.rollcall-toolbar .page-actions{width:100%;display:grid;grid-template-columns:1fr}.rollcall-toolbar .btn{width:100%;justify-content:center}.rollcall-note-cell{min-width:210px}}
@media print{.rollcall-toolbar,.rollcall-table .check-col,.rollcall-table th:last-child,.rollcall-table td:last-child{display:none!important}.rollcall-note-cell input{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}}

/* v1.4.4 — Operational UX & Record Integrity */
.btn.danger{background:var(--red-bg);color:var(--red);border:1px solid #efc7c2}.btn.danger:hover{background:#fde6e3}
.danger-details>summary{color:var(--red)!important}.is-voided{opacity:.76;border-style:dashed!important}.is-voided .patrol-evidence{filter:grayscale(.7)}
.rollcall-table .check-col{min-width:62px;text-align:center}.rollcall-table .check-col small{margin-top:4px;font-size:10px;text-transform:none;letter-spacing:0}
.roll-check{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:12px;cursor:pointer;position:relative}.roll-check:hover{background:#edf6ff}.roll-check input{position:absolute;opacity:0;pointer-events:none}.roll-check span{width:24px;height:24px;border:2px solid #a9b8ca;border-radius:7px;background:#fff;display:grid;place-items:center;transition:.15s ease}.roll-check input:checked+span{background:#1769d2;border-color:#1769d2;box-shadow:0 0 0 4px rgba(23,105,210,.1)}.roll-check input:checked+span:after{content:'✓';color:#fff;font-size:16px;font-weight:900;line-height:1}.roll-check input:focus-visible+span{outline:3px solid rgba(23,105,210,.22);outline-offset:2px}.roll-check input:disabled+span{background:#f1f5f9;border-color:#dbe3ec;cursor:not-allowed}.check-disabled{color:#a8b2bf}
.rollcall-table tr.is-selected td{background:#eef6ff!important}.selected-counter{display:inline-flex;margin-top:7px;width:max-content;padding:5px 9px;border-radius:999px;background:#e8f2ff;color:#0b5db7;font-size:13px}.rollcall-sticky-action{display:none}
form[data-submitting="1"] button[type="submit"]{cursor:wait;opacity:.72}
@media(max-width:900px){
  .rollcall-table .check-col{position:sticky;left:0;z-index:1;background:#fff}.rollcall-table thead .check-col{z-index:3;background:#f8fafc}.rollcall-table tr.is-selected .check-col{background:#eef6ff!important}
  .roll-check{width:48px;height:48px}.roll-check span{width:27px;height:27px}
  .rollcall-sticky-action{position:sticky;bottom:76px;z-index:18;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px;padding:10px 12px;border:1px solid #cfe0f6;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 12px 32px rgba(16,42,78,.16);backdrop-filter:blur(10px)}
  .rollcall-sticky-action span{font-weight:800;color:#475467}.rollcall-sticky-action b{font-size:20px;color:#0b63ce}.rollcall-sticky-action .btn{min-width:150px}
}

/* v1.4.5 — controlled camera upload for all image workflows */
.controlled-camera-uploader{margin-top:12px;border:1px solid #d7e2ee;border-radius:16px;background:linear-gradient(180deg,#fbfdff 0%,#f7faff 100%);padding:14px}
.camera-upload-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.camera-upload-head>div{display:grid;gap:3px}.camera-upload-head b{font-size:15px;color:var(--ink)}.camera-upload-head small{color:var(--muted)}
.controlled-camera-panel{margin-top:14px;padding-top:14px;border-top:1px solid #dde7f1}
.controlled-camera-frame{position:relative;width:min(560px,100%);aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#0b1728;border:1px solid #20354f;display:grid;place-items:center;box-shadow:0 14px 32px rgba(8,28,54,.14)}
.controlled-camera-frame.is-passport{width:min(360px,100%);aspect-ratio:7/10}
.controlled-camera-frame video,.controlled-camera-frame>img{width:100%;height:100%;object-fit:cover;display:block}
.controlled-camera-frame>img.hidden,.controlled-camera-frame video.hidden{display:none!important}
.camera-control-actions{margin-top:12px;flex-wrap:wrap}.camera-control-actions .btn:disabled{opacity:.48;cursor:not-allowed;transform:none!important}
.camera-upload-status{margin-top:12px;margin-bottom:0}
.patrol-media-field{border:1px solid #dce6f0;border-radius:16px;padding:16px;background:#fbfdff}
.patrol-media-preview{margin-top:12px;width:min(420px,100%);aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#eef3f8;border:1px solid var(--line)}
.patrol-media-preview img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:620px){.camera-upload-head{align-items:stretch;flex-direction:column}.camera-upload-head .btn{width:100%;justify-content:center}.camera-control-actions{display:grid!important;grid-template-columns:1fr 1fr}.camera-control-actions .btn{width:100%;justify-content:center}.controlled-camera-frame{width:100%}}
@media(max-width:420px){.camera-control-actions{grid-template-columns:1fr}}
@media print{.controlled-camera-uploader{display:none!important}}

/* SmartAsrama v1.4.7 — Rekod Harian: 5 fungsi, 1 menu / 1 halaman */
.daily-date-filter{align-items:end}.daily-date-filter label{display:grid;gap:6px;font-weight:700;color:var(--text,#172033)}
.daily-overview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 18px}
.daily-overview-card{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--line,#e5e7eb);border-radius:18px;background:#fff;text-decoration:none;color:inherit;box-shadow:0 10px 30px rgba(15,23,42,.05);transition:.18s ease}
.daily-overview-card:hover{transform:translateY(-2px);border-color:#b7c8ff}.daily-overview-card span{font-size:.86rem;font-weight:800;color:#5b6474}.daily-overview-card b{font-size:1.8rem;line-height:1.1}.daily-overview-card small{color:#7b8492}
.daily-record-section{padding:0;overflow:hidden;scroll-margin-top:24px;margin-bottom:14px}.daily-record-section>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;background:linear-gradient(180deg,#fff,#fbfcff);border-bottom:1px solid transparent}.daily-record-section[open]>summary{border-bottom-color:var(--line,#e5e7eb)}.daily-record-section>summary::-webkit-details-marker{display:none}.daily-record-section>summary>span:first-child{display:grid;gap:4px}.daily-record-section>summary b{font-size:1.05rem}.daily-record-section>summary small{color:#70798a}.daily-section-body{padding:18px 20px}.daily-inline-form{margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed var(--line,#e5e7eb)}.daily-submit-field{display:flex;align-items:end}.daily-submit-field .btn{width:100%}
.daily-list{display:grid;gap:9px}.daily-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;border:1px solid #edf0f5;border-radius:14px;background:#fff}.daily-row>div:first-child{display:grid;gap:3px;min-width:0}.daily-row small{display:block;color:#737d8c}.daily-row-stats{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;text-align:right}.quick-card.featured{grid-column:span 2;border-color:#bfcdfd;background:linear-gradient(145deg,#f7f9ff,#fff)}
@media(max-width:980px){.daily-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-card.featured{grid-column:auto}}
@media(max-width:640px){.daily-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.daily-overview-card{padding:13px 14px;border-radius:15px}.daily-overview-card b{font-size:1.45rem}.daily-record-section>summary{padding:16px}.daily-section-body{padding:14px}.daily-row{align-items:flex-start;flex-direction:column}.daily-row-stats{width:100%;justify-content:flex-start;text-align:left}}


/* v1.5.0 — QR reliability */
.qr-card .qr-target canvas{width:160px;height:160px;max-width:100%;image-rendering:auto}
.scanner-engine-status{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f1f5f9;color:#475467;font-weight:700;font-size:14px;border:1px solid #dce4ee}
.scanner-engine-status.ok{background:#eaf8f3;color:#067a55;border-color:#ccecdf}.scanner-engine-status.working{background:#edf5ff;color:#0a61c9;border-color:#cfe2ff}.scanner-engine-status.error{background:#fff0ee;color:#b42318;border-color:#f3c9c4}
@media(max-width:600px){.camera-box{height:58vh;min-height:360px;max-height:560px}.camera-overlay{inset:14% 10%}.scanner-actions{flex-wrap:wrap}.scanner-actions .btn{flex:1 1 auto}}

/* v1.5.1 — senarai penghuni daripada Excel: 9 medan utama */
.resident-master-table table{min-width:1680px}
.resident-master-table th,.resident-master-table td{vertical-align:top}
.resident-master-table td{line-height:1.45}
.resident-master-table .resident-address{min-width:220px;max-width:320px;white-space:normal}
.resident-master-table td:nth-last-child(1){white-space:nowrap}
@media(max-width:760px){.resident-master-table table{min-width:1500px}.resident-master-table .student-list-identity{min-width:240px}}

/* v1.5.3 — Laporan Harian Warden format JPN + bundle bulanan */
.jpn-editor{display:grid;gap:16px}.jpn-editor-section .table-wrap{margin-top:12px}.editor-table input,.editor-table select{min-width:110px;width:100%}.editor-table td:first-child{min-width:210px}.jpn-print-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;justify-content:flex-end}.monthly-bundle{display:grid;gap:24px}.jpn-report-sheet{background:#fff;color:#111;border:1px solid #d8dee8;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,.06)}.jpn-page{padding:22px;background:#fff}.jpn-page-two{border-top:1px dashed #b8c1ce}.jpn-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.jpn-title-row h1{font-size:21px;line-height:1.15;margin:0;color:#111}.jpn-title-row p{margin:4px 0 0;font-size:11px;color:#4b5563}.jpn-title-row img{width:62px;height:62px;object-fit:contain}.jpn-meta,.jpn-main,.jpn-simple{width:100%;border-collapse:collapse;table-layout:fixed}.jpn-meta th,.jpn-meta td,.jpn-main th,.jpn-main td,.jpn-simple th,.jpn-simple td{border:1px solid #444;padding:4px 5px;vertical-align:top;font-size:10.5px;line-height:1.25}.jpn-meta th{width:17%;text-align:left;background:#f4f4f4}.jpn-meta td{width:33%}.jpn-meta .week-head{width:12%}.jpn-scale{margin:10px 0;font-size:10.5px}.jpn-scale>div{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #444;margin-top:4px}.jpn-scale span{text-align:center;padding:4px;border-right:1px solid #444;display:flex;flex-direction:column}.jpn-scale span:last-child{border-right:0}.jpn-main .bil{width:5%}.jpn-main thead th,.jpn-simple thead th{background:#f1f1f1;text-align:center}.jpn-main .score{width:4%;text-align:center;font-weight:800}.jpn-main td:nth-last-child(2),.jpn-main td:last-child{width:20%}.jpn-main .section-row th,.jpn-simple .section-row th{background:#d9d9d9;text-align:left;font-weight:800}.jpn-simple{margin-top:10px}.jpn-simple th:first-child,.jpn-simple td:first-child{width:6%;text-align:center}.jpn-simple .empty-line{text-align:center;color:#6b7280;padding:10px}.center{text-align:center}.jpn-text-section{margin-top:10px;border:1px solid #444}.jpn-text-section h3{margin:0;padding:5px 7px;background:#d9d9d9;font-size:11px}.lined-text{min-height:90px;padding:5px 8px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 21px,#9ca3af 22px)}.lined-text p{margin:0 0 4px;font-size:10.5px;line-height:22px}.jpn-rule-note{font-size:9px;margin:9px 0;color:#333}.jpn-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:20px;font-size:10.5px}.jpn-signatures div{text-align:left}.jpn-signatures span{display:block;border-bottom:1px dotted #222;height:35px}.jpn-signatures p{text-align:center;margin:5px 0}.jpn-report-sheet.bundle-item{margin-bottom:12px}
@media(max-width:900px){.jpn-editor .editor-table{min-width:780px}.jpn-report-sheet{border-radius:10px;overflow-x:auto}.jpn-page{min-width:760px}.jpn-signatures{gap:16px}}
@media print{
  html,body{background:#fff!important}.content-wrap{padding:0!important;max-width:none!important}.main-content,.minimal-main{margin:0!important;padding:0!important}.jpn-print-toolbar,.print-hide{display:none!important}.jpn-report-sheet{border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;overflow:visible!important}.jpn-page{width:auto;min-height:270mm;box-sizing:border-box;padding:0;margin:0;page-break-after:always;break-after:page}.jpn-page-two{border-top:0}.jpn-report-sheet:last-child .jpn-page-two{page-break-after:auto;break-after:auto}.jpn-title-row h1{font-size:17px}.jpn-title-row img{width:48px;height:48px}.jpn-meta th,.jpn-meta td,.jpn-main th,.jpn-main td,.jpn-simple th,.jpn-simple td{font-size:8.6px;padding:2.7px 3.5px}.jpn-scale{font-size:8.7px;margin:6px 0}.jpn-scale span{padding:2px}.jpn-text-section{margin-top:6px}.jpn-text-section h3{font-size:9px;padding:3px 5px}.lined-text{min-height:70px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 16px,#999 17px)}.lined-text p{font-size:8.7px;line-height:17px}.jpn-signatures{margin-top:13px;font-size:8.7px}.jpn-signatures span{height:28px}.jpn-rule-note{font-size:7.7px;margin:6px 0}.monthly-bundle{display:block}
}

/* v1.5.4 — direct admin + drag & drop system updater */
.update-layout{align-items:start}.system-update-form,.update-guide-card{min-height:100%}
.system-update-dropzone{position:relative;display:grid;place-items:center;text-align:center;gap:7px;min-height:260px;margin:18px 0;padding:28px;border:2px dashed #b8c8dd;border-radius:22px;background:linear-gradient(180deg,#f8fbff,#f3f7fb);cursor:pointer;transition:.18s ease;outline:none}
.system-update-dropzone:hover,.system-update-dropzone:focus-visible,.system-update-dropzone.is-dragover{border-color:#1769d2;background:#eef6ff;box-shadow:0 0 0 4px rgba(23,105,210,.08);transform:translateY(-1px)}
.system-update-dropzone.has-file{border-style:solid;border-color:#7bc8aa;background:#f1fbf7}.system-update-dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.update-upload-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#0c5fbd;color:#fff;font-size:30px;font-weight:700;box-shadow:0 10px 25px rgba(12,95,189,.18)}
.system-update-dropzone strong{font-size:1.06rem;color:var(--ink)}.system-update-dropzone>span:not(.update-upload-icon){color:var(--muted)}.system-update-dropzone small{margin-top:6px;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #dce6f0;color:#475467;max-width:100%;overflow-wrap:anywhere}
.update-protection-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:6px 0 18px}.update-protection-list span{padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid #e5ebf2;color:#405066;font-size:.9rem}.update-protection-list b{color:inherit}.update-limit-note{margin:12px 0 0;font-size:.86rem}
.update-steps{display:grid;gap:14px;margin:18px 0}.update-steps>div{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}.update-steps>div>b{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#eaf3ff;color:#0c5fbd}.update-steps span{line-height:1.55;color:#405066}.update-history{margin-top:18px}.update-success-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;border-color:#ccecdf;background:linear-gradient(135deg,#f3fcf8,#fff)}
@media(max-width:720px){.update-protection-list{grid-template-columns:1fr}.system-update-dropzone{min-height:220px;padding:22px 16px}.update-success-card{align-items:flex-start;flex-direction:column}}

/* v1.5.6 — Takwim Tahunan + Warden Bertugas Harian */
.today-duty-card{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center;margin:18px 0;padding:20px 22px;border:1px solid #cfe0f4;border-radius:20px;background:linear-gradient(135deg,#f7fbff 0%,#ffffff 70%);box-shadow:0 10px 30px rgba(15,42,78,.055)}
.today-duty-card.is-homeleave{border-color:#f4d5a3;background:linear-gradient(135deg,#fff8ea,#fff)}
.today-duty-date{display:grid;place-items:center;min-height:92px;padding:9px;border-radius:16px;background:#0b5fbd;color:#fff;text-align:center}.today-duty-card.is-homeleave .today-duty-date{background:#b96500}.today-duty-date span,.today-duty-date small{font-size:13px;font-weight:800}.today-duty-date b{font-size:32px;line-height:1;margin:5px 0}.today-duty-main h2{margin:4px 0 5px;font-size:28px;color:#16385f}.today-duty-main p{margin:0;color:#66758a}.today-duty-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.year-picker,.month-picker{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.year-picker label{display:grid;gap:5px;font-size:14px;font-weight:800;color:#607086}.year-picker input{width:105px}
.annual-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.annual-summary>div{display:grid;gap:4px;padding:16px 18px;border:1px solid #e0e8f1;border-radius:16px;background:#fff}.annual-summary b{font-size:24px;color:#17375d}.annual-summary span{color:#6f7e91;font-size:14px;font-weight:750}
.annual-calendar{display:grid;gap:22px}.annual-quarter{overflow:hidden;border:1px solid #dce6f0;border-radius:22px;background:#f8fbff}.annual-quarter>header{display:flex;align-items:center;gap:18px;padding:19px 22px;background:linear-gradient(135deg,#0c5fbd,#153e73);color:#fff}.annual-quarter>header>span{display:grid;place-items:center;min-width:72px;height:44px;border-radius:13px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);font-weight:900}.annual-quarter h2{margin:0;color:#fff;font-size:21px}.annual-quarter header p{margin:4px 0 0;color:#d7e8fb;font-size:14px;font-weight:750}.annual-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px}.annual-month-card{min-width:0;border:1px solid #e1e8f0;border-radius:17px;background:#fff;overflow:hidden}.annual-month-card.is-current{border-color:#77aee8;box-shadow:0 0 0 3px rgba(23,105,210,.07)}.annual-month-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid #edf1f5;background:#fbfdff}.annual-month-head>div{display:flex;align-items:center;gap:9px}.annual-month-head span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf3ff;color:#0b5fbd;font-size:13px;font-weight:900}.annual-month-head h3{margin:0;font-size:18px;color:#17375d}.annual-month-head>b{font-size:12px;color:#738195}.annual-task-list{display:grid}.annual-task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:13px 15px;border-bottom:1px solid #eef2f6}.annual-task:last-child{border-bottom:0}.annual-task p{margin:0 0 6px;font-size:15px;line-height:1.48;color:#263b55}.annual-task span{display:inline-flex;padding:5px 8px;border-radius:999px;background:#f1f6fc;color:#426384;font-size:12px;font-weight:850}.icon-action{width:30px;height:30px;border:0;border-radius:9px;background:#fff1ef;cursor:pointer;font-size:20px;line-height:1}.event-list>.card:only-child{width:100%}
.duty-roster-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:22px 0 13px}.duty-roster-head h2{margin:4px 0;font-size:27px;color:#17375d}.duty-roster-head p{margin:0;color:#6c7890}.month-picker input{min-height:42px}
.roster-calendar{overflow-x:auto;margin-bottom:24px;padding:1px;border:1px solid #dbe5ef;border-radius:20px;background:#fff}.roster-weekdays,.roster-days{display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));min-width:784px}.roster-weekdays{background:#123d70;color:#fff}.roster-weekdays span{padding:12px 10px;text-align:center;font-size:13px;font-weight:850}.roster-days{background:#edf2f7;gap:1px}.roster-day{position:relative;min-height:112px;padding:11px;background:#fff}.roster-day.blank{background:#f7f9fb}.roster-day.today{box-shadow:inset 0 0 0 3px #2a79d4}.roster-day.homeleave{background:#fff7e8}.roster-date{display:block;margin-bottom:10px;color:#5f6e80;font-size:13px;font-weight:850}.roster-day>b{display:block;color:#15385f;font-size:17px}.roster-day.homeleave>b{color:#b26300}.roster-day>small{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:999px;background:#fff0d5;color:#9a5b00;font-weight:900;font-size:11px}.roster-empty{font-size:18px}.roster-remove{position:absolute;top:7px;right:7px}.roster-remove button{width:27px;height:27px;border:0;border-radius:8px;background:#fff0ee;color:#b42318;font-size:18px;cursor:pointer}
@media(max-width:1000px){.annual-month-grid{grid-template-columns:1fr}.annual-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.today-duty-card{grid-template-columns:76px minmax(0,1fr);gap:14px;padding:16px}.today-duty-card>.btn{grid-column:1/-1;width:100%;justify-content:center}.today-duty-date{min-height:78px}.today-duty-main h2{font-size:22px}.annual-summary{grid-template-columns:1fr 1fr}.annual-quarter>header{align-items:flex-start;padding:16px}.annual-quarter>header>span{min-width:60px}.annual-quarter h2{font-size:18px}.annual-month-grid{padding:10px}.duty-roster-head{align-items:stretch;flex-direction:column}.month-picker{width:100%}.month-picker input{flex:1}.year-picker{width:100%}.annual-task p{font-size:16px}}
@media print{.annual-summary,.annual-calendar{break-inside:auto}.annual-quarter{break-inside:avoid;box-shadow:none}.annual-month-grid{grid-template-columns:repeat(3,1fr)!important}.annual-task form,.roster-remove,.today-duty-card>.btn{display:none!important}.roster-calendar{overflow:visible}.roster-weekdays,.roster-days{min-width:0!important;grid-template-columns:repeat(7,1fr)}.roster-day{min-height:80px;padding:7px}.today-duty-card{box-shadow:none}}


/* v1.5.28 - Pondok QR mobile layout repair */
@media (max-width: 900px){
  .role-guard .scanner-grid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    max-width:100%;
  }
  .role-guard .scanner-grid>*,
  .role-guard .scanner-card,
  .role-guard .scan-result,
  .role-guard .duty-mini{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media (max-width: 780px){
  .guard-main{width:100%;overflow-x:hidden}
  .guard-main .content-wrap{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin:0 auto!important;
    padding:14px 0 28px!important;
  }
  .role-guard .page-head{margin-bottom:14px;gap:8px}
  .role-guard .page-head h1{font-size:34px;line-height:1.08;margin:4px 0 6px}
  .role-guard .page-head p{font-size:15px;line-height:1.5}
  .role-guard .scanner-card{padding:14px;border-radius:18px}
  .role-guard .scanner-controls{grid-template-columns:1fr!important;gap:10px}
  .role-guard .scanner-flow-note{
    width:100%;
    margin:12px 0;
    padding:12px 14px;
    border-radius:14px;
    line-height:1.5;
    overflow-wrap:normal;
    word-break:normal;
  }
  .role-guard .camera-box{
    width:100%!important;
    height:min(62vh,520px)!important;
    min-height:340px!important;
    max-height:520px!important;
    margin:12px 0!important;
    border-radius:18px;
  }
  .role-guard .camera-overlay{inset:12% 8%;padding:12px;font-size:14px}
  .role-guard .scanner-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .role-guard .scanner-actions .btn{width:100%;min-width:0;padding:12px 10px}
  .role-guard #scanner-torch{grid-column:1/-1}
  .role-guard .scanner-engine-status{font-size:14px;margin-top:10px}
  .role-guard .manual-scan{margin-top:14px}
  .role-guard .manual-scan .inline{display:grid;grid-template-columns:1fr;gap:8px}
  .role-guard .manual-scan .btn{width:100%}
  .role-guard .scan-result{min-height:210px!important;margin-top:14px;padding:16px}
  .role-guard .duty-mini{margin-top:12px;padding:16px}

  .guard-top{
    min-height:68px;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px!important;
    padding:9px 10px!important;
    width:100%;
  }
  .guard-top .brand{min-width:0;margin:0!important;gap:9px}
  .guard-top .brand img{width:42px;height:42px;flex:0 0 42px}
  .guard-top .brand span{min-width:0;overflow:hidden}
  .guard-top .brand b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .guard-top .brand small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .guard-top>nav{display:none!important}
  .guard-top>.btn{min-height:42px;padding:9px 11px;font-size:13px;white-space:nowrap}
}
@media (max-width: 430px){
  .role-guard .camera-box{height:58vh!important;min-height:320px!important}
  .role-guard .scanner-actions{grid-template-columns:1fr 1fr}
  .role-guard .page-head h1{font-size:31px}
  .guard-top .brand b{font-size:14px}
  .guard-top>.btn{padding:8px 10px;font-size:12px}
}

/* v1.5.38 — Petugas semasa + stabilisasi scanner pengawal */
.guard-duty-strip{margin:0 0 18px;padding:16px 18px;border:1px solid #d9e5f2;border-radius:20px;background:linear-gradient(135deg,#f8fbff,#fff);box-shadow:0 10px 28px rgba(15,42,78,.04)}
.guard-duty-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}.guard-duty-heading h2{margin:5px 0 0;font-size:20px;color:#18395f}.guard-duty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.guard-duty-person{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border:1px solid #dce7f2;border-radius:16px;background:#fff}.guard-duty-person.is-next{background:#fffaf2;border-color:#f1d9af}.guard-duty-person.is-warden{background:#f5fbf8;border-color:#cfe8da}.guard-duty-copy{display:grid;gap:3px;min-width:0}.guard-duty-copy small{font-size:11px;letter-spacing:.08em;font-weight:900;color:#66758a}.guard-duty-copy b{font-size:18px;color:#15385f;overflow-wrap:anywhere}.guard-duty-copy span{font-size:13px;color:#66758a}.guard-duty-actions{flex:0 0 auto}.guard-duty-no-phone{display:inline-flex;padding:8px 10px;border-radius:10px;background:#f3f5f8;color:#7a8595;font-size:12px;font-weight:800}
@media(max-width:780px){.guard-duty-strip{padding:14px;margin-bottom:14px}.guard-duty-heading{align-items:flex-start;flex-direction:column}.guard-duty-heading .btn{width:100%}.guard-duty-grid{grid-template-columns:1fr}.guard-duty-person{align-items:flex-start;flex-direction:column}.guard-duty-actions,.guard-duty-actions .btn{width:100%}.guard-duty-copy b{font-size:17px}}

/* v1.5.39 — Dashboard Asrama Universal untuk Admin, Warden & PPM */
.panel-role-actions{margin:0 0 24px}
.panel-role-actions>.card-head{margin:0 0 12px}
.panel-role-actions>.card-head h2{margin:3px 0 0;font-size:20px}
.panel-dashboard-section{margin-top:30px;padding-top:26px;border-top:1px solid rgba(130,151,184,.22)}
.panel-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 18px;padding:18px 20px;border:1px solid rgba(76,122,187,.16);border-radius:22px;background:linear-gradient(135deg,rgba(235,245,255,.92),rgba(255,255,255,.95));box-shadow:0 12px 30px rgba(28,62,108,.06)}
.panel-dashboard-head h2{margin:4px 0 4px;font-size:26px;line-height:1.15}
.panel-dashboard-head p{margin:0;color:var(--muted)}
@media(max-width:780px){.panel-dashboard-head{align-items:flex-start;flex-direction:column}.panel-dashboard-head .page-actions{width:100%}.panel-dashboard-head .page-actions .btn{flex:1}.panel-dashboard-section{margin-top:22px;padding-top:20px}}