/* Mobile presentation: edit independently from desktop styles. */
:root {
  color-scheme: light;
  --bg: #dfe6ef;
  --bg-strong: #edf3f8;
  --text: #111827;
  --muted: #526071;
  --line: rgba(15, 23, 42, 0.16);
  --panel: rgba(248, 250, 252, 0.88);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --blue: #006495;
  --blue-dark: #006495;
  --accent: var(--blue);
  --mint: #00a880;
  --rose: #ff3b5f;
  --amber: #b7791f;
  --ink: #1f2937;
  --radius: 22px;
  --radius-small: 14px;
  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: var(--font);
}
@media (max-width: 760px) {
  body.products-mode .mobile-orders-section-switch,
  body.products-mode #mobileOrdersSectionSwitch {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.products-mode:has(#productMobileDetailDialog[open]) .standard-topbar .mobile-orders-section-switch,
  body.products-mode:has(#productMobileDetailDialog[open]) .standard-topbar #mobileOrdersSectionSwitch {
    display: none !important;
  }

  body[data-mobile-view="orders"] .standard-topbar .standard-search-box { grid-column: 2 / -1; width: 100%; min-width: 0; }
  body[data-mobile-view="orders"] .standard-topbar { grid-template-columns: 40px minmax(0, 1fr) 40px 40px; }
  body[data-mobile-view="orders"] .standard-topbar .standard-search-box { grid-column: 2; }
  body[data-mobile-view="orders"] .standard-topbar .mobile-module-sort { grid-column: 3; }
  body.mobile-home-mode .mobile-app-header {
    margin-top: 0;
  }

}

@media (max-width: 760px) {
  body[data-mobile-view="orders"] .standard-topbar { grid-template-columns: minmax(0, 1fr) 40px minmax(82px, auto) !important; }
  body[data-mobile-view="orders"] .standard-topbar .standard-search-box { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; }
  body[data-mobile-view="orders"] .standard-topbar .mobile-module-filter { grid-column: 2 !important; grid-row: 1 !important; }
  body[data-mobile-view="orders"] .standard-topbar .mobile-orders-section-switch:not(.is-hidden) { grid-column: 3 !important; grid-row: 1 !important; }
  body[data-mobile-view="orders"] .standard-topbar .mobile-module-sort { grid-column: 3 !important; grid-row: 1 !important; }
}

.purchase-receipt-summary-banner {
  display: none;
}

