/* ============ SCHOOL QR SYSTEM - SHARED STYLES (LIGHT THEME) ============ */
:root{
  --bg:#f6f7fb; --card:#fff; --primary:#3b5cf6; --primary-dark:#2a45d6;
  --accent:#00c2a8; --danger:#ef4444; --warning:#f5a524; --success:#17c964;
  --text:#151b2e; --text-muted:#6b7280; --border:#e8eaf2;
  --sidebar-bg:#ffffff; --sidebar-bg-2:#fafbff; --sidebar-text:#5b6478; --sidebar-active:#3b5cf6;
  --sidebar-border:#eceef6;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 3px rgba(16,20,40,.05), 0 8px 20px -8px rgba(16,20,40,.07);
  --shadow-lg:0 20px 50px -12px rgba(16,20,40,.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
a{text-decoration:none; color:inherit;} ul{list-style:none;} button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#d6dae8; border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background:#b8bfd6;}

/* Layout */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:264px; background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  color:var(--sidebar-text); display:flex; flex-direction:column; flex-shrink:0;
  position:sticky; top:0; height:100vh; border-right:1px solid var(--sidebar-border);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-brand .logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-brand .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.sidebar-brand .brand-text {
  font-size: 17px;
  font-weight: 700;
}

.sidebar-brand .brand-sub {
  font-size: 12px;
  margin-top: 3px;
  opacity: 0.75;
}
.sidebar-nav{flex:1; overflow-y:auto; padding:14px 12px;}
.sidebar-section-title{font-size:10px; text-transform:uppercase; font-weight:700; letter-spacing:.09em; color:#9aa1ba; margin:18px 10px 8px;}
.sidebar-section-title:first-child{margin-top:4px;}
.sidebar-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; margin-bottom:2px;
  color:var(--sidebar-text); font-size:13px; font-weight:600; transition:background .15s,color .15s,transform .1s;
  position:relative;
}
.sidebar-nav a:hover{background:#f0f2fb; color:var(--text);}
.sidebar-nav a:active{transform:scale(.98);}
.sidebar-nav a.active{
  background:linear-gradient(135deg,var(--sidebar-active),#5b7bff); color:#fff; font-weight:700;
  box-shadow:0 8px 18px -6px rgba(59,92,246,.45);
}
.sidebar-nav a .icon{width:19px; text-align:center; font-size:14.5px; flex-shrink:0;}
.sidebar-nav a .badge-nav{margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px;}
.sidebar-footer{padding:14px; border-top:1px solid var(--sidebar-border);}
.sidebar-user{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; background:#f4f6fc;}
.sidebar-user .avatar{
  width:36px;height:36px;border-radius:50%; background:linear-gradient(135deg,var(--primary),#5b7bff);
  color:#fff; display:flex; align-items:center;justify-content:center;font-weight:700;font-size:13px;
  overflow:hidden; flex-shrink:0; border:2px solid #fff; box-shadow:0 0 0 1px var(--border);
}
.sidebar-user .avatar img{width:100%;height:100%;object-fit:cover; display:block;}
.sidebar-user .info{flex:1; min-width:0;}
.sidebar-user .name{font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sidebar-user .role{font-size:10.5px; color:var(--sidebar-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.logout-btn{
  margin-top:10px; width:100%; padding:9px; border-radius:9px; border:1px solid var(--border);
  background:#fff; color:#4b5266; font-size:12px; font-weight:700; transition:.15s;
}
.logout-btn:hover{background:var(--danger); color:#fff; border-color:var(--danger);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:64px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:17px; font-weight:800; letter-spacing:-.01em;}
.topbar-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center; position:relative; font-size:16px; transition:.15s;
}
.icon-btn:hover{border-color:var(--primary); background:#eef1ff;}
.icon-btn .dot{position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.content{padding:24px; flex:1;}

/* Grid & Card */
.grid{display:grid; gap:16px;}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1300px){.grid-5{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;}}

.card{background:var(--card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:20px; transition:box-shadow .2s;}
.card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap;}
.card-header h3{font-size:14.5px; font-weight:700; letter-spacing:-.005em;}
.card-header p{font-size:11.5px; color:var(--text-muted); margin-top:3px;}

.stat-card{display:flex; align-items:center; gap:13px;}
.stat-card .stat-icon{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
.stat-card .stat-value{font-size:23px; font-weight:800; line-height:1.1; letter-spacing:-.01em;}
.stat-card .stat-label{font-size:11.5px; color:var(--text-muted); margin-top:3px;}
.stat-card .stat-trend{font-size:11px; margin-top:4px; font-weight:700;}
.trend-up{color:var(--success);} .trend-down{color:var(--danger);}

.bg-blue{background:#e9edff; color:var(--primary);} .bg-green{background:#e0fbec; color:var(--success);}
.bg-orange{background:#fff2df; color:var(--warning);} .bg-red{background:#fee6e6; color:var(--danger);}
.bg-teal{background:#dffaf5; color:var(--accent);} .bg-purple{background:#f1e9ff; color:#7c3aed;}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:9px; border:1px solid transparent; font-size:12.5px; font-weight:700; transition:.15s; white-space:nowrap;}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 4px 12px -4px rgba(59,92,246,.5);}
.btn-primary:hover{background:var(--primary-dark); box-shadow:0 6px 16px -4px rgba(59,92,246,.6); transform:translateY(-1px);}
.btn-outline{background:var(--card); border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--primary); color:var(--primary); background:#f6f8ff;}
.btn-danger{background:var(--danger); color:#fff;} .btn-danger:hover{background:#d63838;}
.btn-success{background:var(--success); color:#fff;}
.btn-sm{padding:7px 12px; font-size:11.5px;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important;}

/* Forms */
.form-group{margin-bottom:15px;}
.form-group label{display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:#374151;}
.form-control{width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:9px; font-size:13px; background:var(--card); outline:none; transition:.15s; color:var(--text);}
.form-control:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(59,92,246,.12);}
.form-control::placeholder{color:#a3a9bd;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:600px){.form-row,.form-row-3{grid-template-columns:1fr;}}

/* Table */
.table-wrap{overflow-x:auto; border-radius:10px;}
table{width:100%; border-collapse:collapse;}
th,td{padding:12px 14px; text-align:left; font-size:12.5px; border-bottom:1px solid var(--border);}
th{color:var(--text-muted); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; background:#f8f9fd; white-space:nowrap;}
tbody tr{transition:background .12s;}
tbody tr:hover{background:#f7f8fe;}
tbody tr:last-child td{border-bottom:none;}
.table-actions{display:flex; gap:6px;}
.table-actions button{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--card); display:flex; align-items:center; justify-content:center; font-size:12.5px; transition:.15s;}
.table-actions button:hover{border-color:var(--primary); color:var(--primary); background:#f6f8ff;}
.avatar-cell{width:32px;height:32px;border-radius:50%;object-fit:cover; background:var(--border); display:block;}
.avatar-cell-fallback{width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--primary),#5b7bff); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;}

/* Badges */
.badge{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:700; white-space:nowrap;}
.badge-green{background:#e0fbec; color:var(--success);} .badge-red{background:#fee6e6; color:var(--danger);}
.badge-orange{background:#fff2df; color:var(--warning);} .badge-blue{background:#e9edff; color:var(--primary);}
.badge-gray{background:#eef0f4; color:var(--text-muted);} .badge-purple{background:#f1e9ff; color:#7c3aed;}

/* Auth */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eef1ff 0%,#f6f7fb 60%,#eafbf7 100%); padding:20px;}
.auth-card{width:100%; max-width:420px; background:var(--card); border-radius:20px; padding:38px 32px; box-shadow:var(--shadow-lg); border:1px solid var(--border);}
.auth-logo{width:110px;height:110px;border-radius:30px; margin:0 auto 16px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:21px; box-shadow:0 8px 20px -6px rgba(59,92,246,.5);}
.auth-title{text-align:center; font-size:19px; font-weight:800; margin-bottom:5px; letter-spacing:-.01em;}
.auth-sub{text-align:center; font-size:12px; color:var(--text-muted); margin-bottom:24px;}
.auth-error{background:#fee6e6; color:var(--danger); padding:11px 13px; border-radius:9px; font-size:12px; margin-bottom:14px; display:none; font-weight:600;}
.auth-hint{background:#eef1ff; color:var(--primary-dark); padding:11px 13px; border-radius:9px; font-size:11px; margin-bottom:18px; line-height:1.8; max-height:180px; overflow-y:auto;}
.auth-footer{text-align:center; margin-top:18px; font-size:12px; color:var(--text-muted);}
.import-dropdown-wrap{position:relative; display:inline-block;}
.import-dropdown-menu{
  display:none; position:absolute; top:100%; left:0; margin-top:4px;
  background:var(--card); border:1px solid var(--border); border-radius:9px;
  box-shadow:var(--shadow-lg); min-width:160px; z-index:20; padding:6px;
}
.import-dropdown-wrap:hover .import-dropdown-menu{display:block;}
.import-dropdown-menu a{
  display:block; padding:8px 10px; border-radius:6px; font-size:12.5px; font-weight:600;
  color:var(--text); transition:.15s;
}
.import-dropdown-menu a:hover{background:#f0f2fb; color:var(--primary);}
/* Misc */
.flex{display:flex;} .flex-between{display:flex; align-items:center; justify-content:space-between;}
.flex-wrap{flex-wrap:wrap;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;}
.text-muted{color:var(--text-muted);} .text-sm{font-size:12px;} .text-center{text-align:center;}
.w-full{width:100%;}
.progress{height:8px; background:var(--border); border-radius:6px; overflow:hidden;}
.progress-bar{height:100%; background:linear-gradient(90deg,var(--primary),#5b7bff); border-radius:6px; transition:width .3s;}

.modal-overlay{position:fixed; inset:0; background:rgba(16,20,40,.45); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card); border-radius:18px; width:100%; max-width:520px; padding:24px; box-shadow:var(--shadow-lg); max-height:92vh; overflow-y:auto;}
.modal.modal-lg{max-width:720px;}
.modal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.modal-header h3{font-size:15.5px; font-weight:800;}
.modal-close{background:#f1f2f7; border:none; font-size:15px; color:var(--text-muted); width:30px; height:30px; border-radius:8px; transition:.15s;}
.modal-close:hover{background:#e5e7f0; color:var(--text);}

.toast-wrap{position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{background:var(--text); color:#fff; padding:13px 18px; border-radius:10px; font-size:12.5px; font-weight:600; box-shadow:var(--shadow-lg); min-width:230px; animation:slideIn .25s ease;}
.toast.success{background:var(--success);} .toast.error{background:var(--danger);} .toast.warning{background:var(--warning);}
@keyframes slideIn{from{transform:translateX(30px);opacity:0;} to{transform:translateX(0);opacity:1;}}

.log-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
.log-item:last-child{border-bottom:none;}
.log-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0;}
.log-item .log-title{font-size:12.5px; font-weight:600;}
.log-item .log-meta{font-size:11px; color:var(--text-muted); margin-top:2px;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto;}
.tab-btn{padding:11px 16px; font-size:12.5px; font-weight:700; color:var(--text-muted); border-bottom:2px solid transparent; white-space:nowrap; transition:.15s;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--primary); border-bottom-color:var(--primary);}

.permission-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px; background:var(--bg); font-size:11.5px; margin:3px; border:1px solid var(--border);}
.permission-chip input{margin:0;}

.mobile-toggle{display:none;}
@media(max-width:900px){
  .sidebar{position:fixed; left:-270px; z-index:50; transition:.25s ease; box-shadow:var(--shadow-lg);}
  .sidebar.open{left:0;}
  .mobile-toggle{display:flex;}
}

/* QR scan page */
.scan-wrap{display:grid; grid-template-columns:1fr 380px; gap:18px;}
@media(max-width:1000px){.scan-wrap{grid-template-columns:1fr;}}
#qrVideo{width:100%; border-radius:14px; background:#000; max-height:420px; object-fit:cover;}
.scan-result-card{text-align:center;}
.scan-result-photo{width:350px;height:350px;border-radius:50%; object-fit:cover; margin:0 auto 14px; border:4px solid var(--primary); background:var(--bg); display:block;}
.scan-result-photo-fallback{width:350px;height:350px;border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--primary),#5b7bff); color:#fff; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:800;}
.scan-status-badge{display:inline-block; padding:9px 22px; border-radius:24px; font-weight:800; font-size:14px; margin-bottom:6px;}
.access-denied-box{text-align:center; padding:60px 20px;}
.access-denied-box .icon{font-size:56px; margin-bottom:16px;}