@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f3f5fb;
  --card:#ffffff;
  --border:#eef0f6;
  --text:#1d2333;
  --text-muted:#8992a9;
  --primary:#4a6cf7;
  --primary-dark:#3a56d4;
  --primary-soft:#eaefff;
  --success:#12b76a;
  --success-soft:#e7f9f0;
  --danger:#f0506e;
  --danger-soft:#fdeaee;
  --warning:#f5a623;
  --warning-soft:#fef3e2;
  --info:#0bb7ea;
  --info-soft:#e6f9fd;
  --qr-preview-bg:#eaf6f8;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 2px 10px rgba(29,35,51,0.05), 0 1px 2px rgba(29,35,51,0.04);
}

*{ box-sizing:border-box; }
body{
  margin:0; font-family:'Inter', 'Segoe UI', Arial, sans-serif; background:var(--bg);
  color:var(--text); -webkit-font-smoothing:antialiased;
}

/* Simple top header — used by the login and data-entry pages, which have no
   multi-page nav and so don't need the sidebar. */
header{
  background:var(--card); border-bottom:1px solid var(--border);
  padding:0 28px; display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:50;
}
header .brand{
  font-size:16px; font-weight:800; padding:18px 0; letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px; color:var(--text);
}
header .brand::before{
  content:''; width:26px; height:26px; border-radius:8px;
  background:linear-gradient(135deg, var(--primary), #7b93ff);
  display:inline-block; flex-shrink:0;
}
header .logout{
  color:var(--text-muted); text-decoration:none; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:8px; transition:background .15s, color .15s;
}
header .logout:hover{ color:var(--text); background:var(--bg); }

main{ max-width:1080px; margin:0 auto; padding:28px; }

/* Sidebar layout — used by the admin panel's multi-page sections. */
.app-layout{ display:flex; min-height:100vh; align-items:stretch; }
.sidebar{
  width:240px; flex-shrink:0; background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0;
  height:100vh; overflow-y:auto;
}
.sidebar .brand{
  font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--text);
  display:flex; align-items:center; gap:9px; padding:4px 10px 26px;
}
.sidebar .brand::before{
  content:''; width:26px; height:26px; border-radius:8px;
  background:linear-gradient(135deg, var(--primary), #7b93ff);
  display:inline-block; flex-shrink:0;
}
.sidebar nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.sidebar nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--text-muted); text-decoration:none; font-size:13.5px; font-weight:600;
  transition:background .15s, color .15s;
}
.sidebar nav a svg{ width:18px; height:18px; flex-shrink:0; }
.sidebar nav a:hover{ background:var(--bg); color:var(--text); }
.sidebar nav a.active{ background:var(--primary-soft); color:var(--primary-dark); }
.sidebar .logout{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--text-muted); text-decoration:none; font-size:13.5px; font-weight:600;
  margin-top:12px; border-top:1px solid var(--border); padding-top:16px;
  transition:background .15s, color .15s;
}
.sidebar .logout svg{ width:18px; height:18px; flex-shrink:0; }
.sidebar .logout:hover{ background:var(--bg); color:var(--text); }
.app-layout main{ flex:1; margin:0; max-width:none; padding:0; }
.app-layout main > *{ max-width:1080px; margin-left:28px; margin-right:28px; }
.app-layout main > *:last-child{ margin-bottom:28px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40; margin:0 0 28px !important; max-width:none !important;
}
.topbar h1{ font-size:16px; margin:0; font-weight:700; letter-spacing:-.01em; }
.user-chip{ display:flex; align-items:center; gap:10px; }
.user-chip .avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), #7b93ff); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.user-chip .info{ display:flex; flex-direction:column; line-height:1.3; }
.user-chip .name{ font-size:13px; font-weight:700; }
.user-chip .role{ font-size:11px; color:var(--text-muted); }
.user-chip-wrap{ position:relative; user-select:none; }
.user-chip-wrap .chevron{ width:14px; height:14px; color:var(--text-muted); flex-shrink:0; }
.user-chip-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:0 10px 30px rgba(20,24,38,0.15); padding:6px; z-index:60;
}
.user-chip-menu button, .user-chip-menu a{
  display:block; width:100%; text-align:left; padding:9px 10px; border-radius:7px;
  font-size:13px; font-weight:600; color:var(--text); background:transparent;
  text-decoration:none; box-sizing:border-box;
}
.user-chip-menu button:hover, .user-chip-menu a:hover{ background:var(--bg); }
.user-chip-menu a{ color:var(--danger); }

/* Mobile sidebar: off-canvas drawer toggled by a hamburger button that only
   appears below the breakpoint; hidden entirely on desktop. */
.sidebar-toggle-btn{
  display:none; background:transparent; color:var(--text); padding:8px;
  border-radius:8px; margin-right:8px; flex-shrink:0;
}
.sidebar-toggle-btn:hover{ background:var(--bg); }
.sidebar-toggle-btn svg{ width:20px; height:20px; display:block; }
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,24,38,0.5);
  z-index:90; opacity:0; transition:opacity .2s;
}
.sidebar-overlay.open{ display:block; opacity:1; }

