/* ==========================================================================
   T-Parcel Dashboard — Design System
   Palette: Ink Navy (structure) / Tanzanite Blue (primary) / Route Orange
   (motion & accent) / Savanna Green (delivered) — built around the one
   element every role stares at: the delivery route/progress line.
   ========================================================================== */

:root{
  --navy-900:#0B1730;
  --navy-800:#132349;
  --navy-700:#1B2E5E;
  --tanzanite:#3B4FE0;
  --tanzanite-light:#7C8CF5;
  --route-orange:#FF7A3D;
  --route-orange-light:#FFB170;
  --savanna:#1FAE6A;
  --amber:#F5A623;
  --danger:#E5484D;
  --cloud:#F5F7FB;
  --card:#FFFFFF;
  --ink-900:#111827;
  --ink-600:#4B5563;
  --ink-400:#93A0B4;
  --border:#E7EAF3;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,30,61,.06);
  --shadow-md:0 10px 30px -8px rgba(15,30,61,.18);
  --grad-brand:linear-gradient(135deg,var(--tanzanite) 0%,#5A6CEF 55%,var(--route-orange) 130%);
  --grad-sidebar:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  --grad-route:linear-gradient(90deg,var(--tanzanite) 0%,var(--route-orange) 100%);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --sidebar-w:268px;
  --sidebar-w-collapsed:78px;
  --topbar-h:68px;
}

*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  background:var(--cloud);
  color:var(--ink-900);
  min-height:100vh;
}
h1,h2,h3,h4,h5,.font-display{font-family:var(--font-display);letter-spacing:-.01em;}
.text-mono{font-family:var(--font-mono);}
a{text-decoration:none;}

/* ---------------------------------------------------------------------- */
/* Shell layout                                                           */
/* ---------------------------------------------------------------------- */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--grad-sidebar);
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:1030;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, width .25s ease;
  box-shadow:0 0 40px rgba(0,0,0,.15);
}
.sidebar-brand{
  display:flex;align-items:center;gap:.65rem;
  padding:1.35rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .mark{
  width:38px;height:38px;border-radius:10px;
  background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:#fff;
  box-shadow:var(--shadow-md);
  flex-shrink:0;
}
.sidebar-brand .name{color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.1;}
.sidebar-brand .role-tag{color:var(--route-orange-light);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}

.sidebar-nav{flex:1;overflow-y:auto;padding:1rem .75rem 1.5rem;}
.sidebar-nav::-webkit-scrollbar{width:5px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:10px;}

.nav-section-label{
  color:rgba(255,255,255,.35);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  padding:1rem .75rem .4rem;
}
.nav-link-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.62rem .75rem;margin:.1rem 0;
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,.72);
  font-size:.89rem;font-weight:500;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
  position:relative;
}
.nav-link-item i{font-size:1.05rem;width:20px;text-align:center;color:rgba(255,255,255,.55);}
.nav-link-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-link-item:hover i{color:var(--route-orange-light);}
.nav-link-item.active{
  background:linear-gradient(90deg,rgba(59,79,224,.35),rgba(255,122,61,.16));
  color:#fff;
}
.nav-link-item.active i{color:var(--route-orange-light);}
.nav-link-item.active::before{
  content:"";position:absolute;left:-.75rem;top:8%;bottom:8%;width:3px;
  border-radius:0 4px 4px 0;background:var(--grad-route);
}
.nav-link-item .chev{margin-left:auto;font-size:.75rem;transition:transform .2s ease;color:rgba(255,255,255,.4);}
.nav-link-item[aria-expanded="true"] .chev{transform:rotate(90deg);}
.nav-badge{
  margin-left:auto;background:var(--route-orange);color:#fff;font-size:.65rem;
  font-weight:700;padding:.08rem .42rem;border-radius:20px;
}
.nav-link-item[aria-expanded="true"] .nav-badge{margin-left:0;}

