/* General Body Styles */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fc; /* Light grey background */
    color: #5a5c69; /* Darker grey text */
    font-size: 0.9rem; /* Base font size */
    line-height: 1.6; /* Improve overall readability */
}

/* Navbar */
.navbar {
    transition: background-color 0.3s ease;
}

.navbar-brand {
    font-size: 1.4rem;
    letter-spacing: .05em; /* Add subtle spacing */
}

.nav-link {
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: 0.25rem; /* Add slight rounding to links for hover effect */
    margin: 0 0.1rem; /* Small space between nav items */
}

.nav-link i {
    opacity: 0.8;
    width: 1.2em; /* Ensure icons align nicely */
    text-align: center;
    transition: opacity 0.2s ease-in-out;
}

.nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover background */
}

.nav-link.active {
    color: #fff !important; /* White text for active */
    font-weight: 600; /* Make active link bolder */
    background-color: rgba(255, 255, 255, 0.15); /* Slightly stronger active background */
}
.nav-link.active i,
.nav-link:hover i {
    opacity: 1;
}

/* Dropdown menu */
.dropdown-menu {
    border: 1px solid #e3e6f0;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
    font-size: 0.85rem; /* Slightly smaller dropdown text */
    margin-top: 0.5rem; /* Add space below toggle */
    border-radius: 0.35rem; /* Match card radius */
}
.dropdown-item {
    padding: 0.4rem 1.2rem;
    color: #5a5c69;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-item:active, .dropdown-item.active {
     background-color: #4e73df;
     color: #fff;
}
.dropdown-item i { /* Icons in dropdown */
    width: 1.3em;
    opacity: 0.6;
    margin-right: 0.3rem;
}
.dropdown-item:active i, .dropdown-item.active i {
    opacity: 1;
}

.dropdown-header {
    font-size: .7rem;
    font-weight: 700; /* Less bold header */
    color: #b7b9cc; /* Lighter header color */
    padding: 0.4rem 1.2rem;
}
.dropdown-divider {
    border-top: 1px solid #eaecf4;
    margin: 0.3rem 0; /* Tighter divider */
}

/* Cards */
.card {
    border: none; /* Remove default border */
    border-radius: 0.5rem; /* More rounded corners */
    margin-bottom: 1.5rem;
    background-color: #fff; /* Ensure cards are white */
    overflow: hidden; /* Prevent content from breaking rounded corners */
     box-shadow: 0 .1rem 1rem 0 rgba(58,59,69,.1)!important; /* Softer shadow */
}

.card:hover {
     box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important; /* Slightly larger shadow on hover */
     transform: translateY(-2px); /* Slight lift effect */
     transition: all 0.2s ease-in-out;
}


.card-header {
    background-color: #f8f9fc; /* Match body background */
    border-bottom: 1px solid #e3e6f0; /* Light border */
    padding: 0.75rem 1.25rem;
    display: flex; /* Align icon and text */
    align-items: center;
}
.card-header h6 {
    line-height: 1.2; /* Ensure header text aligns well */
    margin-bottom: 0; /* Remove default margin */
}
.card-header i { /* Increase space between icon and text in header */
    margin-right: 0.5rem;
}

