:root {
  --navy: #123d63;
  --navy-deep: #0b2b47;
  --teal: #0a858b;
  --teal-soft: #dff1f0;
  --coral: #e56f51;
  --amber: #d79a2b;
  --green: #2f7d57;
  --lilac: #7668b4;
  --ink: #1d2e3a;
  --muted: #647580;
  --line: #d7e0e5;
  --page: #f3f6f7;
  --panel: #ffffff;
  --soft: #eef3f5;
  --shadow: 0 1px 3px rgba(19, 49, 70, .1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: "Segoe UI", "Leelawadee UI", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.hidden { display: none !important; }

.portal-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  color: #fff;
  background: var(--navy-deep);
  border-right: 1px solid #173c59;
  z-index: 20;
}
.brand-block { display: flex; align-items: center; gap: 11px; padding: 0 8px 22px; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--navy-deep); background: #fff; border-radius: 5px; font-weight: 800; }
.brand-block strong { display: block; font-size: 15px; }
.brand-block span:not(.brand-mark) { display: block; margin-top: 2px; color: #a9bdcb; font-size: 10px; }
.primary-nav { display: grid; gap: 5px; margin-top: 20px; }
.primary-link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-height: 59px;
  padding: 9px 8px;
  color: #d8e4eb;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  text-align: left;
}
.primary-link:hover { background: rgba(255,255,255,.06); }
.primary-link.active { color: #fff; background: #174b71; border-color: #2a6289; }
.nav-index { padding-top: 2px; color: #72c3c6; font-size: 10px; font-weight: 800; }
.primary-link strong { display: block; font-size: 13px; line-height: 1.25; }
.primary-link small { display: block; margin-top: 4px; color: #a9bdcb; font-size: 10px; line-height: 1.3; }
.sidebar-note { margin-top: auto; padding: 12px 8px 0; color: #a9bdcb; border-top: 1px solid rgba(255,255,255,.13); font-size: 10px; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: #5bc18a; border-radius: 50%; }

.main-stage { min-width: 0; }
.page-header {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 24px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.mobile-menu { display: none; width: 36px; height: 36px; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.heading-block { min-width: 0; flex: 1; }
.eyebrow { color: var(--teal); font-size: 10px; font-weight: 800; text-transform: uppercase; }
h1 { margin: 3px 0 2px; color: var(--navy); font-size: 24px; line-height: 1.2; }
.heading-block p { margin: 0; color: var(--muted); font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.source-badge { padding: 6px 8px; color: #45616f; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; font-size: 10px; font-weight: 700; }
.icon-action { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--navy); border-radius: 4px; text-decoration: none; font-size: 18px; }

.secondary-nav { min-height: 47px; display: flex; align-items: end; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); }
.subnav-group { display: none; align-items: end; gap: 2px; }
.subnav-group.active { display: flex; }
.subnav-group button { min-height: 39px; padding: 0 14px; color: #627582; background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: 12px; }
.subnav-group button.active { color: var(--navy); border-bottom-color: var(--teal); font-weight: 700; }

.looker-workspace { position: relative; min-height: calc(100vh - 92px); background: #fff; }
.looker-frame, .looker-frame iframe { width: 100%; min-height: calc(100vh - 92px); border: 0; }
.looker-frame iframe { display: block; background: #fff; }
.looker-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 7px; color: var(--navy); background: #fff; text-align: center; z-index: 2; }
.looker-loading small { color: var(--muted); }
.loading-line { width: 180px; height: 4px; margin: 0 auto 7px; background: linear-gradient(90deg, var(--teal) 0 38%, #d9e5e9 38% 100%); animation: load 1.3s ease-in-out infinite alternate; }
@keyframes load { to { transform: scaleX(.58); opacity: .55; } }
.looker-message { position: absolute; top: 16px; right: 18px; display: grid; gap: 2px; max-width: 430px; padding: 10px 12px; color: #7b4a05; background: #fff8e8; border: 1px solid #e9c77a; border-radius: 5px; box-shadow: var(--shadow); z-index: 3; font-size: 11px; }

.commercial-workspace { padding: 14px 18px 30px; }
.commercial-filters { display: grid; grid-template-columns: minmax(240px, 1.35fr) repeat(5, minmax(130px, .62fr)); gap: 8px; padding: 11px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.commercial-filters label { min-width: 0; }
.commercial-filters label > span { display: block; margin: 0 0 4px 1px; color: var(--muted); font-size: 10px; font-weight: 700; }
.commercial-filters input, .commercial-filters select { width: 100%; height: 37px; padding: 0 9px; color: var(--ink); background: #fff; border: 1px solid #bac8d1; border-radius: 4px; outline: none; }
.commercial-filters input:focus, .commercial-filters select:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(10,133,139,.13); }
.data-context { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; color: var(--muted); font-size: 10px; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
.kpi-card { min-width: 0; min-height: 91px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.kpi-card.primary { border-top: 3px solid var(--teal); padding-top: 10px; }
.kpi-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.kpi-value { margin-top: 4px; color: var(--navy); font-size: 25px; line-height: 1.1; font-weight: 750; overflow-wrap: anywhere; }
.kpi-note { margin-top: 5px; color: #7a8a94; font-size: 9px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 10px; margin-bottom: 10px; }
.dashboard-grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.panel-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.panel-title { color: var(--navy); font-size: 14px; font-weight: 750; }
.panel-subtitle { margin-top: 2px; color: var(--muted); font-size: 9px; }
.panel-count { color: var(--muted); font-size: 9px; white-space: nowrap; }
.panel-body { padding: 12px 13px; }

.matrix-wrap { overflow: auto; max-height: 540px; }
.matrix { display: grid; min-width: max-content; background: #fff; }
.matrix-cell { min-width: 108px; min-height: 58px; display: grid; place-items: center; padding: 5px; border-right: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; color: #536673; background: #fff; font-size: 9px; text-align: center; }
.matrix-cell.header { position: sticky; top: 0; min-height: 53px; color: var(--navy); background: #edf4f6; font-weight: 700; z-index: 2; }
.matrix-cell.company { position: sticky; left: 0; min-width: 190px; justify-items: start; color: var(--navy); background: #fff; border-right: 1px solid var(--line); font-weight: 700; text-align: left; z-index: 1; }
.matrix-cell.corner { left: 0; z-index: 3; }
.matrix-button { width: 100%; height: 100%; padding: 5px; color: inherit; background: transparent; border: 0; font-size: 9px; }
.matrix-button strong { display: block; font-size: 10px; }
.scope-line { display: block; margin-top: 4px; font-size: 8px; font-weight: 500; line-height: 1.25; }
.matrix-cell.hit-low { color: #7d5b16; background: #fff2cf; }
.matrix-cell.hit-mid { color: #17686b; background: #cfeceb; }
.matrix-cell.hit-high { color: #fff; background: var(--teal); }
.matrix-cell.configured { color: #657781; background: #e7ecef; }
.matrix-cell.none { color: #c1ccd2; }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 9px 12px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.legend-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border-radius: 2px; }

.target-panel .panel-head { align-items: flex-start; }
.target-list { display: grid; gap: 14px; }
.target-row { display: grid; gap: 5px; min-width: 0; padding-bottom: 11px; border-bottom: 1px solid #edf1f3; }
.target-row:last-child { padding-bottom: 0; border-bottom: 0; }
.target-row-head, .target-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.target-row-head strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.target-row-head span { color: #314c5c; font-size: 10px; font-weight: 750; white-space: nowrap; }
.target-track { position: relative; height: 14px; background: #e4eaed; border-radius: 2px; overflow: visible; }
.target-track.missing { display: grid; place-items: center; color: #758690; background: repeating-linear-gradient(135deg, #f1f4f5 0, #f1f4f5 6px, #e7ecef 6px, #e7ecef 12px); font-size: 8px; }
.target-fill { height: 100%; border-radius: 2px; }
.target-fill.pass { background: var(--green); }
.target-fill.below { background: var(--coral); }
.target-marker { position: absolute; top: -3px; right: 0; width: 2px; height: 20px; background: var(--navy); }
.target-row-foot { color: var(--muted); font-size: 8px; }
.target-row-foot b { color: var(--navy); font-size: 9px; white-space: nowrap; }

.performance-pill { display: inline-block; max-width: 150px; padding: 4px 6px; border-radius: 3px; font-size: 8px; font-weight: 700; line-height: 1.35; text-align: left; }
.performance-pill.strong { color: #216342; background: #e2f2e8; }
.performance-pill.delivery-low { color: #17686b; background: #dff1f0; }
.performance-pill.response-low { color: #8b5d0a; background: #fff0d4; }
.performance-pill.weak { color: #9b3d31; background: #fae5e2; }
.performance-pill.incomplete { color: #5f6e77; background: #e8edef; }
.customer-result-panel { margin-bottom: 10px; }
.customer-result-table { min-width: 1180px; }
.customer-result-table td { height: 58px; }
.supporting-section { margin-top: 10px; }
.empty-state.compact { min-height: 260px; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 850px; border-collapse: collapse; table-layout: fixed; }
th { height: 37px; padding: 7px 9px; color: #536877; background: #f0f4f6; border-bottom: 1px solid var(--line); font-size: 9px; text-align: right; }
td { height: 45px; padding: 7px 9px; color: #2e424f; border-bottom: 1px solid #edf1f3; font-size: 10px; text-align: right; vertical-align: middle; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: #f8fbfb; }
.name-cell { overflow: hidden; color: var(--navy); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.name-cell button { padding: 0; color: inherit; background: none; border: 0; font-weight: inherit; text-align: left; }
.subline { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }
.product-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.product-tag { padding: 3px 5px; color: #295267; background: #e5f0f3; border-radius: 3px; font-size: 8px; }
.product-tag small { display: block; margin-top: 2px; color: #607684; font-size: 7px; line-height: 1.2; }
.status-pill { display: inline-block; padding: 3px 6px; border-radius: 3px; font-size: 8px; font-weight: 700; }
.status-pill.active { color: var(--green); background: #e2f2e8; }
.status-pill.ended { color: #6c7780; background: #e8edef; }
.status-pill.unknown { color: #95620c; background: #fff0d4; }

.company-selector { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(250px, .55fr); gap: 10px; align-items: end; margin-bottom: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 6px; box-shadow: var(--shadow); }
.company-selector label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.company-selector select { width: 100%; height: 39px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid #b9c7cf; border-radius: 4px; }
.company-summary strong { display: block; color: var(--navy); font-size: 15px; }
.company-summary span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.empty-state { display: grid; min-height: 240px; place-items: center; padding: 30px; color: var(--muted); text-align: center; }
.error-state { padding: 18px; color: #8a2d2d; background: #fff2f2; border: 1px solid #e6b3b3; border-radius: 5px; }

@media (max-width: 1180px) {
  .commercial-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-field { grid-column: span 2; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-grid, .dashboard-grid.equal { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .portal-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -260px; width: 244px; transition: left .2s ease; }
  .sidebar.open { left: 0; box-shadow: 10px 0 30px rgba(0,0,0,.18); }
  .mobile-menu { display: grid; place-items: center; flex: 0 0 auto; }
  .page-header { min-height: 98px; padding: 14px; }
  h1 { font-size: 20px; }
  .heading-block p { font-size: 10px; }
  .source-badge { display: none; }
  .secondary-nav { padding: 0 12px; overflow-x: auto; }
  .subnav-group.active { min-width: max-content; }
  .commercial-workspace { padding: 10px; }
  .commercial-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field { grid-column: 1 / -1; }
  .company-selector { grid-template-columns: 1fr; }
  .looker-workspace, .looker-frame, .looker-frame iframe { min-height: calc(100vh - 98px); }
}

@media (max-width: 560px) {
  .header-actions { align-self: flex-start; }
  .commercial-filters { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { min-height: 82px; }
  .kpi-value { font-size: 23px; }
  .data-context { flex-direction: column; }
  .matrix-cell.company { min-width: 145px; }
  .target-row-head, .target-row-foot { align-items: flex-start; flex-direction: column; gap: 2px; }
  .target-row-head span { white-space: normal; overflow-wrap: anywhere; }
}

/* ==================================================================
   Overview — Material / Looker style (สดใส มีสีสัน) · scope #commercialOverview
   ================================================================== */
#commercialOverview {
  --m-blue:#1a73e8;   --m-blue-bg:#e8f0fe;
  --m-green:#1e8e3e;  --m-green-bg:#e6f4ea;
  --m-purple:#9334e6; --m-purple-bg:#f3e8fd;
  --m-teal:#12868f;   --m-teal-bg:#e0f5f7;
  --m-amber:#e37400;  --m-amber-bg:#fef3e0;
  --m-red:#d93025;    --m-red-bg:#fce8e6;
  --m-ink:#202124;    --m-muted:#5f6368;   --m-line:#e8eaed;
  --m-elev:0 1px 2px rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.06);
  --m-elev-h:0 1px 3px rgba(60,64,67,.14), 0 4px 8px 3px rgba(60,64,67,.10);
  font-family:"Google Sans","Segoe UI","Leelawadee UI",system-ui,sans-serif;
  color:var(--m-ink);
  display:flex; flex-direction:column; gap:16px;
}

/* ---- KPI scorecards (ไม่มีไอคอน · ตัวเลขไม่ตกร่อง) ---- */
#commercialOverview .mkpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
#commercialOverview .mkpi {
  display:flex; flex-direction:column; gap:3px; padding:15px 16px;
  background:#fff; border:1px solid var(--m-line); border-top:3px solid var(--m-line); border-radius:12px; box-shadow:var(--m-elev);
  transition:box-shadow .16s, transform .16s;
}
#commercialOverview .mkpi:hover { box-shadow:var(--m-elev-h); transform:translateY(-2px); }
#commercialOverview .mkpi-label { color:var(--m-muted); font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#commercialOverview .mkpi-value { font-size:23px; line-height:1.15; font-weight:700; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
#commercialOverview .mkpi-note { color:#80868b; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#commercialOverview .mkpi.c-blue  { border-top-color:var(--m-blue);   } #commercialOverview .mkpi.c-blue   .mkpi-value{color:var(--m-blue);}
#commercialOverview .mkpi.c-green { border-top-color:var(--m-green);  } #commercialOverview .mkpi.c-green  .mkpi-value{color:var(--m-green);}
#commercialOverview .mkpi.c-purple{ border-top-color:var(--m-purple); } #commercialOverview .mkpi.c-purple .mkpi-value{color:var(--m-purple);}
#commercialOverview .mkpi.c-teal  { border-top-color:var(--m-teal);   } #commercialOverview .mkpi.c-teal   .mkpi-value{color:var(--m-teal);}
#commercialOverview .mkpi.c-amber { border-top-color:var(--m-amber);  } #commercialOverview .mkpi.c-amber  .mkpi-value{color:var(--m-amber);}
#commercialOverview .mkpi.c-red   { border-top-color:var(--m-red);    } #commercialOverview .mkpi.c-red    .mkpi-value{color:var(--m-red);}

/* ---- panels ---- */
#commercialOverview .dashboard-grid { display:grid; gap:16px; margin:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
#commercialOverview .dashboard-grid.equal { grid-template-columns:repeat(2,minmax(0,1fr)); }
#commercialOverview .panel { background:#fff; border:1px solid var(--m-line); border-radius:16px; box-shadow:var(--m-elev); overflow:hidden; }
#commercialOverview .panel-head { min-height:auto; padding:16px 18px 12px; border-bottom:1px solid var(--m-line); }
#commercialOverview .panel-title { color:var(--m-ink); font-size:15px; font-weight:600; }
#commercialOverview .panel-subtitle { margin-top:3px; color:var(--m-muted); font-size:11px; }
#commercialOverview .panel-count { color:#80868b; font-size:11px; }
#commercialOverview .panel-body { padding:16px 18px 18px; }

/* ---- area charts ---- */
#commercialOverview .chart-wrap { position:relative; }
#commercialOverview .area-svg { display:block; width:100%; min-width:240px; height:auto; }
#commercialOverview .ac-grid { stroke:var(--m-line); stroke-width:1; }
#commercialOverview .ac-axis { fill:var(--m-muted); font-size:10px; }
#commercialOverview .ac-cross { stroke:#9aa0a6; stroke-width:1; stroke-dasharray:3 3; }
#commercialOverview .ac-marker { stroke:#fff; stroke-width:2.5; }
#commercialOverview .ac-tip { position:absolute; top:4px; pointer-events:none; z-index:5; padding:6px 10px; border-radius:9px; background:#202124; color:#fff; font-size:11px; line-height:1.3; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.22); }
#commercialOverview .ac-tip b { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
#commercialOverview .ac-tip span { display:block; margin-top:1px; color:#c8ccd0; font-size:9px; }

/* ---- product performance = แท่งแนวนอนมนๆ ---- */
#commercialOverview .pp-list { display:grid; gap:14px; }
#commercialOverview .pp-row { display:grid; grid-template-columns:minmax(130px,168px) minmax(0,1fr) 84px 58px 104px; align-items:center; gap:14px; }
#commercialOverview .pp-label { min-width:0; }
#commercialOverview .pp-label b { display:block; overflow:hidden; color:var(--m-ink); font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
#commercialOverview .pp-label span { display:block; margin-top:2px; color:var(--m-muted); font-size:10px; }
#commercialOverview .pp-bar { height:26px; border-radius:8px; background:#f1f3f4; overflow:hidden; }
#commercialOverview .pp-bar > i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#4285f4,#1a73e8); }
#commercialOverview .pp-val { color:var(--m-ink); font-size:14px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
#commercialOverview .pp-ctr { color:var(--m-muted); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
#commercialOverview .pp-ctr span { display:block; color:#9aa0a6; font-size:8px; }
#commercialOverview .pp-dark { text-align:right; }
#commercialOverview .pp-dark .badge { display:inline-block; padding:3px 10px; border-radius:12px; background:var(--m-red-bg); color:var(--m-red); font-size:11px; font-weight:600; white-space:nowrap; }
#commercialOverview .pp-dark .ok { display:inline-block; padding:3px 10px; border-radius:12px; background:var(--m-green-bg); color:var(--m-green); font-size:11px; font-weight:600; }

/* ---- detail table ---- */
#commercialOverview .customer-result-table td.num, #commercialOverview .customer-result-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
#commercialOverview .zero-flag { color:var(--m-red); font-weight:600; font-size:11px; white-space:nowrap; }
#commercialOverview .empty-state.compact { min-height:150px; display:grid; place-items:center; color:var(--m-muted); font-size:12px; }

@media (max-width:1150px){ #commercialOverview .mkpi-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ #commercialOverview .dashboard-grid,#commercialOverview .dashboard-grid.equal{grid-template-columns:1fr;} }
@media (max-width:680px){
  #commercialOverview .mkpi-grid{grid-template-columns:repeat(2,1fr);}
  #commercialOverview .pp-row{grid-template-columns:1fr auto; grid-template-areas:"label val" "bar bar" "ctr dark"; row-gap:6px;}
  #commercialOverview .pp-label{grid-area:label;} #commercialOverview .pp-val{grid-area:val;}
  #commercialOverview .pp-bar{grid-area:bar;} #commercialOverview .pp-ctr{grid-area:ctr;text-align:left;} #commercialOverview .pp-dark{grid-area:dark;}
}

/* ---- Product cards (แยกแต่ละ Product ของใครของมัน) ---- */
#commercialOverview .prod-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px; }
#commercialOverview .prod-card { padding:14px 15px; background:#fff; border:1px solid var(--m-line); border-radius:14px; box-shadow:var(--m-elev); transition:box-shadow .16s, transform .16s; }
#commercialOverview .prod-card:hover { box-shadow:var(--m-elev-h); transform:translateY(-2px); }
#commercialOverview .pc-head { display:flex; align-items:center; gap:8px; }
#commercialOverview .pc-rank { flex:none; padding:2px 8px; border-radius:10px; background:var(--m-blue-bg); color:var(--m-blue); font-size:11px; font-weight:700; }
#commercialOverview .pc-head b { overflow:hidden; color:var(--m-ink); font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
#commercialOverview .pc-spark { margin:10px 0 8px; }
#commercialOverview .spark { display:block; width:100%; height:52px; }
#commercialOverview .spark-empty { height:52px; display:grid; place-items:center; color:#9aa0a6; font-size:10px; background:#f8f9fb; border-radius:8px; }
/* ตารางเทียบ รวม vs เฉลี่ย/ชิ้น */
#commercialOverview .pc-stats { margin:6px 0 8px; }
#commercialOverview .pc-srow { display:grid; grid-template-columns:1fr 80px 84px; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid var(--m-line); }
#commercialOverview .pc-srow:last-child { border-bottom:0; }
#commercialOverview .pc-srow.head { padding:0 0 5px; }
#commercialOverview .pc-srow.head span { font-size:9px; font-weight:600; color:var(--m-muted); text-align:right; }
#commercialOverview .pc-srow.head span:first-child { text-align:left; }
#commercialOverview .pc-srow > span:first-child { font-size:11px; color:var(--m-muted); }
#commercialOverview .pc-srow > b { font-size:14px; font-weight:700; color:var(--m-ink); text-align:right; font-variant-numeric:tabular-nums; }
#commercialOverview .pc-srow > b.hi { color:var(--m-blue); }
#commercialOverview .pc-ctr { display:flex; align-items:center; gap:8px; margin:0 0 11px; padding:8px 11px; background:var(--m-purple-bg); border-radius:9px; }
#commercialOverview .pc-ctr > span { font-size:11px; font-weight:600; color:var(--m-purple); }
#commercialOverview .pc-ctr > b { font-size:16px; font-weight:700; color:var(--m-purple); font-variant-numeric:tabular-nums; }
#commercialOverview .pc-ctr > em { margin-left:auto; font-size:9px; font-style:normal; color:#9179b8; text-align:right; }
#commercialOverview .pc-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--m-muted); }
#commercialOverview .pc-foot .badge { flex:none; padding:3px 9px; border-radius:11px; background:var(--m-red-bg); color:var(--m-red); font-weight:600; white-space:nowrap; }
#commercialOverview .pc-foot .ok { flex:none; padding:3px 9px; border-radius:11px; background:var(--m-green-bg); color:var(--m-green); font-weight:600; }

/* ---- กราฟแท่งรายสัปดาห์ ---- */
#commercialOverview .wk-chart { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:end; padding-top:8px; }
#commercialOverview .wk-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
#commercialOverview .wk-val { margin-bottom:7px; font-size:12px; font-weight:700; color:var(--m-ink); font-variant-numeric:tabular-nums; }
#commercialOverview .wk-bar { width:66%; max-width:74px; min-height:3px; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#4285f4,#1a73e8); }
#commercialOverview .wk-lbl { margin-top:9px; font-size:11px; font-weight:600; color:var(--m-ink); }
#commercialOverview .wk-sub { margin-top:2px; font-size:9px; color:var(--m-muted); }

/* ---- ตารางสรุป รวม/เฉลี่ย ---- */
#commercialOverview .sum-table { width:100%; border-collapse:collapse; }
#commercialOverview .sum-table th { padding:7px 10px; border-bottom:1px solid var(--m-line); font-size:10px; font-weight:600; color:var(--m-muted); text-align:left; }
#commercialOverview .sum-table td { padding:11px 10px; border-bottom:1px solid var(--m-line); font-size:14px; color:var(--m-ink); }
#commercialOverview .sum-table tbody tr:last-child td { border-bottom:0; }
#commercialOverview .sum-table td:first-child { color:var(--m-muted); font-size:12px; }
#commercialOverview .sum-table .num { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
#commercialOverview .sum-table th.num { font-weight:600; }
#commercialOverview .sum-table .hi { color:var(--m-blue); }
#commercialOverview .sum-table .muted { color:#9aa0a6; font-weight:600; }
#commercialOverview .sum-note { margin:12px 0 0; font-size:10px; color:var(--m-muted); line-height:1.5; }