/*
 * SaleSpeed panel palette
 * #050A1F background, #0A1433 surface, #FFFFFF text, #B0B5C0 muted,
 * #1A2B5C border, #0088FF primary, #002266 secondary, #00CCFF accent.
 */

:root,
html,
html.fi,
html.dark {
    --ss-bg: #050A1F;
    --ss-surface: #0A1433;
    --ss-surface-2: #0E1B45;
    --ss-surface-3: #12245A;
    --ss-text: #FFFFFF;
    --ss-muted: #B0B5C0;
    --ss-border: #1A2B5C;
    --ss-primary: #0088FF;
    --ss-secondary: #002266;
    --ss-accent: #00CCFF;
    --ss-danger: #FF5C7A;
    --ss-success: #2EE59D;
    --ss-warning: #FFC857;

    --primary-50: 232 246 255;
    --primary-100: 204 236 255;
    --primary-200: 153 218 255;
    --primary-300: 102 199 255;
    --primary-400: 51 180 255;
    --primary-500: 0 136 255;
    --primary-600: 0 104 224;
    --primary-700: 0 79 184;
    --primary-800: 0 54 128;
    --primary-900: 0 34 102;
    --primary-950: 0 17 51;
}

html,
body,
.fi-body {
    background:
        radial-gradient(circle at 15% 0%, rgba(0, 136, 255, 0.16), transparent 34rem),
        radial-gradient(circle at 85% 12%, rgba(0, 204, 255, 0.12), transparent 30rem),
        var(--ss-bg) !important;
    color: var(--ss-text) !important;
}

.fi-main,
.fi-main-ctn,
.fi-page,
.fi-page-main,
.fi-page-content {
    background: transparent !important;
    color: var(--ss-text) !important;
}

.fi-sidebar,
.fi-topbar,
.fi-sidebar-header,
.fi-topbar-ctn {
    background: rgba(5, 10, 31, 0.94) !important;
    border-color: var(--ss-border) !important;
    color: var(--ss-text) !important;
    backdrop-filter: blur(18px);
}

.fi-sidebar {
    box-shadow: inset -1px 0 0 var(--ss-border);
}

.fi-topbar {
    box-shadow: 0 1px 0 var(--ss-border), 0 18px 46px rgba(0, 0, 0, 0.18);
}

.fi-logo,
.fi-sidebar-header a,
.fi-topbar a,
.fi-page-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading,
.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--ss-text) !important;
}

