:root { --brand:#0d6efd; --brand-2:#198754; --sidebar-w:250px; }
body { font-family: var(--app-font, Arial), system-ui, sans-serif; background:#f4f6fa; }
.btn-primary,.bg-primary,.text-bg-primary { --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:color-mix(in srgb,var(--brand) 85%,#000); --bs-btn-hover-border-color:color-mix(in srgb,var(--brand) 85%,#000); --bs-btn-active-bg:color-mix(in srgb,var(--brand) 78%,#000); --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand); }
.bg-primary,.text-bg-primary { background-color:var(--brand)!important; }
.text-primary,a { --bs-link-color-rgb:13,110,253; }
.text-primary { color:var(--brand)!important; }
.form-control:focus,.form-select:focus { border-color:var(--brand); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--brand) 25%,transparent); }
.form-control:required,.form-select:required { border-color:#f59e0b; background-color:#fffaf0; }
.form-control:required:focus,.form-select:required:focus { border-color:#f59e0b; box-shadow:0 0 0 .2rem rgb(245 158 11 / 25%); }
.form-label:has(+ .form-control:required),.form-label:has(+ .form-select:required) { color:#b45309; }
.form-check-input:required { accent-color:#f59e0b; }
.sidebar { width:var(--sidebar-w); height:100vh; overflow-y:auto; background:#fff; border-right:1px solid #e5e8ee; }
.sidebar .brand { padding:1rem 1.25rem; font-weight:700; border-bottom:1px solid #eef0f4; display:flex; gap:.6rem; align-items:center; }
.sidebar .brand img { height:34px; }
.sidebar .nav-link { color:#445; padding:.55rem 1.25rem; border-radius:0; display:flex; gap:.75rem; align-items:center; }
.sidebar .nav-link i { width:1.2rem; text-align:center; color:#8892a6; }
.sidebar .nav-link:hover { background:#f3f6fb; }
.sidebar .nav-link.active { background:color-mix(in srgb,var(--brand) 10%,#fff); color:var(--brand); font-weight:600; box-shadow:inset 3px 0 0 var(--brand); }
.sidebar .nav-link.active i { color:var(--brand); }
.sidebar .nav-menu-toggle { width:100%; border:0; background:transparent; color:#445; padding:.65rem 1.25rem; display:flex; align-items:center; gap:.75rem; text-align:left; font:inherit; }
.sidebar .nav-menu-toggle > i:first-child { width:1.2rem; text-align:center; color:#8892a6; }
.sidebar .nav-menu-toggle span { flex:1; }
.sidebar .nav-menu-toggle:hover,.sidebar .nav-menu-toggle.active { background:#f3f6fb; color:var(--brand); }
.sidebar .nav-menu-toggle.active > i:first-child { color:var(--brand); }
.sidebar .nav-chevron { font-size:.7rem; transition:transform .2s ease; }
.sidebar .nav-menu-toggle[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); }
.sidebar .nav-submenu .nav-link { padding-left:3.1rem; font-size:.92rem; }
.nav-section { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#9aa3b5; padding:1rem 1.25rem .25rem; }
.main { margin-left:var(--sidebar-w); }
@media (max-width:991.98px){ .main{margin-left:0} .sidebar{position:fixed;z-index:1045;transform:translateX(-100%);transition:transform .2s} .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)} }
.topbar { background:#fff; border-bottom:1px solid #e5e8ee; }
.card { border:0; box-shadow:0 1px 3px rgba(20,30,60,.07); border-radius:.75rem; }
.stat-card .icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.stat-card .value { font-size:1.45rem; font-weight:700; line-height:1.1; }
.table > :not(caption) > * > * { vertical-align:middle; }
.timeline { list-style:none; padding-left:0; margin:0; position:relative; }
.timeline li { position:relative; padding:0 0 1.2rem 2.6rem; }
.timeline li::before { content:""; position:absolute; left:.95rem; top:1.9rem; bottom:0; width:2px; background:#dfe3ea; }
.timeline li:last-child::before { display:none; }
.timeline .dot { position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; }
#toasts { position:fixed; top:1rem; right:1rem; z-index:2000; }
.signature-pad { border:1px dashed #adb5bd; border-radius:.5rem; background:#fff; touch-action:none; width:100%; height:140px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* Interface shell and dashboard polish */
:root { --sidebar-w:268px; --surface:#fff; --ink:#172033; --muted:#748096; }
body { color:var(--ink); background:#f5f7fb; }
.sidebar { background:#111a2e; color:#e8edf7; border-right:1px solid #202b41; box-shadow:8px 0 28px rgba(16,24,40,.08); }
.sidebar .brand { min-height:76px; padding:1rem 1.35rem; gap:.7rem; color:#fff; border-bottom-color:rgba(255,255,255,.08); letter-spacing:.01em; }
.sidebar .nav-link { width:calc(100% - 1.3rem); margin:.12rem .65rem; padding:.62rem .7rem; border-radius:.5rem; color:#b8c2d6; transition:background .18s ease,color .18s ease; }
.sidebar .nav-link i { color:#8290aa; }
.sidebar .nav-link:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar .nav-link.active { background:color-mix(in srgb,var(--brand) 25%,#17223a); color:#fff; }
.sidebar .nav-menu-toggle { width:calc(100% - 1.3rem); margin:.35rem .65rem .12rem; padding:.7rem .7rem; display:flex; align-items:center; gap:.75rem; border:0; border-radius:.5rem; background:transparent; color:#d5dcec; text-align:left; font:inherit; font-size:.93rem; font-weight:600; transition:background .18s ease,color .18s ease; }
.sidebar .nav-menu-toggle > i:first-child { width:1.2rem; color:#92a0b9; text-align:center; }
.sidebar .nav-menu-toggle span { flex:1; }
.sidebar .nav-menu-toggle:hover,.sidebar .nav-menu-toggle.active { background:rgba(255,255,255,.07); color:#fff; }
.sidebar .nav-chevron { font-size:.7rem; transition:transform .2s ease; }
.sidebar .nav-menu-toggle[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); }
.sidebar .nav-submenu .nav-link { padding-left:2.7rem; font-size:.9rem; }
.topbar { min-height:68px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-bottom:1px solid #e8ecf3; box-shadow:0 3px 14px rgba(18,30,54,.035); }
.card { border:1px solid #edf0f5; border-radius:1rem; box-shadow:0 5px 20px rgba(24,39,75,.045); transition:box-shadow .2s ease; }
.card:hover { box-shadow:0 9px 26px rgba(24,39,75,.075); }
.stat-card { position:relative; overflow:hidden; }
.stat-card::after { content:""; position:absolute; top:-42px; right:-38px; width:90px; height:90px; border-radius:50%; background:color-mix(in srgb,var(--brand) 5%,transparent); }
.stat-card .card-body { padding:1.15rem; }
.stat-card .icon { flex:0 0 48px; width:48px; height:48px; border-radius:15px; }
.stat-card .stat-label { margin-bottom:.35rem; color:var(--muted); font-size:.78rem; line-height:1.25; }
.stat-card .value { overflow-wrap:anywhere; font-size:clamp(1rem,1.45vw,1.32rem); font-weight:750; line-height:1.15; letter-spacing:-.025em; }
.dashboard-hero { position:relative; isolation:isolate; display:flex; min-height:230px; align-items:center; overflow:hidden; padding:2rem clamp(1.35rem,3vw,2.5rem); border-radius:1.25rem; color:#fff; background:linear-gradient(115deg,color-mix(in srgb,var(--brand) 88%,#16213b),color-mix(in srgb,var(--brand-2) 82%,#14233d)); box-shadow:0 15px 35px color-mix(in srgb,var(--brand) 18%,transparent); }
.dashboard-hero::before,.dashboard-hero::after { position:absolute; z-index:-1; border-radius:50%; background:rgba(255,255,255,.07); content:""; }
.dashboard-hero::before { top:-210px; right:6%; width:360px; height:360px; }
.dashboard-hero::after { right:25%; bottom:-190px; width:240px; height:240px; }
.dashboard-hero-content { position:relative; z-index:1; max-width:690px; }
.dashboard-eyebrow { color:rgba(255,255,255,.76); font-size:.72rem; font-weight:700; letter-spacing:.13em; }
.dashboard-hero h2 { margin:.65rem 0 .35rem; color:#fff; font-size:clamp(1.55rem,3vw,2.25rem); font-weight:750; letter-spacing:-.04em; }
.dashboard-hero p { margin:0; color:rgba(255,255,255,.82); }
.dashboard-hero .btn { padding:.65rem 1rem; border-radius:.7rem; }
.dashboard-hero .btn-outline-light { border-color:rgba(255,255,255,.52); color:#fff; }
.dashboard-hero .btn-outline-light:hover { color:#172033; background:#fff; }
.dashboard-hero-art { position:absolute; z-index:0; right:7%; bottom:-.3rem; color:rgba(255,255,255,.14); font-size:clamp(8rem,19vw,15rem); line-height:1; transform:rotate(-8deg); }
.dashboard-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.8rem 0 1rem; }
.dashboard-section-heading h2,.recent-heading h2 { margin:0; font-size:1.05rem; font-weight:750; letter-spacing:-.02em; }
.dashboard-section-heading p,.recent-heading p { margin:.25rem 0 0; color:var(--muted); font-size:.82rem; }
.dashboard-period { padding:.48rem .8rem; border:1px solid #e8ecf3; border-radius:999px; color:#59657a; background:#fff; font-size:.78rem; font-weight:600; white-space:nowrap; }
.chart-card .card-body { padding:1.25rem; }
.chart-heading { display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; }
.chart-icon { display:inline-flex; flex:0 0 40px; align-items:center; justify-content:center; width:40px; height:40px; border-radius:13px; }
.chart-heading h3 { margin:0; font-size:.95rem; font-weight:700; }
.chart-heading p { margin:.2rem 0 0; color:var(--muted); font-size:.76rem; }
.chart-wrap { position:relative; width:100%; }
.chart-wrap-tall { height:260px; }
.chart-wrap-donut { height:270px; }
.chart-wrap-agency { height:280px; }
.recent-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.35rem; border-bottom:1px solid #edf0f5; }
.recent-card .table { --bs-table-hover-bg:#f8faff; }
.recent-card thead th { padding:.8rem 1rem; border-bottom-color:#edf0f5; color:#738096; background:#fafbfe; font-size:.72rem; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
.recent-card tbody td { padding:.85rem 1rem; border-color:#f0f2f6; font-size:.86rem; }
.shipment-link { color:#26344d; font-weight:700; text-decoration:none; white-space:nowrap; }
.shipment-link i { color:var(--brand); }
.shipment-link:hover { color:var(--brand); }
.route-cell { color:#59657a; white-space:nowrap; }
.route-cell i { color:#a0aabc; font-size:.72rem; }
@media (max-width:575.98px) {
	.dashboard-hero { min-height:220px; padding:1.4rem; border-radius:1rem; }
	.dashboard-hero-art { right:-1rem; opacity:.65; }
	.dashboard-hero-content { max-width:100%; }
	.dashboard-hero p { max-width:85%; font-size:.9rem; }
	.dashboard-section-heading { align-items:flex-start; }
	.dashboard-period { padding:.4rem .6rem; font-size:.7rem; }
	.stat-card .card-body { gap:.65rem!important; padding:.85rem; }
	.stat-card .icon { flex-basis:40px; width:40px; height:40px; border-radius:12px; font-size:1rem; }
	.stat-card .value { font-size:1rem; }
	.stat-card .stat-label { font-size:.7rem; }
	.chart-wrap-tall { height:230px; }
	.chart-wrap-donut { height:245px; }
	.recent-heading { align-items:flex-start; padding:1rem; }
	.recent-card tbody td { padding:.75rem .8rem; }
}
@media print { .sidebar,.topbar,.no-print{display:none!important} .main{margin:0} }