@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --admin-primary: #2563eb;
    --admin-primary-hover: #1d4ed8;
    --admin-primary-soft: rgba(37, 99, 235, 0.1);
    --admin-primary-border: rgba(37, 99, 235, 0.18);
    --admin-background: #1b2e4a;
    --admin-card: #28436c;
    --admin-card-soft: #31517f;
    --admin-sidebar: #080c16;
    --admin-border: rgba(255, 255, 255, 0.12);
    --admin-border-strong: rgba(255, 255, 255, 0.18);
    --admin-border-soft: rgba(255, 255, 255, 0.08);
    --admin-title: #ffffff;
    --admin-text: #e5e7eb;
    --admin-text-soft: #a1a1aa;
    --admin-success: #10b981;
    --admin-warning: #f59e0b;
    --admin-danger: #ef4444;
    --admin-purple: #8b5cf6;
    --admin-cyan: #06b6d4;
    --admin-sidebar-width: 260px;
    --admin-topbar-height: 72px;
    --admin-content-padding: 12px;
    --admin-gap: 14px;
    --admin-card-height: 120px;
    --admin-card-radius: 16px;
    --admin-button-radius: 10px;
    --admin-button-height: 44px;
    --admin-input-height: 44px;
    --admin-table-header-height: 52px;
    --admin-table-row-height: 56px;
    --admin-search-width: 320px;
    --admin-avatar-size: 40px;
    --admin-menu-gap: 6px;
    --admin-menu-radius: 10px;
    --admin-logo-height: 60px;
    --admin-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 16px 40px rgba(0, 0, 0, 0.32);
    --admin-font-sans: "Inter", "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
.fi-body,
.fi-layout,
.fi-main,
.fi-page,
.fi-simple-main {
    background: var(--admin-background);
    color: var(--admin-text);
    font-family: var(--admin-font-sans);
    font-size: 14px;
}

body,
.fi {
    color: var(--admin-text);
}

