/* ══════════════════════════════════════════════
   Enter Group – Icon-Only Sidebar + Theme
   ══════════════════════════════════════════════ */

/* Alpine.js cloak — hide until Alpine initialises */
[x-cloak] { display: none !important; }

/* ─── CSS Variables ─── */
:root {
    --sb-bg:         #111122;
    --sb-circle:     rgba(255,255,255,.06);
    --sb-circle-h:   rgba(255,255,255,.12);
    --sb-active:     #FFFFFF;
    --sb-icon:       rgba(255,255,255,.55);
    --sb-icon-a:     #4338CA;
    --db-bg:         #F0F2F7;
    --db-card:       #FFFFFF;
    --db-card-alt:   #F3F4F6;
    --db-text:       #111827;
    --db-text2:      #6B7280;
    --db-text3:      #9CA3AF;
    --db-border:     #E5E7EB;
}
html.dark {
    --sb-bg:         #0D0D1A;
    --sb-circle:     rgba(255,255,255,.06);
    --sb-circle-h:   rgba(255,255,255,.12);
    --sb-active:     #FFFFFF;
    --sb-icon:       rgba(255,255,255,.5);
    --sb-icon-a:     #4338CA;
    --db-bg:         #0D0D1A;
    --db-card:       #161628;
    --db-card-alt:   #1C1C2E;
    --db-text:       #FFFFFF;
    --db-text2:      #9CA3AF;
    --db-text3:      #4B5563;
    --db-border:     #2A2A3E;
}

/* ─── SIDEBAR SHELL ─── */
.fi-sidebar {
    width: 5rem !important;
    min-width: 5rem !important;
    max-width: 5rem !important;
    background: var(--sb-bg) !important;
    border-right: none !important;
    padding: .5rem .625rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
}

.fi-sidebar-nav {
    width: 100% !important;
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
}

/* ─── HIDE EVERYTHING EXCEPT ICONS ─── */
.fi-sidebar-item-label,
.fi-sidebar-group-label,
.fi-sidebar-group-label *,
.fi-topbar-breadcrumbs,
.fi-breadcrumbs,
.fi-page-header {
    display: none !important;
}

/* Brand – show only initials */
.fi-sidebar-header {
    width: 100% !important;
    padding: .75rem 0 1rem !important;
    display: flex !important;
    justify-content: center !important;
    border-bottom: none !important;
}

.fi-brand-name {
    display: none !important;
}

