:root {
  --blush:    #F2DDD8;
  --blush2:   #E8C8C2;
  --blush3:   #D4A89F;
  --black:    #1A0F0D;
  --darkrose: #2C1614;
  --card:     #231210;
  --text:     #F2DDD8;
  --muted:    rgba(242,221,216,0.5);
  --accent:   #FF6B8A;
  --gold:     #F5C842;
  --success:  #5EEAD4;
  --error:    #FF4757;
  --mid:      #1E0F0D;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--black); font-family:'Nunito',sans-serif; color:var(--text); }

.screen { position:absolute; inset:0; display:flex; flex-direction:column; transition:opacity 0.4s, transform 0.4s; }
.screen.hidden { opacity:0; pointer-events:none; transform:scale(0.97); }

/* ── BACKGROUND TEXTURE ── */
.space-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 15% 40%, rgba(242,221,216,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(212,168,159,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 85%, rgba(255,107,138,0.08) 0%, transparent 45%),
    #1A0F0D;
}
.space-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(242,221,216,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,221,216,0.04) 1px, transparent 1px);
  background-size:55px 55px;
}

/* ─────────────────────────
   KIOSK SCREEN
───────────────────────── */
#kiosk { background:var(--black); overflow:hidden; }

.kiosk-inner {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; padding:24px 40px; gap:18px;
}

.logo-lockup {
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.logo-img {
  width:80px; height:80px; border-radius:50%;
  box-shadow: 0 0 0 2px rgba(242,221,216,0.2), 0 8px 32px rgba(0,0,0,0.5);
  object-fit:cover;
}
.logo-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(42px,7vw,68px);
  line-height:0.9; letter-spacing:4px;
  color:var(--blush);
  text-align:center;
}
.logo-sub {
  font-size:11px; font-weight:800; letter-spacing:6px;
  text-transform:uppercase; color:var(--muted);
}

