/* Theme overrides for Syncfusion components - loaded last to ensure highest specificity */

/* Fix for Syncfusion e-icons to inherit theme colors instead of staying black */
/* This file is loaded AFTER all other CSS including Syncfusion themes */

/* Force all e-icons to inherit color from parent */
.e-icons,
.e-icons::before,
.e-icons::after {
    color: inherit !important;
}

/* More specific selectors to ensure they apply in TreeView context */
.e-treeview .e-icons,
.e-treeview .e-icons::before,
.e-treeview .e-icons::after {
    color: inherit !important;
}

/* Ensure all icon types inherit color */
span.e-icons,
span.e-icons::before,
div.e-icons,
div.e-icons::before,
i.e-icons,
i.e-icons::before {
    color: inherit !important;
}

/* For any SVG-based icons */
.e-icons svg,
.e-icons svg path {
    fill: currentColor !important;
}

/* Override any hardcoded colors in Syncfusion's CSS */
.e-treeview .e-text-content .e-icons,
.e-treeview .e-text-content .e-icons::before {
    color: inherit !important;
}

/* Fix for parent items with children (those with expand/collapse icons) */
.e-treeview .e-list-item .e-icons.e-icon-collapsible,
.e-treeview .e-list-item .e-icons.e-icon-expandable,
.e-treeview .e-list-item .e-icons.e-icon-collapsible::before,
.e-treeview .e-list-item .e-icons.e-icon-expandable::before {
    color: inherit !important;
}

/* TreeView specific overrides */
.e-treeview .e-list-item .e-text-content div.e-list-icon.e-icons,
.e-treeview .e-list-item .e-text-content div.e-list-icon.e-icons::before {
    color: inherit !important;
}

/* Hover and active states - let JavaScript handle colors dynamically */
.e-treeview .e-list-item.e-hover .e-text-content div.e-list-icon.e-icons,
.e-treeview .e-list-item.e-hover .e-text-content div.e-list-icon.e-icons::before,
.e-treeview .e-list-item.e-active .e-text-content div.e-list-icon.e-icons,
.e-treeview .e-list-item.e-active .e-text-content div.e-list-icon.e-icons::before {
    color: inherit !important;
}

/* =========================================================================
   Scrollbar Theme Support - Light and Dark Themes
   ========================================================================= */

/* Light theme scrollbar styles (default) */
:root {
    /* Scrollbar track (background) */
    --scrollbar-track-color: #f0f0f0;
    /* Scrollbar thumb (the draggable part) */
    --scrollbar-thumb-color: #c1c1c1;
    /* Scrollbar thumb on hover */
    --scrollbar-thumb-hover-color: #a8a8a8;
    /* Scrollbar thumb when active/dragging */
    --scrollbar-thumb-active-color: #787878;
}

/* Dark theme scrollbar colors */
body[data-theme="dark"] {
    --scrollbar-track-color: #2d2d30;
    --scrollbar-thumb-color: #555555;
    --scrollbar-thumb-hover-color: #686868;
    --scrollbar-thumb-active-color: #9e9e9e;
}

/* =========================================================================
   AI Chat component CSS variables — light defaults + dark overrides
   ========================================================================= */

:root {
    --color-bg-surface: #ffffff;
    --color-bg-surface-alt: #f5f5f5;
    --color-border: #e0e0e0;
    --color-border-light: #f0f0f0;
    --color-text-primary: #212121;
    --color-text-secondary: #666666;
    --color-bg-hover: rgba(0, 0, 0, 0.06);
    --color-primary: #1976d2;
    --color-primary-dark: #1565c0;
    --color-primary-light: rgba(25, 118, 210, 0.1);
    --color-danger: #c62828;
    --color-code-bg: rgba(0, 0, 0, 0.06);
    --color-code-block-bg: #1e1e1e;
    --color-code-block-text: #d4d4d4;
    --color-table-header-bg: rgba(0, 0, 0, 0.04);
    --color-table-row-alt: rgba(0, 0, 0, 0.02);
}

