/* ===========================================================
   Teacher Management System — Design tokens & core styles
   Palette: deep academic indigo + warm brass accent
   =========================================================== */
:root{
  --ink:#152238;
  --ink-soft:#3c4a63;
  --surface:#eef3f9;
  --card:#ffffff;
  --line:#e4e7ee;
  --primary:#176fc1;
  --primary-dark:#082d5b;
  --primary-light:#e9f3ff;
  --brass:#f7bd21;
  --brass-dark:#d99b00;
  --success:#1c7a4c;
  --success-bg:#e6f4ec;
  --danger:#b3392b;
  --danger-bg:#fbeae8;
  --warning:#b8790f;
  --warning-bg:#fdf1de;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(21,34,56,.06), 0 4px 14px rgba(21,34,56,.06);
  --font-display:'Georgia','Times New Roman',serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sidebar-w:250px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--surface);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0 0 .5em;font-weight:700;}
img{max-width:100%;}

/* ---------- Layout shell ---------- */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--primary-dark),var(--primary));
  color:#dfe7ef;
  flex-shrink:0;
  position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;
  z-index:100;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex;align-items:center;gap:.6rem;
  padding:1.15rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar-brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff;}
.sidebar-brand .logo-fallback{
  width:36px;height:36px;border-radius:50%;background:var(--brass);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#1c1200;flex-shrink:0;
}
.sidebar-brand .name{font-family:var(--font-display);font-size:1.02rem;line-height:1.2;color:#fff;}
.sidebar-brand .name small{display:block;font-family:var(--font-body);font-size:.7rem;color:#b9c6d6;font-weight:400;}

.sidebar-nav{padding:.75rem .6rem;overflow-y:auto;flex:1;}
.sidebar-nav a{
  display:flex;align-items:center;gap:.65rem;
  color:#c9d5e3;padding:.62rem .8rem;border-radius:var(--radius-sm);
  font-size:.92rem;margin-bottom:.15rem;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff;}
.sidebar-nav a.active{background:var(--brass);color:#1c1200;font-weight:600;}
.sidebar-nav .nav-icon{width:18px;text-align:center;font-style:normal;}
.sidebar-foot{padding:1rem;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:#9fb0c3;}

.main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.4rem;position:sticky;top:0;z-index:50;
}
.topbar .burger{display:none;background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--ink);}
.topbar .lang-switch a{padding:.25rem .5rem;font-size:.82rem;border-radius:4px;color:var(--ink-soft);}
.topbar .lang-switch a.active{background:var(--primary-light);color:var(--primary);font-weight:700;}
.topbar .user-menu{display:flex;align-items:center;gap:.9rem;font-size:.88rem;}

.content{padding:1.5rem;flex:1;}
.page-head{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.page-head h1{font-size:1.5rem;}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;margin-bottom:1.25rem;}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.card-header h2,.card-header h3{margin:0;font-size:1.1rem;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.25rem;}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow);border-left:4px solid var(--brass);}
.stat-card .stat-value{font-family:var(--font-display);font-size:2rem;color:var(--primary);line-height:1;}
.stat-card .stat-label{color:var(--ink-soft);font-size:.85rem;margin-top:.35rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;justify-content:center;
  padding:.55rem 1.1rem;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:.88rem;font-weight:600;cursor:pointer;line-height:1.2;
  transition:.15s background,.15s border-color,.15s color;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);color:#fff;}
