:root {
  color-scheme: light;
  --canvas: #e6eeeb;
  --bg: #f3f6f5;
  --surface: #ffffff;
  /* Shared split-field labels take 35% of each form row. */
  --form-label-width: 35%;
  --form-row-height: 34px;
  --form-label-size: 11.5px;
  --form-label-weight: 750;
  --form-value-size: 14px;
  --section-gap: 22px;
  --section-content-gap: 8px;
  --surface-soft: #eaf4f2;
  --ink: #17211f;
  --muted: #687572;
  --line: #c5d3cf;
  --brand: #0f766e;
  --brand-dark: #0a5b55;
  --brand-light: #d8f1ed;
  --button-brand: #34827b;
  --button-brand-hover: #286f69;
  --amber: #d97706;
  --amber-light: #fff2d8;
  --danger: #b42318;
  --danger-light: #ffebe8;
  --history-loss-bg: #fff3f3;
  --history-loss-hover-bg: #ffe8e8;
  --stock-ink: #315d69;
  --stock-light: #e9f3f6;
  --cost-ink: #4b4f8f;
  --cost-light: #eeefff;
  --profit-ink: #8a5a08;
  --customer-panel-bg: linear-gradient(135deg, #f1faf8 0%, #d3ede8 100%);
  --customer-panel-bg-hover: linear-gradient(135deg, #e6f5f2 0%, #bfe3dc 100%);
  --customer-panel-border: #72b8ae;
  --customer-panel-shadow: 0 2px 7px rgba(15, 118, 110, .08);
  --shadow: 0 18px 44px rgba(29, 54, 49, .14);
  /* Shared page geometry; the home workspace and sheets use the same frame. */
  --page-max-width: 680px;
  --page-gutter: 14px;
  --page-gap: 12px;
  --page-heading-size: 18px;
  --control-radius: 10px;
  --focus-color: var(--brand);
  --focus-width: 1.5px;
  --focus-inset: calc(var(--focus-width) - 1px);
  --selection-bg: var(--brand-light);
  --header-action-radius: 11px;
  --header-action-size: 36px;
  --card-radius: 12px;
  /* Semantic surfaces and states used by the home workspace. */
  --control-border: #a6bdb6;
  --control-border-active: #8abdb6;
  --card-border: #afc4be;
  --card-border-hover: #3f8f86;
  --card-border-active: #69aaa1;
  --card-shadow: 0 1px 4px rgba(34, 72, 64, .05);
  --card-shadow-hover: 0 3px 9px rgba(34, 72, 64, .11);
  --card-shadow-active: 0 3px 10px rgba(15, 118, 110, .1);
  --popover-shadow: 0 14px 34px rgba(29, 54, 49, .2);
  --surface-selected: #eff8f6;
  --surface-add: rgba(240, 248, 246, .48);
  --surface-disabled: #e2e8e5;
  --text-disabled: #596963;
  --border-disabled: #b7c5bf;
  --switch-disabled-on: #64998f;
  --border-add: #82afa8;
  --border-empty: #b8ccc7;
  --surface-empty: rgba(255, 255, 255, .42);
  --danger-border: #efaaa3;
  --danger-border-soft: #efc9c4;
  --danger-shadow: 0 1px 3px rgba(180, 35, 24, .08);
  --action-border: #83bdb6;
  --action-shadow: 0 1px 3px rgba(7, 94, 87, .08);
  --on-brand: #fff;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: pan-x pan-y; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, textarea { font: inherit; }
input, textarea {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
  caret-color: #063f3a;
  opacity: 1;
}
[contenteditable]:not([contenteditable="false"]) {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}
input::placeholder, textarea::placeholder {
  color: #a8b1af;
  -webkit-text-fill-color: #a8b1af;
  font-weight: 400;
  opacity: 1;
}
button {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, opacity .08s ease;
}
button:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
button:not(:disabled):active { opacity: .86; }
button:disabled { cursor: not-allowed; opacity: .68; }
.hidden { display: none !important; }

.splash, .fatal {
  min-height: 100vh; display: grid; place-content: center; justify-items: center;
  gap: 12px; padding: 30px; text-align: center;
}
.splash span, .fatal p { color: var(--muted); }
.brand-mark {
  width: 68px; height: 68px; display: grid; place-items: center; border-radius: 22px;
  background: var(--brand); color: #fff; font-size: 34px; font-weight: 800;
  box-shadow: 0 12px 25px rgba(15, 118, 110, .25); margin-bottom: 10px;
}
.brand-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.error-mark { background: var(--danger); }

.app {
  width: 100%; height: 100vh; height: 100dvh; height: var(--tg-viewport-height, 100dvh);
  max-width: var(--page-max-width); display: flex; flex-direction: column; overflow: hidden;
  margin: 0 auto; padding: calc(12px + var(--safe-top)) var(--page-gutter) calc(12px + var(--safe-bottom));
  background: var(--canvas); box-shadow: var(--shadow);
}
.topbar {
  position: sticky; z-index: 40; top: 0; flex: 0 0 auto;
  min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 2px 2px 6px;
  border-bottom: 1px solid var(--line); background: var(--canvas);
}
.eyebrow { margin: 0 0 3px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 27px; letter-spacing: -.04em; margin-bottom: 0; }
h2 { margin: 0; font-size: var(--page-heading-size); letter-spacing: -.02em; }
.identity { min-width: var(--header-action-size); flex: 0 0 var(--header-action-size); width: var(--header-action-size); height: var(--header-action-size); display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--header-action-radius); background: var(--surface); color: var(--brand-dark); cursor: pointer; }
.identity svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.identity:hover, .identity:active { background: var(--surface-selected); color: var(--brand-dark); }
.topbar .identity:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; box-shadow: none; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin-left: auto; }
.header-action { position: relative; min-height: var(--header-action-size); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--header-action-radius); background: var(--surface); color: var(--brand-dark); font-size: 11px; font-weight: 750; white-space: nowrap; }
.header-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.header-more { position: relative; display: none; }
.header-more-button svg { transition: transform .16s ease; }
.header-more-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.header-more-menu { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; width: 154px; padding: 5px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--surface); box-shadow: var(--popover-shadow); }
.header-more-item { width: 100%; min-height: 39px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 750; text-align: left; }
.header-more-item:hover, .header-more-item:focus-visible { background: var(--brand-light); color: var(--brand-dark); outline: 0; }
.header-more-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.main-page { min-width: 0; }
.order-home { min-height: 0; flex: 1; display: flex; padding-top: var(--page-gap); }
.order-home-content { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: var(--page-gap); }
.order-home-toolbar { flex: 0 0 auto; display: grid; gap: 8px; }
.order-home-orders { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.order-home-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; box-shadow: 0 4px 14px rgba(38, 66, 60, .05); }
.current-order-dock { position: sticky; z-index: 30; top: 0; margin: 0 -8px; padding: 6px 8px 7px; border-bottom: 1px solid rgba(181, 204, 199, .72); background: var(--canvas); box-shadow: 0 6px 16px rgba(29, 54, 49, .09); }
.current-order-panel { width: 100%; display: block; padding: 0; overflow: hidden; border: 1.5px solid var(--customer-panel-border); border-radius: 15px; background: var(--customer-panel-bg); box-shadow: var(--customer-panel-shadow); text-align: left; }
.current-order-panel:not(:disabled):active { opacity: .92; }
.current-order-summary { min-height: 60px; display: flex; align-items: center; gap: 11px; padding: 9px 11px; color: var(--ink); }
.current-order-cart { position: relative; flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--button-brand); color: #fff; box-shadow: 0 4px 10px rgba(52, 130, 123, .2); }
.current-order-cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.current-order-copy { min-width: 0; display: grid; gap: 3px; }
.current-order-copy strong, .current-order-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-order-copy strong { color: #075e57; font-size: 15px; font-weight: 750; }
.current-order-copy span { color: #365f59; font-size: 10px; font-weight: 500; }
.current-order-chevron { flex: 0 0 auto; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--brand-dark); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.search-wrap { position: relative; }
.search-wrap input, .text-input {
  width: 100%; min-height: 43px; border: 1px solid var(--line); border-radius: 12px;
  background: #fbfcfc; color: var(--ink); padding: 9px 38px; outline: none;
}
.text-input { padding: 9px 12px; }
input:focus, textarea:focus, select:focus { border-color: var(--focus-color) !important; outline: none; box-shadow: inset 0 0 0 var(--focus-inset) var(--focus-color); }
.search-icon { position: absolute; left: 12px; top: 12px; width: 19px; height: 19px; color: var(--muted); z-index: 1; pointer-events: none; }
.search-icon svg, .lock-icon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: var(--bg); color: var(--muted); }
.x-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.suggestions { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; left: 0; max-height: min(320px, 45vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: var(--shadow); }
.suggestions button { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: left; color: var(--ink); }
.suggestions button:last-child { border-bottom: 0; }
.selected-customer { min-height: 43px; padding: 5px 6px 5px 11px; border: 1px solid #b8d8d2; border-radius: 12px; color: var(--brand-dark); background: var(--brand-light); font-weight: 750; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.selected-customer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-customer .icon-button,
.selected-taxpayer .icon-button { flex: 0 0 auto; }
.tax-lookup-wrap { position: relative; display: block; margin-top: 8px; }
.tax-lookup-wrap .text-input { min-width: 0; width: 100%; padding-right: 43px; }
.tax-lookup-button { position: absolute; z-index: 2; top: 3px; right: 3px; width: 37px; height: 37px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: var(--button-brand); color: #fff; }
.tax-lookup-button .tax-lookup-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tax-lookup-spinner { display: none; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid rgba(15,118,110,.25); border-top-color: var(--brand); border-radius: 50%; animation: spin .65s linear infinite; }
.tax-lookup-button[aria-busy="true"], .tax-lookup-button.is-loading { opacity: 1; }
.tax-lookup-button[aria-busy="true"] .tax-lookup-icon,
.tax-lookup-button.is-loading .tax-lookup-icon { display: none; }
.tax-lookup-button[aria-busy="true"] .tax-lookup-spinner,
.tax-lookup-button.is-loading .tax-lookup-spinner { display: block; }
.tax-lookup-button[data-cooldown] .tax-lookup-icon,
.tax-lookup-button[data-cooldown] .tax-lookup-spinner { display: none; }
.tax-lookup-button[data-cooldown]::after { content: attr(data-cooldown); font-size: 11px; font-weight: 800; letter-spacing: -.2px; }
.taxpayer-suggestions button { display: grid; gap: 3px; }
.taxpayer-suggestions strong, .taxpayer-suggestions span, .taxpayer-suggestions small { display: block; }
.taxpayer-suggestions strong { font-size: 13px; line-height: 1.35; }
.taxpayer-suggestions span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.taxpayer-suggestions .recent-tax-code-option strong { color: var(--brand-dark); letter-spacing: .2px; }
.taxpayer-suggestions small { margin-top: 2px; color: var(--danger); font-size: 10px; font-weight: 750; }
.taxpayer-suggestions small.active { color: var(--brand); }
.selected-taxpayer { min-height: 58px; margin-top: 8px; padding: 8px 6px 8px 11px; border: 1px solid #b8d8d2; border-radius: 12px; background: var(--brand-light); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.selected-taxpayer > div { min-width: 0; display: grid; gap: 2px; }
.selected-taxpayer strong { color: var(--brand-dark); font-size: 13px; line-height: 1.3; }
.selected-taxpayer span { color: var(--ink); font-size: 11px; line-height: 1.35; }
.selected-taxpayer small { color: var(--danger); font-size: 10px; font-weight: 750; }
.selected-taxpayer small.active { color: var(--brand); }
.manual-taxpayer-button { width: 100%; min-height: 34px; margin-top: 7px; padding: 7px 10px; border: 1px dashed #5aa69b; border-radius: 9px; background: #f7fbfa; color: var(--brand-dark); font-size: 11px; font-weight: 750; }
.manual-taxpayer-form { margin-top: 6px; padding: 7px; border: 1px solid #8ab8b1; border-radius: 10px; background: #f7fbfa; display: grid; gap: 6px; }
.manual-taxpayer-form textarea.text-input { min-height: 52px; resize: vertical; line-height: 1.3; }

.catalog-section { padding-top: 13px; }
.current-order-dock + .catalog-section { padding-top: 8px; }
.product-search { margin-bottom: 8px; }
.product-search input { background: var(--surface); }
.filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 10px; }
.filter { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; color: var(--muted); background: var(--surface); white-space: nowrap; font-size: 12px; font-weight: 700; }
.filter.active { border-color: var(--button-brand); color: #fff; background: var(--button-brand); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.vat { background: #14b8a6; }
.dot.hand { background: #f59e0b; }
.dot.not-for-sale { background: #9ca3af; }
.dot.below-cost { background: var(--danger); }
.product-list { display: grid; gap: 0; }
.product-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 11px 12px; border: 0; border-right: 1px solid #d3dfdc; border-bottom: 1px solid #d3dfdc; border-left: 1px solid #d3dfdc; border-radius: 0; background: var(--surface); box-shadow: none; }
.product-card.has-history { -webkit-tap-highlight-color: transparent; cursor: pointer; touch-action: manipulation; }
.product-card.without-action { grid-template-columns: minmax(0, 1fr); }
.product-card:first-child { border-top: 1px solid #d3dfdc; border-radius: 14px 14px 0 0; }
.product-card:last-child { border-radius: 0 0 14px 14px; }
.product-card:only-child { border-radius: 14px; }
.product-card.has-history:focus-visible { z-index: 1; outline: var(--focus-width) solid var(--brand); outline-offset: -1px; }
.product-info { min-width: 0; }
.product-card h3 { margin: 0 0 5px; font-size: 13px; line-height: 1.22; overflow-wrap: anywhere; transition: color .12s ease; }
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.source-pill, .stock-label, .cost-label, .sale-status-label { display: inline-flex; align-items: center; min-height: 21px; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.source-pill { font-weight: 750; }
.source-pill.vat { color: var(--brand-dark); background: var(--brand-light); }
.source-pill.hand { color: #99520a; background: var(--amber-light); }
.add-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #b8d8d2; border-radius: 11px; background: var(--brand-light); color: var(--brand-dark); line-height: 1; transition: background-color .24s ease, border-color .24s ease, color .2s ease, box-shadow .24s ease, opacity .08s ease; }
.add-button:disabled { border: 1px solid #cfd9d6; background: #dfe6e4; color: #74817e; cursor: not-allowed; }
.add-button:disabled .lock-icon { stroke-width: 2.2; }
.add-button.selected { border-color: #efc9c4; background: var(--danger-light); color: var(--danger); }
.add-button-plus, .add-button > .x-icon { grid-area: 1 / 1; transition: opacity .16s ease, transform .22s cubic-bezier(.22, .8, .3, 1); }
.add-button-plus { width: 17px; height: 17px; display: grid; place-items: center; font-size: 23px; font-weight: 500; line-height: 17px; opacity: 1; transform: scale(1) rotate(0); }
.add-button > .x-icon { opacity: 0; transform: scale(.68) rotate(-18deg); }
.add-button.selected .add-button-plus { opacity: 0; transform: scale(.68) rotate(18deg); }
.add-button.selected > .x-icon { opacity: 1; transform: scale(1) rotate(0); }
.lock-icon { width: 17px; height: 17px; }
.stock-label { color: var(--stock-ink); background: var(--stock-light); }
.stock-label.out-of-stock { color: var(--danger); background: var(--danger-light); }
.cost-label { color: var(--cost-ink); background: var(--cost-light); }
.sale-status-label { color: #8a4b00; background: #ffedc2; }
.empty-state { padding: 36px 20px; text-align: center; color: var(--muted); }
.load-more { display: block; width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--brand); font-weight: 750; }

.cart-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border: 1.5px solid rgba(255,255,255,.95); border-radius: 999px; background: var(--danger); color: #fff; font-size: 9px; line-height: 1; box-shadow: 0 2px 5px rgba(5, 39, 35, .18); }

.modal { position: fixed; z-index: 50; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.page-modal { background: var(--canvas); }
.backdrop { position: absolute; inset: 0; background: rgba(11, 28, 25, .58); animation: backdrop-in .16s ease-out; }
.sheet-card { position: relative; width: 100%; max-width: var(--page-max-width); max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: 22px 22px 0 0; padding: 14px 14px calc(14px + var(--safe-bottom)); box-shadow: var(--shadow); backface-visibility: hidden; }
@keyframes backdrop-in { from { opacity: 0; } }
.close-button { position: absolute; top: 13px; right: 14px; width: 32px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #e5a49e; border-radius: 10px; background: var(--danger-light); color: var(--danger); box-shadow: 0 1px 3px rgba(180, 35, 24, .1); transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.close-button .x-icon { width: 17px; height: 17px; stroke-width: 2.35; }
.close-button:not(:disabled):active { border-color: #8f1c14; background: #8f1c14; color: #fff; box-shadow: none; opacity: 1; }
.draft-owner-control { position: relative; min-width: 0; margin: 0; }
.draft-owner-button { width: 100%; min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; text-align: left; }
.draft-owner-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-owner-button svg { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.draft-owner-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.draft-owner-button:disabled { color: var(--muted); cursor: wait; }
.draft-owner-picker { position: absolute; z-index: 66; top: calc(100% + 6px); left: 0; width: 100%; max-height: min(300px, max(80px, calc(var(--tg-viewport-height, 100dvh) - 240px))); overflow-y: auto; padding: 6px; border: 1px solid var(--control-border); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--popover-shadow); overscroll-behavior: contain; }
.draft-owner-option { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; }
.draft-owner-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-owner-option svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.draft-owner-option.is-selected { border-color: var(--control-border-active); background: var(--brand-light); color: var(--brand-dark); font-weight: 750; }
.draft-editor { padding: 0 1px 4px; }
.draft-editor .search-wrap input, .draft-editor .text-input { min-height: 38px; padding-top: 7px; padding-bottom: 7px; border-radius: 10px; font-size: 14px; }
.draft-editor .search-wrap input, .draft-editor .text-input { border-color: #8ab8b1; background: #fbfcfc; }
.draft-editor input::placeholder { color: #9da9a7; -webkit-text-fill-color: #9da9a7; font-size: 14px; font-weight: 400; line-height: normal; opacity: 1; }
#cartEditCustomerSearch::placeholder,
#cartEditTaxCode::placeholder {
  font-size: 14px !important;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
.draft-editor .is-verified input { border-color: #78bdb5; background: #f2faf8; }
.draft-editor .search-wrap input { padding-left: 34px; }
.draft-editor .search-icon { top: 10px; left: 10px; width: 18px; height: 18px; }
.draft-editor .selected-customer { height: 38px; min-height: 38px; padding: 2px 4px 2px 10px; border-radius: 9px; }
.draft-editor .selected-customer, .draft-editor .selected-taxpayer { border-color: #8ab8b1; background: #fbfcfc; box-shadow: 0 1px 3px rgba(15, 91, 84, .07); }
.draft-editor .tax-lookup-wrap { margin-top: 5px; }
.draft-editor .tax-lookup-wrap .text-input { padding-right: 39px; }
.draft-editor .tax-lookup-button { top: 3px; right: 3px; width: 32px; height: 32px; border-radius: 7px; }
.draft-editor .tax-lookup-button svg { width: 15px; height: 15px; }
.draft-editor .tax-lookup-spinner { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
.draft-editor .selected-taxpayer { min-height: 46px; margin-top: 5px; padding-top: 6px; padding-bottom: 6px; border-radius: 9px; }
.dashed-add-button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px dashed var(--border-add); border-radius: var(--control-radius); background: var(--surface-add); color: var(--brand-dark); font-size: 13px; font-weight: 750; cursor: pointer; }
.dashed-add-button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.new-draft-button { width: 100%; margin: 0; }
.new-draft-button:disabled { border-color: var(--border-disabled); background: var(--surface-disabled); color: var(--text-disabled); }
.draft-list { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0 0 8px; }
.draft-card, .history-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 11px 10px 11px 12px; border: 0; border-right: 1px solid #d3dfdc; border-bottom: 1px solid #d3dfdc; border-left: 1px solid #d3dfdc; border-radius: 0; background: var(--surface); box-shadow: none; }
.draft-card { width: 100%; min-height: 62px; grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); transition: height .3s ease, margin-bottom .3s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
.draft-card.is-exiting { visibility: hidden; pointer-events: none; }
.draft-list-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 20px; border: 1px dashed var(--border-empty); border-radius: var(--card-radius); background: var(--surface-empty); color: var(--muted); text-align: center; }
.draft-list-empty svg { width: 28px; height: 28px; margin-bottom: 3px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.draft-list-empty strong { color: var(--brand-dark); font-size: 13px; }
.draft-list-empty span { font-size: 11px; line-height: 1.35; }
.draft-card.active { border-color: var(--card-border-active); background: var(--surface-selected); box-shadow: var(--card-shadow-active); }
.draft-card.has-waiting-actions { grid-template-rows: minmax(62px, auto); }
.draft-card:focus-within { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.draft-card.active .draft-open strong { color: var(--brand-dark); }
.draft-card.active .draft-order-number { background: var(--brand); color: var(--on-brand); }
.draft-open { min-width: 0; align-self: stretch; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.draft-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 9px 5px 9px 0; }
.draft-title { min-width: 0; display: block; margin-bottom: 3px; }
.draft-title strong { min-width: 0; display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 750; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.draft-order-number { width: 28px; height: 28px; display: grid; place-items: center; margin: 0 auto; border: 0; border-radius: 9px; background: var(--brand-light); color: var(--brand-dark); font-size: 12px; font-weight: 800; line-height: 1; }
.draft-subtitle { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--muted); font-size: 10.5px; font-weight: 550; line-height: 1.25; white-space: nowrap; }
.draft-subtitle span { overflow: hidden; text-overflow: ellipsis; }
.draft-subtitle i { color: var(--muted); font-style: normal; }
.draft-subtitle strong { color: var(--brand-dark); font-size: inherit; font-weight: 750; }
.draft-actions { min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 4px; }
.draft-delete, .draft-waiting { height: 34px; display: grid; place-items: center; padding: 0; border-radius: 10px; }
.draft-delete { width: 34px; border: 1px solid var(--danger-border-soft); background: var(--danger-light); color: var(--danger); }
.draft-waiting { width: auto; min-width: 34px; grid-auto-flow: column; gap: 5px; padding: 0 9px; border: 1px solid #e1c98d; background: #fff7df; color: #8a6208; }
.draft-waiting.draft-pending { border-color: #a9d5cf; background: #eaf7f5; color: var(--brand-dark); }
.draft-waiting span { font-size: 10px; font-weight: 750; white-space: nowrap; }
.draft-delete svg, .draft-waiting svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.draft-list-cancel, .draft-list-sign { min-width: 0; height: 34px; margin: 0; border-radius: 9px; font-size: 10.5px; font-weight: 780; white-space: nowrap; }
.draft-list-cancel { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid var(--danger-border); background: var(--danger-light); color: var(--danger); box-shadow: var(--danger-shadow); }
.draft-list-sign { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 9px; border: 1px solid var(--action-border); background: var(--brand-light); color: var(--brand-dark); box-shadow: var(--action-shadow); }
.draft-list-sign svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.draft-list-cancel:disabled, .draft-list-sign:disabled { box-shadow: none; cursor: default; opacity: .5; }
.draft-list-cancel.is-busy, .draft-list-sign.is-busy { position: relative; cursor: progress; }
.draft-list-cancel.is-busy > span:not(.draft-action-spinner), .draft-list-sign.is-busy > span:not(.draft-action-spinner), .draft-list-sign.is-busy > svg { visibility: hidden; }
.draft-action-spinner { position: absolute; inset: 0; width: 14px; height: 14px; margin: auto; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .65s linear infinite; }
.sheet-card.history-sheet { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: calc(12px + var(--safe-top)) var(--page-gutter) calc(12px + var(--safe-bottom)); border-radius: 0; background: var(--canvas); }
.history-heading { flex: 0 0 auto; min-height: 46px; display: flex; align-items: center; padding: 2px 42px 7px 2px; border-bottom: 1px solid var(--line); }
.history-heading > div { min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.history-heading h2 { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-heading p { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#historyModal .history-heading { padding-right: 154px; }
.history-header-manage { position: absolute; top: calc(12px + var(--safe-top)); right: 54px; min-width: 96px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #78afa7; border-radius: 10px; background: #dff1ee; color: var(--brand-dark); font-size: 11px; font-weight: 800; white-space: nowrap; }
.history-header-manage svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-header-manage.is-active { border-color: #c4922f; background: #fff0c7; color: #704300; }
.history-header-manage:disabled { cursor: default; opacity: .58; }
#catalogPageHeader { padding-right: 158px; }
.catalog-page.is-picker #catalogPageHeader { display: none; }
.catalog-page.is-picker .catalog-sheet { padding: calc(5px + var(--safe-top)) 5px calc(12px + var(--safe-bottom)); }
.catalog-sheet .current-order-dock { position: relative; flex: 0 0 auto; top: auto; margin: 0; padding: 8px 0 0; border-bottom: 0; box-shadow: none; }
.catalog-page.is-picker .current-order-dock { padding: 0 0 5px; }
.catalog-sheet .catalog-section { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-top: 12px; }
.catalog-page.is-picker .catalog-section { padding-top: 0; }
.history-filter-row { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; margin: 12px 0 8px; }
.history-filter-row.is-leader { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.history-filter-control { position: relative; min-width: 0; }
.history-seller-button, .history-month-button { width: 100%; min-width: 0; min-height: 40px; padding: 5px 9px; border: 1px solid #c8d9d5; border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; text-overflow: ellipsis; }
.history-seller-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.history-seller-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-seller-button svg { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.history-seller-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.history-seller-picker { position: absolute; z-index: 66; top: calc(100% + 6px); left: 0; width: 100%; max-height: min(260px, calc(100vh - 150px)); overflow-y: auto; padding: 6px; border: 1px solid #c8d9d5; border-radius: 13px; background: var(--surface); box-shadow: 0 14px 34px rgba(29, 54, 49, .2); overscroll-behavior: contain; }
.history-seller-option { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; }
.history-seller-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-seller-option svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.history-seller-option.is-selected { border-color: #8abdb6; background: var(--brand-light); color: var(--brand-dark); font-weight: 750; }
.history-month-control { position: relative; min-width: 0; }
.history-month-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.history-month-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-month-button svg { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-month-picker { position: absolute; z-index: 65; top: calc(100% + 6px); right: 0; width: min(280px, calc(100vw - 28px)); padding: 10px; border: 1px solid #c8d9d5; border-radius: 13px; background: var(--surface); box-shadow: 0 14px 34px rgba(29, 54, 49, .2); }
.history-month-picker-heading { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; align-items: center; margin-bottom: 8px; text-align: center; }
.history-month-picker-heading button { height: 34px; padding: 0; border: 0; border-radius: 9px; background: #edf4f2; color: var(--brand-dark); font-size: 24px; line-height: 1; }
.history-month-picker-heading strong { font-size: 14px; }
.history-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.history-month-grid button { min-height: 36px; padding: 5px 3px; border: 1px solid var(--line); border-radius: 9px; background: #f7faf9; color: var(--ink); font-size: 12px; font-weight: 650; }
.history-month-grid button.is-selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.history-month-grid button.is-current:not(.is-selected) { border-color: #8abdb6; }
.history-current-month { width: 100%; min-height: 36px; margin-top: 8px; border: 0; border-radius: 9px; background: #e7f2f0; color: var(--brand-dark); font-size: 12px; font-weight: 750; }
.history-summary { flex: 0 0 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2px 0 12px; overflow: hidden; border: 1px solid #c5d5d1; border-radius: 12px; background: var(--surface); white-space: nowrap; }
.history-summary span { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 7px 5px 8px; }
.history-summary span + span { border-left: 1px solid #cfdbd8; }
.history-summary small { color: #778682; font-size: 9.5px; font-weight: 600; line-height: 1.1; }
.history-summary strong { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; }
#historySummaryRevenue { color: var(--brand-dark); }
#historySummaryProfit { color: var(--profit-ink); }
.history-list { min-height: 0; flex: 1; display: grid; align-content: start; gap: 0; overflow-y: auto; padding: 0; border: 1px solid #bfd0cc; border-radius: 14px; background: var(--surface); }
.history-list.is-empty { overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.history-day-group { min-width: 0; display: grid; align-content: start; }
.history-day-heading { min-height: 30px; display: flex; align-items: center; margin: 0; padding: 8px 12px 7px; border-bottom: 1px solid #cad8d5; background: #f2f6f5; color: #657571; font-size: 10.5px; font-weight: 650; line-height: 1.2; letter-spacing: .01em; }
.history-day-heading span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-day-orders { display: grid; }
.history-card-shell { position: relative; min-width: 0; display: grid; }
.history-day-orders .history-card { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #d0ddda; border-radius: 0; background: var(--surface); color: var(--ink); text-align: left; }
.history-day-orders .history-card:focus-visible { position: relative; z-index: 1; outline: var(--focus-width) solid var(--brand); outline-offset: -1px; }
.history-list.is-scrollable .history-day-group:last-child .history-day-orders > .history-card:last-child,
.history-list.is-scrollable .history-day-group:last-child .history-day-orders > .history-card-shell:last-child > .history-card { border-bottom: 0; }
.history-card-shell.is-managing > .history-card { padding-right: 52px; }
.history-card-main { min-width: 0; display: block; }
.history-card-main strong, .history-card-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-card-main strong { margin-bottom: 4px; color: #263632; font-size: 13px; font-weight: 650; line-height: 1.22; }
.history-card-meta { color: #7b8986; font-size: 9.5px; font-weight: 500; line-height: 1.25; }
.history-card-summary { display: grid; justify-items: end; gap: 3px; white-space: nowrap; }
.history-card-price { color: var(--brand-dark); font-size: 13px; font-weight: 700; white-space: nowrap; }
.history-card-profit { color: var(--profit-ink); font-size: 10px; font-weight: 800; line-height: 1.2; }
.history-card-profit.is-negative { color: var(--danger); }
.history-day-orders .history-card.history-discount-entry { background: #fffaf0; }
.history-day-orders .history-card.has-loss { background: var(--history-loss-bg); }
.history-discount-entry .history-card-meta { color: #9a6517; }
.history-discount-entry.is-reversed .history-card-price { opacity: .55; text-decoration: line-through; }
.history-card-price.is-discount { color: var(--danger); }
.discount-detail-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.discount-detail-row:hover { background: #f1f8f5; }
.discount-detail-row:focus-visible { position: relative; z-index: 1; outline: var(--focus-width) solid var(--brand); outline-offset: -1px; }
.discount-detail-row .cart-item-name, .discount-detail-row .history-value { cursor: pointer; }
.discount-detail-meta { min-width: 0; display: flex; align-items: center; gap: 5px; margin-top: 3px; white-space: nowrap; }
.discount-detail-rate { flex: 0 0 auto; padding: 2px 5px; border: 1px solid #ecd39d; border-radius: 5px; background: #fff3d7; color: #8a5211; font-size: 9px; font-weight: 800; line-height: 1.15; }
.discount-detail-order-id { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; }
.history-detail-sheet .discount-detail-amount { padding-right: 2px; color: var(--danger); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-discount-card { display: grid; gap: 5px; padding: 10px 12px; border-bottom: 1px solid #d7dfdc; background: #fff9e9; font-size: 11px; }
.history-discount-card strong { color: #594116; font-size: 12px; }
.history-discount-card span { color: #6e6758; line-height: 1.4; }
.history-discount-card b { color: #694b14; }
.history-discount-detail-toggle { justify-self: start; padding: 2px 0; border: 0; background: transparent; color: var(--brand-dark); font-size: 10px; font-weight: 700; }
.history-discount-detail { display: grid; gap: 5px; padding: 7px; border-radius: 7px; background: #fff; color: #514d42; font-size: 10px; line-height: 1.45; }
.sales-discount-sheet { gap: 9px; }
.sales-discount-sheet .history-heading h2 { max-width: 100%; font-size: 17px; }
.sales-discount-period { position: relative; z-index: 4; flex: 0 0 auto; }
.sales-discount-dates { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 76px; align-items: center; gap: 6px; }
.sales-discount-date-field { min-width: 0; }
.sales-discount-range-arrow { display: grid; place-items: center; color: #68847e; }
.sales-discount-range-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sales-discount-date-control { position: relative; min-width: 0; }
.sales-discount-date-button { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 6px 10px; border: 1px solid #abc9c3; border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; text-align: left; }
.sales-discount-date-button:focus-visible, .sales-discount-date-button[aria-expanded="true"] { border-color: var(--brand); outline: 0; box-shadow: none; }
.sales-discount-date-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-discount-date-button svg { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: var(--brand-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sales-discount-date-picker { position: absolute; z-index: 10; top: calc(100% + 5px); left: 0; width: min(290px, calc(100vw - 30px)); padding: 10px; border: 1px solid #b7cfca; border-radius: 12px; background: var(--surface); box-shadow: 0 14px 32px rgba(29, 54, 49, .2); }
.sales-discount-date-field:nth-child(3) .sales-discount-date-picker { right: 0; left: auto; }
.sales-discount-reload { min-height: 38px; padding: 5px 7px; border: 1px solid #80b7ae; border-radius: 9px; background: #d9eee9; color: var(--brand-dark); font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; }
.sales-discount-reload:hover:not(:disabled) { background: #c8e6df; }
.sales-discount-reload:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: 2px; }
.sales-discount-reload:disabled { opacity: .65; }
.sales-discount-lines { min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden; color: var(--muted); font-size: 12px; }
.sales-discount-lines.is-empty { display: grid; place-items: center; }
.sales-discount-empty { display: grid; justify-items: center; gap: 8px; max-width: 250px; padding: 16px; color: var(--muted); line-height: 1.4; text-align: center; }
.sales-discount-empty .history-spinner { width: 23px; height: 23px; }
.sales-discount-order + .sales-discount-order { margin-top: 8px; }
.sales-discount-order { min-width: 0; border: 1px solid #b8d4ce; border-radius: 11px; background: var(--surface); color: var(--ink); overflow: hidden; box-shadow: 0 2px 6px rgba(15, 76, 68, .08); }
.sales-discount-order-heading { width: 100%; min-height: 56px; display: grid; grid-template-columns: 28px minmax(0, 1fr) clamp(155px, 41vw, 190px) 14px; align-items: center; gap: 8px; padding: 9px 10px; border: 0; background: var(--surface); color: var(--brand-dark); font: inherit; text-align: left; cursor: pointer; outline: 0; transition: none; -webkit-tap-highlight-color: transparent; }
.sales-discount-order-heading:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
.sales-discount-order-heading:not(:disabled):active { opacity: 1; }
.sales-discount-order.is-open > .sales-discount-order-heading { background: #e2f1ed; }
.sales-discount-order-heading .draft-order-number { border: 1px solid #a7d2c9; background: #d8eee8; }
.sales-discount-order.is-open .draft-order-number { border-color: var(--brand); background: var(--brand); color: #fff; }
.sales-discount-order-summary { min-width: 0; display: grid; gap: 3px; }
.sales-discount-order-summary strong { overflow: hidden; font-size: 13px; font-weight: 750; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; }
.sales-discount-order-summary small { overflow: hidden; color: #637a73; font-size: 10.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.sales-discount-order-heading .history-card-summary { width: 100%; grid-template-rows: 16px 16px; row-gap: 2px; align-items: center; }
.sales-discount-order-heading .history-card-price { grid-row: 1; font-size: 12.5px; }
.sales-discount-order-bottom { grid-row: 2; width: 100%; display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.sales-discount-order-heading .history-card-profit { font-size: clamp(10px, 2.4vw, 11px); }
.sales-discount-order-separator { color: #71817d; font-size: clamp(10px, 2.4vw, 11px); }
.sales-discount-order-deduction { color: var(--danger); font-size: clamp(10px, 2.4vw, 11px); font-weight: 750; white-space: nowrap; }
.sales-discount-order-chevron { width: 16px; height: 16px; fill: none; stroke: var(--brand-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sales-discount-order.is-open .sales-discount-order-chevron { transform: rotate(180deg); }
.sales-discount-order-items { padding: 0 10px 8px; }
.sales-discount-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf2ef; }
.sales-discount-line:last-child { padding-bottom: 0; border-bottom: 0; }
.sales-discount-line.is-locked { opacity: .55; }
.sales-discount-product { min-width: 0; display: grid; gap: 3px; color: var(--ink); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sales-discount-product-name { font-weight: 600; }
.sales-discount-product-name .source-pill { margin-right: 5px; vertical-align: 1px; }
.sales-discount-product small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.sales-discount-line-controls { min-width: 0; display: grid; grid-template-columns: 64px 104px; gap: 6px; align-items: center; }
.sales-discount-mode-control { min-width: 0; }
.sales-discount-mode { position: relative; width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 5px 15px; border: 1px solid #53615e; border-radius: 7px; background: #fbfcfc; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; transition: none; }
.sales-discount-mode svg { position: absolute; right: 4px; width: 10px; height: 10px; fill: none; stroke: var(--brand-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sales-discount-mode:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
.sales-discount-mode:not(:disabled):active, .sales-discount-mode-options button:not(:disabled):active { opacity: 1; }
.sales-discount-mode:disabled { cursor: default; }
.sales-discount-mode-options { position: fixed; z-index: 75; display: grid; gap: 2px; width: 130px; height: 76px; padding: 4px; border: 1px solid #c5d9d4; border-radius: 9px; background: #f7faf9; box-shadow: 0 10px 24px rgba(29, 54, 49, .2); }
.sales-discount-mode-options button { min-height: 32px; padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; text-align: left; }
.sales-discount-mode-options button:hover, .sales-discount-mode-options button[aria-selected="true"] { background: var(--brand-light); color: var(--brand-dark); }
.sales-discount-line-controls input { min-width: 0; width: 100%; min-height: 36px; padding: 5px 7px; border: 1px solid #53615e; border-radius: 7px; background: #fbfcfc; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-align: center; }
.sales-discount-line-controls input::placeholder { font-size: 14px; font-weight: 400; text-align: center; }
.sales-discount-line-controls input:focus { border-color: var(--brand); outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
.sales-discount-line.is-invalid .sales-discount-value { border-color: var(--danger); background: #fff8f7; }
.confirm-actions.sales-discount-actions { grid-template-columns: 88px minmax(0, 1fr); margin-top: 0; }
.sales-discount-actions .sales-discount-cancel { border-color: #e8a6a0; background: #fff0ee; color: var(--danger); }
.sales-discount-actions .sales-discount-cancel:not(:disabled):hover { background: #ffe1dd; color: var(--danger); }
.sales-discount-actions .sales-discount-cancel:disabled { opacity: .55; cursor: not-allowed; }
.sales-discount-actions .sales-discount-cancel:disabled:hover { background: #fff0ee; color: var(--danger); }
#salesDiscountModal.is-busy .sales-discount-period, #salesDiscountModal.is-busy .sales-discount-lines { pointer-events: none; }
@media (max-width: 380px) {
  .sales-discount-order-heading { grid-template-columns: 28px minmax(0, 1fr) 150px 14px; gap: 6px; }
  .sales-discount-dates { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 68px; gap: 5px; }
  .sales-discount-range-arrow svg { width: 14px; height: 14px; }
  .sales-discount-date-button { gap: 3px; padding: 5px 6px; font-size: 10px; }
  .sales-discount-date-button svg { width: 14px; height: 14px; }
  .sales-discount-reload { padding-inline: 4px; font-size: 10px; }
  .sales-discount-line { gap: 6px; }
  .sales-discount-line-controls { grid-template-columns: 64px 88px; gap: 5px; }
  .confirm-actions.sales-discount-actions .primary-button { font-size: 11px; }
}
.history-card-menu { position: absolute; z-index: 2; top: 7px; right: 8px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #a9c9c4; border-radius: 9px; background: #edf6f4; color: var(--brand-dark); }
.history-card-menu svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.history-card-menu[aria-expanded="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.history-card-menu-panel { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border-bottom: 1px solid #c7d7d3; background: #f5f9f8; box-shadow: inset 0 1px 0 #e0e9e7; }
.history-card-menu-action { min-width: 0; min-height: 37px; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #c5d8d4; border-radius: 9px; background: var(--surface); color: #254c47; font-size: 10.5px; font-weight: 700; text-align: left; }
.history-card-menu-action svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-card-menu-action span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-card-menu-action.is-danger { border-color: #e8bbb6; background: #fff4f2; color: var(--danger); }
.history-card-menu-action:active { background: var(--brand-light); }
.history-card-menu-action.is-danger:active { background: var(--danger); color: #fff; }
.history-loading { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: 12px; }
/* Panel loaders fill the content area beneath the fixed heading and filters. */
.history-sheet > .history-loading,
.employee-scroll > .history-loading,
.order-home-scroll > .history-loading,
.debt-receipt-modal.is-proof-preview .debt-receipt-card > .history-loading { min-height: 0; flex: 1; }
.history-loading.product-history-loading { min-height: 0; }
.employee-scroll:has(> .history-loading:not(.hidden)),
.order-home-scroll:has(> .history-loading:not(.hidden)) { display: flex; flex-direction: column; }
.employee-scroll:has(> .history-loading:not(.hidden)) { padding-bottom: 0; }
.employee-scroll:has(> .history-loading:not(.hidden)) > .employee-list,
.order-home-scroll:has(> .history-loading:not(.hidden)) > .draft-list { display: none; }
.history-spinner { width: 18px; height: 18px; border: 2px solid #bed3cf; border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }

.debt-sheet, .debt-detail-sheet { gap: 0; }
.debt-heading { min-height: 46px; padding-right: 46px; }
#debtDetailModal .debt-heading { padding-right: 154px; }
#debtDetailModal .debt-heading h2 { flex: 0 1 auto; }
.debt-sheet > .debt-heading { min-height: 46px; }
.debt-heading h2 { flex: 0 1 auto; min-width: 0; }
.debt-heading p { color: var(--muted); font-size: 10.5px; }
.debt-content { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.debt-sheet > .history-loading { min-height: 0; flex: 1; }
.debt-search { position: relative; flex: 0 0 auto; display: block; margin: 0 0 8px; }
.debt-search svg { position: absolute; z-index: 1; top: 11px; left: 12px; width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.debt-search input { width: 100%; min-height: 42px; padding: 8px 12px 8px 40px; border: 1px solid #c8d9d5; border-radius: 11px; background: var(--surface); color: var(--ink); }
.debt-summary { flex: 0 0 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0 8px; }
.debt-summary-card { position: relative; min-width: 0; min-height: 74px; display: grid; align-content: center; gap: 6px; overflow: hidden; padding: 8px; border: 1px solid #d4e0dd; border-radius: 13px; background: var(--surface); box-shadow: 0 4px 12px rgba(38, 66, 60, .05); }
.debt-summary-card::after { position: absolute; z-index: 0; top: -30px; right: -29px; width: 78px; height: 78px; content: ""; border-radius: 50%; opacity: .58; pointer-events: none; }
.debt-summary-card.is-total { border-color: #e7b8b3; background: #fff7f5; }
.debt-summary-card.is-total::after { background: #ffd6d0; }
.debt-summary-card.is-vat { border-color: #e7cd99; background: #fffbf2; }
.debt-summary-card.is-vat::after { background: #ffebbd; }
.debt-summary-card.is-customers { border-color: #a9d2cc; background: #f3fbf9; }
.debt-summary-card.is-customers::after { background: #c4ebe4; }
.debt-summary-label { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: #273b36; font-size: 10px; font-weight: 800; white-space: nowrap; }
.debt-summary-label i { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: #ffebe8; color: var(--danger); }
.debt-summary-card.is-vat .debt-summary-label i { background: #fff0cf; color: var(--profit-ink); }
.debt-summary-card.is-customers .debt-summary-label i { background: #cfeae5; color: #075e57; }
.debt-summary-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.debt-summary strong { position: relative; z-index: 1; max-width: 100%; overflow: hidden; color: var(--danger); font-size: 12.5px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
#debtSummaryVat { color: var(--profit-ink); }
#debtSummaryCustomers { color: var(--brand-dark); }
.debt-list { min-height: 0; flex: 1; display: grid; align-content: start; gap: 0; overflow-y: auto; padding: 0; border: 1px solid #bfd0cc; border-radius: 14px; background: var(--surface); }
.debt-list-columns, .debt-customer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(82px, .9fr) minmax(74px, .82fr); align-items: center; gap: 7px; padding-left: 11px; padding-right: 28px; }
.debt-list-columns { position: sticky; z-index: 1; top: 0; min-height: 30px; border-bottom: 1px solid #d5e0dd; background: #f4f8f7; color: #536560; font-size: 9.5px; font-weight: 750; }
.debt-list-columns span:not(:first-child) { text-align: right; }
.debt-customer { position: relative; width: 100%; min-height: 43px; overflow: hidden; padding-top: 7px; padding-bottom: 7px; border: 0; border-bottom: 1px solid #cddbd8; border-radius: 0; background: var(--surface); color: var(--ink); text-align: left; box-shadow: none; }
.debt-customer:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
.debt-customer.has-vat-warning { background: #ffe2de; box-shadow: inset 4px 0 0 #dc4037; }
.debt-customer.has-vat-warning:focus-visible { box-shadow: inset 4px 0 0 #dc4037; }
.debt-customer.has-vat-warning .debt-customer-amount.is-vat { color: #bd241c; font-weight: 750; }
.debt-list.is-scrollable .debt-customer:last-child { border-bottom: 0; }
.debt-customer-copy { min-width: 0; overflow: hidden; }
.debt-customer-copy strong { display: block; overflow: hidden; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.debt-customer-amount { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.debt-customer-amount.is-main { color: var(--danger); }
.debt-customer-amount.is-vat { color: var(--profit-ink); }
.debt-customer-amount.is-credit { color: var(--brand-dark); }
.debt-customer > svg { position: absolute; right: 8px; width: 14px; height: 14px; fill: none; stroke: #78908b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.debt-status { flex: 0 0 auto; display: grid; justify-items: center; gap: 10px; padding: 24px 12px; color: var(--muted); font-size: 12px; text-align: center; }
.debt-status button { min-height: 34px; padding: 0 14px; border: 1px solid #aacbc5; border-radius: 9px; background: var(--brand-light); color: var(--brand-dark); font-size: 11px; font-weight: 750; }
.debt-bank-accounts-button { position: absolute; top: calc(12px + var(--safe-top)); right: 54px; width: 40px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #86b9b2; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 118, 110, .1); }
.debt-bank-accounts-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.debt-bank-accounts-button:not(:disabled):active { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; }
.debt-detail-content { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.debt-balance-grid { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0 9px; }
.debt-balance-card { position: relative; min-width: 0; min-height: 76px; display: grid; align-content: center; gap: 6px; overflow: hidden; padding: 10px 12px; border: 1px solid #d4e0dd; border-radius: 13px; background: var(--surface); box-shadow: 0 4px 12px rgba(38, 66, 60, .05); }
.debt-balance-card::after { position: absolute; z-index: 0; top: -28px; right: -25px; width: 82px; height: 82px; content: ""; border-radius: 50%; opacity: .58; pointer-events: none; }
.debt-balance-card.is-main { border-color: #e7b8b3; background: #fff7f5; }
.debt-balance-card.is-main::after { background: #ffd6d0; }
.debt-balance-card.is-vat { border-color: #e7cd99; background: #fffbf2; }
.debt-balance-card.is-vat::after { background: #ffebbd; }
.debt-balance-label { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 7px; color: #52635e; font-size: 10.5px; font-weight: 650; }
.debt-balance-label i { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #ffebe8; color: var(--danger); }
.debt-balance-card.is-vat .debt-balance-label i { background: #fff0cf; color: var(--profit-ink); }
.debt-balance-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.debt-balance-grid strong { position: relative; z-index: 1; max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.debt-balance-card.is-main strong { color: var(--danger); }
.debt-balance-card.is-vat strong { color: var(--profit-ink); }
.debt-balance-grid strong.is-credit { color: var(--brand-dark); }
.debt-detail-actions { flex: 0 0 auto; display: flex; align-items: stretch; justify-content: flex-end; gap: 6px; min-width: 0; }
.debt-detail-actions button { flex: 1 1 0; width: auto; min-width: 0; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0 6px; border-radius: 10px; font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.debt-detail-actions .debt-payment-open { flex: 1 1 0; }
.debt-capture-button { flex: 0 1 auto; border: 1px solid var(--brand); background: var(--surface); color: var(--brand-dark); }
.debt-detail-actions svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.debt-detail-actions button:disabled { opacity: .58; }
.debt-discount-open { border: 1px solid var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.debt-discount-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.debt-admin-sheet, .ledger-report-sheet { width: min(100%, 620px); }
.debt-admin-sheet { background: #edf3f1; }
.debt-admin-sheet .debt-heading { border-bottom-color: #d3dfdc; }
.debt-admin-sheet .debt-heading p { color: #647570; font-size: 10px; }
.debt-admin-content { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--section-gap); padding: 12px 1px 3px; }
.debt-admin-card { position: relative; display: grid; gap: var(--section-content-gap); padding: 13px; border: 1px solid #c9d9d5; border-radius: 15px; background: var(--surface); box-shadow: 0 3px 10px rgba(29, 54, 49, .045); }
.debt-admin-card-heading { min-width: 0; display: flex; align-items: center; gap: 10px; }
.debt-admin-card-heading > div { min-width: 0; display: grid; gap: 2px; }
.debt-admin-card h3 { margin: 0; color: #263b36; font-size: 14px; line-height: 1.25; }
.debt-admin-card-heading p { margin: 0; color: #71807c; font-size: 10px; line-height: 1.3; }
.debt-admin-card-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); }
.debt-admin-card-icon.is-vat { background: #fff0cf; color: var(--profit-ink); }
.debt-admin-card-icon.is-export { background: #e7eef8; color: #315d76; }
.debt-admin-card-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.debt-admin-card .debt-export-date-button { width: 100%; min-height: var(--form-row-height); border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--surface); font-size: var(--form-value-size); }
.debt-admin-money-input { color: #173c36; font-size: var(--form-value-size); font-weight: 750; letter-spacing: .01em; }
.debt-admin-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: -2px; color: #687a76; font-size: 10px; line-height: 1.35; }
.debt-admin-hint svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.debt-admin-card > button { min-height: 38px; margin: 0; border: 1px solid #abc7c2; border-radius: 10px; background: #edf5f3; color: var(--brand-dark); font-size: 12px; font-weight: 750; box-shadow: none; }
.debt-admin-card > .primary-button:not(:disabled):hover { border-color: #83afa8; background: #e3f1ee; color: var(--brand-dark); box-shadow: none; }
.debt-admin-card > button:not(:disabled):active { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); opacity: 1; }
.debt-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.debt-admin-grid > .is-wide { grid-column: 1 / -1; }
.debt-admin-field { min-width: 0; }
.debt-export-date-button { font-weight: 650; }
.debt-export-date-picker { width: min(320px, 100%); }
.debt-delete-customer { min-height: 42px; margin-top: 2px; }
.debt-transaction-delete { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid #efb0aa; border-radius: 8px; background: #fff3f1; color: var(--danger); }
.debt-transaction-delete svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ledger-report-form { position: relative; z-index: 2; display: grid; gap: 8px; padding: 11px 0 4px; }
.ledger-report-heading { justify-content: space-between; gap: 8px; padding-right: 0; }
.ledger-report-heading h2 { min-width: 0; font-size: 16px; line-height: 1.2; }
.ledger-report-heading > .ledger-report-heading-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; overflow: visible; }
.ledger-report-heading .close-button { position: static; flex: 0 0 32px; width: 32px; height: 34px; }
.ledger-report-dates { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 76px; }
.ledger-report-dates .sales-discount-date-button { min-height: 42px; font-size: 13px; }
.ledger-report-load { min-height: 42px; padding: 5px 7px; border: 1px solid #80b7ae; border-radius: 9px; background: #d9eee9; color: var(--brand-dark); font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ledger-report-load:hover:not(:disabled) { background: #c8e6df; }
.ledger-report-load[aria-busy="true"] { display: grid; place-items: center; }
.ledger-report-load .history-spinner { width: 16px; height: 16px; }
.ledger-report-kind { display: flex; gap: 5px; }
.ledger-report-kind button { min-width: 68px; min-height: 32px; padding: 5px 7px; border: 1px solid #9fc7c0; border-radius: 8px; background: var(--surface); color: var(--brand-dark); font-size: 11px; font-weight: 750; white-space: nowrap; }
.ledger-report-kind button:hover:not(.is-active) { background: #f0f8f6; }
.ledger-report-kind button.is-active { border-color: var(--brand); background: var(--button-brand); color: #fff; }
.ledger-report-accounts { display: flex; flex-wrap: wrap; gap: 6px; }
.ledger-report-accounts button { min-height: 32px; padding: 0 9px; border: 1px solid #bad0cb; border-radius: 9px; background: var(--surface); color: #41534f; font-size: 10.5px; font-weight: 700; }
.ledger-report-accounts button.is-selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.ledger-report-summary { padding: 10px 11px; border-radius: 11px; background: var(--brand-light); color: var(--brand-dark); font-size: 12px; font-weight: 750; }
.ledger-report-rows { min-height: 0; flex: 1; overflow-y: auto; border: 1px solid #bfd0cc; border-radius: 14px; background: var(--surface); }
.ledger-report-columns, .ledger-report-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) minmax(88px, auto); gap: 5px; align-items: center; padding-inline: 10px; }
.ledger-report-columns { position: sticky; z-index: 1; top: 0; min-height: 35px; border-bottom: 1px solid #d5e0dd; background: #f4f8f7; color: #41534f; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.ledger-report-columns span:last-child { text-align: right; }
.ledger-report-row { min-height: 43px; padding-block: 11px; border-bottom: 1px solid #d5e0dd; }
.ledger-report-row:last-child { border-bottom: 0; }
.ledger-report-row.can-open-order { width: 100%; border: 0; border-bottom: 1px solid #d5e0dd; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; appearance: none; }
.ledger-report-row.can-open-order:last-child { border-bottom: 0; }
.ledger-report-row.can-open-order:hover { background: #f2f8f6; }
.ledger-report-row.can-open-order:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
.ledger-report-row.can-open-order:active { background: var(--brand-light); opacity: 1; }
.ledger-report-row time { color: #2f423e; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ledger-report-row span { min-width: 0; color: #172925; font-size: 13px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.ledger-report-row strong { color: var(--brand-dark); font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.ledger-report-row.is-export strong { color: var(--danger); }
.ledger-report-copy { width: 100%; min-height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--brand); border-radius: 11px; background: var(--button-brand); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 4px 12px rgba(15, 118, 110, .16); }
.ledger-report-copy:hover:not(:disabled) { background: var(--button-brand-hover); }
.ledger-report-copy svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 380px) {
  .ledger-report-heading h2 { font-size: 14px; white-space: nowrap; }
  .ledger-report-kind button { min-width: 57px; padding-inline: 4px; font-size: 10px; }
  .ledger-report-heading > .ledger-report-heading-actions { gap: 4px; }
  .ledger-report-heading .close-button { flex-basis: 30px; width: 30px; }
  .ledger-report-dates { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 62px; gap: 4px; }
  .ledger-report-dates .sales-discount-date-button { padding-inline: 5px; font-size: 11px; }
}
.debt-transactions > .debt-load-full { width: calc(100% - 20px); margin: 8px 10px 9px; }
.debt-transactions { min-height: 0; flex: 1; overflow-y: auto; margin-top: 8px; border: 1px solid #c6d7d3; border-radius: 13px; background: var(--surface); }
.debt-transaction-columns, .debt-transaction { display: grid; grid-template-columns: 58px minmax(54px, .72fr) minmax(76px, 1.1fr) minmax(72px, auto) 27px; gap: 4px; }
.debt-transaction-columns { position: sticky; z-index: 1; top: 0; align-items: center; padding: 8px 10px; border-bottom: 1px solid #d5e0dd; background: #f4f8f7; color: #41534f; font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.debt-transaction-columns span:nth-child(4) { text-align: right; }
.debt-transaction { min-height: 42px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #cddbd8; background: #d9f3ea; }
.debt-transaction.is-export { background: var(--surface); }
.debt-transaction.can-open-detail { cursor: pointer; transition: background-color .16s ease; }
.debt-transaction.can-open-detail:hover, .debt-transaction.can-open-detail:focus-within { background: #c8ebe0; }
.debt-transaction.can-open-detail.is-export:hover, .debt-transaction.can-open-detail.is-export:focus-within { background: #e5f2ef; }
.debt-transaction:last-child { border-bottom: 0; }
.debt-transaction > time { min-width: 0; overflow: hidden; color: #3e504c; font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.debt-transaction-copy { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.debt-transaction-copy strong { min-width: 0; overflow: hidden; color: #087354; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.debt-transaction.is-export .debt-transaction-copy strong { color: #172925; }
.debt-transaction-info { min-width: 0; display: -webkit-box; overflow: hidden; color: #51645f; font-size: 10.5px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.debt-transaction:not(.is-export) .debt-transaction-info { color: #176c5b; }
.debt-transaction-info.can-open-order { display: block; overflow: hidden; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #176c5b; font-family: inherit; font-size: 10.5px; font-weight: 650; line-height: 1.2; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.debt-transaction-info.can-open-order:active { background: var(--brand-light); }
.debt-transaction-amount { min-width: 0; display: grid; justify-items: end; white-space: nowrap; }
.debt-transaction-amount strong { color: var(--brand-dark); font-size: 12px; }
.debt-transaction.is-export .debt-transaction-amount strong { color: var(--danger); }
body.debt-payment-active { background: var(--canvas); }
body.debt-payment-active #app,
body.debt-payment-active .modal:not(#debtPaymentModal):not(#debtReceiptModal) { pointer-events: none; }
.debt-payment-modal { padding: 0; }
.debt-payment-card { margin: 0; border: 0; text-align: left; animation: none; }
.debt-payment-card h2 { margin: 0; color: #1d302c; font-size: 18px; text-align: left; }
.debt-payment-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--section-gap); padding: 14px 0 8px; overflow-y: auto; overscroll-behavior: contain; }
.debt-form-field input { width: 100%; min-height: var(--form-row-height); padding: 5px 10px; border: 0; border-radius: inherit; background: transparent; color: var(--ink); font: inherit; font-size: var(--form-value-size); outline: 0; }
.debt-form-field > input { border-left: 1px solid var(--line); }
.debt-form-field input:focus { box-shadow: none; }
#debtPaymentAmount { color: #163a34; font-size: var(--form-value-size); font-weight: 800; }
.debt-payment-date-control, .debt-payment-bank-control { position: relative; min-width: 0; }
.debt-payment-date-button { width: 100%; height: 100%; min-height: var(--form-row-height); display: grid; grid-template-columns: minmax(0, 1fr) 19px; align-items: center; gap: 9px; padding: 5px 10px; border: 0; border-radius: inherit; background: transparent; color: var(--ink); font: inherit; font-size: var(--form-value-size); font-weight: 650; text-align: left; }
.debt-payment-date-button:focus-visible, .debt-payment-date-button[aria-expanded="true"] { outline: 0; box-shadow: none; }
.debt-payment-date-button svg { width: 18px; height: 18px; fill: none; stroke: var(--brand-dark); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.debt-payment-date-picker { position: fixed; z-index: 20; top: 0; left: 0; width: 300px; overflow-y: auto; visibility: hidden; padding: 10px; border: 1px solid #b7cfca; border-radius: 13px; background: var(--surface); box-shadow: 0 14px 34px rgba(29, 54, 49, .22); }
.debt-payment-date-picker.is-positioned, .debt-payment-bank-picker.is-positioned { visibility: visible; }
.debt-payment-picker-heading { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 7px; margin-bottom: 7px; text-align: center; }
.debt-payment-picker-heading button { height: 34px; padding: 0; border: 0; border-radius: 8px; background: #edf4f2; color: var(--brand-dark); font-size: 23px; line-height: 1; }
.debt-payment-picker-heading strong { color: #253a35; font-size: 14px; font-weight: 750; }
.debt-payment-weekdays, .debt-payment-day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.debt-payment-weekdays { margin-bottom: 4px; color: #647771; font-size: 9px; font-weight: 750; text-align: center; }
.debt-payment-weekdays span { padding: 3px 0; }
.debt-payment-day-grid button, .debt-payment-day-grid span { min-height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 650; }
.debt-payment-day-grid button.is-selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); font-weight: 800; }
.debt-payment-day-grid button.is-today:not(.is-selected) { border-color: #8abdb6; }
.debt-payment-day-grid button:disabled { color: #b5bfbd; cursor: default; }
.debt-payment-today { width: 100%; min-height: 34px; margin-top: 7px; border: 0; border-radius: 8px; background: #e7f2f0; color: var(--brand-dark); font-size: 11px; font-weight: 800; }
.debt-payment-bank-control > input { padding-right: 46px; cursor: pointer; }
.debt-payment-bank-control.has-type-icon > input { padding-left: 45px; }
.debt-payment-bank-type-icon { position: absolute; z-index: 2; top: 50%; left: 11px; width: 25px; height: 25px; display: grid; place-items: center; transform: translateY(-50%); border-radius: 8px; background: #e5f3f0; color: var(--brand-dark); pointer-events: none; }
.debt-payment-bank-type-icon.is-company { background: #fff0cf; color: #8a5b00; }
.debt-payment-bank-type-icon.is-cash { background: #edf2f0; color: #506963; }
.debt-payment-bank-type-icon svg, .debt-payment-bank-option-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.debt-payment-bank-button { position: absolute; z-index: 2; top: 3px; right: 4px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0 2px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); }
.debt-payment-bank-button:hover, .debt-payment-bank-button:focus-visible { background: var(--brand-light); color: var(--brand-dark); outline: 0; }
.debt-payment-bank-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.debt-payment-bank-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.debt-payment-bank-picker { position: fixed; z-index: 18; top: 0; left: 0; width: 320px; overflow-y: auto; visibility: hidden; padding: 5px; border: 1px solid #c8d9d5; border-radius: 11px; background: var(--surface); box-shadow: 0 12px 28px rgba(29, 54, 49, .16); }
.debt-payment-bank-option { width: 100%; min-height: 40px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; text-align: left; }
.debt-payment-bank-option-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #e5f3f0; color: var(--brand-dark); }
.debt-payment-bank-option-icon.is-company { background: #fff0cf; color: #8a5b00; }
.debt-payment-bank-option-icon.is-cash { background: #edf2f0; color: #506963; }
.debt-payment-bank-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-payment-bank-option > small { padding: 3px 6px; border-radius: 6px; background: #fff0cf; color: #8a5b00; font-size: 9px; font-weight: 800; }
.debt-payment-bank-option:hover, .debt-payment-bank-option:focus-visible { background: #f0f6f4; outline: 0; }
.debt-payment-bank-option.is-selected { background: var(--brand-light); color: var(--brand-dark); font-weight: 800; }
.debt-payment-body > .debt-proof-group { flex: 1 0 auto; display: flex; flex-direction: column; }
.debt-proof-heading { display: flex; align-items: center; gap: 2px; }
.debt-proof-field { position: relative; width: calc(100% - 12px); min-height: 220px; height: auto; flex: 1; margin: 4px 6px; }
#debtChooseProof { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; border: 1.75px dashed #579b91; border-radius: 14px; background: #edf7f5; color: var(--brand-dark); text-align: center; transition: background-color .16s ease, box-shadow .16s ease; }
.debt-proof-paste-target { position: absolute; inset: 0; z-index: 1; overflow: hidden; padding: 14px; color: transparent; caret-color: transparent; outline: 0; cursor: text; }
.debt-proof-paste-target img { display: none; }
#debtChooseProof:focus-within {  outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
#debtChooseProof > svg, #debtChooseProof > span { position: relative; z-index: 2; pointer-events: none; }
#debtChooseProof > svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#debtChooseProof > span { display: grid; gap: 5px; }
#debtChooseProof strong { font-size: 13px; font-weight: 800; }
#debtChooseProof small { color: #58716c; font-size: 10.5px; font-weight: 600; line-height: 1.35; }
.debt-payment-card.is-proof-drop-target { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15, 118, 110, .14), 0 18px 44px rgba(24, 58, 52, .22); }
.debt-payment-card.is-proof-drop-target #debtChooseProof { border-style: solid; background: #d7efea; }
.debt-proof-preview { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 6px; border: 1.75px dashed #579b91; border-radius: 14px; background: #edf7f5; transition: background-color .16s ease, box-shadow .16s ease; }
.debt-proof-field > #debtChooseProof, .debt-proof-field > .debt-proof-preview { position: absolute; inset: 0; }
.debt-proof-preview:focus-within {  outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
.debt-proof-preview img { width: 100%; height: 100%; display: block; border-radius: 8px; object-fit: contain; cursor: zoom-in; }
.debt-proof-preview img:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.debt-proof-preview button { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: rgba(23,33,31,.78); color: #fff; font-size: 20px; }
.debt-payment-card .confirm-actions { flex: 0 0 auto; margin-top: auto; padding-top: 16px; }
.debt-receipt-card { width: min(94vw, 500px); max-height: 92vh; overflow: auto; }
.debt-receipt-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.debt-receipt-heading button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: #edf2f0; color: var(--ink); font-size: 21px; }
.debt-receipt-card > img { width: 100%; max-height: 75vh; display: block; border-radius: 10px; object-fit: contain; }
.debt-receipt-modal.is-proof-preview { padding: 0; }
.debt-receipt-modal.is-proof-preview .debt-receipt-card { width: 100%; max-width: var(--page-max-width); height: 100vh; height: 100dvh; max-height: none; display: flex; flex-direction: column; padding: calc(12px + var(--safe-top)) 10px calc(10px + var(--safe-bottom)); border-radius: 0; background: #17211f; }
.debt-receipt-modal.is-proof-preview .debt-receipt-heading { flex: 0 0 auto; margin-bottom: 8px; color: #fff; text-align: left; }
.debt-receipt-modal.is-proof-preview .debt-receipt-heading button { background: rgba(255,255,255,.14); color: #fff; }
.debt-receipt-modal.is-proof-preview .debt-receipt-card > img { width: 100%; min-height: 0; max-height: none; flex: 1; border-radius: 0; object-fit: contain; }
.sheet-card.history-sheet.debt-image-preview-card { gap: 8px; background: var(--canvas); text-align: left; }
.debt-image-preview-heading { padding-right: 42px; }
.debt-image-preview-heading h2 { margin: 0; font-size: 17px; }
.debt-image-preview-scroll { min-height: 0; flex: 1; overflow: auto; border: 1px solid #ccd9d6; border-radius: 10px; background: #e9efed; }
.debt-image-preview-scroll img { width: 100%; height: auto; display: block; -webkit-touch-callout: default; user-select: auto; }
.debt-image-preview-card > .history-loading { min-height: 0; flex: 1; }
.debt-image-actions { width: 70%; flex: 0 0 auto; align-self: center; display: grid; gap: 6px; }
.debt-image-actions > .debt-image-share { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; box-shadow: 0 3px 8px rgba(52, 130, 123, .16); }
.debt-image-copy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.debt-image-copy { min-width: 0; min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border-radius: 8px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.debt-image-actions svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 370px) {
  .debt-image-actions { width: 82%; }
  .debt-image-copy { font-size: 10.5px; }
}

.overview-sheet { gap: 0; }
.overview-heading { min-height: 50px; padding-right: 192px; }
.overview-heading > div { min-width: 0; }
.overview-activity-button { position: absolute; top: calc(12px + var(--safe-top)); right: 54px; width: 42px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #86b9b2; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 118, 110, .1); }
.overview-activity-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.overview-activity-button:not(:disabled):active { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; opacity: 1; }
.overview-alias-button { position: absolute; top: calc(12px + var(--safe-top)); right: 100px; width: 42px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #86b9b2; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 118, 110, .1); }
.overview-alias-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.overview-alias-button:not(:disabled):active { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; opacity: 1; }
.overview-telegram-settings-button { position: absolute; top: calc(12px + var(--safe-top)); right: 146px; width: 42px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #86b9b2; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 118, 110, .1); }
.overview-telegram-settings-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.overview-telegram-settings-button:not(:disabled):active { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; opacity: 1; }
.overview-filter-row { position: relative; z-index: 4; flex: 0 0 auto; padding: 10px 1px 5px; background: var(--canvas); }
.overview-month-control { position: relative; width: 100%; }
.overview-month-button { width: 100%; min-height: 44px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid #9dbfba; border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; }
.overview-month-button[aria-expanded="true"] { border-color: var(--brand); background: #f5fbf9; }
.overview-month-button svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.overview-month-calendar { width: 20px; height: 20px; color: var(--brand-dark); }
.overview-month-chevron { width: 18px; height: 18px; color: #5e716c; transition: transform .16s ease; }
.overview-month-button[aria-expanded="true"] .overview-month-chevron { transform: rotate(180deg); }
.overview-month-picker { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; width: min(310px, calc(100vw - 30px)); padding: 11px; border: 1px solid #9dbfba; border-radius: 14px; background: var(--surface); box-shadow: 0 16px 36px rgba(29, 54, 49, .2); }
.overview-month-picker-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; align-items: center; margin-bottom: 9px; text-align: center; }
.overview-month-picker-heading button { height: 36px; padding: 0; border: 0; border-radius: 9px; background: #edf4f2; color: var(--brand-dark); font-size: 25px; line-height: 1; }
.overview-month-picker-heading strong { color: #253a35; font-size: 15px; font-weight: 600; }
.overview-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.overview-month-grid button { min-height: 39px; padding: 5px 3px; border: 1px solid var(--line); border-radius: 9px; background: #f7faf9; color: var(--ink); font-size: 13px; font-weight: 500; }
.overview-month-grid button.is-selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); font-weight: 650; }
.overview-month-grid button.is-current:not(.is-selected) { border-color: #68aaa1; }
.overview-current-month { width: 100%; min-height: 39px; margin-top: 9px; border: 0; border-radius: 9px; background: #e7f2f0; color: var(--brand-dark); font-size: 13px; font-weight: 600; }
.overview-loading { min-height: 0; flex: 1; }
.overview-content { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 1px 8px; }
.overview-error { min-height: 0; flex: 1; place-content: center; justify-items: center; gap: 7px; padding: 30px 18px; text-align: center; }
.overview-error:not(.hidden) { display: grid; }
.overview-error strong { color: var(--ink); font-size: 14px; }
.overview-error span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.overview-error button { min-height: 36px; margin-top: 6px; padding: 0 18px; border: 1px solid #65a79e; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); font-size: 11px; font-weight: 800; }
.overview-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.overview-kpi { position: relative; min-width: 0; min-height: 105px; display: grid; align-content: start; gap: 4px; overflow: hidden; padding: 9px 10px; border: 1px solid #c7d7d3; border-radius: 14px; background: var(--surface); box-shadow: 0 5px 16px rgba(38, 66, 60, .07); }
.overview-kpi::after { content: ""; position: absolute; z-index: 0; top: -27px; right: -25px; width: 86px; height: 86px; border-radius: 50%; opacity: .58; pointer-events: none; }
.overview-kpi-revenue::after { background: #c4ebe4; }
.overview-kpi-profit::after { background: #ffebbd; }
.overview-kpi-debt::after { background: #ffd6d0; }
.overview-kpi-stock::after { background: #dbe6fb; }
.overview-kpi-label { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.overview-kpi-label small { min-width: 0; color: #41534e; font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.overview-kpi-icon { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #087468; background: #dff2ef; }
.overview-kpi-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.overview-kpi-profit .overview-kpi-icon { color: #8d5c08; background: #fff0cf; }
.overview-kpi-debt .overview-kpi-icon { color: #a6382f; background: #ffebe8; }
.overview-kpi-stock .overview-kpi-icon { color: #365f8f; background: #e8eef9; }
.overview-kpi > strong { position: relative; z-index: 1; max-width: 100%; overflow: hidden; color: #172925; font-size: clamp(21px, 5.7vw, 26px); font-weight: 750; line-height: 1.08; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.overview-change { position: relative; z-index: 1; min-width: 0; margin-top: 2px; color: #53645f; font-size: 11.5px; font-weight: 550; line-height: 1.3; }
.overview-change.is-up { color: #087354; }
.overview-change.is-down { color: var(--danger); }
.overview-change.is-neutral { color: #71807c; }
.overview-kpi-profit.is-negative > strong { color: var(--danger); }
.overview-stat-strip { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 9px 0; overflow: hidden; border: 1px solid #c8d8d4; border-radius: 13px; background: var(--surface); box-shadow: 0 3px 10px rgba(38, 66, 60, .04); }
.overview-stat-strip span { min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 10px 5px; }
.overview-stat-strip span + span { border-left: 1px solid #d2ddda; }
.overview-stat-strip small { color: #52635e; font-size: 11px; font-weight: 550; text-align: center; }
.overview-stat-strip strong { max-width: 100%; overflow: hidden; color: var(--brand-dark); font-size: 17px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.overview-card { min-width: 0; padding: 13px; border: 1px solid #c5d6d2; border-radius: 14px; background: var(--surface); box-shadow: 0 4px 14px rgba(38, 66, 60, .05); }
.overview-section-heading { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; margin-bottom: var(--section-content-gap); }
.overview-section-heading > div { min-width: 0; }
.overview-section-heading h3 { margin: 0; color: #1f332e; font-size: 15.5px; font-weight: 650; line-height: 1.25; }
.overview-metric-switch { flex: 0 0 auto; display: flex; gap: 2px; padding: 2px; border: 1px solid #d2dfdc; border-radius: 10px; background: #edf4f2; }
.overview-metric-switch button { min-height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #52635e; font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.overview-metric-switch button.is-active { background: var(--surface); color: var(--brand-dark); font-weight: 650; box-shadow: 0 1px 4px rgba(31, 72, 65, .12); }
#overviewProductsProfit.is-active, #overviewCustomersProfit.is-active { color: var(--profit-ink); }
.overview-metric-switch button:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 1px; }
.overview-legend { flex: 0 0 auto; display: grid; gap: 5px; color: #52635e; font-size: 11px; font-weight: 500; }
.overview-legend span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.overview-legend i { width: 9px; height: 9px; border-radius: 2px; }
.overview-legend .is-revenue { background: #3f9188; }
.overview-legend .is-profit { background: #e5ae45; }
.overview-trend-chart { height: 244px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; align-items: end; padding: 10px 2px 0; border-top: 1px solid #e7efed; background-image: linear-gradient(to top, transparent 32%, #e9f0ee 33%, transparent 34%, transparent 65%, #e9f0ee 66%, transparent 67%); }
.overview-trend-column { min-width: 0; height: 234px; display: grid; grid-template-rows: 23px 184px 20px; gap: 3px; align-items: end; }
.overview-trend-value { overflow: hidden; color: #40534e; font-size: 10px; font-weight: 550; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.overview-trend-bars { height: 184px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.overview-trend-bar { width: min(15px, 38%); min-height: 3px; border-radius: 5px 5px 1px 1px; box-shadow: 0 2px 5px rgba(40, 81, 74, .11); }
.overview-trend-bar.is-revenue { background: linear-gradient(to top, #24796f, #64aea4); }
.overview-trend-bar.is-profit { background: linear-gradient(to top, #be7d13, #edbd62); }
.overview-trend-bar.is-profit.is-negative { background: linear-gradient(to top, #a72f26, #e27c72); }
.overview-trend-label { color: #344944; font-size: 11px; font-weight: 550; line-height: 1; text-align: center; white-space: nowrap; }
.overview-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 9px; }
.overview-source-list { display: grid; gap: 9px; }
.overview-ranking-list { display: grid; gap: 0; }
.overview-source-item { display: grid; gap: 5px; }
.overview-source-summary { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.overview-source-summary strong { color: #263632; font-size: 13px; font-weight: 600; }
.overview-source-summary span { min-width: 0; overflow: hidden; color: #40534e; font-size: 11.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.overview-source-track { height: 8px; overflow: hidden; border-radius: 999px; background: #eaf0ee; }
.overview-source-fill { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: #49a094; }
.overview-source-item.is-xt .overview-source-fill { background: #e4aa3e; }
.overview-ranking-item { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 6px; }
.overview-ranking-item.can-open-detail { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; appearance: none; }
.overview-ranking-item.can-open-detail:focus-visible { outline: 0; background: #f2f8f6; box-shadow: none; }
.overview-ranking-item + .overview-ranking-item { border-top: 1px solid #d8e3e0; }
.overview-ranking-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #e5f2ef; color: var(--brand-dark); font-size: 10.5px; font-weight: 700; text-align: center; }
.overview-ranking-copy { min-width: 0; display: grid; gap: 2px; }
.overview-ranking-copy strong { color: #243833; font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; white-space: normal; }
.overview-ranking-copy > span { overflow: hidden; color: #53645f; font-size: 11.5px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.overview-ranking-value { color: var(--brand-dark); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.overview-ranking-list.is-profit .overview-ranking-value { color: var(--profit-ink); }
.overview-ranking-list.is-profit .overview-ranking-value.is-negative { color: var(--danger); }
.overview-ranking-more { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 -1px; padding: 0 12px; border: 0; border-radius: 9px; background: #e6f2ef; color: var(--brand-dark); font-size: 11.5px; font-weight: 650; line-height: 1; }
.overview-ranking-more::after { width: 6px; height: 6px; content: ""; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); transition: transform .16s ease; }
.overview-ranking-more[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.overview-ranking-more:not(:disabled):active { background: #d3e9e4; }
.overview-ranking-more:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
.overview-customer-card .overview-ranking-number { background: #e9eef8; color: #365f8f; }
.overview-debt-card .overview-ranking-number { background: #ffebe8; color: #a6382f; }
.overview-debt-card .overview-ranking-value { color: #a6382f; }
.overview-report-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.overview-report-button { min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid #76b3aa; border-radius: 10px; background: #f7fbfa; color: var(--brand-dark); font-size: 12px; font-weight: 650; white-space: nowrap; }
.overview-report-button svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.overview-report-button span { min-width: 0; }
.overview-report-button:not(:disabled):active { background: #e5f2ef; }
.overview-report-button:disabled { cursor: default; opacity: .65; }
.overview-empty-row { padding: 10px 4px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }

#activityModal { z-index: 59; }
.alias-sheet { gap: 0; }
.alias-heading > div { min-width: 0; padding-right: 44px; }
.alias-table-shell { min-height: 0; flex: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; margin-top: 10px; overflow: hidden; border: 1px solid #bfd0cc; border-radius: 12px; background: var(--surface); }
.alias-table-header, .alias-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1.35fr) 30px; align-items: center; }
.alias-table-header { min-height: 32px; border-bottom: 1px solid #cad8d5; background: #f2f6f5; color: #586a65; font-size: 10.5px; font-weight: 650; }
.alias-table-header span { padding: 0 9px; }
.alias-table-header span + span { border-left: 1px solid #d5e1de; }
.alias-scroll-area { position: relative; min-height: 0; overflow: hidden; overscroll-behavior: contain; touch-action: pan-y; }
.alias-list { width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.alias-row { min-height: 34px; border-bottom: 1px solid #d8e3e0; }
.alias-index { height: 100%; display: grid; place-items: center; border-right: 1px solid #e0e8e6; color: #667772; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.alias-cell { min-width: 0; height: 100%; display: flex; align-items: center; padding: 2px 5px; }
.alias-cell + .alias-cell { border-left: 1px solid #e0e8e6; }
.alias-cell input { width: 100%; min-width: 0; height: 26px; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.15; }
.alias-cell input:focus { outline: 0; border-color: #76aaa3; background: #f7fbfa; }
.alias-delete { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #a84b43; font-size: 19px; font-weight: 400; line-height: 1; }
.alias-delete:not(:disabled):active { background: #ffebe8; }
.alias-add { width: auto; min-height: 30px; margin: 6px 7px; padding: 0 12px; border: 0; border-radius: 9px; background: #e6f2ef; color: var(--brand-dark); font-size: 11.5px; font-weight: 650; }
.alias-add:not(:disabled):active { background: #d3e9e4; }
.alias-empty { position: absolute; inset: 0; min-height: 80px; place-content: center; color: var(--muted); font-size: 12px; text-align: center; }
.alias-empty:not(.hidden) { display: grid; }
.alias-footer { flex: 0 0 auto; display: flex; justify-content: flex-end; padding-top: 10px; }
.alias-footer .primary-button { min-width: 150px; min-height: 42px; padding: 0 20px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.telegram-settings-sheet { gap: 0; }
.telegram-settings-form { min-height: 0; flex: 1; flex-direction: column; padding-top: 12px; overflow: hidden; }
.telegram-settings-form:not(.hidden) { display: flex; }
.telegram-settings-scroll { min-height: 0; flex: 1; display: grid; align-content: start; gap: var(--section-gap); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
.telegram-settings-title-row { align-items: center !important; gap: 4px !important; padding-right: 0 !important; }
.telegram-settings-group { min-width: 0; display: grid; gap: var(--section-content-gap); }
.telegram-settings-group-body { min-width: 0; display: grid; gap: 6px; }
.telegram-settings-section-title { margin: 0 3px; color: var(--brand-dark); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.telegram-settings-field { position: relative; min-width: 0; display: grid; grid-template-columns: var(--form-label-width) minmax(0, 1fr); border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); }
.telegram-settings-field-heading { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 3px; min-width: 0; min-height: var(--form-row-height); padding: 3px 8px; background: #f5f8f7; color: var(--ink); font-size: var(--form-label-size); font-weight: var(--form-label-weight); line-height: 1.3; }
.telegram-settings-field-heading > span { min-width: 0; }
.telegram-settings-field-heading { border-radius: 9px 0 0 9px; }
.telegram-settings-field > .workflow-assignment-control, .telegram-settings-field > input { grid-column: 2; grid-row: 1; }
.telegram-settings-field > .workflow-assignment-control { display: grid; }
.telegram-settings-title-row > .information-help-button { flex-shrink: 0; }
.information-help-button { flex: 0 0 28px; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--brand-dark); cursor: pointer; }
.information-help-button > span { width: 16px; height: 16px; display: grid; place-items: center; border: 1.3px solid currentColor; border-radius: 50%; background: var(--surface); font-family: Georgia, serif; font-size: 12px; font-weight: 700; line-height: 1; }
.information-help-button:hover, .information-help-button[aria-expanded="true"] { background: var(--brand-light); color: var(--brand-dark); }
.information-help-button:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: 1px; }
.information-help-description { display: none; }
.information-help-popover { position: fixed; z-index: 90; top: 0; left: 0; width: 320px; margin: 0; border: 1px solid #9fbfb8; border-radius: 12px; background: #fff; color: #354e48; box-shadow: 0 6px 24px rgba(29, 54, 49, .2); font-size: 12px; font-weight: 400; line-height: 1.5; visibility: hidden; opacity: 0; transition: opacity .12s ease; }
.information-help-popover.is-visible { visibility: visible; opacity: 1; }
.information-help-content { max-height: var(--help-max-height, 280px); overflow-y: auto; padding: 12px 14px; border-radius: inherit; }
.information-help-popover::before { content: ""; position: absolute; top: -6px; left: calc(var(--help-arrow-left, 32px) - 5px); width: 10px; height: 10px; border-top: 1px solid #9fbfb8; border-left: 1px solid #9fbfb8; background: #fff; transform: rotate(45deg); }
.information-help-popover[data-side="above"]::before { top: auto; bottom: -6px; border: 0; border-right: 1px solid #9fbfb8; border-bottom: 1px solid #9fbfb8; }
.telegram-settings-field > input, .workflow-assignment-button { width: 100%; min-height: var(--form-row-height); border: 1.5px solid #8ab8b1; border-radius: 10px; background: #fbfcfc; color: var(--ink); font-size: 14px; font-weight: 650; text-align: left; font-variant-numeric: tabular-nums; }
.telegram-settings-field > input { font-size: var(--form-value-size); }
.telegram-settings-field > input:focus, .workflow-assignment-button:focus-visible, .workflow-assignment-button[aria-expanded="true"] { border-color: var(--brand); outline: 0; box-shadow: none; }
.telegram-settings-field > input:disabled, .workflow-assignment-button:disabled { border-color: #d7dfdd; background: #eef2f1; color: #7d8b87; opacity: 1; }
.telegram-settings-field > input, .telegram-settings-field .workflow-assignment-button { min-width: 0; min-height: var(--form-row-height); height: 100%; padding: 5px 10px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
.telegram-settings-field > input { font-size: var(--form-value-size); }
.telegram-settings-field > input:focus, .telegram-settings-field .workflow-assignment-button:focus-visible, .telegram-settings-field .workflow-assignment-button[aria-expanded="true"] { border-left-color: var(--line); box-shadow: none; }
.telegram-settings-field > input, .telegram-settings-field .workflow-assignment-button { border-radius: 0 9px 9px 0; }
.telegram-settings-field > input.text-input { min-height: var(--form-row-height); padding: 5px 10px; border: 0; border-left: 1px solid var(--line); border-radius: 0 9px 9px 0; background: transparent; font-size: var(--form-value-size); text-align: left; }
/* Match the inner radius to the 1px frame without clipping picker popovers. */
.telegram-settings-field > .workflow-assignment-control,
.telegram-settings-field .telegram-settings-switch-control { border-radius: 0 9px 9px 0; }
.warehouse-slip-options { grid-column: 2; grid-row: 1; display: grid; gap: 2px; padding: 4px 9px; border-left: 1px solid var(--line); }
.warehouse-slip-triggers label { display: flex; align-items: center; gap: 7px; min-height: 32px; color: var(--ink); font-size: 12px; cursor: pointer; }
.warehouse-slip-triggers input { width: 19px; height: 19px; margin: 0; accent-color: var(--brand); }
.warehouse-slip-triggers input { flex: 0 0 19px; }
.telegram-settings-history-toggle { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: var(--form-label-width) minmax(0, 1fr); }
.telegram-settings-switch-control { position: relative; min-width: 0; min-height: var(--form-row-height); display: grid; place-items: center start; padding: 0 12px; border-left: 1px solid var(--line); pointer-events: none; }
/* Only the native input over the visible switch receives pointer clicks. */
.telegram-settings-history-toggle input { grid-area: 1 / 1; width: 44px; height: 27px; margin: 0; opacity: 0; cursor: pointer; pointer-events: auto; }
.telegram-settings-switch { grid-area: 1 / 1; position: relative; width: 44px; height: 27px; border-radius: 999px; background: #b8c6c2; pointer-events: none; transition: background .18s ease; }
.telegram-settings-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s ease; }
.telegram-settings-history-toggle input:checked + .telegram-settings-switch { background: var(--brand); }
.telegram-settings-history-toggle input:checked + .telegram-settings-switch::after { transform: translateX(17px); }
.telegram-settings-history-toggle input:focus-visible + .telegram-settings-switch { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
.telegram-settings-history-toggle input:disabled + .telegram-settings-switch { opacity: .55; }
.workflow-assignment-control { position: relative; min-width: 0; }
.workflow-assignment-button { display: grid; grid-template-columns: minmax(0, 1fr) 17px; align-items: center; gap: 10px; padding: 0 14px 0 12px; }
.workflow-assignment-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-assignment-button svg { width: 17px; height: 17px; fill: none; stroke: #3f5752; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.workflow-assignment-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.workflow-assignment-picker { position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; left: 0; max-height: min(240px, 38dvh); overflow-y: auto; padding: 5px; border: 1px solid #b8cfca; border-radius: 11px; background: var(--surface); box-shadow: 0 12px 28px rgba(29, 54, 49, .16); }
.workflow-assignment-picker.opens-up { top: auto; bottom: calc(100% + 6px); }
.workflow-assignment-option { width: 100%; min-height: 36px; display: flex; align-items: center; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 650; text-align: left; }
.workflow-assignment-option:hover, .workflow-assignment-option:focus-visible { background: #f0f6f4; outline: 0; }
.workflow-assignment-option[aria-selected="true"] { background: var(--brand-light); color: var(--brand-dark); font-weight: 800; }
.telegram-settings-actions { flex: 0 0 auto; margin-top: 0; padding-top: 12px; }
.debt-bank-table-shell { margin-top: 10px; }
.debt-bank-table-header, .debt-bank-account-row { display: grid; grid-template-columns: 30px minmax(80px, 1.2fr) minmax(76px, 1fr) 48px 26px; align-items: center; }
.debt-bank-table-header { min-height: 34px; border-bottom: 1px solid #cad8d5; background: #f2f6f5; color: #40534e; font-size: 10px; font-weight: 750; }
.debt-bank-table-header span { min-width: 0; padding: 0 5px; text-align: left; }
.debt-bank-table-header span:first-child, .debt-bank-table-header span:nth-child(4) { text-align: center; }
.debt-bank-table-header span + span { border-left: 1px solid #d5e1de; }
.debt-bank-account-row { min-height: 40px; border-bottom: 1px solid #d8e3e0; }
.debt-bank-account-row .alias-index { font-size: 10px; }
.debt-bank-account-cell { min-width: 0; height: 100%; display: flex; align-items: center; padding: 3px 4px; border-left: 1px solid #e0e8e6; }
.debt-bank-account-cell input[type="text"] { width: 100%; min-width: 0; height: 30px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 550; line-height: 1.15; }
.debt-bank-account-cell input[type="text"]:focus { outline: 0; border-color: #76aaa3; background: #f7fbfa; }
.debt-bank-company-cell { justify-content: center; padding: 0; }
.debt-bank-company-check { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #78908b; }
.debt-bank-company-check::before { width: 15px; height: 15px; display: grid; place-items: center; content: ""; border: 1.5px solid #8ba29d; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 900; line-height: 1; }
.debt-bank-company-check[aria-checked="true"] { color: #fff; }
.debt-bank-company-check[aria-checked="true"]::before { content: "✓"; border-color: var(--brand); background: var(--brand); }
.debt-bank-account-row .alias-delete { width: 26px; height: 26px; }
.activity-sheet { gap: 0; }
.activity-heading > div { min-width: 0; padding-right: 44px; }
.activity-mode-button { position: absolute; top: calc(12px + var(--safe-top)); right: 54px; width: 40px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #86b9b2; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 118, 110, .1); }
.activity-mode-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.activity-mode-button .activity-leader-crown { fill: currentColor; stroke-width: 1.2; }
.activity-mode-button[aria-pressed="true"] { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; }
.activity-mode-button:not(:disabled):active { opacity: .78; }
.activity-list { min-height: 0; flex: 1; align-content: start; margin-top: 11px; overflow-y: auto; border: 1px solid #bfd0cc; border-radius: 14px; background: var(--surface); }
.activity-list:not(.hidden) { display: grid; }
.activity-list.is-empty { place-items: center; }
.activity-day-group { min-width: 0; display: grid; align-content: start; }
.activity-day-heading { min-height: 30px; display: flex; align-items: center; margin: 0; padding: 8px 10px 7px; border-bottom: 1px solid #cad8d5; background: #f2f6f5; color: #657571; font-size: 10.5px; font-weight: 650; line-height: 1.2; letter-spacing: .01em; }
.activity-day-events { display: grid; }
.activity-item { width: 100%; min-width: 0; min-height: 43px; display: grid; grid-template-columns: 51px minmax(72px, .65fr) minmax(120px, 1.35fr); align-items: center; gap: 7px; padding: 8px 9px; border: 0; border-bottom: 1px solid #d5e1de; border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; text-align: left; }
.activity-item:is(button):focus-visible { position: relative; z-index: 1; outline: var(--focus-width) solid var(--brand); outline-offset: -1px; }
.activity-day-group:last-child .activity-item:last-child { border-bottom: 0; }
.activity-item time { color: var(--brand-dark); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.activity-name { min-width: 0; overflow: hidden; color: #253632; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.activity-action { min-width: 0; display: block; color: #17211e; font-size: 12px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; text-align: right; white-space: normal; }
.activity-action .source-pill { min-height: 19px; margin-right: 5px; padding: 2px 6px; vertical-align: 1px; }
.activity-empty { align-self: center; padding: 28px 18px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.activity-sheet > .overview-error { min-height: 0; flex: 1; }
@media (max-width: 360px) {
  .activity-item { grid-template-columns: 46px minmax(64px, .62fr) minmax(100px, 1.38fr); gap: 5px; padding-right: 7px; padding-left: 7px; }
  .activity-item time { font-size: 9px; }
  .activity-action { font-size: 11px; }
  .activity-name { font-size: 10px; }
  .overview-product-card .overview-ranking-item { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  .overview-product-card .overview-ranking-number { grid-row: 1 / span 2; align-self: center; }
  .overview-product-card .overview-ranking-copy { grid-column: 2; grid-row: 1; }
  .overview-product-card .overview-ranking-value { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 2px; }
  .overview-report-list { grid-template-columns: minmax(0, 1fr); }
  .overview-report-button { white-space: normal; line-height: 1.25; }
}
@media (min-width: 560px) {
  .overview-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

#productHistoryModal { z-index: 58; }
#productHistoryModal.is-over-history-detail { z-index: 59; }
.product-history-top { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: start; gap: 8px; margin-bottom: 8px; }
.product-history-top .close-button { position: static; top: auto; right: auto; }
.product-history-header-actions { display: grid; gap: 7px; }
.product-history-manage { width: 32px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #78b7ad; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 118, 110, .1); }
.product-history-manage svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.product-history-manage:disabled { cursor: wait; opacity: .6; }
.product-history-overview { min-width: 0; padding: 11px 12px; border: 1px solid #d3dfdc; border-radius: 14px; background: var(--surface); }
.product-history-name { margin: 0 0 5px; font-size: 13px; line-height: 1.22; overflow-wrap: anywhere; }
.product-history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.product-history-actions { min-height: 36px; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 12px; padding: 0 1px; }
.create-product-button { position: absolute; top: calc(12px + var(--safe-top)); right: 54px; height: 36px; padding: 0 12px; border: 1px solid #5faaa0; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); font-size: 11px; font-weight: 800; white-space: nowrap; }
.stock-in-button { min-height: 36px; padding: 0 12px; border: 1px solid #5faaa0; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); font-size: 11px; font-weight: 800; white-space: nowrap; }
.stock-out-button { min-height: 36px; padding: 0 12px; border: 1px solid #e1a49d; border-radius: 10px; background: var(--danger-light); color: var(--danger); font-size: 11px; font-weight: 800; white-space: nowrap; }
.product-history-list { min-height: 0; max-height: calc(100dvh - 215px); flex: 0 1 auto; overflow-y: auto; border: 1px solid #c5d5d1; border-radius: 13px; background: var(--surface); }
.product-history-columns, .product-history-row { grid-template-columns: 82px minmax(64px, 1fr) 70px 64px; gap: 5px; }
.product-history-columns { position: sticky; z-index: 1; top: 0; display: grid; align-items: center; padding: 9px 10px; border-bottom: 1px solid #d5e0dd; background: #f4f8f7; color: #41534f; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.product-history-columns span:nth-child(n+3) { text-align: right; }
.product-history-row { width: 100%; min-width: 0; display: grid; align-items: center; padding: 11px 10px; border: 0; border-bottom: 1px solid #d5e0dd; background: var(--surface); color: var(--ink); font: inherit; text-align: left; }
.product-history-row:last-child { border-bottom: 0; }
.product-history-row.is-stock-in,
.product-history-row.is-opening-balance { background: #d9f3ea; }
.product-history-row.is-stock-out { background: #ffdfda; }
.product-history-row.is-cost-update { background: #ffecad; }
.product-history-row.is-waiting-sale { background: #fffaf0; }
.product-history-row .product-history-waiting { color: #8a6208; font-size: 12px; font-weight: 600; white-space: nowrap; }
.product-history-row.is-waiting-sale .product-history-quantity { color: var(--danger); }
.product-history-row time, .product-history-row span { min-width: 0; overflow: hidden; color: #3e504c; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.product-history-row time { color: #2f423e; font-weight: 600; }
.product-history-row time.is-unknown-time { color: #8a9793; font-weight: 400; }
.product-history-row .product-history-customer { color: #172925; font-size: 13px; font-weight: 650; }
.product-history-row.is-stock-in .product-history-customer,
.product-history-row.is-opening-balance .product-history-customer { color: #087354; font-weight: 800; }
.product-history-row.is-stock-out .product-history-customer { color: #b42318; font-weight: 800; }
.product-history-quantity, .product-history-price { justify-self: end; white-space: nowrap; }
.product-history-quantity { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.product-history-stock-after { color: #586965; font-size: 11.5px; font-weight: 650; }
.product-history-row .product-history-price { color: #172925; font-size: 12.5px; font-weight: 700; text-align: right; }
.product-history-row.is-stock-in .product-history-quantity { color: #087f5b; }
.product-history-row.is-opening-balance .product-history-quantity { color: #087f5b; }
.product-history-row.is-stock-out .product-history-quantity,
.product-history-row.is-sale .product-history-quantity { color: var(--danger); }
.product-history-row.is-cost-update .product-history-customer,
.product-history-row.is-cost-update .product-history-price { color: #8a5a08; }
.product-history-row.is-cost-update .product-history-customer { font-weight: 800; }
.product-history-row.is-cost-update .product-history-quantity { display: none; }
.product-history-row.is-cost-update .product-history-price { grid-column: 3 / 5; overflow: visible; }
.product-history-row.can-open-order { cursor: pointer; }
.product-history-row.can-open-order:hover { background: #f2f8f6; }
.product-history-row.can-open-order:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none; }
.product-history-row.can-open-order:active { background: var(--brand-light); }
.product-history-empty { display: grid; min-height: 66px; place-items: center; padding: 16px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.product-history-empty.is-error { color: var(--danger); }

.owner-sheet, .owner-content, .owner-section, .owner-list, .owner-card { min-width: 0; width: 100%; }
.owner-sheet { gap: 0; }
.owner-panel-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; margin: 10px 0 12px; }
.owner-invite-create { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid #91bdb7; border-radius: 11px; background: var(--brand-light); color: var(--brand-dark); font-size: 11px; font-weight: 750; }
.owner-invite-create svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.owner-invite-create:disabled { opacity: .55; }
.owner-content { min-height: 0; flex: 1; overflow-y: auto; padding-bottom: 8px; }
.owner-list { display: grid; gap: 8px; }
.owner-empty { padding: 18px 12px; border: 1px dashed #c6d7d3; border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.5); font-size: 11px; line-height: 1.4; text-align: center; }
.owner-card { display: grid; gap: 9px; overflow: hidden; padding: 11px 12px; border: 1px solid #cbdad7; border-radius: 13px; background: var(--surface); }
.owner-card-main { min-width: 0; display: grid; gap: 3px; }
.owner-card-main strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.owner-card-main span { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.owner-active-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.owner-revoke-button { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #e5a49e; border-radius: 8px; background: var(--danger-light); color: var(--danger); box-shadow: 0 1px 3px rgba(180, 35, 24, .1); transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.owner-revoke-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.owner-revoke-button:disabled { opacity: .35; }
.owner-revoke-button:not(:disabled):active { border-color: #8f1c14; background: #8f1c14; color: #fff; box-shadow: none; }
.history-empty { margin-top: 4px; padding: 46px 20px; border: 1px dashed #c6d7d3; border-radius: 14px; background: rgba(255,255,255,.55); color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
.history-order-edit-content { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.history-order-edit-sheet > .close-button { z-index: 10; }
.history-order-edit-actions { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.history-order-edit-actions button { min-height: 40px; margin: 0; border-radius: 11px; font-size: 13px; font-weight: 650; }
.history-detail-modal { z-index: 58; overflow: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
.sheet-card.cart-sheet.history-detail-sheet { padding-right: 14px; }
.history-detail-sheet > .close-button { z-index: 10; }
.history-detail-loading { position: absolute; z-index: 9; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: var(--canvas); color: var(--muted); text-align: center; animation: history-detail-loading-in .14s ease-out both; }
.history-detail-loading.hidden { display: none; }
.history-detail-loading strong { color: var(--brand-dark); font-size: 14px; }
.history-detail-loading > span:not(.history-spinner) { max-width: 290px; font-size: 12px; line-height: 1.4; }
.history-detail-loading.is-error strong { color: var(--danger); }
.history-detail-loading.is-error > span:not(.history-spinner) { color: var(--danger); }
.history-detail-loading .history-spinner { width: 22px; height: 22px; }
.history-detail-loading .secondary-button { width: auto; min-width: 104px; min-height: 38px; margin-top: 4px; padding: 0 18px; border-radius: 10px; font-size: 12px; font-weight: 750; }
@keyframes history-detail-loading-in { from { opacity: .45; } to { opacity: 1; } }
.history-detail-sheet .cart-customer { margin-right: 39px; }
.history-detail-sheet, .history-detail-sheet .cart-items { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
.history-detail-sheet .cart-columns, .history-detail-sheet .cart-item { grid-template-columns: minmax(120px, 1fr) 60px 98px; }
.history-readonly-item { min-width: 0; max-width: 100%; touch-action: pan-y; }
.history-readonly-item .cart-item-name { cursor: default; touch-action: pan-y; }
.history-readonly-item .cart-item-history { padding-block: 0; }
.history-readonly-item.can-open-product { cursor: pointer; }
.history-readonly-item.can-open-product:focus-within { background: #f2f8f6; }
.history-readonly-item.has-loss { background: var(--history-loss-bg); }
.history-readonly-item.has-loss.can-open-product:focus-within { background: var(--history-loss-hover-bg); }
.history-value { min-width: 0; padding-right: 10px; color: #254c47; font-size: 14px; font-weight: 750; line-height: 1.25; text-align: right; overflow-wrap: anywhere; cursor: default; touch-action: pan-y; }
.history-readonly-item.can-open-product .cart-item-name,
.history-readonly-item.can-open-product .history-value { cursor: pointer; }
.history-detail-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #365f59; font-size: 10.5px; line-height: 1.25; }
.history-detail-meta span { min-width: 0; overflow-wrap: anywhere; }
.history-detail-meta b { color: #174d47; font-weight: 750; }
.primary-button { width: 100%; min-height: 52px; border: 0; border-radius: 15px; background: var(--button-brand); color: #fff; font-weight: 800; margin-top: 17px; box-shadow: 0 8px 18px rgba(52, 130, 123, .2); }
.primary-button:disabled { background: #9eb1ae; box-shadow: none; }
.app-toast { position: fixed; z-index: 120; bottom: calc(76px + var(--safe-bottom)); left: 50%; width: min(calc(100% - 24px), 656px); margin: 0; padding: 10px 12px; border: 1px solid #f2c8c3; border-radius: 11px; background: #fff4f2; color: var(--danger); box-shadow: 0 9px 24px rgba(91, 28, 22, .2); font-size: 12px; line-height: 1.35; pointer-events: none; transform: translateX(-50%); animation: app-toast-in .18s ease-out; }
.app-toast.is-success { border-color: #9ed0c7; background: #e5f6f2; color: #075e57; box-shadow: 0 9px 24px rgba(7, 94, 87, .18); }
.app-toast.is-info { border-color: #e6c987; background: #fff7df; color: #815207; box-shadow: 0 9px 24px rgba(104, 69, 9, .16); }
@keyframes app-toast-in { from { transform: translate(-50%, 7px); } }

.sheet-card.cart-sheet { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: calc(12px + var(--safe-top)) calc(var(--page-gutter) - 7px) calc(12px + var(--safe-bottom)) var(--page-gutter); border-radius: 0; contain: layout paint; }
.history-sheet .close-button, .cart-sheet .close-button { top: calc(12px + var(--safe-top)); }
.cart-customer { min-height: 48px; padding: 9px 12px; border: 1.5px solid var(--customer-panel-border); border-radius: 12px; background: var(--customer-panel-bg); box-shadow: var(--customer-panel-shadow); margin: 0 47px 8px 0; color: #365f59; font-size: 11px; line-height: 1.3; }
.cart-customer strong { display: block; margin-bottom: 2px; color: #075e57; font-size: 13px; font-weight: 750; }
.cart-customer-with-action { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.cart-customer-copy { min-width: 0; overflow-wrap: anywhere; }
.cart-customer-edit { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #bfd4df; border-radius: 11px; background: #e2edf5; color: #285f75; }
.cart-customer-edit:disabled { opacity: .45; }
.cart-customer-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-customer-add { position: absolute; z-index: 9; top: calc(56px + var(--safe-top)); right: 14px; width: 32px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #73b7ad; border-radius: 10px; background: #d8f1ed; color: var(--brand-dark); box-shadow: 0 3px 9px rgba(15, 118, 110, .14); }
.cart-customer-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cart-customer-editor { position: relative; z-index: 8; display: grid; gap: 0; margin: 0 47px 8px 0; padding: 9px 10px 10px; border: 1.5px solid var(--customer-panel-border); border-radius: 12px; background: var(--customer-panel-bg); box-shadow: var(--customer-panel-shadow); }
.cart-customer-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 7px; }
.cart-customer-edit-actions button { width: auto; min-width: 78px; min-height: 32px; padding: 0 14px; border-radius: 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cart-customer-edit-actions button:last-child { min-width: 108px; }
.cart-customer-edit-actions button:first-child { border: 1px solid #c9d5d2; background: #edf2f1; color: var(--ink); }
.cart-customer-edit-actions button:last-child { border: 0; background: var(--button-brand); color: #fff; }
.cart-columns { display: grid; grid-template-columns: minmax(120px, 1fr) 60px 98px 28px; gap: 6px; align-items: center; margin-bottom: 2px; padding: 7px 1px 7px 6px; border: 1px solid var(--line); border-radius: 9px; background: #f3f8f7; color: #31534e; font-size: 11px; font-weight: 750; line-height: 1.2; }
.cart-columns span:nth-child(2), .cart-columns span:nth-child(3) { text-align: center; }
.cart-items-shell { position: relative; min-height: 0; flex: 1; overflow: hidden; }
.cart-items { width: 100%; height: 100%; min-height: 0; display: grid; align-content: start; overflow-y: auto; padding-right: 0; scrollbar-width: none; -ms-overflow-style: none; }
.cart-items::-webkit-scrollbar { display: none; width: 0; height: 0; }
.cart-add-products { width: calc(100% - 12px); min-height: 38px; margin: 6px 6px 5px; padding: 4px 10px; border-width: 1px; border-radius: 9px; font-size: 12px; }
.cart-add-products svg { width: 15px; height: 15px; }
.cart-scroll-hint { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 38px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.97) 70%); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.cart-items-shell.can-scroll-more .cart-scroll-hint { opacity: 1; }
.cart-scroll-hint svg { width: 20px; height: 20px; padding: 3px; border-radius: 999px; background: rgba(7,94,87,.12); stroke: var(--brand-dark); stroke-width: 2.2; fill: none; }
.cart-item { display: grid; grid-template-columns: minmax(120px, 1fr) 60px 98px 28px; gap: 6px; align-items: center; padding: 8px 1px 8px 6px; border-bottom: 1px solid var(--line); scroll-margin-block: 8px; }
.cart-item-name { min-width: 0; cursor: default; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cart-item-name.is-reorderable { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 1px; align-items: center; }
.cart-drag-handle { width: 11px; height: 30px; display: grid; place-items: center; margin-left: -7px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #78948f; cursor: grab; touch-action: none; }
.cart-drag-handle svg { width: 8px; height: 18px; fill: currentColor; pointer-events: none; transform: translateX(-2px); }
.cart-item h3, .cart-item-history { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cart-item-history { width: 100%; min-width: 0; padding: 2px 0; border: 0; border-radius: 5px; background: transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.cart-item-history:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: 1px; }
.cart-item-history:active { color: var(--brand-dark); }
.cart-item-index { margin-right: 5px; font-weight: 800; }
.cart-item-name .source-pill { margin-right: 5px; vertical-align: 1px; }
.cart-item.dragging .cart-drag-handle { cursor: grabbing; color: var(--brand-dark); }
.cart-item.dragging { z-index: 70; border: 1px solid var(--brand); border-radius: 9px; background: var(--brand-light); box-shadow: 0 10px 24px rgba(15, 118, 110, .24); opacity: .96; pointer-events: none; will-change: transform; }
.cart-field { min-width: 0; height: 35px; display: grid; place-items: center; padding: 3px 6px; border: 1px solid #53615e; border-radius: 7px; background: #fbfcfc; }
.cart-field:focus-within { border-color: var(--focus-color); outline: none; box-shadow: inset 0 0 0 var(--focus-inset) var(--focus-color); }
.cart-field.is-invalid,
.cart-field.is-invalid:focus-within { border-color: var(--danger); background: var(--danger-light); outline-color: var(--danger); box-shadow: inset 0 0 0 var(--focus-inset) var(--danger); }
.cart-field.is-invalid input { color: var(--danger); caret-color: var(--danger); }
.cart-field input { min-width: 0; width: 100%; height: 27px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); -webkit-text-fill-color: currentColor; caret-color: #063f3a; opacity: 1; text-align: center; font-size: 14px; font-weight: 600; }
.cart-field input:focus { box-shadow: none; }
.cart-field input::placeholder { color: #a8b1af; -webkit-text-fill-color: #a8b1af; font-size: 14px; font-weight: 400; opacity: 1; }
.cart-field input::selection { color: var(--ink); background: var(--selection-bg); }
.cart-field.is-price-warning:not(.is-invalid) input { color: var(--profit-ink); caret-color: var(--profit-ink); }
.remove-item { width: 28px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: var(--danger-light); color: var(--danger); }
.remove-item .x-icon { width: 15px; height: 15px; }
.cart-order-footer { flex: 0 0 auto; }
.totals { margin-top: 7px; padding: 7px 10px; border-radius: 11px; background: #102f2c; color: #fff; display: grid; grid-template-columns: minmax(80px, .7fr) minmax(130px, 1.3fr); gap: 8px; }
.totals div { min-width: 0; display: grid; gap: 0; }
.totals div:last-child { padding-left: 9px; border-left: 1px solid rgba(255,255,255,.13); text-align: right; }
.totals span { color: #d5e5e2; font-size: 10px; font-weight: 500; }
.totals strong { font-size: 16px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.order-actions { display: grid; grid-template-columns: 42px minmax(96px, .75fr) minmax(150px, 1.25fr); gap: 8px; margin-top: 10px; }
.order-actions button { min-height: 40px; margin: 0; border-radius: 11px; font-size: 13px; font-weight: 650; }
.history-detail-footer { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: stretch; margin-top: 7px; }
.history-detail-footer .totals { margin-top: 0; }
.history-detail-footer .export-image-button { height: auto; min-height: 44px; }
.export-image-button { width: 42px; min-width: 42px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #5faaa0; border-radius: 11px; background: #d4eeea; color: #075e57; box-shadow: 0 3px 9px rgba(7, 94, 87, .16); }
.export-image-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.export-image-button:disabled { cursor: default; opacity: .7; }
.save-draft-button { border: 1px solid #d79b20; background: #fff0c7; color: #704300; box-shadow: 0 4px 10px rgba(167, 105, 0, .16); }
.button-spinner { width: 15px; height: 15px; display: inline-block; margin-right: 7px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; vertical-align: -3px; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.confirm-modal { z-index: 65; align-items: center; padding: 15px; }
.confirm-card { position: relative; z-index: 2; width: 100%; max-width: 390px; padding: 18px; border-radius: 20px; background: var(--surface); text-align: center; box-shadow: var(--shadow); animation: confirm-pop .16s ease-out; }
@keyframes confirm-pop { from { transform: scale(.96); opacity: .65; } }
.confirm-card h2 { margin: 0; font-size: 18px; }
.confirm-price-warning { margin: 10px 0 0; color: var(--profit-ink); font-size: 13px; line-height: 1.5; }
.confirm-report-month-field { margin-top: 14px; text-align: left; }
.confirm-report-month-description { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.confirm-report-month-button { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid #8ab8b1; border-radius: 11px; background: #fbfcfc; color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; }
.confirm-report-month-button[aria-expanded="true"] { border-color: var(--brand); background: #f5fbf9; }
.confirm-report-month-picker { left: 0; right: auto; width: 100%; z-index: 70; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.confirm-actions.single-action { grid-template-columns: minmax(0, 1fr); }
.confirm-actions button { min-height: 44px; margin: 0; border-radius: 12px; font-size: 12px; font-weight: 800; }
.stock-in-card { text-align: left; }
.stock-in-card h2 { text-align: center; }
.stock-adjustment-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 14px; }
.stock-in-card.is-stock-out .stock-adjustment-fields { grid-template-columns: 1fr; }
.stock-in-field { display: grid; gap: 6px; }
.stock-in-field > span { color: var(--ink); font-size: 11px; font-weight: 750; }
.stock-in-field input { width: 100%; min-height: 44px; font-size: 16px; text-align: center; }
.stock-in-card .stock-in-field input::placeholder { color: #87928f; font-size: 13px; font-weight: 500; opacity: 1; }
.stock-in-preview { height: 28px; display: flex; align-items: center; justify-content: center; margin: 5px 0 0; overflow: hidden; color: var(--brand-dark); font-size: 10.5px; font-weight: 750; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.stock-in-preview:empty { visibility: hidden; }
.stock-in-card.is-stock-out .stock-in-preview { color: var(--danger); }
.stock-in-card.is-stock-out .primary-button { background: var(--danger); }
.create-product-modal { z-index: 65; }
.create-product-card { gap: 0; margin: 0; border: 0; text-align: left; animation: none; }
.product-form-header { border-bottom: 1px solid var(--line); }
.create-product-card h2 { margin: 0; text-align: left; font-size: 18px; }
.create-product-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--section-gap); padding: 14px 0 8px; overflow-y: auto; overscroll-behavior: contain; }
.product-form-group { flex: 0 0 auto; display: grid; gap: var(--section-content-gap); }
.product-form-section-title { margin: 0 3px; color: var(--brand-dark); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.product-form-panel { min-width: 0; display: grid; gap: 6px; }
.product-form-field { position: relative; min-width: 0; display: grid; grid-template-columns: var(--form-label-width) minmax(0, 1fr); border: 1px solid var(--control-border); border-radius: 10px; background: #fff; }
.product-form-field-heading { min-width: 0; min-height: var(--form-row-height); display: flex; align-items: center; gap: 3px; padding: 3px 8px; background: #f5f8f7; color: var(--ink); font-size: var(--form-label-size); font-weight: var(--form-label-weight); line-height: 1.3; }
.product-form-field-heading > span { min-width: 0; }
.product-form-field-heading { border-radius: 9px 0 0 9px; }
.product-form-field > :nth-child(2) { min-width: 0; border-left: 1px solid var(--line); }
.product-form-field > input, .product-form-field > textarea { width: 100%; min-height: var(--form-row-height); padding: 5px 10px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font-size: var(--form-value-size); text-align: left; }
.product-form-field > :nth-child(2) { border-radius: 0 9px 9px 0; }
.product-form-field > input:focus, .product-form-field > textarea:focus { outline: 0; box-shadow: none; }
.product-form-field > input:disabled { color: #929e9b; -webkit-text-fill-color: #929e9b; opacity: 1; }
.create-product-card #createProductName { min-height: 54px; max-height: 224px; padding: 7px 10px; resize: none; line-height: 1.4; }
.create-product-card .confirm-actions { display: flex; flex-shrink: 0; margin-top: auto; padding-top: 16px; }
.create-product-card .confirm-actions button { flex: 1; min-width: 0; }
.create-product-card .confirm-actions .create-product-delete { flex: 0 0 44px; display: grid; place-items: center; padding: 0; }
.create-product-delete svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.create-product-card.is-editing .create-product-source-button { cursor: default; }
.create-product-name-field { position: relative; }
.create-product-match-panel { position: absolute; z-index: 10; top: calc(100% + 5px); left: 0; right: 0; max-height: min(320px, 40dvh); overflow-y: auto; padding: 5px; border: 1px solid #c8d9d5; border-radius: 11px; background: var(--surface); box-shadow: 0 12px 28px rgba(29, 54, 49, .18); }
.create-product-suggestions { margin: 0; padding: 0; }
.create-product-suggestion { width: 100%; display: grid; gap: 5px; padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.create-product-suggestion + .create-product-suggestion { border-top: 1px solid #e5ecea; border-radius: 0 0 8px 8px; }
.create-product-suggestion-title { display: block; min-width: 0; }
.create-product-suggestion strong { display: block; min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.22; }
.create-product-suggestion-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.create-product-suggestion .source-pill,
.create-product-suggestion .stock-label,
.create-product-suggestion .cost-label,
.create-product-suggestion .vat-price-label { min-height: 21px; padding: 3px 8px; font-size: 10px; }
.vat-price-label { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 8px; border-radius: 999px; color: #7a4c00; background: var(--amber-light); font-size: 10px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.create-product-suggestion.is-exact { background: #eaf7f3; box-shadow: inset 3px 0 0 var(--brand); }
.create-product-selection-status { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 10px; border: 1px solid #83c4b8; border-radius: 10px; background: #eaf7f3; color: var(--brand-dark); }
.create-product-selection-status-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 900; }
.create-product-selection-status-copy { min-width: 0; display: grid; gap: 3px; }
.create-product-selection-status-copy strong { font-size: 11px; line-height: 1.3; }
.create-product-selection-status-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
.create-product-selection-status-meta > span:not(.source-pill),
.create-product-selection-status-copy small { color: #446b65; font-size: 10px; line-height: 1.35; }
.create-product-selection-status-copy small { font-weight: 650; }
.create-product-source-control { position: relative; min-width: 0; display: block; }
.create-product-source-button { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border: 1.5px solid #8ab8b1; border-radius: 10px; background: #fbfcfc; color: var(--ink); font-size: 14px; text-align: left; }
.create-product-source-button svg { flex: 0 0 auto; width: 16px; height: 16px; margin-right: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.create-product-source-button[aria-expanded="true"] { border-color: var(--brand); box-shadow: none; }
.create-product-source-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.create-product-source-button:disabled { border-color: #d7dfdd; background: #eef2f1; color: #929e9b; cursor: default; }
.create-product-source-picker { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; width: 100%; padding: 5px; border: 1px solid #c8d9d5; border-radius: 11px; background: var(--surface); box-shadow: 0 12px 28px rgba(29, 54, 49, .18); }
.create-product-source-option { width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 650; text-align: left; }
.create-product-source-option.is-selected { background: var(--brand-light); color: var(--brand-dark); font-weight: 800; }
.create-product-unit-control { position: relative; min-width: 0; display: block; }
.create-product-card .create-product-unit-control > input { width: 100%; min-height: 42px; padding-right: 48px; border: 1.5px solid #8ab8b1; background: #fbfcfc; box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .03); font-size: 14px; text-align: left; }
.create-product-card .create-product-unit-control > input:focus { border-color: var(--brand); outline: 0; box-shadow: none; }
.create-product-card .create-product-unit-control > input:disabled { border-color: #d7dfdd; background: #eef2f1; color: #929e9b; -webkit-text-fill-color: #929e9b; box-shadow: none; cursor: default; opacity: 1; }
.create-product-unit-button { position: absolute; z-index: 2; top: 3px; right: 4px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0 2px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); }
.create-product-unit-button:hover:not(:disabled),
.create-product-unit-button:focus-visible { background: var(--brand-light); color: var(--brand-dark); outline: 0; }
.create-product-unit-button svg { width: 16px; height: 16px; margin-right: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.create-product-unit-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.create-product-unit-button:disabled { color: #929e9b; cursor: default; }
.create-product-unit-picker { position: absolute; z-index: 11; top: calc(100% + 6px); left: 0; right: 0; max-height: min(220px, 30dvh); overflow-y: auto; padding: 5px; border: 1px solid #c8d9d5; border-radius: 11px; background: var(--surface); box-shadow: 0 12px 28px rgba(29, 54, 49, .18); }
.create-product-unit-option { width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 650; text-align: left; }
.create-product-unit-option:hover,
.create-product-unit-option:focus-visible { background: #f0f6f4; outline: 0; }
.create-product-unit-option.is-selected { background: var(--brand-light); color: var(--brand-dark); font-weight: 800; }
.create-product-unit-custom-hint { display: block; padding: 8px 10px; border-top: 1px solid #e5ecea; color: var(--muted); font-size: 10px; line-height: 1.35; }
.create-product-sale-locked-control,
.create-product-allow-below-cost-control,
.create-product-full-vat-control { min-height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 2px 0 0; color: var(--ink); font-size: 11px; font-weight: 750; white-space: nowrap; }
.create-product-sale-locked-control input,
.create-product-allow-below-cost-control input,
.create-product-full-vat-control input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.create-product-full-vat-control.is-disabled { color: #929e9b; cursor: default; opacity: .62; }
.product-form-field .create-product-source-button,
.product-form-field .create-product-unit-control > input { width: 100%; min-height: var(--form-row-height); height: 100%; padding: 5px 10px; border: 0; border-radius: inherit; background: transparent; box-shadow: none; }
.product-form-field .create-product-source-control,
.product-form-field .create-product-unit-control { display: grid; }
.product-form-field .create-product-unit-control > input { padding-right: 44px; font-size: var(--form-value-size); }
.product-form-field .create-product-source-button[aria-expanded="true"],
.product-form-field .create-product-source-button:focus-visible,
.product-form-field .create-product-unit-control > input:focus { outline: 0; box-shadow: none; }
.product-form-field .create-product-source-button:disabled,
.product-form-field .create-product-unit-control > input:disabled { background: transparent; }
.product-form-field .create-product-unit-button { top: 3px; width: 28px; height: 28px; }
.product-form-field .create-product-full-vat-control,
.product-form-field .create-product-allow-below-cost-control,
.product-form-field .create-product-sale-locked-control { position: relative; display: grid; place-items: center start; min-height: var(--form-row-height); padding: 0 12px; pointer-events: none; }
.product-form-field .create-product-full-vat-control input,
.product-form-field .create-product-allow-below-cost-control input,
.product-form-field .create-product-sale-locked-control input { grid-area: 1 / 1; width: 40px; height: 24px; margin: 0; opacity: 0; cursor: pointer; pointer-events: auto; }
.product-form-switch { grid-area: 1 / 1; width: 40px; height: 24px; position: relative; border-radius: 999px; background: #b8c6c2; pointer-events: none; transition: background .18s ease; }
.product-form-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s ease; }
.product-form-field input:checked + .product-form-switch { background: var(--brand); }
.product-form-field input:checked + .product-form-switch::after { transform: translateX(16px); }
.product-form-field input:focus-visible + .product-form-switch { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
.history-invoice-export-card { text-align: left; }
.history-invoice-export-card h2 { text-align: center; }
.history-invoice-export-description { margin: 8px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.history-invoice-date-field { margin-top: 0; }
.history-invoice-date-control { position: relative; min-width: 0; }
.history-invoice-date-control > .history-month-button { min-height: 44px; font-size: 14px; }
.history-invoice-date-picker { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; width: 100%; padding: 10px; border: 1px solid #c8d9d5; border-radius: 13px; background: var(--surface); box-shadow: 0 14px 34px rgba(29, 54, 49, .2); }
.history-invoice-weekdays, .history-invoice-day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.history-invoice-weekdays { margin-bottom: 4px; color: #788984; font-size: 9px; font-weight: 700; text-align: center; }
.history-invoice-weekdays span { padding: 3px 0; }
.history-invoice-day-grid button, .history-invoice-day-grid span { min-height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 650; }
.history-invoice-day-grid button.is-selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); font-weight: 800; }
.history-invoice-day-grid button.is-today:not(.is-selected) { border-color: #8abdb6; }
.history-invoice-day-grid button:disabled { color: #b5bfbd; cursor: default; }
.history-order-manage-card { max-width: 380px; text-align: left; }
.history-order-manage-card h2 { text-align: center; }
.history-order-manage-mark { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 15px; background: var(--brand-light); color: var(--brand-dark); }
.history-order-manage-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-order-manage-description { margin: 9px 0 0; color: #53645f; font-size: 11.5px; line-height: 1.5; text-align: center; }
.history-order-transfer-field { display: grid; gap: 6px; margin-top: 14px; }
.history-order-transfer-field > span { color: #334a45; font-size: 11px; font-weight: 750; }
.history-order-transfer-control { position: relative; display: block; min-width: 0; }
.history-order-transfer-button { width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 6px 11px 6px 13px; border: 1.5px solid #8ab8b1; border-radius: 11px; background: #fbfcfc; color: var(--ink); text-align: left; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.history-order-transfer-button:hover:not(:disabled) { background: #f5faf8; }
.history-order-transfer-button:focus-visible,
.history-order-transfer-button[aria-expanded="true"] { border-color: var(--brand); outline: 0; box-shadow: none; }
.history-order-transfer-button:disabled { border-color: #d7dfdd; background: #eef2f1; color: #929e9b; cursor: default; }
.history-order-transfer-label { min-width: 0; overflow: hidden; color: inherit; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.history-order-transfer-chevron { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.history-order-transfer-button[aria-expanded="true"] .history-order-transfer-chevron { transform: rotate(180deg); }
.history-order-transfer-picker { position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border: 1px solid #c8d9d5; border-radius: 12px; background: var(--surface); box-shadow: 0 14px 32px rgba(29, 54, 49, .2); }
.history-order-transfer-search { width: 100%; height: 39px; margin-bottom: 4px; padding: 0 11px; border: 1px solid #d4e0dd; border-radius: 9px; outline: 0; background: #f7faf9; color: var(--ink); font: inherit; font-size: 12.5px; }
.history-order-transfer-search:focus { border-color: var(--brand); background: #fff; box-shadow: none; }
.history-order-transfer-search::placeholder { color: #879590; }
.history-order-transfer-options { max-height: min(210px, 28dvh); overflow-y: auto; overscroll-behavior: contain; }
.history-order-transfer-option { width: 100%; min-height: 40px; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 5px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; }
.history-order-transfer-option:hover,
.history-order-transfer-option:focus-visible { background: #f0f6f4; outline: 0; }
.history-order-transfer-option.is-selected { background: var(--brand-light); color: var(--brand-dark); }
.history-order-transfer-option-name { min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.history-order-transfer-check { width: 17px; height: 17px; fill: none; stroke: transparent; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.history-order-transfer-option.is-selected .history-order-transfer-check { stroke: var(--brand); }
.history-order-transfer-empty { margin: 3px 0 0; padding: 12px 8px; color: #71817d; font-size: 12px; text-align: center; }
.customer-create-modal { z-index: 70; }
.customer-create-card { max-width: 360px; padding: 20px; text-align: left; }
.customer-create-card h2 { margin-bottom: 15px; text-align: center; }
.customer-create-mark { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 17px; background: var(--brand-light); color: var(--brand-dark); box-shadow: 0 5px 13px rgba(15, 118, 110, .14); }
.customer-create-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.customer-create-field { position: relative; display: block; }
.customer-create-field > span { position: absolute; z-index: 1; top: 11px; left: 12px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.customer-create-field svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.customer-create-field input { width: 100%; min-height: 43px; padding: 9px 12px 9px 40px; border: 1px solid #8ab8b1; border-radius: 11px; background: #fbfcfc; outline: none; }
.customer-create-error { margin-top: 8px; padding: 8px 10px; border: 1px solid #efbbb5; border-radius: 9px; background: var(--danger-light); color: var(--danger); font-size: 11px; line-height: 1.35; }
.customer-create-actions { margin-top: 13px; }
.secondary-button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1.4; }
.danger-button { border: 0; background: var(--danger); color: #fff; box-shadow: 0 7px 16px rgba(180, 35, 24, .2); }

.notification-modal { align-items: center; padding: 16px; }
.notification-card { position: relative; z-index: 2; width: 100%; max-width: 430px; max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.notification-card .eyebrow { margin: 0; color: var(--ink); font-size: 19px; font-weight: 750; line-height: 1.4; letter-spacing: .01em; overflow-wrap: anywhere; }
.notification-card .primary-button { min-height: 48px; margin: 0; border-radius: 12px; box-shadow: none; }
.success-mark { width: 64px; height: 64px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--brand-light); color: var(--brand); }
.success-mark svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.suggestions button:focus-visible,
.suggestions button.is-keyboard-active {
  color: var(--brand-dark);
  background: var(--brand-light);
  box-shadow: none;
}

.create-product-suggestion:focus-visible,
.create-product-suggestion.is-keyboard-active { outline: 0; background: var(--brand-light); box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .activity-item:is(button):hover { background: #f2f8f6; }
  .overview-activity-button:hover, .activity-mode-button:hover { border-color: var(--brand); background: #cbe9e4; }
  .activity-mode-button[aria-pressed="true"]:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
  .overview-ranking-more:not(:disabled):hover { background: #dcece8; }
  .overview-ranking-item.can-open-detail:hover { background: #f2f8f6; }
  .debt-customer:hover { background: #f2f8f6; }
  .debt-customer.has-vat-warning:hover { background: #ffd3cd; }
  .product-card.has-history:hover,
  .cart-item:not(.history-readonly-item):hover { background: #f2f8f6; }
  .history-readonly-item.can-open-product:hover { background: #f2f8f6; }
  .history-readonly-item.has-loss.can-open-product:hover { background: var(--history-loss-hover-bg); }
  .current-order-panel:not(:disabled):hover { border-color: #4fa399; background: var(--customer-panel-bg-hover); box-shadow: 0 3px 10px rgba(15, 118, 110, .12); }
  .draft-card:not(.active):hover { border-color: var(--card-border-hover); background: var(--surface); box-shadow: var(--card-shadow-hover); }
  .history-day-orders .history-card:hover { background: #f2f8f6; }
  .history-day-orders .history-card.history-discount-entry:hover { background: #fff4df; }
  .history-day-orders .history-card.has-loss:hover { background: var(--history-loss-hover-bg); }
  .draft-card.active:hover { border-color: #357f77; background: #e9f5f2; box-shadow: 0 3px 10px rgba(15, 118, 110, .14); }
  .primary-button:not(:disabled):hover { background: var(--button-brand-hover); box-shadow: 0 10px 22px rgba(40, 111, 105, .26); }
  .dashed-add-button:not(:disabled):hover { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
  .tax-lookup-button:not(:disabled):hover { background: var(--button-brand-hover); color: #fff; box-shadow: none; }
  .filter:not(.active):hover, .load-more:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
  .filter.active:hover { background: var(--button-brand-hover); border-color: var(--button-brand-hover); }
  .add-button:not(:disabled):hover { border-color: var(--button-brand); background: var(--button-brand); color: #fff; box-shadow: 0 7px 16px rgba(52, 130, 123, .24); }
  .add-button.selected:not(:disabled):hover { border-color: var(--danger); background: var(--danger); color: #fff; box-shadow: 0 7px 16px rgba(180, 35, 24, .2); }
  .close-button:hover { border-color: var(--danger); background: var(--danger); color: #fff; box-shadow: 0 3px 8px rgba(180, 35, 24, .2); }
  .owner-revoke-button:not(:disabled):hover { border-color: var(--danger); background: var(--danger); color: #fff; box-shadow: 0 3px 8px rgba(180, 35, 24, .2); }
  .secondary-button:hover { background: #e4eae8; color: var(--ink); }
  .remove-item:hover { background: var(--danger); color: #fff; box-shadow: 0 4px 10px rgba(180, 35, 24, .18); }
  .cart-customer-edit:not(:disabled):hover { border-color: #4e8196; background: #4e8196; color: #fff; box-shadow: 0 7px 16px rgba(50, 100, 120, .2); }
  .cart-customer-add:not(:disabled):hover { border-color: var(--button-brand); background: var(--button-brand); color: #fff; box-shadow: 0 6px 14px rgba(52, 130, 123, .2); }
  .draft-delete:hover { border-color: var(--danger); background: var(--danger); color: #fff; box-shadow: 0 7px 16px rgba(180, 35, 24, .2); }
  .danger-button:not(:disabled):hover { background: #921b13; box-shadow: 0 9px 19px rgba(180, 35, 24, .28); }
  .header-action:not(:disabled):hover { color: #fff; border-color: var(--button-brand); background: var(--button-brand); box-shadow: 0 6px 14px rgba(52, 130, 123, .2); }
  .save-draft-button:not(:disabled):hover { border-color: #b87800; background: #ffe5a1; color: #5c3600; box-shadow: 0 6px 14px rgba(167, 105, 0, .22); }
  .suggestions button:hover { color: var(--brand-dark); background: var(--brand-light); box-shadow: inset 4px 0 0 var(--brand); }
}

@media (min-width: 680px) {
  .sheet-card { border-radius: 26px; margin-bottom: 18px; }
  .sheet-card.cart-sheet { border-radius: 0; margin-bottom: 0; }
  .sheet-card.history-sheet { border-radius: 0; margin-bottom: 0; }
  .modal { align-items: center; }
}

@media (max-width: 679px) {
  input, select, textarea { font-size: 16px !important; }
  .alias-cell input { font-size: 11.5px !important; }
  .debt-bank-account-cell input[type="text"] { font-size: 11.5px !important; }
  :is(.telegram-settings-field, .product-form-field) :is(input, textarea, select) { font-size: var(--form-value-size) !important; }
  .cart-field input { font-size: 14px !important; }
  .sales-discount-line-controls input { font-size: 14px !important; }
}

@media (max-width: 560px) {
  :root { --header-action-size: 40px; }
  .header-actions { gap: 4px; }
  .header-action { gap: 4px; padding: 0 8px; font-size: 11px; }
  .header-action svg { width: 16px; height: 16px; }
  .header-overflow-action { display: none; }
  .header-more { display: block; }
}

@media (max-width: 400px) {
  .topbar { flex-wrap: wrap; gap: 6px; }
  .header-actions { gap: 3px; justify-content: flex-end; }
  .header-action { padding: 0 7px; }
}

@media (max-width: 340px) {
  :root { --header-action-size: 38px; }
  .header-action { padding: 0 7px; font-size: 10.5px; }
}

@media (max-width: 430px) {
  .debt-detail-actions { gap: 4px; }
  .debt-detail-actions button { padding: 0 4px; font-size: 10px; white-space: normal; }
  .debt-detail-actions svg { display: none; }
  .history-summary strong { font-size: 11.5px; }
  .topbar { gap: 5px; }
  .cart-columns, .cart-item { grid-template-columns: minmax(92px, 1fr) 56px 88px 26px; gap: 5px; }
  .cart-field { padding-left: 6px; padding-right: 6px; }
  .cart-field input::placeholder { font-size: 14px; }
  .remove-item { width: 26px; }
  .debt-admin-grid { grid-template-columns: minmax(0, 1fr); }
  .debt-admin-grid > .is-wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .tax-lookup-spinner, .button-spinner, .history-spinner, .draft-action-spinner {
    animation-duration: .9s !important;
    animation-iteration-count: infinite !important;
  }
}

/* Keep existing panel titles and close actions on one row. */
.panel-heading { flex: 0 0 auto; min-width: 0; min-height: 46px; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 2px 2px 7px; text-align: left; }
.panel-heading > h2 { min-width: 0; flex: 1 1 auto; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--page-heading-size); text-align: left; }
.panel-heading > .close-button { position: static; flex: 0 0 32px; width: 32px; height: 36px; margin-left: auto; }
.history-heading { min-width: 0; flex-wrap: nowrap; }
.history-heading > div { flex: 1 1 auto; }
.history-heading h2 { min-width: 0; }
.telegram-settings-title-row .information-help-button { flex-shrink: 0; }
.debt-receipt-heading h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-receipt-heading button { flex-shrink: 0; }

/* A single border follows the existing rounded value edge. The label stays neutral.
   Picker focus survives pointer/keyboard transfers and open/close changes. */
button[aria-haspopup]:is(:focus, [aria-expanded="true"]) {
  border-color: var(--focus-color); outline: none; box-shadow: inset 0 0 0 var(--focus-inset) var(--focus-color);
}
:is(.product-form-field, .telegram-settings-field) :is(input, textarea, select):focus {
  border-color: var(--line) !important; outline: none; box-shadow: none;
}
.product-form-field :is(.create-product-source-button, .create-product-unit-button,
.debt-payment-date-button, .debt-payment-bank-button):is(:focus, [aria-expanded="true"]),
.telegram-settings-field .workflow-assignment-button:is(:focus, [aria-expanded="true"]),
:is(.create-product-unit-control, .debt-payment-bank-control) {
  border-color: var(--line); outline: none; box-shadow: none;
}
.product-form-field:has(> input:focus, > textarea:focus,
  .create-product-source-control:focus-within, .create-product-source-button[aria-expanded="true"],
  .create-product-unit-control:focus-within, .create-product-unit-button[aria-expanded="true"],
  .debt-payment-date-control:focus-within, .debt-payment-date-button[aria-expanded="true"],
  .debt-payment-bank-control:focus-within, .debt-payment-bank-button[aria-expanded="true"])::after,
.telegram-settings-field:has(> input:focus, .workflow-assignment-control:focus-within,
  .workflow-assignment-button[aria-expanded="true"])::after {
  content: ""; position: absolute; z-index: 3; top: -1px; bottom: -1px; right: -1px;
  left: var(--form-label-width); border: 1px solid var(--focus-color);
  border-radius: 0 10px 10px 0; pointer-events: none;
  box-shadow: inset 0 0 0 var(--focus-inset) var(--focus-color);
}
.product-form-field input:focus-visible + .product-form-switch,
.telegram-settings-history-toggle input:focus-visible + .telegram-settings-switch {
  outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px;
}
.cart-field input:focus { outline: none; box-shadow: none; }
/* Form focus changes are immediate and do not dim or animate the control. */
:is(input, textarea, select, .workflow-assignment-button, .create-product-source-button,
.create-product-unit-button, .debt-payment-date-button, .debt-payment-bank-button,
.history-order-transfer-button, button[aria-haspopup], .workflow-assignment-option,
.create-product-unit-option, .create-product-source-option, .debt-payment-bank-option, .history-order-transfer-option,
#debtChooseProof, .debt-proof-preview) { transition: none; }
:is(.workflow-assignment-button, .create-product-source-button, .create-product-unit-button,
.debt-payment-date-button, .debt-payment-bank-button, button[aria-haspopup],
button[role="option"]):not(:disabled):active { opacity: 1; }
:is(.workflow-assignment-button, .create-product-source-button, .create-product-unit-button,
.debt-payment-bank-button) svg { transition: none; }
button:focus-visible { transition: none; }
.sales-discount-date-button:focus-visible,
.history-order-transfer-button:focus-visible,
.overview-ranking-item.can-open-detail:focus-visible {
  outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; box-shadow: none;
}
/* Keyboard choices use an inset ring, retaining selected and warning accents. */
:is(.header-more-item, .suggestions button, .create-product-suggestion,
.workflow-assignment-option, .create-product-unit-option, .create-product-source-option,
.debt-payment-bank-option, .history-seller-option, .draft-owner-option,
.history-order-transfer-option, .history-month-option):focus-visible {
  outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px;
}
:is(input, textarea, [contenteditable="true"])::selection { color: var(--ink); background: var(--selection-bg); }
:is(.telegram-settings-field, .product-form-field):has(> input:disabled, > textarea:disabled,
  .workflow-assignment-button:disabled, .create-product-source-button:disabled,
  .create-product-unit-control > input:disabled, .debt-payment-bank-control > input:disabled,
  .telegram-settings-switch-control > input:disabled, > label > input:disabled) {
  border-color: var(--border-disabled);
}
/* One disabled/read-only appearance across forms, pickers and action buttons.
   State rules override feature-specific hover, selected and warning colors. */
:is(input, textarea, select, button):disabled,
:is(button, [role="option"])[aria-disabled="true"],
:is(input, textarea)[readonly]:not([role="combobox"]),
.product-form-field > label:has(> input:disabled),
.telegram-settings-switch-control:has(> input:disabled),
.create-product-full-vat-control.is-disabled {
  background: var(--surface-disabled) !important;
  color: var(--text-disabled) !important;
  border-color: var(--border-disabled) !important;
  box-shadow: none !important;
}
/* Text links and inline icons retain their transparent shape while unavailable. */
:is(.auth-links button, .auth-back-link, .information-help-button, .password-visibility):is(:disabled, [aria-disabled="true"]) {
  background: transparent !important;
}
/* Native inputs under custom switches stay transparent, including while saving. */
:is(button, textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"])):disabled,
:is(button, [role="option"])[aria-disabled="true"],
:is(input, textarea)[readonly]:not([role="combobox"]),
.create-product-full-vat-control.is-disabled { opacity: 1 !important; }
:is(input, textarea):disabled,
:is(input, textarea)[readonly]:not([role="combobox"]) {
  -webkit-text-fill-color: var(--text-disabled) !important;
}
:is(input, textarea):disabled::placeholder {
  color: var(--text-disabled);
  -webkit-text-fill-color: var(--text-disabled);
}
:is(input, textarea):disabled,
:is(input, textarea)[readonly]:not([role="combobox"]) {
  pointer-events: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}
:is(button:disabled, button[aria-disabled="true"]) :is(svg, span, strong) {
  color: inherit !important;
}
:is(button:disabled, button[aria-disabled="true"]) svg {
  stroke: currentColor;
}
.telegram-settings-history-toggle input:disabled + .telegram-settings-switch,
.product-form-field input:disabled + .product-form-switch {
  background: var(--border-disabled) !important;
  opacity: 1;
  transition: none;
}
.telegram-settings-history-toggle input:disabled + .telegram-settings-switch::after,
.product-form-field input:disabled + .product-form-switch::after { transition: none; }
.telegram-settings-history-toggle input:disabled:checked + .telegram-settings-switch,
.product-form-field input:disabled:checked + .product-form-switch {
  background: var(--switch-disabled-on) !important;
}
@media (forced-colors: active) {
  :root { --focus-color: Highlight; --selection-bg: Highlight; }
  :is(input, textarea, select, button, [tabindex], [contenteditable="true"]):focus-visible {
    outline: 1px solid Highlight; outline-offset: -1px;
  }
}