.submenu{padding-left:1.65rem;border-left:1px dashed rgba(255,255,255,.12);margin-left:1.1rem;}
.submenu .nav-link-item{font-size:.83rem;padding:.5rem .65rem;color:rgba(255,255,255,.6);}
.submenu .nav-link-item::before{display:none;}
.submenu .nav-link-item.active{background:rgba(255,255,255,.08);color:#fff;}
.submenu .nav-link-item i{font-size:.55rem;color:var(--route-orange-light);}

.sidebar-footer{
  padding:1rem 1.1rem;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:.65rem;
}
.sidebar-footer .avatar{
  width:36px;height:36px;border-radius:50%;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0;
}
.sidebar-footer .who{color:#fff;font-size:.82rem;font-weight:600;line-height:1.1;}
.sidebar-footer .role{color:rgba(255,255,255,.45);font-size:.72rem;}

/* Collapsed (icon-only) desktop state */
.app-shell.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed);}
.app-shell.sidebar-collapsed .sidebar .name,
.app-shell.sidebar-collapsed .sidebar .role-tag,
.app-shell.sidebar-collapsed .sidebar .nav-section-label,
.app-shell.sidebar-collapsed .sidebar .nav-link-item span,
.app-shell.sidebar-collapsed .sidebar .chev,
.app-shell.sidebar-collapsed .sidebar .nav-badge,
.app-shell.sidebar-collapsed .sidebar .submenu,
.app-shell.sidebar-collapsed .sidebar .who,
.app-shell.sidebar-collapsed .sidebar .role{display:none;}
.app-shell.sidebar-collapsed .main-wrap{margin-left:var(--sidebar-w-collapsed);}

/* ---------------------------------------------------------------------- */
/* Main area                                                              */
/* ---------------------------------------------------------------------- */
.main-wrap{margin-left:var(--sidebar-w);flex:1;min-width:0;transition:margin-left .25s ease;}

.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;gap:1rem;
  padding:0 1.5rem;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1020;
}
.topbar .burger{
  border:none;background:var(--cloud);width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-600);
}
.topbar .search-box{
  flex:1;max-width:380px;position:relative;
}
.topbar .search-box input{
  width:100%;border:1px solid var(--border);background:var(--cloud);
  border-radius:10px;padding:.5rem .9rem .5rem 2.3rem;font-size:.85rem;
}
.topbar .search-box i{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--ink-400);}
.topbar .spacer{flex:1;}
.icon-btn{
  position:relative;border:none;background:var(--cloud);width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-600);
}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--route-orange);border:2px solid #fff;}

