:root {
  --bg: #f3f6f9;
  --panel: #ffffff;
  --text: #101820;
  --muted: #657386;
  --line: #d5dde7;
  --accent: #0772b8;
  --accent-strong: #005c98;
  --accent-soft: #e7f4fd;
  --brand: #0772b8;
  --panel-soft: #e7f4fd;
  --selection: #d9eefb;
  --sellomatic-black: #050608;
  --sellomatic-gray: #a8adb3;
  --cyan: #00a8df;
  --magenta: #e83f95;
  --print-yellow: #f4dc18;
  --blue: #0772b8;
  --red: #dc2626;
  --yellow: #d97706;
  --green: #16a34a;
  --ink: #0a0f16;
  --shadow: 0 18px 40px rgba(10, 15, 22, 0.12);
  --selected-row-bg: #cceeff;
  --selected-row-border: #0772b8;
  --selected-row-stripe: #005c98;
  --selected-row-shadow: rgba(7, 114, 184, 0.24);
  --table-header-bg: #f8fbff;
  --table-header-border: #c7d7e8;
  --table-header-shadow: rgba(7, 114, 184, 0.12);
  --app-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-family: var(--app-font-family);
}

/* Flujo interno de Ventas con la misma lógica visual del portal de distribuidores. */
#salesOrderDialog {
  width: min(1160px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  background: var(--bg);
}

.sales-order-dialog-form {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 22px 24px 18px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sales-dialog-header {
  min-height: 72px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.sales-dialog-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 0 8px;
}

.sales-dialog-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  text-align: left;
}

.sales-dialog-step span {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.sales-dialog-step strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.sales-dialog-step.active,
.sales-dialog-step.done {
  border-color: var(--accent);
  color: var(--text);
}

.sales-dialog-step.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  box-shadow: inset 3px 0 0 var(--accent);
}

.sales-dialog-step.active span,
.sales-dialog-step.done span {
  background: var(--accent);
  color: #fff;
}

.sales-dialog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}

.sales-dialog-main {
  min-width: 0;
}

.sales-dialog-step-content {
  min-height: 510px;
  padding: 22px 0 12px;
}

.sales-dialog-step-heading,
.sales-dialog-product-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.sales-dialog-step-heading h3,
.sales-dialog-step-heading p,
.sales-dialog-product-heading h4,
.sales-dialog-product-heading p {
  margin-top: 0;
  margin-bottom: 6px;
}

.sales-dialog-customer-block {
  display: grid;
  gap: 12px;
}

.sales-dialog-category-grid,
.sales-dialog-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.sales-dialog-category-card,
.sales-dialog-product-card {
  display: flex;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.sales-dialog-category-card {
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 12px;
}

.sales-dialog-category-card:hover,
.sales-dialog-category-card.selected,
.sales-dialog-product-card:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  box-shadow: inset 3px 0 0 var(--accent);
}

.sales-dialog-category-mark {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-soft));
  color: var(--accent);
  font-weight: 900;
}

.sales-dialog-category-card > span:last-child,
.sales-dialog-product-card {
  display: grid;
  gap: 4px;
}

.sales-dialog-category-card small,
.sales-dialog-product-card small,
.sales-dialog-product-breadcrumb {
  color: var(--muted);
  font-size: 12px;
}

.sales-dialog-product-card {
  min-height: 112px;
  padding: 14px;
}

.sales-dialog-product-breadcrumb {
  color: var(--accent);
  font-weight: 800;
}

.sales-dialog-search {
  flex: 0 1 270px;
}

.sales-dialog-selected-product,
.sales-dialog-config-card,
.sales-dialog-compact-customer,
.sales-dialog-empty-state {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.sales-dialog-selected-product,
.sales-dialog-compact-customer {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  border-left: 3px solid var(--accent);
}

.sales-dialog-selected-product span,
.sales-dialog-compact-customer span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sales-dialog-config-card {
  display: grid;
  gap: 16px;
}

.sales-dialog-cart-list {
  display: grid;
  gap: 12px;
}

.sales-dialog-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.sales-dialog-cart-item h4,
.sales-dialog-cart-item p {
  margin: 4px 0 0;
}

.sales-dialog-cart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.sales-dialog-checkout-grid,
.sales-dialog-confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sales-dialog-checkout-section,
.sales-dialog-confirm-section,
.sales-dialog-address-section {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.sales-dialog-checkout-section h4,
.sales-dialog-confirm-section h4 {
  margin: 0;
}

.sales-dialog-address-section {
  margin-top: 16px;
}

.sales-dialog-summary {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 0;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  overflow: hidden;
}

.sales-dialog-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  font-weight: 900;
}

.sales-dialog-summary-section,
.sales-dialog-summary-total {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.sales-dialog-summary-section .eyebrow {
  margin: 0 0 2px;
}

.sales-dialog-summary-section small,
.sales-dialog-summary-total small,
.sales-dialog-summary-item small {
  color: var(--muted);
  font-size: 12px;
}

.sales-dialog-summary-item {
  display: grid;
  gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.sales-dialog-summary-item:last-child {
  border-bottom: 0;
}

.sales-dialog-summary-total strong {
  color: var(--accent);
  font-size: 18px;
}

.sales-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 920px) {
  .sales-dialog-layout {
    grid-template-columns: 1fr;
  }

  .sales-dialog-summary {
    position: static;
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  #salesOrderDialog {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
  }

  .sales-order-dialog-form {
    max-height: calc(100dvh - 14px);
    padding: 16px 14px;
  }

  .sales-dialog-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sales-dialog-category-grid,
  .sales-dialog-product-grid,
  .sales-dialog-checkout-grid,
  .sales-dialog-confirm-grid {
    grid-template-columns: 1fr;
  }

  .sales-dialog-step-heading,
  .sales-dialog-product-heading,
  .sales-dialog-cart-item {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-dialog-search {
    flex-basis: auto;
  }

  .sales-dialog-cart-actions {
    justify-content: flex-start;
  }
}

html.mobile-scroll-locked,
body.mobile-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

body.mobile-scroll-locked dialog[open],
body.mobile-scroll-locked .detail-panel,
body.mobile-scroll-locked .sidebar {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Mobile application shell: the navigation becomes a drawer and detail views become focused sheets. */
.mobile-nav-backdrop,
.mobile-detail-close {
  display: none;
}

@media (max-width: 860px) {
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .app-shell,
  .app-shell.sidebar-hidden {
    position: relative;
    display: block;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    display: block;
    width: min(300px, calc(100vw - 42px));
    height: 100dvh;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
    box-shadow: 18px 0 40px rgba(10, 15, 22, 0.2);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  .app-shell:not(.sidebar-hidden) .sidebar,
  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .app-shell.sidebar-hidden .sidebar {
    display: block;
    transform: translateX(-105%);
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    width: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.32);
  }

  .mobile-nav-backdrop.hidden {
    display: none !important;
  }

  .main {
    width: 100%;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    padding: 10px 14px 32px;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(213, 221, 231, 0.72);
    background: var(--bg);
  }

  .topbar-title {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    gap: 8px;
  }

  .topbar h1 {
    max-width: calc(100vw - 172px);
    overflow: hidden;
    font-size: 18px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-toggle,
  .notification-button,
  .theme-toggle {
    width: 38px;
    min-height: 38px;
  }

  .session-bar {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .session-user {
    max-width: 72px;
    overflow: hidden;
    font-size: 10px;
    text-align: right;
    white-space: nowrap;
  }

  .session-user strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-password-button {
    display: none;
  }

  #logoutButton {
    min-height: 36px;
    padding: 0 8px;
    font-size: 11px;
  }

  .workbench {
    border-radius: 14px;
    overflow: visible;
  }

  .workbench-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .workbench-header h2 {
    font-size: 22px;
    line-height: 1.1;
  }

  .workbench-header p {
    font-size: 12px;
  }

  .workbench-header .header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .workbench-header .header-actions > :only-child {
    grid-column: 1 / -1;
  }

  .workbench-header .header-actions > button {
    width: 100%;
    min-height: 42px;
    white-space: normal;
  }

  .filters {
    gap: 8px;
    padding: 12px;
  }

  .filter-field {
    font-size: 10px;
  }

  .filter-field input,
  .filter-field select,
  .filter-field .multi-filter summary {
    min-height: 44px;
  }

  .filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    min-height: 0;
    gap: 8px;
  }

  .filter-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }

  #orderFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #orderFilters .filter-field:first-child,
  #orderFilters .filter-actions {
    grid-column: 1 / -1;
  }

  .view-tabs {
    display: flex;
    max-width: calc(100vw - 28px);
    margin: 0 12px 12px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: thin;
  }

  .view-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .table-wrap table {
    min-width: 760px;
  }

  #ordersTableWrap {
    overflow: visible;
  }

  #ordersTableWrap table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  #ordersTableWrap thead {
    display: none;
  }

  #ordersTableWrap tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  #ordersTableWrap tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    cursor: pointer;
  }

  #ordersTableWrap tr.selected {
    border-color: var(--accent);
    background: rgba(7, 114, 184, 0.12);
    box-shadow: inset 4px 0 0 var(--accent);
  }

  #ordersTableWrap td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-content: start;
    min-width: 0;
    border: 0;
    border-top: 1px solid rgba(213, 221, 231, 0.62);
    padding: 9px 12px;
    white-space: normal;
  }

  #ordersTableWrap td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  #ordersTableWrap td.mobile-card-main {
    order: -1;
    grid-column: 1 / -1;
    border-top: 0;
    padding: 12px;
  }

  #ordersTableWrap td.mobile-card-main::before {
    display: none;
  }

  #ordersTableWrap .title-cell strong {
    font-size: 17px;
    line-height: 1.18;
  }

  #ordersTableWrap .title-cell span {
    margin-top: 4px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #ordersTableWrap .application-cell {
    min-width: 0;
  }

  #ordersTableWrap .application-check {
    align-items: flex-start;
    white-space: normal;
  }

  .report-table-wrap .digital-report-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .report-table-wrap .digital-report-table thead {
    display: none;
  }

  .report-table-wrap .digital-report-table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .report-table-wrap .digital-report-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }

  .report-table-wrap .digital-report-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
    border: 0;
    border-top: 1px solid rgba(213, 221, 231, 0.62);
    padding: 9px 12px;
    text-align: left;
    white-space: normal;
  }

  .report-table-wrap .digital-report-table td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .report-table-wrap .digital-report-table td.mobile-card-main {
    order: -1;
    grid-column: 1 / -1;
    border-top: 0;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
  }

  .report-table-wrap .digital-report-table td.mobile-card-main::before {
    display: none;
  }

  #ordersTableWrap,
  .bank-dashboard-table-wrap,
  .report-table-wrap,
  .statistics-table-wrap {
    max-height: none;
  }

  .detail-panel {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: none;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    background: var(--bg);
    padding: 68px 14px 28px;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(10, 15, 22, 0.2);
  }

  .app-shell.mobile-detail-open .detail-panel {
    display: block;
  }

  .mobile-detail-close {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 96;
    align-items: center;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--accent);
    padding: 0 12px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(10, 15, 22, 0.12);
  }

  .app-shell.mobile-detail-open .mobile-detail-close {
    display: inline-flex;
  }

  .app-shell.mobile-detail-open .main {
    pointer-events: none;
  }

  .detail-panel h2 {
    font-size: 24px;
  }

  .detail-meta {
    gap: 6px;
    margin: 10px 0 14px;
  }

  .detail-section {
    padding: 14px 0;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .field-value-list {
    gap: 8px;
  }

  .field-value {
    padding: 11px;
  }

  .dialog-form {
    padding: 16px;
  }

  .dialog-header {
    align-items: flex-start;
  }

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

  .dialog-actions > button {
    width: 100%;
    min-height: 44px;
  }

  .home-view {
    margin-top: 12px;
  }

  .home-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-panel-header .ghost-button {
    width: 100%;
  }

  .permission-section-title {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .form-list-actions,
  .branch-actions,
  .catalog-manager-actions,
  .finish-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .form-list-actions > button,
  .branch-actions > button,
  .catalog-manager-actions > button,
  .finish-card-actions > button {
    width: 100%;
    min-height: 42px;
  }

  .report-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .report-toolbar > button {
    width: 100%;
    min-height: 42px;
  }

  .inventory-catalog-toolbar {
    align-items: stretch;
    padding: 0 12px 12px;
  }

  .catalog-context-actions,
  .finish-context-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-context-actions > button,
  .finish-context-actions > button {
    width: 100%;
  }

  .customer-catalogs-workbench .workbench-header {
    align-items: stretch;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--app-font-family);
}

body.theme-dark {
  --bg: #0f172a;
  --panel: #172033;
  --text: #f8fafc;
  --muted: #aab6c8;
  --line: #2b3a50;
  --accent: #0ea5e9;
  --accent-strong: #38bdf8;
  --accent-soft: #12314a;
  --brand: #0ea5e9;
  --panel-soft: #12314a;
  --selection: #164664;
  --sellomatic-black: #f8fafc;
  --sellomatic-gray: #8ea0b6;
  --ink: #f8fafc;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  --selected-row-bg: #0f4f6b;
  --selected-row-border: #38bdf8;
  --selected-row-stripe: #00a8df;
  --selected-row-shadow: rgba(14, 165, 233, 0.34);
  --table-header-bg: #111c2e;
  --table-header-border: #36516f;
  --table-header-shadow: rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

body.theme-dark .login-view {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.18), transparent 38%),
    linear-gradient(315deg, rgba(232, 63, 149, 0.12), transparent 42%),
    var(--bg);
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark dialog,
body.theme-dark .multi-filter summary,
body.theme-dark .ghost-button,
body.theme-dark .icon-button {
  border-color: var(--line);
  background: #101827;
  color: var(--text);
}

body.theme-dark .ghost-button:hover,
body.theme-dark .icon-button:hover {
  border-color: var(--accent);
}

body.theme-dark .sidebar {
  border-right-color: var(--line);
  background: linear-gradient(180deg, #111827 0%, #0c1423 100%);
}

body.theme-dark .module-item.is-current,
body.theme-dark tbody tr:hover {
  background: #12314a;
}

body.theme-dark .module-item.status-planned {
  color: #8da0b8;
}

body.theme-dark .home-panel,
body.theme-dark .home-metric-card,
body.theme-dark .home-focus {
  background: #111c2e;
}

body.theme-dark .filters,
body.theme-dark .permission-toolbar,
body.theme-dark .forms-list-panel,
body.theme-dark .branch-admin,
body.theme-dark .customer-catalog-panel {
  background: #101827;
}

body.theme-dark .permission-section-title,
body.theme-dark .permission-resource {
  background: #142033;
  color: var(--text);
}

body.theme-dark .readonly-control {
  background: #101827;
}

body.theme-dark .permission-row,
body.theme-dark th,
body.theme-dark td {
  border-color: var(--line);
}

body.theme-dark .view-tabs {
  background: #101827;
}

body.theme-dark .detail-panel {
  background: #0f172a;
}

body.theme-dark .pill {
  background: #243247;
  color: #e5eefb;
}

body.theme-dark .field-value,
body.theme-dark .field-builder-row,
body.theme-dark .form-list-item,
body.theme-dark .branch-item,
body.theme-dark .choice-field,
body.theme-dark .selected-form-note,
body.theme-dark .validation-panel,
body.theme-dark .catalog-manager-item,
body.theme-dark .catalog-context-panel,
body.theme-dark .catalog-module-panel,
body.theme-dark .customer-catalogs-workbench,
body.theme-dark .pricing-rule-editor,
body.theme-dark .pricing-entry-card,
body.theme-dark .pricing-entry-detail,
body.theme-dark .pricing-subsection,
body.theme-dark .finish-list-panel,
body.theme-dark .finish-detail-panel,
body.theme-dark .finish-group-card,
body.theme-dark .finish-option-row,
body.theme-dark .finish-group-editor,
body.theme-dark .finish-options-editor,
body.theme-dark .catalog-link-panel {
  border-color: var(--line);
  background: #111c2e;
}

body.theme-dark .form-list-item.archived,
body.theme-dark .branch-item.archived {
  background: #101827;
}

body.theme-dark .private-field {
  border-color: rgba(232, 63, 149, 0.38);
  background: rgba(232, 63, 149, 0.14);
}

body.theme-dark .file-download {
  border-color: rgba(14, 165, 233, 0.42);
  background: #12314a;
  color: #7dd3fc;
}

body.theme-dark .private-chip {
  color: #f9a8d4;
}

body.theme-dark .toast-item {
  background: #e5eefb;
  color: #0f172a;
}

body.theme-dark .toast-item.error {
  background: #fee2e2;
  color: #7f1d1d;
}

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

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.login-view {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(7, 114, 184, 0.16), transparent 38%),
    linear-gradient(315deg, rgba(0, 168, 223, 0.12), transparent 42%),
    #f8fafc;
}

.login-panel {
  width: min(420px, 100%);
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-logo {
  display: block;
  width: min(280px, 100%);
  height: auto;
  margin: 0 0 22px;
  object-fit: contain;
}

.login-panel h1,
.topbar h1,
.workbench h2,
.dialog-form h2 {
  margin: 0;
  letter-spacing: 0;
}

.login-panel h1 {
  margin-bottom: 24px;
  font-size: 30px;
}

.login-session-notice {
  margin: -8px 0 18px;
  padding: 11px 12px;
  border: 1px solid rgba(7, 114, 184, 0.28);
  border-radius: 8px;
  background: rgba(7, 114, 184, 0.08);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

label {
  display: block;
  margin: 14px 0 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.label-help {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.label-help::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 300;
  width: min(320px, calc(100vw - 48px));
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 12px;
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.label-help:hover::after,
.label-help:focus::after,
.label-help:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

th .label-help::after {
  top: calc(100% + 8px);
  bottom: auto;
}

.password-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 14px 0 6px;
}

.password-label-row label {
  margin: 0;
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  padding-right: 48px;
}

.password-visibility-toggle {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateY(-50%);
}

.password-visibility-toggle:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.password-visibility-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.password-eye-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 999px / 720px;
  transform: rotate(-4deg);
}

.password-eye-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.password-eye-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  right: -3px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: rotate(-35deg);
  transform-origin: center;
}

.password-visibility-toggle:not([aria-pressed="true"]) .password-eye-icon::after {
  opacity: 1;
}

.password-visibility-toggle span:last-child {
  display: none;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(7, 114, 184, 0.16);
}

.primary-button,
.ghost-button,
.icon-button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 800;
}

.primary-button {
  background: var(--accent);
  color: white;
  padding: 0 16px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.primary-button:hover {
  background: var(--accent-strong);
}

.ghost-button {
  background: #fff;
  color: var(--text);
  border-color: var(--line);
  padding: 0 14px;
}

.ghost-button:hover {
  border-color: #94a3b8;
}

.icon-button {
  width: 38px;
  padding: 0;
  background: #fff;
  border-color: var(--line);
  color: var(--muted);
}

.login-panel .primary-button {
  width: 100%;
  margin-top: 18px;
}

.remember-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.remember-user input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--accent);
}

