@import 'tailwindcss';
@import 'leaflet/dist/leaflet.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views';

/* ============================================================
   Placeo Design System
   Плоский, белый, безрамочный стиль. Бренд — зелёный #87c540.
   Шрифты: Onest (заголовки/лого) + Golos Text (текст/UI).
   ============================================================ */
:root {
    /* Бренд — зелёный */
    --brand-50: #f1f8e6;
    --brand-100: #e4f2cf;
    --brand-200: #c9e69e;
    --brand-300: #a9d962;
    --brand-400: #97cd4d;
    --brand-500: #87c540;
    --brand-600: #6ea830;
    --brand-700: #578a24;
    --brand-800: #436a1c;
    --brand-900: #324f16;
    --brand-gradient: linear-gradient(140deg, #6ea830 0%, #87c540 52%, #a9d962 100%);
    --brand-shadow: 0 6px 16px rgba(110, 168, 48, 0.26);
    --focus-ring: 0 0 0 3px rgba(135, 197, 64, 0.35);

    /* Нейтральные (холодный slate) */
    --surface: #ffffff;
    --surface-sunken: #eef3f7;
    --border-subtle: #e1e9f0;
    --border-default: #cdd8e2;
    --text-faint: #9babbb;
    --text-muted: #6b7c8c;
    --text-body: #33414e;
    --ink: #0b1a26;

    /* Семантика */
    --success: #16c784;
    --warning: #ff9f1c;
    --danger: #ef4146;

    /* Геометрия / радиусы */
    --container-xl: 1320px;
    --gutter: 24px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Движение */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
}

/* ============================================================
   Токены Tailwind: имена утилит остаются прежними (brand-*, gray-*,
   ink, muted) — старая разметка автоматически получает новую палитру.
   ============================================================ */
@theme {
    --font-sans: 'Golos Text', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Onest', 'Golos Text', ui-sans-serif, system-ui, sans-serif;

    --color-brand-50: var(--brand-50);
    --color-brand-100: var(--brand-100);
    --color-brand-200: var(--brand-200);
    --color-brand-300: var(--brand-300);
    --color-brand-400: var(--brand-400);
    --color-brand-500: var(--brand-500);
    --color-brand-600: var(--brand-600);
    --color-brand-700: var(--brand-700);
    --color-brand-800: var(--brand-800);
    --color-brand-900: var(--brand-900);

    --color-ink: var(--ink);
    --color-muted: var(--text-muted);

    --color-gray-50: #f6f9fb;
    --color-gray-100: var(--surface-sunken);
    --color-gray-200: var(--border-subtle);
    --color-gray-300: var(--border-default);
    --color-gray-400: var(--text-faint);
    --color-gray-500: var(--text-muted);
    --color-gray-600: #56697a;
    --color-gray-700: var(--text-body);
    --color-gray-800: #22303c;
    --color-gray-900: var(--ink);
}

@layer base {
    html { scroll-behavior: smooth; }
    body {
        background: var(--surface);
        color: var(--text-body);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }
    h1, h2, h3, h4 {
        font-family: var(--font-display);
        color: var(--ink);
        letter-spacing: -0.02em;
    }
}

/* ============================================================
   Компоненты
   ============================================================ */
@layer components {
    /* Основное действие — зелёный градиент с фирменной тенью */
    .btn-brand {
        display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
        min-height: 2.75rem; padding: 0 1.25rem;
        border-radius: var(--radius-sm);
        background: var(--brand-gradient);
        color: #fff;
        font-weight: 600; font-size: .9375rem; line-height: 1;
        box-shadow: var(--brand-shadow);
        transition: filter var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
        cursor: pointer;
    }
    .btn-brand:hover { filter: brightness(1.05); }
    .btn-brand:active { transform: translateY(1px) scale(.99); }
    .btn-brand:disabled, .btn-brand[disabled] { opacity: .5; box-shadow: none; filter: none; cursor: default; transform: none; }

    /* Вторичное действие — белая кнопка с тонкой рамкой */
    .btn-secondary {
        display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
        min-height: 2.75rem; padding: 0 1.25rem;
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--border-subtle);
        background: var(--surface);
        color: var(--text-body);
        font-weight: 600; font-size: .9375rem; line-height: 1;
        transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
        cursor: pointer;
    }
    .btn-secondary:hover { border-color: var(--border-default); background: var(--surface-sunken); }

    /* Тонированное действие */
    .btn-tonal {
        display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
        min-height: 2.75rem; padding: 0 1.25rem;
        border-radius: var(--radius-sm);
        background: var(--brand-50);
        color: var(--brand-700);
        font-weight: 600; font-size: .9375rem; line-height: 1;
        transition: background-color var(--dur-base) var(--ease-out);
        cursor: pointer;
    }
    .btn-tonal:hover { background: var(--brand-100); }

    /* Призрачная кнопка — без рамки, мягкий ховер */
    .btn-ghost {
        display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
        min-height: 2.5rem; padding: 0 .75rem;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-body);
        font-weight: 600; font-size: .9375rem; line-height: 1;
        transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
        cursor: pointer;
    }
    .btn-ghost:hover { background: var(--surface-sunken); }

    /* Поле ввода (формы). Поисковая «пилюля» — отдельный .search-pill */
    .input {
        width: 100%;
        border: 1.5px solid var(--border-default);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--ink);
        padding: .625rem .875rem; font-size: 1rem; line-height: 1.5rem;
        transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
    }
    .input::placeholder { color: var(--text-muted); }
    .input:focus {
        outline: none;
        border-color: var(--brand-500);
        box-shadow: var(--focus-ring);
    }

    /* Поисковая «пилюля» в шапке */
    .search-pill {
        display: flex; align-items: center; gap: .625rem;
        height: 46px; padding: 0 16px;
        background: var(--surface);
        border: 1.5px solid var(--border-default);
        border-radius: var(--radius-pill);
        transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    }
    .search-pill:focus-within { border-color: var(--brand-500); box-shadow: var(--focus-ring); }
    .search-pill input {
        flex: 1; min-width: 0; border: none; outline: none; background: transparent;
        font-size: 15px; color: var(--ink);
    }
    .search-pill input::placeholder { color: var(--text-muted); }

    .bg-brand-gradient { background-image: var(--brand-gradient); }

    /* Контейнер-карточка для функциональных поверхностей (кабинет, чат).
       Плоская, тонкая рамка, без тени. */
    .card {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
    }
}

