/* ========================================================================== 
   Braynix Books — final presentation layer
   CSS only. No application, accounting, authentication, or data behaviour.
   ========================================================================== */

:root {
  --bb-ui-ease: cubic-bezier(.2, .72, .28, 1);
  --bb-ui-focus: 0 0 0 4px rgba(37, 99, 235, .16);
}

::selection {
  color: #fff;
  background: #2563eb;
}

/* Public website ---------------------------------------------------------- */

.auth-overlay {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.auth-overlay .auth-view:not(.auth-view--hidden) {
  background:
    radial-gradient(circle at 8% 8%, rgba(59, 130, 246, .085), transparent 25rem),
    radial-gradient(circle at 92% 12%, rgba(16, 185, 129, .065), transparent 23rem),
    #fbfdff;
}

.auth-overlay .nav {
  border-bottom: 1px solid rgba(215, 225, 238, .88);
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 8px 30px -26px rgba(15, 38, 74, .7);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.auth-overlay .nav .wrap {
  max-width: 1460px;
}

.auth-overlay .brand {
  color: #10233f;
  font-weight: 800;
}

.auth-overlay .brand-mark {
  border: 1px solid rgba(202, 216, 235, .9);
  box-shadow: 0 7px 22px rgba(27, 66, 113, .12);
}

.auth-overlay .nav-links button {
  min-height: 40px;
  padding-inline: 15px;
  color: #4c5e76;
  font-weight: 600;
}

.auth-overlay .nav-links button.active {
  color: #1e61ce;
  background: #edf4ff;
}

.auth-overlay .nav-links button:hover {
  color: #153765;
  background: #f1f5fa;
}

.auth-overlay .nav-cta .btn {
  min-height: 44px;
  border-radius: 12px;
}

.auth-overlay .hero {
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 86px));
  background:
    linear-gradient(180deg, rgba(244, 249, 255, .78), rgba(255, 255, 255, .3) 58%, transparent),
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .9), transparent 34rem);
}

.auth-overlay .hero-inner {
  max-width: 980px;
}

.auth-overlay .hero .pill {
  border-color: #d7e4f2;
  color: #40546e;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(25, 62, 108, .07);
  backdrop-filter: blur(12px);
}

.auth-overlay .hero h1 {
  max-width: 980px;
  margin-inline: auto;
  color: #0e203b;
  font-size: clamp(42px, 5.75vw, 76px);
  line-height: 1.045;
  letter-spacing: -.048em;
  overflow-wrap: anywhere;
}

.auth-overlay .hero .lead {
  max-width: 710px;
  color: #43556d;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.7;
}

.auth-overlay .hero-cta .btn {
  min-height: 54px;
  padding-inline: 28px;
}

.auth-overlay .hero-stage .app {
  border: 1px solid rgba(182, 200, 225, .46);
  box-shadow:
    0 42px 90px -28px rgba(15, 42, 82, .35),
    0 18px 42px -28px rgba(31, 99, 216, .32),
    0 0 0 1px rgba(255, 255, 255, .84) inset !important;
}

.auth-overlay :is(.trust-item, .feature-card, .why-card, .value-card, .search-market-card) {
  border-color: #dce6f1;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 34px rgba(23, 53, 91, .065);
}

.auth-overlay :is(.trust-item, .feature-card, .why-card, .value-card, .search-market-card):hover {
  border-color: #b9d0ed;
  box-shadow: 0 22px 52px rgba(28, 78, 148, .12);
}

.auth-overlay .sec:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(244, 248, 253, .72), rgba(250, 252, 255, .48));
}

.auth-overlay .section-head .eyebrow {
  font-weight: 800;
  letter-spacing: .08em;
}

.auth-overlay .section-head :is(.h-xl, .h-lg) {
  letter-spacing: -.035em;
}

.auth-overlay .plan {
  border-color: #d8e3ef;
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(22, 50, 87, .08);
}

.auth-overlay .plan.featured {
  box-shadow: 0 28px 70px rgba(15, 39, 84, .24);
}

.auth-overlay .faq-item {
  border-color: #dbe5ef;
  border-radius: 15px;
  box-shadow: 0 7px 24px rgba(24, 54, 91, .055);
}

.auth-overlay .faq-item[open] {
  border-color: #b9d1ef;
  box-shadow: 0 14px 36px rgba(30, 83, 157, .10);
}

.auth-overlay .footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(57, 117, 219, .18), transparent 24rem),
    linear-gradient(145deg, #0a1425, #0e1c32 58%, #0b1729);
}

.auth-overlay .auth-page-bg {
  background:
    radial-gradient(circle at 88% 10%, rgba(59, 130, 246, .10), transparent 23rem),
    #f7faff;
}

.auth-overlay .auth-page-panel {
  border: 1px solid #dbe5f0;
  border-radius: 24px;
  padding: clamp(26px, 4vw, 42px);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 28px 70px rgba(17, 45, 84, .13);
}

.auth-overlay .auth-page-title {
  color: #10233f;
  letter-spacing: -.035em;
}

.auth-overlay :is(.auth-google-btn, .auth-field input) {
  min-height: 48px;
  border-color: #cedbea;
  border-radius: 12px;
  background: #fff;
}

.auth-overlay :is(.auth-google-btn, .auth-field input):hover {
  border-color: #a9bfdc;
}

.auth-overlay .auth-field input:focus {
  border-color: #3b79da;
  box-shadow: var(--bb-ui-focus);
}

.auth-overlay .auth-page-submit {
  min-height: 50px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2d72df, #1c5dcc);
  box-shadow: 0 9px 22px rgba(31, 99, 216, .24);
}

/* Signed-in product ------------------------------------------------------- */

body.bb-app-active {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body.bb-app-active .workspace {
  background:
    radial-gradient(circle at 92% -4%, rgba(46, 112, 220, .075), transparent 30rem),
    linear-gradient(180deg, color-mix(in srgb, var(--pro-canvas) 94%, #edf5ff 6%), var(--pro-canvas) 35rem);
}

body.bb-app-active .topbar {
  border-color: color-mix(in srgb, var(--pro-line) 82%, #b8cbe3 18%);
  box-shadow: 0 14px 34px rgba(21, 48, 82, .09), 0 2px 8px rgba(21, 48, 82, .04);
}

body.bb-app-active .topbar::after {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .94), transparent);
  pointer-events: none;
}

body.bb-app-active .topbar h2,
body.bb-app-active :is(.inv-list-title, .section-header h3, .dash-company) {
  text-wrap: balance;
}

body.bb-app-active :is(.panel, .metric-card, .zoho-widget) {
  border-color: color-mix(in srgb, var(--pro-line) 88%, #b9cce3 12%);
  box-shadow: 0 8px 24px rgba(20, 48, 82, .055), 0 1px 3px rgba(20, 48, 82, .035);
}

body.bb-app-active .section-header {
  gap: 16px;
}

body.bb-app-active .section-header h3 {
  line-height: 1.22;
}

body.bb-app-active :is(.primary-button, .ghost-button, .danger-button, .table-action) {
  min-height: 38px;
  transition: transform .16s var(--bb-ui-ease), border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

body.bb-app-active :is(.primary-button, .ghost-button, .danger-button, .table-action):active {
  transform: translateY(0) scale(.985);
}

body.bb-app-active :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.bb-app-active :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
):focus {
  outline: none;
  border-color: #4b84de;
  box-shadow: var(--bb-ui-focus);
}

body.bb-app-active :is(.data-table-wrap, .table-shell, .report-table-shell) {
  overflow: hidden;
}

body.bb-app-active :is(.data-table, .items-table, .report-table) tbody tr {
  transition: background .14s ease, box-shadow .14s ease;
}

body.bb-app-active :is(.data-table, .items-table, .report-table) tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--pro-surface-soft) 42%, transparent);
}

body.bb-app-active :is(.data-table, .items-table, .report-table) tbody tr:hover td {
  background: color-mix(in srgb, var(--pro-blue-soft) 78%, var(--pro-surface) 22%);
}

body.bb-app-active :is(.status-pill, .status-badge, .filter-chip, .inv-filter-btn, .quote-filter-btn) {
  letter-spacing: .015em;
}

body.bb-app-active .modal-overlay {
  background: rgba(6, 18, 36, .58);
  backdrop-filter: blur(7px) saturate(115%);
}

