/* Vendor shell follows the published design_system document emitted by PublicPageTheme. */
html { font-size: calc(100% * var(--ds-type-scale, 1)); }
body.vendor-portal { background: var(--ds-background); color: var(--ds-text-primary); font-family: var(--ds-font-body), var(--ds-font-arabic), system-ui, sans-serif; }
.vendor-portal * { box-sizing: border-box; }
.vendor-portal [x-cloak] { display: none !important; }
:is(.vendor-portal, .vendor-guest, .vendor-landing) :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; }
.vendor-skip { position: fixed; z-index: 60; top: -4rem; left: 1rem; background: var(--ds-card); color: var(--ds-text-primary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); padding: .65rem 1rem; }
.vendor-skip:focus { top: 1rem; }
.vendor-shell { background: var(--ds-background); }
.vendor-sidebar { width: 254px; flex-direction: column; flex-shrink: 0; min-height: 100vh; padding: 1.75rem 1rem 1rem; background: var(--ds-surface); border-right: 1px solid var(--ds-border); color: var(--ds-text-primary); }
.vendor-sidebar-desktop { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.vendor-sidebar-mobile { display: flex; overflow-y: auto; box-shadow: 1rem 0 3rem var(--ds-shadow-a40); }
.vendor-brand { min-height: 4rem; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 .65rem; }
.vendor-brand a { display: block; text-decoration: none; }
.vendor-logo { width: 132px; height: 41px; object-fit: contain; object-position: left center; }
.vendor-logo-light { display: var(--ds-logo-light-display, none); }
.vendor-logo-dark { display: var(--ds-logo-dark-display, block); }
.vendor-brand span { display: block; margin-top: .2rem; color: var(--ds-text-secondary); font-size: .56rem; font-weight: 700; letter-spacing: .23em; }
.vendor-mobile-close { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: 0; background: transparent; color: var(--ds-text-secondary); font-size: 1.6rem; line-height: 1; }
.vendor-workspace { display: flex; align-items: center; gap: .75rem; padding: .7rem; margin: 1.2rem 0 1.5rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); min-width: 0; }
.vendor-avatar { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; object-fit: cover; border-radius: var(--ds-radius-sm); background: var(--ds-surface-muted); color: var(--ds-primary); font-weight: 700; }
.vendor-workspace-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 600; }
.vendor-workspace-name small { display: block; color: var(--ds-text-secondary); font-size: .65rem; font-weight: 400; }
.vendor-nav { flex: 1; }
.vendor-nav-label { display: block; margin: .5rem .85rem .7rem; color: var(--ds-text-secondary); font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
.vendor-nav-link { display: flex; align-items: center; gap: .8rem; padding: .8rem .85rem; margin-bottom: .2rem; border-radius: var(--ds-radius-sm); color: var(--ds-text-secondary); text-decoration: none; font-size: .82rem; font-weight: 500; }
.vendor-nav-link:hover, .vendor-nav-link.active { background: var(--ds-surface-muted); color: var(--ds-text-primary); }
.vendor-nav-link.active { box-shadow: inset 3px 0 var(--ds-primary); }
.vendor-nav-icon { width: 1.1rem; height: 1.1rem; display: inline-block; flex-shrink: 0; background: currentColor; mask: var(--vendor-icon) center/contain no-repeat; -webkit-mask: var(--vendor-icon) center/contain no-repeat; }
.vendor-icon-layout-dashboard { --vendor-icon: url('./icons/layout-dashboard.svg'); }
.vendor-icon-package { --vendor-icon: url('./icons/package.svg'); }
.vendor-icon-shopping-bag { --vendor-icon: url('./icons/shopping-bag.svg'); }
.vendor-icon-bell { --vendor-icon: url('./icons/bell.svg'); }
.vendor-icon-menu { --vendor-icon: url('./icons/menu.svg'); }
.vendor-icon-settings { --vendor-icon: url('./icons/settings.svg'); }
.vendor-sidebar-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; padding: 1rem .4rem 0; margin-top: 1.5rem; border-top: 1px solid var(--ds-border); color: var(--ds-text-secondary); font-size: .75rem; }
.vendor-sidebar-footer select { padding: .4rem .5rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-muted); color: var(--ds-text-primary); }
.vendor-sidebar-footer form { grid-column: 1 / -1; }
.vendor-logout { padding: .3rem 0; border: 0; background: transparent; color: var(--ds-text-secondary); }
.vendor-logout:hover { color: var(--ds-primary); }
.vendor-content { background: var(--ds-background); }
.vendor-topbar { min-height: 4.6rem; background: var(--ds-background) !important; border-color: var(--ds-border) !important; box-shadow: none !important; }
.vendor-topbar > div { max-width: 1480px; margin: 0 auto; }
.vendor-page-title { color: var(--ds-text-primary) !important; font-size: 1.2rem; letter-spacing: -.02em; }
.vendor-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; color: var(--ds-text-secondary) !important; }
.vendor-icon-button .vendor-nav-icon { width: 1.25rem; height: 1.25rem; }
.vendor-main { width: 100%; max-width: 1480px; margin: 0 auto; }
.vendor-backdrop { background: var(--ds-scrim); }
/* Existing route content keeps its semantic markup; these map its legacy utility palette to published tokens. */
.vendor-portal :is(.bg-white, .bg-gray-50) { background-color: var(--ds-surface) !important; }
.vendor-portal .bg-gray-100 { background-color: var(--ds-background) !important; }
.vendor-portal :is(.bg-gray-200, .bg-gray-300) { background-color: var(--ds-surface-muted) !important; }
.vendor-portal :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--ds-text-primary) !important; }
.vendor-portal :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: var(--ds-text-secondary) !important; }
.vendor-portal :is(.border-gray-100, .border-gray-200, .border-gray-300, .divide-gray-200) { border-color: var(--ds-border) !important; }
.vendor-portal .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ds-border) !important; }
.vendor-portal :is(.text-teal-700, .text-teal-600, .text-teal-500, .text-purple-600, .text-blue-600, .text-blue-700, .text-blue-800, .text-indigo-800) { color: var(--ds-primary) !important; }
.vendor-portal :is(.bg-teal-50, .bg-teal-100, .bg-purple-100, .bg-blue-100, .bg-indigo-100) { background-color: var(--ds-primary-a10) !important; }
.vendor-portal :is(.bg-green-100, .bg-green-50) { background-color: var(--ds-success-a10) !important; }
.vendor-portal :is(.text-green-800, .text-green-700, .text-green-600) { color: var(--ds-success-text) !important; }
.vendor-portal :is(.border-green-400) { border-color: var(--ds-success-a40) !important; }
.vendor-portal :is(.bg-yellow-400, .bg-yellow-100, .bg-yellow-50) { background-color: var(--ds-warning-a10) !important; }
.vendor-portal :is(.text-yellow-900, .text-yellow-800, .text-yellow-700, .text-yellow-600) { color: var(--ds-warning-text) !important; }
.vendor-portal :is(.bg-red-100, .bg-red-50) { background-color: var(--ds-error-a10) !important; }
.vendor-portal :is(.text-red-800, .text-red-700, .text-red-600) { color: var(--ds-error-text) !important; }
.vendor-portal :is(.border-red-400, .border-red-200) { border-color: var(--ds-error-a40) !important; }
.vendor-portal :is(input, select, textarea) { background: var(--ds-card); color: var(--ds-text-primary); border-color: var(--ds-border); }
.vendor-portal :is(input, textarea)::placeholder { color: var(--ds-text-tertiary); }
.vendor-portal :is(button, [type=submit], a) { -webkit-tap-highlight-color: transparent; }
.vendor-portal :is(.bg-teal-600, .bg-teal-500) { background: var(--ds-button-bg) !important; color: var(--ds-button-fg) !important; }
.vendor-portal .hover\:bg-gray-50:hover { background: var(--ds-surface-muted) !important; }
.vendor-portal .hover\:bg-teal-700:hover { filter: brightness(1.08); }
/* Filter submission is a supporting action; the catalogue creation link keeps the main CTA. */
.vendor-portal form[method="GET"] .bg-teal-600 { background: var(--ds-surface-muted) !important; color: var(--ds-text-primary) !important; border: 1px solid var(--ds-border) !important; }
.vendor-portal form[method="GET"] .bg-teal-600:hover { background: var(--ds-primary-a10) !important; filter: none; }
.vendor-portal :is(.rounded-lg, .rounded-xl) { border-radius: var(--ds-radius-lg); }
.vendor-portal .shadow { box-shadow: 0 .75rem 2rem var(--ds-shadow-a10) !important; }
.vendor-portal table { color: var(--ds-text-primary); }
.vendor-portal th { color: var(--ds-text-secondary); }
.vendor-portal td { border-color: var(--ds-border); }
@media (max-width: 767px) { .vendor-sidebar-mobile { width: min(254px, 90vw); } .vendor-main { padding: 1.3rem !important; } }
@media (prefers-reduced-motion: reduce) { .vendor-portal *, .vendor-portal *::before, .vendor-portal *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
/* Guest application and sign-in screens use the same document and appearance control. */
body.vendor-guest { background: var(--ds-background); color: var(--ds-text-primary); font-family: var(--ds-font-body), var(--ds-font-arabic), system-ui, sans-serif; }
.vendor-guest .blob-1 { background: var(--ds-primary-a10); }
.vendor-guest .blob-2 { background: var(--ds-primary-a10); }
.vendor-guest .guest-header { background: var(--ds-surface); border-color: var(--ds-border); }
.vendor-guest .guest-header .logo { color: var(--ds-text-primary); }
.vendor-guest .guest-header .logo-badge { background: var(--ds-surface-muted); color: var(--ds-text-secondary); }
.vendor-guest .guest-header nav a { color: var(--ds-text-secondary); }
.vendor-guest .guest-header nav a:hover, .vendor-guest .guest-header nav a.active { background: var(--ds-surface-muted); color: var(--ds-text-primary); }
.vendor-guest .guest-card { background: var(--ds-card); color: var(--ds-text-primary); border-color: var(--ds-border); box-shadow: 0 1rem 3rem var(--ds-shadow-a18); }
.vendor-guest .gradient-heading { background: none; -webkit-text-fill-color: currentColor; color: var(--ds-text-primary); }
.vendor-guest :is(.guest-subtitle, .text-muted, .form-hint, .guest-footer) { color: var(--ds-text-secondary); }
.vendor-guest .form-label, .vendor-guest .checkbox-label { color: var(--ds-text-primary); }
.vendor-guest .form-input { background: var(--ds-surface); color: var(--ds-text-primary); border-color: var(--ds-border); }
.vendor-guest .form-input::placeholder { color: var(--ds-text-tertiary); }
.vendor-guest .form-input:focus { border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-a10); }
.vendor-guest .form-error { color: var(--ds-error-text); }
.vendor-guest .alert-success { color: var(--ds-success-text); background: var(--ds-success-a10); border-color: var(--ds-success-a40); }
.vendor-guest .alert-error { color: var(--ds-error-text); background: var(--ds-error-a10); border-color: var(--ds-error-a40); }
.vendor-guest .btn-primary { background: var(--ds-button-bg); color: var(--ds-button-fg); border-color: transparent; }
.vendor-guest .link { color: var(--ds-link); }
.vendor-guest .file-upload-area { background: var(--ds-surface-muted); border-color: var(--ds-border); }
.vendor-guest .file-upload-area:hover { background: var(--ds-primary-a10); border-color: var(--ds-primary); }
.vendor-guest .file-upload-area input[type=file]::file-selector-button { background: var(--ds-surface); color: var(--ds-text-primary); border-color: var(--ds-border); }
.vendor-guest-appearance { display: flex; align-items: center; gap: .4rem; color: var(--ds-text-secondary); font-size: .75rem; }
.vendor-guest-appearance select { background: var(--ds-surface-muted); color: var(--ds-text-primary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); padding: .35rem; }
@media (max-width: 600px) { .vendor-guest-appearance { font-size: 0; } .vendor-guest-appearance select { font-size: .75rem; max-width: 6rem; } }
/* Public vendor landing retains its content and routes while adopting the shared palette. */
body.vendor-landing { background: var(--ds-background); color: var(--ds-text-primary); font-family: var(--ds-font-body), var(--ds-font-arabic), system-ui, sans-serif; }
.vendor-landing .header { background: var(--ds-surface); border-color: var(--ds-border); }
.vendor-landing .header .logo-badge { background: var(--ds-surface-muted); color: var(--ds-text-secondary); }
.vendor-landing .header nav a { color: var(--ds-text-secondary); }
.vendor-landing .header nav a:hover { background: var(--ds-surface-muted); color: var(--ds-text-primary); }
.vendor-landing .header nav .btn-nav, .vendor-landing .header nav .btn-nav:hover { background: var(--ds-button-bg); color: var(--ds-button-fg); box-shadow: none; }
.vendor-landing .hero { background: var(--ds-background); }
.vendor-landing :is(.hero-blob-1, .hero-blob-2) { background: var(--ds-primary-a10); }
.vendor-landing .hero-badge { color: var(--ds-primary); background: var(--ds-surface-muted); border-color: var(--ds-border); }
.vendor-landing .hero h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--ds-text-primary); }
.vendor-landing .hero p, .vendor-landing .features-subtitle, .vendor-landing .stat-label { color: var(--ds-text-secondary); }
.vendor-landing .btn-primary-lg { background: var(--ds-button-bg); color: var(--ds-button-fg); box-shadow: none; }
.vendor-landing .btn-outline { background: var(--ds-surface); color: var(--ds-text-primary); border-color: var(--ds-border); }
.vendor-landing .features { background: var(--ds-background); }
.vendor-landing .features-title, .vendor-landing .feature-card h3 { color: var(--ds-text-primary); }
.vendor-landing .feature-card { background: var(--ds-card); border-color: var(--ds-border); box-shadow: none; }
.vendor-landing .feature-card p { color: var(--ds-text-secondary); }
.vendor-landing .feature-icon { background: var(--ds-primary-a10); color: var(--ds-primary); }
.vendor-landing .feature-icon.teal, .vendor-landing .feature-icon.gold, .vendor-landing .feature-icon.green, .vendor-landing .feature-icon.coral { background: var(--ds-primary-a10); color: var(--ds-primary); }
.vendor-landing .stats { background: var(--ds-surface); }
.vendor-landing .stat-num { background: none; color: var(--ds-text-primary); -webkit-text-fill-color: currentColor; }
.vendor-landing .cta { background: var(--ds-surface-muted); }
.vendor-landing .cta h2 { color: var(--ds-text-primary); }
.vendor-landing .cta p { color: var(--ds-text-secondary); }
.vendor-landing .footer { background: var(--ds-surface); color: var(--ds-text-secondary); border-color: var(--ds-border); }
.vendor-landing .footer p { color: var(--ds-text-secondary); }
.vendor-landing .footer a { color: var(--ds-link); }
@media (max-width: 600px) { .vendor-landing .header nav { gap: .25rem; } .vendor-landing .header nav a { padding: .4rem; } }