* {
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.fi-main-ctn {
    background: var(--admin-background);
    max-width: none;
}

.fi-main {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

.fi-main,
.fi-page,
.fi-page-content,
.fi-page-main,
.fi-page-header,
.fi-page-header-main-ctn,
.fi-wi {
    gap: var(--admin-gap);
}

.fi-main-ctn,
.fi-page-content {
    padding: var(--admin-content-padding);
}

.fi-page-header {
    margin-bottom: 0;
}

.fi-page-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-dropdown-header-label,
.fi-empty-state-heading,
.fi-simple-header-heading {
    color: var(--admin-title);
    font-family: var(--admin-font-sans);
    letter-spacing: -0.03em;
}

.fi-page-header-heading {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
}

.fi-section-header-heading,
.fi-simple-header-heading {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.fi-page-header-description,
.fi-section-header-description,
.fi-breadcrumbs-item-label,
.fi-ta-text-description,
.fi-fo-helper-text,
.fi-empty-state-description,
.fi-no-notification-title,
.fi-pagination-overview,
.fi-fo-placeholder {
    color: var(--admin-text);
}

.fi-sidebar {
    width: var(--admin-sidebar-width);
    min-width: var(--admin-sidebar-width);
    background: var(--admin-sidebar);
    border-inline-end: 1px solid var(--admin-border);
}

.fi-sidebar-header {
    min-height: var(--admin-logo-height);
    padding-inline: 24px;
    background: #0b0f19;
    border-bottom: 1px solid var(--admin-border);
}

.fi-logo,
.fi-brand {
    min-height: var(--admin-logo-height);
    color: var(--admin-title);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fi-sidebar-nav,
.fi-sidebar-footer {
    padding-inline: 24px;
}

.fi-sidebar-nav,
.fi-sidebar-nav-groups,
.fi-sidebar-nav-groups > ul,
.fi-sidebar-nav-groups > ul > li {
    background: transparent;
}

.fi-sidebar-nav {
    gap: var(--admin-menu-gap);
}

.fi-sidebar-group-label {
    color: var(--admin-text-soft);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-sidebar-item-button,
.fi-sidebar-item a,
.fi-sidebar-item button,
.fi-topbar-item-btn,
.fi-icon-btn {
    border-radius: var(--admin-menu-radius);
    color: var(--admin-text);
}

.fi-sidebar-item-button,
.fi-sidebar-item a,
.fi-sidebar-item button {
    min-height: 44px;
    padding-inline: 14px;
}

.fi-sidebar-item-label,
.fi-topbar-item-label,
.fi-dropdown-list-item-label {
    color: var(--admin-text);
    font-weight: 500;
}

.fi-sidebar-item-icon,
.fi-topbar-item-icon,
.fi-breadcrumbs-item-separator,
.fi-icon,
.fi-dropdown-list-item-icon {
    color: var(--admin-text-soft);
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item a:hover,
.fi-sidebar-item button:hover,
.fi-topbar-item-btn:hover,
.fi-icon-btn:hover {
    background: #0b0f19;
    color: #ffffff;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active a,
.fi-sidebar-item.fi-active button {
    background: var(--admin-primary-soft);
    color: var(--admin-primary);
    box-shadow: inset 3px 0 0 0 var(--admin-primary);
}

.fi-topbar {
    min-height: var(--admin-topbar-height);
    padding-inline: var(--admin-content-padding);
    background: #080c16;
    border-bottom: 1px solid var(--admin-border);
    box-shadow: none;
}

.fi-topbar nav,
.fi-topbar > div {
    background: transparent;
}

.fi-global-search {
    width: min(100%, var(--admin-search-width));
}

.fi-global-search-input,
.fi-global-search-field {
    min-height: var(--admin-input-height);
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-button-radius);
    background: var(--admin-card-soft);
    color: var(--admin-title);
}

.fi-global-search-input::placeholder,
.fi-input::placeholder,
.fi-select-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--admin-text-soft);
    opacity: 1;
}

.fi-section,
.fi-wi-widget,
.fi-ta-ctn,
.fi-dropdown-panel,
.fi-modal-window,
.fi-simple-page,
.fi-in-entry,
.fi-fo-field-wrp,
.fi-tabs,
.fi-card {
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-card-radius);
    box-shadow: var(--admin-shadow);
}

.fi-section-header,
.fi-ta-header-ctn,
.fi-modal-header,
.fi-dropdown-header {
    min-height: 72px;
    padding-inline: 18px;
    background: var(--admin-card-soft);
    border-color: var(--admin-border);
    border-top-left-radius: var(--admin-card-radius);
    border-top-right-radius: var(--admin-card-radius);
}

.fi-section-content,
.fi-modal-content,
.fi-dropdown-list,
.fi-dropdown-footer,
.fi-modal-footer {
    background: var(--admin-card);
    border-color: var(--admin-border);
    border-bottom-left-radius: var(--admin-card-radius);
    border-bottom-right-radius: var(--admin-card-radius);
}

.fi-section-content,
.fi-modal-content {
    padding: 16px;
}

.fi-in-text-item,
.fi-in-text-entry,
.fi-in-text,
.fi-ta-text-item,
.fi-section-header-icon,
.fi-no-notification,
.fi-global-search-result,
.fi-dropdown-list-item {
    color: var(--admin-title);
}

.fi-input-wrp,
.fi-input-wrp-input,
.fi-select-input,
.fi-input,
.fi-fo-date-time-picker-panel,
.fi-fo-field-wrp .choices__inner {
    min-height: var(--admin-input-height);
    background: #111113;
    border-color: var(--admin-border-strong);
    color: var(--admin-title);
    border-radius: var(--admin-button-radius);
}

.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-input:focus,
.fi-global-search-input:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix,
.fi-fo-field-wrp .choices__button,
.fi-fo-field-wrp .choices__item {
    color: var(--admin-text);
}

.fi-fo-field-wrp .choices__inner,
.fi-fo-field-wrp .choices__list--dropdown,
.fi-fo-field-wrp .choices__list[aria-expanded] {
    background: #111113;
    border-color: var(--admin-border-strong);
    color: var(--admin-title);
}

.fi-fo-field-wrp-label {
    color: var(--admin-title);
    font-size: 13px;
    font-weight: 600;
}

.fi-btn {
    min-height: var(--admin-button-height);
    border-radius: var(--admin-button-radius);
    border-color: var(--admin-border);
    font-weight: 600;
    box-shadow: none;
}

.fi-btn:hover {
    filter: none;
    transform: none;
}

.fi-btn-color-primary:not(.fi-btn-outlined) {
    background: var(--admin-primary);
    border-color: var(--admin-primary);
    color: #ffffff;
}

.fi-btn-color-primary:not(.fi-btn-outlined):hover {
    background: var(--admin-primary-hover);
    border-color: var(--admin-primary-hover);
}

.fi-btn-color-primary.fi-btn-outlined,
.fi-btn-color-gray,
.fi-btn-color-gray.fi-btn-outlined {
    background: #111113;
    border-color: var(--admin-border);
    color: var(--admin-title);
}

.fi-btn-color-warning:not(.fi-btn-outlined) {
    background: var(--admin-warning);
    border-color: var(--admin-warning);
    color: #ffffff;
}

.fi-btn-color-danger:not(.fi-btn-outlined) {
    background: var(--admin-danger);
    border-color: var(--admin-danger);
    color: #ffffff;
}

.fi-tabs-item {
    border-color: transparent;
    color: var(--admin-text);
    border-radius: 12px;
}

.fi-tabs-item.fi-active {
    background: var(--admin-primary-soft);
    border-color: var(--admin-primary-border);
    color: var(--admin-primary);
}

.fi-wi-stats-overview {
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fi-wi-stats-overview-stat {
    min-height: var(--admin-card-height);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-card-radius);
    background: #0f0f10;
    box-shadow: var(--admin-shadow);
}

.fi-wi-stats-overview-stat-content {
    height: 100%;
    padding: 20px;
}

.fi-wi-stats-overview-stat-label {
    color: var(--admin-text);
    font-size: 13px;
    font-weight: 600;
}

.fi-wi-stats-overview-stat-value {
    color: var(--admin-title);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-description {
    color: var(--admin-text);
}

.fi-wi-stats-overview-stat-chart {
    opacity: 0.12;
}

.fi-badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.fi-badge-color-primary,
[data-fi-badge-color="primary"] {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.16);
    color: var(--admin-primary);
}

.fi-badge-color-success,
[data-fi-badge-color="success"] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.18);
    color: #047857;
}

.fi-badge-color-warning,
[data-fi-badge-color="warning"] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.fi-badge-color-danger,
[data-fi-badge-color="danger"] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

.fi-ta-ctn {
    overflow: hidden;
    height: 100%;
    background: var(--admin-sidebar);
}

.fi-ta-header-ctn,
.fi-ta-table thead,
.fi-ta-summary-header-row,
.fi-ta-summary-row,
.fi-pagination {
    background: #0b0f19;
}

.fi-ta-header-cell {
    min-height: var(--admin-table-header-height);
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fi-ta-record {
    background: var(--admin-sidebar);
}

.fi-ta-record:hover {
    background: #0b0f19;
}

.fi-ta-cell,
.fi-ta-empty-state,
.fi-ta-summary-row .fi-ta-cell,
.fi-ta-summary-header-row .fi-ta-cell {
    min-height: var(--admin-table-row-height);
    border-color: var(--admin-border-soft);
    padding: 12px 14px;
    color: var(--admin-title);
}

.fi-ta-filter-indicators-ctn {
    background: transparent;
}

.fi-ta-filter-indicator {
    border: 1px solid var(--admin-primary-border);
    background: var(--admin-primary-soft);
    color: var(--admin-primary);
}

.fi-pagination {
    border-top: 1px solid var(--admin-border);
}

.fi-pagination-items .fi-pagination-item > * {
    background: var(--admin-card);
    border-color: var(--admin-border);
    color: var(--admin-title);
    border-radius: 10px;
}

.fi-pagination-items .fi-pagination-item.fi-active > * {
    background: var(--admin-primary);
    border-color: var(--admin-primary);
    color: #ffffff;
}

.fi-checkbox-input,
.fi-radio-input {
    border-color: var(--admin-border-strong);
    background: #111113;
}

.fi-checkbox-input:checked,
.fi-radio-input:checked {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
}

.fi-toggle {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.fi-toggle-on {
    background: var(--admin-success);
}

.fi-toggle-off {
    background: #cbd5e1;
}

.fi-dropdown-list-item:hover,
.fi-no-notification:hover,
.fi-global-search-result:hover {
    background: #161618;
}

.fi-avatar {
    width: var(--admin-avatar-size);
    height: var(--admin-avatar-size);
}

a.fi-link,
.fi-link {
    color: var(--admin-primary);
}

.fi-simple-header,
.fi-simple-main {
    background: var(--admin-background);
}

.fi-simple-main .fi-section,
.fi-simple-main .fi-card {
    background: var(--admin-card);
    border-color: var(--admin-border);
}

@media (min-width: 1440px) {
    .fi-layout {
        min-width: 1440px;
    }
}

@media (max-width: 1280px) {
    .fi-wi-stats-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --admin-content-padding: 10px;
        --admin-gap: 12px;
        --admin-card-radius: 14px;
    }

    .fi-topbar {
        min-height: 64px;
        padding-inline: 16px;
    }

    .fi-main-ctn,
    .fi-page-content {
        padding: 16px;
    }

    .fi-section-header,
    .fi-ta-header-ctn,
    .fi-section-content,
    .fi-modal-content {
        padding-inline: 16px;
    }

    .fi-wi-stats-overview {
        grid-template-columns: 1fr;
    }
}