:root{
  --bg0:#f7f8fc;
  --bg1:#eef2ff;
  --card-radius:20px;
  --shadow: 0 12px 30px rgba(15,23,42,.08);
  --shadow2: 0 10px 22px rgba(15,23,42,.10);
  --border: rgba(15,23,42,.08);
  --muted: rgba(15,23,42,.62);
  --text: #0f172a;
  --accent: #4f46e5; /* indigo */
  --accent2:#22c55e; /* green */
}

html,body{height:100%;}
body{
  color:var(--text);
  background:
    radial-gradient(1100px 500px at 15% 0%, rgba(79,70,229,.18), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(34,197,94,.14), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 42%, #f9fafb 100%);
}

.container{ max-width: 1100px; }

.card{
  border-radius: var(--card-radius);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
}

.navbar{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(10px);
}

.navbar-brand{
  letter-spacing: .2px;
}

.btn{
  border-radius: 14px;
}
.btn-primary{
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: none;
  box-shadow: 0 10px 20px rgba(79,70,229,.22);
}
.btn-primary:hover{ filter: brightness(0.98); transform: translateY(-1px); }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger{
  border-color: var(--border);
}
.btn-light{
  background: rgba(255,255,255,.72);
}
.btn-light:hover{ background: rgba(255,255,255,.95); }

.small, .text-muted{ color: var(--muted) !important; }

.header-datetime{
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
}

.table > :not(caption) > * > *{ vertical-align: middle; }
.table thead th{ color: var(--muted); font-weight: 600; }
.table-hover tbody tr:hover{ background: rgba(79,70,229,.04); }

.queue-item{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Araç durum renkleri */
.status-border{ border-left: 6px solid transparent; }
.status-active.status-border{ border-left-color: rgba(34,197,94,.9); }
.status-leave.status-border{ border-left-color: rgba(245,158,11,.95); }
.status-service.status-border{ border-left-color: rgba(239,68,68,.9); }

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: rgba(15,23,42,.04);
}
.status-active.status-badge{ color: #166534; background: rgba(34,197,94,.12); }
.status-leave.status-badge{ color: #92400e; background: rgba(245,158,11,.14); }
.status-service.status-badge{ color: #991b1b; background: rgba(239,68,68,.12); }

.vehicle-btn{
  display:block;
  text-decoration:none;
  color: var(--text);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.vehicle-btn:hover{
  background: rgba(255,255,255,.92);
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}
.queue-item:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}

.queue-rank{
  width:56px;height:56px;
  border-radius: 18px;
  display:flex;align-items:center;justify-content:center;
  font-weight: 900;
  color:#fff;
  flex:0 0 56px;
  background: linear-gradient(135deg, #111827, #4f46e5);
  box-shadow: 0 14px 26px rgba(15,23,42,.22);
}
.queue-rank span{ font-size: 1.15rem; letter-spacing:.4px; }

.amount-pill{
  font-variant-numeric: tabular-nums;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  display: inline-block;
}

.footer-soft{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}


/* Scrollable list containers */
.scroll-box{ overflow:auto; scrollbar-gutter: stable; }
.scroll-queue{ max-height: 62vh; padding-right: 6px; }
.scroll-vehicles{ max-height: 62vh; padding-right: 6px; }
@media (max-width: 992px){ .scroll-queue{ max-height: 52vh; } .scroll-vehicles{ max-height: 42vh; } }