/* ──────────────────────────────────────────────────────────────────────────
   tmsConneXion Kiosk — dark "tablet kiosk" reskin.
   Pure visual override layered on top of bootstrap / now-ui-dashboard.
   No markup IDs, form fields, or JS hooks are changed — this only repaints.
   Design tokens mirror the standalone tablet-kiosk prototype:
     brand #3D5BFF · accent #FF7A1A · graphite #07090d · Inter / JetBrains Mono
   Load this LAST (after demo.css) so its rules win.
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --kt-brand: #3D5BFF;
  --kt-accent: #FF7A1A;
  --kt-bg0: #07090d;
  --kt-bg1: #11141B;
  --kt-bg2: #171B24;
  --kt-bg3: #1F2532;
  --kt-bg4: #262D3D;
  --kt-text: #F2F4F8;
  --kt-muted: #9AA3B8;
  --kt-dim: #6B7387;
  --kt-faint: #4A516A;
  --kt-success: #3DD68C;
  --kt-warn: #FFB23D;
  --kt-danger: #FF5C6B;
  --kt-sans: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --kt-mono: 'JetBrains Mono', ui-monospace, "SF Mono", monospace;
}

/* Light mode — re-point the design tokens; the whole kiosk is var-driven so
   this repaints it. Default is dark (no class). Toggled via #ktThemeToggle. */
.kt-light {
  --kt-bg0: #EAEEF5;
  --kt-bg1: #FFFFFF;
  --kt-bg2: #F3F6FB;
  --kt-bg3: #E8ECF4;
  --kt-bg4: #D3DAE8;
  --kt-text: #10131A;
  --kt-muted: #55607A;
  --kt-dim: #7A849B;
  --kt-faint: #AEB6C8;
}

/* ── page canvas ─────────────────────────────────────────────────────────── */
html,
body.login-page,
.wrapper.wrapper-full-page {
  background: var(--kt-bg0) !important;
  color: var(--kt-text) !important;
  font-family: var(--kt-sans) !important;
}

.full-page.lock-page,
.full-page.section-image {
  background:
    radial-gradient(ellipse at 22% 18%, color-mix(in srgb, var(--kt-brand) 20%, transparent), transparent 55%),
    radial-gradient(ellipse at 86% 92%, color-mix(in srgb, var(--kt-accent) 13%, transparent), transparent 55%),
    var(--kt-bg0) !important;
}

/* hide the photo backdrop the JS injects + KILL now-ui's dark overlay.
   now-ui's .full-page:after is a full-size z-index:1 layer with content:"" —
   left alive it sits over .kt-screen and eats every click (dead keypad). */
.full-page-background { display: none !important; }
.full-page.lock-page::after,
.full-page.lock-page::before {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

.content { position: relative; z-index: 1; }
.kt-screen { position: relative; z-index: 5; }

/* ── primary kiosk card ──────────────────────────────────────────────────── */
.card.kioskcard,
#divTransfer > form > .card {
  background: var(--kt-bg1) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-radius: 28px !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  color: var(--kt-text) !important;
  overflow: hidden;
}

.card.kioskcard .card-header,
#divTransfer .card-header {
  background: transparent !important;
  border: 0 !important;
  padding: 28px 24px 6px !important;
}

.card-title,
#divTransfer h4,
#divTransfer h5 {
  color: var(--kt-text) !important;
  font-family: var(--kt-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

#divTransfer u { color: var(--kt-brand); text-decoration: none; }

.card.kioskcard .card-body { background: transparent !important; padding: 18px 24px 6px !important; }

/* ── badge / id input ────────────────────────────────────────────────────── */
.card.kioskcard .form-control,
#txtid {
  height: 64px !important;
  border-radius: 16px !important;
  background: var(--kt-bg2) !important;
  border: 1px solid var(--kt-bg4) !important;
  color: var(--kt-text) !important;
  font-family: var(--kt-mono) !important;
  font-size: 22px !important;
  letter-spacing: 6px !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}

.card.kioskcard .form-control::placeholder,
#txtid::placeholder {
  color: var(--kt-dim) !important;
  letter-spacing: normal !important;
  font-family: var(--kt-sans) !important;
  font-size: 18px !important;
}

.card.kioskcard .form-control:focus,
#txtid:focus {
  border-color: var(--kt-brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kt-brand) 18%, transparent) !important;
  background: var(--kt-bg2) !important;
  color: var(--kt-text) !important;
}

