body {
  font-family: 'Inter', sans-serif; /* Using Inter as a more modern sans-serif, ensure it's imported or fallbacks are good */
  background-color: #f4f7f9; /* Slightly off-white background for the whole page */
  color: #333;
  line-height: 1.6;
}

/* General Card Styling - can be used across the app */
.card {
  border: 1px solid #e0e0e0; /* Softer border color */
  border-radius: 0.5rem; /* Consistent rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.card-header {
    background-color: #f8f9fa; /* Light grey for card headers */
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 1.25rem; /* Standard padding for headers */
}

.card-title { /* This is a Bootstrap class, can be fine-tuned if needed */
  font-weight: 500;
}

.card-body {
  padding: 1.25rem; /* Standard padding for card bodies */
}

/* Product List Specific Card Styles (if different from general cards) */
#productList .card-img-top { /* Assuming #productList is a container for product cards */
  height: 180px;
  object-fit: cover;
}

#productList .card .form-label {
  font-size: .875rem;
  color: #6c757d;
}

/* Budget Information Styling */
.budget-info {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  background-color: #e9ecef;
  padding: 0.75rem 1.25rem;
  border-radius: .375rem; /* Consistent with other elements */
}

/* Table Styles */
.table-responsive {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem; /* Space below tables */
}
.table {
    margin-bottom: 0; /* Remove default bottom margin when inside .table-responsive */
}
.table th {
  background-color: #f8f9fa;
  font-weight: 500; /* Medium weight for table headers */
  color: #495057;
  padding: 0.75rem;
}
.table td {
  padding: 0.75rem;
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: #f1f3f5; /* Subtle hover for table rows */
}
.table img.table-preview-img { /* More specific class for images in tables */
    width: 60px;  /* Fixed width */
    height: 60px; /* Fixed height */
    object-fit: cover; /* Crop image to fit, maintaining aspect ratio */
    border-radius: 0.25rem;
    vertical-align: middle;
}

.stage-template-row td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.task-row td {
    background-color: #fcfcfd;
    padding: 0.5rem;
}

.stage-template-row.expanded {
    background-color: #f1f3f5;
}

.task-row.loading .task-row-container {
    opacity: 0.6;
    transition: opacity 0.3s;
}

/* Product and Variant Table Specific Adjustments */
#productManager table td, #variantManager table td {
    vertical-align: middle; /* Ensure content is vertically centered */
}

#productManager table tr, #variantManager table tr {
     min-height: 70px; /* Suggest a minimum row height, actual height depends on content */
}

#productManager .product-name-cell, #variantManager .variant-name-cell {
    /* For potentially long names, if truncation is desired */
    /* max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}


/* Action Buttons in Tables */
.table .btn-group .btn, .table .btn { /* Target buttons within tables */
    padding: 0.25rem 0.5rem; /* Smaller padding for table action buttons */
    font-size: 0.875rem;
}
.table .btn i {
    margin-right: 0.25rem; /* Space between icon and text in button */
}
.table .btn-action-icon i { /* If button is icon-only */
    margin-right: 0;
}

/* Custom Item Section Styling */
.custom-item-section {
  padding: 1.5rem;
  background-color: #fff; /* Match card background */
  border: 1px solid #e0e0e0;
  border-radius: .5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.custom-item-section h4 {
  margin-bottom: 1.25rem;
  font-weight: 500;
}

/* Login Page Specific Styles */
body.login-page-body { /* Use a specific class for the login page body */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1600');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.login-card { /* Styles for the login card itself */
  background-color: #ffffff;
  border-radius: 0.75rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Slightly more pronounced shadow for login */
  padding: 2rem; /* More padding inside login card */
}
.login-card h2 {
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 1.5rem;
}
.login-card .form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  font-size: 1rem;
  border-radius: 0.375rem; /* Rounded inputs */
}
.login-card .btn-primary {
  background-color: #5e72e4; /* Example primary color */
  border-color: #5e72e4;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.login-card .btn-primary:hover {
  background-color: #4a5ac7;
  border-color: #4a5ac7;
}


/* --- Settings Page Specific Styles --- */

/* Sidebar Navigation Wrapper */
.settings-nav-wrapper {
    position: sticky;
    top: 20px; /* Adjust as needed, considers potential top navbar height */
    height: calc(100vh - 40px); /* Full viewport height minus top/bottom spacing */
    overflow-y: auto;
    padding-bottom: 20px; /* Space at the bottom of the scrollable area */
}

