/* 1. 修正主容器頂部間距，避免被 75px 高的 Header 遮擋 */
.schedule-container {
    
    /* 其他保持原樣 */
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding-top: 75px;
    padding-bottom: 80px;
    overflow-x: hidden;
    box-sizing: border-box; 
}

/* 2. 讓視圖控制列（月/清單切換）在捲動時固定在 Header 下方 */
.view-controls {
    position: sticky;
    
    z-index: 100; /* 確保高於月曆內容但低於 Header */
    background: white;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.view-tabs {
    display: flex;
    gap: 10px;
    background: #f7fafc;
    padding: 5px;
    border-radius: 10px;
}

.view-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-tab:hover {
    background: rgba(102, 126, 234, 0.1);
}

.view-tab.active {
    background: #00A39C;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.date-navigator {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: visibility 0.3s;
}

.date-navigator button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f7fafc;
    color: #667eea;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.date-navigator button:hover {
    background: #667eea;
    color: white;
}

.current-date {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    min-width: 150px;
    text-align: center;
}

.today-btn {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.today-btn:hover {
    background: #5a67d8;
    transform: translateY(-1px);
}




/* 月曆視圖 */
.month-view {
    background: white;
    border-radius: 15px;
    padding: 10px;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;           /* 強制寬度 100% */
    table-layout: fixed;    /* 類似 table 的效果，防止內容撐寬 */
}

.month-day-header {
    background: #f8f9fa;
    padding: 15px 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #4a5568;
}

.month-day-header.weekend {
    color: #e53e3e;
}

.month-day {
    background: white;
    min-height: 100px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    border: .1px solid #e2e8f0;
}

.month-day.other-month {
    background: #f8f9fa;
    opacity: 0.6;
    cursor: default;
}

.month-day.today {
    background: #d3dcf5;
}

.month-day.selected {
    border: 3px solid #00A39C;
    /* background: #00A39C !important; */
    /* color: white; */
}

.month-day.selected .month-day-number {
    /* color: white !important; */
    background: transparent !important;
    box-shadow: none !important;
}

/* .month-day.selected .has-event-dot {
    background: white !important;
} */

.month-day-number {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    text-align: center;
    padding: 5px;
    display: block;
}

.month-day.today .month-day-number {
    color: #667eea;
    background: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    margin: 0 auto 8px auto;
}

/* 月曆事件指示點 */
.has-event-dot {
    width: 6px;
    height: 6px;
    background: #4a5568;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    margin-top: 5px;
}

.month-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.month-event {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.2s;
}

.month-event:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.month-event.field {
    background: rgba(72, 187, 120, 0.15);
    color: #22543d;
    border-left: 3px solid #48bb78;
}

.month-event.field_long {
    background: rgba(237, 137, 54, 0.15);
    color: #7c2d12;
    border-left: 3px solid #ed8936;
}

.month-event.course {
    background: rgba(66, 153, 225, 0.15);
    color: #2a4e7c;
    border-left: 3px solid #4299e1;
}

.month-event.group_session {
    background: rgba(237, 100, 166, 0.15);
    color: #702459;
    border-left: 3px solid #ed64a6;
}

.more-events {
    font-size: 11px;
    color: #718096;
    margin-top: 3px;
    cursor: pointer;
}

.more-events:hover {
    color: #667eea;
    text-decoration: underline;
}

/* 每日清單顯示區塊 */
.daily-events-section {
    background: white;
    border-radius: 15px;
    margin-top: 20px;
    padding: 10px;
}

.daily-events-header {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}

/* 週清單視圖 & 清單視圖 */
.week-view, .list-view {
    background: white;
    border-radius: 15px;
    padding: 10px;
}

.list-group { margin-bottom: 30px; }

.list-date-header {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-date-header .badge {
    background: #667eea;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.list-item {
    display: flex;
    gap: 20px;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s;
    cursor: pointer;
    border: 2px solid transparent;
}

.list-item:hover {
    background: #f8f9fa;
    /* transform: translateX(5px); */
}

.list-item-time {
    min-width: 120px;
    font-weight: 600;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-item-content {
    flex: 1;
    padding-left: 20px;
    border-left: 3px solid;
}

.list-item.field .list-item-content { border-color: #48bb78; }
.list-item.field_long  .list-item-content { border-color: #ed8936; }
.list-item.course     .list-item-content { border-color: #4299e1; }
.list-item.group_session   .list-item-content { border-color: #ed64a6; }

.list-item-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 5px;
}

.list-item-details {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #718096;
}

.list-item-detail {
    display: flex;
    align-items: center;
    gap: 5px;
}

.list-item-type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 10px;
}

.list-item-type.field { background: rgba(72,187,120,.15); color:#48bb78; }
.list-item-type.field_long  { background: rgba(237,137,54,.15); color:#ed8936; }
.list-item-type.course     { background: rgba(66,153,225,.15); color:#4299e1; }
.list-item-type.group_session   { background: rgba(237,100,166,.15); color:#ed64a6; } /* ← 修正顏色 */

.list-item-type.vendor   { background: rgba(237,100,166,.15); color:#ed64a6; }
.list-item-type.customer   { background: rgba(237,100,166,.15); color:#ed64a6; }


/* ----------------------------------------------------------- */
/* MODAL 樣式調整為類似 Bootstrap 結構 */
/* ----------------------------------------------------------- */

/* 針對內容區域的修正：確保內容不會被底部導航列遮擋 (假設導航列為 60px) */
.modal-body-custom {
    /* 取消 Bootstrap 預設的 padding，自行控制 */
    padding: 20px 20px; 
    /* 增加底部內邊距，以避開頁面底部的固定導航列 */
    padding-bottom: 80px !important; 
    overflow-y: auto;
}


/* 新增按鈕群組樣式 */
.modal-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 25px;
}

.modal-actions-grid button {
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

/* 響應式調整 */
@media (max-width: 1024px) {.month-day { min-height: 80px; }}
@media (max-width: 768px) {
    .month-day { min-height: 50px; padding: 5px; font-size: 12px; }
    .month-day .month-events { display: none; }
    .view-controls { flex-direction: column; }
    /* .filter-chips { flex-wrap: wrap; } */
    .filter-chips {
        display: flex;
        flex-wrap: wrap; /* 確保會換行，不要一整排往右衝 */
        gap: 8px;
    }
    .month-day-number { margin-bottom: 0; padding: 2px; }
    .month-day.today .month-day-number { width: 24px; height: 24px; margin: 0 auto 5px auto; }
    .list-item { flex-direction: column; gap: 10px; }
    .list-item-time { min-width: auto; }
}
@media (max-width: 480px) {
    .view-controls {
        padding: 10px 5px; /* 減少內距 */
        width: 100%;
        overflow-x: hidden;
    }

    .current-date {
        min-width: 0;       /* 移除最小寬度限制 */
        font-size: 16px;    /* 縮小字體 */
        flex: 1;            /* 讓它自動分配空間 */
    }

    .date-navigator {
        gap: 5px;           /* 縮小間距 */
        width: 100%;
    }
}

/* lg 以上尺寸： 修正為置中顯示 */
@media (min-width: 992px) {
    .modal-dialog.modal-fullscreen-lg-down {
        /* 恢復標準置中行為 */
        position: relative !important; 
        top: auto !important;
        right: auto !important;
        margin: 1.75rem auto !important; /* 恢復 Bootstrap 預設置中邊距 */
        height: auto !important;
        max-width: 550px; 
        
        /* 禁用右側滑入的過渡動畫 */
        transition: none !important; 
        transform: none !important; 
    }
    .modal-dialog.modal-fullscreen-lg-down .modal-content {
        height: auto;
        border-radius: 0.5rem; /* 恢復標準模態框圓角 */
    }
    
    /* 移除右側滑入動畫的樣式覆蓋，讓其使用標準的淡入淡出 */
    .modal.fade:not(.show) .modal-dialog.modal-fullscreen-lg-down {
            /* 恢復 BS 預設或移除 */
            transform: translate(0, -50px) !important; 
    }
    .modal.show .modal-dialog.modal-fullscreen-lg-down {
            /* 恢復 BS 預設或移除 */
            transform: none !important; 
    }
}