body.bb-app-active .modal-card {
  border-color: color-mix(in srgb, var(--pro-line) 82%, #c4d4e7 18%);
  box-shadow: 0 36px 90px rgba(4, 17, 38, .28), 0 10px 26px rgba(4, 17, 38, .10);
}

body.bb-app-active :is(.stg-card, .report-card, .pdf-gen-tile, .dashboard-setup-panel) {
  transition: transform .17s var(--bb-ui-ease), border-color .17s ease, box-shadow .17s ease;
}

body.bb-app-active :is(.stg-card, .report-card, .pdf-gen-tile):hover {
  border-color: color-mix(in srgb, var(--pro-blue) 36%, var(--pro-line));
  box-shadow: 0 14px 32px rgba(21, 58, 105, .09);
  transform: translateY(-1px);
}

body.bb-app-active .ai-chat-fab {
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 14px 32px rgba(28, 92, 210, .35), 0 3px 9px rgba(28, 92, 210, .18);
}

/* Fleet: dispatch-friendly inline updates -------------------------------- */

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-edit-cell { min-width: 132px; }

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker {
  --fleet-picker-bg: #f4f7fb;
  --fleet-picker-border: #d7e1ec;
  --fleet-picker-ink: #41566e;
  --fleet-picker-dot: #94a3b8;
  position: relative;
  display: inline-flex;
  width: 100%;
  max-width: 178px;
  height: 34px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--fleet-picker-border);
  border-radius: 10px;
  color: var(--fleet-picker-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fleet-picker-bg) 78%, #fff), var(--fleet-picker-bg));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--fleet-picker-dot) 10%, transparent);
  transition: border-color .16s var(--bb-ui-ease), box-shadow .16s var(--bb-ui-ease), transform .16s var(--bb-ui-ease);
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker::before {
  content: "";
  position: absolute;
  left: 11px;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fleet-picker-dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fleet-picker-dot) 13%, transparent);
  pointer-events: none;
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker:hover {
  border-color: color-mix(in srgb, var(--fleet-picker-dot) 48%, #cbd5e1);
  box-shadow: 0 5px 13px color-mix(in srgb, var(--fleet-picker-dot) 15%, transparent);
  transform: translateY(-1px);
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker:focus-within {
  border-color: var(--fleet-picker-dot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fleet-picker-dot) 16%, transparent), 0 5px 13px color-mix(in srgb, var(--fleet-picker-dot) 12%, transparent);
  outline: none;
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-select {
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0 !important;
  border-radius: inherit;
  padding: 0 32px 0 27px !important;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 10.5px;
  font-weight: 780;
  text-overflow: ellipsis;
  cursor: pointer;
  outline: none;
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-select option {
  color: #17273a;
  background: #fff;
  font-weight: 650;
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker-chevron {
  position: absolute;
  right: 8px;
  width: 17px;
  height: 17px;
  opacity: .72;
  pointer-events: none;
  transition: transform .16s var(--bb-ui-ease), opacity .16s var(--bb-ui-ease);
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker:hover .fleet-inline-picker-chevron {
  opacity: 1;
  transform: translateY(1px);
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--vehicle.has-value {
  --fleet-picker-bg: #edf7ff;
  --fleet-picker-border: #bcdaf2;
  --fleet-picker-ink: #195a91;
  --fleet-picker-dot: #2585cf;
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--payroll.has-value {
  --fleet-picker-bg: #f3f0ff;
  --fleet-picker-border: #d4c8fb;
  --fleet-picker-ink: #6342a6;
  --fleet-picker-dot: #8b5cf6;
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--status.is-active {
  --fleet-picker-bg: #eaf9f1;
  --fleet-picker-border: #b5e5cc;
  --fleet-picker-ink: #10734d;
  --fleet-picker-dot: #20a873;
  max-width: 120px;
}

body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--status.is-inactive {
  --fleet-picker-bg: #fff2f3;
  --fleet-picker-border: #f0c4c9;
  --fleet-picker-ink: #a23e4b;
  --fleet-picker-dot: #df5968;
  max-width: 120px;
}

body.bb-app-active #vehicles .fleet-inline-picker--status.is-workshop {
  --fleet-picker-bg: #fff8e7;
  --fleet-picker-border: #f0d38f;
  --fleet-picker-ink: #93620d;
  --fleet-picker-dot: #e5a51f;
  max-width: 126px;
}

body.bb-app-active #vehicles .fleet-inline-picker--status.is-idle {
  --fleet-picker-bg: #eef5ff;
  --fleet-picker-border: #c7d9f3;
  --fleet-picker-ink: #3a6191;
  --fleet-picker-dot: #5b8fd1;
  max-width: 120px;
}

body.bb-app-active #vehicles .fleet-inline-picker--status.is-sold {
  --fleet-picker-bg: #f5f0ff;
  --fleet-picker-border: #d8c9f3;
  --fleet-picker-ink: #6d4a9d;
  --fleet-picker-dot: #9566cf;
  max-width: 120px;
}

body.bb-app-active :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.auth-overlay :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(37, 99, 235, .34);
  outline-offset: 2px;
}

html[data-theme="dark"] body.bb-app-active .workspace {
  background:
    radial-gradient(circle at 92% -4%, rgba(68, 128, 226, .095), transparent 29rem),
    var(--pro-canvas);
}

html[data-theme="dark"] body.bb-app-active .topbar::after {
  background: linear-gradient(90deg, transparent, rgba(139, 177, 228, .12), transparent);
}

html[data-theme="dark"] body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker {
  --fleet-picker-bg: #172536;
  --fleet-picker-border: #344a61;
  --fleet-picker-ink: #b6c5d6;
  --fleet-picker-dot: #8294a9;
}

html[data-theme="dark"] body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--vehicle.has-value {
  --fleet-picker-bg: #102a3e;
  --fleet-picker-border: #285372;
  --fleet-picker-ink: #8ed0ff;
  --fleet-picker-dot: #4eb5f5;
}

html[data-theme="dark"] body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--payroll.has-value {
  --fleet-picker-bg: #251d3d;
  --fleet-picker-border: #4e3d70;
  --fleet-picker-ink: #c8b5ff;
  --fleet-picker-dot: #a78bfa;
}

html[data-theme="dark"] body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--status.is-active {
  --fleet-picker-bg: #102d25;
  --fleet-picker-border: #28594b;
  --fleet-picker-ink: #6ee7b7;
  --fleet-picker-dot: #34d399;
}

html[data-theme="dark"] body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker--status.is-inactive {
  --fleet-picker-bg: #321b22;
  --fleet-picker-border: #6b3442;
  --fleet-picker-ink: #fda4af;
  --fleet-picker-dot: #fb7185;
}

html[data-theme="dark"] body.bb-app-active #vehicles .fleet-inline-picker--status.is-workshop {
  --fleet-picker-bg: #302614;
  --fleet-picker-border: #66522a;
  --fleet-picker-ink: #f7ca69;
  --fleet-picker-dot: #fbbf24;
}

html[data-theme="dark"] body.bb-app-active #vehicles .fleet-inline-picker--status.is-idle {
  --fleet-picker-bg: #152942;
  --fleet-picker-border: #335474;
  --fleet-picker-ink: #a9ceff;
  --fleet-picker-dot: #60a5fa;
}

html[data-theme="dark"] body.bb-app-active #vehicles .fleet-inline-picker--status.is-sold {
  --fleet-picker-bg: #281f3b;
  --fleet-picker-border: #52416d;
  --fleet-picker-ink: #d2b9fa;
  --fleet-picker-dot: #a78bfa;
}

html[data-theme="dark"] body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-select option {
  color: #e7eef8;
  background: #111d2d;
}

/* Responsive public and product layouts --------------------------------- */

@media (max-width: 1120px) {
  .auth-overlay .nav-links { display: none; }
  .auth-overlay .nav-cta .btn-ghost:not(.nav-signin) { display: none; }
  .auth-overlay .nav-toggle { display: grid; place-items: center; }
  .auth-overlay .hero h1 { font-size: clamp(42px, 5.8vw, 60px); }
  body.bb-app-active .workspace { padding-inline: 20px; }
}

@media (max-width: 860px) {
  .auth-overlay .hero h1 {
    max-width: 720px;
    font-size: clamp(38px, 7.2vw, 52px);
  }
  .auth-overlay .hero-stage { margin-top: 44px; }
}

@media (max-width: 768px) {
  body.bb-app-active .workspace {
    gap: 12px;
    padding: 10px 10px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  body.bb-app-active .topbar {
    top: 8px;
    min-height: 62px;
    border-radius: 15px;
    padding: 10px 12px;
  }

  body.bb-app-active :is(.panel, .metric-card, .zoho-widget, .modal-card) {
    border-radius: 15px;
  }

  body.bb-app-active .panel { padding: 16px; }

  body.bb-app-active :is(.primary-button, .ghost-button, .danger-button, .table-action) {
    min-height: 42px;
  }

  body.bb-app-active :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    min-height: 46px;
    font-size: 16px;
  }

  body.bb-app-active :is(.data-table, .items-table, .report-table) tbody tr:nth-child(even) td {
    background: transparent;
  }

  body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-edit-cell,
  body.bb-app-active :is(#vehicles, #drivers) .fleet-inline-picker {
    width: 100%;
    max-width: none;
  }

  .auth-overlay .auth-page-panel {
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 20px 52px rgba(17, 45, 84, .12);
  }
}

@media (max-width: 640px) {
  .auth-overlay .hero {
    padding-top: calc(var(--nav-h) + 30px);
  }

  .auth-overlay .hero h1 {
    font-size: clamp(34px, 10.4vw, 43px);
    line-height: 1.08;
    letter-spacing: -.042em;
  }

  .auth-overlay .hero h1 br { display: none; }
  .auth-overlay .hero .lead { font-size: 16px; }
  .auth-overlay .hero-cta { display: grid; grid-template-columns: 1fr; }
  .auth-overlay .hero-note { grid-template-columns: 1fr 1fr; }
  .auth-overlay .hero-note span { min-width: 0; font-size: 11.5px; }
}

@media (max-width: 390px) {
  .auth-overlay .hero-note { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-overlay *,
  .auth-overlay *::before,
  .auth-overlay *::after,
  body.bb-app-active *,
  body.bb-app-active *::before,
  body.bb-app-active *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Customer 360 workspace -------------------------------------------------- */

body.bb-app-active :is(#customers, #vendors) .customer-workspace-shell {
  --customer-blue: #1967e8;
  --customer-blue-strong: #1454c4;
  --customer-navy: #10213b;
  --customer-muted: #6c7f99;
  --customer-line: #dbe5f1;
  --customer-soft: #f5f8fc;
  display: grid;
  grid-template-columns: minmax(280px, 318px) minmax(0, 1fr);
  min-height: min(780px, calc(100vh - 156px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--customer-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(23, 55, 98, .09), 0 2px 6px rgba(23, 55, 98, .04);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--customer-line);
  background: #fbfdff;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  padding: 17px 18px 13px;
  border-bottom: 1px solid #e7eef7;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list > header small,
body.bb-app-active :is(#customers, #vendors) .customer-workspace-header > div:first-of-type small,
body.bb-app-active :is(#customers, #vendors) .customer-content-heading small {
  display: block;
  margin-bottom: 3px;
  color: #7589a5;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .1em;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list > header h3 {
  margin: 0;
  color: var(--customer-navy);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 19px;
  letter-spacing: -.03em;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list > header .primary-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 11px;
  font-size: 22px;
  line-height: 1;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px;
  padding: 0 11px;
  border: 1px solid #d8e4f1;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(31, 55, 88, .03);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-search:focus-within {
  border-color: #8cb8f5;
  box-shadow: 0 0 0 3px rgba(25, 103, 232, .1);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-search > span {
  color: #7990ac;
  font-size: 20px;
  transform: rotate(-20deg);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-search input {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--customer-navy);
  font-size: 13px;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-scroll {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c6d5e6 transparent;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid #e8eff7;
  border-radius: 0;
  background: transparent;
  color: var(--customer-navy);
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item:hover {
  background: #f0f6ff;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item.active {
  background: linear-gradient(90deg, #eaf3ff 0%, #f5f9ff 100%);
  box-shadow: inset 3px 0 0 var(--customer-blue);
}

body.bb-app-active :is(#customers, #vendors) .customer-list-avatar,
body.bb-app-active :is(#customers, #vendors) .customer-profile-avatar,
body.bb-app-active :is(#customers, #vendors) .customer-workspace-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: linear-gradient(145deg, #256fe5, #1455bf);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(25, 103, 232, .18);
}

body.bb-app-active :is(#customers, #vendors) .customer-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 13px;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item > span:nth-child(2) {
  min-width: 0;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item strong,
body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item strong {
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 750;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item small {
  color: #7c8fa8;
  font-size: 10.5px;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item em {
  color: #3c5472;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item em.is-due {
  color: #d14343;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid #e3ebf5;
  color: #8192a8;
  font-size: 10.5px;
  font-weight: 700;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-list > footer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--customer-blue);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-detail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--customer-soft);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 84px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--customer-line);
  background: rgba(255, 255, 255, .96);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-header > div:first-of-type {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-avatar {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-header h3 {
  overflow: hidden;
  max-width: 390px;
  margin: 0;
  color: var(--customer-navy);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-header p {
  overflow: hidden;
  max-width: 390px;
  margin: 4px 0 0;
  color: #778ba5;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-actions .ghost-button,
body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > summary {
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid #d3deeb;
  border-radius: 10px;
  background: #fff;
  color: #314a69;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(31, 55, 88, .03);
  cursor: pointer;
}

body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu {
  position: relative;
}

body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > summary {
  display: flex;
  align-items: center;
  border-color: var(--customer-blue);
  background: linear-gradient(135deg, #2374ec, #1559cb);
  color: #fff;
  list-style: none;
  box-shadow: 0 8px 18px rgba(25, 103, 232, .2);
}

body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > summary::-webkit-details-marker { display: none; }

body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 260px;
  gap: 4px;
  padding: 8px;
  border: 1px solid #d7e2ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(22, 43, 72, .18);
}

body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > div button {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #1d3554;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > div button:hover {
  background: #eef5ff;
  color: var(--customer-blue-strong);
}

body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > div button span {
  color: #7b8da4;
  font-size: 10px;
  font-weight: 500;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-close,
body.bb-app-active :is(#customers, #vendors) .customer-workspace-mobile-back {
  display: grid;
  width: 36px;
  height: 36px;
  min-width: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid #d8e2ee;
  border-radius: 10px;
  background: #fff;
  color: #6f8299;
  font-size: 20px;
  cursor: pointer;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-mobile-back { display: none; }

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs {
  display: flex;
  min-height: 51px;
  align-items: stretch;
  gap: 4px;
  padding: 0 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--customer-line);
  background: #fff;
  scrollbar-width: none;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs::-webkit-scrollbar { display: none; }

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs button {
  position: relative;
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #687d98;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs button::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  content: "";
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs button.active {
  color: var(--customer-blue);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs button.active::after {
  background: var(--customer-blue);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs svg,
body.bb-app-active :is(#customers, #vendors) .customer-workspace-empty svg,
body.bb-app-active :is(#customers, #vendors) .customer-transaction-group svg,
body.bb-app-active :is(#customers, #vendors) .customer-mails-shell svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs em {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #e9f2ff;
  color: var(--customer-blue);
  font-size: 9px;
  font-style: normal;
  text-align: center;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-content {
  min-height: 0;
  flex: 1;
  padding: 20px;
  overflow: auto;
}

body.bb-app-active :is(#customers, #vendors) .customer-overview-grid {
  display: grid;
  grid-template-columns: minmax(240px, 292px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-column,
body.bb-app-active :is(#customers, #vendors) .customer-finance-column {
  display: grid;
  min-width: 0;
  gap: 14px;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-card,
body.bb-app-active :is(#customers, #vendors) .customer-content-card,
body.bb-app-active :is(#customers, #vendors) .customer-comment-composer,
body.bb-app-active :is(#customers, #vendors) .customer-comment-history,
body.bb-app-active :is(#customers, #vendors) .customer-mails-shell {
  overflow: hidden;
  border: 1px solid var(--customer-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(31, 55, 88, .035);
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-identity {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 16px;
  border-bottom: 1px solid #e7eef6;
  background: linear-gradient(145deg, #f9fbff, #f2f7ff);
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-avatar {
  width: 44px;
  height: 44px;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-identity > div {
  min-width: 0;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-identity strong,
body.bb-app-active :is(#customers, #vendors) .customer-profile-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-identity strong {
  color: var(--customer-navy);
  font-size: 13px;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-identity > div span {
  margin-top: 3px;
  color: #7d8fa6;
  font-size: 10px;
}

body.bb-app-active :is(#customers, #vendors) .customer-live-badge {
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #b7ead4;
  border-radius: 999px;
  background: #eefbf5;
  color: #14845a;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  grid-column: 2;
  justify-self: start;
}

body.bb-app-active :is(#customers, #vendors) .customer-live-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #20b97b;
}

body.bb-app-active :is(#customers, #vendors) .customer-contact-list {
  display: grid;
  padding: 5px 0;
}

body.bb-app-active :is(#customers, #vendors) .customer-contact-list > a,
body.bb-app-active :is(#customers, #vendors) .customer-contact-list > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: inherit;
  text-decoration: none;
}

body.bb-app-active :is(#customers, #vendors) .customer-contact-list > a:hover { background: #f7faff; }
body.bb-app-active :is(#customers, #vendors) .customer-contact-list > .is-empty { opacity: .62; }

body.bb-app-active :is(#customers, #vendors) .customer-contact-list > :is(a, div) > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--customer-blue);
  font-size: 11px;
  font-weight: 800;
}

body.bb-app-active :is(#customers, #vendors) .customer-contact-list small,
body.bb-app-active :is(#customers, #vendors) .customer-contact-list strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active :is(#customers, #vendors) .customer-contact-list small {
  margin-bottom: 2px;
  color: #8495a9;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.bb-app-active :is(#customers, #vendors) .customer-contact-list strong {
  color: #29415f;
  font-size: 10.5px;
  font-weight: 650;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-section-title {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e7eef6;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-section-title strong {
  color: #223a58;
  font-size: 11px;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-section-title button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--customer-blue);
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}

body.bb-app-active :is(#customers, #vendors) .customer-address-block {
  padding: 11px 14px;
  border-bottom: 1px solid #eef3f8;
}

body.bb-app-active :is(#customers, #vendors) .customer-address-block:last-child { border-bottom: 0; }

body.bb-app-active :is(#customers, #vendors) .customer-address-block small {
  color: #8394a9;
  font-size: 8.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.bb-app-active :is(#customers, #vendors) .customer-address-block p {
  margin: 5px 0 0;
  color: #3f5570;
  font-size: 10.5px;
  line-height: 1.55;
}

body.bb-app-active :is(#customers, #vendors) .customer-detail-list {
  display: grid;
  margin: 0;
  padding: 6px 14px 10px;
}

body.bb-app-active :is(#customers, #vendors) .customer-detail-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed #e6edf5;
  font-size: 9.5px;
}

body.bb-app-active :is(#customers, #vendors) .customer-detail-list > div:last-child { border-bottom: 0; }
body.bb-app-active :is(#customers, #vendors) .customer-detail-list dt { color: #8596aa; }
body.bb-app-active :is(#customers, #vendors) .customer-detail-list dd { margin: 0; color: #2a405d; font-weight: 700; text-align: right; }

body.bb-app-active :is(#customers, #vendors) .customer-finance-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--customer-line);
  border-radius: 15px;
  background: linear-gradient(135deg, #fff, #f8fbff);
  box-shadow: 0 4px 12px rgba(31, 55, 88, .035);
}

body.bb-app-active :is(#customers, #vendors) .customer-finance-hero > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 17px 16px;
  border-right: 1px solid #e4ecf6;
}

body.bb-app-active :is(#customers, #vendors) .customer-finance-hero > div:last-child { border-right: 0; }

body.bb-app-active :is(#customers, #vendors) .customer-finance-hero small {
  color: #7c8fa6;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .065em;
}

body.bb-app-active :is(#customers, #vendors) .customer-finance-hero strong {
  overflow: hidden;
  color: var(--customer-navy);
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.15;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active :is(#customers, #vendors) .customer-finance-hero strong.is-due { color: #d63e48; }
body.bb-app-active :is(#customers, #vendors) .customer-finance-hero strong.is-clear { color: #14956a; }
body.bb-app-active :is(#customers, #vendors) .customer-finance-hero span { color: #8a9aaf; font-size: 9px; }

body.bb-app-active :is(#customers, #vendors) .customer-content-heading {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  border-bottom: 1px solid #e6edf6;
}

body.bb-app-active :is(#customers, #vendors) .customer-content-heading h4 {
  margin: 0;
  color: #1b3453;
  font-size: 12.5px;
  letter-spacing: -.01em;
}

body.bb-app-active :is(#customers, #vendors) .customer-content-heading > span {
  padding: 4px 8px;
  border: 1px solid #d8e5f3;
  border-radius: 999px;
  background: #f8fbff;
  color: #627892;
  font-size: 8.5px;
  font-weight: 750;
}

body.bb-app-active :is(#customers, #vendors) .customer-income-chart {
  display: flex;
  height: 150px;
  align-items: stretch;
  justify-content: space-around;
  gap: 12px;
  padding: 18px 18px 12px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, #eef3f8 36px);
}

body.bb-app-active :is(#customers, #vendors) .customer-income-month {
  display: grid;
  width: 100%;
  max-width: 54px;
  grid-template-rows: 1fr auto;
  gap: 7px;
  align-items: end;
  justify-items: center;
}

body.bb-app-active :is(#customers, #vendors) .customer-income-bar {
  display: flex;
  width: 16px;
  height: 100%;
  align-items: end;
  overflow: hidden;
  border-radius: 7px 7px 3px 3px;
  background: #edf3fb;
}

body.bb-app-active :is(#customers, #vendors) .customer-income-bar i {
  width: 100%;
  min-height: 3px;
  border-radius: inherit;
  background: linear-gradient(180deg, #4a91f6, #1762d6);
  box-shadow: 0 -4px 12px rgba(25, 103, 232, .16);
}

body.bb-app-active :is(#customers, #vendors) .customer-income-month small {
  color: #8293a8;
  font-size: 8.5px;
  font-weight: 700;
}

body.bb-app-active :is(#customers, #vendors) .customer-activity-list { padding: 6px 15px 10px; }

body.bb-app-active :is(#customers, #vendors) .customer-activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid #eef3f8;
}

body.bb-app-active :is(#customers, #vendors) .customer-activity-item:last-child { border-bottom: 0; }

body.bb-app-active :is(#customers, #vendors) .customer-activity-marker {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border: 2px solid #b8d5fa;
  border-radius: 50%;
  background: var(--customer-blue);
}

body.bb-app-active :is(#customers, #vendors) .customer-activity-item strong,
body.bb-app-active :is(#customers, #vendors) .customer-activity-item p {
  display: block;
  margin: 0;
}

body.bb-app-active :is(#customers, #vendors) .customer-activity-item strong { color: #2a405d; font-size: 10px; }
body.bb-app-active :is(#customers, #vendors) .customer-activity-item p { margin-top: 3px; color: #8293a8; font-size: 8.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-activity-item time { color: #93a1b4; font-size: 8px; white-space: nowrap; }

body.bb-app-active :is(#customers, #vendors) .customer-workspace-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  color: #7388a3;
  text-align: center;
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d6e5f7;
  border-radius: 13px;
  background: #eff6ff;
  color: var(--customer-blue);
}

body.bb-app-active :is(#customers, #vendors) .customer-workspace-empty strong { color: #2c425e; font-size: 11.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-workspace-empty p { max-width: 360px; margin: 0; font-size: 9.5px; line-height: 1.5; }

body.bb-app-active :is(#customers, #vendors) .customer-transactions-toolbar,
body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--customer-line);
  border-radius: 14px;
  background: #fff;
}

body.bb-app-active :is(#customers, #vendors) .customer-transactions-toolbar strong,
body.bb-app-active :is(#customers, #vendors) .customer-transactions-toolbar span,
body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar strong,
body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar span {
  display: block;
}

body.bb-app-active :is(#customers, #vendors) .customer-transactions-toolbar strong,
body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar strong { color: #1d3553; font-size: 12px; }
body.bb-app-active :is(#customers, #vendors) .customer-transactions-toolbar div span,
body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar div span { margin-top: 4px; color: #7f91a7; font-size: 9.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-transactions-toolbar > span { padding: 5px 9px; border-radius: 999px; background: #eaf3ff; color: var(--customer-blue); font-size: 9px; font-weight: 800; }

body.bb-app-active :is(#customers, #vendors) .customer-transaction-groups { display: grid; gap: 9px; }

body.bb-app-active :is(#customers, #vendors) .customer-transaction-group {
  overflow: hidden;
  border: 1px solid var(--customer-line);
  border-radius: 13px;
  background: #fff;
}

body.bb-app-active :is(#customers, #vendors) .customer-transaction-group[open] {
  box-shadow: 0 8px 20px rgba(31, 55, 88, .045);
}

body.bb-app-active :is(#customers, #vendors) .customer-transaction-group > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  list-style: none;
  cursor: pointer;
}

body.bb-app-active :is(#customers, #vendors) .customer-transaction-group > summary::-webkit-details-marker { display: none; }

body.bb-app-active :is(#customers, #vendors) .customer-transaction-group > summary > span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #273f5d;
}

body.bb-app-active :is(#customers, #vendors) .customer-transaction-group summary i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--customer-blue);
}

body.bb-app-active :is(#customers, #vendors) .customer-transaction-group summary strong { font-size: 10.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-transaction-group summary em { min-width: 20px; padding: 3px 6px; border-radius: 999px; background: #eef2f7; color: #708299; font-size: 8.5px; font-style: normal; text-align: center; }

body.bb-app-active :is(#customers, #vendors) .customer-group-actions { display: flex; align-items: center; gap: 10px; }
body.bb-app-active :is(#customers, #vendors) .customer-group-actions button { padding: 5px 9px; border: 1px solid #cbdcf0; border-radius: 8px; background: #f8fbff; color: var(--customer-blue); font-size: 9px; font-weight: 800; cursor: pointer; }
body.bb-app-active :is(#customers, #vendors) .customer-group-actions b { color: #7c90aa; font-size: 15px; transition: transform .16s ease; }
body.bb-app-active :is(#customers, #vendors) .customer-transaction-group[open] .customer-group-actions b { transform: rotate(180deg); }

body.bb-app-active :is(#customers, #vendors) .customer-transaction-table-wrap { overflow-x: auto; border-top: 1px solid #e5edf6; }

body.bb-app-active :is(#customers, #vendors) .customer-transaction-table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: 9.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-transaction-table th { padding: 9px 12px; border-bottom: 1px solid #e5edf6; background: #f7f9fc; color: #7b8da4; text-align: left; font-size: 8px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
body.bb-app-active :is(#customers, #vendors) .customer-transaction-table td { padding: 10px 12px; border-bottom: 1px solid #edf2f7; color: #344c68; }
body.bb-app-active :is(#customers, #vendors) .customer-transaction-table tr:last-child td { border-bottom: 0; }
body.bb-app-active :is(#customers, #vendors) .customer-transaction-empty { padding: 15px 50px; border-top: 1px solid #e7eef6; color: #8496ab; font-size: 9.5px; }

body.bb-app-active :is(#customers, #vendors) .customer-comments-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(360px, 1.2fr); gap: 14px; align-items: start; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-composer textarea { display: block; width: calc(100% - 28px); min-height: 165px; margin: 14px; padding: 13px; resize: vertical; border: 1px solid #d6e2f0; border-radius: 11px; background: #fbfdff; color: #29415e; font-size: 11px; line-height: 1.6; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-composer textarea:focus { outline: 0; border-color: #78aaf0; box-shadow: 0 0 0 3px rgba(25, 103, 232, .09); background: #fff; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 14px; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-actions span { color: #8495aa; font-size: 8.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-actions .primary-button { min-height: 36px; padding: 8px 13px; font-size: 9.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-history { min-height: 330px; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 10px; padding: 14px; border-bottom: 1px solid #e9eff6; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item:last-child { border-bottom: 0; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #eaf3ff; color: var(--customer-blue); font-size: 10px; font-weight: 800; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item header strong { color: #2c425e; font-size: 10px; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item header time { color: #96a4b5; font-size: 8px; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item p { margin: 6px 0 0; color: #536a84; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item > button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #9aabba; cursor: pointer; }
body.bb-app-active :is(#customers, #vendors) .customer-comment-item > button:hover { background: #fff0f0; color: #d14343; }

body.bb-app-active :is(#customers, #vendors) .customer-mails-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; border-bottom: 1px solid #e5edf6; }
body.bb-app-active :is(#customers, #vendors) .customer-mails-header > div { display: flex; align-items: center; gap: 11px; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #eaf3ff; color: var(--customer-blue); }
body.bb-app-active :is(#customers, #vendors) .customer-mails-header strong { color: #1f3755; font-size: 12px; }
body.bb-app-active :is(#customers, #vendors) .customer-mails-header p { margin: 3px 0 0; color: #7f91a7; font-size: 9px; }
body.bb-app-active :is(#customers, #vendors) .customer-mails-header .ghost-button { min-height: 36px; padding: 8px 11px; font-size: 9px; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-account,
body.bb-app-active :is(#customers, #vendors) .customer-mail-warning { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 11px 13px; border: 1px solid #d8e6f7; border-radius: 11px; background: #f4f8ff; font-size: 9.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-account span { color: #7c8fa7; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-account strong { color: #2c4564; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-account a { margin-left: auto; color: var(--customer-blue); font-weight: 800; text-decoration: none; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-warning { background: #fff8ed; border-color: #f5dba8; color: #a46508; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-warning button { margin-left: auto; border: 0; background: transparent; color: #bd6a00; font-size: 9px; font-weight: 800; cursor: pointer; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-list { display: grid; border-top: 1px solid #edf2f7; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-list article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid #edf2f7; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-list article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #eef5ff; color: var(--customer-blue); }
body.bb-app-active :is(#customers, #vendors) .customer-mail-list strong { color: #2b425f; font-size: 10.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-list p { margin: 3px 0 0; color: #8394a8; font-size: 8.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-list time { color: #8d9caf; font-size: 8.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-mail-list em { padding: 4px 7px; border-radius: 999px; background: #e8f8f1; color: #13815a; font-size: 8px; font-style: normal; font-weight: 800; }

body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar > div:last-child { display: flex; gap: 7px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar .ghost-button,
body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar .primary-button { min-height: 36px; padding: 8px 11px; font-size: 9px; }

body.bb-app-active :is(#customers, #vendors) .customer-statement-paper {
  width: min(100%, 840px);
  min-height: 690px;
  margin: 0 auto 6px;
  padding: 32px 36px 26px;
  border: 1px solid #d9e3ef;
  background: #fff;
  color: #253a54;
  box-shadow: 0 18px 38px rgba(28, 51, 83, .1);
}

body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 3px solid #1b5fc7; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > header div { display: grid; gap: 5px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > header div:last-child { text-align: right; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > header span { color: #102c52; font-size: 16px; font-weight: 850; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > header strong { color: #1c61c9; font-size: 20px; letter-spacing: .08em; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > header small { color: #8291a4; font-size: 8.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties > div { display: grid; gap: 5px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties > div:last-child { text-align: right; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties small { color: #7f8fa3; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties strong { color: #162e4c; font-size: 12px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties strong.is-due { color: #d43f49; font-size: 18px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties strong.is-clear { color: #15966b; font-size: 18px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-parties span { color: #7d8da1; font-size: 8.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; overflow: hidden; border: 1px solid #dce6f1; border-radius: 11px; background: #f7faff; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-summary div { display: grid; gap: 5px; padding: 12px 14px; border-right: 1px solid #dce6f1; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-summary div:last-child { border-right: 0; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-summary span { color: #7a8ba0; font-size: 8px; font-weight: 750; text-transform: uppercase; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-summary strong { color: #19395f; font-size: 12px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-table-wrap { overflow-x: auto; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 8.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper th { padding: 9px 10px; background: #142c4b; color: #fff; text-align: left; font-size: 7.5px; letter-spacing: .05em; text-transform: uppercase; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper td { padding: 10px; border-bottom: 1px solid #e8eef5; color: #405672; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper td:nth-last-child(-n+3),
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper th:nth-last-child(-n+3) { text-align: right; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper td:nth-child(3) span { padding: 3px 6px; border-radius: 999px; background: #eaf3ff; color: #1c62ca; font-size: 7.5px; font-weight: 750; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 13px; border-top: 1px solid #dce5ef; color: #8291a4; font-size: 7.5px; }
body.bb-app-active :is(#customers, #vendors) .customer-statement-paper > footer strong { color: #53677f; font-weight: 700; }

html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-workspace-shell {
  --customer-navy: #e9f1fb;
  --customer-muted: #91a6bf;
  --customer-line: #2d435d;
  --customer-soft: #0f1b2a;
  background: #101d2c;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) :is(.customer-workspace-list, .customer-workspace-header, .customer-workspace-tabs, .customer-profile-card, .customer-content-card, .customer-comment-composer, .customer-comment-history, .customer-mails-shell, .customer-finance-hero, .customer-transactions-toolbar, .customer-statement-toolbar, .customer-transaction-group) { background: #132235; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) :is(.customer-workspace-search, .customer-workspace-actions .ghost-button, .customer-workspace-close, .customer-workspace-mobile-back, .customer-new-transaction-menu > div) { background: #172a40; border-color: #38536f; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item.active { background: linear-gradient(90deg, #193656, #172a40); }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-workspace-list-item:hover { background: #192d44; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) :is(.customer-workspace-list-item strong, .customer-workspace-header h3, .customer-profile-identity strong, .customer-contact-list strong, .customer-profile-section-title strong, .customer-detail-list dd, .customer-content-heading h4, .customer-activity-item strong, .customer-transactions-toolbar strong, .customer-statement-toolbar strong, .customer-transaction-group > summary > span:first-child, .customer-comment-item header strong, .customer-mails-header strong, .customer-mail-list strong) { color: #e5eef8; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-profile-identity { background: linear-gradient(145deg, #172a40, #142439); }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) :is(.customer-address-block, .customer-content-heading, .customer-profile-section-title, .customer-contact-list > a, .customer-contact-list > div, .customer-activity-item, .customer-comment-item, .customer-mails-header, .customer-mail-list article) { border-color: #2a4058; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-comment-composer textarea { background: #101d2d; border-color: #36516e; color: #e4edf7; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-transaction-table th { background: #17283b; color: #9fb0c4; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-transaction-table td { border-color: #293f56; color: #c8d6e5; }
html[data-theme="dark"] body.bb-app-active :is(#customers, #vendors) .customer-statement-paper { background: #fff; color: #253a54; }

@media (max-width: 1180px) {
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-shell { grid-template-columns: 270px minmax(0, 1fr); }
  body.bb-app-active :is(#customers, #vendors) .customer-overview-grid { grid-template-columns: 245px minmax(0, 1fr); }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header { padding-inline: 16px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header h3,
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header p { max-width: 250px; }
}

@media (max-width: 1400px) {
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-shell { grid-template-columns: 270px minmax(0, 1fr); }
  body.bb-app-active :is(#customers, #vendors) .customer-overview-grid { grid-template-columns: 245px minmax(0, 1fr); }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-content { padding: 16px; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero > div:nth-child(2) { border-right: 0; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero > div:last-child { grid-column: 1 / -1; border-top: 1px solid #e4ecf6; }
}

@media (max-width: 980px) {
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-shell { grid-template-columns: 235px minmax(0, 1fr); }
  body.bb-app-active :is(#customers, #vendors) .customer-overview-grid,
  body.bb-app-active :is(#customers, #vendors) .customer-comments-layout { grid-template-columns: 1fr; }
  body.bb-app-active :is(#customers, #vendors) .customer-profile-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bb-app-active :is(#customers, #vendors) .customer-profile-column .customer-profile-card:first-child { grid-column: 1 / -1; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-actions > .ghost-button { display: none; }
}

@media (max-width: 768px) {
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-shell {
    display: block;
    min-height: calc(100vh - 118px);
    border-radius: 16px;
  }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-list { display: none; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-detail { min-height: calc(100vh - 118px); }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header { position: relative; min-height: 76px; padding: 12px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-mobile-back { display: grid; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-avatar { width: 40px; height: 40px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header > div:first-of-type { flex: 1; gap: 9px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header h3,
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header p { max-width: 34vw; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-close { display: none; }
  body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > summary { min-height: 40px; padding: 8px 10px; font-size: 0; }
  body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > summary::before { content: "+ New"; font-size: 10px; }
  body.bb-app-active :is(#customers, #vendors) .customer-new-transaction-menu > div { position: fixed; top: auto; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); left: 12px; width: auto; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs { padding-inline: 6px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs button { min-height: 48px; padding-inline: 11px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-content { padding: 12px; }
  body.bb-app-active :is(#customers, #vendors) .customer-profile-column { grid-template-columns: 1fr; }
  body.bb-app-active :is(#customers, #vendors) .customer-profile-column .customer-profile-card:first-child { grid-column: auto; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero { grid-template-columns: 1fr 1fr; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero > div { padding: 14px 12px; }
  body.bb-app-active :is(#customers, #vendors) .customer-income-chart { height: 138px; gap: 7px; padding-inline: 11px; }
  body.bb-app-active :is(#customers, #vendors) .customer-transactions-toolbar,
  body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar { align-items: flex-start; }
  body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar { display: grid; }
  body.bb-app-active :is(#customers, #vendors) .customer-statement-toolbar > div:last-child { width: 100%; overflow-x: auto; }
  body.bb-app-active :is(#customers, #vendors) .customer-statement-paper { width: 100%; min-width: 0; margin: 0; padding: 24px 18px; }
  body.bb-app-active :is(#customers, #vendors) .customer-statement-workspace { overflow-x: auto; padding-bottom: 6px; }
  body.bb-app-active :is(#customers, #vendors) .customer-mails-header { align-items: flex-start; }
  body.bb-app-active :is(#customers, #vendors) .customer-mails-header .ghost-button { display: none; }
  body.bb-app-active :is(#customers, #vendors) .customer-mail-list article { grid-template-columns: 32px minmax(0, 1fr) auto; }
  body.bb-app-active :is(#customers, #vendors) .customer-mail-list article em { display: none; }
}

@media (max-width: 480px) {
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-mobile-back { width: 34px; min-width: 34px; height: 34px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header > div:first-of-type small,
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header p { display: none; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-header h3 { max-width: 30vw; font-size: 14px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs button { gap: 5px; padding-inline: 9px; font-size: 9.5px; }
  body.bb-app-active :is(#customers, #vendors) .customer-workspace-tabs svg { width: 13px; height: 13px; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero { grid-template-columns: 1fr; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero > div { border-right: 0; border-bottom: 1px solid #e4ecf6; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero > div:last-child { grid-column: auto; border-bottom: 0; }
  body.bb-app-active :is(#customers, #vendors) .customer-finance-hero strong { font-size: 17px; }
  body.bb-app-active :is(#customers, #vendors) .customer-comment-actions { align-items: flex-end; }
  body.bb-app-active :is(#customers, #vendors) .customer-comment-actions span { max-width: 160px; }
  body.bb-app-active :is(#customers, #vendors) .customer-mail-account,
  body.bb-app-active :is(#customers, #vendors) .customer-mail-warning { align-items: flex-start; flex-wrap: wrap; }
  body.bb-app-active :is(#customers, #vendors) .customer-mail-account a,
  body.bb-app-active :is(#customers, #vendors) .customer-mail-warning button { width: 100%; margin-left: 0; }
}

/* Vendor workspace refinement -------------------------------------------- */

body.bb-app-active #vendors .vendor-workspace-shell {
  --vendor-blue: #1769e8;
  --vendor-teal: #0aa58f;
  position: relative;
  grid-template-columns: minmax(280px, 308px) minmax(0, 1fr);
  border-color: #ccdbea;
  border-radius: 24px;
  background: #f4f8fd;
  box-shadow: 0 24px 60px rgba(31, 64, 108, .12), 0 3px 10px rgba(31, 64, 108, .05);
}

body.bb-app-active #vendors .vendor-workspace-shell::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--vendor-blue), #278cf0 52%, var(--vendor-teal));
  content: "";
  pointer-events: none;
}

body.bb-app-active #vendors .vendor-workspace-list {
  border-right-color: #d8e4f0;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fe 100%);
}

body.bb-app-active #vendors .vendor-directory-header,
body.bb-app-active #vendors .vendor-workspace-header {
  min-height: 96px;
  border-bottom-color: #dce7f2;
  background: linear-gradient(120deg, #fff 0%, #f8fbff 52%, #edf6ff 100%);
}

body.bb-app-active #vendors .vendor-directory-header {
  gap: 10px;
  padding: 18px 15px 15px;
}

body.bb-app-active #vendors .vendor-directory-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

body.bb-app-active #vendors .vendor-directory-title > div {
  min-width: 0;
}

body.bb-app-active #vendors .vendor-directory-mark {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #c9ddfa;
  border-radius: 13px;
  background: linear-gradient(145deg, #f6faff, #e5f1ff);
  color: var(--vendor-blue);
  box-shadow: inset 0 1px 0 #fff, 0 7px 18px rgba(23, 105, 232, .1);
}

body.bb-app-active #vendors .vendor-directory-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.bb-app-active #vendors .vendor-directory-title small {
  margin-bottom: 2px;
  color: #5e7da5;
  font-size: 8.5px;
  letter-spacing: .12em;
}

body.bb-app-active #vendors .vendor-directory-title h3 {
  font-size: 18px;
  line-height: 1.05;
}

body.bb-app-active #vendors .vendor-directory-title p {
  overflow: hidden;
  margin: 4px 0 0;
  color: #8496aa;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active #vendors .vendor-directory-header .vendor-directory-add {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #2377ec, #1458cc);
  color: #fff;
  font-size: 0;
  font-weight: 800;
  box-shadow: 0 9px 20px rgba(23, 105, 232, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.bb-app-active #vendors .vendor-directory-add svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

body.bb-app-active #vendors .vendor-directory-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(23, 105, 232, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.bb-app-active #vendors .vendor-workspace-search {
  margin: 13px 12px 10px;
  border-color: #d4e2f0;
  border-radius: 12px;
  box-shadow: 0 4px 13px rgba(37, 66, 104, .045);
}

body.bb-app-active #vendors .customer-workspace-list-scroll {
  padding: 3px 8px 8px;
}

body.bb-app-active #vendors .customer-workspace-list-item {
  min-height: 66px;
  margin: 3px 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
}

body.bb-app-active #vendors .customer-workspace-list-item:hover {
  border-color: #d7e5f4;
  background: #fff;
  box-shadow: 0 7px 18px rgba(37, 66, 104, .07);
}

body.bb-app-active #vendors .customer-workspace-list-item.active {
  border-color: #bdd6f7;
  background: linear-gradient(120deg, #eaf3ff, #f7fbff);
  box-shadow: inset 3px 0 0 var(--vendor-blue), 0 8px 20px rgba(23, 105, 232, .1);
}

body.bb-app-active #vendors .customer-workspace-list-item.active .customer-list-avatar {
  background: linear-gradient(145deg, #1676e8, #0c9caa);
  box-shadow: 0 8px 18px rgba(13, 132, 172, .2);
}

body.bb-app-active #vendors .vendor-workspace-list > footer {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
}

body.bb-app-active #vendors .vendor-workspace-detail {
  background: linear-gradient(180deg, #f5f9fe 0%, #f1f6fc 100%);
}

body.bb-app-active #vendors .vendor-workspace-header {
  padding: 17px 20px;
}

body.bb-app-active #vendors .vendor-profile-heading {
  gap: 13px;
}

body.bb-app-active #vendors .vendor-profile-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 15px;
  background: linear-gradient(145deg, #1676e8, #0c9caa);
  box-shadow: 0 10px 22px rgba(16, 116, 184, .22), 0 0 0 1px #b9d7ee;
}

body.bb-app-active #vendors .vendor-profile-heading small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #54769c;
}

body.bb-app-active #vendors .vendor-profile-heading small i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vendor-teal);
  box-shadow: 0 0 0 3px rgba(10, 165, 143, .12);
}

body.bb-app-active #vendors .vendor-profile-heading h3 {
  font-size: 19px;
}

body.bb-app-active #vendors .vendor-profile-heading p {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.bb-app-active #vendors .vendor-profile-heading p em {
  padding: 3px 7px;
  border: 1px solid #bde8db;
  border-radius: 999px;
  background: #edf9f5;
  color: #168268;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

body.bb-app-active #vendors .vendor-workspace-header .customer-workspace-actions .ghost-button,
body.bb-app-active #vendors .vendor-workspace-header .customer-new-transaction-menu > summary,
body.bb-app-active #vendors .vendor-workspace-header .customer-workspace-close {
  border-radius: 12px;
}

body.bb-app-active #vendors .customer-workspace-tabs {
  min-height: 52px;
  padding-inline: 14px;
  border-bottom-color: #dce7f2;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
}

body.bb-app-active #vendors .customer-workspace-tabs button.active {
  color: #145fce;
}

html[data-theme="dark"] body.bb-app-active #vendors .vendor-workspace-shell {
  border-color: #2c4560;
  background: #101d2c;
}

html[data-theme="dark"] body.bb-app-active #vendors :is(.vendor-directory-header, .vendor-workspace-header) {
  border-color: #2b435d;
  background: linear-gradient(120deg, #15263a, #122337 55%, #102b3b);
}

html[data-theme="dark"] body.bb-app-active #vendors .vendor-workspace-list {
  background: linear-gradient(180deg, #132235, #101d2c);
}

html[data-theme="dark"] body.bb-app-active #vendors .vendor-directory-mark {
  border-color: #365777;
  background: #172d44;
  box-shadow: none;
}

html[data-theme="dark"] body.bb-app-active #vendors .vendor-directory-title p,
html[data-theme="dark"] body.bb-app-active #vendors .vendor-profile-heading p span {
  color: #8fa5bd;
}

html[data-theme="dark"] body.bb-app-active #vendors .customer-workspace-list-item:hover {
  border-color: #2c4762;
  background: #172a40;
}

html[data-theme="dark"] body.bb-app-active #vendors .customer-workspace-list-item.active {
  border-color: #315d88;
  background: linear-gradient(120deg, #193656, #15283e);
}

html[data-theme="dark"] body.bb-app-active #vendors .vendor-workspace-detail {
  background: linear-gradient(180deg, #101d2c, #0d1926);
}

html[data-theme="dark"] body.bb-app-active #vendors .customer-workspace-tabs {
  border-color: #2b435d;
  background: rgba(19, 34, 53, .92);
}

@media (max-width: 1180px) {
  body.bb-app-active #vendors .vendor-workspace-shell { grid-template-columns: 270px minmax(0, 1fr); }
  body.bb-app-active #vendors .vendor-directory-header { padding-inline: 13px; }
  body.bb-app-active #vendors .vendor-directory-mark { width: 38px; min-width: 38px; height: 38px; }
  body.bb-app-active #vendors .vendor-directory-title p { display: none; }
}

@media (max-width: 980px) {
  body.bb-app-active #vendors .vendor-workspace-shell { grid-template-columns: 235px minmax(0, 1fr); }
  body.bb-app-active #vendors .vendor-directory-title { gap: 8px; }
  body.bb-app-active #vendors .vendor-directory-header .vendor-directory-add { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; }
}

@media (max-width: 768px) {
  body.bb-app-active #vendors .vendor-workspace-shell { display: block; }
  body.bb-app-active #vendors .vendor-workspace-header { min-height: 82px; padding: 12px; }
  body.bb-app-active #vendors .vendor-profile-avatar { width: 40px; height: 40px; border-radius: 12px; }
  body.bb-app-active #vendors .vendor-profile-heading p em { display: none; }
  body.bb-app-active #vendors .customer-workspace-tabs { padding-inline: 5px; }
}

@media (max-width: 480px) {
  body.bb-app-active #vendors .vendor-profile-heading h3 { font-size: 14px; }
  body.bb-app-active #vendors .vendor-profile-heading small,
  body.bb-app-active #vendors .vendor-profile-heading p { display: none; }
}

/* Customer workspace refinement ------------------------------------------ */

body.bb-app-active #customers .client-workspace-shell {
  --client-blue: #1769e8;
  --client-indigo: #6257e6;
  --client-green: #12a77b;
  position: relative;
  grid-template-columns: minmax(280px, 308px) minmax(0, 1fr);
  border-color: #ccdbea;
  border-radius: 24px;
  background: #f4f8fd;
  box-shadow: 0 24px 60px rgba(31, 64, 108, .12), 0 3px 10px rgba(31, 64, 108, .05);
}

body.bb-app-active #customers .client-workspace-shell::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--client-blue), #328af0 52%, var(--client-indigo));
  content: "";
  pointer-events: none;
}

body.bb-app-active #customers .client-workspace-list {
  border-right-color: #d8e4f0;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fe 100%);
}

body.bb-app-active #customers .client-directory-header,
body.bb-app-active #customers .client-workspace-header {
  min-height: 96px;
  border-bottom-color: #dce7f2;
  background: linear-gradient(120deg, #fff 0%, #f8fbff 52%, #f0f1ff 100%);
}

body.bb-app-active #customers .client-directory-header {
  gap: 10px;
  padding: 18px 15px 15px;
}

body.bb-app-active #customers .client-directory-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

body.bb-app-active #customers .client-directory-title > div {
  min-width: 0;
}

body.bb-app-active #customers .client-directory-mark {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #c9ddfa;
  border-radius: 13px;
  background: linear-gradient(145deg, #f7faff, #e8efff);
  color: var(--client-blue);
  box-shadow: inset 0 1px 0 #fff, 0 7px 18px rgba(23, 105, 232, .1);
}

body.bb-app-active #customers .client-directory-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.bb-app-active #customers .client-directory-title small {
  margin-bottom: 2px;
  color: #5e7da5;
  font-size: 8.5px;
  letter-spacing: .12em;
}

body.bb-app-active #customers .client-directory-title h3 {
  font-size: 18px;
  line-height: 1.05;
}

body.bb-app-active #customers .client-directory-title p {
  overflow: hidden;
  margin: 4px 0 0;
  color: #8496aa;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bb-app-active #customers .client-directory-header .client-directory-add {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #2377ec, #5756df);
  color: #fff;
  font-size: 0;
  box-shadow: 0 9px 20px rgba(42, 94, 210, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.bb-app-active #customers .client-directory-add svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

body.bb-app-active #customers .client-directory-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(42, 94, 210, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.bb-app-active #customers .customer-workspace-search {
  margin: 13px 12px 10px;
  border-color: #d4e2f0;
  border-radius: 12px;
  box-shadow: 0 4px 13px rgba(37, 66, 104, .045);
}

body.bb-app-active #customers .customer-workspace-list-scroll {
  padding: 3px 8px 8px;
}

body.bb-app-active #customers .customer-workspace-list-item {
  min-height: 66px;
  margin: 3px 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
}

body.bb-app-active #customers .customer-workspace-list-item:hover {
  border-color: #d7e5f4;
  background: #fff;
  box-shadow: 0 7px 18px rgba(37, 66, 104, .07);
}

body.bb-app-active #customers .customer-workspace-list-item.active {
  border-color: #c4d6fa;
  background: linear-gradient(120deg, #eaf3ff, #f5f5ff);
  box-shadow: inset 3px 0 0 var(--client-blue), 0 8px 20px rgba(35, 93, 205, .1);
}

body.bb-app-active #customers .customer-workspace-list-item.active .customer-list-avatar {
  background: linear-gradient(145deg, #1676e8, #6257e6);
  box-shadow: 0 8px 18px rgba(71, 83, 211, .2);
}

body.bb-app-active #customers .client-workspace-list > footer {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
}

body.bb-app-active #customers .client-workspace-detail {
  background: linear-gradient(180deg, #f5f9fe 0%, #f2f5fc 100%);
}

body.bb-app-active #customers .client-workspace-header {
  padding: 17px 20px;
}

body.bb-app-active #customers .client-profile-heading {
  gap: 13px;
}

body.bb-app-active #customers .client-profile-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 15px;
  background: linear-gradient(145deg, #1676e8, #6257e6);
  box-shadow: 0 10px 22px rgba(63, 82, 205, .22), 0 0 0 1px #c7d4f3;
}

body.bb-app-active #customers .client-profile-heading small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #54769c;
}

body.bb-app-active #customers .client-profile-heading small i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--client-green);
  box-shadow: 0 0 0 3px rgba(18, 167, 123, .12);
}

body.bb-app-active #customers .client-profile-heading h3 {
  font-size: 19px;
}

body.bb-app-active #customers .client-profile-heading p {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.bb-app-active #customers .client-profile-heading p em {
  padding: 3px 7px;
  border: 1px solid #bde8db;
  border-radius: 999px;
  background: #edf9f5;
  color: #168268;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

body.bb-app-active #customers .client-workspace-header .customer-workspace-actions .ghost-button,
body.bb-app-active #customers .client-workspace-header .customer-new-transaction-menu > summary,
body.bb-app-active #customers .client-workspace-header .customer-workspace-close {
  border-radius: 12px;
}

body.bb-app-active #customers .customer-workspace-tabs {
  min-height: 52px;
  padding-inline: 14px;
  border-bottom-color: #dce7f2;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
}

body.bb-app-active #customers .customer-workspace-tabs button.active {
  color: #285dd5;
}

body.bb-app-active :is(#customers, #vendors) .customer-profile-identity > .customer-profile-avatar {
  display: grid;
  place-items: center;
  line-height: 1;
}

html[data-theme="dark"] body.bb-app-active #customers .client-workspace-shell {
  border-color: #2c4560;
  background: #101d2c;
}

html[data-theme="dark"] body.bb-app-active #customers :is(.client-directory-header, .client-workspace-header) {
  border-color: #2b435d;
  background: linear-gradient(120deg, #15263a, #122337 55%, #1b2140);
}

html[data-theme="dark"] body.bb-app-active #customers .client-workspace-list {
  background: linear-gradient(180deg, #132235, #101d2c);
}

html[data-theme="dark"] body.bb-app-active #customers .client-directory-mark {
  border-color: #365777;
  background: #172d44;
  box-shadow: none;
}

html[data-theme="dark"] body.bb-app-active #customers .client-directory-title p,
html[data-theme="dark"] body.bb-app-active #customers .client-profile-heading p span {
  color: #8fa5bd;
}

html[data-theme="dark"] body.bb-app-active #customers .customer-workspace-list-item:hover {
  border-color: #2c4762;
  background: #172a40;
}

html[data-theme="dark"] body.bb-app-active #customers .customer-workspace-list-item.active {
  border-color: #3c588e;
  background: linear-gradient(120deg, #193656, #212545);
}

html[data-theme="dark"] body.bb-app-active #customers .client-workspace-detail {
  background: linear-gradient(180deg, #101d2c, #0d1926);
}

html[data-theme="dark"] body.bb-app-active #customers .customer-workspace-tabs {
  border-color: #2b435d;
  background: rgba(19, 34, 53, .92);
}

@media (max-width: 1180px) {
  body.bb-app-active #customers .client-workspace-shell { grid-template-columns: 270px minmax(0, 1fr); }
  body.bb-app-active #customers .client-directory-header { padding-inline: 13px; }
  body.bb-app-active #customers .client-directory-mark { width: 38px; min-width: 38px; height: 38px; }
  body.bb-app-active #customers .client-directory-title p { display: none; }
}

@media (max-width: 980px) {
  body.bb-app-active #customers .client-workspace-shell { grid-template-columns: 235px minmax(0, 1fr); }
  body.bb-app-active #customers .client-directory-title { gap: 8px; }
  body.bb-app-active #customers .client-directory-header .client-directory-add { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; }
}

@media (max-width: 768px) {
  body.bb-app-active #customers .client-workspace-shell { display: block; }
  body.bb-app-active #customers .client-workspace-header { min-height: 82px; padding: 12px; }
  body.bb-app-active #customers .client-profile-avatar { width: 40px; height: 40px; border-radius: 12px; }
  body.bb-app-active #customers .client-profile-heading p em { display: none; }
  body.bb-app-active #customers .customer-workspace-tabs { padding-inline: 5px; }
}

@media (max-width: 480px) {
  body.bb-app-active #customers .client-profile-heading h3 { font-size: 14px; }
  body.bb-app-active #customers .client-profile-heading small,
  body.bb-app-active #customers .client-profile-heading p { display: none; }
}

/* Reports workspace ------------------------------------------------------- */

body.bb-app-active #reports .reports-module {
  --report-blue: #1769e8;
  --report-navy: #10213b;
  --report-muted: #6f829b;
  gap: 14px;
}

body.bb-app-active #reports .report-detail-shell {
  display: grid;
  gap: 12px;
}

body.bb-app-active #reports .report-action-bar {
  padding: 18px 20px;
  border: 1px solid #d3e0ee;
  border-radius: 18px;
  background: linear-gradient(120deg, #fff 0%, #f8fbff 62%, #edf5ff 100%);
  box-shadow: 0 14px 34px rgba(31, 64, 108, .08);
}

body.bb-app-active #reports .rpt-back-btn {
  margin: 0 0 7px;
  padding-bottom: 0;
  color: #477196;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.bb-app-active #reports .rpt-breadcrumb .eyebrow {
  color: #1769e8;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}

body.bb-app-active #reports .report-action-bar h3 {
  color: var(--report-navy);
  font-size: 21px;
  letter-spacing: -.03em;
}

body.bb-app-active #reports .report-action-bar p {
  max-width: 520px;
  margin-top: 3px;
  color: #71849d;
  font-size: 11px;
}

body.bb-app-active #reports .report-actions .ghost-button,
body.bb-app-active #reports .report-export-trigger,
body.bb-app-active #reports .report-view-toggle {
  min-height: 38px;
  border-color: #ccdae9;
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
}

body.bb-app-active #reports .report-view-toggle button {
  border-radius: 7px;
}

body.bb-app-active #reports .report-view-toggle button.active {
  background: #eaf3ff;
  color: #155fcf;
  box-shadow: inset 0 0 0 1px #bfd7f8;
}

body.bb-app-active #reports .report-export-menu {
  min-width: 270px;
  padding: 8px;
  border-color: #cfdae7;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(15, 35, 65, .2);
}

body.bb-app-active #reports .report-export-menu > span {
  padding: 8px 10px 5px;
  color: #8090a4;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
}

body.bb-app-active #reports .report-export-menu > span:not(:first-child) {
  margin-top: 5px;
  border-top: 1px solid #e8eef5;
}

body.bb-app-active #reports .report-export-menu button {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 9px;
}

body.bb-app-active #reports .report-export-menu button strong {
  color: #263b58;
  font-size: 12px;
}

body.bb-app-active #reports .report-export-menu button small {
  color: #8393a8;
  font-size: 9px;
}

body.bb-app-active #reports .report-filter-bar {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid #d6e2ee;
  border-radius: 16px;
  background: #f8fbff;
  box-shadow: 0 6px 18px rgba(31, 64, 108, .045);
}

body.bb-app-active #reports .report-filter-bar label {
  gap: 4px;
  color: #69809c;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .075em;
}

body.bb-app-active #reports .report-filter-bar input,
body.bb-app-active #reports .report-filter-bar select,
body.bb-app-active #reports .report-filter-bar .ghost-button {
  min-height: 38px !important;
  border-color: #cedcea;
  border-radius: 9px;
  background: #fff;
  color: #263b58;
  font-size: 11px !important;
}

body.bb-app-active #reports .report-filter-bar .primary-button {
  min-height: 38px;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(23, 105, 232, .18);
}

body.bb-app-active #reports .report-paper {
  padding: 30px 32px 24px;
  overflow: hidden;
  border: 1px solid #d3deea;
  border-top: 4px solid var(--report-blue);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(31, 64, 108, .09);
}

body.bb-app-active #reports .report-paper-title {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4ebf3;
}

body.bb-app-active #reports .report-paper-title > span {
  color: #5f7898;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.bb-app-active #reports .report-paper-title h3 {
  margin-top: 6px;
  color: var(--report-navy);
  font-size: 23px;
  letter-spacing: -.035em;
}

body.bb-app-active #reports :is(.report-table, .report-statement) {
  overflow: hidden;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
}

body.bb-app-active #reports :is(.report-table, .report-statement) th {
  background: #edf3f9;
  color: #59718f;
  font-size: 9px;
  font-weight: 850;
}

body.bb-app-active #reports .report-design-bordered :is(.report-table, .report-statement) th,
body.bb-app-active #reports .report-design-bordered :is(.report-table, .report-statement) td {
  border: 1px solid #d8e2ed;
}

body.bb-app-active #reports .report-design-alternative-rows :is(.report-table, .report-statement) tbody tr:nth-child(even) td {
  background: #f5f8fc;
}

body.bb-app-active #reports .report-design-alternative-columns :is(.report-table, .report-statement) :is(th, td):nth-child(even) {
  background: #f1f6fb;
}

.report-print-preferences-overlay {
  position: fixed;
  z-index: 11050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 20, 38, .64);
  backdrop-filter: blur(7px);
}

.report-print-preferences-dialog {
  display: flex;
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #cddaea;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(5, 18, 38, .3);
}

.report-print-preferences-dialog > header {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid #dce5ef;
  background: linear-gradient(120deg, #fff, #f4f8ff 62%, #edf3ff);
}

.report-print-preferences-dialog > header span {
  color: #1769e8;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}

.report-print-preferences-dialog > header h3 {
  margin: 2px 0 0;
  color: #10213b;
  font-size: 20px;
}

.report-print-preferences-dialog > header p {
  margin: 3px 0 0;
  color: #73869e;
  font-size: 11px;
}

.report-print-preferences-dialog > header > button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #d2deeb;
  border-radius: 11px;
  background: #fff;
  color: #60738c;
  font-size: 22px;
  cursor: pointer;
}

.report-print-preferences-form { min-height: 0; }

.report-print-preferences-scroll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 0;
  max-height: calc(100vh - 210px);
  overflow: auto;
}

.report-print-preferences-settings {
  display: grid;
  gap: 0;
  padding: 6px 22px 20px;
}

.report-print-setting-section {
  padding: 18px 0;
  border-bottom: 1px solid #e5ebf2;
}

.report-print-setting-section:last-child { border-bottom: 0; }

.report-print-setting-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
}

.report-print-setting-heading > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: #edf4ff;
  color: #1769e8;
  font-size: 9px;
  font-weight: 850;
}

.report-print-setting-heading strong { display: block; color: #203550; font-size: 13px; }
.report-print-setting-heading small { display: block; margin-top: 2px; color: #8090a4; font-size: 9.5px; }

.report-print-check-grid,
.report-print-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.report-print-check-grid label,
.report-print-autofit {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  color: #3b506b;
  font-size: 11px;
  font-weight: 650;
}

.report-print-check-grid input,
.report-print-autofit input { accent-color: #1769e8; }

.report-print-setting-section textarea,
.report-print-field-grid select,
.report-print-margins input {
  width: 100%;
  border: 1px solid #cedbe9;
  border-radius: 9px;
  background: #fff;
  color: #263b58;
}

.report-print-setting-section textarea { padding: 10px 11px; resize: vertical; font: inherit; }

.report-print-field-grid label,
.report-print-margins > label {
  display: grid;
  gap: 5px;
  color: #607691;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.report-print-field-grid select { min-height: 38px; padding: 7px 9px; font-size: 11px; text-transform: none; }
.report-print-autofit { margin-top: 10px; }

.report-print-margins {
  display: grid;
  grid-template-columns: 80px repeat(4, minmax(62px, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}

.report-print-margins > span { align-self: center; color: #607691; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.report-print-margins input { min-height: 36px; padding: 6px 8px; font-size: 11px; }

.report-print-preferences-preview {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100%;
  padding: 20px;
  border-left: 1px solid #dfe7f0;
  background: #f3f6fa;
}

.report-print-preferences-preview > div:first-child { display: grid; gap: 3px; margin-bottom: 14px; }
.report-print-preferences-preview > div:first-child span { color: #7b8ba0; font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.report-print-preferences-preview > div:first-child strong { color: #273b57; font-size: 12px; }

.report-print-mini-paper {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: 28px 22px 18px;
  border: 1px solid #d7dee8;
  background: #fff;
  box-shadow: 0 12px 28px rgba(26, 48, 78, .12);
  color: #233750;
}

.report-print-mini-org { font-size: 11px; }
.report-print-mini-detail { margin-top: 3px; color: #8291a4; font-size: 7px; }
.report-print-mini-title { margin-top: 32px; text-align: center; }
.report-print-mini-title small { color: #1769e8; font-size: 6px; font-weight: 850; text-transform: uppercase; }
.report-print-mini-title h4 { margin: 4px 0; color: #10213b; font-size: 15px; }
.report-print-mini-title p { margin: 0; color: #7a8a9e; font-size: 7px; }
.report-print-mini-basis { margin-top: 20px; padding: 8px; background: #f3f6fa; color: #718299; font-size: 7px; }
.report-print-mini-basis strong { float: right; color: #263b58; }
.report-print-mini-table { display: grid; margin-top: 14px; border-top: 9px solid #183b69; }
.report-print-mini-table span { height: 28px; border-bottom: 1px solid #e0e6ee; }
.report-print-mini-paper.report-density-compact .report-print-mini-table span { height: 22px; }
.report-print-mini-paper.report-density-super-compact .report-print-mini-table span { height: 17px; }
.report-print-mini-paper.report-design-bordered .report-print-mini-table span { border: 1px solid #d3dde8; border-top: 0; }
.report-print-mini-paper.report-design-alternative-rows .report-print-mini-table span:nth-child(even) { background: #f3f6fa; }
.report-print-mini-paper.report-design-alternative-columns .report-print-mini-table { background: linear-gradient(90deg, transparent 0 50%, #f3f6fa 50%); }
.report-print-mini-note { margin: 12px 0 0; color: #63758c; font-size: 7px; line-height: 1.4; }
.report-print-mini-paper footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 9px; border-top: 1px solid #e0e6ee; color: #8795a7; font-size: 6px; }

.report-print-preferences-form > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid #dce5ef;
  background: #fbfcfe;
}

.report-print-preferences-form > footer > div { display: flex; gap: 8px; }
html[data-theme="dark"] body.bb-app-active #reports :is(.reports-catalog, .report-action-bar, .report-filter-bar, .report-paper) { border-color: #2d455f; background: #132235; }
html[data-theme="dark"] body.bb-app-active #reports .report-link.active { border-color: #315d88; background: #193656; }
html[data-theme="dark"] .report-print-preferences-dialog { border-color: #314861; background: #122135; }
html[data-theme="dark"] .report-print-preferences-dialog > header,
html[data-theme="dark"] .report-print-preferences-form > footer { border-color: #30465e; background: #15263a; }
html[data-theme="dark"] .report-print-preferences-settings { color: #dbe7f5; }
html[data-theme="dark"] .report-print-setting-section { border-color: #2d435a; }
html[data-theme="dark"] .report-print-setting-heading strong { color: #e5eef8; }
html[data-theme="dark"] .report-print-preferences-preview { border-color: #30465e; background: #0f1c2b; }

@media (max-width: 980px) {
  body.bb-app-active #reports .report-action-bar { align-items: flex-start; }
  body.bb-app-active #reports .report-actions { max-width: 54%; }
  .report-print-preferences-scroll { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 768px) {
  body.bb-app-active #reports .report-action-bar { display: grid; padding: 15px; }
  body.bb-app-active #reports .report-actions { max-width: none; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  body.bb-app-active #reports .report-action-bar p { display: none; }
  body.bb-app-active #reports .report-filter-bar { display: flex; overflow-x: auto; align-items: flex-end; }
  body.bb-app-active #reports .report-filter-bar label { min-width: 145px; }
  body.bb-app-active #reports .report-paper { padding: 22px 14px 18px; }
  .report-print-preferences-overlay { padding: 0; }
  .report-print-preferences-dialog { width: 100%; max-height: 100vh; border: 0; border-radius: 0; }
  .report-print-preferences-scroll { display: block; max-height: calc(100vh - 198px); }
  .report-print-preferences-preview { position: relative; min-height: 0; border-top: 1px solid #dfe7f0; border-left: 0; }
  .report-print-mini-paper { min-height: 360px; }
}

@media (max-width: 520px) {
  .report-print-preferences-dialog > header { padding: 13px 15px; }
  .report-print-preferences-scroll { max-height: calc(100vh - 242px); }
  .report-print-preferences-settings { padding: 4px 15px 16px; }
  .report-print-check-grid,
  .report-print-field-grid { grid-template-columns: 1fr; }
  .report-print-margins { grid-template-columns: repeat(2, 1fr); }
  .report-print-margins > span { grid-column: 1 / -1; }
  .report-print-preferences-form > footer { align-items: stretch; flex-direction: column; }
  .report-print-preferences-form > footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .report-print-preferences-form > footer > div .primary-button { grid-column: 1 / -1; }
}

/* Reports focus mode: give financial statements the full desktop canvas.
   The existing top-bar menu button opens the normal app navigation as a
   temporary drawer, so the user never loses access to the rest of the app. */
@media (min-width: 1101px) {
  body.bb-app-active:has(#reports.page-section.active) .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.bb-app-active:has(#reports.page-section.active) .workspace {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.bb-app-active:has(#reports.page-section.active) #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1002;
    width: 258px;
    height: 100dvh;
    transform: translateX(-104%);
    transition: transform .22s ease, box-shadow .22s ease;
    box-shadow: none;
  }

  body.bb-app-active:has(#reports.page-section.active) #sidebar.open {
    transform: translateX(0);
    box-shadow: 22px 0 55px rgba(7, 18, 46, .30);
  }

  body.bb-app-active:has(#reports.page-section.active) #sidebar-backdrop {
    display: block;
    z-index: 1001;
    backdrop-filter: blur(2px);
  }

  body.bb-app-active:has(#reports.page-section.active) #sidebar-toggle {
    display: inline-flex;
    border-color: #c9d8e7;
    border-radius: 10px;
    background: #fff;
    color: #294761;
    box-shadow: 0 4px 12px rgba(31, 64, 108, .07);
  }

  body.bb-app-active:has(#reports.page-section.active) #sidebar-toggle:hover {
    border-color: #9eb8d2;
    background: #f2f7fd;
    color: #1769e8;
  }
}

/* POS checkout: high-clarity payment method cards.
   Keep these selectors scoped to the till so no other buttons are affected. */
body.bb-app-active #pos .pos-payment-methods {
  gap: 9px;
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn {
  min-width: 0;
  height: 62px;
  gap: 5px;
  border: 1.5px solid #cfdae6;
  border-radius: 14px;
  background: #fff;
  color: #19324a;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: .005em;
  box-shadow: 0 4px 12px rgba(18, 45, 72, .06);
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.15;
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn:hover {
  transform: translateY(-2px);
  border-color: #8da4b8;
  background: #f7fafc;
  color: #102b43;
  box-shadow: 0 9px 19px rgba(18, 45, 72, .11);
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: 2px;
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn[data-method="cash"] {
  border-color: #9dd8ba;
  background: #f2fbf6;
  color: #087443;
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn[data-method="cash"].pos-pm-btn--active {
  border-color: #078650;
  background: linear-gradient(145deg, #12a963, #078650);
  color: #fff;
  box-shadow: 0 9px 20px rgba(7, 134, 80, .25), inset 0 0 0 1px rgba(255,255,255,.18);
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn[data-method="mpesa"] {
  border-color: #f1b4b4;
  background: #fff6f6;
  color: #b42323;
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn[data-method="mpesa"].pos-pm-btn--active {
  border-color: #c72d2d;
  background: linear-gradient(145deg, #e54444, #c72d2d);
  color: #fff;
  box-shadow: 0 9px 20px rgba(199, 45, 45, .23), inset 0 0 0 1px rgba(255,255,255,.16);
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn[data-method="bank"] {
  border-color: #aec7fb;
  background: #f4f7ff;
  color: #1e55bd;
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn[data-method="bank"].pos-pm-btn--active {
  border-color: #1e5fcf;
  background: linear-gradient(145deg, #3278e4, #1e5fcf);
  color: #fff;
  box-shadow: 0 9px 20px rgba(30, 95, 207, .24), inset 0 0 0 1px rgba(255,255,255,.16);
}

body.bb-app-active #pos .pos-payment-methods .pos-pm-btn:not([data-method]) {
  border-color: #c6d2de;
  background: #f8fafc;
  color: #314b63;
}

html[data-theme="dark"] body.bb-app-active #pos .pos-payment-methods .pos-pm-btn:not(.pos-pm-btn--active) {
  border-color: #385269;
  background: #172a3a;
  color: #e2edf5;
}

@media (max-width: 520px) {
  body.bb-app-active #pos .pos-payment-methods .pos-pm-btn {
    min-height: 56px;
    height: 56px;
    font-size: 12px;
  }
}

/* Warehouse Reports: dedicated, high-trust reporting workspace.
   All selectors are modal-scoped so warehouse calculations and other exports
   keep their existing behaviour and presentation. */
#wh-reports-modal {
  padding: 24px;
  background: rgba(9, 21, 37, .66);
  backdrop-filter: blur(11px) saturate(.9);
  -webkit-backdrop-filter: blur(11px) saturate(.9);
  animation: warehouseReportBackdropIn .18s ease-out;
}

#wh-reports-modal .warehouse-report-dialog {
  width: min(1080px, calc(100vw - 48px));
  max-width: 1080px;
  max-height: min(920px, calc(100dvh - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 219, 233, .9);
  border-radius: 24px;
  background: #f6f9fc;
  box-shadow: 0 35px 90px rgba(4, 18, 36, .28), 0 12px 30px rgba(4, 18, 36, .13);
  animation: warehouseReportDialogIn .22s cubic-bezier(.2, .82, .25, 1);
}

@keyframes warehouseReportBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes warehouseReportDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#wh-reports-modal .warehouse-report-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 104px;
  padding: 22px 26px;
  border-bottom: 1px solid #dbe5ef;
  background:
    radial-gradient(circle at 88% 0, rgba(14, 165, 164, .13), transparent 31%),
    linear-gradient(135deg, #fff 0%, #f8fbff 56%, #edf7f7 100%);
}

#wh-reports-modal .warehouse-report-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #1468d8, #10a39b 76%, #27b66f);
}

#wh-reports-modal .warehouse-report-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 15px;
}

#wh-reports-modal .warehouse-report-icon {
  display: inline-grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #bcd5f5;
  border-radius: 16px;
  background: linear-gradient(145deg, #eff7ff, #e4f6f3);
  color: #1266cc;
  box-shadow: 0 8px 20px rgba(25, 91, 159, .11), inset 0 0 0 1px rgba(255, 255, 255, .7);
}

#wh-reports-modal .warehouse-report-icon svg {
  width: 26px;
  height: 26px;
}

#wh-reports-modal .warehouse-report-kicker,
#wh-reports-modal .warehouse-report-toolbar-kicker,
#wh-reports-modal .warehouse-report-card-kicker {
  display: block;
  margin-bottom: 3px;
  color: #1769cf;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#wh-reports-modal .warehouse-report-header h4 {
  margin: 0 0 3px;
  color: #102a43;
  font-size: 21px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.025em;
}

#wh-reports-modal .warehouse-report-header p {
  margin: 0;
  color: #647e96;
  font-size: 12px;
}

#wh-reports-modal .warehouse-report-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 7px;
  padding: 0 14px;
  border-color: #c8d6e5;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  color: #29455f;
  font-weight: 750;
}

#wh-reports-modal .warehouse-report-close svg {
  width: 16px;
  height: 16px;
}

#wh-reports-modal .warehouse-report-close:hover {
  border-color: #9fb4c9;
  background: #fff;
  color: #102a43;
}

#wh-reports-modal .warehouse-report-body {
  max-height: calc(min(920px, 100dvh - 48px) - 104px);
  padding: 22px 24px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #b7c7d8 transparent;
  scrollbar-width: thin;
}

#wh-reports-modal .warehouse-report-body::-webkit-scrollbar { width: 9px; }
#wh-reports-modal .warehouse-report-body::-webkit-scrollbar-track { background: transparent; }
#wh-reports-modal .warehouse-report-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 10px;
  background: #b7c7d8;
  background-clip: padding-box;
}

#wh-reports-modal .warehouse-report-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid #d5e1ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(30, 67, 104, .045);
}

#wh-reports-modal .warehouse-report-toolbar-copy {
  display: grid;
  min-width: 220px;
  gap: 1px;
}

#wh-reports-modal .warehouse-report-toolbar-copy strong {
  color: #172f47;
  font-size: 14px;
  font-weight: 800;
}

#wh-reports-modal .warehouse-report-toolbar-copy small {
  color: #7890a7;
  font-size: 11px;
  line-height: 1.4;
}

#wh-reports-modal .warehouse-report-toolbar-controls,
#wh-reports-modal .warehouse-report-custom-dates {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 9px;
}

#wh-reports-modal .warehouse-report-field {
  display: grid;
  min-width: 142px;
  gap: 5px;
}

#wh-reports-modal .warehouse-report-range-field { min-width: 180px; }

#wh-reports-modal .warehouse-report-field > span {
  color: #698198;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .085em;
  text-transform: uppercase;
}

#wh-reports-modal .warehouse-report-field :is(select, input) {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #c8d7e6;
  border-radius: 10px;
  outline: 0;
  background: #fbfdff;
  color: #17324d;
  font-size: 12px;
  font-weight: 700;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#wh-reports-modal .warehouse-report-field :is(select, input):focus {
  border-color: #2b73d5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 115, 213, .13);
}

#wh-reports-modal .warehouse-report-apply {
  height: 40px;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 10px;
  white-space: nowrap;
}

#wh-reports-modal .warehouse-report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

#wh-reports-modal .warehouse-report-kpi {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 104px;
  gap: 13px;
  overflow: hidden;
  padding: 17px;
  border: 1px solid #d5e1ed;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(27, 63, 99, .055);
}

#wh-reports-modal .warehouse-report-kpi::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: #2781df;
}

#wh-reports-modal .warehouse-report-kpi--expenses::before { background: #ee605b; }
#wh-reports-modal .warehouse-report-kpi--profit::before { background: #16a06a; }
#wh-reports-modal .warehouse-report-kpi--profit.is-negative::before { background: #ee605b; }

#wh-reports-modal .warehouse-report-kpi-icon {
  display: inline-grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #eaf3ff;
  color: #1769d2;
}

#wh-reports-modal .warehouse-report-kpi--expenses .warehouse-report-kpi-icon {
  background: #fff0ef;
  color: #ce3d38;
}

#wh-reports-modal .warehouse-report-kpi--profit .warehouse-report-kpi-icon {
  background: #e8f8f1;
  color: #0e8a59;
}

#wh-reports-modal .warehouse-report-kpi--profit.is-negative .warehouse-report-kpi-icon {
  background: #fff0ef;
  color: #ce3d38;
}

#wh-reports-modal .warehouse-report-kpi-icon svg {
  width: 20px;
  height: 20px;
}

#wh-reports-modal .warehouse-report-kpi > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#wh-reports-modal .warehouse-report-kpi > div > span {
  color: #6c849b;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

#wh-reports-modal .warehouse-report-kpi strong {
  overflow: hidden;
  color: #1264c5;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wh-reports-modal .warehouse-report-kpi--expenses strong { color: #ce3d38; }
#wh-reports-modal .warehouse-report-kpi--profit strong { color: #0b8b59; }
#wh-reports-modal .warehouse-report-kpi--profit.is-negative strong { color: #ce3d38; }

#wh-reports-modal .warehouse-report-kpi small {
  color: #8297aa;
  font-size: 10px;
}

#wh-reports-modal .warehouse-report-sections {
  display: grid;
  gap: 16px;
}

#wh-reports-modal .warehouse-report-card {
  overflow: hidden;
  border: 1px solid #d5e1ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(27, 63, 99, .055);
}

#wh-reports-modal .warehouse-report-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 82px;
  padding: 15px 17px;
  border-bottom: 1px solid #e0e8f1;
  background: linear-gradient(180deg, #fff, #fbfdff);
}

#wh-reports-modal .warehouse-report-card-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

#wh-reports-modal .warehouse-report-card-icon {
  display: inline-grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #c6dcf7;
  border-radius: 12px;
  background: #edf6ff;
  color: #1769cf;
}

#wh-reports-modal .warehouse-report-card--pl .warehouse-report-card-icon {
  border-color: #c5e8da;
  background: #eefaf5;
  color: #0c9060;
}

#wh-reports-modal .warehouse-report-card--expenses .warehouse-report-card-icon {
  border-color: #f0d2cf;
  background: #fff3f1;
  color: #cf443f;
}

#wh-reports-modal .warehouse-report-card-icon svg {
  width: 20px;
  height: 20px;
}

#wh-reports-modal .warehouse-report-card-title h5 {
  margin: 0;
  color: #162f47;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.01em;
}

#wh-reports-modal .warehouse-report-card-title p {
  margin: 2px 0 0;
  color: #758da3;
  font-size: 11px;
  line-height: 1.35;
}

#wh-reports-modal .warehouse-report-download {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 7px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2173dc, #155fc6);
  box-shadow: 0 7px 15px rgba(21, 95, 198, .2);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

#wh-reports-modal .warehouse-report-download svg {
  width: 15px;
  height: 15px;
}

#wh-reports-modal .warehouse-report-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(21, 95, 198, .27);
}

#wh-reports-modal .warehouse-report-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#wh-reports-modal .warehouse-report-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  color: #29455f;
  font-size: 11px;
}

#wh-reports-modal .warehouse-report-table th {
  padding: 10px 12px;
  border-bottom: 1px solid #dbe5ef;
  background: #f2f6fa;
  color: #70879d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

#wh-reports-modal .warehouse-report-table th:first-child { text-align: left; }

#wh-reports-modal .warehouse-report-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #edf2f7;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

#wh-reports-modal .warehouse-report-table td:first-child {
  color: #16314b;
  text-align: left;
  white-space: normal;
}

#wh-reports-modal .warehouse-report-table tbody tr:last-child td { border-bottom: 0; }
#wh-reports-modal .warehouse-report-table tbody tr:hover td { background: #f8fbfe; }
#wh-reports-modal .warehouse-report-table td.is-positive { color: #0b8a58; font-weight: 750; }

#wh-reports-modal .warehouse-report-table td small {
  display: block;
  margin-top: 3px;
  color: #7790a6;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

#wh-reports-modal .warehouse-report-empty-row {
  padding: 24px 12px !important;
  color: #7b91a5 !important;
  text-align: center !important;
}

#wh-reports-modal .warehouse-report-pl-body {
  padding: 17px;
}

#wh-reports-modal .warehouse-report-statement {
  margin-bottom: 16px;
}

#wh-reports-modal .warehouse-report-statement-title {
  margin-bottom: 7px;
  color: #16845a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}

#wh-reports-modal .warehouse-report-statement--expense .warehouse-report-statement-title { color: #cc433e; }

#wh-reports-modal :is(.warehouse-report-statement-row, .wh-pl-line) {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  background: transparent;
  color: #526b82;
  font-size: 11px;
  text-align: left;
}

#wh-reports-modal .wh-pl-line {
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

#wh-reports-modal .wh-pl-line:hover {
  border-radius: 8px;
  background: #f2f7fc;
  color: #155fae;
}

#wh-reports-modal .warehouse-report-statement-amount {
  color: #16845a;
  font-weight: 800;
  white-space: nowrap;
}

#wh-reports-modal .warehouse-report-statement--expense .warehouse-report-statement-amount { color: #cc433e; }

#wh-reports-modal .warehouse-report-statement-empty {
  padding: 9px;
  border-radius: 8px;
  background: #f7f9fc;
  color: #8a9caf;
  font-size: 11px;
}

#wh-reports-modal .warehouse-report-statement-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 9px 0;
  color: #16845a;
  font-size: 11px;
  font-weight: 850;
}

#wh-reports-modal .warehouse-report-statement--expense .warehouse-report-statement-total { color: #cc433e; }

#wh-reports-modal .warehouse-report-pl-highlight,
#wh-reports-modal .warehouse-report-net {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 13px;
  border: 1px solid #d9e4ee;
  border-radius: 11px;
  background: #f3f7fb;
  color: #1d3852;
  font-size: 12px;
  font-weight: 850;
}

#wh-reports-modal .warehouse-report-pl-highlight strong { color: #0d8a59; }
#wh-reports-modal .warehouse-report-pl-highlight.is-negative strong { color: #cc433e; }

#wh-reports-modal .warehouse-report-net {
  margin: 0;
  padding: 14px;
  border-color: #bce9d5;
  background: linear-gradient(135deg, #f1fcf6, #eaf9f2);
}

#wh-reports-modal .warehouse-report-net > div { display: grid; gap: 1px; }
#wh-reports-modal .warehouse-report-net span { color: #183d31; font-size: 13px; }
#wh-reports-modal .warehouse-report-net small { color: #6b8c7f; font-size: 9px; font-weight: 600; }
#wh-reports-modal .warehouse-report-net strong { color: #087c4d; font-size: 17px; }

#wh-reports-modal .warehouse-report-net.is-negative {
  border-color: #f1cac7;
  background: linear-gradient(135deg, #fff5f4, #fff0ef);
}

#wh-reports-modal .warehouse-report-net.is-negative strong { color: #c63c37; }

#wh-reports-modal .warehouse-report-expense-total {
  display: grid;
  margin-left: auto;
  text-align: right;
}

#wh-reports-modal .warehouse-report-expense-total span {
  color: #7c91a5;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#wh-reports-modal .warehouse-report-expense-total strong {
  color: #c9403b;
  font-size: 15px;
  font-weight: 850;
}

html[data-theme="dark"] #wh-reports-modal .warehouse-report-dialog {
  border-color: #29435b;
  background: #0e1c2a;
}

html[data-theme="dark"] #wh-reports-modal .warehouse-report-header {
  border-color: #29435b;
  background: radial-gradient(circle at 88% 0, rgba(18, 166, 155, .13), transparent 31%), linear-gradient(135deg, #132638, #102131);
}

html[data-theme="dark"] #wh-reports-modal .warehouse-report-header h4,
html[data-theme="dark"] #wh-reports-modal .warehouse-report-toolbar-copy strong,
html[data-theme="dark"] #wh-reports-modal .warehouse-report-card-title h5,
html[data-theme="dark"] #wh-reports-modal .warehouse-report-table td:first-child { color: #edf5fc; }

html[data-theme="dark"] #wh-reports-modal :is(.warehouse-report-toolbar, .warehouse-report-kpi, .warehouse-report-card) {
  border-color: #29435b;
  background: #142636;
}

html[data-theme="dark"] #wh-reports-modal .warehouse-report-card-header {
  border-color: #29435b;
  background: linear-gradient(180deg, #172b3d, #142636);
}

html[data-theme="dark"] #wh-reports-modal .warehouse-report-field :is(select, input) {
  border-color: #36536b;
  background: #102131;
  color: #edf5fc;
  color-scheme: dark;
}

html[data-theme="dark"] #wh-reports-modal .warehouse-report-table th,
html[data-theme="dark"] #wh-reports-modal .warehouse-report-statement-empty,
html[data-theme="dark"] #wh-reports-modal .warehouse-report-pl-highlight {
  border-color: #29435b;
  background: #102131;
}

html[data-theme="dark"] #wh-reports-modal .warehouse-report-table td,
html[data-theme="dark"] #wh-reports-modal :is(.warehouse-report-statement-row, .wh-pl-line) { border-color: #233d54; }
html[data-theme="dark"] #wh-reports-modal .warehouse-report-table tbody tr:hover td,
html[data-theme="dark"] #wh-reports-modal .wh-pl-line:hover { background: #183146; }

html[data-theme="dark"] #wh-reports-modal .warehouse-report-close {
  border-color: #36536b;
  background: #172b3d;
  color: #dceaf5;
}

@media (max-width: 820px) {
  #wh-reports-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #wh-reports-modal .warehouse-report-dialog {
    position: relative;
    inset: auto;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94dvh;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }

  #wh-reports-modal .warehouse-report-header {
    min-height: 92px;
    padding: 18px 20px;
  }

  #wh-reports-modal .warehouse-report-body {
    max-height: calc(94dvh - 92px);
    padding: 18px 18px 26px;
  }

  #wh-reports-modal .warehouse-report-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
  }

  #wh-reports-modal .warehouse-report-toolbar-controls { justify-content: stretch; }
  #wh-reports-modal .warehouse-report-range-field { flex: 1 1 190px; }

  #wh-reports-modal .warehouse-report-kpis {
    grid-auto-columns: minmax(235px, 76%);
    grid-template-columns: none;
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
    padding: 1px 1px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #wh-reports-modal .warehouse-report-kpis::-webkit-scrollbar { display: none; }
  #wh-reports-modal .warehouse-report-kpi { scroll-snap-align: start; }
}

@media (max-width: 560px) {
  #wh-reports-modal .warehouse-report-header { padding: 16px; }
  #wh-reports-modal .warehouse-report-body { padding: 15px 12px 24px; }
  #wh-reports-modal .warehouse-report-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }
  #wh-reports-modal .warehouse-report-icon svg { width: 22px; height: 22px; }
  #wh-reports-modal .warehouse-report-header h4 { max-width: 210px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
  #wh-reports-modal .warehouse-report-header p { display: none; }
  #wh-reports-modal .warehouse-report-close { width: 40px; min-height: 40px; padding: 0; }
  #wh-reports-modal .warehouse-report-close span { display: none; }
  #wh-reports-modal .warehouse-report-toolbar { padding: 14px; }
  #wh-reports-modal .warehouse-report-toolbar-copy small { max-width: 290px; }
  #wh-reports-modal .warehouse-report-toolbar-controls,
  #wh-reports-modal .warehouse-report-custom-dates { align-items: stretch; flex-direction: column; }
  #wh-reports-modal .warehouse-report-field { width: 100%; min-width: 0; }
  #wh-reports-modal .warehouse-report-range-field { flex: 0 0 auto; }
  #wh-reports-modal .warehouse-report-apply { width: 100%; }
  #wh-reports-modal .warehouse-report-kpis { grid-auto-columns: 86%; }
  #wh-reports-modal .warehouse-report-card-header { align-items: stretch; flex-wrap: wrap; padding: 14px; }
  #wh-reports-modal .warehouse-report-card-title { width: 100%; }
  #wh-reports-modal .warehouse-report-download { flex: 1 1 100%; width: 100%; }
  #wh-reports-modal .warehouse-report-card--expenses .warehouse-report-card-header { display: grid; grid-template-columns: 1fr auto; }
  #wh-reports-modal .warehouse-report-card--expenses .warehouse-report-card-title { grid-column: 1 / -1; }
  #wh-reports-modal .warehouse-report-card--expenses .warehouse-report-download { grid-column: 1 / -1; }
  #wh-reports-modal .warehouse-report-pl-body { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #wh-reports-modal,
  #wh-reports-modal .warehouse-report-dialog { animation: none; }
}

/* Manage Stock: a focused, inventory-safe quantity workspace. */
#stock-adjust-modal {
  padding: 24px;
  background: rgba(9, 21, 37, .66);
  backdrop-filter: blur(11px) saturate(.9);
  -webkit-backdrop-filter: blur(11px) saturate(.9);
  animation: stockAdjustBackdropIn .18s ease-out;
}

#stock-adjust-modal .stock-adjust-dialog {
  width: min(820px, calc(100vw - 48px));
  max-width: 820px;
  max-height: min(820px, calc(100dvh - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 219, 233, .92);
  border-radius: 24px;
  background: #f6f9fc;
  box-shadow: 0 35px 90px rgba(4, 18, 36, .28), 0 12px 30px rgba(4, 18, 36, .13);
  animation: stockAdjustDialogIn .22s cubic-bezier(.2, .82, .25, 1);
}

@keyframes stockAdjustBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes stockAdjustDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#stock-adjust-modal .stock-adjust-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 102px;
  padding: 21px 24px;
  border-bottom: 1px solid #dbe5ef;
  background:
    radial-gradient(circle at 88% 0, rgba(61, 126, 228, .14), transparent 32%),
    linear-gradient(135deg, #fff 0%, #f8fbff 55%, #edf5ff 100%);
}

#stock-adjust-modal .stock-adjust-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #1769d3, #2b7de2 62%, #13a394);
}

#stock-adjust-modal .stock-adjust-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

#stock-adjust-modal .stock-adjust-warehouse-icon {
  display: inline-grid;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #bfd6f3;
  border-radius: 15px;
  background: linear-gradient(145deg, #edf6ff, #e7f5f3);
  color: #1768cd;
  box-shadow: 0 8px 20px rgba(25, 91, 159, .1), inset 0 0 0 1px rgba(255, 255, 255, .7);
}

#stock-adjust-modal .stock-adjust-warehouse-icon svg {
  width: 25px;
  height: 25px;
}

#stock-adjust-modal .stock-adjust-kicker {
  display: block;
  margin-bottom: 3px;
  color: #1769cf;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#stock-adjust-modal .stock-adjust-header h4 {
  margin: 0 0 3px;
  color: #102a43;
  font-size: 21px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.025em;
}

#stock-adjust-modal .stock-adjust-header p {
  margin: 0;
  color: #667f96;
  font-size: 12px;
}

#stock-adjust-modal .stock-adjust-close {
  display: inline-grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  border-color: #c8d6e5;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  color: #29455f;
}

#stock-adjust-modal .stock-adjust-close svg {
  width: 17px;
  height: 17px;
}

#stock-adjust-modal .stock-adjust-close:hover {
  border-color: #9fb4c9;
  background: #fff;
  color: #102a43;
}

#stock-adjust-modal .stock-adjust-body {
  max-height: calc(min(820px, 100dvh - 48px) - 184px);
  padding: 20px 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #b7c7d8 transparent;
  scrollbar-width: thin;
}

#stock-adjust-modal .stock-adjust-body::-webkit-scrollbar { width: 9px; }
#stock-adjust-modal .stock-adjust-body::-webkit-scrollbar-track { background: transparent; }
#stock-adjust-modal .stock-adjust-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 10px;
  background: #b7c7d8;
  background-clip: padding-box;
}

#stock-adjust-modal .stock-adjust-guidance {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid #cfe0f4;
  border-radius: 13px;
  background: linear-gradient(135deg, #f3f8ff, #f5fbfc);
}

#stock-adjust-modal .stock-adjust-guidance-icon {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #e3efff;
  color: #1c6bc8;
}

#stock-adjust-modal .stock-adjust-guidance-icon svg {
  width: 16px;
  height: 16px;
}

#stock-adjust-modal .stock-adjust-guidance strong {
  display: block;
  margin-bottom: 2px;
  color: #183754;
  font-size: 12px;
  font-weight: 800;
}

#stock-adjust-modal .stock-adjust-guidance p {
  margin: 0;
  color: #6e879e;
  font-size: 10px;
  line-height: 1.45;
}

/* Why the count differs. Asked before the numbers are keyed, because the
   difference is posted to the books and needs a name on it. */
#stock-adjust-modal .stock-adjust-reason {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid #d5e1ed;
  border-radius: 13px;
  background: #fff;
}

#stock-adjust-modal .stock-adjust-reason-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#stock-adjust-modal .stock-adjust-reason-field > span {
  color: #183754;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#stock-adjust-modal .stock-adjust-reason-field > span small {
  margin-left: 4px;
  color: #8ea3b8;
  font-size: 9px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

#stock-adjust-modal .stock-adjust-reason-field select,
#stock-adjust-modal .stock-adjust-reason-field input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d5e1ed;
  border-radius: 9px;
  background: #f8fbfd;
  color: #183754;
  font-family: inherit;
  font-size: 12.5px;
}

#stock-adjust-modal .stock-adjust-reason-field select:focus,
#stock-adjust-modal .stock-adjust-reason-field input:focus {
  outline: none;
  border-color: #1c6bc8;
  background: #fff;
}

#stock-adjust-modal .stock-adjust-reason-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: #6e879e;
  font-size: 10px;
  line-height: 1.45;
}

#stock-adjust-modal .stock-adjust-reason-hint strong { color: #183754; }

@media (max-width: 560px) {
  #stock-adjust-modal .stock-adjust-reason { grid-template-columns: minmax(0, 1fr); }
}

#stock-adjust-modal .stock-adjust-table-wrap {
  overflow: hidden;
  border: 1px solid #d5e1ed;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(27, 63, 99, .05);
}

#stock-adjust-modal .stock-adjust-table {
  width: 100%;
  min-width: 0;
}

#stock-adjust-modal .stock-adjust-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 17px;
  border-bottom: 1px solid #dbe5ef;
  background: #f1f6fa;
  color: #6d849a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

#stock-adjust-modal .stock-adjust-list-head span:last-child {
  padding: 4px 8px;
  border: 1px solid #d3e0ec;
  border-radius: 999px;
  background: #fff;
  color: #58738c;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

#stock-adjust-modal .stock-adjust-list-body { display: grid; }

#stock-adjust-modal .stock-adjust-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 14px 17px;
  border-bottom: 1px solid #edf2f7;
  background: #fff;
  transition: background .14s ease;
}

#stock-adjust-modal .stock-adjust-row:last-child { border-bottom: 0; }
#stock-adjust-modal .stock-adjust-row:hover { background: #f8fbfe; }

#stock-adjust-modal .stock-adjust-item-layout {
  display: flex;
  align-items: center;
  gap: 11px;
}

#stock-adjust-modal .stock-adjust-item-avatar {
  display: inline-grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #c6ddf6;
  border-radius: 11px;
  background: linear-gradient(145deg, #edf6ff, #e8f4ff);
  color: #1768cd;
  font-size: 14px;
  font-weight: 850;
}

#stock-adjust-modal .stock-adjust-item-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#stock-adjust-modal .stock-adjust-item-copy strong {
  overflow: hidden;
  color: #17324c;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#stock-adjust-modal .stock-adjust-item-copy span {
  color: #7d92a5;
  font-size: 10px;
}

#stock-adjust-modal .stock-adjust-quantity-cell {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

#stock-adjust-modal .stock-adjust-quantity-label {
  color: #71899f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .065em;
  text-transform: uppercase;
}

#stock-adjust-modal .stock-adjust-quantity-control {
  display: inline-flex;
  width: 190px;
  height: 46px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c6d6e5;
  border-radius: 11px;
  background: #fbfdff;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#stock-adjust-modal .stock-adjust-quantity-control:focus-within {
  border-color: #2b73d5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 115, 213, .13);
}

#stock-adjust-modal .stock-adjust-quantity-control input {
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  padding: 0 11px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #102e49;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}

#stock-adjust-modal .stock-adjust-quantity-control input::-webkit-inner-spin-button,
#stock-adjust-modal .stock-adjust-quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#stock-adjust-modal .stock-adjust-unit {
  display: inline-grid;
  align-self: stretch;
  min-width: 48px;
  place-items: center;
  padding: 0 9px;
  border-left: 1px solid #dae4ee;
  background: #f1f6fa;
  color: #617a91;
  font-size: 10px;
  font-weight: 800;
  text-transform: lowercase;
}

