/* 
 * Dark Mode Enhancements for S.S.I.S.
 * Modern, professional color scheme for data grids
 * Uses .dark-mode class on body for reliable targeting
 */

/* ============================================
   LAYOUT BACKGROUND - ensure whole page is dark
   ============================================ */
html.dark-mode {
    --rz-base-background-color: #28363c;
    --rz-body-background-color: #28363c;
    --rz-layout-background-color: #28363c;
}

html.dark-mode,
html.dark-mode body,
html.dark-mode .rz-layout,
html.dark-mode .rz-body,
html.dark-mode .rz-content-container,
body.dark-mode,
body.dark-mode .rz-layout,
body.dark-mode .rz-body,
body.dark-mode .rz-content-container {
    background-color: #28363c !important;
}

/* FROZEN COLUMNS - Modern Professional Dark Theme Styling */
/* Ultra-specific selectors to ensure they apply */

/* First frozen column (Date) - Subtle alternating rows */
body.dark-mode th.frozen-column-1,
body.dark-mode td.frozen-column-1,
body.dark-mode .frozen-column-1,
body.dark-mode [class*="frozen-column-1"] {
    background-color: #2c3e50 !important;
    color: #e8e8e8 !important;
    font-weight: 500 !important;
    border-right: 1px solid #34495e !important;
}

/* Alternating rows for first column */
body.dark-mode tr:nth-child(even) td.frozen-column-1,
body.dark-mode tr:nth-child(even) .frozen-column-1 {
    background-color: #253544 !important;
}

/* Second frozen column (Total) - Subtle alternating rows */
body.dark-mode th.frozen-column-2,
body.dark-mode td.frozen-column-2,
body.dark-mode .frozen-column-2,
body.dark-mode [class*="frozen-column-2"] {
    background-color: #2c3e50 !important;
    color: #e8e8e8 !important;
    font-weight: 500 !important;
    border-right: 1px solid #34495e !important;
}

/* Alternating rows for second column */
body.dark-mode tr:nth-child(even) td.frozen-column-2,
body.dark-mode tr:nth-child(even) .frozen-column-2 {
    background-color: #253544 !important;
}

/* Headers for frozen columns - subtle styling */
body.dark-mode thead th.frozen-column-1,
body.dark-mode thead .frozen-column-1 {
    background-color: #34495e !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #4a5568 !important;
}

body.dark-mode thead th.frozen-column-2,
body.dark-mode thead .frozen-column-2 {
    background-color: #34495e !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #4a5568 !important;
}

