/* BIH FINAL UI OVERRIDE — approved login + readable light/dark dashboard */ :root{--final-blue:#0a75e8;--final-blue2:#0058b8;--final-gold:#f2b51d;--final-green:#49a92d;--final-navy:#061522;--final-navy2:#0b2033;--final-border:#27435d} /* ---------- APPROVED LOGIN: DARK MODERN ---------- */ #loginScreen.chooser-mode{min-height:100vh!important;display:block!important;background: radial-gradient(circle at 50% -15%,rgba(0,119,255,.17),transparent 36%), radial-gradient(circle at 11% 88%,rgba(242,181,29,.06),transparent 25%), radial-gradient(circle at 88% 80%,rgba(0,119,255,.07),transparent 28%), linear-gradient(180deg,#061522 0%,#04111d 100%)!important;color:#fff!important;overflow:auto!important} #loginScreen.chooser-mode .login-visual{display:none!important} #loginScreen.chooser-mode .login-panel{min-height:100vh!important;width:100%!important;padding:42px 28px 28px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important} #loginScreen.chooser-mode .login-choice-card{width:min(1120px,96vw)!important;max-width:none!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important} #loginScreen.chooser-mode .approved-login-brand{display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important;margin:0 auto 10px!important} #loginScreen.chooser-mode .approved-login-brand .brand-mark{width:230px!important;height:138px!important;margin:0 auto!important;display:block!important;background:transparent!important;border:0!important;box-shadow:none!important} #loginScreen.chooser-mode .approved-login-brand .brand-mark img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 10px 24px rgba(0,119,255,.22))!important} #loginScreen.chooser-mode .approved-brand-title{display:flex!important;align-items:center!important;justify-content:center!important;gap:18px!important;color:#f3b91f!important;font-size:22px!important;font-weight:900!important;letter-spacing:.22em!important;line-height:1.1!important;text-align:center!important;margin:3px 0 12px!important} #loginScreen.chooser-mode .approved-brand-title:before,#loginScreen.chooser-mode .approved-brand-title:after{content:""!important;display:block!important;width:92px!important;height:1px!important;background:linear-gradient(90deg,transparent,#f2b51d)!important;opacity:.85!important} #loginScreen.chooser-mode .approved-brand-title:after{background:linear-gradient(90deg,#f2b51d,transparent)!important} #loginScreen.chooser-mode .approved-login-intro p{margin:0 0 34px!important;color:#d9e4ef!important;font-size:18px!important;font-weight:600!important;text-align:center!important;opacity:1!important} #loginScreen.chooser-mode .login-type-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:26px!important;margin:0 auto!important;max-width:980px!important} #loginScreen.chooser-mode .login-type-card{min-height:360px!important;padding:28px 26px 24px!important;border-radius:23px!important;background:linear-gradient(180deg,#0d2337,#091827)!important;color:#fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;text-align:center!important;border:1px solid #2e4e69!important;box-shadow:0 22px 50px rgba(0,0,0,.30)!important;transform:none!important;overflow:visible!important} #loginScreen.chooser-mode .login-type-card:hover{transform:translateY(-4px)!important;background:linear-gradient(180deg,#102a42,#0a1b2c)!important} #loginScreen.chooser-mode .login-type-card>span{width:118px!important;height:118px!important;flex:0 0 118px!important;border-radius:50%!important;display:grid!important;place-items:center!important;padding:18px!important;background:#071521!important;margin:0 0 18px!important;overflow:hidden!important} #loginScreen.chooser-mode .login-type-card>span img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:12px!important;opacity:1!important;filter:none!important} #loginScreen.chooser-mode .login-type-card div{display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important;min-height:105px!important} #loginScreen.chooser-mode .login-type-card strong{font-size:28px!important;line-height:1!important;letter-spacing:.02em!important;color:#fff!important;opacity:1!important} #loginScreen.chooser-mode .login-type-card small{font-size:15px!important;line-height:1.55!important;color:#c8d6e4!important;opacity:1!important} #loginScreen.chooser-mode .login-type-card>b{position:static!important;margin-top:auto!important;width:100%!important;min-height:58px!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:0!important;color:#fff!important;box-shadow:none!important} #loginScreen.chooser-mode .login-type-card>b:before{content:"Login"!important;font-size:18px!important;font-weight:850!important} #loginScreen.chooser-mode .login-type-card>b:after{content:" →"!important;font-size:22px!important;margin-left:12px!important} #loginScreen.chooser-mode .admin-login{border-color:#a97800!important;box-shadow:0 22px 50px rgba(0,0,0,.28),0 0 30px rgba(242,181,29,.07)!important} #loginScreen.chooser-mode .admin-login>span{border:2px solid #f2b51d!important;box-shadow:0 0 28px rgba(242,181,29,.22)!important} #loginScreen.chooser-mode .admin-login>b{background:linear-gradient(135deg,#f2b51d,#a86b00)!important} #loginScreen.chooser-mode .peima-login{border-color:#2f7623!important;box-shadow:0 22px 50px rgba(0,0,0,.28),0 0 30px rgba(72,180,47,.07)!important} #loginScreen.chooser-mode .peima-login>span{border:2px solid #53b735!important;box-shadow:0 0 28px rgba(83,183,53,.22)!important} #loginScreen.chooser-mode .peima-login>b{background:linear-gradient(135deg,#58b93a,#23711e)!important} #loginScreen.chooser-mode .pef-login{border-color:#0878d7!important;box-shadow:0 22px 50px rgba(0,0,0,.28),0 0 30px rgba(0,119,255,.09)!important} #loginScreen.chooser-mode .pef-login>span{border:2px solid #0d91ff!important;box-shadow:0 0 28px rgba(13,145,255,.25)!important} #loginScreen.chooser-mode .pef-login>b{background:linear-gradient(135deg,#118cff,#0057b8)!important} #loginScreen.chooser-mode .login-feature-strip{margin:30px auto 0!important;max-width:670px!important;border-top:1px solid rgba(242,181,29,.28)!important;border-bottom:1px solid rgba(242,181,29,.15)!important;padding:15px 10px!important;display:flex!important;justify-content:center!important;gap:42px!important;color:#e7edf3!important;font-size:14px!important;background:rgba(6,21,34,.44)!important} #loginScreen.chooser-mode .login-feature-strip i{color:#f2b51d!important;font-style:normal!important;margin-right:7px!important} #loginScreen.chooser-mode .login-copyright{display:block!important;text-align:center!important;color:#91a4b7!important;font-size:12px!important;margin:18px 0 0!important;opacity:1!important} /* ---------- LOGIN FORM: keep same premium dark family ---------- */ #loginScreen:not(.chooser-mode){background:linear-gradient(180deg,#061522,#04111d)!important} #loginScreen:not(.chooser-mode) .login-visual{background:linear-gradient(145deg,#061522,#0a2742)!important} #loginScreen:not(.chooser-mode) .login-card{background:#0b1d2d!important;border:1px solid #2b475f!important;color:#fff!important} #loginScreen:not(.chooser-mode) .login-card :where(h2,strong,label){color:#fff!important} #loginScreen:not(.chooser-mode) .login-card :where(p,small,.login-hint){color:#c7d5e2!important;opacity:1!important} /* ---------- PORTAL LAYOUT ---------- */ #portal{--sidebar:310px!important;background:#f2f6fa!important} #portal .sidebar{width:310px!important;padding:14px 16px 18px!important;background:#071c30!important;border-right:1px solid #1b3952!important;box-shadow:none!important} #portal .app-shell{grid-column:2!important} #portal .sidebar-brand{min-height:116px!important;margin:0 0 22px!important;padding:20px 18px!important;border:1px solid #225a86!important;border-radius:20px!important;background:linear-gradient(135deg,#08213a,#0a4a78)!important;display:flex!important;align-items:center!important;gap:15px!important;box-shadow:0 12px 28px rgba(2,25,45,.16)!important} #portal .sidebar .brand-logo-frame{width:88px!important;height:70px!important;flex:0 0 88px!important} #portal .sidebar .brand-logo-frame img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 5px 10px rgba(0,119,255,.24))!important} #portal .sidebar-brand>div:last-child strong{font-size:16px!important;line-height:1.15!important;letter-spacing:.075em!important;color:#f2b51d!important;font-weight:900!important} #portal .sidebar-brand>div:last-child strong span{display:block!important;color:#fff!important;margin-top:4px!important} #portal .side-nav{gap:8px!important;padding-top:0!important} #portal .nav-item{min-height:58px!important;margin:0 8px!important;padding:14px 16px!important;border-radius:14px!important;color:#d6e1eb!important;font-size:16px!important;font-weight:780!important;opacity:1!important} #portal .nav-item span{width:32px!important;height:32px!important;border-radius:9px!important;display:grid!important;place-items:center!important;background:#17354e!important;border:1px solid #2d4e68!important} #portal .nav-item img{width:18px!important;height:18px!important;filter:brightness(0) invert(1)!important} #portal .nav-item.active{background:linear-gradient(90deg,#0b6ee9,#6da5ef)!important;color:#fff!important;box-shadow:0 10px 22px rgba(10,110,233,.18)!important;border:0!important} #portal .nav-item.active span{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.18)!important} #portal .sidebar-foot{margin:26px 0 0!important;padding:14px!important;border-radius:14px!important;background:#10283d!important;border:1px solid #294860!important;color:#f1f6fb!important} #portal .sidebar-foot strong{color:#f1f6fb!important;opacity:1!important}#portal .sidebar-foot small{color:#9fb1c1!important;opacity:1!important} #portal .topbar{height:96px!important;padding:0 38px!important;background:#fff!important;border-bottom:1px solid #d8e4ee!important;box-shadow:0 4px 15px rgba(10,39,64,.04)!important} #portal .top-label{color:#0a67ba!important;font-weight:900!important;font-size:12px!important;letter-spacing:.11em!important;opacity:1!important} #portal .topbar h2{font-size:24px!important;color:#10263b!important;margin-top:4px!important} #portal .topbar .icon-button,#portal .topbar .profile-chip{background:#fff!important;border-color:#d4e0e9!important;color:#10263b!important} #portal .topbar .profile-chip strong{color:#10263b!important}#portal .topbar .profile-chip small{color:#60778d!important;opacity:1!important} #portal .content{max-width:none!important;margin:0!important;padding:38px 42px 72px!important;background:#f2f6fa!important;min-height:calc(100vh - 96px)!important} /* ---------- ADMIN DASHBOARD: approved recent-interface structure, fully colored/readable ---------- */ #portal .admin-overview-heading{min-height:190px!important;padding:34px 38px!important;border-radius:24px!important;background:linear-gradient(105deg,#f8fbff 0%,#f3f8ff 58%,#fff8e5 100%)!important;border:1px solid #cfdde8!important;border-left:5px solid #1477e8!important;color:#10263b!important;box-shadow:0 16px 36px rgba(21,50,77,.06)!important;display:flex!important;align-items:center!important} #portal .admin-overview-heading .eyebrow{color:#0a6bd0!important;font-weight:900!important;opacity:1!important} #portal .admin-overview-heading h1{font-size:48px!important;line-height:1.08!important;margin:14px 0 7px!important;color:#10263b!important} #portal .admin-overview-heading p{font-size:17px!important;color:#526b82!important;opacity:1!important} #portal .admin-overview-heading .primary-button{background:linear-gradient(135deg,#117ee9,#075eaf)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(11,109,209,.20)!important} #portal .admin-overview-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:18px!important;margin:26px 0!important} #portal .admin-stat-card{min-height:230px!important;padding:24px!important;border-radius:22px!important;box-shadow:0 14px 30px rgba(16,48,78,.06)!important} #portal .admin-stat-card>span{width:58px!important;height:58px!important;border-radius:16px!important;margin-bottom:22px!important} #portal .admin-stat-card small{font-size:15px!important;font-weight:850!important;opacity:1!important} #portal .admin-stat-card strong{font-size:46px!important;margin:7px 0 14px!important;line-height:1!important} #portal .admin-stat-card b{font-size:12px!important;opacity:1!important} body:not(.dark) #portal .stat-schools{background:linear-gradient(145deg,#fff9e8,#fffdf8)!important;border:1px solid #efd28a!important}body:not(.dark) #portal .stat-schools :where(small,strong,b){color:#18324a!important} body:not(.dark) #portal .stat-pef{background:linear-gradient(145deg,#eaf4ff,#f8fbff)!important;border:1px solid #bdd9f7!important}body:not(.dark) #portal .stat-pef :where(small,strong){color:#173650!important}body:not(.dark) #portal .stat-pef b{color:#0864bd!important} body:not(.dark) #portal .stat-peima{background:linear-gradient(145deg,#e9f8ef,#f8fdf9)!important;border:1px solid #b8dfc7!important}body:not(.dark) #portal .stat-peima :where(small,strong){color:#173b2d!important}body:not(.dark) #portal .stat-peima b{color:#127b4f!important} body:not(.dark) #portal .stat-students{background:linear-gradient(145deg,#fff0f1,#fffafa)!important;border:1px solid #f1c5ca!important}body:not(.dark) #portal .stat-students :where(small,strong,b){color:#3e272b!important} body:not(.dark) #portal .stat-teachers{background:linear-gradient(145deg,#f4efff,#fbf9ff)!important;border:1px solid #dacbf2!important}body:not(.dark) #portal .stat-teachers :where(small,strong,b){color:#302844!important} /* All common light-theme surfaces and text remain readable */ body:not(.dark) #portal :where(h1,h2,h3,h4,strong,label,th){color:#10263b!important} body:not(.dark) #portal :where(p,small,td,.muted,.eyebrow){color:#536b82!important;opacity:1!important} body:not(.dark) #portal .panel,body:not(.dark) #portal .metric-card,body:not(.dark) #portal .action-card,body:not(.dark) #portal .feature-card,body:not(.dark) #portal .org-download-card{background:#fff!important;border-color:#d3e0e9!important;color:#10263b!important;box-shadow:0 10px 26px rgba(12,43,69,.05)!important} body:not(.dark) #portal input,body:not(.dark) #portal select,body:not(.dark) #portal textarea{background:#fff!important;color:#10263b!important;border-color:#c8d8e4!important} /* ---------- DARK THEME ---------- */ body.dark #portal{background:#06111c!important} body.dark #portal .sidebar{background:#071724!important;border-right-color:#223a4e!important} body.dark #portal .sidebar-brand{background:linear-gradient(135deg,#081928,#211a09)!important;border-color:#6e5413!important} body.dark #portal .nav-item{color:#cbd6df!important}body.dark #portal .nav-item.active{background:linear-gradient(90deg,#725000,#3a2a07)!important;box-shadow:inset 4px 0 #f2b51d,0 10px 24px rgba(0,0,0,.18)!important} body.dark #portal .topbar{background:#07111b!important;border-color:#283c4f!important}body.dark #portal .top-label{color:#f2b51d!important}body.dark #portal .topbar h2,body.dark #portal .topbar .profile-chip strong{color:#fff!important}body.dark #portal .topbar .profile-chip small{color:#aebdcc!important}body.dark #portal .topbar .icon-button,body.dark #portal .topbar .profile-chip{background:#0d1e2d!important;border-color:#31485c!important;color:#fff!important} body.dark #portal .content{background:#06111c!important;color:#f6f8fb!important} body.dark #portal .admin-overview-heading{background:linear-gradient(105deg,#0b1722,#111d28 60%,#251c08)!important;border-color:#34495c!important;border-left-color:#f2b51d!important;color:#fff!important;box-shadow:0 18px 38px rgba(0,0,0,.22)!important} body.dark #portal .admin-overview-heading .eyebrow{color:#41a5ff!important}body.dark #portal .admin-overview-heading h1{color:#fff!important}body.dark #portal .admin-overview-heading p{color:#c1cfdb!important} body.dark #portal .admin-stat-card{border:1px solid #2d4356!important;box-shadow:0 16px 30px rgba(0,0,0,.20)!important} body.dark #portal .stat-schools{background:linear-gradient(145deg,#2b2109,#0c1824)!important;border-color:#6e5617!important}body.dark #portal .stat-pef{background:linear-gradient(145deg,#0a2a4b,#0c1824)!important;border-color:#19558d!important}body.dark #portal .stat-peima{background:linear-gradient(145deg,#0a3929,#0c1824)!important;border-color:#1f7757!important}body.dark #portal .stat-students{background:linear-gradient(145deg,#3a181b,#0c1824)!important;border-color:#7f353d!important}body.dark #portal .stat-teachers{background:linear-gradient(145deg,#291c42,#0c1824)!important;border-color:#5b427e!important} body.dark #portal .admin-stat-card :where(small,strong,b){color:#fff!important;opacity:1!important}body.dark #portal .admin-stat-card b{color:#8fcbff!important} body.dark #portal :where(h1,h2,h3,h4,strong,label,th){color:#f7fafc!important}body.dark #portal :where(p,small,td,.muted,.eyebrow){color:#b9c8d5!important;opacity:1!important} body.dark #portal .panel,body.dark #portal .metric-card,body.dark #portal .action-card,body.dark #portal .feature-card,body.dark #portal .org-download-card{background:#0c1926!important;border-color:#2b4154!important;color:#f7fafc!important;box-shadow:0 14px 30px rgba(0,0,0,.20)!important} body.dark #portal input,body.dark #portal select,body.dark #portal textarea{background:#071522!important;color:#fff!important;border-color:#39526a!important} body.dark #portal thead th{background:#163048!important;color:#fff!important}body.dark #portal tbody tr:nth-child(even){background:#0f1f2e!important} /* ---------- ROLE/SCHOOL CARDS ---------- */ #portal .action-card,#portal .metric-card,#portal .feature-card{border-radius:18px!important} #portal .action-card b,#portal .feature-card b{opacity:1!important} body:not(.dark) #portal .action-grid .action-card:nth-child(1){background:#fff8e8!important;border-color:#efd79c!important}body:not(.dark) #portal .action-grid .action-card:nth-child(2){background:#eaf4ff!important;border-color:#c0d9f5!important}body:not(.dark) #portal .action-grid .action-card:nth-child(3){background:#eaf8f0!important;border-color:#c3e4d0!important}body:not(.dark) #portal .action-grid .action-card:nth-child(4){background:#fff0f2!important;border-color:#efc8ce!important}body:not(.dark) #portal .action-grid .action-card:nth-child(5){background:#f4efff!important;border-color:#d9cbf1!important} body.dark #portal .action-grid .action-card:nth-child(1){background:linear-gradient(145deg,#281f09,#0c1926)!important;border-color:#665015!important}body.dark #portal .action-grid .action-card:nth-child(2){background:linear-gradient(145deg,#0a2948,#0c1926)!important;border-color:#185383!important}body.dark #portal .action-grid .action-card:nth-child(3){background:linear-gradient(145deg,#0a3425,#0c1926)!important;border-color:#1c6b4d!important}body.dark #portal .action-grid .action-card:nth-child(4){background:linear-gradient(145deg,#351719,#0c1926)!important;border-color:#763238!important}body.dark #portal .action-grid .action-card:nth-child(5){background:linear-gradient(145deg,#291d42,#0c1926)!important;border-color:#5a4279!important} /* ---------- TABLE / EXCEL-LIKE VIEW READABILITY ---------- */ #portal table{color:inherit!important}#portal th,#portal td{opacity:1!important} /* responsive */ @media(max-width:1180px){#portal{--sidebar:260px!important}#portal .sidebar{width:260px!important}#portal .admin-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#portal .admin-stat-card:last-child{grid-column:span 2}#portal .sidebar-brand{padding:16px 12px!important}#portal .sidebar .brand-logo-frame{width:72px!important;height:58px!important;flex-basis:72px!important}} @media(max-width:900px){#loginScreen.chooser-mode .login-type-list{grid-template-columns:1fr!important;max-width:540px!important}#loginScreen.chooser-mode .login-type-card{min-height:250px!important}#portal .sidebar{width:min(86vw,310px)!important}#portal .content{padding:24px 18px 60px!important}#portal .admin-overview-grid{grid-template-columns:1fr!important}#portal .admin-stat-card:last-child{grid-column:auto}#portal .admin-overview-heading h1{font-size:34px!important}} @media(max-width:600px){#loginScreen.chooser-mode .login-panel{padding:28px 14px!important}#loginScreen.chooser-mode .approved-login-brand .brand-mark{width:180px!important;height:108px!important}#loginScreen.chooser-mode .approved-brand-title{font-size:15px!important;letter-spacing:.13em!important;gap:10px!important}#loginScreen.chooser-mode .approved-brand-title:before,#loginScreen.chooser-mode .approved-brand-title:after{width:36px!important}#loginScreen.chooser-mode .approved-login-intro p{font-size:15px!important;margin-bottom:24px!important}#loginScreen.chooser-mode .login-type-card{padding:22px!important;min-height:240px!important}#loginScreen.chooser-mode .login-type-card>span{width:92px!important;height:92px!important;flex-basis:92px!important}#loginScreen.chooser-mode .login-feature-strip{gap:14px!important;flex-wrap:wrap!important}} /* Reference-board finishing details */ #loginScreen.chooser-mode:before{display:block!important;content:""!important;position:fixed!important;inset:0!important;background:url("assets/bih-brand-mark-transparent.png?v=142") 4% 30%/420px auto no-repeat,url("assets/bih-brand-mark-transparent.png?v=142") 98% 73%/420px auto no-repeat!important;opacity:.035!important;pointer-events:none!important} #loginScreen.chooser-mode .login-panel:before{opacity:.12!important} /* Approved dashboard composition from the supplied visual board */ #portal .reference-admin-dashboard{display:grid;gap:14px} #portal .reference-admin-hero{min-height:138px;padding:24px 30px;display:grid;grid-template-columns:minmax(0,1fr) 330px auto;align-items:center;gap:22px;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:linear-gradient(105deg,#f8fbff,#fff);box-shadow:0 12px 28px rgba(16,48,78,.05)} #portal .reference-admin-hero>div:first-child>span{display:block;color:#263f56;font-size:13px;font-weight:750} #portal .reference-admin-hero h1{margin:5px 0 7px!important;color:#0b67d4!important;font-size:30px!important;line-height:1!important} #portal .reference-admin-hero p{margin:0;color:#536b82;font-size:13px} #portal .reference-school-visual{height:100px;display:grid;place-items:center;position:relative} #portal .reference-school-visual:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,transparent,#0b67d4,transparent);box-shadow:0 0 18px rgba(11,103,212,.32)} #portal .reference-school-visual img{position:relative;z-index:1;width:92px;height:92px;padding:14px;border-radius:24px;background:#eef5ff;filter:drop-shadow(0 12px 14px rgba(11,103,212,.18))} #portal .reference-admin-hero>.primary-button{white-space:nowrap;background:linear-gradient(135deg,#0f7cf1,#0759c7)!important} #portal .reference-stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;margin:0!important} #portal .reference-stat-grid .admin-stat-card{min-height:128px!important;padding:16px!important;border-radius:15px!important;display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;column-gap:12px!important;align-items:center!important;text-align:left!important} #portal .reference-stat-grid .admin-stat-card>span{grid-column:1;grid-row:1/4;width:54px!important;height:54px!important;margin:0!important;border-radius:14px!important} #portal .reference-stat-grid .admin-stat-card>small{grid-column:2;grid-row:1;font-size:12px!important;align-self:end} #portal .reference-stat-grid .admin-stat-card>strong{grid-column:2;grid-row:2;margin:2px 0!important;font-size:34px!important;line-height:1!important} #portal .reference-stat-grid .admin-stat-card>b{grid-column:2;grid-row:3;font-size:10px!important;align-self:start} #portal .reference-actions-heading{display:flex;align-items:center;gap:10px;padding:3px 10px 1px;border-bottom:1px solid var(--border)} #portal .reference-actions-heading i{width:8px;height:8px;border-radius:50%;background:#0b67d4;box-shadow:0 0 0 5px rgba(11,103,212,.1)} #portal .reference-actions-heading h2{margin:0 0 10px!important;font-size:17px!important} #portal .reference-admin-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} #portal .reference-action{min-height:82px;padding:13px;border:1px solid var(--border);border-radius:14px;background:#fff;color:#10263b;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:10px;text-align:left;transition:.2s} #portal .reference-action:hover{transform:translateY(-3px);border-color:currentColor} #portal .reference-action>span{width:44px;height:44px;padding:9px;border-radius:12px;background:color-mix(in srgb,currentColor 12%,#fff)} #portal .reference-action img{width:100%;height:100%;object-fit:contain} #portal .reference-action strong,#portal .reference-action small{display:block} #portal .reference-action strong{font-size:11px;color:currentColor!important}.reference-action small{margin-top:5px;font-size:10px;color:#60778d!important} #portal .reference-action>b{font-size:22px}.action-students{color:#d99a00!important}.action-staff{color:#1374df!important}.action-clean{color:#16955a!important}.action-register{color:#dc3440!important}.action-location{color:#7939b9!important} body.dark #portal .reference-admin-hero{background:linear-gradient(105deg,#0a1520 0%,#0c1721 62%,#241b07 100%);border-color:#384b5c} body.dark #portal .reference-admin-hero>div:first-child>span{color:#fff}body.dark #portal .reference-admin-hero h1{color:#f2b51d!important}body.dark #portal .reference-admin-hero p{color:#d1dae2} body.dark #portal .reference-school-visual:after{background:linear-gradient(90deg,transparent,#f2b51d,transparent);box-shadow:0 0 18px rgba(242,181,29,.35)} body.dark #portal .reference-school-visual img{background:#221b0a;filter:drop-shadow(0 12px 14px rgba(242,181,29,.22)) brightness(1.4) sepia(.5)} body.dark #portal .reference-actions-heading{border-bottom-color:#263b4d}body.dark #portal .reference-actions-heading i{background:#f2b51d;box-shadow:0 0 0 5px rgba(242,181,29,.1)} body.dark #portal .reference-action{background:#0c1926;border-color:#2c4052;color:#fff}body.dark #portal .reference-action>span{background:rgba(255,255,255,.055)}body.dark #portal .reference-action small{color:#c0cbd5!important} body:not(.dark) #portal .sidebar{background:#fff!important;border-right-color:#d6e2ec!important;color:#15304a!important} body:not(.dark) #portal .sidebar-brand{background:linear-gradient(135deg,#f6fbff,#e7f2ff)!important;border-color:#c9ddf0!important} body:not(.dark) #portal .sidebar-brand>div:last-child strong{color:#0a67d2!important}body:not(.dark) #portal .sidebar-brand>div:last-child strong span{color:#15304a!important}body:not(.dark) #portal .sidebar-brand>div:last-child small{color:#60778d!important} body:not(.dark) #portal .nav-item{color:#19334c!important}body:not(.dark) #portal .nav-item span{background:#edf3fa!important;border-color:#d8e3ee!important}body:not(.dark) #portal .nav-item img{filter:none!important;opacity:.7}body:not(.dark) #portal .nav-item.active{color:#fff!important}body:not(.dark) #portal .nav-item.active img{filter:brightness(0) invert(1)!important;opacity:1} body:not(.dark) #portal .sidebar-foot{background:#f7fbff!important;border-color:#d4e2ee!important;color:#15304a!important}body:not(.dark) #portal .sidebar-foot strong{color:#15304a!important}body:not(.dark) #portal .sidebar-foot small{color:#60778d!important} body:not(.dark) #portal .reference-action{background:#fff!important;border-color:#d3e0e9!important;color:#10263b!important} body:not(.dark) #portal .reference-action.action-students{background:#fff8e8!important;border-color:#efd79c!important}body:not(.dark) #portal .reference-action.action-staff{background:#eaf4ff!important;border-color:#c0d9f5!important}body:not(.dark) #portal .reference-action.action-clean{background:#eaf8f0!important;border-color:#c3e4d0!important}body:not(.dark) #portal .reference-action.action-register{background:#fff0f2!important;border-color:#efc8ce!important}body:not(.dark) #portal .reference-action.action-location{background:#f4efff!important;border-color:#d9cbf1!important} #portal .reference-stat-grid .admin-stat-card>small{white-space:nowrap!important;font-size:10px!important} @media(max-width:1180px){#portal .reference-admin-hero{grid-template-columns:1fr auto}#portal .reference-school-visual{display:none}#portal .reference-stat-grid,#portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:650px){#portal .reference-admin-hero{grid-template-columns:1fr;padding:20px}#portal .reference-admin-hero>.primary-button{width:100%}#portal .reference-stat-grid,#portal .reference-admin-actions{grid-template-columns:1fr!important}} /* CMO login and account identity */ #loginScreen.chooser-mode .login-type-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:1240px!important;gap:18px!important} #loginScreen.chooser-mode .login-type-card{min-height:330px!important;padding:24px 18px 20px!important} #loginScreen.chooser-mode .login-type-card>span{width:102px!important;height:102px!important;flex-basis:102px!important;padding:15px!important} #loginScreen.chooser-mode .cmo-login{border-color:#7c4ad8!important;box-shadow:0 22px 50px rgba(0,0,0,.28),0 0 30px rgba(139,92,246,.10)!important} #loginScreen.chooser-mode .cmo-login>span{border:2px solid #9b71f7!important;box-shadow:0 0 28px rgba(139,92,246,.28)!important} #loginScreen.chooser-mode .cmo-login>b{background:linear-gradient(135deg,#9b71f7,#5b21b6)!important} #loginScreen.chooser-mode .cmo-login strong{color:#cfbaff!important} #loginScreen.login-cmo-form .login-visual{background:radial-gradient(circle at 80% 15%,rgba(139,92,246,.30),transparent 30%),linear-gradient(145deg,#090f1e,#1d1740 62%,#312e81)!important} #loginScreen.login-cmo-form .login-card{border-color:#8b5cf6!important;box-shadow:0 22px 60px rgba(91,33,182,.24)!important} #loginScreen.login-cmo-form .primary-button{background:linear-gradient(135deg,#8b5cf6,#4c1d95)!important} #loginScreen.login-cmo-form .eyebrow,#loginScreen.login-cmo-form .login-back,#loginScreen.login-cmo-form .link-button,#loginScreen.login-cmo-form .password-wrap button{color:#c4b5fd!important} /* CMO portal theme */ body.cmo-mode{--green:#6d28d9;--green-2:#8b5cf6;--green-3:#f0e9ff;--gold:#7c3aed;--gold-soft:#ede9fe} body.cmo-mode:not(.dark) #portal .nav-item.active{background:linear-gradient(90deg,#5b21b6,#8b5cf6)!important} body.cmo-mode:not(.dark) #portal .top-label{color:#6d28d9!important} body.cmo-mode:not(.dark) #portal .reference-admin-hero.cmo-hero{background:linear-gradient(105deg,#faf7ff,#f5f0ff 62%,#eef5ff)!important;border-left:5px solid #7c3aed!important} body.cmo-mode:not(.dark) #portal .cmo-hero h1{color:#5b21b6!important} body.cmo-mode #portal .cmo-hero>.primary-button{background:linear-gradient(135deg,#8b5cf6,#4c1d95)!important} body.dark.cmo-mode #portal .nav-item.active{background:linear-gradient(90deg,#4c1d95,#6d28d9)!important;box-shadow:inset 4px 0 #c4b5fd,0 10px 24px rgba(0,0,0,.18)!important} body.dark.cmo-mode #portal .reference-admin-hero.cmo-hero{background:linear-gradient(105deg,#0b1421,#17122d 62%,#25133e)!important;border-left-color:#9b71f7!important} body.dark.cmo-mode #portal .cmo-hero h1{color:#c4b5fd!important} #portal .cmo-monitor-visual:after{background:linear-gradient(90deg,transparent,#8b5cf6,transparent)!important;box-shadow:0 0 18px rgba(139,92,246,.40)!important} #portal .cmo-monitor-visual img{background:#f3efff!important;filter:drop-shadow(0 12px 14px rgba(109,40,217,.20))!important} #portal .cmo-actions-heading{justify-content:flex-start}#portal .cmo-actions-heading>span{margin:0 0 10px auto;color:#6d28d9;font-size:11px;font-weight:850} /* Admin CMO creation, assignment and accountability */ #portal .cmo-admin-summary{grid-template-columns:repeat(4,minmax(0,1fr))} #portal .cmo-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:18px 0} #portal .cmo-create-panel,#portal .cmo-assignment-panel{display:grid;gap:18px;align-content:start} #portal .cmo-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #portal .cmo-enrollment-row{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center;padding:15px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)} #portal .cmo-enrollment-row .staff-photo-preview{width:112px;height:112px;margin:0} #portal .cmo-enrollment-row p{margin:10px 0 0;font-size:12px;color:var(--muted)} #portal .cmo-account-list{display:grid;gap:16px} #portal .cmo-account-card{border:1px solid var(--border);border-radius:20px;padding:20px;background:var(--surface-2);display:grid;gap:16px} #portal .cmo-account-card>header{display:grid;grid-template-columns:68px minmax(0,1fr) auto;align-items:center;gap:15px} #portal .cmo-account-card>header>img{width:68px;height:68px;border-radius:18px;object-fit:cover;border:3px solid #8b5cf6} #portal .cmo-account-card>header h3,#portal .cmo-account-card>header p{margin:2px 0}#portal .cmo-account-card>header small{color:#6d28d9;font-weight:850} #portal .cmo-account-status{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.cmo-account-status span{padding:7px 10px;border-radius:999px;background:#fff1f2;color:#be123c;font-size:11px;font-weight:850}.cmo-account-status span.ready{background:#e7f8ef;color:#0b7b47}.cmo-account-status span.live{background:#e8f2ff;color:#0968c8} #portal .cmo-account-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.cmo-account-metrics span{padding:12px;border:1px solid var(--border);border-radius:13px;color:var(--muted);font-size:11px;background:var(--surface)}.cmo-account-metrics b{display:block;margin-bottom:5px;color:var(--text);font-size:14px} #portal .cmo-assigned-school-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.cmo-assigned-school-list>span{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;padding:10px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-size:12px;font-weight:750}.cmo-assigned-school-list>span>b{width:28px;height:28px;border-radius:9px;background:#ede9fe;color:#6d28d9;display:grid;place-items:center;grid-row:1/3}.cmo-assigned-school-list>span small{grid-column:2;color:var(--muted)} #portal .cmo-admin-responsibility,#portal .cmo-admin-reply{padding:14px 16px;border-radius:14px;border-left:4px solid #8b5cf6;background:var(--surface)}#portal .cmo-admin-responsibility small,#portal .cmo-admin-reply small{color:#6d28d9;font-weight:900}#portal .cmo-admin-responsibility p,#portal .cmo-admin-reply p{margin:7px 0 0;white-space:pre-wrap}.cmo-admin-reply.pending{border-left-color:#e7a319;background:#fff9e8} #portal .cmo-account-card>footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.cmo-empty-duty{margin:0;color:var(--muted)} /* CMO daily duty, visits, response and tracking */ #portal .cmo-duty-brief{margin-bottom:18px;border-left:5px solid #8b5cf6!important;background:linear-gradient(135deg,#faf7ff,#fff)!important}#portal .cmo-duty-brief p{font-size:16px;line-height:1.65;white-space:pre-wrap} #portal .cmo-visit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0} #portal .cmo-visit-card{display:grid;gap:15px;padding:20px;border:1px solid #d9c9f6;border-radius:19px;background:#fff;box-shadow:0 10px 25px rgba(71,34,122,.06)} #portal .cmo-visit-card>header{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px}.cmo-visit-card>header>span{width:42px;height:42px;border-radius:13px;background:#ede9fe;color:#6d28d9;display:grid;place-items:center;font-weight:900}.cmo-visit-card h2,.cmo-visit-card p{margin:2px 0}.cmo-visit-card header small{color:#6d28d9;font-weight:850}.cmo-visit-card header>b{font-size:11px;color:#b45309}.cmo-visit-card.complete{border-color:#91d9b4;background:#f4fff9}.cmo-visit-card.complete header>b{color:#0b7b47} #portal .cmo-response-panel{display:grid;gap:15px;margin-top:20px}.cmo-response-panel .section-heading>span{color:#6d28d9;font-size:11px;font-weight:850} #portal .cmo-face-layout{align-items:stretch}.cmo-face-layout .camera-panel,.cmo-face-layout .verification-panel{min-height:480px} #portal #cmoAttendanceVideo{width:100%;min-height:340px;max-height:460px;object-fit:cover;border-radius:16px;background:#071522} #portal #cmoLocationBadge.live{background:#e7f8ef;color:#0b7b47}.cmo-mode #portal .live-status-banner.online{border-color:#8b5cf6;background:#f4efff}.cmo-mode #portal .live-status-banner.online>span{background:#8b5cf6;box-shadow:0 0 0 7px rgba(139,92,246,.14)} /* Explicit light-mode contrast fix for every portal page */ body:not(.dark) #portal .view{color:#10263b!important} body:not(.dark) #portal .view :where(h1,h2,h3,h4,label,th,.section-heading strong,.page-heading strong){color:#10263b!important;opacity:1!important} body:not(.dark) #portal .view :where(p,td,small,.cell-subtitle,.detail-list span,.coordinate-grid span){color:#536b82!important;opacity:1!important} body:not(.dark) #portal .view .eyebrow{color:#175f9d!important;opacity:1!important} body:not(.dark) #portal .view input,body:not(.dark) #portal .view select,body:not(.dark) #portal .view textarea{color:#10263b!important;background:#fff!important;border-color:#bfd0de!important} body:not(.dark) #portal .view input::placeholder,body:not(.dark) #portal .view textarea::placeholder{color:#788da0!important;opacity:1!important} body:not(.dark) #portal .view .primary-button,body:not(.dark) #portal .view .primary-button :where(span,strong,small){color:#fff!important} body:not(.dark) #portal .cmo-account-card,body:not(.dark) #portal .cmo-account-card :where(h3,b,strong),body:not(.dark) #portal .cmo-visit-card :where(h2,h3,strong){color:#10263b!important} body:not(.dark) #portal .cmo-admin-reply.pending p{color:#5f4707!important} body.dark #portal .cmo-duty-brief{background:linear-gradient(135deg,#18112c,#0c1926)!important;border-color:#6d3db8!important} body.dark #portal .cmo-visit-card{background:#0c1926;border-color:#503979}body.dark #portal .cmo-visit-card.complete{background:#0e241a;border-color:#2b7752} body.dark #portal .cmo-admin-reply.pending{background:#2a210c;border-left-color:#d99a00}body.dark #portal .cmo-admin-reply.pending p{color:#eadba8!important} body.dark #portal .cmo-account-status span{background:#321a21;color:#ff9cad}body.dark #portal .cmo-account-status span.ready{background:#153426;color:#73d8a1}body.dark #portal .cmo-account-status span.live{background:#122b44;color:#7cbcff} @media(max-width:1280px) and (min-width:901px){#loginScreen.chooser-mode .login-type-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:760px!important}} @media(max-width:1050px){#portal .cmo-admin-grid{grid-template-columns:1fr}#portal .cmo-admin-summary,#portal .cmo-account-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}#portal .cmo-visit-grid{grid-template-columns:1fr}} @media(max-width:900px){#loginScreen.chooser-mode .login-type-list{grid-template-columns:1fr!important}#portal .cmo-assigned-school-list{grid-template-columns:1fr}} @media(max-width:650px){#portal .cmo-form-grid,#portal .cmo-admin-summary,#portal .cmo-account-metrics{grid-template-columns:1fr}#portal .cmo-enrollment-row{grid-template-columns:1fr;text-align:center}#portal .cmo-enrollment-row .staff-photo-preview{margin:auto}#portal .cmo-account-card>header{grid-template-columns:58px 1fr}#portal .cmo-account-card>header>img{width:58px;height:58px}.cmo-account-status{grid-column:1/-1;justify-content:flex-start!important}} /* Bright Innovation Hub official identity */ #loginScreen.chooser-mode:before{background:url("assets/bih-brand-mark-transparent.png") 3% 29%/360px auto no-repeat,url("assets/bih-brand-mark-transparent.png") 98% 72%/340px auto no-repeat!important;opacity:.055!important} #loginScreen.chooser-mode .approved-login-brand .brand-mark{width:168px!important;height:168px!important;border-radius:36px!important;overflow:hidden!important;box-shadow:0 0 0 1px rgba(0,231,239,.35),0 0 38px rgba(0,222,235,.18)!important} #loginScreen.chooser-mode .approved-login-brand .brand-mark img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:34px!important;filter:none!important} #loginScreen.chooser-mode .approved-brand-title{color:#e8fbff!important;text-shadow:0 0 18px rgba(0,224,235,.28)!important} #loginScreen.chooser-mode .approved-brand-title:before,#loginScreen.chooser-mode .approved-brand-title:after{background:linear-gradient(90deg,transparent,#00e5ed)!important} #loginScreen.chooser-mode .approved-brand-title:after{background:linear-gradient(90deg,#b7ff00,transparent)!important} #portal .sidebar .brand-logo-frame{width:74px!important;height:74px!important;flex:0 0 74px!important;border-radius:18px!important;overflow:hidden!important;background:#020b14!important;border:1px solid rgba(0,226,235,.34)!important;box-shadow:0 0 24px rgba(0,210,223,.14)!important} #portal .sidebar .brand-logo-frame img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:17px!important;filter:none!important} /* Full-width premium identity strip */ #portal .bih-signature-bar{min-height:112px;padding:14px 38px;display:grid;grid-template-columns:84px minmax(0,1fr) 220px;align-items:center;gap:20px;position:relative;overflow:hidden;background:radial-gradient(circle at 78% 20%,rgba(183,255,0,.14),transparent 22%),radial-gradient(circle at 20% 120%,rgba(0,229,237,.18),transparent 34%),linear-gradient(112deg,#020b14 0%,#061d2d 48%,#071827 100%);border-bottom:1px solid rgba(0,229,237,.38);box-shadow:0 12px 30px rgba(1,16,29,.22);color:#fff} #portal .bih-signature-bar:before{content:"";position:absolute;left:112px;right:250px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#00e5ed 28%,#b7ff00 70%,transparent);box-shadow:0 0 17px rgba(0,229,237,.58)} #portal .bih-signature-bar:after{content:"";position:absolute;width:280px;height:280px;right:-115px;top:-155px;border:1px solid rgba(0,229,237,.22);border-radius:50%;box-shadow:0 0 0 34px rgba(0,229,237,.025),0 0 0 70px rgba(183,255,0,.018)} #portal .bih-signature-emblem{width:82px;height:82px;border-radius:22px;overflow:hidden;border:1px solid rgba(0,229,237,.6);background:#020b14;box-shadow:0 0 0 5px rgba(0,229,237,.05),0 0 28px rgba(0,229,237,.22)} #portal .bih-signature-emblem img{width:100%;height:100%;object-fit:cover;display:block} #portal .bih-signature-copy{min-width:0;display:grid;gap:3px} #portal .bih-signature-copy span{color:#44edf3;font-size:10px;font-weight:900;letter-spacing:.19em} #portal .bih-signature-copy strong{color:#fff!important;font-family:Georgia,"Times New Roman",serif;font-size:27px;line-height:1.05;letter-spacing:.09em;text-shadow:0 0 19px rgba(0,229,237,.16)} #portal .bih-signature-copy small{color:#b8cbd7;font-size:12px;font-weight:650;letter-spacing:.04em} #portal .bih-signature-status{justify-self:end;min-width:205px;padding:12px 15px;border:1px solid rgba(0,229,237,.26);border-radius:15px;background:rgba(1,12,22,.62);display:grid;grid-template-columns:10px 1fr;gap:3px 9px;align-items:center;position:relative;z-index:1} #portal .bih-signature-status i{width:9px;height:9px;border-radius:50%;background:#b7ff00;box-shadow:0 0 0 5px rgba(183,255,0,.1),0 0 14px rgba(183,255,0,.55);grid-row:1/3} #portal .bih-signature-status span{color:#d8e8ef;font-size:9px;font-weight:800;letter-spacing:.11em} #portal .bih-signature-status b{color:#b7ff00;font-size:12px;letter-spacing:.08em} #portal .topbar{height:88px!important} /* Stronger symbols and slightly deeper light-theme cards */ body:not(.dark) #portal .nav-item span{background:#d9e5ee!important;border-color:#b8c9d7!important;color:#082b48!important} body:not(.dark) #portal .nav-item img[src*="-icon"],body:not(.dark) #portal :where(.metric-icon,.action-icon,.stat-icon-shell,.reference-action>span,.feature-icon) img[src*="-icon"]{filter:saturate(1.55) contrast(1.45) brightness(.67)!important;opacity:1!important} body:not(.dark) #portal .nav-item.active img{filter:brightness(0) invert(1)!important;opacity:1!important} body:not(.dark) #portal .topbar .icon-button{background:#e3ebf1!important;border-color:#b8c8d5!important;color:#082c49!important;font-weight:950!important} body:not(.dark) #portal .topbar .alert-button img{filter:saturate(1.5) contrast(1.5) brightness(.62)!important;opacity:1!important} body:not(.dark) #portal .metric-icon,body:not(.dark) #portal .action-icon,body:not(.dark) #portal .stat-icon-shell,body:not(.dark) #portal .feature-icon{border:1px solid rgba(7,45,75,.18)!important;box-shadow:0 5px 12px rgba(9,45,74,.08)!important} body:not(.dark) #portal .metric-card{border-color:#aebfcc!important;box-shadow:0 11px 24px rgba(13,49,77,.09)!important} body:not(.dark) #portal .metric-card.metric-teal{background:linear-gradient(145deg,#cfe9e3,#e5f2ef)!important} body:not(.dark) #portal .metric-card.metric-amber{background:linear-gradient(145deg,#f2dfaa,#f8edcf)!important} body:not(.dark) #portal .metric-card.metric-violet{background:linear-gradient(145deg,#ded4ef,#ede7f7)!important} body:not(.dark) #portal .metric-card.metric-coral{background:linear-gradient(145deg,#efd0d4,#f7e2e4)!important} body:not(.dark) #portal .action-card,body:not(.dark) #portal .feature-card{border-color:#aebfcd!important;box-shadow:0 11px 24px rgba(13,49,77,.085)!important} body:not(.dark) #portal .action-grid .action-card:nth-child(1){background:#f2dfaa!important}body:not(.dark) #portal .action-grid .action-card:nth-child(2){background:#cfe1f2!important}body:not(.dark) #portal .action-grid .action-card:nth-child(3){background:#cfe9dc!important}body:not(.dark) #portal .action-grid .action-card:nth-child(4){background:#efd1d5!important}body:not(.dark) #portal .action-grid .action-card:nth-child(5){background:#dfd5ef!important} body:not(.dark) #portal .feature-card.cleanliness-feature{background:linear-gradient(135deg,#cce7d8,#e2f1e8)!important}body:not(.dark) #portal .feature-card.gps-feature{background:linear-gradient(135deg,#cbdff0,#e2edf5)!important} body:not(.dark) #portal .stat-schools{background:linear-gradient(145deg,#f1dda3,#f8edcf)!important;border-color:#d5b967!important}body:not(.dark) #portal .stat-pef{background:linear-gradient(145deg,#cbdff2,#e3eef8)!important;border-color:#94bce2!important}body:not(.dark) #portal .stat-peima{background:linear-gradient(145deg,#cce7d8,#e2f1e8)!important;border-color:#98caaa!important}body:not(.dark) #portal .stat-students{background:linear-gradient(145deg,#efd0d4,#f7e2e4)!important;border-color:#d8a3aa!important}body:not(.dark) #portal .stat-teachers{background:linear-gradient(145deg,#ddd2ee,#ede6f7)!important;border-color:#b9a2da!important} body:not(.dark) #portal .reference-action.action-students{background:#f1dda5!important;border-color:#d8bb69!important}body:not(.dark) #portal .reference-action.action-staff{background:#cbdff2!important;border-color:#96bde2!important}body:not(.dark) #portal .reference-action.action-clean{background:#cce8d8!important;border-color:#98caaa!important}body:not(.dark) #portal .reference-action.action-register{background:#efd0d5!important;border-color:#d8a2aa!important}body:not(.dark) #portal .reference-action.action-location{background:#ded3ef!important;border-color:#b9a3da!important} body:not(.dark) #portal :where(.admin-location-summary>article,.admin-location-card,.network-school-card,.cmo-account-card,.cmo-visit-card,.clean-status-card){background:#e6edf2!important;border-color:#adbecb!important;box-shadow:0 9px 20px rgba(12,47,74,.07)!important} body:not(.dark) #portal .cmo-duty-brief{background:linear-gradient(135deg,#e3d9f2,#edf1f6)!important;border-color:#9b79c9!important} body:not(.dark) #portal :where(.metric-card,.action-card,.feature-card,.admin-stat-card,.reference-action,.cmo-account-card,.cmo-visit-card,.admin-location-card,.network-school-card) :where(h2,h3,h4,strong,b){color:#081f33!important;opacity:1!important} body:not(.dark) #portal :where(.metric-card,.action-card,.feature-card,.admin-stat-card,.reference-action,.cmo-account-card,.cmo-visit-card,.admin-location-card,.network-school-card) :where(p,small,span){color:#314d63!important;opacity:1!important} @media(max-width:900px){#portal .bih-signature-bar{grid-template-columns:70px 1fr;padding:12px 20px;min-height:94px}.bih-signature-emblem{width:68px!important;height:68px!important}.bih-signature-status{display:none!important}#portal .bih-signature-copy strong{font-size:21px}#portal .bih-signature-copy small{font-size:10px}} @media(max-width:600px){#loginScreen.chooser-mode .approved-login-brand .brand-mark{width:132px!important;height:132px!important;border-radius:28px!important}#portal .bih-signature-bar{grid-template-columns:56px 1fr;gap:12px;padding:10px 14px;min-height:78px}#portal .bih-signature-emblem{width:54px!important;height:54px!important;border-radius:15px!important}#portal .bih-signature-copy span{font-size:7px;letter-spacing:.11em}#portal .bih-signature-copy strong{font-size:15px;letter-spacing:.055em}#portal .bih-signature-copy small{display:none}#portal .topbar{height:72px!important}#portal .sidebar .brand-logo-frame{width:60px!important;height:60px!important;flex-basis:60px!important}} /* Admin student master: fill the first row cleanly with no empty left column. */ #adminStudents .admin-student-manager{overflow:hidden} #adminStudents .admin-student-manager .record-toolbar{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);gap:18px;align-items:end;justify-content:stretch;margin:0 0 22px;padding:18px 20px;border:1px solid #b8cad6;border-radius:18px;background:linear-gradient(135deg,#d9e5ec 0%,#cbdbe5 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)} #adminStudents .admin-student-manager .record-toolbar label{width:100%;min-width:0;color:#102b3d} #adminStudents .admin-student-manager .record-toolbar input,#adminStudents .admin-student-manager .record-toolbar select{width:100%;min-width:0;background:#f6fafc;border-color:#9eb5c4;color:#102335;box-shadow:0 5px 13px rgba(29,65,88,.08)} body.dark #adminStudents .admin-student-manager .record-toolbar{border-color:#29465c;background:linear-gradient(135deg,#0d2232 0%,#0a1a29 100%);box-shadow:inset 0 1px 0 rgba(124,196,240,.06)} body.dark #adminStudents .admin-student-manager .record-toolbar label{color:#eff8ff} body.dark #adminStudents .admin-student-manager .record-toolbar input,body.dark #adminStudents .admin-student-manager .record-toolbar select{background:#081827;border-color:#33566f;color:#f5fbff;box-shadow:none} @media(max-width:760px){#adminStudents .admin-student-manager .record-toolbar{grid-template-columns:1fr;gap:13px;padding:15px;margin-bottom:18px}} /* Official PEF / PEIMA marks: one consistent frame and optical size everywhere. */ #loginScreen :is(.login-type-card>span,.login-form-logo-frame):has(img[src*="pef-logo.jpg"]), #portal :is(.stat-icon-shell.logo-shell,.network-column-logo,.network-org,.admin-location-org,.profile-chip>span,.profile-avatar):has(img[src*="pef-logo.jpg"]){background:#fff!important;border:2px solid #2c86d5!important;overflow:hidden!important;box-shadow:inset 0 0 0 2px #e7f3ff,0 5px 14px rgba(28,112,185,.14)!important} #loginScreen :is(.login-type-card>span,.login-form-logo-frame):has(img[src*="peima-logo.jpg"]), #portal :is(.stat-icon-shell.logo-shell,.network-column-logo,.network-org,.admin-location-org,.profile-chip>span,.profile-avatar):has(img[src*="peima-logo.jpg"]){background:#fff!important;border:2px solid #31a86c!important;overflow:hidden!important;box-shadow:inset 0 0 0 2px #e6f8ed,0 5px 14px rgba(30,137,81,.14)!important} #loginScreen .login-type-card>span:has(img[src*="-logo.jpg"]){padding:9px!important} #loginScreen .login-form-logo-frame:has(img[src*="-logo.jpg"]){padding:7px!important} #portal :is(.stat-icon-shell.logo-shell,.network-column-logo,.network-org,.admin-location-org):has(img[src*="-logo.jpg"]){padding:5px!important} #portal .profile-chip>span:has(img[src*="-logo.jpg"]){padding:3px!important} #portal .profile-avatar:has(img[src*="-logo.jpg"]){padding:8px!important} img[src*="pef-logo.jpg"]{width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;object-position:center 47%!important;transform:scale(1.34)!important;transform-origin:center!important;padding:0!important;background:#fff!important;border-radius:10px!important;filter:none!important} img[src*="peima-logo.jpg"]{width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;object-position:center!important;transform:scale(.94)!important;transform-origin:center!important;padding:0!important;background:#fff!important;border-radius:50%!important;filter:none!important} /* Final full-width BIH identity: no sidebar brand card and no logo box/background. */ #portal{padding-top:112px!important} #portal>.bih-signature-bar{position:fixed!important;inset:0 0 auto 0!important;z-index:50!important;width:100%!important;height:112px!important;min-height:112px!important;grid-template-columns:104px minmax(0,1fr) 220px!important;padding:10px 42px!important} #portal .bih-signature-emblem{width:94px!important;height:92px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;display:grid!important;place-items:center!important} #portal .bih-signature-emblem img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:transparent!important;border:0!important;border-radius:0!important;filter:drop-shadow(0 0 13px rgba(0,229,237,.32))!important} #portal .sidebar{top:112px!important;bottom:0!important;height:auto!important;padding-top:18px!important;overflow-y:auto!important} #portal .side-nav{padding-top:0!important} #portal .app-shell{grid-column:2!important;min-width:0!important} #loginScreen .brand-mark:has(img[src*="bih-brand-mark-transparent.png"]){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;padding:0!important} #loginScreen .brand-mark img[src*="bih-brand-mark-transparent.png"]{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:transparent!important;border-radius:0!important;filter:drop-shadow(0 0 16px rgba(0,220,235,.25))!important} /* Supplied Admin and CMO logos. */ img[src*="admin-logo.png"],img[src*="cmo-logo.png"]{max-width:100%!important;object-fit:contain!important;object-position:center!important;background:transparent!important;padding:0!important;filter:none!important} #loginScreen :is(.login-type-card>span,.login-form-logo-frame):has(img[src*="admin-logo.png"]),#portal :is(.profile-chip>span,.profile-avatar):has(img[src*="admin-logo.png"]){background:#080b0f!important;border:2px solid #f2b51d!important;box-shadow:0 0 18px rgba(242,181,29,.18)!important;overflow:hidden!important;padding:4px!important} #loginScreen :is(.login-type-card>span,.login-form-logo-frame):has(img[src*="cmo-logo.png"]),#portal :is(.profile-chip>span,.profile-avatar):has(img[src*="cmo-logo.png"]){background:#06172a!important;border:2px solid #16d8f4!important;box-shadow:0 0 18px rgba(22,216,244,.18)!important;overflow:hidden!important;padding:4px!important} #loginScreen :is(.login-type-card>span,.login-form-logo-frame) img[src*="admin-logo.png"],#loginScreen :is(.login-type-card>span,.login-form-logo-frame) img[src*="cmo-logo.png"]{width:100%!important;height:100%!important;transform:scale(1.05)!important} #portal :is(.profile-chip>span,.profile-avatar) img[src*="admin-logo.png"],#portal :is(.profile-chip>span,.profile-avatar) img[src*="cmo-logo.png"]{width:100%!important;height:100%!important;transform:scale(1.08)!important} /* CMO colour system matched to the supplied electric blue/cyan logo with restrained red accents. */ #loginScreen.chooser-mode .cmo-login{border-color:#16bce8!important;box-shadow:0 22px 50px rgba(0,0,0,.28),0 0 30px rgba(14,197,239,.18)!important} #loginScreen.chooser-mode .cmo-login>span{border-color:#16d8f4!important;box-shadow:0 0 28px rgba(22,216,244,.30)!important;background:#06172a!important} #loginScreen.chooser-mode .cmo-login>b{background:linear-gradient(135deg,#10c7ef 0%,#0a65d8 62%,#ef3340 100%)!important} #loginScreen.chooser-mode .cmo-login strong{color:#65e9ff!important} #loginScreen.login-cmo-form .login-visual{background:radial-gradient(circle at 82% 14%,rgba(239,51,64,.22),transparent 27%),radial-gradient(circle at 18% 82%,rgba(14,199,239,.25),transparent 33%),linear-gradient(145deg,#04111f,#071d38 60%,#092b55)!important} #loginScreen.login-cmo-form .login-card{border-color:#19ccef!important;box-shadow:0 22px 60px rgba(0,111,219,.25)!important} #loginScreen.login-cmo-form .primary-button{background:linear-gradient(135deg,#0a70df,#08bde7)!important} #loginScreen.login-cmo-form :is(.eyebrow,.login-back,.link-button,.password-wrap button){color:#52def7!important} body.cmo-mode{--green:#096bd7;--green-2:#08bde7;--green-3:#e5f7ff;--gold:#ef3340;--gold-soft:#ffe7e9} body.cmo-mode:not(.dark) #portal .nav-item.active{background:linear-gradient(90deg,#075fc7,#11bfe8)!important;box-shadow:inset 4px 0 #ef3340,0 10px 22px rgba(7,105,201,.20)!important} body.cmo-mode:not(.dark) #portal .top-label,body.cmo-mode:not(.dark) #portal .cmo-hero h1{color:#075fc7!important} body.cmo-mode:not(.dark) #portal .reference-admin-hero.cmo-hero{background:linear-gradient(105deg,#f5fbff,#eaf8ff 62%,#fff1f2)!important;border-left:5px solid #09bde7!important} body.cmo-mode #portal .cmo-hero>.primary-button{background:linear-gradient(135deg,#075fc7,#10bfe8)!important} body.dark.cmo-mode #portal .nav-item.active{background:linear-gradient(90deg,#063b83,#087fb9)!important;box-shadow:inset 4px 0 #ef3340,0 10px 24px rgba(0,0,0,.18)!important} body.dark.cmo-mode #portal .reference-admin-hero.cmo-hero{background:linear-gradient(105deg,#06111e,#071d35 62%,#281016)!important;border-left-color:#14d5f2!important} body.dark.cmo-mode #portal .cmo-hero h1{color:#56e1f8!important} #portal .cmo-monitor-visual img{background:transparent!important;filter:drop-shadow(0 11px 14px rgba(6,126,209,.30))!important;padding:0!important;transform:scale(1.12)!important} #portal .cmo-account-card>header small,#portal .cmo-actions-heading>span{color:#0878d1!important} body:not(.dark) #portal .cmo-duty-brief{background:linear-gradient(135deg,#d9f2fb,#e8f4fb 72%,#ffe7e9)!important;border-color:#68bfdc!important} /* Light-mode sidebar symbols: larger, darker and clearly separated from the background. */ body:not(.dark) #portal .nav-item{color:#102a40!important;font-weight:800!important} body:not(.dark) #portal .nav-item span{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:11px!important;background:#edf4f8!important;border:1px solid #9fb4c3!important;box-shadow:0 4px 10px rgba(12,55,85,.10)!important} body:not(.dark) #portal .nav-item img[src*="-icon"]{width:25px!important;height:25px!important;filter:saturate(1.45) contrast(1.30) brightness(.78)!important;opacity:1!important} body:not(.dark) #portal .nav-item img[src*="cmo-logo.png"]{width:30px!important;height:30px!important;transform:scale(1.08)!important;opacity:1!important} body:not(.dark) #portal .nav-item.active span{background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.72)!important;box-shadow:none!important} body:not(.dark) #portal .nav-item.active img[src*="-icon"]{filter:brightness(0) invert(1)!important;opacity:1!important} /* Submission timer: explicit high-contrast text in every status and theme. */ #portal .submission-window-banner{isolation:isolate!important} #portal .submission-window-banner>*{position:relative;z-index:1} #portal .submission-window-banner.locked{background:linear-gradient(125deg,#241a0d 0%,#5f3d0c 70%,#7a5819 100%)!important;border-color:#e3b631!important;color:#fff!important} #portal .submission-window-banner.locked :is(h3,p){color:#fff!important;opacity:1!important} #portal .submission-window-banner.locked>div>small{color:#ffd969!important;opacity:1!important} #portal .submission-window-banner.locked p{color:#ffeab2!important} #portal .submission-window-banner.locked .submission-clock{color:#fff!important;border-color:rgba(255,224,134,.55)!important;background:rgba(0,0,0,.22)!important} #portal .submission-window-banner.locked .submission-countdown{background:rgba(15,10,4,.38)!important;border-color:rgba(255,224,134,.50)!important} #portal .submission-window-banner.locked .submission-countdown strong{color:#fff!important;text-shadow:0 0 14px rgba(255,210,74,.20)!important} #portal .submission-window-banner.locked .submission-countdown :is(small,span){color:#ffe7a2!important;opacity:1!important} #portal .submission-window-banner.open :is(h3,p,.submission-countdown strong){color:#fff!important;opacity:1!important} #portal .submission-window-banner.open>div>small,#portal .submission-window-banner.open .submission-countdown :is(small,span){color:#c8ffed!important;opacity:1!important} @media(max-width:900px){#portal{padding-top:94px!important}#portal>.bih-signature-bar{height:94px!important;min-height:94px!important;grid-template-columns:78px 1fr!important;padding:8px 22px!important}#portal .sidebar{top:94px!important}#portal .bih-signature-emblem{width:72px!important;height:72px!important}} @media(max-width:600px){#portal{padding-top:78px!important}#portal>.bih-signature-bar{height:78px!important;min-height:78px!important;grid-template-columns:58px 1fr!important;padding:7px 13px!important}#portal .sidebar{top:78px!important}#portal .bih-signature-emblem{width:55px!important;height:55px!important}#loginScreen.chooser-mode .approved-login-brand .brand-mark{border-radius:0!important}} /* Login feedback must stay readable over the dark sign-in surface. */ #loginScreen:not(.chooser-mode) .login-card #loginError.show{display:block!important;color:#8f1020!important;background:#fff0f2!important;border:1px solid #ff9aa5!important;font-weight:850!important;line-height:1.45!important;opacity:1!important;text-shadow:none!important} #loginScreen:not(.chooser-mode) .login-card #loginHint{color:#edf7ff!important;font-weight:650!important;opacity:1!important} /* ========================================================================== */ /* V13 FINAL — approved desktop/mobile login, contrast, icons and navigation */ /* ========================================================================== */ /* Final chooser background: matte black with blue, bottle-green and gold. */ #loginScreen.chooser-mode{ min-height:100svh!important; background: radial-gradient(ellipse at -8% 43%,rgba(0,91,211,.46) 0,rgba(0,52,126,.18) 27%,transparent 49%), radial-gradient(ellipse at 106% 42%,rgba(0,108,48,.46) 0,rgba(0,61,32,.2) 28%,transparent 51%), radial-gradient(circle at 50% -18%,rgba(218,165,32,.12),transparent 34%), linear-gradient(135deg,#020509 0%,#060a0c 48%,#020805 100%)!important; color:#fff!important; overflow-x:hidden!important } #loginScreen.chooser-mode:before{ display:block!important;content:""!important;position:fixed!important;inset:0!important;pointer-events:none!important;opacity:.68!important; background: linear-gradient(90deg,transparent 0 8%,rgba(22,132,255,.18) 8.1% 8.2%,transparent 8.3% 91%,rgba(22,154,78,.18) 91.1% 91.2%,transparent 91.3%), linear-gradient(115deg,transparent 0 18%,rgba(17,111,225,.14) 18.1% 18.2%,transparent 18.3% 80%,rgba(199,148,32,.13) 80.1% 80.2%,transparent 80.3%)!important } #loginScreen.chooser-mode:after{border-color:rgba(224,173,50,.38)!important;box-shadow:inset 0 0 46px rgba(218,165,32,.035)!important} #loginScreen.chooser-mode .login-panel{padding:30px 28px 24px!important} #loginScreen.chooser-mode .login-choice-card{width:min(1420px,97vw)!important} #loginScreen.chooser-mode .approved-login-brand{gap:4px!important;margin:0 auto 8px!important} #loginScreen.chooser-mode .approved-login-brand .brand-mark{ width:194px!important;height:150px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;padding:0!important } #loginScreen.chooser-mode .approved-login-brand .brand-mark img{ object-fit:contain!important;transform:none!important;background:transparent!important;border-radius:0!important; filter:drop-shadow(0 0 18px rgba(0,220,242,.38)) drop-shadow(0 9px 22px rgba(0,0,0,.6))!important } #loginScreen.chooser-mode .approved-brand-title{ margin:-2px 0 8px!important;font-family:Arial,Helvetica,sans-serif!important;font-size:25px!important;font-weight:950!important;letter-spacing:.16em!important; color:#f0bd43!important;background:linear-gradient(180deg,#fff0a6 0%,#efb72f 47%,#a96d06 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 5px rgba(0,0,0,.72)) } #loginScreen.chooser-mode .approved-brand-title:before,#loginScreen.chooser-mode .approved-brand-title:after{width:110px!important;background:linear-gradient(90deg,transparent,#e4b441)!important} #loginScreen.chooser-mode .approved-brand-title:after{background:linear-gradient(90deg,#e4b441,transparent)!important} #loginScreen.chooser-mode .approved-login-intro p{margin:0 0 24px!important;color:#dfe6eb!important;font-size:17px!important;letter-spacing:.04em!important} /* Four approved role cards. */ #loginScreen.chooser-mode .login-type-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;max-width:1320px!important} #loginScreen.chooser-mode .login-type-card{ position:relative!important;min-height:344px!important;padding:25px 20px 21px!important;border-radius:23px!important; background: linear-gradient(145deg,rgba(255,255,255,.035),transparent 36%), repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,255,255,.018) 43px), linear-gradient(160deg,#111619 0%,#050708 75%)!important; border:1px solid var(--role-line,#64727b)!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.06),0 21px 48px rgba(0,0,0,.46),0 0 25px var(--role-glow,rgba(255,255,255,.04))!important; overflow:hidden!important } #loginScreen.chooser-mode .login-type-card:before{content:"";position:absolute;inset:auto 7% 0;height:2px;background:linear-gradient(90deg,transparent,var(--role-accent),transparent);box-shadow:0 0 15px var(--role-accent)} #loginScreen.chooser-mode .login-type-card:hover{transform:translateY(-5px)!important;background:linear-gradient(150deg,#171d20,#070a0c)!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 26px 56px rgba(0,0,0,.52),0 0 34px var(--role-glow)!important} #loginScreen.chooser-mode .login-type-card>span{ width:116px!important;height:116px!important;flex:0 0 116px!important;margin:0 0 18px!important;padding:7px!important;border-radius:50%!important; background:#070a0c!important;border:2px solid var(--role-accent)!important;box-shadow:0 0 0 7px rgba(255,255,255,.025),0 0 30px var(--role-glow)!important } #loginScreen.chooser-mode .login-type-card>span img{object-fit:contain!important;object-position:center!important;transform:none!important;filter:none!important;opacity:1!important} #loginScreen.chooser-mode .login-type-card div{min-height:92px!important;gap:8px!important} #loginScreen.chooser-mode .login-type-card strong{font-family:Arial,Helvetica,sans-serif!important;font-size:27px!important;font-weight:950!important;letter-spacing:.075em!important;color:var(--role-text,#fff)!important;text-shadow:0 0 16px var(--role-glow)!important} #loginScreen.chooser-mode .login-type-card small{font-size:13px!important;line-height:1.48!important;color:#d1d8dd!important;opacity:1!important} #loginScreen.chooser-mode .login-type-card>b{min-height:52px!important;border:1px solid color-mix(in srgb,var(--role-accent) 72%,#fff 8%)!important;background:linear-gradient(135deg,var(--role-button-1),var(--role-button-2))!important;box-shadow:0 8px 22px var(--role-glow)!important} #loginScreen.chooser-mode .admin-login{--role-line:#8b6819;--role-accent:#efbd42;--role-glow:rgba(235,180,42,.22);--role-text:#f2c451;--role-button-1:#ebb729;--role-button-2:#8d5b00} #loginScreen.chooser-mode .cmo-login{--role-line:#1687a9;--role-accent:#1cdcf5;--role-glow:rgba(19,205,239,.22);--role-text:#52e6f8;--role-button-1:#10c8ec;--role-button-2:#074fba} #loginScreen.chooser-mode .pef-login{--role-line:#1464b8;--role-accent:#168cff;--role-glow:rgba(13,126,255,.23);--role-text:#56a5ff;--role-button-1:#168cff;--role-button-2:#053d93} #loginScreen.chooser-mode .peima-login{--role-line:#197140;--role-accent:#35bd68;--role-glow:rgba(42,180,95,.21);--role-text:#5bd980;--role-button-1:#2eb95f;--role-button-2:#0a5c2c} #loginScreen.chooser-mode .admin-login>span{background:#080a0b!important} #loginScreen.chooser-mode .cmo-login>span{background:#04111e!important} #loginScreen.chooser-mode .pef-login>span,#loginScreen.chooser-mode .peima-login>span{background:#fff!important} #loginScreen.chooser-mode .login-feature-strip{margin:21px auto 0!important;padding:11px 10px!important;background:rgba(2,6,8,.56)!important;border-color:rgba(226,177,56,.28)!important} #loginScreen.chooser-mode .login-copyright{margin-top:10px!important;color:#8fa0aa!important} /* Role-specific login forms: full-page, detailed and readable. */ #loginScreen:not(.chooser-mode){display:grid!important;grid-template-columns:1fr!important;min-height:100svh!important;position:relative!important;overflow:auto!important} #loginScreen:not(.chooser-mode) .login-visual{display:none!important} #loginScreen:not(.chooser-mode) .login-panel{min-height:100svh!important;width:100%!important;padding:34px 18px!important;background:transparent!important} #loginScreen:not(.chooser-mode) #loginForm{ position:relative!important;width:min(620px,100%)!important;max-width:none!important;gap:19px!important;padding:38px 42px 34px!important;border-radius:28px!important; background: linear-gradient(145deg,rgba(255,255,255,.035),transparent 34%), repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.015) 55px), linear-gradient(155deg,#101519,#050708)!important; box-shadow:0 28px 80px rgba(0,0,0,.54),inset 0 1px rgba(255,255,255,.07)!important;overflow:hidden!important } #loginScreen:not(.chooser-mode) #loginForm:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 12%,var(--form-accent) 12.1% 12.25%,transparent 12.35% 86%,var(--form-accent) 86.1% 86.25%,transparent 86.35%);opacity:.23} #loginScreen:not(.chooser-mode) #loginForm>*{position:relative;z-index:1} #loginScreen:not(.chooser-mode) .login-form-heading{align-items:center!important;padding:5px 0 4px!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:92px!important;height:92px!important;flex:0 0 92px!important;border-radius:50%!important;background:#070a0c!important;border:2px solid var(--form-accent)!important;box-shadow:0 0 29px var(--form-glow)!important;padding:7px!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame img{object-fit:contain!important;transform:none!important;background:transparent!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{font-size:31px!important;line-height:1.12!important;color:#fff!important} #loginScreen:not(.chooser-mode) #loginTypeText{color:#cbd6de!important;font-size:14px!important} #loginScreen:not(.chooser-mode) :is(input,select,textarea){background:#f3f6fa!important;color:#08121c!important;border:1px solid #aebdca!important;min-height:52px!important;font-weight:650!important} #loginScreen:not(.chooser-mode) input::placeholder{color:#627180!important;opacity:1!important} #loginScreen:not(.chooser-mode) .primary-button{min-height:54px!important;background:linear-gradient(135deg,var(--form-button-1),var(--form-button-2))!important;color:#fff!important;border:1px solid var(--form-accent)!important;box-shadow:0 10px 28px var(--form-glow)!important} #loginScreen.login-admin-form{--form-accent:#eebc3f;--form-glow:rgba(232,177,41,.25);--form-button-1:#e7b52f;--form-button-2:#825300;background:radial-gradient(circle at 18% 18%,rgba(206,151,20,.23),transparent 32%),radial-gradient(circle at 88% 83%,rgba(5,70,131,.2),transparent 30%),linear-gradient(135deg,#020304,#0b0d0e)!important} #loginScreen.login-cmo-form{--form-accent:#19d8f0;--form-glow:rgba(13,201,235,.24);--form-button-1:#12c8ea;--form-button-2:#0646ac;background:radial-gradient(circle at 15% 78%,rgba(0,133,230,.28),transparent 35%),radial-gradient(circle at 88% 20%,rgba(229,36,52,.18),transparent 28%),linear-gradient(135deg,#02070c,#041528)!important} #loginScreen.login-pef-form{--form-accent:#198cff;--form-glow:rgba(17,120,245,.25);--form-button-1:#188cff;--form-button-2:#053b90;background:radial-gradient(circle at 13% 22%,rgba(0,106,226,.30),transparent 36%),radial-gradient(circle at 89% 78%,rgba(220,168,37,.14),transparent 30%),linear-gradient(135deg,#02070d,#031526)!important} #loginScreen.login-peima-form{--form-accent:#38bd69;--form-glow:rgba(35,176,87,.23);--form-button-1:#32b962;--form-button-2:#075329;background:radial-gradient(circle at 85% 22%,rgba(0,121,54,.33),transparent 37%),radial-gradient(circle at 13% 82%,rgba(216,166,43,.13),transparent 30%),linear-gradient(135deg,#020604,#06150d)!important} #loginScreen:not(.chooser-mode) :is(.eyebrow,.login-back,.link-button,.password-wrap button){color:var(--form-accent)!important} #loginScreen.login-admin-form #loginTypeTitle{color:#f0c95f!important} #loginScreen.login-cmo-form #loginTypeTitle{color:#5be9fa!important} #loginScreen.login-pef-form #loginTypeTitle{color:#5cafff!important} #loginScreen.login-peima-form #loginTypeTitle{color:#68d58c!important} /* Identity status remains readable over the dark signature strip. */ #portal .bih-signature-status{background:rgba(1,10,17,.78)!important;border-color:rgba(29,206,224,.5)!important;box-shadow:inset 0 1px rgba(255,255,255,.05)!important} #portal .bih-signature-status i{background:#b8ff00!important;box-shadow:0 0 0 7px rgba(184,255,0,.12),0 0 16px #b8ff00!important} #portal .bih-signature-status span{color:#ffffff!important;opacity:1!important;text-shadow:0 1px 6px #000!important} #portal .bih-signature-status b{color:#9fe9ff!important;opacity:1!important;text-shadow:0 1px 6px #000!important} /* Sidebar symbols retain their supplied colours in light, dark and selected states. */ #portal .nav-item span,#portal .nav-item.active span,body.dark #portal .nav-item span,body.dark #portal .nav-item.active span{ width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:11px!important;background:#eef5f9!important;border:1px solid #a8bcc9!important;box-shadow:0 5px 12px rgba(1,20,34,.16)!important } #portal .nav-item img[src*="-icon"],#portal .nav-item.active img[src*="-icon"],body.dark #portal .nav-item img[src*="-icon"],body.dark #portal .nav-item.active img[src*="-icon"]{ width:25px!important;height:25px!important;filter:saturate(1.35) contrast(1.22) brightness(.9)!important;opacity:1!important } #portal .nav-item img[src*="cmo-logo.png"],#portal .nav-item.active img[src*="cmo-logo.png"]{width:31px!important;height:31px!important;filter:none!important;opacity:1!important;transform:none!important} body.dark #portal .nav-item{color:#d8e3ec!important} body.dark #portal .nav-item.active{color:#fff!important} /* Download cards keep white text over blue/green surfaces in light mode. */ body:not(.dark) #portal .admin-download-row .export-button, body:not(.dark) #portal .admin-download-row .export-button :where(span,strong,small){color:#fff!important;opacity:1!important;text-shadow:0 1px 2px rgba(0,0,0,.24)!important} body:not(.dark) #portal .org-download-title :where(h2,p,.eyebrow){opacity:1!important} body:not(.dark) #portal .pef-download-panel .org-download-title :where(h2,.eyebrow){color:#0b4f88!important} body:not(.dark) #portal .peima-download-panel .org-download-title :where(h2,.eyebrow){color:#096741!important} body:not(.dark) #portal .org-download-title p{color:#425a6d!important} /* Mobile chooser: all four accounts fit in one viewport as horizontal rows. */ @media(max-width:720px){ #loginScreen.chooser-mode{height:100svh!important;min-height:100svh!important;overflow:hidden!important} #loginScreen.chooser-mode:after{inset:5px!important;border-radius:18px!important} #loginScreen.chooser-mode .login-panel{height:100svh!important;min-height:100svh!important;padding:8px 10px 7px!important;display:block!important;overflow:hidden!important} #loginScreen.chooser-mode .login-choice-card{height:100%!important;width:100%!important;display:flex!important;flex-direction:column!important;gap:0!important} #loginScreen.chooser-mode .approved-login-brand{flex:0 0 auto!important;margin:0 auto 2px!important;gap:0!important} #loginScreen.chooser-mode .approved-login-brand .brand-mark{width:96px!important;height:86px!important} #loginScreen.chooser-mode .approved-brand-title{font-size:17px!important;letter-spacing:.09em!important;margin:-4px 0 3px!important;white-space:nowrap!important} #loginScreen.chooser-mode .approved-brand-title:before,#loginScreen.chooser-mode .approved-brand-title:after{width:24px!important} #loginScreen.chooser-mode .approved-login-intro p{font-size:13px!important;margin:1px 0 7px!important;color:#e4eaef!important} #loginScreen.chooser-mode .login-type-list{ flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;gap:7px!important; width:min(100%,460px)!important;max-width:460px!important;margin:0 auto!important;padding:9px!important;border:1px solid rgba(225,176,54,.55)!important;border-radius:20px!important; background:linear-gradient(150deg,rgba(16,19,20,.94),rgba(3,7,8,.94))!important;box-shadow:0 14px 34px rgba(0,0,0,.43)!important } #loginScreen.chooser-mode .login-type-card{ min-height:0!important;height:auto!important;width:100%!important;padding:6px 11px!important;border-radius:14px!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) 29px!important;align-items:center!important;gap:10px!important;text-align:left!important; background:linear-gradient(135deg,#111719,#06090a)!important;box-shadow:inset 0 1px rgba(255,255,255,.045),0 5px 13px rgba(0,0,0,.28)!important } #loginScreen.chooser-mode .login-type-card:hover{transform:none!important} #loginScreen.chooser-mode .login-type-card>span{width:44px!important;height:44px!important;flex-basis:44px!important;margin:0!important;padding:3px!important;border-width:1px!important;box-shadow:0 0 14px var(--role-glow)!important} #loginScreen.chooser-mode .login-type-card div{display:block!important;min-height:0!important;text-align:left!important} #loginScreen.chooser-mode .login-type-card strong{display:block!important;font-size:18px!important;line-height:1!important;letter-spacing:.06em!important} #loginScreen.chooser-mode .login-type-card small{display:none!important} #loginScreen.chooser-mode .login-type-card>b{width:27px!important;height:27px!important;min-height:27px!important;margin:0!important;border-radius:50%!important;padding:0!important;background:rgba(255,255,255,.035)!important;box-shadow:0 0 12px var(--role-glow)!important;font-size:0!important} #loginScreen.chooser-mode .login-type-card>b:before{content:""!important;font-size:0!important} #loginScreen.chooser-mode .login-type-card>b:after{content:"›"!important;margin:0!important;font-size:27px!important;line-height:.8!important;color:var(--role-accent)!important} #loginScreen.chooser-mode .login-feature-strip{flex:0 0 auto!important;margin:7px auto 0!important;padding:5px 8px!important;gap:16px!important;flex-wrap:nowrap!important;width:min(100%,430px)!important;font-size:10px!important;line-height:1!important} #loginScreen.chooser-mode .login-copyright{display:none!important} #loginScreen:not(.chooser-mode) .login-panel{padding:14px 10px!important;align-items:flex-start!important} #loginScreen:not(.chooser-mode) #loginForm{padding:25px 19px 23px!important;border-radius:22px!important;gap:15px!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:70px!important;height:70px!important;flex-basis:70px!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{font-size:23px!important} #loginScreen:not(.chooser-mode) .form-line{gap:12px!important;flex-wrap:wrap!important} } @media(max-width:720px) and (max-height:610px){ #loginScreen.chooser-mode .approved-login-brand .brand-mark{width:76px!important;height:66px!important} #loginScreen.chooser-mode .approved-brand-title{font-size:14px!important} #loginScreen.chooser-mode .approved-login-intro p{font-size:11px!important;margin-bottom:5px!important} #loginScreen.chooser-mode .login-type-list{gap:5px!important;padding:7px!important} #loginScreen.chooser-mode .login-feature-strip{margin-top:4px!important;padding:4px!important} } @media(min-width:1100px){#loginScreen.chooser-mode .login-type-list{grid-template-columns:repeat(4,minmax(0,1fr))!important}} @media(min-width:721px) and (max-width:1099px){#loginScreen.chooser-mode .login-type-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:760px!important}} /* ===== V14 AUTHENTICATION STATE + APPROVED ROLE LOGIN SCREENS ===== */ [hidden],#loginScreen.is-hidden,#portal.is-hidden{display:none!important} body:has(#loginScreen:not(.is-hidden)){overflow:hidden!important;background:#020609!important} #loginScreen:not(.chooser-mode){ --form-accent:#178cff;--form-accent-2:#e1ad35;--form-glow:rgba(23,140,255,.25);--form-panel:#060b11; display:grid!important;place-items:center!important;min-height:100svh!important;padding:28px!important;overflow:auto!important; background: linear-gradient(90deg,rgba(20,122,232,.12) 1px,transparent 1px) 0 0/92px 92px, radial-gradient(circle at 12% 18%,rgba(9,105,225,.28),transparent 35%), radial-gradient(circle at 88% 82%,rgba(15,126,75,.18),transparent 34%), linear-gradient(135deg,#010407,#03111d 58%,#030a0f)!important } #loginScreen.login-admin-form{--form-accent:#efbd42;--form-accent-2:#9a6600;--form-glow:rgba(239,189,66,.30);--form-panel:#0a0a09;background:radial-gradient(circle at 16% 14%,rgba(196,139,17,.20),transparent 34%),radial-gradient(circle at 86% 84%,rgba(3,72,130,.16),transparent 32%),linear-gradient(135deg,#010202,#0a0b0c)!important} #loginScreen.login-cmo-form{--form-accent:#18d8f1;--form-accent-2:#ff3044;--form-glow:rgba(24,216,241,.27);--form-panel:#040b14;background:radial-gradient(circle at 13% 82%,rgba(0,132,235,.27),transparent 36%),radial-gradient(circle at 88% 19%,rgba(235,39,58,.18),transparent 30%),linear-gradient(135deg,#010307,#03111f)!important} #loginScreen.login-pef-form{--form-accent:#168cff;--form-accent-2:#e1ad35;--form-glow:rgba(22,140,255,.28);--form-panel:#030910;background:radial-gradient(circle at 12% 20%,rgba(0,103,226,.30),transparent 37%),radial-gradient(circle at 90% 80%,rgba(222,171,45,.12),transparent 29%),linear-gradient(135deg,#010306,#02101f)!important} #loginScreen.login-peima-form{--form-accent:#39bd69;--form-accent-2:#ddb148;--form-glow:rgba(57,189,105,.26);--form-panel:#030b07;background:radial-gradient(circle at 87% 18%,rgba(0,125,55,.31),transparent 38%),radial-gradient(circle at 13% 83%,rgba(218,169,48,.12),transparent 29%),linear-gradient(135deg,#010403,#04110a)!important} #loginScreen:not(.chooser-mode) .login-panel{width:100%!important;min-height:calc(100svh - 56px)!important;padding:0!important;display:grid!important;place-items:center!important;background:transparent!important} #loginScreen:not(.chooser-mode) #loginForm{ position:relative!important;width:min(920px,calc(100vw - 56px))!important;max-width:none!important;margin:auto!important;padding:42px 54px 44px!important;gap:22px!important;overflow:hidden!important; color:#f8f6ef!important;background: linear-gradient(120deg,transparent 0 12%,color-mix(in srgb,var(--form-accent) 22%,transparent) 12.05% 12.18%,transparent 12.25% 87%,color-mix(in srgb,var(--form-accent) 20%,transparent) 87.05% 87.18%,transparent 87.25%), radial-gradient(circle at 80% 12%,color-mix(in srgb,var(--form-accent) 11%,transparent),transparent 30%), linear-gradient(155deg,color-mix(in srgb,var(--form-panel) 90%,#151515),var(--form-panel))!important; border:2px solid var(--form-accent)!important;border-radius:34px!important; box-shadow:0 0 0 8px rgba(255,255,255,.025),0 0 0 10px color-mix(in srgb,var(--form-accent) 38%,transparent),0 32px 76px rgba(0,0,0,.56),0 0 48px var(--form-glow)!important } #loginScreen:not(.chooser-mode) #loginForm:after{content:"";position:absolute;inset:17px;border:1px solid color-mix(in srgb,var(--form-accent) 46%,transparent);border-radius:24px;pointer-events:none;clip-path:polygon(0 0,34% 0,34% 1px,66% 1px,66% 0,100% 0,100% 100%,67% 100%,67% calc(100% - 1px),33% calc(100% - 1px),33% 100%,0 100%)} #loginScreen:not(.chooser-mode) #loginForm>*{position:relative!important;z-index:2!important} #loginScreen:not(.chooser-mode) .login-back{justify-self:start!important;margin:0 0 4px!important;padding:0!important;color:var(--form-accent)!important;font-size:18px!important;font-weight:800!important} #loginScreen:not(.chooser-mode) .login-form-heading{display:grid!important;grid-template-columns:190px minmax(0,1fr)!important;align-items:center!important;gap:28px!important;padding:0 0 22px!important;border-bottom:1px solid color-mix(in srgb,var(--form-accent) 38%,transparent)!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:180px!important;height:180px!important;flex:0 0 180px!important;border-radius:50%!important;padding:8px!important;background:transparent!important;border:0!important;box-shadow:0 0 36px var(--form-glow)!important;overflow:visible!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame img{width:100%!important;height:100%!important;object-fit:contain!important;background:transparent!important;border-radius:20px!important;filter:drop-shadow(0 12px 22px rgba(0,0,0,.38))!important} #loginScreen:not(.chooser-mode) #loginTypeEyebrow{display:block!important;margin:0 0 9px!important;color:var(--form-accent)!important;font-family:Arial,Helvetica,sans-serif!important;font-size:17px!important;font-weight:900!important;letter-spacing:.14em!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{margin:0!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:44px!important;font-weight:900!important;line-height:1.05!important;letter-spacing:-.02em!important} #loginScreen:not(.chooser-mode) #loginTypeText{margin:10px 0 0!important;color:#c8d2da!important;font-size:16px!important} #loginScreen:not(.chooser-mode) label{display:grid!important;gap:10px!important;color:#fff!important;font-size:18px!important;font-weight:800!important} #loginScreen:not(.chooser-mode) label>input,#loginScreen:not(.chooser-mode) .password-wrap{min-height:70px!important;border:1px solid color-mix(in srgb,var(--form-accent) 75%,#5e6e79)!important;border-radius:15px!important;background:rgba(2,11,18,.82)!important;box-shadow:inset 0 1px rgba(255,255,255,.03)!important} #loginScreen:not(.chooser-mode) label>input{padding:0 22px!important;color:#fff!important;font-size:19px!important} #loginScreen:not(.chooser-mode) .password-wrap{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;padding-right:8px!important;overflow:hidden!important} #loginScreen:not(.chooser-mode) .password-wrap input{height:68px!important;padding:0 22px!important;background:transparent!important;border:0!important;color:#fff!important;font-size:19px!important;outline:0!important} #loginScreen:not(.chooser-mode) input::placeholder{color:#99a6b1!important;opacity:1!important} #loginScreen:not(.chooser-mode) .password-wrap button{height:50px!important;padding:0 17px!important;color:var(--form-accent)!important;font-size:16px!important;font-weight:900!important;background:transparent!important;border:0!important} #loginScreen:not(.chooser-mode) .form-line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important} #loginScreen:not(.chooser-mode) .form-line .check{display:flex!important;align-items:center!important;gap:11px!important;font-size:16px!important;font-weight:650!important} #loginScreen:not(.chooser-mode) .form-line .check input{width:20px!important;height:20px!important;min-height:20px!important;accent-color:var(--form-accent)!important} #loginScreen:not(.chooser-mode) .link-button{display:none!important} #loginScreen:not(.chooser-mode) .primary-button{min-height:68px!important;border-radius:15px!important;border:1px solid var(--form-accent)!important;background:linear-gradient(135deg,var(--form-accent),var(--form-accent-2))!important;color:#fff!important;font-size:20px!important;font-weight:900!important;box-shadow:0 12px 32px var(--form-glow)!important} #loginScreen.login-admin-form .primary-button{color:#090704!important} #loginScreen:not(.chooser-mode) #loginHint{margin:4px 0 0!important;padding-top:18px!important;border-top:1px solid color-mix(in srgb,var(--form-accent) 38%,transparent)!important;color:#d5d5cf!important;font-size:14px!important;text-align:center!important;opacity:1!important} #loginScreen:not(.chooser-mode) #loginError.show{display:block!important;margin:0!important;padding:13px 16px!important;border:1px solid #ff8290!important;border-radius:12px!important;background:#fff0f2!important;color:#8a1020!important;font-size:14px!important;font-weight:850!important;text-align:center!important} @media(max-width:760px){ body:has(#loginScreen:not(.is-hidden)){overflow:auto!important} #loginScreen:not(.chooser-mode){padding:10px!important;overflow:auto!important} #loginScreen:not(.chooser-mode) .login-panel{min-height:calc(100svh - 20px)!important;align-items:start!important} #loginScreen:not(.chooser-mode) #loginForm{width:100%!important;padding:22px 18px 24px!important;gap:15px!important;border-radius:24px!important;box-shadow:0 0 0 4px rgba(255,255,255,.02),0 0 0 5px color-mix(in srgb,var(--form-accent) 34%,transparent),0 18px 48px rgba(0,0,0,.52)!important} #loginScreen:not(.chooser-mode) #loginForm:after{inset:9px;border-radius:17px} #loginScreen:not(.chooser-mode) .login-back{font-size:15px!important} #loginScreen:not(.chooser-mode) .login-form-heading{grid-template-columns:96px minmax(0,1fr)!important;gap:15px!important;padding-bottom:14px!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:92px!important;height:92px!important;flex-basis:92px!important;padding:3px!important} #loginScreen:not(.chooser-mode) #loginTypeEyebrow{font-size:10px!important;letter-spacing:.12em!important;margin-bottom:5px!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{font-size:25px!important} #loginScreen:not(.chooser-mode) #loginTypeText{font-size:12px!important;margin-top:6px!important} #loginScreen:not(.chooser-mode) label{gap:6px!important;font-size:14px!important} #loginScreen:not(.chooser-mode) label>input,#loginScreen:not(.chooser-mode) .password-wrap{min-height:54px!important;border-radius:12px!important} #loginScreen:not(.chooser-mode) label>input{padding:0 15px!important;font-size:15px!important} #loginScreen:not(.chooser-mode) .password-wrap input{height:52px!important;padding:0 15px!important;font-size:15px!important} #loginScreen:not(.chooser-mode) .password-wrap button{height:42px!important;padding:0 12px!important;font-size:13px!important} #loginScreen:not(.chooser-mode) .form-line .check{font-size:13px!important} #loginScreen:not(.chooser-mode) .primary-button{min-height:55px!important;font-size:16px!important} #loginScreen:not(.chooser-mode) #loginHint{padding-top:12px!important;font-size:11px!important} } /* Keep authentication surfaces mutually exclusive even against earlier legacy !important rules. */ html body #loginScreen.is-hidden,html body #portal.is-hidden,html body #loginScreen[hidden],html body #portal[hidden]{display:none!important} /* ========================================================================== */ /* V15 AUDITED FINAL — sharp BIH identity, stable auth and icon contrast */ /* ========================================================================== */ /* The supplied BIH artwork is already transparent. Never blur it with CSS. */ #loginScreen img[src*="bih-brand-mark-transparent.png"], #portal img[src*="bih-brand-mark-transparent.png"]{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; object-fit:contain!important; object-position:center!important; padding:0!important; margin:0!important; opacity:1!important; filter:none!important; transform:none!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; image-rendering:auto!important } html body #loginScreen.chooser-mode .login-panel .approved-login-brand .brand-mark img[src*="bih-brand-mark-transparent.png"], html body #loginScreen:not(.chooser-mode) .brand-mark img[src*="bih-brand-mark-transparent.png"], html body #portal>.bih-signature-bar .bih-signature-emblem img[src*="bih-brand-mark-transparent.png"]{ opacity:1!important; filter:none!important; transform:none!important; image-rendering:auto!important } #loginScreen.chooser-mode .approved-login-brand .brand-mark{ width:214px!important; height:176px!important; aspect-ratio:131/120!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:visible!important } #portal .bih-signature-emblem{ background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important } /* Preserve the supplied multi-colour navigation artwork in every state. */ html body:not(.dark) #portal .nav-item img[src*="-icon"], html body:not(.dark) #portal .nav-item.active img[src*="-icon"]{ filter:saturate(1.35) contrast(1.2) brightness(.88)!important; opacity:1!important } html body.dark #portal .nav-item img[src*="-icon"], html body.dark #portal .nav-item.active img[src*="-icon"]{ filter:saturate(1.45) contrast(1.15) brightness(1.08)!important; opacity:1!important } html body #portal .nav-item img[src*="cmo-logo.png"], html body #portal .nav-item.active img[src*="cmo-logo.png"]{ filter:none!important; opacity:1!important } html body #portal .nav-item span, html body #portal .nav-item.active span{ background:#eef5f9!important; border-color:#a8bcc9!important } /* Explicit contrast for the light cards and dark theme surfaces. */ html body:not(.dark) #portal :is(.panel,.action-card,.feature-card,.admin-stat-card,.profile-panel,.table-card) :is(p,small,td){ color:#435a70; opacity:1!important } html body:not(.dark) #portal :is(.panel,.action-card,.feature-card,.admin-stat-card,.profile-panel,.table-card) :is(h1,h2,h3,h4,strong,b,label,th){ color:#10263b; opacity:1!important } html body.dark #portal :is(.panel,.action-card,.feature-card,.admin-stat-card,.profile-panel,.table-card) :is(p,small,td){ color:#c2cfdb; opacity:1!important } html body.dark #portal :is(.panel,.action-card,.feature-card,.admin-stat-card,.profile-panel,.table-card) :is(h1,h2,h3,h4,strong,b,label,th){ color:#f7fafc; opacity:1!important } html body:not(.dark) #portal .admin-download-row .export-button, html body:not(.dark) #portal .admin-download-row .export-button :is(span,strong,small){ color:#fff!important } @media(max-width:720px){ #loginScreen.chooser-mode .approved-login-brand .brand-mark{ width:108px!important; height:96px!important } } @media(max-width:720px) and (max-height:610px){ #loginScreen.chooser-mode .approved-login-brand .brand-mark{ width:82px!important; height:72px!important } } /* Keep authentication surfaces mutually exclusive after every legacy rule. */ html body #loginScreen.is-hidden, html body #portal.is-hidden, html body #loginScreen[hidden], html body #portal[hidden]{display:none!important} /* ========================================================================== */ /* V16 — Microsoft Excel compatibility + compact responsive card experience */ /* ========================================================================== */ /* The four account choices stay prominent without pushing below the viewport. */ @media(min-width:1100px){ #loginScreen.chooser-mode .login-type-card{min-height:300px!important;padding:20px 18px 18px!important} #loginScreen.chooser-mode .login-type-card>span{width:94px!important;height:94px!important;flex-basis:94px!important;margin-bottom:12px!important} #loginScreen.chooser-mode .login-type-card div{min-height:76px!important} #loginScreen.chooser-mode .login-type-card strong{font-size:25px!important} #loginScreen.chooser-mode .login-type-card>b{min-height:46px!important} } /* All Admin, CMO, PEF and PEIMA forms use the same screen-fit geometry. */ #loginScreen:not(.chooser-mode){padding:14px!important} #loginScreen:not(.chooser-mode) .login-panel{min-height:calc(100svh - 28px)!important} #loginScreen:not(.chooser-mode) #loginForm{ width:min(760px,calc(100vw - 28px))!important; padding:24px 32px 25px!important; gap:13px!important; border-radius:26px!important } #loginScreen:not(.chooser-mode) #loginForm:after{inset:11px!important;border-radius:18px!important} #loginScreen:not(.chooser-mode) .login-back{font-size:15px!important;margin-bottom:0!important} #loginScreen:not(.chooser-mode) .login-form-heading{ grid-template-columns:126px minmax(0,1fr)!important; gap:22px!important; padding-bottom:14px!important } #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:122px!important;height:122px!important;flex-basis:122px!important;padding:5px!important} #loginScreen:not(.chooser-mode) #loginTypeEyebrow{font-size:12px!important;margin-bottom:6px!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{font-size:36px!important} #loginScreen:not(.chooser-mode) #loginTypeText{font-size:14px!important;margin-top:7px!important} #loginScreen:not(.chooser-mode) label{gap:6px!important;font-size:15px!important} #loginScreen:not(.chooser-mode) label>input, #loginScreen:not(.chooser-mode) .password-wrap{min-height:54px!important;border-radius:12px!important} #loginScreen:not(.chooser-mode) label>input{padding:0 17px!important;font-size:16px!important} #loginScreen:not(.chooser-mode) .password-wrap input{height:52px!important;padding:0 17px!important;font-size:16px!important} #loginScreen:not(.chooser-mode) .password-wrap button{height:42px!important;font-size:13px!important} #loginScreen:not(.chooser-mode) .form-line .check{font-size:14px!important} #loginScreen:not(.chooser-mode) .primary-button{min-height:54px!important;font-size:17px!important} #loginScreen:not(.chooser-mode) #loginHint{padding-top:9px!important;font-size:12px!important} .network-slide-actions{display:none} /* On phones, every organisation becomes a compact swipeable school carousel. */ @media(max-width:760px){ #portal .network-grid{display:block!important;margin-top:12px!important} #portal .network-column{width:100%!important;padding:12px!important;margin:0 0 14px!important;border-radius:18px!important;overflow:hidden!important} #portal .network-column-header{display:grid!important;grid-template-columns:50px minmax(0,1fr) auto!important;gap:10px!important;padding:2px 1px 11px!important;margin-bottom:9px!important} #portal .network-column-logo{width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:13px!important} #portal .network-column-header h2{font-size:19px!important;line-height:1.1!important} #portal .network-column-header p{font-size:10px!important} #portal .network-slide-actions{display:flex!important;align-items:center!important;gap:5px!important} #portal .network-slide-actions span{font-size:9px!important;font-weight:850!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:var(--muted)!important} #portal .network-slide-actions button{width:30px!important;height:30px!important;padding:0!important;border-radius:50%!important;border:1px solid currentColor!important;background:rgba(255,255,255,.72)!important;color:#0e5e9f!important;font-size:23px!important;line-height:1!important;box-shadow:0 5px 12px rgba(0,0,0,.12)!important} #portal .network-column-peima .network-slide-actions button{color:#0b7547!important} #portal .network-column-list, #portal .network-column.single .network-column-list{ width:100%!important; display:flex!important; grid-template-columns:none!important; gap:10px!important; padding:2px 2px 10px!important; overflow-x:auto!important; overscroll-behavior-inline:contain!important; scroll-snap-type:x mandatory!important; scroll-padding-inline:2px!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important } #portal .network-column-list::-webkit-scrollbar{display:none!important} #portal .network-school-card{ flex:0 0 calc(100% - 14px)!important; width:calc(100% - 14px)!important; min-width:0!important; min-height:168px!important; height:168px!important; padding:13px!important; margin:0!important; display:grid!important; grid-template-columns:54px minmax(0,1fr)!important; grid-template-rows:auto 1fr auto!important; grid-template-areas:"logo copy" "stats stats" "open open"!important; align-items:center!important; align-content:stretch!important; gap:8px 11px!important; flex-wrap:nowrap!important; border-radius:17px!important; scroll-snap-align:start!important; scroll-snap-stop:always!important; transform:none!important } #portal .network-school-card>.network-org{grid-area:logo!important;width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:13px!important} #portal .network-school-card>div:nth-of-type(1){grid-area:copy!important;min-width:0!important} #portal .network-school-card h3{font-size:17px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important} #portal .network-school-card p{font-size:10px!important;margin-top:4px!important} #portal .network-school-card>.network-totals{ grid-area:stats!important;width:100%!important;margin:0!important;padding:7px 9px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;border-radius:11px!important;background:rgba(0,0,0,.13)!important } #portal .network-school-card>.network-totals>span{min-width:0!important;font-size:9px!important} #portal .network-school-card>.network-totals b{font-size:18px!important} #portal .network-school-card>.network-open{grid-area:open!important;justify-self:end!important;margin:0!important;font-size:12px!important} #loginScreen:not(.chooser-mode){padding:6px!important} #loginScreen:not(.chooser-mode) .login-panel{min-height:calc(100svh - 12px)!important;align-items:center!important} #loginScreen:not(.chooser-mode) #loginForm{width:100%!important;padding:15px 14px 16px!important;gap:9px!important;border-radius:19px!important} #loginScreen:not(.chooser-mode) #loginForm:after{inset:7px!important;border-radius:13px!important} #loginScreen:not(.chooser-mode) .login-back{font-size:13px!important} #loginScreen:not(.chooser-mode) .login-form-heading{grid-template-columns:68px minmax(0,1fr)!important;gap:11px!important;padding-bottom:9px!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:64px!important;height:64px!important;flex-basis:64px!important;padding:2px!important} #loginScreen:not(.chooser-mode) #loginTypeEyebrow{font-size:9px!important;margin-bottom:3px!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{font-size:21px!important;line-height:1.08!important} #loginScreen:not(.chooser-mode) #loginTypeText{font-size:10px!important;margin-top:4px!important} #loginScreen:not(.chooser-mode) label{gap:4px!important;font-size:12px!important} #loginScreen:not(.chooser-mode) label>input, #loginScreen:not(.chooser-mode) .password-wrap{min-height:45px!important;border-radius:10px!important} #loginScreen:not(.chooser-mode) label>input{height:45px!important;padding:0 12px!important;font-size:14px!important} #loginScreen:not(.chooser-mode) .password-wrap input{height:43px!important;padding:0 12px!important;font-size:14px!important} #loginScreen:not(.chooser-mode) .password-wrap button{height:36px!important;padding:0 9px!important;font-size:11px!important} #loginScreen:not(.chooser-mode) .form-line{gap:8px!important} #loginScreen:not(.chooser-mode) .form-line .check{font-size:11px!important} #loginScreen:not(.chooser-mode) .form-line .check input{width:17px!important;height:17px!important;min-height:17px!important} #loginScreen:not(.chooser-mode) .primary-button{min-height:46px!important;font-size:14px!important} #loginScreen:not(.chooser-mode) #loginHint{padding-top:7px!important;font-size:10px!important} } @media(max-width:380px) and (max-height:700px){ #loginScreen:not(.chooser-mode) #loginTypeText{display:none!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:56px!important;height:56px!important;flex-basis:56px!important} #loginScreen:not(.chooser-mode) .login-form-heading{grid-template-columns:60px minmax(0,1fr)!important} #loginScreen:not(.chooser-mode) #loginHint{display:none!important} } /* ===== V17 MOBILE ADMIN SCHOOL LIST ===== Phone All Schools view: simple tappable list rows instead of swipe cards. */ @media(max-width:760px){ #portal .network-slide-actions{display:none!important} #portal .network-grid{display:block!important;margin-top:10px!important} #portal .network-column, #portal .network-column.single{ width:100%!important; padding:0!important; margin:0 0 18px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important } #portal .network-column-header{ display:grid!important; grid-template-columns:44px minmax(0,1fr)!important; gap:10px!important; align-items:center!important; padding:10px 4px!important; margin:0!important; border-bottom:2px solid currentColor!important } #portal .network-column-logo{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:10px!important} #portal .network-column-header h2{font-size:18px!important;line-height:1.1!important;margin:0!important} #portal .network-column-header p{font-size:10px!important;margin:2px 0 0!important} #portal .network-column-list, #portal .network-column.single .network-column-list{ width:100%!important; display:block!important; padding:0!important; overflow:visible!important; scroll-snap-type:none!important } #portal .network-school-card, body:not(.dark) #portal .network-school-card.pef-school-card, body:not(.dark) #portal .network-school-card.peima-school-card, body.dark #portal .network-school-card.pef-school-card, body.dark #portal .network-school-card.peima-school-card{ width:100%!important; min-width:0!important; min-height:0!important; height:auto!important; margin:0!important; padding:11px 5px!important; display:grid!important; grid-template-columns:42px minmax(0,1fr) auto!important; grid-template-rows:auto!important; grid-template-areas:"logo copy open"!important; gap:10px!important; align-items:center!important; border:0!important; border-bottom:1px solid var(--border)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; color:var(--text)!important; scroll-snap-align:none!important } #portal .network-school-card:hover, #portal .network-school-card:active{transform:none!important;box-shadow:none!important;background:rgba(127,150,170,.10)!important} #portal .network-school-card>.network-org{grid-area:logo!important;width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:9px!important;padding:3px!important} #portal .network-school-card>div:nth-of-type(1){grid-area:copy!important;min-width:0!important} #portal .network-school-card h3{font-size:15px!important;line-height:1.18!important;margin:0!important;color:var(--text)!important;white-space:normal!important;overflow-wrap:anywhere!important} #portal .network-school-card p{font-size:10px!important;line-height:1.3!important;margin:3px 0 0!important;color:var(--muted)!important} #portal .network-school-card>.network-totals{display:none!important} #portal .network-school-card>.network-open{grid-area:open!important;margin:0!important;justify-self:end!important;align-self:center!important;padding:7px 9px!important;border-radius:9px!important;font-size:11px!important;font-weight:900!important;white-space:nowrap!important;color:#fff!important;background:#122b42!important} #portal .network-column-pef .network-school-card>.network-open{background:#0a63b6!important} #portal .network-column-peima .network-school-card>.network-open{background:#14734a!important} body.dark #portal .network-school-card h3{color:#f4f8fc!important} body.dark #portal .network-school-card p{color:#aabccc!important} } /* BIH v20 — explicit login progress + mobile-safe busy state */ #loginForm .login-submit-button.is-loading{cursor:wait!important;opacity:.96!important;pointer-events:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important} #loginForm .login-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;display:inline-block;animation:bih-login-spin .72s linear infinite;flex:0 0 18px} #loginForm .login-progress{margin-top:-2px;padding:9px 12px;border-radius:11px;border:1px solid color-mix(in srgb,var(--form-accent) 45%,transparent);background:color-mix(in srgb,var(--form-accent) 9%,rgba(5,14,23,.96));display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;font-size:12px;letter-spacing:.02em;color:var(--form-accent)} #loginForm .login-progress[hidden]{display:none!important} #loginForm .login-progress-dot{width:8px;height:8px;border-radius:50%;background:var(--form-accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--form-accent) 55%,transparent);animation:bih-login-pulse 1.25s ease-out infinite} @keyframes bih-login-spin{to{transform:rotate(360deg)}} @keyframes bih-login-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--form-accent) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} @media(max-width:600px){#loginForm .login-progress{font-size:11px;padding:8px 10px}.login-submit-button.is-loading{min-height:48px}} /* ===== V23 LOGIN NO-SLIDE + MOBILE STABILITY + FINAL LOGO FIT ===== */ html,body{max-width:100%!important;overflow-x:hidden!important} #loginScreen,#loginScreen *{box-sizing:border-box!important} #loginScreen:not(.chooser-mode){width:100%!important;max-width:100%!important;overflow-x:hidden!important} #loginScreen:not(.chooser-mode),#loginScreen:not(.chooser-mode) .login-panel,#loginScreen:not(.chooser-mode) #loginForm{transition:none!important;animation:none!important;transform:none!important} #loginScreen:not(.chooser-mode) .login-panel{width:100%!important;overflow-x:hidden!important;padding-inline:0!important} #loginScreen:not(.chooser-mode) #loginForm{max-width:760px!important;margin-inline:auto!important} #loginScreen:not(.chooser-mode) .login-form-heading>div{min-width:0!important} #loginScreen:not(.chooser-mode) :is(#loginTypeTitle,#loginTypeText,#loginHint,#loginIdLabel){overflow-wrap:anywhere!important} #loginScreen:not(.chooser-mode) label>input,#loginScreen:not(.chooser-mode) .password-wrap,#loginScreen:not(.chooser-mode) .password-wrap input{width:100%!important;min-width:0!important} #loginScreen:not(.chooser-mode) .password-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;overflow:hidden!important} #loginScreen.login-pef-form .login-form-logo-frame img,#loginScreen.login-peima-form .login-form-logo-frame img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;transform:scale(1.55)!important;transform-origin:center!important} #loginScreen.login-pef-form .login-form-logo-frame,#loginScreen.login-peima-form .login-form-logo-frame{overflow:hidden!important} @media(max-width:760px){ #loginScreen:not(.chooser-mode){padding:8px!important;min-height:100svh!important;overflow-x:hidden!important;overflow-y:auto!important;scroll-behavior:auto!important} #loginScreen:not(.chooser-mode) .login-panel{min-height:auto!important;align-items:flex-start!important;padding:0!important} #loginScreen:not(.chooser-mode) #loginForm{width:min(100%,calc(100vw - 16px))!important;max-width:100%!important;margin:0 auto!important;padding:18px 14px 18px!important;gap:10px!important;border-radius:22px!important;left:auto!important;right:auto!important} #loginScreen:not(.chooser-mode) #loginForm:after{inset:8px!important;border-radius:14px!important} #loginScreen:not(.chooser-mode) .login-form-heading{grid-template-columns:82px minmax(0,1fr)!important;gap:14px!important;align-items:center!important;padding-bottom:10px!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:82px!important;height:82px!important;flex-basis:82px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:50%!important;padding:6px!important;background:#fff!important;border:2px solid var(--form-accent)!important;box-shadow:0 0 0 3px rgba(255,255,255,.04),0 0 28px var(--form-glow)!important} #loginScreen.login-admin-form .login-form-logo-frame,#loginScreen.login-cmo-form .login-form-logo-frame{background:transparent!important;padding:3px!important;border:0!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame img{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:center!important} #loginScreen.login-pef-form .login-form-logo-frame img,#loginScreen.login-peima-form .login-form-logo-frame img{transform:scale(1.55)!important} #loginScreen:not(.chooser-mode) #loginTypeEyebrow{font-size:10px!important;line-height:1.2!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{font-size:19px!important;line-height:1.08!important} #loginScreen:not(.chooser-mode) #loginTypeText{font-size:11px!important;line-height:1.35!important;margin-top:3px!important} #loginScreen:not(.chooser-mode) label{font-size:12px!important} #loginScreen:not(.chooser-mode) label>input{height:46px!important;padding:0 12px!important;font-size:14px!important} #loginScreen:not(.chooser-mode) .password-wrap{min-height:46px!important;border-radius:11px!important} #loginScreen:not(.chooser-mode) .password-wrap input{height:44px!important;padding:0 12px!important;font-size:14px!important} #loginScreen:not(.chooser-mode) .password-wrap button{height:36px!important;padding:0 10px!important;font-size:11px!important;white-space:nowrap!important} #loginScreen:not(.chooser-mode) .form-line{gap:8px!important} #loginScreen:not(.chooser-mode) .primary-button{min-height:48px!important;font-size:15px!important} #loginScreen:not(.chooser-mode) #loginHint{font-size:10px!important;text-align:center!important} } @media(max-width:420px){ #loginScreen:not(.chooser-mode) #loginForm{width:min(100%,calc(100vw - 12px))!important;padding:16px 12px 16px!important} #loginScreen:not(.chooser-mode) .login-form-heading{grid-template-columns:74px minmax(0,1fr)!important;gap:12px!important} #loginScreen:not(.chooser-mode) .login-form-logo-frame{width:74px!important;height:74px!important;flex-basis:74px!important;padding:5px!important} #loginScreen:not(.chooser-mode) #loginTypeTitle{font-size:17px!important} } /* ===== V27 SESSION-ONLY LOGIN NOTE ===== */ #loginScreen:not(.chooser-mode) .session-only-note{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important} #loginScreen:not(.chooser-mode) .session-only-note>span{font-size:12px!important;line-height:1.35!important;color:#9fb1bf!important} @media(max-width:760px){#loginScreen:not(.chooser-mode) .session-only-note{align-items:flex-start!important}#loginScreen:not(.chooser-mode) .session-only-note>span{font-size:10px!important}} /* ===== V28 SCHOOL-MANAGED STUDENTS + GPS CLEANLINESS CAMERA ===== */ #studentsData .school-student-manager{overflow:hidden} #studentsData .school-student-toolbar{display:grid;grid-template-columns:minmax(220px,.6fr) minmax(280px,1.4fr);gap:16px;align-items:end;margin:0 0 20px;padding:16px 18px;border:1px solid var(--border);border-radius:17px;background:var(--surface-2)} #studentsData .school-student-toolbar label{min-width:0} #studentsData .school-student-toolbar :is(input,select){width:100%;min-width:0} .student-class-summary{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0} .student-class-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:7px 11px;background:var(--surface-2);color:var(--text);font-weight:800;cursor:pointer} .student-class-chip b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:rgba(23,140,255,.14);color:#168cff} .student-class-chip.active{border-color:#168cff;box-shadow:0 0 0 2px rgba(22,140,255,.12)} .gps-camera-status{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;border:1px solid rgba(48,183,103,.45);border-radius:15px;background:rgba(34,167,93,.08)} .gps-camera-status>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(34,167,93,.14);color:#25b967;font-size:20px} .gps-camera-status b,.gps-camera-status small{display:block}.gps-camera-status small{margin-top:2px;color:var(--muted)} #cleanliness .clean-camera-trigger>span{color:#25b967;font-size:28px} @media(max-width:760px){#studentsData .school-student-toolbar{grid-template-columns:1fr;padding:13px;gap:11px}.student-class-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.student-class-chip{justify-content:space-between}.gps-camera-status{align-items:flex-start}} /* V29 — CMO self face profile + three school-wise face attendances */ #portal .cmo-profile-face-panel{margin-top:20px;border-left:5px solid #0aaed7!important} #portal .cmo-profile-face-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:stretch} #portal .cmo-profile-face-preview{min-height:220px;border:1px dashed #8fb7cc;border-radius:18px;background:#dfeaf0;display:grid;place-items:center;align-content:center;gap:8px;overflow:hidden} #portal .cmo-profile-face-preview>span{font-size:50px;color:#0b77b5}#portal .cmo-profile-face-preview>small{font-weight:800;color:#35566a} #portal .cmo-profile-face-preview img{width:100%;height:100%;min-height:220px;object-fit:cover} #portal .cmo-profile-camera-wrap{position:relative;min-height:300px;border-radius:18px;overflow:hidden;background:#071522;padding:14px} #portal #cmoProfileVideo{display:block;width:100%;min-height:270px;max-height:430px;object-fit:cover;border-radius:14px;background:#071522;transform:scaleX(-1)} #portal #cmoProfilePlaceholder{position:absolute;inset:14px 14px 72px;display:grid;place-items:center;align-content:center;text-align:center;background:linear-gradient(145deg,#071522,#0b2738);border-radius:14px;color:#d8edf7} #portal #cmoProfilePlaceholder.is-hidden{display:none} #portal .cmo-profile-camera-wrap .camera-actions{position:relative;z-index:2;margin-top:12px;display:flex;gap:10px;flex-wrap:wrap} #portal .cmo-visit-attendance{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:#eaf4f8;border:1px solid #b9d5e1} #portal .cmo-visit-attendance strong{display:block;color:#0b5680}.cmo-visit-attendance small{display:block;margin-top:3px;color:#4b6877} #portal .cmo-visit-attendance.done{background:#e9f8ef;border-color:#9ed3b3}.cmo-visit-attendance.done strong{color:#0b7042} #portal .cmo-visit-actions{display:flex;gap:10px;flex-wrap:wrap} .cmo-school-camera-wrap{position:relative;border-radius:18px;overflow:hidden;background:#051d17} .cmo-school-face-dialog #cmoSchoolFaceVideo{display:block;width:100%;max-height:58vh;aspect-ratio:4/3;object-fit:cover;background:#051d17;transform:scaleX(-1)} .cmo-school-face-dialog #cmoSchoolFacePlaceholder{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;background:#071522;color:#d8edf7} .cmo-school-face-dialog #cmoSchoolFacePlaceholder.is-hidden{display:none} .cmo-school-face-dialog .camera-capture-heading p{margin:4px 0 0;color:var(--muted)} body.dark #portal .cmo-profile-face-preview{background:#0a1d29;border-color:#2e6077}body.dark #portal .cmo-visit-attendance{background:#0c2330;border-color:#2b5f74}body.dark #portal .cmo-visit-attendance.done{background:#0e2b1e;border-color:#2c7650} @media(max-width:760px){#portal .cmo-profile-face-grid{grid-template-columns:1fr}#portal .cmo-profile-face-preview{min-height:180px}.cmo-school-face-dialog #cmoSchoolFaceVideo{max-height:52vh}} /* V31 • Daily School Closing */ .school-close-feature{border-color:rgba(214,169,40,.34);background:linear-gradient(135deg,var(--surface),rgba(214,169,40,.08))} .school-close-feature .feature-icon{background:rgba(214,169,40,.15);color:#8c6810} .school-close-panel{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:34px;align-items:center;padding:34px;overflow:hidden;position:relative} .school-close-panel:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(214,169,40,.18);border-radius:50%;right:-110px;top:-120px;pointer-events:none} .school-close-visual{min-height:270px;border-radius:28px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 44%,rgba(214,169,40,.23),rgba(214,169,40,.05) 43%,transparent 44%),linear-gradient(145deg,var(--surface-2),var(--surface));border:1px solid var(--border)} .school-close-visual span{width:108px;height:108px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(145deg,#d6a928,#f1cf69);color:#15211d;font-size:58px;box-shadow:0 18px 44px rgba(108,79,10,.22);z-index:2} .school-close-visual i{position:absolute;width:170px;height:170px;border-radius:50%;border:1px dashed rgba(214,169,40,.55);animation:schoolClosePulse 4s linear infinite} @keyframes schoolClosePulse{to{transform:rotate(360deg)}} .school-close-copy h2{font-size:30px;margin:7px 0 8px}.school-close-copy>p{margin:0 0 22px;color:var(--muted);max-width:680px;line-height:1.6} .school-close-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0} .school-close-details>div{padding:17px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)} .school-close-details span,.school-close-details strong{display:block}.school-close-details span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}.school-close-details strong{font-size:17px;margin-top:5px} .school-close-button{min-width:260px;min-height:50px}.school-close-button:disabled{opacity:1;cursor:default;background:#1b7954;color:#fff;border-color:#1b7954} .school-close-note{display:block;margin-top:13px;color:var(--muted);line-height:1.5} body.dark .school-close-feature{background:linear-gradient(135deg,#17221f,rgba(214,169,40,.08))} body.dark .school-close-visual{background:radial-gradient(circle at 50% 44%,rgba(214,169,40,.19),rgba(214,169,40,.035) 43%,transparent 44%),linear-gradient(145deg,#18221f,#111917)} @media(max-width:760px){.school-close-panel{grid-template-columns:1fr;padding:20px;gap:20px}.school-close-visual{min-height:185px}.school-close-visual span{width:86px;height:86px;font-size:44px}.school-close-visual i{width:135px;height:135px}.school-close-details{grid-template-columns:1fr}.school-close-button{width:100%;min-width:0}} /* V32 • Offline-first status */ .sync-status-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;border:1px solid rgba(21,128,61,.2);background:rgba(34,197,94,.08);font-size:12px;font-weight:800;white-space:nowrap}.sync-status-pill i{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(34,197,94,.12)}.sync-status-pill[data-mode="pending"]{border-color:rgba(217,119,6,.25);background:rgba(245,158,11,.1)}.sync-status-pill[data-mode="pending"] i{background:#d97706;box-shadow:0 0 0 4px rgba(245,158,11,.14)}.sync-status-pill[data-mode="offline"]{border-color:rgba(220,38,38,.22);background:rgba(239,68,68,.08)}.sync-status-pill[data-mode="offline"] i{background:#dc2626;box-shadow:0 0 0 4px rgba(239,68,68,.12)} .offline-sync-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:14px 0 18px;padding:14px 16px;border-radius:18px;border:1px solid rgba(22,163,74,.18);background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(255,255,255,.82));box-shadow:0 10px 28px rgba(15,23,42,.05)}.offline-sync-card[data-mode="pending"]{border-color:rgba(217,119,6,.24);background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(255,255,255,.86))}.offline-sync-card[data-mode="offline"]{border-color:rgba(220,38,38,.20);background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(255,255,255,.88))}.offline-sync-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(15,118,110,.10);font-size:22px;font-weight:900}.offline-sync-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.offline-sync-copy small{font-size:10px;letter-spacing:.12em;font-weight:900;opacity:.68}.offline-sync-copy strong{font-size:15px}.offline-sync-copy span{font-size:12px;opacity:.76}.offline-sync-actions{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:5px;row-gap:4px;text-align:right}.offline-sync-actions>b{font-size:20px}.offline-sync-actions>small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.62}.offline-sync-actions>button{grid-column:1/3;margin-top:2px}.dark .offline-sync-card{background:linear-gradient(135deg,rgba(34,197,94,.09),rgba(10,20,30,.84))}.dark .offline-sync-card[data-mode="pending"]{background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(10,20,30,.84))}.dark .offline-sync-card[data-mode="offline"]{background:linear-gradient(135deg,rgba(239,68,68,.09),rgba(10,20,30,.84))} @media(max-width:780px){.sync-status-pill{padding:6px 8px}.sync-status-pill span{font-size:11px}.offline-sync-card{grid-template-columns:auto 1fr;padding:12px}.offline-sync-actions{grid-column:1/3;display:flex;justify-content:flex-end;gap:6px}.offline-sync-actions>button{margin-left:6px}.offline-sync-actions>b{font-size:16px}} /* ========================================================================== */ /* BIH V39 — compact mobile login, professional symbols, high-contrast dark UI */ /* ========================================================================== */ /* Mobile login: horizontal role slides instead of oversized stacked cards. */ @media(max-width:720px){ #loginScreen.chooser-mode .login-panel{padding:18px 0 24px!important;align-items:flex-start!important} #loginScreen.chooser-mode .login-choice-card{width:100%!important;overflow:hidden!important} #loginScreen.chooser-mode .approved-login-brand{padding:0 18px!important;margin-bottom:2px!important} #loginScreen.chooser-mode .approved-login-brand .brand-mark{width:122px!important;height:86px!important} #loginScreen.chooser-mode .approved-brand-title{font-size:13px!important;margin:0 0 7px!important} #loginScreen.chooser-mode .approved-login-intro p{font-size:13px!important;margin:0 18px 14px!important} #loginScreen.chooser-mode .login-type-list{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(245px,78vw)!important;grid-template-columns:none!important;gap:12px!important;max-width:none!important;width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;scroll-snap-type:x mandatory!important;padding:8px max(18px,calc((100vw - 280px)/2)) 16px!important;scroll-padding-inline:18px!important;scrollbar-width:none!important} #loginScreen.chooser-mode .login-type-list::-webkit-scrollbar{display:none!important} #loginScreen.chooser-mode .login-type-card{scroll-snap-align:center!important;min-height:126px!important;height:126px!important;padding:15px!important;border-radius:18px!important;display:grid!important;grid-template-columns:62px minmax(0,1fr) 32px!important;align-items:center!important;text-align:left!important;gap:12px!important;overflow:hidden!important} #loginScreen.chooser-mode .login-type-card>span{width:60px!important;height:60px!important;min-width:60px!important;flex-basis:60px!important;margin:0!important;padding:5px!important;border-radius:16px!important} #loginScreen.chooser-mode .login-type-card div{display:block!important;min-height:0!important;text-align:left!important} #loginScreen.chooser-mode .login-type-card strong{font-size:20px!important;line-height:1.1!important;letter-spacing:.04em!important} #loginScreen.chooser-mode .login-type-card small{display:block!important;font-size:11px!important;line-height:1.35!important;margin-top:6px!important;color:#cbd5df!important} #loginScreen.chooser-mode .login-type-card>b{width:30px!important;height:30px!important;min-height:30px!important;margin:0!important;border-radius:50%!important;padding:0!important;background:rgba(255,255,255,.055)!important;box-shadow:none!important} #loginScreen.chooser-mode .login-type-card>b:before{content:""!important;font-size:0!important} #loginScreen.chooser-mode .login-type-card>b:after{content:"›"!important;margin:0!important;font-size:28px!important;line-height:.9!important;color:var(--role-accent)!important} #loginScreen.chooser-mode .login-feature-strip{font-size:11px!important;margin:8px 16px 0!important;padding:10px!important;gap:10px!important} #loginScreen.chooser-mode .login-copyright{margin-top:9px!important} } /* Professional icon tiles: coloured by function, not one white box everywhere. */ #portal .nav-item>span,#portal .action-icon,.pro-symbol,.face-staff-hand{background:#102535!important;border:1px solid #365064!important;border-radius:12px!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.12)!important} #portal .nav-item[data-view="dashboard"]>span,#portal .action-card[data-view="dashboard"] .action-icon{background:linear-gradient(145deg,#153a7a,#0d61b8)!important;border-color:#328ee1!important} #portal .nav-item[data-view="attendance"]>span,#portal .action-card[data-view="attendance"] .action-icon{background:linear-gradient(145deg,#075a47,#0aa77c)!important;border-color:#24c69b!important} #portal .nav-item[data-view="face"]>span,#portal .action-card[data-view="face"] .action-icon,.pro-hand,.face-staff-hand{background:linear-gradient(145deg,#633c00,#d58b00)!important;border-color:#f4b739!important} #portal .nav-item[data-view="studentsData"]>span,#portal .nav-item[data-view="newAdmission"]>span{background:linear-gradient(145deg,#0a5f54,#0ebd92)!important;border-color:#42dbb6!important} #portal .nav-item[data-view="records"]>span{background:linear-gradient(145deg,#17527e,#208fd0)!important;border-color:#52b6ea!important} #portal .nav-item[data-view="gps"]>span,#portal .nav-item[data-view="locations"]>span{background:linear-gradient(145deg,#084a85,#168cff)!important;border-color:#55b1ff!important} #portal .nav-item[data-view="cleanliness"]>span{background:linear-gradient(145deg,#12623b,#28a85e)!important;border-color:#4ed483!important} #portal .nav-item[data-view="reports"]>span{background:linear-gradient(145deg,#5b3179,#9a55c8)!important;border-color:#bd7bdd!important} #portal .nav-item>span img,#portal .action-icon img,.pro-symbol img,.face-staff-hand img{filter:brightness(0) invert(1)!important;width:22px!important;height:22px!important;object-fit:contain!important} /* High contrast dark mode: charcoal/black surfaces with blue only as an accent. */ body.dark #portal{background:#080a0d!important;color:#f5f7fa!important} body.dark #portal .content{background:#080a0d!important;color:#f5f7fa!important} body.dark #portal .sidebar{background:#0b0e12!important;border-right-color:#2a3038!important} body.dark #portal .topbar{background:#0d1014!important;border-color:#2c333c!important} body.dark #portal :where(.panel,.metric-card,.action-card,.feature-card,.admin-stat-card,.reference-action,.org-download-card,.network-school-card,.cmo-account-card,.cmo-visit-card,.admin-location-card,.school-close-panel){background:#11151a!important;border-color:#303842!important;color:#f7f9fb!important;box-shadow:0 12px 28px rgba(0,0,0,.24)!important} body.dark #portal :where(h1,h2,h3,h4,strong,label,th,.page-heading h1){color:#f8fafc!important;text-shadow:none!important;opacity:1!important} body.dark #portal :where(p,small,td,.muted,.eyebrow,.location-privacy-note){color:#c4ccd5!important;opacity:1!important} body.dark #portal :where(input,select,textarea){background:#0b0e12!important;border-color:#3a4551!important;color:#f7fafc!important;box-shadow:none!important} body.dark #portal :where(input,textarea)::placeholder{color:#8e99a5!important;opacity:1!important} body.dark #portal .nav-item{color:#e5e9ee!important} body.dark #portal .nav-item.active{background:linear-gradient(90deg,#2d240c,#15191e)!important;border:1px solid #725a1a!important;box-shadow:inset 4px 0 #f2b51d!important} body.dark #portal .reference-school-hero,body.dark #portal .admin-overview-heading{background:linear-gradient(120deg,#10151a,#16191d)!important;border-color:#323943!important;border-left-color:#f2b51d!important} body.dark #portal .submission-window-banner{background:#12161b!important;border-color:#39424c!important} body.dark #portal .table-wrap,body.dark #portal table{background:#0e1216!important;color:#f7f9fb!important} body.dark #portal thead th{background:#171c22!important;color:#f5f7fa!important} body.dark #portal tbody tr{border-color:#2c333b!important} body.dark #portal tbody tr:nth-child(even){background:#11161b!important} /* Staff biometric enrolment and verification */ .staff-record-form{grid-template-columns:minmax(210px,.68fr) minmax(210px,.68fr) minmax(0,2.2fr)!important;align-items:start!important} .staff-hand-preview{position:relative!important;overflow:hidden!important;background:linear-gradient(145deg,#101821,#17130a)!important;border:1px solid #73581a!important} .staff-hand-preview .pro-symbol{width:72px!important;height:72px!important;display:grid!important;place-items:center!important;margin:auto!important;border-radius:20px!important} .staff-hand-preview.registered{border-color:#2ea66c!important;background:linear-gradient(145deg,#0d1e18,#111a17)!important} .staff-hand-preview.registered img{width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important} .hand-register-button{border-color:#d39a20!important;color:#f3b51d!important} .hand-live-frame{position:relative;min-height:360px;border-radius:22px;overflow:hidden;background:#050709;border:1px solid #34404c} .hand-live-frame video{width:100%;height:100%;min-height:360px;max-height:62vh;object-fit:cover;display:block;background:#050709} .hand-live-frame.enrollment{min-height:420px} .hand-live-frame.enrollment video{min-height:420px} .palm-guide{position:absolute;inset:9% 15%;border:2px solid rgba(242,181,29,.82);border-radius:38% 38% 33% 33% / 28% 28% 42% 42%;pointer-events:none;display:grid;place-items:center;box-shadow:0 0 0 999px rgba(0,0,0,.16),inset 0 0 28px rgba(242,181,29,.08)} .palm-guide:before,.palm-guide:after{content:"";position:absolute;width:34px;height:34px;border-color:#f2b51d;border-style:solid}.palm-guide:before{left:-2px;top:-2px;border-width:4px 0 0 4px;border-radius:12px 0 0 0}.palm-guide:after{right:-2px;bottom:-2px;border-width:0 4px 4px 0;border-radius:0 0 12px 0} .palm-guide-icon{width:118px;height:118px;display:grid;place-items:center;opacity:.30}.palm-guide-icon img{width:100%;height:100%;filter:brightness(0) saturate(100%) invert(74%) sepia(76%) saturate(713%) hue-rotate(353deg) brightness(102%) contrast(94%)} .palm-guide>i{position:absolute;left:4%;right:4%;height:2px;background:linear-gradient(90deg,transparent,#53f1ff,#f2b51d,#53f1ff,transparent);box-shadow:0 0 12px #53f1ff;animation:bihPalmScan 2.2s ease-in-out infinite} .palm-guide>b{position:absolute;bottom:10px;font-size:12px;letter-spacing:.16em;color:#fff;background:rgba(0,0,0,.55);padding:6px 9px;border-radius:8px} @keyframes bihPalmScan{0%,100%{top:12%}50%{top:86%}} @media(prefers-reduced-motion:reduce){.palm-guide>i{animation:none;top:50%}} .biometric-scan-status{display:flex;gap:12px;align-items:center;margin:14px 0;padding:12px 14px;border:1px solid #374450;border-radius:14px;background:#10161b}.biometric-scan-status>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#8b6408;color:#fff;font-weight:900}.biometric-scan-status strong{display:block}.biometric-scan-status small{display:block;margin-top:3px;color:#aeb8c3} .hand-scan-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.hand-scan-progress i{height:6px;border-radius:99px;background:#2f3841}.hand-scan-progress i.active{background:linear-gradient(90deg,#19cbea,#f2b51d);box-shadow:0 0 9px rgba(25,203,234,.3)} .face-staff-hand{width:58px;height:58px;display:grid;place-items:center;flex:0 0 58px}.face-staff-hand.ready{border-color:#26b579!important}.face-staff-hand img{width:31px!important;height:31px!important} .biometric-record-state{font-size:12px!important;color:#d9a52a!important}.biometric-record-state.ready{color:#2db877!important} @media(max-width:820px){.staff-record-form{grid-template-columns:1fr!important}.hand-live-frame,.hand-live-frame video{min-height:330px}.hand-live-frame.enrollment,.hand-live-frame.enrollment video{min-height:360px}.palm-guide{inset:8% 12%}} .pro-profile{background:linear-gradient(145deg,#0c4d78,#188fd2)!important;border-color:#4eb8ef!important}.pro-profile img{filter:brightness(0) invert(1)!important;width:28px!important;height:28px!important} #portal .menu-button{background:linear-gradient(145deg,#16202a,#243545)!important;border-color:#40576b!important;color:#f4f7fa!important;font-size:0!important}#portal .menu-button:before{content:"☰";font-size:22px!important;line-height:1!important} /* V40 • School Opening / Closing + Admin summaries */ .school-day-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch} .school-day-action-grid .school-close-panel{grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:24px;padding:26px} .school-open-panel{border-color:rgba(35,178,117,.35)!important} .school-open-visual{background:radial-gradient(circle at 50% 44%,rgba(35,178,117,.22),rgba(35,178,117,.05) 43%,transparent 44%),linear-gradient(145deg,var(--surface-2),var(--surface))!important} .school-open-visual span{background:linear-gradient(145deg,#118257,#42d49a)!important;color:#fff!important;box-shadow:0 18px 44px rgba(15,126,84,.22)!important} .school-open-visual i{border-color:rgba(35,178,117,.55)!important} .school-open-button{min-width:260px;min-height:50px;background:linear-gradient(135deg,#087b50,#20a66e)!important;border-color:#15945f!important;color:#fff!important} .school-open-button:disabled{opacity:1;cursor:default;background:#1b7954!important;color:#fff!important;border-color:#1b7954!important} .school-day-summary-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px} .school-day-summary-tab{min-height:58px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font:inherit;font-weight:800;cursor:pointer;transition:.18s ease} .school-day-summary-tab.active{background:linear-gradient(135deg,#0d724b,#169a68);border-color:#35b783;color:#fff;box-shadow:0 10px 24px rgba(10,105,71,.18)} .school-day-summary-tab[data-school-day-mode="close"].active{background:linear-gradient(135deg,#7a5a0b,#b88a17);border-color:#d6a928} .school-day-summary-tools{grid-template-columns:2fr 1fr 1fr;margin-bottom:18px} .school-day-summary-panel{padding:24px} .school-day-summary-table td,.school-day-summary-table th{vertical-align:middle} .summary-status,.summary-org{display:inline-flex;align-items:center;justify-content:center;min-width:84px;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid transparent} .summary-status.recorded{background:rgba(31,170,108,.13);border-color:rgba(31,170,108,.35);color:#16875a} .summary-status.pending{background:rgba(214,169,40,.13);border-color:rgba(214,169,40,.35);color:#96700d} .summary-org.pef{background:rgba(30,112,220,.12);color:#2b75d6;border-color:rgba(30,112,220,.28)} .summary-org.peima{background:rgba(23,154,91,.12);color:#168958;border-color:rgba(23,154,91,.28)} .action-school-day span{background:rgba(35,178,117,.14)!important} body.dark .school-day-summary-tab{background:#10151a!important;border-color:#343c46!important;color:#f7f9fb!important} body.dark .school-day-summary-tab.active{background:linear-gradient(135deg,#0b5b40,#0f8058)!important;color:#fff!important;border-color:#29986c!important} body.dark .school-day-summary-tab[data-school-day-mode="close"].active{background:linear-gradient(135deg,#5f470b,#8e6b12)!important;border-color:#b88a17!important} body.dark .summary-status.recorded{background:#102c22;color:#7ce3b6;border-color:#255e48} body.dark .summary-status.pending{background:#2d260f;color:#f1ce68;border-color:#67551b} body.dark .summary-org.pef{background:#10243d;color:#8ec2ff;border-color:#254d79} body.dark .summary-org.peima{background:#102c22;color:#88e5b7;border-color:#255e48} @media(max-width:980px){.school-day-action-grid{grid-template-columns:1fr}.school-day-summary-tools{grid-template-columns:1fr}} @media(max-width:620px){.school-day-summary-tabs{grid-template-columns:1fr}.school-day-summary-tab{min-height:50px}.school-day-action-grid .school-close-panel{grid-template-columns:1fr;padding:20px}.school-open-button{width:100%;min-width:0}.school-day-summary-panel{padding:16px}} /* ===== V41 FINAL ORGANISATION SCHOOL CARD COLOURS ===== PEF = BLUE, PEIMA = GREEN in both Light and Dark themes. Applies to desktop cards and mobile swipe/slide cards. */ /* Light theme: PEF */ body:not(.dark) #portal .network-column-pef{ background:linear-gradient(180deg,#f4f8ff 0%,#eaf3ff 100%)!important; border-color:#8ebcff!important; box-shadow:0 12px 28px rgba(37,99,235,.09)!important; } body:not(.dark) #portal .network-column-pef .network-column-header{ border-bottom-color:rgba(37,99,235,.22)!important; } body:not(.dark) #portal .network-column-pef .network-column-header :is(h2,small,p){ color:#123d79!important; } body:not(.dark) #portal .network-column-pef .network-school-card.pef-school-card{ background:linear-gradient(145deg,#eef5ff 0%,#e1edff 100%)!important; border:1.5px solid #78aaf7!important; box-shadow:0 8px 20px rgba(37,99,235,.10)!important; color:#102b53!important; } body:not(.dark) #portal .network-column-pef .network-school-card.pef-school-card :is(h3,strong,b){ color:#102b53!important; } body:not(.dark) #portal .network-column-pef .network-school-card.pef-school-card :is(p,small,.network-totals>span){ color:#496684!important; } body:not(.dark) #portal .network-column-pef .network-school-card.pef-school-card .network-open{ color:#ffffff!important; background:#1268c4!important; border:1px solid #0a56a8!important; } body:not(.dark) #portal .network-column-pef .network-school-card.pef-school-card:hover, body:not(.dark) #portal .network-column-pef .network-school-card.pef-school-card:active{ background:linear-gradient(145deg,#e5f0ff 0%,#d6e7ff 100%)!important; border-color:#4e8fe8!important; box-shadow:0 12px 26px rgba(37,99,235,.15)!important; } /* Light theme: PEIMA */ body:not(.dark) #portal .network-column-peima{ background:linear-gradient(180deg,#f2fbf5 0%,#e7f7ed 100%)!important; border-color:#7ccf9a!important; box-shadow:0 12px 28px rgba(22,139,91,.09)!important; } body:not(.dark) #portal .network-column-peima .network-column-header{ border-bottom-color:rgba(22,139,91,.22)!important; } body:not(.dark) #portal .network-column-peima .network-column-header :is(h2,small,p){ color:#155d39!important; } body:not(.dark) #portal .network-column-peima .network-school-card.peima-school-card{ background:linear-gradient(145deg,#eefaf2 0%,#def3e6 100%)!important; border:1.5px solid #6bc38c!important; box-shadow:0 8px 20px rgba(22,139,91,.10)!important; color:#123d2a!important; } body:not(.dark) #portal .network-column-peima .network-school-card.peima-school-card :is(h3,strong,b){ color:#123d2a!important; } body:not(.dark) #portal .network-column-peima .network-school-card.peima-school-card :is(p,small,.network-totals>span){ color:#4a715d!important; } body:not(.dark) #portal .network-column-peima .network-school-card.peima-school-card .network-open{ color:#ffffff!important; background:#18854f!important; border:1px solid #106e40!important; } body:not(.dark) #portal .network-column-peima .network-school-card.peima-school-card:hover, body:not(.dark) #portal .network-column-peima .network-school-card.peima-school-card:active{ background:linear-gradient(145deg,#e5f7eb 0%,#d4eedf 100%)!important; border-color:#47aa70!important; box-shadow:0 12px 26px rgba(22,139,91,.15)!important; } /* Dark theme: PEF */ body.dark #portal .network-column-pef{ background:linear-gradient(160deg,#08182a 0%,#0c2540 100%)!important; border-color:#225f9c!important; box-shadow:0 14px 30px rgba(0,0,0,.28)!important; } body.dark #portal .network-column-pef .network-column-header{ border-bottom-color:rgba(72,149,224,.30)!important; } body.dark #portal .network-column-pef .network-column-header :is(h2,small,p){ color:#dcecff!important; } body.dark #portal .network-column-pef .network-school-card.pef-school-card{ background:linear-gradient(145deg,#0c2a49 0%,#102f50 100%)!important; border:1.5px solid #2874bd!important; box-shadow:0 9px 22px rgba(0,0,0,.24)!important; color:#f6faff!important; } body.dark #portal .network-column-pef .network-school-card.pef-school-card :is(h3,strong,b){ color:#f7fbff!important; } body.dark #portal .network-column-pef .network-school-card.pef-school-card :is(p,small,.network-totals>span){ color:#b8d2eb!important; } body.dark #portal .network-column-pef .network-school-card.pef-school-card .network-open{ color:#ffffff!important; background:#1676d2!important; border:1px solid #318dde!important; } body.dark #portal .network-column-pef .network-school-card.pef-school-card:hover, body.dark #portal .network-column-pef .network-school-card.pef-school-card:active{ background:linear-gradient(145deg,#10385f 0%,#123e68 100%)!important; border-color:#4194e2!important; box-shadow:0 12px 28px rgba(0,0,0,.30)!important; } /* Dark theme: PEIMA */ body.dark #portal .network-column-peima{ background:linear-gradient(160deg,#071c14 0%,#0b2d20 100%)!important; border-color:#24764d!important; box-shadow:0 14px 30px rgba(0,0,0,.28)!important; } body.dark #portal .network-column-peima .network-column-header{ border-bottom-color:rgba(72,184,124,.30)!important; } body.dark #portal .network-column-peima .network-column-header :is(h2,small,p){ color:#dff8ea!important; } body.dark #portal .network-column-peima .network-school-card.peima-school-card{ background:linear-gradient(145deg,#0d3525 0%,#113d2b 100%)!important; border:1.5px solid #2c8b5c!important; box-shadow:0 9px 22px rgba(0,0,0,.24)!important; color:#f5fff9!important; } body.dark #portal .network-column-peima .network-school-card.peima-school-card :is(h3,strong,b){ color:#f5fff9!important; } body.dark #portal .network-column-peima .network-school-card.peima-school-card :is(p,small,.network-totals>span){ color:#b7ddc8!important; } body.dark #portal .network-column-peima .network-school-card.peima-school-card .network-open{ color:#ffffff!important; background:#1b8f58!important; border:1px solid #34a96d!important; } body.dark #portal .network-column-peima .network-school-card.peima-school-card:hover, body.dark #portal .network-column-peima .network-school-card.peima-school-card:active{ background:linear-gradient(145deg,#12452f 0%,#164d35 100%)!important; border-color:#43af73!important; box-shadow:0 12px 28px rgba(0,0,0,.30)!important; } /* Swipe/slide controls follow organisation colour */ #portal .network-column-pef .network-slide-actions button{ color:#176dc1!important; border-color:#72a8dc!important; background:#f4f9ff!important; } #portal .network-column-peima .network-slide-actions button{ color:#17804f!important; border-color:#74be91!important; background:#f2fbf5!important; } body.dark #portal .network-column-pef .network-slide-actions button{ color:#cfe7ff!important; border-color:#2874bd!important; background:#0c2a49!important; } body.dark #portal .network-column-peima .network-slide-actions button{ color:#d5f5e2!important; border-color:#2c8b5c!important; background:#0d3525!important; } /* ========================================================= BIH V42 — FINAL MOBILE PREVIEW + MULTICOLOUR CARDS Approved 04 Sep 2026 ========================================================= */ :root{--v42-light-bg:#f7f9fc;--v42-dark-bg:#0d1014;--v42-dark-panel:#14191f;--v42-dark-panel-2:#181e25} .mobile-final-actions{display:none} /* Dark theme: light-black/charcoal, not blue-filled */ body.dark{background:#0d1014!important;color:#f7f9fb!important} body.dark #portal{background:#0d1014!important} body.dark #portal .app-shell,body.dark #portal .content{background:#0d1014!important} body.dark #portal .topbar,body.dark #portal .sidebar{background:#11161c!important;border-color:#2b333d!important} body.dark #portal :where(.page-heading,.school-banner,.welcome-row,.offline-sync-card,.reference-admin-hero,.detail-list>div,.school-day-summary-panel){color:#f7f9fb} body.dark #portal :where(p,small,.muted,.page-heading p,.section-heading p){color:#b9c2cc!important} /* Professional navigation symbols */ #portal .nav-item>span{border-radius:12px!important;background:rgba(255,255,255,.06)!important} #portal .nav-item[data-view="dashboard"]>span{background:rgba(38,116,255,.14)!important} #portal .nav-item[data-view="schoolClose"]>span,#portal .nav-item[data-view="schoolDaySummary"]>span{background:rgba(245,158,11,.15)!important} #portal .nav-item[data-view="face"]>span{background:rgba(0,174,239,.15)!important} #portal .nav-item[data-view="attendance"]>span{background:rgba(124,58,237,.14)!important} #portal .nav-item[data-view="studentsData"]>span,#portal .nav-item[data-view="adminStudents"]>span{background:rgba(16,185,129,.14)!important} #portal .nav-item[data-view="records"]>span{background:rgba(168,85,247,.14)!important} #portal .nav-item[data-view="cleanliness"]>span{background:rgba(245,158,11,.14)!important} #portal .nav-item[data-view="gps"]>span,#portal .nav-item[data-view="locations"]>span{background:rgba(239,68,68,.14)!important} /* Finger scanner: portrait, fingers-only guide, no mirroring/sideways transform */ .hand-live-frame{aspect-ratio:3/4!important;max-height:560px!important;background:#070a0e!important} .hand-live-frame video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important} .finger-guide{inset:12% 21% 20%!important;border:2px solid rgba(44,143,255,.85)!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(19,102,210,.055),rgba(19,102,210,.015))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 28px rgba(19,102,210,.18)!important} .finger-guide:before,.finger-guide:after{content:"";position:absolute;width:42px;height:42px;border-color:#2f8cff;border-style:solid} .finger-guide:before{left:-2px;top:-2px;border-width:4px 0 0 4px;border-radius:16px 0 0 0} .finger-guide:after{right:-2px;bottom:-2px;border-width:0 4px 4px 0;border-radius:0 0 16px 0} .finger-guide .palm-guide-icon{width:86px!important;height:86px!important;background:rgba(15,108,229,.13)!important;border:1px solid rgba(60,151,255,.35)!important} .finger-guide b{bottom:16px!important;padding:7px 12px!important;border-radius:999px!important;background:rgba(5,12,22,.72)!important;color:#d8ebff!important;font-size:12px!important;letter-spacing:.11em!important} body:not(.dark) .finger-guide b{background:rgba(255,255,255,.88)!important;color:#145fab!important} /* School opening/closing: clean compact professional cards */ .school-day-action-grid{gap:18px!important} .school-day-action-grid .school-close-panel{grid-template-columns:94px minmax(0,1fr)!important;gap:22px!important;padding:24px!important;border-radius:24px!important;min-height:0!important} .school-close-visual{min-height:118px!important;height:118px!important;border-radius:24px!important} .school-close-visual span{width:72px!important;height:72px!important;border-radius:20px!important;padding:15px!important} .school-close-visual span img{width:100%!important;height:100%!important;object-fit:contain!important} .school-close-visual i{width:92px!important;height:92px!important} .school-close-copy h2{font-size:24px!important;margin:4px 0 4px!important} .school-close-copy>p{margin:0 0 12px!important;line-height:1.45!important} .school-close-details{margin:12px 0!important;gap:8px!important} .school-close-details>div{padding:12px!important;border-radius:14px!important} .school-close-button,.school-open-button{min-width:0!important;width:100%!important;min-height:48px!important;border-radius:14px!important} .school-close-note{font-size:11px!important;margin-top:9px!important} .school-open-panel{background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(255,255,255,.02))!important} .school-day-action-grid .school-close-panel:not(.school-open-panel){background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(255,255,255,.02))!important} body.dark .school-open-panel{background:linear-gradient(135deg,#10251e,#14191f)!important} body.dark .school-day-action-grid .school-close-panel:not(.school-open-panel){background:linear-gradient(135deg,#2a2110,#14191f)!important} /* Desktop/tablet cards also get the approved vibrant family */ .school-dashboard-only .top-actions-grid .action-card:nth-child(1){background:linear-gradient(135deg,#2563eb,#3b82f6)!important;border-color:#60a5fa!important;color:#fff!important} .school-dashboard-only .top-actions-grid .action-card:nth-child(2){background:linear-gradient(135deg,#0891b2,#14b8a6)!important;border-color:#22d3ee!important;color:#fff!important} .school-dashboard-only .top-actions-grid .action-card:nth-child(3){background:linear-gradient(135deg,#16a34a,#22c55e)!important;border-color:#4ade80!important;color:#fff!important} .school-dashboard-only .top-actions-grid .action-card:nth-child(4){background:linear-gradient(135deg,#9333ea,#a855f7)!important;border-color:#c084fc!important;color:#fff!important} .school-dashboard-only .top-actions-grid .action-card :is(h3,p,small,b){color:#fff!important} .school-dashboard-only .cleanliness-feature{background:linear-gradient(135deg,#f59e0b,#f97316)!important;border-color:#fbbf24!important;color:#fff!important} .school-dashboard-only .gps-feature{background:linear-gradient(135deg,#ef4444,#f97360)!important;border-color:#fb7185!important;color:#fff!important} .school-dashboard-only .school-close-feature{background:linear-gradient(135deg,#fb923c,#f97316)!important;border-color:#fdba74!important;color:#fff!important} .school-dashboard-only .feature-card :is(h2,p,small,strong,b,span){color:#fff!important} /* Mobile approved composition */ @media(max-width:720px){ #portal .content{padding:16px 14px 92px!important} #portal .bih-signature-bar{min-height:112px!important;padding:16px 18px!important} #portal .bih-signature-copy strong{font-size:22px!important;letter-spacing:.035em!important} #portal .bih-signature-copy span{font-size:9px!important} #portal .bih-signature-copy small{font-size:11px!important} .school-dashboard-only .offline-sync-card[data-mode="online"]{display:none!important} .school-dashboard-only .offline-sync-card{border-radius:18px!important;padding:12px!important;margin-bottom:12px!important} .school-dashboard-only .welcome-row{display:none!important} .school-dashboard-only .school-banner{border-radius:20px!important;padding:16px!important;margin:0 0 14px!important} .school-dashboard-only .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0 0 14px!important} .school-dashboard-only .metric-card{min-height:112px!important;padding:12px 8px!important;border-radius:18px!important;display:block!important;text-align:center!important} .school-dashboard-only .metric-card .metric-icon{width:42px!important;height:42px!important;margin:0 auto 7px!important} .school-dashboard-only .metric-card strong{font-size:26px!important} .school-dashboard-only .metric-card span{font-size:11px!important} .school-dashboard-only .metric-card small{font-size:9px!important} .school-dashboard-only .metric-card em{display:none!important} .school-dashboard-only .metric-card:nth-child(1){display:block!important;background:linear-gradient(145deg,#eaf3ff,#f7fbff)!important;border-color:#8fc2ff!important} .school-dashboard-only .metric-card:nth-child(2){display:block!important;background:linear-gradient(145deg,#f3eaff,#fbf8ff)!important;border-color:#c9a5ff!important} .school-dashboard-only .metric-card:nth-child(3){display:block!important;background:linear-gradient(145deg,#eafbea,#f8fff8)!important;border-color:#9edb9f!important} .school-dashboard-only .metric-card:nth-child(4){display:none!important} body.dark .school-dashboard-only .metric-card:nth-child(1){background:linear-gradient(145deg,#0b2e5c,#111a24)!important;border-color:#2176d8!important} body.dark .school-dashboard-only .metric-card:nth-child(2){background:linear-gradient(145deg,#35175f,#17131f)!important;border-color:#7c3aed!important} body.dark .school-dashboard-only .metric-card:nth-child(3){background:linear-gradient(145deg,#0d4a29,#121a16)!important;border-color:#1e9b54!important} .school-dashboard-only .school-banner+ .metric-grid{} .mobile-final-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 16px} .mobile-final-card{min-width:0;min-height:116px;border:1px solid transparent;border-radius:18px;padding:14px 12px;display:grid;grid-template-columns:48px minmax(0,1fr) 16px;align-items:center;gap:9px;text-align:left;color:#fff;font:inherit;cursor:pointer;box-shadow:0 10px 22px rgba(15,23,42,.10);position:relative;overflow:hidden} .mobile-final-card:after{content:"";position:absolute;width:92px;height:92px;border-radius:50%;right:-35px;bottom:-45px;background:rgba(255,255,255,.08)} .mobile-final-card>span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22)} .mobile-final-card img{width:27px;height:27px;filter:brightness(0) invert(1)!important} .mobile-final-card strong{display:block;font-size:14px;line-height:1.15;color:#fff!important} .mobile-final-card small{display:block;font-size:10px;line-height:1.35;margin-top:5px;color:rgba(255,255,255,.9)!important} .mobile-final-card>b{font-size:26px;font-weight:400;color:#fff!important;z-index:2} .mobile-final-card.c-blue{background:linear-gradient(135deg,#2563eb,#3b82f6)} .mobile-final-card.c-cyan{background:linear-gradient(135deg,#0891b2,#14b8a6)} .mobile-final-card.c-green{background:linear-gradient(135deg,#16a34a,#22c55e)} .mobile-final-card.c-purple{background:linear-gradient(135deg,#9333ea,#a855f7)} .mobile-final-card.c-yellow{background:linear-gradient(135deg,#f59e0b,#f97316)} .mobile-final-card.c-red{background:linear-gradient(135deg,#ef4444,#f43f5e)} .mobile-final-card.c-orange{background:linear-gradient(135deg,#f97316,#ea580c)} .mobile-final-card.c-sky{background:linear-gradient(135deg,#0284c7,#06b6d4)} .mobile-final-card.c-violet{background:linear-gradient(135deg,#6d28d9,#8b5cf6)} .mobile-final-card.c-skin{background:linear-gradient(135deg,#e7a676,#c97b55)} body.dark .mobile-final-card{box-shadow:0 9px 22px rgba(0,0,0,.26);border-color:rgba(255,255,255,.13)} body.dark .mobile-final-card.c-blue{background:linear-gradient(135deg,#093e9b,#0b62d0)} body.dark .mobile-final-card.c-cyan{background:linear-gradient(135deg,#075b6e,#0b8a82)} body.dark .mobile-final-card.c-green{background:linear-gradient(135deg,#0b5b2a,#0d8b3f)} body.dark .mobile-final-card.c-purple{background:linear-gradient(135deg,#51159a,#7928bd)} body.dark .mobile-final-card.c-yellow{background:linear-gradient(135deg,#a45c00,#cf7200)} body.dark .mobile-final-card.c-red{background:linear-gradient(135deg,#991b1b,#c81e36)} body.dark .mobile-final-card.c-orange{background:linear-gradient(135deg,#9a3f0a,#c64d0b)} body.dark .mobile-final-card.c-sky{background:linear-gradient(135deg,#075d83,#077d96)} body.dark .mobile-final-card.c-violet{background:linear-gradient(135deg,#48218e,#6236b4)} body.dark .mobile-final-card.c-skin{background:linear-gradient(135deg,#935d3e,#b36b45)} .school-dashboard-only .core-compliance-heading,.school-dashboard-only .top-actions-grid,.school-dashboard-only>.feature-card{display:none!important} .school-dashboard-only .school-close-feature,.school-dashboard-only .cleanliness-feature,.school-dashboard-only .gps-feature{display:none!important} .school-day-action-grid{grid-template-columns:1fr!important;gap:12px!important} .school-day-action-grid .school-close-panel{grid-template-columns:66px minmax(0,1fr)!important;padding:16px!important;gap:14px!important;border-radius:20px!important} .school-close-visual{height:76px!important;min-height:76px!important;border-radius:18px!important} .school-close-visual span{width:52px!important;height:52px!important;border-radius:15px!important;padding:11px!important} .school-close-visual i{display:none!important} .school-close-copy h2{font-size:18px!important} .school-close-copy>p{font-size:12px!important} .school-close-details{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important} .school-close-details>div{padding:9px 7px!important;border-radius:11px!important} .school-close-details span{font-size:8px!important}.school-close-details strong{font-size:11px!important} .school-close-note{display:none!important} .hand-live-frame{max-height:none!important} } @media(min-width:430px) and (max-width:720px){.mobile-final-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.mobile-final-card{grid-template-columns:1fr;min-height:126px;text-align:center}.mobile-final-card>span{margin:auto}.mobile-final-card>b{position:absolute;right:10px;top:8px}} /* Light mode background is clean white/soft gray, dark mode stays light-black */ body:not(.dark) #portal{background:#f7f9fc!important} body:not(.dark) #portal .content{background:#f7f9fc!important} /* ========================================================= BIH V43 — DESKTOP MOBILE-CARD LEAK FIX Mobile preview cards must never render on desktop. ========================================================= */ @media (min-width:721px){ #portal .mobile-final-actions{display:none!important;} } @media (max-width:720px){ #portal .mobile-final-actions{display:grid!important;} } /* ========================================================= BIH V44 — MOBILE HEADER + ALERTS PAGE CLEANUP Fixes fixed BIH brand/header overlap and oversized Alerts UI. ========================================================= */ @media (max-width:720px){ /* Fixed brand must have one predictable mobile height */ html body #portal{padding-top:86px!important;} html body #portal>.bih-signature-bar{ height:86px!important;min-height:86px!important; grid-template-columns:64px minmax(0,1fr)!important; gap:12px!important;padding:8px 14px!important; } html body #portal .bih-signature-emblem{width:60px!important;height:60px!important;} html body #portal .bih-signature-copy span{font-size:7px!important;letter-spacing:.12em!important;line-height:1.1!important;} html body #portal .bih-signature-copy strong{font-size:18px!important;line-height:1.02!important;letter-spacing:.035em!important;} html body #portal .bih-signature-copy small{display:none!important;} html body #portal .sidebar{top:86px!important;} /* Top controls sit below the fixed BIH brand, never underneath it */ html body #portal .topbar{ position:sticky!important;top:86px!important;z-index:40!important; height:60px!important;min-height:60px!important; padding:7px 12px!important;gap:8px!important; background:rgba(247,249,252,.97)!important; backdrop-filter:blur(16px)!important; box-shadow:0 1px 0 rgba(15,23,42,.08)!important; } html body.dark #portal .topbar{background:rgba(10,15,21,.97)!important;} #portal .topbar-leading{display:flex!important;align-items:center!important;gap:6px!important;min-width:48px!important;} #portal .top-actions{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important;} #portal .topbar .icon-button{width:42px!important;height:42px!important;border-radius:13px!important;} #portal .view-back-button{width:auto!important;min-width:74px!important;padding:0 12px!important;display:flex!important;gap:7px!important;align-items:center!important;justify-content:center!important;} #portal .view-back-button.is-hidden{display:none!important;} #portal .sync-status-pill{height:40px!important;padding:0 10px!important;border-radius:12px!important;max-width:94px!important;} #portal .sync-status-pill span{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} #portal .profile-chip{width:42px!important;height:42px!important;padding:4px!important;border-radius:13px!important;} #portal .profile-chip>span{width:32px!important;height:32px!important;border-radius:10px!important;} #portal .profile-chip>div{display:none!important;} /* Alerts becomes a compact professional mobile page */ #portal #alerts{padding-top:4px!important;} #portal #alerts .page-heading{ margin:0 0 14px!important;padding:18px!important; border:1px solid var(--border)!important;border-radius:20px!important; background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(255,255,255,.02))!important; } body.dark #portal #alerts .page-heading{background:linear-gradient(135deg,#211b0d,#111820)!important;} #portal #alerts .page-heading .eyebrow{font-size:9px!important;letter-spacing:.16em!important;} #portal #alerts .page-heading h1{font-size:30px!important;line-height:1.05!important;margin:6px 0 4px!important;} #portal #alerts .page-heading p{font-size:13px!important;line-height:1.4!important;margin:0!important;} #portal #alerts .alert-list{padding:14px!important;border-radius:20px!important;min-height:0!important;} #portal #alerts .alert-list article{ min-height:0!important;padding:15px!important;border-radius:16px!important; display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:12px!important;align-items:center!important; } #portal #alerts .alert-icon{width:44px!important;height:44px!important;border-radius:13px!important;font-size:18px!important;} #portal #alerts .alert-list h3{font-size:17px!important;line-height:1.2!important;margin:0 0 4px!important;} #portal #alerts .alert-list p{font-size:12px!important;line-height:1.45!important;margin:0!important;} /* Remove the hamburger from mobile; dashboard cards are the primary navigation. */ #portal #menuButton{display:none!important;} } /* ========================================================= BIH V45 — FINAL FOUR-LOGIN VISUAL SYSTEM Approved direction: dark = black, light = warm cream. Same colourful card language for Admin, CMO, PEF and PEIMA. ========================================================= */ :root{ --v45-cream:#fff7ea; --v45-cream-2:#f8efe2; --v45-black:#07090d; --v45-black-2:#0d1117; --v45-line-dark:#28303a; --v45-line-light:#e8dac8; } /* Global backgrounds */ body:not(.dark),body:not(.dark) #portal,body:not(.dark) #portal .app-shell,body:not(.dark) #portal .content{ background:linear-gradient(180deg,var(--v45-cream),var(--v45-cream-2))!important; } body.dark,body.dark #portal,body.dark #portal .app-shell,body.dark #portal .content{ background:linear-gradient(180deg,#05070a,var(--v45-black) 52%,#090c11)!important; } body:not(.dark) #portal .topbar,body:not(.dark) #portal .sidebar{ background:rgba(255,249,239,.97)!important;border-color:var(--v45-line-light)!important; } body.dark #portal .topbar,body.dark #portal .sidebar{ background:rgba(8,11,15,.97)!important;border-color:var(--v45-line-dark)!important; } /* Role signature accents */ body.admin-mode{--role:#f6b91b;--role-rgb:246,185,27} body.cmo-mode{--role:#13c7c7;--role-rgb:19,199,199} body.pef-mode{--role:#2083ff;--role-rgb:32,131,255} body.peima-mode{--role:#26c75a;--role-rgb:38,199,90} body:not(.dark).admin-mode .bih-signature-bar,body:not(.dark).cmo-mode .bih-signature-bar,body:not(.dark).pef-mode .bih-signature-bar,body:not(.dark).peima-mode .bih-signature-bar{ background:linear-gradient(115deg,#fffaf0 0%,#fff5e8 62%,rgba(var(--role-rgb),.10))!important; border-bottom-color:rgba(var(--role-rgb),.45)!important; } body.dark.admin-mode .bih-signature-bar,body.dark.cmo-mode .bih-signature-bar,body.dark.pef-mode .bih-signature-bar,body.dark.peima-mode .bih-signature-bar{ background:linear-gradient(115deg,#07090d 0%,#0a0e14 68%,rgba(var(--role-rgb),.14))!important; border-bottom-color:rgba(var(--role-rgb),.55)!important; } body .bih-signature-copy span{color:var(--role)!important} body .top-label,body .eyebrow{color:var(--role)!important} /* Main dashboard panels */ body:not(.dark) :where(.reference-admin-hero,.school-banner,.panel,.metric-card,.admin-stat-card,.reference-action,.offline-sync-card,.record-summary){ background:rgba(255,252,246,.94)!important;border-color:#eadac7!important;box-shadow:0 10px 24px rgba(105,78,44,.07)!important; } body.dark :where(.reference-admin-hero,.school-banner,.panel,.metric-card,.admin-stat-card,.reference-action,.offline-sync-card,.record-summary){ background:#0d1117!important;border-color:#2a323c!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important; } /* Bright professional colour family used across all four dashboards */ .reference-admin-actions .reference-action:nth-child(1),.school-dashboard-only .mobile-final-card:nth-child(1){background:linear-gradient(135deg,#1267f3,#2d8cff)!important;border-color:#55a4ff!important} .reference-admin-actions .reference-action:nth-child(2),.school-dashboard-only .mobile-final-card:nth-child(2){background:linear-gradient(135deg,#0797a7,#19c3c3)!important;border-color:#3dd9d7!important} .reference-admin-actions .reference-action:nth-child(3),.school-dashboard-only .mobile-final-card:nth-child(3){background:linear-gradient(135deg,#11953f,#26c75a)!important;border-color:#55da7d!important} .reference-admin-actions .reference-action:nth-child(4),.school-dashboard-only .mobile-final-card:nth-child(4){background:linear-gradient(135deg,#7b24c8,#a44de0)!important;border-color:#c07bed!important} .reference-admin-actions .reference-action:nth-child(5),.school-dashboard-only .mobile-final-card:nth-child(5){background:linear-gradient(135deg,#e18b00,#ffad13)!important;border-color:#ffc44c!important} .reference-admin-actions .reference-action:nth-child(6),.school-dashboard-only .mobile-final-card:nth-child(6){background:linear-gradient(135deg,#dc2626,#f04444)!important;border-color:#ff6a6a!important} .reference-admin-actions .reference-action:nth-child(7),.school-dashboard-only .mobile-final-card:nth-child(7){background:linear-gradient(135deg,#eb650b,#f48324)!important;border-color:#ffa258!important} .reference-admin-actions .reference-action:nth-child(8),.school-dashboard-only .mobile-final-card:nth-child(8){background:linear-gradient(135deg,#0476a8,#16a9c4)!important;border-color:#48c8dc!important} .reference-admin-actions .reference-action:nth-child(9),.school-dashboard-only .mobile-final-card:nth-child(9){background:linear-gradient(135deg,#5b24b6,#7c42d6)!important;border-color:#9d74eb!important} .reference-admin-actions .reference-action:nth-child(10),.school-dashboard-only .mobile-final-card:nth-child(10){background:linear-gradient(135deg,#b56e44,#d08b62)!important;border-color:#e7aa85!important} .reference-admin-actions .reference-action :is(strong,small,b),body.dark .reference-admin-actions .reference-action :is(strong,small,b){color:#fff!important} .reference-admin-actions .reference-action>span{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.24)!important} .reference-admin-actions .reference-action img{filter:brightness(0) invert(1)!important} /* Admin: black/gold identity, with multicolour function cards */ .admin-mode .reference-admin-hero{border-color:rgba(246,185,27,.50)!important;background:linear-gradient(135deg,rgba(246,185,27,.11),rgba(255,255,255,.02))!important} .dark.admin-mode .reference-admin-hero{background:linear-gradient(135deg,#221a08,#0d1117 62%)!important} .admin-mode .primary-button{background:linear-gradient(135deg,#d89a00,#f6b91b)!important;color:#171006!important} /* CMO: teal identity */ .cmo-mode .reference-admin-hero{border-color:rgba(19,199,199,.50)!important;background:linear-gradient(135deg,rgba(19,199,199,.12),rgba(255,255,255,.02))!important} .dark.cmo-mode .reference-admin-hero{background:linear-gradient(135deg,#073334,#0d1117 62%)!important} .cmo-mode .primary-button{background:linear-gradient(135deg,#0797a7,#18c8c5)!important} /* PEF / PEIMA school account identity */ .pef-mode .school-banner{border-color:rgba(32,131,255,.52)!important;background:linear-gradient(135deg,rgba(32,131,255,.13),rgba(255,255,255,.02))!important} .peima-mode .school-banner{border-color:rgba(38,199,90,.52)!important;background:linear-gradient(135deg,rgba(38,199,90,.13),rgba(255,255,255,.02))!important} .dark.pef-mode .school-banner{background:linear-gradient(135deg,#092247,#0d1117 65%)!important} .dark.peima-mode .school-banner{background:linear-gradient(135deg,#0a3820,#0d1117 65%)!important} /* Light theme metric cards: soft coloured cream-friendly surfaces */ body:not(.dark) .reference-stat-grid .admin-stat-card:nth-child(1),body:not(.dark) .school-dashboard-only .metric-card:nth-child(1){background:linear-gradient(145deg,#e8f2ff,#fffaf2)!important;border-color:#9cc8ff!important} body:not(.dark) .reference-stat-grid .admin-stat-card:nth-child(2),body:not(.dark) .school-dashboard-only .metric-card:nth-child(2){background:linear-gradient(145deg,#f3e8ff,#fffaf2)!important;border-color:#d0a8f4!important} body:not(.dark) .reference-stat-grid .admin-stat-card:nth-child(3),body:not(.dark) .school-dashboard-only .metric-card:nth-child(3){background:linear-gradient(145deg,#e8f9e9,#fffaf2)!important;border-color:#a9d9ae!important} body:not(.dark) .reference-stat-grid .admin-stat-card:nth-child(4){background:linear-gradient(145deg,#fff0e1,#fffaf2)!important;border-color:#f3bf8d!important} body:not(.dark) .reference-stat-grid .admin-stat-card:nth-child(5){background:linear-gradient(145deg,#e5f8f7,#fffaf2)!important;border-color:#9bdad5!important} /* Dark metric cards stay black-led with coloured glow, never blue page background */ body.dark .reference-stat-grid .admin-stat-card:nth-child(1),body.dark .school-dashboard-only .metric-card:nth-child(1){background:linear-gradient(145deg,#0b2c58,#0d1117)!important;border-color:#1c65ba!important} body.dark .reference-stat-grid .admin-stat-card:nth-child(2),body.dark .school-dashboard-only .metric-card:nth-child(2){background:linear-gradient(145deg,#341754,#0d1117)!important;border-color:#7439a8!important} body.dark .reference-stat-grid .admin-stat-card:nth-child(3),body.dark .school-dashboard-only .metric-card:nth-child(3){background:linear-gradient(145deg,#0b3b21,#0d1117)!important;border-color:#227347!important} body.dark .reference-stat-grid .admin-stat-card:nth-child(4){background:linear-gradient(145deg,#4a2b0d,#0d1117)!important;border-color:#9e641d!important} body.dark .reference-stat-grid .admin-stat-card:nth-child(5){background:linear-gradient(145deg,#07383d,#0d1117)!important;border-color:#147984!important} /* Mobile: no side/hamburger menu. Dashboard cards are navigation for every role. */ @media(max-width:720px){ #portal #menuButton,#portal .sidebar{display:none!important} #portal .app-shell{margin-left:0!important;width:100%!important} #portal .content{padding-left:14px!important;padding-right:14px!important} body:not(.dark) #portal .topbar{background:rgba(255,247,234,.97)!important} body.dark #portal .topbar{background:rgba(7,9,13,.97)!important} .reference-admin-dashboard .reference-admin-hero{border-radius:20px!important;padding:18px!important;margin-bottom:12px!important} .reference-admin-dashboard .reference-admin-hero h1{font-size:24px!important} .reference-admin-dashboard .reference-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} .reference-admin-dashboard .admin-stat-card{min-height:112px!important;padding:12px 8px!important;border-radius:18px!important;text-align:center!important} .reference-admin-dashboard .admin-stat-card .stat-icon-shell{width:42px!important;height:42px!important;margin:0 auto 6px!important} .reference-admin-dashboard .admin-stat-card strong{font-size:23px!important} .reference-admin-dashboard .admin-stat-card small{font-size:9px!important} .reference-admin-dashboard .admin-stat-card b{font-size:8px!important} .reference-admin-dashboard .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} .reference-admin-dashboard .reference-action{min-height:116px!important;border-radius:18px!important;padding:14px 12px!important;grid-template-columns:46px minmax(0,1fr) 14px!important;gap:9px!important;box-shadow:0 10px 22px rgba(0,0,0,.12)!important} .reference-admin-dashboard .reference-action>span{width:46px!important;height:46px!important;border-radius:50%!important} .reference-admin-dashboard .reference-action img{width:27px!important;height:27px!important} .reference-admin-dashboard .reference-action strong{font-size:14px!important;line-height:1.15!important} .reference-admin-dashboard .reference-action small{font-size:10px!important;line-height:1.35!important;margin-top:5px!important} .reference-actions-heading{margin:16px 0 10px!important} .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* Desktop: clean card-first layout, side navigation retained for fast admin work. */ @media(min-width:721px){ .reference-admin-dashboard .reference-admin-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important} .reference-admin-dashboard .reference-action{min-height:126px!important;border-radius:20px!important} } /* ========================================================================== */ /* V52 PRO DASHBOARD POLISH — variation-4 inspired, professional laptop/mobile */ /* ========================================================================== */ /* Keep login screens unchanged; polish only the portal dashboards/cards/icons. */ #portal .mobile-final-actions{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0 22px} #portal .mobile-final-card{ min-height:148px!important; padding:16px 14px!important; border-radius:22px!important; border:1px solid rgba(255,255,255,.16)!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 1fr auto!important; justify-items:start!important; align-items:start!important; gap:12px!important; box-shadow:0 16px 34px rgba(10,22,40,.12)!important; overflow:hidden!important; } #portal .mobile-final-card:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,0) 38%);pointer-events:none} #portal .mobile-final-card:after{width:116px!important;height:116px!important;right:-34px!important;bottom:-46px!important;background:rgba(255,255,255,.12)!important} #portal .mobile-final-card>span{ width:58px!important;height:58px!important;border-radius:18px!important; background:rgba(255,255,255,.17)!important;border:1px solid rgba(255,255,255,.24)!important; box-shadow:inset 0 1px rgba(255,255,255,.20),0 10px 18px rgba(0,0,0,.12)!important; } #portal .mobile-final-card img{width:35px!important;height:35px!important;filter:brightness(0) invert(1)!important} #portal .mobile-final-card div{width:100%} #portal .mobile-final-card strong{font-size:15px!important;letter-spacing:.01em!important} #portal .mobile-final-card small{font-size:11px!important;line-height:1.45!important;color:rgba(255,255,255,.93)!important} #portal .mobile-final-card>b{justify-self:end!important;font-size:22px!important;line-height:1!important;opacity:.92!important} #portal .reference-admin-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;margin-top:14px} #portal .reference-action{ min-height:148px!important; padding:18px 16px!important; border-radius:20px!important; border:1px solid rgba(6,31,57,.08)!important; display:grid!important; grid-template-columns:1fr auto!important; grid-template-rows:auto 1fr auto!important; gap:10px 8px!important; align-items:start!important; box-shadow:0 14px 30px rgba(10,28,50,.08)!important; position:relative!important; overflow:hidden!important; } #portal .reference-action:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,0) 42%);pointer-events:none} #portal .reference-action>span{ grid-column:1;grid-row:1; width:64px!important;height:64px!important;padding:12px!important;border-radius:18px!important; background:rgba(255,255,255,.24)!important; border:1px solid rgba(255,255,255,.30)!important; box-shadow:inset 0 1px rgba(255,255,255,.4),0 12px 20px rgba(10,28,50,.10)!important; } #portal .reference-action img{width:100%!important;height:100%!important;object-fit:contain!important} #portal .reference-action>div{grid-column:1 / span 2;grid-row:2;align-self:start} #portal .reference-action strong{font-size:15px!important;line-height:1.18!important;color:#fff!important} #portal .reference-action small{font-size:11px!important;line-height:1.45!important;color:rgba(255,255,255,.92)!important} #portal .reference-action>b{grid-column:2;grid-row:1;align-self:start;justify-self:end;font-size:22px!important;color:rgba(255,255,255,.95)!important} #portal .action-students{background:linear-gradient(135deg,#2062ee,#4b6fff)!important;color:#fff!important} #portal .action-staff{background:linear-gradient(135deg,#00a665,#19c67d)!important;color:#fff!important} #portal .action-clean{background:linear-gradient(135deg,#7a3df2,#a357ff)!important;color:#fff!important} #portal .action-register{background:linear-gradient(135deg,#f09a10,#f3b327)!important;color:#fff!important} #portal .action-location{background:linear-gradient(135deg,#d53c6d,#f04f92)!important;color:#fff!important} #portal .action-school-day{background:linear-gradient(135deg,#0d8cc9,#17b0ea)!important;color:#fff!important} body.dark #portal .reference-action{border-color:rgba(106,154,202,.16)!important;box-shadow:0 16px 34px rgba(0,0,0,.20)!important} #portal .reference-stat-grid{gap:14px!important} #portal .reference-stat-grid .admin-stat-card{ min-height:138px!important;border-radius:20px!important;padding:18px!important; grid-template-columns:62px minmax(0,1fr)!important;column-gap:14px!important; box-shadow:0 16px 30px rgba(16,48,78,.09)!important; } #portal .reference-stat-grid .admin-stat-card>span{width:62px!important;height:62px!important;border-radius:18px!important;padding:11px!important;box-shadow:inset 0 1px rgba(255,255,255,.32),0 10px 20px rgba(0,0,0,.10)!important} #portal .reference-stat-grid .admin-stat-card>strong{font-size:34px!important} #portal .reference-stat-grid .admin-stat-card>small{font-size:12px!important;font-weight:800!important} #portal .reference-stat-grid .admin-stat-card>b{font-size:11px!important;font-weight:800!important} body:not(.dark) #portal .reference-stat-grid .stat-schools{background:linear-gradient(145deg,#fff4ce,#fffdf3)!important;border-color:#f1d38f!important} body:not(.dark) #portal .reference-stat-grid .stat-pef{background:linear-gradient(145deg,#dcedff,#ffffff)!important;border-color:#bad7fb!important} body:not(.dark) #portal .reference-stat-grid .stat-peima{background:linear-gradient(145deg,#dcf7e9,#ffffff)!important;border-color:#b8e7cf!important} body:not(.dark) #portal .reference-stat-grid .stat-students{background:linear-gradient(145deg,#f1e5ff,#ffffff)!important;border-color:#d6c4f6!important} body:not(.dark) #portal .reference-stat-grid .stat-teachers{background:linear-gradient(145deg,#ffe5ee,#ffffff)!important;border-color:#f2c1d1!important} #portal .action-grid.top-actions-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:15px!important} #portal .top-actions-grid .action-card{ min-height:188px!important;border-radius:22px!important;padding:22px 18px!important; box-shadow:0 16px 32px rgba(16,48,78,.08)!important;overflow:hidden!important;position:relative!important } #portal .top-actions-grid .action-card:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,0) 42%);pointer-events:none} #portal .top-actions-grid .action-icon{width:58px!important;height:58px!important;margin-bottom:16px!important;border-radius:18px!important;padding:10px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 10px 18px rgba(10,28,50,.10)!important} #portal .top-actions-grid .action-icon img{width:100%!important;height:100%!important;object-fit:contain!important} #portal .top-actions-grid .action-card h3{font-size:20px!important} #portal .top-actions-grid .action-card p{font-size:12px!important;line-height:1.5!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(1){background:linear-gradient(145deg,#e8f1ff,#ffffff)!important;border-color:#c8daf4!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(2){background:linear-gradient(145deg,#eaf9f3,#ffffff)!important;border-color:#cbe7da!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(3){background:linear-gradient(145deg,#f1ebff,#ffffff)!important;border-color:#ddd2fb!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(4){background:linear-gradient(145deg,#fff2df,#ffffff)!important;border-color:#f0d9b3!important} body.dark #portal .top-actions-grid .action-card:nth-child(1){background:linear-gradient(145deg,#0b2444,#0f1b29)!important;border-color:#1f4e86!important} body.dark #portal .top-actions-grid .action-card:nth-child(2){background:linear-gradient(145deg,#0b3125,#0f1b18)!important;border-color:#1e6d4c!important} body.dark #portal .top-actions-grid .action-card:nth-child(3){background:linear-gradient(145deg,#281343,#0f1725)!important;border-color:#6d37be!important} body.dark #portal .top-actions-grid .action-card:nth-child(4){background:linear-gradient(145deg,#3c2407,#111a24)!important;border-color:#a66c14!important} #portal .feature-card{border-radius:24px!important;padding:24px 24px!important;box-shadow:0 16px 34px rgba(16,48,78,.08)!important} #portal .feature-card .feature-icon{width:56px!important;height:56px!important;border-radius:18px!important;padding:10px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 10px 18px rgba(10,28,50,.10)!important} #portal .feature-card .feature-icon img{width:100%!important;height:100%!important;object-fit:contain!important} body:not(.dark) #portal .cleanliness-feature{background:linear-gradient(135deg,#eef9f3,#ffffff)!important;border-color:#cbe6d6!important} body:not(.dark) #portal .gps-feature{background:linear-gradient(135deg,#eef4ff,#ffffff)!important;border-color:#d1dcf4!important} body:not(.dark) #portal .school-close-feature{background:linear-gradient(135deg,#fff4e7,#ffffff)!important;border-color:#f0dcc1!important} body.dark #portal .cleanliness-feature{background:linear-gradient(135deg,#0b3024,#0d1a18)!important;border-color:#225f48!important} body.dark #portal .gps-feature{background:linear-gradient(135deg,#102845,#0d1a29)!important;border-color:#2a5484!important} body.dark #portal .school-close-feature{background:linear-gradient(135deg,#34240a,#101926)!important;border-color:#7f5a18!important} #portal .mobile-nav{height:76px!important;box-shadow:0 -8px 28px rgba(8,18,34,.10)!important} #portal .mobile-nav button span{width:32px;height:32px;display:grid;place-items:center} #portal .mobile-nav button span img{width:24px;height:24px;object-fit:contain} #portal .mobile-nav .mobile-main span{width:54px!important;height:54px!important;border-radius:18px!important;background:linear-gradient(135deg,#148b5b,#0d67b1)!important;border:3px solid #f0bf4b!important;box-shadow:0 10px 24px rgba(0,0,0,.18)!important} @media(max-width:1280px){ #portal .mobile-final-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important} #portal .reference-admin-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important} #portal .action-grid.top-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:900px){ #portal .mobile-final-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important} #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:760px){ #portal .mobile-final-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} #portal .mobile-final-card{min-height:124px!important;padding:14px 12px!important;border-radius:18px!important} #portal .mobile-final-card>span{width:50px!important;height:50px!important;border-radius:15px!important} #portal .mobile-final-card img{width:30px!important;height:30px!important} #portal .mobile-final-card strong{font-size:13px!important} #portal .mobile-final-card small{font-size:10px!important} #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} #portal .reference-action{min-height:134px!important;padding:15px 13px!important;border-radius:18px!important} #portal .reference-action>span{width:54px!important;height:54px!important;padding:10px!important;border-radius:16px!important} #portal .reference-action strong{font-size:13px!important} #portal .reference-action small{font-size:10px!important} #portal .reference-stat-grid .admin-stat-card{min-height:126px!important;padding:15px!important;grid-template-columns:56px minmax(0,1fr)!important} #portal .reference-stat-grid .admin-stat-card>span{width:56px!important;height:56px!important} #portal .action-grid.top-actions-grid{grid-template-columns:1fr!important} } @media(max-width:480px){ #portal .reference-admin-actions{grid-template-columns:1fr!important} } /* ========================================================================== */ /* V54 PROFESSIONAL CARD + SYMBOL SYSTEM */ /* Restrained colours, transparent symbols, card-aware sizing, no icon boxes. */ /* ========================================================================== */ /* Symbols are free-standing artwork — no surrounding white/grey boxes. */ html body #portal :is(.nav-item span,.metric-icon,.action-icon,.feature-icon,.reference-action>span,.mobile-final-card>span,.mobile-nav button span,.school-icon,.stat-icon-shell:not(.logo-shell)){ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; border-radius:0!important; overflow:visible!important; } /* Preserve official PEF/PEIMA marks without altering their artwork. */ html body #portal .stat-icon-shell.logo-shell{box-shadow:none!important;border:0!important} /* Use the multi-colour SVG artwork as supplied; never turn it white/monochrome. */ html body #portal :is(.nav-item,.metric-icon,.action-icon,.feature-icon,.reference-action,.mobile-final-card,.mobile-nav,.stat-icon-shell) img[src*="-icon.svg"]{ filter:drop-shadow(0 5px 6px rgba(0,0,0,.22))!important; opacity:1!important; object-fit:contain!important; transform:none!important; } /* Sidebar: compact symbols balanced against text. */ html body #portal .nav-item{min-height:49px!important;gap:13px!important;padding:9px 14px!important} html body #portal .nav-item span{width:30px!important;height:30px!important;flex:0 0 30px!important;display:grid!important;place-items:center!important} html body #portal .nav-item span img{width:27px!important;height:27px!important} html body #portal .nav-item.active{border-left:3px solid var(--role)!important;background:linear-gradient(90deg,rgba(var(--role-rgb),.18),rgba(var(--role-rgb),.035))!important} /* Metric/stat artwork sizing. */ html body #portal .metric-icon{width:46px!important;height:46px!important;display:grid!important;place-items:center!important} html body #portal .metric-icon img{width:39px!important;height:39px!important} html body #portal .reference-stat-grid .stat-icon-shell:not(.logo-shell){width:58px!important;height:58px!important;display:grid!important;place-items:center!important} html body #portal .reference-stat-grid .stat-icon-shell:not(.logo-shell) img{width:50px!important;height:50px!important} /* Today’s Required Action — professional, distinct, restrained colours. */ html body #portal .reference-admin-actions{gap:16px!important} html body #portal .reference-admin-actions .reference-action{ min-height:156px!important; padding:19px 20px!important; border-radius:20px!important; border:1px solid rgba(255,255,255,.10)!important; box-shadow:0 15px 30px rgba(0,0,0,.20)!important; grid-template-columns:64px minmax(0,1fr) 22px!important; grid-template-rows:64px auto!important; column-gap:14px!important; row-gap:10px!important; align-items:center!important; overflow:hidden!important; } html body #portal .reference-admin-actions .reference-action:before{ content:""!important;position:absolute!important;inset:0!important; background:linear-gradient(145deg,rgba(255,255,255,.10),transparent 36%,rgba(255,255,255,.018))!important; pointer-events:none!important } html body #portal .reference-admin-actions .reference-action>span{ width:64px!important;height:64px!important;grid-column:1!important;grid-row:1!important; display:grid!important;place-items:center!important } html body #portal .reference-admin-actions .reference-action>span img{width:56px!important;height:56px!important} html body #portal .reference-admin-actions .reference-action>div{grid-column:1 / span 2!important;grid-row:2!important;align-self:start!important} html body #portal .reference-admin-actions .reference-action>b{grid-column:3!important;grid-row:1!important;align-self:center!important;color:#fff!important;font-size:28px!important} html body #portal .reference-admin-actions .reference-action strong{font-size:16px!important;line-height:1.2!important;color:#fff!important;letter-spacing:.01em!important} html body #portal .reference-admin-actions .reference-action small{font-size:11px!important;line-height:1.45!important;color:rgba(255,255,255,.86)!important;margin-top:5px!important} html body #portal .reference-admin-actions .reference-action:nth-child(1){background:linear-gradient(135deg,#183e64,#102a45)!important;border-color:#315b82!important} html body #portal .reference-admin-actions .reference-action:nth-child(2){background:linear-gradient(135deg,#15513f,#0e392e)!important;border-color:#2e735c!important} html body #portal .reference-admin-actions .reference-action:nth-child(3){background:linear-gradient(135deg,#55385f,#36283f)!important;border-color:#76547f!important} html body #portal .reference-admin-actions .reference-action:nth-child(4){background:linear-gradient(135deg,#704a1f,#3d2e1c)!important;border-color:#966932!important} html body #portal .reference-admin-actions .reference-action:nth-child(5){background:linear-gradient(135deg,#6a3044,#3b202b)!important;border-color:#8e4c61!important} html body #portal .reference-admin-actions .reference-action:nth-child(6){background:linear-gradient(135deg,#17566d,#123746)!important;border-color:#2e7188!important} /* Card-specific symbol sizing — larger visual icons get slightly less size to stay balanced. */ html body #portal .reference-action img[src*="students-icon"]{width:58px!important;height:58px!important} html body #portal .reference-action img[src*="teachers-icon"]{width:54px!important;height:54px!important} html body #portal .reference-action img[src*="cleanliness-icon"]{width:59px!important;height:59px!important} html body #portal .reference-action img[src*="register-photo-icon"]{width:57px!important;height:57px!important} html body #portal .reference-action img[src*="location-icon"]{width:55px!important;height:55px!important} html body #portal .reference-action img[src*="school-icon"]{width:58px!important;height:58px!important} html body #portal .reference-action img[src*="face-scan-icon"]{width:57px!important;height:57px!important} html body #portal .reference-action img[src*="live-location-icon"]{width:55px!important;height:55px!important} /* School quick-action cards — same premium family, not rainbow/neon. */ html body #portal .school-dashboard-only .mobile-final-actions{gap:14px!important} html body #portal .school-dashboard-only .mobile-final-card{ min-height:150px!important;padding:17px 16px!important;border-radius:20px!important; border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 14px 28px rgba(0,0,0,.17)!important; grid-template-columns:62px minmax(0,1fr) 20px!important;grid-template-rows:64px auto!important;column-gap:13px!important;row-gap:9px!important; } html body #portal .school-dashboard-only .mobile-final-card>span{width:62px!important;height:62px!important;display:grid!important;place-items:center!important} html body #portal .school-dashboard-only .mobile-final-card>span img{width:54px!important;height:54px!important} html body #portal .school-dashboard-only .mobile-final-card>div{grid-column:1 / span 2!important;grid-row:2!important} html body #portal .school-dashboard-only .mobile-final-card>b{grid-column:3!important;grid-row:1!important;align-self:center!important;color:#fff!important} html body #portal .school-dashboard-only .mobile-final-card strong{font-size:15px!important;color:#fff!important} html body #portal .school-dashboard-only .mobile-final-card small{font-size:10.5px!important;line-height:1.45!important;color:rgba(255,255,255,.86)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(1){background:linear-gradient(135deg,#183e64,#102a45)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(2){background:linear-gradient(135deg,#15513f,#0e392e)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(3){background:linear-gradient(135deg,#174d5a,#11323c)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(4){background:linear-gradient(135deg,#55385f,#36283f)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(5){background:linear-gradient(135deg,#704a1f,#3d2e1c)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(6){background:linear-gradient(135deg,#6a3044,#3b202b)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(7){background:linear-gradient(135deg,#17566d,#123746)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(8){background:linear-gradient(135deg,#244c78,#172f4c)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(9){background:linear-gradient(135deg,#5b416b,#392a43)!important} /* Main school action cards / feature cards — symbols float naturally, no box. */ html body #portal .top-actions-grid .action-icon{width:58px!important;height:58px!important;display:grid!important;place-items:center!important;margin-bottom:15px!important} html body #portal .top-actions-grid .action-icon img{width:50px!important;height:50px!important} html body #portal .feature-card .feature-icon{width:60px!important;height:60px!important;display:grid!important;place-items:center!important} html body #portal .feature-card .feature-icon img{width:52px!important;height:52px!important} /* Refined card palette for the normal school dashboard. */ body:not(.dark) #portal .top-actions-grid .action-card:nth-child(1){background:linear-gradient(145deg,#edf4fb,#fff)!important;border-color:#cbdcea!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(2){background:linear-gradient(145deg,#edf8f3,#fff)!important;border-color:#cce5d7!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(3){background:linear-gradient(145deg,#f4f0f7,#fff)!important;border-color:#ddd1e3!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(4){background:linear-gradient(145deg,#fbf3e8,#fff)!important;border-color:#ead7bd!important} body.dark #portal .top-actions-grid .action-card:nth-child(1){background:linear-gradient(145deg,#122b44,#0d1722)!important;border-color:#315273!important} body.dark #portal .top-actions-grid .action-card:nth-child(2){background:linear-gradient(145deg,#123226,#0d1714)!important;border-color:#315b48!important} body.dark #portal .top-actions-grid .action-card:nth-child(3){background:linear-gradient(145deg,#2a2031,#11161f)!important;border-color:#5e496b!important} body.dark #portal .top-actions-grid .action-card:nth-child(4){background:linear-gradient(145deg,#352818,#11161f)!important;border-color:#71583a!important} body:not(.dark) #portal .cleanliness-feature{background:linear-gradient(135deg,#eef7f2,#fff)!important;border-color:#cce2d5!important} body:not(.dark) #portal .gps-feature{background:linear-gradient(135deg,#eef3f9,#fff)!important;border-color:#cad8e7!important} body:not(.dark) #portal .school-close-feature{background:linear-gradient(135deg,#f8f1e8,#fff)!important;border-color:#ead8c2!important} body.dark #portal .cleanliness-feature{background:linear-gradient(135deg,#132f25,#0d1714)!important;border-color:#315b48!important} body.dark #portal .gps-feature{background:linear-gradient(135deg,#142a40,#0d1722)!important;border-color:#315273!important} body.dark #portal .school-close-feature{background:linear-gradient(135deg,#342819,#11161f)!important;border-color:#71583a!important} /* Mobile bottom navigation: no icon containers, clear symbols. */ html body #portal .mobile-nav button span{width:28px!important;height:28px!important;display:grid!important;place-items:center!important} html body #portal .mobile-nav button span img{width:24px!important;height:24px!important} html body #portal .mobile-nav .mobile-main span{width:34px!important;height:34px!important;background:transparent!important;border:0!important;box-shadow:none!important;margin-top:0!important} @media(max-width:760px){ html body #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important} html body #portal .reference-admin-actions .reference-action{min-height:130px!important;padding:14px 13px!important;grid-template-columns:52px minmax(0,1fr) 16px!important;grid-template-rows:53px auto!important;column-gap:9px!important;border-radius:17px!important} html body #portal .reference-admin-actions .reference-action>span{width:52px!important;height:52px!important} html body #portal .reference-admin-actions .reference-action>span img{width:46px!important;height:46px!important} html body #portal .reference-admin-actions .reference-action strong{font-size:13.5px!important} html body #portal .reference-admin-actions .reference-action small{font-size:9.5px!important} html body #portal .school-dashboard-only .mobile-final-card{min-height:126px!important;padding:14px 12px!important;grid-template-columns:52px minmax(0,1fr) 16px!important;grid-template-rows:53px auto!important;column-gap:9px!important;border-radius:17px!important} html body #portal .school-dashboard-only .mobile-final-card>span{width:52px!important;height:52px!important} html body #portal .school-dashboard-only .mobile-final-card>span img{width:46px!important;height:46px!important} html body #portal .school-dashboard-only .mobile-final-card strong{font-size:13px!important} html body #portal .school-dashboard-only .mobile-final-card small{font-size:9.5px!important} html body #portal .nav-item span{width:26px!important;height:26px!important;flex-basis:26px!important} html body #portal .nav-item span img{width:23px!important;height:23px!important} } /* ========================================================================== */ /* V55 FINAL LIVE-BASED PROFESSIONAL UI REPAIR */ /* Based on the currently live BIH structure: keep entries/modules same, */ /* improve laptop/mobile view, colourful icons, no icon boxes. */ /* ========================================================================== */ /* 1) Global icon cleanup — no grey/white icon boxes, no forced monochrome. */ html body #portal :is(.nav-item span,.metric-icon,.action-icon,.feature-icon,.reference-action>span,.mobile-final-card>span,.mobile-nav button span,.stat-icon-shell){ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; } html body #portal :is(.nav-item img,.metric-icon img,.action-icon img,.feature-icon img,.reference-action img,.mobile-final-card img,.mobile-nav img,.stat-icon-shell img){ filter:none!important; opacity:1!important; } html body #portal .nav-item{gap:12px!important} html body #portal .nav-item span{width:28px!important;height:28px!important;flex:0 0 28px!important} html body #portal .nav-item img{width:24px!important;height:24px!important;object-fit:contain!important} html body #portal .nav-item.active{ color:#fff!important; background:linear-gradient(90deg,rgba(var(--role-rgb),.22),rgba(var(--role-rgb),.08))!important; border-left:3px solid var(--role)!important; } body:not(.dark) html body #portal .nav-item.active{color:#11283d!important} /* 2) School dashboard cards — picture-like look, professional not childish. */ html body #portal .school-dashboard-only .mobile-final-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; margin:18px 0 20px!important; } html body #portal .school-dashboard-only .mobile-final-card{ min-height:175px!important; padding:22px 20px!important; border-radius:28px!important; border:1px solid rgba(255,255,255,.14)!important; display:grid!important; grid-template-columns:72px minmax(0,1fr) 18px!important; grid-template-rows:72px auto!important; align-items:start!important; column-gap:14px!important; row-gap:10px!important; box-shadow:0 18px 34px rgba(6,18,34,.18)!important; overflow:hidden!important; position:relative!important; } html body #portal .school-dashboard-only .mobile-final-card:before{ content:"";position:absolute;inset:0; background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,0) 42%); pointer-events:none; } html body #portal .school-dashboard-only .mobile-final-card:after{ content:"";position:absolute;right:-28px;bottom:-42px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.10) } html body #portal .school-dashboard-only .mobile-final-card>span{width:72px!important;height:72px!important;display:grid!important;place-items:center!important} html body #portal .school-dashboard-only .mobile-final-card>span img{width:58px!important;height:58px!important;object-fit:contain!important} html body #portal .school-dashboard-only .mobile-final-card>div{grid-column:2;grid-row:1 / span 2;align-self:center!important} html body #portal .school-dashboard-only .mobile-final-card>b{grid-column:3;grid-row:1;align-self:center!important;justify-self:end!important;color:#fff!important;font-size:26px!important} html body #portal .school-dashboard-only .mobile-final-card strong{display:block;font-size:18px!important;line-height:1.12!important;color:#fff!important;margin-bottom:8px!important} html body #portal .school-dashboard-only .mobile-final-card small{display:block;font-size:12.5px!important;line-height:1.42!important;color:rgba(255,255,255,.95)!important} /* calm professional palette: card color does not match all icon colors */ html body #portal .school-dashboard-only .mobile-final-card:nth-child(1){background:linear-gradient(135deg,#2f6df6,#3e86ff)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(2){background:linear-gradient(135deg,#16b8c8,#31d0d2)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(3){background:linear-gradient(135deg,#1cbf59,#34cf6e)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(4){background:linear-gradient(135deg,#8c41dd,#b25aff)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(5){background:linear-gradient(135deg,#f2a20d,#ffc130)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(6){background:linear-gradient(135deg,#ef3b43,#ff5c63)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(7){background:linear-gradient(135deg,#f47d20,#ff9a3f)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(8){background:linear-gradient(135deg,#1b97d1,#2db8e8)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(9){background:linear-gradient(135deg,#7c47dc,#9f69f2)!important} /* 3) Admin and CMO dashboard action cards: same family as school cards. */ html body #portal .reference-admin-actions{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:18px!important; margin-top:12px!important; } html body #portal .reference-admin-actions .reference-action{ min-height:170px!important; padding:22px 20px!important; border-radius:26px!important; border:1px solid rgba(255,255,255,.14)!important; display:grid!important; grid-template-columns:68px minmax(0,1fr) 18px!important; grid-template-rows:68px auto!important; column-gap:14px!important; row-gap:10px!important; align-items:start!important; position:relative!important; overflow:hidden!important; box-shadow:0 18px 34px rgba(6,18,34,.18)!important; } html body #portal .reference-admin-actions .reference-action:before{ content:"";position:absolute;inset:0; background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,0) 42%); pointer-events:none; } html body #portal .reference-admin-actions .reference-action:after{ content:"";position:absolute;right:-28px;bottom:-42px;width:118px;height:118px;border-radius:50%;background:rgba(255,255,255,.10) } html body #portal .reference-admin-actions .reference-action>span{width:68px!important;height:68px!important;display:grid!important;place-items:center!important} html body #portal .reference-admin-actions .reference-action>span img{width:56px!important;height:56px!important;object-fit:contain!important} html body #portal .reference-admin-actions .reference-action>div{grid-column:2;grid-row:1 / span 2;align-self:center!important} html body #portal .reference-admin-actions .reference-action>b{grid-column:3;grid-row:1;align-self:center!important;justify-self:end!important;color:#fff!important;font-size:26px!important} html body #portal .reference-admin-actions .reference-action strong{display:block;font-size:17px!important;line-height:1.15!important;color:#fff!important;margin-bottom:8px!important} html body #portal .reference-admin-actions .reference-action small{display:block;font-size:12px!important;line-height:1.42!important;color:rgba(255,255,255,.95)!important} html body #portal .admin-dashboard-only .reference-admin-actions .reference-action:nth-child(1){background:linear-gradient(135deg,#2f6df6,#3e86ff)!important} html body #portal .admin-dashboard-only .reference-admin-actions .reference-action:nth-child(2){background:linear-gradient(135deg,#20b862,#34cf74)!important} html body #portal .admin-dashboard-only .reference-admin-actions .reference-action:nth-child(3){background:linear-gradient(135deg,#8b3fdc,#ad58ff)!important} html body #portal .admin-dashboard-only .reference-admin-actions .reference-action:nth-child(4){background:linear-gradient(135deg,#f0a118,#ffc234)!important} html body #portal .admin-dashboard-only .reference-admin-actions .reference-action:nth-child(5){background:linear-gradient(135deg,#ef4a59,#ff6d81)!important} html body #portal .admin-dashboard-only .reference-admin-actions .reference-action:nth-child(6){background:linear-gradient(135deg,#1793d0,#2fb8ea)!important} html body #portal .cmo-dashboard .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(1){background:linear-gradient(135deg,#2f6df6,#3e86ff)!important} html body #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(2){background:linear-gradient(135deg,#8b3fdc,#ad58ff)!important} html body #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(3){background:linear-gradient(135deg,#1cbf59,#34cf6e)!important} html body #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(4){background:linear-gradient(135deg,#ef4a59,#ff6d81)!important} /* 4) Admin and CMO stats — balanced laptop view. */ html body #portal .reference-stat-grid{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:16px!important; } html body #portal .reference-stat-grid .admin-stat-card{ min-height:145px!important; padding:18px 18px!important; border-radius:22px!important; border:1px solid rgba(14,41,67,.10)!important; display:grid!important; grid-template-columns:56px minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; column-gap:14px!important; align-items:center!important; text-align:left!important; box-shadow:0 14px 28px rgba(10,28,50,.08)!important; } html body #portal .reference-stat-grid .admin-stat-card>span{grid-column:1;grid-row:1/4;width:56px!important;height:56px!important;display:grid!important;place-items:center!important;margin:0!important} html body #portal .reference-stat-grid .admin-stat-card>span img{width:42px!important;height:42px!important;object-fit:contain!important} html body #portal .reference-stat-grid .admin-stat-card>small{grid-column:2;grid-row:1;font-size:12px!important;font-weight:800!important;align-self:end!important;white-space:normal!important} html body #portal .reference-stat-grid .admin-stat-card>strong{grid-column:2;grid-row:2;font-size:34px!important;line-height:1!important;margin:2px 0!important} html body #portal .reference-stat-grid .admin-stat-card>b{grid-column:2;grid-row:3;font-size:11px!important;font-weight:800!important;opacity:.88!important} body:not(.dark) #portal .reference-stat-grid .stat-schools{background:linear-gradient(145deg,#fff8df,#ffffff)!important;border-color:#efd79c!important} body:not(.dark) #portal .reference-stat-grid .stat-pef{background:linear-gradient(145deg,#e9f3ff,#ffffff)!important;border-color:#c4daf8!important} body:not(.dark) #portal .reference-stat-grid .stat-peima{background:linear-gradient(145deg,#ecfbf1,#ffffff)!important;border-color:#cbead6!important} body:not(.dark) #portal .reference-stat-grid .stat-students{background:linear-gradient(145deg,#f5edff,#ffffff)!important;border-color:#dacaf7!important} body:not(.dark) #portal .reference-stat-grid .stat-teachers{background:linear-gradient(145deg,#ffedf1,#ffffff)!important;border-color:#efc7d2!important} body.dark #portal .reference-stat-grid .stat-schools{background:linear-gradient(145deg,#2e250e,#141b22)!important;border-color:#81682d!important} body.dark #portal .reference-stat-grid .stat-pef{background:linear-gradient(145deg,#132f57,#141b22)!important;border-color:#35639f!important} body.dark #portal .reference-stat-grid .stat-peima{background:linear-gradient(145deg,#143b2a,#141b22)!important;border-color:#367356!important} body.dark #portal .reference-stat-grid .stat-students{background:linear-gradient(145deg,#32224b,#141b22)!important;border-color:#7658ae!important} body.dark #portal .reference-stat-grid .stat-teachers{background:linear-gradient(145deg,#4a202c,#141b22)!important;border-color:#9f5568!important} body.dark #portal .reference-stat-grid .admin-stat-card :is(small,strong,b){color:#fff!important} /* 5) Main school content cards more colourful and cleaner on laptop. */ html body #portal .top-actions-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important} html body #portal .top-actions-grid .action-card, html body #portal .feature-card{ border-radius:24px!important; border:1px solid #d7e1ec!important; box-shadow:0 14px 28px rgba(10,28,50,.08)!important; } html body #portal .top-actions-grid .action-card{padding:24px 22px!important;min-height:210px!important} html body #portal .feature-card{padding:24px 24px!important} html body #portal .top-actions-grid .action-icon{width:56px!important;height:56px!important;display:grid!important;place-items:center!important;margin-bottom:16px!important} html body #portal .top-actions-grid .action-icon img{width:46px!important;height:46px!important;object-fit:contain!important} html body #portal .feature-card .feature-icon{width:58px!important;height:58px!important;display:grid!important;place-items:center!important} html body #portal .feature-card .feature-icon img{width:48px!important;height:48px!important;object-fit:contain!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(1){background:linear-gradient(145deg,#eef4ff,#ffffff)!important;border-color:#cfe0f8!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(2){background:linear-gradient(145deg,#edf9f4,#ffffff)!important;border-color:#cce7d9!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(3){background:linear-gradient(145deg,#f4efff,#ffffff)!important;border-color:#ddd0f8!important} body:not(.dark) #portal .top-actions-grid .action-card:nth-child(4){background:linear-gradient(145deg,#fff4e6,#ffffff)!important;border-color:#eed9b8!important} body.dark #portal .top-actions-grid .action-card:nth-child(1){background:linear-gradient(145deg,#132f57,#141b22)!important;border-color:#35639f!important} body.dark #portal .top-actions-grid .action-card:nth-child(2){background:linear-gradient(145deg,#143b2a,#141b22)!important;border-color:#367356!important} body.dark #portal .top-actions-grid .action-card:nth-child(3){background:linear-gradient(145deg,#32224b,#141b22)!important;border-color:#7658ae!important} body.dark #portal .top-actions-grid .action-card:nth-child(4){background:linear-gradient(145deg,#4c3212,#141b22)!important;border-color:#a77a33!important} body:not(.dark) #portal .cleanliness-feature{background:linear-gradient(135deg,#eefaf4,#ffffff)!important;border-color:#cfe6da!important} body:not(.dark) #portal .gps-feature{background:linear-gradient(135deg,#eef5ff,#ffffff)!important;border-color:#d1dcf7!important} body:not(.dark) #portal .school-close-feature{background:linear-gradient(135deg,#fff5ea,#ffffff)!important;border-color:#eedec6!important} body.dark #portal .cleanliness-feature{background:linear-gradient(135deg,#143b2a,#141b22)!important;border-color:#367356!important} body.dark #portal .gps-feature{background:linear-gradient(135deg,#132f57,#141b22)!important;border-color:#35639f!important} body.dark #portal .school-close-feature{background:linear-gradient(135deg,#4c3212,#141b22)!important;border-color:#a77a33!important} /* 6) Mobile navigation — icon-only clean feel. */ html body #portal .mobile-nav button span{width:30px!important;height:30px!important;display:grid!important;place-items:center!important} html body #portal .mobile-nav button span img{width:24px!important;height:24px!important;object-fit:contain!important} html body #portal .mobile-nav .mobile-main span{width:32px!important;height:32px!important} /* 7) Responsive fixes for laptop/tablet/mobile. */ @media(max-width:1280px){ html body #portal .reference-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body #portal .top-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:900px){ html body #portal .reference-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:760px){ html body #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} html body #portal .school-dashboard-only .mobile-final-card{min-height:148px!important;padding:16px 14px!important;border-radius:22px!important;grid-template-columns:56px minmax(0,1fr) 14px!important;grid-template-rows:56px auto!important;column-gap:10px!important} html body #portal .school-dashboard-only .mobile-final-card>span{width:56px!important;height:56px!important} html body #portal .school-dashboard-only .mobile-final-card>span img{width:44px!important;height:44px!important} html body #portal .school-dashboard-only .mobile-final-card strong{font-size:14px!important} html body #portal .school-dashboard-only .mobile-final-card small{font-size:10.5px!important} html body #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} html body #portal .reference-admin-actions .reference-action{min-height:148px!important;padding:16px 14px!important;border-radius:22px!important;grid-template-columns:56px minmax(0,1fr) 14px!important;grid-template-rows:56px auto!important;column-gap:10px!important} html body #portal .reference-admin-actions .reference-action>span{width:56px!important;height:56px!important} html body #portal .reference-admin-actions .reference-action>span img{width:44px!important;height:44px!important} html body #portal .reference-admin-actions .reference-action strong{font-size:14px!important} html body #portal .reference-admin-actions .reference-action small{font-size:10.5px!important} html body #portal .reference-stat-grid{grid-template-columns:1fr!important} html body #portal .top-actions-grid{grid-template-columns:1fr!important} } /* ========================================================================== */ /* V56 LAYOUT + SYMBOL REFINEMENT */ /* User requested: laptop school cards 4 in a row, bigger symbols/text, */ /* and admin mobile stat cards 2 per row in rounded square boxes. */ /* ========================================================================== */ /* SCHOOL DASHBOARD QUICK CARDS — desktop/laptop */ html body #portal .school-dashboard-only .mobile-final-actions{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:18px!important; margin:20px 0 22px!important; } html body #portal .school-dashboard-only .mobile-final-card{ min-height:210px!important; padding:22px 20px 18px!important; border-radius:28px!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; text-align:left!important; gap:14px!important; } html body #portal .school-dashboard-only .mobile-final-card > span{ width:78px!important; height:78px!important; flex:0 0 78px!important; display:grid!important; place-items:center!important; } html body #portal .school-dashboard-only .mobile-final-card > span img{ width:66px!important; height:66px!important; object-fit:contain!important; } html body #portal .school-dashboard-only .mobile-final-card > div{ grid-column:auto!important; grid-row:auto!important; align-self:flex-start!important; margin-top:2px!important; } html body #portal .school-dashboard-only .mobile-final-card > b{ position:absolute!important; right:18px!important; top:18px!important; grid-column:auto!important; grid-row:auto!important; font-size:34px!important; line-height:1!important; opacity:.9!important; } html body #portal .school-dashboard-only .mobile-final-card strong{ display:block!important; font-size:24px!important; line-height:1.12!important; font-weight:900!important; color:#fff!important; margin:0 0 6px 0!important; letter-spacing:-.01em!important; } html body #portal .school-dashboard-only .mobile-final-card small{ display:block!important; font-size:15px!important; line-height:1.42!important; font-weight:700!important; color:rgba(255,255,255,.95)!important; margin:0!important; } /* make 9th card align better when it wraps */ html body #portal .school-dashboard-only .mobile-final-card:nth-child(9){grid-column:auto!important} /* SCHOOL QUICK CARDS — tablet */ @media(max-width:1300px){ html body #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body #portal .school-dashboard-only .mobile-final-card{min-height:195px!important} html body #portal .school-dashboard-only .mobile-final-card strong{font-size:21px!important} html body #portal .school-dashboard-only .mobile-final-card small{font-size:14px!important} } @media(max-width:980px){ html body #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:760px){ html body #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} html body #portal .school-dashboard-only .mobile-final-card{ min-height:160px!important; padding:16px 14px 14px!important; border-radius:22px!important; gap:10px!important; } html body #portal .school-dashboard-only .mobile-final-card > span{width:56px!important;height:56px!important;flex-basis:56px!important} html body #portal .school-dashboard-only .mobile-final-card > span img{width:48px!important;height:48px!important} html body #portal .school-dashboard-only .mobile-final-card > b{right:14px!important;top:14px!important;font-size:26px!important} html body #portal .school-dashboard-only .mobile-final-card strong{font-size:16px!important;line-height:1.15!important} html body #portal .school-dashboard-only .mobile-final-card small{font-size:11px!important;line-height:1.38!important} } /* ADMIN + CMO ACTION CARDS — better balanced with larger symbols */ html body #portal .reference-admin-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:16px!important; } html body #portal .reference-admin-actions .reference-action{ min-height:175px!important; padding:22px 20px!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; gap:14px!important; text-align:left!important; } html body #portal .reference-admin-actions .reference-action > span{ width:74px!important;height:74px!important;display:grid!important;place-items:center!important; } html body #portal .reference-admin-actions .reference-action > span img{ width:62px!important;height:62px!important;object-fit:contain!important; } html body #portal .reference-admin-actions .reference-action > div{ grid-column:auto!important;grid-row:auto!important;align-self:flex-start!important; } html body #portal .reference-admin-actions .reference-action > b{ position:absolute!important;right:18px!important;top:18px!important;font-size:32px!important;line-height:1!important; } html body #portal .reference-admin-actions .reference-action strong{font-size:22px!important;line-height:1.12!important;margin:0 0 6px 0!important} html body #portal .reference-admin-actions .reference-action small{font-size:14px!important;line-height:1.42!important} @media(max-width:1280px){ html body #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:760px){ html body #portal .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} html body #portal .reference-admin-actions .reference-action{min-height:150px!important;padding:16px 14px!important;border-radius:22px!important;gap:10px!important} html body #portal .reference-admin-actions .reference-action > span{width:56px!important;height:56px!important} html body #portal .reference-admin-actions .reference-action > span img{width:48px!important;height:48px!important} html body #portal .reference-admin-actions .reference-action > b{right:14px!important;top:14px!important;font-size:24px!important} html body #portal .reference-admin-actions .reference-action strong{font-size:16px!important} html body #portal .reference-admin-actions .reference-action small{font-size:11px!important} } /* ADMIN / CMO STATS — mobile 2 per row in rounded square cards */ html body #portal .reference-stat-grid .admin-stat-card{ min-height:150px!important; border-radius:24px!important; } html body #portal .reference-stat-grid .admin-stat-card > span img{width:46px!important;height:46px!important} html body #portal .reference-stat-grid .admin-stat-card > small{font-size:13px!important} html body #portal .reference-stat-grid .admin-stat-card > strong{font-size:36px!important} html body #portal .reference-stat-grid .admin-stat-card > b{font-size:11px!important} @media(max-width:760px){ html body #portal .reference-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} html body #portal .reference-stat-grid .admin-stat-card{ min-height:132px!important; padding:14px!important; border-radius:20px!important; grid-template-columns:48px minmax(0,1fr)!important; column-gap:10px!important; align-items:center!important; } html body #portal .reference-stat-grid .admin-stat-card > span{width:48px!important;height:48px!important} html body #portal .reference-stat-grid .admin-stat-card > span img{width:36px!important;height:36px!important} html body #portal .reference-stat-grid .admin-stat-card > small{font-size:11px!important;line-height:1.2!important} html body #portal .reference-stat-grid .admin-stat-card > strong{font-size:24px!important} html body #portal .reference-stat-grid .admin-stat-card > b{font-size:10px!important;line-height:1.2!important} } /* SIDEBAR + METRICS symbol sizing */ html body #portal .nav-item span img{width:26px!important;height:26px!important} html body #portal .metric-icon{width:46px!important;height:46px!important} html body #portal .metric-icon img{width:34px!important;height:34px!important} html body #portal .top-actions-grid .action-icon{width:64px!important;height:64px!important} html body #portal .top-actions-grid .action-icon img{width:54px!important;height:54px!important} html body #portal .feature-card .feature-icon{width:66px!important;height:66px!important} html body #portal .feature-card .feature-icon img{width:54px!important;height:54px!important} /* Main school content cards typography on laptop */ html body #portal .top-actions-grid .action-card h3{font-size:24px!important;line-height:1.15!important} html body #portal .top-actions-grid .action-card p{font-size:14px!important;line-height:1.48!important} html body #portal .feature-card h2{font-size:30px!important;line-height:1.15!important} html body #portal .feature-card p{font-size:15px!important;line-height:1.5!important} @media(max-width:760px){ html body #portal .top-actions-grid .action-card h3{font-size:20px!important} html body #portal .top-actions-grid .action-card p{font-size:13px!important} html body #portal .feature-card h2{font-size:22px!important} html body #portal .feature-card p{font-size:13px!important} } /* ========================================================================== */ /* V58 FINAL APPROVED MOCKUP ALIGNMENT + ATTENDANCE/CAMERA FIXES */ /* ========================================================================== */ html body #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important} html body #portal .school-dashboard-only .mobile-final-card{position:relative!important;min-height:172px!important;padding:18px 18px 16px!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 20px 36px rgba(12,23,41,.16)!important;grid-template-columns:64px minmax(0,1fr) 18px!important;grid-template-rows:64px auto!important;column-gap:14px!important;row-gap:12px!important;align-items:start!important} html body #portal .school-dashboard-only .mobile-final-card>span{width:64px!important;height:64px!important;display:grid!important;place-items:center!important} html body #portal .school-dashboard-only .mobile-final-card>span img{width:56px!important;height:56px!important;filter:drop-shadow(0 9px 12px rgba(0,0,0,.20))!important} html body #portal .school-dashboard-only .mobile-final-card strong{font-size:15px!important;line-height:1.18!important;color:#fff!important} html body #portal .school-dashboard-only .mobile-final-card small{font-size:11px!important;line-height:1.45!important;color:rgba(255,255,255,.90)!important} html body #portal .school-dashboard-only .mobile-final-card>b{font-size:28px!important;line-height:1!important;color:rgba(255,255,255,.92)!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(1){background:linear-gradient(135deg,#2f97ff,#0d73ea)!important;border-color:#62b2ff!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(2){background:linear-gradient(135deg,#34c86a,#0fad58)!important;border-color:#66e090!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(3){background:linear-gradient(135deg,#f4ac1f,#de8c00)!important;border-color:#ffd15f!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(4){background:linear-gradient(135deg,#ad5bff,#8f38f4)!important;border-color:#c38dff!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(5){background:linear-gradient(135deg,#ff6d79,#ef4a58)!important;border-color:#ff9ca4!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(6){background:linear-gradient(135deg,#19c2bb,#0ca6a0)!important;border-color:#59ddd5!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(7){background:linear-gradient(135deg,#4b87ff,#245cd9)!important;border-color:#84a9ff!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(8){background:linear-gradient(135deg,#ff6aa9,#f14d8f)!important;border-color:#ff9cc4!important} html body #portal .school-dashboard-only .mobile-final-card:nth-child(9){background:linear-gradient(135deg,#6f7cff,#4c58de)!important;border-color:#9ea7ff!important} html body #portal .reference-admin-actions .reference-action:nth-child(1){background:linear-gradient(135deg,#2f97ff,#0d73ea)!important;border-color:#62b2ff!important} html body #portal .reference-admin-actions .reference-action:nth-child(2){background:linear-gradient(135deg,#34c86a,#0fad58)!important;border-color:#66e090!important} html body #portal .reference-admin-actions .reference-action:nth-child(3){background:linear-gradient(135deg,#f4ac1f,#de8c00)!important;border-color:#ffd15f!important} html body #portal .reference-admin-actions .reference-action:nth-child(4){background:linear-gradient(135deg,#ad5bff,#8f38f4)!important;border-color:#c38dff!important} html body #portal .reference-admin-actions .reference-action:nth-child(5){background:linear-gradient(135deg,#ff6aa9,#f14d8f)!important;border-color:#ff9cc4!important} html body #portal .reference-admin-actions .reference-action:nth-child(6){background:linear-gradient(135deg,#4b87ff,#245cd9)!important;border-color:#84a9ff!important} html body #portal .reference-admin-actions .reference-action:nth-child(7){background:linear-gradient(135deg,#6f7cff,#4c58de)!important;border-color:#9ea7ff!important} html body #portal .reference-admin-actions .reference-action:nth-child(8){background:linear-gradient(135deg,#19c2bb,#0ca6a0)!important;border-color:#59ddd5!important} .student-status-switch{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .student-status-pill{appearance:none;-webkit-appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;font-weight:800;line-height:1;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,color .16s ease} .student-status-pill:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.08)} .student-status-pill.active.present{background:rgba(34,197,94,.14);border-color:rgba(22,163,74,.40);color:#166534} .student-status-pill.active.absent{background:rgba(239,68,68,.14);border-color:rgba(220,38,38,.40);color:#b91c1c} .student-status-pill.active.leave{background:rgba(245,158,11,.16);border-color:rgba(217,119,6,.42);color:#b45309} body.dark .student-status-pill{background:#111a24;border-color:#334155;color:#e5edf7} body.dark .student-status-pill.active.present{background:rgba(34,197,94,.18);border-color:rgba(74,222,128,.36);color:#b7f7ca} body.dark .student-status-pill.active.absent{background:rgba(239,68,68,.18);border-color:rgba(248,113,113,.34);color:#fecaca} body.dark .student-status-pill.active.leave{background:rgba(245,158,11,.18);border-color:rgba(251,191,36,.34);color:#fde68a} #portal .staff-photo-field,#portal .cmo-profile-face-preview,#portal .register-upload-box,#portal #staffGroupPreviewWrap{border-radius:22px!important;box-shadow:0 18px 34px rgba(15,23,42,.08)!important} #portal .staff-photo-field{background:linear-gradient(180deg,rgba(249,252,255,.98),rgba(242,247,252,.98))!important;border:1px solid rgba(111,157,211,.24)!important;padding:20px!important} body.dark #portal .staff-photo-field{background:linear-gradient(180deg,#0c1520,#0f1c29)!important;border-color:rgba(77,128,184,.28)!important} #portal .staff-photo-preview,#portal .cmo-profile-face-preview{border:2px dashed rgba(77,133,201,.34)!important;background:linear-gradient(145deg,#eef6ff,#f8fbff)!important;border-radius:22px!important} body.dark #portal .staff-photo-preview,body.dark #portal .cmo-profile-face-preview{background:linear-gradient(145deg,#0f2234,#12283d)!important;border-color:rgba(86,144,204,.34)!important} #portal .camera-capture-dialog,#portal .cmo-school-face-dialog{border-radius:26px!important;border:1px solid rgba(100,145,194,.18)!important;background:linear-gradient(180deg,rgba(251,253,255,.98),rgba(242,247,252,.98))!important;box-shadow:0 36px 90px rgba(1,8,20,.34)!important} body.dark #portal .camera-capture-dialog,body.dark #portal .cmo-school-face-dialog{background:linear-gradient(180deg,#07111a,#0c1723)!important;border-color:rgba(77,128,184,.24)!important} #portal :is(#staffCameraVideo,#staffGroupVideo,#cmoProfileVideo,#cmoSchoolFaceVideo,#cleanCameraVideo){width:100%!important;max-height:68vh!important;aspect-ratio:4/3!important;object-fit:cover!important;border-radius:22px!important;background:#061321!important;border:1px solid rgba(89,134,181,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 34px rgba(4,12,24,.18)!important} #portal .camera-placeholder{height:360px!important;border-radius:22px!important;background:linear-gradient(135deg,#0e2740,#1b4f7f)!important;border:1px solid rgba(115,175,245,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 28px rgba(4,12,24,.18)!important} #portal .camera-placeholder h3{font-size:22px!important;margin:10px 0 4px!important;color:#fff!important} #portal .camera-placeholder p{max-width:320px!important;font-size:13px!important;line-height:1.45!important;color:rgba(255,255,255,.82)!important} #portal .camera-actions{gap:12px!important;margin-top:18px!important;flex-wrap:wrap!important} #portal .verification-result{border-radius:22px!important} @media (max-width:1180px){html body #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media (max-width:760px){html body #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}html body #portal .school-dashboard-only .mobile-final-card{min-height:138px!important;padding:15px 13px!important;grid-template-columns:54px minmax(0,1fr) 16px!important;grid-template-rows:54px auto!important;column-gap:10px!important;row-gap:8px!important;border-radius:18px!important}html body #portal .school-dashboard-only .mobile-final-card>span{width:54px!important;height:54px!important}html body #portal .school-dashboard-only .mobile-final-card>span img{width:47px!important;height:47px!important}html body #portal .school-dashboard-only .mobile-final-card strong{font-size:13.2px!important}html body #portal .school-dashboard-only .mobile-final-card small{font-size:9.7px!important}.student-status-switch{gap:6px}.student-status-pill{padding:7px 10px;font-size:11px}#portal .camera-placeholder{height:290px!important}} /* ========================================================================== */ /* V61 ADMIN QUICK ACTIONS - 4 PER ROW + LARGER REALISTIC SYMBOL PRESENTATION */ /* ========================================================================== */ #portal .reference-admin-actions{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:18px !important; align-items:stretch !important; } #portal .reference-action{ position:relative !important; min-height:158px !important; padding:20px 20px 18px !important; border-radius:24px !important; display:grid !important; grid-template-columns:68px minmax(0,1fr) 20px !important; grid-template-rows:64px auto !important; column-gap:14px !important; row-gap:12px !important; align-items:start !important; text-align:left !important; box-shadow:0 18px 38px rgba(7, 18, 33, .18) !important; } #portal .reference-action:hover{ transform:translateY(-3px) !important; box-shadow:0 22px 46px rgba(7, 18, 33, .24) !important; } #portal .reference-action > span{ width:64px !important; height:64px !important; padding:0 !important; border-radius:0 !important; background:transparent !important; align-self:start !important; display:grid !important; place-items:center !important; } #portal .reference-action img{ width:58px !important; height:58px !important; object-fit:contain !important; filter:drop-shadow(0 8px 12px rgba(7,18,33,.28)) !important; } #portal .reference-action strong, #portal .reference-action small{ display:block !important; } #portal .reference-action strong{ font-size:15px !important; line-height:1.18 !important; font-weight:800 !important; color:#ffffff !important; letter-spacing:.1px !important; } #portal .reference-action small{ margin-top:7px !important; font-size:11px !important; line-height:1.45 !important; font-weight:600 !important; color:rgba(255,255,255,.92) !important; } #portal .reference-action b{ font-size:32px !important; line-height:1 !important; align-self:start !important; justify-self:end !important; color:rgba(255,255,255,.96) !important; } body.dark #portal .reference-action{ box-shadow:0 20px 42px rgba(0,0,0,.28) !important; } body.dark #portal .reference-action img{ filter:drop-shadow(0 9px 14px rgba(0,0,0,.34)) !important; } /* keep strong desktop structure, then step down responsively */ @media (max-width: 1320px){ #portal .reference-admin-actions{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width: 980px){ #portal .reference-admin-actions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; } #portal .reference-action{ min-height:146px !important; padding:17px 16px 16px !important; grid-template-columns:58px minmax(0,1fr) 18px !important; grid-template-rows:56px auto !important; column-gap:12px !important; row-gap:10px !important; border-radius:20px !important; } #portal .reference-action > span{ width:56px !important; height:56px !important; } #portal .reference-action img{ width:50px !important; height:50px !important; } #portal .reference-action strong{ font-size:14px !important; } #portal .reference-action small{ font-size:10.5px !important; } } @media (max-width: 640px){ #portal .reference-admin-actions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; } #portal .reference-action{ min-height:132px !important; padding:14px 13px 14px !important; grid-template-columns:52px minmax(0,1fr) 16px !important; grid-template-rows:50px auto !important; column-gap:10px !important; row-gap:8px !important; border-radius:18px !important; } #portal .reference-action > span{ width:50px !important; height:50px !important; } #portal .reference-action img{ width:44px !important; height:44px !important; } #portal .reference-action strong{ font-size:13px !important; } #portal .reference-action small{ margin-top:5px !important; font-size:9.8px !important; line-height:1.35 !important; } #portal .reference-action b{ font-size:26px !important; } } /* ========================================================================== */ /* V62 FORCE 4 ADMIN CARDS ON LAPTOP + LARGER LAPTOP ICON/TEXT */ /* ========================================================================== */ /* Desktop/laptop: always keep four cards in one row. Do not drop to 3 columns. */ @media (min-width: 901px){ #portal .admin-dashboard-only .reference-admin-actions{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; } #portal .admin-dashboard-only .reference-action{ min-height:190px !important; padding:22px 20px 20px !important; border-radius:24px !important; display:grid !important; grid-template-columns:82px minmax(0,1fr) 22px !important; grid-template-rows:82px auto !important; column-gap:16px !important; row-gap:14px !important; align-items:start !important; } #portal .admin-dashboard-only .reference-action > span{ width:82px !important; height:82px !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } #portal .admin-dashboard-only .reference-action > span img{ width:74px !important; height:74px !important; object-fit:contain !important; filter:drop-shadow(0 10px 16px rgba(0,0,0,.30)) !important; } #portal .admin-dashboard-only .reference-action strong{ font-size:20px !important; line-height:1.15 !important; font-weight:800 !important; color:#fff !important; } #portal .admin-dashboard-only .reference-action small{ margin-top:7px !important; font-size:13px !important; line-height:1.42 !important; font-weight:600 !important; color:rgba(255,255,255,.92) !important; } #portal .admin-dashboard-only .reference-action b{ font-size:34px !important; line-height:1 !important; color:#fff !important; } } /* Tablet/mobile stays two per row. */ @media (max-width: 900px){ #portal .admin-dashboard-only .reference-admin-actions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; } } /* V109 CMO registered picture + Admin profile/password controls */ #portal .cmo-admin-profile-photo{ width:76px!important; height:76px!important; object-fit:cover!important; object-position:center!important; border-radius:20px!important; border:2px solid #50bfe8!important; background:#071827!important; box-shadow:0 8px 20px rgba(8,46,74,.18)!important; } #portal .cmo-account-card>footer{ align-items:end!important; } #portal .cmo-password-reset{ display:flex!important; align-items:end!important; gap:10px!important; flex:1 1 380px!important; padding:10px 12px!important; border:1px solid var(--border)!important; border-radius:13px!important; background:var(--surface)!important; } #portal .cmo-password-reset label{ flex:1 1 220px!important; display:grid!important; gap:5px!important; font-size:11px!important; font-weight:800!important; color:var(--muted)!important; } #portal .cmo-password-reset input{ width:100%!important; min-height:40px!important; } #portal .cmo-profile-face-preview img{ width:100%!important; height:100%!important; max-height:330px!important; object-fit:cover!important; object-position:center!important; border-radius:18px!important; } @media(max-width:650px){ #portal .cmo-password-reset{display:grid!important;grid-template-columns:1fr!important} #portal .cmo-password-reset .secondary-button{width:100%!important} #portal .cmo-admin-profile-photo{width:64px!important;height:64px!important;border-radius:17px!important} } /* V113 B-FORM LOOKUP */ #portal .bform-lookup-panel{max-width:980px} #portal .bform-lookup-form{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:14px;align-items:end} #portal .bform-lookup-form label{display:grid;gap:7px} #portal .bform-lookup-form input{min-height:52px;font-size:18px;font-weight:800;letter-spacing:.4px} #portal .bform-lookup-message{margin:14px 0 0;font-weight:700;color:var(--muted)} @media(max-width:650px){#portal .bform-lookup-form{grid-template-columns:1fr}#portal .bform-lookup-form .primary-button{width:100%}} /* V114 DUPLICATE B-FORM FILTERS */ #portal .duplicate-org-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px;padding:8px;border:1px solid var(--border);border-radius:16px;background:var(--surface)} #portal .duplicate-org-tab{min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-weight:850;cursor:pointer} #portal .duplicate-org-tab.active{color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(0,0,0,.16)} #portal .duplicate-org-tab.active:not(.pef):not(.peima){background:linear-gradient(135deg,#6657d8,#4434a4)} #portal .duplicate-org-tab.pef.active{background:linear-gradient(135deg,#1677ce,#0a4b8d)} #portal .duplicate-org-tab.peima.active{background:linear-gradient(135deg,#178858,#0d5d3b)} #portal .duplicate-filter-panel{margin-top:16px} #portal .duplicate-filter-grid{display:grid!important;grid-template-columns:minmax(210px,1.15fr) minmax(150px,.7fr) minmax(230px,1.2fr) auto!important;gap:12px!important;align-items:end!important} #portal .duplicate-filter-grid label{display:grid!important;gap:6px!important} #portal .duplicate-filter-grid select,#portal .duplicate-filter-grid input{min-height:46px!important} #portal .duplicate-filter-status{margin-top:12px;padding:10px 13px;border-radius:10px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:750} #portal .duplicate-org-badge{display:inline-flex;min-width:58px;justify-content:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;color:#fff} #portal .duplicate-org-badge.pef{background:#176fc0}#portal .duplicate-org-badge.peima{background:#16784d} #portal .heading-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end} #portal .duplicate-results-panel{margin-top:16px} @media(max-width:900px){#portal .duplicate-filter-grid{grid-template-columns:1fr 1fr!important}} @media(max-width:600px){#portal .duplicate-org-tabs{grid-template-columns:1fr}#portal .duplicate-filter-grid{grid-template-columns:1fr!important}#portal .heading-actions{width:100%;justify-content:stretch}#portal .heading-actions .secondary-button{flex:1 1 100%}} /* V115 DAILY PHOTO EVIDENCE */ #portal .admin-evidence-photo-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } #portal .admin-evidence-photo{ overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); } #portal .admin-evidence-photo img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#09131b; } #portal .admin-evidence-photo strong{ display:block; padding:10px 12px; font-size:13px; } @media(max-width:850px){ #portal .admin-evidence-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:520px){ #portal .admin-evidence-photo-grid{grid-template-columns:1fr} } /* ========================================================================== V116 DAILY UPLOAD MONITOR — Admin / PEF + PEIMA ========================================================================== */ #portal .daily-monitor-heading{align-items:flex-end!important} #portal .daily-monitor-summary{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 16px; } #portal .monitor-summary-card{ position:relative; overflow:hidden; min-height:112px; padding:18px 20px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:0 12px 28px rgba(0,0,0,.08); } #portal .monitor-summary-card:after{ content:""; position:absolute; width:90px;height:90px;border-radius:50%; right:-28px;top:-30px;background:currentColor;opacity:.08; } #portal .monitor-summary-card span{display:block;font-size:10px;font-weight:900;letter-spacing:1.4px;color:var(--muted)} #portal .monitor-summary-card strong{display:block;margin-top:7px;font-size:31px;line-height:1;font-weight:900;color:var(--text)} #portal .monitor-summary-card small{display:block;margin-top:8px;font-size:11px;font-weight:700;color:var(--muted)} #portal .monitor-summary-card.complete{border-color:rgba(23,159,101,.45);color:#159864} #portal .monitor-summary-card.pending{border-color:rgba(224,90,74,.42);color:#d95d50} #portal .monitor-summary-card.rate{border-color:rgba(60,130,220,.42);color:#397fd0} #portal .daily-monitor-tools{ display:grid!important; grid-template-columns:1.4fr .7fr .8fr!important; gap:12px!important; align-items:end!important; } #portal .daily-monitor-tools label{display:grid!important;gap:6px!important} #portal .daily-monitor-tools input, #portal .daily-monitor-tools select{min-height:46px!important} #portal .daily-monitor-legend{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin:13px 2px 18px; color:var(--muted); font-size:11px; font-weight:750; } #portal .daily-monitor-legend span{display:inline-flex;align-items:center;gap:7px} #portal .legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block} #portal .legend-dot.done{background:#1aae72;box-shadow:0 0 0 4px rgba(26,174,114,.12)} #portal .legend-dot.missing{background:#df654f;box-shadow:0 0 0 4px rgba(223,101,79,.12)} #portal .daily-monitor-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:18px!important; align-items:start!important; } #portal .daily-monitor-column{ min-width:0; border:1px solid var(--border); border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:0 14px 34px rgba(0,0,0,.08); } #portal .daily-monitor-column.single{grid-column:1/-1} #portal .daily-monitor-column-header{ display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:13px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border); } #portal .daily-monitor-column.pef .daily-monitor-column-header{ background:linear-gradient(135deg,rgba(25,111,190,.16),rgba(25,111,190,.03)); } #portal .daily-monitor-column.peima .daily-monitor-column-header{ background:linear-gradient(135deg,rgba(22,125,79,.16),rgba(22,125,79,.03)); } #portal .daily-monitor-column-header .network-column-logo{ width:50px!important;height:50px!important;border-radius:15px!important;overflow:hidden!important;background:#fff!important;display:grid!important;place-items:center!important; } #portal .daily-monitor-column-header .network-column-logo img{width:100%!important;height:100%!important;object-fit:contain!important} #portal .daily-monitor-column-header small{font-size:9px;font-weight:900;letter-spacing:1.2px;color:var(--muted)} #portal .daily-monitor-column-header h2{margin:2px 0;font-size:20px;color:var(--text)} #portal .daily-monitor-column-header p{margin:0;font-size:11px;color:var(--muted)} #portal .monitor-column-stats{display:flex;gap:7px} #portal .monitor-column-stats span{ min-width:62px;padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--surface);text-align:center;font-size:9px;color:var(--muted) } #portal .monitor-column-stats b{display:block;font-size:15px;color:var(--text)} #portal .daily-monitor-school-list{ display:grid; gap:12px; max-height:none; overflow:visible; overscroll-behavior:contain; padding:13px; } #portal .daily-monitor-school-card{ display:block; width:100%; border:1px solid var(--border); border-radius:17px; background:var(--surface); overflow:hidden; text-align:left; box-shadow:0 7px 18px rgba(0,0,0,.05); } #portal .daily-monitor-school-card.needs-action{border-left:4px solid #df654f} #portal .daily-monitor-school-card.complete{border-left:4px solid #18a96f} #portal .daily-monitor-school-card>header{ display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:11px; align-items:center; padding:13px 14px 10px; } #portal .monitor-school-logo{ width:43px;height:43px;border-radius:12px;overflow:hidden;background:#fff;display:grid;place-items:center;border:1px solid rgba(0,0,0,.08) } #portal .monitor-school-logo img{width:100%;height:100%;object-fit:contain} #portal .monitor-school-copy small{font-size:9px;font-weight:900;letter-spacing:.55px;color:var(--muted)} #portal .monitor-school-copy h3{margin:2px 0 1px;font-size:14px;line-height:1.25;color:var(--text)} #portal .monitor-school-copy p{margin:0;font-size:10px;color:var(--muted)} #portal .monitor-progress-badge{ width:55px;height:55px;border-radius:50%;display:grid;place-items:center;align-content:center;border:4px solid rgba(220,90,70,.24);background:var(--surface) } #portal .monitor-progress-badge.done{border-color:rgba(25,170,112,.52)} #portal .monitor-progress-badge strong{font-size:14px;line-height:1;color:var(--text)} #portal .monitor-progress-badge small{font-size:9px;margin-top:3px;color:var(--muted)} #portal .monitor-task-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:0 13px 12px; } #portal .monitor-task-chip{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:7px; align-items:center; min-height:49px; padding:8px 9px; border-radius:11px; border:1px solid var(--border); background:var(--surface); } #portal .monitor-task-chip>i{ width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900 } #portal .monitor-task-chip.done{border-color:rgba(24,169,111,.28);background:rgba(24,169,111,.055)} #portal .monitor-task-chip.done>i{background:#18a96f;color:#fff} #portal .monitor-task-chip.missing{border-color:rgba(223,101,79,.32);background:rgba(223,101,79,.055)} #portal .monitor-task-chip.missing>i{background:#df654f;color:#fff} #portal .monitor-task-chip b{display:block;font-size:10px;line-height:1.15;color:var(--text)} #portal .monitor-task-chip small{display:block;margin-top:2px;font-size:9px;line-height:1.15;color:var(--muted)} #portal .daily-monitor-school-card>footer{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 13px; border-top:1px solid var(--border); background:var(--surface); } #portal .monitor-missing-line b{display:block;font-size:9px;letter-spacing:.65px;color:#db5c4d} #portal .monitor-missing-line.complete b{color:#18a96f} #portal .monitor-missing-line span{display:block;margin-top:2px;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #portal .monitor-open-school{ border:0;background:transparent;color:var(--green);font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap } @media(max-width:1150px){ #portal .daily-monitor-grid{grid-template-columns:1fr!important} #portal .daily-monitor-summary{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ #portal .daily-monitor-tools{grid-template-columns:1fr!important} #portal .daily-monitor-column-header{grid-template-columns:48px 1fr!important} #portal .monitor-column-stats{grid-column:1/-1} #portal .daily-monitor-school-list{max-height:none} } @media(max-width:540px){ #portal .daily-monitor-summary{grid-template-columns:1fr 1fr} #portal .monitor-summary-card{min-height:96px;padding:14px} #portal .monitor-summary-card strong{font-size:26px} #portal .monitor-task-grid{grid-template-columns:1fr} #portal .daily-monitor-school-card>footer{grid-template-columns:1fr} #portal .monitor-open-school{text-align:left;padding:0} } /* V118 NEW ADMISSION VISIBILITY + B-FORM PROTECTION */ #portal #newAdmission .record-form label, #portal #newAdmission .record-form label > span, #portal #newAdmission .record-form label{ color:var(--text)!important; font-weight:800!important; } #portal #newAdmission .record-form input, #portal #newAdmission .record-form select{ color:var(--text)!important; background:var(--surface)!important; border-color:var(--border)!important; opacity:1!important; } #portal #newAdmission .record-form input::placeholder{ color:var(--muted)!important; opacity:.92!important; } #portal #newAdmission .auto-date-card{ background:var(--surface)!important; border:1px solid var(--border)!important; } #portal #newAdmission .auto-date-card small{ color:var(--muted)!important; opacity:1!important; } #portal #newAdmission .auto-date-card strong{ color:var(--text)!important; opacity:1!important; } #portal #newAdmission .auto-date-card span{ color:var(--muted)!important; opacity:1!important; } #portal #newAdmission .admission-rule-note{ background:rgba(24,169,111,.10)!important; border:1px solid rgba(24,169,111,.34)!important; color:var(--text)!important; } #portal #newAdmission .admission-rule-note b{ color:#43d494!important; } #portal #newAdmission .admission-rule-note span{ color:var(--text)!important; opacity:1!important; font-weight:700!important; } #portal #newAdmission .admission-rule-note.warning{ background:rgba(223,101,79,.11)!important; border-color:rgba(223,101,79,.42)!important; } #portal #newAdmission .admission-rule-note.warning b{ color:#ff8f7f!important; } /* V119 NOTIFICATION BUTTON VISIBILITY */ #portal .topbar .alert-button, #portal .top-actions .alert-button, #portal button.alert-button[data-view="alerts"]{ display:inline-grid!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; width:44px!important; min-width:44px!important; height:44px!important; place-items:center!important; position:relative!important; z-index:40!important; } #portal .topbar .alert-button img, #portal .top-actions .alert-button img{ display:block!important; width:21px!important; height:21px!important; opacity:1!important; visibility:visible!important; filter:none!important; } #portal .alert-button #alertBadge, #portal .alert-button > b{ display:grid!important; visibility:visible!important; opacity:1!important; position:absolute!important; top:-3px!important; right:-3px!important; min-width:18px!important; height:18px!important; padding:0 4px!important; place-items:center!important; border-radius:999px!important; font-size:10px!important; font-weight:900!important; line-height:1!important; z-index:41!important; } #portal .alert-button > b:empty{display:none!important} @media(max-width:600px){ #portal .topbar .alert-button, #portal .top-actions .alert-button{ display:inline-grid!important; width:40px!important; min-width:40px!important; height:40px!important; flex:0 0 40px!important; } } /* ========================================================================== V120 ADMIN + CMO COLOR CARD RESTORE Scoped only to Admin/CMO dashboards. School dashboard is untouched. ========================================================================== */ /* Top summary cards: keep white/gray from old CSS from overriding colors */ #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-stat-grid .admin-stat-card, #portal .cmo-dashboard .reference-stat-grid .admin-stat-card{ color:#10263b!important; border:1px solid rgba(25,55,85,.15)!important; box-shadow:0 14px 30px rgba(0,0,0,.16)!important; } /* Admin summary colors */ #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-stat-grid .admin-stat-card:nth-child(1){ background:linear-gradient(145deg,#fff3cf,#f3d889)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-stat-grid .admin-stat-card:nth-child(2){ background:linear-gradient(145deg,#e7f2ff,#c8e1ff)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-stat-grid .admin-stat-card:nth-child(3){ background:linear-gradient(145deg,#e8f8ee,#c9ead7)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-stat-grid .admin-stat-card:nth-child(4){ background:linear-gradient(145deg,#f2eaff,#ddccf7)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-stat-grid .admin-stat-card:nth-child(5){ background:linear-gradient(145deg,#ffe9e7,#f5c9c4)!important; } /* CMO summary colors */ #portal .cmo-dashboard .reference-stat-grid .admin-stat-card:nth-child(1){ background:linear-gradient(145deg,#e9f3ff,#cfe4fb)!important; } #portal .cmo-dashboard .reference-stat-grid .admin-stat-card:nth-child(2){ background:linear-gradient(145deg,#e8f8ee,#caead8)!important; } #portal .cmo-dashboard .reference-stat-grid .admin-stat-card:nth-child(3){ background:linear-gradient(145deg,#fff3d9,#f1d89f)!important; } #portal .cmo-dashboard .reference-stat-grid .admin-stat-card:nth-child(4){ background:linear-gradient(145deg,#f3eaff,#ddcdf4)!important; } #portal .cmo-dashboard .reference-stat-grid .admin-stat-card:nth-child(5){ background:linear-gradient(145deg,#ffe9e8,#f4cbc7)!important; } /* Remove the white icon/inner boxes from summary cards */ #portal .reference-admin-dashboard .reference-stat-grid .admin-stat-card .stat-icon-shell, #portal .cmo-dashboard .reference-stat-grid .admin-stat-card .stat-icon-shell{ background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; padding:0!important; } /* Main Admin/CMO action cards: restore individual professional pastel colors */ #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-admin-actions .reference-action:nth-child(1), #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(1){ background:linear-gradient(145deg,#fff4d8,#f2dda6)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-admin-actions .reference-action:nth-child(2), #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(2){ background:linear-gradient(145deg,#e8f3ff,#cae2fb)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-admin-actions .reference-action:nth-child(3), #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(3){ background:linear-gradient(145deg,#e9f8ef,#cce9d8)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-admin-actions .reference-action:nth-child(4), #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(4){ background:linear-gradient(145deg,#ffecee,#f4ced3)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-admin-actions .reference-action:nth-child(5), #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(5){ background:linear-gradient(145deg,#f4edff,#ddd0f5)!important; } #portal .reference-admin-dashboard:not(.cmo-dashboard) .reference-admin-actions .reference-action:nth-child(6), #portal .cmo-dashboard .reference-admin-actions .reference-action:nth-child(6){ background:linear-gradient(145deg,#eaf8fb,#cfe9ef)!important; } /* Remove old white boxes inside action cards */ #portal .reference-admin-dashboard .reference-admin-actions .reference-action>span, #portal .cmo-dashboard .reference-admin-actions .reference-action>span{ background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; padding:0!important; } /* Keep card text dark and readable on pastel cards, even while body is dark */ body.dark #portal .reference-admin-dashboard .reference-stat-grid .admin-stat-card, body.dark #portal .reference-admin-dashboard .reference-stat-grid .admin-stat-card small, body.dark #portal .reference-admin-dashboard .reference-stat-grid .admin-stat-card strong, body.dark #portal .reference-admin-dashboard .reference-stat-grid .admin-stat-card b, body.dark #portal .reference-admin-dashboard .reference-admin-actions .reference-action, body.dark #portal .reference-admin-dashboard .reference-admin-actions .reference-action strong, body.dark #portal .reference-admin-dashboard .reference-admin-actions .reference-action small, body.dark #portal .cmo-dashboard .reference-stat-grid .admin-stat-card, body.dark #portal .cmo-dashboard .reference-stat-grid .admin-stat-card small, body.dark #portal .cmo-dashboard .reference-stat-grid .admin-stat-card strong, body.dark #portal .cmo-dashboard .reference-stat-grid .admin-stat-card b, body.dark #portal .cmo-dashboard .reference-admin-actions .reference-action, body.dark #portal .cmo-dashboard .reference-admin-actions .reference-action strong, body.dark #portal .cmo-dashboard .reference-admin-actions .reference-action small{ color:#10263b!important; } /* Responsive: preserve laptop row and mobile 2 cards per row */ @media(min-width:1000px){ #portal .reference-admin-dashboard .reference-stat-grid, #portal .cmo-dashboard .reference-stat-grid{ grid-template-columns:repeat(5,minmax(0,1fr))!important; } #portal .reference-admin-dashboard .reference-admin-actions, #portal .cmo-dashboard .reference-admin-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } @media(max-width:650px){ #portal .reference-admin-dashboard .reference-stat-grid, #portal .cmo-dashboard .reference-stat-grid, #portal .reference-admin-dashboard .reference-admin-actions, #portal .cmo-dashboard .reference-admin-actions{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } #portal .reference-admin-dashboard .reference-action, #portal .cmo-dashboard .reference-action{ min-height:138px!important; grid-template-columns:52px minmax(0,1fr) 18px!important; grid-template-rows:52px auto!important; padding:14px!important; } #portal .reference-admin-dashboard .reference-action>span, #portal .cmo-dashboard .reference-action>span{ width:52px!important;height:52px!important; } #portal .reference-admin-dashboard .reference-action>span img, #portal .cmo-dashboard .reference-action>span img{ width:48px!important;height:48px!important; } } /* ========================================================================== V124 FINAL REPAIR — stable dark UI, text-only portal cards, exact grids ========================================================================== */ html,body,#portal{background:#07111b!important;color:#f7fbff!important;color-scheme:dark!important} #portal :is(.reference-admin-dashboard,.cmo-dashboard) :is(.admin-stat-card,.reference-action){background:linear-gradient(145deg,#102334,#0b1824)!important;border:1px solid #29445b!important;color:#f7fbff!important;box-shadow:0 12px 28px rgba(0,0,0,.24)!important} #portal :is(.reference-admin-dashboard,.cmo-dashboard) :is(.admin-stat-card,.reference-action) :is(strong,small,b,div){color:#f7fbff!important} #portal .nav-item>span,#portal .action-card>.action-icon,#portal .mobile-final-card>span,#portal .mobile-final-card>b,#portal .reference-admin-actions .reference-action>span,#portal .reference-admin-actions .reference-action>b,#portal .reference-stat-grid .stat-icon-shell:not(.logo-shell),#portal .reference-school-visual img[src$=".svg?v=142"],#portal .metric-icon,#portal .feature-icon,#portal .pro-symbol img[src$=".svg?v=142"]{display:none!important} #portal .nav-item{grid-template-columns:1fr!important;padding-inline:18px!important} #portal :is(.action-card,.mobile-final-card,.reference-action){text-align:center!important;justify-content:center!important} #portal .reference-admin-actions .reference-action{display:flex!important;align-items:center!important;justify-content:center!important;min-height:138px!important;padding:18px!important;text-align:center!important} #portal .reference-admin-actions .reference-action>div{display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important} #portal .reference-admin-actions .reference-action strong{font-size:19px!important} #portal .mobile-final-card{display:flex!important;align-items:center!important;justify-content:center!important;padding:15px!important;min-height:116px!important} #portal .mobile-final-card>div{text-align:center!important} #portal .top-actions-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important} @media(min-width:1000px){#portal .reference-admin-dashboard .reference-admin-actions,#portal .cmo-dashboard .reference-admin-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}} @media(max-width:650px){#portal .reference-admin-dashboard .reference-admin-actions,#portal .cmo-dashboard .reference-admin-actions,#portal .mobile-final-actions,#portal .top-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#portal .reference-admin-dashboard .reference-action,#portal .cmo-dashboard .reference-action{display:flex!important;min-height:120px!important;padding:14px!important}} @media(max-width:720px){#loginScreen.chooser-mode .login-panel{padding:18px 14px 28px!important}#loginScreen.chooser-mode .login-choice-card{width:100%!important;overflow:visible!important}#loginScreen.chooser-mode .login-type-list{display:grid!important;grid-auto-flow:row!important;grid-template-columns:1fr!important;grid-auto-columns:auto!important;gap:12px!important;width:100%!important;max-width:540px!important;overflow:visible!important;padding:8px 0 16px!important;scroll-snap-type:none!important}#loginScreen.chooser-mode .login-type-card{width:100%!important;min-height:126px!important;height:126px!important;scroll-snap-align:none!important}} #portal .mobile-nav button>span,#portal .empty-records>span,#portal .activity-item>span,#portal .reference-actions-heading>i,#portal .action-card>b,#portal .feature-stat>b,#portal .reference-stat-grid .admin-stat-card>b,#portal .primary-button>span{display:none!important} #portal .topbar .alert-button img,#portal .top-actions .alert-button img{display:none!important} #portal .alert-button:before{content:"Alerts";font-size:10px;font-weight:900;letter-spacing:.02em;color:#f7fbff} #portal .mobile-nav button{gap:0!important}