@media (max-width: 760px) {
  body.mobile-layout .desktop-orders-list,
  body.mobile-layout .desktop-purchase-receipts-list,
  body.mobile-layout .desktop-document-table-scroll {
    display: none !important;
  }

  .purchase-receipts-status-tabs {
    display: none !important;
  }
  body[data-mobile-view="purchaseReceipts"] .standard-topbar { box-sizing: border-box; grid-template-columns: minmax(0,1fr) 40px 40px; grid-template-rows: 40px; gap: 8px; width: 100%; height: calc(58px + env(safe-area-inset-top)); min-height: calc(58px + env(safe-area-inset-top)); margin: 0 0 8px; padding: calc(8px + env(safe-area-inset-top)) 14px 10px; border: 0; border-radius: 0; background: #006495; box-shadow: 0 2px 6px #0f172a12; }
  body[data-mobile-view="purchaseReceipts"] .standard-topbar > .mobile-subpage-back { display: none; }
  body[data-mobile-view="purchaseReceipts"] .standard-search-box { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; background: #fff; border: 0; }
  body[data-mobile-view="purchaseReceipts"] #mobileModuleFilterButton { grid-column: 2; grid-row: 1; border-color: #ffffff30; background: #ffffff26; color: #fff; }
  body[data-mobile-view="purchaseReceipts"] #mobileModuleSortButton { grid-column: 3; grid-row: 1; border-color: #ffffff30; background: #ffffff26; color: #fff; }
  body[data-mobile-view="purchaseReceipts"] #mobileModuleSummary { display: none; }
  body[data-mobile-view="purchaseReceipts"] .main { background: #faf8ff; }
  body[data-mobile-view="purchaseReceipts"] #purchaseReceiptsView { padding: 0 16px 16px; }
  .pn-mobile-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; font: 12px/16px Inter,Arial,sans-serif; color: #131b2e; }
  .pn-mobile-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
  .pn-mobile-filters button { flex-shrink: 0; height: 28px; min-height: 28px; padding: 0 12px; border: 1px solid #c3c5d94d; border-radius: 999px; background: #fff; font: 500 12px/16px Inter,Arial,sans-serif; }
  .pn-mobile-filters button.active { border-color: #006495; background: #006495; color: #fff; }
  .pn-mobile-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border: 1px solid #c3c5d933; border-radius: 12px; background: #fff; }
  .pn-mobile-summary > div { min-width: 0; }
  .pn-mobile-summary > div:last-child { padding-left: 8px; border-left: 1px solid #c3c5d940; text-align: right; }
  .pn-mobile-summary small { display: block; font-size: 11px; color: #434656; }
  .pn-mobile-summary strong { display: inline-block; color: #006495; font: 700 15px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pn-mobile-summary > div:last-child strong { color: #ba1a1a; }
  .pn-mobile-summary span { font-size: 11px; margin-left: 4px; }
  .pn-mobile-day { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; padding: 0 4px; }
  .pn-mobile-day strong { display: flex; gap: 6px; align-items: center; font-size: 13px; }
  .pn-mobile-day .icon,.pn-mobile-day svg { width: 17px; height: 17px; color: #006495; }
  .pn-mobile-day > span { font-size: 12px; color: #434656; }
  .pn-mobile-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #c3c5d940; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px #0000000d; }
  .pn-mobile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .pn-mobile-supplier { display: flex; gap: 10px; min-width: 0; flex: 1; }
  .pn-mobile-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #dce1ff; color: #00164f; font-weight: 700; font-size: 14px; }
  .pn-mobile-supplier > div:last-child { min-width: 0; }
  .pn-mobile-supplier strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pn-mobile-supplier small { display: block; margin-top: 2px; font-size: 12px; overflow-wrap: anywhere; }
  .pn-mobile-amount { display: grid; gap: 4px; justify-items: end; max-width: 48%; text-align: right; }
  .pn-mobile-amount strong { font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pn-mobile-amount > span { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
  .pn-mobile-amount .has-debt { color: #ba1a1a; background: #ffdad6; }
  .pn-mobile-amount .is-paid { color: #00714d; background: #6cf8bb; }
  .pn-mobile-preview { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #f2f3ff; }
  .pn-mobile-preview > div { display: flex; gap: 4px; flex-shrink: 0; }
  .pn-mobile-item-preview { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: #434656; font-size: 12px; }
  .pn-mobile-item-preview > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pn-mobile-item-preview .icon { flex: 0 0 15px; color: #737687; }
  body[data-mobile-view="products"] #mobileModuleSummary { display: none; }
  html:has(body[data-mobile-view="products"]) { scrollbar-width:none; }
  html:has(body[data-mobile-view="products"])::-webkit-scrollbar { width:0;height:0;display:none; }
  body[data-mobile-view="products"] .pm-mobile-filters { scrollbar-width:none; }
  body[data-mobile-view="products"] .pm-mobile-filters::-webkit-scrollbar { width:0;height:0;display:none; }
  body[data-mobile-view="products"] #productsView { background: #faf8ff; padding: 12px 16px; }
  .pm-mobile-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; color: #131b2e; font: 14px/20px Inter,Arial,sans-serif; }
  .pm-mobile-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; margin-bottom: 4px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px #0f172a0a; }
  .pm-mobile-summary > div { min-width: 0; }
  .pm-mobile-summary > div:last-child { text-align: right; }
  .pm-mobile-summary strong { display: block; font-size: 12px; font-weight: 500; }
  .pm-mobile-summary small { display: block; color: #434656; font-size: 12px; }
  .pm-mobile-summary b { color: #006495; font-size: 18px; line-height: 24px; }
  .pm-mobile-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; margin-bottom: 4px; }
  .pm-mobile-filters button { flex-shrink: 0; min-height: 32px; padding: 6px 12px; border: 0; border-radius: 999px; background: #fff; font-size: 12px; color: #434656; }
  .pm-mobile-filters button.active { color: #fff; background: #006495; }
  .pm-mobile-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px #0f172a0a,0 2px 6px #0f172a05; }
  .pm-mobile-image { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; color: #737687; background: #f2f3ff; }
  .pm-mobile-image img { width: 100%; height: 100%; object-fit: cover; }
  .pm-mobile-identity { flex: 1; min-width: 0; }
  .pm-mobile-identity button { display: block; width: 100%; min-height: 0; padding: 0; border: 0; background: none; text-align: left; color: #131b2e; font-size: 14px; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pm-mobile-identity small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #434656; font-size: 12px; }
  .pm-mobile-price { flex: 0 0 auto; max-width: 38%; display: grid; justify-items: end; gap: 4px; }
  .pm-mobile-price strong { font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pm-mobile-price span { padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 14px; }
  .pm-mobile-price .available { color: #00714d; background: #6cf8bb66; }.pm-mobile-price .low { color: #2a1700; background: #ffddb8; }.pm-mobile-price .empty { color: #93000a; background: #ffdad6; }
  .pm-detail-dialog { width: calc(100% - 32px); max-width: 440px; max-height: 90dvh; margin: auto; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: #fff; color: #131b2e; box-shadow: 0 25px 50px #00000040; font: 12px/16px Inter,Arial,sans-serif; }
  .pm-detail-dialog::backdrop { background: #0f172a99; backdrop-filter: blur(4px); }
  .pm-detail-card { display: flex; flex-direction: column; max-height: 90dvh; }
  .pm-detail-header { display: flex; align-items: center; gap: 8px; padding: 20px 20px 12px; border-bottom: 1px solid #c3c5d94d; flex-shrink: 0; }
  .pm-detail-header > .icon,.pm-detail-header > .icon svg { width: 22px; height: 22px; color: #006495; }
  .pm-detail-header h2 { margin: 0; font: 700 18px/24px "Plus Jakarta Sans",Arial,sans-serif; }
  .pm-detail-header button { display: grid; place-items: center; margin-left: auto; padding: 0; width: 36px; height: 36px; min-height: 36px; border: 0; border-radius: 50%; background: #e2e7ff99; color: #434656; font-size: 22px; }
  .pm-detail-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; }
  html:has(#productMobileDetailDialog[open]),body:has(#productMobileDetailDialog[open]) { overflow: hidden; }
  .pm-detail-body > section,.pm-detail-tabs { flex-shrink: 0; }
  .pm-detail-profile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #dce1ff4d; }
  .pm-detail-image { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border: 1px solid #c3c5d94d; border-radius: 12px; overflow: hidden; background: #f2f3ff; }
  .pm-detail-image img { width: 100%; height: 100%; object-fit: cover; }
  .pm-detail-profile > div:last-child { min-width: 0; flex: 1; }
  .pm-detail-profile h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pm-detail-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: #434656; font-size: 12px; }
  .pm-detail-stock { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
  .pm-detail-stock.available { color: #00714d; background: #6cf8bb; }.pm-detail-stock.empty { color: #93000a; background: #ffdad6; }
  .pm-detail-tabs { display: flex; gap: 0; padding: 4px; border-radius: 12px; background: #f2f3ff; }
  .pm-detail-tabs button { flex: 1; min-width: 0; min-height: 32px; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: #434656; font-size: 13px; font-weight: 500; white-space: nowrap; }
  .pm-detail-tabs button.active { color: #006495; background: #fff; box-shadow: 0 1px 3px #0000000d; font-weight: 600; }
  .pm-detail-kpis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .pm-detail-kpis > div { display: grid; gap: 4px; padding: 12px; border-radius: 16px; background: #f2f3ffb3; }
  .pm-detail-kpis span { color: #434656; font-size: 12px; font-weight: 500; }
  .pm-detail-kpis b { color: #006495; font-size: 18px; line-height: 24px; overflow-wrap: anywhere; }
  .pm-detail-kpis > div:last-child b { color: #006c49; }
  .pm-detail-kpis small { font-size: 11px; color: #737687; font-weight: 400; }
  .pm-detail-info { display: grid; gap: 10px; padding: 14px; margin-top: 16px; border: 1px solid #c3c5d94d; border-radius: 16px; }
  .pm-detail-info > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #c3c5d933; }
  .pm-detail-info > div:last-child { border: 0; }
  .pm-detail-info span { color: #434656; }.pm-detail-info strong { min-width: 0; text-align: right; overflow-wrap: anywhere; font-weight: 600; }
  .pm-detail-history-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #dce1ff4d; }
  .pm-detail-history-summary small { color: #434656; font-size: 11px; }
  .pm-detail-history { display: grid; gap: 10px; margin-top: 12px; }
  .pm-detail-history article { display: grid; gap: 6px; padding: 12px; border: 1px solid #c3c5d94d; border-radius: 12px; background: #f2f3ffb3; box-shadow: 0 1px 3px #0000000d; }
  .pm-detail-history article > div,.pm-detail-history article footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
  .pm-detail-history b { color: #006495; }.pm-detail-history small,.pm-detail-history footer span { color: #737687; font-size: 11px; }
  .pm-detail-history article footer { padding-top: 4px; border-top: 1px solid #c3c5d933; }
  .pm-detail-actions { display: flex; flex-shrink: 0; gap: 12px; padding: 16px; border-top: 1px solid #c3c5d94d; background: #fff; }
  .pm-detail-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 16px; border: 1px solid #7376874d; border-radius: 12px; background: #fff; color: #131b2e; font: 600 12px/16px Inter,Arial,sans-serif; }
  .pm-detail-actions button:last-child { flex: 1; padding: 0 8px; border-color: #006495; background: #006495; color: #fff; box-shadow: 0 4px 6px #0000001a; }
  .pm-detail-actions .icon,.pm-detail-actions svg { width: 18px; height: 18px; }
  .pm-detail-dialog [hidden] { display: none; }
  .pm-create-dialog { width: calc(100% - 32px); max-width: 440px; max-height: 90dvh; margin: auto; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #fff; color: #131b2e; box-shadow: 0 25px 50px #00000040; font: 14px/20px Inter,Arial,sans-serif; }
  .pm-create-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
  .pm-create-card { display: flex; flex-direction: column; max-height: 90dvh; margin: 0; }
  .pm-create-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px; border-bottom: 1px solid #c3c5d94d; flex-shrink: 0; }
  .pm-create-card h2 { margin: 0; font: 700 18px/24px "Plus Jakarta Sans",Arial,sans-serif; }
  .pm-create-card > header button { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #434656; font-size: 22px; }
  .pm-create-body { display: grid; gap: 16px; min-height: 0; overflow-y: auto; padding: 20px; }
  .pm-create-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 112px; margin: 0; padding: 0 16px; border: 2px dashed #c3c5d9; border-radius: 12px; background: #f2f3ff99; text-align: center; cursor: pointer; }
  .pm-create-upload strong { color: #006495; font-size: 12px; font-weight: 600; }
  .pm-create-upload small { color: #737687; font-size: 11px; }
  .pm-create-upload .icon,.pm-create-upload svg { width: 28px; height: 28px; color: #006495; }
  .pm-create-upload img { max-width: 100%; max-height: 65px; border-radius: 8px; object-fit: contain; }
  .pm-create-upload:has(img:not([hidden])) > .icon { display: none; }
  .pm-create-field { display: grid; gap: 6px; margin: 0; min-width: 0; }
  .pm-create-field > span { font-size: 12px; font-weight: 500; color: #131b2e; }
  .pm-create-field > span b { color: #ba1a1a; }
  .pm-create-field input:not([type=hidden]),.pm-create-field select { width: 100%; box-sizing: border-box; min-width: 0; min-height: 42px; padding: 10px 14px; border: 1px solid #c3c5d966; border-radius: 12px; background: #f2f3ff; color: #131b2e; font: 400 12px/20px Inter,Arial,sans-serif; box-shadow: none; }
  .pm-create-field input[name=name] { font-size: 14px; }
  .pm-create-field input:focus,.pm-create-field select:focus { outline: 1px solid #006495; }
  .pm-create-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .pm-create-money,.pm-create-barcode { position: relative; }
  .pm-create-money input { padding-right: 32px; font-weight: 600; }
  .pm-create-money i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #737687; font-style: normal; }
  .pm-create-categories { display: flex; flex-wrap: wrap; gap: 8px; }
  .pm-create-categories button { min-height: 26px; padding: 4px 12px; border: 0; border-radius: 999px; background: #eaedff; color: #434656; font: 500 12px/16px Inter,Arial,sans-serif; }
  .pm-create-categories button.active { background: #006495; color: #fff; }
  .pm-create-barcode input { padding-right: 40px; }
  .pm-create-barcode button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #006495; }
  .pm-create-barcode .icon,.pm-create-barcode svg { width: 20px; height: 20px; }
  .pm-create-card > footer { display: flex; gap: 12px; flex-shrink: 0; padding: 16px; border-top: 1px solid #c3c5d94d; background: #fff; }
  .pm-create-card > footer button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: #eaedff; color: #131b2e; font: 600 14px/20px Inter,Arial,sans-serif; }
  .pm-create-card > footer button[type=submit] { flex: 1; background: #006495; color: #fff; box-shadow: 0 4px 6px #0000001a; }
  .pm-create-card > footer button:disabled { opacity: .5; }
  .pm-create-card > footer .icon,.pm-create-card > footer svg { width: 20px; height: 20px; }
  .pm-create-dialog [hidden] { display: none; }

  .pn-mobile-preview button { display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: #fff; color: #434656; }
  .pn-mobile-preview .icon,.pn-mobile-preview svg { width: 16px; height: 16px; }
  .pn-mobile-preview i,.pn-mobile-supplier i { margin: 0 4px; font-style: normal; color: #c3c5d9; }
  .pn-detail-dialog { width: calc(100% - 32px); max-width: 448px; max-height: 90dvh; margin: auto; padding: 0; overflow: hidden; border: 1px solid #c3c5d94d; border-radius: 16px; background: #fff; color: #131b2e; box-shadow: 0 20px 25px #00000026; font: 12px/16px Inter,Arial,sans-serif; }
  .pn-detail-dialog::backdrop { background: #131b2e66; backdrop-filter: blur(4px); }
  .pn-detail-card { display: flex; flex-direction: column; max-height: 90dvh; }
  .pn-detail-header { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #c3c5d933; background: #f2f3ff99; }
  .pn-detail-symbol { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: #0064951a; color: #006495; }
  .pn-detail-header h3 { margin: 0; font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pn-detail-header p { margin: 0; color: #434656; font-size: 11px; font-weight: 500; }
  .pn-detail-header button { display: grid; place-items: center; margin-left: auto; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #737687; font-size: 22px; }
  .pn-detail-body { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 14px; padding: 16px; overflow-y: auto; }
  .pn-detail-info,.pn-detail-finance { display: grid; gap: 8px; padding: 12px; border: 1px solid #c3c5d933; border-radius: 12px; background: #f2f3ff; }
  .pn-detail-info > div,.pn-detail-finance > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .pn-detail-info span,.pn-detail-finance span { color: #434656; }
  .pn-detail-info strong { min-width: 0; max-width: 65%; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
  .pn-detail-body h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; }
  .pn-detail-body h4 .icon,.pn-detail-body h4 svg { width: 16px; height: 16px; color: #006495; }
  .pn-detail-items { display: grid; gap: 8px; }
  .pn-detail-items article { display: grid; gap: 4px; padding: 10px; border: 1px solid #c3c5d940; border-radius: 12px; background: #fff; }
  .pn-detail-items article > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .pn-detail-items article > div:first-child { font-size: 13px; line-height: 18px; }
  .pn-detail-items article > div:first-child strong { min-width: 0; font-weight: 600; }
  .pn-detail-items article b { flex-shrink: 0; font-weight: 700; }
  .pn-detail-items article > div:last-child { font-size: 11px; color: #434656; flex-wrap: wrap; }
  .pn-detail-items small { font-size: 11px; color: #737687; }
  .pn-detail-grand { padding-top: 8px; border-top: 1px solid #c3c5d940; font-size: 13px; }
  .pn-detail-grand b { color: #006495; font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pn-detail-paid { padding-top: 4px; border-top: 1px solid #c3c5d926; font-size: 11px; }
  .pn-detail-actions { display: flex; gap: 8px; flex-shrink: 0; padding: 14px; border-top: 1px solid #c3c5d933; background: #fff; }
  .pn-detail-actions button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; height: 40px; padding: 0 12px; border: 1px solid #c3c5d94d; border-radius: 12px; background: #fff; color: #434656; font: 500 12px/16px Inter,Arial,sans-serif; }
  .pn-detail-actions button:nth-child(2) { width: 40px; padding: 0; flex-shrink: 0; }
  .pn-detail-actions button:last-child { flex: 1; border-color: #006495; background: #006495; color: #fff; font-size: 13px; font-weight: 600; }
  .pn-detail-actions button:disabled { opacity: .5; }
  .pn-detail-actions .icon,.pn-detail-actions svg { width: 18px; height: 18px; }
  body[data-mobile-view="purchaseEntry"] .standard-topbar,
  body[data-mobile-view="purchaseEntry"] .mobile-app-header,
  body[data-mobile-view="purchaseEntry"] .mobile-app-dock,
  body[data-mobile-view="purchaseEntry"] #purchaseEntryView > .purchase-workspace { display: none; }
  body[data-mobile-view="purchaseEntry"] .main { padding: 0; background: #f2f3ff; }
  body[data-mobile-view="purchaseEntry"] #purchaseEntryView { padding: 0; }
  .pe-mobile-shell { color: #131b2e; background: #f2f3ff; min-height: 100dvh; padding-bottom: 180px; font: 14px/20px Inter,Arial,sans-serif; }
  .pe-mobile-shell[hidden] { display: none; }
  .pe-mobile-header { padding: calc(12px + env(safe-area-inset-top)) 16px 16px; display: grid; gap: 12px; border-radius: 0 0 24px 24px; background: #006495; color: #fff; box-shadow: 0 4px 6px #0000001a; }
  .pe-mobile-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .pe-mobile-row > button { flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%; background: #ffffff26; color: #fff; font-size: 24px; }
  .pe-mobile-row [data-pe-supplier],.pe-mobile-row [data-pe-search] { flex: 1; min-width: 0; }
  .pe-mobile-header .payment-field { margin: 0; }
  .pe-search-box { display: block; position: relative; width: 100%; margin: 0; height: 44px; min-height: 44px; border: 0; border-radius: 999px; background: #fff; color: #006495; }
  .pe-search-box input { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 0 12px 0 40px; border: 0; border-radius: inherit; background: transparent; color: #131b2e; font: 400 12px/20px Inter,Arial,sans-serif; box-shadow: none; }
  .pe-search-box > .icon { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: #737687; }
  .pe-search-box > .icon svg { width: 20px; height: 20px; }
  .pe-mobile-header .purchase-topbar-search { display: block; width: 100%; min-width: 0; }
  .pe-mobile-header [data-pe-date] { flex: 0 0 106px; min-width: 0; }
  .pe-mobile-header .purchase-receipt-date-field > span { display: none; }
  .pe-mobile-header #purchaseReceiptDateDisplay { width: 100%; min-height: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: #ffffff33; color: #fff; font-size: 12px; text-align: center; }
  .pe-mobile-header .date-time-wrap { min-width: 0; width: 100%; }
  .pe-mobile-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; }
  .pe-mobile-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pe-mobile-meta label { margin: 0; width: 110px; flex: 0 0 110px; }
  .pe-mobile-meta input { width: 100%; min-height: 24px; height: 24px; border: 0; padding: 0 4px; background: transparent; color: #6ffbbe; font-size: 11px; text-align: right; }
  .pe-mobile-content { display: grid; gap: 12px; padding: 12px 16px; }
  .pe-mobile-old-debt { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px #0000000d; font-size: 12px; }
  .pe-mobile-old-debt strong { color: #ba1a1a; }
  .pe-mobile-old-debt > span:last-child { padding: 2px 8px; border-radius: 999px; background: #eaedff; font-size: 11px; }
  .pe-mobile-heading { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
  .pe-mobile-heading > strong { font: 600 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
  .pe-mobile-heading > span { padding: 2px 8px; border-radius: 999px; background: #dce1ff; font-size: 11px; }
  .pe-mobile-heading button { margin-left: auto; min-height: 28px; padding: 0; border: 0; background: none; color: #ba1a1a; font-size: 12px; white-space: nowrap; }
  .pe-mobile-content #selectedPurchaseProducts { display: grid; gap: 12px; }
  .pe-mobile-product { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px #0000000d; }
  .pe-mobile-product header { display: flex; align-items: flex-start; gap: 8px; }
  .pe-mobile-avatar { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #dce1ff; color: #00164f; font-weight: 600; }
  .pe-mobile-product header > div:nth-child(2) { flex: 1; min-width: 0; }
  .pe-mobile-product header strong { display: block; font-size: 14px; font-weight: 600; }
  .pe-mobile-product header small { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #eaedff; font-size: 10px; }
  .pe-mobile-product header b { display: block; color: #006495; margin-top: 2px; }
  .pe-mobile-product header button { flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: #e2e7ff; font-size: 18px; }
  .pe-mobile-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; margin-top: 4px; border-top: 1px solid #eaedff; }
  .pe-mobile-controls label { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }
  .pe-mobile-controls label input { width: 94px; height: 32px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: #eaedff; color: #131b2e; text-align: right; font-size: 14px; font-weight: 600; }
  .pe-mobile-controls > div { display: flex; align-items: center; padding: 2px; border-radius: 8px; background: #f2f3ff; }
  .pe-mobile-controls button { width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; }
  .pe-mobile-controls > div input { width: 40px; height: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; text-align: center; font-size: 14px; font-weight: 600; }
  .pe-mobile-product footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding-top: 4px; font-size: 11px; }
  .pe-mobile-product footer b { color: #006495; font-size: 14px; }
  .pe-mobile-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; padding: 12px 16px calc(8px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -4px 24px #00000014; }
  .pe-mobile-dock > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .pe-mobile-dock > div:first-child > span { font-size: 12px; color: #434656; }
  .pe-mobile-dock > div:first-child strong { color: #006495; font: 700 26px/36px "Plus Jakarta Sans",Arial,sans-serif; }
  .pe-mobile-dock small { padding: 2px 6px; border-radius: 999px; background: #dce1ff; font-size: 11px; }
  .pe-mobile-actions { display: flex; gap: 12px; margin-top: 8px; }
  .pe-mobile-actions > button { flex: 0 0 auto; height: 48px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: #eaedff; font-size: 14px; font-weight: 600; }
  .pe-mobile-actions > div { flex: 1; }
  .pe-mobile-actions #completePurchaseButton { width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; background: #006495; color: #fff; font-size: 14px; font-weight: 600; }
  .pe-mobile-payments .pe-payment-field { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 0; border: 0; padding: 0; font-size: 11px; }
  .pe-mobile-payments input { width: 110px; height: 26px; min-height: 26px; padding: 2px 8px; border: 1px solid #dae2fd; border-radius: 8px; font-size: 12px; text-align: right; }

  .mobile-hide-import-history {
    display: none !important;
  }

  body.sales-mode {
    --font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-y: auto;
    background: #f8fafc;
  }

  body.sales-mode .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.sales-mode .main {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: 0 0 calc(94px + env(safe-area-inset-bottom));
    background: #f8fafc;
  }

  body.sales-mode .mobile-app-header {
    display: none !important;
  }

  body.sales-mode .mobile-app-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: block !important;
  }

  body.mobile-sales-keyboard-open .mobile-app-dock {
    display: block !important;
  }

  body.mobile-sales-keyboard-open .mobile-sales-checkout-dock,
  body.mobile-sales-keyboard-open .mobile-app-dock {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.sales-mode.mobile-sales-keyboard-open .main {
    min-height: var(--mobile-sales-viewport-height, 100dvh);
  }

  body.sales-mode .sales-topbar {
    position: relative;
    z-index: 45;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: 40px 40px;
    align-items: center;
    gap: 10px 8px;
    width: 100%;
    min-height: 110px;
    margin: 0 0 12px;
    padding: max(4px, env(safe-area-inset-top)) 16px 16px;
    border: 0;
    border-radius: 0 0 26px 26px;
    background: #006495;
    box-shadow: 0 3px 8px #0f172a18;
  }

  body.sales-mode .sales-topbar.is-hidden {
    display: none;
  }

  body.sales-mode .sales-topbar > .mobile-subpage-back,
  body.sales-mode .mobile-sales-new-product {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }

  body.sales-mode .sales-topbar > .mobile-subpage-back {
    grid-column: 1;
    grid-row: 1;
  }

  body.sales-mode .mobile-sales-new-product {
    grid-column: 3;
    grid-row: 1;
  }

  body.sales-mode .sales-topbar > .topbar-left {
    display: contents;
  }

  body.sales-mode .sales-search-wrap {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body.sales-mode .sales-topbar > .topbar-left > .customer-search-wrap {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body.sales-mode .sales-topbar:has(> .mobile-sales-new-product.permission-hidden) > .topbar-left > .customer-search-wrap,
  body.sales-mode .sales-topbar:has(> .mobile-sales-new-product.is-hidden) > .topbar-left > .customer-search-wrap {
    grid-column: 2 / 4;
  }

  body.sales-mode .sales-search-wrap .search-box,
  body.sales-mode .mobile-sales-customer-slot .search-box,
  body.sales-mode .sales-topbar > .topbar-left > .customer-search-wrap .search-box {
    display: block;
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 20px;
    color: #0f172a;
    background: #ffffff;
  }

  body.sales-mode .sales-search-wrap .search-box input,
  body.sales-mode .mobile-sales-customer-slot .search-box input,
  body.sales-mode .sales-topbar > .topbar-left > .customer-search-wrap .search-box input {
    height: 40px;
    min-height: 40px;
    min-width: 0;
    padding-right: 10px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
  }

  body.sales-mode .sales-search-wrap .search-box .icon,
  body.sales-mode .mobile-sales-customer-slot .search-box .icon,
  body.sales-mode .sales-topbar > .topbar-left > .customer-search-wrap .search-box .icon {
    color: #006495;
  }

  body.sales-mode .sales-topbar .invoice-tabs,
  body.sales-mode .sales-topbar > .sales-topbar-actions {
    display: none !important;
  }

  body.sales-mode .mobile-sales-customer-slot {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
  }

  body.sales-mode .mobile-sales-customer-field,
  body.sales-mode .mobile-sales-invoice-slot,
  body.sales-mode .mobile-sales-customer-slot .customer-search-wrap {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.sales-mode .mobile-sales-invoice-slot > label {
    display: block;
    width: 100%;
  }

  body.sales-mode .mobile-sales-invoice-slot > label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body.sales-mode .mobile-sales-invoice-slot #salesInvoiceCode {
    display: block;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 20px;
    color: #0f172a;
    background: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  body.sales-mode .sales-topbar #productSuggestions {
    top: calc(100% + 7px);
    left: 0;
    width: calc(100vw - 32px);
    max-height: min(52dvh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border-color: #dce6f1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  }

  body.sales-mode .mobile-sales-customer-field #productSuggestions {
    left: 0;
    width: calc(100vw - 56px);
  }

  body.sales-mode .sales-topbar > .topbar-left > .customer-search-wrap #customerSuggestions {
    top: calc(100% + 7px);
    left: -48px;
    z-index: 60;
    width: calc(100vw - 56px);
    max-height: min(48dvh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border-color: #dce6f1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  }

  body.sales-mode .sales-topbar #customerSuggestions.show {
    gap: 4px;
  }

  body.sales-mode .sales-topbar .sales-customer-suggestion {
    min-height: 62px;
    padding: 8px 9px;
    border-color: #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
  }

  body.sales-mode .sales-topbar .sales-customer-suggestion-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 0.72rem;
  }

  body.sales-mode .sales-topbar .sales-customer-suggestion-info {
    gap: 3px;
  }

  body.sales-mode .sales-topbar .sales-customer-suggestion-info > strong {
    font-size: 0.8rem;
  }

  body.sales-mode .sales-topbar .sales-customer-suggestion-info > small {
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sales-mode .sales-topbar .sales-customer-suggestion-tier {
    max-width: 82px;
    padding: 4px 7px;
    overflow: hidden;
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sales-mode .sales-topbar #customerSuggestions .suggestion-empty {
    padding: 13px 11px 8px;
    text-align: center;
  }

  body.sales-mode .sales-topbar #customerSuggestions .suggestion-new {
    min-height: 46px;
    padding: 9px 11px;
    border: 0;
    border-radius: 12px;
    background: #f3f8ff;
  }

  body.sales-mode .sales-topbar #productSuggestions.show {
    gap: 4px;
  }

  body.sales-mode .sales-topbar .sales-product-suggestion {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 9px 10px;
    border-color: #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
  }

  body.sales-mode .sales-topbar .sales-suggestion-avatar {
    width: 40px;
    height: 40px;
    border: 1px solid #dce6f1;
    border-radius: 13px;
    background: #eef5ff;
    font-size: 0.72rem;
  }

  body.sales-mode .sales-topbar .sales-suggestion-info {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 4px;
    min-width: 0;
  }

  body.sales-mode .sales-topbar .sales-suggestion-info > strong {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 17px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.sales-mode .sales-topbar .sales-suggestion-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    color: #64748b;
    font-size: 0.7rem;
    line-height: 16px;
  }

  body.sales-mode .sales-topbar .sales-suggestion-meta > span {
    display: block;
  }

  body.sales-mode .sales-topbar .sales-suggestion-sku {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sales-mode .sales-topbar .sales-suggestion-stock {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
  }

  body.sales-mode .sales-topbar .sales-suggestion-stock.stock-value-negative {
    color: #dc2626;
    background: #fff1f2;
  }

  body.sales-mode .sales-topbar .sales-suggestion-price {
    align-self: start;
    padding-top: 2px;
    color: #006495;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 17px;
    text-align: right;
    white-space: nowrap;
  }

  body.sales-mode .sales-topbar #productSuggestions .suggestion-new {
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: #f3f8ff;
  }

  body.sales-mode #salesView {
    height: auto;
    min-height: 0;
    padding: 0 14px;
    overflow: visible;
  }

  body.sales-mode .mobile-sales-cart-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 2px 10px;
  }

  body.sales-mode .mobile-sales-cart-heading strong {
    color: #111827;
    font-size: 1.18rem;
    font-weight: 900;
  }

  body.sales-mode .mobile-sales-cart-heading span {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
  }

  body.sales-mode .sales-workspace {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  body.sales-mode #salesProductsPanel,
  body.sales-mode #salesProductsPanel.is-hidden {
    display: block !important;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.sales-mode #selectedSaleProducts {
    gap: 8px;
    max-height: none;
    overflow: visible;
  }

  body.sales-mode .mobile-sales-empty-state {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 184px;
    padding: 30px 20px;
    border: 1px solid #dbe7f3;
    border-radius: 12px;
    color: #64748b;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  }

  body.sales-mode .mobile-sales-empty-state .icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 2px;
    border-radius: 16px;
    color: #006495;
    background: #eaf3ff;
  }

  body.sales-mode .mobile-sales-empty-state .icon svg {
    width: 25px;
    height: 25px;
  }

  body.sales-mode .mobile-sales-empty-state strong {
    color: #111827;
    font-size: 0.98rem;
  }

  body.sales-mode .mobile-sales-empty-state > span:last-child {
    max-width: 245px;
    font-size: 0.78rem;
    line-height: 1.45;
  }

  body.sales-mode #salesView .sale-product-card {
    display: block;
    min-height: 0;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px #0f172a08;
  }
  body.sales-mode #salesView .mobile-sale-expanded {
    border: 2px solid #99c1d5;
  }
  body.sales-mode #salesView .mobile-sale-expanded:focus-within { border-color: #006495; }
  body.sales-mode #salesView .sale-product-card.is-promotion,
  body.sales-mode #salesView .mobile-sale-expanded.is-promotion:focus-within { border-color: #f59e0b; }
  body.sales-mode #salesView .mobile-sale-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body.sales-mode #salesView .mobile-sale-title,
  body.sales-mode #salesView .mobile-sale-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: #1e293b;
  }
  body.sales-mode #salesView .mobile-sale-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 7px;
    background: #eff6ff;
    color: #006495;
    font-size: 11px;
    font-weight: 700;
  }
  body.sales-mode #salesView .mobile-sale-avatar img { width: 100%; height: 100%; object-fit: contain; }
  body.sales-mode #salesView .mobile-sale-title strong { font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
  body.sales-mode #salesView .mobile-sale-remove {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #94a3b8;
    background: transparent;
  }
  body.sales-mode #salesView .mobile-sale-remove .icon,
  body.sales-mode #salesView .mobile-sale-remove svg { width: 16px; height: 16px; }
  body.sales-mode #salesView .mobile-sale-remove:hover { color: #e11d48; background: #fff1f2; }
  body.sales-mode #salesView .mobile-sale-line-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 8px;
    color: #64748b;
    font-size: 10px;
    line-height: 16px;
  }
  body.sales-mode #salesView .mobile-sale-line-info > span:first-child { overflow-wrap: anywhere; min-width: 0; }
  body.sales-mode #salesView .mobile-sale-line-info strong { color: #006495; font-size: 12px; }
  body.sales-mode #salesView .mobile-sale-line-money { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
  body.sales-mode #salesView .mobile-sale-line-money > span { white-space: nowrap; }
  body.sales-mode #salesView .mobile-sale-fulfillment { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  body.sales-mode #salesView .mobile-sale-discount-row { padding-top: 5px; margin-top: 8px; border-top: 1px dashed #f1f5f9; }
  body.sales-mode #salesView .mobile-sale-discount { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; min-height: 32px; }
  body.sales-mode #salesView .mobile-sale-discount label { display: flex; align-items: center; gap: 8px; margin: 0; color: #64748b; font-size: 11px; }
  body.sales-mode #salesView .mobile-sale-discount input { width: 75px; height: 24px; min-height: 24px; padding: 0 4px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; text-align: right; font-size: 12px; font-weight: 700; }
  body.sales-mode #salesView .mobile-sale-discount-modes { display: flex; padding: 2px; background: #e2e8f0; border-radius: 4px; }
  body.sales-mode #salesView .mobile-sale-discount-modes button { width: 28px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #64748b; font-size: 11px; }
  body.sales-mode #salesView .mobile-sale-discount-modes button[aria-pressed="true"] { background: white; color: #006495; font-weight: 700; }
  body.sales-mode #salesView .mobile-sale-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid #f1f5f9;
  }
  body.sales-mode #salesView .mobile-sale-quantity {
    display: flex;
    align-items: center;
    flex: 0 0 89px;
    gap: 2px;
    height: 32px;
  }
  body.sales-mode #salesView .mobile-sale-quantity button {
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    font-size: 15px;
    font-weight: 700;
  }
  body.sales-mode #salesView .mobile-sale-quantity button[data-delta="1"] { background: #eff6ff; color: #006495; }
  body.sales-mode #salesView .mobile-sale-quantity input {
    width: 29px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    color: #1e293b;
    background: transparent;
    font-weight: 700;
  }
  body.sales-mode #salesView .mobile-sale-price {
    display: flex;
    align-items: center;
    flex: 0 1 100px;
    min-width: 80px;
    max-width: 112px;
    gap: 2px;
    height: 26px;
    padding: 0 4px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #f8fafc;
    font-size: 10px;
    color: #94a3b8;
  }
  body.sales-mode #salesView .mobile-sale-price input {
    min-width: 0;
    width: 100%;
    height: 24px;
    min-height: 24px;
    font-size: 11px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #334155;
    text-align: right;
    font-weight: 600;
  }
  body.sales-mode #salesView .mobile-sale-gift,
  body.sales-mode #salesView .mobile-sale-delivered {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    background: #fffbeb;
    color: #92400e;
    font-size: 10px;
    font-weight: 500;
  }
  body.sales-mode #salesView .mobile-sale-delivered { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
  body.sales-mode #salesView .mobile-sale-gift input,
  body.sales-mode #salesView .mobile-sale-delivered input {
    width: 29px;
    min-height: 24px;
    height: 24px;
    padding: 0 2px;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    background: #fff;
    text-align: center;
    color: inherit;
    font-weight: 700;
  }
  body.sales-mode #salesView .mobile-sale-summary-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
  body.sales-mode #salesView .mobile-sale-summary-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
  body.sales-mode #salesView .mobile-sale-summary-name strong { font-size: 12px; line-height: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.sales-mode #salesView .mobile-sale-summary-name b { background: #eff6ff; color: #006495; border-radius: 3px; padding: 1px 3px; font-size: 10px; white-space: nowrap; }
  body.sales-mode #salesView .mobile-sale-summary-copy > small { color: #64748b; font-size: 10px; line-height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.sales-mode #salesView .mobile-sale-summary-money { display: grid; gap: 3px; text-align: right; flex: 0 0 auto; max-width: 34%; }
  body.sales-mode #salesView .mobile-sale-summary-money strong { font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
  body.sales-mode #salesView .mobile-sale-summary-money small { color: #94a3b8; font-size: 10px; line-height: 14px; overflow-wrap: anywhere; }
  body.sales-mode #salesView .mobile-sale-summary > .icon { width: 14px; height: 14px; flex-basis: 14px; color: #94a3b8; }
  body.sales-mode #salesView .mobile-sale-summary > .icon svg { width: 14px; height: 14px; }

  body.sales-mode #salesView > .sales-workspace > .payment-card {
    display: none !important;
  }

  body.sales-mode .mobile-sales-checkout-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #e2e8f0;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -4px 16px #0f172a0f;
    backdrop-filter: blur(16px);
  }

  body.sales-mode .mobile-sales-checkout-total {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    min-width: 0;
  }

  body.sales-mode .mobile-sales-checkout-total > span {
    display: grid;
    gap: 1px;
  }

  body.sales-mode .mobile-sales-checkout-total small {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 500;
  }

  body.sales-mode .mobile-sales-checkout-total strong {
    color: #006495;
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  body.sales-mode #mobileSalesQuantity { display: none; }

  body.sales-mode .mobile-sales-checkout-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  body.sales-mode .mobile-sales-checkout-actions button {
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    gap: 4px;
  }
  body.sales-mode .mobile-sales-checkout-actions .icon,
  body.sales-mode .mobile-sales-checkout-actions svg { width: 15px; height: 15px; flex-basis: 15px; }
  body.sales-mode #mobileSalesOpenCheckout { background: #006495; }

  @media (max-width: 360px) {
    body.sales-mode #mobileSalesSaveDraft { width: 38px; padding: 0; }
    body.sales-mode #mobileSalesSaveDraft > span:last-child { display: none; }
  }

  body.sales-mode .mobile-sales-checkout-actions button:disabled {
    cursor: default;
    opacity: 0.48;
  }

  body.mobile-sales-checkout-open {
    overflow: hidden;
  }

  body.mobile-sales-checkout-open .main {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #f4f8fd;
  }

  body.mobile-sales-checkout-open .sales-topbar,
  body.mobile-sales-checkout-open .mobile-sales-cart-heading,
  body.mobile-sales-checkout-open #salesProductsPanel,
  body.mobile-sales-checkout-open .mobile-sales-checkout-dock {
    display: none !important;
  }

  body.mobile-sales-checkout-open #salesView {
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  body.mobile-sales-checkout-open .sales-workspace {
    height: 100dvh;
  }

  body.mobile-sales-checkout-open #salesView > .sales-workspace > .payment-card {
    position: fixed;
    inset: 0;
    z-index: 100;
    grid-column: auto;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: none;
  }
  body.mobile-sales-checkout-open .mobile-sales-checkout-customer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: #0060a8;
    color: #fff;
    box-shadow: 0 2px 6px #0f172a12;
  }
  body.mobile-sales-checkout-open .mobile-sales-checkout-header { display: block; flex: 0 0 36px; }
  body.mobile-sales-checkout-open .mobile-sales-checkout-back,
  body.mobile-sales-checkout-open .mobile-checkout-print {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #ffffff25;
  }
  body.mobile-sales-checkout-open .mobile-checkout-print:disabled { opacity: .55; cursor: not-allowed; }
  body.mobile-sales-checkout-open .mobile-sales-checkout-customer { display: block; min-width: 0; flex: 1; }
  body.mobile-sales-checkout-open .mobile-sales-checkout-customer > .icon,
  body.mobile-sales-checkout-open .mobile-sales-checkout-customer small { display: none; }
  body.mobile-sales-checkout-open .mobile-sales-checkout-customer strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    overflow-wrap: anywhere;
  }
  body.mobile-sales-checkout-open #mobileCheckoutBody {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding: 16px;
  }
  body.mobile-sales-checkout-open #mobileCheckoutBody > * { flex-shrink: 0; }
  body.mobile-sales-checkout-open .mobile-sales-checkout-items {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) minmax(80px, auto);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 72px;
    padding: 14px;
    border: 1px solid #dceef8;
    border-radius: 12px;
    background: #f0f9ff;
  }
  body.mobile-sales-checkout-open .mobile-sales-checkout-items > .icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #006495;
    background: #e0f2fe;
  }
  body.mobile-sales-checkout-open .mobile-sales-checkout-items > span:not(.icon) { display: grid; min-width: 0; gap: 4px; }
  body.mobile-sales-checkout-open .mobile-sales-checkout-items small { color: #64748b; font-size: 11px; font-weight: 500; }
  body.mobile-sales-checkout-open .mobile-sales-checkout-items strong { color: #1e293b; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
  body.mobile-sales-checkout-open .mobile-checkout-brief-total { text-align: right; }
  body.mobile-sales-checkout-open #mobileSalesCheckoutTotal { color: #0f172a; font-size: 16px; font-weight: 800; }
  body.mobile-sales-checkout-open #salesView .invoice-meta-grid,
  body.mobile-sales-checkout-open #salesView .payment-summary,
  body.mobile-sales-checkout-open #salesView > .sales-workspace > .payment-card > .customer-search-wrap { display: none; }
  body.mobile-sales-checkout-open #mobileCheckoutOrderFields,
  body.mobile-sales-checkout-open #mobileCheckoutPaymentFields {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px #0f172a05;
  }
  body.mobile-sales-checkout-open #salesView .payment-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
  }
  body.mobile-sales-checkout-open #salesView .payment-row > span:first-child {
    color: #475569;
    font-size: 12px;
    line-height: 17px;
    font-weight: 700;
  }
  body.mobile-sales-checkout-open #salesView .payment-row input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    text-align: right;
  }
  body.mobile-sales-checkout-open #salesView .discount-control { display: flex; width: 100%; }
  body.mobile-sales-checkout-open #salesView .discount-control #salesDiscount { width: 100% !important; flex: 1; }
  body.mobile-sales-checkout-open #salesDiscountModeButton { flex: 0 0 40px; height: 44px; border-radius: 8px; }
  body.mobile-sales-checkout-open #salesView .payment-due-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 8px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
  }
  body.mobile-sales-checkout-open #salesView .payment-due-row strong { color: #006495; font-size: 24px; line-height: 30px; overflow-wrap: anywhere; }
  body.mobile-sales-checkout-open #salesView .sales-delivery-options,
  body.mobile-sales-checkout-open #salesView .payment-method-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 10px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }
  body.mobile-sales-checkout-open #salesView .sales-delivery-option-body { min-height: 48px; border-radius: 8px; padding: 8px; }
  body.mobile-sales-checkout-open #salesView .payment-method-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
  }
  body.mobile-sales-checkout-open #salesView .payment-method-option.active { color: #fff; border-color: #006495; background: #006495; }
  body.mobile-sales-checkout-open #salesView .payment-method-option:not(.sales-pos-only) > .icon { display: inline-grid !important; width: 18px; height: 18px; }
  @media (max-width: 360px) {
    body.mobile-sales-checkout-open #salesView .payment-method-option { font-size: 12px; white-space: nowrap; }
    body.mobile-sales-checkout-open #salesView .payment-method-option:not(.sales-pos-only) > .icon { display: none !important; }
  }
  body.mobile-sales-checkout-open #salesView #salesPaidAmount { font-weight: 800; color: #00527c; border: 2px solid #cce5f4; min-height: 48px; }
  body.mobile-sales-checkout-open #salesView #salesPosQuickAmounts {
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0;
  }
  body.mobile-sales-checkout-open #salesPosQuickAmounts button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
  }
  body.mobile-sales-checkout-open #salesPosQuickAmounts button:first-child { background: #f0f9ff; border-color: #bae6fd; color: #006495; }
  body.mobile-sales-checkout-open #salesView .sales-payment-signature-field {
    gap: 8px;
    padding: 16px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fff;
  }
  body.mobile-sales-checkout-open #salesView .sales-payment-signature-field .payment-signature-pad { height: 112px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; }
  body.mobile-sales-checkout-open .payment-signature-heading { font-size: 12px; gap: 8px; }
  body.mobile-sales-checkout-open #salesView .sales-pos-actions {
    display: block;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 -3px 12px #0f172a08;
  }
  body.mobile-sales-checkout-open #completeSaleButton {
    position: static;
    width: 100%;
    margin: 0;
    min-height: 48px;
    border-radius: 8px;
    background: #006495;
    font-size: 16px;
    font-weight: 700;
    pointer-events: auto;
    touch-action: manipulation;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not(.cme-dialog input):not(.cm-detail-dialog input),
  select:not(.cme-dialog select),
  textarea:not(.cme-dialog textarea) {
    font-size: 16px !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-family: var(--font);
  background:
    linear-gradient(145deg, #d7e0ea 0%, #eef3f8 46%, #d5dde8 100%),
    radial-gradient(circle at top right, rgba(10, 132, 255, 0.12), transparent 38%);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  letter-spacing: 0;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(180, 193, 209, 0.18)),
    var(--bg);
}

body.sales-mode {
  overflow: hidden;
}

body.auth-mode {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

body,
button,
input,
select,
textarea,
table,
dialog {
  font-family: var(--font);
}

#salesDiscount,
#salesPaidAmount {
  appearance: textfield;
  -moz-appearance: textfield;
}

#salesPaidAmount {
  text-align: right;
}

#salesDiscount::-webkit-inner-spin-button,
#salesDiscount::-webkit-outer-spin-button,
#salesPaidAmount::-webkit-inner-spin-button,
#salesPaidAmount::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  gap: 0;
}

.app-shell.is-hidden,
.login-screen.is-hidden {
  display: none;
}

.login-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 22px;
}

.login-card {
  display: grid;
  gap: 16px;
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  background: rgba(248, 250, 252, 0.9);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(26px) saturate(1.2);
}

.login-brand {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  justify-items: center;
  gap: 8px;
  margin-bottom: 4px;
  text-align: center;
}

.login-brand img {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 20px;
  object-fit: contain;
}

.login-brand strong {
  display: block;
  color: #006495;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.15;
}

.login-account-fields {
  display: grid;
  gap: 14px;
}

.login-shop-continue {
  width: 100%;
  justify-content: center;
}

.login-brand strong {
  display: block;
}

.login-heading p,
.login-card small {
  color: var(--muted);
}

.login-heading {
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

.login-heading p {
  margin-bottom: 0;
  line-height: 1.45;
}

.login-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.login-card input {
  min-height: 46px;
  font-size: 0.95rem;
  font-weight: 600;
}

.login-button {
  width: 100%;
  justify-content: center;
}

.sidebar {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-right: 1px solid #e2e8f0;
  border-radius: 0;
  background: #ffffff;
  font-family: var(--font);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 80px;
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.sidebar-profile .brand {
  min-width: 0;
}

.sidebar-profile .brand > div:last-child {
  min-width: 0;
}

.sidebar-profile .brand strong,
.sidebar-profile .brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout-button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: 0.18s ease;
}

.sidebar-logout-button:hover {
  color: #dc2626;
  background: rgba(254, 226, 226, 0.86);
}

.sidebar-logout-button .icon {
  width: 18px;
  height: 18px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  color: white;
  background: #006495;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 1rem;
}

.brand span {
  color: var(--muted);
  font-size: 0.78rem;
}

.nav-tabs {
  display: grid;
  gap: 4px;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 12px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav-item,
.nav-parent,
.ghost-button,
.primary-button,
.secondary-button {
  border: 0;
  border-radius: var(--control-radius, 16px);
  min-height: 44px;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  color: #475569;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  color: #475569;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  text-align: left;
}

.nav-parent-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.nav-parent-label span:last-child,
.nav-item span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-group {
  display: grid;
  gap: 6px;
}

.nav-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.nav-group.open .nav-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: none;
  gap: 5px;
  margin-left: 28px;
  padding: 2px 0 4px 10px;
  border-left: 0;
}

.nav-group.open .nav-submenu {
  display: grid;
}

.nav-subitem {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.nav-item:hover,
.nav-parent:hover {
  background: #f1f5f9;
}

.ghost-button:hover,
.secondary-button:hover {
  background: rgba(255, 255, 255, 0.74);
}


.ghost-button:disabled,
.secondary-button:disabled,
.primary-button:disabled,
.management-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.ghost-button:disabled:hover,
.secondary-button:disabled:hover,
.primary-button:disabled:hover,
.management-icon-button:disabled:hover {
  background: inherit;
}

.nav-item.active,
.nav-group.active > .nav-parent {
  color: #006495;
  background: #eff6ff;
  font-weight: 700;
}

.metric-card small,
.panel-heading p,
.section-note {
  color: var(--muted);
}

.main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.topbar {
  position: sticky;
  top: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 38px;
  padding: 4px 8px;
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.76));
  border-radius: var(--control-radius, 18px);
  background: var(--panel);
  backdrop-filter: var(--surface-filter, blur(26px) saturate(1.25));
}

.topbar.is-hidden {
  display: none;
}

body:not(.purchase-receipts-mode) .standard-topbar {
  justify-content: space-between;
}

.orders-topbar-meta {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #006495;
  background: #eff6ff;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.sales-topbar {
  justify-content: space-between;
}

.topbar-title {
  min-width: 132px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-family: var(--font-display);
  margin-bottom: 0;
  font-size: clamp(1rem, 1.22vw, 1.18rem);
  line-height: 1.08;
}

h2 {
  font-family: var(--font-display);
  margin-bottom: 0;
  font-size: 1.02rem;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.sales-topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sales-save-draft-button {
  min-height: 36px;
  padding: 0 12px;
  gap: 7px;
  border-radius: 8px;
  white-space: nowrap;
}

.sales-save-draft-button .icon {
  width: 16px;
  height: 16px;
}

.sales-offline-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #f1c46d;
  border-radius: 8px;
  color: #8a4b08;
  background: #fff8e8;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.sales-offline-status .icon {
  width: 15px;
  height: 15px;
}

.sales-offline-status[data-status="offline"] {
  border-color: #f1a7a7;
  color: #b42318;
  background: #fff1f1;
}

.sales-offline-status[data-status="syncing"] {
  border-color: #9ec6f5;
  color: #006495;
  background: #eef6ff;
}

.sales-offline-status[data-status="syncing"] .icon {
  animation: sales-sync-spin 0.8s linear infinite;
}

.sales-offline-status:disabled {
  cursor: default;
  opacity: 1;
}

@keyframes sales-sync-spin {
  to { transform: rotate(360deg); }
}

.sales-search-wrap {
  position: relative;
  flex: 0 0 min(420px, 42vw);
  min-width: 280px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  width: min(360px, 34vw);
  min-width: 260px;
  flex: 0 0 auto;
}

.search-box .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius, 16px);
  outline: none;
  padding: 0 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(10, 132, 255, 0.62);
}

textarea {
  min-height: 88px;
  padding-top: 12px;
  resize: vertical;
}

.search-box input {
  padding-left: 42px;
}

.search-box.channel-search-box input {
  padding-left: 13px;
}

.topbar input,
.topbar select {
  min-height: 30px;
  border-radius: var(--control-radius, 10px);
  font-size: 0.86rem;
}

.topbar .primary-button,
.topbar .secondary-button,
.topbar .ghost-button {
  min-height: 30px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.topbar .ghost-button {
  width: 30px;
}

.orders-import-menu {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.warehouse-topbar-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: min(190px, 18vw);
  min-width: 0;
  flex: 0 0 auto;
}

.warehouse-topbar-filter .icon {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: #526071;
  pointer-events: none;
}

.warehouse-topbar-filter .warehouse-topbar-filter-icon {
  left: 12px;
}

.warehouse-topbar-filter .warehouse-topbar-filter-chevron {
  right: 12px;
  left: auto;
  width: 18px;
  height: 18px;
}

.warehouse-topbar-filter select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 42px 0 48px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: var(--text);
  background: #fff;
  font-weight: 750;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.orders-import-button {
  flex: 0 0 auto;
}

.orders-import-chevron {
  margin-left: 2px;
}

.orders-import-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: none;
  min-width: 180px;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.orders-import-dropdown.show {
  display: grid;
  gap: 4px;
}

.orders-import-dropdown button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  padding: 10px 12px;
  text-align: left;
}

.orders-import-dropdown button:hover {
  background: rgba(15, 23, 42, 0.06);
}

.warehouse-stock-import-dropdown {
  width: min(360px, calc(100vw - 24px));
  padding: 8px;
}

.warehouse-stock-import-dropdown.show {
  gap: 8px;
}

.warehouse-import-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.warehouse-import-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef6ff;
  color: #1769aa;
}

.warehouse-import-card-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.warehouse-import-card-copy strong,
.warehouse-import-card-copy small {
  display: block;
  letter-spacing: 0;
}

.warehouse-import-card-copy strong {
  color: var(--text);
  font-size: 0.84rem;
}

.warehouse-import-card-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.warehouse-import-card-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.warehouse-stock-import-dropdown .warehouse-import-card-actions button {
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-size: 0.74rem;
  text-align: center;
}

.warehouse-stock-import-dropdown .warehouse-import-card-actions button:first-child {
  border-color: #1769aa;
  background: #1769aa;
  color: #fff;
}

.warehouse-stock-import-dropdown .warehouse-import-card-actions button:first-child:hover {
  background: #125a92;
}

/* Warehouse import history */
#warehouseImportHistoryView.active {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.warehouse-import-history-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.warehouse-import-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.warehouse-import-history-summary > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

.warehouse-import-history-summary > div:last-child {
  border-right: 0;
}

.warehouse-import-history-summary .icon {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #1769aa;
  background: #eef6ff;
}

.warehouse-import-history-summary small,
.warehouse-import-history-summary strong {
  min-width: 0;
  letter-spacing: 0;
}

.warehouse-import-history-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-import-history-summary strong {
  color: var(--text);
  font-size: 1.05rem;
}

.warehouse-import-history-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.warehouse-import-history-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 170px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.warehouse-import-history-toolbar select {
  min-height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.warehouse-import-history-count {
  margin-left: auto;
  padding-bottom: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-import-history-table-shell {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.warehouse-import-history-columns {
  display: grid;
  grid-template-columns: minmax(170px, 1.35fr) 112px minmax(150px, 1.2fr) minmax(110px, 0.85fr) minmax(130px, 0.9fr) 105px 28px;
  align-items: center;
  gap: 10px;
  min-width: 860px;
}

.warehouse-import-history-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #f8fafc;
  font-size: 0.68rem;
  font-weight: 850;
}

.warehouse-import-history-list {
  min-width: 860px;
}

.warehouse-import-history-row {
  width: 100%;
  min-height: 66px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--text);
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.warehouse-import-history-row:last-child {
  border-bottom: 0;
}

.warehouse-import-history-row:hover,
.warehouse-import-history-row:focus-visible {
  outline: 0;
  background: #f7fbff;
}

.warehouse-import-history-row > span,
.warehouse-import-history-row time {
  min-width: 0;
  color: #475569;
  font-size: 0.73rem;
}

.warehouse-import-history-type {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.warehouse-import-history-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #1769aa;
  background: #eef6ff;
}

.warehouse-import-history-type strong,
.warehouse-import-history-file strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-import-history-type small,
.warehouse-import-history-file small,
.warehouse-import-history-result small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-import-history-warehouses,
.warehouse-import-history-user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-import-status,
.warehouse-import-line-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 850;
  white-space: nowrap;
}

.warehouse-import-status-success,
.warehouse-import-line-status-success {
  color: #166534;
  background: #dcfce7;
}

.warehouse-import-status-warning,
.warehouse-import-line-status-skip {
  color: #92400e;
  background: #fef3c7;
}

.warehouse-import-status-failed,
.warehouse-import-line-status-error,
.warehouse-import-line-status-failed {
  color: #991b1b;
  background: #fee2e2;
}

.warehouse-import-history-open {
  display: inline-flex;
  justify-content: center;
  color: #64748b;
  transform: rotate(-90deg);
}

.warehouse-import-history-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: 220px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.warehouse-import-history-empty .icon {
  width: 34px;
  height: 34px;
  color: #94a3b8;
}

.warehouse-import-history-empty strong {
  color: var(--text);
}

dialog.modal.warehouse-import-detail-modal {
  width: min(1080px, calc(100vw - 28px));
  max-width: none;
}

dialog.modal.warehouse-import-detail-modal .warehouse-import-detail-card {
  width: 100%;
  max-width: none;
  gap: 14px;
  max-height: calc(100vh - 36px);
  overflow: hidden;
  padding: 0;
}

.warehouse-import-detail-heading {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.warehouse-import-detail-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.warehouse-import-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #1769aa;
  background: #e7f3ff;
}

.warehouse-import-detail-title h2,
.warehouse-import-detail-title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-import-detail-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0 20px;
}

.warehouse-import-detail-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.warehouse-import-detail-stat small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-import-detail-stat strong {
  color: var(--text);
  font-size: 1rem;
}

.warehouse-import-detail-stat-success { border-color: #bbf7d0; background: #f0fdf4; }
.warehouse-import-detail-stat-warning { border-color: #fde68a; background: #fffbeb; }
.warehouse-import-detail-stat-danger { border-color: #fecaca; background: #fef2f2; }

.warehouse-import-detail-lines {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  margin: 0 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.warehouse-import-detail-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.warehouse-import-detail-lines-head strong { font-size: 0.82rem; }
.warehouse-import-detail-lines-head span { color: var(--muted); font-size: 0.7rem; font-weight: 800; }

.warehouse-import-detail-columns {
  display: grid;
  grid-template-columns: 52px minmax(190px, 1.35fr) minmax(130px, 0.9fr) 180px minmax(150px, 0.95fr);
  align-items: center;
  gap: 10px;
  min-width: 760px;
}

.warehouse-import-detail-table-head {
  min-height: 34px;
  padding: 0 11px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #f8fafc;
  font-size: 0.66rem;
  font-weight: 850;
}

.warehouse-import-detail-list {
  min-height: 0;
  overflow: auto;
}

.warehouse-import-detail-row {
  min-height: 54px;
  padding: 7px 11px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 0.72rem;
}

.warehouse-import-detail-row:last-child { border-bottom: 0; }
.warehouse-import-detail-product strong { display: block; color: var(--text); font-size: 0.75rem; }
.warehouse-import-detail-product small,
.warehouse-import-detail-row > span:last-child > small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.65rem; line-height: 1.3; }
.warehouse-import-detail-truncated { padding: 10px 12px; color: var(--muted); background: #f8fafc; font-size: 0.7rem; font-weight: 750; text-align: center; }

.warehouse-import-detail-actions {
  min-height: 68px;
  padding: 12px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.warehouse-import-detail-actions p {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 3px;
}

.warehouse-import-detail-actions p strong { color: var(--text); font-size: 0.76rem; }
.warehouse-import-detail-actions p span { color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.warehouse-import-detail-actions .danger-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }
.warehouse-import-detail-actions .danger-action .icon { width: 16px; height: 16px; }

@media (max-width: 760px) {
  #warehouseImportHistoryView.active { overflow: auto; }
  .warehouse-import-history-page { height: auto; min-height: 100%; padding: 4px 0 104px; overflow: visible; }
  .warehouse-import-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-import-history-summary > div:nth-child(2) { border-right: 0; }
  .warehouse-import-history-summary > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .warehouse-import-history-summary > div { padding: 10px; }
  .warehouse-import-history-toolbar { align-items: stretch; flex-wrap: wrap; }
  .warehouse-import-history-toolbar label { min-width: 0; flex: 1 1 calc(50% - 5px); }
  .warehouse-import-history-count { width: 100%; margin-left: 0; padding: 0; }
  .warehouse-import-history-table-shell { overflow: visible; border: 0; background: transparent; }
  .warehouse-import-history-table-head { display: none; }
  .warehouse-import-history-list { display: grid; gap: 8px; min-width: 0; }
  .warehouse-import-history-row.warehouse-import-history-columns {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .warehouse-import-history-type { grid-column: 1; grid-row: 1; }
  .warehouse-import-history-open { grid-column: 2; grid-row: 1; }
  .warehouse-import-history-row time { grid-column: 1; grid-row: 2; padding-left: 43px; }
  .warehouse-import-history-file { grid-column: 1 / -1; grid-row: 3; }
  .warehouse-import-history-warehouses { grid-column: 1; grid-row: 4; }
  .warehouse-import-history-result { grid-column: 1 / -1; grid-row: 5; }
  .warehouse-import-history-user { grid-column: 2; grid-row: 4; text-align: right; }
  dialog.modal.warehouse-import-detail-modal { width: calc(100vw - 16px); }
  dialog.modal.warehouse-import-detail-modal .warehouse-import-detail-card { max-height: calc(100vh - 16px); }
  .warehouse-import-detail-heading { padding: 14px; }
  .warehouse-import-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 14px; }
  .warehouse-import-detail-lines { margin: 0 14px; overflow: auto; }
  .warehouse-import-detail-actions { padding: 12px 14px 14px; align-items: stretch; flex-direction: column; }
  .warehouse-import-detail-actions .danger-action { width: 100%; justify-content: center; }
}


.orders-topbar-filters,
.purchase-receipt-topbar-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.order-date-filter-field,
.purchase-receipt-date-filter-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.order-date-filter-field input,
.purchase-receipt-date-filter-field input {
  width: 132px;
}

.order-filter-date-wrap,
.purchase-receipt-filter-date-wrap {
  position: relative;
  width: 132px;
}

.order-date-filter-field .order-filter-date-wrap input[type="text"],
.purchase-receipt-date-filter-field .purchase-receipt-filter-date-wrap input[type="text"] {
  width: 100%;
  padding-right: 12px;
  cursor: pointer;
  font-weight: 850;
}

.orders-date-apply {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
}

body.desktop-layout.orders-mode .standard-search-box {
  order: 1;
}

body.desktop-layout.orders-mode .advanced-filter-wrap {
  order: 2;
}

body.desktop-layout.orders-mode .orders-import-menu {
  order: 3;
}

body.desktop-layout.orders-mode .orders-topbar-filters {
  order: 4;
}

.orders-misa-export {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.misa-export-menu {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.misa-export-dropdown {
  min-width: 156px;
}

.orders-misa-export .icon {
  width: 16px;
  height: 16px;
}

.price-topbar-actions {
  align-items: center;
  gap: 8px;
}

.price-topbar-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.price-topbar-month-field {
  display: inline-flex;
  align-items: center;
}

.price-topbar-month-field .price-month-wrap {
  width: max-content;
}

.price-topbar-month-field .price-month-trigger {
  width: auto;
  min-width: 96px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.86rem;
  white-space: nowrap;
}

.price-promo-category-field {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.price-promo-category-field select {
  width: 118px;
  padding-right: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  text-overflow: ellipsis;
}

.price-topbar-search {
  width: min(260px, 24vw);
}

.purchase-receipt-filter-date-dropdown {
  left: auto;
  right: 0;
  width: min(330px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  z-index: 1000;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.22);
}

.purchase-receipt-filter-date-dropdown.show {
  display: grid !important;
}

.purchase-receipt-filter-clear {
  width: 100%;
  min-height: 34px;
  border-radius: 10px;
}

.vat-topbar-actions,
.product-topbar-actions,
.price-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vat-topbar-actions .primary-button,
.vat-topbar-actions .secondary-button,
.product-topbar-actions .secondary-button,
.price-topbar-actions .primary-button,
.topbar-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.topbar-filter-wrap {
  position: relative;
  display: inline-flex;
}

.module-view-controls {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.module-view-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.module-view-controls button.active {
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 4px 10px rgba(10, 132, 255, 0.2);
}

.module-view-controls .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  line-height: 0;
}

.module-view-controls .icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.advanced-filter-button .icon,
.module-table-action .icon {
  width: 16px;
  height: 16px;
}

.advanced-filter-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.advanced-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}

.advanced-filter-button.active {
  color: var(--blue-dark);
  border-color: rgba(10, 132, 255, 0.32);
  background: rgba(10, 132, 255, 0.1);
}

.advanced-filter-button small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  color: #ffffff;
  background: var(--blue);
  font-size: 0.68rem;
  font-weight: 900;
}

.advanced-filter-button small[hidden] {
  display: none;
}

.advanced-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1250;
  width: min(430px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
}

.advanced-filter-panel form,
.advanced-filter-grid {
  display: grid;
  gap: 11px;
}

.advanced-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advanced-filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.advanced-filter-field select,
.advanced-filter-field input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  color: var(--text);
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
}

.advanced-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.advanced-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  color: var(--text);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 750;
}

.advanced-filter-checkbox input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}

.advanced-filter-actions button {
  min-height: 36px;
  border-radius: 7px;
}

.product-bulk-edit-wrap {
  position: relative;
  display: inline-flex;
}

.product-bulk-edit-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

.product-bulk-edit-panel select,
.product-bulk-edit-panel button {
  width: 100%;
  min-height: 36px;
  border-radius: 12px;
}

.product-bulk-edit-panel select {
  padding: 0 32px 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 800;
}

.topbar-print-wrap {
  position: relative;
  display: inline-flex;
}

.topbar-print-button {
  width: 34px;
  justify-content: center;
  padding: 0;
}

.topbar-filter-button.active {
  border-color: rgba(10, 132, 255, 0.38);
  color: var(--accent);
  background: rgba(10, 132, 255, 0.1);
}

.topbar-filter-panel,
.topbar-print-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.topbar-print-panel {
  display: grid;
  gap: 12px;
}

.print-panel-head,
.print-panel-section {
  display: grid;
  gap: 4px;
}

.print-panel-head span,
.print-panel-section > span,
.print-toggle-row small {
  color: var(--muted);
  font-size: 0.76rem;
}

.print-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.86);
}

.print-toggle-row > span {
  display: grid;
  gap: 2px;
}

.print-template-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.print-template-options button,
.print-template-card {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
}

.print-template-options button {
  min-height: 34px;
  font-weight: 900;
}

.payment-default-options button {
  font-weight: 500;
}

.print-template-options button.active,
.print-template-card.active {
  border-color: rgba(10, 132, 255, 0.46);
  color: var(--accent);
  background: rgba(10, 132, 255, 0.1);
}

.topbar-filter-form {
  display: grid;
  gap: 10px;
}

.topbar-filter-form label {
  display: grid;
  gap: 5px;
}

.topbar-filter-form label > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.purchase-receipt-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.purchase-receipt-code-field,
.purchase-receipt-date-field {
  display: grid;
  gap: 6px;
}

.purchase-receipt-code-field > span,
.purchase-receipt-date-field > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.purchase-receipt-code-field input {
  min-height: 46px;
  font-weight: 800;
  text-transform: uppercase;
}

.purchase-receipt-date-wrap {
  position: relative;
}

.purchase-receipt-date-wrap input {
  cursor: pointer;
  font-weight: 800;
}

.topbar-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.purchase-topbar-search {
  position: relative;
  display: none;
  width: min(560px, 52vw);
}

.purchase-topbar-search .search-box {
  width: 100%;
  min-width: 0;
}

body.purchase-entry-mode .topbar-title {
  flex: 1 1 auto;
}

body.purchase-entry-mode #standardViewTitle,
body.purchase-entry-mode .standard-search-box {
  display: none;
}

body.vat-entry-mode #standardViewTitle,
body.vat-entry-mode .standard-search-box {
  display: none;
}

body.purchase-entry-mode .purchase-topbar-search {
  display: block;
}

.invoice-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
}

.invoice-tab,
.invoice-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  white-space: nowrap;
}

.invoice-tab {
  min-width: 88px;
  gap: 6px;
  padding: 0 7px 0 11px;
}

.invoice-tab.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(10, 132, 255, 0.28);
}

.invoice-add {
  width: 30px;
  padding: 0;
  color: var(--blue-dark);
}

.invoice-close {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1;
}

.invoice-close:hover {
  color: var(--text);
  background: rgba(15, 23, 42, 0.08);
}

.product-suggestions {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: none;
  width: min(520px, calc(100vw - 40px));
  max-height: 430px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.98);
}

.customer-search-wrap,
.supplier-search-wrap {
  position: relative;
}

.payment-search-box {
  width: 100%;
  min-width: 0;
}

.payment-search-box input {
  min-height: 44px;
  border-radius: 14px;
}

.customer-suggestions,
.supplier-suggestions {
  width: 100%;
  max-height: 320px;
}

.product-suggestions.show {
  display: grid;
  gap: 6px;
}

.suggestion-item,
.suggestion-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  padding: 9px 11px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
}

.suggestion-item:hover,
.suggestion-new:hover {
  border-color: rgba(10, 132, 255, 0.28);
  background: rgba(255, 255, 255, 0.96);
}

.suggestion-item:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.suggestion-item span,
.suggestion-item small {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.suggestion-item > strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sales-customer-suggestion {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.sales-customer-suggestion-avatar {
  display: grid !important;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #006495;
  background: #eaf3ff;
  font-size: 0.75rem;
  font-weight: 900;
}

.sales-customer-suggestion-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sales-customer-suggestion-info > strong,
.sales-customer-suggestion-info > small {
  min-width: 0;
}

.sales-customer-suggestion-info > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-customer-suggestion-tier {
  display: block !important;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 999px;
  color: #526071;
  background: #eef2f7;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 16px;
  white-space: nowrap;
}

.suggestion-item small,
.suggestion-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.suggestion-new {
  justify-content: flex-start;
  color: var(--blue-dark);
  font-weight: 700;
}

.sales-product-suggestion {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  justify-content: stretch;
}

.sales-product-suggestion.is-unavailable,
.sales-product-suggestion:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.sales-suggestion-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 12px;
  color: var(--blue-dark);
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.14), rgba(52, 211, 153, 0.14));
  font-size: 0.88rem;
  font-weight: 800;
}

.sales-suggestion-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sales-suggestion-info {
  justify-items: start;
  text-align: left;
}

.suggestion-empty {
  padding: 12px;
}

.primary-button,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  white-space: nowrap;
}

.primary-button {
  color: white;
  background: var(--action-background, linear-gradient(135deg, var(--blue), var(--blue-dark)));
}

.secondary-button {
  color: var(--text);
  background: var(--panel-strong);
  border: 1px solid rgba(15, 23, 42, 0.09);
}

.ghost-button {
  width: 44px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
}

.danger-action {
  width: auto;
  padding: 0 14px;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.compact {
  min-height: 38px;
  border-radius: var(--control-radius, 14px);
}

.icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.view {
  display: none;
}

.is-hidden {
  display: none !important;
}

.permission-hidden {
  display: none !important;
}

.view.active {
  display: block;
  position: relative;
}

#productsView.active,
#productEditView.active,
#customersView.active,
#suppliersView.active,
#invoiceInventoryView.active {
  min-height: 0;
  height: 100%;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-grid, 18px);
  margin-bottom: var(--space-grid, 24px);
}

.metric-card,
.panel,
.product-card {
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.8));
  background: var(--panel);
  backdrop-filter: var(--surface-filter, blur(22px) saturate(1.2));
}

.metric-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-height: 116px;
  padding: 15px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--mint));
}

.metric-label {
  color: var(--muted);
  font-size: 0.84rem;
}

.metric-card strong {
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.05;
}

.accent-mint {
  border-color: rgba(0, 168, 128, 0.34);
}

.accent-rose {
  border-color: rgba(255, 59, 95, 0.34);
}

.accent-blue {
  border-color: rgba(10, 132, 255, 0.34);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: var(--space-grid, 24px);
  align-items: start;
}

.dashboard-column {
  display: grid;
  align-content: start;
  gap: var(--space-grid, 24px);
  min-width: 0;
}

.panel {
  min-width: 0;
  padding: var(--card-padding, 16px);
  border-radius: var(--card-radius, 18px);
}

.wide-panel {
  grid-column: span 1;
}

.panel-heading,
.modal-heading,
.order-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.panel-heading {
  margin-bottom: 12px;
}

.panel-heading p,
.section-note {
  margin-bottom: 0;
  font-size: 0.85rem;
}

.status-pill,
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.status-pill {
  color: #006c54;
  background: rgba(0, 168, 128, 0.12);
}

.badge {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
}

.badge.success {
  color: var(--success-text, #006c54);
  background: var(--success-bg, rgba(0, 168, 128, 0.12));
  border-color: var(--success-border, var(--line));
}

.badge.warning {
  color: var(--warning-text, var(--amber));
  background: var(--warning-bg, rgba(255, 184, 0, 0.14));
  border-color: var(--warning-border, var(--line));
}

.badge.danger {
  color: var(--danger-text, #b4233d);
  background: var(--danger-bg, rgba(255, 59, 95, 0.13));
  border-color: var(--danger-border, var(--line));
}

.chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 234px;
  padding: 10px 4px 2px;
}

.bar-item {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
  min-width: 0;
  height: 100%;
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

.bar {
  align-self: end;
  min-height: 10px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #006495, #00a880);
}

.channel-list,
.compact-list,
.change-log-list {
  display: grid;
  gap: 10px;
}

.change-log-list {
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.channel-item,
.list-item,
.change-log-item {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.channel-row,
.list-row,
.change-log-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.change-log-item {
  min-height: 48px;
}

.change-log-item span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.change-log-item strong,
.change-log-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.change-log-item small,
.change-log-item time {
  color: var(--muted);
  font-size: 0.78rem;
}

.change-log-item time {
  white-space: nowrap;
}

.progress {
  overflow: hidden;
  height: 8px;
  border-radius: 99px;
  background: rgba(17, 24, 39, 0.08);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--mint));
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--surface-border, rgba(15, 23, 42, 0.14));
  border-radius: var(--control-radius, 18px);
  background: var(--surface-background, rgba(255, 255, 255, 0.7));
}

.order-card-list {
  display: grid;
  gap: 7px;
}

.order-list-header,
.order-card {
  display: grid;
  grid-template-columns:
    24px minmax(74px, 0.72fr) minmax(68px, 0.66fr) minmax(118px, 1.28fr)
    minmax(72px, 0.7fr) minmax(80px, 0.74fr) minmax(62px, 0.58fr) minmax(70px, 0.64fr)
    minmax(70px, 0.62fr) minmax(76px, 0.68fr) minmax(84px, 0.74fr) minmax(126px, 0.96fr);
  align-items: center;
  column-gap: 6px;
  row-gap: 6px;
}

.order-list-header {
  min-height: 34px;
  margin-bottom: 6px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(229, 236, 245, 0.8);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
}

.order-list-header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-list-header span:nth-child(7),
.order-list-header span:nth-child(9),
.order-list-header span:nth-child(10),
.order-list-header span:nth-child(11) {
  text-align: right;
}

.order-list-header span:nth-child(7) {
  text-align: center;
}

.order-list-header span:nth-child(8) {
  text-align: right;
}

.order-list-header span:nth-child(12) {
  text-align: right;
}

.vat-invoice-list-header,
.order-card.vat-invoice-card {
  grid-template-columns:
    24px minmax(86px, 0.78fr) minmax(150px, 1.35fr) minmax(96px, 0.78fr)
    minmax(150px, 1.18fr) minmax(58px, 0.46fr) minmax(58px, 0.48fr)
    minmax(78px, 0.62fr) minmax(70px, 0.56fr) minmax(84px, 0.66fr) minmax(78px, 0.58fr);
}

.order-card-reconcile {
  display: flex;
  align-items: center;
  min-width: 0;
}

.order-card-reconcile .badge {
  white-space: nowrap;
}

.vat-invoice-list-header span:nth-child(n + 7),
.vat-invoice-card .order-card-payment,
.vat-invoice-card .order-card-discount,
.vat-invoice-card .order-card-paid,
.vat-invoice-card .order-card-total,
.vat-invoice-card .order-card-date {
  text-align: right;
}

.vat-invoice-list-header span:nth-child(6),
.vat-invoice-card .order-card-status {
  justify-content: center;
  text-align: center;
}

.order-card {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.8));
  border-radius: var(--control-radius, 12px);
  background: var(--surface-background, rgba(248, 250, 252, 0.88));
  backdrop-filter: var(--surface-filter, blur(22px) saturate(1.2));
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.order-card.expanded {
  align-items: center;
  border-color: rgba(10, 132, 255, 0.22);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.order-card-check {
  display: grid;
  place-items: center;
}

.order-card-check input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}

.order-card-code,
.order-card-return,
.order-card-delivery,
.order-card-customer,
.order-card-type,
.order-card-channel,
.order-card-date {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card-return,
.order-card-customer,
.order-card-type,
.order-card-channel,
.order-card-date {
  color: var(--muted);
}

.order-card-date {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.2;
}

.order-card-date strong {
  color: #1e293b;
  font-size: 0.76rem;
  font-weight: 800;
}

.order-card-date small {
  color: #94a3b8;
  font-size: 0.68rem;
}

.order-card-customer-block {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-card-customer-block > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.order-card-customer-block > div > strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card-customer-block > small {
  overflow: hidden;
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-type-badge {
  min-height: 18px !important;
  padding: 0 5px !important;
  color: #4338ca !important;
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  font-size: 0.62rem !important;
  white-space: nowrap;
}

.order-card-payment {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 0;
}

.order-card-payment-method {
  overflow: hidden;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card-payment-status {
  color: #059669;
  font-size: 0.66rem;
  font-weight: 800;
}

.order-card-debt {
  color: #64748b;
  font-size: 0.76rem;
  text-align: right;
  white-space: nowrap;
}

.order-card-debt.is-debt {
  color: #d97706;
}

.order-card-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.order-card-action-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  color: #64748b;
  background: #ffffff;
}

.order-card-action-button:hover {
  color: #006495;
  border-color: #93c5fd;
  background: #eff6ff;
}

.order-card-action-button .icon,
.order-card-action-button .icon svg {
  width: 15px;
  height: 15px;
}

.order-card-status,
.order-card-reconcile,
.order-card-delivery,
.order-card-payment {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.order-card-status {
  justify-content: center;
}

.order-card-delivery {
  justify-content: flex-start;
}

.order-card-date {
  text-align: right;
}

.order-card .badge {
  min-height: 22px;
  padding: 0 8px;
  font-size: 0.7rem;
}

.order-card-discount,
.order-card-paid,
.order-card-total {
  text-align: right;
  white-space: nowrap;
}

.price-ledger-view.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.price-entry-view.active {
  display: grid;
  align-content: start;
  gap: 12px;
}

.price-ledger-view.active .price-record-list {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.price-ledger-view.active .price-record-header {
  min-height: 30px;
  margin-bottom: 0;
}

.price-entry-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
}

#costPriceEntryView.active {
  display: block;
}

#costPriceEntryView .cost-promo-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  height: calc(100vh - 142px);
  min-height: 540px;
  align-items: stretch;
}

#costPriceEntryView .cost-promo-entry-products {
  display: block;
}

#costPriceEntryView .cost-promo-entry-products .selected-products {
  max-height: 100%;
  min-height: 0;
  overflow: auto;
}

#costPriceEntryView .cost-promo-entry-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#costPriceEntryView .cost-promo-meta-grid {
  grid-template-columns: 1fr;
}

#costPriceEntryView .cost-promo-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
}

#costPriceEntryView .cost-promo-entry-actions button {
  width: 100%;
  justify-content: center;
}

.price-entry-form {
  display: grid;
  gap: 10px;
}

.price-entry-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.price-entry-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-entry-grid.promo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.price-action-menu {
  position: relative;
  display: inline-flex;
}

.price-action-chevron {
  margin-left: 2px;
}

.price-action-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.price-action-dropdown.show {
  display: grid;
  gap: 4px;
}

.price-action-dropdown button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  padding: 10px 12px;
  text-align: left;
}

.price-action-dropdown button:hover {
  background: rgba(15, 23, 42, 0.06);
}

.cost-promo-import-modal,
.import-result-modal-card {
  width: min(860px, 94vw);
}

.cost-promo-import-modal textarea {
  min-height: 220px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
}

.promo-category-modal-card {
  width: min(520px, calc(100vw - 28px));
}

.cost-price-bulk-category-modal-card {
  width: min(480px, calc(100vw - 28px));
}

.product-bulk-category-modal-card {
  width: min(540px, calc(100vw - 28px));
  gap: 16px;
}

.product-bulk-category-overview {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

.product-bulk-category-summary-row,
.product-bulk-category-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.product-bulk-category-summary-row strong,
.product-bulk-category-current strong {
  color: var(--text);
  text-align: right;
}

.product-bulk-category-products {
  display: grid;
  border-block: 1px solid rgba(15, 23, 42, 0.08);
}

.product-bulk-category-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 38px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.product-bulk-category-product:last-child {
  border-bottom: 0;
}

.product-bulk-category-product span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-bulk-category-product small,
.product-bulk-category-more {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.product-bulk-category-more {
  padding: 9px 0;
  text-align: center;
}

.product-bulk-category-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.product-bulk-category-field select {
  width: 100%;
  min-height: 44px;
  font-weight: 750;
}

.product-category-action-menu .price-action-dropdown {
  right: auto;
  left: 0;
  min-width: 220px;
}

#productActionDropdown {
  right: 0;
  left: auto;
  min-width: 180px;
}

body.products-mode #productTopbarActions {
  order: 1;
}

body.products-mode #quickOrderActionMenu {
  order: 2;
}

#productFilterButton.active {
  color: var(--blue-dark);
  border-color: rgba(10, 132, 255, 0.3);
  background: rgba(10, 132, 255, 0.1);
}

.product-filter-dropdown {
  right: 0;
  left: auto;
  min-width: 280px;
  max-height: min(420px, calc(100vh - 100px));
  overflow-y: auto;
}

.price-action-dropdown .product-filter-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.product-filter-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-filter-option small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.price-action-dropdown .product-filter-option.active {
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.1);
}

.promo-category-modal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.promo-category-modal-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 999px;
  color: #075985;
  background: rgba(10, 132, 255, 0.08);
  font-size: 0.82rem;
  font-weight: 850;
}

#importResultBody {
  display: grid;
  gap: 12px;
}

.import-status-panel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.86));
}

.import-status-icon {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.12);
}

.import-status-icon::before,
.import-status-icon::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 999px;
}

.import-status-icon::before {
  border: 3px solid rgba(10, 132, 255, 0.2);
  border-top-color: var(--accent);
  animation: import-loading-spin 0.82s linear infinite;
}

.import-status-icon::after {
  inset: 17px;
  background: var(--accent);
}

.import-status-success {
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(236, 253, 245, 0.86));
  border-color: rgba(22, 163, 74, 0.18);
}

.import-status-warning {
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.82));
  border-color: rgba(217, 119, 6, 0.22);
}

.import-status-danger {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(255, 241, 242, 0.86));
  border-color: rgba(220, 38, 38, 0.2);
}

.import-status-success .import-status-icon {
  background: rgba(22, 163, 74, 0.12);
}

.import-status-warning .import-status-icon {
  background: rgba(217, 119, 6, 0.13);
}

.import-status-danger .import-status-icon {
  background: rgba(220, 38, 38, 0.12);
}

.import-status-success .import-status-icon::before,
.import-status-warning .import-status-icon::before,
.import-status-danger .import-status-icon::before {
  inset: 14px 12px 18px 17px;
  width: 15px;
  height: 8px;
  border: 0;
  border-left: 3px solid #16a34a;
  border-bottom: 3px solid #16a34a;
  border-radius: 1px;
  transform: rotate(-45deg);
  animation: none;
}

.import-status-warning .import-status-icon::before {
  inset: 10px auto auto 21px;
  width: 4px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: #d97706;
  transform: none;
}

.import-status-warning .import-status-icon::after {
  inset: auto auto 11px 20px;
  width: 6px;
  height: 6px;
  background: #d97706;
}

.import-status-danger .import-status-icon::before,
.import-status-danger .import-status-icon::after {
  inset: 21px 12px auto;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: #dc2626;
  transform: rotate(45deg);
  animation: none;
}

.import-status-danger .import-status-icon::after {
  transform: rotate(-45deg);
}

.import-status-success .import-status-icon::after {
  display: none;
}

.import-status-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.import-status-copy strong {
  color: var(--text);
  font-size: 1rem;
}

.import-status-copy span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.45;
}

.import-progress {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.import-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.import-progress-meta strong {
  color: var(--text);
}

.import-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.import-progress-track span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, #006495, #16a34a);
  transition: width 0.18s ease;
}

.import-result-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.import-result-stat {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.92);
}

.import-result-stat span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.import-result-stat strong {
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1;
}

.import-result-stat-success {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(240, 253, 244, 0.9);
}

.import-result-stat-warning {
  border-color: rgba(217, 119, 6, 0.2);
  background: rgba(255, 251, 235, 0.9);
}

.import-result-stat-danger {
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(254, 242, 242, 0.9);
}

.import-issue-section {
  display: grid;
  gap: 8px;
}

.import-issue-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 0.88rem;
}

.import-issue-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.import-result-list {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
}

@keyframes import-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.import-result-row {
  display: grid;
  grid-template-columns: 84px minmax(120px, 1fr) minmax(180px, 2fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.9);
}

.import-result-row-error,
.import-result-row-fail {
  border-color: rgba(220, 38, 38, 0.16);
  background: rgba(254, 242, 242, 0.78);
}

.import-result-row-skip {
  border-color: rgba(217, 119, 6, 0.18);
  background: rgba(255, 251, 235, 0.86);
}

.import-result-row span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.import-result-row > span:first-child {
  justify-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
  font-size: 0.72rem;
}

.import-result-row-error > span:first-child,
.import-result-row-fail > span:first-child {
  background: rgba(220, 38, 38, 0.1);
  color: #991b1b;
}

.import-result-row-skip > span:first-child {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
}

@media (max-width: 720px) {
  .import-status-panel {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .import-status-icon {
    width: 38px;
    height: 38px;
  }

  .import-result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-result-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .import-result-list {
    max-height: 42vh;
  }
}

.price-month-field {
  position: relative;
}

.price-month-wrap {
  position: relative;
  min-width: 0;
}

.price-month-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: left;
}

.price-month-trigger .icon {
  display: none;
}

.price-month-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 42;
  display: none;
  width: min(260px, calc(100vw - 24px));
  max-height: 310px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.98);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.18);
}

.price-month-dropdown.show {
  display: grid;
  gap: 6px;
}

.price-month-dropdown button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text);
  background: transparent;
  font-weight: 800;
  text-align: left;
}

.price-month-dropdown button:hover {
  border-color: rgba(10, 132, 255, 0.2);
  background: rgba(10, 132, 255, 0.08);
}

.price-month-dropdown button.active {
  color: white;
  border-color: var(--blue);
  background: var(--blue);
}

.price-promo-detail-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  align-items: start;
}

.price-promo-detail-column {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.price-promo-detail-column h3 {
  margin: 0 0 2px;
  color: var(--text);
  font-size: 0.88rem;
}

.price-promo-vat-toggle {
  display: grid;
  gap: 6px;
}

.price-promo-vat-toggle > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.price-vat-toggle-actions {
  display: inline-flex;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.price-vat-toggle-actions button {
  flex: 1 1 0;
  min-height: 38px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 900;
}

.price-vat-toggle-actions button.active {
  color: white;
  background: var(--blue);
}

.price-entry-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.price-entry-section h3 {
  margin: 0;
  font-size: 0.92rem;
}

.price-entry-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.price-entry-section-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.cost-promo-search {
  width: 100%;
  min-width: 0;
}

.cost-promo-product-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}

.cost-promo-product-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
}

.cost-promo-product-option.is-selected {
  border-color: rgba(10, 132, 255, 0.55);
  background: rgba(10, 132, 255, 0.1);
}

.cost-promo-product-option span:first-child,
.cost-promo-selected-head button:first-child span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cost-promo-product-option strong,
.cost-promo-selected-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-promo-product-option small,
.cost-promo-selected-head small {
  color: var(--muted);
  font-size: 0.76rem;
}

.cost-promo-selected-list {
  display: grid;
  gap: 10px;
}

.cost-promo-selected-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  cursor: default;
}

.cost-promo-selected-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px 42px;
  align-items: center;
  gap: 10px;
}

.selling-promo-selected-card .cost-promo-selected-head {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.cost-promo-selected-head .cost-promo-title-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.cost-promo-buy-gift-summary {
  justify-self: center;
  width: 142px;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 999px;
  color: var(--blue-dark);
  background: rgba(239, 248, 255, 0.86);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-promo-buy-gift-summary.is-empty {
  visibility: hidden;
}

.cost-promo-selected-body {
  display: none;
  gap: 10px;
  cursor: default;
}

.cost-promo-selected-card.is-expanded .cost-promo-selected-body {
  display: grid;
}

.price-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.price-entry-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.price-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.price-entry-form input,
.price-entry-form select {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.88rem;
}

.price-submit-button {
  justify-content: center;
  min-height: 38px;
  border-radius: 12px;
}

.cost-price-record-header,
.cost-price-record {
  grid-template-columns:
    34px minmax(82px, 0.72fr) minmax(150px, 1.18fr) minmax(116px, 0.86fr)
    minmax(116px, 0.86fr) minmax(112px, 0.82fr) minmax(104px, 0.8fr)
    minmax(96px, 0.76fr) minmax(88px, 0.7fr) minmax(108px, 0.84fr)
    minmax(70px, auto);
  column-gap: 5px;
}

.selling-price-record-header,
.selling-price-record {
  grid-template-columns:
    minmax(82px, 0.72fr) minmax(160px, 1.35fr) minmax(126px, 0.98fr)
    minmax(126px, 0.98fr) minmax(108px, 0.84fr) minmax(104px, 0.8fr)
    minmax(96px, 0.76fr) minmax(88px, 0.7fr) minmax(70px, auto);
}

.cost-price-record-header span:nth-child(n + 4),
.selling-price-record-header span:nth-child(n + 3),
.price-record-money,
.price-record-supplier-count {
  text-align: right;
}

.cost-price-record-header span:nth-child(4),
.cost-price-record-header span:nth-child(5),
.cost-price-record .price-record-promo-price {
  justify-self: start;
  text-align: left;
}

.cost-price-record-header span:nth-child(6),
.cost-price-record .price-record-buy-gift {
  justify-self: center;
  text-align: center;
}

.cost-price-record-select-heading,
.cost-price-select-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.cost-price-record-select-heading input,
.cost-price-select-check input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.price-record-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-align: right;
}

.price-record-sort-button > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-record-sort-button:hover,
.price-record-sort-button.active {
  color: var(--accent);
}

.price-record-sort-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  opacity: 0.52;
  transition: opacity 160ms ease, transform 160ms ease;
}

.price-record-sort-button.active .price-record-sort-icon {
  opacity: 0.95;
}

.price-record-sort-button[data-sort-direction="asc"] .price-record-sort-icon {
  transform: rotate(180deg);
}

.price-record-card {
  cursor: pointer;
  min-height: 56px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.price-record-list {
  gap: 5px;
}

.price-record-card.is-selected {
  border-color: rgba(10, 132, 255, 0.48);
  background: rgba(239, 248, 255, 0.92);
}

.price-record-detail {
  cursor: default;
}

.price-record-card > span,
.price-record-card > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-record-product,
.price-record-model,
.price-record-money,
.price-record-buy-gift {
  color: var(--text);
}

.price-record-card > .price-record-product {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.16;
  max-height: 2.32em;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.price-record-supplier-count {
  color: var(--muted);
}

.price-record-supplier-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.price-record-supplier-count .icon {
  width: 14px;
  height: 14px;
}

.price-record-supplier-count strong {
  color: var(--text);
}

.price-record-supplier-count {
  justify-self: end;
}

.price-record-detail {
  grid-column: 1 / -1;
}

.price-record-summary div {
  min-width: 0;
}

.price-record-summary strong {
  overflow-wrap: anywhere;
}

.price-record-detail-sections {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(430px, 1.85fr) minmax(185px, 0.72fr);
  gap: 10px;
}

.price-record-detail-primary-column {
  display: grid;
  align-self: start;
  gap: 10px;
  min-width: 0;
}

.price-record-detail-primary-column .price-record-detail-section {
  justify-self: start;
  width: 50%;
}

.price-record-detail-special-column {
  display: grid;
  align-self: start;
  gap: 6px;
  min-width: 0;
}

.price-record-detail-section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.82);
}

.price-record-detail-section h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.84rem;
}

.price-record-detail-section.is-compact {
  align-self: start;
  gap: 4px;
  padding: 4px 7px;
}

.price-record-detail-section.is-compact h4 {
  font-size: 0.76rem;
}

.price-record-detail-section.is-compact .price-record-summary {
  align-items: start;
  gap: 4px;
}

.price-record-detail-section.is-compact .order-inline-summary div {
  align-content: start;
  gap: 1px;
  min-height: 40px;
  padding: 3px 6px;
  border-radius: 8px;
}

.price-record-detail-section.is-compact .order-inline-summary span {
  font-size: 0.68rem;
  line-height: 1.1;
}

.price-record-detail-section.is-compact .order-inline-summary strong {
  font-size: 0.78rem;
  line-height: 1.12;
}

.price-record-detail-section .price-record-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-record-detail-primary-column .price-record-detail-section .price-record-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-price-supplier-title,
.price-record-detail-actions {
  display: flex;
  align-items: center;
}

.cost-price-supplier-title {
  justify-content: space-between;
  gap: 10px;
}

.cost-price-supplier-title > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cost-price-supplier-title small {
  color: var(--muted);
  font-size: 0.76rem;
}

.price-record-detail-actions {
  flex-shrink: 0;
  gap: 6px;
}

.price-compare-panel {
  display: grid;
  gap: 14px;
}

.price-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

.price-compare-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.price-compare-card-head,
.price-compare-product-name,
.price-compare-records-title,
.price-compare-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.price-compare-card-head > div,
.price-compare-product-name {
  min-width: 0;
}

.price-compare-card-head > div {
  display: grid;
  gap: 2px;
}

.price-compare-card-head span,
.price-compare-select span,
.price-compare-product-name span,
.price-compare-main-price span,
.price-compare-records-title span,
.price-compare-record-row small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.price-compare-card-head strong,
.price-compare-product-name strong,
.price-compare-record-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-compare-select {
  display: grid;
  gap: 6px;
}

.price-compare-select select {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.88rem;
}

.price-compare-product-name {
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.86);
}

.price-compare-product-name span {
  flex-shrink: 0;
}

.price-compare-main-price {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.08);
}

.price-compare-main-price strong {
  color: var(--text);
  font-size: 1.26rem;
}

.price-compare-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.price-compare-metrics div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.price-compare-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.price-compare-metrics strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-compare-metrics .positive-value strong,
.price-compare-metrics .negative-value strong {
  color: inherit;
}

.price-compare-records {
  display: grid;
  gap: 8px;
}

.price-compare-records-title {
  padding-top: 2px;
}

.price-compare-record-row {
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.price-compare-record-row > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.price-compare-record-row > span:nth-child(2),
.price-compare-record-row > strong {
  flex-shrink: 0;
}

.price-compare-empty {
  padding: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(248, 250, 252, 0.72);
  font-weight: 800;
  text-align: center;
}

.order-inline-detail {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  cursor: default;
  transform-origin: top;
  animation: orderDetailExpand 180ms ease both;
}

.order-inline-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.purchase-receipt-summary {
  grid-template-columns:
    minmax(150px, 1fr) minmax(136px, 0.82fr) minmax(112px, 0.64fr)
    minmax(122px, 0.58fr) minmax(132px, 0.62fr) minmax(380px, 2fr);
}

.purchase-receipt-summary .purchase-receipt-summary-compact {
  padding-left: 8px;
  padding-right: 8px;
}

@keyframes orderDetailExpand {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.order-inline-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.order-inline-summary .order-inline-reconcile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.08);
  cursor: pointer;
}

.order-inline-summary .order-inline-reconcile span {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 850;
}

.order-inline-reconcile input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--blue);
  cursor: pointer;
}

.order-inline-reconcile:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

.purchase-receipt-reconcile-field {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(78px, 0.67fr) minmax(260px, 1fr);
  gap: 8px;
}

.purchase-receipt-reconcile-field .order-inline-reconcile {
  gap: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

.purchase-receipt-reconcile-note {
  display: grid;
  align-items: stretch;
  min-width: 0;
  min-height: 72px;
}

.purchase-receipt-reconcile-note input {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 72px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.86);
}

.document-receipt-reconcile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.08);
}

.document-receipt-reconcile-field {
  display: grid;
  grid-template-columns: minmax(82px, 0.67fr) minmax(260px, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.document-receipt-reconcile span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
}

.order-inline-summary span,
.order-inline-product span,
.order-inline-products-head {
  color: var(--muted);
}

.order-inline-summary span,
.order-inline-products-head {
  font-size: 0.76rem;
  font-weight: 800;
}

.order-inline-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-inline-products {
  display: grid;
  gap: 6px;
}

.order-inline-products-head,
.order-inline-product {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 52px minmax(100px, auto) minmax(110px, auto);
  align-items: center;
  gap: 10px;
}

.purchase-receipt-inline-products .order-inline-products-head,
.purchase-receipt-inline-products .order-inline-product {
  grid-template-columns: 42px minmax(220px, 1fr) 52px minmax(100px, auto) minmax(110px, auto);
}

.return-receipt-inline-products .order-inline-products-head,
.return-receipt-inline-products .return-receipt-product-card {
  grid-template-columns: 42px minmax(240px, 1fr) 72px 116px 126px;
}

.order-inline-products-head {
  padding: 0 10px;
  text-transform: uppercase;
}

.order-inline-products-body {
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.order-inline-product {
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.order-inline-product.is-returned {
  opacity: 0.72;
}

.order-inline-product.is-returned strong,
.order-inline-product.is-returned span {
  text-decoration: line-through;
}

.order-inline-product div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-inline-product strong,
.order-inline-product span {
  min-width: 0;
}

.order-inline-product > span,
.order-inline-product > strong,
.order-inline-products-head span:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.purchase-receipt-inline-products .order-inline-products-head span:first-child,
.purchase-receipt-inline-products .order-inline-product > span:first-child {
  color: var(--muted);
  text-align: center;
}

.purchase-receipt-inline-products .order-inline-products-head span:nth-child(2) {
  text-align: left;
}

.return-receipt-inline-products .order-inline-products-head span:first-child,
.return-receipt-inline-products .order-inline-products-head span:nth-child(2),
.return-receipt-product-index {
  text-align: center;
}

.return-receipt-inline-products .order-inline-products-head span:nth-child(2) {
  text-align: left;
}

.return-receipt-product-card {
  min-height: 64px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff;
}

.return-receipt-product-main {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.return-receipt-product-avatar {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 7px;
  background: #eef6ff;
  color: #006495;
  font-size: 0.72rem;
  font-weight: 800;
}

.return-receipt-product-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.return-receipt-product-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.return-receipt-product-copy strong,
.return-receipt-product-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.return-receipt-product-copy small {
  color: var(--muted);
  font-size: 0.74rem;
}

.return-receipt-product-quantity {
  justify-self: end;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 7px;
  background: #eef6ff;
  color: #006495;
  text-align: center;
}

.return-receipt-product-price,
.return-receipt-product-refund {
  text-align: right;
}

.return-receipt-product-refund {
  color: #08745b;
}

.order-inline-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.order-inline-actions .secondary-button {
  min-width: 96px;
}

.order-note-popup-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.order-note-popup-meta span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.order-note-popup-meta strong {
  overflow-wrap: anywhere;
  text-align: right;
}

.order-note-popup-body {
  padding: 14px 16px;
  border: 1px solid #f0c36b;
  border-radius: 14px;
  background: #fffaf0;
  color: var(--text);
}

.order-note-popup-body p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.purchase-receipt-detail-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(260px, max-content);
  align-content: start;
  gap: 14px;
  min-height: 0;
}






.module-table-header,
.product-table-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-width: 820px;
}

.product-table-columns {
  grid-template-columns: 24px minmax(190px, 1.8fr) minmax(100px, 0.9fr) minmax(80px, 0.72fr) 88px 88px 58px 112px 30px;
}




.customer-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(0, 168, 128, 0.22);
  border-radius: 999px;
  color: #067a5e;
  background: #e8fbf5;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.customer-new-badge .icon,
.customer-new-badge svg {
  width: 11px;
  height: 11px;
}

.module-table-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.11);
  color: var(--muted);
  background: #edf2f7;
  font-size: 0.72rem;
  font-weight: 850;
}

.module-table-header span:nth-last-child(-n + 5) {
  text-align: right;
}

.product-table-row.product-card {
  min-height: 58px;
  height: auto;
  margin: 0;
  padding: 7px 12px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}










.product-table-row.product-card:hover {
  background: rgba(10, 132, 255, 0.045);
  box-shadow: none;
  transform: none;
}

.module-table-check {
  display: inline-flex;
  justify-content: center;
}

.module-table-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}

.module-table-entity {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.module-table-entity > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.module-table-entity strong,
.module-table-entity small,
.product-table-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-table-entity strong {
  font-size: 0.82rem;
}

.module-table-entity small,
.module-table-date {
  color: var(--muted);
  font-size: 0.72rem;
}

.module-table-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 6px;
  color: #075985;
  background: rgba(10, 132, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 900;
}

.module-table-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.module-table-number {
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.module-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.module-table-action:hover {
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.1);
}

#productsView .card-grid-shell {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 14px;
}

.card-grid-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

#ordersView.active,
#returnsView.active,
#vatInvoicesView.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  height: 100%;
  min-height: 0;
}

#ordersView .order-card-list,
#returnsView .order-card-list,
#vatInvoicesView .order-card-list {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.mobile-pagination {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #434656;
  font: 500 12px/16px Inter,Arial,sans-serif;
}
.mobile-pagination[hidden] { display: none; }
.mobile-pagination-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; padding: 0 4px; }
.mobile-pagination-summary > span:first-child { min-width: 0; }
.mobile-pagination-summary > span:last-child { flex-shrink: 0; color: #737687; }
.mobile-pagination-summary strong { color: #131b2e; font-weight: 600; }
.mobile-pagination-pages { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 6px; box-sizing: border-box; max-width: 100%; padding: 6px; border: 1px solid #c3c5d94d; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px #0f172a0a; }
.mobile-pagination-pages button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #131b2e; font: 500 13px/20px Inter,Arial,sans-serif; cursor: pointer; transition: background-color .15s,transform .15s; }
.mobile-pagination-pages button:hover:not(:disabled) { background: #f2f3ff; }
.mobile-pagination-pages button.active { background: #006495; color: #fff; font-weight: 600; box-shadow: 0 2px 8px -2px #00649566; }
.mobile-pagination-pages button:active:not(:disabled) { transform: scale(.95); }
.mobile-pagination-pages button:focus-visible { outline: 2px solid #006495; outline-offset: 2px; }
.mobile-pagination-pages button:disabled { background: #f2f3ff80; color: #73768780; cursor: not-allowed; }
.mobile-pagination-pages svg { width: 20px; height: 20px; }
.mobile-pagination-gap { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 36px; color: #737687; font: 500 13px/20px Inter,Arial,sans-serif; user-select: none; }
.mobile-pagination-tools { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-width: 0; }
.mobile-pagination-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: #434656; font: 500 12px/16px Inter,Arial,sans-serif; }
.mobile-pagination-selection input { flex: 0 0 14px; width: 14px; min-width: 14px; height: 14px; min-height: 14px; margin: 0; padding: 0; accent-color: #006495; }
.mobile-pagination-selection small { color: #737687; font: inherit; }
.mobile-pagination-bulk { min-height: 30px; padding: 4px 10px; border: 1px solid #00649533; border-radius: 10px; background: #00649514; color: #006495; font: 600 12px/16px Inter,Arial,sans-serif; }
.mobile-pagination-bulk:disabled { opacity: .45; }
@media (max-width: 360px) {
  .mobile-pagination-summary { gap: 4px; padding: 0; font-size: 11px; }
  .mobile-pagination-pages { gap: 4px; }
  .mobile-pagination-pages button { flex-basis: 32px; width: 32px; min-width: 32px; height: 36px; }
  .mobile-pagination-gap { flex-basis: 20px; width: 20px; }
}


.product-select-check input {
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}

.product-card {
  display: grid;
  gap: 14px;
  min-height: 260px;
  padding: 16px;
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.8));
  border-radius: var(--card-radius, 22px);
  background: var(--surface-background, linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 246, 251, 0.9)));
  box-shadow: var(--surface-shadow, 0 16px 36px rgba(15, 23, 42, 0.06));
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}



.product-select-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}








.customer-type-segments { display: none; }












.product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 132, 255, 0.24);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.09);
}

.product-import-workspace {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.product-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.product-import-card {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 188px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.product-import-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.product-import-card-head > .icon {
  width: 42px;
  height: 42px;
  color: var(--blue);
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.08);
}

.product-import-card-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.product-import-card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.45;
}

.product-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-import-actions .primary-button,
.product-import-actions .secondary-button {
  min-height: 36px;
  border-radius: 10px;
}

.product-import-back {
  justify-self: start;
  min-height: 36px;
  border-radius: 10px;
}

.product-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 34px;
}


.party-card-detail-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  border: 1px solid rgba(10, 132, 255, 0.22);
  border-radius: 50%;
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.08);
  cursor: pointer;
}

.party-card-detail-button:hover {
  background: rgba(10, 132, 255, 0.16);
}

.party-card-detail-button .icon,
.party-card-detail-button .icon svg {
  width: 17px;
  height: 17px;
}

.product-card-profile {
  display: grid;
  justify-items: center;
}

.product-card-avatar {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 5px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  color: var(--blue-dark);
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.14), rgba(52, 211, 153, 0.14));
  box-shadow: 0 12px 28px rgba(10, 132, 255, 0.12);
  font-size: 1.9rem;
  font-weight: 800;
}

.product-card-avatar {
  overflow: hidden;
  border-radius: 22px;
}

.product-card-avatar .icon {
  width: 34px;
  height: 34px;
}

.product-card-avatar .icon svg {
  width: 34px;
  height: 34px;
}

.product-title {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.product-title strong,
.list-item strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.product-title strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  font-size: 0.94rem;
  line-height: 1.22;
}

.product-title span,
.muted {
  color: var(--muted);
  font-size: 0.86rem;
}

.product-title span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card-info {
  display: grid;
  gap: 8px;
}

.product-card-info {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invoice-vat-product-card .product-card-info {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.product-card-info span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.product-card-info small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.product-card-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 0.9rem;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}

.product-actions .ghost-button {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
}

.product-actions .ghost-button[data-delete-product] {
  border-color: rgba(239, 68, 68, 0.16);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}













.customer-card-avatar,
.customer-detail-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: var(--blue-dark);
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.14), rgba(52, 211, 153, 0.14));
  font-weight: 800;
}

.customer-card-avatar {
  position: relative;
  width: 112px;
  height: 112px;
  border: 5px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(10, 132, 255, 0.12);
  font-size: 1.9rem;
}

.product-card-avatar img,
.customer-card-avatar img,
.customer-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-card-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.customer-avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}













.customer-empty-state {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.76);
}

.sales-workspace,
.purchase-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 18px;
  align-items: stretch;
}

#purchaseEntryView .purchase-workspace,
#purchaseInvoiceEntryView .purchase-workspace,
#vatInvoiceEntryView .purchase-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  height: calc(100vh - 142px);
  min-height: 540px;
}

body.sales-mode .app-shell {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

body.sales-mode .main {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

body.sales-mode .topbar {
  position: static;
  top: auto;
}

body.sales-mode #salesView,
body.sales-mode #returnEntryView {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.sales-mode .sales-workspace {
  height: 100%;
  overflow: hidden;
}

.sales-products-panel,
.purchase-products-panel {
  min-height: 0;
  overflow: hidden;
}

.purchase-products-panel {
  display: block;
}

.purchase-products-panel.is-hidden {
  display: none;
}

.purchase-product-suggestions {
  left: 0;
  top: calc(100% + 8px);
  width: 100%;
}

.purchase-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 0;
  padding: 18px;
}

.purchase-card .payment-summary {
  align-content: start;
}

.purchase-net-total-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.purchase-paid-row input {
  text-align: right;
}

.purchase-debt-row[data-balance="debt"] strong,
.purchase-debt-row[data-balance="debt"] span {
  color: var(--amber);
}

.purchase-card .payment-button {
  align-self: end;
}

.purchase-invoice-card {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

#purchaseInvoiceEntryView .purchase-invoice-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
}

#purchaseInvoiceEntryView,
#purchaseInvoiceEntryView button,
#purchaseInvoiceEntryView input,
#purchaseInvoiceEntryView table {
  font-family: var(--font);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

#purchaseInvoiceEntryView .purchase-invoice-heading h2 {
  font-family: var(--font);
  font-weight: 800;
}

.purchase-invoice-heading {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.purchase-invoice-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(138px, 0.85fr);
  gap: 10px;
}

.purchase-invoice-meta-row label,
.purchase-invoice-supplier-section {
  display: grid;
  gap: 6px;
}

.purchase-invoice-meta-row span,
.purchase-invoice-supplier-section > strong {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.purchase-invoice-meta-row input {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.93rem;
}

.purchase-invoice-date-wrap {
  position: relative;
}

.purchase-receipt-date-dropdown,
.purchase-payment-date-dropdown,
.supplier-payment-date-dropdown,
.purchase-invoice-date-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(330px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  z-index: 1000;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.22);
}

.purchase-receipt-date-dropdown.show,
.purchase-payment-date-dropdown.show,
.supplier-payment-date-dropdown.show,
.purchase-invoice-date-dropdown.show {
  display: grid !important;
}

.purchase-invoice-product-card {
  gap: 10px;
}

.purchase-vat-name-field,
.purchase-invoice-line-controls label,
.purchase-vat-rate-field {
  display: grid;
  gap: 5px;
}

.purchase-vat-name-field span,
.purchase-invoice-line-controls span,
.purchase-vat-rate-field > span:first-child {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.purchase-vat-name-field input,
.purchase-invoice-line-controls input {
  min-height: 34px;
  border-radius: 12px;
}

.purchase-invoice-line-controls {
  display: grid;
  grid-template-columns: minmax(76px, 0.62fr) minmax(118px, 1fr) minmax(112px, 0.9fr) 38px;
  align-items: end;
  gap: 8px;
}

.purchase-invoice-line-controls [data-purchase-quantity],
.purchase-invoice-line-controls [data-purchase-unit-price] {
  text-align: right;
}

.purchase-vat-options {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.purchase-vat-options button {
  min-height: 34px;
  min-width: 46px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 900;
}

.purchase-vat-options button.active {
  color: white;
  background: var(--blue);
}

.purchase-import-line-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.purchase-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.purchase-price-row .purchase-price-field {
  flex: 0 0 clamp(92px, 20%, 128px);
}

.purchase-price-row .purchase-vat-toggle-field {
  flex: 0 0 64px;
}

.purchase-import-line-controls input {
  min-height: 34px;
  border-radius: 12px;
  text-align: right;
}

.purchase-import-line-controls [data-purchase-net-unit-price],
.purchase-import-line-controls [data-purchase-unit-price] {
  width: 100%;
  min-width: 0;
}

.purchase-import-line-controls [data-purchase-quantity] {
  width: 46px;
  min-width: 0;
}

.purchase-price-field span,
.purchase-vat-toggle-field > span:first-child {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.purchase-vat-toggle {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--blue-dark);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.purchase-vat-toggle:hover {
  border-color: rgba(10, 132, 255, 0.34);
  background: rgba(10, 132, 255, 0.08);
}

.purchase-remove-button {
  align-self: end;
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.purchase-qty-stepper {
  flex: 0 0 auto;
  align-self: stretch;
  align-items: flex-end;
  padding-top: calc(0.72rem + 4px);
}

.purchase-qty-stepper button,
.purchase-qty-stepper .sale-quantity-input {
  height: 34px;
  min-height: 34px;
}

.purchase-invoice-supplier-table {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.purchase-invoice-supplier-section {
  min-height: 0;
  max-height: 188px;
  overflow: auto;
}

#purchaseInvoiceEntryView .purchase-invoice-supplier-section {
  max-height: none;
}

.purchase-invoice-supplier-table table {
  min-width: 0;
  table-layout: fixed;
}

.purchase-invoice-supplier-table th,
.purchase-invoice-supplier-table td {
  padding: 8px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.purchase-invoice-supplier-table th {
  width: 112px;
}

.supplier-invoice-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.supplier-invoice-info-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.supplier-invoice-info-item.primary {
  grid-column: 1 / -1;
  background: rgba(10, 132, 255, 0.08);
}

.supplier-invoice-info-item span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.supplier-invoice-info-item strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.invoice-info-grid {
  display: grid;
  gap: 8px;
}

.invoice-info-row {
  display: grid;
  grid-template-columns: minmax(116px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
}

.invoice-info-row span {
  color: var(--muted);
  font-weight: 800;
}

.invoice-info-row strong {
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.purchase-invoice-vat-row strong {
  color: var(--text);
  text-align: right;
}

.cashbook-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: min(720px, calc(100vh - 132px));
}

.cashbook-form-panel,
.cashbook-history-panel {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.cashbook-form-panel {
  align-content: start;
}

.cashbook-history-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.cashbook-history-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: end;
  gap: 12px;
}

.cashbook-history-head h2 {
  margin: 0;
  font-size: 1rem;
}

.cashbook-history-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.cashbook-search-box {
  width: 100%;
  min-width: 0;
}

.cashbook-form {
  display: grid;
  gap: 12px;
}

.cashbook-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.cashbook-date-wrap,
.cashbook-date-wrap > input {
  width: 100%;
}

.cashbook-date-dropdown {
  width: min(310px, calc(100vw - 48px));
}

.cashbook-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cashbook-summary div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.cashbook-summary span,
.cashbook-entry span,
.cashbook-entry small,
.cashbook-entry time {
  color: var(--muted);
}

.cashbook-list {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 0;
  max-height: calc(100vh - 340px);
  overflow: auto;
  padding-right: 2px;
}

.cashbook-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(128px, 0.64fr) minmax(118px, auto);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.cashbook-entry.expense[data-cash-entry] {
  cursor: pointer;
}

.cashbook-entry.is-linked-focus {
  border-color: rgba(10, 132, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.14);
}

.cashbook-entry > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cashbook-entry-code {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.1);
  font-size: 0.78rem;
}

.cashbook-entry.expense .cashbook-entry-code {
  color: #b4233d;
  background: rgba(180, 35, 61, 0.1);
}

.cashbook-entry strong,
.cashbook-entry span,
.cashbook-entry small {
  overflow-wrap: anywhere;
}

.cashbook-entry > strong {
  text-align: right;
  color: #006c54;
}

.cashbook-entry.expense > strong {
  color: #b4233d;
}

.vat-export-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
}

.vat-export-customer-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  background: var(--panel);
  backdrop-filter: blur(22px) saturate(1.2);
  overflow: visible;
}

.vat-customer-search-wrap {
  position: relative;
}

.vat-customer-info-section {
  align-content: start;
}

.vat-export-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.vat-export-meta-row,
.vat-export-amount-row {
  grid-template-columns: minmax(0, 1fr);
}

.vat-export-meta-row label,
.vat-export-amount-row label {
  min-width: 0;
}

.vat-export-meta-row select,
.vat-export-meta-row input,
.vat-export-amount-row select,
.vat-export-amount-row input {
  min-height: 38px;
  border-radius: 12px;
}

.return-card {
  grid-template-rows: auto auto 1fr auto;
}

.return-source-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.return-source-card span,
.return-source-card small {
  color: var(--muted);
  font-size: 0.8rem;
}

.return-source-card strong {
  font-size: 1.05rem;
}

.return-product-card.is-returned {
  opacity: 0.78;
}

.return-product-card.is-returned .product-title strong,
.return-product-card.is-returned .product-title span,
.return-product-card.is-returned .sale-line-total {
  text-decoration: line-through;
}

.return-toggle-button {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  min-width: 82px;
  padding: 0 10px;
}

.return-actions {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 10px;
}

.return-actions .payment-button {
  width: 100%;
}

.return-payment-signature-field {
  min-width: 0;
}

.mobile-return-entry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #c8dff7;
  border-radius: 10px;
  color: #006495;
  background: #edf5ff;
  font-size: 0.72rem;
  font-weight: 850;
}

.sales-products-panel.is-hidden {
  display: none;
}

.selected-products {
  display: grid;
  gap: 12px;
  max-height: 100%;
  overflow: auto;
  scrollbar-width: none;
}

.selected-products::-webkit-scrollbar {
  display: none;
}

.sale-product-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
}

.sale-product-card.is-promotion {
  border-color: #f59e0b;
  background: #fffaf0;
}

.sale-product-avatar {
  display: grid;
  place-items: center;
  width: 78px;
  height: 100%;
  min-height: 84px;
  overflow: hidden;
  border-radius: 16px;
  color: var(--blue-dark);
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.14), rgba(52, 211, 153, 0.14));
  font-size: 1.1rem;
  font-weight: 800;
}

.sale-product-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sale-product-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sale-product-card .product-title {
  justify-items: start;
  text-align: left;
}

.sale-product-main,
.sale-product-meta,
.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sale-product-main {
  align-items: flex-start;
  min-width: 0;
}

.sale-line-total {
  white-space: nowrap;
}

.sale-product-meta {
  color: var(--muted);
  font-size: 0.86rem;
}

.unit-price-field {
  display: block;
  width: min(112px, 24%);
}

.sale-delivered-quantity-field {
  display: grid;
  grid-template-columns: auto 54px;
  align-items: center;
  gap: 7px;
  min-width: 126px;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.sale-promotion-quantity-field {
  display: grid;
  grid-template-columns: auto 54px;
  align-items: center;
  gap: 7px;
  min-width: 126px;
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.sale-promotion-quantity-field input {
  width: 54px;
  min-height: 34px;
  padding: 0 7px;
  border-color: #f4c97a;
  border-radius: 12px;
  color: #92400e;
  background: #fffaf0;
  font-size: 0.84rem;
  font-weight: 900;
  text-align: center;
}

.sale-delivered-quantity-field input {
  width: 54px;
  min-height: 34px;
  padding: 0 7px;
  border-radius: 12px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 900;
  text-align: center;
}

.purchase-price-field {
  display: grid;
  gap: 4px;
  width: min(126px, 28%);
}

.purchase-price-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.unit-price-field input {
  min-height: 34px;
  border-radius: 12px;
  text-align: right;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}

.qty-stepper button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
}

.qty-stepper strong {
  min-width: 28px;
  text-align: center;
}

.qty-stepper .sale-quantity-input {
  width: 46px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 12px;
  text-align: center;
}

.sales-delivery-debt-row,
.order-inline-delivery-debt {
  color: #9a6700;
}

.sales-delivery-debt-warning,
.order-product-debt-warning {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8a5a00;
  font-size: 0.76rem;
  font-weight: 850;
}

.sales-delivery-debt-warning {
  margin: 6px 0;
  padding: 9px 10px;
  border: 1px solid #f4c97a;
  border-radius: 8px;
  background: #fff7e6;
}

.order-product-debt-warning.is-compact {
  gap: 0;
}

.order-product-debt-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #ffffff;
  background: #e4a11b;
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1;
}

.order-promotion-amount {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}

.order-promotion-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: #b45309;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 14px;
  white-space: nowrap;
}

.order-promotion-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #ffffff;
  background: #f59e0b;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
}

.order-promotion-disclosure {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.order-promotion-trigger {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: #f59e0b;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.order-promotion-trigger:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.28);
  outline-offset: 2px;
}

.order-promotion-detail {
  max-width: 110px;
  color: #b45309;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: right;
  white-space: normal;
}

.order-inline-product.is-promotion {
  border-color: #f59e0b;
  background: #fffaf0;
}

.order-inline-product.has-promotion {
  border-color: #f59e0b;
  background: #fffaf0;
}

.order-inline-product .order-promotion-label,
.order-inline-product .order-promotion-label > span:last-child {
  color: #b45309;
}

.order-inline-product .order-promotion-icon {
  color: #ffffff;
}

.mobile-order-product-row.is-promotion {
  margin: 8px 10px;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  background: #fffaf0;
}

.mobile-order-product-row.has-promotion {
  margin: 8px 10px;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  background: #fffaf0;
}

.order-deliver-more-button {
  color: #8a5a00;
  border-color: #f4c97a;
  background: #fff7e6;
}

.payment-card {
  position: sticky;
  top: 82px;
  grid-column: 2;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 16px;
  min-height: calc(100vh - 100px);
}

body.sales-mode .payment-card {
  position: static;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.payment-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.84rem;
}

.invoice-meta-grid {
  display: grid;
  grid-template-columns: minmax(118px, 0.85fr) minmax(126px, 0.9fr) minmax(156px, 1.25fr);
  gap: 10px;
}

.invoice-meta-grid label,
.invoice-meta-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.invoice-meta-grid input,
.invoice-meta-grid select {
  min-height: 38px;
  border-radius: 12px;
}

.date-time-wrap,
.channel-level2-field,
.channel-search-wrap {
  position: relative;
  min-width: 0;
}

#salesView .channel-search-wrap {
  align-self: end;
  justify-self: end;
  max-width: 150px;
  width: 100%;
}

.date-time-wrap input,
.channel-search-wrap input {
  cursor: pointer;
}

.datetime-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 35;
  display: none;
  width: 310px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.98);
}

.datetime-dropdown.show {
  display: grid;
  gap: 10px;
}

.calendar-head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
}

.calendar-head button,
.calendar-grid button {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
}

.calendar-head button {
  height: 34px;
  font-size: 1.2rem;
}

.calendar-head strong {
  color: var(--text);
  text-align: center;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.calendar-grid button {
  height: 32px;
  color: var(--text);
}

.calendar-grid button.muted-day {
  color: rgba(82, 96, 113, 0.55);
}

.calendar-grid button.selected {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}

.calendar-time {
  display: grid;
  gap: 6px;
}

.calendar-time input {
  width: 100%;
}

.channel-suggestions {
  width: 100%;
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}

#salesView .channel-suggestions {
  left: auto;
  right: 0;
  width: min(260px, calc(100vw - 40px));
}

.channel-suggestions.show {
  max-height: none;
  overflow: visible;
}

.channel-suggestions::-webkit-scrollbar {
  display: none;
}

.payment-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
}

.sales-checkout-note-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.sales-checkout-note-field textarea {
  width: 100%;
  min-height: 66px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-weight: 500;
}

.sales-pos-toolbar,
.sales-pos-only,
.sales-pos-table-head,
.sales-pos-footer,
.sales-pos-line-number,
.sales-pos-unit {
  display: none;
}

.sales-pos-table {
  display: contents;
}

.mobile-checkout-body,
.mobile-checkout-print { display: none; }

.sales-pos-actions {
  display: contents;
}

@media (max-width: 760px) {
  .sales-pos-only { display: none !important; }
}

.payment-row {
  min-height: 38px;
  color: var(--muted);
}

.payment-row strong {
  color: var(--text);
}

.sales-delivery-row {
  align-items: center;
}

.sales-delivery-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 248px;
}

.sales-delivery-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.sales-delivery-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sales-delivery-option-body {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.82);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.sales-delivery-option:hover .sales-delivery-option-body {
  border-color: #b7c4d3;
  background: #ffffff;
}

.sales-delivery-option-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  color: #64748b;
  background: #edf2f7;
  transition: color 160ms ease, background-color 160ms ease;
}

.sales-delivery-option-icon .icon,
.sales-delivery-option-icon svg {
  width: 16px;
  height: 16px;
}

.sales-delivery-option-label {
  min-width: 0;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-delivery-option-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #bdc9d6;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
}

.sales-delivery-option input[value="immediate"]:checked + .sales-delivery-option-body {
  border-color: #69b99d;
  color: #075f43;
  background: #edf9f4;
  box-shadow: 0 0 0 1px rgba(11, 139, 101, 0.08);
}

.sales-delivery-option input[value="immediate"]:checked + .sales-delivery-option-body .sales-delivery-option-icon {
  color: #087455;
  background: #d7f1e7;
}

.sales-delivery-option input[value="order"]:checked + .sales-delivery-option-body {
  border-color: #ddb85e;
  color: #7a5200;
  background: #fff8e7;
  box-shadow: 0 0 0 1px rgba(176, 122, 0, 0.08);
}

.sales-delivery-option input[value="order"]:checked + .sales-delivery-option-body .sales-delivery-option-icon {
  color: #8a5c00;
  background: #f9e8b8;
}

.sales-delivery-option input:checked + .sales-delivery-option-body .sales-delivery-option-check {
  border-color: #0b8b65;
  background: #0b8b65;
}

.sales-delivery-option input[value="order"]:checked + .sales-delivery-option-body .sales-delivery-option-check {
  border-color: #b77900;
  background: #b77900;
}

.sales-delivery-option input:checked + .sales-delivery-option-body .sales-delivery-option-check::before {
  content: "\2713";
}

.sales-delivery-option input:focus-visible + .sales-delivery-option-body {
  outline: 2px solid #006495;
  outline-offset: 2px;
}

.customer-supplier-sync-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.86);
}

