body{
    margin:0;
    display:flex;
    min-height:100vh;
    background:#f4f6f9;
    font-family:Segoe UI,sans-serif;
}
.sidebar{

    width:260px;
    min-width:260px;
    flex-shrink:0;

    height:100vh;

    position:sticky;
    top:0;

    background:linear-gradient(180deg,#0f172a,#1e293b);

    overflow-y:auto;
}



.main{

    flex:1;
    width:calc(100% - 260px);
    padding:20px;
    box-sizing:border-box;
}

.table-container{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

/* TABLE */
table{width:100%;background:white;border-collapse:collapse;border-radius:10px;overflow:hidden}

table{
  
    table-layout:fixed;
   
}

th{background:#e2e8f0;padding:10px}
td{padding:10px;border-top:1px solid #eee}
tr:hover{background:#f8fafc}

th,
td{
    white-space: nowrap;
}

table{

    table-layout:fixed;

    width:100%;

}

th,
td{

    padding:14px 12px;

    vertical-align:middle;

}
th:nth-child(1),
td:nth-child(1){

    width:60px;

}

th:nth-child(2),
td:nth-child(2){

    width:60px;

}

th:nth-child(3),
td:nth-child(3){

    width:50px;

}

th:nth-child(4),
td:nth-child(4){

    width:50px;

}

th:nth-child(5),
td:nth-child(5){

    width:50px;

}

th:nth-child(6),
td:nth-child(6){

    width:60px;

}

th:nth-child(7),
td:nth-child(7){

    width:60px;

}

th:nth-child(8),
td:nth-child(8){

    width:60px;

}

th:nth-child(9),
td:nth-child(9){

    width:50px;

}
/* =========================================
   ROUTE DETAILS MODAL
========================================= */

.address-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

    z-index:99999;

    padding:20px;

}

/* ========================================= */

.address-card{

    width:100%;

    max-width:650px;

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    animation:modalPop .25s ease;

}

@keyframes modalPop{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ========================================= */

.route-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

}

.route-icon{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-size:24px;

}

.route-header h2{

    margin:0;

    color:#1f2937;

    font-size:26px;

    font-weight:700;

}

/* ========================================= */

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:#374151;

    font-size:15px;

    font-weight:600;

}

.places-input{

    width:100%;

    padding:14px 16px;

    border:2px solid #d1d5db;

    border-radius:10px;

    font-size:15px;

    outline:none;

    transition:.25s;

    box-sizing:border-box;

}

.places-input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

/* ========================================= */

.route-summary{

    margin-top:25px;

}

.summary-box{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.summary-box div{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:18px;

    text-align:center;

}

.summary-box strong{

    display:block;

    color:#6b7280;

    margin-bottom:8px;

    font-size:14px;

}

.summary-box p{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#2563eb;

}

/* ========================================= */

.address-buttons{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:30px;

}

/* ========================================= */

.btn-primary{

    background:#2563eb;

    color:#fff;

    border:none;

    padding:13px 28px;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.btn-primary:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

/* ========================================= */

.btn-danger{

    background:#ef4444;

    color:#fff;

    border:none;

    padding:13px 28px;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.btn-danger:hover{

    background:#dc2626;

    transform:translateY(-2px);

}

/* =========================================
   GOOGLE PLACES DROPDOWN
========================================= */

.pac-container{

    z-index:100000 !important;

    border-radius:12px;

    border:none;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    overflow:hidden;

}

.pac-item{

    padding:12px;

    font-size:14px;

    cursor:pointer;

}

.pac-item:hover{

    background:#eff6ff;

}

.pac-item-selected{

    background:#dbeafe !important;

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .address-card{

        padding:20px;

        width:95%;

    }

    .summary-box{

        grid-template-columns:1fr;

    }

    .address-buttons{

        flex-direction:column;

    }

    .btn-primary,

    .btn-danger{

        width:100%;

    }

}

.status-select{

    width:100px;

    height:30px;

    padding:0 12px;

    border:1px solid #d1d5db;

    border-radius:10px;

    background:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    outline:none;

    transition:.25s;

}

.status-select:hover{

    border-color:#2563eb;

}

.status-select:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.15);

}
/* MAP */


/* PAGINATION */

.pagination button{
  margin:2px;
  padding:6px 10px;
  border:none;
  background:#39a342;
  color:white;
  border-radius:4px;
  cursor:pointer;
}

/* TOAST */
#toast{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#22c55e;
  color:white;
  padding:10px;
  border-radius:8px;
  opacity:0;
}
#toast.show{opacity:1}

table {
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

th {
  background:#1e293b;
  color:white;
  text-transform:uppercase;
  font-size:12px;
}

td {
  font-size:14px;
}
#toast {
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  font-weight:bold;
}

.sidebar button {
  text-align:left;
  padding:12px;
}
.status {
  padding:5px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:bold;
}

.status.InTransit {
  background:#facc15;
  color:black;
}

.status.Delivered {
  background:#22c55e;
  color:white;
}
.table-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.table-toolbar input{
  padding:10px;
  width:250px;
  border-radius:6px;
  border:1px solid #ccc;
}

.toolbar-actions button{
  margin-left:8px;
}
.stats{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

.card{
  flex:1;
  background:white;
  padding:15px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  font-weight:bold;
}

.table-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
  align-items:center;
}

.table-toolbar input,
.table-toolbar select{
  padding:8px;
  border-radius:6px;
  border:1px solid #ccc;
}



.payment-badge{
  display:inline-block;
  margin-top:5px;
  padding:4px 8px;
  border-radius:20px;
  font-size:11px;
  font-weight:bold;
}

.payment-badge.Paid{
  background:#22c55e;
  color:white;
}

.payment-badge.Pending{
  background:#facc15;
  color:black;
}
.sidebar{

  width:260px;
  height:100vh;

  background:linear-gradient(
    180deg,
    #0f172a,
    #1e293b
  );

  padding:15px;

  display:flex;
  flex-direction:column;

  overflow-y:auto;

  position:sticky;
  top:0;
}

.logo{
    
    color:white;
    font-size:28px;
    white-space:nowrap;
    font-weight:bold;

  margin-bottom:20px;
}
.sidebar-header{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px 15px;

    margin-bottom:20px;

}

.brand{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-left:10px;   /* Space for the menu button */

}

.brand-icon{

    font-size:32px;

}

.brand-name{

    color:#fff;

    font-size:32px;

    font-weight:700;

    text-align:center;

}
.sidebar button{

  background:#1e293b;

  color:white;

  border:none;

  padding:14px;

  margin-bottom:10px;

  border-radius:10px;

  text-align:left;

  cursor:pointer;

  transition:0.2s;
}

.sidebar button:hover{

  background:#334155;

  transform:translateX(3px);
}
.submenu{

  display:none;

  flex-direction:column;

  gap:8px;

  padding-left:10px;

}

.submenu.show{

  display:flex;

}
.submenu button{

  background:#0f172a;

  font-size:14px;
}
.mobile-menu-btn{

  display:none;

  position:fixed;

  top:10px;
  left:10px;

  z-index:9999;

  background:#0f172a;
  color:white;

  border:none;

  padding:10px 14px;

  border-radius:8px;
}

/* =========================
   TIMELINE PREMIUM DESIGN
========================= */

.timeline-card{

  position:relative;
  background:#ffffff;
  border-radius:24px;
  padding:30px;
  margin-bottom:25px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

  overflow:hidden;

  transition:0.3s ease;

  border-left:8px solid #3b82f6;

}

.timeline-card:hover{

  transform:translateY(-4px);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.12);

}

/* CANCELLED */

.timeline-card.cancelled{

  border-left:8px solid #ef4444;

}

/* DELIVERED */

.timeline-card.delivered{

  border-left:8px solid #22c55e;

}

/* TRANSIT */

.timeline-card.transit{

  border-left:8px solid #f59e0b;

}

/* HEADER */

.timeline-header{

  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;

}

.timeline-title{

  font-size:42px;
  font-weight:800;
  color:#111827;

}

/* STATUS BADGE */

.timeline-badge{

  padding:10px 20px;
  border-radius:999px;
  font-weight:bold;
  font-size:14px;
  color:white;

}

.timeline-badge.cancelled{

  background:#ef4444;

}

.timeline-badge.delivered{

  background:#22c55e;

}

.timeline-badge.transit{

  background:#f59e0b;

}

/* BODY */

.timeline-body{

  display:flex;
  gap:25px;
  align-items:flex-start;

}

/* ICON */

.timeline-icon{

  width:80px;
  height:80px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:38px;

  background:#eff6ff;

  flex-shrink:0;

}

.timeline-card.cancelled .timeline-icon{

  background:#fee2e2;

}

.timeline-card.delivered .timeline-icon{

  background:#dcfce7;

}

.timeline-card.transit .timeline-icon{

  background:#fef3c7;

}

/* GRID */

.timeline-grid{

  flex:1;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:18px;

}

/* INFO BOX */

.timeline-info{

  background:#f8fafc;

  padding:18px;
  border-radius:16px;

}

.timeline-label{

  color:#6b7280;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:8px;

}

.timeline-value{

  font-size:20px;
  font-weight:700;
  color:#111827;

}

/* AMOUNT */

.timeline-amount{

  color:#16a34a;

}

/* DATE */

.timeline-date{

  margin-top:25px;

  font-size:14px;
  color:#6b7280;

  border-top:1px solid #e5e7eb;

  padding-top:18px;

}

/* WATERMARK */

.timeline-watermark{

  position:absolute;

  right:-10px;
  top:40px;

  font-size:90px;
  font-weight:900;

  color:rgba(0,0,0,0.03);

  transform:rotate(-90deg);

  pointer-events:none;

}
#scannerContainer{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,0.8);

  display:none;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  z-index:9999;
}

#scanner{

  position:fixed;

  inset:0;

  background:
    linear-gradient(
      180deg,
      #020617,
      #0f172a
    );

  z-index:99999;

  display:none;

  align-items:center;

  justify-content:center;

  flex-direction:column;
}

