/* 
 * Bootstrap Italia Custom Theme for Partinico Waste Collection PWA
 * Preserves the green theme (#005e25) and waste type color coding
 */

:root {
  /* Primary Brand Colors - Override Bootstrap Italia defaults */
  --bs-primary: #005e25;
  --bs-primary-rgb: 0, 94, 37;
  --bs-primary-text-emphasis: #003d1a;
  --bs-primary-bg-subtle: rgba(0, 94, 37, 0.1);
  --bs-primary-border-subtle: rgba(0, 94, 37, 0.25);
  
  /* Comune di Partinico Brand Colors */
  --comune-green: #005e25;
  --comune-green-light: rgba(0, 94, 37, 0.1);
  --comune-green-hover: #004d1f;
  --comune-green-dark: #003d1a;
  
  /* Waste Type Color System - Preserved from original */
  --waste-organico: #8B4513;
  --waste-organico-rgb: 139, 69, 19;
  --waste-secco: #808080;
  --waste-secco-rgb: 128, 128, 128;
  --waste-plastica: #FFD700;
  --waste-plastica-rgb: 255, 215, 0;
  --waste-carta: #4169E1;
  --waste-carta-rgb: 65, 105, 225;
  --waste-vetro: #2E8B57;
  --waste-vetro-rgb: 46, 139, 87;
  --waste-nessuna: #FF0000;
  --waste-nessuna-rgb: 255, 0, 0;
  
  /* Bootstrap Italia Overrides */
  --bs-body-bg: #f5f5f5;
  --bs-body-color: #333;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 8px;
  --bs-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --bs-box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Primary Button Overrides */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--comune-green);
  --bs-btn-border-color: var(--comune-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--comune-green-hover);
  --bs-btn-hover-border-color: var(--comune-green-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--comune-green-dark);
  --bs-btn-active-border-color: var(--comune-green-dark);
}

/* Header Customizations */
.it-header-wrapper .it-header-slim-wrapper {
  background-color: var(--comune-green);
}

.it-header-wrapper .it-brand-title {
  color: white;
  font-size: 1.8rem;
  margin: 0;
}

/* Card Header Customizations */
.card-header.bg-primary {
  background-color: var(--comune-green) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.125);
}

/* Waste Type Badges */
.badge-waste {
  font-size: 3.2rem;
  font-weight: bold;
  padding: 20px 35px;
  border-radius: 8px;
  color: white;
  text-align: center;
  display: inline-block;
  min-width: 80%;
}

.badge-waste.small {
  font-size: 1.2rem;
  padding: 8px 15px;
  border-radius: 4px;
}

.badge-waste.organico { 
  background-color: var(--waste-organico); 
}

.badge-waste.secco-residuale { 
  background-color: var(--waste-secco); 
}

.badge-waste.plastica { 
  background-color: var(--waste-plastica); 
  color: #333;
}

.badge-waste.carta-cartone { 
  background-color: var(--waste-carta); 
}

.badge-waste.vetro-lattine { 
  background-color: var(--waste-vetro); 
}

.badge-waste.nessuna-raccolta { 
  background-color: var(--waste-nessuna); 
}

/* Legend Color Indicators */
.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 10px;
}

.legend-color.organico { background-color: var(--waste-organico); }
.legend-color.secco-residuale { background-color: var(--waste-secco); }
.legend-color.plastica { background-color: var(--waste-plastica); }
.legend-color.carta-cartone { background-color: var(--waste-carta); }
.legend-color.vetro-lattine { background-color: var(--waste-vetro); }
.legend-color.nessuna-raccolta { background-color: var(--waste-nessuna); }

/* Pickup Cards with Top Border Indicators */
.pickup-card {
  position: relative;
  overflow: hidden;
}

.pickup-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #ccc;
}

.pickup-card.organico::before { background-color: var(--waste-organico); }
.pickup-card.secco-residuale::before { background-color: var(--waste-secco); }
.pickup-card.plastica::before { background-color: var(--waste-plastica); }
.pickup-card.carta-cartone::before { background-color: var(--waste-carta); }
.pickup-card.vetro-lattine::before { background-color: var(--waste-vetro); }

/* Calendar Grid Layout - High Specificity to Override Bootstrap */
#calendar-container .modal-body .calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 5px !important;
  padding: 15px !important;
  max-width: 100%;
  width: 100%;
}

