/* assets/style.css - custom styling to match screenshot (Bootstrap based) */
:root{
  --accent:#ff7a00;
  --muted:#6b7280;
  --card-bg:#ffffff;
  --timeline-bg:#f3f4f6;
  --dot-done:#0f172a;
}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;}
.badge-carrier img{height:26px;}
.timeline-card{background:var(--timeline-bg); border-radius:12px; position:relative; overflow:visible;}
.timeline-line{position:absolute;left:28px; right:28px; height:6px; background:#e7e7e7; top:28px; border-radius:6px; z-index:1;}
.timeline-step{width:25%; display:flex; flex-direction:column; align-items:center;}
.timeline-dot{width:44px;height:44px;border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px rgba(15,23,42,0.08); border: 2px solid rgba(255,255,255,0.6);}
.timeline-dot svg{width:18px;height:18px; color:#fff; stroke:#fff;}
.timeline-dot-done{background:linear-gradient(90deg,var(--dot-done),#2b82f6);}

.card .status-list{margin-top:6px;}
.status-dot{width:10px;height:10px;border-radius:50%; background:#9ca3af; margin-top:6px;}
.timeline-card .row > .col{padding-top:6px;padding-bottom:6px;}

.alert-danger{background:#fff1f0; border-color:#ffd6d6; color:#7f1d1d;}
.badge-warning-custom{background:#fff4e6;color:#c25a00;padding:6px 10px;border-radius:20px;font-weight:600;}

@media (max-width:767px){
  .timeline-line{left:18px; right:18px; top:26px;}
  .timeline-step{width:25%;}
  .timeline-dot{width:40px;height:40px;}
  .card .status-list{padding-left:6px;}
}

/* small helpers to mimic screenshot spacing */
.container{max-width:1100px;}




.app{display:flex;min-height:100vh}
.sidebar{width:220px;background:#fff;padding:20px;border-right:1px solid #eee}
.logo{font-weight:700;color:var(--accent);margin-bottom:1rem}
.sidebar nav a{display:block;padding:10px 6px;color:#6b7680;text-decoration:none;border-radius:8px}
.sidebar nav a.active{background:#f0f6ff;color:var(--accent);font-weight:600}
.main{flex:1;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 1px 4px rgba(30,40,60,0.04)}
.card.wide{grid-column:span 8}
.card.small{padding:12px}
.card h3{margin:0 0 8px 0;font-size:16px}
.row{display:flex;align-items:center}
.row.between{justify-content:space-between}
.buttons button{margin-left:8px}
.progress-section{display:flex;gap:20px;align-items:flex-start;margin-top:12px}
.progress-left{flex:1}
.progress-big{font-size:28px;font-weight:700}
.progress-right{flex:1}
.progressbar{height:14px;background:#eef3fb;border-radius:20px;overflow:hidden;margin-bottom:12px}
.progressbar .bar{height:100%;background:linear-gradient(90deg,var(--accent),#7fb5ff)}
.alert.warning{background:rgba(255,179,77,0.12);padding:8px;border-radius:8px;color:#b26a00;margin-top:8px}

.map-sim{background:#f8fafb;border-radius:8px;padding:12px;text-align:center}
.route-svg{width:100%;height:120px}
.distance{margin-top:8px;color:var(--muted)}

.package-illustration{display:flex;align-items:center;gap:12px}
.meta{list-style:none;padding:0;margin:8px 0 0 0;color:var(--muted)}
.meta li{margin-bottom:6px}
.big-number{font-size:28px;font-weight:700}
.stats{display:flex;gap:8px;justify-content:space-between;margin-top:12px}
.small{font-size:12px}
.muted{color:var(--muted)}
.center-card{max-width:680px;margin:120px auto;background:#fff;padding:40px;border-radius:12px;box-shadow:0 8px 30px rgba(20,30,40,0.06);text-align:center}
.search-inline form{display:flex;gap:8px}
.search-inline input{padding:8px;border-radius:8px;border:1px solid #e6eef6}
.search-inline button{padding:8px 12px;border-radius:8px;border:0;background:var(--accent);color:#fff}

.list{width:100%;border-collapse:collapse}
.list th,.list td{padding:8px;border-bottom:1px solid #f0f3f6;text-align:left}
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{background:#fff;padding:18px;border-radius:12px;width:420px}
input,textarea,select{width:100%;padding:8px;border-radius:8px;border:1px solid #e6eef6;margin-top:6px}
button{padding:8px 12px;border-radius:8px;border:0;background:var(--accent);color:#fff;cursor:pointer}
button.secondary{background:#f3f6f8;color:#344}
.small.muted{margin-top:8px;color:var(--muted);font-size:13px}