/*
 * SEO CRM — panel-wide visual refinements on top of Filament's defaults.
 * Dark mode only — this CRM has no light theme (see AdminPanelProvider).
 * Plain CSS, hand-authored, served as a static asset (no build step).
 */

.dark .fi-sidebar {
    background: linear-gradient(180deg, rgba(20, 20, 32, 0.98) 0%, rgba(10, 10, 16, 0.98) 100%);
    border-inline-end-color: rgba(255, 255, 255, 0.06);
}

.dark .fi-topbar nav {
    background: rgba(10, 10, 16, 0.75);
    backdrop-filter: blur(10px);
    border-block-end-color: rgba(255, 255, 255, 0.06);
}

.dark .fi-sidebar-item-button {
    border-radius: 0.625rem;
}

.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, rgba(99, 91, 255, 0.16) 0%, rgba(99, 91, 255, 0.05) 100%);
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.25);
}

.dark .fi-main-ctn {
    background:
        radial-gradient(60rem 30rem at 100% -10%, rgba(99, 91, 255, 0.08), transparent 60%),
        radial-gradient(50rem 25rem at -10% 10%, rgba(245, 158, 11, 0.05), transparent 55%);
}

.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn {
    background-color: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}

.dark .fi-wi-stats-overview-stat {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.dark .fi-wi-stats-overview-stat:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

.dark .fi-simple-layout .fi-simple-main {
    background-color: rgba(20, 20, 30, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.dark body.fi-body {
    background-color: #08080c;
}

/* Единственная тема — тёмная, переключатель не нужен */
.fi-theme-switcher {
    display: none !important;
}

.fi-logo {
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #fff 0%, #b9b6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/*
 * Filament публикует свой CSS "вне слоёв" (без @layer), а наш Tailwind-билд (resources/css/app.css,
 * подключённый на панель, чтобы кастомные Livewire-вью вроде "Проверка форм" вообще получали свои
 * классы) использует нативные cascade layers. По спецификации CSS "внеслойные" стили всегда старше
 * "слойных" — независимо от специфичности. Из-за этого filament/filament/app.css сбрасывает
 * padding/margin в 0 на <button>, <input>, <select>, <textarea>, и это перебивает наши классы
 * px-*, py-*, m-* (они живут в @layer utilities). revert-layer откатывает именно этот сброс к тому, что дали
 * бы более ранние по каскаду (слойные) правила — то есть к нашим утилитам Tailwind.
 */
button,
input,
optgroup,
select,
textarea {
    padding: revert-layer;
    margin: revert-layer;
    color: revert-layer;
}

/*
 * Тот же конфликт, но для фона кнопок: Filament безусловно сбрасывает
 * button { background-color: transparent } — из-за этого наши цветные классы
 * (bg-indigo-500/20, bg-red-500/20 и т.п.) на <button> не применялись вообще.
 */
button {
    background-color: revert-layer;
    background-image: revert-layer;
}

/*
 * Тот же конфликт "внеслойный Filament CSS против слойного Tailwind v4", но для сдвигов
 * (переключатели Toggle, шеврон у Select и т.п.): Filament двигает элементы старым способом
 * через transform: translate(...), а наш Tailwind v4 — новым отдельным CSS-свойством
 * translate. Оба применяются ОДНОВРЕМЕННО и складываются, из-за чего "шарик" переключателя
 * улетает вдвое дальше, чем нужно, и наезжает на подпись рядом. Раз Filament уже полностью
 * (и правильно) двигает эти элементы через transform, отключаем у них наше отдельное
 * translate/scale/rotate, чтобы сдвиг применялся только один раз.
 */
.transform.rotate-180,
.transform.scale-100,
.transform.scale-95,
.transform.translate-x-0,
.transform.translate-x-5,
.transform.translate-x-12,
.transform.translate-x-full,
.transform.translate-y-12 {
    translate: none;
    scale: none;
    rotate: none;
}