/*
 * CTPET Design System v1
 *
 * This file is the shared contract for every application surface. Business
 * pages may add local layout rules, but shared tokens, controls, panels,
 * tables, dialogs and states belong here.
 */
:root {
  --ds-color-brand: #075a43;
  --ds-color-brand-strong: #043d2f;
  --ds-color-brand-soft: #edf7f2;
  --ds-color-accent: #d59a24;
  --ds-color-canvas: #f4f7f4;
  --ds-color-surface: #ffffff;
  --ds-color-surface-subtle: #f8fbf9;
  --ds-color-ink: #17352b;
  --ds-color-ink-soft: #496258;
  --ds-color-muted: #6b7d74;
  --ds-color-placeholder: #92a199;
  --ds-color-line: #dce7e0;
  --ds-color-line-soft: #e9f0eb;
  --ds-color-success: #16805d;
  --ds-color-success-soft: #edf8f2;
  --ds-color-warning: #b7791f;
  --ds-color-warning-soft: #fff7e6;
  --ds-color-danger: #c2413b;
  --ds-color-danger-soft: #fff2f0;
  --ds-color-info: #3479a5;
  --ds-color-info-soft: #eff7fc;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  --ds-space-9: 48px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 999px;
  --ds-shadow-xs: 0 1px 2px rgba(23, 53, 43, .04);
  --ds-shadow-sm: 0 4px 12px rgba(23, 53, 43, .06);
  --ds-shadow-md: 0 12px 28px rgba(23, 53, 43, .10);
  --ds-shadow-dialog: 0 24px 60px rgba(23, 53, 43, .20);
  --ds-focus: 0 0 0 3px rgba(7, 90, 67, .15);
  --ds-motion-fast: 140ms ease;
  --ds-motion-base: 180ms ease;
  --ds-sidebar-width: 232px;
  --ds-topbar-height: 74px;
  --ds-page-gutter: 40px;
  --ds-font-body: 14px;
  --ds-font-caption: 12px;
  --ds-font-title: 28px;
  --ds-content-max: 1560px;
  --ds-dialog-sm: 420px;
  --ds-dialog-md: 640px;
  --ds-dialog-lg: 820px;
  --ds-dialog-xl: 1120px;
}

/* Semantic aliases for legacy pages. New work should use --ds-* directly. */
:root {
  --brand-primary: var(--ds-color-brand);
  --brand-primary-hover: var(--ds-color-brand-strong);
  --brand-primary-soft: var(--ds-color-brand-soft);
  --brand-accent: var(--ds-color-accent);
  --brand-ink: var(--ds-color-ink);
  --brand-muted: var(--ds-color-muted);
  --brand-line: var(--ds-color-line);
  --line: var(--ds-color-line);
  --surface-soft: var(--ds-color-canvas);
  --surface-hover: var(--ds-color-surface-subtle);
}

.ds-app {
  color: var(--ds-color-ink);
  background: var(--ds-color-canvas);
}

.ds-page,
.ds-page > *,
.ds-page :is(.list-page, .catalog-page, .search-page, .crm-ui, .quotation-editor-page) {
  min-width: 0;
}