.customer-supplier-sync-row input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--blue);
}

.customer-supplier-sync-row span {
  display: grid;
  gap: 2px;
}

.customer-supplier-sync-row strong {
  color: var(--text);
  font-size: 0.84rem;
}

.customer-supplier-sync-row small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.payment-row.editable input,
.payment-row.editable select {
  width: 150px;
  min-height: 36px;
  border-radius: 12px;
}

.sales-reconcile-row {
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  margin-top: 2px;
  color: var(--text);
  font-weight: 900;
}

.sales-reconcile-row input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--blue);
}

#salesPaidAmount[readonly] {
  color: var(--muted);
  background: rgba(241, 245, 249, 0.92);
}

.discount-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.discount-control input {
  width: 112px !important;
  text-align: right;
}

.discount-mode-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.86);
  font-weight: 900;
}

.payment-due-row strong {
  color: var(--text);
  font-size: 1.05rem;
}

.payment-method-row.is-hidden {
  display: none;
}

.payment-method-options {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.payment-method-option {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
}

.payment-method-option.active {
  color: white;
  background: var(--blue);
}

.payment-balance[data-balance="debt"] strong,
.payment-balance[data-balance="debt"] span {
  color: #b4233d;
}

.payment-balance[data-balance="credit"] strong,
.payment-balance[data-balance="credit"] span {
  color: var(--blue);
}

.payment-balance[data-balance="settled"] strong,
.payment-balance[data-balance="settled"] span {
  color: #006c54;
}

.payment-total {
  min-height: 50px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text);
}