/* Типографика контентных страниц (HTML из админки) */
.page-content { color: var(--text-body); font-size: 16px; line-height: 1.7; }
.page-content > :first-child { margin-top: 0; }
.page-content h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin: 32px 0 12px; }
.page-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 24px 0 8px; }
.page-content p { margin: 0 0 14px; }
.page-content ul, .page-content ol { margin: 0 0 14px; padding-left: 22px; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin: 4px 0; }
.page-content a { color: var(--brand-700); text-decoration: underline; }
.page-content a:hover { color: var(--brand-600); }
.page-content strong { color: var(--ink); font-weight: 600; }
.page-content hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 28px 0; }
.page-content blockquote { border-left: 3px solid var(--brand-300); padding-left: 14px; color: var(--text-muted); margin: 0 0 14px; }

/* Иконки Lucide: размер = font-size родителя, цвет = currentColor */
.lucide { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
.icon-thin .lucide { stroke-width: 1.6; }

/* Leaflet: собственный контекст наложения, чтобы слои карты не пробивались поверх модалок */
.leaflet-container { isolation: isolate; }
.leaflet-control-attribution.leaflet-control { position: absolute; }
/* Брендовый пин (divIcon) — без дефолтной рамки/фона + мягкая тень для отрыва от фона */
.leaflet-div-icon.placeo-map-pin { background: none; border: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }

/* Скрытие скроллбара у горизонтальных лент */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

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

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; }
}