/* Shared page anatomy: eyebrow → title → supporting copy → actions. */
.ds-page :is(.page-header, .page-heading, .list-header, .crm-page-heading,
  .forwarder-page__hero, .forwarder-workspace__hero, .freight-page__hero,
  .customer-freight-page__hero, .settings-card-head, .crm-ui__panel-head,
  .crm-quotation-editor__head) {
  min-width: 0;
}
.ds-page :is(.page-header, .page-heading, .list-header, .crm-page-heading,
  .forwarder-page__hero, .forwarder-workspace__hero, .freight-page__hero,
  .customer-freight-page__hero) {
  gap: var(--ds-space-5);
}
.ds-page :is(.page-header, .page-heading, .list-header) h1,
.ds-page :is(.crm-page-heading, .forwarder-page__hero, .freight-page__hero) h1 {
  color: var(--ds-color-ink);
  letter-spacing: -.025em;
}
.ds-page :is(.page-header, .page-heading, .list-header) p,
.ds-page :is(.crm-page-heading, .forwarder-page__hero, .freight-page__hero) p {
  color: var(--ds-color-muted);
}
.ds-page :is(.eyebrow, .crm-ui__eyebrow) {
  color: var(--ds-color-brand);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* One control language for old and new page templates. */
.ds-page :is(button, input, select, textarea) { font: inherit; }
.ds-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: 40px;
  max-width: 100%;
  border: 1px solid var(--ds-color-line);
  border-radius: var(--ds-radius-sm);
  padding: 9px 11px;
  color: var(--ds-color-ink);
  background: var(--ds-color-surface);
  transition: border-color var(--ds-motion-fast), box-shadow var(--ds-motion-fast), background var(--ds-motion-fast);
}
.ds-page :is(input, select, textarea)::placeholder { color: var(--ds-color-placeholder); }
.ds-page :is(input, select, textarea):focus {
  border-color: var(--ds-color-brand);
  box-shadow: var(--ds-focus);
  outline: 0;
}
.ds-page :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(7, 90, 67, .22);
  outline-offset: 2px;
}
.ds-page :is(button, .button, .app-button, .primary-button, .secondary-button, .btn) {
  border-radius: var(--ds-radius-sm);
  font-weight: 650;
}

/* Surface hierarchy: page canvas → panel → subpanel → inset content. */
.ds-page :is(.card, .data-card, .settings-card, .qe-card, .crm-data-card,
  .crm-ui__panel, .crm-ui__subpanel, .catalog-card, .supplier-card,
  .forwarder-card, .crm-ui__profile, .crm-workbench-queue) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
}
.ds-page :is(.card-head, .settings-card-head, .crm-card-head, .crm-ui__panel-head,
  .crm-ui__subpanel-head, .qe-card-head) {
  border-bottom-color: var(--ds-color-line-soft);
}
.ds-page :is(.card-body, .crm-card-body, .crm-ui__panel-body, .crm-ui__dialog-body) {
  min-width: 0;
}

/* Tables are always contained by their own scroll surface. */
.ds-page :is(.data-table, .history-table, .sku-table, .crm-ui__table,
  .quotation-preview-table, .qe-sku-table) {
  color: var(--ds-color-ink);
}
.ds-page :is(.data-table, .history-table, .sku-table, .crm-ui__table,
  .quotation-preview-table, .qe-sku-table) thead th {
  color: var(--ds-color-ink-soft);
  background: var(--ds-color-surface-subtle);
  border-bottom-color: var(--ds-color-line);
  font-weight: 700;
}
.ds-page :is(.data-table, .history-table, .sku-table, .crm-ui__table,
  .quotation-preview-table, .qe-sku-table) tbody tr { border-bottom-color: var(--ds-color-line-soft); }
.ds-page :is(.data-table, .history-table, .sku-table, .crm-ui__table,
  .quotation-preview-table, .qe-sku-table) tbody tr:hover { background: #fbfdfb; }
.ds-page :is(.crm-table-wrap, .history-table-wrap, .sku-table-wrap,
  .crm-ui__table-wrap, .quotation-preview-table-wrap, .qe-sku-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-color: #b9d2c4 var(--ds-color-surface-subtle);
}

/* Legacy dialog adapters only set appearance. Explicit size/structure lives
   in the component contract below; action hooks never determine geometry. */
.ds-page dialog::backdrop { background: rgba(13, 35, 27, .46); }
.ds-page .crm-ui__dialog-header { display: block; }
.ds-page :is(.crm-dialog-head, .dialog-head, .modal-head) {
  gap: var(--ds-space-4);
  border-bottom-color: var(--ds-color-line-soft);
}
.ds-page :is(.crm-dialog-footer, .dialog-actions, .modal-footer) {
  gap: var(--ds-space-2);
  border-top-color: var(--ds-color-line-soft);
}

/* Feedback remains inside the native dialog's top layer. */
.ds-page dialog .ds-dialog-notice {
  margin: 12px 16px;
  padding: 12px 14px;
  border: 1px solid var(--ds-color-line);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-ink);
  background: var(--ds-color-surface-subtle);
  font-size: var(--ds-font-body);
  line-height: 1.6;
  overflow-wrap: anywhere;
  flex: 0 0 auto;
}
.ds-page dialog .ds-dialog-notice[data-kind="error"] {
  color: var(--ds-color-danger);
  border-color: var(--ds-color-danger);
  background: var(--ds-color-danger-soft);
}
.ds-page dialog .ds-dialog-notice[data-kind="success"] {
  color: var(--ds-color-brand);
  background: var(--ds-color-success-soft);
}
.ds-page dialog .ds-dialog-notice[hidden] { display: none; }
.ds-page .crm-attachment-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) auto;
  align-items: end;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-3);
}
.ds-page .crm-attachment-upload label { display: grid; gap: 6px; min-width: 0; }
@media (max-width: 760px) {
  .ds-page .crm-attachment-upload { grid-template-columns: minmax(0, 1fr); }
}

