/* ============================================================
   DeliveryMS – Custom Styles
   ============================================================ */

:root {
  --sidebar-width: 240px;
  --sidebar-bg:    #1a1a2e;
  --primary:       #0d6efd;
}

/* ── Admin layout ── */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: #f5f7fa;
}

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  overflow-y: auto;
  transition: transform .25s ease;
}

.admin-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  width: calc(100% - var(--sidebar-width));
  transition: margin-left .25s ease;
}

@media (max-width: 768px) {
  .sidebar      { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .admin-main   { margin-left: 0; width: 100%; }
}

/* Sidebar nav links */
.sidebar .nav-link {
  color: rgba(255,255,255,.7);
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .875rem;
  transition: background .2s, color .2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.sidebar .nav-link.active {
  background: var(--primary);
  color: #fff;
}

.sidebar-brand {
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* ── Driver layout ── */
.driver-layout {
  background: #f5f7fa;
  min-height: 100vh;
}

/* ── Avatar circles ── */
.avatar-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem;
}
.avatar-circle.avatar-sm {
  width: 32px; height: 32px;
  font-size: .8rem;
}

/* ── Stat icon box ── */
.stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* ── DO cards (driver view) ── */
.do-card:last-child   { border-bottom: none !important; }

/* ── Status option radio ── */
.status-option {
  cursor: pointer;
  border: 2px solid #e9ecef;
  transition: border-color .2s, background .2s;
}
.status-option:hover  { border-color: var(--primary); background: #f0f6ff; }
.selected-status      { border-color: var(--primary) !important; background: #e7f0ff !important; }

/* ── Upload drop zone ── */
.upload-drop-zone {
  border: 2px dashed #adb5bd;
  background: #f8f9fa;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.upload-drop-zone:hover,
.upload-drop-zone.drag-over {
  border-color: #198754;
  background: #f0fff4;
}

/* ── Driver bottom nav ── */
.driver-bottom-nav a {
  color: #6c757d;
  text-decoration: none;
  font-size: .7rem;
}
.driver-bottom-nav a i  { font-size: 1.2rem; }
.driver-bottom-nav a.active { color: var(--primary); }

/* ── Badges – custom orange ── */
.bg-orange { background-color: #fd7e14 !important; }

/* ── Print styles ── */
@media print {
  .sidebar, .driver-bottom-nav, .navbar, .btn { display: none !important; }
  .admin-main { margin-left: 0 !important; }
}

/* ── Misc ── */
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.card { border-radius: 12px; }
.fw-semibold { font-weight: 600; }

/* Mobile container padding for driver */
@media (max-width: 576px) {
  .container { padding-bottom: 5rem; }
}