/* CSS變數定義 */
:root {
  --primary-blue: #3498db;
  --primary-blue-light: #5dade2;
  --primary-blue-dark: #2980b9;
  --success: #27ae60;
  --success-light: #2ecc71;
  --success-dark: #229954;
  --danger: #e74c3c;
  --danger-light: #ec7063;
  --danger-dark: #c0392b;
  --warning: #f39c12;
  --warning-light: #f5b041;
  --warning-dark: #d68910;
  --info: #17a2b8;
  --info-light: #1abc9c;
  --info-dark: #138496;
  --secondary: #95a5a6;
  --secondary-light: #b2babb;
  --secondary-dark: #7f8c8d;
  --bg-dark-1: #2c3e50;
  --bg-dark-2: #34495e;
  --bg-dark-3: #4f6f8f;
  --text-light: #ecf0f1;
  --text-muted: #95a5a6;
  --text-muted-dark: #7f8c8d;
  --text-white: #fff;
  --text-gray: #999;
  --bg-alpha-dark-50: rgba(52, 73, 94, 0.5);
  --bg-alpha-dark-80: rgba(52, 73, 94, 0.8);
  --bg-alpha-dark2-30: rgba(44, 62, 80, 0.3);
  --bg-alpha-dark2-50: rgba(44, 62, 80, 0.5);
  --bg-alpha-dark2-80: rgba(44, 62, 80, 0.8);
  --bg-alpha-dark2-90: rgba(52, 73, 94, 0.9);
  --bg-alpha-blue-10: rgba(52, 152, 219, 0.1);
  --bg-alpha-blue-20: rgba(52, 152, 219, 0.2);
  --bg-alpha-blue-30: rgba(52, 152, 219, 0.3);
  --bg-alpha-blue-40: rgba(52, 152, 219, 0.4);
  --bg-alpha-blue2-30: rgba(41, 128, 185, 0.3);
  --bg-alpha-white-10: rgba(255, 255, 255, 0.1);
  --bg-alpha-light-10: rgba(236, 240, 241, 0.1);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-blue-20: rgba(52, 152, 219, 0.2);
  --border-blue-25: rgba(52, 152, 219, 0.25);
  --border-blue-30: rgba(52, 152, 219, 0.3);
  --border-blue-50: rgba(52, 152, 219, 0.5);
  --border-green-50: rgba(39, 174, 96, 0.5);
  --shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-text-lg: 2px 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-card: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.05);
  --shadow-btn: 3px 3px 8px rgba(0, 0, 0, 0.3), -2px -2px 6px rgba(255, 255, 255, 0.05);
  --shadow-btn-hover: 5px 5px 12px rgba(0, 0, 0, 0.4), -3px -3px 8px rgba(255, 255, 255, 0.08);
  --shadow-btn-active: 2px 2px 5px rgba(0, 0, 0, 0.3) inset;
  --shadow-sm: 2px 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-md: 2px 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-input: 0 0 10px rgba(52, 152, 219, 0.5);
  --shadow-cover: 0 5px 15px rgba(52, 152, 219, 0.5);
  --shadow-hover: 0 3px 10px rgba(52, 152, 219, 0.5);
  --shadow-item: 0 4px 10px rgba(52, 152, 219, 0.4);
  --shadow-drag: 0 8px 20px rgba(52, 152, 219, 0.6);
  --shadow-table: 0 2px 8px rgba(52, 152, 219, 0.3);
  --shadow-overlay: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-dialog: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-dialog-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
  --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-blue: linear-gradient(180deg, #bfc9ec 0%, #569ce2 100%);
  --gradient-dark: linear-gradient(135deg, #555 0%, #333 100%);
  --gradient-tab: linear-gradient(180deg, #34495e 0%, #2c3e50 100%);
  --gradient-card: linear-gradient(145deg, #34495e 0%, #2c3e50 100%);
  --gradient-thead: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
  --gradient-modal-header: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
}

/* 基礎樣式 */
.dnone{display:none !important;}
body{background:var(--gradient-purple);font-family:'Microsoft JhengHei','Arial',sans-serif;min-height:100vh;padding-bottom:100px;}
h1{color:var(--text-white);text-shadow:var(--shadow-text-lg);font-weight:700;letter-spacing:2px;}

/* 標籤頁 */
.tab-content>.tab-pane{display:none;}
.tab-content>.tab-pane.active{display:block !important;}
.tab-content{background:var(--gradient-blue);border-radius:0 0 8px 8px;border:none;padding:10px;}
.nav-tabs .nav-link{cursor:pointer;color:var(--text-light);background:var(--bg-dark-3);border:none;border-radius:8px 8px 0 0;margin:0 5px;transition:all 0.3s;}
.nav-tabs .nav-link:hover{background:var(--bg-alpha-white-10);color:var(--text-white);}
.nav-tabs .nav-link.active{background:var(--gradient-tab);color:var(--primary-blue);border-bottom:3px solid var(--primary-blue);box-shadow:inset 0 -2px 5px rgba(0,0,0,0.2);}

/* 卡片 */
.card{background:var(--gradient-card);box-shadow:var(--shadow-card);border-radius:12px;border:1px solid var(--border-light);color:var(--text-light);}
.card-body{padding:1.5rem;}
.card-title{color:var(--primary-blue);font-weight:700;text-shadow:var(--shadow-text);font-size:1.3rem;margin-bottom:1rem;}

/* 表格 */
.table{margin-bottom:0;color:var(--text-light);}
.table thead th{background:var(--gradient-thead);border-bottom:2px solid var(--primary-blue);font-weight:600;position:sticky;top:0;z-index:10;color:var(--primary-blue);text-shadow:var(--shadow-text);}
.table tbody tr {
    background: transparent;
    transition: all 0.3s ease;
}
.table tbody tr:hover {
    background: var(--bg-alpha-blue-20);
    transform: translateY(-1px);
}
.table tbody tr:last-child{border-bottom:none;}
.table tbody td{background-color: rgba(255, 255, 255, 0);border-color:var(--border-light);vertical-align:middle;border-bottom:1px solid var(--border-blue-25);box-shadow:0 1px 0 rgba(0,0,0,0.1);color:var(--text-white);}

/* 排序 */
.sortable{cursor:pointer;user-select:none;transition:all 0.3s;}
.sortable:hover{background:var(--bg-alpha-blue-20);color:var(--text-white);}
.sortable.active{background:var(--bg-alpha-blue-30);color:var(--primary-blue);}
.sortable i{font-size:0.8em;margin-left:4px;}

/* 封面圖片 */
.cover-img{width:50px;height:50px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s;border:2px solid var(--border-blue-30);}
.cover-img:hover{transform:scale(1.2) rotate(5deg);box-shadow:var(--shadow-cover);}
.cover-placeholder{background:var(--gradient-dark);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-gray);}
.cover-preview{width:100%;max-width:200px;min-height:200px;border:2px dashed var(--border-blue-50);border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg-alpha-dark2-30);}
.cover-preview img{max-width:100%;max-height:200px;border-radius:8px;}
.cover-preview.empty::before{content:'無封面';color:var(--secondary-dark);font-size:14px;}

/* 按鈕基礎 */
.btn{border-radius:8px;font-weight:600;transition:all 0.3s;text-shadow:var(--shadow-text);border:none;box-shadow:var(--shadow-btn);}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-btn-hover);}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-btn-active);}
.btn-sm{padding:0.25rem 0.5rem;font-size:0.875rem;}
.btn-group .btn{margin:0;}