.payment-total strong {
  font-size: 1.45rem;
}

.payment-button {
  width: 100%;
  align-self: end;
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}

.tax-form-panel {
  display: grid;
  gap: 14px;
}

.tax-action-panel {
  margin-bottom: 14px;
}

.tax-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tax-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.84rem;
}

.tax-form .wide-field,
.tax-form-actions {
  grid-column: 1 / -1;
}

.tax-form-actions {
  display: flex;
  justify-content: flex-end;
}

.tax-form-actions .primary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 176px;
  padding: 0 14px;
}

.vat-invoice-card .order-card-channel {
  max-width: 100%;
}

.vat-inline-note {
  grid-template-columns: minmax(220px, 1fr) 72px minmax(100px, auto) minmax(160px, 0.8fr);
}

.invoice-inventory-grid .customer-empty-state {
  grid-column: 1 / -1;
}

#invoiceInventoryList.invoice-inventory-grid {
  grid-template-rows: repeat(2, minmax(260px, max-content));
  grid-auto-rows: minmax(260px, max-content);
  align-content: start;
}

#invoiceInventoryView .invoice-vat-product-card .product-card-info {
  grid-template-columns: 1fr;
}

#invoiceInventoryView .invoice-vat-product-card .product-card-info span {
  grid-template-columns: minmax(92px, max-content) minmax(0, 1fr);
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
}

