/* Styled after the Buddy Punch help-doc screenshots: Inter-style sans, white cards on light gray,
   blue primary, green Punch In, red Punch Out, light-gray table headers, pill badges. No BP logo/name. */
:root{--blue:#007ec3;--blue-d:#00699f;--navy:#00346e;--green:#00b67a;--green-d:#009c69;--red:#e5484d;--red-d:#cc3a3f;--ink:#111827;--muted:#6b7280;
--line:#e5e7eb;--bg:#f5f6f8;--head:#f9fafb;--r:12px}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;font-size:15px;-webkit-text-size-adjust:100%}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:-.2px}
.brand{flex-direction:column;gap:4px}.brand .logo{height:64px;width:auto;display:block}.brandsub{font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--navy)}
.center{max-width:560px;margin:0 auto;padding:28px 18px;display:flex;flex-direction:column;align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(16,24,40,.04);padding:28px 32px;width:100%}
.card h2{margin:0 0 6px;font-size:18px}.card h3{margin:0 0 12px;font-size:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;padding:10px 18px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;color:#fff;background:var(--blue)}
.btn:hover{background:var(--blue-d);text-decoration:none}.btn.block{width:100%;padding:14px}
.btn.green{background:var(--green)}.btn.green:hover{background:var(--green-d)}
.btn.red{background:var(--red)}.btn.red:hover{background:var(--red-d)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{background:var(--head)}
.btn.sm{padding:6px 12px;font-size:13px}.btn.link{background:none;color:var(--ink);font-weight:500}
input,select,textarea{font:inherit;width:100%;padding:11px 14px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(11,118,218,.25);border-color:var(--blue)}
label{font-size:13px;font-weight:600;color:#374151;display:block;margin:12px 0 6px}
.err{background:#fef2f2;color:#b42318;border:1px solid #fecdca;padding:10px 14px;border-radius:8px;margin:10px 0}
.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6;padding:10px 14px;border-radius:8px;margin:10px 0}
.info{background:#eff6ff;border:1px solid #d6e6fb;color:#1f2937;padding:12px 14px;border-radius:8px;margin:10px 0}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.pill.g{background:#dcfae6;color:#067647}.pill.r{background:#fee4e2;color:#b42318}.pill.y{background:#fef0c7;color:#93370d}.pill.b{background:#e0efff;color:#0b5cad}
.muted{color:var(--muted)}.right{text-align:right}.row{display:flex;gap:10px;align-items:center}.grow{flex:1}
.welcome{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.avatar{width:58px;height:58px;border-radius:6px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6b7280;font-size:22px}
.welcome h1{font-size:26px;margin:0}
/* PIN pad (kiosk + phone) */
.dots{display:flex;gap:16px;justify-content:center;margin:18px 0 22px}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid #9ca3af}.dot.on{background:var(--ink);border-color:var(--ink)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:360px;margin:0 auto}
.key{height:76px;border-radius:50%;width:76px;justify-self:center;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:30px;font-weight:500;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.key:active{background:#eef2f7}.key.fn{border:none;box-shadow:none;font-size:15px;color:var(--muted)}
.clock{font-size:44px;font-weight:700;letter-spacing:-1px;text-align:center}.date{color:var(--muted);text-align:center;margin-bottom:6px}
.kiosk .center{max-width:640px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.tile{border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center;background:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:16px}
.tile.sel{border-color:var(--blue);background:#eff6ff}
/* admin top nav like BP dashboard */
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;border-bottom:1px solid var(--line);background:#fff}
.nav{display:flex;gap:26px;padding:0 28px;border-bottom:1px solid var(--line);background:#fff;overflow-x:auto}
.nav a{color:var(--ink);font-weight:500;padding:14px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a.on{border-color:var(--ink);font-weight:600}.nav a:hover{text-decoration:none;color:var(--blue)}
.page{background:var(--bg);min-height:calc(100vh - 110px);padding:24px 28px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px;overflow:hidden}
.panel>.ph{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel>.ph h3{margin:0;font-size:16px}
table{border-collapse:collapse;width:100%}th{background:var(--head);text-align:left;font-size:13px;font-weight:600;color:#374151;padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.small{font-size:12px}
.ot{color:#b42318;font-weight:700}.tot td{font-weight:700;background:var(--head)}
.pay{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.payline{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.payline:last-child{border-bottom:none}.payline .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-right:10px}
.copy{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 10px;cursor:pointer;font-family:inherit;font-size:13px}
.copy.done{background:#dcfae6;border-color:#abefc6}
.weekbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.phone .center{padding:18px 14px}.phone .card{padding:20px}
.hdr{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:14px}
@media (max-width:600px){.page{padding:14px}.top,.nav{padding-left:14px;padding-right:14px}td,th{padding:8px}}
/* ---- admin app shell modeled on BP mobile Time Cards ---- */
body.adm{background:#f5f5f5;padding-bottom:72px}
.apphdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #eee;padding:10px 8px;height:58px}
.apphdr h1{font-size:19px;font-weight:600;margin:0;color:var(--navy)}
.iconbtn{width:38px;height:38px;border:1px solid #d1d5db;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.apppage{max-width:1100px;margin:0 auto}
.pp{display:flex;align-items:center;gap:10px;background:#fff;padding:14px 11px;border-bottom:1px solid #eee}
.pp b{font-size:16px}.pp select{width:auto;border:none;font-size:16px;padding:4px 22px 4px 4px;background:transparent;-webkit-appearance:none;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,#9ca3af 50%),linear-gradient(135deg,#9ca3af 50%,transparent 50%);background-position:right 8px center,right 3px center;background-size:5px 5px;background-repeat:no-repeat}
.elist a{display:flex;align-items:center;gap:16px;padding:10px 11px;min-height:58px;background:#fff;color:var(--blue);font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid #f0f0f0}
.elist a:nth-child(even){background:#f5f5f5}.elist a .grow{flex:1}
.elist .meta{color:#6b7280;font-size:13px;font-weight:400;margin-right:6px}
.av{width:38px;height:38px;border-radius:50%;background:#e5e5e5;display:flex;align-items:center;justify-content:center;flex:none}
.chevr{width:10px;height:10px;border-right:2.5px solid #111;border-top:2.5px solid #111;transform:rotate(45deg);margin-right:8px}
.tabbar{position:fixed;bottom:0;left:0;right:0;height:64px;background:#fff;border-top:1px solid #e5e7eb;display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:#111827;text-decoration:none}
.tabbar a.on{color:var(--blue)}
.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(325px,78vw);background:#ececee;z-index:50;transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto}
body.menu-open .drawer{transform:none}body.menu-open .scrim{opacity:1;pointer-events:auto}
.dbrand{background:#fff;padding:22px 16px 18px}.dbrand .brand{align-items:flex-start}.dbrand .brand .logo{height:48px}.dbrand .brandsub{font-size:10px;padding-left:4px}
.dhead,.dtop{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;font:inherit;font-size:16px;color:#111827;padding:14px 11px;cursor:pointer;text-align:left;text-decoration:none}
.dtop:hover,.dhead:hover{text-decoration:none;background:#e3e3e6}
.chev{font-size:18px;transition:transform .15s}.dsec.closed .chev{transform:rotate(180deg)}.dsec.closed .dsub{display:none}
.dsub{margin-left:22px;border-left:1px solid #d4d4d8}.dsub a{display:block;padding:14px 26px;color:#111827;font-size:16px}
.section{padding:16px}
@media(min-width:900px){.apppage .section{padding:22px 28px}}
.kiosk .brand .logo{height:88px}.apphdr{box-shadow:0 1px 0 rgba(0,52,110,.04)}.av{background:linear-gradient(135deg,#d7e6f3,#c3d7ea)}.dot.on{background:var(--navy);border-color:var(--navy)}.clock{color:var(--navy)}
/* ---- Time Card (per person) modeled on BP mobile ---- */
.backbtn{display:flex;align-items:center;gap:2px;height:38px;padding:0 10px 0 6px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#111827;font-size:17px;text-decoration:none}
.backbtn:hover{text-decoration:none;background:#f9fafb}
a.iconbtn{text-decoration:none}
.tc{background:#f5f5f5}
.tc .pp{background:#f5f5f5;border-bottom:1px solid #e5e5e5}
.tcstat{padding:12px 11px 16px;border-bottom:1px solid #e5e5e5}.tcstat .row{margin-bottom:12px;font-size:15px}
.spill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:14px;border:1px solid}
.spill.draft{background:#eaf4fd;border-color:#b9dbf6;color:var(--blue)}.spill.submitted{background:#fef6e0;border-color:#f7d98b;color:#93370d}.spill.approved{background:#dcfae6;border-color:#abefc6;color:#067647}
.tcbtn{font-size:17px;font-weight:500;padding:14px;border-radius:6px}.btn[disabled]{opacity:.75;cursor:default}
.tcsum{padding:12px 11px;border-bottom:1px solid #e5e5e5}
.av.sm{width:28px;height:28px}.tcname{font-size:22px;font-weight:500}
.srow{display:flex;justify-content:space-between;padding:2px 0;font-size:15px}.srow.b span:first-child{font-weight:700}.srow.i span:first-child{padding-left:12px}
.srow .g{color:#6b7280;font-variant-numeric:tabular-nums}.srow.b .g{font-weight:700}
.dayhdr{display:flex;justify-content:space-between;background:#e6e6e6;padding:13px 11px;font-weight:700;font-size:15px}
.prow{display:flex;align-items:center;gap:10px;padding:12px 11px;border-bottom:1px solid #e5e5e5;color:#111827;text-decoration:none;background:#f5f5f5}
.prow:hover{text-decoration:none;background:#efefef}
.pinfo{flex:1;display:flex;justify-content:flex-end}
.noteico{width:24px;height:24px;border:2px solid #111;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 13px Georgia,serif}
.pmain{width:min(185px,48%);display:flex;flex-direction:column;gap:4px;font-size:15px}
.preg{display:flex;justify-content:space-between}.preg b{font-variant-numeric:tabular-nums}.preg.lunch{color:#6b7280;font-size:13px}.preg.lunch b{font-weight:600}
@media(min-width:900px){.tc{max-width:720px;margin:0 auto;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;min-height:calc(100vh - 122px)}}
/* ---- tip lines ---- */
.tipbox{margin-top:22px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fafbfc}
.tiphead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.tiphead h3{margin:0}
.tipline{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eef0f2;font-size:15px}.tipline b{font-variant-numeric:tabular-nums}
.tipline.rejected span.grow{text-decoration:line-through;color:#9ca3af}
.tipadd{display:flex;gap:8px;align-items:center;margin-top:10px}.tipplus{font-size:22px;color:var(--blue);width:18px;text-align:center}
.daytips{background:#fff;border-bottom:1px solid #e5e5e5}
.daytips summary{display:flex;align-items:center;gap:10px;padding:11px;cursor:pointer;list-style:none;font-size:15px}.daytips summary::-webkit-details-marker{display:none}
.tipico{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.chevd{width:8px;height:8px;border-right:2.2px solid #111;border-bottom:2.2px solid #111;transform:rotate(45deg);margin:0 8px 4px 4px;transition:transform .15s}
.daytips[open] .chevd{transform:rotate(-135deg);margin-bottom:-4px}
.daytips .tipline{padding:8px 11px 8px 43px;background:#fafafa}.tipamt{max-width:92px;padding:6px 8px}
.tipform{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}.tipjob{flex:1;min-width:120px;font-weight:500}
.tipusd{display:inline-flex;align-items:center;gap:3px;color:#6b7280}.tipamt{width:90px}.tipacts{display:flex;gap:6px;align-items:center;margin-left:auto}
@media(max-width:600px){.tipacts{width:100%;justify-content:flex-end}.daytips .tipline{padding-left:16px}}
.ownerlink{color:var(--muted);font-size:14px;border:1px solid var(--line);border-radius:999px;padding:7px 16px;display:inline-block}.ownerlink:hover{color:var(--navy);text-decoration:none;border-color:#cbd5e1}
/* Fallback for Safari < 14.1 (iPadOS 12-14.0): no flexbox gap. html.nofg is set by a feature test. */
.nofg .row>*+*,.nofg .welcome>*+*,.nofg .weekbar>*+*,.nofg .pp>*+*,.nofg .elist a>*+*,.nofg .backbtn>*+*,.nofg .prow>*+*,.nofg .tipline>*+*,.nofg .tipadd>*+*,.nofg .daytips summary>*+*,.nofg .tipusd>*+*,.nofg .tipacts>*+*,.nofg .brand:not(.x)>*+*{margin-left:10px}
.nofg .brand>*+*{margin-left:0;margin-top:4px}.nofg .dots>*+*{margin-left:16px}.nofg .nav>*+*{margin-left:26px}
.nofg .tabbar a>*+*{margin-left:0;margin-top:2px}.nofg .pmain>*+*{margin-top:4px}
.nofg .tipform>*{margin:4px 8px 4px 0}.nofg .weekbar>*{margin-bottom:6px}

/* punch photos */
.photocue{display:inline-block;margin:6px 0 4px;padding:4px 10px;border-radius:999px;background:#eef4ff;color:#3538cd;font-size:14px;font-weight:600}
.pphotos{display:flex;gap:10px;padding:0 14px 10px 46px;flex-wrap:wrap}
.pphoto{display:flex;align-items:center;gap:6px;font-size:12px;color:#475467;text-decoration:none}
.pphoto img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid #e4e7ec;background:#f2f4f7}
.pphoto.none{padding:3px 8px;border-radius:999px;background:#f2f4f7;color:#667085}
.lightbox{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:10px}
/* ---- phone app (v2) ---- */
.who{display:flex;align-items:center;gap:12px}
.remember{display:flex;gap:8px;align-items:center;font-weight:500;justify-content:center;margin:10px 0 0}.remember input{width:20px;height:20px}
.names{display:grid;grid-template-columns:1fr 1fr;gap:10px}.namebtn{display:block;border:1px solid var(--line);border-radius:10px;padding:14px 10px;text-align:center;font-weight:600;color:var(--ink);background:#fff}
.namebtn:active{background:#eef2f7}.namebtn:hover{text-decoration:none;border-color:var(--blue)}
.punchcard .welcome{margin-bottom:14px}.statusline{font-size:14px;color:var(--muted);margin-top:2px}
.bigpunch{font-size:22px;padding:22px!important;border-radius:14px;letter-spacing:.3px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.stat{background:var(--head);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stat span{font-size:12px;color:var(--muted);font-weight:600}.stat b{font-size:22px}.stat small{font-size:12px;color:var(--muted)}
.sect{margin-top:12px;padding:0!important}.sect>summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;display:flex;gap:8px;align-items:center}
.sect>summary::-webkit-details-marker{display:none}.sect>summary::after{content:"›";margin-left:auto;font-size:22px;color:var(--muted);transform:rotate(90deg);transition:transform .15s}
.sect[open]>summary::after{transform:rotate(-90deg)}.sect>*:not(summary){margin-left:20px;margin-right:20px}.sect[open]{padding-bottom:16px!important}
.sect table{margin:0;width:calc(100% - 40px)}
.confirmbox{background:#fef2f2;border:1px solid #fecdca;border-radius:10px;padding:14px}
.modal{position:fixed;inset:0;background:rgba(17,24,39,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:16px}
.modal[hidden]{display:none}.modalbox{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:440px;margin-bottom:env(safe-area-inset-bottom)}
.modalbox h2{margin:0 0 6px;font-size:22px}.modalbox .btn{padding:16px;font-size:17px}
.a2hs{margin-top:12px;background:#eff6ff;border-color:#d6e6fb}.a2hs>div{margin-top:8px;font-size:14px}.kbd{display:inline-block;border:1px solid #cbd5e1;border-radius:4px;padding:0 5px;background:#fff}
.wkot{background:#fafafa;border-bottom:1px solid #eee;padding:8px 14px}.wkot .row{padding:2px 0}
.locok{white-space:normal;word-break:break-word}
.autoflag a{color:#b42318;font-weight:600}.autonote a{color:#b42318;text-decoration:underline}
/* ---- printable pay-period report ---- */
.printpage{background:#e5e7eb;color:#111}
.ptools{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:10px 14px}
.ptform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ptform select{width:auto;padding:6px 10px}.chk{display:flex;gap:6px;align-items:center;margin:0;font-weight:500}.chk input{width:auto}
.ptip{flex-basis:100%;margin:2px 0 0}
.psheet{background:#fff;max-width:8.5in;margin:16px auto;padding:.5in;box-shadow:0 1px 4px rgba(0,0,0,.12);font-size:12.5px}
.compact .psheet{margin-bottom:0;margin-top:0;border-bottom:1px dashed #cbd5e1}
.phead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:12px}
.pco{font-size:20px;font-weight:800}.ptitle{font-size:14px;font-weight:600}.psub{font-size:17px;font-weight:700;margin-top:6px}.pmeta{font-size:11px;color:#444;text-align:right}
.ptable{width:100%;border-collapse:collapse}.ptable th,.ptable td{border:1px solid #9ca3af;padding:5px 7px;font-size:12px;vertical-align:top}
.ptable th{background:#f3f4f6;color:#111}.ptable tfoot td{background:#f3f4f6;font-weight:700}.ptable tr{break-inside:avoid}
.pair{white-space:nowrap}.flag{color:#b42318;font-weight:700}.flagb{color:#0b5cad;font-weight:600}.pnote{font-style:italic}
.sigs{display:grid;grid-template-columns:3fr 1.3fr;gap:26px 22px;margin-top:34px}.sig{font-size:11px;color:#444}.sig span{display:block;border-bottom:1px solid #111;height:26px;margin-bottom:3px}
.pfoot{margin-top:10px}
@page{size:letter;margin:.5in}
@media print{
 .noprint{display:none!important}
 body.printpage{background:#fff}
 .psheet{box-shadow:none;margin:0;padding:0;max-width:none}
 .pages .psheet{break-after:page;page-break-after:always}
 .pages .psheet:last-child{break-after:auto;page-break-after:auto}
 .compact .psheet{border-bottom:none;margin-bottom:22px;break-inside:avoid}
 .compact .psheet.summary{break-after:page;page-break-after:always}
 .ptable th,.ptable tfoot td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 a{color:#111;text-decoration:none}
}