:root{--blue:#0b5fff;--dark:#101828;--muted:#667085;--bg:#f5f7fb;--card:#fff;--green:#12b76a;--red:#f04438;--yellow:#f79009;--border:#e4e7ec;--shadow:0 14px 45px rgba(16,24,40,.08)}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--dark)}a{text-decoration:none;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:#071c45;color:#fff;padding:22px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin-bottom:26px}.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#0b5fff,#16c784);display:grid;place-items:center;font-weight:800}.brand small{display:block;color:#b7c4df;margin-top:3px}.sidebar nav{display:grid;gap:7px}.sidebar a{padding:12px 14px;border-radius:12px;color:#e8efff}.sidebar a:hover{background:rgba(255,255,255,.11)}.main{flex:1;padding:24px;min-width:0}.topbar{height:70px;background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-bottom:22px}.topbar small{display:block;color:var(--muted);margin-top:4px}.menu-btn{display:none;border:0;background:#eef4ff;border-radius:12px;padding:10px 12px;font-size:20px}.card{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:var(--shadow);margin-bottom:20px}.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:var(--shadow)}.stat small{color:var(--muted)}.stat strong{display:block;font-size:30px;margin-top:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;padding:11px 15px;font-weight:700;cursor:pointer;background:var(--blue);color:#fff}.btn:hover{filter:brightness(.96)}.btn-light{background:#eef4ff;color:#0648c7}.btn-danger{background:var(--red)}.btn-green{background:var(--green)}.btn-yellow{background:var(--yellow);color:#101828}.btn-sm{padding:7px 10px;border-radius:10px;font-size:13px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px;margin-bottom:13px}.field label{font-weight:700;font-size:14px}.field input,.field select,.field textarea{border:1px solid var(--border);border-radius:14px;padding:12px 13px;font-size:15px;background:#fff;width:100%}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:13px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}.table th{font-size:13px;text-transform:uppercase;color:var(--muted);background:#f9fafb}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.badge-green{background:#ecfdf3;color:#027a48}.badge-red{background:#fef3f2;color:#b42318}.badge-yellow{background:#fffaeb;color:#b54708}.badge-blue{background:#eff8ff;color:#175cd3}.alert{padding:14px 16px;border-radius:14px;margin-bottom:15px;border:1px solid var(--border);background:#fff}.alert-success{border-color:#abefc6;background:#ecfdf3}.alert-error{border-color:#fecdca;background:#fef3f2}.alert-info{border-color:#b2ddff;background:#eff8ff}.actions{display:flex;gap:8px;flex-wrap:wrap}.login-page{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at top left,#dbeafe,transparent 34%),linear-gradient(145deg,#f5f7fb,#eef4ff)}.login-card{width:min(460px,100%)}.muted{color:var(--muted)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.qr-card{border:1px dashed #98a2b3;border-radius:20px;padding:18px;text-align:center;background:#fff}.qr-img{width:180px;height:180px;border-radius:12px}.pwa-body{background:#071c45;color:#fff;min-height:100vh}.pwa-shell{min-height:100vh;padding:18px;display:grid;grid-template-rows:auto 1fr auto;gap:16px}.pwa-header{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:16px}.pwa-card{background:#fff;color:#101828;border-radius:24px;padding:18px;box-shadow:0 14px 50px rgba(0,0,0,.22)}.pwa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pwa-tile{background:#f5f7fb;border:1px solid var(--border);border-radius:20px;padding:20px;text-align:center;font-weight:900;cursor:pointer}.scanner-box{position:relative;overflow:hidden;border-radius:22px;background:#000;min-height:300px;display:grid;place-items:center}.scanner-box video{width:100%;height:100%;object-fit:cover}.scan-result{font-size:22px;font-weight:900;text-align:center;border-radius:20px;padding:20px;margin-top:12px}.scan-ok{background:#ecfdf3;color:#027a48}.scan-no{background:#fef3f2;color:#b42318}@media(max-width:900px){.sidebar{position:fixed;left:-290px;z-index:20;transition:.2s}.show-sidebar .sidebar{left:0}.menu-btn{display:block}.main{padding:14px}.grid-2,.grid-3,.grid-4,.form-row{grid-template-columns:1fr}.topbar{border-radius:16px}.pwa-grid{grid-template-columns:1fr}.table th,.table td{font-size:13px}}
.camera-help{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.65));font-weight:800;padding:25px}.manual-scan-form{margin-top:12px}.scan-history{padding-left:18px;display:grid;gap:8px}.scan-history li{background:#f9fafb;border:1px solid #e4e7ec;border-radius:12px;padding:10px}.history-ok{color:#027a48}.history-no{color:#b42318}.qr-render{display:grid;place-items:center;margin:14px auto}.qr-render canvas,.qr-render img{border:10px solid #fff;box-shadow:0 8px 24px rgba(16,24,40,.12);border-radius:12px}.qr-fallback{padding:16px;border:1px dashed #98a2b3;border-radius:12px}@media print{.sidebar,.topbar,.no-print,.alert{display:none!important}.main{padding:0}.card{box-shadow:none;border:0}.student-card-print{margin:0 auto!important}.qr-card{break-inside:avoid}}


.student-photo{width:64px;height:64px;object-fit:cover;border-radius:16px;border:1px solid #e4e7ec;box-shadow:0 6px 18px rgba(16,24,40,.10)}
.student-photo-placeholder{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:#f2f4f7;color:#667085;border:1px dashed #98a2b3;font-size:12px;font-weight:700}
.student-card-print .student-photo,.qr-card .student-photo{width:110px;height:110px;border-radius:22px}
@media print{.student-photo{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

.student-card-page{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:20px 0;
}

.student-card-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.student-id-card{
  width:420px;
  max-width:100%;
  background:#ffffff;
  border:1px solid #d0d5dd;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(16,24,40,.16);
}

.student-id-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  background:linear-gradient(135deg,#eff8ff,#ffffff);
  border-bottom:1px solid #e4e7ec;
}

.student-id-status{
  padding:7px 11px;
  border-radius:999px;
  background:#ecfdf3;
  color:#027a48;
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
}

.student-id-body{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:16px;
  padding:20px;
  align-items:start;
}

.student-id-left{
  text-align:center;
  min-width:0;
}

.student-card-photo-box{
  width:120px;
  height:120px;
  margin:0 auto 12px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid #d0d5dd;
  background:#f2f4f7;
  box-shadow:0 10px 24px rgba(16,24,40,.12);
  display:grid;
  place-items:center;
}

.student-card-photo-img{
  width:120px!important;
  height:120px!important;
  max-width:120px!important;
  max-height:120px!important;
  min-width:120px!important;
  min-height:120px!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:0!important;
}

.student-card-photo-empty{
  width:120px;
  height:120px;
  display:grid;
  place-items:center;
  color:#667085;
  font-size:13px;
  font-weight:900;
  background:#f2f4f7;
}

.student-id-name{
  font-size:18px;
  line-height:1.15;
  font-weight:900;
  color:#101828;
  word-break:break-word;
}

.student-id-matricule{
  margin-top:6px;
  font-size:13px;
  color:#475467;
  font-weight:700;
}

.student-id-right{
  display:grid;
  gap:10px;
  min-width:0;
}

.student-info-line{
  background:#f9fafb;
  border:1px solid #eaecf0;
  border-radius:14px;
  padding:10px 12px;
  min-width:0;
}

.student-info-line span{
  display:block;
  font-size:11px;
  color:#667085;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:3px;
}

.student-info-line strong{
  display:block;
  color:#101828;
  font-size:14px;
  line-height:1.2;
  word-break:break-word;
}

.student-id-qr-zone{
  padding:0 20px 20px;
  text-align:center;
}

.student-card-qr-img{
  width:210px!important;
  height:210px!important;
  max-width:210px!important;
  max-height:210px!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto!important;
  padding:10px;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:18px;
}

.student-card-qr-token{
  margin-top:8px;
  font-size:11px;
  color:#344054;
  font-weight:800;
  word-break:break-all;
}

.student-id-footer{
  padding:14px 20px;
  text-align:center;
  background:#101828;
  color:#ffffff;
  font-size:12px;
  line-height:1.4;
}

@media(max-width:520px){
  .student-id-card{
    width:100%;
    border-radius:22px;
  }

  .student-id-body{
    grid-template-columns:1fr;
  }
}

@media print{
  body{
    background:#fff!important;
  }

  .sidebar,
  .topbar,
  .no-print,
  .alert,
  .student-card-actions{
    display:none!important;
  }

  .main{
    padding:0!important;
    margin:0!important;
  }

  .content,
  .container{
    padding:0!important;
    margin:0!important;
  }

  .student-card-page{
    padding:0!important;
  }

  .student-id-card{
    width:86mm!important;
    max-width:86mm!important;
    box-shadow:none!important;
    border:1px solid #000!important;
    border-radius:8mm!important;
    page-break-inside:avoid;
  }

  .student-id-header{
    padding:5mm!important;
  }

  .student-id-body{
    grid-template-columns:32mm 1fr!important;
    gap:4mm!important;
    padding:5mm!important;
  }

  .student-card-photo-box,
  .student-card-photo-img,
  .student-card-photo-empty{
    width:28mm!important;
    height:28mm!important;
    min-width:28mm!important;
    min-height:28mm!important;
    max-width:28mm!important;
    max-height:28mm!important;
  }

  .student-card-qr-img{
    width:42mm!important;
    height:42mm!important;
    max-width:42mm!important;
    max-height:42mm!important;
  }

  .student-id-footer{
    padding:4mm!important;
  }

  *{
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
}
.table img.student-photo,
td img.student-photo,
.student-photo{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  object-fit:cover!important;
  display:block!important;
  border-radius:12px!important;
  border:1px solid #e4e7ec!important;
  box-shadow:0 4px 12px rgba(16,24,40,.12)!important;
}

.table td:first-child img,
.table td img{
  max-width:44px!important;
  max-height:44px!important;
}

.scanner-box{
  position:relative;
  width:100%;
  min-height:320px;
  background:#101828;
  border-radius:22px;
  overflow:hidden;
  display:grid;
  place-items:center;
}

#qrVideo{
  width:100%!important;
  height:320px!important;
  object-fit:cover!important;
  display:block!important;
  background:#101828;
}

.camera-help{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.65));
  font-weight:800;
  padding:25px;
}

.manual-scan-form{
  margin-top:12px;
}

.scan-history{
  padding-left:18px;
  display:grid;
  gap:8px;
}

.scan-history li{
  background:#f9fafb;
  border:1px solid #e4e7ec;
  border-radius:12px;
  padding:10px;
}

.history-ok{
  color:#027a48;
}

.history-no{
  color:#b42318;
}