/*
 * RaytaHost Voice — Player Styles
 * Version: 1.0.0
 * License: GPL v2 or later
 */

/* ── Custom properties (light defaults) ─────────────────────────────────── */
:root {
	--rhv-bg:          #ffffff;
	--rhv-border:      #e2e8f0;
	--rhv-shadow:      0 4px 20px rgba(0, 0, 0, 0.08);
	--rhv-text:        #1e293b;
	--rhv-muted:       #64748b;
	--rhv-accent:      #6366f1;
	--rhv-accent-h:    #4f46e5;
	--rhv-btn-bg:      #f1f5f9;
	--rhv-btn-text:    #334155;
	--rhv-btn-hover:   #e2e8f0;
	--rhv-btn-active:  #6366f1;
	--rhv-btn-atxt:    #ffffff;
	--rhv-radius:      12px;
	--rhv-radius-btn:  8px;
	--rhv-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	:root {
		--rhv-bg:        #1e293b;
		--rhv-border:    #334155;
		--rhv-shadow:    0 4px 20px rgba(0, 0, 0, 0.4);
		--rhv-text:      #f1f5f9;
		--rhv-muted:     #94a3b8;
		--rhv-btn-bg:    #334155;
		--rhv-btn-text:  #e2e8f0;
		--rhv-btn-hover: #475569;
	}
}

/* Force light scheme */
.rhv-scheme-light {
	--rhv-bg:        #ffffff;
	--rhv-border:    #e2e8f0;
	--rhv-shadow:    0 4px 20px rgba(0, 0, 0, 0.08);
	--rhv-text:      #1e293b;
	--rhv-muted:     #64748b;
	--rhv-btn-bg:    #f1f5f9;
	--rhv-btn-text:  #334155;
	--rhv-btn-hover: #e2e8f0;
}

/* Force dark scheme */
.rhv-scheme-dark {
	--rhv-bg:        #1e293b;
	--rhv-border:    #334155;
	--rhv-shadow:    0 4px 20px rgba(0, 0, 0, 0.4);
	--rhv-text:      #f1f5f9;
	--rhv-muted:     #94a3b8;
	--rhv-btn-bg:    #334155;
	--rhv-btn-text:  #e2e8f0;
	--rhv-btn-hover: #475569;
}

/* ── Player container ───────────────────────────────────────────────────── */
.rhv-player {
	display:       block;
	box-sizing:    border-box;
	width:         100%;
	margin:        1.5rem 0;
	padding:       1.25rem 1.5rem;
	background:    var(--rhv-bg);
	border:        1px solid var(--rhv-border);
	border-radius: var(--rhv-radius);
	box-shadow:    var(--rhv-shadow);
	font-family:   var(--rhv-font);
}

/* ── Header row ─────────────────────────────────────────────────────────── */
.rhv-player__header {
	display:        flex;
	align-items:    center;
	gap:            0.625rem;
	margin-bottom:  1rem;
}

.rhv-player__icon {
	display:     block;
	flex-shrink: 0;
}

.rhv-player__label {
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--rhv-text);
	flex:        1;
}

.rhv-player__status {
	font-size:  0.75rem;
	color:      var(--rhv-muted);
	background: var(--rhv-btn-bg);
	padding:    0.2rem 0.6rem;
	border-radius: 999px;
	white-space: nowrap;
}

.rhv-player__status--playing {
	color:      var(--rhv-accent);
	background: rgba(99, 102, 241, 0.1);
}

.rhv-player__status--paused {
	color:      #f59e0b;
	background: rgba(245, 158, 11, 0.1);
}

.rhv-player__status--finished {
	color:      #10b981;
	background: rgba(16, 185, 129, 0.1);
}

/* ── Controls row ───────────────────────────────────────────────────────── */
.rhv-player__controls {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         0.5rem;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.rhv-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             0.35rem;
	padding:         0.45rem 1rem;
	font-family:     var(--rhv-font);
	font-size:       0.8125rem;
	font-weight:     600;
	color:           var(--rhv-btn-text);
	background:      var(--rhv-btn-bg);
	border:          1px solid transparent;
	border-radius:   var(--rhv-radius-btn);
	cursor:          pointer;
	transition:      background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
	text-decoration: none;
	white-space:     nowrap;
	-webkit-user-select: none;
	user-select:     none;
}

.rhv-btn svg {
	width:  1rem;
	height: 1rem;
	flex-shrink: 0;
}

.rhv-btn:hover:not(:disabled) {
	background:  var(--rhv-btn-hover);
	transform:   translateY(-1px);
	box-shadow:  0 2px 8px rgba(0, 0, 0, 0.1);
}

.rhv-btn:active:not(:disabled) {
	transform: translateY(0);
}

.rhv-btn:focus-visible {
	outline:        2px solid var(--rhv-accent);
	outline-offset: 2px;
}

.rhv-btn:disabled {
	opacity: 0.4;
	cursor:  not-allowed;
}

/* Play button — accent coloured */
.rhv-btn--play {
	color:      var(--rhv-btn-atxt);
	background: var(--rhv-accent);
}

.rhv-btn--play:hover:not(:disabled) {
	background: var(--rhv-accent-h);
}

/* ── Button style variants ──────────────────────────────────────────────── */
.rhv-style-pill .rhv-btn,
.rhv-style-pill .rhv-lang-select {
	border-radius: 999px;
}

.rhv-style-square .rhv-btn,
.rhv-style-square .rhv-lang-select {
	border-radius: 4px;
}

/* ── Language selector ──────────────────────────────────────────────────── */
.rhv-player__lang {
	margin-left: auto;
}

.rhv-lang-select {
	appearance:    none;
	-webkit-appearance: none;
	padding:       0.4rem 2rem 0.4rem 0.75rem;
	font-family:   var(--rhv-font);
	font-size:     0.8125rem;
	color:         var(--rhv-btn-text);
	background:    var(--rhv-btn-bg)
	               url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
	               no-repeat right 0.4rem center;
	background-size: 1.25rem;
	border:        1px solid var(--rhv-border);
	border-radius: var(--rhv-radius-btn);
	cursor:        pointer;
	transition:    background 0.18s ease;
}

.rhv-lang-select:focus-visible {
	outline:        2px solid var(--rhv-accent);
	outline-offset: 2px;
}

/* ── Admin page ─────────────────────────────────────────────────────────── */
.rhv-admin-wrap {
	max-width: 800px;
}

.rhv-admin-title {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	font-size:   1.5rem !important;
	margin-bottom: 0 !important;
}

.rhv-tab-wrapper {
	margin-bottom: 1.5rem;
}

.rhv-admin-form .form-table th {
	width: 220px;
}

.rhv-admin-footer {
	margin-top:  2rem;
	padding-top: 1rem;
	border-top:  1px solid #e2e8f0;
	color:       #64748b;
	font-size:   0.8125rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.rhv-player {
		padding: 1rem;
	}

	.rhv-player__controls {
		gap: 0.375rem;
	}

	.rhv-btn {
		padding: 0.4rem 0.75rem;
		font-size: 0.75rem;
	}

	.rhv-player__lang {
		margin-left: 0;
		width: 100%;
	}

	.rhv-lang-select {
		width: 100%;
	}
}