/* --- МОДАЛЬНЕ ВІКНО --- */
.modal-overlay {
    z-index: var(--z-overlay);
}

.modal-card {
    max-width: 352px;
    text-align: center;
}

.modal-date {
    font-family: var(--font-family-numeric);
    font-size: var(--type-number-hero-size);
    font-weight: 800;
    letter-spacing: var(--type-number-hero-track);
    margin-bottom: var(--space-2);
    line-height: var(--type-number-hero-line);
}

.modal-day-week {
    font-size: var(--type-number-xs-size);
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: var(--space-5);
    text-transform: capitalize;
}

.modal-holiday {
    color: var(--holiday-color);
    font-size: var(--type-label-sm-size);
    font-weight: 700;
    margin-bottom: var(--space-4);
    display: none;
    text-transform: uppercase;
    line-height: var(--type-label-sm-line);
    letter-spacing: var(--type-label-sm-track);
}

.modal-reveal-section {
    overflow: hidden;
    max-height: 220px;
    opacity: 1;
    margin-bottom: var(--space-5);
    transform: translateY(0);
    pointer-events: auto;
    transition: max-height var(--expand-reveal-size-duration) var(--expand-reveal-easing), opacity var(--expand-reveal-fade-duration) var(--expand-reveal-easing), transform var(--expand-reveal-fade-duration) var(--expand-reveal-easing), margin-bottom var(--expand-reveal-fade-duration) var(--expand-reveal-easing);
}

.modal-reveal-section[hidden] {
    display: none;
}

.modal-reveal-section.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    transform: translateY(var(--expand-reveal-offset));
    pointer-events: none;
}

.modal-holiday.active {
    display: block;
}

.modal-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-7);
    border-radius: var(--surface-block-radius-md);
    font-size: var(--type-body-md-size);
    font-weight: var(--button-font-weight);
    margin-bottom: var(--space-6);
    transition: var(--control-transition);
    width: 100%;
    box-shadow: none;
    border: 1px solid var(--card-border);
}

.modal-status-badge:hover {
    transform: var(--button-hover-transform);
    box-shadow: var(--surface-panel-elevated-shadow-hover);
}

.modal-status-badge[data-status="work"] {
    background: var(--work-bg);
    color: var(--work-text);
    box-shadow: var(--day-work-shadow);
}

.modal-status-badge[data-status="off"] {
    background: var(--off-bg);
    color: var(--off-text);
    box-shadow: var(--day-off-shadow);
}

.modal-status-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.modal-status-action {
    border: 1px solid var(--card-border);
    background: var(--surface-panel-subtle);
    color: var(--text-primary);
    border-radius: var(--button-compact-radius);
    padding: var(--button-compact-padding-block) var(--button-compact-padding-inline);
    font-size: var(--type-label-sm-size);
    font-weight: var(--button-font-weight);
    cursor: pointer;
    transition: var(--control-transition);
    box-shadow: none;
}

.modal-status-action:hover {
    transform: var(--button-hover-transform);
    border-color: var(--accent);
    box-shadow: var(--surface-panel-elevated-shadow-hover);
}

.modal-status-action.active {
    background: var(--interactive-active-bg-soft);
    border-color: var(--interactive-active-border);
    color: var(--interactive-active-color);
    font-weight: 800;
    box-shadow: var(--interactive-active-inset), var(--interactive-active-shadow);
}

.modal-status-reset.active {
    color: var(--text-primary);
}

.modal-status-caption {
    margin-bottom: var(--space-5);
    font-size: var(--type-body-sm-size);
    color: var(--text-secondary);
    line-height: var(--type-body-sm-line);
}

.modal-close {
    width: 100%;
    font-size: var(--button-font-size);
    letter-spacing: var(--button-letter-spacing);
}

.modal-close:active {
    transform: scale(0.97);
}

.modal-weather {
    box-shadow: none;
}

[data-theme="dark"] .modal-weather {
    background: var(--surface-panel-accent);
    border-color: var(--surface-panel-accent-border);
}

.modal-weather-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    padding: var(--space-4);
    border-radius: var(--surface-block-radius-md);
    background: var(--surface-panel-accent);
    border: 1px solid var(--surface-panel-accent-border);
    box-shadow: none;
}

.modal-weather-icon {
    width: var(--icon-weather-badge-size);
    height: var(--icon-weather-badge-size);
    border-radius: var(--icon-button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-badge);
    font-size: var(--icon-size-weather);
    flex-shrink: 0;
    box-shadow: none;
}

.modal-weather-content {
    min-width: 0;
}

.modal-weather-summary {
    font-size: var(--type-title-card-size);
    font-weight: 700;
    line-height: var(--type-title-card-line);
    color: var(--text-primary);
}

.modal-weather-meta {
    margin-top: var(--space-1);
    font-size: var(--type-body-sm-size);
    color: var(--text-secondary);
    line-height: var(--type-body-xs-line);
}

.modal-weather-refresh {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    border-radius: var(--icon-button-radius);
    margin-left: auto;
    align-self: center;
    border: 1px solid color-mix(in srgb, var(--surface-panel-muted-border) 76%, transparent);
    background: color-mix(in srgb, var(--surface-control) 92%, var(--surface-panel-accent));
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--accent));
    font-size: var(--icon-size-sm);
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.modal-weather-refresh:hover {
    background: color-mix(in srgb, var(--surface-control-hover) 92%, var(--surface-panel-accent));
    border-color: color-mix(in srgb, var(--surface-panel-muted-border) 88%, var(--accent));
    box-shadow: none;
    transform: var(--icon-hover-transform);
}

.modal-weather-refresh:active {
    transform: scale(0.98);
}

.modal-weather-refresh:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-soft);
}

.modal-note {
    margin-bottom: var(--space-5);
    text-align: left;
}

.modal-profiles {
    max-height: 280px;
}

.modal-profiles-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.modal-note-input {
    padding: var(--field-padding);
}

.modal-note-textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.45;
    box-shadow: none;
}

.modal-note-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: 0;
    opacity: 0;
    transform: translateY(var(--expand-reveal-offset));
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height var(--expand-reveal-size-duration) var(--expand-reveal-easing), opacity var(--expand-reveal-fade-duration) var(--expand-reveal-easing), transform var(--expand-reveal-fade-duration) var(--expand-reveal-easing), margin-top var(--expand-reveal-fade-duration) var(--expand-reveal-easing);
}

.modal-note-actions.active {
    opacity: 1;
    transform: translateY(0);
    max-height: 56px;
    margin-top: var(--space-3);
    pointer-events: auto;
}

.modal-note-btn {
    font-weight: 800;
    padding: var(--space-3);
}

.modal-note-clear {
    box-shadow: var(--surface-panel-subtle-shadow);
}

.modal-note-save {
    box-shadow: var(--surface-button-accent-shadow);
}

.undo-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translate(-50%, var(--space-4));
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: min(84vw, 300px);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--button-compact-radius);
    background: var(--main-container-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    opacity: 0;
    pointer-events: none;
    transition: var(--control-transition);
    z-index: var(--z-toast);
}

.undo-toast.active {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.modal-overlay.active ~ .undo-toast,
.schedule-overlay.active ~ .undo-toast,
.settings-overlay.active ~ .undo-toast {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 132px);
}

.undo-toast-text {
    min-width: 0;
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-xs-line);
    font-weight: 600;
    color: var(--text-primary);
}

.undo-toast-btn {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 32px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--type-body-xs-size);
    font-weight: 800;
    border-radius: var(--button-compact-radius);
}

@keyframes fluidIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
        filter: blur(1px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.fluid-enter {
    animation: var(--calendar-enter-animation);
}