/**
 * BASE STYLES
 * Базовые стили, сброс и типографика
 */

/* Alpine.js - скрыть элементы до инициализации */
[x-cloak] { 
    display: none !important; 
}

/* Предотвращение горизонтального скролла на мобильных */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Критично для мобилок */
}

/* Основные стили body */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #F1F5F9; 
    -webkit-tap-highlight-color: transparent; 
}

/* Убираем стандартный outline для устранения мелькания при закрытии модальных окон */
*:focus {
    outline: none !important;
}

/* Для доступности - оставляем видимый фокус только для клавиатурной навигации */
*:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Убираем визуальные артефакты при закрытии модальных окон */
button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Убираем transition на outline для предотвращения мелькания */
* {
    outline-color: transparent;
    outline-width: 0;
    transition: outline 0s;
}

/* Убираем ring эффект у всех элементов */
*:focus:not(:focus-visible) {
    box-shadow: none !important;
    border-color: inherit;
}

/* Специально для modals и overlays */
[role="dialog"] *:focus {
    outline: none !important;
}

/* Кастомный scrollbar */
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}

::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 4px; 
}