/* Ana Container */


.main-container {


    display: flex;


    height: 100vh;


    position: relative;


}





/* Kontrol Paneli - sadece sidebar üzerinde */


.control-panel {


    height: 32px;


    background: #f8f9fa;


    border-bottom: 1px solid #ddd;


    display: flex;


    align-items: center;


    padding: 0 8px;


    gap: 6px;


    position: absolute;


    top: 0;


    left: 0;


    width: 320px;


    box-sizing: border-box;


    z-index: 100;


}





.control-panel-title {


    font-weight: 500;


    color: #7f8c8d;


    font-size: 12px;


}





/* Sidebar */


.sidebar-container {


    width: 320px;


    min-width: 250px;


    max-width: 500px;


    background: #fff;


    border-right: 1px solid #e5e5e5;


    display: flex;


    position: relative;


    transition: margin-left 0.3s ease;


    height: 100vh;


}





.sidebar-container.collapsed {


    margin-left: -320px;


}





/* Sidebar Sağ Pozisyon */


.main-container.sidebar-right {


    flex-direction: row-reverse;


}





.main-container.sidebar-right .sidebar-container {


    border-right: none;


    border-left: 1px solid #e5e5e5;


}





.main-container.sidebar-right .sidebar-container.collapsed {


    margin-left: 0;


    margin-right: -320px;


}





.main-container.sidebar-right .control-panel {


    left: auto;


    right: 0;


    width: 320px;


}





.main-container.sidebar-right .resize-handle {


    left: 0;


    right: auto;


}





.sidebar-content {


    flex: 1;


    overflow-y: auto;


    padding: 40px 8px 8px 8px; /* Top padding for control panel */


}





/* Kontrol paneli sadece sidebar için */


.sidebar-container .control-panel {


    width: calc(100% - 1px); /* Border için -1px */


}





/* Resize Handle */


.resize-handle {


    width: 2px;


    background: #ddd;


    cursor: ew-resize;


    position: relative;


    transition: background-color 0.15s;


}





.resize-handle:hover {


    background: #007bff;


}





.resize-handle:active {


    background: #0056b3;


}





/* Ana İçerik */


.main-content {


    flex: 1;


    background: #fff;


    overflow: hidden;


    display: flex;


    flex-direction: column;


}





.main-content.expanded {


    margin-left: 0;


}





/* Takvim Alanı - %80 */


.calendar-area {


    height: 80vh;


    overflow: hidden;


}





/* Alt Tab Panel - %20 */


.bottom-tab-panel {


    height: 20vh;


    background: #f8f9fa;


    border-top: 1px solid #e5e5e5;


    display: flex;


    flex-direction: column;


}





/* Tab Navigation */


.tab-navigation {


    display: flex;


    background: #fff;


    border-bottom: 1px solid #e5e5e5;


    padding: 0;


    align-items: center;


    justify-content: flex-start;


}





.kurum-bilgisi-header {


        margin-left: auto;
    padding: 2px 20px;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    background: #f8f9fa;
    border-left: 1px solid #e5e5e5;
    /* align-items: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;


}





.tab-btn {


    padding: 12px 20px;


    border: none;


    background: #f8f9fa;


    cursor: pointer;


    font-size: 14px;


    font-weight: 500;


    border-right: 1px solid #e5e5e5;


    transition: all 0.2s;


    color: #666;


}





.tab-btn:hover {


    background: #e9ecef;


    color: #333;


}





.tab-btn.active {


    background: #007bff;


    color: white;


}





.tab-btn:last-child {


    border-right: none;


}





/* Tab Content */


.tab-content {


    flex: 1;


  margin-top: 7px; 


    padding: 5px;


   


    overflow-y: auto;


}





.tab-pane {


    display: none;


}





.tab-pane.active {


    display: block;


}





/* Statistics Grid */


.stats-grid {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));


    gap: 15px;


}





.stat-card {


    padding: 15px;


    border-radius: 6px;


    text-align: center;


    color: white;


    min-height: 80px;


    display: flex;


    flex-direction: column;


    justify-content: center;


}