#scannerContainer{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:25px;
}

#scannerVideo{

  width:420px;

  max-width:92vw;

  border-radius:25px;

  border:5px solid white;

  box-shadow:
    0 0 30px rgba(59,130,246,0.5);
}

/* animated scan line */
#scannerVideo::after{
  content:"";
}

.scan-text{

  color:white;

  font-size:20px;

  font-weight:bold;

  letter-spacing:1px;
}

#scannerContainer button{

  width:420px;

  max-width:92vw;

  padding:16px;

  border:none;

  border-radius:16px;

  background:#ef4444;

  color:white;

  font-size:20px;

  font-weight:bold;

  cursor:pointer;

  transition:0.2s;
}

#scannerContainer button:hover{

  background:#dc2626;

  transform:scale(1.02);
}
#reader{

  width:320px;

  max-width:90vw;

  background:white;

  border-radius:20px;

  overflow:hidden;
}

.recycle-table{

  width:100%;

  border-collapse:collapse;

  background:white;

  border-radius:20px;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);
}

.recycle-table th{

  background:#172033;

  color:white;

  padding:18px;

  text-align:center;

  font-size:15px;
}

.recycle-table td{

  padding:18px;

  text-align:center;

  border-bottom:
    1px solid #e5e7eb;
}

.recycle-table tr:hover{

  background:#f8fafc;
}

