/* Shady Leaves Access — Stylesheet
   Extracted verbatim from prototype, extended with production additions */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Reset & Root ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0f14;--surface:#161920;--surface2:#1e2330;--surface3:#252b3b;
  --border:#2a3045;--accent:#4f8ef7;--accent2:#7c5cfa;--success:#22c55e;
  --danger:#ef4444;--warn:#f59e0b;--text:#e8eaf0;--muted:#6b7494;--admin:#f472b6;
  --font:'DM Sans',sans-serif;--mono:'DM Mono',monospace;--radius:14px;--radius-sm:8px;
}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased}

/* ── LOGIN ──────────────────────────────────────────────────────────────────── */
#login-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px}
.login-logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.login-logo svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;width:100%;max-width:380px}

/* ── APP SHELL ──────────────────────────────────────────────────────────────── */
#app-shell { display: none; }
#app-shell.visible {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#pages-container {
  flex: 1;
  width: 100%;
}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.tb-name{font:600 14px var(--font)}.tb-sub{font:400 11px var(--font);color:var(--muted)}
.tb-badge{font:500 10px var(--font);padding:3px 9px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase}
.logout-btn{background:none;border:none;color:var(--muted);cursor:pointer;font:400 12px var(--font);display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:6px;transition:.15s}
.logout-btn:hover{background:var(--surface2)}
.logout-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ── NAV ────────────────────────────────────────────────────────────────────── */
.nav{display:flex;background:var(--surface);border-bottom:1px solid var(--border);padding:0 6px;position:sticky;top:54px;z-index:40}
.nav-btn{flex:1;padding:11px 4px;font:500 10px var(--font);color:var(--muted);border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.2s;border-bottom:2px solid transparent;letter-spacing:.4px;text-transform:uppercase}
.nav-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.nav-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ── PAGES ──────────────────────────────────────────────────────────────────── */
.page{display:none;padding:18px 16px 80px;max-width:520px;margin:0 auto}
.page.active{display:block}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:12px}
.card-sm{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px;margin-bottom:8px}

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font:500 11px var(--font)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{background:#22c55e18;color:var(--success);border:1px solid #22c55e30}
.b-blue{background:#4f8ef718;color:var(--accent);border:1px solid #4f8ef730}
.b-red{background:#ef444418;color:var(--danger);border:1px solid #ef444430}
.b-amber{background:#f59e0b18;color:var(--warn);border:1px solid #f59e0b30}
.b-pink{background:#f472b618;color:var(--admin);border:1px solid #f472b630}

/* ── BUTTONS ─────────────────────────────────────────────────────────────────── */
.btn{width:100%;padding:13px;border-radius:var(--radius-sm);font:500 14px var(--font);border:none;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{opacity:.9}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-outline:hover{background:var(--surface2)}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{opacity:.9}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{opacity:.9}
.btn-admin{background:var(--admin);color:#fff}.btn-admin:hover{opacity:.9}
.btn-sm{padding:8px 12px;font-size:12px;width:auto;border-radius:6px}
.btn-row{display:flex;gap:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── FORMS ──────────────────────────────────────────────────────────────────── */
.label{font:500 11px var(--font);color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px;display:block}
.input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 13px;font:400 14px var(--font);color:var(--text);outline:none;transition:.2s}
.input:focus{border-color:var(--accent)}
.input.error{border-color:var(--danger)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7494' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.form-row{margin-bottom:12px}
.divider{border:none;border-top:1px solid var(--border);margin:14px 0}
.section-title{font:600 10px var(--font);color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:16px 0 10px}

/* ── ROTATING QR ────────────────────────────────────────────────────────────── */
.qr-container{position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.qr-ring-svg{position:absolute;top:0;left:0;pointer-events:none}
.qr-ring-bg{fill:none;stroke:var(--border);stroke-width:4}
.qr-ring-progress{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .5s}
.qr-inner{background:#fff;border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.qr-inner.expiring{animation:pulse-warn .6s ease-in-out infinite}
.qr-inner.expired{opacity:.35;filter:grayscale(1)}
@keyframes pulse-warn{0%,100%{box-shadow:0 0 0 0 #f59e0b40}50%{box-shadow:0 0 0 8px #f59e0b00}}
.qr-token-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}
.qr-token{font:500 11px var(--mono);color:var(--muted);letter-spacing:1px}
.qr-timer{font:600 14px var(--mono);min-width:38px;text-align:center}
.expired-overlay{position:absolute;inset:0;background:#0d0f14cc;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;gap:6px}
.expired-overlay svg{width:32px;height:32px;stroke:var(--danger);fill:none;stroke-width:1.5}
.expired-overlay span{font:600 13px var(--font);color:var(--danger)}
@keyframes qr-refresh{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
.qr-refresh{animation:qr-refresh .35s ease-out}

/* ── SCANNER ────────────────────────────────────────────────────────────────── */
.scanner-area{background:var(--surface2);border-radius:var(--radius);height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;margin-bottom:12px}
.scan-corner{position:absolute;width:26px;height:26px;border-color:var(--accent);border-style:solid;border-width:0}
.tl{top:14px;left:14px;border-top-width:3px;border-left-width:3px;border-top-left-radius:4px}
.tr{top:14px;right:14px;border-top-width:3px;border-right-width:3px;border-top-right-radius:4px}
.bl{bottom:14px;left:14px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:4px}
.br{bottom:14px;right:14px;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:4px}
.scan-line{position:absolute;left:18px;right:18px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scanline 2s ease-in-out infinite}
@keyframes scanline{0%{top:16px;opacity:1}50%{top:172px;opacity:.8}100%{top:16px;opacity:1}}
.scan-hint{color:var(--muted);font:400 13px var(--font);text-align:center}
.scan-result{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:none}
.scan-result.visible{display:block}
.scan-photo{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 20px var(--font);color:#fff;margin:0 auto 10px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.info-cell{background:var(--surface2);border-radius:var(--radius-sm);padding:9px 11px}
.info-cell-label{font:400 10px var(--font);color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.info-cell-value{font:500 13px var(--font)}

/* ── STATS ──────────────────────────────────────────────────────────────────── */
.stat-row{display:grid;gap:8px;margin-bottom:14px}
.stat-box{background:var(--surface2);border-radius:var(--radius-sm);padding:11px;text-align:center}
.stat-num{font:600 20px var(--font)}.stat-lbl{font:400 10px var(--font);color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}

/* ── LOG ────────────────────────────────────────────────────────────────────── */
.log-entry{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.log-entry:last-child{border-bottom:none}
.log-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.log-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.log-in{background:#22c55e18;color:var(--success)}.log-out{background:#4f8ef718;color:var(--accent)}.log-deny{background:#ef444418;color:var(--danger)}
.log-info{flex:1}.log-name{font:500 13px var(--font)}.log-meta{font:400 11px var(--font);color:var(--muted);margin-top:1px}
.log-token{font:400 10px var(--mono);color:var(--muted);margin-top:2px}
.log-time{font:400 11px var(--mono);color:var(--muted);white-space:nowrap}
.log-scroll{max-height:380px;overflow-y:auto}

/* ── USER ROWS ──────────────────────────────────────────────────────────────── */
.user-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.user-row:last-child{border-bottom:none}
.u-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 12px var(--font);color:#fff;flex-shrink:0}
.u-info{flex:1}.u-name{font:500 13px var(--font)}.u-meta{font:400 11px var(--font);color:var(--muted);margin-top:1px}
.icon-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.15s}
.icon-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.icon-btn.del:hover{border-color:var(--danger);color:var(--danger)}

/* ── GUEST CARD ─────────────────────────────────────────────────────────────── */
.guest-card-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:12px}

/* ── MODALS ─────────────────────────────────────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;background:#00000090;z-index:200;align-items:flex-end;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border-radius:20px 20px 0 0;padding:22px 18px 44px;width:100%;max-width:520px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-title{font:600 16px var(--font)}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:22px;line-height:1;padding:4px}
.timer-chip{display:flex;gap:6px;margin-bottom:8px}
.timer-opt{flex:1;padding:9px 4px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font:500 12px var(--font);text-align:center;transition:.15s}
.timer-opt.selected{background:#4f8ef718;border-color:var(--accent);color:var(--accent)}
.confirm-modal-bg{display:none;position:fixed;inset:0;background:#00000090;z-index:300;align-items:center;justify-content:center}
.confirm-modal-bg.open{display:flex}
.confirm-modal{background:var(--surface);border-radius:var(--radius);padding:22px;width:88%;max-width:340px}

/* ── PROFILE HEADER ─────────────────────────────────────────────────────────── */
.profile-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.big-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 17px var(--font);color:#fff;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRODUCTION ADDITIONS (not in prototype)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Desktop centering ───────────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .topbar,
  .nav,
  #pages-container { max-width: 520px; margin-left: auto; margin-right: auto; }
  .topbar { width: 100%; }
  .nav    { width: 100%; }
}

/* ── Loading spinner overlay ─────────────────────────────────────────────────── */
#loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #0d0f14cc;
  z-index: 500;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
#loading-overlay.active { display: flex; }
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font: 400 13px var(--font); color: var(--muted); }

/* Inline loading state for sections */
.section-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  gap: 10px;
  color: var(--muted);
  font: 400 13px var(--font);
}
.section-loading .spinner { width: 20px; height: 20px; border-width: 2px; }

/* ── Toast notifications ─────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 420px;
}
.toast {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font: 400 13px var(--font);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 24px #00000060;
  animation: toast-in .25s ease-out;
  opacity: 1;
  transition: opacity .3s;
  width: 100%;
}
.toast.toast-error   { border-color: #ef444450; background: #ef444418; color: var(--danger); }
.toast.toast-success { border-color: #22c55e50; background: #22c55e18; color: var(--success); }
.toast.toast-warn    { border-color: #f59e0b50; background: #f59e0b18; color: var(--warn); }
.toast.hide { opacity: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast-icon { flex-shrink: 0; }
.toast-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Offline warning banner ──────────────────────────────────────────────────── */
#offline-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--danger);
  color: #fff;
  font: 500 12px var(--font);
  text-align: center;
  padding: 7px 16px;
  z-index: 700;
  letter-spacing: .3px;
}
#offline-banner.visible { display: block; }

/* ── Error states ────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
  font: 400 13px var(--font);
}
.empty-state svg {
  width: 36px;
  height: 36px;
  stroke: var(--border);
  fill: none;
  stroke-width: 1.5;
  display: block;
  margin: 0 auto 10px;
}
.error-state {
  text-align: center;
  padding: 28px 20px;
  color: var(--danger);
  font: 400 13px var(--font);
}
.error-state svg {
  width: 32px;
  height: 32px;
  stroke: var(--danger);
  fill: none;
  stroke-width: 1.5;
  display: block;
  margin: 0 auto 8px;
  opacity: .7;
}
.error-retry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font: 500 12px var(--font);
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ── Login error message ─────────────────────────────────────────────────────── */
.login-error {
  background: #ef444418;
  border: 1px solid #ef444440;
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font: 400 13px var(--font);
  color: var(--danger);
  margin-bottom: 14px;
  display: none;
}
.login-error.visible { display: block; }

/* ── Inactive user row ───────────────────────────────────────────────────────── */
.user-row.inactive { opacity: .45; }
.user-row.inactive .u-name { text-decoration: line-through; }

/* ── Log filter bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.filter-bar .input { flex: 1; min-width: 120px; font-size: 12px; padding: 8px 10px; }

/* ── Share link row ──────────────────────────────────────────────────────────── */
.share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 10px;
}
.share-link {
  flex: 1;
  font: 400 11px var(--mono);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  font: 500 11px var(--font);
  transition: .15s;
  flex-shrink: 0;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Responsive page body on very small screens ──────────────────────────────── */
@media (max-width: 360px) {
  .page { padding: 14px 12px 80px; }
  .stat-row[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Guest page (guest.html) standalone card ─────────────────────────────────── */
.guest-page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.guest-page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 380px;
}
.guest-page-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.guest-page-logo svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.guest-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
}
.guest-info-grid > div span { color: var(--muted); }
.guest-info-grid > div strong { display: block; margin-top: 2px; }