/* ================================
   1. Layout: 頂部導覽列 + 主體
   ================================ */
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #343a40; /* 深色背景 */
    color: white;
    padding: 10px;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
}

    .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

main {
    /*flex-grow: 1;*/
   /* overflow: auto;*/
    padding: 20px;
}

/* ================================
   2. 全域工具類別
   ================================ */
.hidden {
    display: none;
}

.toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-right: 5px;
}

/* ================================
   3. 未分組容器 (左側)
   ================================ */
.unGrouped-box,
.ungrouped-container {
  /*  width: 220px;*/
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 400px;
    background-color: #f0f0f0;
    padding: 10px;
    margin-right: 15px;
}

    .unGrouped-box h4,
    .ungrouped-container h4 {
        margin-bottom: 10px;
        width: auto;
        max-width: 400px; /* 或可不設 */
        overflow-y: auto; /* 如果高度過高，可以捲動 */
    }

/* ================================
   4. 群組容器 (右側)
   ================================ */
.groups-container {
    display: flex;
    flex-wrap: wrap; /* 允許換行 */
    gap: 15px; /* 每個 group 之間的間距 */
    padding: 10px;
    justify-content: flex-start; /* 讓 group 從左到右排列 */
    flex: 1; /* 讓右側自動填滿空間 */
   
    height: 100%; /* 父容器要有明確高度 */
}

.group-box {
    width: 200px;
    margin: 0 10px 10px 0; /* 右和下方加 10px 的間距 */
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    position: relative; /* 為了後續若要顯示 tooltip 或拖曳高亮等 */
}

.group-header {
      position: relative; 
      display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 5px;
 
}


.students-container {
    display: flex;
    flex-direction: column;
    /*gap: 5px;*/
}

/* 拖曳時的高亮顯示 */
.drag-over {
    border: 2px dashed #007bff;
}


/* ================================
   5. 單個學生 (student-item)
   ================================ */
/*.student-item {
    background-color: #d1ecf1;*/ /* 預設顏色 */
    /*padding: 5px;
    border-radius: 3px;
    cursor: grab;
    margin-bottom: 5px;
}*/

    /* 若學生是未分組 (GroupId=0)，用另一種顏色 (淡黃色) */
    /*.student-item.unGrouped {
        background-color: #ffc107 !important;
    }*/

    /* 如果已分組，也可維持 lightblue 或你想要的顏色 */
    /*.student-item.grouped {*/
    /*    background-color: lightblue !important;*/
        /*background-color: #d1ecf1 !important;
        
    }

.student-item-unGrouped {
    background-color:orange !important;
    padding: 5px;
    border-radius: 3px;
    cursor: grab;
    margin-bottom: 5px;
}*/

.hidden {
    display: none;
}

.toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-right: 5px;
}


.d-flex.align-items-start {
    align-items: flex-start; /* 確保頂端對齊 */
}

/****************************
    Bootstrap 內建的 btn-close 已經設計得很現代，若要進一步客製化可以用 CSS 調整尺寸或顏色
*****************************/
.btn-close {
    filter: invert(1); /* 將預設深色圖示變為白色 */
    opacity: 0.8;
    transition: opacity 0.2s;
}

    .btn-close:hover {
        opacity: 1;
    }

.btn-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
     background-color: black;  /*#dc3545; 紅色背景*/ 
 
  border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-circle:hover {
         background-color: #c82333;
   
    }
/* 讓按鈕在父容器 (position: relative) 內絕對定位 */
.remove-group-btn {
    position: absolute;
    top: 0;
    right: 0;
    /* 讓按鈕稍微突出邊框，可自行調整 translate 數值 */
    transform: translate(50%, -10%);
}

/*===============================*/
.calendar-container {
    flex: 1; /* 若在 flex 佈局中，讓它自動擴展 */
    display: flex; /* 內部也可 flex */
    flex-direction: column;
    height: 100%; /* 父容器要有明確高度 */
}

#calendar {
    flex: 1; /* 在子容器中繼續填滿 */
    width: 100%;
    height: 100%;
}
/* 修正時間輸入框寬度過大 */
.time-input {
    width: 90px;
}


.create-students-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;   
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
    text-align: center;
}

    .create-students-link:hover {
        background-color: #0056b3;  
        text-decoration: none;
        transform: scale(1.05);
    }

    .create-students-link:active {
        background-color: #00408d;
        transform: scale(0.98);
    }

.vertical-line {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: black;
    margin: 0 5px;
}

/* for Unavaliaable Block========================*/
.custom-lightblue {
   /* background-color: lightblue;*/
    background-color: #d1ecf1;
}
.disabled-item {
    pointer-events: none;
    opacity: 0.5;
}
/*==================================
✔️ MudStep Title Bar 永遠顯示在最上面
✔️ Next / Previous 按鈕固定在上方
✔️ 每個步驟的內容可以捲動，但標題與按鈕不會隱藏*/


/*.stepper-container {
    position: relative;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
*/
.sticky-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
    padding-bottom: 10px;
}

.sticky-buttons {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

/*.step-content {
    flex-grow: 1;
    overflow-y: auto;
}*/

.full-screen-card {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 左側學生清單滾動 */
.student-list {
    max-height: 500px; /* 設定最大高度 */
    overflow-y: auto; /* 啟用滾動 */
    min-width: 300px;
    flex: 1;
}

/* 右側學生詳細設定固定在畫面上 */
.student-detail {
    position: sticky;
    top: 20px; /* 固定在距離頂部 20px */
    min-width: 350px;
    max-width: 400px;
}


/* ✅ 拖曳進行中動畫（閃爍邊框） */
@keyframes borderPulse {
0% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0.3);
}

50% {
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
}

100% {
    box-shadow: 0 0 0 rgba(76, 175, 80, 0.3);
}

}

.mud-border-success {
    border: 3px solid #4caf50 !important;
    border-radius: 6px;
    animation: borderPulse 1s infinite;
}

.mud-border-error {
    border: 3px solid #e53935 !important;
    border-radius: 6px;
}

.dropzone-hover:hover {
    background-color: #f0f0f0;
    cursor: grab;
}


@media print {
    body * {
        visibility: hidden;
    }

    #calendar-area, #calendar-area * {
        visibility: visible;
    }

    #calendar-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .mud-button, nav, header, footer {
        display: none !important;
    }
}



/* 套用到要閃爍的元素 */
.blink {
    animation: blink 5s linear infinite;
}


.my-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-error);
    color: white;
    border-radius: 999px;
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    flex-shrink: 0;
    font-weight: bold;
}

.badge-row {
    display: flex;
    align-items: center;
    margin-left: 3px; /* ✔ 整行右縮排 */
}

.badge-indent {
    margin-left: 0.5rem;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }
}

.blink {
    /* 使用引號呼叫動畫名稱 */
    animation: blink 5s linear infinite;
}

#components-reconnect-modal {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

    #components-reconnect-modal.components-reconnect-show {
        display: flex;
    }

.reconnect-ui {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-retry {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}