/* Status language: loading, empty, error and future features feel related. */
.ds-page :is(.empty-card, .empty-state, .crm-empty-state, .results-empty,
  .crm-ui__state, .crm-ui__panel--future, .empty-table) {
  color: var(--ds-color-muted);
}
.ds-page :is(.crm-ui__state--error, .error-state, [role="alert"]) {
  color: var(--ds-color-danger);
}
.ds-page :is(.status-chip, .crm-status-chip, .grade-badge, .tag-chip, .qe-badge) {
  border-radius: var(--ds-radius-pill);
  font-weight: 700;
}

/* Standard page families. These mappings let legacy templates participate in
   the same system before their markup is migrated to explicit ds-* classes. */
.ds-page :is(.list-page, .catalog-page, .search-page, .crm-ui:not(dialog), .quotation-editor-page) {
  width: 100%;
  max-width: var(--ds-content-max);
  margin-inline: auto;
}
.ds-page :is(.settings-page, .supplier-page, .list-page) { --ds-page-gap: var(--ds-space-5); }
.ds-page :is(.list-page, .catalog-page, .search-page) { gap: var(--ds-page-gap, var(--ds-space-5)); }
.ds-page :is(.crm-record-workbench, .qe-layout-grid, .crm-consultation-ledger-layout) > * { min-width: 0; }

