/* =========================================================
   Grundlayout und Dokument
   Zweck: Globale Seitenhöhe und Scrollverhalten.
   Benötigt von: index.php
========================================================= */

html,
body {
	height: 100%;
}

body {
	overflow: hidden;
}


/* =========================================================
   Kopfbereich und Importleiste
   Zweck: Titel, Navigation und Importbereich der Hauptansicht.
   Benötigt von: index.php
========================================================= */

.app-title {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #c62828;
	letter-spacing: .4px;
	user-select: none;
}

.app-title i {
	font-size: 1.6rem;
}

.app-navbar {
	height: 57px;
}

.import-panel {
	height: 72px;
	border-bottom: 1px solid var(--bs-border-color);
	background: var(--bs-body-bg);
}


/* =========================================================
   Anwendungsrahmen
   Zweck: Berechnet die nutzbare Höhe der Anwendung. Wiederholte .app-shell-Regeln bleiben getrennt, damit die bestehende Kaskade sichtbar bleibt.
   Benötigt von: index.php; assets/js/app.js
========================================================= */

.app-shell {
	display: block;
	height: calc(100vh - 57px - 74px);
	min-height: 0;
}

body:has(.import-panel.d-none) .app-shell {
	height: calc(100vh - 57px - 74px);
}

.app-shell {
	height: calc(100vh - 57px) !important;
}


/* =========================================================
   Sidebar und Kategorien
   Zweck: Navigation, Kategorien, Scrollbereich und Einblend-Overlay.
   Benötigt von: index.php; assets/js/app.js
========================================================= */

.sidebar{
	
	position:fixed;
	
	top:57px;
	left:-340px;
	
	width:340px;
	height:calc(100vh - 57px);
	
	display:flex;
	flex-direction:column;
	
	background:var(--bs-body-bg);
	
	border-right:1px solid var(--bs-border-color);
	
	overflow-y:auto;
	
	z-index:1100;
	
	transition:left .25s ease;
}

.sidebar-scroll {
	overflow-y: auto;
	min-height: 0;
	flex: 1;
}

.category-list {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.category-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
}

.app-shell.sidebar-open .sidebar{
	left:0;
}

.sidebar-overlay{
	position:fixed;
	inset:57px 0 0 0;
	background:rgba(0,0,0,.45);
	opacity:0;
	visibility:hidden;
	transition:.25s;
	z-index:1090;
}

.sidebar-overlay.show{
	opacity:1;
	visibility:visible;
}


/* =========================================================
   Inhaltsbereich und Stationsliste
   Zweck: Aufteilung von Kopf, Liste und Detailansicht sowie Interaktionseinträge.
   Benötigt von: index.php; assets/js/app.js
========================================================= */

.content{
	display:flex;
	flex-direction:column;
	height:100%;
	min-height:0;
	overflow:hidden;
}

.content-header {
	min-height: 74px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
	flex: 0 0 auto;
}

.content-body{
	display:flex;
	flex:1;
	min-height:0;
	overflow:hidden;
}

.station-pane{
	flex:1;
	min-height:0;
	overflow-y:auto;
}

.detail-pane{
	min-height:0;
}

.station-item {
	cursor: pointer;
	position: relative;
}

.station-item.active {
	background: rgba(13, 110, 253, .11);
	border-left: 4px solid var(--bs-primary);
}

.station-info-btn{
	position:absolute;
	right:14px;
	bottom:12px;
	
	border:0;
	background:transparent;
	padding:0;
	
	color:var(--bs-info);
	font-size:1.4rem;
	line-height:1;
}

.station-info-btn:hover{
	color:#6ec1ff;
	transform:scale(1.12);
}

.station-info-btn:focus{
	box-shadow:none;
}


/* =========================================================
   Stationslogo und Hilfsklassen
   Zweck: Senderlogos, Badges, Stream-URL und Statusanzeigen.
   Benötigt von: index.php; assets/js/app.js
========================================================= */

.logo-box {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 54px;
}

.logo-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.logo-box i {
	font-size: 1.5rem;
	color: var(--bs-secondary-color);
}

.badge-soft {
	background: var(--bs-tertiary-bg);
	color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color);
}

