/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-tabs); }
::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: 10px; }

/* ===== GLOBAL TRANSITION for theme switching ===== */
*, *::before, *::after {
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Exempt transitions that shouldn't animate */
.btn, .tab, .modal, .theme-toggle, input, select, textarea {
	transition: all 0.2s ease;
}

/* ===== SELECT OPTIONS DARK MODE ===== */
html.dark select option {
	background: var(--bg-modal);
	color: var(--clr-text);
}

/* ===== TABLE ROW HOVER ===== */
.today-schedule-table tbody tr:hover {
	background: var(--bg-hover-row) !important;
}

/* ===== DYNAMIC CONTENT (innerHTML) — color overrides ===== */
.tab-content p, .tab-content span, .tab-content div {
	color: inherit;
}

/* ===== SCHEDULE ITEM TOGGLE SWITCH colors ===== */
input[type="checkbox"] { accent-color: var(--clr-primary); }

/* ===== HEADINGS inside tab content ===== */
.content h2, .content h3, .content h4 {
	color: var(--clr-heading);
	font-family: 'Cairo', sans-serif;
}

/* ===== PRAYER TIME CARDS ===== */
.prayer-card {
	background: var(--bg-card);
	border: 1px solid var(--bdr-color);
	border-radius: 10px;
	color: var(--clr-text);
}

/* ===== NEXT-BELL LIST items in dashboard ===== */
.next-bell-item {
	border-bottom: 1px solid var(--bdr-table);
	color: var(--clr-text);
}

/* ===== PAUSE SCHEDULE items ===== */
#pauseSchedulesList > div {
	background: var(--bg-card);
	border: 1px solid var(--bdr-color);
	border-radius: 8px;
	color: var(--clr-text);
}

/* ===== HOLIDAY items ===== */
#holidaysList .schedule-item {
	border-left-color: var(--clr-gold);
}

/* ===== ACTIVITY LOG TABLE ===== */
#activityLog table {
	border: 1px solid var(--bdr-table);
	background: var(--bg-container);
	color: var(--clr-text);
}
#activityLog table td {
	border-bottom: 1px solid var(--bdr-table);
	color: var(--clr-text);
}

/* ===== PRAYER SHOLAT TAB specifics ===== */
#prayerList .card, #prayerConfig .card {
	border-color: var(--bdr-color);
}

/* ===== NEXT BEL items in dashboard — override hardcoded ===== */
#nextBellsList .next-bell {
	background: var(--bg-next-bell);
	border: 1px solid var(--bdr-color);
	border-left: 4px solid var(--clr-gold);
	color: var(--clr-text);
}

/* ===== STAT CARDS override hardcoded inline backgrounds ===== */
#nextBellTime { color: white; }

/* ===== HELP TAB — ACCORDION ===== */
/* =====================================================
   PETUNJUK PENGGUNAAN — Help Section
   Light & Dark mode friendly
   ===================================================== */

/* ── Banner intro ── */
.help-intro {
	background: var(--bg-stat-card);
	border-radius: 14px;
	padding: 24px 28px;
	margin-bottom: 24px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	overflow: hidden;
}
.help-intro::after {
	content: '☽';
	position: absolute; right: 20px; bottom: -10px;
	font-size: 80px; opacity: 0.08;
	pointer-events: none;
}
.help-intro-icon { font-size: 48px; flex-shrink: 0; }
.help-intro h2 {
	font-family: 'Cairo', sans-serif;
	font-size: 20px; font-weight: 800; margin-bottom: 4px;
	color: #fff;
}
/* opacity diganti warna eksplisit agar tidak gelap di dark mode */
.help-intro p {
	font-size: 13px;
	color: rgba(255,255,255,0.92);
	line-height: 1.6;
}

/* ── Accordion container ── */
.help-accordion { display: flex; flex-direction: column; gap: 10px; }

.help-section {
	border: 1px solid var(--bdr-color);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s;
}
.help-section:focus-within,
.help-section:has(.help-body:not([hidden])) {
	border-color: var(--clr-primary);
}

