:root{
  --brand:#16a34a;
  --brand-dark:#15803d;
}

body{ background:#f4f5f7; }

/* ---- Sidebar ---- */
.sidebar{
  width:250px;
  min-height:100vh;
  background:#111827;
  color:#fff;
  flex-shrink:0;
}
.sidebar .brand{
  padding:20px;
  font-weight:700;
  font-size:17px;
  border-bottom:1px solid #1f2937;
  display:flex;
  align-items:center;
  gap:8px;
}
.sidebar nav{ padding:10px 0; }
.sidebar .nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  color:#d1d5db;
  font-size:14px;
  border-radius:0;
}
.sidebar .nav-link i{ font-size:16px; width:18px; text-align:center; }
.sidebar .nav-link:hover{ background:#1f2937; color:#fff; }
.sidebar .nav-link.active{ background:#1f2937; color:#fff; border-right:3px solid var(--brand); }
.sidebar .logout{ padding:16px 20px; border-top:1px solid #1f2937; }
.sidebar .logout a{ color:#f87171; font-size:14px; text-decoration:none; }
.sidebar .logout a:hover{ color:#fca5a5; }

.main{ min-width:0; }
.topbar{ background:#fff; padding:14px 24px; border-bottom:1px solid #e5e7eb; }
.content{ padding:24px; }

/* ---- Buttons / brand color ---- */
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.text-brand{ color:var(--brand) !important; }
.bg-brand{ background:var(--brand) !important; }

/* ---- Stat cards ---- */
.stat-card{ border-radius:14px; }
.stat-card .num{ font-size:26px; font-weight:700; }
.stat-card .label{ color:#6b7280; font-size:13px; }
.stat-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff;
}

/* ---- Login pages ---- */
.login-page{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#111827,#16a34a);
}
.login-box{ width:380px; }
.login-box .logo-icon{ font-size:36px; text-align:center; display:block; margin-bottom:8px; }

/* ---- Misc ---- */
.empty-state{ text-align:center; padding:50px 20px; color:#9ca3af; }
.empty-state i{ font-size:40px; display:block; margin-bottom:10px; }

.qr-box img{ border:1px solid #e5e7eb; border-radius:12px; padding:10px; background:#fff; }

.table-qr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.table-qr-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; text-align:center; }
.table-qr-card img{ width:100%; height:auto; border-radius:8px; }

@media print {
  .no-print, .sidebar, .topbar{ display:none !important; }
  .main, .content{ padding:0 !important; margin:0 !important; }
  .table-qr-grid{ grid-template-columns:repeat(3,1fr); }
  .table-qr-card{ break-inside:avoid; border:1px solid #ccc; }
}

@media (max-width:900px){
  .d-flex.sidebar-wrap{ flex-direction:column; }
  .sidebar{ width:100%; min-height:auto; }
  .sidebar nav{ display:flex; overflow-x:auto; padding:0; }
  .sidebar .nav-link{ white-space:nowrap; }
  .sidebar .nav-link.active{ border-right:none; border-bottom:3px solid var(--brand); }
  .sidebar .brand, .sidebar .logout{ display:none; }
}

/* ---- Report bar chart (pure CSS) ---- */
.bar-chart{ display:flex; align-items:flex-end; gap:6px; height:200px; padding-top:10px; }
.bar-chart .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-chart .bar{ width:100%; max-width:34px; background:var(--brand); border-radius:6px 6px 0 0; transition:height .3s ease; }
.bar-chart .bar-label{ font-size:10.5px; color:#6b7280; margin-top:6px; white-space:nowrap; transform:rotate(0deg); }
.bar-chart .bar-value{ font-size:10px; color:#374151; font-weight:700; margin-bottom:3px; }