/* Staff on duty bar */
.staff-on-duty-bar {
  display:flex; align-items:center; gap:12px;
  background:rgba(242,221,216,0.06);
  border:1px solid rgba(242,221,216,0.15);
  border-radius:16px; padding:10px 18px;
  width:100%; max-width:520px; min-height:48px; flex-wrap:wrap;
}
.sod-label { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.sod-names { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.sod-chip {
  display:flex; align-items:center; gap:6px;
  background:rgba(245,200,66,0.12); border:1px solid rgba(245,200,66,0.3);
  border-radius:20px; padding:4px 12px 4px 6px;
  font-size:12px; font-weight:800; color:var(--gold);
}
.sod-avatar {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; font-family:'Bebas Neue',sans-serif;
  background:var(--gold); color:var(--black);
}
.sod-none { font-size:12px; color:rgba(242,221,216,0.25); font-weight:700; font-style:italic; }

/* Code entry card */
.code-card {
  background:rgba(242,221,216,0.06);
  border:1.5px solid rgba(242,221,216,0.14);
  border-radius:28px; padding:26px 34px;
  width:100%; max-width:520px;
  backdrop-filter:blur(20px);
}
.code-label { font-size:11px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:14px; }
.inputs-row { display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:18px; }
.code-sep { width:10px; height:2px; background:rgba(242,221,216,0.2); border-radius:2px; flex-shrink:0; }
.code-input {
  width:58px; height:68px; text-align:center;
  font-family:'Bebas Neue',sans-serif; font-size:32px;
  border:2px solid rgba(242,221,216,0.15); border-radius:14px;
  background:rgba(242,221,216,0.06); color:var(--blush);
  outline:none; caret-color:transparent; text-transform:uppercase;
  transition:border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.code-input:focus {
  border-color:var(--accent);
  background:rgba(255,107,138,0.1);
  transform:scale(1.06);
  box-shadow: 0 0 20px rgba(255,107,138,0.25);
}
.code-input.filled {
  border-color:var(--blush3);
  background:rgba(212,168,159,0.15);
  color:var(--blush);
}

.checkin-btn {
  width:100%; padding:16px; border-radius:16px; border:none;
  background:var(--blush);
  color:var(--black); font-family:'Bebas Neue',sans-serif;
  font-size:24px; letter-spacing:3px;
  cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 24px rgba(242,221,216,0.2);
}
.checkin-btn:hover { box-shadow: 0 6px 32px rgba(242,221,216,0.35); }
.checkin-btn:active { transform:scale(0.98); }

.kiosk-bottom { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:520px; }
.live-count { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.4);opacity:0.7;} }
.live-count strong { color:var(--success); font-size:15px; }
.new-here { font-size:13px; color:var(--muted); font-weight:700; }
.new-here button { background:none; border:none; color:var(--blush2); font-family:'Nunito',sans-serif; font-weight:800; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.bsd { position:absolute; top:16px; right:20px; font-size:13px; font-weight:800; color:rgba(242,221,216,0.35); font-family:'Nunito',sans-serif; direction:rtl; user-select:none; z-index:1; }
.staff-btn { position:absolute; bottom:20px; right:24px; z-index:10; background:rgba(242,221,216,0.07); border:1px solid rgba(242,221,216,0.12); border-radius:12px; padding:9px 16px; color:var(--muted); font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.staff-btn:hover { background:rgba(242,221,216,0.12); color:var(--text); }

/* ── TOAST ── */
/* Centered on screen — always visible whether keyboard is open or not */
.toast {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.8);
  opacity:0;
  z-index:99999;
  padding:18px 36px;
  border-radius:20px;
  font-family:'Bebas Neue',sans-serif;
  font-size:24px;
  letter-spacing:2px;
  transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
  white-space:nowrap;
  max-width:88vw;
  text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.6);
}
.toast.show {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
.toast.success { background:var(--success); color:#000; }
.toast.error   { background:var(--error);   color:#fff; }
.toast.info    { background:var(--blush);   color:var(--black); }

/* ── WELCOME OVERLAY ── */
#welcome-overlay { position:fixed; inset:0; z-index:100; background:rgba(26,15,13,0.96); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; opacity:0; pointer-events:none; transition:opacity 0.3s; }
#welcome-overlay.show { opacity:1; pointer-events:all; }
.welcome-logo { width:60px; height:60px; border-radius:50%; animation:bounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bounceIn { from{transform:scale(0.3);opacity:0;} to{transform:scale(1);opacity:1;} }
.welcome-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(52px,10vw,84px); color:var(--blush); text-align:center; line-height:1; animation:slideUp 0.4s 0.1s both; }
.welcome-sub { font-size:18px; font-weight:700; color:var(--muted); animation:slideUp 0.4s 0.2s both; }
.welcome-detail { font-size:13px; font-weight:600; color:rgba(242,221,216,0.3); animation:slideUp 0.4s 0.25s both; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.welcome-staff-note { font-size:13px; font-weight:800; color:var(--gold); background:rgba(245,200,66,0.1); border:1px solid rgba(245,200,66,0.3); border-radius:12px; padding:8px 20px; animation:slideUp 0.4s 0.3s both; }
.welcome-bar { width:180px; height:3px; background:rgba(242,221,216,0.1); border-radius:3px; overflow:hidden; margin-top:10px; animation:slideUp 0.4s 0.35s both; }
.welcome-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--blush)); border-radius:3px; width:0%; transition:width linear; }

/* ── PIN MODAL ── */
#pin-modal { position:fixed; inset:0; z-index:200; background:rgba(26,15,13,0.92); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
#pin-modal.show { opacity:1; pointer-events:all; }
.pin-card { background:var(--card); border:1.5px solid rgba(242,221,216,0.1); border-radius:28px; padding:40px; width:340px; text-align:center; }
.pin-title { font-family:'Bebas Neue',sans-serif; font-size:34px; color:var(--blush); margin-bottom:4px; }
.pin-sub { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:24px; }
.pin-dots { display:flex; justify-content:center; gap:12px; margin-bottom:24px; }
.pin-dot { width:15px; height:15px; border-radius:50%; border:2px solid rgba(242,221,216,0.2); transition:all 0.15s; }
.pin-dot.filled { background:var(--accent); border-color:var(--accent); box-shadow:0 0 12px rgba(255,107,138,0.5); }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pin-key { height:58px; border-radius:14px; border:none; background:rgba(242,221,216,0.07); color:var(--blush); font-family:'Bebas Neue',sans-serif; font-size:26px; cursor:pointer; transition:background 0.15s,transform 0.1s; }
.pin-key:active { background:rgba(242,221,216,0.18); transform:scale(0.94); }
.pin-key.del { font-family:'Nunito',sans-serif; font-size:18px; }
.pin-key.cancel { grid-column:1/-1; height:auto; min-height:52px; font-size:14px; font-family:'Nunito',sans-serif; font-weight:800; letter-spacing:1px; color:var(--muted); background:transparent; border:1px solid rgba(242,221,216,0.1); padding:16px 20px; }

/* ── REGISTER ── */
#register { background:var(--black); overflow-y:auto; }
.reg-inner { position:relative; z-index:1; max-width:580px; margin:0 auto; padding:36px 24px; }
.reg-back { display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--muted); font-family:'Nunito',sans-serif; font-weight:800; font-size:13px; cursor:pointer; margin-bottom:24px; }
.reg-back:hover { color:var(--text); }
.reg-logo-row { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.reg-logo { width:52px; height:52px; border-radius:50%; box-shadow:0 4px 16px rgba(0,0,0,0.4); }
.reg-title { font-family:'Bebas Neue',sans-serif; font-size:46px; color:var(--blush); line-height:0.95; }
.reg-sub { font-size:13px; color:var(--muted); font-weight:700; margin-bottom:24px; margin-top:4px; }

.staff-toggle-row { display:flex; align-items:center; gap:14px; background:rgba(245,200,66,0.06); border:1.5px solid rgba(245,200,66,0.2); border-radius:16px; padding:14px 18px; margin-bottom:18px; cursor:pointer; transition:background 0.2s; }
.staff-toggle-row:hover { background:rgba(245,200,66,0.1); }
.toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { position:absolute; inset:0; background:rgba(242,221,216,0.15); border-radius:12px; cursor:pointer; transition:background 0.2s; }
.toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--blush3); border-radius:50%; transition:transform 0.2s; }
.toggle-switch input:checked + .toggle-track { background:var(--gold); }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(20px); background:#000; }
.toggle-info { flex:1; }
.toggle-title { font-size:14px; font-weight:800; color:var(--gold); }
.toggle-sub { font-size:11px; color:var(--muted); font-weight:600; margin-top:2px; }

