/*
    Nordic Stuga - Stylesheet
    Thema: Modern Skandi / Natur
*/

/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Inter:wght@300;400;600&display=swap');

/* 2. VARIABLEN (Für einfachere Wartung) */
:root {
    --fir: #1B2621;
    --forest: #3D5245;
    --falu: #A62C2B;
    --wood: #8C7356;
    --linen: #F4F1EA;
    --moss: #606C38;
}

/* 3. GLOBAL STYLES */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--linen);
    color: var(--fir);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sanfter Übergang für Sprachwechsel */
[data-i18n] {
    transition: opacity 0.2s ease-in-out;
}

/* 4. TYPOGRAFIE */
h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* 5. SCROLLBAR (Skandi Design) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--linen);
}
::-webkit-scrollbar-thumb {
    background: var(--forest);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--fir);
}

/* 6. BENTO GALLERY & BILDER */
.gallery-img {
    @apply w-full h-full object-cover transition-transform duration-700 hover:scale-105;
}

.shadow-premium {
    box-shadow: 0 10px 30px -10px rgba(27, 38, 33, 0.1);
}

/* 7. PICTOGRAMS & ICONS */
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(61, 82, 69, 0.05); /* Forest 5% */
    border-radius: 9999px;
    color: var(--forest);
    flex-shrink: 0;
}