body[data-theme="dark"] {
    --color-bg-surface: #1e1e1e;
    --color-bg-surface-alt: #2d2d2d;
    --color-border: #444444;
    --color-border-light: #383838;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #9e9e9e;
    --color-bg-hover: rgba(255, 255, 255, 0.07);
    --color-primary: #64b5f6;
    --color-primary-dark: #42a5f5;
    --color-primary-light: rgba(100, 181, 246, 0.12);
    --color-danger: #ef9a9a;
    --color-code-bg: rgba(255, 255, 255, 0.08);
    --color-code-block-bg: #0d1117;
    --color-code-block-text: #c9d1d9;
    --color-table-header-bg: rgba(255, 255, 255, 0.06);
    --color-table-row-alt: rgba(255, 255, 255, 0.03);
}

/* Base body styles with theme support */
html, body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333333;
}

body[data-theme="dark"] {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

/* Modern browsers (Chrome, Edge, Safari, Opera) - Webkit scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 6px;
    border: 2px solid var(--scrollbar-track-color);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active-color);
}

/* Scrollbar corner (where horizontal and vertical scrollbars meet) */
*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track-color);
}

/* Firefox - Standard scrollbar-color property */
* {
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Specific styling for Syncfusion components with scrollable content */
.e-dialog .e-dlg-content::-webkit-scrollbar,
.e-popup::-webkit-scrollbar,
.time-registration-container::-webkit-scrollbar,
.e-content::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.e-dialog .e-dlg-content::-webkit-scrollbar-track,
.e-popup::-webkit-scrollbar-track,
.time-registration-container::-webkit-scrollbar-track,
.e-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

.e-dialog .e-dlg-content::-webkit-scrollbar-thumb,
.e-popup::-webkit-scrollbar-thumb,
.time-registration-container::-webkit-scrollbar-thumb,
.e-content::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 6px;
    border: 2px solid var(--scrollbar-track-color);
}

.e-dialog .e-dlg-content::-webkit-scrollbar-thumb:hover,
.e-popup::-webkit-scrollbar-thumb:hover,
.time-registration-container::-webkit-scrollbar-thumb:hover,
.e-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
}

.e-dialog .e-dlg-content::-webkit-scrollbar-thumb:active,
.e-popup::-webkit-scrollbar-thumb:active,
.time-registration-container::-webkit-scrollbar-thumb:active,
.e-content::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active-color);
}

/* High contrast mode support for scrollbars */
@media (prefers-contrast: high) {
    *::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        background-clip: padding-box;
    }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
    *::-webkit-scrollbar {
        color-scheme: light dark;
    }
    *::-webkit-scrollbar-track {
        background: Canvas;
    }
    *::-webkit-scrollbar-thumb {
        background: ButtonText;
        border-color: Canvas;
    }
    *::-webkit-scrollbar-thumb:hover,
    *::-webkit-scrollbar-thumb:active {
        background: Highlight;
    }
}

/* =========================================================================
   Sidebar fix — preserve position:fixed inside pushed content
   =========================================================================
   Syncfusion SfSidebar adds .e-content-animation to the pushed content area
   and may apply a CSS transform for the push animation. Any CSS transform on
   an ancestor creates a new containing block for position:fixed descendants,
   making them behave like position:absolute and scroll with the page.
   Resetting to transform:none here restores correct fixed-positioning behavior
   while the margin-based push animation continues to work.
   ========================================================================= */
.e-content-animation {
    transform: none !important;
}

/* =========================================================================:
   Global Reusable Components - Theme Aware
   ============================================================================ */

/* Section Header - used throughout the application for consistent section titles */
.section-header {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    border-bottom: 1px solid currentColor;
    padding-bottom: 8px;
}

/* High contrast mode support */
@media (forced-colors: active) {
    .section-header {
        color: CanvasText;
        border-bottom-color: CanvasText;
    }
}