:root {
  color-scheme: light;
  --canvas: #f3f6fa;
  --surface: #fff;
  --ink: #142238;
  --muted: #53647a;
  --navy: #111f30;
  --nav-border: #293b50;
  --accent: #087464;
  --accent-dark: #075e52;
  --wash: #edf7f5;
  --border: #dbe4ee;
  --field-border: #c6d2df;
  --shadow: 0 1px 2px #172b4810, 0 4px 12px #172b4806;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --tab-height: 0px;
  --sale-submit-height: 76px;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid #1a8b7a; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(35px, 4.8vw, 52px); line-height: 1.08; letter-spacing: -.047em; }
h2 { font-size: 18px; letter-spacing: -.025em; }
h3 { font-size: 15px; }
small, .muted { color: var(--muted); }
.muted { font-size: 13px; }
.intro { color: var(--muted); margin-top: 8px; }
.eyebrow { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; margin-bottom: 5px; }
.sr-only, .icon-library { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 26px 16px 18px;
  background: var(--navy);
  color: #eaf0f7;
}
.brand, .account-brand { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 780; }
.brand { padding: 0 5px; }
.brand img, .account-brand img { border-radius: 12px; }
.brand small, .account-brand small {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
  color: #a9becd;
}
.nav-caption { margin: 14px 10px 2px; color: #a7b9cb; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.main-nav { display: grid; gap: 3px; margin-top: 13px; min-height: 0; overflow: auto; }
.main-nav a, .main-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 10px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #d2ddeb;
  font-size: 14px;
  font-weight: 650;
}
.main-nav button { background: transparent; }
.main-nav a:hover, .main-nav button:hover { background: #1e3248; }
.main-nav a[aria-current=page], .main-nav button[data-current] { background: #21443f; border-color: #34655c; color: #dcfff2; }
.main-nav [aria-current=page] .icon, .main-nav button[data-current] .icon { color: #8ee9ce; }
.main-nav :focus-visible { outline-offset: -3px; }
.main-nav #open-more-nav, .nav-short, .mobile-brand { display: none; }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 15px 6px 0; border-top: 1px solid var(--nav-border); color: #b6c8d8; font-size: 12px; }
.sidebar-foot .icon { width: 15px; height: 15px; color: #91d8c5; }

main { width: 100%; max-width: 1440px; min-width: 0; margin: 0 auto; padding: 0 clamp(20px, 3.2vw, 48px); }
.top { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
#crumb { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .085em; }
.account-tools { display: flex; align-items: center; gap: 8px; }
.account-tools { min-width: 0; }
.profile-button.btn {
  min-width: 0;
  max-width: min(250px, 34vw);
  background: #e6edf5;
  color: #32475e;
}
#active-company-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-body, .profile-form { display: grid; gap: 12px; }
.profile-form input { width: 100%; }
.profile-form .check-field { display: flex; align-items: flex-start; gap: 8px; }
.profile-form .check-field input { width: 18px; height: 18px; min-height: 0; flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.profile-section { padding-top: 12px; border-top: 1px solid var(--border); }
.profile-section summary { font-weight: 750; cursor: pointer; }
.profile-section .profile-form { margin-top: 10px; }

.btn, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--field-border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 680;
  white-space: nowrap;
}
.btn:hover, .icon-btn:hover { background: #edf2f8; border-color: #aabbd0; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; padding-inline: 16px; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.icon-btn { width: 44px; flex: 0 0 auto; padding: 0; font-size: 20px; }
.btn:disabled, .icon-btn:disabled, a[aria-disabled=true] { opacity: .55; cursor: default; }
.btn.danger { color: #9c2822; border-color: #e5beba; }
.btn.danger:hover { background: #fff1ee; }
.btn .icon { width: 17px; height: 17px; }

.sync-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
#sync-status { display: inline-flex; align-items: center; gap: 7px; color: #426275; font-size: 12px; font-weight: 630; }
#sync-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #168374; }
.sync-panel.sync-warning { margin-top: 9px; padding: 7px 11px; border-radius: 8px; background: #fff2d9; }
.sync-panel.sync-warning #sync-status { color: #684820; }
.sync-panel.sync-warning #sync-status::before { background: #b46917; }
.view { padding-top: 12px; }
.heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.heading .eyebrow { color: var(--accent-dark); }

.overview-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 14px;
}
.overview-heading { display: flex; align-items: center; gap: 16px; min-width: 0; }
.overview-heading h1, #sale-title { font-size: clamp(28px, 3.4vw, 40px); }
#day-label { margin-top: 4px; }
.sidebar :focus-visible { outline-color: #90f1d2; }
.panel, .metric { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.date-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
.date-controls input[type=date] { width: 141px; }

.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.metric { padding: 13px; }
.metric-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--muted); font-size: 13px; font-weight: 730; }
.currency-symbol { display: grid; place-items: center; flex: 0 0 auto; width: 33px; height: 33px; border-radius: 9px; background: #e2f5ef; color: #086656; font-size: 18px; }
.metric:nth-child(2) .currency-symbol { background: #e7f0ff; color: #284c8a; }
.metric:nth-child(3) .currency-symbol { background: #f0eafd; color: #624399; }
.amount { display: block; font-size: clamp(19px, 2.7vw, 32px); font-weight: 790; line-height: 1.18; letter-spacing: -.045em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.metric-breakdown { display: grid; gap: 3px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #e7edf3; color: var(--muted); font-size: 12px; }
.metric-breakdown span { display: flex; justify-content: space-between; gap: 6px; }
.metric-breakdown b { color: var(--ink); font-weight: 680; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.overview-panels { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); align-items: start; gap: 15px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-head p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sales-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.sales-controls .btn { min-height: 40px; }
.empty { padding: 28px 14px; text-align: center; }
.empty p { color: var(--muted); margin: 5px 0 13px; font-size: 14px; }
.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px; background: var(--wash); color: var(--accent-dark); font-size: 23px; }

input, select, textarea {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 16px;
}
input[type=date] { max-width: 100%; width: 100%; appearance: none; }
input::placeholder, textarea::placeholder { color: #5d7188; }
textarea { resize: vertical; }
.panel-head input[type=search] { width: min(265px, 51%); }
.panel-head select { font-size: 14px; }
label { display: block; font-size: 13px; font-weight: 690; }
label input, label select, label textarea { margin-top: 5px; }
label small { font-weight: 450; }

.sale-entry { padding-inline: 18px; border-bottom: 1px solid var(--border); }
.sale-entry:last-child { border-bottom: 0; }
.sale-entry summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 63px; padding: 12px 0; list-style: none; }
.sale-entry summary::-webkit-details-marker { display: none; }
.sale-entry summary::after { content: '＋'; color: var(--muted); font-size: 16px; }
.sale-entry[open] summary::after { content: '−'; }
.sale-entry summary > strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sale-meta { flex: 1; min-width: 0; }
.sale-meta small { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.tag { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #e1f4ee; color: #126653; font-size: 11px; font-weight: 760; }
.tag.wholesale { background: #fff0d7; color: #704817; }
.tag.online { background: #e3edff; color: #234c85; }
.detail { padding: 0 0 15px; }
.detail li { margin-bottom: 4px; }
.detail ul { margin: 3px 0 7px; padding-left: 20px; }
.detail p { overflow-wrap: anywhere; }
.sale-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sale-payment { margin-top: 10px; overflow-wrap: anywhere; font-size: 13px; }
.expense-empty { padding: 16px 18px; }
.expense-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 10px; padding: 12px 18px; overflow-wrap: anywhere; }
.expense-row + .expense-row { border-top: 1px solid var(--border); }
.expense-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.expense-row .btn { grid-column: 1/-1; justify-self: end; min-height: 36px; font-size: 12px; }

.product-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.product-row:last-child { border-bottom: 0; }
.product-row h3 { overflow-wrap: anywhere; }
.product-meta { color: var(--muted); font-size: 13px; }
.product-prices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; }
.product-prices span { padding: 3px 8px; background: #edf3fa; border-radius: 6px; overflow-wrap: anywhere; }
.product-prices span:first-child { background: var(--wash); }
.product-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: start; gap: 6px; }

#sale-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
#sale-form > :nth-child(-n+2) { grid-column: 1/-1; }
.form-panel { min-width: 0; padding: 17px 18px; }
.form-panel > h2 { margin-bottom: 13px; }
.sale-info-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.field-grid input, .field-grid select, .note textarea, #expense-description { width: 100%; }
.line { display: grid; grid-template-columns: minmax(130px, 2fr) minmax(70px, 1fr) minmax(95px, 1fr) auto; align-items: end; gap: 9px; margin-bottom: 8px; padding: 11px; border: 1px solid #dce8f0; border-radius: 10px; background: #f3f7fb; }
.line.with-vat { grid-template-columns: minmax(125px, 2fr) minmax(60px, 1fr) minmax(80px, 1fr) minmax(92px, 1fr) auto; }
.line input, .line select { width: 100%; }
.sale-variant { grid-column: 1/3; min-width: 0; }
.product-picker { position: relative; min-width: 0; }
.product-matches { position: absolute; z-index: 3; top: calc(100% + 4px); left: 0; right: 0; max-height: 225px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--field-border); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 18px #172b4826; }
.product-matches [role=option] { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 9px 10px; border-bottom: 1px solid var(--border); cursor: pointer; overflow-wrap: anywhere; }
.product-matches [role=option]:last-child { border-bottom: 0; }
.product-matches [role=option]:hover, .product-matches [aria-selected=true] { background: var(--wash); }
.product-matches [role=option] strong { font-size: 13px; }
.match-status { margin-top: 4px; color: var(--muted); font-size: 12px; }
.note { margin-top: 14px; }
.vat-help { margin: -5px 0 12px; }
.vat-breakdown { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 5px; }
.payment-choice { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.payment-choice label { position: relative; flex: 1 0 auto; }
.payment-choice .btn { width: 100%; padding-inline: 10px; cursor: pointer; }
.payment-choice input:checked + .btn { background: var(--accent); border-color: var(--accent); color: white; }
.payment-choice input:focus-visible + .btn { outline: 3px solid #1a8b7a; outline-offset: 3px; }
.payment-choice input:disabled + .btn { opacity: .55; cursor: default; }
.payment-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.payment-fields input { width: 100%; }
.payment-status { margin-top: 8px; }
.sale-submit { position: sticky; z-index: 4; bottom: var(--tab-height); grid-column: 1/-1; }
.sale-submit .form-error { margin: 0 0 4px; }
:root:has(#satis:not([hidden]) #sale-form:not([hidden])) { scroll-padding-bottom: calc(var(--tab-height) + var(--sale-submit-height)); }
:root:has(#sale-error:not([hidden])) { --sale-submit-height: 155px; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border: 1px solid #cfe7e2; border-radius: 10px; background: var(--wash); box-shadow: 0 -4px 14px #172b4816; }
.sale-submit-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; max-width: 72%; }
.sale-submit-buttons .btn { white-space: normal; text-align: center; line-height: 1.2; }
.form-actions small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.form-actions strong { display: block; font-size: 24px; line-height: 1.24; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.form-error, #notice { padding: 10px 12px; margin-top: 11px; border: 1px solid #bee2d8; border-radius: 8px; background: #e6f5f0; color: #0f5c4d; }
.form-error, #notice.error { border-color: #e8c4c0; background: #fff0ee; color: #8f3029; }

dialog { width: min(610px, 100%); max-width: calc(100% - max(13px, var(--safe-left)) - max(13px, var(--safe-right))); max-height: calc(100% - max(16px, var(--safe-top)) - max(16px, var(--safe-bottom))); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 70px #15223540; }
dialog:modal { inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
dialog::backdrop { background: #101c33a0; }
#more-nav { width: min(370px, calc(100% - 24px)); }
.more-links { display: grid; padding: 8px; gap: 4px; }
.more-links a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px; font-weight: 680; }
.more-links a:hover, .more-links a[aria-current=page] { background: var(--wash); color: var(--accent-dark); }
.dialog-body { padding: 15px 18px; }
.dialog-body h3 { margin-top: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); }
.price-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 5px 0 12px; }
.price-row input { width: 100%; }
.price-title { margin-top: 10px; font-size: 13px; font-weight: 780; }
#delete-sale-info, #delete-product-info { margin-bottom: 5px; font-weight: 730; }
.expense-fields { margin-top: 12px; }
.expense-actions #delete-expense { margin-right: auto; }

.product-tools, .transfer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.transfer-body, #product-transfer-form, .transfer-form { display: grid; gap: 12px; }
#product-transfer-form, .transfer-form { border-top: 1px solid var(--border); padding-top: 14px; }
#product-csv, #warehouse-import-file { min-width: 0; width: 100%; }
#transfer-status:empty { display: none; }
.transfer-preview { list-style: none; margin: 0; padding: 0 10px; max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 9px; }
.transfer-preview li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; }
.transfer-preview li + li { border-top: 1px solid var(--border); }
.transfer-preview small { display: block; }
.transfer-preview strong { overflow-wrap: anywhere; }
.transfer-preview li > :last-child { white-space: nowrap; font-size: 13px; color: var(--muted); }

#report-form { margin-bottom: 17px; }
.report-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px; }
.report-fields input, .report-fields select { width: 100%; min-width: 0; }
.report-head .btn { flex-shrink: 0; }
.report-list { margin: 0; padding: 0; list-style: none; }
.report-list li { display: grid; gap: 12px; padding: 12px 18px; }
.report-list li + li { border-top: 1px solid var(--border); }
.report-list time, .report-list small { font-size: 13px; color: var(--muted); }
.report-list strong { font-variant-numeric: tabular-nums; text-align: right; }
.report-list small { display: block; overflow-wrap: anywhere; }
.report-days li { grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; }
.report-day-totals { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.report-day-totals strong { overflow-wrap: anywhere; text-align: left; }
.report-day-sales li { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
#report-day-dialog .panel-head { position: sticky; top: 0; background: var(--surface); }
.report-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border); }

.install-guide { display: grid; gap: 14px; }
.install-guide h3 { margin: 0 0 3px; }

#receipt-dialog { width: min(490px, 100%); }
#receipt-dialog .panel-head { background: var(--wash); }
.receipt-print-status { padding: 0 18px 12px; }
#receipt-settings { width: min(850px, 100%); }
.receipt-settings-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.receipt-settings-preview { min-width: 0; align-self: start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.receipt-column-order { list-style: none; margin: 8px 0 0; padding: 0; }
.receipt-column-order li { display: flex; align-items: center; gap: 5px; padding-block: 2px; }
.receipt-column-order li > span { flex: 1; }
.receipt-column-order .icon-btn { font-size: 16px; }
#receipt-settings-example { margin: 12px 0; padding: 6px; background: #f3f5f7; border-radius: 7px; }
#receipt-settings-example .thermal-sheet, #receipt-settings-example > canvas { margin: 0 auto; background: white; }
#receipt-settings-example .thermal-sheet { padding: 8px; }
#receipt-settings-example > canvas { display: block; width: min(72mm, 100%); height: auto; }
.receipt-settings-preview h3 { margin: 0 0 12px; }
.receipt-options { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.receipt-options label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.receipt-options input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.receipt-brand, .receipt-footer-message { overflow-wrap: anywhere; }
.receipt-brand { margin-bottom: 8px; font-weight: 780; }
.receipt-footer-message { margin-top: 14px; text-align: center; }
@media (max-width: 620px) { .receipt-settings-body { grid-template-columns: minmax(0, 1fr); } }

.total-breakdown, .receipt-meta { margin: 14px 0 0; }
.total-breakdown div, .receipt-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.total-breakdown dt, .receipt-meta dt, .receipt-line small { color: var(--muted); }
.total-breakdown dd, .receipt-meta dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.receipt-meta { margin-top: 0; font-size: 13px; }
.receipt-lines { list-style: none; padding: 9px 0; margin: 12px 0 0; border-block: 1px dashed #9daec1; }
.receipt-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 45%); gap: 8px; padding: 6px 0; }
.receipt-line strong, .receipt-note { overflow-wrap: anywhere; }
.receipt-line small { display: block; }
.receipt-line > span { text-align: right; overflow-wrap: anywhere; }
.receipt-net { margin-top: 8px; border-top: 1px dashed #9daec1; font-size: 18px; font-weight: 760; }
.receipt-note { margin-top: 12px; font-size: 13px; white-space: pre-wrap; }
.receipt-compact .receipt-lines { margin-top: 8px; padding-block: 4px; }
.receipt-compact .receipt-line { padding-block: 3px; }
.receipt-compact .receipt-meta div, .receipt-compact .total-breakdown div { padding-block: 2px; }
.receipt-spacious .receipt-line, .receipt-spacious .receipt-meta div, .receipt-spacious .total-breakdown div { padding-block: 8px; }
#browser-print-receipt { display: none; }
#generated-pdf-dialog { width: min(94vw, 850px); }
#generated-pdf-frame { display: block; width: 100%; height: 65dvh; border: 0; }

/* The settings preview and browser print use the same thermal layout. */
.thermal-sheet {
  --receipt-scale: 1;
  --receipt-row-pad: 1pt;
  --receipt-gap: 3pt;
  width: min(100%, 72mm);
  color: #000;
  font: calc(7pt * var(--receipt-scale))/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.thermal-sheet.receipt-font-small { --receipt-scale: .9; }
.thermal-sheet.receipt-font-large { --receipt-scale: 1.14; }
.thermal-sheet.receipt-compact { --receipt-row-pad: .7pt; --receipt-gap: 2pt; }
.thermal-sheet.receipt-spacious { --receipt-row-pad: 2pt; --receipt-gap: 5pt; }
.thermal-sheet .eyebrow {
  color: inherit; margin-bottom: 1pt; font-size: calc(9.5pt * var(--receipt-scale));
  letter-spacing: normal; text-align: center; overflow-wrap: anywhere;
}
.thermal-sheet h4 { margin: 0 0 var(--receipt-gap); font-size: inherit; text-align: center; }
.print-receipt-meta, .print-receipt-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.print-receipt-meta { margin-bottom: var(--receipt-gap); break-inside: avoid; }
.print-receipt-table {
  width: 100%; table-layout: fixed; border-collapse: collapse; border-bottom: 1px solid currentColor;
  font-size: calc(6.5pt * var(--receipt-scale)); font-variant-numeric: tabular-nums;
}
.print-receipt-table thead { border-bottom: 1px solid currentColor; }
.print-receipt-table tr { break-inside: avoid; }
.print-receipt-table th, .print-receipt-table td {
  padding: var(--receipt-row-pad) 0 var(--receipt-row-pad) 2pt;
  vertical-align: top; text-align: right; overflow-wrap: anywhere;
}
.print-receipt-table th { font-size: calc(6pt * var(--receipt-scale)); }
.print-receipt-table .receipt-col-name { text-align: left; }
.print-receipt-table :is(th, td):first-child { padding-left: 0; }
.print-receipt-table th.receipt-col-quantity { width: 15%; }
.print-receipt-table th.receipt-col-unitPrice, .print-receipt-table th.receipt-col-amount { width: 19%; }
.print-receipt-summary { margin: var(--receipt-gap) 0 0; break-inside: avoid; }
.print-receipt-summary div { display: flex; justify-content: space-between; gap: 3pt; padding: var(--receipt-row-pad) 0; }
.print-receipt-summary dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }
.print-receipt-summary .print-receipt-total {
  margin-top: var(--receipt-gap); padding-top: 2pt; border-top: 1px solid currentColor;
  font-size: calc(8.5pt * var(--receipt-scale)); font-weight: 700;
}
.print-receipt-note, .thermal-sheet .receipt-footer-message { margin-top: var(--receipt-gap); }

@media print {
  @page receipt { margin: 4mm 3mm; }
  body:has(#receipt-dialog[open]):has(#browser-print-receipt > *) { background: #fff; color: #000; }
  body:has(#receipt-dialog[open]):has(#browser-print-receipt > *) > :not(#browser-print-receipt),
  body:has(#receipt-dialog[open]):has(#browser-print-receipt > *) dialog::backdrop { display: none !important; }
  body:has(#receipt-dialog[open]):has(#browser-print-receipt > *) > #browser-print-receipt {
    display: block; page: receipt;
  }
  #browser-print-receipt .thermal-sheet { margin: 0 auto; }
}

footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 23px; padding: 13px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.account-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(22px, var(--safe-top)) max(15px, var(--safe-right)) max(22px, var(--safe-bottom)) max(15px, var(--safe-left));
}
.ios-app .account-screen { background: linear-gradient(var(--navy) var(--safe-top), var(--canvas) var(--safe-top)); }
.ios-app #show-install { display: none; }
.account-layout { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1fr); width: min(860px, 100%); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 20px 50px #192d451a; }
.account-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(22px, 4vw, 42px);
  background: radial-gradient(ellipse at 15% 90%, #275f56 0%, transparent 63%), linear-gradient(150deg, #111f30, #1c394a);
  color: #edf4fb;
}
.account-story .eyebrow { color: #a9edda; margin-bottom: 9px; }
.account-story h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.045em; }
.account-story p:not(.eyebrow) { max-width: 290px; margin-top: 13px; color: #d3e3ee; }
.account-private { display: flex; align-items: center; gap: 8px; color: #c1dce4; font-size: 12px; }
.account-private .icon { color: #8ee9ce; }
.account-card.panel { padding: clamp(24px, 4vw, 42px); border: 0; border-radius: 0; box-shadow: none; }
.account-card > .account-brand { display: none; }
.account-card h1 { font-size: clamp(29px, 4.5vw, 42px); }
.account-tabs { display: flex; gap: 7px; margin: 19px 0 15px; }
.account-tabs .btn { flex: 1; }
.account-form { display: grid; gap: 13px; }
.account-form input, .account-form > button.btn { width: 100%; }
.account-form .form-error { margin-top: 0; }
.account-message { margin-bottom: 10px; padding: 10px 12px; border-radius: 9px; background: var(--wash); color: var(--accent-dark); font-size: 13px; overflow-wrap: anywhere; }
.account-password { position: relative; }
.account-password input { width: 100%; padding-inline-end: 84px; }
.account-password .password-toggle { position: absolute; inset-inline-end: 3px; bottom: 2px; min-height: 40px; padding: 0 9px; border-color: transparent; color: var(--accent-dark); font-size: 12px; }
.account-text-button { justify-self: center; min-height: 44px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--accent-dark); font-size: 14px; font-weight: 700; }
.account-text-button:hover { background: var(--wash); }

@media (min-width: 1180px) {
  #sale-form > :first-child .field-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .overview-panels { grid-template-columns: minmax(0, 1fr); }
  .expense-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .expense-row .btn { grid-column: auto; }
}
@media (max-width: 780px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  :root { --tab-height: calc(63px + var(--safe-bottom)); scroll-padding-bottom: var(--tab-height); }
  .shell { display: block; min-height: 100dvh; padding-bottom: var(--tab-height); }
  .sidebar { position: static; height: 0; padding: 0; }
  .sidebar .brand, .nav-caption, .nav-wide, .sidebar-foot { display: none; }
  .mobile-brand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; min-height: 44px; }
  .mobile-brand img { border-radius: 8px; }
  .nav-short { display: inline; }
  .main-nav {
    position: fixed;
    z-index: 5;
    bottom: 0;
    left: 0;
    right: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    overflow: visible;
    padding: 6px max(8px, var(--safe-right)) calc(6px + var(--safe-bottom)) max(8px, var(--safe-left));
    background: var(--navy);
    border-top: 1px solid var(--nav-border);
  }
  .main-nav a, .main-nav button { flex-direction: column; justify-content: center; gap: 2px; min-height: 50px; padding: 4px 2px; font-size: 11px; white-space: nowrap; text-align: center; }
  .main-nav #open-more-nav { display: flex; }
  .main-nav a.nav-secondary { display: none; }
  .main-nav .icon { width: 19px; height: 19px; }
  main { padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right)); }
  .top { min-height: calc(55px + var(--safe-top)); padding-top: var(--safe-top); gap: 7px; }
  #crumb { display: none; }
  .account-tools { flex: 1 1 auto; }
  .profile-button.btn { margin-right: auto; max-width: min(250px, 52vw); }
  .sync-panel { min-height: 31px; }
  .view { padding-top: 8px; }
  #sale-form { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 570px) {
  .product-heading { flex-wrap: wrap; }
  .report-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-fields label:first-child, .report-fields button { grid-column: 1/-1; }
  .report-list li { gap: 4px 8px; padding-inline: 11px; }
  .report-days li { grid-template-columns: minmax(0, 1fr) auto; }
  .report-days time { grid-column: 1; }
  .report-days button { grid-column: 2; grid-row: 1 / span 2; }
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-aside { display: none; }
  .account-card > .account-brand { display: flex; margin-bottom: 20px; }
  .account-card > .account-brand img { width: 36px; height: 36px; }
  .heading { align-items: flex-start; margin-bottom: 14px; }
  .heading .btn { margin-top: 5px; }
  .intro { font-size: 13px; }
  .overview-heading { justify-content: space-between; width: 100%; gap: 8px; }
  .overview-heading .btn.primary { padding-inline: 9px; }
  .overview-heading .btn .icon { width: 15px; height: 15px; }
  .date-controls { width: 100%; gap: 6px; }
  .date-controls input[type=date] { flex: 1; min-width: 102px; }
  .metrics { gap: 7px; }
  .metric { padding: 9px 8px; border-radius: 10px; }
  .metric-top { font-size: 11px; gap: 4px; margin-bottom: 7px; }
  .currency-symbol { width: 21px; height: 21px; border-radius: 6px; font-size: 13px; }
  .amount { font-size: clamp(15px, 4.6vw, 23px); }
  .metric-breakdown { margin-top: 8px; gap: 4px; font-size: 11px; }
  .metric-breakdown span, .metric-breakdown b { display: block; }
  #metrics .metric-unit, #metrics .metric-zero, #metrics .metric-breakdown:not(:has(span:not(.metric-zero))) { display: none; }
  .panel-head, .sale-entry, .expense-row, .sales-controls, .product-row { padding-inline: 11px; }
  .form-panel { padding: 12px; }
  .field-grid { gap: 8px; }
  .line, .line.with-vat { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .product-actions { flex-direction: column; align-items: stretch; }
  .line > .product-picker { grid-column: 1/-1; }
  .line .vat-field { grid-column: 1/3; }
  .product-fields label:first-child { grid-column: 1/-1; }
}
@media (max-width: 420px) {
  .account-tools .btn { font-size: 12px; padding-inline: 8px; }
  .form-actions { padding: 8px; gap: 5px; }
  .sale-submit-buttons .btn { padding-inline: 7px; font-size: 12px; }
  .form-actions strong { font-size: 20px; }
}
@media (display-mode: standalone) {
  #show-install { display: none; }
}

.inventory-fields { min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 16px 0; }
.inventory-fields legend { font-weight: 700; padding: 0 5px; }
#product-variant-fields { display: grid; gap: 9px; margin-top: 9px; }
.warehouse-panel { margin-top: 14px; }
.warehouse-panel .panel-head input { max-width: 240px; }
.warehouse-empty, #warehouse-status { padding: 11px 14px; }
.warehouse-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--border); }
.warehouse-summary small { display: block; margin-top: 4px; color: var(--muted); }
.warehouse-entry summary { cursor: pointer; }
.warehouse-entry summary::after { content: '+'; margin-left: 4px; color: var(--muted); }
.warehouse-entry[open] summary::after { content: '−'; }
.warehouse-summary > strong { margin-left: auto; text-align: right; }
.warehouse-items { margin: 0; padding: 0 14px; list-style: none; }
.warehouse-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; }
.warehouse-items li strong { text-align: right; }
.warehouse-movement { padding: 0 14px 12px; }
.warehouse-movement .warehouse-items { padding-inline: 0; }
.warehouse-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
#warehouse-lines { margin-top: 10px; }
.warehouse-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.warehouse-line input, #warehouse-note { min-width: 0; width: 100%; }
#warehouse-form select { min-height: 44px; }
.warehouse-line.with-variants > .product-picker { grid-column: 1/3; }
.warehouse-line .warehouse-remove { grid-column: 3; grid-row: 1; }
.warehouse-variants { grid-column: 1/-1; min-width: 0; margin: 4px 0 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--border); }
.warehouse-variants legend { font-weight: 750; padding-right: 7px; }
.warehouse-variants p { font-size: 13px; }
.warehouse-variant-quantities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 94px), 1fr)); gap: 8px; margin-top: 9px; }
.warehouse-variant-quantities label { min-width: 0; overflow-wrap: anywhere; }
#warehouse-add-line { margin: 10px 0; }
@media (max-width: 570px) {
  .transfer-form .field-grid { grid-template-columns: minmax(0, 1fr); }
  .warehouse-line > .product-picker, .warehouse-simple { grid-column: 1/3; }
  .warehouse-panel .panel-head input { max-width: 46%; }
}

.operation-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.view > .operation-actions, #history-form > .field-grid, #cash-filter > .field-grid, #sale-credit-fields,
.dialog-body > .operation-actions { margin-bottom: 12px; }
.operation-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.operation-search label { flex: 1 1 170px; }
.operation-status { padding: 10px 16px; margin: 0; }
.operation-status:empty { display: none; }
.operation-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; }
.operation-list li > div { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.operation-list small, .operation-events small { display: block; margin-top: 4px; }
.operation-events li { display: block; overflow-wrap: anywhere; }
.return-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; margin: 12px 0; }
#history-detail, #customer-detail { width: min(720px, calc(100% - 24px)); }
#return-form > .btn, #customer-form > .btn, #collection-form > .btn { margin-top: 12px; }
#return-form > h3 { margin: 14px 0 8px; }
#return-form > p { margin: 10px 0; }