@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#1a1a2e;--ink2:#2d2d4e;--cream:#f9f6f0;--accent:#c8553d;
  --accent2:#e8a87c;--sage:#6b8f71;--slate:#8892a4;--border:#e2ddd5;
  --white:#ffffff;--shadow:0 2px 20px rgba(26,26,46,0.08);
  --shadow-lg:0 8px 40px rgba(26,26,46,0.15);--sidebar-w:240px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;-webkit-text-size-adjust:100%;}
/* Login */
#login-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--ink);position:relative;overflow:hidden;padding:16px;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bot));}
#login-screen::before{content:'';position:absolute;top:-30%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(200,85,61,0.25) 0%,transparent 70%);}
#login-screen::after{content:'';position:absolute;bottom:-20%;left:-10%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(107,143,113,0.2) 0%,transparent 70%);}
.login-card{background:var(--white);border-radius:20px;padding:48px 40px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);position:relative;z-index:1;}
.login-logo{font-family:'DM Serif Display',serif;font-size:2rem;color:var(--ink);margin-bottom:4px;}
.login-logo span{color:var(--accent);}
.login-sub{color:var(--slate);font-size:0.9rem;margin-bottom:36px;}
/* Forms */
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:0.8rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;}
.form-group input:not([type="checkbox"]),.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:1rem;color:var(--ink);background:var(--cream);transition:border-color .2s,box-shadow .2s;outline:none;-webkit-appearance:none;appearance:none;}
.form-group input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,85,61,0.1);background:var(--white);}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
.btn-primary{background:var(--accent);color:white;}
.btn-primary:hover{background:#b04535;}
.btn-primary:active{transform:scale(0.97);}
.btn-secondary{background:var(--cream);color:var(--ink);border:1.5px solid var(--border);}
.btn-secondary:hover{background:var(--border);}
.btn-sage{background:var(--sage);color:white;}
.btn-sage:hover{background:#5a7a60;}
.btn-danger{background:#e74c3c;color:white;}
.btn-danger:hover{background:#c0392b;}
.btn-sm{padding:10px 14px;font-size:0.82rem;}
.btn-full{width:100%;justify-content:center;}
.error-msg{color:var(--accent);font-size:0.85rem;margin-top:12px;}
/* Hamburger */
.hamburger{display:none;position:fixed;top:calc(14px + var(--safe-top));left:calc(14px + var(--safe-l));z-index:300;background:var(--ink);border:none;border-radius:10px;padding:10px;cursor:pointer;flex-direction:column;gap:5px;-webkit-tap-highlight-color:transparent;}
.hamburger span{display:block;width:22px;height:2px;background:white;border-radius:2px;transition:all .25s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(26,26,46,0.5);z-index:199;}
.sidebar-overlay.open{display:block;}
/* Sidebar */
#app-shell{display:none;min-height:100vh;min-height:100dvh;}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--ink);color:var(--white);display:flex;flex-direction:column;z-index:200;transition:transform .3s ease;padding-bottom:var(--safe-bot);}
.sidebar-logo{font-family:'DM Serif Display',serif;font-size:1.4rem;padding:28px 24px 20px;padding-top:calc(28px + var(--safe-top));border-bottom:1px solid rgba(255,255,255,0.1);}
.sidebar-logo span{color:var(--accent2);}
.sidebar-user{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:0.8rem;}
.sidebar-user .name{font-weight:600;font-size:0.9rem;}
.sidebar-user .role{color:var(--slate);text-transform:capitalize;}
.nav-section{padding:16px 12px 8px;}
.nav-label{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);padding:0 12px;margin-bottom:4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:8px;cursor:pointer;font-size:0.88rem;font-weight:500;color:rgba(255,255,255,0.7);transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:44px;}
.nav-item:hover{background:rgba(255,255,255,0.07);color:var(--white);}
.nav-item:active{background:rgba(255,255,255,0.12);}
.nav-item.active{background:var(--accent);color:var(--white);}
.nav-item .icon{font-size:1.1rem;width:22px;text-align:center;}
.sidebar-footer{margin-top:auto;padding:16px 12px;border-top:1px solid rgba(255,255,255,0.1);}
/* Main */
.main-content{margin-left:var(--sidebar-w);min-height:100vh;min-height:100dvh;padding:40px;padding-right:calc(40px + var(--safe-r));}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap;}
.page-title{font-family:'DM Serif Display',serif;font-size:2rem;color:var(--ink);}
.page-subtitle{color:var(--slate);font-size:0.9rem;margin-top:4px;}
/* Cards */
.card{background:var(--white);border-radius:16px;padding:24px;box-shadow:var(--shadow);margin-bottom:20px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
.card-title{font-weight:600;font-size:1rem;}
/* Tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;min-width:320px;}
th{text-align:left;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate);padding:0 12px 12px;border-bottom:1.5px solid var(--border);white-space:nowrap;}
td{padding:12px;border-bottom:1px solid var(--border);font-size:0.88rem;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--cream);}
/* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:0.72rem;font-weight:600;letter-spacing:0.05em;}
.badge-admin{background:rgba(200,85,61,0.12);color:var(--accent);}
.badge-volunteer{background:rgba(107,143,113,0.12);color:var(--sage);}
.badge-active{background:rgba(107,143,113,0.12);color:var(--sage);}
.badge-inactive{background:rgba(136,146,164,0.12);color:var(--slate);}
.badge-checked{background:rgba(107,143,113,0.15);color:var(--sage);}
.badge-missing{background:rgba(200,85,61,0.12);color:var(--accent);}
/* Calendar */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-header{text-align:center;font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate);padding:6px 2px;}
.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:all .15s;position:relative;padding:4px;background:var(--white);border:1.5px solid transparent;-webkit-tap-highlight-color:transparent;min-height:40px;}
.cal-day:hover{border-color:var(--accent);}
.cal-day:active{transform:scale(.94);}
.cal-day.empty{background:transparent;border:none;cursor:default;}
.cal-day.past{opacity:0.4;cursor:default;pointer-events:none;}
.cal-day.has-event{border-color:var(--accent2);background:rgba(232,168,124,0.08);}
.cal-day.today{border-color:var(--accent);background:rgba(200,85,61,0.06);}
.cal-day.selected{background:var(--accent);color:white;border-color:var(--accent);}
.cal-day.selected .cal-day-num{color:white;}
.cal-day.selected .event-dot{background:white;}
.cal-day-num{font-size:0.88rem;font-weight:600;color:var(--ink);line-height:1;}
.event-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:3px;}
.event-count{font-size:0.58rem;color:var(--accent);font-weight:600;margin-top:1px;}
.cal-nav{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.cal-month-title{font-family:'DM Serif Display',serif;font-size:1.4rem;flex:1;text-align:center;}
.cal-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.cal-btn:hover{border-color:var(--accent);color:var(--accent);}
/* Shifts */
.shifts-panel{background:var(--white);border-radius:16px;padding:20px;box-shadow:var(--shadow);}
.shift-card{border:1.5px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px;transition:border-color .15s;}
.shift-card:hover{border-color:var(--accent2);}
.shift-title{font-weight:600;font-size:0.95rem;margin-bottom:4px;}
.shift-time{font-size:0.82rem;color:var(--slate);margin-bottom:8px;}
.capacity-bar{height:4px;border-radius:2px;background:var(--border);margin:8px 0;}
.capacity-fill{height:100%;border-radius:2px;background:var(--sage);transition:width .3s;}
.capacity-fill.full{background:var(--accent);}
/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(26,26,46,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;display:none;align-items:flex-end;justify-content:center;padding:0;}
.modal-overlay.open{display:flex;}
.modal{background:var(--white);border-radius:20px 20px 0 0;padding:28px 24px;padding-bottom:calc(28px + var(--safe-bot));width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalIn .25s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.modal-title{font-family:'DM Serif Display',serif;font-size:1.4rem;margin-bottom:20px;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap;}
/* UUID rows */
.uuid-row{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:8px;padding:8px 12px;margin-bottom:14px;border:1px solid var(--border);}
.uuid-label{font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);white-space:nowrap;}
.uuid-value{font-family:monospace;font-size:0.72rem;color:var(--ink2);word-break:break-all;flex:1;min-width:0;}
.uuid-copy{background:none;border:none;cursor:pointer;color:var(--slate);font-size:0.9rem;padding:4px 6px;border-radius:4px;flex-shrink:0;-webkit-tap-highlight-color:transparent;min-height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;}
.uuid-copy:hover{color:var(--accent);}
/* QR */
.qr-display{display:flex;flex-direction:column;align-items:center;padding:12px;gap:12px;}
/* Reports */
.report-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.stat-card{background:var(--cream);border-radius:12px;padding:16px;text-align:center;}
.stat-num{font-family:'DM Serif Display',serif;font-size:2.2rem;color:var(--accent);}
.stat-label{font-size:0.78rem;color:var(--slate);margin-top:4px;}
/* Check-in */
#checkin-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--ink);padding:16px;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bot));}
.checkin-card{background:var(--white);border-radius:20px;padding:40px 32px;text-align:center;width:100%;max-width:420px;box-shadow:var(--shadow-lg);}
.checkin-icon{font-size:3.5rem;margin-bottom:14px;}
.checkin-title{font-family:'DM Serif Display',serif;font-size:1.7rem;margin-bottom:8px;}
.checkin-sub{color:var(--slate);font-size:0.9rem;}
.mt-16{margin-top:16px;}
.page{display:none;}
.page.active{display:block;}
/* Toast */
.toast{position:fixed;bottom:calc(24px + var(--safe-bot));right:24px;background:var(--ink);color:white;padding:14px 20px;border-radius:10px;font-size:0.88rem;z-index:9999;box-shadow:var(--shadow-lg);animation:toastIn .3s ease;max-width:320px;}
.toast.success{border-left:4px solid var(--sage);}
.toast.error{border-left:4px solid var(--accent);}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
/* Camera / scanner */
.scanner-area{border:2px dashed var(--border);border-radius:16px;padding:24px 16px;text-align:center;margin:12px 0;}
.scanner-input{font-size:1rem;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;width:100%;font-family:'DM Sans',sans-serif;margin-top:10px;}
#camera-preview{width:100%;border-radius:12px;display:none;margin-top:10px;background:#000;}
#camera-preview.active{display:block;}
.camera-btn-row{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
/* Capture input (native camera on mobile) */
.capture-input{display:none;}
/* Grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-cal{display:grid;grid-template-columns:1fr 360px;gap:20px;}
.grid-half{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* Responsive ── 900px: collapse side-by-side grids */
@media(max-width:900px){
  .grid-cal{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
}
/* Responsive ── 768px: mobile sidebar, tighter layout */
@media(max-width:768px){
  .hamburger{display:flex;}
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-content{margin-left:0;padding:20px 16px;padding-top:calc(60px + var(--safe-top));padding-bottom:calc(20px + var(--safe-bot));padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r));}
  .page-title{font-size:1.4rem;}
  .page-header{margin-bottom:16px;}
  .card{padding:14px;}
  .cal-day{min-height:38px;border-radius:8px;}
  .cal-day-num{font-size:0.8rem;}
  .event-count{display:none;}
  .modal{padding:24px 16px;padding-bottom:calc(24px + var(--safe-bot));border-radius:20px 20px 0 0;}
  .modal-actions{flex-direction:column-reverse;}
  .modal-actions .btn{width:100%;justify-content:center;}
  .report-summary{grid-template-columns:1fr 1fr;}
  .checkin-card{padding:28px 16px;}
  .login-card{padding:32px 20px;}
  /* Tables: hide less critical columns on small screens */
  .hide-mobile{display:none;}
  /* Audit table: compress */
  .audit-table-wrap td,.audit-table-wrap th{padding:8px 6px;font-size:0.78rem;}
}
/* Responsive ── 480px: phones (iPhone 15=390px, Pixel 9=412px) */
@media(max-width:480px){
  .toast{left:16px;right:16px;max-width:none;bottom:calc(16px + var(--safe-bot));}
  .calendar-grid{gap:2px;}
  .cal-header{font-size:0.6rem;padding:4px 1px;}
  .cal-day{min-height:36px;}
  .cal-day-num{font-size:0.75rem;}
  .login-card{padding:28px 16px;}
  .page-title{font-size:1.25rem;}
  .grid-half{grid-template-columns:1fr;}
  .report-summary{grid-template-columns:1fr 1fr;}
  .report-summary .stat-card:last-child{grid-column:1/-1;}
  .uuid-value{font-size:0.65rem;}
  .btn-sm{padding:9px 12px;font-size:0.8rem;}
  /* Full-width modals on small phones */
  .modal{max-height:95vh;max-height:95dvh;}
  /* Shift card buttons stack vertically */
  .shift-actions{flex-direction:column;align-items:stretch;}
  .shift-actions .btn{width:100%;justify-content:center;}
}