/* =============================================================================
   GLOBAL APPLICATION LIST STYLES
   Path: wwwroot/css/app-lists.css

   Contains reusable list behaviors - both container and item styling
   Include this file after Bootstrap to ensure proper override behavior.
   ============================================================================= */

/* =============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   These default values are OVERRIDDEN by ThemeService at runtime
   ThemeService injects these via JavaScript, pulling from BaseTheme properties
   The values below serve as fallbacks only if ThemeService hasn't loaded yet
   ============================================================================= */

:root {
    --app-list-bg-normal: white;
    --app-list-bg-hover: #DEE3EF;
    --app-list-bg-selected: #C5D4E8;
    --app-list-bg-selected-hover: #B8C7DD;
    --app-list-border-selected: #75B2E5;
    --app-list-text-normal: inherit;
    --app-list-text-selected: black;
    --app-list-font-weight-selected: 500;
    --app-list-transition-speed: 0.2s;
    --app-list-row-height: 6px;
    --app-list-padding-left: 18px;
    --app-list-padding-right: 15px;
}

/* Custom height - use inline style to override, e.g.:
   <div style="--app-list-row-height: 10px;"> */

/* =============================================================================
   LIST CONTAINER BEHAVIOR
   Applied to containers that hold .app-list-item children
   Makes the container fill available space and scroll when needed
   Usage: Add "app-list-container" class to your list container div
   ============================================================================= */

.app-list-container {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 5px 0 !important;
}

/* =============================================================================
   GLOBAL LIST ITEM BEHAVIORS
   Applied to any container that uses .app-list-item children
   High specificity selectors to override Bootstrap and other frameworks
   ============================================================================= */

.app-list-item,
div.app-list-item {
    /* Layout & Positioning */
    padding: var(--app-list-row-height) var(--app-list-padding-right) var(--app-list-row-height) var(--app-list-padding-left) !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    /* Visual Appearance */
    background-color: var(--app-list-bg-normal) !important;
    background-image: none !important;
    color: var(--app-list-text-normal) !important;
    border: 1px solid transparent !important;
    /* Reset any conflicting styles */
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    /* Smooth transitions */
    transition: all var(--app-list-transition-speed) ease-in-out !important;
}

    /* HOVER STATES */
    .app-list-item:hover:not(.app-selected),
    div.app-list-item:hover:not(.app-selected) {
        background-color: var(--app-list-bg-hover) !important;
        background-image: none !important;
    }

    /* SELECTED STATES */
    .app-list-item.app-selected,
    div.app-list-item.app-selected {
        background-color: var(--app-list-bg-selected) !important;
        background-image: none !important;
        color: var(--app-list-text-selected) !important;
        border-top: 2px solid var(--app-list-border-selected) !important;
        border-bottom: 2px solid var(--app-list-border-selected) !important;
        border-left: 1px solid transparent !important;
        border-right: 1px solid transparent !important;
        font-weight: var(--app-list-font-weight-selected) !important;
    }

        /* SELECTED HOVER STATES */
        .app-list-item.app-selected:hover,
        div.app-list-item.app-selected:hover {
            background-color: var(--app-list-bg-selected-hover) !important;
            background-image: none !important;
            color: var(--app-list-text-selected) !important;
            border-top: 2px solid var(--app-list-border-selected) !important;
            border-bottom: 2px solid var(--app-list-border-selected) !important;
            border-left: 1px solid transparent !important;
            border-right: 1px solid transparent !important;
            font-weight: var(--app-list-font-weight-selected) !important;
        }

    /* CHILD ELEMENT OVERRIDES */
    .app-list-item .form-check-input,
    div.app-list-item .form-check-input {
        margin-top: 0 !important;
        cursor: pointer !important;
    }

    .app-list-item span,
    div.app-list-item span {
        pointer-events: none; /* Prevents text selection issues */
    }

    /* ACCESSIBILITY ENHANCEMENTS */
    .app-list-item:focus,
    div.app-list-item:focus {
        outline: 2px solid var(--app-list-border-selected) !important;
        outline-offset: 2px !important;
    }

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .app-list-item,
    div.app-list-item {
        padding: calc(var(--app-list-row-height) + 6px) 10px calc(var(--app-list-row-height) + 6px) var(--app-list-padding-left) !important;
    }
}