.passcode-row { margin-bottom:16px; animation:slideUp 0.3s both; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group.full { grid-column:1/-1; }
.form-label { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.form-input { padding:13px 15px; border-radius:12px; border:2px solid rgba(242,221,216,0.1); background:rgba(242,221,216,0.05); color:var(--blush); font-family:'Nunito',sans-serif; font-size:15px; font-weight:600; outline:none; transition:border-color 0.15s,background 0.15s; }
.form-input:focus { border-color:var(--accent); background:rgba(255,107,138,0.07); }
.form-input::placeholder { color:rgba(242,221,216,0.2); }
.form-input.staff-focus:focus { border-color:var(--gold); background:rgba(245,200,66,0.07); }
.staff-section-divider { border:none; border-top:1px solid rgba(242,221,216,0.08); margin:16px 0; }

.reg-btn { width:100%; padding:18px; border-radius:16px; border:none; background:var(--blush); color:var(--black); font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:3px; cursor:pointer; margin-top:18px; transition:transform 0.15s, box-shadow 0.15s; box-shadow:0 4px 24px rgba(242,221,216,0.2); }
.reg-btn:active { transform:scale(0.98); }

/* ── ADMIN DASHBOARD ── */
#admin { background:#100808; overflow:hidden; flex-direction:row; }
.admin-sidebar { width:230px; flex-shrink:0; background:var(--mid); border-right:1px solid rgba(242,221,216,0.07); display:flex; flex-direction:column; padding:22px 0; overflow-y:auto; height:100%; }
.sidebar-logo-wrap { padding:0 18px 18px; border-bottom:1px solid rgba(242,221,216,0.07); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.sidebar-logo-img { width:36px; height:36px; border-radius:50%; }
.sidebar-logo-text { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--blush); line-height:1; }
.sidebar-logo-sub { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:2px; text-transform:uppercase; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 18px; cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); border-left:3px solid transparent; transition:all 0.2s; }
.nav-item:hover { color:var(--text); background:rgba(242,221,216,0.04); }
.nav-item.active { color:var(--blush); border-left-color:var(--accent); background:rgba(255,107,138,0.08); }
.nav-icon { font-size:15px; }
.sidebar-bottom { margin-top:auto; padding:16px 18px 0; border-top:1px solid rgba(242,221,216,0.07); }
.sidebar-bottom .nav-item { padding:10px 14px; }
.exit-btn { width:100%; padding:11px; border-radius:11px; border:1px solid rgba(242,221,216,0.1); background:transparent; color:var(--muted); font-family:'Nunito',sans-serif; font-weight:800; font-size:12px; cursor:pointer; transition:all 0.2s; }
.exit-btn:hover { background:rgba(255,71,87,0.15); color:var(--error); border-color:var(--error); }

.admin-main { flex:1; min-width:0; overflow-y:auto; padding:26px; display:flex; flex-direction:column; gap:18px; }
.admin-main > * { flex-shrink:0; }
.admin-header { display:flex; align-items:center; justify-content:space-between; }
.admin-title { font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; color:var(--blush); }
.admin-date { font-size:11px; font-weight:700; color:var(--muted); }
.live-badge { display:flex; align-items:center; gap:6px; background:rgba(94,234,212,0.1); border:1px solid rgba(94,234,212,0.25); border-radius:20px; padding:5px 13px; font-size:11px; font-weight:800; color:var(--success); letter-spacing:2px; }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-card { background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:16px; padding:16px; }
.stat-label { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.stat-value { font-family:'Bebas Neue',sans-serif; font-size:38px; line-height:1; }
.stat-value.blush { color:var(--blush); }
.stat-value.accent { color:var(--accent); }
.stat-value.gold { color:var(--gold); }
.stat-value.teal { color:var(--success); }
.stat-sub { font-size:11px; color:var(--muted); font-weight:600; margin-top:3px; }

.panels-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.panel { background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:16px; padding:18px; overflow:hidden; display:flex; flex-direction:column; }
.panel-title { font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--muted); letter-spacing:1px; margin-bottom:12px; }
.whos-in-list { display:flex; flex-direction:column; gap:6px; overflow-y:auto; flex:1; }
.person-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(242,221,216,0.04); transition:background 0.15s; }
.person-row:hover { background:rgba(242,221,216,0.07); }
.person-avatar { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:14px; flex-shrink:0; }
.person-info { flex:1; }
.person-name { font-size:13px; font-weight:800; color:var(--blush); }
.person-meta { font-size:11px; color:var(--muted); font-weight:600; }
.person-time { font-size:11px; font-weight:700; color:var(--success); }
.person-badge { font-size:9px; font-weight:800; letter-spacing:1px; padding:3px 7px; border-radius:5px; }
.badge-staff { background:rgba(245,200,66,0.15); color:var(--gold); }
.badge-member { background:rgba(242,221,216,0.1); color:var(--blush2); }

.timesheet-entry { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(242,221,216,0.04); }
.ts-date { font-size:11px; font-weight:700; color:var(--muted); min-width:78px; }
.ts-time { font-size:12px; font-weight:800; flex:1; color:var(--blush); }
.ts-duration { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold); min-width:52px; text-align:right; }
.ts-pending { font-size:11px; color:var(--accent); font-weight:700; }

.chart-bars { display:flex; align-items:flex-end; gap:6px; height:88px; flex:1; margin-top:8px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bar-wrap { flex:1; display:flex; align-items:flex-end; width:100%; }
.bar { width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--blush3),rgba(212,168,159,0.4)); min-height:3px; transition:height 0.7s cubic-bezier(0.34,1.2,0.64,1); }
.bar.today { background:linear-gradient(180deg,var(--accent),rgba(255,107,138,0.5)); }
.bar-label { font-size:9px; font-weight:700; color:var(--muted); white-space:nowrap; }
.bar-count { font-size:10px; font-weight:800; color:var(--blush2); }

