/* ================================================== */
/* ★★★ RWD v2.0 - PART 1/3: 基礎與通用元件 ★★★ */
/* ================================================== */

/* --- 1. 全站通用變數與響應式基礎設定 --- */
:root {
    --main-bg: #f5f8fa;
    --panel-bg: #ffffff;
    --border-color: #e6ecf0;
    --text-color: #333;
    --brand-color: #3498db;
    --edit-color: #2ecc71;
    --delete-color: #e74c3c;
    --folder-color: #f1c40f; 
    --success-bg: #e8f5e9;
    --success-border: #4caf50;
    --error-bg: #ffebee;
    --error-border: #f44336;
    --info-bg: #e3f2fd;
    --info-border: #2196f3;
}

/* ★ RWD 核心：設定基礎字體大小為 16px，作為 1rem 的基準 */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Arial, sans-serif; 
    background-color: var(--main-bg); 
    color: var(--text-color); 
    margin: 0; 
    font-size: 1rem; /* 預設字體大小為 1rem (16px) */
    line-height: 1.6; /* 增加行高以提高可讀性 */
    font-display: swap;
}

*, *:before, *:after { 
    box-sizing: border-box; 
}

/* ★ RWD 核心：使用 clamp() 實現標題的流體縮放 */
h1, h2, h3, h4 { 
    color: #2c3e50; 
    margin: 0;
    line-height: 1.3;
}
h1 { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }   /* 在 28px 到 40px 之間平滑縮放 */
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }   /* 在 20px 到 28px 之間平滑縮放 */
h3 { font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.25rem); } /* 在 17.6px 到 20px 之間平滑縮放 */
h4 { font-size: 1.1rem; }

a { color: var(--brand-color); text-decoration: none; }
a:hover { text-decoration: underline; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.full-width { width: 100%; }


/* --- 2. 通用元件 (按鈕、表單、卡片等) --- */
/* 全部使用 rem 單位 */

.button, button { 
    background-color: var(--brand-color); 
    color: white; 
    padding: 0.6rem 1.2rem; 
    text-decoration: none; 
    border: none; 
    border-radius: 0.25rem; /* 4px */
    cursor: pointer; 
    transition: background-color 0.2s, transform 0.2s; 
    font-weight: 600; 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5em; 
    justify-content: center;
    font-size: 0.9rem; /* 14.4px */
}
.button:hover, button:hover { opacity: 0.9; transform: translateY(-1px); }
.button-primary { background-color: var(--edit-color); }
.button.delete { background-color: var(--delete-color); }
.button-logout { background-color: var(--delete-color); }

input[type=text], input[type=password] { 
    width: 100%; 
    padding: 0.75rem; /* 12px */
    border: 1px solid #ccc; 
    border-radius: 0.25rem; /* 4px */
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #fff;
    color: var(--text-color);
}

.form-group { margin-bottom: 1.5rem; /* 24px */ }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; /* 8px */ }

