/*
 * Finanse theme: a glassy fintech look (dark and light) layered on top of Filament's default styles.
 * Loaded after Filament's stylesheet via a render hook in AdminPanelProvider, so no build step is needed.
 */

:root {
    --finans-bg:
        radial-gradient(60rem 32rem at -5% -10%, rgb(45 212 191 / 0.16), transparent 60%),
        radial-gradient(48rem 30rem at 105% 5%, rgb(251 146 60 / 0.10), transparent 55%),
        linear-gradient(180deg, #f5f8fa 0%, #e8eef2 100%);
    --finans-surface: linear-gradient(180deg, rgb(255 255 255 / 0.86), rgb(255 255 255 / 0.66));
    --finans-surface-solid: #ffffff;
    --finans-subtle: rgb(15 23 42 / 0.035);
    --finans-border: rgb(15 23 42 / 0.07);
    --finans-highlight: inset 0 1px 0 rgb(255 255 255 / 0.9);
    --finans-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 24px 48px -30px rgb(15 23 42 / 0.30);
    --finans-topbar: rgb(245 248 250 / 0.78);
    --finans-accent-soft: rgb(132 204 22 / 0.14);
    --finans-accent-text: #3f6212;
    --finans-positive: var(--success-700);
    --finans-negative: var(--danger-600);
    --finans-radius: 1.25rem;
}

.dark {
    --finans-bg:
        radial-gradient(60rem 32rem at -5% -10%, rgb(45 212 191 / 0.14), transparent 60%),
        radial-gradient(48rem 30rem at 105% 10%, rgb(251 146 60 / 0.08), transparent 55%),
        linear-gradient(180deg, #091116 0%, #0d1b23 45%, #11242e 100%);
    --finans-surface: linear-gradient(180deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.025));
    --finans-surface-solid: #0f1d25;
    --finans-subtle: rgb(255 255 255 / 0.035);
    --finans-border: rgb(255 255 255 / 0.08);
    --finans-highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --finans-shadow: 0 28px 56px -32px rgb(0 0 0 / 0.75);
    --finans-topbar: rgb(9 17 22 / 0.72);
    --finans-accent-soft: rgb(163 230 53 / 0.12);
    --finans-accent-text: #bef264;
    --finans-positive: var(--success-400);
    --finans-negative: var(--danger-400);
}

/* Page background */

.fi-body,
.dark .fi-body {
    background-color: transparent;
    background-image: var(--finans-bg);
    background-attachment: fixed;
}

.fi-header-heading {
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* Topbar and sidebar */

.fi-topbar,
.dark .fi-topbar,
.fi-body-has-topbar .fi-sidebar-header,
.dark .fi-body-has-topbar .fi-sidebar-header {
    background: var(--finans-topbar);
    box-shadow: 0 1px 0 var(--finans-border);
}

.fi-sidebar.fi-sidebar-open,
.dark .fi-sidebar.fi-sidebar-open {
    background: var(--finans-surface-solid);
}

@media (min-width: 64rem) {
    .fi-sidebar.fi-sidebar-open,
    .dark .fi-sidebar.fi-sidebar-open {
        background: transparent;
    }
}

.fi-sidebar-item-btn {
    border-radius: 0.875rem;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--finans-accent-soft);
    box-shadow: inset 3px 0 0 var(--primary-500);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > *,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > * {
    color: var(--finans-accent-text);
}

/* Glass cards */

.fi-section:not(.fi-section-not-contained),
.dark .fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.dark .fi-ta-ctn,
.fi-wi-stats-overview-stat,
.dark .fi-wi-stats-overview-stat,
.fi-simple-main,
.dark .fi-simple-main {
    background: var(--finans-surface);
    border-radius: var(--finans-radius);
    box-shadow: var(--finans-highlight), 0 0 0 1px var(--finans-border), var(--finans-shadow);
}

.fi-section-header-heading {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fi-section-content-ctn,
.dark .fi-section-content-ctn {
    border-color: var(--finans-border);
}

.fi-modal-window,
.dark .fi-modal-window,
.fi-dropdown-panel,
.dark .fi-dropdown-panel {
    background: var(--finans-surface-solid);
    box-shadow: 0 0 0 1px var(--finans-border), 0 32px 64px -24px rgb(0 0 0 / 0.45);
}

.fi-modal-window {
    border-radius: var(--finans-radius);
}

/* Tables */

.fi-ta-header-cell,
.dark .fi-ta-header-cell,
.fi-ta-header-toolbar,
.dark .fi-ta-header-toolbar {
    background: transparent;
}

.fi-ta-header-cell {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.fi-ta-content,
.fi-ta-table,
.fi-ta-table > *,
.fi-ta-row,
.fi-ta-header-toolbar,
.fi-pagination {
    border-color: var(--finans-border);
}

.fi-ta-row:hover,
.dark .fi-ta-row:hover {
    background: var(--finans-subtle);
}

.fi-ta-cell {
    font-variant-numeric: tabular-nums;
}

/* Tabs, inputs, badges, buttons */

.fi-tabs:not(.fi-contained) {
    background: var(--finans-surface);
    border-radius: 999px;
    padding: 0.3rem;
    box-shadow: var(--finans-highlight), 0 0 0 1px var(--finans-border);
}

.fi-tabs {
    scrollbar-width: none;
}

.fi-tabs::-webkit-scrollbar {
    display: none;
}

.fi-tabs-item {
    border-radius: 999px;
}

.fi-tabs-item.fi-active,
.dark .fi-tabs-item.fi-active {
    background: var(--finans-accent-soft);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--finans-accent-text);
}

.fi-input-wrp,
.dark .fi-input-wrp {
    background: var(--finans-subtle);
    border-radius: 0.875rem;
}

.fi-badge {
    border-radius: 999px;
}

.fi-btn {
    border-radius: 0.875rem;
}

/* Phones: tables become compact stacked cards (see Table::configureUsing() in AppServiceProvider) */

@media not all and (min-width: 40rem) {
    .fi-main {
        padding-inline: 0.75rem;
    }

    .fi-header-heading {
        font-size: 1.5rem;
    }

    .fi-ta-header-toolbar {
        padding: 0.5rem 0.75rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr {
        padding-block: 0.625rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
        padding-inline: 0.875rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-content {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-label {
        font-size: 0.7rem;
    }

    /* Transactions read well without labels: date, amount below it, counterparty, group below it */
    .fi-resource-transactions .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-label {
        display: none;
    }

    .fi-resource-transactions .fi-ta-cell-amount,
    .fi-resource-transactions .fi-ta-cell-amount .fi-ta-text {
        justify-content: flex-start;
        text-align: start;
    }

    .fi-resource-transactions .fi-ta-cell-amount .fi-ta-text-item {
        font-size: 1rem;
    }

    .fi-resource-transactions .fi-ta-cell-transaction-date .fi-ta-text-item {
        font-size: 0.75rem;
        opacity: 0.7;
    }

    /* Row actions (⋮) sit in the top-right corner, next to the selection checkbox */
    .fi-resource-transactions .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-actions) {
        position: absolute;
        top: 0.35rem;
        inset-inline-end: 2.5rem;
        padding: 0;
    }
}

/* Amounts: brighter shades in dark mode, like the balance gauges */

.dark .fi-ta-cell-amount .fi-color-success {
    color: var(--success-400);
}

.dark .fi-ta-cell-amount .fi-color-danger {
    color: var(--danger-400);
}