/* ======================================================= */
/* ===== General Overlay & Modal Structure (FIXED) ===== */
/* ======================================================= */

.overlay { 
    display: none; /* Default state is hidden. JS will change this to flex. */
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,0.5); 
    justify-content: center;
    align-items: center;
    z-index: 9999; 
    padding: 1rem;
}

.modal-content { 
    background-color: var(--bg-surface); 
    border-radius: 12px; 
    box-shadow: 0 10px 50px rgba(0,0,0,0.2); 
    width: 100%; 
    max-width: 1400px; 
    height: 90vh; 
    display: flex; /* CRITICAL FOR LAYOUT */
    flex-direction: column; /* CRITICAL FOR LAYOUT */
    overflow: hidden; /* CRITICAL FOR SCROLLING */
}

.modal-header { 
    padding: 1rem 1.5rem; 
    border-bottom: 1px solid var(--border-color); 
    flex-shrink: 0; /* Prevents header from shrinking */
    text-align: center; 
    position: relative;
}
.modal-header h2 { margin: 0; font-size: 1.5rem; }

.close-modal-btn {
    display: block; position: absolute; left: 1rem; top: 50%;
    transform: translateY(-50%); background: none; border: none;
    font-size: 2.5rem; line-height: 1; color: var(--text-secondary);
    cursor: pointer; padding: 0;
}
.close-modal-btn:hover { color: var(--text-primary); }

/* This is the area that will scroll */
.modal-body { 
    flex-grow: 1; /* CRITICAL: Takes up all available vertical space */
    overflow-y: auto; /* CRITICAL: Enables vertical scrolling ONLY for this element */
    min-height: 0; /* A flexbox trick to make scrolling work correctly */
}

/* ======================================= */
/* ===== UNIFIED Filter Controls ===== */
/* ======================================= */

