/* IEMS shell pieces that come from the PHP templates (links instead of buttons, role menus, messages). */
html,body{min-height:100%}
body.iems{background:var(--bg)}
.app-sidebar .app-brand{color:inherit;text-decoration:none}
.app-sidebar .app-brand:hover{text-decoration:none}
.app-sidebar{overflow-x:hidden}
a.nav-item{text-decoration:none}a.nav-item:hover{text-decoration:none;color:var(--ink)}a.nav-item.is-active,a.nav-item.is-active:hover{color:#fff}
.nav-item .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-submenu a{display:block;text-align:left;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:600;color:var(--mut);text-decoration:none;line-height:1.35}
.nav-submenu a:hover{background:var(--sf2);color:var(--ink);text-decoration:none}
.nav-submenu a.is-active{color:var(--pur);background:var(--lav)}
html[data-theme=dark] .nav-submenu a.is-active{color:#fff}
.nav-submenu .nav-subheading{display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:7px 12px;border-radius:9px;background:rgba(243,112,32,.1);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-o);cursor:default}
.nav-submenu .nav-subheading:before{content:'';width:3px;height:12px;border-radius:2px;background:currentColor;flex:none}
.nav-submenu .nav-subheading:first-child{margin-top:2px}
.sidebar-footer .powered,.sidebar-footer .app-version{display:block;text-align:center;font-size:11px;font-weight:600;color:var(--mut);margin-top:10px}
.sidebar-footer .powered{color:var(--ink2);text-decoration:none}
@media(max-width:1100px) and (min-width:768px){.sidebar-footer .powered,.sidebar-footer .app-version{display:none}}
.user-avatar{overflow:hidden}.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.quick-actions-source,[hidden]{display:none!important}

/* top bar */
.topbar .topbar-title h1{margin:0;font-weight:700}
.topbar .topbar-title p{margin:0}
.icon-button .badge-count:empty{display:none}

/* popovers rendered by PHP */
.popover-panel{max-height:calc(100vh - 100px);display:flex;flex-direction:column}
.popover-panel .popover-list{flex:1}
a.popover-item,a.popover-footer-link,a.menu-item{color:inherit;text-decoration:none}
a.popover-item:hover,a.popover-footer-link:hover,a.menu-item:hover{text-decoration:none;color:inherit}
a.popover-footer-link{color:var(--pur)}
.popover-panel .empty.size-small{padding:26px 16px}.popover-panel .empty.size-small svg{width:26px;height:26px;color:var(--mut);margin-bottom:6px}.popover-panel .empty.size-small b{font-size:14px}.popover-panel .empty.size-small span{font-size:12.5px}
.sms-balance{padding:16px;border-bottom:1px solid var(--line)}.sms-balance small{display:block;font-size:12px;font-weight:600;color:var(--mut)}.sms-balance b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.session-list .menu-item span{display:inline-flex;align-items:center;gap:6px}
.session-list .menu-item.is-active{background:var(--lav);color:var(--pur)}
html[data-theme=dark] .session-list .menu-item.is-active{color:#fff}

/* account menu: the role dropdown list drawn as menu rows */
.user-menu{list-style:none;margin:0}
.user-menu li{list-style:none}
.user-menu li:has(h4){display:none}
.user-menu li>a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;width:100%;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.user-menu li>a:hover{background:var(--sf2);color:var(--ink);text-decoration:none}
.user-menu li>a .padder{padding:0!important}
.user-menu li>a>i,.user-menu li>a>svg{width:20px;text-align:center;font-size:16px;color:var(--mut);flex:none}
.user-menu li>a[href*="logout"]{color:var(--coral-ink)}.user-menu li>a[href*="logout"]>i{color:var(--coral)}
.user-menu li>a .tag{margin-left:auto}
.user-menu li.divider{height:1px;background:var(--line);margin:6px 4px;padding:0}
.user-menu li.divider>a{margin-top:7px}
.user-menu .dropdown-menu{display:none}

/* quick actions */
.floating-actions-list a{display:flex;align-items:center;gap:10px;background:var(--sf);border:1px solid var(--line2);border-radius:14px;padding:10px 14px;font-weight:700;font-size:13px;color:var(--ink);text-decoration:none}
.floating-actions-list a:hover{border-color:var(--pur2);text-decoration:none;color:var(--ink)}
.floating-actions-list a i,.floating-actions-list a svg{color:var(--pur);width:18px;font-size:16px;text-align:center}
html[data-theme=dark] .floating-actions-list a i{color:#9fd3e6}
.floating-actions:empty{display:none}

/* phone bottom navigation with links */
@media(max-width:767px){
 .bottom-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;min-width:58px;padding:0 8px;border-radius:29px;font-size:11px;font-weight:600;color:var(--mut);text-decoration:none;transition:background .2s,color .2s}
 .bottom-tabs a svg{width:24px;height:24px}
 .bottom-tabs a.is-active{background:var(--pur);color:#fff;font-weight:700}
 .bottom-tabs a:hover{text-decoration:none}
}

/* alertMe() message box */
#alert{display:none;position:fixed;inset:0;z-index:2000;background:rgba(6,18,24,.45);padding:16px}
#alertMessageBox{position:absolute;left:50%;top:18vh;transform:translateX(-50%);width:420px;max-width:calc(100vw - 32px);background:var(--sf);border:1px solid var(--line2);border-radius:20px;overflow:hidden;animation:iems-pop .2s ease}
#alertMessageHeader{padding:16px 20px;border-bottom:1px solid var(--line)}
#alertMessageHeader h4{display:flex;align-items:center;gap:8px;font-size:15px;margin:0}
#alertMessageHeader h4 svg{color:var(--brand-o)}
#alertMessageBody{padding:18px 20px;display:flex;flex-direction:column;gap:16px}
#alertMessage{font-size:14px;color:var(--ink2)}
#alertOk{align-self:flex-end;min-width:90px}
@keyframes iems-pop{from{opacity:0;transform:translate(-50%,8px)}}

/* page messages from flashMessage() */
#flash-success,#flash-error{display:flex!important;align-items:center;gap:10px;padding:14px 16px!important;border-radius:14px!important;font-weight:600!important;font-size:14px!important;margin:0 0 20px!important;border:1px solid transparent!important;background:var(--mint-bg)!important;color:var(--mint-ink)!important;animation:rise .4s both}
#flash-error{background:var(--coral-bg)!important;color:var(--coral-ink)!important}
#flash-success i,#flash-error i{font-size:18px;color:inherit!important}

@media print{.popover-panel,#alert,.palette,.dim-overlay{display:none!important}.app,body.iems{background:none!important}}

/* birthday strip with people */
.birthday-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.birthday-person{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:10px 12px}
.birthday-person b{display:block;font-size:14px}.birthday-person small{font-size:12px;opacity:.85}
.kpi-card{text-decoration:none;color:inherit}.kpi-card:hover{text-decoration:none;color:inherit}

/* UI kit form pieces: 3-column form grid, section titles, photo picker, file list */
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
.form-grid .span-2-columns{grid-column:span 2}.form-grid .span-3-columns{grid-column:1/-1}
.form-section-title{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;padding-top:8px}
.form-section-title:not(:first-child){border-top:1px solid var(--line);padding-top:20px;margin-top:4px}
.form-section-title svg{color:var(--org)}
.inline-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.photo{display:flex;gap:16px;align-items:center}
.photo .photo-preview{width:84px;height:84px;border-radius:26px;background:var(--sf2);border:2px dashed var(--line2);display:grid;place-items:center;color:var(--mut);overflow:hidden;flex:none}
.photo .photo-preview img{width:100%;height:100%;object-fit:cover}
.file-list{display:flex;flex-direction:column;gap:6px;width:100%}
.file-list div{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--sf2);font-size:13px;font-weight:600;color:var(--ink)}
.file-list small{margin-left:auto;color:var(--mut)}
@media(max-width:900px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.form-grid{grid-template-columns:minmax(0,1fr)}.form-grid .span-2-columns{grid-column:auto}}

/* legacy photo picker (student, staff, teacher forms) drawn like the kit's photo upload */
#content .student_pp{width:132px;height:132px;border-radius:30px;background:var(--sf2);border:2px dashed var(--line2);overflow:hidden;display:grid;place-items:center;margin-bottom:12px}
#content .student_pp img{width:100%!important;height:100%!important;object-fit:cover;margin:0!important;border:0!important;max-width:none}
#content label.btn.center-button{height:34px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:700;background:var(--sf);border:1px solid var(--line2);color:var(--ink);display:inline-flex;margin:0 0 8px;cursor:pointer}
#content label.btn.center-button:hover{border-color:var(--pur2);filter:none}
#content label.btn.center-button i{color:var(--pur2)}
#content label.btn.center-button+small{display:block;font-size:12px;color:var(--mut);font-weight:500}
#content label.btn.center-button+small small{color:inherit!important;font-size:inherit}

.session-button div,.session-button b,.session-button small,.topbar-clock b,.topbar-clock small{white-space:nowrap}

/* sign-in page: brand panel on the left, form card on the right */
.iems-login{min-height:100vh;background:var(--bg)}
.login-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.login-brand{position:relative;overflow:hidden;background:var(--hero);color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.login-brand:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,#f6931e,#f37020,#ee4121)}
.login-mark{position:absolute;right:-40px;bottom:-30px;width:min(460px,60%);opacity:.12;pointer-events:none}
.login-brand .hero-orb{position:absolute;border-radius:50%;pointer-events:none}
.login-brand .hero-orb-first{width:380px;height:380px;right:-120px;top:-120px;background:rgba(255,255,255,.05)}
.login-brand .hero-orb-second{width:14px;height:14px;left:48%;top:22%;background:var(--sun);animation:float 6s ease-in-out infinite}
.login-logo{display:flex;align-items:center;gap:14px;position:relative}
.login-logo img{width:64px}
.login-logo b{display:block;font-size:26px;font-weight:900;letter-spacing:.02em}
.login-logo small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.login-copy{position:relative;max-width:460px;animation:rise .6s both}
.login-copy h2{font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.login-copy p{margin-top:14px;font-size:15px;opacity:.85}
.login-copy ul{list-style:none;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.login-copy li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px}
.login-copy li svg{color:var(--sun);width:18px;height:18px}
.login-footer{position:relative;font-size:12px;opacity:.7}
.login-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 24px}
.login-card{width:100%;max-width:420px;background:var(--sf);border:1px solid var(--line);border-radius:24px;padding:36px 32px;animation:rise .5s both}
.login-head{text-align:center;margin-bottom:24px}
.login-school{width:72px;height:auto;margin:0 auto 14px;display:block}
.login-head h1{font-size:24px;font-weight:800}
.login-head p{color:var(--mut);font-weight:500;margin-top:4px}
.login-card .note{margin-bottom:18px}
.login-form{gap:16px}
.login-form .input-affix .input-with-icon{flex:1;min-width:0}
.login-form .input-affix .input-with-icon .form-input{border-top-right-radius:0;border-bottom-right-radius:0}
.login-button{width:100%;height:48px;font-size:15px;margin-top:6px}
.login-powered{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--mut);text-decoration:none}
.login-powered img{filter:invert(.6)}
html[data-theme=dark] .login-powered img{filter:none}
@keyframes float{50%{transform:translateY(-12px)}}
@media(max-width:900px){
 .login-wrap{grid-template-columns:1fr}
 .login-brand{padding:28px 20px 34px;gap:18px}
 .login-copy h2{font-size:22px}.login-copy p,.login-copy ul,.login-footer{display:none}
 .login-logo img{width:48px}.login-logo b{font-size:22px}.login-brand .hero-orb-second{display:none}.login-brand{min-height:0}
 .login-panel{justify-content:flex-start;padding:0 16px 32px;margin-top:-20px;position:relative}
 .login-card{padding:28px 20px}
}

/* executive dashboard: report shortcuts in two columns, insight rows as links */
.exam-score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.exam-score-grid .insight-item .task-text b{font-size:13.5px}
a.insight-item{color:inherit;text-decoration:none}a.insight-item:hover{border-color:var(--pur2);transform:translateX(3px);text-decoration:none;color:inherit}
@media(max-width:620px){.exam-score-grid{grid-template-columns:1fr}}

/* profile: photos inside the round avatars, sibling rows as links */
.profile-avatar img,.person-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.profile-avatar,.person-avatar{overflow:hidden}
a.list-row{color:inherit;text-decoration:none}a.list-row:hover{color:var(--pur);text-decoration:none}
a.list-row>svg{width:16px;height:16px;color:var(--mut)}
.crumbs{list-style:none;padding:0;margin:0}
.crumbs li+li:before{content:"/";margin-right:8px;color:var(--line2)}

/* time tables: class tiles, free periods, day headings on phones, print header */
.timetable-card{display:flex;flex-direction:column;gap:14px;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.timetable-card:hover{border-color:var(--pur2);transform:translateY(-2px);color:inherit;text-decoration:none}
.timetable-card .teacher-avatar svg{width:26px;height:26px}
.timetable-card-text b{display:block;font-size:17px}.timetable-card-text small{color:var(--mut);font-weight:600}
.timetable-card .btn{align-self:flex-start}
.timetable-cell-free{background:transparent!important;border:1.5px dashed var(--line2);display:grid;place-items:center}
.timetable-cell-free:before{display:none}
.timetable-day{font-weight:800;font-size:14px;margin:6px 0 10px}.timetable-day.is-active{color:var(--org)}
.timetable-print-head{display:none;align-items:center;gap:14px}
.timetable-print-head .logo{height:58px;width:auto}.timetable-print-head h1{font-size:20px;margin:0}
@media print{.timetable-print-head{display:flex!important}.desktop-only{display:block!important}.mobile-only{display:none!important}.timetable-grid{border-spacing:3px}.timetable-cell{min-height:44px;padding:6px 8px}}
@media(min-width:768px){.mobile-only{display:none}}
@media(max-width:767px){.desktop-only{display:none}.mobile-only{display:block}}

/* printing: show every card and chart fully, even ones not scrolled to yet */
@media print{.is-waiting,.rise-in{opacity:1!important;transform:none!important;animation:none!important}.chart-line{stroke-dashoffset:0!important;animation:none!important}.chart-bar,.segmented,.chart-point,.chart-area{animation:none!important;opacity:1!important}}

/* form footer with the save buttons, and checkbox chips (pick several) */
.form-footer{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.chip.checkbox-label{cursor:pointer;gap:10px;user-select:none}
.chip.checkbox-label .checkbox-input{width:18px;height:18px;border-radius:6px}
.chip.checkbox-label:has(.checkbox-input:checked){background:var(--lav);border-color:var(--pur2);color:var(--pur)}
html[data-theme=dark] .chip.checkbox-label:has(.checkbox-input:checked){color:#fff}

/* report pages: hidden DataTables export buttons when the page has its own icons, print header from print_header() */
.card:has(#excel) .dt-buttons,.stack:has(#excel) .dt-buttons{display:none}
.card.card-flush .dataTables_wrapper .dataTables_filter,.card.card-flush .dataTables_wrapper .dataTables_length{padding:0 var(--pad)}
.card.card-flush .dataTables_wrapper .dataTables_info,.card.card-flush .dataTables_wrapper .dataTables_paginate{padding:14px var(--pad)}
#print_header{display:none}
@media print{
 #print_header{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:12px}
 #print_header .logo{height:56px;width:auto}
 #print_header .school_name{font-size:20px;margin:0}
 #print_header h3{flex-basis:100%;font-size:16px;margin:6px 0 0}
 #print_header p{flex-basis:100%;margin:0;color:#555}
 .card{border:0!important;padding:0!important}
}

/* page links under list tables */
.page-navigation{display:flex;gap:4px;flex-wrap:wrap}
.page-button{min-width:34px;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--sf);color:var(--ink);font-weight:700;font-size:13px;display:inline-grid;place-items:center;text-decoration:none}
.page-button:hover{border-color:var(--pur2);color:var(--ink);text-decoration:none}
.page-button.is-active{background:var(--pur);border-color:var(--pur);color:#fff}
.page-button svg{width:16px;height:16px}

/* loading indicators shown by page scripts (fadeIn/fadeOut) */
.processor{display:none;align-items:center;gap:10px;color:var(--mut);font-weight:600;font-size:13px;margin:12px 0}
.processorBtn{display:none;margin-left:6px}
.enrolment-list:empty{display:none}
.enrolment-list{margin-top:16px;border:1px solid var(--line);border-radius:14px}

/* delete confirmation */
.confirm-page{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6vh 0}
.confirm-card{width:100%;max-width:440px;text-align:center;display:flex;flex-direction:column;align-items:center}
.confirm-card h2{font-size:20px;margin-top:4px}.confirm-card p{color:var(--mut);margin-top:6px}
.confirm-page>#flash-success,.confirm-page>#flash-error{width:100%;max-width:440px}
.filter-bar>.field:has(>.btn){justify-self:start}
.card.card-flush .dataTables_wrapper .dt-buttons{padding-left:var(--pad)}

/* repeating rows added with "Another …" buttons */
.subject-rows{counter-reset:subrow;margin-top:16px}
.subject-row{counter-increment:subrow;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--sf2);margin-bottom:12px;animation:rise .3s both}
.subject-row:before{content:"#" counter(subrow);grid-column:1/-1;font-size:12px;font-weight:800;color:var(--mut);margin-bottom:-6px}
.subject-row .form-input{background:var(--sf)}

/* inline editing in tables (activateInput / updateSubject and similar) */
input.inputReadMode{border:1.5px solid transparent;background:transparent;font:inherit;font-weight:600;color:var(--ink);padding:6px 8px;margin-left:-9px;border-radius:10px;width:100%;min-width:120px;outline:0}
input.inputWriteMode{border:1.5px solid var(--pur2);background:var(--sf);font:inherit;color:var(--ink);padding:6px 10px;border-radius:10px;width:100%;min-width:120px;outline:0}
.chip.size-small{height:28px;padding:0 9px;font-size:12px;border-radius:9px;gap:6px}
.chip.size-small .checkbox-input{width:15px;height:15px;border-radius:5px}
.message-categories{gap:6px;min-width:260px}
.chip.checkbox-label:has(.checkbox-input:disabled){cursor:default;opacity:.85}
.segmented a{height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:700;color:var(--mut);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.segmented a.is-active{background:var(--sf);color:var(--ink);border:1px solid var(--line2)}
.segmented a svg{width:16px;height:16px}.segmented a:hover{color:var(--ink);text-decoration:none}
/* keep the last row of a page clear of the floating action button */
@media screen and (min-width:768px){.content{padding-bottom:104px}}
@media(max-width:767px){
 /* filter bars: fields full width, action buttons side by side without the spacer label */
 .filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
 .filter-bar>.field:not(:has(>.btn)),.filter-bar>:not(.field){grid-column:1/-1}
 .filter-bar>.field:has(>.btn)>label{display:none}
 .filter-bar>.field:has(>.btn){margin-left:0!important}
 /* empty states inside wide tables stay in view */
 .table-wrap .empty{position:sticky;left:16px;width:calc(100vw - 66px)}
}
.report-head .report-head-title{flex:1 1 220px;min-width:0}
/* DataTables keeps the kit table spacing */
table.dataTable.data-table{margin:0!important;border-collapse:separate!important}
table.dataTable.data-table thead th,table.dataTable.data-table thead td{padding:12px 16px;border-bottom:1px solid var(--line)}
table.dataTable.data-table tbody td,table.dataTable.data-table tbody th{padding:14px 16px}
table.dataTable.data-table tfoot td,table.dataTable.data-table tfoot th,.data-table tfoot td{padding:14px 16px;border-top:1px solid var(--line2);border-bottom:0;background:var(--sf2);font-weight:700}
.dataTables_wrapper .dt-buttons{margin:4px 0 12px}
/* prefixed amounts read left to right; only steppers centre their number */
.input-affix:has(>.input-affix-addon:first-child) input{text-align:left}
/* pages opened inside an iframe (?iframe=true) show only their content */
body.embed .app-sidebar,body.embed .topbar,body.embed .bottom-tabs,body.embed .floating-actions,body.embed .sidebar-scrim{display:none!important}
body.embed .app{display:block}body.embed .shell-main{margin:0}
/* sidebar toggles in the top bar (desktop and tablet; phones use the bottom bar) */
.sidebar-toggles{display:flex;gap:6px;flex:none}
.sidebar-toggles .icon-button[aria-pressed=true]{border-color:var(--pur2);color:var(--pur);background:var(--lav)}
html[data-theme=dark] .sidebar-toggles .icon-button[aria-pressed=true]{color:#fff}
@media(max-width:767px){.sidebar-toggles{display:none}}
@media(min-width:768px){
 /* hidden: content uses the full width */
 html[data-side=hidden] .app-sidebar{display:none}
 /* mini: icon rail, labels and sub menus hidden, group links open as a flyout */
 html[data-side=mini]{--side:84px}
 html[data-side=mini] .app-sidebar{width:84px;padding:18px 12px;align-items:center}
 html[data-side=mini] .app-sidebar .nav-label,html[data-side=mini] .app-sidebar .app-brand div,html[data-side=mini] .app-sidebar .nav-submenu,html[data-side=mini] .app-sidebar .chevron,html[data-side=mini] .app-sidebar .nav-group-title,html[data-side=mini] .app-sidebar .profile-button div:not(.user-avatar),html[data-side=mini] .app-sidebar .nav-badge,html[data-side=mini] .app-sidebar .powered,html[data-side=mini] .app-sidebar .app-version{display:none!important}
 html[data-side=mini] .app-brand{padding:2px 0 14px}
 html[data-side=mini] .nav-item{justify-content:center;padding:12px}
 html[data-side=mini] .profile-button{padding:6px;background:none;justify-content:center}
}
@media(min-width:768px) and (max-width:1100px){
 /* tablets start as a rail; "full" opens the complete sidebar */
 html[data-side=full]{--side:264px}
 html[data-side=full] .app-sidebar{width:264px;padding:18px 14px;align-items:stretch}
 html[data-side=full] .app-sidebar .nav-label,html[data-side=full] .app-sidebar .app-brand div,html[data-side=full] .app-sidebar .profile-button div:not(.user-avatar),html[data-side=full] .app-sidebar .chevron,html[data-side=full] .app-sidebar .nav-group-title,html[data-side=full] .app-sidebar .nav-badge{display:block!important}
 html[data-side=full] .app-sidebar .nav-submenu.open{display:flex!important}
 html[data-side=full] .app-brand{padding:2px 8px 18px}
 html[data-side=full] .nav-item{justify-content:flex-start;padding:10px 12px}
 html[data-side=full] .profile-button{padding:12px;background:var(--sf2);justify-content:flex-start}
}
/* group links next to the rail */
html body .app-sidebar .nav-submenu.is-flyout{display:flex!important;position:fixed;z-index:80;margin:0;min-width:220px;max-height:70vh;overflow-y:auto;padding:10px;border:1px solid var(--line2);border-left:1px solid var(--line2);border-radius:16px;background:var(--sf);animation:flyin .16s ease-out}
.app-sidebar .nav-submenu.is-flyout .flyout-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:4px 12px 8px}
.app-sidebar .nav-submenu .flyout-title{display:none}.app-sidebar .nav-submenu.is-flyout .flyout-title{display:block}
@keyframes flyin{from{opacity:0;transform:translateX(-6px)}}
/* rating stars: drawn as a mask so they show on any card colour and in dark mode */
[class*=rate-ex] .rate-btn{background:var(--line2)!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") center/78% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") center/78% no-repeat;transition:background-color .12s}
[class*=rate-ex] .rate-btn:hover,[class*=rate-ex] .rate-btn-hover,[class*=rate-ex] .rate-btn-active{background:#f6931e!important}
.rate-ex1-cnt{border:0!important;background:none!important}
.badge:has([class*=rate-ex]){background:none!important;padding:0!important;border:0!important}
/* Settings > Themes: dark header and dark sidebar */
:root{--chrome:#183543;--chrome-2:rgba(255,255,255,.08);--chrome-3:rgba(255,255,255,.16);--chrome-line:rgba(255,255,255,.14);--chrome-mut:rgba(255,255,255,.62)}
html[data-theme=dark]{--chrome:#0c1d24}
html[data-header=dark] .topbar{background:var(--chrome);border-bottom-color:transparent;backdrop-filter:none;color:#fff}
html[data-header=dark] .topbar .topbar-title h1,html[data-header=dark] .topbar .topbar-clock b,html[data-header=dark] .topbar .session-button b{color:#fff}
html[data-header=dark] .topbar .topbar-title p,html[data-header=dark] .topbar .topbar-clock small,html[data-header=dark] .topbar .session-button small,html[data-header=dark] .topbar .topbar-search{color:var(--chrome-mut)}
html[data-header=dark] .topbar .icon-button,html[data-header=dark] .topbar .topbar-search,html[data-header=dark] .topbar .session-button{background:var(--chrome-2);border-color:var(--chrome-line);color:#fff}
html[data-header=dark] .topbar .icon-button:hover,html[data-header=dark] .topbar .icon-button[aria-expanded=true],html[data-header=dark] .topbar .topbar-search:hover,html[data-header=dark] .topbar .session-button:hover{border-color:rgba(255,255,255,.4);color:#fff}
html[data-header=dark] .topbar .sidebar-toggles .icon-button[aria-pressed=true]{background:var(--chrome-3);border-color:rgba(255,255,255,.4);color:#fff}
html[data-header=dark] .topbar kbd{background:var(--chrome-2);border-color:var(--chrome-line);color:var(--chrome-mut)}
html[data-header=dark] .topbar .icon-button .badge-count{border-color:var(--chrome)}
html[data-sidebar=dark] .app-sidebar{background:var(--chrome);border-right-color:transparent;color:#fff}
html[data-sidebar=dark] .app-sidebar .theme-light-only{display:none!important}
html[data-sidebar=dark] .app-sidebar .theme-dark-only{display:block!important}
html[data-sidebar=dark] .app-sidebar .app-brand b{color:#fff}
html[data-sidebar=dark] .app-sidebar .app-brand small,html[data-sidebar=dark] .app-sidebar .nav-group-title,html[data-sidebar=dark] .app-sidebar .profile-button small,html[data-sidebar=dark] .sidebar-footer .app-version{color:var(--chrome-mut)}
html[data-sidebar=dark] .app-sidebar .nav-item{color:rgba(255,255,255,.82)}
html[data-sidebar=dark] .app-sidebar .nav-item:hover{background:var(--chrome-2);color:#fff}
html[data-sidebar=dark] .app-sidebar .nav-item.is-active{background:var(--chrome-3);color:#fff}
html[data-sidebar=dark] .app-sidebar .nav-submenu{border-left-color:var(--chrome-line)}
html[data-sidebar=dark] .app-sidebar .nav-submenu a,html[data-sidebar=dark] .app-sidebar .nav-submenu button{color:var(--chrome-mut)}
html[data-sidebar=dark] .app-sidebar .nav-submenu a:hover,html[data-sidebar=dark] .app-sidebar .nav-submenu button:hover{background:var(--chrome-2);color:#fff}
html[data-sidebar=dark] .app-sidebar .nav-submenu a.is-active,html[data-sidebar=dark] .app-sidebar .nav-submenu button.is-active{background:var(--chrome-3);color:#fff}
html[data-sidebar=dark] .app-sidebar .nav-subheading{color:#ffb27a;background:rgba(246,147,30,.14)}
html[data-sidebar=dark] .app-sidebar .profile-button{background:var(--chrome-2);color:#fff}
html[data-sidebar=dark] .sidebar-footer .powered{color:rgba(255,255,255,.8)}
html[data-sidebar=dark] .app-sidebar::-webkit-scrollbar-thumb{background:var(--chrome-3)}
html[data-sidebar=dark] body .app-sidebar .nav-submenu.is-flyout{background:var(--chrome);border-color:var(--chrome-line)}
html[data-sidebar=dark] .app-sidebar .nav-submenu.is-flyout .flyout-title{color:var(--chrome-mut)}

/* Settings > Themes choices (kept here so they load with the shell styles) */
#app-settings .theme-look{display:flex;flex-direction:column;gap:16px;margin-top:16px}
#app-settings .theme-look-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:center}
#app-settings .theme-look-row>div:first-child b{display:block;font-size:14px}
#app-settings .theme-look-row>div:first-child small{font-size:12px;color:var(--mut)}
#app-settings .theme-look-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#app-settings .theme-look-options .choice{align-items:center}
#app-settings .theme-look-swatch{width:64px;height:42px;border-radius:10px;border:1px solid var(--line2);display:grid;grid-template-columns:18px 1fr;grid-template-rows:12px 1fr;overflow:hidden;flex:none;background:#f3f6f7}
#app-settings .theme-look-swatch i:nth-child(1){grid-row:1/3;background:#fff;border-right:1px solid #dfe6e9}
#app-settings .theme-look-swatch i:nth-child(2){background:#fff;border-bottom:1px solid #dfe6e9}
#app-settings .theme-look-swatch.mode.dark{background:#10232b}
#app-settings .theme-look-swatch.mode.dark i:nth-child(1),#app-settings .theme-look-swatch.mode.dark i:nth-child(2){background:#16303b;border-color:#24414d}
#app-settings .theme-look-swatch.header.dark i:nth-child(2){background:#183543;border-color:#183543}
#app-settings .theme-look-swatch.sidebar.dark i:nth-child(1){background:#183543;border-color:#183543}
#app-settings .theme-look-swatch.header i:nth-child(1),#app-settings .theme-look-swatch.sidebar i:nth-child(2){opacity:.55}
@media (max-width:767px){#app-settings .theme-look-row{grid-template-columns:minmax(0,1fr)}}
/* dark sidebar column runs to the bottom of long pages */
@media(min-width:768px){
 html[data-sidebar=dark] .app{background:linear-gradient(to right,var(--chrome) var(--side),transparent var(--side))}
 html[data-sidebar=dark][data-side=hidden] .app{background:none}
}
/* messages: dark pill at the bottom centre (flashMessage, alertMe, form checks, quick notes) */
.toast-stack{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:2100;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.toast-stack .toast{position:static;transform:translateY(16px);left:auto;bottom:auto;display:flex;align-items:center;gap:12px;background:#183543;color:#fff;padding:14px 20px;border-radius:14px;font-weight:700;font-size:14px;line-height:1.35;opacity:0;transition:opacity .25s,transform .25s;pointer-events:auto;cursor:pointer;max-width:min(560px,calc(100vw - 32px));white-space:pre-line}
.toast-stack .toast.is-active{opacity:1;transform:none}
.toast-stack .toast svg{width:20px;height:20px;flex:none;color:var(--sun)}
.toast-stack .toast-success svg{color:#3ddc97}.toast-stack .toast-error svg{color:#ff7a6b}
html[data-theme=dark] .toast-stack .toast{background:#24414d}
@media(max-width:767px){.toast-stack{bottom:calc(var(--tabs,76px) + 20px)}}
@media print{.toast-stack{display:none!important}}
#flash-success.is-toasted,#flash-error.is-toasted{display:none!important}
/* cards rise once from the first paint; scripts no longer hide and replay them after loading */
@media (prefers-reduced-motion:no-preference){
 #iems-main :is(.grid,.stack,.kpi-grid)>*:not(.hero){animation:up .45s cubic-bezier(.2,.7,.2,1) backwards}
 #iems-main :is(.grid,.stack,.kpi-grid)>*:nth-child(2){animation-delay:50ms}
 #iems-main :is(.grid,.stack,.kpi-grid)>*:nth-child(3){animation-delay:100ms}
 #iems-main :is(.grid,.stack,.kpi-grid)>*:nth-child(4){animation-delay:150ms}
 #iems-main :is(.grid,.stack,.kpi-grid)>*:nth-child(5){animation-delay:200ms}
 #iems-main :is(.grid,.stack,.kpi-grid)>*:nth-child(n+6){animation-delay:250ms}
}
/* desktop scale: the shell is drawn at 87.5% on standard screens; phones and print stay at 100% */
:root{--z:1}
@media screen and (min-width:1200px){:root{--z:.875}}
.app,.palette,.toast-stack,#alert,.floating-actions{zoom:var(--z)}
.app{min-height:calc(100vh / var(--z))}
.app-sidebar{height:calc(100vh / var(--z))}
.popover-panel{max-height:calc(100vh / var(--z) - 100px)}
.side-drawer{height:calc(100vh / var(--z))}

/* chart hover: one tooltip per label listing every series */
.chart-hit-area{fill:transparent;cursor:crosshair}
.chart-hit-area.is-active{fill:var(--line);fill-opacity:.35}
.chart-guide{stroke:var(--mut);stroke-dasharray:3 3;opacity:0;pointer-events:none}
.chart-guide.is-active{opacity:.7}
.chart-tooltip{position:absolute;z-index:5;pointer-events:none;opacity:0;background:var(--sf);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:12px;min-width:150px;display:flex;flex-direction:column;gap:4px;white-space:nowrap}
.chart-tooltip.is-active{opacity:1}
.chart-tooltip b{font-size:12px;font-weight:800;margin-bottom:2px}
.chart-tooltip span{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--mut)}
.chart-tooltip span i{width:10px;height:10px;border-radius:3px;flex:none}
.chart-tooltip em{font-style:normal;margin-left:auto;padding-left:14px;color:var(--ink);font-weight:800;font-family:var(--mono,monospace)}
.chart-tooltip.floating-tooltip{position:fixed;z-index:1000;min-width:0;font-weight:700}
[data-tip]{cursor:pointer}
@media print{.chart-tooltip,.chart-hit-area,.chart-guide{display:none}}
.chart-box .chart-bar,.chart-box .chart-line,.chart-box .chart-area,.chart-box .chart-point{pointer-events:none}

/* soft card shadow (the global reset removes shadows everywhere else) */
:root{--card-shadow:0 1px 2px rgba(24,53,67,.05),0 6px 18px -6px rgba(24,53,67,.12);--card-shadow-hover:0 2px 4px rgba(24,53,67,.06),0 12px 28px -8px rgba(24,53,67,.18)}
html[data-theme=dark]{--card-shadow:0 1px 2px rgba(0,0,0,.35),0 8px 22px -8px rgba(0,0,0,.55);--card-shadow-hover:0 2px 4px rgba(0,0,0,.4),0 14px 30px -8px rgba(0,0,0,.65)}
.card,.kpi-card{box-shadow:var(--card-shadow)!important}
a.kpi-card:hover,button.kpi-card:hover{box-shadow:var(--card-shadow-hover)!important}
.card .card,.card .kpi-card{box-shadow:none!important}
@media print{.card,.kpi-card{box-shadow:none!important}}