/* Stat Cards specific styling */
.stat-card .card-body {
    padding: 1.25rem;
}
.stat-card .text-xs {
    font-size: .75rem; /* Slightly larger */
    font-weight: 700;
    letter-spacing: .05rem;
}
.text-gray-300 {
    color: #dddfeb !important;
}
.text-gray-800 {
    color: #5a5c69 !important;
}
.border-left-info { border-left: .25rem solid #36b9cc!important; }
.border-left-success { border-left: .25rem solid #1cc88a!important; }
.border-left-danger { border-left: .25rem solid #e74a3b!important; }
.border-left-warning { border-left: .25rem solid #f6c23e!important; }
.border-left-primary { border-left: .25rem solid #4e73df!important; }


/* Forms */
label.small {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    color: #858796; /* Lighter grey for labels */
}

.form-control-sm {
    border-radius: 0.25rem; /* Match button radius */
    padding: 0.3rem 0.6rem; /* Slightly more padding */
    font-size: 0.85rem; /* Consistent small font size */
    border: 1px solid #d1d3e2; /* Standard border color */
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control-sm:focus {
    border-color: #8ba4f5; /* Highlight border on focus */
}


textarea.form-control-sm {
    line-height: 1.5; /* Improve textarea readability */
}

/* Filter sections styling */
.report-filters {
    background-color: #f8f9fc !important; /* Lighter background for filter areas */
    border: 1px solid #e3e6f0 !important;
}
.report-filters label {
    margin-bottom: 0.25rem; /* Tighter label spacing */
}

/* Checkbox Container for Filters */
.checkbox-container {
    max-height: 110px; /* Adjust as needed */
    overflow-y: auto;
    font-size: 0.8rem; /* Smaller text in filters */
    background-color: #fff; /* White background */
    padding: 0.6rem; /* Add padding */
    border: 1px solid #d1d3e2 !important; /* Match form control border */
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); /* Inner shadow */
}
.checkbox-container .form-check {
    padding-left: 0.5em; /* Indent slightly */
    margin-bottom: 0.3em;
}
.checkbox-container .form-check-label {
    padding-left: 0.5em;
    cursor: pointer; /* Indicate clickable */
    color: #5a5c69; /* Match body text */
}

/* Tables */
.table {
    background-color: #fff;
    color: #5a5c69;
    margin-bottom: 0; /* Remove default table margin if inside card body */
}
.table thead th {
    font-weight: 600;
    font-size: 0.75rem; /* Slightly smaller header */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-width: 2px; /* Thicker border below header */
    border-top: none; /* No top border for header */
    color: #858796;
    background-color: #f8f9fc;
    padding: 0.75rem; /* Consistent padding */
    white-space: nowrap; /* Prevent headers from wrapping */
}
.table td, .table th {
    vertical-align: middle;
    border-top: 1px solid #e3e6f0; /* Lighter border */
    font-size: 0.85rem;
    padding: 0.65rem 0.75rem; /* Adjust padding */
}

.table-hover tbody tr:hover {
    background-color: #f0f2f8; /* Slightly different hover effect */
    color: #2e2f37; /* Darken text slightly on hover */
}
.table-bordered {
    border: 1px solid #e3e6f0;
}
.table-bordered th, .table-bordered td {
    border: 1px solid #e3e6f0;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02); /* More subtle striping */
}
/* Style for footer row in tables */
.table tfoot tr {
    background-color: #eaecf4; /* Slightly different background for footer */
    font-weight: bold;
    color: #5a5c69; /* Ensure text color is dark */
}
.table tfoot td {
    border-top: 2px solid #d1d3e2; /* Slightly thicker border above footer */
}
/* Placeholder text in table/chart containers */
.loading-placeholder p {
    padding: 2rem 0;
}
.chart-container .loading-placeholder p { /* Adjust chart loading message padding */
    padding: 1rem 0;
}


/* Buttons */
.btn {
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    transition: all 0.15s ease-in-out;
    letter-spacing: .03em;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; /* Subtle shadow */
}
.btn:hover {
    transform: translateY(-1px); /* Slight lift on hover */
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1)!important; /* Increase shadow on hover */
}
.btn:active {
    transform: translateY(0px); /* Reset lift on active */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

/* Gradient buttons for primary actions */
.btn-gradient.btn-primary, .btn-primary {
    background: linear-gradient(to right, #4e73df, #224abe);
    border: none;
    color: #fff;
}
.btn-gradient.btn-success, .btn-success {
    background: linear-gradient(to right, #1cc88a, #13855c);
    border: none;
     color: #fff;
}
/* Add hover states for gradient buttons */
.btn-gradient.btn-primary:hover, .btn-primary:hover {
     background: linear-gradient(to right, #2e59d9, #173991);
     color: #fff;
}
.btn-gradient.btn-success:hover, .btn-success:hover {
     background: linear-gradient(to right, #17a673, #0e6f4a);
     color: #fff;
}
/* Ensure standard buttons also look good */
.btn-secondary { background-color: #858796; border-color: #858796; color: #fff; }
.btn-secondary:hover { background-color: #717384; border-color: #696b79; color: #fff; }
.btn-info { background-color: #36b9cc; border-color: #36b9cc; color: #fff; }
.btn-info:hover { background-color: #2a96a5; border-color: #268997; color: #fff; }
.btn-danger { background-color: #e74a3b; border-color: #e74a3b; color: #fff; }
.btn-danger:hover { background-color: #d1372a; border-color: #c53123; color: #fff; }
.btn-outline-secondary { border-color: #d1d3e2; color: #858796;}
.btn-outline-secondary:hover { background-color: #eaecf4; color: #5a5c69; border-color: #d1d3e2;}


.btn:focus, .form-control:focus {
     box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25); /* Subtle focus ring */
     border-color: #8ba4f5; /* Highlight border */
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
}
.btn-circle {
    border-radius: 100%;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-circle.btn-sm {
    height: 1.8rem;
    width: 1.8rem;
    font-size: .7rem;
}
.btn-circle.btn-lg {
    height: 3.5rem;
    width: 3.5rem;
    font-size: 1.35rem;
}


/* Modals */
.modal-content {
    border-radius: 0.3rem;
    border: none;
}
.modal-header {
    border-bottom: 1px solid #e3e6f0;
    padding: 1rem 1.5rem;
}
.modal-footer {
    border-top: 1px solid #e3e6f0;
     padding: 0.75rem 1.5rem;
     background-color: #f8f9fc; /* Light footer background */
}
.modal-title {
    font-weight: 500; /* Slightly less bold */
    font-size: 1.1rem;
}
.modal-body {
    padding: 1.5rem; /* Increase modal body padding */
}
.modal-body h5, .modal-body h6 { /* Style subheadings in modals */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.modal-body hr {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.modal-body pre { /* Style pre tags used in view follow up modal */
    font-family: inherit; /* Use default font */
    font-size: inherit;
    white-space: pre-wrap; /* Wrap long text */
    word-break: break-word;
    background-color: #f8f9fc;
    padding: 0.75rem; /* More padding */
    border-radius: 0.25rem; /* Match buttons/inputs */
    border: 1px solid #e3e6f0;
    margin-top: 0.2rem;
    color: #5a5c69; /* Ensure text color */
    line-height: 1.5;
}

/* Utilities */
.text-primary { color: #4e73df !important; }
.bg-primary { background-color: #4e73df !important; }
.text-success { color: #1cc88a !important; }
.bg-success { background-color: #1cc88a !important; }
.text-info { color: #36b9cc !important; }
.bg-info { background-color: #36b9cc !important; }
.text-warning { color: #f6c23e !important; }
.bg-warning { background-color: #f6c23e !important; }
.text-danger { color: #e74a3b !important; }
.bg-danger { background-color: #e74a3b !important; }
.text-secondary { color: #858796 !important; }
.bg-secondary { background-color: #858796 !important; }
.text-light { color: #f8f9fc !important; }
.bg-light { background-color: #f8f9fc !important; }
.text-dark { color: #5a5c69 !important; }
.bg-dark { background-color: #5a5c69 !important; }

/* Ensure dropdowns don't go off screen */
.dropdown-menu-right {
    right: 0;
    left: auto;
}

/* Badge styling */
.badge {
    font-weight: 500;
    padding: 0.3em 0.6em; /* Slightly larger badges */
    font-size: 75%;
}

/* Chart Container Styling */
.chart-container {
    position: relative;
    height: 300px; /* Default height, adjust as needed */
    width: 100%;
}
/* Responsive chart height */
@media (max-width: 768px) {
    .chart-container {
        height: 250px;
    }
}
/* Hide loading placeholder once chart is potentially loaded (JS should handle this more robustly) */
canvas {
    display: block; /* Ensure canvas behaves like a block element */
    box-sizing: border-box;
    height: 300px; /* Match container height initially */
    width: 100%;
}


/* Alert styling (if you decide to use custom alerts instead of window.alert) */
.custom-alert {
    position: fixed;
    top: 70px; /* Below navbar */
    right: 20px;
    z-index: 1050;
    min-width: 250px;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
    border-radius: 0.35rem;
}

/* Animations (Optional) */
.animated--fade-in {
  animation-name: fade-in;
  animation-duration: 0.4s;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}