/* Regen ads optimus — on top of Gradient Able (free build has no dark theme, so it lives here) */

/* ---------- tokens: one type scale + status colours per theme ---------- */
:root {
  --bs-font-sans-serif: "Poppins", "Prompt", sans-serif; --bs-body-font-family: "Poppins", "Prompt", sans-serif;
  --fs-xs: .75rem;      /* 12 · meta lines, legends, sub rows */
  --fs-sm: .8125rem;    /* 13 · tables, chips, buttons */
  --fs-md: .875rem;     /* 14 · body, menu, box titles */
  --fs-lg: 1rem;        /* 16 · card titles */
  --fs-xl: 1.25rem;     /* 20 · two-figure box amounts */
  --fs-2xl: 1.375rem;   /* 22 · box main number */
  --c-brand: #4099ff;
  /* ROAS (เป้า 1.5): <1 แดง · 1–1.49 ส้ม · 1.5–1.99 เขียว · 2–2.99 ฟ้าน้ำเงิน · 3+ ม่วง — light shades darker so they pass 4.5:1 on white
     2+ blue picked for: ≥ 5:1 on both card colours · far from the teal-green (ΔE 95–105, still 74–92 for red-green colour blindness) */
  --c-bad: #d1324e; --c-mid: #a86200; --c-good: #0b7f63; --c-great: #2563eb; --c-top: #7e22ce;
  --c-warn: #a86200; --c-warn-bg: rgba(240, 160, 32, .14);
  --c-total: #1d4ed8;   /* "รวม" rows (6.7:1 on white) */
}
[data-bs-theme=dark] {
  --c-bad: #ff5370; --c-mid: #f0a020; --c-good: #2ed8b6; --c-great: #4f8dfd; --c-top: #c084fc;
  --c-warn: #f0a020; --c-warn-bg: rgba(240, 160, 32, .1);
  --c-total: #6aa8ff;   /* 6.7:1 on the dark card */
}
body { font-family: "Poppins", "Prompt", sans-serif; }

/* ---------- header / sidebar ---------- */
.brand-text { font-size: 1.05rem; font-weight: 500; color: var(--pc-sidebar-color); text-decoration: none; display: flex; gap: .4rem; align-items: center; }
.brand-text i { font-size: 1.4rem; color: var(--c-brand); }
.hdr-title { color: #fff; font-weight: 500; font-size: var(--fs-lg); padding-left: .5rem; }
.pc-head-link i { font-size: 1.25rem; }
.pc-item.active > .pc-link { color: var(--pc-sidebar-active-color); font-weight: 500; }

/* ---------- filters: date (+ "Meta ดึงล่าสุด" under it) floats top-right; names flow beside it, wrap under it ---------- */
.toolbar { margin-bottom: .45rem; }
.toolbar::after { content: ""; display: block; clear: both; }
.toolbar .dp-wrap { float: right; margin: 0 0 0 .35rem; }   /* no bottom margin: taller than one chip row would push row 2 aside */
.chip { display: inline-block; margin: 0 .25rem .3rem 0; padding: .2rem .7rem; font-size: var(--fs-sm); border-radius: 999px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); line-height: 1.4; }
.chip:hover { border-color: var(--c-brand); }
.chip.on { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
#status { font-size: var(--fs-xs); line-height: 1.2; margin-top: 3px; text-align: right; max-width: 60vw; }

/* ---------- layout (template default = 25px padding, 24px gaps) ---------- */
.pc-container .pc-content { padding-top: 14px; }
.pc-content .row { --bs-gutter-x: 16px; }
.pc-content .card { margin-bottom: 16px; }
.pc-content .card .card-header { padding: 12px 16px; }
.pc-content .card .card-body { padding: 12px 16px; }
.pc-content .card .card-body.py-2 { padding-top: 4px; padding-bottom: 4px; }
.pc-content .card .card-header h5 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }   /* template sets 14px on .card .card-header h5 */
.pc-content .card .card-header h5 small { font-size: var(--fs-xs); font-weight: 400; }
.empty { padding: 2rem; text-align: center; color: var(--bs-secondary-color); }

