/* ============================================================
   mak-lib.core — базовые стили для .mak-modal, .mak-toast, .mak-spinner
   Baseline: iOS 12+ / ES2018. Без полифилов, без ?., без ??.

   Что внутри:
   - CSS-переменные --mak-* (переопределяются в макете через :root)
   - .mak-modal — оверлей + диалог + header + body + close
   - .mak-toast — 4 типа: info, success, error, warning
   - .mak-spinner — 3 размера: sm, md (default), lg
   - body.mak-modal-open — блокировка scroll (требует JS-патч)
   - prefers-reduced-motion — отключение анимаций
   - Responsive: 768px, 480px

   z-index (переопределяется в :root макета):
   - --mak-z-overlay: 10490
   - --mak-z-modal:   10500
   - --mak-z-spinner: 10550
   - --mak-z-toast:   10600

   Версия: 1.0.0
   Лицензия: GNU GPL v2 or later
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. CSS-переменные — layout может переопределить в :root
   ──────────────────────────────────────────────────────────── */
:root {
    /* Цвета */
    --mak-color-primary: #4f46e5;
    --mak-color-success: #10b981;
    --mak-color-danger:  #ef4444;
    --mak-color-warning: #f59e0b;
    --mak-color-info:    #3b82f6;
    --mak-color-bg:      #ffffff;
    --mak-color-text:    #0f172a;
    --mak-color-muted:   #64748b;
    --mak-color-border:  #e9edf2;
    --mak-color-overlay: rgba(0, 0, 0, 0.5);

    /* Типографика */
    --mak-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Радиусы */
    --mak-radius:    16px;
    --mak-radius-sm: 8px;

    /* Тени */
    --mak-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --mak-shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* Отступы */
    --mak-space-sm: 10px;
    --mak-space-md: 16px;
    --mak-space-lg: 24px;

    /* z-index — layout может переопределить */
    --mak-z-overlay: 10490;
    --mak-z-modal:   10500;
    --mak-z-spinner: 10550;
    --mak-z-toast:   10600;

    /* Анимации */
    --mak-transition-fast:   0.15s ease;
    --mak-transition-medium: 0.25s ease;
}

/* ────────────────────────────────────────────────────────────
   2. Стабильный gutter — предотвращает сдвиг layout при overflow: hidden
   (iOS 12 не поддерживает, там overlay-скроллбары не занимают места)
   ──────────────────────────────────────────────────────────── */
@supports (scrollbar-gutter: stable) {
    :root { scrollbar-gutter: stable; }
}

/* ────────────────────────────────────────────────────────────
   3. Блокировка scroll при открытой модалке
   (требует, чтобы core.js добавлял/снимал класс body.mak-modal-open)
   ──────────────────────────────────────────────────────────── */
body.mak-modal-open { overflow: hidden; }

/* ────────────────────────────────────────────────────────────
   4. .mak-modal — базовая модалка
   Паттерн visibility + opacity:
   - closed: visibility: hidden (задержка 250ms), opacity не трогаем на parent
   - open:   visibility: visible (instant), children fade через свои transitions
   Это даёт fade-in и fade-out без "двойного затухания".
   ──────────────────────────────────────────────────────────── */
.mak-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--mak-z-modal);
    padding: var(--mak-space-md);
    box-sizing: border-box;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--mak-transition-medium);
    font-family: var(--mak-font-family);
    font-size: 16px;
    line-height: 1.5;
}

.mak-modal.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

/* Оверлей */
.mak-modal-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--mak-color-overlay);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--mak-transition-medium);
    z-index: var(--mak-z-overlay);
}

.mak-modal.is-open .mak-modal-overlay { opacity: 1; }

/* Диалог */
.mak-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--mak-color-bg);
    color: var(--mak-color-text);
    border-radius: var(--mak-radius);
    box-shadow: var(--mak-shadow-modal);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--mak-transition-medium), transform var(--mak-transition-medium);
}