@media (max-width: 900px) {
  .ds-page :is(.page-header, .page-heading, .list-header, .crm-page-heading,
    .forwarder-page__hero, .forwarder-workspace__hero, .freight-page__hero,
    .customer-freight-page__hero) { align-items: flex-start; flex-direction: column; }
  .ds-page :is(.page-header, .page-heading, .list-header) > *,
  .ds-page :is(.crm-page-heading, .forwarder-page__hero, .freight-page__hero) > * { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-app *, .ds-app *::before, .ds-app *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Page-family adapters for the existing production templates. */
.ds-page :is(.list-page, .catalog-page, .search-page, .crm-forwarders, .freight-page) {
  display: grid;
  gap: var(--ds-space-5);
}
.ds-page [data-ds-page] { min-width: 0; }
.ds-page [data-ds-page="directory"] .list-header,
.ds-page [data-ds-page="settings"] .list-header,
.ds-page [data-ds-page="catalog"] .catalog-page__hero {
  align-items: flex-start;
}
.ds-page [data-ds-page="document-editor"] :is(.qe-topbar, .crm-quotation-editor__head) {
  position: relative;
  z-index: 2;
}
.ds-page [data-ds-page="document-preview"] {
  width: min(100%, var(--ds-content-max));
  margin-inline: auto;
}
.ds-page [data-ds-page="state"] {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--ds-space-2);
  text-align: center;
}
.ds-page :is(.list-page .list-header, .crm-forwarders .forwarder-page__hero,
  .crm-forwarders .forwarder-workspace__hero, .freight-page .freight-page__hero,
  .customer-freight-page .customer-freight-page__hero) {
  padding: 4px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ds-page :is(.list-page .list-header h1, .crm-forwarders .forwarder-page__hero h1,
  .crm-forwarders .forwarder-workspace__hero h1, .freight-page .freight-page__hero h1) {
  margin: 3px 0 5px;
  font-size: clamp(24px, 2.2vw, 30px);
}
.ds-page :is(.crm-forwarders .forwarder-page__toolbar, .freight-page .freight-search__filters,
  .customer-freight-page .customer-freight-page__filters, .customer-freight-page .customer-freight-page__target,
  .supplier-page .library-search) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-xs);
}
.ds-page :is(.crm-forwarders .forwarder-card, .supplier-page .supplier-card,
  .crm-forwarders__details, .crm-forwarders__record) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-sm);
}
.ds-page :is(.crm-forwarders .forwarder-card:hover, .supplier-page .supplier-card:hover) {
  border-color: #b8d3c4;
  box-shadow: var(--ds-shadow-md);
}
.ds-page :is(.crm-forwarders .forwarder-workspace__tabs, .freight-page .freight-search__modes,
  .customer-freight-page .customer-freight-page__tabs) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface-subtle);
}
.ds-page :is(.crm-forwarders .forwarder-workspace__tabs a[aria-current="page"],
  .freight-page .freight-search__modes button.active,
  .customer-freight-page .customer-freight-page__tabs a[aria-current="page"]) {
  color: var(--ds-color-brand);
  border-bottom-color: var(--ds-color-accent);
  background: var(--ds-color-brand-soft);
}
.ds-page .freight-results__table-wrap { border-color: var(--ds-color-line); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-sm); }
.ds-page .crm-fulfillment-page {
  --crm-orange: var(--ds-color-brand);
  --crm-orange-dark: var(--ds-color-brand-strong);
  --crm-orange-soft: var(--ds-color-brand-soft);
  --crm-ink: var(--ds-color-ink);
  --crm-muted: var(--ds-color-muted);
  --crm-line: var(--ds-color-line);
  --crm-soft: var(--ds-color-surface-subtle);
}
.ds-page :is(.crm-ui__customer-lock, .crm-ui__party-card, .crm-ui__milestone-step,
  .crm-ui__order-summary, .crm-order-summary-card, .crm-order-detail-card,
  .crm-order-timeline-card, .crm-ui__bank-snapshot-card) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface-subtle);
}
.ds-page :is(.crm-ui__milestone-step--completed, .crm-ui__milestone-step--in-progress,
  .crm-ui__milestone-step--skipped) { border-left-width: 3px; }

/* Quotation editors are dense by nature, so the system provides a calm rail,
   a distinct editor canvas, and a single persistent save bar. */
