/* ============================================================================
   ALBA DatePicker Component
   Clean, modern datepicker with Soomgo-inspired design
   Mobile-first approach with desktop dropdown
   ============================================================================ */

/* Variables */
:root {
  --alba-primary: #6C5CE7;
  --alba-border: #EAEDEF;
  --alba-text: #2D3436;
  --alba-text-light: #636E72;
  --alba-bg: #FFFFFF;
  --alba-sunday: #D63031;
  --alba-saturday: #0984E3;
  --alba-disabled: #DFE6E9;
  --alba-hover: #F5F3FF;
  --alba-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   Overlay / Backdrop
   ============================================================================ */

.alba-datepicker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.alba-datepicker-overlay.active {
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  opacity: 1;
}

/* ============================================================================
   Main Container
   ============================================================================ */

.alba-datepicker {
  position: absolute;
  background-color: var(--alba-bg);
  border-radius: 8px;
  border: 1px solid var(--alba-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  font-family: inherit;
  font-size: 14px;
  color: var(--alba-text);
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* Desktop positioning */
@media (min-width: 768px) {
  .alba-datepicker {
    position: absolute;
    top: auto;
    left: 0;
    min-width: 320px;
    max-width: 360px;
    animation: alba-fade-scale-in 0.2s ease-out;
  }

  .alba-datepicker.hidden {
    display: none;
  }
}

/* Mobile styling (bottom sheet) */
@media (max-width: 767px) {
  .alba-datepicker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    animation: alba-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .alba-datepicker.hidden {
    display: none;
  }
}

/* ============================================================================
   Header (Year/Month Navigation)
   ============================================================================ */

.alba-dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--alba-border);
  background-color: #FAFBFC;
}

.alba-dp-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--alba-text);
  flex: 1;
  text-align: center;
  letter-spacing: -0.3px;
}

.alba-dp-arrow {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--alba-text-light);
  transition: var(--alba-transition);
  border-radius: 6px;
  font-size: 18px;
}

.alba-dp-arrow:hover {
  background-color: var(--alba-hover);
  color: var(--alba-primary);
}

.alba-dp-arrow:active {
  transform: scale(0.95);
}

.alba-dp-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   Weekdays Header
   ============================================================================ */

.alba-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--alba-text-light);
  background-color: #FAFBFC;
}

.alba-dp-weekday {
  padding: 8px;
}

.alba-dp-weekday.sunday {
  color: var(--alba-sunday);
}

.alba-dp-weekday.saturday {
  color: var(--alba-saturday);
}

/* ============================================================================
   Date Grid
   ============================================================================ */

.alba-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 8px;
  background-color: var(--alba-bg);
}

.alba-dp-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--alba-text);
  transition: var(--alba-transition);
  position: relative;
  margin: 2px;
}

.alba-dp-cell:not(.alba-dp-cell--disabled):not(.alba-dp-cell--other-month) {
  cursor: pointer;
}

.alba-dp-cell:hover:not(.alba-dp-cell--disabled) {
  background-color: var(--alba-hover);
}

.alba-dp-cell:active:not(.alba-dp-cell--disabled) {
  transform: scale(0.95);
}

/* Today highlight - purple circle outline */
.alba-dp-cell--today:not(.alba-dp-cell--selected) {
  border: 2px solid var(--alba-primary);
  font-weight: 600;
  color: var(--alba-primary);
}

/* Selected date - filled purple background */
.alba-dp-cell--selected {
  background-color: var(--alba-primary);
  color: white;
  font-weight: 600;
}

.alba-dp-cell--selected:hover {
  background-color: #5F4DE6;
}

/* Range mode - light background for in-range dates */
.alba-dp-cell--range {
  background-color: rgba(108, 92, 231, 0.1);
  color: var(--alba-text);
}

.alba-dp-cell--range-start,
.alba-dp-cell--range-end {
  background-color: var(--alba-primary);
  color: white;
}

/* Other month dates (grayed out) */
.alba-dp-cell--other-month {
  color: var(--alba-disabled);
  cursor: default;
}

/* Disabled dates */
.alba-dp-cell--disabled {
  color: var(--alba-disabled);
  cursor: not-allowed;
  background-color: #FAFBFC;
}

/* Sunday text in red */
.alba-dp-cell.sunday:not(.alba-dp-cell--selected) {
  color: var(--alba-sunday);
}

/* Saturday text in blue */
.alba-dp-cell.saturday:not(.alba-dp-cell--selected) {
  color: var(--alba-saturday);
}

/* ============================================================================
   Month Grid (for month mode)
   ============================================================================ */

.alba-dp-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px;
  background-color: var(--alba-bg);
}

.alba-dp-month {
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--alba-border);
  transition: var(--alba-transition);
  font-weight: 500;
  color: var(--alba-text);
}

.alba-dp-month:hover {
  border-color: var(--alba-primary);
  background-color: var(--alba-hover);
}

.alba-dp-month.selected {
  background-color: var(--alba-primary);
  color: white;
  border-color: var(--alba-primary);
}

/* ============================================================================
   Footer (Action Buttons)
   ============================================================================ */

.alba-dp-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--alba-border);
  background-color: #FAFBFC;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .alba-dp-footer {
    padding: 16px;
  }
}

.alba-dp-btn {
  padding: 8px 16px;
  border: 1px solid var(--alba-border);
  background-color: var(--alba-bg);
  color: var(--alba-text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: var(--alba-transition);
  font-family: inherit;
}

.alba-dp-btn:hover {
  border-color: var(--alba-text-light);
  background-color: #FAFBFC;
}

.alba-dp-btn:active {
  transform: scale(0.98);
}

.alba-dp-btn--primary {
  background-color: var(--alba-primary);
  color: white;
  border-color: var(--alba-primary);
}

.alba-dp-btn--primary:hover {
  background-color: #5F4DE6;
  border-color: #5F4DE6;
}

.alba-dp-btn--today {
  flex: 1;
}

@media (max-width: 767px) {
  .alba-dp-btn--today {
    flex: 0;
  }
}

/* ============================================================================
   Input Field Styling
   ============================================================================ */

.alba-datepicker-input {
  cursor: pointer;
}

.alba-datepicker-input:focus {
  outline: none;
  border-color: var(--alba-primary);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

/* ============================================================================
   Animations
   ============================================================================ */

@keyframes alba-fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes alba-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes alba-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.alba-dp-hidden {
  display: none !important;
}

.alba-dp-flex {
  display: flex;
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 380px) {
  .alba-datepicker {
    margin: 0;
    border-radius: 0;
  }

  .alba-dp-header {
    padding: 12px;
  }

  .alba-dp-title {
    font-size: 16px;
  }

  .alba-dp-months {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Print styles - hide datepicker when printing */
@media print {
  .alba-datepicker,
  .alba-datepicker-overlay {
    display: none !important;
  }
}