/* BIH V80 FINAL CLEAN UI — single override layer, no stacked version patches */ :root{ --bih-bg:#020305;--bih-bg2:#070a0f;--bih-sidebar:#05070a;--bih-gold:#e9c35f; --bih-cream:#f4ecde;--bih-cream2:#fbf6ed;--bih-ink:#17283a;--bih-muted:#607286; --bih-line:#d9ccb6;--bih-font:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif; } html,body,button,input,select,textarea,#portal,#loginScreen{font-family:var(--bih-font)!important} body{margin:0!important;background:var(--bih-bg)!important} /* Portal shell */ #portal{background:var(--bih-bg)!important;color:#edf4fb!important} #portal .sidebar{width:268px!important;padding:18px 14px!important;background:linear-gradient(180deg,#020304,#07090d)!important;border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:14px 0 36px rgba(0,0,0,.28)!important} #portal .topbar{height:76px!important;min-height:76px!important;padding:10px 22px!important;background:rgba(4,7,11,.96)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 10px 24px rgba(0,0,0,.18)!important} #portal .content{padding:22px 24px 70px!important;max-width:none!important;width:100%!important;background:transparent!important} #portal .nav-item{min-height:52px!important;margin:4px 0!important;padding:0 14px!important;gap:12px!important;border-radius:14px!important;color:#cfd9e3!important;font-size:14px!important;font-weight:700!important;transition:.18s ease!important} #portal .nav-item span{width:30px!important;height:30px!important;flex:0 0 30px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important} #portal .nav-item img{width:27px!important;height:27px!important;object-fit:contain!important;filter:none!important} #portal .nav-item:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;transform:translateX(2px)} #portal .nav-item.active,#portal .nav-item[aria-current="page"]{background:linear-gradient(90deg,rgba(233,195,95,.20),rgba(233,195,95,.04))!important;color:#f4d77c!important;box-shadow:inset 3px 0 #e9c35f!important} #portal .bih-signature-bar{background:linear-gradient(110deg,#020305,#07101b 55%,#020305)!important;border-bottom:1px solid rgba(233,195,95,.24)!important} #portal .bih-signature-copy strong{font-family:var(--bih-font)!important;font-weight:850!important;letter-spacing:.03em!important} /* Typography */ #portal h1{font-size:30px!important;font-weight:800!important;letter-spacing:-.025em!important} #portal h2{font-weight:800!important;letter-spacing:-.015em!important} #portal h3{font-weight:750!important} #portal .eyebrow{font-weight:850!important;letter-spacing:.08em!important} /* Admin / CMO top stats: coloured dark cards */ #portal .reference-stat-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:13px!important;margin:0 0 20px!important} #portal .admin-stat-card{min-height:132px!important;padding:15px!important;border-radius:19px!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 14px 30px rgba(0,0,0,.24)!important} #portal .admin-stat-card .stat-icon-shell{width:52px!important;height:52px!important;background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important} #portal .admin-stat-card .stat-icon-shell img{width:46px!important;height:46px!important;object-fit:contain!important;filter:none!important} #portal .admin-stat-card>small{font-size:11px!important;font-weight:700!important;color:rgba(255,255,255,.84)!important} #portal .admin-stat-card>strong{font-size:31px!important;font-weight:850!important;color:#fff!important} #portal .admin-stat-card>b{font-size:10px!important;color:rgba(255,255,255,.82)!important} #portal .stat-schools{background:linear-gradient(145deg,#725515,#3e2d08)!important} #portal .stat-pef{background:linear-gradient(145deg,#1262b9,#093665)!important} #portal .stat-peima{background:linear-gradient(145deg,#138150,#07462d)!important} #portal .stat-students{background:linear-gradient(145deg,#6940a5,#341d5b)!important} #portal .stat-teachers{background:linear-gradient(145deg,#983d55,#541c2e)!important} /* School metric cards */ #portal .metric-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important;margin:14px 0 19px!important} #portal .metric-card{min-height:116px!important;padding:15px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 12px 28px rgba(0,0,0,.20)!important} #portal .metric-card strong{font-size:27px!important;font-weight:850!important} #portal .metric-card .metric-icon{width:48px!important;height:48px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important} #portal .metric-card .metric-icon img{width:42px!important;height:42px!important;filter:none!important} /* Main cards — approved light pastel cards on black background */ #portal .mobile-final-actions,#portal .reference-admin-actions,#portal .cmo-dashboard .reference-admin-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin:16px 0 20px!important} #portal .mobile-final-card,#portal .reference-action{position:relative!important;min-height:182px!important;padding:20px!important;border-radius:22px!important;border:1px solid var(--bih-line)!important;box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.85)!important;overflow:hidden!important;display:grid!important;grid-template-columns:76px minmax(0,1fr) 24px!important;grid-template-rows:76px auto!important;gap:12px 14px!important;text-align:left!important;transition:.18s ease!important} #portal .mobile-final-card:hover,#portal .reference-action:hover{transform:translateY(-3px)!important;box-shadow:0 20px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.9)!important} #portal .mobile-final-card>span,#portal .reference-action>span{width:76px!important;height:76px!important;display:grid!important;place-items:center!important;border-radius:18px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(160,150,135,.24)!important;box-shadow:0 8px 18px rgba(23,40,58,.10)!important;padding:0!important} #portal .mobile-final-card>span img,#portal .reference-action>span img{width:66px!important;height:66px!important;object-fit:contain!important;filter:drop-shadow(0 7px 10px rgba(0,0,0,.18))!important} #portal .mobile-final-card>div,#portal .reference-action>div{grid-column:1/3!important;grid-row:2!important;align-self:end!important} #portal .mobile-final-card strong,#portal .reference-action strong{display:block!important;font-size:18px!important;line-height:1.18!important;font-weight:820!important;color:var(--bih-ink)!important;margin-bottom:6px!important;text-shadow:none!important} #portal .mobile-final-card small,#portal .reference-action small{display:block!important;font-size:12px!important;line-height:1.4!important;font-weight:600!important;color:var(--bih-muted)!important} #portal .mobile-final-card>b,#portal .reference-action>b{grid-column:3!important;grid-row:1!important;font-size:31px!important;color:#2c6297!important;align-self:start!important;justify-self:end!important} #portal .mobile-final-card:nth-child(1),#portal .reference-action:nth-child(1){background:linear-gradient(145deg,#eef5ff,#dcecff)!important} #portal .mobile-final-card:nth-child(2),#portal .reference-action:nth-child(2){background:linear-gradient(145deg,#eefbf2,#dbf1e3)!important} #portal .mobile-final-card:nth-child(3),#portal .reference-action:nth-child(3){background:linear-gradient(145deg,#f5efff,#e6dcf8)!important} #portal .mobile-final-card:nth-child(4),#portal .reference-action:nth-child(4){background:linear-gradient(145deg,#fff4df,#f7e5bf)!important} #portal .mobile-final-card:nth-child(5),#portal .reference-action:nth-child(5){background:linear-gradient(145deg,#fff0ee,#f8ddd8)!important} #portal .mobile-final-card:nth-child(6),#portal .reference-action:nth-child(6){background:linear-gradient(145deg,#eef9fb,#d9edf3)!important} #portal .mobile-final-card:nth-child(7){background:linear-gradient(145deg,#f7f2ff,#e8e0fb)!important} #portal .mobile-final-card:nth-child(8){background:linear-gradient(145deg,#eef8ff,#dbeef8)!important} #portal .mobile-final-card:nth-child(9){background:linear-gradient(145deg,#fff1e4,#f6dfca)!important} /* Remove old duplicate school dashboard blocks */ #portal .school-dashboard-only .core-compliance-heading,#portal .school-dashboard-only .top-actions-grid,#portal .school-dashboard-only>.feature-card{display:none!important} /* Panels in dark theme stay readable, forms remain dark */ body.dark #portal .panel,body.dark #portal .content-card,body.dark #portal .table-card,body.dark #portal .network-school-card,body.dark #portal .cmo-account-card,body.dark #portal .cmo-visit-card,body.dark #portal .admin-location-card{background:#0a0f16!important;border-color:#253140!important;color:#eef5fb!important;box-shadow:0 14px 28px rgba(0,0,0,.22)!important} body.dark #portal .panel :where(h1,h2,h3,h4,strong,b,label,th),body.dark #portal .content-card :where(h1,h2,h3,h4,strong,b,label,th){color:#eef5fb!important} body.dark #portal .panel :where(p,small,span,td),body.dark #portal .content-card :where(p,small,span,td){color:#aebdcb!important} body.dark #portal input,body.dark #portal select,body.dark #portal textarea{background:#070b10!important;color:#f1f6fb!important;border-color:#2a394a!important} /* LIGHT MODE = cream */ body:not(.dark){background:var(--bih-cream)!important} body:not(.dark) #portal{background:var(--bih-cream)!important;color:var(--bih-ink)!important} body:not(.dark) #portal .sidebar{background:linear-gradient(180deg,#efe4d2,#e8dcc8)!important;border-right-color:#d5c6ad!important;box-shadow:12px 0 28px rgba(94,74,39,.08)!important} body:not(.dark) #portal .topbar{background:#faf5eb!important;border-bottom-color:#dacdb8!important;box-shadow:0 8px 20px rgba(92,71,34,.08)!important} body:not(.dark) #portal .bih-signature-bar{background:linear-gradient(110deg,#f8f1e6,#f0e5d2)!important;border-bottom-color:#d7c7ab!important;color:var(--bih-ink)!important} body:not(.dark) #portal .bih-signature-copy strong{color:var(--bih-ink)!important;text-shadow:none!important} body:not(.dark) #portal .bih-signature-copy small{color:#5d6f7e!important} body:not(.dark) #portal .nav-item{color:#263c51!important} body:not(.dark) #portal .nav-item:hover{background:rgba(91,71,36,.07)!important;color:#17283a!important} body:not(.dark) #portal .nav-item.active{background:linear-gradient(90deg,rgba(185,137,35,.18),rgba(185,137,35,.04))!important;color:#7c5d16!important;box-shadow:inset 3px 0 #b68a2a!important} body:not(.dark) #portal .content{background:transparent!important} body:not(.dark) #portal .panel,body:not(.dark) #portal .content-card,body:not(.dark) #portal .table-card,body:not(.dark) #portal .network-school-card,body:not(.dark) #portal .cmo-account-card,body:not(.dark) #portal .cmo-visit-card,body:not(.dark) #portal .admin-location-card{background:var(--bih-cream2)!important;border-color:#d8cab2!important;box-shadow:0 12px 26px rgba(91,71,36,.08)!important} body:not(.dark) #portal input,body:not(.dark) #portal select,body:not(.dark) #portal textarea{background:#fffaf2!important;color:var(--bih-ink)!important;border-color:#d6c8b1!important} /* Login choice + role forms */ #loginScreen{font-family:var(--bih-font)!important} #loginScreen.chooser-mode .login-type-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;width:min(1240px,calc(100vw - 48px))!important;max-width:1240px!important;margin:auto!important} #loginScreen.chooser-mode .login-type-card{min-height:270px!important;border-radius:24px!important;box-shadow:0 22px 52px rgba(0,0,0,.34)!important} #loginScreen.chooser-mode .login-type-card strong{font-family:var(--bih-font)!important;font-weight:850!important;letter-spacing:.03em!important} /* responsive */ @media(max-width:1220px){#portal .sidebar{width:244px!important}#portal .reference-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}#portal .mobile-final-actions,#portal .reference-admin-actions,#portal .cmo-dashboard .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:900px){ #loginScreen.chooser-mode .login-type-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:calc(100vw - 24px)!important;gap:11px!important} #portal .content{padding:14px 12px 92px!important} #portal .metric-grid,#portal .reference-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #portal .mobile-final-actions,#portal .reference-admin-actions,#portal .cmo-dashboard .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #portal .mobile-final-card,#portal .reference-action{min-height:138px!important;padding:13px 11px!important;border-radius:17px!important;grid-template-columns:50px minmax(0,1fr) 16px!important;grid-template-rows:50px auto!important;gap:8px!important} #portal .mobile-final-card>span,#portal .reference-action>span{width:50px!important;height:50px!important;border-radius:13px!important} #portal .mobile-final-card>span img,#portal .reference-action>span img{width:44px!important;height:44px!important} #portal .mobile-final-card strong,#portal .reference-action strong{font-size:13px!important;margin-bottom:4px!important} #portal .mobile-final-card small,#portal .reference-action small{font-size:9.4px!important;line-height:1.32!important} #portal .mobile-final-card>b,#portal .reference-action>b{font-size:23px!important} #portal .admin-stat-card{min-height:116px!important;padding:12px!important} #portal .admin-stat-card>strong{font-size:24px!important} #portal h1{font-size:25px!important} } @media(max-width:520px){#portal .metric-card{min-height:104px!important;padding:11px!important}#portal .metric-card strong{font-size:22px!important}.reference-admin-hero{padding:16px!important}} /* V81 PRODUCTION CLEANUP — one visible dashboard system per role */ .role-hidden{display:none!important} body.admin-mode #portal .school-dashboard-only, body.admin-mode #portal .cmo-dashboard-only, body.cmo-mode #portal .school-dashboard-only, body.cmo-mode #portal .admin-dashboard-only, body.pef-mode #portal .admin-dashboard-only, body.pef-mode #portal .cmo-dashboard-only, body.peima-mode #portal .admin-dashboard-only, body.peima-mode #portal .cmo-dashboard-only{display:none!important} /* School: keep exactly one final action grid; retire duplicate legacy dashboard cards. */ body:is(.pef-mode,.peima-mode) #dashboard .school-dashboard-only .core-compliance-heading, body:is(.pef-mode,.peima-mode) #dashboard .school-dashboard-only .top-actions-grid, body:is(.pef-mode,.peima-mode) #dashboard .school-dashboard-only > .feature-card{display:none!important} body:is(.pef-mode,.peima-mode) #dashboard .school-dashboard-only .mobile-final-actions{display:grid!important} /* Final approved layout: black dark theme, cream light theme, pastel action cards. */ body.dark{background:#020304!important} body.dark #portal,body.dark #portal .content,body.dark #portal .app-shell{background:#020304!important} body:not(.dark){background:#f4ecdf!important} body:not(.dark) #portal,body:not(.dark) #portal .content,body:not(.dark) #portal .app-shell{background:#f4ecdf!important} /* Desktop card geometry */ @media (min-width:1100px){ #portal .school-dashboard-only .mobile-final-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important} #portal .school-dashboard-only .mobile-final-card{min-height:172px!important;padding:22px!important;border-radius:22px!important;grid-template-columns:70px minmax(0,1fr) 22px!important;grid-template-rows:70px auto!important;column-gap:15px!important} #portal .school-dashboard-only .mobile-final-card>span{width:70px!important;height:70px!important} #portal .school-dashboard-only .mobile-final-card>span img{width:56px!important;height:56px!important} #portal .school-dashboard-only .mobile-final-card strong{font-size:19px!important;line-height:1.18!important} #portal .school-dashboard-only .mobile-final-card small{font-size:12.5px!important;line-height:1.42!important} #portal .admin-dashboard-only .reference-admin-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important} #portal .admin-dashboard-only .reference-action{min-height:172px!important;padding:22px!important;border-radius:22px!important;grid-template-columns:70px minmax(0,1fr) 22px!important;grid-template-rows:70px auto!important;column-gap:15px!important} #portal .admin-dashboard-only .reference-action>span{width:70px!important;height:70px!important} #portal .admin-dashboard-only .reference-action>span img{width:56px!important;height:56px!important} #portal .admin-dashboard-only .reference-action strong{font-size:19px!important} #portal .admin-dashboard-only .reference-action small{font-size:12.5px!important} } /* Tablet/mobile: exactly two cards per row and no overflow. */ @media (max-width:1099px){ #portal .school-dashboard-only .mobile-final-actions, #portal .admin-dashboard-only .reference-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} } @media (max-width:600px){ #portal .school-dashboard-only .mobile-final-card, #portal .admin-dashboard-only .reference-action{min-width:0!important;min-height:132px!important;padding:14px 12px!important;border-radius:17px!important;grid-template-columns:52px minmax(0,1fr) 16px!important;grid-template-rows:52px auto!important;column-gap:9px!important} #portal .school-dashboard-only .mobile-final-card>span, #portal .admin-dashboard-only .reference-action>span{width:52px!important;height:52px!important} #portal .school-dashboard-only .mobile-final-card>span img, #portal .admin-dashboard-only .reference-action>span img{width:42px!important;height:42px!important} #portal .school-dashboard-only .mobile-final-card strong, #portal .admin-dashboard-only .reference-action strong{font-size:14px!important;line-height:1.16!important} #portal .school-dashboard-only .mobile-final-card small, #portal .admin-dashboard-only .reference-action small{font-size:10px!important;line-height:1.34!important} } /* Pastel surfaces in dark mode: text stays dark and readable. */ body.dark #portal .school-dashboard-only .mobile-final-card, body.dark #portal .admin-dashboard-only .reference-action{border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 14px 30px rgba(0,0,0,.34)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(1),body.dark #portal .admin-dashboard-only .reference-action:nth-child(1){background:linear-gradient(145deg,#eaf3ff,#dcecff)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(2),body.dark #portal .admin-dashboard-only .reference-action:nth-child(2){background:linear-gradient(145deg,#e9f8ef,#d8f0e2)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(3),body.dark #portal .admin-dashboard-only .reference-action:nth-child(3){background:linear-gradient(145deg,#f2ebff,#e4d9fa)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(4),body.dark #portal .admin-dashboard-only .reference-action:nth-child(4){background:linear-gradient(145deg,#fff2dc,#f5e2bd)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(5),body.dark #portal .admin-dashboard-only .reference-action:nth-child(5){background:linear-gradient(145deg,#ffefec,#f6d9d3)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(6),body.dark #portal .admin-dashboard-only .reference-action:nth-child(6){background:linear-gradient(145deg,#e9f7fa,#d7ebf0)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(7){background:linear-gradient(145deg,#fff0df,#f5dfc0)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(8){background:linear-gradient(145deg,#e8f6ff,#d5ebfa)!important} body.dark #portal .school-dashboard-only .mobile-final-card:nth-child(9){background:linear-gradient(145deg,#f0ebff,#e1d8f7)!important} body.dark #portal :is(.school-dashboard-only .mobile-final-card,.admin-dashboard-only .reference-action) strong{color:#142638!important;text-shadow:none!important} body.dark #portal :is(.school-dashboard-only .mobile-final-card,.admin-dashboard-only .reference-action) small{color:#536a7e!important;opacity:1!important} body.dark #portal :is(.school-dashboard-only .mobile-final-card,.admin-dashboard-only .reference-action)>b{color:#315e88!important} body.dark #portal :is(.school-dashboard-only .mobile-final-card,.admin-dashboard-only .reference-action)>span{background:rgba(255,255,255,.56)!important;border:1px solid rgba(63,79,94,.13)!important} /* Light theme: cream page, slightly lighter cream cards, no stark white flood. */ body:not(.dark) #portal .school-dashboard-only .mobile-final-card, body:not(.dark) #portal .admin-dashboard-only .reference-action{background:#fbf5ea!important;border:1px solid #ddcfb7!important;box-shadow:0 10px 24px rgba(94,70,33,.09)!important} body:not(.dark) #portal :is(.school-dashboard-only .mobile-final-card,.admin-dashboard-only .reference-action) strong{color:#17324b!important} body:not(.dark) #portal :is(.school-dashboard-only .mobile-final-card,.admin-dashboard-only .reference-action) small{color:#63778a!important} /* Sidebar stays dark in dark mode and warm cream in light mode. */ body.dark #portal .sidebar{background:linear-gradient(180deg,#030405,#080a0d 62%,#030405)!important} body:not(.dark) #portal .sidebar{background:linear-gradient(180deg,#f4ead9,#eee1cc)!important;border-right-color:#d6c6aa!important} /* ========================================================================== V82 LAPTOP SIDEBAR VISIBILITY FIX Targeted fix only: preserve the current live design and functionality. ========================================================================== */ @media (min-width: 721px){ html body #portal{ --sidebar:268px!important; display:grid!important; grid-template-columns:268px minmax(0,1fr)!important; } html body #portal .sidebar{ display:flex!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; transform:none!important; position:fixed!important; left:0!important; right:auto!important; top:112px!important; bottom:0!important; width:268px!important; height:auto!important; padding:18px 14px!important; overflow-y:auto!important; z-index:45!important; } html body #portal .side-nav{ display:grid!important; visibility:visible!important; opacity:1!important; width:100%!important; } html body #portal .nav-item:not(.role-hidden){ display:flex!important; visibility:visible!important; opacity:1!important; } html body #portal .app-shell{ grid-column:2!important; grid-row:1!important; margin-left:0!important; width:auto!important; min-width:0!important; } html body #portal .content, html body #portal .topbar{ margin-left:0!important; } } /* ========================================================================== V83 TARGETED FIXES 1) Light-theme text contrast 2) Preserve original icon colours and improve contrast on cards 3) Downloads visible/accessible to Admin only ========================================================================== */ /* LIGHT THEME — warm cream background + strong readable text */ body:not(.dark) #portal, body:not(.dark) #portal .content, body:not(.dark) #portal .view { background:#f6efe4!important; color:#17283a!important; } body:not(.dark) #portal :where( h1,h2,h3,h4,h5,h6,strong,b,label,legend,th, .topbar h2,.section-heading h2,.reference-actions-heading h2, .page-heading h1,.page-heading h2 ){ color:#17283a!important; opacity:1!important; text-shadow:none!important; } body:not(.dark) #portal :where( p,small,span,td,.muted,.helper-text,.section-subtitle, .cell-subtitle,.detail-list span,.coordinate-grid span ){ color:#51677b!important; opacity:1!important; text-shadow:none!important; } /* Keep colored cards readable in light theme */ body:not(.dark) #portal :where( .reference-action,.mobile-final-card,.action-card,.feature-card, .admin-stat-card,.metric-card,.panel,.content-card,.table-card, .network-school-card,.cmo-account-card,.cmo-visit-card, .admin-location-card,.clean-status-card ) :where(h1,h2,h3,h4,strong,b,label,th){ color:#142638!important; } body:not(.dark) #portal :where( .reference-action,.mobile-final-card,.action-card,.feature-card, .admin-stat-card,.metric-card,.panel,.content-card,.table-card, .network-school-card,.cmo-account-card,.cmo-visit-card, .admin-location-card,.clean-status-card ) :where(p,small,span,td){ color:#526b80!important; } /* Inputs/table readability */ body:not(.dark) #portal input, body:not(.dark) #portal select, body:not(.dark) #portal textarea{ background:#fffaf2!important; color:#17283a!important; border-color:#cdbfaa!important; } body:not(.dark) #portal input::placeholder, body:not(.dark) #portal textarea::placeholder{ color:#74869a!important; opacity:1!important; } /* SIDEBAR light theme */ body:not(.dark) #portal .sidebar{ background:linear-gradient(180deg,#f4eadb 0%,#eee1cf 100%)!important; color:#203448!important; border-right-color:#d2c2aa!important; } body:not(.dark) #portal .nav-item{ color:#294156!important; } body:not(.dark) #portal .nav-item:hover{ color:#10263b!important; background:rgba(255,255,255,.55)!important; } body:not(.dark) #portal .nav-item.active, body:not(.dark) #portal .nav-item[aria-current="page"]{ color:#7b5712!important; background:linear-gradient(90deg,#f6dfaa,#fff6df)!important; } /* ICONS — never force the supplied SVG/PNG artwork to white */ #portal img[src*="-icon.svg"], #portal .nav-item img, #portal .reference-action img, #portal .mobile-final-card img, #portal .action-card img, #portal .feature-card img, #portal .metric-card img, #portal .admin-stat-card img{ filter:none!important; opacity:1!important; mix-blend-mode:normal!important; } /* Distinct icon holders by card family for clearer visibility */ #portal .reference-action:nth-child(1)>span, #portal .mobile-final-card:nth-child(1)>span{background:#dbeaff!important;border-color:#a8c9f2!important} #portal .reference-action:nth-child(2)>span, #portal .mobile-final-card:nth-child(2)>span{background:#dff4e6!important;border-color:#a8d8b8!important} #portal .reference-action:nth-child(3)>span, #portal .mobile-final-card:nth-child(3)>span{background:#eee2ff!important;border-color:#c7acec!important} #portal .reference-action:nth-child(4)>span, #portal .mobile-final-card:nth-child(4)>span{background:#ffebc8!important;border-color:#e1be78!important} #portal .reference-action:nth-child(5)>span, #portal .mobile-final-card:nth-child(5)>span{background:#ffe1dc!important;border-color:#e7ada3!important} #portal .reference-action:nth-child(6)>span, #portal .mobile-final-card:nth-child(6)>span{background:#dbf1f5!important;border-color:#9ecbd4!important} #portal .reference-action:nth-child(7)>span, #portal .mobile-final-card:nth-child(7)>span{background:#e5e5ff!important;border-color:#b9b8e7!important} #portal .reference-action:nth-child(8)>span, #portal .mobile-final-card:nth-child(8)>span{background:#f5dff0!important;border-color:#d7abcd!important} #portal .reference-action:nth-child(9)>span, #portal .mobile-final-card:nth-child(9)>span{background:#e8edf2!important;border-color:#b9c4ce!important} /* Admin stat icons: retain official and supplied colours */ #portal .stat-icon-shell img, #portal .metric-icon img{ filter:none!important; opacity:1!important; } /* DOWNLOADS — admin only, desktop + mobile */ body:not(.admin-mode) #portal [data-view="reports"], body:not(.admin-mode) #portal #reports, body:not(.admin-mode) #portal .downloads-heading, body:not(.admin-mode) #portal .download-centre-grid, body:not(.admin-mode) #portal .download-note{ display:none!important; } /* ========================================================================== V84 TARGETED VISUAL FIX ONLY - Card backgrounds/sizes/layout remain exactly as the current website. - Icon shapes remain unchanged; only white SVG icons are colourized. - Text colour follows the existing card colour for better contrast. - Light-mode text contrast is repaired. ========================================================================== */ /* Do NOT alter existing card backgrounds, borders, sizes or layout. */ /* ---------- LIGHT MODE TEXT VISIBILITY ---------- */ body:not(.dark) #portal, body:not(.dark) #portal .view, body:not(.dark) #portal .content{ color:#14283b!important; } body:not(.dark) #portal :where( h1,h2,h3,h4,h5,h6,strong,b,label,legend,th, .topbar h2,.section-heading h2,.reference-actions-heading h2, .page-heading h1,.page-heading h2 ){ color:#14283b!important; opacity:1!important; text-shadow:none!important; } body:not(.dark) #portal :where( p,small,td,.muted,.helper-text,.section-subtitle, .cell-subtitle,.detail-list span,.coordinate-grid span ){ color:#536a7f!important; opacity:1!important; text-shadow:none!important; } body:not(.dark) #portal input, body:not(.dark) #portal select, body:not(.dark) #portal textarea{ color:#14283b!important; } body:not(.dark) #portal input::placeholder, body:not(.dark) #portal textarea::placeholder{ color:#788a9b!important; opacity:1!important; } /* ---------- KEEP SYMBOL SHAPES; COLOURIZE WHITE SVG ARTWORK ONLY ---------- */ #portal img[src*="-icon.svg"]{ opacity:1!important; mix-blend-mode:normal!important; } /* Main action cards: same symbol files, only CSS colour changes. */ #portal .reference-action:nth-child(1) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(1) img[src*="-icon.svg"], #portal .action-grid .action-card:nth-child(1) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(43%) sepia(96%) saturate(2110%) hue-rotate(195deg) brightness(99%) contrast(94%)!important; } #portal .reference-action:nth-child(2) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(2) img[src*="-icon.svg"], #portal .action-grid .action-card:nth-child(2) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(48%) sepia(71%) saturate(1105%) hue-rotate(99deg) brightness(93%) contrast(91%)!important; } #portal .reference-action:nth-child(3) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(3) img[src*="-icon.svg"], #portal .action-grid .action-card:nth-child(3) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(1906%) hue-rotate(247deg) brightness(95%) contrast(94%)!important; } #portal .reference-action:nth-child(4) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(4) img[src*="-icon.svg"], #portal .action-grid .action-card:nth-child(4) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(67%) sepia(78%) saturate(1016%) hue-rotate(350deg) brightness(102%) contrast(96%)!important; } #portal .reference-action:nth-child(5) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(5) img[src*="-icon.svg"], #portal .action-grid .action-card:nth-child(5) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(2477%) hue-rotate(337deg) brightness(100%) contrast(96%)!important; } #portal .reference-action:nth-child(6) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(6) img[src*="-icon.svg"], #portal .action-grid .action-card:nth-child(6) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(56%) sepia(76%) saturate(1186%) hue-rotate(148deg) brightness(92%) contrast(92%)!important; } #portal .reference-action:nth-child(7) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(7) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(37%) sepia(86%) saturate(1874%) hue-rotate(221deg) brightness(94%) contrast(95%)!important; } #portal .reference-action:nth-child(8) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(8) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(48%) sepia(65%) saturate(1374%) hue-rotate(287deg) brightness(91%) contrast(92%)!important; } #portal .reference-action:nth-child(9) img[src*="-icon.svg"], #portal .mobile-final-card:nth-child(9) img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(45%) sepia(18%) saturate(886%) hue-rotate(165deg) brightness(92%) contrast(90%)!important; } /* Admin summary symbols: official PEF/PEIMA logos are untouched. */ #portal .stat-schools img[src*="-icon.svg"], #portal .stat-schools img[src*="school-icon.svg"]{ filter:brightness(0) saturate(100%) invert(69%) sepia(75%) saturate(757%) hue-rotate(359deg) brightness(99%) contrast(91%)!important; } #portal .stat-students img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(50%) sepia(77%) saturate(1288%) hue-rotate(335deg) brightness(100%) contrast(93%)!important; } #portal .stat-teachers img[src*="-icon.svg"]{ filter:brightness(0) saturate(100%) invert(43%) sepia(62%) saturate(1270%) hue-rotate(242deg) brightness(93%) contrast(92%)!important; } /* Sidebar: same symbols, coloured individually instead of white. */ #portal .nav-item:nth-child(1) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(67%) sepia(78%) saturate(1016%) hue-rotate(350deg) brightness(102%) contrast(96%)!important} #portal .nav-item:nth-child(2) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(43%) sepia(96%) saturate(2110%) hue-rotate(195deg) brightness(99%) contrast(94%)!important} #portal .nav-item:nth-child(3) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(48%) sepia(71%) saturate(1105%) hue-rotate(99deg) brightness(93%) contrast(91%)!important} #portal .nav-item:nth-child(4) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(1906%) hue-rotate(247deg) brightness(95%) contrast(94%)!important} #portal .nav-item:nth-child(5) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(50%) sepia(77%) saturate(1288%) hue-rotate(335deg) brightness(100%) contrast(93%)!important} #portal .nav-item:nth-child(6) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(56%) sepia(76%) saturate(1186%) hue-rotate(148deg) brightness(92%) contrast(92%)!important} #portal .nav-item:nth-child(7) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(2477%) hue-rotate(337deg) brightness(100%) contrast(96%)!important} #portal .nav-item:nth-child(8) img[src*="-icon.svg"]{filter:brightness(0) saturate(100%) invert(37%) sepia(86%) saturate(1874%) hue-rotate(221deg) brightness(94%) contrast(95%)!important} /* ---------- TEXT COLOUR FOLLOWS EXISTING CARD COLOUR ---------- */ /* No background changes below. */ #portal .reference-action.action-students :where(strong,small,b), #portal .mobile-final-card.c-blue :where(strong,small,b){ color:#0c4f9b!important; } #portal .reference-action.action-staff :where(strong,small,b), #portal .mobile-final-card.c-green :where(strong,small,b){ color:#14643d!important; } #portal .reference-action.action-clean :where(strong,small,b), #portal .mobile-final-card.c-purple :where(strong,small,b){ color:#5d3394!important; } #portal .reference-action.action-register :where(strong,small,b), #portal .mobile-final-card.c-orange :where(strong,small,b){ color:#8a5707!important; } #portal .reference-action.action-location :where(strong,small,b), #portal .mobile-final-card.c-coral :where(strong,small,b){ color:#9a3543!important; } #portal .reference-action.action-school-day :where(strong,small,b), #portal .mobile-final-card.c-teal :where(strong,small,b){ color:#0c6773!important; } /* Generic card text fallback in light mode, without touching backgrounds. */ body:not(.dark) #portal :where( .reference-action,.mobile-final-card,.action-card,.feature-card, .admin-stat-card,.metric-card ) :where(strong,h2,h3,h4,b){ opacity:1!important; text-shadow:none!important; } body:not(.dark) #portal :where( .reference-action,.mobile-final-card,.action-card,.feature-card, .admin-stat-card,.metric-card ) :where(small,p){ opacity:1!important; } /* DOWNLOADS remain Admin-only from V83 request. */ body:not(.admin-mode) #portal [data-view="reports"], body:not(.admin-mode) #portal #reports, body:not(.admin-mode) #portal .downloads-heading, body:not(.admin-mode) #portal .download-centre-grid, body:not(.admin-mode) #portal .download-note{ display:none!important; } /* ========================================================================== V85 REMOVE ALL UI SYMBOLS / KEEP OFFICIAL LOGOS - Removes feature/sidebar/stat SVG symbols. - Keeps BIH, Admin, CMO, PEF and PEIMA official logos. - Rebalances card text so cards do not look empty. ========================================================================== */ /* Hide non-logo UI symbols/icons everywhere */ #portal img[src*="-icon.svg"], #portal img[src*="fingerprint-icon.svg"], #portal img[src*="face-scan-icon.svg"], #portal img[src*="register-photo-icon.svg"], #portal img[src*="alert-status-icon.svg"]{ display:none!important; } /* Remove now-empty icon shells on action/navigation/stat cards */ #portal .reference-action > span:has(img[src*="-icon.svg"]), #portal .mobile-final-card > span:has(img[src*="-icon.svg"]), #portal .action-icon:has(img[src*="-icon.svg"]), #portal .feature-icon:has(img[src*="-icon.svg"]), #portal .metric-icon:has(img[src*="-icon.svg"]), #portal .stat-icon-shell:not(.logo-shell):has(img[src*="-icon.svg"]), #portal .nav-item > span:has(img[src*="-icon.svg"]){ display:none!important; } /* Sidebar becomes clean text-only navigation */ #portal .nav-item{ gap:0!important; padding-left:18px!important; padding-right:16px!important; } #portal .nav-item > span + *{ margin-left:0!important; } /* Main Admin/CMO action cards: text + arrow only */ #portal .reference-action{ grid-template-columns:minmax(0,1fr) 26px!important; grid-template-rows:auto!important; align-items:center!important; column-gap:16px!important; } #portal .reference-action > div{ grid-column:1!important; grid-row:1!important; align-self:center!important; min-width:0!important; } #portal .reference-action > b{ grid-column:2!important; grid-row:1!important; align-self:center!important; justify-self:end!important; } #portal .reference-action strong{ display:block!important; font-size:20px!important; line-height:1.18!important; font-weight:800!important; } #portal .reference-action small{ display:block!important; margin-top:7px!important; font-size:12.5px!important; line-height:1.38!important; font-weight:600!important; } /* School/mobile cards: text + arrow only */ #portal .mobile-final-card{ grid-template-columns:minmax(0,1fr) 24px!important; align-items:center!important; column-gap:10px!important; } #portal .mobile-final-card > div{ grid-column:1!important; min-width:0!important; } #portal .mobile-final-card > b{ grid-column:2!important; justify-self:end!important; } #portal .mobile-final-card strong{ display:block!important; font-weight:800!important; } #portal .mobile-final-card small{ display:block!important; margin-top:5px!important; font-weight:600!important; } /* Legacy action/feature cards also become text-focused */ #portal .action-card, #portal .feature-card{ align-content:center!important; } #portal .action-card h3, #portal .feature-card h3{ margin-top:0!important; font-weight:800!important; } #portal .action-card p, #portal .feature-card p{ font-weight:600!important; } /* Summary cards: keep official PEF/PEIMA logos, remove generic symbols */ #portal .admin-stat-card:not(.stat-pef):not(.stat-peima){ grid-template-columns:1fr!important; } #portal .admin-stat-card:not(.stat-pef):not(.stat-peima) > small, #portal .admin-stat-card:not(.stat-pef):not(.stat-peima) > strong, #portal .admin-stat-card:not(.stat-pef):not(.stat-peima) > b{ grid-column:1!important; } #portal .metric-card{ grid-template-columns:1fr auto!important; } #portal .metric-card > div:not(.metric-icon){ grid-column:1!important; } /* Preserve official logos explicitly */ #portal img[src*="bih-brand"], #portal img[src*="admin-logo"], #portal img[src*="cmo-logo"], #portal img[src*="pef-logo"], #portal img[src*="peima-logo"], #loginScreen img[src*="bih-brand"], #loginScreen img[src*="admin-logo"], #loginScreen img[src*="cmo-logo"], #loginScreen img[src*="pef-logo"], #loginScreen img[src*="peima-logo"]{ display:block!important; } /* Text contrast tuned to existing card colours */ #portal .reference-action.action-students :where(strong,small,b){color:#0c4f9b!important} #portal .reference-action.action-staff :where(strong,small,b){color:#14643d!important} #portal .reference-action.action-clean :where(strong,small,b){color:#5d3394!important} #portal .reference-action.action-register :where(strong,small,b){color:#8a5707!important} #portal .reference-action.action-location :where(strong,small,b){color:#9a3543!important} #portal .reference-action.action-school-day :where(strong,small,b){color:#0c6773!important} #portal .mobile-final-card.c-blue :where(strong,small,b){color:#0c4f9b!important} #portal .mobile-final-card.c-green :where(strong,small,b){color:#14643d!important} #portal .mobile-final-card.c-purple :where(strong,small,b){color:#5d3394!important} #portal .mobile-final-card.c-orange :where(strong,small,b){color:#8a5707!important} #portal .mobile-final-card.c-coral :where(strong,small,b){color:#9a3543!important} #portal .mobile-final-card.c-teal :where(strong,small,b){color:#0c6773!important} #portal .mobile-final-card.c-indigo :where(strong,small,b){color:#344d9b!important} #portal .mobile-final-card.c-pink :where(strong,small,b){color:#914470!important} #portal .mobile-final-card.c-slate :where(strong,small,b){color:#41586e!important} /* Light mode readability */ body:not(.dark) #portal :where(h1,h2,h3,h4,h5,h6,strong,b,label,legend,th){ color:#14283b!important; opacity:1!important; text-shadow:none!important; } body:not(.dark) #portal :where(p,small,td,.muted,.helper-text,.section-subtitle,.cell-subtitle){ color:#536a7f!important; opacity:1!important; } body:not(.dark) #portal .reference-action.action-students :where(strong,small,b){color:#0c4f9b!important} body:not(.dark) #portal .reference-action.action-staff :where(strong,small,b){color:#14643d!important} body:not(.dark) #portal .reference-action.action-clean :where(strong,small,b){color:#5d3394!important} body:not(.dark) #portal .reference-action.action-register :where(strong,small,b){color:#8a5707!important} body:not(.dark) #portal .reference-action.action-location :where(strong,small,b){color:#9a3543!important} body:not(.dark) #portal .reference-action.action-school-day :where(strong,small,b){color:#0c6773!important} /* Desktop spacing after symbol removal */ @media (min-width:901px){ #portal .reference-action{ padding:24px 24px!important; } } /* Mobile spacing after symbol removal */ @media (max-width:700px){ #portal .mobile-final-card, #portal .reference-action{ padding:14px 14px!important; } #portal .mobile-final-card strong, #portal .reference-action strong{ font-size:14px!important; } #portal .mobile-final-card small, #portal .reference-action small{ font-size:10.5px!important; } } /* ========================================================================== V86 PROFESSIONAL TEXT-LED UI Requested changes only: - High-contrast text in dark + light themes - More distinctive professional typography - No symbol/icon boxes anywhere in the portal - Premium login chooser cards (Admin / CMO / PEF / PEIMA) - Colourful laptop left-menu slides with larger text - Bottom school feature cards on one line on laptop ========================================================================== */ /* ---------- TYPOGRAPHY ---------- */ body, #portal, #loginScreen{ font-family:"Trebuchet MS","Segoe UI Variable","Segoe UI",Arial,sans-serif!important; font-feature-settings:"kern" 1,"liga" 1!important; } #portal :where(h1,h2,h3,h4,strong,.reference-action strong,.mobile-final-card strong), #loginScreen :where(h1,h2,h3,strong){ font-family:"Trebuchet MS","Segoe UI Variable","Segoe UI",Arial,sans-serif!important; letter-spacing:-.2px!important; } #portal h1,#portal h2,#portal h3, #loginScreen h1,#loginScreen h2{ font-weight:800!important; } /* ---------- DARK THEME READABILITY ---------- */ body.dark #portal :where(h1,h2,h3,h4,h5,h6,label,legend,th){ color:#f4f7fb!important; opacity:1!important; text-shadow:none!important; } body.dark #portal :where(p,small,td,.muted,.helper-text,.section-subtitle,.cell-subtitle){ color:#b9c6d3!important; opacity:1!important; } body.dark #portal input, body.dark #portal select, body.dark #portal textarea{ color:#f5f8fb!important; background:#0c121a!important; border-color:#2a3a4c!important; } body.dark #portal input::placeholder, body.dark #portal textarea::placeholder{ color:#8393a3!important; opacity:1!important; } /* ---------- LIGHT THEME READABILITY ---------- */ body:not(.dark) #portal, body:not(.dark) #portal .view, body:not(.dark) #portal .content{ color:#14283b!important; } body:not(.dark) #portal :where(h1,h2,h3,h4,h5,h6,strong,b,label,legend,th){ color:#14283b!important; opacity:1!important; text-shadow:none!important; } body:not(.dark) #portal :where(p,small,td,.muted,.helper-text,.section-subtitle,.cell-subtitle){ color:#52687b!important; opacity:1!important; text-shadow:none!important; } body:not(.dark) #portal input, body:not(.dark) #portal select, body:not(.dark) #portal textarea{ color:#14283b!important; background:#fffaf2!important; border-color:#cdbfa9!important; } body:not(.dark) #portal input::placeholder, body:not(.dark) #portal textarea::placeholder{ color:#77899a!important; opacity:1!important; } /* ---------- REMOVE ALL NON-OFFICIAL SYMBOL / ICON BOXES ---------- */ #portal img[src*="-icon.svg"], #portal img[src*="fingerprint-icon.svg"], #portal img[src*="face-scan-icon.svg"], #portal img[src*="register-photo-icon.svg"], #portal img[src*="alert-status-icon.svg"]{ display:none!important; } #portal :where( .reference-action>span, .mobile-final-card>span, .action-icon, .feature-icon, .metric-icon, .stat-icon-shell:not(.logo-shell), .school-icon ){ display:none!important; width:0!important; height:0!important; padding:0!important; margin:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } /* Keep official logo frames */ #portal .stat-icon-shell.logo-shell, #portal img[src*="pef-logo"], #portal img[src*="peima-logo"], #portal img[src*="admin-logo"], #portal img[src*="cmo-logo"], #portal img[src*="bih-brand"], #loginScreen img[src*="pef-logo"], #loginScreen img[src*="peima-logo"], #loginScreen img[src*="admin-logo"], #loginScreen img[src*="cmo-logo"], #loginScreen img[src*="bih-brand"]{ display:block!important; } /* ---------- CARD TEXT BALANCE ---------- */ #portal .reference-action{ grid-template-columns:minmax(0,1fr) 24px!important; align-items:center!important; padding:22px 24px!important; } #portal .reference-action>div{grid-column:1!important;min-width:0!important} #portal .reference-action>b{grid-column:2!important;justify-self:end!important} #portal .reference-action strong{ display:block!important; font-size:20px!important; line-height:1.18!important; font-weight:800!important; } #portal .reference-action small{ display:block!important; margin-top:7px!important; font-size:13px!important; line-height:1.38!important; font-weight:600!important; } #portal .mobile-final-card{ grid-template-columns:minmax(0,1fr) 22px!important; align-items:center!important; } #portal .mobile-final-card>div{grid-column:1!important;min-width:0!important} #portal .mobile-final-card>b{grid-column:2!important;justify-self:end!important} #portal .mobile-final-card strong{font-weight:800!important} #portal .mobile-final-card small{font-weight:600!important;margin-top:5px!important} /* Text colours coordinated with EXISTING card colours; backgrounds unchanged */ #portal .reference-action.action-students :where(strong,small,b), #portal .mobile-final-card.c-blue :where(strong,small,b){color:#1b66b1!important} #portal .reference-action.action-staff :where(strong,small,b), #portal .mobile-final-card.c-green :where(strong,small,b){color:#187449!important} #portal .reference-action.action-clean :where(strong,small,b), #portal .mobile-final-card.c-purple :where(strong,small,b){color:#6a3ea5!important} #portal .reference-action.action-register :where(strong,small,b), #portal .mobile-final-card.c-orange :where(strong,small,b){color:#98600a!important} #portal .reference-action.action-location :where(strong,small,b), #portal .mobile-final-card.c-coral :where(strong,small,b){color:#aa3c4b!important} #portal .reference-action.action-school-day :where(strong,small,b), #portal .mobile-final-card.c-teal :where(strong,small,b){color:#0c7180!important} #portal .mobile-final-card.c-indigo :where(strong,small,b){color:#4053a6!important} #portal .mobile-final-card.c-pink :where(strong,small,b){color:#994675!important} #portal .mobile-final-card.c-slate :where(strong,small,b){color:#465e74!important} /* ---------- LOGIN CHOOSER: PREMIUM COLOURED ROLE CARDS ---------- */ #loginScreen.chooser-mode .login-type-list{ gap:18px!important; } #loginScreen.chooser-mode .login-type-card{ min-height:245px!important; border-radius:22px!important; padding:24px 22px!important; box-shadow:0 16px 34px rgba(0,0,0,.20)!important; transition:transform .18s ease,box-shadow .18s ease!important; } #loginScreen.chooser-mode .login-type-card:hover{ transform:translateY(-4px)!important; box-shadow:0 22px 42px rgba(0,0,0,.27)!important; } #loginScreen.chooser-mode .login-type-card strong{ font-size:25px!important; font-weight:900!important; letter-spacing:.045em!important; } #loginScreen.chooser-mode .login-type-card small{ font-size:13px!important; line-height:1.5!important; font-weight:600!important; } /* Admin gold/black */ #loginScreen.chooser-mode .admin-login{ background:linear-gradient(145deg,#201809,#0b0d10)!important; border-color:#d8ad43!important; } #loginScreen.chooser-mode .admin-login strong{color:#f5cf68!important} #loginScreen.chooser-mode .admin-login small{color:#eadfbf!important} /* CMO deep navy/cyan */ #loginScreen.chooser-mode .cmo-login{ background:linear-gradient(145deg,#071b2c,#071018)!important; border-color:#2ec8e6!important; } #loginScreen.chooser-mode .cmo-login strong{color:#5edff5!important} #loginScreen.chooser-mode .cmo-login small{color:#c9eaf0!important} /* PEF rich blue */ #loginScreen.chooser-mode .pef-login{ background:linear-gradient(145deg,#0b3768,#08192c)!important; border-color:#58a8f3!important; } #loginScreen.chooser-mode .pef-login strong{color:#72baff!important} #loginScreen.chooser-mode .pef-login small{color:#d4e9ff!important} /* PEIMA rich green */ #loginScreen.chooser-mode .peima-login{ background:linear-gradient(145deg,#0b4a31,#081d17)!important; border-color:#53c987!important; } #loginScreen.chooser-mode .peima-login strong{color:#74e09f!important} #loginScreen.chooser-mode .peima-login small{color:#d6f4e2!important} /* ---------- LAPTOP LEFT MENU: EVERY SLIDE COLOURED + BIGGER TEXT ---------- */ @media (min-width:901px){ #portal .nav-item{ min-height:50px!important; margin:5px 0!important; padding:0 17px!important; border-radius:13px!important; font-size:15px!important; line-height:1.2!important; font-weight:750!important; letter-spacing:.05px!important; border:1px solid transparent!important; box-shadow:0 6px 14px rgba(5,15,28,.08)!important; } #portal .nav-item:nth-child(1){background:linear-gradient(90deg,rgba(226,174,53,.24),rgba(226,174,53,.08))!important;border-color:rgba(226,174,53,.30)!important;color:#e7bf62!important} #portal .nav-item:nth-child(2){background:linear-gradient(90deg,rgba(44,128,218,.23),rgba(44,128,218,.07))!important;border-color:rgba(77,151,231,.28)!important;color:#7bb7f4!important} #portal .nav-item:nth-child(3){background:linear-gradient(90deg,rgba(35,158,101,.23),rgba(35,158,101,.07))!important;border-color:rgba(67,184,127,.28)!important;color:#77d2a2!important} #portal .nav-item:nth-child(4){background:linear-gradient(90deg,rgba(133,83,204,.23),rgba(133,83,204,.07))!important;border-color:rgba(155,112,216,.28)!important;color:#b698e7!important} #portal .nav-item:nth-child(5){background:linear-gradient(90deg,rgba(209,76,91,.22),rgba(209,76,91,.07))!important;border-color:rgba(220,103,116,.28)!important;color:#ee9da7!important} #portal .nav-item:nth-child(6){background:linear-gradient(90deg,rgba(218,126,37,.22),rgba(218,126,37,.07))!important;border-color:rgba(226,150,75,.28)!important;color:#efb16e!important} #portal .nav-item:nth-child(7){background:linear-gradient(90deg,rgba(25,151,170,.22),rgba(25,151,170,.07))!important;border-color:rgba(69,175,190,.28)!important;color:#79d3df!important} #portal .nav-item:nth-child(8){background:linear-gradient(90deg,rgba(76,95,191,.22),rgba(76,95,191,.07))!important;border-color:rgba(105,122,204,.28)!important;color:#a3b1f1!important} #portal .nav-item:nth-child(9){background:linear-gradient(90deg,rgba(184,69,150,.22),rgba(184,69,150,.07))!important;border-color:rgba(199,100,169,.28)!important;color:#dfa0c9!important} #portal .nav-item:nth-child(10){background:linear-gradient(90deg,rgba(91,116,137,.22),rgba(91,116,137,.07))!important;border-color:rgba(118,141,160,.28)!important;color:#b5c5d3!important} #portal .nav-item:hover{ transform:translateX(3px)!important; filter:brightness(1.10)!important; } #portal .nav-item.active, #portal .nav-item[aria-current="page"]{ box-shadow:inset 4px 0 0 currentColor,0 8px 18px rgba(0,0,0,.12)!important; filter:brightness(1.12)!important; } } /* Light mode sidebar colours need dark readable equivalents */ @media (min-width:901px){ body:not(.dark) #portal .nav-item:nth-child(1){color:#7d5d12!important} body:not(.dark) #portal .nav-item:nth-child(2){color:#225f9e!important} body:not(.dark) #portal .nav-item:nth-child(3){color:#246c49!important} body:not(.dark) #portal .nav-item:nth-child(4){color:#69449a!important} body:not(.dark) #portal .nav-item:nth-child(5){color:#923f4c!important} body:not(.dark) #portal .nav-item:nth-child(6){color:#8c561d!important} body:not(.dark) #portal .nav-item:nth-child(7){color:#276e79!important} body:not(.dark) #portal .nav-item:nth-child(8){color:#44569b!important} body:not(.dark) #portal .nav-item:nth-child(9){color:#873b70!important} body:not(.dark) #portal .nav-item:nth-child(10){color:#4e6171!important} } /* ---------- LAPTOP BOTTOM FEATURE CARDS: ONE LINE ---------- */ @media (min-width:1100px){ #schoolDashboard .feature-card{ width:calc((100% - 32px)/3)!important; display:inline-grid!important; vertical-align:top!important; margin-right:12px!important; min-height:190px!important; } #schoolDashboard .feature-card:nth-of-type(3n){ margin-right:0!important; } #schoolDashboard .feature-card .feature-copy{ grid-template-columns:1fr!important; } } /* ---------- LOGIN FORM CLEANUP ---------- */ #loginScreen:not(.chooser-mode) .login-card{ border-radius:24px!important; box-shadow:0 22px 56px rgba(0,0,0,.26)!important; } #loginScreen:not(.chooser-mode) .login-card h2{ font-size:25px!important; font-weight:850!important; } #loginScreen:not(.chooser-mode) .login-card label{ font-size:13px!important; font-weight:700!important; } /* Mobile balance */ @media (max-width:700px){ #portal .reference-action strong, #portal .mobile-final-card strong{font-size:14px!important} #portal .reference-action small, #portal .mobile-final-card small{font-size:10.5px!important} #loginScreen.chooser-mode .login-type-card{ min-height:210px!important; } } /* ========================================================================== V87 SCHOOL CARD COLOURS = ADMIN-STYLE PALETTE - Removes remaining empty white icon boxes on cards - Applies richer admin-style colours to school login cards - Keeps symbols removed and official logos unchanged ========================================================================== */ /* Remove any remaining empty white boxes on school/admin action cards */ #portal .mobile-final-card > span, #portal .reference-action > span, #portal .action-card > span, #portal .feature-card > span{ display:none!important; width:0!important; height:0!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } /* Rebalance layout after box removal */ #portal .mobile-final-card{ grid-template-columns:minmax(0,1fr) 22px!important; align-items:center!important; padding:18px 18px!important; } #portal .mobile-final-card > div{grid-column:1!important;min-width:0!important} #portal .mobile-final-card > b{grid-column:2!important;justify-self:end!important} #portal .mobile-final-card strong{ font-size:18px!important; line-height:1.15!important; font-weight:800!important; } #portal .mobile-final-card small{ margin-top:6px!important; font-size:11px!important; line-height:1.35!important; font-weight:600!important; } /* Mobile / school cards — admin-style richer colours */ #portal .mobile-final-card.c-blue{ background:linear-gradient(135deg,#2d6ff1 0%,#4b88ff 100%)!important; border-color:#6ea0ff!important; } #portal .mobile-final-card.c-green{ background:linear-gradient(135deg,#159a56 0%,#34c472 100%)!important; border-color:#69d89a!important; } #portal .mobile-final-card.c-purple{ background:linear-gradient(135deg,#7f43e9 0%,#ad69ff 100%)!important; border-color:#c495ff!important; } #portal .mobile-final-card.c-orange{ background:linear-gradient(135deg,#d99712 0%,#f3bd3a 100%)!important; border-color:#f5d27a!important; } #portal .mobile-final-card.c-coral{ background:linear-gradient(135deg,#e45474 0%,#f48aa0 100%)!important; border-color:#f7b1bf!important; } #portal .mobile-final-card.c-teal{ background:linear-gradient(135deg,#178ea4 0%,#49bed0 100%)!important; border-color:#84d7e3!important; } #portal .mobile-final-card.c-indigo{ background:linear-gradient(135deg,#4c63d9 0%,#7c95ff 100%)!important; border-color:#a9b8ff!important; } #portal .mobile-final-card.c-pink{ background:linear-gradient(135deg,#ba3f88 0%,#e07bb4 100%)!important; border-color:#efafd3!important; } #portal .mobile-final-card.c-slate{ background:linear-gradient(135deg,#4b6578 0%,#6f8fa8 100%)!important; border-color:#a2b8c9!important; } /* Desktop school/action cards — same rich admin palette */ #portal .reference-action.action-students{ background:linear-gradient(135deg,#2d6ff1 0%,#4b88ff 100%)!important; border-color:#6ea0ff!important; } #portal .reference-action.action-staff{ background:linear-gradient(135deg,#159a56 0%,#34c472 100%)!important; border-color:#69d89a!important; } #portal .reference-action.action-clean{ background:linear-gradient(135deg,#7f43e9 0%,#ad69ff 100%)!important; border-color:#c495ff!important; } #portal .reference-action.action-register{ background:linear-gradient(135deg,#d99712 0%,#f3bd3a 100%)!important; border-color:#f5d27a!important; } #portal .reference-action.action-location{ background:linear-gradient(135deg,#e45474 0%,#f48aa0 100%)!important; border-color:#f7b1bf!important; } #portal .reference-action.action-school-day{ background:linear-gradient(135deg,#178ea4 0%,#49bed0 100%)!important; border-color:#84d7e3!important; } /* Text on these richer cards */ #portal .mobile-final-card :where(strong,small,b), #portal .reference-action :where(strong,small,b){ color:#f9fcff!important; text-shadow:none!important; } #portal .mobile-final-card small, #portal .reference-action small{ color:rgba(249,252,255,.9)!important; } #portal .mobile-final-card b, #portal .reference-action b{ color:#ffffff!important; } /* Light mode still readable with same cards */ body:not(.dark) #portal .mobile-final-card :where(strong,small,b), body:not(.dark) #portal .reference-action :where(strong,small,b){ color:#ffffff!important; } /* ========================================================================== V88 MOBILE LOGIN CHOOSER VERTICAL FIX - Stack all 4 role cards vertically on mobile - Stop horizontal clipping / partial side cards - Keep current colours and logos unchanged ========================================================================== */ @media (max-width:700px){ #loginScreen.chooser-mode{ overflow-x:hidden!important; } #loginScreen.chooser-mode .login-panel{ width:100%!important; max-width:100%!important; overflow:visible!important; } #loginScreen.chooser-mode .login-card.login-choice-card{ width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; margin:0 auto!important; overflow:visible!important; padding-left:16px!important; padding-right:16px!important; } #loginScreen.chooser-mode .login-type-list{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; max-width:100%!important; gap:14px!important; overflow:visible!important; } #loginScreen.chooser-mode .login-type-card{ width:100%!important; max-width:100%!important; min-height:152px!important; display:grid!important; grid-template-columns:90px minmax(0,1fr)!important; align-items:center!important; gap:14px!important; padding:18px 18px!important; border-radius:20px!important; overflow:hidden!important; } #loginScreen.chooser-mode .login-type-card > span{ display:grid!important; place-items:center!important; width:90px!important; height:90px!important; min-width:90px!important; border-radius:18px!important; overflow:hidden!important; } #loginScreen.chooser-mode .login-type-card > span img{ max-width:72px!important; max-height:72px!important; width:auto!important; height:auto!important; object-fit:contain!important; display:block!important; } #loginScreen.chooser-mode .login-type-card > div{ min-width:0!important; text-align:left!important; } #loginScreen.chooser-mode .login-type-card strong{ display:block!important; font-size:20px!important; line-height:1.1!important; margin-bottom:6px!important; } #loginScreen.chooser-mode .login-type-card small{ display:block!important; font-size:13px!important; line-height:1.45!important; } #loginScreen.chooser-mode .login-type-card b{ display:none!important; } #loginScreen .login-feature-strip{ margin-top:16px!important; } } /* ========================================================================== V89 DEFINITIVE MOBILE LOGIN VERTICAL STACK Overrides old horizontal carousel rules in styles-final-v3.css. Applies through tablet/mobile widths to prevent clipping. ========================================================================== */ @media (max-width:900px){ html,body{ overflow-x:hidden!important; } html body #loginScreen.chooser-mode{ display:block!important; width:100%!important; max-width:100vw!important; min-height:100svh!important; overflow-x:hidden!important; overflow-y:auto!important; } html body #loginScreen.chooser-mode .login-visual{ display:none!important; } html body #loginScreen.chooser-mode .login-panel{ display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:100svh!important; padding:18px 12px 26px!important; overflow:visible!important; } html body #loginScreen.chooser-mode .login-choice-card{ display:block!important; width:100%!important; max-width:560px!important; min-width:0!important; margin:0 auto!important; padding:20px 14px 22px!important; overflow:visible!important; transform:none!important; } html body #loginScreen.chooser-mode .approved-login-brand{ width:100%!important; margin:0 auto 8px!important; padding:0!important; } html body #loginScreen.chooser-mode .approved-login-brand .brand-mark{ width:132px!important; height:116px!important; margin:0 auto 8px!important; } html body #loginScreen.chooser-mode .approved-brand-title{ font-size:21px!important; line-height:1.08!important; text-align:center!important; margin:0 auto 12px!important; } html body #loginScreen.chooser-mode .approved-login-intro p{ margin:0 0 16px!important; text-align:center!important; font-size:14px!important; line-height:1.45!important; } html body #loginScreen.chooser-mode .login-type-list{ display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important; grid-auto-flow:row!important; grid-auto-columns:auto!important; grid-template-columns:1fr!important; grid-template-rows:none!important; width:100%!important; max-width:100%!important; min-width:0!important; gap:12px!important; padding:0!important; margin:0!important; overflow:visible!important; overflow-x:visible!important; overflow-y:visible!important; scroll-snap-type:none!important; scroll-padding:0!important; overscroll-behavior:auto!important; scrollbar-width:auto!important; transform:none!important; } html body #loginScreen.chooser-mode .login-type-card{ flex:0 0 auto!important; display:grid!important; grid-template-columns:82px minmax(0,1fr)!important; grid-template-rows:auto!important; align-items:center!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:126px!important; height:auto!important; margin:0!important; padding:16px!important; gap:14px!important; text-align:left!important; border-radius:18px!important; overflow:hidden!important; scroll-snap-align:none!important; transform:none!important; } html body #loginScreen.chooser-mode .login-type-card > span{ display:grid!important; place-items:center!important; width:80px!important; height:80px!important; min-width:80px!important; min-height:80px!important; margin:0!important; padding:6px!important; border-radius:17px!important; } html body #loginScreen.chooser-mode .login-type-card > span img{ display:block!important; width:100%!important; height:100%!important; max-width:68px!important; max-height:68px!important; object-fit:contain!important; object-position:center!important; transform:none!important; } html body #loginScreen.chooser-mode .login-type-card > div{ display:block!important; min-width:0!important; min-height:0!important; text-align:left!important; } html body #loginScreen.chooser-mode .login-type-card strong{ display:block!important; font-size:20px!important; line-height:1.08!important; margin:0 0 5px!important; } html body #loginScreen.chooser-mode .login-type-card small{ display:block!important; font-size:12px!important; line-height:1.4!important; margin:0!important; overflow-wrap:anywhere!important; } html body #loginScreen.chooser-mode .login-type-card > b{ display:none!important; } html body #loginScreen.chooser-mode .login-feature-strip{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important; margin:16px 0 0!important; padding:10px 8px!important; gap:6px!important; font-size:10px!important; } html body #loginScreen.chooser-mode .login-copyright{ margin-top:12px!important; text-align:center!important; } } @media (max-width:430px){ html body #loginScreen.chooser-mode .login-panel{ padding:12px 8px 22px!important; } html body #loginScreen.chooser-mode .login-choice-card{ padding:16px 10px 18px!important; } html body #loginScreen.chooser-mode .login-type-card{ grid-template-columns:70px minmax(0,1fr)!important; min-height:112px!important; padding:13px!important; gap:12px!important; } html body #loginScreen.chooser-mode .login-type-card > span{ width:68px!important; height:68px!important; min-width:68px!important; min-height:68px!important; } html body #loginScreen.chooser-mode .login-type-card > span img{ max-width:58px!important; max-height:58px!important; } html body #loginScreen.chooser-mode .login-type-card strong{ font-size:18px!important; } html body #loginScreen.chooser-mode .login-type-card small{ font-size:11px!important; } } /* V90 DARK-ONLY PRODUCTION MODE */ #themeButton,#settingsTheme{display:none!important;visibility:hidden!important} html,body,body.dark,#portal,#portal .view{color-scheme:dark} \n/* V91 temporary all-open period: no timer/lock UI through 15 Aug 2027 */ body.v91-all-open #submissionWindowBanner,body.v91-all-open #submissionLockOverlay{display:none!important} /* ========================================================================== V92 PEF / PEIMA ACTION CARDS = ADMIN / CMO ACTION CARD COLOUR SYSTEM Mobile + Laptop Layout, functionality, logos and existing camera/login fixes unchanged. ========================================================================== */ /* SCHOOL / PEF / PEIMA MOBILE ACTION CARDS */ #portal .school-dashboard-only .mobile-final-card.c-blue{ background:linear-gradient(135deg,#2f78ff 0%,#4e8cff 100%)!important; border-color:#71a5ff!important; } #portal .school-dashboard-only .mobile-final-card.c-green{ background:linear-gradient(135deg,#21aa63 0%,#39c978 100%)!important; border-color:#6fdaa0!important; } #portal .school-dashboard-only .mobile-final-card.c-purple{ background:linear-gradient(135deg,#8a46eb 0%,#aa61f7 100%)!important; border-color:#c397ff!important; } #portal .school-dashboard-only .mobile-final-card.c-orange{ background:linear-gradient(135deg,#e3a11d 0%,#f4bd39 100%)!important; border-color:#f7d073!important; } #portal .school-dashboard-only .mobile-final-card.c-coral{ background:linear-gradient(135deg,#ed586e 0%,#f47f91 100%)!important; border-color:#f8a8b5!important; } #portal .school-dashboard-only .mobile-final-card.c-teal{ background:linear-gradient(135deg,#1d9ab4 0%,#42bcd1 100%)!important; border-color:#78d0df!important; } #portal .school-dashboard-only .mobile-final-card.c-indigo{ background:linear-gradient(135deg,#5169db 0%,#7489ee 100%)!important; border-color:#a1aff5!important; } #portal .school-dashboard-only .mobile-final-card.c-pink{ background:linear-gradient(135deg,#c4468b 0%,#dd6bac 100%)!important; border-color:#eda6cf!important; } #portal .school-dashboard-only .mobile-final-card.c-slate{ background:linear-gradient(135deg,#4f6a7f 0%,#6d899f 100%)!important; border-color:#9eb3c3!important; } /* SCHOOL / PEF / PEIMA LAPTOP ACTION CARDS */ #portal .school-dashboard-only .action-grid .action-card:nth-child(1), #portal .school-dashboard-only .reference-action.action-students{ background:linear-gradient(135deg,#2f78ff 0%,#4e8cff 100%)!important; border-color:#71a5ff!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(2), #portal .school-dashboard-only .reference-action.action-staff{ background:linear-gradient(135deg,#21aa63 0%,#39c978 100%)!important; border-color:#6fdaa0!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(3), #portal .school-dashboard-only .reference-action.action-clean{ background:linear-gradient(135deg,#8a46eb 0%,#aa61f7 100%)!important; border-color:#c397ff!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(4), #portal .school-dashboard-only .reference-action.action-register{ background:linear-gradient(135deg,#e3a11d 0%,#f4bd39 100%)!important; border-color:#f7d073!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(5), #portal .school-dashboard-only .reference-action.action-location{ background:linear-gradient(135deg,#ed586e 0%,#f47f91 100%)!important; border-color:#f8a8b5!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(6), #portal .school-dashboard-only .reference-action.action-school-day{ background:linear-gradient(135deg,#1d9ab4 0%,#42bcd1 100%)!important; border-color:#78d0df!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(7){ background:linear-gradient(135deg,#5169db 0%,#7489ee 100%)!important; border-color:#a1aff5!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(8){ background:linear-gradient(135deg,#c4468b 0%,#dd6bac 100%)!important; border-color:#eda6cf!important; } #portal .school-dashboard-only .action-grid .action-card:nth-child(9){ background:linear-gradient(135deg,#4f6a7f 0%,#6d899f 100%)!important; border-color:#9eb3c3!important; } /* High-contrast text like Admin/CMO cards */ #portal .school-dashboard-only .mobile-final-card :where(strong,small,b), #portal .school-dashboard-only .action-grid .action-card :where(h3,small,p,b), #portal .school-dashboard-only .reference-action :where(strong,small,b){ color:#ffffff!important; text-shadow:none!important; } #portal .school-dashboard-only .mobile-final-card small, #portal .school-dashboard-only .action-grid .action-card p, #portal .school-dashboard-only .reference-action small{ color:rgba(255,255,255,.90)!important; } /* Same result on dark-only site and any residual light-mode styles */ body:not(.dark) #portal .school-dashboard-only .mobile-final-card :where(strong,small,b), body:not(.dark) #portal .school-dashboard-only .action-grid .action-card :where(h3,small,p,b), body:not(.dark) #portal .school-dashboard-only .reference-action :where(strong,small,b){ color:#ffffff!important; } /* ========================================================================== V93 SCHOOL ACTION CARDS — APPROVED DEMO STYLE PEF + PEIMA only, laptop + mobile. Existing functions, official logos and module list are preserved. ========================================================================== */ /* Only school logins */ body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-actions{ display:grid!important; width:100%!important; } /* Card material */ body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card{ position:relative!important; overflow:hidden!important; border-radius:20px!important; border:1px solid rgba(255,255,255,.26)!important; box-shadow:0 14px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18)!important; color:#fff!important; transition:transform .18s ease, box-shadow .18s ease!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:hover{ transform:translateY(-3px)!important; box-shadow:0 18px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:after{ content:""!important; position:absolute!important; right:-34px!important; bottom:-46px!important; width:118px!important; height:118px!important; border-radius:50%!important; background:rgba(255,255,255,.10)!important; pointer-events:none!important; } /* Approved bright palette */ body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(1){ background:linear-gradient(135deg,#156cf0 0%,#2788ff 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(2){ background:linear-gradient(135deg,#00a95c 0%,#15d07d 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(3){ background:linear-gradient(135deg,#7c38e8 0%,#a34cff 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(4){ background:linear-gradient(135deg,#ee970b 0%,#ffb521 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(5){ background:linear-gradient(135deg,#e93468 0%,#f34f8b 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(6){ background:linear-gradient(135deg,#058fc8 0%,#16b7ea 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(7){ background:linear-gradient(135deg,#4159d8 0%,#6d83f5 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(8){ background:linear-gradient(135deg,#b43c8a 0%,#db63ad 100%)!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card:nth-child(9){ background:linear-gradient(135deg,#435d72 0%,#66859d 100%)!important; } /* Restore the SAME existing icon files directly on the cards — no white icon box */ body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>span{ display:grid!important; place-items:center!important; width:58px!important; height:58px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>span img{ display:block!important; width:52px!important; height:52px!important; object-fit:contain!important; opacity:1!important; filter:brightness(0) invert(1) drop-shadow(0 5px 7px rgba(0,0,0,.18))!important; } /* Text */ body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card :where(strong,small,b){ color:#fff!important; text-shadow:none!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card strong{ font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif!important; font-weight:800!important; letter-spacing:-.15px!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card small{ color:rgba(255,255,255,.88)!important; font-weight:600!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>b{ color:#fff!important; font-weight:800!important; } /* Laptop / desktop — approved 3-card row */ @media (min-width:901px){ body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:16px!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card{ min-height:150px!important; padding:20px 20px!important; display:grid!important; grid-template-columns:60px minmax(0,1fr) 22px!important; grid-template-rows:60px auto!important; column-gap:14px!important; row-gap:10px!important; align-items:start!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>span{ grid-column:1!important; grid-row:1!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>div{ grid-column:1/3!important; grid-row:2!important; align-self:end!important; min-width:0!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>b{ grid-column:3!important; grid-row:1!important; justify-self:end!important; align-self:start!important; font-size:29px!important; line-height:1!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card strong{ font-size:18px!important; line-height:1.18!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card small{ display:block!important; margin-top:5px!important; font-size:12px!important; line-height:1.38!important; } } /* Mobile — approved single vertical list */ @media (max-width:700px){ body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-actions{ grid-template-columns:1fr!important; gap:10px!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card{ min-height:78px!important; padding:12px 14px!important; display:grid!important; grid-template-columns:50px minmax(0,1fr) 20px!important; grid-template-rows:auto!important; column-gap:12px!important; align-items:center!important; border-radius:16px!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>span{ grid-column:1!important; grid-row:1!important; width:46px!important; height:46px!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>span img{ width:42px!important; height:42px!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>div{ grid-column:2!important; grid-row:1!important; align-self:center!important; min-width:0!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card>b{ grid-column:3!important; grid-row:1!important; justify-self:end!important; align-self:center!important; font-size:26px!important; line-height:1!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card strong{ font-size:14px!important; line-height:1.15!important; } body:is(.pef-mode,.peima-mode) #portal .school-dashboard-only .mobile-final-card small{ display:block!important; margin-top:3px!important; font-size:10px!important; line-height:1.25!important; } } /* ========================================================================== V94 PERMANENT NO-TIMER MODE All school modules stay open at all times. No timer/lock/banner/overlay. ========================================================================== */ #portal #submissionWindowBanner, #portal #submissionLockOverlay, #portal .submission-window-banner, #portal .submission-countdown, #portal .submission-clock, #portal .submission-lock-overlay{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #portal .submission-locked{ opacity:1!important; filter:none!important; pointer-events:auto!important; } /* V98 report/PPT image fit */ .report-photo-box img, .ppt-photo-box img, .export-photo-box img, .daily-photo-preview img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; } /* V100 Admin duplicate B-Form checker + reliable report tables */ #duplicateBforms .record-toolbar{display:flex;gap:14px;align-items:end} #duplicateBforms .record-toolbar label{min-width:min(460px,100%)} #duplicateBforms tbody td strong{display:block} #duplicateBforms .cell-subtitle{display:block;opacity:.72;margin-top:2px} /* V101 navigation safety */ #portal .view.active-view{display:block!important} #portal button[data-view]{pointer-events:auto!important} #portal .nav-item:not(.role-hidden){cursor:pointer!important} /* ========================================================================== V103 NAVIGATION EMERGENCY FIX No invisible overlay or pseudo layer may block sidebar/dashboard taps. ========================================================================== */ #portal #submissionLockOverlay, #portal #submissionWindowBanner{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #portal [data-view]{ pointer-events:auto!important; touch-action:manipulation!important; cursor:pointer!important; position:relative; z-index:2; } #portal .mobile-final-card:before, #portal .mobile-final-card:after, #portal .action-card:before, #portal .action-card:after, #portal .reference-action:before, #portal .reference-action:after{ pointer-events:none!important; } #portal .view.active-view{ display:block!important; visibility:visible!important; opacity:1!important; }