@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Work+Sans:wght@300;400;500;600&display=swap');

:root {
  --primary-color: #7e1113;
}

/* Typography */
.font-heading {
  font-family: 'PT Serif', serif;
}

.font-body {
  font-family: 'Work Sans', sans-serif;
}

/* Buttons */
.btn-primary {
  background-color: #7e1113;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #6a0e10;
}

.btn-secondary {
  background-color: white;
  color: #7e1113;
  border: 2px solid #7e1113;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: #7e1113;
  color: white;
}

/* Links */
.link-primary {
  color: #7e1113;
  text-decoration: underline;
}

.link-primary:hover {
  color: #6a0e10;
}

/* Calendar Enhancement Styles */
.date-input-container {
  position: relative;
}

.input-field[type="date"] {
  position: relative;
}

.input-field[type="date"].selected-start {
  border-color: #16a34a;
  background-color: #16a34a;
  color: white;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.input-field[type="date"].selected-end {
  border-color: #16a34a;
  background-color: #16a34a;
  color: white;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.input-field[type="date"].in-range {
  border-color: #16a34a;
  background-color: #16a34a;
  color: white;
}

/* Date range indicator */
.date-range-indicator {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background-color: #16a34a;
  display: none;
}

.date-range-indicator.active {
  display: block;
}

.footer-link {
  color: white;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #9ca3af;
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: white;
}

.input-field:focus {
  outline: none;
  border-color: #7e1113;
  box-shadow: 0 0 0 3px rgba(126, 17, 19, 0.1);
}

.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.hero-section {
  background-image: linear-gradient(rgba(126, 17, 19, 0.3), rgba(126, 17, 19, 0.3)), url('https://pensiuneakronstadt.ro/images/pensiunea-kronstadt-cazare-brasov-64.jpg');
  background-size: cover;
  background-position: center;
}

.room-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105;
}

.room-card img {
  @apply w-full h-48 object-cover;
}

.booking-form {
  @apply bg-white p-6 rounded-lg shadow-lg;
}

.date-picker {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#7e1113] focus:border-transparent;
}

.guest-selector {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#7e1113] focus:border-transparent;
}

.special-requests {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#7e1113] focus:border-transparent h-24 resize-none;
}

.voucher-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#7e1113] focus:border-transparent;
}

