/* Sidebar Improvements CSS */

/* App header styling for collapsible functionality */
.module table {
    width: 100%;
}

.module a:hover,
.module a:focus,
.module a:active  {
    text-decoration: none;
}

#nav-sidebar .current-app .section:link, #nav-sidebar .current-app .section:visited {
    color:rgb(255, 242, 127);
}

.module h2, #content-main .module h2, .app-list .module h2 {
    cursor: pointer;
    position: relative;
    padding-right: 25px !important;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.module h2:hover, #content-main .module h2:hover, .app-list .module h2:hover {
    background-color: #2980b9 !important;
    color: white !important;
}

/* Better visual hierarchy for admin index */
#content-main .module {
    overflow: hidden;
}

/* Arrow indicators are now added via JavaScript */

/* Hide/show model links when collapsed */
.module .model-list, .module table, .module ul {
    transition: opacity 0.3s ease;
}

.module .model-list.collapsed, .module table.collapsed, .module ul.collapsed {
    display: none !important;
}

/* Smooth transitions */
.module .model-list li, .module table tr, .module ul li {
    transition: opacity 0.2s ease;
}

/* Highlight currently active model */
.module .model-list li a.active, .module ul li a.active {
    background-color: #f0f8ff;
    border-left: 3px solid #2980b9;
    font-weight: bold;
}

/* Scroll position indicator and fix positioning */
#nav-sidebar {
    position: relative;
    left: 0 !important;
}

#content-main {
    position: relative;
}

/* Visual feedback for collapsible areas */
.module {
    border-left: 3px solid transparent;
    transition: border-left-color 0.2s ease;
}

.module:hover {
    border-left-color: #2980b9;
}

/* Ensure proper spacing */
.module .model-list {
    margin-bottom: 0;
}

.module .model-list li {
    margin: 0;
}

.module .model-list li a {
    padding: 5px 15px;
    display: block;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.module .model-list li a:hover {
    background-color: #f5f5f5;
    color: #2980b9;
}

/* Better visual hierarchy */
.module h2 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .module h2::after {
        right: 5px;
    }
}

/* Module styling */
.module {
    transition: all 0.3s ease;
}

/* Header styling for clickable headers */
.module h2, .module caption {
    position: relative;
    padding-right: 25px;
    cursor: pointer !important;
    user-select: none;
    transition: background-color 0.2s ease;
}

.module h2:hover, .module caption:hover {
    background-color: rgba(79, 109, 245, 0.1);
}

/* Arrow styling */
.module h2 span, .module caption span {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-size: 12px;
    color: #666;
}

/* Collapsed state styles */
.module h2.collapsed span, .module caption.collapsed span {
    transform: translateY(-50%) rotate(-90deg);
}

/* Ensure tbody can be hidden without affecting table structure */
.module table tbody {
    transition: opacity 0.2s ease;
}

/* When tbody is hidden, keep table header visible */
.module table {
    border-collapse: collapse;
}

.module table thead {
    display: table-header-group !important;
}

/* Improve overall module appearance */
.module {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

/* Keyboard shortcut helper */
body::after {
    content: "Press Ctrl+Shift+S to toggle all modules";
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 9999;
}

body.show-shortcut-help::after {
    opacity: 1;
}


/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* Active page highlighting */
    .module a.active {
        /* background-color: #417690; */
        color: rgb(255, 242, 127);
        /* font-weight: bold; */
    }
}

/* Manual theme overrides */
[data-theme="dark"] .module a.active {
    color: rgb(255, 242, 127);
}

[data-theme="light"] .module a.active {
    /* Override dark mode if light theme is explicitly selected */
    color: initial; /* or specify your light theme color */
}