/* ==========================================================================
   CashPilot - brand theme, layered on top of Bootstrap 5.
   Palette taken from the CashPilot compass/arrow logo: deep navy + vivid
   blue for trust and navigation, a green accent for growth and money.
   ========================================================================== */

:root {
    --cp-navy: #0f2c59;
    --cp-blue: #1d4ed8;
    --cp-blue-light: #3b82f6;
    --cp-green: #16a34a;
    --cp-green-dark: #0f7a38;
    --cp-gradient-brand: linear-gradient(100deg, #0f2c59 0%, #1d4ed8 55%, #16a34a 100%);
    --cp-bg: #f4f7fb;
    --cp-surface: #ffffff;
    --cp-border: #e2e8f0;
    --cp-text: #1e293b;
    --cp-text-muted: #64748b;
    --cp-danger: #dc2626;
    --cp-warning: #d97706;
    --cp-info: #0284c7;

    /* Kept for anything still referencing the old variable names. */
    --pfm-primary: var(--cp-navy);
    --pfm-accent: var(--cp-green);
    --pfm-danger: var(--cp-danger);
    --pfm-warning: var(--cp-warning);
    --pfm-bg: var(--cp-bg);
}

body {
    background-color: var(--cp-bg);
    color: var(--cp-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .brand-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
}

a { color: var(--cp-blue); }
a:hover { color: var(--cp-navy); }

/* ----------------------------------------------------------------------
   Top navigation bar
   ---------------------------------------------------------------------- */
.pfm-navbar {
    background: var(--cp-gradient-brand);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}

.pfm-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .02em;
}

/* The logo's own artwork is blue/green - the same family of colors as the
   brand-gradient navbar, so it needs a light backdrop behind it to stay
   readable no matter which part of the gradient it sits over. Square corners
   (no border-radius) per the requested logo treatment. */
.pfm-navbar .navbar-brand img {
    height: 34px !important;
    width: auto !important;
    max-height: 34px !important;
    max-width: 160px;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.navbar-brand { font-weight: 600; }

/* Financial year switcher in the navbar - compact so it doesn't crowd the
   date/alerts/user controls beside it; sits on the dark gradient like the
   full-width toggle button, so it gets the same light-outline treatment. */
.pfm-fy-select {
    max-width: 155px;
    font-size: .78rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}
.pfm-fy-select option {
    color: #111827;
}
.pfm-fy-select:focus {
    background-color: #fff;
    color: #111827;
}

/* ----------------------------------------------------------------------
   Sidebar - dark, on-brand (navy -> blue -> green, same family as the logo
   and the top navbar) instead of a plain white panel, so icons and section
   labels read clearly against a colored background.
   ---------------------------------------------------------------------- */
.pfm-sidebar {
    min-height: calc(100vh - 56px);
    background: linear-gradient(180deg, var(--cp-navy) 0%, #123a67 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.pfm-sidebar .nav-header {
    color: rgba(255, 255, 255, .96);
    font-size: .85rem;
    font-weight: 700;
    padding: .55rem .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pfm-sidebar .nav-header span i.bi {
    font-size: .95rem;
    width: 1.2rem;
    display: inline-block;
    text-align: center;
    margin-right: .3rem;
    color: var(--cp-blue-light);
}

/* Top-level items with no submenu (Dashboard, Accounts, Revenues, Expenses,
   Budget, Bills, Reminders, Reports) render as plain links styled like the
   collapsible group headers above, so the sidebar reads as one consistent
   list of top-level entries whether an item expands or navigates directly. */
.pfm-sidebar a.nav-header.pfm-nav-flat {
    cursor: pointer;
    text-decoration: none;
    border-radius: .375rem;
    transition: background-color .15s ease, color .15s ease;
}

.pfm-sidebar a.nav-header.pfm-nav-flat:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.pfm-sidebar a.nav-header.pfm-nav-flat i.bi {
    font-size: .95rem;
    width: 1.2rem;
    display: inline-block;
    text-align: center;
    margin-right: .3rem;
    color: var(--cp-blue-light);
}

.pfm-sidebar .nav-link {
    color: rgba(255, 255, 255, .78);
    padding: .5rem .9rem .5rem 1.6rem;
    border-radius: .375rem;
    font-size: .82rem;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pfm-sidebar .nav-link i.bi {
    width: 1.2rem;
    text-align: center;
    margin-right: .35rem;
    color: rgba(255, 255, 255, .65);
}

.pfm-sidebar .nav-link.active,
.pfm-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-weight: 600;
    border-left-color: var(--cp-green);
}

.pfm-sidebar .nav-link.active i.bi,
.pfm-sidebar .nav-link:hover i.bi {
    color: var(--cp-green);
}

.pfm-sidebar .pfm-nav-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: .9rem;
    user-select: none;
    border-radius: .375rem;
}

.pfm-sidebar .pfm-nav-toggle:hover {
    background-color: rgba(255, 255, 255, .06);
}

.pfm-sidebar .pfm-nav-chevron {
    font-size: .65rem;
    color: rgba(255, 255, 255, .5);
    transition: transform .2s ease;
}

.pfm-sidebar .pfm-nav-toggle.collapsed .pfm-nav-chevron {
    transform: rotate(-90deg);
}

.pfm-sidebar hr,
.pfm-sidebar .dropdown-divider {
    border-color: rgba(255, 255, 255, .12);
}

/* ----------------------------------------------------------------------
   Full-width toggle - lets the user hide the sidebar on demand to give the
   main content (wide tables/reports) the whole window. Toggled by a button
   in the navbar (see Site.master); state is remembered per-browser via
   localStorage so it persists across page navigations.
   ---------------------------------------------------------------------- */
body.pfm-fullwidth .pfm-sidebar {
    display: none !important;
}

body.pfm-fullwidth .pfm-main {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

#btnToggleFullWidth {
    line-height: 1;
}

/* ----------------------------------------------------------------------
   Cards, stats, progress bars
   ---------------------------------------------------------------------- */
.pfm-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: .85rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
    transition: box-shadow .15s ease;
}

.pfm-card:hover {
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 22px rgba(15, 23, 42, .08);
}

.card {
    border-radius: .85rem;
}

.pfm-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cp-navy);
    line-height: 1.2;
}