.recycle-actions{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;
}

.recycle-actions button{

  border:none;

  padding:8px 14px;

  border-radius:8px;

  cursor:pointer;

  font-weight:bold;
}

.restore-btn{

  background:#2563eb;

  color:white;
}

.delete-btn{

  background:#ef4444;

  color:white;
}
table{

  width:100%;

  border-collapse:collapse;

  table-layout:fixed;

  background:white;

  border-radius:20px;

  overflow:hidden;
}

th{

  background:#172033;

  color:white;

  padding:18px 12px;

  text-align:center;

  font-size:14px;

  white-space:nowrap;
}

td{

  padding:16px 10px;

  text-align:center;

  vertical-align:middle;

  border-bottom:
    1px solid #e5e7eb;

  word-wrap:break-word;
}

tr:hover{

  background:#f8fafc;
}
.actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

}

.actions button{

    width:80px;

    height:38px;

    border:none;

    border-radius:8px;

    cursor:pointer;

}
.view{

    display:none;

}

.view.active{

    display:block;

}
/* Smooth Buttons */

button{

  transition:
    all 0.3s ease;
}

/* Hover Effect */

button:hover{

  transform:translateY(-2px);

  box-shadow:
    0 8px 18px rgba(0,0,0,.15);

  opacity:.95;
}