/* ── Trigger button ── */
.help-trigger {
	width: 100%;
	background: var(--bg-card);
	border: none;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	text-align: left;
	transition: background 0.2s;
}
.help-trigger:hover { background: var(--bg-hover-row); }
.help-section.open .help-trigger { background: var(--bg-info-panel); }

.help-trigger-icon {
	font-size: 22px;
	width: 44px; height: 44px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	background: var(--bg-info-panel);
	border: 1.5px solid var(--bdr-color);
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	transition: background 0.2s, border-color 0.2s;
}
html.dark .help-trigger-icon {
	border-color: transparent;
	box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.help-trigger-text { flex: 1; }
.help-trigger-title {
	font-family: 'Cairo', sans-serif;
	font-size: 15px; font-weight: 700;
	color: var(--clr-text);
	display: block;
}
html.dark .help-trigger-title { color: var(--clr-heading); }

.help-trigger-sub {
	font-size: 12px;
	color: var(--clr-text-muted);
	display: block;
	margin-top: 2px;
	line-height: 1.4;
}
html.dark .help-trigger-sub { color: var(--clr-text-muted); }

.help-trigger-arrow {
	font-size: 12px;
	color: var(--clr-primary);
	transition: transform 0.25s;
	flex-shrink: 0;
}
.help-section.open .help-trigger-arrow { transform: rotate(90deg); }

/* ── Body ── */
.help-body {
	display: none;
	padding: 16px 20px 20px;
	background: var(--bg-container);
	border-top: 1px solid var(--bdr-color);
}
.help-section.open .help-body { display: block; }

/* ── Steps ── */
.help-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}
.help-step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.help-step-num {
	min-width: 28px; height: 28px;
	background: var(--clr-primary);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800;
	flex-shrink: 0;
	margin-top: 1px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.help-step-content { flex: 1; }
.help-step-content strong {
	display: block;
	font-size: 13px;
	font-family: 'Cairo', sans-serif;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--clr-text);
}
html.dark .help-step-content strong { color: var(--clr-heading); }
.help-step-content p {
	font-size: 13px;
	color: var(--clr-text-muted);
	line-height: 1.65;
	margin: 0;
}
html.dark .help-step-content p { color: var(--clr-text-muted); }

/* ── Cards grid ── */
.help-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-top: 14px;
}
.help-card {
	background: var(--bg-card);
	border: 1px solid var(--bdr-color);
	border-left: 4px solid var(--clr-primary);
	border-radius: 8px;
	padding: 12px 14px;
}
.help-card.gold    { border-left-color: var(--clr-gold); }
.help-card.success { border-left-color: var(--clr-success); }
.help-card.warn    { border-left-color: var(--clr-warn); }
.help-card.error   { border-left-color: var(--clr-error); }
.help-card strong {
	font-family: 'Cairo', sans-serif;
	font-size: 13px;
	font-weight: 700;
	display: block;
	margin-bottom: 5px;
	color: var(--clr-text);
}
html.dark .help-card strong { color: var(--clr-heading); }
.help-card p {
	font-size: 12px;
	color: var(--clr-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* ── Tip box (biru) ── */
.help-tip {
	background: var(--clr-info-bg);
	border: 1px solid var(--clr-info);
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 14px;
	font-size: 12px;
	color: var(--clr-text);
	line-height: 1.6;
}
html.dark .help-tip { color: var(--clr-text-muted); }
.help-tip strong { color: var(--clr-info); font-weight: 700; }

/* ── Warn box (kuning) ── */
.help-warn {
	background: var(--prayer-terbit-bg);
	border: 1px solid var(--clr-gold);
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--prayer-terbit-color);
	line-height: 1.6;
}
.help-warn strong { font-weight: 700; }

/* ── Table ── */
.help-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 14px;
	font-size: 13px;
}
.help-table th {
	background: var(--bg-table-th);
	color: var(--clr-text-label);
	padding: 8px 12px;
	text-align: left;
	border-bottom: 2px solid var(--clr-gold);
	font-family: 'Cairo', sans-serif;
	font-weight: 700;
}
.help-table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--bdr-table);
	color: var(--clr-text);
	vertical-align: top;
	line-height: 1.55;
}
html.dark .help-table td { color: var(--clr-text); }
.help-table tr:last-child td { border-bottom: none; }
.help-table tr:hover td { background: var(--bg-hover-row); }

