@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap');
:root{--primary:#146772;--text:#002B30;--deep:#0F5A63;--kelp:#2F6EA6;--sand:#E6DCCF;--seafoam:#7FCED6;--success:#2F7D6C;--info:#2C8E9B;--warning:#E8B351;--danger:#C84B4B}
*{box-sizing:border-box}body{font-family:Montserrat,system-ui;-webkit-font-smoothing:antialiased;margin:0;color:var(--text);background:#f7f9fa}
a{color:var(--kelp)}header{background:var(--primary);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.container{max-width: 1600px;margin:20px auto;padding:0 16px}
.card{background:#fff;border-radius:14px;box-shadow:0 6px 22px rgba(0,0,0,.06);padding:18px;margin-bottom:18px}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:9px 14px;border-radius:10px;border:none;cursor:pointer}
.btn.secondary{background:var(--deep)}.btn.danger{background:var(--danger)}.btn.warning{background:var(--warning)}.btn.small{padding:6px 10px;font-size:.9rem}
input,select,textarea{width:100%;padding:10px;border:1px solid #d0dde2;border-radius:10px;margin:6px 0 12px;background:#fff}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
th,td{padding:10px;border-bottom:1px solid #eef2f3;text-align:left}th{background:#f1f6f7}
.badge{padding:4px 8px;border-radius:12px;font-size:.8rem;color:#fff}
.badge.preparation{background:var(--info)}.badge.ready_to_ship{background:var(--kelp)}.badge.in_transit{background:var(--info)}
.badge.pickup_point{background:var(--warning);color:#000}.badge.delivered{background:var(--success)}.badge.lost{background:#555}.badge.damaged{background:var(--danger)}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi .card .v{font-size:18px;font-weight:700}
.alert{padding:10px 14px;border-radius:8px;margin:10px 0}.alert.success{background:#e9f6f1;color:#1f5e4f}.alert.error{background:#fdeaea;color:#8b2a2a}
.timeline{border-left:3px solid var(--seafoam);padding-left:14px}.timeline .item{margin-bottom:10px}
.small{font-size:.9rem;color:#6b7b80}
.typeahead-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #ddd;border-radius:8px;max-height:160px;overflow:auto;position:absolute;z-index:5;width:100%}
.typeahead-list li{padding:6px 10px;cursor:pointer}.typeahead-list li:hover{background:#f2f7f8}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ===== Navigation improvements ===== */
header{background:var(--primary);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 18px rgba(0,0,0,.12);position:sticky;top:0;z-index:50}
header .brand{font-weight:700;font-size:1.15rem;letter-spacing:.2px}
header nav{display:flex;gap:8px;align-items:center}
header nav a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:10px;opacity:.95;transition:background .2s ease,opacity .2s ease,transform .05s ease}
header nav a:hover{background:rgba(255,255,255,.14);opacity:1}
header nav a:active{transform:translateY(1px)}
header nav a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:10px}

/* ===== Buttons: force white text & better hover ===== */
.btn, .btn:visited, .btn *{color:#fff !important}
.btn:hover{filter:brightness(.95)}
.btn.secondary:hover{filter:brightness(.93)}
.btn.warning:hover{filter:brightness(.95)}
.btn.danger:hover{filter:brightness(.95)}
.btn:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}

/* ===== Improve contrast in table header & badges ===== */
th{background:linear-gradient(0deg,#eef4f6,#f9fcfd)}
.badge{box-shadow:0 1px 0 rgba(0,0,0,.08) inset}

/* ===== Links inside cards ===== */
.card a.btn{text-decoration:none}

/* ===== Minor typography polish ===== */
body{line-height:1.45}

/* Active nav item */
header nav a.active{background:rgba(255,255,255,.24); opacity:1; font-weight:700}

/* Status icons */
.badge svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.timeline .item .head{display:flex;align-items:center;gap:8px}
.timeline .item .head svg{width:18px;height:18px;opacity:.95}

/* Sticky table header */
.table-wrap{max-height:60vh; overflow:auto; border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.04)}
.table-wrap table{margin:0}
.table-wrap thead th{position:sticky; top:0; z-index:2; background:#f1f6f7}

/* Late badge */
.badge.late{background:var(--warning); color:#000}

.late-date{color:var(--danger);font-weight:700}

.sort-caret{margin-left:6px;opacity:.8;font-size:.9em}