#stock-adjust-modal .stock-adjust-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 30px;
  border: 1px dashed #c7d7e6;
  border-radius: 15px;
  background: #fff;
  text-align: center;
}

#stock-adjust-modal .stock-adjust-empty > span {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: #edf5ff;
  color: #2774cd;
}

#stock-adjust-modal .stock-adjust-empty svg { width: 23px; height: 23px; }
#stock-adjust-modal .stock-adjust-empty strong { color: #17324c; font-size: 14px; }
#stock-adjust-modal .stock-adjust-empty p { max-width: 330px; margin: -14px auto 0; color: #758da3; font-size: 11px; line-height: 1.5; }

#stock-adjust-modal .stock-adjust-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 82px;
  padding: 15px 22px;
  border-top: 1px solid #dbe5ef;
  background: #fff;
  box-shadow: 0 -8px 22px rgba(28, 61, 94, .045);
}

#stock-adjust-modal .stock-adjust-footer-note {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #71899f;
  font-size: 10px;
  font-weight: 650;
}

#stock-adjust-modal .stock-adjust-footer-note span {
  color: #13a06b;
  font-size: 9px;
}

#stock-adjust-modal .stock-adjust-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

#stock-adjust-modal .stock-adjust-actions .ghost-button,
#stock-adjust-modal .stock-adjust-save {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
}

