/* Year View Container */
.calendar-year-view {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px;
    background-color: #f4f6f9;
}

/* Quarter Container - white panel that holds the Q header strip at the top
   and all period cards below, matching the Figma design. */
.year-quarter-group {
    background-color: #ffffff;
    border: 1px solid #dfe6ec;
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden; /* so the header strip respects the rounded corners */
}

.year-quarter-group:last-child {
    margin-bottom: 0;
}

/* Quarter Header - full-width strip at the top of the quarter panel */
.year-quarter-header {
    background-color: #e3eaf1;
    border: none;
    border-bottom: 1px solid #d6dee6;
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 0;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #44566a;
}

/* Quarter Periods Row - auto-fit to fill available space */
.year-quarter-periods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 16px;
    margin-bottom: 0;
}

/* Individual Period Card */
.year-period-card {
    background: #ffffff;
    border: 1px solid #e3e8ed;
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
}

/* Period Title */
.year-period-title {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: #263445;
    text-align: center;
    /* extend the title band to the edges of the card and lift it visually */
    margin: -16px -16px 12px -16px;
    padding: 10px 0;
    background-color: #e9eef3; /* slightly darker greyish-blue band */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #dfe8ec; /* slightly stronger divider under the header */
}

/* Day Headers (S M T W T F S) */
.year-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 4px;
}

.year-day-header {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #8b97a4;
    padding: 4px 0;
}

/* Days Grid */
.year-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* Individual Day Cell */
.year-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    position: relative;
    color: #55687a;
    background-color: #eef2f6;
    height: 36px;
    padding: 2px;
    font-weight: 600;
    border-radius: 6px;
}

/* Day Number */
.year-day-number {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
}

/* Month Label (e.g., "May", "Jun") displayed above day number */
.year-month-label {
    font-size: 9px;
    font-weight: 700;
    color: #34528a;
    line-height: 1;
    margin-bottom: 1px;
}

/* Clickable Days */
.year-day-clickable {
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .year-day-clickable:hover {
        filter: brightness(0.95);
    }

/* Scheduled (working) days - soft pastel green background */
.year-day-scheduled {
    background-color: #d6ecd8;
}

/* Pending Approval / In Review days - soft pastel orange background */
.year-day-pending {
    background-color: #fbe0c9;
}

/* Rejected days - soft pastel red/pink background */
.year-day-rejected {
    background-color: #fbd7d7;
}

/* Other Period Days (grayed out / outside current period) */
.year-day-other-month {
    background-color: #f6f8fa;
    color: #b3bdc7;
    pointer-events: none;
}

/* Today Highlight */
.year-day-today {
    background-color: #0d6efd;
    color: white;
    font-weight: 700;
}

    .year-day-today:hover {
        background-color: #0b5ed7;
    }

    .year-day-today .year-month-label {
        color: white;
    }

/* Blackout Days (Weekends and Holidays) - same pale tile as default */
.year-day-blackout {
    background-color: #eef2f6;
    color: #9aa6b2;
}

/* Schedule Indicator Dot */
.year-schedule-indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #67b76a;
    margin-top: 2px;
}

/* Status-specific indicator dot colors */
.year-schedule-indicator.indicator-scheduled {
    background-color: #67b76a;
}

.year-schedule-indicator.indicator-pending {
    background-color: #ef9c43;
}

.year-schedule-indicator.indicator-rejected {
    background-color: #e96b6b;
}

.year-day-today .year-schedule-indicator {
    background-color: white;
}

/* Responsive Layout */
@media (max-width: 1100px) {
    .year-quarter-periods {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 700px) {
    .year-quarter-periods {
        grid-template-columns: 1fr;
    }

    .calendar-year-view {
        padding: 10px;
    }
}

/* Week date-range band used by manager week/period and quarter views */
.week-date-range-band {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9eef2; /* subtle bluish-gray band matching Figma */
    border-bottom: 1px solid #dfe8ec; /* slight divider */
    flex-shrink: 0;
}

.week-date-range-band .range-text {
    font-weight: 700;
    font-size: 0.85rem;
    color: #263445;
}