#invoiceInventoryView .invoice-vat-product-card .product-card-info small {
  white-space: nowrap;
}

#invoiceInventoryView .invoice-vat-product-card .product-card-info strong {
  overflow: visible;
  text-align: right;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.workspace-hero {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 168px;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  gap: 16px;
}

.settings-hero {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 220px;
}

.print-settings-card {
  display: grid;
  gap: 16px;
}

.customer-import-settings-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.product-import-settings-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
}

.settings-warehouse-shortcuts {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
}

.misa-export-settings-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 22px;
}

.misa-export-settings-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.misa-export-settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.misa-export-settings-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.misa-export-settings-form input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font: inherit;
}

.misa-export-settings-form input:focus {
  outline: 0;
  border-color: #82b8e6;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
}

.misa-export-settings-form .primary-button {
  min-height: 42px;
  white-space: nowrap;
}

.misa-settings-export-menu {
  align-self: end;
}

.misa-settings-export-menu .misa-export-dropdown {
  right: 0;
  left: auto;
}

.misa-export-settings-note {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
}

.misa-export-settings-note span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
}

.misa-export-settings-note strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-warehouse-shortcuts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.settings-warehouse-shortcut-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-warehouse-shortcut-list button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.settings-warehouse-shortcut-list button:hover,
.settings-warehouse-shortcut-list button:focus-visible {
  outline: 0;
  border-color: #b8d5ee;
  background: #f7fbff;
}

.settings-warehouse-shortcut-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #1769aa;
  background: #eef6ff;
}

.settings-warehouse-shortcut-list button > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-warehouse-shortcut-list strong,
.settings-warehouse-shortcut-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-warehouse-shortcut-list strong { font-size: 0.82rem; }
.settings-warehouse-shortcut-list small { color: var(--muted); font-size: 0.7rem; font-weight: 700; }
.settings-warehouse-shortcut-chevron { color: #64748b; transform: rotate(-90deg); }

.product-import-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.product-import-settings-list {
  display: grid;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.product-import-settings-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.product-import-settings-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--blue);
  background: rgba(10, 132, 255, 0.08);
}

.product-import-settings-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.product-import-settings-row small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.customer-import-settings-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.customer-import-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.customer-import-columns span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.customer-import-columns strong {
  color: var(--blue);
  font-size: 0.86rem;
}

.customer-import-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.customer-import-settings-actions .secondary-button {
  text-decoration: none;
}

.print-settings-card-head,
.print-settings-card-body,
.print-design-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.print-settings-card-head {
  align-items: flex-start;
}

.print-settings-card-body {
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.print-settings-card-body > div,
.print-design-preview-head {
  display: grid;
  gap: 4px;
}

.print-settings-card-body span,
.print-design-preview-head span,
.print-template-card small {
  color: var(--muted);
  line-height: 1.45;
}

.print-settings-card-body span,
.print-design-preview-head span {
  font-size: 0.76rem;
  font-weight: 800;
}

.print-toggle-row input {
  width: 44px;
  min-height: 24px;
  accent-color: var(--blue);
}

.print-settings-mini-preview {
  display: grid;
  grid-template-rows: 28px 36px 1fr 34px;
  gap: 8px;
  min-height: 220px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: #fff;
}

.print-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.print-design-template-manager {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.print-design-template-manager-head,
.print-design-template-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.print-design-template-manager-head small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.print-design-template-manager select,
.print-design-template-name-field input {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.88rem;
}

.print-design-template-actions {
  justify-content: flex-start;
}

.print-design-template-name-field {
  display: grid;
  gap: 6px;
}

.print-design-template-name-field > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.print-template-card {
  display: grid;
  gap: 8px;
  min-height: 260px;
  padding: 14px;
  text-align: left;
}

.print-design-options .print-template-card {
  min-height: 142px;
}

#printDesignModal {
  width: min(1280px, calc(100vw - 24px));
}

.print-design-modal-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-height: calc(100vh - 24px);
  overflow: hidden;
}

.print-design-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.18fr);
  gap: 14px;
  height: min(780px, calc(100vh - 170px));
  min-height: 0;
}

.print-design-options,
.print-design-preview-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
  overflow: auto;
}

.print-design-options h3 {
  margin: 0;
  font-size: 0.98rem;
}

.print-design-fields {
  display: grid;
  gap: 10px;
}

.print-design-fields label {
  display: grid;
  gap: 6px;
}

.print-design-fields label > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.print-design-fields input,
.print-design-fields textarea {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.88rem;
}

.company-logo-field input[type="hidden"] {
  display: none;
}

.company-logo-upload {
  display: flex;
  align-items: center;
}

.company-logo-picker {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px dashed rgba(15, 23, 42, 0.22);
  border-radius: 16px;
  color: var(--blue-dark);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.company-logo-picker img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-logo-picker.has-avatar img {
  display: block;
}

.company-logo-picker.has-avatar span {
  display: none;
}

.company-logo-picker span {
  font-size: 1.4rem;
  font-weight: 800;
}

#companyLogoInput {
  display: none;
}

.print-design-toolbox {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.print-design-toolbox-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.print-design-toolbox-head strong {
  font-size: 0.86rem;
}

.print-design-toolbox-head small {
  color: var(--muted);
  font-weight: 700;
}

.print-design-size-grid,
.print-design-header-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.print-design-size-grid label:last-child,
.print-design-header-grid label:nth-child(2) {
  grid-column: 1 / -1;
}

.print-design-check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
}

.print-design-check input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--blue);
}

.print-design-preview-panel {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  background: rgba(255, 255, 255, 0.72);
}

.print-design-preview {
  width: 100%;
  min-height: 0;
  justify-self: stretch;
  margin-top: 0;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.print-design-preview-frame {
  height: 100%;
  min-height: 540px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 16px;
  background: #f8fafc;
}

.print-template-card > span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.06);
  font-size: 0.76rem;
  font-weight: 900;
}

.invoice-template-preview {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #fff;
}

.invoice-template-preview-a4 {
  aspect-ratio: 0.72;
  grid-template-rows: 34px 48px 1fr 44px;
}

.invoice-template-preview-a5 {
  aspect-ratio: 1 / 0.72;
  grid-template-rows: 30px 1fr 36px;
}

.invoice-template-preview div,
.print-settings-mini-preview div {
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.12);
}

.invoice-template-preview .print-preview-brand,
.print-settings-mini-preview .print-preview-brand {
  background: rgba(10, 132, 255, 0.24);
}

.invoice-template-preview .print-preview-meta,
.print-settings-mini-preview .print-preview-meta {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.12) 0 46%, transparent 46% 54%, rgba(15, 23, 42, 0.12) 54% 100%);
}

.invoice-template-preview .print-preview-table,
.print-settings-mini-preview .print-preview-table {
  background:
    repeating-linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0 10px, rgba(255, 255, 255, 0.9) 10px 18px);
}

.invoice-template-preview .print-preview-total,
.print-settings-mini-preview .print-preview-total {
  background: rgba(0, 168, 128, 0.16);
}

.workspace-hero h2,
.empty-workspace h2,
.workspace-card h2 {
  font-size: 1.12rem;
}

.workspace-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 190px;
}

.workspace-card strong {
  font-size: 2rem;
  line-height: 1;
}

.empty-workspace {
  display: grid;
  place-items: start;
  gap: 12px;
  min-height: 260px;
}

.workspace-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.12);
}

.workspace-icon svg {
  width: 22px;
  height: 22px;
}

.toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 10000;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 44px));
  padding: 13px 15px;
  border-radius: 18px;
  color: white;
  background: rgba(17, 24, 39, 0.9);
  transform: translate(-50%, -12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.draft-restore-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
}

.draft-restore-dialog {
  display: grid;
  gap: 16px;
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background: rgba(248, 250, 252, 0.98);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.24);
}

.draft-restore-copy {
  display: grid;
  gap: 6px;
}

.draft-restore-copy strong {
  font-size: 1rem;
}

.draft-restore-copy span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.draft-restore-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal {
  width: min(680px, calc(100vw - 28px));
  border: 0;
  padding: 0;
  border-radius: 28px;
  background: transparent;
}

#channelModal {
  width: min(820px, calc(100vw - 28px));
}

.large-modal {
  width: min(860px, calc(100vw - 28px));
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(8px);
}

.modal-card {
  display: grid;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.72));
  border-radius: var(--card-radius, 28px);
  background: var(--surface-background, rgba(239, 244, 249, 0.96));
}

.order-delivery-modal {
  width: min(600px, calc(100vw - 28px));
}

.order-delivery-modal-card {
  max-height: calc(100vh - 36px);
  overflow: hidden;
}

.order-delivery-modal-card .modal-heading p {
  margin: 4px 0 0;
  color: var(--muted);
}

.order-delivery-confirm-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: min(430px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.order-delivery-list-heading { display: none; }

.order-delivery-confirm-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.order-delivery-confirm-item .mobile-order-product-image,
.order-delivery-confirm-item .mobile-order-product-image img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.order-delivery-confirm-item .mobile-order-product-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.1);
  font-size: 0.65rem;
  font-weight: 900;
}

.order-delivery-confirm-item .mobile-order-product-image img {
  object-fit: cover;
}

.order-delivery-confirm-item > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.order-delivery-confirm-item > div strong {
  overflow-wrap: anywhere;
}

.order-delivery-confirm-item > div span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-delivery-confirm-item > strong:last-child {
  color: var(--blue-dark);
  font-size: 0.86rem;
  white-space: nowrap;
}

.order-delivery-payment { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.order-delivery-payment-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.order-delivery-payment-heading > span { color: var(--muted); }
.order-delivery-payment-options { display: flex; gap: 16px; flex-wrap: wrap; }
.order-delivery-payment-options label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.order-delivery-payment-options input { width: 16px; min-height: 16px; height: 16px; accent-color: #006495; }
.order-delivery-payment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.order-delivery-payment-fields[hidden] { display: none; }
.order-delivery-payment-fields label { display: grid; gap: 6px; min-width: 0; font-size: 12px; }
.order-delivery-payment-fields input, .order-delivery-payment-fields select { min-width: 0; border-radius: 8px; }
#orderDeliveryModal .order-delivery-modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; }

.order-delivery-quantity-field {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 110px;
}

.order-delivery-quantity-field span,
.order-delivery-quantity-field small {
  color: var(--muted);
  font-size: 0.7rem;
}

.order-delivery-quantity-field input {
  width: 88px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

@media (max-width: 760px) {
  .order-delivery-confirm-item {
    grid-template-columns: 40px minmax(0, 1fr) 96px;
    gap: 8px;
    padding: 10px;
  }

  .order-delivery-quantity-field {
    min-width: 96px;
  }

  .order-delivery-quantity-field input {
    width: 78px;
  }

  #orderDeliveryModal.is-initial-delivery { width: calc(100% - 24px); max-width: 480px; border-radius: 28px; padding: 0; }
  #orderDeliveryModal.is-initial-delivery::backdrop { background: #0f172a55; backdrop-filter: blur(4px); }
  #orderDeliveryModal.is-initial-delivery .order-delivery-modal-card { padding: 20px; gap: 12px; background: #f2f5f9; border-radius: 28px; }
  #orderDeliveryModal.is-initial-delivery .modal-heading { margin: 0; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
  #orderDeliveryModal.is-initial-delivery .modal-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  #orderDeliveryModal.is-initial-delivery .modal-heading h2 { font-size: 18px; line-height: 24px; }
  #orderDeliveryModal.is-initial-delivery .modal-heading p { display: contents; font-size: 0; }
  #orderDeliveryModal.is-initial-delivery #orderDeliveryCode { padding: 3px 8px; border-radius: 20px; background: #dbeafe; color: #006495; font-size: 12px; overflow-wrap: anywhere; }
  #orderDeliveryModal.is-initial-delivery #orderDeliverySummary { flex-basis: 100%; font-size: 12px; color: #64748b; }
  #orderDeliveryModal.is-initial-delivery .modal-heading > button { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; background: white; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-list-heading button { padding: 0; min-height: 28px; border: 0; background: transparent; color: #006495; font-size: 12px; font-weight: 600; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-confirm-list { max-height: 224px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-confirm-item { grid-template-columns: 36px minmax(0, 1fr) 65px; gap: 8px; border-radius: 12px; padding: 10px; background: white; }
  #orderDeliveryModal.is-initial-delivery .mobile-order-product-image,
  #orderDeliveryModal.is-initial-delivery .mobile-order-product-image img { width: 36px; height: 36px; border-radius: 8px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-confirm-item > div strong { font-size: 12px; line-height: 16px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-confirm-item > div span { font-size: 11px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-quantity-field { display: contents; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-quantity-field > span { display: none; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-quantity-field input { grid-column: 3; grid-row: 1 / 3; width: 58px; min-height: 32px; height: 32px; padding: 4px; background: #f8fafc; font-size: 14px; font-weight: 700; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-quantity-field small { grid-column: 2; font-size: 10px; line-height: 14px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-payment { background: white; padding: 12px; gap: 10px; border-radius: 12px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-payment-heading { font-size: 12px; gap: 4px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-payment-options { gap: 12px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-payment-options label { font-size: 12px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-payment-fields label { font-size: 11px; }
  #orderDeliveryModal.is-initial-delivery .order-delivery-payment-fields input,
  #orderDeliveryModal.is-initial-delivery .order-delivery-payment-fields select { height: 36px; min-height: 36px; padding: 6px 8px; font-size: 12px; background: white; }
  #orderDeliveryModal.is-initial-delivery .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 0; }
  #orderDeliveryModal.is-initial-delivery .modal-actions button { min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: 12px; }
  #orderDeliveryModal.is-initial-delivery .modal-actions .primary-button { background: #006495; }
  #orderDeliveryModal:not(.is-initial-delivery) { width: calc(100% - 32px); max-width: 430px; padding: 0; border-radius: 24px; }
  #orderDeliveryModal:not(.is-initial-delivery)::backdrop { background: #0f172a66; backdrop-filter: blur(4px); }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-modal-card { padding: 20px; gap: 12px; background: white; border-radius: 24px; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-heading { margin: 0; padding: 0 0 4px; align-items: flex-start; gap: 8px; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-heading h2 { font-size: 20px; line-height: 26px; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-heading p { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-heading > button { flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: #f1f5f9; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 8px; border-bottom: 1px solid #f1f5f9; font-size: 12px; color: #64748b; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-list-heading button { min-height: 28px; padding: 4px 10px; border: 0; border-radius: 20px; background: #eff6ff; color: #006495; font-size: 12px; font-weight: 600; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-confirm-list { max-height: 300px; gap: 10px; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-confirm-item { grid-template-columns: 40px minmax(0, 1fr) 64px; grid-template-rows: auto auto auto; gap: 2px 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 16px; background: white; }
  #orderDeliveryModal:not(.is-initial-delivery) .mobile-order-product-image { grid-row: 1 / 4; align-self: center; }
  #orderDeliveryModal:not(.is-initial-delivery) .mobile-order-product-image,
  #orderDeliveryModal:not(.is-initial-delivery) .mobile-order-product-image img { width: 40px; height: 40px; border-radius: 12px; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-confirm-item > div { grid-column: 2; grid-row: 1 / 3; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-confirm-item > div strong { font-size: 13px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-confirm-item > div span { font-size: 11px; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-quantity-field { display: contents; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-quantity-field > span { grid-column: 3; grid-row: 1; text-align: right; font-size: 10px; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-quantity-field input { grid-column: 3; grid-row: 2 / 4; width: 64px; height: 32px; min-height: 32px; padding: 4px; font-size: 14px; font-weight: 700; border-radius: 8px; }
  #orderDeliveryModal:not(.is-initial-delivery) .order-delivery-quantity-field small { grid-column: 2; grid-row: 3; font-size: 10px; line-height: 14px; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; padding: 0; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-actions button { min-height: 40px; padding: 9px 16px; border: 0; border-radius: 24px; font-size: 13px; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-actions .ghost-button { background: #f1f5f9; }
  #orderDeliveryModal:not(.is-initial-delivery) .modal-actions .primary-button { background: #006495; }
}

#productForm {
  min-height: min(760px, calc(100vh - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.purchase-payment-modal-card {
  width: min(540px, calc(100vw - 28px));
}

.purchase-payment-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-modal {
  width: min(780px, calc(100vw - 28px));
}

.supplier-modal-card {
  gap: 16px;
}

.supplier-modal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}

.supplier-form-grid {
  align-content: start;
}

.channel-modal-card {
  gap: 14px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.channel-builder-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(234, 244, 255, 0.78)),
    rgba(255, 255, 255, 0.72);
}

.channel-builder-heading,
.channel-management-heading,
.channel-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.channel-builder-heading > div,
.channel-management-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.channel-builder-heading strong,
.channel-management-heading strong {
  font-size: 0.94rem;
}

.channel-builder-heading span:not(.channel-level-badge),
.channel-management-heading small,
.channel-management-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.channel-level-badge,
.channel-management-heading > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  white-space: nowrap;
  border-radius: 999px;
}

.channel-level-badge {
  min-width: 72px;
  padding: 0 12px;
  color: #075985;
  border: 1px solid rgba(10, 132, 255, 0.2);
  background: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.channel-form-grid {
  grid-template-columns: 1.1fr 0.95fr 0.95fr;
  align-items: stretch;
  gap: 10px;
}

.channel-form-grid label {
  display: grid;
  grid-template-rows: auto 40px;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  color: var(--muted);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
}

.channel-form-grid label > span {
  display: flex;
  align-items: center;
  min-height: 18px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
}

.channel-form-grid input,
.channel-form-grid select {
  height: 40px;
  min-height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
}

.channel-management-panel {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
}

.channel-management-heading {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.86);
}

.channel-management-heading > span {
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.channel-management-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px 12px;
  scrollbar-width: none;
}

.channel-management-list::-webkit-scrollbar {
  display: none;
}

.channel-tree-group {
  display: grid;
  gap: 6px;
}

.channel-node {
  min-height: 44px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-left-width: 4px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
}

.channel-node-level-1 {
  border-left-color: rgba(10, 132, 255, 0.7);
}

.channel-node-child {
  margin-left: 28px;
}

.channel-node-level-2 {
  border-left-color: rgba(0, 168, 128, 0.58);
  background: rgba(247, 252, 250, 0.9);
}

.channel-node-level-3 {
  margin-left: 64px;
  border-left-color: rgba(255, 59, 95, 0.44);
  background: rgba(255, 249, 250, 0.9);
}

.channel-node span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.channel-node strong {
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-node small {
  color: var(--muted);
  font-size: 0.72rem;
}

.channel-node-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.channel-node-actions .management-icon-button,
.channel-node-actions .management-icon-button.danger {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.channel-node-actions .management-icon-button:hover {
  background: rgba(10, 132, 255, 0.1);
}

.channel-node-actions .management-icon-button.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.modal-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.84rem;
}

.field-hint {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.customer-avatar-section,
.product-avatar-section {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.customer-avatar-picker,
.product-avatar-picker {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  color: var(--blue-dark);
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.customer-avatar-picker img,
.product-avatar-picker img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-avatar-picker.has-avatar img,
.product-avatar-picker.has-avatar img {
  display: block;
}

.customer-avatar-picker.has-avatar span,
.product-avatar-picker.has-avatar span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: white;
  background: var(--blue-dark);
  font-size: 1rem;
}

.customer-avatar-picker span,
.product-avatar-picker span {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.product-avatar-wrap {
  position: relative;
}

.product-avatar-clear-button {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 999px;
  color: #ef4444;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}

.product-avatar-clear-button .icon,
.product-avatar-clear-button .icon svg {
  width: 16px;
  height: 16px;
}

.product-avatar-clear-button:disabled {
  display: none;
}

#customerAvatarInput,
#productAvatarInput {
  display: none;
}

.customer-detail-modal-card {
  max-width: 680px;
}

.customer-detail-mobile-back { display: none; }

.customer-detail-heading-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.customer-detail-heading-actions .ghost-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.customer-detail-heading-actions .danger-action {
  color: var(--rose);
}

.customer-location-control {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #dce6f1;
  border-radius: 14px;
  background: #f7fbff;
}

.customer-location-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #006495;
  background: #eaf3ff;
}

.customer-location-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.customer-location-copy strong {
  color: #111827;
  font-size: 0.86rem;
}

.customer-location-copy small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-location-control .secondary-button {
  min-height: 40px;
  white-space: nowrap;
}

#supplierDetailModal {
  width: min(980px, calc(100vw - 28px));
}

#supplierDetailModal {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#supplierDetailModal::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#supplierDetailModal .supplier-detail-modal-card {
  max-width: none;
  max-height: calc(100vh - 36px);
  overflow: auto;
  gap: 12px;
  padding: 14px 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#supplierDetailModal .supplier-detail-modal-card::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


#supplierDetailBody {
  display: grid;
  gap: 14px;
}

#supplierDetailBody {
  gap: 10px;
}

#supplierDetailModal .customer-detail-profile {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
}

#supplierDetailModal .customer-detail-avatar {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  font-size: 1.45rem;
}

#supplierDetailModal .customer-detail-heading > div {
  gap: 3px;
}

#supplierDetailModal .customer-detail-profile strong {
  font-size: 1.05rem;
}

.customer-detail-profile {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.customer-detail-summary {
  display: grid;
  gap: 10px;
}

.customer-detail-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-detail-contact-actions a,
.customer-detail-contact-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 12px;
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
}

.customer-detail-contact-actions button {
  cursor: pointer;
}

.customer-detail-contact-actions .icon,
.customer-detail-contact-actions svg {
  width: 17px;
  height: 17px;
}

.customer-detail-location-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.customer-detail-location-summary .icon,
.customer-detail-location-summary svg {
  width: 14px;
  height: 14px;
}

.customer-detail-avatar {
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  font-size: 1.8rem;
}

.customer-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.customer-detail-heading > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.customer-detail-profile strong {
  overflow-wrap: anywhere;
  font-size: 1.2rem;
}

