/*!
 * TobaTek Live Dashboard — Front-end styles
 * Glassmorphism, CSS Grid, CSS variables. No frameworks.
 */

.tobatek-ld-dashboard {
	--tobatek-radius-lg: 26px;
	--tobatek-radius-md: 18px;
	--tobatek-blue-1: #0EA5E9;
	--tobatek-blue-2: #2563EB;
	--tobatek-bg-1: #0B1E3D;
	--tobatek-bg-2: #12305C;
	--tobatek-card-bg: rgba(255, 255, 255, 0.08);
	--tobatek-card-border: rgba(255, 255, 255, 0.16);
	--tobatek-text: #F8FAFC;
	--tobatek-muted: #C7D6EC;
	--tobatek-shadow: 0 20px 45px -20px rgba(6, 20, 45, 0.55);
	--tobatek-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;

	box-sizing: border-box;
	font-family: var(--tobatek-font);
	color: var(--tobatek-text);
	background: linear-gradient(150deg, var(--tobatek-bg-1) 0%, var(--tobatek-bg-2) 100%);
	border-radius: var(--tobatek-radius-lg);
	padding: 48px 32px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tobatek-ld-dashboard *,
.tobatek-ld-dashboard *::before,
.tobatek-ld-dashboard *::after {
	box-sizing: inherit;
}

.tobatek-ld-dashboard::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -100px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(14, 165, 233, 0.35), transparent 70%);
	filter: blur(10px);
	z-index: 0;
	pointer-events: none;
}

.tobatek-ld-header {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 620px;
	margin: 0 auto 40px;
}

.tobatek-ld-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: rgba(34, 197, 94, 0.16);
	border: 1px solid rgba(34, 197, 94, 0.4);
	color: #86EFAC;
	padding: 6px 14px;
	border-radius: 100px;
	margin-bottom: 16px;
}

.tobatek-ld-title {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 800;
	margin: 0 0 8px;
	color: #fff;
	line-height: 1.25;
}

.tobatek-ld-subtitle {
	font-size: 14.5px;
	color: var(--tobatek-muted);
	margin: 0;
}

.tobatek-ld-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.tobatek-ld-card {
	background: var(--tobatek-card-bg);
	border: 1px solid var(--tobatek-card-border);
	border-radius: var(--tobatek-radius-md);
	padding: 24px 22px;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: var(--tobatek-shadow);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	min-height: 220px;
}

.tobatek-ld-card:hover {
	transform: translateY(-6px);
	border-color: rgba(14, 165, 233, 0.5);
	box-shadow: 0 28px 55px -18px rgba(14, 165, 233, 0.35);
}

.tobatek-ld-card-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tobatek-muted);
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Weather card */
.tobatek-ld-weather-main {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.tobatek-ld-weather-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}

.tobatek-ld-temp {
	font-size: 34px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.tobatek-ld-condition {
	font-size: 14px;
	color: var(--tobatek-muted);
	margin: 0 0 16px;
}

.tobatek-ld-meta-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	color: var(--tobatek-muted);
}

.tobatek-ld-meta-list strong {
	color: #fff;
	font-weight: 600;
}

/* Prayer card */
.tobatek-ld-prayer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tobatek-ld-prayer-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
	padding-bottom: 8px;
}

.tobatek-ld-prayer-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.tobatek-ld-prayer-list span {
	color: var(--tobatek-muted);
}

.tobatek-ld-prayer-list strong {
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Hijri card */
.tobatek-ld-hijri-main {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tobatek-ld-hijri-weekday {
	font-size: 14px;
	color: var(--tobatek-muted);
	margin: 0;
}

/* Clock card */
.tobatek-ld-date {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 4px;
}

.tobatek-ld-time {
	font-size: 26px;
	font-weight: 800;
	color: var(--tobatek-blue-1);
	margin: 0 0 16px;
	font-variant-numeric: tabular-nums;
}

/* Error / unavailable state */
.tobatek-ld-unavailable {
	color: #FCA5A5;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

/* Responsive grid: 4 → 2 → 1 columns */
@media (max-width: 980px) {
	.tobatek-ld-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.tobatek-ld-dashboard {
		padding: 32px 18px;
	}
	.tobatek-ld-grid {
		grid-template-columns: 1fr;
	}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.tobatek-ld-card {
		transition: none;
	}
}