/* Stale-edit recovery and notifications share the same semantic palette. */
.vendor-portal .border-amber-200 { border-color: var(--ds-warning-a40) !important; }
.vendor-toast-stack { width: min(20rem, calc(100vw - 2rem)); }

/* Keep long page titles readable without colliding with account controls. */
.vendor-topbar-leading { flex: 1; min-width: 0; margin-right: .75rem; }
.vendor-page-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vendor-topbar-name { max-width: 14rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 767px) { .vendor-topbar-name { display: none; } }

/* Shared supplier lifecycle composition: all colors follow published theme tokens. */
.supplier-onboarding { max-width: 64rem; padding: clamp(1.4rem, 4vw, 3.5rem); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: radial-gradient(ellipse at top right, var(--ds-surface-muted), transparent 65%), var(--ds-card); }
.supplier-onboarding-eyebrow { display: block; color: var(--ds-primary); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.supplier-onboarding h2 { margin: 1rem 0; font-family: var(--ds-font-heading); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -.035em; color: var(--ds-text-primary); }
.supplier-onboarding-intro { max-width: 39rem; font-size: 1rem; line-height: 1.7; color: var(--ds-text-secondary); }
.supplier-onboarding-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 2rem 0; margin: 1.5rem 0; border-block: 1px solid var(--ds-border); }
.supplier-onboarding-progress li { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; }
.supplier-onboarding-number { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--ds-border); color: var(--ds-text-secondary); font-size: .8rem; }
.supplier-onboarding-progress [aria-current="step"] .supplier-onboarding-number { border-color: var(--ds-primary); color: var(--ds-primary); }
.supplier-onboarding-progress strong { display: block; color: var(--ds-text-primary); font-size: .85rem; }
.supplier-onboarding-progress small { display: block; margin-top: .35rem; color: var(--ds-text-secondary); font-size: .78rem; line-height: 1.5; }
.supplier-onboarding-note { max-width: 40rem; color: var(--ds-text-primary); }
.supplier-onboarding-note p { margin-top: .5rem; color: var(--ds-text-secondary); line-height: 1.7; }
@media (max-width: 640px) { .supplier-onboarding-progress { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Shared editorial workspace primitives. No chart implies unavailable trend data. */
.supplier-page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: .75rem 0 2rem; }
.supplier-eyebrow { display: block; color: var(--ds-primary); font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.supplier-page-intro h1 { margin: .65rem 0; max-width: 43rem; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.2; letter-spacing: -.035em; }
.supplier-page-intro p, .supplier-section-heading p { color: var(--ds-text-secondary); font-size: .88rem; line-height: 1.65; margin: .4rem 0 0; }
.supplier-action { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; padding: .75rem 1rem; border: 1px solid var(--ds-primary); border-radius: var(--ds-radius-sm); background: var(--ds-button-bg); color: var(--ds-button-fg); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: normal; text-align: center; cursor: pointer; flex-shrink: 0; }
.supplier-action .vendor-nav-icon { width: 1.1rem; height: 1.1rem; }
.supplier-action-secondary { background: transparent; border-color: var(--ds-border); color: var(--ds-text-primary); }
.supplier-action:hover { filter: brightness(1.08); }
.supplier-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0 0 2rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-border); }
.supplier-metric { position: relative; min-width: 0; padding: 1.5rem; background: var(--ds-card); }
.supplier-metric > .vendor-nav-icon { display: block; width: 1.1rem; height: 1.1rem; margin-bottom: 1.3rem; color: var(--ds-primary); }
.supplier-metric dt { font-size: .75rem; color: var(--ds-text-secondary); }
.supplier-metric dd { margin: .7rem 0 .5rem; font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.supplier-metric small { font-size: .67rem; color: var(--ds-text-secondary); line-height: 1.6; }
.supplier-ledger { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: .5rem 0 2.5rem; }
.supplier-ledger h2, .supplier-section-heading h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin: .5rem 0 0; }
.supplier-ledger dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.supplier-ledger dt { color: var(--ds-text-secondary); font-size: .73rem; }
.supplier-ledger dd { margin: .5rem 0 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.supplier-section { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-card); overflow: hidden; }
.supplier-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; }
.supplier-table-scroll { overflow-x: auto; }
.supplier-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.supplier-table th { padding: .85rem 1.5rem; font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-text-secondary); background: var(--ds-surface-muted); }
.supplier-table td { padding: 1.15rem 1.5rem; border-top: 1px solid var(--ds-border); font-size: .8rem; vertical-align: middle; }
.supplier-table tbody tr:hover { background: var(--ds-surface-muted); }
.supplier-product-cell { display: flex; align-items: center; gap: .75rem; min-width: 170px; max-width: 280px; }
.supplier-product-cell img { flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; border-radius: var(--ds-radius-sm); }
.supplier-product-cell span { overflow-wrap: anywhere; line-height: 1.5; }
.supplier-order-link { color: var(--ds-primary); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.supplier-numeric, .supplier-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.supplier-status { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border: 1px solid var(--ds-border); border-radius: 99px; color: var(--ds-text-secondary); font-size: .68rem; white-space: nowrap; }
.supplier-status::before { content: ''; width: .3rem; height: .3rem; border-radius: 50%; background: currentColor; }
.supplier-status-processing, .supplier-status-shipped, .supplier-status-delivered { color: var(--ds-primary); }
.supplier-empty { padding: clamp(2rem, 5vw, 4rem) 1.5rem; text-align: center; border-top: 1px solid var(--ds-border); }
.supplier-empty .vendor-nav-icon { width: 1.75rem; height: 1.75rem; margin-bottom: 1rem; color: var(--ds-primary); }
.supplier-empty h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.supplier-empty p { margin: auto; max-width: 31rem; font-size: .85rem; color: var(--ds-text-secondary); line-height: 1.7; }
.supplier-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; padding: 0 1.5rem 1.5rem; }
.supplier-field { flex: 1 1 12rem; min-width: 0; }
.supplier-field label { display: block; font-size: .72rem; color: var(--ds-text-secondary); margin-bottom: .5rem; }
.supplier-field input, .supplier-field select { display: block; width: 100%; min-height: 44px; padding: .65rem .8rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-text-primary); font-size: .8rem; }
.supplier-pagination { padding: 1.5rem; border-top: 1px solid var(--ds-border); }
@media (max-width: 1100px) { .supplier-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .supplier-ledger { align-items: flex-start; flex-direction: column; } .supplier-ledger dl { width: 100%; } }
@media (max-width: 640px) { .supplier-page-intro, .supplier-section-heading { align-items: flex-start; flex-direction: column; } .supplier-metric { padding: 1.2rem; } .supplier-ledger dl { grid-template-columns: 1fr; gap: 1.2rem; } .supplier-ledger dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .supplier-ledger dd { text-align: right; } }
@media (max-width: 360px) { .supplier-metrics { grid-template-columns: 1fr; } }
.supplier-detail-section { margin-bottom: 1.5rem; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); }
.supplier-order-detail .supplier-detail-section > .border-b { padding: 1.5rem; }
.supplier-order-detail .supplier-detail-section > .p-5 { padding: 1.5rem; }
.supplier-order-detail .supplier-detail-section > h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.supplier-order-detail input, .supplier-order-detail select, .supplier-order-detail textarea, .supplier-order-detail button { min-height: 44px; }
.supplier-order-detail .supplier-detail-section .vendor-nav-icon { width: 1.1rem; height: 1.1rem; color: var(--ds-primary); }