/* =============================== */
/* Syncfusion Dialog Styling  -- NOT CURRENTLY USED 2025.09.17 */
/* =============================== */
.two-col-dialog .e-dlg-content {
    max-height: calc(100dvh - 200px);
    overflow: auto;
}

.two-col-form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two columns */
    gap: 16px 24px;
    align-items: start;
}

    .two-col-form .e-field {
        display: flex;
        flex-direction: column;
    }

    .two-col-form label {
        margin-bottom: 4px;
        font-weight: 600;
    }

@media (max-width: 900px) {
    .two-col-form {
        grid-template-columns: 1fr;
    }
    /* stack on small screens */
}

/* =============================== */
/* Syncfusion Grid Styling  */
/* =============================== */
/* Alt Row Color */
.e-grid .e-altrow {
    background-color: #fafafa;
}

/* Header Z-Index */
.e-grid .e-gridheader {
    z-index: 1;
}

/* Grid Header Cells */
.e-grid .e-headercell {
    background-color: var(--brand-blue);
    color: var(--fluent-foreground);
    font-size: 11px;
    font-weight: bold;
}

/* General Row Cell */
.e-grid .e-rowcell {
    font-size: 11px;
    padding: 2px;
}

/* Optional size override class */
.small-header-font .e-headercell {
    font-size: 12px;
}

/* Toolbar Buttons - Hide Text */
.e-grid .e-toolbar .e-tbar-btn-text,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    display: none;
}

/* Grid Container */
.sf-grid-container {
    width: 100%;
    max-width: 100%; /* Prevents grid from overflowing */
    overflow-x: auto; /* Enables horizontal scroll if needed */
}





    /* =============================== */
    /* Grid header (sorted) overrides  */
    /* =============================== */
    /* Keep header text white, including when sorted */
    .e-grid .e-gridheader .e-headercelldiv, .e-grid .e-gridheader .e-headercell.e-sort .e-headercelldiv, .e-grid .e-gridheader .e-headercell .e-headertext {
    color: var(--fluent-foreground) !important;
}

/* Make sort/filter icons white too */
.e-grid .e-gridheader .e-sortfilterdiv .e-icons,
.e-grid .e-gridheader .e-filtermenudiv .e-icons {
    color: var(--fluent-foreground) !important;
    fill: var(--fluent-foreground) !important;
}

/* (optional) compact header height + no wrap */
.e-grid .e-gridheader .e-headercelldiv {
    white-space: nowrap;
}

.e-grid .e-gridheader .e-headercell {
    padding: 6px 8px;
}

/* Toolbar Margin */
.toolbar-margin-right {
    margin-right: 10px;
}

/* Collapse Icon */
.e-collapse::before {
    content: '\e834';
}

/* =============================== */
/* Syncfusion Calendar Styling  */
/* =============================== */
/* Sample: To specify background color and border */
.e-calendar {
    background-color: var(--fluent-background);
    border: 3px solid var(--bsx-border-100);
}

    /* Calendar Header */
    .e-calendar .e-header span, .e-bigger.e-small .e-calendar .e-header span {
        border: 1px solid var(--bsx-border-100);
        color: var(--bsx-action);
    }

    /* Focused/Selected Date */
    .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
        background-color: var(--bsx-action);
        color: #fff;
    }

.calendar-import.e-upload {
    border: 0;
    padding-left: 0 !important;
}

@media (max-width: 441px) {
    .calendar-import.e-upload {
        padding-top: 10px !important;
    }
}

.calendar-import.e-upload .e-file-select-wrap {
    padding: 0
}

    .calendar-import.e-upload .e-file-select-wrap .e-file-drop, .calendar-import .e-upload-files {
        display: none;
    }

/* =============================== */
/* Syncfusion DropdownTree Styling */
/* =============================== */

.e-ddt.e-input-group.e-control-wrapper .e-ddt-icon::before {
    content: '\e665';
}

