/* ════════════════════════════════════════════════════════════════════
 * KET — Thai Corporate Banking theme overlay
 * Loaded AFTER index.html's inline <style>. Re-skins the whole app
 * (navy #0f2a52 + gold #c8a96a + Sarabun) without touching JS.
 *
 * Header: 3-tier Corporate Banking
 *   .kdp-util-row  — utility bar  32px  (system name · clock · user)
 *   .kdp-main-row  — brand bar    56px  (logo + brand text)
 *   .kdp-nav-row   — nav bar      44px  (nav tabs · gold underline)
 * ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────────────────── */
  --tb-navy:        #0f2a52;
  --tb-navy-deep:   #0a1f3f;
  --tb-navy-soft:   #1d3b6b;
  --tb-gold:        #c8a96a;
  --tb-gold-deep:   #a07d3a;
  --tb-gold-soft:   #f4ecda;

  --tb-text:        #1f2a44;
  --tb-text-2:      #3c4a64;
  --tb-muted:       #5b6b85;
  /* faint: darkened #9aa6bb→#66758f for WCAG 1.4.3 (was 2.46:1 on white,
   * now 4.66:1). Still lighter than --tb-muted so the hierarchy holds.
   * a11y audit 2026-06-01 (ui-ux-pro-max). */
  --tb-faint:       #66758f;
  --tb-line:        #d8dde6;
  --tb-line-soft:   #eef0f4;

  --tb-bg:          #f4f5f7;
  --tb-bg-2:        #fafbfd;
  --tb-surface:     #ffffff;

  --tb-red:         #c92a2a;
  --tb-red-bg:      #fdecec;
  --tb-red-bd:      #f3c5c5;
  --tb-green:       #0a7a3b;
  --tb-green-bg:    #e8f6ee;
  --tb-green-bd:    #bfe2cc;
  --tb-amber:       #b8870b;
  --tb-amber-bg:    #fdf3dc;
  --tb-amber-bd:    #e7cb87;
  --tb-blue:        #1d4ed8;
  --tb-blue-bg:     #e7eefc;

  --tb-r:           4px;
  --tb-r-lg:        6px;
  --tb-mono:        ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Two-tier header: toprow 54px + nav 46px = 100px */
  --tb-header-h:   100px;

  /* ── Override existing app tokens so untouched pages re-skin ── */
  --bg:           var(--tb-bg);
  --surface:      var(--tb-surface);
  --surface2:     var(--tb-bg-2);
  --surface-3:    var(--tb-bg);
  --text:         var(--tb-text);
  --text2:        var(--tb-muted);
  --muted:        var(--tb-faint);
  --muted-2:      var(--tb-muted);
  --border:       var(--tb-line);
  --border-soft:  var(--tb-line-soft);
  --border-2:     var(--tb-line);
  --accent:       var(--tb-navy);
  --accent-bg:    var(--tb-gold-soft);
  --red:          var(--tb-red);
  --red-bg:       var(--tb-red-bg);
  --green:        var(--tb-green);
  --green-bg:     var(--tb-green-bg);
  --yellow:       var(--tb-amber);
  --yellow-bg:    var(--tb-amber-bg);
  --sidebar-bg:   var(--tb-navy);
  --r:            var(--tb-r);
  --sh:           0 1px 2px rgba(15, 42, 82, .06);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Body / typography ─────────────────────────────────────── */
html {
  /* base สีพื้นเรียบ — mesh จริงย้ายไป body::before ด้านล่าง */
  background: #eef1f6 !important;
}

/* ════ Corporate gradient mesh — PERF FIX 2026-06-05 ════
 * เดิมใช้ background-attachment:fixed บน html → browser ต้อง repaint
 * ทั้ง viewport ทุกครั้งที่ scroll (กระตุกหนักบนหน้าการ์ดเยอะ เช่น
 * หลักทรัพย์ 856 ใบ). เปลี่ยนเป็น fixed-position pseudo-element ที่
 * วาดครั้งเดียวแล้ว composite — ภาพเหมือนเดิมทุกประการ แต่ scroll ลื่น */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 14% 8%,   rgba( 15,  42,  82, .085) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 90% 6%,   rgba( 31,  59, 107, .060) 0%, transparent 58%),
    radial-gradient(ellipse 70% 60% at 86% 92%,  rgba(200, 169, 106, .070) 0%, transparent 62%),
    linear-gradient(160deg, #f4f6fa 0%, #eef1f6 52%, #f5f2ec 100%);
}

html, body {
  font-family: 'Sarabun', 'TH Sarabun New', -apple-system, system-ui, sans-serif !important;
  color: var(--tb-text) !important;
  font-feature-settings: "tnum" 1;
  overflow-x: hidden !important;
}
/* Body transparent so html pastel mesh shows through */
body {
  background: transparent !important;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  max-width: 100vw;
}

/* Pages & content transparent — mesh shows through everywhere */
.page, .content, .app, .main,
.srp-page, #pg-dashboard {
  background: transparent !important;
}