.ds-page .quotation-editor-pro-wrapper {
  max-width: var(--ds-content-max);
  margin-inline: auto;
  padding: 0;
  color: var(--ds-color-ink);
  background: transparent;
}
.ds-page :is(.qe-topbar, .qe-module-rail, .qe-card, .quotation-module-rail) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
}
.ds-page .qe-topbar { background: var(--ds-color-surface); }
.ds-page :is(.qe-page-title, .qe-card-title, .qe-module-title) { color: var(--ds-color-ink); }
.ds-page :is(.qe-badge, .qe-badge-draft, .qe-badge-initial, .qe-badge-final, .qe-badge-customer) {
  border-radius: var(--ds-radius-pill);
}
.ds-page .qe-module-rail { background: var(--ds-color-surface); }
.ds-page :is(.qe-module-item:hover, .quotation-module-check:hover) { background: var(--ds-color-brand-soft); }
.ds-page .qe-quote-savebar { border-color: #c7ddd0; background: var(--ds-color-brand-soft); }
.ds-page :is(.qe-btn-primary, .qe-btn-pdf) {
  background: var(--ds-color-brand);
  border-color: var(--ds-color-brand);
  box-shadow: 0 4px 10px rgba(7, 90, 67, .14);
}
.ds-page :is(.qe-btn-primary, .qe-btn-pdf):hover { background: var(--ds-color-brand-strong); border-color: var(--ds-color-brand-strong); }
.ds-page .crm-documents-page .crm-ui__actions .crm-btn-primary {
  color: #fff;
  background: var(--ds-color-brand);
  border-color: var(--ds-color-brand);
  box-shadow: var(--ds-shadow-sm);
}
.ds-page .crm-documents-page .crm-ui__actions .crm-btn-primary:hover {
  background: var(--ds-color-brand-strong);
  border-color: var(--ds-color-brand-strong);
}

/* Image search: the query panel is the source of truth, results are the
   decision area. */
.ds-page .image-search__hero,
.ds-page .search-topbar {
  display: grid;
  gap: var(--ds-space-4);
  padding: 4px 0 8px;
  background: transparent;
  border: 0;
}
.ds-page :is(.query-panel, .results-panel) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-sm);
}
.ds-page :is(.query-panel .panel-heading, .results-panel .results-heading) {
  border-bottom-color: var(--ds-color-line-soft);
}
.ds-page .drop-zone { border-color: #bfd8c8; border-radius: var(--ds-radius-md); background: var(--ds-color-brand-soft); }
.ds-page :is(.cat-pill, .tree-node-row) { border-color: var(--ds-color-line); border-radius: var(--ds-radius-pill); }
.ds-page :is(.cat-pill.is-active, .tree-node-row.is-active) { color: var(--ds-color-brand); border-color: #b8d3c4; background: var(--ds-color-brand-soft); }
.ds-page :is(.result-card, .search-history) { border-color: var(--ds-color-line); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-xs); }

/* Settings, suppliers, issues and import maintenance pages. */
.ds-page :is(.settings-card, .supplier-card, .product-import, .issue-list) {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-sm);
}
.ds-page :is(.settings-card-head, .supplier-card-head, .product-import__header) { border-bottom-color: var(--ds-color-line-soft); }
.ds-page .settings-page { min-width: 0; grid-template-columns: minmax(0,1fr); padding: 0; }
.ds-page .settings-page > * { min-width: 0; }
.ds-page .settings-form-grid label { min-width: 0; }
.ds-page :is(.settings-status, .settings-card small, .supplier-card p, .product-import__hint) { color: var(--ds-color-muted); }
.ds-page :is(.pricing-formula, .product-import__drop, .product-import__record) { border-color: var(--ds-color-line); background: var(--ds-color-surface-subtle); }
.ds-page :is(.issue-row, .no-issues) { border-color: var(--ds-color-line-soft); }
.ds-page .issue-row.is-error { color: var(--ds-color-danger); background: var(--ds-color-danger-soft); }
.ds-page .issue-row.is-warning { color: var(--ds-color-warning); background: var(--ds-color-warning-soft); }

/* Authentication and recovery states use the same brand language without the
   authenticated application shell. */
