/* Календарь clv3 на главном экране (внутри #calendarSection). Темы — из style.css / :root приложения. */

/* Не снимаем толщину границы (было none) — при переходах иначе сетка прыгает на ~1px на строку */
.calendar-section--month-squeeze .clv3-month-week {
    border-bottom: 1px solid transparent;
}

.clv3-mode-viewport {
    overflow: hidden;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.clv3-mode-track {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    will-change: transform;
    transition: none;
}

.clv3-mode-pane {
    flex: 0 0 auto;
    width: 100%;
}

.clv3-month-carousel-viewport {
    border-top: none;
    padding-top: 0;
}

#mainClv3MonthCarouselViewport .clv3-carousel-pane {
    flex: 0 0 var(--clv3-month-pane-px, 100%);
    min-width: 0;
    max-width: var(--clv3-month-pane-px, 100%);
}

#mainClv3MonthCarouselTrack {
    align-items: flex-start;
}

.clv3-month-collapse-clip {
    overflow: hidden;
    width: 100%;
}

.clv3-month-collapse-inner {
    width: 100%;
    will-change: transform;
    padding-bottom: 4px;
}

.clv3-month-layer {
    margin-top: 0;
}

.clv3-month-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.clv3-month-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    align-items: start;
    border-bottom: 1px solid var(--border-light);
}

/* Как у .main-clv3-week-row: всегда 1px снизу, иначе последняя неделя месяца на 1px ниже по высоте строки, чем неделя в режиме «неделя» */
.clv3-month-week:last-child {
    border-bottom: 1px solid transparent;
}

.clv3-day--month {
    --clv3-month-dots-edge-gap: 1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    min-height: 0;
    border-radius: 6px;
    gap: var(--clv3-month-dots-edge-gap);
}

.clv3-day--month .clv3-dots,
.clv3-day--week .clv3-dots {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: auto;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    gap: 2px;
    justify-items: center;
    align-items: center;
    align-content: start;
    justify-content: start;
    overflow: hidden;
}

#mainClv3WeekLayer .clv3-carousel-viewport {
    border-top: none;
    padding-top: 0;
}

#mainClv3WeekCarouselViewport .clv3-carousel-pane {
    flex: 0 0 var(--clv3-week-pane-px, 100%);
    min-width: 0;
    max-width: var(--clv3-week-pane-px, 100%);
}

#mainClv3WeekCarouselTrack {
    align-items: flex-start;
}

.main-clv3-week-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    align-items: start;
    width: 100%;
    border-bottom: 1px solid transparent;
}

.clv3-day--week {
    --clv3-week-dots-edge-gap: 1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    min-height: 0;
    gap: var(--clv3-week-dots-edge-gap);
}

.clv3-carousel-viewport {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid var(--clv3-stripe);
    padding-top: 8px;
}

/* Иначе общий блок выше перекрывает .clv3-month-carousel-viewport — полоска между пн–вс и первой неделей. */
#mainClv3MonthCarouselViewport.clv3-carousel-viewport {
    border: 0;
    padding-top: 0;
}

#mainClv3WeekCarouselViewport.clv3-carousel-viewport {
    border: 0;
    padding-top: 0;
}

.clv3-carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    width: max-content;
    max-width: none;
    will-change: transform;
    transition: none;
}

.clv3-carousel-pane {
    flex: 0 0 var(--clv3-pane-px, 100%);
    min-width: 0;
    max-width: var(--clv3-pane-px, 100%);
}

.main-calendar-unified .clv3-cal,
#calendarGestureZone .clv3-cal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: auto;
    min-height: 0;
    --clv3-stripe: var(--calendar-week-stripe);
    touch-action: none;
}

.clv3-cal-head {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    flex-shrink: 0;
    margin-bottom: 0;
    align-items: center;
    /* Меньше сверху, больше снизу: геометрический центр ≠ оптический из‑за строчных и line-box */
    padding: 9px 1px 9px;
    border-radius: var(--radius-md);
    background: var(--bg-card-alt);
}

.clv3-cal-head span {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: lowercase;
    transform: translateY(-2px);
}

.clv3-cal-head span.clv3-wd-sun {
    color: var(--accent-error);
}

.clv3-week-layer {
    min-height: 0;
}

.clv3-day {
    position: relative;
    min-height: 72px;
    border: none;
    border-radius: 6px;
    background: transparent;
    touch-action: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 2px 8px;
    color: var(--text-primary);
    font: inherit;
    transition: none;
}

/* Базовый .clv3-day перетирает padding модификаторов; одна сетка отступов для месяца и недели */
.clv3-day.clv3-day--month,
.clv3-day.clv3-day--week {
    padding: 4px 2px 1px;
}

.clv3-day:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color, var(--accent-primary));
}

.clv3-day-num {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0px 6px;
    border-radius: 8px;
    text-align: center;
}

/* Число по центру ячейки; блок точек — слева сверху (align-items: flex-start у .clv3-day) */
.clv3-day .clv3-day-num {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.clv3-day--sun .clv3-day-num {
    color: var(--accent-error);
}

.clv3-day--muted .clv3-day-num {
    color: var(--text-muted);
}

.clv3-day--today:not(.clv3-day--selected) {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.14), rgba(241, 196, 15, 0.065));
    box-shadow: inset 0 0 0 1px rgba(200, 168, 42, 0.42);
}

.clv3-day--selected {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.08));
    box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.45);
}

.clv3-day--today:not(.clv3-day--selected) .clv3-day-num,
.clv3-day--selected .clv3-day-num {
    background: transparent;
}

.clv3-dots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 48px;
    max-height: 48px;
    margin-top: 4px;
    overflow: hidden;
}

.clv3-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 6px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .clv3-dot {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .clv3-day--today:not(.clv3-day--selected) {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.12), rgba(241, 196, 15, 0.055));
    box-shadow: inset 0 0 0 1px rgba(224, 190, 60, 0.4);
}

[data-theme="dark"] .clv3-day--selected {
    box-shadow: inset 0 0 0 1px rgba(93, 173, 226, 0.65);
}