.stream-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: .875rem;
	word-break: break-all;
}

.status-dot {
	width: .75rem;
	height: .75rem;
	border-radius: 50%;
	display: inline-block;
}

.status-unknown {
	background: var(--bs-secondary);
}

.status-checking {
	background: var(--bs-warning);
}

.status-ok {
	background: var(--bs-success);
}

.status-bad {
	background: var(--bs-danger);
}


/* =========================================================
   Alter unterer Player
   Zweck: Technisch vorhandener, aktuell ausgeblendeter Player. Wiederholte .player-bar-Regeln bleiben getrennt.
   Benötigt von: index.php; assets/js/app.js
========================================================= */

.player-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 74px;
	display: flex;
	align-items: center;
	padding: .65rem 1rem;
	z-index: 1030;
}

.player-bar {
	display: none !important;
}

.player-title {
	width: 320px;
	min-width: 220px;
}

audio {
	max-height: 42px;
}


/* =========================================================
   Zusammengeführter Player-Dialog
   Zweck: SweetAlert-Player mit Senderdaten, Cover, Favorit, Steuerung und Lautstärke.
   Benötigt von: assets/js/app.js
========================================================= */

.rf-merged-popup {
	background: rgba(0, 0, 0, .94) !important;
	color: #fff !important;
	border: 2px solid #dc3545 !important;
	border-radius: 14px !important;
	box-shadow: 0 0 35px rgba(255, 80, 80, .45) !important;
}

.rf-merged-popup .swal2-title {
	color: #fff !important;
}

.rf-merged-popup .swal2-close {
	color: #dc3545 !important;
	font-size: 2.2rem !important;
}

.rf-merged-popup .swal2-close:focus,
.rf-merged-popup .swal2-close:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

.rf-merged-player {
	text-align: left;
}

.rf-player-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.rf-player-favorite {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	
	width: 44px;
	height: 44px;
	margin-right: 28px;
	padding: 0;
	
	border: 0;
	border-radius: 50%;
	background: transparent;
	
	color: #ffc107;
	font-size: 1.65rem;
	line-height: 1;
	
	cursor: pointer;
	transition:
	transform 0.15s ease,
	background-color 0.15s ease,
	opacity 0.15s ease;
}

.rf-player-favorite:hover {
	transform: scale(1.1);
	background: rgba(255, 193, 7, 0.12);
}

.rf-player-favorite:focus-visible {
	outline: 2px solid #ffc107;
	outline-offset: 3px;
}

.rf-player-favorite:disabled {
	opacity: 0.55;
	cursor: wait;
	transform: none;
}

.rf-player-favorite i {
	pointer-events: none;
}

.rf-player-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rf-player-logo {
	
	width: 56px;
	height: 56px;
	
	border: 2px solid #dc3545;
	border-radius: 10px;
	
	overflow: hidden;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	
	background: #111;
	
	flex: 0 0 56px;
	
}

.rf-player-logo i {
	
	font-size: 1.6rem;
	color: #fff;
	
}

.rf-player-logo img {
	
	width: 100%;
	height: 100%;
	
	display: block;
	
	object-fit: contain;
	
	border-radius: 10px;
	
}

.rf-player-name {
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
}

.rf-player-now {
	font-size: 1.2rem;
	font-weight: 500;
	padding-right: 30px;
	color: #fff;
}

.rf-merged-image {
	width: 100%;
	height: 340px;
	border: 2px solid #dc3545;
	border-radius: 14px;
	overflow: hidden;
	background: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.rf-merged-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	background: #111;
}

.rf-artist-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rf-artist-placeholder i {
	font-size: 7rem;
	color: #777;
}

.rf-merged-info {
	background: #1c1c1c;
	border-radius: 12px;
	padding: 1rem 1.2rem;
	margin-bottom: 1rem;
}

.rf-merged-label {
	color: #aaa;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .09em;
}

.rf-merged-title {
	color: #fff;
	font-size: 1.75rem;
	line-height: 1.15;
	font-weight: 700;
}

.rf-merged-artist {
	color: #f8f9fa;
	font-size: 1.35rem;
	font-weight: 600;
}