.price-display {
  @apply text-2xl font-bold text-[#7e1113];
}

.discount-display {
  @apply text-green-600 font-medium;
}

.loading {
  @apply opacity-50 pointer-events-none;
}

.error-message {
  @apply text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 mb-4;
}

.success-message {
  @apply text-green-600 bg-green-50 border border-green-200 rounded-lg p-3 mb-4;
}

.admin-sidebar {
  @apply bg-gray-800 text-white w-64 min-h-screen;
}

.admin-nav-item {
  @apply block px-4 py-3 hover:bg-gray-700 transition-colors;
}

.admin-nav-item.active {
  @apply bg-[#7e1113];
}

.table-responsive {
  @apply overflow-x-auto;
}

.table {
  @apply w-full border-collapse;
}

.table th {
  @apply bg-gray-50 px-4 py-3 text-left font-medium text-gray-700 border-b;
}

.table td {
  @apply px-4 py-3 border-b border-gray-200;
}

.status-confirmed {
  @apply bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs;
}

.status-cancelled {
  @apply bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs;
}

.status-paid {
  @apply bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs;
}

.status-pending {
  @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs;
}

/* Calendar styles */
.calendar-wrapper {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid #e5e7eb;
}

.calendar-header-day {
  padding: 16px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  border-right: 1px solid #e5e7eb;
}

.calendar-header-day:last-child {
  border-right: none;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
  min-height: 80px;
  padding: 8px;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  background-color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.calendar-day:last-child {
  border-right: none;
}

.calendar-day-number {
  font-weight: 600;
  font-size: 16px;
  color: #374151;
  margin-bottom: 4px;
}

.calendar-day-content {
  width: 100%;
  text-align: center;
  font-size: 10px;
}

.calendar-day.available {
  background-color: #f0fdf4;
  cursor: pointer;
  transition: all 0.2s ease;
}

.calendar-day.available:hover {
  background-color: #dcfce7;
  transform: scale(1.02);
}

.calendar-day.booked {
  background-color: #fef2f2;
}

.calendar-day.booked .calendar-day-number {
  color: #dc2626;
}

.calendar-day.blocked {
  background-color: #f9fafb;
}

.calendar-day.blocked .calendar-day-number {
  color: #6b7280;
}

.calendar-day.selected {
  background-color: #7e1113;
  color: white;
}

.calendar-day.selected .calendar-day-number {
  color: white;
}

.calendar-day.other-month {
  background-color: #fafafa;
  opacity: 0.5;
}

.calendar-day.other-month .calendar-day-number {
  color: #d1d5db;
}

.calendar-day.today {
  border: 2px solid #7e1113;
  box-shadow: 0 0 0 1px #7e1113;
}

.calendar-status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 2px auto;
}

.calendar-status-indicator.booked {
  background-color: #dc2626;
}

.calendar-status-indicator.blocked {
  background-color: #6b7280;
}

.calendar-room-title {
  font-weight: 600;
  font-size: 18px;
  color: #1f2937;
  margin-bottom: 16px;
  padding: 0 24px;
  border-bottom: 2px solid #7e1113;
  padding-bottom: 12px;
}

/* Loading Spinner */
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid #7e1113;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Admin Dashboard Styles */
.admin-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.admin-card:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.stat-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-left: 4px solid #7e1113;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 16px;
}

.stat-icon.blue { background-color: #dbeafe; color: #1d4ed8; }
.stat-icon.green { background-color: #dcfce7; color: #16a34a; }
.stat-icon.orange { background-color: #fed7aa; color: #ea580c; }
.stat-icon.purple { background-color: #e9d5ff; color: #9333ea; }

.chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}

.recent-booking-item {
  padding: 16px;
  border-left: 3px solid #7e1113;
  background: #f9fafb;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.recent-booking-item:hover {
  background: #f3f4f6;
  transform: translateX(4px);
}

.admin-section-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 2px solid #7e1113;
  display: inline-block;
}

/* Admin Sidebar Improvements */
.admin-sidebar {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #d1d5db;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  font-weight: 500;
}

.admin-nav-item:hover {
  background-color: rgba(55, 65, 81, 0.8);
  color: white;
  border-left-color: #7e1113;
}

.admin-nav-item.active {
  background-color: #7e1113;
  color: white;
  border-left-color: #ffffff;
}

.admin-nav-item span {
  margin-right: 12px;
  font-size: 18px;
}

/* Main Content Area */
.admin-main {
  background-color: #f8fafc;
  min-height: 100vh;
}

.admin-header {
  background: linear-gradient(90deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Tables */
.admin-table {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.admin-table th {
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 16px;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
}

.admin-table td {
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.admin-table tr:hover {
  background-color: #f9fafb;
}

/* Form Improvements */
.admin-form {
  background-color: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.admin-form-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* Status Badges */
.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-confirmed { background-color: #dcfce7; color: #166534; }
.status-cancelled { background-color: #fee2e2; color: #dc2626; }
.status-paid { background-color: #dbeafe; color: #1d4ed8; }
.status-pending { background-color: #fef3c7; color: #d97706; }

/* Responsive utilities */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  
  .booking-form {
    padding: 16px;
  }
  
  .admin-sidebar {
    width: 100%;
    position: relative;
  }
  
  .chart-container {
    height: 250px;
  }
  
  .admin-form {
    padding: 24px;
  }
  
  .stat-card {
    text-align: center;
  }
  
  .stat-icon {
    margin: 0 auto 12px auto;
  }
}