:root {
  --color-navy: #011B50;
  --color-blue: #0170FE;
  --color-accent: #0170FE;
  --color-white: #FEFDFD;
  --color-bg: #E9EBEF;
  --color-divider: #CCD0D7;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEF4FF;
  --color-border: #D9E2F1;
  --color-text: #111827;
  --color-muted: #64748B;
  --color-danger: #DC2626;
  --sidebar-width: 282px;
}

[data-theme="dark"] {
  --color-divider: #3C414B;
  --color-bg: #0B1220;
  --color-surface: #111827;
  --color-surface-muted: #172033;
  --color-border: #263245;
  --color-text: #F8FAFC;
  --color-muted: #94A3B8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.auth-shell {
  align-items: stretch;
  background: linear-gradient(135deg, var(--color-navy), #052A78 48%, var(--color-blue));
  display: grid;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}

.auth-panel {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(1, 27, 80, 0.28);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1fr);
  max-width: 980px;
  overflow: hidden;
  width: 100%;
}

.auth-brand {
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
}

.auth-brand img {
  height: auto;
  max-width: 210px;
}

.auth-form {
  padding: 42px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

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

.sidebar {
  background: var(--color-navy);
  color: #F8FAFC;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
  padding: 20px 16px;
}

.sidebar-header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.sidebar-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 8px;
  min-width: 0;
}

.sidebar-brand img {
  flex-shrink: 0;
  background: #FFFFFF;
  border-radius: 8px;
  height: 42px;
  object-fit: contain;
  padding: 4px;
  width: 42px;
}

.sidebar-brand strong {
  display: block;
  font-size: 15px;
}

.sidebar-brand span {
  color: #BCD3FF;
  display: block;
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sidebar-collapse-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  flex: 0 0 auto;
}

.sidebar-collapse-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.sidebar-collapsed .sidebar {
  padding-left: 12px;
  padding-right: 12px;
}

.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .sidebar-brand > span,
.sidebar-collapsed .nav-section-title,
.sidebar-collapsed .nav-link span {
  display: none;
}

.sidebar-collapsed .sidebar-header {
  display: grid;
  justify-items: center;
}

.sidebar-collapsed .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .nav-section-items {
  display: grid;
}

.nav-section {
  display: grid;
  gap: 6px;
}

.nav-section-title {
  align-items: center;
  background: transparent;
  border: 0;
  color: #93B5F8;
  cursor: pointer;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: space-between;
  padding: 12px 10px 4px;
  text-transform: uppercase;
  width: 100%;
}

.nav-section-title [data-nav-chevron] {
  transition: transform 0.18s ease;
}

.nav-section-title[aria-expanded="true"] [data-nav-chevron] {
  transform: rotate(180deg);
}

.nav-section-items {
  display: none;
  gap: 6px;
}

