.shipment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:24px}.shipment-card{display:block;padding:24px;color:var(--text);text-decoration:none}.shipment-card:hover{color:var(--text);box-shadow:var(--shadow-lg)}.shipment-card h2{font-size:1.15rem;margin:20px 0 12px}.shipment-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--accent-glow);color:var(--accent);font-size:1.4rem}.shipment-pill{display:inline-flex;align-items:center;gap:6px;background:#eff6ff;color:#1d4ed8;border-radius:30px;padding:6px 12px;font-size:.75rem;white-space:nowrap}.shipment-pill.is-done{background:#ecfdf5;color:#047857}.progress{height:7px}.progress-bar{background:var(--accent)}.shipment-form{max-width:740px}.shipment-hint{background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;color:var(--text-muted)}.review-search{flex:1;min-width:180px;max-width:450px}.review-row[hidden]{display:none!important}.review-row:has(input[name$="-include"]:checked){border:1px solid var(--accent)}.review-row input[name$="-vin"]{direction:ltr;font-family:monospace}.review-row .form-label{margin-bottom:5px}.shipment-review-footer{position:sticky;bottom:12px;box-shadow:var(--shadow-lg);z-index:10}.shipment-check{display:flex;gap:12px;align-items:flex-start;padding:12px 0}.shipment-check input{flex-shrink:0}.shipment-tracker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.shipment-step{display:flex;align-items:center;gap:10px;color:var(--text-muted);border-bottom:3px solid var(--border);padding-bottom:16px;font-size:.85rem}.shipment-step>span{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--bg)}.shipment-step.active{color:var(--text);border-color:var(--accent)}.shipment-step.active>span{background:var(--accent);color:var(--primary)}.shipment-step.done{border-color:var(--success);color:#047857}.shipment-step.done>span{background:#ecfdf5}.shipment-timeline{list-style:none;margin:0;padding:0 18px 0 0;border-right:2px solid var(--border)}.shipment-timeline li{position:relative;padding:0 0 24px 0}.shipment-timeline li:before{content:"";position:absolute;right:-25px;top:5px;width:12px;height:12px;background:var(--accent);border:3px solid white;border-radius:50%}.shipment-timeline li:last-child{padding-bottom:0}.errorlist{color:#b91c1c;font-size:.85rem;list-style:none;padding:4px 0;margin:0}.shipment-table td{padding:18px 16px}.shipment-table .font-monospace{text-align:right;overflow-wrap:anywhere}@media(max-width:767px){.shipment-tracker{gap:8px}.shipment-step{flex-direction:column;font-size:.75rem;text-align:center;gap:8px}.shipment-review-footer{position:static}.shipment-table thead{display:none}.shipment-table,.shipment-table tbody,.shipment-table tr,.shipment-table td{display:block;width:100%}.shipment-table tr{padding:16px;border-bottom:1px solid var(--border)}.shipment-table td{border:0;padding:5px 0}.shipment-table td[data-label]:before{content:attr(data-label) " : ";font-size:.75rem;color:var(--text-muted);margin-left:6px}.shipment-table td:last-child .btn{width:100%;margin-top:8px}.shipment-table .font-monospace{text-align:right}.review-row>.d-flex{flex-wrap:wrap}}
.app-main,.content-area{min-width:0}.shipment-table{table-layout:fixed}.shipment-table td{overflow-wrap:anywhere}@media(min-width:768px){.shipment-table th:first-child{width:28%}}

@media(max-width:991px){.app-sidebar:not(.is-open){box-shadow:none}}

/* An empty result is a page state, not one shipment card. */
.shipment-empty {
    grid-column: 1 / -1;
    min-height: 280px;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.shipment-empty > .bi {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--accent-glow);
    color: var(--accent);
}
.shipment-empty > p {
    margin: 1.25rem 0;
}
@media (max-width: 576px) {
    .shipment-empty {
        min-height: 240px;
        padding: 2rem 1rem;
    }
}

/* The header is part of the app shell, not an unstyled page link. */
.shipments-page .app-topbar { gap: 1rem; }
.shipments-page .page-breadcrumb { flex-shrink: 0; }
.shipment-breadcrumb { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); text-decoration: none; font-weight: 600; }
.shipment-breadcrumb:hover { color: var(--accent-hover); }
.shipments-page .smart-search-wrap { max-width: 520px; min-width: 0; }
.shipments-page .smart-search-input { border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; flex-wrap: nowrap; }
.shipments-page .smart-search-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.shipments-page .smart-search-input .input-group-text,
.shipments-page .smart-search-input .form-control { border: 0; border-radius: 12px; background: transparent; box-shadow: none; min-height: 44px; }
.shipments-page .smart-search-input .form-control { min-width: 0; padding-inline-start: 0; }
.shipments-page .topbar-user { flex-shrink: 0; }
.shipment-card { display: flex; flex-direction: column; border-top: 3px solid var(--accent); }
.shipment-card-heading { display: flex; align-items: center; gap: .75rem; }
.shipment-card-heading .shipment-pill { margin-inline-start: auto; }
.shipment-card h2 a { color: var(--text); text-decoration: none; }
.shipment-card h2 a:hover { color: var(--accent-hover); }
.shipment-card-meta { color: var(--text-muted); font-size: .8rem; margin-bottom: .5rem; overflow-wrap: anywhere; }
.shipment-card-counts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin: 1rem 0; font-size: .8rem; }
.shipment-card-counts span { color: var(--text-muted); }
.shipment-card-progress-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--text-muted); margin-bottom: .5rem; }
.shipment-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1.25rem; }
.shipment-card-actions .btn { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; }
.shipment-delete-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); flex-shrink: 0; text-decoration: none; }
.shipment-delete-link:hover { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.shipment-delete-warning { display: flex; align-items: flex-start; gap: 1rem; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 12px; padding: 1.25rem; }
.shipment-delete-warning > .bi { font-size: 1.6rem; }
.shipment-save-status { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: .75rem 1rem; font-size: .85rem; }
.shipment-save-status.is-error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
@media (max-width: 576px) {
    .shipments-page .app-topbar { gap: .5rem; }
    .shipment-card { padding: 20px; }
    .shipment-card-actions .btn { font-size: .8rem; }
    .shipment-review-footer .btn { width: 100%; }
}

.shipment-tracker { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.shipment-step { min-width: 0; align-items: flex-start; }
.shipment-step strong { line-height: 1.8; }
.shipment-car-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; font-size: .85rem; }
@media(max-width:767px) {
    .shipment-tracker { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .shipment-step { flex-direction: row; text-align: right; }
}
@media(max-width:400px) { .shipment-tracker { grid-template-columns: 1fr; } }

.demo-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.demo-metrics > div { padding: 1rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; }
.demo-metrics span { display: block; font-size: .75rem; color: var(--text-muted); margin-bottom: .5rem; }
.demo-metrics strong { font-size: .9rem; line-height: 1.8; }
.demo-controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.demo-stages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.demo-stage { display: flex; align-items: center; gap: .6rem; text-align: right; background: #fff; border: 1px solid var(--border); border-radius: 12px; min-height: 76px; padding: .85rem; color: var(--text-muted); font-size: .8rem; }
.demo-stage-number { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: #f1f5f9; }
.demo-stage .bi { display: none; margin-inline-start: auto; }
.demo-stage.active { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px var(--accent-glow); }
.demo-stage.active .demo-stage-number { background: var(--accent); }
.demo-stage.done { border-color: #a7f3d0; background: #f0fdf4; color: #047857; }
.demo-stage.done .bi { display: block; }
.demo-document { display: flex; align-items: center; gap: .6rem; border: 1px dashed var(--border); border-radius: 10px; padding: .85rem; font-size: .8rem; }
.demo-document > .bi { color: #b91c1c; font-size: 1.5rem; }
.demo-document .small { margin-inline-start: auto; }
@media(max-width:767px) { .demo-metrics { grid-template-columns: 1fr; } .demo-controls .btn { flex: 1 1 45%; } }
@media(max-width:400px) { .demo-stages { grid-template-columns: 1fr; } }

.shipment-option:not(:has(input[type="checkbox"]:checked)) .shipment-option-description { display: none; }

.shipment-owner-options { max-height:240px; overflow:auto; padding:12px; border:1px solid var(--border); border-radius:12px; }
.shipment-owner-options label { display:flex; align-items:center; gap:10px; padding:8px; cursor:pointer; }
.shipment-owner-options input { width:18px; height:18px; flex-shrink:0; accent-color:var(--accent); }