/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Tailwind CSS is loaded separately via stylesheet_link_tag */

/* Calendar Styles */

/* Monthly Calendar */
.calendar-grid {
  @apply grid grid-cols-7 gap-px border border-gray-200 rounded-md overflow-hidden;
}

.calendar-day {
  @apply px-3 py-2 border border-gray-200 text-sm text-center;
}

.calendar-day-header {
  @apply px-3 py-2 bg-gray-50 text-gray-600 text-sm font-medium text-center;
}

.calendar-day-outside {
  @apply bg-gray-50 text-gray-400;
}

.calendar-day-inside {
  @apply bg-white text-gray-900;
}

.calendar-day-number {
  @apply font-medium;
}

.calendar-day-reservations {
  @apply text-xs text-gray-500;
}

.calendar-day-reservation-indicator {
  @apply inline-block w-2 h-2 rounded-full ml-1;
}

.calendar-day-reservation-pending {
  @apply bg-yellow-500;
}

.calendar-day-reservation-confirmed {
  @apply bg-green-500;
}

.calendar-day-reservation-cancelled {
  @apply bg-red-500;
}

.calendar-day-reservation-completed {
  @apply bg-blue-500;
}

/* Daily View */
.daily-view {
  @apply mt-6 bg-white shadow overflow-hidden sm:rounded-md;
}

.daily-view-header {
  @apply px-4 py-5 sm:px-6;
}

.daily-view-title {
  @apply text-lg leading-6 font-medium text-gray-900;
}

.daily-view-date {
  @apply text-xl font-semibold text-gray-900;
}

.daily-view-time-slot {
  @apply bg-white shadow overflow-hidden sm:rounded-md mb-4;
}

.daily-view-time-slot-header {
  @apply px-4 py-5 sm:px-6;
}

.daily-view-time-slot-title {
  @apply text-lg leading-6 font-medium text-gray-900;
}

.daily-view-reservation {
  @apply bg-white shadow overflow-hidden sm:rounded-md mb-4;
}

.daily-view-reservation-header {
  @apply px-4 py-5 sm:px-6;
}

.daily-view-reservation-details {
  @apply flex items-center space-x-4;
}

.daily-view-reservation-guest-count {
  @apply h-12 w-12 rounded-full bg-gray-300 flex items-center justify-center;
}

.daily-view-reservation-guest-count-text {
  @apply text-lg font-medium text-gray-700;
}

.daily-view-reservation-name {
  @apply text-sm font-medium text-gray-900 truncate;
}

.daily-view-reservation-status {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.daily-view-reservation-status-pending {
  @apply bg-yellow-100 text-yellow-800;
}

.daily-view-reservation-status-confirmed {
  @apply bg-green-100 text-green-800;
}

.daily-view-reservation-status-cancelled {
  @apply bg-red-100 text-red-800;
}

.daily-view-reservation-status-completed {
  @apply bg-blue-100 text-blue-800;
}

.daily-view-reservation-contact {
  @apply mt-1 flex items-center space-x-4 text-sm text-gray-500;
}

.daily-view-reservation-special-requests {
  @apply mt-1 text-sm text-gray-600;
}

.daily-view-reservation-actions {
  @apply flex items-center space-x-2;
}

.daily-view-reservation-action-button {
  @apply inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rosa-salmon;
}