/* SmartPark — Architectural UI & Status System */
:root {
  --sp-occupied: #475569;
  --sp-unused: #f59e0b;
  --sp-released: #10b981;
  --sp-reallocated: #06b6d4;
  --sp-shared: #14b8a6;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}

/* Parking Stall Card Styling */
.bay-tile {
  position: relative;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  user-select: none;
}

.bay-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -4px rgba(15, 23, 42, 0.16);
  z-index: 5;
}

/* Status Color Themes for the 100 Bays */
.bay-OCCUPIED {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1.5px solid #475569;
  color: #f1f5f9;
}

.bay-UNUSED_ALLOCATED {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #f59e0b;
  color: #78350f;
}

.bay-TEMP_RELEASED {
  background: linear-gradient(180deg, #d1fae5 0%, #6ee7b7 100%);
  border: 2px solid #059669;
  color: #064e3b;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.16);
}

.bay-REALLOCATED {
  background: linear-gradient(180deg, #cffafe 0%, #67e8f9 100%);
  border: 2px solid #0891b2;
  color: #164e63;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
}

.bay-SHARED_OPEN {
  background: linear-gradient(180deg, #ccfbf1 0%, #99f6e4 100%);
  border: 1.5px solid #0d9488;
  color: #134e4a;
}

/* Spotlight ring for Hero Demo Bay A-012 */
.bay-spotlight {
  animation: spotlightPulse 2.4s infinite ease-in-out;
}

@keyframes spotlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.65), 0 4px 10px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.35), 0 6px 16px rgba(99, 102, 241, 0.32);
  }
}

/* Asphalt Drive Lane Divider */
.asphalt-lane {
  background: repeating-linear-gradient(
    90deg,
    #cbd5e1 0px,
    #cbd5e1 14px,
    transparent 14px,
    transparent 28px
  );
  height: 2px;
}

/* Digital Pass Perforation */
.pass-ticket {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f3d4c 100%);
}

/* Smooth modal backdrop */
.modal-backdrop {
  backdrop-filter: blur(4px);
}

/* Custom subtle scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}