/* custom.css - overrides and branding for IncomeExpense Tracker */

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
}

/* Brand primary color */
:root {
    --brand-primary: #2C3E50; /* Dark Slate Blue */
    --brand-accent: #E74C3C;   /* Red accent for highlights */
}

/* Navbar */
.navbar {
    background-color: var(--brand-primary) !important;
}

/* Buttons */
.btn-primary,
.btn-success {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.4em 0.7em;
}

/* Card hover effect */
.card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Icon spacing */
.btn .bi {
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .card {
        margin-bottom: 1rem;
    }
}