/* ---------- Fleet calendar polish ----------
 * Tightens the dashboard calendar: denser rows, sticky vehicle column,
 * segmented week/month toggle, today highlight on body cells, note
 * indicator dot. Loaded after styles.css so it can override the
 * historical rules.
 */

/* ===== Density ===== */
.dashboard-content td.fleet-calendar-cell .fleet-calendar-cell-fill {
  /* Was 0.35rem 0.08rem — too tall. Compact rows surface more vehicles
   * in a single viewport so admins don't have to scroll endlessly. */
  padding: 0.22rem 0.08rem;
  min-height: 1.65rem;
}

.fleet-calendar-car-cell {
  padding: 0.35rem 0.55rem !important;
  vertical-align: middle;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* The TD becomes a flex container so the thumbnail + text layout works
   * without extra wrapper divs. */
}

.fleet-calendar-car-name {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.fleet-calendar-car-slug {
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.fleet-calendar-day-head {
  padding: 0.3rem 0.18rem !important;
}

/* ===== Sticky left column ===== */
.fleet-calendar-table .calendar-head-car,
.fleet-calendar-table .calendar-car-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  background: rgba(10, 14, 19, 0.96);
  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.45);
}

.fleet-calendar-table thead th.calendar-head-car {
  z-index: 4; /* sit above body cells when scrolled */
}

/* ===== Car thumbnail in the sticky column ===== */
.fleet-calendar-car-thumb {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.fleet-calendar-car-thumb--placeholder {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}

.fleet-calendar-car-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ===== Alternating row tint for scanability ===== */
.fleet-calendar-table tbody tr.is-alt td:not(.calendar-car-cell) {
  background-color: rgba(255, 255, 255, 0.015);
}

/* ===== Today highlight (body cells) =====
 * The thead is already styled with a gold underline; this extends it
 * down the entire column so the eye can trace today vertically. */
.fleet-calendar-table td.fleet-calendar-cell.is-today {
  box-shadow:
    inset 1px 0 0 var(--gold, #d4af37),
    inset -1px 0 0 var(--gold, #d4af37);
}

.fleet-calendar-table tbody tr:first-child td.fleet-calendar-cell.is-today {
  box-shadow:
    inset 1px 1px 0 var(--gold, #d4af37),
    inset -1px 0 0 var(--gold, #d4af37);
}

.fleet-calendar-table tbody tr:last-child td.fleet-calendar-cell.is-today {
  box-shadow:
    inset 1px 0 0 var(--gold, #d4af37),
    inset -1px -1px 0 var(--gold, #d4af37);
}

/* Faint tint on today's weekday column to make it findable mid-scan. */
.fleet-calendar-table td.fleet-calendar-cell.is-today.is-free {
  background: rgba(212, 175, 55, 0.06);
}

/* ===== Weekend column tint (subtle) ===== */
.fleet-calendar-table td.fleet-calendar-cell.is-weekend.is-free {
  background: rgba(255, 255, 255, 0.02);
}

/* ===== Note indicator dot ===== */
.fleet-calendar-note-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-light, #ffd98a);
  box-shadow: 0 0 0 1px rgba(10, 14, 19, 0.7);
  pointer-events: none;
}

/* ===== Segmented week/month control ===== */
.fleet-calendar-segmented {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.fleet-calendar-segmented-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}

.fleet-calendar-segmented-btn:hover {
  color: var(--ink);
}

.fleet-calendar-segmented-btn.is-active {
  background: var(--accent, #d4af37);
  color: var(--dark-bg, #0a0e13);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.fleet-calendar-segmented-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Today button accent ===== */
.fleet-calendar-today-btn {
  font-weight: 700;
}

/* ===== Smaller on mobile ===== */
@media (max-width: 720px) {
  .fleet-calendar-car-thumb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
  .fleet-calendar-car-name {
    font-size: 0.72rem;
  }
  .fleet-calendar-car-slug {
    display: none; /* save horizontal space on phones */
  }
  .fleet-calendar-table .calendar-head-car,
  .fleet-calendar-table .calendar-car-cell {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
  }
  .fleet-calendar-segmented-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.7rem;
  }
}