/* Help System Styles */

/* Title wrapper */
.title-wrapper {
    position: relative;
}

.title-wrapper h1 {
    flex: 1;
    margin-bottom: 0 !important;
}

/* Help button positioning */
#help-toggle-button {
    flex-shrink: 0;
    margin-left: 1rem;
}

/* Content wrapper for split layout */
.help-content-wrapper {
    display: flex;
    transition: all 0.3s ease;
}

/* Main content area */
.help-main-content {
    flex: 1;
    min-width: 0; /* Prevent overflow */
    overflow: visible; /* Changed from auto to visible to allow dropdowns */
    position: relative;
}

/* Help panel - hidden by default */
.help-panel {
    width: 0;
    overflow: hidden;
    background-color: var(--bs-gray-100);
    border-left: 0;
    transition: width 0.3s ease, border 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 200px); /* Adjust based on header/navbar height */
    position: relative;
    z-index: 10; /* Ensure help panel is above table content */
}

/* When help is open */
.help-content-wrapper.help-open .help-panel {
    width: 350px;
    border-left: 1px solid var(--bs-border-color);
    margin-left: 1rem;
}

/* Help panel header */
.help-panel-header {
    padding: 1rem;
    background-color: var(--bs-white);
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-panel-header h5 {
    margin: 0;
    font-size: 1.1rem;
}

/* Help panel content */
.help-panel-content {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* Important for Firefox */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .help-content-wrapper.help-open .help-panel {
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
    }
    
    .help-content-wrapper.help-open .help-main-content {
        display: none;
    }
}

/* Help content styling */
.help-panel-content h6 {
    color: var(--bs-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.help-panel-content h6:first-child {
    margin-top: 0;
}

.help-panel-content ul {
    padding-left: 1.5rem;
}

.help-panel-content .alert {
    font-size: 0.9rem;
}

/* Active state for help button */
#help-toggle-button.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Ensure DataTables doesn't overflow when help is open */
.help-content-wrapper.help-open .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.help-content-wrapper.help-open table.dataTable {
    table-layout: auto;
}