/*!
 * Tobalt Lingua — frontend styles
 * Author: Tobalt — https://tobalt.lt
 *
 * All selectors scoped under .tobalt-lingua-dashboard / .tobalt-lingua-player
 * to avoid host-theme collisions on multi-plugin sites like viesajam.
 *
 * Button rules use (0,2,0) specificity (.tobalt-lingua-X .tobalt-lingua-button)
 * to beat common host themes' `a:hover, button:hover { color: var(--body-color) }`
 * rules at (0,1,1) — see feedback_wp_plugin_button_hover_specificity.md.
 */

.tobalt-lingua-dashboard,
.tobalt-lingua-player {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #1a1a1a;
	max-width: 720px;
	margin: 1.5em auto;
	box-sizing: border-box;
}

.tobalt-lingua-dashboard *,
.tobalt-lingua-dashboard *::before,
.tobalt-lingua-dashboard *::after,
.tobalt-lingua-player *,
.tobalt-lingua-player *::before,
.tobalt-lingua-player *::after {
	box-sizing: inherit;
}

/* ---- Buttons ----
 * Default bg #2563eb gives ~5.0:1 contrast on white text (passes WCAG AA
 * 4.5:1 for body text). Hover darkens to #1d4ed8.
 */
.tobalt-lingua-dashboard .tobalt-lingua-button,
.tobalt-lingua-player .tobalt-lingua-button {
	display: inline-block;
	padding: 0.7em 1.4em;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: #2563eb;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 120ms ease, transform 60ms ease;
}
.tobalt-lingua-dashboard .tobalt-lingua-button:hover,
.tobalt-lingua-dashboard .tobalt-lingua-button:focus,
.tobalt-lingua-player .tobalt-lingua-button:hover,
.tobalt-lingua-player .tobalt-lingua-button:focus {
	color: #fff;
	background: #1d4ed8;
	outline: 2px solid transparent;
	outline-offset: 2px;
}
.tobalt-lingua-dashboard .tobalt-lingua-button:focus-visible,
.tobalt-lingua-player .tobalt-lingua-button:focus-visible {
	outline-color: #0f2a73;
	outline-style: solid;
	outline-width: 3px;
}
.tobalt-lingua-dashboard .tobalt-lingua-button[disabled],
.tobalt-lingua-player .tobalt-lingua-button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.tobalt-lingua-dashboard .tll-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0 0 1.2em;
}
.tobalt-lingua-dashboard .tll-stat {
	flex: 1 1 120px;
	padding: 0.8em 1em;
	background: #f5f7fa;
	border-radius: 8px;
	text-align: center;
}
.tobalt-lingua-dashboard .tll-stat-label {
	font-size: 0.85em;
	color: #4a4a4a; /* WCAG AA: 9.3:1 on #f5f7fa */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.2em;
}
.tobalt-lingua-dashboard .tll-stat-value {
	font-size: 1.6em;
	font-weight: 700;
	color: #222;
}
.tobalt-lingua-dashboard .tll-stat-value small {
	font-size: 0.55em;
	font-weight: 500;
	color: #666;
	margin-left: 0.2em;
}
.tobalt-lingua-dashboard .tll-flame {
	display: inline-block;
	margin-right: 0.15em;
}

.tobalt-lingua-dashboard .tll-section {
	margin: 0 0 1.4em;
}
.tobalt-lingua-dashboard .tll-section-title {
	font-size: 0.95em;
	font-weight: 600;
	color: #333;
	margin: 0 0 0.5em;
}

