@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;800&display=swap");

:root {
  --sav-accent: #e30613;
  --sav-light-bg: #ffffff;
  --sav-light-bg-soft: #f8fafd;
  --sav-light-surface: #ffffff;
  --sav-light-surface-muted: #f1f3f4;
  --sav-light-border: #dadce0;
  --sav-light-border-soft: #e7eaee;
  --sav-light-text: #202124;
  --sav-light-heading: #111827;
  --sav-light-muted: #5f6368;

  --sav-dark-bg: #202124;
  --sav-dark-surface: #292a2d;
  --sav-dark-surface-raised: #303134;
  --sav-dark-surface-soft: #26272a;
  --sav-dark-border: #3c4043;
  --sav-dark-border-strong: #5f6368;
  --sav-dark-text: #e8eaed;
  --sav-dark-heading: #f8fafd;
  --sav-dark-muted: #bdc1c6;
  --sav-dark-subtle: #9aa0a6;
  --sav-dark-hover: #35363a;
  --sav-dark-blue: #8ab4f8;
}

body,
button,
input,
select,
textarea {
  font-family: "Roboto", Arial, sans-serif !important;
  font-weight: 300;
}

strong,
h1,
h2,
h3,
.page-title,
.legacy-action,
.action-button-primary,
.action-button-secondary {
  font-family: "Roboto", Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Light mode is the explicit default. This also neutralizes Tailwind's
   media-based dark utilities when the app itself is not in dark mode. */
#root > div:not(.dark) .app-bg {
  background:
    radial-gradient(circle at 78% 16%, rgba(226, 232, 240, 0.38), transparent 25%),
    radial-gradient(circle at 52% 52%, rgba(226, 232, 240, 0.22), transparent 28%),
    var(--sav-light-bg) !important;
  color: var(--sav-light-text) !important;
}

#root > div:not(.dark) [class~="dark:text-slate-100"],
#root > div:not(.dark) [class~="dark:text-white"] {
  color: var(--sav-light-heading) !important;
}

#root > div:not(.dark) [class~="dark:text-slate-300"],
#root > div:not(.dark) [class~="dark:text-slate-400"] {
  color: var(--sav-light-muted) !important;
}

#root > div:not(.dark) [class~="dark:bg-slate-800"],
#root > div:not(.dark) [class~="dark:bg-slate-900"],
#root > div:not(.dark) [class~="dark:bg-slate-950"] {
  background-color: var(--sav-light-surface) !important;
}

#root > div:not(.dark) [class~="dark:bg-slate-900/70"] {
  background-color: rgba(255, 255, 255, 0.72) !important;
}

#root > div:not(.dark) [class~="dark:border-[#2d3748]"],
#root > div:not(.dark) [class~="dark:border-[#3c4043]"],
#root > div:not(.dark) [class~="dark:border-slate-700"],
#root > div:not(.dark) [class~="dark:border-slate-800"] {
  border-color: var(--sav-light-border) !important;
}

#root > div:not(.dark) .sidebar-shell,
#root > div:not(.dark) .settings-panel,
#root > div:not(.dark) .dashboard-card,
#root > div:not(.dark) .entity-card,
#root > div:not(.dark) .entity-subcard,
#root > div:not(.dark) .entity-list-table,
#root > div:not(.dark) .project-card,
#root > div:not(.dark) .project-list-table,
#root > div:not(.dark) .quote-card,
#root > div:not(.dark) .quote-list-table,
#root > div:not(.dark) .forecast-card,
#root > div:not(.dark) .purchase-panel,
#root > div:not(.dark) .purchase-project,
#root > div:not(.dark) .company-info-card,
#root > div:not(.dark) .company-address-card,
#root > div:not(.dark) .document-drop-zone,
#root > div:not(.dark) .drop-zone {
  background-color: var(--sav-light-surface) !important;
  border-color: var(--sav-light-border) !important;
  color: var(--sav-light-text) !important;
}

#root > div .sidebar-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#root > div .sidebar-shell nav {
  min-height: 0;
  padding-bottom: 18px;
}

#root > div .sidebar-shell::-webkit-scrollbar {
  width: 8px;
}

#root > div .sidebar-shell::-webkit-scrollbar-track {
  background: transparent;
}

#root > div .sidebar-shell::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

#root > div .sidebar-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.75);
}

#root > div.dark .sidebar-shell::-webkit-scrollbar-thumb {
  background: rgba(189, 193, 198, 0.38);
}

#root > div.dark .sidebar-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 234, 237, 0.52);
}

#root > div:not(.dark) .page-title,
#root > div:not(.dark) .dashboard-card-value,
#root > div:not(.dark) .project-card h2,
#root > div:not(.dark) .quote-card h2,
#root > div:not(.dark) .settings-panel h2,
#root > div:not(.dark) .settings-panel h3,
#root > div:not(.dark) .company-info-card h3,
#root > div:not(.dark) .entity-list-name,
#root > div:not(.dark) .quote-amount,
#root > div:not(.dark) .project-empty strong,
#root > div:not(.dark) .quote-empty strong {
  color: var(--sav-light-heading) !important;
}

#root > div:not(.dark) .dashboard-card-label,
#root > div:not(.dark) .dashboard-card-caption,
#root > div:not(.dark) .project-address,
#root > div:not(.dark) .project-description,
#root > div:not(.dark) .quote-card-meta,
#root > div:not(.dark) .quote-card-gridline,
#root > div:not(.dark) .entity-list-line,
#root > div:not(.dark) .project-list-line,
#root > div:not(.dark) .quote-list-line,
#root > div:not(.dark) .purchase-empty,
#root > div:not(.dark) .project-empty,
#root > div:not(.dark) .quote-empty,
#root > div:not(.dark) .document-inline-empty {
  color: var(--sav-light-muted) !important;
}

#root > div:not(.dark) .entity-list-header,
#root > div:not(.dark) .project-list-header,
#root > div:not(.dark) .quote-list-header,
#root > div:not(.dark) .purchase-grid-header,
#root > div:not(.dark) .responsive-table thead,
#root > div:not(.dark) .responsive-table tfoot,
#root > div:not(.dark) .company-address-row-header {
  background-color: var(--sav-light-bg-soft) !important;
  color: var(--sav-light-muted) !important;
  border-color: var(--sav-light-border) !important;
}

#root > div:not(.dark) input,
#root > div:not(.dark) select,
#root > div:not(.dark) textarea,
#root > div:not(.dark) .legacy-select,
#root > div:not(.dark) .quote-input,
#root > div:not(.dark) .supplier-input,
#root > div:not(.dark) .ht-input,
#root > div:not(.dark) .invoice-amount-cell {
  background-color: var(--sav-light-surface) !important;
  border-color: var(--sav-light-border-soft) !important;
  color: var(--sav-light-heading) !important;
}

#root > div:not(.dark) .theme-toggle,
#root > div:not(.dark) .action-button-secondary,
#root > div:not(.dark) .project-delete,
#root > div:not(.dark) .quote-action-trigger {
  background-color: var(--sav-light-surface) !important;
  border-color: var(--sav-light-border) !important;
  color: var(--sav-light-heading) !important;
}

#root > div:not(.dark) .settings-tab:not(.settings-tab-active),
#root > div:not(.dark) .legacy-action:not(.legacy-action-round):not(.bg-\[\#16833A\]) {
  color: var(--sav-light-text) !important;
}

#root > div .settings-tab.settings-tab-active {
  border-color: transparent !important;
  color: #ffffff !important;
}

#root > div .sidebar-resize-handle {
  color: transparent !important;
}

#root > div:not(.dark) .sidebar-shell nav button:not([style]):hover,
#root > div:not(.dark) .sidebar-shell nav button.dark\:hover\:bg-\[\#2b3038\]:hover,
#root > div:not(.dark) [class~="dark:hover:bg-[#2b3038]"]:hover,
#root > div:not(.dark) [class~="dark:hover:bg-slate-800"]:hover {
  background-color: rgba(227, 6, 19, 0.08) !important;
  color: var(--sav-accent) !important;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
  #root > div:not(.dark) .sidebar-shell nav button:not([style]):hover,
  #root > div:not(.dark) .sidebar-shell nav button.dark\:hover\:bg-\[\#2b3038\]:hover,
  #root > div:not(.dark) [class~="dark:hover:bg-[#2b3038]"]:hover,
  #root > div:not(.dark) [class~="dark:hover:bg-slate-800"]:hover {
    background-color: color-mix(in srgb, var(--sav-accent) 10%, #ffffff) !important;
  }
}

#root > div:not(.dark) .sidebar-shell nav button[style]:hover {
  background-color: rgba(227, 6, 19, 0.12) !important;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
  #root > div:not(.dark) .sidebar-shell nav button[style]:hover {
    background-color: color-mix(in srgb, var(--sav-accent) 14%, #ffffff) !important;
  }
}

#root > div:not(.dark) .legacy-action.bg-\[\#16833A\],
#root > div.dark .legacy-action.bg-\[\#16833A\] {
  background-color: #16833a !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

#root > div:not(.dark) .legacy-action.bg-\[\#16833A\]:hover,
#root > div.dark .legacy-action.bg-\[\#16833A\]:hover {
  background-color: #126f31 !important;
  color: #ffffff !important;
}

#root > div:not(.dark) .document-drop-zone,
#root > div:not(.dark) .drop-zone {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

#root > div:not(.dark) .document-drop-zone:hover,
#root > div:not(.dark) .document-drop-zone:focus,
#root > div:not(.dark) .document-drop-zone:focus-within,
#root > div:not(.dark) .document-drop-zone-active,
#root > div:not(.dark) .drop-zone:hover,
#root > div:not(.dark) .drop-zone:focus,
#root > div:not(.dark) .drop-zone:focus-within,
#root > div:not(.dark) .drop-zone-active {
  background-color: rgba(227, 6, 19, 0.08) !important;
  border-color: var(--sav-accent) !important;
  color: var(--sav-accent) !important;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.1) !important;
  transform: translateY(-1px);
}

@supports (background: color-mix(in srgb, red 10%, white)) {
  #root > div:not(.dark) .document-drop-zone:hover,
  #root > div:not(.dark) .document-drop-zone:focus,
  #root > div:not(.dark) .document-drop-zone:focus-within,
  #root > div:not(.dark) .document-drop-zone-active,
  #root > div:not(.dark) .drop-zone:hover,
  #root > div:not(.dark) .drop-zone:focus,
  #root > div:not(.dark) .drop-zone:focus-within,
  #root > div:not(.dark) .drop-zone-active {
    background-color: color-mix(in srgb, var(--sav-accent) 9%, #ffffff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sav-accent) 12%, transparent) !important;
  }
}

#root > div:not(.dark) .document-drop-zone small,
#root > div:not(.dark) .drop-zone small {
  color: var(--sav-light-muted) !important;
}

#root > div .brand-logo-dark,
#root > div .brand-logo-compact.brand-logo-dark {
  object-fit: contain;
}

#root > div.dark .brand-logo-dark,
#root > div.dark .brand-logo-compact.brand-logo-dark {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
}

main,
main section,
.fluid-card-grid,
.fluid-entity-grid,
.project-list-grid,
.quote-card-grid {
  min-width: 0;
}

.fluid-entity-grid > .entity-card,
.project-list-grid > .project-card,
.quote-card-grid > .quote-card {
  background: var(--sav-light-surface) !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  color: var(--sav-light-text) !important;
  cursor: pointer !important;
  min-height: 214px !important;
  outline: none !important;
  overflow: visible !important;
  padding: 18px !important;
  position: relative !important;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease !important;
}

.fluid-entity-grid > .entity-card:hover,
.fluid-entity-grid > .entity-card:focus-visible,
.fluid-entity-grid > .entity-card:focus-within,
.project-list-grid > .project-card:hover,
.project-list-grid > .project-card:focus-visible,
.project-list-grid > .project-card:focus-within,
.quote-card-grid > .quote-card:hover,
.quote-card-grid > .quote-card:focus-visible,
.quote-card-grid > .quote-card:focus-within {
  background: color-mix(in srgb, var(--sav-accent) 3%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--sav-accent) 42%, var(--sav-light-border)) !important;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.1),
    0 0 0 3px color-mix(in srgb, var(--sav-accent) 10%, transparent) !important;
  transform: translateY(-2px) !important;
}

.fluid-entity-grid > .entity-card h3,
.project-list-grid > .project-card h2,
.quote-card-grid > .quote-card h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
}

.fluid-entity-grid > .entity-card .entity-card-detail-key,
.project-list-grid > .project-card .project-client,
.quote-card-grid > .quote-card .quote-card-meta,
.quote-card-grid > .quote-card .quote-card-gridline {
  color: var(--sav-light-muted) !important;
}

.fluid-entity-grid > .entity-card .project-delete,
.project-list-grid > .project-card .project-delete,
.quote-card-grid > .quote-card .quote-action-trigger {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease !important;
}

.project-card h2,
.project-list-name {
  font-weight: 700 !important;
}

.fluid-entity-grid > .entity-card {
  gap: 14px !important;
  min-height: 214px !important;
}

.fluid-entity-grid > .entity-card h3 {
  color: var(--sav-light-heading) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}