.controls-container { 
    flex-shrink: 0; /* Prevents filters from shrinking */
    background-color: var(--header-bg); 
    border-bottom: 1px solid var(--border-color); 
    padding: 1.5rem; 
}
.search-input { width: 100%; box-sizing: border-box; padding: 0.75rem 1.25rem; border: 1px solid #ced4da; border-radius: 50px; font-size: 1.1rem; font-family: inherit; }
#collapsible-filters { margin-top: 1.5rem; transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out, padding-top 0.3s ease-in-out; }
.filter-group { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-group label { font-weight: 500; font-size: 0.9rem; }
.filter-group select { padding: 0.6rem; border: 1px solid #ced4da; border-radius: 8px; font-family: inherit; width: 100%; box-sizing: border-box; }
.controls-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.clear-filters-btn { background: none; border: none; color: var(--primary-color); cursor: pointer; font-weight: 500; font-size: 0.9rem; padding: 0; }
#toggle-filters-btn, .apply-filters-btn { display: none; }

/* ================================= */
/* ===== DESKTOP Main Content ===== */
/* ================================= */

.courses-table { width: 100%; min-width: 1200px; border-collapse: collapse; }
.courses-table thead { 
    position: sticky; /* Makes the table header stick to the top of the .modal-body */
    top: 0; 
    z-index: 1; 
    background-color: var(--bg-surface); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
}
.courses-table th { padding: 14px 12px; font-weight: 700; color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; text-align: right; cursor: pointer; white-space: nowrap; }
.courses-table th .sort-indicator { color: #ced4da; display: inline-block; width: 1em; }
.courses-table th.sorted-asc .sort-indicator, .courses-table th.sorted-desc .sort-indicator { color: var(--primary-color); }
.courses-table td { padding: 12px; vertical-align: middle; border-bottom: 1px solid var(--border-color); }
.courses-table th:nth-child(n+4), .courses-table td:nth-child(n+4) { text-align: center; }
tr.course-row:hover { background-color: #f8f9fa; }
tr.added, tr.added:hover { background-color: var(--success-bg-light); }
.course-name-cell .course-code { font-size: 0.85em; color: var(--text-secondary); margin-top: 2px; }

.dist-icon { color: var(--text-secondary); text-decoration: none; display: inline-flex; transition: color 0.2s; }
.dist-icon:hover { color: var(--primary-color); }
.dist-icon svg { width: 22px; height: 22px; fill: currentColor; }

.action-btn { background-color: var(--primary-color); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.2s; }
.action-btn:hover { background-color: #0056b3; }
tr.added .action-btn, .course-card.added .action-btn { background-color: var(--success-color); }
tr.added .action-btn:hover, .course-card.added .action-btn:hover { background-color: #1f7a35; }


/* ==================================== */
/* ===== Sliders and other styles ===== */
/* ==================================== */

.mobile-course-cards { display: none; }
.range-slider-dual-group .range-values { font-weight: 700; color: var(--primary-color); }
.range-slider-dual { position: relative; height: 20px; }
.range-slider-dual input[type=range] { position: absolute; width: 100%; pointer-events: none; -webkit-appearance: none; background: transparent; margin: 0; }
.range-slider-dual input[type=range]::-webkit-slider-thumb { pointer-events: all; width: 16px; height: 16px; border-radius: 50%; background: var(--primary-color); cursor: pointer; -webkit-appearance: none; }
.slider-track { position: absolute; width: 100%; height: 4px; background-color: #ddd; top: 50%; transform: translateY(-50%); border-radius: 2px; }
.slider-range { position: absolute; height: 4px; background-color: var(--primary-color); top: 50%; transform: translateY(-50%); border-radius: 2px; }
.core-tag-display { font-size: 0.85em; font-weight: 500; color: var(--text-primary); border-radius: 4px; display: inline-block; }
.stat-item .value .core-tag-display { font-size: 1em; }


/* ======================================================= */
/* ===== Media Queries for Responsive Layout ===== */
/* ======================================================= */

@media (max-width: 992px) {
    .overlay { padding: 0; align-items: stretch; }
    .modal-content { height: 100%; border-radius: 0; }
    .controls-container { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.5rem; }
    .search-group { flex-grow: 1; }
    #toggle-filters-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid #ced4da; background-color: var(--bg-surface); border-radius: 8px; cursor: pointer; }
    #toggle-filters-btn svg { width: 24px; height: 24px; fill: var(--text-primary); }
    #collapsible-filters.collapsed { max-height: 0 !important; padding-top: 0 !important; margin-top: 0 !important; overflow: hidden; }
    #collapsible-filters { width: 100%; }
    .controls-grid { grid-template-columns: 1fr 1fr; margin-top: 0; gap: 1.5rem; }
    .apply-filters-btn { display: block; width: 100%; padding: 12px; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer;}
    
    /* Hide desktop table, show mobile cards */
    .courses-table { display: none; }
    .mobile-course-cards { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
    
    .course-card { display: flex; flex-direction: column; border-radius: 10px; background-color: var(--bg-surface); box-shadow: 0 4px 15px rgba(0,0,0,0.06); border: 1px solid var(--border-color); border-right-width: 4px; }
    .course-card.mandatory { border-right-color: var(--side-color-mandatory); }
    .course-card.choice { border-right-color: var(--side-color-choice); }
    .course-card.lab { border-right-color: var(--side-color-lab); }
    .course-card.spirit { border-right-color: var(--side-color-spirit); }
    .course-card.added { background-color: var(--success-bg-light); }
    .card-header { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
    .card-header .course-info { flex-grow: 1; }
    .course-info .name { font-weight: 700; font-size: 17px; color: var(--text-primary); }
    .course-info .code { font-size: 14px; color: var(--text-secondary); display: block; margin-top: 2px; }
    .card-header .action-btn { padding: 6px 12px; font-size: 0.9rem; }
    .card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .category-badge { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: 16px; border: 1px solid; align-self: flex-start; }
    .category-badge.mandatory { background-color: var(--cat-mandatory-bg); color: var(--side-color-mandatory); border-color: var(--side-color-mandatory); }
    .category-badge.choice { background-color: var(--cat-choice-bg); color: var(--side-color-choice); border-color: var(--side-color-choice); }
    .category-badge.lab { background-color: var(--cat-lab-bg); color: var(--side-color-lab); border-color: var(--side-color-lab); }
    .category-badge.spirit { background-color: var(--cat-spirit-bg); color: var(--side-color-spirit); border-color: var(--side-color-spirit); }
    .card-prereq { font-size: 13px; color: var(--text-secondary); text-align: right; }
    .card-prereq strong { font-weight: 500; color: var(--text-primary); }
    .card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--border-color); }
    .stat-item { text-align: center; }
    .stat-item .label { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 2px; }
    .stat-item .value { font-weight: 700; color: var(--text-primary); font-size: 1rem; }
    .value-with-icon { display: flex; align-items: center; justify-content: center; gap: 6px; }
}

@media (min-width: 993px) {
    .controls-grid { display: flex; flex-wrap: nowrap; align-items: end; gap: 1.5rem; }
    .filter-group { flex-shrink: 0; }
    .options-group .checkbox-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 0;
        align-items: flex-start;
    }
    .range-slider-dual-group, .range-slider-group {
        flex: 1 1 20%;
        min-width: 180px;
    }
}

/* ======================================= */
/* ===== Desktop Table Column Widths (v2) ===== */
/* ======================================= */

@media (min-width: 993px) {
    /* שינויים עיקריים: 
       1. נתנו לעמודת "קדם" רוחב משמעותי באחוזים כדי למנוע גלישה.
       2. הקטנו מעט את הרוחב של "קטגוריה".
       3. וידאנו שהעמודות הראשיות ("שם הקורס" ו"קדם") הן גמישות,
          והשאר ברוחב קבוע ומינימלי.
    */

    /* הגדרת ברירת מחדל לטבלה כדי שהחישובים יעבדו טוב יותר */
    .courses-table {
        table-layout: fixed;
    }

    /* עמודת שם הקורס - רחבה וראשית */
    .courses-table th:nth-child(1),
    .courses-table td:nth-child(1) {
        width: 35%; /* תופסת חלק גדול וגמיש */
    }

    /* קטגוריה - הקטנו את הרוחב הקבוע */
    .courses-table th:nth-child(2),
    .courses-table td:nth-child(2) {
        width: 100px; 
    }

    /* קדם - הגדרנו רוחב גמיש באחוזים כדי למנוע גלישת טקסט */
    .courses-table th:nth-child(3),
    .courses-table td:nth-child(3) {
        width: 20%; 
    }

    /* עמודות מספריות קטנות */
    .courses-table th:nth-child(4), /* נק"ז */
    .courses-table td:nth-child(4),
    .courses-table th:nth-child(5), /* ש"ס */
    .courses-table td:nth-child(5),
    .courses-table th:nth-child(8), /* ליבה */
    .courses-table td:nth-child(8) {
        width: 65px;
    }
    
    /* עמודות טקסט/מספר קצרות */
    .courses-table th:nth-child(6), /* סמסטר */
    .courses-table td:nth-child(6),
    .courses-table th:nth-child(7), /* ממוצע */
    .courses-table td:nth-child(7),
    .courses-table th:nth-child(9) { /* אנגלית */
        width: 80px;
    }

    /* עמודות פעולה */
    .courses-table th:nth-child(10), /* התפלגות */
    .courses-table td:nth-child(10),
    .courses-table th:nth-child(11) { /* הוספה */
        width: 95px;
    }
}