/* ============================================================
   FLATPICKR - FINALES KORREKTUR-STYLING
   ============================================================ */
   /* 1. Vergangenheit & Wochentage: Sichtbar, aber blass */
   .flatpickr-day,
   .flatpickr-day.prevMonthDay,
   .flatpickr-day.nextMonthDay {
       opacity: 0.8;
       pointer-events: none !important;
   }

   /* 2. Samstage in der Zukunft: Standardmäßig aktiv */
   .flatpickr-day.is-saturday:not(.flatpickr-disabled) {
       opacity: 1;
       font-weight: 900 !important;
       color: var(--fir) !important;
       pointer-events: auto !important;
       cursor: pointer;
   }

   /* 3. Spezial-Markierungen für Wechseltage (Halbkreise) */

   /* GAST REIST AB: Linke Hälfte rot (Vormittag belegt) */
   .day-checkout {
       background: linear-gradient(to right, rgba(166, 44, 43, 0.1) 50%, transparent 50%) !important;
       border-radius: 50% !important;
       opacity: 0.6 !important;
   }

   /* GAST REIST AN: Rechte Hälfte rot (Nachmittag belegt) */
   .day-checkin {
       background: linear-gradient(to left, rgba(166, 44, 43, 0.1) 50%, transparent 50%) !important;
       border-radius: 50% !important;
       opacity: 0.6 !important;
   }

   /* KOMPLETT BELEGT: Samstag liegt MITTEN in einer langen Buchung */
   .day-fully-booked {
       background: rgba(166, 44, 43, 0.1) !important;
       color: var(--falu) !important;
       opacity: 0.6 !important;
       pointer-events: none !important; /* Absolut unklickbar */
       cursor: not-allowed !important;
   }


   /* 4. Auswahl-Styling (Grün) */
   .flatpickr-day.selected,
   .flatpickr-day.startRange,
   .flatpickr-day.endRange {
       background: var(--forest) !important;
       color: white !important;
       border: none !important;
       opacity: 1 !important;
   }

   /* 5. Die Range (Moosgrün) */
   .flatpickr-day.inRange {
       background: rgba(96, 108, 56, 0.15) !important;
       box-shadow: none !important;
   }

   /* ============================================================
      FLATPICKR - PREMIUM SPACING & HEADER LOGIK
      ============================================================ */

   /* 1. Das gesamte Widget vergrößern und mehr Innenabstand geben */
   .flatpickr-calendar {
       width: 350px !important; /* Etwas breiter für mehr Platz */
       padding: 15px !important;
       background: #fff !important;
       border-radius: 20px !important;
       box-shadow: 0 20px 40px -10px rgba(27, 38, 33, 0.15) !important;
   }

   /* 2. Den Header-Bereich (Monat/Pfeile) entzerren */
   .flatpickr-months {
       display: flex !important;
       align-items: center !important;
       justify-content: space-between !important;
       margin-bottom: 15px !important;
   }

   .flatpickr-month {
       flex: 1 !important;
       height: 50px !important;
       position: relative !important;
       display: flex !important;
       align-items: center !important;
   }

   /* 3. Die Pfeile (Links/Rechts) zentrieren und vergrößern */
   .flatpickr-prev-month,
   .flatpickr-next-month {
       position: relative !important; /* Raus aus der absoluten Ecke */
       top: 0 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       width: 40px !important;
       height: 40px !important;
       padding: 0 !important;
       z-index: 10 !important;
       cursor: pointer !important;
       transition: all 0.2s ease !important;
       border-radius: 50% !important;
   }

   /* Icons innerhalb der Pfeile */
   .flatpickr-prev-month svg,
   .flatpickr-next-month svg {
       width: 20px !important;
       height: 20px !important;
       fill: var(--fir) !important;
       vertical-align: middle !important;
   }

   .flatpickr-prev-month:hover,
   .flatpickr-next-month:hover {
       background: var(--linen) !important;
       transform: scale(1.1);
   }

   /* 4. Der mittlere Teil (Monat, Jahr, Heute-Button) */
   .flatpickr-current-month {
       position: relative !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       gap: 6px !important; /* Kompakter Abstand zwischen den Elementen */
       left: 0 !important;
       width: auto !important;
       padding: 0 !important;
   }

   /* Monat und Jahr Styling */
   .flatpickr-monthDropdown-months,
   .numInputWrapper {
       background: transparent !important;
       border-radius: 8px !important;
       padding: 4px 8px !important;
       transition: all 0.2s ease !important;
   }

   .flatpickr-monthDropdown-months:hover,
   .numInputWrapper:hover {
       background: var(--linen) !important;
       color: var(--forest) !important;
   }

   .flatpickr-monthDropdown-months {
       font-family: 'Playfair Display', serif !important;
       font-weight: 700 !important;
       font-size: 1.1rem !important;
       appearance: none;
       -webkit-appearance: none;
   }

   .numInputWrapper input.cur-year {
       font-family: 'Playfair Display', serif !important;
       font-weight: 400 !important;
       font-size: 1.1rem !important;
   }

   /* 5. Der NEUE Heute-Button (Das Kalender Icon) */
   .calendar-today-btn {
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       width: 32px !important;
       height: 32px !important;
       cursor: pointer;
       color: var(--wood);
       border-radius: 8px;
       transition: all 0.2s ease;
       margin-left: 4px;
   }

   .calendar-today-btn i {
       width: 18px;
       height: 18px;
   }

   .calendar-today-btn:hover {
       background: var(--linen) !important;
       color: #A62C2B !important; /* Dein echtes Schwedenrot */
   }

   /* 6. Das Zahlen-Gitter entzerren (Mehr Abstand zum Rand) */
   .flatpickr-innerContainer {
       padding: 5px 10px !important;
   }

   .flatpickr-days {
       width: 315px !important; /* Passend zur neuen Gesamtbreite */
   }

   /* Die Wochentage Kopfzeile */
   .flatpickr-weekdays {
       padding: 0 10px !important;
       margin-bottom: 10px !important;
   }

   /* 7. Akzentfarben Korrektur (Schwedenrot Konsistenz) */
   .booked-day {
       color: #A62C2B !important;
       opacity: 0.25 !important;
   }

   .numInputWrapper span:hover {
       background: var(--linen) !important;
   }
   .numInputWrapper span.arrowUp:after { border-bottom-color: #A62C2B !important; }
   .numInputWrapper span.arrowDown:after { border-top-color: #A62C2B !important; }

/* 9. ANIMATIONS */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

/* 10. ADMIN DASHBOARD SPECIFICS */
.nav-btn.active {
    background-color: var(--forest);
    color: white;
}

.status-tag {
    @apply px-2 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase;
}