/* ── Code / kbd inline ── */
.help-body code, .help-body kbd {
	background: var(--bg-table-th);
	color: var(--clr-primary);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 12px;
	font-family: monospace;
}
html.dark .help-body code,
html.dark .help-body kbd {
	background: var(--bg-tabs);
	color: var(--clr-primary);
}

/* ── <b> dan <em> di dalam help-body ── */
.help-body b, .help-body strong {
	color: var(--clr-text);
	font-weight: 700;
}
html.dark .help-body b,
html.dark .help-body strong {
	color: var(--clr-heading);
}
.help-body em {
	color: var(--clr-text-muted);
	font-style: italic;
}

/* ===== HEADER LOGIN BUTTON ===== */
.btn-login-header {
	background: rgba(212,168,41,0.22);
	border: 1.5px solid rgba(212,168,41,0.55);
	border-radius: 50%;
	width: 34px; height: 34px;
	color: white;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	flex-shrink: 0;
}
.btn-login-header:hover {
	background: rgba(212,168,41,0.45);
	border-color: rgba(212,168,41,0.9);
	transform: translateY(-1px);
}

/* ===== STOP AUDIO HEADER BUTTON ===== */
.btn-header-icon {
	background: rgba(220,38,38,0.22);
	border: 1.5px solid rgba(220,38,38,0.45);
	border-radius: 50%;
	width: 34px; height: 34px;
	color: white;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	flex-shrink: 0;
}
.btn-header-icon:hover {
	background: rgba(220,38,38,0.5);
	border-color: rgba(220,38,38,0.85);
	transform: translateY(-1px);
}

/* ===== PUBLIC VIEW BLINK DOT ===== */
@keyframes blink-dot {
	0%,100% { opacity:1; transform:scale(1); }
	50%      { opacity:.45; transform:scale(.7); }
}

/* ===== PASSWORD TOGGLE EYE ===== */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px !important; }
.btn-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
	padding: 0;
	display: flex;
	align-items: center;
	transition: color 0.2s;
}
.btn-eye:hover { color: rgba(255,255,255,0.9); }
.btn-eye svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
	.stop-pause-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   RESPONSIVE — MOBILE KOMPREHENSIF
   Mencakup: header, tabs, content, cards, modals, tabel,
   tombol aksi, audio rows, form, dan semua komponen utama.
   ============================================================ */

/* ── 768px: Tablet ─────────────────────────────────────────── */
@media (max-width: 768px) {
	.dashboard-grid { grid-template-columns: 1fr; }

	.header { padding: 14px 16px; }

	.content { padding: 16px 14px; }

	.card-sub {
		margin-left: 0;
		margin-right: 0;
	}

	.modal-content {
		width: 95%;
		padding: 20px 16px;
		max-height: 90vh;
	}

	/* Tabel jadwal hari ini — scroll horizontal */
	.today-schedule-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* Tombol aksi jadwal — wrap ke bawah saat sempit */
	.schedule-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.schedule-actions {
		width: 100%;
		flex-wrap: wrap;
		gap: 6px;
	}
	/* Tombol aksi jadwal & libur: hanya Edit/Play yang stretch, Hapus tetap compact */
	.schedule-actions .btn { justify-content: center; }
	.schedule-actions .btn-danger {
		flex: 0 0 auto;
		padding: 7px 14px;
		font-size: 12px;
	}
	.schedule-actions .btn:not(.btn-danger) {
		flex: 1;
		min-width: 70px;
	}

	/* Audio file row */
	.af-row { flex-wrap: wrap; gap: 8px; }
	.af-actions { width: 100%; flex-wrap: wrap; }
	.af-actions .btn { flex: 1; min-width: 60px; justify-content: center; }

	/* card-header tombol tidak overflow */
	.card-header { flex-wrap: wrap; gap: 8px; }

	/* Prayer dash grid */
	.prayer-dash-grid { grid-template-columns: repeat(4, 1fr); }

	/* Help intro stack */
	.help-intro { flex-direction: column; text-align: center; gap: 12px; padding: 18px 16px; }
	.help-intro::after { display: none; }
}