/* Click Effect */

button:active{

  transform:scale(.96);
}

/* Sidebar Buttons */

.sidebar button:hover{

  background:#2563eb;

  transform:
    translateX(5px);

  box-shadow:
    0 10px 20px rgba(37,99,235,.3);
}

/* Table Action Buttons */

.action-btn:hover{

  transform:scale(1.05);

  filter:brightness(1.08);
}

/* Deliver Buttons */

.deliver-btn:hover{

  background:#16a34a;

  box-shadow:
    0 10px 20px rgba(34,197,94,.3);
}

/* Finance Buttons */

.finance-btn:hover{

  background:#eab308;

  color:black;
}

/* HOVER */
.actions button:hover{
  transform:translateY(-2px);
  opacity:.9;
}

.loader{

  position:fixed;
  inset:0;

  background:rgba(255,255,255,.8);

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:9999;
}

.spinner{

  width:70px;
  height:70px;

  border:7px solid #ddd;
  border-top:7px solid #2563eb;

  border-radius:50%;

  animation:spin 1s linear infinite;
}

.hidden{
  display:none;
}

@keyframes spin{

  100%{
    transform:rotate(360deg);
  }
}

.scanner-modal{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.95);

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:99999;
}

.scanner-box{

  width:420px;

  background:#111827;

  padding:30px;

  border-radius:25px;

  text-align:center;

  color:white;
}

#reader{

  width:100%;

  overflow:hidden;

  border-radius:20px;

  margin-top:20px;
}

.cancel-scan-btn{

  margin-top:20px;

  width:100%;

  padding:16px;

  border:none;

  background:#ef4444;

  color:white;

  border-radius:15px;

  font-size:18px;

  cursor:pointer;
}

.invoice-panel{

  display:flex;

  flex-direction:column;

  gap:12px;

  margin:15px;

  width:160px;
}

.invoice-panel select{

  padding:14px;

  border-radius:14px;

  border:2px solid #d1d5db;

  font-size:16px;

  background:white;
}

#printInvoiceBtn{

  background:#2563eb;

  color:white;

  border:none;

  padding:14px;

  border-radius:14px;

  font-size:16px;

  font-weight:bold;

  cursor:pointer;

  width:100%;
}

#printInvoiceBtn:hover{

  background:#1d4ed8;
}





