/* Modern Design System - Validation Mobile E2E Data Manager */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* ========== BASE STYLES ========== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.6;
	padding-top: 60px;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Hide floating theme toggle when nav bar is present */
.dash-nav ~ .theme-toggle,
.dash-nav ~ * .theme-toggle {
	display: none !important;
}

/* ========== THEME TOGGLE ========== */
.theme-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	background: var(--bg-card);
	border: 1px solid var(--border-primary);
	border-radius: 50px;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.theme-toggle:hover {
	border-color: var(--primary-color);
}

.theme-toggle-icon {
	font-size: 20px;
	transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-toggle-icon {
	transform: rotate(180deg);
}

.theme-toggle-text {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--text-primary);
}

/* ========== CONTAINER ========== */
.container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 24px 24px 40px;
}

/* ========== PAGE HEADER ========== */
.header {
	margin-bottom: 20px;
	padding: 0 0 16px;
}

.header h1 {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
	letter-spacing: -0.01em;
}

.header p {
	font-size: 0.85rem;
	color: var(--text-muted);
	font-weight: 400;
}

/* ========== BUTTONS ========== */
.btn,
button:not(.theme-toggle) {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 8px 18px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

.btn:hover {
	filter: brightness(1.1);
}

.btn:active {
	filter: brightness(0.95);
}

.btn-primary {
	background: var(--primary-color);
	color: white;
}

.btn-primary:hover {
	background: var(--primary-hover);
}

.btn-secondary {
	background: var(--secondary-color);
	color: white;
}

.btn-success {
	background: var(--success-color);
	color: white;
}

.btn-danger {
	background: var(--error-color);
	color: white;
}

.btn-outline {
	background: transparent;
	border: 1px solid var(--border-primary);
	color: var(--text-primary);
}

.btn-outline:hover {
	border-color: var(--primary-color);
	background: var(--bg-hover);
}

/* ========== BACK BUTTON ========== */
.back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--bg-card);
	border: 1px solid var(--border-primary);
	border-radius: 8px;
	color: var(--text-secondary);
	text-decoration: none;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	margin-bottom: 16px;
	transition: all 0.2s ease;
}

.back-btn:hover {
	border-color: var(--primary-color);
	color: var(--text-primary);
}

/* ========== CARDS ========== */
.card {
	background: var(--bg-card);
	border-radius: 12px;
	padding: 18px;
	border: 1px solid var(--border-primary);
	transition: border-color 0.2s ease;
	position: relative;
	overflow: hidden;
}

.card:hover {
	border-color: var(--border-focus);
}

.card-title {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.card-description {
	color: var(--text-secondary);
	font-size: 0.8rem;
	line-height: 1.5;
}

/* ========== GRID ========== */
.grid {
	display: grid;
	gap: 16px;
}

.grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ========== INPUTS ========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
	font-family: "Inter", sans-serif;
	width: 100%;
	padding: 10px 12px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: 8px;
	color: var(--text-primary);
	font-size: 0.85rem;
	transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--primary-color);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-muted);
}

/* ========== LABELS ========== */
label {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	color: var(--text-secondary);
	margin-bottom: 6px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ========== ALERTS ========== */
.alert {
	padding: 12px 18px;
	border-radius: 8px;
	border-left: 3px solid;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 0.85rem;
	margin-bottom: 16px;
	position: fixed;
	top: 72px;
	right: 20px;
	min-width: 280px;
	max-width: 460px;
	z-index: 999;
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		transform: translateX(400px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.alert-success {
	background: var(--success-bg);
	border-color: var(--success-color);
	color: var(--success-color);
}

.alert-error {
	background: var(--error-bg);
	border-color: var(--error-color);
	color: var(--error-color);
}

.alert-warning {
	background: var(--warning-bg);
	border-color: var(--warning-color);
	color: var(--warning-color);
}

.alert-info {
	background: var(--info-bg);
	border-color: var(--info-color);
	color: var(--info-color);
}

/* ========== BADGES ========== */
.badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 0.7rem;
	font-weight: 600;
	font-family: "Space Grotesk", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.badge-success {
	background: var(--success-bg);
	color: var(--success-color);
}

.badge-error {
	background: var(--error-bg);
	color: var(--error-color);
}

.badge-warning {
	background: var(--warning-bg);
	color: var(--warning-color);
}

.badge-info {
	background: var(--info-bg);
	color: var(--info-color);
}

/* ========== TABLES ========== */
table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-card);
	border-radius: 12px;
	overflow: hidden;
}

thead {
	background: transparent;
}

th {
	padding: 10px 14px;
	text-align: left;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 0.7rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border-bottom: 1px solid var(--border-primary);
}

td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-primary);
	color: var(--text-secondary);
	font-size: 0.8rem;
}

tr:last-child td {
	border-bottom: none;
}

tr:hover {
	background: var(--bg-hover);
}

/* ========== LOADING ========== */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	color: var(--text-muted);
	font-size: 0.85rem;
}

.spinner {
	border: 3px solid var(--border-primary);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ========== TABS ========== */
.tabs {
	display: flex;
	gap: 2px;
	margin-bottom: 20px;
	background: var(--bg-secondary);
	padding: 4px;
	border-radius: 10px;
	border: 1px solid var(--border-primary);
}

.tab {
	flex: 1;
	padding: 8px 18px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.tab:hover:not(.disabled) {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.tab.active {
	background: var(--primary-color);
	color: white;
}

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

/* ========== SECTIONS ========== */
.section {
	background: var(--bg-card);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 16px;
	border: 1px solid var(--border-primary);
}

.section-title {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-primary);
}

/* ========== EMPTY STATE ========== */
.empty-state {
	text-align: center;
	padding: 32px;
	color: var(--text-muted);
	font-size: 0.85rem;
}

/* ========== MODAL (unified) ========== */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1200;
	justify-content: center;
	align-items: center;
}

.modal.open,
.modal.show {
	display: flex;
}

.modal-content {
	background: var(--bg-card);
	border: 1px solid var(--border-primary);
	border-radius: 12px;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border-primary);
}

