/* --- Base Styling --- */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f8f9fa; /* Light grey background */
}

h1, h2, h3 {
    /* Using a dark blue similar to the logo */
    color: #003876; /* Adjust hex code if you have the exact brand color */
    margin-bottom: 1.5rem;
}

/* --- Button Styling --- */
.btn-primary {
    background-color: #003876; /* iQor Blue */
    border-color: #003876;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #002a5a; /* Darker blue on hover */
    border-color: #002a5a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary:active {
    transform: scale(0.98); /* Simple 'animated' press effect */
}

.btn-success { /* Style the Generate button */
     background-color: #dc3545; /* iQor Red Accent */
     border-color: #dc3545;
     transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease;
     padding: 0.5rem 1.25rem;
     font-weight: 500;
}

 .btn-success:hover {
     background-color: #c82333; /* Darker Red */
     border-color: #bd2130;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .btn-success:active {
    transform: scale(0.98);
}

/* --- Form Styling --- */
.form-control, .form-select {
    border-radius: 0.25rem; /* Slightly rounded corners */
}
.form-check-label {
    margin-left: 0.25rem;
}

/* --- Specific Layout Adjustments --- */
.employee-list {
    max-height: 400px; /* Limit height and make scrollable */
    overflow-y: auto;
    border: 1px solid #dee2e6; /* Light border */
    padding: 1rem;
    background-color: #fff; /* White background */
    border-radius: 0.25rem;
}

.form-check {
    margin-bottom: 0.5rem; /* Spacing between checkboxes */
}

/* --- Flashed Messages (already styled by bootstrap, but can customize) --- */
.alert {
    margin-top: 1rem;
}

/* Make result rows look clickable */
.result-row {
    cursor: pointer;
    /* Optional: slightly change background on hover */
    /* transition: background-color 0.15s ease-in-out; */
}
/*
.result-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
*/

/* Style the row containing the collapsed details */
.collapse-row td {
   border-top: none !important; /* Avoid double border with row above when expanded */
   padding: 0 !important; /* Remove default cell padding */
}

/* Style the div *inside* the collapsed row's cell */
.collapse-row .p-3 {
     background-color: #eef; /* Optional: different background for detail area */
     border-top: 1px dashed #ccc !important; */ /* Example separator */
    /* Add padding/margin as needed */
}

/* Style the detail paragraphs */
.collapse-row p {
    margin-bottom: 0.5rem; /* Add some spacing between detail lines */
    font-size: 0.9rem; /* Slightly smaller font for details */
}
.collapse-row p strong {
    color: #003876; /* Use primary color for detail labels */
    min-width: 150px; /* Align labels somewhat */
    display: inline-block;
}

/* static/style.css */

/* Highlight the main employee row when its details section is expanded */
tr.result-row[aria-expanded="true"] {
    background-color: #ddeeff; /* A light blue highlight color */
    /* You could also use Bootstrap's subtle colors e.g. var(--bs-primary-bg-subtle)
       but a direct hex code is simpler for now */
    font-weight: 500; /* Optional: Make text slightly bolder */
}

/* Optional: Slightly adjust hover style for expanded rows if needed */
tr.result-row[aria-expanded="true"]:hover {
     background-color: #cce7ff; /* A slightly darker blue on hover */
}

/* Ensure the pointer cursor still applies */
.result-row {
    cursor: pointer;
}