/* Sales entry page — styles.css owns the shell (sidebar, topbar, panels, KPI cards);
   everything here is prefixed sx- and only ever adds to it. */

/* The rules below set display on elements the page also toggles with `hidden`, and an
   author rule beats the browser's own `[hidden]` — so restate it once, here. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----- control bar ------------------------------------------------------------------- */

.sx-modes {
  display: flex;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f5f7fb;
  padding: 2px;
}

.sx-mode {
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 0 12px;
  font-weight: 500;
  white-space: nowrap;
  color: #5b6578;
  cursor: pointer;
}

/* The control bar is a flex row that can get tight; these two must never wrap mid-word. */
#sxDbPill { margin-left: 0; white-space: nowrap; }

.sx-mode.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(18, 34, 66, .12); }

.sx-nav { display: flex; align-items: center; gap: 4px; }
.sx-nav strong { min-width: 108px; text-align: center; font-size: 12px; white-space: nowrap; }
.sx-nav .icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ----- banners ----------------------------------------------------------------------- */

.sx-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  border: 1px solid #f5d3a6;
  border-radius: var(--radius);
  background: #fff8ee;
  color: #92551a;
  padding: 11px 14px;
}

.sx-banner svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* A grant without can_edit_sales. Said once, quietly, at the top — not a failure, just what
   this account is open for. The editors are gone from the page rather than dimmed. */
.sx-readonly {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  padding: 11px 14px;
  font-size: 14px;
}

.sx-readonly svg { width: 16px; height: 16px; flex: 0 0 16px; }

.sx-conflict {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 13px;
  border: 1px solid #cfe0ff;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: #1c4bb0;
  padding: 10px 14px;
}

.sx-conflict svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.sx-conflict div { display: flex; flex-direction: column; gap: 2px; }
.sx-conflict span { color: #34528f; }

/* This page's captions say a sentence — *รวม VAT 7% แล้ว · Meta แจ้ง 548.41* — where the
   overview's say two words, so they are allowed to wrap. What was missing is the other half of
   that: ``.kpi-card`` is 106px tall and clips nothing, so the third line simply hung out of the
   bottom of the card (seen on the owner's screen, 2026-09-06). The cards size to their content
   now and the grid stretches them all to the tallest, which is what keeps the row level. */
.sx-kpis { margin-bottom: 13px; }

/* Five equal cards, not four squeezed beside one that is half as wide again. The 1.55fr last
   column belongs to the overview, where the fifth card holds three figures; here it holds
   "5 / 30 วัน" and was simply the widest thing on the row for no reason.

   Written as breakpoints rather than auto-fit: auto-fit drops to four-and-one the moment five
   stop fitting, and a lone card on its own row looks like something went wrong. Three-and-two
   and two-and-two-and-one are shapes; four-and-one is an accident. */
.sx-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1320px) { .sx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .sx-kpis { grid-template-columns: 1fr; } }

/* Top-aligned, so the five labels sit on one line across the row and the five figures on the
   next. Centring each card's content vertically meant every caption of a different length
   pushed its own title to a different height, and the row read as five unrelated boxes. */
.sx-kpis .kpi-card { height: auto; min-height: 112px; align-items: flex-start; }
.sx-kpis .metric-icon { margin-top: 1px; }
.sx-kpis .kpi-content > small { display: block; margin-top: 4px; font-size: 12.5px;
  line-height: 1.45; white-space: normal; }
.sx-kpis .kpi-label { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; }

/* The ROAS card carries a verdict beside its number — *เกินจุดคุ้มทุน* — and pushing it to the
   far end of the row with space-between left it hard against the card's edge, half a word
   short of fitting. It sits next to the figure it is about instead, and wraps under it when
   the column is narrow rather than being cut off. */
.sx-kpis .kpi-value-row { flex-wrap: wrap; justify-content: flex-start; gap: 2px 8px; }
.sx-kpis .kpi-value-row .trend { font-size: 12.5px; white-space: normal; }

/* ----- the profit line ---------------------------------------------------------------- */
/* ยอดขาย − ต้นทุน = กำไรขั้นต้น − ค่าโฆษณา = เหลือจริง, in the order the owner's own
   spreadsheet already reads. Terms with nothing entered show a dash and never a zero. */

.sx-pnl {
  display: flex;
  /* Top-aligned, not centred. The terms are different heights — some carry a working underneath,
     some do not — so centring each one put the five labels on three different lines and the
     five figures on three more. Aligned from the top they read as one equation. */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 13px 17px;
  box-shadow: var(--shadow);
}

/* 10px and 9px were small enough that the working underneath each figure read as texture
   rather than as words. Every part of this row is something the owner typed or is owed an
   explanation of, so it is set at a size meant to be read. */
