/* ledger/static/ledger/css/custom_styles.css */

/* === Global Theme Variables & Base Styling === */
:root {
    --theme-primary-color: #007bff; /* Bootstrap Primary Blue */
    --theme-primary-hover: #0056b3;
    --theme-secondary-color: #6c757d; /* Bootstrap Secondary Grey */
    --theme-success-color: #198754; /* Bootstrap Green */
    --theme-danger-color: #dc3545;  /* Bootstrap Red */
    --theme-warning-color: #ffc107; /* Bootstrap Yellow */
    --theme-info-color: #0dcaf0;    /* Bootstrap Info/Teal */
    --theme-light-bg: #f8f9fa;    /* Page background */
    --theme-card-bg: #ffffff;     /* Card background */
    --theme-card-border: #dee2e6; /* Standard card border */
    --theme-text-dark: #212529;   /* Dark text */
    --theme-text-medium: #495057; /* Medium text (labels) */
    --theme-text-light: #6c757d;  /* Light text (muted) */
    --theme-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    font-family: var(--theme-font-sans-serif);
    background-color: var(--theme-light-bg);
    color: var(--theme-text-dark);
    line-height: 1.65;
}

/* === General Page Layout === */
.page-header h2, 
.page-title-container h2 { /* Combined for general page titles */
    font-size: 2em;
    font-weight: 700;
    color: #2c3e50; /* Consistent dark title color */
    margin-bottom: 1.5rem; /* Consistent bottom margin */
}
.page-title-container h2 { /* Specific override if booking_detail title needed less margin */
    margin-bottom: 0; 
}


/* === Statistic Cards === */
.stats-card {
    background-color: var(--theme-card-bg);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid var(--theme-card-border);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex; 
    flex-direction: column; 
    height: 100%; /* Ensure cards in a row have same height if content varies */
}
.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.stats-card .card-header {
    font-weight: 600;
    border-bottom: 1px solid var(--theme-card-border);
    padding: 0.75rem 1.25rem;
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;
    flex-shrink: 0;
    background-color: #f8f9fa; /* Default light header */
    color: var(--theme-text-medium); /* Default header text color */
}
.stats-card .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; /* Center content for text-center cards */
    flex-grow: 1; 
}
.stats-card .card-body .card-title-stat { /* For the large number/value */
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--theme-primary-color); /* Default color for stat number */
}
.stats-card .card-body .text-muted {
    font-size: 0.85rem;
}