.stat-card.primary { background: #007bff; }


.stat-card.secondary { background: #6c757d; }


.stat-card.success { background: #28a745; }


.stat-card.warning { background: #ffc107; color: #333; }


.stat-card.muted { background: #6c757d; }





.stat-number {


    font-size: 24px;


    font-weight: bold;


    margin-bottom: 5px;


}





.stat-label {


    font-size: 12px;


    opacity: 0.9;


}





/* Operations Grid */


.operations-grid {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));


    gap: 15px;


}





.operation-btn {


    padding: 20px 15px;


    border: 1px solid #e5e5e5;


    background: white;


    border-radius: 6px;


    cursor: pointer;


    transition: all 0.2s;


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 8px;


}





.operation-btn:hover {


    border-color: #007bff;


    background: #f0f8ff;


}





.operation-icon {


    font-size: 24px;


}





.operation-text {


    font-size: 12px;


    font-weight: 500;


    color: #333;


}





/* Reminder List */


.reminder-list {


    display: flex;


    flex-direction: column;


    gap: 10px;


}





.reminder-item {


    display: flex;


    align-items: center;


    padding: 12px;


    background: white;


    border-radius: 6px;


    border: 1px solid #e5e5e5;


    gap: 15px;


}





.reminder-time {


    font-weight: bold;


    color: #007bff;


    min-width: 60px;


}





.reminder-text {


    flex: 1;


    font-size: 14px;


}





.reminder-action {


    padding: 5px 10px;


    border: 1px solid #28a745;


    background: white;


    color: #28a745;


    border-radius: 4px;


    cursor: pointer;


    font-size: 12px;


}





.reminder-action:hover {


    background: #28a745;


    color: white;


}





/* Notification List */


.notification-list {


    display: flex;


    flex-direction: column;


    gap: 10px;


}





.notification-item {


    display: flex;


    align-items: flex-start;


    padding: 12px;


    background: white;


    border-radius: 6px;


    border: 1px solid #e5e5e5;


    gap: 12px;


}





.notification-item.new {


    border-left: 4px solid #007bff;


    background: #f0f8ff;


}





.notification-icon {


    font-size: 18px;


    margin-top: 2px;


}





.notification-content {


    flex: 1;


}





.notification-title {


    font-weight: 600;


    font-size: 14px;


    margin-bottom: 4px;


}





.notification-desc {  


    font-size: 13px;


    color: #666;


    margin-bottom: 4px;


}





.notification-time {


    font-size: 11px;


    color: #999;


}





/* Accordion Styles */


.accordion-item {


    border: 1px solid #e5e5e5;


    border-radius: 6px;


    margin-bottom: 10px;


    overflow: hidden;


    background: #fff;


}





.accordion-header {


    padding: 12px 15px;


    background: #f8f9fa;


    border-bottom: 1px solid #e5e5e5;


    cursor: pointer;


    display: flex;


    justify-content: space-between;


    align-items: center;


    user-select: none;


    transition: background-color 0.2s;


}





.accordion-header:hover {


    background: #e9ecef;


}





.accordion-header.active {


    background: #007bff;


    color: white;


}





.accordion-title {


    font-weight: 600;


    font-size: 14px;


}





.accordion-icon {


    transition: transform 0.3s ease;


    width: 16px;


    height: 16px;


}





.accordion-header.active .accordion-icon {


    transform: rotate(90deg);


}





.accordion-content {


    padding: 0;


    display: none;


    background: #fff;


}





.accordion-content.active {


    display: block;


}





/* Filter Button Group */


.filter-button-group {


    display: flex;


    flex-wrap: wrap;


    gap: 5px;


    margin-top: 5px;


}





.filter-btn {


    padding: 4px 8px;


    border: 1px solid #ddd;


    background: #fff;


    border-radius: 4px;


    cursor: pointer;


    font-size: 12px;


    transition: all 0.2s;


}





.filter-btn:hover {


    background: #f0f0f0;


}





.filter-btn.active {


    background: #007bff;


    color: white;


    border-color: #007bff;


}





/* Student List */


.student-list {


    border: 1px solid #e5e5e5;


    border-radius: 4px;


    background: #fafafa;


    width: 100%;


    box-sizing: border-box;


    overflow-x: hidden;


}





.student-item {


    padding: 8px 12px;


    border-bottom: 1px solid #e5e5e5;


    cursor: grab;


    transition: background-color 0.2s;


    display: flex;


    align-items: center;


    gap: 8px;


    width: 100%;


    box-sizing: border-box;


    overflow: hidden;


}





.student-item:last-child {


    border-bottom: none;


}





.student-item:hover {


    background: #f0f8ff;


}





.student-item:active {


    cursor: grabbing;


}





.student-avatar {


    width: 24px;


    height: 24px;


    background: #007bff;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    color: white;


    font-size: 12px;


    font-weight: bold;


}





.student-info {


    flex: 1;


}





.student-name {


    font-weight: 600;


    font-size: 13px;


    color: #333;


}





.student-details {


    font-size: 11px;


    color: #666;


    margin-top: 2px;


}





/* Calendar Padding Removal */


#calendar {


    height: 100vh;


    padding: 0;


    margin: 0;


}





/* Responsive */


@media (max-width: 768px) {


    .sidebar-container {


        width: 280px;


        min-width: 250px;


    }





    .control-panel {


        padding: 0 10px;


    }





    .accordion-content {


        padding: 10px;


    }


}





/* Scrollbar Styling */


.sidebar-content::-webkit-scrollbar {


    width: 6px;


}





.sidebar-content::-webkit-scrollbar-track {


    background: #f1f1f1;


}





.sidebar-content::-webkit-scrollbar-thumb {


    background: #c1c1c1;


    border-radius: 3px;


}





.sidebar-content::-webkit-scrollbar-thumb:hover {


    background: #a8a8a8;


}



.vertical-groups-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    height: 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    background: #f8fafc;
    border-right: 1px solid transparent;
    transition: width 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    z-index: 1200;
}

.vertical-groups-panel.active {
    border-right-color: #e5e7eb;
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.12);
}


.vertical-groups-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 12px 14px;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

}



.vertical-groups-panel-title {

    font-size: 13px;

    font-weight: 700;

    color: #1f2937;

}



.vertical-groups-panel-subtitle {

    font-size: 11px;

    color: #6b7280;

    margin-top: 2px;

}



.vertical-groups-panel-close {

    border: 1px solid #d1d5db;

    background: #fff;

    color: #374151;

    border-radius: 6px;

    padding: 5px 10px;

    font-size: 11px;

    cursor: pointer;

}



.vertical-groups-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}