.fi-page-header-description,
.fi-section-header-description,
.fi-ta-text,
.fi-ta-summary-row,
.fi-breadcrumbs,
.fi-sidebar-group-label,
.fi-tabs-item-label,
.fi-fieldset-legend,
.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-error-message,
.fi-ta-empty-state-description {
    color: var(--ss-muted) !important;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-btn,
.fi-topbar-item-btn,
.fi-icon-btn,
.fi-link {
    color: var(--ss-muted) !important;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-group-btn:hover,
.fi-topbar-item-btn:hover,
.fi-icon-btn:hover,
.fi-link:hover {
    background: rgba(0, 136, 255, 0.12) !important;
    color: var(--ss-text) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn,
.fi-topbar-item.fi-active .fi-topbar-item-btn,
.fi-tabs-item.fi-active {
    background: linear-gradient(135deg, rgba(0, 136, 255, 0.24), rgba(0, 204, 255, 0.12)) !important;
    color: var(--ss-text) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 204, 255, 0.22);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-has-active-child-items .fi-sidebar-item-icon,
.fi-topbar-item.fi-active .fi-topbar-item-icon {
    color: var(--ss-accent) !important;
}

.fi-section,
.fi-card,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-ta,
.fi-modal-window,
.fi-dropdown-panel,
.fi-global-search-results-ctn,
.fi-simple-main,
.fi-no-notification,
.fi-loading-section {
    background: rgba(10, 20, 51, 0.96) !important;
    border-color: var(--ss-border) !important;
    color: var(--ss-text) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24) !important;
}

.fi-section-header,
.fi-section-content-ctn,
.fi-section-footer,
.fi-ta-header,
.fi-ta-content,
.fi-ta-footer,
.fi-modal-header,
.fi-modal-content,
.fi-modal-footer,
.fi-dropdown-list,
.fi-tabs,
.fi-fieldset {
    background: transparent !important;
    border-color: var(--ss-border) !important;
}

.fi-ta-table,
.fi-ta-row,
.fi-ta-cell,
.fi-ta-header-cell,
.fi-ta-summary-row,
.fi-ta-record {
    background: transparent !important;
    border-color: rgba(26, 43, 92, 0.82) !important;
    color: var(--ss-text) !important;
}

.fi-ta-row:hover,
.fi-ta-record:hover {
    background: rgba(0, 136, 255, 0.08) !important;
}

.fi-ta-header-cell-label,
.fi-ta-col-wrp-label,
.fi-fo-field-wrp-label,
.fi-input-wrp-label,
label {
    color: var(--ss-text) !important;
}

.fi-input-wrp,
.fi-select-input,
.choices__inner,
.fi-checkbox-input,
.fi-radio-input,
.fi-textarea,
.fi-input {
    background: rgba(5, 10, 31, 0.72) !important;
    border-color: var(--ss-border) !important;
    color: var(--ss-text) !important;
}

/* The rule above forces a dark background on checkboxes/radios in EVERY state,
   which hid the checked state. Restore a clearly-visible checked appearance:
   a filled primary box with a white check (checkbox) / white dot (radio). */
.fi-checkbox-input:checked {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.fi-radio-input:checked {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    background-image: radial-gradient(circle at center, #fff 0 32%, transparent 38%) !important;
}

.fi-input-wrp:focus-within,
.fi-input:focus,
.fi-textarea:focus,
.fi-select-input:focus,
.choices.is-focused .choices__inner {
    border-color: var(--ss-primary) !important;
    box-shadow: 0 0 0 1px var(--ss-primary), 0 0 0 4px rgba(0, 136, 255, 0.14) !important;
}

.fi-input::placeholder,
.fi-textarea::placeholder,
.choices__placeholder {
    color: rgba(176, 181, 192, 0.72) !important;
}

.fi-btn-color-primary,
.fi-ac-btn-action.fi-color-primary,
.fi-btn.fi-color-primary {
    background: linear-gradient(135deg, var(--ss-primary), var(--ss-accent)) !important;
    border-color: rgba(0, 204, 255, 0.5) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 28px rgba(0, 136, 255, 0.28) !important;
}

.fi-btn-color-primary:hover,
.fi-ac-btn-action.fi-color-primary:hover,
.fi-btn.fi-color-primary:hover {
    filter: brightness(1.08);
}

.fi-btn-color-gray,
.fi-btn.fi-color-gray,
.fi-ac-btn-action.fi-color-gray {
    background: rgba(10, 20, 51, 0.9) !important;
    border-color: var(--ss-border) !important;
    color: var(--ss-text) !important;
}

.fi-badge,
.fi-badge.fi-color-primary,
.fi-ta-text-badge {
    background: rgba(0, 136, 255, 0.16) !important;
    color: var(--ss-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 204, 255, 0.24) !important;
}

.fi-dropdown-list-item,
.fi-user-menu,
.fi-notifications-database-modal-notification,
.fi-global-search-result {
    color: var(--ss-text) !important;
}

.fi-dropdown-list-item:hover,
.fi-global-search-result:hover {
    background: rgba(0, 136, 255, 0.12) !important;
}

.fi-pagination,
.fi-pagination-item,
.fi-pagination-overview,
.fi-ta-pagination,
.fi-ta-selection-indicator {
    background: transparent !important;
    border-color: var(--ss-border) !important;
    color: var(--ss-muted) !important;
}

.fi-pagination-item.fi-active,
.fi-pagination-item:hover {
    background: var(--ss-primary) !important;
    color: #FFFFFF !important;
}

.fi-modal-close-overlay {
    background: rgba(5, 10, 31, 0.78) !important;
}

.fi-loading-indicator,
.fi-icon,
.fi-ac-icon,
.fi-section-icon,
.fi-btn-icon {
    color: currentColor;
}

.fi-color-success {
    color: var(--ss-success) !important;
}

.fi-color-warning {
    color: var(--ss-warning) !important;
}

.fi-color-danger {
    color: var(--ss-danger) !important;
}

.fi-simple-layout {
    background:
        radial-gradient(circle at top, rgba(0, 136, 255, 0.20), transparent 34rem),
        var(--ss-bg) !important;
}

.fi-simple-main {
    border: 1px solid var(--ss-border);
}

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

::-webkit-scrollbar-track {
    background: var(--ss-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--ss-border);
    border-radius: 999px;
    border: 2px solid var(--ss-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ss-primary);
}

@media (max-width: 639px) {
    .fi-ta-table.fi-ta-table-stacked-on-mobile {
        background: transparent !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead {
        padding: 0.35rem 0.75rem 0;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead > .fi-ta-table-stacked-header-row {
        display: block !important;
        margin-bottom: 0.55rem;
        border: 0 !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-table-stacked-header-cell {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-table-stacked-sorting {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
        gap: 0.5rem;
        width: 100%;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody {
        display: grid !important;
        gap: 0.75rem;
        padding: 0.75rem;
        white-space: normal !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row:not(.fi-ta-row-not-reorderable):not(.fi-ta-group-header-row):not(.fi-ta-summary-row) {
        display: grid !important;
        gap: 0.5rem;
        padding: 0.85rem !important;
        border: 1px solid rgba(0, 204, 255, 0.16) !important;
        border-radius: 0.75rem;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
            rgba(10, 20, 51, 0.92) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
        overflow: hidden;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row:not(.fi-ta-row-not-reorderable):not(.fi-ta-group-header-row):not(.fi-ta-summary-row):hover {
        background:
            linear-gradient(180deg, rgba(0, 136, 255, 0.10), rgba(0, 204, 255, 0.035)),
            rgba(10, 20, 51, 0.95) !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-selected {
        border-color: rgba(0, 204, 255, 0.42) !important;
        box-shadow:
            inset 3px 0 0 var(--ss-accent),
            0 12px 30px rgba(0, 136, 255, 0.18) !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-selected::before {
        display: none !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
        display: grid !important;
        grid-template-columns: minmax(5.8rem, 0.42fr) minmax(0, 1fr);
        align-items: start;
        gap: 0.5rem;
        width: 100%;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):first-of-type .fi-ta-cell-content {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: var(--ss-text) !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-label {
        display: block !important;
        padding: 0 !important;
        color: var(--ss-muted) !important;
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-transform: uppercase;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-content {
        min-width: 0;
        color: var(--ss-text) !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-image,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-icon,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text {
        padding: 0 !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-image img {
        border-radius: 0.55rem !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-badge,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text-badge {
        max-width: 100%;
        white-space: normal !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell {
        top: 0.85rem !important;
        inset-inline-end: 0.85rem !important;
        padding: 0 !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) {
        display: flex !important;
        justify-content: flex-start;
        padding-top: 0.35rem !important;
        border-top: 1px solid rgba(26, 43, 92, 0.72) !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) > .fi-ta-cell-label {
        display: none !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) > .fi-ta-cell-content,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) .fi-ta-actions {
        width: 100%;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) .fi-ta-actions {
        justify-content: flex-end !important;
        gap: 0.45rem !important;
    }
}