.e-ddt .e-input-group-icon.e-ddt-icon.e-icons,
.e-ddt .e-input-group-icon.e-ddt-icon.e-icons:hover {
    color: var(--bsx-action);
    font-size: 13px;
}

/* =============================== */
/* Spinner Styling                 */
/* =============================== */

.tree-spinner {
    margin-top: -50px;
}





/* =============================== */
/* Syncfusion Tab Styling          */
/* =============================== */

/* Disable tab content animations/transitions */
.e-tab .e-content .e-item {
    transition: none !important;
    animation: none !important;
}

.e-tab .e-content {
    transition: none !important;
    animation: none !important;
}

/* Tab color palette - matching menu-sidebar-item faded/muted dark blue for active */
:root {
    --tab-active-bg: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img); /* Faded/muted dark blue matching menu-sidebar-item */
    --tab-active-fg: #ffffff; /* White font for active tab */
    --tab-inactive-bg: #e5e5e5; /* Light grey background for inactive tabs */
    --tab-inactive-fg: #555555; /* Dark grey font for inactive tabs */
    --tab-hover-bg: #d0d0d0; /* Slightly darker grey on hover */
    --tab-border: 1px solid rgba(0,0,0,.08);
}

/* Base header item */
.e-tab .e-tab-header .e-toolbar-item {
    background: var(--tab-inactive-bg); /* Light grey for inactive tabs */
    border-radius: 8px; /* Rounded corners */
    margin: 2px 4px;
    border: var(--tab-border);
}

    /* Inactive tabs - light grey background, dark grey font */
    .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-text,
    .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-icon {
        color: var(--tab-inactive-fg) !important; /* Dark grey font */
    }

    /* Hover state for inactive tabs */
    .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover {
        background: var(--tab-hover-bg) !important; /* Slightly darker grey on hover */
    }

        .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-text,
        .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-icon {
            color: var(--tab-inactive-fg) !important; /* Keep dark grey font on hover */
        }

    /* Active tab - faded/muted dark blue matching menu-sidebar-item, white font, rounded corners */
    .e-tab .e-tab-header .e-toolbar-item.e-active {
        background: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img) !important; /* Faded/muted dark blue matching menu-sidebar-item */
        background-size: cover !important; /* Ensure image covers the tab */
        background-repeat: no-repeat !important;
        background-position: center !important;
        border-radius: 8px !important; /* Rounded corners like inactive tabs */
        border: var(--tab-border); /* Standard border on all sides */
    }

    /* Active tab underline (bottom bar) – match sidebar vertical bar color */
    .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
        border-bottom: 3px solid #10c4ff !important; /* same cyan as sidebar indicator */
    }

    /* Style Syncfusion's built-in indicator to match our cyan active bar color
       so if it still renders, it visually merges with the bottom bar. */
    .e-tab .e-tab-header:not(.e-vertical) .e-indicator,
    .e-tab .e-tab-header.e-vertical .e-indicator {
        background: #10c4ff !important; /* same cyan as sidebar/tab underline */
        border-radius: 0 !important;
        height: 3px !important;
    }

        .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
        .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
            color: var(--tab-active-fg) !important; /* White font for active tab */
            font-weight: 600;
        }

/* Content header text inside panes (optional) */
.e-tab .e-content .e-item {
    color: var(--tab-hover-fg);
    font-size: 10px;
}

/* If you still want group-specific accents, keep just these: */
#ItemTabsGroup1 .e-tab-header .e-toolbar-item.e-active {
    background: var(--tab-active-bg) !important;
}

#ItemTabsGroup2 .e-tab-header .e-toolbar-item.e-active {
    background: var(--tab-active-bg) !important;
}

#ItemTabsGroup3 .e-tab-header .e-toolbar-item.e-active {
    background: var(--tab-active-bg) !important;
}

/* =============================== */
/* Child Components – Item Sidebar */
/* Used by ManageItems.razor       */
/* =============================== */