.entity-card-legacy-hidden {
  display: none !important;
}

.entity-card-details {
  display: grid !important;
  gap: 7px !important;
  margin-top: 13px !important;
}

.entity-card-detail-row {
  align-items: start !important;
  display: grid !important;
  gap: 9px !important;
  grid-template-columns: minmax(74px, 0.42fr) minmax(0, 1fr) !important;
  min-width: 0 !important;
}

.entity-card-detail-key {
  color: var(--sav-light-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.entity-card-detail-value {
  color: var(--sav-light-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.sav-purchase-supplier-dropdown {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18) !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 2px !important;
  overflow-y: auto !important;
  padding: 4px !important;
  position: fixed !important;
  z-index: 260 !important;
}

.sav-purchase-supplier-dropdown[hidden] {
  display: none !important;
}

.sav-purchase-supplier-option,
.sav-purchase-supplier-empty {
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: var(--sav-light-text) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  min-height: 28px !important;
  padding: 7px 9px !important;
  text-align: left !important;
  width: 100% !important;
}

.sav-purchase-supplier-option {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
}

.sav-purchase-supplier-option:hover,
.sav-purchase-supplier-option.is-active {
  background: rgba(227, 6, 19, 0.08) !important;
  color: var(--sav-accent) !important;
}

.sav-purchase-supplier-empty {
  color: var(--sav-light-muted) !important;
}

.sav-new-supplier-backdrop {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.34) !important;
  display: flex !important;
  inset: 0 !important;
  justify-content: center !important;
  padding: 24px !important;
  position: fixed !important;
  z-index: 290 !important;
}

.sav-new-supplier-dialog {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.22) !important;
  color: var(--sav-light-text) !important;
  display: grid !important;
  gap: 12px !important;
  max-width: 430px !important;
  padding: 22px !important;
  width: min(100%, 430px) !important;
}

.sav-new-supplier-dialog h2 {
  color: var(--sav-light-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.sav-new-supplier-dialog p {
  color: var(--sav-light-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.sav-new-supplier-dialog strong {
  color: var(--sav-light-heading) !important;
  font-weight: 700 !important;
}

.sav-new-supplier-error {
  color: #b91c1c !important;
  font-size: 12px !important;
  min-height: 0 !important;
}

.sav-new-supplier-actions {
  display: flex !important;
  gap: 9px !important;
  justify-content: flex-end !important;
  margin-top: 4px !important;
}

.sav-new-supplier-actions button {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-height: 36px !important;
  padding: 0 15px !important;
}

.sav-new-supplier-secondary {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  color: var(--sav-light-text) !important;
}

.sav-new-supplier-primary {
  background: var(--sav-accent) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}

.sav-new-supplier-primary:disabled {
  cursor: progress !important;
  opacity: 0.72 !important;
}

.sav-new-supplier-toast {
  background: #111827 !important;
  border-radius: 999px !important;
  bottom: 24px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  left: 50% !important;
  padding: 11px 16px !important;
  position: fixed !important;
  transform: translateX(-50%) !important;
  z-index: 300 !important;
}

.sav-supplier-create-backdrop {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.38) !important;
  display: flex !important;
  inset: 0 !important;
  justify-content: center !important;
  padding: 24px !important;
  position: fixed !important;
  z-index: 300 !important;
}

.sav-supplier-create-dialog {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.24) !important;
  color: var(--sav-light-text) !important;
  max-height: min(820px, calc(100vh - 48px)) !important;
  overflow: hidden !important;
  width: min(100%, 720px) !important;
}

.sav-supplier-create-header,
.sav-supplier-create-footer {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
}

.sav-supplier-create-header {
  border-bottom: 1px solid var(--sav-light-border) !important;
}

.sav-supplier-create-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--sav-light-border) !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

.sav-supplier-create-header h2 {
  color: var(--sav-light-heading) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

.sav-supplier-create-close {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--sav-light-muted) !important;
  display: inline-flex !important;
  font-size: 20px !important;
  height: 34px !important;
  justify-content: center !important;
  width: 34px !important;
}

.sav-supplier-create-close:hover {
  background: #f1f5f9 !important;
  color: var(--sav-light-heading) !important;
}

.sav-supplier-create-body {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-height: calc(100vh - 190px) !important;
  overflow-y: auto !important;
  padding: 20px 22px !important;
}

.sav-supplier-create-wide {
  grid-column: 1 / -1 !important;
}

.sav-supplier-create-field {
  display: grid !important;
  gap: 6px !important;
}

.sav-supplier-create-field span,
.sav-supplier-create-section-title {
  color: var(--sav-light-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.sav-supplier-create-field input,
.sav-supplier-create-field select,
.sav-supplier-create-contact-grid input {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  color: var(--sav-light-text) !important;
  font: 300 14px/1.3 Roboto, Arial, sans-serif !important;
  min-height: 40px !important;
  outline: 0 !important;
  padding: 9px 11px !important;
  width: 100% !important;
}

.sav-supplier-create-field input:focus,
.sav-supplier-create-field select:focus,
.sav-supplier-create-contact-grid input:focus {
  border-color: var(--sav-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sav-accent) 14%, transparent) !important;
}

.sav-supplier-create-contact {
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
}

.sav-supplier-create-contact-grid {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.sav-supplier-create-error {
  color: #b91c1c !important;
  font-size: 12px !important;
  min-height: 16px !important;
}

.sav-supplier-create-secondary,
.sav-supplier-create-primary {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: 38px !important;
  padding: 0 18px !important;
}

.sav-supplier-create-secondary {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  color: var(--sav-light-text) !important;
}

.sav-supplier-create-primary {
  border: 1px solid transparent !important;
  color: #ffffff !important;
}

.sav-supplier-create-primary:disabled {
  cursor: progress !important;
  opacity: 0.72 !important;
}

.sav-forecast-client-dropdown {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18) !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 2px !important;
  overflow-y: auto !important;
  padding: 4px !important;
  position: fixed !important;
  z-index: 260 !important;
}

.sav-forecast-client-dropdown[hidden] {
  display: none !important;
}

.sav-forecast-client-option,
.sav-forecast-client-empty {
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: var(--sav-light-text) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  min-height: 28px !important;
  padding: 7px 9px !important;
  text-align: left !important;
  width: 100% !important;
}

.sav-forecast-client-option {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
}

.sav-forecast-client-option:hover,
.sav-forecast-client-option.is-active {
  background: rgba(227, 6, 19, 0.08) !important;
  color: var(--sav-accent) !important;
}

.sav-forecast-client-empty {
  color: var(--sav-light-muted) !important;
}

.sav-new-client-backdrop {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.34) !important;
  display: flex !important;
  inset: 0 !important;
  justify-content: center !important;
  padding: 24px !important;
  position: fixed !important;
  z-index: 290 !important;
}

.sav-new-client-dialog {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.22) !important;
  color: var(--sav-light-text) !important;
  display: grid !important;
  gap: 12px !important;
  max-width: 430px !important;
  padding: 22px !important;
  width: min(100%, 430px) !important;
}

.sav-new-client-dialog h2 {
  color: var(--sav-light-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.sav-new-client-dialog p {
  color: var(--sav-light-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.sav-new-client-dialog strong {
  color: var(--sav-light-heading) !important;
  font-weight: 700 !important;
}

.sav-new-client-error {
  color: #b91c1c !important;
  font-size: 12px !important;
  min-height: 0 !important;
}

.sav-new-client-actions {
  display: flex !important;
  gap: 9px !important;
  justify-content: flex-end !important;
  margin-top: 4px !important;
}

.sav-new-client-actions button {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-height: 36px !important;
  padding: 0 15px !important;
}

.sav-new-client-secondary {
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  color: var(--sav-light-text) !important;
}

.sav-new-client-primary {
  background: var(--sav-accent) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}

.sav-new-client-primary:disabled {
  cursor: progress !important;
  opacity: 0.72 !important;
}

.pdf-preview-header .pdf-preview-actions {
  align-items: center !important;
  display: inline-flex !important;
  gap: 8px !important;
}

.pdf-preview-header .pdf-remove-button {
  background: #fff1f2 !important;
  border: 1px solid rgba(227, 6, 19, 0.28) !important;
  border-radius: 999px !important;
  color: var(--sav-accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-height: 30px !important;
  padding: 0 12px !important;
}

.pdf-preview-header .pdf-remove-button:hover {
  background: #ffe4e6 !important;
  border-color: rgba(227, 6, 19, 0.42) !important;
}

.entity-list-table,
.project-list-table,
.quote-list-table,
.forecast-card,
.purchase-panel {
  max-width: 100%;
}

.forecast-card,
.purchase-panel {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.purchase-panel {
  scrollbar-gutter: stable;
}

.purchase-grid-header,
.purchase-grid-row,
.purchase-row-details {
  min-width: 1060px;
}

.forecast-card .responsive-table {
  min-width: 820px;
}

.forecast-card .responsive-table th:nth-child(-n + 2),
.forecast-card .responsive-table td:nth-child(-n + 2) {
  text-align: left !important;
}

.forecast-card .responsive-table th:nth-child(n + 3),
.forecast-card .responsive-table td:nth-child(n + 3) {
  text-align: right !important;
}

.forecast-card .responsive-table th:last-child,
.forecast-card .responsive-table td:last-child {
  text-align: center !important;
}

.forecast-card .responsive-table tbody td:first-child {
  position: relative !important;
}

.forecast-card .responsive-table input.sav-forecast-client-input {
  padding-right: 24px !important;
}

.forecast-card .responsive-table input.sav-forecast-client-known {
  border-color: rgba(22, 163, 74, 0.36) !important;
  box-shadow: inset 3px 0 0 rgba(22, 163, 74, 0.62) !important;
}

.forecast-card .responsive-table input.sav-forecast-client-unknown {
  border-color: rgba(148, 163, 184, 0.45) !important;
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.68) !important;
}

.project-modal-backdrop {
  padding: 28px !important;
  z-index: 240 !important;
}

.project-modal {
  width: min(620px, 94vw) !important;
  max-height: calc(100vh - 48px) !important;
  border-radius: 24px !important;
  row-gap: 0 !important;
}

.project-modal-wide {
  width: min(1040px, 94vw) !important;
}

.project-modal-header {
  padding: 24px 30px 20px !important;
}

.project-modal-header h2 {
  font-size: 24px !important;
  line-height: 1.18 !important;
}

.project-modal-body {
  gap: 18px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 24px 30px !important;
}

.project-modal-wide:not(.quote-modal) .project-modal-body {
  align-items: start !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.project-modal-wide:not(.quote-modal) .project-modal-body > label:nth-of-type(5),
.project-modal-wide:not(.quote-modal) .project-modal-body > .document-zone-block {
  grid-column: 1 / -1 !important;
}

.project-modal-wide:not(.quote-modal) textarea {
  min-height: 96px !important;
}

.project-modal label {
  gap: 8px !important;
  font-size: 13px !important;
}

.project-modal > label {
  padding-inline: 30px !important;
}

.project-modal > label:first-of-type {
  margin-top: 24px !important;
}

.project-modal > label + label {
  margin-top: 2px !important;
}

.project-modal input,
.project-modal select {
  min-height: 48px !important;
  border-radius: 16px !important;
  padding-inline: 16px !important;
  font-size: 15px !important;
}

.project-modal select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%2364748B%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
  background-position: right 15px center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px !important;
  line-height: 1.2 !important;
  padding-right: 42px !important;
}

.project-modal textarea {
  min-height: 128px !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
}

.project-modal-footer {
  padding: 20px 30px 24px !important;
}

.project-modal-actions {
  gap: 12px !important;
}

.project-modal-actions button,
.project-modal-footer > button,
.action-button-primary,
.action-button-secondary {
  min-height: 44px;
  padding-inline: 18px;
}

.project-modal > .action-button-primary {
  min-height: 54px !important;
  margin: 10px 30px 30px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
}

.project-modal-backdrop:has(.sav-purchase-project-modal) {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

.sav-purchase-project-modal {
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
  display: grid !important;
  gap: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  width: min(500px, 94vw) !important;
}

.sav-purchase-project-modal .project-modal-header {
  align-items: center !important;
  background: var(--sav-light-bg-soft) !important;
  border-bottom: 1px solid var(--sav-light-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
}

.sav-purchase-project-modal .project-modal-header h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.sav-purchase-project-modal .project-modal-header button {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  height: 34px !important;
  justify-content: center !important;
  width: 34px !important;
}

.sav-purchase-project-modal > label {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 22px 16px !important;
}

.sav-purchase-project-modal > .project-modal-header + label {
  padding-top: 22px !important;
}

.sav-purchase-project-modal > label > span {
  color: var(--sav-light-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.sav-purchase-project-modal select,
.sav-purchase-project-modal input {
  border-radius: 12px !important;
  font-size: 14px !important;
  min-height: 42px !important;
  padding-inline: 13px !important;
}

.sav-purchase-project-modal select {
  background-position: right 13px center !important;
  padding-right: 38px !important;
}

.sav-purchase-project-modal input[readonly] {
  background: var(--sav-light-bg-soft) !important;
  color: var(--sav-light-muted) !important;
  cursor: default !important;
}

.sav-purchase-project-modal > .action-button-primary {
  border-radius: 999px !important;
  justify-self: end !important;
  margin: 2px 22px 22px !important;
  min-height: 42px !important;
  min-width: 136px !important;
  padding-inline: 22px !important;
}

.sav-purchase-project-modal > .action-button-primary:disabled {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
}

#root > div.dark .sav-purchase-project-modal .project-modal-header {
  background: var(--sav-dark-surface-raised) !important;
  border-color: var(--sav-dark-border) !important;
}

#root > div.dark .sav-purchase-project-modal > label > span {
  color: var(--sav-dark-muted) !important;
}

#root > div.dark .sav-purchase-project-modal input[readonly] {
  background: var(--sav-dark-surface-raised) !important;
  color: var(--sav-dark-muted) !important;
}

#root > div.dark .project-modal select {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23CBD5E1%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

/* Dark mode: Google-like dark direction, independent from the OS theme. */
#root > div.dark {
  color-scheme: dark;
}

#root > div.dark .app-bg {
  background:
    radial-gradient(circle at 78% 16%, rgba(138, 180, 248, 0.11), transparent 25%),
    radial-gradient(circle at 52% 52%, rgba(232, 234, 237, 0.06), transparent 30%),
    var(--sav-dark-bg) !important;
  color: var(--sav-dark-text) !important;
}

#root > div.dark [class~="dark:text-slate-100"],
#root > div.dark [class~="dark:text-white"],
#root > div.dark .page-title,
#root > div.dark .dashboard-card-value,
#root > div.dark .project-card h2,
#root > div.dark .quote-card h2,
#root > div.dark .settings-panel h2,
#root > div.dark .settings-panel h3,
#root > div.dark .company-info-card h3,
#root > div.dark .entity-list-name,
#root > div.dark .quote-amount,
#root > div.dark .project-empty strong,
#root > div.dark .quote-empty strong {
  color: var(--sav-dark-heading) !important;
}

#root > div.dark .fluid-entity-grid > .entity-card h3,
#root > div.dark .entity-card-detail-value {
  color: var(--sav-dark-heading) !important;
}

#root > div.dark [class~="dark:text-slate-300"],
#root > div.dark [class~="dark:text-slate-400"],
#root > div.dark .dashboard-card-label,
#root > div.dark .dashboard-card-caption,
#root > div.dark .project-address,
#root > div.dark .project-description,
#root > div.dark .quote-card-meta,
#root > div.dark .quote-card-gridline,
#root > div.dark .entity-list-line,
#root > div.dark .project-list-line,
#root > div.dark .quote-list-line,
#root > div.dark .purchase-empty,
#root > div.dark .project-empty,
#root > div.dark .quote-empty,
#root > div.dark .document-inline-empty {
  color: var(--sav-dark-muted) !important;
}

#root > div.dark .entity-card-detail-key {
  color: var(--sav-dark-muted) !important;
}

body:has(#root > div.dark) .sav-purchase-supplier-dropdown {
  background: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

body:has(#root > div.dark) .sav-purchase-supplier-option {
  color: var(--sav-dark-text) !important;
}

body:has(#root > div.dark) .sav-purchase-supplier-option:hover,
body:has(#root > div.dark) .sav-purchase-supplier-option.is-active {
  background: rgba(227, 6, 19, 0.16) !important;
  color: #ffffff !important;
}

body:has(#root > div.dark) .sav-purchase-supplier-empty {
  color: var(--sav-dark-muted) !important;
}

body:has(#root > div.dark) .sav-new-supplier-dialog {
  background: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

body:has(#root > div.dark) .sav-new-supplier-dialog h2,
body:has(#root > div.dark) .sav-new-supplier-dialog strong {
  color: var(--sav-dark-heading) !important;
}

body:has(#root > div.dark) .sav-new-supplier-dialog p {
  color: var(--sav-dark-muted) !important;
}

body:has(#root > div.dark) .sav-new-supplier-secondary {
  background: var(--sav-dark-surface-soft) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

body:has(#root > div.dark) .sav-supplier-create-dialog {
  background: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

body:has(#root > div.dark) .sav-supplier-create-header,
body:has(#root > div.dark) .sav-supplier-create-footer,
body:has(#root > div.dark) .sav-supplier-create-contact {
  border-color: var(--sav-dark-border) !important;
}

body:has(#root > div.dark) .sav-supplier-create-footer {
  background: var(--sav-dark-surface-soft) !important;
}

body:has(#root > div.dark) .sav-supplier-create-header h2,
body:has(#root > div.dark) .sav-supplier-create-close:hover {
  color: var(--sav-dark-heading) !important;
}

body:has(#root > div.dark) .sav-supplier-create-close,
body:has(#root > div.dark) .sav-supplier-create-field span,
body:has(#root > div.dark) .sav-supplier-create-section-title {
  color: var(--sav-dark-muted) !important;
}

body:has(#root > div.dark) .sav-supplier-create-close:hover {
  background: var(--sav-dark-border) !important;
}

body:has(#root > div.dark) .sav-supplier-create-field input,
body:has(#root > div.dark) .sav-supplier-create-field select,
body:has(#root > div.dark) .sav-supplier-create-contact-grid input,
body:has(#root > div.dark) .sav-supplier-create-secondary {
  background: var(--sav-dark-surface-soft) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

body:has(#root > div.dark) .sav-forecast-client-dropdown {
  background: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

body:has(#root > div.dark) .sav-forecast-client-option {
  color: var(--sav-dark-text) !important;
}

body:has(#root > div.dark) .sav-forecast-client-option:hover,
body:has(#root > div.dark) .sav-forecast-client-option.is-active {
  background: rgba(227, 6, 19, 0.16) !important;
  color: #ffffff !important;
}

body:has(#root > div.dark) .sav-forecast-client-empty {
  color: var(--sav-dark-muted) !important;
}

body:has(#root > div.dark) .sav-new-client-dialog {
  background: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

body:has(#root > div.dark) .sav-new-client-dialog h2,
body:has(#root > div.dark) .sav-new-client-dialog strong {
  color: var(--sav-dark-heading) !important;
}

body:has(#root > div.dark) .sav-new-client-dialog p {
  color: var(--sav-dark-muted) !important;
}

body:has(#root > div.dark) .sav-new-client-secondary {
  background: var(--sav-dark-surface-soft) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

#root > div.dark [class~="dark:bg-slate-800"],
#root > div.dark [class~="dark:bg-slate-900"],
#root > div.dark [class~="dark:bg-slate-950"],
#root > div.dark .sidebar-shell,
#root > div.dark .settings-panel,
#root > div.dark .dashboard-card,
#root > div.dark .entity-card,
#root > div.dark .entity-subcard,
#root > div.dark .entity-list-table,
#root > div.dark .project-card,
#root > div.dark .project-list-table,
#root > div.dark .quote-card,
#root > div.dark .quote-list-table,
#root > div.dark .forecast-card,
#root > div.dark .purchase-panel,
#root > div.dark .purchase-project,
#root > div.dark .company-info-card,
#root > div.dark .company-address-card,
#root > div.dark .document-drop-zone,
#root > div.dark .drop-zone,
#root > div.dark .project-modal,
#root > div.dark .pdf-preview-modal,
#root > div.dark .quote-action-menu {
  background-color: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

#root > div.dark [class~="dark:bg-slate-900/70"] {
  background-color: rgba(41, 42, 45, 0.78) !important;
}

#root > div.dark [class~="dark:border-[#2d3748]"],
#root > div.dark [class~="dark:border-[#3c4043]"],
#root > div.dark [class~="dark:border-slate-700"],
#root > div.dark [class~="dark:border-slate-800"],
#root > div.dark .entity-list-header > span,
#root > div.dark .entity-list-line > span,
#root > div.dark .project-list-header > span,
#root > div.dark .project-list-line > span,
#root > div.dark .project-list-line > div,
#root > div.dark .quote-list-header > span,
#root > div.dark .quote-list-line > span,
#root > div.dark .company-address-row,
#root > div.dark .project-documents-block {
  border-color: var(--sav-dark-border) !important;
}

#root > div.dark .entity-list-header,
#root > div.dark .project-list-header,
#root > div.dark .quote-list-header,
#root > div.dark .purchase-grid-header,
#root > div.dark .responsive-table thead,
#root > div.dark .responsive-table tfoot,
#root > div.dark .company-address-row-header,
#root > div.dark .project-modal-footer,
#root > div.dark .project-modal-header,
#root > div.dark .quote-editor-toolbar,
#root > div.dark .pdf-preview-header {
  background-color: var(--sav-dark-surface-raised) !important;
  color: var(--sav-dark-muted) !important;
  border-color: var(--sav-dark-border) !important;
}

#root > div.dark .entity-list-line:hover,
#root > div.dark .project-list-line:hover,
#root > div.dark .quote-list-line:hover,
#root > div.dark .fluid-entity-grid > .entity-card:hover,
#root > div.dark .fluid-entity-grid > .entity-card:focus-visible,
#root > div.dark .fluid-entity-grid > .entity-card:focus-within,
#root > div.dark .quote-card:hover,
#root > div.dark .quote-card:focus-visible,
#root > div.dark .quote-card:focus-within,
#root > div.dark .project-card:hover,
#root > div.dark .project-card:focus-visible,
#root > div.dark .project-card:focus-within,
#root > div.dark .quote-action-menu button:hover,
#root > div.dark .theme-toggle:hover,
#root > div.dark .project-delete:hover,
#root > div.dark .quote-action-trigger:hover,
#root > div.dark [class~="dark:hover:bg-[#2b3038]"]:hover,
#root > div.dark [class~="dark:hover:bg-slate-800"]:hover {
  background-color: var(--sav-dark-hover) !important;
}

#root > div.dark .fluid-entity-grid > .entity-card,
#root > div.dark .project-list-grid > .project-card,
#root > div.dark .quote-card-grid > .quote-card {
  background: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32) !important;
  color: var(--sav-dark-text) !important;
}

#root > div.dark .fluid-entity-grid > .entity-card:hover,
#root > div.dark .fluid-entity-grid > .entity-card:focus-visible,
#root > div.dark .fluid-entity-grid > .entity-card:focus-within,
#root > div.dark .project-list-grid > .project-card:hover,
#root > div.dark .project-list-grid > .project-card:focus-visible,
#root > div.dark .project-list-grid > .project-card:focus-within,
#root > div.dark .quote-card-grid > .quote-card:hover,
#root > div.dark .quote-card-grid > .quote-card:focus-visible,
#root > div.dark .quote-card-grid > .quote-card:focus-within {
  border-color: color-mix(in srgb, var(--sav-accent) 46%, var(--sav-dark-border)) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(255, 107, 107, 0.12) !important;
  transform: translateY(-2px) !important;
}

#root > div.dark input,
#root > div.dark select,
#root > div.dark textarea,
#root > div.dark .legacy-select,
#root > div.dark .quote-input,
#root > div.dark .supplier-input,
#root > div.dark .ht-input,
#root > div.dark .invoice-amount-cell {
  background-color: var(--sav-dark-surface-soft) !important;
  border-color: var(--sav-dark-border-strong) !important;
  color: var(--sav-dark-text) !important;
}

#root > div.dark input::placeholder,
#root > div.dark textarea::placeholder {
  color: var(--sav-dark-subtle) !important;
}

#root > div.dark option {
  background-color: var(--sav-dark-surface) !important;
  color: var(--sav-dark-text) !important;
}

.sav-filter-select {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease !important;
}

.sav-filter-select.sav-filter-active {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: rgba(227, 6, 19, 0.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2012%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3%203L9%209M9%203L3%209%27%20stroke%3D%27%23E30613%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 12px 12px !important;
  border-color: rgba(227, 6, 19, 0.58) !important;
  box-shadow:
    0 0 0 3px rgba(227, 6, 19, 0.1),
    inset 0 0 0 1px rgba(227, 6, 19, 0.08) !important;
  color: var(--sav-accent) !important;
  font-weight: 600 !important;
  padding-right: 36px !important;
}

#root > div.dark .sav-filter-select.sav-filter-active {
  background-color: rgba(255, 107, 107, 0.12) !important;
  border-color: rgba(255, 107, 107, 0.64) !important;
  box-shadow:
    0 0 0 3px rgba(255, 107, 107, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  color: #ffb3b3 !important;
}

.sav-project-date-filter {
  align-items: center !important;
  display: inline-flex !important;
  position: relative !important;
}

.sav-quote-created-sort-wrap {
  align-items: center !important;
  display: inline-flex !important;
}

.sav-quote-created-sort {
  min-width: 210px !important;
  padding-right: 34px !important;
}

.sav-project-date-input {
  appearance: none !important;
  background: var(--sav-light-surface) !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  color: var(--sav-light-text) !important;
  font-size: 12px !important;
  min-height: 36px !important;
  min-width: 158px !important;
  outline: none !important;
  padding: 0 34px 0 14px !important;
}

.sav-project-date-input:focus,
.sav-project-date-filter.sav-filter-active .sav-project-date-input {
  background-color: rgba(227, 6, 19, 0.05) !important;
  border-color: rgba(227, 6, 19, 0.55) !important;
  color: var(--sav-light-heading) !important;
}

.sav-project-date-clear {
  align-items: center !important;
  background: rgba(227, 6, 19, 0.12) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #e30613 !important;
  display: inline-flex !important;
  font-size: 13px !important;
  height: 20px !important;
  justify-content: center !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
}

.sav-project-date-clear[hidden] {
  display: none !important;
}

.sav-project-date-hidden {
  display: none !important;
}

.sav-project-date-empty {
  border: 1px dashed var(--sav-light-border) !important;
  border-radius: 18px !important;
  color: var(--sav-light-muted) !important;
  margin-top: 14px !important;
  padding: 22px !important;
  text-align: center !important;
}

#root > div.dark .sav-project-date-input {
  background: var(--sav-dark-surface) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

#root > div.dark .sav-project-date-filter.sav-filter-active .sav-project-date-input,
#root > div.dark .sav-project-date-input:focus {
  background-color: rgba(127, 29, 29, 0.24) !important;
  border-color: rgba(248, 113, 113, 0.65) !important;
}

#root > div.dark .sav-project-date-empty {
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-muted) !important;
}

.sav-company-logo-card .document-zone-title,
.sav-company-logo-card .document-file-list,
.company-settings-grid > .company-info-card:nth-child(2):has(.company-logo-preview) .document-zone-title,
.company-settings-grid > .company-info-card:nth-child(2):has(.company-logo-preview) .document-file-list {
  display: none !important;
}

.sav-company-logo-card.sav-company-logo-has-file .document-zone-block,
.company-settings-grid > .company-info-card:nth-child(2):has(.company-logo-preview img) .document-zone-block {
  display: none !important;
}

.sav-company-logo-card:not(.sav-company-logo-has-file) .company-logo-preview,
.company-settings-grid > .company-info-card:nth-child(2):not(:has(.company-logo-preview img)) .company-logo-preview {
  display: none !important;
}

.sav-company-logo-card .company-logo-preview,
.company-settings-grid > .company-info-card:nth-child(2) .company-logo-preview {
  align-items: center !important;
  background: #f8fafd !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 8px !important;
  display: flex !important;
  justify-content: center !important;
  min-height: 164px !important;
  padding: 18px !important;
  position: relative !important;
}

.sav-company-logo-card .company-logo-preview img,
.company-settings-grid > .company-info-card:nth-child(2) .company-logo-preview img {
  display: block !important;
  max-height: 132px !important;
  max-width: min(100%, 280px) !important;
  object-fit: contain !important;
}

.sav-company-logo-card .document-zone-block,
.company-settings-grid > .company-info-card:nth-child(2) .document-zone-block {
  margin-top: 0 !important;
}

.sav-company-logo-card .document-drop-zone,
.company-settings-grid > .company-info-card:nth-child(2) .document-drop-zone {
  border-radius: 8px !important;
  min-height: 164px !important;
}

.sav-company-logo-remove {
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14) !important;
  color: var(--sav-accent) !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: 24px !important;
  justify-content: center !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 24px !important;
}

.sav-company-logo-remove:hover {
  background: #fff1f2 !important;
  border-color: rgba(227, 6, 19, 0.28) !important;
}

#root > div.dark .sav-company-logo-card .company-logo-preview,
#root > div.dark .company-settings-grid > .company-info-card:nth-child(2) .company-logo-preview {
  background: var(--sav-dark-surface-soft) !important;
  border-color: var(--sav-dark-border) !important;
}

#root > div.dark .sav-company-logo-remove {
  background: var(--sav-dark-surface-raised) !important;
  border-color: var(--sav-dark-border) !important;
  color: #ffb3b3 !important;
}

#root > div.dark .theme-toggle,
#root > div.dark .action-button-secondary,
#root > div.dark .project-delete,
#root > div.dark .quote-action-trigger {
  background-color: var(--sav-dark-surface-raised) !important;
  border-color: var(--sav-dark-border) !important;
  color: var(--sav-dark-text) !important;
}

#root > div.dark .settings-tab:not(.settings-tab-active),
#root > div.dark .legacy-action:not(.legacy-action-round):not(.bg-\[\#16833A\]),
#root > div.dark .quote-action-menu button,
#root > div.dark .pdf-preview-close {
  color: var(--sav-dark-text) !important;
}

#root > div.dark .sidebar-shell nav button:not([style]) {
  color: var(--sav-dark-text) !important;
}

#root > div.dark .sidebar-shell nav button:not([style]):hover,
#root > div.dark .settings-tab:not(.settings-tab-active):hover {
  background-color: var(--sav-dark-hover) !important;
  color: var(--sav-dark-heading) !important;
}

@supports (background: color-mix(in srgb, red 10%, black)) {
  #root > div.dark .sidebar-shell nav button:not([style]):hover,
  #root > div.dark .sidebar-shell nav button.dark\:hover\:bg-\[\#2b3038\]:hover,
  #root > div.dark [class~="dark:hover:bg-[#2b3038]"]:hover,
  #root > div.dark [class~="dark:hover:bg-slate-800"]:hover,
  #root > div.dark .settings-tab:not(.settings-tab-active):hover {
    background-color: color-mix(in srgb, var(--sav-accent) 22%, var(--sav-dark-surface-raised)) !important;
    color: var(--sav-dark-heading) !important;
  }
}

#root > div.dark .document-drop-zone,
#root > div.dark .drop-zone,
#root > div.dark .project-empty,
#root > div.dark .quote-empty {
  border-style: dashed;
  background-color: rgba(48, 49, 52, 0.72) !important;
}

