/*
 * BrunoFund admin: styles for our own Blade pages and widgets.
 * Filament only ships the Tailwind utilities it uses itself, so utility classes written in our views
 * are NOT available; use these bf-* classes instead. Colours follow the landing page tokens.
 */
:root {
    --bf-teal: #086579;
    --bf-orange: #EB7926;
    --bf-cream: #FAF8F5;
    --bf-ink: #111827;
    --bf-muted: #555C65;
    --bf-border: #E5E7EB;
    --bf-surface: #FFFFFF;
    --bf-surface-2: #F3F4F6;
    --bf-radius: 14px;
}
.dark {
    --bf-teal: #4DB8CC;
    --bf-orange: #F28B3C;
    --bf-cream: #0E1418;
    --bf-ink: #E8EDF0;
    --bf-muted: #9AA7B0;
    --bf-border: #2A3640;
    --bf-surface: #161E24;
    --bf-surface-2: #1D272E;
}

/* Page and card chrome (landing look: cream page, 14px radius) */
.fi-body { background-color: var(--bf-cream); }
.fi-section, .fi-wi-stats-overview-stat { border-radius: var(--bf-radius); }
.dark .fi-sidebar, .dark .fi-topbar, .dark .fi-wi-stats-overview-stat, .dark .fi-section { background-color: var(--bf-surface); }
.fi-wi-chart > .fi-section { height: 100%; }

/* Cards */
.bf-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.bf-card {
    background: var(--bf-surface);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.bf-card-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--bf-ink); }
.bf-card-subtitle { margin: 1.5rem 0 0; font-size: .875rem; font-weight: 600; color: var(--bf-ink); }
.bf-card-note { margin: .25rem 0 0; font-size: .875rem; color: var(--bf-muted); line-height: 1.5; }
.bf-card-body { margin-top: 1rem; }
.bf-center { text-align: center; padding: 2.5rem 1.5rem; }
.bf-center svg { width: 2.5rem; height: 2.5rem; margin: 0 auto; color: var(--bf-muted); }
.bf-center .bf-card-note { max-width: 32rem; margin: .5rem auto 0; }

/* KPI tiles and responsive grids */
.bf-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .bf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .bf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bf-stat-label { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bf-muted); }
.bf-stat-value { margin: .35rem 0 0; font-size: 1.625rem; font-weight: 700; color: var(--bf-ink); }

/* Tables */
.bf-table-wrap { overflow-x: auto; }
.bf-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
.bf-table th {
    padding: .625rem 1rem .625rem 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--bf-muted); border-bottom: 1px solid var(--bf-border); white-space: nowrap;
}
.bf-table td { padding: .75rem 1rem .75rem 0; color: var(--bf-ink); border-bottom: 1px solid var(--bf-border); vertical-align: top; }
.bf-table tr:last-child td { border-bottom: 0; }
.bf-table .bf-num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.bf-table th.bf-num { text-align: right; padding-right: 0; }
.bf-table .bf-muted, .bf-muted { color: var(--bf-muted); }
.bf-badge {
    display: inline-block; padding: .125rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
    background: var(--bf-surface-2); color: var(--bf-ink); margin: 0 .25rem .25rem 0;
}
.bf-badge-teal { background: rgba(8, 101, 121, .12); color: var(--bf-teal); }
.dark .bf-badge-teal { background: rgba(77, 184, 204, .15); }
.bf-empty { padding: 1rem 0; color: var(--bf-muted); font-size: .875rem; }

/* Security page */
.bf-row { display: flex; align-items: center; gap: .75rem; }
.bf-row svg { width: 2rem; height: 2rem; color: var(--bf-teal); flex: none; }
.bf-codes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem;
    padding: 1rem; border-radius: 10px; background: var(--bf-surface-2); font-family: ui-monospace, monospace; font-size: .875rem;
    color: var(--bf-ink);
}
.bf-qr { display: inline-block; margin-top: 1rem; padding: 1rem; background: #fff; border: 1px solid var(--bf-border); border-radius: 10px; }
.bf-form { display: flex; align-items: flex-end; gap: .75rem; max-width: 24rem; margin-top: 1rem; }
.bf-form > div { flex: 1; }
.bf-actions { margin-top: 1.5rem; }

/* Banner (security reminder) */
.bf-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; border-radius: var(--bf-radius); border: 1px solid #f5c48f; background: #fff7ec; color: #6b3d0c;
}
.dark .bf-banner { background: #33250f; border-color: #6b4a1c; color: #f5d9ae; }
.bf-banner p { margin: 0; font-size: .875rem; font-weight: 500; }
.bf-banner .bf-row svg { width: 1.5rem; height: 1.5rem; color: currentColor; }