/* Staff portal (login.html). Brand: orange #f46806, blue #0072b8, teal #44b3c6, navy #0b2a43. */
.portal-page{--pt-bg:#f3f8fc;--pt-card:#fff;--pt-text:#0b2a43;--pt-muted:#4a6275;--pt-line:#d9e6f0;--pt-field:#fff;--pt-accent:#f46806;--pt-blue:#0072b8;--pt-ok:#12703a;--pt-ok-bg:#e3f6ea;--pt-warn:#9a4a00;--pt-warn-bg:#fff0e0;--pt-bad:#b3261e;--pt-bad-bg:#fde8e6;--pt-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 4px rgba(11,42,67,.06),0 18px 36px -14px rgba(11,42,67,.22)}
@media (prefers-color-scheme:dark){.portal-page{--pt-bg:#071a2b;--pt-card:#0e2943;--pt-text:#eaf3fa;--pt-muted:#a9c0d2;--pt-line:#1f4062;--pt-field:#0a2036;--pt-ok:#7ee0a3;--pt-ok-bg:rgba(46,160,90,.18);--pt-warn:#ffbf8a;--pt-warn-bg:rgba(244,104,6,.2);--pt-bad:#ff9d96;--pt-bad-bg:rgba(220,60,50,.2);--pt-shadow:0 18px 36px -14px rgba(0,0,0,.6)}}
.portal{background:var(--pt-bg);color:var(--pt-text);min-height:60vh;padding:40px 16px 72px}
.pt-wrap{max-width:1100px;margin:0 auto;display:grid;gap:20px}
.pt-narrow{max-width:460px;margin:24px auto 0}
.pt-card{background:var(--pt-card);border:1px solid var(--pt-line);border-radius:20px;padding:26px;box-shadow:var(--pt-shadow);min-width:0}
.portal h1{font-size:30px;line-height:1.2;margin:0 0 8px;color:var(--pt-text)}
.portal h2{font-size:21px;margin:0 0 14px;color:var(--pt-text)}
.portal h3{font-size:17px;margin:0 0 10px;color:var(--pt-text)}
.portal h1,.portal h2,.portal h3{text-align:left}
.pt-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pt-accent);margin:0 0 6px}
.pt-lead{color:var(--pt-muted);margin:0 0 20px;font-size:16px;line-height:1.5}
.pt-fine{color:var(--pt-muted);font-size:13.5px;line-height:1.5;margin:10px 0 0}
.pt-empty{color:var(--pt-muted);margin:6px 0}
.pt-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.pt-top-actions{display:flex;flex-wrap:wrap;gap:10px}
.pt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
.pt-col{display:grid;gap:20px;min-width:0}
.pt-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:6px}
.pt-row h2{margin:0}
/* forms */
.pt-form{display:grid;gap:16px}
.pt-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pt-two .pt-btn,.pt-two .pt-msg{grid-column:1/-1}
.pt-inlineform{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end;margin-bottom:16px}
.pt-field{display:grid;gap:6px;min-width:0;align-content:start}
.pt-field[hidden]{display:none}
.pt-field label,.pt-inline{font-weight:600;font-size:14.5px;color:var(--pt-text)}
.pt-field small{color:var(--pt-muted);font-size:12.5px}
.portal input,.portal select,.portal textarea{font:inherit;font-size:16px;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1.5px solid var(--pt-line);background:var(--pt-field);color:var(--pt-text);min-height:48px}
.portal textarea{resize:vertical}
.portal input:focus,.portal select:focus,.portal textarea:focus{outline:3px solid rgba(68,179,198,.55);outline-offset:1px;border-color:var(--pt-blue)}
.pt-inline select{width:auto;display:inline-block;min-height:42px;padding:8px 12px;margin-left:6px}
.pt-pass{position:relative}
.pt-pass input{padding-right:52px}
.pt-eye{position:absolute;right:4px;top:50%;translate:0 -50%;width:44px;height:44px;border:0;background:none;color:var(--pt-muted);display:grid;place-items:center;border-radius:10px;cursor:pointer}
.pt-eye:hover{color:var(--pt-accent)}
.pt-eye[aria-pressed=true]{color:var(--pt-blue)}
.pt-eye svg{width:22px;height:22px}
.pt-msg{margin:0;padding:10px 14px;border-radius:12px;font-size:14.5px;line-height:1.4}
.pt-msg[hidden]{display:none}
.pt-msg.bad{background:var(--pt-bad-bg);color:var(--pt-bad)}
.pt-msg.ok{background:var(--pt-ok-bg);color:var(--pt-ok)}
/* buttons */
.pt-btn{font:inherit;font-weight:700;font-size:16px;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid var(--pt-accent);background:var(--pt-accent);color:#fff;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.pt-btn:hover:not(:disabled){background:#ff7b1f;border-color:#ff7b1f;transform:translateY(-1px)}
.pt-btn:focus-visible,.pt-link:focus-visible,.pt-day:focus-visible,.pt-tab:focus-visible,.pt-iconbtn:focus-visible,.pt-eye:focus-visible{outline:3px solid #44b3c6;outline-offset:2px}
.pt-btn:disabled{opacity:.55;cursor:not-allowed}
.pt-btn.ghost{background:transparent;color:var(--pt-text);border-color:var(--pt-line)}
.pt-btn.ghost:hover:not(:disabled){background:transparent;border-color:var(--pt-accent);color:var(--pt-accent)}
.pt-btn.sm{min-height:40px;font-size:14px;padding:0 16px}
.pt-btn.ok{background:#12803f;border-color:#12803f}.pt-btn.ok:hover:not(:disabled){background:#17984b;border-color:#17984b}
.pt-btn.bad{background:#c62d24;border-color:#c62d24}.pt-btn.bad:hover:not(:disabled){background:#dc3a30;border-color:#dc3a30}
.pt-btn.big{width:100%;min-height:64px;font-size:21px;margin-top:6px}
.pt-btn.in{background:#12803f;border-color:#12803f}.pt-btn.in:hover:not(:disabled){background:#17984b;border-color:#17984b}
.pt-btn.out{background:#0b2a43;border-color:#0b2a43}.pt-btn.out:hover:not(:disabled){background:#12415f;border-color:#12415f}
@media (prefers-color-scheme:dark){.pt-btn.out{background:#0072b8;border-color:#0072b8}.pt-btn.out:hover:not(:disabled){background:#1186cf;border-color:#1186cf}}
.pt-link{font:inherit;font-size:14px;font-weight:600;background:none;border:0;padding:6px 4px;color:var(--pt-blue);cursor:pointer;text-decoration:underline;min-height:36px}
@media (prefers-color-scheme:dark){.pt-link{color:#6cc4f0}}
/* punch card */
.pt-clock{font-size:46px;font-weight:700;line-height:1.1;margin:4px 0 0;color:var(--pt-text);font-variant-numeric:tabular-nums}
.pt-clockdate{margin:2px 0 14px;color:var(--pt-muted);font-size:15px}
.pt-shift{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--pt-muted);font-size:15px}
.pt-ic{display:inline-grid;width:20px;height:20px;color:var(--pt-accent)}.pt-ic svg{width:20px;height:20px}
.pt-status{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--pt-bg);color:var(--pt-text);font-weight:600}
.pt-status.on{background:var(--pt-ok-bg);color:var(--pt-ok)}
.pt-punch .pt-msg{margin-top:12px}
/* updates */
.pt-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pt-accent);color:#fff;font-size:13px;vertical-align:middle}
.pt-update{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;margin-top:10px}
.pt-update p{margin:0;font-size:14.5px;line-height:1.45}
.pt-update.approved{background:var(--pt-ok-bg);color:var(--pt-ok)}
.pt-update.rejected{background:var(--pt-bad-bg);color:var(--pt-bad)}
.pt-update .pt-link{color:inherit;flex:none}
.pt-alert{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--pt-warn-bg);color:var(--pt-warn);font-weight:600}
.pt-alert .pt-link{color:inherit}
/* calendar */
.pt-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.pt-cal-head h2{margin:0;font-size:20px}
.pt-iconbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--pt-line);background:var(--pt-card);color:var(--pt-text);font-size:24px;line-height:1;cursor:pointer}
.pt-iconbtn:hover{border-color:var(--pt-accent);color:var(--pt-accent)}
.pt-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.pt-dow{text-align:center;font-size:12.5px;font-weight:700;color:var(--pt-muted);padding:4px 0}
.pt-day{position:relative;aspect-ratio:1;min-height:42px;border-radius:12px;border:1.5px solid transparent;background:var(--pt-bg);color:var(--pt-text);font:inherit;font-weight:600;font-size:15px;cursor:pointer;display:grid;place-items:center;padding:0}
.pt-day.empty{background:none;border:0;pointer-events:none}
.pt-day:hover:not(:disabled){border-color:var(--pt-accent)}
.pt-day.past{opacity:.45}
.pt-day:disabled{cursor:default}
.pt-day.today{border-color:var(--pt-blue);box-shadow:0 0 0 2px rgba(0,114,184,.2)}
.pt-day.sel{background:var(--pt-accent);color:#fff;border-color:var(--pt-accent);opacity:1}
.pt-day.lv-pending{background:var(--pt-warn-bg);color:var(--pt-warn);border-color:var(--pt-accent);opacity:1}
.pt-day.lv-approved{background:var(--pt-ok-bg);color:var(--pt-ok);border-color:#2ea05a;opacity:1}
.pt-day.lv-rejected{background:var(--pt-bad-bg);color:var(--pt-bad);text-decoration:line-through;opacity:1}
.pt-day.worked::after{content:"";position:absolute;bottom:5px;left:50%;translate:-50% 0;width:6px;height:6px;border-radius:50%;background:#44b3c6}
.pt-day i{position:absolute;top:2px;right:5px;font-style:normal;font-size:11px;font-weight:700}
.pt-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:14px 0 0;font-size:13px;color:var(--pt-muted)}
.pt-legend li{display:flex;align-items:center;gap:6px}
.pt-legend .k{width:14px;height:14px;border-radius:5px;display:inline-block;border:1.5px solid}
.k.pending{background:var(--pt-warn-bg);border-color:var(--pt-accent)}.k.approved{background:var(--pt-ok-bg);border-color:#2ea05a}.k.rejected{background:var(--pt-bad-bg);border-color:var(--pt-bad)}.k.worked{background:#44b3c6;border-color:#44b3c6;border-radius:50%;width:10px;height:10px}
.pt-panel{margin-top:16px;padding:16px;border:1.5px dashed var(--pt-line);border-radius:14px;display:grid;gap:12px}
.pt-panel p{margin:0}
/* badges + tables */
.pt-badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;background:var(--pt-bg);color:var(--pt-muted)}
.pt-badge.pending{background:var(--pt-warn-bg);color:var(--pt-warn)}
.pt-badge.approved,.pt-badge.active{background:var(--pt-ok-bg);color:var(--pt-ok)}
.pt-badge.rejected,.pt-badge.inactive{background:var(--pt-bad-bg);color:var(--pt-bad)}
.pt-tbl{overflow-x:auto}
.portal table{width:100%;border-collapse:collapse;font-size:15px}
.portal th{text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pt-muted);padding:8px 12px;border-bottom:2px solid var(--pt-line)}
.portal td{padding:12px;border-bottom:1px solid var(--pt-line);vertical-align:top;color:var(--pt-text);overflow-wrap:anywhere}
.pt-decide{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pt-decide input{min-height:40px;padding:8px 12px;font-size:14px;flex:1 1 150px;width:auto}
.pt-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.pt-tab{font:inherit;font-weight:600;font-size:15px;white-space:nowrap;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--pt-line);background:var(--pt-card);color:var(--pt-text);cursor:pointer}
.pt-tab.on{background:var(--pt-text);color:var(--pt-card);border-color:var(--pt-text)}
.pt-tabbody{display:grid;gap:20px}
.pt-creds{margin-top:18px;padding:18px;border-radius:14px;background:var(--pt-ok-bg);color:var(--pt-ok)}
.pt-creds h3{color:inherit}
.pt-creds dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 6px}
.pt-creds dt{font-weight:600}.pt-creds dd{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;font-weight:700;user-select:all;overflow-wrap:anywhere}
.pt-creds .pt-fine{color:inherit}
@media (max-width:900px){.pt-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .portal{padding:24px 12px 56px}
  .pt-card{padding:20px 16px;border-radius:16px}
  .portal h1{font-size:26px}
  .pt-clock{font-size:38px}
  .pt-two{grid-template-columns:minmax(0,1fr)}
  .pt-cal-grid{gap:4px}
  .pt-top-actions .pt-btn{flex:1}
  .pt-tbl{overflow:visible}
  .portal table,.portal tbody,.portal tr,.portal td{display:block;width:100%}
  .portal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .portal tr{padding:10px 0;border-bottom:1px solid var(--pt-line)}
  .portal td{border:0;padding:4px 0;display:flex;gap:12px;justify-content:space-between;text-align:right}
  .portal td::before{content:attr(data-label);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pt-muted);text-align:left;flex:none}
  .portal td:empty{display:none}
  .portal td[data-label=""]::before{content:none}
  .portal td .pt-decide{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){.pt-btn{transition:none}.pt-btn:hover:not(:disabled){transform:none}}