/* School Certificate System — compact professional admin theme. No external fonts or CDNs. */
:root{--navy:#0F2A4A;--navy2:#173E68;--gold:#C9A227;--gold2:#E8C766;--teal:#0EA5A4;--ink:#1B2A41;--mut:#6B7C93;--line:#D8E1EC;--bg:#EEF2F6;--green:#0B8A55;--red:#B42318}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;font-size:.82rem;color:var(--ink);background:var(--bg)}
a{color:var(--navy)}
.shell{display:flex;min-height:100vh}
.sidebar{width:232px;flex:none;background:linear-gradient(180deg,#0B2545,#0E2E56 55%,#0B2545);color:#C9D8EA;padding:.8rem .6rem;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:.55rem;align-items:center;padding:.3rem .4rem .8rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:.6rem}
.brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#F5C451,#E89B0C);color:#0B2545;font-weight:900;font-size:1.15rem;display:flex;align-items:center;justify-content:center;flex:none}
.brand-txt b{display:block;color:#fff;font-size:.92rem;line-height:1.1}
.brand-txt span{font-size:.62rem;color:#9FB3CC}
.nav-item{display:flex;gap:.5rem;align-items:center;color:#C9D8EA;text-decoration:none;font-weight:700;font-size:.76rem;padding:.45rem .55rem;border-radius:9px;margin-bottom:2px}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(245,196,81,.22),rgba(245,196,81,.06));color:#fff;box-shadow:inset 3px 0 0 #F5C451}
.nav-sec{font-size:.6rem;font-weight:800;letter-spacing:.8px;color:#7E94B0;text-transform:uppercase;padding:.7rem .55rem .25rem}
.side-foot{margin-top:1rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.6rem}
.side-foot a{color:#C9D8EA;text-decoration:none;font-size:.72rem;font-weight:600;display:block;padding:.35rem .55rem;border-radius:8px}
.side-foot a:hover{background:rgba(255,255,255,.07);color:#fff}
.main{flex:1;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:.6rem 1rem;display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:50}
.tb-title{font-weight:800;font-size:1rem;color:var(--navy)}
.tb-title span{display:block;font-size:.66rem;color:var(--mut);font-weight:600}
.tb-user{margin-left:auto;font-size:.72rem;color:var(--mut);text-align:right}
.tb-user b{display:block;color:var(--navy);font-size:.78rem}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:8px;width:36px;height:36px;font-size:1.1rem;cursor:pointer}
.content{padding:1rem;max-width:1180px;margin:0 auto}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;box-shadow:0 2px 14px rgba(15,42,74,.06);margin-bottom:.8rem}
.panel h3{margin:0 0 .7rem;font-size:.95rem;color:var(--navy)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:.8rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem;box-shadow:0 2px 10px rgba(15,42,74,.05)}
.kpi.grad1{background:linear-gradient(135deg,#0F2A4A,#173E68);color:#fff;border:0}
.kpi.grad2{background:linear-gradient(135deg,#0B3B4A,#0EA5A4);color:#fff;border:0}
.kpi.grad3{background:linear-gradient(135deg,#5B3A0E,#C9A227);color:#fff;border:0}
.kpi.grad4{background:linear-gradient(135deg,#3D2A5E,#7C5CBF);color:#fff;border:0}
.kpi .n{font-size:1.55rem;font-weight:900;line-height:1.1}
.kpi .l{font-size:.68rem;opacity:.85;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.kpi .s{font-size:.68rem;opacity:.8;margin-top:.2rem}
.btn{display:inline-block;border:0;border-radius:8px;padding:.45rem 1rem;font-weight:700;font-size:.76rem;cursor:pointer;text-decoration:none;font-family:inherit}
.btn.gold{background:linear-gradient(135deg,#F5C451,#E89B0C);color:#0B2545}
.btn.navy{background:var(--navy);color:#fff}
.btn.teal{background:var(--teal);color:#fff}
.btn.white{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.red{background:#FDECEC;color:var(--red)}
.btn.sm{padding:.32rem .7rem;font-size:.7rem}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,42,74,.16)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.fld label{display:block;font-size:.68rem;font-weight:800;color:#43566E;margin-bottom:.25rem}
.fld input,.fld select,.fld textarea{width:100%;padding:.5rem .6rem;border:1.5px solid var(--line);border-radius:8px;font-size:.8rem;font-family:inherit;background:#fff}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold)}
.fld.full{grid-column:1/-1}
.right{text-align:right}
.small{font-size:.7rem}
.mut{color:var(--mut)}
.tbl-scroll{overflow:auto}
table.ledger{width:100%;border-collapse:collapse;font-size:.76rem}
table.ledger th{background:var(--navy);color:#fff;padding:.5rem .55rem;text-align:left;font-size:.68rem;letter-spacing:.3px}
table.ledger td{padding:.5rem .55rem;border-bottom:1px solid #E6ECF3;vertical-align:middle}
table.ledger tr:hover td{background:#F4F8FD}
.act-col{text-align:center;white-space:nowrap}
.act-col a,.act-col button{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:7px;background:#EEF2F6;border:0;color:var(--navy);text-decoration:none;cursor:pointer;font-size:.8rem;margin:0 1px}
.act-col a:hover,.act-col button:hover{background:#E8C766}
.badge{display:inline-block;padding:.12rem .55rem;border-radius:20px;font-size:.64rem;font-weight:800}
.badge.green{background:#E4F5EC;color:var(--green)}
.badge.gold{background:#FDF3D7;color:#7A5A00}
.badge.grey{background:#EEF2F6;color:var(--mut)}
.badge.red{background:#FDECEC;color:var(--red)}
.flash{padding:.6rem .8rem;border-radius:10px;margin-bottom:.8rem;font-size:.78rem;font-weight:600}
.flash.success{background:#E4F5EC;color:#0B6B43}
.flash.error{background:#FDECEC;color:var(--red)}
.empty-note{text-align:center;color:var(--mut);padding:1.2rem;font-size:.78rem}
.mtabs{display:flex;gap:.3rem;margin-bottom:.8rem;flex-wrap:wrap}
.mtabs a{padding:.45rem .9rem;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--navy);text-decoration:none;font-weight:700;font-size:.74rem}
.mtabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.design-card{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.design-card img{width:100%;height:240px;object-fit:cover;object-position:top;display:block;background:#F4F4F4}
.design-card .dc-body{padding:.6rem .7rem}
.design-card .dc-body b{font-size:.8rem;color:var(--navy)}
.design-card .dc-actions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.45rem}
.thumb-pick{display:inline-block;border:2.5px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;margin:0 .4rem .4rem 0;position:relative;background:#fff}
.thumb-pick img{width:110px;height:156px;object-fit:cover;display:block}
.thumb-pick span{display:block;text-align:center;font-size:.64rem;font-weight:800;padding:.25rem;color:var(--navy)}
.thumb-pick input{position:absolute;opacity:0}
.thumb-pick.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.35)}
.bar-row{display:flex;align-items:center;gap:.5rem;font-size:.72rem;margin-bottom:.35rem}
.bar-row .bl{width:150px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .bt{flex:1;background:#EEF2F6;border-radius:20px;height:14px;overflow:hidden}
.bar-row .bf{height:100%;background:linear-gradient(90deg,#C9A227,#0EA5A4)}
.bar-row .bn{width:34px;text-align:right;font-weight:800}
/* Modal popup (Print Centre) */
.modal-back{position:fixed;inset:0;background:rgba(10,25,45,.55);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:1.2rem;overflow:auto}
.modal-back.open{display:flex}
.modal{width:min(980px,100%);background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.modal-head{background:var(--navy);color:#fff;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between}
.modal-head b{font-size:.9rem}
.modal-head button{background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:1rem}
.modal-body{padding:1rem}
.preview-frame{width:100%;height:520px;border:1.5px solid var(--line);border-radius:10px;background:#EEF2F6}
@media(max-width:820px){
  .sidebar{position:fixed;left:-240px;top:0;z-index:120;transition:left .2s}
  .sidebar.open{left:0}
  .burger{display:block}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .form-grid,.form-grid.two{grid-template-columns:1fr}
  .content{padding:.7rem}
  .preview-frame{height:420px}
}