/* ══════════════════════════════════════════════════════════════
   Budget Tracker — Custom Theme
   Palette : "Midnight Teal" — navy + teal, finance-friendly.
   Fonts   : Inter (body) · Plus Jakarta Sans (headings)
   ══════════════════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    --bt-navy: #1B4965;
    --bt-navy-dark: #143A52;
    --bt-navy-deep: #0F2D40;
    --bt-teal: #338686;
    --bt-sky: #BEE3F8;
    --bt-danger: #E63946;
    --bt-warning: #E8A317;
    --bt-success: #2D6A4F;
    --bt-body-bg: #F0F4F8;
    --bt-body-color: #2C3E50;
    --bt-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    /* Bootstrap overrides */
    --bs-primary: var(--bt-navy);
    --bs-primary-rgb: 27, 73, 101;
    --bs-success: var(--bt-success);
    --bs-success-rgb: 45, 106, 79;
    --bs-danger: var(--bt-danger);
    --bs-danger-rgb: 230, 57, 70;
    --bs-warning: var(--bt-warning);
    --bs-warning-rgb: 232, 163, 23;
    --bs-info: var(--bt-teal);
    --bs-info-rgb: 14, 165, 164;
    --bs-body-bg: var(--bt-body-bg);
    --bs-body-color: var(--bt-body-color);
    --bs-link-color: var(--bt-navy);
    --bs-link-hover-color: var(--bt-navy-dark);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Typography ────────────────────────────────────────────── */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    margin-bottom: 60px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    color: var(--bt-navy);
}

/* ── Bootstrap Color Overrides ─────────────────────────────── */

/* -- Active / Hover -- */
a:hover,
a:focus,
a:active,
.btn:hover,
.btn:focus,
.btn:active,
.btn-link.nav-link:hover,
.btn-link.nav-link:focus,
.btn-link.nav-link:active {
    opacity: 0.9;
    text-decoration: none;
}

#logout:focus,
#logout:active,
#logout:hover {
    background-color: transparent;
    color: inherit !important;
    border-color: transparent;
}

.nav-item .dropdown-item:hover,
.nav-item .dropdown-item:focus {
    background-color: transparent;
    color: var(--bt-navy-dark) !important;
    opacity: 0.9;
}

.active {
    background-color: var(--bt-navy-dark) !important;
    color: white;
}

/* -- Primary -- */
.bg-primary,
.text-bg-primary {
    background-color: var(--bt-navy) !important;
}

.text-primary {
    color: var(--bt-navy) !important;
}

.btn-primary {
    --bs-btn-bg: var(--bt-navy);
    --bs-btn-border-color: var(--bt-navy);
    --bs-btn-hover-bg: var(--bt-navy-dark);
    --bs-btn-hover-border-color: var(--bt-navy-deep);
    --bs-btn-active-bg: var(--bt-navy-deep);
    --bs-btn-active-border-color: var(--bt-navy-deep);
    --bs-btn-disabled-bg: var(--bt-navy);
    --bs-btn-disabled-border-color: var(--bt-navy);
}

.btn-outline-primary {
    --bs-btn-color: var(--bt-navy);
    --bs-btn-border-color: var(--bt-navy);
    --bs-btn-hover-bg: var(--bt-navy);
    --bs-btn-hover-border-color: var(--bt-navy);
    --bs-btn-active-bg: var(--bt-navy-dark);
    --bs-btn-active-border-color: var(--bt-navy-deep);
}

/* -- Success (Savings) -- */
.bg-success,
.text-bg-success {
    background-color: var(--bt-success) !important;
}

.text-success {
    color: var(--bt-success) !important;
}

.progress-bar.bg-success {
    background-color: var(--bt-success) !important;
}

.btn-success {
    --bs-btn-bg: var(--bt-success);
    --bs-btn-border-color: var(--bt-success);
    --bs-btn-hover-bg: #245A42;
    --bs-btn-hover-border-color: #1C4A36;
}

/* -- Danger (Needs) -- */
.bg-danger,
.text-bg-danger {
    background-color: var(--bt-danger) !important;
}

.text-danger {
    color: var(--bt-danger) !important;
}

.progress-bar.bg-danger {
    background-color: var(--bt-danger) !important;
}

.btn-danger {
    --bs-btn-bg: var(--bt-danger);
    --bs-btn-border-color: var(--bt-danger);
    --bs-btn-hover-bg: #CF2F3C;
    --bs-btn-hover-border-color: #B82833;
}

