/* ============================================================================
   GENRE SELECTOR COMPONENT
   ============================================================================
   
   Multi-select checkbox interface for filtering documents by genre.
   Includes select all/clear actions and selected count display.
   
   Features:
   - Checkbox list with genre names
   - Select all / Clear all actions
   - Selected count footer
   - Scrollable list for many genres
   - Hover states
   
   ============================================================================ */

/* ============================================================================
   MAIN CONTAINER
   ============================================================================ */

.genre-selector {
    padding: 15px;
}


/* ============================================================================
   HEADER SECTION
   ============================================================================ */

.genre-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-border);
}

.genre-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
}


/* ============================================================================
   ACTION BUTTONS
   ============================================================================ */

.genre-actions {
    display: flex;
    gap: 8px;
}

.genre-actions button {
    padding: 5px 12px;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition-all);
    font-family: var(--font-primary);
}

.btn-select-all:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-clear:hover:not(:disabled) {
    background: var(--color-danger-light);
    color: var(--color-white);
    border-color: var(--color-danger-light);
}

.btn-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================================================
   GENRE LIST
   ============================================================================ */

.genre-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0;
}

.genre-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-bg);
}

.genre-item:hover {
    background: var(--color-gray-light);
}

.genre-item input[type="checkbox"] {
    margin-inline-end: 0;
    margin-inline-start: 10px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.genre-name {
    flex: 1;
    user-select: none;
    font-family: var(--font-primary);
    color: var(--color-text-primary);
}


/* ============================================================================
   TWO-TIER TREE (علم → فروع)
   ============================================================================ */

.genre-tree-parent,
.genre-tree-parent-row {
    display: flex;
    align-items: center;
}

.genre-tree-parent .genre-item,
.genre-tree-parent-row .genre-checkbox-item {
    flex: 1;
}

.genre-tree-parent .genre-name {
    font-weight: var(--font-weight-semibold);
}

.genre-tree-expander {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    padding: 2px 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.genre-tree-expander:hover {
    color: var(--color-primary);
}

.genre-tree-expander-spacer {
    display: inline-block;
    width: 24px;
    flex-shrink: 0;
}

.genre-tree-children {
    margin-inline-start: 34px;
    border-inline-start: 1px solid var(--color-gray-border);
    padding-inline-start: 4px;
}

.genre-tree-child .genre-name,
.genre-tree-child .genre-label {
    font-size: 0.92em;
}

.genre-implied {
    opacity: 0.55;
}

.genre-unavailable {
    opacity: 0.4;
}

.genre-count {
    color: var(--color-text-secondary);
    font-size: 0.82em;
    margin-inline-start: 8px;
    user-select: none;
}

/* Subgenre suffix in the document table genre badge */
.subgenre-label {
    font-size: 0.88em;
    opacity: 0.75;
}


/* ============================================================================
   FOOTER SECTION
   ============================================================================ */

.genre-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-gray-border);
    text-align: center;
}

.selected-count {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
}


/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */

.genre-list::-webkit-scrollbar {
    width: 8px;
}

.genre-list::-webkit-scrollbar-track {
    background: var(--color-gray-light);
    border-radius: var(--radius-sm);
}

.genre-list::-webkit-scrollbar-thumb {
    background: var(--color-gray-medium);
    border-radius: var(--radius-sm);
}

.genre-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}


/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 480px) {
    .genre-selector {
        padding: 10px;
    }
    
    .genre-list {
        max-height: 250px;
    }
    
    .genre-actions button {
        padding: 4px 10px;
        font-size: 0.8rem;
    }
}