.s-pill, .badge, .num, .number, .amount, .pct, .pill,
[class*="amt"], [class*="balance"], [class*="overdue"], [class*="count"] {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
 * Hide legacy sidebar chrome — sidebar removed from HTML
 * ════════════════════════════════════════════════════════════ */
.sidebar, aside.sidebar, .sidebar-overlay {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
}
.s-collapse-btn,
.mobile-header,
.main > .topbar {
  display: none !important;
}
.main {
  margin-left: 0 !important;
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════
 * HEADER (#kd-topnav) — two-tier premium (row1 48px + row2 38px)
 * ════════════════════════════════════════════════════════════ */
#kd-topnav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 200 !important;
  /* Deep navy base with very subtle glass layer on top */
  /* ponytail: ปิด backdrop-filter — header fixed เต็มจอ เบลอพื้นหลังใหม่ทุกเฟรมที่ scroll = แลคทุกหน้า. bg ทึบ .985 หน้าตาเหมือนเดิม */
  background: rgba(9, 27, 53, .985) !important;
  color: #fff !important;
  height: auto !important;
  box-shadow:
    0 1px 0 rgba(200,169,106,.25),
    0 4px 32px rgba(5, 15, 35, .45) !important;
  border-top: 3px solid #c8a96a !important;
  /* Smooth header transitions */
  transition: background var(--dur-m, 240ms) ease,
              box-shadow  var(--dur-m, 240ms) ease !important;
}

/* ชดเชยความสูง fixed header: toprow 54px + nav 46px = 100px */
body { padding-top: 100px; }

/* ── Fix double top-offset (ui audit 2026-06-01) ──
 * base CSS มี `.app { margin-top: var(--nav-h) }` (100px desktop / 44px mobile)
 * ซึ่งซ้อนกับ `body { padding-top }` ด้านบน (ket-theme เพิ่มไว้ชดเชย fixed
 * header) → ดัน content ลงเป็น 2 เท่า เหลือช่องว่างเปล่า 1 ช่วง header ทุกหน้า
 * (มองไม่เห็นบนหน้าพื้นโปร่งใส แต่เห็นชัดบนหน้าที่ขึ้นต้นด้วย banner สีทึบ).
 * body padding-top จองที่ให้ header ครบแล้ว → .app ไม่ต้อง margin-top อีก.
 * --nav-h ยัง = body padding ทุก breakpoint → calc(100vh - nav-h) ยังถูกต้อง. */
.app { margin-top: 0 !important; }

/* Clock */
.kdp-clock {
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* User box */
.kdt-user { position: relative; }
.kdt-userbox {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(200, 169, 106, .25) !important;
  color: #fff !important;
  padding: 5px 12px !important;
  border-radius: var(--tb-r) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  transition: background .15s, border-color .15s !important;
  height: 30px !important;
  min-height: 0 !important;
}
.kdt-userbox:hover {
  background: rgba(255, 255, 255, .14) !important;
  border-color: var(--tb-gold) !important;
}
#kdt-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-r);
  box-shadow: 0 8px 24px rgba(15, 42, 82, .18);
  min-width: 180px;
  padding: 4px 0;
  z-index: 400;
}
#kdt-user-menu.open { display: block; }
#kdt-user-menu button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 10px 16px !important;
  border: 0 !important;
  background: none !important;
  color: var(--tb-text) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
#kdt-user-menu button:hover {
  background: var(--tb-bg) !important;
  color: var(--tb-navy) !important;
}

.badge {
  background: var(--tb-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
}

/* ════════════════════════════════════════════════════════════
 * Page surface
 * ════════════════════════════════════════════════════════════ */
.app { display: flex !important; min-height: 100vh !important; max-width: 100vw !important; overflow-x: hidden !important; }
.main { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
.content { padding: 20px 24px !important; }

/* ── Cards / surfaces — Liquid Glass (iOS-style) ──────────── */
:root {
  --glass-bg:       rgba(255, 255, 255, .93);
  --glass-bg-hover: rgba(255, 255, 255, .97);
  --glass-border:   rgba(255, 255, 255, .80);
  --glass-border-2: rgba(200, 169, 106, .14);
  /* ponytail: backdrop-filter blur = ต้นเหตุแลค/กระตุกตอน scroll (re-blur ทุกเฟรม ทั้ง .card/.panel/.acct-panel).
     ปิดทั้งแอป + ดัน --glass-bg ทึบขึ้นให้หน้าตาเหมือนเดิม. อยากได้กระจกเบลอจริงคืน → blur(28px) saturate(160%) */
  --glass-blur:     none;
  --glass-r:        14px;
  --glass-sh:
    0 2px  10px rgba( 15,  42,  82, .07),
    0 8px  30px rgba( 15,  42,  82, .05),
    inset 0 1px  0 rgba(255, 255, 255, .90),
    inset 0 -1px 0 rgba( 15,  42,  82, .04);
}

.card, .panel, .surface {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-r) !important;
  box-shadow: var(--glass-sh) !important;
  /* extra subtle inner glow top-edge */
  outline: 1px solid var(--glass-border-2) !important;
  outline-offset: -1px !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn, button.btn,
button[type="submit"], .btn-primary {
  border-radius: var(--tb-r) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  min-height: 40px;
}
.btn-primary, button.btn.primary, button.primary,
.btn[data-primary], .btn.is-primary {
  background: var(--tb-navy) !important;
  color: var(--tb-gold) !important;
  border: 1px solid var(--tb-navy) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
.btn-primary:hover { background: var(--tb-navy-deep) !important; }

/* ── Inputs ───────────────────────────────────────────────── */
input[type="text"], input[type="search"], input[type="tel"],
input[type="email"], input[type="number"], input[type="password"],
select, textarea {
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-r) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--tb-text) !important;
  background: #fff !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--tb-navy) !important;
  box-shadow: 0 0 0 3px rgba(15, 42, 82, .08) !important;
}

/* ── Tables ───────────────────────────────────────────────── */
table { border-collapse: collapse !important; }
th {
  background: var(--tb-bg) !important;
  color: var(--tb-muted) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--tb-line) !important;
  padding: 10px 12px !important;
  text-align: left !important;
}
td {
  border-bottom: 1px solid var(--tb-line-soft) !important;
  padding: 12px !important;
}
tbody tr:nth-child(even) td { background: var(--tb-bg-2); }
tr:hover td { background: var(--tb-gold-soft) !important; }

/* ── Status pills ─────────────────────────────────────────── */
.pill, .status-pill, .tag, .chip {
  border-radius: 3px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border: 1px solid currentColor !important;
}
[class*="overdue"], .status-overdue, .pill.danger, .pill.red {
  background: var(--tb-red-bg) !important; color: #9b1a1a !important; border-color: var(--tb-red-bd) !important;
}
.status-paid, .pill.success, .pill.green {
  background: var(--tb-green-bg) !important; color: var(--tb-green) !important; border-color: var(--tb-green-bd) !important;
}
.status-court, .pill.warn, .pill.yellow, .pill.amber {
  background: var(--tb-amber-bg) !important; color: #8a5a00 !important; border-color: var(--tb-amber-bd) !important;
}

/* ── Mono numbers / IDs ───────────────────────────────────── */
.mono, .id, .contract-id, .citizen, .phone-num, [class*="contract"][class*="id"] {
  font-family: var(--tb-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════
 * Dashboard page — transparent so pastel mesh shows through
 * (display controlled by go() JS only — no display rule here)
 * ════════════════════════════════════════════════════════════ */
#pg-dashboard.active {
  background: transparent !important;
  min-height: calc(100vh - var(--tb-header-h)) !important;
}
/* srp-page manages its own padding — full-bleed: ปลด max-width 1400px ของ .content ด้วย */
.content:has(#pg-dashboard.active),
.content:has(#pg-dashboard.on) { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.content:has(#pg-customer.active) { padding: 0 !important; }
#pg-dashboard .kds-hero, #pg-dashboard .kds-body { display: none !important; }

/* ════════════════════════════════════════════════════════════
 * Collateral page — full-bleed fix (ui audit 2026-06-01)
 * หน้านี้ออกแบบเป็น full-bleed (navy hero ติดขอบ). เดิม .content
 * ใส่ inset 44px (margin 0 20px + padding 24px) + .app margin-top 100px
 * ซ้อนกับ body padding-top 100px → hero ลอยเป็นแผง + เว้นช่องว่าง 100px
 * เหนือ hero. แก้แบบ scope หน้านี้เท่านั้น (เหมือน dashboard/customer).
 * ════════════════════════════════════════════════════════════ */
.content:has(#pg-collateral.active) { padding: 0 !important; margin: 0 !important; max-width: none !important; }
/* (double top-offset แก้ระดับ global แล้วที่ `.app { margin-top: 0 }` ด้านบน) */

/* ════════════════════════════════════════════════════════════
 * ทะเบียนสัญญา + การเงิน — full-bleed luxury redesign (2026-06-05)
 * ทั้งสองหน้าใช้ navy hero ติดขอบแบบเดียวกับ dashboard/collateral
 * ════════════════════════════════════════════════════════════ */
.content:has(#pg-accounts.active),
.content:has(#pg-finance.active),
.content:has(#pg-legal.active),
.content:has(#pg-enforcement.active) { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* งานติดตาม — full-bleed: worklist + รายละเอียดใช้เต็มกว้าง ไม่ติด max-width 1400px (เดิมกองกลางจอ) */
.content:has(#pg-notifications.active),
.content:has(#pg-notifications.on) { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* ════════════════════════════════════════════════════════════
 * ค้นหาลูกหนี้ — srp-* namespace
 * ════════════════════════════════════════════════════════════ */
.srp-page {
  padding: 28px 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent;
  min-height: calc(100vh - var(--tb-header-h));
  font-family: 'Sarabun', sans-serif;
  font-size: 14px;
  color: var(--tb-text);
}
.srp-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.srp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--tb-navy);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.srp-meta { font-size: 12px; color: var(--tb-muted); margin-top: 5px; }
.srp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.srp-btn {
  padding: 9px 18px;
  border-radius: var(--tb-r);
  border: 1px solid var(--tb-line);
  background: #fff;
  font-size: 13px; font-weight: 600;
  color: var(--tb-text-2);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.srp-btn:hover { background: var(--tb-bg-2); }
.srp-btn-primary { background: var(--tb-navy); border-color: var(--tb-navy); color: var(--tb-gold); font-weight: 700; }
.srp-btn-primary:hover { background: var(--tb-navy-deep); }

/* search input */
.srp-search-row { display: flex; gap: 10px; align-items: stretch; }
.srp-input {
  flex: 1;
  padding: 14px 18px !important;
  font-size: 15px !important;
  border: 1.5px solid var(--tb-line) !important;
  border-radius: var(--tb-r) !important;
  background: #fff !important;
  color: var(--tb-text) !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.srp-input:focus { border-color: var(--tb-navy) !important; box-shadow: 0 0 0 3px rgba(15,42,82,.07) !important; }
.srp-input::placeholder { color: var(--tb-faint) !important; letter-spacing: .01em !important; }
.srp-group-sel {
  padding: 0 14px;
  border: 1.5px solid var(--tb-line);
  border-radius: var(--tb-r);
  font-size: 13px; font-weight: 600;
  font-family: inherit;
  color: var(--tb-text);
  background: #fff;
  cursor: pointer;
  min-width: 110px;
}

/* filter bar */
.srp-filter-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.srp-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* tab buttons — override dash-kpi-tab & srch-chip */
.srp-tab {
  padding: 7px 16px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--tb-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-direction: row !important;
  transition: background .12s, color .12s !important;
  line-height: 1.4 !important;
  min-width: unset !important;
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.srp-tab:hover { background: var(--tb-bg-2) !important; color: var(--tb-text) !important; }
.srp-tab.on    { background: var(--tb-navy) !important; color: #fff !important; font-weight: 700 !important; border-color: var(--tb-navy) !important; }
.srp-tab.srp-red.on    { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; }
.srp-tab.srp-green.on  { background: #f0fdf4 !important; color: #15803d !important; border-color: #86efac !important; }
.srp-tab.srp-violet.on { background: #f5f3ff !important; color: #6d28d9 !important; border-color: #c4b5fd !important; }
.srp-tab.srp-gray.on   { background: var(--tb-bg-2) !important; color: var(--tb-text-2) !important; border-color: var(--tb-line) !important; }
.srp-tab.srp-court.on  { background: #f5f3ff !important; color: #5b21b6 !important; border-color: #7c3aed !important; }

/* count badge */
.srp-cnt {
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tb-muted);
  min-width: 14px;
}
.srp-tab.on .srp-cnt { color: inherit; opacity: .7; }
.srp-tab.srp-red.on    .srp-cnt { color: #dc2626; opacity: 1; }
.srp-tab.srp-green.on  .srp-cnt { color: #16a34a; opacity: 1; }
.srp-tab.srp-violet.on .srp-cnt { color: #7c3aed; opacity: 1; }

/* recent searches */
.srp-recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srp-recent-lbl { font-size: 11px; font-weight: 600; color: var(--tb-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.srp-recent-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.srp-filt-info { font-size: 12px; color: var(--tb-muted); }

/* legacy .ket-chip — kept for other pages */
.ket-chip {
  padding: 6px 12px;
  border: 1px solid var(--tb-line); border-radius: 20px;
  background: #fff; font-size: 12px; font-weight: 500;
  color: var(--tb-text-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; transition: border-color .15s, background .15s;
}
.ket-chip:hover { background: var(--tb-bg-2); border-color: var(--tb-navy-soft); }
.ket-chip.on { background: var(--tb-gold-soft); border-color: var(--tb-gold); color: var(--tb-navy); font-weight: 700; }
.ket-chip.ever-court.on { background: #f3eeff; border-color: #7c3aed; color: #5b21b6; }

/* legacy .ket-btn — kept for other pages */
.ket-btn {
  padding: 9px 14px; border-radius: var(--tb-r);
  border: 1px solid var(--tb-line); background: #fff;
  font-size: 12px; font-weight: 600; color: var(--tb-text);
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px;
}
.ket-btn:hover { background: var(--tb-bg-2); border-color: var(--tb-navy-soft); }
.ket-btn.primary { background: var(--tb-navy); color: var(--tb-gold); border-color: var(--tb-navy); font-weight: 700; }
.ket-btn.primary:hover { background: var(--tb-navy-deep); }
.ket-btn.danger { color: #9b1a1a; border-color: var(--tb-red-bd); }

/* Results */
.srch-results .card {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-r) !important;
  box-shadow: var(--glass-sh) !important;
  overflow: hidden;
}
.srch-results .card-hd {
  background: rgba(255,255,255,.40) !important;
  border-bottom: 1px solid rgba(255,255,255,.60) !important;
  color: var(--tb-navy) !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
}

/* ════════════════════════════════════════════════════════════
 * MOBILE FULL-MENU BOTTOM SHEET  (#ket-mob-menu)
 * Shown only on ≤640px; JS-controlled via ketMobMenuOpen/Close
 * ════════════════════════════════════════════════════════════ */

/* Backdrop */
#ket-mob-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5, 15, 35, .52);
  z-index: 498;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#ket-mob-overlay.open { display: block; animation: ket-fadeIn .2s ease; }

/* Sheet */
#ket-mob-menu {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 499;
  background: #fff;
  border-radius: 16px 16px 0 0;
  max-height: 84vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.25, .8, .25, 1);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(5, 15, 35, .22);
  font-family: 'Sarabun', sans-serif;
}
#ket-mob-menu.open { transform: translateY(0); }

/* Handle bar */
.mob-handle {
  width: 36px; height: 4px;
  background: rgba(15, 42, 82, .14);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* Header row */
.mob-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 9px;
  border-bottom: 1px solid var(--tb-line-soft);
}
.mob-hd > span {
  font-weight: 800; font-size: 15px;
  color: var(--tb-navy); letter-spacing: -.01em;
}
.mob-hd > button {
  background: var(--tb-bg); border: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--tb-muted); font-size: 14px; cursor: pointer;
  flex-shrink: 0;
}

/* Section */
.mob-sec { padding: 4px 0; }
.mob-sec-lbl {
  padding: 10px 18px 3px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tb-faint);
}

/* Links */
.mob-sec a {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px; min-height: 56px;
  color: var(--tb-text); text-decoration: none;
  font-size: 16px; font-weight: 500;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  -webkit-tap-highlight-color: transparent;
}
.mob-sec a:active {
  background: var(--tb-gold-soft);
  border-left-color: var(--tb-gold);
}
.mob-sec a i {
  width: 22px; text-align: center;
  color: var(--tb-navy); font-size: 18px; flex-shrink: 0;
}

/* Hide on desktop */
@media (min-width: 641px) {
  #ket-mob-overlay, #ket-mob-menu { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
 * GLOBAL ANIMATIONS — ultra-smooth, iOS-grade
 * ════════════════════════════════════════════════════════════ */

/* ── Easing tokens ────────────────────────────────────────── */
:root {
  --ease-spring:  cubic-bezier(.34, 1.4, .64, 1);    /* spring (Professional — เด้งเบา เหมาะงานการเงิน) */
  --ease-smooth:  cubic-bezier(.25, .8,  .25, 1);    /* material smooth */
  --ease-out:     cubic-bezier(.0,  .0,  .2,  1);    /* sharp decelerate */
  --ease-in-out:  cubic-bezier(.4,  .0,  .2,  1);    /* material standard */
  --dur-xs:  80ms;
  --dur-s:  150ms;
  --dur-m:  240ms;
  --dur-l:  360ms;
  --dur-xl: 500ms;
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes ket-fadeUp {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes ket-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ket-scaleIn {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes ket-glassIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);  filter: blur(0); }
}
@keyframes ket-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
@keyframes ket-pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.9); }
}
@keyframes ket-ring {
  from { box-shadow: var(--glass-sh), 0 0 0 0   rgba(15, 42, 82, .22); }
  to   { box-shadow: var(--glass-sh), 0 0 0 4px rgba(15, 42, 82, .08); }
}
@keyframes ket-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* ── Page entrance ─────────────────────────────────────────── */
.page.active {
  animation: ket-fadeUp var(--dur-m) var(--ease-smooth) both;
}

/* ── Card glass entrance — stagger via nth ─────────────────── */
.page.active .card,
.page.active .panel {
  animation: ket-glassIn var(--dur-l) var(--ease-smooth) both;
}
.page.active .card:nth-child(1)  { animation-delay:  20ms; }
.page.active .card:nth-child(2)  { animation-delay:  60ms; }
.page.active .card:nth-child(3)  { animation-delay: 100ms; }
.page.active .card:nth-child(4)  { animation-delay: 140ms; }
.page.active .card:nth-child(5)  { animation-delay: 180ms; }
.page.active .card:nth-child(n+6){ animation-delay: 220ms; }

/* ── Dropdown / user-menu entrance ────────────────────────── */
.kdt-drop-menu.open,
#kdt-user-menu.open {
  animation: ket-scaleIn var(--dur-s) var(--ease-spring) both;
}

/* ── Cards / panels — hover lift + glass brighten ─────────── */
.card, .panel, .surface {
  transition:
    box-shadow    var(--dur-m) var(--ease-smooth),
    transform     var(--dur-m) var(--ease-smooth),
    background    var(--dur-m) var(--ease-smooth),
    border-color  var(--dur-m) var(--ease-smooth) !important;
  /* ponytail: ตัด will-change ถาวร (promote layer ทุก .card/.panel ตลอดอายุ = กิน GPU memory เปล่า —
     will-change ควรชั่วคราว ไม่ใช่ถาวร) + ตัด backdrop-filter ออกจาก transition (--glass-blur:none = no-op) */
}
.card:hover, .panel:hover {
  background: var(--glass-bg-hover) !important;
  box-shadow:
    0 4px  20px rgba(15, 42, 82, .10),
    0 16px 40px rgba(15, 42, 82, .07),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(15, 42, 82, .03) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, .92) !important;
}

/* ── Table: row stagger fade-in on render ──────────────────── */
tbody tr {
  animation: ket-fadeIn var(--dur-m) var(--ease-smooth) both;
  transition: background-color var(--dur-s) var(--ease-smooth) !important;
}
tbody tr:nth-child(1)  { animation-delay:  0ms; }
tbody tr:nth-child(2)  { animation-delay: 25ms; }
tbody tr:nth-child(3)  { animation-delay: 50ms; }
tbody tr:nth-child(4)  { animation-delay: 75ms; }
tbody tr:nth-child(5)  { animation-delay:100ms; }
tbody tr:nth-child(6)  { animation-delay:125ms; }
tbody tr:nth-child(7)  { animation-delay:150ms; }
tbody tr:nth-child(8)  { animation-delay:175ms; }
tbody tr:nth-child(9)  { animation-delay:200ms; }
tbody tr:nth-child(10) { animation-delay:225ms; }
tbody tr:nth-child(n+11){ animation: none; }

/* ── Table cells ───────────────────────────────────────────── */
td { transition: background-color var(--dur-s) var(--ease-smooth) !important; }

/* ── Table rows (tbody) glass surface ──────────────────────── */
tbody { background: transparent; }
tbody tr:hover td {
  background: rgba(255, 255, 255, .65) !important;
  /* ponytail: ตัด backdrop-filter:blur(8px) — re-blur cells ทุกครั้งที่ hover แถว = กระตุกตอนเลื่อนเมาส์บนรายชื่อ */
}
tr:hover td { background: rgba(244, 236, 218, .55) !important; }

/* ── Search result rows (ket-row) ──────────────────────────── */
.ket-row {
  transition:
    background-color var(--dur-s) var(--ease-smooth),
    box-shadow       var(--dur-s) var(--ease-smooth),
    transform        var(--dur-s) var(--ease-smooth) !important;
}
.ket-row:hover {
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: inset 3px 0 0 var(--tb-gold), 0 2px 12px rgba(15,42,82,.06) !important;
  transform: translateX(2px) !important;
}

/* ── Button — transitions & press ─────────────────────────── */
.btn, .ket-btn, .srp-btn, button.btn {
  transition:
    background    var(--dur-s) var(--ease-smooth),
    color         var(--dur-s) var(--ease-smooth),
    border-color  var(--dur-s) var(--ease-smooth),
    box-shadow    var(--dur-s) var(--ease-smooth),
    transform     var(--dur-xs) var(--ease-spring) !important;
  will-change: transform;
}
button:active:not(:disabled),
.btn:active, .ket-btn:active, .srp-btn:active {
  transform: scale(.965) !important;
}

/* ── Input / focus ring ────────────────────────────────────── */
input, select, textarea {
  transition:
    border-color  var(--dur-s)  var(--ease-smooth),
    box-shadow    var(--dur-m)  var(--ease-smooth),
    background    var(--dur-s)  var(--ease-smooth) !important;
}
input:focus, select:focus, textarea:focus {
  animation: ket-ring var(--dur-m) var(--ease-smooth) forwards !important;
}

/* ── Skeleton shimmer loader ───────────────────────────────── */
.ket-skeleton, .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.45) 25%,
    rgba(255,255,255,.80) 50%,
    rgba(255,255,255,.45) 75%
  );
  background-size: 200% 100%;
  animation: ket-shimmer 1.6s var(--ease-in-out) infinite;
  border-radius: var(--glass-r);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

/* ── Notification badge pulse ──────────────────────────────── */
#kdtNavBadge:not(:empty) {
  animation: ket-pulseDot 2.4s var(--ease-in-out) infinite;
}

/* ── SRP chip & tab transitions ────────────────────────────── */
.srp-tab, .ket-chip {
  transition:
    background-color var(--dur-s) var(--ease-smooth),
    color            var(--dur-s) var(--ease-smooth),
    border-color     var(--dur-s) var(--ease-smooth),
    box-shadow       var(--dur-s) var(--ease-smooth),
    transform        var(--dur-xs) var(--ease-smooth) !important;
}
.srp-tab:hover, .ket-chip:hover {
  transform: translateY(-1px) !important;
}

/* ── Modal / overlay — glass treatment ─────────────────────── */
/* overlay: NO backdrop-filter — กัน isolated stacking context ที่ทำให้ modal-box blur ทะลุไม่ได้ */
.modal-overlay, .modal-backdrop,
[id$="Overlay"], [id*="overlay"] {
  background: rgba(10, 20, 50, .32) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: ket-fadeIn var(--dur-m) var(--ease-smooth) both !important;
}
/* modal-box: liquid glass — backdrop-filter ทะลุผ่าน overlay ไปยัง page content + html gradient */
.modal-box, .ce-modal {
  /* คืนลุคกระจกฝ้าเดิม (เจ้าของขอ 2026-06-24). #detailModal ตัวหนักสุดยังทึบ/ลื่น
     ผ่าน backdrop-filter-glass.css ที่ override ทับ — modal อื่นได้กระจกกลับ */
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.05) !important;
  backdrop-filter: blur(32px) saturate(180%) brightness(1.05) !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: 16px !important;
  overflow: auto !important;
  box-shadow:
    0  2px  8px  rgba(15, 42, 82, .08),
    0  8px 32px  rgba(15, 42, 82, .12),
    0 24px 64px  rgba(15, 42, 82, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
  animation: ket-glassIn var(--dur-l) var(--ease-spring) both !important;
}

/* ── Inputs — glass surface ────────────────────────────────── */
input[type="text"], input[type="search"], input[type="tel"],
input[type="email"], input[type="number"], input[type="password"],
input[type="date"], select, textarea {
  /* ponytail (C): ตัด backdrop-filter:blur บน input ทุกช่อง — ลด paint/พิมพ์ลื่นขึ้น + bg ทึบ */
  background: rgba(255, 255, 255, .95) !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 8px !important;
}
input:focus, select:focus, textarea:focus {
  background: rgba(255, 255, 255, .90) !important;
  border-color: rgba(15, 42, 82, .40) !important;
  box-shadow:
    0 0 0 3px rgba(15, 42, 82, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

/* ── Custom scrollbars ─────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: rgba(255,255,255,.20); border-radius: 8px; }
::-webkit-scrollbar-thumb  { background: rgba(15,42,82,.20); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,42,82,.38); }
*  { scrollbar-width: thin; scrollbar-color: rgba(15,42,82,.20) transparent; }

/* ── Reduced motion (accessibility) ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       .01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:      .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
 * RESPONSIVE — tablet (900px)
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .kdp-brand-en { display: none !important; }
  .kdp-clock    { display: none !important; }

  /* 641–900px: nav row ยังแสดงอยู่ (ซ่อนจริงแค่ ≤640) — header = 54+46 = 100px
   * เดิมตั้ง padding-top 44px ที่นี่ → เนื้อหา 56px แรกมุดใต้ header fixed
   * ตลอดช่วงแท็บเล็ต/มือถือแนวนอน (ถูก mShell บังไว้เลยไม่เคยโผล่ — แก้ 2026-06-06
   * พร้อมเปิดแอปเต็มให้มือถือ). ใช้ base padding-top 100px ตามจริง */

  .ket-stats { grid-template-columns: repeat(2, 1fr); }
  .ket-row { grid-template-columns: 4px 1.6fr 1fr 90px; gap: 10px; }
  .ket-row .due, .ket-row .due-sub, .ket-row .pills { display: none; }

  .content { padding: 14px 16px !important; }
  .srp-page { padding: 18px 20px 40px; }
}

/* ════════════════════════════════════════════════════════════
 * RESPONSIVE — phone (640px)
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Layout foundations ─────────────────────────────────── */
  :root { --tb-header-h: 44px; }

  /* Mobile header = toprow only (nav hidden) = 44px */
  body { padding-top: 44px !important; }

  /* Leave room for bottom tabbar (~68px) + safe area — เฉพาะนอก mobile-shell */
  body:not(.ms-mode) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* LINE FAB (#lc-fab) ลอยทับแท็บ "เมนู" — ยกขึ้นพ้น tabbar + ย่อ */
  #lc-fab {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* ── Prevent horizontal overflow on all mobile pages ───── */
  .page, .content, .app, .main, .card, .card-body,
  #pg-dashboard, #pg-accounts, #pg-notifications,
  #pg-customer, #pg-overview, #pg-finance, #pg-collateral,
  #pg-newcontract, #pg-users, #pg-bankaccounts, #pg-linelogs {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Header: hide desktop nav row, keep brand row only ──── */
  /* Bottom tab bar handles navigation on mobile */
  .kdt-nav { display: none !important; }
  .kdt-toprow { height: 44px !important; padding: 0 12px !important; }
  .kdt-userbox .kdt-uname { display: none; }
  .kdp-brand-th { font-size: 13px !important; }
  .kdp-logo-wrap { width: 40px !important; height: 40px !important; border-radius: 50% !important; margin: 0 !important; }
  .kdp-logo-img  { height: 36px !important; width: 36px !important; }

  /* ── Bottom tab bar — Luxury navy·gold (mobile facelift 2026-06-11) ──
   * เดิมพื้นขาวธรรมดา → นาวีเข้มเข้าชุด header + เส้นทองขอบบน +
   * แท็บ active เป็นทองพร้อม crest bar เล็ก ๆ ด้านบน */
  #ket-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, #102c55 0%, #0a1f3f 100%);
    border-top: none;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    display: flex;
    z-index: 400;
    font-family: inherit;
    box-shadow:
      0 -1px 0 rgba(200, 169, 106, .55),
      0 -8px 26px rgba(5, 15, 35, .35);
  }
  #ket-tabbar a {
    position: relative;
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 5px; padding: 8px 4px;
    text-decoration: none; color: rgba(214, 224, 240, .72);
    font-size: 12px; font-weight: 500;
    min-height: 62px; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: .01em;
  }
  #ket-tabbar a.on  { color: #e9d4a3; font-weight: 700; }
  #ket-tabbar a i   { font-size: 22px; }
  #ket-tabbar a.on i { color: #e3c785; }
  /* gold crest bar above the active tab */
  #ket-tabbar a.on::before {
    content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 3px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #a07d3a, #e3c785, #a07d3a);
  }
  /* focus ring แบบ dark-surface (ทับ rule กลางสำหรับพื้นสว่างที่อยู่ท้ายไฟล์ —
   * ใช้ nav# เพิ่ม specificity ให้ชนะ) */
  nav#ket-tabbar a:focus-visible {
    outline: 2px solid var(--tb-gold) !important;
    outline-offset: -4px !important;
    box-shadow: 0 0 0 4px rgba(200, 169, 106, .30) !important;
  }
  #ket-tabbar .badge {
    position: absolute; top: 4px; margin-left: 16px;
    background: var(--tb-red); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 8px; line-height: 1.1;
    box-shadow: 0 0 0 2px rgba(10, 31, 63, .9);
  }

  /* ── Page content padding ───────────────────────────────── */
  .content  { padding: 12px !important; }
  .srp-page { padding: 14px 14px calc(80px + env(safe-area-inset-bottom,0px)); gap: 14px; }

  /* ── Prevent iOS auto-zoom on input focus (font-size < 16px) */
  input, select, textarea,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="tel"], input[type="email"], input[type="password"],
  input[type="date"], .srp-input {
    font-size: 16px !important;
  }

  /* ── Global touch targets ≥44px ─────────────────────────── */
  button, [role="button"], .ket-btn, .srp-btn, .btn,
  .srp-tab, .ket-chip {
    min-height: 44px;
  }

  /* ── Tables: horizontal scroll with touch momentum ─────── */
  .tbl-wrap, .acct-table-wrap, .um-table-wrap,
  [class*="table-wrap"], [class*="tbl-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100vw !important;
  }
  /* Prevent table cells from wrapping/breaking layout */
  table { min-width: 560px; }

  /* ── Modal sizing: full-width, scrollable ───────────────── */
  .modal-box, .ce-modal {
    width: calc(100vw - 20px) !important;
    max-width: 480px !important;
    max-height: 88vh !important;
    border-radius: 12px !important;
    margin: 10px auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Collateral drawer: full-width on phone ─────────────── */
  #colDrawer {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }
  #colFormModal .col-form-modal {
    width: calc(100vw - 20px) !important;
    max-width: 480px !important;
    max-height: 92vh !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
  }

  /* ── Toast / notification: above tabbar (62px tall) ────── */
  #_globalToast, .toast-box, [id$="Toast"], [id*="toast"],
  .fov-toast-box {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #colToast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Bulk action bar: above tabbar ──────────────────────── */
  #bulk-bar {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Search / SRP ───────────────────────────────────────── */
  .srp-title { font-size: 18px; }
  .srp-search-row { flex-direction: column; }
  .srp-group-sel { width: 100%; min-height: 48px; }
  .srp-tab { padding: 8px 12px !important; font-size: 12px !important; }

  /* ── Debtor list row ────────────────────────────────────── */
  .ket-row {
    grid-template-columns: 4px 1fr auto;
    grid-template-areas:
      "p name amt"
      "p sub  pill";
    padding: 14px 14px;
    row-gap: 4px;
  }
  .ket-row .pri     { grid-area: p;    height: 100%; align-self: stretch; }
  .ket-row .name    { grid-area: name; }
  .ket-row .sub     { grid-area: sub;  }
  .ket-row .amt     { grid-area: amt;  }
  .ket-row .open-btn { grid-area: pill; min-height: 44px; }
  .ket-row .due, .ket-row .due-sub, .ket-row .pills { display: none; }
}

/* ── Very small phones (≤400px) ─────────────────────────────
   Form grids collapse to single column                       */
@media (max-width: 400px) {
  .ncg, .ncg.g2, .ncg.g3, .ncg.g5 {
    grid-template-columns: 1fr !important;
  }
  .nf.s2, .nf.s3, .nf.s4, .nf.s5 {
    grid-column: span 1 !important;
  }
  .srp-title { font-size: 16px; }
  .mob-sec a { font-size: 14px; }
}

@media (min-width: 641px) { #ket-tabbar { display: none !important; } }

/* ════════════════════════════════════════════════════════════
 * Pre-auth: ยังไม่ได้ login (#loginScreen แสดงอยู่) — ซ่อน chrome
 * ที่ใช้ได้เฉพาะหลัง login (tabbar/topnav/LINE FAB) กันกดมั่ว
 * ════════════════════════════════════════════════════════════ */
body:has(#loginScreen:not(.hidden)) #ket-tabbar,
body:has(#loginScreen:not(.hidden)) #kd-topnav,
body:has(#loginScreen:not(.hidden)) #lc-fab {
  display: none !important;
}
/* login เต็มจอ — ไม่ต้องเว้นที่ให้ header/tabbar ที่ซ่อนไป */
body:has(#loginScreen:not(.hidden)) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════
 * PWA install hint banner
 * ════════════════════════════════════════════════════════════ */
#ket-install-banner {
  display: none;
  position: fixed; left: 12px; right: 12px;
  bottom: calc(80px + var(--safe-bottom));
  z-index: 250;
  background: var(--tb-navy); color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(15, 42, 82, .32);
  font-family: 'Sarabun', sans-serif;
  align-items: center; gap: 12px;
}
#ket-install-banner.show { display: flex; }
#ket-install-banner .ib-text { flex: 1; font-size: 13px; }
#ket-install-banner .ib-text b { color: var(--tb-gold); }
#ket-install-banner button {
  background: var(--tb-gold); color: var(--tb-navy);
  border: none; padding: 8px 14px;
  font-size: 12px; font-weight: 700;
  border-radius: 4px; cursor: pointer;
  font-family: inherit; min-height: 36px;
}
#ket-install-banner .ib-close {
  background: transparent; color: rgba(255, 255, 255, .65);
  padding: 4px 8px; font-size: 16px;
}

@supports (padding: env(safe-area-inset-bottom)) {
  body, .app { padding-bottom: var(--safe-bottom); }
}

/* ════════════════════════════════════════════════════════════
 * ACCESSIBILITY — keyboard focus (WCAG 2.4.7 Focus Visible)
 * a11y audit 2026-06-01 (ui-ux-pro-max). Theme loads last so these
 * win over inline `outline:none`. :focus-visible = keyboard only,
 * so mouse clicks never show a ring. Inputs keep their own :focus
 * box-shadow ring (above) — excluded here to avoid a double ring.
 * ════════════════════════════════════════════════════════════ */

/* Safety net: any keyboard-focused element that lost its outline
   (inline `outline:none`) still gets a visible gold ring. Inputs are
   exempt because their :focus rule uses `outline:none !important`. */
*:focus-visible {
  outline: 2px solid var(--tb-gold);
  outline-offset: 2px;
}

/* Stronger themed ring on the primary interactive controls (light surfaces) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.btn:focus-visible, .ket-btn:focus-visible, .srp-btn:focus-visible,
.srp-tab:focus-visible, .ket-chip:focus-visible,
.lr-chip:focus-visible, .modal-close:focus-visible,
#ket-tabbar a:focus-visible, .mob-sec a:focus-visible {
  outline: 2px solid var(--tb-gold) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(15, 42, 82, .18) !important;
}

/* On the dark navy header a lighter gold halo reads better than navy */
#kd-topnav a:focus-visible,
#kd-topnav button:focus-visible,
#kd-topnav [role="button"]:focus-visible,
.kdt-nav-item:focus-visible,
.kdt-userbox:focus-visible {
  outline: 2px solid var(--tb-gold) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(200, 169, 106, .30) !important;
}

/* ════════════════════════════════════════════════════════════
 * SMOOTHNESS PASS (2026-06-01) — calm, buttery motion everywhere.
 * Fills gaps the base theme left snapping (nav, links, sub-tabs),
 * adds smooth programmatic scrolling and soft tab/panel fades.
 * transform / opacity / color only → GPU-friendly, no layout thrash.
 * Fully gated behind prefers-reduced-motion. Does NOT touch the
 * existing animation block above (cards/rows/modals keep their feel).
 * ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Smooth in-page / programmatic scrolling (scrollIntoView, anchors) */
  html { scroll-behavior: smooth; }

  /* Crisper text while elements move/scroll */
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  /* Gentle transitions on controls the base theme changed instantly.
     Excludes .btn/.chip/.col-action-btn etc. — they already have their own. */
  .kdt-nav-item, .kdt-dd-trigger, .kdt-drop-item, .cp-tab,
  .s-item, #ket-tabbar a, .mob-sec a, .tab-btn, [role="tab"],
  a:not(.btn):not(.ket-btn):not(.srp-btn):not([class*="chip"]):not(.col-action-btn):not(.col-map-btn) {
    transition:
      color            var(--dur-s) var(--ease-smooth),
      background-color var(--dur-s) var(--ease-smooth),
      border-color     var(--dur-s) var(--ease-smooth),
      box-shadow       var(--dur-s) var(--ease-smooth),
      opacity          var(--dur-s) var(--ease-smooth);
  }

  /* Soft fade-in when switching detail tabs / customer sub-tabs */
  .tab-content.on, .cp-panel.on {
    animation: ket-fadeIn var(--dur-m) var(--ease-out) both;
  }

  /* Button/nav icons glide subtly with their control (no layout shift) */
  .btn i, .ket-btn i, .srp-btn i, .col-action-btn i, .kdt-nav-item i {
    transition: transform var(--dur-s) var(--ease-smooth);
  }
}

/* ════════════════════════════════════════════════════════════
 * PREMIUM MOTION (2026-06-01) — pronounced page + hover choreography.
 * Pure CSS, opacity/transform only (GPU-cheap even on the 300-card
 * collateral grid — no filter/blur on big containers). Sits after the
 * base animation block so it intentionally upgrades .page.active enter
 * + hover feel. Fully gated behind prefers-reduced-motion.
 * ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* — Page enter: noticeable fade + rise, smooth decelerate — */
  @keyframes ket-pageRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .page.active { animation: ket-pageRise 380ms var(--ease-out) both !important; }

  /* — Card hover: come-alive lift + shadow bloom — */
  .card:hover, .panel:hover, .surface:hover, .srch-results .card:hover {
    transform: translateY(-5px) !important;
  }
  /* PERF 2026-06-08: shadow รัศมี 44px สองชั้น = repaint blur กว้างทุกเฟรมตอน hover การ์ด
   * → ชั้นเดียว 22px (เบากว่า/เร็วกว่า ตาเปล่าใกล้เคียง) */
  .col-card {
    transition: transform .2s var(--ease-spring),
                box-shadow .2s var(--ease-smooth),
                border-color .2s var(--ease-smooth) !important;
  }
  .col-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(15, 42, 82, .14) !important;
  }

  /* — Buttons: gentle lift on hover, snappy press — */
  .btn:hover, .ket-btn:hover, .srp-btn:hover, .col-action-btn:hover,
  .col-add-btn:hover, .col-search-btn:hover, .col-map-btn:hover, .col-auction-btn:hover {
    transform: translateY(-1.5px);
  }
  .btn:active, .ket-btn:active, .srp-btn:active,
  .col-action-btn:active, .col-add-btn:active, .col-search-btn:active {
    transform: translateY(0) scale(.97) !important;
  }

  /* — Nav items: active-state & hover lift a touch — */
  .kdt-nav-item:hover { transform: translateY(-1px); }
  .kdt-nav-item { transition: color var(--dur-s) var(--ease-smooth),
                              background-color var(--dur-s) var(--ease-smooth),
                              transform var(--dur-s) var(--ease-spring) !important; }

  /* — Table row highlight glides in — */
  tbody tr:hover td,
  .col-table-wrap tr:hover td,
  .led-table tr:hover td {
    transition: background-color .18s var(--ease-smooth) !important;
  }
}

/* ── Count-up: numeric KPI tickers animate from 0 on first view ──
 * Helper hook lives in index.html (window.ketCountUp). This only
 * reserves layout so the rolling digits never cause width jitter. */
.col-hero-kpi-num, [data-countup] { font-variant-numeric: tabular-nums; }