/* SVG progress bars (dashboard + player share these) */
.tobalt-lingua-dashboard .tll-progress-bar,
.tobalt-lingua-player    .tll-progress-bar {
	display: block;
	width: 100%;
	height: 12px;
}
.tll-progress-track { fill: #e6e9ee; }
.tll-progress-fill  { fill: #4a90e2; transition: width 250ms ease; }
.tll-progress-fill--goal { fill: #ff9500; }

/* Heatmap */
.tobalt-lingua-dashboard .tll-heatmap {
	display: grid;
	grid-template-columns: repeat( 30, 1fr );
	gap: 3px;
	max-width: 100%;
}
.tobalt-lingua-dashboard .tll-heatcell {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	background: #ebedf0;
	cursor: help;
}
.tobalt-lingua-dashboard .tll-heatcell--lvl1 { background: #c6e48b; }
.tobalt-lingua-dashboard .tll-heatcell--lvl2 { background: #7bc96f; }
.tobalt-lingua-dashboard .tll-heatcell--lvl3 { background: #239a3b; }
.tobalt-lingua-dashboard .tll-heatcell--lvl4 { background: #196127; }
.tobalt-lingua-dashboard .tll-heatcell--today {
	box-shadow: 0 0 0 2px #4a90e2;
}

/* Badges */
.tobalt-lingua-dashboard .tll-badge-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
	gap: 0.6em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tobalt-lingua-dashboard .tll-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.6em 0.4em;
	background: #fafbfc;
	border-radius: 8px;
	text-align: center;
}
.tobalt-lingua-dashboard .tll-badge-icon { width: 40px; height: 40px; display: block; }
.tobalt-lingua-dashboard .tll-badge--locked .tll-badge-icon {
	filter: grayscale(1) opacity(0.55);
}
.tobalt-lingua-dashboard .tll-badge--locked { color: #777; }
.tobalt-lingua-dashboard .tll-badge-name {
	font-size: 0.75em;
	color: #555;
	margin-top: 0.3em;
	line-height: 1.2;
}

/* ============================================================
   LESSON PLAYER
   ============================================================ */
.tobalt-lingua-player {
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	padding: 1.4em 1.4em 1.2em;
}
.tobalt-lingua-player .tll-player-header {
	margin: 0 0 1.2em;
}
.tobalt-lingua-player .tll-lesson-title {
	margin: 0 0 0.5em;
	font-size: 1.3em;
	font-weight: 700;
}
.tobalt-lingua-player .tll-player-progress {
	display: flex;
	align-items: center;
	gap: 0.8em;
}
.tobalt-lingua-player .tll-player-progress-bar { flex: 1; }
.tobalt-lingua-player .tll-player-counter {
	font-size: 0.85em;
	color: #666;
	white-space: nowrap;
}

.tobalt-lingua-player .tll-player-stage {
	min-height: 180px;
	margin: 0 0 1em;
	padding: 1em 0;
}
.tobalt-lingua-player .tll-ex-question,
.tobalt-lingua-player .tll-ex-sentence,
.tobalt-lingua-player .tll-ex-source {
	font-size: 1.1em;
	font-weight: 500;
	margin: 0 0 0.8em;
	color: #1a1a1a;
}
.tobalt-lingua-player .tll-ex-hint {
	font-size: 0.9em;
	font-style: italic;
	color: #555; /* WCAG AA: 7.4:1 on white */
	margin: 0 0 0.8em;
}

/* Multiple choice */
.tobalt-lingua-player .tll-mc-options {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tobalt-lingua-player .tll-mc-options li {
	margin: 0 0 0.4em;
}
.tobalt-lingua-player .tll-mc-options label {
	display: block;
	padding: 0.7em 0.9em;
	background: #f5f7fa;
	border: 2px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.tobalt-lingua-player .tll-mc-options label:hover {
	background: #eef2f8;
}
.tobalt-lingua-player .tll-mc-options input[type="radio"] {
	margin-right: 0.6em;
}
.tobalt-lingua-player .tll-mc-options input[type="radio"]:checked + * { /* not used; radio is inside label */ }
.tobalt-lingua-player .tll-mc-options label:has( input:checked ) {
	background: #e3edfb;
	border-color: #4a90e2;
}

/* Fill-blank, translation */
.tobalt-lingua-player .tll-ex-input,
.tobalt-lingua-player .tll-ex-textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	font-size: 1em;
	font-family: inherit;
	border: 2px solid #e6e9ee;
	border-radius: 6px;
	background: #fff;
	color: #1a1a1a;
}
.tobalt-lingua-player .tll-ex-input:focus,
.tobalt-lingua-player .tll-ex-textarea:focus {
	outline: 0;
	border-color: #4a90e2;
}

/* Matching */
.tobalt-lingua-player .tll-matching-grid {
	display: grid;
	gap: 0.5em;
}
.tobalt-lingua-player .tll-matching-row {
	display: flex;
	gap: 0.6em;
	align-items: center;
}
.tobalt-lingua-player .tll-matching-left {
	flex: 1 1 40%;
	padding: 0.5em 0.8em;
	background: #f5f7fa;
	border-radius: 6px;
	font-weight: 500;
}
.tobalt-lingua-player .tll-matching-select {
	flex: 1 1 60%;
	padding: 0.5em 0.7em;
	font-family: inherit;
	font-size: 1em;
	border: 2px solid #e6e9ee;
	border-radius: 6px;
	background: #fff;
}

/* Audio response */
.tobalt-lingua-player .tll-audio-controls {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	margin-top: 0.8em;
}

/* Feedback panel */
.tobalt-lingua-player .tll-player-feedback {
	margin: 0 0 1em;
	padding: 0.9em 1em;
	border-radius: 8px;
	background: #f5f7fa;
}
.tobalt-lingua-player .tll-player-feedback.tll-feedback--correct {
	background: #e3f4d7;
	color: #1d5a1d;
}
.tobalt-lingua-player .tll-player-feedback.tll-feedback--incorrect {
	background: #fde8e8;
	color: #8a1f1f;
}
.tobalt-lingua-player .tll-feedback-message {
	font-weight: 600;
	margin-bottom: 0.3em;
}
.tobalt-lingua-player .tll-feedback-correct {
	font-size: 0.95em;
	margin-bottom: 0.2em;
}
.tobalt-lingua-player .tll-feedback-explain {
	font-size: 0.9em;
	color: #555;
}

/* Player actions */
.tobalt-lingua-player .tll-player-actions {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
}

/* Summary */
.tobalt-lingua-player .tll-player-summary {
	text-align: center;
	padding: 1.5em 1em;
}
.tobalt-lingua-player .tll-summary-title {
	font-size: 1.4em;
	margin: 0 0 0.5em;
}
.tobalt-lingua-player .tll-summary-stats p {
	margin: 0.3em 0;
	font-size: 1.1em;
}

/* Mobile */
@media (max-width: 480px) {
	.tobalt-lingua-dashboard .tll-row { gap: 0.6em; }
	.tobalt-lingua-dashboard .tll-stat { flex: 1 1 calc(50% - 0.6em); }
	.tobalt-lingua-dashboard .tll-heatmap { grid-template-columns: repeat( 15, 1fr ); }
	.tobalt-lingua-player { padding: 1em; }
	.tobalt-lingua-player .tll-matching-row { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   BOOKING
   ============================================================ */
.tobalt-lingua-booking {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #1a1a1a;
	max-width: 560px;
	margin: 1.5em auto;
	padding: 1.4em;
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	background: #fff;
	box-sizing: border-box;
}
.tobalt-lingua-booking *,
.tobalt-lingua-booking *::before,
.tobalt-lingua-booking *::after { box-sizing: inherit; }

.tobalt-lingua-booking .tll-teacher-name {
	margin: 0 0 0.4em;
	font-size: 1.4em;
}
.tobalt-lingua-booking .tll-teacher-languages,
.tobalt-lingua-booking .tll-teacher-rate {
	margin: 0 0 0.3em;
	color: #555;
	font-size: 0.95em;
}
.tobalt-lingua-booking .tll-teacher-rate strong {
	font-size: 1.1em;
	color: #1a1a1a;
}
.tobalt-lingua-booking .tll-booking-content {
	margin: 0.8em 0 1.2em;
	color: #333;
	font-size: 0.95em;
}
.tobalt-lingua-booking .tll-field {
	margin: 0 0 1em;
}
.tobalt-lingua-booking .tll-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}
.tobalt-lingua-booking input[type="date"],
.tobalt-lingua-booking select,
.tobalt-lingua-booking textarea {
	padding: 0.5em 0.7em;
	font-size: 1em;
	font-family: inherit;
	border: 2px solid #e6e9ee;
	border-radius: 6px;
	background: #fff;
	color: #1a1a1a;
}
.tobalt-lingua-booking input[type="date"]:focus-visible,
.tobalt-lingua-booking select:focus-visible,
.tobalt-lingua-booking textarea:focus-visible {
	outline: 3px solid #0f2a73;
	outline-offset: 2px;
}
.tobalt-lingua-booking textarea {
	width: 100%;
}
.tobalt-lingua-booking .tll-slots-label {
	font-weight: 600;
	margin-bottom: 0.3em;
}
.tobalt-lingua-booking .tll-slots {
	min-height: 3em;
	padding: 0.6em;
	background: #f5f7fa;
	border-radius: 6px;
}
.tobalt-lingua-booking .tll-slots-empty {
	margin: 0;
	color: #555;
	font-style: italic;
}
.tobalt-lingua-booking .tll-slot-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 70px, 1fr ) );
	gap: 0.4em;
}
.tobalt-lingua-booking .tll-slot-btn {
	padding: 0.5em 0.4em;
	font-size: 0.95em;
	font-weight: 600;
	color: #1a1a1a;
	background: #fff;
	border: 2px solid #d3d8df;
	border-radius: 6px;
	cursor: pointer;
}
.tobalt-lingua-booking .tll-slot-btn:hover {
	border-color: #2563eb;
}
.tobalt-lingua-booking .tll-slot-btn:focus-visible {
	outline: 3px solid #0f2a73;
	outline-offset: 2px;
}
.tobalt-lingua-booking .tll-slot-btn--selected {
	color: #fff;
	background: #2563eb;
	border-color: #1d4ed8;
}
.tobalt-lingua-booking .tll-booking-submit {
	display: inline-block;
	padding: 0.7em 1.4em;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: #2563eb;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.tobalt-lingua-booking .tll-booking-submit:hover,
.tobalt-lingua-booking .tll-booking-submit:focus {
	background: #1d4ed8;
}
.tobalt-lingua-booking .tll-booking-submit:focus-visible {
	outline: 3px solid #0f2a73;
	outline-offset: 2px;
}
.tobalt-lingua-booking .tll-booking-submit[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.tobalt-lingua-booking .tll-booking-result {
	margin: 1em 0 0;
	padding: 0.9em 1em;
	border-radius: 8px;
}
.tobalt-lingua-booking .tll-booking-result--ok {
	background: #e3f4d7;
	color: #1d5a1d;
}
.tobalt-lingua-booking .tll-booking-result--err {
	background: #fde8e8;
	color: #8a1f1f;
}

@media (max-width: 480px) {
	.tobalt-lingua-booking { padding: 1em; }
	.tobalt-lingua-booking .tll-slot-grid {
		grid-template-columns: repeat( auto-fill, minmax( 60px, 1fr ) );
	}
}

/* ============================================================
   MY BOOKINGS
   ============================================================ */
.tobalt-lingua-my-bookings {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1a1a1a;
	max-width: 720px;
	margin: 1.5em auto;
}
.tobalt-lingua-my-bookings .tll-mb-section { margin: 0 0 1.5em; }
.tobalt-lingua-my-bookings h2 { font-size: 1.2em; margin: 0 0 0.6em; }
.tobalt-lingua-my-bookings .tll-mb-table {
	width: 100%;
	border-collapse: collapse;
}
.tobalt-lingua-my-bookings .tll-mb-table th,
.tobalt-lingua-my-bookings .tll-mb-table td {
	padding: 0.5em 0.6em;
	border-bottom: 1px solid #e6e9ee;
	text-align: left;
	font-size: 0.95em;
}
.tobalt-lingua-my-bookings .tll-mb-btn {
	padding: 0.4em 0.8em;
	font-size: 0.9em;
	font-weight: 600;
	color: #fff;
	background: #2563eb;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}
.tobalt-lingua-my-bookings .tll-mb-btn--cancel { background: #b91c1c; }
.tobalt-lingua-my-bookings .tll-mb-btn:hover { filter: brightness(0.92); }
.tobalt-lingua-my-bookings .tll-mb-btn:focus-visible {
	outline: 3px solid #0f2a73;
	outline-offset: 2px;
}
.tobalt-lingua-my-bookings .tll-mb-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Status badges (shared across booking surfaces) */
.tll-status {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 12px;
	font-size: 0.85em;
	font-weight: 600;
	background: #e6e9ee;
	color: #1a1a1a;
}
.tll-status--pending   { background: #fff4cc; color: #5a4a00; }
.tll-status--confirmed { background: #cfe9d2; color: #14532d; }
.tll-status--completed { background: #cfd9ff; color: #1e3a8a; }
.tll-status--cancelled { background: #fde2e2; color: #7f1d1d; }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.tobalt-lingua-leaderboard {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1a1a1a;
	max-width: 560px;
	margin: 1.5em auto;
}
.tobalt-lingua-leaderboard .tll-lb-header {
	margin-bottom: 1em;
}
.tobalt-lingua-leaderboard h2 {
	margin: 0 0 0.6em;
	font-size: 1.3em;
}
.tobalt-lingua-leaderboard .tll-lb-tabs {
	display: flex;
	gap: 0.4em;
	flex-wrap: wrap;
}
.tobalt-lingua-leaderboard .tll-lb-tab {
	padding: 0.4em 0.8em;
	font-size: 0.9em;
	font-weight: 600;
	color: #1a1a1a;
	background: #f5f7fa;
	border: 2px solid #e6e9ee;
	border-radius: 6px;
	text-decoration: none;
}
.tobalt-lingua-leaderboard .tll-lb-tab:hover {
	background: #eef2f8;
	color: #1a1a1a;
}
.tobalt-lingua-leaderboard .tll-lb-tab:focus-visible {
	outline: 3px solid #0f2a73;
	outline-offset: 2px;
}
.tobalt-lingua-leaderboard .tll-lb-tab--active {
	color: #fff;
	background: #2563eb;
	border-color: #1d4ed8;
}
.tobalt-lingua-leaderboard .tll-lb-tab--active:hover { color: #fff; }
.tobalt-lingua-leaderboard .tll-lb-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 0.5em;
}
.tobalt-lingua-leaderboard .tll-lb-table th,
.tobalt-lingua-leaderboard .tll-lb-table td {
	padding: 0.6em 0.7em;
	text-align: left;
	border-bottom: 1px solid #e6e9ee;
	font-size: 0.95em;
}
.tobalt-lingua-leaderboard .tll-lb-col--rank,
.tobalt-lingua-leaderboard .tll-lb-col--xp {
	width: 4em;
	text-align: right;
}
.tobalt-lingua-leaderboard .tll-lb-col--xp {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.tobalt-lingua-leaderboard .tll-lb-medal {
	font-size: 1.1em;
	margin-right: 0.2em;
}
.tobalt-lingua-leaderboard .tll-lb-row--me {
	background: #fff8d4; /* gentle yellow — AA passing for #1a1a1a (~16:1) */
	font-weight: 600;
}
.tobalt-lingua-leaderboard .tll-lb-empty {
	padding: 1em;
	background: #f5f7fa;
	border-radius: 6px;
	color: #555;
	text-align: center;
}
.tobalt-lingua-leaderboard .tll-lb-myrank {
	margin: 0.6em 0 0;
	padding: 0.6em 0.8em;
	background: #f5f7fa;
	border-radius: 6px;
	font-size: 0.95em;
	color: #4a4a4a;
}
.tobalt-lingua-leaderboard .tll-lb-myrank--none {
	color: #555;
	font-style: italic;
}

@media (max-width: 480px) {
	.tobalt-lingua-leaderboard .tll-lb-table th,
	.tobalt-lingua-leaderboard .tll-lb-table td { padding: 0.5em 0.4em; }
}

/* Login/error states */
.tobalt-lingua-login-prompt,
.tobalt-lingua-error {
	padding: 1.2em 1em;
	background: #fffbe6;
	border: 1px solid #f0e8b0;
	border-radius: 8px;
	text-align: center;
}

/* Screen-reader-only utility (matches WP core .screen-reader-text spec) */
.tobalt-lingua-dashboard .screen-reader-text,
.tobalt-lingua-player .screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Universal focus-visible for form inputs/select/textarea — beats host theme defaults */
.tobalt-lingua-player input:focus-visible,
.tobalt-lingua-player select:focus-visible,
.tobalt-lingua-player textarea:focus-visible {
	outline: 3px solid #0f2a73;
	outline-offset: 2px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	.tll-progress-fill { transition: none; }
	.tobalt-lingua-dashboard .tobalt-lingua-button,
	.tobalt-lingua-player .tobalt-lingua-button {
		transition: none;
	}
}