#stock-adjust-modal .stock-adjust-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #2173dc, #155fc6);
  box-shadow: 0 8px 18px rgba(21, 95, 198, .22);
}

#stock-adjust-modal .stock-adjust-save svg {
  width: 16px;
  height: 16px;
}

#stock-adjust-modal .stock-adjust-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 23px rgba(21, 95, 198, .28);
}

#stock-adjust-modal .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-dialog {
  border-color: #29435b;
  background: #0e1c2a;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-header {
  border-color: #29435b;
  background: radial-gradient(circle at 88% 0, rgba(48, 112, 205, .15), transparent 32%), linear-gradient(135deg, #132638, #102131);
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-header h4,
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-item-copy strong,
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-guidance strong,
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-empty strong { color: #edf5fc; }

html[data-theme="dark"] #stock-adjust-modal :is(.stock-adjust-table-wrap, .stock-adjust-footer, .stock-adjust-empty) {
  border-color: #29435b;
  background: #142636;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-guidance {
  border-color: #2d4b65;
  background: linear-gradient(135deg, #14293c, #132b3b);
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-reason {
  border-color: #2d4b65;
  background: #12283a;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-reason-field > span,
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-reason-hint strong { color: #dbe9f7; }

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-reason-hint,
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-reason-field > span small { color: #8fa8c0; }

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-reason-field select,
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-reason-field input {
  border-color: #2d4b65;
  background: #0f2233;
  color: #dbe9f7;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-table th,
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-unit {
  border-color: #29435b;
  background: #102131;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-list-head {
  border-color: #29435b;
  background: #102131;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-list-head span:last-child {
  border-color: #36536b;
  background: #172b3d;
  color: #b8cad9;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-row {
  border-color: #233d54;
  background: #142636;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-row:hover { background: #183146; }

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-row td { border-color: #233d54; }
html[data-theme="dark"] #stock-adjust-modal .stock-adjust-row:hover td { background: #183146; }

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-quantity-control {
  border-color: #36536b;
  background: #102131;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-quantity-control input {
  color: #edf5fc;
  color-scheme: dark;
}

html[data-theme="dark"] #stock-adjust-modal .stock-adjust-close {
  border-color: #36536b;
  background: #172b3d;
  color: #dceaf5;
}

@media (max-width: 680px) {
  #stock-adjust-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #stock-adjust-modal .stock-adjust-dialog {
    position: relative;
    inset: auto;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94dvh;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }

  #stock-adjust-modal .stock-adjust-header {
    min-height: 92px;
    padding: 17px 18px;
  }

  #stock-adjust-modal .stock-adjust-body {
    max-height: calc(94dvh - 174px);
    padding: 16px 14px 18px;
  }

  #stock-adjust-modal .stock-adjust-footer {
    min-height: 82px;
    padding: 13px 14px max(13px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  #stock-adjust-modal .stock-adjust-warehouse-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }
  #stock-adjust-modal .stock-adjust-warehouse-icon svg { width: 22px; height: 22px; }
  #stock-adjust-modal .stock-adjust-header h4 { font-size: 18px; }
  #stock-adjust-modal .stock-adjust-header p { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #stock-adjust-modal .stock-adjust-guidance { padding: 12px; }
  #stock-adjust-modal .stock-adjust-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  #stock-adjust-modal .stock-adjust-table,
  #stock-adjust-modal .stock-adjust-table tbody { display: grid; width: 100%; min-width: 0 !important; gap: 9px; }
  #stock-adjust-modal .stock-adjust-table thead { display: none; }
  #stock-adjust-modal .stock-adjust-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid #d5e1ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(27, 63, 99, .045);
  }
  #stock-adjust-modal .stock-adjust-row td { min-width: 0; padding: 0; border: 0; }
  #stock-adjust-modal .stock-adjust-row:hover td { background: transparent; }
  #stock-adjust-modal .stock-adjust-quantity-label { display: none; }
  #stock-adjust-modal .stock-adjust-item-layout { gap: 9px; }
  #stock-adjust-modal .stock-adjust-item-avatar { flex-basis: 34px; width: 34px; height: 34px; }
  #stock-adjust-modal .stock-adjust-quantity-control { width: 126px; height: 40px; }
  #stock-adjust-modal .stock-adjust-unit { min-width: 40px; padding: 0 6px; }
  #stock-adjust-modal .stock-adjust-footer { align-items: stretch; flex-direction: column; gap: 9px; }
  #stock-adjust-modal .stock-adjust-footer-note { justify-content: center; }
  #stock-adjust-modal .stock-adjust-actions { width: 100%; }
  #stock-adjust-modal .stock-adjust-actions .ghost-button { flex: 0 0 auto; }
  #stock-adjust-modal .stock-adjust-save { flex: 1 1 auto; }
  html[data-theme="dark"] #stock-adjust-modal .stock-adjust-row { border-color: #29435b; background: #142636; }
}

@media (prefers-reduced-motion: reduce) {
  #stock-adjust-modal,
  #stock-adjust-modal .stock-adjust-dialog { animation: none; }
}

/* POS selling-location chooser: calm, explicit and checkout-ready. */
#pos-shop-ask.pos-scanner-overlay {
  padding: 24px;
  background: rgba(8, 20, 35, .64);
  backdrop-filter: blur(11px) saturate(.9);
  -webkit-backdrop-filter: blur(11px) saturate(.9);
  animation: posShopBackdropIn .18s ease-out;
}

#pos-shop-ask .pos-shop-ask-box {
  width: min(620px, calc(100vw - 48px));
  max-width: 620px;
  max-height: min(780px, calc(100dvh - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(204, 219, 234, .94);
  border-radius: 24px;
  background: #f6f9fc;
  box-shadow: 0 36px 90px rgba(3, 17, 34, .3), 0 12px 30px rgba(3, 17, 34, .14);
  animation: posShopDialogIn .22s cubic-bezier(.2, .82, .25, 1);
}

@keyframes posShopBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes posShopDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#pos-shop-ask .pos-shop-ask-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 112px;
  padding: 23px 24px;
  border-bottom: 1px solid #dbe5ef;
  background:
    radial-gradient(circle at 88% 0, rgba(33, 117, 220, .14), transparent 34%),
    linear-gradient(135deg, #fff 0%, #f8fbff 56%, #edf6ff 100%);
  color: #102a43;
}

#pos-shop-ask .pos-shop-ask-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #1769d3, #2c7be0 62%, #12a08f);
}

#pos-shop-ask .pos-shop-ask-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

#pos-shop-ask .pos-shop-ask-brand-icon {
  display: inline-grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #bdd6f4;
  border-radius: 16px;
  background: linear-gradient(145deg, #edf6ff, #e6f5f3);
  color: #1768cd;
  box-shadow: 0 8px 20px rgba(25, 91, 159, .1), inset 0 0 0 1px rgba(255, 255, 255, .72);
}

#pos-shop-ask .pos-shop-ask-brand-icon svg {
  width: 26px;
  height: 26px;
}

#pos-shop-ask .pos-shop-ask-kicker {
  display: block;
  margin-bottom: 3px;
  color: #1769cf;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#pos-shop-ask .pos-shop-ask-header h3 {
  margin: 0 0 3px;
  color: #102a43;
  font-size: 21px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.025em;
}

#pos-shop-ask .pos-shop-ask-header p {
  margin: 0;
  color: #667f96;
  font-size: 11px;
  font-weight: 550;
}

#pos-shop-ask .pos-shop-ask-close {
  display: inline-grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #c8d6e5;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  color: #29455f;
  box-shadow: 0 4px 10px rgba(27, 61, 95, .06);
}

