/* Mobile app width refinement: final layer, mobile app shell only. */
@media (max-width: 768px) {
  /* The page-level scroll happens on html/body (see overflow-y:hidden notes
     below on .app-shell etc.). -webkit-overflow-scrolling:touch was previously
     only applied inside @media(display-mode:standalone), which doesn't match
     a normal mobile browser tab — only an installed/standalone PWA. Applying
     it here unconditionally for all mobile widths gives proper native-feeling
     momentum scrolling on iOS/WebKit regardless of how the site is opened. */
  html, body {
    -webkit-overflow-scrolling: touch !important;
  }

  .app-shell {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    /* overflow-x alone makes the UA auto-promote overflow-y to "auto" (CSS
       Overflow spec), turning this into its own nested scroll container —
       stacked with .workspace/.page-section below it doing the same, this
       creates competing scrollable ancestors that can make touch-scroll feel
       stuck on mobile WebViews. Page scrolling is meant to happen on body/html
       only, so pin this axis to hidden too instead of letting it go auto. */
    overflow-y: hidden !important;
    background: #eef0f8 !important;
  }

  .workspace {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    gap: 12px !important;
  }

  html.native-app-mode .workspace,
  html.pwa-mode .workspace {
    padding: 0 0 calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important; /* see .app-shell above — avoids a nested scroll container */
  }

  html.native-app-mode .page-section,
  html.pwa-mode .page-section {
    padding: 10px !important;
  }

  .page-section > *,
  .zoho-module,
  .content-grid,
  .split-layout,
  .report-grid,
  .setup-layout,
  .module-list,
  .invoice-record-shell,
  .pos-shell {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-section .panel,
  .page-section .metric-card,
  .page-section .data-table-wrap,
  .page-section .table-shell,
  .page-section .report-table-shell,
  .page-section .module-summary-tile,
  .page-section .kpi-chip,
  .dashboard-setup-panel,
  .dashboard-empty-guide,
  .bk-reconcile-card,
  .bk-accounts-card,
  .bk-active-section {
    margin-inline: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.native-app-mode .page-section .panel,
  html.native-app-mode .page-section .metric-card,
  html.native-app-mode .page-section .data-table-wrap,
  html.native-app-mode .page-section .table-shell,
  html.native-app-mode .page-section .report-table-shell,
  html.native-app-mode .page-section .module-summary-tile,
  html.native-app-mode .page-section .kpi-chip,
  html.pwa-mode .page-section .panel,
  html.pwa-mode .page-section .metric-card,
  html.pwa-mode .page-section .data-table-wrap,
  html.pwa-mode .page-section .table-shell,
  html.pwa-mode .page-section .report-table-shell,
  html.pwa-mode .page-section .module-summary-tile,
  html.pwa-mode .page-section .kpi-chip {
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  html.native-app-mode .page-section .panel,
  html.pwa-mode .page-section .panel {
    padding: 16px !important;
  }

  .module-summary-row,
  .section-kpi-row,
  .metric-grid,
  .dash-kpi-grid,
  .dash-cfi-row,
  .zoho-summary-bar,
  .dashboard-focus-grid,
  .dashboard-focus-grid--single {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .dash-kpi-grid,
  .dash-cfi-row {
    display: grid !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dash-kpi-grid > div {
    padding: 16px !important;
  }

  .module-summary-row > *,
  .section-kpi-row > *,
  .metric-grid > *,
  .dash-kpi-grid > *,
  .dash-cfi-row > *,
  .zoho-summary-bar > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .list-controls,
  .module-toolbar,
  .section-header,
  .dash-header,
  .dash-header-actions,
  .module-actions,
  .inline-actions,
  .quick-links {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dash-header {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    overflow: hidden !important;
  }

  .dash-header-actions > * {
    min-width: 0 !important;
    white-space: normal !important;
  }

  html.native-app-mode .topbar,
  html.pwa-mode .topbar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 62px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
    background: linear-gradient(135deg, #0b3591 0%, #1a56db 100%) !important;
    box-shadow: 0 8px 24px rgba(11, 53, 145, 0.18) !important;
  }

  html.native-app-mode .topbar > div:first-of-type,
  html.pwa-mode .topbar > div:first-of-type {
    min-width: 0 !important;
  }

  html.native-app-mode .topbar h2,
  html.pwa-mode .topbar h2 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.native-app-mode .topbar-actions,
  html.pwa-mode .topbar-actions {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  html.native-app-mode .sidebar-toggle,
  html.native-app-mode .topbar-theme-toggle,
  html.native-app-mode .topbar-account-btn,
  html.pwa-mode .sidebar-toggle,
  html.pwa-mode .topbar-theme-toggle,
  html.pwa-mode .topbar-account-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  html.native-app-mode .mobile-bottom-nav,
  html.pwa-mode .mobile-bottom-nav {
    left: 50% !important;
    right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(calc(100% - 20px), 430px) !important;
    max-width: 430px !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 20px !important;
    padding: 6px 6px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18) !important;
  }

  html.native-app-mode .mobile-bottom-nav button,
  html.pwa-mode .mobile-bottom-nav button {
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: 10px !important;
  }

  html.native-app-mode .mobile-bottom-nav button.active,
  html.pwa-mode .mobile-bottom-nav button.active {
    background: var(--accent-soft) !important;
  }

  html.native-app-mode .ai-chat-fab,
  html.pwa-mode .ai-chat-fab {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .quote-create-panel.open,
  .bill-create-panel.open,
  .exp-create-panel.open,
  .customer-create-panel.open,
  .item-create-panel.open,
  .pmt-create-panel.open,
  .pmade-create-panel.open,
  .vc-create-panel.open,
  .re-create-panel.open,
  .coa-create-panel.open {
    background: #f4f6fb !important;
    overflow-x: hidden !important;
  }

  .quote-create-panel.open,
  .bill-create-panel.open,
  .exp-create-panel.open,
  .customer-create-panel.open,
  .pmt-create-panel.open,
  .pmade-create-panel.open,
  .vc-create-panel.open,
  .re-create-panel.open,
  .coa-create-panel.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 900 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .quote-create-panel.open .quote-form-title,
  .bill-create-panel.open .bill-form-header,
  .customer-create-panel.open .customer-form-title,
  .exp-create-panel.open .exp-form-title,
  .pmt-create-panel.open .pmt-form-title,
  .pmade-create-panel.open .pmade-form-title,
  .vc-create-panel.open .bill-form-header,
  .re-create-panel.open .rb-form-title,
  .coa-create-panel.open .coa-form-title {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  .quote-create-panel.open .quote-form-title,
  .bill-create-panel.open .bill-form-header,
  .customer-create-panel.open .customer-form-title,
  .exp-create-panel.open .exp-form-title,
  .pmt-create-panel.open .pmt-form-title,
  .pmade-create-panel.open .pmade-form-title,
  .vc-create-panel.open .bill-form-header,
  .re-create-panel.open .rb-form-title,
  .coa-create-panel.open .coa-form-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }

  .quote-create-panel.open .quote-form-title h3,
  .bill-create-panel.open .bill-form-title-row h3,
  .customer-create-panel.open .customer-form-title h3,
  .item-create-panel.open .item-modal-header h3,
  .exp-create-panel.open .exp-form-title h3,
  .pmt-create-panel.open .pmt-form-title h3,
  .pmade-create-panel.open .pmade-form-title h3,
  .vc-create-panel.open .bill-form-title-row h3,
  .re-create-panel.open .rb-form-title h3,
  .coa-create-panel.open .coa-form-title h3 {
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  .quote-zoho-form .quote-form-body,
  .bill-zoho-form .bill-form-body,
  .customer-zoho-form .customer-form-body,
  .item-modal-form .item-modal-body,
  .exp-create-panel .exp-form-body,
  .pmt-create-panel .pmt-form-body,
  .pmade-create-panel .pmade-form-body,
  .vc-create-panel .bill-form-body,
  .re-create-panel .rb-form-body,
  .coa-create-panel .coa-form-body {
    width: min(calc(100vw - 20px), 430px) !important;
    max-width: min(calc(100vw - 20px), 430px) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .customer-create-panel.open .customer-form-body {
    width: min(calc(100% - 28px), 430px) !important;
    max-width: min(calc(100% - 28px), 430px) !important;
  }

  .quote-zoho-form .quote-form-body,
  .bill-zoho-form .bill-form-body,
  .customer-zoho-form .customer-form-body,
  .item-modal-form .item-modal-body,
  .vc-create-panel .bill-form-body {
    padding: 12px 0 calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 14px !important;
  }

  .quote-zoho-form .quote-band,
  .quote-zoho-form .quote-spaced-grid,
  .quote-zoho-form .quote-details-grid,
  .quote-zoho-form .quote-item-table,
  .quote-zoho-form .quote-notes-grid,
  .quote-zoho-form .quote-terms-grid,
  .bill-zoho-form .bill-form-section,
  .bill-zoho-form .bill-details-grid,
  .bill-zoho-form .bill-table-controls,
  .bill-zoho-form .bill-item-section,
  .bill-zoho-form .bill-totals-section,
  .bill-zoho-form .bill-bottom-section,
  .customer-zoho-form .customer-main-fields,
  .customer-zoho-form .customer-tab-panel,
  .item-modal-form .item-main-grid,
  .item-modal-form .item-modal-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .quote-zoho-form .quote-band,
  .quote-zoho-form .quote-spaced-grid,
  .quote-zoho-form .quote-item-table,
  .quote-zoho-form .quote-notes-grid,
  .quote-zoho-form .quote-terms-grid,
  .bill-zoho-form .bill-form-section,
  .bill-zoho-form .bill-details-grid,
  .bill-zoho-form .bill-table-controls,
  .bill-zoho-form .bill-item-section,
  .bill-zoho-form .bill-totals-box,
  .bill-zoho-form .bill-bottom-section,
  .customer-zoho-form .customer-main-fields,
  .customer-zoho-form .customer-tab-panel,
  .item-modal-form .item-modal-section {
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
  }

  .quote-zoho-form .quote-band,
  .quote-zoho-form .quote-spaced-grid,
  .quote-zoho-form .quote-notes-grid,
  .quote-zoho-form .quote-terms-grid,
  .bill-zoho-form .bill-form-section,
  .bill-zoho-form .bill-details-grid,
  .bill-zoho-form .bill-table-controls,
  .bill-zoho-form .bill-bottom-section,
  .customer-zoho-form .customer-main-fields,
  .customer-zoho-form .customer-tab-panel,
  .item-modal-form .item-modal-section {
    padding: 14px !important;
  }

  .quote-zoho-form .quote-details-grid,
  .quote-zoho-form .quote-spaced-grid,
  .quote-zoho-form .quote-notes-grid,
  .quote-zoho-form .quote-terms-grid,
  .bill-zoho-form .bill-details-grid,
  .bill-zoho-form .bill-bottom-section,
  .customer-zoho-form .customer-main-fields,
  .customer-zoho-form .customer-address-grid,
  .item-modal-form .item-main-grid,
  .item-modal-form .item-form-columns {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .quote-zoho-form .quote-form-line,
  .bill-zoho-form .bill-form-line,
  .customer-zoho-form .customer-form-line,
  .item-modal-form .item-field-line {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px 0 !important;
    min-width: 0 !important;
  }

  .quote-zoho-form .quote-form-line label,
  .bill-zoho-form .bill-label,
  .customer-zoho-form .customer-form-line label,
  .customer-zoho-form .customer-line-label,
  .item-modal-form .item-field-line label,
  .item-modal-form .item-line-label {
    width: auto !important;
    min-width: 0 !important;
    color: #7b8aa8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .quote-zoho-form .quote-form-line input,
  .quote-zoho-form .quote-form-line select,
  .quote-zoho-form .quote-form-line textarea,
  .bill-zoho-form .bill-input,
  .bill-zoho-form .bill-select,
  .bill-zoho-form .bill-textarea,
  .customer-zoho-form .customer-form-line input,
  .customer-zoho-form .customer-form-line select,
  .customer-zoho-form .customer-form-line textarea,
  .customer-zoho-form .customer-address-grid input,
  .customer-zoho-form .customer-address-grid select,
  .customer-zoho-form .customer-address-grid textarea,
  .item-modal-form .item-field-line input,
  .item-modal-form .item-field-line select,
  .item-modal-form .item-field-line textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
  }

  .quote-zoho-form .quote-form-line textarea,
  .bill-zoho-form .bill-textarea,
  .customer-zoho-form .customer-form-line textarea,
  .customer-zoho-form .customer-address-grid textarea,
  .item-modal-form .item-field-line textarea {
    min-height: 86px !important;
    padding-block: 10px !important;
  }

  .quote-zoho-form .quote-customer-picker,
  .customer-zoho-form .customer-phone-row,
  .customer-zoho-form .customer-balance-row,
  .customer-zoho-form .customer-contact-row,
  .bill-zoho-form .bill-vendor-picker-wrap,
  .bill-zoho-form .po-vendor-picker {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .quote-zoho-form .quote-item-table,
  .bill-zoho-form .bill-item-section {
    padding: 14px !important;
    overflow: hidden !important;
  }

  .quote-zoho-form .quote-item-head,
  .bill-zoho-form .bill-item-header {
    min-height: 0 !important;
    padding: 0 0 12px !important;
    margin-bottom: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .quote-zoho-form .quote-item-head strong,
  .quote-zoho-form .line-item-copy strong,
  .bill-zoho-form .line-item-copy strong,
  .po-zoho-form .line-item-copy strong,
  .retainer-zoho-form .line-item-copy strong,
  .bill-zoho-form .bill-item-title {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .quote-zoho-form .line-item-copy span,
  .bill-zoho-form .line-item-copy span,
  .po-zoho-form .line-item-copy span,
  .retainer-zoho-form .line-item-copy span {
    font-size: 11px !important;
  }

  .quote-zoho-form .quote-item-head button,
  .bill-zoho-form .bill-bulk-actions-btn {
    display: none !important;
  }

  .quote-zoho-form .quote-table-shell,
  .bill-zoho-form .bill-item-table {
    width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .quote-zoho-form .quote-table-shell table,
  .quote-zoho-form .quote-table-shell thead,
  .quote-zoho-form .quote-table-shell tbody,
  .quote-zoho-form .quote-table-shell tr,
  .quote-zoho-form .quote-table-shell td,
  .bill-zoho-form .bill-item-table,
  .bill-zoho-form .bill-item-table thead,
  .bill-zoho-form .bill-item-table tbody,
  .bill-zoho-form .bill-item-table tr,
  .bill-zoho-form .bill-item-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .quote-zoho-form .quote-table-shell table,
  .bill-zoho-form .bill-item-table {
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .quote-zoho-form .quote-table-shell thead,
  .bill-zoho-form .bill-item-table thead {
    display: none !important;
  }

  .quote-zoho-form .quote-table-shell tbody,
  .bill-zoho-form .bill-lines-body {
    display: grid !important;
    gap: 12px !important;
  }

  .quote-zoho-form .quote-table-shell tr.quote-line-row,
  .bill-zoho-form .bill-item-table tr.bill-line-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 44px 12px 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  .quote-zoho-form .quote-table-shell tr.quote-line-row::before,
  .bill-zoho-form .bill-item-table tr.bill-line-row::before {
    content: "Line" !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 21px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #eaf1ff !important;
    color: var(--accent) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .quote-zoho-form .quote-table-shell tr.quote-line-row.is-hidden,
  .bill-zoho-form .bill-item-table tr.bill-line-row.is-hidden {
    display: none !important;
  }

  .quote-zoho-form .quote-table-shell td,
  .bill-zoho-form .bill-item-table td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(1),
  .quote-zoho-form .quote-table-shell td:nth-child(5),
  .quote-zoho-form .quote-table-shell td:nth-child(6),
  .bill-zoho-form .bill-item-table .bill-item-cell,
  .bill-zoho-form .bill-item-table .bill-account-cell,
  .bill-zoho-form .bill-item-table .bill-vat-cell,
  .bill-zoho-form .bill-item-table .bill-amount-cell {
    grid-column: 1 / -1 !important;
  }

  .quote-zoho-form .quote-table-shell td::before,
  .bill-zoho-form .bill-item-table td::before {
    display: block !important;
    margin-bottom: 5px !important;
    color: #7b8aa8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(1)::before { content: "Item & Description"; }
  .quote-zoho-form .quote-table-shell td:nth-child(2)::before { content: "Qty"; }
  .quote-zoho-form .quote-table-shell td:nth-child(3)::before { content: "Rate"; }
  .quote-zoho-form .quote-table-shell td:nth-child(4)::before { content: "Discount"; }
  .quote-zoho-form .quote-table-shell td:nth-child(5)::before { content: "Tax"; }
  .quote-zoho-form .quote-table-shell td:nth-child(6)::before { content: "Amount"; }
  .bill-zoho-form .bill-item-table .bill-item-cell::before { content: "Item & Description"; }
  .bill-zoho-form .bill-item-table .bill-account-cell::before { content: "Account"; }
  .bill-zoho-form .bill-item-table .bill-qty-cell::before { content: "Qty"; }
  .bill-zoho-form .bill-item-table .bill-rate-cell::before { content: "Rate"; }
  .bill-zoho-form .bill-item-table .bill-vat-cell::before { content: "Tax"; }
  .bill-zoho-form .bill-item-table .bill-amount-cell::before { content: "Amount"; }

  .quote-zoho-form .quote-table-shell input,
  .quote-zoho-form .quote-table-shell select,
  .bill-zoho-form .bill-item-table input,
  .bill-zoho-form .bill-item-table select {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(2) input,
  .quote-zoho-form .quote-table-shell td:nth-child(3) input,
  .bill-zoho-form .bill-qty-cell input,
  .bill-zoho-form .bill-rate-cell input {
    text-align: right !important;
  }

  .quote-zoho-form .quote-discount-input {
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  .quote-zoho-form .quote-discount-input span {
    min-height: 46px !important;
    border-color: #d9e2f2 !important;
    border-radius: 0 12px 12px 0 !important;
    background: #eef3ff !important;
  }

  .quote-zoho-form .quote-discount-input input {
    border-radius: 12px 0 0 12px !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(6),
  .bill-zoho-form .bill-amount-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(6)::before,
  .bill-zoho-form .bill-amount-cell::before {
    margin: 0 !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(6) strong,
  .bill-zoho-form .bill-amount-cell span {
    padding: 0 !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .quote-zoho-form .quote-line-actions,
  .bill-zoho-form .bill-add-row-wrap {
    padding: 12px 0 0 !important;
    width: 100% !important;
  }

  .quote-zoho-form .quote-line-actions .ghost-button,
  .bill-zoho-form .bill-add-row-btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    border: 1px dashed rgba(32, 96, 232, 0.42) !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
    color: var(--accent) !important;
  }

  .quote-zoho-form .quote-line-actions .ghost-button + .ghost-button {
    display: none !important;
  }

  .quote-zoho-form .quote-total-card,
  .bill-zoho-form .bill-totals-box {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .quote-zoho-form .quote-form-actions,
  .bill-zoho-form .bill-form-actions,
  .customer-zoho-form .customer-form-actions,
  .item-modal-form .item-modal-actions,
  .exp-create-panel .exp-form-actions,
  .pmt-create-panel .pmt-form-actions,
  .pmade-create-panel .pmade-form-actions,
  .vc-create-panel .bill-form-actions,
  .re-create-panel .rb-form-actions,
  .coa-create-panel .coa-form-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.10) !important;
  }

  .quote-zoho-form .quote-form-actions > *,
  .bill-zoho-form .bill-form-actions > *,
  .customer-zoho-form .customer-form-actions > *,
  .item-modal-form .item-modal-actions > *,
  .exp-create-panel .exp-form-actions > *,
  .pmt-create-panel .pmt-form-actions > *,
  .pmade-create-panel .pmade-form-actions > *,
  .vc-create-panel .bill-form-actions > *,
  .re-create-panel .rb-form-actions > *,
  .coa-create-panel .coa-form-actions > * {
    width: 100% !important;
    justify-content: center !important;
  }

  .retainer-zoho-form .retainer-item-table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
  }

  .retainer-zoho-form .retainer-table-shell {
    width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .retainer-zoho-form .retainer-table-shell table,
  .retainer-zoho-form .retainer-table-shell thead,
  .retainer-zoho-form .retainer-table-shell tbody,
  .retainer-zoho-form .retainer-table-shell tr,
  .retainer-zoho-form .retainer-table-shell td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .retainer-zoho-form .retainer-table-shell table {
    min-width: 0 !important;
  }

  .retainer-zoho-form .retainer-table-shell thead {
    display: none !important;
  }

  .retainer-zoho-form .retainer-table-shell tbody {
    display: grid !important;
    gap: 12px !important;
  }

  .retainer-zoho-form .retainer-table-shell tr.retainer-line-row {
    position: relative !important;
    display: grid !important;
    gap: 10px !important;
    padding: 44px 12px 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
  }

  .retainer-zoho-form .retainer-table-shell tr.retainer-line-row::before {
    content: "Line" !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 21px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #eaf1ff !important;
    color: var(--accent) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .retainer-zoho-form .retainer-table-shell tr.retainer-line-row.is-hidden {
    display: none !important;
  }

  .retainer-zoho-form .retainer-table-shell td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .retainer-zoho-form .retainer-table-shell td::before {
    display: block !important;
    margin-bottom: 5px !important;
    color: #7b8aa8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .retainer-zoho-form .retainer-table-shell td:nth-child(1)::before { content: "Description"; }
  .retainer-zoho-form .retainer-table-shell td:nth-child(2)::before { content: "Amount"; }

  .retainer-zoho-form .retainer-table-shell input {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }

  .retainer-zoho-form .retainer-table-shell td:nth-child(2) input {
    text-align: right !important;
  }

  .retainer-zoho-form .retainer-line-footer {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .retainer-zoho-form .retainer-line-footer .ghost-button {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    border: 1px dashed rgba(32, 96, 232, 0.42) !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
    color: var(--accent) !important;
  }

  .retainer-zoho-form .retainer-total-line {
    min-height: 46px !important;
    padding: 12px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  .line-editor {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    border-radius: 18px !important;
    background: #fff !important;
    padding: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
  }

  .line-editor-head {
    display: none !important;
  }

  .line-editor-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 44px 12px 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
  }

  .line-editor-row + .line-editor-row {
    margin-top: 12px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
  }

  .line-editor-row::before {
    content: "Line item" !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #eaf1ff !important;
    color: var(--accent) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .line-editor-row > :nth-child(1),
  .line-editor-row > :nth-child(2),
  .line-editor-row > :nth-child(6) {
    grid-column: 1 / -1 !important;
  }

  .line-editor input,
  .line-editor select {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }

  .po-create-panel.open {
    background: #f4f6fb !important;
  }

  .po-create-panel.open .po-form-title,
  .po-create-panel.open .quote-form-title {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  .po-create-panel.open .po-title-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .po-create-panel.open .po-form-title h3 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .po-zoho-form .quote-form-body {
    width: min(calc(100vw - 20px), 430px) !important;
    max-width: min(calc(100vw - 20px), 430px) !important;
    margin: 0 auto !important;
    padding: 12px 0 calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 14px !important;
    overflow-x: hidden !important;
  }

  .po-zoho-form .quote-band,
  .po-zoho-form .po-details-grid,
  .po-zoho-form .po-bottom-grid,
  .po-zoho-form .quote-terms-grid,
  .po-zoho-form .po-item-table,
  .po-zoho-form .po-attach-box,
  .po-zoho-form .po-custom-fields-tip {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .po-zoho-form .quote-band,
  .po-zoho-form .po-details-grid,
  .po-zoho-form .po-bottom-grid,
  .po-zoho-form .quote-terms-grid,
  .po-zoho-form .po-item-table {
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
  }

  .po-zoho-form .quote-band {
    padding: 16px !important;
  }

  .po-zoho-form .po-details-grid,
  .po-zoho-form .po-bottom-grid,
  .po-zoho-form .quote-terms-grid {
    padding: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
  }

  .po-zoho-form .po-warehouse-bar {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  }

  .po-zoho-form .po-item-table {
    padding: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
  }

  .po-zoho-form .po-item-head {
    padding: 0 0 12px !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    margin-bottom: 12px !important;
  }

  .po-zoho-form .po-table-shell {
    width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .po-zoho-form .po-table-shell table,
  .po-zoho-form .po-table-shell thead,
  .po-zoho-form .po-table-shell tbody,
  .po-zoho-form .po-table-shell tr,
  .po-zoho-form .po-table-shell td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .po-zoho-form .po-table-shell table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .po-zoho-form .po-table-shell thead {
    display: none !important;
  }

  .po-zoho-form .po-table-shell tbody {
    display: grid !important;
    gap: 12px !important;
  }

  .po-zoho-form .po-table-shell tr.po-line-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 44px 12px 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  .po-zoho-form .po-table-shell tr.po-line-row.is-hidden {
    display: none !important;
  }

  .po-zoho-form .po-table-shell .po-row-num {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #eaf1ff !important;
    color: var(--accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .po-zoho-form .po-item-cell,
  .po-zoho-form .po-account-cell,
  .po-zoho-form .po-vat-cell,
  .po-zoho-form .po-amount-cell {
    grid-column: 1 / -1 !important;
  }

  .po-zoho-form .po-item-cell,
  .po-zoho-form .po-account-cell,
  .po-zoho-form .po-num-cell,
  .po-zoho-form .po-vat-cell,
  .po-zoho-form .po-amount-cell {
    padding: 0 !important;
  }

  .po-zoho-form .po-item-cell::before,
  .po-zoho-form .po-account-cell::before,
  .po-zoho-form .po-num-cell:nth-of-type(4)::before,
  .po-zoho-form .po-num-cell:nth-of-type(5)::before,
  .po-zoho-form .po-vat-cell::before,
  .po-zoho-form .po-amount-cell::before {
    display: block !important;
    margin-bottom: 5px !important;
    color: #7b8aa8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  .po-zoho-form .po-item-cell::before { content: "Item & Description"; }
  .po-zoho-form .po-account-cell::before { content: "Account"; }
  .po-zoho-form .po-num-cell:nth-of-type(4)::before { content: "Qty"; }
  .po-zoho-form .po-num-cell:nth-of-type(5)::before { content: "Rate"; }
  .po-zoho-form .po-vat-cell::before { content: "Tax"; }
  .po-zoho-form .po-amount-cell::before { content: "Amount"; }

  .po-zoho-form .po-item-text,
  .po-zoho-form .po-account-select,
  .po-zoho-form .po-qty-input,
  .po-zoho-form .po-rate-input,
  .po-zoho-form .po-vat-select {
    height: 46px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
  }

  .po-zoho-form .po-item-text,
  .po-zoho-form .po-account-select,
  .po-zoho-form .po-vat-select {
    text-align: left !important;
  }

  .po-zoho-form .po-qty-input,
  .po-zoho-form .po-rate-input {
    text-align: right !important;
  }

  .po-zoho-form .po-amount-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    border: 1px solid #d9e2f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  .po-zoho-form .po-amount-cell::before {
    margin: 0 !important;
  }

  .po-zoho-form .po-amount-value {
    padding: 0 !important;
    font-size: 15px !important;
  }

  .po-zoho-form .po-table-shell .po-del-cell {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .po-zoho-form .po-del-row {
    opacity: 1 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background: #fff !important;
    border: 1px solid #d9e2f2 !important;
  }

  .po-zoho-form .po-line-actions {
    padding: 12px 0 0 !important;
  }

  .po-zoho-form .po-add-row-btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    border: 1px dashed rgba(32, 96, 232, 0.42) !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
  }

  .po-zoho-form .quote-form-actions,
  .po-form-actions {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.10) !important;
  }
}

/* Phone app polish: transaction line items as compact native cards */
@media (max-width: 768px) {
  .quote-create-panel.open .quote-form-body,
  .bill-create-panel.open .bill-form-body,
  .vc-create-panel.open .bill-form-body,
  .retainer-create-panel.open .quote-form-body,
  .so-create-panel.open .quote-form-body,
  .sr-create-panel.open .quote-form-body,
  .ri-create-panel.open .quote-form-body,
  .cn-create-panel.open .quote-form-body,
  .po-create-panel.open .quote-form-body {
    width: min(calc(100vw - 48px), 430px) !important;
    max-width: min(calc(100vw - 48px), 430px) !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .quote-create-panel.open .quote-form-body > *,
  .bill-create-panel.open .bill-form-body > *,
  .vc-create-panel.open .bill-form-body > *,
  .po-create-panel.open .quote-form-body > * {
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  .quote-zoho-form .quote-band,
  .quote-zoho-form .quote-details-grid,
  .quote-zoho-form .quote-spaced-grid,
  .quote-zoho-form .quote-notes-grid,
  .quote-zoho-form .quote-terms-grid,
  .bill-zoho-form .bill-form-section,
  .bill-zoho-form .bill-details-grid,
  .bill-zoho-form .bill-table-controls,
  .bill-zoho-form .bill-totals-section,
  .bill-zoho-form .bill-bottom-section,
  .po-zoho-form .quote-band,
  .po-zoho-form .po-details-grid,
  .po-zoho-form .po-bottom-grid,
  .po-zoho-form .quote-terms-grid {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .quote-zoho-form .quote-item-table,
  .bill-zoho-form .bill-item-section,
  .retainer-zoho-form .retainer-item-table,
  .po-zoho-form .po-item-table {
    border-radius: 16px !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
  }

  .quote-zoho-form .quote-item-head,
  .bill-zoho-form .bill-item-header,
  .retainer-zoho-form .retainer-item-head,
  .po-zoho-form .po-item-head {
    align-items: center !important;
    min-height: 0 !important;
    padding: 0 0 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: transparent !important;
  }

  .quote-zoho-form .line-item-heading,
  .bill-zoho-form .line-item-heading,
  .retainer-zoho-form .line-item-heading,
  .po-zoho-form .line-item-heading {
    gap: 9px !important;
  }

  .quote-zoho-form .line-item-icon,
  .bill-zoho-form .line-item-icon,
  .retainer-zoho-form .line-item-icon,
  .po-zoho-form .line-item-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .quote-zoho-form .line-item-copy strong,
  .bill-zoho-form .line-item-copy strong,
  .retainer-zoho-form .line-item-copy strong,
  .po-zoho-form .line-item-copy strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .quote-zoho-form .line-item-copy span,
  .bill-zoho-form .line-item-copy span,
  .retainer-zoho-form .line-item-copy span,
  .po-zoho-form .line-item-copy span {
    font-size: 11.5px !important;
    color: #64748b !important;
  }

  .quote-zoho-form .quote-table-shell tbody,
  .bill-zoho-form .bill-lines-body,
  .retainer-zoho-form .retainer-table-shell tbody,
  .po-zoho-form .po-table-shell tbody {
    counter-reset: lineItem !important;
    gap: 10px !important;
  }

  .quote-zoho-form .quote-table-shell tr.quote-line-row,
  .bill-zoho-form .bill-item-table tr.bill-line-row,
  .retainer-zoho-form .retainer-table-shell tr.retainer-line-row,
  .po-zoho-form .po-table-shell tr.po-line-row {
    counter-increment: lineItem !important;
    border-radius: 14px !important;
    border: 1px solid #dce6f3 !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 18px rgba(15, 23, 42, 0.05) !important;
    padding: 46px 10px 10px !important;
  }

  .quote-zoho-form .quote-table-shell tr.quote-line-row::before,
  .bill-zoho-form .bill-item-table tr.bill-line-row::before,
  .retainer-zoho-form .retainer-table-shell tr.retainer-line-row::before {
    content: "Line " counter(lineItem) !important;
    top: 10px !important;
    left: 10px !important;
    min-height: 24px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(37, 99, 235, 0.14) !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  .po-zoho-form .po-table-shell .po-row-num {
    top: 10px !important;
    left: 10px !important;
    min-height: 24px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(37, 99, 235, 0.14) !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  .po-zoho-form .po-table-shell .po-row-num::before {
    content: "Line ";
  }

  .quote-zoho-form .quote-table-shell td::before,
  .bill-zoho-form .bill-item-table td::before,
  .retainer-zoho-form .retainer-table-shell td::before,
  .po-zoho-form .po-item-cell::before,
  .po-zoho-form .po-account-cell::before,
  .po-zoho-form .po-num-cell:nth-of-type(4)::before,
  .po-zoho-form .po-num-cell:nth-of-type(5)::before,
  .po-zoho-form .po-vat-cell::before,
  .po-zoho-form .po-amount-cell::before {
    margin-bottom: 6px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  .quote-zoho-form .quote-table-shell input,
  .quote-zoho-form .quote-table-shell select,
  .bill-zoho-form .bill-item-table input,
  .bill-zoho-form .bill-item-table select,
  .retainer-zoho-form .retainer-table-shell input,
  .po-zoho-form .po-item-text,
  .po-zoho-form .po-account-select,
  .po-zoho-form .po-qty-input,
  .po-zoho-form .po-rate-input,
  .po-zoho-form .po-vat-select {
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    border-color: #d7e1ef !important;
    background: #fff !important;
    font-size: 14px !important;
  }

  .bill-zoho-form .bill-item-inner {
    gap: 9px !important;
  }

  .bill-zoho-form .bill-item-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(6),
  .bill-zoho-form .bill-amount-cell,
  .po-zoho-form .po-amount-cell,
  .retainer-zoho-form .retainer-total-line {
    min-height: 48px !important;
    border-radius: 12px !important;
    border-color: #cfe0f7 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%) !important;
  }

  .quote-zoho-form .quote-table-shell td:nth-child(6) strong,
  .bill-zoho-form .bill-amount-cell span,
  .po-zoho-form .po-amount-value {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  .quote-zoho-form .quote-line-actions,
  .bill-zoho-form .bill-add-row-wrap,
  .po-zoho-form .po-line-actions,
  .retainer-zoho-form .retainer-line-footer {
    padding-top: 12px !important;
    background: transparent !important;
    border-top: 0 !important;
  }

  .quote-zoho-form .quote-line-actions .ghost-button,
  .bill-zoho-form .bill-add-row-btn,
  .po-zoho-form .po-add-row-btn,
  .retainer-zoho-form .retainer-line-footer .ghost-button {
    min-height: 48px !important;
    border-radius: 12px !important;
    border-color: rgba(37, 99, 235, 0.34) !important;
    background: #f8fbff !important;
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  .quote-zoho-form .quote-table-shell tr.quote-line-row,
  .bill-zoho-form .bill-item-table tr.bill-line-row,
  .po-zoho-form .po-table-shell tr.po-line-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding-inline: 9px !important;
  }

  .quote-zoho-form .quote-item-table,
  .bill-zoho-form .bill-item-section,
  .retainer-zoho-form .retainer-item-table,
  .po-zoho-form .po-item-table {
    padding: 10px !important;
  }
}

@media (max-width: 380px) {
  html.native-app-mode .page-section,
  html.pwa-mode .page-section {
    padding-inline: 8px !important;
  }

  html.native-app-mode .page-section .panel,
  html.pwa-mode .page-section .panel {
    padding: 14px !important;
  }

  html.native-app-mode .mobile-bottom-nav,
  html.pwa-mode .mobile-bottom-nav {
    width: calc(100% - 16px) !important;
  }

  .dash-kpi-grid,
  .dash-cfi-row {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME — Professional SaaS  (Linear / Vercel / Raycast inspired)
   Elevation tiers: body #07090f → surface #0c1120 → raised #101826 → overlay #0e1626
   Accent: royal blue #4d8af5  |  Success: emerald #2dd480
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Token layer ───────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #07090f;
  --surface:      #0c1120;
  --surface-soft: #101826;
  --surface-tint: #0d1f16;
  --line:         #18243a;
  --line-strong:  #223050;
  --ink:          #dce8f8;
  --ink2:         #7890aa;
  --ink3:         #485e74;
  --muted:        #7890aa;
  --accent:       #4d8af5;
  --accent-strong:#84b4ff;
  --accent-soft:  #091a36;
  --teal:         #2dd480;
  --success:      #2dd480;
  --success-soft: #0a2016;
  --warning:      #f0b429;
  --warning-soft: #251c08;
  --danger:       #f56565;
  --danger-soft:  #280e0e;
  --blue:         #4d8af5;
  --blue-soft:    #091a36;
  --shadow:       0 24px 60px rgba(0,0,0,0.6);
  --shadow-sm:    0 8px 24px rgba(0,0,0,0.4);
}

/* ── 2. Shell background — flat deep navy, no blobs ──────────────── */
[data-theme="dark"],
[data-theme="dark"] body {
  background: #07090f;
  color: var(--ink);
}

[data-theme="dark"] .app-shell {
  grid-template-columns: 268px minmax(0, 1fr);
  background: #07090f;
}

[data-theme="dark"] .workspace {
  background: #07090f;
}

/* ── 3. Sidebar ───────────────────────────────────────────────────── */
[data-theme="dark"] .sidebar {
  background: #080b16 !important;
  border-right: 1px solid #14203a !important;
  box-shadow: none !important;
}

[data-theme="dark"] .brand-block {
  padding: 10px 10px 16px;
  border-bottom-color: #14203a !important;
}

[data-theme="dark"] .brand-block h1 {
  color: #eaf2ff;
}


[data-theme="dark"] .nav-group + .nav-group {
  border-top-color: #14203a !important;
}

[data-theme="dark"] .nav-group-label,
[data-theme="dark"] .sidebar .eyebrow,
[data-theme="dark"] .sidebar-account-label {
  color: #344d66 !important;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

[data-theme="dark"] .nav-item {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #5e7894 !important;
}

[data-theme="dark"] .nav-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #b4cce8 !important;
}

[data-theme="dark"] .nav-item.active {
  background: rgba(77,138,245,0.1) !important;
  border-color: rgba(77,138,245,0.18) !important;
  color: #a4c4f8 !important;
  box-shadow: inset 3px 0 0 #4d8af5 !important;
}

[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .sidebar-account {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid #14203a !important;
}

[data-theme="dark"] #company-switcher-btn {
  background: rgba(77,138,245,0.09) !important;
  border-color: rgba(77,138,245,0.24) !important;
  color: #a4c4f8 !important;
}

/* ── 4. Topbar — true frosted glass ──────────────────────────────── */
[data-theme="dark"] .topbar {
  width: auto !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  background: rgba(7,9,18,0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.44) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

[data-theme="dark"] .topbar h2 {
  color: #eaf2ff !important;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

[data-theme="dark"] .eyebrow,
[data-theme="dark"] .topbar .eyebrow {
  color: #3a5268 !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ── 5. Inputs ────────────────────────────────────────────────────── */
[data-theme="dark"] .topbar-search input,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #060810 !important;
  border-color: #18243a !important;
  color: #dce8f8 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.36) !important;
}

[data-theme="dark"] .topbar-search input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #344d66 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .topbar-search input:focus {
  border-color: #4d8af5 !important;
  background: #07101e !important;
  box-shadow: 0 0 0 3px rgba(77,138,245,0.16) !important;
}

/* ── 6. Buttons ───────────────────────────────────────────────────── */
[data-theme="dark"] .topbar-theme-toggle,
[data-theme="dark"] .sidebar-toggle,
[data-theme="dark"] .topbar-account-btn,
[data-theme="dark"] .ghost-button,
[data-theme="dark"] .table-action,
[data-theme="dark"] .dash-quick-btn,
[data-theme="dark"] .zoho-filter,
[data-theme="dark"] .zoho-segment {
  background: #0b1020 !important;
  border: 1px solid #18243a !important;
  color: #7890aa !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .topbar-theme-toggle:hover,
[data-theme="dark"] .sidebar-toggle:hover,
[data-theme="dark"] .topbar-account-btn:hover,
[data-theme="dark"] .ghost-button:hover,
[data-theme="dark"] .table-action:hover,
[data-theme="dark"] .dash-quick-btn:hover {
  background: #0e162a !important;
  border-color: #4d8af5 !important;
  color: #84b4ff !important;
}

[data-theme="dark"] .primary-button,
[data-theme="dark"] .dash-header-actions .primary-button {
  background: linear-gradient(170deg, #2dd480 0%, #1ab865 100%) !important;
  border: 1px solid rgba(45,212,128,0.28) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(26,184,101,0.32) !important;
  letter-spacing: -.01em;
}

[data-theme="dark"] .primary-button:hover,
[data-theme="dark"] .dash-header-actions .primary-button:hover {
  background: linear-gradient(170deg, #3de88e 0%, #22cc72 100%) !important;
  box-shadow: 0 0 28px rgba(45,212,128,0.2), 0 4px 18px rgba(26,184,101,0.32) !important;
}

[data-theme="dark"] .topbar-logout,
[data-theme="dark"] .danger-button {
  background: rgba(245,101,101,0.07) !important;
  border-color: rgba(245,101,101,0.18) !important;
  color: #f56565 !important;
}

[data-theme="dark"] .topbar-logout:hover,
[data-theme="dark"] .danger-button:hover {
  background: rgba(245,101,101,0.13) !important;
  border-color: rgba(245,101,101,0.36) !important;
}

/* ── 7. Cards & panels — clean single-surface elevation ──────────── */
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .zoho-widget,
[data-theme="dark"] .dashboard-setup-panel,
[data-theme="dark"] .dashboard-empty-guide,
[data-theme="dark"] .dash-cfi-card,
[data-theme="dark"] .module-toolbar,
[data-theme="dark"] .quick-create-tile,
[data-theme="dark"] .status-tile,
[data-theme="dark"] .reports-home-card,
[data-theme="dark"] .bk-active-section,
[data-theme="dark"] .bk-accounts-card,
[data-theme="dark"] .bk-reconcile-card,
[data-theme="dark"] .stg-panel,
[data-theme="dark"] .stg-card {
  background: #0c1120 !important;
  border-color: #18243a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 20px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .panel:hover,
[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .zoho-widget:hover,
[data-theme="dark"] .quick-create-tile:hover,
[data-theme="dark"] .status-tile:hover {
  border-color: rgba(77,138,245,0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 28px rgba(0,0,0,0.36), 0 0 0 1px rgba(77,138,245,0.1) !important;
}

[data-theme="dark"] .section-header h3,
[data-theme="dark"] .section-header h4,
[data-theme="dark"] .module-toolbar h3,
[data-theme="dark"] .zoho-widget-head h3,
[data-theme="dark"] .dashboard-setup-head h3,
[data-theme="dark"] .dashboard-empty-guide h3,
[data-theme="dark"] .stg-content-title,
[data-theme="dark"] .stg-card-header {
  color: #e4f0ff !important;
}

[data-theme="dark"] .section-header p,
[data-theme="dark"] .muted-copy,
[data-theme="dark"] .zoho-widget-sub,
[data-theme="dark"] .dashboard-empty-guide p,
[data-theme="dark"] .stg-content-desc,
[data-theme="dark"] .stg-hint {
  color: #7890aa !important;
}

/* ── 8. Dashboard hero header ─────────────────────────────────────── */
[data-theme="dark"] .dash-header {
  background:
    linear-gradient(135deg, rgba(77,138,245,0.1) 0%, transparent 46%),
    linear-gradient(225deg, rgba(45,212,128,0.05) 0%, transparent 36%),
    #0c1626 !important;
  border: 1px solid #1c3054 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 36px rgba(0,0,0,0.32) !important;
}

[data-theme="dark"] .dash-greeting {
  color: #92aec8 !important;
}

[data-theme="dark"] .dash-period-pill {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #92aec8 !important;
}

[data-theme="dark"] .dash-profit-pill--pos {
  background: rgba(45,212,128,0.1) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(45,212,128,0.18) !important;
}

[data-theme="dark"] .dash-profit-pill--neg {
  background: rgba(245,101,101,0.09) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(245,101,101,0.16) !important;
}

/* ── 9. KPI / summary tiles ───────────────────────────────────────── */
[data-theme="dark"] .zoho-summary-tile,
[data-theme="dark"] .inv-kpi-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .zoho-summary-tile--blue,
[data-theme="dark"] .inv-kpi-card--blue {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: inset 3px 0 0 #3b82f6 !important;
}
[data-theme="dark"] .inv-kpi-card--blue .inv-kpi-icon { background: #1e3a5f !important; color: #93c5fd !important; }

[data-theme="dark"] .zoho-summary-tile--orange,
[data-theme="dark"] .inv-kpi-card--amber {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: inset 3px 0 0 #d97706 !important;
}
[data-theme="dark"] .inv-kpi-card--amber .inv-kpi-icon { background: #451a03 !important; color: #fcd34d !important; }

[data-theme="dark"] .zoho-summary-tile--green,
[data-theme="dark"] .inv-kpi-card--green {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: inset 3px 0 0 #16a34a !important;
}
[data-theme="dark"] .inv-kpi-card--green .inv-kpi-icon { background: #14532d !important; color: #86efac !important; }

[data-theme="dark"] .inv-kpi-card--red {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: inset 3px 0 0 #dc2626 !important;
}
[data-theme="dark"] .inv-kpi-card--red .inv-kpi-icon { background: #450a0a !important; color: #fca5a5 !important; }

[data-theme="dark"] .zoho-summary-label,
[data-theme="dark"] .dash-cfi-label,
[data-theme="dark"] .metric-label,
[data-theme="dark"] .inv-kpi-label {
  color: #485e74 !important;
  font-weight: 600;
}

[data-theme="dark"] .zoho-summary-value,
[data-theme="dark"] .dash-cfi-value,
[data-theme="dark"] .metric-card strong,
[data-theme="dark"] .inv-kpi-value {
  color: #e4f0ff !important;
}

/* ── Email & WhatsApp Center ─────────────────────────────────────────────── */
.ec-center-panel {
  padding: 0;
  overflow: hidden;
}

.ec-center-panel .inv-list-header {
  align-items: center;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.ec-center-panel .inv-list-actions {
  margin-left: auto;
}

.ec-center-panel .inv-kpi-grid {
  padding: 20px 24px;
}

.ec-center-panel .inv-kpi-card {
  min-width: 0;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
  box-shadow: none;
}

.ec-center-panel .inv-kpi-card:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
}

.ec-center-panel .inv-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.ec-center-panel .inv-kpi-value {
  font-size: 20px;
}

.ec-tab-bar {
  gap: 4px;
  padding: 0 24px;
  background: var(--surface-soft);
}

.ec-tab-bar .pos-tab {
  min-height: 46px;
  padding: 0 18px;
}

.ec-invoice-list {
  display: grid;
  gap: 10px;
  padding: 16px 24px 24px;
}

.ec-invoice-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.ec-invoice-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 5px 18px rgba(16, 24, 40, 0.07);
}

.ec-document-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--accent);
}

.ec-invoice-details {
  min-width: 0;
}

.ec-invoice-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.ec-invoice-heading strong {
  color: var(--ink);
  font-size: 14px;
}

.ec-invoice-heading span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 5px;
  color: var(--ink2);
  font-size: 12px;
}

.ec-contact-line > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ec-contact-line .ec-contact-missing {
  color: var(--ink3);
}

.ec-invoice-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--ink3);
  font-size: 11px;
}

.ec-invoice-meta > span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.ec-delivery-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 8px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.ec-delivery-status--sent {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.ec-delivery-status--prepared {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.ec-invoice-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.ec-balance {
  min-width: 112px;
  text-align: right;
}

.ec-balance span,
.ec-recipient-amount span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.ec-balance strong,
.ec-recipient-amount strong {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ec-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.ec-card-actions button,
.ec-center-panel .inv-list-actions button,
.ec-compose-footer button,
.ec-bulk-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
  white-space: nowrap;
}

.ec-whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid #0f8f55;
  border-radius: 6px;
  background: #0f8f55;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ec-whatsapp-button:hover {
  border-color: #087647;
  background: #087647;
}

.ec-whatsapp-button:focus-visible {
  outline: 3px solid rgba(15, 143, 85, 0.22);
  outline-offset: 2px;
}

.ec-modal-overlay {
  z-index: 1400;
}

.ec-compose-modal,
.ec-bulk-modal {
  max-width: 680px;
  border-radius: 8px;
  overflow: hidden;
}

.ec-bulk-modal {
  max-width: 760px;
}

.ec-modal-header {
  padding: 17px 20px;
}

.ec-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.ec-modal-title-wrap h3 {
  font-size: 16px;
}

.ec-modal-title-wrap p {
  margin: 3px 0 0;
  color: var(--ink3);
  font-size: 12px;
}

.ec-whatsapp-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: #e9f9f0;
  color: #087647;
}

.ec-compose-body,
.ec-bulk-body {
  padding: 18px 20px;
}

.ec-recipient-summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.ec-recipient-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.ec-recipient-summary > div:nth-child(2) {
  min-width: 0;
}

.ec-recipient-summary > div:nth-child(2) strong,
.ec-recipient-summary > div:nth-child(2) span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-recipient-summary > div:nth-child(2) strong {
  color: var(--ink);
  font-size: 13px;
}

.ec-recipient-summary > div:nth-child(2) span {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 11px;
}

.ec-recipient-amount {
  text-align: right;
}

.ec-message-label {
  display: block;
  margin: 16px 0 6px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.ec-message-editor {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  padding: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
}

.ec-message-editor:focus {
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
}

.ec-delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 11px;
  line-height: 1.45;
}

.ec-delivery-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.ec-delivery-note--opened {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.ec-compose-footer {
  justify-content: flex-end;
  padding: 13px 20px;
}

.ec-wa-confirm-button[hidden] {
  display: none;
}

.ec-bulk-list {
  max-height: 460px;
  margin-top: 12px;
  overflow-y: auto;
}

.ec-bulk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 3px;
  border-bottom: 1px solid var(--line);
}

.ec-bulk-row:last-child {
  border-bottom: 0;
}

.ec-bulk-row-main {
  min-width: 0;
}

.ec-bulk-row-main strong,
.ec-bulk-row-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-bulk-row-main strong {
  color: var(--ink);
  font-size: 13px;
}

.ec-bulk-row-main span {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 11px;
}

.ec-bulk-amount {
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-theme="dark"] .ec-delivery-status--sent,
[data-theme="dark"] .ec-delivery-note--opened {
  border-color: #14532d;
  background: #0d2418;
  color: #86efac;
}

[data-theme="dark"] .ec-delivery-status--prepared {
  border-color: #78350f;
  background: #2a1f0a;
  color: #fcd34d;
}

[data-theme="dark"] .ec-delivery-note {
  border-color: #1e3a5f;
  background: #101d33;
  color: #93c5fd;
}

[data-theme="dark"] .ec-whatsapp-mark {
  background: #0d2418;
  color: #86efac;
}

@media (max-width: 900px) {
  .ec-invoice-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .ec-invoice-side {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .ec-balance {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .ec-center-panel .inv-list-header {
    align-items: stretch;
    padding: 17px 16px 15px;
  }

  .ec-center-panel .inv-list-actions {
    margin-left: 0;
  }

  .ec-center-panel .inv-list-actions button {
    flex: 1 1 160px;
  }

  .ec-center-panel .inv-kpi-grid {
    gap: 9px;
    padding: 14px 16px;
  }

  .ec-tab-bar {
    padding: 0 12px;
  }

  .ec-tab-bar .pos-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    text-align: center;
  }

  .ec-invoice-list {
    gap: 9px;
    padding: 12px 12px 18px;
  }

  .ec-invoice-card {
    padding: 13px;
  }

  .ec-invoice-side {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .ec-card-actions {
    justify-content: stretch;
  }

  .ec-card-actions button {
    flex: 1 1 125px;
  }

  .ec-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .ec-compose-modal,
  .ec-bulk-modal {
    height: auto !important;
    max-height: 94dvh !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0 !important;
  }

  .ec-bulk-modal {
    max-height: 80dvh !important;
  }

  .ec-modal-header {
    padding: 15px 16px !important;
  }

  .ec-compose-body,
  .ec-bulk-body {
    padding: 15px 16px !important;
  }

  .ec-compose-footer {
    flex-flow: row wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }

  .ec-compose-footer button {
    flex: 1 1 140px !important;
    width: auto !important;
    min-height: 44px !important;
  }
}

@media (max-width: 480px) {
  .ec-center-panel .inv-kpi-card {
    padding: 12px;
  }

  .ec-center-panel .inv-kpi-icon {
    display: none;
  }

  .ec-center-panel .inv-kpi-value {
    font-size: 18px;
  }

  .ec-invoice-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }

  .ec-document-icon {
    width: 32px;
    height: 32px;
  }

  .ec-invoice-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .ec-contact-line {
    flex-direction: column;
    gap: 4px;
  }

  .ec-recipient-summary {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .ec-recipient-amount {
    grid-column: 1 / -1;
    padding-top: 9px;
    border-top: 1px solid var(--line);
    text-align: left;
  }

  .ec-message-editor {
    height: 220px !important;
    min-height: 190px;
    max-height: 220px;
  }

  .ec-bulk-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
  }

  .ec-bulk-amount {
    grid-column: 1;
    grid-row: 2;
  }

  .ec-bulk-row button {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ── 10. Filter bars / secondary strips ──────────────────────────── */
[data-theme="dark"] .zoho-income-stat,
[data-theme="dark"] .zoho-cashflow-stat,
[data-theme="dark"] .dashboard-setup-step,
[data-theme="dark"] .dashboard-empty-card,
[data-theme="dark"] .dashboard-empty-chart,
[data-theme="dark"] .status-filter-bar,
[data-theme="dark"] .list-controls,
[data-theme="dark"] .report-filter-bar,
[data-theme="dark"] .favorite-strip {
  background: #080c1a !important;
  border-color: #18243a !important;
}

[data-theme="dark"] .dashboard-setup-step:hover,
[data-theme="dark"] .dashboard-empty-action:hover {
  background: #0c162e !important;
  border-color: #4d8af5 !important;
}

[data-theme="dark"] .dashboard-setup-step.is-done {
  background: rgba(45,212,128,0.07) !important;
  border-color: rgba(45,212,128,0.2) !important;
}

[data-theme="dark"] .dashboard-setup-check,
[data-theme="dark"] .dashboard-empty-action {
  background: #05070e !important;
  color: #84b4ff !important;
  border-color: #18243a !important;
}

/* ── 11. Tables ───────────────────────────────────────────────────── */
[data-theme="dark"] .table-shell,
[data-theme="dark"] .data-table-wrap,
[data-theme="dark"] .report-table-shell,
[data-theme="dark"] .quote-table-shell,
[data-theme="dark"] .retainer-table-shell,
[data-theme="dark"] .po-table-shell {
  background: #0c1120 !important;
  border-color: #18243a !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28) !important;
}

[data-theme="dark"] thead th,
[data-theme="dark"] .data-table th,
[data-theme="dark"] .report-table th,
[data-theme="dark"] .po-table-shell thead th {
  background: #080c1a !important;
  color: #3d5670 !important;
  border-bottom: 1px solid #18243a !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
}

[data-theme="dark"] tbody tr,
[data-theme="dark"] .data-table td,
[data-theme="dark"] .report-table td {
  border-bottom-color: #10192c !important;
}

[data-theme="dark"] tbody tr:hover {
  background: rgba(77,138,245,0.05) !important;
}

/* ── 12. Modals, quick-view, menus — glass + deep shadow ─────────── */
[data-theme="dark"] .modal-card,
[data-theme="dark"] .confirm-card,
[data-theme="dark"] .upgrade-modal-card,
[data-theme="dark"] .qv-panel,
[data-theme="dark"] .more-menu {
  background: #0e1626 !important;
  border: 1px solid #1c2e4a !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 32px 80px rgba(0,0,0,0.76) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .qv-panel-header {
  background: #07091a !important;
  border-color: #16223a !important;
}

/* ── 13. Toast ────────────────────────────────────────────────────── */
[data-theme="dark"] .toast {
  background: #0e1626 !important;
  border: 1px solid #1c2e4a !important;
  color: #dce8f8 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.56) !important;
}

/* ── 14. Mobile bottom nav ────────────────────────────────────────── */
[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(7,9,18,0.88) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.44) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

[data-theme="dark"] .mobile-bottom-nav button {
  color: #3d5670 !important;
}

[data-theme="dark"] .mobile-bottom-nav button.active {
  color: #84b4ff !important;
}

[data-theme="dark"] .mobile-bottom-nav button.active .mob-nav-dot {
  background: #4d8af5 !important;
}

/* ── 15. Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  [data-theme="dark"] .app-shell {
    grid-template-columns: 1fr !important;
    background: #07090f !important;
  }

  [data-theme="dark"] .workspace {
    padding: 10px 10px 132px !important;
    background: transparent !important;
  }

  [data-theme="dark"] .topbar {
    position: sticky;
    top: 0;
    z-index: 800;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
  }

  [data-theme="dark"] .topbar > div:first-of-type {
    min-width: 0;
  }

  [data-theme="dark"] .topbar h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px !important;
  }

  [data-theme="dark"] .topbar-search {
    grid-column: 1 / -1;
  }

  [data-theme="dark"] .topbar-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  [data-theme="dark"] .topbar-logout,
  [data-theme="dark"] .topbar-account-email {
    display: none !important;
  }

  [data-theme="dark"] .topbar-theme-toggle,
  [data-theme="dark"] .sidebar-toggle,
  [data-theme="dark"] .topbar-account-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  [data-theme="dark"] .sidebar {
    width: min(300px, 88vw) !important;
    box-shadow: 24px 0 52px rgba(0,0,0,0.56) !important;
  }

  [data-theme="dark"] .sidebar-backdrop.open {
    background: rgba(2,4,10,0.74) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  [data-theme="dark"] .dash-header,
  [data-theme="dark"] .panel,
  [data-theme="dark"] .metric-card,
  [data-theme="dark"] .zoho-widget,
  [data-theme="dark"] .zoho-summary-tile,
  [data-theme="dark"] .dashboard-setup-panel,
  [data-theme="dark"] .dashboard-empty-guide,
  [data-theme="dark"] .module-toolbar {
    border-radius: 16px !important;
  }

  [data-theme="dark"] .dash-header {
    max-width: 100% !important;
    padding: 16px !important;
  }

  [data-theme="dark"] .dash-header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-theme="dark"] .dash-header-actions > * {
    width: 100%;
  }

  [data-theme="dark"] .dash-kpi-grid,
  [data-theme="dark"] .dash-cfi-row,
  [data-theme="dark"] .zoho-summary-bar {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-theme="dark"] .mobile-bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 6px !important;
  }

  [data-theme="dark"] .mobile-bottom-nav button {
    min-height: 54px !important;
    border-radius: 14px !important;
  }

  [data-theme="dark"] .mobile-bottom-nav button.active {
    background: rgba(77,138,245,0.1) !important;
  }

  [data-theme="dark"] .quote-zoho-form .quote-table-shell tr.quote-line-row,
  [data-theme="dark"] .po-zoho-form .po-table-shell tr.po-line-row {
    background: #080c1a !important;
    border-color: #18243a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
  }

  [data-theme="dark"] .quote-zoho-form .quote-table-shell td::before,
  [data-theme="dark"] .po-zoho-form .po-table-shell td::before,
  [data-theme="dark"] .po-zoho-form .po-item-cell::before,
  [data-theme="dark"] .po-zoho-form .po-account-cell::before,
  [data-theme="dark"] .po-zoho-form .po-num-cell:nth-of-type(4)::before,
  [data-theme="dark"] .po-zoho-form .po-num-cell:nth-of-type(5)::before,
  [data-theme="dark"] .po-zoho-form .po-vat-cell::before,
  [data-theme="dark"] .po-zoho-form .po-amount-cell::before {
    color: #3d5670 !important;
  }

  [data-theme="dark"] .po-zoho-form .po-amount-cell,
  [data-theme="dark"] .po-zoho-form .po-del-row,
  [data-theme="dark"] .po-zoho-form .po-add-row-btn {
    background: #060810 !important;
    border-color: #18243a !important;
  }

  html.native-app-mode[data-theme="dark"] .topbar,
  html.pwa-mode[data-theme="dark"] .topbar {
    background: rgba(7,9,18,0.94) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  }
}

@media (max-width: 420px) {
  [data-theme="dark"] .workspace {
    padding-inline: 8px !important;
  }

  [data-theme="dark"] .dash-kpi-grid,
  [data-theme="dark"] .dash-cfi-row,
  [data-theme="dark"] .zoho-summary-bar {
    gap: 8px !important;
  }

  [data-theme="dark"] .zoho-summary-value,
  [data-theme="dark"] .dash-cfi-value,
  [data-theme="dark"] .metric-card strong {
    font-size: clamp(18px, 6vw, 26px) !important;
  }
}

/* Auth overlay is always light — undo hardcoded dark !important overrides. */
[data-theme="dark"] #auth-overlay input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] #auth-overlay select,
[data-theme="dark"] #auth-overlay textarea {
  background: #ffffff !important;
  border-color: #dde3f0 !important;
  color: #0e1f3d !important;
}
[data-theme="dark"] #auth-overlay input:focus,
[data-theme="dark"] #auth-overlay select:focus,
[data-theme="dark"] #auth-overlay textarea:focus {
  background: #ffffff !important;
  border-color: #2060e8 !important;
  box-shadow: 0 0 0 3px rgba(32,96,232,0.15) !important;
}
[data-theme="dark"] #auth-overlay input::placeholder,
[data-theme="dark"] #auth-overlay textarea::placeholder {
  color: #8fa0b8 !important;
}

/* App-only record creation polish: forms, modals, and mobile line editors. */
html[data-theme="dark"] body.bb-app-active .quote-create-panel.open,
html[data-theme="dark"] body.bb-app-active .bill-create-panel.open,
html[data-theme="dark"] body.bb-app-active .exp-create-panel.open,
html[data-theme="dark"] body.bb-app-active .customer-create-panel.open,
html[data-theme="dark"] body.bb-app-active .item-create-panel.open,
html[data-theme="dark"] body.bb-app-active .pmt-create-panel.open,
html[data-theme="dark"] body.bb-app-active .pmade-create-panel.open,
html[data-theme="dark"] body.bb-app-active .vc-create-panel.open,
html[data-theme="dark"] body.bb-app-active .re-create-panel.open,
html[data-theme="dark"] body.bb-app-active .coa-create-panel.open,
html[data-theme="dark"] body.bb-app-active .po-create-panel.open,
html[data-theme="dark"] body.bb-app-active .recurring-bill-create-panel.open,
html[data-theme="dark"] body.bb-app-active .modal-card,
html[data-theme="dark"] body.bb-app-active .ncm-card,
html[data-theme="dark"] body.bb-app-active .qvm-card,
html[data-theme="dark"] body.bb-app-active .qim-card,
html[data-theme="dark"] body.bb-app-active .retainer-customer-modal-card,
html[data-theme="dark"] body.bb-app-active .addr-modal-card {
  background:
    linear-gradient(180deg, rgba(16,24,38,0.98), rgba(10,15,26,0.98)) !important;
  border: 1px solid rgba(132,180,255,0.18) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.035), 0 34px 90px rgba(0,0,0,0.72) !important;
}

html[data-theme="dark"] body.bb-app-active .quote-form-title,
html[data-theme="dark"] body.bb-app-active .customer-form-title,
html[data-theme="dark"] body.bb-app-active .exp-form-title,
html[data-theme="dark"] body.bb-app-active .pmt-form-title,
html[data-theme="dark"] body.bb-app-active .pmade-form-title,
html[data-theme="dark"] body.bb-app-active .po-form-title,
html[data-theme="dark"] body.bb-app-active .po-zoho-form .quote-form-title,
html[data-theme="dark"] body.bb-app-active .bill-form-header,
html[data-theme="dark"] body.bb-app-active .item-modal-header,
html[data-theme="dark"] body.bb-app-active .coa-form-title,
html[data-theme="dark"] body.bb-app-active .rb-form-title,
html[data-theme="dark"] body.bb-app-active .modal-header {
  background: rgba(5,8,16,0.86) !important;
  border-color: rgba(132,180,255,0.14) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

html[data-theme="dark"] body.bb-app-active .quote-form-title h3,
html[data-theme="dark"] body.bb-app-active .customer-form-title h3,
html[data-theme="dark"] body.bb-app-active .exp-form-title h3,
html[data-theme="dark"] body.bb-app-active .pmt-form-title h3,
html[data-theme="dark"] body.bb-app-active .pmade-form-title h3,
html[data-theme="dark"] body.bb-app-active .po-form-title h3,
html[data-theme="dark"] body.bb-app-active .bill-form-title-row h3,
html[data-theme="dark"] body.bb-app-active .item-modal-header h3,
html[data-theme="dark"] body.bb-app-active .coa-form-title h3,
html[data-theme="dark"] body.bb-app-active .rb-form-title h3,
html[data-theme="dark"] body.bb-app-active .modal-header h3 {
  color: #f4f8ff !important;
  letter-spacing: 0 !important;
}

html[data-theme="dark"] body.bb-app-active .quote-form-body,
html[data-theme="dark"] body.bb-app-active .exp-form-body,
html[data-theme="dark"] body.bb-app-active .item-modal-body,
html[data-theme="dark"] body.bb-app-active .modal-body,
html[data-theme="dark"] body.bb-app-active .coa-form-body {
  background:
    radial-gradient(circle at 8% 0%, rgba(77,138,245,0.075), transparent 34%),
    #07090f !important;
}

html[data-theme="dark"] body.bb-app-active .quote-band,
html[data-theme="dark"] body.bb-app-active .quote-spaced-grid,
html[data-theme="dark"] body.bb-app-active .quote-details-grid,
html[data-theme="dark"] body.bb-app-active .quote-item-table,
html[data-theme="dark"] body.bb-app-active .quote-notes-grid,
html[data-theme="dark"] body.bb-app-active .quote-terms-grid,
html[data-theme="dark"] body.bb-app-active .po-details-grid,
html[data-theme="dark"] body.bb-app-active .po-bottom-grid,
html[data-theme="dark"] body.bb-app-active .po-item-table,
html[data-theme="dark"] body.bb-app-active .po-attach-box,
html[data-theme="dark"] body.bb-app-active .po-custom-fields-tip,
html[data-theme="dark"] body.bb-app-active .exp-form-fields,
html[data-theme="dark"] body.bb-app-active .line-editor,
html[data-theme="dark"] body.bb-app-active .bill-form-section,
html[data-theme="dark"] body.bb-app-active .pr-form-panel,
html[data-theme="dark"] body.bb-app-active .tr-form-panel,
html[data-theme="dark"] body.bb-app-active .fa-form-panel,
html[data-theme="dark"] body.bb-app-active .custom-record-form-panel {
  background: #0b1020 !important;
  border: 1px solid #18243a !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 10px 28px rgba(0,0,0,0.22) !important;
}

html[data-theme="dark"] body.bb-app-active .quote-form-line label,
html[data-theme="dark"] body.bb-app-active .exp-form-line label,
html[data-theme="dark"] body.bb-app-active .item-field-line label,
html[data-theme="dark"] body.bb-app-active .item-field-line .item-line-label,
html[data-theme="dark"] body.bb-app-active .po-zoho-form .quote-form-line label,
html[data-theme="dark"] body.bb-app-active .form-row label,
html[data-theme="dark"] body.bb-app-active .coa-label,
html[data-theme="dark"] body.bb-app-active .pr-form-field label,
html[data-theme="dark"] body.bb-app-active .fa-form-field label {
  color: #92a8bf !important;
  font-weight: 650 !important;
}

html[data-theme="dark"] body.bb-app-active .quote-form-actions,
html[data-theme="dark"] body.bb-app-active .exp-form-actions,
html[data-theme="dark"] body.bb-app-active .item-modal-actions,
html[data-theme="dark"] body.bb-app-active .modal-footer,
html[data-theme="dark"] body.bb-app-active .bill-form-actions,
html[data-theme="dark"] body.bb-app-active .coa-form-actions {
  background: rgba(5,8,16,0.94) !important;
  border-color: rgba(132,180,255,0.14) !important;
  box-shadow: 0 -14px 34px rgba(0,0,0,0.32) !important;
}

html[data-theme="dark"] body.bb-app-active .quote-table-shell tr.quote-line-row,
html[data-theme="dark"] body.bb-app-active .po-table-shell tr.po-line-row,
html[data-theme="dark"] body.bb-app-active .line-editor-row {
  background: #070b16 !important;
  border-color: #1a2942 !important;
}

html[data-theme="dark"] body.bb-app-active .quote-total-card,
html[data-theme="dark"] body.bb-app-active .invoice-total-card,
html[data-theme="dark"] body.bb-app-active .po-total-card {
  background: linear-gradient(160deg, rgba(77,138,245,0.12), rgba(45,212,128,0.055)) !important;
  border-color: rgba(132,180,255,0.24) !important;
}

@media (max-width: 768px) {
  html[data-theme="dark"] body.bb-app-active .quote-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .bill-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .exp-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .customer-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .item-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .pmt-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .pmade-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .vc-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .re-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .coa-create-panel.open,
  html[data-theme="dark"] body.bb-app-active .po-create-panel.open {
    border-radius: 0 !important;
    border-inline: 0 !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-table-shell tr.quote-line-row,
  html[data-theme="dark"] body.bb-app-active .po-table-shell tr.po-line-row {
    border-radius: 16px !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-item-table,
  html[data-theme="dark"] body.bb-app-active .bill-item-section,
  html[data-theme="dark"] body.bb-app-active .retainer-item-table,
  html[data-theme="dark"] body.bb-app-active .po-item-table {
    background: #0b1020 !important;
    border-color: #18243a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 10px 28px rgba(0,0,0,0.24) !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-item-head,
  html[data-theme="dark"] body.bb-app-active .bill-item-header,
  html[data-theme="dark"] body.bb-app-active .retainer-item-head,
  html[data-theme="dark"] body.bb-app-active .po-item-head {
    border-bottom-color: rgba(132,180,255,0.14) !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-table-shell tr.quote-line-row,
  html[data-theme="dark"] body.bb-app-active .bill-item-table tr.bill-line-row,
  html[data-theme="dark"] body.bb-app-active .retainer-table-shell tr.retainer-line-row,
  html[data-theme="dark"] body.bb-app-active .po-table-shell tr.po-line-row {
    background: linear-gradient(180deg, #080c1a 0%, #070b16 100%) !important;
    border-color: #1a2942 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 10px 24px rgba(0,0,0,0.18) !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-table-shell tr.quote-line-row::before,
  html[data-theme="dark"] body.bb-app-active .bill-item-table tr.bill-line-row::before,
  html[data-theme="dark"] body.bb-app-active .retainer-table-shell tr.retainer-line-row::before,
  html[data-theme="dark"] body.bb-app-active .po-table-shell .po-row-num {
    background: rgba(77,138,245,0.12) !important;
    border-color: rgba(132,180,255,0.16) !important;
    color: #84b4ff !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-table-shell td::before,
  html[data-theme="dark"] body.bb-app-active .bill-item-table td::before,
  html[data-theme="dark"] body.bb-app-active .retainer-table-shell td::before,
  html[data-theme="dark"] body.bb-app-active .po-item-cell::before,
  html[data-theme="dark"] body.bb-app-active .po-account-cell::before,
  html[data-theme="dark"] body.bb-app-active .po-num-cell:nth-of-type(4)::before,
  html[data-theme="dark"] body.bb-app-active .po-num-cell:nth-of-type(5)::before,
  html[data-theme="dark"] body.bb-app-active .po-vat-cell::before,
  html[data-theme="dark"] body.bb-app-active .po-amount-cell::before {
    color: #7890aa !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-table-shell td:nth-child(6),
  html[data-theme="dark"] body.bb-app-active .bill-amount-cell,
  html[data-theme="dark"] body.bb-app-active .po-amount-cell,
  html[data-theme="dark"] body.bb-app-active .retainer-total-line {
    background: linear-gradient(180deg, rgba(77,138,245,0.12), rgba(45,212,128,0.055)) !important;
    border-color: rgba(132,180,255,0.22) !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-table-shell td:nth-child(6) strong,
  html[data-theme="dark"] body.bb-app-active .bill-amount-cell span,
  html[data-theme="dark"] body.bb-app-active .po-amount-value {
    color: #e4f0ff !important;
  }

  html[data-theme="dark"] body.bb-app-active .quote-line-actions .ghost-button,
  html[data-theme="dark"] body.bb-app-active .bill-add-row-btn,
  html[data-theme="dark"] body.bb-app-active .po-add-row-btn,
  html[data-theme="dark"] body.bb-app-active .retainer-line-footer .ghost-button {
    background: #060810 !important;
    border-color: rgba(132,180,255,0.18) !important;
    color: #84b4ff !important;
  }
}

@media (max-width: 520px) {
  html[data-theme="dark"] body.bb-app-active,
  html[data-theme="dark"] body.bb-app-active #app-shell,
  html[data-theme="dark"] body.bb-app-active .workspace,
  html[data-theme="dark"] body.bb-app-active .page-section.active {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="dark"] body.bb-app-active .workspace {
    overflow-x: clip !important;
  }

  html[data-theme="dark"] body.bb-app-active .dash-kpi-grid,
  html[data-theme="dark"] body.bb-app-active .dash-cfi-row,
  html[data-theme="dark"] body.bb-app-active .zoho-summary-bar,
  html[data-theme="dark"] body.bb-app-active .metric-grid,
  html[data-theme="dark"] body.bb-app-active .books-overview-grid,
  html[data-theme="dark"] body.bb-app-active .dashboard-widget-grid,
  html[data-theme="dark"] body.bb-app-active .quick-create-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme="dark"] body.bb-app-active .dash-header-actions,
  html[data-theme="dark"] body.bb-app-active .quote-form-actions,
  html[data-theme="dark"] body.bb-app-active .exp-form-actions,
  html[data-theme="dark"] body.bb-app-active .item-modal-actions,
  html[data-theme="dark"] body.bb-app-active .modal-footer,
  html[data-theme="dark"] body.bb-app-active .bill-form-actions,
  html[data-theme="dark"] body.bb-app-active .coa-form-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme="dark"] body.bb-app-active .dash-header-actions > *,
  html[data-theme="dark"] body.bb-app-active .quote-form-actions > *,
  html[data-theme="dark"] body.bb-app-active .exp-form-actions > *,
  html[data-theme="dark"] body.bb-app-active .item-modal-actions > *,
  html[data-theme="dark"] body.bb-app-active .modal-footer > *,
  html[data-theme="dark"] body.bb-app-active .bill-form-actions > *,
  html[data-theme="dark"] body.bb-app-active .coa-form-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="dark"] body.bb-app-active .metric-card,
  html[data-theme="dark"] body.bb-app-active .dash-cfi-card,
  html[data-theme="dark"] body.bb-app-active .panel,
  html[data-theme="dark"] body.bb-app-active .zoho-widget,
  html[data-theme="dark"] body.bb-app-active .quote-band,
  html[data-theme="dark"] body.bb-app-active .quote-spaced-grid,
  html[data-theme="dark"] body.bb-app-active .quote-details-grid,
  html[data-theme="dark"] body.bb-app-active .quote-item-table,
  html[data-theme="dark"] body.bb-app-active .po-details-grid,
  html[data-theme="dark"] body.bb-app-active .po-item-table,
  html[data-theme="dark"] body.bb-app-active .line-editor {
    min-width: 0 !important;
  }
}

html[data-theme="dark"] body.bb-app-active #industry-setup-overlay > div {
  background: linear-gradient(180deg, #101827, #0b1020) !important;
  border: 1px solid rgba(132,180,255,0.16) !important;
  box-shadow: 0 36px 96px rgba(0,0,0,0.78) !important;
}

html[data-theme="dark"] body.bb-app-active #industry-setup-overlay div[style*="background:#fef2f2"] {
  background: linear-gradient(180deg, rgba(127,29,29,0.28), rgba(69,10,10,0.24)) !important;
  border-color: rgba(248,113,113,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

html[data-theme="dark"] body.bb-app-active #industry-setup-overlay div[style*="color:#dc2626"] {
  color: #fecaca !important;
}

html[data-theme="dark"] body.bb-app-active #industry-setup-overlay div[style*="color:#7f1d1d"] {
  color: #f8b4b4 !important;
}

html[data-theme="dark"] body.bb-app-active #industry-setup-overlay button[style*="background:#dc2626"] {
  background: #ef4444 !important;
  border: 1px solid rgba(254,202,202,0.32) !important;
  box-shadow: 0 12px 28px rgba(127,29,29,0.34) !important;
}

/* ── POS Mobile: cart line layout ── */
@media (max-width: 768px) {
  .pos-cart-line {
    position: relative;
    padding: 12px 12px 10px;
    gap: 6px;
  }

  /* Name takes full width, wraps if long */
  .pos-cart-line-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-right: 32px; /* room for remove button */
  }
  .pos-cart-line-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 14px;
    line-height: 1.3;
  }
  .pos-cart-line-meta {
    gap: 6px;
    font-size: 12px;
  }
  .pos-price-input {
    width: 68px;
    height: 28px;
    font-size: 13px;
  }

  /* Qty controls + total on bottom row */
  .pos-cart-line-right {
    width: 100%;
    justify-content: space-between;
  }
  .pos-cart-line-total {
    font-size: 15px;
    min-width: auto;
  }
  .pos-qty-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .pos-qty-val {
    font-size: 16px;
    min-width: 30px;
  }

  /* Remove button: top-right corner */
  .pos-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
  }
}

/* ── POS Mobile: Back to items button (hidden on desktop) ── */
.pos-back-to-items { display: none; }

/* ── POS Mobile: View Cart sticky bar ── */
.pos-view-cart-bar { display: none; }

@media (max-width: 768px) {
  .pos-back-to-items {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .pos-view-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    bottom: 0;
    background: var(--accent);
    color: #fff;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
  }
  .pos-view-cart-bar:active { opacity: 0.88; }
  .pos-vc-count { font-size: 12px; opacity: 0.85; }
  .pos-vc-total { font-size: 16px; letter-spacing: -0.02em; }
}

/* ── POS Mobile: Quantity numpad modal ── */
.pos-numpad-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end;
}
.pos-numpad-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 36px;
  width: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.pos-numpad-header {
  display: flex; align-items: center; justify-content: space-between;
}
.pos-numpad-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.pos-numpad-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-soft); border: 1px solid var(--line);
  color: var(--ink2); cursor: pointer; font-size: 14px;
  display: grid; place-items: center;
}
.pos-numpad-display {
  font-size: 52px; font-weight: 800; color: var(--ink);
  text-align: center; letter-spacing: -3px;
  background: var(--surface-soft); border-radius: 12px;
  padding: 10px 16px; line-height: 1;
}
.pos-numpad-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.pos-numpad-btn {
  height: 64px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); font-size: 26px; font-weight: 600;
  color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-numpad-btn:active { background: var(--surface-soft); }
.pos-numpad-btn--clear { color: var(--danger); border-color: rgba(220,38,38,0.3); background: #fff5f5; }
.pos-numpad-btn--back { font-size: 20px; }
.pos-numpad-confirm {
  height: 56px; border-radius: 12px; border: none;
  background: var(--accent); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-numpad-confirm:active { opacity: 0.88; }

/* ── Mobile: transaction lists as cards instead of wide scrolling tables ── */
@media (max-width: 640px) {
  .table-shell {
    overflow: unset;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .table-shell table { display: block; min-width: 0; }
  .table-shell thead { display: none; }
  .table-shell tbody { display: flex; flex-direction: column; gap: 10px; }
  .table-shell tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .table-shell tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border: none;
    font-size: 13px;
    min-height: 0;
  }
  .table-shell tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
  }
  .table-shell tbody td:last-child {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
  .table-shell tbody td:last-child::before { display: none; }
}

/* ── Forex Bureau ──────────────────────────────────────────────────── */
/* ── Forex Bureau ──────────────────────────────────────────────────── */
.fx-hero { display:flex; justify-content:space-between; align-items:center; padding:0 0 22px; flex-wrap:wrap; gap:12px; }
.fx-kicker { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.fx-kicker::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.fx-title { font-size:26px; font-weight:800; color:var(--ink); line-height:1.1; letter-spacing:-.4px; }
.fx-subtitle { font-size:13px; color:var(--ink3); margin-top:3px; }
.fx-tabs { display:flex; gap:3px; padding:4px; background:var(--surface-soft); border:1px solid var(--line); border-radius:14px; margin-bottom:24px; overflow-x:auto; }
.fx-tab { display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:500; color:var(--ink3); border-radius:10px; transition:color .15s,background .15s,box-shadow .15s; white-space:nowrap; }
.fx-tab:hover { color:var(--ink); background:color-mix(in srgb,var(--surface) 70%,transparent); }
.fx-tab.active { color:var(--accent); font-weight:700; background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.08),0 0 0 1px var(--line); }
.fx-tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-size:11px; font-weight:700; background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); line-height:1; }
.fx-tab.active .fx-tab-badge { background:color-mix(in srgb,var(--accent) 18%,transparent); }
/* KPI row */
.fx-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.fx-kpi { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px 16px 22px; position:relative; overflow:hidden; }
.fx-kpi::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:2px 0 0 2px; z-index:0; }
.fx-kpi-label, .fx-kpi-value, .fx-kpi-sub { position:relative; z-index:1; }
.fx-kpi.kpi-blue::after { background:#3b82f6; }
.fx-kpi.kpi-red::after { background:#ef4444; }
.fx-kpi.kpi-green::after { background:#10b981; }
.fx-kpi.kpi-amber::after { background:#f59e0b; }
.fx-kpi.kpi-purple::after { background:#8b5cf6; }
/* ── Recipes ─────────────────────────────────────────────────────────────── */
.rcp-badge { display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.01em; }
.rcp-badge-green { background:#dcfce7;color:#16a34a; }
.rcp-badge-amber { background:#fef3c7;color:#b45309; }
.rcp-badge-red { background:#fee2e2;color:#dc2626; }
.rcp-badge-neutral { background:var(--surface-soft);color:var(--ink3); }
.rcp-ing-badge { display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--surface-soft);font-size:12px;font-weight:700;color:var(--ink2); }
.rcp-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center; }
.fx-kpi-label { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); margin-bottom:8px; }
.fx-kpi-value { font-size:20px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.fx-kpi-sub { font-size:11px; color:var(--ink3); margin-top:5px; }
/* Rate board */
.fx-rate-board { background:linear-gradient(160deg,#16213e 0%,#1a2f52 55%,#16213e 100%); border-radius:14px; padding:22px 26px; margin-bottom:20px; border:1px solid #1e3a60; border-top:2px solid #2563eb; }
.fx-rate-board-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.fx-rate-board-title { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ffffff; }
.fx-rate-board-live { display:flex; align-items:center; gap:5px; font-size:10px; color:#34d399; font-weight:700; letter-spacing:.05em; }
.fx-rate-board-live::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#34d399; animation:fx-pulse 2s ease-in-out infinite; }
@keyframes fx-pulse { 0%,100%{opacity:1} 50%{opacity:.2} }
.fx-rate-row { display:grid; grid-template-columns:30px 52px 1fr 1fr auto; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.fx-rate-row:last-child { border-bottom:none; }
.fx-rate-flag { font-size:19px; line-height:1; }
.fx-rate-cur { font-size:14px; font-weight:700; color:#ffffff; letter-spacing:.06em; }
.fx-rate-cell { display:flex; flex-direction:column; gap:3px; }
.fx-rate-label { font-size:9px; color:#94b8d8; text-transform:uppercase; letter-spacing:.09em; }
.fx-rate-val { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.fx-rate-buy { color:#4ade80; }
.fx-rate-sell { color:#fb923c; }
.fx-rate-spread { font-size:10px; color:#c8dff0; background:rgba(255,255,255,.1); padding:3px 10px; border-radius:20px; white-space:nowrap; }
.fx-rate-empty { padding:0; }
/* Holdings */
.fx-holding-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:12px; }
.fx-holding-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 14px 12px; position:relative; overflow:hidden; }
.fx-holding-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.fx-holding-flag { font-size:20px; line-height:1; }
.fx-holding-tag { font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; letter-spacing:.04em; }
.fx-holding-tag.tag-pos { background:#dcfce7; color:#15803d; }
.fx-holding-tag.tag-zero { background:var(--surface-soft); color:var(--ink3); }
.fx-holding-cur { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ink3); text-transform:uppercase; }
.fx-holding-amount { font-size:22px; font-weight:800; color:var(--ink); margin:4px 0 2px; font-variant-numeric:tabular-nums; line-height:1; }
.fx-holding-rate { font-size:11px; color:var(--ink3); margin-top:2px; }
.fx-holding-bar { position:absolute; bottom:0; left:0; right:0; height:3px; }
.fx-holding-bar.bar-pos { background:linear-gradient(90deg,#10b981,#34d399); }
.fx-holding-bar.bar-zero { background:var(--line); }
/* New Deal */
.fx-deal-type-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.fx-deal-type-card { border:2px solid var(--line); border-radius:12px; padding:16px 14px; cursor:pointer; transition:border-color .18s,background .18s; background:var(--surface); text-align:center; user-select:none; }
.fx-deal-type-card:hover { border-color:var(--ink3); }
.fx-deal-type-card.active-buy { border-color:#10b981; background:#f0fdf4; }
.fx-deal-type-card.active-sell { border-color:#f59e0b; background:#fffbeb; }
.fx-deal-type-icon { font-size:22px; margin-bottom:6px; line-height:1; }
.fx-deal-type-name { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.fx-deal-type-desc { font-size:11px; color:var(--ink3); line-height:1.4; }
.fx-deal-type-card.active-buy .fx-deal-type-name { color:#15803d; }
.fx-deal-type-card.active-sell .fx-deal-type-name { color:#b45309; }
.fx-receipt { background:var(--surface-soft); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px; position:relative; overflow:hidden; }
.fx-receipt::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; }
.fx-receipt.receipt-buy::before { background:linear-gradient(90deg,#10b981,#34d399); }
.fx-receipt.receipt-sell::before { background:linear-gradient(90deg,#f59e0b,#fcd34d); }
.fx-receipt-title { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:12px; }
.fx-receipt-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink2); padding:4px 0; }
.fx-receipt-total { display:flex; justify-content:space-between; align-items:center; border-top:1px dashed var(--line); margin-top:10px; padding-top:12px; }
.fx-receipt-total-label { font-size:13px; font-weight:700; color:var(--ink); }
.fx-receipt-total-val { font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
/* Deals tab */
.fx-filter-bar { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.fx-filter-btn { padding:6px 16px; border:1px solid var(--line); border-radius:7px; background:transparent; font-size:12px; font-weight:500; color:var(--ink3); cursor:pointer; transition:all .15s; }
.fx-filter-btn.active { background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600; }
.fx-deal-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.03em; }
.fx-deal-badge-buy { background:#dcfce7; color:#166534; }
.fx-deal-badge-sell { background:#fef3c7; color:#92400e; }
/* EOD */
.fx-eod-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.fx-eod-sum-card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px 14px 19px; position:relative; overflow:hidden; }
.fx-eod-sum-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.eod-card-green::after { background:#10b981; }
.eod-card-red::after { background:#ef4444; }
.eod-card-indigo::after { background:#6366f1; }
.fx-eod-sum-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin-bottom:6px; }
.fx-eod-sum-val { font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.fx-eod-section-label { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.fx-eod-section-label::after { content:""; flex:1; height:1px; background:var(--line); }
.fx-eod-grid { display:grid; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:8px; }
.fx-eod-head { background:var(--surface-soft); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); padding:10px 14px; border-bottom:1px solid var(--line); }
.fx-eod-cell { padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; font-variant-numeric:tabular-nums; display:flex; align-items:center; }
.fx-eod-cur-badge { font-weight:800; color:var(--ink); font-size:14px; }
.fx-eod-count-input { width:100%; height:34px; border:1px solid var(--line); border-radius:7px; padding:0 10px; font-size:13px; font-variant-numeric:tabular-nums; background:var(--surface); color:var(--ink); }
.fx-eod-count-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.fx-eod-diff-bar { display:flex; align-items:center; gap:10px; padding:8px 0 16px; }
.fx-eod-diff-label { font-size:12px; color:var(--ink3); }
.fx-eod-diff-pill { display:inline-flex; align-items:center; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:700; letter-spacing:.01em; }
.fx-eod-diff-pill.pill-ok { background:#dcfce7; color:#16a34a; }
.fx-eod-diff-pill.pill-over { background:#dcfce7; color:#16a34a; }
.fx-eod-diff-pill.pill-short { background:#fee2e2; color:#dc2626; }
.fx-eod-diff-pill.pill-pending { background:var(--surface-soft); color:var(--ink3); }
/* Set Rates tab */
.fx-rates-date-chip { display:inline-flex; align-items:center; padding:5px 14px; border-radius:20px; background:var(--surface-soft); border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--ink3); white-space:nowrap; }
.fx-rates-grid-hdr { display:grid; grid-template-columns:140px 1fr 1fr 100px; gap:0; padding:9px 16px; background:var(--surface-soft); border:1px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }
.fx-rates-rows-wrap { border:1px solid var(--line); border-radius:0 0 10px 10px; overflow:hidden; }
.fx-rates-active-chip { padding:7px 16px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#059669; background:color-mix(in srgb,#10b981 8%,var(--surface)); border-bottom:1px solid var(--line); }
.fx-rates-grid-row { display:grid; grid-template-columns:140px 1fr 1fr 100px; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); align-items:center; transition:background .1s; }
.fx-rates-grid-row:last-child { border-bottom:none; }
.fx-rates-grid-row:hover { background:var(--surface-soft); }
.fx-rates-row-active { background:color-mix(in srgb,#10b981 6%,var(--surface)); }
.fx-rates-row-active:hover { background:color-mix(in srgb,#10b981 10%,var(--surface)); }
.fx-rates-sep { display:flex; align-items:center; gap:12px; padding:8px 16px; background:var(--surface-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fx-rates-sep-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); white-space:nowrap; }
.fx-rates-search-input { flex:1; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:6px; font-size:12px; background:var(--surface); color:var(--ink); min-width:0; max-width:260px; }
.fx-rates-search-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.fx-rates-cur-cell { display:flex; align-items:center; gap:9px; }
.fx-rates-cur-name { font-weight:800; font-size:14px; color:var(--ink); }
.fx-rates-input { width:100%; height:38px; border:1px solid var(--line); border-radius:8px; padding:0 12px; font-size:13px; font-variant-numeric:tabular-nums; background:var(--surface); color:var(--ink); }
.fx-rates-input:focus { outline:none; }
.fx-rates-input.fx-ri-buy:focus { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.fx-rates-input.fx-ri-sell:focus { border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.fx-rates-spread-cell { font-size:13px; font-variant-numeric:tabular-nums; }
.fx-rates-spread-val { display:inline-block; padding:3px 9px; border-radius:6px; background:#dcfce7; color:#16a34a; font-weight:700; font-size:12px; }
/* Report section headers */
.fx-rep-section-hdr { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin:20px 0 10px; }
.fx-rep-section-hdr span:last-child { font-size:11px; font-weight:400; text-transform:none; letter-spacing:0; }
/* Stock on Hand cards */
.fx-stock-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:4px; }
.fx-stock-card { display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-left:3px solid #f59e0b; border-radius:12px; }
.fx-stock-card-flag { font-size:30px; line-height:1; flex-shrink:0; }
.fx-stock-card-body { flex:1; min-width:0; }
.fx-stock-card-cur { font-size:15px; font-weight:800; color:var(--ink); }
.fx-stock-card-amt { font-size:13px; font-weight:600; color:var(--ink); margin-top:2px; }
.fx-stock-card-meta { font-size:11px; color:var(--ink3); margin-top:3px; }
.fx-stock-card-profit { text-align:right; flex-shrink:0; }
.fx-stock-card-profit-label { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px; }
.fx-stock-card-profit-val { font-size:18px; font-weight:800; line-height:1.1; }
.fx-stock-card-profit-val2 { font-size:11px; color:var(--ink3); margin-top:3px; }
/* Client Detail — Profile & Balance Cards */
.fxc-profile-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:20px; flex-wrap:wrap; }
.fxc-avatar { width:46px; height:46px; border-radius:50%; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:-.5px; }
.fxc-name { font-size:19px; font-weight:800; color:var(--ink); line-height:1.2; }
.fxc-meta { font-size:13px; color:var(--ink3); margin-top:3px; }
.fxc-bal-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:20px; }
.fxc-bal-card { border:1px solid var(--line); border-top:3px solid #16a34a; border-radius:12px; padding:16px 20px; background:var(--surface); transition:box-shadow .15s,border-color .15s; }
.fxc-bal-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.08); }
.fxc-bal-card.fxc-bal-card-sel { box-shadow:0 0 0 2px var(--accent),0 4px 14px rgba(0,0,0,.1); }
.fxc-bal-card.fxc-bal-warn { border-top-color:#f59e0b; }
.fxc-bal-card.fxc-bal-neg { border-top-color:#dc2626; }
.fxc-bal-card-hdr { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.fxc-bal-cur { font-size:18px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:7px; }
.fxc-bal-pill { font-size:12px; padding:4px 12px; border-radius:20px; font-weight:800; background:#dcfce7; color:#166534; white-space:nowrap; }
.fxc-bal-pill.fxc-bal-pill-warn { background:#fef3c7; color:#92400e; }
.fxc-bal-pill.fxc-bal-pill-neg { background:#fee2e2; color:#dc2626; }
.fxc-fix-hint { font-size:12px; color:#92400e; background:#fef3c7; border-radius:6px; padding:8px 12px; margin-bottom:12px; line-height:1.5; }
.fxc-bal-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.fxc-bal-stat-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); margin-bottom:3px; }
.fxc-bal-stat-val { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.fxc-col-purple { color:#7c3aed; }
.fxc-col-green { color:#16a34a; }
.fxc-col-red { color:#dc2626; }
/* P&L Statement Box */
.fx-pnl-box { border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:20px 24px; background:var(--surface); margin-bottom:20px; }
.fx-pnl-box-title { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.fx-pnl-box-period { font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink3); }
.fx-pnl-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; font-size:13.5px; color:var(--ink); }
.fx-pnl-note { font-size:11px; color:var(--ink3); font-weight:400; margin-left:6px; }
.fx-pnl-pos { color:#10b981; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fx-pnl-neg { color:#ef4444; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fx-pnl-rule { border-top:1px solid var(--line); margin:10px 0; }
.fx-pnl-sub { font-weight:700; font-size:14.5px; }
.fx-pnl-total { font-weight:800; font-size:15px; }
/* Report date range picker */
.fx-report-date-row { margin-bottom:24px; }
.fx-report-period-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin-bottom:6px; }
.fx-report-select { height:38px; border:1px solid var(--line); border-radius:8px; padding:0 32px 0 12px; font-size:14px; font-weight:500; color:var(--ink); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; -webkit-appearance:none; appearance:none; cursor:pointer; min-width:190px; margin-bottom:12px; }
.fx-report-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.fx-report-date-display { display:flex; gap:14px; }
.fx-report-date-box { background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; padding:10px 14px; min-width:140px; }
.fx-report-date-box-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px; }
.fx-report-date-val { font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.fx-report-date-input { border:none; background:transparent; font-size:14px; font-weight:600; color:var(--ink); width:100%; padding:0; }
.fx-report-date-input:focus { outline:none; }
/* Shared */
.fx-diff-pos { color:#16a34a; font-weight:700; }
.fx-diff-neg { color:#dc2626; font-weight:700; }
.fx-diff-zero { color:var(--ink3); }
.fx-empty { text-align:center; padding:48px 20px; color:var(--ink3); font-size:14px; }
.fx-recon-badge-ok { display:inline-block; padding:2px 9px; border-radius:6px; font-size:11px; font-weight:700; background:#dcfce7; color:#16a34a; }
.fx-recon-badge-diff { display:inline-block; padding:2px 9px; border-radius:6px; font-size:11px; font-weight:700; background:#fee2e2; color:#dc2626; }
@media (prefers-color-scheme:dark) {
  .fx-deal-type-card.active-buy { background:rgba(16,185,129,.12); }
  .fx-deal-type-card.active-sell { background:rgba(245,158,11,.1); }
}
@media (max-width:640px) {
  .fx-kpi-row { grid-template-columns:repeat(2,1fr); }
  .fx-rate-row { grid-template-columns:26px 44px 1fr 1fr; }
  .fx-rate-spread { display:none; }
  .fx-holding-cards { grid-template-columns:repeat(2,1fr); }
  .fx-deal-type-row { grid-template-columns:1fr 1fr; }
  .fx-eod-summary { grid-template-columns:1fr 1fr; }
  .fx-hero { flex-direction:column; align-items:flex-start; }
}

/* Mobile app sidebar: match the desktop dark navy navigation */
@media (max-width: 900px) {
  html[data-theme="dark"] .sidebar,
  html.native-app-mode .sidebar,
  html.pwa-mode .sidebar,
  .sidebar {
    background: #0f172a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent !important;
  }

  html[data-theme="dark"] .sidebar.open,
  html.native-app-mode .sidebar.open,
  html.pwa-mode .sidebar.open,
  .sidebar.open {
    box-shadow: 22px 0 55px rgba(2, 6, 23, 0.45) !important;
  }

  html.native-app-mode .brand-block,
  html.pwa-mode .brand-block,
  .sidebar .brand-block {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  html.native-app-mode .brand-mark,
  html.pwa-mode .brand-mark,
  .sidebar .brand-mark {
    background: transparent !important;
    padding: 0 !important;
  }

  html.native-app-mode .brand-block .eyebrow,
  html.pwa-mode .brand-block .eyebrow,
  .sidebar .brand-block .eyebrow {
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.1em !important;
  }

  html.native-app-mode .brand-block h1,
  html.pwa-mode .brand-block h1,
  .sidebar .brand-block h1 {
    color: #fff !important;
  }

  html.native-app-mode .sidebar-close,
  html.pwa-mode .sidebar-close,
  .sidebar .sidebar-close {
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
  }

  html.native-app-mode .sidebar-close:hover,
  html.pwa-mode .sidebar-close:hover,
  .sidebar .sidebar-close:hover,
  html.native-app-mode .sidebar-close:focus-visible,
  html.pwa-mode .sidebar-close:focus-visible,
  .sidebar .sidebar-close:focus-visible {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
  }

  html.native-app-mode .nav-list,
  html.pwa-mode .nav-list,
  .sidebar .nav-list {
    gap: 12px !important;
  }

  html.native-app-mode .nav-group,
  html.pwa-mode .nav-group,
  .sidebar .nav-group {
    gap: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html.native-app-mode .nav-group + .nav-group,
  html.pwa-mode .nav-group + .nav-group,
  .sidebar .nav-group + .nav-group {
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  html.native-app-mode .nav-group-label,
  html.pwa-mode .nav-group-label,
  .sidebar .nav-group-label {
    padding: 0 10px 4px !important;
    color: rgba(148, 163, 184, 0.65) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
  }

  html.native-app-mode .nav-item,
  html.native-app-mode .nav-item.nested,
  html.pwa-mode .nav-item,
  html.pwa-mode .nav-item.nested,
  .sidebar .nav-item,
  .sidebar .nav-item.nested {
    min-height: 44px !important;
    padding: 9px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(203, 213, 225, 0.84) !important;
    font-size: 13px !important;
    font-weight: 560 !important;
    box-shadow: none !important;
  }

  html.native-app-mode .nav-item.nested,
  html.pwa-mode .nav-item.nested,
  .sidebar .nav-item.nested {
    padding-left: 18px !important;
    font-size: 12.5px !important;
  }

  html.native-app-mode .nav-item svg,
  html.pwa-mode .nav-item svg,
  .sidebar .nav-item svg {
    opacity: 0.58 !important;
  }

  html.native-app-mode .nav-item:hover,
  html.pwa-mode .nav-item:hover,
  .sidebar .nav-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
  }

  html.native-app-mode .nav-item:hover svg,
  html.native-app-mode .nav-item.active svg,
  html.pwa-mode .nav-item:hover svg,
  html.pwa-mode .nav-item.active svg,
  .sidebar .nav-item:hover svg,
  .sidebar .nav-item.active svg {
    opacity: 1 !important;
  }

  html.native-app-mode .nav-item.active,
  html.pwa-mode .nav-item.active,
  .sidebar .nav-item.active {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #fff !important;
    font-weight: 650 !important;
  }

  html.native-app-mode .nav-item.active::after,
  html.pwa-mode .nav-item.active::after,
  .sidebar .nav-item.active::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    bottom: 20% !important;
    width: 3px !important;
    border-radius: 0 2px 2px 0 !important;
    background: #10b981 !important;
  }

  html.native-app-mode .sidebar-card,
  html.pwa-mode .sidebar-card,
  .sidebar .sidebar-card,
  html.native-app-mode .sidebar-account,
  html.pwa-mode .sidebar-account,
  .sidebar .sidebar-account {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
  }

  html.native-app-mode .sidebar-account-label,
  html.pwa-mode .sidebar-account-label,
  .sidebar .sidebar-account-label {
    color: rgba(148, 163, 184, 0.70) !important;
  }

  html.native-app-mode .sidebar-logout,
  html.pwa-mode .sidebar-logout,
  .sidebar .sidebar-logout,
  html.native-app-mode #company-switcher-btn,
  html.pwa-mode #company-switcher-btn,
  .sidebar #company-switcher-btn {
    border-color: rgba(37, 99, 235, 0.35) !important;
    background: rgba(37, 99, 235, 0.14) !important;
    color: #dbeafe !important;
  }

  html.native-app-mode .sidebar-logout:hover,
  html.pwa-mode .sidebar-logout:hover,
  .sidebar .sidebar-logout:hover,
  html.native-app-mode #company-switcher-btn:hover,
  html.pwa-mode #company-switcher-btn:hover,
  .sidebar #company-switcher-btn:hover {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #fff !important;
  }
}

/* ── Mobile scroll: body is the single scroller ─────────────────────────────
   Uses body.bb-app-active (specificity 0,2,0) to reliably beat the earlier
   0,1,0 rules that set overflow:hidden on app-shell/workspace/page-section.
   Higher specificity wins regardless of cascade order.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Body is the scroll container when the app is active */
  body.bb-app-active {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* These containers must NOT create their own scroll context —
     overflow:visible on both axes is the only safe combination.
     The parent selector gives 0,2,0 specificity which beats the 0,1,0
     overflow:hidden rules set earlier in this file. */
  body.bb-app-active .app-shell,
  body.bb-app-active .workspace {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  body.bb-app-active .page-section,
  body.bb-app-active .page-section.active {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* Create/edit panels: full-height panels with their own internal scroll */
  body.bb-app-active .quote-create-panel.open,
  body.bb-app-active .bill-create-panel.open,
  body.bb-app-active .vc-create-panel.open,
  body.bb-app-active .retainer-create-panel.open,
  body.bb-app-active .so-create-panel.open,
  body.bb-app-active .sr-create-panel.open,
  body.bb-app-active .ri-create-panel.open,
  body.bb-app-active .cn-create-panel.open,
  body.bb-app-active .po-create-panel.open,
  body.bb-app-active .customer-create-panel.open,
  body.bb-app-active .item-create-panel.open,
  body.bb-app-active .exp-create-panel.open,
  body.bb-app-active .pmt-create-panel.open,
  body.bb-app-active .pmade-create-panel.open,
  body.bb-app-active .re-create-panel.open,
  body.bb-app-active .coa-create-panel.open,
  body.bb-app-active .recurring-bill-create-panel.open {
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* POS: its own layout — keep as-is */
  body.bb-app-active .pos-shell {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.bb-app-active .pos-catalog,
  body.bb-app-active .pos-cart,
  body.bb-app-active .pos-items-grid,
  body.bb-app-active .pos-cart-lines,
  body.bb-app-active .pos-txn-panel {
    max-height: none !important;
    overflow-y: visible !important;
  }
  body.bb-app-active .pos-cart {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
}

/* ── Nawal financial copilot ─────────────────────────────────────────────── */
.ai-chat-fab {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.38), 0 2px 8px rgba(37, 99, 235, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ai-chat-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.46), 0 4px 12px rgba(37, 99, 235, 0.24);
}

.ai-chat-panel {
  width: 460px;
  height: min(680px, calc(100vh - 176px));
  max-height: none;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 32px 80px rgba(2, 8, 23, 0.28), 0 8px 24px rgba(2, 8, 23, 0.1);
}

.ai-chat-panel--expanded {
  width: min(780px, calc(100vw - 48px));
  height: min(800px, calc(100vh - 48px));
  right: 24px;
  bottom: 24px;
}

.ai-chat-header {
  min-height: 66px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #060e24 0%, #0d1e3f 60%, #0b1a38 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ai-chat-avatar {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ai-chat-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ai-chat-sub {
  margin-top: 2px;
  color: #94afd1;
  font-size: 11px;
  opacity: 1;
}

.ai-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-chat-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c8d8ee;
  background: transparent;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}

.ai-chat-icon-btn:hover,
.ai-chat-icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  outline: none;
}

.ai-chat-context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  color: var(--muted);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  flex-shrink: 0;
}

.ai-chat-context-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15), 0 0 8px rgba(22, 163, 74, 0.28);
}

.ai-chat-company {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink2);
  font-weight: 650;
}

.ai-readonly-badge {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(22, 163, 74, 0.28);
  border-radius: 999px;
  color: #15803d;
  background: rgba(22, 163, 74, 0.08);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ai-chat-messages {
  min-height: 0;
  padding: 16px;
  gap: 12px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface) 40%);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.ai-chat-welcome {
  margin: auto 0;
  padding: 22px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.ai-welcome-kicker {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

html[data-theme="dark"] .ai-welcome-kicker {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
}

.ai-welcome-title {
  margin-top: 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.ai-welcome-copy {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.ai-starter-prompts {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.ai-starter-prompt {
  width: 100%;
  min-height: 38px;
  padding: 8px 32px 8px 12px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink2);
  background: var(--surface-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s, transform 0.14s, box-shadow 0.14s;
}

.ai-starter-prompt::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  color: #2563eb;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.14s;
}

.ai-starter-prompt:hover,
.ai-starter-prompt:focus-visible {
  border-color: rgba(37, 99, 235, 0.4);
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.04);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.ai-starter-prompt:hover::after,
.ai-starter-prompt:focus-visible::after {
  transform: translateY(-50%) translateX(2px);
}

html[data-theme="dark"] .ai-starter-prompt:hover,
html[data-theme="dark"] .ai-starter-prompt:focus-visible {
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(96, 165, 250, 0.35);
}

.ai-msg-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 94%;
}

.ai-msg--user .ai-msg-content { align-items: flex-end; }
.ai-msg--bot .ai-msg-content { width: 100%; align-items: flex-start; }

.ai-msg-bubble {
  max-width: 100%;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.58;
}

.ai-msg--bot .ai-msg-bubble {
  border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.ai-msg--user .ai-msg-bubble {
  border-bottom-right-radius: 3px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.ai-msg-typing .ai-msg-bubble {
  min-width: 56px;
  padding: 12px 15px;
  font-style: normal;
}

.ai-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ai-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  animation: ai-typing-pulse 1.2s ease-in-out infinite;
}

.ai-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes ai-typing-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0) scale(0.85); }
  30% { opacity: 1; transform: translateY(-3px) scale(1); }
}

.ai-evidence-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.18s;
}

.ai-evidence-card:hover { box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1); }

.ai-evidence-card--profit-loss  { border-top: 3px solid #2563eb; }
.ai-evidence-card--overdue      { border-top: 3px solid #dc2626; }
.ai-evidence-card--banking      { border-top: 3px solid #0891b2; }
.ai-evidence-card--overview     { border-top: 3px solid #16a34a; }
.ai-evidence-card--unpaid-bills { border-top: 3px solid #d97706; }
.ai-evidence-card--cash-flow    { border-top: 3px solid #7c3aed; }

.ai-evidence-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 13px 10px;
}

.ai-evidence-heading { min-width: 0; }
.ai-evidence-title { color: var(--ink); font-size: 12.5px; font-weight: 750; letter-spacing: -0.01em; }
.ai-evidence-subtitle { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.4; }

.ai-verified-badge {
  flex-shrink: 0;
  padding: 2px 7px;
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 999px;
  color: #15803d;
  background: rgba(22, 163, 74, 0.07);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[data-theme="dark"] .ai-verified-badge {
  border-color: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  background: rgba(74, 222, 128, 0.07);
}

.ai-evidence-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ai-evidence-metric {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid var(--line);
}

.ai-evidence-metric:last-child { border-right: 0; }
.ai-evidence-metric-label { color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; }
.ai-evidence-metric-value { margin-top: 5px; color: var(--ink); font-size: 12px; font-weight: 780; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ai-evidence-metric--positive .ai-evidence-metric-value { color: #15803d; }
.ai-evidence-metric--negative .ai-evidence-metric-value { color: #b91c1c; }
.ai-evidence-metric--warning  .ai-evidence-metric-value { color: #b45309; }

html[data-theme="dark"] .ai-evidence-metric--positive .ai-evidence-metric-value { color: #4ade80; }
html[data-theme="dark"] .ai-evidence-metric--negative .ai-evidence-metric-value { color: #f87171; }
html[data-theme="dark"] .ai-evidence-metric--warning  .ai-evidence-metric-value { color: #fbbf24; }

.ai-evidence-rows { padding: 0 13px; }
.ai-evidence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.ai-evidence-row:last-child { border-bottom: 0; }
.ai-evidence-row-main { min-width: 0; }
.ai-evidence-row-label { overflow: hidden; color: var(--ink2); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ai-evidence-row-detail { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.ai-evidence-row-value { flex-shrink: 0; color: var(--ink); font-size: 11px; font-weight: 750; letter-spacing: -0.01em; text-align: right; }

.ai-evidence-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 13px;
  color: var(--muted);
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
  font-size: 9.5px;
}

.ai-evidence-source {
  padding: 4px 9px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 6px;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.04);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
}

.ai-evidence-source:hover,
.ai-evidence-source:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.45);
  outline: none;
}

html[data-theme="dark"] .ai-evidence-source {
  border-color: rgba(96, 165, 250, 0.25);
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.06);
}

html[data-theme="dark"] .ai-evidence-source:hover,
html[data-theme="dark"] .ai-evidence-source:focus-visible {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.4);
}

.ai-chat-input-row {
  gap: 8px;
  padding: 10px 12px 7px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.ai-chat-input,
html.native-app-mode .ai-chat-input,
html.pwa-mode .ai-chat-input {
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--surface-soft) !important;
  font-size: 13px !important;
  transition: border-color 0.14s, box-shadow 0.14s !important;
}

.ai-chat-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
}

.ai-chat-send {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transition: box-shadow 0.14s, transform 0.14s;
}

.ai-chat-send:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.42);
  transform: translateY(-1px);
}

.ai-chat-send:active:not(:disabled) { transform: translateY(0); }

.ai-chat-disclaimer {
  padding: 0 12px 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9.5px;
  line-height: 1.35;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .ai-chat-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: min(640px, calc(100dvh - 158px)) !important;
    max-height: none !important;
    border-radius: 14px !important;
  }

  .ai-chat-panel--expanded {
    top: 8px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }

  .ai-chat-messages { padding: 12px; }
  .ai-chat-welcome { margin: auto 0; padding: 16px; }
  .ai-evidence-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-evidence-metric:nth-child(2n) { border-right: 0; }
  .ai-evidence-metric:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 420px) {
  .ai-chat-header { padding: 11px 12px; }
  .ai-chat-avatar { width: 34px; height: 34px; }
  .ai-chat-sub { font-size: 10.5px; }
  .ai-chat-company { max-width: 190px; }
  .ai-chat-icon-btn { width: 30px; height: 30px; }
  .ai-chat-input-row { padding-inline: 10px; }
  .ai-chat-disclaimer { padding-inline: 10px; }
}

/* ── Nawal AI confirm card ──────────────────────────────────────────────── */
.ai-confirm-card {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-top: 3px solid #d97706;
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.ai-confirm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px;
}

.ai-confirm-heading {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.35;
}

.ai-confirm-badge {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 20px;
  background: #fef3c7;
  color: #92400e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-theme="dark"] .ai-confirm-badge {
  background: rgba(217, 119, 6, 0.18);
  color: #fbbf24;
}

.ai-confirm-details {
  padding: 0 12px 6px;
}

.ai-confirm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.ai-confirm-detail-row:last-child { border-bottom: 0; }

.ai-confirm-detail-label {
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}

.ai-confirm-detail-value {
  color: var(--ink);
  font-weight: 650;
  text-align: right;
}

.ai-confirm-warning {
  margin: 0 12px 10px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fffbeb;
  color: #78350f;
  font-size: 10.5px;
  line-height: 1.45;
}

html[data-theme="dark"] .ai-confirm-warning {
  background: rgba(217, 119, 6, 0.1);
  color: #fcd34d;
}

.ai-confirm-actions {
  display: flex;
  gap: 7px;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--line);
}

.ai-confirm-btn {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.14s;
}

.ai-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-confirm-btn--confirm {
  background: #2563eb;
  color: #fff;
}

.ai-confirm-btn--confirm:hover:not(:disabled) { background: #1d4ed8; }

.ai-confirm-btn--cancel {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink2);
}

.ai-confirm-btn--cancel:hover:not(:disabled) { border-color: var(--ink2); }

/* Customer editor: keep full-screen mobile editing above app chrome. */
@media (max-width: 768px) {
  body.bb-app-active .customer-create-panel.open {
    z-index: 1600 !important;
  }

  .customer-zoho-form .customer-radio-row input[type="radio"],
  .customer-zoho-form .customer-check-row input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  .customer-zoho-form .customer-check-row input[type="checkbox"] {
    border-radius: 4px !important;
  }

  .customer-zoho-form .customer-radio-row {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  .customer-zoho-form .customer-radio-row label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
  }

  .customer-create-panel.open .customer-form-actions {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 768px) {
  html[data-theme="dark"] body.bb-app-active .customer-zoho-form .customer-form-body {
    background: #070a12 !important;
  }

  html[data-theme="dark"] body.bb-app-active .customer-zoho-form .customer-main-fields,
  html[data-theme="dark"] body.bb-app-active .customer-zoho-form .customer-tab-panel {
    border: 1px solid #1b2940 !important;
    border-radius: 8px !important;
    background: #0c1220 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
  }

  html[data-theme="dark"] body.bb-app-active .customer-zoho-form input:not([type="radio"]):not([type="checkbox"]),
  html[data-theme="dark"] body.bb-app-active .customer-zoho-form select,
  html[data-theme="dark"] body.bb-app-active .customer-zoho-form textarea {
    border-color: #23334d !important;
    background: #070b14 !important;
    color: #edf4ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  }

  html[data-theme="dark"] body.bb-app-active .customer-zoho-form input::placeholder,
  html[data-theme="dark"] body.bb-app-active .customer-zoho-form textarea::placeholder {
    color: #62748e !important;
  }

  html[data-theme="dark"] body.bb-app-active .customer-zoho-form .customer-addon-field span {
    border-color: #23334d !important;
    background: #101827 !important;
    color: #7f94b0 !important;
  }

  html[data-theme="dark"] body.bb-app-active .customer-zoho-form .customer-tabs {
    border-bottom-color: #1b2940 !important;
  }

  html[data-theme="dark"] body.bb-app-active .customer-zoho-form .customer-form-actions {
    border-top-color: #1b2940 !important;
    background: rgba(7, 10, 18, 0.98) !important;
    box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.38) !important;
  }
}

/* Professional expandable sidebar navigation */
.sidebar .nav-group[data-nav-group] {
  --nav-group-accent: #60a5fa;
  position: relative;
  display: grid;
  gap: 0 !important;
  margin: 2px 0 !important;
  padding: 4px !important;
  overflow: hidden;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.sidebar .nav-group[data-nav-group="sales"] { --nav-group-accent: #34d399; }
.sidebar .nav-group[data-nav-group="purchases"] { --nav-group-accent: #fbbf24; }
.sidebar .nav-group[data-nav-group="accountant"] { --nav-group-accent: #60a5fa; }

.sidebar .nav-group[data-nav-group]:not(.collapsed) {
  border-color: rgba(148, 163, 184, 0.16) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.sidebar .nav-group[data-nav-group] > .nav-group-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 7px 8px !important;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(203, 213, 225, 0.76) !important;
  font: inherit;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  transition: background 150ms ease, color 150ms ease;
}

.sidebar .nav-group[data-nav-group] > .nav-group-label:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc !important;
}

.sidebar .nav-group[data-nav-group] > .nav-group-label:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--nav-group-accent) 72%, white);
  outline-offset: 1px;
}

.sidebar .nav-group[data-nav-group]:not(.collapsed) > .nav-group-label {
  background: rgba(255, 255, 255, 0.055);
  color: #fff !important;
}

.nav-group-label-main,
.nav-group-label-meta {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.nav-group-label-main { gap: 9px; }
.nav-group-label-meta { flex: 0 0 auto; gap: 5px; }
.nav-group-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-group-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.07);
  color: rgba(148, 163, 184, 0.78);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.nav-group-icon svg { width: 15px; height: 15px; }

.nav-group[data-nav-group]:not(.collapsed) .nav-group-icon {
  border-color: color-mix(in srgb, var(--nav-group-accent) 28%, transparent);
  background: color-mix(in srgb, var(--nav-group-accent) 12%, transparent);
  color: var(--nav-group-accent);
}

.nav-group-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.07);
  color: rgba(148, 163, 184, 0.72);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.nav-group[data-nav-group]:not(.collapsed) .nav-group-count {
  border-color: color-mix(in srgb, var(--nav-group-accent) 24%, transparent);
  background: color-mix(in srgb, var(--nav-group-accent) 10%, transparent);
  color: color-mix(in srgb, var(--nav-group-accent) 82%, white);
}

.sidebar .nav-group[data-nav-group] .nav-group-chevron {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 6px;
  opacity: 0.62;
  transition: transform 200ms ease, opacity 150ms ease, background 150ms ease;
}

.sidebar .nav-group[data-nav-group] > .nav-group-label:hover .nav-group-chevron {
  background: rgba(255, 255, 255, 0.06);
  opacity: 1;
}

.sidebar .nav-group[data-nav-group].collapsed .nav-group-chevron { transform: rotate(-90deg); }

.sidebar .nav-group[data-nav-group] > .nav-group-body {
  display: grid;
  gap: 2px;
  max-height: 660px;
  margin: 2px 0 0;
  padding: 4px 2px 5px 11px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  background: linear-gradient(color-mix(in srgb, var(--nav-group-accent) 34%, transparent), color-mix(in srgb, var(--nav-group-accent) 8%, transparent)) 12px 0 / 1px 100% no-repeat;
  transition: max-height 240ms cubic-bezier(.2, .7, .2, 1), padding 220ms ease, margin 220ms ease, opacity 170ms ease, transform 220ms ease, visibility 0s linear 0s;
}

.sidebar .nav-group[data-nav-group].collapsed > .nav-group-body {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: max-height 200ms ease, padding 200ms ease, margin 200ms ease, opacity 130ms ease, transform 180ms ease, visibility 0s linear 200ms;
}

.sidebar .nav-group[data-nav-group] .nav-item.nested {
  min-height: 38px !important;
  margin: 1px 0 !important;
  padding: 7px 9px 7px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(203, 213, 225, 0.76) !important;
  font-size: 12.5px !important;
  font-weight: 540 !important;
  box-shadow: none !important;
}

.sidebar .nav-group[data-nav-group] .nav-item.nested svg {
  width: 15px;
  height: 15px;
  opacity: 0.56 !important;
}

.sidebar .nav-group[data-nav-group] .nav-item.nested:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #f1f5f9 !important;
}

.sidebar .nav-group[data-nav-group] .nav-item.nested.active {
  border-color: color-mix(in srgb, var(--nav-group-accent) 22%, transparent) !important;
  background: color-mix(in srgb, var(--nav-group-accent) 12%, transparent) !important;
  color: #fff !important;
  font-weight: 680 !important;
  box-shadow: inset 3px 0 0 var(--nav-group-accent) !important;
}

.sidebar .nav-group[data-nav-group] .nav-item.nested.active::after { display: none !important; }
.sidebar .nav-group[data-nav-group] .nav-item.nested.active svg { color: var(--nav-group-accent); opacity: 1 !important; }

@media (max-width: 900px) {
  .sidebar .nav-group[data-nav-group] {
    margin: 3px 0 !important;
    padding: 5px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.025) !important;
  }

  .sidebar .nav-group[data-nav-group]:not(.collapsed) {
    border-color: rgba(148, 163, 184, 0.20) !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  .sidebar .nav-group[data-nav-group] > .nav-group-label {
    min-height: 48px;
    padding: 8px !important;
    font-size: 13.5px !important;
  }

  .sidebar .nav-group[data-nav-group] .nav-item.nested {
    min-height: 44px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-group[data-nav-group],
  .sidebar .nav-group[data-nav-group] > .nav-group-label,
  .sidebar .nav-group[data-nav-group] > .nav-group-body,
  .sidebar .nav-group[data-nav-group] .nav-group-chevron {
    transition: none !important;
  }
}

/* Focused item record experience */
.items-module.item-detail-open {
  display: grid;
  gap: 0;
}

.items-module.item-detail-open > .module-toolbar,
.items-module.item-detail-open > .inv-kpi-grid,
.items-module.item-detail-open > .items-list-panel {
  display: none !important;
}

.items-module.item-detail-open > .item-detail-card {
  margin: 0;
}

.items-module.item-detail-open .item-detail-card {
  overflow: hidden;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.items-module.item-detail-open .item-record-header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.items-module.item-detail-open .item-back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 750;
}

.items-module.item-detail-open .item-back-button svg {
  width: 17px;
  height: 17px;
}

.items-module.item-detail-open .item-back-button:hover {
  border-color: #aebbd0;
  background: var(--surface-soft);
  color: var(--ink);
}

.item-record-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.item-record-breadcrumb svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  opacity: 0.55;
}

.item-record-breadcrumb strong {
  overflow: hidden;
  color: var(--ink2);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.items-module.item-detail-open .item-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.item-record-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 11px;
  font-weight: 750;
}

.item-record-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.item-record-status.is-low {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.item-record-status.is-low > span {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.13);
}

.item-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.16);
}

.item-edit-button svg {
  width: 15px;
  height: 15px;
}

.item-edit-button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.items-module.item-detail-open .item-detail-hero {
  padding: 26px 28px 0;
  border-bottom: 0;
  background: var(--surface);
}

.items-module.item-detail-open .item-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 28px;
  align-items: center;
  padding: 0 0 26px;
}

.item-record-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.item-record-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
}

.item-record-mark svg {
  width: 27px;
  height: 27px;
}

.item-record-title {
  min-width: 0;
}

.item-record-kicker {
  display: block;
  margin-bottom: 5px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.items-module.item-detail-open .item-detail-summary h3 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.item-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.item-record-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 5px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.items-module.item-detail-open .item-add-image {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 132px;
  height: 112px;
  min-height: 112px;
  padding: 10px;
  overflow: hidden;
  border: 1px dashed #b8c5d8;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  box-shadow: none;
}

.item-record-image-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: #eaf2ff;
  color: #2563eb;
}

.item-record-image-icon svg {
  width: 19px;
  height: 19px;
}

.items-module.item-detail-open .item-add-image small {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 650;
}

.items-module.item-detail-open .item-add-image:hover {
  border-color: #60a5fa;
  background: #f1f7ff;
  color: #2563eb;
}

.items-module.item-detail-open .item-add-image.has-image {
  padding: 0;
  border-style: solid;
  background: #e2e8f0;
}

.items-module.item-detail-open .item-add-image.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.items-module.item-detail-open .item-add-image.has-image span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  padding: 6px;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 10px;
  text-align: center;
}

.item-record-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.item-record-metric {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 96px;
  padding: 17px 20px 18px 18px;
}

.item-record-metric + .item-record-metric {
  border-left: 1px solid var(--line);
}

.item-record-metric::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #60a5fa;
}

.item-record-metric.is-cost::before { background: #f59e0b; }
.item-record-metric.is-margin::before { background: #22c55e; }
.item-record-metric.is-margin.is-negative::before { background: #ef4444; }
.item-record-metric.is-stock::before { background: #8b5cf6; }

.item-record-metric > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item-record-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-record-metric small {
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.items-module.item-detail-open .item-detail-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.items-module.item-detail-open .item-detail-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 52px;
  padding: 0 13px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.items-module.item-detail-open .item-detail-tab svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.items-module.item-detail-open .item-detail-tab small {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: #e2e8f0;
  color: #475569;
  font-size: 9px;
}

.items-module.item-detail-open .item-detail-tab:hover {
  background: #f1f5f9;
  color: var(--ink);
}

.items-module.item-detail-open .item-detail-tab.active {
  border-bottom-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

.items-module.item-detail-open .item-detail-tab.active small {
  background: var(--accent-soft);
  color: var(--accent);
}

.items-module.item-detail-open .item-detail-body {
  min-height: 350px;
  padding: 22px 24px 28px;
  background: var(--surface);
}

.item-details-shell {
  display: grid;
  gap: 24px;
}

.item-details-section + .item-details-section {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.item-details-section-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
}

.item-details-section-head > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 6px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 850;
}

.item-details-section-head > div {
  display: grid;
  gap: 2px;
}

.item-details-section-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.item-details-section-head small {
  color: var(--muted);
  font-size: 10px;
}

.items-module.item-detail-open .item-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
}

.items-module.item-detail-open .item-detail-grid--descriptions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.items-module.item-detail-open .item-detail-field {
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  border-radius: 0;
  background: transparent;
}

.items-module.item-detail-open .item-detail-field span {
  color: #7c8ba1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.items-module.item-detail-open .item-detail-field strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.items-module.item-detail-open .item-transactions-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.item-transaction-filter {
  display: grid;
  gap: 5px;
  min-width: min(100%, 270px);
}

.item-transaction-filter > span {
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.items-module.item-detail-open .item-transactions-head select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.items-module.item-detail-open .item-transaction-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.items-module.item-detail-open .item-transaction-tools > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.items-module.item-detail-open .item-transaction-tools button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 750;
}

.items-module.item-detail-open .item-transaction-tools button svg {
  width: 15px;
  height: 15px;
}

.items-module.item-detail-open .item-detail-body > .table-shell {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.items-module.item-detail-open .item-transaction-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: 255px;
  padding: 34px 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--muted);
  text-align: center;
}

.items-module.item-detail-open .item-transaction-empty .empty-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 3px;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  background: #eef4ff;
  color: #2563eb;
}

.item-empty-kicker {
  color: #2563eb !important;
  font-size: 9px !important;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.items-module.item-detail-open .item-transaction-empty strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.items-module.item-detail-open .item-transaction-empty > span:not(.item-empty-kicker) {
  max-width: 480px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.item-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 7px;
  padding: 7px 11px;
  border: 1px solid #bfd2f5;
  border-radius: 6px;
  background: #fff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 750;
}

.item-empty-action svg {
  width: 14px;
  height: 14px;
}

.item-empty-action:hover {
  border-color: #60a5fa;
  background: #eff6ff;
}

@media (max-width: 900px) {
  .items-module.item-detail-open .item-record-header {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .item-record-breadcrumb {
    display: none;
  }

  .items-module.item-detail-open .item-detail-actions {
    margin-left: auto;
  }

  .items-module.item-detail-open .item-detail-hero {
    padding: 20px 16px 0;
  }

  .items-module.item-detail-open .item-detail-summary {
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 16px;
  }

  .items-module.item-detail-open .item-add-image {
    width: 110px;
    height: 100px;
    min-height: 100px;
  }

  .item-record-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .item-record-metric:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .item-record-metric:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .items-module.item-detail-open .item-detail-body {
    padding: 18px 14px 22px;
  }

  .items-module.item-detail-open .item-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .items-module.item-detail-open .item-record-header {
    align-items: center;
  }

  .item-record-status {
    display: none;
  }

  .item-edit-button {
    width: 38px;
    padding: 7px;
    font-size: 0;
  }

  .item-edit-button svg {
    width: 17px;
    height: 17px;
  }

  .items-module.item-detail-open .item-detail-summary {
    grid-template-columns: 1fr;
  }

  .item-record-identity {
    align-items: flex-start;
  }

  .item-record-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .items-module.item-detail-open .item-detail-summary h3 {
    font-size: 24px;
  }

  .items-module.item-detail-open .item-add-image {
    width: 100%;
    height: 96px;
    justify-self: stretch;
  }

  .item-record-metric {
    min-height: 88px;
    padding: 14px 12px 14px 14px;
  }

  .item-record-metric strong {
    font-size: 16px;
  }

  .items-module.item-detail-open .item-detail-tabs {
    padding: 0 8px;
  }

  .items-module.item-detail-open .item-detail-tab {
    min-height: 48px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .items-module.item-detail-open .item-detail-grid,
  .items-module.item-detail-open .item-detail-grid--descriptions {
    grid-template-columns: 1fr;
  }

  .items-module.item-detail-open .item-transactions-head {
    align-items: stretch;
    flex-direction: column;
  }

  .item-transaction-filter {
    min-width: 0;
  }

  .items-module.item-detail-open .item-transaction-tools {
    justify-content: space-between;
  }

  .items-module.item-detail-open .item-transaction-tools button {
    width: auto;
  }
}

[data-theme="dark"] .items-module.item-detail-open .item-detail-card,
[data-theme="dark"] .items-module.item-detail-open .item-record-header,
[data-theme="dark"] .items-module.item-detail-open .item-detail-hero,
[data-theme="dark"] .items-module.item-detail-open .item-detail-body {
  border-color: #26354d;
  background: #0d1524;
}

[data-theme="dark"] .items-module.item-detail-open .item-back-button,
[data-theme="dark"] .items-module.item-detail-open .item-add-image,
[data-theme="dark"] .items-module.item-detail-open .item-transactions-head,
[data-theme="dark"] .items-module.item-detail-open .item-transactions-head select,
[data-theme="dark"] .items-module.item-detail-open .item-transaction-tools button,
[data-theme="dark"] .item-empty-action {
  border-color: #30415e;
  background: #111c2e;
  color: #cbd5e1;
}

[data-theme="dark"] .items-module.item-detail-open .item-detail-summary h3,
[data-theme="dark"] .item-record-metric strong,
[data-theme="dark"] .item-details-section-head strong,
[data-theme="dark"] .items-module.item-detail-open .item-detail-field strong,
[data-theme="dark"] .items-module.item-detail-open .item-transaction-empty strong {
  color: #f1f5f9;
}

[data-theme="dark"] .item-record-mark,
[data-theme="dark"] .item-details-section-head > span,
[data-theme="dark"] .item-record-image-icon,
[data-theme="dark"] .items-module.item-detail-open .item-transaction-empty .empty-icon {
  border-color: #214778;
  background: #122746;
  color: #60a5fa;
}

[data-theme="dark"] .item-record-meta span,
[data-theme="dark"] .items-module.item-detail-open .item-detail-tabs {
  border-color: #26354d;
  background: #111c2e;
  color: #94a3b8;
}

[data-theme="dark"] .item-record-metrics,
[data-theme="dark"] .item-record-metric + .item-record-metric,
[data-theme="dark"] .item-details-section + .item-details-section,
[data-theme="dark"] .items-module.item-detail-open .item-detail-field {
  border-color: #26354d;
}

[data-theme="dark"] .items-module.item-detail-open .item-detail-tab {
  background: transparent;
  color: #94a3b8;
}

[data-theme="dark"] .items-module.item-detail-open .item-detail-tab:hover {
  background: #162238;
  color: #f1f5f9;
}

[data-theme="dark"] .items-module.item-detail-open .item-detail-tab.active,
[data-theme="dark"] .item-empty-action,
[data-theme="dark"] .item-empty-kicker {
  color: #60a5fa !important;
}

[data-theme="dark"] .items-module.item-detail-open .item-transaction-empty {
  border-color: #30415e;
  background: #101a2a;
}

@media (prefers-reduced-motion: reduce) {
  .items-module.item-detail-open * {
    scroll-behavior: auto !important;
  }
}

/* Purchase order line items: scoped desktop refinement. */
@media (min-width: 769px) {
  .po-zoho-form .po-item-table {
    --po-line-border: #dfe6f0;
    --po-line-border-strong: #cfd9e8;
    --po-line-header: #f6f8fc;
    --po-line-row: #ffffff;
    --po-line-row-hover: #f8fbff;
    --po-line-control: #ffffff;
    --po-line-control-hover: #fbfdff;
    --po-line-muted: #718096;
    --po-line-accent-soft: #eef5ff;
    --po-line-footer: #fafcff;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--po-line-border);
    border-top: 3px solid var(--accent);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.035);
  }

  .po-zoho-form .po-item-head {
    min-height: 72px;
    padding: 15px 18px;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--surface) 0%, var(--po-line-footer) 100%);
  }

  .po-zoho-form .po-item-head .line-item-heading {
    gap: 12px;
  }

  .po-zoho-form .po-item-head .line-item-icon {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(145deg, #2f73ed 0%, #1e56c7 100%);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
  }

  .po-zoho-form .po-item-head .line-item-copy {
    gap: 4px;
  }

  .po-zoho-form .po-item-head .line-item-copy strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .po-zoho-form .po-item-head .line-item-copy span {
    color: var(--po-line-muted);
    font-size: 12px;
  }

  .po-zoho-form .po-table-shell {
    overflow-x: auto;
    border: 0;
    border-top: 1px solid var(--po-line-border);
    border-radius: 0;
    background: var(--po-line-row);
    box-shadow: none;
  }

  .po-create-panel.open .po-zoho-form .po-table-shell table {
    min-width: 1080px;
  }

  .po-zoho-form .po-table-shell thead th {
    height: 42px;
    padding: 0 10px;
    border-bottom: 1px solid var(--po-line-border-strong);
    background: var(--po-line-header);
    color: #607089;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1;
    vertical-align: middle;
  }

  .po-zoho-form .po-th-num {
    width: 46px;
    text-align: center;
  }

  .po-zoho-form .po-th-item {
    min-width: 310px;
    padding-left: 12px !important;
  }

  .po-zoho-form .po-th-account { width: 205px; }
  .po-zoho-form .po-th-qty { width: 92px; text-align: right; }
  .po-zoho-form .po-th-rate { width: 128px; text-align: right; }
  .po-zoho-form .po-th-vat { width: 126px; text-align: left; }
  .po-zoho-form .po-th-amount { width: 132px; text-align: right; }
  .po-zoho-form .po-th-del { width: 46px; }

  .po-zoho-form .po-table-shell tbody tr {
    border: 0;
    background: var(--po-line-row);
    transition: background-color 160ms ease;
  }

  .po-zoho-form .po-table-shell tbody tr:hover {
    background: var(--po-line-row-hover);
  }

  .po-zoho-form .po-table-shell tbody td {
    height: 62px;
    padding: 9px 6px !important;
    border-bottom: 1px solid var(--po-line-border);
    background: transparent;
    vertical-align: middle;
    transition: background-color 160ms ease;
  }

  .po-zoho-form .po-table-shell tbody tr:last-child td {
    border-bottom: 0;
  }

  .po-zoho-form .po-table-shell tbody td:focus-within {
    background: var(--po-line-row-hover);
  }

  .po-zoho-form .po-row-num {
    padding-inline: 8px !important;
    color: var(--po-line-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
  }

  .po-zoho-form .po-row-num::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 999px;
    background: #9bbbf4;
    vertical-align: 1px;
  }

  .po-zoho-form .po-item-cell {
    padding-left: 8px !important;
  }

  .po-zoho-form .po-item-text,
  .po-zoho-form .po-account-select,
  .po-zoho-form .po-qty-input,
  .po-zoho-form .po-rate-input,
  .po-zoho-form .po-vat-select {
    width: 100%;
    height: 42px;
    min-height: 42px;
    border: 1px solid var(--po-line-border);
    border-radius: 8px;
    background: var(--po-line-control);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  }

  .po-zoho-form .po-item-text:hover,
  .po-zoho-form .po-account-select:hover,
  .po-zoho-form .po-qty-input:hover,
  .po-zoho-form .po-rate-input:hover,
  .po-zoho-form .po-vat-select:hover {
    border-color: var(--po-line-border-strong);
    background: var(--po-line-control-hover);
  }

  .po-zoho-form .po-item-text:focus,
  .po-zoho-form .po-account-select:focus,
  .po-zoho-form .po-qty-input:focus,
  .po-zoho-form .po-rate-input:focus,
  .po-zoho-form .po-vat-select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--po-line-control);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13), 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .po-zoho-form .po-item-text {
    padding-inline: 12px;
    font-size: 13px;
  }

  .po-zoho-form .po-item-text::placeholder {
    color: #8b9ab2;
  }

  .po-zoho-form .po-account-select,
  .po-zoho-form .po-vat-select {
    padding-inline: 10px;
    color: #45566f;
    font-size: 12px;
    text-align: left;
  }

  .po-zoho-form .po-qty-input,
  .po-zoho-form .po-rate-input {
    padding-inline: 10px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .po-zoho-form .po-amount-cell {
    padding-inline: 8px !important;
    text-align: right;
  }

  .po-zoho-form .po-amount-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #cfe0fb;
    border-radius: 8px;
    background: var(--po-line-accent-soft);
    color: #173f82;
    font-size: 14px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
  }

  .po-zoho-form .po-del-cell {
    padding-inline: 5px !important;
  }

  .po-zoho-form .po-del-row {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #8b9ab2;
    opacity: 0.36;
    transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease, background-color 160ms ease;
  }

  .po-zoho-form .po-table-shell tbody tr:hover .po-del-row,
  .po-zoho-form .po-del-row:focus-visible {
    opacity: 1;
  }

  .po-zoho-form .po-del-row:hover {
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626;
  }

  .po-zoho-form .po-del-row:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
  }

  .po-zoho-form .po-line-actions {
    padding: 13px 18px;
    border-top: 1px solid var(--po-line-border);
    background: var(--po-line-footer);
  }

  .po-zoho-form .po-add-row-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #bfd3f5;
    border-radius: 9px;
    background: var(--po-line-control);
    color: var(--accent);
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .po-zoho-form .po-add-row-btn:hover {
    padding: 0 14px;
    border-color: var(--accent);
    background: var(--po-line-accent-soft);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
  }

  .po-zoho-form .po-add-row-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
  }

  [data-theme="dark"] .po-zoho-form .po-item-table {
    --po-line-border: #263650;
    --po-line-border-strong: #344866;
    --po-line-header: #111a2b;
    --po-line-row: #0b1020;
    --po-line-row-hover: #111c30;
    --po-line-control: #0e1728;
    --po-line-control-hover: #122039;
    --po-line-muted: #8da0b9;
    --po-line-accent-soft: #11284b;
    --po-line-footer: #0d1525;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  }

  [data-theme="dark"] .po-zoho-form .po-table-shell thead th {
    color: #91a4bd;
  }

  [data-theme="dark"] .po-zoho-form .po-item-text,
  [data-theme="dark"] .po-zoho-form .po-account-select,
  [data-theme="dark"] .po-zoho-form .po-qty-input,
  [data-theme="dark"] .po-zoho-form .po-rate-input,
  [data-theme="dark"] .po-zoho-form .po-vat-select {
    color: #e3ecf8;
  }

  [data-theme="dark"] .po-zoho-form .po-account-select,
  [data-theme="dark"] .po-zoho-form .po-vat-select {
    color: #bdcbe0;
  }

  [data-theme="dark"] .po-zoho-form .po-amount-value {
    border-color: #254a7d;
    color: #dceaff;
  }

  [data-theme="dark"] .po-zoho-form .po-del-row:hover {
    border-color: #7f1d1d;
    background: #3a141b;
    color: #fca5a5;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTALLED MOBILE APP — final native experience layer
   Scoped to Capacitor/standalone mode so desktop and mobile web stay intact.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html.native-app-mode body,
  html.pwa-mode body {
    --mobile-app-bg: #f2f5fa;
    --mobile-app-surface: #ffffff;
    --mobile-app-surface-soft: #f7f9fd;
    --mobile-app-line: #e1e7f0;
    --mobile-app-line-strong: #d2dce9;
    --mobile-app-muted: #718096;
    --mobile-app-header-a: #0b2f7f;
    --mobile-app-header-b: #185bd8;
    --mobile-app-shadow: 0 10px 28px rgba(15, 23, 42, 0.08), 0 2px 7px rgba(15, 23, 42, 0.035);
    --mobile-app-shadow-raised: 0 18px 42px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);
    background: var(--mobile-app-bg) !important;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: none;
  }

  html.native-app-mode,
  html.pwa-mode,
  html.native-app-mode [class*="-create-panel"].open,
  html.pwa-mode [class*="-create-panel"].open {
    scrollbar-width: none !important;
  }

  html.native-app-mode::-webkit-scrollbar,
  html.pwa-mode::-webkit-scrollbar,
  html.native-app-mode body::-webkit-scrollbar,
  html.pwa-mode body::-webkit-scrollbar,
  html.native-app-mode [class*="-create-panel"].open::-webkit-scrollbar,
  html.pwa-mode [class*="-create-panel"].open::-webkit-scrollbar,
  html.native-app-mode .quote-create-panel.open::-webkit-scrollbar,
  html.pwa-mode .quote-create-panel.open::-webkit-scrollbar,
  html.native-app-mode .bill-create-panel.open::-webkit-scrollbar,
  html.pwa-mode .bill-create-panel.open::-webkit-scrollbar {
    display: none;
  }

  html.native-app-mode button,
  html.native-app-mode a,
  html.native-app-mode input,
  html.native-app-mode select,
  html.native-app-mode textarea,
  html.pwa-mode button,
  html.pwa-mode a,
  html.pwa-mode input,
  html.pwa-mode select,
  html.pwa-mode textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html.native-app-mode body.bb-app-active .app-shell,
  html.native-app-mode body.bb-app-active .workspace,
  html.native-app-mode body.bb-app-active .page-section,
  html.pwa-mode body.bb-app-active .app-shell,
  html.pwa-mode body.bb-app-active .workspace,
  html.pwa-mode body.bb-app-active .page-section {
    background: var(--mobile-app-bg) !important;
  }

  html.native-app-mode body.bb-app-active .workspace,
  html.pwa-mode body.bb-app-active .workspace {
    gap: 0 !important;
    padding: 0 0 calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.native-app-mode body.bb-app-active .page-section,
  html.pwa-mode body.bb-app-active .page-section {
    padding: 14px 14px 4px !important;
  }

  /* Native header: one focused row, no browser-style search controls. */
  html.native-app-mode body.bb-app-active .topbar,
  html.pwa-mode body.bb-app-active .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 800 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: calc(66px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important;
    border: 0 !important;
    border-radius: 0 0 22px 22px !important;
    background:
      radial-gradient(circle at 82% -35%, rgba(101, 163, 255, 0.55), transparent 48%),
      linear-gradient(135deg, var(--mobile-app-header-a) 0%, var(--mobile-app-header-b) 100%) !important;
    box-shadow: 0 12px 30px rgba(11, 47, 127, 0.22) !important;
  }

  html.native-app-mode body.bb-app-active .topbar-search,
  html.native-app-mode body.bb-app-active .topbar-theme-toggle,
  html.native-app-mode body.bb-app-active .topbar-account-email,
  html.native-app-mode body.bb-app-active .topbar-logout,
  html.native-app-mode body.bb-app-active .last-saved-indicator,
  html.native-app-mode body.bb-app-active .subscription-badge,
  html.pwa-mode body.bb-app-active .topbar-search,
  html.pwa-mode body.bb-app-active .topbar-theme-toggle,
  html.pwa-mode body.bb-app-active .topbar-account-email,
  html.pwa-mode body.bb-app-active .topbar-logout,
  html.pwa-mode body.bb-app-active .last-saved-indicator,
  html.pwa-mode body.bb-app-active .subscription-badge {
    display: none !important;
  }

  html.native-app-mode body.bb-app-active .topbar > div:first-of-type,
  html.pwa-mode body.bb-app-active .topbar > div:first-of-type {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    padding-left: 2px !important;
  }

  html.native-app-mode body.bb-app-active .topbar .eyebrow,
  html.pwa-mode body.bb-app-active .topbar .eyebrow {
    overflow: hidden !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.67) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: 0.09em !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html.native-app-mode body.bb-app-active .topbar h2,
  html.pwa-mode body.bb-app-active .topbar h2 {
    overflow: hidden !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.native-app-mode body.bb-app-active .topbar-actions,
  html.pwa-mode body.bb-app-active .topbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 44px !important;
    min-width: 44px !important;
    gap: 0 !important;
  }

  html.native-app-mode body.bb-app-active .sidebar-toggle,
  html.native-app-mode body.bb-app-active .topbar-account-btn,
  html.pwa-mode body.bb-app-active .sidebar-toggle,
  html.pwa-mode body.bb-app-active .topbar-account-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px);
  }

  html.native-app-mode body.bb-app-active .topbar-account-avatar,
  html.pwa-mode body.bb-app-active .topbar-account-avatar {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  /* Consistent touch surfaces and content cards. */
  html.native-app-mode body.bb-app-active .page-section .panel,
  html.pwa-mode body.bb-app-active .page-section .panel {
    border: 1px solid var(--mobile-app-line) !important;
    border-radius: 20px !important;
    background: var(--mobile-app-surface) !important;
    box-shadow: var(--mobile-app-shadow) !important;
  }

  html.native-app-mode body.bb-app-active .page-section .primary-button,
  html.pwa-mode body.bb-app-active .page-section .primary-button {
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #2b72ee 0%, #1454ce 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    box-shadow: 0 8px 18px rgba(32, 96, 232, 0.22) !important;
  }

  html.native-app-mode body.bb-app-active .page-section .ghost-button,
  html.pwa-mode body.bb-app-active .page-section .ghost-button {
    min-height: 44px !important;
    border: 1px solid var(--mobile-app-line-strong) !important;
    border-radius: 13px !important;
    background: var(--mobile-app-surface) !important;
    color: var(--ink2) !important;
    font-weight: 680 !important;
  }

  html.native-app-mode body.bb-app-active button:active,
  html.pwa-mode body.bb-app-active button:active {
    transform: scale(0.975);
  }

  /* Dashboard: financial values get full-width swipeable cards. */
  html.native-app-mode body.bb-app-active .dash-header,
  html.pwa-mode body.bb-app-active .dash-header {
    position: relative !important;
    overflow: hidden !important;
    gap: 15px !important;
    margin: 0 0 12px !important;
    padding: 19px 17px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 92% 18%, rgba(51, 196, 255, 0.34), transparent 34%),
      linear-gradient(145deg, #081d4c 0%, #123e9b 54%, #1f67e7 100%) !important;
    box-shadow: 0 16px 32px rgba(12, 50, 129, 0.22) !important;
  }

  html.native-app-mode body.bb-app-active .dash-company,
  html.pwa-mode body.bb-app-active .dash-company {
    font-size: 23px !important;
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
  }

  html.native-app-mode body.bb-app-active .dash-kpi-grid,
  html.pwa-mode body.bb-app-active .dash-kpi-grid {
    display: grid !important;
    grid-auto-columns: min(82vw, 330px) !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 0 12px !important;
    padding: 0 0 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 0 !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html.native-app-mode body.bb-app-active .dash-kpi-grid::-webkit-scrollbar,
  html.pwa-mode body.bb-app-active .dash-kpi-grid::-webkit-scrollbar,
  html.native-app-mode body.bb-app-active .inv-kpi-grid::-webkit-scrollbar,
  html.pwa-mode body.bb-app-active .inv-kpi-grid::-webkit-scrollbar,
  html.native-app-mode body.bb-app-active .module-summary-row::-webkit-scrollbar,
  html.pwa-mode body.bb-app-active .module-summary-row::-webkit-scrollbar,
  html.native-app-mode body.bb-app-active .period-filter-bar::-webkit-scrollbar,
  html.pwa-mode body.bb-app-active .period-filter-bar::-webkit-scrollbar,
  html.native-app-mode body.bb-app-active .status-filter-bar::-webkit-scrollbar,
  html.pwa-mode body.bb-app-active .status-filter-bar::-webkit-scrollbar {
    display: none;
  }

  html.native-app-mode body.bb-app-active .dash-kpi-grid > *,
  html.pwa-mode body.bb-app-active .dash-kpi-grid > * {
    min-height: 132px !important;
    padding: 18px !important;
    border-radius: 20px !important;
    scroll-snap-align: start;
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.10) !important;
  }

  html.native-app-mode body.bb-app-active .dash-kpi-grid strong,
  html.pwa-mode body.bb-app-active .dash-kpi-grid strong {
    overflow: visible !important;
    font-size: clamp(24px, 7vw, 31px) !important;
    letter-spacing: -0.04em !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html.native-app-mode body.bb-app-active .dash-cfi-row,
  html.pwa-mode body.bb-app-active .dash-cfi-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.native-app-mode body.bb-app-active .dash-cfi-card,
  html.pwa-mode body.bb-app-active .dash-cfi-card {
    min-width: 0 !important;
    padding: 15px !important;
    border: 1px solid var(--mobile-app-line) !important;
    border-radius: 18px !important;
    background: var(--mobile-app-surface) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055) !important;
  }

  html.native-app-mode body.bb-app-active .dash-cfi-value,
  html.pwa-mode body.bb-app-active .dash-cfi-value {
    overflow-wrap: anywhere !important;
    font-size: clamp(18px, 5.2vw, 23px) !important;
    line-height: 1.1 !important;
  }

  html.native-app-mode body.bb-app-active .dash-main-grid,
  html.pwa-mode body.bb-app-active .dash-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  /* Module headers and KPI strips use native card/carousel rhythm. */
  html.native-app-mode body.bb-app-active .inv-list-header,
  html.pwa-mode body.bb-app-active .inv-list-header {
    gap: 16px !important;
    padding: 18px 16px 12px !important;
  }

  html.native-app-mode body.bb-app-active .inv-list-title,
  html.pwa-mode body.bb-app-active .inv-list-title {
    font-size: 24px !important;
    letter-spacing: -0.035em !important;
  }

  html.native-app-mode body.bb-app-active .inv-list-actions,
  html.pwa-mode body.bb-app-active .inv-list-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html.native-app-mode body.bb-app-active .inv-list-actions .primary-button,
  html.pwa-mode body.bb-app-active .inv-list-actions .primary-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  html.native-app-mode body.bb-app-active .inv-list-actions .ghost-button,
  html.pwa-mode body.bb-app-active .inv-list-actions .ghost-button {
    justify-content: center !important;
    min-width: 0 !important;
    padding-inline: 7px !important;
    font-size: 11.5px !important;
  }

  html.native-app-mode body.bb-app-active .inv-kpi-grid,
  html.pwa-mode body.bb-app-active .inv-kpi-grid {
    display: grid !important;
    grid-auto-columns: min(79vw, 310px) !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    gap: 11px !important;
    width: 100% !important;
    padding: 4px 16px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 16px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html.native-app-mode body.bb-app-active .inv-kpi-card,
  html.pwa-mode body.bb-app-active .inv-kpi-card {
    min-height: 112px !important;
    padding: 17px !important;
    border-radius: 18px !important;
    scroll-snap-align: start;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06) !important;
  }

  html.native-app-mode body.bb-app-active .inv-kpi-value,
  html.pwa-mode body.bb-app-active .inv-kpi-value {
    overflow: visible !important;
    font-size: 24px !important;
    letter-spacing: -0.03em !important;
    text-overflow: clip !important;
  }

  html.native-app-mode body.bb-app-active .module-summary-row,
  html.pwa-mode body.bb-app-active .module-summary-row {
    display: grid !important;
    grid-auto-columns: min(76vw, 292px) !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    gap: 11px !important;
    width: 100% !important;
    padding-bottom: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html.native-app-mode body.bb-app-active .module-summary-row > *,
  html.pwa-mode body.bb-app-active .module-summary-row > * {
    border-radius: 18px !important;
    scroll-snap-align: start;
  }

  html.native-app-mode body.bb-app-active .period-filter-bar,
  html.native-app-mode body.bb-app-active .status-filter-bar,
  html.pwa-mode body.bb-app-active .period-filter-bar,
  html.pwa-mode body.bb-app-active .status-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 7px 15px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html.native-app-mode body.bb-app-active .period-btn,
  html.native-app-mode body.bb-app-active .status-flt-btn,
  html.pwa-mode body.bb-app-active .period-btn,
  html.pwa-mode body.bb-app-active .status-flt-btn {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* Transaction rows are native list cards instead of miniature web tables. */
  html.native-app-mode body.bb-app-active .table-shell tbody,
  html.pwa-mode body.bb-app-active .table-shell tbody {
    gap: 12px !important;
  }

  html.native-app-mode body.bb-app-active .table-shell tbody tr,
  html.pwa-mode body.bb-app-active .table-shell tbody tr {
    padding: 14px 15px !important;
    border: 1px solid var(--mobile-app-line) !important;
    border-radius: 18px !important;
    background: var(--mobile-app-surface) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055) !important;
  }

  html.native-app-mode body.bb-app-active .table-shell tbody td,
  html.pwa-mode body.bb-app-active .table-shell tbody td {
    gap: 14px !important;
    padding: 7px 0 !important;
    font-size: 13px !important;
  }

  html.native-app-mode body.bb-app-active .table-shell tbody td::before,
  html.pwa-mode body.bb-app-active .table-shell tbody td::before {
    min-width: 86px !important;
    color: var(--mobile-app-muted) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.065em !important;
  }

  html.native-app-mode body.bb-app-active .table-shell tbody td:last-child,
  html.pwa-mode body.bb-app-active .table-shell tbody td:last-child {
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--mobile-app-line) !important;
  }

  /* Full-screen create/edit flows with a native header and sticky actions. */
  html.native-app-mode body.bb-app-active .quote-create-panel.open,
  html.native-app-mode body.bb-app-active .bill-create-panel.open,
  html.native-app-mode body.bb-app-active .customer-create-panel.open,
  html.native-app-mode body.bb-app-active .item-create-panel.open,
  html.native-app-mode body.bb-app-active .exp-create-panel.open,
  html.native-app-mode body.bb-app-active .pmt-create-panel.open,
  html.native-app-mode body.bb-app-active .pmade-create-panel.open,
  html.native-app-mode body.bb-app-active .vc-create-panel.open,
  html.native-app-mode body.bb-app-active .re-create-panel.open,
  html.native-app-mode body.bb-app-active .coa-create-panel.open,
  html.native-app-mode body.bb-app-active .po-create-panel.open,
  html.native-app-mode body.bb-app-active .recurring-bill-create-panel.open,
  html.pwa-mode body.bb-app-active .quote-create-panel.open,
  html.pwa-mode body.bb-app-active .bill-create-panel.open,
  html.pwa-mode body.bb-app-active .customer-create-panel.open,
  html.pwa-mode body.bb-app-active .item-create-panel.open,
  html.pwa-mode body.bb-app-active .exp-create-panel.open,
  html.pwa-mode body.bb-app-active .pmt-create-panel.open,
  html.pwa-mode body.bb-app-active .pmade-create-panel.open,
  html.pwa-mode body.bb-app-active .vc-create-panel.open,
  html.pwa-mode body.bb-app-active .re-create-panel.open,
  html.pwa-mode body.bb-app-active .coa-create-panel.open,
  html.pwa-mode body.bb-app-active .po-create-panel.open,
  html.pwa-mode body.bb-app-active .recurring-bill-create-panel.open {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--mobile-app-bg) !important;
    box-shadow: none !important;
  }

  html.native-app-mode body.bb-app-active .quote-form-title,
  html.native-app-mode body.bb-app-active .customer-form-title,
  html.native-app-mode body.bb-app-active .item-modal-header,
  html.native-app-mode body.bb-app-active .bill-form-title-row,
  html.pwa-mode body.bb-app-active .quote-form-title,
  html.pwa-mode body.bb-app-active .customer-form-title,
  html.pwa-mode body.bb-app-active .item-modal-header,
  html.pwa-mode body.bb-app-active .bill-form-title-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    min-height: calc(68px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.72) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--mobile-app-surface) 92%, transparent) !important;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(18px) saturate(150%);
  }

  html.native-app-mode body.bb-app-active .quote-form-title h3,
  html.native-app-mode body.bb-app-active .customer-form-title h3,
  html.native-app-mode body.bb-app-active .item-modal-header h3,
  html.pwa-mode body.bb-app-active .quote-form-title h3,
  html.pwa-mode body.bb-app-active .customer-form-title h3,
  html.pwa-mode body.bb-app-active .item-modal-header h3 {
    font-size: 19px !important;
    font-weight: 820 !important;
    letter-spacing: -0.025em !important;
  }

  html.native-app-mode body.bb-app-active .quote-close-button,
  html.native-app-mode body.bb-app-active .po-close-button,
  html.pwa-mode body.bb-app-active .quote-close-button,
  html.pwa-mode body.bb-app-active .po-close-button {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--mobile-app-line) !important;
    border-radius: 13px !important;
    background: var(--mobile-app-surface-soft) !important;
  }

  html.native-app-mode body.bb-app-active .quote-form-body,
  html.native-app-mode body.bb-app-active .bill-form-body,
  html.pwa-mode body.bb-app-active .quote-form-body,
  html.pwa-mode body.bb-app-active .bill-form-body {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px 24px !important;
    gap: 13px !important;
    background: var(--mobile-app-bg) !important;
  }

  html.native-app-mode body.bb-app-active .quote-band,
  html.native-app-mode body.bb-app-active .quote-details-grid,
  html.native-app-mode body.bb-app-active .po-details-grid,
  html.native-app-mode body.bb-app-active .po-bottom-grid,
  html.native-app-mode body.bb-app-active .quote-terms-grid,
  html.native-app-mode body.bb-app-active .po-item-table,
  html.native-app-mode body.bb-app-active .bill-form-section,
  html.pwa-mode body.bb-app-active .quote-band,
  html.pwa-mode body.bb-app-active .quote-details-grid,
  html.pwa-mode body.bb-app-active .po-details-grid,
  html.pwa-mode body.bb-app-active .po-bottom-grid,
  html.pwa-mode body.bb-app-active .quote-terms-grid,
  html.pwa-mode body.bb-app-active .po-item-table,
  html.pwa-mode body.bb-app-active .bill-form-section {
    border: 1px solid var(--mobile-app-line) !important;
    border-radius: 20px !important;
    background: var(--mobile-app-surface) !important;
    box-shadow: 0 7px 22px rgba(15, 23, 42, 0.06) !important;
  }

  html.native-app-mode body.bb-app-active input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  html.native-app-mode body.bb-app-active select,
  html.native-app-mode body.bb-app-active textarea,
  html.pwa-mode body.bb-app-active input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  html.pwa-mode body.bb-app-active select,
  html.pwa-mode body.bb-app-active textarea {
    min-height: 50px !important;
    border: 1px solid var(--mobile-app-line-strong) !important;
    border-radius: 14px !important;
    background: var(--mobile-app-surface-soft) !important;
    color: var(--ink) !important;
    padding: 0 13px !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  html.native-app-mode body.bb-app-active textarea,
  html.pwa-mode body.bb-app-active textarea {
    min-height: 96px !important;
    padding-block: 12px !important;
  }

  html.native-app-mode body.bb-app-active input:focus,
  html.native-app-mode body.bb-app-active select:focus,
  html.native-app-mode body.bb-app-active textarea:focus,
  html.pwa-mode body.bb-app-active input:focus,
  html.pwa-mode body.bb-app-active select:focus,
  html.pwa-mode body.bb-app-active textarea:focus {
    outline: none !important;
    border-color: #2b72ee !important;
    background: var(--mobile-app-surface) !important;
    box-shadow: 0 0 0 3px rgba(43, 114, 238, 0.13) !important;
  }

  html.native-app-mode body.bb-app-active .quote-form-actions,
  html.native-app-mode body.bb-app-active .bill-form-actions,
  html.native-app-mode body.bb-app-active .exp-form-actions,
  html.native-app-mode body.bb-app-active .customer-form-actions,
  html.native-app-mode body.bb-app-active .item-modal-actions,
  html.native-app-mode body.bb-app-active .rb-form-actions,
  html.native-app-mode body.bb-app-active .modal-footer,
  html.pwa-mode body.bb-app-active .quote-form-actions,
  html.pwa-mode body.bb-app-active .bill-form-actions,
  html.pwa-mode body.bb-app-active .exp-form-actions,
  html.pwa-mode body.bb-app-active .customer-form-actions,
  html.pwa-mode body.bb-app-active .item-modal-actions,
  html.pwa-mode body.bb-app-active .rb-form-actions,
  html.pwa-mode body.bb-app-active .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(203, 213, 225, 0.78) !important;
    background: color-mix(in srgb, var(--mobile-app-surface) 94%, transparent) !important;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(18px) saturate(150%);
  }

  html.native-app-mode body.bb-app-active .quote-form-actions:has(> button:nth-of-type(3)) .primary-button,
  html.pwa-mode body.bb-app-active .quote-form-actions:has(> button:nth-of-type(3)) .primary-button {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html.native-app-mode body.bb-app-active .quote-form-actions > span,
  html.pwa-mode body.bb-app-active .quote-form-actions > span {
    display: none !important;
  }

  /* The navigation and copilot step aside during focused data-entry flows. */
  html.native-app-mode body.bb-app-active:has(.quote-create-panel.open, .bill-create-panel.open, .customer-create-panel.open, .item-create-panel.open, .exp-create-panel.open, .pmt-create-panel.open, .pmade-create-panel.open, .vc-create-panel.open, .re-create-panel.open, .coa-create-panel.open, .po-create-panel.open, .recurring-bill-create-panel.open) .mobile-bottom-nav,
  html.native-app-mode body.bb-app-active:has(.quote-create-panel.open, .bill-create-panel.open, .customer-create-panel.open, .item-create-panel.open, .exp-create-panel.open, .pmt-create-panel.open, .pmade-create-panel.open, .vc-create-panel.open, .re-create-panel.open, .coa-create-panel.open, .po-create-panel.open, .recurring-bill-create-panel.open) .ai-chat-fab,
  html.pwa-mode body.bb-app-active:has(.quote-create-panel.open, .bill-create-panel.open, .customer-create-panel.open, .item-create-panel.open, .exp-create-panel.open, .pmt-create-panel.open, .pmade-create-panel.open, .vc-create-panel.open, .re-create-panel.open, .coa-create-panel.open, .po-create-panel.open, .recurring-bill-create-panel.open) .mobile-bottom-nav,
  html.pwa-mode body.bb-app-active:has(.quote-create-panel.open, .bill-create-panel.open, .customer-create-panel.open, .item-create-panel.open, .exp-create-panel.open, .pmt-create-panel.open, .pmade-create-panel.open, .vc-create-panel.open, .re-create-panel.open, .coa-create-panel.open, .po-create-panel.open, .recurring-bill-create-panel.open) .ai-chat-fab {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Bottom navigation: compact floating Material-style destination bar. */
  html.native-app-mode body.bb-app-active .mobile-bottom-nav,
  html.pwa-mode body.bb-app-active .mobile-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: end !important;
    width: min(calc(100% - 20px), 430px) !important;
    min-height: 72px !important;
    padding: 7px 7px 6px !important;
    border: 1px solid rgba(203, 213, 225, 0.78) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(22px) saturate(160%);
  }

  html.native-app-mode body.bb-app-active .mobile-bottom-nav .mob-nav-btn,
  html.pwa-mode body.bb-app-active .mobile-bottom-nav .mob-nav-btn {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    color: #7b8ba3 !important;
    font-size: 9.5px !important;
    font-weight: 650 !important;
    transition: color 160ms ease, background-color 160ms ease, transform 120ms ease !important;
  }

  html.native-app-mode body.bb-app-active .mobile-bottom-nav .mob-nav-btn svg,
  html.pwa-mode body.bb-app-active .mobile-bottom-nav .mob-nav-btn svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.9 !important;
  }

  html.native-app-mode body.bb-app-active .mobile-bottom-nav .mob-nav-btn.active:not(.mob-nav-btn--primary),
  html.pwa-mode body.bb-app-active .mobile-bottom-nav .mob-nav-btn.active:not(.mob-nav-btn--primary) {
    background: #edf4ff !important;
    color: #1f64df !important;
  }

  html.native-app-mode body.bb-app-active .mob-nav-dot,
  html.pwa-mode body.bb-app-active .mob-nav-dot {
    display: none !important;
  }

  html.native-app-mode body.bb-app-active .mob-nav-btn--primary,
  html.pwa-mode body.bb-app-active .mob-nav-btn--primary {
    overflow: visible !important;
    color: #225fc8 !important;
  }

  html.native-app-mode body.bb-app-active .mob-nav-primary-icon,
  html.pwa-mode body.bb-app-active .mob-nav-primary-icon {
    position: absolute !important;
    top: -17px !important;
    left: 50% !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border: 4px solid rgba(255, 255, 255, 0.96) !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg, #347df5 0%, #1555cf 100%) !important;
    box-shadow: 0 10px 24px rgba(32, 96, 232, 0.37) !important;
    transform: translateX(-50%) rotate(0.001deg) !important;
  }

  html.native-app-mode body.bb-app-active .mob-nav-primary-label,
  html.pwa-mode body.bb-app-active .mob-nav-primary-label {
    margin-top: 31px !important;
    font-size: 9.5px !important;
    font-weight: 750 !important;
  }

  html.native-app-mode body.bb-app-active .ai-chat-fab,
  html.pwa-mode body.bb-app-active .ai-chat-fab {
    right: 16px !important;
    bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    border: 3px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.34) !important;
  }

  /* Navigation drawer and bottom sheets. */
  html.native-app-mode body.bb-app-active .sidebar,
  html.pwa-mode body.bb-app-active .sidebar {
    width: min(88vw, 340px) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-radius: 0 24px 24px 0 !important;
    box-shadow: 28px 0 64px rgba(2, 6, 23, 0.42) !important;
  }

  html.native-app-mode body.bb-app-active .sidebar-backdrop.open,
  html.pwa-mode body.bb-app-active .sidebar-backdrop.open {
    background: rgba(2, 6, 23, 0.52) !important;
    backdrop-filter: blur(4px);
  }

  html.native-app-mode body.bb-app-active .modal-overlay,
  html.pwa-mode body.bb-app-active .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(2, 6, 23, 0.55) !important;
    backdrop-filter: blur(4px);
  }

  html.native-app-mode body.bb-app-active .modal-card,
  html.pwa-mode body.bb-app-active .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: var(--mobile-app-surface) !important;
    box-shadow: 0 -20px 60px rgba(2, 6, 23, 0.24) !important;
  }

  /* Installed-app sign in should feel like a product entry screen. */
  html.native-app-mode #auth-overlay .auth-page-bg,
  html.pwa-mode #auth-overlay .auth-page-bg {
    min-height: 100dvh !important;
    padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    background:
      radial-gradient(circle at 85% 12%, rgba(96, 165, 250, 0.42), transparent 30%),
      radial-gradient(circle at 8% 88%, rgba(45, 212, 191, 0.17), transparent 36%),
      linear-gradient(155deg, #061a45 0%, #0d3d99 56%, #1d64df 100%) !important;
  }

  html.native-app-mode #auth-overlay .auth-page-panel,
  html.pwa-mode #auth-overlay .auth-page-panel {
    width: 100% !important;
    max-width: 410px !important;
    padding: 28px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 28px 70px rgba(2, 12, 38, 0.34) !important;
    backdrop-filter: blur(20px);
  }

  html.native-app-mode #auth-overlay input:not([type="checkbox"]):not([type="radio"]),
  html.pwa-mode #auth-overlay input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 52px !important;
    border: 1px solid #d9e2ef !important;
    border-radius: 14px !important;
    background: #f7f9fd !important;
    padding-inline: 14px !important;
  }

  /* Dark mode keeps the same hierarchy without hard-coded light surfaces. */
  html.native-app-mode[data-theme="dark"] body,
  html.pwa-mode[data-theme="dark"] body {
    --mobile-app-bg: #070b14;
    --mobile-app-surface: #0d1524;
    --mobile-app-surface-soft: #111c2e;
    --mobile-app-line: #223149;
    --mobile-app-line-strong: #30415e;
    --mobile-app-muted: #8295ad;
    --mobile-app-header-a: #071735;
    --mobile-app-header-b: #123a87;
    --mobile-app-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    --mobile-app-shadow-raised: 0 20px 48px rgba(0, 0, 0, 0.42);
  }

  html.native-app-mode[data-theme="dark"] body.bb-app-active .mobile-bottom-nav,
  html.pwa-mode[data-theme="dark"] body.bb-app-active .mobile-bottom-nav {
    border-color: rgba(132, 180, 255, 0.15) !important;
    background: rgba(9, 15, 27, 0.94) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.48) !important;
  }

  html.native-app-mode[data-theme="dark"] body.bb-app-active .mobile-bottom-nav .mob-nav-btn.active:not(.mob-nav-btn--primary),
  html.pwa-mode[data-theme="dark"] body.bb-app-active .mobile-bottom-nav .mob-nav-btn.active:not(.mob-nav-btn--primary) {
    background: rgba(77, 138, 245, 0.14) !important;
    color: #84b4ff !important;
  }

  html.native-app-mode[data-theme="dark"] body.bb-app-active .mob-nav-primary-icon,
  html.pwa-mode[data-theme="dark"] body.bb-app-active .mob-nav-primary-icon {
    border-color: #0a111f !important;
  }
}

@media (max-width: 380px) {
  html.native-app-mode body.bb-app-active .page-section,
  html.pwa-mode body.bb-app-active .page-section {
    padding-inline: 10px !important;
  }

  html.native-app-mode body.bb-app-active .dash-kpi-grid,
  html.pwa-mode body.bb-app-active .dash-kpi-grid {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    grid-auto-columns: 86vw !important;
  }

  html.native-app-mode body.bb-app-active .dash-cfi-row,
  html.pwa-mode body.bb-app-active .dash-cfi-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.native-app-mode body.bb-app-active .mobile-bottom-nav,
  html.pwa-mode body.bb-app-active .mobile-bottom-nav {
    width: calc(100% - 12px) !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  html.native-app-mode *,
  html.pwa-mode * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Installed-mode specificity bridge: these selectors intentionally mirror the
   existing Capacitor/PWA scope so the final phone grid wins the older carousel. */
@media (max-width: 768px) {
  html.native-app-mode body.bb-app-active .page-section [class*="-module"],
  html.pwa-mode body.bb-app-active .page-section [class*="-module"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.native-app-mode body.bb-app-active .page-section .panel,
  html.pwa-mode body.bb-app-active .page-section .panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.native-app-mode body.bb-app-active .inv-list-header,
  html.pwa-mode body.bb-app-active .inv-list-header {
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px 16px 13px !important;
  }

  html.native-app-mode body.bb-app-active .inv-kpi-grid,
  html.pwa-mode body.bb-app-active .inv-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns: unset !important;
    grid-auto-flow: row !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 16px 16px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  html.native-app-mode body.bb-app-active .inv-kpi-card,
  html.pwa-mode body.bb-app-active .inv-kpi-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 108px !important;
    padding: 13px 11px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(15, 35, 66, 0.045) !important;
    scroll-snap-align: none !important;
  }

  html.native-app-mode body.bb-app-active .inv-kpi-value,
  html.pwa-mode body.bb-app-active .inv-kpi-value {
    overflow: hidden !important;
    font-size: clamp(17px, 4.6vw, 19px) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.native-app-mode body.bb-app-active input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  html.native-app-mode body.bb-app-active select,
  html.native-app-mode body.bb-app-active textarea,
  html.pwa-mode body.bb-app-active input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  html.pwa-mode body.bb-app-active select,
  html.pwa-mode body.bb-app-active textarea {
    font-size: 16px !important;
  }
}

/* Installed-app scroll reliability: the root html/body scroller can be left
   locked in installed app windows (seen on Android WebView after native
   drawer/viewport transitions, and reported on installed desktop Chrome
   windows too — same underlying root-scroller failure, not a mobile-only
   issue). Keep the app frame fixed and give the workspace one explicit
   vertical scroller so every module stays reachable, at any window size. */
html.native-app-mode body.bb-app-active,
html.pwa-mode body.bb-app-active {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html.native-app-mode body.bb-app-active .app-shell,
html.pwa-mode body.bb-app-active .app-shell {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.native-app-mode body.bb-app-active .workspace,
html.pwa-mode body.bb-app-active .workspace {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

@media (max-width: 768px) {
  html.native-app-mode body.bb-app-active #settings .stg-nav,
  html.native-app-mode body.bb-app-active #settings .stg-main,
  html.pwa-mode body.bb-app-active #settings .stg-nav,
  html.pwa-mode body.bb-app-active #settings .stg-main {
    max-height: none !important;
    overflow-y: visible !important;
  }

  html.native-app-mode body.bb-app-active #settings .stg-nav,
  html.pwa-mode body.bb-app-active #settings .stg-nav {
    flex: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHOOL & EDUCATION — student finance workspace
   Scoped to the education module so other industries remain unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.edu-module {
  --edu-navy: #0b2b5b;
  --edu-blue: #1d5fd1;
  --edu-sky: #eaf3ff;
  --edu-teal: #0f9f8f;
  --edu-line: #dfe7f2;
  display: grid;
  gap: 16px;
  width: 100%;
}

.edu-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 172px;
  overflow: hidden;
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 8%, rgba(94, 234, 212, 0.24), transparent 31%),
    radial-gradient(circle at 58% 130%, rgba(96, 165, 250, 0.36), transparent 39%),
    linear-gradient(118deg, #081f46 0%, #0d3f83 48%, #1763c5 100%);
  box-shadow: 0 18px 44px rgba(12, 47, 99, 0.19);
}

.edu-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.22;
  background-image: radial-gradient(rgba(255, 255, 255, 0.52) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 38%, #000 100%);
}

.edu-hero-main {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.edu-hero-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 20px;
  color: #d8fbf5;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 24px rgba(3, 18, 44, 0.18);
  backdrop-filter: blur(10px);
}

.edu-hero-mark svg {
  width: 34px;
  height: 34px;
}

.edu-hero-copy {
  min-width: 0;
}

.edu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: #bfe7ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.edu-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 5px rgba(94, 234, 212, 0.13);
}

.edu-hero h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 850;
  letter-spacing: -0.035em;
}

.edu-hero-copy > p {
  max-width: 710px;
  margin: 8px 0 0;
  color: rgba(226, 239, 255, 0.80);
  font-size: 13px;
  line-height: 1.55;
}

.edu-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.edu-hero-badges span {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 700;
}

.edu-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.edu-primary-action,
.edu-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.edu-primary-action svg,
.edu-secondary-action svg {
  width: 16px;
  height: 16px;
}

.edu-primary-action {
  color: #062f2c;
  background: #6ee7d8;
  box-shadow: 0 10px 22px rgba(7, 45, 78, 0.24);
}

.edu-secondary-action {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
}

.edu-primary-action:hover,
.edu-secondary-action:hover {
  transform: translateY(-1px);
}

.edu-primary-action:hover { background: #99f6e4; }
.edu-secondary-action:hover { background: rgba(255, 255, 255, 0.17); }

.edu-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 10px;
}

.edu-kpi-card {
  --edu-card-accent: #2563eb;
  --edu-card-soft: #eff6ff;
  position: relative;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  min-height: 112px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--edu-line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 37, 69, 0.055);
}

.edu-kpi-card::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -28px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--edu-card-soft);
}

.edu-kpi-card--blue { --edu-card-accent: #2563eb; --edu-card-soft: #e8f1ff; }
.edu-kpi-card--violet { --edu-card-accent: #7c3aed; --edu-card-soft: #f0eaff; }
.edu-kpi-card--green { --edu-card-accent: #059669; --edu-card-soft: #e3f8f1; }
.edu-kpi-card--amber { --edu-card-accent: #d97706; --edu-card-soft: #fff4dd; }
.edu-kpi-card--red { --edu-card-accent: #dc2626; --edu-card-soft: #ffebeb; }

.edu-kpi-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 12px;
  color: var(--edu-card-accent);
  background: var(--edu-card-soft);
}

.edu-kpi-icon svg { width: 20px; height: 20px; }

.edu-kpi-card > div:last-child {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.edu-kpi-card span {
  display: block;
  overflow: hidden;
  color: var(--ink3);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.edu-kpi-card strong {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edu-kpi-card small {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: var(--ink3);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edu-health-strip {
  display: grid;
  grid-template-columns: 190px minmax(160px, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  border: 1px solid #dbe7f4;
  border-radius: 15px;
  background: linear-gradient(90deg, #f6faff, #f9fcff);
}

.edu-health-strip > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.edu-health-strip span,
.edu-health-strip small {
  color: var(--ink3);
  font-size: 10px;
}

.edu-health-strip strong {
  color: var(--ink);
  font-size: 12px;
}

.edu-health-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3eaf3;
}

.edu-health-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
}

.edu-health-fill--green { background: linear-gradient(90deg, #10b981, #2dd4bf); }
.edu-health-fill--amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.edu-health-fill--red { background: linear-gradient(90deg, #ef4444, #fb7185); }

.edu-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--edu-line);
  border-radius: 16px;
  background: #f5f8fc;
}

.edu-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--ink2);
  background: transparent;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.edu-tab svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.edu-tab b {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  color: #52627a;
  background: #e4eaf2;
  font-size: 9px;
}

.edu-tab b.is-alert { color: #b91c1c; background: #fee2e2; }

.edu-tab:hover {
  color: var(--edu-blue);
  background: #eaf2ff;
}

.edu-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #164b9d, #2671dc);
  box-shadow: 0 7px 18px rgba(29, 95, 209, 0.22);
}

.edu-tab.is-active b {
  color: #164b9d;
  background: #fff;
}

.edu-content-panel {
  min-height: 326px;
  padding: 20px;
  border: 1px solid var(--edu-line);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(15, 37, 69, 0.05);
}

.edu-content-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.edu-content-toolbar > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.edu-content-toolbar strong { color: var(--ink); font-size: 14px; }
.edu-content-toolbar span { color: var(--ink3); font-size: 11px; }

.edu-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--edu-line);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.edu-data-table {
  min-width: 920px;
  margin: 0;
}

.edu-data-table thead th {
  height: 43px;
  border-bottom-color: var(--edu-line);
  color: #73829a;
  background: #f7f9fc;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.edu-data-table tbody td {
  height: 58px;
  border-bottom-color: #edf1f6;
  font-size: 11px;
}

.edu-data-table tbody tr:last-child td { border-bottom: 0; }
.edu-data-table tbody tr:hover td { background: #f9fbfe; }

.edu-student-name {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.edu-student-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  color: #1d4ed8;
  background: #eaf2ff;
  font-size: 9px;
  font-weight: 850;
}

.edu-class-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #5b21b6;
  background: #f0e9ff;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.edu-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  padding: 38px 24px 24px;
  border: 1px dashed #cbd9eb;
  border-radius: 17px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, #fbfdff, #f8fbff);
}

.edu-empty-state--compact { min-height: 330px; }

.edu-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
  border: 1px solid #cfe0f7;
  border-radius: 20px;
  color: #2563eb;
  background: #ebf3ff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
}

.edu-empty-icon svg { width: 32px; height: 32px; }
.edu-empty-icon--amber { color: #c66a05; background: #fff4dc; border-color: #f6d69b; }
.edu-empty-icon--green { color: #047857; background: #e4f8f1; border-color: #b4ead7; }
.edu-empty-icon--violet { color: #6d28d9; background: #f1eaff; border-color: #d8c7fa; }

.edu-empty-kicker {
  color: var(--edu-blue);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.edu-empty-state h4 {
  margin: 7px 0 7px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.edu-empty-state > p {
  max-width: 580px;
  margin: 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.6;
}

.edu-empty-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
}

.edu-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(760px, 100%);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e4eaf3;
}

.edu-onboarding-steps > div {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  min-width: 0;
  padding: 0 16px;
  text-align: left;
}

.edu-onboarding-steps > div + div { border-left: 1px solid #e4eaf3; }

.edu-onboarding-steps span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #1d4ed8;
  background: #e7f0ff;
  font-size: 10px;
  font-weight: 850;
}

.edu-onboarding-steps strong { color: var(--ink); font-size: 11px; }
.edu-onboarding-steps small { overflow: hidden; color: var(--ink3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.edu-billing-workflow {
  width: min(820px, 100%);
  margin: 4px auto;
  padding: 6px 4px 4px;
}

.edu-arrears-alert {
  margin-bottom: 13px;
  padding: 11px 13px;
  border: 1px solid #fecaca;
  border-radius: 11px;
  color: #b91c1c;
  background: #fff5f5;
  font-size: 11px;
  font-weight: 750;
}

.edu-import-panel {
  width: min(760px, 100%);
  margin: 10px auto;
  padding: 24px;
  border: 1px solid var(--edu-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #f9fbfe, #f4f8fd);
}

[data-theme="dark"] .edu-kpi-card,
[data-theme="dark"] .edu-content-panel {
  border-color: #28374c;
  background: #111b2b;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.20);
}

[data-theme="dark"] .edu-health-strip,
[data-theme="dark"] .edu-tabs,
[data-theme="dark"] .edu-empty-state,
[data-theme="dark"] .edu-import-panel {
  border-color: #28374c;
  background: #0e1929;
}

[data-theme="dark"] .edu-data-table thead th { background: #152235; }
[data-theme="dark"] .edu-data-table tbody tr:hover td { background: #152235; }
[data-theme="dark"] .edu-table-wrap { border-color: #28374c; }
[data-theme="dark"] .edu-health-track { background: #26364b; }
[data-theme="dark"] .edu-tab:hover { background: #172a44; }
[data-theme="dark"] .edu-onboarding-steps,
[data-theme="dark"] .edu-onboarding-steps > div + div { border-color: #2b3a4d; }

@media (max-width: 1550px) {
  .edu-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .edu-kpi-card { min-height: 104px; }
}

@media (max-width: 1280px) {
  .edu-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .edu-module { gap: 12px; }

  .edu-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 21px 18px;
    border-radius: 20px;
  }

  .edu-hero-main { align-items: flex-start; gap: 13px; }
  .edu-hero-mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
  .edu-hero-mark svg { width: 26px; height: 26px; }
  .edu-hero h3 { font-size: 23px; line-height: 1.12; }
  .edu-hero-copy > p { font-size: 12px; }
  .edu-hero-badges { display: none; }
  .edu-hero-actions { width: 100%; }
  .edu-primary-action, .edu-secondary-action { flex: 1 1 0; min-width: 0; }

  .edu-kpi-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 76vw);
    overflow-x: auto;
    padding: 0 1px 5px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .edu-kpi-grid::-webkit-scrollbar,
  .edu-tabs::-webkit-scrollbar { display: none; }
  .edu-kpi-card { min-height: 108px; scroll-snap-align: start; }

  .edu-health-strip {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .edu-health-strip > small { display: none; }

  .edu-tabs {
    display: flex;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 5px;
    scroll-snap-type: x proximity;
  }

  .edu-tab {
    flex: 0 0 auto;
    min-width: max-content;
    padding-inline: 13px;
    scroll-snap-align: start;
  }

  .edu-content-panel {
    min-height: 360px;
    padding: 13px;
    border-radius: 17px;
  }

  .edu-content-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .edu-content-toolbar .ghost-button { width: 100%; }

  .edu-empty-state {
    min-height: 430px;
    padding: 30px 16px 20px;
  }

  .edu-empty-state h4 { font-size: 18px; }
  .edu-empty-actions { flex-direction: column; width: 100%; max-width: 280px; }
  .edu-empty-actions button { width: 100%; }

  .edu-onboarding-steps {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 300px;
  }

  .edu-onboarding-steps > div { padding: 0; }
  .edu-onboarding-steps > div + div { padding-top: 14px; border-top: 1px solid #e4eaf3; border-left: 0; }

  .edu-billing-workflow > div[style*="margin-left:42px"] { margin-left: 0 !important; }
  .edu-billing-workflow div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  .edu-billing-workflow div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .edu-billing-workflow div[style*="justify-content:space-between"] { align-items: stretch !important; flex-direction: column !important; }
  .edu-billing-workflow div[style*="justify-content:space-between"] .primary-button { width: 100%; }

  .edu-import-panel { padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESTAURANT & HOTEL — culinary costing workspace
   Scoped to Recipes & Food Costing so other industries remain unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.resto-module {
  --resto-ink: #3b2115;
  --resto-orange: #ea6a1b;
  --resto-gold: #f5a524;
  --resto-line: #e8e0da;
  display: grid;
  gap: 16px;
  width: 100%;
}

.resto-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 172px;
  overflow: hidden;
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 8%, rgba(251, 191, 36, 0.24), transparent 31%),
    radial-gradient(circle at 54% 135%, rgba(249, 115, 22, 0.32), transparent 41%),
    linear-gradient(118deg, #21130e 0%, #512411 50%, #963d12 100%);
  box-shadow: 0 18px 44px rgba(70, 30, 10, 0.20);
}

.resto-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.17;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.35) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.35) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.35) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.35) 87.5%);
  background-size: 28px 48px;
  mask-image: linear-gradient(90deg, transparent 43%, #000 100%);
}

.resto-hero-main {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.resto-hero-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  color: #ffdf9e;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 24px rgba(24, 10, 3, 0.22);
  backdrop-filter: blur(10px);
}

.resto-hero-mark svg { width: 34px; height: 34px; }
.resto-hero-copy { min-width: 0; }

.resto-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: #ffdca0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.resto-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.14);
}

.resto-hero h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 850;
  letter-spacing: -0.035em;
}

.resto-hero-copy > p {
  max-width: 700px;
  margin: 8px 0 0;
  color: rgba(255, 239, 222, 0.79);
  font-size: 13px;
  line-height: 1.55;
}

.resto-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.resto-hero-badges span {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 700;
}

.resto-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.resto-primary-action,
.resto-secondary-action,
.resto-inline-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.resto-primary-action svg,
.resto-secondary-action svg { width: 16px; height: 16px; }

.resto-primary-action {
  color: #3a1c06;
  background: linear-gradient(135deg, #fbbf24, #fb923c);
  box-shadow: 0 10px 22px rgba(43, 17, 4, 0.26);
}

.resto-secondary-action {
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
}

.resto-primary-action:hover,
.resto-secondary-action:hover,
.resto-inline-add:hover { transform: translateY(-1px); }
.resto-primary-action:hover { background: linear-gradient(135deg, #fcd34d, #fb923c); }
.resto-secondary-action:hover { background: rgba(255, 255, 255, 0.17); }

.resto-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.resto-kpi-card {
  --resto-card-accent: #2563eb;
  --resto-card-soft: #eff6ff;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  min-width: 0;
  min-height: 116px;
  overflow: hidden;
  padding: 17px;
  border: 1px solid var(--resto-line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(58, 34, 19, 0.055);
}

.resto-kpi-card::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -28px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--resto-card-soft);
}

.resto-kpi-card--blue { --resto-card-accent: #2563eb; --resto-card-soft: #e8f1ff; }
.resto-kpi-card--green { --resto-card-accent: #059669; --resto-card-soft: #e3f8f1; }
.resto-kpi-card--amber { --resto-card-accent: #d97706; --resto-card-soft: #fff4dd; }
.resto-kpi-card--red { --resto-card-accent: #dc2626; --resto-card-soft: #ffebeb; }
.resto-kpi-card--violet { --resto-card-accent: #7c3aed; --resto-card-soft: #f0eaff; }
.resto-kpi-card--neutral { --resto-card-accent: #64748b; --resto-card-soft: #edf1f5; }

.resto-kpi-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--resto-card-accent);
  background: var(--resto-card-soft);
}

.resto-kpi-icon svg { width: 22px; height: 22px; }

.resto-kpi-card > div:last-child {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.resto-kpi-card span {
  display: block;
  overflow: hidden;
  color: var(--ink3);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.resto-kpi-card strong {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--ink);
  font-size: clamp(20px, 1.75vw, 25px);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resto-kpi-card small {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  color: var(--ink3);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resto-health-strip {
  display: grid;
  grid-template-columns: 230px minmax(160px, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  border: 1px solid #eadfd5;
  border-radius: 15px;
  background: linear-gradient(90deg, #fffaf6, #fffdfb);
}

.resto-health-strip > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.resto-health-strip span,
.resto-health-strip small { color: var(--ink3); font-size: 10px; }
.resto-health-strip strong { color: var(--ink); font-size: 12px; }

.resto-health-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d1fae5 0 71%, #fef3c7 71% 86%, #fee2e2 86% 100%);
}

.resto-health-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
}

.resto-health-track b {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: #7c2d12;
}

.resto-health-fill--green { background: linear-gradient(90deg, #059669, #10b981); }
.resto-health-fill--amber { background: linear-gradient(90deg, #d97706, #f59e0b); }
.resto-health-fill--red { background: linear-gradient(90deg, #dc2626, #ef4444); }
.resto-health-fill--neutral { background: #94a3b8; }

.resto-content-panel {
  min-height: 400px;
  padding: 20px;
  border: 1px solid var(--resto-line);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(58, 34, 19, 0.05);
}

.resto-content-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.resto-content-header span {
  color: #c15f17;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resto-content-header h4 {
  margin: 4px 0 2px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.resto-content-header p { margin: 0; color: var(--ink3); font-size: 11px; }

.resto-inline-add {
  min-height: 38px;
  border: 1px solid #f1c59f;
  color: #9a450f;
  background: #fff4e9;
}

.resto-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--resto-line);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.resto-data-table { min-width: 1020px; margin: 0; }

.resto-data-table thead th {
  height: 43px;
  border-bottom-color: var(--resto-line);
  color: #817367;
  background: #fbf8f5;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.resto-data-table tbody td {
  height: 62px;
  border-bottom-color: #f0ebe7;
  font-size: 11px;
}

.resto-data-table tbody tr:last-child td { border-bottom: 0; }
.resto-data-table tbody tr:hover td { background: #fffbf7; }

.resto-recipe-name {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.resto-recipe-name > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.resto-recipe-name small { color: var(--ink3); font-size: 9px; }

.resto-recipe-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  color: #c45c15;
  background: #fff1e5;
}

.resto-recipe-mark svg { width: 17px; height: 17px; }
.resto-row-actions { display: flex; gap: 6px; }

.resto-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  padding: 38px 24px 24px;
  border: 1px dashed #dfcfc2;
  border-radius: 17px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(234, 106, 27, 0.09), transparent 34%),
    linear-gradient(180deg, #fffdfb, #fffbf7);
}

.resto-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
  border: 1px solid #f0c8a9;
  border-radius: 20px;
  color: #c35b15;
  background: #fff0e3;
  box-shadow: 0 10px 22px rgba(181, 73, 13, 0.10);
}

.resto-empty-icon svg { width: 32px; height: 32px; }

.resto-empty-kicker {
  color: #c15f17;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.resto-empty-state h4 {
  margin: 7px 0 7px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.resto-empty-state > p {
  max-width: 620px;
  margin: 0 0 20px;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.6;
}

.resto-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(760px, 100%);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #eee2d9;
}

.resto-onboarding-steps > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  min-width: 0;
  padding: 0 16px;
  text-align: left;
}

.resto-onboarding-steps > div + div { border-left: 1px solid #eee2d9; }

.resto-onboarding-steps span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #a8470d;
  background: #fff0e3;
  font-size: 10px;
  font-weight: 850;
}

.resto-onboarding-steps strong { color: var(--ink); font-size: 11px; }
.resto-onboarding-steps small { overflow: hidden; color: var(--ink3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

[data-theme="dark"] .resto-kpi-card,
[data-theme="dark"] .resto-content-panel {
  border-color: #3a312d;
  background: #171310;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .resto-health-strip,
[data-theme="dark"] .resto-empty-state {
  border-color: #3a312d;
  background: #15110f;
}

[data-theme="dark"] .resto-data-table thead th { background: #211b17; }
[data-theme="dark"] .resto-data-table tbody tr:hover td { background: #211b17; }
[data-theme="dark"] .resto-table-wrap { border-color: #3a312d; }
[data-theme="dark"] .resto-onboarding-steps,
[data-theme="dark"] .resto-onboarding-steps > div + div { border-color: #3a312d; }

@media (max-width: 900px) {
  .resto-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .resto-module { gap: 12px; }

  .resto-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 21px 18px;
    border-radius: 20px;
  }

  .resto-hero-main { align-items: flex-start; gap: 13px; }
  .resto-hero-mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
  .resto-hero-mark svg { width: 26px; height: 26px; }
  .resto-hero h3 { font-size: 23px; line-height: 1.12; }
  .resto-hero-copy > p { font-size: 12px; }
  .resto-hero-badges { display: none; }
  .resto-hero-actions { width: 100%; }
  .resto-primary-action, .resto-secondary-action { flex: 1 1 0; min-width: 0; }

  .resto-kpi-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(235px, 78vw);
    overflow-x: auto;
    padding: 0 1px 5px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .resto-kpi-grid::-webkit-scrollbar { display: none; }
  .resto-kpi-card { min-height: 110px; scroll-snap-align: start; }

  .resto-health-strip {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .resto-health-strip > small { display: none; }

  .resto-content-panel {
    min-height: 410px;
    padding: 13px;
    border-radius: 17px;
  }

  .resto-content-header {
    align-items: stretch;
    flex-direction: column;
  }

  .resto-inline-add { width: 100%; }

  .resto-empty-state {
    min-height: 440px;
    padding: 30px 16px 20px;
  }

  .resto-empty-state h4 { font-size: 18px; }
  .resto-empty-state .resto-primary-action { width: 100%; max-width: 280px; flex: none; }

  .resto-onboarding-steps {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 300px;
  }

  .resto-onboarding-steps > div { padding: 0; }
  .resto-onboarding-steps > div + div { padding-top: 14px; border-top: 1px solid #eee2d9; border-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEALTHCARE — patient billing and revenue-cycle dashboard
   Scoped to Healthcare so shared accounting and every other industry retain
   their existing layout and behavior.
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-healthcare {
  --health-navy: #092f53;
  --health-blue: #1768c5;
  --health-teal: #079b91;
  --health-mint: #2dd4bf;
  --health-line: #dce8ee;
  --health-soft: #eef8f8;
}

.dashboard-healthcare .dash-header--healthcare {
  position: relative;
  isolation: isolate;
  align-items: center;
  min-height: 196px;
  overflow: hidden;
  padding: 27px 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 14%, rgba(45, 212, 191, 0.30), transparent 27%),
    radial-gradient(circle at 56% 134%, rgba(59, 130, 246, 0.40), transparent 42%),
    linear-gradient(118deg, #072a4c 0%, #0a4f83 52%, #098f91 100%);
  box-shadow: 0 18px 44px rgba(6, 54, 84, 0.20);
}

.dashboard-healthcare .dash-header--healthcare::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,.40) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.40) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent 38%, #000 100%);
}

.dashboard-healthcare .dash-header--healthcare::after {
  content: "+";
  position: absolute;
  z-index: -1;
  right: 5.5%;
  top: 50%;
  color: rgba(255,255,255,.09);
  font-size: 170px;
  font-weight: 300;
  line-height: .6;
  transform: translateY(-50%);
}

.dashboard-healthcare .dash-header-left,
.dashboard-healthcare .dash-header-actions { position: relative; z-index: 1; }

.health-dash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 3px;
  color: #b8fff3;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.health-dash-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 5px rgba(94, 234, 212, .14);
}

.dashboard-healthcare .dash-header--healthcare .dash-greeting {
  color: rgba(224, 248, 255, .74);
}

.dashboard-healthcare .dash-header--healthcare .dash-company {
  font-size: clamp(25px, 2.3vw, 34px);
  letter-spacing: -.04em;
}

.health-dash-subtitle {
  max-width: 620px;
  margin-top: 2px;
  color: rgba(225, 247, 251, .76);
  font-size: 12.5px;
  line-height: 1.5;
}

.dashboard-healthcare .dash-header--healthcare .dash-period { margin-top: 9px; }
.dashboard-healthcare .dash-header--healthcare .dash-period-pill {
  border-color: rgba(255,255,255,.13);
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.dashboard-healthcare .dash-header--healthcare .dash-header-actions {
  align-self: flex-end;
  margin-bottom: 2px;
}

.dashboard-healthcare .dash-header--healthcare .ghost-button,
.dashboard-healthcare .dash-header--healthcare .primary-button {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-healthcare .dash-header--healthcare .ghost-button {
  border-color: rgba(255,255,255,.23);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.dashboard-healthcare .dash-header--healthcare .primary-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #063a48;
  background: linear-gradient(135deg, #ecfeff, #99f6e4);
  box-shadow: 0 12px 26px rgba(2, 39, 57, .24);
}

.dashboard-healthcare .dash-header--healthcare .primary-button:hover {
  color: #063a48;
  background: linear-gradient(135deg, #fff, #b8fff3);
  transform: translateY(-1px);
}

.health-action-icon { flex: 0 0 auto; }

.health-suite {
  display: grid;
  gap: 13px;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--health-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(45, 212, 191, .09), transparent 24%),
    linear-gradient(180deg, #fbfefe, #f7fbfc);
  box-shadow: 0 12px 32px rgba(9, 54, 79, .06);
}

.health-suite-heading,
.health-suite-title,
.health-card-head,
.health-collection-score,
.health-billing-actions {
  display: flex;
  align-items: center;
}

.health-suite-heading { justify-content: space-between; gap: 18px; }
.health-suite-title { gap: 13px; min-width: 0; }

.health-suite-mark {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  border: 1px solid #c7e6e7;
  border-radius: 14px;
  color: #087f7d;
  background: linear-gradient(145deg, #e6fffb, #e8f2ff);
  box-shadow: 0 7px 18px rgba(10, 108, 112, .10);
}

.health-suite-mark svg { width: 24px; height: 24px; }
.health-suite-eyebrow,
.health-card-kicker,
.health-kpi-copy > span {
  display: block;
  color: #668094;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.health-suite-title h3 {
  margin: 2px 0 1px;
  color: #0b2940;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.025em;
}

.health-suite-title p {
  margin: 0;
  color: #7890a1;
  font-size: 11.5px;
  line-height: 1.4;
}

.health-suite-status,
.health-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.health-suite-status {
  padding: 7px 10px;
  border: 1px solid #cfe7e3;
  border-radius: 999px;
  color: #356b72;
  background: #effbf8;
  font-size: 10.5px;
}

.health-suite-status i,
.health-live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,.10);
}

.health-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.health-kpi {
  --health-card-accent: #1768c5;
  --health-card-soft: #e8f2ff;
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 112px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--health-line);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 7px 22px rgba(8, 48, 71, .045);
}

.health-kpi::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -34px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--health-card-soft);
}

.health-kpi--blue { --health-card-accent: #1768c5; --health-card-soft: #e8f2ff; }
.health-kpi--teal { --health-card-accent: #078b87; --health-card-soft: #e3f8f5; }
.health-kpi--green { --health-card-accent: #15966d; --health-card-soft: #e5f8ef; }
.health-kpi--amber { --health-card-accent: #c7770b; --health-card-soft: #fff4dd; }
.health-kpi--red { --health-card-accent: #d24848; --health-card-soft: #ffebeb; }

.health-kpi-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--health-card-accent);
  background: var(--health-card-soft);
}

.health-kpi-icon svg { width: 21px; height: 21px; }
.health-kpi-copy { position: relative; z-index: 1; min-width: 0; }
.health-kpi-copy > span { margin: 1px 0 5px; }
.health-kpi-copy strong {
  display: block;
  overflow: hidden;
  color: #0b2940;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-kpi-copy small { display: block; margin-top: 6px; color: #8496a5; font-size: 10.5px; line-height: 1.3; }

.health-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr);
  gap: 10px;
}

.health-collection-card,
.health-billing-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--health-line);
  border-radius: 17px;
  background: var(--surface, #fff);
}

.health-card-head { justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.health-card-head h4 { margin: 3px 0 0; color: #102d42; font-size: 14px; font-weight: 850; letter-spacing: -.015em; }

.health-text-action {
  padding: 6px 9px;
  border: 0;
  color: #087f7d;
  background: transparent;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
.health-text-action:hover { color: #075f62; }
.health-text-action span { margin-left: 3px; }

.health-collection-score { gap: 16px; }
.health-score-ring {
  display: grid;
  place-items: center;
  width: 102px;
  height: 102px;
  flex: 0 0 102px;
  border-radius: 50%;
  background: conic-gradient(#0c9f96 var(--health-score), #e5eef1 0deg);
  box-shadow: 0 8px 22px rgba(5, 109, 107, .10);
}

.health-score-ring > div {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--surface, #fff);
}
.health-score-ring strong { color: #0d344c; font-size: 20px; font-weight: 850; line-height: 1; }
.health-score-ring span { margin-top: -9px; color: #8495a3; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.health-score-copy { min-width: 0; flex: 1; }
.health-score-state { color: #566b7a; font-size: 12px; font-weight: 850; }
.health-score-state--good { color: #087b5c; }
.health-score-state--watch { color: #b66b09; }
.health-score-state--risk { color: #c33939; }
.health-score-copy p { margin: 5px 0 11px; color: #778b9a; font-size: 11px; line-height: 1.45; }
.health-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e8eff2; }
.health-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0e8e8b, #2dd4bf); }

.health-balance-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
}
.health-balance-split > div {
  display: grid;
  grid-template-columns: 8px 1fr;
  column-gap: 8px;
  padding: 10px 11px;
  border-radius: 12px;
  background: #f6fafb;
}
.health-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; }
.health-dot--patient { background: #2563eb; }
.health-dot--insurance { background: #0d9488; }
.health-balance-split span { color: #728797; font-size: 10px; font-weight: 700; }
.health-balance-split strong { grid-column: 2; margin-top: 3px; color: #14344a; font-size: 13px; font-weight: 850; }
.health-balance-split small { grid-column: 2; margin-top: 2px; color: #93a2ad; font-size: 9.5px; }

.health-live-pill {
  padding: 5px 8px;
  border-radius: 999px;
  color: #18745d;
  background: #eafaf4;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.health-billing-stats { display: grid; gap: 7px; }
.health-billing-stats > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 10px 11px;
  border: 1px solid #e8eef1;
  border-radius: 12px;
  background: #fbfdfd;
}
.health-billing-stats span { color: #536c7d; font-size: 10.5px; font-weight: 750; }
.health-billing-stats strong { grid-row: span 2; color: #102f45; font-size: 16px; font-weight: 850; white-space: nowrap; }
.health-billing-stats small { margin-top: 2px; color: #92a1ac; font-size: 9.5px; }

.health-billing-actions { gap: 8px; margin-top: 12px; }
.health-primary-action,
.health-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  padding: 8px 11px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 850;
  cursor: pointer;
}
.health-primary-action { border: 1px solid #087b78; color: #fff; background: linear-gradient(135deg, #087f7d, #0da49a); box-shadow: 0 8px 18px rgba(7, 127, 125, .17); }
.health-secondary-action { border: 1px solid #cadde3; color: #27556b; background: #f8fcfd; }
.health-primary-action:hover,
.health-secondary-action:hover { transform: translateY(-1px); }
.health-primary-action svg,
.health-secondary-action svg { width: 15px; height: 15px; }

[data-theme="dark"] .health-suite {
  border-color: #263f4b;
  background: linear-gradient(180deg, #101c25, #0e1820);
  box-shadow: none;
}
[data-theme="dark"] .health-suite-title h3,
[data-theme="dark"] .health-card-head h4,
[data-theme="dark"] .health-kpi-copy strong,
[data-theme="dark"] .health-score-ring strong,
[data-theme="dark"] .health-balance-split strong,
[data-theme="dark"] .health-billing-stats strong { color: #e5f2f5; }
[data-theme="dark"] .health-suite-title p,
[data-theme="dark"] .health-score-copy p { color: #8da5b0; }
[data-theme="dark"] .health-kpi,
[data-theme="dark"] .health-collection-card,
[data-theme="dark"] .health-billing-card { border-color: #29414c; background: #111e27; }
[data-theme="dark"] .health-score-ring > div { background: #111e27; }
[data-theme="dark"] .health-progress-track { background: #263a43; }
[data-theme="dark"] .health-balance-split > div,
[data-theme="dark"] .health-billing-stats > div { border-color: #29414c; background: #14232c; }
[data-theme="dark"] .health-secondary-action { border-color: #34515c; color: #c5dfe6; background: #14252e; }

@media (max-width: 1180px) {
  .health-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-insight-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .dashboard-healthcare .dash-header--healthcare {
    align-items: stretch;
    min-height: 0;
    padding: 21px 18px;
    border-radius: 20px;
  }
  .dashboard-healthcare .dash-header--healthcare::after { right: -3%; font-size: 130px; }
  .dashboard-healthcare .dash-header--healthcare .dash-company { font-size: 25px; }
  .dashboard-healthcare .dash-header--healthcare .dash-header-actions { align-self: stretch; }
  .dashboard-healthcare .dash-header--healthcare .ghost-button,
  .dashboard-healthcare .dash-header--healthcare .primary-button { min-width: 0; padding-inline: 10px; }
  .health-suite { padding: 15px; border-radius: 18px; }
  .health-suite-heading { align-items: flex-start; }
  .health-suite-title p { display: none; }
  .health-insight-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .health-dash-subtitle { font-size: 11.5px; }
  .dashboard-healthcare .dash-header--healthcare .dash-header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-healthcare .dash-header--healthcare .dash-header-actions button { width: 100%; }
  .health-suite-heading { flex-direction: column; gap: 11px; }
  .health-suite-status { align-self: flex-start; }
  .health-kpi-grid { grid-template-columns: 1fr; }
  .health-kpi { min-height: 98px; }
  .health-card-head { align-items: flex-start; }
  .health-text-action { padding-right: 0; text-align: right; }
  .health-collection-score { align-items: flex-start; }
  .health-score-ring { width: 88px; height: 88px; flex-basis: 88px; }
  .health-score-ring > div { width: 65px; height: 65px; }
  .health-score-ring strong { font-size: 17px; }
  .health-balance-split { grid-template-columns: 1fr; }
  .health-billing-actions { align-items: stretch; flex-direction: column; }
  .health-primary-action,
  .health-secondary-action { width: 100%; }
}

@media (max-width: 380px) {
  .dashboard-healthcare .dash-header--healthcare .dash-header-actions { grid-template-columns: 1fr; }
  .health-suite { padding: 12px; }
  .health-suite-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .health-suite-title h3 { font-size: 16px; }
  .health-collection-card,
  .health-billing-card { padding: 14px; }
  .health-collection-score { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK SALE POS — cashier-focused retail workspace
   Every rule is scoped to #pos so invoices, purchases and other modules keep
   their existing presentation and behavior.
   ═══════════════════════════════════════════════════════════════════════════ */
#pos {
  --pos-navy: #0b2544;
  --pos-blue: #1768d1;
  --pos-green: #139b63;
  --pos-ink: #10243a;
  --pos-muted: #71849a;
  --pos-line: #dbe4ee;
  --pos-canvas: #f4f7fb;
}

#pos .pos-shell {
  grid-template-columns: minmax(0, 1fr) minmax(480px, 36%);
  height: calc(100dvh - 132px);
  min-height: 590px;
  border: 1px solid #d8e2ed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 39, 69, .11), 0 2px 8px rgba(15, 39, 69, .045);
}

#pos .pos-catalog {
  border-right: 1px solid var(--pos-line);
  background: var(--pos-canvas);
}

#pos .pos-catalog-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--pos-line);
  background:
    radial-gradient(circle at 94% 0, rgba(37, 99, 235, .10), transparent 34%),
    linear-gradient(135deg, #ffffff, #f7faff);
}

#pos .pos-catalog-heading { min-width: 0; }
#pos .pos-catalog-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #46708f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#pos .pos-catalog-kicker i,
#pos .pos-register-status > span:first-child i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .11);
}

#pos .pos-catalog-heading strong {
  display: block;
  margin-top: 4px;
  color: var(--pos-ink);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -.025em;
}

#pos .pos-catalog-heading small {
  display: block;
  margin-top: 2px;
  color: #8292a4;
  font-size: 10.5px;
  line-height: 1.35;
}

#pos .pos-register-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

#pos .pos-register-status > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #d4e5df;
  border-radius: 999px;
  color: #267059;
  background: #f0fbf7;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

#pos .pos-register-status .pos-register-shortcut {
  border-color: #dfe6ee;
  color: #78889a;
  background: #f8fafc;
  font-weight: 700;
}

#pos .pos-tab-bar {
  gap: 6px;
  padding: 7px;
  border-bottom: 1px solid var(--pos-line);
  background: #fff;
}

#pos .pos-tab {
  height: 40px;
  border: 0;
  border-radius: 10px;
  color: #65788d;
  font-size: 11.5px;
  font-weight: 750;
}

#pos .pos-tab:hover { color: var(--pos-ink); background: #f2f6fa; }
#pos .pos-tab--active {
  color: #fff;
  background: linear-gradient(135deg, #123a67, #1768d1);
  box-shadow: 0 7px 16px rgba(23, 104, 209, .20);
}

#pos .pos-tab--active:hover { color: #fff; background: linear-gradient(135deg, #123a67, #1768d1); }
#pos .pos-tab-count { color: #1553ad; background: #fff; }

#pos .pos-catalog-header {
  gap: 9px;
  padding: 11px 14px;
  border-color: var(--pos-line);
  background: #eef3f8;
}

#pos .pos-search-input {
  height: 44px;
  padding: 0 15px;
  border-color: #d5e0ea;
  border-radius: 13px;
  color: var(--pos-ink);
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 42, 70, .035);
}

#pos .pos-search-input:focus {
  border-color: #2b78dc;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10), 0 5px 14px rgba(16, 42, 70, .06);
}

#pos .pos-scan-btn {
  width: 44px;
  height: 44px;
  border-color: #d4dfe9;
  border-radius: 12px;
  color: #4c657c;
  background: #fff;
}

#pos .pos-scan-btn:hover { border-color: #2b78dc; color: #1768d1; background: #eff6ff; }
#pos .pos-select {
  border-color: #d4dfe9;
  border-radius: 10px;
  color: var(--pos-ink);
  background: #fff;
}

#pos .pos-category-bar {
  gap: 6px;
  padding: 9px 14px;
  border-color: var(--pos-line);
  background: #f7f9fc;
}

#pos .pos-cat-btn {
  min-height: 29px;
  padding: 5px 12px;
  border-color: #d9e2eb;
  border-radius: 999px;
  color: #66798d;
  background: #fff;
  font-size: 10.5px;
  font-weight: 750;
}

#pos .pos-cat-btn--active {
  border-color: #1768d1;
  color: #fff;
  background: #1768d1;
  box-shadow: 0 5px 12px rgba(23, 104, 209, .20);
}

#pos .pos-items-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 11px;
  padding: 14px;
  scrollbar-color: #c4d0dc transparent;
}

#pos .pos-item-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  min-height: 105px;
  padding: 14px;
  border: 1px solid #dbe4ed;
  border-radius: 16px;
  text-align: left;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 42, 70, .055);
}

#pos .pos-item-card:hover:not(:disabled) {
  border-color: #4c8ee5;
  box-shadow: 0 13px 28px rgba(23, 104, 209, .13);
  transform: translateY(-2px);
}

#pos .pos-item-card--in-cart {
  border-color: #3382eb;
  background: linear-gradient(135deg, #f4f8ff, #edf5ff);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .08), 0 10px 24px rgba(23, 104, 209, .11);
}

#pos .pos-in-cart-badge {
  top: 9px;
  right: 9px;
  width: 22px;
  height: 22px;
  background: #1768d1;
  box-shadow: 0 5px 12px rgba(23, 104, 209, .24);
}

#pos .pos-item-icon {
  grid-row: 1 / 4;
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 15px;
  font-size: 21px;
  box-shadow: 0 7px 16px rgba(20, 67, 107, .18);
}

#pos .pos-item-name {
  align-self: end;
  padding-right: 14px;
  color: var(--pos-ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.28;
}

#pos .pos-item-price {
  color: #1768d1;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

#pos .pos-item-stock {
  color: #159768;
  font-size: 10px;
  font-weight: 750;
}

#pos .pos-cart {
  position: relative;
  border: 0;
  background: #f6f8fb;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #bdcad6 transparent;
}

#pos .pos-cart::before {
  height: 5px;
  background: linear-gradient(90deg, #1768d1 0%, #089d91 62%, #21b66d 100%);
}

#pos .pos-cart-header {
  position: sticky;
  z-index: 6;
  top: 0;
  min-height: 67px;
  padding: 12px 17px;
  border-color: var(--pos-line);
  background: #fff;
}

#pos .pos-cart-header-left { gap: 10px; min-width: 0; }
#pos .pos-order-heading { min-width: 0; }
#pos .pos-order-kicker {
  display: block;
  margin-bottom: 2px;
  color: #7f91a4;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#pos .pos-order-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#pos .pos-order-title {
  overflow: hidden;
  color: var(--pos-ink);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pos .pos-cart-count {
  padding: 3px 8px;
  color: #1652aa;
  background: #eaf2ff;
  font-size: 9.5px;
  box-shadow: inset 0 0 0 1px #d2e3ff;
}

#pos .pos-cart-header-right { gap: 6px; }
#pos .pos-clock {
  padding: 5px 8px;
  border-color: #dde5ed;
  border-radius: 8px;
  color: #75879a;
  background: #f6f8fb;
  font-size: 10.5px;
}

#pos .pos-clear-btn {
  min-height: 29px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 10.5px;
}

#pos .pos-cart-customer {
  gap: 9px;
  padding: 11px 16px;
  border-color: var(--pos-line);
  background: #fff;
}

#pos .pos-field-label {
  color: #7c8ea2;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
}

#pos .pos-cart-customer .pos-select { height: 38px; padding-inline: 10px; }
#pos .pos-cart-lines {
  flex: 0 0 auto;
  min-height: 230px;
  gap: 9px;
  padding: 12px;
  background: #f5f8fb;
  scrollbar-color: #c4d0dc transparent;
}

#pos .pos-cart-empty {
  min-height: 230px;
  gap: 6px;
  padding: 28px 20px;
  color: #8293a5;
  text-align: center;
}

#pos .pos-cart-empty-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border: 1px solid #d9e5ef;
  border-radius: 22px;
  color: #5681a5;
  background: linear-gradient(145deg, #eef6ff, #eefbf8);
  box-shadow: 0 10px 24px rgba(35, 86, 124, .09);
}

#pos .pos-cart-empty strong { color: #28445d; font-size: 14px; font-weight: 850; }
#pos .pos-cart-empty p { margin: 0; color: #73869a; font-size: 11.5px; }
#pos .pos-cart-empty small { color: #9aa8b5; font-size: 9.5px; }

#pos .pos-cart-line {
  padding: 13px;
  border-color: #dce5ed;
  border-radius: 14px;
  box-shadow: 0 4px 13px rgba(17, 42, 67, .045);
}

#pos .pos-cart-line:hover { border-color: #b9cce0; box-shadow: 0 7px 18px rgba(17, 42, 67, .07); }
#pos .pos-cart-line-name { color: var(--pos-ink); font-size: 13.5px; font-weight: 850; }
#pos .pos-price-input,
#pos .pos-line-disc {
  border-color: #d6e0e9 !important;
  border-radius: 7px !important;
  color: #2a435a;
  background: #f7f9fb;
}

#pos .pos-cart-line-controls {
  border-color: #d5dfe8;
  border-radius: 10px;
  background: #f7f9fb;
}

#pos .pos-qty-btn { color: #526b80; }
#pos .pos-qty-btn:hover { color: #1768d1; background: #eaf2ff; }
#pos .pos-qty-val { color: var(--pos-ink); font-weight: 850; text-decoration: none !important; }
#pos .pos-cart-line-total { color: #122b41; font-weight: 900; }
#pos .pos-item-note { border-color: #d8e2eb; border-radius: 9px; background: #f7f9fb; }

#pos .pos-adjustments {
  gap: 9px;
  padding: 10px 16px;
  border-color: var(--pos-line);
  background: #eef3f7;
}

#pos .pos-adjustments .pos-select { height: 35px !important; }
#pos .pos-totals {
  padding: 10px 16px 0;
  border-color: var(--pos-line);
  background: #fff;
}

#pos .pos-totals-row { color: #5f7388; font-size: 11.5px; }
#pos .pos-totals-row span:last-child { color: #203b53; font-weight: 750; }
#pos .pos-totals-grand-box {
  min-height: 72px;
  margin: 8px 0 10px;
  padding: 13px 16px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 10%, rgba(45, 212, 191, .23), transparent 34%),
    linear-gradient(120deg, #0b2544, #123f70);
  box-shadow: 0 10px 23px rgba(11, 37, 68, .16);
}

#pos .pos-totals-grand-box span { color: rgba(224, 240, 251, .72); font-size: 10px; }
#pos .pos-totals-grand-box strong {
  color: #fff;
  font-size: clamp(24px, 2vw, 31px);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

#pos .pos-payment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px 2px;
  color: #6c8294;
  background: #fff;
}

#pos .pos-payment-heading span {
  display: block;
  color: #28445d;
  font-size: 10.5px;
  font-weight: 850;
}

#pos .pos-payment-heading small { display: block; margin-top: 1px; color: #94a2af; font-size: 9px; }
#pos .pos-payment-methods { gap: 7px; padding: 8px 16px; background: #fff; }
#pos .pos-pm-btn {
  height: 55px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 850;
  box-shadow: 0 3px 9px rgba(17, 42, 67, .035);
}

#pos .pos-pm-btn--active { transform: translateY(-1px); }
#pos .pos-change-calc {
  margin: 0 16px 8px;
  border-radius: 12px;
  background: #effbf5;
}

#pos .pos-account-row {
  gap: 8px;
  padding: 2px 16px 10px;
  background: #fff;
}

#pos .pos-account-row .pos-select { height: 34px !important; }
#pos .pos-checkout-row {
  display: flex;
  gap: 7px;
  padding: 0 16px 15px;
  background: #fff;
}

#pos .pos-checkout-btn {
  min-height: 55px;
  height: 55px;
  margin: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #16b867, #138c51);
  box-shadow: 0 9px 22px rgba(19, 156, 88, .27);
  font-size: 15px;
  font-weight: 900;
}

#pos .pos-checkout-btn:hover:not(:disabled) { box-shadow: 0 13px 28px rgba(19, 156, 88, .34); }
#pos .pos-checkout-btn--disabled,
#pos .pos-checkout-btn:disabled {
  color: #9aabba;
  background: #e9eef3;
  box-shadow: none;
}

#pos .pos-split-bill-btn {
  min-width: 67px;
  padding: 0 10px;
  border-color: #d5e0e9;
  border-radius: 12px;
  color: #4f6b82;
  background: #f8fafc;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

#pos .pos-history-topbar,
#pos .pos-history-filters,
#pos .pos-zreport-header { border-color: var(--pos-line); }

[data-theme="dark"] #pos .pos-shell { border-color: #2a3e50; background: #101923; box-shadow: none; }
[data-theme="dark"] #pos .pos-catalog { border-color: #2a3e50; background: #0f1822; }
[data-theme="dark"] #pos .pos-catalog-overview { border-color: #2a3e50; background: linear-gradient(135deg, #132230, #111c27); }
[data-theme="dark"] #pos .pos-catalog-heading strong,
[data-theme="dark"] #pos .pos-order-title,
[data-theme="dark"] #pos .pos-item-name,
[data-theme="dark"] #pos .pos-cart-line-name,
[data-theme="dark"] #pos .pos-cart-line-total,
[data-theme="dark"] #pos .pos-payment-heading span { color: #e4eef5; }
[data-theme="dark"] #pos .pos-tab-bar,
[data-theme="dark"] #pos .pos-catalog-header,
[data-theme="dark"] #pos .pos-category-bar,
[data-theme="dark"] #pos .pos-cart,
[data-theme="dark"] #pos .pos-cart-lines,
[data-theme="dark"] #pos .pos-adjustments { border-color: #2a3e50; background: #101923; }
[data-theme="dark"] #pos .pos-search-input,
[data-theme="dark"] #pos .pos-scan-btn,
[data-theme="dark"] #pos .pos-cat-btn,
[data-theme="dark"] #pos .pos-item-card,
[data-theme="dark"] #pos .pos-cart-header,
[data-theme="dark"] #pos .pos-cart-customer,
[data-theme="dark"] #pos .pos-cart-line,
[data-theme="dark"] #pos .pos-totals,
[data-theme="dark"] #pos .pos-payment-heading,
[data-theme="dark"] #pos .pos-payment-methods,
[data-theme="dark"] #pos .pos-account-row,
[data-theme="dark"] #pos .pos-checkout-row { border-color: #2a3e50; background: #14202b; }
[data-theme="dark"] #pos .pos-item-card--in-cart { border-color: #3b82f6; background: #142944; }
[data-theme="dark"] #pos .pos-cart-empty strong { color: #d5e7f0; }
[data-theme="dark"] #pos .pos-cart-empty-icon { border-color: #304b5d; background: #162735; }
[data-theme="dark"] #pos .pos-price-input,
[data-theme="dark"] #pos .pos-line-disc,
[data-theme="dark"] #pos .pos-item-note,
[data-theme="dark"] #pos .pos-cart-line-controls { border-color: #344958 !important; color: #d9e7ef; background: #101a23; }

@media (min-width: 769px) and (max-width: 1180px) {
  #pos .pos-shell { grid-template-columns: minmax(0, 1fr) 430px; }
  #pos .pos-register-shortcut { display: none !important; }
  #pos .pos-items-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}

@media (max-width: 768px) {
  #pos .pos-shell {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  #pos .pos-catalog,
  #pos .pos-cart,
  #pos .pos-items-grid,
  #pos .pos-cart-lines,
  #pos .pos-txn-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  #pos .pos-catalog { border-right: 0; border-bottom: 1px solid var(--pos-line); }
  #pos .pos-catalog-overview { padding: 13px 12px; }
  #pos .pos-catalog-heading strong { font-size: 15px; }
  #pos .pos-catalog-heading small { font-size: 9.5px; }
  #pos .pos-register-shortcut { display: none !important; }
  #pos .pos-register-status > span { padding: 4px 7px; font-size: 8.5px; }
  #pos .pos-tab-bar { gap: 4px; padding: 6px; }
  #pos .pos-tab { height: 38px; padding: 5px 6px; font-size: 10px; }
  #pos .pos-tab svg { width: 12px; height: 12px; }
  #pos .pos-catalog-header { flex-wrap: wrap; gap: 7px; padding: 9px; }
  #pos .pos-search-input { order: 0; min-width: calc(100% - 102px); height: 44px; }
  #pos .pos-scan-btn { width: 44px; height: 44px; }
  #pos .pos-catalog-header > div:last-child { order: 2; width: 100%; justify-content: space-between; }
  #pos .pos-catalog-header > div:last-child .pos-select { flex: 1; }
  #pos .pos-category-bar { padding: 8px 9px; }
  #pos .pos-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px; padding: 9px; }
  #pos .pos-item-card {
    display: flex;
    min-height: 124px;
    padding: 11px 7px;
    gap: 4px;
    text-align: center;
  }
  #pos .pos-item-icon { width: 45px; height: 45px; margin-bottom: 4px; border-radius: 13px; font-size: 18px; }
  #pos .pos-item-name { align-self: auto; padding-right: 0; font-size: 11px; }
  #pos .pos-item-price { font-size: 12px; }
  #pos .pos-item-stock { font-size: 9px; }
  #pos .pos-cart { border-top: 0 !important; }
  #pos .pos-cart-header { position: static; min-height: 62px; padding: 10px 11px; }
  #pos .pos-order-kicker { font-size: 8px; }
  #pos .pos-order-title { font-size: 15px; }
  #pos .pos-cart-header-right { flex-wrap: wrap; justify-content: flex-end; }
  #pos .pos-clock { font-size: 9px; }
  #pos .pos-clear-btn { min-height: 27px; padding: 4px 7px; font-size: 9.5px; }
  #pos .pos-cart-customer { grid-template-columns: 1fr; padding: 10px 12px; }
  #pos .pos-cart-lines { padding: 9px; }
  #pos .pos-cart-empty { min-height: 220px; }
  #pos .pos-adjustments { padding: 9px 12px; }
  #pos .pos-totals { padding: 9px 12px 0; }
  #pos .pos-totals-grand-box { min-height: 65px; padding: 11px 13px; }
  #pos .pos-totals-grand-box strong { font-size: 22px; }
  #pos .pos-payment-heading { padding: 9px 12px 2px; }
  #pos .pos-payment-methods { padding: 7px 12px; }
  #pos .pos-pm-btn { min-height: 51px; height: 51px; font-size: 10px; }
  #pos .pos-change-calc { margin: 0 12px 8px; }
  #pos .pos-account-row { padding: 2px 12px 9px; }
  #pos .pos-checkout-row { padding: 0 12px 112px; }
  #pos .pos-checkout-btn { min-height: 55px; font-size: 14px; }
}

@media (max-width: 420px) {
  #pos .pos-catalog-overview { align-items: flex-start; }
  #pos .pos-register-status { padding-top: 2px; }
  #pos .pos-register-status > span { font-size: 0; gap: 0; width: 27px; justify-content: center; }
  #pos .pos-register-status > span i { margin: 0; }
  #pos .pos-catalog-heading small { max-width: 245px; }
  #pos .pos-tab { flex-direction: column; gap: 2px; height: 45px; }
  #pos .pos-item-card { min-height: 120px; }
  #pos .pos-cart-header-left { gap: 7px; }
  #pos .pos-back-to-items { padding: 5px 7px; }
  #pos .pos-cart-count { padding: 2px 6px; }
  #pos .pos-cart-header-right .pos-clock { width: 100%; text-align: center; }
  #pos .pos-payment-methods { grid-template-columns: repeat(2, 1fr); }
  #pos .pos-pm-btn { min-height: 49px; }
  #pos .pos-checkout-row { align-items: stretch; flex-direction: column; }
  #pos .pos-split-bill-btn { min-height: 42px; width: 100%; }
}

.nav-group-count { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PRODUCT UI — Android + iOS trust polish
   Presentation-only overrides for the signed-in app. This final layer keeps
   every accounting workflow intact while giving phone layouts one consistent
   responsive system, reliable safe areas and native-sized touch controls.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body.bb-app-active {
    --phone-canvas: #f3f6fb;
    --phone-surface: #ffffff;
    --phone-surface-soft: #f7f9fc;
    --phone-border: #dfe7f1;
    --phone-border-strong: #cdd8e6;
    --phone-ink: #10233f;
    --phone-muted: #6f8097;
    --phone-blue: #1764dc;
    --phone-blue-dark: #104aaf;
    --phone-blue-soft: #eaf2ff;
    --phone-shadow: 0 10px 28px rgba(15, 35, 66, 0.07), 0 2px 7px rgba(15, 35, 66, 0.035);
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    background: var(--phone-canvas) !important;
    color: var(--phone-ink);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  html body.bb-app-active *,
  html body.bb-app-active *::before,
  html body.bb-app-active *::after {
    box-sizing: border-box;
  }

  html body.bb-app-active .app-shell,
  html body.bb-app-active .workspace,
  html body.bb-app-active .page-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.bb-app-active .app-shell {
    min-height: 100dvh !important;
    background: var(--phone-canvas) !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .workspace {
    gap: 12px !important;
    padding: 8px 10px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--phone-canvas) !important;
  }

  html body.bb-app-active .page-section {
    margin: 0 !important;
    overflow-x: clip !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .page-section {
    padding: 0 !important;
  }

  /* Remove fixed desktop tracks that clipped purchase modules on phones. */
  html body.bb-app-active .page-section > *,
  html body.bb-app-active .page-section [class*="-module"],
  html body.bb-app-active .page-section [class$="-grid"],
  html body.bb-app-active .page-section [class$="-row"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.bb-app-active .page-section [class*="-module"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.bb-app-active .page-section .panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 1px solid var(--phone-border) !important;
    border-radius: 18px !important;
    background: var(--phone-surface) !important;
    box-shadow: var(--phone-shadow) !important;
  }

  html body.bb-app-active .page-section .panel:has(> .inv-list-header) {
    padding: 0 !important;
  }

  /* Compact browser header; installed builds keep the focused blue app bar. */
  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar {
    position: sticky !important;
    top: max(0px, env(safe-area-inset-top, 0px)) !important;
    z-index: 800 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(205, 216, 230, 0.88) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 10px 28px rgba(15, 35, 66, 0.09) !important;
    backdrop-filter: blur(18px) saturate(150%);
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar > div:first-of-type {
    min-width: 0 !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar .eyebrow {
    overflow: hidden !important;
    margin: 0 0 2px !important;
    color: #718198 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar h2 {
    overflow: hidden !important;
    margin: 0 !important;
    color: var(--phone-ink) !important;
    font-size: 17px !important;
    font-weight: 820 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-account-email,
  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-logout,
  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .last-saved-indicator,
  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .subscription-badge {
    display: none !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .sidebar-toggle,
  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-theme-toggle,
  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-account-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--phone-border) !important;
    border-radius: 13px !important;
    background: var(--phone-surface-soft) !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-search input {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid var(--phone-border) !important;
    border-radius: 13px !important;
    background: #f5f8fc !important;
    font-size: 16px !important;
  }

  /* Installed header refinements and safe, predictable app viewport. */
  html.native-app-mode body.bb-app-active .topbar,
  html.pwa-mode body.bb-app-active .topbar {
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(9px + env(safe-area-inset-top, 0px)) 13px 9px !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 10px 28px rgba(11, 47, 127, 0.20) !important;
  }

  html.native-app-mode body.bb-app-active .page-section,
  html.pwa-mode body.bb-app-active .page-section {
    padding: 12px 12px 4px !important;
  }

  /* Clear module hierarchy: title, primary task, secondary utilities. */
  html body.bb-app-active .inv-list-header {
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px 16px 13px !important;
  }

  html body.bb-app-active .inv-list-title-block {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html body.bb-app-active .inv-list-kicker {
    color: #48719f !important;
    font-size: 9.5px !important;
    font-weight: 820 !important;
    letter-spacing: 0.095em !important;
  }

  html body.bb-app-active .inv-list-title {
    margin-top: 3px !important;
    color: var(--phone-ink) !important;
    font-size: 23px !important;
    font-weight: 850 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.08 !important;
  }

  html body.bb-app-active .inv-list-subtitle {
    margin-top: 5px !important;
    color: var(--phone-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }

  html body.bb-app-active .inv-list-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.bb-app-active .inv-list-actions .primary-button {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: -1 !important;
    width: 100% !important;
  }

  html body.bb-app-active .inv-list-actions .ghost-button,
  html body.bb-app-active .inv-list-actions .more-wrap {
    min-width: 0 !important;
  }

  html body.bb-app-active .page-section .primary-button,
  html body.bb-app-active .page-section .ghost-button,
  html body.bb-app-active .page-section button:not(.icon-button) {
    min-height: 44px;
    border-radius: 13px;
  }

  html body.bb-app-active .page-section .primary-button {
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #2873ef 0%, var(--phone-blue) 54%, var(--phone-blue-dark) 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 780 !important;
    box-shadow: 0 9px 20px rgba(23, 100, 220, 0.24) !important;
  }

  html body.bb-app-active .page-section .ghost-button {
    min-height: 44px !important;
    border: 1px solid var(--phone-border-strong) !important;
    border-radius: 13px !important;
    background: var(--phone-surface) !important;
    color: #344760 !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 9px rgba(15, 35, 66, 0.035) !important;
  }

  /* Two-column financial overview keeps all four facts visible at a glance. */
  html body.bb-app-active .inv-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns: unset !important;
    grid-auto-flow: row !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 16px 16px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  html body.bb-app-active .inv-kpi-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 108px !important;
    padding: 13px 11px !important;
    overflow: hidden !important;
    border-width: 1px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(15, 35, 66, 0.045) !important;
    scroll-snap-align: none !important;
  }

  html body.bb-app-active .inv-kpi-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  html body.bb-app-active .inv-kpi-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  html body.bb-app-active .inv-kpi-body {
    width: 100% !important;
    min-width: 0 !important;
    gap: 3px !important;
  }

  html body.bb-app-active .inv-kpi-label {
    overflow: hidden !important;
    color: #718198 !important;
    font-size: 9px !important;
    font-weight: 820 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
  }

  html body.bb-app-active .inv-kpi-value {
    overflow: hidden !important;
    color: var(--phone-ink);
    font-size: clamp(18px, 5.2vw, 22px) !important;
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.bb-app-active .inv-kpi-sub {
    overflow: hidden !important;
    color: #7b8ba1 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.bb-app-active .inv-empty-state {
    min-height: 260px !important;
    padding: 38px 18px 34px !important;
    gap: 8px !important;
  }

  html body.bb-app-active .inv-empty-icon,
  html body.bb-app-active .inv-empty-state > svg {
    width: 76px !important;
    height: 76px !important;
    margin-bottom: 8px !important;
    border-radius: 22px !important;
  }

  html body.bb-app-active .inv-empty-state h3,
  html body.bb-app-active .inv-empty-state strong {
    color: var(--phone-ink) !important;
    font-size: 16px !important;
    font-weight: 820 !important;
    letter-spacing: -0.02em !important;
  }

  html body.bb-app-active .inv-empty-state p {
    max-width: 280px !important;
    color: var(--phone-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* iOS never zooms fields; Android receives predictable 48px controls. */
  html body.bb-app-active input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  html body.bb-app-active select,
  html body.bb-app-active textarea {
    width: 100%;
    min-height: 48px !important;
    border: 1px solid var(--phone-border-strong) !important;
    border-radius: 13px !important;
    background: var(--phone-surface-soft) !important;
    color: var(--phone-ink) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  }

  html body.bb-app-active textarea {
    min-height: 96px !important;
    padding-block: 12px !important;
    resize: vertical;
  }

  html body.bb-app-active input:focus,
  html body.bb-app-active select:focus,
  html body.bb-app-active textarea:focus {
    outline: none !important;
    border-color: #2d73e7 !important;
    background: var(--phone-surface) !important;
    box-shadow: 0 0 0 3px rgba(45, 115, 231, 0.13) !important;
  }

  html body.bb-app-active label,
  html body.bb-app-active .field-label {
    color: #42566f;
    font-size: 12px;
    font-weight: 700;
  }

  /* Data remains readable without breaking the viewport. */
  html body.bb-app-active .data-table-wrap,
  html body.bb-app-active .table-shell,
  html body.bb-app-active .report-table-shell {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid var(--phone-border) !important;
    border-radius: 16px !important;
    background: var(--phone-surface) !important;
    box-shadow: 0 7px 20px rgba(15, 35, 66, 0.045) !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.bb-app-active .data-table-wrap,
  html body.bb-app-active .report-table-shell {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
  }

  html body.bb-app-active table th {
    color: #64758b !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
  }

  html body.bb-app-active table td {
    color: #263b55;
    font-size: 12.5px;
  }

  /* A floating destination bar with a distinct POS task and safe-area room. */
  html body.bb-app-active .mobile-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: end !important;
    width: min(calc(100% - 18px), 430px) !important;
    min-height: 74px !important;
    padding: 7px 7px 6px !important;
    border: 1px solid rgba(205, 216, 230, 0.86) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 18px 40px rgba(15, 35, 66, 0.19), 0 3px 10px rgba(15, 35, 66, 0.07) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(22px) saturate(160%);
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-btn {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #74859d !important;
    font-size: 9.5px !important;
    font-weight: 680 !important;
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-btn svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.9 !important;
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-btn.active:not(.mob-nav-btn--primary) {
    background: var(--phone-blue-soft) !important;
    color: var(--phone-blue) !important;
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-dot {
    display: none !important;
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-btn--primary {
    overflow: visible !important;
    color: var(--phone-blue) !important;
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-primary-icon {
    position: absolute !important;
    top: -17px !important;
    left: 50% !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border: 4px solid rgba(255, 255, 255, 0.98) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #347df5 0%, #1555cf 100%) !important;
    box-shadow: 0 10px 24px rgba(23, 100, 220, 0.35) !important;
    transform: translateX(-50%) !important;
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-primary-label {
    margin-top: 31px !important;
    font-size: 9.5px !important;
    font-weight: 780 !important;
  }

  html body.bb-app-active .ai-chat-fab {
    right: 15px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    border: 3px solid rgba(255, 255, 255, 0.96) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(23, 100, 220, 0.31) !important;
  }

  html body.bb-app-active .sidebar {
    width: min(88vw, 340px) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-radius: 0 24px 24px 0 !important;
    box-shadow: 28px 0 64px rgba(2, 6, 23, 0.40) !important;
  }

  html body.bb-app-active .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(2, 6, 23, 0.55) !important;
    backdrop-filter: blur(4px);
  }

  html body.bb-app-active .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    background: var(--phone-surface) !important;
    box-shadow: 0 -20px 60px rgba(2, 6, 23, 0.24) !important;
  }

  html body.bb-app-active button,
  html body.bb-app-active a,
  html body.bb-app-active input,
  html body.bb-app-active select,
  html body.bb-app-active textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html body.bb-app-active button:focus-visible,
  html body.bb-app-active a:focus-visible,
  html body.bb-app-active input:focus-visible,
  html body.bb-app-active select:focus-visible,
  html body.bb-app-active textarea:focus-visible {
    outline: 3px solid rgba(45, 115, 231, 0.28) !important;
    outline-offset: 2px !important;
  }

  html[data-theme="dark"] body.bb-app-active {
    --phone-canvas: #080d16;
    --phone-surface: #0f1826;
    --phone-surface-soft: #131f30;
    --phone-border: #233249;
    --phone-border-strong: #30425d;
    --phone-ink: #e8eef8;
    --phone-muted: #8799b1;
    --phone-blue: #79aaff;
    --phone-blue-dark: #397ee8;
    --phone-blue-soft: rgba(74, 132, 229, 0.16);
    --phone-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  html[data-theme="dark"] body.bb-app-active .topbar,
  html[data-theme="dark"] body.bb-app-active .mobile-bottom-nav {
    border-color: rgba(132, 180, 255, 0.14) !important;
    background: rgba(13, 22, 35, 0.95) !important;
  }

  html[data-theme="dark"] body.bb-app-active table td,
  html[data-theme="dark"] body.bb-app-active label,
  html[data-theme="dark"] body.bb-app-active .field-label {
    color: #cbd7e8 !important;
  }

  html[data-theme="dark"] body.bb-app-active .mobile-bottom-nav .mob-nav-primary-icon {
    border-color: #0d1623 !important;
  }

  html[data-theme="dark"]:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar {
    border-color: rgba(132, 180, 255, 0.14) !important;
    background: rgba(13, 22, 35, 0.96) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32) !important;
  }

  html[data-theme="dark"]:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar .eyebrow {
    color: #879ab4 !important;
  }

  html[data-theme="dark"]:not(.native-app-mode):not(.pwa-mode) body.bb-app-active .topbar-search input {
    border-color: #2a3b54 !important;
    background: #0a1320 !important;
    color: #e8eef8 !important;
  }
}

@media (max-width: 360px) {
  html body.bb-app-active .inv-list-header {
    padding-inline: 13px !important;
  }

  html body.bb-app-active .inv-kpi-grid {
    gap: 8px !important;
    padding-inline: 13px !important;
  }

  html body.bb-app-active .inv-kpi-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 104px !important;
    padding: 11px 9px !important;
  }

  html body.bb-app-active .inv-kpi-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  html body.bb-app-active .inv-kpi-value {
    font-size: 17px !important;
  }

  html body.bb-app-active .inv-kpi-sub {
    font-size: 9px !important;
  }

  html body.bb-app-active .mobile-bottom-nav {
    width: calc(100% - 12px) !important;
    padding-inline: 5px !important;
  }

  html body.bb-app-active .mobile-bottom-nav .mob-nav-btn {
    font-size: 8.5px !important;
  }
}

/* ── Bills · Landed cost ─────────────────────────────────────────────────── */
.landed-cost-card {
  width: 100%;
  min-width: 0;
  margin: 22px 0;
  overflow: hidden;
  border: 1px solid #cbd9eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 35, 68, 0.06);
}

.landed-cost-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7faff 0%, #eef5ff 100%);
  border-bottom: 1px solid #dce7f5;
}

.landed-cost-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.landed-cost-heading h4 {
  margin: 0 0 3px;
  color: #12233d;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.landed-cost-heading p {
  margin: 0;
  color: #61748f;
  font-size: 12px;
  line-height: 1.45;
}

.landed-cost-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #e3efff;
  color: #1d63d8;
  font-size: 20px;
  font-weight: 800;
  transform: rotate(-45deg);
}

.landed-cost-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: #253a57;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}

.landed-cost-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.landed-cost-toggle > span {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid #aebdd0;
  border-radius: 99px;
  background: #dbe4ef;
  transition: 160ms ease;
}

.landed-cost-toggle > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(17, 36, 64, 0.25);
  transition: 160ms ease;
}

.landed-cost-toggle input:checked + span {
  border-color: #206bdc;
  background: #206bdc;
}

.landed-cost-toggle input:checked + span::after { transform: translateX(18px); }
.landed-cost-toggle input:focus-visible + span { outline: 3px solid rgba(32, 107, 220, 0.22); outline-offset: 2px; }

.landed-cost-body { padding: 18px 20px 20px; }
.landed-cost-body[hidden] { display: none !important; }

.landed-cost-notice {
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid #cde0f7;
  border-radius: 9px;
  background: #f4f8fd;
  color: #536b89;
  font-size: 11px;
  line-height: 1.5;
}

.landed-cost-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d9e3ef;
  border-radius: 10px;
}

.landed-cost-table,
.landed-allocation-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.landed-cost-table th,
.landed-allocation-table th {
  padding: 9px 10px;
  background: #f5f8fc;
  color: #5d7089;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.landed-cost-table td,
.landed-allocation-table td {
  padding: 8px 7px;
  border-top: 1px solid #e5ecf4;
  color: #253954;
  font-size: 11px;
  vertical-align: middle;
}

.landed-cost-row.is-hidden { display: none; }

.landed-cost-control,
.landed-basis-input {
  width: 100%;
  min-width: 105px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #c7d4e4;
  border-radius: 7px;
  background: #fff;
  color: #1e3049;
  font: inherit;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.landed-cost-money { min-width: 88px; text-align: right; }
.landed-cost-control:focus,
.landed-basis-input:focus { border-color: #2875df; box-shadow: 0 0 0 3px rgba(40, 117, 223, 0.13); }

.landed-cost-remove-cell { width: 34px; text-align: center; }
.landed-cost-remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8798ad;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.landed-cost-remove:hover { background: #fff0f1; color: #c63a49; }

.landed-cost-row-actions,
.landed-allocation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landed-cost-row-actions { margin-top: 11px; }
.landed-cost-running-total { display: flex; align-items: baseline; gap: 12px; color: #657890; font-size: 11px; }
.landed-cost-running-total strong { color: #173763; font-size: 14px; }

.landed-allocation-card {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #d4e1f0;
  border-radius: 11px;
  background: #fbfdff;
}

.landed-allocation-toolbar { padding: 13px 14px; border-bottom: 1px solid #dce6f1; }
.landed-allocation-toolbar > div:first-child { display: grid; gap: 3px; }
.landed-allocation-toolbar strong { color: #203650; font-size: 12px; }
.landed-allocation-toolbar span { color: #71839a; font-size: 10px; }
.landed-allocation-toolbar label { display: flex; align-items: center; gap: 8px; color: #61738a; font-size: 10px; white-space: nowrap; }
.landed-allocation-toolbar select { min-width: 150px; height: 34px; padding: 0 9px; border: 1px solid #c4d2e2; border-radius: 7px; background: #fff; color: #263b57; }
.landed-allocation-table-wrap { overflow-x: auto; }
.landed-allocation-table td strong { color: #18324f; }
.landed-allocation-empty { padding: 22px !important; color: #778aa2 !important; text-align: center; }

.landed-allocation-status {
  padding: 10px 13px;
  border-top: 1px solid #e0e8f2;
  background: #f7f9fc;
  color: #64778f;
  font-size: 10px;
}
.landed-allocation-status[data-tone="success"] { background: #f0faf6; color: #167253; }
.landed-allocation-status[data-tone="warning"] { background: #fff8ec; color: #9a5b09; }

.bill-landed-total-row { color: #305c96; }
.landed-cost-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid #bdd5f4;
  border-radius: 99px;
  background: #eef6ff;
  color: #245eaa;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="dark"] .landed-cost-card { border-color: #263b57; background: #0f1928; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
[data-theme="dark"] .landed-cost-header { border-color: #263b57; background: linear-gradient(135deg, #15243a, #111d2f); }
[data-theme="dark"] .landed-cost-heading h4,
[data-theme="dark"] .landed-allocation-toolbar strong,
[data-theme="dark"] .landed-allocation-table td strong { color: #e3edf9; }
[data-theme="dark"] .landed-cost-heading p,
[data-theme="dark"] .landed-allocation-toolbar span { color: #8ea3bd; }
[data-theme="dark"] .landed-cost-icon { background: #173761; color: #78adff; }
[data-theme="dark"] .landed-cost-toggle { color: #bfd0e4; }
[data-theme="dark"] .landed-cost-body { background: #0f1928; }
[data-theme="dark"] .landed-cost-notice { border-color: #2b4667; background: #14233a; color: #9db2ca; }
[data-theme="dark"] .landed-cost-table-wrap,
[data-theme="dark"] .landed-allocation-card { border-color: #293e59; background: #111c2c; }
[data-theme="dark"] .landed-cost-table th,
[data-theme="dark"] .landed-allocation-table th { background: #162338; color: #91a5be; }
[data-theme="dark"] .landed-cost-table td,
[data-theme="dark"] .landed-allocation-table td { border-color: #24364d; color: #c6d5e7; }
[data-theme="dark"] .landed-cost-control,
[data-theme="dark"] .landed-basis-input,
[data-theme="dark"] .landed-allocation-toolbar select { border-color: #344a66; background: #0c1523; color: #d6e2f1; }
[data-theme="dark"] .landed-cost-running-total { color: #8da0b9; }
[data-theme="dark"] .landed-cost-running-total strong { color: #dce9f8; }
[data-theme="dark"] .landed-allocation-toolbar,
[data-theme="dark"] .landed-allocation-status { border-color: #293d56; }
[data-theme="dark"] .landed-allocation-status { background: #132035; color: #92a6bf; }
[data-theme="dark"] .landed-allocation-status[data-tone="success"] { background: #102b27; color: #72d3ad; }
[data-theme="dark"] .landed-allocation-status[data-tone="warning"] { background: #302515; color: #f2bd6d; }
[data-theme="dark"] .landed-cost-badge { border-color: #315887; background: #142b48; color: #8dbdff; }

@media (max-width: 768px) {
  .landed-cost-card { margin: 16px 0; border-radius: 12px; }
  .landed-cost-header { align-items: flex-start; flex-direction: column; gap: 14px; padding: 15px; }
  .landed-cost-toggle { width: 100%; justify-content: space-between; flex-direction: row-reverse; }
  .landed-cost-body { padding: 14px; }
  .landed-cost-notice { font-size: 10px; }

  .landed-cost-table-wrap,
  .landed-allocation-table-wrap { overflow: visible; border: 0; }
  .landed-cost-table,
  .landed-cost-table tbody,
  .landed-allocation-table,
  .landed-allocation-table tbody { display: block; }
  .landed-cost-table thead,
  .landed-allocation-table thead { display: none; }
  .landed-cost-table tr,
  .landed-allocation-table tr {
    display: grid;
    gap: 9px;
    margin-bottom: 11px;
    padding: 12px;
    border: 1px solid #d7e2ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 13px rgba(20, 48, 84, 0.05);
  }
  .landed-cost-table td,
  .landed-allocation-table td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
  }
  .landed-cost-table td::before,
  .landed-allocation-table td::before {
    content: attr(data-label);
    color: #657a94;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }
  .landed-cost-remove-cell { width: auto; }
  .landed-cost-remove-cell::before { content: "" !important; }
  .landed-cost-remove { justify-self: end; }
  .landed-cost-control,
  .landed-basis-input { min-width: 0; }
  .landed-cost-row-actions { align-items: stretch; flex-direction: column; }
  .landed-cost-row-actions .ghost-button { width: 100%; }
  .landed-cost-running-total { justify-content: space-between; padding: 0 2px; }
  .landed-allocation-toolbar { align-items: stretch; flex-direction: column; }
  .landed-allocation-toolbar label { align-items: stretch; flex-direction: column; }
  .landed-allocation-toolbar select { width: 100%; min-width: 0; }
  .landed-allocation-empty { display: block !important; }
  .landed-allocation-empty::before { display: none; }

  [data-theme="dark"] .landed-cost-table tr,
  [data-theme="dark"] .landed-allocation-table tr { border-color: #293e59; background: #111c2c; box-shadow: none; }
}

/* Quotes + Retainer Invoices — use the same finished signature component. */
#estimate-customer-signature-canvas,
#retainer-customer-signature-canvas {
  position: relative;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 158px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #fcfdff !important;
  box-shadow: 0 1px 3px rgba(15, 35, 66, 0.07), inset 0 0 0 1px rgba(213, 223, 235, 0.78);
  cursor: crosshair;
  touch-action: none;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) {
  --signature-accent: #2168db;
  --signature-accent-soft: #eaf2ff;
  --signature-hint: #73849a;
  position: relative;
  width: 100%;
  max-width: 680px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid #d9e3ef !important;
  border-radius: 19px !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfe 100%) !important;
  box-shadow: 0 10px 28px rgba(15, 35, 66, 0.065), 0 2px 7px rgba(15, 35, 66, 0.03) !important;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #4c8cf2 20%, #246bde 80%, transparent);
  opacity: 0.8;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 32px;
  margin: 0;
  color: #172b46 !important;
  font-size: 13.5px !important;
  font-weight: 780;
  letter-spacing: -0.01em;
  line-height: 1.25 !important;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: var(--signature-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232168db' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(33, 104, 219, 0.08);
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label span {
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid #dbe5f1;
  border-radius: 999px;
  background: #f5f8fc;
  color: #687b92 !important;
  font-size: 9px !important;
  font-weight: 760 !important;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .quote-help-text {
  max-width: 600px;
  margin: 8px 0 13px !important;
  color: #6f8097 !important;
  font-size: 12.5px;
  line-height: 1.48 !important;
}

:is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 640px;
  margin: 0 0 13px;
}

:is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > label {
  color: #344a66 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: 0.015em;
  line-height: 1.3 !important;
}

:is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > input {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 44px;
  padding: 0 13px !important;
  border: 1px solid #c8d5e5 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #172b46 !important;
  font-size: 14px !important;
  font-weight: 560;
  box-shadow: inset 0 1px 2px rgba(15, 35, 66, 0.035) !important;
}

:is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > input::placeholder {
  color: #8998aa;
  font-weight: 450;
}

:is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > input:focus {
  border-color: var(--signature-accent) !important;
  outline: 3px solid rgba(33, 104, 219, 0.12) !important;
  outline-offset: 1px;
}

:is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > span {
  color: #78899e;
  font-size: 10.5px;
  line-height: 1.35;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap {
  border-color: #adc2db;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .brand-logo-actions {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100%;
  max-width: 640px;
  margin-top: 11px !important;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .brand-logo-actions::before {
  content: "Use finger, mouse, or stylus";
  color: var(--signature-hint);
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.3;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button {
  width: auto !important;
  min-width: 118px !important;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid #c5d2e2 !important;
  border-radius: 11px;
  background: #ffffff !important;
  color: #42566f !important;
  font-size: 12px;
  font-weight: 720;
  box-shadow: 0 3px 9px rgba(15, 35, 66, 0.04) !important;
}

:is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button::before {
  content: "↺";
  margin-right: 6px;
  color: var(--signature-accent);
  font-size: 15px;
  line-height: 1;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) {
  --signature-accent: #82afff;
  --signature-accent-soft: #15294a;
  --signature-hint: #8194ad;
  border-color: #26364d !important;
  background: linear-gradient(145deg, #101a29 0%, #0d1623 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label {
  color: #e4ecf7 !important;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2382afff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(130, 175, 255, 0.12);
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label span {
  border-color: #30425d;
  background: #142136;
  color: #91a7c2 !important;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .quote-help-text {
  color: #91a3ba !important;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > label {
  color: #b9c8da !important;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > input {
  border-color: #344861 !important;
  background: #131f30 !important;
  color: #eef4fc !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > input::placeholder {
  color: #71849d;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > span {
  color: #8194ad;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button {
  border-color: #344861 !important;
  background: #131f30 !important;
  color: #b9c7da !important;
  box-shadow: none !important;
}

[data-theme="dark"] :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap {
  border-color: #48617f;
}

@media (max-width: 768px) {
  #estimate-customer-signature-canvas,
  #retainer-customer-signature-canvas {
    height: 164px !important;
  }

  :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) {
    max-width: 100%;
    padding: 14px;
  }

  :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .quote-help-text {
    font-size: 12px;
  }

  :is(#quote-create-panel, #retainer-create-panel, #so-create-panel, #inv-create-panel, #po-create-panel) .signature-signer-field > input {
    min-height: 46px;
    font-size: 16px !important;
  }

  :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button {
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > label span {
    grid-column: 2;
    justify-self: start;
  }

  :is(#quote-create-panel, #retainer-create-panel) .field:has(> .signature-pad-wrap) > .brand-logo-actions::before {
    max-width: 110px;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  html body.bb-app-active *,
  html body.bb-app-active *::before,
  html body.bb-app-active *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Signature cascade lock — purchase/document form themes are declared late in
   this stylesheet, so keep the finished signing card above those base rules. */
#po-create-panel .field:has(> .signature-pad-wrap),
#inv-create-panel .field:has(> .signature-pad-wrap),
#so-create-panel .field:has(> .signature-pad-wrap) {
  border-color: #d9e3ef !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfe 100%) !important;
  box-shadow: 0 10px 28px rgba(15, 35, 66, 0.065), 0 2px 7px rgba(15, 35, 66, 0.03) !important;
}

#po-create-panel .field:has(> .signature-pad-wrap) > label,
#inv-create-panel .field:has(> .signature-pad-wrap) > label,
#so-create-panel .field:has(> .signature-pad-wrap) > label {
  color: #172b46 !important;
}

#po-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text,
#inv-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text,
#so-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text {
  color: #6f8097 !important;
}

#po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button,
#inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button,
#so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button {
  border-color: #c5d2e2 !important;
  background: #ffffff !important;
  color: #42566f !important;
  box-shadow: 0 3px 9px rgba(15, 35, 66, 0.04) !important;
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap),
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap),
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap) {
  border-color: #26364d !important;
  background: linear-gradient(145deg, #101a29 0%, #0d1623 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap) > label,
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap) > label,
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap) > label {
  color: #e4ecf7 !important;
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text,
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text,
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text {
  color: #91a3ba !important;
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button,
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button,
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button {
  border-color: #344861 !important;
  background: #131f30 !important;
  color: #b9c7da !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  #po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions,
  #inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions,
  #so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Signature finishing details: compact section identity, optional-status pill
   and a contextual reset row. Presentation only; drawing logic is unchanged. */
#po-create-panel .field:has(> .signature-pad-wrap),
#inv-create-panel .field:has(> .signature-pad-wrap),
#so-create-panel .field:has(> .signature-pad-wrap) {
  --signature-accent: #2168db;
  --signature-accent-soft: #eaf2ff;
  --signature-hint: #73849a;
  position: relative;
  overflow: hidden;
  border-radius: 19px !important;
}

#po-create-panel .field:has(> .signature-pad-wrap)::before,
#inv-create-panel .field:has(> .signature-pad-wrap)::before,
#so-create-panel .field:has(> .signature-pad-wrap)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #4c8cf2 20%, #246bde 80%, transparent);
  opacity: 0.8;
}

#po-create-panel .field:has(> .signature-pad-wrap) > label,
#inv-create-panel .field:has(> .signature-pad-wrap) > label,
#so-create-panel .field:has(> .signature-pad-wrap) > label {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 32px;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
}

#po-create-panel .field:has(> .signature-pad-wrap) > label::before,
#inv-create-panel .field:has(> .signature-pad-wrap) > label::before,
#so-create-panel .field:has(> .signature-pad-wrap) > label::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: var(--signature-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232168db' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(33, 104, 219, 0.08);
}

#po-create-panel .field:has(> .signature-pad-wrap) > label span,
#inv-create-panel .field:has(> .signature-pad-wrap) > label span,
#so-create-panel .field:has(> .signature-pad-wrap) > label span {
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid #dbe5f1;
  border-radius: 999px;
  background: #f5f8fc;
  color: #687b92 !important;
  font-size: 9px !important;
  font-weight: 760 !important;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

#po-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text,
#inv-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text,
#so-create-panel .field:has(> .signature-pad-wrap) > .quote-help-text {
  margin-top: 8px !important;
  line-height: 1.48 !important;
}

#po-create-panel .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap,
#inv-create-panel .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap,
#so-create-panel .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap {
  border-color: #adc2db;
}

#po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions,
#inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions,
#so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions::before,
#inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions::before,
#so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions::before {
  content: "Use finger, mouse, or stylus";
  color: var(--signature-hint);
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.3;
}

#po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button,
#inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button,
#so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button {
  width: auto !important;
  min-width: 118px !important;
  flex: 0 0 auto;
}

#po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button::before,
#inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button::before,
#so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions .ghost-button::before {
  content: "↺";
  margin-right: 6px;
  color: var(--signature-accent);
  font-size: 15px;
  line-height: 1;
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap),
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap),
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap) {
  --signature-accent: #82afff;
  --signature-accent-soft: #15294a;
  --signature-hint: #8194ad;
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap) > label::before,
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap) > label::before,
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap) > label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2382afff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(130, 175, 255, 0.12);
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap) > label span,
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap) > label span,
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap) > label span {
  border-color: #30425d;
  background: #142136;
  color: #91a7c2 !important;
}

[data-theme="dark"] #po-create-panel .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap,
[data-theme="dark"] #inv-create-panel .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap,
[data-theme="dark"] #so-create-panel .field:has(> .signature-pad-wrap):hover > .signature-pad-wrap {
  border-color: #48617f;
}

@media (max-width: 360px) {
  #po-create-panel .field:has(> .signature-pad-wrap) > label,
  #inv-create-panel .field:has(> .signature-pad-wrap) > label,
  #so-create-panel .field:has(> .signature-pad-wrap) > label {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  #po-create-panel .field:has(> .signature-pad-wrap) > label span,
  #inv-create-panel .field:has(> .signature-pad-wrap) > label span,
  #so-create-panel .field:has(> .signature-pad-wrap) > label span {
    grid-column: 2;
    justify-self: start;
  }

  #po-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions::before,
  #inv-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions::before,
  #so-create-panel .field:has(> .signature-pad-wrap) > .brand-logo-actions::before {
    max-width: 110px;
  }
}

/* Keep the landed-cost editor inside the mobile Bill canvas. These rules sit at
   the end of the cascade because the shared transaction-table mobile styles are
   intentionally broad. */
@media (max-width: 768px) {
  #bill-form .landed-cost-card,
  #bill-form .landed-cost-body,
  #bill-form .landed-cost-table-wrap,
  #bill-form .landed-allocation-card,
  #bill-form .landed-allocation-table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bill-form .landed-cost-table,
  #bill-form .landed-cost-table tbody,
  #bill-form .landed-allocation-table,
  #bill-form .landed-allocation-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bill-form .landed-cost-table tr,
  #bill-form .landed-allocation-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bill-form .landed-cost-table tr.landed-cost-row.is-hidden {
    display: none !important;
  }

  #bill-form .landed-cost-table td,
  #bill-form .landed-allocation-table td {
    display: grid !important;
    grid-template-columns: minmax(82px, 32%) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bill-form .landed-cost-table td > *,
  #bill-form .landed-allocation-table td > *,
  #bill-form .landed-cost-control,
  #bill-form .landed-basis-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bill-form .landed-cost-remove-cell {
    grid-template-columns: 1fr !important;
  }

  #bill-form .landed-cost-remove {
    width: 30px !important;
  }
}