:root{
  --ldrvr-blue:#0b5793;
  --ldrvr-yellow:#ffd000;
  --ldrvr-white:#ffffff;
  --ldrvr-bg:#f6f8fb;
  --ldrvr-text:#0c1b2a;
  --ldrvr-muted:#6b7b8c;
  --ldrvr-danger:#b42318;
  --ldrvr-success:#067647;
  --ldrvr-radius:18px;
  --ldrvr-shadow:0 10px 28px rgba(11,87,147,.12);
}

/* App shell (mobile-first) */
.ldrvr-app{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--ldrvr-bg);
  color: var(--ldrvr-text);
  border-radius: var(--ldrvr-radius);
  overflow:hidden;
  box-shadow: var(--ldrvr-shadow);
  max-width: 980px;
  margin: 12px auto;
  min-height: 100vh;
}

/* App-like install banner */
.ldrvr-install{
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 10px 12px 12px 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--ldrvr-white);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.ldrvr-install[hidden]{ display:none !important; }
.ldrvr-install-text{display:flex;flex-direction:column;gap:2px;}
.ldrvr-install-sub{font-size:.92em;color:var(--ldrvr-muted);}
.ldrvr-install-actions{display:flex;gap:8px;flex-wrap:wrap;}
.ldrvr-install-ios{margin-top:8px;font-size:.92em;color:var(--ldrvr-muted);}

/* Better mobile feel */
.ldrvr-tab, .ldrvr-btn{touch-action:manipulation;}

@media (max-width: 520px){
  .ldrvr-install{flex-direction:column;align-items:stretch;}
  .ldrvr-install-actions{justify-content:flex-end;}
}

.ldrvr-topbar{
  background: var(--ldrvr-blue);
  color: var(--ldrvr-white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
}

.ldrvr-brand{font-weight:800; letter-spacing:.2px;}
.ldrvr-brand span{color: var(--ldrvr-yellow);} 
.ldrvr-user{opacity:.95; font-size:14px;}

.ldrvr-tabs{
  display:flex;
  gap:6px;
  padding: 10px;
  background: #0a4a7b;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.ldrvr-tab{
  appearance:none; border:0;
  background: rgba(255,255,255,.12);
  color:#fff;
  padding:10px 12px;
  border-radius: 999px;
  font-weight:600;
  font-size: 13px;
  white-space:nowrap;
}
.ldrvr-tab.is-active{background: var(--ldrvr-yellow); color:#1a1a1a;}

.ldrvr-main{padding: 12px;}

.ldrvr-pane{display:none;}
.ldrvr-pane.is-active{display:block;}

.ldrvr-card{
  background: var(--ldrvr-white);
  border-radius: var(--ldrvr-radius);
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.ldrvr-card + .ldrvr-card{margin-top: 12px;}

.ldrvr-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.ldrvr-mini{padding: 12px; background: #ffffff;}

h3{margin: 0 0 10px; font-size: 18px;}
h4{margin: 8px 0 10px; font-size: 15px;}

.ldrvr-muted{color: var(--ldrvr-muted); font-size: 13px; margin: 0 0 10px;}

.ldrvr-form{margin-top:10px;}

.ldrvr-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.ldrvr-grid label{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13px;}

.ldrvr-input{
  width:100%;
  box-sizing:border-box;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

.ldrvr-actions{display:flex; gap:10px; margin-top: 10px; flex-wrap: wrap;}
.ldrvr-split{justify-content:space-between;}

.ldrvr-btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #e9eef6;
  color: #122235;
  font-weight:700;
  font-size: 14px;
}

.ldrvr-btn-primary{background: var(--ldrvr-yellow);} 

.ldrvr-btn:active{transform: translateY(1px);} 

.ldrvr-table-wrap{overflow:auto; border-radius: 14px; border:1px solid #eef2f7;}
.ldrvr-table{width:100%; border-collapse: collapse; min-width: 660px;}
.ldrvr-table th,.ldrvr-table td{padding: 10px 10px; border-bottom: 1px solid #eef2f7; font-size: 13px; text-align:left;}
.ldrvr-table th{background:#f7f9fc; font-weight:800; color:#2a3a4b; position:sticky; top:0; z-index:1;}

.ldrvr-pill{display:inline-flex; padding:4px 10px; border-radius: 999px; font-weight:800; font-size:12px;}
.ldrvr-pill.pending{background:#fff6cc;}
.ldrvr-pill.out_on_delivery{background:#dbeafe;}
.ldrvr-pill.delivered{background:#dcfce7;}
.ldrvr-pill.completed{background:#e2e8f0;}

.ldrvr-toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(12,27,42,.92);
  color:#fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:700;
  font-size: 13px;
  max-width: 92vw;
  display:none;
  z-index: 99999;
}
.ldrvr-toast.is-show{display:block;}

.ldrvr-modal{
  position: fixed;
  inset:0;
  /* keep dashboard usable: do not block clicks outside the dialog */
  pointer-events:none;
  background: transparent;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 16px 16px 22px;
  z-index: 99998;
}
.ldrvr-modal-card{
  pointer-events:auto;
  width: min(420px, 96vw);
  background:#fff;
  border-radius: var(--ldrvr-radius);
  padding: 14px;
  box-shadow: var(--ldrvr-shadow);
  border: 1px solid rgba(11,87,147,.14);
}
.ldrvr-modal-title{font-weight:900; margin-bottom: 8px; color: var(--ldrvr-text);}
.ldrvr-modal-body{color:#32465b; font-size: 14px;}
.ldrvr-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top: 12px; flex-wrap:wrap;}

.ldrvr-checklist{display:flex; flex-direction:column; gap: 10px; margin-top: 10px;}
.ldrvr-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background:#fff;
}
.ldrvr-check input{margin-top: 2px;}
.ldrvr-check .q{font-weight:700; font-size: 13px;}
.ldrvr-check .note{font-size: 12px; color: var(--ldrvr-muted); margin-top: 4px;}

.ldrvr-sign{margin-top: 12px;}
.ldrvr-sign-label{font-weight:800; font-size:13px; margin-bottom: 6px;}
.ldrvr-sign-pad{border: 2px dashed #c8d3e1; border-radius: 14px; width: 100%; height: auto; background:#fff;}

.ldrvr-error{border-left: 5px solid var(--ldrvr-danger);} 
.ldrvr-success{border-left: 5px solid var(--ldrvr-success);} 

.ldrvr-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.ldrvr-filters .ldrvr-input{max-width: 220px;}

/* Desktop enhancements */
@media (min-width: 920px){
  .ldrvr-main{padding: 16px;}
  .ldrvr-grid{grid-template-columns: repeat(3, 1fr);} 
}