.fi-sidebar-header::after {
    content: 'EG';
    font-size: .8125rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -.01em;
    background: linear-gradient(135deg, #7C6BEB, #B8AEFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Collapse toggle – hide */
.fi-sidebar-collapse-btn,
[x-on\:click="sidebarOpen = ! sidebarOpen"],
.fi-sidebar > button,
.fi-sidebar header > button {
    display: none !important;
}

/* ─── NAV GROUPS ─── */
.fi-sidebar-nav-groups {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .25rem !important;
    padding: 0 !important;
    list-style: none !important;
}

.fi-sidebar-group {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fi-sidebar-group:not(:last-child)::after {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: .5rem auto;
}

.fi-sidebar-group-items {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .3rem !important;
    padding: 0 !important;
    list-style: none !important;
}

.fi-sidebar-item {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
}

/* ─── NAV BUTTON ─── */
.fi-sidebar-item-btn {
    position: relative !important;
    width: 3rem !important;
    height: 2.75rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    border-radius: .75rem !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    color: var(--sb-icon) !important;
    transition: background .15s, color .15s !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

.fi-sidebar-item-btn:hover {
    background: var(--sb-circle-h) !important;
    color: rgba(255,255,255,.9) !important;
}

/* ─── ACTIVE STATE = WHITE CARD ─── */
.fi-sidebar-item-btn.fi-active,
.fi-sidebar-item-btn[aria-current="page"],
.fi-sidebar-item-btn[aria-current="true"],
.fi-sidebar-item-btn[data-active],
li.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: #FFFFFF !important;
    color: #6366F1 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}

.fi-sidebar-item-btn.fi-active svg,
.fi-sidebar-item-btn[aria-current="page"] svg,
.fi-sidebar-item-btn[aria-current="true"] svg {
    color: #6366F1 !important;
    stroke: currentColor !important;
}

/* Outline heroicons: stroke follows text color */
.fi-sidebar-nav .fi-sidebar-item-btn .fi-icon > svg {
    stroke: currentColor !important;
}

/* ─── ICON SIZE ─── */
.fi-sidebar-item-icon,
.fi-sidebar-item-btn svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}

/* ─── TOOLTIP ON HOVER (CSS only) ─── */
.fi-sidebar-item-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + .625rem);
    top: 50%;
    transform: translateY(-50%) scale(.95);
    background: #1E1E34;
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .35rem .75rem;
    border-radius: .5rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s, transform .15s;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* Sidebar footer – logout button */
.fi-sidebar-footer {
    width: 100% !important;
    padding: .75rem 0 !important;
    display: flex !important;
    justify-content: center !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    margin-top: auto !important;
}

.fi-sidebar-footer button,
.fi-sidebar-footer a {
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 50% !important;
    background: var(--sb-circle) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sb-icon) !important;
    transition: background .15s, color .15s !important;
    border: none !important;
}

.fi-sidebar-footer button:hover,
.fi-sidebar-footer a:hover {
    background: var(--sb-circle-h) !important;
    color: #FFFFFF !important;
}

/* ─── TOPBAR ─── */
.fi-topbar {
    background: var(--db-bg) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

html.dark .fi-topbar {
    background: var(--db-bg) !important;
}

/* ─── MAIN CONTENT ─── */
.fi-main-ctn,
.fi-main {
    background: var(--db-bg) !important;
    /* Remove Filament's default max-width so table fills the space */
    max-width: none !important;
    width: 100% !important;
}

html.dark .fi-main-ctn,
html.dark .fi-main {
    background: var(--db-bg) !important;
}

/* ─── PAGE CONTENT ─── */
.fi-page > .fi-page-content > .fi-page-content-ctn,
.fi-page-content-ctn {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Resource list page — full width, comfortable padding */
.fi-resource-list-page,
.fi-list-page,
.fi-page {
    max-width: none !important;
    width: 100% !important;
}

/* Page inner padding (header + table spacing) */
.fi-page-content {
    padding: 1.5rem 1.75rem !important;
}

/* Table takes 100% of available space */
.fi-ta-ctn {
    width: 100% !important;
    max-width: none !important;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

/* ════════════════════════════════════
   TOPBAR RIGHT – Notifications + Avatar
   ════════════════════════════════════ */

/* Topbar: always dark strip */
.fi-topbar-ctn,
.fi-topbar {
    background: #0D0D1A !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

/* Remove the collapse sidebar button in topbar */
.fi-topbar-collapse-sidebar-btn-ctn,
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn,
.fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-close-collapse-sidebar-btn {
    display: none !important;
}

/* Right side alignment */
.fi-topbar-end {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding-right: 1.25rem !important;
}

/* ── Custom topbar action container ── */
.eg-th-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* Notification pill: dark rounded rectangle with bell + count */
.eg-notif-pill {
    display: flex;
    align-items: center;
    gap: .375rem;
    background: #1A1A2E;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 2rem;
    padding: .5rem .875rem;
    color: #CBD5E1;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    line-height: 1;
}

.eg-notif-pill:hover {
    background: #252540;
    color: #FFFFFF;
}

/* The "+N" count inside the pill */
.eg-nb {
    color: #A3E635;
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .01em;
}

/* Search circle */
.eg-search-circle {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: #1A1A2E;
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.eg-search-circle:hover {
    background: #252540;
    color: #FFFFFF;
}

/* ── User avatar circle ── */
.fi-user-menu-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: transform .15s !important;
}

.fi-user-menu-trigger:hover {
    transform: scale(1.06) !important;
}

/* Avatar image: proper circle */
.fi-user-avatar,
.fi-avatar {
    width: 2.625rem !important;
    height: 2.625rem !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 2px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}

/* Hide text/chevron from user menu trigger (sidebar position) */
.fi-user-menu-trigger-text,
.fi-user-menu-trigger svg:last-child {
    display: none !important;
}

/* Topbar nav groups (breadcrumb-style navigation items) */
.fi-topbar-nav-groups,
.fi-topbar-item {
    display: none !important;
}

/* ══════════════════════════════════════════════
   Table UX — Documents-style clean design
   ══════════════════════════════════════════════ */

/* Table container card */
.fi-ta-ctn {
    background: #FFFFFF !important;
    border-radius: 1rem !important;
    border: 1px solid #F0F1F5 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05), 0 4px 24px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
}
html.dark .fi-ta-ctn {
    background: #161628 !important;
    border-color: #2A2A3E !important;
}

/* Table header — see dedicated section below for full rules */

/* ── Column headers ── */
.fi-ta-header-cell {
    font-size: .6875rem !important;
    font-weight: 700 !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    padding: .75rem 1.25rem !important;
    background: #F9FAFB !important;
    border-bottom: 1px solid #F0F1F5 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
html.dark .fi-ta-header-cell {
    background: #1C1C2E !important;
    color: #6B7280 !important;
    border-bottom-color: #2A2A3E !important;
}

/* ── Table rows — spacious like in screenshot ── */
.fi-ta-row {
    height: 80px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    transition: background .1s !important;
}
.fi-ta-row:nth-child(even) {
    background: transparent !important;
}
.fi-ta-row:hover {
    background: #F5F6FF !important;
}
html.dark .fi-ta-row {
    border-bottom-color: #1E1E34 !important;
}
html.dark .fi-ta-row:hover {
    background: #1C1C35 !important;
}

/* ── Table cells ── */
.fi-ta-cell {
    padding: 0 1.5rem !important;
    vertical-align: middle !important;
    height: 80px !important;
    white-space: nowrap !important;
}

/* First cell — same padding, no special avatar width */
.fi-ta-cell:first-child {
    padding-left: 1.75rem !important;
}

/* Avatar column — ensure flex items align */
.fi-ta-col-avatar_col > *,
.fi-ta-col-avatar_name > * {
    display: flex !important;
    align-items: center !important;
}

/* Name + subtitle column — allow wrap only here */
.fi-ta-col-name .fi-ta-cell-content,
.fi-ta-col-name {
    white-space: normal !important;
    min-width: 140px !important;
}

/* Badges: vertically centered, no height jump */
.fi-badge {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* ── Table footer wrapper ── */
.fi-ta-footer {
    padding: .875rem 1.5rem !important;
    border-top: 1px solid #F0F1F5 !important;
    background: #FFFFFF !important;
}
html.dark .fi-ta-footer {
    background: #161628 !important;
    border-top-color: #2A2A3E !important;
}

/* ── Pagination root ── */
.fi-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

/* ── Left: "Показано ... / Show N" ── */
.fi-pagination-overview,
.fi-pagination-records-per-page {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    font-size: .8125rem !important;
    color: #6B7280 !important;
    white-space: nowrap !important;
}

/* Per-page select dropdown */
.fi-pagination-records-per-page-select,
select[wire\:model\\.live="tableRecordsPerPage"] {
    border: 1.5px solid #E5E7EB !important;
    border-radius: .5rem !important;
    padding: .25rem .5rem !important;
    font-size: .8125rem !important;
    color: #374151 !important;
    background: #fff !important;
    outline: none !important;
    cursor: pointer !important;
    transition: border-color .12s !important;
    height: 2rem !important;
    appearance: auto !important;
}
.fi-pagination-records-per-page-select:hover {
    border-color: #6366F1 !important;
}
html.dark .fi-pagination-records-per-page-select {
    background: #1C1C2E !important;
    border-color: #2A2A3E !important;
    color: #E5E7EB !important;
}

/* ── Page buttons row ── */
.fi-pagination-pages {
    display: flex !important;
    align-items: center !important;
    gap: .25rem !important;
}

/* Every page number button — plain, no border */
.fi-pagination-btn,
.fi-pagination-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.375rem !important;
    height: 2.375rem !important;
    padding: 0 .25rem !important;
    border-radius: .75rem !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all .12s !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

/* Hover — subtle tint */
.fi-pagination-btn:hover,
.fi-pagination-item:hover {
    background: #F3F4F6 !important;
    color: #374151 !important;
    border-radius: .75rem !important;
}
html.dark .fi-pagination-btn:hover,
html.dark .fi-pagination-item:hover {
    background: rgba(255,255,255,.08) !important;
    color: #E5E7EB !important;
}

/* ── Active page — filled indigo rounded square ── */
.fi-pagination-btn[aria-current="page"],
.fi-pagination-item[aria-current="page"] {
    background: #6366F1 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: .75rem !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.4) !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
}

/* ── Prev / Next — стрелки-кнопки (как в референсе) ── */
.fi-pagination-prev-btn,
.fi-pagination-next-btn,
[wire\:click*="previousPage"],
[wire\:click*="nextPage"] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: .75rem !important;
    border: 1.5px solid #E5E7EB !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    transition: all .15s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
}

/* SVG-стрелка влево (Предыдущая) */
.fi-pagination-prev-btn::before,
[wire\:click*="previousPage"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    background-size: 1.125rem !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* SVG-стрелка вправо (Следующая) */
.fi-pagination-next-btn::before,
[wire\:click*="nextPage"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
    background-size: 1.125rem !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Hover — фиолетовая стрелка */
.fi-pagination-prev-btn:hover:not(:disabled)::before,
[wire\:click*="previousPage"]:hover:not(:disabled)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
}
.fi-pagination-next-btn:hover:not(:disabled)::before,
[wire\:click*="nextPage"]:hover:not(:disabled)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

.fi-pagination-prev-btn:hover:not(:disabled),
.fi-pagination-next-btn:hover:not(:disabled),
[wire\:click*="previousPage"]:hover:not(:disabled),
[wire\:click*="nextPage"]:hover:not(:disabled) {
    border-color: #A5B4FC !important;
    background: #EEF2FF !important;
    box-shadow: 0 2px 8px rgba(99,102,241,.18) !important;
    transform: scale(1.06) !important;
}

.fi-pagination-prev-btn:disabled,
.fi-pagination-next-btn:disabled,
[wire\:click*="previousPage"]:disabled,
[wire\:click*="nextPage"]:disabled {
    opacity: .35 !important;
    cursor: default !important;
    transform: none !important;
    box-shadow: none !important;
}

html.dark .fi-pagination-prev-btn,
html.dark .fi-pagination-next-btn,
html.dark [wire\:click*="previousPage"],
html.dark [wire\:click*="nextPage"] {
    background: #1C1C2E !important;
    border-color: #2A2A3E !important;
}
html.dark .fi-pagination-prev-btn::before,
html.dark .fi-pagination-next-btn::before,
html.dark [wire\:click*="previousPage"]::before,
html.dark [wire\:click*="nextPage"]::before {
    filter: brightness(2) !important;
}

/* Ellipsis dots (...) */
.fi-pagination-ellipsis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.375rem !important;
    height: 2.375rem !important;
    font-size: 1rem !important;
    color: #9CA3AF !important;
    letter-spacing: .05em !important;
    user-select: none !important;
}

/* Badge polish */
.fi-badge {
    border-radius: .5rem !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    padding: .25rem .625rem !important;
}

/* ── Table action buttons — rounded colored squares like reference ── */
.fi-ta-actions {
    display: flex !important;
    gap: .375rem !important;
    align-items: center !important;
}

/* ROW action buttons — icon-only squares */
.fi-ta-row .fi-ta-actions .fi-btn,
.fi-ta-record-actions .fi-btn {
    width: 2.375rem !important;
    height: 2.375rem !important;
    min-width: 2.375rem !important;
    padding: 0 !important;
    border-radius: .75rem !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .15s !important;
    box-shadow: none !important;
}
.fi-ta-row .fi-ta-actions .fi-btn svg,
.fi-ta-record-actions .fi-btn svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

/* HEADER action buttons — full label + icon */
.fi-ta-header .fi-ta-actions .fi-btn {
    width: auto !important;
    min-width: auto !important;
    height: 2.375rem !important;
    padding: 0 1rem !important;
    border-radius: .75rem !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    font-size: .8125rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: all .15s !important;
    box-shadow: none !important;
}
.fi-ta-header .fi-ta-actions .fi-btn svg {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
}

/* ── Colour rules for ALL fi-ta-actions buttons (rows + header) ── */

/* Green / Success */
.fi-ta-actions .fi-btn-color-success {
    background: rgba(16,185,129,.12) !important;
    color: #10B981 !important;
}
.fi-ta-actions .fi-btn-color-success:hover {
    background: #10B981 !important;
    color: #fff !important;
}

/* Header success — solid fill so label is readable */
.fi-ta-header .fi-ta-actions .fi-btn-color-success {
    background: #10B981 !important;
    color: #fff !important;
}
.fi-ta-header .fi-ta-actions .fi-btn-color-success:hover {
    background: #059669 !important;
}

/* Blue/Indigo — Primary / Gray */
.fi-ta-actions .fi-btn-color-primary,
.fi-ta-actions .fi-btn-color-gray {
    background: rgba(99,102,241,.1) !important;
    color: #6366F1 !important;
}
.fi-ta-actions .fi-btn-color-primary:hover,
.fi-ta-actions .fi-btn-color-gray:hover {
    background: #6366F1 !important;
    color: #fff !important;
}

/* Header primary/gray — solid */
.fi-ta-header .fi-ta-actions .fi-btn-color-primary,
.fi-ta-header .fi-ta-actions .fi-btn-color-gray {
    background: #6366F1 !important;
    color: #fff !important;
}
.fi-ta-header .fi-ta-actions .fi-btn-color-primary:hover,
.fi-ta-header .fi-ta-actions .fi-btn-color-gray:hover {
    background: #4F46E5 !important;
}

/* Info */
.fi-ta-actions .fi-btn-color-info {
    background: rgba(14,165,233,.1) !important;
    color: #0EA5E9 !important;
}
.fi-ta-actions .fi-btn-color-info:hover {
    background: #0EA5E9 !important;
    color: #fff !important;
}

/* Warning */
.fi-ta-actions .fi-btn-color-warning {
    background: rgba(245,158,11,.1) !important;
    color: #F59E0B !important;
}
.fi-ta-actions .fi-btn-color-warning:hover {
    background: #F59E0B !important;
    color: #fff !important;
}

/* Red — Danger */
.fi-ta-actions .fi-btn-color-danger {
    background: rgba(239,68,68,.1) !important;
    color: #EF4444 !important;
}
.fi-ta-actions .fi-btn-color-danger:hover {
    background: #EF4444 !important;
    color: #fff !important;
}

/* Header danger — solid */
.fi-ta-header .fi-ta-actions .fi-btn-color-danger {
    background: #EF4444 !important;
    color: #fff !important;
}
.fi-ta-header .fi-ta-actions .fi-btn-color-danger:hover {
    background: #DC2626 !important;
}

/* Dark mode row buttons */
html.dark .fi-ta-row .fi-ta-actions .fi-btn-color-primary,
html.dark .fi-ta-row .fi-ta-actions .fi-btn-color-gray {
    background: rgba(99,102,241,.18) !important;
}
html.dark .fi-ta-row .fi-ta-actions .fi-btn-color-danger {
    background: rgba(239,68,68,.18) !important;
}
html.dark .fi-ta-row .fi-ta-actions .fi-btn-color-success {
    background: rgba(16,185,129,.18) !important;
}

/* Create button */
.fi-page-header-actions .fi-btn-color-primary {
    background: #6366F1 !important;
    border-color: #6366F1 !important;
    border-radius: .75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
}

/* Page title */
.fi-page-heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    letter-spacing: -.03em !important;
}
html.dark .fi-page-heading {
    color: #F9FAFB !important;
}

/* ══════════════════════════════════════════════
   FORM REDESIGN — modern clean aesthetic
   ══════════════════════════════════════════════ */

/* ── Page background ── */
.fi-simple-main,
.fi-simple-page {
    background: #F5F6FA !important;
}

/* ── Section cards ── */
.fi-section {
    background: #FFFFFF !important;
    border-radius: 1.125rem !important;
    border: 1.5px solid #F0F1F5 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.03) !important;
    overflow: hidden !important;
    margin-bottom: 1.25rem !important;
}
html.dark .fi-section {
    background: #161628 !important;
    border-color: #2A2A3E !important;
}

.fi-section-header {
    padding: 1.125rem 1.5rem .25rem !important;
    border-bottom: none !important;
}
.fi-section-header-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -.02em !important;
}
html.dark .fi-section-header-heading {
    color: #F3F4F6 !important;
}

.fi-section-content {
    padding: 1rem 1.5rem 1.5rem !important;
}
.fi-section-content-ctn {
    padding: 0 !important;
}

/* ── Field labels ── */
.fi-fo-field-wrp-label,
.fi-label {
    font-size: .8125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: .375rem !important;
    letter-spacing: .01em !important;
}
html.dark .fi-fo-field-wrp-label,
html.dark .fi-label {
    color: #D1D5DB !important;
}

/* Helper text */
.fi-fo-helper-text,
.fi-hint {
    font-size: .75rem !important;
    color: #9CA3AF !important;
    margin-top: .3rem !important;
    line-height: 1.5 !important;
}

/* ── Remove Filament's own wrapper border/bg (prevents double border) ── */
.fi-input-wrp,
.fi-fo-text-input-wrp,
.fi-fo-textarea-wrp,
.fi-fo-select-wrp,
.fi-fo-date-time-picker-input-wrp {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ── Text inputs ── */
.fi-input,
input[type="text"].fi-input,
input[type="email"].fi-input,
input[type="number"].fi-input,
input[type="password"].fi-input,
input[type="url"].fi-input,
input[type="tel"].fi-input,
textarea.fi-input {
    border: 1.5px solid #E5E7EB !important;
    border-radius: .875rem !important;
    padding: .8125rem 1rem !important;
    font-size: .9375rem !important;
    color: #111827 !important;
    background: #FAFBFC !important;
    transition: border-color .15s, box-shadow .15s, background .15s !important;
    width: 100% !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    outline: none !important;
}
.fi-input:focus {
    border-color: #6366F1 !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
.fi-input::placeholder { color: #C4C9D4 !important; }

html.dark .fi-input {
    background: #1C1C2E !important;
    border-color: #2A2A3E !important;
    color: #F3F4F6 !important;
}
html.dark .fi-input:focus {
    border-color: #6366F1 !important;
    background: #22223A !important;
}

/* ── Textarea ── */
textarea.fi-input,
.fi-fo-textarea textarea {
    min-height: 96px !important;
    resize: vertical !important;
    border-radius: .875rem !important;
}

/* ── Select ── */
.fi-select-input,
select.fi-input {
    border: 1.5px solid #E5E7EB !important;
    border-radius: .875rem !important;
    padding: .8125rem 2.5rem .8125rem 1rem !important;
    font-size: .9375rem !important;
    color: #111827 !important;
    background: #FAFBFC !important;
    transition: border-color .15s !important;
    appearance: none !important;
    cursor: pointer !important;
}
.fi-select-input:focus {
    border-color: #6366F1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
    outline: none !important;
}
html.dark .fi-select-input {
    background: #1C1C2E !important;
    border-color: #2A2A3E !important;
    color: #F3F4F6 !important;
}

/* ── Radio buttons — card style ── */
.fi-radio-option {
    display: flex !important;
    align-items: center !important;
    gap: .625rem !important;
    padding: .75rem 1rem !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: .875rem !important;
    cursor: pointer !important;
    background: #FAFBFC !important;
    transition: all .15s !important;
    user-select: none !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    flex: 1 !important;
    min-width: 100px !important;
}
.fi-radio-option:hover {
    border-color: #A5B4FC !important;
    background: #EEF2FF !important;
}
.fi-radio-option:has(input:checked) {
    border-color: #6366F1 !important;
    background: #EEF2FF !important;
    color: #4338CA !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

/* Hide native radio input dot */
.fi-radio-option input[type="radio"] {
    display: none !important;
}

/* Inline radios — single row, centered */
.fi-radio-list-inline {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .625rem !important;
    justify-content: center !important;
    align-items: center !important;
}
.fi-radio-list-inline .fi-radio-option {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Non-inline radio lists — also single row centered */
.fi-fo-radio .fi-radio-list:not(.fi-radio-list-inline) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .625rem !important;
    justify-content: center !important;
    align-items: center !important;
}
.fi-fo-radio .fi-radio-list:not(.fi-radio-list-inline) .fi-radio-option {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ── Checkbox (single) ── */
.fi-checkbox-input {
    width: 1.125rem !important;
    height: 1.125rem !important;
    border: 1.5px solid #D1D5DB !important;
    border-radius: .375rem !important;
    accent-color: #6366F1 !important;
    cursor: pointer !important;
}

/* ── Tags input ── */
.fi-fo-tags-input-field {
    border: 1.5px solid #E5E7EB !important;
    border-radius: .875rem !important;
    padding: .5rem .875rem !important;
    background: #FAFBFC !important;
    min-height: 2.875rem !important;
    transition: border-color .15s !important;
}
.fi-fo-tags-input-field:focus-within {
    border-color: #6366F1 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
.fi-badge-item {
    background: #EEF2FF !important;
    color: #4338CA !important;
    border-radius: .5rem !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    padding: .2rem .6rem !important;
}

/* ── KeyValue (prices table) ── */
.fi-fo-key-value-table {
    border-radius: .875rem !important;
    border: 1.5px solid #E5E7EB !important;
    overflow: hidden !important;
}
.fi-fo-key-value-row td {
    padding: .625rem .875rem !important;
    border-bottom: 1px solid #F3F4F6 !important;
}
.fi-fo-key-value-row td input {
    border: 1.5px solid #E5E7EB !important;
    border-radius: .625rem !important;
    padding: .5rem .75rem !important;
    font-size: .875rem !important;
    width: 100% !important;
    background: #FAFBFC !important;
}
.fi-fo-key-value-row td input:focus {
    border-color: #6366F1 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,.1) !important;
}

/* KeyValue header */
.fi-fo-key-value-header th {
    background: #F9FAFB !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: .625rem .875rem !important;
}

/* ── Form submit / action buttons ── */
.fi-form-actions,
.fi-fo-actions {
    padding: 1.5rem 0 .5rem !important;
}

.fi-btn-color-primary {
    background: #111827 !important;
    border: none !important;
    border-radius: .875rem !important;
    padding: .875rem 2rem !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background .15s, transform .1s !important;
    box-shadow: 0 4px 14px rgba(17,24,39,.25) !important;
    letter-spacing: -.01em !important;
    min-width: 160px !important;
}
.fi-btn-color-primary:hover {
    background: #1F2937 !important;
    transform: translateY(-1px) !important;
}

/* ── DateTimePicker ── */
.fi-fo-date-time-picker input {
    border: 1.5px solid #E5E7EB !important;
    border-radius: .875rem !important;
    padding: .8125rem 1rem !important;
    font-size: .9375rem !important;
    color: #111827 !important;
    background: #FAFBFC !important;
}
.fi-fo-date-time-picker input:focus {
    border-color: #6366F1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
    outline: none !important;
}

/* ── Field gap ── */
.fi-fo-component-ctn {
    gap: 1.125rem !important;
}

/* ── Grid spacing ── */
.fi-fo-grid {
    gap: 1rem !important;
}

/* ── Form page layout ── */
.fi-resource-create-page .fi-page-content,
.fi-resource-edit-page .fi-page-content {
    padding: 1.5rem 1.75rem !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}

/* ════════════════════════════════════════════════════════
   TABLE HEADER: keep export buttons on one line, full width
   ════════════════════════════════════════════════════════ */

/* Header actions row – flex, no wrap, buttons stay full size */
.fi-ta-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .5rem !important;
    padding: .75rem 1.25rem !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #F3F4F6 !important;
}
html.dark .fi-ta-header {
    background: #161628 !important;
    border-bottom-color: #2A2A3E !important;
}
.fi-ta-header .fi-ta-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .5rem !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
}
.fi-ta-header .fi-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
}
.fi-ta-header .fi-btn span {
    white-space: nowrap !important;
}

/* ════════════════════════════════════════════════════════
   TABLE FILTERS: AboveContent inline styling
   ════════════════════════════════════════════════════════ */

/* Make the filter form horizontal */
.fi-ta-filters-above-content-ctn .fi-ta-filters {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.fi-ta-filters-above-content-ctn .fi-ta-filters-header { display: none !important; }
.fi-ta-filters-above-content-ctn .fi-ta-filters > form,
.fi-ta-filters-above-content-ctn .fi-fo-component-ctn,
.fi-ta-filters-above-content-ctn .fi-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each filter field wrapper: horizontal, compact */
.fi-ta-filters-above-content-ctn .fi-fo-field-wrp {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}
.fi-ta-filters-above-content-ctn .fi-fo-field-wrp-label {
    display: none !important;
}
.fi-ta-filters-above-content-ctn .fi-fo-field-wrp-content {
    margin: 0 !important;
}

/* Style select inputs as pill dropdowns */
.fi-ta-filters-above-content-ctn select,
.fi-ta-filters-above-content-ctn .fi-select-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: .75rem !important;
    padding: .4rem 2rem .4rem .875rem !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    background: #fff !important;
    cursor: pointer !important;
    min-width: 110px !important;
    height: 2.375rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.fi-ta-filters-above-content-ctn select:hover,
.fi-ta-filters-above-content-ctn .fi-select-input:hover {
    border-color: #93C5FD !important;
}
.fi-ta-filters-above-content-ctn select:focus,
.fi-ta-filters-above-content-ctn .fi-select-input:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
    outline: none !important;
}

/* Wrapper around each select (Filament wraps it) */
.fi-ta-filters-above-content-ctn .fi-input-wrp,
.fi-ta-filters-above-content-ctn .fi-fo-select-wrp {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Fix reset filters button placement */
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn {
    display: none !important;
}

/* ════════════════════════════════════════════════════════
   RANGE SLIDER THUMBS
   ════════════════════════════════════════════════════════ */
.eg-range-thumb {
    pointer-events: none !important;
}
.eg-range-thumb::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2.5px solid #6366F1 !important;
    box-shadow: 0 2px 8px rgba(99,102,241,.35) !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.eg-range-thumb::-webkit-slider-thumb:hover {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 6px rgba(99,102,241,.18) !important;
}
.eg-range-thumb::-moz-range-thumb {
    width: 1.125rem !important;
    height: 1.125rem !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2.5px solid #6366F1 !important;
    box-shadow: 0 2px 8px rgba(99,102,241,.35) !important;
    cursor: pointer !important;
    pointer-events: all !important;
}

/* ── СМИ format pill buttons — hover & active states ── */
[data-format-pill] {
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease !important;
}
[data-format-pill]:hover {
    transform: translateY(-1px) !important;
    opacity: .88 !important;
}
[data-format-pill]:active {
    transform: translateY(0) scale(.96) !important;
}

/* ── Language CheckboxList — single row, no wrap ── */
.eg-lang-checklist ul,
.eg-lang-checklist > div > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}
.eg-lang-checklist li {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.eg-lang-checklist li label {
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    font-size: .875rem !important;
}