:root {
    --child-sidebar-width: 150px; /* open width */
    --child-sidebar-dock: 60px; /* collapsed width */
    --child-border: 1px solid rgba(0,0,0,.10);
}

/* Host */
.item-shell {
    position: relative;
}

    /* Sidebar: fixed width by state; keep above grids, below main nav */
    .item-shell .sidebar-item-menu.e-sidebar {
        box-sizing: border-box;
        left: 0;
        background: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img) !important;
        border-right: var(--child-border);
        z-index: 20;
        transition: none;
    }

        .item-shell .sidebar-item-menu.e-sidebar.e-open {
            width: 150px !important;
            min-width: 150px !important;
            background: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img) !important;
        }

        .item-shell .sidebar-item-menu.e-sidebar.e-close {
            width: 60px !important;
            min-width: 60px !important;
            background: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img) !important;
        }

    /* Push sibling content (requires: sidebar first, then .e-main-content) */
    .item-shell .e-main-content {
        transition: none;
        min-width: 0;
    }

    .item-shell .sidebar-item-menu.e-sidebar.e-open ~ .e-main-content {
        /* Syncfusion's Push sidebar already shifts content by its own width.
           We only want a small visual gap, so cancel any extra margin and use padding instead. */
        margin-left: 0 !important;
        padding-left: 10px !important; /* desired 10px gap between rail and child content */
    }

    .item-shell .sidebar-item-menu.e-sidebar.e-open ~ .e-main-content .component-wrapper,
    .item-shell .sidebar-item-menu.e-sidebar.e-open ~ .e-main-content .e-tab,
    .item-shell .sidebar-item-menu.e-sidebar.e-open ~ .e-main-content .e-tab-header,
    .item-shell .sidebar-item-menu.e-sidebar.e-open ~ .e-main-content .e-tab-content {
        padding-left: 0 !important; /* Remove padding from all nested elements */
        margin-left: 0 !important; /* Remove margin from all nested elements */
    }

    .item-shell .sidebar-item-menu.e-sidebar.e-close ~ .e-main-content {
        /* When docked, also cancel extra margin and keep a consistent 10px gap */
        margin-left: 0 !important;
        padding-left: 10px !important;
    }

    .item-shell .sidebar-item-menu.e-sidebar.e-close ~ .e-main-content .component-wrapper,
    .item-shell .sidebar-item-menu.e-sidebar.e-close ~ .e-main-content .e-tab,
    .item-shell .sidebar-item-menu.e-sidebar.e-close ~ .e-main-content .e-tab-header,
    .item-shell .sidebar-item-menu.e-sidebar.e-close ~ .e-main-content .e-tab-content {
        padding-left: 0 !important; /* Remove padding from all nested elements */
        margin-left: 0 !important; /* Remove margin from all nested elements */
    }

/* Simple vertical nav inside the child sidebar */
.sidebar-item-menu,
.sidebar-item-menu.e-sidebar {
    height: 100%;
    position: relative;
    background: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img) !important;
    border-right: var(--child-border);
    color: var(--bs-sidebar-fg) !important;
}

