:root { --brand:#146b63; --brand-dark:#0d4f49; --ink:#172321; --muted:#71817e; --line:#e4eae8; --surface:#fff; --bg:#f5f7f6; }
* { box-sizing:border-box; }
html, body { margin:0; font-family:'Be Vietnam Pro','Segoe UI',sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }
a { color:var(--brand); text-decoration:none; }
button, input, select { font:inherit; }
h1,h2,p { margin-top:0; }
h1 { font-size:1.85rem; letter-spacing:-.04em; margin-bottom:.35rem; font-weight:700; }
h1:focus { outline:none; }
h2 { font-size:1.05rem; margin-bottom:.25rem; font-weight:700; }
.content { padding-top:1.8rem; padding-bottom:3rem; max-width:1600px; margin:0 auto; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:1.6rem; gap:1rem; }
.page-heading p,.panel-head p { color:var(--muted); margin:0; }
.eyebrow { color:var(--brand); letter-spacing:.12em; font-size:.7rem; font-weight:700; display:block; margin-bottom:.45rem; }
.btn { border-radius:8px; font-weight:600; padding:.65rem 1rem; }
.btn-brand { background:var(--brand); color:#fff; border:1px solid var(--brand); box-shadow:0 3px 8px #146b6326; }
.btn-brand:hover { background:var(--brand-dark); color:#fff; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 10px #173a3420; overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.3rem; border-bottom:1px solid var(--line); }
.panel-head a { font-size:.82rem; font-weight:600; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.2rem; }
.metric-card { background:white; border:1px solid var(--line); border-radius:12px; padding:1.15rem; display:flex; gap:1rem; box-shadow:0 2px 8px #173a3414; }
.metric-card>div:last-child { display:flex; flex-direction:column; min-width:0; }
.metric-card span { color:var(--muted); font-size:.78rem; }
.metric-card strong { font-size:1.65rem; line-height:1.45; letter-spacing:-.04em; }
.metric-card small { color:#82918e; font-size:.68rem; }
.metric-icon { width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:1.25rem;font-weight:700;flex:none; }
.metric-icon.blue { color:#3174a9;background:#eaf4fb }.metric-icon.amber { color:#b67818;background:#fff5df }.metric-icon.green { color:#20846a;background:#e7f6f0 }.metric-icon.red { color:#c45151;background:#ffeded }
.dashboard-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem; }.span-2{grid-column:span 2}.span-3{grid-column:span 3}
.data-table { width:100%;border-collapse:collapse;white-space:nowrap; }
.data-table th { background:#fafbfb;color:#7a8986;font-size:.66rem;letter-spacing:.06em;font-weight:600;text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line); }
.data-table td { padding:.92rem 1rem;border-bottom:1px solid #edf1f0;color:#3f4d4a;font-size:.79rem;vertical-align:middle; }
.data-table tr:last-child td { border-bottom:0 }.data-table tbody tr:hover { background:#fafcfb }.data-table .num{text-align:right}
.status { display:inline-flex;padding:.32rem .6rem;border-radius:999px;font-size:.67rem;font-weight:600;align-items:center;gap:.3rem }.status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.status.warning{color:#986619;background:#fff5dd}.status.info{color:#246f94;background:#e8f4fa}.status.purple{color:#6553a3;background:#f0edfb}.status.success{color:#25745d;background:#e6f5ef}.status.danger{color:#b94b4b;background:#fdeaea}.status.muted{color:#6d7977;background:#edf0ef}
.stock-alert { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:.92rem 1.2rem;border-bottom:1px solid var(--line) }.stock-alert>div:nth-child(2){min-width:0;display:flex;flex-direction:column}.stock-alert strong{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stock-alert span,.product-cell span{color:var(--muted);font-size:.66rem}.product-avatar { width:35px;height:35px;border-radius:8px;background:#ecf3f1;color:var(--brand);display:grid;place-items:center;font-size:.7rem;font-weight:700;flex:none }.progress{height:4px;background:#edf0ef;margin-top:.45rem}.progress i{height:100%;background:#d8a542;display:block}.stock-alert b{font-size:.8rem;color:#b56b29}.panel-action{display:block;text-align:center;padding:.8rem;font-size:.78rem;font-weight:600}
.journey-row{display:grid;grid-template-columns:1fr 1fr}.journey{position:relative;padding:1.2rem 1.4rem}.journey:first-child{border-right:1px solid var(--line)}.journey-title{display:flex;flex-direction:column}.journey-title span{color:var(--muted);font-size:.72rem;margin-top:.2rem}.journey-track{height:5px;background:#e7eceb;margin:1.3rem 1rem .55rem 0;position:relative;border-radius:5px}.journey-track i{display:block;height:100%;background:var(--brand);border-radius:5px}.journey-track b{position:absolute;width:13px;height:13px;background:#fff;border:3px solid var(--brand);border-radius:50%;top:-4px;transform:translateX(-50%)}.journey-labels{display:flex;justify-content:space-between;color:#85918f;font-size:.61rem;padding-right:1rem}.journey time{position:absolute;right:1.4rem;top:1.2rem;color:var(--brand);font-size:.7rem;font-weight:600}
.toolbar { padding:1rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line) }.search-box{border:1px solid var(--line);border-radius:8px;padding:.65rem .8rem;width:300px;outline:none}.search-box:focus,.form-control:focus,.form-select:focus{border-color:#6aa39d;box-shadow:0 0 0 3px #146b6317}.compact{max-width:210px}.form-panel{margin-bottom:1.2rem}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.2rem}.form-grid label{font-size:.72rem;font-weight:600;color:#50605d}.form-grid input,.form-grid select{margin-top:.45rem}.form-actions{padding:1rem 1.2rem;background:#fafbfb;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:.7rem}.icon-btn{background:none;border:0;font-size:1.5rem;color:#71817e}.link-text,.text-brand{color:var(--brand)!important}
.inventory-summary{display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid var(--line);border-radius:12px;margin-bottom:1.2rem;box-shadow:0 2px 8px #173a3414}.inventory-summary div{padding:1.2rem 1.4rem;border-right:1px solid var(--line);display:flex;flex-direction:column}.inventory-summary div:last-child{border:0}.inventory-summary span{font-size:.72rem;color:var(--muted)}.inventory-summary strong{font-size:1.35rem;margin-top:.3rem}.product-cell{display:flex;gap:.7rem;align-items:center}.product-cell>div:last-child{display:flex;flex-direction:column}.chinese{font-family:'Microsoft YaHei',sans-serif}
.shipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.shipment-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px #173a3420;overflow:hidden}.shipment-top{padding:1.2rem;display:flex;justify-content:space-between}.shipment-top h2{font-size:1.2rem;margin-top:.7rem}.shipment-top p{color:var(--muted);font-size:.76rem;margin:0}.vessel-icon{width:48px;height:48px;background:#e9f4f1;color:var(--brand);display:grid;place-items:center;border-radius:50%;font-size:1.3rem}.shipment-data{display:grid;grid-template-columns:1fr 1fr;background:#f8faf9;margin:0 1.2rem;padding:1rem;border-radius:8px;gap:1rem}.shipment-data div{display:flex;flex-direction:column}.shipment-data span{color:var(--muted);font-size:.64rem}.shipment-data strong{font-size:.75rem;margin-top:.2rem}.route{display:flex;align-items:flex-start;padding:1.5rem 1.2rem}.route-node{display:flex;flex-direction:column;align-items:center;text-align:center;width:80px;color:#9da8a6}.route-node i{font-style:normal;width:25px;height:25px;border:2px solid #cdd5d3;border-radius:50%;display:grid;place-items:center;background:white;font-size:.65rem}.route-node span{font-size:.62rem;margin-top:.4rem;white-space:nowrap}.route-node small{display:block;color:#a3adab}.route-node.done{color:var(--brand)}.route-node.done i{border-color:var(--brand);background:var(--brand);color:white}.route-line{height:2px;background:#dce2e0;flex:1;margin-top:12px}.route-line.done{background:var(--brand)}.shipment-footer{border-top:1px solid var(--line);padding:.8rem 1.2rem;display:flex;justify-content:space-between;align-items:center}.shipment-footer span{color:var(--muted);font-size:.67rem}
.supplier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.supplier-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem;box-shadow:0 2px 10px #173a3420}.supplier-logo{width:44px;height:44px;background:#e5f2ef;color:var(--brand);font-weight:700;border-radius:10px;display:grid;place-items:center;float:left;margin-right:.8rem}.supplier-title h2{margin:.15rem 0}.supplier-title p{margin:0;color:#667572}.supplier-title span{color:var(--muted);font-size:.65rem}.supplier-contact{clear:both;padding:1.2rem 0;display:flex;flex-direction:column}.supplier-contact span,.supplier-stats span{color:var(--muted);font-size:.65rem}.supplier-contact small{color:var(--muted)}.supplier-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:1rem}.supplier-stats div{padding:.9rem .3rem;display:flex;flex-direction:column;border-right:1px solid var(--line)}.supplier-stats div:last-child{border:0}.supplier-stats strong{font-size:.85rem}
.valid.modified:not([type=checkbox]){outline:1px solid #26b050}.invalid{outline:1px solid #e50000}.validation-message{color:#e50000}#blazor-error-ui{display:none;position:fixed;bottom:0;width:100%;padding:1rem;background:#fff3cd;z-index:1000}
@media(max-width:1000px){.metric-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.span-2,.span-3{grid-column:auto}.shipment-grid,.supplier-grid{grid-template-columns:1fr}.journey-row{grid-template-columns:1fr}.journey:first-child{border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:640px){.content{padding:1rem!important}.metric-grid,.inventory-summary,.form-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.inventory-summary div{border-right:0;border-bottom:1px solid var(--line)}.toolbar{flex-direction:column}.search-box,.compact{max-width:none;width:100%}.shipment-data{grid-template-columns:1fr}.route-node span{display:none}}