/* 
 * Professional Report Tables - Clean & Readable
 * Focus: Readability, proper spacing, clear hierarchy
 * ACCESSIBILITY: Optimized for visual clarity and older users
 */

/* ================================================================
   ACCESSIBILITY-FIRST TYPOGRAPHY
   High readability fonts, generous sizing, excellent contrast
   ================================================================ */

/* Base font settings for all table elements */
.table,
.table *,
.pro-table,
.pro-table *,
.overflow-x-auto,
.overflow-x-auto * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Improved table cell text - READABLE but efficient */
.table tbody td,
.pro-table tbody td {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    font-weight: 450 !important;
    padding: 0.5rem 0.75rem !important;
}

/* Table headers - readable and sortable */
.table thead th,
.pro-table thead th {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    padding: 0.6rem 0.75rem !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.1s ease !important;
}

.table thead th:hover,
.pro-table thead th:hover {
    background: #334155 !important;
}

/* Ensure high contrast text colors */
.table tbody td {
    color: #0f172a !important; /* Very dark slate - AAA contrast */
}

.table thead th {
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Container for report tables */
.report-container {
    width: 100%;
    padding: 1.5rem;
    max-width: 98vw;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Scrollable table wrapper - only outer container scrolls */
.table-wrapper {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 0.5rem;
}

/* Inner scroll div should NOT have its own scroll */
.table-scroll {
    width: 100%;
    overflow: visible;
}

/* Tables with explicit IDs that need scroll */
#daysRunTable,
#dynReportTable,
#haltedTransTable,
#haltedFeeTable,
#feeTransTable,
#unpaidTable,
#logsTable {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}

/* Force scroll on ALL dynamically generated table sections */
div[id^="table-section-"],
.overflow-x-auto.shadow-xl {
    max-height: 55vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    display: block !important;
}

/* Ensure tables inside scrollable containers don't break the scroll */
div[id^="table-section-"] > table,
.overflow-x-auto.shadow-xl > table {
    width: 100%;
}

/* Fix for tables wrapped in outer table>tr>td structure (like ReportTransactionsAdhoc) */
/* The td elements need to constrain their height */
td > div[id^="table-section-"],
td > .overflow-x-auto {
    max-height: 50vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Force the parent td to not expand beyond the div's max-height */
td:has(> div[id^="table-section-"]),
td:has(> .overflow-x-auto) {
    max-height: 55vh;
    overflow: hidden;
    vertical-align: top;
}

/* Custom scrollbar styling - visible and usable */
.table-scroll-container::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
div[id$="Table"]::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

.table-scroll-container::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track,
div[id$="Table"]::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5) !important;
    border-radius: 6px !important;
}

.table-scroll-container::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
div[id$="Table"]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #475569, #64748b) !important;
    border-radius: 6px !important;
    border: 2px solid rgba(30, 41, 59, 0.5) !important;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover,
div[id$="Table"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #64748b, #94a3b8) !important;
}

/* Sticky table header when scrolling */
.table-scroll-container table thead,
.table-scroll table thead,
.overflow-x-auto table thead,
div[id$="Table"] table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.table-scroll-container table thead th,
.table-scroll table thead th,
.overflow-x-auto table thead th,
div[id$="Table"] table thead th {
    background: #1e293b !important;
}

/* Filter/Search bar styling */
.report-filters {
    background: #1e293b;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.report-filters label {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.25rem;
}

.report-filters input,
.report-filters select {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #1e293b;
    min-width: 150px;
}

.report-filters input:focus,
.report-filters select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.report-filters .btn-search {
    background: #22c55e;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.report-filters .btn-search:hover {
    background: #16a34a;
}

/* Table wrapper - scrollable and CENTERED */
.table-wrapper {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 auto 1rem auto !important;
    max-width: 98vw !important;
    width: 98% !important;
    display: block !important;
}

/* Ensure pro-table fills the wrapper */
.pro-table {
    width: 100% !important;
    table-layout: auto !important;
}

.table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
}

/* Make tfoot sticky at bottom of scroll container */
.table-scroll table tfoot,
.table-wrapper table tfoot,
.pro-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #1e293b !important;
}