.rf-merged-year {
	color: #d0d0d0;
	font-size: 1.15rem;
	font-weight: 600;
}

.rf-merged-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	background: #191919;
	border-radius: 12px;
	padding: 1rem;
}

.rf-round-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(255, 255, 255, .08);
	color: #dc3545;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
}

.rf-round-btn:hover {
	color: #fff;
	border-color: #dc3545;
}

.rf-volume {
	width: 220px;
	accent-color: #dc3545;
}


/* =========================================================
   SweetAlert-Auswertung
   Zweck: Tabellarische Zusammenfassung von Prüf- und Importergebnissen.
   Benötigt von: assets/js/rf_alerts.js
========================================================= */

.rf-swal-summary {
	text-align: left;
	margin: 0 auto;
	max-width: 460px;
}

.rf-swal-row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.rf-swal-row strong {
	font-variant-numeric: tabular-nums;
}

.rf-swal-note {
	margin-top: 16px;
	font-size: 0.9rem;
	color: #6c757d;
}


/* =========================================================
   Allgemeine SweetAlert-Dialoge
   Zweck: Darstellung und Schaltflächen für Bestätigungs-, Hinweis- und Fehlerdialoge.
   Benötigt von: assets/js/rf_alerts.js; assets/js/app.js
========================================================= */

.rf-dialog-popup {
	background: #111 !important;
	color: #fff !important;
	border: 2px solid #dc3545 !important;
	border-radius: 18px !important;
	box-shadow:
	0 0 30px rgba(220,53,69,.30),
	0 18px 45px rgba(0,0,0,.65) !important;
}

.rf-dialog-popup .swal2-title {
	color: #fff !important;
	font-size: 1.6rem !important;
	font-weight: 700 !important;
}

.rf-dialog-popup .swal2-html-container {
	color: #d7d7d7 !important;
	font-size: 1rem !important;
	line-height: 1.55 !important;
}

.rf-dialog-popup .swal2-icon {
	margin-top: 1.5rem !important;
	margin-bottom: .8rem !important;
}

.rf-dialog-popup .swal2-actions {
	margin-top: 1.8rem !important;
	gap: .75rem !important;
}

.rf-dialog-confirm {
	background: #dc3545 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: .6rem 1.4rem !important;
	font-weight: 600 !important;
}

.rf-dialog-confirm:hover {
	background: #bb2d3b !important;
}

.rf-dialog-confirm:focus,
.rf-dialog-confirm:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.rf-dialog-cancel:focus,
.rf-dialog-cancel:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.rf-dialog-cancel {
	background: #343a40 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: .6rem 1.4rem !important;
	font-weight: 600 !important;
}

.rf-dialog-cancel:hover {
	background: #495057 !important;
}


/* =========================================================
   Synchronisationsdialog
   Zweck: Darstellung der Synchronisationsstatistik und Statuskarten.
   Benötigt von: assets/js/rf_alerts.js
========================================================= */

.rf-sync-popup {
	background: #0f0f10 !important;
}