.modal-header h3 {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.modal-body {
	padding: 18px;
}

.modal-footer,
.modal-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--border-primary);
}

.modal-close {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 1.3rem;
	cursor: pointer;
	padding: 4px 8px;
}

.modal-close:hover {
	color: var(--text-primary);
}

/* ========== STAT CARDS (unified) ========== */
.stat-card {
	background: var(--bg-card);
	border: 1px solid var(--border-primary);
	border-radius: 10px;
	padding: 14px 12px;
	text-align: center;
	transition: border-color 0.2s ease;
}

.stat-card:hover {
	border-color: var(--border-focus);
}

.stat-value {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.2;
}

.stat-value.success {
	color: var(--success-color);
}

.stat-value.error {
	color: var(--error-color);
}

.stat-value.warning {
	color: var(--warning-color);
}

.stat-label {
	font-family: "Inter", sans-serif;
	font-size: 0.65rem;
	color: var(--text-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stats-row {
	display: grid;
	gap: 12px;
	margin-bottom: 16px;
}

/* ========== STATUS BADGES (unified) ========== */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 10px;
}

.status-badge .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.status-badge.queued { background: var(--info-bg); color: var(--info-color); }
.status-badge.queued .dot { background: var(--info-color); }
.status-badge.running { background: var(--warning-bg); color: var(--warning-color); }
.status-badge.running .dot { background: var(--warning-color); animation: statusPulse 1.5s infinite; }
.status-badge.completed { background: var(--success-bg); color: var(--success-color); }
.status-badge.completed .dot { background: var(--success-color); }
.status-badge.failed { background: var(--error-bg); color: var(--error-color); }
.status-badge.failed .dot { background: var(--error-color); }
.status-badge.enabled { background: var(--success-bg); color: var(--success-color); }
.status-badge.enabled .dot { background: var(--success-color); }
.status-badge.disabled { background: var(--bg-secondary); color: var(--text-muted); }
.status-badge.disabled .dot { background: var(--text-muted); }
.status-badge.scheduled { background: var(--info-bg); color: var(--info-color); }
.status-badge.scheduled .dot { background: var(--info-color); }

@keyframes statusPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.8); }
}

/* ========== PLATFORM / TYPE BADGES ========== */
.platform-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 600;
}

.platform-badge.android { background: rgba(61, 220, 132, 0.1); color: var(--success-color); }
.platform-badge.ios { background: rgba(99, 102, 241, 0.1); color: var(--primary-color); }

.type-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 600;
	background: var(--bg-secondary);
	color: var(--text-secondary);
}

.source-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 600;
	background: var(--bg-secondary);
	color: var(--text-secondary);
}

/* ========== FILTER BUTTONS ========== */
.filter-btn {
	padding: 6px 14px;
	border-radius: 6px;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--text-secondary);
	background: transparent;
	border: 1px solid var(--border-primary);
	cursor: pointer;
	transition: all 0.2s ease;
}

.filter-btn:hover {
	color: var(--text-primary);
	border-color: var(--primary-color);
}

.filter-btn.active {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

/* ========== PANEL (shared with dashboard) ========== */
.panel {
	background: var(--bg-card);
	border: 1px solid var(--border-primary);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border-primary);
	gap: 8px;
}

.panel-header h3 {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.panel-body {
	padding: 14px 18px;
}

.panel-link {
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
	white-space: nowrap;
}

.panel-link:hover {
	text-decoration: underline;
}

/* ========== FORM GROUPS (shared with dashboard) ========== */
.form-group {
	margin-bottom: 16px;
}

.form-group label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="time"],
.form-group input[type="number"] {
	width: 100%;
	padding: 10px 12px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: 8px;
	color: var(--text-primary);
	font-family: "Inter", sans-serif;
	font-size: 0.85rem;
}

.form-group select:focus,
.form-group input:focus {
	outline: none;
	border-color: var(--primary-color);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	cursor: pointer;
	color: var(--text-primary);
	font-size: 0.85rem;
}

.checkbox-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* ========== PAGINATION ========== */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 0.8rem;
}

.pagination button {
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 0.75rem;
}

/* ========== DETAIL PANEL (slide-out) ========== */
.detail-panel {
	position: fixed;
	top: 0;
	right: -460px;
	width: 450px;
	height: 100vh;
	background: var(--bg-card);
	border-left: 1px solid var(--border-primary);
	z-index: 1300;
	transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.detail-panel.open {
	right: 0;
}

/* ========== ICON CONTAINERS (stat cards) ========== */
.icon-container {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

/* ========== UTILITIES ========== */
.text-primary {
	color: var(--text-primary);
}

.text-secondary {
	color: var(--text-secondary);
}

.text-muted {
	color: var(--text-muted);
}

.text-center {
	text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
	.grid-4 {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

@media (max-width: 768px) {
	.container {
		padding: 16px 12px 32px;
	}

	.header h1 {
		font-size: 1.2rem;
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	.form-row {
		grid-template-columns: 1fr;
	}

	.theme-toggle {
		top: 10px;
		right: 10px;
	}

	.detail-panel {
		width: 100%;
		right: -100%;
	}
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
	background: var(--bg-tertiary);
	border-radius: 5px;
	border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--primary-color);
}