/* 按鈕顏色 */
.btn-primary{background:linear-gradient(145deg,var(--primary-blue),var(--primary-blue-dark));color:var(--text-white);}
.btn-primary:hover{background:linear-gradient(145deg,var(--primary-blue-light),var(--primary-blue));}
.btn-success{background:linear-gradient(145deg,var(--success),var(--success-dark));color:var(--text-white);}
.btn-success:hover{background:linear-gradient(145deg,var(--success-light),var(--success));}
.btn-danger{background:linear-gradient(145deg,var(--danger),var(--danger-dark));color:var(--text-white);}
.btn-danger:hover{background:linear-gradient(145deg,var(--danger-light),var(--danger));}
.btn-warning{background:linear-gradient(145deg,var(--warning),var(--warning-dark));color:var(--text-white);}
.btn-warning:hover{background:linear-gradient(145deg,var(--warning-light),var(--warning));}
.btn-info{background:linear-gradient(145deg,var(--info),var(--info-dark));color:var(--text-white);}
.btn-info:hover{background:linear-gradient(145deg,var(--info-light),var(--info));}
.btn-secondary{background:linear-gradient(145deg,var(--secondary),var(--secondary-dark));color:var(--text-white);}
.btn-secondary:hover{background:linear-gradient(145deg,var(--secondary-light),var(--secondary));}