.login-help {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-version-meta {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.app-version-summary {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.app-release-details {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.app-release-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.app-release-details summary::-webkit-details-marker {
  display: none;
}

.app-release-details summary::after {
  content: "+";
  margin-left: auto;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.app-release-details[open] summary::after {
  content: "-";
}

.app-release-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
}

.app-release-content {
  max-height: min(42vh, 320px);
  margin-top: 6px;
  padding: 10px 8px 4px 0;
  overflow-y: auto;
}

.app-version-summary-title,
.app-version-summary-version {
  display: block;
  color: var(--text);
}

.app-version-summary-title {
  margin-bottom: 6px;
}

.app-version-summary-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-version-summary-list ul {
  margin: 3px 0 0 16px;
  padding: 0;
}

.app-version-summary-list li {
  margin: 0;
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(7, 114, 184, 0.18), transparent 42%),
    linear-gradient(315deg, rgba(0, 168, 223, 0.14), transparent 44%),
    var(--bg);
}

.welcome-card {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: min(620px, 100%);
  text-align: center;
}

.welcome-card img {
  width: min(420px, 100%);
  height: auto;
  object-fit: contain;
}

.welcome-card p {
  margin: 0;
  color: var(--text);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0;
}

.welcome-version-meta {
  margin-top: -8px;
  font-size: 13px;
}

.session-expired-card {
  gap: 14px;
}

.session-expired-card p {
  max-width: 700px;
  font-size: 30px;
  line-height: 1.22;
}

.session-expired-countdown {
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
}

.session-keep-button {
  margin-top: 8px;
  min-width: 240px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app-shell.sidebar-hidden {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.app-shell.reports-mode,
.app-shell.sidebar-hidden.reports-mode {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.detail-hidden,
.app-shell.sidebar-hidden.detail-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.order-detail-focus {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.order-detail-focus .main {
  display: none;
}

.app-shell.order-detail-focus .detail-panel {
  grid-column: 1;
  border-left: 0;
  padding: clamp(20px, 3vw, 38px);
}

.app-shell.reports-mode .detail-panel,
.app-shell.detail-hidden .detail-panel {
  display: none;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 292px;
  border-right: 1px solid rgba(7, 114, 184, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  padding: 18px 14px;
  overflow: visible;
  overscroll-behavior: contain;
  transform: translateX(calc(-100% + 4px));
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sidebar::after {
  content: "\2630";
  position: absolute;
  top: 24px;
  right: -38px;
  width: 34px;
  height: 48px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  opacity: 0.9;
  box-shadow: 8px 0 18px rgba(10, 15, 22, 0.16);
}

.app-shell:not(.sidebar-hidden) .sidebar,
.app-shell.sidebar-open .sidebar,
.app-shell.sidebar-hover-open .sidebar {
  overflow-y: auto;
  transform: translateX(0);
  box-shadow: 18px 0 40px rgba(10, 15, 22, 0.18);
}

.app-shell:not(.sidebar-hidden) .sidebar::after,
.app-shell.sidebar-open .sidebar::after,
.app-shell.sidebar-hover-open .sidebar::after {
  opacity: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin-bottom: 22px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid var(--line);
}

.sidebar-close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 38px;
  height: 38px;
  font-size: 24px;
  line-height: 1;
}

.brand-logo {
  width: 64px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

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

.brand span {
  color: var(--muted);
  font-size: 13px;
}

.nav-label {
  margin: 0 0 10px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.module-nav {
  display: grid;
  gap: 8px;
}

.module-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.module-item:hover:not(:disabled) {
  border-color: rgba(7, 114, 184, 0.32);
  background: rgba(7, 114, 184, 0.06);
  transform: translateX(2px);
}

.module-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(7, 114, 184, 0.1);
  color: var(--accent);
  font-weight: 900;
}

.module-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.module-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.module-item strong {
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.module-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.module-item.is-current {
  border-color: rgba(0, 168, 223, 0.56);
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--cyan), 0 12px 24px rgba(7, 114, 184, 0.12);
}

.module-item.is-current .module-icon {
  background: var(--accent);
  color: #fff;
}

.module-item:disabled {
  cursor: not-allowed;
}

.module-item.status-planned {
  color: #697586;
  opacity: 0.72;
}

.home-module-item {
  margin-bottom: 16px;
}

.home-module-item.is-current {
  border-color: rgba(0, 168, 223, 0.56);
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--cyan), 0 12px 24px rgba(7, 114, 184, 0.12);
}

.home-module-item.is-current .module-icon {
  background: var(--accent);
  color: #fff;
}

.main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 22px 58px;
}

.topbar,
.workbench-header,
.dialog-header,
.session-bar {
  display: flex;
  align-items: center;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

.theme-toggle {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.app-shell.sidebar-hidden .sidebar-toggle {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.topbar,
.workbench-header,
.dialog-header {
  justify-content: space-between;
  gap: 16px;
}

.topbar h1 {
  font-size: 28px;
}

.session-bar {
  gap: 10px;
}

.notification-wrap {
  position: relative;
  flex: 0 0 auto;
}

.notification-button {
  position: relative;
  font-size: 16px;
}

.notification-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 28px));
  max-height: 440px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.notification-header strong {
  font-size: 15px;
}

.notification-list {
  display: grid;
}

.notification-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.notification-item:hover {
  background: var(--accent-soft);
}

.notification-item.unread {
  border-left: 4px solid var(--accent);
}

.notification-item small,
.notification-empty {
  color: var(--muted);
}

.notification-empty {
  padding: 14px 12px;
}

.notification-help {
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.session-password-button {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  text-decoration: none;
}

.session-password-button:hover {
  text-decoration: underline;
}

.session-user {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.session-user strong {
  display: block;
  color: var(--text);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.metric {
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: inset 0 3px 0 var(--accent);
}

.metric:nth-child(2) {
  box-shadow: inset 0 3px 0 var(--magenta);
}

.metric:nth-child(3) {
  box-shadow: inset 0 3px 0 #e0bd00;
}

.metric:nth-child(4) {
  box-shadow: inset 0 3px 0 var(--cyan);
}

.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric strong {
  display: block;
  margin-top: 5px;
  font-size: 24px;
  line-height: 1.05;
}

.metric small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.home-view {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 16px;
  align-items: stretch;
}

.home-hero > div:first-child,
.home-focus,
.home-metric-card,
.home-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-hero > div:first-child {
  padding: 22px;
  border-color: rgba(0, 168, 223, 0.32);
  box-shadow: inset 0 3px 0 var(--accent), var(--shadow);
}

.home-hero h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: 0;
}

.home-hero p:not(.eyebrow) {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.home-focus {
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 18px;
  box-shadow: inset 0 3px 0 var(--magenta), var(--shadow);
}

.home-focus span,
.home-metric-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-focus strong {
  display: block;
  color: var(--text);
  font-size: 52px;
  line-height: 1;
}

.home-focus small,
.home-metric-card small,
.home-panel-header p,
.home-activity-copy small,
.home-quick-item small {
  color: var(--muted);
}

.home-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.home-metric-card {
  display: grid;
  gap: 9px;
  min-height: 124px;
  padding: 16px;
  box-shadow: inset 0 3px 0 var(--accent);
}

.home-metric-card:nth-child(2) {
  box-shadow: inset 0 3px 0 var(--cyan);
}

.home-metric-card:nth-child(3) {
  box-shadow: inset 0 3px 0 var(--green);
}

.home-metric-card:nth-child(4) {
  box-shadow: inset 0 3px 0 var(--print-yellow);
}

.home-metric-card strong {
  color: var(--text);
  font-size: 34px;
  line-height: 1;
}

.home-metric-card small {
  font-size: 13px;
  line-height: 1.35;
}

.home-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 16px;
  align-items: start;
}

.home-panel {
  overflow: hidden;
}

.home-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.home-panel-header h3 {
  margin: 0;
  font-size: 18px;
}

.home-panel-header p {
  margin: 4px 0 0;
  font-size: 13px;
}

.home-activity-list,
.home-quick-list {
  display: grid;
}

.home-activity-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.home-activity-item:first-child {
  border-top: 0;
}

.home-activity-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.home-activity-icon svg {
  width: 20px;
  height: 20px;
}

.home-activity-copy {
  min-width: 0;
}

.home-activity-copy strong,
.home-activity-copy span,
.home-activity-copy small {
  display: block;
}

.home-activity-copy strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.home-activity-copy span {
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.home-activity-copy small {
  margin-top: 5px;
  font-size: 12px;
}

.home-quick-list {
  gap: 8px;
  padding: 12px;
}

.home-quick-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
}

.home-quick-item:not(:disabled):hover {
  border-color: rgba(7, 114, 184, 0.32);
  background: rgba(7, 114, 184, 0.06);
}

.home-quick-item strong,
.home-quick-item small {
  display: block;
}

.home-quick-item small {
  margin-top: 4px;
  font-size: 12px;
}

.home-quick-value {
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
}

.home-empty {
  padding: 18px 16px;
  color: var(--muted);
  font-size: 13px;
}

.workbench {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

#requestsView {
  overflow: visible;
}

.bank-dashboard-workbench {
  overflow: visible;
}

.bank-dashboard-workbench .workbench-header {
  box-shadow: inset 0 3px 0 var(--accent);
}

.bank-dashboard-metrics {
  padding: 12px 16px 0;
}

.bank-dashboard-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px 12px;
}

.bank-dashboard-strip span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.bank-dashboard-strip strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.bank-dashboard-strip.danger {
  border-color: #fecaca;
  background: #fff1f2;
}

.bank-dashboard-strip.warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.bank-dashboard-strip.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.bank-dashboard-filters {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 220px);
}

.bank-dashboard-table-wrap {
  max-height: clamp(330px, calc(100vh - 340px), 760px);
}

.bank-dashboard-table,
.bank-dashboard-history-table {
  min-width: 900px;
}

.bank-dashboard-table {
  table-layout: fixed;
}

.bank-dashboard-table th:nth-child(1),
.bank-dashboard-table td:nth-child(1) {
  width: 300px;
}

.bank-dashboard-table th:nth-child(2),
.bank-dashboard-table td:nth-child(2) {
  width: 230px;
}

.bank-dashboard-table th:nth-child(3),
.bank-dashboard-table td:nth-child(3),
.bank-dashboard-table th:nth-child(4),
.bank-dashboard-table td:nth-child(4) {
  width: 130px;
}

.bank-dashboard-table th:nth-child(5),
.bank-dashboard-table td:nth-child(5),
.bank-dashboard-table th:nth-child(6),
.bank-dashboard-table td:nth-child(6) {
  width: 110px;
}

.bank-dashboard-table th:nth-child(n+3),
.bank-dashboard-table td:nth-child(n+3) {
  white-space: nowrap;
}

.bank-dashboard-table td {
  vertical-align: middle;
}

.bank-account-cell {
  min-width: 250px;
}

.bank-account-content {
  display: flex;
  gap: 12px;
  align-items: center;
}

.bank-account-content strong {
  display: block;
}

.bank-brand-mark {
  display: inline-flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--bank-provider-bg, #334155);
  color: var(--bank-provider-color, #fff);
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: 0;
}

.bank-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bank-brand-mark.has-logo {
  background: var(--bank-provider-bg, #fff);
  border-color: transparent;
  padding: 0;
}

.bank-brand-mark.has-logo .bank-brand-fallback {
  display: none;
}

.bank-brand-mark.logo-failed img {
  display: none;
}

.bank-brand-mark.logo-failed .bank-brand-fallback {
  display: inline;
}

.bank-brand-bbva,
.bank-brand-banamex {
  background: var(--bank-provider-bg, #074682);
  color: var(--bank-provider-color, #fff);
}

.bank-brand-hsbc {
  background: var(--bank-provider-bg, #2f3745);
  color: var(--bank-provider-color, #fff);
}

.bank-brand-santander,
.bank-brand-banorte {
  background: var(--bank-provider-bg, #c21b17);
  color: var(--bank-provider-color, #fff);
}

.bank-brand-mercado-pago {
  background: var(--bank-provider-bg, #e8f3fb);
  color: var(--bank-provider-color, #59697b);
}

.bank-brand-mark.has-logo {
  background: var(--bank-provider-bg, #fff);
  color: var(--bank-provider-color, #334155);
}

.bank-dashboard-table .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bank-status {
  min-width: 118px;
  justify-content: center;
  white-space: nowrap;
}

.bank-status.requested {
  color: #92400e;
  background: #fef3c7;
}

.bank-status.updated {
  color: #065f46;
  background: #d1fae5;
}

.bank-status.overdue {
  color: #991b1b;
  background: #fee2e2;
}

.bank-dashboard-table .bank-time {
  color: var(--text);
  white-space: nowrap;
}

.bank-dashboard-row.bank-row-requested.bank-signal-red td {
  background: #fff7f7;
}

.bank-dashboard-row.bank-row-requested.bank-signal-yellow td {
  background: #fffbeb;
}

.bank-dashboard-row.bank-row-updated td {
  background: #fbfefc;
}

body.theme-dark .bank-dashboard-strip {
  background: #101827;
}

body.theme-dark .bank-dashboard-strip.danger {
  border-color: #7f1d1d;
  background: #2a1418;
}

body.theme-dark .bank-dashboard-strip.warning {
  border-color: #92400e;
  background: #2b2114;
}

body.theme-dark .bank-dashboard-strip.ok {
  border-color: #166534;
  background: #10251b;
}

body.theme-dark .bank-dashboard-row.bank-row-requested.bank-signal-red td {
  background: #25161c;
}

body.theme-dark .bank-dashboard-row.bank-row-requested.bank-signal-yellow td {
  background: #241f13;
}

body.theme-dark .bank-dashboard-row.bank-row-updated td {
  background: #111c2e;
}

body.theme-dark .bank-brand-mercado-pago {
  background: var(--bank-provider-bg, #18344b);
  color: var(--bank-provider-color, #dbeafe);
}

body.theme-dark .bank-brand-mark.has-logo {
  background: var(--bank-provider-bg, #fff);
  color: var(--bank-provider-color, #334155);
}

.bank-detail-actions {
  display: grid;
  gap: 8px;
}

.bank-detail-actions .primary-button,
.bank-detail-actions .ghost-button {
  width: 100%;
}

.bank-comment-form {
  display: grid;
  gap: 8px;
}

.bank-comment-form textarea {
  min-height: 78px;
  resize: vertical;
}

.bank-comments-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.bank-comment {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  padding: 10px;
}

.bank-comment p {
  margin: 0;
  line-height: 1.35;
}

.bank-comment span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.bank-catalog-panel {
  padding: 16px;
}

.bank-catalog-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.bank-catalog-form label {
  margin-top: 0;
}

.bank-catalog-actions {
  display: flex;
  gap: 8px;
}

.bank-catalog-table-wrap {
  max-height: clamp(260px, calc(100vh - 410px), 620px);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bank-catalog-table {
  min-width: 760px;
}

.bank-catalog-table tbody tr,
.bank-provider-table tbody tr {
  cursor: pointer;
}

.bank-provider-admin {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.bank-provider-admin-header h3,
.bank-provider-admin-header p {
  margin: 0;
}

.bank-provider-admin-header p {
  margin-top: 4px;
  color: var(--muted);
}

.bank-provider-form {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(96px, 130px) 84px 84px minmax(180px, 260px) auto auto auto;
  gap: 12px;
  align-items: end;
}

.bank-provider-form label {
  margin-top: 0;
}

.bank-provider-form input[type="color"] {
  min-width: 64px;
  padding: 4px;
}

.bank-provider-form input[type="file"] {
  min-width: 180px;
}

.bank-provider-table {
  min-width: 760px;
}

.bank-provider-table td:first-child {
  width: 76px;
}

.bank-catalog-active {
  color: #065f46;
  background: #d1fae5;
}

.bank-catalog-inactive {
  color: #64748b;
  background: #e2e8f0;
}

.bank-request-dialog-form {
  width: min(100% - 28px, 560px);
}

.bank-request-dialog-form textarea {
  resize: vertical;
}

.permissions-workbench {
  overflow: visible;
}

.workbench-header {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 3px 0 var(--accent);
}

.workbench.release-mode .workbench-header {
  box-shadow: inset 0 3px 0 var(--magenta);
}

.workbench.digital-mode .workbench-header {
  box-shadow: inset 0 3px 0 #FF9900;
}

.view-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 16px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 4px;
}

.view-tab {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  font-weight: 900;
}

.view-tab.active {
  background: var(--accent);
  color: #fff;
}

.workbench-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.filters input,
.filters select,
.filters .multi-filter {
  min-width: 0;
}

.filter-field {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.filter-field input,
.filter-field select,
.filter-field .multi-filter summary {
  min-height: 46px;
}

.filter-field .multi-filter {
  width: 100%;
}

#searchInput {
  min-width: min(100%, 240px);
}

#requesterFilter {
  min-width: min(100%, 210px);
}

#dateFromFilter,
#dateToFilter {
  min-width: min(100%, 170px);
}

.filter-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  min-height: 68px;
}

.filter-actions .primary-button,
.filter-actions .ghost-button {
  min-width: 110px;
}

.multi-filter {
  position: relative;
  min-height: 46px;
}

.multi-filter summary {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 10px 32px 10px 11px;
  list-style: none;
  cursor: pointer;
}

.multi-filter summary::-webkit-details-marker {
  display: none;
}

.multi-filter summary::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 12px;
  color: var(--muted);
}

.multi-filter[open] summary {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(7, 114, 184, 0.16);
}

.multi-filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 80;
  display: grid;
  gap: 4px;
  width: max(100%, 220px);
  max-height: min(340px, calc(100vh - 220px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 8px;
  box-shadow: var(--shadow);
}

.table-wrap {
  overflow: auto;
}

#ordersTableWrap {
  max-height: clamp(280px, calc(100vh - 390px), 680px);
}

.permission-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(280px, 1fr);
  gap: 16px;
  align-items: end;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.permission-toolbar label {
  margin-top: 0;
}

.permission-user-picker {
  display: grid;
  gap: 8px;
  align-self: start;
}

.selected-user-editor {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(140px, 0.8fr) minmax(150px, 0.8fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.selected-user-meta {
  color: var(--muted);
  font-size: 13px;
}

.selected-user-meta strong,
.selected-user-meta span {
  display: block;
}

.selected-user-meta strong {
  color: var(--text);
  font-size: 14px;
}

.status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.status-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.permission-matrix {
  display: grid;
  gap: 0;
}

.permission-section {
  border-bottom: 1px solid var(--line);
}

.permission-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f2f7fb;
  color: var(--ink);
  font-weight: 900;
}

.permission-section-help {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.permission-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 52px;
  border-top: 1px solid #edf0f5;
}

.permission-resource {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.permission-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px 16px;
  align-items: center;
  padding: 10px 14px;
}

.permission-scope-actions {
  grid-template-columns: repeat(4, minmax(135px, 1fr));
}

.permission-scope-check {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
}

.permission-scope-check:has(input:checked) {
  border-color: var(--accent);
  background: rgba(7, 114, 184, 0.08);
  color: var(--ink);
  font-weight: 800;
}

.permission-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.permission-check input {
  width: 14px;
  height: 14px;
  padding: 0;
  accent-color: var(--accent);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

th,
td {
  border-bottom: 1px solid #edf0f5;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--table-header-border);
  background: var(--table-header-bg);
  box-shadow: 0 1px 0 var(--table-header-border), 0 4px 10px var(--table-header-shadow);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}

.sort-header:hover,
.sort-header.active {
  color: var(--accent);
}

.sort-icon {
  min-width: 12px;
  color: var(--accent);
  font-size: 12px;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover {
  background: #eff8ff;
}

tbody tr.selected td {
  background: var(--selected-row-bg);
  border-top: 2px solid var(--selected-row-border);
  border-bottom: 2px solid var(--selected-row-border);
  box-shadow: inset 0 1px 0 var(--selected-row-shadow), inset 0 -1px 0 var(--selected-row-shadow);
}

tbody tr.selected td:first-child {
  border-left: 8px solid var(--selected-row-stripe);
  padding-left: 6px;
}

tbody tr.selected td:last-child {
  border-right: 2px solid var(--selected-row-border);
}

tbody tr.selected:hover td {
  background: var(--selected-row-bg);
}

.title-cell strong,
.title-cell span {
  display: block;
}

.title-cell span,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.table-subtext {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.application-cell {
  min-width: 180px;
}

.application-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.application-check input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--accent);
}

.application-cell small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  background: #eef2f7;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFFF00;
  box-shadow: 0 0 0 1px #000;
}

.dot.red {
  background: var(--red);
}

.dot.none {
  background: #FFFF00;
}

.dot.yellow {
  background: #FF9900;
}

.dot.orange {
  background: #FF9900;
}

.dot.pink {
  background: #D5A6BD;
}

.dot.green,
.dot.done {
  background: #11734B;
}

.dot.closed {
  background: #B10202;
}

.detail-panel {
  height: 100%;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: #fff;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.detail-empty {
  display: grid;
  min-height: 100%;
  align-content: center;
  gap: 8px;
  color: var(--muted);
}

.detail-panel h2 {
  margin: 0;
  font-size: 22px;
}

.detail-focus-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.detail-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}

.detail-section {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.detail-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
}

.detail-section p {
  margin: 0;
  line-height: 1.45;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-grid.single-control {
  grid-template-columns: 1fr;
}

.field-value-list {
  display: grid;
  gap: 10px;
}

.field-value {
  border: 1px solid #e5eaf1;
  border-radius: 6px;
  padding: 10px;
  background: #fbfcfd;
}

.field-value strong,
.field-value p {
  display: block;
  margin: 0;
}

.field-help {
  display: block;
  margin: -2px 0 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.authorized-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.authorized-detail-header h2 {
  margin: 0;
}

.authorized-facts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 16px 0;
}

.authorized-fact,
.authorized-note-item {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.authorized-fact strong,
.authorized-fact span {
  display: block;
}

.authorized-fact span {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.authorized-alert {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 11px;
  overflow-wrap: anywhere;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: var(--surface-soft);
}

.authorized-client-form {
  display: grid;
}

.authorized-form-section,
.authorized-notes-section {
  display: grid;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.authorized-section-heading h3,
.authorized-section-heading p {
  margin: 0;
}

.authorized-section-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.authorized-portal-options,
.authorized-note-form,
.authorized-note-list,
.authorized-category-picker {
  display: grid;
  gap: 8px;
}

.authorized-portal-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.authorized-portal-option strong,
.authorized-portal-option small,
.authorized-access-modes strong,
.authorized-access-modes small {
  display: block;
}

.authorized-portal-option small,
.authorized-access-modes small {
  margin-top: 2px;
  color: var(--muted);
}

.authorized-discount-field,
.authorized-discount-input {
  display: grid;
}

.authorized-discount-field {
  gap: 6px;
  margin: 0;
}

.authorized-discount-input {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.authorized-discount-input input {
  min-width: 0;
  border: 0;
  background: transparent;
}

.authorized-discount-input span {
  padding: 0 12px;
  color: var(--muted);
  font-weight: 700;
}

.authorized-category-fieldset {
  min-width: 0;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
}

.authorized-category-fieldset legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.authorized-access-modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.authorized-access-modes label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  cursor: pointer;
}

.authorized-access-modes label {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.authorized-category-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 220px;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.authorized-category-picker.hidden,
.authorized-category-option.hidden,
.authorized-category-empty.hidden {
  display: none;
}

.authorized-category-option {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 7px;
  border-radius: 4px;
  cursor: pointer;
}

.authorized-category-option input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

.authorized-category-option span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.authorized-category-option:hover {
  background: var(--surface-soft);
}

.authorized-category-search {
  display: grid;
  gap: 5px;
  margin: 0;
}

.authorized-save-actions {
  display: flex;
  justify-content: flex-end;
  padding: 14px 0 18px;
}

.authorized-note-form label {
  margin: 0;
}

.authorized-note-form button {
  justify-self: end;
}

.authorized-note-item p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.authorized-note-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 720px) {
  .authorized-detail-header,
  .authorized-note-meta {
    display: grid;
  }

  .authorized-facts-grid {
    grid-template-columns: 1fr;
  }
}

.field-value p {
  margin-top: 4px;
  color: var(--text);
  line-height: 1.4;
}

.field-value input,
.field-value select,
.field-value textarea {
  margin-top: 8px;
}

.readonly-control {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px 11px;
}

.billing-pending-branch-display {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--text);
}

.billing-pending-detail-form {
  display: grid;
  gap: 12px;
}

.billing-pending-detail-form label {
  margin: 0 0 6px;
}

.compact-choice {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.report-choice {
  border: 0;
  padding: 0;
}

.catalog-editor {
  display: grid;
  gap: 12px;
}

.catalog-editor textarea {
  min-height: 128px;
  resize: vertical;
}

.catalog-group,
.catalog-rows {
  display: grid;
  gap: 8px;
}

.catalog-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog-group-header label,
.catalog-row label {
  margin: 0;
}

.catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px auto;
  gap: 8px;
  align-items: end;
}

.machine-catalog-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.catalog-row label span {
  display: block;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.catalog-clicks-field input {
  text-align: right;
}

.catalog-remove-button {
  min-width: 74px;
  padding: 0 10px;
}

.machine-clicks-check {
  min-height: 38px;
  margin: 0;
  white-space: nowrap;
}

.private-field {
  border-color: rgba(232, 63, 149, 0.28);
  background: rgba(232, 63, 149, 0.06);
}

.file-download {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid rgba(7, 114, 184, 0.28);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 5px 10px;
  font-weight: 800;
  text-decoration: none;
}

.file-download:hover {
  border-color: var(--accent);
}

.erp-order-link {
  color: var(--accent);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.erp-order-link:hover {
  color: var(--accent-strong);
}

.dynamic-fields {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.selected-form-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(7, 114, 184, 0.22);
  border-radius: 6px;
  background: var(--accent-soft);
  padding: 10px;
}

.selected-form-note span {
  color: var(--muted);
  font-size: 13px;
}

.private-chip {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(232, 63, 149, 0.12);
  color: #9d1e61;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
}

.choice-field {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}

.choice-field legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 6px 14px 6px 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.inline-check input {
  width: 14px;
  height: 14px;
  padding: 0;
  accent-color: var(--accent);
}

.form-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
}

.builder-panel,
.forms-list-panel {
  padding: 16px;
}

.forms-list-panel {
  border-left: 1px solid var(--line);
  background: #fbfcfd;
}

.forms-list-panel h3,
.builder-header h3 {
  margin: 0;
  font-size: 15px;
}

.builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
}

.fields-builder {
  display: grid;
  gap: 12px;
}

.field-builder-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.validation-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfd;
  padding: 10px;
}

.validation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.validation-title strong {
  font-size: 13px;
}

.validation-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.validation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
}

.validation-wide {
  grid-column: 1 / -1;
}

.field-builder-row.dragging {
  opacity: 0.58;
  border-style: dashed;
}

.field-builder-row.drag-over-before {
  box-shadow: inset 0 3px 0 var(--accent);
}

.field-builder-row.drag-over-after {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.field-builder-top,
.field-order-actions {
  display: flex;
  align-items: center;
}

.field-builder-top {
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.field-order-actions {
  gap: 6px;
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.field-order-actions .icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.field-builder-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}

.forms-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.forms-list-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-weight: 800;
  text-decoration: underline;
}

.form-list-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.form-list-item.archived {
  opacity: 0.68;
  background: #f8fafc;
}

.form-list-main {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.form-list-main:hover strong {
  color: var(--accent);
}

.form-list-item strong,
.form-list-item span,
.form-list-item small,
.form-list-main strong,
.form-list-main span,
.form-list-main small {
  display: block;
}

.form-list-item span,
.form-list-item small,
.form-list-main span,
.form-list-main small {
  color: var(--muted);
}

.form-list-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.danger-button {
  color: #b42318;
  border-color: #f1b8b2;
}

.branch-admin {
  border-top: 1px solid var(--line);
  padding: 16px;
  background: #fbfcfd;
}

.branch-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.branch-header h3,
.branch-header p {
  margin: 0;
}

.branch-header p {
  margin-top: 4px;
  color: var(--muted);
}

.branch-form {
  margin-top: 14px;
}

.branch-form-main {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
}

.branch-workshop-check {
  min-height: 42px;
  white-space: nowrap;
}

.branch-pickup-fields {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.branch-pickup-fields h4,
.branch-pickup-fields p {
  margin: 0;
}

.branch-pickup-fields p {
  margin-top: 3px;
  color: var(--muted);
}

.branch-address-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.branch-address-grid label {
  display: grid;
  gap: 5px;
}

.branch-address-wide {
  grid-column: 1 / -1;
}

.branches-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.branch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.branch-item.archived {
  opacity: 0.64;
  background: #f8fafc;
}

.branch-item strong,
.branch-item span {
  display: block;
}

.branch-item span {
  color: var(--muted);
  font-size: 13px;
}

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

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  border-left: 3px solid var(--line);
  padding-left: 10px;
}

.timeline-item strong,
.timeline-item span {
  display: block;
}

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

.comment-mention-picker {
  display: grid;
  gap: 6px;
}

.comment-mention-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.comment-mention-help {
  color: var(--muted);
  font-size: 12px;
}

.comment-mention-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.comment-mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.comment-mention-chip button {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 900;
}

.comment-mention-chip button:hover {
  background: rgba(7, 114, 184, 0.14);
}

.comment-mention-suggestions {
  display: grid;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.comment-mention-option {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.comment-mention-option:last-child {
  border-bottom: 0;
}

.comment-mention-option:hover,
.comment-mention-option:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: none;
}

.comment-form > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bank-comment-form > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bank-comment-form > label select {
  width: 100%;
}

.comment-form > label select {
  width: 100%;
}

.comment-mention {
  display: inline !important;
  color: var(--accent);
}

dialog {
  width: min(680px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.36);
}

#salesOrderDialog {
  width: min(980px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

#customerOrderDialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  overflow: auto;
}

#customerOrderDialog::backdrop {
  background: var(--bg);
}

#customerOrderCatalogDialog,
#clientSettingsDialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  overflow: auto;
  overflow-x: hidden;
}

#customerOrderCatalogDialog::backdrop,
#clientSettingsDialog::backdrop {
  background: var(--bg);
}

.dialog-form {
  padding: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sales-order-dialog-form {
  width: min(980px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.sales-order-dialog-form * {
  min-width: 0;
  box-sizing: border-box;
}

.sales-customer-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.sales-customer-search-shell {
  position: relative;
  z-index: 20;
}

.sales-customer-search-field {
  display: grid;
  gap: 6px;
}

.sales-customer-search-help {
  color: var(--muted);
  font-size: 12px;
}

.sales-customer-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  gap: 8px;
  max-height: min(360px, 48vh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  z-index: 50;
}

.sales-customer-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.sales-customer-option:hover,
.sales-customer-option.selected,
.sales-customer-option:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sales-customer-option-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sales-customer-option-main strong,
.sales-customer-option-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-customer-option-main small,
.sales-customer-option-type,
.sales-customer-empty {
  color: var(--muted);
  font-size: 12px;
}

.sales-customer-option-type {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel);
  font-weight: 800;
}

.sales-customer-no-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px;
}

.sales-customer-no-results > span {
  display: grid;
  gap: 3px;
}

.sales-customer-no-results small {
  color: var(--muted);
}

.sales-customer-create-result {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.sales-customer-create-result span,
.sales-create-customer-toggle > span {
  font-size: 20px;
  line-height: 1;
}

.sales-customer-result-count {
  margin: 2px 4px 0;
}

.sales-selected-customer {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
}

.sales-selected-customer span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sales-selected-customer.empty {
  border-left-color: var(--line);
  background: var(--panel-soft);
}

.sales-selected-customer.empty span,
.sales-selected-customer.empty strong {
  color: var(--muted);
}

.sales-create-customer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  box-shadow: 0 8px 22px rgba(14, 165, 233, 0.18);
}

.sales-create-customer-toggle.active {
  box-shadow: none;
}

.sales-dialog-line,
.sales-new-customer-box,
.sales-address-capture {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.sales-new-customer-box {
  gap: 18px;
  padding: 18px;
}

.sales-new-customer-basic,
.sales-new-customer-optional-sections {
  display: grid;
  gap: 12px;
}

.sales-new-customer-phone-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.sales-extra-phones-toggle {
  min-height: 44px;
  padding: 0 8px;
}

.sales-new-customer-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.sales-new-customer-details summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.sales-new-customer-details summary::-webkit-details-marker {
  display: none;
}

.sales-new-customer-details summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.sales-new-customer-details summary small {
  color: var(--muted);
  font-weight: 500;
}

.sales-details-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
  transition: transform 160ms ease;
}

.sales-new-customer-details[open] .sales-details-icon {
  transform: rotate(45deg);
}

.sales-details-status {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.sales-details-content {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.sales-fiscal-email-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sales-use-primary-email {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#salesOrderDialog .sales-use-primary-email input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
}

.sales-use-primary-email:has(input:checked) {
  color: var(--accent);
}

.sales-use-primary-email:has(input:disabled) {
  opacity: .55;
  cursor: not-allowed;
}

.sales-save-new-customer {
  justify-self: start;
  min-width: 260px;
}

.sales-dialog-line {
  border-left: 3px solid var(--accent);
}

.sales-dialog-line > .form-row {
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(92px, 0.8fr)) 42px;
  align-items: end;
}

.sales-dialog-line select,
.sales-dialog-line input,
.sales-dialog-line textarea,
.sales-order-dialog-form select,
.sales-order-dialog-form input,
.sales-order-dialog-form textarea {
  width: 100%;
  max-width: 100%;
}

.sales-fixed-finish-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sales-order-detail {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.align-end {
  align-self: end;
}

.wide-field {
  grid-column: span 2;
}

.timeline-inline {
  display: block;
  margin-bottom: 4px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

#duplicateCustomerCatalogSubcategoryDialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

#duplicateCustomerCatalogSubcategoryDialog .catalog-duplicate-dialog-form {
  width: 100%;
  box-sizing: border-box;
}

.catalog-duplicate-source {
  margin: 4px 0 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  color: var(--muted);
}

button.ui-action-loading,
input.ui-action-loading {
  cursor: wait;
  opacity: 0.82;
}

button.ui-action-loading::before {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: -0.1em;
  animation: ui-action-spin 0.7s linear infinite;
}

button.ui-action-loading-compact::before {
  margin-right: 0;
}

.ui-action-scope-loading {
  cursor: wait;
}

@keyframes ui-action-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  button.ui-action-loading::before {
    animation-duration: 1.4s;
  }
}

.compact-actions {
  margin-top: 6px;
}

.customer-catalog-dialog {
  width: min(1320px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 38px);
  background: var(--bg);
  overflow: visible;
}

.customer-catalog-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.product-catalog-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "context"
    "editor";
}

.product-catalog-product-panel {
  grid-area: editor;
  grid-column: auto;
  align-content: start;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.catalog-context-panel {
  grid-area: context;
  display: grid;
  grid-column: 1 / -1;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.catalog-context-panel h3,
.catalog-context-panel p {
  margin: 0;
}

.catalog-context-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1fr) max-content minmax(280px, auto);
  gap: 12px;
  align-items: end;
}

.catalog-context-grid label {
  margin: 0;
}

.catalog-context-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog-deleted-toggle {
  align-self: end;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.catalog-inline-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.catalog-inline-editor[data-editor-mode="category"] {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-inline-editor[data-editor-mode="subcategory"] {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-inline-editor[data-editor-mode="category"] #customerCatalogSubcategoryEditorSection,
.catalog-inline-editor[data-editor-mode="subcategory"] #customerCatalogCategoryEditorSection {
  display: none;
}

.compact-editor-panel {
  align-content: start;
  padding: 14px;
}

.compact-catalog-list {
  max-height: 250px;
}

.customer-product-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.customer-product-editor-head h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
}

.customer-product-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(260px, 100%);
}

.customer-product-badges .pill.inactive {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fecaca;
}

body.theme-dark .customer-product-badges .pill.inactive {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.42);
  border-color: rgba(248, 113, 113, 0.4);
}

.customer-product-badges .pill.deleted {
  color: #7c2d12;
  background: #ffedd5;
  border-color: #fed7aa;
}

body.theme-dark .customer-product-badges .pill.deleted {
  color: #fed7aa;
  background: rgba(124, 45, 18, 0.5);
  border-color: rgba(251, 146, 60, 0.45);
}

.product-editor-tabs {
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.product-editor-tabs .view-tab {
  min-height: 38px;
}

.product-editor-section {
  display: grid;
  gap: 14px;
}

.pricing-model-help {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

#customerCatalogSubcategoryConfigForm {
  padding: 18px;
}

.product-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-summary-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.product-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-summary-grid strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 2.2vw, 30px);
}

.product-editor-actions {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.customer-catalog-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.customer-catalog-panel h3,
.customer-catalog-panel p {
  margin: 0;
}

.catalog-category-image-field {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.catalog-category-image-preview {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
}

.catalog-category-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-category-image-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.catalog-category-image-actions input[type="file"] {
  width: 100%;
}

@media (max-width: 620px) {
  .catalog-category-image-field {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .sales-order-dialog-form {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  .sales-dialog-line > .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-dialog-line > .form-row .wide-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .sales-order-dialog-form {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    padding: 12px;
  }

  .sales-dialog-line > .form-row {
    grid-template-columns: 1fr;
  }

  .sales-dialog-line > .form-row .wide-field {
    grid-column: auto;
  }

  .sales-customer-option {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .sales-customer-no-results {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-customer-create-result,
  .sales-save-new-customer {
    width: 100%;
  }

  .sales-new-customer-phone-row {
    grid-template-columns: 1fr;
  }

  .sales-new-customer-details summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sales-details-status {
    grid-column: 2;
    justify-self: start;
  }
}

.catalog-manager-list {
  max-height: min(52vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

.catalog-manager-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.catalog-manager-item.selected {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.catalog-manager-main {
  min-width: 0;
  overflow-wrap: anywhere;
}

.catalog-manager-main p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.catalog-manager-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.catalog-manager-actions .ghost-button {
  min-height: 34px;
  padding: 7px 10px;
}

.catalog-finish-list {
  display: grid;
  gap: 10px;
}

.catalog-finish-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.catalog-assignment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.catalog-assignment-grid section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.catalog-check-list {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}

.catalog-check-row {
  justify-self: stretch;
  width: auto;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.catalog-check-row span {
  display: grid;
  gap: 2px;
}

.catalog-check-row small {
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-text-editors textarea {
  min-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.catalog-link-panel {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 10%);
}

.pricing-rule-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.pricing-rule-editor h4,
.pricing-rule-editor p {
  margin: 0;
}

.pricing-rule-layout {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.pricing-combination-filters {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.pricing-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pricing-filter-heading span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.pricing-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 9px;
  align-items: end;
}

.pricing-filter-clear {
  min-height: 42px;
}

.pricing-entry-list {
  display: grid;
  gap: 7px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.pricing-entry-card {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
}

.pricing-entry-card:hover,
.pricing-entry-card.selected {
  border-color: var(--accent);
}

.pricing-entry-card.selected {
  box-shadow: inset 4px 0 0 var(--cyan);
}

.pricing-entry-card span,
.pricing-entry-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.pricing-entry-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
}

.pricing-detail-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.pricing-detail-header h4 {
  margin: 0;
  font-size: 21px;
}

.pricing-fields-grid,
.pricing-fixed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pricing-fixed-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.pricing-field {
  display: grid;
  gap: 5px;
  margin: 0;
}

.pricing-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pricing-subsection {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.compact-empty {
  min-height: 112px;
}

.customer-catalogs-workbench {
  overflow: visible;
}

.customer-catalogs-workbench .workbench-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.catalog-module-tabs {
  margin: 14px 16px 0;
}

.website-content-panel {
  margin: 14px 16px 0;
}

.website-content-panel > summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  cursor: pointer;
}

.website-content-panel[open] > summary {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.website-content-panel .stack-form {
  max-width: 860px;
}

.website-contact-fields {
  display: grid;
  gap: 12px;
  margin: 8px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.website-contact-fields legend {
  padding: 0 6px;
  font-weight: 700;
}

.website-contact-fields label {
  display: grid;
  gap: 6px;
}

.catalog-module-panel {
  padding: 16px;
}

.customer-catalog-module-form {
  display: grid;
  gap: 16px;
}

.customer-catalog-module-form .customer-catalog-layout,
.customer-catalog-module-form .finish-catalog-layout {
  min-width: 0;
}

.customer-finish-catalog-dialog {
  width: min(1320px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 38px);
  background: var(--bg);
  overflow: visible;
}

.finish-catalog-toolbar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(320px, 0.9fr);
  gap: 12px;
  align-items: end;
  margin: 10px 0 16px;
}

.segmented-control {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.segment-button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  font-weight: 900;
}

.segment-button.active {
  background: var(--accent);
  color: #fff;
}

.finish-search,
.finish-new-row {
  display: grid;
  gap: 6px;
}

.finish-new-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.finish-context-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.finish-context-grid {
  display: grid;
  grid-template-columns: auto minmax(220px, 320px) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.finish-context-grid > label {
  display: grid;
  gap: 6px;
}

.finish-context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.finish-inline-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.finish-catalog-layout {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.finish-list-panel,
.finish-detail-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.finish-group-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.finish-group-card,
.finish-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.finish-group-card.compact {
  grid-template-columns: 1fr;
  gap: 4px;
  min-height: 52px;
  padding: 9px 10px;
  cursor: pointer;
}

.finish-group-card.compact:hover {
  border-color: var(--accent);
}

.finish-group-card.selected {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--cyan);
}

.finish-group-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.finish-group-main p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.finish-group-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finish-group-main span b {
  color: var(--text);
}

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

.danger-ghost {
  color: var(--red);
}

.finish-detail-content {
  display: grid;
  gap: 16px;
}

.finish-detail-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.finish-detail-header h3 {
  margin: 0;
  font-size: 26px;
}

.finish-group-editor,
.finish-options-editor {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.finish-group-editor-compact {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1.15fr) auto;
  gap: 12px;
  align-items: end;
}

.finish-group-editor-compact > label:not(.inline-check) {
  display: grid;
  gap: 6px;
}

.finish-group-editor-compact .compact-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.finish-options-editor {
  display: grid;
  gap: 12px;
}

.finish-option-new-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.finish-option-new-row.variable {
  grid-template-columns: minmax(180px, 1fr) 100px 86px 96px minmax(150px, 0.8fr) 100px auto;
}

.finish-options-list {
  display: grid;
  gap: 10px;
}

.finish-option-editor-layout {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.finish-option-picker {
  max-height: 360px;
  overflow: auto;
}

.finish-option-detail {
  min-height: 220px;
}

.finish-option-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1fr);
  gap: 8px;
}

.finish-option-fields.variable {
  grid-template-columns: minmax(180px, 1fr) 100px 86px 96px minmax(150px, 0.8fr) 100px;
}

.finish-option-field {
  display: grid;
  gap: 5px;
  margin: 0;
}

.finish-option-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.selected-option-row {
  grid-template-columns: minmax(0, 1fr);
  background: transparent;
}

.digital-reports-view {
  padding: 0 16px 16px;
}

.report-filters {
  margin: 0 -16px 14px;
}

.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.digital-reports {
  display: grid;
  gap: 16px;
}

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

.report-metrics .metric {
  min-height: 72px;
  padding: 10px 12px;
}

.report-metrics .metric strong {
  font-size: 22px;
}

.report-section h3 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
}

.report-table-wrap {
  max-height: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.report-table-wrap table {
  min-width: 900px;
}

.statistics-workbench {
  overflow: visible;
}

.statistics-filters {
  border-bottom: 1px solid var(--line);
}

.statistics-content {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.statistics-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.statistics-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.statistics-card h3 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  text-transform: uppercase;
}

.statistics-wide-card {
  grid-column: 1 / -1;
}

.statistics-table-wrap {
  max-height: 320px;
  border: 0;
  border-radius: 0;
}

.statistics-table-wrap table {
  min-width: 0;
}

.statistics-trend-table {
  width: min(100%, 920px);
  min-width: 640px;
  table-layout: fixed;
}

.statistics-trend-table th,
.statistics-trend-table td {
  padding: 10px 12px;
}

.statistics-trend-table th:not(:first-child),
.statistics-trend-table td:not(:first-child) {
  width: 132px;
}

.statistics-date-cell {
  width: 150px;
}

.statistics-card tbody tr {
  cursor: default;
}

.statistics-card tbody tr:hover,
body.theme-dark .statistics-card tbody tr:hover {
  background: transparent;
}

.statistics-bars,
.statistics-rank-list {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}

.statistics-bar-row,
.statistics-rank-row {
  display: grid;
  gap: 6px;
}

.statistics-bar-label,
.statistics-rank-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.statistics-bar-label span,
.statistics-rank-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics-bar-label strong,
.statistics-rank-main strong {
  min-width: 68px;
  text-align: right;
  white-space: nowrap;
}

.statistics-bar-track,
.statistics-rank-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent-soft);
}

.statistics-bar-track span,
.statistics-rank-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.statistics-rank-track span {
  background: var(--cyan);
}

.number-cell {
  text-align: right;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tapetin-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  align-items: flex-end;
}

.tapetin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 8px 12px 8px 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.tapetin-toggle:hover {
  border-color: var(--accent);
}

.tapetin-toggle-mascot,
.tapetin-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.tapetin-avatar {
  width: 48px;
  height: 48px;
}

.tapetin-toggle svg,
.tapetin-avatar svg,
.tapetin-toggle img,
.tapetin-avatar img {
  width: 100%;
  height: 100%;
}

.tapetin-toggle img,
.tapetin-avatar img {
  border-radius: 10px;
  object-fit: contain;
}

.tapetin-rug-shadow {
  fill: rgba(7, 114, 184, 0.16);
}

.tapetin-rug-body {
  fill: var(--cyan);
  stroke: var(--ink);
  stroke-width: 2;
}

.tapetin-rug-fold {
  fill: var(--print-yellow);
  stroke: var(--ink);
  stroke-width: 2;
}

.tapetin-rug-stripe,
.tapetin-smile {
  fill: none;
  stroke: var(--magenta);
  stroke-linecap: round;
  stroke-width: 3;
}

.tapetin-eye {
  fill: var(--ink);
}

.tapetin-toggle-label {
  font-weight: 800;
}

.tapetin-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  display: flex;
  width: min(430px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 108px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.tapetin-header,
.tapetin-admin-toolbar,
.tapetin-composer-actions,
.tapetin-preview-actions,
.tapetin-ticket-actions,
.tapetin-ticket-card-head,
.tapetin-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tapetin-header {
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.tapetin-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tapetin-identity div {
  display: grid;
  gap: 2px;
}

.tapetin-identity span,
.tapetin-message time,
.tapetin-message small,
.tapetin-ticket-item small,
.tapetin-ticket-card-head span,
.tapetin-screenshot-preview span {
  color: var(--muted);
  font-size: 12px;
}

.tapetin-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.tapetin-tab {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  font-weight: 700;
  cursor: pointer;
}

.tapetin-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.tapetin-pane {
  min-height: 0;
}

#tapetinChatPane {
  display: flex;
  min-height: 0;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
}

#tapetinChatPane.hidden,
#tapetinAdminPane.hidden {
  display: none;
}

.tapetin-messages {
  display: flex;
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.tapetin-widget.has-preview .tapetin-messages {
  min-height: 96px;
  max-height: 210px;
  flex-basis: 120px;
}

.tapetin-message {
  width: fit-content;
  max-width: 88%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 10px;
  line-height: 1.4;
}

.tapetin-message.user {
  align-self: flex-end;
  border-color: rgba(232, 63, 149, 0.35);
  background: rgba(232, 63, 149, 0.08);
}

.tapetin-message.assistant {
  align-self: flex-start;
}

.tapetin-message time,
.tapetin-message small {
  display: block;
  margin-top: 6px;
}

.tapetin-preview {
  min-height: 0;
  max-height: min(360px, calc(100vh - 380px));
  overflow-y: auto;
  padding: 0 12px 12px;
}

.tapetin-preview-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  padding: 12px;
}

.tapetin-preview-card.blocked {
  border-color: var(--yellow);
  background: rgba(217, 119, 6, 0.1);
}

.tapetin-preview-head {
  justify-content: space-between;
  align-items: flex-start;
}

.tapetin-preview-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.tapetin-preview-head span,
.tapetin-ticket-status {
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent-strong);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.tapetin-preview-list,
.tapetin-warnings ul,
.tapetin-preview-card details ul {
  margin: 10px 0;
  padding-left: 18px;
}

.tapetin-preview-list li {
  margin-bottom: 6px;
}

.tapetin-preview-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.tapetin-warnings {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

.tapetin-preview-actions {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin: 10px -2px -2px;
  background: var(--accent-soft);
  padding: 10px 2px 2px;
  z-index: 1;
}

.tapetin-screenshot-preview {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0 12px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.tapetin-screenshot-preview img {
  width: 54px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
}

.tapetin-screenshot-preview div {
  display: grid;
  min-width: 0;
}

.tapetin-screenshot-preview strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tapetin-composer {
  border-top: 1px solid var(--line);
  padding: 12px;
}

.tapetin-composer textarea {
  width: 100%;
  resize: vertical;
}

.tapetin-composer-actions {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 8px;
}

.tapetin-file-button {
  cursor: pointer;
}

#tapetinScreenshotInput {
  display: none;
}

#tapetinAdminPane {
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
  min-height: 420px;
  max-height: 590px;
  overflow: hidden;
}

.tapetin-admin-toolbar {
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.tapetin-ticket-list {
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
}

.tapetin-ticket-item {
  display: grid;
  width: 100%;
  gap: 3px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.tapetin-ticket-item:hover,
.tapetin-ticket-item.is-current {
  background: var(--accent-soft);
}

.tapetin-ticket-detail {
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.tapetin-ticket-card {
  display: grid;
  gap: 8px;
}

.tapetin-ticket-card-head {
  justify-content: space-between;
}

.tapetin-ticket-card p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 8px;
}

.tapetin-ticket-card label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.tapetin-ticket-card textarea,
.tapetin-ticket-card input {
  width: 100%;
}

.tapetin-ticket-image {
  width: 100%;
  max-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: var(--bg);
}

.tapetin-ticket-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.toast {
  position: fixed;
  inset: 18px auto auto 50%;
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: inherit;
  transform: translateX(-50%);
  z-index: 2147483647;
}

.toast::backdrop {
  background: transparent;
  pointer-events: none;
}

.toast-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  padding: 13px 14px 13px 16px;
  box-shadow: 0 18px 45px rgba(2, 8, 23, 0.34);
}

.toast-item.error {
  border-color: #fecaca;
  background: #991b1b;
  color: #fff;
}

.toast-message {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.toast-close {
  min-width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.toast-close:hover,
.toast-close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

.client-body {
  min-height: 100vh;
  background: #f3f6f9;
}

.client-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

body.client-portal-active .client-shell {
  width: min(1500px, calc(100% - 16px));
}

.client-topbar,
.client-dashboard-header,
.client-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.client-topbar {
  margin-bottom: 22px;
}

.client-topbar-actions,
.client-session-actions,
.client-section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.client-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.client-brand img {
  width: 190px;
  height: auto;
  object-fit: contain;
}

.client-brand h1,
.client-dashboard-header h2,
.client-section-header h2 {
  margin: 0;
  letter-spacing: 0;
}

.client-brand h1 {
  font-size: clamp(24px, 4vw, 38px);
}

.client-internal-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.client-auth-view {
  display: grid;
  min-height: calc(100vh - 150px);
  place-items: center;
}

.client-panel {
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.client-form-heading {
  margin-bottom: 18px;
}

.client-form-heading h2 {
  margin: 0;
  letter-spacing: 0;
}

.client-form .primary-button {
  width: 100%;
  margin-top: 18px;
}

.client-auth-links {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 12px 0 4px;
}

.client-remember-email {
  width: fit-content;
  margin-top: 12px;
}

.client-return-link {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
}

.client-notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 800;
}

.client-notice.success {
  border-color: rgba(22, 163, 74, 0.38);
  background: rgba(22, 163, 74, 0.12);
}

.client-notice.error {
  border-color: rgba(220, 38, 38, 0.38);
  background: rgba(220, 38, 38, 0.1);
}

.client-portal {
  display: grid;
  gap: 12px;
}

.client-dashboard-header {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.client-dashboard-header h2 {
  font-size: clamp(24px, 3vw, 32px);
}

.client-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 8px solid var(--yellow);
  border-radius: 8px;
  background: var(--panel);
}

.client-status-card.approved {
  border-left-color: var(--green);
}

.client-status-card.rejected,
.client-status-card.suspended {
  border-left-color: var(--red);
}

.client-status-card strong,
.client-status-card span {
  display: block;
}

.client-status-card strong {
  margin-bottom: 6px;
  font-size: 22px;
}

.client-status-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.client-status-warning {
  margin: 10px 0 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

.client-request-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.client-request-panel.order-detail-expanded {
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.client-request-panel.order-detail-expanded .client-history-panel {
  display: none;
}

.client-request-panel.order-detail-expanded .client-detail-panel {
  position: static;
  height: auto;
  min-height: 0;
  overflow: visible;
  overscroll-behavior: auto;
  border-left: 0;
  border-radius: 8px;
}

/* El detalle completo se desplaza con la página, no dentro del panel lateral. */
.client-request-panel.order-detail-expanded .detail-focus-toolbar {
  margin-bottom: 18px;
}

.client-request-panel.order-detail-expanded .customer-order-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.client-request-panel.order-detail-expanded .customer-order-summary-grid .field-value,
.client-request-panel.order-detail-expanded .customer-order-item-card {
  min-width: 0;
  padding: 14px;
}

.client-request-panel.order-detail-expanded .customer-order-items-list {
  gap: 14px;
}

.client-request-panel.order-detail-expanded .customer-order-item-card {
  display: grid;
  gap: 8px;
}

.client-request-panel.order-detail-expanded .customer-order-item-card > p {
  overflow-wrap: anywhere;
}

.client-request-panel.order-detail-expanded .private-field {
  border-color: var(--line);
  background: var(--panel);
}

/* Portal de distribuidores: resumen lateral y ficha completa con jerarquía propia. */
.customer-order-detail {
  min-width: 0;
}

.customer-order-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.customer-order-detail-header > div {
  min-width: 0;
}

.customer-order-detail-header h2,
.customer-order-detail-header p {
  margin-top: 0;
}

.customer-order-detail-header .ghost-button {
  flex: 0 0 auto;
}

.customer-order-status-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.customer-order-status-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--accent) 7%, var(--panel)));
}

.customer-order-status-card.payment {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}

.customer-order-status-card > span,
.customer-order-overview span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.customer-order-status-card > strong {
  justify-self: start;
}

.customer-order-status-card > small {
  color: var(--muted);
  line-height: 1.4;
}

.customer-order-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.customer-order-overview > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.customer-order-overview strong {
  overflow-wrap: anywhere;
  font-size: 1.08rem;
}

.customer-order-sidebar-detail .detail-focus-toolbar {
  position: sticky;
  top: -24px;
  z-index: 4;
  margin: -24px -24px 14px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(10px);
}

.customer-order-sidebar-detail .customer-order-detail-header {
  display: grid;
}

.customer-order-sidebar-detail .customer-order-detail-header .ghost-button {
  width: 100%;
  text-align: center;
}

.customer-order-sidebar-detail .customer-order-status-cards {
  grid-template-columns: 1fr;
}

.customer-order-sidebar-detail .customer-order-status-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 12px;
}

.customer-order-sidebar-detail .customer-order-status-card > span,
.customer-order-sidebar-detail .customer-order-status-card > small {
  grid-column: 1;
}

.customer-order-sidebar-detail .customer-order-status-card > strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 150px;
  text-align: right;
}

.customer-order-sidebar-detail .customer-order-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.customer-order-sidebar-detail .customer-order-overview > div {
  padding: 10px;
}

.customer-order-sidebar-detail .customer-order-overview strong {
  font-size: .94rem;
}

.customer-order-sidebar-sections {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.customer-order-sidebar-disclosure {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.customer-order-sidebar-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 850;
}

.customer-order-sidebar-disclosure > summary::-webkit-details-marker {
  display: none;
}

.customer-order-sidebar-disclosure > summary::before {
  content: "+";
  grid-column: 2;
  grid-row: 1;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 900;
}

.customer-order-sidebar-disclosure[open] > summary::before {
  content: "−";
}

.customer-order-sidebar-disclosure > summary > span {
  grid-column: 1;
  grid-row: 1;
}

.customer-order-sidebar-disclosure > summary > small {
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-order-sidebar-disclosure[open] > summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.customer-order-sidebar-disclosure-body {
  padding: 12px;
}

.customer-order-sidebar-disclosure-body > .detail-section {
  padding: 0;
  border-top: 0;
}

.customer-order-sidebar-disclosure-body > .detail-section > h3 {
  display: none;
}

.customer-order-sidebar-detail .field-value-list,
.customer-order-sidebar-detail .timeline,
.customer-order-sidebar-detail .comment-form {
  gap: 8px;
}

.customer-order-sidebar-detail .field-value {
  padding: 9px;
}

.customer-order-sidebar-detail .order-follow-up-upload {
  grid-template-columns: 1fr;
}

.customer-order-sidebar-detail .order-follow-up-upload button,
.customer-order-sidebar-detail .comment-form button {
  width: 100%;
}

.customer-order-more-copy {
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.client-request-panel.order-detail-expanded .client-detail-panel {
  padding: clamp(20px, 3vw, 38px);
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
}

.customer-order-focused-detail {
  width: min(1420px, 100%);
  margin: 0 auto;
}

.customer-order-focused-detail .detail-focus-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: calc(clamp(20px, 3vw, 38px) * -1) calc(clamp(20px, 3vw, 38px) * -1) 18px;
  padding: 16px clamp(20px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px);
}

.customer-order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
  gap: 18px;
  align-items: start;
}

.customer-order-detail-column {
  display: grid;
  gap: 18px;
  min-width: 0;
  align-content: start;
}

.customer-order-focused-detail .detail-section {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent);
}

.customer-order-focused-detail .detail-section h3 {
  margin-bottom: 14px;
  color: var(--text);
  font-size: .86rem;
  letter-spacing: .035em;
}

.customer-order-focused-detail .customer-order-items-list {
  gap: 14px;
}

.customer-order-focused-detail .customer-order-item-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.customer-order-focused-detail .comment-form {
  display: grid;
  gap: 10px;
}

.customer-order-focused-detail .comment-form button {
  justify-self: start;
}

.customer-order-payment-box {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

@media (max-width: 860px) {
  .customer-order-status-cards,
  .customer-order-overview,
  .customer-order-detail-grid {
    grid-template-columns: 1fr;
  }

  .customer-order-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-order-detail-header .ghost-button {
    width: 100%;
    text-align: center;
  }

  .customer-order-focused-detail .detail-focus-toolbar {
    margin: -20px -20px 14px;
    padding: 12px 20px;
  }

  .customer-order-focused-detail .customer-order-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .customer-order-focused-detail .customer-order-overview {
    grid-template-columns: 1fr;
  }

  .customer-order-focused-detail .detail-focus-toolbar {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

.client-detail-panel {
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  padding: 24px;
  box-shadow: none;
}

.client-detail-panel h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.client-detail-panel .detail-empty {
  min-height: 420px;
}

.client-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}

.client-readonly-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.client-readonly-grid span,
.client-readonly-grid strong {
  display: block;
}

.client-readonly-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.client-readonly-grid strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.client-history-panel {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.client-history-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.client-history-table {
  min-width: 760px;
}

.client-history-table th,
.client-history-table td {
  white-space: nowrap;
}

.client-history-table td:nth-child(2) {
  white-space: normal;
  min-width: 230px;
}

.client-history-table .file-download {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-history-table tbody tr {
  cursor: pointer;
}

.client-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
  font-size: 12px;
  font-weight: 900;
}

.client-status.approved {
  background: rgba(22, 163, 74, 0.14);
  color: #166534;
}

.client-status.rejected,
.client-status.suspended {
  background: rgba(220, 38, 38, 0.12);
  color: #991b1b;
}

.client-status.new {
  background: rgba(7, 114, 184, 0.14);
  color: #075985;
}

.client-status.green {
  background: rgba(22, 163, 74, 0.14);
  color: #166534;
}

.client-status.yellow {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

.client-status.orange {
  background: rgba(234, 88, 12, 0.14);
  color: #9a3412;
}

.client-status.red,
.client-status.closed {
  background: rgba(220, 38, 38, 0.12);
  color: #991b1b;
}

.client-status.to_apply {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

.client-module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-logistics-panel {
  display: block;
  min-height: 520px;
}

.customer-logistics-content {
  margin-top: 18px;
}

.customer-logistics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.customer-logistics-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.customer-logistics-card h3 {
  margin: 0;
}

.customer-selection-list,
.customer-logistics-history {
  display: grid;
  gap: 9px;
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

.customer-selection-row,
.customer-logistics-history-row {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-alt);
}

.customer-selection-row {
  grid-template-columns: auto minmax(0, 1fr);
  cursor: pointer;
}

.customer-selection-row input[type="number"] {
  grid-column: 2;
}

.sales-workbench-tabs {
  margin-bottom: 18px;
}

@media (max-width: 860px) {
  .customer-logistics-grid {
    grid-template-columns: 1fr;
  }

  .customer-selection-list,
  .customer-logistics-history {
    max-height: none;
  }
}

.portal-module-tab {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.portal-module-tab.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.client-settings-dialog {
  width: min(1240px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 38px);
  background: var(--bg);
  overflow: visible;
}

.customer-order-form {
  width: min(1180px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 42px);
  background: var(--bg);
}

.order-draft-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line, #cbd8e6);
  border-left: 4px solid var(--accent, #08aeea);
  border-radius: 6px;
  background: var(--panel-soft, #eef7fc);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.order-draft-banner > div:first-child {
  display: grid;
  gap: 3px;
}

.order-draft-banner span,
.order-draft-save-status {
  color: var(--muted, #66768a);
  font-size: 0.86rem;
}

.order-draft-save-status {
  margin: 4px 0 0;
}

body.theme-dark .order-draft-banner {
  background: #13263a;
  border-color: #29425d;
  border-left-color: #13b8f2;
}

@media (max-width: 720px) {
  .order-draft-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .order-draft-banner .client-section-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.order-step {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  min-height: 460px;
}

.order-step h3,
.order-step h4 {
  margin: 0;
}

.order-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.order-step-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.order-step-indicator span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #dbeafe;
  color: #075985;
  font-weight: 900;
}

.order-step-indicator strong {
  font-size: 13px;
}

.order-step-indicator.active {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}

.order-step-indicator.done span {
  background: rgba(22, 163, 74, 0.14);
  color: #166534;
}

.order-form-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-order-items {
  display: grid;
  gap: 12px;
}

.customer-order-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.new-tax-profile-fields {
  display: grid;
  gap: 10px;
}

.order-summary {
  display: grid;
  gap: 12px;
}

.summary-block,
.settings-list-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.summary-block span,
.settings-list-item span {
  color: var(--muted);
  font-size: 13px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-height: min(72vh, 760px);
  overflow: auto;
  padding-right: 4px;
}

.settings-section {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.settings-section:last-child {
  grid-column: 1 / -1;
}

.client-settings-dialog .settings-grid {
  grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.15fr);
  align-items: start;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.client-settings-dialog .settings-section {
  min-width: 0;
}

.client-settings-dialog .settings-section:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.client-settings-dialog .settings-section:last-child {
  grid-column: 1;
  grid-row: 2;
}

.client-settings-dialog .settings-list {
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.settings-tab {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.settings-tab:hover,
.settings-tab:focus-visible {
  color: var(--text);
  background: var(--panel);
}

.settings-tab.is-active {
  color: #fff;
  background: var(--brand);
}

.client-settings-dialog .settings-grid {
  display: block;
}

.client-settings-dialog .settings-section,
.client-settings-dialog .settings-section:nth-child(2),
.client-settings-dialog .settings-section:last-child {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
}

.settings-section-heading,
.team-editor-heading,
.team-member-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-section-heading h3,
.team-editor-heading h4 {
  margin: 2px 0 4px;
}

.settings-team-section {
  gap: 18px;
}

.settings-team-section.is-inviting .team-management-layout {
  display: none;
}

.team-management-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.team-members-list {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

.team-member-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  text-align: left;
  background: var(--panel-soft);
  cursor: pointer;
}

.team-member-button:hover,
.team-member-button:focus-visible,
.team-member-button.is-selected {
  border-color: var(--brand);
  background: var(--selection);
}

.team-member-button strong,
.team-member-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-button small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.team-member-state {
  align-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-size: 12px;
  font-weight: 800;
}

.team-member-state.is-active {
  color: var(--success-text);
  background: var(--success-soft);
}

.team-editor {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.team-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-form-grid label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.team-active-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-weight: 800;
}

.permission-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.permission-group {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.permission-group legend {
  margin: 0 0 8px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.permission-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  color: var(--text);
  font-weight: 700;
}

.permission-option + .permission-option {
  border-top: 1px solid var(--line);
}

.permission-option.unavailable {
  opacity: 0.48;
  cursor: not-allowed;
}

.permission-option input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.settings-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 760px) {
  .settings-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }

  .settings-tab {
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    line-height: 1.15;
    white-space: normal;
  }

  .settings-section-heading,
  .team-editor-heading,
  .team-member-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .team-management-layout,
  .team-form-grid,
  .permission-checklist {
    grid-template-columns: 1fr;
  }

  .team-members-list {
    max-height: 260px;
  }

  .team-member-actions button,
  .settings-section-heading > button {
    width: 100%;
  }

  .team-editor-heading {
    align-items: flex-start;
    flex-direction: row;
  }

  .team-editor-heading > button {
    align-self: flex-start;
    width: auto;
    min-height: 36px;
    padding-inline: 12px;
  }
}

.settings-list,
.stack-form {
  display: grid;
  gap: 10px;
}

.settings-two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-two-cols label {
  display: grid;
  gap: 6px;
}

body.theme-dark.client-body {
  background: var(--bg);
}

body.theme-dark .client-readonly-grid div {
  background: #101827;
}

body.theme-dark .customer-order-item {
  background: #101827;
}

body.theme-dark .summary-block,
body.theme-dark .settings-list-item {
  background: #101827;
}

body.theme-dark .catalog-finish-row {
  background: #101827;
}

body.theme-dark .client-status.green,
body.theme-dark .client-status.approved {
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
}

body.theme-dark .client-status.yellow,
body.theme-dark .client-status.to_apply {
  background: rgba(234, 179, 8, 0.22);
  color: #fef08a;
}

body.theme-dark .client-status.orange {
  background: rgba(249, 115, 22, 0.22);
  color: #fed7aa;
}

body.theme-dark .client-status.red,
body.theme-dark .client-status.rejected,
body.theme-dark .client-status.suspended,
body.theme-dark .client-status.closed {
  background: rgba(248, 113, 113, 0.22);
  color: #fecaca;
}

body.theme-dark .client-status.new {
  background: rgba(56, 189, 248, 0.18);
  color: #bae6fd;
}

body.theme-dark .client-status-card,
body.theme-dark .client-panel,
body.theme-dark .client-dashboard-header,
body.theme-dark .client-detail-panel {
  background: var(--panel);
}

body.theme-dark.client-portal-active .client-request-panel {
  background: var(--panel);
}

body.theme-dark.client-portal-active .client-detail-panel {
  background: #0f172a;
}

body.theme-dark .client-history-table tbody tr.selected td {
  background: #124058;
}

body.theme-dark .client-status {
  background: rgba(245, 158, 11, 0.28);
  color: #fde68a;
}

body.theme-dark .client-status.approved {
  background: rgba(34, 197, 94, 0.26);
  color: #bbf7d0;
}

body.theme-dark .client-status.rejected,
body.theme-dark .client-status.suspended {
  background: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

body.theme-dark .client-status.new {
  background: rgba(56, 189, 248, 0.24);
  color: #bae6fd;
}

body.theme-dark .client-status.to_apply {
  background: rgba(251, 191, 36, 0.28);
  color: #fef3c7;
}

.inventory-panel.hidden {
  display: none;
}

.visual-identifier-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 0;
}

.visual-identifier-metric {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.visual-identifier-metric span,
.visual-identifier-metric small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.visual-identifier-metric strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
}

.visual-identifier-metric.signal-green {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.visual-identifier-metric.signal-yellow {
  border-color: #fde68a;
  background: #fffbeb;
}

.visual-identifier-metric.signal-orange {
  border-color: #fed7aa;
  background: #fff7ed;
}

.visual-identifier-metric.signal-red {
  border-color: #fecaca;
  background: #fff1f2;
}

.visual-search-panel {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.visual-search-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.visual-search-scope {
  flex: 0 0 auto;
}

.visual-search-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-weight: 900;
}

.visual-search-file span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.visual-search-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.visual-search-file-actions .ghost-button {
  min-height: 36px;
  padding: 8px 12px;
}

.visual-search-hidden-input {
  position: fixed;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.visual-search-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.visual-search-preview img {
  width: 92px;
  height: 62px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.visual-search-preview div {
  min-width: 0;
}

.visual-search-preview strong,
.visual-search-preview span {
  display: block;
  overflow-wrap: anywhere;
}

.visual-search-preview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.visual-search-results {
  display: grid;
  gap: 10px;
}

.visual-search-results-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.visual-search-notice {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.visual-search-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.visual-search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.visual-search-result:hover {
  border-color: var(--accent);
}

.visual-search-result.is-low-confidence {
  border-color: rgba(245, 158, 11, 0.35);
}

.visual-search-result-copy {
  min-width: 0;
}

.visual-search-result-copy strong,
.visual-search-result-copy span,
.visual-search-result-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-search-result-copy span,
.visual-search-result-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.visual-search-score {
  min-width: 58px;
  text-align: right;
}

.visual-search-score strong,
.visual-search-score span {
  display: block;
}

.visual-search-score strong {
  color: var(--accent);
  font-size: 18px;
  line-height: 1.1;
}

.visual-search-score span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.file-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
}

.visual-files-cell {
  min-width: 260px;
}

#visualIdentifierListTop {
  scroll-margin-top: 14px;
}

.visual-identifier-workbench .filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.visual-identifier-workbench .filters .filter-field:first-child {
  grid-column: span 2;
}

.visual-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.visual-pagination-bottom {
  border-top: 0;
}

.visual-pagination-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.visual-pagination-size select {
  min-width: 86px;
  margin: 0;
}

.visual-pagination-summary {
  flex: 1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.visual-pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.visual-pagination-page {
  min-width: 104px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.visual-order-link {
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.visual-order-link:hover {
  text-decoration: underline;
}

.visual-order-link.compact {
  font-weight: 800;
}

.visual-order-date {
  min-width: 92px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.visual-product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
}

.visual-product-copy {
  min-width: 0;
}

.visual-product-copy strong,
.visual-product-copy .table-subtext {
  display: block;
}

.visual-row-thumbnail {
  flex: 0 0 72px;
  display: inline-flex;
  width: 72px;
  height: 46px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.visual-row-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

tr.selected .visual-row-thumbnail {
  border-color: var(--accent);
}

.visual-file-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
  line-height: 1.35;
}

.visual-file-chip .file-type-badge {
  flex: 0 0 auto;
}

.visual-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.visual-alert-dialog-form {
  position: relative;
  width: min(640px, calc(100vw - 36px));
  overflow: hidden;
}

.visual-alert-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #f59e0b;
}

.visual-alert-message {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.5;
}

.visual-alert-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.visual-alert-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.visual-alert-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.visual-alert-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.visual-alert-reasons {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
}

.visual-alert-reasons strong {
  display: block;
  margin-bottom: 8px;
  color: #9a3412;
}

.visual-alert-reasons ul {
  margin: 0;
  padding-left: 18px;
  color: #7c2d12;
}

.visual-preview-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.visual-preview-frame img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}

body.theme-dark .visual-preview-frame {
  background: #0f172a;
}

body.theme-dark .visual-pagination {
  background: #101827;
}

body.theme-dark .visual-search-file,
body.theme-dark .visual-search-preview,
body.theme-dark .visual-search-result {
  background: #0f172a;
}

body.theme-dark .visual-search-preview img {
  background: #111827;
}

body.theme-dark .visual-search-result:hover {
  border-color: var(--accent);
}

body.theme-dark .visual-alert-summary div {
  background: #101827;
}

body.theme-dark .visual-alert-reasons {
  border-color: #92400e;
  background: #2b2114;
}

body.theme-dark .visual-alert-reasons strong {
  color: #fde68a;
}

body.theme-dark .visual-alert-reasons ul {
  color: #fed7aa;
}

body.theme-dark .visual-row-thumbnail {
  background: #0f172a;
}

body.theme-dark .visual-identifier-metric {
  background: #101827;
}

body.theme-dark .visual-identifier-metric.signal-green {
  border-color: #166534;
  background: #10251b;
}

body.theme-dark .visual-identifier-metric.signal-yellow {
  border-color: #854d0e;
  background: #241f13;
}

body.theme-dark .visual-identifier-metric.signal-orange {
  border-color: #92400e;
  background: #2b2114;
}

body.theme-dark .visual-identifier-metric.signal-red {
  border-color: #7f1d1d;
  background: #2a1418;
}

.inventory-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 12px;
}

.inventory-catalog-toolbar h3,
.inventory-catalog-toolbar p {
  margin: 0;
}

.inventory-catalog-toolbar p {
  margin-top: 4px;
}

.inventory-detail-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.inventory-detail-actions .primary-button,
.inventory-detail-actions .ghost-button {
  width: 100%;
  min-height: 42px;
}

.inventory-category-link {
  margin-top: 12px;
  text-align: left;
}

.table-action-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
}

.inventory-workbench .table-wrap td strong {
  display: block;
  max-width: 360px;
}

.inventory-workbench .client-status.blue {
  color: #155e75;
  background: #cffafe;
  border-color: #67e8f9;
}

.inventory-workbench .client-status.red {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

.inventory-workbench .client-status.closed {
  color: #52525b;
  background: #f4f4f5;
  border-color: #d4d4d8;
}

.inventory-dialog-form {
  width: min(100% - 28px, 720px);
}

.form-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ghost-button.danger {
  color: #991b1b;
  border-color: #fecaca;
  background: #fff7f7;
}

.ghost-button.danger:hover {
  border-color: #fca5a5;
  background: #fee2e2;
}

@media (max-width: 1500px) {
  .product-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-catalog-product-panel {
    grid-area: editor;
    grid-column: auto;
  }

  .finish-catalog-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .finish-context-grid {
    grid-template-columns: auto minmax(220px, 1fr) minmax(220px, 1fr);
  }

  .finish-context-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .finish-new-row {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1180px) {
  .app-shell,
  .app-shell.sidebar-hidden {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .main {
    height: auto;
    overflow: visible;
  }

  .detail-panel {
    grid-column: 1 / -1;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--line);
    min-height: auto;
    overflow: visible;
  }

  .detail-empty {
    min-height: 180px;
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  .welcome-card p {
    font-size: 28px;
  }

  .sidebar-toggle {
    display: inline-block;
  }

  .app-shell.sidebar-hidden .sidebar {
    display: none;
  }

  .sidebar {
    position: static;
    width: auto;
    transform: none;
    transition: none;
    box-shadow: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .main {
    padding: 22px;
  }

  .tapetin-widget {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .tapetin-toggle {
    margin-left: auto;
  }

  .tapetin-panel {
    right: 0;
    bottom: 72px;
    width: 100%;
    max-height: calc(100vh - 96px);
  }

  .tapetin-messages {
    max-height: 320px;
  }

  .tapetin-composer-actions {
    justify-content: flex-start;
  }

  .toast {
    inset: 10px auto auto 50%;
    width: calc(100vw - 20px);
  }

  .sidebar::after {
    display: none;
  }

  .metrics-grid,
  .visual-identifier-metrics,
  .home-hero,
  .home-metrics,
  .home-content-grid,
  .report-metrics,
  .filters,
  .permission-toolbar,
  .permission-row,
  .permission-actions,
  .selected-user-editor,
  .form-admin-grid,
  .branch-form-main,
  .branch-address-grid,
  .form-row,
  .form-row.three,
  .catalog-row,
  .statistics-grid,
  .validation-grid {
    grid-template-columns: 1fr;
  }

  .catalog-remove-button {
    justify-self: start;
  }

  .forms-list-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .permission-resource {
    justify-content: flex-start;
    text-align: left;
    background: #fbfcfd;
  }

  .topbar,
  .workbench-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .visual-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .visual-identifier-workbench .filters .filter-field:first-child {
    grid-column: auto;
  }

  .visual-pagination-actions {
    justify-content: space-between;
  }

  .visual-pagination-page {
    min-width: auto;
  }

  .visual-alert-summary {
    grid-template-columns: 1fr;
  }

  .visual-search-controls,
  .visual-search-preview,
  .visual-search-result {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .visual-search-controls {
    flex-direction: column;
  }

  .visual-search-file,
  .visual-search-scope,
  .visual-search-controls .primary-button,
  .visual-search-controls .ghost-button {
    width: 100%;
  }

  .visual-search-file {
    flex-direction: column;
    align-items: flex-start;
  }

  .visual-search-file-actions {
    width: 100%;
  }

  .visual-search-file-actions .ghost-button,
  .visual-search-controls .primary-button,
  .visual-search-controls .ghost-button {
    min-height: 48px;
    white-space: normal;
  }

  .visual-search-file-actions .ghost-button {
    flex: 1 1 120px;
  }

  .visual-search-scope .segment-button {
    flex: 1 1 0;
  }

  .visual-search-results-grid {
    grid-template-columns: 1fr;
  }

  .visual-search-score {
    text-align: left;
  }

  .customer-catalogs-workbench .workbench-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-shell {
    width: min(100% - 24px, 680px);
    padding-top: 16px;
  }

  body.client-portal-active .client-shell {
    width: min(100% - 24px, 680px);
    padding-bottom: 40px;
  }

  .client-topbar,
  .client-dashboard-header,
  .client-section-header,
  .client-status-card {
    align-items: stretch;
    flex-direction: column;
  }

  .client-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-brand img {
    width: min(220px, 100%);
  }

  .client-auth-view {
    min-height: auto;
    place-items: stretch;
    padding: 8px 0 24px;
  }

  .client-auth-view .client-panel {
    width: 100%;
  }

  .client-request-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .client-history-panel,
  .client-detail-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  .client-detail-panel {
    position: static;
    height: auto;
    max-height: none;
    border-left: 1px solid var(--line);
  }

  .client-readonly-grid {
    grid-template-columns: 1fr;
  }

  .order-stepper,
  .settings-grid,
  .settings-two-cols,
  .product-summary-grid,
  .catalog-assignment-grid,
  .finish-catalog-toolbar,
  .finish-catalog-layout,
  .finish-context-grid,
  .finish-group-editor-compact,
  .finish-option-editor-layout,
  .finish-group-card,
  .finish-option-row,
  .finish-option-new-row,
  .finish-option-new-row.variable,
  .finish-option-fields.variable,
  .pricing-rule-layout,
  .pricing-fields-grid,
  .pricing-fixed-grid,
  .catalog-context-grid,
  .catalog-inline-editor,
  .customer-catalog-layout,
  .product-catalog-layout,
  .catalog-manager-item {
    grid-template-columns: 1fr;
  }

  .product-catalog-layout {
    grid-template-areas:
      "context"
      "editor";
  }

  .customer-product-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-product-badges {
    justify-content: flex-start;
  }

  .customer-catalog-dialog,
  .customer-finish-catalog-dialog {
    width: min(100% - 20px, 680px);
    min-height: 100vh;
    max-height: none;
    padding: 18px 0;
  }

  .client-settings-dialog {
    width: min(100% - 20px, 680px);
    min-height: 100vh;
    padding: 18px 0;
  }

  .client-settings-dialog .settings-grid,
  .client-settings-dialog .settings-section:nth-child(2),
  .client-settings-dialog .settings-section:last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .catalog-manager-actions,
  .finish-card-actions {
    justify-content: flex-start;
  }

  .order-step {
    min-height: auto;
  }

  .settings-section:last-child {
    grid-column: auto;
  }

  .client-internal-link {
    justify-content: center;
  }

  .topbar-title {
    width: 100%;
  }

  .session-bar {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* Final mobile overrides: keep these after the legacy responsive rules so the real app uses the mobile flow. */
@media (max-width: 860px) {
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .login-view {
    align-items: flex-start;
    min-height: 100dvh;
    padding: 14px;
    overflow-y: auto;
  }

  .login-panel {
    width: 100%;
    padding: 20px;
  }

  .login-logo {
    width: min(220px, 100%);
    margin-bottom: 16px;
  }

  .login-panel h1 {
    margin-bottom: 18px;
    font-size: 24px;
    line-height: 1.12;
  }

  .app-version-summary {
    padding-right: 0;
  }

  .app-release-content {
    max-height: min(36vh, 240px);
  }

  .app-shell,
  .app-shell.sidebar-hidden {
    position: relative;
    display: block;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    display: block;
    width: min(300px, calc(100vw - 42px));
    max-width: 84vw;
    height: 100dvh;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
    padding-bottom: 28px;
    box-shadow: 18px 0 40px rgba(10, 15, 22, 0.2);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  .app-shell:not(.sidebar-hidden) .sidebar,
  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .app-shell.sidebar-hidden .sidebar {
    display: block;
    transform: translateX(-105%);
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    width: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.32);
  }

  .mobile-nav-backdrop.hidden {
    display: none !important;
  }

  .main {
    width: 100%;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    padding: 10px 14px 32px;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(213, 221, 231, 0.72);
    background: var(--bg);
  }

  .topbar-title {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    gap: 8px;
  }

  .topbar-title > div {
    min-width: 0;
  }

  .topbar h1 {
    max-width: min(230px, calc(100vw - 176px));
    overflow: hidden;
    font-size: 18px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-toggle,
  .notification-button,
  .theme-toggle {
    width: 38px;
    min-height: 38px;
  }

  .session-bar {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: max-content;
  }

  .session-user {
    display: none;
    max-width: 72px;
    overflow: hidden;
    font-size: 10px;
    text-align: right;
    white-space: nowrap;
  }

  .session-user strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-password-button {
    display: none;
  }

  #logoutButton {
    min-height: 36px;
    padding: 0 8px;
    font-size: 11px;
  }

  .workbench {
    border-radius: 14px;
    overflow: visible;
  }

  .workbench-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .workbench-header h2 {
    font-size: 22px;
    line-height: 1.1;
  }

  .workbench-header p {
    font-size: 12px;
  }

  .workbench-header .header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .workbench-header .header-actions > :only-child {
    grid-column: 1 / -1;
  }

  .workbench-header .header-actions > button {
    width: 100%;
    min-height: 42px;
    white-space: normal;
  }

  .filters {
    gap: 8px;
    padding: 12px;
  }

  .filter-field {
    font-size: 10px;
  }

  .filter-field input,
  .filter-field select,
  .filter-field .multi-filter summary {
    min-height: 44px;
  }

  .filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    min-height: 0;
    gap: 8px;
  }

  .filter-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }

  .view-tabs {
    display: flex;
    max-width: calc(100vw - 28px);
    margin: 0 12px 12px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: thin;
  }

  .view-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .table-wrap table {
    min-width: 760px;
  }

  #ordersTableWrap,
  .bank-dashboard-table-wrap,
  .report-table-wrap,
  .statistics-table-wrap {
    max-height: none;
  }

  .detail-panel {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: none;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    background: var(--bg);
    padding: 74px 14px 28px;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(10, 15, 22, 0.2);
  }

  .app-shell.mobile-detail-open .detail-panel {
    display: block;
  }

  .mobile-detail-close {
    position: fixed;
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 96;
    align-items: center;
    justify-content: center;
    min-width: min(220px, calc(100vw - 28px));
    min-height: 40px;
    border: 1px solid rgba(7, 114, 184, 0.28);
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 0 12px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(10, 15, 22, 0.12);
  }

  .app-shell.mobile-detail-open .mobile-detail-close {
    display: inline-flex;
  }

  .app-shell.mobile-detail-open .main {
    pointer-events: none;
  }

  .detail-panel h2 {
    font-size: 24px;
  }

  .detail-meta {
    gap: 6px;
    margin: 10px 0 14px;
  }

  .detail-section {
    padding: 14px 0;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .field-value-list {
    gap: 8px;
  }

  .field-value {
    padding: 11px;
  }

  .dialog-form {
    padding: 16px;
  }

  .dialog-header {
    align-items: flex-start;
  }

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

  .dialog-actions > button {
    width: 100%;
    min-height: 44px;
  }

  .home-view {
    margin-top: 12px;
  }

  .home-hero {
    gap: 12px;
  }

  .home-hero h2 {
    font-size: 28px;
    line-height: 1.08;
  }

  .home-focus strong,
  .home-metric-card strong {
    font-size: 26px;
  }

  .visual-identifier-metric {
    min-width: 0;
    overflow: hidden;
  }

  .visual-identifier-metric strong {
    font-size: 22px;
    overflow-wrap: anywhere;
  }

  .metrics-grid,
  .home-metrics,
  .report-metrics,
  .visual-identifier-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-identifier-workbench .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-identifier-workbench .filters .filter-field:first-child {
    grid-column: 1 / -1;
  }

  .visual-identifier-workbench .filters input,
  .visual-identifier-workbench .filters select {
    min-width: 0;
  }

  .visual-identifier-workbench .table-wrap {
    overflow: visible;
  }

  .visual-identifier-workbench .table-wrap table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .visual-identifier-workbench .table-wrap thead {
    display: none;
  }

  .visual-identifier-workbench .table-wrap tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .visual-identifier-workbench .table-wrap tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
  }

  .visual-identifier-workbench .table-wrap tr.selected {
    border-color: var(--accent);
    background: rgba(7, 114, 184, 0.12);
    box-shadow: inset 4px 0 0 var(--accent);
  }

  .visual-identifier-workbench .table-wrap td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-content: start;
    align-items: start;
    min-width: 0;
    border: 0;
    border-top: 1px solid rgba(213, 221, 231, 0.62);
    padding: 9px 12px;
    white-space: normal;
  }

  .visual-identifier-workbench .table-wrap td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .visual-identifier-workbench .table-wrap td:nth-child(4) {
    order: -1;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    padding: 12px;
  }

  .visual-identifier-workbench .table-wrap td:nth-child(5) {
    grid-column: 1 / -1;
  }

  .visual-identifier-workbench .table-wrap td:nth-child(4)::before {
    display: none;
  }

  .visual-identifier-workbench .visual-order-date {
    min-width: 0;
    white-space: normal;
  }

  .visual-identifier-workbench .visual-product-cell {
    min-width: 0;
    width: 100%;
    align-items: center;
    gap: 12px;
  }

  .visual-identifier-workbench .visual-row-thumbnail {
    flex-basis: 104px;
    width: 104px;
    height: 66px;
  }

  .visual-identifier-workbench .visual-product-copy strong,
  .visual-identifier-workbench .visual-product-copy .table-subtext,
  .visual-identifier-workbench .visual-file-chip span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .visual-identifier-workbench .visual-product-copy strong {
    font-size: 17px;
    line-height: 1.18;
  }

  .visual-identifier-workbench .visual-files-cell {
    min-width: 0;
  }

  .visual-identifier-workbench .visual-file-chip {
    min-width: 0;
  }

  #orderFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #orderFilters .filter-field:first-child,
  #orderFilters .filter-actions {
    grid-column: 1 / -1;
  }

  #ordersTableWrap {
    overflow: visible;
  }

  #ordersTableWrap table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  #ordersTableWrap thead {
    display: none;
  }

  #ordersTableWrap tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  #ordersTableWrap tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    cursor: pointer;
  }

  #ordersTableWrap tr.selected {
    border-color: var(--accent);
    background: rgba(7, 114, 184, 0.12);
    box-shadow: inset 4px 0 0 var(--accent);
  }

  #ordersTableWrap td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-content: start;
    min-width: 0;
    border: 0;
    border-top: 1px solid rgba(213, 221, 231, 0.62);
    padding: 9px 12px;
    white-space: normal;
  }

  #ordersTableWrap td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  #ordersTableWrap td.mobile-card-main {
    order: -1;
    grid-column: 1 / -1;
    border-top: 0;
    padding: 12px;
  }

  #ordersTableWrap td.mobile-card-main::before {
    display: none;
  }

  #ordersTableWrap .title-cell strong {
    font-size: 17px;
    line-height: 1.18;
  }

  #ordersTableWrap .title-cell span {
    margin-top: 4px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #ordersTableWrap .application-cell {
    min-width: 0;
  }

  #ordersTableWrap .application-check {
    align-items: flex-start;
    white-space: normal;
  }

  .report-table-wrap .digital-report-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .report-table-wrap .digital-report-table thead {
    display: none;
  }

  .report-table-wrap .digital-report-table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .report-table-wrap .digital-report-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }

  .report-table-wrap .digital-report-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
    border: 0;
    border-top: 1px solid rgba(213, 221, 231, 0.62);
    padding: 9px 12px;
    text-align: left;
    white-space: normal;
  }

  .report-table-wrap .digital-report-table td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .report-table-wrap .digital-report-table td.mobile-card-main {
    order: -1;
    grid-column: 1 / -1;
    border-top: 0;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
  }

  .report-table-wrap .digital-report-table td.mobile-card-main::before {
    display: none;
  }

  #bankDashboardView .bank-dashboard-table-wrap,
  #bankDashboardView .bank-catalog-table-wrap,
  #withdrawalClientsView .table-wrap,
  #customerOrdersView .table-wrap,
  #billingPendingsView .table-wrap,
  #inventoryView .table-wrap,
  #statisticsContent .statistics-table-wrap,
  .report-table-wrap {
    max-height: none;
    overflow: visible;
  }

  #bankDashboardView .bank-dashboard-table-wrap table,
  #bankDashboardView .bank-catalog-table-wrap table,
  #withdrawalClientsView .table-wrap table,
  #customerOrdersView .table-wrap table,
  #billingPendingsView .table-wrap table,
  #inventoryView .table-wrap table,
  #statisticsContent .statistics-table-wrap table,
  .report-table-wrap table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }

  #bankDashboardView .bank-dashboard-table-wrap thead,
  #bankDashboardView .bank-catalog-table-wrap thead,
  #withdrawalClientsView .table-wrap thead,
  #customerOrdersView .table-wrap thead,
  #billingPendingsView .table-wrap thead,
  #inventoryView .table-wrap thead,
  #statisticsContent .statistics-table-wrap thead,
  .report-table-wrap thead {
    display: none;
  }

  #bankDashboardView .bank-dashboard-table-wrap tbody,
  #bankDashboardView .bank-catalog-table-wrap tbody,
  #withdrawalClientsView .table-wrap tbody,
  #customerOrdersView .table-wrap tbody,
  #billingPendingsView .table-wrap tbody,
  #inventoryView .table-wrap tbody,
  #statisticsContent .statistics-table-wrap tbody,
  .report-table-wrap tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  #bankDashboardView .bank-dashboard-table-wrap tr,
  #bankDashboardView .bank-catalog-table-wrap tr,
  #withdrawalClientsView .table-wrap tr,
  #customerOrdersView .table-wrap tr,
  #billingPendingsView .table-wrap tr,
  #inventoryView .table-wrap tr,
  #statisticsContent .statistics-table-wrap tr,
  .report-table-wrap tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    cursor: pointer;
  }

  #statisticsContent .statistics-table-wrap tr,
  .report-table-wrap tr {
    cursor: default;
  }

  #bankDashboardView .bank-dashboard-table-wrap tr.selected,
  #bankDashboardView .bank-catalog-table-wrap tr.selected,
  #withdrawalClientsView .table-wrap tr.selected,
  #customerOrdersView .table-wrap tr.selected,
  #billingPendingsView .table-wrap tr.selected,
  #inventoryView .table-wrap tr.selected {
    border-color: var(--accent);
    background: rgba(7, 114, 184, 0.12);
    box-shadow: inset 4px 0 0 var(--accent);
  }

  #bankDashboardView .bank-dashboard-table-wrap td,
  #bankDashboardView .bank-catalog-table-wrap td,
  #withdrawalClientsView .table-wrap td,
  #customerOrdersView .table-wrap td,
  #billingPendingsView .table-wrap td,
  #inventoryView .table-wrap td,
  #statisticsContent .statistics-table-wrap td,
  .report-table-wrap td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-content: start;
    min-width: 0;
    width: auto;
    border: 0;
    border-top: 1px solid rgba(213, 221, 231, 0.62);
    padding: 9px 12px;
    text-align: left;
    white-space: normal;
  }

  #bankDashboardView .bank-dashboard-table-wrap td::before,
  #bankDashboardView .bank-catalog-table-wrap td::before,
  #withdrawalClientsView .table-wrap td::before,
  #customerOrdersView .table-wrap td::before,
  #billingPendingsView .table-wrap td::before,
  #inventoryView .table-wrap td::before,
  #statisticsContent .statistics-table-wrap td::before,
  .report-table-wrap td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  #bankDashboardView .bank-dashboard-table-wrap td.mobile-card-main,
  #bankDashboardView .bank-catalog-table-wrap td.mobile-card-main,
  #withdrawalClientsView .table-wrap td.mobile-card-main,
  #customerOrdersView .table-wrap td.mobile-card-main,
  #billingPendingsView .table-wrap td.mobile-card-main,
  #inventoryView .table-wrap td.mobile-card-main,
  #statisticsContent .statistics-table-wrap td.mobile-card-main,
  .report-table-wrap td.mobile-card-main {
    order: -1;
    grid-column: 1 / -1;
    border-top: 0;
    padding: 12px;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
  }

  #bankDashboardView .bank-dashboard-table-wrap td.mobile-card-main::before,
  #bankDashboardView .bank-catalog-table-wrap td.mobile-card-main::before,
  #withdrawalClientsView .table-wrap td.mobile-card-main::before,
  #customerOrdersView .table-wrap td.mobile-card-main::before,
  #billingPendingsView .table-wrap td.mobile-card-main::before,
  #inventoryView .table-wrap td.mobile-card-main::before,
  #statisticsContent .statistics-table-wrap td.mobile-card-main::before,
  .report-table-wrap td.mobile-card-main::before,
  #bankDashboardView .bank-dashboard-table-wrap td[colspan]::before,
  #bankDashboardView .bank-catalog-table-wrap td[colspan]::before,
  #withdrawalClientsView .table-wrap td[colspan]::before,
  #customerOrdersView .table-wrap td[colspan]::before,
  #billingPendingsView .table-wrap td[colspan]::before,
  #inventoryView .table-wrap td[colspan]::before,
  #statisticsContent .statistics-table-wrap td[colspan]::before,
  .report-table-wrap td[colspan]::before {
    display: none;
  }

  #bankDashboardView .bank-dashboard-table-wrap td[colspan],
  #bankDashboardView .bank-catalog-table-wrap td[colspan],
  #withdrawalClientsView .table-wrap td[colspan],
  #customerOrdersView .table-wrap td[colspan],
  #billingPendingsView .table-wrap td[colspan],
  #inventoryView .table-wrap td[colspan],
  #statisticsContent .statistics-table-wrap td[colspan],
  .report-table-wrap td[colspan] {
    grid-column: 1 / -1;
    display: block;
  }

  #bankDashboardView .bank-account-cell {
    min-width: 0;
  }

  #bankDashboardView .bank-account-content {
    min-width: 0;
  }

  #bankDashboardView .bank-account-content > span,
  #bankDashboardView .bank-catalog-table-wrap td,
  #withdrawalClientsView .table-wrap td,
  #customerOrdersView .table-wrap td,
  #billingPendingsView .table-wrap td,
  #inventoryView .table-wrap td {
    overflow-wrap: anywhere;
  }

  #bankDashboardView .bank-dashboard-table td:nth-child(n+3),
  #bankDashboardView .bank-dashboard-table td:nth-child(5),
  #bankDashboardView .bank-dashboard-table td:nth-child(6) {
    white-space: normal;
  }

  #bankDashboardView .bank-status {
    min-width: 0;
    justify-self: start;
  }

  #bankDashboardView .bank-brand-mark {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  #billingPendingsView .filters,
  #inventoryView .filters,
  #withdrawalClientsView .filters,
  #customerOrdersView .filters,
  #bankDashboardFilters,
  .statistics-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #billingPendingsView .filters .filter-field:first-child,
  #inventoryView .filters .filter-field:first-child,
  #withdrawalClientsView .filters .filter-field:first-child,
  #customerOrdersView .filters .filter-field:first-child,
  #bankDashboardFilters .filter-field:first-child,
  .statistics-filters .filter-actions {
    grid-column: 1 / -1;
  }

  .home-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-panel-header .ghost-button {
    width: 100%;
  }

  .permission-section-title {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .form-list-actions,
  .branch-actions,
  .catalog-manager-actions,
  .finish-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .form-list-actions > button,
  .branch-actions > button,
  .catalog-manager-actions > button,
  .finish-card-actions > button {
    width: 100%;
    min-height: 42px;
  }

  .report-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .report-toolbar > button {
    width: 100%;
    min-height: 42px;
  }

  .inventory-catalog-toolbar {
    align-items: stretch;
    padding: 0 12px 12px;
  }

  .catalog-context-actions,
  .finish-context-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-context-actions > button,
  .finish-context-actions > button {
    width: 100%;
  }

  .customer-catalogs-workbench .workbench-header {
    align-items: stretch;
  }

  dialog[open] {
    max-width: 100vw;
  }

  .dialog-form,
  .inventory-dialog-form,
  .bank-request-dialog-form,
  .billing-pending-dialog-form {
    width: min(100% - 20px, 680px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  .notification-panel {
    position: fixed;
    top: 70px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: min(440px, calc(100dvh - 92px));
  }
}

@media (max-width: 420px) {
  .topbar h1 {
    max-width: calc(100vw - 170px);
    font-size: 17px;
  }
}

/* Flujo de pedidos del portal de clientes */
.customer-order-form {
  width: min(1440px, 100%);
  min-height: 100dvh;
  padding: 0 clamp(18px, 3vw, 44px) 92px;
}

.order-dialog-header {
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 88px;
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.order-stepper {
  position: sticky;
  top: 88px;
  z-index: 11;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 12px 0;
  background: var(--bg);
}

.order-step-indicator {
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
}

.order-step-indicator:disabled {
  cursor: default;
  opacity: 0.58;
}

.order-step-indicator strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.order-builder-main {
  min-width: 0;
}

.order-step {
  min-height: 520px;
  margin: 0;
  padding: 22px 0 30px;
  border-top: 0;
  align-content: start;
  gap: 20px;
}

.order-step > div:first-child > p,
.order-step > div:first-child > h3,
.order-form-section-header p,
.order-form-section-header h3 {
  margin-top: 0;
  margin-bottom: 6px;
}

.order-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.order-category-card,
.order-product-card {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

.order-category-card {
  position: relative;
  gap: 12px;
  min-height: 104px;
  padding: 14px;
  overflow: visible;
}

.order-category-card:hover,
.order-product-card:hover,
.order-category-card.selected {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.order-category-card:hover,
.order-category-card:focus-visible {
  z-index: 20;
}

.order-category-mark {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
}

.order-category-mark.has-image {
  overflow: hidden;
  background: var(--panel-soft);
}

.order-category-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-category-tooltip {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 12px;
  display: none;
  width: min(320px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
  color: var(--text);
  pointer-events: none;
}

.order-category-tooltip small,
.order-category-tooltip strong {
  display: block;
}

.order-category-tooltip small {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.order-category-tooltip strong {
  font-size: 13px;
  line-height: 1.45;
}

.order-category-card:hover .order-category-tooltip,
.order-category-card:focus-visible .order-category-tooltip {
  display: block;
}

.order-category-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.order-category-copy strong,
.order-product-card strong {
  font-size: 16px;
}

.order-category-copy small,
.order-category-copy > span,
.order-product-card small,
.order-product-group-head p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.order-card-arrow {
  margin-left: auto;
  color: var(--muted);
  font-size: 28px;
}

.order-search-field {
  width: min(360px, 100%);
  margin: 0;
}

.order-product-filters {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr);
  gap: 10px;
  width: min(640px, 100%);
}

.order-product-filters label,
.order-search-field {
  min-width: 0;
  margin: 0;
}

.order-product-filters label > span,
.order-search-field span {
  display: block;
  margin-bottom: 5px;
}

.order-product-browser,
.order-product-group {
  display: grid;
  gap: 14px;
}

.order-product-browser {
  min-height: 0;
}

.order-product-list {
  display: grid;
  gap: 8px;
  max-height: min(620px, 62dvh);
  padding-right: 5px;
  overflow-y: auto;
}

.order-product-group + .order-product-group {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.order-product-group-head h4,
.order-product-group-head p {
  margin: 0 0 4px;
}

.order-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.order-product-card {
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 12px 14px;
}

.order-product-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.order-product-card-copy > small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.order-product-card-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-product-meta {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 80%, var(--line));
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.customer-order-item {
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.order-config-product-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.order-config-product-head h4,
.order-config-product-head p,
.order-breadcrumb {
  margin: 0 0 5px;
}

.order-breadcrumb {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.order-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.order-config-section,
.order-checkout-section,
.order-payment-section,
.order-confirm-section {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.order-config-section-wide {
  grid-column: 1 / -1;
}

.order-config-section h4,
.order-checkout-section h4,
.order-confirm-section h4 {
  margin: 0 0 14px;
}

.order-pending-warning,
.order-pending-summary {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d97706;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
}

.order-pending-warning h4,
.order-pending-warning p,
.order-pending-summary p {
  margin: 0 0 8px;
}

.order-pending-warning ul,
.order-pending-summary ul {
  margin: 8px 0 0;
  padding-left: 22px;
}

.order-pending-warning-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

body.theme-dark .order-pending-warning,
body.theme-dark .order-pending-summary {
  border-color: #f59e0b;
  background: #2b2112;
  color: #fde68a;
}

.order-cancelled-summary {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #be123c;
  border-left: 4px solid #be123c;
  border-radius: 10px;
  background: #fff1f2;
  color: #881337;
}

.order-cancelled-summary strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
}

.order-cancelled-summary p {
  margin: 0;
  line-height: 1.45;
}

body.theme-dark .order-cancelled-summary {
  border-color: #fb7185;
  background: #30151d;
  color: #fecdd3;
}

.order-pending-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
}

.order-pending-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(2px);
}

.order-pending-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: min(80vh, 620px);
  overflow: auto;
  box-sizing: border-box;
  padding: 26px;
  border: 1px solid #d97706;
  border-left-width: 4px;
  border-radius: 10px;
  background: #fff7ed;
  color: #7c2d12;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
}

.order-pending-dialog .eyebrow {
  margin: 0 44px 8px 0;
}

.order-pending-dialog h3,
.order-pending-dialog p {
  margin: 0 0 10px;
}

.order-pending-dialog ul {
  margin: 12px 0 0;
  padding-left: 22px;
}

.order-pending-dialog li + li {
  margin-top: 6px;
}

.order-pending-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 36px;
  min-height: 36px;
  padding: 4px 10px;
  font-size: 20px;
  line-height: 1;
}

body.theme-dark .order-pending-dialog {
  border-color: #f59e0b;
  background: #2b2112;
  color: #fde68a;
}

@media (max-width: 640px) {
  .order-pending-modal {
    align-items: end;
    padding: 12px;
  }

  .order-pending-dialog {
    max-height: 85vh;
    padding: 22px 18px;
  }

  .order-pending-warning-actions {
    flex-direction: column-reverse;
  }

  .order-pending-warning-actions button {
    width: 100%;
  }
}

.order-fixed-options,
.order-extra-options {
  display: grid;
  gap: 10px;
}

.order-extra-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
  max-height: 390px;
  overflow-y: auto;
  padding-right: 3px;
}

.order-extra-picker {
  display: grid;
  grid-template-columns: minmax(230px, 30%) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.order-extra-sidebar,
.order-extra-panel {
  min-height: 260px;
}

.order-extra-sidebar {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 3%, var(--bg));
}

.order-extra-sidebar > header {
  display: grid;
  gap: 4px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.order-extra-sidebar > header > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.order-extra-sidebar > header span,
.order-extra-sidebar > header small {
  color: var(--muted);
  font-size: 12px;
}

.order-extra-sidebar > header strong {
  font-size: 12px;
}

.order-option-field {
  margin: 0;
}

.order-option-field > span {
  display: block;
  margin-bottom: 5px;
}

.order-option-field > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.4;
}

.order-option-readonly strong {
  display: flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.order-extra-group {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
}

.order-extra-group:hover,
.order-extra-group.active {
  border-color: var(--accent);
}

.order-extra-group.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.order-extra-group > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.order-extra-group small,
.order-extra-selected {
  color: var(--muted);
  font-size: 12px;
}

.order-extra-selected {
  flex: 0 0 auto;
}

.order-extra-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 3%, var(--bg));
}

.order-extra-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--line);
}

.order-extra-panel > header span,
.order-extra-panel-count {
  color: var(--muted);
  font-size: 12px;
}

.order-extra-panel h5 {
  margin: 2px 0 0;
  font-size: 16px;
}

.order-extra-panel-count {
  flex: 0 0 auto;
}

.order-extra-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 10px;
}

.order-extra-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(145px, auto);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.order-extra-option input {
  flex: 0 0 auto;
}

.order-extra-copy,
.order-extra-price {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.order-extra-copy strong,
.order-extra-copy small {
  overflow-wrap: anywhere;
}

.order-extra-price {
  justify-items: end;
  text-align: right;
}

.order-delivery-estimate {
  display: grid;
  gap: 2px;
  max-width: 360px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.order-delivery-estimate small {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.order-delivery-estimate strong {
  font-size: 13px;
  line-height: 1.35;
}

.order-delivery-estimate.calculated strong {
  color: var(--success);
}

.order-cart-item-side .order-delivery-estimate {
  max-width: 230px;
  padding-left: 0;
  border-left: 0;
  text-align: right;
}

.order-cart-rail-items button small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  text-align: left;
}

.order-cart-preview .order-delivery-estimate {
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.order-confirm-product > span {
  display: grid;
  gap: 4px;
}

.order-confirm-product small {
  color: var(--muted);
}

.delivery-settings-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.delivery-settings-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.delivery-weekdays,
.pricing-delivery-weekdays {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.delivery-weekdays label,
.pricing-delivery-weekdays label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.delivery-holiday-entry {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(220px, 1.25fr) auto;
  align-items: end;
  gap: 10px;
}

.delivery-holiday-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.delivery-holiday-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}

.delivery-holiday-row > div {
  display: grid;
  gap: 2px;
}

.delivery-holiday-row span {
  color: var(--muted);
  font-size: 12px;
}

.delivery-settings-actions {
  margin-top: 16px;
}

.shipping-settings-panel {
  margin-top: 16px;
}

.shipping-rate-editor,
.shipping-postal-editor {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.shipping-rates-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.shipping-rate-row {
  display: grid;
  grid-template-columns: minmax(120px, .5fr) minmax(160px, .8fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.shipping-rate-row .icon-button {
  margin-bottom: 2px;
}

.shipping-postal-tools,
.shipping-postal-import {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.shipping-postal-tools input {
  flex: 1 1 160px;
  min-width: 150px;
}

.shipping-postal-import input[type="file"] {
  flex: 1 1 260px;
}

.shipping-postal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.shipping-postal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 999px;
  font-size: 12px;
}

.shipping-postal-chip button {
  border: 0;
  padding: 0;
  color: var(--danger, #ef4444);
  background: transparent;
  cursor: pointer;
}

.shipping-postal-list > small {
  flex-basis: 100%;
}

.pricing-delivery-editor {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}

.pricing-delivery-editor .pricing-delivery-weekdays {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.pricing-special-time {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.pricing-special-time .checkbox-row {
  width: max-content;
  max-width: 100%;
}

.pricing-special-time .pricing-field {
  max-width: 320px;
}

.delivery-time-rules {
  margin-top: 12px;
}

.delivery-time-rules small {
  color: var(--muted);
  line-height: 1.35;
}

.pricing-delivery-weekdays small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.pricing-delivery-note {
  display: grid;
  gap: 4px;
  min-height: 68px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}

.pricing-delivery-note span {
  color: var(--muted);
  font-size: 12px;
}

.order-extra-option small,
.order-file-selection {
  color: var(--muted);
  font-size: 12px;
}

.order-file-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.order-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

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

.order-file-row .ghost-button {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 11px;
}

.order-follow-up-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.customer-order-item-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.customer-order-item-status-field {
  display: grid;
  gap: 5px;
  margin: 8px 0;
  font-size: 12px;
  font-weight: 800;
}

.account-status-settings {
  margin-bottom: 18px;
}

.account-status-settings::before {
  content: "Estado de la cuenta";
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.order-follow-up-upload input[type="file"] {
  min-width: 220px;
  flex: 1 1 240px;
}

.order-file-detail-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.danger-link {
  color: var(--danger, #ff8d8d);
}

.order-cart-preview {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.order-cart-preview > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.order-cart-preview small {
  color: var(--muted);
}

.order-item-price-breakdown {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  margin-top: 5px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.order-item-price-breakdown > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.order-item-price-breakdown strong {
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}

.order-cart-preview-total {
  color: var(--text) !important;
  font-weight: 800;
  text-align: right;
}

.order-config-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #16a34a 60%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #16a34a 8%, var(--panel));
}

.order-config-price strong {
  font-size: 20px;
}

.order-config-actions {
  display: flex;
  justify-content: flex-end;
}

.order-cart-list {
  display: grid;
  gap: 10px;
}

.order-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.order-cart-item h4,
.order-cart-item p {
  margin: 0 0 5px;
}

.order-cart-item ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}

.order-cart-item-side {
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 14px;
}

.order-cart-item-side > strong {
  font-size: 18px;
}

.order-cart-item-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.order-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 180px;
  align-content: center;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.order-cart-rail {
  position: sticky;
  top: 164px;
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 190px);
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.order-cart-rail-head,
.order-cart-total {
  display: grid;
  gap: 4px;
}

.order-cart-rail-head span,
.order-cart-total span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.order-cart-rail-head strong,
.order-cart-total strong {
  font-size: 22px;
}

.order-cart-rail-items {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.order-cart-rail-items p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.order-cart-rail-items button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.order-cart-rail-items button:hover {
  background: var(--bg);
}

.order-cart-rail-items button strong {
  white-space: nowrap;
}

.order-cart-total small {
  color: var(--muted);
  line-height: 1.4;
}

.order-tax-breakdown {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px 12px;
}

.order-tax-breakdown strong {
  font-size: 14px;
  text-align: right;
}

.order-tax-total-label,
.order-tax-total-value {
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.order-tax-total-value {
  font-size: 22px !important;
}

.order-tax-breakdown small {
  grid-column: 1 / -1;
}

.order-checkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.order-confirm-row,
.order-confirm-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.order-confirm-row strong {
  text-align: right;
}

.order-confirm-total {
  margin-top: 8px;
  border-bottom: 0;
  font-size: 18px;
}

.order-payment-section {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.order-payment-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.order-payment-heading h4,
.order-payment-heading p {
  margin: 0;
}

.order-payment-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.order-payment-choice,
.order-files-pending-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  cursor: pointer;
}

.order-payment-choice > input,
.order-files-pending-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.order-payment-choice > span:first-of-type,
.order-files-pending-choice > span {
  display: grid;
  gap: 4px;
}

.order-payment-choice small,
.order-files-pending-choice small {
  color: var(--muted);
  line-height: 1.4;
}

.order-payment-choice-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: transparent;
  background: var(--panel);
  font-weight: 900;
}

.order-payment-choice:has(input:checked),
.order-files-pending-choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 10%, transparent);
}

.order-payment-choice:has(input:checked) .order-payment-choice-mark {
  border-color: var(--accent);
  color: #061521;
  background: var(--accent);
}

.order-payment-choice:has(input:disabled) {
  opacity: .55;
  cursor: not-allowed;
}

.order-payment-points {
  min-height: 72px;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

.order-payment-receipt-panel {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 10px;
  background: var(--bg);
}

.order-payment-receipt-panel.hidden,
.order-payment-choice-grid.hidden {
  display: none;
}

.order-file-selection:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-files-pending-choice {
  min-height: 68px;
  margin-top: 10px;
  grid-template-columns: 1fr;
}

.order-files-pending-choice:has(input:disabled) {
  opacity: .55;
  cursor: not-allowed;
}

.order-pending-badge {
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #9a6700;
  background: #fff3cd;
  font-size: 12px;
  font-weight: 800;
}

.order-dialog-actions {
  position: fixed;
  z-index: 14;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  margin: 0;
  padding: 12px clamp(18px, 3vw, 44px);
  border-top: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.order-mobile-cart-button {
  display: none;
}

body.theme-dark .order-category-card,
body.theme-dark .order-product-card,
body.theme-dark .order-config-product-head,
body.theme-dark .order-config-section,
body.theme-dark .order-checkout-section,
body.theme-dark .order-payment-section,
body.theme-dark .order-confirm-section,
body.theme-dark .order-cart-item,
body.theme-dark .order-cart-rail {
  background: var(--panel);
}

body.theme-dark .order-extra-option {
  background: var(--bg);
}

@media (max-width: 1050px) {
  .order-builder-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

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

@media (max-width: 820px) {
  .delivery-settings-layout,
  .pricing-delivery-editor {
    grid-template-columns: 1fr;
  }

  .order-extra-picker {
    grid-template-columns: 1fr;
  }

  .order-payment-choice-grid {
    grid-template-columns: 1fr;
  }

  .order-payment-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-extra-sidebar,
  .order-extra-panel {
    min-height: 0;
  }

  .order-extra-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 260px;
  }

  .delivery-holiday-entry {
    grid-template-columns: 1fr;
  }

  .delivery-weekdays,
  .pricing-delivery-editor .pricing-delivery-weekdays {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-order-form.dialog-form {
    width: 100%;
    max-height: none;
    padding: 0 14px 150px;
    overflow: visible;
  }

  .order-dialog-header {
    min-height: 76px;
  }

  .order-stepper {
    top: 76px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .order-stepper::-webkit-scrollbar {
    display: none;
  }

  .order-step-indicator {
    flex: 0 0 132px;
  }

  .order-builder-layout,
  .order-config-grid,
  .order-checkout-grid,
  .order-summary {
    grid-template-columns: 1fr;
  }

  .order-cart-rail {
    display: none;
  }

  .order-mobile-cart-button:not(.hidden) {
    position: fixed;
    z-index: 15;
    right: 14px;
    bottom: 72px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow);
    font-weight: 900;
  }

  .order-dialog-actions {
    justify-content: stretch;
    padding: 10px 14px;
  }

  .order-dialog-actions button {
    flex: 1 1 0;
  }

  .order-form-section-header,
  .order-config-product-head {
    align-items: stretch;
    flex-direction: column;
  }

  .order-config-price {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-config-price .order-delivery-estimate {
    width: 100%;
    max-width: none;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .order-search-field {
    width: 100%;
  }

  .order-product-filters {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .order-category-grid,
  .order-product-grid,
  .order-extra-options {
    grid-template-columns: 1fr;
  }

  .order-category-card {
    min-height: 84px;
  }

  .order-product-filters {
    grid-template-columns: 1fr;
  }

  .order-extra-groups {
    grid-template-columns: 1fr;
  }

  .order-product-card {
    align-items: flex-start;
  }

  .order-product-meta {
    display: none;
  }

  .order-extra-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .order-extra-price {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .order-config-section-wide {
    grid-column: auto;
  }

  .order-cart-item {
    grid-template-columns: 1fr;
  }

  .order-cart-item-side {
    justify-items: stretch;
  }

  .order-cart-item-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-cart-item-actions button {
    width: 100%;
  }

  .order-dialog-actions #cancelCustomerOrderButton {
    display: none;
  }
}

/* Overrides finales del wizard interno: deben quedar después de los estilos generales de diálogos. */
#salesOrderDialog {
  width: min(1160px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  background: var(--bg);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#salesOrderDialog .sales-order-dialog-form {
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
}

#salesOrderDialog .sales-dialog-stepper {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

#salesOrderDialog .sales-dialog-product-heading {
  align-items: end;
}

#salesOrderDialog .sales-dialog-product-heading > label:first-child {
  flex: 1 1 240px;
}

#salesOrderDialog .sales-dialog-product-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

#salesOrderDialog .sales-dialog-product-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 72px;
  padding: 12px 14px;
}

#salesOrderDialog .sales-dialog-product-card > span:first-child {
  display: grid;
  gap: 4px;
}

#salesOrderDialog .sales-dialog-product-arrow {
  color: var(--accent);
  font-size: 24px;
  font-weight: 700;
}

#salesOrderDialog .sales-dialog-category-card {
  position: relative;
  overflow: visible;
}

#salesOrderDialog .sales-dialog-category-products-preview {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  top: calc(100% + 8px);
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
}

#salesOrderDialog .sales-dialog-category-products-preview strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

#salesOrderDialog .sales-dialog-category-card:hover .sales-dialog-category-products-preview,
#salesOrderDialog .sales-dialog-category-card:focus-visible .sales-dialog-category-products-preview,
#salesOrderDialog .sales-dialog-category-card:focus-within .sales-dialog-category-products-preview {
  opacity: 1;
  transform: translateY(0);
}

#salesOrderDialog .sales-dialog-combination-box,
#salesOrderDialog .sales-dialog-line-estimate {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

#salesOrderDialog .sales-dialog-combination-box.warning {
  border-color: color-mix(in srgb, #e09a4d 60%, var(--line));
}

#salesOrderDialog .sales-dialog-combination-box label,
#salesOrderDialog .sales-dialog-combination-box select {
  width: 100%;
}

#salesOrderDialog .sales-dialog-combination-box small,
#salesOrderDialog .sales-dialog-line-estimate small {
  color: var(--muted);
}

#salesOrderDialog .sales-dialog-variable-finishes {
  display: grid;
  gap: 10px;
}

/* El diálogo interno tiene un único dueño del scroll: el propio diálogo.
   Los acabados se adaptan a su ancho real, no al de toda la ventana. */
#salesOrderDialog .sales-dialog-extra-picker {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  container-type: inline-size;
}

#salesOrderDialog .sales-dialog-extra-picker > h4 {
  margin: 0 0 12px;
}

#salesOrderDialog .order-extra-picker {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 16px;
}

#salesOrderDialog .order-extra-sidebar,
#salesOrderDialog .order-extra-panel {
  min-height: 0;
  background: var(--panel-soft);
}

#salesOrderDialog .order-extra-groups {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

#salesOrderDialog .order-extra-panel {
  container-type: inline-size;
}

@container (max-width: 720px) {
  #salesOrderDialog .sales-dialog-extra-picker .order-extra-picker {
    grid-template-columns: 1fr;
  }

  #salesOrderDialog .sales-dialog-extra-picker .order-extra-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #salesOrderDialog .order-extra-panel .order-extra-options {
    grid-template-columns: 1fr;
  }

  #salesOrderDialog .order-extra-panel .order-extra-option {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    min-height: 0;
  }

  #salesOrderDialog .order-extra-panel .order-extra-price {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}

#salesOrderDialog .sales-dialog-variable-group {
  display: grid;
  gap: 8px;
}

#salesOrderDialog .sales-dialog-variable-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

#salesOrderDialog .sales-dialog-variable-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}

#salesOrderDialog .sales-dialog-variable-options label:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

#salesOrderDialog .sales-dialog-variable-options small {
  margin-left: auto;
  color: var(--muted);
}

#salesOrderDialog .sales-dialog-summary-item {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

#salesOrderDialog .sales-dialog-summary-item strong {
  color: var(--accent);
}

#salesOrderDialog .sales-dialog-summary-item small {
  color: var(--muted);
}

#salesOrderDialog .sales-dialog-invoice-section,
#salesOrderDialog .sales-payment-capture {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

#salesOrderDialog .sales-dialog-invoice-section {
  margin-top: 16px;
}

#salesOrderDialog .sales-payment-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--panel)) 0%, var(--panel-soft) 72%);
}

#salesOrderDialog .sales-payment-overview > div {
  display: grid;
  gap: 3px;
  flex: 0 0 auto;
}

#salesOrderDialog .sales-payment-overview small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#salesOrderDialog .sales-payment-overview strong {
  color: var(--accent);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
}

#salesOrderDialog .sales-payment-overview p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}

#salesOrderDialog .sales-payment-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

#salesOrderDialog .sales-payment-section-head h4,
#salesOrderDialog .sales-payment-section-head p,
#salesOrderDialog .sales-payment-capture-head h4,
#salesOrderDialog .sales-payment-capture-head p {
  margin: 0;
}

#salesOrderDialog .sales-payment-selection-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 800;
}

#salesOrderDialog .sales-payment-selection-count.has-selection {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

#salesOrderDialog .sales-payment-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#salesOrderDialog .sales-payment-option:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 96px;
}

#salesOrderDialog .sales-payment-option {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: start;
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-soft) 88%, var(--panel));
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

#salesOrderDialog .sales-payment-option:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-1px);
}

#salesOrderDialog .sales-payment-option:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}

#salesOrderDialog .sales-payment-option > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

#salesOrderDialog .sales-payment-option:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--panel)) 0%, color-mix(in srgb, var(--accent) 7%, var(--panel-soft)) 100%);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 12%, transparent);
}

#salesOrderDialog .sales-payment-option-icon,
#salesOrderDialog .sales-payment-entry-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  font-size: 14px;
  font-weight: 900;
}

#salesOrderDialog .sales-payment-option:has(input:checked) .sales-payment-option-icon {
  color: #061521;
  background: var(--accent);
}

#salesOrderDialog .sales-payment-option-copy,
#salesOrderDialog .sales-payment-entry > span,
#salesOrderDialog .sales-payment-summary-list span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#salesOrderDialog .sales-payment-option-copy strong {
  padding-right: 8px;
  line-height: 1.25;
}

#salesOrderDialog .sales-payment-option-copy small,
#salesOrderDialog .sales-payment-entry small,
#salesOrderDialog .sales-payment-summary-list small {
  color: var(--muted);
  line-height: 1.35;
}

#salesOrderDialog .sales-payment-option-copy em {
  width: max-content;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 62%, transparent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

#salesOrderDialog .sales-payment-option:has(input:checked) .sales-payment-option-copy em {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}

#salesOrderDialog .sales-payment-option-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: transparent;
  background: var(--panel);
  font-size: 13px;
  font-weight: 900;
}

#salesOrderDialog .sales-payment-option:has(input:checked) .sales-payment-option-check {
  border-color: var(--accent);
  color: #061521;
  background: var(--accent);
}

#salesOrderDialog .sales-payment-capture {
  margin-top: 18px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

#salesOrderDialog .sales-payment-capture-head,
#salesOrderDialog .sales-payment-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

#salesOrderDialog .sales-payment-capture-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#salesOrderDialog .sales-payment-capture-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#salesOrderDialog .sales-payment-file-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#salesOrderDialog .sales-payment-file-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

#salesOrderDialog .sales-payment-receipts,
#salesOrderDialog .sales-payment-summary-list {
  display: grid;
  gap: 8px;
}

#salesOrderDialog .sales-payment-entry,
#salesOrderDialog .sales-payment-summary-list > div {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

#salesOrderDialog .sales-payment-entry-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 10px;
}

#salesOrderDialog .sales-payment-empty {
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  font-size: 13px;
}