.company-picker {
  background: var(--color-surface, #fff);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 28px;
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.company-picker::backdrop { background: rgba(20, 24, 32, 0.65); }
.company-picker .page-title { font-size: 22px; }
.company-picker-logo { width: 110px; height: 64px; object-fit: contain; margin-bottom: 16px; }
.company-picker-exit { margin-top: 16px; }
.company-picker .page-subtitle { overflow-wrap: anywhere; }
.field .checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.field .checkbox-label input { width: 16px; min-height: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0; }
.sat-code-warning:not([hidden]) { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #92400E; }
.import-row-warnings { color: #92400E; white-space: normal; }
[data-theme="dark"] .sat-code-warning,
[data-theme="dark"] .import-row-warnings { color: #FCD34D; }

.nav-section.is-open .nav-section-items {
  display: grid;
}

.nav-link {
  align-items: center;
  border-radius: 8px;
  color: #E2E8F0;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.nav-link:hover,
.nav-link.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.app-main {
  border-left: 6px solid var(--color-divider);
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  align-items: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: 24px;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.page-title {
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}

.page-subtitle {
  color: var(--color-muted);
  margin: 8px 0 0;
}

.breadcrumbs {
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
}

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

.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(1, 27, 80, 0.07);
  padding: 18px;
}

.stat-card {
  display: grid;
  gap: 12px;
}

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

.stat-card strong {
  font-size: 26px;
}

.stat-card-date,
.stat-card-money {
  font-size: 20px;
}

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

.quick-action,
.module-card,
.work-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
}

.quick-action {
  align-items: center;
  display: flex;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
}

.quick-action i,
.module-card-icon {
  color: var(--color-blue);
}

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

.quick-action small {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 2px;
}

.work-queue {
  display: grid;
  gap: 10px;
}

.work-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 11px 12px;
}

.module-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-card {
  display: grid;
  gap: 14px;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 132px;
  padding: 16px;
}

.module-card-icon {
  align-items: center;
  background: rgba(1, 112, 254, 0.1);
  border-radius: 8px;
  display: flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.module-card h3 {
  font-size: 15px;
  margin: 0 0 10px;
}

.module-card strong,
.module-card span {
  display: block;
}

.module-card strong {
  font-size: 18px;
}

.module-card span {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 6px;
}

.toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.section-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-heading h2,
.section-heading h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
}

.filter-grid,
.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.invoice-attachments-grid {
  align-items: start;
}

.invoice-attachments-grid .field {
  align-content: start;
}

.invoice-attachments-grid input[type="file"] {
  height: 48px;
  min-width: 0;
  max-width: 100%;
}

.invoice-duplicate-notice p {
  margin: 6px 0 12px;
}

.invoice-flow {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.invoice-guidance {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoice-flow-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoice-guidance article {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-height: 102px;
  padding: 14px;
}

.invoice-guidance span,
.invoice-guidance small {
  color: var(--color-muted);
  font-size: 12px;
}

.invoice-guidance span {
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-guidance strong {
  font-size: 18px;
}

.flow-step {
  align-items: center;
  border-right: 1px solid var(--color-border);
  color: var(--color-muted);
  display: flex;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
}

.flow-step:last-child {
  border-right: 0;
}

.flow-step span {
  align-items: center;
  background: var(--color-surface-muted);
  border-radius: 999px;
  color: var(--color-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.flow-step strong {
  color: inherit;
  font-size: 13px;
}

.flow-step.is-current {
  background: rgba(1, 112, 254, 0.08);
  color: var(--color-blue);
}

.flow-step.is-current span {
  background: var(--color-blue);
  color: #FFFFFF;
}

.filter-actions {
  align-items: end;
  display: flex;
  gap: 10px;
}

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

.document-lines input,
.document-lines select {
  min-width: 160px;
}

.document-lines tr.is-deleted {
  display: none;
}

.invoice-lines {
  min-width: 1260px;
  table-layout: fixed;
}

.invoice-lines th:nth-child(1) { width: 330px; }
.invoice-lines th:nth-child(2) { width: 120px; }
.invoice-lines th:nth-child(3) { width: 140px; }
.invoice-lines th:nth-child(4) { width: 130px; }
.invoice-lines th:nth-child(5) { width: 160px; }
.invoice-lines th:nth-child(6) { width: 190px; }
.invoice-lines th:nth-child(7) { width: 150px; }
.invoice-lines th:nth-child(8) { width: 60px; }

.invoice-lines input {
  min-width: 0;
}

.invoice-lines .autocomplete-field {
  min-width: 0;
}

.invoice-lines [data-expense-category][hidden],
.invoice-lines [data-shortage-fields][hidden],
.invoice-lines .input-action-row[hidden] { display: none; }
.invoice-line-kind { margin-bottom: 8px; }
.invoice-shortage-fields { margin-bottom: 8px; }
.invoice-shortage-fields .field { margin-top: 8px; }
.claim-resolution { padding: 12px 0; border-bottom: 1px solid var(--border); }

.invoice-lines .button-icon {
  flex: 0 0 40px;
}

.invoice-lines td:nth-child(2) input,
.invoice-lines td:nth-child(3) input,
.invoice-lines td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.line-remove-cell {
  min-width: 56px;
  text-align: right;
}

.line-delete-control {
  display: none;
}

.document-summary {
  align-items: center;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 14px;
}

.document-summary span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.document-summary strong {
  font-size: 24px;
}

.document-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content max-content);
}

.invoice-lines .is-unmatched td:first-child input {
  border-color: #b7791f;
}

@media (max-width: 1100px) {
  .document-summary-grid {
    grid-template-columns: repeat(2, max-content max-content);
  }
}

.input-action-row {
  align-items: stretch;
  display: flex;
  gap: 8px;
}

.field-label-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.field-add-link {
  background: transparent;
  border: 0;
  color: #0064df;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 0;
}

[data-theme="dark"] .field-add-link {
  color: #75b4ff;
}

.field-add-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field-add-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.input-action-row select,
.input-action-row input,
.input-action-row textarea {
  flex: 1 1 auto;
}

.button-icon {
  min-width: 40px;
  padding-left: 10px;
  padding-right: 10px;
}

.quick-create-modal {
  color: var(--color-text);
  margin: auto;
  max-height: calc(100dvh - 32px);
  max-width: 520px;
  width: min(92vw, 520px);
}

.quick-create-modal::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.stock-export-dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
}

.catalog-import-form,
.catalog-import-history,
.catalog-import-templates,
.catalog-import-summary,
.catalog-import-results {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.catalog-import-form .form-grid { align-items: start; }
.catalog-import-templates summary { cursor: pointer; margin-bottom: 20px; font-weight: 600; }
.catalog-import-filename, .catalog-import-label { overflow-wrap: anywhere; }
.catalog-import-summary h2, .catalog-import-history h2, .catalog-import-results h2 { font-size: 18px; margin-bottom: 12px; }
.catalog-progress-caption { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0 8px; }
.catalog-progress-body progress { width: 100%; height: 10px; appearance: none; border: 0; border-radius: 4px; overflow: hidden; background: var(--color-border); accent-color: var(--color-blue); }
.catalog-progress-body progress::-webkit-progress-bar { background: var(--color-border); }
.catalog-progress-body progress::-webkit-progress-value { background: var(--color-blue); }
.catalog-progress-body progress::-moz-progress-bar { background: var(--color-blue); }
.catalog-import-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.catalog-import-counts dt { color: var(--color-muted); font-size: 12px; }
.catalog-import-counts dd { margin: 4px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.catalog-progress-dialog .catalog-import-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-progress-dialog [hidden] { display: none; }
.catalog-import-summary [hidden] { display: none; }
.catalog-import-results .toolbar { margin: 16px 0; justify-content: flex-start; gap: 12px; }
.catalog-import-results select { width: auto; min-width: 160px; height: 40px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); background: var(--color-surface); }
@media (max-width: 600px) {
  .catalog-import-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stock-export-option {
  margin: 18px 0;
}

.stock-export-option input {
  accent-color: var(--color-blue);
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.modal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-header h3 {
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
}

.ui-table {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

.ui-table th,
.ui-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 13px 12px;
  text-align: left;
}

.ui-table th {
  color: var(--color-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.row-actions form,
.toolbar form {
  margin: 0;
}

.detail-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-item {
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
  padding: 4px 0 12px;
}

.detail-item span {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.detail-item strong {
  color: var(--color-text);
  display: block;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.muted-text {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.permission-grid {
  display: grid;
  gap: 8px;
}

.permission-modules {
  display: grid;
  gap: 12px;
}

.permission-module {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.permission-module summary {
  align-items: center;
  background: var(--color-surface-muted);
  cursor: pointer;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  padding: 12px 14px;
}

.permission-row {
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.permission-row span {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.permission-badge {
  background: var(--color-surface-muted);
  border-radius: 999px;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 12px;
  padding: 4px 8px;
  white-space: nowrap;
}

.permission-inherited {
  background: rgba(1, 112, 254, 0.12);
  color: var(--color-accent);
}

.permission-allow {
  background: #DCFCE7;
  color: #166534;
}

.permission-deny {
  background: #FEE2E2;
  color: #991B1B;
}

.permission-card {
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) auto minmax(250px, auto);
  padding: 12px 14px;
}

.permission-card > div:first-child span,
.permission-card small {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.permission-radio-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.permission-radio-group label {
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  display: inline-flex;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
}

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

.access-summary-card span {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  text-transform: uppercase;
}

.access-summary-card strong {
  display: block;
  font-size: 28px;
  margin-top: 4px;
}

.badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
}

.badge-success {
  background: #DCFCE7;
  color: #166534;
}

.badge-muted {
  background: #E2E8F0;
  color: #475569;
}

.badge-danger {
  background: #FEE2E2;
  color: #991B1B;
}

.badge-warning {
  background: #FEF3C7;
  color: #92400E;
}

.badge-info {
  background: rgba(1, 112, 254, 0.12);
  color: var(--color-blue);
}

.button {
  align-items: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
}

.button-primary {
  background: var(--color-blue);
  color: #FFFFFF;
}

.button-secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.button-danger {
  background: var(--color-danger);
  color: #FFFFFF;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.field label {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea,
.document-lines input:not([type="hidden"]):not([type="checkbox"]),
.document-lines select,
.search-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font: inherit;
  min-height: 40px;
  padding: 9px 11px;
  width: 100%;
}

.field input:focus-visible,
.search-input:focus-visible,
.document-lines input:focus-visible {
  outline: 2px solid #0170fe;
  outline-offset: 1px;
}

.field select option,
.document-lines select option {
  background: var(--color-surface);
  color: var(--color-text);
}

.field input[type="color"] {
  cursor: pointer;
  max-width: 120px;
  min-height: 44px;
  padding: 4px;
}

.field ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.field li label {
  align-items: center;
  display: flex;
  gap: 8px;
  font-weight: 500;
}

.company-settings-form {
  display: grid;
  gap: 18px;
}

.settings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  padding: 18px;
}

.settings-section-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
}

.settings-section-header h2 {
  font-size: 18px;
  margin: 0;
}

.settings-section-header p {
  color: var(--color-muted);
  margin: 6px 0 0;
}

.settings-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.company-image-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-image-card {
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 112px minmax(0, 1fr);
  padding: 14px;
}

.company-image-preview {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  display: flex;
  height: 82px;
  justify-content: center;
  overflow: hidden;
  width: 112px;
}

.company-image-preview-small {
  height: 72px;
  width: 72px;
}

.company-image-preview img {
  height: 100%;
  object-fit: contain;
  padding: 8px;
  width: 100%;
}

.company-image-preview span,
.company-image-card small,
.company-file-name,
.field small {
  color: var(--color-muted);
  font-size: 12px;
}

.company-image-card strong,
.company-image-card small,
.company-file-name {
  display: block;
}

.company-image-card small {
  margin: 4px 0 10px;
}

.company-file-name {
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.company-image-input {
  height: 0;
  overflow: hidden;
}

.company-image-input input[type="file"] {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.color-settings-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.checkbox-field label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.checkbox-field input {
  min-height: auto;
  width: auto;
}

.autocomplete-field {
  flex: 1;
  min-width: 260px;
  position: relative;
}

.autocomplete-results {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(1, 27, 80, 0.16);
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  position: fixed;
  z-index: 100;
}

.autocomplete-option {
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.autocomplete-option:hover,
.autocomplete-option[aria-selected="true"] {
  background: var(--color-surface-muted);
}

.autocomplete-option span,
.autocomplete-empty {
  color: var(--color-muted);
  font-size: 12px;
}

.autocomplete-empty {
  padding: 12px;
}

.password-field {
  position: relative;
}

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

.password-eye {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  position: absolute;
  right: 2px;
  top: 1px;
  width: 42px;
}

.alert {
  border-radius: 8px;
  padding: 12px 14px;
}

.alert-error {
  background: #FEE2E2;
  color: #991B1B;
}

.alert-success {
  background: #DCFCE7;
  color: #166534;
}

.alert-warning {
  background: #FEF3C7;
  color: #92400E;
}

.empty-state {
  color: var(--color-muted);
  padding: 32px;
  text-align: center;
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    inset: 0 auto 0 0;
    max-width: 320px;
    position: fixed;
    transform: translateX(-105%);
    transition: transform 160ms ease;
    width: 86vw;
    z-index: 30;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-collapsed .sidebar-brand > span,
  .sidebar-collapsed .nav-section-title,
  .sidebar-collapsed .nav-link span {
    display: block;
  }

  .sidebar-collapsed .nav-link {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

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

  .module-grid,
  .invoice-guidance,
  .quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .document-summary-grid {
    grid-template-columns: max-content max-content;
    gap: 8px 16px;
  }

  .auth-panel {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    border-right: 0;
    padding: 28px;
  }

  .auth-form {
    padding: 28px;
  }

  .content,
  .topbar {
    padding-left: 16px;
    padding-right: 16px;
  }

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

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

  .access-summary-grid,
  .module-grid,
  .invoice-guidance,
  .quick-action-grid,
  .permission-card,
  .filter-grid,
  .form-grid,
  .form-grid-compact,
  .settings-grid,
  .company-image-grid,
  .color-settings-grid {
    grid-template-columns: 1fr;
  }

  .invoice-flow {
    grid-template-columns: 1fr;
  }

  .flow-step {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .flow-step:last-child {
    border-bottom: 0;
  }

  .page-title {
    font-size: 23px;
  }
}

/* Shared operational surfaces keep the existing tenant palette and typography. */
.workspace-section {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}
.workspace-section h2, .section-heading h2 { font-size: 17px; font-weight: 600; margin: 0; }
.workspace-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 16px 0; border-block: 1px solid var(--color-border); }
.workspace-filters .field { margin: 0; min-width: 180px; }
.product-main-search { flex: 1 1 320px; }
.inventory-main-search { flex: 1 1 200px; }
.inventory-main-search input { width: 100%; }
.workspace-filter-details { flex: 1 0 100%; order: 5; }
.workspace-filter-details summary { color: var(--color-blue); cursor: pointer; font-size: 13px; width: fit-content; padding: 6px 0; }
.workspace-filter-details .filter-grid { margin: 10px 0 0; }
.workspace-status { min-height: 20px; margin: -12px 0; font-size: 13px; color: var(--color-muted); }
.workspace-back { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--color-blue); margin: 0 0 16px; }
.record-link { color: var(--color-blue); font-weight: 600; }
.record-link:hover, .workspace-back:hover { text-decoration: underline; }
.finance-tabs { display:flex; flex-wrap:wrap; gap:8px 24px; border-bottom:1px solid var(--color-border); margin-bottom:20px; }
.finance-tabs a { padding:12px 0; font-size:13px; color:var(--color-muted); border-bottom:2px solid transparent; }
.finance-tabs a[aria-current="page"] { color:var(--color-text); border-color:var(--color-text); border-bottom-width:3px; font-weight:600; }
.import-row-errors { margin:8px 0 0; padding-left:18px; max-width:640px; white-space:normal; overflow-wrap:anywhere; color:var(--color-text); }
.finance-tabs a:focus-visible { outline:2px solid var(--color-text); outline-offset:3px; }
.invoice-lines th:nth-child(7), .invoice-lines th:nth-child(8) { width:120px; }
.invoice-lines th:nth-child(9), .invoice-lines th:nth-child(10) { width:160px; }
.invoice-lines th:nth-child(11) { width:60px; }

.invoice-capture-table { min-width: 1049px; }
.invoice-capture-table th:nth-child(1) { width: 290px; }
.invoice-capture-table th:nth-child(2) { width: 85px; }
.invoice-capture-table th:nth-child(3) { width: 110px; }
.invoice-capture-table th:nth-child(4) { width: 105px; }
.invoice-capture-table th:nth-child(5) { width: 110px; }
.invoice-capture-table th:nth-child(6) { width: 140px; }
.invoice-capture-table th:nth-child(7) { width: 155px; }
.invoice-capture-table th:nth-child(8) { width: 54px; }
.invoice-capture-table td { vertical-align: top; }
.invoice-capture-table input, .invoice-capture-table select { min-width: 0; width: 100%; }
.invoice-capture-table .input-action-row { display: flex; align-items: flex-start; gap: 8px; }
.invoice-capture-table .autocomplete-field { flex: 1; }
.invoice-capture-table .field { gap: 4px; margin-bottom: 8px; }
.invoice-capture-table .field label { font-size: 11px; color: var(--muted); }
.invoice-line-details { margin-top: 10px; }
.invoice-line-details > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.invoice-line-details[open] > summary { margin-bottom: 8px; }
.invoice-capture-table .invoice-shortage-fields { padding-top: 10px; }
.invoice-capture-table .invoice-shortage-fields > summary { font-size: 12px; white-space: normal; }
.request-error-page { max-width: 720px; margin: 12vh auto; padding: 24px; }
.request-error-page p { margin: 16px 0; line-height: 1.5; }
.finance-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:0 0 20px; border-bottom:1px solid var(--color-border); }
.finance-filters .field { flex:1 1 155px; min-width:0; margin-bottom:0; }
.finance-filters .finance-supplier-filter { flex-basis:240px; }
.finance-filters input { width:100%; }
.finance-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); margin:20px 0 28px; gap:18px; }
.finance-kpi { display:grid; align-content:start; gap:8px; border-left:3px solid var(--color-blue); padding:4px 12px; min-width:0; }
.finance-kpi:nth-child(2) { border-color:#c07c28; }
.finance-kpi:nth-child(3) { border-color:#1b9379; }
.finance-kpi:nth-child(4) { border-color:#ad626a; }
.finance-kpi > span,.finance-kpi small { font-size:12px; color:var(--color-muted); }
.finance-kpi strong { font-size:23px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.finance-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.finance-section { border-top:1px solid var(--color-border); padding:18px 0; min-width:0; }
.finance-section h2,.finance-section-heading h2 { font-size:15px; font-weight:600; margin:0; }
.finance-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:14px 0; }
.finance-section-heading > span { color:var(--color-muted); font-size:12px; }
.finance-aging-row { display:grid; grid-template-columns:110px minmax(20px,1fr) minmax(90px,auto); align-items:center; gap:12px; padding:10px 0; font-size:12px; }
.finance-aging-row strong { text-align:right; font-variant-numeric:tabular-nums; }
.finance-bar { height:8px; background:var(--color-border); overflow:hidden; border-radius:2px; }
.finance-bar span { display:block; height:100%; background:var(--color-blue); }
.finance-aging-row:nth-child(n+4) .finance-bar span { background:#c07c28; }
.finance-aging-row:last-child .finance-bar span { background:#bd525f; }
.finance-number { text-align:right !important; white-space:nowrap; font-variant-numeric:tabular-nums; }
.finance-overdue { display:block; color:#c04550 !important; font-size:12px; }
[data-theme="dark"] .finance-overdue { color:#ffadb4 !important; }
.finance-secondary { display:block; color:var(--color-muted); font-size:12px; margin-top:4px; }
.finance-party-row { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.finance-party-row small { display:block; color:var(--color-muted); }
.finance-party-row strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.finance-entry-form { max-width:900px; padding:20px 0; border-top:1px solid var(--color-border); }
.finance-entry-form .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.finance-entry-form .checkbox-field { grid-column:1/-1; }
.supplier-payment-form .finance-section h2 { margin-bottom: 16px; }
.supplier-payment-form [name="invoice_amount"] { width: 150px; text-align: right; font-variant-numeric: tabular-nums; }
.supplier-payment-form [data-payment-summary] { padding: 12px 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.supplier-payment-form [data-search-status] { min-height: 24px; margin: 8px 0; color: var(--color-muted); }
.supplier-payment-form .record-link:disabled { color: var(--color-muted); cursor: default; }
[data-theme="dark"] .supplier-payment-form input[type="date"] { color-scheme: dark; }
.finance-document-context { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:0 0 20px; }
@media(max-width:1100px) { .finance-columns { grid-template-columns:minmax(0,1fr); gap:0; } .finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .finance-kpis { grid-template-columns:minmax(0,1fr); } .finance-entry-form .form-grid { grid-template-columns:minmax(0,1fr); } .finance-aging-row { grid-template-columns:100px minmax(10px,1fr) auto; gap:8px; } }
.muted { color: var(--color-muted); font-size: 13px; }
.numeric { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.login-page { background: var(--login-background); }
.login-page .auth-shell { position: relative; z-index: 2; background: transparent; }
.login-page .auth-panel { background: transparent; gap: 0; }
.login-page .auth-brand { justify-content: center; align-items: center; padding: 40px; background: rgba(255,255,255,var(--login-brand-opacity,1)); }
.login-page .auth-brand img { width: min(300px, 100%); max-width: 300px; max-height: 380px; object-fit: contain; }
.login-page .auth-form { background: rgba(255,255,255,var(--login-form-opacity,1)); color: #17202c; }
.login-page .auth-form .page-subtitle, .login-page .auth-form label { color: #17202c; }
.login-page .auth-form input:not([type="hidden"]) { background: #fff; color: #17202c; }
.login-background-image, .login-background-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }
.login-background-video { z-index: 1; }
.login-background-video[hidden], .login-video-toggle[hidden] { display: none; }
.login-video-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; background: #fff; color: #17202c; border: 1px solid #8590a0; border-radius: 6px; }
.login-preview { aspect-ratio: 16/9; max-width: 850px; position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: 6px; }
.login-preview > img, .login-preview > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-preview-content { position: absolute; inset: 12% 10%; display: grid; grid-template-columns: .8fr 1fr; color: #17202c; border-radius: 6px; overflow: hidden; pointer-events: none; }
.login-preview-brand { display: grid; place-items: center; padding: 16px; background: rgba(255,255,255,var(--login-brand-opacity,1)); }
.login-preview-brand img { max-height: 200px; width: 100%; object-fit: contain; }
.login-preview-form { display: grid; align-content: center; gap: 8px; font-size: 12px; padding: 20px; background: rgba(255,255,255,var(--login-form-opacity,1)); }
.login-preview-input { background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 8px; }
.login-preview-button { background: #0170fe; color: #fff; padding: 8px; text-align: center; border-radius: 4px; }
[data-login-appearance] input[type="range"] { width: 100%; accent-color: var(--color-blue); padding: 0; }
[data-transparency-value] { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
@media(max-width:768px) { .login-background-video, .login-video-toggle { display: none; } .login-page .auth-brand { padding: 20px; } .login-page .auth-brand img { max-height: 110px; } .login-preview { min-height: 280px; } .login-preview-content { inset: 6%; } .login-preview-form { padding: 10px; font-size: 11px; gap: 5px; } }
.permission-summary { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 20px; font-size: 13px; }
.permission-editor-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.permission-editor-toolbar .field { flex: 1; min-width: 180px; }
.permission-editor-toolbar input[type="search"], .permission-editor-toolbar select { width: 100%; }
.permission-editor-module h2 { font-size: 15px; margin: 20px 0 8px; }
.permission-editor-row { display: flex; align-items: center; gap: 20px; min-height: 62px; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.permission-editor-row[hidden], .permission-editor-module[hidden] { display: none; }
.permission-description { flex: 1; min-width: 0; }
.permission-description small, .permission-description code { display: block; color: var(--color-muted); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; }
.permission-description code[hidden] { display: none; }
.permission-description .badge { margin-left: 8px; font-size: 10px; }
.permission-editor-row .permission-radio-group { flex: 0 0 auto; margin: 0; }
.permission-confirmation ul { max-height: 50vh; overflow: auto; padding: 16px 24px; }
.permission-confirmation { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 22px; }
.permission-confirmation .toolbar { justify-content: flex-end; gap: 10px; margin-bottom: 0; }
.permission-radio-group > div { display: flex; gap: 4px; flex-wrap: wrap; }
.permission-editor-row .permission-radio-group label { border-radius: 4px; padding: 5px 8px; }
.permission-editor-row input { accent-color: var(--color-blue); }
.role-editor h2 { font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.role-general { padding: 16px 0 20px; border-top: 1px solid var(--color-border); }
.role-editor .field { margin: 0; min-width: 0; align-content: start; }
.role-editor .field input, .role-editor .field select:not([multiple]) { height: 44px; }
.role-general-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.role-general-grid .role-description { grid-column: span 2; }
.role-general-grid textarea { min-height: 64px; height: 64px; }
.role-active, .role-show-codes { display: flex; gap: 10px; align-items: center; font-size: 13px; cursor: pointer; }
.role-active { align-self: center; }
.role-editor input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--color-blue); }
.role-permissions { border-top: 1px solid var(--color-border); padding-top: 22px; scroll-margin-top: 88px; }
.role-permissions-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.role-permissions-heading > span { color: var(--color-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.role-permission-filters { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; align-items: end; gap: 16px; padding-bottom: 18px; }
.role-permission-filters .role-mobile-module { display: none; }
.role-show-codes { min-height: 44px; }
.role-permission-workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-block: 1px solid var(--color-border); background: var(--color-surface); }
.role-module-nav { padding: 8px; border-right: 1px solid var(--color-border); max-height: 480px; overflow: auto; }
.role-module-nav button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--color-text); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.role-module-nav button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.role-module-nav [data-role-module-count] { flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.role-module-nav button:hover { background: var(--color-bg); }
.role-module-nav button[aria-pressed="true"] { background: var(--color-blue); color: #fff; }
.role-module-nav button[aria-pressed="true"] [data-role-module-count] { color: #fff; }
.role-permission-results { min-height: 320px; max-height: 480px; overflow: auto; padding: 0 20px; }
.role-editor .permission-editor-module h3 { font-size: 13px; font-weight: 700; margin: 0; padding: 16px 0 10px; border-bottom: 1px solid var(--color-border); }
.role-editor .permission-editor-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; min-height: 48px; padding: 10px 4px; font-size: 13px; cursor: pointer; }
.role-editor .permission-editor-row[hidden] { display: none; }
.role-editor .permission-description { line-height: 1.45; overflow-wrap: anywhere; }
.role-editor .permission-editor-row .badge { font-size: 10px; padding: 3px 6px; }
.role-editor .permission-editor-row:has(input:checked) { background: color-mix(in srgb, var(--color-blue) 7%, transparent); }
.role-editor .permission-editor-row:focus-within { outline: 2px solid var(--color-blue); outline-offset: -2px; }
.role-permissions-empty { padding: 28px 0; font-size: 14px; color: var(--color-muted); }
.role-editor-actions { position: sticky; bottom: 0; z-index: 5; padding: 14px 0; border-top: 1px solid var(--color-border); background: var(--color-bg); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
@media(max-width:1000px) {
  .role-permission-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-permission-filters .role-mobile-module { display: grid; }
  .role-module-nav { display: none; }
  .role-permission-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media(max-width:600px) {
  .role-general-grid, .role-permission-filters { grid-template-columns: minmax(0, 1fr); }
  .role-general-grid .role-description { grid-column: auto; }
  .role-permission-results { padding: 0 10px; }
  .role-editor .permission-editor-row { gap: 8px; grid-template-columns: 18px minmax(0, 1fr); }
  .role-editor .permission-editor-row .badge { grid-column: 2; justify-self: start; }
  .role-editor-actions { flex-wrap: wrap; }
}
[data-login-appearance] .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.inventory-document .toolbar { justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.inventory-document .toolbar .field { flex: 1; max-width: 600px; }
.inventory-document .toolbar input:not([type="hidden"]), .inventory-document td input { border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); padding: 10px; }
.inventory-document td input { width: 130px; height: 40px; }
.inventory-document .ui-table { min-width: 900px; }
.location-scroll .ui-table { min-width: 0; }
@media(max-width:600px) { [data-login-appearance] .form-grid { grid-template-columns: 1fr; } .location-scroll th, .location-scroll td { padding: 8px 6px; font-size: 11px; } .location-scroll th:last-child { width: 26%; } }
@media(max-width:700px) { .permission-editor-row { gap: 10px; flex-wrap: wrap; } .permission-description { flex-basis: 100%; } }
.product-table { min-width: 800px; }
.product-table th:first-child { width: 160px; }
.product-table th:nth-child(2) { min-width: 240px; }
.product-table td:first-child { white-space: nowrap; }
.product-browser { display: flex; flex-direction: column; height: 570px; min-height: 460px; min-width: 0; }
.product-browser-results { display: flex; flex-direction: column; flex: 1; min-height: 160px; min-width: 0; }
.product-browser-results > .table-wrap { flex: 1; min-height: 0; overflow: auto; margin: 0; border: 1px solid var(--color-border); background: var(--color-surface); }
.product-browser-results .section-heading { margin: 0 0 10px; }
.product-browser-results nav[aria-label="Paginación"] { margin: 8px 0 0; flex-shrink: 0; }
.inventory-balance-table { min-width: 1200px; }
.inventory-balance-table td:first-child { white-space: nowrap; }
.inventory-balance-table .row-actions { flex-wrap: nowrap; }
.product-browser-results thead { position: sticky; top: 0; z-index: 1; background: var(--color-surface); }
[data-product-select] { cursor: pointer; }
[data-product-select]:hover { background: var(--color-surface-muted); }
[data-product-select].product-selected { background: #dceaff; box-shadow: inset 4px 0 #0170fe; }
[data-theme="dark"] [data-product-select].product-selected { background: #24405e; box-shadow: inset 4px 0 #70b4ff; }
[data-theme="dark"] .product-browser .record-link, [data-theme="dark"] .product-location-section a { color: #83bfff; }
[data-product-select]:focus-visible { outline-offset: -2px; }
.product-panel-resizer { flex: 0 0 14px; display: grid; place-items: center; cursor: ns-resize; touch-action: none; }
.product-panel-resizer span { width: 44px; height: 4px; border-radius: 2px; background: var(--color-muted); }
.product-panel-resizer:hover span, .product-panel-resizer:focus-visible span { background: var(--color-blue); }
.product-browser.is-resizing { user-select: none; cursor: ns-resize; }
.product-location-section { display: flex; flex-direction: column; flex: 0 0 auto; height: 218px; min-height: 132px; }
.product-location-section h2 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; margin: 0; }
.product-location-section [data-location-sku] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-location-section .section-heading { flex-wrap: nowrap; gap: 12px; min-height: 32px; margin: 0 0 8px; flex-shrink: 0; }
.product-location-section .row-actions { flex: 0 0 auto; flex-wrap: nowrap; }
.product-location-section a { color: var(--color-blue); font-size: 13px; }
.product-location-section [data-location-status] { margin: 0 0 8px; }
.product-location-section [data-location-status]:empty { display: none; }
.location-scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--color-border); background: var(--color-surface); }
.location-scroll .ui-table { width: 100%; table-layout: fixed; }
.location-scroll thead { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.location-scroll td, .location-scroll th { height: 44px; padding: 10px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media(max-width:600px) { .location-scroll th, .location-scroll td { padding: 8px 6px; font-size: 11px; } }
[data-inventory-progress] { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
[data-inventory-progress] progress { flex: 1; min-width: 120px; accent-color: var(--color-blue); }
.financial-summary { display: flex; flex-wrap: wrap; gap: 32px; }
.financial-summary a { display: grid; gap: 6px; min-width: 220px; }
.financial-summary span { color: var(--color-muted); font-size: 13px; }
.financial-summary strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.module-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.module-directory a { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.module-directory span { color: var(--color-muted); margin-left: auto; }
.form-error-summary ul { margin: 8px 0 0; padding-left: 20px; }
.form-error-summary a { text-decoration: underline; }
[aria-invalid="true"] { border-color: var(--color-danger) !important; }
.content .page-header { align-items: start; gap: 16px; flex-wrap: wrap; }
.content .page-header > div { min-width: 0; }
.content .page-title, .content .page-subtitle, .detail-item strong { overflow-wrap: anywhere; }
.content > section.ui-card, .content > form.ui-card { box-shadow: none; }
.content .table-wrap { max-width: 100%; }
.content > * { min-width: 0; }
.content .ui-table { font-size: 13px; }
.content .ui-table th { font-size: 11px; }
.row-actions { flex-wrap: wrap; }
.button { white-space: normal; }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
.workspace-section .table-wrap { margin-top: 12px; }
.workspace-section .detail-grid { gap: 18px; }
.detail-item > .badge { width: max-content; }
.detail-item > .badge-success { color: #166534; }
.detail-item > .badge-muted { color: #475569; }
.workspace-form-section { border: 0; border-top: 1px solid var(--color-border); margin: 0 0 24px; padding: 18px 0 0; min-width: 0; }
.workspace-form-section legend { font-weight: 600; font-size: 15px; padding: 0 12px 0 0; }
.email-recipients { min-width: 0; border: 0; margin: 0 0 24px; padding: 0; }
.email-recipients legend { font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.email-recipient-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.email-recipient-table th, .email-recipient-table td { border-bottom: 1px solid var(--color-border); padding: 6px 0; }
.email-recipient-table thead th { color: var(--color-muted); font-size: 12px; font-weight: 500; }
.email-recipient-table th:first-child { text-align: left; padding-right: 12px; }
.email-recipient-table th:not(:first-child), .email-recipient-table td { width: 52px; text-align: center; }
.email-recipient-table tbody th { font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.email-recipient-table tbody th strong, .email-recipient-table tbody th span { display: block; }
.email-recipient-table tbody th span { color: var(--color-muted); margin-top: 3px; }
.email-check { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.purchase-email-form .email-check input { width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; accent-color: var(--color-blue); }
.email-check input:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
.email-signature { border-top: 1px solid var(--color-border); padding: 16px 0; margin-bottom: 12px; font-size: 13px; }
.email-signature > span { color: var(--color-muted); }
.email-signature p { margin-top: 6px; }
@media (max-width: 600px) {
  .email-recipient-table th:not(:first-child), .email-recipient-table td { width: 44px; }
}
.form-grid, .filter-grid, .form-grid-compact { align-items: start; }
.form-grid .field, .filter-grid .field, .form-grid-compact .field { align-content: start; }
.field select:not([multiple]) { height: 48px; }
[data-product-form] .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-product-form] [data-field-name="company"] { grid-column: 1 / -1; }
@media (max-width: 1050px) { .module-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  [data-product-form] .form-grid { grid-template-columns: minmax(0, 1fr); }
  .module-directory { grid-template-columns: 1fr; }
  .workspace-filters .field { min-width: 0; width: 100%; }
  .workspace-section .section-heading { align-items: start; gap: 12px; flex-wrap: wrap; }
}