#settingsTabs .nav-link {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center content */
    margin-bottom: 6px; /* Slightly reduced margin */
    cursor: pointer;
    padding: 0.7rem 1.1rem; /* Adjusted padding */
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-left-color 0.2s ease-in-out;
    color: #495057;
    font-weight: 500;
    border: 1px solid transparent;
    border-left: 3px solid transparent; /* For active/hover highlight */
}
#settingsTabs .nav-link:hover:not(.active) {
    background-color: #e9ecef;
    color: #0d6efd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-left-color: #0d6efd; /* Highlight on hover */
}
#settingsTabs .nav-link.active {
    background-color: #0d6efd;
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(13,110,253,0.3);
    border-left-color: #0056b3; /* Darker highlight for active */
}
#settingsTabs .nav-link i {
    margin-right: 0.85rem; /* Increased spacing between icon and text */
    font-size: 1.1em;
    /* vertical-align: middle; no longer needed due to flexbox */
    line-height: 1; /* Ensure icon doesn't affect line height */
    flex-shrink: 0; /* Prevent icon from shrinking */
}
/* Optional: Add subtle lines between nav items */
#settingsTabs .nav-item + .nav-item {
    /* border-top: 1px solid #e0e0e0; */ /* Uncomment if lines are desired, might need padding adjustments */
}


.settings-section.card { /* Styles already defined for .card can apply, these are overrides/additions */
    margin-bottom: 1.5rem; /* Ensure consistent spacing */
}
.settings-section .card-header {
    /* background-color: #f8f9fa; already default */
    padding: 1rem 1.5rem; /* Consistent padding */
}
.settings-section .card-header h3.h5 { /* Target the h3 styled as h5 */
    font-weight: 600; /* Bolder titles for sections */
    color: #343a40;
}
.settings-section .card-body {
    padding: 0; /* Remove padding if table-responsive is direct child */
}
.settings-section .table-responsive {
    border-top: none; /* Remove top border if card-header is present */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Modal Enhancements */
.modal-header {
    padding: 1rem 1.5rem;
}
.modal-title {
    font-weight: 500;
}
.modal-title i {
    margin-right: 0.5rem;
}
.modal-body .form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.25rem; /* Slightly less space below label */
}
.modal-footer {
    padding: 1rem 1.5rem;
    background-color: #f8f9fa; /* Light footer for modals */
    border-top: 1px solid #e0e0e0;
}

/* Toast Notifications */
.toast-container {
    z-index: 1100 !important; /* Ensure it's above modals, !important if needed */
}
.toast-header .bi-check-circle-fill { color: var(--bs-success); }
.toast-header .bi-exclamation-circle-fill { color: var(--bs-danger); }
.toast-header .bi-info-circle-fill { color: var(--bs-info); }

/* General Tasks */
.general-task-item.completed h6 {
    text-decoration: line-through;
    color: #6c757d;
}


/* Back Button */
.back-button-container { /* Already defined, can be kept or merged if styles are identical */
    margin-bottom: 1rem;
}
.back-button, .btn.back-button { /* General style for back button, can be a link or a button */
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
/* Specific for btn version */
.btn.back-button.btn-outline-primary {
    /* Bootstrap handles this well, ensure consistency */
}
.back-button i, .btn.back-button i {
    margin-right: 0.35rem;
    font-size: 1.1em;
}


/* Responsive Adjustments */
@media (max-width: 768px) { /* Tablet and smaller */
    body {
        /* padding: 10px; */ /* Reconsider if global padding is too much on small screens */
    }
    .card-body { /* General card body padding adjustment */
        padding: 1rem;
    }
    .custom-item-section {
        padding: 1rem;
    }
    .login-card {
        margin: 1rem;
        padding: 1.5rem;
    }
    .settings-section .card-header, .modal-header, .modal-footer {
        padding: 0.75rem 1rem;
    }
    #settingsTabs .nav-link {
        padding: 0.6rem 1rem; /* Adjust padding for smaller screens */
    }
    #settingsTabs .nav-link i {
        margin-right: 0.5rem;
    }
}

@media (max-width: 576px) { /* Mobile */
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }

    .table th, .table td {
      padding: 0.5rem 0.4rem; /* More compact tables on mobile */
    }
    .table img.table-preview-img {
        max-width: 35px; /* Smaller images in tables on mobile */
    }
    .settings-section.card {
        padding: 0.75rem; /* Reduce padding of the section itself if needed, or rely on card-body */
    }
     .settings-section .card-body { /* If settings section has direct card-body */
        padding: 0.75rem;
    }
    .back-button, .btn.back-button {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Ensure sidebar and main content responsive styles from sidebar.php are not conflicting */
/* These are usually about margin-left for main-content when sidebar is active */
/* Add any necessary overrides if specific behavior is needed on settings page */

/* --- Customer Details Page - Grants Tab Specific Styles --- */

/* Style for the filter toggle button if more distinction is needed */
#filter-grants-button {
    /* Example: Add a little more margin if needed, or specific icon styling */
    /* margin-left: auto; */ /* Pushes it to the far right if in a flex container by itself */
}
#filter-grants-button i {
    margin-right: 0.35rem;
}