.page-body{padding:1.5rem;}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.35rem;}
.page-head .eyebrow{color:var(--tanzanite);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.page-head h1{font-size:1.5rem;margin:.15rem 0 0;}
.page-head .sub{color:var(--ink-600);font-size:.88rem;margin-top:.15rem;}

.btn-brand{
  background:var(--grad-brand);border:none;color:#fff;font-weight:600;
  padding:.55rem 1.1rem;border-radius:10px;font-size:.87rem;
  box-shadow:0 8px 20px -6px rgba(59,79,224,.55);
}
.btn-brand:hover{color:#fff;filter:brightness(1.06);}
.btn-outline-soft{background:#fff;border:1px solid var(--border);color:var(--ink-600);border-radius:10px;font-weight:600;font-size:.87rem;}

/* ---------------------------------------------------------------------- */
/* KPI cards                                                              */
/* ---------------------------------------------------------------------- */
.kpi-card{
  background:var(--card);border-radius:var(--radius-lg);
  padding:1.25rem 1.35rem;box-shadow:var(--shadow-sm);
  border:1px solid var(--border);position:relative;overflow:hidden;
}
.kpi-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,var(--grad-route));}
.kpi-card .label{color:var(--ink-600);font-size:.8rem;font-weight:600;}
.kpi-card .value{font-family:var(--font-display);font-size:1.9rem;font-weight:700;margin-top:.15rem;}
.kpi-card .foot{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.78rem;}
.kpi-card .foot.up{color:var(--savanna);}
.kpi-card .foot.warn{color:var(--amber);}
.kpi-card .icon-wrap{
  position:absolute;top:1.15rem;right:1.15rem;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;background:var(--cloud);color:var(--tanzanite);
}

/* ---------------------------------------------------------------------- */
/* Generic content card                                                   */
/* ---------------------------------------------------------------------- */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.panel-head{padding:1.1rem 1.3rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.panel-head h5{margin:0;font-size:1rem;}
.panel-body{padding:1.3rem;}

.table-modern{width:100%;font-size:.86rem;}
.table-modern thead th{
  color:var(--ink-400);font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;
  border-bottom:1px solid var(--border);padding:.6rem .5rem;
}
.table-modern tbody td{padding:.75rem .5rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.table-modern tbody tr:hover{background:var(--cloud);}

.status-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .65rem;border-radius:20px;font-size:.72rem;font-weight:700;
}
.status-pill.registered{background:#EEF0FE;color:var(--tanzanite);}
.status-pill.agent_assigned{background:#EDE9FE;color:#7C3AED;}
.status-pill.dispatched{background:#FFF1E6;color:var(--route-orange);}
.status-pill.in_transit{background:#FFF7E0;color:#B7791F;}
.status-pill.out_for_delivery{background:#FFEFE8;color:#E45B21;}
.status-pill.delivered{background:#E7F8EF;color:var(--savanna);}
.status-pill.pending{background:#F1F2F6;color:var(--ink-600);}

.pay-pill{padding:.22rem .55rem;border-radius:8px;font-size:.7rem;font-weight:700;}
.pay-pill.sender{background:#EEF0FE;color:var(--tanzanite);}
.pay-pill.cod{background:#FFF1E6;color:var(--route-orange);}

/* ---------------------------------------------------------------------- */
/* SIGNATURE ELEMENT — Route Progress Stepper                             */
/* A dashed "road" that fills with the brand gradient as a parcel moves.  */
/* ---------------------------------------------------------------------- */
.route-stepper{display:flex;align-items:flex-start;position:relative;padding:.5rem .25rem 0;}
.route-stepper::before{
  content:"";position:absolute;top:19px;left:5%;right:5%;height:3px;
  background-image:linear-gradient(90deg,var(--border) 0 8px,transparent 8px 14px);
  background-size:14px 3px;background-repeat:repeat-x;border-radius:3px;
}
.route-stepper .route-fill{
  position:absolute;top:19px;left:5%;height:3px;background:var(--grad-route);
  border-radius:3px;transition:width .6s ease;
}
.route-step{flex:1;text-align:center;position:relative;z-index:1;}
.route-step .dot{
  width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin:0 auto;color:var(--ink-400);
  font-size:1rem;transition:all .3s ease;
}
.route-step.done .dot{background:var(--grad-route);border-color:transparent;color:#fff;box-shadow:0 6px 14px -4px rgba(255,122,61,.55);}
.route-step.current .dot{
  border-color:var(--tanzanite);color:var(--tanzanite);background:#fff;
  box-shadow:0 0 0 6px rgba(59,79,224,.12);animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(59,79,224,.35);}
  70%{box-shadow:0 0 0 10px rgba(59,79,224,0);}
  100%{box-shadow:0 0 0 0 rgba(59,79,224,0);}
}
.route-step .lbl{font-size:.7rem;font-weight:700;color:var(--ink-600);margin-top:.5rem;display:block;}
.route-step.done .lbl{color:var(--ink-900);}
.route-step.current .lbl{color:var(--tanzanite);}
.route-step .time{font-size:.65rem;color:var(--ink-400);display:block;margin-top:.1rem;}

/* Compact horizontal bar version, for tables */
.route-mini{height:6px;border-radius:6px;background:var(--border);width:100%;min-width:90px;overflow:hidden;}
.route-mini > span{display:block;height:100%;background:var(--grad-route);border-radius:6px;transition:width .5s ease;}

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */
.form-modern label{font-size:.82rem;font-weight:600;color:var(--ink-900);margin-bottom:.3rem;}
.form-modern .form-control,.form-modern .form-select{
  border-radius:10px;border:1px solid var(--border);padding:.55rem .8rem;font-size:.87rem;background:#fcfcfe;
}
.form-modern .form-control:focus,.form-modern .form-select:focus{
  border-color:var(--tanzanite);box-shadow:0 0 0 3px rgba(59,79,224,.14);background:#fff;
}
.form-section-title{
  font-family:var(--font-display);font-size:.95rem;font-weight:700;margin:1.5rem 0 .9rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--border);color:var(--navy-800);
}
.form-section-title:first-child{margin-top:0;}

.dispatch-choice{
  border:1.5px solid var(--border);border-radius:var(--radius-md);padding:1rem;cursor:pointer;
  transition:all .15s ease;height:100%;
}
.dispatch-choice input{display:none;}
.dispatch-choice .ic{
  width:38px;height:38px;border-radius:10px;background:var(--cloud);display:flex;align-items:center;
  justify-content:center;color:var(--tanzanite);margin-bottom:.6rem;
}
.dispatch-choice strong{font-size:.88rem;display:block;}
.dispatch-choice p{font-size:.76rem;color:var(--ink-600);margin:.15rem 0 0;}
.dispatch-choice.checked{border-color:var(--tanzanite);background:#F7F8FF;box-shadow:0 0 0 3px rgba(59,79,224,.1);}

/* ---------------------------------------------------------------------- */
/* Agent mobile view                                                      */
/* ---------------------------------------------------------------------- */
.mobile-frame{max-width:430px;margin:0 auto;}
.agent-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;margin-bottom:.75rem;
  box-shadow:var(--shadow-sm);
}
.agent-card .meta{font-size:.72rem;color:var(--ink-400);}
.bottom-nav{
  position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);
  display:flex;justify-content:space-around;padding:.5rem 0;box-shadow:0 -6px 20px rgba(15,30,61,.06);
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:.15rem;color:var(--ink-400);font-size:.65rem;font-weight:600;}
.bottom-nav a.active{color:var(--tanzanite);}
.bottom-nav a i{font-size:1.15rem;}

.otp-group{display:flex;gap:.5rem;justify-content:center;}
.otp-group input{
  width:44px;height:52px;text-align:center;font-size:1.3rem;font-weight:700;
  border:1.5px solid var(--border);border-radius:10px;font-family:var(--font-mono);
}
.otp-group input:focus{border-color:var(--tanzanite);box-shadow:0 0 0 3px rgba(59,79,224,.14);}

/* ---------------------------------------------------------------------- */
/* WhatsApp-style chat                                                    */
/* ---------------------------------------------------------------------- */
.chat-shell{display:flex;height:calc(100vh - var(--topbar-h) - 3rem);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#fff;}
.chat-list{width:320px;border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;}
.chat-list-item{display:flex;gap:.7rem;padding:.85rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;}
.chat-list-item:hover,.chat-list-item.active{background:var(--cloud);}
.chat-list-item .avatar{width:42px;height:42px;border-radius:50%;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.chat-list-item .name{font-size:.85rem;font-weight:700;}
.chat-list-item .last{font-size:.76rem;color:var(--ink-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.chat-list-item .time{font-size:.68rem;color:var(--ink-400);}
.chat-window{flex:1;display:flex;flex-direction:column;min-width:0;}
.chat-window-head{padding:.9rem 1.1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.7rem;}
.chat-messages{flex:1;overflow-y:auto;padding:1.25rem;background:
  radial-gradient(circle at 20% 20%,rgba(59,79,224,.03),transparent 40%),
  radial-gradient(circle at 80% 70%,rgba(255,122,61,.04),transparent 40%),var(--cloud);}
.bubble{max-width:62%;padding:.55rem .85rem;border-radius:14px;font-size:.85rem;margin-bottom:.6rem;line-height:1.4;box-shadow:var(--shadow-sm);}
.bubble.in{background:#fff;border-bottom-left-radius:4px;}
.bubble.out{background:var(--grad-brand);color:#fff;margin-left:auto;border-bottom-right-radius:4px;}
.bubble .ts{display:block;font-size:.65rem;opacity:.65;margin-top:.25rem;text-align:right;}
.chat-input{border-top:1px solid var(--border);padding:.8rem;display:flex;gap:.6rem;align-items:center;}
.chat-input input{flex:1;border:1px solid var(--border);border-radius:24px;padding:.6rem 1rem;font-size:.85rem;background:var(--cloud);}
.send-btn{width:40px;height:40px;border-radius:50%;background:var(--grad-brand);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);}
  .app-shell.sidebar-open .sidebar{transform:translateX(0);}
  .main-wrap{margin-left:0;}
  .app-shell.sidebar-collapsed .main-wrap{margin-left:0;}
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(11,23,48,.45);z-index:1025;opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .app-shell.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto;}
  .topbar .search-box{display:none;}
  .chat-shell{flex-direction:column;height:auto;}
  .chat-list{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:260px;}
  .desktop-only{display:none;}
}
@media (min-width:992px){
  .mobile-only{display:none;}
}