#pos-shop-ask .pos-shop-ask-close svg {
  width: 17px;
  height: 17px;
}

#pos-shop-ask .pos-shop-ask-close:hover {
  border-color: #9fb4c9;
  background: #fff;
  color: #102a43;
}

#pos-shop-ask .pos-shop-ask-body {
  max-height: calc(min(780px, 100dvh - 48px) - 112px);
  padding: 20px 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #b7c7d8 transparent;
  scrollbar-width: thin;
}

#pos-shop-ask .pos-shop-ask-product {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid #d3e0ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(27, 63, 99, .045);
}

#pos-shop-ask .pos-shop-ask-product-avatar {
  display: inline-grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #c4daf5;
  border-radius: 12px;
  background: linear-gradient(145deg, #edf6ff, #e7f4ff);
  color: #1767ca;
  font-size: 14px;
  font-weight: 850;
}

#pos-shop-ask .pos-shop-ask-product > div {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 1px;
}

#pos-shop-ask .pos-shop-ask-product > div > span {
  color: #72899e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#pos-shop-ask .pos-shop-ask-product strong {
  overflow: hidden;
  color: #17324c;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pos-shop-ask .pos-shop-ask-product small {
  color: #7b91a5;
  font-size: 10px;
}

#pos-shop-ask .pos-shop-ask-product-type {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #c9dfd5;
  border-radius: 999px;
  background: #eef9f4;
  color: #0e7c54;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#pos-shop-ask .pos-shop-ask-guidance {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid #d9e4ef;
  border-radius: 11px;
  background: #f1f6fb;
}