.sx-pnl-term { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.sx-pnl-term small { color: #5b6578; font-size: 11.5px; white-space: nowrap; }
.sx-pnl-term strong { font-size: 18px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.sx-pnl-term em { color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }
/* On the figures' line, which is where an operator belongs — the label above it names the
   term, not the sum. */
.sx-pnl-op { color: #9aa3b4; font-size: 15px; align-self: flex-start; padding-top: 18px; }

/* The net used to be pushed to the far right with margin-left:auto, which on a wide card left
   313px of nothing between "รวม VAT 7%" and the "=" that follows it — an equation with a hole
   in the middle. It reads in order now; the rule and the green figure are what set it apart. */
.sx-pnl-net { border-left: 1px solid var(--line-soft); margin-left: 6px; padding-left: 16px; }
.sx-pnl-net small { color: var(--ink); font-weight: 600; }
.sx-pnl-net strong { font-size: 22px; }
.sx-pnl-net.sx-good strong { color: var(--green); }
.sx-pnl-net.sx-bad strong { color: var(--red); }

/* ----- the period table -------------------------------------------------------------- */

/* `.panel` gives a border, a radius and a shadow — every page adds its own padding, and this
   one never did. Its headings and hints were sitting against the border. */
.sx-panel, .sx-pnl { padding: 14px 16px; }
.sx-panel { margin-bottom: 13px; }
.sx-sub { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sx-inline-btn { width: auto; padding: 0 12px; }

.sx-table-wrap { overflow-x: auto; }

.sx-table { min-width: 660px; margin-top: 12px; font-size: 12px; }
.sx-table th { color: var(--muted); font-weight: 500; text-align: left; }
.sx-table th, .sx-table td { border-bottom: 1px solid var(--line-soft); padding: 8px; vertical-align: middle; }
.sx-table thead th { border-bottom: 1px solid var(--line); }
.sx-table .sx-num { font-variant-numeric: tabular-nums; }

/* The period reads from the left, like a list of dates. Everything after it is a short value
   in a narrow column, so heading and figure are centred together — a heading hard against one
   edge of a column with its number against the other reads as two different columns. */
.sx-table th:not(:first-child), .sx-table td:not(:first-child) { text-align: center; }
.sx-table .sx-col-act { text-align: right; }
.sx-table .sx-col-period { min-width: 132px; }
.sx-table .sx-col-act { width: 84px; text-align: right; }

.sx-row { cursor: pointer; }
.sx-row:hover { background: var(--surface-soft); }
.sx-row.sx-open { background: var(--blue-soft); }
.sx-row.sx-today .sx-period-name::after {
  content: "วันนี้";
  margin-left: 6px;
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 1px 6px;
  font-size: 9px;
}

.sx-period-name { font-weight: 500; }
.sx-dow { margin-left: 5px; color: var(--muted); font-weight: 400; }
.sx-blank { color: #a7aebc; }
.sx-empty-row td { color: var(--muted); padding: 18px 8px; text-align: center; }

.sx-shape {
  display: inline-block;
  border-radius: 6px;
  background: #f0f2f6;
  color: #5b6578;
  padding: 2px 8px;
  font-size: 9px;
}

.sx-shape.sx-shape-split { background: #f2e6ff; color: #6d2fb1; }
.sx-shape.sx-shape-none { background: transparent; color: #a7aebc; padding-left: 0; }

.sx-edit-btn {
  border: 1px solid #dee4ed;
  border-radius: 6px;
  background: #fff;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.sx-edit-btn:hover { border-color: #aab7c9; background: #f8faff; }

/* ----- the editor that opens inside a row -------------------------------------------- */

.sx-editor-row > td { background: var(--surface-soft); padding: 0; }
.sx-editor { border-left: 3px solid var(--blue); padding: 13px 15px 15px; }

.sx-editor-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 11px; }
.sx-editor-head h3 { margin: 0; font-size: 12px; }

.sx-shape-choice { display: flex; align-items: center; gap: 12px; }
.sx-shape-choice label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.sx-shape-choice input { margin: 0; accent-color: var(--blue); }
.sx-shape-choice label.sx-disabled { color: #a7aebc; cursor: not-allowed; }

.sx-fields { display: grid; gap: 9px; }

.sx-field-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.sx-field-row + .sx-field-row { border-top: 1px solid var(--line-soft); padding-top: 9px; }
.sx-field { display: flex; min-width: 0; flex: 1 1 104px; flex-direction: column; gap: 3px; }
.sx-field-row .sx-field:first-child:has(.sx-field-name) { flex: 1 1 128px; }
.sx-cost-field label { color: #8a6a2f; }
.sx-field label { color: #505a6d; font-size: 10px; }
.sx-field-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; padding-bottom: 6px; }

.sx-editor input[type="number"], .sx-editor input[type="text"] {
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 0 9px;
  font-variant-numeric: tabular-nums;
}

.sx-editor input:focus { outline: 2px solid #bed2ff; outline-offset: -1px; border-color: var(--blue); }
.sx-editor input.sx-invalid { border-color: var(--red); background: #fff6f6; }
.sx-editor input[type="number"] { text-align: right; }

.sx-note-row { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.sx-note-row input { text-align: left !important; }

.sx-editor-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.sx-editor-foot .sx-hint { margin-left: auto; text-align: right; }

.sx-primary-btn {
  height: 29px;
  border: 0;
  border-radius: 7px;
  background: #101725;
  color: #fff;
  padding: 0 16px;
  font-weight: 500;
  cursor: pointer;
}

.sx-primary-btn:hover { background: #1c2638; }
.sx-primary-btn:disabled { opacity: .55; cursor: progress; }

.sx-ghost-btn {
  height: 29px;
  border: 1px solid #dee4ed;
  border-radius: 7px;
  background: #fff;
  padding: 0 12px;
  cursor: pointer;
}

.sx-ghost-btn:hover { border-color: #aab7c9; background: #f8faff; }
.sx-ghost-btn.sx-danger { color: #a51922; }
.sx-ghost-btn.sx-danger:hover { border-color: #f0b6ba; background: #fff6f6; }

.sx-hint { color: var(--muted); font-size: 10px; }
.sx-error { color: var(--red); font-size: 10px; font-weight: 500; }

@media (max-width: 900px) {
  .sx-nav strong { min-width: 86px; }
  .sx-pnl-op:last-of-type { margin-left: 0; }
  .sx-pnl-net { border-left: 0; padding-left: 0; }
  .sx-field-name { padding-bottom: 0; }
}