.table-scroll table tfoot th,
.table-wrapper table tfoot th,
.pro-table tfoot th {
    background: #1e293b !important;
    padding: 0.75rem 1rem !important;
}

/* The actual table - COMPACT design */
.pro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    background: white;
}

/* Table header - sticky and sortable */
.pro-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.pro-table thead th {
    background: #1e293b;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.625rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid #3b82f6;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease, color 0.1s ease;
}

.pro-table thead th:hover {
    background: #334155;
    color: white;
}

/* Sort indicators */
.pro-table thead th span {
    color: #60a5fa;
    margin-left: 0.25rem;
    font-size: 0.5rem;
}

.pro-table thead th:first-child {
    border-top-left-radius: 0.375rem;
}

.pro-table thead th:last-child {
    border-top-right-radius: 0.375rem;
}

/* Table body - COMPACT cells */
.pro-table tbody td {
    padding: 0.375rem 0.625rem;
    color: #1e293b;
    font-size: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    line-height: 1.3;
}

/* Strong alternating rows */
.pro-table tbody tr:nth-child(even) {
    background: #f1f5f9;
}

/* Clear hover effect */
.pro-table tbody tr:hover {
    background: #dbeafe;
}

/* Right-align amount columns */
.pro-table tbody td:nth-last-child(4),
.pro-table tbody td:nth-last-child(5) {
    text-align: right;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
}

