:root {
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

.login-screen { min-height: 100svh; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(ellipse at top, #dbeafe, transparent 65%), #f1f5f9; }
.login-card { width: 100%; max-width: 27rem; padding: 2rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 1.5rem; box-shadow: 0 20px 60px #0f172a14; }
.login-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: #0f172a; border-radius: 1rem; font-size: 1.8rem; margin-bottom: 1.5rem; }
.login-eyebrow { font-size: .7rem; color: #0f5bd7; text-transform: uppercase; font-weight: 700; letter-spacing: .14em; }
.login-card h1 { font-size: 1.9rem; line-height: 1.15; font-weight: 700; color: #0f172a; letter-spacing: -.035em; margin-top: .6rem; }
.login-description { font-size: .9rem; line-height: 1.6; color: #475569; margin: 1rem 0 1.6rem; }
.login-card .action-button { width: 100%; margin-top: 1rem; }
.login-message { background: #fff1f2; color: #9f1239; border-radius: .6rem; padding: .75rem; font-size: .85rem; margin-top: .75rem; }
.login-footer { margin-top: 1.5rem; color: #64748b; font-size: .75rem; text-align: center; }

body { font-size: 16px; }

.button-label-compact { display: none; }
.week-label-compact { display: none; }

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}

.action-button,
.secondary-button,
.danger-button,
.text-button,
.icon-button,
.view-button {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-content: center;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.action-button {
  min-height: 2.75rem;
  gap: 0.45rem;
  border-radius: 0.8rem;
  background: #0f5bd7;
  color: #fff;
  padding: 0.65rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 7px 15px rgba(15, 91, 215, 0.2);
}

.action-button:hover { background: #0b4ebd; }
.action-button:active { transform: translateY(1px); }
.action-button svg { height: 1.05rem; width: 1.05rem; }
button:disabled {
  cursor: not-allowed;
  opacity: .6;
  transform: none;
}

.secondary-button,
.danger-button {
  min-height: 2.75rem;
  border: 1px solid #d8e0ec;
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.secondary-button { background: #fff; color: #334155; }
.secondary-button:hover { background: #f8fafc; border-color: #b9c6d7; }
.danger-button { background: #fff; color: #be123c; border-color: #fecdd3; }
.danger-button:hover { background: #fff1f2; border-color: #fda4af; }

.text-button {
  min-height: 2.75rem;
  border-radius: 0.65rem;
  color: #0f5bd7;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.text-button:hover { background: #eff6ff; }

.icon-button {
  height: 2.75rem;
  width: 2.75rem;
  flex: 0 0 2.75rem;
  border-radius: 0.7rem;
  background: #fff;
  color: #334155;
}
.icon-button:hover { background: #f1f5f9; }
.icon-button svg { height: 1.25rem; width: 1.25rem; }

.field-label {
  color: #334155;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
}

.field-control {
  width: 100%;
  min-height: 2.8rem;
  appearance: auto;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
}

.field-control::placeholder { color: #94a3b8; }
.field-control:focus, button:focus-visible, input:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.25); outline-offset: 2px; border-color: #2563eb; }
.field-control[aria-invalid="true"] { border-color: #e11d48; }
.picker-input {
  cursor: pointer;
  padding-right: 2.85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 2v3m8-3v3M3.5 9.5h17M5.8 4.5h12.4A1.8 1.8 0 0 1 20 6.3v12A1.8 1.8 0 0 1 18.2 20H5.8A1.8 1.8 0 0 1 4 18.2v-12a1.8 1.8 0 0 1 1.8-1.8Z'/%3E%3C/svg%3E");
  background-position: right .8rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
}

.flatpickr-calendar {
  border: 1px solid #d8e0ec;
  border-radius: 1rem;
  box-shadow: 0 18px 36px rgba(15, 23, 42, .18);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}
.booking-dialog .flatpickr-wrapper { display: block; width: 100%; }
.booking-dialog .flatpickr-calendar.static { max-width: calc(100vw - 4rem); }
.booking-dialog #timed-fields label:last-child .flatpickr-calendar.static,
.booking-dialog #all-day-fields label:last-child .flatpickr-calendar.static { left: auto; right: 0; }
.flatpickr-months .flatpickr-month { color: #0f172a; fill: #0f172a; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }
.flatpickr-weekday { color: #475569; font-weight: 700; }
.flatpickr-day { border-radius: .55rem; }
.flatpickr-day.today { border-color: #0f5bd7; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: #0f5bd7; border-color: #0f5bd7; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: #eff6ff; }

.view-button {
  min-height: 2.75rem;
  border-radius: 0.55rem;
  color: #64748b;
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
}
.view-button.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

.booking-dialog::backdrop { background: rgba(15, 23, 42, 0.48); }
.booking-dialog { max-height: calc(100vh - 2rem); overflow: hidden; }
.booking-dialog form { overscroll-behavior: contain; }
.booking-dialog[open] { animation: dialog-in 160ms ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.detail-label { color: #64748b; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.car-dot { display: inline-block; height: 0.7rem; width: 0.7rem; border-radius: 999px; }

/* FullCalendar: retained as regular CSS so custom colors also work in production builds. */
.fc { --fc-border-color: #e2e8f0; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f8fafc; --fc-today-bg-color: #eff6ff; font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
.fc .fc-toolbar { display: none; }
.fc .fc-col-header-cell { background: #f8fafc; }
.fc .fc-col-header-cell-cushion { color: #475569; padding: .7rem .2rem; font-size: .75rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.fc .fc-daygrid-day-number { color: #334155; font-size: .8125rem; font-weight: 600; padding: .45rem .55rem; text-decoration: none; }
.fc .fc-daygrid-day-number:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 1px; border-radius: .4rem; }
.fc .fc-day-other .fc-daygrid-day-number { color: #aab5c5; }
.fc .fc-daygrid-day-frame { min-height: 7.25rem; }
.fc .fc-daygrid-day.fc-day-today { background: #eff6ff; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { display: grid; height: 1.65rem; min-width: 1.65rem; place-items: center; border-radius: 999px; background: #0f5bd7; color: #fff; }
.fc .fc-daygrid-day-events { margin: 1px 2px 0; }
.fc .fc-daygrid-event { border: 1px solid transparent; border-radius: .45rem; cursor: pointer; margin: 2px 0; min-height: 2.75rem; min-width: 0; padding: 3px 5px; white-space: normal; }
.fc .fc-event-main { min-width: 0; overflow: visible; }
.vehicle-event { font-size: .75rem; font-weight: 700; line-height: 1.15; }
.reservation-event-content { display: grid; gap: .08rem; min-width: 0; }
.event-meta { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; opacity: .86; overflow-wrap: anywhere; }
.event-time { display: none; }
.event-person { display: block; font-size: .75rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.fc .fc-more-link { color: #0f5bd7; font-size: .75rem; font-weight: 700; padding: .2rem .35rem; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: #64748b; font-size: .75rem; }
.fc .fc-timegrid-col.fc-day-today { background: #eff6ff; }
.fc .fc-timegrid-event { border: 1px solid transparent; border-radius: .45rem; box-shadow: 0 1px 2px rgba(15,23,42,.12); padding: 2px; }
.fc .fc-timegrid-event .fc-event-time { font-size: .7rem; font-weight: 700; }
.fc .fc-timegrid-event .fc-event-title { font-size: .72rem; font-weight: 700; }

@media (max-width: 639px) {
  .booking-dialog .flatpickr-calendar.static { width: 100%; max-width: 100%; }
  .booking-dialog .flatpickr-innerContainer,
  .booking-dialog .flatpickr-rContainer,
  .booking-dialog .flatpickr-days,
  .booking-dialog .dayContainer { width: 100%; min-width: 0; max-width: 100%; }
  .button-label-wide { display: none; }
  .button-label-compact { display: inline; }
  .week-label-wide { display: none; }
  .week-label-compact { display: inline; }
  .fc .fc-col-header-cell-cushion { font-size: .62rem; }
  .fc .fc-daygrid-day-number { font-size: .72rem; padding: .35rem; }
  .fc .fc-daygrid-day-frame { min-height: 7.4rem; }
  .vehicle-event { font-size: .65rem; }
  .fc .fc-daygrid-day-events { margin: 0 1px; }
  .fc .fc-daygrid-event { margin: 2px 0; min-height: 2.45rem; padding: 3px; }
  .reservation-event-content.is-compact { gap: .05rem; }
  .reservation-event-content.is-compact .event-meta { font-size: .57rem; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reservation-event-content.is-compact .event-time { display: block; font-size: .58rem; font-weight: 700; line-height: 1.05; opacity: .86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reservation-event-content.is-compact .event-person { font-size: .68rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 640px) {
  .calendar-titlebar { padding-top: .8rem; padding-bottom: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}