#root > div.dark .document-drop-zone,
#root > div.dark .drop-zone {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

#root > div.dark .document-drop-zone:hover,
#root > div.dark .document-drop-zone:focus,
#root > div.dark .document-drop-zone:focus-within,
#root > div.dark .document-drop-zone-active,
#root > div.dark .drop-zone:hover,
#root > div.dark .drop-zone:focus,
#root > div.dark .drop-zone:focus-within,
#root > div.dark .drop-zone-active {
  background-color: rgba(138, 180, 248, 0.14) !important;
  border-color: var(--sav-dark-blue) !important;
  color: var(--sav-dark-blue) !important;
  box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.14) !important;
  transform: translateY(-1px);
}

.quote-status-select,
.quote-status {
  --quote-status-bg: #e5e7eb;
  --quote-status-border: #9ca3af;
  --quote-status-ink: #374151;
  --quote-status-ring: rgba(107, 114, 128, 0.22);
  background-color: var(--quote-status-bg) !important;
  border-color: var(--quote-status-border) !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    inset 0 0 0 1px color-mix(in srgb, var(--quote-status-border) 16%, transparent) !important;
  color: var(--quote-status-ink) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.quote-status-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23374151%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
  background-position: right 11px center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px !important;
  min-height: 28px !important;
  min-width: 104px !important;
  padding: 0 31px 0 16px !important;
  text-align: center !important;
  text-align-last: center !important;
}