/* ── clock ───────────────────────────────────────────────────────────────── */
#clockbox {
  color: var(--kt-text) !important;
  font-family: var(--kt-mono) !important;
  font-weight: 600 !important;
  margin-top: 16px;
}
#clockbox .spanDate {
  display: block;
  color: var(--kt-muted);
  font-family: var(--kt-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#clockbox .spanTime {
  display: block;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.card.kioskcard .card-footer,
#divTransfer .card-footer {
  background: transparent !important;
  border: 0 !important;
  display: flex;
  gap: 12px;
  padding: 10px 24px !important;
}
.card.kioskcard .card-footer:last-child { padding-bottom: 24px !important; }

.card.kioskcard .card-footer .btn { flex: 1; }

.card.kioskcard .btn,
#divTransfer .btn,
.btn.btn-primary {
  border-radius: 14px !important;
  font-family: var(--kt-sans) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -0.1px !important;
  text-transform: none !important;
  height: 60px;
  padding: 0 22px !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* default primary */
.btn.btn-primary,
#divTransfer .btn-primary {
  background: var(--kt-brand) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--kt-brand) 32%, transparent) !important;
}

/* action-specific colors (match prototype hub tiles) */
#btnPunchIn {
  background: var(--kt-success) !important;
  color: #062117 !important;
  box-shadow: 0 8px 24px rgba(61, 214, 140, 0.26) !important;
}
#btnPunchOut {
  background: var(--kt-danger) !important;
  color: #2a0a0e !important;
  box-shadow: 0 8px 24px rgba(255, 92, 107, 0.26) !important;
}
#btnTransfer {
  background: var(--kt-accent) !important;
  color: #1a0c02 !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--kt-accent) 30%, transparent) !important;
}
#btnReview,
#callbackPunch,
#requestLeave {
  background: var(--kt-bg2) !important;
  color: var(--kt-text) !important;
  border: 1px solid var(--kt-bg4) !important;
  box-shadow: none !important;
}

#btnReview:hover,
#callbackPunch:hover,
#requestLeave:hover { background: var(--kt-bg3) !important; }

/* back / default / soft buttons */
#btnback,
.card .btn-default,
#flipCameraBtn {
  background: var(--kt-bg2) !important;
  color: var(--kt-text) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#btnSubmitTransfer { background: var(--kt-brand) !important; color: #fff !important; }
.btn:disabled,
.btn[disabled] { opacity: 0.45 !important; }

/* ── transfer panel ──────────────────────────────────────────────────────── */
#divTransfer .card-body { background: transparent !important; }
#divTransfer .col-form-label,
#divTransfer label { color: var(--kt-muted) !important; font-weight: 500; }
#divTransfer strong .col-form-label { color: var(--kt-text) !important; font-weight: 700; }

