/* v4.1.0 Supplier Commerce — premium B2B onboarding & portal */
.wwx-supplier-onboarding,.wwx-supplier-dashboard{
max-width:1440px;
margin:0 auto;
padding:8px 0 56px}
.wwx-supplier-hero{
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);
gap:32px;
align-items:stretch;
padding:40px;
border:1px solid #dce3ec;
border-radius:16px;
background:linear-gradient(135deg,#f7faff,#fff)}
.wwx-supplier-hero>div>span,.wwx-supplier-process header span,.wwx-supplier-registration-card>header span,.wwx-supplier-dashboard-head span{
font-size:14px;
font-weight:800;
letter-spacing:.08em;
color:#004ca2}
.wwx-supplier-hero h1{
max-width:800px;
margin:8px 0 16px;
font-size:40px;
line-height:1.15;
color:#061833}
.wwx-supplier-hero p{
max-width:800px;
font-size:17px;
line-height:1.65;
color:#42536a}
.wwx-supplier-hero aside{
padding:24px;
border-radius:12px;
background:#061833;
color:#fff}
.wwx-supplier-hero aside>strong{
font-size:20px}
.wwx-supplier-hero ol{
margin:16px 0 0;
padding-left:22px}
.wwx-supplier-hero li{
margin:10px 0;
font-size:14px;
line-height:1.45}
.wwx-supplier-hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:24px}
.wwx-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 20px;
border:1px solid transparent;
border-radius:8px;
font-size:15px;
font-weight:700;
text-decoration:none;
cursor:pointer}
.wwx-btn-red{
background:#ee0b27;
color:#fff}
.wwx-btn-outline{
border-color:#004ca2;
background:#fff;
color:#004ca2}
.wwx-supplier-benefits{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin:32px 0}
.wwx-supplier-benefits article{
padding:24px;
border:1px solid #dce3ec;
border-radius:12px;
background:#fff}
.wwx-supplier-benefits b{
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:50%;
background:#edf4ff;
color:#004ca2;
font-size:14px}
.wwx-supplier-benefits h2{
margin:14px 0 8px;
font-size:19px;
color:#061833}
.wwx-supplier-benefits p{
margin:0;
font-size:14px;
line-height:1.6;
color:#526276}
.wwx-supplier-process{
margin:48px 0;
padding:32px;
border-radius:16px;
background:#061833;
color:#fff}
.wwx-supplier-process header span{
color:#8fbfff}
.wwx-supplier-process h2{
margin:6px 0 24px;
font-size:28px}
.wwx-supplier-process>div{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px}
.wwx-supplier-process article{
padding:18px;
border:1px solid rgba(255,255,255,.14);
border-radius:10px}
.wwx-supplier-process i{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:50%;
background:#ee0b27;
color:#fff;
font-size:14px;
font-style:normal;
font-weight:800}
.wwx-supplier-process strong{
display:block;
margin:12px 0 6px;
font-size:15px}
.wwx-supplier-process p{
margin:0;
font-size:14px;
line-height:1.55;
color:#d8e2ef}
.wwx-supplier-registration-card,.wwx-product-submit-card,.wwx-invoice-submit{
padding:32px;
border:1px solid #dce3ec;
border-radius:16px;
background:#fff}
.wwx-supplier-registration-card>header{
margin-bottom:24px}
.wwx-supplier-registration-card h2,.wwx-product-submit-card h2{
margin:6px 0 8px;
font-size:28px;
color:#061833}
.wwx-supplier-registration-card>header p{
margin:0;
color:#526276}
.wwx-supplier-registration-card fieldset{
margin:0 0 24px;
padding:24px;
border:1px solid #dce3ec;
border-radius:12px}
.wwx-supplier-registration-card legend{
padding:0 8px;
font-size:17px;
font-weight:800;
color:#061833}
.wwx-supplier-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px}
.wwx-supplier-grid label,.wwx-product-submit-card>form>label{
display:grid;
gap:7px;
font-size:14px;
font-weight:700;
color:#27384d}
.wwx-supplier-grid label.wide{
grid-column:1/-1}
.wwx-supplier-grid input,.wwx-supplier-grid select,.wwx-supplier-grid textarea,.wwx-product-submit-card textarea,.wwx-procurement-table input{
width:100%;
min-height:48px;
padding:10px 12px;
border:1px solid #b9c5d3;
border-radius:8px;
background:#fff;
font-size:15px;
color:#101828}
.wwx-supplier-grid textarea,.wwx-product-submit-card textarea{
min-height:120px}
.wwx-field-help{
margin:0 0 12px;
font-size:14px;
line-height:1.55;
color:#667386}
.wwx-category-checklist{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px}
.wwx-category-checklist label{
display:flex;
align-items:center;
gap:10px;
min-height:48px;
padding:10px 12px;
border:1px solid #dce3ec;
border-radius:8px;
background:#f9fbfd;
font-size:14px;
font-weight:600}
.wwx-category-checklist input,.wwx-supplier-consent input{
width:18px;
height:18px;
flex:0 0 auto}
.wwx-supplier-consent{
display:flex;
align-items:flex-start;
gap:10px;
margin:12px 0;
font-size:14px;
line-height:1.5}
.wwx-supplier-registration-card form>.wwx-btn{
margin-top:12px}
.wwx-form-status{
margin-top:12px;
min-height:20px;
font-size:14px;
font-weight:700}
.wwx-supplier-notice{
max-width:900px;
margin:32px auto;
padding:32px;
border:1px solid #dce3ec;
border-radius:12px;
background:#f7f9fc;
text-align:center}
.wwx-supplier-notice.success{
border-color:#a9d6b8;
background:#f3fbf5}
.wwx-supplier-notice a{
margin-left:12px}
.wwx-supplier-dashboard-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:24px;
padding:24px;
border:1px solid #dce3ec;
border-radius:14px;
background:#fff}
.wwx-supplier-dashboard-head h1{
margin:4px 0 6px;
font-size:30px;
color:#061833}
.wwx-supplier-dashboard-head p{
margin:0;
color:#5a687a}
.wwx-supplier-kpis{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-bottom:24px}
.wwx-supplier-kpis article{
padding:20px;
border:1px solid #dce3ec;
border-radius:12px;
background:#fff}
.wwx-supplier-kpis span{
display:block;
font-size:14px;
font-weight:700;
color:#667386}
.wwx-supplier-kpis strong{
display:block;
margin:6px 0;
font-size:28px;
color:#061833}
.wwx-supplier-kpis small{
font-size:14px;
color:#667386}
.wwx-supplier-tabs{
display:flex;
gap:8px;
overflow:auto;
margin-bottom:16px;
padding:8px;
border:1px solid #dce3ec;
border-radius:10px;
background:#fff}
.wwx-supplier-tabs button{
min-height:44px;
padding:0 18px;
border:0;
border-radius:7px;
background:transparent;
font-size:14px;
font-weight:700;
white-space:nowrap}
.wwx-supplier-tabs button.is-active{
background:#061833;
color:#fff}
.wwx-supplier-panel{
display:none;
padding:24px;
border:1px solid #dce3ec;
border-radius:14px;
background:#fff}
.wwx-supplier-panel.is-active{
display:block}
.wwx-panel-heading{
display:flex;
justify-content:space-between;
gap:24px;
margin-bottom:20px}
.wwx-panel-heading h2{
margin:0 0 5px;
font-size:23px;
color:#061833}
.wwx-panel-heading p{
margin:0;
color:#667386}
.wwx-supplier-table-wrap{
overflow:auto;
border:1px solid #dce3ec;
border-radius:10px}
.wwx-supplier-table-wrap table{
width:100%;
min-width:900px;
border-collapse:collapse}
.wwx-supplier-table-wrap th,.wwx-supplier-table-wrap td{
padding:14px;
text-align:left;
vertical-align:top;
border-bottom:1px solid #e5eaf0;
font-size:14px}
.wwx-supplier-table-wrap th{
background:#f6f8fb;
font-size:14px;
color:#47566a}
.wwx-supplier-table-wrap td small{
display:block;
margin-top:4px;
font-size:14px;
color:#667386}
.wwx-status{
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 9px;
border-radius:999px;
background:#edf1f5;
font-size:14px;
font-weight:800}
.wwx-status.approved,.wwx-status.paid,.wwx-status.completed{
background:#e8f7ed;
color:#14753a}
.wwx-status.pending,.wwx-status.submitted,.wwx-status.part_paid{
background:#fff4d8;
color:#855d00}
.wwx-status.rejected,.wwx-status.cancelled{
background:#feeceb;
color:#a12822}
.wwx-status.new,.wwx-status.dispatched{
background:#eaf2ff;
color:#004ca2}
.wwx-product-submit-card,.wwx-invoice-submit{
margin-top:24px}
.wwx-dynamic-specs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin:20px 0;
padding:20px;
border-radius:10px;
background:#f7f9fc}
.wwx-dynamic-specs label{
display:grid;
gap:6px;
font-size:14px;
font-weight:700}
.wwx-dynamic-specs input{
min-height:44px;
padding:8px 10px;
border:1px solid #bdc8d6;
border-radius:7px;
font-size:14px}
.wwx-supplier-table-wrap form[data-wwx-delivery]{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
min-width:310px}
.wwx-supplier-table-wrap form[data-wwx-delivery] input{
min-height:38px;
padding:6px 8px;
border:1px solid #bdc8d6;
border-radius:6px;
font-size:14px}
.wwx-supplier-table-wrap form[data-wwx-delivery] button{
min-height:38px;
border:0;
border-radius:6px;
background:#004ca2;
color:#fff;
font-size:14px;
font-weight:700}
.wwx-report-filter{
display:flex;
flex-wrap:wrap;
align-items:end;
gap:12px;
padding:16px;
border:1px solid #dce3ec;
border-radius:10px;
background:#f7f9fc}
.wwx-report-filter label{
display:grid;
gap:5px;
font-size:14px;
font-weight:700}
.wwx-report-filter input{
min-height:44px;
padding:7px 10px;
border:1px solid #bdc8d6;
border-radius:7px;
font-size:14px}
.wwx-report-filter button{
min-height:44px;
padding:0 14px;
border:1px solid #004ca2;
border-radius:7px;
background:#fff;
color:#004ca2;
font-size:14px;
font-weight:700}
.wwx-report-filter button:first-of-type{
background:#004ca2;
color:#fff}
.wwx-report-summary{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:16px}
.wwx-report-summary article{
padding:18px;
border:1px solid #dce3ec;
border-radius:10px}
.wwx-report-summary strong{
display:block;
font-size:24px;
color:#061833}
.wwx-report-summary span{
font-size:14px;
color:#667386}
@media(max-width:1024px){
.wwx-supplier-hero{
grid-template-columns:1fr}
.wwx-supplier-benefits{
grid-template-columns:repeat(2,1fr)}
.wwx-supplier-process>div{
grid-template-columns:repeat(3,1fr)}
.wwx-supplier-kpis{
grid-template-columns:repeat(2,1fr)}
.wwx-category-checklist{
grid-template-columns:repeat(2,1fr)}
.wwx-dynamic-specs{
grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
.wwx-supplier-onboarding,.wwx-supplier-dashboard{
padding-bottom:32px}
.wwx-supplier-hero,.wwx-supplier-registration-card,.wwx-supplier-panel,.wwx-product-submit-card,.wwx-invoice-submit{
padding:20px}
.wwx-supplier-hero h1{
font-size:30px}
.wwx-supplier-hero p{
font-size:16px}
.wwx-supplier-benefits,.wwx-supplier-process>div,.wwx-supplier-grid,.wwx-supplier-kpis,.wwx-category-checklist,.wwx-dynamic-specs,.wwx-report-summary{
grid-template-columns:1fr}
.wwx-supplier-process{
padding:20px}
.wwx-supplier-dashboard-head{
align-items:stretch;
flex-direction:column}
.wwx-supplier-grid label.wide{
grid-column:auto}
.wwx-supplier-grid input,.wwx-supplier-grid select,.wwx-supplier-grid textarea,.wwx-product-submit-card textarea,.wwx-btn,.wwx-report-filter input,.wwx-report-filter button{
font-size:16px}
.wwx-supplier-hero-actions{
display:grid}
.wwx-supplier-hero-actions .wwx-btn{
width:100%}
}