.sms-btn{

  background:#2563eb;

  color:white;

  border:none;

  padding:10px 14px;

  border-radius:10px;

  cursor:pointer;

  font-weight:bold;

}
.card{
  background:#111827;
  border-radius:20px;
  padding:20px;
  color:white;
  box-shadow:0 0 20px rgba(0,0,0,0.4);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.chart-container{
    width:100%;
    max-width:100%;
    height:400px;

    background:white;
    border-radius:20px;
    padding:20px;

    overflow:hidden;
    box-sizing:border-box;
}

.chart-container canvas{
    width:100% !important;
    height:100% !important;
}
.main{
    width:100%;
    overflow-x:hidden;
}

.dashboard-content{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:20px;
    width:100%;
}

.driver-box{
   display:flex;
   align-items:center;
   gap:10px;
}


.online{
   display:inline-block;
   margin-top:5px;
   background:#16a34a;
   color:white;
   padding:3px 10px;
   border-radius:20px;
   font-size:12px;
}

.offline{
   display:inline-block;
   margin-top:5px;
   background:#ef4444;
   color:white;
   padding:3px 10px;
   border-radius:20px;
   font-size:12px;
}

.dark{
   background:#0f172a !important;
   color:white !important;
}

.dark table{
   color:white;
}

.dark .card{
   background:#111827;
}

.chart-card{
   width:100%;
   height:350px;
   background:white;
   border-radius:20px;
   padding:20px;
   margin-bottom:20px;
   position:relative;
}

/* =========================
   REVENUE DASHBOARD
========================= */

#revenueDashboard{

    background: #ffffff;

    border-radius: 20px;

    padding: 20px;

    margin-top: 20px;

    margin-bottom: 25px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    width: 100%;

    overflow: hidden;

}

/* HEADER */

.dashboard-header{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.dashboard-header h2{

    font-size: 28px;

    font-weight: bold;

    color: #111827;

}

/* CHART */

.chart-container{

    position: relative;

    width: 100%;

    height: 400px;

}

#revenueChart{

    width: 100% !important;

    height: 100% !important;

}


.menu-btn{

  width:100%;
  padding:14px;

  margin-top:10px;

  border:none;
  border-radius:12px;

  background:#1e3a8a;
  color:white;

  font-size:12px;
  cursor:pointer;

  transition:0.3s;
}

.menu-btn:hover{

  background:#2563eb;
  transform:translateY(-2px);
}

.map-container{

    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:18px;

    margin-bottom:15px;

    z-index:1;

}

#map{

    width:100%;

    height:320px;

    display:block;

    border-radius:18px;

    position:relative;

    z-index:1;

}

.table-section{

    margin-top:20px;

    position:relative;

    z-index:2;

}
.main-content{
    flex: 1;
    padding: 30px;
    margin-top: 25px;
}


.email-btn{

  background:hwb(325 25% 10%);

  color:white;

  border:none;

  border-radius:10px;

  padding:10px 18px;

  font-weight:bold;

  cursor:pointer;

  width:90px;

}

.email-btn:hover{

  background:rgb(38, 39, 41);

}

.finance-btn{
  background:#2563eb;
  color:white;
  border:none;
  padding:12px 20px;
  border-radius:10px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.finance-btn:hover{
  background:#1d4ed8;
  transform:translateY(-2px);
}

.finance-btn:disabled{
  background:#9ca3af;
  cursor:not-allowed;
}


#sidebarOverlay{
  display:none;
}

.showOverlay{
  display:block;
}

#loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.8);
  z-index:9999;
}

.hidden{
  display:none !important;
}

#deliverTable td{
    vertical-align: middle;
    text-align: center;
}

.driver-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
}

.driver-box div{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}


#deliverTable select{
    height:32px;
    padding:4px 8px;
}

.payment-badge{
    display:inline-block;
    margin-top:4px;
}

/* DRIVER COLUMN */

.driver-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    width:120px;

    margin:auto;

}

/* DRIVER PHOTO */
.driver-photo{

    width:64px;

    height:64px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #2563eb;

}
/* DRIVER NAME */

.driver-name{
  font-size:14px;
  font-weight:600;
  text-align:center;
}

/* STATUS */
.online,
.offline{

    padding:6px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

/* SELECT DRIVER */
.driver-select{

    width:90%;

    height:40px;

    border-radius:10px;

    font-size:15px;

    margin-top:10px;

}
/* ASSIGN BUTTON */
.assign-btn{

    width:90%;

    height:40px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        0 4px 12px rgba(37,99,235,.25);

}

.assign-btn:hover{

    background:linear-gradient(
        135deg,
        #1d4ed8,
        #2563eb
    );

    transform:translateY(-2px);

}

.assign-btn:active{

    transform:scale(.98);

}
/* ACTION BUTTONS COLUMN */

.actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
}