/* ---------- number boxes ---------- */
.pc-content .card.kpi { height: calc(100% - 16px); }   /* boxes in a row share the tallest height */
.kpi .card-body { padding: 14px 16px; }
.kpi h6 { font-size: var(--fs-md); margin-bottom: .3rem; font-weight: 500; }
.kpi h2 { font-size: var(--fs-2xl); margin: 0 0 .3rem; white-space: nowrap; }
.kpi p { margin: 0; font-size: var(--fs-sm); font-weight: 400; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.kpi .text-white, .kpi h2, .kpi h6, .kpi i { color: #fff !important; }
/* two figures in one box (New/Re · Max/Ae): label < amount, orders smallest */
.kpi2 .card-body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .35rem; padding-right: 3rem; }
.kpi2-icon { position: absolute; top: 14px; right: 16px; font-size: 1.4rem; }
.kpi-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; line-height: 1.25; }
.kpi-row span { width: 3.2rem; font-size: var(--fs-lg); font-weight: 500; }
.kpi-row b { font-size: var(--fs-xl); font-weight: 600; white-space: nowrap; }
.kpi-row small { font-size: var(--fs-sm); font-weight: 400; white-space: nowrap; opacity: .95; }
/* darker gradients so white text reads well (บอส 10-15: ขาว + พื้นเข้มขึ้น) */
.kpi.bg-grd-success { background: linear-gradient(45deg, #097a60, #0b8a6d) !important; }
.kpi.bg-grd-primary { background: linear-gradient(45deg, #1a5fbf, #2f7be0) !important; }
.kpi.bg-grd-info { background: linear-gradient(45deg, #04728d, #0582a1) !important; }
.kpi.bg-grd-warning { background: linear-gradient(45deg, #a85f05, #c27406) !important; }
.kpi.bg-grd-danger { background: linear-gradient(45deg, #c22c48, #d9455f) !important; }
.kpi.bg-grd-secondary { background: linear-gradient(45deg, #3f4855, #57606d) !important; }
.kpi.bg-grd-purple { background: linear-gradient(45deg, #5b3fb0, #7254cc) !important; }   /* Inbound (ยอดขาย admin) */

/* chart card */
.lg { font-size: var(--fs-xs); color: var(--bs-secondary-color); white-space: nowrap; }
.lg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 .3rem 0 .6rem; vertical-align: -1px; }

/* sales page */
.chan { display: flex; align-items: center; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--bs-border-color); }
.chan:last-child { border-bottom: 0; }
.chan b { font-size: var(--fs-lg); }
.chan .sub { font-size: var(--fs-xs); color: var(--bs-secondary-color); }

/* ---------- tables ---------- */
/* every table as wide as its text (บอส 10-17 "กระชับทุกคอลัมน์ให้พอดีกับความยาวข้อความ") — wider than the screen → scrolls in its box */
.table { width: auto; }
.table-sm td, .table-sm th { white-space: nowrap; padding: .3rem .5rem; font-size: var(--fs-sm); vertical-align: middle; }
.table thead th { font-weight: 500; color: var(--bs-secondary-color); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
/* column widths follow the text (บอส 10-16): no fixed widths — desktop keeps names on one line, phones wrap them in a narrow frozen column */
.report td:first-child { white-space: nowrap; }
/* name column stays put while the numbers scroll sideways (phones) */
.report th:first-child, .report td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bs-card-bg, var(--bs-body-bg)); }
.report tfoot tr.total td { font-weight: 600; color: var(--c-total); border-top: 2px solid var(--bs-border-color); border-bottom: 0; }   /* ROAS cells keep their own colour (.roas-* !important) */
/* รายบัญชี: first column is the row number (narrow), the name column (2nd) stays put when scrolling sideways */
.report.acct-tbl td:first-child, .report.acct-tbl th:first-child, .report.rank-tbl td:first-child, .report.rank-tbl th:first-child { min-width: 2.2rem; width: 2.2rem; position: static; border-right: 0; }
.report.acct-tbl td:nth-child(2), .report.acct-tbl th:nth-child(2), .report.rank-tbl td:nth-child(2), .report.rank-tbl th:nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--bs-card-bg, var(--bs-body-bg)); white-space: nowrap; }
/* wide report tables scroll inside a box no taller than the screen → the sideways scrollbar is always in view (บอส 10-16);
   header + "รวม" row stay pinned while scrolling down */
.table-responsive:has(> .report) { max-height: calc(100dvh - 12rem); overflow: auto; }
.report thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-card-bg, var(--bs-body-bg)); }
.report tfoot tr.total td { position: sticky; bottom: 0; z-index: 2; background: var(--bs-card-bg, var(--bs-body-bg)); }
.report thead th:first-child, .report tfoot tr.total td:first-child,
.report.acct-tbl thead th:nth-child(2), .report.rank-tbl thead th:nth-child(2), .report.acct-tbl tfoot td:nth-child(2), .report.rank-tbl tfoot td:nth-child(2) { z-index: 3; }   /* corners above both */
.report.acct-tbl thead th:first-child, .report.rank-tbl thead th:first-child, .report.acct-tbl tfoot td:first-child, .report.rank-tbl tfoot td:first-child { position: sticky; left: auto; }
tr.sub td { font-size: var(--fs-xs); color: var(--bs-secondary-color); }
tr.sub td:first-child { padding-left: 1.6rem; }
.roas-r, .roas-o, .roas-g, .roas-k, .roas-p { font-weight: 600; }
.roas-r { color: var(--c-bad) !important; }
.roas-o { color: var(--c-mid) !important; }
.roas-g { color: var(--c-good) !important; }
.roas-k { color: var(--c-great) !important; }
.roas-p { color: var(--c-top) !important; }   /* 3+ ม่วง: 6.9:1 on white · 7.4:1 on the dark card */
/* rows that need fixing (ยังไม่จับคู่เพจ): tinted row + ⚠ — text colour stays for ROAS meaning only */
.report tr.row-warn td { box-shadow: inset 0 0 0 9999px var(--c-warn-bg); }
.report tr.row-warn td:first-child { font-weight: 500; }
.report tr.row-warn .warn-emoji { margin-right: .3rem; font-size: 1.05em; }

/* รายเพจ: page name on one line (desktop; phones keep the narrow wrapping column) */
@media (max-width: 575.98px) { .report.rank-tbl td:nth-child(2), .report.acct-tbl td:nth-child(2) { white-space: normal; min-width: 8.5rem; max-width: 40vw; font-size: var(--fs-xs); border-right: 1px solid var(--bs-border-color); } }

/* ---------- admin ---------- */
/* admin forms: table as wide as its content, each field as wide as its text (field-sizing: Chrome/Edge; others fall back to auto) */
.admin-table { width: auto; max-width: 100%; }
.admin-table input:not([type=checkbox]) { field-sizing: content; width: auto; min-width: 6rem; max-width: 26rem; }
.admin-tabs { margin-bottom: 0 !important; scrollbar-width: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.admin-table td { vertical-align: middle; }
/* account → several pages: chips with × + a "+ เพจ" picker */
.pg-cell { white-space: normal; min-width: 12rem; }
.pg-chip { display: inline-flex; align-items: center; gap: .15rem; margin: 0 .25rem .25rem 0; padding: .05rem .15rem .05rem .5rem; border-radius: 1rem; background: var(--bs-secondary-bg); font-size: var(--fs-sm, .8125rem); white-space: nowrap; }
.pg-chip button { border: 0; background: none; color: var(--bs-secondary-color); line-height: 1; padding: 0 .3rem; }
.pg-chip button:hover { color: var(--bs-danger); }
.admin-table select.pg-add { display: inline-block; }
.acct-name { white-space: nowrap; font-weight: 500; }   /* from Meta, read-only */
/* admin accounts (10-16): long names wrap so the row fits · the table scrolls inside a screen-high box → sideways scrollbar always in view */
.admin-acct .acct-name { white-space: normal; min-width: 11rem; max-width: 20rem; }
.table-responsive:has(> .admin-acct) { max-height: calc(100dvh - 17rem); overflow: auto; }
.admin-acct thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-card-bg, var(--bs-body-bg)); }
/* คอม (บอส 10-17 "สมส่วน"): ตัวเลข 9 ช่องแคบลง · ชื่อบัญชีไม่กินที่เกิน → เพจ/ผู้ดูแลอยู่ในจอ 1440 ได้ */
@media (min-width: 576px) {
  .admin-acct > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding-left: .5rem; padding-right: .5rem; vertical-align: middle; }
  .report.acct-tbl.admin-acct td.acct-name { min-width: 9rem; max-width: 13rem; white-space: normal; }
  .admin-acct thead th.num { white-space: normal; line-height: 1.2; min-width: 3.2rem; }
  .admin-acct .pg-cell { min-width: 10rem; max-width: 16rem; }
  .admin-acct .c-own select { min-width: 6.5rem; }
}
/* phones: one account = one card (บอส 10-17 "สมส่วนทั้งมือถือและคอม") — ชื่อ · สถานะ / ตัวเลข 9 ช่องมีป้าย (3 คอลัมน์) / เพจ / ผู้ดูแล · ลบ */
@media (max-width: 575.98px) {
  .table-responsive:has(> .admin-acct) { max-height: none; overflow: visible; }
  .admin-acct thead { display: none; }
  .admin-acct, .admin-acct tbody, .admin-acct tfoot { display: block; width: 100%; }
  .admin-acct tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .75rem; align-items: start; padding: .9rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
  .report.acct-tbl.admin-acct td { display: block; border: 0; padding: 0; min-width: 0; max-width: none; position: static; background: none; box-shadow: none; white-space: normal; font-size: inherit; text-align: left; }
  .admin-acct .c-n { display: none !important; }
  .admin-acct .acct-name { grid-column: 1 / 3; font-size: var(--fs-sm, .875rem) !important; line-height: 1.3; }
  .admin-acct .c-st { grid-column: 3; justify-self: end; }
  .admin-acct td.m { font-variant-numeric: tabular-nums; }
  .admin-acct td.m::before { content: attr(data-l); display: block; font-size: var(--fs-xs, .75rem); font-weight: 400; color: var(--bs-secondary-color); }
  .admin-acct .pg-cell { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: .35rem; align-items: center; }
  .admin-acct .pg-cell .pg-chip { margin: 0; white-space: normal; padding: .2rem .2rem .2rem .6rem; }
  .admin-acct .pg-chip button { padding: .25rem .5rem; }   /* bigger × for fingers */
  .admin-acct .pg-cell select.pg-add { width: auto; flex: 0 0 auto; }
  .admin-acct .c-own { grid-column: 1 / 3; }
  .admin-acct .c-del { grid-column: 3; justify-self: end; }
  .admin-acct tfoot tr.total td { position: static; border-top: 0; }
  .admin-acct tfoot tr.total { border-top: 2px solid var(--bs-border-color); border-bottom: 0; }
  .admin-acct tfoot .c-st, .admin-acct tfoot .pg-cell, .admin-acct tfoot .c-own, .admin-acct tfoot .c-del { display: none !important; }
}
/* ad-account status (auto): ใช้งาน เขียว · ปิด / ไม่ได้ดึง เทา · ถูกจำกัด แดง */
.st-on { --st: var(--c-good); } .st-off, .st-none { --st: #8a94a0; } .st-limited { --st: var(--c-bad); }
.st-none { font-weight: 400 !important; }
.st-dot { color: var(--st); font-weight: 600; white-space: nowrap; }
.st-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--st); margin-right: .35rem; vertical-align: 1px; }
.sticky-save { position: sticky; bottom: 0; z-index: 5; background: var(--bs-body-bg); padding: .75rem 0; }

/* ---------- dark ---------- */
[data-bs-theme=dark] {
  --bs-body-bg: #12171d;
  --bs-body-color: #c4ccd6;
  --bs-border-color: #2a333d;
  --pc-heading-color: #e8edf2;
  --pc-sidebar-background: #1a2128;
  --pc-sidebar-color: #b6c0cb;
  --pc-sidebar-color-rgb: 182, 192, 203;
  --pc-sidebar-caption-color: #76838f;
  --pc-sidebar-border: #2a333d;
  --pc-header-background: linear-gradient(to right, #1f4f8a, #2b6cb0);
  --pc-card-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  --pc-card-box-hover-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
[data-bs-theme=dark] body, [data-bs-theme=dark] .pc-container { background: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme=dark] .card:not([class*=bg-grd]) { --bs-card-bg: #1a2128; --bs-card-cap-bg: #1a2128; --bs-card-border-color: #2a333d; background: #1a2128; color: var(--bs-body-color); }
[data-bs-theme=dark] .card .card-header { border-bottom-color: #2a333d; }
[data-bs-theme=dark] h1, [data-bs-theme=dark] h2, [data-bs-theme=dark] h3,
[data-bs-theme=dark] h4, [data-bs-theme=dark] h5, [data-bs-theme=dark] h6 { color: var(--pc-heading-color); }
[data-bs-theme=dark] .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: #2a333d; --bs-table-hover-bg: rgba(255,255,255,.04); --bs-table-hover-color: var(--bs-body-color); --bs-table-striped-bg: rgba(255,255,255,.03); }
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select { background-color: #12171d; border-color: #33404c; color: var(--bs-body-color); }
[data-bs-theme=dark] .text-muted { color: #8794a1 !important; }
[data-bs-theme=dark] .nav-tabs { --bs-nav-tabs-border-color: #2a333d; --bs-nav-tabs-link-active-bg: #1a2128; --bs-nav-tabs-link-active-border-color: #2a333d #2a333d #1a2128; --bs-nav-tabs-link-active-color: #e8edf2; }
[data-bs-theme=dark] .brand-text b { color: #e8edf2; }
[data-bs-theme=dark] .pc-sidebar { border-right-color: #2a333d; }
[data-bs-theme=dark] .pc-sidebar .pc-link { color: var(--pc-sidebar-color); }

/* ---------- date range dropdown (Meta style) ---------- */
.dp-wrap { position: relative; }
.dp-btn { display: flex; align-items: center; gap: .4rem; max-width: 100%; padding: .3rem .65rem; font-size: var(--fs-sm); text-align: left;
  border: 1px solid var(--bs-border-color); border-radius: 6px; background: var(--bs-body-bg); color: var(--bs-body-color); }
.dp-btn span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-btn:hover, .dp-btn[aria-expanded=true] { border-color: var(--c-brand); }
.dp-pop { position: absolute; z-index: 1030; top: calc(100% + 6px); right: 0; width: 760px; max-width: calc(100vw - 32px);
  background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 34, 58, .18); }
.dp-body { display: flex; }
.dp-presets { width: 190px; flex-shrink: 0; max-height: 380px; overflow-y: auto; padding: .5rem 0; border-right: 1px solid var(--bs-border-color); }
.dp-opt { display: flex; align-items: center; gap: .6rem; padding: .4rem 1rem; cursor: pointer; margin: 0; font-size: var(--fs-md); }
.dp-opt:hover { background: rgba(64, 153, 255, .08); }
.dp-opt input { width: 1.1rem; height: 1.1rem; accent-color: #1877f2; }
.dp-opt input:disabled + span { color: var(--bs-secondary-color); }
.dp-main { flex: 1; padding: .75rem 1rem; min-width: 0; }
.dp-cals { display: flex; gap: 1.5rem; }
.dp-cal { flex: 1; min-width: 0; }
.dp-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; }
.dp-nav { width: 30px; height: 30px; flex-shrink: 0; border: 0; background: none; color: var(--bs-body-color); border-radius: 50%; }
.dp-nav:hover { background: rgba(64, 153, 255, .12); }
.dp-sel { flex: 1; border: 0; background: none; color: var(--bs-body-color); font-weight: 500; text-align: center; padding: .2rem; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; text-align: center; font-size: var(--fs-sm); }
.dp-dow { color: var(--bs-secondary-color); padding: .25rem 0; }
.dp-d { border: 0; background: none; color: var(--bs-body-color); height: 32px; padding: 0; }
.dp-d.in { background: #cfe2fb; }
.dp-d.start { border-radius: 4px 0 0 4px; } .dp-d.end { border-radius: 0 4px 4px 0; } .dp-d.start.end { border-radius: 4px; }
.dp-d.start, .dp-d.end { background: #1877f2; color: #fff; font-weight: 600; }
.dp-d.today:not(.start):not(.end) { font-weight: 700; color: #1877f2; }
.dp-d:disabled { color: var(--bs-secondary-color); opacity: .45; }
.dp-d:not(:disabled):not(.start):not(.end):hover { background: rgba(24, 119, 242, .18); }
.dp-range { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.dp-box { flex: 1; border: 1px solid var(--bs-border-color); border-radius: 6px; padding: .35rem .6rem; font-size: var(--fs-sm); }
.dp-actions { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; padding: .6rem 1rem; border-top: 1px solid var(--bs-border-color); }
.dp-actions small { margin-right: auto; }
[data-bs-theme=dark] .dp-d.in { background: rgba(24, 119, 242, .28); }
[data-bs-theme=dark] .dp-pop { box-shadow: 0 12px 32px rgba(0, 0, 0, .6); }
[data-bs-theme=dark] .dp-sel option { background: #1a2128; }

/* ---------- bell ---------- */
.bell-wrap { position: relative; }
#bell { position: relative; }
.bell-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff5370; color: #fff; font-size: .6875rem; font-weight: 600; line-height: 18px; text-align: center; }
.bell-pop { position: absolute; z-index: 1040; top: calc(100% + 4px); right: 0; width: 380px; max-width: calc(100vw - 24px); max-height: 75vh; overflow-y: auto;
  background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 8px; box-shadow: 0 12px 32px rgba(15, 34, 58, .18); }
.bell-pop, .bell-pop * { white-space: normal; }
.bell-head { padding: .6rem 1rem; font-size: var(--fs-xs); color: var(--bs-secondary-color); border-bottom: 1px solid var(--bs-border-color); }
.bell-item { padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color); font-size: var(--fs-sm); }
.bell-item b { display: block; color: var(--c-warn); font-weight: 600; margin-bottom: .25rem; }
.bell-li { padding: .1rem 0 .1rem 1.2rem; font-size: var(--fs-xs); position: relative; }
.bell-li { display: flex; gap: .4rem; align-items: baseline; padding-left: .2rem; cursor: pointer; }
.bell-title { display: flex; gap: .3rem; align-items: baseline; color: var(--c-warn); font-weight: 600; margin-bottom: .25rem; cursor: pointer; }
.bell-li input, .bell-title input { flex: none; cursor: pointer; }
.bell-tabs { display: flex; border-bottom: 1px solid var(--bs-border-color); }
.bell-tabs button { flex: 1; border: 0; background: none; padding: .5rem; font-size: var(--fs-sm); color: var(--bs-secondary-color); border-bottom: 2px solid transparent; }
.bell-tabs button.on { color: var(--bs-primary); border-bottom-color: var(--bs-primary); font-weight: 600; }
.bell-tabs span { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 1em; background: var(--bs-secondary-bg); font-size: var(--fs-xs); }
.bell-item.is-done .bell-li { color: var(--bs-secondary-color); }
.bell-item.is-done .bell-title { color: var(--bs-secondary-color); }
.bell-foot { display: block; padding: .6rem 1rem; font-size: var(--fs-sm); text-align: center; }

/* ---------- phones ---------- */
@media (max-width: 767.98px) {   /* date picker: bottom sheet, presets become a chip row, one month */
  .dp-pop { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 88vh; overflow-y: auto;
    border-radius: 14px 14px 0 0; }
  .dp-body { flex-direction: column; }
  .dp-presets { width: auto; max-height: none; display: flex; overflow-x: auto; scrollbar-width: none; gap: .4rem; padding: .75rem 1rem; border-right: 0; border-bottom: 1px solid var(--bs-border-color); }
  .dp-opt { flex-shrink: 0; padding: .35rem .7rem; border: 1px solid var(--bs-border-color); border-radius: 999px; white-space: nowrap; }
  .dp-opt input { display: none; }
  .dp-opt:has(input:checked) { background: #1877f2; border-color: #1877f2; color: #fff; }
  .dp-opt:has(input:disabled) { display: none; }
  .dp-d { height: 40px; font-size: .95rem; }
}
@media (max-width: 575.98px) {
  .pc-container .pc-content { padding: 12px 16px; }
  .toolbar .dp-wrap { min-width: 0; }
  .dp-btn span { max-width: 52vw; }
  .card { margin-bottom: 14px; }
  .card .card-body { padding: 14px; }
  .card .card-header { padding: 12px 14px; }
  .lg { display: none; }
  .bell-pop { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; max-width: none; }
  /* boxes: 2 per row */
  .kpi .card-body { padding: 14px; }
  .kpi h2 { font-size: 1.1875rem; }
  .kpi2 .card-body { padding-right: 14px; gap: .25rem; }
  .kpi2-icon { display: none; }   /* no room beside two amounts */
  .kpi-row span { width: 2.6rem; font-size: var(--fs-md); }
  .kpi-row b { font-size: 1.0625rem; }
  .kpi-row small { flex-basis: 100%; padding-left: 3.1rem; font-size: var(--fs-xs); }
  /* tables: narrow frozen name column */
  .report td:first-child { white-space: normal; min-width: 8.5rem; max-width: 40vw; font-size: var(--fs-xs); }
  .acct-name { white-space: normal; }
  .report th:first-child, .report td:first-child { border-right: 1px solid var(--bs-border-color); }
}

/* rank badge S/A/B/C — top 4 sales (people + pages) */
.rank { display: inline-block; min-width: 1.35em; padding: 0 .3em; margin-left: .4rem; border-radius: .3rem; font-size: .75em; font-weight: 700; line-height: 1.5; text-align: center; color: #fff; vertical-align: .08em; }
.rank-S { background: linear-gradient(135deg, #f6c343, #e0952a); }
.rank-A { background: linear-gradient(135deg, #b38cf5, #7c4dff); }
.rank-B { background: linear-gradient(135deg, #4fc3f7, #1e88e5); }
.rank-C { background: linear-gradient(135deg, #66d4a6, #2e9e6f); }
/* admin TOP 1-2-3 (ยอดขาย admin): gold · silver · bronze */
.rank-t1 { background: linear-gradient(135deg, #f6c343, #e0952a); }
.rank-t2 { background: linear-gradient(135deg, #cfd8dc, #8a9aa5); }
.rank-t3 { background: linear-gradient(135deg, #e0a070, #a8612d); }
/* every dropdown is as wide as its text (บอส 10-16) · arrow tucked in closer */
.form-select { field-sizing: content; width: auto; min-width: 0; max-width: 100%; padding-right: 1.6rem; background-position: calc(100% - .45rem) 50%, 12px 50%; }
/* every scrollbar always drawn — page and tables (บอส 10-16 "ไม่ต้องซ่อนตัวเลื่อน · เชคทั้งเวป"): a styled webkit scrollbar is never the
   auto-hiding overlay kind (Windows 11 / Android Chrome) · menus that set scrollbar-width: none keep theirs hidden · iOS Safari still hides */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bs-tertiary-bg, rgba(127,127,127,.12)); }
::-webkit-scrollbar-thumb { background: rgba(127,127,127,.55); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(127,127,127,.8); }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Top 3 hero ads (ภาพรวม · บอส 10-17): 3 across on a computer · swipe row on a phone ---------- */
.hero-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }   /* each card its own height */
.hero-ad { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; background: var(--bs-body-bg); }
.hero-info { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .75rem; }
/* TOP 1/2/3 seal (บอส 10-17 "ป้ายแบบกลมขอบหยักฟันปลา · แพรวพราวทั้ง 3 ไม่ใช่เด่นแค่ top1"): round serrated medal in gold / silver / bronze,
   slowly turning edge, light sweep + 3 twinkling sparks on every card · each card glows in its own metal */
.hero-ad { --m-hi: #fff6c4; --m-mid: #f2c230; --m-lo: #b07d0c; --m-glow: 242, 194, 48; --m-ink: #4a3100; }
.hero-t2 { --m-hi: #ffffff; --m-mid: #c9d1db; --m-lo: #7f8a99; --m-glow: 190, 205, 225; --m-ink: #253041; }
.hero-t3 { --m-hi: #ffe2c6; --m-mid: #e2955a; --m-lo: #95501c; --m-glow: 226, 149, 90; --m-ink: #3d1f05; }
.hero-ad { border-top: 3px solid var(--m-mid); box-shadow: 0 0 0 1px rgba(var(--m-glow), .55), 0 8px 22px rgba(var(--m-glow), .28); }
.hero-head { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }   /* plate on top, name under it */
.hero-title { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.hero-seal { position: relative; flex: none; display: inline-flex; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
/* rectangle plate (บอส 10-17 "เปลี่ยนป้ายกลมเป็นแนวสี่เหลี่ยมผืนผ้า ไม่เอารอยหยัก"): HERO + number side by side on brushed metal */
.seal-face { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem .22rem .5rem; border-radius: .3rem;
  background: linear-gradient(135deg, var(--m-hi) 0%, var(--m-mid) 40%, var(--m-lo) 85%, var(--m-mid) 100%); color: var(--m-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(0, 0, 0, .2); overflow: hidden; line-height: 1; }
.seal-face small { font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.seal-face b { font-size: 1rem; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); padding-left: .3rem; border-left: 1px solid rgba(0, 0, 0, .2); }
.seal-face::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%);
  transform: translateX(-130%); animation: seal-shine 3.2s ease-in-out infinite; }
.spark { position: absolute; z-index: 3; width: .35rem; height: .35rem; background: #fff; pointer-events: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 3px rgba(var(--m-glow), 1)); opacity: 0; animation: spark 2.4s ease-in-out infinite; }
.sp1 { top: -.2rem; right: -.2rem; width: .45rem; height: .45rem; }
.sp2 { bottom: -.15rem; left: 35%; width: .3rem; height: .3rem; animation-delay: .8s; }
.sp3 { top: -.15rem; left: -.15rem; width: .3rem; height: .3rem; animation-delay: 1.6s; }
.hero-t2 .seal-face::after { animation-delay: .5s; } .hero-t3 .seal-face::after { animation-delay: 1s; }
.hero-t2 .spark { animation-duration: 2.7s; } .hero-t3 .spark { animation-duration: 2.1s; }
@keyframes seal-shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .seal-face::after, .spark { animation: none; } .seal-face::after { display: none; } .spark { opacity: .9; } }
.hero-name { margin: 0; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hero-who { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: var(--fs-xs); color: var(--bs-secondary-color); }
.hero-who span { display: inline-flex; gap: .3rem; align-items: center; min-width: 0; overflow-wrap: anywhere; }
/* numbers: one compact row of 4 */
.hero-ms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;   /* purchase / ROAS are short: fit them, money gets the rest */
  border: 1px solid var(--bs-border-color); border-radius: .4rem; }
.hero-m { display: flex; flex-direction: column; padding: .3rem .4rem; min-width: 0; }
.hero-m + .hero-m { border-left: 1px solid var(--bs-border-color); }
.hero-m span { font-size: .6875rem; line-height: 1.2; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-m b { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.hero-link { font-size: var(--fs-xs); text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
.hero-media { max-width: 100%; background: var(--bs-tertiary-bg); }
.hero-media img { width: 100%; height: auto; display: block; }
.hero-media.open { overflow: hidden; background: #fff; }
.hero-media iframe { display: block; border: 0; background: #fff; transform-origin: 0 0; }
.hero-noimg { padding: 2rem; text-align: center; font-size: var(--fs-sm); color: var(--bs-secondary-color); }
@media (max-width: 767.98px) {
  .hero-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .5rem; margin-inline: -.25rem; padding-inline: .25rem; }
  .hero-ad { scroll-snap-align: start; }
}
@media (max-width: 399.98px) { .hero-grid { grid-auto-columns: 90%; } .hero-m { padding: .3rem .3rem; } .hero-m b { font-size: .75rem; } }
/* Back End event log: the time column is as wide as its text on phones too (the report rule above reserves 8.5rem for page names) */
.report.ev-tbl td:first-child { min-width: 0; max-width: none; white-space: nowrap; }

.pc-micon .emoji-icon { font-size: 18px; line-height: 1; }   /* Mini Game menu (บอส 10-17 "ใส่ไอคอน") */
/* Mini Game (#/games) — cover cards, whole card is the link */
.game-card { display: block; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.game-card:hover, .game-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.15); color: inherit; }
.game-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pc-content .game-card .card-body h5 { margin: 0 0 4px; font-size: var(--fs-lg); font-weight: 600; }
/* ทำอะไร (last column): long details wrap instead of widening the column for every row (บอส 10-17 "พื้นที่ว่างเยอะเกินไป") */
.report.ev-tbl td:last-child { white-space: normal; min-width: 5rem; max-width: 10rem; }
.report.ev-tbl td:nth-child(3) { white-space: normal; min-width: 8rem; max-width: 12rem; }   /* อุปกรณ์: long model · OS · browser wraps */
.report.ev-tbl .ev-d { overflow-wrap: anywhere; }

/* ปุ่มบันทึกจับคู่ มุมขวาบน (บอส 10-18): แก้แล้ว = ฟ้าทึบ · ไม่มีอะไรเปลี่ยน = เทาทึบ กดไม่ได้ */
#save-btn.btn-primary { background: #1f6fd6; border-color: #1f6fd6; color: #fff; }
#save-btn.btn-primary:hover { background: #185bb0; border-color: #185bb0; }
#save-btn.btn-secondary, #save-btn.btn-secondary:disabled, #reset-btn.btn-secondary, #reset-btn.btn-secondary:disabled { background: #dfe3e8; border-color: #dfe3e8; color: #6b7480; opacity: 1; }
[data-bs-theme=dark] #save-btn.btn-secondary, [data-bs-theme=dark] #save-btn.btn-secondary:disabled, [data-bs-theme=dark] #reset-btn.btn-secondary, [data-bs-theme=dark] #reset-btn.btn-secondary:disabled { background: #3a4250; border-color: #3a4250; color: #a3acb9; }
#reset-btn.btn-warning { background: #f5a524; border-color: #f5a524; color: #1f2329; }   /* ยกเลิกที่แก้ เหลืองส้ม · ตัวหนังสือเข้ม 8:1 */
#reset-btn.btn-warning:hover { background: #e09110; border-color: #e09110; }