/* ===== AUDIO QUEUE + PICKER ===== */
.audio-queue-list { display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }

.audio-queue-item {
	background: var(--bg-queue-item);
	border: 1px solid var(--bdr-color);
	border-radius: 10px;
	padding: 10px 12px;
}

.audio-queue-item-hdr { display:flex; align-items:center; gap:8px; margin-bottom:8px; }

.audio-queue-item .queue-num {
	font-size:11px; font-weight:700; color: var(--clr-primary);
	background: var(--bg-card);
	border-radius:50%; width:22px; height:22px;
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	border: 1px solid var(--clr-primary);
}

.btn-queue-remove {
	margin-left:auto; background:#dc2626; color:white; border:none;
	border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer;
}

.ap-wrap { border:1px solid var(--bdr-color); border-radius:8px; overflow:hidden; background: var(--bg-picker); }

.ap-search {
	display:flex; align-items:center; gap:6px; padding:7px 10px;
	background: var(--bg-picker-hdr);
	border-bottom:1px solid var(--bdr-color);
}

.ap-search input {
	flex:1; border:none; background:transparent; font-size:13px; outline:none;
	color: var(--clr-text); font-family: 'Cairo', sans-serif;
}

.ap-search input::placeholder { color: var(--clr-text-muted); }
.ap-ibtn { background:none; border:none; cursor:pointer; font-size:14px; opacity:.6; padding:0 2px; }
.ap-ibtn:hover { opacity:1; }
.ap-list { max-height:210px; overflow-y:auto; }

.ap-cat-hdr {
	display:flex; align-items:center; gap:6px; padding:5px 10px;
	font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	background: var(--bg-picker-hdr);
	border-bottom:1px solid var(--bdr-color);
	cursor:pointer; user-select:none; position:sticky; top:0; z-index:1;
	color: var(--clr-text-muted);
}

.ap-cat-hdr:hover { background: var(--bdr-color); }
.ap-cat-name { flex:1; }
.ap-cat-count { font-size:10px; background: var(--clr-primary); color:white; padding:1px 6px; border-radius:8px; font-weight:700; }
.ap-cat-arrow { font-size:10px; color: var(--clr-text-muted); transition:transform .18s; }
.ap-cat-arrow.closed { transform:rotate(-90deg); }
.ap-cat-body.hidden { display:none; }

.ap-item {
	display:flex; align-items:center; gap:8px; padding:7px 12px;
	cursor:pointer; font-size:13px;
	border-bottom:1px solid var(--bdr-table);
	transition:background .1s;
	color: var(--clr-text);
}

.ap-item:hover { background: var(--bg-card); }
.ap-item.selected { background: var(--clr-primary); color:white; }
.ap-item.selected .ap-meta { color:rgba(255,255,255,.7); }
.ap-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-meta { font-size:11px; color: var(--clr-text-muted); white-space:nowrap; flex-shrink:0; }

.ap-footer {
	padding:7px 10px;
	background: var(--bg-ap-footer);
	border-top:1px solid var(--bdr-color);
	font-size:12px; display:flex; align-items:center; gap:6px; min-height:34px;
	color: var(--clr-text);
}

/* ===== AUDIO GROUP LIST ===== */
.ag-section { margin-bottom:14px; }

.ag-hdr {
	display:flex; align-items:center; gap:8px; padding:8px 12px;
	background: var(--bg-ag-hdr);
	border-radius:8px; margin-bottom:8px;
	cursor:pointer; user-select:none;
	border: 1px solid var(--bdr-color);
}

.ag-hdr:hover { background: var(--bdr-color); }
.ag-title { font-weight:700; font-size:14px; flex:1; display:flex; align-items:center; gap:6px; font-family: 'Cairo', sans-serif; color: var(--clr-text); }
.ag-count { font-size:11px; background: var(--clr-primary); color:white; padding:1px 7px; border-radius:10px; }
.ag-arrow { font-size:11px; color: var(--clr-text-muted); transition:transform .2s; }
.ag-arrow.closed { transform:rotate(-90deg); }
.ag-files { display:flex; flex-direction:column; gap:6px; padding-left:4px; }
.ag-files.hidden { display:none; }

.af-row {
	display:flex; align-items:center; gap:10px;
	background: var(--bg-schedule);
	border:1px solid var(--bdr-color);
	border-left:3px solid var(--clr-gold);
	border-radius:8px; padding:9px 12px;
}

.af-row:hover { background: var(--bg-card); }
.af-info { flex:1; min-width:0; }
.af-name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--clr-text); }
.af-meta { font-size:12px; color: var(--clr-text-muted); margin-top:2px; }
.af-actions { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; }

/* ===== JADWAL HARI INI TABLE ===== */
.today-schedule-table { width:100%; border-collapse:collapse; font-size:13px; color: var(--clr-text); }

.today-schedule-table th {
	background: var(--bg-table-th);
	padding: 9px 12px;
	text-align: left;
	color: var(--clr-text-label);
	font-weight: 700;
	font-family: 'Cairo', sans-serif;
	border-bottom: 2px solid var(--clr-gold);
	white-space: nowrap;
}

.today-schedule-table td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--bdr-table);
	vertical-align: middle;
}

.today-schedule-table tr.row-past { opacity: 0.5; }
.today-schedule-table tr.row-next { background: var(--bg-table-next); }
.today-schedule-table tr.row-muted { opacity: 0.4; text-decoration: line-through; }

.status-badge-today {
	display:inline-block; padding:2px 8px;
	border-radius:10px; font-size:11px; font-weight:700; white-space:nowrap;
}

.status-past     { background: var(--bg-card); color: var(--clr-text-muted); }
.status-next     { background: var(--prayer-terbit-bg);  color: var(--prayer-terbit-color); }
.status-upcoming { background: var(--badge-aktif-bg);      color: var(--badge-aktif-text); }
.status-muted    { background: var(--badge-nonaktif-bg);   color: var(--badge-nonaktif-text); }

html.dark .status-next     { background: #451a03; color: #fcd34d; }
html.dark .status-upcoming { background: #14532d; color: #86efac; }
html.dark .status-muted    { background: #450a0a; color: #fca5a5; }