/* ExpressI Dashboard — shared stylesheet
   Organized: reset → base → header → layout → components → pages */

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
  font-family:'Sarabun',sans-serif;
  background:#f0f2f5;
  color:#1a1a2e;
  font-size:15px;
  min-height:100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.header {
  background:linear-gradient(135deg,#78350f 0%,#92400e 100%);
  color:white;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:58px;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  position:sticky;
  top:0;
  z-index:200;
}
.header-left  { display:flex; align-items:center; gap:12px; }
.header-icon  { font-size:22px; }
.header-title { font-size:17px; font-weight:700; }
.header-sub   { font-size:12px; opacity:.65; }
.header-right { display:flex; align-items:center; gap:12px; }

/* breadcrumb (accounting page) */
.breadcrumb { font-size:12px; opacity:.6; display:flex; gap:6px; align-items:center; }
.breadcrumb a { color:#fbbf24; cursor:pointer; }
.breadcrumb a:hover { text-decoration:underline; }

/* ── User chip & logout ─────────────────────────────────────────────────────── */
.user-chip {
  background:rgba(255,255,255,.12);
  border-radius:20px;
  padding:5px 14px;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:7px;
}
.user-dot { width:8px; height:8px; background:#4ade80; border-radius:50%; }
.btn-logout {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:white;
  padding:6px 14px;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:13px;
  cursor:pointer;
  transition:.2s;
}
.btn-logout:hover { background:rgba(255,255,255,.22); }

/* ── Buttons (shared) ───────────────────────────────────────────────────────── */
.btn {
  padding:7px 18px;
  border-radius:8px;
  border:none;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .18s;
}
.btn-primary { background:#d97706; color:white; }
.btn-primary:hover { background:#b45309; }
.btn-ghost {
  background:#f0f2f5;
  color:#555;
  border:1.5px solid #dde3ec;
}
.btn-ghost:hover { background:#e5e8f0; }

/* ── Loading / Empty ────────────────────────────────────────────────────────── */
.loading { text-align:center; padding:40px; color:#94a3b8; }
.empty   { text-align:center; padding:56px 20px; color:#ccc; }
.empty-icon { font-size:40px; margin-bottom:12px; }

.spinner {
  display:inline-block;
  width:24px; height:24px;
  border:3px solid #e0e0e0;
  border-top-color:#d97706;
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin-bottom:8px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Badge ──────────────────────────────────────────────────────────────────── */
.badge {
  display:inline-block;
  padding:2px 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
}
.badge-active  { background:#d4edda; color:#155724; }
.badge-old     { background:#f1f3f5; color:#aaa; }
.badge.pending  { background:#fef3c7; color:#92400e; }
.badge.received { background:#dbeafe; color:#1e40af; }
.badge.partial  { background:#ede9fe; color:#6d28d9; }
.badge.done     { background:#d1fae5; color:#065f46; }
.badge.warning  { background:#fee2e2; color:#991b1b; }

/* ── Shared table ───────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:14px; }
thead tr { background:#f8fafc; }
th {
  padding:9px 14px;
  text-align:left;
  font-weight:600;
  color:#666;
  font-size:13px;
  border-bottom:2px solid #e8ecf0;
  white-space:nowrap;
}
th.r { text-align:right; }
td { padding:9px 14px; border-bottom:1px solid #f0f2f5; vertical-align:middle; }
td.r { text-align:right; }
tbody tr:hover { background:#fafbff; }
tbody tr:last-child td { border-bottom:none; }

/* ── Login page ─────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height:100vh;
  background:linear-gradient(135deg,#1c1003 0%,#3b1a01 50%,#78350f 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-box {
  background:white;
  border-radius:20px;
  padding:48px 44px;
  width:100%;
  max-width:420px;
  box-shadow:0 24px 64px rgba(0,0,0,.4);
}
.login-logo       { text-align:center; margin-bottom:32px; }
.login-logo-icon  { font-size:52px; margin-bottom:12px; }
.login-logo-title { font-size:22px; font-weight:700; color:#1a1a2e; }
.login-logo-sub   { font-size:13px; color:#999; margin-top:4px; }
.form-group       { margin-bottom:18px; }
.form-group label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:#555;
  margin-bottom:6px;
}
.form-group input {
  width:100%;
  padding:12px 14px;
  border:1.5px solid #dde3ec;
  border-radius:10px;
  font-family:'Sarabun',sans-serif;
  font-size:15px;
  color:#1a1a2e;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus {
  border-color:#d97706;
  box-shadow:0 0 0 3px rgba(217,119,6,.12);
}
.btn-login {
  width:100%;
  padding:13px;
  background:linear-gradient(135deg,#d97706,#b45309);
  color:white;
  border:none;
  border-radius:10px;
  font-family:'Sarabun',sans-serif;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  margin-top:8px;
  box-shadow:0 4px 14px rgba(217,119,6,.35);
}
.btn-login:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(217,119,6,.4); }
.error-box {
  background:#fff0f0;
  border:1.5px solid #ffcdd2;
  border-radius:10px;
  padding:12px 14px;
  color:#c62828;
  font-size:13px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
}
.login-hint { text-align:center; margin-top:20px; font-size:12px; color:#bbb; }

/* ── Room select (accounting) ───────────────────────────────────────────────── */
#room-page {
  min-height:calc(100vh - 58px);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
#room-page.active { display:flex; }
.page { display:none; }
.page.active { display:block; }

.page-heading { font-size:20px; font-weight:700; margin-bottom:6px; }
.page-sub     { color:#999; margin-bottom:36px; font-size:14px; }

.room-cards { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.room-card {
  background:white;
  border-radius:18px;
  padding:34px 50px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  border:2.5px solid transparent;
  transition:all .22s;
}
.room-card:hover {
  border-color:#d97706;
  transform:translateY(-4px);
  box-shadow:0 10px 32px rgba(217,119,6,.16);
}
.rc-icon { font-size:48px; margin-bottom:12px; }
.rc-name { font-size:22px; font-weight:700; }
.rc-desc { font-size:12px; color:#aaa; margin-top:5px; }

/* ── Folder grid ────────────────────────────────────────────────────────────── */
.folder-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.folder-card {
  background:white;
  border-radius:12px;
  padding:16px 20px;
  cursor:pointer;
  border:2px solid transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:all .18s;
  position:relative;
  overflow:hidden;
}
.folder-card:hover { border-color:#d97706; box-shadow:0 4px 16px rgba(217,119,6,.13); }
.folder-card.active-badge::after {
  content:'ข้อมูลล่าสุด';
  position:absolute; top:10px; right:10px;
  background:#dcfce7; color:#15803d;
  font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:10px;
}
.fc-icon  { font-size:28px; margin-bottom:8px; }
.fc-code  { font-size:12px; font-weight:700; color:#d97706; margin-bottom:4px; }
.fc-name  { font-size:15px; font-weight:600; }
.fc-meta  { font-size:11px; color:#bbb; margin-top:8px; display:flex; align-items:center; gap:6px; }

/* ── Controls bar ───────────────────────────────────────────────────────────── */
.controls {
  background:white;
  padding:11px 24px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.ctrl-lbl { font-size:13px; color:#666; font-weight:500; white-space:nowrap; }
input[type=date], select {
  padding:7px 11px;
  border:1.5px solid #dde3ec;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  color:#1a1a2e;
  background:white;
  outline:none;
  transition:border-color .2s;
  cursor:pointer;
}
input[type=date]:focus, select:focus { border-color:#d97706; }

/* range shortcuts */
.range-shortcuts { display:flex; gap:4px; }
.range-btn {
  padding:5px 12px;
  border-radius:20px;
  border:1.5px solid #dde3ec;
  background:white;
  font-family:'Sarabun',sans-serif;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  color:#555;
  transition:all .15s;
}
.range-btn:hover  { border-color:#d97706; color:#d97706; }
.range-btn.active { background:#d97706; color:white; border-color:#d97706; }
.range-sep { color:#bbb; font-size:13px; align-self:center; padding:0 2px; }
.date-range-wrap { display:flex; align-items:center; gap:6px; }

/* ── KPI cards ──────────────────────────────────────────────────────────────── */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.kpi-card {
  background:white;
  border-radius:12px;
  padding:16px 18px;
  border-left:4px solid transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  cursor:pointer;
  transition:transform .15s;
}
.kpi-card:hover  { transform:translateY(-2px); }
.kpi-card.c-green  { border-color:#22c55e; }
.kpi-card.c-red    { border-color:#ef4444; }
.kpi-card.c-blue   { border-color:#3b82f6; }
.kpi-card.c-orange { border-color:#f59e0b; }
/* store KPI */
.kpi-card.issue   { border-color:#f87171; }
.kpi-card.receive { border-color:#34d399; }
.kpi-card.po      { border-color:#60a5fa; }
.kpi-card.wait    { border-color:#fbbf24; }
.kpi-card.active  { box-shadow:0 4px 16px rgba(0,0,0,.12); }

.kpi-lbl   { font-size:12px; color:#888; font-weight:500; margin-bottom:5px; }
.kpi-label { font-size:12px; color:#888; font-weight:600; margin-bottom:6px; }
.kpi-val   { font-size:22px; font-weight:700; }
.kpi-count { font-size:11px; color:#ccc; margin-top:3px; }
.kpi-sub   { font-size:11px; color:#bbb; margin-top:3px; }

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.tab-nav {
  display:flex;
  gap:2px;
  background:white;
  padding:7px 7px 0;
  border-radius:12px 12px 0 0;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  overflow-x:auto;
}
.tab-btn {
  padding:9px 18px;
  border:none;
  background:none;
  font-family:'Sarabun',sans-serif;
  font-size:13px;
  font-weight:600;
  color:#999;
  cursor:pointer;
  border-radius:8px 8px 0 0;
  border-bottom:3px solid transparent;
  transition:all .16s;
  white-space:nowrap;
}
.tab-btn.active      { color:#d97706; border-bottom-color:#d97706; background:#fffbeb; }
.tab-btn:hover:not(.active) { color:#555; background:#f8f9fa; }

/* store tabs */
.tabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.tabs .tab-btn {
  background:#f1f5f9;
  color:#64748b;
  border-radius:8px;
  border-bottom:none;
  padding:8px 18px;
}
.tabs .tab-btn.active { background:#d97706; color:white; }
.tabs .tab-btn:hover:not(.active) { background:#e2e8f0; }

.tab-body {
  background:white;
  border-radius:0 0 12px 12px;
  padding:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  min-height:260px;
}
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Journal table (accounting) ─────────────────────────────────────────────── */
.dash-body   { padding:18px 24px; }
.tbl-header  { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.tbl-title   { font-size:15px; font-weight:700; }
.tbl-total   { font-size:13px; color:#777; }

.vch { font-family:monospace; font-size:13px; font-weight:700; color:#d97706; }
.amt { font-weight:700; font-variant-numeric:tabular-nums; }
.amt-green  { color:#15803d; }
.amt-red    { color:#dc2626; }
.amt-blue   { color:#1d4ed8; }
.amt-orange { color:#b45309; }

.jbadge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.jbadge-green  { background:#dcfce7; color:#15803d; }
.jbadge-red    { background:#fee2e2; color:#dc2626; }
.jbadge-blue   { background:#dbeafe; color:#1d4ed8; }
.jbadge-orange { background:#fef3c7; color:#92400e; }
.jbadge-gray   { background:#f1f5f9; color:#64748b; }

.expand-row { display:none; }
.expand-row.open { display:table-row; }
.expand-td  { background:#f8fafc; padding:0 !important; }
.expand-inner { padding:12px 18px 12px 36px; }
.sub-tbl { width:100%; font-size:13px; border-collapse:collapse; }
.sub-tbl th { padding:5px 10px; background:#eef1f8; font-weight:600; color:#666; font-size:12px; border-bottom:1px solid #dde3ec; }
.sub-tbl td { padding:5px 10px; border-bottom:1px solid #eee; }
.sub-tbl tr:last-child td { border-bottom:none; }
.dr { color:#1d4ed8; font-weight:700; }
.cr { color:#dc2626; font-weight:700; }
.exp-btn { background:none; border:none; font-family:'Sarabun',sans-serif; font-size:12px; color:#d97706; cursor:pointer; padding:2px 8px; border-radius:4px; }
.exp-btn:hover { background:#fffbeb; }

/* ── Cash/Bank section ──────────────────────────────────────────────────────── */
.cb-section { margin-bottom:18px; }
.cb-section-header {
  display:flex; justify-content:space-between; align-items:center;
  border-radius:8px; padding:9px 16px; margin-bottom:8px;
}
.cb-section-title { font-weight:700; font-size:14px; }
.cb-section-meta  { font-size:13px; color:#666; }
.grand-bar {
  background:#78350f; color:white; border-radius:12px;
  padding:16px 22px; display:flex; gap:28px; align-items:center;
  margin-top:6px; flex-wrap:wrap;
}
.grand-bar .gb-lbl { font-size:12px; opacity:.6; margin-bottom:3px; }
.grand-bar .gb-val { font-size:18px; font-weight:700; }
.grand-bar .gb-net { margin-left:auto; text-align:right; }
.grand-bar .gb-net .gb-val { font-size:22px; }

/* ── Store: table card ──────────────────────────────────────────────────────── */
.table-wrap {
  background:white; border-radius:14px; overflow:auto; max-height:calc(100vh - 96px);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.table-header {
  padding:14px 20px; border-bottom:1px solid #f1f5f9;
  display:flex; align-items:center; justify-content:space-between;
}
.table-title { font-size:14px; font-weight:700; }
.table-count { font-size:12px; color:#888; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th { background:#f8fafc; padding:10px 14px; text-align:left; font-size:12px; font-weight:700; color:#64748b; border-bottom:1px solid #f1f5f9; white-space:nowrap; }
.tbl td { padding:10px 14px; font-size:13px; color:#334155; border-bottom:1px solid #f8fafc; vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:#fafbff; }
.tbl .num  { text-align:right; font-variant-numeric:tabular-nums; }
.tbl .code { font-size:11px; color:#94a3b8; font-family:monospace; }

.po-row { cursor:pointer; }
.po-row:hover td { background:#f8faff !important; }
.wait-days      { font-weight:700; }
.wait-days.warn { color:#dc2626; }
.wait-days.ok   { color:#059669; }

/* ── Admin page ─────────────────────────────────────────────────────────────── */
.main { max-width:1100px; margin:0 auto; padding:28px 24px; }

.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.page-title  { font-size:20px; font-weight:700; }
.page-subtitle { font-size:13px; color:#888; margin-top:3px; }
.btn-add {
  background:linear-gradient(135deg,#d97706,#b45309);
  color:white; border:none; border-radius:10px;
  padding:10px 22px; font-family:'Sarabun',sans-serif;
  font-size:14px; font-weight:700; cursor:pointer; transition:.2s;
  box-shadow:0 4px 12px rgba(217,119,6,.3);
}
.btn-add:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(217,119,6,.38); }

.table-card { background:white; border-radius:16px; overflow:auto; max-height:calc(100vh - 96px); box-shadow:0 2px 12px rgba(0,0,0,.07); }
.users-table { width:100%; border-collapse:collapse; }
.users-table thead tr { background:#f8fafc; }
.users-table th { padding:11px 16px; text-align:left; font-size:12px; font-weight:700; color:#64748b; border-bottom:2px solid #e8ecf0; white-space:nowrap; }
.users-table td { padding:13px 16px; font-size:14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.users-table tbody tr { cursor:pointer; transition:background .12s; }
.users-table tbody tr:hover td { background:#f8faff; }
.users-table tbody tr:last-child td { border-bottom:none; }
.uname { font-weight:700; font-family:monospace; font-size:14px; }
.tag { display:inline-block; background:#f1f5f9; border-radius:6px; padding:2px 8px; font-size:12px; color:#475569; margin:1px; }
.tag-ad    { background:#dbeafe; color:#1d4ed8; }
.tag-local { background:#fef3c7; color:#92400e; }

/* ── AR / AP section ───────────────────────────────────────────────────────── */
.arap-kpi-row { display:flex; align-items:center; gap:32px; padding:20px 24px 0; flex-wrap:wrap; }
.arap-kpi-card { display:flex; flex-direction:column; gap:3px; }
.arap-kpi-label { font-size:12px; color:#64748b; font-weight:500; }
.arap-kpi-val { font-size:24px; font-weight:700; color:#1e293b; }
.arap-kpi-overdue .arap-kpi-val { color:#dc2626; }
.arap-kpi-divider { width:1px; height:48px; background:#e2e8f0; align-self:center; }

.arap-tab-nav { display:flex; gap:4px; padding:16px 24px 0; border-bottom:1px solid #e2e8f0; }
.arap-tab-btn { padding:8px 20px; border:none; background:none; cursor:pointer; font-size:14px; font-weight:500; color:#64748b; border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .15s; }
.arap-tab-btn.active { color:#d97706; border-bottom-color:#d97706; }
.arap-tab-btn:hover:not(.active) { color:#1e293b; }

#arap-body { padding:0 24px 32px; }

.arap-table { width:100%; border-collapse:collapse; margin-top:16px; font-size:14px; }
.arap-table th { background:#f8fafc; padding:10px 14px; text-align:left; font-size:12px; font-weight:600; color:#475569; border-bottom:2px solid #e2e8f0; white-space:nowrap; }
.arap-table td { padding:10px 14px; border-bottom:1px solid #f1f5f9; }
.arap-table th.r, .arap-table td.r { text-align:right; }
.arap-table th.c, .arap-table td.c { text-align:center; }
.arap-table tbody tr:hover { background:#f8fafc; }
.arap-name { font-weight:500; color:#1e293b; }
.arap-bal  { font-weight:600; font-family:monospace; color:#1e293b; }
.arap-row-yellow td { background:#fffbeb !important; }
.arap-row-red    td { background:#fff5f5 !important; }

.arap-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.arap-badge.green  { background:#dcfce7; color:#166534; }
.arap-badge.yellow { background:#fef9c3; color:#854d0e; }
.arap-badge.red    { background:#fee2e2; color:#991b1b; }

.role-badge { display:inline-block; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:700; }
.role-badge.acct  { background:#dbeafe; color:#1e40af; }
.role-badge.eng   { background:#d1fae5; color:#065f46; }
.role-badge.adm   { background:#ede9fe; color:#6d28d9; }
.role-badge.pm    { background:#fef9c3; color:#854d0e; }
.role-badge.exec  { background:#fce7f3; color:#9d174d; }
.role-badge.other { background:#f1f5f9; color:#475569; }

.btn-edit { background:#f1f5f9; border:none; border-radius:7px; padding:5px 13px; font-family:'Sarabun',sans-serif; font-size:12px; font-weight:600; color:#d97706; cursor:pointer; transition:.15s; }
.btn-edit:hover { background:#fef3c7; }

/* ── Admin drawer ────────────────────────────────────────────────────────────── */
.drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:400; }
.drawer-overlay.open { display:block; }
.drawer {
  position:fixed; top:0; right:-520px; height:100vh; width:480px; max-width:100vw;
  background:white; z-index:500;
  box-shadow:-8px 0 32px rgba(0,0,0,.15);
  display:flex; flex-direction:column;
  transition:right .28s cubic-bezier(.4,0,.2,1);
}
.drawer.open { right:0; }
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid #f1f5f9; background:#f8fafc;
}
.drawer-header h3 { font-size:16px; font-weight:700; }
.btn-close { background:none; border:none; font-size:18px; cursor:pointer; color:#888; width:32px; height:32px; border-radius:8px; transition:.15s; }
.btn-close:hover { background:#e2e8f0; color:#333; }
.drawer-body   { flex:1; overflow-y:auto; padding:20px 22px; }
.drawer-footer { padding:14px 22px; border-top:1px solid #f1f5f9; display:flex; gap:10px; align-items:center; background:#f8fafc; }

.drawer .form-group { margin-bottom:18px; }
.drawer .form-group label { display:block; font-size:12px; font-weight:700; color:#555; margin-bottom:7px; text-transform:uppercase; letter-spacing:.03em; }
.drawer .form-group input[type=text],
.drawer .form-group select {
  width:100%; padding:10px 13px; border:1.5px solid #dde3ec; border-radius:9px;
  font-family:'Sarabun',sans-serif; font-size:14px; color:#1a1a2e; outline:none; transition:.2s; background:white;
}
.drawer .form-group input[type=text]:focus,
.drawer .form-group select:focus { border-color:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,.11); }
.drawer .form-group input:disabled { background:#f8fafc; color:#888; }
.form-hint { font-size:11px; color:#999; margin-top:5px; line-height:1.5; }

.input-row { display:flex; gap:8px; }
.input-row input { flex:1; }
.btn-search-ad {
  background:#f1f5f9; border:1.5px solid #dde3ec; border-radius:9px;
  padding:9px 14px; font-family:'Sarabun',sans-serif; font-size:13px;
  font-weight:600; color:#d97706; cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn-search-ad:hover { background:#fef3c7; border-color:#d97706; }

.ad-results { margin-top:6px; border:1.5px solid #dde3ec; border-radius:9px; overflow:hidden; background:white; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.ad-result-item { padding:9px 13px; cursor:pointer; font-size:13px; transition:background .12s; border-bottom:1px solid #f1f5f9; }
.ad-result-item:last-child { border-bottom:none; }
.ad-result-item:hover { background:#fffbeb; }
.ad-result-item strong { color:#d97706; }
.ad-no-result { padding:9px 13px; font-size:13px; color:#aaa; }

.cb-group { display:flex; flex-direction:column; gap:8px; }
.cb-label {
  display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer;
  padding:7px 10px; border-radius:8px; border:1.5px solid transparent;
  transition:.12s; user-select:none;
}
.cb-label:hover { background:#f8fafc; border-color:#dde3ec; }
.cb-label input[type=checkbox] { width:16px; height:16px; accent-color:#d97706; flex-shrink:0; }
.cb-label.checked { background:#fffbeb; border-color:#fde68a; }

.section-divider { border:none; border-top:1px solid #f1f5f9; margin:20px 0; }
.admin-note { background:#fef3c7; border:1.5px solid #fde68a; border-radius:10px; padding:13px 16px; font-size:13px; color:#92400e; line-height:1.6; }
.po-source-row { display:flex; gap:8px; }
.po-source-row select { width:60%; }
.po-source-row input  { width:40%; }

.btn-save { background:linear-gradient(135deg,#d97706,#b45309); color:white; border:none; border-radius:9px; padding:10px 24px; font-family:'Sarabun',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:.2s; }
.btn-save:hover    { transform:translateY(-1px); }
.btn-save:disabled { opacity:.6; cursor:default; transform:none; }
.btn-delete { background:white; border:1.5px solid #fca5a5; color:#dc2626; border-radius:9px; padding:10px 18px; font-family:'Sarabun',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:.2s; }
.btn-delete:hover { background:#fee2e2; }
.btn-cancel { background:#f1f5f9; border:none; border-radius:9px; padding:10px 18px; font-family:'Sarabun',sans-serif; font-size:13px; font-weight:600; color:#555; cursor:pointer; transition:.2s; margin-left:auto; }
.btn-cancel:hover { background:#e2e8f0; }

/* ── Admin tabs ─────────────────────────────────────────────────────────────── */
.admin-tabs { display:flex; gap:4px; padding:14px 28px 0; background:#fff; border-bottom:2px solid #e2e8f0; position:sticky; top:58px; z-index:100; }
.admin-tab-btn { background:none; border:none; padding:10px 20px; font-family:'Sarabun',sans-serif; font-size:14px; font-weight:600; color:#666; cursor:pointer; border-radius:8px 8px 0 0; border-bottom:3px solid transparent; margin-bottom:-2px; transition:.15s; }
.admin-tab-btn:hover  { background:#f8fafc; color:#1a1a2e; }
.admin-tab-btn.active { color:#d97706; border-bottom-color:#d97706; background:#fffbeb; }

/* ── Settings card ───────────────────────────────────────────────────────────── */
.settings-card { background:white; border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); padding:28px 32px; max-width:900px; }
.settings-section { margin-bottom:8px; }
.settings-section-title { font-size:15px; font-weight:700; color:#1a1a2e; margin-bottom:16px; }
.settings-footer { display:flex; align-items:center; gap:16px; padding-top:20px; }
.btn-save-settings { background:linear-gradient(135deg,#d97706,#b45309); color:white; border:none; border-radius:9px; padding:10px 28px; font-family:'Sarabun',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:.2s; }
.btn-save-settings:hover    { transform:translateY(-1px); }
.btn-save-settings:disabled { opacity:.6; cursor:default; transform:none; }
.settings-saved-msg { font-size:13px; color:#059669; font-weight:600; }
.btn-add-room { margin-top:12px; background:#f1f5f9; border:1.5px dashed #cbd5e1; border-radius:8px; padding:8px 18px; font-family:'Sarabun',sans-serif; font-size:13px; color:#555; cursor:pointer; transition:.2s; }
.btn-add-room:hover { background:#e2e8f0; border-color:#94a3b8; }

/* rooms config table */
.rooms-cfg-table { width:100%; border-collapse:collapse; }
.rooms-cfg-table th { text-align:left; font-size:12px; font-weight:700; color:#888; padding:6px 10px; border-bottom:2px solid #e2e8f0; }
.rooms-cfg-table td { padding:6px 6px; border-bottom:1px solid #f1f5f9; }
.rooms-cfg-table input { width:100%; border:1px solid #e2e8f0; border-radius:7px; padding:7px 10px; font-family:'Sarabun',sans-serif; font-size:13px; background:#fafafa; transition:.15s; }
.rooms-cfg-table input:focus { outline:none; border-color:#d97706; background:#fff; }
.btn-del-room { background:none; border:none; color:#f87171; font-size:16px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:.15s; }
.btn-del-room:hover { background:#fee2e2; }

/* ── Store: folder page ─────────────────────────────────────────────────────── */
.folder-page   { padding:32px 28px; }
.section-title { font-size:20px; font-weight:700; color:#1a1a2e; margin-bottom:6px; }
.section-sub   { font-size:13px; color:#888; margin-bottom:24px; }
.dashboard-page { padding:24px 28px; }
.kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }

/* ── Section nav (รายวัน / รายเดือน) ────────────────────────────────────────── */
.section-nav {
  display:flex; align-items:center; gap:4px;
  padding:0 24px; background:#fff; border-bottom:2px solid #e2e8f0;
  position:sticky; top:58px; z-index:90;
}
.section-btn {
  background:none; border:none; padding:12px 20px;
  font-family:'Sarabun',sans-serif; font-size:14px; font-weight:600;
  color:#666; cursor:pointer; border-radius:8px 8px 0 0;
  border-bottom:3px solid transparent; margin-bottom:-2px; transition:.15s;
}
.section-btn:hover  { background:#f8fafc; color:#1a1a2e; }
.section-btn.active { color:#d97706; border-bottom-color:#d97706; background:#fffbeb; }

/* ── Monthly controls ────────────────────────────────────────────────────────── */
.monthly-controls {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 24px; background:#fff; border-bottom:1px solid #e2e8f0;
}
.month-nav { display:flex; align-items:center; gap:10px; }
.month-nav-btn {
  background:#f1f5f9; border:none; border-radius:8px;
  width:34px; height:34px; font-size:14px; cursor:pointer;
  color:#d97706; font-weight:700; transition:.15s;
}
.month-nav-btn:hover { background:#fef3c7; }
.month-label { font-size:16px; font-weight:700; color:#1a1a2e; min-width:150px; text-align:center; }

.monthly-tab-nav { display:flex; gap:6px; }
.monthly-tab {
  background:none; border:1.5px solid #e2e8f0; border-radius:9px;
  padding:7px 16px; font-family:'Sarabun',sans-serif; font-size:13px; font-weight:600;
  color:#666; cursor:pointer; transition:.15s;
}
.monthly-tab:hover  { background:#f8fafc; color:#1a1a2e; border-color:#94a3b8; }
.monthly-tab.active { background:#d97706; color:#fff; border-color:#d97706; }

#tb-mode-wrap select {
  padding:7px 12px; border:1.5px solid #e2e8f0; border-radius:9px;
  font-family:'Sarabun',sans-serif; font-size:13px; color:#1a1a2e;
  background:#fff; cursor:pointer; outline:none;
}
#tb-mode-wrap select:focus { border-color:#d97706; }

/* ── Monthly KPI row ─────────────────────────────────────────────────────────── */
.monthly-kpi-row {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px; padding:20px 24px 4px;
}

/* ── Monthly report body ─────────────────────────────────────────────────────── */
.monthly-body {
  margin:16px 24px 24px;
  background:#fff; border-radius:12px;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  overflow:hidden;
}
.monthly-report-table { overflow-x:auto; max-height:calc(100vh - 140px); overflow-y:auto; }
.monthly-report-table table { width:100%; border-collapse:collapse; font-size:13px; }
.monthly-report-table th {
  padding:11px 14px; background:#f8fafc;
  border-bottom:2px solid #e2e8f0; font-weight:700; color:#555; text-align:left;
}
.monthly-report-table th.r { text-align:right; }
.monthly-report-table td { padding:8px 14px; border-bottom:1px solid #f1f5f9; }
.monthly-report-table tr:last-child td { border-bottom:none; }
.monthly-report-table td.r { text-align:right; }
.monthly-report-table .amt-green { color:#16a34a; }
.monthly-report-table .amt-red   { color:#dc2626; }

.acc-num { font-family:monospace; font-size:12px; color:#d97706; white-space:nowrap; }

.rpt-hdr td {
  background:#fef3c7; color:#3730a3; font-weight:700;
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:6px 14px;
}
.rpt-sub td {
  background:#f8fafc; font-weight:700; color:#1a1a2e;
  border-top:1.5px solid #e2e8f0; border-bottom:1.5px solid #e2e8f0;
}
.rpt-net td {
  background:#1e293b; color:#f1f5f9; font-weight:700;
  border-top:2px solid #1e293b;
}
.rpt-mgn td { background:#fffbeb; color:#92400e; font-weight:600; }

/* ── Daily operator bar ─────────────────────────────────────────────────────── */
.daily-ops {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:8px 0 2px;
  min-height:0;
}
.daily-ops:empty { display:none; }
.op-label  { font-size:12px; color:#64748b; white-space:nowrap; }
.op-chip {
  background:#f1f5f9; border:1px solid #e2e8f0;
  border-radius:20px; padding:3px 10px;
  font-size:12px; color:#334155;
  cursor:pointer; user-select:none; transition:all .15s;
}
.op-chip:hover  { background:#fef3c7; border-color:#fcd34d; }
.op-chip.active { background:#d97706; border-color:#d97706; color:#fff; }
.op-chip.active strong { color:#fff; }
.op-chip strong { color:#d97706; }

/* ── MTD Performance KPI row ────────────────────────────────────────────────── */
.mtd-kpi-row {
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  margin-bottom:14px; padding:14px 18px;
}
.mtd-header {
  font-size:13px; font-weight:700; color:#1e293b;
  margin-bottom:10px; letter-spacing:.02em;
}
.mtd-cards {
  display:flex; flex-wrap:wrap; gap:10px;
}
.mtd-card {
  flex:1 1 140px; background:#f8fafc;
  border:1px solid #e2e8f0; border-radius:8px; padding:10px 14px;
  min-width:130px;
}
.mtd-lbl  { font-size:11px; color:#64748b; margin-bottom:4px; }
.mtd-val  { font-size:18px; font-weight:700; color:#1e293b; }
.mtd-vs   { font-size:11px; margin-top:3px; }
.mtd-vs.up   { color:#059669; }
.mtd-vs.down { color:#dc2626; }
.mtd-neg .mtd-val { color:#dc2626; }

/* ── Switch-dashboard button (header) ───────────────────────────────────────── */
.btn-switch-dash {
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:white;
  padding:6px 13px;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s;
}
.btn-switch-dash:hover { background:rgba(255,255,255,.22); }

/* ── Dashboard Selector Page ────────────────────────────────────────────────── */
.select-dash-wrap {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(100vh - 58px);
  padding:32px 20px;
}
.select-dash-inner { text-align:center; width:100%; max-width:min(1180px, 94vw); }
.select-dash-greeting {
  font-size:22px;
  font-weight:700;
  color:#1a1a2e;
  margin-bottom:6px;
}
.select-dash-sub { font-size:15px; color:#64748b; margin-bottom:36px; }

.select-dash-cards {
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}
.dash-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:white;
  border:2px solid #e2e8f0;
  border-radius:18px;
  padding:32px 28px;
  width:200px;
  cursor:pointer;
  text-decoration:none;
  color:#1a1a2e;
  transition:all .2s;
  position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.dash-card:hover {
  border-color:#d97706;
  box-shadow:0 6px 24px rgba(217,119,6,.18);
  transform:translateY(-3px);
}
.dash-card--pm:hover    { border-color:#059669; box-shadow:0 6px 24px rgba(5,150,105,.18); }
.dash-card--admin:hover { border-color:#7c3aed; box-shadow:0 6px 24px rgba(124,58,237,.18); }

.dash-card-icon  { font-size:40px; }
.dash-card-title { font-size:16px; font-weight:700; }
.dash-card-desc  { font-size:12px; color:#64748b; text-align:center; }
.dash-card-arrow {
  font-size:18px;
  color:#94a3b8;
  transition:transform .2s;
}
.dash-card:hover .dash-card-arrow { transform:translateX(4px); color:#d97706; }
.dash-card--pm:hover .dash-card-arrow    { color:#059669; }
.dash-card--admin:hover .dash-card-arrow { color:#7c3aed; }

/* ── PM Dashboard ───────────────────────────────────────────────────────────── */
.pm-tabs-nav {
  display:flex;
  gap:0;
  background:white;
  border-bottom:2px solid #e2e8f0;
  padding:0 24px;
  position:sticky;
  top:58px;
  z-index:100;
}
.pm-tab-btn {
  padding:14px 20px;
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  font-weight:600;
  color:#64748b;
  cursor:pointer;
  transition:all .18s;
  margin-bottom:-2px;
}
.pm-tab-btn:hover   { color:#1a1a2e; }
.pm-tab-btn.active  { color:#d97706; border-bottom-color:#d97706; }

.pm-tab-panel { display:none; padding:20px 24px; }
.pm-tab-panel.active { display:block; }

.pm-section-bar {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.pm-section-title { font-size:16px; font-weight:700; }
.pm-stats-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.pm-stat { font-size:13px; font-weight:600; }
.pm-stat--overdue { color:#be123c; }
.pm-stat--alert   { color:#d97706; }
.pm-stat--ok      { color:#15803d; }
.pm-co-filter { display:flex; gap:4px; }
.pm-co-btn {
  padding:5px 12px;
  border:1.5px solid #dde3ec;
  border-radius:20px;
  background:white;
  font-family:'Sarabun',sans-serif;
  font-size:13px;
  cursor:pointer;
  color:#64748b;
  transition:all .15s;
}
.pm-co-btn.active, .pm-co-btn:hover { background:#d97706; border-color:#d97706; color:white; }
.pm-file-meta { font-size:11px; color:#94a3b8; width:100%; }

.pm-search {
  padding:7px 12px;
  border:1.5px solid #dde3ec;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  width:200px;
  outline:none;
}
.pm-search:focus { border-color:#d97706; }

.pm-vehicle-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}
.pm-vehicle-card {
  background:white;
  border:1.5px solid #e2e8f0;
  border-radius:14px;
  padding:16px;
  cursor:pointer;
  transition:all .2s;
}
.pm-vehicle-card:hover {
  border-color:#d97706;
  box-shadow:0 4px 16px rgba(217,119,6,.12);
  transform:translateY(-2px);
}
.pm-card--overdue { border-color:#f43f5e !important; background:#fff1f2; }
.pm-card--alert   { border-color:#f59e0b !important; background:#fffbeb; }
.pm-vehicle-top {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.pm-vehicle-icon { font-size:20px; }
.pm-vehicle-name { font-size:14px; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-company-badge { font-size:11px; font-weight:700; border-radius:6px; padding:2px 8px; flex-shrink:0; }
.pm-company--tbs { background:#dbeafe; color:#1d4ed8; }
.pm-company--brt { background:#fce7f3; color:#be185d; }
.pm-vehicle-km { font-size:12px; color:#64748b; margin-bottom:10px; }
.pm-vehicle-services { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.pm-svc-row { display:flex; align-items:center; gap:6px; font-size:12px; }
.pm-svc-label { min-width:96px; font-weight:600; }
.pm-svc-color--orange { color:#c2410c; }
.pm-svc-color--blue   { color:#1d4ed8; }
.pm-svc-color--purple { color:#7c3aed; }
.pm-svc-color--teal   { color:#0f766e; }
.pm-svc-remaining { font-weight:700; min-width:100px; }
.pm-rem--overdue { color:#be123c; }
.pm-rem--alert   { color:#d97706; }
.pm-rem--ok      { color:#15803d; }
.pm-svc-last { font-size:11px; color:#94a3b8; }
.pm-vehicle-footer { font-size:11px; color:#94a3b8; text-align:right; }

/* PM kind chips */
.pm-kind-chip {
  display:inline-block;
  padding:2px 8px;
  border-radius:10px;
  font-size:11px;
  font-weight:600;
}
.pm-kind--orange { background:#fff7ed; color:#c2410c; }
.pm-kind--blue   { background:#eff6ff; color:#1d4ed8; }
.pm-kind--purple { background:#faf5ff; color:#7c3aed; }
.pm-kind--teal   { background:#f0fdfa; color:#0f766e; }
.pm-kind--green  { background:#f0fdf4; color:#15803d; }
.pm-kind--yellow { background:#fefce8; color:#a16207; }
.pm-kind--red    { background:#fff1f2; color:#be123c; }
.pm-kind--gray   { background:#f8fafc; color:#64748b; }

/* PM controls bar */
.pm-controls {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:white;
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:16px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.pm-select {
  padding:6px 10px;
  border:1.5px solid #dde3ec;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  outline:none;
  min-width:160px;
}
.pm-select:focus { border-color:#d97706; }
.pm-year-input {
  padding:6px 10px;
  border:1.5px solid #dde3ec;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  width:90px;
  outline:none;
}
.pm-year-input:focus { border-color:#d97706; }
.btn-load {
  padding:7px 18px;
  background:#d97706;
  color:white;
  border:none;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  cursor:pointer;
  font-weight:600;
}
.btn-load:hover { background:#b45309; }
.btn-print-report {
  padding:7px 18px;
  background:#059669;
  color:white;
  border:none;
  border-radius:8px;
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  cursor:pointer;
  font-weight:600;
}
.btn-print-report:hover { background:#047857; }

/* PM table */
.pm-table-wrap {
  background:white;
  border-radius:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  overflow:auto;
  max-height:calc(100vh - 96px);
}
.pm-table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.pm-table th {
  background:#f8fafc;
  padding:10px 14px;
  font-weight:700;
  color:#64748b;
  border-bottom:2px solid #e2e8f0;
  text-align:left;
}
.pm-table td {
  padding:10px 14px;
  border-bottom:1px solid #f1f5f9;
}
.pm-table tbody tr:last-child td { border-bottom:none; }
.th-center { text-align:center !important; }

.pm-hist-row { cursor:pointer; transition:background .15s; }
.pm-hist-row:hover { background:#f8fafc; }
.pm-detail-row td { background:#f8fafc; padding:0 !important; }
.pm-items-wrap { padding:12px 16px; }
.pm-item-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 0;
  font-size:13px;
  border-bottom:1px dashed #e2e8f0;
}
.pm-item-row:last-child { border-bottom:none; }
.pm-item-kind { min-width:100px; font-weight:600; }
.pm-item-desc { flex:1; color:#374151; }
.pm-item-qty  { color:#64748b; font-size:12px; }
.pm-kind-dot--engine_oil { color:#c2410c; }
.pm-kind-dot--gear_oil   { color:#1d4ed8; }
.pm-kind-dot--diff_oil   { color:#7c3aed; }
.pm-kind-dot--air_filter { color:#0f766e; }
.pm-kind-dot--grease     { color:#15803d; }
.pm-kind-dot--battery    { color:#a16207; }
.pm-kind-dot--other      { color:#64748b; }

.doc-badge {
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:2px 8px;
  font-size:12px;
  font-family:monospace;
}
.expand-icon { color:#94a3b8; font-size:12px; }

/* PM monthly table */
.pm-monthly-table th { font-size:12px; }
.pm-mth-col { min-width:130px; }
.pm-mth-cell { vertical-align:top; padding:6px 8px !important; }
.pm-mth-vehicle { white-space:nowrap; }
.pm-mth-currkm { font-size:11px; color:#64748b; margin-top:2px; }
.pm-mth-done { background:#f0fdf4; }
.pm-mth-count { font-weight:700; font-size:12px; color:#15803d; }
.pm-mth-event { font-size:11px; color:#374151; line-height:1.5; }

.pm-monthly-done { font-size:12px; color:#16a34a; line-height:1.5; }
.pm-monthly-count { font-weight:700; margin-right:4px; }
.pm-monthly-dates { color:#374151; }
.pm-monthly-km { font-size:11px; color:#6b7280; margin-top:2px; }
.pm-monthly-none { color:#d1d5db; font-size:13px; }

.pm-group-header td { background:#f1f5f9; padding:6px 12px !important; border-top:2px solid #e2e8f0; }
.pm-group-label { font-weight:700; font-size:13px; color:#1e40af; margin-right:10px; }
.pm-group-count { font-size:12px; color:#64748b; }

.pm-count-badge {
  display:inline-block;
  background:#d97706;
  color:white;
  border-radius:12px;
  padding:2px 10px;
  font-size:12px;
  font-weight:700;
  min-width:28px;
  text-align:center;
}
.pm-count--gray { background:#64748b; }
.pm-doc-count { font-size:13px; color:#64748b; font-weight:600; }

.pm-empty {
  text-align:center;
  padding:48px 20px;
  color:#94a3b8;
  font-size:14px;
}

/* Alert tab count badge in nav */
.tab-alert-count { font-size:12px; font-weight:700; }
.tab-alert-count--overdue { color:#be123c; }

/* Clickable stats */
.pm-stat-link { cursor:pointer; text-decoration:underline dotted; }
.pm-stat-link:hover { opacity:.75; }

/* Alert filter row */
.pm-alert-filter-row { display:flex; gap:4px; }

/* Alert chips in alert table */
.pm-alert-chip {
  display:inline-block;
  font-size:12px;
  font-weight:600;
  border-radius:6px;
  padding:3px 9px;
  margin:2px 4px 2px 0;
}
.pm-alert-chip--orange { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.pm-alert-chip--blue   { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.pm-alert-chip--purple { background:#faf5ff; color:#7c3aed; border:1px solid #ddd6fe; }

/* Vehicle detail card */
.pm-detail-card {
  background:white;
  border-radius:12px;
  border:2px solid #e2e8f0;
  padding:20px 24px;
  max-width:760px;
}
.pm-detail-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.pm-detail-title {
  font-size:18px;
  font-weight:700;
  flex:1;
}
.pm-detail-km {
  font-size:13px;
  color:#64748b;
  margin-bottom:16px;
}
.pm-detail-services { display:flex; flex-direction:column; gap:10px; }
.pm-detail-svc-row {
  display:grid;
  grid-template-columns:200px 220px 1fr;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:8px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}
.pm-detail-svc-row.pm-detail-svc--overdue { background:#fff1f2; border-color:#fda4af; }
.pm-detail-svc-row.pm-detail-svc--alert   { background:#fffbeb; border-color:#fde68a; }
.pm-detail-svc-left { display:flex; flex-direction:column; gap:2px; }
.pm-detail-interval { font-size:11px; color:#94a3b8; }
.pm-detail-svc-status { font-weight:700; font-size:13px; }
.pm-detail-svc-info { display:flex; flex-wrap:wrap; gap:10px; }
.pm-detail-info-item { font-size:12px; color:#64748b; }
.pm-detail-info-item strong { color:#1a1a2e; }

/* Monthly table cells */
.pm-mth-cell--overdue { background:#fff1f2; }
.pm-mth-cell--alert   { background:#fffbeb; }
.pm-mth-rem           { font-size:12px; font-weight:700; margin-bottom:2px; }
.pm-mth-rem--overdue  { color:#be123c; }
.pm-mth-rem--alert    { color:#d97706; }
.pm-mth-rem--ok       { color:#15803d; }
.pm-monthly-date { font-size:11px; color:#374151; }
.pm-monthly-km   { font-size:11px; color:#6b7280; margin-top:1px; }
/* Monthly row status stripe */
.pm-mth-row--overdue > td:first-child { border-left:3px solid #f43f5e; }
.pm-mth-row--alert   > td:first-child { border-left:3px solid #f59e0b; }

/* DBF service history section (detail tab) */
.pm-detail-history { margin:16px 0 8px; }
.pm-detail-history-title { font-size:13px; font-weight:700; color:#374151;
  margin-bottom:8px; padding:6px 10px; background:#f8fafc;
  border-left:3px solid #3b82f6; border-radius:0 6px 6px 0; }
.pm-hist-table { font-size:12px; }
.pm-hist-table th { font-size:11px; padding:6px 8px; }
.pm-hist-table td { padding:5px 8px; vertical-align:middle; }
.pm-hist-date { white-space:nowrap; color:#374151; }
.pm-hist-km   { white-space:nowrap; font-size:12px; color:#374151; }
.pm-hist-svc-label { display:inline-block; font-size:11px; font-weight:600;
  padding:1px 7px; border-radius:10px;
  background:#eff6ff; color:#1d4ed8; }
.pm-hist-desc { font-size:11px; color:#6b7280; max-width:300px; }
.pm-hist-desc-col { min-width:180px; }



/* ── Sticky table headers — หัวตารางค้างเมื่อเลื่อนดูข้อมูลยาว (ทุก dashboard) ── */
.rb-table thead, .rp-table thead, .ad-table thead, .sv-table thead,
.st-table thead, .tr-table thead, .tbl thead, .pm-table thead,
.users-table thead, .arap-table thead, .monthly-report-table thead {
  position: sticky; top: 0; z-index: 6;
}
/* wrapper แนวนอน (overflow-x) ทำให้ sticky ต่อหน้าเพจไม่ทำงาน
   → จำกัดความสูงให้เลื่อนภายในกรอบแทน หัวตารางจึงค้างได้ */
.rb-table-wrap, .rp-table-wrap, .ad-table-wrap, .sv-table-wrap, .tr-table-wrap {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
@media print {
  .rb-table-wrap, .rp-table-wrap, .ad-table-wrap, .sv-table-wrap,
  .tr-table-wrap, .monthly-report-table,
  .table-wrap, .pm-table-wrap, .table-card {
    max-height: none !important;
    overflow: visible !important;
  }
  .rb-table thead, .rp-table thead, .ad-table thead, .sv-table thead,
  .st-table thead, .tr-table thead, .tbl thead, .pm-table thead,
  .users-table thead, .arap-table thead, .monthly-report-table thead {
    position: static !important;   /* thead repeat ของ print ทำงานตามเดิม */
  }
}


/* ── หัวคอลัมน์ทุกตารางจัดกึ่งกลาง (เนื้อหาใน body คงเดิม: ข้อความซ้าย/ตัวเลขขวา) ── */
table thead th { text-align: center !important; vertical-align: middle; }