/* Action buttons in table */
.pro-table .actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pro-table .btn-action {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.pro-table .btn-edit {
    background: #3b82f6;
    color: white;
}

.pro-table .btn-edit:hover {
    background: #2563eb;
}

.pro-table .btn-delete {
    background: #ef4444;
    color: white;
}

.pro-table .btn-delete:hover {
    background: #dc2626;
}

.pro-table .btn-view {
    background: #8b5cf6;
    color: white;
}

.pro-table .btn-view:hover {
    background: #7c3aed;
}

/* Status badges */
.pro-table .badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pro-table .badge-success {
    background: #dcfce7;
    color: #166534;
}

.pro-table .badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.pro-table .badge-error {
    background: #fee2e2;
    color: #991b1b;
}

.pro-table .badge-info {
    background: #dbeafe;
    color: #1e40af;
}

/* Numeric/Amount columns - right align */
.pro-table td.num,
.pro-table th.num {
    text-align: right;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Pagination */
.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-pagination .page-info {
    color: #64748b;
    font-size: 0.875rem;
}

.table-pagination .page-buttons {
    display: flex;
    gap: 0.25rem;
}

.table-pagination .page-btn {
    padding: 0.5rem 0.875rem;
    border: 1px solid #cbd5e1;
    background: white;
    color: #334155;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.table-pagination .page-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.table-pagination .page-btn.active {
    background: #1e293b;
    color: white;
    border-color: #1e293b;
}

.table-pagination .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Export button */
.btn-export {
    background: #059669;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.btn-export:hover {
    background: #047857;
}

.btn-export svg {
    width: 1rem;
    height: 1rem;
}

/* Records per page select */
.records-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
}

.records-per-page select {
    padding: 0.375rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    background: white;
    color: #334155;
    font-size: 0.875rem;
}

/* Empty state */
.table-empty {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.table-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.table-empty-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Loading state - CENTERED, reasonable size */
.table-loading,
.report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    width: 100%;
}

.table-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem auto;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toolbar above table */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-toolbar h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.table-toolbar-actions {
    display: flex;
    gap: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .report-filters {
        flex-direction: column;
    }
    
    .report-filters input,
    .report-filters select {
        width: 100%;
    }
    
    .table-pagination {
        flex-direction: column;
        text-align: center;
    }
}

/* ================================================================
   OVERRIDES FOR EXISTING DAISYUI REPORT TABLES
   These ensure readability without rewriting complex page structures
   ================================================================ */

/* Override the forced light theme on table containers */
[data-theme="light"].overflow-x-auto,
.overflow-x-auto[data-theme="light"] {
    background: white !important;
}

/* Make DaisyUI tables readable - override table-xs tiny font */
.table.table-xs {
    font-size: 0.9rem !important;
}

.table.table-xs th,
.table.table-xs td {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
}

/* Override purple/magenta DaisyUI primary headers with professional dark slate */
.table thead th.bg-primary,
.table thead th.bg-secondary {
    background: #1e293b !important;
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.8rem !important;
}

/* Better body text colors for readability */
.table tbody td {
    color: #1e293b !important;
    background: white !important;
}

.table.table-zebra tbody tr:nth-child(odd) td {
    background: white !important;
}

.table.table-zebra tbody tr:nth-child(even) td {
    background: #f1f5f9 !important;
}

/* Better input styling for filter areas - ACCESSIBLE */
input.input,
input.input-primary,
.input.input-primary {
    background: white !important;
    color: #0f172a !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.9375rem !important; /* 15px */
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    letter-spacing: 0.01em !important;
}

input.input:focus,
input.input-primary:focus,
.input.input-primary:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

/* Date inputs consolidated - see DATE PICKER STYLES section at bottom */

/* Placeholder text - visible but distinct */
input::placeholder {
    color: #64748b !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Better alternating row colors */
.table.table-zebra tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

/* Better hover state */
.table tbody tr:hover,
.table tbody tr.hover\:bg-gray-100:hover {
    background: #e0f2fe !important;
}

/* Make table containers scrollable and centered */
.overflow-x-auto.shadow-xl.rounded-lg,
.overflow-x-auto.shadow-xl,
.overflow-x-auto {
    max-height: 60vh !important;
    max-width: 95vw !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: white !important;
    border-radius: 0.75rem !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Center tables within their containers and fill width */
.table,
table.table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* The report pages main container - centered */
.mx-auto,
[class*="mx-auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure all table parent divs are centered and fill width */
div:has(> table.table),
div:has(> .table) {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Report section headers */
.report-section-header {
    background: #1e293b;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    margin-bottom: 0;
}

/* Multi-report container (like adhoc transactions) */
.multi-report-section {
    margin-bottom: 2rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.multi-report-section .section-title {
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
    font-size: 1.1rem;
}

.multi-report-section .section-amount {
    color: #16a34a;
    font-family: 'Consolas', monospace;
    font-weight: 700;
}

/* Better pagination buttons */
.table tfoot button.btn,
.table tfoot .btn {
    background: white !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.table tfoot button.btn:hover,
.table tfoot .btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.table tfoot button.btn-secondary,
.table tfoot .btn-secondary {
    background: #1e293b !important;
    color: white !important;
    border-color: #1e293b !important;
}

/* Pagination footer styling */
.table tfoot th {
    background: #f8fafc !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
}

.table tfoot tr:last-child th {
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

.table tfoot table {
    width: auto !important;
    background: transparent !important;
}

/* ================================================================
   TABLE FOOTER WITH ACTION BUTTONS
   Fullscreen & Export on left, pagination on right
   ================================================================ */

.table-footer-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background: #f8fafc !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
    border-top: 1px solid #e2e8f0 !important;
    gap: 1rem !important;
}

.table-footer-actions {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
}

.table-footer-pagination {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Fullscreen button in footer */
.btn-table-fullscreen {
    background: #475569 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.btn-table-fullscreen:hover {
    background: #334155 !important;
    transform: translateY(-1px) !important;
}

.btn-table-fullscreen svg {
    width: 1rem !important;
    height: 1rem !important;
}

/* Export CSV button in footer */
.btn-table-export {
    background: #059669 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.btn-table-export:hover {
    background: #047857 !important;
    transform: translateY(-1px) !important;
}

.btn-table-export svg {
    width: 1rem !important;
    height: 1rem !important;
}

/* Records per page dropdown */
.table tfoot select.select {
    background: white !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.375rem !important;
    min-width: 80px !important;
}

/* Action button icons in tables - HIGH VISIBILITY */
.table td button svg,
.table td .tooltip button svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    stroke: #334155 !important;
    stroke-width: 2 !important;
}

.table td button,
.table td .tooltip button {
    padding: 0.375rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.15s !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.table td button:hover,
.table td .tooltip button:hover {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
}

.table td button:hover svg,
.table td .tooltip button:hover svg {
    stroke: #1e40af !important;
}

/* Select All / Deselect All in report table header */
.table thead th .report-select-all-btn,
.pro-table thead th .report-select-all-btn {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: 2px solid #93c5fd !important;
    border-radius: 0.375rem !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.7rem !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.table thead th .report-select-all-btn:hover,
.pro-table thead th .report-select-all-btn:hover {
    background: #2563eb !important;
    border-color: #bfdbfe !important;
    color: #ffffff !important;
}

/* Checkboxes in tables - VISIBLE */
.table td input[type="checkbox"].checkbox,
.table td input[type="checkbox"] {
    transform: scale(1) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    margin-left: 0 !important;
    margin: 0 auto !important;
    cursor: pointer !important;
    accent-color: #3b82f6 !important;
    border: 2px solid #64748b !important;
    border-radius: 0.25rem !important;
    background: white !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
}

/* Filter area at top of reports */
.report-filter-bar {
    background: #1e293b;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    margin: 0 auto 1.5rem;
    max-width: 95vw;
}

.report-filter-bar table {
    margin: 0 auto;
}

.report-filter-bar td {
    padding: 0 0.5rem;
    color: white;
    font-weight: 500;
}

.report-filter-bar input,
.report-filter-bar select {
    background: white !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

.report-filter-bar button {
    background: #22c55e !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.report-filter-bar button:hover {
    background: #16a34a !important;
}

/* Report page container */
.report-page {
    padding: 1.5rem;
    max-width: 98vw;
    margin: 0 auto;
}

/* Empty/Loading states */
.report-empty,
.report-loading {
    text-align: center;
    padding: 3rem;
    color: #64748b;
    background: white;
    border-radius: 0.5rem;
    margin: 2rem auto;
    max-width: 600px;
}

/* Progress bar styling */
.progress {
    height: 0.5rem !important;
    background: #e2e8f0 !important;
}

.progress::-webkit-progress-value {
    background: #3b82f6 !important;
}

/* Fix select dropdowns globally for reports */
select.select-primary,
select.select,
.select {
    background: white !important;
    color: #0f172a !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9375rem !important; /* 15px for readability */
    font-weight: 550 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    letter-spacing: 0.01em !important;
}

select.select-primary:focus,
select.select:focus,
.select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    outline: none !important;
}

/* Add column separators to tables */
.table tbody td,
.table thead th {
    border-right: 1px solid #e2e8f0 !important;
}

.table tbody td:last-child,
.table thead th:last-child {
    border-right: none !important;
}

/* Readable cell padding */
.table tbody td {
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.table thead th {
    padding: 0.6rem 0.75rem !important;
    border-bottom: 2px solid #3b82f6 !important;
}

/* ================================================================
   IMPROVED RECORDS PER PAGE DROPDOWN
   Rounded edges, centered text
   ================================================================ */

.table tfoot select.select,
select.select-primary.select-sm,
.select.select-primary.select-sm {
    background: white !important;
    color: #0f172a !important;
    border: 2px solid #cbd5e1 !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9375rem !important; /* 15px */
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    border-radius: 0.625rem !important;
    min-width: 75px !important;
    height: 2.625rem !important;
    line-height: 1.5rem !important;
    text-align: center !important;
    text-align-last: center !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230f172a' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.625rem center !important;
    padding-right: 2rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.table tfoot select.select:hover,
select.select-primary.select-sm:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

/* Records per page label styling - THEME SAFE - HIGH CONTRAST */
.table tfoot td,
.table tfoot th,
tfoot td,
tfoot th {
    color: white !important;
    background: #1e293b !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 0.75rem 1rem !important;
}

/* Explicit styling for Records per page area */
.table tfoot,
tfoot {
    background: #1e293b !important;
}

.table tfoot table,
.table tfoot table td,
tfoot table,
tfoot table td {
    color: white !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Records per page select in dark footer */
.table tfoot select,
tfoot select {
    background: white !important;
    color: #1e293b !important;
    border: 2px solid #475569 !important;
}

/* Pagination buttons in dark footer */
.table tfoot .btn,
.table tfoot button,
tfoot .btn,
tfoot button {
    background: #475569 !important;
    color: white !important;
    border: 1px solid #64748b !important;
}

.table tfoot .btn:hover,
.table tfoot button:hover,
tfoot .btn:hover,
tfoot button:hover {
    background: #64748b !important;
}

.table tfoot .btn-secondary,
.table tfoot .btn.btn-secondary,
tfoot .btn-secondary {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* ================================================================
   ACCESSIBILITY: Form controls with readable text
   ================================================================ */

/* All form labels */
td, label, span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ================================================================
   THEME-SAFE LOGOUT BUTTON
   ================================================================ */
   
.btn-logout,
button[class*="logout"],
a[href*="logout"],
form[action*="Logout"] button,
#logout-btn,
.logout-button {
    background: #dc2626 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.btn-logout:hover,
button[class*="logout"]:hover,
a[href*="logout"]:hover,
form[action*="Logout"] button:hover {
    background: #b91c1c !important;
}

/* ================================================================
   IMPROVED BUTTON READABILITY - Theme-safe buttons
   ================================================================ */

/* Base button styling for table actions */
.btn-sm.btn-outline.btn-secondary,
button.btn-sm.btn-outline.btn-secondary {
    background: #1e293b !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.btn-sm.btn-outline.btn-secondary:hover,
button.btn-sm.btn-outline.btn-secondary:hover {
    background: #334155 !important;
    transform: translateY(-1px) !important;
}

/* Pagination buttons - more rounded and readable */
.table tfoot button.btn.btn-square,
.table tfoot .btn.btn-square,
.table tfoot button.btn,
.table tfoot .btn {
    background: white !important;
    color: #1e293b !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 0.625rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.table tfoot button.btn.btn-square:hover,
.table tfoot .btn.btn-square:hover {
    background: #f1f5f9 !important;
    border-color: #3b82f6 !important;
}

/* Active/selected page button */
.table tfoot button.btn.btn-square.btn-secondary,
.table tfoot button.btn-secondary.btn-outline {
    background: #1e293b !important;
    color: white !important;
    border-color: #1e293b !important;
}

/* ================================================================
   FULLSCREEN TABLE MODAL - PROFESSIONAL COMPACT DESIGN
   ================================================================ */

.table-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0f172a;
    z-index: 9999;
    display: none;
    flex-direction: column;
    padding: 0;
    animation: fadeIn 0.15s ease;
}

.table-fullscreen-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.table-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    flex-shrink: 0;
    border-bottom: 2px solid #3b82f6;
}

.table-fullscreen-header h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.table-fullscreen-actions {
    display: flex;
    gap: 0.5rem;
}

.table-fullscreen-actions button {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
}

/* CRITICAL: Scrollable content container */
.table-fullscreen-content {
    flex: 1;
    overflow: auto !important;
    padding: 0.5rem;
    min-height: 0;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* FULLSCREEN TABLE - Ultra compact professional */
.table-fullscreen-content .table,
.table-fullscreen-content table {
    width: 100% !important;
    font-size: 0.6875rem !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: white !important;
    border-radius: 0.375rem !important;
}

/* Readable sortable headers in fullscreen */
.table-fullscreen-content .table thead th,
.table-fullscreen-content table thead th {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    border-bottom: 2px solid #3b82f6 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
    user-select: none !important;
}

.table-fullscreen-content .table thead th:hover,
.table-fullscreen-content table thead th:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* Sort arrows */
.table-fullscreen-content th span {
    color: #60a5fa !important;
    margin-left: 0.25rem !important;
    font-size: 0.5rem !important;
}

/* Readable cells in fullscreen */
.table-fullscreen-content .table tbody td,
.table-fullscreen-content table tbody td {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.75rem !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
    background: white !important;
    vertical-align: middle !important;
}

/* Strong zebra striping - very visible */
.table-fullscreen-content .table tbody tr:nth-child(even) td,
.table-fullscreen-content table tbody tr:nth-child(even) td {
    background: #f1f5f9 !important;
}

/* Clear hover */
.table-fullscreen-content .table tbody tr:hover td,
.table-fullscreen-content table tbody tr:hover td {
    background: #dbeafe !important;
}

/* Right-align amounts - look for common amount column positions */
.table-fullscreen-content td:nth-last-child(4),
.table-fullscreen-content td:nth-last-child(5) {
    text-align: right !important;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace !important;
    font-variant-numeric: tabular-nums !important;
}

/* Show pagination in fullscreen - sticky at bottom */
.table-fullscreen-content tfoot {
    position: sticky !important;
    bottom: 0 !important;
    background: #1e293b !important;
    z-index: 10 !important;
}

.table-fullscreen-content tfoot th,
.table-fullscreen-content tfoot td {
    background: #1e293b !important;
    color: white !important;
    padding: 0.5rem 0.75rem !important;
}

/* Compact footer */
.table-fullscreen-info {
    padding: 0.375rem 1rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    font-size: 0.6875rem;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    border-top: 2px solid #3b82f6;
}

.table-fullscreen-info span {
    color: #94a3b8 !important;
}

/* Fullscreen toggle button */
.btn-fullscreen {
    background: #475569 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    transition: all 0.15s ease !important;
}

.btn-fullscreen:hover {
    background: #334155 !important;
    transform: translateY(-1px) !important;
}

.btn-fullscreen svg {
    width: 1rem;
    height: 1rem;
}

/* Close fullscreen button */
.btn-close-fullscreen {
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}

.btn-close-fullscreen:hover {
    background: #dc2626 !important;
}

/* ================================================================
   CSV EXPORT BUTTON
   ================================================================ */

.btn-csv-export {
    background: #059669 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    transition: all 0.15s ease !important;
}

.btn-csv-export:hover {
    background: #047857 !important;
    transform: translateY(-1px) !important;
}

.btn-csv-export svg {
    width: 1rem;
    height: 1rem;
}

/* Table action bar - appears above tables */
.table-action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
}

/* ================================================================
   THEME-SAFE GENERAL BUTTON OVERRIDES
   Ensures buttons are readable on all themes
   ================================================================ */

/* Primary action buttons */
.btn-primary-action {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.btn-primary-action:hover {
    background: #2563eb !important;
}

/* Danger buttons */
.btn-danger-action {
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.btn-danger-action:hover {
    background: #dc2626 !important;
}

/* Success buttons */
.btn-success-action {
    background: #22c55e !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.btn-success-action:hover {
    background: #16a34a !important;
}

/* ================================================================
   GLOBAL CENTERING OVERRIDES
   Ensure all table containers are centered with equal spacing
   ================================================================ */

/* Force center all table wrapper elements */
[id*="Table"],
[id*="table"],
[id*="section"],
div[class*="shadow-xl"]:has(table),
div.bg-base-100:has(table) {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 95vw !important;
}

/* Ensure the action bar above tables is also centered */
div[style*="max-width: 95vw"],
div[style*="max-width:95vw"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Override any left/right margins that aren't auto */
div[style*="margin-left:2vw"],
div[style*="margin-left: 2vw"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Make the table always fill its container */
table.table,
.table,
.pro-table,
table {
    width: 100% !important;
}

/* Force table cells to expand and distribute evenly */
table.table td,
table.table th,
.table td,
.table th {
    white-space: nowrap !important;
    min-width: fit-content !important;
}

/* Make the table itself stretch to fill container */
table.table,
.table {
    width: 100% !important;
    table-layout: auto !important;
}

/* Ensure parent containers are also properly sized */
body > div,
main,
.main-content,
article {
    width: 100% !important;
    max-width: 100% !important;
}

/* Center table content within overflow containers */
.overflow-x-auto {
    display: flex !important;
    justify-content: center !important;
}

.overflow-x-auto > table {
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

/* The page wrapper should center all children */
div[style*="width:90vw"],
div[style*="width: 90vw"],
div[style*="width:95vw"],
div[style*="width: 95vw"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ================================================================
   DATE PICKER STYLES - Ensure calendar icon is visible and clickable
   All date input styling consolidated here
   ================================================================ */
input[type="date"] {
    position: relative !important;
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231e293b' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
    color: #1e293b !important;
    border: 2px solid #64748b !important;
    border-radius: 0.5rem !important;
    min-height: 2.5rem !important;
    padding: 0.5rem 2.5rem 0.5rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Make the native calendar picker clickable while hiding it */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
}

input[type="date"]:hover {
    border-color: #3b82f6 !important;
}

input[type="date"]:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* All themes - white background with dark calendar icon */
[data-theme] input[type="date"] {
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231e293b' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
    color: #1e293b !important;
}

/* Date input helper class for full width */
.date-input {
    width: 100% !important;
}

/* ================================================================
   MODAL DIALOG STYLES - Confirmation modals, edit modals, etc.
   ================================================================ */

/* DaisyUI Modal overrides - ensure proper styling */
.modal {
    --tw-bg-opacity: 1 !important;
}

.modal-box {
    background-color: white !important;
    color: #1e293b !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Modal headers */
.modal-box h3,
.modal-box .font-bold {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Modal text content */
.modal-box p,
.modal-box span,
.modal-box div {
    color: #334155 !important;
}

/* Modal close button */
.modal-box .btn-circle.btn-ghost {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: none !important;
}

.modal-box .btn-circle.btn-ghost:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Modal action buttons */
.modal-box .btn-accent,
.modal-box .btn-primary {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600 !important;
}

.modal-box .btn-accent:hover,
.modal-box .btn-primary:hover {
    background: #2563eb !important;
}

/* Confirm button - green for positive actions */
.modal-box button[value="confirm"],
.modal-box .btn-success {
    background: #22c55e !important;
    color: white !important;
}

.modal-box button[value="confirm"]:hover,
.modal-box .btn-success:hover {
    background: #16a34a !important;
}

/* Cancel button - subtle styling */
.modal-box button[value="cancel"],
.modal-box .btn-ghost {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.modal-box button[value="cancel"]:hover,
.modal-box .btn-ghost:hover {
    background: #e2e8f0 !important;
}

/* Delete/Danger button in modals */
.modal-box .btn-error,
.modal-box .btn-danger {
    background: #ef4444 !important;
    color: white !important;
}

.modal-box .btn-error:hover,
.modal-box .btn-danger:hover {
    background: #dc2626 !important;
}

/* Modal backdrop */
.modal-backdrop,
.modal::backdrop {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

/* Card actions in modals - proper spacing */
.modal-box .card-actions {
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
}

/* Form elements inside modals */
.modal-box input,
.modal-box select,
.modal-box textarea {
    background: white !important;
    color: #1e293b !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.875rem !important;
}

.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Labels in modals */
.modal-box label {
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
}

/* Alerts/Info boxes in modals */
.modal-box .alert {
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0c4a6e !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
}

.modal-box .alert-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.modal-box .alert-error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.modal-box .alert-success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

/* VanillaModalDialog base styles */
div.base-modal-background {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 1000 !important;
}

div.base-modal-content {
    background-color: white !important;
    border-radius: 1rem !important;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    padding: 1.5rem !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Native dialog element styling */
dialog {
    background: white !important;
    color: #1e293b !important;
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    padding: 0 !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

/* ================================================================
   PRINT STYLES - Clean printouts for reports
   ================================================================ */
@media print {
    header, footer, .navbar, .btn-export, .btn-fullscreen, 
    .table-pagination, nav, aside { display: none !important; }
    
    body { background: white !important; color: black !important; font-size: 10pt !important; }
    
    table { page-break-inside: auto !important; border-collapse: collapse !important; }
    tr { page-break-inside: avoid !important; }
    thead { display: table-header-group !important; }
    
    th { background: #f3f4f6 !important; color: black !important; 
         -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    
    td, th { border: 1px solid #d1d5db !important; padding: 6px 8px !important; font-size: 9pt !important; }
    
    * { box-shadow: none !important; text-shadow: none !important; }
    h1, h2, h3 { page-break-after: avoid !important; }
}