.rf-sync-dialog {
	position: relative;
	padding: 30px 34px 6px;
	text-align: left;
	background:
	radial-gradient(circle at 20% 0%, rgba(220, 53, 69, .18), transparent 34%),
	linear-gradient(180deg, #1a1a1d 0%, #101012 100%);
}

.rf-sync-topline {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, #dc3545, #ff7a18, #dc3545);
}

.rf-sync-header {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 26px;
}

.rf-sync-logo {
	width: 76px;
	height: 76px;
	border: 2px solid #dc3545;
	border-radius: 18px;
	background: rgba(220, 53, 69, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 18px rgba(220, 53, 69, .16), 0 0 26px rgba(220, 53, 69, .18);
	flex: 0 0 76px;
}

.rf-sync-logo i {
	font-size: 2.5rem;
	color: #dc3545;
}

.rf-sync-kicker {
	color: #dc3545;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.rf-sync-title {
	color: #fff;
	font-size: 2rem;
	line-height: 1.12;
	font-weight: 850;
}

.rf-sync-subtitle {
	color: #aaa;
	font-size: 1rem;
	margin-top: 7px;
}

.rf-sync-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.rf-sync-card {
	border: 1px solid rgba(255,255,255,.11);
	border-radius: 15px;
	background: rgba(255,255,255,.045);
	padding: 16px 18px;
	min-height: 104px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.rf-sync-card span {
	color: #bdbdbd;
	font-size: .94rem;
	font-weight: 650;
}

.rf-sync-card strong {
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
}

.rf-sync-card-success strong {
	color: #35d07f;
}

.rf-sync-card-info strong {
	color: #61b7ff;
}

.rf-sync-card-neutral strong {
	color: #f1f1f1;
}

.rf-sync-card-warning strong {
	color: #ffc107;
}

.rf-sync-total {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	border-top: 1px solid rgba(255,255,255,.10);
	border-bottom: 1px solid rgba(255,255,255,.10);
	padding: 17px 0;
	margin: 18px 0 14px;
}

.rf-sync-total div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	background: rgba(0,0,0,.22);
	border-radius: 12px;
	padding: 14px 16px;
}

.rf-sync-total span {
	color: #aaa;
	font-size: .95rem;
	font-weight: 650;
}

.rf-sync-total strong {
	color: #dc3545;
	font-size: 1.65rem;
	line-height: 1;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
}

.rf-sync-note {
	color: #cfcfcf;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .2);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: .98rem;
	line-height: 1.45;
	margin-bottom: 24px;
}


/* =========================================================
   Modal: Sender manuell hinzufügen
   Zweck: Scrollbarer Modalinhalt und Vorschau des Senderlogos.
   Benötigt von: includes/modal_station.php
========================================================= */

#addStationModal .modal-body {
	max-height: 75vh;
	overflow-y: auto;
}

#stationLogoPreview {
	width: 80px;
	height: 80px;
	object-fit: contain;
}


/* =========================================================
   SweetAlert-Hintergrund
   Zweck: Abdunklung hinter Player- und Standarddialogen.
   Benötigt von: assets/js/app.js; assets/js/rf_alerts.js
========================================================= */

.swal2-container {
    background: rgba(0, 0, 0, 0.9) !important;
}


/* =========================================================
   Responsive Anpassungen
   Zweck: Sämtliche Regeln für abweichende Bildschirmgrößen stehen gesammelt am Dateiende.
   Benötigt von: index.php; assets/js/app.js; assets/js/rf_alerts.js
========================================================= */

@media (max-width: 992px) {
	body {
		overflow: hidden;
	}
	
	.app-navbar,
	.import-panel,
	.player-bar {
		height: auto;
	}
	
	.app-shell{
		height:calc(100dvh - 57px) !important;
		padding-bottom:0;
		overflow:hidden;
	}
	
	.content{
		width:100%;
		height:100%;
		overflow:hidden;
	}
	
	.sidebar{
		width: min(300px, 85vw);
		left: calc(min(300px, 85vw) * -1);
		overflow-y:auto;
	}
	
	.sidebar-scroll{
		overflow-y:auto;
	}
	
	.station-pane{
		overflow-y:auto;
	}
	
	.content-body {
		display:flex;
		flex:1;
		min-height:0;
		overflow:hidden;
	}
	
	
	.player-bar {
		position: sticky;
	}
	
	.player-title {
		width: 220px;
	}


	/* Erhält die bisherige Kaskade: Die spätere globale .app-shell-Regel hatte auch mobil Vorrang. */
	.app-shell {
		height: calc(100vh - 57px) !important;
	}
}

@media (max-width: 768px) {
	.rf-merged-image {
		height: 260px;
	}
	
	.rf-merged-controls {
		flex-wrap: wrap;
	}
	
	.rf-volume {
		width: 180px;
	}
}

@media (max-width: 720px) {
	.rf-sync-dialog {
		padding: 26px 18px 4px;
	}
	
	.rf-sync-header {
		align-items: flex-start;
	}
	
	.rf-sync-logo {
		width: 58px;
		height: 58px;
		border-radius: 14px;
		flex-basis: 58px;
	}
	
	.rf-sync-logo i {
		font-size: 2rem;
	}
	
	.rf-sync-title {
		font-size: 1.55rem;
	}
	
	.rf-sync-grid,
	.rf-sync-total {
		grid-template-columns: 1fr;
	}
}