.actions button{
  width:90px;
  height:36px;

  border:none;
  border-radius:8px;

  font-size:13px;
  font-weight:600;

  cursor:pointer;
}

/* TABLE ALIGNMENT */

#deliverTable td{
  vertical-align:middle;
  text-align:center;
}

/* FIX DRIVER COLUMN WIDTH */

.driver-cell{
  width:140px;
}

/* FIX ACTION COLUMN WIDTH */

.actions-cell{
  width:110px;
}

/* DRIVER DASHBOARD */

#driverJobs{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    padding:20px;

    align-items:start;

}


/* ADMIN BUTTON */

.admin-btn{
  width:100%;
  background:#16213e;
  color:white;
  border:none;
  padding:14px;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  font-weight:bold;
  text-align:left;
  margin-bottom:5px;
  transition:.3s;
}

.admin-btn:hover{
  background:#2563eb;
}


/* SUBMENU */

.submenu{
  display:none;
  padding-left:10px;
  margin-bottom:10px;
}


/* LINKS */
/* ===========================
   SUBMENU LINKS
=========================== */

.submenu{

    display:none;

    width:100%;

    margin:8px 0 15px;

    padding-left:12px;

    box-sizing:border-box;

}

.submenu.show{

    display:block;

}

.submenu a{

    display:flex;

    align-items:center;

    width:100%;

    padding:14px 18px;

    margin:8px 0;

    background:#0f172a;

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    box-sizing:border-box;

    transition:all .25s ease;

}

.submenu a:hover{

    background:#2563eb;

    transform:translateX(6px);

    box-shadow:0 4px 12px rgba(37,99,235,.35);

}

/* SPECIAL COLORS */

.submenu a[href*="support"]{
  background:#16a34a;
}

.submenu a[href*="support"]:hover{
  background:#15803d;
}

.submenu a[href*="upgrade"]{
  background:#2563eb;
}

.submenu a[href*="upgrade"]:hover{
  background:#1d4ed8;
}

.submenu a[href*="cancel"]{
  background:#dc2626;
}

.submenu a[href*="cancel"]:hover{
  background:#b91c1c;
}

.submenu a[href*="renew"]{
  background:#f59e0b;
}

.submenu a[href*="renew"]:hover{
  background:#d97706;
}

.submenu a[href*="roles"]{
  background:#7c3aed;
}

.submenu a[href*="roles"]:hover{
  background:#6d28d9;
}

.submenu a[href*="company-settings"]{
  background:#0891b2;
}

.submenu a[href*="company-settings"]:hover{
  background:#0e7490;
}

.submenu a[href*="create-employee"]{
  background:#475569;
}

.submenu a[href*="create-employee"]:hover{
  background:#334155;
}

.paid-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:50px;

    height:34px;

    padding:0 16px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:
        0 6px 14px rgba(34,197,94,.25);

    transition:.25s;

}

.unpaid-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:50px;

    height:34px;

    padding:0 16px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:
        0 6px 14px rgba(239,68,68,.25);

    transition:.25s;

}

.paid-badge:hover,
.unpaid-badge:hover{

    transform:translateY(-2px);

}

.shipment-card{

  background:#fff;

  border-radius:16px;

  padding:25px;

  box-shadow:
    0 4px 15px
    rgba(0,0,0,.08);

  transition:.3s;

}

.shipment-card:hover{

  transform:
    translateY(-4px);

}

.hidden{
  display:none;
}

#loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.85);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  z-index:99999;
}

.spinner{
  width:50px;
  height:50px;

  border:5px solid #e5e7eb;
  border-top:5px solid #2563eb;

  border-radius:50%;

  animation:spin 1s linear infinite;
}