/* ── 480px: HP kecil ────────────────────────────────────────── */
@media (max-width: 480px) {
	/* Header: kurangi ukuran dan sembunyikan subtitle Arab */
	.header { padding: 10px 12px; gap: 8px; }
	.header h1 { font-size: 15px; gap: 6px; }
	.header h1 .subtitle { display: none; }

	/* Tombol header lebih kecil */
	.fullscreen-btn-header,
	.theme-toggle,
	.btn-header-icon,
	.btn-login-header {
		width: 30px; height: 30px;
	}

	/* User badge: sembunyikan nama/role, hanya tampil avatar + tombol */
	.user-badge { padding: 5px 8px; gap: 6px; }
	.user-badge > div:nth-child(2) { display: none; }

	/* Tab: lebih kompak */
	.tab { padding: 10px 12px; font-size: 12px; }

	/* Content padding */
	.content { padding: 12px 10px; }

	/* Card padding */
	.card { padding: 14px 12px; }
	.card-header { font-size: 15px; }

	/* Stat cards */
	.stat-value { font-size: 26px; }

	/* Prayer dash 2 kolom */
	.prayer-dash-grid { grid-template-columns: repeat(2, 1fr); }

	/* Login box */
	.login-box { padding: 28px 18px 24px; border-radius: 14px; }
	.login-logo .bell-icon { font-size: 40px; }
	.login-logo h2 { font-size: 18px; }

	/* Modal */
	.modal-content { width: 100%; border-radius: 14px 14px 0 0; margin-top: auto; max-height: 92vh; }
	.modal { align-items: flex-end; }
	.modal-header { font-size: 17px; }

	/* Form tombol bawah modal: stack vertikal */
	.modal-content > form > div[style*="display: flex"][style*="gap"],
	.modal-content > div[style*="display:flex"][style*="gap"] {
		flex-direction: column;
	}
	.modal-content .btn { width: 100%; justify-content: center; }

	/* Time item di modal tambah jadwal */
	.time-item { flex-direction: column; align-items: stretch; }
	.time-mode-selector { width: 100%; }
	.time-mode-btn { flex: 1; text-align: center; }
	.time-fixed-input,
	.time-prayer-input { min-width: 0; width: 100%; }

	/* Prayer offset controls: wrap */
	.time-prayer-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
	.prayer-select,
	.prayer-offset-dir,
	.prayer-offset-input { font-size: 12px; }

	/* Schedule item tombol: edit/play stretch, hapus tetap compact */
	.schedule-actions .btn:not(.btn-danger) { min-width: calc(50% - 3px); }
	.schedule-actions .btn-danger { flex: 0 0 auto; font-size: 12px; padding: 7px 12px; }

	/* Audio file actions */
	.af-actions .btn { min-width: calc(50% - 3px); font-size: 12px; padding: 6px 8px; }

	/* Tabel horizontal scroll dengan font kecil */
	.today-schedule-table { font-size: 12px; }
	.today-schedule-table th,
	.today-schedule-table td { padding: 7px 8px; }

	/* Audio queue item */
	.audio-queue-item-hdr { flex-wrap: wrap; }

	/* Help table */
	.help-table { font-size: 12px; }
	.help-table th, .help-table td { padding: 6px 8px; }

	/* Stop/pause grid */
	.stop-pause-grid { grid-template-columns: 1fr !important; }

	/* Ribbon publik */
	#publicView > div:first-child { padding: 7px 12px; }

	/* Public view padding */
	#publicView > div:nth-child(2) { padding: 12px 10px; }

	/* Audio group header */
	.ag-hdr { flex-wrap: wrap; }

	/* Checkbox holiday ringkas */
	.holiday-check-row label { font-size: 12px; }
}