.ds-app.login-page { color: var(--ds-color-ink); }
.ds-app .login-card {
  border-color: var(--ds-color-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}

@media (max-width: 760px) {
  .ds-page :is(.crm-forwarders .forwarder-page__toolbar, .freight-page .freight-search__filters) { grid-template-columns: 1fr; }
  .ds-page :is(.crm-forwarders .forwarder-page__grid, .supplier-page .supplier-grid) { grid-template-columns: minmax(0, 1fr); }
  .ds-page .quotation-editor-pro-wrapper { padding-inline: 0; }
  .ds-page :is(.qe-topbar, .qe-topbar-actions, .qe-topbar-meta) { align-items: flex-start; flex-wrap: wrap; }
  .ds-page :is(.qe-topbar-actions > *, .qe-form-row > *) { flex: 1 1 100%; }
}

/* Explicit components. These rules own component geometry, after legacy
   adapters. Business data attributes are preserved for behavior only. */
.ds-app .ds-panel {
  min-width: 0;
  padding: var(--ds-space-6);
  border: 1px solid var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-xs);
}
.ds-app .ds-stack { display: grid; gap: var(--ds-space-5); min-width: 0; }
.ds-app .ds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-5); }
.ds-app .ds-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-app .ds-title { margin: 0 0 var(--ds-space-2); font-size: var(--ds-font-title); line-height: 1.4; }
.ds-app .ds-help { color: var(--ds-color-muted); font-size: var(--ds-font-caption); }
.ds-app .ds-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; font-size: var(--ds-font-body);
  border: 1px solid var(--ds-color-line); border-radius: var(--ds-radius-sm);
  color: var(--ds-color-brand); background: var(--ds-color-surface); cursor: pointer;
}
.ds-app .ds-button--primary { color: #fff; background: var(--ds-color-brand); border-color: var(--ds-color-brand); }
.ds-app .ds-button--danger { color: #fff; background: var(--ds-color-danger); border-color: var(--ds-color-danger); }
.ds-app .ds-button:hover:not(:disabled) { filter: brightness(.94); }
.ds-app .ds-button:disabled { opacity: .5; cursor: not-allowed; }
.ds-app .ds-field { display: grid; gap: 8px; min-width: 0; }
.ds-app .ds-field > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; }
.ds-app .ds-field:has(> input:is([type="checkbox"], [type="radio"])) { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.ds-app .ds-field > input:is([type="checkbox"], [type="radio"]) { width: 17px; height: 17px; flex: 0 0 17px; }
.ds-app .ds-field > input:is([type="checkbox"], [type="radio"]) + span { flex: 0 1 auto; white-space: nowrap; }
.ds-app .ds-field [aria-invalid="true"] { border-color: var(--ds-color-danger); }
.ds-app .ds-field-error { color: var(--ds-color-danger); font-size: var(--ds-font-caption); }
.ds-app .ds-state { padding: 16px; border: 1px solid var(--ds-color-line); border-radius: var(--ds-radius-sm); background: var(--ds-color-surface-subtle); }
.ds-app .ds-state--error { color: var(--ds-color-danger); border-color: var(--ds-color-danger); background: var(--ds-color-danger-soft); }
.ds-app .ds-state--success { color: var(--ds-color-success); background: var(--ds-color-success-soft); }
.ds-app .ds-state--warning { color: var(--ds-color-warning); background: var(--ds-color-warning-soft); }
.ds-app .ds-table-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--ds-color-line); border-radius: var(--ds-radius-sm); }
.ds-app .ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-font-body); }
.ds-app .ds-table :is(th,td) { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--ds-color-line-soft); }
.ds-app .ds-table th { background: var(--ds-color-surface-subtle); }
.ds-app .ds-table .ds-number { text-align: right; font-variant-numeric: tabular-nums; }