@keyframes spin{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

.page-header{

  margin-bottom:20px;

}

.page-header h2{

  margin:0;
  color:#0f172a;

}

.page-header p{

  margin-top:5px;
  color:#64748b;

}

.timeline-container{

  background:#fff;

  border-radius:16px;

  padding:20px;

  box-shadow:
    0 4px 15px
    rgba(0,0,0,.08);

  min-height:300px;

}

.empty-state{

  text-align:center;

  color:#94a3b8;

  padding:50px 20px;

  font-size:16px;

}


.empty-state{

  background:#fff;

  padding:30px;

  border-radius:16px;

  text-align:center;

  color:#64748b;

  font-size:16px;

  box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}


/* FILTER TOOLBAR */

.table-toolbar{

  display:flex;

  gap:12px;

  align-items:center;

  margin:15px 0;

  flex-wrap:wrap;

}

.table-toolbar input{

  flex:1;

  min-width:220px;

  height:48px;

  border:1px solid #d1d5db;

  border-radius:12px;

  padding:0 15px;

  font-size:15px;

}

.table-toolbar select{

  min-width:180px;

  height:48px;

  border:1px solid #d1d5db;

  border-radius:12px;

  padding:0 12px;

  font-size:15px;

  background:white;

}

.toolbar-btn{

  height:48px;

  padding:0 18px;

  border:none;

  border-radius:12px;

  background:#2563eb;

  color:white;

  font-weight:600;

  cursor:pointer;

}

.toolbar-btn:hover{

  background:#1d4ed8;

}

#companyNameDisplay{

  margin:10px 0;

  text-align:center;

  color:#0f172a;

}


/* ACTION COLUMN */

.actions-cell{

    width:160px;

    vertical-align:top;

    text-align:center;

}

/* BUTTON CONTAINER */

.actions{

    display:flex;

    flex-direction:column;

    gap:10px;

    align-items:stretch;

    width:100%;

}

/* ALL BUTTONS */

.actions button{

    width:100%;

    min-height:42px;

    border:none;

    border-radius:10px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    white-space:nowrap;

    display:flex;

    justify-content:center;

    align-items:center;

    box-sizing:border-box;

}

.actions button:hover{

    transform:translateY(-2px);

    opacity:.9;

}

/* BUTTON COLORS */

.pdf-btn{

    background:#111827;

}

.paid-btn{

    background:#16a34a;

}

.delete-btn{

    background:#ef4444;

}

.cancel-btn{

    background:#dc2626;

}

.restore-btn{

    background:#22c55e;

}

.sms-btn{

    background:#2563eb;

}

.email-btn{

    background:#db2777;

}

/* ==========================================
   SIDEBAR MENU
========================================== */

.sidebar a,
.sidebar button{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:14px 18px;

    font-size:16px;

    font-weight:600;

    color:#fff;

    text-decoration:none;

    background:#1f2937;

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    box-sizing:border-box;

}

.sidebar a:hover,
.sidebar button:hover{

    background:#2563eb;

}

.sidebar a.active{

    background:#2563eb;

}

*{
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.card,
.table-container,
.chart-card,
.map-container,
.mobile-card{

    background:#201d1d;

    border-radius:20px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);

    border:1px solid rgba(255,255,255,.4);

}

.card:hover,
.mobile-card:hover,
.chart-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.15);

}

button{

    border:none;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);

}

button:active{

    transform:scale(.97);

}

tbody tr{

    transition:.2s;

}

tbody tr:hover{

    background:#f8fbff;

    transform:scale(1.01);

}

.sidebar{

    background:
    linear-gradient(
        180deg,
        #0f172a,
        #111827,
        #1e293b
    );

    box-shadow:
        6px 0 25px rgba(0,0,0,.25);

}

.sidebar button{

    border-radius:14px;

    margin-bottom:10px;

    font-size:17px;

}

.sidebar button:hover{

    transform:translateX(6px);

    background:#2563eb;

}

