/* ASHER CRM sandbox test console.
 *
 * ชุดสีและฟอนต์ยึดตาม ASHER Connect (asher-connect/public/app.css) เป๊ะ ๆ —
 * สองแอปนี้คือระบบเดียวกันในสายตาคนใช้ เซลส์สลับไปมาทั้งวัน
 *   โทน: ink บนกระดาษ (monochrome) · IBM Plex Sans Thai
 *   แดงแบรนด์ #8E1116 สงวนไว้ให้ "ด่วน/error" เท่านั้น
 *   เขียว live ใช้กับ won/healthy เท่านั้น
 * โครงสร้างคลาสเหมือนเดิมทุกตัว — app.js ไม่ต้องแก้อะไรเลย
 * กติกา: ห้ามเขียนค่าสีตรง ๆ นอก :root ทั้งสองบล็อก (สว่าง + มืด)
 */

:root {
  /* ASHER CRM / property brand tokens */
  --asher-bg: #FAFAF9;
  --asher-surface: #FFFFFF;
  --asher-primary: #0F3D57;
  --asher-text: #6B7280;
  --asher-border: #E5E7EB;
  --asher-muted: #9CA3AF;
  --asher-teal: #2E9FBB;
  --asher-cyan: #00BCE4;
  --asher-available: #A7E28B;
  --asher-sold: #7AC943;
  --asher-reserved: #F4C047;
  --asher-closed: #B7B7B7;
  --asher-success: #7AC943;
  --asher-warning: #F4C047;
  --asher-danger: #E76F51;
  color-scheme: light;
  --color-bg: #F6F7F5;
  --color-surface-muted: #F1F3F2;
  --color-card: #FFFFFF;
  --color-border: #E2E6E5;
  --color-primary-text: #0B2D38;
  --color-secondary-text: #58666B;
  --color-muted-text: #929A9D;
  --color-primary: #2389A3;
  --color-primary-hover: #176B81;
  --color-primary-soft: #D8EEF2;
  --color-transaction: #C89645;
  --color-transaction-soft: #F6E9D2;
  --color-warm: #E99A71;
  --color-success: #65AD79;
  --color-success-soft: #DCEFE2;
  --color-warning: #E5B85B;
  --color-warning-soft: #F8E8B8;
  --color-danger: #D9786C;
  --color-danger-soft: #F3D5D1;
  --bg: var(--color-bg);
  --panel: var(--color-card);
  --panel2: var(--color-surface-muted);
  --line: var(--color-border);
  --text: var(--color-primary-text);
  --muted: var(--color-secondary-text);
  --accent: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --on-accent: #FFFFFF;
  --ok: #357A4C;
  --warn: #8A691E;
  --err: #A55049;
  --err-soft: var(--color-danger-soft);
  --ok-soft: var(--color-success-soft);
  --shadow: 0 2px 12px #0B2D380A;
  --radius: 6px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 "IBM Plex Sans Thai", "Noto Sans Thai", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { display: flex; gap: 12px; align-items: center; }
.logo-mark { display: block; }
.logo-word { display: block; margin-left: 2px; }
h1 { margin: 0; font-size: 18px; }
h1 small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.topbar-right { display: flex; gap: 10px; align-items: center; }
.whoami { color: var(--muted); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-input {
  width: 220px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text);
}
.badge { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-bad { background: var(--err-soft); color: var(--err); }
.badge-unknown { background: var(--panel2); color: var(--muted); }

.tabs { display: flex; gap: 4px; padding: 10px 22px 0; border-bottom: 1px solid var(--line); }
.tab {
  padding: 9px 18px; border: 1px solid transparent; border-bottom: none;
  background: none; color: var(--muted); border-radius: 9px 9px 0 0; cursor: pointer; font-size: 14px;
}
.tab.active { background: var(--panel); color: var(--accent); border-color: var(--line); border-top: 2px solid var(--accent); }

.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - 82px); }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 20px; }
.sidebar-section { display: grid; gap: 4px; }
.sidebar-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0 12px 6px; }
.sidebar .tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; font: inherit; }
.sidebar .tab span { width: 18px; color: var(--accent); text-align: center; font-size: 17px; }
.sidebar .tab:hover { background: var(--panel2); color: var(--text); }
.sidebar .tab.active { background: var(--color-primary-soft); color: var(--accent); border: 0; font-weight: 700; }
.admin-nav { border-top: 1px solid var(--line); padding-top: 16px; }
.admin-nav .tab { font-size: 12px; }
.sidebar-footer { margin-top: auto; color: var(--muted); font-size: 11px; padding: 10px 12px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.page-head h2 { margin: 0; color: var(--asher-primary); }
.chat-empty { min-height: 280px; display: grid; place-items: center; align-content: center; text-align: center; }
.chat-icon { font-size: 42px; color: var(--accent); }
.customer-hero { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.customer-hero h3 { margin: 0; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--accent); font-size: 18px; font-weight: 700; }
.customer-lead { padding: 10px 0; border-bottom: 1px solid var(--line); }
.conversation-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.recommend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 16px; }
.recommend-head h4 { margin-bottom: 4px; }
.recommend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.unit-recommend { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 6px; background: var(--panel); }
.unit-recommend-top { display: flex; justify-content: space-between; align-items: center; }
.unit-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.compare-drawer { margin-top: 12px; padding: 10px; border-radius: 8px; background: var(--panel2); }
.compare-title { display: flex; justify-content: space-between; margin-bottom: 8px; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.compare-grid > div { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
@media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; display: block; } .sidebar-section { display: flex; overflow-x: auto; } .sidebar-label, .sidebar-footer { display: none; } .sidebar .tab { width: auto; white-space: nowrap; } .admin-nav { border-top: 0; padding-top: 0; } .topbar { flex-wrap: wrap; gap: 10px; } .topbar-right { flex-wrap: wrap; } .token-input { width: 150px; } }