.quote-status-select:hover,
.quote-status-select:focus {
  box-shadow:
    0 0 0 3px var(--quote-status-ring),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

.quote-status-select option,
.quote-status option {
  background-color: #ffffff !important;
  color: #202124 !important;
}

.quote-status-draft {
  --quote-status-bg: #f3f4f6;
  --quote-status-border: #9ca3af;
  --quote-status-ink: #374151;
  --quote-status-ring: rgba(107, 114, 128, 0.22);
}

.quote-status-created {
  --quote-status-bg: #f3f4f6;
  --quote-status-border: #9ca3af;
  --quote-status-ink: #374151;
  --quote-status-ring: rgba(107, 114, 128, 0.22);
}

.quote-status-sent {
  --quote-status-bg: #dbeafe;
  --quote-status-border: #60a5fa;
  --quote-status-ink: #1d4ed8;
  --quote-status-ring: rgba(59, 130, 246, 0.22);
}

.quote-status-accepted {
  --quote-status-bg: #dcfce7;
  --quote-status-border: #4ade80;
  --quote-status-ink: #166534;
  --quote-status-ring: rgba(22, 163, 74, 0.22);
}

.quote-status-archived {
  --quote-status-bg: #fee2e2;
  --quote-status-border: #f87171;
  --quote-status-ink: #991b1b;
  --quote-status-ring: rgba(220, 38, 38, 0.22);
}

.quote-status-select.quote-status-draft {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23374151%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

.quote-status-select.quote-status-sent {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%231D4ED8%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

.quote-status-select.quote-status-accepted {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23166534%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

.quote-status-select.quote-status-archived {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23991B1B%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

.quote-status-select option[value="created"],
.quote-status option[value="created"] {
  display: none !important;
}

.quote-action-menu .sav-quote-document-action-hidden {
  display: none !important;
}

#root > div.dark .quote-status-select,
#root > div.dark .quote-status {
  background-color: var(--quote-status-bg) !important;
  border-color: var(--quote-status-border) !important;
  color: var(--quote-status-ink) !important;
}

#root > div.dark .quote-status-select option,
#root > div.dark .quote-status option {
  background-color: #202124 !important;
  color: var(--sav-dark-text) !important;
}

#root > div.dark .quote-status-draft {
  --quote-status-bg: #374151;
  --quote-status-border: #64748b;
  --quote-status-ink: #f3f4f6;
  --quote-status-ring: rgba(148, 163, 184, 0.2);
}

#root > div.dark .quote-status-created {
  --quote-status-bg: #374151;
  --quote-status-border: #64748b;
  --quote-status-ink: #f3f4f6;
  --quote-status-ring: rgba(148, 163, 184, 0.2);
}

#root > div.dark .quote-status-sent {
  --quote-status-bg: #172554;
  --quote-status-border: #3b82f6;
  --quote-status-ink: #bfdbfe;
  --quote-status-ring: rgba(59, 130, 246, 0.22);
}

#root > div.dark .quote-status-accepted {
  --quote-status-bg: #052e16;
  --quote-status-border: #22c55e;
  --quote-status-ink: #bbf7d0;
  --quote-status-ring: rgba(34, 197, 94, 0.22);
}

#root > div.dark .quote-status-archived {
  --quote-status-bg: #3f1d1d;
  --quote-status-border: #dc2626;
  --quote-status-ink: #fecaca;
  --quote-status-ring: rgba(248, 113, 113, 0.2);
}

#root > div.dark .quote-status-select.quote-status-draft {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23F3F4F6%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

#root > div.dark .quote-status-select.quote-status-sent {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23BFDBFE%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

#root > div.dark .quote-status-select.quote-status-accepted {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23BBF7D0%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

#root > div.dark .quote-status-select.quote-status-archived {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3.5%205.25L7%208.75L10.5%205.25%27%20stroke%3D%27%23FECACA%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

#root > div.dark .ht-input-attached {
  color: var(--sav-dark-blue) !important;
}

#root > div.dark .invoice-summary-missing {
  --invoice-bg: #303134;
  --invoice-body-bg: #292a2d;
  --invoice-border: #5f6368;
  --invoice-icon-bg: #3c4043;
  --invoice-ink: #bdc1c6;
}

@media (max-width: 900px) {
  .app-main {
    padding-inline: 18px !important;
  }

  .filter-bar,
  .purchase-actions {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .filter-bar > div,
  .purchase-filters {
    width: 100% !important;
  }

  .legacy-select,
  .purchase-filters select {
    width: 100% !important;
  }

  .purchase-grid-header,
  .purchase-grid-row,
  .purchase-row-details {
    min-width: 980px;
  }
}

@media (max-width: 640px) {
  .app-main {
    padding-inline: 14px !important;
    padding-top: 18px !important;
  }

  .page-title {
    font-size: 26px !important;
  }

  .sav-project-date-filter,
  .sav-project-date-input,
  .sav-quote-created-sort-wrap,
  .sav-quote-created-sort {
    width: 100% !important;
  }

  .project-modal-backdrop {
    align-items: flex-end !important;
    padding: 10px !important;
  }

  .project-modal,
  .project-modal-wide {
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 22px 22px 14px 14px !important;
  }

  .project-modal-header,
  .project-modal-body,
  .project-modal-footer {
    padding-inline: 18px !important;
  }

  .project-modal-wide:not(.quote-modal) .project-modal-body {
    grid-template-columns: 1fr !important;
  }

  .project-modal-wide:not(.quote-modal) .project-modal-body > label,
  .project-modal-wide:not(.quote-modal) .project-modal-body > .document-zone-block {
    grid-column: 1 / -1 !important;
  }

  .project-modal > label {
    padding-inline: 18px !important;
  }

  .project-modal > .action-button-primary {
    margin-inline: 18px !important;
    margin-bottom: 20px !important;
  }

  .project-modal-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .project-modal-actions {
    flex-direction: column-reverse !important;
    width: 100% !important;
  }

  .project-modal-actions button,
  .project-modal-footer > button {
    width: 100% !important;
  }

  .purchase-grid-header,
  .purchase-grid-row,
  .purchase-row-details {
    min-width: 900px;
  }
}

/* Table fitting: every data grid stays inside its visible area. */
.entity-list-table,
.project-list-table,
.quote-list-table,
.forecast-card,
.purchase-panel,
.company-address-card {
  container-type: inline-size;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.entity-list-row,
.entity-list-row-supplier,
.project-list-row,
.quote-list-row,
.company-address-row,
.purchase-grid-header,
.purchase-grid-row,
.purchase-row-details,
.purchase-empty {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.entity-list-row {
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 1.15fr)
    minmax(0, 0.68fr)
    minmax(0, 0.62fr)
    minmax(0, 0.88fr)
    minmax(0, 0.98fr)
    minmax(0, 0.74fr)
    minmax(0, 1fr) !important;
}

.entity-list-row-supplier {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.72fr)
    minmax(0, 1.05fr)
    minmax(0, 0.58fr)
    minmax(0, 0.58fr)
    minmax(0, 0.78fr)
    minmax(0, 0.92fr)
    minmax(0, 0.68fr)
    minmax(0, 0.95fr) !important;
}

.project-list-row {
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.92fr)
    minmax(0, 1.2fr)
    minmax(0, 1.45fr)
    minmax(0, 1fr)
    minmax(0, 0.42fr) !important;
}