.modal-body .calendar-grid .calendar-day-header {
  text-align: center;
  font-weight: bold;
  padding: 8px 5px;
  color: var(--comune-green);
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.modal-body .calendar-grid .calendar-day {
  position: relative;
  aspect-ratio: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: white;
  min-height: 45px;
  font-weight: 500;
  padding: 5px;
}

.modal-body .calendar-grid .calendar-day.empty {
  border: none !important;
  cursor: default !important;
  background: transparent !important;
  visibility: hidden;
}

.modal-body .calendar-grid .calendar-day:not(.empty):hover {
  background-color: var(--comune-green-light) !important;
  border-color: var(--comune-green) !important;
  transform: scale(1.05);
}

.modal-body .calendar-grid .calendar-day.selected {
  background-color: var(--comune-green) !important;
  color: white !important;
  border-color: var(--comune-green-dark) !important;
  transform: scale(1.02);
}

.modal-body .calendar-grid .calendar-day.selected:hover {
  background-color: var(--comune-green-hover) !important;
}

/* Waste Type Indicators on Calendar Days */
.calendar-day .waste-indicator {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 4px;
  border-radius: 2px;
  opacity: 0.8;
}

.waste-indicator.organico { background-color: var(--waste-organico); }
.waste-indicator.secco-residuale { background-color: var(--waste-secco); }
.waste-indicator.plastica { background-color: var(--waste-plastica); }
.waste-indicator.carta-cartone { background-color: var(--waste-carta); }
.waste-indicator.vetro-lattine { background-color: var(--waste-vetro); }
.waste-indicator.nessuna-raccolta { background-color: var(--waste-nessuna); }

/* Calendar Modal Customizations */
#calendar-container .modal-header {
  background-color: #f8f9fa;
  border-bottom: 2px solid var(--comune-green);
}

#calendar-container .modal-title {
  color: var(--comune-green);
  font-weight: bold;
}

/* Calendar Navigation Buttons */
#calendar-container .btn-primary {
  background-color: var(--comune-green) !important;
  border-color: var(--comune-green) !important;
  color: white !important;
}

#calendar-container .btn-primary:hover {
  background-color: var(--comune-green-hover) !important;
  border-color: var(--comune-green-hover) !important;
}

/* Responsive Calendar */
@media (max-width: 768px) {
  #calendar-container .modal-dialog {
    margin: 1rem;
    max-width: calc(100vw - 2rem) !important;
  }
  
  #calendar-container .modal-body {
    padding: 0.75rem !important;
  }
  
  #calendar-container .modal-body .calendar-grid {
    gap: 1px !important;
    padding: 5px !important;
    width: 100%;
    max-width: 100%;
  }
  
  .modal-body .calendar-grid .calendar-day {
    min-height: 32px !important;
    font-size: 0.85rem !important;
    padding: 2px !important;
  }
  
  .modal-body .calendar-grid .calendar-day-header {
    font-size: 0.75rem !important;
    padding: 4px 2px !important;
    margin-bottom: 2px;
  }
  
  .calendar-day .waste-indicator {
    width: 16px !important;
    height: 3px !important;
  }
}

@media (max-width: 576px) {
  #calendar-container .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem) !important;
  }
  
  #calendar-container .modal-body {
    padding: 0.5rem !important;
  }
  
  #calendar-container .modal-body .calendar-grid {
    gap: 1px !important;
    padding: 3px !important;
  }
  
  .modal-body .calendar-grid .calendar-day {
    min-height: 28px !important;
    font-size: 0.8rem !important;
    padding: 1px !important;
  }
  
  .modal-body .calendar-grid .calendar-day-header {
    font-size: 0.7rem !important;
    padding: 3px 1px !important;
  }
  
  .calendar-day .waste-indicator {
    width: 14px !important;
    height: 2px !important;
    bottom: 1px;
  }
}

@media (max-width: 480px) {
  .modal-body .calendar-grid .calendar-day {
    min-height: 26px !important;
    font-size: 0.75rem !important;
  }
  
  .modal-body .calendar-grid .calendar-day-header {
    font-size: 0.65rem !important;
    padding: 2px 1px !important;
  }
}

/* Install Button Customizations */
.install-button {
  background-color: white;
  color: var(--comune-green);
  border: 2px solid var(--comune-green);
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.install-button:hover {
  background-color: var(--comune-green);
  color: white;
  transform: translateY(-1px);
}

.install-button:active {
  transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .it-header-wrapper .it-header-slim-wrapper-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .badge-waste {
    font-size: 2.5rem;
    width: 100%;
    padding: 15px 20px;
  }
  
  .install-button {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .it-brand-title {
    font-size: 1.2rem !important;
  }
  
  .badge-waste {
    font-size: 2.2rem;
  }
}

/* Dark mode support (if needed in future)
@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #ffffff;
  }
} */