@media (max-width: 860px){
  .sidebar-toggle-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .sidebar{
    position:fixed; left:-260px; top:0; bottom:0; z-index:100; height:100vh;
    transition:left .2s; box-shadow:0 0 0 rgba(0,0,0,0);
  }
  .sidebar.open{ left:0; box-shadow:8px 0 30px rgba(20,24,38,0.15); }
  .app-layout main{ width:100%; }
  main{ padding:16px; }
  .topbar{ padding:14px 16px; }
  .panel{ padding:16px; }
  .row{ flex-direction:column; align-items:stretch !important; }
  .row .col{ width:100%; }
  .stat-grid{ grid-template-columns:1fr; }
  .quick-links{ grid-template-columns:1fr; }
}
.panel{
  background:var(--card); border-radius:var(--radius); padding:22px;
  margin-bottom:24px; box-shadow:var(--shadow); border:1px solid var(--border);
}
.panel h2{ font-size:15px; margin:0 0 16px; font-weight:700; letter-spacing:-.01em; }
label{ font-size:12px; color:var(--text-muted); font-weight:600; display:block; margin-bottom:6px; }
input[type=text], input[type=date], input[type=password], textarea, select{
  width:100%; padding:10px 12px; font-size:13.5px; border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-bottom:12px; font-family:inherit;
  background:#fbfcfe; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
  background:#fff;
}
textarea{ height:90px; resize:vertical; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.col{ flex:1; min-width:0; max-width:100%; overflow:hidden; }

button{
  padding:10px 18px; font-size:13.5px; font-weight:600; border:none; border-radius:var(--radius-sm);
  background:var(--primary); color:#fff; cursor:pointer; transition:background .15s, transform .05s;
}
button:hover{ background:var(--primary-dark); }
button:active{ transform:translateY(1px); }
button.secondary{ background:var(--success); }
button.secondary:hover{ background:#0f9d5c; }
button.danger{ background:var(--danger); }
button.danger:hover{ background:#d63d59; }

canvas{ display:block; image-rendering:pixelated; background:var(--qr-preview-bg); border-radius:var(--radius-sm); max-width:100%; height:auto; }
#preview{ display:flex; justify-content:center; padding:18px; background:var(--qr-preview-bg); border-radius:var(--radius); overflow:hidden; width:100%; }
.btn-row{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }

.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px; }
.card{
  border:1px solid var(--border); border-radius:var(--radius); padding:14px; text-align:center;
  background:var(--card); transition:box-shadow .15s;
}
.card:hover{ box-shadow:var(--shadow); }
.card img{ width:100%; border-radius:var(--radius-sm); background:var(--qr-preview-bg); }
.card .lbl{ font-size:13px; font-weight:700; margin-top:10px; }
.card .date{ font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.card .actions{ display:flex; gap:6px; justify-content:center; }
.card .actions button{ font-size:11px; padding:7px 11px; }
.empty{ color:var(--text-muted); font-size:13px; text-align:center; padding:24px; }

.tabs{ display:flex; gap:4px; margin-bottom:18px; background:var(--bg); padding:4px; border-radius:10px; width:fit-content; }
.tab{
  background:transparent; color:var(--text-muted); padding:7px 16px; border-radius:8px;
  font-weight:600; font-size:13px;
}
.tab:hover{ color:var(--text); background:transparent; }
.tab.active{ background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(29,35,51,0.08); }
code{ background:var(--bg); padding:2px 6px; border-radius:5px; font-size:11.5px; color:var(--primary-dark); }

#searchInput{ margin-bottom:0; }
.table-wrap{ overflow-x:auto; }
table{ width:max-content; min-width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{
  text-align:left; font-size:11px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.04em; font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer;
  user-select:none; white-space:nowrap;
}
thead th:hover{ color:var(--text); }
tbody td{ padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:hover{ background:#fafbfe; cursor:pointer; }
.thumb{ width:36px; height:36px; border-radius:8px; background:var(--qr-preview-bg); object-fit:cover; }
.thumb-icon{ width:36px; }
.thumb-icon svg{ display:block; padding:6px; background:var(--bg); border-radius:8px; box-sizing:content-box; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.row-actions button{ font-size:11px; padding:6px 10px; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(20,24,38,0.55); display:flex;
  align-items:center; justify-content:center; z-index:100; padding:20px; backdrop-filter:blur(2px);
}
.modal{
  background:var(--card); border-radius:var(--radius); padding:26px; max-width:360px; width:100%;
  text-align:center; max-height:90vh; overflow-y:auto; box-shadow:0 20px 50px rgba(20,24,38,0.25);
}
.modal img{ width:100%; border-radius:var(--radius-sm); background:var(--qr-preview-bg); }

.pagination{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; }
.pagination button:disabled{ opacity:.35; cursor:default; }
.pagination button{ background:var(--bg); color:var(--text); }
.pagination button:hover:not(:disabled){ background:var(--border); }

.badge{
  display:inline-block; font-size:11px; padding:4px 11px; border-radius:20px;
  font-weight:700; white-space:nowrap;
}
.badge-pending{ background:var(--warning-soft); color:#a1670a; }
.badge-generated{ background:var(--info-soft); color:#0891b8; }
.badge-downloaded{ background:var(--success-soft); color:#0f9d5c; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:18px; margin-bottom:24px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); padding:20px 22px;
  box-shadow:var(--shadow); border:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.stat-card .stat-body .num{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.stat-card .stat-body .lbl{ font-size:12px; color:var(--text-muted); font-weight:600; margin-top:4px; }
.stat-icon{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.stat-icon svg{ width:20px; height:20px; }
a.stat-card{ text-decoration:none; color:inherit; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
a.stat-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(29,35,51,0.1); }

.quick-links{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:18px; }
.quick-link{
  background:var(--card); border-radius:var(--radius); padding:20px 22px; text-decoration:none; color:var(--text);
  box-shadow:var(--shadow); border:1px solid var(--border); display:block; transition:transform .15s, box-shadow .15s;
}
.quick-link:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(29,35,51,0.1); }
.quick-link h3{ margin:0 0 4px; font-size:14.5px; font-weight:700; }
.quick-link p{ margin:0; font-size:12.5px; color:var(--text-muted); }