/* ── PRIVACY LIGHTBOX ── */
#privacy-lightbox { position:fixed; inset:0; z-index:300; background:rgba(26,15,13,0.94); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; padding:20px; }
#privacy-lightbox.show { opacity:1; pointer-events:all; }
.privacy-card { background:var(--card); border:1.5px solid rgba(242,221,216,0.12); border-radius:28px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; position:relative; }
.privacy-hero { background:linear-gradient(135deg,rgba(255,107,138,0.15),rgba(212,168,159,0.1)); border-radius:26px 26px 0 0; padding:32px 32px 24px; text-align:center; border-bottom:1px solid rgba(242,221,216,0.08); }
.privacy-emoji-row { display:flex; justify-content:center; gap:14px; font-size:32px; margin-bottom:14px; }
.privacy-hero-title { font-family:'Bebas Neue',sans-serif; font-size:36px; color:var(--blush); letter-spacing:2px; margin-bottom:6px; }
.privacy-hero-sub { font-size:13px; font-weight:700; color:var(--muted); line-height:1.6; }
.privacy-body { padding:24px 32px 28px; }
.privacy-section { margin-bottom:20px; }
.privacy-section-title { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.privacy-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:12px; margin-bottom:6px; }
.privacy-item.good { background:rgba(94,234,212,0.07); border:1px solid rgba(94,234,212,0.15); }
.privacy-item.bad { background:rgba(255,107,138,0.07); border:1px solid rgba(255,107,138,0.15); }
.privacy-item-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.privacy-item-text { font-size:12px; font-weight:700; color:var(--blush); line-height:1.5; }
.privacy-item-text span { font-weight:600; color:var(--muted); }
.privacy-close-btn { width:100%; padding:14px; border-radius:0 0 26px 26px; border:none; border-top:1px solid rgba(242,221,216,0.08); background:rgba(242,221,216,0.06); color:var(--blush); font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:3px; cursor:pointer; transition:background 0.2s; }
.privacy-close-btn:hover { background:rgba(242,221,216,0.1); }
.privacy-link-row { display:flex; justify-content:center; margin-top:10px; }
.privacy-full-link { font-size:11px; font-weight:700; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:none; font-family:'Nunito',sans-serif; }
.privacy-full-link:hover { color:var(--blush2); }

/* ── FULL PRIVACY POLICY MODAL ── */
#policy-modal { position:fixed; inset:0; z-index:400; background:rgba(26,15,13,0.97); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; padding:20px; }
#policy-modal.show { opacity:1; pointer-events:all; }
.policy-card { background:var(--card); border:1.5px solid rgba(242,221,216,0.1); border-radius:24px; max-width:620px; width:100%; max-height:90vh; display:flex; flex-direction:column; }
.policy-header { padding:24px 28px 16px; border-bottom:1px solid rgba(242,221,216,0.08); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.policy-header-title { font-family:'Bebas Neue',sans-serif; font-size:26px; color:var(--blush); letter-spacing:2px; }
.policy-close-x { background:rgba(242,221,216,0.07); border:1px solid rgba(242,221,216,0.12); border-radius:10px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:var(--muted); transition:all 0.15s; }
.policy-close-x:hover { background:rgba(242,221,216,0.14); color:var(--blush); }
.policy-body { padding:24px 28px; overflow-y:auto; flex:1; }
.policy-body h3 { font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--accent); letter-spacing:1px; margin:18px 0 6px; }
.policy-body p, .policy-body li { font-size:12px; font-weight:600; color:rgba(242,221,216,0.7); line-height:1.8; }
.policy-body ul { padding-left:18px; margin:6px 0; }
.policy-body strong { color:var(--blush); font-weight:800; }
.policy-org { font-size:11px; color:var(--muted); font-weight:600; margin-top:20px; padding-top:14px; border-top:1px solid rgba(242,221,216,0.08); line-height:1.7; }