.mak-modal.is-open .mak-modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
.mak-modal-header {
    position: relative;
    padding: var(--mak-space-lg) var(--mak-space-lg) var(--mak-space-md);
    border-bottom: 1px solid var(--mak-color-border);
    flex-shrink: 0;
}

.mak-modal-title {
    margin: 0;
    padding-right: 40px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mak-color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.mak-modal-subtitle {
    margin: 6px 0 0;
    padding-right: 40px;
    font-size: 0.9rem;
    color: var(--mak-color-muted);
    line-height: 1.4;
}

.mak-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--mak-color-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mak-transition-fast), color var(--mak-transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mak-modal-close:hover {
    background: var(--mak-color-border);
    color: var(--mak-color-text);
}

.mak-modal-close:focus {
    outline: 2px solid var(--mak-color-primary);
    outline-offset: 2px;
}

/* Body */
.mak-modal-body {
    padding: var(--mak-space-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    font-size: 0.95rem;
    color: var(--mak-color-text);
}

.mak-modal-body::-webkit-scrollbar { width: 6px; }
.mak-modal-body::-webkit-scrollbar-track { background: transparent; }
.mak-modal-body::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 3px;
}
.mak-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}

/* ────────────────────────────────────────────────────────────
   5. .mak-toast — временные уведомления
   ──────────────────────────────────────────────────────────── */
.mak-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: calc(100vw - 48px);
    padding: 14px 20px;
    border-radius: var(--mak-radius-sm);
    background: var(--mak-color-text);
    color: #ffffff;
    box-shadow: var(--mak-shadow-toast);
    font-family: var(--mak-font-family);
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
    z-index: var(--mak-z-toast);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--mak-transition-medium), transform var(--mak-transition-medium);
    pointer-events: none;
    word-break: break-word;
    box-sizing: border-box;
}

.mak-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mak-toast-info    { background: var(--mak-color-info); }
.mak-toast-success { background: var(--mak-color-success); }
.mak-toast-error   { background: var(--mak-color-danger); }
.mak-toast-warning { background: var(--mak-color-warning); color: #0f172a; }

/* ────────────────────────────────────────────────────────────
   6. .mak-spinner — загрузка
   ──────────────────────────────────────────────────────────── */
.mak-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--mak-color-border);
    border-top-color: var(--mak-color-primary);
    border-radius: 50%;
    animation: mak-spin 0.8s linear infinite;
    vertical-align: middle;
    box-sizing: border-box;
}

.mak-spinner-sm { width: 20px; height: 20px; border-width: 2px; }
.mak-spinner-lg { width: 48px; height: 48px; border-width: 4px; }

@keyframes mak-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ────────────────────────────────────────────────────────────
   7. @supports not — задел на будущее
   В core.css gap не используется, но если добавим — здесь будет fallback
   ──────────────────────────────────────────────────────────── */
@supports not (gap: 1rem) {
    /* задел на будущее */
}

/* ────────────────────────────────────────────────────────────
   8. prefers-reduced-motion — отключение анимаций
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mak-modal,
    .mak-modal.is-open,
    .mak-modal-overlay,
    .mak-modal-dialog,
    .mak-toast {
        transition: none !important;
    }
    .mak-spinner {
        animation: none !important;
        border-top-color: var(--mak-color-primary);
        border-left-color: var(--mak-color-primary);
    }
}

/* ────────────────────────────────────────────────────────────
   9. Responsive — мобильная адаптация
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mak-modal { padding: var(--mak-space-sm); }
    .mak-modal-dialog {
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
    }
    .mak-modal-header { padding: var(--mak-space-md) var(--mak-space-md) var(--mak-space-sm); }
    .mak-modal-title { font-size: 1.15rem; }
    .mak-modal-body { padding: var(--mak-space-md); }
    .mak-toast {
        bottom: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .mak-modal-dialog { border-radius: var(--mak-radius-sm); }
    .mak-modal-header { padding: var(--mak-space-md); }
    .mak-modal-title { font-size: 1.05rem; }
    .mak-modal-body { padding: var(--mak-space-md); }
}