/* Ensure text and icons are visible on dark background */
.sidebar-item-menu,
.sidebar-item-menu *,
.sidebar-item-menu.e-sidebar,
.sidebar-item-menu.e-sidebar * {
    color: var(--bs-sidebar-fg) !important;
}

    .sidebar-item-menu .sidebar-nav {
        padding: 6px;
    }

        .sidebar-item-menu .sidebar-nav i {
            color: #343a40;
        }

    .sidebar-item-menu .item-list {
        list-style: none;
        margin: 0;
        padding: 4px;
    }

        .sidebar-item-menu .item-list .item-entry {
            list-style: none;
        }

    .sidebar-item-menu .item-entry {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        /* 3px gap between 3px bar (left:8,width:3 => right:11) and icon (starts at 14) */
        padding: 8px 10px 8px 14px;
        border-radius: 10px;
        cursor: pointer;
        margin: 2px 6px;
        color: var(--bs-sidebar-fg) !important;
        background: transparent !important;
        transition: all 0.2s ease;
    }

    /* Base icon and text color - ensure visibility on dark background */
    .sidebar-item-menu .item-entry .item-icon,
    .sidebar-item-menu .item-entry span {
        color: var(--bs-sidebar-fg) !important;
    }

    /* Thin cyan bar indicator (matching main sidebar) */
    .sidebar-item-menu .item-entry::after {
        content: "";
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 66%;
        border-radius: 6px;
        background: transparent;
        pointer-events: none;
        z-index: 1;
    }

    /* Hover state (non-active) */
    .sidebar-item-menu .item-entry:not(.active):not(.is-current):hover::after {
        background: linear-gradient(180deg, #7fe6ff, #13b6ff);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 2px 6px rgba(0, 0, 0, .25);
    }

    .sidebar-item-menu .item-entry:not(.active):not(.is-current):hover {
        background: var(--bs-hover-bg) !important;
    }

    .sidebar-item-menu .item-entry:not(.active):not(.is-current):hover,
    .sidebar-item-menu .item-entry:not(.active):not(.is-current):hover .item-icon {
        color: var(--bs-cadet) !important;
    }

    /* Active state (matching main sidebar) */
    .sidebar-item-menu .item-entry.active::after,
    .sidebar-item-menu .item-entry.is-current::after {
        background: linear-gradient(180deg, #9ff0ff, #10c4ff) !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(0, 0, 0, .28) !important;
    }

    .sidebar-item-menu .item-entry.active,
    .sidebar-item-menu .item-entry.is-current {
        /* Full-width highlight to the right edge of the sidebar, no rounded corners */
        margin: 0;
        border-radius: 0;
        background: var(--bs-active-bg) !important;
    }

    .sidebar-item-menu .item-entry.active,
    .sidebar-item-menu .item-entry.active .item-icon,
    .sidebar-item-menu .item-entry.is-current,
    .sidebar-item-menu .item-entry.is-current .item-icon {
        color: var(--bs-cyan) !important;
        font-weight: 600;
    }

    .sidebar-item-menu .item-icon {
        width: 18px;
        text-align: center;
        color: inherit;
        transition: color 0.2s ease;
    }

    .sidebar-item-menu .item-toggle {
        width: 100%;
        border: 0;
        background: rgba(255, 255, 255, 0.1);
        color: var(--bs-sidebar-fg) !important;
        padding: 6px;
        font-size: .9rem;
        text-align: left;
        transition: background 0.2s ease;
    }

    .sidebar-item-menu .item-toggle:hover {
        background: rgba(255, 255, 255, 0.15);
    }

/* Safety for hosted panel */
.item-shell .flex-grow-1, .item-shell .component-wrapper {
    min-width: 0;
}

/* =============================== */
/* Monaco Editor Styling           */
/* =============================== */
/* Based on BlazorMonaco documentation: https://github.com/serdarciplak/BlazorMonaco */
/* The editor needs explicit height via CSS to be visible */

/* CSV Editor Container */
.csv-editor-container {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.csv-editor-wrapper {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* Monaco Editor Container - must have explicit height */
#csvEditor.monaco-editor-container,
#csvEditor.monaco-editor-container.csv-monaco-editor {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px;
}

/* Monaco Editor itself */
#csvEditor.monaco-editor-container .monaco-editor {
    width: 100% !important;
    height: 100% !important;
}

/* Ensure the editor's internal elements fill the container */
#csvEditor.monaco-editor-container .monaco-editor .monaco-editor-background {
    width: 100% !important;
    height: 100% !important;
}

#csvEditor.monaco-editor-container .monaco-scrollable-element {
    width: 100% !important;
    height: 100% !important;
}