#pos-shop-ask .pos-shop-ask-guidance > span {
  display: inline-grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: #e2efff;
  color: #1b6ac9;
}

#pos-shop-ask .pos-shop-ask-guidance svg {
  width: 13px;
  height: 13px;
}

#pos-shop-ask .pos-shop-ask-guidance p {
  margin: 3px 0 0;
  color: #647d94;
  font-size: 10px;
  line-height: 1.45;
}

#pos-shop-ask .pos-shop-ask-list {
  display: grid;
  gap: 9px;
}

#pos-shop-ask .pos-shop-ask-btn {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid #d1deeb;
  border-radius: 14px;
  background: #fff;
  color: #17324c;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(27, 63, 99, .045);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

#pos-shop-ask .pos-shop-ask-btn:hover {
  transform: translateY(-1px);
  border-color: #77a9df;
  background: #fbfdff;
  box-shadow: 0 10px 22px rgba(27, 88, 153, .12);
}

#pos-shop-ask .pos-shop-ask-btn:focus-visible {
  outline: 3px solid rgba(32, 107, 207, .2);
  outline-offset: 2px;
}

#pos-shop-ask .pos-shop-ask-location-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #c5dbf5;
  border-radius: 12px;
  background: #edf6ff;
  color: #1769cd;
}

#pos-shop-ask .pos-shop-ask-location-icon svg {
  width: 21px;
  height: 21px;
}

#pos-shop-ask .pos-shop-ask-location-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#pos-shop-ask .pos-shop-ask-location-copy strong {
  overflow: hidden;
  color: #17324c;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pos-shop-ask .pos-shop-ask-location-copy small {
  color: #7a90a4;
  font-size: 10px;
  font-weight: 550;
}

#pos-shop-ask .pos-shop-ask-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #c9e3d5;
  border-radius: 999px;
  background: #eef9f3;
  color: #0c7c51;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#pos-shop-ask .pos-shop-ask-stock i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #15a268;
  box-shadow: 0 0 0 3px rgba(21, 162, 104, .11);
}

#pos-shop-ask .pos-shop-ask-btn.is-low .pos-shop-ask-stock {
  border-color: #efdba8;
  background: #fff8e7;
  color: #9a6900;
}

#pos-shop-ask .pos-shop-ask-btn.is-low .pos-shop-ask-stock i {
  background: #e7a40e;
  box-shadow: 0 0 0 3px rgba(231, 164, 14, .12);
}

#pos-shop-ask .pos-shop-ask-btn.is-out .pos-shop-ask-stock {
  border-color: #efcbc8;
  background: #fff2f1;
  color: #b33d38;
}

#pos-shop-ask .pos-shop-ask-btn.is-out .pos-shop-ask-stock i {
  background: #df4d47;
  box-shadow: 0 0 0 3px rgba(223, 77, 71, .11);
}

#pos-shop-ask .pos-shop-ask-arrow {
  width: 17px;
  height: 17px;
  color: #8ba0b3;
  transition: color .16s ease, transform .16s ease;
}

#pos-shop-ask .pos-shop-ask-btn:hover .pos-shop-ask-arrow {
  transform: translateX(2px);
  color: #1769cd;
}

#pos-shop-ask .pos-shop-ask-cancel {
  width: 100%;
  min-height: 38px;
  margin-top: 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6c849a;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

#pos-shop-ask .pos-shop-ask-cancel:hover {
  background: #eaf1f7;
  color: #294760;
}

html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-box {
  border-color: #29435b;
  background: #0e1c2a;
}

html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-header {
  border-color: #29435b;
  background: radial-gradient(circle at 88% 0, rgba(48, 112, 205, .15), transparent 34%), linear-gradient(135deg, #132638, #102131);
}

html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-header h3,
html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-product strong,
html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-location-copy strong { color: #edf5fc; }

html[data-theme="dark"] #pos-shop-ask :is(.pos-shop-ask-product, .pos-shop-ask-btn) {
  border-color: #29435b;
  background: #142636;
}

html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-btn:hover {
  border-color: #4678a5;
  background: #183146;
}

html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-guidance {
  border-color: #29435b;
  background: #102131;
}

html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-close {
  border-color: #36536b;
  background: #172b3d;
  color: #dceaf5;
}

html[data-theme="dark"] #pos-shop-ask .pos-shop-ask-cancel:hover {
  background: #183146;
  color: #dceaf5;
}

@media (max-width: 640px) {
  #pos-shop-ask.pos-scanner-overlay {
    align-items: flex-end;
    padding: 0;
  }

  #pos-shop-ask .pos-shop-ask-box {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }

  #pos-shop-ask .pos-shop-ask-header {
    min-height: 98px;
    padding: 18px;
  }

  #pos-shop-ask .pos-shop-ask-body {
    max-height: calc(94dvh - 98px);
    padding: 16px 14px max(18px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  #pos-shop-ask .pos-shop-ask-brand-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }
  #pos-shop-ask .pos-shop-ask-brand-icon svg { width: 22px; height: 22px; }
  #pos-shop-ask .pos-shop-ask-header h3 { font-size: 18px; }
  #pos-shop-ask .pos-shop-ask-header p { display: none; }
  #pos-shop-ask .pos-shop-ask-product { padding: 12px; }
  #pos-shop-ask .pos-shop-ask-product-type { display: none; }
  #pos-shop-ask .pos-shop-ask-guidance { padding: 9px 10px; }
  #pos-shop-ask .pos-shop-ask-btn {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    gap: 9px;
    min-height: 78px;
    padding: 11px 12px;
  }
  #pos-shop-ask .pos-shop-ask-location-icon { grid-row: 1 / 3; width: 40px; height: 40px; }
  #pos-shop-ask .pos-shop-ask-location-copy { grid-column: 2; }
  #pos-shop-ask .pos-shop-ask-stock { grid-column: 2; justify-self: start; padding: 4px 8px; }
  #pos-shop-ask .pos-shop-ask-arrow { grid-column: 3; grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  #pos-shop-ask,
  #pos-shop-ask .pos-shop-ask-box { animation: none; }
}