.pfm-positive { color: var(--cp-green); }
.pfm-negative { color: var(--cp-danger); }

/* ----------------------------------------------------------------------
   Compact stat tiles (Dashboard) - icon + label/value, plus a small
   "Attention Needed" mini-grid instead of stacked full-width badges.
   ---------------------------------------------------------------------- */
.pfm-stat-card {
    padding: .85rem 1rem;
}

.pfm-stat-sub {
    font-size: .74rem;
    line-height: 1.25;
    margin-top: .1rem;
}

.pfm-stat-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.pfm-stat-icon.bg-blue { background: rgba(29, 78, 216, .1); color: var(--cp-blue); }
.pfm-stat-icon.bg-red { background: rgba(220, 38, 38, .1); color: var(--cp-danger); }
.pfm-stat-icon.bg-green { background: rgba(22, 163, 74, .1); color: var(--cp-green); }
.pfm-stat-icon.bg-orange { background: rgba(217, 119, 6, .1); color: var(--cp-warning); }
.pfm-stat-icon.bg-violet { background: rgba(109, 40, 217, .1); color: #6d28d9; }
.pfm-stat-icon.bg-teal { background: rgba(13, 148, 136, .1); color: #0d9488; }
.pfm-stat-icon.bg-amber { background: rgba(180, 83, 9, .1); color: #b45309; }

.pfm-attention-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .15rem .5rem;
}

.pfm-attention-item {
    font-size: .74rem;
    color: var(--cp-text-muted);
    line-height: 1.3;
}

.pfm-attention-count {
    font-weight: 700;
    color: var(--cp-text);
    margin-right: .15rem;
}

.pfm-progress-bar-track {
    background: #e5e7eb;
    border-radius: .5rem;
    height: .55rem;
    overflow: hidden;
}

.pfm-progress-bar-fill {
    height: 100%;
    background: var(--cp-green);
}

.pfm-progress-bar-fill.over {
    background: var(--cp-danger);
}

.table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    border-bottom-width: 1px;
}

.pfm-table {
    font-size: .85rem;
    margin-bottom: 0;
}

.pfm-table td, .pfm-table th {
    vertical-align: middle;
}

.pfm-badge-info { background-color: #dbeafe; color: #1e40af; }
.pfm-badge-warning { background-color: #fef3c7; color: #92400e; }
.pfm-badge-critical { background-color: #fee2e2; color: #991b1b; }
.pfm-badge-neutral { background-color: #e5e7eb; color: #374151; }

/* ----------------------------------------------------------------------
   Buttons - retint Bootstrap's primary/success families to the brand
   palette so every "btn btn-primary" / "btn btn-success" in the app
   (and their outline variants) picks up the CashPilot colors with no
   per-page changes needed.
   ---------------------------------------------------------------------- */
.btn {
    border-radius: .5rem;
    font-weight: 500;
    transition: box-shadow .15s ease, transform .15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--cp-blue);
    --bs-btn-border-color: var(--cp-blue);
    --bs-btn-hover-bg: var(--cp-navy);
    --bs-btn-hover-border-color: var(--cp-navy);
    --bs-btn-active-bg: var(--cp-navy);
    --bs-btn-active-border-color: var(--cp-navy);
    --bs-btn-disabled-bg: var(--cp-blue);
    --bs-btn-disabled-border-color: var(--cp-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--cp-blue);
    --bs-btn-border-color: var(--cp-blue);
    --bs-btn-hover-bg: var(--cp-blue);
    --bs-btn-hover-border-color: var(--cp-blue);
    --bs-btn-active-bg: var(--cp-blue);
    --bs-btn-active-border-color: var(--cp-blue);
}

.btn-success {
    --bs-btn-bg: var(--cp-green);
    --bs-btn-border-color: var(--cp-green);
    --bs-btn-hover-bg: var(--cp-green-dark);
    --bs-btn-hover-border-color: var(--cp-green-dark);
    --bs-btn-active-bg: var(--cp-green-dark);
    --bs-btn-active-border-color: var(--cp-green-dark);
    --bs-btn-disabled-bg: var(--cp-green);
    --bs-btn-disabled-border-color: var(--cp-green);
}

.btn-outline-success {
    --bs-btn-color: var(--cp-green);
    --bs-btn-border-color: var(--cp-green);
    --bs-btn-hover-bg: var(--cp-green);
    --bs-btn-hover-border-color: var(--cp-green);
    --bs-btn-active-bg: var(--cp-green);
    --bs-btn-active-border-color: var(--cp-green);
}

.btn-primary:hover, .btn-success:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------------
   Form controls - a brand-colored focus ring instead of Bootstrap's
   default blue, so inputs feel like part of the same system.
   ---------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--cp-blue-light);
    box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .15);
}

/* ----------------------------------------------------------------------
   Auth pages (Login / Register) - shared brand gradient + card treatment.
   ---------------------------------------------------------------------- */
.pfm-auth-body {
    min-height: 100vh;
    background: var(--cp-gradient-brand);
    display: flex;
    align-items: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pfm-auth-card {
    border-radius: 1rem;
    border: 0;
    overflow: hidden;
}

.pfm-auth-logo {
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
    max-width: 260px;
}

/* Printable ledgers/reports: hide chrome (nav, sidebar, buttons, forms) and let the
   report content use the full page width. Add class="pfm-no-print" to anything that
   shouldn't appear on paper. */
@media print {
    .navbar, .pfm-sidebar, .pfm-no-print, form .btn {
        display: none !important;
    }
    .pfm-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .pfm-card {
        border: 1px solid #ccc;
        break-inside: avoid;
        box-shadow: none;
    }
}