/* ============================================================
   Finance (Fees & Finance) module theme.
   Scoped to .finance-shell so the rest of the app is unaffected.
   Modernises the existing Bootstrap markup the finance pages already
   use (cards, KPI tiles, headers, tables, buttons) without structural
   rewrites. Palette aligns with the app primary blue (#1b6ec2).
   ============================================================ */

.finance-shell {
    --fin-primary: #1b6ec2;
    --fin-primary-dark: #14559b;
    --fin-ink: #1f2d3d;
    --fin-muted: #6b7a90;
    --fin-surface: #ffffff;
    --fin-bg: #f4f7fb;
    --fin-radius: 16px;
    background: linear-gradient(180deg, #eef3fb 0%, #f7f9fc 240px, #ffffff 480px);
    min-height: 100vh;
}

/* ---- Page header / hero ---- */
.finance-shell > .d-flex:first-child {
    background: linear-gradient(120deg, #1b6ec2 0%, #2f86e0 55%, #3a9bd6 100%);
    color: #fff;
    border-radius: var(--fin-radius);
    padding: 1.15rem 1.4rem;
    box-shadow: 0 14px 30px -18px rgba(27, 110, 194, 0.7);
    margin-bottom: 1.25rem !important;
}

.finance-shell > .d-flex:first-child h2 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 0.15rem;
}

.finance-shell > .d-flex:first-child .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Make header buttons readable on the blue hero */
.finance-shell > .d-flex:first-child .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.finance-shell > .d-flex:first-child .btn-outline-secondary:hover {
    background: #fff;
    color: var(--fin-primary);
}

/* ---- Cards ---- */
.finance-shell .card {
    border: none;
    border-radius: var(--fin-radius);
    box-shadow: 0 10px 26px -20px rgba(20, 50, 95, 0.45);
    overflow: hidden;
}

.finance-shell .card-header {
    background: #f1f6fd;
    border-bottom: 1px solid #e4ecf6;
    font-weight: 600;
    color: var(--fin-ink);
}

/* ---- KPI / metric tiles (border-* h-100 cards used across pages) ---- */
.finance-shell .card.h-100 {
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.finance-shell .card.h-100:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -18px rgba(20, 50, 95, 0.5);
}

.finance-shell .card.h-100::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--fin-primary);
    border-top-left-radius: var(--fin-radius);
    border-bottom-left-radius: var(--fin-radius);
}

.finance-shell .card.border-success::before { background: #1c9c6b; }
.finance-shell .card.border-danger::before  { background: #e0566b; }
.finance-shell .card.border-warning::before { background: #e0a106; }
.finance-shell .card.border-info::before    { background: #0b95a8; }
.finance-shell .card.border-secondary::before { background: #6b7a90; }
.finance-shell .card.border-dark::before     { background: #2f3a4a; }

.finance-shell .card.h-100 .text-muted.small {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.finance-shell .card.h-100 .h5,
.finance-shell .card.h-100 .h4 {
    font-weight: 700;
    color: var(--fin-ink);
}

/* Remove the coloured bootstrap border (we use the left accent instead) */
.finance-shell .card[class*="border-"] {
    border: none !important;
}

/* ---- Buttons ---- */
.finance-shell .btn { border-radius: 9px; font-weight: 500; }
.finance-shell .btn-primary { background: var(--fin-primary); border-color: var(--fin-primary); }
.finance-shell .btn-primary:hover { background: var(--fin-primary-dark); border-color: var(--fin-primary-dark); }
.finance-shell .btn-sm { border-radius: 8px; }

/* ---- Plain tables that remain (not yet Syncfusion) ---- */
.finance-shell table.table thead th {
    background: #f1f6fd;
    color: var(--fin-ink);
    border-bottom: 2px solid #e0e9f5;
    font-weight: 600;
    white-space: nowrap;
}

.finance-shell table.table-hover tbody tr:hover { background: #f5f9ff; }

/* ---- Form controls ---- */
.finance-shell .form-label { font-weight: 600; color: var(--fin-muted); font-size: 0.82rem; }
.finance-shell .form-control,
.finance-shell .form-select { border-radius: 9px; border-color: #d8e2ef; }
.finance-shell .form-control:focus,
.finance-shell .form-select:focus {
    border-color: var(--fin-primary);
    box-shadow: 0 0 0 0.18rem rgba(27, 110, 194, 0.15);
}

/* ---- Badges & alerts ---- */
.finance-shell .badge { font-weight: 600; border-radius: 7px; }
.finance-shell .alert { border: none; border-radius: 12px; }

/* ---- Syncfusion grid polish inside the shell ---- */
.finance-shell .e-grid { border-radius: 12px; border-color: #e4ecf6; }
.finance-shell .e-grid .e-headercell { background: #f1f6fd; font-weight: 600; }

@media (max-width: 576px) {
    .finance-shell > .d-flex:first-child { padding: 1rem; }
}