/* 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;
}

/* 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;
    }
}

/* =========================================================================:
   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;
    }
}