/* =========================
GLOBAL RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#f4f6f9;
color:#333;
}


/* =========================
HEADER
========================= */

header{
display:flex;
justify-content:space-between;
align-items:center;
background:#1f2d3d;
padding:18px 8%;
color:white;
}

.logo{
font-size:22px;
font-weight:bold;
}

nav ul{
display:flex;
gap:20px;
list-style:none;
}

nav ul li a{
text-decoration:none;
color:white;
font-size:14px;
}

nav ul li a:hover{
opacity:0.8;
}


/* =========================
SECTIONS
========================= */

.services{
padding:60px 20px;
text-align:center;
}

.services h2{
margin-bottom:30px;
font-size:28px;
}


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

.card-container{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
max-width:1200px;
margin:auto;

}

.card{

background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
text-align:center;

}

.card h3{
margin-bottom:10px;
}

.card p{
margin-bottom:10px;
}

.card button{

padding:10px 18px;
border:none;
background:#007bff;
color:white;
border-radius:6px;
cursor:pointer;

}

.card button:hover{
background:#0056b3;
}


/* =========================
FORM STYLE
========================= */

input,select,textarea{

width:100%;
padding:12px;
margin-top:10px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;

}

button{

padding:12px 20px;
border:none;
background:#007bff;
color:white;
border-radius:6px;
cursor:pointer;

}

button:hover{
background:#0056b3;
}


/* =========================
TABLE STYLE (future use)
========================= */

.table-container{
overflow-x:auto;
max-width:1200px;
margin:auto;
}

table{
width:100%;
border-collapse:collapse;
background:white;
}

th,td{
padding:12px;
border-bottom:1px solid #ddd;
text-align:left;
}

th{
background:#1f2d3d;
color:white;
}


/* =========================
RESPONSIVE DESIGN
========================= */

/* Tablet */

@media(max-width:1024px){

.card-container{
grid-template-columns:repeat(2,1fr);
}

}


/* Mobile */

@media(max-width:768px){

header{
flex-direction:column;
gap:15px;
}

nav ul{
flex-direction:column;
gap:10px;
align-items:center;
}

.card-container{
grid-template-columns:1fr;
}

.services{
padding:40px 10px;
}

}


/* Small Mobile */

@media(max-width:480px){

.services h2{
font-size:22px;
}

.logo{
font-size:18px;
}

}

/* ----- Admin bookings (timeline + ops) ----- */
.admin-subtitle {
  font-size: 14px;
  color: #555;
  margin: -12px 0 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.admin-bookings-section .admin-bookings-grid {
  grid-template-columns: 1fr;
  max-width: 920px;
  text-align: left;
}

.admin-booking-card {
  text-align: left;
  padding: 22px;
  border-left: 4px solid #2563eb;
}

.admin-booking-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.booking-id {
  font-size: 0.85rem;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
}

.admin-meta {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 14px;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.st-pending { background: #fef3c7; color: #92400e; }
.st-accepted { background: #dbeafe; color: #1e40af; }
.st-way { background: #e0f2fe; color: #0369a1; }
.st-reached { background: #d1fae5; color: #065f46; }
.st-started { background: #ede9fe; color: #5b21b6; }
.st-done { background: #dcfce7; color: #166534; }
.st-cancel { background: #fee2e2; color: #991b1b; }
.st-warn { background: #ffedd5; color: #9a3412; }
.st-default { background: #f1f5f9; color: #334155; }

.journey-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 18px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12px;
}

.journey-step {
  padding: 4px 8px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #64748b;
}

.journey-step.done {
  background: #bbf7d0;
  color: #14532d;
}

.journey-step.current {
  background: #2563eb;
  color: #fff;
  font-weight: 700;
}

.journey-step.todo {
  opacity: 0.75;
}

.journey-arrow {
  color: #94a3b8;
  user-select: none;
}

.journey-alert {
  margin: 10px 0;
  padding: 10px;
  background: #ffedd5;
  border-radius: 8px;
  font-size: 14px;
}

.journey-alert.cancelled {
  background: #fee2e2;
}

.admin-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .admin-grid-two {
    grid-template-columns: 1fr;
  }
}

.admin-ops-panel {
  margin-top: 12px;
  padding: 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

.admin-ops-panel h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #166534;
}

.ops-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.ops-list .ok { color: #15803d; font-weight: 600; }
.ops-list .warn { color: #b45309; font-weight: 600; }
.ops-list .muted { color: #64748b; }

.admin-driver-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.admin-assign {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
}

.admin-assign select {
  margin: 8px 8px 8px 0;
  padding: 8px;
  min-width: 200px;
}

.btn-assign {
  padding: 8px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-assign:hover {
  background: #1d4ed8;
}

.admin-error {
  color: #b91c1c;
  padding: 16px;
  background: #fef2f2;
  border-radius: 8px;
}