.quote-list-row {
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr)
    minmax(0, 0.9fr)
    minmax(0, 0.9fr)
    minmax(0, 0.7fr)
    minmax(0, 0.7fr)
    minmax(0, 0.7fr)
    minmax(0, 0.8fr)
    minmax(0, 0.92fr)
    minmax(0, 0.46fr) !important;
}

.company-address-row {
  grid-template-columns:
    minmax(0, 0.72fr)
    minmax(0, 1.25fr)
    minmax(0, 0.4fr)
    minmax(0, 0.34fr) !important;
}

.purchase-grid-header,
.purchase-grid-row,
.purchase-row-details {
  grid-template-columns:
    minmax(0, 0.44fr)
    minmax(0, 1.08fr)
    minmax(0, 1.08fr)
    minmax(0, 0.72fr)
    repeat(5, minmax(0, 0.86fr))
    minmax(0, 0.68fr)
    minmax(0, 0.8fr)
    minmax(0, 0.34fr) !important;
  gap: clamp(1px, 0.28cqw, 3px) !important;
}

.entity-list-header,
.entity-list-line,
.project-list-header,
.project-list-line,
.quote-list-header,
.quote-list-line,
.company-address-row,
.purchase-grid-header,
.purchase-grid-row,
.purchase-row-details,
.responsive-table {
  font-size: clamp(7px, 1.02cqw, 12px) !important;
}

.entity-list-header,
.project-list-header,
.quote-list-header,
.purchase-grid-header {
  font-size: clamp(6.5px, 0.9cqw, 10px) !important;
}