/* Specific Stat Card Themes */
/* Booking List Stats */
.stats-card.border-primary .card-header { background-color: rgba(0,123,255,0.1); color: #007bff; border-top: 3px solid #007bff;}
.stats-card.border-primary .card-title-stat { color: #007bff; }
.stats-card.border-secondary .card-header { background-color: rgba(108,117,125,0.1); color: #6c757d; border-top: 3px solid #6c757d;}
.stats-card.border-secondary .card-title-stat { color: #6c757d; }
.stats-card.border-success .card-header { background-color: rgba(25,135,84,0.1); color: #198754; border-top: 3px solid #198754;}
.stats-card.border-success .card-title-stat { color: #198754; }
.stats-card.border-info .card-header { background-color: rgba(13,202,240,0.1); color: #0dcaf0; border-top: 3px solid #0dcaf0;}
.stats-card.border-info .card-title-stat { color: #0dcaf0; }

/* Lead List Stats */
.stats-card.lead-new .card-header { background-color: rgba(0,123,255,0.1); color: #007bff; border-top: 3px solid #007bff;}
.stats-card.lead-new .card-title-stat { color: #007bff; }
.stats-card.lead-quote-sent .card-header { background-color: rgba(13,202,240,0.1); color: #0dcaf0; border-top: 3px solid #0dcaf0;}
.stats-card.lead-quote-sent .card-title-stat { color: #0dcaf0; }
.stats-card.lead-follow-up .card-header { background-color: rgba(255,193,7,0.1); color: #cca006; border-top: 3px solid #ffc107;}
.stats-card.lead-follow-up .card-title-stat { color: #ffc107; }
.stats-card.lead-confirmed .card-header { background-color: rgba(25,135,84,0.1); color: #198754; border-top: 3px solid #198754;}
.stats-card.lead-confirmed .card-title-stat { color: #198754; }

/* Quote List Stats */
.stats-card.quote-sent .card-header { background-color: rgba(13,202,240,0.1); color: #0dcaf0; border-top: 3px solid #0dcaf0;}
.stats-card.quote-sent .card-title-stat { color: #0dcaf0; }
.stats-card.quote-accepted .card-header { background-color: rgba(25,135,84,0.1); color: #198754; border-top: 3px solid #198754;}
.stats-card.quote-accepted .card-title-stat { color: #198754; }
.stats-card.quote-expired .card-header { background-color: rgba(108,117,125,0.1); color: #6c757d; border-top: 3px solid #6c757d;}
.stats-card.quote-expired .card-title-stat { color: #6c757d; }

/* Invoice List Stats */
.stats-card.invoice-sent .card-header { background-color: rgba(13,202,240,0.1); color: #0dcaf0; border-top: 3px solid #0dcaf0;}
.stats-card.invoice-sent .card-title-stat { color: #0dcaf0; }
.stats-card.invoice-paid .card-header { background-color: rgba(25,135,84,0.1); color: #198754; border-top: 3px solid #198754;}
.stats-card.invoice-paid .card-title-stat { color: #198754; }

/* Client List Stats */
.stats-card.client-total .card-header { background-color: rgba(0,123,255,0.1); color: #007bff; border-top: 3px solid #007bff;}
.stats-card.client-total .card-title-stat { color: #007bff; }
.stats-card.client-ttv .card-header { background-color: rgba(25,135,84,0.1); color: #198754; border-top: 3px solid #198754;}
.stats-card.client-ttv .card-title-stat { color: #198754; }
.stats-card.client-tokens .card-header { background-color: rgba(255,193,7,0.1); color: #cca006; border-top: 3px solid #ffc107;}
.stats-card.client-tokens .card-title-stat { color: #ffc107; }

/* Expense List Stats */
.stats-card.expense-period .card-header { background-color: rgba(220,53,69,0.1); color: #dc3545; border-top: 3px solid #dc3545;}
.stats-card.expense-period .card-title-stat { color: #dc3545; }
.stats-card.expense-ytd .card-header { background-color: rgba(108,117,125,0.1); color: #6c757d; border-top: 3px solid #6c757d;}
.stats-card.expense-ytd .card-title-stat { color: #6c757d; }
.stats-card.category-summary-card .card-header { background-color: rgba(0,123,255,0.1); color: #007bff; border-top: 3px solid #007bff;}


/* --- Filter Panel --- */
.filter-panel {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
}
.filter-panel .form-control-sm,
.filter-panel .form-select-sm {
    border-radius: 6px;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
}
.filter-panel .btn-sm {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.4rem 1rem; 
}

/* --- Add New Button --- */
.add-new-btn, .add-new-booking-btn { /* Combined from .add-new-booking-btn */
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.6rem 1.2rem; 
}

/* --- List Tables (e.g., Bookings, Leads, Quotes, Invoices, Expenses) --- */
.list-table-container, .bookings-table-container { /* Combined */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden; 
    border: 1px solid #e9ecef;
    margin-top: 1.5rem; /* For tables that are not first element after filter or have a header */
}
.list-table thead th, .bookings-table thead th { /* Combined */
    background-color: #f8f9fa; 
    color: #495057;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    border-top: none;
    padding: 0.9rem 1rem;
    font-size: 0.85rem; 
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.list-table thead th a, .bookings-table thead th a { /* Combined */
    color: inherit; 
    text-decoration: none;
}
.list-table thead th a:hover, .bookings-table thead th a:hover { /* Combined */
    color: #0056b3; 
}
.list-table tbody tr, .bookings-table tbody tr { /* Combined */
    border-bottom: 1px solid #f0f0f0; 
}
.list-table tbody tr:last-child, .bookings-table tbody tr:last-child { /* Combined */
    border-bottom: none;
}
.list-table td, .list-table th, .bookings-table td, .bookings-table th { /* Combined */
    padding: 0.9rem 1rem; 
    vertical-align: middle;
}
.list-table tbody tr:hover, .bookings-table tbody tr:hover { /* Combined */
    background-color: #eef8ff; 
}
.list-table .text-muted td, .bookings-table .text-muted td { /* Combined */
    color: #9099a2 !important; 
}
.list-table .text-muted a, .bookings-table .text-muted a { /* Combined */
    color: #6c85a0 !important; 
}
.list-table .table-actions .btn, .bookings-table .table-actions .btn { /* Combined */
    padding: 0.25rem 0.5rem; 
    margin-left: 0.25rem;
}
.list-table .table-actions .btn i, .bookings-table .table-actions .btn i { /* Combined */
    font-size: 0.9rem; 
    vertical-align: text-bottom;
}

/* --- General Card Styling (For booking_detail page cards, and other general cards) --- */
.card { /* This is a more general card style, ensure it doesn't conflict if Bootstrap's .card is used differently elsewhere */
  background-color: var(--theme-card-bg);
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--theme-card-border); 
}
.card-header { /* General card header, might be overridden by .stats-card .card-header */
    background-color: #f7f9fc; 
    border-bottom: 1px solid var(--theme-card-border);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    color: var(--theme-primary-color);
}
.card-header h5 { 
    font-weight: 600;
    font-size: 1.1rem; 
    color: inherit; 
    margin-bottom: 0;
}
.card-body {
    padding: 1.5rem;
}

/* Tables within general cards (e.g., booking_detail transactions table) */
.card .table { 
    margin-bottom: 0; 
}
.card .table thead th { /* Styles for tables inside .card, distinct from .list-table */
  background-color: #e9ecef; 
  color: var(--theme-text-medium);
  font-weight: 600;
  border-bottom: 2px solid var(--theme-card-border); 
  border-top: none;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
}
.card .table tbody tr { border-bottom: 1px solid #f0f0f0; }
.card .table tbody tr:last-child { border-bottom: none; }
.card .table td, .card .table th { padding: 0.9rem 1.1rem; vertical-align: middle; }
.card .table-hover tbody tr:hover { background-color: #eef8ff; }
.card .table-actions .btn { padding: 0.25rem 0.5rem; margin-left: 0.25rem; }
.card .table-actions .btn-outline-danger:hover { 
    border-color: var(--theme-danger-color);
    background-color: var(--theme-danger-color);
    color: #fff;
}

/* --- Definition List Styling (General) --- */
dl.row dt {
  font-weight: 500;
  color: var(--theme-text-medium);
  margin-bottom: 0.75rem;
}
dl.row dd {
  margin-bottom: 0.75rem;
  color: var(--theme-text-dark);
  font-weight: 500;
}
dl.row dd a {
    color: var(--theme-primary-color);
    text-decoration: none;
}
dl.row dd a:hover {
    color: var(--theme-primary-hover);
    text-decoration: underline;
}

/* --- Badge Styling --- */
/* Booking Status Badges (from booking_detail & booking_list) */
.status-badge { /* Base for custom status badges */
  display: inline-block;
  padding: 0.4em 0.9em;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 50rem; 
  text-transform: uppercase;
  letter-spacing: 0.03em; 
  color: #fff; /* Default for dark backgrounds */
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}
.status-open { background-color: var(--theme-success-color); }
.status-closed { background-color: var(--theme-danger-color); }
.status-other { background-color: var(--theme-secondary-color); }

/* Indicator Badges (Yes/No from booking_detail) */
.indicator-badge {
  display: inline-block;
  padding: 0.4em 0.9em;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 50rem; 
  text-transform: uppercase;
  letter-spacing: 0.03em; 
  margin-left: 8px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}
.indicator-yes { background-color: var(--theme-success-color); color: #fff; }
.indicator-no { background-color: #e9ecef; color: var(--theme-text-medium); }

/* Lead Status Badges (from lead_list) */
.status-new { background-color: #007bff; color: #fff; }
.status-contact-attempted { background-color: #17a2b8; color: #fff; }
.status-needs-info { background-color: #fd7e14; color: #fff; } 
.status-info-sent { background-color: #20c997; color: #fff; }
.status-quote-requested { background-color: #6610f2; color: #fff; }
.status-quote-sent { background-color: #0dcaf0; color: #212529; }
.status-follow-up-needed { background-color: #ffc107; color: #212529; }
.status-on-hold { background-color: #6c757d; color: #fff; }
.status-booking-pending { background-color: #ff69b4; color: #fff; } 
.status-confirmed-booked { background-color: #198754; color: #fff; }
.status-lost { background-color: #dc3545; color: #fff; }
.status-cancelled { background-color: #495057; color: #fff; }
.status-unknown { background-color: #adb5bd; color: #212529; }

/* Styling for Bootstrap Badges within Tables (for _quote_status_badge.html & _invoice_status_badge.html) */
.list-table .badge { 
    display: inline-block;
    padding: 0.4em 0.9em !important; 
    font-size: 0.78rem !important;    
    font-weight: 600 !important; 
    line-height: 1.2 !important; 
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem !important; 
    text-transform: capitalize !important; 
}
.list-table .badge.bg-info, 
.list-table .badge.bg-warning,
.list-table .badge.bg-light {
    color: #212529 !important; 
}
.list-table .badge.bg-secondary,
.list-table .badge.bg-success,
.list-table .badge.bg-danger,
.list-table .badge.bg-dark {
    color: #fff !important; 
}

/* --- Transaction Amount Colors (from booking_detail) --- */
.amount-income, .amount-rebate { 
    color: var(--theme-success-color) !important; 
    font-weight: 600;
}
.amount-expense, .amount-loyalty { 
    color: var(--theme-danger-color) !important; 
    font-weight: 600;
}

/* --- Form Styling (General - good for Crispy Forms output) --- */
.form-control, .form-select {
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--theme-primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255, 0.2); 
}
label { 
    font-weight: 500;
    color: var(--theme-text-medium);
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

/* --- Button Styling (General) --- */
.btn {
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    letter-spacing: 0.01em; 
    transition: all 0.2s ease-in-out, transform 0.1s ease;
}
.btn:active {
    transform: translateY(1px);
}
.btn-primary {
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--theme-primary-hover);
    border-color: var(--theme-primary-hover);
}
.btn-success {
    background-color: var(--theme-success-color);
    border-color: var(--theme-success-color);
    color: #fff;
}
.btn-success:hover {
    background-color: #146c43; 
    border-color: #146c43;
}
.btn-outline-secondary {
    color: var(--theme-secondary-color);
    border-color: var(--theme-secondary-color);
}
.btn-outline-secondary:hover {
    background-color: var(--theme-secondary-color);
    color: #fff;
}
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* --- Alert Styling (General) --- */
.alert {
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #664d03;
}

/* === Dashboard Specific Calendar Styles === */
#departureCalendarContainer { 
    padding: 20px; 
    background-color: transparent; 
}
#departureCalendar {
    max-width: 100%; 
    margin: 0 auto; 
    background-color: #ffffff; 
    border-radius: 12px;       
    border: 1px solid #e9ecef; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07); 
    padding: 20px;             
}
.fc .fc-button-primary {
    background-color: #007bff; 
    border-color: #007bff;
    color: #fff;
    font-weight: 500;
    padding: 0.375rem 0.75rem; 
    font-size: 0.875rem;       
    border-radius: 0.25rem;    
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.fc .fc-button-primary:hover {
    background-color: #0056b3; 
    border-color: #0056b3;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #004085; 
    border-color: #004085;
}
.fc .fc-toolbar-title {
    font-size: 1.5rem; 
    font-weight: 600;
    color: #343a40; 
}
.fc-event { 
    cursor: pointer;
    border-radius: 4px;
    padding: 3px 5px;   
    font-size: 0.8em; 
    border-width: 1px;
}
.calendar-section-title { /* Also dashboard specific */
    font-weight: 600;
    color: #343a40; 
    margin-bottom: 1rem; 
    font-size: 1.75rem; 
}

/* === Bootstrap Tooltip Styling (General) === */
.tooltip-inner {
    background-color: #343a40; 
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    text-align: left; 
    max-width: 300px; 
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #343a40; 
}
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #343a40;
}

/* === Client List Specific Card Styling === */
.client-card-grid .col {
    display: flex; 
}
.client-card { 
    width: 100%; 
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column; 
}
.client-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.client-card .card-body {
    padding: 1.25rem;
    flex-grow: 1; 
}
.client-card .card-title a {
    font-size: 1.25rem;
    font-weight: 600;
    color: #007bff; 
    text-decoration: none;
}
.client-card .card-title a:hover {
    color: #0056b3;
    text-decoration: underline;
}
.client-card .card-text {
    font-size: 0.9rem;
    color: #495057; 
    margin-bottom: 0.5rem; 
}
.client-card .card-text i { 
    margin-right: 0.5rem;
    color: #6c757d; 
    width: 16px; 
    display: inline-block; 
}
.client-card .card-text .float-end {
    font-weight: 600;
    color: #212529; 
}
.client-card .card-footer {
    background-color: #f8f9fa; 
    border-top: 1px solid #e9ecef;
    padding: 0.75rem 1.25rem;
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
}
.client-card .card-footer .btn-sm {
    font-weight: 500;
    padding: 0.3rem 0.75rem; 
}

/* === Expense List Specific Styles === */
.month-group-header {
    background-color: #e9ecef;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: #495057;
    margin-top: 2rem; 
    border-radius: 8px 8px 0 0; 
}
.month-group-header:first-of-type { 
    margin-top: 0; 
}
.text-muted.is-locked { 
    opacity: 0.6;
}
.is-locked .btn { 
    opacity: 0.5 !important; 
    cursor: not-allowed !important;
}

/* --- Fix for Top Categories Card on Expense List (with HTML change) --- */
.category-summary-card .list-group-item {
    /* d-flex justify-content-between align-items-center is already on the li from Bootstrap */
    padding: 0.6rem 0.75rem; /* Adjust padding */
}

.category-summary-card .list-group-item .category-name {
    flex-grow: 1;         /* Allows the name to take up available space */
    flex-shrink: 1;       /* Allows it to shrink if necessary */
    margin-right: 10px;   /* Space between name and badge */
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-summary-card .list-group-item .badge {
    flex-shrink: 0;       /* Prevents the badge from shrinking */
    white-space: nowrap;
}

/* === Forms Styling === */

/* General styling for form elements generated by Crispy Forms with Bootstrap 5 pack */
.form-control,
.form-select,
textarea.form-control { /* Explicitly target textareas with form-control class */
    border-radius: 6px; /* Consistent rounding */
    border: 1px solid #ced4da; /* Standard Bootstrap border */
    padding: 0.5rem 0.9rem;   /* Adjust padding for a cleaner look */
    font-size: 0.95rem;        /* Consistent font size */
    line-height: 1.6;          /* Good line height for readability */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /* Ensure background and text colors are suitable if you have a global dark theme in mind later */
    /* background-color: #fff; */
    /* color: var(--theme-text-dark); */
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--theme-primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2); /* Use BS primary RGB or your theme var */
    /* For Bootstrap 5, the primary color RGB var is usually --bs-primary-rgb */
    /* If you defined --theme-primary-color-rgb: 0,123,255; you could use that. */
    /* For now, this assumes Bootstrap's --bs-primary-rgb is available or similar effect. */
}

/* Labels */
label, .form-label { /* Target both standard labels and Bootstrap's .form-label */
    font-weight: 500;
    color: var(--theme-text-medium);
    margin-bottom: 0.5rem; /* Space below label */
    font-size: 0.9rem;
}

/* Checkboxes and Radios (Bootstrap 5 handles these well, minor tweaks if needed) */
.form-check-input {
    border-radius: 0.25em; /* Slight rounding for checkboxes */
}
.form-check-input:checked {
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}
.form-check-label {
    font-weight: normal; /* Default label weight for checks/radios */
    font-size: 0.95rem;  /* Match input font size */
    color: var(--theme-text-dark);
}
.form-switch .form-check-input { /* For Bootstrap switches */
    border-radius: 2em; /* Ensure pill shape for switches */
}

/* Help text and Error messages (Bootstrap 5 defaults are usually good) */
.form-text { /* Class for help text below inputs */
    font-size: 0.85em;
    color: var(--theme-text-light);
}
.invalid-feedback { /* For validation errors */
    font-size: 0.85em;
    font-weight: 500;
}
.form-control.is-invalid, .form-select.is-invalid { /* Highlight invalid fields */
    border-color: var(--theme-danger-color);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); /* Assumes --bs-danger-rgb */
}

/* --- Styling for Crispy Formset Tables (e.g., Quote Items, Invoice Items) --- */
.formset-table-container table { /* Target tables within our designated container */
    width: 100%;
    margin-bottom: 1rem; /* Consistent with Bootstrap table margin */
    /* Optional: border: 1px solid var(--theme-card-border); */
    /* border-radius: 8px; /* Might not work well with table structure unless overflow:hidden on parent */
}

.formset-table-container thead th {
    background-color: #f8f9fa; /* Match .list-table header */
    color: var(--theme-text-medium, #495057);
    font-weight: 600;
    border-bottom: 2px solid var(--theme-card-border, #dee2e6);
    border-top: none; /* Clean look */
    padding: 0.75rem 1rem; /* Adjust padding */
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.formset-table-container tbody td {
    padding: 0.75rem 1rem; /* Consistent padding */
    vertical-align: top; /* Align top for form fields */
    border-bottom: 1px solid #f0f0f0; /* Lighter row separators */
}
.formset-table-container tbody tr:last-child td {
    border-bottom: none;
}

.formset-table-container tbody tr:hover {
    background-color: #f7faff; /* Very light hover, adjust as needed */
}

/* Style form elements within the formset table cells */
.formset-table-container .form-control,
.formset-table-container .form-select {
    font-size: 0.9rem; /* Slightly smaller for table context */
    padding: 0.375rem 0.75rem; /* Bootstrap sm padding */
    /* Other .form-control styles (border, focus) will be inherited from global */
}
.formset-table-container textarea.form-control {
    min-height: 40px; /* Prevent textareas from being too tall */
}

.formset-table-container .form-check-input {
    /* Minor adjustments if needed for alignment in table */
    margin-top: 0.3rem; 
}
.formset-table-container .form-check-label {
    font-size: 0.9rem;
}

/* Styling for "Delete" checkbox/column in formsets if rendered */
.formset-table-container th.delete-column-header, /* If your helper adds a class */
.formset-table-container td.delete-cell {         /* If your helper adds a class */
    text-align: center;
    width: 50px; /* Small width for delete checkbox */
}
.formset-table-container td input[type="checkbox"][name$="-DELETE"] {
    margin-top: 0.5rem; /* Adjust alignment of delete checkbox */
}

/* Add button for formsets (if using JavaScript to add more forms) */
.add-formset-row-btn { 
    /* Style this like your other .btn-outline-secondary or similar */
    margin-top: 1rem;
}

/* For User Account Page Actions section */
.account-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--theme-card-border, #dee2e6); /* Using theme variable */
}

/* ledger/static/ledger/css/custom_styles.css */
/* ... (other styles) ... */

/* --- Company Settings Page Specific --- */
.current-logo-container {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f8f9fa; /* Light background for the logo display */
    border: 1px solid var(--theme-card-border, #dee2e6);
    border-radius: 8px;
    display: inline-block; 
}
.current-logo-container strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--theme-text-medium, #495057);
}
.current-logo-container img {
    max-height: 80px;
    max-width: 200px;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #fff;
}

/* Styling for Fieldset Legends if used prominently by Crispy Forms within cards */
/* The CompanySettingsForm helper uses Fieldset, so this might be useful */
.card .card-body fieldset legend,
.card fieldset legend { /* Cover both cases: legend in card-body or direct child of card */
    font-size: 1.05rem; /* Slightly smaller than card-header h5 */
    font-weight: 600;
    color: var(--theme-primary-color, #007bff);
    padding-top: 0.25rem; 
    margin-bottom: 1.25rem; /* Space after legend before fields */
    border-bottom: 1px solid var(--theme-card-border, #dee2e6);
    padding-bottom: 0.75rem;
    width: 100%; /* Make legend span full width of its container */
}
/* Adjust if your Crispy helper nests fieldsets differently */

/* In custom_styles.css or quote_form.html <style> */
.delete-formset-row {
    /* Add any specific tweaks here if Bootstrap classes aren't enough */
    /* For example, vertical alignment if it's off */
    vertical-align: middle;
}
.formset-table-container td.delete-cell { /* If plugin wraps its delete button in a cell with this class */
     text-align: center; /* Center the delete button in its cell */
}

.formset-table-container td input[type="checkbox"][name$="-DELETE"] {
    display: block !important; 
    margin: 0.1rem auto 0; 
    transform: scale(1.2); 
    visibility: visible !important;
    position: static !important;
    opacity: 1 !important;
}
.formset-table-container thead th.delete-column-header, /* For Crispy Forms default */
.formset-table-container thead th:last-child { /* If Delete is the last column */
    text-align: center;
    width: 80px; 
}

.delete-formset-row {
    /* Example: ensure it aligns well if it's just a link styled as a button */
    display: inline-block; 
    vertical-align: middle;
}

.info-group { /* Keep this selector general if used on other detail pages */
    display: flex;
    align-items: flex-start; /* Align items to the start of the cross axis (top for row flex) */
    margin-bottom: 0.9rem;   /* Slightly more space between info groups */
    line-height: 1.5;        /* Better line height for potentially wrapped values */
}

.info-group .data-label {
    flex-shrink: 0; /* Prevent label from shrinking if value is very long */
    width: 170px;  /* Fixed width for labels - adjust as needed for your longest label */
                   /* Using width instead of flex-basis can sometimes give more consistent alignment */
    margin-right: 15px; /* Increased space between label and value */
    color: var(--theme-text-medium, #6c757d); /* Slightly lighter/more muted for labels */
    font-weight: 400; /* Regular weight for labels to contrast with potentially bolder values */
    /* text-align: right; */ /* Optional: if you want labels right-aligned before the colon */
}
.info-group .data-label i.bi { /* Style icons within labels */
    margin-right: 8px; /* Space between icon and label text */
    /* color: var(--theme-secondary-color); */ /* Optional: different icon color */
}

.info-group .data-value {
    flex-grow: 1; /* Allow value to take remaining space */
    color: var(--theme-text-dark, #212529); 
    font-weight: 500; /* Make values slightly bolder than labels */
    word-break: break-word; /* Allow long values to wrap */
    text-align: left; /* Ensure values are left-aligned */
}

/* Specific to notes-content if it's used as a data-value */
.info-group .data-value.notes-content {
    white-space: pre-wrap; 
    font-style: italic;
    color: var(--theme-text-medium, #495057); 
    font-size: 0.9em;
    font-weight: 400; /* Notes might not need to be bold */
    line-height: 1.6;
}

/* Ensure your .text-muted-futuristic (if still used from original lead_detail CSS) is also readable */
.text-muted-futuristic,
.info-group .data-value .text-muted { /* For N/A or placeholder text within values */
    color: var(--theme-text-light, #868e96) !important; /* Lighter muted text */
    font-style: italic;
}

/* If you have links within data-value */
.info-group .data-value a { 
    color: var(--theme-primary-color, #007bff); 
    text-decoration: none; 
    font-weight: 500; /* Match data-value weight */
}
.info-group .data-value a:hover { 
    color: var(--theme-primary-hover, #0056b3); 
    text-decoration: underline; 
}

/* Ensure hr within cards on lead_detail.html has a lighter color */
.lead-detail-page .card hr { /* Assuming .lead-detail-page is the main wrapper on that page */
    border-top-color: var(--theme-card-border, #dee2e6); /* Lighter hr */
    opacity: 0.5;
}

.lead-detail-page .info-group { 
    margin-bottom: 0.85rem; 
    display: flex; 
    align-items: baseline; /* This aligns the baselines of the text */
}
.lead-detail-page .info-group .data-label {
    flex-basis: 180px; /* Fixed basis for the label */
    min-width: 150px;  /* Minimum width for the label */
    margin-right: 10px; /* Space between label and value */
    color: var(--theme-text-medium, #495057); 
    font-weight: 500;
}
.lead-detail-page .info-group .data-value { 
    flex-grow: 1; /* Value takes remaining space */
    color: var(--theme-text-dark, #212529); 
    font-weight: 500;
    /* For long values that need to wrap: */
    word-break: break-word; /* or break-all if necessary */
}

/* In custom_styles.css - Add if not already there from quote_list styling */
.status-badge.status-draft { background-color: #6c757d; color: #fff; } /* Secondary */
.status-badge.status-sent { background-color: #0dcaf0; color: #212529; } /* Info */
.status-badge.status-accepted { background-color: #198754; color: #fff; } /* Success */
.status-badge.status-declined { background-color: #ffc107; color: #212529; } /* Warning */
.status-badge.status-expired { background-color: #e9ecef; color: #212529; border: 1px solid #adb5bd; } /* Light */
/* Add any other quote statuses you have */

/* Define your theme's blue color if not using Bootstrap's variable directly */
:root {
    --theme-glow-blue: #0d6efd; /* Standard Bootstrap primary blue, adjust if your theme blue is different */
    /* You can make it a bit lighter/brighter for the glow if needed */
    --theme-glow-blue-light: #529bff; 
}

/* KPI Scorecards on Dashboard */
.dashboard-kpi-card { /* Add this class to your KPI cards in dashboard.html */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    border: 1px solid #dee2e6; /* Default border */
}

.dashboard-kpi-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    /* A "WOW" glow often involves multiple layers or a more pronounced shadow */
    box-shadow: 0 0 15px 7px color-mix(in srgb, var(--theme-glow-blue) 40%, transparent), /* Inner, more solid glow */
                0 0 30px 15px color-mix(in srgb, var(--theme-glow-blue) 20%, transparent); /* Outer, softer glow */
    border-color: var(--theme-glow-blue-light); /* Optional: change border color on hover */
    z-index: 10; /* Ensure the hovered card comes above others if they are very close */
    position: relative; /* Needed for z-index to work effectively on non-positioned elements */
}

/* Specific card styling - ensure these don't override the hover too much, 
   or incorporate the hover within these if needed. 
   The .dashboard-kpi-card class should be general enough. */
.dashboard-kpi-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dashboard-kpi-card .card-title {
    color: #495057; /* Slightly muted title color */
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.dashboard-kpi-card .card-text.fs-2,
.dashboard-kpi-card .card-text.fs-4 {
    color: var(--theme-glow-blue); /* Make the main number blue */
    margin-bottom: 0.25rem;
}
.dashboard-kpi-card .card-text.fs-2.fw-bold,
.dashboard-kpi-card .card-text.fs-4.fw-bold {
    font-weight: 600 !important; /* Ensure boldness */
}

.dashboard-kpi-card small.text-muted {
    font-size: 0.85em;
}

/* Example for the Net Profit card if it has specific background */
.dashboard-kpi-card.bg-success-subtle:hover,
.dashboard-kpi-card.bg-danger-subtle:hover {
    /* Keep existing background, the box-shadow will layer on top */
    box-shadow: 0 0 15px 7px color-mix(in srgb, var(--theme-glow-blue) 45%, transparent),
                0 0 35px 20px color-mix(in srgb, var(--theme-glow-blue) 25%, transparent);
}