/* ===================================================
   PRAYER FULL CARD  (tab Waktu Sholat + Modal)
   =================================================== */
.prayer-full-card {
	border-radius: 14px;
	padding: 16px 10px 14px;
	text-align: center;
	transition: transform .15s, box-shadow .15s;
	border: 1.5px solid transparent;
}
.prayer-full-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.pfc-emoji { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.pfc-name  { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.pfc-time  { font-size: 22px; font-weight: 800; }

/* ===================================================
   PRAYER DASH ITEM  (dashboard mini card)
   =================================================== */
.prayer-dash-item {
	border-radius: 10px;
	padding: 10px 8px 8px;
	text-align: center;
	position: relative;
	transition: transform .15s;
	border: 1.5px solid transparent;
}
.prayer-dash-item:hover { transform: translateY(-1px); }
.prayer-dash-item.prayer-next {
	box-shadow: 0 0 0 2px var(--clr-gold);
}
.pdi-emoji { font-size: 16px; line-height: 1; margin-bottom: 4px; }
.prayer-dash-item .p-name {
	font-size: 10px; font-weight: 700; letter-spacing: .5px;
	text-transform: uppercase; opacity: .85; margin-bottom: 3px;
}
.prayer-dash-item .p-time {
	font-size: 14px; font-weight: 800;
}
.p-next-badge {
	position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
	background: var(--clr-gold); color: white;
	font-size: 9px; font-weight: 700; padding: 2px 7px;
	border-radius: 20px; white-space: nowrap; letter-spacing: .3px;
}

/* ===================================================
   DARK MODE — inherit color dari parent .prayer-item-*
   =================================================== */
.prayer-full-card.prayer-item-imsak,
.prayer-dash-item.prayer-item-imsak   { border-color: var(--prayer-imsak-color); }
.prayer-full-card.prayer-item-subuh,
.prayer-dash-item.prayer-item-subuh   { border-color: var(--prayer-subuh-color); }
.prayer-full-card.prayer-item-terbit,
.prayer-dash-item.prayer-item-terbit  { border-color: var(--prayer-terbit-color); }
.prayer-full-card.prayer-item-dhuha,
.prayer-dash-item.prayer-item-dhuha   { border-color: var(--prayer-dhuha-color); }
.prayer-full-card.prayer-item-dzuhur,
.prayer-dash-item.prayer-item-dzuhur  { border-color: var(--prayer-dzuhur-color); }
.prayer-full-card.prayer-item-ashar,
.prayer-dash-item.prayer-item-ashar   { border-color: var(--prayer-ashar-color); }
.prayer-full-card.prayer-item-maghrib,
.prayer-dash-item.prayer-item-maghrib { border-color: var(--prayer-maghrib-color); }
.prayer-full-card.prayer-item-isya,
.prayer-dash-item.prayer-item-isya    { border-color: var(--prayer-isya-color); }

/* ===================================================
   DARK MODE — petunjuk / hint text
   =================================================== */
.hint, .form-hint, small.text-muted,
.help-text, .input-hint, p.hint,
[class*="hint"], [class*="help-text"] {
	color: var(--clr-text-muted) !important;
}
html.dark .hint,
html.dark .form-hint,
html.dark small.text-muted,
html.dark .help-text,
html.dark .input-hint,
html.dark p.hint,
html.dark [class*="hint"],
html.dark [class*="help-text"] {
	color: var(--clr-text-muted) !important;
	opacity: 1 !important;
}

/* Text opacity yang sering membuat teks gelap tidak terbaca di dark mode */
html.dark [style*="opacity: 0."] {
	opacity: 0.85 !important;
}
html.dark [style*="opacity:."] {
	opacity: 0.85 !important;
}