/* Totals row - only in tfoot */
body.dark-mode tfoot tr td.frozen-column-1,
body.dark-mode tfoot tr .frozen-column-1 {
    background-color: #34495e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

body.dark-mode tfoot tr td.frozen-column-2,
body.dark-mode tfoot tr .frozen-column-2 {
    background-color: #34495e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Border above entire totals row - only tfoot */
body.dark-mode tfoot tr td,
body.dark-mode .rz-datatable tfoot tr td,
body.dark-mode .rz-grid-table tfoot tr td,
body.dark-mode table tfoot tr td {
    border-top: 2px solid #6c9bd1 !important;
    background-color: #34495e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* DATA GRID - Modern dark theme with excellent visibility */


/* Table rows - alternating dark slate colors */
body.dark-mode .rz-datatable-data tr,
body.dark-mode .rz-grid-table tbody tr,
body.dark-mode .rz-datatable tbody tr,
body.dark-mode table tbody tr {
    background-color: #2c3e50 !important;
    border-bottom: 1px solid #34495e !important;
    transition: background-color 0.2s ease;
}

/* Alternating rows - slightly darker for better distinction */
body.dark-mode .rz-datatable-data tr:nth-child(even),
body.dark-mode .rz-grid-table tbody tr:nth-child(even),
body.dark-mode .rz-datatable tbody tr:nth-child(even),
body.dark-mode table tbody tr:nth-child(even) {
    background-color: #253544 !important;
}

/* Hover effect - light blue tint */
body.dark-mode .rz-datatable-data tr:hover,
body.dark-mode .rz-grid-table tbody tr:hover,
body.dark-mode .rz-datatable tbody tr:hover,
body.dark-mode table tbody tr:hover {
    background-color: #34495e !important;
    box-shadow: inset 0 0 0 1px #3498db;
}

/* Table headers - professional dark blue-grey */
body.dark-mode .rz-datatable-thead th,
body.dark-mode .rz-grid-table thead th,
body.dark-mode .rz-datatable thead th,
body.dark-mode thead th,
body.dark-mode table thead th {
    background-color: #1a252f !important;
    color: #ecf0f1 !important;
    border-bottom: 2px solid #3498db !important;
    font-weight: 600 !important;
    padding: 12px 8px !important;
    letter-spacing: 0.3px;
}

/* Table cells - excellent contrast white text */
body.dark-mode .rz-cell-data,
body.dark-mode td,
body.dark-mode .rz-datatable td,
body.dark-mode table td {
    color: #ecf0f1 !important;
    border-color: #34495e !important;
    padding: 10px 8px !important;
}

/* First column (date/label column) - slightly emphasized */
body.dark-mode td:first-child,
body.dark-mode .rz-cell-data:first-child {
    font-weight: 500;
    color: #f8f9fa !important;
}

/* Totals row - distinct dark blue with accent border */
body.dark-mode .rz-datatable-data tr:last-child,
body.dark-mode .rz-grid-table tbody tr:last-child,
body.dark-mode table tbody tr:last-child {
    background-color: #1a252f !important;
    font-weight: 700 !important;
    border-top: 3px solid #3498db !important;
    border-bottom: 3px solid #3498db !important;
}

/* Totals row text - brighter */
body.dark-mode .rz-datatable-data tr:last-child td,
body.dark-mode .rz-grid-table tbody tr:last-child td,
body.dark-mode table tbody tr:last-child td {
    color: #ffffff !important;
}

/* Panel improvements */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-panel {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-panel-title {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid #4a5568 !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-panel-content {
    background-color: #2d3748 !important;
}

/* Chart enhancements */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-chart {
    background-color: #1a202c !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-chart text {
    fill: #e2e8f0 !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-chart .rz-grid-line {
    stroke: #4a5568 !important;
    opacity: 0.3;
}

/* Legend improvements */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-legend {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important;
}

/* ============================================
   HELP MESSAGES - Professional Dark Mode Styling
   ============================================ */

/* Help message body container */
body.dark-mode .help-message-body,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body {
    background-color: #1e2a3a !important;
    color: #e8eef3 !important;
    padding: 1.5rem !important;
    border-radius: 6px !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
}

/* Headings in help messages - softer teal instead of bright blue */
body.dark-mode .help-message-body h1,
body.dark-mode .help-message-body h2,
body.dark-mode .help-message-body h3,
body.dark-mode .help-message-body h4,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body h1,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body h2,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body h3,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body h4 {
    color: #7dd3c0 !important;
    font-weight: 600 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.8rem !important;
    letter-spacing: 0.3px !important;
}

/* Update dates and labels - softer cyan blue instead of bright blue */
body.dark-mode .help-message-body strong,
body.dark-mode .help-message-body b,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body strong,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body b {
    color: #6db3e0 !important;
    font-weight: 600 !important;
}

/* Links in help messages - accessible teal */
body.dark-mode .help-message-body a,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body a {
    color: #7dd3c0 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

body.dark-mode .help-message-body a:hover,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body a:hover {
    color: #a8e6d7 !important;
}

/* Paragraphs - better spacing */
body.dark-mode .help-message-body p,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body p {
    color: #d1dce6 !important;
    margin-bottom: 1rem !important;
}

/* Lists - improved readability */
body.dark-mode .help-message-body ul,
body.dark-mode .help-message-body ol,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body ul,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body ol {
    color: #d1dce6 !important;
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}

body.dark-mode .help-message-body li,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body li {
    margin-bottom: 0.5rem !important;
    line-height: 1.6 !important;
}

/* Code blocks or pre-formatted text */
body.dark-mode .help-message-body code,
body.dark-mode .help-message-body pre,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body code,
body:has(link[href*="radzen-dark"]:not([disabled])) .help-message-body pre {
    background-color: #151f2e !important;
    color: #9fcdea !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    border: 1px solid #2a3f56 !important;
}

/* Panel containing help message - softer background */
body.dark-mode .rz-panel:has(.help-message-body),
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-panel:has(.help-message-body) {
    background-color: #1a2332 !important;
    border: 1px solid #2a3f56 !important;
}

body.dark-mode .rz-panel:has(.help-message-body) .rz-panel-titlebar,
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-panel:has(.help-message-body) .rz-panel-titlebar {
    background-color: #253548 !important;
    color: #b8d4eb !important;
    border-bottom: 1px solid #3d5368 !important;
}

body.dark-mode .rz-panel:has(.help-message-body) .rz-panel-content,
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-panel:has(.help-message-body) .rz-panel-content {
    background-color: #1a2332 !important;
}


body:has(link[href*="radzen-dark"]:not([disabled])) .rz-legend-item-text {
    color: #e2e8f0 !important;
}

/* Card and content container improvements */
body.dark-mode .rz-card,
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-card {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.dark-mode .rz-body {
    background-color: #28363c !important;
}

/* Header improvements */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-header {
    background-color: #1a202c !important;
    border-bottom: 1px solid #4a5568 !important;
}

/* Better heading contrast */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-heading,
body:has(link[href*="radzen-dark"]:not([disabled])) h1,
body:has(link[href*="radzen-dark"]:not([disabled])) h2,
body:has(link[href*="radzen-dark"]:not([disabled])) h3 {
    color: #f7fafc !important;
}

/* Form controls in dark mode */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-dropdown,
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-textbox,
body:has(link[href*="radzen-dark"]:not([disabled])) input,
body:has(link[href*="radzen-dark"]:not([disabled])) select {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

/* Dropdown menu improvements */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-dropdown-panel {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-dropdown-item {
    color: #e2e8f0 !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-dropdown-item:hover {
    background-color: #374151 !important;
}

/* Sidebar improvements */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-sidebar {
    background-color: #1a202c !important;
    border-right: 1px solid #4a5568 !important;
}

/* Better button contrast */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-button {
    border-color: #4a5568 !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-button:not(.rz-button-primary):not(.rz-button-secondary) {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

body:has(link[href*="radzen-dark"]:not([disabled])) .rz-button:hover {
    filter: brightness(1.2);
}

/* Specific improvements for Homepage Report */
body:has(link[href*="radzen-dark"]:not([disabled])) .homepagereport .rz-legend {
    background-color: rgba(45, 55, 72, 0.95) !important;
    padding: 8px !important;
}

/* Better contrast for totals row */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-datatable-data tr:last-child,
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-grid-table tbody tr:last-child {
    background-color: #1a202c !important;
    font-weight: bold;
    border-top: 2px solid #4a5568 !important;
}

/* Notice board specific styling */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-panel[text*="Notice Board"] .rz-panel-content {
    background-color: #2d3748 !important;
}

/* Improve disabled state visibility */
body:has(link[href*="radzen-dark"]:not([disabled])) .rz-disabled,
body:has(link[href*="radzen-dark"]:not([disabled])) [disabled] {
    opacity: 0.5 !important;
}

/* Better focus indicators */
body:has(link[href*="radzen-dark"]:not([disabled])) *:focus {
    outline: 2px solid #4299e1 !important;
    outline-offset: 2px;
}

/* Scrollbar styling for dark mode */
body:has(link[href*="radzen-dark"]:not([disabled])) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body:has(link[href*="radzen-dark"]:not([disabled])) ::-webkit-scrollbar-track {
    background: #1a202c;
}

body:has(link[href*="radzen-dark"]:not([disabled])) ::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 6px;
}

body:has(link[href*="radzen-dark"]:not([disabled])) ::-webkit-scrollbar-thumb:hover {
    background: #718096;
}