/* ── REPORTS TAB ── */
.report-card { background:rgba(242,221,216,0.04); border:1px solid rgba(242,221,216,0.1); border-radius:14px; padding:16px 18px; display:flex; align-items:center; gap:14px; transition:background 0.15s; }
.report-card:hover { background:rgba(242,221,216,0.07); }
.report-icon { font-size:26px; flex-shrink:0; }
.report-info { flex:1; }
.report-name { font-size:13px; font-weight:800; color:var(--blush); margin-bottom:2px; }
.report-meta { font-size:11px; color:var(--muted); font-weight:600; }
.report-status { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:1px; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.status-generated { background:rgba(94,234,212,0.1); color:var(--success); border:1px solid rgba(94,234,212,0.25); }
.status-pending { background:rgba(245,200,66,0.1); color:var(--gold); border:1px solid rgba(245,200,66,0.25); }
.status-signed { background:rgba(255,107,138,0.1); color:var(--accent); border:1px solid rgba(255,107,138,0.25); }
.report-actions { display:flex; gap:8px; flex-shrink:0; }
.rep-btn { padding:7px 13px; border-radius:9px; border:1px solid rgba(242,221,216,0.15); background:rgba(242,221,216,0.06); color:var(--blush2); font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.rep-btn:hover { background:rgba(242,221,216,0.12); color:var(--blush); }
.rep-btn.primary { background:rgba(242,221,216,0.15); color:var(--blush); border-color:rgba(242,221,216,0.3); }
.generate-section { background:rgba(255,107,138,0.05); border:1px solid rgba(255,107,138,0.15); border-radius:16px; padding:20px; }
.generate-section .panel-title { color:var(--accent); margin-bottom:14px; }
.gen-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.gen-label { font-size:12px; font-weight:800; color:var(--blush2); min-width:110px; }
.gen-select { padding:8px 12px; border-radius:9px; border:1px solid rgba(242,221,216,0.15); background:rgba(242,221,216,0.06); color:var(--blush); font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; outline:none; }
.gen-select option { background:#231210; }
.email-input { padding:8px 12px; border-radius:9px; border:1px solid rgba(242,221,216,0.15); background:rgba(242,221,216,0.06); color:var(--blush); font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; outline:none; min-width:220px; }
.email-input::placeholder { color:rgba(242,221,216,0.25); }
.gen-btn { padding:10px 20px; border-radius:10px; border:none; background:var(--accent); color:#1A0F0D; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; cursor:pointer; transition:all 0.15s; }
.gen-btn:hover { background:var(--blush); }
.gen-btn:disabled { opacity:0.4; cursor:not-allowed; }

.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100px; color:var(--muted); font-size:12px; font-weight:700; gap:8px; }
.empty-emoji { font-size:24px; }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(242,221,216,0.15); border-radius:3px; }
/* ── SELECT DROPDOWNS ── */
select.form-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(242,221,216,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }
select.form-input option { background:#231210; color:var(--blush); }

/* ── CALENDAR ── */
.cal-card { background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:18px; padding:18px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-header { font-size:10px; font-weight:800; letter-spacing:2px; color:rgba(242,221,216,0.5); text-align:center; padding:6px 2px; }
.cal-cell { min-height:82px; background:rgba(242,221,216,0.03); border:1px solid rgba(242,221,216,0.06); border-radius:10px; padding:8px; cursor:pointer; transition:background 0.15s; position:relative; display:flex; flex-direction:column; gap:4px; }
.cal-cell:hover { background:rgba(242,221,216,0.07); }
.cal-cell.cal-empty { background:transparent; border-color:transparent; cursor:default; }
.cal-cell.cal-today { border-color:rgba(255,107,138,0.4); background:rgba(255,107,138,0.06); }
.cal-day-num { font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--blush); line-height:1; }
.cal-cell.cal-today .cal-day-num { color:var(--accent); }
.cal-count { font-size:9px; font-weight:800; color:var(--success); letter-spacing:1px; }
.cal-activity-dot { font-size:9px; font-weight:800; color:#1A0F0D; background:var(--accent); border-radius:5px; padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-add-hint { font-size:9px; color:rgba(242,221,216,0.15); font-weight:700; margin-top:auto; display:none; }
.cal-cell:hover .cal-add-hint { display:block; }
.cal-nav { display:flex; gap:8px; flex-wrap:wrap; }
.cal-nav button { padding:9px 14px; border-radius:10px; border:1px solid rgba(242,221,216,0.15); background:rgba(242,221,216,0.06); color:rgba(242,221,216,0.7); font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; cursor:pointer; }
.cal-nav button.add { padding:9px 18px; border:none; background:var(--accent); color:var(--black); font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:1px; }
.cal-daybox { text-align:center; min-width:44px; }
.cal-daybox .d { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--accent); line-height:1; }
.cal-daybox .m { font-size:9px; color:rgba(242,221,216,0.55); font-weight:700; }
/* ───────────── Keyboard-aware layout (iPad) ─────────────
   --kb holds the on-screen keyboard height, set by js/app.js.
   It is 0px whenever no keyboard is showing, so nothing changes
   on desktop or when the kiosk is idle. */
:root { --kb: 0px; }

/* Kiosk: shrink the centering box to the space ABOVE the keyboard,
   and compress the surrounding chrome so the code boxes and the
   CHECK IN button always stay visible. Reverts when keyboard closes. */
.kiosk-inner { height: calc(100% - var(--kb)); transition: height 0.2s ease; }
body.kb-open .kiosk-inner { padding-top:10px; padding-bottom:10px; gap:10px; }
body.kb-open .logo-img { width:44px; height:44px; }
body.kb-open .logo-name { font-size:32px; }
body.kb-open .logo-sub,
body.kb-open .staff-on-duty-bar { display:none; }
/* Bottom row stays visible — it holds the "Register here" link, and the
   keyboard is open almost all the time on the kiosk (first box autofocuses). */
body.kb-open .kiosk-bottom { font-size:12px; }
body.kb-open .code-card { padding:16px 34px; }
body.kb-open .code-label { margin-bottom:10px; }
body.kb-open .inputs-row { margin-bottom:12px; }

/* Registration form: keep the scrollable form clear of the keyboard */
#register { scroll-padding-bottom: calc(var(--kb) + 24px); }
.reg-inner { padding-bottom: calc(36px + var(--kb)); }

/* ═══════════════════════════════════════════════
   REDESIGN — shared patterns
   From design_handoff_admin_kiosk_redesign
   ═══════════════════════════════════════════════ */

/* Page header */
.adm-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.adm-h1 { font-family:'Bebas Neue',sans-serif; font-size:36px; line-height:1; color:var(--blush); letter-spacing:0.5px; }
.adm-sub { font-size:12px; font-weight:700; color:rgba(242,221,216,0.6); margin-top:4px; }
.live-pill { display:flex; align-items:center; gap:6px; background:rgba(94,234,212,0.1); border:1px solid rgba(94,234,212,0.3); border-radius:20px; padding:6px 14px; font-size:11px; font-weight:800; color:#5EEAD4; letter-spacing:2px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#5EEAD4; display:inline-block; animation:livepulse 2s infinite; }
@keyframes livepulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.4);opacity:0.7;} }

/* Hero + stat cards */
.stat-strip { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.hero-card { flex:1.6; min-width:220px; background:linear-gradient(135deg,rgba(255,107,138,0.14),rgba(212,168,159,0.08)); border:1.5px solid rgba(255,107,138,0.3); border-radius:22px; padding:24px 26px; display:flex; flex-direction:column; justify-content:center; }
.hero-label { font-size:11px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:rgba(242,221,216,0.65); margin-bottom:6px; }
.hero-num { font-family:'Bebas Neue',sans-serif; font-size:76px; line-height:0.85; color:var(--blush); }
.hero-foot { font-size:13px; font-weight:700; color:rgba(242,221,216,0.75); margin-top:6px; }
.stat-card { flex:1; min-width:120px; background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:18px; padding:18px 20px; display:flex; flex-direction:column; justify-content:center; }
.stat-label { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(242,221,216,0.6); margin-bottom:4px; }
.stat-num { font-family:'Nunito',sans-serif; font-weight:900; font-size:30px; }
.stat-foot { font-size:11px; font-weight:700; color:rgba(242,221,216,0.55); }

/* Two-panel grid */
.col2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:900px){ .col2 { grid-template-columns:1fr; } }
.pane { background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:18px; padding:20px; display:flex; flex-direction:column; min-height:0; }
.pane.gold { border-color:rgba(245,200,66,0.15); }
.pane-title { font-family:'Bebas Neue',sans-serif; font-size:17px; color:var(--blush); letter-spacing:1px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.pane.gold .pane-title { color:var(--gold); }
.pane-count { font-family:'Nunito',sans-serif; font-size:12px; color:rgba(242,221,216,0.5); font-weight:700; }
.pane-list { display:flex; flex-direction:column; gap:8px; overflow-y:auto; max-height:420px; }

/* Person row */
.pr { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; background:rgba(242,221,216,0.04); }
.pr.gold { background:rgba(245,200,66,0.05); }
.pr-av { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:15px; flex-shrink:0; }
.pr-info { flex:1; min-width:0; }
.pr-name { font-size:14px; font-weight:800; color:var(--blush); }
.pr-meta { font-size:11.5px; color:rgba(242,221,216,0.6); font-weight:700; }
.pr-since { font-size:12px; font-weight:800; color:#5EEAD4; white-space:nowrap; }
.pr-out { padding:6px 12px; border-radius:9px; border:1px solid rgba(242,221,216,0.2); background:rgba(255,71,87,0.14); color:#FF8A95; font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }

/* Search + filter chips */
.adm-search { width:100%; padding:12px 16px; border-radius:12px; border:1px solid rgba(242,221,216,0.12); background:rgba(242,221,216,0.05); color:var(--blush); font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; }
.adm-search::placeholder { color:rgba(242,221,216,0.4); }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.chip { padding:8px 16px; border-radius:20px; border:1px solid rgba(242,221,216,0.12); background:transparent; color:rgba(242,221,216,0.6); font-family:'Nunito',sans-serif; font-size:11.5px; font-weight:800; cursor:pointer; }
.chip.on { background:rgba(255,107,138,0.14); border-color:rgba(255,107,138,0.4); color:var(--accent); }

/* Date navigator */
.datenav { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.datenav button { padding:9px 15px; border-radius:11px; border:1px solid rgba(242,221,216,0.12); background:rgba(242,221,216,0.05); color:var(--blush); font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; cursor:pointer; }
.datenav input { padding:9px 13px; border-radius:11px; border:1px solid rgba(242,221,216,0.12); background:rgba(242,221,216,0.05); color:var(--blush); font-family:'Nunito',sans-serif; font-size:12.5px; font-weight:700; }

/* Warning banner */
.warnbar { background:rgba(245,200,66,0.1); border:1px solid rgba(245,200,66,0.3); border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.warnbar-btn { padding:8px 16px; border-radius:9px; border:1px solid rgba(245,200,66,0.35); background:rgba(245,200,66,0.12); color:var(--gold); font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; cursor:pointer; }

/* Tab row — Insights, Communications */
.tabrow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tab { padding:9px 18px; border-radius:11px; border:1px solid rgba(242,221,216,0.15); background:transparent; color:rgba(242,221,216,0.6); font-family:'Nunito',sans-serif; font-size:12.5px; font-weight:800; cursor:pointer; }
.tab.on { border-color:rgba(255,107,138,0.4); background:rgba(255,107,138,0.15); color:var(--accent); }

/* Centered stat trio */
.statrow3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
@media (max-width:700px){ .statrow3 { grid-template-columns:1fr; } }
.stat3 { background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:16px; padding:18px; text-align:center; }
.stat3 .v { font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; }
.stat3 .l { font-size:10px; color:rgba(242,221,216,0.6); font-weight:800; letter-spacing:2px; margin-top:2px; }

/* Chart card */
.chartcard { background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:18px; padding:20px; margin-bottom:18px; }
.chartcard.accent { border-color:rgba(255,107,138,0.15); }
.chartcard-title { font-family:'Bebas Neue',sans-serif; font-size:16px; color:rgba(242,221,216,0.75); letter-spacing:1px; margin-bottom:16px; }
.chartcard.accent .chartcard-title { color:var(--accent); }

/* Member list rows */
.mrow { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:13px; cursor:pointer; transition:background 0.15s; }
.mrow:hover { background:rgba(242,221,216,0.04); }
.mrow-stats { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.mstat { text-align:center; }
.mstat .v { font-family:'Bebas Neue',sans-serif; font-size:17px; line-height:1; }
.mstat .l { font-size:9px; color:rgba(242,221,216,0.5); font-weight:700; }
.tagchip { font-size:9px; font-weight:800; letter-spacing:1px; padding:3px 7px; border-radius:5px; white-space:nowrap; }

/* Profile stat tiles */
.minitile { flex:1; min-width:110px; border:1px solid rgba(242,221,216,0.12); border-radius:12px; padding:12px; text-align:center; }
.minitile .v { font-family:'Bebas Neue',sans-serif; font-size:24px; line-height:1; }
.minitile .l { font-size:9px; color:rgba(242,221,216,0.55); font-weight:800; letter-spacing:1px; margin-top:2px; }

/* Profile edit form */
.ef-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:700px){ .ef-grid { grid-template-columns:1fr; } }
.ef-label { font-size:10px; color:rgba(242,221,216,0.6); font-weight:700; letter-spacing:2px; margin-bottom:4px; }
.ef-input { width:100%; padding:9px 12px; border-radius:10px; border:1px solid rgba(242,221,216,0.15); background:rgba(242,221,216,0.06); color:var(--blush); font-family:'Nunito',sans-serif; font-size:13px; outline:none; }
.ef-input::placeholder { color:rgba(242,221,216,0.4); }
select.ef-input { appearance:none; -webkit-appearance:none; cursor:pointer; }
select.ef-input option { background:#231210; color:var(--blush); }

/* Communications two-column layout — birthdays rail stays visible on every tab */
.comms-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; }
@media (max-width:1000px){ .comms-grid { grid-template-columns:1fr; } }

/* Kiosk code card — hint line + inline status (no submit button) */
.code-hint { font-size:12px; color:rgba(242,221,216,0.55); font-weight:700; text-align:center; width:100%; margin-top:-8px; margin-bottom:16px; }
.code-status { min-height:20px; text-align:center; font-size:12px; font-weight:800; color:var(--accent); margin-top:12px; }

/* Register — required-field banner */
.reg-error { display:none; margin-top:16px; background:rgba(255,71,87,0.1); border:1px solid rgba(255,71,87,0.3); border-radius:12px; padding:12px 16px; font-size:12.5px; font-weight:700; color:#FF8A95; }

/* Insights filter bar + donor strip */
.insbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--card); border:1px solid rgba(242,221,216,0.07); border-radius:16px; padding:12px 14px; margin-bottom:12px; }
.donorbar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between; background:linear-gradient(135deg,rgba(255,107,138,0.12),rgba(212,168,159,0.06)); border:1px solid rgba(255,107,138,0.25); border-radius:16px; padding:16px 18px; margin-bottom:18px; }
.stat3 .l { line-height:1.35; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — phones and small tablets
   The admin dashboard was desktop-only: a 230px sidebar plus content does not
   fit a phone, so below 820px the sidebar becomes an off-canvas drawer behind
   a top bar. The staff portal is used on phones during a shift, so it gets the
   larger tap targets.
   ═══════════════════════════════════════════════ */

/* Layout classes that replaced fixed-width inline grids */
.dirsplit { display:grid; grid-template-columns:300px 1fr; gap:16px; min-height:400px; }
.cw-arow { display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; margin-bottom:8px; }
.retrow { display:grid; grid-template-columns:52px 1fr 1fr; gap:12px; align-items:center; margin-bottom:12px; }

/* Mobile top bar — only exists below the breakpoint */
.mtopbar { display:none; }
.nav-backdrop { display:none; }

@media (max-width:980px){
  .dirsplit { grid-template-columns:240px 1fr; }
}

@media (max-width:820px){
  /* ── chrome ── */
  .mtopbar {
    display:flex; align-items:center; gap:12px;
    position:fixed; top:0; left:0; right:0; z-index:300;
    height:56px; padding:0 14px;
    background:var(--mid); border-bottom:1px solid rgba(242,221,216,0.08);
  }
  .mtopbar-burger {
    width:40px; height:40px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:11px; border:1px solid rgba(242,221,216,0.12);
    background:rgba(242,221,216,0.05); color:var(--blush);
    font-size:19px; cursor:pointer;
  }
  .mtopbar-logo { width:28px; height:28px; border-radius:50%; }
  .mtopbar-title { font-family:'Bebas Neue',sans-serif; font-size:19px; color:var(--blush); letter-spacing:1px; }

  .admin-sidebar:not(.sp-side) {
    position:fixed; top:0; bottom:0; left:0; z-index:320;
    width:255px; max-width:82vw;
    transform:translateX(-100%); transition:transform 0.25s ease;
    box-shadow:8px 0 40px rgba(0,0,0,0.5);
  }
  .admin-sidebar:not(.sp-side).open { transform:translateX(0); }
  .nav-backdrop {
    display:block; position:fixed; inset:0; z-index:310;
    background:rgba(10,6,5,0.6); opacity:0; pointer-events:none; transition:opacity 0.25s;
  }
  .nav-backdrop.show { opacity:1; pointer-events:auto; }
  .nav-item { padding:13px 18px; font-size:14px; }

  .admin-main { padding:70px 14px 24px; gap:14px; }
  .sp-main { padding:16px 12px 28px; gap:14px; }

  /* ── content ── */
  .adm-h1 { font-size:29px; }
  .adm-head { margin-bottom:16px; }
  .dirsplit { grid-template-columns:1fr; }
  .cw-arow { grid-template-columns:1fr; }
  .retrow { grid-template-columns:1fr; gap:6px; }
  .stat-strip { gap:12px; }
  .hero-card { flex:1 1 100%; padding:20px; }
  .hero-num { font-size:60px; }
  .stat-card { flex:1 1 calc(50% - 6px); }
  .statrow3 { grid-template-columns:1fr 1fr; gap:10px; }
  .stat3 .v { font-size:28px; }
  .panels-row, .stats-grid { grid-template-columns:1fr; }
  .pane, .chartcard, .cal-card { padding:16px; }
  .tabrow { gap:6px; }
  .tab { padding:9px 13px; font-size:12px; }
  .chip { padding:8px 13px; font-size:11px; }
  .insbar { padding:12px; }
  .insbar > div:last-child { margin-left:0 !important; width:100%; }
  .insbar select { flex:1; min-width:120px; }

  /* Person rows: let the meta wrap instead of squeezing the name */
  .pr { flex-wrap:wrap; gap:10px; padding:12px; }
  .pr-info { flex:1 1 55%; }
  .pr-out, .warnbar-btn { margin-left:auto; }
  .mrow { flex-wrap:wrap; padding:12px; }
  .mrow-stats { gap:12px; width:100%; justify-content:flex-start; }

  /* Calendar: keep 7 columns, just make them phone-sized */
  .cal-cell { min-height:58px; padding:5px; border-radius:8px; gap:2px; }
  .cal-day-num { font-size:13px; }
  .cal-count, .cal-activity-dot { font-size:8px; padding:1px 4px; }
  .cal-add-hint { display:none !important; }
  .cal-header { font-size:9px; letter-spacing:1px; padding:4px 0; }
  .cal-grid { gap:3px; }

  .warnbar { padding:12px 14px; gap:10px; }
  .minitile { min-width:calc(33% - 10px); padding:10px; }
  .minitile .v { font-size:20px; }
}

@media (max-width:520px){
  .statrow3 { grid-template-columns:1fr; }
  .stat-card { flex:1 1 100%; }
  .adm-h1 { font-size:26px; }
  .admin-main { padding:66px 11px 20px; }
  .sp-main { padding:14px 10px 24px; }
  .pane-title { font-size:15px; }
  .mrow-stats { gap:10px; }
  .mstat .v { font-size:15px; }
}

/* ── STAFF PORTAL on a phone ──
   Used one-handed during a shift, so the nav is a scrollable strip rather than
   a wrapping block that pushes content off the screen. */
@media (max-width:820px){
  #sp-wrapper.show { flex-direction:column; }
  .sp-side {
    width:100%; height:auto; flex-direction:column; padding:0;
    border-right:none; border-bottom:1px solid rgba(242,221,216,0.08);
    position:sticky; top:0; z-index:200; background:var(--mid);
  }
  .sp-side .sidebar-logo-wrap { padding:10px 14px; margin:0; border-bottom:none; }
  .sp-side #sp-nav {
    display:flex; gap:6px; overflow-x:auto; padding:0 10px 10px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .sp-side #sp-nav::-webkit-scrollbar { display:none; }
  .sp-side .nav-item {
    flex-shrink:0; border-left:none; border-radius:11px; padding:10px 14px;
    background:rgba(242,221,216,0.05); white-space:nowrap; font-size:13px;
  }
  .sp-side .nav-item.active { background:rgba(255,107,138,0.14); color:var(--blush); }
  .sp-side .sidebar-bottom { display:flex; gap:8px; margin:0; padding:0 10px 10px; border:none; }
  .sp-side .sidebar-bottom .nav-item { flex:1; justify-content:center; }
  .sp-side .exit-btn { flex:1; }
  .sp-user { display:none; }
  .sp-main { padding:16px 12px 28px; }
  /* Buttons staff tap mid-shift stay finger-sized */
  .sp-btn { min-height:46px; }
  .team-row { flex-wrap:wrap; gap:10px; }
}

/* ═══════════════ PHOTOS ═══════════════
   Shared by the staff portal and the admin dashboard (js/photos.js). */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.photo-card {
  background:rgba(242,221,216,0.04); border:1px solid rgba(242,221,216,0.08);
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
}
.photo-card.excluded { opacity:0.45; }
.photo-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }

/* Caption row: the field, and a Save button that appears the moment the text
   changes. Blurring the field saves too — the button is there so it is obvious
   on a phone that the caption is editable and that it went somewhere. */
.ph-capwrap {
  display:flex; align-items:center; gap:6px;
  border-top:1px solid rgba(242,221,216,0.08); padding:4px 8px 4px 10px;
}
.ph-cap {
  flex:1; min-width:0; border:none; background:transparent; color:var(--blush);
  font-family:'Nunito',sans-serif; font-size:12px; font-weight:600; padding:7px 0; outline:none;
}
.ph-cap::placeholder { color:rgba(242,221,216,0.42); font-style:italic; }
.ph-cap:disabled { color:rgba(242,221,216,0.45); }
.ph-save {
  flex:none; background:var(--accent); color:#2C1614; border:none; border-radius:8px;
  padding:5px 10px; font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; cursor:pointer;
}
.ph-save:disabled { opacity:0.6; cursor:default; }
.ph-ok { flex:none; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--gold); text-transform:uppercase; }

.ph-prog {
  display:block; width:calc(100% - 20px); max-width:calc(100% - 20px); box-sizing:border-box;
  margin:0 10px 9px; border:1px solid rgba(242,221,216,0.14); border-radius:9px;
  background:rgba(242,221,216,0.05); color:var(--blush);
  font-family:'Nunito',sans-serif; font-size:11px; font-weight:700; padding:6px 8px; outline:none;
}
.ph-prog:focus { border-color:var(--accent); }
.ph-prog:disabled { opacity:0.5; }

.photo-actions {
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  padding:2px 10px 9px; font-size:11px; color:var(--muted); font-weight:700; margin-top:auto;
}
.photo-actions button {
  background:none; border:none; color:var(--muted);
  font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; cursor:pointer; padding:0;
}
.photo-actions button:hover { color:var(--blush); }
.photo-actions button.del { color:var(--error); }