/* Transfer Orders: premium inventory-movement workspace. */
#transfers .wh-module {
  width: 100%;
  gap: 18px;
}

#transfers .wh-header {
  position: relative;
  isolation: isolate;
  min-height: 132px;
  align-items: center;
  padding: 25px 28px;
  overflow: hidden;
  border: 1px solid #c9dced;
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 0, rgba(29, 116, 223, .16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f6faff 58%, #edf7ff 100%);
  box-shadow: 0 12px 32px rgba(31, 74, 113, .08);
}

#transfers .wh-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #236de1, #08a6a6);
}

#transfers .wh-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 210px;
  right: 8%;
  top: -130px;
  border: 28px solid rgba(54, 126, 215, .055);
  border-radius: 50%;
}

#transfers .wh-header > div:first-child {
  position: relative;
  min-width: 0;
  padding-left: 64px;
}

#transfers .wh-header > div:first-child::before {
  content: "⇄";
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid #b9d5f2;
  border-radius: 14px;
  background: linear-gradient(145deg, #eff7ff, #e5f4fb);
  color: #1768cd;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(31, 105, 189, .09);
  font-size: 25px;
  font-weight: 800;
}

#transfers .wh-header-kicker {
  margin-bottom: 4px;
  color: #1768cd;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

#transfers .wh-header-title {
  margin-bottom: 4px;
  color: #102a43;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

#transfers .wh-header-sub {
  max-width: 620px;
  color: #647d94;
  font-size: 12px;
  line-height: 1.5;
}

#transfers .wh-header > div:last-child {
  position: relative;
  z-index: 1;
  display: flex !important;
  gap: 9px !important;
}

#transfers .wh-header :is(.ghost-button, .primary-button) {
  min-height: 40px;
  border-radius: 11px;
  padding-inline: 15px;
  font-size: 12px;
  font-weight: 800;
}

#transfers .wh-header .primary-button {
  border-color: #1f67d2;
  background: linear-gradient(135deg, #2776e8, #155ec8);
  box-shadow: 0 8px 18px rgba(29, 101, 203, .24);
}

#transfers .tr-date-filter {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(145px, 180px) minmax(140px, 170px) minmax(140px, 170px) auto;
  align-items: end;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid #cfdeeb;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #f7fbff);
  box-shadow: 0 7px 20px rgba(30, 67, 103, .05);
}

#transfers .tr-date-filter-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  align-self: center;
}

#transfers .tr-date-filter-heading > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#transfers .tr-date-filter-heading strong {
  color: #17324c;
  font-size: 12px;
  font-weight: 900;
}

#transfers .tr-date-filter-heading small {
  overflow: hidden;
  color: #71899f;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#transfers .tr-date-filter-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid #c5dbf1;
  border-radius: 12px;
  background: #edf6ff;
  color: #1768cd;
}

#transfers .tr-date-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

#transfers .tr-date-field > span {
  color: #738ba1;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}

#transfers .tr-date-field :is(select, input) {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #c7d8e7;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #1b3a55;
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#transfers .tr-date-field :is(select, input):focus {
  border-color: #4387d6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 121, 208, .13);
}

#transfers .tr-date-clear {
  min-width: 66px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid #c6d6e4;
  border-radius: 10px;
  background: #fff;
  color: #3f5c75;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

#transfers .tr-date-clear:not(:disabled):hover {
  border-color: #9db8d0;
  background: #f1f7fd;
  color: #185fb8;
}

#transfers .tr-date-clear:disabled {
  cursor: default;
  opacity: .48;
}

#transfers .tr-filter-empty .ghost-button {
  min-height: 40px;
  margin-top: 14px;
}

#transfers .wh-kpi-row {
  gap: 12px;
}

#transfers .wh-kpi {
  position: relative;
  isolation: isolate;
  min-height: 102px;
  gap: 13px;
  padding: 18px 19px;
  overflow: hidden;
  border-color: #d2dfeb;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #fbfdff);
  box-shadow: 0 7px 20px rgba(30, 67, 103, .055);
}

#transfers .wh-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px;
  background: #347ff0;
}

#transfers .wh-kpi:nth-child(2)::before { background: #e7a10c; }
#transfers .wh-kpi:nth-child(3)::before { background: #168fc0; }
#transfers .wh-kpi:nth-child(4)::before { background: #19a66b; }

#transfers .wh-kpi::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 82px;
  height: 82px;
  top: -40px;
  right: -30px;
  border: 15px solid rgba(50, 116, 205, .045);
  border-radius: 50%;
}

#transfers .wh-kpi:hover {
  transform: translateY(-2px);
  border-color: #b8d0e5;
  box-shadow: 0 12px 28px rgba(32, 78, 122, .1);
}

#transfers .wh-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

#transfers .wh-kpi-icon--blue {
  border: 1px solid #c8dcf5;
  background: #edf5ff;
  color: #1768cd;
}

#transfers .wh-kpi-icon--amber {
  border: 1px solid #f0dda5;
  background: #fff7df;
  color: #b87300;
}

#transfers .wh-kpi-icon--green {
  border: 1px solid #c9e8d8;
  background: #eaf9f1;
  color: #10855a;
}

#transfers .wh-kpi-val {
  color: #102a43;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

#transfers .wh-kpi-lbl {
  color: #7890a6;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .085em;
}

#transfers .tr-cards-list {
  gap: 16px;
}

#transfers .tr-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #ceddea;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(27, 67, 104, .065);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#transfers .tr-card:hover {
  transform: translateY(-2px);
  border-color: #b7cee2;
  box-shadow: 0 17px 38px rgba(27, 73, 116, .11);
}

#transfers .tr-card > .wh-card-bar {
  height: 4px;
  background: linear-gradient(90deg, #2a6fe3 0%, #168fc0 55%, #10a678 100%);
}

#transfers .tr-card-top {
  min-height: 56px;
  padding: 13px 18px;
  border-color: #d9e3ed;
  background: linear-gradient(90deg, #f8fbff, #f2f7fc);
}

#transfers .tr-card-id-block {
  gap: 9px;
}

#transfers .tr-card-id {
  color: #102a43;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .015em;
}

#transfers .tr-card-reason {
  padding: 4px 9px;
  border-color: #d5e0ea;
  background: #fff;
  color: #6b8297;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

#transfers .tr-status-badge {
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

#transfers .tr-card-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-color: #dce6ef;
  background: #fff;
}

#transfers .tr-card-wh {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: flex-end;
  gap: 10px;
  padding: 30px 14px 13px 46px;
  border: 1px solid #d5e2ee;
  border-radius: 14px;
  background: linear-gradient(145deg, #fbfdff, #f5f9fd);
  color: #17324c;
  font-size: 13px;
  font-weight: 850;
}

#transfers .tr-card-wh::before {
  position: absolute;
  top: 10px;
  left: 46px;
  color: #8298ac;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .095em;
  text-transform: uppercase;
}

#transfers .tr-card-wh:first-child::before { content: "Origin warehouse"; }
#transfers .tr-card-wh:last-child::before { content: "Destination warehouse"; }

#transfers .tr-card-wh svg {
  position: absolute;
  left: 14px;
  bottom: 13px;
  width: 22px;
  height: 22px;
  padding: 5px;
  box-sizing: content-box;
  border: 1px solid #c4daf0;
  border-radius: 9px;
  background: #eaf4ff;
  color: #1769cc;
}

#transfers .tr-card-wh:last-child svg {
  border-color: #c5e2d3;
  background: #eaf9f1;
  color: #0d8b5d;
}

#transfers .tr-card-wh span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#transfers .tr-card-arrow {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  justify-self: center;
  border: 1px solid #c9daeb;
  border-radius: 50%;
  background: linear-gradient(145deg, #f4f9ff, #eaf3fc);
  color: #226ed4;
  box-shadow: 0 5px 14px rgba(31, 102, 190, .1);
}

#transfers .tr-card-arrow svg {
  width: 19px;
  height: 19px;
}

#transfers .tr-card-meta {
  gap: 8px;
  padding: 12px 18px;
  border-color: #dce6ef;
  background: #fbfdff;
  color: #647d93;
  font-size: 10px;
}

#transfers .tr-card-meta > span:not(.tr-card-items) {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #d8e3ed;
  border-radius: 8px;
  background: #fff;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

#transfers .tr-card-items {
  min-width: 240px;
  color: #3f5d78;
  font-size: 11px;
  font-weight: 650;
}

#transfers .tr-card-serials {
  margin: 0;
  padding: 14px 18px 15px;
  border-bottom: 1px solid #dce6ef;
  background: #f7fafc;
}

#transfers .tr-card-serials-head {
  display: block;
  margin-bottom: 8px;
  color: #738ba1;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#transfers .tr-card-serial-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid #d7e2ec;
  border-radius: 11px;
  background: #fff;
}

#transfers .tr-card-serial-row + .tr-card-serial-row { margin-top: 7px; }

#transfers .tr-card-serial-item {
  overflow: hidden;
  color: #294761;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#transfers .tr-card-serial-codes {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

#transfers .tr-card-serial-codes code {
  padding: 4px 9px;
  border: 1px solid #cbd9e6;
  border-radius: 999px;
  background: #f3f7fb;
  color: #173b60;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

#transfers .tr-card-step-bar {
  position: relative;
  padding: 18px 18px 14px;
  border-color: #dce6ef;
  background: linear-gradient(180deg, #f7fafc, #f3f7fb);
}

#transfers .tr-step {
  min-width: 66px;
  gap: 6px;
}

#transfers .tr-step::before {
  width: 20px;
  height: 20px;
  border: 3px solid #d8e2ec;
  background: #fff;
  box-shadow: 0 0 0 4px #f3f7fb;
}

#transfers .tr-step--done::before {
  border-color: #18a769;
  background: #18a769;
  box-shadow: 0 0 0 4px rgba(24, 167, 105, .1);
}

#transfers .tr-step--active::before {
  border-color: #e1a10e;
  background: #e1a10e;
  box-shadow: 0 0 0 4px rgba(225, 161, 14, .12);
}

#transfers .tr-step span {
  color: #71899e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

#transfers .tr-step--done span { color: #13784f; }
#transfers .tr-step--active span { color: #986800; }

#transfers .tr-step-line {
  height: 3px;
  margin: 0 -2px 18px;
  border-radius: 999px;
  background: #d9e4ee;
}

#transfers .tr-step-line--done {
  background: linear-gradient(90deg, #1aab6d, #10935c);
}

#transfers .tr-card-actions {
  min-height: 58px;
  gap: 8px;
  padding: 11px 18px;
  background: #fff;
}

#transfers .tr-card-actions .tr-completed-note {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin-right: auto;
  padding: 5px 10px;
  border: 1px solid #c9e7d8;
  border-radius: 9px;
  background: #edf9f3;
  color: #0d8658;
  font-size: 10px;
  font-weight: 850;
}

#transfers .tr-card-actions :is(.primary-button, .ghost-button) {
  min-height: 34px !important;
  border-radius: 9px;
  padding-inline: 12px;
  font-size: 10px !important;
  font-weight: 800;
}

#transfers .tr-card-actions .primary-button {
  border-color: #1e68d2;
  background: linear-gradient(135deg, #2878e8, #165fc8);
  box-shadow: 0 6px 14px rgba(30, 101, 204, .18);
}

#transfers .tr-card-actions .ghost-button {
  border-color: #cad8e5;
  background: #fff;
  color: #36536c;
}

#transfers .tr-card-actions .ghost-button:hover {
  border-color: #9eb7cd;
  background: #f6faff;
}

html[data-theme="dark"] #transfers .wh-header {
  border-color: #29465f;
  background:
    radial-gradient(circle at 88% 0, rgba(47, 119, 211, .18), transparent 34%),
    linear-gradient(135deg, #132638, #102131);
}

html[data-theme="dark"] #transfers .wh-header-title,
html[data-theme="dark"] #transfers .tr-card-id,
html[data-theme="dark"] #transfers .tr-card-wh,
html[data-theme="dark"] #transfers .tr-card-serial-item {
  color: #e9f2f9;
}

html[data-theme="dark"] #transfers :is(.wh-kpi, .tr-card, .tr-card-actions) {
  border-color: #29465f;
  background: #122434;
}

html[data-theme="dark"] #transfers :is(.tr-card-top, .tr-card-meta, .tr-card-step-bar, .tr-card-serials) {
  border-color: #29465f;
  background: #102131;
}

html[data-theme="dark"] #transfers .tr-card-route {
  border-color: #29465f;
  background: #122434;
}

html[data-theme="dark"] #transfers :is(.tr-card-wh, .tr-card-serial-row) {
  border-color: #31506a;
  background: #162b3d;
}

html[data-theme="dark"] #transfers .tr-date-filter {
  border-color: #29465f;
  background: linear-gradient(145deg, #122434, #102131);
}

html[data-theme="dark"] #transfers .tr-date-filter-heading strong { color: #e9f2f9; }

html[data-theme="dark"] #transfers .tr-date-field :is(select, input),
html[data-theme="dark"] #transfers .tr-date-clear {
  border-color: #31506a;
  background: #162b3d;
  color: #dbe8f2;
  color-scheme: dark;
}

@media (max-width: 880px) {
  #transfers .wh-header {
    align-items: flex-start;
    padding: 22px;
  }

  #transfers .wh-header > div:last-child {
    width: 100%;
    justify-content: flex-end;
  }

  #transfers .tr-date-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #transfers .tr-date-filter-heading { grid-column: 1 / -1; }
  #transfers .tr-date-field--preset { grid-column: 1 / -1; }
  #transfers .tr-date-clear { grid-column: 1 / -1; }

  #transfers .tr-card-route {
    grid-template-columns: 1fr 54px 1fr;
    gap: 9px;
    padding: 14px;
  }

  #transfers .tr-card-wh {
    padding-inline: 42px 10px;
  }

  #transfers .tr-card-wh::before { left: 42px; }
  #transfers .tr-card-wh svg { left: 10px; }
}

@media (max-width: 640px) {
  #transfers .wh-module { gap: 13px; }

  #transfers .wh-header {
    min-height: 0;
    padding: 18px 15px;
    border-radius: 17px;
  }

  #transfers .wh-header > div:first-child {
    padding-left: 52px;
  }

  #transfers .wh-header > div:first-child::before {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 21px;
  }

  #transfers .wh-header-title { font-size: 21px; }
  #transfers .wh-header-sub { font-size: 11px; }

  #transfers .wh-header > div:last-child {
    justify-content: stretch;
  }

  #transfers .wh-header > div:last-child > button {
    flex: 1 1 50%;
    justify-content: center;
    white-space: nowrap;
  }

  #transfers .tr-date-filter {
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
  }

  #transfers .tr-date-filter-heading small {
    white-space: normal;
  }

  #transfers .tr-date-field :is(select, input),
  #transfers .tr-date-clear {
    height: 44px;
  }

  #transfers .wh-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #transfers .wh-kpi {
    min-height: 88px;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 14px;
  }

  #transfers .wh-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  #transfers .wh-kpi-val { font-size: 21px; }
  #transfers .wh-kpi-lbl { font-size: 8px; }

  #transfers .tr-card { border-radius: 17px; }

  #transfers .tr-card-top {
    min-height: 52px;
    padding: 11px 12px;
  }

  #transfers .tr-card-route {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  #transfers .tr-card-arrow {
    width: 38px;
    height: 38px;
    transform: rotate(90deg);
  }

  #transfers .tr-card-wh {
    min-height: 65px;
  }

  #transfers .tr-card-meta {
    padding: 10px 12px;
  }

  #transfers .tr-card-items {
    flex: 1 0 100%;
    min-width: 0;
    white-space: normal;
  }

  #transfers .tr-card-serials { padding: 12px; }

  #transfers .tr-card-serial-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #transfers .tr-card-serial-codes { justify-content: flex-start; }

  #transfers .tr-card-step-bar {
    padding: 17px 10px 12px;
  }

  #transfers .tr-step { min-width: 58px; }
  #transfers .tr-step span { font-size: 7px; }

  #transfers .tr-card-actions {
    padding: 10px 12px;
  }

  #transfers .tr-card-actions .tr-completed-note {
    flex: 1 0 100%;
  }

  #transfers .tr-card-actions :is(.primary-button, .ghost-button) {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #transfers .tr-card,
  #transfers .wh-kpi { transition: none; }
}

/* POS retail-price action: clear catalogue update, never a stray text link. */
#pos .pos-cart-line-meta:has(.pos-line-save-price) {
  grid-template-columns: minmax(160px, 1fr) minmax(142px, auto);
  column-gap: 10px;
}

#pos .pos-line-save-price {
  position: relative;
  display: inline-flex;
  min-width: 142px;
  min-height: 36px;
  align-self: end;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 6px 11px 6px 8px;
  overflow: hidden;
  border: 1px solid #b7d2f0;
  border-radius: 10px;
  background: linear-gradient(145deg, #f7fbff, #edf5ff);
  color: #185fbd;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(28, 96, 176, .08);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

#pos .pos-line-save-price::before {
  content: "↻";
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #c2d9f4;
  border-radius: 7px;
  background: #fff;
  color: #1e6bc9;
  box-shadow: 0 2px 5px rgba(31, 94, 165, .08);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

#pos .pos-line-save-price:hover {
  transform: translateY(-1px);
  border-color: #7eb0e6;
  background: linear-gradient(145deg, #f4f9ff, #e5f1ff);
  color: #0d54ae;
  box-shadow: inset 0 1px 0 #fff, 0 8px 17px rgba(25, 94, 176, .14);
}

#pos .pos-line-save-price:focus-visible {
  outline: 3px solid rgba(37, 112, 210, .2);
  outline-offset: 2px;
  border-color: #4b91dd;
}

#pos .pos-line-save-price:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(24, 80, 143, .1);
}

#pos .pos-line-save-price:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

html[data-theme="dark"] #pos .pos-line-save-price {
  border-color: #365d82;
  background: linear-gradient(145deg, #19334a, #142b3f);
  color: #9fc9fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 5px 12px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] #pos .pos-line-save-price::before {
  border-color: #3b6287;
  background: #1d3a53;
  color: #a9d0ff;
}

@media (max-width: 440px) {
  #pos .pos-cart-line-meta:has(.pos-line-save-price) {
    grid-template-columns: minmax(0, 1fr);
  }

  #pos .pos-cart-line-meta:has(.pos-line-save-price) > * {
    grid-column: 1;
  }

  #pos .pos-line-save-price {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pos .pos-line-save-price { transition: none; }
}

/* Transfer receipt dialog: calm, auditable and warehouse-ready. */
#receive-modal.export-choice-modal {
  padding: 24px;
  background: rgba(13, 28, 43, .55);
  backdrop-filter: blur(8px) saturate(.9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
  animation: transferReceiptBackdropIn .18s ease-out;
}

@keyframes transferReceiptBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#receive-modal .export-choice-box {
  position: relative;
  width: min(720px, calc(100vw - 48px)) !important;
  max-width: 720px;
  max-height: min(88dvh, 820px) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid #c7d9e8;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 32px 80px rgba(6, 24, 42, .28),
    0 9px 26px rgba(23, 65, 104, .12);
  scrollbar-color: #b7c8d8 transparent;
  scrollbar-width: thin;
  animation: transferReceiptDialogIn .22s cubic-bezier(.2, .82, .25, 1);
}

#receive-modal .export-choice-box::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #286fe0, #168fc0 58%, #12a578);
}

@keyframes transferReceiptDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#receive-modal .export-choice-box > h4 {
  position: relative;
  min-height: 84px;
  margin: 0 !important;
  padding: 26px 28px 8px 86px;
  background:
    radial-gradient(circle at 88% 0, rgba(41, 111, 210, .14), transparent 34%),
    linear-gradient(135deg, #fbfdff, #f0f7ff);
  color: #102a43;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.02em;
}

#receive-modal .export-choice-box > h4::before {
  content: "⇩";
  position: absolute;
  left: 26px;
  top: 22px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #bad5f2;
  border-radius: 13px;
  background: linear-gradient(145deg, #edf6ff, #e3f2fb);
  color: #1768ca;
  box-shadow: inset 0 1px 0 #fff, 0 6px 15px rgba(29, 103, 185, .1);
  font-size: 22px;
  font-weight: 850;
}

#receive-modal .export-choice-box > h4::after {
  content: "Inventory receipt";
  position: absolute;
  left: 86px;
  top: 13px;
  color: #2870cf;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .105em;
  text-transform: uppercase;
}

#receive-modal .export-choice-box > p {
  position: relative;
  margin: 0 !important;
  padding: 5px 28px 18px 86px;
  border-bottom: 1px solid #d9e5ef;
  background: linear-gradient(135deg, #fbfdff, #f0f7ff);
  color: #647d93 !important;
  font-size: 11px !important;
  line-height: 1.55;
}

#receive-modal .export-choice-box > p strong {
  color: #1d405f;
  font-weight: 850;
}

