@import url("./fonts/font.css");

:root {
  color-scheme: light;
  --paper: #f5f4ed;
  --surface: #fffefa;
  --ink: #182c26;
  --muted: #55675e;
  --edge: #dce2d9;
  --rail: #142d27;
  --rail-fg: #d3e4d9;
  --accent: #266249;
  --accent-hover: #194c36;
  --mint: #e5f1e5;
  --amber: #794b16;
  --amber-bg: #fff0d7;
  --error: #913826;
  font: 15px/1.55 "Noto Sans Thai", Tahoma, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  accent-color: var(--accent);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button { border: 0; background: none; }
button:disabled { cursor: default; opacity: .46; }
a { color: inherit; }
svg { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
::selection { color: #0d301f; background: #cbe7ce; }
:focus-visible { outline: 2px solid #4b936d; outline-offset: 3px; }
.skip { position: fixed; z-index: 5; left: 12px; top: 12px; clip-path: inset(50%); background: var(--surface); padding: 10px; }
.skip:focus { clip-path: none; }
h1,h2,p { margin: 0; }
small { font-size: .83rem; }
.muted { color: var(--muted); font-size: .88rem; }
.layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100dvh; padding: 24px 14px 16px; background: var(--rail); color: var(--rail-fg); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; }
.brand strong { display: block; font-size: 1.25rem; font-weight: 740; letter-spacing: -.025em; line-height: 1.35; }
.brand small, .location small { display: block; }
.mark { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 10px; background: #d9e9c8; color: #1d4934; }
.mark svg { width: 25px; height: 25px; }
.sidebar .brand strong { color: #f7fcf2; }
.location { display: flex; align-items: center; gap: 10px; padding: 10px 11px; margin: 30px 2px 24px; border: 1px solid #426056; border-radius: 8px; }
.location strong { display: block; color: #f7fcf2; font-size: .92rem; }
.location small, .brand small { color: #b6cec0; }
.nav-title { color: #b6cec0; font-size: .78rem; margin: 0 11px 8px; }
.sidebar nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; color: inherit; border-radius: 7px; padding: 10px 11px; margin-bottom: 3px; white-space: nowrap; }
.sidebar nav button svg { width: 18px; height: 18px; }
.sidebar nav button:hover { background: #234439; }
.sidebar nav button[aria-current] { background: #dcebd0; color: #173a29; font-weight: 700; }
.workspace { min-width: 0; }
.top { background: var(--surface); border-bottom: 1px solid var(--edge); min-height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; gap: 14px; font-size: .9rem; }
.breadcrumb { color: var(--muted); }
.breadcrumb strong { color: var(--ink); font-weight: 650; }
.breadcrumb span { padding: 0 8px; }
.top-right { display: flex; align-items: center; gap: 14px; }
.today { display: flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.today svg { width: 17px; height: 17px; }
.avatar,.icon-button { border: 1px solid var(--edge); width: 36px; height: 36px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--muted); }
.avatar:hover,.icon-button:hover { background: var(--mint); color: var(--accent-hover); }
.main { max-width: 1660px; margin: 0 auto; padding: 25px 28px 35px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
h1 { font-size: 2.12rem; line-height: 1.26; font-weight: 740; letter-spacing: -.031em; }
.page-heading p { color: var(--muted); margin-top: 6px; }
.page-heading > .button { margin-top: 4px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; text-decoration: none; white-space: nowrap; font-weight: 650; font-size: .9rem; }
.button svg { width: 17px; height: 17px; }
.outline { border-color: var(--edge); background: var(--surface); }
.outline:hover:not(:disabled), .text:hover:not(:disabled) { background: var(--mint); }
.primary { background: var(--accent); color: #fffefa; }
.primary:hover:not(:disabled) { background: var(--accent-hover); }
.tabs { display: flex; gap: 18px; margin-bottom: 16px; border-bottom: 1px solid #cbd5c8; }
.tab { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 4px; color: var(--muted); border-bottom: 2px solid transparent; }
.tab svg { width: 17px; height: 17px; }
.tab[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-hover); font-weight: 730; }
.tab:hover { color: var(--accent-hover); }
.work-grid { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(295px, 1fr); gap: 17px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; min-height: 55px; border-bottom: 1px solid var(--edge); }
.products .panel-head { border-bottom: 0; padding-bottom: 7px; }
.panel-title { display: flex; align-items: center; gap: 8px; }
.panel-title svg { color: var(--accent); }
h2 { font-size: 1.18rem; line-height: 1.35; font-weight: 730; }
.catalog-tools { padding: 5px 15px 12px; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #cbd7ca; border-radius: 7px; min-height: 42px; color: var(--muted); background: var(--surface); min-width: 0; }
.search:focus-within { border-color: var(--accent); outline: 1px solid var(--accent); }
.search svg { width: 18px; height: 18px; }
.search input { border: 0; outline: none; min-width: 0; flex: 1; height: 39px; background: transparent; color: var(--ink); }
input::placeholder { color: var(--muted); }
kbd { border: 1px solid var(--edge); border-radius: 4px; padding: 1px 5px; font: 650 .76rem/1.35 "Noto Sans Thai", sans-serif; background: #f4f7ee; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip,.count,.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: .81rem; white-space: nowrap; font-weight: 650; }
.chip { border: 1px solid var(--edge); background: var(--surface); color: var(--muted); min-height: 29px; }
.chip[aria-pressed="true"],.chip:hover,.count { background: var(--mint); color: var(--accent-hover); border-color: #c5d9c4; }
.count { border: 1px solid #d0e0cb; }
.catalog-scroll { overflow: auto; scrollbar-color: #a9b9ad transparent; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
thead { background: #eff2ea; color: var(--muted); }
th, td { padding: 8px 14px; border-bottom: 1px solid #e6eae2; }
th { font-size: .83rem; font-weight: 700; white-space: nowrap; }
tbody tr:hover { background: #fafbf6; }
.catalog-table th:nth-child(2), .catalog-table td:nth-child(2) { text-align: right; white-space: nowrap; }
.catalog-table th:last-child { width: 183px; }
.catalog-table td { height: 59px; }
.product-name { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.product-name strong { font-weight: 680; line-height: 1.35; display: block; }
.product-name small { display: block; color: var(--muted); margin-top: 3px; font-size: .78rem; }
.product-name small span { padding: 0 3px; }
.product-glyph { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #34674d; background: #ebf2e5; }
.product-glyph.food { background: #f6eddb; color: #835a29; }
.product-glyph.box { background: #e9eeed; color: #466660; }
.product-glyph svg { width: 18px; height: 18px; }
.stock-num { font-weight: 700; }
.stock-unit { color: var(--muted); margin-left: 4px; }
.stock-num.low { color: var(--amber); }
.unit-prices { display: flex; gap: 5px; }
.unit-price { display: flex; align-items: center; justify-content: space-between; gap: 3px; min-width: 69px; padding: 5px 5px 5px 7px; border: 1px solid #cfdbce; border-radius: 6px; color: var(--accent-hover); white-space: nowrap; min-height: 34px; }
.unit-price small { font-size: .72rem; }
.unit-price svg { width: 13px; height: 13px; }
.unit-price:hover:not(:disabled) { background: var(--mint); border-color: #81ad91; }
.catalog-foot { padding: 10px 14px; color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.catalog-foot svg { width: 15px; height: 15px; }
.ticket { position: sticky; top: 13px; }
.ticket-body { padding: 13px 15px; }
.field { display: grid; gap: 5px; margin-bottom: 11px; }
.field > span { font-size: .85rem; font-weight: 700; }
.field input,.field select,.login input,.terms input { border: 1px solid #cbd7ca; border-radius: 7px; min-height: 40px; padding: 6px 9px; background: var(--surface); width: 100%; }
.field input[type=file] { max-width: 100%; }
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border: 1px solid var(--edge); background: #f1f3eb; padding: 3px; border-radius: 8px; }
.segment button { min-height: 34px; display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--muted); border: 1px solid transparent; border-radius: 5px; }
.segment button:hover { background: #edf3e8; }
.segment button[aria-pressed="true"] { background: var(--surface); border-color: #cddaca; color: var(--accent-hover); font-weight: 700; }
.segment svg { width: 16px; height: 16px; }
.terms { display: flex; align-items: center; gap: 7px; font-size: .87rem; }
.terms input { width: 75px; min-height: 32px; }
.ticket-lines { border-block: 1px solid var(--edge); margin-top: 12px; max-height: min(310px, 42dvh); overflow: auto; }
.empty-ticket { display: grid; justify-items: center; align-content: center; min-height: 120px; text-align: center; color: var(--muted); font-size: .84rem; padding: 12px; }
.empty-ticket svg { width: 25px; height: 25px; margin-bottom: 7px; color: var(--accent); }
.empty-ticket strong { color: var(--ink); }
.ticket-line { padding: 9px 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; }
.ticket-line + .ticket-line { border-top: 1px solid var(--edge); }
.ticket-line strong { font-size: .9rem; }
.ticket-line small { display: block; color: var(--muted); }
.ticket-line > strong:last-child { text-align: right; }
.ticket-line .icon-button { width: 29px; height: 29px; }
.ticket-line .icon-button svg { width: 16px; height: 16px; }
.stepper { display: flex; align-items: stretch; }
.stepper button,.stepper input { border: 1px solid var(--edge); background: var(--surface); width: 31px; height: 31px; text-align: center; padding: 0; }
.stepper button:hover { background: var(--mint); }
.stepper button:first-child { border-radius: 5px 0 0 5px; }
.stepper button:last-child { border-radius: 0 5px 5px 0; }
.stepper button svg { width: 14px; height: 14px; }
.stepper input { width: 50px; border-inline: 0; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { appearance: none; }
.checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; }
.checkbox input { margin: 0; height: 15px; width: 15px; }
.ticket-body > .checkbox { margin-top: 10px; }
.ticket-total { padding: 12px 15px 13px; border-top: 1px solid var(--edge); background: #f0f4e9; border-radius: 0 0 12px 12px; }
.ticket-total > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .89rem; }
.ticket-total > div + div { margin-top: 4px; }
.ticket-total .grand { border-top: 1px solid #cddbc9; margin-top: 8px; padding-top: 7px; font-weight: 700; }
.grand strong { font-size: 1.76rem; line-height: 1.3; color: var(--accent-hover); letter-spacing: -.025em; }
.grand small { font-size: .63em; padding-right: 3px; }
.ticket-total .commit { display: grid; grid-template-columns: auto minmax(0,1fr); margin-top: 10px; }
.ticket-hint { display: block; text-align: center; color: var(--muted); margin-top: 6px; font-size: .74rem; }
.pilot { margin-bottom: 12px; color: var(--amber); padding: 8px 12px; border: 1px solid #ead4ac; border-radius: 7px; background: var(--amber-bg); }
.listing .panel-head { flex-wrap: wrap; }
.listing .search { width: min(100%, 320px); }
.data-table th,.data-table td { padding: 9px 12px; }
.data-table td { white-space: nowrap; }
.row-actions { display: flex; gap: 5px; }
.row-actions .button { min-height: 33px; padding: 4px 8px; }
.badge.green { background: var(--mint); color: var(--accent-hover); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.neutral { background: #edf0eb; color: var(--muted); }
.empty { text-align: center; padding: 24px; color: var(--muted); }
.dialog { width: min(600px,calc(100% - 26px)); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 62px #102c2728; }
.dialog::backdrop { background: #132b2770; }
.dialog-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--edge); padding: 11px 15px; }
.dialog-body { padding: 15px; }
.dialog-body p { margin-bottom: 11px; }
.doc-id { font-size: .8rem; color: var(--muted); }
.doc-total { text-align: right; margin-top: 12px; }
.doc-total strong { font-size: 1.22rem; }
.form-error,#login-error { color: #913826; }
.form-error:empty,#login-error:empty { display: none; }
#notice { position: fixed; bottom: 19px; right: 19px; max-width: min(480px,calc(100% - 38px)); padding: 12px 15px; border-radius: 8px; background: #1c4936; color: #fffefa; z-index: 3; box-shadow: 0 8px 22px #132b2733; }
#notice:not([hidden]) { display: flex; gap: 8px; align-items: center; }
#notice.failure { background: #8b3826; }
.splash,.login-wrap { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 20px; }
.login { width: min(100%,410px); padding: 26px; background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; }
.login .brand { padding: 0; margin-bottom: 25px; }
.login .brand small { color: var(--muted); }
.login p { color: var(--muted); margin: 5px 0 15px; }
.login form { display: grid; gap: 7px; }
.login input { margin-bottom: 6px; }
.login label { font-weight: 680; font-size: .9rem; }
.login button { margin-top: 4px; }
@media (max-width: 1130px) {
  .layout { grid-template-columns: 186px minmax(0,1fr); }
  .main { padding-inline: 17px; }
  .top { padding-inline: 17px; }
  .product-glyph { display: none; }
  .catalog-table th,.catalog-table td { padding-inline: 9px; }
}
@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 10px 14px 5px; gap: 8px; }
  .brand { padding: 0; }
  .brand strong { font-size: 1rem; }
  .brand small { font-size: .74rem; }
  .mark { width: 34px; height: 34px; }
  .mark svg { width: 20px; height: 20px; }
  .location,.nav-title { display: none; }
  .sidebar nav { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: thin; }
  .sidebar nav button { width: auto; padding: 6px 8px; min-height: 37px; font-size: .87rem; }
  .top { min-height: 46px; }
}
@media (max-width: 680px) {
  .main { padding: 14px 10px 24px; }
  .top { padding-inline: 11px; font-size: .81rem; }
  .today { gap: 4px; }
  .today svg { display: none; }
  .page-heading { flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
  .page-heading h1 { font-size: 1.6rem; }
  .page-heading p { font-size: .88rem; }
  .page-heading .button { min-height: 34px; }
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ticket { position: static; }
  .catalog-table td { height: 50px; }
  .catalog-table th:last-child { width: auto; }
  .catalog-table th:first-child,.catalog-table td:first-child { padding-left: 9px; }
  .product-name { min-width: 80px; }
  .catalog-table td:nth-child(2) { white-space: normal; }
  .stock-unit { display: block; margin-left: 0; }
  .unit-price { min-width: 56px; padding-inline: 4px; gap: 1px; }
  .unit-price svg { width: 11px; height: 11px; }
}
@media print {
  body { background: white; }
  #app,#notice,.skip,.dialog-head,.dialog-body > .button { display: none !important; }
  .dialog[open] { position: static; inset: auto; margin: 0; box-shadow: none; width: 100%; max-height: none; border: 0; }
  .dialog::backdrop { display: none; }
}
.sidebar { min-width: 0; }
.mobile-demo { display: none; }
@media (max-width: 920px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .mobile-demo { display: block; position: absolute; right: 14px; top: 16px; color: #d3e4d9; font-size: .78rem; }
  .sidebar { position: relative; }
}
@media (max-width: 760px) {
  .sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .sidebar nav button { margin: 0; gap: 5px; min-width: 0; white-space: normal; line-height: 1.28; }
  .sidebar nav button svg { width: 16px; height: 16px; }
}
@media (max-width: 680px) {
  .products .catalog-scroll { max-height: 300px; }
  .mobile-ticket-link { display: inline-flex; }
  .mobile-ticket-link > span { white-space: normal; }
  .products .panel-head { flex-wrap: wrap; }
  .products #result-count { margin-left: auto; }
  .products:has(#ticket-compact:not(:empty)) #result-count { display: none; }
  #ticket-compact { color: var(--accent-hover); font-weight: 650; }
  .search kbd { display: none; }
  #ticket { scroll-margin-top: 10px; }
}
@media (min-width: 681px) {
  .mobile-ticket-link { display: none; }
}

[hidden] { display: none !important; }
.role-label { color: var(--accent-hover); font-weight: 650; }
.login select,.warehouse-picker select { border: 1px solid var(--edge); border-radius: 7px; background: var(--surface); color: var(--ink); padding: 5px 9px; min-height: 34px; }
.button-group,.warehouse-picker { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.free-items { margin: 7px 0 0; color: var(--accent-hover); font-size: .83rem; font-weight: 650; }
.trip-list { display: grid; gap: 7px; max-height: 210px; overflow: auto; padding: 4px 2px; margin-bottom: 12px; }
.ticket-total #discount { width: 68px; }
@media (max-width: 550px) {
  .top-right .today { display: none; }
  .catalog-foot { flex-wrap: wrap; }
  .tabs { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
}

/* Master maintenance keeps the same counter-workspace controls. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.unit-editor-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; }
.field textarea { width: 100%; font: inherit; color: inherit; background: var(--paper, #fffdf7); border: 1px solid var(--line, #c9cec8); border-radius: 6px; padding: 10px 12px; resize: vertical; }
.dialog:has(.form-grid) { width: min(720px, calc(100vw - 32px)); }
.dialog p { overflow-wrap: anywhere; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.date-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #526459); }
.date-filter input { min-height: 36px; padding: 5px 8px; border: 1px solid var(--line, #c9cec8); border-radius: 6px; background: #fffdf7; font: inherit; color: #203b2d; }
.listing .panel-head { flex-wrap: wrap; }
.unit-prices-editor { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* In-page pickers share the workspace's Thai typography and keyboard focus. */
.choice-control { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.field > .choice-control,.login .choice-control { width: 100%; }
.choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #cbd7ca; border-radius: 7px; background: var(--surface); text-align: left; font-weight: 400; }
.choice-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-trigger svg { width: 16px; height: 16px; }
.choice-trigger:hover:not(:disabled),.choice-trigger[aria-expanded=true] { border-color: var(--accent); }
.choice-popup { position: fixed; inset: auto; margin: 0; padding: 8px; border: 1px solid #aebfae; border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 30px #142d2724; overflow: auto; }
.choice-popup input { width: 100%; min-height: 40px; border: 1px solid var(--edge); border-radius: 6px; background: var(--paper); padding: 7px 10px; }
.choice-options { overflow: auto; max-height: 270px; padding-top: 6px; }
.choice-options button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 5px; min-height: 40px; }
.choice-options button[aria-selected=true] { font-weight: 700; color: var(--accent-hover); }
.choice-options button.highlight,.choice-options button:hover { background: var(--mint); }
.choice-empty { padding: 16px 10px; color: var(--muted); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.calendar-head button { width: 38px; height: 38px; border-radius: 5px; }
.calendar-head button:first-child svg { transform: rotate(90deg); }
.calendar-head button:last-child svg { transform: rotate(-90deg); }
.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; text-align: center; }
.calendar-grid button { height: 34px; padding: 0; border-radius: 5px; }
.calendar-weekday { font-size: .78rem; color: var(--muted); padding: 4px 0; }
.calendar-grid .other-month { color: var(--muted); }
.calendar-grid .is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.calendar-grid button[aria-pressed=true] { background: var(--accent); color: white; font-weight: 700; }
.calendar-head button:hover,.calendar-grid button:hover:not(:disabled) { background: var(--mint); color: var(--ink); }
.calendar-actions { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--edge); margin-top: 8px; padding-top: 8px; }
.calendar-actions button { min-height: 30px; color: var(--accent-hover); font-weight: 650; }
.upload-dialog { width: min(760px,calc(100% - 32px)); }
.attachment-context { color: var(--muted); overflow-wrap: anywhere; }
.proof-drop { border: 1px dashed var(--muted); border-radius: 8px; text-align: center; background: var(--paper); overflow: hidden; }
.proof-drop.dragging { background: var(--mint); outline: 2px solid var(--accent); outline-offset: 2px; }
.proof-drop[aria-busy=true] { opacity: .65; }
.upload-empty { min-height: 235px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 8px; }
.upload-empty > svg { width: 36px; height: 36px; color: var(--accent); margin-bottom: 8px; }
.upload-empty strong { font-size: 1.18rem; }
.upload-empty p,.upload-empty small { color: var(--muted); margin: 0; }
.upload-preview { display: block; width: 100%; padding: 12px; color: var(--accent-hover); }
.upload-preview img { display: block; width: 100%; height: min(36dvh,300px); object-fit: contain; }
.upload-preview > span { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 10px; font-weight: 650; }
.upload-preview:hover { background: var(--mint); }
.attachment-meta { display: flex; gap: 12px; align-items: center; padding-top: 12px; }
.attachment-name,.attachment-size { display: block; overflow-wrap: anywhere; }
.attachment-size { margin-top: 3px; }
.attachment-error:empty { display: none; }
.upload-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.upload-actions .text { color: var(--error); }
.upload-note { font-size: .85rem; margin-top: 12px; }
.upload-dialog form > .button[type=submit] { margin-top: 16px; min-width: 150px; }
.media-dialog { width: min(1100px,calc(100% - 32px)); max-height: calc(100dvh - 32px); }
.media-dialog .dialog-head > div { min-width: 0; }
.media-subtitle { margin: 3px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.media-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 15px; }
.media-scale { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.media-stage { position: relative; height: min(62dvh,620px); min-height: 180px; overflow: auto; background: var(--paper); border-block: 1px solid var(--edge); overscroll-behavior: contain; }
.media-stage.is-zoomed { cursor: grab; touch-action: none; }
.media-stage.is-zoomed:active { cursor: grabbing; }
.media-canvas { display: grid; place-items: center; width: max-content; min-width: 100%; min-height: 100%; padding: 20px; }
.media-canvas img { display: block; max-width: none; flex-shrink: 0; user-select: none; -webkit-user-drag: none; }
.media-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; text-align: center; gap: 12px; }
.media-state p { max-width: 48ch; margin: 0; }
.media-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 15px; }
.media-info { font-size: .85rem; }
.media-footer .button { margin-left: auto; }
@media (max-width: 600px) {
  .media-dialog,.upload-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .media-dialog .dialog-head { align-items: flex-start; }
  .media-dialog .dialog-head .button { flex-shrink: 0; }
  .media-toolbar { gap: 5px; padding: 10px; }
  .media-toolbar .button { padding-inline: 8px; }
  .media-stage { height: 52dvh; }
  .upload-empty { padding: 20px 12px; min-height: 210px; }
  .upload-preview img { height: 28dvh; }
}
/* Primary actions consistently finish the row on the right. */
.dialog-body > form > .button[type=submit],.dialog-body > .button { display: flex; width: fit-content; margin-left: auto; }
.button-group > .primary { order: 1; }
.listing .panel-head > .button-group,.page-heading > .button,.page-heading > .button-group { margin-left: auto; }
.row-actions { justify-content: flex-end; }
/* Operational overview; existing counter layout stays unchanged. */
.dashboard-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 22px 0 16px; }
.periods { display: flex; flex-wrap: wrap; gap: 5px; align-self: center; }
.dashboard-refresh { margin-left: auto; }
.overview-context { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .83rem; color: var(--muted); padding-bottom: 12px; }
.overview-context > span:first-child { color: var(--ink); font-weight: 650; }
.overview-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(195px,1fr)); border-block: 1px solid #cbd7ca; padding: 20px 0; gap: 22px; }
.overview-metric { min-width: 0; }
.overview-metric > span { display: flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--muted); }
.overview-metric svg { width: 17px; height: 17px; }
.overview-metric > strong { display: block; font-size: clamp(1.5rem,2.25vw,2.4rem); line-height: 1.5; letter-spacing: -.04em; font-weight: 730; }
.overview-metric > small { display: block; color: var(--muted); font-size: .76rem; }
.cash-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin: 17px 0 22px; }
.cash-strip > span { margin-right: auto; font-weight: 650; font-size: .9rem; }
.cash-strip small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.cash-strip > div { text-align: right; }
.cash-strip strong { font-size: 1.1rem; }
.overview-columns { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,1fr); gap: 18px; margin-top: 20px; align-items: start; }
.overview-columns:has(> :only-child) { grid-template-columns: 1fr; }
.overview-main,.overview-side { display: grid; gap: 18px; min-width: 0; }
.overview-panel .panel-head { padding: 12px 16px; }
.overview-panel h2 { font-size: 1.04rem; }
.overview-panel .panel-head .button { font-size: .8rem; padding: 4px 0 4px 8px; min-height: 32px; }
.overview-chart { padding: 16px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .8rem; margin-bottom: 15px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 2px; }
.chart-legend small { color: var(--muted); margin-left: auto; }
.sales-chart { display: block; width: 100%; height: auto; overflow: visible; }
.sales-chart text { font: 12px "Noto Sans Thai",Tahoma,sans-serif; fill: var(--muted); }
.chart-empty { text-align: center; color: var(--muted); font-size: .9rem; }
.chart-details { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.chart-details summary { cursor: pointer; min-height: 30px; padding: 5px 0; }
.chart-details .catalog-scroll { max-height: 280px; }
.chart-details td:not(:first-child),.chart-details th:not(:first-child) { text-align: right; }
.rank-list { margin: 0; padding: 6px 16px 16px; list-style: none; }
.rank-list li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; padding-top: 15px; }
.rank-no { font-size: .8rem; color: var(--muted); padding-top: 2px; }
.rank-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .85rem; }
.rank-label span { overflow-wrap: anywhere; }
.rank-label strong { flex-shrink: 0; font-weight: 650; }
.rank-track { height: 5px; background: #edf0e8; border-radius: 3px; margin-top: 7px; overflow: hidden; }
.rank-track > span { display: block; height: 100%; background: #6c9674; border-radius: inherit; }
.overview-pad { padding: 14px 16px; }
.aging-block { padding-block: 16px; border-bottom: 1px solid var(--edge); }
.aging-block > .rank-label { margin-bottom: 13px; font-size: .82rem; flex-wrap: wrap; gap: 4px; }
.aging-row { display: grid; grid-template-columns: 90px minmax(20px,1fr) 85px; gap: 8px; align-items: center; font-size: .76rem; margin-top: 8px; }
.aging-row .rank-track { margin: 0; }
.aging-row strong { text-align: right; font-weight: 600; }
.rank-track .overdue { background: #b78744; }
.overview-pad h3 { font-size: .9rem; margin: 15px 0 5px; }
.attention-list { list-style: none; padding: 0; margin: 6px 0 12px; }
.attention-list li + li { border-top: 1px solid var(--edge); }
.attention-list button { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 11px 0; width: 100%; font-size: .83rem; }
.attention-list button:hover { color: var(--accent-hover); }
.attention-list small { display: block; color: var(--muted); margin-top: 3px; }
.attention-list strong { white-space: nowrap; font-weight: 650; }
.attention-list svg { width: 14px; height: 14px; margin-left: 5px; }
.warning { color: var(--amber); }
.stock-filter { display: grid; grid-template-columns: minmax(0,1fr) 125px; gap: 10px; }
.stock-filter .field > span { font-size: .75rem; }
.delivery-stages { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 18px 10px; gap: 4px; }
.delivery-stages button { border-right: 1px solid var(--edge); min-width: 0; }
.delivery-stages button:last-child { border: 0; }
.delivery-stages button:hover { color: var(--accent); }
.delivery-stages strong { display: block; font-size: 1.65rem; font-weight: 650; }
.delivery-stages span { display: block; font-size: .75rem; }
.overview-note { padding: 12px 16px; font-size: .76rem; color: var(--muted); }
#overview-content[aria-busy=true] { opacity: .55; pointer-events: none; }
@media (max-width: 1150px) { .overview-columns { grid-template-columns: minmax(0,1fr); } .overview-side { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; } }
@media (max-width: 680px) { .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .overview-metric > strong { font-size: 1.6rem; } .overview-side { grid-template-columns: minmax(0,1fr); } .dashboard-toolbar { gap: 8px; } .dashboard-toolbar .periods { width: 100%; } .dashboard-refresh { width: 100%; } .chart-legend small { margin-left: 0; } .rank-label { flex-wrap: wrap; gap: 2px 8px; } .delivery-stages span { font-size: .7rem; } .overview-panel .panel-head { gap: 5px; } }

.scan-search-row { display: flex; gap: 8px; align-items: stretch; }
.scan-search-row .search { flex: 1; }
.scanner-hint { margin: 7px 0 10px; }
.barcode-editor-row { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; margin-bottom: 16px; }
.barcode-code { display: grid; gap: 6px; }
.barcode-code .button { justify-self: start; }
.camera-stage { position: relative; background: var(--rail); border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; }
.camera-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.camera-guide { position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%; border: 2px solid var(--rail-fg); border-radius: 6px; pointer-events: none; }
.camera-status { margin-top: 12px; min-height: 3em; }
.camera-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.camera-actions [hidden] { display: none; }
@media(max-width:600px) {
  .scan-search-row { flex-wrap: wrap; }
  .scan-search-row .search { flex-basis: 100%; }
  .scan-search-row > .button { margin-left: auto; }
  .barcode-editor-row { grid-template-columns: minmax(0,1fr) auto; }
  .barcode-code { grid-column: 1/-1; }
}

#product-media-editor { border-block: 1px solid var(--edge); padding: 18px 0; margin: 18px 0; }
#product-media-editor h3 { margin: 0 0 12px; font-size: 1rem; }
.product-current { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.product-photo-preview { padding: 0; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.product-photo-preview img { width: 100px; height: 100px; object-fit: contain; display: block; background: var(--surface); }
.product-media-symbol { display: grid; place-items: center; width: 64px; height: 64px; background: var(--mint); border-radius: 8px; color: var(--accent); }
.product-media-symbol svg { width: 34px; height: 34px; }
.product-icon-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(88px,1fr)); gap: 8px; margin-bottom: 12px; }
.product-icon-choice { border: 1px solid var(--edge); border-radius: 8px; padding: 10px 6px; display: grid; justify-items: center; gap: 5px; font-size: .85rem; }
.product-icon-choice:hover { background: var(--paper); }
.product-icon-choice[aria-pressed=true] { background: var(--mint); border-color: var(--accent); color: var(--accent-hover); }
.product-photo { padding: 0; overflow: hidden; cursor: zoom-in; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.product-current [hidden] { display: none; }
.product-editor .proof-drop { min-height: 120px; }
.product-editor .upload-preview img { max-height: 160px; }
#product-media-editor summary { cursor: pointer; font-weight: 650; padding: 4px 0; }
#product-media-editor details[open] summary { margin-bottom: 14px; }
.product-editor .upload-empty { min-height: 140px; padding: 12px; gap: 4px; }
.product-editor .upload-empty > svg { width: 24px; height: 24px; margin-bottom: 0; }
.product-editor .upload-empty strong { font-size: 1rem; }
.product-editor .upload-note:empty { display: none; }

.list-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--edge); }
.list-pagination > span { color: var(--muted); font-size: .85rem; }
.list-pagination .button-group { margin-left: auto; }
.list-page-previous svg { transform: rotate(180deg); }