/* 操作區域 */
.operation-buttons{display:flex;align-items:flex-start;justify-content:center;padding-top:150px;}

/* 播放清單 */
.playlist-songs{border:2px solid var(--border-blue-30);border-radius:8px;padding:8px;background:var(--bg-alpha-dark2-50);}
.playlist-song-item{padding:10px;margin-bottom:6px;background:linear-gradient(145deg,var(--bg-alpha-dark-80),var(--bg-alpha-dark2-80));border-radius:8px;display:flex;justify-content:space-between;align-items:center;cursor:move;transition:all 0.3s;border:1px solid var(--border-blue-20);box-shadow:var(--shadow-sm);}
.playlist-song-item:hover{background:linear-gradient(145deg,var(--bg-alpha-blue-30),var(--bg-alpha-blue2-30));transform:translateX(5px);box-shadow:var(--shadow-item);}
.playlist-song-item.dragging{opacity:0.6;transform:scale(1.05);box-shadow:var(--shadow-drag);}
.playlist-song-item.drag-over{border-top:3px solid var(--primary-blue);}
.playlist-song-info{flex:1;}
.playlist-song-title{font-weight:600;color:var(--text-light);font-size:14px;}
.playlist-song-artist {
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
}
.playlist-song-comment{font-size:0.8em;color:var(--text-muted);word-break:break-all;}