.ds-app .ds-page dialog[data-ds-dialog] {
  --ds-dialog-width: var(--ds-dialog-md);
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(var(--ds-dialog-width), calc(100vw - 32px));
  max-width: calc(100vw - 32px); max-height: 88dvh;
  padding: var(--ds-space-6); overflow: auto;
  border: 1px solid var(--ds-color-line); border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface); color: var(--ds-color-ink);
  box-shadow: var(--ds-shadow-dialog); animation: none; transform: none;
}
.ds-app .ds-page dialog[data-ds-size="sm"] { --ds-dialog-width: var(--ds-dialog-sm); }
.ds-app .ds-page dialog[data-ds-size="lg"] { --ds-dialog-width: var(--ds-dialog-lg); }
.ds-app .ds-page dialog[data-ds-size="xl"] { --ds-dialog-width: var(--ds-dialog-xl); }
.ds-app .ds-page dialog[data-ds-layout="drawer"] {
  inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh;
  border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); padding: 0;
}
.ds-app .ds-page dialog[data-ds-dialog] > form { height: auto; min-height: 0; }
.ds-app .ds-page dialog[data-ds-layout="drawer"] > form { flex: 1; height: 100%; overflow: hidden; }
.ds-app .ds-page dialog[data-ds-layout="drawer"] .crm-dialog-body { min-height: 0; }
.ds-app .ds-page dialog[data-crm-finder-dialog][open] { display: flex; flex-direction: column; height: 88dvh; padding: 0; }
.ds-app .ds-page dialog.crm-quotation-preview-dialog[open] { height: 88dvh; padding: 0; overflow: hidden; }
.ds-app .ds-page dialog.crm-quotation-preview-dialog iframe { height: calc(100% - 80px); }
.ds-app .ds-page dialog[data-ds-dialog]::backdrop { background: rgba(13,35,27,.46); backdrop-filter: blur(2px); animation: none; }
.ds-app .ds-page dialog.ds-dialog { padding: 0; overflow: hidden; }
.ds-app .ds-dialog__shell { display: flex; flex-direction: column; max-height: calc(88dvh - 2px); }
.ds-app .ds-page dialog.ds-dialog[data-ds-layout="drawer"] .ds-dialog__shell { height: 100%; max-height: 100%; }
.ds-app :is(.ds-dialog__header,.ds-dialog__footer) { flex-shrink: 0; }
.ds-app .ds-dialog__header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--ds-color-line); }
.ds-app .ds-dialog__header h2 { font-size: 18px; margin: 0; }
.ds-app .ds-dialog__header p { margin: 6px 0 0; color: var(--ds-color-muted); }
.ds-app .ds-dialog__body { min-height: 0; overflow: auto; padding: 24px; }
.ds-app .ds-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--ds-color-line); background: var(--ds-color-surface-subtle); }
.ds-app .ds-icon-button { width: 40px; min-width: 40px; height: 40px; padding: 0; border: 1px solid var(--ds-color-line); border-radius: var(--ds-radius-sm); background: var(--ds-color-surface); }
.ds-app .ds-page [data-ds-dialog] .crm-ui__dialog-header { display: block; }
.ds-app .ds-page [data-ds-dialog] .crm-ui__dialog-header > :is(h3,p,span) { display: block; margin: 0 0 8px; }
.ds-app .ds-page [data-ds-dialog] :is(.crm-dialog-footer,.dialog-actions,.crm-ui__actions) > button:not(.icon-button) { width: auto; min-width: 72px; padding: 8px 16px; }
.ds-app .ds-page [data-ds-dialog] .crm-dialog-box { box-shadow: none; border: 0; animation: none; }
.ds-app .ds-swatch { padding: 18px; background: var(--ds-color-brand); color: #fff; border-radius: var(--ds-radius-sm); }
.ds-app .ds-swatch--soft { background: var(--ds-color-brand-soft); color: var(--ds-color-ink); }
.ds-app .ds-swatch--accent { background: var(--ds-color-accent); color: var(--ds-color-ink); }
.ds-app .ds-page .crm-metric-grid .crm-metric-card { border: 1px solid var(--ds-color-line); border-radius: var(--ds-radius-md); }
@media (max-width: 760px) {
  :root { --ds-sidebar-width: 64px; --ds-page-gutter: 16px; }
  .ds-app .ds-grid { grid-template-columns: minmax(0,1fr); }
  .ds-app .ds-panel { padding: 16px; }
  .ds-app .settings-form-grid { grid-template-columns: minmax(0,1fr); }
  .ds-app .settings-page :is(.list-header,.settings-card-head,.pricing-formula) { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ds-app .settings-page .settings-card { padding: 16px; }
  .ds-app .ds-page dialog[data-ds-layout="drawer"] .crm-form-row { grid-template-columns: minmax(0,1fr); }
  .ds-app .ds-page dialog[data-ds-dialog] { max-width: calc(100vw - 24px); width: min(var(--ds-dialog-width), calc(100vw - 24px)); }
  .ds-app :is(.ds-dialog__header,.ds-dialog__body,.ds-dialog__footer) { padding: 16px; }
}
@media print {
  .ds-app .app-shell { display: block; }
  .ds-app .ds-page [data-ds-page="document-preview"] { width: 100%; max-width: none; margin: 0; }
}

/* Workspace density: preserve object context without pushing the task below
   the fold. These selectors cover all customer business tabs. */
.ds-app .ds-page .customer-profile-head { padding: 16px 20px 0; gap: 12px 16px; }
.ds-app .ds-page .customer-profile-head .back-link-wrap { padding: 0; margin: 0; }
.ds-app .ds-page .customer-profile-copy { padding: 0; gap: 12px; }
.ds-app .ds-page .customer-profile-copy > div { flex: 1; min-width: 0; }
.ds-app .ds-page .customer-profile-copy .record-subhead { float: none; margin: 0 0 6px; }
.ds-app .ds-page .customer-profile-copy h1 { font-size: 22px; overflow-wrap: anywhere; }
.ds-app .ds-page .customer-monogram { box-shadow: none; }
.ds-app .ds-page .customer-profile-head > .page-actions { padding: 0; }
.ds-app .ds-page .customer-tabs { padding: 0; }
.ds-app .ds-page .customer-tabs a { min-height: 44px; }
.ds-app .ds-page .customer-header-tags:empty { display: none; }
.ds-app .ds-page .crm-ui__panel-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ds-app .ds-page .crm-quotation-editor__head > div { min-width: 0; }
.ds-app .ds-page .crm-quotation-editor__head > :is(span,.crm-ui__badge) { flex-shrink: 0; }
.ds-app .ds-page .ds-workflow-note { padding: 12px 16px; border-left: 3px solid var(--ds-color-brand); background: var(--ds-color-brand-soft); color: var(--ds-color-ink-soft); line-height: 1.7; }
.ds-app .ds-page .ds-section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.ds-app .ds-page .ds-section-nav a { padding: 8px 12px; border: 1px solid var(--ds-color-line); border-radius: var(--ds-radius-sm); background: var(--ds-color-surface); }
.ds-app .ds-page [id] { scroll-margin-top: 100px; }
@media (max-width: 760px) {
  .ds-app .ds-page .customer-profile-head { padding: 12px 12px 0; }
  .ds-app .ds-page .customer-profile-copy h1 { font-size: 20px; }
  .ds-app .ds-page .customer-monogram { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; border-radius: 10px; }
  .ds-app .ds-page .customer-profile-head > .page-actions { justify-content: flex-start; gap: 6px; }
  .ds-app .ds-page .customer-profile-head > .page-actions a { padding: 8px; }
  .ds-app .ds-page .crm-quotation-editor__head { flex-direction: column; gap: 12px; }
  .ds-app .ds-page .crm-consultation-ledger-sku { min-width: 0; grid-template-columns: 46px minmax(0,1fr); }
  .ds-app .ds-page .crm-consultation-ledger-sku > :not(:first-child):not(:nth-child(2)) { grid-column: 2; }
  .ds-app .ds-page .crm-ui__panel-actions { width: 100%; }
  .ds-app .ds-page .crm-ui__panel-actions > * { min-width: 0; max-width: 100%; white-space: normal; }
}
/* Document setup is part of the same workspace as company and pricing settings. */
.ds-bank-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ds-bank-card { border: 1px solid var(--ds-color-line); border-radius: 12px; padding: 16px; min-width: 0; overflow-wrap: anywhere; }
.ds-bank-card h3 { margin-top: 0; font-size: 16px; }
#bank-editor form { display: grid; gap: 20px; padding: 24px; }
#bank-editor [role="alert"] { color: var(--ds-color-danger); }
.settings-page .settings-card-head { flex-wrap: wrap; gap: 16px; }
.settings-page .settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ds-document-toolbar { padding-block: 8px; }
.ds-app .crm-pi-workspace__toolbar .crm-ui__actions { margin: 0; padding: 0; }
.ds-app .crm-documents-page > .crm-ui__tab-buttons { margin: 8px 20px 12px; padding-bottom: 0; }
.ds-app .crm-document-edit-policy > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.ds-app .customer-profile-head .customer-tabs { gap: 0 4px; }
.ds-app .customer-profile-head .customer-tabs a { min-height: 40px; padding-block: 8px; }
@media (max-width: 700px) {
  .quote-editor-workspace .crm-quotation-editor__head > div > p:not(.crm-ui__eyebrow) { display: none; }
  .quote-editor-workspace .crm-record-version-bar { padding-block: 8px; }
  .quote-editor-workspace .ds-workflow-note { font-size: 12px; padding: 8px 12px; }
  .ds-document-toolbar > button { flex: 1 1 auto; }
}