/* -- Warning (Wants) — keeps dark text for accessibility -- */
.bg-warning,
.text-bg-warning {
    background-color: var(--bt-warning) !important;
}

.text-warning {
    color: var(--bt-warning) !important;
}

.progress-bar.bg-warning {
    background-color: var(--bt-warning) !important;
}

.btn-warning {
    --bs-btn-bg: var(--bt-warning);
    --bs-btn-border-color: var(--bt-warning);
    --bs-btn-hover-bg: #D09314;
    --bs-btn-hover-border-color: #B88010;
    --bs-btn-color: #1a1a1a;
    --bs-btn-hover-color: #1a1a1a;
}

/* -- Info (Set-Aside accent) -- */
.bg-info,
.text-bg-info {
    background-color: var(--bt-teal) !important;
}

.text-info {
    color: var(--bt-teal) !important;
}

.border-info {
    border-color: var(--bt-teal) !important;
}

.table-info {
    --bs-table-bg: rgba(14, 165, 164, 0.12);
}

.badge.bg-info {
    background-color: var(--bt-teal) !important;
}

.btn-outline-info {
    --bs-btn-color: var(--bt-teal);
    --bs-btn-border-color: var(--bt-teal);
    --bs-btn-hover-bg: var(--bt-teal);
    --bs-btn-hover-border-color: var(--bt-teal);
    --bs-btn-hover-color: #fff;
}

/* ── fc Calendar ────────────────────────────────────────────────── */
.fc .fc-toolbar-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--bt-navy);
}

.fc .fc-toolbar .fc-toolbar-chunk button {
    background-color: var(--bt-navy);
    color: #fff;
    border-color: var(--bt-navy-dark);
    text-transform: capitalize;
    font-weight: 600;
}

.fc .fc-toolbar .fc-toolbar-chunk button:hover {
    background-color: var(--bt-navy-dark);
    border-color: var(--bt-navy-deep);
}

.fc .fc-toolbar .fc-toolbar-chunk button:disabled {
    background-color: var(--bt-navy);
    border-color: var(--bt-navy);
    opacity: 0.6;
    cursor: not-allowed;
}

.fc .fc-daygrid-event {
    background-color: var(--bt-teal);
    border-color: var(--bt-teal);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border-radius: 0.25rem;
}

.fc .fc-daygrid-event:hover {
    background-color: #2D6A4F;
    border-color: #2D6A4F;
}

.fc .fc-daygrid-event:disabled {
    background-color: var(--bt-teal);
    border-color: var(--bt-teal);
    opacity: 0.6;
    cursor: not-allowed;
}

.fc .fc-daygrid-event .fc-event-time {
    display: none;
}

.fc .fc-daygrid-event .fc-event-title {
    font-weight: 600;
    font-size: 0.75rem;
    color: #fff;
}

.fc .fc-daygrid-event .fc-event-title::before {
    content: attr(data-category);
    display: block;
    font-size: 0.65rem;
    opacity: 0.8;
    margin-bottom: 0.1rem;
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar-budget {
    background: linear-gradient(135deg, var(--bt-navy) 0%, var(--bt-navy-dark) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-budget .navbar-brand {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: var(--bt-card-shadow);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Colored summary cards — remove the default card border */
.card.text-bg-primary,
.card.text-bg-danger,
.card.text-bg-warning,
.card.text-bg-success {
    border: none;
}

/* Set-Aside card — themed border */
.card.border-info {
    border: 2px solid var(--bt-teal) !important;
    border-radius: 0.75rem;
}

/* ── Tables ────────────────────────────────────────────────── */
.table {
    --bs-table-hover-bg: rgba(27, 73, 101, 0.04);
    font-size: 0.9rem;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 0.375rem;
}

/* ── Forms & Focus ─────────────────────────────────────────── */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--bt-teal);
}

.form-control:focus {
    border-color: var(--bt-teal);
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
    background-color: var(--bt-navy);
    color: rgba(255, 255, 255, 0.7);
}

.footer a {
    color: var(--bt-sky);
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
}

/* ── Progress Bars ─────────────────────────────────────────── */
.progress {
    border-radius: 0.5rem;
    background-color: #E2E8F0;
}

.progress-bar {
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
}

/* ── Dropdown Submenus ─────────────────────────────────────── */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-right: 0.125rem;
    display: none;
    border-radius: var(--bs-border-radius);
}

.dropdown-submenu.show > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    border: none;
    float: left;
    margin-right: 0.5rem;
    margin-left: 0;
    vertical-align: middle;
    font-size: 0.75rem;
}