/* 強制註解換行 */
.playlist-song-artist .playlist-song-comment {
    flex-basis: 100%;
    margin-top: 3px;
}
.playlist-limit-note{color:#6bf58c;font-weight:bold;}
.remove-song-btn{cursor:pointer;color:var(--danger);padding:5px 10px;transition:all 0.3s;border-radius:5px;}
.remove-song-btn:hover{color:var(--text-white);background:var(--danger);transform:scale(1.2);}

/* 操作按鈕 */
.action-btn{cursor:pointer;margin:0 4px;padding:6px 10px;border-radius:6px;transition:all 0.3s;display:inline-block;}
.action-btn:hover{transform:scale(1.15);}
.edit-btn{color:var(--primary-blue);background:var(--bg-alpha-blue-10);}
.edit-btn:hover{background:var(--bg-alpha-blue-30);box-shadow:var(--shadow-hover);}

/* 模態框 */
.modal-content{border-radius:12px;background:var(--gradient-card);border:1px solid var(--border-blue-30);color:var(--text-light);}
.modal-header{background:var(--gradient-modal-header);border-bottom:2px solid var(--primary-blue);border-radius:12px 12px 0 0;}
.modal-title{color:var(--primary-blue);font-weight:700;text-shadow:var(--shadow-text);}
.btn-close{filter:invert(1);}

/* 表單元素 */
#searchInput::placeholder{color:var(--text-white);opacity:0.7;}
.input-group-text{background-color:var(--bg-alpha-dark2-80);border:1px solid var(--border-blue-30);color:var(--primary-blue);}
.form-control,.form-select{background:var(--bg-alpha-dark2-80);border:1px solid var(--border-blue-30);color:var(--text-light) !important;border-radius:6px;transition:all 0.3s;}
.form-control:focus,.form-select:focus{background:var(--bg-alpha-dark2-90);border-color:var(--primary-blue);box-shadow:var(--shadow-input);color:var(--text-white);}
/* --- Global Placeholder Color for Dark Theme --- */
.form-control::placeholder { color: var(--text-muted) !important; opacity: 0.7 !important; }
.form-label{color:var(--primary-blue);font-weight:600;}
.input-group{box-shadow:var(--shadow-md);}

/* 徽章 */
.badge{font-weight:600;padding:6px 12px;border-radius:6px;box-shadow:var(--shadow-sm);}
.bg-info{background:linear-gradient(145deg,var(--info),var(--info-dark)) !important;}
.bg-secondary{background:linear-gradient(145deg,var(--secondary),var(--secondary-dark)) !important;}
.bg-light{background:var(--bg-alpha-light-10) !important;}


/* 面板切換 */
#playlistSelector{min-width:90px ;}
#playlistPanel.col-md-1{transition:all 0.3s ease;overflow:hidden;}
#playlistPanel.col-md-5{transition:all 0.3s ease;}
#musicLibraryPanel{transition:all 0.3s ease;}

/* 播放歌單面板頂部 */
.playlist-header{display:flex;flex-direction:column;}
.playlist-header .expand-toggle-hint{font-size:12px;color:var(--text-muted);font-weight:500;}
.playlist-header .form-select{background:var(--bg-alpha-dark2-80);border:1px solid var(--border-blue-30);color:var(--text-light);}
.playlist-header .btn{background:var(--bg-alpha-blue-20);border:1px solid var(--border-blue-30);}

/* 響應式 */
@media (max-width:768px){.table-responsive{font-size:0.875rem;}
.cover-img{width:40px;height:40px;}
.btn-lg{font-size:1rem;padding:0.5rem 1rem;}}

/* 載入動畫 */
.loading{text-align:center;padding:20px;color:var(--primary-blue);}
.loading::after{content:'載入中...';animation:dots 1.5s infinite;}
@keyframes dots{0%,20%{content:'載入中.';}40%{content:'載入中..';}60%,100%{content:'載入中...';}}

/* 提示文字 */
.drag-hint{color:var(--secondary-dark);font-size:12px;text-align:center;padding:8px;font-style:italic;}
.expand-toggle-hint{color:white;}
#musicCount{color:var(--primary-blue);font-weight:700;font-size:0.9em;}
input[type="checkbox"]{cursor:pointer;accent-color:var(--primary-blue);}

/* 空狀態 */
.empty-state{text-align:center;padding:40px;color:var(--secondary-dark);}
.empty-state i{font-size:48px;margin-bottom:16px;display:block;color:var(--text-muted);}

/* 警告訊息 */
.alert-message{position:fixed;top:20px;right:20px;z-index:9999;min-width:300px;max-width:500px;box-shadow:var(--shadow-overlay);border-radius:8px;animation:slideInRight 0.3s ease;}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* 自訂對話框 */
.custom-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;}
.custom-dialog-overlay.show{opacity:1;}
.custom-dialog{background:var(--gradient-card);padding:30px;border-radius:15px;text-align:center;min-width:350px;box-shadow:var(--shadow-dialog);border:2px solid var(--border-blue-30);transform:scale(0.7);transition:transform 0.3s;}
.custom-dialog-overlay.show .custom-dialog{transform:scale(1);}
.custom-dialog-icon{font-size:60px;color:var(--warning);margin-bottom:15px;}
.custom-dialog-title{font-size:24px;font-weight:700;color:var(--primary-blue);margin-bottom:15px;text-shadow:var(--shadow-text);}
.custom-dialog-message{font-size:16px;color:var(--text-light);margin-bottom:25px;}
.custom-dialog-buttons{display:flex;gap:15px;justify-content:center;}
.custom-dialog-btn{padding:10px 30px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.3s;box-shadow:var(--shadow-btn);}
.custom-dialog-btn-cancel{background:linear-gradient(145deg,var(--secondary),var(--secondary-dark));color:var(--text-white);}
.custom-dialog-btn-cancel:hover{background:linear-gradient(145deg,var(--secondary-light),var(--secondary));transform:translateY(-2px);}
.custom-dialog-btn-confirm{background:linear-gradient(145deg,var(--primary-blue),var(--primary-blue-dark));color:var(--text-white);}
.custom-dialog-btn-confirm:hover{background:linear-gradient(145deg,var(--primary-blue-light),var(--primary-blue));transform:translateY(-2px);}