.card{

    animation:fadeUp .6s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:
translateY(25px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

.table-toolbar input{

    border-radius:50px;

    padding-left:20px;

    box-shadow:
    inset 0 0 0 1px #d1d5db;

}

.table-toolbar input:focus{

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,.15);

}

.status,
.paid-badge,
.unpaid-badge{

    border-radius:50px;

    padding:6px 14px;

    font-weight:700;

}

.view{

    animation:
    fadePage .35s ease;

}

@keyframes fadePage{

from{

opacity:0;

transform:
translateY(15px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

.topbar{

    backdrop-filter:blur(12px);

    background:
    rgba(255,255,255,.75);

    border-bottom:
    1px solid rgba(255,255,255,.5);

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

#map{

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.12);

}

#toast{

    animation:
    slideToast .35s ease;

}

@keyframes slideToast{

from{

transform:
translateX(100px);

opacity:0;

}

to{

transform:
translateX(0);

opacity:1;

}

}

.premium-lock{

    filter:blur(2px);

    opacity:.6;

    pointer-events:none;

    position:relative;

}

.premium-lock::after{

    content:"🔒 Upgrade Required";

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.7);

    font-weight:bold;

    color:#2563eb;

}

.plan.trial{

    background:#f59e0b;

    color:white;

}




/* ==========================
   MOBILE CARDS
========================== */

.mobile-cards{
    display:none;
    width:100%;
}

.mobile-card{
    background:#fff;
    border-radius:18px;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.mobile-buttons{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:15px;
}

.mobile-buttons button{
    width:100%;
}

@media (max-width:768px){

    /* Hide desktop table */
    .table-container{
        display:none !important;
    }

    /* Show cards */
    .mobile-cards{
        display:block !important;
    }

}

@media (max-width:768px){

body{
    display:block;
}

.content{
    width:100%;
}

.main{
    padding:80px 12px 20px;
}

.sidebar{
    position:fixed;
    left:-260px;
}

.sidebar.showSidebar{
    left:0;
}

}

.mobile-menu-btn{

    display:none;

}

@media (max-width:768px){

    .mobile-menu-btn{

        display:flex !important;

        align-items:center;

        justify-content:center;

        position:fixed;

        top:15px;

        left:15px;

        width:55px;

        height:55px;

        border:none;

        border-radius:14px;

        background:#2563eb;

        color:#fff;

        font-size:30px;

        cursor:pointer;

        z-index:10002;

    }

}

@media (max-width:768px){

    .main,
    .content,
    .main-view{

        margin-left:0 !important;

        padding-left:10px !important;

        width:100% !important;

        max-width:100% !important;

    }

    .sidebar{

        left:-280px;

    }

    .sidebar.showSidebar{

        left:0;

    }

}

@media (max-width:768px){

    .map-container{

        width:100%;

        overflow:hidden;

        border-radius:16px;

    }

    #map{

        width:100%;

        height:260px;

    }

    .sidebar{

        z-index:10000;

    }

    .mobile-menu-btn{

        z-index:10001;

    }

}

.mobile-card{

    background:#fff;

    border-radius:20px;

    padding:18px;

    margin-bottom:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    border:1px solid #eef2f7;

}

.mobile-card h3{

    font-size:19px;

    font-weight:700;

    color:#111827;

    margin-bottom:14px;

}

.mobile-card p{

    font-size:14px;

    margin:8px 0;

    color:#374151;

    line-height:1.6;

}

.mobile-buttons{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

    margin-top:18px;

}

.mobile-buttons button{

    width:100%;

    height:46px;

    border:none;

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.mobile-buttons button:active{

    transform:scale(.96);

}

.mobile-card hr{

    margin:15px 0;

    border:none;

    border-top:1px solid #eceff3;

}

.mobile-amount{

    font-size:20px;

    font-weight:800;

    color:#2563eb;

    margin-top:12px;

}

@media (max-width:768px){

    .assign-btn{

        width:100%;

        height:46px;

        font-size:15px;

    }

}

@media (max-width:768px){

    .paid-badge,
    .unpaid-badge{

        min-width:100px;

        height:38px;

        font-size:14px;

    }

}

@media (max-width:768px){

    .mobile-menu-btn{

        top:10px;

        left:10px;

    }

}

@media (max-width:768px){

    body{

        padding-top:0;

        margin-top:0;

    }

    .content-main-view{

        padding-top:70px;

    }

}