/** * Фиксы Filament: непрозрачные выпадающие списки (select) и выравнивание карточек «Статистика». * Подключается из AppServiceProvider через HEAD_END (последний CSS в ), без Vite. */ /* Select / fi-dropdown-panel: плотный фон, поверх таблиц */ html.fi body.fi-body .fi-dropdown-panel, html.fi body.fi-body .fi-dropdown-panel.fi-scrollable { background-color: #ffffff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; --tw-bg-opacity: 1 !important; box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.08) !important; z-index: 2147483000 !important; isolation: isolate; } html.dark.fi body.fi-body .fi-dropdown-panel, html.dark.fi body.fi-body .fi-dropdown-panel.fi-scrollable { background-color: #1e293b !important; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25) !important; } html.fi body.fi-body .fi-select-input .fi-select-input-search-ctn { background-color: #ffffff !important; } html.dark.fi body.fi-body .fi-select-input .fi-select-input-search-ctn { background-color: #1e293b !important; } html.fi body.fi-body .fi-dropdown-panel .fi-select-input-option, html.fi body.fi-body .fi-dropdown-panel .fi-dropdown-list-item { background-color: #ffffff !important; } html.dark.fi body.fi-body .fi-dropdown-panel .fi-select-input-option, html.dark.fi body.fi-body .fi-dropdown-panel .fi-dropdown-list-item { background-color: #1e293b !important; } html.fi body.fi-body .fi-dropdown-panel .fi-select-input-option:hover, html.fi body.fi-body .fi-dropdown-panel .fi-dropdown-list-item:hover { background-color: #f8fafc !important; } html.dark.fi body.fi-body .fi-dropdown-panel .fi-select-input-option:hover, html.dark.fi body.fi-body .fi-dropdown-panel .fi-dropdown-list-item:hover { background-color: #334155 !important; } /* * Панели даты/времени и цвета: x-float....teleport → strategy:fixed. В glass перебиваем absolute из темы (иначе z-10 проигрывает следующей карточке). */ html.fi body.fi-body.pg-fi-theme--glass-premium .fi-fo-date-time-picker-panel, html.fi body.fi-body.pg-fi-theme--glass-premium .fi-fo-color-picker-panel { position: fixed !important; } html.fi body.fi-body .fi-fo-date-time-picker-panel, html.fi body.fi-body .fi-fo-color-picker-panel { background-color: #ffffff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; --tw-bg-opacity: 1 !important; isolation: isolate; z-index: 2147483000 !important; box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.08) !important; } html.dark.fi body.fi-body .fi-fo-date-time-picker-panel, html.dark.fi body.fi-body .fi-fo-color-picker-panel { background-color: #1e293b !important; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25) !important; } /* * Статистика (Stats overview): без кастомной display:grid — она ломала padding/позиционирование * относительно дефолта Filament (relative + мини-график absolute снизу). * Нужны min-width:0 у ячеек сетки виджета и перенос длинных подписей. */ html.fi body.fi-body .fi-wi-stats-overview .fi-grid-col { min-width: 0 !important; } html.fi body.fi-body .fi-wi-stats-overview-stat { position: relative !important; box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; padding: 1.5rem !important; } html.fi body.fi-body .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-content { min-width: 0 !important; max-width: 100% !important; } html.fi body.fi-body .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn { min-width: 0 !important; max-width: 100% !important; } html.fi body.fi-body .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label { overflow-wrap: anywhere !important; word-break: break-word !important; hyphens: auto; } html.fi body.fi-body .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value { overflow-wrap: anywhere !important; word-break: break-word !important; } html.fi body.fi-body .fi-wi-stats-overview .fi-section-content-ctn .fi-sc { align-items: stretch !important; } html.fi body.fi-body .fi-wi-stats-overview .fi-grid-col > .fi-sc-component { min-width: 0 !important; max-width: 100% !important; } /* Секции с aside (профиль Breezy и др.): уже не «треть экрана» под заголовок */ @media (min-width: 768px) { html.fi body.fi-body .fi-section.fi-aside { grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr) minmax(0, 1fr) !important; } html.fi body.fi-body .fi-section.fi-aside > .fi-section-content-ctn { min-width: 0 !important; max-width: 100% !important; } html.fi body.fi-body .fi-section.fi-aside .fi-section-header-text-ctn { min-width: 0 !important; max-width: 100% !important; } html.fi body.fi-body .fi-section.fi-aside .fi-section-header-heading, html.fi body.fi-body .fi-section.fi-aside .fi-section-header-description { overflow-wrap: anywhere !important; word-break: break-word !important; } } /* Таблица истории входов (кастомный blade): не раздувать карточку длинным User-Agent */ html.fi body.fi-body .pg-auth-log-table { table-layout: fixed !important; width: 100% !important; } html.fi body.fi-body .pg-auth-log-table .pg-auth-log-col-device { overflow-wrap: anywhere !important; word-break: break-word !important; max-width: 0; } /* «Проверка уязвимостей»: зазор между карточками-секциями (glass / grid страницы могли съедать space-y) */ html.fi body.fi-body .pg-security-check-stack { display: flex !important; flex-direction: column !important; row-gap: 3rem !important; } @media (min-width: 640px) { html.fi body.fi-body .pg-security-check-stack { row-gap: 3.75rem !important; } } /* * Таблицы: фильтры в заголовках столбцов (pg-col-filter). */ html.fi body.fi-body .fi-ta-header-cell .pg-col-filter, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter { display: flex; flex-direction: column; align-items: stretch; gap: 0.28rem; min-width: 5.5rem; max-width: 13rem; text-align: start; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter--date, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter--date { min-width: 10rem; max-width: 13rem; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter--range, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter--range { min-width: 6.5rem; max-width: 14rem; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-title, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-title { font-size: 0.6rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.055em; text-transform: uppercase; color: rgb(71 85 105); } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-select, html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-input, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-select, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-input { width: 100%; min-width: 0; box-sizing: border-box; border-radius: 0.35rem; border: 1px solid rgba(148, 163, 184, 0.65); background: rgba(255, 255, 255, 0.95); padding: 0.2rem 0.35rem; font-size: 0.75rem; line-height: 1.3; color: rgb(15 23 42); } /* Бюджет и даты: две строки (отдельный ряд на каждое поле) */ html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-range.pg-col-filter-range--stacked, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-range.pg-lead-col-filter-range--stacked { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-range-row, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-range-row { display: flex; flex-direction: row; align-items: center; gap: 0.35rem; min-width: 0; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-range-row .pg-col-filter-input, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-range-row .pg-lead-col-filter-input { flex: 1 1 auto; width: 100%; min-width: 0; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-suffix--in-title, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-suffix--in-title { margin-inline-start: 0.2rem; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.02em; white-space: nowrap; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-suffix, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-suffix { font-size: 0.65rem; color: rgb(100 116 139); white-space: nowrap; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-range-sep, html.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-range-sep { color: rgb(148 163 184); font-size: 0.7rem; flex: 0 0 auto; } html.dark.fi body.fi-body .fi-ta-header-cell .pg-col-filter-title, html.dark.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-title { color: rgb(148 163 184); } html.dark.fi body.fi-body .fi-ta-header-cell .pg-col-filter-suffix--in-title, html.dark.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-suffix--in-title { color: rgb(148 163 184); } html.dark.fi body.fi-body .fi-ta-header-cell .pg-col-filter-select, html.dark.fi body.fi-body .fi-ta-header-cell .pg-col-filter-input, html.dark.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-select, html.dark.fi body.fi-body .fi-ta-header-cell .pg-lead-col-filter-input { background: rgba(30, 41, 59, 0.95); border-color: rgba(100, 116, 139, 0.5); color: rgb(241 245 249); } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter--toggle .pg-col-filter-toggle { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; margin: 0; } html.fi body.fi-body .fi-ta-header-cell .pg-col-filter-title--inline { text-transform: none; letter-spacing: normal; font-size: 0.68rem; font-weight: 500; } /* * Glass premium: горизонтальный скролл у document (100vw у .fi-main-ctn / абсолютные блоки). * Этот файл в HEAD_END — перебивает app.css. Класс .pg-fi-glass-premium на ставит ранний скрипт + applyToBody. */ html.fi.pg-fi-glass-premium { overflow-x: clip; scrollbar-gutter: stable; } html.fi.pg-fi-glass-premium body.fi-body.pg-fi-theme--glass-premium { overflow-x: clip; max-width: 100%; } html.fi.pg-fi-glass-premium body.fi-body.pg-fi-theme--glass-premium .fi-layout { max-width: 100%; overflow-x: clip; } html.fi.pg-fi-glass-premium body.fi-body.pg-fi-theme--glass-premium .fi-layout > .fi-main-ctn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Топбар: вместо sm:w-screen (100vw) — ширина от контейнера, без «щели» у вертикального скролла */ html.fi.pg-fi-glass-premium body.fi-body.pg-fi-theme--glass-premium .fi-topbar .fi-global-search-results-ctn { width: 100% !important; max-width: 24rem !important; } /* См. fi-glass-premium-theme: внутренний скролл в .fi-main (дубль в HEAD_END для приоритета) */ html.fi.pg-fi-glass-premium:has(.fi-layout) { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } html.fi.pg-fi-glass-premium:has(.fi-layout) body.fi-body.pg-fi-theme--glass-premium { height: 100% !important; max-height: 100dvh !important; min-height: 0 !important; overflow-y: hidden !important; } html.fi.pg-fi-glass-premium:has(.fi-layout) body.fi-body.pg-fi-theme--glass-premium .fi-layout { flex: 1 1 0% !important; min-height: 0 !important; overflow: hidden !important; } html.fi.pg-fi-glass-premium:has(.fi-layout) body.fi-body.pg-fi-theme--glass-premium .fi-main-ctn { min-height: 0 !important; flex: 1 1 0% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } html.fi.pg-fi-glass-premium:has(.fi-layout) body.fi-body.pg-fi-theme--glass-premium .fi-main { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: clip !important; } html.fi.pg-fi-glass-premium:has(.fi-layout) body.fi-body.pg-fi-theme--glass-premium .fi-topbar-ctn { overflow: visible !important; } /* * Filament Impersonate + Glass: отступ под баннер — padding-top на body (опубликованный banner.blade.php), * не margin на html. Высота корня — полный вьюпорт; место под баннер внутри body. * Селекторы и для #impersonate-banner (stechstudio), и для .fi-impersonate-banner. */ html.fi.pg-fi-glass-premium:has(.fi-layout):has(#impersonate-banner), html.fi.pg-fi-glass-premium:has(.fi-layout):has(.fi-impersonate-banner), html.fi:has(body.pg-fi-theme--glass-premium):has(.fi-layout):has(#impersonate-banner), html.fi:has(body.pg-fi-theme--glass-premium):has(.fi-layout):has(.fi-impersonate-banner) { height: 100dvh !important; max-height: 100dvh !important; } html.fi.pg-fi-glass-premium:has(.fi-layout):has(#impersonate-banner) body.fi-body.pg-fi-theme--glass-premium, html.fi.pg-fi-glass-premium:has(.fi-layout):has(.fi-impersonate-banner) body.fi-body.pg-fi-theme--glass-premium, html.fi:has(body.pg-fi-theme--glass-premium):has(.fi-layout):has(#impersonate-banner) body.fi-body.pg-fi-theme--glass-premium, html.fi:has(body.pg-fi-theme--glass-premium):has(.fi-layout):has(.fi-impersonate-banner) body.fi-body.pg-fi-theme--glass-premium { max-height: 100dvh !important; } html.fi.pg-fi-glass-premium:has(.fi-layout):has(#impersonate-banner) .fi-topbar-ctn, html.fi.pg-fi-glass-premium:has(.fi-layout):has(.fi-impersonate-banner) .fi-topbar-ctn, html.fi:has(body.pg-fi-theme--glass-premium):has(.fi-layout):has(#impersonate-banner) .fi-topbar-ctn, html.fi:has(body.pg-fi-theme--glass-premium):has(.fi-layout):has(.fi-impersonate-banner) .fi-topbar-ctn { top: var(--impersonate-banner-height, 50px) !important; } /* Sticky topbar: если классы Glass на html ещё не применились, top под баннер всё равно нужен */ html.fi:has(.fi-layout):has(#impersonate-banner) .fi-topbar-ctn, html.fi:has(.fi-layout):has(.fi-impersonate-banner) .fi-topbar-ctn { top: var(--impersonate-banner-height, 50px) !important; } /* * Выбор панели после входа (is_admin): оверлей в духе Glass. */ .pg-post-login-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; box-sizing: border-box; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html.dark .pg-post-login-overlay { background: rgba(2, 6, 23, 0.65); } .pg-post-login-card { position: relative; width: 100%; max-width: 26rem; padding: 1.75rem 1.65rem 1.65rem; border-radius: 1.35rem; border: 1px solid rgba(255, 255, 255, 0.48); background: linear-gradient( 155deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.62) 45%, rgba(248, 250, 252, 0.82) 100% ); backdrop-filter: blur(22px) saturate(165%); -webkit-backdrop-filter: blur(22px) saturate(165%); box-shadow: 0 4px 28px rgba(15, 23, 42, 0.1), 0 28px 72px rgba(56, 189, 248, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.45) inset; } html.dark .pg-post-login-card { border-color: rgba(148, 163, 184, 0.28); background: linear-gradient( 155deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.82) 100% ); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07) inset; } .pg-post-login-card__glow { position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.2), transparent 45%), radial-gradient(circle at 80% 70%, rgba(129, 140, 248, 0.18), transparent 42%); pointer-events: none; z-index: 0; opacity: 0.85; } html.dark .pg-post-login-card__glow { opacity: 0.5; } .pg-post-login-card__title, .pg-post-login-card__text, .pg-post-login-card__actions { position: relative; z-index: 1; } .pg-post-login-card__title { margin: 0 0 0.65rem; font-family: 'Syne', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.2; color: rgb(15 23 42); } html.dark .pg-post-login-card__title { color: rgb(248 250 252); } .pg-post-login-card__text { margin: 0 0 1.35rem; font-size: 0.875rem; line-height: 1.55; color: rgb(71 85 105); } html.dark .pg-post-login-card__text { color: rgb(148 163 184); } .pg-post-login-card__mono { font-family: ui-monospace, monospace; font-size: 0.8125rem; font-weight: 600; color: rgb(2 132 199); } html.dark .pg-post-login-card__mono { color: rgb(56 189 248); } .pg-post-login-card__actions { display: flex; flex-direction: column; gap: 0.55rem; } .pg-post-login-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.65rem 1rem; border-radius: 0.875rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; border: none; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } @media (prefers-reduced-motion: reduce) { .pg-post-login-btn { transition: none; } } .pg-post-login-btn--primary { color: #fff; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-500) 35%, transparent); } .pg-post-login-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary-500) 42%, transparent); } .pg-post-login-btn--secondary { color: rgb(51 65 85); background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(148, 163, 184, 0.45); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .pg-post-login-btn--secondary:hover { background: rgba(255, 255, 255, 0.92); transform: translateY(-1px); } html.dark .pg-post-login-btn--secondary { color: rgb(226 232 240); background: rgba(30, 41, 59, 0.65); border-color: rgba(100, 116, 139, 0.45); } html.dark .pg-post-login-btn--secondary:hover { background: rgba(51, 65, 85, 0.75); } /* * Таблицы: переключатель сетки + поиск в одну строку, одна высота (как fi-input). * align-items: stretch + height:100% на кнопке раздували иконку выше поля поиска. */ html.fi body.fi-body .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; align-content: flex-start !important; gap: 0.75rem !important; min-width: 0 !important; } html.fi body.fi-body .fi-ta-header-toolbar > div:has(.fi-ta-search-field) .fi-ta-search-field { flex: 1 1 12rem !important; min-width: 0 !important; } html.fi body.fi-body .fi-ta-header-toolbar > div:has(.fi-ta-search-field) .fi-ta-layout-toggle { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; line-height: 0 !important; } /* Высота как у стандартного поля ввода Filament (h-10 / 2.5rem) */ html.fi body.fi-body .fi-ta-header-toolbar > div:has(.fi-ta-search-field) .fi-icon-btn.fi-ta-layout-toggle-btn { box-sizing: border-box !important; height: 2.5rem !important; width: 2.5rem !important; min-height: 2.5rem !important; max-height: 2.5rem !important; min-width: 2.5rem !important; max-width: 2.5rem !important; padding: 0 !important; } html.fi body.fi-body .fi-ta-header-toolbar > div:has(.fi-ta-search-field) .fi-icon-btn.fi-ta-layout-toggle-btn.fi-size-xl, html.fi body.fi-body .fi-ta-header-toolbar > div:has(.fi-ta-search-field) .fi-icon-btn.fi-ta-layout-toggle-btn.fi-size-lg { height: 2.5rem !important; width: 2.5rem !important; min-height: 2.5rem !important; min-width: 2.5rem !important; } /* На случай локальной обёртки fi-ta-search-with-toggle */ html.fi body.fi-body .fi-ta-search-with-toggle { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.75rem !important; flex: 1 1 auto !important; min-width: 0 !important; } /* * Кластер Users: поднавигация — 2FA + аватар в один ряд (Filament задаёт .fi-sidebar-item-icon фиксированный квадрат). */ html.fi body.fi-body .fi-sidebar-item-icon.fi-icon:has([data-pg-user-subnav-icons]) { width: auto !important; height: 1.5rem !important; min-width: 3.25rem !important; min-height: 0 !important; max-width: 3.25rem !important; max-height: 1.5rem !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; flex-shrink: 0 !important; overflow: visible !important; box-sizing: border-box !important; } html.fi body.fi-body .fi-sidebar-item:has(.fi-sidebar-item-icon:has([data-pg-user-subnav-icons])) > .fi-sidebar-item-btn { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; } html.fi body.fi-body .fi-sidebar-item-icon.fi-icon:has([data-pg-user-subnav-icons]) [data-pg-user-subnav-icons] { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 0.375rem !important; } html.fi body.fi-body .fi-sidebar-item-icon.fi-icon:has([data-pg-user-subnav-icons]) [data-pg-user-subnav-icons] > * { width: 1.5rem !important; height: 1.5rem !important; min-width: 1.5rem !important; min-height: 1.5rem !important; max-width: 1.5rem !important; max-height: 1.5rem !important; box-sizing: border-box !important; } html.fi body.fi-body .fi-sidebar-item-icon.fi-icon:has([data-pg-user-subnav-icons]) [data-pg-user-subnav-icons] > :last-child { border-radius: 9999px !important; overflow: hidden !important; border-color: #0a0a0a !important; }