.customer-detail-profile-label {
  color: var(--blue-dark) !important;
  font-size: 0.72rem !important;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.customer-detail-profile-metrics {
  display: none;
}

.customer-history-direction-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  border-radius: 50%;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.customer-history-direction-icon.is-sale {
  color: #15803d;
  background: #dcfce7;
}

.customer-history-direction-icon.is-return {
  color: #c2410c;
  background: #ffedd5;
}

.customer-history-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.customer-revenue-debt-indicator {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 50%;
  color: #dc2626;
  background: #fee2e2;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.customer-detail-profile span {
  color: var(--muted);
}

.customer-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.customer-detail-stats div,
.customer-detail-list {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.customer-detail-stats div {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.customer-detail-stats span,
.customer-detail-line span {
  color: var(--muted);
  font-size: 0.82rem;
}

.customer-detail-list {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.customer-detail-section {
  display: grid;
  gap: 8px;
}

.customer-detail-section h3 {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.customer-detail-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}

.customer-detail-disclosure > summary::-webkit-details-marker {
  display: none;
}

.customer-detail-disclosure-toggle {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #475569;
  background: #eef4fa;
}

.customer-detail-disclosure-toggle .icon,
.customer-detail-disclosure-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.customer-detail-disclosure[open] .customer-detail-disclosure-toggle .icon,
.customer-detail-disclosure[open] .customer-detail-disclosure-toggle svg {
  transform: rotate(90deg);
}

.customer-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.customer-detail-line:last-child {
  border-bottom: 0;
}

.customer-detail-line strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.supplier-detail-modal-card {
  max-width: none;
}

.supplier-detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.64);
}

.supplier-detail-tabs button {
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.customer-detail-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.customer-detail-tabs button .icon,
.customer-detail-tabs button svg {
  width: 16px;
  height: 16px;
}

.supplier-detail-tabs button.active {
  color: var(--blue-dark);
  background: white;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.supplier-detail-panel {
  display: none;
  gap: 14px;
}

.supplier-detail-panel.active {
  display: grid;
}

.supplier-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.supplier-detail-stats div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.supplier-detail-stats span,
.supplier-payment-panel label > span {
  color: var(--muted);
  font-size: 0.82rem;
}

.supplier-payment-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.62fr) minmax(150px, 0.62fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.customer-payment-panel {
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.62fr) minmax(140px, 0.5fr) auto;
  gap: 8px;
  padding: 10px;
}

.customer-payment-panel label {
  gap: 4px;
}

.customer-payment-panel button {
  width: auto;
  min-width: 132px;
  padding-inline: 16px;
}

.payment-signature-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
}

.payment-signature-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
}

.customer-payment-panel .payment-signature-heading button {
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding-inline: 10px;
}

.payment-signature-pad {
  display: block;
  width: 100%;
  height: 170px;
  border: 1px dashed rgba(15, 23, 42, 0.32);
  border-radius: 8px;
  background: #ffffff;
  cursor: crosshair;
  touch-action: none;
}

.payment-signature-field > small {
  color: var(--muted);
  font-size: 0.74rem;
}

.sales-payment-signature-field {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.sales-payment-signature-field .payment-signature-pad {
  height: 145px;
}

.sales-payment-signature-field .payment-signature-heading button {
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding-inline: 10px;
}

.customer-payment-panel > [data-pay-customer-debt] {
  grid-column: 1 / -1;
  justify-self: end;
}

.customer-payment-after-amount {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
}

.order-payment-signature {
  margin: 10px 0 0;
}

.order-payment-signature img {
  display: block;
  width: min(100%, 300px);
  max-height: 120px;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.order-payment-signature figcaption {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.74rem;
}

.supplier-payment-panel label {
  display: grid;
  gap: 7px;
}

.supplier-payment-panel button {
  min-height: 44px;
}

.supplier-detail-section {
  display: grid;
  gap: 8px;
}

.supplier-detail-section h3 {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.supplier-detail-table {
  overflow: visible;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.supplier-detail-table table {
  min-width: 0;
  table-layout: fixed;
}

.supplier-ledger-table {
  max-height: min(360px, calc(100vh - 420px));
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.supplier-ledger-table::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.customer-history-cards,
.customer-debt-ledger-cards {
  display: none;
}

.customer-history-overview {
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(110px, 0.7fr));
  gap: 8px;
}

.customer-history-overview > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.customer-history-overview span,
.customer-history-overview small {
  color: var(--muted);
  font-size: 0.76rem;
}

.customer-history-overview strong {
  font-size: 1.05rem;
}

.customer-history-overview-main {
  background: linear-gradient(135deg, #eef7ff, #ffffff) !important;
}

.customer-history-overview-main strong {
  color: var(--blue-dark);
  font-size: 1.35rem;
}

.customer-history-section {
  display: grid;
  gap: 9px;
}

.customer-history-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.customer-history-section-heading > div {
  display: grid;
  gap: 3px;
}

.customer-history-section-heading h3 {
  margin: 0;
  font-size: 0.92rem;
}

.customer-history-section-heading span {
  color: var(--muted);
  font-size: 0.76rem;
}

.customer-history-count {
  white-space: nowrap;
}

.customer-history-signature {
  display: inline-grid;
  gap: 3px;
  width: 92px;
  margin: 0;
  vertical-align: middle;
}

.customer-history-signature img {
  display: block;
  width: 92px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
  border: 1px solid #dce6f1;
  border-radius: 6px;
  background: #ffffff;
}

.customer-history-signature figcaption {
  overflow: hidden;
  color: #0f766e;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-history-signature-empty {
  color: #94a3b8;
  font-size: 0.72rem;
}

.customer-history-signature-row {
  display: none;
}

.customer-debt-signature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid #edf2f7;
}

.customer-debt-signature-row > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.customer-debt-ledger-type {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.customer-payment-receipt-download {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.08);
}

.customer-payment-receipt-download:hover {
  background: rgba(10, 132, 255, 0.16);
}

.supplier-detail-table.compact table {
  min-width: 0;
}

.supplier-detail-table th,
.supplier-detail-table td {
  padding: 11px 12px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.supplier-ledger-table th,
.supplier-ledger-table td {
  padding: 8px 10px;
}

.link-button {
  border: 0;
  padding: 0;
  color: var(--blue-dark);
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.supplier-ledger-code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.positive-value {
  color: #006c54;
}

.negative-value {
  color: #b4233d;
}

.document-detail-overlay {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  border: 0;
  margin: auto;
  padding: 0;
  border-radius: 22px;
  background: transparent;
  overflow: visible;
}

.document-detail-overlay::backdrop {
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(10px);
}

.document-detail-dialog {
  display: grid;
  gap: 14px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  background: rgba(239, 244, 249, 0.98);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.24);
}

.document-detail-body {
  display: grid;
  gap: 12px;
}

.document-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.document-detail-summary div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.document-detail-summary span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.document-detail-summary strong {
  overflow-wrap: anywhere;
}

.document-receipt-overview {
  display: grid;
  grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1fr);
  gap: 12px;
}

.document-receipt-total,
.document-receipt-meta div,
.document-payment-strip div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.document-receipt-total strong {
  color: var(--blue-dark);
  font-size: 1.34rem;
}

.document-receipt-total span,
.document-receipt-total small,
.document-receipt-meta span,
.document-payment-strip span,
.document-product-section h3 {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.document-receipt-meta,
.document-payment-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.document-receipt-meta div:first-child {
  grid-column: 1 / -1;
}

.document-payment-strip strong {
  overflow-wrap: anywhere;
}

.document-detail-actions {
  padding-top: 0;
}

.supplier-payment-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.supplier-payment-detail-actions .ghost-button {
  width: auto;
  padding: 0 14px;
}

.document-product-section {
  display: grid;
  gap: 8px;
}

.document-product-section h3 {
  margin: 0;
  text-transform: uppercase;
}

.document-product-list {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.document-product-head,
.document-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 112px 122px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.purchase-receipt-document-products .document-product-head,
.purchase-receipt-document-products .document-product-row {
  grid-template-columns: 44px minmax(0, 1fr) 64px 112px 122px;
}

.document-product-head {
  color: var(--muted);
  background: rgba(229, 236, 245, 0.74);
  font-size: 0.78rem;
  font-weight: 900;
}

.document-product-row:last-child {
  border-bottom: 0;
}

.document-product-row > span,
.document-product-row > strong {
  text-align: right;
}

.purchase-receipt-document-products .document-product-head span:first-child,
.purchase-receipt-document-products .document-product-row > span:first-child {
  color: var(--muted);
  text-align: center;
}

.document-product-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-product-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.supplier-document-detail-overlay {
  width: min(840px, calc(100vw - 32px));
}

.supplier-document-detail-overlay .document-detail-dialog {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
  background: #f5f8fc;
}

.supplier-document-detail-overlay .modal-heading {
  min-height: 72px;
  padding: 16px 20px;
  border-bottom: 1px solid #dce6f1;
  background: #ffffff;
}

.supplier-document-detail-overlay .modal-heading h2 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.3;
}

.supplier-document-detail-overlay .modal-heading p {
  margin-top: 3px;
  font-size: 0.78rem;
}

.supplier-document-detail-overlay .modal-heading > .ghost-button {
  display: inline-grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
}

.supplier-document-detail-overlay .document-detail-body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 20px;
  overscroll-behavior: contain;
}

.supplier-document-detail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.supplier-document-detail .document-receipt-overview {
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1fr);
  align-items: stretch;
}

.supplier-document-detail .document-receipt-total,
.supplier-document-detail .document-receipt-meta div,
.supplier-document-detail .document-payment-strip div,
.supplier-document-detail .document-product-list {
  border-color: #dce6f1;
  border-radius: 8px;
  background: #ffffff;
}

.supplier-document-detail .document-receipt-total {
  align-content: center;
  min-height: 132px;
  padding: 16px;
}

.supplier-document-detail .document-receipt-total strong {
  font-size: 1.5rem;
  line-height: 1.2;
}

.supplier-payment-document-detail .supplier-payment-total strong {
  color: #b4233d;
}

.supplier-document-detail .document-receipt-meta {
  align-content: stretch;
}

.supplier-document-detail .document-receipt-meta div,
.supplier-document-detail .document-payment-strip div {
  align-content: center;
  min-width: 0;
  padding: 12px 14px;
}

.supplier-document-detail .document-receipt-meta strong,
.supplier-document-detail .document-payment-strip strong {
  min-width: 0;
  line-height: 1.35;
}

.supplier-document-detail .document-status {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.supplier-document-detail .is-paid {
  color: #08745b;
}

.supplier-document-detail .document-status.is-paid {
  background: #e8f7f1;
}

.supplier-document-detail .is-debt {
  color: #b4233d;
}

.supplier-document-detail .document-status.is-debt {
  background: #fff0f2;
}

.supplier-document-reconcile {
  padding: 12px;
  border: 1px solid #dce6f1;
  border-radius: 8px;
  background: #ffffff;
}

.supplier-document-reconcile .document-receipt-reconcile-field {
  grid-template-columns: minmax(130px, 0.38fr) minmax(0, 1fr);
  margin: 0;
}

.supplier-document-reconcile .purchase-receipt-reconcile,
.supplier-document-reconcile .purchase-receipt-reconcile-note,
.supplier-document-reconcile .purchase-receipt-reconcile-note input {
  min-height: 44px;
}

.supplier-document-detail .document-product-section {
  gap: 9px;
}

.supplier-document-detail .document-product-head,
.supplier-document-detail .document-product-row {
  padding: 11px 12px;
}

.supplier-document-detail .document-product-head span:nth-child(n + 3) {
  text-align: right;
}

.supplier-document-detail .purchase-receipt-detail-actions,
.supplier-document-detail .supplier-payment-detail-actions {
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #dce6f1;
}

.supplier-payment-link-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f0c36b;
  border-radius: 8px;
  color: #8a5a00;
  background: #fffaf0;
  font-size: 0.8rem;
  font-weight: 700;
}

.supplier-payment-allocation-section .supplier-detail-table {
  overflow-x: auto;
  border-color: #dce6f1;
  border-radius: 8px;
  background: #ffffff;
}

.supplier-payment-allocation-section .supplier-detail-table th:last-child,
.supplier-payment-allocation-section .supplier-detail-table td:last-child {
  text-align: right;
}

.supplier-payment-allocation-section .supplier-detail-table table {
  width: 100%;
  table-layout: fixed;
}

.supplier-payment-allocation-section .supplier-detail-table th:nth-child(1),
.supplier-payment-allocation-section .supplier-detail-table td:nth-child(1) {
  width: 31%;
}

.supplier-payment-allocation-section .supplier-detail-table th:nth-child(2),
.supplier-payment-allocation-section .supplier-detail-table td:nth-child(2) {
  width: 28%;
  white-space: nowrap;
}

.supplier-payment-allocation-section .supplier-detail-table th:nth-child(3),
.supplier-payment-allocation-section .supplier-detail-table td:nth-child(3) {
  width: 41%;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .supplier-document-detail-overlay {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .supplier-document-detail-overlay .document-detail-dialog {
    max-height: calc(100dvh - 16px);
    border-radius: 14px;
  }

  .supplier-document-detail-overlay .modal-heading {
    min-height: 62px;
    padding: 12px 14px;
  }

  .supplier-document-detail-overlay .modal-heading h2 {
    font-size: 1rem;
  }

  .supplier-document-detail-overlay .modal-heading p {
    font-size: 0.7rem;
  }

  .supplier-document-detail-overlay .document-detail-body {
    padding: 12px;
  }

  .supplier-document-detail {
    gap: 10px;
  }

  .supplier-document-detail .document-receipt-overview {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .supplier-document-detail .document-receipt-total {
    min-height: 104px;
  }

  .supplier-document-detail .document-receipt-meta,
  .supplier-document-detail .document-payment-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .supplier-document-detail .document-receipt-meta div:first-child {
    grid-column: 1 / -1;
  }

  .supplier-document-reconcile .document-receipt-reconcile-field {
    grid-template-columns: 1fr;
  }

  .supplier-document-detail .purchase-receipt-detail-actions,
  .supplier-document-detail .supplier-payment-detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .supplier-document-detail .purchase-receipt-detail-actions button,
  .supplier-document-detail .supplier-payment-detail-actions button {
    width: 100%;
    justify-content: center;
  }

  .supplier-payment-allocation-section .supplier-detail-table th,
  .supplier-payment-allocation-section .supplier-detail-table td {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 0.72rem;
  }
}

.product-form-dropdown {
  position: relative;
}

.form-suggestions {
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.single-column {
  grid-template-columns: 1fr;
}

.wide-field {
  grid-column: 1 / -1;
}

.vat-info-button {
  width: fit-content;
}

.management-list {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.management-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
}

.category-management-list,
.brand-management-list {
  gap: 10px;
  max-height: 240px;
}

.category-management-list {
  max-height: min(56vh, 520px);
}

#categoryModal .modal-card {
  max-height: min(86vh, 760px);
}

#categoryModal .category-management-list {
  gap: 8px;
}

#categoryModal .category-node {
  min-height: 40px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.category-node.readonly {
  color: var(--muted);
  background: rgba(241, 245, 249, 0.72);
}

.category-management-item,
.brand-management-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 10px 8px 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.92);
}

.category-management-item.readonly,
.brand-management-item.readonly {
  color: var(--muted);
  background: rgba(241, 245, 249, 0.72);
}

.category-management-text,
.brand-management-text {
  min-width: 0;
  overflow: hidden;
}

.category-management-text strong,
.category-management-text small,
.brand-management-text strong,
.brand-management-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-item > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.management-item small {
  color: var(--muted);
}

.management-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.management-icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--blue-dark);
  background: rgba(10, 132, 255, 0.08);
}

.management-icon-button:hover {
  background: rgba(10, 132, 255, 0.14);
}

.management-icon-button.danger {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.management-icon-button.danger:hover {
  background: rgba(239, 68, 68, 0.14);
}

.category-management-item .category-management-actions,
.brand-management-item .brand-management-actions {
  display: grid;
  grid-template-columns: repeat(2, 32px);
  gap: 4px;
  width: 68px;
  min-width: 68px;
}

.category-management-actions .management-icon-button,
.category-management-actions .management-icon-button.danger,
.brand-management-actions .management-icon-button,
.brand-management-actions .management-icon-button.danger {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.category-management-actions .management-icon-button:hover,
.brand-management-actions .management-icon-button:hover {
  background: rgba(10, 132, 255, 0.1);
}

.category-management-actions .management-icon-button.danger:hover,
.brand-management-actions .management-icon-button.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.modal-actions.split-actions {
  justify-content: space-between;
}

.modal-actions.split-actions > span {
  display: inline-flex;
  gap: 10px;
}

.modal-actions .ghost-button {
  width: auto;
  padding: 0 16px;
}

.order-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
}

#orderLines {
  display: grid;
  gap: 10px;
}

.order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 44px;
  gap: 10px;
  align-items: center;
}

.order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1400px) {
  }

@media (max-width: 1120px) {

  .app-shell {
    grid-template-columns: 236px minmax(0, 1fr);
  }

  .sidebar {
    padding: 0;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "channels" "recent" "stock" "history";
  }

  .dashboard-column {
    display: grid;
  }

  .dashboard-channels {
    order: 1;
  }

  .dashboard-recent {
    order: 2;
  }

  .dashboard-low-stock {
    order: 3;
  }

  .dashboard-change-log {
    order: 4;
  }

  .dashboard-top-products {
    order: 5;
  }

  .sales-workspace,
  .purchase-workspace {
    grid-template-columns: 1fr;
  }

  #purchaseEntryView .purchase-workspace,
  #costPriceEntryView .cost-promo-workspace,
  #purchaseInvoiceEntryView .purchase-workspace,
  #vatInvoiceEntryView .purchase-workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .payment-card {
    position: static;
    grid-column: auto;
  }

  .price-promo-detail-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {

  .app-shell {
    display: block;
    padding: 10px;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: none;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 24px;
  }

  .brand div:last-child {
    display: block;
  }

  .nav-tabs {
    display: grid;
    width: 100%;
    max-height: min(30vh, 240px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .main {
    padding-bottom: 0;
  }

  .topbar {
    position: static;
    display: flex;
  }

  .topbar.is-hidden {
    display: none;
  }

  .standard-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-left,
  .top-actions,
  .panel-heading {
    align-items: stretch;
  }

  .topbar-left,
  .top-actions {
    flex-direction: column;
  }

  .search-box {
    width: 100%;
    min-width: 100%;
  }

  .sales-search-wrap {
    width: 100%;
    min-width: 100%;
    flex-basis: auto;
  }

  .product-suggestions {
    width: 100%;
  }

  .purchase-product-suggestions {
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
  }

  .standard-topbar .search-box {
    width: 100%;
  }

  .vat-topbar-actions,
  .product-topbar-actions,
  .price-topbar-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .price-topbar-filters,
  .price-topbar-month-field,
  .price-promo-category-field {
    display: grid;
    width: 100%;
  }

  .price-topbar-month-field .price-month-wrap,
  .price-promo-category-field select,
  .price-topbar-search {
    width: 100%;
  }

  .vat-topbar-actions .primary-button,
  .vat-topbar-actions .secondary-button,
  .product-topbar-actions .secondary-button,
  .price-topbar-actions .primary-button,
  .price-topbar-actions .secondary-button,
  .topbar-filter-button {
    width: 100%;
    justify-content: center;
  }

  .sales-topbar-actions,
  .topbar-filter-wrap,
  .orders-topbar-filters,
  .purchase-receipt-topbar-filters {
    display: grid;
    width: 100%;
  }

  .order-date-filter-field,
  .purchase-receipt-date-filter-field {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    width: 100%;
  }

  .order-date-filter-field input,
  .purchase-receipt-date-filter-field input {
    width: 100%;
  }

  .order-filter-date-wrap,
  .purchase-receipt-filter-date-wrap {
    width: 100%;
  }

  .order-filter-date-dropdown,
  .purchase-receipt-filter-date-dropdown {
    width: 100% !important;
    max-width: none;
  }

  .orders-date-apply {
    width: 100%;
    justify-content: center;
  }

  .topbar-print-wrap {
    display: grid;
    width: 100%;
  }

  .topbar-print-button {
    width: 100%;
  }

  .topbar-filter-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
  }

  .topbar-print-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
  }

  .invoice-tabs {
    width: 100%;
  }

  .kpi-grid,
  .settings-grid,
  .product-import-grid,
  .invoice-meta-grid,
  .print-template-grid,
  .print-design-layout,
  .purchase-invoice-meta-row,
  .purchase-invoice-line-controls,
  .purchase-import-line-controls,
  .form-grid,
  .workspace-grid,
  .tax-form {
    grid-template-columns: 1fr;
  }

  #salesView .invoice-meta-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #salesView .channel-search-wrap {
    justify-self: stretch;
    max-width: none;
  }

  #salesView .channel-suggestions {
    left: 0;
    right: auto;
    width: 100%;
  }

  .workspace-hero {
    display: grid;
  }

  .tax-form-actions .primary-button {
    width: 100%;
    justify-content: center;
  }

  .price-entry-grid,
  .price-entry-grid.two-columns,
  .price-entry-grid.promo-grid,
  .price-promo-detail-columns,
  .price-compare-grid,
  .price-compare-metrics,
  .purchase-receipt-meta-row,
  .cashbook-layout,
  .cashbook-history-head,
  .supplier-invoice-info-grid,
  .document-receipt-overview,
  .document-receipt-meta,
  .document-payment-strip {
    grid-template-columns: 1fr;
  }

  .cashbook-layout {
    min-height: 0;
  }

  .cashbook-list {
    max-height: none;
  }

  .document-product-head,
  .document-product-row {
    grid-template-columns: minmax(0, 1fr) 48px 82px;
  }

  .purchase-receipt-document-products .document-product-head,
  .purchase-receipt-document-products .document-product-row {
    grid-template-columns: 36px minmax(0, 1fr) 48px 82px;
  }

  .document-product-head span:nth-child(3),
  .document-product-row > span:nth-child(3) {
    display: none;
  }

  .purchase-receipt-document-products .document-product-head span:nth-child(3),
  .purchase-receipt-document-products .document-product-row > span:nth-child(3) {
    display: block;
  }

  .purchase-receipt-document-products .document-product-head span:nth-child(4),
  .purchase-receipt-document-products .document-product-row > span:nth-child(4) {
    display: none;
  }

  .cost-promo-product-picker {
    grid-template-columns: 1fr;
    max-height: 46vh;
  }

  .price-entry-section-head,
  .cost-promo-selected-head .cost-promo-title-button,
  .cost-promo-product-option {
    align-items: stretch;
    flex-direction: column;
  }

  .cost-promo-selected-head .cost-promo-title-button {
    grid-column: 1;
  }

  .price-entry-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sale-product-main,
  .sale-product-meta,
  .payment-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .purchase-invoice-line-controls {
    grid-template-columns: 1fr;
  }

  .purchase-import-line-controls,
  .purchase-price-row {
    width: 100%;
  }

  .purchase-price-row {
    flex-wrap: wrap;
  }

  .purchase-price-row .purchase-price-field {
    flex: 1 1 124px;
  }

  .purchase-price-row .purchase-vat-toggle-field {
    flex: 0 0 76px;
  }

  .purchase-qty-stepper {
    align-self: flex-end;
    padding-top: 0;
  }

  .return-actions {
    grid-template-columns: 1fr;
  }

  .unit-price-field,
  .purchase-price-field {
    max-width: none;
    width: 100%;
  }

  .invoice-info-row {
    grid-template-columns: 1fr;
  }

  .draft-restore-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .payment-row.editable input,
  .payment-row.editable select {
    width: 100%;
  }

  .metric-card {
    min-height: 120px;
  }

  .customer-detail-profile {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    text-align: center;
  }

  .supplier-modal-layout,
  .supplier-form-grid {
    grid-template-columns: 1fr;
  }

  .channel-builder-heading,
  .channel-management-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .channel-level-badge,
  .channel-management-heading > span {
    align-self: flex-start;
  }

  .channel-node-child {
    margin-left: 14px;
  }

  .channel-node-level-3 {
    margin-left: 30px;
  }

  .customer-detail-heading {
    align-items: center;
    flex-direction: column;
  }

  .customer-detail-stats {
    grid-template-columns: 1fr;
  }


























































  /* Payment cards have one metric after quantity is intentionally hidden;
     keep that value in the trailing column for a balanced card layout. */





                                                          
  .supplier-detail-tabs,
  .supplier-detail-stats,
  .supplier-payment-panel,
  .cashbook-summary,
  .cashbook-entry,
  .document-detail-summary {
    grid-template-columns: 1fr;
  }

  .supplier-detail-tabs button {
    justify-content: center;
  }

  .supplier-payment-panel button {
    width: 100%;
  }




















  .order-list-header {
    display: none;
  }

  .order-card {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: flex-start;
  }

  .order-card-code,
  .order-card-return,
  .order-card-customer,
  .order-card-type,
    .order-card-channel,
    .order-card-status,
    .order-card-reconcile,
    .order-card-payment,
  .order-card-discount,
  .order-card-paid,
  .order-card-total,
  .order-card-date {
    grid-column: 2 / -1;
    justify-content: flex-start;
    text-align: left;
  }

  .price-record-card {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .price-record-model,
  .price-record-product,
  .price-record-money,
  .price-record-buy-gift {
    grid-column: 1;
    text-align: left;
  }

  .price-record-supplier-count {
    grid-column: 2;
    grid-row: 1;
  }

  .price-record-supplier-count {
    text-align: right;
  }

  .cost-price-supplier-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .price-compare-record-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-inline-summary,
  .order-inline-products-head,
  .order-inline-product {
    grid-template-columns: 1fr;
  }

  .purchase-receipt-summary,
  .purchase-receipt-reconcile-field,
  .document-receipt-reconcile-field {
    grid-template-columns: 1fr;
  }

  .order-inline-products-head {
    display: none;
  }

  .order-inline-product > span,
  .order-inline-product > strong {
    text-align: left;
  }

  .return-receipt-inline-products .return-receipt-product-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
  }

  .return-receipt-product-index {
    display: none;
  }

  .return-receipt-product-main {
    grid-column: 1 / -1;
  }

  .return-receipt-product-quantity {
    grid-column: 1;
    justify-self: start;
  }

  .return-receipt-product-quantity::before {
    content: "SL trả ";
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
  }

  .return-receipt-product-price {
    display: none;
  }

  .return-receipt-product-refund {
    grid-column: 2;
    text-align: right;
  }

  .return-receipt-product-refund::before {
    content: "Hoàn ";
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
  }

  .order-inline-actions {
    justify-content: stretch;
  }

  .order-inline-actions .secondary-button {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .customer-detail-line {
    flex-direction: column;
  }

  .customer-detail-line strong {
    text-align: left;
  }

  .order-line {
    grid-template-columns: minmax(0, 1fr) 94px 44px;
  }
}

/* Native mobile shell mirrors the Android application's home and navigation. */
.mobile-app-header,
.mobile-home-dashboard,
.mobile-app-dock,
.mobile-more-menu,
.mobile-more-scrim,
.mobile-subpage-back,
.mobile-module-summary,
.mobile-module-action,
.mobile-orders-section-switch,
.mobile-order-detail,
.module-row-icon,
.mobile-segmented-nav,
.mobile-native-page-header {
  display: none;
}

.customer-map-shell {
  position: relative;
  width: 100%;
  height: calc(100vh - 36px);
  min-height: 540px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #e2e8f0;
}

.customer-map-canvas {
  width: 100%;
  height: 100%;
  background: #e2e8f0;
}

.customer-map-marker {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: #006495;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28);
  font: 800 11px/1 "Be Vietnam Pro", sans-serif;
  cursor: pointer;
}

.customer-map-marker.is-new-pin { background: #dc2626; font-size: 18px; }
.customer-map-marker::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  z-index: -1;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: inherit;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.customer-map-marker > span { position: relative; z-index: 1; }

.customer-map-marker .map-marker-icon,
.customer-map-marker .map-marker-icon svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}

.customer-map-marker > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.customer-map-current-location {
  width: 19px;
  height: 19px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #006495;
  box-shadow: 0 0 0 2px rgba(11, 87, 208, 0.26), 0 4px 10px rgba(15, 23, 42, 0.24);
}

.customer-map-canvas .maplibregl-ctrl-top-right { top: 64px; right: 8px; }
.customer-map-canvas .maplibregl-ctrl-group { border-radius: 10px; overflow: hidden; }
.customer-map-canvas .maplibregl-ctrl-attrib { font-size: 9px; }

.map-load-error {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  color: #64748b;
  text-align: center;
  background: #f8fafc;
}

.map-back-button,
.map-location-button {
  position: absolute;
  z-index: 700;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #006495;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}

.map-back-button { top: 16px; left: 16px; }
.map-location-button { right: 16px; bottom: 118px; }

.map-back-button {
  z-index: 1100;
}

.map-status {
  position: absolute;
  right: 70px;
  bottom: 122px;
  z-index: 700;
  max-width: min(420px, calc(100% - 100px));
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  font-size: 0.68rem;
  font-weight: 700;
}

.map-customer-panel {
  position: absolute;
  top: 64px;
  left: 50%;
  z-index: 710;
  display: grid;
  gap: 7px;
  width: min(88%, 430px);
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  color: #111827;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
  transform: translateX(-50%);
}

.map-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #64748b;
  background: #f1f5f9;
}

.map-panel-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 34px;
}

.map-panel-avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  color: #006495;
  background: #dbeafe;
  font-size: 1rem;
  font-weight: 850;
}

.map-panel-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.map-panel-avatar .customer-avatar-fallback {
  position: relative;
  z-index: 0;
}