#salesOrderDialog .sales-payment-empty strong {
  color: var(--text);
}

#salesOrderDialog .sales-payment-summary-list > div,
#salesOrderDialog .sales-dialog-summary-breakdown span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

#salesOrderDialog .sales-dialog-summary-breakdown {
  display: grid;
  gap: 7px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

#salesOrderDialog .sales-dialog-summary-breakdown strong {
  color: var(--text);
}

@media (max-width: 700px) {
  #salesOrderDialog {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
  }

  #salesOrderDialog .sales-order-dialog-form {
    max-height: calc(100dvh - 14px);
  }

  #salesOrderDialog .sales-dialog-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #salesOrderDialog .sales-payment-options,
  #salesOrderDialog .sales-payment-capture-head {
    grid-template-columns: 1fr;
  }

  #salesOrderDialog .sales-payment-entry {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  #salesOrderDialog .sales-payment-entry button {
    grid-column: 2;
    justify-self: start;
  }

  #salesOrderDialog .sales-payment-overview,
  #salesOrderDialog .sales-payment-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #salesOrderDialog .sales-payment-overview p {
    text-align: left;
  }

  #salesOrderDialog .sales-payment-option {
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    min-height: 104px;
    padding: 14px;
  }

  #salesOrderDialog .sales-payment-option-icon {
    width: 38px;
    height: 38px;
  }
}
.bank-ledger-panel {
  display: grid;
  gap: 18px;
}