/* ── bootstrap-select dropdowns (work-group / benefit / portion pickers) ──── */
.bootstrap-select > .dropdown-toggle.btn-primary,
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select .btn.btn-primary,
.bootstrap-select .btn.btn-round {
  background: var(--kt-bg2) !important;
  color: var(--kt-text) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  height: 54px;
  display: flex;
  align-items: center;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder { color: var(--kt-dim) !important; }
.bootstrap-select .dropdown-menu {
  background: var(--kt-bg2) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li.dropdown-header { color: var(--kt-text) !important; }
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus,
.bootstrap-select .dropdown-menu .active a,
.bootstrap-select .dropdown-menu li.selected a {
  background: color-mix(in srgb, var(--kt-brand) 18%, transparent) !important;
  color: var(--kt-text) !important;
}
.bootstrap-select .bs-searchbox .form-control {
  background: var(--kt-bg3) !important;
  border: 1px solid var(--kt-bg4) !important;
  color: var(--kt-text) !important;
  border-radius: 10px !important;
}
.select-danger > .dropdown-toggle { border-color: var(--kt-danger) !important; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer { color: var(--kt-dim) !important; }
.footer a { color: var(--kt-muted) !important; }
.footer a:hover { color: var(--kt-text) !important; }
.footer .copyright,
.footer .copyright a { color: var(--kt-dim) !important; }

/* ── QR scanner ──────────────────────────────────────────────────────────── */
#reader,
.Html5Qrcode {
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid var(--kt-bg4) !important;
  background: var(--kt-bg1) !important;
}

/* White corner-bracket target frame over the live video so users know where to
   place the QR code. Sits on the scan region (only present while scanning). */
#reader__scan_region { position: relative; }
#reader__scan_region::after {
  content: "";
  --b: 3px;    /* bracket thickness */
  --l: 30px;   /* bracket arm length */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(#fff 0 0) 0 0,
    linear-gradient(#fff 0 0) 0 0,
    linear-gradient(#fff 0 0) 100% 0,
    linear-gradient(#fff 0 0) 100% 0,
    linear-gradient(#fff 0 0) 0 100%,
    linear-gradient(#fff 0 0) 0 100%,
    linear-gradient(#fff 0 0) 100% 100%,
    linear-gradient(#fff 0 0) 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--l) var(--b), var(--b) var(--l);
  pointer-events: none;
  z-index: 5;
}

/* ── restrict-access message ─────────────────────────────────────────────── */
.text-white { color: var(--kt-text) !important; }

/* ── SweetAlert2 popups (Review · Leave · Callback · Pay-on-Demand · Survey) ─ */
.swal2-popup {
  background: var(--kt-bg1) !important;
  color: var(--kt-text) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-radius: 24px !important;
  font-family: var(--kt-sans) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6) !important;
}
.swal2-title { color: var(--kt-text) !important; font-weight: 700 !important; letter-spacing: -0.4px; }
.swal2-html-container { color: var(--kt-muted) !important; }
.swal2-close { color: var(--kt-muted) !important; }
.swal2-close:hover { color: var(--kt-text) !important; }
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-styled.swal2-confirm {
  background: var(--kt-brand) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--kt-brand) 30%, transparent) !important;
}
.swal2-actions .swal2-cancel,
.swal2-actions .swal2-styled.swal2-cancel {
  background: var(--kt-bg2) !important;
  color: var(--kt-text) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-radius: 12px !important;
}

/* form controls inside popups (leave request, pay-on-demand, survey) */
.swal2-popup .form-control,
.swal2-popup textarea,
.swal2-popup input[type="text"],
.swal2-popup input[type="number"],
.swal2-popup input[type="password"] {
  background: var(--kt-bg2) !important;
  border: 1px solid var(--kt-bg4) !important;
  color: var(--kt-text) !important;
  border-radius: 12px !important;
}
.swal2-popup .form-control::placeholder { color: var(--kt-dim) !important; }
.swal2-popup .form-control:focus {
  border-color: var(--kt-brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kt-brand) 18%, transparent) !important;
}
.swal2-popup label,
.swal2-popup .font-weight-bold { color: var(--kt-muted) !important; }
.swal2-popup .text-primary { color: var(--kt-brand) !important; }
/* date pickers — merge the calendar-icon prepend seamlessly with the input:
   same fill, one shared border, no inner radius or doubled edge */
.swal2-popup .input-group { flex-wrap: nowrap; }
.swal2-popup .input-group .input-group-text {
  background: var(--kt-bg2) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-right: 0 !important;
  border-radius: 12px 0 0 12px !important;
  color: var(--kt-muted) !important;
  padding: 0 14px !important;
}
.swal2-popup .input-group .form-control {
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
}

/* leave-request selectpickers (Benefit / Portion of Shift) are not .kt-field,
   so nothing pins the caret — it falls to the center. Hide whatever caret
   bootstrap-select renders (.bs-caret / .caret / bootstrap-4 ::after triangle)
   and draw one chevron pinned to the right edge. */
.swal2-popup .bootstrap-select > .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-right: 40px !important;
  position: relative;
}
.swal2-popup .bootstrap-select > .dropdown-toggle .filter-option {
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
}
.swal2-popup .bootstrap-select > .dropdown-toggle .bs-caret,
.swal2-popup .bootstrap-select > .dropdown-toggle .caret { display: none !important; }
.swal2-popup .bootstrap-select > .dropdown-toggle::after {
  content: '\f078';
  font-family: FontAwesome;
  border: 0 !important;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kt-muted);
  pointer-events: none;
  font-size: 13px;
}

/* ── review tables ───────────────────────────────────────────────────────── */
.swal2-popup .table,
#printdiv .table { color: var(--kt-text) !important; }
.table > thead > tr > th {
  background: var(--kt-bg2) !important;
  color: var(--kt-text) !important;
  border: 1px solid var(--kt-bg4) !important;
}
.table > tbody > tr > td,
.swal2-popup .table td { border-color: var(--kt-bg4) !important; color: var(--kt-text); }
.table.gray,
.gray { background-color: var(--kt-bg2) !important; }
.text-primary { color: var(--kt-brand) !important; }
.review-date { color: var(--kt-muted) !important; }
.badge.badge-info {
  background: color-mix(in srgb, var(--kt-brand) 20%, transparent) !important;
  color: var(--kt-text) !important;
  border: 1px solid color-mix(in srgb, var(--kt-brand) 45%, transparent) !important;
  font-family: var(--kt-mono);
  font-weight: 600;
}

/* ── bootstrap-notify toasts (showNotification) ──────────────────────────── */
[data-notify="container"] {
  background: color-mix(in srgb, var(--kt-bg2) 95%, transparent) !important;
  border: 1px solid var(--kt-bg4) !important;
  border-radius: 14px !important;
  color: var(--kt-text) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
[data-notify="container"].alert-success { border-left: 4px solid var(--kt-success) !important; }
[data-notify="container"].alert-danger { border-left: 4px solid var(--kt-danger) !important; }
[data-notify="container"].alert-warning { border-left: 4px solid var(--kt-warn) !important; }
[data-notify="container"].alert-primary,
[data-notify="container"].alert-info { border-left: 4px solid var(--kt-brand) !important; }
[data-notify="container"] [data-notify="message"] { color: var(--kt-text) !important; font-weight: 500; }

/* keep alert text readable on dark (overrides legacy black text) */
.alert-success,
.alert-warning,
.alert-danger,
.alert-info { color: var(--kt-text) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Identify / keypad / hub layout (main kiosk screen — matches prototype)
   ══════════════════════════════════════════════════════════════════════════ */

.kt-screen {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 40px 18px;
  color: var(--kt-text);
  font-family: var(--kt-sans);
}

/* top bar */
.kt-topbar { display: flex; align-items: center; justify-content: space-between; }
.kt-topbar-left { display: flex; align-items: center; gap: 20px; }
.kt-logo { font-family: var(--kt-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.4px; white-space: nowrap; color: var(--kt-text); }
.kt-logo .tms { color: var(--kt-accent); font-weight: 700; }
.kt-logo .dot { opacity: 0.4; padding: 0 1px; }
.kt-rule { width: 1px; height: 30px; background: var(--kt-bg4); }
.kt-station-name { font-size: 12px; color: var(--kt-muted); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.kt-station-id { font-size: 13px; color: var(--kt-text); margin-top: 3px; font-family: var(--kt-mono); font-weight: 600; }
.kt-topbar-right { display: flex; align-items: center; gap: 12px; }

.kt-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; white-space: nowrap; border: 1px solid;
}
.kt-chip.online { background: rgba(61, 214, 140, 0.14); color: var(--kt-success); border-color: rgba(61, 214, 140, 0.3); }
.kt-chip.offline { background: rgba(255, 92, 107, 0.18); color: var(--kt-danger); border-color: rgba(255, 92, 107, 0.4); }
.kt-chip.mode { background: color-mix(in srgb, var(--kt-brand) 16%, transparent); color: color-mix(in srgb, var(--kt-brand) 46%, white); border-color: color-mix(in srgb, var(--kt-brand) 32%, transparent); }
.kt-theme-toggle { background: var(--kt-bg2); color: var(--kt-text); border-color: var(--kt-bg4); cursor: pointer; padding: 0 10px; }
.kt-theme-toggle i { font-size: 14px; line-height: 1; }
/* dark mode shows the sun (switch to light); light mode shows the moon */
.kt-theme-toggle .kt-ico-sun,
.kt-theme-toggle .kt-ico-moon { display: inline-flex; align-items: center; line-height: 1; }
.kt-theme-toggle .kt-ico-moon { display: none; color: #000; }
.kt-light .kt-theme-toggle .kt-ico-sun { display: none; }
.kt-light .kt-theme-toggle .kt-ico-moon { display: inline-flex; }
.kt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kt-success); box-shadow: 0 0 8px var(--kt-success); }
.kt-chip.offline .kt-dot { background: var(--kt-danger); box-shadow: 0 0 8px var(--kt-danger); }
.kt-lock {
  width: 46px; height: 46px; border-radius: 14px; background: var(--kt-bg2);
  border: 1px solid var(--kt-bg4); color: var(--kt-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px;
}
/* "I'm done" action tile — always the last tile, ends the session. Neutral
   gray so it reads as an exit, not a primary action. (.t-done rule lives with
   the other tile accents below.) */

/* stage */
.kt-stage { flex: 1; min-height: 0; display: flex; align-items: center; padding: 24px 0; }

/* ── identify ─────────────────────────────────────────────────────────────── */
.kt-identify { width: 100%; display: flex; gap: 56px; align-items: center; }
.kt-identify-left { flex: 1; min-width: 0; }

.kt-clock-block { margin-bottom: 30px; }
.kt-date { font-size: 13px; color: var(--kt-muted); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }
.kt-clock { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font-family: var(--kt-mono); font-variant-numeric: tabular-nums; }
.kt-clock .hm { font-size: 64px; font-weight: 600; letter-spacing: -2.5px; line-height: 1; }
.kt-clock .ss { font-size: 24px; font-weight: 500; color: var(--kt-muted); }
.kt-clock .ap { font-size: 20px; font-weight: 500; color: var(--kt-dim); }

.kt-identify-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.kt-identify-headings { min-width: 0; }
.kt-kicker { font-size: 15px; color: var(--kt-muted); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.kt-title { font-size: 40px; font-weight: 700; letter-spacing: -1px; margin-top: 8px; line-height: 1.05; }

/* badge input */
.kt-input-wrap {
  position: relative;
  margin-top: 34px; height: 92px; border-radius: 20px; background: var(--kt-bg2);
  border: 1px solid var(--kt-bg4); display: flex; align-items: center; padding: 0 24px; gap: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.kt-input-wrap.is-focus { border-color: color-mix(in srgb, var(--kt-brand) 32%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--kt-brand) 16%, transparent); }
.kt-input-wrap .kt-input-icon { color: var(--kt-dim); font-size: 24px; display: flex; }
.kt-identify .kt-input-wrap #txtid,
.kt-identify .kt-input-wrap input {
  flex: 1; min-width: 0; height: 100%; background: transparent !important; border: none !important;
  outline: none; box-shadow: none !important; color: var(--kt-text) !important;
  font-family: var(--kt-mono) !important; font-size: 48px !important; font-weight: 600 !important;
  letter-spacing: 10px !important; text-align: left !important; padding: 0 !important;
  /* line-height = field inner height so placeholder AND typed value both
     center in the same line box, level with the leading icon */
  line-height: 90px !important;
}
/* native placeholder hidden — Chrome ignores line-height on ::placeholder, so
   it can't be vertically centred. The .kt-input-ph overlay span replaces it. */
.kt-identify .kt-input-wrap input::placeholder,
.kt-identify .kt-input-wrap #txtid::placeholder { color: transparent !important; }
.kt-input-wrap .kt-input-ph {
  position: absolute; top: 50%; left: 58px; transform: translateY(-50%);
  font-family: var(--kt-sans); font-size: 22px; font-weight: 400;
  color: var(--kt-dim); letter-spacing: normal; pointer-events: none;
}
/* hide the overlay once the field has a value */
.kt-identify .kt-input-wrap input:not(:placeholder-shown) ~ .kt-input-ph { display: none; }

.kt-hint { margin-top: 22px; font-size: 15px; color: var(--kt-dim); }
.kt-hint code { font-family: var(--kt-mono); color: var(--kt-muted); background: transparent; padding: 0; }

/* ── keypad (tablet only) ─────────────────────────────────────────────────── */
.kt-keypad-pane { width: 320px; flex-shrink: 0; display: none; }
.kt-kb-toggle { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.kt-seg {
  width: 160px; background: var(--kt-bg2); border: 1px solid var(--kt-bg4);
  border-radius: 12px; padding: 4px; display: flex; gap: 4px;
}
.kt-seg button {
  flex: 1; height: 34px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--kt-muted); font-family: var(--kt-mono); font-size: 14px; font-weight: 600; cursor: pointer;
}
.kt-seg button.active { background: color-mix(in srgb, var(--kt-brand) 16%, transparent); border-color: color-mix(in srgb, var(--kt-brand) 32%, transparent); color: color-mix(in srgb, var(--kt-brand) 46%, white); }

.kt-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kt-key {
  height: 58px; border-radius: 14px; border: 1px solid var(--kt-bg4); background: var(--kt-bg2);
  color: var(--kt-text); font-family: var(--kt-mono); font-size: 24px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s, background .15s;
}
.kt-key:active { transform: scale(.94); }
.kt-key.secondary { background: transparent; color: var(--kt-muted); font-size: 14px; }
.kt-key.secondary .fa { font-size: 18px; }

/* qwerty */
.kt-qwerty { display: none; flex-direction: column; gap: 8px; }
.kt-qwerty-row { display: flex; gap: 6px; justify-content: center; }
.kt-qkey {
  width: 28px; height: 46px; flex: 1; border-radius: 10px; border: 1px solid var(--kt-bg4); background: var(--kt-bg2);
  color: var(--kt-text); font-family: var(--kt-mono); font-size: 16px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kt-qkey.wide { flex: 1.6; background: transparent; color: var(--kt-muted); font-family: var(--kt-sans); font-size: 13px; }
.kt-qkey:active { transform: scale(.92); }

/* continue */
.kt-continue {
  width: 100%; height: 56px; margin-top: 14px; border-radius: 16px; border: none;
  background: var(--kt-brand); color: #fff; font-family: var(--kt-sans); font-size: 17px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--kt-brand) 32%, transparent);
}
.kt-continue:disabled { opacity: 0.45; cursor: not-allowed; }
.kt-continue-mobile { display: flex; max-width: 420px; }

/* Show on-screen keypad on tablet-sized screens OR SMALLER — both orientations.
   Triggers (OR): viewport at/below tablet width, OR any coarse-pointer (touch)
   device. Coarse-pointer survives Chrome device-mode rotation. Large desktop
   with a fine pointer is the only case that keeps the keypad hidden. */
@media (max-width: 1366px), (pointer: coarse) {
  .kt-keypad-pane { display: block; }
  .kt-continue-mobile { display: none; }
}

/* side-by-side layout while there's room (wide tablets / landscape) */
@media (min-width: 600px) and (max-width: 1366px), (pointer: coarse) and (min-width: 600px) {
  .kt-identify { gap: 32px; }
  /* Camera can't sit beside the big title at tablet width without overlapping it.
     Flatten the header (display:contents) so the camera becomes a column item, then
     order it above the clock, centered. */
  .kt-identify-left { display: flex; flex-direction: column; }
  .kt-identify-head { display: contents; }
  #QRScanner { order: -1; margin: 0 auto 20px; }
}

/* stack the keypad under the field only on phones */
@media (max-width: 599.98px) {
  .kt-screen { padding: 18px 18px 14px; }
  .kt-identify { flex-direction: column; gap: 20px; align-items: stretch; }
  .kt-identify-head { flex-direction: column; align-items: stretch; gap: 16px; }
  #QRScanner { width: 100%; max-width: 420px; margin: 0 auto; }
  .kt-keypad-pane { width: 100%; max-width: 420px; margin: 0 auto; }
  .kt-kb-toggle { justify-content: center; }
  .kt-title { font-size: 28px; }
  .kt-clock .hm { font-size: 44px; }
  .kt-input-wrap { height: 72px; }
  .kt-identify .kt-input-wrap input { font-size: 34px !important; letter-spacing: 5px !important; line-height: 70px !important; }
  .kt-identify .kt-input-wrap input::placeholder { line-height: 70px !important; }
}

/* ── action hub (after Continue) ─────────────────────────────────────────── */
.kt-hub { width: 100%; display: flex; gap: 48px; align-items: center; }
.kt-hub-left { width: 420px; flex-shrink: 0; }
.kt-hub-badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--kt-bg2); border: 1px solid var(--kt-bg4); margin-bottom: 20px;
}
.kt-hub-avatar {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--kt-brand), var(--kt-accent));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;
}
.kt-hub-badge .kt-hub-id { font-family: var(--kt-mono); font-size: 18px; font-weight: 600; color: var(--kt-text); padding-right: 8px; }
.kt-hub-kicker { font-size: 14px; color: var(--kt-muted); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
.kt-hub-title { font-size: 32px; font-weight: 700; letter-spacing: -0.7px; margin-top: 4px; }
.kt-hub-note { margin-top: 18px; font-size: 14px; color: var(--kt-muted); line-height: 1.5; }

/* Live device clock card in the action hub */
.kt-hub-clock { margin-top: 18px; padding: 20px 22px; border-radius: 18px; background: var(--kt-bg2); border: 1px solid var(--kt-bg4); }
.kt-hub-clock-label { font-size: 12px; color: var(--kt-muted); font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.kt-hub-clock .kt-clock { margin-top: 6px; }
.kt-hub-pill {
  margin-top: 12px; text-align: center; padding: 9px 14px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; font-size: 14px;
}
.kt-hub-pill-date { color: #F7A23B; background: color-mix(in srgb, #F7A23B 14%, transparent); border: 1px solid color-mix(in srgb, #F7A23B 42%, transparent); }
.kt-hub-pill-day { margin-top: 8px; color: var(--kt-brand); background: color-mix(in srgb, var(--kt-brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kt-brand) 42%, transparent); }
.kt-hub-back {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; margin-top: 22px;
  border-radius: 12px; background: var(--kt-bg2); border: 1px solid var(--kt-bg4); color: var(--kt-muted);
  font-size: 14px; font-weight: 600; cursor: pointer;
}

.kt-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kt-tile {
  height: 180px; border-radius: 24px; background: var(--kt-bg2); border: 1px solid var(--kt-bg4);
  color: var(--kt-text); padding: 24px; text-align: left; cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .12s, border-color .15s;
}
.kt-tile:active { transform: scale(.97); }
.kt-tile-glow { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; opacity: .7; filter: blur(26px); }
.kt-tile-ico {
  width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; position: relative; border: 1px solid;
}
.kt-tile-ico svg { width: 30px; height: 30px; }
.kt-tile-title { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; position: relative; }
.kt-tile-sub { font-size: 15px; color: var(--kt-muted); margin-top: 5px; position: relative; }

.kt-tile.t-in .kt-tile-ico { background: rgba(61,214,140,.14); color: var(--kt-success); border-color: rgba(61,214,140,.3); }
.kt-tile.t-in .kt-tile-glow { background: rgba(61,214,140,.14); }
.kt-tile.t-out .kt-tile-ico { background: rgba(255,92,107,.14); color: var(--kt-danger); border-color: rgba(255,92,107,.3); }
.kt-tile.t-out .kt-tile-glow { background: rgba(255,92,107,.14); }
.kt-tile.t-review .kt-tile-ico { background: color-mix(in srgb,var(--kt-accent) 15%,transparent); color: var(--kt-accent); border-color: color-mix(in srgb,var(--kt-accent) 32%,transparent); }
.kt-tile.t-review .kt-tile-glow { background: color-mix(in srgb,var(--kt-accent) 15%,transparent); }
.kt-tile.t-transfer .kt-tile-ico,
.kt-tile.t-callback .kt-tile-ico,
.kt-tile.t-leave .kt-tile-ico { background: color-mix(in srgb,var(--kt-brand) 16%,transparent); color: color-mix(in srgb,var(--kt-brand) 46%,white); border-color: color-mix(in srgb,var(--kt-brand) 32%,transparent); }
.kt-tile.t-transfer .kt-tile-glow,
.kt-tile.t-callback .kt-tile-glow,
.kt-tile.t-leave .kt-tile-glow { background: color-mix(in srgb,var(--kt-brand) 16%,transparent); }
/* Callback tile: golden amber accent (overrides the shared brand color above) */
.kt-tile.t-callback .kt-tile-ico { background: rgba(232,173,60,.16); color: #E8AD3C; border-color: rgba(232,173,60,.34); }
.kt-tile.t-callback .kt-tile-glow { background: rgba(232,173,60,.18); }
.kt-tile.t-done .kt-tile-ico { background: var(--kt-bg3); color: var(--kt-text); border-color: var(--kt-bg4); }
.kt-tile.t-done .kt-tile-glow { background: rgba(255,255,255,.04); }

/* Tablet: keep the action hub side-by-side (left info + 2-col tiles), just shrunk. */
@media (min-width: 600px) and (max-width: 991.98px) {
  .kt-hub { gap: 24px; }
  .kt-hub-left { width: 280px; }
  .kt-hub-title { font-size: 26px; }
  .kt-hub-clock { padding: 16px 18px; margin-top: 14px; }
  .kt-hub-clock .kt-clock .hm { font-size: 46px; }
  .kt-hub-clock .kt-clock .ss { font-size: 20px; }
  .kt-hub-pill { padding: 7px 12px; font-size: 13px; }
  .kt-tiles { gap: 12px; }
  .kt-tile { height: 140px; padding: 18px; border-radius: 20px; }
  .kt-tile-ico { width: 48px; height: 48px; border-radius: 14px; }
  .kt-tile-ico svg { width: 26px; height: 26px; }
  .kt-tile-title { font-size: 21px; }
  .kt-tile-sub { font-size: 13px; }
}

/* Phones only: stack the hub. */
@media (max-width: 599.98px) {
  .kt-hub { flex-direction: column; align-items: stretch; gap: 24px; }
  .kt-hub-left { width: 100%; }
  .kt-tiles { grid-template-columns: 1fr; }
  .kt-tile { height: auto; min-height: 120px; }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.kt-footer { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--kt-dim); padding-top: 8px; }
.kt-footer .org { color: color-mix(in srgb, var(--kt-brand) 46%, white); font-weight: 600; }
.kt-footer .sync { display: flex; align-items: center; gap: 7px; }
.kt-footer .sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--kt-success); display: inline-block; }

/* QR scanner pane — sits to the right of the "Identify yourself" heading, above the badge field */
#QRScanner { width: 300px; max-width: 100%; flex-shrink: 0; }
#QRScanner #reader { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Transfer screen (matches prototype KtTransfer)
   ══════════════════════════════════════════════════════════════════════════ */
#divTransfer { width: 100%; }
.kt-transfer { width: 100%; display: flex; gap: 56px; align-items: center; }
.kt-transfer-left { width: 420px; flex-shrink: 0; }
.kt-tr-back {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px;
  border-radius: 12px; background: var(--kt-bg2); border: 1px solid var(--kt-bg4); color: var(--kt-muted);
  font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 28px;
}
.kt-tr-icon {
  width: 64px; height: 64px; border-radius: 18px; margin-bottom: 20px;
  background: var(--kt-orange-soft, color-mix(in srgb, var(--kt-accent) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--kt-accent) 32%, transparent);
  color: var(--kt-accent); display: flex; align-items: center; justify-content: center;
}
.kt-tr-icon svg { width: 30px; height: 30px; }
.kt-tr-title { font-size: 36px; font-weight: 700; letter-spacing: -0.8px; }
.kt-tr-emp { font-size: 17px; color: color-mix(in srgb, var(--kt-brand) 46%, white); font-weight: 600; margin-top: 6px; }
.kt-tr-warn {
  margin-top: 22px; padding: 16px 18px; border-radius: 16px;
  background: color-mix(in srgb, var(--kt-warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--kt-warn) 25%, transparent);
  display: flex; gap: 12px; align-items: flex-start; color: var(--kt-warn); font-size: 14px; line-height: 1.5;
}
.kt-tr-warn .fa { margin-top: 2px; }

.kt-tr-right { flex: 1; max-width: 560px; }
.kt-tr-heading { font-size: 13px; color: var(--kt-muted); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 16px; }
.kt-tr-field { margin-bottom: 16px; }
.kt-tr-field .col-form-label,
.kt-tr-label { display: block; font-size: 14px; color: var(--kt-muted); margin-bottom: 10px; font-weight: 500; }

/* selectpicker styled as a big dark field with leading icon + chevron */
.kt-field { position: relative; }
.kt-field-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 3; color: var(--kt-muted); pointer-events: none; font-size: 16px; }
.kt-field::after {
  content: '\f078'; font-family: FontAwesome; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); color: var(--kt-muted); pointer-events: none; font-size: 14px;
}
.kt-field .bootstrap-select { width: 100% !important; }
/* NOTE: #divTransfer prefix is required — #divTransfer .btn-primary (ID
   specificity) paints these blue, so a class-only selector loses even with
   !important. Keep the ID here to win the cascade. */
#divTransfer .kt-field .bootstrap-select > .dropdown-toggle.btn-primary,
#divTransfer .kt-field .bootstrap-select > .dropdown-toggle.bs-placeholder,
#divTransfer .kt-field .bootstrap-select .btn.btn-primary,
#divTransfer .kt-field .bootstrap-select .btn.btn-round {
  height: 68px !important; border-radius: 16px !important;
  padding-left: 48px !important; padding-right: 44px !important;
  font-size: 19px !important; display: flex; align-items: center;
  background: var(--kt-bg1) !important;
  color: var(--kt-text) !important;
  border: 1px solid var(--kt-bg3) !important;
  box-shadow: none !important;
}
/* pin the value/placeholder text clear of the leading icon — don't rely on
   bootstrap-select's padding-left:inherit, which drops on some renders and
   lets the icon overlap the text */
.kt-field .bootstrap-select > .dropdown-toggle .filter-option,
.kt-field .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  display: flex; align-items: center;
  padding-left: 48px !important;
}
.kt-field .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { padding-left: 0 !important; }
/* darker open menu to match the prototype */
.kt-field .bootstrap-select .dropdown-menu { background: var(--kt-bg1) !important; }
/* selectpicker draws its own caret; hide it in favour of our ::after chevron */
.kt-field .bootstrap-select .bs-caret,
.kt-field .bootstrap-select .dropdown-toggle .caret { display: none !important; }

#btnSubmitTransfer {
  width: 100% !important; height: 72px !important; border-radius: 18px !important;
  font-size: 19px !important; margin-top: 10px;
}

@media (max-width: 991.98px) {
  .kt-transfer { flex-direction: column; align-items: stretch; gap: 24px; }
  .kt-transfer-left { width: 100%; }
  .kt-tr-right { max-width: none; }
  .kt-tr-title { font-size: 30px; }
}