.map-panel-profile > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.map-panel-profile strong,
.map-panel-profile small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-panel-profile strong { font-size: 1rem; }
.map-panel-profile small { color: #64748b; font-size: 0.72rem; }

.map-panel-line {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  font-size: 0.72rem;
}

.map-panel-line span { color: #64748b; }
.map-panel-line strong { overflow-wrap: anywhere; }

.map-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.map-panel-actions a,
.map-panel-pin-actions .ghost-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #374151;
  background: #e2e8f0;
}

.map-panel-pin-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.map-panel-pin-actions .primary-button {
  flex: 1 1 auto;
  min-height: 40px;
  justify-content: center;
  border-radius: 20px;
  background: #dc2626;
}

body.map-mode .main {
  gap: 0;
}

@media (max-width: 760px) {
  :root {
    --bg: #f8fafc;
    --bg-strong: #f8fafc;
    --panel: #ffffff;
    --panel-strong: #ffffff;
    --line: #e2e8f0;
    --blue: #006495;
    --blue-dark: #0847ad;
    --mint: #0f766e;
    --rose: #dc2626;
    --amber: #d97706;
    --muted: #64748b;
  }

  html,
  body {
    min-width: 0;
    background: #f8fafc;
  }

  body {
    overflow-x: hidden;
  }

  body.sales-mode {
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    background: #f8fafc;
  }

  .sidebar {
    display: none;
  }

  .main {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
  }

  .mobile-subpage-back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #111827;
    background: #ffffff;
  }

  .standard-topbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .standard-topbar .topbar-title {
    grid-column: 2;
    min-width: 0;
  }

  .standard-topbar .top-actions {
    grid-column: 1 / -1;
    gap: 8px;
  }

  .sales-topbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .sales-topbar > .topbar-left {
    grid-column: 2;
  }

  .sales-topbar > .sales-topbar-actions {
    grid-column: 1 / -1;
  }

  .standard-topbar .search-box,
  .sales-topbar .search-box {
    min-height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
  }

  body.products-mode #quickOrderActionMenu,
  body.customers-mode #quickOrderActionMenu,
  body.suppliers-mode #quickOrderActionMenu {
    position: fixed;
    right: 20px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 38;
    width: 44px;
  }

  body.products-mode #quickOrderButton,
  body.customers-mode #quickOrderButton,
  body.suppliers-mode #quickOrderButton {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(11, 87, 208, 0.28);
  }

  body.products-mode #quickOrderButton #topbarActionLabel,
  body.customers-mode #quickOrderButton #topbarActionLabel,
  body.suppliers-mode #quickOrderButton #topbarActionLabel,
  body.products-mode #quickOrderButton .price-action-chevron,
  body.customers-mode #quickOrderButton .price-action-chevron,
  body.suppliers-mode #quickOrderButton .price-action-chevron {
    display: none !important;
  }

  body.products-mode #productActionDropdown,
  body.customers-mode #productActionDropdown,
  body.suppliers-mode #productActionDropdown {
    top: auto;
    right: 0;
    bottom: 52px;
  }

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
    
  body.map-mode .main {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
  }

  body.map-mode .mobile-app-dock {
    display: none !important;
  }

  .customer-map-shell {
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .map-status {
    right: 72px;
    bottom: 26px;
    max-width: calc(100% - 92px);
  }

  .map-location-button {
    right: 16px;
    bottom: 22px;
    width: 48px;
    height: 48px;
  }

  .map-customer-panel {
    top: 64px;
    width: 88%;
    padding: 10px;
  }

  .mobile-app-header {
    position: relative;
    z-index: 3;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 18px;
  }

  body.mobile-home-mode .mobile-app-header {
    display: flex;
    padding: calc(8px + env(safe-area-inset-top)) 16px 10px;
    margin-bottom: 8px;
    background: #006495;
    color: #fff;
    gap: 6px;
  }

  body.mobile-home-mode .main { background: #f4f7fb; }
  body.mobile-home-mode .mobile-profile-pill { border-color: #ffffff33; background: #ffffff18; color: #fff; padding: 4px 10px 4px 5px; }
  body.mobile-home-mode .mobile-profile-avatar { width: 28px; height: 28px; flex-basis: 28px; background: #fff; color: #006495; }
  body.mobile-home-mode .mobile-profile-copy strong { color: #fff; font-size: 13px; }
  body.mobile-home-mode .mobile-profile-copy small { color: #d3e9f5; font-size: 11px; }
  body.mobile-home-mode .mobile-header-action { width: 34px; height: 34px; flex-basis: 34px; border-color: #ffffff33; background: #ffffff18; color: #fff; }

  .mobile-profile-pill {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 40px;
    margin-right: auto;
    padding: 3px 13px 3px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #111827;
    background: #ffffff;
  }

  .mobile-profile-avatar,
  .mobile-account-avatar {
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #006495;
    font-weight: 850;
  }

  .mobile-profile-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    font-size: 0.66rem;
  }

  .mobile-profile-copy {
    display: grid;
    min-width: 0;
    margin-left: 8px;
    text-align: left;
  }

  .mobile-profile-copy strong,
  .mobile-profile-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-profile-copy strong {
    max-width: 150px;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .mobile-profile-copy small {
    max-width: 150px;
    color: #64748b;
    font-size: 0.58rem;
    line-height: 1.25;
  }

  .mobile-header-action {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #111827;
    background: #ffffff;
  }

  .mobile-header-action .icon,
  .mobile-header-action .icon svg {
    width: 18px;
    height: 18px;
  }

  .mobile-header-action.is-syncing .icon {
    animation: mobile-sync-spin 0.8s linear infinite;
  }

  @keyframes mobile-sync-spin {
    to { transform: rotate(360deg); }
  }

  .topbar {
    position: relative;
    top: auto;
    z-index: 4;
    width: 100%;
    min-height: 48px;
    margin-bottom: 14px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    backdrop-filter: none;
  }

  .topbar-title h1 {
    font-size: 1rem;
    line-height: 1.25;
  }

  .view.active {
    width: 100%;
    min-width: 0;
  }

  .mobile-home-dashboard {
    width: 100%;
  }

  body.mobile-home-mode .mobile-home-dashboard {
    display: grid;
    gap: 16px;
  }

  body.mobile-home-mode #dashboardView > .kpi-grid,
  body.mobile-home-mode #dashboardView > .dashboard-grid {
    display: none;
  }

  .mobile-revenue-hero {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    color: #ffffff;
    background: #006495;
    box-shadow: 0 3px 10px #00649518;
  }

  .mobile-revenue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .mobile-revenue-head > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 7px;
  }
  .mobile-revenue-head > div::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }

  .mobile-revenue-head span {
    font-size: 13px;
    font-weight: 600;
  }

  .mobile-revenue-head strong {
    overflow-wrap: anywhere;
    font-size: 1.78rem;
    line-height: 1.12;
  }

  .mobile-revenue-head small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.73rem;
    line-height: 1.4;
  }

  .mobile-scan-button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    color: #fff;
    background: #ffffff20;
  }

  .mobile-scan-button .icon,
  .mobile-scan-button .icon svg {
    width: 17px;
    height: 17px;
  }

  .mobile-revenue-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .mobile-revenue-metrics button {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 62px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    color: #111827;
    text-align: left;
    background: #ffffff;
  }

  .mobile-revenue-metrics span {
    color: #64748b;
    font-size: 0.67rem;
    font-weight: 750;
  }

  .mobile-revenue-metrics strong {
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 24px;
  }
  .mobile-revenue-metrics .mobile-home-metric-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 11px; font-weight: 500; }
  .mobile-home-metric-label small { font-size: 10px; color: #94a3b8; font-weight: 400; }
  .mobile-revenue-metrics button:last-child small { color: #059669; }

  .mobile-admin-performance {
    display: grid;
    gap: 16px;
    width: 100%;
    padding: 18px;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    background: #ffffff;
  }

  .mobile-admin-performance-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-admin-performance-heading > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .mobile-admin-performance-heading h2 {
    color: #111827;
    font-size: 17px;
    line-height: 1.25;
  }

  .mobile-admin-performance-heading p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
  }

  .mobile-admin-performance-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #006495;
    background: #eff6ff;
  }

  .mobile-admin-performance-icon .icon,
  .mobile-admin-performance-icon .icon svg {
    width: 18px;
    height: 18px;
  }

  .mobile-admin-performance-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .mobile-admin-performance-metrics > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 70px;
    padding: 12px;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    background: #f8fafc;
  }

  .mobile-admin-performance-metrics span {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
  }

  .mobile-admin-performance-metrics strong {
    overflow-wrap: anywhere;
    color: #006495;
    font-size: 18px;
    line-height: 1.2;
  }

  .mobile-admin-employee-list {
    display: grid;
    gap: 7px;
  }

  .mobile-admin-employee-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    background: #f9fbfd;
  }

  .mobile-admin-employee-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #006495;
    background: #eff6ff;
    font-size: 0.65rem;
    font-weight: 850;
  }

  .mobile-admin-employee-copy,
  .mobile-admin-employee-values {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .mobile-admin-employee-copy strong,
  .mobile-admin-employee-values strong {
    overflow: hidden;
    color: #111827;
    font-size: 0.75rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-admin-employee-copy small,
  .mobile-admin-employee-values small {
    color: #64748b;
    font-size: 0.63rem;
    line-height: 1.2;
  }

  .mobile-admin-employee-values {
    justify-items: end;
    text-align: right;
  }

  .mobile-admin-employee-values strong { color: #006495; }
  .mobile-admin-employee-values small { color: #08745b; font-weight: 750; }

  .mobile-admin-empty {
    margin: 0;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .mobile-recent-sales {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    background: #ffffff;
  }

  .mobile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 2px 2px 5px;
  }

  .mobile-section-heading h2 {
    color: #111827;
    font-size: 17px;
    line-height: 1.25;
  }

  .mobile-section-heading button {
    flex: 0 0 auto;
    padding: 6px 2px;
    border: 0;
    color: #006495;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 800;
  }

  .mobile-recent-list {
    display: grid;
  }

  .mobile-recent-order,
  .mobile-recent-empty {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 2px;
    border: 0;
    border-top: 1px solid #f1f5f9;
    color: #111827;
    text-align: left;
    background: transparent;
  }

  .mobile-recent-order:first-child,
  .mobile-recent-empty:first-child {
    border-top: 0;
  }

  .mobile-recent-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #006495;
    background: #eff6ff;
  }

  .mobile-recent-icon .icon,
  .mobile-recent-icon .icon svg {
    width: 17px;
    height: 17px;
  }

  .mobile-recent-copy,
  .mobile-recent-empty > span:last-child {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .mobile-recent-copy strong,
  .mobile-recent-empty strong {
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-recent-copy small,
  .mobile-recent-empty small {
    color: #64748b;
    font-size: 0.64rem;
  }

  .mobile-recent-total {
    max-width: 100px;
    color: #111827;
    font-size: 0.74rem;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .mobile-recent-empty {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 12px;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
  }
  .mobile-recent-empty:first-child { border-top: 1px dashed #e2e8f0; }
  .mobile-recent-empty strong { white-space: normal; font-size: 13px; line-height: 18px; }
  .mobile-recent-empty small { font-size: 11px; line-height: 16px; }

  .mobile-app-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1200;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 0;
    background: rgba(250, 248, 255, 0.9);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(16px);
    pointer-events: auto;
  }

  body:not([data-mobile-view="purchaseEntry"]) .app-shell:not(.is-hidden) .mobile-app-dock {
    display: block;
  }

  .mobile-dock-surface { display: flex; align-items: center; justify-content: space-around; width: min(100%,480px); height: 68px; margin: 0 auto; padding: 0 8px; background: transparent; }
  .mobile-dock-surface > button { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; height: 48px; min-height: 48px; padding: 0; gap: 2px; border: 0; border-radius: 0; background: transparent; color: #434656; }
  .mobile-dock-surface > button .icon,.mobile-dock-surface > button .icon svg { width: 24px; height: 24px; }
  .mobile-dock-surface > button span:last-child { font: 600 11px/14px Inter,Arial,sans-serif; white-space: nowrap; }
  .mobile-dock-surface > button.active { color: #006495; }
  .mobile-dock-surface > .mobile-dock-sale { height: 68px; min-height: 68px; margin-top: -20px; padding: 0; gap: 2px; color: #006495; }
  .mobile-dock-surface > .mobile-dock-sale .icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: #006495; box-shadow: 0 12px 24px -6px #00649566; }
  .mobile-dock-surface > .mobile-dock-sale .icon svg { width: 26px; height: 26px; }

  .mobile-more-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    background: rgba(15, 23, 42, 0.18);
  }

  .mobile-more-scrim.is-open {
    display: block;
  }

  .mobile-more-menu {
    position: fixed;
    right: 14px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 44;
    width: 232px;
    max-height: calc(100dvh - 116px);
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.2);
  }

  .mobile-more-menu.is-open {
    display: grid;
  }

  .mobile-more-menu > button {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 5px 8px;
    border: 0;
    border-radius: 14px;
    color: #111827;
    text-align: left;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .mobile-more-menu > button:active {
    background: #f1f5f9;
  }

  .mobile-menu-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eff6ff;
  }

  .mobile-menu-icon .icon,
  .mobile-menu-icon .icon svg {
    width: 17px;
    height: 17px;
  }

  .mobile-menu-icon.is-blue { color: #006495; background: #eff6ff; }
  .mobile-menu-icon.is-violet { color: #6750a4; background: #f5f3ff; }
  .mobile-menu-icon.is-cyan { color: #0891b2; background: #ecfeff; }
  .mobile-menu-icon.is-coral { color: #dc2626; background: #fef2f2; }
  .mobile-menu-icon.is-mint { color: #0f766e; background: #f0fdfa; }
  .mobile-menu-icon.is-warm { color: #d97706; background: #fffbeb; }

  .panel,
.metric-card,
.product-card,
.order-card,
.price-record-card {
    border-color: #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    backdrop-filter: none;
  }
  #productsView .card-grid-shell,
  #customersView .card-grid-shell,
  #suppliersView .card-grid-shell {
    height: auto;
  }

  .modal.mobile-account-dialog {
    width: min(calc(100% - 36px), 340px);
    max-width: 340px;
    padding: 0;
    border: 0;
    border-radius: 26px;
    overflow: visible;
    background: transparent;
  }

  .modal.mobile-account-dialog::backdrop {
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(4px);
  }

  .mobile-account-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 30px 22px 22px;
    border: 1px solid #bae6fd;
    border-radius: 26px;
    color: #111827;
    background: #ffffff;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.22);
  }

  .mobile-account-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #64748b;
    background: #f1f5f9;
  }

  .mobile-account-avatar {
    width: 68px;
    height: 68px;
    margin-bottom: 8px;
    border-radius: 50%;
    font-size: 1.15rem;
  }

  .mobile-account-card > strong {
    font-size: 1.05rem;
  }

  .mobile-account-card > span:not(.mobile-account-avatar),
  .mobile-account-card > small {
    color: #64748b;
    font-size: 0.76rem;
  }

  .mobile-account-settings,
  .mobile-account-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 0;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .mobile-account-settings {
    color: #006495;
    background: #eff6ff;
  }

  .mobile-account-logout {
    margin-top: 2px;
    color: #dc2626;
    background: #fef2f2;
  }

  .mobile-account-settings .icon,
  .mobile-account-logout .icon {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 760px) {
  html,
  body,
  button,
  input,
  select,
  textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0;
  }

  .main {
    padding: 0 0 calc(92px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #f5faff 0%, #f8fbff 44%, #ffffff 100%);
  }

  body.mobile-home-mode .mobile-app-header { width: 100%; margin-inline: 0; }
  body.mobile-home-mode .mobile-home-dashboard {
    width: calc(100% - 32px);
    margin-inline: auto;
  }

  .standard-topbar,
  .sales-topbar {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) repeat(2, 40px);
    grid-template-rows: 40px;
    align-items: center;
    gap: 8px;
    min-height: calc(58px + env(safe-area-inset-top));
    width: calc(100% - 20px);
    margin: 10px 10px 4px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  }

  .standard-topbar.is-hidden,
  .sales-topbar.is-hidden {
    display: none;
  }

  .mobile-subpage-back,
  .mobile-module-action {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid #dce6f1;
    border-radius: 50%;
    color: #111827;
    background: #f8fbff;
    box-shadow: none;
  }

  .mobile-module-action.is-hidden {
    display: none;
  }

  .mobile-subpage-back .icon,
  .mobile-module-action .icon,
  .mobile-subpage-back svg,
  .mobile-module-action svg {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    line-height: 0;
  }

  .standard-topbar .mobile-subpage-back {
    grid-column: 1;
    grid-row: 1;
  }

  .standard-topbar .mobile-module-filter {
    grid-column: 3;
    grid-row: 1;
  }

  .standard-topbar .mobile-module-sort {
    grid-column: 4;
    grid-row: 1;
  }

  .standard-topbar .topbar-title {
    grid-column: 2 / -1;
    grid-row: 1;
    min-width: 0;
  }

  .standard-topbar .topbar-title h1 {
    overflow: hidden;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .standard-topbar .top-actions {
    display: contents;
  }

  .standard-topbar .standard-search-box {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    border: 1px solid #dce6f1;
    border-radius: 20px;
    background: #f8fbff;
  }

  .standard-topbar .standard-search-box input {
    display: block;
    height: 38px;
    min-height: 38px;
    min-width: 0;
    padding-right: 8px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    font-size: 0.78rem;
  }

  body[data-mobile-view="products"] .standard-topbar .topbar-title,
body[data-mobile-view="warehouse"] .standard-topbar .topbar-title,
body[data-mobile-view="orders"] .standard-topbar .topbar-title,
body[data-mobile-view="returns"] .standard-topbar .topbar-title,
body[data-mobile-view="purchaseReceipts"] .standard-topbar .topbar-title,
body[data-mobile-view="vatInvoices"] .standard-topbar .topbar-title,
body[data-mobile-view="invoiceInventory"] .standard-topbar .topbar-title {
    display: none;
  }
  body[data-mobile-view="products"] .standard-topbar,
  body[data-mobile-view="returns"] .standard-topbar,
  body[data-mobile-view="invoiceInventory"] .standard-topbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  body[data-mobile-view="orders"] .standard-topbar > .mobile-subpage-back,
  body[data-mobile-view="products"] .standard-topbar > .mobile-subpage-back {
    display: none;
  }

  body[data-mobile-view="products"] .standard-topbar { box-sizing: border-box; width: 100%; height: calc(58px + env(safe-area-inset-top)); min-height: calc(58px + env(safe-area-inset-top)); margin: 0 0 8px; padding: calc(8px + env(safe-area-inset-top)) 14px 10px; border: 0; border-radius: 0; background: #006495; box-shadow: 0 1px 8px #0000000a; }
  body[data-mobile-view="products"] .main { background: #f4f7fb; }
  body[data-mobile-view="products"] .standard-topbar .standard-search-box { background: white; border: 0; border-radius: 24px; }
  body[data-mobile-view="products"] .standard-topbar > .mobile-subpage-back,
  body[data-mobile-view="products"] .standard-topbar .mobile-module-filter { width: 36px; height: 36px; min-height: 36px; border: 0; border-radius: 50%; color: #006495; background: white; }
  body[data-mobile-view="products"] .standard-topbar .mobile-module-sort { display: none; }
  body[data-mobile-view="products"] #mobileModuleSummary { width: calc(100% - 28px); margin: 0 14px 10px; padding: 8px 12px; min-height: 38px; border-radius: 12px; background: white; }
  body[data-mobile-view="products"] .mobile-module-summary-main,
  body[data-mobile-view="products"] .mobile-module-summary-total { display: flex; flex-direction: row; align-items: center; gap: 5px; }
  body[data-mobile-view="products"] .mobile-module-summary-main strong { font-size: 13px; }
  body[data-mobile-view="products"] .mobile-module-summary-main small,
  body[data-mobile-view="products"] .mobile-module-summary-total small { font-size: 11px; }
  body[data-mobile-view="products"] .mobile-module-summary-total strong { font-size: 13px; color: #006495; }
  body[data-mobile-view="products"] #productsView { padding: 0 14px 12px; }
    body[data-mobile-view="products"] #quickOrderButton { background: #006495; }
  body[data-mobile-view="returns"] .standard-topbar .mobile-module-sort,
  body[data-mobile-view="invoiceInventory"] .standard-topbar .mobile-module-sort {
    grid-column: 3;
  }

  .mobile-customer-locate.is-loading .icon {
    animation: mobile-sync-spin 0.8s linear infinite;
  }

  body[data-mobile-view="products"] .standard-topbar {
    grid-template-columns: minmax(0, 1fr) 40px 40px;
    row-gap: 0;
  }
  body[data-mobile-view="products"] .standard-topbar .standard-search-box,
  body[data-mobile-view="orders"] .standard-topbar .standard-search-box {
    grid-column: 1;
  }

  body[data-mobile-view="warehouse"] .standard-topbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: 40px 40px 38px;
    row-gap: 8px;
    min-height: 146px;
  }

  body[data-mobile-view="warehouse"] .standard-topbar .mobile-warehouse-import {
    grid-column: 3;
    grid-row: 1;
  }

  body[data-mobile-view="warehouse"] .standard-topbar .topbar-title {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  body[data-mobile-view="warehouse"] .standard-topbar .topbar-title h1 {
    line-height: 40px;
  }

  body[data-mobile-view="warehouse"] .standard-topbar .standard-search-box {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 40px;
    border-radius: 20px;
  }

  body[data-mobile-view="warehouse"] .standard-topbar .standard-search-box input {
    height: 38px;
    min-height: 38px;
    font-size: 0.82rem;
  }

  body[data-mobile-view="warehouse"] .standard-topbar .warehouse-topbar-filter {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    height: 38px;
  }

  body[data-mobile-view="warehouse"] .standard-topbar .warehouse-topbar-filter select {
    box-sizing: border-box;
    display: block;
    height: 38px;
    min-height: 38px;
    padding-left: 52px;
    padding-right: 48px;
    border-radius: 19px;
    background: #f8fbff;
  }

  body[data-mobile-view="products"] .standard-topbar .mobile-module-filter {
    grid-column: 3;
    grid-row: 1;
  }

  .standard-topbar .orders-import-menu,
  .standard-topbar .vat-topbar-actions,
  .standard-topbar .price-topbar-actions,
  .standard-topbar .topbar-filter-wrap,
  .standard-topbar .product-topbar-actions,
  .standard-topbar #quickOrderActionMenu {
    display: none;
  }

  body[data-mobile-view="products"] .standard-topbar .product-topbar-actions {
    display: contents;
  }

  body[data-mobile-view="products"] .standard-topbar .product-topbar-actions > #quickBrandButton,
  body[data-mobile-view="products"] .standard-topbar .product-filter-action-menu {
    display: none;
  }

  body[data-mobile-view="products"] .standard-topbar .product-category-action-menu {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 40px;
    height: 40px;
  }

  body[data-mobile-view="products"] .standard-topbar #quickCategoryButton {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-color: #dce6f1;
    border-radius: 12px;
    background: #ffffff;
  }

  body[data-mobile-view="products"] .standard-topbar #quickCategoryButton > span:not(:first-child) {
    display: none;
  }

  body[data-mobile-view="products"] .standard-topbar .product-category-action-menu .price-action-dropdown {
    right: 0;
    left: auto;
  }

  .standard-topbar .orders-topbar-filters,
  .standard-topbar .purchase-receipt-topbar-filters {
    display: none;
  }

  .standard-topbar .orders-misa-export-menu {
    display: none;
  }

  .standard-topbar .orders-topbar-filters.mobile-filter-open,
  .standard-topbar .purchase-receipt-topbar-filters.mobile-filter-open {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid #dce6f1;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
  }

  body.products-mode #quickOrderActionMenu,
  body.customers-mode #quickOrderActionMenu,
  body.suppliers-mode #quickOrderActionMenu {
    position: fixed;
    right: 20px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 42;
    display: block;
    width: 40px;
  }

  body.products-mode #quickOrderButton,
  body.customers-mode #quickOrderButton,
  body.suppliers-mode #quickOrderButton {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(11, 87, 208, 0.25);
  }

  body.products-mode #quickOrderButton #topbarActionLabel,
  body.customers-mode #quickOrderButton #topbarActionLabel,
  body.suppliers-mode #quickOrderButton #topbarActionLabel,
  body.products-mode #quickOrderButton .price-action-chevron,
  body.customers-mode #quickOrderButton .price-action-chevron,
  body.suppliers-mode #quickOrderButton .price-action-chevron {
    display: none !important;
  }

  .mobile-module-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    margin: 6px 10px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  }

  .mobile-module-summary.is-hidden { display: none; }

  .mobile-module-summary-main,
  .mobile-module-summary-total {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .mobile-module-summary-main { flex: 1 1 auto; }
  .mobile-module-summary-total { flex: 0 1 46%; text-align: right; }
  .mobile-module-summary-main strong { font-size: 1.125rem; font-weight: 900; }
  .mobile-module-summary-main small,
  .mobile-module-summary-total small { color: #334155; font-size: 0.75rem; font-weight: 700; }
  .mobile-module-summary-total strong { overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.2; }

  #productsView,
  #customersView,
  #suppliersView,
  #ordersView,
  #returnsView,
  #purchaseReceiptsView,
  #vatInvoicesView,
  #invoiceInventoryView,
  #costPriceView,
  #sellingPriceView {
    padding: 0 10px 10px;
  }

  #productsView .card-grid-shell,
  #customersView .card-grid-shell,
  #suppliersView .card-grid-shell,
  #invoiceInventoryView .card-grid-shell {
    height: auto;
  }

  #invoiceInventoryView .invoice-inventory-grid{
  }
    
  
  
  
  
  
      
  
  
  
          
  
  
          #customersView .customer-revenue-debt-indicator { display: none; }
              
  
  
  
  #customersView .customer-checkin-button {
    display: grid;
    place-items: center;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #065f46;
    background: #a7f3d0;
    font-size: 0.6875rem;
    font-weight: 800;
    white-space: nowrap;
  }

  #customersView .customer-checkin-button .icon,
  #customersView .customer-checkin-button svg {
    width: 15px;
    height: 15px;
  }

  .order-card-list,
  .price-record-list {
    display: grid;
    gap: 10px;
  }

  .order-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 3px 11px;
    min-height: 82px;
    padding: 12px 14px;
    border: 1px solid #dce6f1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  }

  .order-card .order-card-check { display: none; }
  .order-card .module-row-icon {
    grid-column: 1;
    grid-row: 1 / 4;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #006495;
    background: #eaf3ff;
  }
  .order-card .module-row-icon .icon,
  .order-card .module-row-icon svg { width: 19px; height: 19px; }
  .order-card .order-card-code { grid-column: 2; grid-row: 1; font-size: 0.9375rem; line-height: 18px; }
  .order-card .order-card-customer,
  .order-card .order-card-return { grid-column: 2; grid-row: 2; overflow: hidden; color: #334155; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
  .vat-invoice-card .order-card-return { display: none; }
  .order-card .order-card-total { grid-column: 3; grid-row: 1; align-self: center; font-size: 0.9375rem; text-align: right; white-space: nowrap; }
  .order-card .order-card-date { grid-column: 2; grid-row: 3; color: #334155; font-size: 0.72rem; text-align: left; }
  .order-card .order-card-payment,
  .order-card .order-card-status,
  .order-card .order-card-reconcile { grid-column: 3; grid-row: 2 / 4; justify-self: end; align-self: center; }
  .order-card .order-card-type,
  .order-card .order-card-channel,
  .order-card .order-card-discount,
  .order-card .order-card-paid { display: none; }
  .order-card .badge { max-width: 102px; overflow: hidden; font-size: 0.625rem; text-overflow: ellipsis; white-space: nowrap; }
  .purchase-receipts-table-row .order-card-status,
  .purchase-receipts-table-row .order-card-reconcile { display: none; }
  .vat-invoice-card .order-card-payment { display: none; }
  .vat-invoice-card .order-card-status { display: flex; }
  .order-card.expanded { min-height: 82px; }
  .order-card .order-inline-detail { grid-column: 1 / -1; margin-top: 10px; }

  /* Return receipts contain both the source order and customer, plus two
     status badges. Give each field its own row so mobile cards never overlap. */
  .return-list-card {
    grid-template-rows: auto auto auto auto;
    min-height: 108px;
  }
  .return-list-card .module-row-icon {
    grid-row: 1 / 5;
  }
  .return-list-card .order-card-code {
    grid-column: 2;
    grid-row: 1;
  }
  .return-list-card .order-card-total {
    grid-column: 3;
    grid-row: 1;
  }
  .return-list-card .order-card-return {
    grid-column: 2;
    grid-row: 2;
  }
  .return-list-card .order-card-customer {
    grid-column: 2;
    grid-row: 3;
  }
  .return-list-card .order-card-date {
    grid-column: 2;
    grid-row: 4;
  }
  .return-list-card .order-card-status,
  .return-list-card .order-card-payment {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    max-width: 132px;
  }
  .return-list-card .order-card-status {
    grid-row: 2;
  }
  .return-list-card .order-card-payment {
    grid-row: 3;
  }
  .return-list-card .order-card-status .badge,
  .return-list-card .order-card-payment .badge {
    max-width: 132px;
  }

  .price-record-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid #dce6f1;
    border-radius: 24px;
    background: #ffffff;
  }

  .price-record-card .cost-price-select-check { display: none; }
  .price-record-card .price-record-model,
  .price-record-card .price-record-product { grid-column: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .price-record-card .price-record-model { font-size: 0.75rem; }
  .price-record-card .price-record-product { font-size: 0.9rem; font-weight: 800; }
  .price-record-card .price-record-money { grid-column: 2; font-size: 0.75rem; text-align: right; }
  .price-record-card .price-record-buy-gift { grid-column: 1; color: #334155; font-size: 0.7rem; }
  .price-record-card .price-record-supplier-count { grid-column: 2; grid-row: 1; }
  .price-record-card .order-inline-detail { grid-column: 1 / -1; }

  .cashbook-view {
    padding: 0 10px 10px;
  }

  .mobile-segmented-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 18px;
    background: #eaf2fb;
  }

  .mobile-segmented-nav button {
    min-height: 38px;
    border: 0;
    border-radius: 15px;
    color: #475569;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .mobile-segmented-nav button.active {
    color: #006495;
    background: #ffffff;
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.08);
  }

  .cashbook-view .cashbook-layout { display: grid; gap: 10px; }
  .cashbook-view .cashbook-form-panel,
  .cashbook-view .cashbook-history-panel {
    padding: 14px;
    border: 1px solid #dce6f1;
    border-radius: 24px;
    background: #ffffff;
  }
  .cashbook-view .panel-heading p,
  .cashbook-view .cashbook-history-head p { display: none; }
  .cashbook-view .cashbook-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cashbook-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 0;
    border-radius: 0;
    border-width: 0 0 1px;
  }
  .cashbook-entry > div:nth-child(2) { display: none; }
  .cashbook-entry > strong { font-size: 0.85rem; }
  .mobile-native-page-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 62px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #dce6f1;
    border-radius: 24px;
    background: #ffffff;
  }
  .mobile-native-page-header strong { font-size: 1.125rem; }

  .purchase-workspace,
  .sales-workspace,
  .product-import-workspace,
  .price-compare-view,
  .settings-view {
    padding-right: 10px;
    padding-left: 10px;
  }

  .settings-grid,
  .customer-import-settings-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .misa-export-settings-card,
  .misa-export-settings-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .misa-export-settings-note {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .misa-export-settings-form .primary-button {
    justify-content: center;
  }

  .settings-warehouse-shortcut-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-import-settings-row {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 12px 0;
  }

  .product-import-settings-row .product-import-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-import-settings-row .product-import-actions button {
    justify-content: center;
  }

  .customer-import-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-import-settings-actions {
    justify-content: stretch;
  }

  .customer-import-settings-actions > :is(a, button){
  }
  .payment-card,
  .purchase-products-panel,
  .sales-products-panel,
  .product-import-card,
  .price-compare-panel {
    border: 1px solid #dce6f1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: none;
  }

  body.map-mode .main {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
  }

  body.map-mode .mobile-app-dock,
  body.map-mode .mobile-app-header {
    display: none !important;
  }

  body.map-mode #mapView,
  body.map-mode .customer-map-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 760px) {
  body.purchase-entry-mode .standard-topbar > .mobile-subpage-back {
    display: none;
  }

  body.purchase-entry-mode .standard-topbar {
    grid-template-columns: minmax(0, 1fr) repeat(2, 40px);
  }

  body.purchase-entry-mode .standard-topbar .topbar-title,
  body.purchase-entry-mode .standard-topbar .standard-search-box {
    grid-column: 1;
  }

  body.sales-mode .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.sales-mode .main {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: 0 0 calc(94px + env(safe-area-inset-bottom));
  }

  body.sales-mode #salesView,
  body.sales-mode .sales-workspace {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body.mobile-sales-checkout-open .app-shell,
  body.mobile-sales-checkout-open .main,
  body.mobile-sales-checkout-open #salesView,
  body.mobile-sales-checkout-open .sales-workspace {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body.mobile-sales-checkout-open .main,
  body.mobile-sales-checkout-open #salesView {
    padding: 0;
  }

  body.mobile-sales-checkout-open.mobile-sales-keyboard-open .app-shell,
  body.mobile-sales-checkout-open.mobile-sales-keyboard-open .main,
  body.mobile-sales-checkout-open.mobile-sales-keyboard-open #salesView,
  body.mobile-sales-checkout-open.mobile-sales-keyboard-open .sales-workspace {
    height: 100dvh;
    min-height: 100dvh;
  }

  body.mobile-sales-checkout-open.mobile-sales-keyboard-open #salesView > .sales-workspace > .payment-card {
    top: var(--mobile-sales-viewport-top, 0px);
    bottom: auto;
    height: var(--mobile-sales-viewport-height, 100dvh);
    padding: 0;
    scroll-padding-block: 18px 24px;
  }

  body.mobile-sales-checkout-open.mobile-sales-keyboard-open #completeSaleButton {
    display: flex !important;
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0;
    flex: 0 0 auto;
    box-shadow: 0 6px 16px rgba(11, 87, 208, 0.16);
  }

  body.mobile-sales-checkout-open.mobile-sales-keyboard-open,
  body.mobile-sales-checkout-open.mobile-sales-keyboard-open .main,
  body.mobile-sales-checkout-open.mobile-sales-keyboard-open #salesView,
  body.mobile-sales-checkout-open.mobile-sales-keyboard-open .sales-workspace,
  body.mobile-sales-checkout-open.mobile-sales-keyboard-open #salesView > .sales-workspace > .payment-card {
    background: #ffffff;
  }

  .module-view-controls {
    display: none !important;
  }

  #advancedFilterWrap:not(.is-hidden) {
    position: static;
    display: block;
    width: 0;
    height: 0;
  }

  #advancedFilterWrap .advanced-filter-button {
    display: none;
  }

  #advancedFilterWrap .advanced-filter-panel {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 2200;
    width: auto;
    max-height: min(70dvh, 560px);
    overflow: auto;
  }

  .advanced-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body.mobile-sales-checkout-open .sales-checkout-note-field {
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.mobile-sales-checkout-open .sales-checkout-note-field textarea {
    min-height: 46px;
    resize: none;
    border-radius: 8px;
    background: #f8fafc;
  }
}

