:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
  background-color: #111827;
  overscroll-behavior: none;
}

.fi-body {
  padding-bottom: var(--safe-bottom);
}

/* Compact layout on small screens */
@media (max-width: 640px) {
  .fi-main {
    padding-top: 0 !important;
  }

  .fi-page-header {
    padding-top: 8px !important;
  }

  .fi-sidebar {
    background-color: #111827;
  }

  .fi-main,
  .fi-page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fi-page-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fi-section {
    border-radius: 16px !important;
  }

  .fi-wi,
  .fi-ta,
  .fi-section-content {
    border-radius: 16px !important;
  }

  .fi-wi-stats-overview-card {
    padding: 16px !important;
    min-height: auto !important;
  }

  .fi-topbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fi-topbar > nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fi-topbar .fi-topbar-search {
    width: 100%;
  }

  .fi-ta-content {
    overflow-x: auto;
  }
}

/* Safe-area handling for PWA standalone */
@media (max-width: 640px) and (display-mode: standalone) {
  .fi-topbar {
    background-color: #111827;
  }

  .fi-topbar > nav {
    height: calc(4rem + var(--safe-top));
    padding-top: var(--safe-top);
  }

  .fi-sidebar-header {
    height: calc(4rem + var(--safe-top));
    padding-top: var(--safe-top);
  }
}

/* FullCalendar mobile tuning */
@media (max-width: 640px) {
  .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .fc .fc-toolbar-title {
    font-size: 1rem;
    line-height: 1.2;
  }

  .fc .fc-button {
    padding: 4px 6px;
    font-size: 0.72rem;
  }

  .fc .fc-daygrid-day-number {
    font-size: 0.72rem;
  }

  .fc .fc-col-header-cell-cushion {
    padding: 4px 2px;
    font-size: 0.72rem;
  }

  .fc .fc-daygrid-event {
    font-size: 0.72rem;
  }

  .fc .fc-scroller-harness {
    overflow-x: hidden;
  }
}

/* FullCalendar timeGrid morning/afternoon background */
.fc .fc-bg-event.bg-mattina {
  background-color: rgba(34, 197, 94, 0.08) !important;
}

.fc .fc-bg-event.bg-pomeriggio {
  background-color: rgba(251, 146, 60, 0.08) !important;
}

.fc .fc-timegrid-slot[data-time="13:30:00"],
.fc .fc-timegrid-slot-label[data-time="13:30:00"] {
  border-top: 2px solid rgba(251, 146, 60, 0.45);
}

.fc .fc-timegrid-slot-label[data-time="06:00:00"] .fc-timegrid-slot-label-cushion::after {
  content: "  Mattina";
  font-size: 0.7rem;
  opacity: 0.7;
  font-weight: 600;
}

.fc .fc-timegrid-slot-label[data-time="13:30:00"] .fc-timegrid-slot-label-cushion::after {
  content: "  Pomeriggio";
  font-size: 0.7rem;
  opacity: 0.7;
  font-weight: 600;
}

.fc .fc-timegrid-slot {
  height: 3.2em;
}

.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label {
  font-size: 0.85rem;
}

.fc .fc-timegrid-event {
  font-size: 0.85rem;
}

/* Stack overlapping events vertically within the same time slot */
.fc-timegrid .fc-timegrid-event-harness {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

.fc-timegrid .fc-timegrid-event {
  width: calc(100% - 2px) !important;
}