:root{--navy:#073765;--gold:#ffbd18;--purple:#57308e;--bg:#f4f6f9;--ink:#24394c;--muted:#7b8995;--line:#e2e7ec;--red:#b83e43;--green:#0c8b62}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif;font-size:13px}a{text-decoration:none;color:inherit}
.shell{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{position:sticky;top:0;height:100vh;overflow:auto;background:linear-gradient(180deg,#073765,#0b527e);padding:13px;color:#fff}
.brand{background:#fff;color:#17364f;border-radius:12px;padding:10px;display:flex;align-items:center;gap:9px;margin-bottom:13px}.brand img{width:52px;height:40px;object-fit:contain;border-radius:6px}.brand strong{display:block;font-size:10px}.brand small{display:block;font-size:7px;color:#788896}
.sidebar>a{display:block;padding:9px 10px;border-radius:8px;color:#e9f2f7;font-size:10px;margin:2px 0}.sidebar>a:hover{background:#ffffff17}.sidebar .logout{color:#ffd2d2}.side-label{font-size:7px;color:#a9cfdf;font-weight:700;letter-spacing:1.2px;margin:15px 9px 5px}
.main{min-width:0}.top{height:65px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}.top strong{display:block;font-size:14px;color:#273b4d}.top small{display:block;font-size:8px;color:var(--muted);margin-top:2px}.content{padding:22px;max-width:1500px}.admin-footer{padding:15px 22px;font-size:8px;color:#8795a1}.admin-footer a{color:#ca7610;font-weight:bold}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px}.panel h2{margin:0 0 6px;font-size:15px;color:#183b58}.panel p{font-size:9px;color:var(--muted);line-height:1.6}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;gap:10px;align-items:center}.stat>span{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#eef5fa;font-size:21px}.stat strong{display:block;font-size:19px;color:#073765}.stat small{font-size:8px;color:var(--muted)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quick a{background:#eef5fa;color:#0a5684;padding:10px;border-radius:8px;font-size:9px;font-weight:bold}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.full{grid-column:1/-1}.form-grid label{font-size:9px;font-weight:bold;color:#4b5b68}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:10px;margin-top:5px;border:1px solid #d7e0e7;border-radius:8px}.checkline{display:flex!important;align-items:center;gap:7px}.checkline input{width:auto!important;margin:0!important}
.primary,.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:var(--navy);color:#fff;padding:10px 14px;font-size:9px;font-weight:bold;cursor:pointer}.button.gold{background:var(--gold);color:#17364f}.button.ghost{background:#eef1f4;color:#526271}.danger{background:#a83b42;color:#fff}.actions{display:flex;gap:8px;flex-wrap:wrap}
.success,.alert{padding:10px;border-radius:8px;margin:10px 0 14px;font-size:9px}.success{background:#eafff4;color:#0b704e}.alert{background:#fff0f0;color:#9f3036}
.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse;min-width:850px}.table-wrap th,.table-wrap td{padding:9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:8px}.table-wrap th{background:#f5f8fa;color:#4d6070}.thumb{width:48px;height:55px;object-fit:cover;border-radius:7px}.status{display:inline-flex;padding:4px 7px;border-radius:15px;font-size:7px;font-weight:bold}.status.live{background:#e8f8f0;color:#08724e}.status.off{background:#f1f2f4;color:#737f89}.link-danger{border:0;background:none;color:#b43f46;font-size:8px;cursor:pointer}.action-cell{white-space:nowrap}.action-cell form{display:inline}
.login-body{min-height:100vh;background:linear-gradient(135deg,#073765,#5b2c8d);display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:#fff;border-radius:18px;padding:28px;box-shadow:0 25px 70px #0004}.login-card>img{width:210px;height:65px;object-fit:contain;margin:auto}.login-card h1{text-align:center;color:#073765;margin:10px 0 3px}.login-card p{text-align:center;font-size:9px;color:var(--muted)}.login-card label{display:block;font-size:9px;font-weight:bold;margin-top:11px}.login-card input{width:100%;padding:11px;border:1px solid #d8e0e6;border-radius:8px;margin-top:5px}.login-card .primary{width:100%;margin-top:15px}.back{display:block;text-align:center;margin-top:15px;font-size:8px;color:#536d80}
.preview-logo{max-width:220px;max-height:100px;object-fit:contain;border:1px solid var(--line);border-radius:8px;padding:5px;margin-top:8px}.preview-sign{max-width:180px;max-height:75px;object-fit:contain;border:1px solid var(--line);border-radius:8px;padding:5px;margin-top:8px}
.mapping-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mapping-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;background:#f8fafb;padding:8px;border-radius:8px}.mapping-row strong{font-size:9px}.mapping-row select{padding:8px;border:1px solid #d8e0e6;border-radius:7px}
.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.template-card{border:2px solid #e0e5e9;border-radius:14px;padding:15px;background:#fff}.template-card.active{border-color:var(--gold)}.template-card h3{font-size:12px;color:#183b58}.template-preview{height:260px;background:#f3f6f8;border-radius:10px;display:grid;place-items:center;overflow:hidden}
@media(max-width:950px){.grid{grid-template-columns:repeat(2,1fr)}.quick{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px) and (hover:none), (max-width:760px) and (pointer:coarse){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.top{position:relative}.form-grid,.mapping-grid{grid-template-columns:1fr}.full{grid-column:auto}.template-grid{grid-template-columns:1fr}.content{padding:12px}}
@media(max-width:480px) and (hover:none), (max-width:480px) and (pointer:coarse){.grid{grid-template-columns:1fr}}

.saas-badge{display:inline-flex;align-items:center;gap:5px;background:#eef6fb;color:#0a5684;padding:5px 8px;border-radius:999px;font-size:7px;font-weight:800}
.plan-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#fff4cf;color:#7c5c00;font-size:7px;font-weight:800}
.role-badge{display:inline-flex;padding:4px 7px;border-radius:999px;background:#edf0f7;color:#4e5b73;font-size:7px;font-weight:800;text-transform:uppercase}
.progress{height:8px;background:#edf1f4;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:#0a6ca5}
.kpi-note{font-size:7px;color:#8795a1;margin-top:4px}.warning{padding:10px;border-radius:8px;margin:10px 0 14px;font-size:9px;background:#fff8df;color:#7c5c00}
.super-sidebar{background:linear-gradient(180deg,#2e1c55,#5b2b91)}
.small-note{font-size:8px;color:#71818d;line-height:1.5}
.inline-form{display:inline}
.code{font-family:monospace;background:#f1f4f6;border-radius:6px;padding:3px 6px;font-size:8px}

/* Desktop sidebar guard - School Card Studio SaaS */
@media(min-width:521px) and (hover:hover){
  .shell{grid-template-columns:240px minmax(0,1fr)!important}
  .sidebar{
    position:sticky!important;
    top:0!important;
    width:240px!important;
    max-width:240px!important;
    height:100vh!important;
    overflow:auto!important;
  }
  .main{min-width:0!important;width:auto!important}
  .content{min-width:0!important}
  .sidebar>a{
    padding:9px 10px!important;
    font-size:10px!important;
    margin:2px 0!important;
  }
  .brand{padding:10px!important;margin-bottom:13px!important}
  .brand img{width:52px!important;height:40px!important;object-fit:contain}
  .brand strong{font-size:10px!important}
  .brand small{font-size:7px!important}
}
html,body{max-width:100%}


/* =========================================================
   SaaS UI FONT ENLARGEMENT v1.5
   School Admin + Super Admin
   ========================================================= */

/* Base content */
body{
  font-size:15px!important;
  line-height:1.5!important;
}

/* Sidebar */
.sidebar>a{
  font-size:15px!important;
  line-height:1.35!important;
  padding:11px 12px!important;
}
.sidebar .group-title,
.sidebar .section-title,
.sidebar small{
  font-size:11px!important;
}
.brand strong{
  font-size:15px!important;
  line-height:1.2!important;
}
.brand small{
  font-size:11px!important;
}

/* Top bar */
.top,
.top *{
  font-size:14px;
}
.top h1,
.top h2,
.top h3{
  font-size:20px!important;
}

/* Main headings */
h1{font-size:26px!important;line-height:1.25!important}
h2{font-size:22px!important;line-height:1.3!important}
h3{font-size:18px!important;line-height:1.35!important}
h4{font-size:16px!important;line-height:1.35!important}

/* General text */
p,
small,
label,
td,
th,
li,
span,
div{
  line-height:1.45;
}

.panel p,
.panel small,
.help,
.muted{
  font-size:13px!important;
}

/* Form fields */
input,
select,
textarea{
  font-size:14px!important;
  line-height:1.4!important;
  min-height:40px;
}

textarea{
  min-height:90px;
}

label{
  font-size:14px!important;
}

/* Buttons and links */
button,
.button,
.primary,
.gold,
.ghost,
.danger{
  font-size:14px!important;
  line-height:1.3!important;
}

/* Tables */
table{
  font-size:14px!important;
}
th{
  font-size:13px!important;
}
td{
  font-size:14px!important;
}

/* Dashboard stats */
.stat strong{
  font-size:24px!important;
}
.stat small{
  font-size:12px!important;
}
.stat span{
  font-size:22px!important;
}

/* Quick actions / cards */
.quick a,
.template-card,
.mapping-row,
.checkline{
  font-size:14px!important;
}

/* Status badges */
.status{
  font-size:12px!important;
}

/* Inputs inside compact tables */
.table-wrap input,
.table-wrap select,
.table-wrap button,
.table-wrap .button{
  font-size:13px!important;
}

/* Keep desktop sidebar compact but readable */
@media(min-width:521px) and (hover:hover){
  .sidebar>a{
    font-size:14px!important;
    padding:10px 11px!important;
  }
  .brand strong{font-size:14px!important}
  .brand small{font-size:10px!important}
}

/* Mobile */
@media(max-width:760px){
  body{font-size:15px!important}
  .sidebar>a{font-size:15px!important}
  h1{font-size:24px!important}
  h2{font-size:21px!important}
  h3{font-size:18px!important}
  input,select,textarea,button,.button{
    font-size:15px!important;
  }
}


/* =========================================================
   SaaS UI FONT BALANCED v1.25
   Reduces previous 1.5X patch without returning to tiny text
   ========================================================= */

body{
  font-size:13px!important;
  line-height:1.45!important;
}

.sidebar>a{
  font-size:12.5px!important;
  line-height:1.32!important;
  padding:9px 11px!important;
}
.sidebar .group-title,
.sidebar .section-title,
.sidebar small{
  font-size:9.5px!important;
}
.brand strong{
  font-size:12.5px!important;
}
.brand small{
  font-size:9px!important;
}

.top,
.top *{
  font-size:12.5px;
}
.top h1,
.top h2,
.top h3{
  font-size:18px!important;
}

h1{font-size:23px!important;line-height:1.22!important}
h2{font-size:19px!important;line-height:1.28!important}
h3{font-size:16px!important;line-height:1.3!important}
h4{font-size:14px!important;line-height:1.3!important}

.panel p,
.panel small,
.help,
.muted{
  font-size:11.5px!important;
}

input,
select,
textarea{
  font-size:12.5px!important;
  min-height:36px!important;
}
textarea{
  min-height:82px!important;
}

label{
  font-size:12.5px!important;
}

button,
.button,
.primary,
.gold,
.ghost,
.danger{
  font-size:12.5px!important;
}

table{
  font-size:12.5px!important;
}
th{
  font-size:11.5px!important;
}
td{
  font-size:12.5px!important;
}

.stat strong{
  font-size:21px!important;
}
.stat small{
  font-size:10.5px!important;
}
.stat span{
  font-size:19px!important;
}

.quick a,
.template-card,
.mapping-row,
.checkline{
  font-size:12.5px!important;
}

.status{
  font-size:10.5px!important;
}

.table-wrap input,
.table-wrap select,
.table-wrap button,
.table-wrap .button{
  font-size:11.5px!important;
}

@media(min-width:521px) and (hover:hover){
  .sidebar>a{
    font-size:12.5px!important;
    padding:9px 10px!important;
  }
  .brand strong{font-size:12.5px!important}
  .brand small{font-size:9px!important}
}

@media(max-width:760px){
  body{font-size:13.5px!important}
  .sidebar>a{font-size:13.5px!important}
  h1{font-size:22px!important}
  h2{font-size:19px!important}
  h3{font-size:16px!important}
  input,select,textarea,button,.button{
    font-size:13px!important;
  }
}


/* ==========================================================
   SaaS PROFESSIONAL GROUPED SIDEBAR v2.3
   Compact accordion navigation
   ========================================================== */

.sidebar{
  padding:12px 10px 14px!important;
  scrollbar-width:thin;
  scrollbar-color:#ffffff38 transparent;
}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{
  background:#ffffff35;
  border-radius:20px;
}

.sidebar .brand{
  border:1px solid #ffffff38;
  box-shadow:0 8px 24px #001c2d25;
  margin-bottom:10px!important;
}

.sidebar-home{margin:4px 0 9px}

.nav-direct{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border-radius:11px;
  color:#edf7fb;
  background:#ffffff0b;
  border:1px solid transparent;
  transition:.18s ease;
}
.nav-direct:hover{
  background:#ffffff16;
  transform:translateY(-1px);
}
.nav-direct.active{
  background:linear-gradient(135deg,#ffffff24,#ffffff12);
  border-color:#ffffff28;
  box-shadow:inset 3px 0 0 var(--gold);
}
.nav-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  background:#ffffff13;
  border-radius:9px;
  font-size:15px!important;
}
.nav-text{min-width:0}
.nav-text b{
  display:block;
  font-size:12.5px!important;
  line-height:1.1!important;
}
.nav-text small{
  display:block;
  margin-top:2px;
  color:#acd0df!important;
  font-size:8.5px!important;
  line-height:1.15!important;
}

.side-label{
  margin:12px 7px 5px!important;
  font-size:7.5px!important;
  letter-spacing:1.45px!important;
  opacity:.9;
}

.nav-group{
  margin:4px 0;
  border:1px solid #ffffff12;
  border-radius:11px;
  background:#ffffff07;
  overflow:hidden;
  transition:.18s ease;
}
.nav-group[open]{
  background:#ffffff0d;
  border-color:#ffffff22;
  box-shadow:0 6px 16px #00233618;
}

.nav-group summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:32px 1fr 16px;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  user-select:none;
  outline:none;
}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary:hover{background:#ffffff0b}

.group-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-size:14px!important;
  box-shadow:inset 0 0 0 1px #ffffff14;
}
.group-icon.student{background:#0e729755}
.group-icon.idcard{background:#d3971945}
.group-icon.admit{background:#7d51b84d}
.group-icon.verify{background:#11856850}
.group-icon.control{background:#6f80954d}
.group-icon.account{background:#385d7f55}

.group-copy{
  min-width:0;
}
.group-copy b{
  display:block;
  color:#fff;
  font-size:11.7px!important;
  line-height:1.1!important;
  font-weight:700;
}
.group-copy small{
  display:block;
  color:#a8cbd9!important;
  margin-top:2px;
  font-size:8px!important;
  line-height:1.1!important;
}
.group-arrow{
  font-size:13px!important;
  color:#a8cbd9;
  transform:rotate(-90deg);
  transition:.18s ease;
}
.nav-group[open] .group-arrow{
  transform:rotate(0deg);
  color:#fff;
}

.nav-sub{
  padding:0 7px 7px 39px;
  position:relative;
}
.nav-sub:before{
  content:"";
  position:absolute;
  left:23px;
  top:0;
  bottom:9px;
  width:1px;
  background:#ffffff20;
}

.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:6px 8px;
  margin:2px 0;
  color:#d9edf5;
  border-radius:8px;
  font-size:10.5px!important;
  line-height:1.15!important;
  transition:.15s ease;
}
.nav-link>span{
  width:16px;
  text-align:center;
  font-size:10px!important;
}
.nav-link:hover{
  color:#fff;
  background:#ffffff12;
  padding-left:10px;
}
.nav-link.active{
  color:#fff;
  background:linear-gradient(90deg,#ffbd1828,#ffffff0d);
  box-shadow:inset 2px 0 0 var(--gold);
  font-weight:700;
}
.nav-link.logout{
  color:#ffd6d6;
}
.nav-link.logout:hover{
  background:#dc4e5a22;
}

/* Remove old plain school-sidebar anchor styling from grouped menu */
.sidebar>.side-label + .nav-group,
.sidebar .sidebar-home + .side-label{
  margin-top:8px!important;
}

/* Keep super admin direct links elegant too */
.super-sidebar>a{
  border:1px solid transparent;
  background:#ffffff07;
  margin:3px 0!important;
  border-radius:9px!important;
}
.super-sidebar>a:hover{
  background:#ffffff14;
  border-color:#ffffff18;
}
.super-sidebar>a.logout{
  background:#a640501b;
}

/* Desktop compact width and less scrolling */
@media(min-width:521px) and (hover:hover){
  .shell{
    grid-template-columns:240px minmax(0,1fr)!important;
  }
  .sidebar{
    width:240px!important;
    max-width:240px!important;
  }
  .nav-group summary{padding:7px 8px}
  .nav-link{font-size:10.5px!important}
}

/* Touch/mobile: groups stay compact and naturally collapsible */
@media(max-width:760px) and (hover:none), (max-width:760px) and (pointer:coarse){
  .sidebar{
    padding:10px!important;
  }
  .nav-direct,
  .nav-group{
    max-width:100%;
  }
  .nav-link{
    font-size:12px!important;
    min-height:34px;
  }
  .group-copy b{font-size:13px!important}
  .group-copy small{font-size:9px!important}
}