/* ParkingEye (Tenant 1) Brand Styles */

/* ===== Brand Color Variables ===== */
:root {
    --brand-teal: #77C9D8;
    --brand-lime: #D1D709;
    --brand-blue: #008BD2;
    --brand-navy: #223458;
    --brand-primary: #008BD2;
    --brand-secondary: #77C9D8;
    --nav-bg: #223458;
    --footer-bg: #223458;
    --header-border: #008BD2;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6,
.card-title,
.card-header h5,
.card-header .card-title,
.navbar-brand {
    font-family: 'Tondo', 'Montserrat', sans-serif;
    font-weight: 500;
    color: var(--brand-navy);
}

body {
    font-family: 'Montserrat', 'Calibri', sans-serif;
}

/* ===== Cards ===== */
.card {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-shadow: 0 1px 15px 1px rgba(69, 65, 78, 0.08);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #ebedf2;
}

.card-body > h4:first-child,
.card-body > h5:first-child {
    color: var(--brand-navy);
}

/* ===== Custom Classes ===== */
.custom-alink {
    color: #FFFFFF;
}

.custom-span-countdown {
    color: var(--brand-blue);
    font-weight: bold;
}

/* ===== Navigation ===== */
.bg-nav {
    background-color: var(--brand-navy) !important;
}

/* ===== Footer ===== */
.footer-site,
.footer-top {
    background-color: var(--brand-navy);
}

.footer-bottom {
    background-color: #1a2940;
}

/* ===== Buttons ===== */
.btn-brand,
.btn-primary {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.btn-brand:hover,
.btn-primary:hover {
    background-color: #0077b5;
    border-color: #0077b5;
}

.bg-brand {
    background-color: var(--brand-blue) !important;
}

/* ===== Header ===== */
.header-top {
    border-bottom-color: var(--brand-blue) !important;
}

/* ===== Links ===== */
a {
    color: var(--brand-blue);
}

a:hover {
    color: #0077b5;
}

/* ===== Pagination ===== */
.page-link {
    color: var(--brand-blue);
}

.page-item.active .page-link {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}
