:root {
  --primary: #0b5ed7;
  --primary-dark: #0847a8;
}
body { background-color: #f5f7fb; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
.bg-primary-custom { background-color: var(--primary) !important; }
.text-primary-custom { color: var(--primary) !important; }
.btn-primary-custom { background-color: var(--primary); border-color: var(--primary); color:#fff; }
.btn-primary-custom:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color:#fff; }
.btn-outline-primary-custom { border: 1px solid var(--primary); color: var(--primary); background: transparent; }
.btn-outline-primary-custom:hover { background-color: var(--primary); color: #fff; }
.navbar .nav-link.active { font-weight: 600; text-decoration: underline; }
.navbar-logo, .sidebar-brand img { height: 34px; width: auto; max-width: 140px; object-fit: contain; }
.offcanvas-title img { height: 28px; width: auto; }

.hero { background: linear-gradient(135deg, var(--primary), #093a86); color: #fff; padding: 70px 0 90px; }
.hero h1 { font-weight: 700; }
.stat-card { border-radius: 16px; border: none; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.category-card { border-radius: 14px; border: 1px solid #eef0f5; transition: transform .15s, box-shadow .15s; }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.card { border-radius: 14px; }
.badge { font-weight: 500; }

/* Sidebar dashboard */
.sidebar { min-height: 100vh; background: #101828; color: #cfd6e4; }
.sidebar .nav-link { color: #cfd6e4; border-radius: 8px; margin-bottom: 4px; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-brand { color: #fff; font-weight: 700; }

@media (max-width: 991.98px) {
  .hero { padding: 45px 0 60px; text-align: center; }
  .sidebar { min-height: auto; }
}

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content:''; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:#e2e6ef; }
.timeline-item { position: relative; padding-bottom: 22px; }
.timeline-item::before { content:''; position:absolute; left:-28px; top:2px; width:14px; height:14px; border-radius:50%; background: var(--primary); border:3px solid #fff; box-shadow:0 0 0 2px #e2e6ef; }

.tracking-photo { max-height: 320px; object-fit: cover; width:100%; border-radius: 10px; }