/* 1. БАЗОВІ НАЛАШТУВАННЯ */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased; /* Робить шрифт чіткішим на Mac/iOS */
    -moz-osx-font-smoothing: grayscale;
}

/* 2. КРАСИВИЙ СКРОЛБАР (Webkit: Chrome, Edge, Safari) */
/* Робимо його тонким і в кольорах Slate */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* slate-300 */
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box; /* Щоб скрол не прилипав до краю */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* slate-400 */
}

/* Темний скролбар для меню (sidebar) */
aside ::-webkit-scrollbar-thumb {
    background-color: #334155; /* slate-700 */
}
aside ::-webkit-scrollbar-thumb:hover {
    background-color: #475569; /* slate-600 */
}

/* 3. АНІМАЦІЇ */

/* Плавна поява (fade-in) */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Поява зі зсувом вгору (використовується для карток) */
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. ЛОАДЕР (Кільце завантаження) */
.loader {
    border: 4px solid #f1f5f9; /* slate-100 */
    border-top: 4px solid #3b82f6; /* blue-500 */
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    animation: spin 1s linear infinite;
}

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

/* 5. ДОДАТКОВІ УТИЛІТИ */

/* Щоб приховати елементи, але залишити їх доступними для скрінрідерів (опціонально) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Клас для розмитого фону (якщо Tailwind версії не підтримує backdrop-blur) */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 6. HR CALENDAR — Phase 3: fixed grid in day cell */
.fc-daygrid-day-events {
    min-height: 0;
}

.day-cell-sections {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-height: 0;
}

.day-cell-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

/* Довгі назви подій переносяться, не виїжджають на сусідні клітинки */
.fc-daygrid-day-frame {
    overflow: hidden;
}
/* Повний текст подій у клітинці — з переносами, без обрізання */
.fc-daygrid-event-harness .fc-daygrid-event,
.fc-daygrid-event-harness .fc-daygrid-event .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event .fc-event-main-frame {
    overflow: visible !important;
}
.fc-daygrid-event-harness .fc-daygrid-event .fc-event-main-frame .fc-event-title-container {
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.hr-event-wrap,
.hr-event-holiday,
.hr-event-birthday,
.hr-event-anniversary,
.hr-event-activity {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

/* Let moved events flow inside sections (override FC absolute positioning) */
.day-cell-sections .fc-daygrid-event-harness,
.day-cell-sections .fc-daygrid-event {
    position: static !important;
    margin-top: 2px;
}
.day-cell-sections .fc-daygrid-event-harness:first-child,
.day-cell-sections .fc-daygrid-event:first-child {
    margin-top: 0;
}

/* Holiday = header strip; when empty section stays collapsed (min-height: 0) */
.day-cell-holiday {
    flex-shrink: 0;
}

.day-cell-holiday:empty {
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* First section (holiday) when it has content looks like cell header */
.day-cell-holiday .hr-event-holiday {
    width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.hr-event-holiday {
    background: #fef2f2 !important;
    color: #9f1239 !important;
    border-bottom: 1px solid #fecaca !important;
}

.hr-event-holiday-inner {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* "More" link styling if dayMaxEvents is used later */
.fc-daygrid-more-link {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
}

.fc-daygrid-more-link:hover {
    background: #e2e8f0;
    color: #334155;
}