/* 載入覆蓋層 */
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;}
.loading-overlay.show{opacity:1;}
.loading-content{background:var(--gradient-card);padding:40px;border-radius:15px;text-align:center;min-width:300px;box-shadow:var(--shadow-dialog-lg);border:2px solid var(--border-blue-30);}
.loading-text{margin-top:20px;font-size:18px;color:var(--text-light);font-weight:600;}

/* 成功提示 */
.success-content{background:var(--gradient-card);padding:50px;border-radius:15px;text-align:center;min-width:350px;box-shadow:var(--shadow-dialog-lg);border:2px solid var(--border-green-50);}
.success-icon{font-size:80px;color:var(--success);margin-bottom:20px;animation:successPulse 0.5s ease;}
@keyframes successPulse{0%{transform:scale(0);opacity:0;}50%{transform:scale(1.2);}100%{transform:scale(1);opacity:1;}}
.success-text{font-size:20px;color:var(--text-light);font-weight:700;margin-bottom:10px;}

/* 捲軸 */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg-alpha-dark2-50);border-radius:5px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-blue),var(--primary-blue-dark));border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--primary-blue-light),var(--primary-blue));}

/* m_mp3tool.css */

/* 播放模式按鈕選中樣式 */
.playlist-mode-btn.active {
    background-color: #ffc107; /* Bootstrap yellow */
    border-color: #ffc107;
    color: #212529; /* Dark text for contrast */
}

/* 當前播放歌曲樣式 */
.playlist-song-item.playing {
    background-color: #fff3cd; /* Light yellow background */
    border-left: 3px solid #ffc107; /* Yellow left border */
    font-weight: bold;
}
/* 批次修改頁籤的 placeholder 顏色 */
#batchEditTab input::placeholder {
    color: var(--text-light); /* 使用淺色文字變數 */
    opacity: 0.7; /* 稍微透明 */
}

/* 批次修改頁籤的提示文字顏色 */
#batchEditTab .text-muted {
    color: var(--text-white) !important; /* 強制使用白色 */
}

/* --- 操作欄位寬度強制設定 --- */
.table thead .col-actions {
    width: 163px !important;
    min-width: 163px;
}

.table tbody td:last-child {
    width: 163px;
    min-width: 163px;
    text-align: center; /* 按鈕置中 */
}

/* --- 播放清單評分樣式 --- */
.playlist-song-rating {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.playlist-song-rating.rating-none {
    background-color: var(--secondary-dark);
    color: var(--text-muted);
}

/* 低評分 (咖啡色系) */
.playlist-song-rating.rating-1 { background-color: #5D4037; } /* 最深咖啡色 */
.playlist-song-rating.rating-2 { background-color: #6D4C41; }
.playlist-song-rating.rating-3 { background-color: #795548; }
.playlist-song-rating.rating-4 { background-color: #8D6E63; }
.playlist-song-rating.rating-5 { background-color: #A1887F; } /* 最淺咖啡色 */

/* 高評分 (亮色系) */
.playlist-song-rating.rating-6 { background-color: #28a745; } /* Bootstrap success */
.playlist-song-rating.rating-7 { background-color: #20c997; } /* Bootstrap teal */
.playlist-song-rating.rating-8 { background-color: #ffc107; } /* Bootstrap warning */
.playlist-song-rating.rating-9 { background-color: #fd7e14; } /* Bootstrap orange */
.playlist-song-rating.rating-10 { background-color: #dc3545; } /* Bootstrap danger */