/* ─────────────────────────────────────────────────────────────────────────────
 * Sidebar — layout & positioning
 * ───────────────────────────────────────────────────────────────────────────── */

/* Custom properties for sidebar theming — override these on :root or #sidebar
   to change the look without hunting through the file */
:root {
    --sidebar-bg: rgba(0, 0, 0, 1);
    --sidebar-width: 250px;
    --sidebar-border-color: rgba(255, 255, 255, 0.2);
    --sidebar-item-padding: 12px 16px;
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-item-active-bg: rgba(255, 255, 255, 0.1);
    --sidebar-item-active-border: #4fc3f7;
    --sidebar-text-color: rgba(255, 255, 255, 0.85);
    --sidebar-text-muted: rgba(255, 255, 255, 0.55);
    --sidebar-icon-size: 16px;
    --sidebar-transition-speed: 0.25s;
    --sidebar-children-transition: 0.3s ease;
    --sidebar-subitem-indent: 40px;
}

#sidebar {
    position: fixed;
    top: 50px;
    left: calc(var(--sidebar-width) * -1);
    width: var(--sidebar-width);
    height: calc(100vh - 50px);
    background-color: var(--sidebar-bg);
    transition: left 0.3s ease;
    z-index: 99;
    overflow-y: auto;
}

#sidebar.active {
    left: 0;
    border-right: 1px solid var(--sidebar-border-color);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Sidebar nav container — holds all rendered items
 * ───────────────────────────────────────────────────────────────────────────── */
#sidebar nav {
    padding-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .sidebar-item — top-level navigation entry (Dashboard, Automation header, etc.)
 *
 * Layout: icon | label | arrow (arrow hidden for non-collapsible items)
 * ───────────────────────────────────────────────────────────────────────────── */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--sidebar-item-padding);
    color: var(--sidebar-text-color);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--sidebar-transition-speed) ease,
                border-left-color var(--sidebar-transition-speed) ease;
    border-left: 3px solid transparent;
    position: relative;
}

/* Hover — subtle background highlight */
.sidebar-item:hover {
    background-color: var(--sidebar-item-hover-bg);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .sidebar-item.active — currently selected top-level item
 *
 * Left border accent + background highlight to indicate active view.
 * ───────────────────────────────────────────────────────────────────────────── */
.sidebar-item.active {
    background-color: var(--sidebar-item-active-bg);
    border-left-color: var(--sidebar-item-active-border);
    color: #ffffff;
}

/* Icon sizing inside sidebar items */
.sidebar-item .fas {
    width: var(--sidebar-icon-size);
    text-align: center;
    font-size: var(--sidebar-icon-size);
    flex-shrink: 0;
}

/* Label takes remaining space */
.sidebar-item .sidebar-item-label {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .sidebar-item-arrow — chevron icon for collapsible categories
 *
 * Rotates 180° when the category is expanded (via JS-added modifier class).
 * ───────────────────────────────────────────────────────────────────────────── */
.sidebar-item-arrow {
    font-size: 12px;
    color: var(--sidebar-text-muted);
    transition: transform var(--sidebar-transition-speed) ease;
    margin-left: auto;
}

/* Rotated state — category is expanded */
.sidebar-item-arrow--expanded {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .sidebar-children — collapsible container for category child links
 *
 * Uses max-height + overflow:hidden for CSS-driven slide animation.
 * JS sets max-height to 0 (collapsed) or scrollHeight (expanded).
 * ───────────────────────────────────────────────────────────────────────────── */
.sidebar-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--sidebar-children-transition);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .sidebar-subitem — child link inside a collapsible category
 *
 * Indented further than top-level items to visually nest under the parent.
 * ───────────────────────────────────────────────────────────────────────────── */
.sidebar-subitem {
    display: flex;
    align-items: center;
    padding: 10px 16px 10px var(--sidebar-subitem-indent);
    color: var(--sidebar-text-color);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--sidebar-transition-speed) ease,
                border-left-color var(--sidebar-transition-speed) ease;
    border-left: 3px solid transparent;
    font-size: 13px;
}

/* Hover state for subitems */
.sidebar-subitem:hover {
    background-color: var(--sidebar-item-hover-bg);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .sidebar-subitem.active — currently selected child link
 *
 * Same visual treatment as the top-level active: left border + background.
 * ───────────────────────────────────────────────────────────────────────────── */
.sidebar-subitem.active {
    background-color: var(--sidebar-item-active-bg);
    border-left-color: var(--sidebar-item-active-border);
    color: #ffffff;
}

/* Subitem label */
.sidebar-subitem .sidebar-subitem-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Mobile adjustments
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar-item {
        padding: 14px 16px;
    }

    .sidebar-subitem {
        padding: 12px 16px 12px var(--sidebar-subitem-indent);
    }
}