.message-box { 
    padding: 1rem; 
    margin-bottom: 1.5rem; 
    border: 1px solid; 
    border-radius: 0.3125rem; /* 5px */ 
    font-weight: 500; 
}
.message-box.success { background-color: var(--success-bg); border-color: var(--success-border); color: #2e7d32; }
.message-box.error { background-color: var(--error-bg); border-color: var(--error-border); color: #c62828; }
.message-box.info { background-color: var(--info-bg); border-color: var(--info-border); color: #1565c0; }


/* --- 3. 首頁 (index.php) 樣式 --- */
.header-content { 
    text-align: center; 
    padding: 3rem 1rem 2rem; 
}
.header-content h1 { 
    margin-bottom: 1rem; 
}

.search-container { 
    max-width: 31.25rem; /* 500px */
    margin: 0 auto; 
    position: relative;
}
#search-box { 
    width: 100%; 
    padding: 1rem 2.5rem 1rem 1.5rem;
    border: 1px solid var(--border-color); 
    border-radius: 3.125rem; /* 50px */
    font-size: 1rem; 
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05); /* 2px 8px */
    transition: all 0.2s ease;
}

.clear-search {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #aaa;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    display: none;
}
.clear-search:hover { color: #333; }
.search-container.has-text .clear-search { display: block; }

.tag-container { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 0.75rem; 
    margin-top: 1.5rem; 
    padding: 0 1rem;
}
.tag-button { 
    background-color: #e9ecef; 
    color: #495057; 
    border: none; 
    padding: 0.4rem 1rem; 
    border-radius: 1.25rem; /* 20px */
    font-size: 0.9em; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}
.tag-button:hover { background-color: #ced4da; transform: translateY(-1px); }

.card-container { 
    display: grid; 
    /* ★ RWD 核心：使用 auto-fill 和 minmax 實現完美的網格佈局 */
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); /* 300px */
    gap: 1.5rem; 
    width: 90%; 
    max-width: 87.5rem; /* 1400px */
    margin: 2rem auto;
    padding-bottom: 3rem;
}

.card-link { text-decoration: none; }
.card { 
    background: var(--panel-bg); 
    padding: 1.5rem 2rem; 
    border-radius: 0.75rem; /* 12px */
    border: 1px solid var(--border-color); 
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}
.card:hover { 
    transform: translateY(-0.3125rem); /* -5px */
    box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.08); /* 10px 20px */
}
.card h2 { 
    color: var(--text-color); 
    margin-bottom: 0; 
    flex-grow: 1; 
}
.page-status { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5em; 
    font-size: 0.9em; 
    margin-top: 1rem; 
    padding: 0.25em 0.75em; 
    border-radius: 0.9375rem; /* 15px */
    font-weight: 500; 
    align-self: flex-start; 
}
.page-status.public { background-color: var(--success-bg); color: #2e7d32; }
.page-status.private { background-color: #fff3e0; color: #ef6c00; }

/* ========================================================= */
/* ★★★ RWD v2.0 - PART 2/3: 主要佈局與頁面區塊 ★★★ */
/* ========================================================= */

/* --- 4. 登入頁 & 影片密碼頁 --- */
.login-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    padding: 1rem; 
    background: linear-gradient(135deg, #eaf2f8, #fdfefe); 
}
.login-box { 
    background: var(--panel-bg); 
    padding: clamp(1.5rem, 5vw, 2.5rem); /* 在 24px 到 40px 間縮放 padding */
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.1); /* 10px 30px */
    width: 100%; 
    max-width: 25rem; /* 400px */
    text-align: center; 
}
.login-box h3 { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.75rem; 
    margin-bottom: 1.5rem; 
}
.login-form .form-group { 
    margin-bottom: 1.5rem; 
}
.login-form input[type=password] { 
    text-align: center; 
    font-size: 1.1rem; 
}


/* --- 5. 影片播放頁 (view.php) --- */
.view-container { 
    display: flex; 
    height: 100vh; /* 在桌面端使用 100vh 是安全的 */
    background: #000; 
}

.main-content { 
    /* ★ 修正1：使用 flex: 1; 這是更穩定且現代的寫法，表示佔據所有剩餘空間 */
    flex: 1; 
    display: flex; 
    align-items: center; /* 垂直置中播放器 */
    justify-content: center; /* 水平置中播放器 */
    background: #000; 
    min-width: 0; /* ★ 修正2：保留這個關鍵 hack，防止內容溢出撑開佈局 */
}

/* ★ 修正3：讓 Plyr 的容器自適應 main-content 的大小 */
#main-player { 
    width: 100%; 
    height: auto; /* 高度自動，由寬度決定 */
    max-height: 100vh; /* 最大高度不超過視窗 */
    aspect-ratio: 16 / 9; /* 強制16:9比例，避免黑邊 */
    object-fit: contain;
}

.sidebar { 
    background: #fdfdfd; 
    /* ★ 修正4：直接給定固定寬度，並防止其被壓縮 */
    width: 350px;
    flex-shrink: 0; 
    border-left: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column;
    overflow-y: auto; /* 當列表過長時可滾動 */
}

/* 播放列表和列表項目的樣式保持不變 */
.playlist-container { background-color: var(--brand-color); }
.playlist-container > summary { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; color: #fff; cursor: pointer; list-style: none; }
.playlist-container > summary::-webkit-details-marker { display: none; }
.playlist-container > summary .fa-chevron-down { transition: transform 0.2s ease-in-out; }
.playlist-container[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.sidebar .page-title { font-size: 1.25rem; font-weight: 600; margin: 0; background: none; flex-grow: 1; }
.playlist { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; background-color: #fff; }
.playlist-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background-color .2s, color .2s; color: #333; }
.playlist-item:hover { background-color: #f0f8ff; }
.playlist-item.active { background-color: #e3f2fd; color: #1565c0; font-weight: bold; box-shadow: inset 4px 0 0 var(--brand-color); }
.playlist-item i { color: #aaa; transition: color .2s; }
.playlist-item.active i, .playlist-item:hover i { color: inherit; }

/* --- 全新的 RWD 斷點 --- */
/* 平板 (max-width: 1024px) - 縮小側邊欄 */
@media (max-width: 1024px) {
    .sidebar { width: 300px; }
    .playlist-item { padding: 0.8rem 1.2rem; font-size: 0.9rem; }
}

/* 手機 (max-width: 768px) - 上下堆疊 */
@media (max-width: 768px) {
    .view-container {
        flex-direction: column; /* 垂直堆疊 */
        height: 100dvh; /* 使用動態高度，適應手機瀏覽器 UI */
    }
    .main-content {
        /* 高度由內容 (影片) 決定，且不被壓縮 */
        flex-shrink: 0;
    }
    #main-player {
        width: 100vw; /* 寬度佔滿螢幕 */
    }
    .sidebar {
        width: 100%; /* 寬度佔滿 */
        border-left: none;
        border-top: 1px solid var(--border-color);
        /* 佔據所有剩餘的垂直空間 */
        flex: 1; 
        min-height: 0; /* 允許 sidebar 在內容溢出時正確地滾動 */
    }
    .playlist-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

/* --- 6. 後台管理頁面 (admin.php) --- */
.admin-top-bar { 
    background: #34495e; 
    color: white; 
    padding: 1rem clamp(1rem, 4vw, 2rem); /* 讓 padding 也能響應式 */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.admin-nav-wrapper { 
    background-color: #fff; 
    border-bottom: 1px solid var(--border-color); 
    padding: 0 clamp(1rem, 4vw, 2rem); 
}
.admin-nav { 
    display: flex; 
    gap: 1rem; 
    overflow-x: auto; /* 在小螢幕上如果導航項目太多，可以滾動 */
}
.admin-nav a { 
    padding: 1rem 1.5rem; 
    font-size: 1.05rem; 
    font-weight: 600; 
    color: #566573; 
    border-bottom: 3px solid transparent; 
    transition: all 0.2s ease-in-out; 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    white-space: nowrap; /* 防止文字換行 */
}
.admin-nav a:hover { color: var(--brand-color); }
.admin-nav a.active { color: var(--brand-color); border-bottom-color: var(--brand-color); }

.admin-container { 
    display: flex; 
    flex-wrap: nowrap; /* 預設不換行 */
    gap: 2rem; 
    align-items: flex-start; 
    padding: clamp(1rem, 4vw, 2rem); 
}
/* --- ★ RWD Final: 調整左右面板寬度 --- */
.left-panel { 
    flex: 1 1 60%; /* 基礎佔 60%，但可以伸縮 */
    min-width: 0; 
}
.right-panel { 
    flex: 1 1 40%; /* 基礎佔 40%，但可以伸縮 */
    min-width: 0; 
    position: sticky; 
    top: 2rem; 
    /* ★ 關鍵：給右側面板一個最小寬度，確保能容納兩張卡片 */
    min-width: 42rem; /* 大約是 320px * 2 + 間距 */
}

.form-section, .list-section { 
    background-color: var(--panel-bg); 
    padding: clamp(1.5rem, 4vw, 2rem); 
    border: 1px solid var(--border-color); 
    border-radius: 0.5rem; /* 8px */ 
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05); /* 4px 12px */
}
.form-section h4, .collapsible-section h3 {
    font-weight: 600; 
    margin-bottom: 0.5rem; 
    border-top: 1px solid var(--border-color); 
    padding-top: 1.5rem; 
    margin-top: 1.5rem; 
}

.form-actions { 
    margin-top: 2rem; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 1rem; 
    flex-wrap: wrap; /* 允許換行 */
}
.actions-left-group, .actions-right-group { 
    display: flex; 
    gap: 1rem; 
    align-items: center;
    flex-wrap: wrap; /* 允許換行 */
}

.full-panel { 
    width: 100%; 
    max-width: 56.25rem; /* 900px */
    margin: 0 auto; 
}
.full-panel .form-group small { 
    display: block; 
    margin-top: 0.5rem; 
    color: #6c757d; 
}

/* --- ★★★ RWD v2.0: 整合式頂部導覽列樣式 ★★★ --- */
.admin-header {
    background: #fff;
    color: #333;
    padding: 0 1.5rem; /* 上下0，左右padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 4rem; /* 64px */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 1px solid var(--border-color);
}

.header-left {
    display: flex;
    align-items: center;
}

.admin-nav {
    display: flex;
}

.admin-nav a {
    padding: 0 1rem;
    font-size: 0.95rem; /* 稍微縮小字體 */
    font-weight: 500; /* 不用太粗 */
    color: #566573;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 4rem; /* 與 header 高度一致，創造完整的點擊區域 */
}
.admin-nav a:hover {
    background-color: #f8f9fa;
    color: var(--brand-color);
}
.admin-nav a.active {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.welcome-message {
    font-size: 0.9rem;
    color: #6c757d;
}

.header-right .button-logout {
    background-color: transparent;
    color: var(--delete-color);
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
}
.header-right .button-logout:hover {
    background-color: var(--error-bg);
    border-color: var(--error-border);
}

/* ★★★ RWD v2.0: 導覽列的響應式調整 ★★★ */
@media (max-width: 992px) {
    .welcome-message {
        display: none; /* 在平板上隱藏歡迎訊息，節省空間 */
    }
}

@media (max-width: 768px) {
    .admin-header {
        padding: 0 0.5rem;
        gap: 0.5rem;
    }
    .admin-nav a {
        padding: 0 0.75rem;
    }
    .admin-nav a span, .header-right .button-logout span {
        /* 在手機上，隱藏導覽的文字，只留圖示 */
        display: none;
    }
    .header-right {
        gap: 0.5rem;
    }
     .header-right .button-logout {
        border: none; /* 手機上移除登出按鈕的邊框，更簡潔 */
        background-color: transparent;
    }
}

/* ========================================================= */
/* ★★★ RWD v2.0 - PART 3/3: 細節元件與響應式斷點 ★★★ */
/* ========================================================= */

/* --- 7. 後台細節元件 --- */

/* 可收納區塊 */
.collapsible-section { padding: 0; }
.collapsible-section > details > summary { 
    padding: 1.5rem 2rem;
    font-weight: 600; 
    color: #2c3e50; 
    cursor: pointer; 
    list-style: none; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
}
.collapsible-section > details > summary::-webkit-details-marker { display: none; }
.collapsible-section > details > summary .fa-chevron-down { transition: transform 0.2s ease-in-out; font-size: 0.8em; color: #8492a6; }
.collapsible-section > details[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.collapsible-section .collapsible-content { padding: 0 2rem 2rem 2rem; }
.collapsible-section > details > summary h3 { margin: 0; font-size: 1.25rem; font-weight: inherit; color: inherit; display: flex; align-items: center; gap: 0.75rem; border: none; padding: 0; }
.collapsible-section > details[open] > summary { border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; }
.collapsible-section > details[open] > .collapsible-content { padding-top: 1.5rem; }

/* 標籤管理 */
.existing-tags-list { margin-top: 1.5rem; }
.existing-tags-list .list-title { margin-top: 0; margin-bottom: 1rem; font-size: 1.1em; color: #333; }
.existing-tags-list ul { list-style: none; padding: 0; margin: 0; }
.existing-tags-list li { display: flex; justify-content: space-between; align-items: center; background-color: #f8f9fa; padding: 0.5rem 1rem; border-radius: 0.25rem; margin-bottom: 0.5rem; }
.button-icon-delete { background: none; border: none; color: var(--delete-color); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0.2rem 0.5rem; border-radius: 50%; transition: background-color 0.2s; }
.button-icon-delete:hover { background-color: #fbe9e7; color: #bf360c; }
.settings-form-container { display: flex; gap: 0.625rem; align-items: center; margin-top: 0.5rem; }
.settings-form-container input { flex-grow: 1; }
.settings-form-container .button { padding: 0.75rem; white-space: nowrap; font-size: 0.9em; }

/* 建議標籤 */
.suggested-tags-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.suggested-tag-btn { background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; padding: 0.3rem 0.8rem; border-radius: 1.25rem; font-size: 0.9em; cursor: pointer; transition: all 0.2s ease; }
.suggested-tag-btn:hover { background-color: var(--brand-color); color: white; border-color: var(--brand-color); transform: translateY(-1px); }

/* 密碼產生器 */
.label-with-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem; }
.label-with-actions label { margin-bottom: 0; }
.password-generator { display: flex; gap: 0.3125rem; }
.button.button-small { padding: 0.375rem 0.625rem; font-size: 0.85em; font-weight: 500; background-color: #6c757d; color: white; }
.button.button-small:hover { background-color: #5a6268; opacity: 1; }

/* 檔案總管 */
.file-explorer { border: 1px solid #ddd; border-radius: 0.5rem; padding: 1rem; background: #fafafa; }
.file-explorer .explorer-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid #e0e0e0; margin-bottom: 1rem; color: #555; }
.file-explorer .explorer-header span { font-weight: 500;}
.explorer-section { margin-bottom: 1.5rem; border-top: 1px solid #e0e0e0; padding-top: 1rem; }
.explorer-section:first-child { border-top: none; padding-top: 0; }
.explorer-section h4 { margin-bottom: 0.75rem; font-size: 1rem; color: #555; font-weight: 600; border: none; margin: 0; padding: 0; }
.folder-grid, .video-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); /* 150px */ }

.grid-item { align-items: center; background: #fff; border: 2px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color); cursor: pointer; display: flex; gap: 0.5rem; padding: 0.8rem; position: relative; text-decoration: none; transition: all .2s ease-in-out; word-break: break-all; }
.grid-item:hover { border-color: #bdc3c7; box-shadow: 0 4px 6px rgba(0,0,0,.05); transform: translateY(-2px); }
.grid-item i { font-size: 1.2rem; flex-shrink: 0; }
.grid-item.folder i { color: var(--folder-color); }
.grid-item.video i { color: #529fca; }
.grid-item.video input[type=checkbox] { display: none; }
.grid-item.video.selected { background-color: #e9f5ff; border-color: var(--brand-color); }
.grid-item.video.selected::after { color: var(--brand-color); content:'✓'; font-size: 1.2rem; font-weight: 700; position: absolute; right: 0.5rem; top: 0.3125rem; }
.grid-item.video label { width: 100%; height: 100%; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }


/* --- 8. 右側列表與 Modal --- */

/* 已建立頁面列表 */
.list-section .list-header { align-items: center; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.list-section .list-header h3 { align-items: center; display: flex; gap: 0.75rem; margin: 0; }
.search-wrapper { position: relative; }
.search-wrapper .fa-search { color: #aaa; left: 0.75rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); }
#page-search-input { border: 1px solid #ccc; border-radius: 1.25rem; padding: 0.5rem 0.75rem 0.5rem 2.2rem; transition: all 0.2s ease-in-out; width: 12.5rem; }
#page-search-input:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); width: 100%; }

/* ★★★ RWD Final v2: 明確指定為兩欄佈局 ★★★ */
.page-list-grid { 
    background: #fdfdfd; 
    border-top: 1px solid var(--border-color); 
    display: grid; 
    gap: 1rem; 
    /* 核心修改：明確指定為 2 個等寬的欄位 */
    grid-template-columns: 1fr 1fr; 
    list-style: none; 
    margin: 0; 
    max-height: 48rem; 
    overflow-y: auto; 
    padding: 1rem 0.5rem; 
}
.page-list-grid .page-list-item-single { grid-column: 1 / -1; padding: 2rem; text-align: center; }
.page-list-grid .page-list-item { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 0.375rem; display: flex; flex-direction: column; justify-content: space-between; line-height: 1.4; padding: 0.8rem 1rem; transition: box-shadow 0.2s, border-color 0.2s; }
.page-list-grid .page-list-item:hover { border-color: var(--brand-color); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); }
.page-list-grid .page-info { flex-grow: 1; }
.page-list-grid .page-title a { color: #333; }
.page-list-grid .page-title a:hover { color: var(--brand-color); }
.page-list-grid .page-meta { color: #777; display: flex; flex-wrap: wrap; font-size: 0.8em; gap: 0.75rem; margin: 0.25rem 0; }
.page-list-grid .page-meta .password-set { color: #c23f3f; font-weight: 500; }
.page-list-grid .tags-display { border-top: 1px dashed #eee; margin-top: 0.5rem; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.page-list-grid .tags-display span { background-color: #f1f3f5; color: #495057; padding: 2px 8px; border-radius: 0.625rem; font-size: 0.85em; line-height:1.4; }
.page-list-grid .page-actions { border-top: 1px solid #eee; display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.75rem; padding-top: 0.75rem; }
/* ========================================================= */
/* ★★★ RWD Final v6: 強制統一下層按鈕高度 ★★★ */
/* ========================================================= */

.page-list-grid .page-actions {
    /* 確保容器本身是對齊的 */
    align-items: center;
}

/* ★ 核心：選中 .page-actions 裡所有的 a 和 button 元素 */
.page-list-grid .page-actions a,
.page-list-grid .page-actions button {
    /* --- 統一樣式 --- */
    font-size: 0.8rem; 
    font-weight: 500;
    border-radius: 0.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s;

    /* ★★★ 強制尺寸統一 ★★★ */
    height: 1.875rem; /* 設定一個明確的高度 (30px) */
    padding: 0 0.7rem;  /* 移除上下 padding，只留左右 padding */
    box-sizing: border-box; /* 確保 padding 和 border 被包含在高度計算內 */
    border: 1px solid transparent; 
}

/* --- 為不同按鈕上色 --- */
.page-list-grid .page-actions .button-icon-review { 
    background-color: #eaf2ff; color: #2a6ed8; 
}
.page-list-grid .page-actions .button-icon-review:hover { 
    background-color: #d3e4ff; 
}

.page-list-grid .page-actions .button-icon-edit { 
    background-color: #e8f5e9; color: #2e7d32; 
}
.page-list-grid .page-actions .button-icon-edit:hover { 
    background-color: #dcedc8; 
}

.page-list-grid .page-actions .button-icon-delete { 
    background-color: #fce8e6; color: #d93025; 
}
.page-list-grid .page-actions .button-icon-delete:hover { 
    background-color: #f8d7d4; 
}

/* --- 移除 form 的邊距，以防萬一 --- */
.page-list-grid .page-actions form {
    margin: 0;
}


.page-meta .js-copy-password { cursor: pointer; border-bottom: 1px dotted var(--brand-color); transition: all 0.2s; padding: 0 0.125rem; border-radius: 2px; }
.page-meta .js-copy-password:hover { background-color: #e9f5ff; color: var(--brand-color); }
.page-meta .js-copy-password.copied { color: var(--edit-color); font-weight: bold; border-bottom-color: var(--edit-color); background-color: var(--success-bg); }


/* Modal 懸浮視窗 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 1rem; }
.modal-content { background-color: #fff; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 100%; max-width: 37.5rem; display: flex; flex-direction: column; max-height: 85vh; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 1rem; margin-bottom: 1rem; }
.modal-close-btn { background: none; border: none; font-size: 2rem; font-weight: 300; color: #999; cursor: pointer; line-height: 1; padding: 0; }
.modal-close-btn:hover { color: #000; }
.modal-body { overflow-y: auto; flex-grow: 1; padding-right: 0.5rem; }
.modal-body p { font-size: 0.9em; color: #666; margin-top: 0; margin-bottom: 1rem; }
.modal-footer { border-top: 1px solid #eee; padding-top: 1rem; margin-top: 1.5rem; text-align: right; }
.modal-footer .button { margin-left: 0.625rem; }
.modal-video-list { list-style: none; padding: 0; margin: 0; }
.modal-video-list li { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem; border-bottom: 1px solid #f0f0f0; }
.modal-video-list li:last-child { border-bottom: none; }
.modal-video-list .video-name { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; word-break: break-all; padding-right: 1rem; }
.modal-video-list .delete-video-btn { background-color: #fce8e6; color: #d93025; border: 1px solid #f8d7d4; font-size: 0.8em; padding: 0.25rem 0.5rem; flex-shrink: 0; }
.modal-content.saving { opacity: 0.7; pointer-events: none; }
.modal-message-box { padding: 1rem; margin-bottom: 1rem; border-radius: 0.3125rem; font-weight: 500; text-align: center; display: none; }
.modal-message-box.success { background-color: var(--success-bg); color: #2e7d32; border: 1px solid var(--success-border); }
.modal-message-box.error { background-color: var(--error-bg); color: #c62828; border: 1px solid var(--error-border); }


/* ===================================== */
/* ★★★ 9. 最終響應式斷點規則 ★★★     */
/* ===================================== */

/* --- 平板電腦與較窄的桌面 (max-width: 1200px) --- */
/* --- ★ RWD Final: 優化平板斷點 --- */
@media (max-width: 1200px) {
    .admin-container {
        flex-direction: column; /* ★ 直接改為垂直堆疊，更可靠 */
    }
    .left-panel, .right-panel {
        width: 100%; /* 確保它們都佔滿寬度 */
        min-width: auto; /* 重置最小寬度 */
    }
    .right-panel {
        position: static; 
        top: auto;
    }
    /* .page-list-grid 的規則在這裡可以移除，讓它繼承桌面版的 auto-fill 即可 */
}

/* --- 平板電腦直向 (max-width: 992px) --- */
@media (max-width: 992px) {

    /* --- 規則一：當螢幕為「橫向」(Landscape) 時 --- */
    @media (orientation: landscape) {
        .view-container { 
            flex-direction: row; /* 水平排列 */
            height: 100vh;
            height: -webkit-fill-available;
        }

        .main-content { 
            flex: 2 1 0%; /* 影片區佔 2 份寬度 */
            min-width: 0; 
        }

        .sidebar { 
            flex: 1 1 0%; /* 列表區佔 1 份寬度 */
            width: auto;
            max-width: none;
            border-left: 1px solid var(--border-color); /* 左邊框線 */
            height: 100%;
            max-height: 100vh;
        }

        #main-player { 
            height: 100%;
            width: 100%;
            max-height: none;
        }
    }

    /* --- 規則二：當螢幕為「直向」(Portrait) 時 --- */
    @media (orientation: portrait) {
        .view-container { 
            flex-direction: column; /* 垂直堆疊 */
            height: 100vh;
            height: -webkit-fill-available;
        }

        .main-content { 
            flex: 2 1 0%; /* 影片區佔 2 份高度 */
            min-height: 0; /* 垂直方向的 overflow hack */
        }

        .sidebar { 
            flex: 1 1 0%; /* 列表區佔 1 份高度 */
            width: 100%; /* 寬度佔滿 */
            max-width: none;
            border-top: 1px solid var(--border-color); /* ★ 改為上邊框線 */
            border-left: none; /* 移除左邊框線 */
            overflow-y: auto; /* 確保列表內容多時可以滾動 */
        }

        #main-player { 
            height: 100%;
            width: 100%;
            max-height: none;
        }
    }

    /* (為兩種方向共用的微調樣式) */
    .playlist-container > summary {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    .playlist-item {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        gap: 0.5rem;
    }
    
    /* (其他與此頁面無關的規則) */
    .card-container { 
        width: 95%; 
    }
    .page-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }
}

/* --- 手機等小型裝置 (max-width: 768px) --- */
@media (max-width: 768px) {
    /* 稍微縮小基礎字體，讓內容更舒適 */
    html {
        font-size: 15px;
    }

    body { padding: 0; }

    .admin-top-bar, .admin-container, .admin-nav-wrapper { 
        padding: 1rem; 
    }
    .form-section, .list-section, .login-box { 
        padding: 1.5rem; 
    }
    
    .form-actions, .actions-left-group, .actions-right-group { 
        flex-direction: column; 
        align-items: stretch; /* 讓按鈕等寬 */
        width: 100%;
        gap: 0.75rem; 
    }

    .folder-grid, .video-grid {
        /* 手機上改為兩欄 */
        grid-template-columns: repeat(2, 1fr);
    }

    .page-list-grid {
        /* 手機上強制單欄顯示 */
        grid-template-columns: 1fr;
    }

    .card-container {
        width: 100%;
        padding: 0 1rem;
        margin: 1rem auto;
    }
     /* ★★★ 手機橫向的播放列表優化 ★★★ */
    .playlist-item {
        padding: 0.6rem 0.8rem; /* 進一步縮小內距 */
        font-size: 0.9rem; /* 再次縮小字體 */
        gap: 0.5rem; /* 再次調整間距 */
    }
    .playlist-item i {
        /* 在更小的螢幕上可以考慮隱藏圖示，只保留文字 */
        /* display: none; */ 
        font-size: 1rem; /* 保持圖示大小不變或略微縮小 */
    }
    
    /* 讓側邊欄標題在小螢幕上更緊湊 */
    .sidebar .page-title {
        padding: 1rem 1.5rem; /* 縮小標題內距 */
        font-size: 1.1rem; /* 稍微縮小標題字體 */
    }
}
/* ========================================================= */
/* ★★★ RWD Final v5: 終極修正刪除按鈕對齊問題 ★★★ */
/* ========================================================= */

.page-list-grid .page-actions form {
    /* 
     * 核心修正：display: contents;
     * 這個屬性會讓 <form> 元素本身從視覺佈局中「消失」，
     * 但它內部的 <button> 元素會被「提升」一層，
     * 成為 .page-actions (flex 容器) 的直接子項目。
     * 這樣，所有的按鈕就能在同一個 flex 上下文中進行對齊，
     * 徹底解決高度不一致的問題。
    */
    display: contents; 
}
/* ========================================================= */
/* ★★★ RWD Final v7: 影片預覽 Modal 樣式 ★★★ */
/* ========================================================= */

/* ========================================================= */
/* ★★★ RWD Final v8: 影片預覽 Modal 完美縮放版 ★★★ */
/* ========================================================= */

/* 1. 設定「畫框」(.video-preview-content) 的尺寸 */
.video-preview-content {
    /* 讓畫框可以更大，最多佔據螢幕寬高 90% */
    width: 90vw; 
    height: 90vh;
    /* 但也設定一個最大尺寸，避免在超大螢幕上過度拉伸 */
    max-width: 1600px;
    max-height: 900px;
    padding: 1rem; /* 稍微減少一點 padding */
}

/* 2. 讓「畫框」的身體部分填滿所有可用空間 */
.video-preview-body {
    padding: 0;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* 關鍵：讓 body 填滿 header 之外的所有垂直空間 */
    min-height: 0; /* flexbox hack，確保內容能正確縮小 */
}

/* 3. 讓「照片」(#video-player) 自動填滿它的容器 */
#video-player {
    /* ★ 核心修正：移除所有固定的尺寸限制 */
    /* 讓影片自由縮放，直到碰到容器的邊界為止 */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* 4. 檢閱課程列表中的預覽按鈕樣式 (保持不變) */
.modal-video-list .video-name.js-preview-video {
    background: none;
    border: none;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    text-align: left;
    padding: 0;
    cursor: pointer;
    word-break: break-all;
}
.modal-video-list .video-name.js-preview-video:hover {
    color: var(--brand-color);
    text-decoration: underline;
}