/* Default font family for the entire site */
body, html {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

/* Apply Urbanist to all common text elements */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
}

p, span, div, a, button, input, textarea, select, label {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Override Bootstrap's default font stack */
.btn, .form-control, .form-select, .nav-link, .navbar-brand, .card-title, .card-text {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.navbar-nav .nav-link {
    color: #7cc68d;
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -1px;
}

#logo {
    max-height: 40px;
    height: auto;
    width: auto;
}

/* Mobile navbar styling */
@media (max-width: 991.98px) {
    .navbar {
        z-index: 1060;
    }

    .navbar-collapse {
        background-color: white;
        margin-top: 15px;
        border-radius: 0.375rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        padding: 1rem;
        z-index: 1060;
    }

    /* Center the logo on mobile */
    .d-lg-none .navbar-brand {
        flex: 0 0 auto;
    }
}

/* Desktop navbar styling */
@media (min-width: 992px) {
    .navbar {
        z-index: 1060;
    }

    .navbar-collapse {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
        margin-top: 0;
    }
}

/* Responsive chart styling */
.chart-image {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    width: 100%;
}

div.charts img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    width: 100%;
}

/* div.charts img:hover{
    transform:scale(1.5);
} */

div.client_details p {
    margin-bottom: 8px;
}

div.card-text ul {
    font-size: 0.80em;
}

.row>* {
    padding-bottom: 16px;
}

.card-deck .card {
    min-width: 220px;
}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

/* Mobile-specific adjustments for dashboard */
@media (max-width: 576px) {
    .chart-image {
        max-height: 200px;
        width: 100%;
    }

    div.charts img {
        max-height: 200px;
        width: 100%;
        float: none;
    }

    .charts .col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* Make cards stack vertically on mobile */
    .col-sm-auto {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* Adjust card sizing for mobile */
    .card {
        margin-bottom: 1rem;
    }

    /* Make client details card responsive */
    .card[style*="width: 20rem"] {
        width: 100% !important;
    }

    /* Improve container spacing on mobile */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Adjust heading sizes for mobile */
    h5 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    /* Make supplementary info list more mobile-friendly */
    .list-group li {
        font-size: 0.9rem;
        padding: 0.5rem;
        border: none;
        border-bottom: 1px solid #e5e5e5;
    }
}

/* Tablet adjustments */
@media (min-width: 577px) and (max-width: 768px) {
    .chart-image {
        max-height: 250px;
    }

    div.charts img {
        max-height: 250px;
    }

    .charts .col {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 1rem;
    }
}

/* Desktop adjustments */
@media (min-width: 769px) {
    .chart-image {
        max-height: 300px;
    }

    div.charts img {
        max-height: 300px;
    }
}

/* Ensure charts container doesn't overflow */
.charts {
    overflow-x: auto;
}

/* Improve card body spacing */
.card-body {
    padding: 1rem;
}

/* Responsive grid improvements */
@media (max-width: 768px) {
    .col-xl-4, .col-lg-6, .col-md-6 {
        margin-bottom: 1rem;
    }

    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Supplementary data styling */
.supplementary-item {
    font-size: 0.9rem;
    line-height: 1.4;
}

.supplementary-item strong {
    color: #7cc68d;
    display: block;
    margin-bottom: 0.25rem;
}

@media (max-width: 576px) {
    .supplementary-item {
        font-size: 0.85rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e5e5e5;
    }

    .supplementary-item:last-child {
        border-bottom: none;
    }
}

/* Mobile navigation improvements */
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 40px;
        max-width: 200px;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        text-align: center;
    }
}

/* Improve button spacing and sizing on mobile */
@media (max-width: 576px) {
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-group .btn {
        width: auto;
    }

    /* Make form elements more touch-friendly */
    .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .form-select {
        min-height: 44px;
        font-size: 16px;
    }
}

/* Client details improvements */
.client_details p {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

@media (max-width: 576px) {
    .client_details p {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .client_details strong {
        color: #7cc68d;
    }
}