:root { --bg:#0b0f14; --card:#101826; --muted:#93a4b5; --text:#e7eef7; --line:#223146; --accent:#3b82f6; --danger:#ef4444; --ok:#22c55e; --success:var(--ok); --text-secondary:var(--muted); } .downtime-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:#b45309;color:#fff;text-align:center;padding:10px 16px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.3)} .downtime-banner-link{color:#fff;text-decoration:underline;font-weight:800;padding:4px 12px;background:rgba(0,0,0,.2);border-radius:4px} .open-shift-24h-banner{background:#854d0e;color:#fef3c7;border:1px solid #a16207;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;text-align:center;margin-bottom:10px} *{box-sizing:border-box} html{width:100%;height:100%;overflow-x:hidden} body{margin:0;width:100%;max-width:100vw;overflow-x:hidden;overflow-y:auto;background:linear-gradient(180deg,#070a0f,#0b1220);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial} a{color:inherit} .topbar{display:none} .appHeader{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(7,10,15,.92);backdrop-filter:blur(10px);z-index:10} .appBrand{display:flex;flex-direction:column;gap:6px} .appTitle{font-size:32px;font-weight:1000;letter-spacing:.03em;line-height:1.12;display:flex;align-items:center;gap:10px;text-shadow:0 2px 8px rgba(2,6,23,.35),0 1px 0 rgba(255,255,255,.03)} .appBolt{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:var(--text);background:rgba(11,18,32,.96);border:2px solid rgba(59,130,246,.6);box-shadow:0 0 18px rgba(59,130,246,.35),0 0 32px rgba(59,130,246,.18),inset 0 1px 0 rgba(255,255,255,.12)} .appKicker{font-size:16px;font-weight:900;color:var(--text);letter-spacing:.06em;line-height:1.1} .appSubtitle{font-size:12px;color:var(--muted);letter-spacing:.05em;line-height:1.2} .build-version{font-size:10px;color:var(--muted);opacity:.7;letter-spacing:.04em;font-family:monospace;white-space:nowrap} .appHeaderActions{display:flex;gap:8px;align-items:center;flex-shrink:0} /* Force-desktop mode (admin "Desktop View" toggle). Swapping the viewport meta to width=1200 is what actually defeats the mobile media queries; these rules are the floor that keeps the layout desktop-width and horizontally scrollable if a browser ignores that swap. Class is set on by the index.html bootstrap (no flash) and mirrored onto by app.js. */ html.force-desktop,html.force-desktop body,body.force-desktop{min-width:1200px;max-width:none;overflow-x:auto} html.force-desktop #admin-shell,body.force-desktop #admin-shell{max-width:none;overflow-x:visible} .loaded-user-badge{background:var(--card);border:1px solid var(--accent);border-radius:8px;padding:10px 16px;line-height:1.4;width:100%} .loaded-user-badge .loaded-user-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px} .loaded-user-badge .loaded-user-name{font-weight:700;font-size:18px;color:var(--text)} .loaded-user-badge .loaded-user-email{font-size:13px;color:var(--muted);margin-top:1px} .loaded-user-phone{margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .loaded-user-phone.is-empty{display:block;color:#64748b;font-size:11px} .loaded-user-phone-label{color:#94a3b8;font-size:11px} .loaded-user-phone-number{color:#60a5fa;font-weight:800;font-size:16px;text-decoration:none;letter-spacing:.02em} .loaded-user-phone-number:hover{text-decoration:underline} .loaded-user-contact-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:12px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;flex:0 0 auto} .loaded-user-contact-btn.is-call{color:#bfdbfe;border-color:rgba(37,99,235,.6);background:rgba(37,99,235,.16)} .loaded-user-contact-btn.is-call:hover{background:rgba(37,99,235,.28)} .loaded-user-contact-btn.is-text{color:#bbf7d0;border-color:rgba(16,185,129,.6);background:rgba(16,185,129,.16)} .loaded-user-contact-btn.is-text:hover{background:rgba(16,185,129,.28)} /* Worker Lookup action row. Natural width at desktop (unchanged); on phones the buttons take a 160px basis so they wrap to a second row as full tap targets instead of shoving the second button past the viewport edge. */ .workerLookupActions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;margin-top:8px} /* Support tab layout. Previously inline on the elements, which meant the mobile media query could not override max-width:340px / min-height:500px — inline styles win over stylesheet rules regardless of media query. */ .supportLayout{display:flex;gap:12px;min-height:500px} .supportThreadList{flex:1;min-width:0;max-width:340px;overflow-y:auto;max-height:600px;border:1px solid #374151;border-radius:6px;padding:6px;background:#0f172a} .supportThreadView{flex:2;min-width:0;display:flex;flex-direction:column;min-height:500px;overflow-y:auto;border:1px solid #374151;border-radius:6px;padding:10px;background:#0f172a} /* Was inline on the element, which — exactly like the two panes above — beat the mobile media query and pushed the composer below the pane's own fold. */ .supportMessagesContainer{max-height:400px} .appHeader .stk-logo{height:140px} .stk-logo { height: 100px; width: auto; display: block; object-fit: contain; margin-bottom: 0; } .login-logo{filter:drop-shadow(0 12px 26px rgba(0,0,0,.45))} .brand{display:flex;gap:8px;align-items:center} .bolt{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.35);box-shadow:0 0 12px rgba(59,130,246,.18),inset 0 1px 0 rgba(255,255,255,.08)} .title{font-weight:800;letter-spacing:.3px;font-size:14px} .subtitle{color:var(--muted);font-size:11px;margin-top:2px;letter-spacing:.02em} .wrap{max-width:980px;margin:18px auto;padding:0 14px} #login-shell{display:flex;width:100%;max-width:100vw;min-height:100vh;align-items:center;justify-content:center;padding:clamp(28px,6vh,72px) 0;overflow-x:hidden} #admin-shell{width:100%;max-width:100vw;overflow-x:hidden} .login-wrap{width:min(92vw,520px);display:flex;flex-direction:column;align-items:center;gap:clamp(16px,4vh,32px)} .brand-zone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(8px,2vh,14px);padding-top:clamp(12px,3vh,28px)} .brand-divider{width:clamp(56px,20vw,96px);height:1px;background:rgba(255,255,255,.18);box-shadow:0 0 18px rgba(59,130,246,.22)} #login-shell .stk-logo{height:280px;margin-bottom:20px} .card{background:rgba(16,24,38,.9);border:1px solid var(--line);border-radius:14px;padding:16px} #app,.card,.container{max-width:100%;overflow-x:hidden} .hidden{display:none !important} h2{margin:0 0 10px} .muted{color:var(--muted)} .small{font-size:12px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .label{font-size:12px;color:var(--muted);margin-bottom:6px} input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0b1220;color:var(--text)} textarea{resize:vertical} .row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap} .btn{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0b1220;color:var(--text);cursor:pointer} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.primary{background:var(--accent);border-color:transparent;font-weight:700} .btn.ghost{background:transparent} .typeahead-wrap{position:relative;flex:1 1 260px;min-width:220px} .typeahead-wrap input{width:100%} .typeahead-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:rgba(11,18,32,.98);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(7,10,15,.45);z-index:50;max-height:320px;overflow:auto;padding:6px} .typeahead-item{padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px} .typeahead-item:hover,.typeahead-item.active{background:rgba(59,130,246,.15)} .typeahead-email{font-weight:700} .typeahead-name{font-size:12px;color:var(--muted)} .btn-missed{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.5);color:#fdba74;font-weight:700;min-height:56px} .btn-missed:hover{background:rgba(249,115,22,.22);box-shadow:0 0 10px rgba(249,115,22,.25)} .btn-shuttle{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.6);color:#dbeafe;font-weight:700;min-height:48px;width:100%;box-shadow:0 8px 18px rgba(59,130,246,.2),inset 0 1px 0 rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:8px} .btn-icon{display:inline-flex;align-items:center;justify-content:center} .btn-shuttle:hover{background:rgba(59,130,246,.22);box-shadow:0 10px 24px rgba(59,130,246,.3),0 0 0 2px rgba(59,130,246,.15)} .btn-shuttle:active{transform:translateY(1px)} .btn-loading{position:relative} .btn-loading::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;transform:translateY(-50%);animation:spin 1s linear infinite} .tabs{display:flex;gap:8px;margin-bottom:14px} .tab{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0b1220;color:var(--text);cursor:pointer} .tab.active{background:#142238;border-color:#2a3d5c} .tabpane{margin-top:6px} .adminTabs{display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:0;background:rgba(16,24,38,.98);padding:6px 0 10px;margin-bottom:10px;z-index:2} .adminTab{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(11,18,32,.7);color:var(--muted);font-weight:700;letter-spacing:.04em;cursor:pointer} .adminTab.active{color:var(--text);border-color:rgba(59,130,246,.6);box-shadow:0 0 0 2px rgba(59,130,246,.15)} .adminTabPane{margin-top:6px} .placeholderCard{border:1px dashed rgba(59,130,246,.35);border-radius:12px;padding:14px;background:rgba(11,18,32,.35);color:var(--muted)} .workerHeader{padding:12px 4px 6px} /* header-left/right removed — children are now direct .workerHeader children */ .header-center{flex:1 1 auto;text-align:center;display:flex;flex-direction:column;align-items:center} .header-tile{width:clamp(100px,22vw,150px);box-sizing:border-box} .header-title-row{display:flex;align-items:center;justify-content:center;gap:0.6rem;margin-bottom:.35rem;flex-wrap:wrap} .header-bolt{font-size:22px;color:var(--accent)} .app-title{font-size:clamp(2.2rem,3.2vw,3.6rem);font-weight:800;letter-spacing:.06em;line-height:1.05;color:#fff;display:inline-block;text-shadow:0 10px 28px rgba(0,0,0,.65),0 3px 10px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.06);filter:drop-shadow(0 0 14px rgba(0,180,255,.18))} .identityRow{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px} .workerName{font-size:20px;font-weight:800;margin-bottom:4px} .identity-actions{display:flex;gap:6px;flex-shrink:0;align-items:center} .worker-action-btn{min-height:36px;padding:6px 12px;font-size:13px;border-radius:8px;flex-shrink:0} .worker-logout-btn{min-height:36px;padding:6px 16px;font-size:13px;border-radius:8px;flex-shrink:0} .workerRole{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .status-card{border-radius:16px;padding:12px 14px;border:1px solid rgba(120,170,255,.18);background:rgba(10,20,35,.35);box-shadow:0 0 18px rgba(80,160,255,.08);margin-top:-6px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;transition:background 160ms ease,box-shadow 160ms ease,border-color 160ms ease} .statusCard{padding:12px 14px} .status-card::before{content:"";position:absolute;inset:1px;border-radius:15px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .status-card.is-off{background:rgba(10,20,35,.35);border:2px solid rgba(255,70,70,.85);box-shadow:0 0 0 1px rgba(255,70,70,.45),0 0 22px rgba(255,70,70,.26)} .status-card.is-on{background:rgba(10,20,35,.35);border:2px solid rgba(40,200,110,.85);box-shadow:0 0 0 1px rgba(40,200,110,.45),0 0 22px rgba(40,200,110,.26)} .status-label{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);font-weight:700;margin-bottom:6px} .status-card .pill{margin:0;padding:0;border-radius:14px;letter-spacing:.14em;font-size:18px;font-weight:800;text-transform:uppercase;background:transparent !important;border:none !important;box-shadow:none !important} .status-card .pill.on{color:#ecfdf3} .status-card .pill.off{color:#fff1f2} .strike-badge-card{border-radius:16px;padding:12px 14px;border:1px solid rgba(59,130,246,.6);background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(34,197,94,.12));box-shadow:0 8px 22px rgba(59,130,246,.35),0 0 0 1px rgba(59,130,246,.2);text-align:left;position:relative} .strike-badge-card::before,.strike-badge-card::after{content:none} .strike-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fdba74;font-weight:800;margin-bottom:6px} .strike-day{font-size:22px;font-weight:900;color:var(--text);margin-bottom:4px} .strike-hours{font-size:12px;color:var(--muted);font-weight:700} .header-title{font-size:40px;font-weight:900;line-height:1.08;letter-spacing:.02em} .btn-refresh{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:18px;min-width:36px;min-height:36px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;flex-shrink:0} .btn-refresh:hover{background:rgba(255,255,255,.06);color:var(--text)} .secondary-actions{display:flex;gap:10px;margin-top:10px} .secondary-actions .secondary-btn{flex:1;height:52px;font-size:15px;font-weight:600;border-radius:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;box-sizing:border-box} .secondary-actions .edit-sheet-btn{background:linear-gradient(180deg,#f59e0b,#d97706);color:#fff;border:none} .secondary-actions .edit-sheet-btn:hover{box-shadow:0 0 14px rgba(245,158,11,.5)} .secondary-actions .lunch-btn{background:linear-gradient(135deg,#3b82f6,#06b6d4,#6366f1);color:#fff;border:none} .secondary-actions .lunch-btn:hover{box-shadow:0 0 14px rgba(59,130,246,.5)} .refresh-worker-btn{width:100%;height:32px;min-height:32px;border-radius:10px;background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.5);color:#93c5fd;font-size:13px;font-weight:600;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;box-sizing:border-box} .refresh-worker-btn:hover{background:rgba(59,130,246,.25);box-shadow:0 0 10px rgba(59,130,246,.35)} .clockRow{display:flex;flex-direction:row;align-items:center;gap:12px;margin-top:14px} .clockRow .bigbtn{flex:1 1 auto;min-width:0;margin-top:0;height:64px} .header-subtitle{margin-top:6px;color:var(--muted);font-size:12px;letter-spacing:.04em} .help-link{font-size:12px;color:var(--muted);cursor:pointer} .help-link:hover{color:var(--text)} .statusMeta{margin-top:6px} .statusRow{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .pill{display:inline-block;padding:8px 12px;border-radius:999px;font-weight:800;margin-top:6px} .pill.off{background:rgba(239,68,68,.15);color:#fecaca;border:1px solid rgba(239,68,68,.35)} .pill.on{background:rgba(34,197,94,.15);color:#bbf7d0;border:1px solid rgba(34,197,94,.35)} .weekBox{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(11,18,32,.55);margin-top:12px;width:100%;box-shadow:0 8px 18px rgba(7,10,15,.35),0 0 0 1px rgba(59,130,246,.18)} .weekHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .login-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px} .login-brand .brand-title{font-size:1.25rem;font-weight:800;letter-spacing:.04em;color:#fff;text-shadow:0 6px 18px rgba(0,0,0,.55)} .login-card{background:rgba(9,14,24,.72);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:0 18px 40px rgba(3,8,18,.55),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(10px);padding:clamp(16px,3.2vh,22px);width:100%} .login-card .row{flex-direction:column;align-items:stretch} .login-card input{background:rgba(7,12,22,.7);border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#eaf2ff;padding:12px} .login-card input:focus{outline:none;border-color:rgba(120,200,255,.45);box-shadow:0 0 0 3px rgba(120,200,255,.12)} .login-card button{border-radius:12px;font-weight:800;letter-spacing:.06em} .action-zone{width:100%} .section{overflow-x:visible} .table{width:100%;border-collapse:collapse} @media (max-width:720px){ .appHeader{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px} .appBrand{gap:6px} .appHeaderActions{align-self:flex-end} .wrap{margin:12px auto;padding:0 10px} .card{padding:14px} /* Sticky .appHeader is ~130px+ tall once it stacks on mobile, so a sticky tab strip at top:0 hides underneath it. Header height varies with the 140px logo and wrapping, so a fixed top offset can't be trusted — let the tabs scroll with the page instead. */ .adminTabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:8px;gap:8px;position:static;top:auto} .adminTabs::-webkit-scrollbar{height:0} .adminTab{min-height:44px;padding:6px 10px;font-size:12px;white-space:nowrap} .section{overflow-x:auto} .sectionTitle{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .table{min-width:520px} #adminTab_userpunches .metricsRow{grid-template-columns:1fr} /* Support: stack the two panels, each scrolling on its own. min-height:500px is dropped here or it forces a screen of empty space above the fold. */ .supportLayout{flex-direction:column;gap:10px;min-height:0} .supportThreadList{flex:none;max-width:none;max-height:40vh} .supportThreadView{flex:none;min-height:0;max-height:60vh} /* 400px of messages + header + composer overflows a 60vh pane on a 390px phone, so Send Reply sat below the thread's own scroll fold. */ .supportMessagesContainer{max-height:min(400px,38vh)} /* iOS force-zooms any focused input under 16px and never zooms back out — the pane ends up off-screen mid-reply. */ #supportReplyBox{font-size:16px} /* Match the 44px tap target every .adminTab already gets on mobile. */ #btnSupportSendReply,#btnSupportResolve{min-height:44px} .workerLookupActions .btn{flex:1 1 160px} } @media (max-width:420px){ .adminTab{min-height:40px;padding:6px 8px;font-size:11px;white-space:nowrap} } .weekTitle{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700} .weekBox .strike-counter-badge{margin-bottom:10px} .weekStats{display:flex;gap:16px;justify-content:space-between;margin-top:10px} .weekStat{flex:1;min-width:120px} .weekStatLabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px} .weekStatValue{font-size:14px;font-weight:800} .weekStatValue.done{color:var(--ok)} .weekStatValue.remaining{color:var(--accent)} .punchesWeekNav{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;margin-bottom:10px} .punchesWeekNav .label{margin:0;flex:0 0 auto} .punchesWeekNav .weekPicker{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:1 1 auto;justify-content:flex-end} .punchesWeekNav .weekPicker .btn{min-height:36px;min-width:0;padding:6px 10px;font-size:13px;flex:0 0 auto} .punchesWeekNav .weekDisplay{padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:#0b1220;font-weight:700;font-size:13px;white-space:nowrap;text-align:center;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis} .hoursBig{font-size:30px;font-weight:900;margin:6px 0} .progress{height:10px;border-radius:999px;background:#0b1220;border:1px solid var(--line);overflow:hidden} .bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--ok));box-shadow:0 0 10px rgba(59,130,246,.45)} /* STRIKE COUNTER - PREMIUM EDITION */ .strike-counter-badge { background: linear-gradient(135deg, rgba(74, 158, 255, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%); border: 2px solid var(--accent); border-radius: 16px; padding: 14px 18px; position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(74, 158, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: pulse-glow-premium 3s ease-in-out infinite; } @keyframes pulse-glow-premium { 0%, 100% { box-shadow: 0 8px 25px rgba(74, 158, 255, 0.4), 0 0 30px rgba(74, 158, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); border-color: var(--accent); } 50% { box-shadow: 0 12px 35px rgba(16, 185, 129, 0.5), 0 0 50px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: var(--success); } } .strike-counter-badge::before { content: ''; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shimmer-sweep 4s infinite; } @keyframes shimmer-sweep { 0% { left: -150%; } 100% { left: 150%; } } .strike-counter-badge .label { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); display: block; margin-bottom: 6px; font-weight: 700; } .strike-counter-badge .duration { font-size: 1.5rem; font-weight: 900; background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .weekly-counter-badge { padding: 12px 14px; animation-duration: 4.5s; } .weekly-counter-badge::before { opacity: 0.65; } .bigbtn{width:100%;margin-top:14px;padding:16px 14px;border-radius:16px;border:0;background:var(--accent);font-size:18px;font-weight:900;cursor:pointer} .btn-clock-in{background:var(--ok);box-shadow:0 10px 22px rgba(34,197,94,.35)} .btn-clock-out{background:var(--danger);box-shadow:0 10px 22px rgba(239,68,68,.35)} .btn-clock-cooldown{background:#2a3344;color:#667788;box-shadow:none;cursor:not-allowed;opacity:.6} .section{margin-top:16px} .sectionTitle{font-weight:800;margin-bottom:8px} .onShiftText{color:var(--ok);font-weight:900;text-shadow:0 0 6px rgba(34,197,94,.25),0 0 12px rgba(34,197,94,.18)} #adminTab_userpunches .pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.5px;min-width:44px} #adminTab_userpunches .pill-in{background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.55);color:#bbf7d0;text-shadow:0 0 10px rgba(34,197,94,.45)} #adminTab_userpunches .pill-out{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.55);color:#fecaca;text-shadow:0 0 10px rgba(239,68,68,.45)} #adminTab_userpunches button[data-action="edit"]{background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.6);color:#ffedd5;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} #adminTab_userpunches button[data-action="delete"]{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.6);color:#fecaca;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} #adminTab_userpunches button[data-action="edit"]:hover{background:rgba(245,158,11,.26)} #adminTab_userpunches button[data-action="delete"]:hover{background:rgba(239,68,68,.26)} #adminTab_userpunches .metricsRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px} #adminTab_userpunches .metricCard{border:1px solid var(--line);border-radius:14px;background:rgba(11,18,32,.6);padding:12px 14px;box-shadow:0 10px 24px rgba(7,10,15,.25),inset 0 1px 0 rgba(255,255,255,.05)} #adminTab_userpunches .metricLabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800} #adminTab_userpunches .metricValue{font-size:22px;font-weight:900;margin-top:6px} #adminTab_userpunches .metricHint{font-size:11px;color:var(--muted);margin-top:4px} #adminTab_userpunches .metricHint.metric-warning{color:#fdba74} #adminTab_userpunches .metricValue.metric-good{color:#bbf7d0} #adminTab_userpunches .metricValue.metric-warn{color:#fdba74} #adminTab_userpunches .metricValue.metric-bad{color:#fecaca} #adminTab_userpunches .weekPicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #adminTab_userpunches .weekDisplay{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#0b1220;font-weight:700} #adminTab_attention .attentionControls{display:flex;align-items:center;justify-content:space-between;gap:12px} #adminTab_attention .attentionControls .weekPicker{display:flex;align-items:center;gap:8px} #adminTab_attention .attentionControls .label{margin:0} #adminTab_attention .attentionEmpty{text-align:center} #adminTab_exports .exportsControls{display:flex;align-items:center;justify-content:space-between;gap:12px} #adminTab_exports .exportsControls .weekPicker{display:flex;align-items:center;gap:8px} #adminTab_exports .exportsControls .label{margin:0} #adminTab_exports .exportStatus{margin-top:10px;display:flex;flex-direction:column;gap:6px} #adminTab_exports .exportStatusChips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} #adminTab_exports .exportChip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(11,18,32,.6);font-size:12px;font-weight:700;color:var(--text);white-space:nowrap} #adminTab_exports .exportChipLabel{color:var(--muted);font-weight:700} #adminTab_exports .exportChipValue{color:var(--text)} #adminTab_exports .exportChip.ok{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12);color:#bbf7d0} #adminTab_exports .exportChip.warn{border-color:rgba(249,115,22,.45);background:rgba(249,115,22,.12);color:#fdba74} #adminTab_exports .exportChip.bad{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12);color:#fecaca} #adminTab_exports .exportStatusNote{font-size:12px} #adminTab_exports .exportStatusNote.hidden{display:none} #adminTab_exports .exportStatusNote.warn{color:#fdba74} #adminTab_exports .exportStatusNote.error{color:#fecaca;border:1px solid rgba(239,68,68,.5);background:rgba(239,68,68,.12);padding:6px 10px;border-radius:10px;display:inline-block} #adminTab_systemtools .systemToolsControls{display:flex;align-items:center;justify-content:space-between;gap:12px} #adminTab_systemtools .weekPicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #adminTab_systemtools .weekDisplay{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#0b1220;font-weight:700} #adminTab_systemtools .toolGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px} #adminTab_systemtools .toolCard{border:1px solid var(--line);border-radius:14px;background:rgba(11,18,32,.6);padding:12px 14px;box-shadow:0 10px 24px rgba(7,10,15,.25),inset 0 1px 0 rgba(255,255,255,.05);display:flex;flex-direction:column;gap:10px} #adminTab_systemtools .tools-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} #adminTab_systemtools .tools-tab{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(11,18,32,.7);color:var(--muted);font-weight:700;letter-spacing:.04em;cursor:pointer} #adminTab_systemtools .tools-tab.active{color:var(--text);border-color:rgba(59,130,246,.6);box-shadow:0 0 0 2px rgba(59,130,246,.15)} #adminTab_systemtools .tools-panel{margin-top:12px;display:none} #adminTab_systemtools .tools-panel.active{display:block} #adminTab_systemtools .tools-panel .toolCard{max-width:100%} #adminTab_administrators .toolCard{max-width:100%} #adminTab_systemtools .toolCard.disabled{opacity:.6} #adminTab_systemtools .toolHeader{display:flex;align-items:center;justify-content:space-between;gap:10px} #adminTab_systemtools .toolTitle{font-size:14px;font-weight:800} #adminTab_systemtools .toolHint{font-size:12px} #adminTab_systemtools .systemToolsOutput{margin-top:14px;display:grid;gap:8px} #adminTab_systemtools .systemToolsStatus.error{color:#fecaca;border:1px solid rgba(239,68,68,.5);background:rgba(239,68,68,.12);padding:6px 10px;border-radius:10px;display:inline-block} #adminTab_systemtools .systemToolsStatus.warn{color:#fdba74} #adminTab_systemtools .systemToolsDetails{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(11,18,32,.5)} #adminTab_systemtools .systemToolsDetails strong{color:var(--text)} #adminTab_systemtools .systemToolsDetails.error{color:#fecaca;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12)} #adminTab_systemtools .tableWrap{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:12px} #adminTab_systemtools .tableWrap .table{border:0} #addPunchModal input[type="datetime-local"]{color:var(--text);background:#0b1220} #addPunchModal input[type="datetime-local"]::placeholder{color:rgba(231,238,247,.7)} #addPunchModal input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.9} input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.9} #addPunchModal .modal-header::before, #addPunchModal .modal-header::after{content:none !important} .table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden} .table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px} .table th{background:rgba(11,18,32,.8);color:var(--muted);font-weight:700} .punch-in{color:#bbf7d0} .punch-out{color:#fecaca} .punchDate,.punchTime{display:none} .punchDateTime{display:inline} .actionButtons{display:flex;gap:8px;align-items:center} .actionButtons .btn-edit,.actionButtons .btn-delete{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;font-size:12px;font-weight:700;line-height:1;transition:transform .08s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease} .actionButtons .btn-edit{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.55);color:#fdba74} .actionButtons .btn-delete{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.55);color:#fecaca} .actionButtons .btn-edit:hover{background:rgba(249,115,22,.2);box-shadow:0 0 8px rgba(249,115,22,.25)} .actionButtons .btn-delete:hover{background:rgba(239,68,68,.22);box-shadow:0 0 10px rgba(239,68,68,.35)} .actionButtons .btn-edit:active,.actionButtons .btn-delete:active{transform:scale(.96)} .actionButtons .btn-edit:disabled,.actionButtons .btn-delete:disabled{opacity:.5;cursor:not-allowed} .log{background:#06090f;border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto;min-height:120px} .debug-console{display:none} .toast{margin-top:8px;padding:8px 12px;border-radius:10px;border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.12);color:#bbf7d0;font-size:12px;font-weight:700} .early-sunday-banner{margin:8px 0;padding:10px 14px;border-radius:10px;border:1px solid rgba(234,179,8,.45);background:rgba(234,179,8,.1);color:#fde68a;font-size:13px;line-height:1.4;text-align:center} .early-sunday-banner.hidden{display:none} /* Open-shift banner (worker home, above the clock button). Same geometry as .early-sunday-banner, red accent — this one is a record problem, not a status note. Tappable: whole card is the CTA. */ .open-shift-banner{margin:8px 0;padding:12px 14px;border-radius:10px;border:1px solid rgba(239,68,68,.5);background:rgba(239,68,68,.12);color:#fecaca;font-size:13px;line-height:1.45;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent} .open-shift-banner:active{background:rgba(239,68,68,.2)} .open-shift-banner.hidden{display:none} .open-shift-banner-title{font-weight:800;color:#fee2e2;margin-bottom:4px} .open-shift-banner-text{color:#fecaca} .open-shift-banner-note{margin-top:6px;font-size:12px;color:rgba(254,202,202,.7)} /* Under-goal banner (worker home, above My Week Progress). Amber, dismissible. */ .under-goal-banner{margin:8px 0;padding:10px 14px;border-radius:10px;border:1px solid rgba(234,179,8,.45);background:rgba(234,179,8,.1);color:#fde68a;font-size:13px;line-height:1.45;display:flex;align-items:flex-start;gap:10px;text-align:left} .under-goal-banner.hidden{display:none} .under-goal-banner-body{flex:1} .under-goal-banner-title{font-weight:800;color:#fef3c7;margin-bottom:2px} .under-goal-banner-dismiss{flex:none;background:none;border:none;color:rgba(253,230,138,.75);font-size:15px;line-height:1;padding:2px 4px;cursor:pointer} .under-goal-banner-dismiss:active{color:#fde68a} .torch-toast{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(7,10,15,.35);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s;z-index:1200;pointer-events:none} .torch-toast.is-visible{opacity:1;visibility:visible;transition:opacity .18s ease} .torch-toast-card{background:rgba(10,18,30,.95);border:1px solid rgba(59,130,246,.45);border-radius:18px;padding:26px 30px;min-width:280px;max-width:90vw;text-align:center;box-shadow:0 0 24px rgba(59,130,246,.35),0 0 48px rgba(59,130,246,.22)} .torch-toast-title{font-size:28px;font-weight:900;letter-spacing:.08em;color:#e7eef7} .torch-toast-time{margin-top:8px;font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--muted)} .modal{position:fixed;inset:0;background:rgba(4,8,14,.75);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000} .modal-card{width:100%;max-width:520px;background:rgba(16,24,38,.98);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.45)} .intake-card{max-width:440px} .intake-card .modal-body{gap:10px} .intake-card .modal-body .muted{margin-bottom:2px} .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .modal-title{font-size:18px;font-weight:800} .btn-close{background:transparent;border:0;color:var(--muted);font-size:22px;cursor:pointer;line-height:1} .modal-banner{border:1px solid rgba(249,115,22,.4);background:rgba(249,115,22,.12);border-radius:12px;padding:10px 12px;margin-bottom:12px} .banner-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fdba74;margin-bottom:4px} .banner-text{font-size:13px;color:var(--muted);line-height:1.4} .modal-body{display:grid;gap:10px} .field{display:grid;gap:6px} .toggle{display:flex;gap:10px} .toggle-option{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(11,18,32,.6);font-size:12px;font-weight:700;color:var(--text);cursor:pointer} .toggle-option input{accent-color:var(--accent)} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} .form-error{margin-top:4px;padding:8px 10px;border-radius:10px;border:1px solid rgba(239,68,68,.5);background:rgba(239,68,68,.12);color:#fecaca;font-size:12px;font-weight:700} @media (min-width:721px){ #addPunchModal{align-items:stretch;justify-content:flex-end} #addPunchModal .modal-card{max-width:520px;width:100%;height:calc(100% - 32px);margin:16px;border-radius:18px;overflow-y:auto} } .note-required{color:#fdba74;font-weight:700} .input-error{border-color:rgba(239,68,68,.6);box-shadow:0 0 0 2px rgba(239,68,68,.15)} @keyframes spin{to{transform:translateY(-50%) rotate(360deg)}} @keyframes fuseSpin{to{transform:rotate(360deg)}} @keyframes fuseFlicker{0%{opacity:.85;filter:drop-shadow(0 0 5px rgba(180,240,255,.28)) drop-shadow(0 0 12px rgba(120,200,255,.16))}100%{opacity:1;filter:drop-shadow(0 0 8px rgba(210,255,255,.35)) drop-shadow(0 0 16px rgba(120,200,255,.2))}} @keyframes headerFuseSpin{to{transform:rotate(360deg)}} @keyframes headerFuseFlicker{0%{opacity:.82}100%{opacity:.98}} @keyframes railOrbSpin{to{transform:rotate(360deg)}} @keyframes headerRailPulse{0%,100%{opacity:.85}50%{opacity:1}} @keyframes strikePulse{0%,100%{box-shadow:0 0 0 1px rgba(120,180,255,.22),0 0 18px rgba(120,200,255,.12),0 0 38px rgba(80,160,255,.08)}50%{box-shadow:0 0 0 1px rgba(180,230,255,.28),0 0 26px rgba(120,200,255,.18),0 0 54px rgba(80,160,255,.12)}} @media (prefers-reduced-motion: reduce){ .strike-badge-card::before{animation:none;opacity:.65} } @media (prefers-reduced-motion: reduce){ .strike-badge-card{animation:none} } @media (max-width:840px){.grid2{grid-template-columns:1fr}.statusRow{grid-template-columns:1fr}.identityRow{margin-top:12px}} .table td:last-child{text-align:left} @media (max-width:768px){ body{font-size:16px} .wrap{padding:0 12px} .card{padding:14px} .header-title{font-size:32px} .header-subtitle{font-size:12px} .workerName{font-size:20px} .pill{font-size:12px} .bigbtn{min-height:56px;font-size:18px} .btn{min-height:44px;padding:10px 12px} .btn-missed{min-height:52px;font-size:15px} .btn-shuttle{min-height:48px;font-size:14px} .actionButtons .btn-edit,.actionButtons .btn-delete{min-height:40px;min-width:64px;padding:8px 12px} .table th,.table td{font-size:14px;padding:10px} .clockRow .bigbtn{min-height:52px} .appHeader{padding:10px 14px;flex-wrap:wrap;gap:8px} .appTitle{font-size:17px} } @media (min-width:900px){ .wrap{max-width:1160px;margin:24px auto;padding:0 20px} .workerHeader{gap:8px 24px} .header-tile{width:clamp(140px,22vw,180px)} .strike-badge-card,.status-card{padding:10px 12px;border-width:2px} .strike-label,.status-label{font-size:10px;letter-spacing:.14em} .strike-day{font-size:20px} .status-card .pill{font-size:16px} .strike-badge-card,.status-card{max-width:290px} .status-card{width:100%;margin-top:0;min-height:84px} .btn-shuttle{width:100%;max-width:290px;min-height:44px;padding:8px 10px;box-shadow:0 6px 14px rgba(59,130,246,.18),inset 0 1px 0 rgba(255,255,255,.06)} .identityRow{border-top:1px solid rgba(34,49,70,.6);padding-top:16px;margin-top:12px} .clockRow{justify-content:center} .clockRow .bigbtn{flex:1 1 auto;max-width:72%} } @media (max-width:560px){ .app-title{ font-size:2.4rem; letter-spacing:.05em; } .header-subtitle{ margin-top:4px; opacity:.85; } /* BUTTONS — inherit ≤768px sizes, don't re-inflate */ .bigbtn{ min-height:56px; font-size:18px; } .btn{ min-height:44px; } /* TABLE STACKING */ .table thead{ display:none; } .table{ border:0; min-width:0; } .table, .table tbody{ display:block; width:100%; } .punchRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)} .punchRow td{border:0;padding:0} .punchRow .punchActions{margin-left:auto} .punchRow .btn-delete{min-height:36px;padding:6px 14px;font-size:13px} } @media (pointer: coarse){ .workerHeader{gap:12px} .btn-shuttle{min-height:48px} .punchRow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px} .punchDateTime{display:none} .punchDate,.punchTime{display:inline} .punchActions{display:flex !important;flex-direction:row !important;justify-content:flex-end !important;align-items:center !important;gap:8px !important;flex-wrap:wrap} #punchRows .btn-edit{display:none !important} .punchActions button{width:auto !important;min-width:70px !important;height:30px !important;padding:0 10px !important;border-radius:12px !important;font-size:12px !important;font-weight:700 !important;letter-spacing:.3px !important;box-shadow:none !important} .punchActions .btn-delete{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:rgba(252,165,165,.95)} } @media (max-width:420px){ body{font-size:16px} .header-title{font-size:26px} .strike-badge-card{padding:10px} .status-card{padding:8px 10px} .bigbtn{min-height:60px;font-size:19px} .btn-missed{min-height:52px;font-size:15px} .btn-shuttle{min-height:50px;font-size:14px} } @media (max-width:360px){ .actionButtons{flex-wrap:wrap} .actionButtons .btn-edit,.actionButtons .btn-delete{width:100%} } @media (pointer: coarse){ .btn{min-height:44px} .bigbtn{min-height:60px} .actionButtons .btn-edit,.actionButtons .btn-delete{min-height:40px} } .hidden { display: none !important; } @media (max-width:560px){ #login-shell{ padding:2px 0; align-items:flex-start; } #login-shell .login-wrap{ width:94vw; gap:12px; } #login-shell .brand-zone{ padding-top:4px; } #login-shell .stk-logo{ height:180px; margin-bottom:10px; } #login-shell .brand-divider{ display:none; } #login-shell .login-card{ padding:16px; } } @media (max-width:768px){ #cardApp{padding:16px} #tab_worker .strike-badge-card, #tab_worker .status-card{ margin-top:0; min-height:auto; padding:8px 10px; } #tab_worker .strike-label, #tab_worker .status-label{ font-size:9px; letter-spacing:.1em; margin-bottom:4px; } #tab_worker .strike-day{font-size:16px;margin-bottom:2px;white-space:nowrap} #tab_worker .strike-hours{font-size:10px;white-space:nowrap} #tab_worker .status-card .pill{font-size:13px;white-space:nowrap} #tab_worker .header-title-row{margin-bottom:2px} #tab_worker .header-subtitle{margin-top:2px;font-size:10px;text-align:center} } @media (max-width:420px){ #tab_worker .workerHeader{gap:6px} #tab_worker .strike-badge-card, #tab_worker .status-card{padding:7px 8px} #tab_worker .strike-day{font-size:15px} #tab_worker .strike-hours{font-size:9px} #tab_worker .status-card .pill{font-size:12px} } /* --- Worker Header Layout --- */ #tab_worker .workerHeader{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 12px 8px; } /* Top row: strike (left) + status (right) — same size */ .header-top-row{ display:flex; justify-content:space-between; align-items:stretch; width:100%; gap:12px; } .header-badge-card{ flex:1 1 0; min-width:0; max-width:200px; min-height:auto; padding:10px 12px; box-sizing:border-box; } .status-card.header-badge-card{ min-height:auto; margin-top:0; } /* Center: logo + subtitle */ #tab_worker .header-center{ display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; width:100%; } #tab_worker .header-center img.stk-logo, #tab_worker .header-title-row .stk-logo{ height:190px; width:auto; max-width:none; object-fit:contain; } /* Bottom row: Who's ON / Refresh / My Shuttle — equal, matched */ .header-action-row{ display:flex; justify-content:center; gap:8px; width:100%; } .header-action-btn{ flex:1 1 0; min-width:0; min-height:48px; padding:10px 8px; border-radius:10px; border:1px solid rgba(59,130,246,.6); background:rgba(59,130,246,.14); color:#dbeafe; font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-sizing:border-box; box-shadow:0 8px 18px rgba(59,130,246,.2),inset 0 1px 0 rgba(255,255,255,.08); } .header-action-btn:active{transform:translateY(1px)} @media (max-width:560px){ #tab_worker .header-center img.stk-logo, #tab_worker .header-title-row .stk-logo{ height:160px; } .header-action-btn{min-height:44px;font-size:12px;padding:8px 6px} } @media (max-width:420px){ #tab_worker .header-center img.stk-logo, #tab_worker .header-title-row .stk-logo{ height:130px; } .header-badge-card{padding:8px} .header-action-btn{min-height:42px;font-size:11px} } /* ── Who's ON slide-up panel ── */ .whos-on-overlay{ position:fixed;inset:0;z-index:900; background:rgba(0,0,0,.55); visibility:hidden;opacity:0;pointer-events:none; transition:opacity 200ms ease,visibility 0s 200ms; } .whos-on-overlay.open{ visibility:visible;opacity:1;pointer-events:auto; transition:opacity 200ms ease,visibility 0s 0s; } .whos-on-panel{ position:fixed;left:0;right:0;bottom:0;z-index:910; max-height:70vh; background:rgba(16,24,38,.97); border:1px solid var(--line); border-bottom:none; border-radius:18px 18px 0 0; box-shadow:0 -8px 32px rgba(0,0,0,.55),0 -2px 10px rgba(59,130,246,.1); backdrop-filter:blur(12px); display:flex;flex-direction:column; visibility:hidden; transform:translateY(100%); transition:transform 200ms ease,visibility 0s 200ms; pointer-events:none; } .whos-on-panel.open{ visibility:visible; transform:translateY(0); pointer-events:auto; transition:transform 200ms ease,visibility 0s 0s; } .whos-on-header{ display:flex;align-items:center;justify-content:space-between; padding:14px 18px 10px;border-bottom:1px solid var(--line); flex-shrink:0; } .whos-on-title{ font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--text); } .whos-on-close{ width:32px;height:32px;border-radius:50%;border:1px solid var(--line); background:rgba(11,18,32,.8);color:var(--muted);font-size:18px; display:flex;align-items:center;justify-content:center;cursor:pointer; line-height:1; } .whos-on-close:hover{background:rgba(239,68,68,.2);color:#fecaca;border-color:rgba(239,68,68,.45)} .whos-on-body{ overflow-y:auto;padding:10px 18px 18px;flex:1 1 auto; } .whos-on-loading,.whos-on-empty{ text-align:center;color:var(--muted);padding:28px 0;font-size:14px; } .whos-on-card{ display:flex;align-items:center;justify-content:space-between; padding:10px 12px;border-radius:10px; background:rgba(11,18,32,.5);border:1px solid rgba(34,52,78,.45); margin-bottom:6px; } .whos-on-card:last-child{margin-bottom:0} .whos-on-info{display:flex;flex-direction:column;gap:2px;min-width:0} .whos-on-name{font-size:14px;font-weight:700;color:var(--text)} .whos-on-site{font-size:11px;color:var(--muted);letter-spacing:.03em} .whos-on-time{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0} /* ── GPS Location Confidence Badges ── */ .gps-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap} .gps-onsite{background:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(34,197,94,.35)} .gps-nearby{background:rgba(234,179,8,.15);color:#facc15;border:1px solid rgba(234,179,8,.35)} .gps-offsite{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.35)} .gps-unknown{background:rgba(147,164,181,.12);color:var(--muted);border:1px solid rgba(147,164,181,.25)} .gps-low-accuracy{background:rgba(249,115,22,.15);color:#fb923c;border:1px solid rgba(249,115,22,.35)} /* ── On-shift count badge ── */ .on-shift-count{font-size:14px;font-weight:700;color:var(--ok);margin-left:4px} /* ── Punch Maps filter bar ── */ .punchmap-filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px} .punchmap-field{display:flex;flex-direction:column;gap:4px} .punchmap-field .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .punchmap-field select,.punchmap-field input[type="text"],.punchmap-field input[type="datetime-local"]{height:38px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:#0b1220;color:var(--text);font-size:13px} .punchmap-f-site{flex:0 0 130px} .punchmap-f-worker{flex:1 1 200px;min-width:160px} .punchmap-f-week{flex:0 1 170px;min-width:140px} .punchmap-f-date{flex:0 1 155px;min-width:130px} .punchmap-f-btn{flex:0 0 auto;align-self:flex-end} .punchmap-f-btn .btn{height:38px;padding:0 18px;font-size:13px;white-space:nowrap} /* ── GPS Accuracy Dashboard ──────────────────────────────────── */ .gps-dash-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:8px} .gps-dash-field{display:flex;flex-direction:column;gap:2px} .gps-dash-field .label{font-size:11px;color:var(--muted);font-weight:500} .gps-dash-field input,.gps-dash-field select{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card-bg);color:var(--text);font-size:13px;min-width:120px} .gps-dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px} .gps-dash-stat{padding:14px 16px;border-radius:10px;background:var(--card-bg);border:1px solid var(--line)} .gps-dash-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:4px;font-weight:600} .gps-dash-stat-val{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums} .gps-dash-stat-sub{font-size:11px;color:var(--muted);margin-top:2px} .gps-dash-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .gps-dash-chart-card{background:var(--card-bg);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px} .gps-dash-chart-wide{grid-column:span 1} .gps-dash-chart-narrow{grid-column:span 1} .gps-dash-chart-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin-bottom:10px} /* Heatmap */ .gps-dash-hm-subtitle{font-size:10px;color:var(--muted);margin-bottom:8px} .gps-dash-hm-hour-axis{display:flex;padding-left:110px;gap:3px;margin-bottom:4px} .gps-dash-hm-hour-axis span{flex:1;font-size:9px;color:var(--muted);text-align:center;min-width:20px} .gps-dash-hm-row{display:flex;gap:3px;margin-bottom:3px;align-items:center} .gps-dash-hm-lbl{width:105px;font-size:10px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0} .gps-dash-hm-cell{flex:1;height:30px;min-width:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,.7);cursor:pointer;transition:transform .1s;position:relative} .gps-dash-hm-cell:hover{transform:scale(1.1);z-index:2} .gps-dash-hm-cell.has-offsite{box-shadow:inset 0 0 0 1.5px rgba(245,60,92,.6)} .gps-dash-hm-empty{flex:1;height:30px;min-width:20px;background:rgba(255,255,255,.02);border-radius:4px} /* Tooltip */ .gps-dash-tt{position:fixed;background:var(--card-bg);border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:11px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:9999;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.4)} .gps-dash-tt.show{opacity:1} .gps-dash-tt-title{font-size:10px;font-weight:700;color:var(--accent);margin-bottom:6px;letter-spacing:1px;text-transform:uppercase} .gps-dash-tt-row{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px;margin-bottom:2px} .gps-dash-tt-row span:last-child{color:var(--text);font-weight:500} .gps-dash-tt-sep{height:1px;background:var(--line);margin:5px 0} /* Table sub-tabs */ .gps-dash-table-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:10px;align-items:center} .gps-dash-ttab{background:none;border:none;color:var(--muted);font-size:10px;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;letter-spacing:1px;text-transform:uppercase;font-weight:600;transition:all .15s;white-space:nowrap} .gps-dash-ttab.active{color:var(--accent);border-bottom-color:var(--accent)} .gps-dash-ttab:hover:not(.active){color:var(--text)} .gps-dash-table-pane{max-height:500px;overflow-y:auto} /* GPS data table */ .gps-dash-tbl{width:100%;border-collapse:collapse;font-size:12px} .gps-dash-tbl th{text-align:left;padding:6px 10px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;font-weight:600} .gps-dash-tbl td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle} .gps-dash-tbl tr:hover td{background:rgba(255,255,255,.02)} /* GPS badges */ .gps-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.5px} .gps-badge-ON_SITE{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)} .gps-badge-NEARBY{background:rgba(59,130,246,.12);color:#3b82f6;border:1px solid rgba(59,130,246,.3)} .gps-badge-OFFSITE{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.3)} .gps-badge-LOW_ACCURACY{background:rgba(234,179,8,.12);color:#eab308;border:1px solid rgba(234,179,8,.3)} .gps-badge-UNAVAILABLE{background:rgba(107,114,128,.12);color:#6b7280;border:1px solid rgba(107,114,128,.3)} .gps-badge-ADMIN_EDIT{background:rgba(139,92,246,.12);color:#8b5cf6;border:1px solid rgba(139,92,246,.3)} /* Site rate bars */ .gps-dash-site-rate{margin-bottom:16px} .gps-dash-site-rate-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px} .gps-dash-site-rate-name{font-size:12px;font-weight:700;color:var(--text)} .gps-dash-site-rate-info{font-size:10px;color:var(--muted)} .gps-dash-site-rate-bar{height:10px;background:rgba(255,255,255,.04);border-radius:5px;overflow:hidden;display:flex} .gps-dash-site-rate-bar div{height:100%} .gps-dash-site-rate-legend{display:flex;gap:12px;margin-top:3px;font-size:9px;color:var(--muted)} /* Distance meter */ .gps-dash-dist{display:flex;align-items:center;gap:5px;font-size:10px} .gps-dash-dist-bar{height:3px;border-radius:2px;background:#ef4444;min-width:3px;max-width:100px} @media(max-width:900px){ .gps-dash-charts-row{grid-template-columns:1fr} .gps-dash-stats{grid-template-columns:repeat(3,1fr)} .gps-dash-filters{flex-direction:column} } /* ── Lunch button spinner ── */ .spinner{width:14px;height:14px;border:2px solid #ccc;border-top-color:#22c55e;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;margin-right:6px;vertical-align:middle} @keyframes spin{to{transform:rotate(360deg)}} /* ── Edit requests table mobile scroll ── */ @media (max-width: 768px) { .edit-requests-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .edit-requests-table th, .edit-requests-table td { white-space: nowrap; } } /* ── GPS sub-panel show/hide ── */ .gps-panel { display: none; } .gps-panel.active { display: block; } /* ── Admin tables → stacked cards on mobile ────────────────────────────── Scoped to .adminCardTable (Active Workers, Worker Lookup punches, Edit Requests) so the worker-side .punchRow list and every other .table keep their current behaviour untouched. This block MUST stay at the end of the file. The global `.table thead` /`.table tbody` rules in the <=560px block and the `.edit-requests-table` rules in the <=768px block have equal specificity to these, so source order is the only thing that decides the winner. Above 720px nothing here applies and the tables render as they always have. */ @media (max-width:720px){ .adminCardTable{display:block;min-width:0;border:0;background:transparent;overflow-x:visible} .adminCardTable thead{display:none} .adminCardTable tbody{display:block;width:100%} /* One card per row. */ .adminCardTable tr{ display:flex;flex-wrap:wrap;align-items:center;gap:0 10px; border:1px solid var(--line);border-radius:12px; background:rgba(11,18,32,.55); padding:12px 14px;margin-bottom:10px; box-shadow:0 6px 16px rgba(7,10,15,.28); } /* Default cell: its own full-width line inside the card. white-space is forced because two of these tables set nowrap via an inline style or the .edit-requests-table rule, and either would reintroduce the overflow. */ .adminCardTable td{ flex:1 1 100%;min-width:0;display:block;border:0; padding:5px 0;font-size:14px;text-align:left; overflow-wrap:anywhere;white-space:normal !important; } /* Labelled cells: small muted label on the left, value on the right. */ .adminCardTable td[data-label]{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline} .adminCardTable td[data-label]::before{ content:attr(data-label);flex:0 0 88px; color:var(--muted);font-size:11px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;line-height:1.6; } .adminCardTable td[data-label] > *{min-width:0;max-width:100%} /* Card header: identity on the left, status badge pushed to the right, sharing one line above a divider. */ .adminCardTable td.adminCardTitle{ flex:1 1 auto;font-size:16px;font-weight:800;color:var(--text);padding:0 0 8px; } .adminCardTable td.adminCardBadge{flex:0 0 auto;margin-left:auto;padding:0 0 8px} .adminCardTable td.adminCardTitle, .adminCardTable td.adminCardBadge{border-bottom:1px solid var(--line);margin-bottom:6px} /* Action row: full-width tap targets along the bottom of the card. */ .adminCardTable td.adminCardActions{ display:flex;flex-wrap:wrap;gap:8px; padding:10px 0 0;margin-top:6px;border-top:1px solid var(--line); } .adminCardTable td.adminCardActions .btn{flex:1 1 130px;min-height:44px} /* Low-value long values (site UUIDs, long emails) clip instead of wrapping across three lines. */ .adminCardTable .adminCardEllipsis{ display:inline-block;flex:1 1 auto;min-width:0;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom; } /* Empty states ("No one on shift", "Load a user to view punches"). */ .adminCardTable td[colspan]{flex:1 1 100%;display:block;padding:6px 0} } /* ── Needs Attention feed (Build CM) ───────────────────────────────────── Replaces the CF-era rules for the old pane. Removed with their markup: • the .adminCardTable td.adminCardTitle > div stacked-identity rules — all five tables that produced that shape are gone, and the four remaining .adminCardTitle cells in the app hold a span or bare text, so the selectors matched nothing. • .naFilterBar / .naFilterControls — both header rows deleted. This pane has no tables at all, so it needs no card-table mode: the same stacked layout serves 390px and desktop, just wider. */ .afTopBar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} /* Pinned, always visible, never collapsible. */ .afDisclaimer{ border:1px solid rgba(234,179,8,.35);background:rgba(234,179,8,.08); border-radius:10px;padding:12px 14px;margin-bottom:16px; font-size:13px;line-height:1.5;color:var(--text); } .afList{display:flex;flex-direction:column;gap:12px} .afCard{border:1px solid var(--line);background:rgba(11,18,32,.55);border-radius:12px;padding:14px} .afCardHead{display:flex;align-items:flex-start;gap:10px} /* Severity as a colored dot with an accessible name — not an emoji, which renders differently on every phone and reads out as nothing useful. */ .afDot{flex:0 0 auto;width:12px;height:12px;border-radius:999px;margin-top:5px} .afDot.review{background:#eab308;box-shadow:0 0 0 3px rgba(234,179,8,.18)} .afDot.noted{background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.15)} .afSentence{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.55;color:var(--text)} .afActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .afActions .btn{min-height:44px} .afEmpty{color:var(--muted);font-size:14px;line-height:1.5;padding:18px 2px} .afRetryBtn{margin-left:8px;min-height:44px} /* Inline confirm for "Looks fine" — stays on the card, no modal. */ .afConfirm{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px} .afConfirm input.afReason{ width:100%;min-height:44px;padding:8px 10px;font-size:14px; border:1px solid var(--line);border-radius:8px; background:rgba(11,18,32,.85);color:var(--text); } .afConfirmRow{display:flex;gap:8px;flex-wrap:wrap} .afConfirmRow .btn{min-height:44px} .afConfirmErr{color:#fca5a5;font-size:12px;line-height:1.4} /* Evidence modal — stacked rows, scrolls inside itself. */ .afEvidenceCard{max-width:560px;width:94vw;display:flex;flex-direction:column;max-height:88vh} .afEvidenceCard .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch} .afEvIntro{font-size:13px;line-height:1.5;color:var(--text);padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--line)} .afEvRow{border-bottom:1px solid var(--line);padding:10px 0} .afEvRow:last-child{border-bottom:none} .afEvRow.isPair{background:rgba(234,179,8,.07);border-radius:8px;padding:10px 8px} .afEvWhen{font-weight:700;font-size:13px;color:var(--text)} .afEvMeta{color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px;overflow-wrap:anywhere} .afEvDisclaimer{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-style:italic;line-height:1.5} @media (max-width:560px){ .afTopBar .btn{min-height:44px} .afActions .btn{flex:1 1 auto} .afConfirmRow .btn{flex:1 1 auto} } /* ── Admin header Help link ── An wearing .btn, so it needs the inline-flex/no-underline treatment the Call/Text links already get. Compact because the header is tight on phones. */ .appHeaderHelp{display:inline-flex;align-items:center;text-decoration:none;padding:10px 12px;white-space:nowrap} /* ── Magic-link sign-in block on the admin login card ── */ .magicLinkBlock{margin-top:12px} .magicLinkDivider{display:flex;align-items:center;gap:10px;margin:4px 0 10px;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .magicLinkDivider::before,.magicLinkDivider::after{content:"";flex:1 1 auto;height:1px;background:var(--line)} .magicLinkBtn{width:100%;min-height:44px;font-weight:700} #adminMagicLinkHint{margin-top:8px;line-height:1.4} /* ── System Tools / Administrators mobile pass ─────────────────────────── The 8 sub-tab pills wrap to ~4 stacked rows at 390px and push the panel content below the fold. Match the main .adminTabs strip instead: one row, horizontally scrollable, scrollbar hidden. */ @media (max-width:720px){ #adminTab_systemtools .systemToolsControls{flex-wrap:wrap} #adminTab_systemtools .tools-tabs{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-bottom:6px; } #adminTab_systemtools .tools-tabs::-webkit-scrollbar{height:0} #adminTab_systemtools .tools-tab{min-height:44px;white-space:nowrap;font-size:12px;padding:6px 12px} } /* Form controls in the two tool panes become full-width 44px tap targets, matching the CF filter-bar treatment. The inline width/flex on the search and PIN inputs is what the !important declarations are overriding. */ @media (max-width:560px){ #adminTab_systemtools .toolCard input, #adminTab_systemtools .toolCard select, #adminTab_administrators .toolCard input, #adminTab_administrators .toolCard select{ width:100% !important;min-width:0 !important;flex:1 1 100% !important;min-height:44px; } #adminTab_systemtools .toolCard .btn, #adminTab_administrators .toolCard .btn{min-height:44px} #adminTab_systemtools .tools-panel .row, #adminTab_administrators .row{flex-wrap:wrap} }