/* Styling for the collapsible filter container */
#grant-filters-container.collapse.show,
#sub-account-filter-container.collapse.show {
    border: 1px solid #dee2e6; /* Match table border */
    border-top: none; /* Remove top border if it looks too close to button or previous element */
    padding: 1rem; /* Default card-body padding is 1.25rem, this is slightly less if preferred */
    background-color: #fdfdfd; /* Slightly off-white to distinguish from page bg */
    border-radius: 0 0 0.375rem 0.375rem; /* Match bottom corners of table-responsive */
    margin-bottom: 1rem; /* Space before the table or next element */
}
#grant-filters-container .form-label,
#sub-account-filter-container h5 {
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}
#grant-filters-container .form-control-sm,
#grant-filters-container .form-select-sm {
    font-size: 0.875rem; /* Ensure consistent small size for filter inputs */
}

/* Address column in the grants table */
#grants-table .grant-address-cell {
    max-width: 250px; /* Adjust as needed */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expiration Date column in the grants table */
#grants-table th:nth-child(8), /* Assuming Expiration Date is the 8th column */
#grants-table td:nth-child(8) {
    /* text-align: center; */ /* Optional: if centering looks better */
    min-width: 120px; /* Give it a bit of minimum width */
}


/* Sub-account filter styling */
#sub-account-filter-container h5 {
    margin-bottom: 0.75rem;
}
#sub-account-checkboxes .form-check {
    padding-left: 1.75em; /* Align checkboxes nicely */
}
#sub-account-checkboxes .form-check-input {
    margin-top: 0.2em; /* Align checkbox with label better if needed */
}
#sub-account-checkboxes .form-check-label {
    font-size: 0.9rem;
}

#sub-account-checkboxes {
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;
    padding: 0.5rem; /* Add some padding inside the scrollable area */
    border: 1px solid #e0e0e0; /* Optional: border around the scrollable list */
    border-radius: 0.25rem; /* Optional: rounded corners for the list */
    background-color: #fff; /* Optional: background color if different from parent */
}


/* Responsive adjustments for filter controls if needed */
@media (max-width: 768px) {
    #grant-filters-container .row > div[class^="col-"] {
        margin-bottom: 0.5rem; /* Add some space between stacked filter inputs on smaller screens */
    }
    #grants-table .grant-address-cell {
        max-width: 150px; /* Reduce max-width for address on smaller screens */
    }
}

/* Sortable table header styles */
.sortable-header {
    /* cursor: pointer; Already applied by JS, but can be here too */
}
.sortable-header-hover {
    text-decoration: underline;
}

/* Styles for the improved task template display in settings_stage_templates.php */
.task-row td { /* The cell that contains the task-row-container */
    padding: 0 !important; /* Remove padding from the td so the card can span full width */
    background-color: #f8f9fa; /* Light background for the expanded area */
}

.task-row-container {
    padding: 0.5rem; /* Padding around the card inside the expanded row */
}

.task-template-view.card {
    border: 1px solid #dee2e6; /* Standard card border */
}

.task-template-view .card-header {
    background-color: #e9ecef; /* A slightly different shade for the task header */
    border-bottom: 1px solid #dee2e6;
}

.task-template-view .card-header h6 {
    font-size: 1rem;
    font-weight: 500;
}

.task-template-view .add-task-btn i {
    margin-right: 0.3rem;
}

.task-template-inner-table th {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem; /* Compact padding for inner table headers */
    white-space: nowrap;
}

.task-template-inner-table td {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem; /* Compact padding for inner table cells */
}

.task-template-inner-table .btn-sm i { /* Ensure icons in small buttons are aligned well */
    vertical-align: text-bottom;
}

.stage-template-row.expanded {
    /* background-color: #eef2f7; */ /* Example: slightly different background for the main row when expanded */
    /* border-bottom: none; */ /* Remove bottom border if task view connects seamlessly */
}
.stage-template-row.expanded td {
    /* border-bottom-color: transparent; */ /* Hide bottom border of cells in expanded main row */
}


/* Optional: Styles for sort arrows if using CSS content property instead of JS text manipulation */
/*
.sortable-header.sort-asc::after {
    content: ' ▲';
    font-size: 0.8em;
}
.sortable-header.sort-desc::after {
    content: ' ▼';
    font-size: 0.8em;
}
*/