/**
 * Исправления отображения в Safari (WebKit)
 * Решает проблемы с gap во flexbox, шрифтами и некоторыми CSS-свойствами.
 * Класс .safari добавляется скриптом при обнаружении Safari.
 */

/* Улучшение рендеринга шрифтов в Safari */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fallback для gap во flexbox (Safari < 14.1 не поддерживает gap) */
@supports not (gap: 1px) {
    [style*="display: flex"][style*="gap"] > * + *,
    [style*="display:flex"][style*="gap"] > * + * {
        margin-left: 8px;
        margin-top: 0;
    }
    [style*="flex-direction: column"][style*="gap"] > * + *,
    [style*="flex-direction:column"][style*="gap"] > * + * {
        margin-left: 0;
        margin-top: 8px;
    }
    .lists-grid,
    .months-container {
        margin: -4px;
    }
    .lists-grid > *,
    .months-container > * {
        margin: 4px;
    }
}

/* Fallback когда flex gap не работает (Safari < 14.1, класс добавляется safari-fixes.js) */
html.safari-no-flex-gap [style*="display: flex"][style*="gap"] > * + *,
html.safari-no-flex-gap [style*="display:flex"][style*="gap"] > * + * {
    margin-left: 8px;
}
html.safari-no-flex-gap [style*="flex-direction: column"][style*="gap"] > * + *,
html.safari-no-flex-gap [style*="flex-direction:column"][style*="gap"] > * + * {
    margin-left: 0;
    margin-top: 8px;
}
html.safari-no-flex-gap .lists-grid,
html.safari-no-flex-gap .months-container {
    margin: -4px;
}
html.safari-no-flex-gap .lists-grid > *,
html.safari-no-flex-gap .months-container > * {
    margin: 4px;
}

/* -webkit- префикс для backdrop-filter (модалки) */
.modal-content,
[style*="backdrop-filter"] {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Исправление grid в Safari (minmax иногда ведёт себя иначе) */
.lists-grid,
.grid-auto-fill {
    display: -webkit-grid;
    display: grid;
}

/* Предотвращение «схлопывания» flex-элементов в Safari */
[style*="min-width: 0"],
[style*="min-width:0"] {
    min-width: 0;
    -webkit-min-width: 0;
}

/* Исправление overflow в flex-контейнерах */
.flex-1,
[style*="flex: 1"],
[style*="flex:1"] {
    min-width: 0;
    -webkit-flex: 1;
    flex: 1;
}