/* KhoViet 1.7.24 • unified retail workspace design.
   Original styling informed by user-supplied retail POS layout references.
   Visual-only progressive enhancement: does not alter order logic or data. */
:root {
  --primary:#087bea;
  --ink:#263548;
  --muted:#728296;
  --line:#e1e7ef;
  --soft:#f3f5f8;
  --shadow:0 1px 3px rgba(35,56,80,.055);
  --kv24-blue:#087af0;
  --kv24-hover:#eaf4ff;
  --kv24-focus:0 0 0 3px rgba(8,122,240,.14);
}
body {font-family:Arial,"Segoe UI",sans-serif;color:#24364b;background:#f3f5f8;font-size:14px;}
button, input, select, textarea {font-family:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline:2px solid #0879e9;outline-offset:2px;}
.app-header {height:64px;padding:0 23px;border-bottom:1px solid #e6ebf1;}
.app-header .brand-mark {height:40px;width:40px;border-radius:50%;background:linear-gradient(155deg,#26a5df,#0876d9);font-size:23px;}
.brand-copy b {font-size:23px;line-height:1;letter-spacing:-.55px;}
.brand-copy small {font-size:12px;margin-top:5px;}
.main-nav {height:56px;padding:0 15px;gap:4px;background:#0879e9;box-shadow:0 2px 6px #123c661c;}
.nav-item,.nav-dropdown>summary {height:56px;padding:0 17px;font-size:15px;font-weight:600;border-radius:4px;}
.nav-item.is-current,.nav-dropdown.is-current>summary {background:#076acb;box-shadow:inset 0 -2px rgba(255,255,255,.22);}
.nav-menu {border-color:#d7e1ed;border-radius:5px;padding:5px;box-shadow:0 12px 24px #1b3b5b26;}
.nav-menu a {font-size:14px;padding:11px 14px;}
.nav-sales-cta {min-width:155px;height:39px;font-size:14px;border-radius:7px;}
.app-main {background:#f3f5f8;min-height:calc(100vh - 120px);}
.app-main .page {padding:22px 23px 30px;}
.app-main footer {font-size:11px;}
.page-heading {margin-bottom:22px;}
.page-heading h1 {font-size:25px;letter-spacing:-.5px;}
.page-heading p {font-size:13px;color:#758599;}
.eyebrow {color:#788b9f;font-size:11px;letter-spacing:1px;}
.panel,.metric,.quick-card {border-radius:8px;box-shadow:var(--shadow);border-color:#e1e6ec;}
.panel-heading {padding:16px 19px;}
.panel-heading h2 {font-size:17px;}
.panel-heading p {font-size:12px;}
.btn {min-height:39px;border-radius:6px;font-size:13px;font-weight:600;padding:10px 14px;}
.btn.primary {background:#087aec;box-shadow:none;}
.btn.primary:hover {background:#0069d4;transform:none;}
.btn.secondary {border-color:#d3dfeb;color:#31445a;}
.form-grid label,.stack-form label,.inline-form label,.summary-left label {font-size:13px;color:#354c62;}
.form-grid input,.form-grid select,.stack-form input,.stack-form select,.search-form input,.inline-form select,.summary-left input {font-size:14px;min-height:39px;border-color:#d3dde8;border-radius:6px;}
.form-grid input:focus,.form-grid select:focus,.stack-form input:focus,.stack-form select:focus,.search-form input:focus,.inline-form select:focus,.summary-left input:focus {box-shadow:var(--kv24-focus);border-color:#0782f1;}
.table-wrap thead th {background:#eaf3fd;color:#304861;font-size:12px;border-color:#d7e6f4;padding:12px 14px;}
.table-wrap tbody td {font-size:13px;color:#34485e;padding:13px 14px;border-color:#e7edf3;}
.table-wrap tbody tr:hover {background:#f5faff;}
.metric-top,.metric small {font-size:12px;}
.metric strong {font-size:22px;}
.quick-card b {font-size:13px;}
.quick-card small {font-size:12px;}
.pill {font-size:11px;}
.count-badge {font-size:11px;}
.strong-link,.text-link {color:#0876df;}
/* POS: use the reference's dense blue work bar, clear 70:30 split and white cashier pane. */
body.pos-fullscreen {background:#edf0f3;}
body.pos-fullscreen .app-main {background:#edf0f3;}
body.pos-fullscreen .pos-workspace {border:0;border-radius:0;min-height:100dvh;background:#edf0f3;}
body.pos-fullscreen .pos-v173 .pos-toolbar {height:61px;min-height:61px;border-radius:0;background:#0879e8;padding:5px 12px;gap:9px;z-index:40;}
.pos-v173 .pos-search-wrap {width:min(33%,515px);}
.pos-v173 .pos-search-wrap input {height:43px;border-radius:6px;font-size:15px;padding-left:14px;}
.pos-search-shortcut {font-size:12px;color:#647b94;top:14px;}
.pos-invoice-tabs {max-width:35%;gap:5px;}
.pos-v173-tab {border-radius:6px 6px 0 0;min-height:47px;}
.pos-v173-tab.selected {background:#eef0f3;color:#253951;}
.pos-v173-tab button {font-size:14px;padding:11px 9px;}
.pos-v173 .pos-list-link {font-size:13px;font-weight:600;padding:7px 3px;}
.pos-add-invoice,.pos-top-icon {font-size:22px;border-radius:6px;min-height:39px;min-width:35px;}
.kv22-menu-toggle {height:40px;min-width:38px;line-height:1;}
.kv22-pos-menu {border-radius:6px;box-shadow:0 12px 32px #10294742;}
.pos-search-popover {border-radius:6px;border-color:#cddbe9;box-shadow:0 14px 30px #223b5c3d;}
.pos-v173-result {padding:12px 14px;}
.pos-v173-result:hover {background:#eaf5ff;}
body.pos-fullscreen .pos-sales-grid {grid-template-columns:minmax(0,1fr) minmax(360px,30.5%);gap:14px;padding:13px 14px;min-height:calc(100dvh - 61px);}
body.pos-fullscreen .pos-sales-center {min-height:calc(100dvh - 88px);}
.pos-v173-lines {gap:7px;}
.pos-v173-line {border-radius:7px;box-shadow:0 1px 2px #122b4310;padding:12px 10px;gap:8px;}
.pos-v173-line-name strong {font-size:14px;font-weight:650;}
.pos-v173-line-name small {font-size:12px;}
.pos-v173-line input {font-size:14px;padding:8px 5px;}
.pos-v173-line .pos-line-total {font-size:14px;font-weight:700;}
.pos-v173-history {color:#096ac9;border-color:#cee2f5;background:#f4faff;font-size:11px;}
.pos-v173-note {min-height:57px;border-radius:8px;box-shadow:var(--shadow);padding:15px 18px;}
.pos-v173-note input {font-size:14px;}
.pos-v173-checkout {border:1px solid #e5e9ef;border-radius:10px;padding:19px 17px 15px;box-shadow:0 1px 5px #1637580e;gap:13px;}
.pos-v173-checkout .pos-operator {font-size:14px;min-height:30px;}
.pos-v173-checkout .pos-operator span {font-size:12px;}
.kv24-client-price-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(154px,37%);gap:9px;align-items:center;}
.kv24-client-price-row .pos-customer-line {min-width:0;margin:0;}
.kv24-client-price-row .pos-customer-search>input {height:42px;background:#f2f4f7;border-radius:6px;font-size:13px;}
.kv24-client-price-row .pos-customer-line>button {height:42px;min-width:36px;font-size:22px;}
.kv24-client-price-row .pos-v173-list {margin:0;text-align:right;min-width:0;}
.kv24-client-price-row .pos-v173-list select {width:100%;max-width:100%;height:42px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#f2f4f7;padding:0 9px;font-size:13px;}
.pos-v173-checkout .pos-money-row {font-size:14px;min-height:34px;padding:4px 0;}
.pos-v173-checkout .pos-money-row b {white-space:nowrap;font-variant-numeric:tabular-nums;}
.pos-v173-checkout .pos-money-row input {font-size:14px;}
.pos-v173-checkout .pos-money-row.grand {border-top:1px solid #e1e7ef;border-bottom:1px solid #e1e7ef;margin-top:3px;padding:13px 0;font-size:16px;}
.pos-v173-checkout .pos-money-row.grand strong:last-child {font-size:18px;color:#087aed;}
.pos-v173-checkout .pos-v173-methods {gap:9px 12px;font-size:12px;}
.pos-v173-checkout .pos-v173-methods label {gap:4px;}
.pos-v173-checkout .pos-v173-cash {background:#f3f4f7;padding:9px 8px;gap:7px;}
.pos-v173-checkout .pos-v173-cash button {border-radius:999px;}
.pos-v173-checkout .pos-checkout-actions {padding-top:12px;gap:7px;}
.pos-v173-checkout .pos-checkout-actions button {font-size:15px;min-height:56px;border-radius:7px;}
.pos-v173-checkout .pos-print-btn {background:#637588;min-width:80px;}
.pos-v173-checkout .pos-checkout-btn {background:#0677ea;font-size:16px!important;}
/* No destructive changes to the print layout or to data-driven widgets. */
@media (max-width:1250px) {
  body.pos-fullscreen .pos-sales-grid {grid-template-columns:minmax(0,1fr) minmax(350px,35%);gap:10px;padding:10px;}
  .pos-v173 .pos-search-wrap {width:30%;}
  .kv24-client-price-row {grid-template-columns:1fr;gap:8px;}
}
@media (max-width:790px) {
  .app-header {height:56px;padding:0 12px;}
  .main-nav {height:47px;padding:0 5px;}
  .nav-item,.nav-dropdown>summary {height:47px;font-size:13px;padding:0 11px;}
  .app-main .page {padding:13px 10px 22px;}
  .page-heading h1 {font-size:22px;}
  body.pos-fullscreen .pos-sales-grid {grid-template-columns:1fr;}
  body.pos-fullscreen .pos-sales-center {min-height:310px;}
  .pos-v173-checkout {min-height:470px;}
  .kv24-client-price-row {grid-template-columns:minmax(0,1fr) 35%;}
  .pos-v173 .pos-search-wrap {width:47%;}
}
@media (max-width:520px) {
  .kv24-client-price-row {grid-template-columns:1fr;}
  .pos-v173 .pos-search-wrap {width:58%;min-width:110px;}
  .pos-v173-tab button {font-size:12px;padding:9px 5px;}
  .pos-invoice-tabs {max-width:26%;}
  .pos-v173-checkout {padding:13px;}
}