.btn-brass{background:var(--brass);color:#1c1200;}
.btn-brass:hover{background:var(--brass-dark);color:#1c1200;}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:#f0cac4;}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-sm{padding:.32rem .65rem;font-size:.78rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ---------- Forms ---------- */
label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:.3rem;}
.form-control,select,textarea{
  width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.9rem;font-family:var(--font-body);background:#fff;color:var(--ink);
}
.form-control:focus,select:focus,textarea:focus{outline:2px solid var(--primary-light);border-color:var(--primary);}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:1rem;}
.form-group{margin-bottom:1rem;}
.form-section-title{font-family:var(--font-display);font-size:1.05rem;color:var(--primary);border-bottom:2px solid var(--primary-light);padding-bottom:.4rem;margin:1.5rem 0 1rem;}
.form-section-title:first-child{margin-top:0;}
.help-text{font-size:.78rem;color:#7c8798;margin-top:.25rem;}
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem .8rem;max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem;background:#fbfcfd;}
.checkbox-grid label{display:flex;align-items:center;gap:.4rem;font-weight:400;color:var(--ink);font-size:.85rem;margin:0;}
.checkbox-grid input{width:auto;}

.repeatable-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:.6rem;align-items:end;margin-bottom:.6rem;padding:.75rem;background:#fbfcfd;border:1px solid var(--line);border-radius:var(--radius-sm);}
@media (max-width:700px){.repeatable-row{grid-template-columns:1fr;}}

.photo-preview{width:110px;height:110px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:#eef1f5;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.86rem;}
th,td{padding:.6rem .7rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;}
thead th{background:var(--primary-light);color:var(--primary-dark);font-weight:700;position:sticky;top:0;}
tbody tr:hover{background:#f8fafc;}
td.wrap,th.wrap{white-space:normal;}

.badge{display:inline-block;padding:.2rem .55rem;border-radius:99px;font-size:.72rem;font-weight:700;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-muted{background:#eef1f5;color:#5c6b80;}

/* ---------- Alerts ---------- */
.alert{padding:.75rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.88rem;border:1px solid transparent;}
.alert-success{background:var(--success-bg);color:var(--success);border-color:#bfe4cd;}
.alert-danger{background:var(--danger-bg);color:var(--danger);border-color:#f0cac4;}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-color:#f3ddad;}
.alert-info{background:var(--primary-light);color:var(--primary-dark);border-color:#c9dcea;}

/* ---------- Login page ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top left,#24466b,var(--primary-dark) 60%);padding:1.5rem;}
.auth-card{background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);max-width:400px;width:100%;padding:2.2rem 2rem;}
.auth-card .brand{text-align:center;margin-bottom:1.4rem;}
.auth-card .brand .logo-fallback{width:56px;height:56px;border-radius:50%;background:var(--brass);color:#1c1200;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto .6rem;font-size:1.4rem;}
.auth-card h1{font-size:1.3rem;text-align:center;margin-bottom:1.4rem;}
.auth-links{display:flex;justify-content:space-between;font-size:.82rem;margin-top:.8rem;}

/* ---------- Pagination / filters ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-bottom:1rem;}
.filter-bar .form-group{margin-bottom:0;min-width:150px;}
.pagination{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:1rem;}
.pagination a,.pagination span{padding:.4rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.82rem;color:var(--ink);}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ---------- Utility ---------- */
.flex{display:flex;}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.gap-sm{gap:.5rem;}
.gap{gap:1rem;}
.text-muted{color:#7c8798;}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(0,0,0,.35);}
  .main{margin-left:0;}
  .topbar .burger{display:block;}
}
@media (max-width:600px){
  .content{padding:1rem;}
  th,td{font-size:.78rem;padding:.45rem .5rem;}
  .auth-card{padding:1.6rem 1.2rem;}
}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.no-print{display:none !important;}
  .main{margin-left:0;}
  body{background:#fff;}
  .card{box-shadow:none;border:1px solid #ccc;}
}

/* ---------- Staff ID Card (CR80 / driving-licence size: 85.6mm x 54mm) ---------- */
.idcard-stage{display:flex;flex-wrap:wrap;gap:18px;margin-top:1rem;}
.idcard{
  width:85.6mm;height:54mm;border-radius:3mm;position:relative;overflow:hidden;
  background:#fff center/cover no-repeat;border:1px solid var(--line);
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  font-family:var(--font-body);color:var(--ink);page-break-inside:avoid;
}
.idcard::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.86);z-index:0;}
.idcard > *{position:relative;z-index:1;}
.idcard-header{display:flex;align-items:center;gap:6px;padding:3mm 3mm 2mm;background:linear-gradient(90deg,var(--primary-dark),var(--primary));color:#fff;}
.idcard-logo{width:9mm;height:9mm;border-radius:50%;object-fit:cover;background:#fff;flex-shrink:0;}
.idcard-header-text{line-height:1.2;overflow:hidden;}
.idcard-school-name{font-family:var(--font-display);font-weight:700;font-size:3mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.idcard-card-label{font-size:2mm;letter-spacing:.5px;color:var(--brass);font-weight:700;}
.idcard-body{display:flex;gap:3mm;padding:2.5mm 3mm;flex:1;}
.idcard-photo{width:18mm;height:22mm;border-radius:1.5mm;overflow:hidden;background:#eef1f5;flex-shrink:0;border:1px solid var(--line);}
.idcard-photo img{width:100%;height:100%;object-fit:cover;}
.idcard-photo-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:7mm;color:#8a97a8;font-weight:700;}
.idcard-details{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.8mm;}
.idcard-name{font-family:var(--font-display);font-weight:700;font-size:3.2mm;line-height:1.18;margin-bottom:1mm;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;max-height:7.6mm;}
.idcard-row{display:flex;justify-content:space-between;gap:4px;font-size:2.3mm;border-bottom:.2mm dotted var(--line);padding-bottom:.5mm;}
.idcard-row span{color:#7c8798;}
.idcard-row b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32mm;}

.idcard-back-body{display:flex;gap:3mm;padding:3mm;align-items:center;flex:1;}
.idcard-qr{width:20mm;height:20mm;flex-shrink:0;background:#fff;padding:1mm;border:1px solid var(--line);border-radius:1mm;}
.idcard-qr img,.idcard-qr canvas{width:100% !important;height:100% !important;}
.idcard-back-text{flex:1;min-width:0;}
.idcard-back-title{font-family:var(--font-display);font-weight:700;font-size:2.8mm;margin-bottom:.6mm;}
.idcard-back-line{font-size:2.2mm;color:#3c4a63;margin-bottom:1mm;}
.idcard-back-note{font-size:1.9mm;color:#7c8798;line-height:1.35;}
.idcard-signoff{display:flex;justify-content:space-around;align-items:flex-end;padding:0 3mm 2.5mm;gap:2mm;}
.idcard-stamp-sign{text-align:center;flex:1;}
.idcard-sign-img{max-height:8mm;max-width:100%;object-fit:contain;}
.idcard-stamp-img{max-height:12mm;max-width:100%;object-fit:contain;}
.idcard-sign-caption{font-size:1.9mm;color:#7c8798;border-top:.2mm solid var(--line);margin-top:.6mm;padding-top:.6mm;}

@media print{
  .idcard-stage{gap:6mm;}
  .idcard{box-shadow:none;}
}


/* ===========================================================
   VCC Teacher Details Enterprise Edition v22 integration
   =========================================================== */
.enterprise-nav-label{padding:.7rem .8rem .3rem;color:#f7bd21;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.sidebar-nav a.enterprise-return{border:1px solid rgba(247,189,33,.24);background:rgba(255,255,255,.04);}
.sidebar-nav a.enterprise-return:hover{background:rgba(247,189,33,.16);color:#fff;}
.module-identity{display:flex;align-items:center;gap:.45rem;margin-right:auto;color:#082d5b;}
.module-identity small{font-size:.7rem;color:#718096;margin-left:.25rem;}
.module-dot{width:10px;height:10px;border-radius:50%;background:#f7bd21;box-shadow:0 0 0 4px rgba(247,189,33,.18);}
.enterprise-login-top{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1.2rem;background:#082d5b;color:#fff;border-bottom:3px solid #f7bd21;font-size:.82rem;}
.enterprise-login-top a{color:#fff;font-weight:700;}
.enterprise-edition-badge{display:inline-block;margin-top:.55rem;padding:.3rem .7rem;border-radius:999px;background:#fff3c4;color:#725300;font-size:.72rem;font-weight:800;}
.auth-wrap{background:radial-gradient(circle at 20% 10%,#267fd0 0,#082d5b 52%,#061c37 100%);padding-top:4.5rem;}
.auth-card{border-top:5px solid #f7bd21;}
.auth-card .brand img{background:#fff;padding:3px;border:2px solid #f7bd21;}
.enterprise-mini-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#082d5b;color:#fff;padding:8px 18px;border-bottom:3px solid #f7bd21;font-size:.78rem;}
.enterprise-mini-bar a{color:#fff;font-weight:700;}
.enterprise-mini-bar span{margin-left:auto;color:#dbeafe;}
.sidebar-brand img{border:2px solid #f7bd21;padding:2px;}
.topbar{border-bottom:1px solid #d9e5f2;box-shadow:0 3px 12px rgba(8,45,91,.06);}
.card{border-top:3px solid transparent;}
.card:hover{border-top-color:#f7bd21;}
.btn-primary{background:linear-gradient(135deg,#176fc1,#0c5599);border-color:#176fc1;}
.btn-primary:hover{background:linear-gradient(135deg,#0c5599,#082d5b);}
@media(max-width:720px){.enterprise-login-top{font-size:.72rem}.module-identity small{display:none}.enterprise-mini-bar span{width:100%;margin-left:0}.auth-wrap{padding-top:5.5rem}}