/* X10 Sales Insight — โหลดต่อจาก brand.css */
body { background: var(--page-bg, #f4f7fb); }
.hero { box-shadow: 0 2px 12px -6px rgba(15, 76, 131, .5); }
.navlink { padding: 6px 10px; border-radius: 10px; color: #dbe7f3; white-space: nowrap; }
.navlink:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.navlink.active { background: #fff; color: #0f4c83; font-weight: 600; }

.filter-bar { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid #e2e9f1; }
.inp { border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 8px; font-size: 13px; background: #fff; }
.chip { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid #dbe3ec; background: #fff; color: #475569; white-space: nowrap; }
.chip:hover { border-color: #0f4c83; color: #0f4c83; }
.chip.on { background: #0f4c83; border-color: #0f4c83; color: #fff; }
.seg { display: inline-flex; border: 1px solid #dbe3ec; border-radius: 10px; overflow: hidden; background: #fff; }
.seg button { font-size: 12px; padding: 4px 10px; color: #475569; }
.seg button.on { background: #f68a39; color: #fff; font-weight: 600; }
.tgl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #475569; padding: 4px 8px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #fff; cursor: pointer; white-space: nowrap; }

.card { min-width: 0; background: #fff; border: 1px solid #e2e9f1; border-radius: 16px; box-shadow: 0 1px 3px rgba(15, 76, 131, .06); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 4px; }
.card-h h3 { font-weight: 600; color: #16283c; font-size: 15px; }
.card-h .hint { font-size: 11px; color: #64748b; }
.card-b { padding: 8px 16px 14px; }

.kpi { background: #fff; border: 1px solid #e2e9f1; border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-accent { border-left: 4px solid #f68a39; }
.kpi-label { font-size: 12px; color: #5a6b7d; }
.kpi-value { font-size: 22px; font-weight: 700; color: #0f4c83; line-height: 1.2; font-variant-numeric: tabular-nums; }
.est-badge { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: #fdeee1; color: #c96a1f; font-weight: 600; white-space: nowrap; }

.tbl-wrap { overflow: auto; border: 1px solid #eef2f7; border-radius: 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { position: sticky; top: 0; background: #f2f7fc; color: #0a3763; font-weight: 600; padding: 7px 9px; border-bottom: 1px solid #e2e9f1; white-space: nowrap; cursor: pointer; user-select: none; z-index: 1; }
.tbl td { padding: 6px 9px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.tbl tbody tr:hover td { background: #f8fbff; }
.tbl tfoot td { font-weight: 700; background: #f8fafc; border-top: 2px solid #e2e9f1; position: sticky; bottom: 0; }
.bar-cell { position: relative; }
.bar-cell > i { position: absolute; left: 0; top: 4px; bottom: 4px; background: #e3edf7; border-radius: 4px; z-index: 0; }
.bar-cell > span { position: relative; z-index: 1; }

.tabbtn { padding: 8px 14px; border-radius: 12px 12px 0 0; font-size: 14px; color: #475569; border: 1px solid transparent; }
.tabbtn.active { background: #fff; color: #0f4c83; font-weight: 600; border-color: #e2e9f1; border-bottom-color: #fff; }
.note { font-size: 12px; background: #fef7f1; border-left: 4px solid #f68a39; padding: 8px 12px; border-radius: 8px; color: #7c4a1a; }
.info { font-size: 12px; background: #f2f7fc; border-left: 4px solid #0f4c83; padding: 8px 12px; border-radius: 8px; color: #0a3763; }
.ch { width: 100%; height: 320px; }
.ch-sm { width: 100%; height: 240px; }
.ch-lg { width: 100%; height: 380px; }

/* ปฏิทินเข้าพัก */
.cal { border-collapse: separate; border-spacing: 2px; font-size: 10px; }
.cal td, .cal th { width: 22px; height: 20px; text-align: center; border-radius: 4px; }
.cal th { color: #64748b; font-weight: 500; }
.cal td.h { width: auto; text-align: left; padding-right: 6px; font-weight: 600; color: #0a3763; white-space: nowrap; }
.cal .O { background: #0f4c83; color: #fff; } .cal .I { background: #2a9d8f; color: #fff; } .cal .B { background: #9cc3e6; color: #0a3763; }
.cal .e { background: #f1f5f9; } .cal .we { box-shadow: inset 0 -2px 0 #f68a39; }
.heat td { text-align: center; font-size: 11px; }

::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
@media print { .filter-bar, header, .noprint { display: none !important; } }
@media (max-width: 767px) {
  .filter-bar { position: static; }
  .kpi-value { font-size: 18px; }
  .kpi { padding: 8px 10px; }
}
.seg-basis button { font-weight: 600; }
.seg-basis button.on { background: #0f4c83; }
.tbl thead tr:first-child th[colspan] { background: #e3edf7; border-bottom: 1px solid #cfdcea; }
.tbl thead tr + tr th { top: 30px; }
.grp-out { background: #fef7f1 !important; color: #c96a1f !important; }
.grp-in { background: #e3edf7 !important; }