@media (max-width: 760px) {
  body[data-mobile-view="orders"] .standard-topbar {
    grid-template-columns: minmax(0, 1fr) 40px minmax(82px, auto);
    row-gap: 0;
    height: calc(58px + env(safe-area-inset-top));
    min-height: calc(58px + env(safe-area-inset-top));
    width: 100%;
    margin: 0 0 8px;
    padding: calc(8px + env(safe-area-inset-top)) 14px 10px;
    border: 0;
    border-radius: 0;
    background: #006495;
    box-shadow: 0 2px 6px #0f172a12;
  }

  body[data-mobile-view="orders"] .main { background: #f4f7fb; }
  body[data-mobile-view="orders"] .standard-topbar > .mobile-subpage-back,
  body[data-mobile-view="orders"] .standard-topbar .mobile-module-filter { border-color: #ffffff30; color: #fff; background: #ffffff26; }
  body[data-mobile-view="orders"] .standard-topbar .standard-search-box { background: #fff; border: 0; }
  body[data-mobile-view="orders"] .standard-topbar .standard-search-box input { padding-left: 32px; }
  body[data-mobile-view="orders"] .standard-topbar .standard-search-box > .icon { left: 10px; width: 16px; height: 16px; color: #94a3b8; }
  body[data-mobile-view="orders"] #mobileModuleSummary { margin: 0 12px 12px; width: calc(100% - 24px); padding: 10px 12px; border-radius: 10px; min-height: 52px; border-color: #edf2f7; }
  body[data-mobile-view="orders"] .mobile-module-summary-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  body[data-mobile-view="orders"] .mobile-module-summary-main small { font-size: 11px; font-weight: 500; }

  body[data-mobile-view="returns"] .standard-topbar {
    grid-template-columns: 40px minmax(0, 1fr) minmax(74px, auto) minmax(82px, auto);
    row-gap: 0;
  }

  body[data-mobile-view="orders"] .standard-topbar .mobile-module-filter {
    grid-column: 2;
    grid-row: 1;
  }

  .mobile-orders-section-switch:not(.is-hidden) {
    grid-column: 5;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dce6f1;
    border-radius: 20px;
    color: #111827;
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
  }

  body[data-mobile-view="orders"] .mobile-orders-section-switch:not(.is-hidden) {
    grid-column: 3;
  }

  .mobile-return-entry-button:not(.is-hidden) {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 74px;
    height: 40px;
    min-height: 40px;
    padding: 0 9px;
    border: 1px solid #c8dff7;
    border-radius: 20px;
    color: #006495;
    background: #edf5ff;
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
  }

  body[data-mobile-view="returns"] .mobile-return-entry-button:not(.is-hidden) {
    grid-column: 3;
  }

  body[data-mobile-view="returns"] .mobile-orders-section-switch:not(.is-hidden) {
    grid-column: 4;
  }

  .mobile-return-entry-button .icon,
  .mobile-return-entry-button svg {
    width: 15px;
    height: 15px;
  }

  #mobileModuleSummaryLabel:empty {
    display: none;
  }

  body[data-mobile-view="orders"] .mobile-module-summary-main strong {
    font-size: 12px;
  }

  body[data-mobile-view="orders"] .mobile-module-summary-total strong {
    font-size: 16px;
    font-weight: 700;
    color: #006495;
  }

  #ordersView.active {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-inline: 12px;
  }

  #ordersView .order-card-list {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: visible;
    padding: 0;
  }

  .mobile-order-day-group {
    display: grid;
    gap: 8px;
  }

  .mobile-order-day-group > h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 6px 2px 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .mobile-order-day-group > h3 small { flex-shrink: 0; font-size: 11px; font-weight: 500; color: #94a3b8; }

  .mobile-order-day-group > div {
    display: grid;
    gap: 10px;
  }

  .mobile-sales-order-card {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 0;
    padding: 12px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    color: #111827;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-sales-order-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  .mobile-sales-order-card-head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .mobile-sales-order-card-head > div:last-child {
    justify-items: end;
    text-align: right;
  }

  .mobile-order-card-total-row {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #006495 !important;
  }
  .mobile-order-customer-code { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
  .mobile-sales-order-card-head .mobile-order-code { padding: 2px 4px; border-radius: 4px; background: #f1f5f9; color: #94a3b8; font-size: 10px; line-height: 14px; overflow-wrap: anywhere; }
  .mobile-sales-order-card-head .mobile-order-date { color: #94a3b8; font-size: 11px; }
  .mobile-order-card-total-row strong { color: #006495; }
  .mobile-order-statuses { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .mobile-order-statuses > span { display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid #a7f3d080; border-radius: 999px; background: #ecfdf5; font-size: 11px; line-height: 16px; }
  .mobile-order-statuses > .is-order { background: #fffbeb; border-color: #fde68a; }
  .mobile-order-statuses > .is-debt { background: #fff1f2; border-color: #fecdd3; }
  .mobile-order-statuses > .mobile-order-delivery-loading { background: #f8fafc; border-color: #e2e8f0; }

  .mobile-order-card-note,
  .mobile-order-invoice-download {
    display: inline-grid;
    position: static;
    flex: 0 0 28px;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #006495;
    background: #f8fafc;
  }

  .mobile-order-card-note {
    border-color: #f0c36b;
    color: #b45309;
    background: #fffaf0;
  }

  .mobile-order-card-note:active,
  .mobile-order-invoice-download:active {
    background: #e5f0ff;
  }

  .mobile-order-card-note:active {
    background: #fff1d6;
  }

  .mobile-order-card-note .icon,
  .mobile-order-card-note svg,
  .mobile-order-invoice-download .icon,
  .mobile-order-invoice-download svg {
    width: 16px;
    height: 16px;
  }

  .mobile-sales-order-card-head strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-sales-order-card-head span,
  .mobile-sales-order-products span {
    color: #334155;
    font-size: 0.72rem;
    line-height: 16px;
  }

  .mobile-order-payment-status {
    color: #07845f !important;
    font-weight: 850;
  }

  .mobile-order-payment-status.is-debt {
    color: #dc2626 !important;
  }

  .mobile-order-delivery-loading,
  .mobile-order-delivery-complete {
    font-weight: 850;
  }

  .mobile-order-delivery-loading {
    color: #64748b !important;
  }

  .mobile-order-delivery-complete {
    color: #07845f !important;
  }

  .mobile-order-delivery-status {
    color: #07845f !important;
    font-weight: 850;
  }

  .mobile-order-delivery-status.is-order {
    color: #9a6700 !important;
  }

  .mobile-order-statuses > .order-product-debt-warning {
    margin: 0;
    color: #c2410c;
    background: #fff7ed;
    border-color: #fed7aa;
  }

  .mobile-sales-order-card .order-product-debt-icon {
    color: #ffffff;
  }

  .mobile-sales-order-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-top: 9px;
    border-top: 1px solid #e2e8f0;
  }

  .mobile-sales-order-products {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .mobile-sales-order-products > div { display: grid; gap: 2px; min-width: 0; }
  .mobile-sales-order-products > .icon { flex: 0 0 15px; width: 15px; height: 15px; color: #94a3b8; }
  .mobile-sales-order-products > .icon svg { width: 15px; height: 15px; }

  .mobile-sales-order-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .mobile-sales-order-products span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-orders-load-more {
    width: 100%;
    min-height: 44px;
    border: 0;
    color: #475569;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 800;
  }

  body.mobile-order-detail-open {
    overflow: hidden;
  }

  .mobile-order-detail:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    color: #111827;
    background: #f7faff;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .mobile-order-detail.is-open {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-order-detail-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    min-height: calc(62px + env(safe-area-inset-top));
    margin: 0;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid #dce6f1;
    background: rgba(255, 255, 255, 0.98);
  }

  .mobile-order-detail-header > strong {
    overflow: hidden;
    font-size: 1.15rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-order-detail-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid #dce6f1;
    border-radius: 50%;
    color: #111827;
    background: #ffffff;
  }

  .mobile-order-detail-icon .icon,
  .mobile-order-detail-icon svg {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    line-height: 0;
  }

  .mobile-order-detail-scroll {
    display: grid;
    flex: 1 1 auto;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .mobile-order-detail-panel,
  .mobile-order-customer-panel {
    width: 100%;
    border: 1px solid #dce6f1;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: none;
  }

  .mobile-order-overview {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  .mobile-order-overview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  .mobile-order-overview-head > div,
  .mobile-order-overview-payment > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .mobile-order-overview-head span,
  .mobile-order-overview-head small,
  .mobile-order-overview-payment span {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .mobile-order-overview-head strong {
    overflow: hidden;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 27px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-order-status-pill {
    padding: 6px 10px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #07845f !important;
    background: #ecfdf5;
    font-weight: 850 !important;
  }

  .mobile-order-status-pill.is-debt {
    border-color: #fda4af;
    color: #dc2626 !important;
    background: #fff1f2;
  }

  .mobile-order-overview-payment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
  }

  .mobile-order-overview-payment strong {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-order-overview-payment > div:first-child strong {
    color: #006495;
  }

  .mobile-order-customer-panel {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 12px 14px;
    color: #111827;
    text-align: left;
  }

  .mobile-order-customer-panel:disabled {
    opacity: 1;
  }

  .mobile-order-customer-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #006495;
    background: #eaf3ff;
    font-size: 0.68rem;
    font-weight: 900;
  }

  .mobile-order-customer-panel > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .mobile-order-customer-panel strong,
  .mobile-order-customer-panel small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-order-customer-panel strong {
    font-size: 0.95rem;
    font-weight: 900;
  }

  .mobile-order-customer-panel small {
    color: #475569;
    font-size: 0.7rem;
  }

  .mobile-order-customer-chevron {
    color: #111827;
    font-size: 1.35rem;
    font-weight: 900;
  }

  .mobile-order-products-panel,
  .mobile-order-payment-panel {
    overflow: hidden;
  }

  .mobile-order-products-panel > header,
  .mobile-order-payment-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 11px 14px;
    border-bottom: 1px solid #e2e8f0;
  }

  .mobile-order-products-panel > header strong,
  .mobile-order-payment-panel > header strong {
    font-size: 0.95rem;
    font-weight: 900;
  }

  .mobile-order-products-panel > header span {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .mobile-order-detail-pending {
    margin-left: 6px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
  }

  .mobile-order-delivery-debt-warning {
    padding: 10px 14px;
    border-bottom: 1px solid #f4c97a;
    background: #fff7e6;
  }

  .mobile-order-product-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
  }

  .mobile-order-product-image,
  .mobile-order-product-image img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .mobile-order-product-image {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #006495;
    background: #eaf3ff;
    font-size: 0.62rem;
    font-weight: 900;
  }

  .mobile-order-product-image img {
    object-fit: cover;
  }

  .mobile-order-product-row > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .mobile-order-product-row > div strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 18px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mobile-order-product-row span,
  .mobile-order-product-row > div span {
    color: #475569;
    font-size: 0.68rem;
    line-height: 15px;
  }

  .mobile-order-product-row > strong {
    font-size: 0.84rem;
    font-weight: 900;
    white-space: nowrap;
  }

  .mobile-order-product-row > .order-promotion-amount {
    justify-items: end;
    gap: 4px;
    text-align: right;
  }

  .mobile-order-product-row > .order-promotion-amount > strong {
    display: block;
    overflow: visible;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 18px;
    white-space: nowrap;
  }

  .mobile-order-product-row .order-promotion-label,
  .mobile-order-product-row .order-promotion-label > span:last-child {
    color: #b45309;
  }

  .mobile-order-product-row .order-promotion-icon {
    color: #ffffff;
  }

  .mobile-order-products-toggle {
    width: 100%;
    min-height: 46px;
    border: 0;
    color: #006495;
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 850;
  }

  .mobile-order-products-empty {
    padding: 20px 14px;
    color: #475569;
    font-size: 0.78rem;
    text-align: center;
  }

  .mobile-order-payment-panel > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.88rem;
  }

  .mobile-order-payment-panel > div strong {
    text-align: right;
    white-space: nowrap;
  }

  .mobile-order-payment-panel .is-accent {
    color: #006495;
  }

  .mobile-order-payment-panel .is-debt {
    color: #dc2626;
  }

  .mobile-order-payment-panel > small {
    display: block;
    padding: 9px 14px 12px;
    color: #475569;
    font-size: 0.7rem;
    text-align: right;
  }

  .mobile-order-payment-signature {
    padding: 12px 14px 14px;
    border-top: 1px solid #e2e8f0;
  }

  .mobile-order-payment-signature img {
    width: 100%;
    max-height: 112px;
  }

  .mobile-order-detail-loading {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 55dvh;
    color: #475569;
    font-size: 0.82rem;
  }

  .mobile-order-action-scrim {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: none;
    background: rgba(15, 23, 42, 0.34);
  }

  .mobile-order-action-scrim[hidden],
  .mobile-order-action-sheet[hidden] {
    display: none !important;
  }

  .mobile-order-action-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid;
    gap: 10px;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    background: #ffffff;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.16);
    transform: translateY(110%);
    transition: transform 180ms ease;
  }

  .mobile-order-detail.actions-open .mobile-order-action-scrim {
    display: block;
  }

  .mobile-order-detail.actions-open .mobile-order-action-sheet {
    transform: translateY(0);
  }

  .mobile-order-action-handle {
    justify-self: center;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
  }

  .mobile-order-action-sheet > strong {
    font-size: 1.05rem;
    font-weight: 900;
  }

  .mobile-order-action-sheet > div:last-child {
    display: grid;
    gap: 8px;
  }

  .mobile-order-action-sheet button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #dce6f1;
    border-radius: 16px;
    color: #006495;
    background: #ffffff;
    font-size: 0.88rem;
    font-weight: 850;
  }

  .mobile-order-action-sheet button .icon,
  .mobile-order-action-sheet button svg {
    width: 19px;
    height: 19px;
  }

  .mobile-order-action-sheet button.is-danger {
    border-color: #fecaca;
    color: #dc2626;
  }

  .mobile-order-action-sheet button:disabled {
    opacity: 0.48;
  }
}

/* Warehouse management */
.warehouse-page {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

#staffAccountsView.active {
  min-height: 0;
  height: 100%;
}

.staff-account-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

#warehouseView.active {
  min-height: 0;
  height: 100%;
}

.warehouse-page {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.warehouse-mobile-settings-bar {
  display: none;
}

.warehouse-create-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

.warehouse-create-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.warehouse-create-form input,
.warehouse-create-form select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.warehouse-management-panel,
.warehouse-transfer-panel,
.warehouse-inventory-panel,
.warehouse-history-panel,
.staff-account-list-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.warehouse-section-head p,
.warehouse-transfer-product small,
.warehouse-history-row small {
  color: var(--muted);
}

.warehouse-staff-catalog {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.warehouse-staff-product-grid.is-table-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 38px repeat(14, minmax(0, 1fr));
  grid-auto-rows: 0;
  align-content: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.warehouse-product-table-columns {
  grid-template-columns: minmax(220px, 1.8fr) minmax(110px, 0.9fr) minmax(90px, 0.72fr) 96px 96px 64px 118px;
}

.warehouse-staff-product-card.product-card.product-table-row {
  display: grid;
  grid-template-rows: none;
  align-items: center;
  align-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 4px 12px;
  overflow: hidden;
  cursor: pointer;
}

.warehouse-staff-product-card.product-card.product-table-row > * {
  align-self: center;
}

.warehouse-staff-product-card .module-table-entity > span {
  align-content: center;
}

.warehouse-staff-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  color: var(--muted);
  text-align: center;
}

.warehouse-staff-product-grid.is-table-mode > .warehouse-staff-empty {
  grid-row: 1 / -1;
  min-height: 0;
  height: 100%;
}

.warehouse-staff-empty .icon,
.warehouse-staff-empty .icon svg {
  width: 30px;
  height: 30px;
}

.warehouse-management-panel,
.warehouse-transfer-panel,
.warehouse-inventory-panel,
.warehouse-history-panel,
.staff-account-list-panel { padding: 16px; }

.warehouse-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.warehouse-section-head h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.warehouse-section-head p { margin: 3px 0 0; font-size: 12px; }
.warehouse-section-head select { min-width: 220px; }

.warehouse-transfer-toolbar,
.staff-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.warehouse-transfer-toolbar label,
.staff-account-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.warehouse-transfer-toolbar input,
.warehouse-transfer-toolbar select,
.staff-account-fields input,
.staff-account-fields select,
.warehouse-section-head select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: #fff;
  font: inherit;
}

.warehouse-transfer-products {
  max-height: 390px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.warehouse-transfer-product,
.warehouse-management-row,
.warehouse-stock-row,
.warehouse-stock-table-head,
.warehouse-history-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.warehouse-transfer-product { grid-template-columns: 42px minmax(0, 1fr) 90px; }
.warehouse-management-row { grid-template-columns: 40px minmax(180px, 1fr) minmax(180px, 1fr) auto; }
.warehouse-management-row > label,
.warehouse-management-row > span { display: grid; gap: 3px; min-width: 0; }
.warehouse-management-row label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.warehouse-management-row input,
.warehouse-management-row select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; font: inherit; font-weight: 700; }
.warehouse-management-icon { display: grid !important; place-items: center; width: 36px; height: 36px; border-radius: 7px; color: #0369a1; background: #e0f2fe; }
.warehouse-management-list { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
.warehouse-transfer-product.is-empty { opacity: 0.5; }
.warehouse-transfer-product > span,
.warehouse-history-row > span { display: grid; gap: 2px; min-width: 0; }
.warehouse-transfer-product input { width: 82px; min-height: 36px; padding: 0 8px; text-align: right; }
.warehouse-product-avatar { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 7px; color: #075985; background: #e0f2fe; }
.warehouse-product-avatar img { width: 100%; height: 100%; object-fit: cover; }
.warehouse-result-note { padding: 10px 12px; color: var(--muted); background: #f8fafc; font-size: 12px; text-align: center; }

.warehouse-transfer-submit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.warehouse-stock-table-head,
.warehouse-stock-row { grid-template-columns: minmax(0, 1.5fr) minmax(100px, 0.8fr) 120px; }
.warehouse-stock-table-head { min-height: 38px; color: var(--muted); background: #f1f5f9; font-size: 12px; font-weight: 800; }
.warehouse-stock-row > :last-child { text-align: right; }
.warehouse-history-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.warehouse-history-row > :last-child { text-align: right; }
.warehouse-empty { padding: 24px; color: var(--muted); text-align: center; }

.staff-account-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 76px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.staff-account-summary > span {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
}

.staff-account-summary > span:last-child { border-right: 0; }
.staff-account-summary small { color: var(--muted); font-size: 11px; font-weight: 800; }
.staff-account-summary strong { font-size: 20px; line-height: 1; }

.staff-account-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.staff-account-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.staff-account-role-filters {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.staff-account-role-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.staff-account-role-filters button span {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 6px;
  background: #e9eef5;
  font-size: 10px;
}

.staff-account-role-filters button.active {
  color: #0756b8;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.staff-account-role-filters button.active span { color: #0756b8; background: #eaf4ff; }
.staff-account-list-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; }
.staff-account-list-actions .secondary-button { min-height: 38px; }
.staff-account-list-actions .icon-only { width: 38px; min-width: 38px; padding: 0; }
.staff-account-toolbar-create { display: none; }

.staff-account-table {
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.staff-account-table-head,
.staff-account-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.45fr) minmax(170px, 0.9fr) 145px minmax(180px, 1fr) 28px;
  align-items: center;
  gap: 12px;
  min-width: 820px;
}

.staff-account-table-head {
  padding: 0 14px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.staff-account-table-body {
  min-width: 820px;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.staff-account-row {
  width: 100%;
  min-height: 66px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--text);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease;
}

.staff-account-row:hover,
.staff-account-row:focus-visible { background: #f5f9ff; }
.staff-account-row:focus-visible { outline: 2px solid rgba(10, 132, 255, 0.42); outline-offset: -2px; }

.staff-account-entity {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.staff-account-entity > span:last-child,
.staff-account-employee,
.staff-account-role-cell,
.staff-account-warehouse-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.staff-account-row strong,
.staff-account-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-account-row small { color: var(--muted); font-size: 11px; font-weight: 650; }
.staff-account-avatar,
.staff-account-detail-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #0756b8;
  background: #eaf4ff;
  font-size: 12px;
  font-weight: 850;
}

.staff-account-avatar.is-warehouse,
.staff-account-detail-avatar.is-warehouse { color: #6d4c00; background: #fff4d8; }
.staff-account-avatar.is-admin,
.staff-account-detail-avatar.is-admin { color: #08745b; background: #e4f7f1; }

.staff-account-role-badge {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.staff-account-role-badge.is-sale { color: #0756b8; background: #eaf4ff; }
.staff-account-role-badge.is-warehouse { color: #765500; background: #fff4d8; }
.staff-account-role-badge.is-admin { color: #08745b; background: #e4f7f1; }
.staff-account-row-arrow { display: grid; place-items: center; color: var(--muted); transform: rotate(-90deg); }
.staff-account-row-arrow .icon,
.staff-account-row-arrow svg { width: 17px; height: 17px; }

.staff-account-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 220px;
  color: var(--muted);
  text-align: center;
}

.staff-account-empty .icon,
.staff-account-empty svg { width: 28px; height: 28px; }

.staff-account-create-modal { width: min(760px, calc(100vw - 28px)); }
.staff-account-create-modal-card { gap: 0; max-height: calc(100vh - 36px); overflow: hidden; padding: 0; border-radius: 14px; background: #fff; }
.staff-account-modal-heading { padding: 18px 20px; border-bottom: 1px solid var(--line); background: #f8fbff; }
.staff-account-modal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.staff-account-modal-title h2,
.staff-account-modal-title p { margin: 0; }
.staff-account-modal-title h2 { font-size: 18px; }
.staff-account-modal-title p { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 650; }
.staff-account-heading-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #cfe3fb; border-radius: 8px; color: #0756b8; background: #eaf4ff; }
.staff-account-heading-icon .icon,
.staff-account-heading-icon svg { width: 21px; height: 21px; }
.staff-account-form .staff-account-fields { margin: 0; padding: 18px 20px; }
.staff-account-create-role { grid-column: 1 / -1; }
.staff-account-modal-actions { padding: 14px 20px; border-top: 1px solid var(--line); background: #fff; }

.staff-account-detail-modal { width: min(1040px, calc(100vw - 28px)); overflow: hidden; }
.staff-account-detail-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  height: min(720px, calc(100vh - 36px));
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
  background: #fff;
}

.staff-account-detail-heading { padding: 16px 20px; border-bottom: 1px solid var(--line); background: #f8fbff; }
.staff-account-detail-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.staff-account-detail-identity h2,
.staff-account-detail-identity p { margin: 0; }
.staff-account-detail-identity h2 { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.staff-account-detail-identity p { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.staff-account-detail-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.staff-account-profile-panel { display: grid; align-content: start; gap: 18px; overflow-y: auto; padding: 20px; border-right: 1px solid var(--line); background: #fbfcfe; }
.staff-account-section-label { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.staff-account-facts { display: grid; gap: 0; margin: 0; }
.staff-account-facts > div { display: grid; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.staff-account-facts dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.staff-account-facts dd { margin: 0; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.staff-account-warehouse-info { display: grid; gap: 9px; }
.staff-account-warehouse-info strong { font-size: 13px; overflow-wrap: anywhere; }
.staff-account-sales-source { display: grid; gap: 9px; }
.staff-account-sales-source > small { color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.4; }
.staff-account-sales-source-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.staff-account-sales-source-options label { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 9px 7px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: center; cursor: pointer; }
.staff-account-sales-source-options label:has(input:checked) { border-color: #006495; box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.1); }
.staff-account-sales-source-options label:has(input:disabled) { cursor: default; }
.staff-account-sales-source-options input { position: absolute; opacity: 0; pointer-events: none; }
.staff-account-sales-source-options label > span:last-child { display: grid; gap: 2px; min-width: 0; }
.staff-account-sales-source-options strong { font-size: 11px; }
.staff-account-sales-source-options small { color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1.3; }
.staff-account-sales-source-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #475569; background: #eef2f7; }
.staff-account-sales-source-options label:has(input:checked) .staff-account-sales-source-mark { color: #0756b8; background: #e4f1ff; }
.staff-account-sales-source-mark .icon,
.staff-account-sales-source-mark svg { width: 15px; height: 15px; }
.staff-account-password-settings { display: grid; gap: 9px; padding-top: 2px; }
.staff-account-password-settings label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }
.staff-account-password-settings input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; font: inherit; }
.staff-account-password-settings input:focus { border-color: #006495; outline: 3px solid rgba(10, 132, 255, 0.12); }
.staff-account-password-settings small { color: var(--muted); font-size: 10px; font-weight: 650; }

.staff-account-permission-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; padding: 18px 20px; }
.staff-account-permission-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.staff-account-permission-toolbar label { display: grid; gap: 6px; min-width: min(280px, 100%); color: var(--muted); font-size: 11px; font-weight: 800; }
.staff-account-permission-toolbar select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #fff; font: inherit; font-weight: 750; }
.staff-account-permission-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.staff-account-permission-summary strong { color: var(--text); }
.staff-account-permission-summary small { padding: 3px 7px; border-radius: 6px; color: #0756b8; background: #eaf4ff; font-weight: 800; }
.staff-account-permission-groups { display: grid; align-content: start; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 3px; }
.staff-account-permission-group { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.staff-account-permission-group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 12px; background: #f8fafc; cursor: pointer; }
.staff-account-permission-group summary { list-style: none; }
.staff-account-permission-group summary::-webkit-details-marker { display: none; }
.staff-account-permission-group summary > span:first-child { display: grid; gap: 2px; min-width: 0; }
.staff-account-permission-group summary strong { font-size: 12px; }
.staff-account-permission-group summary small { color: var(--muted); font-size: 10px; font-weight: 650; }
.staff-account-permission-group summary > span:last-child { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; color: var(--muted); background: #e9eef5; font-size: 10px; font-weight: 800; }
.staff-account-permission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 4px 10px 8px; }
.staff-account-permission-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 6px 8px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); font-size: 11px; font-weight: 750; cursor: pointer; }
.staff-account-permission-item input { position: absolute; opacity: 0; pointer-events: none; }
.staff-account-permission-switch { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #cbd5e1; transition: background 150ms ease; }
.staff-account-permission-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.24); transition: transform 150ms ease; }
.staff-account-permission-item input:checked + .staff-account-permission-switch { background: #006495; }
.staff-account-permission-item input:checked + .staff-account-permission-switch::after { transform: translateX(14px); }
.staff-account-permission-item input:focus-visible + .staff-account-permission-switch { outline: 2px solid rgba(10, 132, 255, 0.45); outline-offset: 2px; }
.staff-account-permission-item:has(input:disabled) { opacity: 0.58; cursor: default; }
.staff-account-detail-actions { gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); background: #fff; }
.staff-account-protected-note { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: #08745b; font-size: 11px; font-weight: 800; }
.staff-account-protected-note .icon,
.staff-account-protected-note svg { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .warehouse-page,
  .staff-account-page { padding: 10px 10px 110px; }
  .warehouse-page { grid-template-rows: auto minmax(0, 1fr); }
  .warehouse-mobile-settings-bar { display: block; }
  .warehouse-page.is-staff-view { grid-template-rows: minmax(0, 1fr); }
  .warehouse-page.is-staff-view .warehouse-mobile-settings-bar { display: none; }
  .warehouse-create-form { grid-template-columns: 1fr; }
  .warehouse-create-form .primary-button { width: 100%; justify-content: center; }
  .warehouse-page.is-staff-view {
    padding: 4px 10px 104px;
  }
  .warehouse-product-table-columns {
    grid-template-columns: minmax(0, 1fr) 88px 52px;
    min-width: 0;
  }
  .warehouse-staff-product-grid.is-table-mode {
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-content: start;
    overflow: auto;
  }
  .warehouse-product-table-columns > :nth-child(2),
  .warehouse-product-table-columns > :nth-child(3),
  .warehouse-product-table-columns > :nth-child(4),
  .warehouse-product-table-columns > :nth-child(7) { display: none; }
  .warehouse-staff-product-card.product-card.product-table-row {
    min-height: 62px;
    height: auto;
    padding: 7px 9px;
  }
  .warehouse-staff-product-card .module-table-entity {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
  }
  .warehouse-staff-product-card .module-table-avatar {
    width: 40px;
    height: 40px;
  }
  .warehouse-transfer-toolbar,
  .staff-account-fields { grid-template-columns: 1fr; }
  .warehouse-management-row { grid-template-columns: 36px minmax(0, 1fr); }
  .warehouse-management-row > :nth-child(3),
  .warehouse-management-row > :nth-child(4) { grid-column: 2; }
  .warehouse-management-row .secondary-button { width: 100%; }
  .warehouse-section-head { align-items: flex-start; flex-direction: column; }
  .warehouse-section-head select { min-width: 0; }
  .warehouse-transfer-product { grid-template-columns: 38px minmax(0, 1fr) 68px; }
  .warehouse-transfer-product input { width: 62px; }
  .warehouse-stock-table-head,
  .warehouse-stock-row { grid-template-columns: minmax(0, 1fr) 76px; }
  .warehouse-stock-table-head > :nth-child(2),
  .warehouse-stock-row > :nth-child(2) { display: none; }
  .warehouse-transfer-submit { align-items: stretch; flex-direction: column; }
  .warehouse-transfer-submit .primary-button { width: 100%; }
  .staff-account-page { grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 4px 10px 104px; }
  .staff-account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 108px; border-right: 0; border-left: 0; border-radius: 0; }
  .staff-account-summary > span { min-height: 54px; padding: 8px 14px; }
  .staff-account-summary > span:nth-child(2) { border-right: 0; }
  .staff-account-summary > span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .staff-account-summary strong { font-size: 17px; }
  .staff-account-list-panel { border-right: 0; border-left: 0; border-radius: 0; }
  .staff-account-toolbar { align-items: stretch; flex-direction: column; min-width: 0; overflow: hidden; padding: 9px 12px; }
  .staff-account-role-filters { width: 100%; overflow-x: auto; }
  .staff-account-role-filters button { flex: 1 0 auto; }
  .staff-account-list-actions { flex-wrap: wrap; min-width: 0; width: 100%; }
  .staff-account-list-actions .secondary-button:not(.icon-only) { flex: 1 1 110px; min-width: 0; justify-content: center; }
  .staff-account-list-actions .icon-only { flex: 0 0 38px; }
  .staff-account-toolbar-create { display: inline-flex; flex: 1 1 100%; justify-content: center; }
  .staff-account-table { grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .staff-account-table-head { display: none; }
  .staff-account-table-body { min-width: 0; overflow-y: auto; }
  .staff-account-row { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 10px; min-width: 0; min-height: 132px; padding: 10px 14px; }
  .staff-account-entity { grid-column: 1; }
  .staff-account-row-arrow { grid-column: 2; grid-row: 1; }
  .staff-account-employee { grid-column: 1 / -1; }
  .staff-account-role-cell { grid-column: 1; }
  .staff-account-role-cell small { display: none; }
  .staff-account-warehouse-cell { grid-column: 1 / -1; }
  .staff-account-create-modal,
  .staff-account-detail-modal { width: calc(100vw - 16px); }
  .staff-account-create-modal-card { max-height: calc(100vh - 16px); overflow-y: auto; }
  .staff-account-modal-heading { padding: 14px; }
  .staff-account-modal-title p { display: none; }
  .staff-account-form .staff-account-fields { padding: 14px; }
  .staff-account-create-role { grid-column: auto; }
  .staff-account-modal-actions { padding: 12px 14px; }
  .staff-account-detail-modal-card { height: calc(100vh - 16px); overflow-y: auto; }
  .staff-account-detail-heading { position: sticky; top: 0; z-index: 2; padding: 12px 14px; }
  .staff-account-detail-layout { display: block; overflow: visible; }
  .staff-account-profile-panel { gap: 14px; overflow: visible; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .staff-account-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .staff-account-permission-panel { display: grid; overflow: visible; padding: 16px 14px; }
  .staff-account-permission-toolbar { align-items: stretch; flex-direction: column; }
  .staff-account-permission-toolbar label { min-width: 0; }
  .staff-account-permission-toolbar .secondary-button { justify-content: center; width: 100%; }
  .staff-account-permission-groups { overflow: visible; padding: 0; }
  .staff-account-permission-list { grid-template-columns: 1fr; }
  .staff-account-detail-actions { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; padding: 11px 14px; }
  .staff-account-protected-note { flex: 1 1 100%; }
}

/* Warehouse dashboard and settings dialog */
.warehouse-settings-modal { width: min(1040px, calc(100vw - 28px)); }
.warehouse-page-settings-button { display: none; }
.warehouse-settings-modal-card { max-height: calc(100vh - 36px); overflow: auto; }
.warehouse-edit-modal { width: min(780px, calc(100vw - 28px)); }
.warehouse-edit-modal-card { gap: 0; max-height: calc(100vh - 36px); overflow: hidden; padding: 0; border-radius: 18px; background: #fff; }
.warehouse-edit-heading { padding: 20px 22px; border-bottom: 1px solid var(--line); background: #f8fbff; }
.warehouse-edit-heading-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.warehouse-edit-heading-copy h2,
.warehouse-edit-heading-copy p { margin: 0; }
.warehouse-edit-heading-copy h2 { font-size: 18px; }
.warehouse-edit-heading-copy p { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 650; }
.warehouse-edit-heading-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #cfe3fb; border-radius: 8px; color: #006495; background: #eaf4ff; }
.warehouse-edit-heading-icon .icon,
.warehouse-edit-heading-icon svg { width: 22px; height: 22px; }
.warehouse-edit-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); min-height: 360px; overflow: hidden; }
.warehouse-edit-details { display: grid; align-content: start; gap: 20px; padding: 22px; border-right: 1px solid var(--line); }
.warehouse-edit-section-label { color: var(--muted); font-size: 11px; font-weight: 850; }
.warehouse-management-copy { display: grid; gap: 3px; min-width: 0; }
.warehouse-management-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-management-copy small,
.warehouse-create-accounts-field > span,
.warehouse-edit-accounts-field > span,
.warehouse-assignment-check small { color: var(--muted); font-size: 11px; font-weight: 700; }
.warehouse-create-accounts-field,
.warehouse-edit-accounts-field { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; min-width: 0; padding: 22px; }
.warehouse-assignment-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 150px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.warehouse-assignment-check { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: #f8fafc; cursor: pointer; }
.warehouse-assignment-check:has(input:checked) { border-color: rgba(10, 132, 255, 0.34); background: #eff6ff; }
.warehouse-assignment-check.is-disabled { opacity: 0.52; cursor: not-allowed; }
.warehouse-assignment-check.is-filtered-out { display: none; }
.warehouse-assignment-check input { flex: 0 0 auto; margin-top: 2px; }
.warehouse-assignment-check > span { display: grid; gap: 2px; min-width: 0; }
.warehouse-assignment-check strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-edit-name { display: grid; gap: 7px; color: var(--text); font-size: 12px; font-weight: 800; }
.warehouse-edit-name input { min-height: 46px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; outline: 0; color: var(--text); background: #fff; font: inherit; font-weight: 750; }
.warehouse-edit-name input:focus { border-color: #006495; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12); }
.warehouse-edit-name small { color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.45; }
.warehouse-edit-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.warehouse-edit-facts > span { display: grid; gap: 5px; padding: 14px 0; }
.warehouse-edit-facts > span + span { padding-left: 16px; border-left: 1px solid var(--line); }
.warehouse-edit-facts small { color: var(--muted); font-size: 10px; font-weight: 750; }
.warehouse-edit-facts strong { font-size: 13px; }
.warehouse-edit-accounts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.warehouse-edit-accounts-head > div { display: grid; gap: 3px; }
.warehouse-edit-accounts-head strong { font-size: 14px; }
.warehouse-edit-accounts-head small { color: var(--muted); font-size: 11px; font-weight: 650; }
.warehouse-edit-accounts-head > span { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #cfe3fb; border-radius: 7px; color: #006495; background: #eef6ff; font-size: 10px; font-weight: 800; }
.warehouse-edit-account-search { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #f8fafc; }
.warehouse-edit-account-search .icon,
.warehouse-edit-account-search svg { width: 17px; height: 17px; }
.warehouse-edit-account-search input { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 12px; }
#warehouseEditAccounts { grid-template-columns: 1fr; align-content: start; max-height: 250px; padding: 0 4px 0 0; border: 0; border-radius: 0; background: transparent; }
#warehouseEditAccounts .warehouse-assignment-check { align-items: center; min-height: 54px; padding: 9px 10px; border-color: var(--line); background: #fff; }
#warehouseEditAccounts input[type="checkbox"] { flex: 0 0 18px; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; border-radius: 4px; accent-color: #006495; }
#warehouseEditAccounts .warehouse-assignment-check:has(input:checked) { border-color: #a8cdf7; background: #eff6ff; }
.warehouse-edit-no-accounts { display: grid; place-items: center; min-height: 96px; color: var(--muted); font-size: 12px; font-weight: 700; }
.warehouse-edit-actions { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); background: #f8fafc; }
.warehouse-edit-actions button { min-width: 110px; justify-content: center; }

@media (max-width: 760px) {
  .warehouse-settings-modal,
  .warehouse-edit-modal { width: calc(100vw - 16px); }
  .warehouse-settings-modal-card { padding: 14px; border-radius: 20px; }
  .warehouse-edit-modal-card { border-radius: 16px; }
  .warehouse-edit-modal-card { max-height: calc(100dvh - 16px); }
  .warehouse-edit-heading { padding: 14px; }
  .warehouse-edit-heading-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .warehouse-edit-heading-copy p { display: none; }
  .warehouse-edit-layout { grid-template-columns: 1fr; overflow: auto; }
  .warehouse-edit-details { gap: 15px; padding: 16px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .warehouse-edit-accounts-field { padding: 16px 14px; }
  #warehouseEditAccounts { max-height: 240px; }
  .warehouse-edit-actions { padding: 12px 14px; }
  .warehouse-edit-actions button { flex: 1 1 0; min-width: 0; }
  .warehouse-page-settings-button { display: inline-flex; width: 100%; justify-content: center; }
  .warehouse-assignment-checks { grid-template-columns: 1fr; }
  .warehouse-create-form { grid-template-columns: 1fr; }
  .warehouse-management-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .warehouse-management-row .secondary-button { width: auto; }
  .warehouse-management-copy small { white-space: normal; }
}

/* Mobile report layout keeps controls compact and data tables scrollable. */

@media (max-width: 760px) {
  body.sales-mode .mobile-app-dock {
    display: none !important;
  }

  body:not([data-mobile-view="purchaseEntry"]) .app-shell:not(.is-hidden) .mobile-app-dock {
    display: block !important;
  }

  body.mobile-sales-keyboard-open .mobile-app-dock {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.sales-mode .app-shell:not(.is-hidden) .mobile-app-dock,
  body.mobile-sales-checkout-open .app-shell:not(.is-hidden) .mobile-app-dock {
    display: none !important;
  }
}
#customersView.customer-workspace-view { display: flex; flex-direction: column; min-width: 0; }
body:not(.customers-mode) #customersView,
body.sales-mode #customersView,
body.mobile-home-mode #customersView{ display: none !important; }