/* KIOSK_V2 time clock — matches the daylight login pages */
:root{
  --k-ink:#0F2A4A; --k-ink2:#475569; --k-ink3:#94A3B8;
  --k-line:#E4EAF2; --k-field:#F8FAFD;
  --k-navy:#123C6B; --k-navy-dk:#0B2A4A; --k-focus:rgba(30,64,175,.16);
  --k-ok:#0F8A56; --k-ok-bg:#E6F4EC; --k-ok-line:#BFE4CE;
  --k-err:#C2372E; --k-err-bg:#FCEBE9; --k-err-line:#F1C7C2;
  --k-sans:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --k-display:"Sora","Public Sans",sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; }
body.kiosk{
  min-height:100vh; font-family:var(--k-sans); color:var(--k-ink); -webkit-font-smoothing:antialiased;
  background:linear-gradient(160deg,#F4F8FD 0%,#DFEAF8 55%,#C7DAF0 100%) fixed;
  display:flex; align-items:center; justify-content:center; padding:28px 16px;
}
.k-wrap{ width:100%; max-width:440px; display:flex; flex-direction:column; gap:16px; }

.k-brand{ text-align:center; }
.k-logo{ width:150px; height:auto; max-height:150px; object-fit:contain; }

.k-card{ background:#fff; border-radius:18px; padding:28px 26px 24px; box-shadow:0 12px 32px rgba(15,42,74,.12),0 2px 8px rgba(15,42,74,.07); }

.k-head{ text-align:center; margin-bottom:22px; }
.k-badge{ width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:#E8EEFD; color:var(--k-navy); font-size:19px; margin-bottom:12px; }
.k-title{ font-family:var(--k-display); font-size:24px; font-weight:700; margin:0 0 4px; letter-spacing:-.01em; }
.k-sub{ margin:0; color:var(--k-ink2); font-size:14px; }

.k-label{ display:block; font-size:13px; font-weight:600; color:var(--k-ink2); margin:0 0 6px; }
.k-field{ position:relative; margin-bottom:16px; }
.k-field-ic{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--k-ink3); font-size:15px; pointer-events:none; }
.k-input{
  width:100%; height:48px; padding:0 14px 0 42px; font:500 15px var(--k-sans); color:var(--k-ink);
  background:var(--k-field); border:1px solid var(--k-line); border-radius:12px; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.k-input:focus{ border-color:#1E40AF; background:#fff; box-shadow:0 0 0 3px var(--k-focus); }
.k-input-lg{ height:56px; font-size:18px; font-weight:600; letter-spacing:.02em; }
.k-input::placeholder{ color:#A9B4C4; font-weight:400; letter-spacing:0; }

.k-btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; border:0; border-radius:12px; font:600 15px var(--k-sans); cursor:pointer;
  transition:background .15s, transform .05s, opacity .15s;
}
.k-btn-primary{ background:var(--k-navy); color:#fff; box-shadow:0 2px 8px rgba(18,60,107,.25); }
.k-btn-primary:hover{ background:var(--k-navy-dk); }
.k-btn-primary:active{ transform:translateY(1px); }
.k-btn-primary:focus-visible{ outline:3px solid rgba(30,64,175,.35); outline-offset:2px; }
.k-btn-lg{ height:56px; font-size:17px; }
.k-btn[disabled]{ opacity:.65; cursor:progress; }

/* clock */
.k-clock{ text-align:center; margin:-4px 0 18px; }
.k-date{ margin:0; color:var(--k-ink2); font-size:14px; font-weight:600; letter-spacing:.02em; }
.k-time{ margin:2px 0 0; font-family:var(--k-display); font-size:44px; font-weight:700; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* camera */
.k-cam{ position:relative; border-radius:14px; overflow:hidden; background:#0E1A2B; aspect-ratio:4/3; max-height:240px; width:100%; margin-bottom:10px; }
.k-cam video{ width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(-1); }
.k-cam-tag{ position:absolute; left:10px; bottom:10px; background:rgba(14,26,43,.62); color:#fff; font-size:12px; padding:5px 10px; border-radius:999px; backdrop-filter:blur(4px); }
.k-cam-msg{ font-size:13px; color:var(--k-err); margin:-2px 0 12px; }
.k-cam-msg.is-muted{ color:var(--k-ink2); }

/* time in / out toggle */
.k-seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; background:#EEF2F8; border-radius:14px; margin:14px 0 18px; }
.k-seg-opt{ margin:0; cursor:pointer; }
.k-seg-opt input{ position:absolute; opacity:0; pointer-events:none; }
.k-seg-opt span{ display:flex; align-items:center; justify-content:center; gap:8px; height:44px; border-radius:10px; font-weight:600; font-size:15px; color:var(--k-ink2); transition:background .15s, color .15s, box-shadow .15s; }
.k-seg-opt input:checked + span{ background:#fff; color:var(--k-navy); box-shadow:0 1px 3px rgba(15,42,74,.12); }
/* colour: Time In = green, Time Out = orange */
.k-seg-opt.k-in span .fa{ color:#16A34A; }
.k-seg-opt.k-out span .fa{ color:#EA580C; }
.k-seg-opt.k-in input:checked + span{ background:#16A34A; color:#fff; box-shadow:0 2px 8px rgba(22,163,74,.30); }
.k-seg-opt.k-out input:checked + span{ background:#EA580C; color:#fff; box-shadow:0 2px 8px rgba(234,88,12,.30); }
.k-seg-opt input:checked + span .fa{ color:#fff; }
#attendance[data-mode="in"] .k-btn-primary{ background:#15803D; box-shadow:0 2px 10px rgba(21,128,61,.30); }
#attendance[data-mode="in"] .k-btn-primary:hover{ background:#116932; }
#attendance[data-mode="out"] .k-btn-primary{ background:#C2410C; box-shadow:0 2px 10px rgba(194,65,12,.30); }
#attendance[data-mode="out"] .k-btn-primary:hover{ background:#9A3412; }
.k-seg-opt input:focus-visible + span{ outline:3px solid rgba(30,64,175,.35); outline-offset:1px; }

/* alerts */
.k-alert{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding:12px 14px; border-radius:12px; font-size:15px; line-height:1.45; border:1px solid; }
.k-alert > .fa{ font-size:18px; margin-top:1px; }
.k-alert span{ flex:1; }
.k-alert-ok{ background:var(--k-ok-bg); color:var(--k-ok); border-color:var(--k-ok-line); }
.k-alert-err{ background:var(--k-err-bg); color:var(--k-err); border-color:var(--k-err-line); }
.k-alert-x{ background:none; border:0; font-size:20px; line-height:1; color:inherit; opacity:.6; cursor:pointer; padding:0 2px; }
.k-alert-x:hover{ opacity:1; }

.k-hint{ margin:16px 0 0; font-size:13px; color:var(--k-ink2); line-height:1.5; display:flex; gap:8px; }
.k-hint .fa{ color:#A9720F; margin-top:3px; }

/* employee portal link */
.k-portal{
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9); color:var(--k-ink);
  box-shadow:0 2px 10px rgba(15,42,74,.06); transition:background .15s, transform .1s;
}
.k-portal:hover, .k-portal:focus{ background:#fff; color:var(--k-ink); text-decoration:none; }
.k-portal:active{ transform:translateY(1px); }
.k-portal > .fa:first-child{ font-size:24px; color:var(--k-navy); }
.k-portal span{ flex:1; font-weight:600; font-size:15px; }
.k-portal small{ display:block; font-weight:400; font-size:12px; color:var(--k-ink2); }
.k-portal > .fa-angle-right{ font-size:20px; color:var(--k-ink3); }

@media (max-width:420px){
  body.kiosk{ padding:18px 12px; align-items:flex-start; }
  .k-card{ padding:22px 18px 20px; }
  .k-time{ font-size:38px; }
  .k-logo{ width:120px; }
}

/* RECENT_USERS: chips for usernames used on this device */
.k-recent{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:-6px 0 16px; }
.k-recent-l{ font-size:12px; font-weight:600; color:var(--k-ink3); text-transform:uppercase; letter-spacing:.04em; }
.k-recent-list{ display:flex; flex-wrap:wrap; gap:8px; }
.k-chip{ border:1px solid var(--k-line); background:var(--k-field); color:var(--k-ink); font:600 13px var(--k-sans); padding:7px 13px; border-radius:999px; cursor:pointer; transition:background .15s, border-color .15s; }
.k-chip:hover{ background:#fff; border-color:#1E40AF; }
.k-chip:active{ transform:translateY(1px); }
.k-recent-x{ margin-left:auto; border:0; background:none; color:var(--k-ink3); font:500 12px var(--k-sans); cursor:pointer; text-decoration:underline; padding:4px; }
.k-recent-x:hover{ color:var(--k-err); }

/* KIOSK_MOBILE: thumb-sized chips, and a shorter camera on short phones so the Time In button stays on screen */
.k-chip{ min-height:40px; padding:9px 15px; font-size:14px; }
.k-recent-x{ min-height:36px; padding:8px 6px; font-size:13px; }
@media (max-width:767px) and (max-height:760px){ .k-cam{ max-height:26vh; } .k-clock{ margin-bottom:12px; } .k-time{ font-size:36px; } .k-seg{ margin:10px 0 14px; } }
@media (max-width:767px) and (max-height:620px){ .k-cam{ max-height:22vh; } .k-brand{ display:none; } }

/* KIOSK_SHORT: on short phones shrink the logo and spacing so Time In is reachable without scrolling */
@media (max-width:767px) and (max-height:760px){
  body.kiosk{ padding-top:10px; padding-bottom:12px; align-items:flex-start; }
  .k-wrap{ gap:10px; }
  .k-logo{ width:56px; max-height:56px; }
  .k-card{ padding-top:16px; padding-bottom:16px; }
  .k-field{ margin-bottom:10px; }
  .k-recent{ margin:-2px 0 10px; }
  .k-hint{ margin-top:10px; font-size:12px; }
}