.entity-list-header > span,
.entity-list-line > span,
.entity-list-line > div,
.project-list-header > span,
.project-list-line > span,
.project-list-line > div,
.quote-list-header > span,
.quote-list-line > span,
.company-address-row > span,
.purchase-grid-header > *,
.purchase-grid-row > *,
.purchase-row-details > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.entity-list-header > span,
.entity-list-line > span,
.entity-list-line > div,
.project-list-header > span,
.project-list-line > span,
.project-list-line > div,
.quote-list-header > span,
.quote-list-line > span,
.company-address-row > span {
  line-height: 1.25 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.purchase-grid-header > *,
.purchase-grid-row > *,
.purchase-row-details > * {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.entity-list-header > span,
.entity-list-line > span,
.entity-list-line > div,
.project-list-header > span,
.project-list-line > span,
.project-list-line > div,
.quote-list-header > span,
.quote-list-line > span,
.company-address-row > span {
  gap: clamp(2px, 0.5cqw, 5px) !important;
  min-height: clamp(20px, 3.2cqw, 34px) !important;
  padding-inline: clamp(2px, 0.72cqw, 8px) !important;
}

.entity-list-line,
.project-list-line,
.quote-list-line,
.company-address-row {
  align-items: stretch !important;
}

.entity-list-line > span,
.entity-list-line > div,
.project-list-line > span,
.project-list-line > div,
.quote-list-line > span,
.company-address-row > span {
  align-items: center !important;
  display: flex !important;
}

.entity-list-documents,
.project-list-documents,
.document-inline-list,
.document-inline-item,
.document-inline-item span {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.document-inline-list,
.document-inline-item {
  flex-wrap: wrap !important;
}

.project-list-actions,
.quote-actions-cell,
.quote-list-line > .quote-actions-cell {
  overflow: visible !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.fluid-entity-grid > .entity-card,
.project-card,
.quote-card {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.fluid-card-grid > *,
.fluid-entity-grid > .entity-card,
.project-list-grid > .project-card,
.quote-card-grid > .quote-card,
.entity-list-stack,
.entity-list-stack-item,
.entity-list-static,
.entity-documents-block,
.project-documents-block,
.quote-card-meta,
.quote-card-gridline {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.fluid-entity-grid > .entity-card h3,
.fluid-entity-grid > .entity-card p,
.fluid-entity-grid > .entity-card span,
.project-card h2,
.project-card p,
.project-card span,
.quote-card h2,
.quote-card p,
.quote-card span,
.quote-card-gridline > *,
.entity-list-stack-item > *,
.entity-list-static,
.document-file-row,
.document-file-row span,
.document-file-list,
.entity-documents-block *,
.project-documents-block * {
  min-width: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.fluid-entity-grid > .entity-card button,
.project-card button,
.quote-card button,
.quote-action-trigger,
.quote-actions button,
.document-inline-item svg,
.document-file-row svg {
  flex: 0 0 auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.purchase-grid-header {
  padding: clamp(5px, 0.95cqw, 11px) clamp(5px, 1.1cqw, 12px) !important;
}

.purchase-grid-row {
  padding: clamp(6px, 1.05cqw, 12px) !important;
}

.purchase-row-details {
  min-height: clamp(38px, 4.8cqw, 52px) !important;
  padding: clamp(3px, 0.5cqw, 4px) clamp(4px, 0.75cqw, 8px) !important;
}

.purchase-grid-row input,
.purchase-row-details input,
.invoice-amount-cell,
.invoice-detail-cell input,
.ht-input,
.supplier-input,
.quote-input {
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: inherit !important;
}

.purchase-grid-row input,
.purchase-row-details input {
  height: clamp(18px, 2.45cqw, 24px) !important;
  padding-inline: clamp(2px, 0.58cqw, 6px) !important;
}

.invoice-cell,
.invoice-summary {
  min-width: 0 !important;
  padding: clamp(3px, 0.75cqw, 8px) !important;
}

.invoice-inline,
.invoice-detail-cell {
  min-width: 0 !important;
  gap: clamp(1px, 0.28cqw, 4px) !important;
}

.invoice-inline input {
  flex-basis: clamp(22px, 4.2cqw, 42px) !important;
  width: clamp(22px, 4.2cqw, 42px) !important;
}

.pdf-icon,
.paid-pill,
.row-expand,
.project-collapse {
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

.responsive-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}

.responsive-table th,
.responsive-table td {
  box-sizing: border-box !important;
  max-width: none !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  padding-inline: clamp(2px, 0.72cqw, 12px) !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.responsive-table input {
  max-width: 100% !important;
}

.company-address-card {
  border-radius: 14px !important;
  padding: 14px 16px !important;
}

.company-address-title {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.company-address-title h3 {
  font-size: 15px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.company-address-title button {
  align-items: center !important;
  background: rgba(227, 6, 19, 0.06) !important;
  border: 1px solid rgba(227, 6, 19, 0.18) !important;
  border-radius: 999px !important;
  color: var(--sav-accent) !important;
  display: inline-flex !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
}

.company-address-title button svg {
  height: 14px !important;
  width: 14px !important;
}

.company-address-table {
  border: 1px solid var(--sav-light-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.company-address-row {
  grid-template-columns: minmax(110px, 0.74fr) minmax(0, 2fr) 52px 38px !important;
  min-height: 36px !important;
}

.company-address-row-header {
  min-height: 26px !important;
}

.company-address-row + .company-address-row {
  border-top: 1px solid var(--sav-light-border) !important;
}

.company-address-row > span {
  min-height: 36px !important;
  padding: 3px 6px !important;
}

.company-address-row-header > span {
  align-items: center !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  justify-content: flex-start !important;
  min-height: 26px !important;
  padding-block: 2px !important;
  text-transform: uppercase !important;
}

.company-address-row-header > span:nth-child(3),
.company-address-row-header > span:nth-child(4),
.company-address-default-cell,
.company-address-actions {
  justify-content: center !important;
  text-align: center !important;
}

.company-address-row input,
.company-address-row textarea {
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
}

.company-address-row textarea {
  height: 30px !important;
  overflow: hidden !important;
  resize: none !important;
}

.company-address-row textarea:focus {
  height: 54px !important;
  overflow-y: auto !important;
}

.company-default-pill {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-height: 24px !important;
  min-width: 36px !important;
  padding: 0 8px !important;
}

.company-address-actions button {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  height: 26px !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 26px !important;
}

#root > div.dark .company-address-table,
#root > div.dark .company-address-row + .company-address-row {
  border-color: var(--sav-dark-border) !important;
}

#root > div.dark .company-address-title button {
  background: rgba(255, 107, 107, 0.12) !important;
  border-color: rgba(255, 107, 107, 0.26) !important;
  color: #ffb3b3 !important;
}

@media (max-width: 640px) {
  .entity-list-header,
  .entity-list-line,
  .project-list-header,
  .project-list-line,
  .quote-list-header,
  .quote-list-line,
  .company-address-row,
  .purchase-grid-header,
  .purchase-grid-row,
  .purchase-row-details,
  .responsive-table {
    font-size: clamp(6px, 1.9vw, 9px) !important;
  }

  .purchase-grid-header,
  .purchase-grid-row,
  .purchase-row-details {
    gap: 1px !important;
  }

  .purchase-grid-header,
  .purchase-grid-row {
    padding-inline: 4px !important;
  }
}

/* Achats: readable responsive grid, with compact cards below table width. */
.purchase-panel {
  --purchase-grid-columns:
    minmax(0, 0.38fr)
    minmax(0, 1.2fr)
    minmax(0, 1.2fr)
    minmax(0, 1.08fr)
    repeat(5, minmax(0, 1.02fr))
    minmax(0, 0.9fr)
    minmax(0, 1.2fr)
    minmax(0, 0.32fr);
}

.purchase-panel .purchase-grid-header,
.purchase-panel .purchase-grid-row,
.purchase-panel .purchase-row-details {
  grid-template-columns: var(--purchase-grid-columns) !important;
  column-gap: clamp(3px, 0.34cqw, 5px) !important;
  overflow: hidden !important;
}

.purchase-panel .purchase-grid-header {
  align-items: stretch !important;
  background-color: var(--sav-light-bg-soft) !important;
  min-height: 36px !important;
  padding: 0 clamp(7px, 0.78cqw, 10px) !important;
}

.purchase-panel .purchase-grid-header > span {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding-inline: 2px !important;
}

.purchase-panel .purchase-grid-header > span:nth-child(2),
.purchase-panel .purchase-grid-header > span:nth-child(3) {
  justify-content: flex-start !important;
}

.purchase-panel .purchase-project-header {
  grid-template-columns: 34px minmax(105px, 1.15fr) minmax(0, 4.9fr) minmax(82px, 0.8fr) !important;
  gap: clamp(5px, 0.65cqw, 10px) !important;
  min-height: 48px !important;
  overflow: hidden !important;
  padding: 6px 10px !important;
}

.purchase-panel .project-collapse {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

.purchase-panel .project-drag {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.purchase-panel .project-title-group {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.purchase-panel .project-title,
.purchase-panel .project-client-input {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.purchase-panel .project-subtotals {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px clamp(7px, 0.86cqw, 12px) !important;
  grid-column: 3 !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.purchase-panel .project-metric {
  align-items: baseline !important;
  display: inline-flex !important;
  flex: 0 1 auto !important;
  gap: 3px !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.purchase-panel .project-metric > span,
.purchase-panel .project-metric > strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.purchase-panel .project-add-invoice {
  grid-column: 4 !important;
  justify-self: end !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-inline: clamp(8px, 0.88cqw, 12px) !important;
  white-space: nowrap !important;
}

.purchase-panel .purchase-grid-row {
  align-items: center !important;
  min-height: 45px !important;
  padding: clamp(5px, 0.68cqw, 8px) clamp(7px, 0.78cqw, 10px) !important;
}

.purchase-panel .purchase-grid-row > * {
  align-self: center !important;
}

.purchase-panel .ht-cell {
  align-items: center !important;
  display: grid !important;
  gap: 2px !important;
  grid-template-columns: minmax(0, 1fr) clamp(15px, 1.55cqw, 18px) !important;
  min-width: 0 !important;
}

.purchase-panel .supplier-input,
.purchase-panel .ht-input {
  box-sizing: border-box !important;
  height: clamp(22px, 2.3cqw, 26px) !important;
  overflow: hidden !important;
  padding-inline: clamp(4px, 0.55cqw, 7px) !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

.purchase-panel .ht-input,
.purchase-panel .invoice-amount-cell {
  text-align: right !important;
}

.purchase-panel .invoice-summary {
  align-items: stretch !important;
  border-radius: 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(17px, 1.75cqw, 21px) !important;
  min-height: clamp(24px, 2.55cqw, 29px) !important;
  overflow: hidden !important;
  padding: 0 0 0 clamp(2px, 0.34cqw, 4px) !important;
}

.purchase-panel .invoice-summary-empty {
  min-height: 24px !important;
}

.purchase-panel .invoice-summary .invoice-amount-cell {
  box-sizing: border-box !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 0 2px 0 0 !important;
  width: 100% !important;
}

.purchase-panel .invoice-summary .pdf-icon,
.purchase-panel .ht-cell .pdf-icon {
  height: 100% !important;
  min-height: 18px !important;
  width: 100% !important;
}

.purchase-panel .invoice-summary .pdf-icon {
  background: var(--invoice-bg) !important;
  justify-content: flex-end !important;
  padding-right: 1px !important;
}

.purchase-panel .invoice-summary .pdf-icon::before {
  left: -14px !important;
  width: 16px !important;
}

.purchase-panel .invoice-summary .pdf-icon svg {
  transform: translateX(-2px) !important;
}

.purchase-panel .invoice-summary .pdf-icon svg,
.purchase-panel .ht-cell .pdf-icon svg,
.purchase-panel .row-expand svg,
.purchase-panel .project-collapse svg,
.purchase-panel .project-add-invoice svg {
  flex: 0 0 auto !important;
}

.purchase-panel .purchase-total {
  align-self: center !important;
  display: grid !important;
  font-size: clamp(12.5px, 1.08cqw, 13.5px) !important;
  font-weight: 600 !important;
  height: clamp(24px, 2.55cqw, 29px) !important;
  justify-self: stretch !important;
  line-height: 1 !important;
  min-height: clamp(24px, 2.55cqw, 29px) !important;
  overflow: hidden !important;
  padding: 1px 2px 0 0 !important;
  place-items: center end !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  transform: translateY(4px) !important;
  width: 100% !important;
}

.purchase-panel .purchase-total span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.purchase-panel .purchase-rests {
  display: grid !important;
  gap: 1px !important;
  justify-self: stretch !important;
  line-height: 1.12 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
  width: 100% !important;
}

.purchase-panel .purchase-rests > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.purchase-panel .row-expand {
  height: clamp(20px, 2.35cqw, 24px) !important;
  justify-self: center !important;
  width: clamp(20px, 2.35cqw, 24px) !important;
}

.purchase-panel .invoice-detail-cell {
  overflow: hidden !important;
}

.purchase-panel .invoice-detail-cell label {
  grid-template-columns: minmax(18px, 0.45fr) minmax(0, 1fr) !important;
  min-width: 0 !important;
}

.purchase-panel .invoice-detail-cell input,
.purchase-panel .paid-pill {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

#root > div.dark .purchase-panel .purchase-grid-header {
  background-color: var(--sav-dark-surface-raised) !important;
}

@container (max-width: 920px) {
  .purchase-panel .purchase-grid-header {
    display: none !important;
  }

  .purchase-panel .purchase-project-header {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
  }

  .purchase-panel .project-drag {
    display: none !important;
  }

  .purchase-panel .project-title-group {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .purchase-panel .project-subtotals {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
  }

  .purchase-panel .project-add-invoice {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .purchase-panel .purchase-grid-row {
    grid-template-columns: 18px repeat(5, minmax(0, 1fr)) 24px !important;
    grid-template-rows: auto auto auto !important;
    min-height: 0 !important;
    row-gap: 7px !important;
  }

  .purchase-panel .purchase-grid-row > .drag-handle {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .purchase-panel .purchase-row-project-slot {
    display: none !important;
  }

  .purchase-panel .purchase-grid-row > .supplier-input {
    grid-column: 2 / span 2 !important;
    grid-row: 1 !important;
  }

  .purchase-panel .purchase-grid-row > .ht-cell {
    grid-column: 4 / span 3 !important;
    grid-row: 1 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(5) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(6) {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(7) {
    grid-column: 4 !important;
    grid-row: 2 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(8) {
    grid-column: 5 !important;
    grid-row: 2 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(9) {
    grid-column: 6 !important;
    grid-row: 2 !important;
  }

  .purchase-panel .purchase-grid-row > .purchase-total {
    grid-column: 2 / span 2 !important;
    grid-row: 3 !important;
    text-align: left !important;
  }

  .purchase-panel .purchase-grid-row > .purchase-rests {
    grid-column: 4 / span 3 !important;
    grid-row: 3 !important;
  }

  .purchase-panel .purchase-grid-row > .row-expand {
    grid-column: 7 !important;
    grid-row: 1 !important;
  }

  .purchase-panel .purchase-row-details {
    grid-template-columns: 18px repeat(5, minmax(0, 1fr)) 24px !important;
    min-height: 0 !important;
    row-gap: 7px !important;
  }

  .purchase-panel .details-spacer {
    display: none !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(2) {
    grid-column: 2 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(3) {
    grid-column: 3 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(4) {
    grid-column: 4 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(5) {
    grid-column: 5 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(6) {
    grid-column: 6 !important;
  }

  .purchase-panel .purchase-row-details > .delete-icon {
    grid-column: 7 !important;
  }
}

@container (max-width: 560px) {
  .purchase-panel .purchase-project-header {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  .purchase-panel .project-add-invoice {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin-top: 4px !important;
  }

  .purchase-panel .project-subtotals {
    grid-column: 2 !important;
  }

  .purchase-panel .purchase-grid-row {
    grid-template-columns: 18px minmax(0, 1fr) 24px !important;
    grid-template-rows: repeat(10, auto) !important;
  }

  .purchase-panel .purchase-grid-row > .supplier-input {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .purchase-panel .purchase-grid-row > .ht-cell {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .purchase-panel .purchase-grid-row > .row-expand {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(5),
  .purchase-panel .purchase-grid-row > :nth-child(6),
  .purchase-panel .purchase-grid-row > :nth-child(7),
  .purchase-panel .purchase-grid-row > :nth-child(8),
  .purchase-panel .purchase-grid-row > :nth-child(9),
  .purchase-panel .purchase-grid-row > .purchase-total,
  .purchase-panel .purchase-grid-row > .purchase-rests {
    grid-column: 2 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(5) {
    grid-row: 3 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(6) {
    grid-row: 4 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(7) {
    grid-row: 5 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(8) {
    grid-row: 6 !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(9) {
    grid-row: 7 !important;
  }

  .purchase-panel .purchase-grid-row > .purchase-total {
    grid-row: 8 !important;
  }

  .purchase-panel .purchase-grid-row > .purchase-rests {
    grid-row: 9 !important;
    text-align: left !important;
  }

  .purchase-panel .invoice-summary-empty {
    display: none !important;
  }

  .purchase-panel .purchase-row-details {
    grid-template-columns: 18px minmax(0, 1fr) 24px !important;
  }

  .purchase-panel .purchase-row-details > .invoice-detail-cell {
    grid-column: 2 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(2) {
    grid-row: 1 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(3) {
    grid-row: 2 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(4) {
    grid-row: 3 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(5) {
    grid-row: 4 !important;
  }

  .purchase-panel .purchase-row-details > :nth-child(6) {
    grid-row: 5 !important;
  }

  .purchase-panel .purchase-row-details > .delete-icon {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}

/* Final Achats tuning: align project totals with amount columns and remove the
   reserved scrollbar gutter that left a white strip at the far right. */
.purchase-panel {
  scrollbar-gutter: auto !important;
}

.quote-list-table,
.quote-list-row,
.quote-list-line,
.quote-list-line > .quote-actions-cell,
.quote-list-line .quote-actions {
  overflow: visible !important;
}

.quote-list-line {
  position: relative !important;
}

.quote-list-line:has(.quote-action-menu) {
  z-index: 70 !important;
}

.quote-list-line > .quote-actions-cell {
  isolation: isolate;
  position: relative !important;
  z-index: auto !important;
}

.quote-list-line:has(.quote-action-menu) > .quote-actions-cell {
  z-index: 75 !important;
}

.quote-action-menu {
  z-index: 140 !important;
}

.quote-action-trigger,
#root > div:not(.dark) .quote-action-trigger,
#root > div.dark .quote-action-trigger {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.quote-action-trigger:hover,
.quote-action-trigger:active,
.quote-action-trigger[aria-expanded="true"],
#root > div:not(.dark) .quote-action-trigger:hover,
#root > div:not(.dark) .quote-action-trigger:active,
#root > div:not(.dark) .quote-action-trigger[aria-expanded="true"],
#root > div.dark .quote-action-trigger:hover,
#root > div.dark .quote-action-trigger:active,
#root > div.dark .quote-action-trigger[aria-expanded="true"] {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.quote-action-trigger:focus-visible {
  background-color: transparent !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sav-accent) 28%, transparent) !important;
}

.quote-export-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, 0.34);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 180;
}

.quote-export-dialog {
  background: #ffffff;
  border: 1px solid var(--sav-light-border);
  border-radius: 8px;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22);
  color: var(--sav-light-text);
  display: grid;
  gap: 12px;
  max-width: 340px;
  padding: 20px;
  width: min(100%, 340px);
}

.quote-export-dialog h2 {
  color: var(--sav-light-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.quote-export-dialog p {
  color: var(--sav-light-muted);
  font-size: 13px;
}

.quote-export-dialog div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.quote-export-dialog button {
  border: 1px solid var(--sav-light-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  min-height: 34px;
  padding-inline: 14px;
}

.quote-export-dialog button[data-export="pdf"],
.quote-export-dialog button[data-export="excel"] {
  background: var(--sav-accent);
  border-color: transparent;
  color: #ffffff;
}

#root > div.dark ~ .quote-export-backdrop .quote-export-dialog,
#root > div.dark .quote-export-dialog {
  background: var(--sav-dark-surface);
  border-color: var(--sav-dark-border);
  color: var(--sav-dark-text);
}

.sav-email-draft-toast {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  bottom: 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 16px;
  position: fixed;
  right: 24px;
  z-index: 320;
}

.sav-quote-duplicate-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, 0.36);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 260;
}

.sav-quote-duplicate-dialog {
  background: #ffffff;
  border: 1px solid var(--sav-light-border);
  border-radius: 8px;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.24);
  color: var(--sav-light-text);
  display: grid;
  gap: 16px;
  max-width: 440px;
  padding: 22px;
  width: min(100%, 440px);
}

.sav-quote-duplicate-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.sav-quote-duplicate-header span {
  color: var(--sav-light-muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sav-quote-duplicate-header strong {
  color: var(--sav-light-heading);
  display: block;
  font-size: 18px;
  line-height: 1.25;
  margin-top: 4px;
}

.sav-quote-duplicate-close {
  align-items: center;
  border: 1px solid var(--sav-light-border);
  border-radius: 999px;
  color: var(--sav-light-muted);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.sav-quote-duplicate-dialog label {
  display: grid;
  gap: 7px;
}

.sav-quote-duplicate-dialog label span {
  color: var(--sav-light-heading);
  font-size: 12px;
  font-weight: 800;
}

.sav-quote-duplicate-dialog select {
  background: #ffffff;
  border: 1px solid var(--sav-light-border);
  border-radius: 8px;
  color: var(--sav-light-text);
  min-height: 42px;
  padding: 0 12px;
}

.sav-quote-duplicate-help {
  color: var(--sav-light-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sav-quote-duplicate-error {
  color: #dc2626;
  font-size: 13px;
  min-height: 18px;
}

.sav-quote-duplicate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.sav-quote-duplicate-actions button {
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  padding: 0 16px;
}

.sav-quote-duplicate-secondary {
  border: 1px solid var(--sav-light-border);
  color: var(--sav-light-text);
}

.sav-quote-duplicate-primary {
  background: var(--sav-accent);
  color: #ffffff;
}

.sav-quote-duplicate-primary:disabled {
  cursor: wait;
  opacity: 0.68;
}

#root > div.dark ~ .sav-quote-duplicate-backdrop .sav-quote-duplicate-dialog,
#root > div.dark .sav-quote-duplicate-dialog {
  background: var(--sav-dark-surface);
  border-color: var(--sav-dark-border);
  color: var(--sav-dark-text);
}

#root > div.dark ~ .sav-quote-duplicate-backdrop .sav-quote-duplicate-header strong,
#root > div.dark .sav-quote-duplicate-header strong,
#root > div.dark ~ .sav-quote-duplicate-backdrop .sav-quote-duplicate-dialog label span,
#root > div.dark .sav-quote-duplicate-dialog label span {
  color: var(--sav-dark-heading);
}

#root > div.dark ~ .sav-quote-duplicate-backdrop .sav-quote-duplicate-dialog select,
#root > div.dark .sav-quote-duplicate-dialog select {
  background: #202124;
  border-color: var(--sav-dark-border);
  color: var(--sav-dark-text);
}

.sav-quote-delete-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, 0.38);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 270;
}

.sav-quote-delete-dialog {
  background: #ffffff;
  border: 1px solid var(--sav-light-border);
  border-radius: 8px;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.24);
  color: var(--sav-light-text);
  display: grid;
  gap: 16px;
  max-width: 440px;
  padding: 22px;
  width: min(100%, 440px);
}

.sav-quote-delete-header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.sav-quote-delete-header span {
  color: #dc2626;
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sav-quote-delete-header strong {
  color: var(--sav-light-heading);
  display: block;
  font-size: 18px;
  line-height: 1.25;
  margin-top: 4px;
}

.sav-quote-delete-close {
  align-items: center;
  border: 1px solid var(--sav-light-border);
  border-radius: 999px;
  color: var(--sav-light-muted);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.sav-quote-delete-help {
  color: var(--sav-light-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sav-quote-delete-error {
  color: #dc2626;
  font-size: 13px;
  min-height: 18px;
}

.sav-quote-delete-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.sav-quote-delete-actions button {
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  padding: 0 16px;
}

.sav-quote-delete-secondary {
  border: 1px solid var(--sav-light-border);
  color: var(--sav-light-text);
}

.sav-quote-delete-primary {
  background: #dc2626;
  color: #ffffff;
}

.sav-quote-delete-primary:disabled {
  cursor: wait;
  opacity: 0.68;
}

#root > div.dark ~ .sav-quote-delete-backdrop .sav-quote-delete-dialog,
#root > div.dark .sav-quote-delete-dialog {
  background: var(--sav-dark-surface);
  border-color: var(--sav-dark-border);
  color: var(--sav-dark-text);
}

#root > div.dark ~ .sav-quote-delete-backdrop .sav-quote-delete-header strong,
#root > div.dark .sav-quote-delete-header strong {
  color: var(--sav-dark-heading);
}

.quote-editor-shell {
  background: #eef1f5 !important;
}

.sav-quote-editor-toolbar {
  align-items: center !important;
  display: flex !important;
  gap: 14px !important;
}

.sav-quote-save-controls {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-left: auto;
  margin-right: 18px;
}

.sav-quote-export-actions {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--sav-light-border);
  border-radius: 999px;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
}

.sav-quote-toolbar-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--sav-light-heading);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.sav-quote-toolbar-button:hover {
  background: #f8fafc;
  color: var(--sav-accent);
  transform: translateY(-1px);
}

.sav-quote-save-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--sav-light-border);
  border-radius: 999px;
  color: var(--sav-light-heading);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sav-quote-save-button::before {
  background: #94a3b8;
  border-radius: 999px;
  content: "";
  height: 8px;
  width: 8px;
}

.sav-quote-save-button:hover {
  border-color: color-mix(in srgb, var(--sav-accent) 34%, var(--sav-light-border));
  transform: translateY(-1px);
}

.sav-quote-save-button[data-save-state="pending"] {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.sav-quote-save-button[data-save-state="pending"]::before {
  background: #f97316;
}

.sav-quote-save-button[data-save-state="saving"] {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  cursor: progress;
}

.sav-quote-save-button[data-save-state="saving"]::before {
  animation: sav-save-pulse 0.85s ease-in-out infinite;
  background: #2563eb;
}

.sav-quote-save-button[data-save-state="saved"] {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.sav-quote-save-button[data-save-state="saved"]::before {
  background: #16a34a;
}

.sav-quote-save-status {
  color: var(--sav-light-muted);
  font-size: 11px;
  min-width: 128px;
  white-space: nowrap;
}

@keyframes sav-save-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.quote-editor-canvas {
  background: #eef1f5 !important;
  padding: 42px 292px 42px 24px !important;
}

.quote-document-page.sav-quote-document-host {
  background: #ffffff !important;
  color: #202124 !important;
  min-height: var(--sav-page-render-height, var(--sav-page-height, 1123px)) !important;
  overflow: visible !important;
  position: relative !important;
  width: var(--sav-page-width, 794px) !important;
}

.sav-doc-page-inner {
  min-height: var(--sav-page-render-height, var(--sav-page-height, 1123px));
  position: relative;
  width: 100%;
}

.sav-doc-loading,
.sav-doc-error {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 13px;
  justify-content: center;
  min-height: 280px;
}

.sav-doc-error {
  color: #b91c1c;
}

.sav-doc-block {
  box-sizing: border-box;
  position: absolute;
  white-space: normal;
}

.sav-doc-block.is-selected {
  outline: 1px solid color-mix(in srgb, var(--sav-accent) 78%, white);
  outline-offset: 2px;
}

.sav-block-content {
  height: 100%;
  min-height: inherit;
  outline: none;
  overflow-wrap: anywhere;
  padding: 2px;
  white-space: pre-wrap;
  width: 100%;
}

.sav-image-block {
  align-items: center;
  display: flex;
  justify-content: center;
}

.sav-image-block img {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

.sav-shape-block {
  min-height: 1px !important;
}

.sav-doc-footer {
  align-items: center;
  color: #666666;
  display: grid;
  font-size: 9px;
  gap: 1px;
  grid-template-columns: 1fr 52px;
  left: 48px;
  line-height: 1.28;
  position: absolute;
  text-align: center;
  width: 698px;
  z-index: 1;
}

.sav-doc-footer span {
  grid-column: 1 / 2;
}

.sav-doc-footer strong:last-child {
  align-self: center;
  color: #666666;
  font-size: 10px;
  font-weight: 400;
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  justify-self: end;
}

.sav-page-break-guide {
  border-top: 1px dashed #cbd5e1;
  left: 0;
  opacity: 0.7;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.sav-alignment-guide {
  background: rgba(26, 115, 232, 0.72);
  box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.16);
  pointer-events: none;
  position: absolute;
  z-index: 120;
}

.sav-alignment-guide-vertical {
  bottom: 0;
  top: 0;
  width: 1px;
}

.sav-alignment-guide-horizontal {
  height: 1px;
  left: 0;
  right: 0;
}

.sav-block-grip {
  background: var(--sav-accent);
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  cursor: move;
  height: 14px;
  left: -8px;
  opacity: 0;
  position: absolute;
  top: -8px;
  transition: opacity 0.14s ease;
  width: 14px;
  z-index: 5;
}

.sav-resize-handle {
  background: #ffffff;
  border: 1px solid var(--sav-accent);
  border-radius: 999px;
  bottom: -7px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  cursor: nwse-resize;
  height: 13px;
  opacity: 0;
  position: absolute;
  right: -7px;
  transition: opacity 0.14s ease;
  width: 13px;
  z-index: 5;
}

.sav-doc-block:hover .sav-block-grip,
.sav-doc-block:hover .sav-resize-handle,
.sav-doc-block.is-selected .sav-block-grip,
.sav-doc-block.is-selected .sav-resize-handle {
  opacity: 1;
}

.sav-editor-tools {
  background: #ffffff;
  border: 1px solid var(--sav-light-border);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  color: var(--sav-light-text);
  display: grid;
  gap: 9px;
  max-height: calc(100vh - 98px);
  overflow: auto;
  padding: 14px;
  position: fixed;
  right: 20px;
  top: 74px;
  width: 244px;
  z-index: 95;
}

.sav-editor-tools strong {
  color: var(--sav-light-heading);
  font-size: 13px;
  font-weight: 700;
}

.sav-editor-tools span,
.sav-editor-tools label {
  color: var(--sav-light-muted);
  display: grid;
  font-size: 11px;
  gap: 5px;
}

.sav-editor-tools input,
.sav-editor-tools select {
  border: 1px solid var(--sav-light-border);
  border-radius: 6px;
  color: var(--sav-light-heading);
  min-height: 30px;
  padding: 4px 7px;
}

.sav-editor-tools input[type="color"] {
  padding: 2px;
}

.sav-editor-tools button,
.sav-service-actions button,
.sav-row-actions button {
  border: 1px solid var(--sav-light-border);
  border-radius: 7px;
  color: var(--sav-light-heading);
  font-size: 11px;
  font-weight: 700;
  min-height: 30px;
  padding: 5px 8px;
}

.sav-editor-tools button:hover,
.sav-service-actions button:hover,
.sav-row-actions button:hover {
  background: #f8fafc;
}

.sav-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sav-tool-row-compact {
  align-items: end;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
}

.sav-tool-row-compact label {
  gap: 4px;
}

.sav-block-library {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
}

.sav-editor-tools hr {
  border: 0;
  border-top: 1px solid var(--sav-light-border);
  margin: 2px 0;
}

.sav-services-block {
  background: #ffffff;
}

.sav-services-edit-table,
.sav-services-client-table {
  display: grid;
  gap: 0;
  width: 100%;
}

.sav-services-edit-table,
.sav-service-rows {
  overflow: visible;
}

.sav-service-header,
.sav-service-line {
  display: grid;
  grid-template-columns:
    30px
    minmax(268px, 1.8fr)
    52px
    38px
    minmax(112px, 0.78fr)
    minmax(112px, 0.82fr);
}

.sav-service-header {
  background: #f7f9fc;
  border-bottom: 1px solid #d7dde7;
  border-top: 1px solid #d7dde7;
  color: #475569;
  font-size: 8.5px;
  text-transform: uppercase;
}

.sav-service-header strong {
  align-items: center;
  border-right: 1px solid #e5e9f0;
  display: flex;
  min-height: 28px;
  padding: 4px 5px;
}

.sav-service-header strong:nth-child(n + 3) {
  justify-content: flex-end;
  text-align: right;
}

.sav-service-line {
  border-bottom: 1px solid #eef2f7;
  color: #202124;
  font-size: 10px;
  position: relative;
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.sav-service-line > input,
.sav-service-line > textarea,
.sav-price-stack,
.sav-amount-stack {
  border-right: 1px solid #eef2f7;
}

.sav-service-control {
  background: transparent;
  border: 0;
  color: #202124;
  font-size: 10px;
  min-height: 31px;
  outline: none;
  padding: 4px 5px;
  width: 100%;
}

.sav-service-control:focus {
  background: #fff7f7;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sav-accent) 45%, white);
}

.sav-description-control {
  line-height: 1.25;
  min-height: 38px;
  resize: vertical;
}

.sav-number-control,
.sav-amount-stack {
  text-align: right;
}

.sav-price-stack,
.sav-amount-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
  padding: 3px 5px;
}

.sav-price-stack .sav-service-control {
  min-height: 22px;
  padding: 1px 0;
}

.sav-amount-stack strong {
  color: #202124;
  font-size: 10.5px;
  line-height: 1.15;
}

.sav-price-stack small,
.sav-amount-stack small {
  color: var(--sav-accent);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.2;
}

.sav-margin-editor {
  align-items: center;
  color: var(--sav-accent);
  display: grid;
  gap: 2px;
  grid-template-columns: auto 34px minmax(0, 1fr);
  margin-top: 1px;
}

.sav-margin-editor span {
  font-size: 8.5px;
  font-weight: 800;
}

.sav-margin-editor select,
.sav-margin-editor input {
  background: color-mix(in srgb, var(--sav-accent) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--sav-accent) 24%, #ffffff);
  border-radius: 4px;
  color: var(--sav-accent);
  font-size: 8.5px;
  min-height: 18px;
  padding: 0 3px;
}

.sav-row-actions {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  opacity: 0;
  padding: 3px;
  pointer-events: none;
  position: absolute;
  right: -104px;
  top: 50%;
  transform: translateY(-50%);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  z-index: 9;
}

.sav-row-actions button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  min-height: 21px;
  min-width: 21px;
  padding: 0;
}

.sav-service-line:hover .sav-row-actions,
.sav-service-line:focus-within .sav-row-actions,
.sav-service-line.is-row-dragging .sav-row-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(2px);
}

.sav-row-drag-handle {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: grab;
  display: flex;
  height: 30px;
  justify-content: center;
  left: -25px;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 6px;
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  width: 18px;
  z-index: 8;
}

.sav-row-drag-handle::before {
  background-image: radial-gradient(circle, #94a3b8 1.35px, transparent 1.45px);
  background-position:
    0 0,
    6px 0;
  background-size: 6px 6px;
  content: "";
  height: 20px;
  width: 14px;
}

.sav-service-line:hover .sav-row-drag-handle,
.sav-service-line:focus-within .sav-row-drag-handle,
.sav-service-line.is-row-dragging .sav-row-drag-handle {
  opacity: 1;
  transform: translateX(-1px);
}

.sav-row-drag-handle:active,
.sav-service-drag-active .sav-row-drag-handle {
  cursor: grabbing;
}

.sav-service-line.is-row-dragging {
  background: #fff7f7;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sav-accent) 24%, white),
    0 12px 26px rgba(15, 23, 42, 0.13);
  z-index: 12;
}

.sav-line-internals {
  border-top: 1px dashed color-mix(in srgb, var(--sav-accent) 18%, #e5e9f0);
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  font-size: 9px;
  gap: 5px;
  grid-column: 2 / 7;
  padding: 2px 5px 5px;
}

.sav-confidence,
.sav-warning,
.sav-source-file {
  border-radius: 999px;
  padding: 1px 6px;
}

.sav-confidence {
  background: #ecfeff;
  color: #0e7490;
}

.sav-warning {
  background: #fff7ed;
  color: #9a3412;
}

.sav-source-file {
  background: #f1f5f9;
  color: #475569;
}

.sav-service-section {
  align-items: center;
  background: #fbfcfe;
  border-bottom: 1px solid #e5e9f0;
  color: #202124;
  display: grid;
  font-size: 11px;
  font-weight: 700;
  grid-template-columns: 30px 1fr;
  min-height: 30px;
}

.sav-service-section span,
.sav-service-section div {
  padding: 5px;
}

.sav-service-import-zone {
  align-items: center;
  background: color-mix(in srgb, var(--sav-accent) 6%, #ffffff);
  border: 1px dashed color-mix(in srgb, var(--sav-accent) 42%, #cbd5e1);
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  display: grid;
  gap: 3px;
  justify-items: center;
  margin: 10px 0 8px;
  min-height: 78px;
  padding: 12px;
  text-align: center;
}

.sav-ai-import-shell {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: 154px minmax(0, 1fr);
  margin: 10px 0 8px;
}

.sav-ai-import-shell .sav-service-import-zone {
  margin: 0;
}

.sav-ai-analysis-rail {
  align-content: start;
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-height: 78px;
  padding: 9px;
}

.sav-ai-analysis-rail button {
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--sav-accent) 30%, #e5e9f0);
  border-radius: 999px;
  color: var(--sav-accent);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  min-height: 24px;
  padding: 3px 9px;
}

.sav-ai-analysis-rail button:hover {
  background: color-mix(in srgb, var(--sav-accent) 7%, #ffffff);
}

.sav-ai-status-item {
  align-items: start;
  color: #475569;
  display: grid;
  gap: 7px;
  grid-template-columns: 10px minmax(0, 1fr);
  min-width: 0;
}

.sav-ai-status-dot {
  background: #94a3b8;
  border-radius: 999px;
  height: 8px;
  margin-top: 4px;
  width: 8px;
}

.sav-ai-status-uploading .sav-ai-status-dot,
.sav-ai-status-extracting .sav-ai-status-dot,
.sav-ai-status-queued .sav-ai-status-dot {
  animation: sav-ai-pulse 1s ease-in-out infinite;
  background: #1a73e8;
}

.sav-ai-status-done .sav-ai-status-dot {
  background: #16833a;
}

.sav-ai-status-error .sav-ai-status-dot {
  background: #b91c1c;
}

.sav-ai-status-item strong {
  color: #202124;
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sav-ai-status-item small {
  color: #64748b;
  display: block;
  font-size: 9px;
  line-height: 1.25;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

@keyframes sav-ai-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.86);
  }

  50% {
    opacity: 1;
    transform: scale(1.22);
  }
}

.sav-service-import-zone strong {
  color: #202124;
  font-size: 12px;
  font-weight: 700;
}

.sav-service-import-zone span,
.sav-service-import-zone small {
  font-size: 10px;
}

.sav-service-import-zone.is-dragging,
.sav-service-import-zone:hover {
  background: color-mix(in srgb, var(--sav-accent) 11%, #ffffff);
  border-color: var(--sav-accent);
}

.sav-service-import-zone.is-loading {
  cursor: progress;
  opacity: 0.82;
}

.sav-service-import-zone.has-error {
  background: #fef2f2;
  border-color: #f87171;
}

.sav-service-import-zone.has-error .sav-import-feedback {
  color: #b91c1c;
}

.sav-service-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  margin-top: 4px;
}

.sav-service-totals,
.sav-client-totals {
  border-top: 1px solid #d7dde7;
  display: grid;
  gap: 4px;
  justify-content: end;
  margin-top: 10px;
  padding-top: 8px;
}

.sav-service-totals span,
.sav-client-totals span {
  color: #475569;
  display: grid;
  font-size: 10px;
  grid-template-columns: 136px 104px;
  text-align: right;
}

.sav-service-totals strong,
.sav-client-totals strong {
  color: #202124;
}

.sav-export-only {
  display: none !important;
}

.sav-service-export-header,
.sav-service-export-line {
  display: grid;
  grid-template-columns: 30px minmax(360px, 1fr) 52px 38px 112px 112px;
}

.sav-service-export-header {
  background: #f7f9fc;
  border-bottom: 1px solid #d7dde7;
  border-top: 1px solid #d7dde7;
  color: #475569;
  font-size: 9px;
  text-transform: uppercase;
}

.sav-service-export-header strong,
.sav-service-export-line span,
.sav-service-export-line strong {
  padding: 6px 5px;
}

.sav-service-export-line {
  border-bottom: 1px solid #eef2f7;
  font-size: 10.5px;
}

.sav-service-export-line span:nth-child(n + 3),
.sav-service-export-line strong {
  text-align: right;
}

.sav-service-export-section {
  background: #fbfcfe;
  border-bottom: 1px solid #e5e9f0;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 5px;
}

#root > div.dark .sav-editor-tools {
  background: var(--sav-dark-surface);
  border-color: var(--sav-dark-border);
  color: var(--sav-dark-text);
}

#root > div.dark .sav-ai-analysis-rail {
  background: var(--sav-dark-surface);
  border-color: var(--sav-dark-border);
}

#root > div.dark .sav-ai-status-item strong {
  color: var(--sav-dark-text);
}

#root > div.dark .sav-ai-status-item small {
  color: var(--sav-dark-muted);
}

#root > div.dark .sav-editor-tools strong,
#root > div.dark .sav-editor-tools button,
#root > div.dark .sav-editor-tools input,
#root > div.dark .sav-editor-tools select {
  color: var(--sav-dark-text);
}

#root > div.dark .sav-quote-save-button {
  background: var(--sav-dark-surface);
  border-color: var(--sav-dark-border);
  color: var(--sav-dark-text);
}

#root > div.dark .sav-quote-export-actions {
  background: rgba(18, 21, 26, 0.72);
  border-color: var(--sav-dark-border);
}

#root > div.dark .sav-quote-toolbar-button {
  color: var(--sav-dark-text);
}

#root > div.dark .sav-quote-toolbar-button:hover {
  background: var(--sav-dark-surface-soft);
  color: #ffb3b3;
}

#root > div.dark .sav-quote-save-status {
  color: var(--sav-dark-muted);
}

@media print {
  body:has(.quote-editor-shell) {
    background: #ffffff !important;
  }

  body:has(.quote-editor-shell) .sidebar-shell,
  body:has(.quote-editor-shell) .quote-editor-toolbar,
  body:has(.quote-editor-shell) .sav-edit-only,
  body:has(.quote-editor-shell) .sav-internal,
  body:has(.quote-editor-shell) .sav-block-grip,
  body:has(.quote-editor-shell) .sav-resize-handle {
    display: none !important;
  }

  body:has(.quote-editor-shell) .quote-editor-shell {
    background: #ffffff !important;
    display: block !important;
    inset: auto !important;
    position: static !important;
  }

  body:has(.quote-editor-shell) .quote-editor-canvas {
    background: #ffffff !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body:has(.quote-editor-shell) .quote-document-page {
    box-shadow: none !important;
    margin: 0 !important;
    min-height: 1123px !important;
    width: 794px !important;
  }

  body:has(.quote-editor-shell) .sav-doc-block {
    outline: 0 !important;
  }

  body:has(.quote-editor-shell) .sav-export-only {
    display: block !important;
  }

  body:has(.quote-editor-shell) .sav-service-export-header,
  body:has(.quote-editor-shell) .sav-service-export-line {
    display: grid !important;
  }

  body:has(.quote-editor-shell) .sav-client-totals {
    display: grid !important;
  }
}

@media (max-width: 760px) {
  .sav-ai-import-shell {
    grid-template-columns: 1fr;
  }
}

@container (min-width: 921px) {
  .purchase-panel .purchase-grid-header,
  .purchase-panel .purchase-project-header,
  .purchase-panel .purchase-grid-row,
  .purchase-panel .purchase-row-details {
    width: 100% !important;
  }

  .purchase-panel .purchase-grid-header > span:nth-child(n + 4) {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .purchase-panel .purchase-project-header {
    align-items: center !important;
    background-color: #f5f6f8 !important;
    grid-template-columns: var(--purchase-grid-columns) !important;
    min-height: 48px !important;
    overflow: visible !important;
    padding: 5px clamp(7px, 0.78cqw, 10px) !important;
  }

  .purchase-panel .project-title-group {
    grid-column: 2 / 4 !important;
    justify-self: stretch !important;
  }

  .purchase-panel .project-subtotals {
    align-items: center !important;
    display: grid !important;
    column-gap: clamp(3px, 0.34cqw, 5px) !important;
    grid-column: 4 / 10 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }

  .purchase-panel .project-metric {
    align-content: center !important;
    align-items: end !important;
    display: grid !important;
    font-size: clamp(9.25px, 0.78cqw, 11px) !important;
    grid-template-rows: auto auto !important;
    justify-content: flex-end !important;
    line-height: 1.05 !important;
    min-width: 0 !important;
    overflow: visible !important;
    row-gap: 1px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  .purchase-panel .project-metric > span,
  .purchase-panel .project-metric > strong {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .purchase-panel .project-metric > span {
    font-size: clamp(8px, 0.7cqw, 9.5px) !important;
    line-height: 1 !important;
  }

  .purchase-panel .project-metric > strong {
    font-size: clamp(9.6px, 0.84cqw, 11.75px) !important;
    line-height: 1.05 !important;
  }

  .purchase-panel .project-metric-quote {
    grid-column: 1 !important;
  }

  .purchase-panel .project-metric-invoice {
    grid-column: 2 !important;
  }

  .purchase-panel .project-metric-discount {
    grid-column: 3 !important;
  }

  .purchase-panel .project-metric-receive {
    grid-column: 5 !important;
  }

  .purchase-panel .project-metric-pay {
    grid-column: 6 !important;
  }

  .purchase-panel .project-add-invoice {
    grid-column: 11 / 13 !important;
    justify-self: end !important;
  }

  .purchase-panel .purchase-grid-row {
    background-color: #ffffff !important;
    min-height: 34px !important;
    padding: 3px clamp(7px, 0.78cqw, 10px) !important;
  }

  .purchase-panel .purchase-grid-row > :nth-child(n + 4) {
    text-align: right !important;
  }

  .purchase-panel .supplier-input,
  .purchase-panel .ht-input {
    height: 23px !important;
  }

  .purchase-panel .invoice-summary {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) clamp(17px, 1.55cqw, 20px) !important;
    justify-self: stretch !important;
    min-height: 23px !important;
    padding-left: clamp(2px, 0.28cqw, 3px) !important;
  }

  .purchase-panel .invoice-summary .invoice-amount-cell {
    padding-right: 2px !important;
    text-align: right !important;
  }

  .purchase-panel .invoice-summary .pdf-icon,
  .purchase-panel .ht-cell .pdf-icon {
    align-items: center !important;
    display: flex !important;
  }

  .purchase-panel .invoice-summary .pdf-icon {
    justify-content: flex-end !important;
    padding-right: 1px !important;
  }

  .purchase-panel .ht-cell .pdf-icon {
    justify-content: center !important;
  }

  .purchase-panel .invoice-summary .pdf-icon svg {
    transform: translateX(-2px) !important;
  }

  .purchase-panel .ht-cell .pdf-icon svg {
    transform: none !important;
  }

  .purchase-panel .purchase-total,
  .purchase-panel .purchase-rests {
    justify-self: stretch !important;
    padding-right: 2px !important;
    text-align: right !important;
  }

  .purchase-panel .row-expand {
    justify-self: end !important;
    margin-right: 1px !important;
  }

  .purchase-panel .purchase-row-details {
    align-items: center !important;
    background-color: #ffffff !important;
    column-gap: clamp(9px, 0.86cqw, 14px) !important;
    min-height: 34px !important;
    overflow: visible !important;
    padding: 3px clamp(7px, 0.78cqw, 10px) !important;
  }

  .purchase-panel .purchase-row-details > * {
    align-self: center !important;
    overflow: visible !important;
  }

  .purchase-panel .invoice-detail-cell {
    align-content: center !important;
    gap: 4px !important;
    justify-items: stretch !important;
    min-height: 22px !important;
    overflow: visible !important;
  }

  .purchase-panel .invoice-detail-cell:not(.invoice-detail-cell-percent-only) {
    grid-template-rows: repeat(4, 16px) !important;
    min-height: 66px !important;
  }

  .purchase-panel .invoice-detail-cell-percent-only {
    align-content: start !important;
    grid-template-rows: 18px !important;
    min-height: 66px !important;
  }

  .purchase-panel .purchase-row-details > .invoice-detail-cell-percent-only {
    align-self: start !important;
  }

  .purchase-panel .invoice-detail-cell-percent-only label:nth-of-type(n + 2),
  .purchase-panel .invoice-detail-cell-percent-only .paid-pill {
    display: none !important;
  }

  .purchase-panel .invoice-detail-cell label {
    align-items: center !important;
    display: grid !important;
    gap: 4px !important;
    grid-template-columns: minmax(14px, 0.32fr) minmax(0, 1fr) !important;
    height: 18px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .purchase-panel .invoice-detail-cell label span {
    font-size: 7px !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  .purchase-panel .invoice-detail-cell input {
    font-size: 8px !important;
    height: 18px !important;
    padding-inline: 3px !important;
    text-align: right !important;
  }

  .purchase-panel .paid-pill {
    font-size: 8px !important;
    height: 18px !important;
    justify-self: end !important;
  }
}