.bank-ledger-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.5fr) minmax(150px, .8fr) auto;
  gap: 12px;
  align-items: end;
}

.bank-ledger-toolbar label,
.bank-manual-reconciliation-form label {
  display: grid;
  gap: 6px;
}

.bank-ledger-toolbar label > span,
.bank-manual-reconciliation-form label > span,
.bank-account-summary span,
.bank-import-preview-metrics span,
.bank-reconciliation-amount span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bank-account-summary,
.bank-import-preview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.bank-account-summary > div,
.bank-import-preview-metrics > div {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.bank-ledger-table {
  width: 100%;
  border-collapse: collapse;
}

.bank-ledger-table th,
.bank-ledger-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.bank-ledger-table th:nth-last-child(-n+4),
.bank-ledger-table td:nth-last-child(-n+4) {
  text-align: right;
}

.bank-ledger-pagination,
.bank-ledger-section-header,
.bank-import-row,
.bank-allocation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bank-import-history {
  display: grid;
  gap: 8px;
}

.bank-import-row,
.bank-allocation-row {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.bank-import-row span:first-child,
.bank-allocation-row span:first-child {
  display: grid;
  gap: 3px;
}

.bank-import-row small,
.bank-allocation-row small,
.bank-candidate small {
  color: var(--muted);
}

.bank-reconciliation-list {
  display: grid;
  gap: 14px;
}

.bank-reconciliation-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.bank-reconciliation-card > header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.bank-reconciliation-card h3,
.bank-reconciliation-card p {
  margin: 6px 0 0;
}

.bank-reconciliation-amount {
  display: grid;
  justify-items: end;
  min-width: 130px;
}

.bank-reconciliation-amount strong {
  font-size: 1.35rem;
}

.bank-candidates {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.bank-candidate {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto 120px auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.bank-candidate > span:first-child {
  display: grid;
  gap: 3px;
}

.bank-candidate-score {
  color: var(--muted);
  font-weight: 700;
}

.bank-manual-reconciliation-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.bank-empty-ledger {
  padding: 30px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.bank-import-dialog {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--panel);
  color: inherit;
}

.bank-import-dialog::backdrop {
  background: rgba(2, 6, 23, .74);
}

.bank-import-dialog-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.bank-import-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.bank-import-mapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.bank-import-mapper label {
  display: grid;
  gap: 6px;
}

.bank-import-mapper label > span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.bank-opening-balance-notice,
.bank-import-validation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}

.bank-opening-balance-notice:empty {
  display: none;
}

.bank-opening-balance-notice > div,
.bank-import-validation > div {
  display: grid;
  gap: 4px;
}

.bank-opening-balance-notice span,
.bank-import-validation span {
  color: var(--muted);
  font-size: .84rem;
}

.bank-opening-balance-fields,
.bank-income-type-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.bank-opening-balance-fields label,
.bank-income-type-form label,
.bank-import-override {
  display: grid;
  gap: 6px;
}

.bank-opening-balance-fields .wide,
.bank-import-override {
  grid-column: 1 / -1;
}

.bank-income-type-admin {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.bank-income-type-form {
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
}

.bank-income-type-select {
  min-width: 170px;
  max-width: 220px;
  padding: 7px 30px 7px 8px;
}

.bank-income-type-select.suggested {
  border-color: #d69e2e;
  background: color-mix(in srgb, #d69e2e 9%, var(--panel));
}

.bank-income-type-select.confirmed {
  border-color: #2f9e68;
}

.bank-balance-status,
.bank-balance-difference,
.bank-validation-pill {
  font-weight: 800;
}

.bank-balance-status.verified,
.bank-balance-difference.matched,
.bank-validation-pill.green {
  color: #2f9e68;
}

.bank-balance-status.calculated,
.bank-balance-status.unanchored,
.bank-validation-pill.yellow {
  color: #d69e2e;
}

.bank-balance-status.mismatch,
.bank-balance-difference.mismatch,
.bank-validation-pill.red {
  color: #e35d6a;
}

.bank-import-validation {
  align-items: flex-start;
}

.bank-import-validation.green {
  border-color: color-mix(in srgb, #2f9e68 60%, var(--line));
  background: color-mix(in srgb, #2f9e68 8%, var(--panel));
}

.bank-import-validation.yellow {
  border-color: color-mix(in srgb, #d69e2e 60%, var(--line));
  background: color-mix(in srgb, #d69e2e 8%, var(--panel));
}

.bank-import-validation.red {
  border-color: color-mix(in srgb, #e35d6a 60%, var(--line));
  background: color-mix(in srgb, #e35d6a 8%, var(--panel));
}

.bank-import-validation ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.bank-import-opening-balance {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #d69e2e 55%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, #d69e2e 7%, var(--panel));
}

.bank-import-opening-balance h4,
.bank-import-opening-balance p {
  margin: 0;
}

.bank-confirm-suggestions,
.bank-row-confirm {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bank-confirm-suggestions {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.bank-import-ambiguous-default {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.09);
}

.bank-import-ambiguous-default select {
  width: 100%;
}

.bank-import-ambiguous-default small,
.bank-import-validation > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.bank-income-type-correction-dialog .bank-import-dialog-card {
  width: min(560px, calc(100vw - 28px));
}

.bank-income-type-correction-dialog textarea {
  width: 100%;
}

.bank-row-confirm {
  margin-top: 6px;
  color: var(--muted);
  font-size: .78rem;
}

.bank-ledger-table {
  min-width: 1180px;
}

.bank-import-dialog .bank-ledger-table {
  min-width: 1050px;
}

@media (max-width: 900px) {
  .bank-ledger-toolbar,
  .bank-manual-reconciliation-form,
  .bank-candidate {
    grid-template-columns: 1fr;
  }

  .bank-reconciliation-card > header,
  .bank-ledger-section-header,
  .bank-allocation-row {
    align-items: stretch;
    flex-direction: column;
  }

  .bank-reconciliation-amount {
    justify-items: start;
  }

  .bank-opening-balance-notice,
  .bank-import-validation {
    align-items: stretch;
    flex-direction: column;
  }

  .bank-opening-balance-fields,
  .bank-income-type-form {
    grid-template-columns: 1fr;
  }

  .bank-opening-balance-fields .wide,
  .bank-import-override {
    grid-column: auto;
  }
}

/* Vista financiera de ancho completo: una sola jerarquia y un solo scroll vertical. */
#bankMovementsPanel,
#bankReconciliationPanel,
#bankDashboardCatalogPanel {
  padding: 0 16px 18px;
}

.bank-movements-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: 10px;
  scrollbar-width: thin;
}

.bank-movements-table-wrap .bank-ledger-table {
  min-width: 1120px;
  table-layout: fixed;
}

.bank-ledger-col-date {
  width: 104px;
}

.bank-ledger-col-description {
  width: auto;
}

.bank-ledger-col-type {
  width: 190px;
}

.bank-ledger-col-code {
  width: 120px;
}

.bank-ledger-col-money {
  width: 118px;
}

.bank-ledger-col-balance {
  width: 158px;
}

.bank-ledger-col-available {
  width: 126px;
}

.bank-movements-table-wrap .bank-ledger-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-movements-table-wrap .bank-ledger-table th,
.bank-movements-table-wrap .bank-ledger-table td {
  padding: 12px;
}

.bank-movements-table-wrap .bank-movement-row {
  cursor: default;
  transition: background 150ms ease;
}

.bank-movements-table-wrap .bank-movement-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}

.bank-account-summary {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(135px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.bank-account-summary > div {
  align-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.bank-account-summary > div:last-child {
  border-right: 0;
}

.bank-account-summary strong,
.bank-account-summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bank-account-summary small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.bank-account-summary .bank-account-identity strong {
  font-size: 1.03rem;
}

.bank-account-summary .bank-account-balance strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bank-opening-balance-notice {
  min-height: 50px;
  padding: 9px 13px;
  background: color-mix(in srgb, var(--accent) 3%, var(--panel));
}

.bank-opening-balance-notice.needs-attention {
  border-color: color-mix(in srgb, #d69e2e 60%, var(--line));
  background: color-mix(in srgb, #d69e2e 8%, var(--panel));
}

.bank-opening-balance-action {
  min-height: 34px;
  padding: 6px 11px;
}

.bank-movement-date strong,
.bank-money-cell,
.bank-movement-balance strong,
.bank-available-amount {
  font-variant-numeric: tabular-nums;
}

.bank-movement-date strong,
.bank-money-cell {
  white-space: nowrap;
}

.bank-money-cell {
  text-align: right !important;
}

.bank-debit-cell {
  color: color-mix(in srgb, #e35d6a 88%, var(--text));
}

.bank-credit-cell,
.bank-available-amount {
  color: #2f9e68;
}

.bank-movement-description-toggle {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.bank-movement-description-headline {
  display: -webkit-box;
  overflow: hidden;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bank-movement-description-supporting {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.bank-movement-description-detail {
  display: none;
  gap: 5px;
  margin-top: 6px;
  padding: 9px 10px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bank-movement-description-detail small {
  color: var(--text);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bank-movement-description-toggle[aria-expanded="true"] .bank-movement-description-headline,
.bank-movement-description-toggle[aria-expanded="true"] .bank-movement-description-supporting {
  display: block;
  overflow: visible;
}

.bank-movement-description-toggle[aria-expanded="true"] .bank-movement-description-detail {
  display: grid;
}

.bank-movement-description-hint {
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
}

.bank-movement-description-hint::before {
  content: "Ver detalle";
}

.bank-movement-description-toggle[aria-expanded="true"] .bank-movement-description-hint::before {
  content: "Ocultar detalle";
}

.bank-income-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 5px 9px;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

button.bank-income-type-pill:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.bank-income-type-pill span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bank-income-type-pill.confirmed {
  border-color: color-mix(in srgb, #2f9e68 58%, var(--line));
  background: color-mix(in srgb, #2f9e68 8%, var(--panel));
}

.bank-income-type-pill.suggested {
  border-color: color-mix(in srgb, #d69e2e 62%, var(--line));
  background: color-mix(in srgb, #d69e2e 8%, var(--panel));
}

.bank-income-type-pill.debit {
  color: var(--muted);
}

.bank-income-type-correction-field {
  display: grid;
  gap: 6px;
}

.bank-income-type-correction-field select {
  width: 100%;
}

.bank-movement-balance {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.bank-movement-balance small {
  color: var(--muted);
  font-size: .69rem;
  white-space: nowrap;
}

.bank-balance-match {
  color: #2f9e68;
  font-size: .69rem;
  font-weight: 800;
}

.bank-balance-pending {
  color: #a66f12;
  font-size: .69rem;
  font-weight: 800;
}

.bank-movement-balance .bank-balance-difference {
  font-size: .69rem;
  white-space: nowrap;
}

.bank-availability-state {
  display: inline-block;
  max-width: 100%;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  white-space: normal;
}

.bank-availability-state.pending {
  color: #d69e2e;
}

@media (max-width: 1180px) {
  .bank-account-summary {
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr));
  }

  .bank-account-summary > div {
    border-bottom: 1px solid var(--line);
  }

  .bank-account-summary > div:nth-child(3n) {
    border-right: 0;
  }

  .bank-account-summary > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  #bankMovementsPanel,
  #bankReconciliationPanel,
  #bankDashboardCatalogPanel {
    padding: 0 10px 14px;
  }

  .bank-account-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-account-summary > div,
  .bank-account-summary > div:nth-child(3n) {
    min-height: 64px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .bank-account-summary > div:nth-child(2n) {
    border-right: 0;
  }

  .bank-account-summary .bank-account-identity {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .bank-account-summary > div:last-child {
    border-right: 0;
    border-bottom: 0;
  }

  .bank-movements-table-wrap {
    overflow: visible;
    border: 0;
  }

  .bank-movements-table-wrap .bank-ledger-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .bank-movements-table-wrap .bank-ledger-table colgroup,
  .bank-movements-table-wrap .bank-ledger-table thead {
    display: none;
  }

  .bank-movements-table-wrap .bank-ledger-table tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding: 0;
  }

  .bank-movements-table-wrap .bank-ledger-table .bank-movement-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
  }

  .bank-movements-table-wrap .bank-ledger-table td {
    width: auto;
    min-width: 0;
  }

  .bank-movement-description-cell {
    font-size: inherit !important;
  }

  .bank-money-cell {
    text-align: left !important;
  }

  .bank-movement-balance {
    justify-items: start;
  }
}

/* Conciliacion bancaria compacta */
.bank-reconciliation-shell {
  display: grid;
  gap: 14px;
}

.bank-claim-inbox {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.bank-claim-inbox-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
}

.bank-claim-inbox-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.bank-claim-inbox-summary span,
.bank-reconciliation-queue-filters label > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-claim-inbox-summary strong {
  color: var(--accent);
  font-size: 1.2rem;
}

.bank-reconciliation-queue-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(135px, .65fr)) auto;
  gap: 8px;
  align-items: end;
}

.bank-reconciliation-queue-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.bank-claim-table-wrap,
.bank-manual-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
}

.bank-claim-table-wrap {
  max-height: 455px;
}

.bank-claim-table,
.bank-manual-movements-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

.bank-claim-table {
  min-width: 980px;
}

.bank-manual-movements-table {
  min-width: 1080px;
}

.bank-claim-table th,
.bank-claim-table td,
.bank-manual-movements-table th,
.bank-manual-movements-table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.bank-claim-table thead th,
.bank-manual-movements-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--panel);
  font-size: .7rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-claim-table tbody tr {
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease;
}

.bank-claim-table tbody tr:hover,
.bank-claim-table tbody tr.active {
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
}

.bank-claim-table tbody tr.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.bank-claim-table td > small,
.bank-manual-movements-table td > small,
.bank-manual-movements-table td > details {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.bank-claim-table .bank-match-level,
.bank-manual-movements-table .bank-match-level {
  display: inline-flex;
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
}

.bank-claim-table .bank-match-level.high { color: #5ad697; background: color-mix(in srgb, #2f9e68 18%, var(--panel)); }
.bank-claim-table .bank-match-level.possible { color: #f0bd54; background: color-mix(in srgb, #d69e2e 18%, var(--panel)); }
.bank-claim-table .bank-match-level.low { color: var(--muted); background: color-mix(in srgb, #718096 20%, var(--panel)); }

.bank-manual-movements-table tr.unavailable {
  opacity: .7;
}

.bank-manual-movements-table details summary {
  width: max-content;
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

.bank-manual-movements-table details p {
  min-width: 280px;
  margin: 6px 0 0;
  white-space: normal;
}

.bank-manual-use-cell {
  text-align: right !important;
}

.bank-empty-ledger.compact {
  min-height: 110px;
  padding: 22px;
}

.bank-claim-queue-header,
.bank-suggestions-heading,
.bank-suggestion-actions,
.bank-reconciliation-selection-heading,
.bank-reconciliation-selection-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bank-claim-queue-header span,
.bank-suggestions-heading p,
.bank-reconciliation-selection p,
.bank-reconciliation-selection-actions span,
.bank-manual-movement-search > div p {
  margin: 0;
  color: var(--muted);
}

.bank-claim-queue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.bank-claim-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bank-claim-queue-item:hover,
.bank-claim-queue-item.active {
  border-color: var(--accent);
}

.bank-claim-queue-item.active {
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--panel) 86%, var(--accent) 14%);
}

.bank-claim-queue-item > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.bank-claim-queue-item > span:first-child {
  overflow: hidden;
}

.bank-claim-queue-item > span:first-child strong,
.bank-claim-queue-item > span:first-child small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-claim-queue-item > span:last-child {
  justify-items: end;
  flex: 0 0 auto;
}

.bank-claim-queue-meta {
  justify-items: end;
}

.bank-claim-origin {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.2;
  text-transform: uppercase;
}

.bank-claim-origin.distributor {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: var(--accent);
}

.bank-claim-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
}

.bank-claim-context.distributor {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}

.bank-claim-context > span:not(.bank-claim-origin) {
  display: grid;
  gap: 2px;
  min-width: 130px;
}

.bank-claim-context > span:not(.bank-claim-origin) small {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-claim-context > span:not(.bank-claim-origin) strong {
  font-size: .84rem;
}

.bank-receipt-analysis {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.bank-receipt-analysis.pending,
.bank-receipt-analysis.limited {
  border-style: dashed;
}

.bank-receipt-analysis-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.bank-receipt-analysis h4,
.bank-receipt-analysis p {
  margin: 4px 0 0;
}

.bank-receipt-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.bank-receipt-data-grid > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}

.bank-receipt-data-grid small,
.bank-receipt-analysis-form label > span {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-receipt-data-grid strong {
  overflow: hidden;
  font-size: .85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-receipt-duplicate-alert {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #d69e2e 60%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, #d69e2e 12%, var(--panel));
}

.bank-receipt-duplicate-alert.exact {
  border-color: color-mix(in srgb, var(--danger) 65%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
}

.bank-receipt-duplicate-alert p {
  color: var(--muted);
  font-size: .82rem;
}

.bank-receipt-correction > summary {
  width: max-content;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.bank-receipt-analysis-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.bank-receipt-analysis-form label {
  display: grid;
  gap: 5px;
}

.bank-receipt-analysis-form .wide {
  grid-column: span 2;
}

.bank-receipt-analysis-form button {
  align-self: end;
}

.bank-claim-queue-item small {
  color: var(--muted);
}

.bank-reconciliation-workspace {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.bank-reconciliation-workspace > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.bank-reconciliation-workspace > header h3,
.bank-reconciliation-workspace > header p,
.bank-suggestions-heading h4,
.bank-manual-movement-search h4 {
  margin: 6px 0 0;
}

.bank-suggestions-section,
.bank-manual-movement-search,
.bank-reconciliation-selection {
  display: grid;
  gap: 12px;
}

.bank-suggestions-heading > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.bank-match-candidate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg) 4%);
}

.bank-match-candidate.high { border-left-color: #2f9e68; }
.bank-match-candidate.possible { border-left-color: #d69e2e; }
.bank-match-candidate.low { border-left-color: #718096; }

.bank-match-candidate-main,
.bank-match-candidate-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bank-match-candidate-heading {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.bank-match-candidate-heading > span,
.bank-match-candidate-copy,
.bank-match-details,
.bank-reconciliation-selection-row small {
  color: var(--muted);
}

.bank-match-candidate-title,
.bank-match-candidate-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-match-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.bank-match-evidence > span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
}

.bank-match-evidence .bank-match-level.high {
  background: color-mix(in srgb, #2f9e68 18%, var(--panel));
  color: #5ad697;
}

.bank-match-evidence .bank-match-level.possible {
  background: color-mix(in srgb, #d69e2e 18%, var(--panel));
  color: #f0bd54;
}

.bank-match-evidence .bank-match-level.low {
  background: color-mix(in srgb, #718096 20%, var(--panel));
  color: var(--muted);
}

.bank-match-details summary,
.bank-import-movement-details summary,
.bank-import-observations summary,
.bank-import-technical summary {
  width: max-content;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.bank-match-details p {
  margin: 8px 0 3px;
  white-space: normal;
}

.bank-suggestion-actions {
  justify-content: flex-start;
}

.bank-manual-movement-search {
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.bank-manual-movement-search-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 9px;
  align-items: end;
}

.bank-manual-movement-search-form .wide {
  grid-column: span 2;
}

.bank-manual-movement-search-form label {
  display: grid;
  gap: 5px;
}

.bank-manual-movement-search-form label > span,
.bank-reconciliation-selection-heading span,
.bank-reconciliation-selection-row label span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-manual-search-results {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow-y: auto;
}

.bank-manual-auto-status {
  min-height: 1.1rem;
  margin: 9px 0 7px;
  color: var(--muted);
  font-size: .8rem;
}

.bank-reconciliation-selection {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.bank-reconciliation-selection.has-items {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.bank-reconciliation-selection-heading > div {
  display: grid;
  gap: 3px;
}

.bank-reconciliation-selection-heading > div:last-child {
  justify-items: end;
}

.bank-reconciliation-selection-list {
  display: grid;
  gap: 7px;
}

.bank-reconciliation-selection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 145px auto;
  align-items: end;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.bank-reconciliation-selection-row > span,
.bank-reconciliation-selection-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bank-reconciliation-selection-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.danger-text { color: #e35d6a; }

/* Asistente de importacion bancaria */
#bankImportDialog.bank-import-dialog {
  width: min(1180px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

#bankImportDialog .bank-import-dialog-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.bank-import-dialog-header,
.bank-import-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  background: var(--panel);
  z-index: 2;
}

.bank-import-dialog-header {
  border-bottom: 1px solid var(--line);
}

.bank-import-dialog-header h3,
.bank-import-dialog-header p {
  margin: 0;
}

.bank-import-dialog-footer {
  border-top: 1px solid var(--line);
}

.bank-import-preview-content {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  padding: 18px 20px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%);
}

.bank-import-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 12px;
  background: var(--panel);
}

.bank-import-hero.green { border-left-color: #2f9e68; }
.bank-import-hero.yellow { border-left-color: #d69e2e; }
.bank-import-hero.red { border-left-color: #e35d6a; }

.bank-import-hero > div {
  display: grid;
  gap: 4px;
}

.bank-import-hero p,
.bank-import-hero span {
  margin: 0;
  color: var(--muted);
}

.bank-import-validation-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
}

.bank-import-validation-badge.green {
  color: #5ad697;
  background: color-mix(in srgb, #2f9e68 18%, var(--panel));
}

.bank-import-validation-badge.yellow {
  color: #f0bd54;
  background: color-mix(in srgb, #d69e2e 18%, var(--panel));
}

.bank-import-validation-badge.red {
  color: #ff8792;
  background: color-mix(in srgb, #e35d6a 18%, var(--panel));
}

.bank-import-identity-confirm,
.bank-import-identity-matched,
.bank-confirm-suggestions,
.bank-import-ambiguous-default,
.bank-import-opening-balance,
.bank-import-observations,
.bank-import-technical {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}

.bank-import-identity-confirm,
.bank-confirm-suggestions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.bank-import-identity-confirm > input,
.bank-confirm-suggestions > input,
.bank-row-confirm > input {
  flex: 0 0 auto;
  width: auto;
  margin-top: 2px;
}

.bank-import-identity-confirm {
  border-color: color-mix(in srgb, #d69e2e 65%, var(--line));
}

.bank-import-identity-confirm > span,
.bank-confirm-suggestions > span,
.bank-import-identity-matched {
  display: grid;
  gap: 3px;
}

.bank-import-identity-confirm small,
.bank-confirm-suggestions small,
.bank-import-identity-matched span,
.bank-import-ambiguous-default small {
  color: var(--muted);
}

.bank-import-identity-matched {
  border-color: color-mix(in srgb, #2f9e68 55%, var(--line));
}

.bank-import-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
}

.bank-import-overview > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.bank-import-overview span {
  color: var(--muted);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-import-overview strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bank-import-overview strong.verified { color: #5ad697; }

.bank-import-observations summary {
  color: #f0bd54;
}

.bank-import-observations ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.bank-import-opening-balance {
  display: grid;
  gap: 10px;
  border-color: color-mix(in srgb, #d69e2e 55%, var(--line));
}

.bank-import-opening-balance h4,
.bank-import-opening-balance p {
  margin: 0;
}

.bank-import-ambiguous-default {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, .7fr);
  gap: 5px 12px;
  align-items: center;
}

.bank-import-ambiguous-default small {
  grid-column: 1 / -1;
}

.bank-import-review {
  display: grid;
  gap: 10px;
}

.bank-import-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.bank-import-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.bank-import-tabs button span {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg);
  font-size: .75rem;
}

.bank-import-tabs button[aria-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: inherit;
}

.bank-import-tabs button:disabled {
  opacity: .45;
  cursor: default;
}

.bank-import-panel {
  display: grid;
  gap: 8px;
}

.bank-import-movement-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 11px;
  background: var(--panel);
}

.bank-import-movement-card.new { border-left-color: #2f9e68; }
.bank-import-movement-card.ambiguous { border-left-color: #d69e2e; }
.bank-import-movement-card.duplicate { border-left-color: #718096; opacity: .86; }

.bank-import-movement-summary,
.bank-import-movement-body,
.bank-import-movement-details > div {
  display: grid;
  gap: 12px;
}

.bank-import-movement-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.bank-import-movement-summary > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bank-import-movement-summary span {
  color: var(--muted);
}

.bank-import-row-status {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 800;
}

.bank-import-row-status.new { color: #5ad697; background: color-mix(in srgb, #2f9e68 18%, var(--panel)); }
.bank-import-row-status.ambiguous { color: #f0bd54; background: color-mix(in srgb, #d69e2e 18%, var(--panel)); }
.bank-import-row-status.duplicate { color: var(--muted); background: var(--bg); }

.bank-import-movement-body {
  grid-template-columns: minmax(0, 1fr) minmax(205px, 250px) minmax(170px, 210px);
  align-items: start;
}

.bank-import-movement-copy,
.bank-import-income-choice,
.bank-import-income-choice label,
.bank-import-ambiguous-choice {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bank-import-movement-copy strong,
.bank-import-movement-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-import-movement-copy span,
.bank-import-movement-copy small,
.bank-import-type-readonly {
  color: var(--muted);
}

.bank-row-confirm {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px !important;
  color: var(--muted);
  font-size: .78rem;
}

.bank-import-income-choice label > span,
.bank-import-ambiguous-choice > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.bank-import-movement-details {
  min-width: 0;
}

.bank-import-movement-details p {
  margin: 9px 0 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.bank-import-movement-details > div {
  grid-template-columns: repeat(3, minmax(130px, max-content));
  margin-top: 8px;
  color: var(--muted);
  font-size: .8rem;
}

.bank-import-movement-details > div span {
  display: grid;
  gap: 2px;
}

.bank-import-technical > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.bank-import-technical > div span {
  display: grid;
  gap: 3px;
  color: var(--muted);
}

.bank-import-technical strong { color: inherit; }
.bank-import-empty-tab { color: var(--muted); text-align: center; }
.bank-import-expiry { color: var(--muted); text-align: right; }

@media (max-width: 1050px) {
  .bank-manual-movement-search-form,
  .bank-reconciliation-queue-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .bank-manual-movement-search-form .wide,
  .bank-reconciliation-queue-filters .wide {
    grid-column: span 2;
  }

  .bank-import-overview {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .bank-import-movement-body {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 250px);
  }

  .bank-import-movement-body > :last-child {
    grid-column: 2;
  }
}

@media (max-width: 700px) {
  .bank-claim-queue-header,
  .bank-suggestions-heading,
  .bank-suggestion-actions,
  .bank-reconciliation-selection-heading,
  .bank-reconciliation-selection-actions,
  .bank-reconciliation-workspace > header,
  .bank-receipt-analysis-heading,
  .bank-import-hero,
  .bank-import-dialog-header,
  .bank-import-dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .bank-reconciliation-amount,
  .bank-reconciliation-selection-heading > div:last-child {
    justify-items: start;
  }

  .bank-claim-queue-meta {
    justify-items: end;
  }

  .bank-claim-context {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bank-claim-context > .bank-claim-origin {
    grid-column: 1 / -1;
  }

  .bank-match-candidate,
  .bank-reconciliation-selection-row,
  .bank-receipt-analysis-form,
  .bank-manual-movement-search-form,
  .bank-reconciliation-queue-filters,
  .bank-claim-inbox-summary,
  .bank-import-movement-summary,
  .bank-import-movement-body,
  .bank-import-overview,
  .bank-import-ambiguous-default {
    grid-template-columns: 1fr;
  }

  .bank-manual-movement-search-form .wide,
  .bank-receipt-analysis-form .wide,
  .bank-reconciliation-queue-filters .wide,
  .bank-import-ambiguous-default small,
  .bank-import-movement-body > :last-child {
    grid-column: auto;
  }

  .bank-match-candidate > button,
  .bank-reconciliation-selection-actions button,
  .bank-reconciliation-queue-filters > button,
  .bank-import-dialog-footer button {
    width: 100%;
  }

  .bank-match-candidate-heading {
    grid-template-columns: 1fr;
  }

  .bank-claim-inbox {
    padding: 10px;
  }

  .bank-claim-table-wrap,
  .bank-manual-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .bank-claim-table,
  .bank-manual-movements-table {
    min-width: 0;
  }

  .bank-claim-table thead,
  .bank-manual-movements-table thead {
    display: none;
  }

  .bank-claim-table tbody,
  .bank-claim-table tr,
  .bank-claim-table td,
  .bank-manual-movements-table tbody,
  .bank-manual-movements-table tr,
  .bank-manual-movements-table td {
    display: block;
    width: 100%;
  }

  .bank-claim-table tbody,
  .bank-manual-movements-table tbody {
    display: grid;
    gap: 10px;
  }

  .bank-claim-table tr,
  .bank-manual-movements-table tr {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg);
  }

  .bank-claim-table td,
  .bank-manual-movements-table td {
    display: grid;
    grid-template-columns: minmax(105px, .65fr) minmax(0, 1fr);
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    text-align: left !important;
  }

  .bank-claim-table td::before,
  .bank-manual-movements-table td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .bank-claim-table td:last-child,
  .bank-manual-movements-table td:last-child {
    border-bottom: 0;
  }

  .bank-manual-use-cell > button {
    width: 100%;
  }

  #bankImportDialog.bank-import-dialog {
    width: calc(100vw - 10px);
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
    border-radius: 11px;
  }

  .bank-import-dialog-header,
  .bank-import-dialog-footer,
  .bank-import-preview-content {
    padding: 12px;
  }

  .bank-import-dialog-footer {
    flex-direction: row;
  }

  .bank-import-tabs {
    overflow-x: auto;
  }

  .bank-import-tabs button {
    flex: 0 0 auto;
  }

  .bank-import-movement-summary > div,
  .bank-import-movement-details > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bank-import-movement-copy strong,
  .bank-import-movement-copy span,
  .bank-match-candidate-title,
  .bank-match-candidate-copy {
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .bank-claim-context {
    grid-template-columns: 1fr;
  }

  .bank-claim-context > .bank-claim-origin {
    grid-column: auto;
  }
}

/* Egresos */
.expenses-workbench {
  min-width: 0;
}

.expenses-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.expense-metric-card {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.expense-metric-card span,
.expense-metric-card small {
  color: var(--muted);
}

.expense-metric-card strong {
  font-size: 1.28rem;
}

.expenses-filters {
  grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(145px, 1fr));
  margin: 14px 0;
}

.expense-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.expenses-table {
  min-width: 1180px;
}

.expenses-table td {
  vertical-align: top;
}

.expenses-table td strong,
.expenses-table td small {
  display: block;
}

.expenses-table td small {
  margin-top: 4px;
  color: var(--muted);
}

.expense-select-cell {
  width: 38px;
  text-align: center;
}

.expense-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

.expense-status.green {
  border-color: color-mix(in srgb, #1f9d63 60%, var(--line));
  background: color-mix(in srgb, #1f9d63 12%, var(--panel));
  color: #147a4b;
}

.expense-status.yellow {
  border-color: color-mix(in srgb, #d69e2e 60%, var(--line));
  background: color-mix(in srgb, #d69e2e 12%, var(--panel));
  color: #946c13;
}

.expense-status.red,
.expense-status.closed {
  border-color: color-mix(in srgb, #d9534f 58%, var(--line));
  background: color-mix(in srgb, #d9534f 10%, var(--panel));
  color: #a53431;
}

.expense-status.gray {
  background: color-mix(in srgb, var(--muted) 8%, var(--panel));
  color: var(--muted);
}

.expense-row-actions,
.expense-detail-actions,
.expense-dialog-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.link-button.danger,
.ghost-button.danger {
  color: #b33b38;
}

.expenses-catalog-panel {
  margin-top: 16px;
}

.expenses-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

.expense-catalog-card,
.expense-recurring-note {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.expense-catalog-card h3,
.expense-catalog-card p,
.expense-recurring-note p {
  margin: 0;
}

.expense-catalog-card p,
.expense-recurring-note p {
  margin-top: 5px;
  color: var(--muted);
}

.expense-catalog-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 14px 0;
}

.expense-catalog-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.expense-catalog-list > span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: .82rem;
}

.expense-recurring-note {
  margin-bottom: 14px;
  border-color: color-mix(in srgb, #d69e2e 50%, var(--line));
  background: color-mix(in srgb, #d69e2e 7%, var(--panel));
}

.expense-dialog {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
}

.expense-dialog::backdrop {
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(3px);
}

.expense-dialog-card {
  width: 100%;
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}

.expense-dialog-card.compact {
  width: min(720px, 100%);
  margin: 0 auto;
}

.expense-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.expense-dialog-header h2,
.expense-dialog-header p {
  margin: 0;
}

.expense-form-grid,
.expense-conditional-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.expense-form-grid label,
.expense-conditional-fields label,
.expense-dialog-card > label {
  display: grid;
  gap: 6px;
}

.expense-form-grid .wide,
.expense-conditional-fields .wide {
  grid-column: 1 / -1;
}

.expense-conditional-fields {
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.expense-conditional-fields legend {
  padding: 0 7px;
  font-weight: 800;
}

.expense-conditional-fields .inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expense-dialog-actions {
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.expense-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.expense-detail-grid section {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.expense-detail-grid span {
  color: var(--muted);
  font-size: .78rem;
}

.expense-detail-section {
  margin-top: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.expense-detail-section h3 {
  margin: 0 0 10px;
}

.expense-warning {
  padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, #d9534f 9%, var(--panel));
  color: #a53431;
}

.expense-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expense-file-list a {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}

.expense-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.expense-payment-row:first-of-type {
  border-top: 0;
}

.expense-payment-row > div:first-child {
  display: grid;
  gap: 3px;
}

.expense-payment-row span,
.expense-payment-row small {
  color: var(--muted);
}

.expense-audit-list {
  display: grid;
  gap: 8px;
}

.expense-audit-list article {
  display: grid;
  gap: 3px;
  padding-left: 12px;
  border-left: 3px solid var(--line);
}

.expense-audit-list span {
  color: var(--muted);
  font-size: .82rem;
}

.expense-bank-movement-list {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.expense-bank-movement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.expense-bank-movement:hover {
  border-color: var(--accent);
}

.expense-bank-movement span {
  display: grid;
  gap: 4px;
}

.expense-bank-movement small {
  color: var(--muted);
}

.expense-treasury-toolbar,
.expense-treasury-card > header,
.expense-treasury-meta,
.expense-petty-items > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.expense-treasury-toolbar {
  margin-bottom: 14px;
}

.expense-treasury-toolbar h3,
.expense-treasury-toolbar p {
  margin: 0;
}

.expense-treasury-list {
  display: grid;
  gap: 12px;
}

.expense-treasury-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.expense-treasury-card > header > div {
  display: grid;
  gap: 4px;
}

.expense-treasury-card > header > div:last-child {
  justify-items: end;
}

.expense-treasury-card header span,
.expense-treasury-meta,
.expense-treasury-card summary {
  color: var(--muted);
  font-size: .84rem;
}

.expense-treasury-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.expense-treasury-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}

.expense-treasury-card details {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.expense-treasury-card summary {
  cursor: pointer;
  font-weight: 700;
}

.expense-petty-items {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.expense-petty-items > div {
  padding: 8px;
  border-radius: 8px;
  background: var(--bg);
}

.expense-cash-pool-metrics {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.expense-form-grid label > .link-button,
.expense-conditional-fields label > .link-button {
  justify-self: start;
}

@media (max-width: 1200px) {
  .expenses-metrics {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .expenses-filters {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 720px) {
  .expenses-metrics,
  .expenses-filters,
  .expenses-catalog-grid,
  .expense-form-grid,
  .expense-conditional-fields,
  .expense-detail-grid {
    grid-template-columns: 1fr;
  }

  .expense-form-grid .wide,
  .expense-conditional-fields .wide {
    grid-column: auto;
  }

  .expense-dialog-header,
  .expense-payment-row,
  .expense-bank-movement,
  .expense-batch-bar,
  .expense-treasury-toolbar,
  .expense-treasury-card > header,
  .expense-petty-items > div {
    align-items: stretch;
    flex-direction: column;
  }

  .expense-cash-pool-metrics {
    grid-template-columns: 1fr;
  }
}

/* Ventas: estados independientes y Puntos Sellomatic */
.sales-order-status-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.sales-order-status-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--accent) 7%, var(--panel)));
}

.sales-order-status-card.payment {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}

.sales-order-status-card > span,
.sellomatic-points-private-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sales-order-status-card > strong {
  justify-self: start;
  font-size: .92rem;
}

.sales-order-status-card > small,
.sellomatic-points-reconciliation-copy p,
.bank-manual-reconciliation-form small {
  color: var(--muted);
  line-height: 1.4;
}

/* Ventas: el panel lateral resume; la vista completa organiza la ficha del pedido. */
.sales-order-detail {
  min-width: 0;
}

.sales-order-detail-header h2 {
  max-width: 780px;
  line-height: 1.2;
}

.sales-order-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.sales-order-overview > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.sales-order-overview span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sales-order-overview strong {
  overflow-wrap: anywhere;
  font-size: 1.08rem;
}

.sales-order-sidebar-detail .detail-focus-toolbar {
  position: sticky;
  top: -20px;
  z-index: 4;
  margin: -20px -20px 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(10px);
}

.sales-order-sidebar-detail .sales-order-status-cards {
  grid-template-columns: 1fr;
}

.sales-order-sidebar-detail .sales-order-status-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 12px;
}

.sales-order-sidebar-detail .sales-order-status-card > span,
.sales-order-sidebar-detail .sales-order-status-card > small {
  grid-column: 1;
}

.sales-order-sidebar-detail .sales-order-status-card > strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
}

.sales-order-sidebar-detail .sales-order-status-card > small {
  font-size: .7rem;
}

.sales-order-sidebar-detail .sales-order-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.sales-order-sidebar-detail .sales-order-overview > div {
  padding: 10px;
}

.sales-order-sidebar-detail .sales-order-overview strong {
  font-size: .94rem;
}

.sales-order-sidebar-sections {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.sales-order-sidebar-disclosure {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.sales-order-sidebar-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 850;
}

.sales-order-sidebar-disclosure > summary::-webkit-details-marker {
  display: none;
}

.sales-order-sidebar-disclosure > summary::before {
  content: "+";
  grid-column: 2;
  grid-row: 1;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 900;
}

.sales-order-sidebar-disclosure[open] > summary::before {
  content: "−";
}

.sales-order-sidebar-disclosure > summary > span {
  grid-column: 1;
  grid-row: 1;
}

.sales-order-sidebar-disclosure > summary > small {
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-sidebar-disclosure[open] > summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.sales-order-sidebar-disclosure-body {
  padding: 12px;
}

.sales-order-sidebar-disclosure-body > .detail-section {
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.sales-order-sidebar-disclosure-body > .detail-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.sales-order-sidebar-disclosure-body > .detail-section:first-child > h3 {
  display: none;
}

.sales-order-sidebar-detail .detail-meta,
.sales-order-sidebar-detail .comment-form,
.sales-order-sidebar-detail .field-value-list,
.sales-order-sidebar-detail .timeline {
  gap: 8px;
}

.sales-order-sidebar-detail .field-value {
  padding: 9px;
}

.sales-order-sidebar-detail .order-follow-up-upload {
  grid-template-columns: 1fr;
}

.sales-order-sidebar-detail .order-follow-up-upload button,
.sales-order-sidebar-detail .comment-form button,
.sales-order-sidebar-detail [data-sales-order-update] button {
  width: 100%;
}

.sales-order-more-copy {
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.app-shell.order-detail-focus .detail-panel {
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
}

.sales-order-focused-detail {
  width: min(1420px, 100%);
  margin: 0 auto;
}

.sales-order-focused-detail .detail-focus-toolbar {
  position: sticky;
  top: -38px;
  z-index: 5;
  margin: -38px -38px 18px;
  padding: 16px 38px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px);
}

.sales-order-focused-detail .sales-order-detail-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.sales-order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
  gap: 18px;
  align-items: start;
}

.sales-order-detail-column {
  display: grid;
  gap: 18px;
  min-width: 0;
  align-content: start;
}

.sales-order-focused-detail .detail-section {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent);
}

.sales-order-focused-detail .detail-section h3 {
  margin-bottom: 14px;
  color: var(--text);
  font-size: .86rem;
  letter-spacing: .035em;
}

.sales-order-focused-detail .sales-order-items-section .field-value-list,
.sales-order-focused-detail .sales-order-artifacts-section > .field-value-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-order-focused-detail .sales-order-artifacts-section .field-value-list .field-value-list {
  grid-template-columns: 1fr;
}

.sales-production-files {
  display: grid;
  gap: 14px;
}

.sales-production-heading {
  display: flex;
  gap: 18px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.sales-production-heading h3,
.sales-production-heading p {
  margin: 0;
}

.sales-production-heading h3 {
  color: var(--text);
  font-size: 1.15rem !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

.sales-production-heading p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
}

.sales-production-heading > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .82rem;
}

.sales-production-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
  overflow: hidden;
}

.sales-production-item.is-expanded {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
}

.sales-production-summary {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.sales-production-product,
.sales-production-file-name,
.sales-production-editor-block > summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sales-production-product strong,
.sales-production-file-name > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-production-product small,
.sales-production-file-name small,
.sales-production-editor-block > summary small {
  color: var(--muted);
  font-size: .76rem;
}

.sales-production-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 4vw, 46px);
  max-width: 820px;
}

.sales-production-status {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
  padding: 0;
}

.sales-production-status > span {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 5px;
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .045em;
}

.sales-production-status.is-ready > span {
  background: var(--success);
}

.sales-production-status.is-pending > span {
  background: var(--danger);
}

.sales-production-status > strong {
  font-size: .92rem;
  line-height: 1.2;
}

.sales-production-status > strong b {
  color: inherit;
}

.sales-production-status > small {
  overflow: hidden;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-production-manage {
  justify-self: start;
  min-width: 116px;
}

.sales-production-editor {
  display: grid;
  gap: 8px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.sales-production-editor-block {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  overflow: hidden;
}

.sales-production-editor-block > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.sales-production-editor-block > summary::-webkit-details-marker {
  display: none;
}

.sales-production-editor-block > summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1rem;
  font-weight: 950;
}

.sales-production-editor-block[open] > summary::after {
  content: "−";
}

.sales-production-editor-block[open] > summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.sales-production-editor-block > summary > b {
  color: var(--muted);
  font-size: .72rem;
}

.sales-production-editor-block > summary > b.is-ready {
  color: var(--success);
}

.sales-production-editor-block > summary > b.is-pending {
  color: var(--danger);
}

.sales-production-editor-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}

.sales-production-file-list {
  display: grid;
  gap: 7px;
}

.sales-production-file-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.sales-production-grace {
  color: var(--warning, #e6ab3c) !important;
  font-weight: 750;
}

.sales-production-empty,
.sales-production-permission-note {
  margin: 0;
  font-size: .76rem;
}

.sales-production-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin: 0;
}

.sales-production-upload input[type="file"] {
  min-width: 0;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.sales-production-upload input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.sales-production-direct-upload {
  min-width: 0;
  margin: 0;
}

.sales-production-direct-picker,
.order-direct-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.sales-production-direct-upload.is-pending .sales-production-direct-picker {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.sales-production-direct-picker:hover,
.sales-production-direct-picker:focus-within,
.order-direct-file-picker:hover,
.order-direct-file-picker:focus-within {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.sales-production-direct-picker > span,
.order-direct-file-picker > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sales-production-direct-picker small,
.order-direct-file-picker small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 500;
}

.sales-production-direct-picker > b,
.order-direct-file-picker > b {
  color: var(--accent);
  font-size: .78rem;
  text-align: right;
}

.sales-production-direct-picker > b i,
.order-direct-file-picker > b i {
  margin-left: 4px;
  font-size: 1rem;
  font-style: normal;
}

.sales-production-direct-picker input[type="file"],
.order-direct-file-picker input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.sales-production-direct-upload.is-uploading {
  opacity: .72;
  pointer-events: none;
}

.sales-production-direct-upload.is-uploading .sales-production-direct-picker {
  cursor: progress;
}

.order-direct-file-picker {
  margin-top: 8px;
  border-style: dashed;
}

.sales-production-files.is-sidebar {
  gap: 10px;
}

.sales-production-files.is-sidebar .sales-production-summary {
  gap: 13px;
  padding: 12px;
}

.sales-production-files.is-sidebar .sales-production-product strong {
  overflow-wrap: anywhere;
  white-space: normal;
}

.sales-production-files.is-sidebar .sales-production-statuses {
  gap: 0;
}

.sales-production-files.is-sidebar .sales-production-status + .sales-production-status {
  padding-left: 9px;
  border-left: 1px solid var(--line);
}

.sales-production-files.is-sidebar .sales-production-status > span {
  padding: 4px 6px;
  font-size: .64rem;
}

.sales-production-files.is-sidebar .sales-production-status > strong {
  font-size: .72rem;
}

.sales-production-files.is-sidebar .sales-production-status > small {
  font-size: .64rem;
}

.sales-production-files.is-sidebar .sales-production-manage {
  width: 100%;
}

.sales-production-files.is-sidebar .sales-production-editor {
  padding: 10px 12px 12px;
}

.sales-production-files.is-sidebar .sales-production-editor-block > summary {
  padding: 10px;
}

.sales-production-files.is-sidebar .sales-production-editor-body {
  padding: 10px;
}

.sales-production-files.is-sidebar .sales-production-upload {
  grid-template-columns: 1fr;
}

.sales-production-files.is-sidebar .sales-production-upload button {
  width: 100%;
}

.sales-order-focused-detail .sales-order-update-section form,
.sales-order-focused-detail .comment-form {
  display: grid;
  gap: 10px;
}

.sales-order-focused-detail .sales-order-update-section button,
.sales-order-focused-detail .comment-form button {
  justify-self: start;
}

.sellomatic-points-private {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.sellomatic-points-private strong {
  color: var(--accent);
  font-size: 1.15rem;
}

.sellomatic-points-private small {
  color: var(--muted);
}

.sellomatic-points-private details {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.sellomatic-points-private summary {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.sellomatic-point-history {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.sellomatic-point-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.sellomatic-point-history-row:first-child {
  border-top: 0;
}

.sellomatic-point-history-row > span:first-child {
  display: grid;
  gap: 3px;
}

.sellomatic-point-history-row .positive {
  color: var(--success);
  font-weight: 800;
}

.sellomatic-point-history-row .negative {
  color: var(--warning);
  font-weight: 800;
}

.bank-points-excess-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  cursor: pointer;
}

.bank-points-excess-option input {
  margin-top: 4px;
}

.bank-points-excess-option span {
  display: grid;
  gap: 4px;
}

.bank-points-excess-option small {
  color: var(--muted);
  line-height: 1.4;
}

.sellomatic-points-reconciliation-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) auto;
  gap: 14px;
  align-items: end;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.sellomatic-points-reconciliation-copy,
.sellomatic-points-reconciliation-form label {
  display: grid;
  gap: 6px;
}

.sellomatic-points-reconciliation-copy h4,
.sellomatic-points-reconciliation-copy p {
  margin: 0;
}

.sellomatic-points-reconciliation-form label > span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bank-manual-reconciliation-form .wide {
  grid-column: 1 / -2;
}

.bank-report-panel {
  display: grid;
  gap: 16px;
}

.bank-report-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.bank-report-toolbar h3,
.bank-report-toolbar p {
  margin: 5px 0 0;
}

.bank-report-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.bank-report-actions label {
  display: grid;
  gap: 5px;
}

.bank-report-actions label > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.bank-report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.bank-report-summary > div {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}

.bank-report-summary span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bank-report-summary strong {
  font-size: 1.05rem;
}

.bank-report-summary .warning {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
}

.bank-report-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.bank-report-table {
  width: 100%;
  min-width: 1380px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.bank-report-table th,
.bank-report-table td {
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.bank-report-table th:last-child,
.bank-report-table td:last-child {
  border-right: 0;
}

.bank-report-table thead th {
  background: color-mix(in srgb, var(--panel) 82%, var(--bg) 18%);
  text-align: center;
}

.bank-report-table thead tr:first-child th {
  font-size: .82rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.bank-report-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
}

.bank-report-table th:nth-child(3),
.bank-report-table td:nth-child(3),
.bank-report-table th:nth-child(6),
.bank-report-table td:nth-child(6),
.bank-report-table th:nth-child(9),
.bank-report-table td:nth-child(9) {
  border-left: 2px solid color-mix(in srgb, var(--muted) 45%, var(--line));
}

.bank-report-table .money-cell {
  text-align: right;
}

.bank-report-account {
  position: sticky;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 6px;
  min-width: 250px;
  background: var(--panel);
  white-space: normal !important;
}

.bank-report-table thead th:first-child,
.bank-report-table tfoot th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}

.bank-report-account > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: .76rem;
}

.bank-report-balance,
.bank-report-net {
  font-weight: 800;
}

.bank-report-table .negative,
.bank-report-summary .negative {
  color: var(--danger);
}

.bank-report-table .positive,
.bank-report-summary .positive {
  color: var(--success);
}

.bank-report-table tfoot th,
.bank-report-table tfoot td {
  border-bottom: 0;
  background: color-mix(in srgb, var(--success) 12%, var(--panel));
  font-weight: 900;
}

.bank-report-footnote {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}

@media (max-width: 820px) {
  .sales-order-status-cards,
  .sellomatic-points-reconciliation-form {
    grid-template-columns: 1fr;
  }

  .sales-order-overview,
  .sales-order-focused-detail .sales-order-items-section .field-value-list,
  .sales-order-focused-detail .sales-order-artifacts-section > .field-value-list {
    grid-template-columns: 1fr;
  }

  .sales-order-detail-grid {
    grid-template-columns: 1fr;
  }

  .sales-production-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-production-summary {
    gap: 15px;
    padding: 16px;
  }

  .sales-production-statuses {
    gap: 10px;
  }

  .sales-production-status > strong,
  .sales-production-status > small {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .sales-production-editor {
    padding: 12px 16px 16px;
  }

  .sales-production-upload {
    grid-template-columns: 1fr;
  }

  .sales-production-upload button {
    width: 100%;
  }

  .sales-order-focused-detail .detail-focus-toolbar {
    top: -20px;
    margin: -20px -20px 14px;
    padding: 12px 20px;
  }

  .bank-manual-reconciliation-form .wide {
    grid-column: auto;
  }

  .bank-report-toolbar,
  .bank-report-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .bank-report-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-report-actions label {
    grid-column: 1 / -1;
  }

  .bank-report-actions button {
    width: 100%;
  }

  #exportBankReportButton {
    grid-column: 1 / -1;
  }

  .bank-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .bank-report-summary {
    grid-template-columns: 1fr;
  }
}