main { padding: 18px 22px 40px; }
.panel { display: none; }
.panel.active { display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.sales-command-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sales-command-head h2 { margin:0; color:var(--asher-primary); }
.queue-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
.queue-card { border:1px solid var(--asher-border); border-radius:10px; background:var(--asher-surface); padding:12px; text-align:left; cursor:pointer; color:var(--asher-primary); }
.queue-card strong { display:block; font-size:28px; color:var(--asher-primary); }
.queue-card.urgent { border-color:var(--asher-warning); background:#FFF9E8; }
.queue-card.selected { outline:2px solid var(--asher-teal); }
.command-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:14px; margin-bottom:18px; }
.work-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--asher-border); }
.work-item:last-child { border-bottom:0; }
.work-actions { display:flex; gap:5px; white-space:nowrap; }
@media (max-width: 900px) { .command-grid { grid-template-columns:1fr; } .sales-command-head { align-items:flex-start; gap:8px; flex-direction:column; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.inventory-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 16px; }
.matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.matrix-unit { border: 1px solid var(--asher-border); border-radius: 8px; padding: 9px; background: var(--asher-surface); cursor: pointer; text-align: left; }
.matrix-unit:hover { border-color: var(--asher-teal); box-shadow: 0 0 0 2px #2E9FBB22; }
.matrix-unit .unit-no { display: block; color: var(--asher-primary); font-weight: 700; }
.matrix-unit .unit-meta { display: block; color: var(--asher-text); font-size: 11px; }
.unit-status.available { background: var(--asher-available); color: var(--asher-primary); }
.unit-status.hold, .unit-status.reserved { background: var(--asher-reserved); color: #5B4300; }
.unit-status.booked, .unit-status.contracted, .unit-status.transferred { background: var(--asher-sold); color: #173D16; }
.unit-status.blocked, .unit-status.cancelled { background: var(--asher-closed); color: #3F3F46; }
.unit-status { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
@media (max-width: 900px) { .inventory-layout { grid-template-columns: 1fr; } }
.card h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.big { font-size: 32px; font-weight: 700; }
.muted { color: var(--muted); font-size: 12px; }
.stage-bar { margin: 6px 0; }
.stage-bar .label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.stage-bar .track { height: 8px; border-radius: 4px; background: var(--panel2); }
.stage-bar .fill { height: 100%; border-radius: 4px; background: var(--accent); }

.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.col { min-width: 0; }
.toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.list { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list th, .list td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.list th { color: var(--muted); font-weight: 600; background: var(--panel2); }
.list.clickable tbody tr { cursor: pointer; }
.list.clickable tbody tr:hover { background: var(--panel2); }
.list tbody tr.selected { outline: 1px solid var(--accent); }

.detail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-height: 300px; max-height: 70vh; overflow: auto; }
.detail.empty { color: var(--muted); display: flex; align-items: center; justify-content: center; }
.detail h4 { margin: 16px 0 6px; font-size: 13px; color: var(--text); }
.detail h4:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.form-grid label { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin-top: 4px; }
input, select, textarea {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline-color: var(--muted); }
.btn {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; font-size: 13px;
}
.btn:hover { background: var(--panel2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-danger { background: transparent; border-color: var(--err); color: var(--err); }
.btn-small { padding: 5px 10px; font-size: 12px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; background: var(--panel2); margin: 1px 2px 1px 0; }
.pill-open { color: var(--muted); } .pill-won { color: var(--ok); } .pill-lost { color: var(--err); }

/* Compact real-estate status language; use on cells/badges, never whole cards. */
.unit-status { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.unit-status.available { background: #DCEFE2; color: #357A4C; }
.unit-status.hold { background: #F8E8B8; color: #8A691E; }
.unit-status.reserved { background: #D8EEF2; color: #25758A; }
.unit-status.booked { background: #BFE4EA; color: #176B81; }
.unit-status.contracted { background: #CAE0EA; color: #315F73; }
.unit-status.transferred { background: #CFE8D4; color: #39744A; }
.unit-status.blocked { background: #E6E8E8; color: #667174; }
.unit-status.cancelled { background: #F3D5D1; color: #A55049; }
.transaction-accent { border-left: 3px solid var(--color-transaction); }

.flowmap { list-style: none; padding: 0; max-width: 860px; }
.flowmap li {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: 10px;
}
.flowmap li.blocked { border-left-color: var(--err); }
.flowmap li .hop { font-weight: 700; margin-right: 8px; }
.flowmap li .state { float: right; font-size: 12px; font-weight: 600; }
.flowmap li .state.live { color: var(--ok); }
.flowmap li .state.blocked { color: var(--err); }
.flowmap li p { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }

.toast {
  position: fixed; bottom: 22px; right: 22px; max-width: 460px;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px; font-size: 13px; box-shadow: var(--shadow);
  transition: opacity .25s; white-space: pre-wrap;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.fu-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 6px 8px; margin: 4px 0; border: 1px solid var(--line); border-radius: 6px;
}
.fu-row.fu-overdue { border-left: 3px solid var(--err); background: var(--err-soft); }
.hidden { opacity: 0; pointer-events: none; }
code { background: var(--panel2); padding: 1px 6px; border-radius: 5px; font-size: 12px; }

.customer-page-head { align-items: center; }
.count-badge { color: var(--accent); font-size: 16px; }
.customer-filters { flex-wrap: wrap; align-items: center; }
.customer-filters input { flex: 1 1 260px; min-width: 220px; }
.customer-filters select { flex: 0 1 170px; }
.list-status { min-height: 20px; margin: 4px 0 8px; color: var(--muted); font-size: 12px; }
.table-scroll { overflow-x: auto; }
.customer-list { min-width: 1050px; }
.customer-name-link { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text); padding: 0; cursor: pointer; text-align: left; font: inherit; }
.customer-name-link:hover { color: var(--accent); }
.customer-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.status-pill { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--panel2); color: var(--text); font-size: 11px; margin: 1px 2px 1px 0; }
.status-open { color: #256b7c; background: #d8eef2; } .status-won { color: #357a4c; background: #dcefe2; } .status-lost { color: #a55049; background: #f3d5d1; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 14px 0; }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }
.manager-tools { margin-top: 18px; padding: 10px 0; color: var(--muted); }
.manager-tools summary { cursor: pointer; }
.customer-drawer { position: fixed; z-index: 20; top: 0; right: 0; width: min(680px, 100vw); height: 100vh; padding: 20px; background: var(--bg); box-shadow: -8px 0 30px rgba(12, 32, 54, .15); transform: translateX(105%); transition: transform .2s ease; overflow: auto; }
.customer-drawer[aria-hidden="false"] { transform: translateX(0); }
.customer-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.modal-overlay { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(12, 32, 54, .35); }
.modal-overlay[aria-hidden="false"] { display: flex; }
.modal-card { width: min(520px, 100%); padding: 20px; border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); }
@media (max-width: 700px) { .customer-drawer { width: 100vw; padding: 14px; } .customer-page-head { align-items: flex-start; } .customer-filters select, .customer-filters input { flex-basis: 100%; } }