:root{
  --retac-navy:#082b58;--retac-navy-deep:#061f42;--retac-blue:#0f6fec;--retac-blue-soft:#eaf3ff;
  --retac-bg:#f3f6fb;--retac-surface:#fff;--retac-text:#172033;--retac-muted:#667085;
  --retac-border:#e4e9f1;--retac-success:#12a36d;--retac-danger:#d92d20;--retac-warning:#f79009;
  --retac-purple:#7a5af8;--retac-orange:#f79009;--retac-radius:14px;--retac-shadow:0 8px 24px rgba(16,24,40,.07);
}
*{box-sizing:border-box}html{font-size:15px!important;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:15px!important;line-height:1.5!important;color:var(--retac-text)!important;background:var(--retac-bg)!important;overflow-x:hidden}
body:before{display:none!important}a{text-decoration:none!important}
h1,h2,h3,h4,h5,h6{font-family:Inter,"Segoe UI",Arial,sans-serif!important;color:var(--retac-navy-deep)!important;line-height:1.25!important;font-weight:800!important}
h1{font-size:1.65rem!important}h2{font-size:1.35rem!important}h3{font-size:1.05rem!important}.muted,.small,small{color:var(--retac-muted)!important}

/* Top header */
.topbar{height:76px!important;min-height:76px!important;position:sticky!important;top:0!important;z-index:1000!important;background:#fff!important;color:var(--retac-text)!important;padding:0 26px!important;border:0!important;border-bottom:1px solid var(--retac-border)!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.topbar .brand{display:flex!important;align-items:center!important;gap:12px!important;min-width:0}.topbar .brand img{width:48px!important;height:48px!important;object-fit:contain!important;background:#fff!important;border:1px solid var(--retac-border)!important;border-radius:12px!important;padding:4px!important;}
.topbar .brand h2{margin:0!important;font-size:1.17rem!important;color:var(--retac-navy)!important;white-space:nowrap!important}.topbar .brand small{font-size:.78rem!important;color:var(--retac-muted)!important}
.top-user{display:flex!important;align-items:center!important;gap:11px!important;font-weight:700!important;color:var(--retac-text)!important}.top-user:before{content:"🔔";width:38px;height:38px;border-radius:50%;background:#f7f9fc;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.top-user span{background:#f8fafc!important;border:1px solid var(--retac-border)!important;border-radius:999px!important;padding:9px 13px!important;color:var(--retac-navy)!important}.top-user a{background:var(--retac-danger)!important;color:#fff!important;border:0!important;border-radius:9px!important;padding:10px 14px!important;font-size:.9rem!important}

/* Main frame and sidebar */
.main{display:flex!important;align-items:stretch!important;min-height:calc(100vh - 76px)!important}.sidebar,#sidebarMenu{position:sticky!important;top:76px!important;height:calc(100vh - 76px)!important;overflow-y:auto!important;overflow-x:hidden!important;width:264px!important;min-width:264px!important;background:linear-gradient(180deg,var(--retac-navy) 0%,var(--retac-navy-deep) 100%)!important;padding:16px 12px 26px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:10px}
.sidebar:before{content:"CONTROL PANEL";display:block;color:rgba(255,255,255,.55);font-size:.7rem;font-weight:800;letter-spacing:.12em;padding:5px 13px 12px}
.sidebar a,#sidebarMenu a{position:relative!important;display:flex!important;align-items:center!important;gap:11px!important;min-height:44px!important;color:#eef5ff!important;font-size:.92rem!important;font-weight:650!important;line-height:1.3!important;padding:11px 12px 11px 42px!important;margin:3px 0!important;border:0!important;border-radius:10px!important;background:transparent!important;transition:.18s ease!important}
.sidebar a:before{content:"▣";position:absolute;left:13px;top:50%;transform:translateY(-50%);width:20px;text-align:center;font-size:15px;opacity:.92}
.sidebar a[href*="dashboard"]:before{content:"⌂"}.sidebar a[href*="learner"]:before,.sidebar a[href*="admission"]:before{content:"♟"}.sidebar a[href*="teacher"]:before,.sidebar a[href*="staff"]:before{content:"♙"}.sidebar a[href*="fee"]:before,.sidebar a[href*="account"]:before,.sidebar a[href*="payment"]:before,.sidebar a[href*="voucher"]:before{content:"₵"}.sidebar a[href*="attendance"]:before,.sidebar a[href*="register"]:before{content:"✓"}.sidebar a[href*="notice"]:before{content:"◫"}.sidebar a[href*="report"]:before,.sidebar a[href*="assessment"]:before{content:"▥"}.sidebar a[href*="setting"]:before,.sidebar a[href*="reset"]:before,.sidebar a[href*="backup"]:before{content:"⚙"}.sidebar a[href*="document"]:before,.sidebar a[href*="letter"]:before,.sidebar a[href*="certificate"]:before{content:"▤"}.sidebar a[href*="live"]:before,.sidebar a[href*="video"]:before{content:"▶"}
.sidebar a:hover,.sidebar a.active,#sidebarMenu a:hover,#sidebarMenu a.active{background:linear-gradient(90deg,#1677f2,#0f64d6)!important;color:#fff!important;transform:translateX(2px)!important;}.sidebar a.active:after{content:"";position:absolute;right:-12px;width:4px;height:25px;background:#fff;border-radius:3px 0 0 3px}
.sidebar .menu-group{margin:7px 0 10px!important;border:0!important;background:transparent!important}.sidebar .menu-group summary{list-style:none!important;cursor:pointer!important;color:#9db8db!important;font-size:.72rem!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;padding:12px 12px 6px!important;border:0!important}.sidebar .menu-group summary::-webkit-details-marker{display:none}.sidebar .menu-group summary:after{content:"⌄";float:right;font-size:.85rem}.sidebar .menu-group[open] summary:after{content:"⌃"}.sidebar .submenu{padding:0!important}

/* Content and cards */
.content{flex:1!important;min-width:0!important;padding:25px!important;overflow-x:auto!important;background:var(--retac-bg)!important}.content>h1:first-child,.content>h2:first-child{margin-top:0!important;margin-bottom:18px!important}.wrap{padding:25px!important}
.card,.box,.panel,.section{background:var(--retac-surface)!important;border:1px solid var(--retac-border)!important;border-radius:var(--retac-radius)!important;padding:20px!important;margin-bottom:18px!important}.card:hover{}
.grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:16px!important;margin-bottom:18px!important}.stat{position:relative!important;overflow:hidden!important;min-height:132px!important;background:#fff!important;border:1px solid var(--retac-border)!important;border-radius:14px!important;padding:20px 18px 17px 74px!important;margin:0!important;transition:transform .18s ease,box-shadow .18s ease!important}.stat:hover{transform:translateY(-3px)!important;}.stat:before{content:"▦";position:absolute;left:18px;top:21px;width:42px;height:42px;border-radius:11px;background:var(--retac-blue-soft);color:var(--retac-blue);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900}.stat:nth-child(4n+2):before{background:#ecfdf3;color:var(--retac-success)}.stat:nth-child(4n+3):before{background:#f4f0ff;color:var(--retac-purple)}.stat:nth-child(4n+4):before{background:#fff4e5;color:var(--retac-orange)}
.stat h3{margin:0 0 8px!important;color:var(--retac-muted)!important;font-size:.9rem!important;font-weight:750!important}.stat p{margin:0!important;color:var(--retac-navy-deep)!important;font-size:1.75rem!important;line-height:1.1!important;font-weight:850!important}.stat p[style]{font-size:.82rem!important;line-height:1.35!important;margin-top:10px!important}.stat .btn{min-height:34px!important;padding:7px 10px!important;font-size:.78rem!important}

/* Forms */
label{display:block!important;color:#344054!important;font-weight:750!important;margin:0 0 7px!important;font-size:.92rem!important}input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%!important;min-height:44px!important;background:#fff!important;color:var(--retac-text)!important;border:1px solid #cfd7e4!important;border-radius:9px!important;padding:10px 12px!important;margin:0 0 15px!important;outline:none!important;font-size:.94rem!important}textarea{min-height:110px!important;resize:vertical!important}input:focus,select:focus,textarea:focus{border-color:var(--retac-blue)!important;}.form-row,.row{gap:17px!important}.form-row3,.row3{gap:17px!important}input[type=checkbox],input[type=radio]{width:18px!important;height:18px!important;accent-color:var(--retac-blue)!important}
button,.btn,input[type=submit],input[type=button]{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:40px!important;background:var(--retac-blue)!important;color:#fff!important;border:1px solid var(--retac-blue)!important;border-radius:9px!important;padding:9px 14px!important;font-size:.88rem!important;font-weight:800!important;cursor:pointer!important;margin:2px 4px 2px 0!important}.btn:hover,button:hover,input[type=submit]:hover{filter:brightness(.94)!important;transform:translateY(-1px)!important}.danger,.btn-danger{background:var(--retac-danger)!important;border-color:var(--retac-danger)!important}.success,.btn-success{background:var(--retac-success)!important;border-color:var(--retac-success)!important}.warning,.btn-warning{background:var(--retac-warning)!important;border-color:var(--retac-warning)!important}.secondary,.btn-secondary{background:#475467!important;border-color:#475467!important}

/* Tables */
.table-wrap,.responsive-table{overflow:auto!important;border:1px solid var(--retac-border)!important;border-radius:12px!important;background:#fff!important}table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;color:var(--retac-text)!important}th,td{padding:12px 12px!important;border:0!important;border-bottom:1px solid var(--retac-border)!important;text-align:left!important;vertical-align:middle!important;line-height:1.4!important;font-size:.9rem!important}th{position:sticky;top:0;z-index:2;background:#eef3f9!important;color:#344054!important;font-size:.82rem!important;font-weight:850!important;text-transform:uppercase!important;letter-spacing:.025em!important}tr:last-child td{border-bottom:0!important}tr:nth-child(even) td{background:#fbfcfe!important}tr:hover td{background:#f0f6ff!important}td .btn,td button{font-size:.78rem!important;min-height:33px!important;padding:7px 10px!important;}
.badge{display:inline-flex!important;align-items:center!important;border-radius:999px!important;padding:5px 10px!important;font-size:.78rem!important;font-weight:800!important;background:#eef2f6!important;color:#344054!important}.msg,.alert{border-radius:10px!important;padding:13px 15px!important;margin:12px 0 18px!important;border:1px solid transparent!important;font-weight:700!important}.msg.success,.alert-success{background:#ecfdf3!important;color:#067647!important;border-color:#abefc6!important}.msg.error,.alert-danger{background:#fef3f2!important;color:#b42318!important;border-color:#fecdca!important}
.menu-toggle{display:none!important}

/* Login */
.login-wrap{min-height:100vh!important;background:radial-gradient(circle at 20% 20%,#154c91 0,transparent 34%),linear-gradient(135deg,var(--retac-navy-deep),var(--retac-navy))!important;padding:20px!important}.login-box{max-width:430px!important;background:#fff!important;border-radius:18px!important;padding:32px!important;}.login-logo{width:82px!important;height:82px!important;object-fit:contain!important}

@media(max-width:900px){
 .topbar{height:auto!important;min-height:70px!important;padding:10px 14px!important;flex-wrap:wrap!important}.topbar .brand img{width:43px!important;height:43px!important}.topbar .brand h2{font-size:1rem!important}.top-user span{display:none!important}.top-user:before{width:35px;height:35px}.top-user a{padding:8px 11px!important}
 .menu-toggle{display:flex!important;position:sticky!important;top:70px!important;z-index:999!important;width:calc(100% - 20px)!important;margin:10px!important;background:var(--retac-navy)!important;color:#fff!important;border:0!important;border-radius:10px!important;min-height:44px!important;}
 .main{display:block!important;min-height:0!important}.sidebar,#sidebarMenu{display:none!important;position:fixed!important;top:0!important;left:0!important;z-index:2000!important;width:min(86vw,330px)!important;min-width:0!important;height:100vh!important;padding-top:20px!important;}.sidebar.menu-open,#sidebarMenu.menu-open,.sidebar.open,.sidebar.is-open{display:block!important}.sidebar.menu-open:after{content:"";position:fixed;inset:0 0 0 min(86vw,330px);background:rgba(6,21,42,.5);z-index:-1}
 .content,.wrap{padding:14px!important}.grid{grid-template-columns:1fr!important;gap:12px!important}.stat{min-height:115px!important;padding:18px 16px 16px 68px!important}.stat:before{left:16px;top:18px}.card,.box,.panel,.section{padding:16px!important;border-radius:12px!important}.form-row,.form-row3,.row,.row3{grid-template-columns:1fr!important;gap:0!important}table{min-width:720px!important}th,td{padding:10px!important;font-size:.86rem!important}
}
@media(max-width:480px){.topbar .brand small{display:none!important}.topbar{padding:9px 10px!important}.content,.wrap{padding:10px!important}.card,.box,.panel,.section{padding:13px!important}.stat{padding-left:64px!important}.stat p{font-size:1.55rem!important}.btn,button,input[type=submit]{width:auto!important;white-space:normal!important;text-align:center!important}}
@media print{body{background:#fff!important}.topbar,.sidebar,#sidebarMenu,.menu-toggle,.no-print{display:none!important}.main{display:block!important}.content{padding:0!important}.card,.stat,.box{border-color:#bbb!important}}

/* Stable mobile slide menu fix */
.retac-menu-backdrop{display:none;position:fixed;inset:0;background:rgba(6,21,42,.56);z-index:1990;opacity:0;transition:opacity .22s ease}
@media(max-width:900px){
  body.retac-menu-active{overflow:hidden!important;touch-action:none}
  .sidebar,#sidebarMenu{
    display:block!important;
    visibility:hidden!important;
    transform:translate3d(-105%,0,0)!important;
    opacity:0!important;
    transition:transform .24s ease,opacity .2s ease,visibility 0s linear .24s!important;
    will-change:transform;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.menu-open,#sidebarMenu.menu-open,.sidebar.open,.sidebar.is-open{
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
    transition:transform .24s ease,opacity .2s ease!important;
  }
  .sidebar.menu-open:after,#sidebarMenu.menu-open:after{display:none!important;content:none!important}
  .retac-menu-backdrop{display:block;pointer-events:none}
  .retac-menu-backdrop.show{opacity:1;pointer-events:auto}
  .menu-toggle{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent}
}
@media(prefers-reduced-motion:reduce){
  .sidebar,#sidebarMenu,.retac-menu-backdrop{transition:none!important}
}

/* Extra compatibility for older Android browsers and embedded webviews */
@media(max-width:900px){
  .sidebar,#sidebarMenu{width:86vw!important;max-width:330px!important;min-width:240px!important;}
  .menu-toggle{cursor:pointer!important;-webkit-user-select:none!important;user-select:none!important;}
  .retac-menu-backdrop{-webkit-tap-highlight-color:transparent;}
}
@supports (width:min(86vw,330px)){
  @media(max-width:900px){.sidebar,#sidebarMenu{width:min(86vw,330px)!important;}}
}

/* RETAC header branding refresh - 2026-09-03 */
.top-user:before{
  content:none!important;
  display:none!important;
}
.topbar{
  height:96px!important;
  min-height:96px!important;
  padding:0 28px!important;
}
.topbar .brand{
  gap:16px!important;
}
.topbar .brand img{
  width:82px!important;
  height:82px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  
}
.topbar .brand h2{
  margin:0!important;
  font-size:1.72rem!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  color:var(--retac-navy)!important;
  white-space:nowrap!important;
}
.topbar .brand small{
  display:block!important;
  margin-top:4px!important;
  font-size:.82rem!important;
}
.main{
  min-height:calc(100vh - 96px)!important;
}
.sidebar,#sidebarMenu{
  top:96px!important;
  height:calc(100vh - 96px)!important;
}
@media(max-width:900px){
  .topbar{
    height:auto!important;
    min-height:86px!important;
    padding:8px 12px!important;
  }
  .topbar .brand{
    gap:10px!important;
  }
  .topbar .brand img{
    width:66px!important;
    height:66px!important;
  }
  .topbar .brand h2{
    font-size:1.28rem!important;
    white-space:normal!important;
  }
  .topbar .brand small{
    font-size:.72rem!important;
  }
  .menu-toggle{
    top:86px!important;
  }
  .sidebar,#sidebarMenu{
    top:0!important;
    height:100vh!important;
  }
}
@media(max-width:480px){
  .topbar .brand img{
    width:60px!important;
    height:60px!important;
  }
  .topbar .brand h2{
    font-size:1.16rem!important;
  }
}

/* RETAC language selector integrated into school-brand header - 2026-09-04 */
.topbar .brand.retac-brand-language-enabled{
  flex:1 1 auto!important;
  min-width:0!important;
}
.topbar .brand.retac-brand-language-enabled>div:not(.retac-language-host){
  min-width:0!important;
  flex:0 1 auto!important;
}
.topbar .brand .retac-language-host{
  align-self:center!important;
}
@media(max-width:900px){
  .topbar .brand.retac-brand-language-enabled{
    flex-wrap:wrap!important;
    align-items:center!important;
  }
}

/* RETAC compact globe language UI override - 2026-09-04 */
.topbar .brand.retac-brand-language-enabled{flex:initial!important;min-width:0!important;}
.topbar .brand .retac-language-host{width:44px!important;min-width:44px!important;margin:0!important;}
.retac-language-host{max-width:44px!important;}

/* RETAC flat professional UI — 2026-09-25: no decorative box shadows */
.card,.stat,.panel,.box,.widget,.dashboard-card,.summary-card,.metric-card,.login-box,.menu-toggle,
.modal-content,.dropdown-menu,.offcanvas,.toast,.alert,.form-panel,.response-panel {
  box-shadow:none!important;
  text-shadow:none!important;
}

/* RETAC FLAT ACCENT REMOVAL — 2026-09-25
   Remove projected/coloured edge strips and decorative shadows from UI containers system-wide. */
.card,.box,.panel,.section,.stat,.widget,.dashboard-card,.summary-card,.metric-card,
.teacher-action-card,.action-card,.menu-card,.feature-card,.quick-card,.service-card,
.form-card,.report-card,.info-card,.notice-card,.login-box,.table-wrap,.responsive-table {
  box-shadow:none!important;
  text-shadow:none!important;
  border-left-color:var(--retac-border)!important;
  border-right-color:var(--retac-border)!important;
}
.card::before,.box::before,.panel::before,.section::before,.widget::before,
.dashboard-card::before,.summary-card::before,.metric-card::before,
.teacher-action-card::before,.action-card::before,.menu-card::before,.feature-card::before,
.quick-card::before,.service-card::before,.form-card::before,.report-card::before,.info-card::before,
.notice-card::before {box-shadow:none!important;}
.teacher-action-card::before,.action-card::before,.menu-card::before,.feature-card::before,
.quick-card::before,.service-card::before {display:none!important;content:none!important;}
.card:hover,.box:hover,.panel:hover,.section:hover,.stat:hover,.widget:hover,
.dashboard-card:hover,.summary-card:hover,.metric-card:hover,.teacher-action-card:hover,
.action-card:hover,.menu-card:hover,.feature-card:hover,.quick-card:hover,.service-card:hover {
  box-shadow:none!important;
}

/* RETAC FINAL SYSTEM-WIDE FLAT CONTAINER OVERRIDE — 2026-09-25 */
.card,.stat,.panel,.box,.widget,.dashboard-card,.summary-card,.metric-card,.teacher-action-card,.action-card,.menu-card,.feature-card,.quick-card,.service-card,.form-card,.report-card,.info-card,.notice-card,.login-box,.table-wrap,.responsive-table,.portal-card,.link-card,.tile,.kpi,.kpi-card,.dashboard-box,.home-card,.admission-card,.contact-card {
  box-shadow:none!important;
  text-shadow:none!important;
  border-left:1px solid #dfe5ec!important;
  border-right:1px solid #dfe5ec!important;
}
.card::before,.card::after,.stat::before,.stat::after,.panel::before,.panel::after,.box::before,.box::after,.widget::before,.widget::after,.dashboard-card::before,.dashboard-card::after,.summary-card::before,.summary-card::after,.metric-card::before,.metric-card::after,.teacher-action-card::before,.teacher-action-card::after,.action-card::before,.action-card::after,.menu-card::before,.menu-card::after,.feature-card::before,.feature-card::after,.quick-card::before,.quick-card::after,.service-card::before,.service-card::after,.form-card::before,.form-card::after,.report-card::before,.report-card::after,.info-card::before,.info-card::after,.notice-card::before,.notice-card::after,.portal-card::before,.portal-card::after,.link-card::before,.link-card::after,.tile::before,.tile::after,.kpi::before,.kpi::after,.kpi-card::before,.kpi-card::after {
  box-shadow:none!important;
  border-left:0!important;
}
/* Common left-accent utility patterns used by older dashboard/database-driven cards. */
[class*="accent"],[class*="left-line"],[class*="side-line"] { box-shadow:none!important; }

/* Catch legacy/database/dashboard card accents, including inline border-left styles. */
div[style*="border-left"],section[style*="border-left"],article[style*="border-left"],
div.dashboard-section-title,div.notice,div.policy-notice,div.response-panel,div.note,
div.intro,div.task,div.owing,div.ok,div.restore,
div[class*="card"],section[class*="card"],article[class*="card"] {
  border-left:1px solid #dfe5ec!important;
  box-shadow:none!important;
}

/* 2026-10-20: Flat UI across all screens */
:where(.card,.stat,.form-panel,.modal,.panel,.box,.btn,button,input,textarea,select,table){box-shadow:none!important;text-shadow:none!important;}