/* ---- whcc-typography-marklens.css (v1.11.32 source order retained) ---- */
/* WHCC v1.11.25 — MARKLENS Typography Master
   A single family system across WHCC: Inter (Latin/numbers), Noto Sans Thai (Thai).
   Keep 16:9 TV layout, compact dock tables and animation untouched. */
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --mark-font:"Inter","Noto Sans Thai","Segoe UI",sans-serif;
  --mark-font-thai:"Inter","Noto Sans Thai","Segoe UI",sans-serif;
  --mark-font-numbers:"Inter","Noto Sans Thai",sans-serif;
  --ui-font:var(--mark-font);
  --ui-font-display:var(--mark-font-numbers);
  --ui-font-code:var(--mark-font-numbers);
  --wh-font-body:var(--mark-font);
  --wh-font-numeric:var(--mark-font-numbers);
  --mark-weight-regular:400;--mark-weight-medium:500;--mark-weight-semibold:600;--mark-weight-bold:700;
  --mark-size-caption:11px;--mark-size-small:12px;--mark-size-label:13px;
  --mark-size-body:14px;--mark-size-subtitle:16px;--mark-size-section:20px;--mark-size-page:26px;
  --mark-line-body:1.55;--mark-line-heading:1.3;
}
html,body,button,input,select,textarea,option,table,th,td,dialog,
body :not(svg):not(svg *) {font-family:var(--mark-font)!important}
html,body {font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body {font-size:var(--mark-size-body);line-height:var(--mark-line-body);font-weight:400;letter-spacing:0}
button,input,select,textarea {font-size:var(--mark-size-body);line-height:1.45;letter-spacing:0}
h1,h2,h3,.panel-heading,.wh-dialog-head h3,.wh-users-top h2,.head-title {line-height:var(--mark-line-heading);letter-spacing:-.012em;font-weight:600}
.brand,.brand b,.clock,.num,.container-id,.kpi strong,.wh-stat strong,.tw-code,
.single-countdown,.single-etd,.single-qty,.single-product-total,
.single-time-date,.single-timing-date,.single-timing-time,.single-timing-remaining,
.whcc-queue-chip b.num,.queue-row strong.num {font-family:var(--mark-font-numbers)!important;font-variant-numeric:tabular-nums}
label,.field label,.wh-dialog-form label{font-weight:500;line-height:1.45}
button,.primary,.badge,.pill,.chip,.wh-status-pill,.wh-role-pill{font-weight:600;letter-spacing:0}
/* MARKLENS type hierarchy for desktop UI, without expanding dense operational screens. */
body:not(.tv-mode) .sidebar nav a {font-size:13px;line-height:1.45;font-weight:500}
body:not(.tv-mode) .sidebar nav a.active{font-weight:600}
body:not(.tv-mode) .head-title {font-size:14px!important;line-height:1.3}
body:not(.tv-mode) .panel-heading{font-size:16px}
body:not(.tv-mode) .wh-users-hero h2{font-size:clamp(23px,2vw,28px);font-weight:700}
body:not(.tv-mode) .wh-users-toolbar label{font-size:13px}
body:not(.tv-mode) .wh-users-table th{font-size:12px;font-weight:600}
body:not(.tv-mode) .wh-users-table td{font-size:13px;line-height:1.5}
body:not(.tv-mode) .wh-users-table td strong{font-size:14px}
/* TV can have aggressive space constraints: only unify family, preserve component-specific sizes. */
body.tv-mode,body.tv-mode button,body.tv-mode input {font-family:var(--mark-font)!important}
/* Numeric codes are stable and don't depend on Thai glyph widths. */
@media (max-width:700px){body:not(.tv-mode) .wh-users-table{min-width:780px}}
/* ---- whcc-auth-layout-1128.css (v1.11.32 source order retained) ---- */
/* Responsive WHCC Login + OTP aligned with MARKLENS type tokens. */
.auth-layout{min-height:100svh;height:100svh;grid-template-columns:minmax(330px,37%) minmax(0,63%);gap:clamp(12px,2vw,30px);padding:clamp(14px,2vw,26px) clamp(16px,2.5vw,36px) 45px;overflow:hidden}
.auth-pane{min-height:0}
.auth-card{padding:clamp(18px,2vw,28px) clamp(18px,2.1vw,29px);max-height:calc(100svh - 65px);overflow-y:auto;scrollbar-width:thin}
.auth-card .brand{margin-bottom:clamp(14px,2.5vh,24px)}
.auth-card .brand img{width:56px;height:56px}
.auth-card .heading p{margin-bottom:clamp(13px,2vh,22px)}
.auth-card .mail-note{margin:16px 0 10px}
.auth-card .mail-summary{margin-bottom:17px;padding:11px}
.auth-card .otp-digit{height:clamp(44px,5.9vh,54px)}
.auth-card .otp-hint{margin:10px 0 4px}
.auth-card .primary{min-height:48px;margin-top:13px}
.auth-card .auth-links{margin-top:10px}
.auth-hero{min-height:0;height:100%;max-height:100%;border-radius:24px}
.auth-footer{bottom:11px}
@media(max-width:900px){.auth-layout{height:auto;min-height:100svh;grid-template-columns:1fr;padding:18px 16px 58px;overflow:visible}.auth-pane{min-height:0}.auth-card{max-height:none}.auth-hero{min-height:240px;height:30vh;max-height:330px}.auth-footer{bottom:15px}}
@media(max-width:520px){.auth-layout{padding:10px 10px 46px}.auth-card{padding:22px 16px}.auth-card .otp-grid{gap:6px}.auth-card .otp-digit{height:49px}.auth-hero{min-height:170px}.auth-card .mail-summary strong{overflow-wrap:anywhere;font-size:13px}}
@media(max-height:660px) and (min-width:901px){.auth-card .brand{margin-bottom:10px}.auth-card .heading p{margin-bottom:12px}.auth-card .mail-summary{margin-bottom:10px}.auth-card .primary{margin-top:10px}}
/* ---- whcc-ui-refinement-1129.css (v1.11.32 source order retained) ---- */
/* WHCC v1.11.29 — operational UI finishing; no changes to data or business rules. */
:root{--wh29-cctv:#a8d9f5;--wh29-line:#2b4564}
.camera .camera-missing.whcc-cctv-icon,.camera .whcc-runtime-cctv-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#071a2c;color:var(--wh29-cctv);text-align:center;z-index:1}
.camera .whcc-cctv-camera,.tv-cctv-icon{width:clamp(52px,5.1vw,84px);height:clamp(52px,5.1vw,84px);filter:drop-shadow(0 4px 13px #0b75c633)}
.camera .whcc-cctv-icon small,.camera .whcc-runtime-cctv-fallback small{font-size:12px;font-weight:600;color:#c5d8ed;letter-spacing:0}
.camera .camera-overlay,.camera .camera-bottom,.camera .coal-badge{z-index:3}
body[data-page="overview"] .dock-body .camera{min-width:0}
body[data-page="overview"] .whcc-empty-content h3{font-size:clamp(16px,1.4vw,20px);line-height:1.35}
body[data-page="overview"] .whcc-empty-content p{font-size:12px;line-height:1.4}
body[data-page="single"] .whcc-empty-single-template .monitor-detail-field{min-height:0}
body[data-page="queue"] .whcc-queue-table .table-area{max-width:100%}
body[data-page="queue"] .whcc-queue-table :is(td,th){font-variant-numeric:tabular-nums}
body[data-page="users"] .wh-users-premium .wh-users-card{min-height:0}
body[data-page="users"] .wh-users-premium .wh-user-actions button{min-width:40px}
body[data-page="twin"] #twThumb .tw-thumb-fallback .whcc-cctv-camera{width:56px;height:56px;opacity:1;color:#aedfff;filter:drop-shadow(0 4px 12px #0e86d844)}
body[data-page="twin"] #twThumb .tw-thumb-fallback{gap:10px}
body[data-page="twin"] #twThumb[data-state="connecting"] .tw-thumb-fallback{color:#afcce8}
body[data-page="twin"] #twThumb[data-state="offline"] .tw-thumb-fallback{color:#c9d9e9}
body[data-page="twin"] #twThumb[data-state="live"] .tw-thumb-fallback{display:none!important}
.tv-cctv-fallback .tv-cctv-icon{width:clamp(54px,5vw,86px);height:clamp(54px,5vw,86px);color:#aedfff;opacity:1}
/* Auth: keep warehouse hero image asset untouched, simplify the form card. */
.auth-card .brand{margin-bottom:clamp(10px,2vh,18px)}
.auth-card .heading p{line-height:1.5}
.auth-card .mail-note{margin:12px 0 0;padding:0;background:transparent;border:0;box-shadow:none}
.auth-card .mail-note p{margin:0;text-align:center;font-size:12px;line-height:1.5;color:#64748b}
@media(max-width:900px){.auth-card .mail-note{margin-top:12px}}

/* v1.11.52 — warehouse readiness visual, never overlay simulated KPIs or logos. */
.auth-hero .hero-art{background-image:url('/static/img/movix-warehouse-readiness-v1152.jpg');background-position:50% 50%;}
.auth-hero .hero-overlay,.auth-hero .hero-wordmark,.auth-hero .hero-bottom{display:none!important;}

/* v1.11.55: focused OTP / Login finishing; preserve warehouse artwork. */
.auth-card form button:disabled[aria-busy="true"]{opacity:.78;cursor:progress;filter:none}
.auth-card .mail-summary{gap:12px;min-width:0}
.auth-card .mail-summary>div{min-width:0}
.auth-card .mail-summary strong{overflow-wrap:anywhere;line-height:1.5}
.auth-card .otp-digit{font-variant-numeric:tabular-nums}
.auth-card .otp-digit:focus-visible,.auth-card .primary:focus-visible,.auth-card .textbutton:focus-visible{outline:2px solid #216bfa;outline-offset:3px}
.auth-card .auth-links a:focus-visible{outline:2px solid #216bfa;outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.auth-card .primary,.auth-card .otp-digit{transition:none}}

/* MOVIX Final UI — disabled means incomplete phone / OTP, not an active action. */
.auth-card .primary:disabled:not([aria-busy="true"]){background:#c4cddf!important;color:#64748b!important;box-shadow:none!important;opacity:.72;cursor:not-allowed;filter:none!important;transform:none!important;}
.auth-card .primary:disabled:not([aria-busy="true"]):hover{background:#c4cddf!important;filter:none!important;box-shadow:none!important;transform:none!important;}
.auth-card .primary:disabled[aria-busy="true"]{cursor:progress;opacity:.82;}