#receive-modal table {
  width: calc(100% - 48px) !important;
  min-width: 0 !important;
  max-width: calc(100% - 48px) !important;
  margin: 20px 24px 18px;
  overflow: hidden;
  border: 1px solid #d3e0eb;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 14px;
  background: #fff;
  table-layout: fixed;
}

#receive-modal thead {
  background: linear-gradient(180deg, #f5f9fc, #eef4f9);
}

#receive-modal th {
  padding: 11px 12px !important;
  border-bottom: 1px solid #d2dfeb !important;
  color: #738a9f !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .085em;
  text-transform: uppercase;
  white-space: nowrap;
}

#receive-modal th:first-child { width: 38%; }
#receive-modal th:nth-child(2),
#receive-modal th:nth-child(3) { width: 15%; }
#receive-modal th:last-child { width: 32%; }

#receive-modal tbody tr {
  transition: background .14s ease;
}

#receive-modal tbody tr:hover {
  background: #f9fcff;
}

#receive-modal td {
  padding: 13px 12px !important;
  border-bottom: 1px solid #e1e9f0;
  color: #3f5d78;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

#receive-modal tbody tr:last-child td { border-bottom: 0; }

#receive-modal td:first-child strong {
  color: #17324c;
  font-size: 12px;
  font-weight: 850;
}

#receive-modal td:nth-child(2) {
  color: #17324c;
  font-weight: 850;
}

#receive-modal td:nth-child(3) {
  color: #6e879c !important;
  font-weight: 700;
}

#receive-modal [data-receive-line] {
  width: 100% !important;
  min-width: 86px;
  height: 38px;
  padding: 0 10px !important;
  border: 1px solid #b9cde0 !important;
  border-radius: 9px !important;
  background: #f8fbfd !important;
  color: #15324d;
  box-shadow: inset 0 1px 2px rgba(22, 58, 91, .035);
  font-size: 12px !important;
  font-weight: 850;
  text-align: right;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

#receive-modal [data-receive-line]:focus {
  outline: none;
  border-color: #3f86d8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(49, 122, 207, .14);
}

#receive-modal .export-choice-box > div:last-child {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 9px !important;
  min-height: 68px;
  margin: 0 !important;
  padding: 14px 24px 17px !important;
  border-top: 1px solid #d7e3ed !important;
  background: rgba(250, 252, 254, .96);
  box-shadow: 0 -8px 22px rgba(24, 66, 105, .045);
  backdrop-filter: blur(8px);
}

#receive-modal .export-choice-box > div:last-child::before {
  content: "Review the receiving quantities before posting them to stock.";
  flex: 1 1 auto;
  max-width: 320px;
  margin-right: auto;
  color: #71889d;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.4;
}

#receive-modal :is(.primary-button, .ghost-button) {
  min-height: 39px;
  border-radius: 10px;
  padding-inline: 15px;
  font-size: 11px;
  font-weight: 850;
}

#receive-modal .primary-button {
  border-color: #1d66cf;
  background: linear-gradient(135deg, #2878e8, #155fc7);
  box-shadow: 0 8px 18px rgba(28, 101, 203, .22);
}

#receive-modal .primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 22px rgba(28, 101, 203, .27);
}

#receive-modal .ghost-button {
  border-color: #c6d5e3;
  background: #fff;
  color: #3d5971;
}

#receive-modal .ghost-button:hover {
  border-color: #9eb7cd;
  background: #f5f9fc;
}

html[data-theme="dark"] #receive-modal .export-choice-box {
  border-color: #2d4b64;
  background: #112333;
}

html[data-theme="dark"] #receive-modal .export-choice-box > :is(h4, p) {
  border-color: #2d4b64;
  background:
    radial-gradient(circle at 88% 0, rgba(41, 111, 210, .16), transparent 34%),
    linear-gradient(135deg, #142a3d, #102232);
}

html[data-theme="dark"] #receive-modal .export-choice-box > h4,
html[data-theme="dark"] #receive-modal td:first-child strong {
  color: #edf5fb;
}

html[data-theme="dark"] #receive-modal table,
html[data-theme="dark"] #receive-modal tbody tr {
  border-color: #2d4b64;
  background: #14283a;
}

html[data-theme="dark"] #receive-modal thead,
html[data-theme="dark"] #receive-modal .export-choice-box > div:last-child {
  border-color: #2d4b64 !important;
  background: #102232;
}

html[data-theme="dark"] #receive-modal td {
  border-color: #29465e;
  color: #b9cad8;
}

@media (max-width: 620px) {
  #receive-modal.export-choice-modal {
    align-items: flex-end;
    padding: 0;
  }

  #receive-modal .export-choice-box {
    width: 100% !important;
    max-width: 100%;
    max-height: 94dvh !important;
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }

  #receive-modal .export-choice-box > h4 {
    min-height: 76px;
    padding: 24px 18px 7px 72px;
    font-size: 17px;
  }

  #receive-modal .export-choice-box > h4::before {
    left: 17px;
    top: 20px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  #receive-modal .export-choice-box > h4::after {
    left: 72px;
    top: 12px;
  }

  #receive-modal .export-choice-box > p {
    padding: 4px 18px 15px 72px;
    font-size: 10px !important;
  }

  #receive-modal table {
    display: block;
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
    margin: 14px;
    border: 0;
    background: transparent;
  }

  #receive-modal thead { display: none; }
  #receive-modal tbody { display: grid; gap: 10px; }

  #receive-modal tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid #d3e0eb;
    border-radius: 13px;
    background: #fff;
  }

  #receive-modal td {
    display: grid;
    gap: 5px;
    padding: 0 !important;
    border: 0;
    text-align: left !important;
  }

  #receive-modal td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 9px !important;
    border-bottom: 1px solid #e1e9f0;
  }

  #receive-modal td:nth-child(2)::before { content: "Ordered"; }
  #receive-modal td:nth-child(3)::before { content: "Received"; }
  #receive-modal td:nth-child(4)::before { content: "Receiving now"; }

  #receive-modal td:not(:first-child)::before {
    color: #7d93a7;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
  }

  #receive-modal [data-receive-line] {
    min-width: 0;
    height: 40px;
    text-align: center;
  }

  #receive-modal .export-choice-box > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom)) !important;
  }

  #receive-modal .export-choice-box > div:last-child::before {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0 0 2px;
  }

  #receive-modal :is(.primary-button, .ghost-button) {
    min-height: 43px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #receive-modal.export-choice-modal,
  #receive-modal .export-choice-box { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bills — professional master/detail workspace
   Scoped to #bills so invoices and all accounting workflows stay untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

#bills .bill-module--record {
  margin: -2px;
}

#bills .bill-record-panel {
  padding: 0;
  overflow: hidden;
  border: 1px solid #cbd9e6;
  border-radius: 20px;
  background: #f2f6fa;
  box-shadow: 0 18px 48px rgba(15, 42, 69, .09);
}

#bills .bill-record-shell {
  grid-template-columns: clamp(292px, 24vw, 358px) minmax(0, 1fr);
  min-height: calc(100vh - 196px);
  border: 0;
  border-radius: 0;
  background: #edf3f8;
}

#bills .invoice-record-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right-color: #d6e1eb;
  background: #fff;
}

#bills .invoice-record-list-head {
  position: relative;
  z-index: 2;
  min-height: 72px;
  padding: 14px 16px;
  border-bottom-color: #dbe5ee;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
  box-shadow: 0 6px 18px rgba(30, 62, 93, .045);
}

#bills .invoice-list-filter {
  min-width: 0;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #132c47;
  font-size: 16px;
  letter-spacing: -.015em;
}

#bills .invoice-list-filter:hover {
  background: #edf5ff;
  color: #155dc0;
}

#bills .invoice-list-filter > span:first-child {
  color: inherit;
  font-size: inherit;
}

#bills .bill-record-count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid #d2e2f4;
  border-radius: 999px;
  background: #edf5ff;
  color: #2366b4 !important;
  font-size: 11px !important;
  font-weight: 800;
}

#bills .invoice-create-button {
  width: 40px;
  height: 40px;
  border: 1px solid #1259bd;
  border-radius: 11px;
  background: linear-gradient(145deg, #2f7be7, #155dcc);
  box-shadow: 0 7px 16px rgba(28, 102, 202, .24);
  transition: transform .15s ease, box-shadow .15s ease;
}

#bills .invoice-create-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(28, 102, 202, .29);
}

#bills .invoice-record-list-body {
  flex: 1;
  max-height: calc(100vh - 270px);
  padding: 10px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #bccdde transparent;
}

#bills .invoice-record-list-item {
  position: relative;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 11px;
  margin-bottom: 7px;
  padding: 14px 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

#bills .invoice-record-list-item:hover {
  border-color: #c5d9ee;
  background: #f7fbff;
  box-shadow: 0 6px 16px rgba(26, 72, 119, .07);
  transform: translateY(-1px);
}

#bills .invoice-record-list-item.active {
  border-color: #b2d1f2;
  background: linear-gradient(105deg, #eaf4ff 0%, #f7fbff 100%);
  box-shadow: inset 3px 0 #2475db, 0 8px 18px rgba(32, 92, 155, .09);
}

#bills .invoice-record-check {
  position: relative;
  width: 15px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid #9db4c9;
  border-radius: 3px;
  background: #fff;
}

#bills .invoice-record-check::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 1px;
  content: "";
  background: #9db4c9;
  box-shadow: 0 3px #9db4c9, 0 6px #9db4c9;
}

#bills .invoice-record-list-main {
  min-width: 0;
  gap: 5px;
}

#bills .invoice-record-list-main > strong {
  overflow: hidden;
  color: #172e48;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bills .invoice-record-list-main > span:not(.status-pill):not(.invoice-record-overdue) {
  color: #72869a;
  font-size: 11px;
}

#bills .invoice-record-list-main .status-pill,
#bills .invoice-record-list-main .invoice-record-overdue {
  justify-self: start;
  margin-top: 2px;
}

#bills .invoice-record-list-side {
  align-content: start;
  gap: 5px;
}

#bills .invoice-record-list-side > strong {
  color: #162e49;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#bills .inv-balance-due {
  color: #c85b12;
  font-size: 10px;
}

#bills .invoice-record-detail {
  position: relative;
  min-width: 0;
  background:
    radial-gradient(circle at 88% 0%, rgba(194, 223, 250, .34), transparent 29%),
    #edf3f8;
}

#bills .invoice-record-titlebar {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 82px;
  padding: 14px 22px;
  border-bottom-color: #d8e3ed;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 14px rgba(24, 54, 84, .045);
  backdrop-filter: blur(12px);
}

#bills .bill-record-title-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#bills .bill-record-eyebrow {
  color: #3775ba;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#bills .bill-record-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

#bills .bill-record-title-line h3 {
  color: #102944;
  font-size: 22px;
  letter-spacing: -.025em;
}

#bills .bill-record-title-copy p {
  display: flex;
  gap: 7px;
  margin: 0;
  color: #6f8397;
  font-size: 11px;
}

#bills .invoice-close-button {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid #d3e0eb;
  border-radius: 11px;
  background: #fff;
  color: #6d8297;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

#bills .invoice-close-button:hover {
  border-color: #f1b5b5;
  background: #fff5f5;
  color: #cf3c3c;
}

#bills .invoice-record-toolbar {
  position: sticky;
  top: 82px;
  z-index: 3;
  min-height: 54px;
  gap: 7px;
  padding: 8px 22px;
  border-bottom-color: #d7e2ec;
  background: rgba(247, 250, 253, .97);
  backdrop-filter: blur(12px);
}

#bills .invoice-record-toolbar .table-action {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #ccdbe8;
  border-radius: 9px;
  background: #fff;
  color: #334d68;
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 2px 5px rgba(25, 60, 94, .035);
}

#bills .invoice-record-toolbar .table-action:hover {
  border-color: #99bee5;
  background: #eef6ff;
  color: #155eb8;
}

#bills .invoice-record-toolbar .primary-lite {
  border-color: #1766c8;
  background: linear-gradient(145deg, #2c79e4, #175fc5);
  color: #fff;
  box-shadow: 0 7px 16px rgba(26, 96, 190, .2);
}

#bills .invoice-record-toolbar .primary-lite:hover {
  border-color: #1055af;
  background: linear-gradient(145deg, #256fd7, #1055b5);
  color: #fff;
}

#bills .invoice-preview-paper {
  max-width: 900px;
  min-height: 720px;
  margin: 30px auto 44px;
  padding: 64px 62px 54px;
  overflow: hidden;
  border: 1px solid #dfe6ed;
  border-radius: 7px;
  color: #19314b;
  box-shadow: 0 22px 52px rgba(23, 54, 84, .14), 0 2px 6px rgba(23, 54, 84, .07);
}

#bills .invoice-preview-ribbon {
  top: 22px;
  left: -42px;
  width: 164px;
  padding: 8px 0;
  border: 1px solid rgba(255, 255, 255, .22);
  background: #2373d4;
  box-shadow: 0 7px 16px rgba(22, 75, 135, .2);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-45deg);
}

#bills .invoice-preview-ribbon.status-paid { background: #13a869; }
#bills .invoice-preview-ribbon.status-overdue { background: #e58a12; }
#bills .invoice-preview-ribbon.status-draft { background: #718297; }
#bills .invoice-preview-ribbon.status-void { background: #d54545; }
#bills .invoice-preview-ribbon.status-partially-paid { background: #7657d6; }

#bills .invoice-preview-top > div:first-child {
  display: grid;
  gap: 4px;
  max-width: 55%;
}

#bills .invoice-preview-top > div:first-child > strong {
  color: #112b47;
  font-size: 17px;
  letter-spacing: -.015em;
}

#bills .invoice-preview-top span,
#bills .invoice-preview-meta span,
#bills .invoice-preview-notes p {
  color: #667b90;
  font-size: 11px;
}

#bills .invoice-preview-title h2 {
  color: #153d70;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .03em;
}

#bills .invoice-preview-title > strong {
  color: #203d5c;
  font-size: 12px;
}

#bills .invoice-preview-title > span {
  margin-top: 8px;
  color: #7b8ea2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#bills .invoice-preview-title b {
  color: #112e4d;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

#bills .invoice-preview-meta {
  margin-top: 58px;
  padding: 18px 0;
  border-top: 1px solid #e0e8ef;
  border-bottom: 1px solid #e0e8ef;
}

#bills .invoice-preview-meta > div:first-child > span {
  margin-bottom: 6px;
  color: #71869b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#bills .invoice-preview-meta > div:first-child > strong {
  color: #185fbc;
  font-size: 13px;
}

#bills .invoice-preview-meta > div:first-child p {
  margin: 5px 0 0;
  color: #6e8296;
  font-size: 11px;
  line-height: 1.55;
}

#bills .invoice-preview-meta > div:last-child {
  gap: 9px 26px;
}

#bills .invoice-preview-meta > div:last-child strong {
  color: #2c455e;
  font-size: 11px;
  text-align: right;
}

#bills .bill-preview-lines-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #dbe5ee;
  border-radius: 10px;
  scrollbar-width: thin;
}

#bills .bill-preview-lines-wrap:focus-visible {
  outline: 3px solid rgba(38, 117, 218, .2);
  outline-offset: 2px;
}

#bills .invoice-preview-lines {
  min-width: 620px;
  margin-top: 0;
}

#bills .invoice-preview-lines th {
  padding: 12px 13px;
  background: #17375d;
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#bills .invoice-preview-lines td {
  padding: 15px 13px;
  border-bottom-color: #e1e8ef;
  color: #304961;
  font-size: 11px;
}

#bills .invoice-preview-lines tbody tr:nth-child(even) td {
  background: #f8fafc;
}

#bills .invoice-preview-totals {
  grid-template-columns: minmax(160px, auto) minmax(145px, auto);
  gap: 11px 30px;
  margin-top: 20px;
}

#bills .invoice-preview-totals > span,
#bills .invoice-preview-totals > strong {
  color: #40586f;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

#bills .invoice-preview-totals .balance {
  margin-top: 3px;
  padding: 13px 12px;
  background: #eaf3fd;
  color: #153e70;
  font-size: 13px;
}

#bills .invoice-preview-notes {
  margin-top: 48px;
  padding: 14px 16px;
  border: 1px solid #e0e8ef;
  border-radius: 10px;
  background: #f8fafc;
}

@media (max-width: 1100px) {
  #bills .bill-record-shell {
    grid-template-columns: 282px minmax(0, 1fr);
  }

  #bills .invoice-preview-paper {
    margin: 24px;
    padding: 58px 40px 44px;
  }
}

@media (max-width: 760px) {
  #bills .bill-module--record {
    margin: 0;
  }

  #bills .bill-record-panel {
    border-radius: 15px;
  }

  #bills .bill-record-shell {
    display: block;
    min-height: 0;
  }

  #bills .invoice-record-titlebar {
    min-height: 72px;
    padding: 11px 13px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #bills .invoice-record-title-actions {
    align-self: center;
  }

  #bills .bill-record-title-line h3 {
    font-size: 18px;
  }

  #bills .bill-record-title-copy p {
    max-width: 245px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #bills .invoice-record-toolbar {
    position: relative;
    top: auto;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 8px 12px !important;
    overflow-x: auto;
  }

  #bills .invoice-record-toolbar .table-action {
    flex: 0 0 auto;
    min-height: 38px;
  }

  #bills .invoice-preview-paper {
    min-height: 0;
    margin: 12px !important;
    padding: 50px 16px 26px !important;
    border-radius: 8px;
  }

  #bills .invoice-preview-ribbon {
    top: 17px;
    left: -48px;
  }

  #bills .invoice-preview-top > div:first-child {
    max-width: 100%;
    padding-top: 28px;
  }

  #bills .invoice-preview-title {
    justify-items: start;
  }

  #bills .invoice-preview-title h2 {
    font-size: 32px;
  }

  #bills .invoice-preview-meta {
    margin-top: 26px;
  }

  #bills .invoice-preview-meta > div:last-child {
    width: 100%;
    grid-template-columns: minmax(90px, 1fr) minmax(0, 1.35fr);
  }

  #bills .invoice-preview-lines {
    min-width: 560px;
  }

  #bills .invoice-preview-totals {
    grid-template-columns: minmax(110px, 1fr) minmax(120px, 1fr);
    gap: 10px 14px;
    width: 100% !important;
    padding-right: 0;
  }
}

[data-theme="dark"] #bills .bill-record-panel,
[data-theme="dark"] #bills .bill-record-shell,
[data-theme="dark"] #bills .invoice-record-detail {
  border-color: #293b4d;
  background: #0e1722;
}

[data-theme="dark"] #bills .invoice-record-list,
[data-theme="dark"] #bills .invoice-record-list-head,
[data-theme="dark"] #bills .invoice-record-titlebar,
[data-theme="dark"] #bills .invoice-record-toolbar {
  border-color: #2b3d50;
  background: rgba(18, 29, 42, .98);
}

[data-theme="dark"] #bills .invoice-list-filter,
[data-theme="dark"] #bills .bill-record-title-line h3,
[data-theme="dark"] #bills .invoice-record-list-main > strong,
[data-theme="dark"] #bills .invoice-record-list-side > strong {
  color: #e7f0f8;
}

[data-theme="dark"] #bills .invoice-record-list-item {
  background: #121d2a;
}

[data-theme="dark"] #bills .invoice-record-list-item:hover,
[data-theme="dark"] #bills .invoice-record-list-item.active {
  border-color: #345778;
  background: #15283a;
}

[data-theme="dark"] #bills .invoice-record-toolbar .table-action,
[data-theme="dark"] #bills .invoice-close-button {
  border-color: #34495e;
  background: #182534;
  color: #bed0e0;
}

[data-theme="dark"] #bills .invoice-preview-paper {
  border-color: #34485c;
  background: #15212e;
  color: #dce8f2;
}

[data-theme="dark"] #bills .invoice-preview-top > div:first-child > strong,
[data-theme="dark"] #bills .invoice-preview-title h2,
[data-theme="dark"] #bills .invoice-preview-title b,
[data-theme="dark"] #bills .invoice-preview-meta > div:first-child > strong,
[data-theme="dark"] #bills .invoice-preview-meta > div:last-child strong {
  color: #e1edf7;
}

[data-theme="dark"] #bills .bill-preview-lines-wrap,
[data-theme="dark"] #bills .invoice-preview-meta,
[data-theme="dark"] #bills .invoice-preview-notes {
  border-color: #334658;
}

[data-theme="dark"] #bills .invoice-preview-lines tbody tr:nth-child(even) td,
[data-theme="dark"] #bills .invoice-preview-notes {
  background: #182634;
}

[data-theme="dark"] #bills .invoice-preview-totals .balance {
  background: #17324f;
  color: #e4eff8;
}