/* ARIS Recruitment Portal — Confident & Assured */
/* Color psychology: Indigo=trust, Green=growth, Lavender=calm, Warm grays=approachable */

/* Force all native controls (select, date, checkbox, scrollbar) to light mode.
   Must be on <html> — per-element color-scheme is ignored by macOS/Chrome for
   native <select> rendering which is delegated to the OS compositor. */
html { color-scheme: only light; }

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
	--aris-text: #1e293b;
	--aris-text-muted: #64748b;
	--aris-text-light: #94a3b8;
	--aris-bg: #f8fafc;
	--aris-bg-card: #ffffff;
	--aris-bg-hover: #f1f5f9;
	--aris-bg-subtle: #eef2ff;
	--aris-bg-warm: #faf8ff;
	--aris-primary: #4f46e5;
	--aris-primary-hover: #4338ca;
	--aris-primary-light: #eef2ff;
	--aris-primary-glow: rgba(79, 70, 229, 0.12);
	--aris-border: #e2e8f0;
	--aris-border-light: #f1f5f9;
	--aris-input-border: #cbd5e1;
	--aris-progress-bg: #e2e8f0;
	--aris-success: #059669;
	--aris-success-bg: #d1fae5;
	--aris-success-text: #065f46;
	--aris-warning: #d97706;
	--aris-warning-bg: #fef3c7;
	--aris-warning-text: #92400e;
	--aris-danger: #dc2626;
	--aris-danger-bg: #fee2e2;
	--aris-danger-text: #991b1b;
	--aris-pill-answered-bg: #d1fae5;
	--aris-pill-answered-border: #6ee7b7;
	--aris-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.25);
	--aris-radius: 12px;
	--aris-radius-sm: 8px;
	--aris-radius-lg: 16px;
	--aris-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
	--aris-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
	--aris-shadow-md: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.03);
	--aris-shadow-lg: 0 10px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.03);
	--aris-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Override Frappe's own CSS variables within our portal pages ── */
/* This is the KEY: Frappe uses --primary for buttons/links, we redirect it to indigo */
#main-content,
.aris-page,
.aris-page-sm,
.aris-page-md {
	--primary: var(--aris-primary) !important;
	--primary-color: var(--aris-primary) !important;
	--btn-primary-bg: var(--aris-primary) !important;
	--text-color: var(--aris-text) !important;
	--text-muted: var(--aris-text-muted) !important;
	--border-color: var(--aris-border) !important;
	--bg-color: #ffffff !important;
	font-family: var(--aris-font);
	color: var(--aris-text);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ── Skip Link ── */
.aris-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--aris-primary);
	color: #fff;
	padding: 8px 16px;
	z-index: 10000;
	font-size: 14px;
	text-decoration: none;
	border-radius: 0 0 var(--aris-radius-sm) 0;
}
.aris-skip-link:focus { top: 0; }

/* ── Portal Nav Bar ── */
.aris-portal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 24px;
	border-bottom: 1px solid var(--aris-border);
	background: #fff;
	font-family: var(--aris-font);
	font-size: 13px;
	position: sticky;
	top: 0;
	z-index: 100;
}
.aris-portal-nav a { color: var(--aris-text); text-decoration: none; font-weight: 500; }
.aris-portal-nav a:hover { color: var(--aris-primary); }
.aris-portal-nav .aris-nav-logout { color: var(--aris-text-muted); font-weight: 400; }
.aris-portal-nav .aris-nav-logout:hover { color: var(--aris-danger); }

@media (max-width: 480px) {
	.aris-portal-nav { padding: 8px 16px; font-size: 12px; }
}

/* ── Focus ── */
#main-content *:focus-visible { outline: 2px solid var(--aris-primary); outline-offset: 2px; }

/* ── iOS zoom prevention ── */
input, select, textarea { font-size: 16px; }

/* ── Select controls — full width + force light scheme for macOS dark ── */
#main-content select,
#main-content .form-control[type="select"],
select.form-control {
	width: 100%;
	-webkit-appearance: menulist;
	appearance: menulist;
	background-color: #ffffff;
	color: #1e293b;
}

/* ── Hide default Frappe website footer ── */
.web-footer { display: none !important; }

/* ── Page widths ── */
.aris-page {
	max-width: 100%; width: 100%; margin: 32px auto; padding: 0 20px;
	box-sizing: border-box; font-family: var(--aris-font);
}
.aris-page-sm {
	max-width: 100%; width: 100%; margin: 40px auto; padding: 0 20px;
	box-sizing: border-box; font-family: var(--aris-font);
}
.aris-page-md {
	max-width: 100%; width: 100%; margin: 40px auto; padding: 0 20px;
	box-sizing: border-box; font-family: var(--aris-font);
}

/* ── Cards (force light with ID-level specificity) ── */
#main-content .aris-card,
.aris-card {
	background: #ffffff !important;
	border: 1px solid var(--aris-border) !important;
	border-radius: var(--aris-radius) !important;
	padding: 24px !important;
	margin-bottom: 20px;
	box-shadow: var(--aris-shadow) !important;
	color: var(--aris-text) !important;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
#main-content .aris-card:hover,
.aris-card:hover { box-shadow: var(--aris-shadow-md) !important; }

.aris-job-card {
	color: var(--aris-text) !important;
	cursor: pointer;
	border-left: 3px solid transparent !important;
	transition: all 0.2s ease;
}
.aris-job-card:hover {
	border-left-color: var(--aris-primary) !important;
	box-shadow: var(--aris-shadow-lg) !important;
	transform: translateY(-1px);
	color: var(--aris-text) !important;
}

#main-content .aris-card h4,
.aris-card h4 {
	font-family: var(--aris-font);
	font-weight: 600;
	font-size: 16px;
	color: var(--aris-text) !important;
	margin: 0 0 12px 0;
}

/* ── Utility ── */
.aris-flex-between { display: flex; justify-content: space-between; align-items: center; }
.aris-text-muted { color: var(--aris-text-muted) !important; }
.aris-text-light { color: var(--aris-text-light) !important; }

#main-content .aris-badge-success,
.aris-badge-success {
	background: var(--aris-success-bg) !important;
	color: var(--aris-success-text) !important;
	border: 1px solid #a7f3d0 !important;
}
#main-content .aris-badge-warning,
.aris-badge-warning {
	background: var(--aris-warning-bg) !important;
	color: var(--aris-warning-text) !important;
	border: 1px solid #fde68a !important;
}
#main-content .aris-badge-danger,
.aris-badge-danger {
	background: var(--aris-danger-bg) !important;
	color: var(--aris-danger-text) !important;
	border: 1px solid #fca5a5 !important;
}

.aris-fieldset {
	margin-bottom: 20px;
	border: 1px solid var(--aris-border);
	padding: 16px;
	border-radius: var(--aris-radius);
	background: #fff !important;
}
.aris-fieldset legend { font-weight: 600; color: var(--aris-text); }

.aris-form-group { margin-bottom: 12px; }

.aris-mb-sm { margin-bottom: 8px; }
.aris-mb-md { margin-bottom: 16px; }
.aris-mb-lg { margin-bottom: 24px; }
.aris-mt-sm { margin-top: 8px; }
.aris-mt-md { margin-top: 16px; }
.aris-mt-lg { margin-top: 24px; }

.aris-narrative { color: var(--aris-text-muted); line-height: 1.7; font-size: 14px; }
/* ── Offer Row ── */
.aris-offer-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 0; border-bottom: 1px solid var(--aris-border-light);
	font-size: 14px;
}
.aris-offer-row:last-child { border-bottom: none; }

.aris-nav-row { display: flex; justify-content: space-between; margin-top: 20px; gap: 12px; }
.aris-submit-missing {
	font-size: 12.5px;
	line-height: 1.5;
	color: #8a5a00;
	background: #fff8e6;
	border: 1px solid #e8c98a;
	border-radius: var(--aris-radius);
	padding: 10px 12px;
	margin-top: 10px;
	text-align: center;
}

.aris-submit-hint { font-size: 12px; color: var(--aris-text-light); margin-top: 8px; text-align: center; }
.aris-completed-state { text-align: center; padding: 40px 0; }
.aris-completed-check {
	font-size: 48px; margin-bottom: 16px;
	color: var(--aris-success);
	background: var(--aris-success-bg);
	width: 80px; height: 80px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 8px rgba(5, 150, 105, 0.08);
}
.aris-pills { display: none; }

/* ── Dashboard Hero ── */
.aris-dash-hero {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%) !important;
	background: linear-gradient(135deg, var(--aris-primary) 0%, #7c3aed 50%, #a855f7 100%) !important;
	border-radius: var(--aris-radius-lg) !important;
	padding: 32px 32px 28px !important;
	margin-bottom: 28px;
	color: #fff !important;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.35);
}
.aris-dash-hero::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -10%;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	pointer-events: none;
}
.aris-dash-hero::after {
	content: "";
	position: absolute;
	bottom: -50%;
	left: 5%;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	pointer-events: none;
}
.aris-dash-hero h2 {
	font-family: var(--aris-font);
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 4px 0;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #fff !important;
	position: relative;
	z-index: 1;
}
.aris-dash-hero p {
	margin: 0;
	opacity: 0.85;
	font-size: 14px;
	color: rgba(255,255,255,0.9) !important;
	position: relative;
	z-index: 1;
}
.aris-dash-greeting {
	font-size: 15px;
	font-weight: 400;
	opacity: 0.9;
	margin-bottom: 6px;
	color: rgba(255,255,255,0.95) !important;
	position: relative;
	z-index: 1;
}

/* ── Section Labels ── */
.aris-section-label {
	font-family: var(--aris-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aris-primary) !important;
	margin: 28px 0 12px 0;
}
.aris-section-label:first-of-type { margin-top: 0; }

/* ── Dashboard Profile Card ── */
.aris-dash-profile {
	background: #ffffff !important;
	border: 1px solid var(--aris-border) !important;
	border-left: 3px solid var(--aris-primary) !important;
	border-radius: var(--aris-radius) !important;
	padding: 20px 24px !important;
	margin-bottom: 20px;
	box-shadow: var(--aris-shadow) !important;
	display: flex !important;
	align-items: center !important;
	gap: 20px;
	color: var(--aris-text) !important;
}

/* ── Progress Ring ── */
.aris-dash-profile-ring {
	position: relative;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px;
	max-width: 56px;
	flex-shrink: 0;
}
.aris-dash-profile-ring svg,
#dash-progress-container svg {
	width: 56px !important;
	height: 56px !important;
	max-width: 56px !important;
	display: block !important;
}
.aris-dash-profile-pct {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
	font-weight: 700;
	color: var(--aris-primary);
}
.aris-dash-profile-info { flex: 1; min-width: 0; }
.aris-dash-profile-info h4 {
	font-size: 15px; font-weight: 600; margin: 0 0 4px 0;
	color: var(--aris-text) !important;
}
.aris-dash-profile-meta {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#main-content .aris-dash-profile-meta .badge,
.aris-dash-profile-meta .badge {
	font-size: 11px;
	font-weight: 600;
	background: var(--aris-primary-light) !important;
	color: var(--aris-primary) !important;
	border: 1px solid #c7d2fe !important;
}

/* CV chip */
.aris-dash-cv-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--aris-text-muted) !important;
	background: var(--aris-bg-hover);
	padding: 3px 10px;
	border-radius: 999px;
}
.aris-dash-cv-chip svg {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	flex-shrink: 0;
}
.aris-dash-profile-actions { flex-shrink: 0; }

/* ── Assessment Container ── */
/* Release notice: shown while HR has not yet opened the timed assessments. */
.aris-dash-release {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff8e6 !important;
	border: 1px solid #e8c98a !important;
	border-left: 3px solid #d08700 !important;
	border-radius: var(--aris-radius) !important;
	padding: 12px 14px !important;
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b4a00;
}
.aris-dash-release-icon { font-size: 15px; line-height: 1.35; }

.aris-dash-assessments {
	background: #ffffff !important;
	border: 1px solid var(--aris-border) !important;
	border-radius: var(--aris-radius) !important;
	padding: 8px !important;
	margin-bottom: 20px;
	box-shadow: var(--aris-shadow) !important;
	overflow: hidden;
}
.aris-dash-assessments-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 16px 8px;
}
.aris-dash-assessments-header h4 {
	font-family: var(--aris-font);
	font-weight: 600; font-size: 16px;
	color: var(--aris-text) !important; margin: 0;
}

/* ── Assessment Row — color-coded left border ── */
.aris-assessment-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 16px 16px !important;
	border-radius: var(--aris-radius-sm);
	margin: 4px 4px 10px 4px;
	background: var(--aris-bg-warm) !important;
	color: var(--aris-text) !important;
	transition: background 0.15s ease, transform 0.15s ease;
	border-left: 3px solid var(--aris-border);
}
.aris-assessment-row:hover {
	background: var(--aris-primary-light) !important;
	transform: translateX(2px);
}
/* Completed row — green left border */
.aris-assessment-row:has(.aris-badge-success) {
	border-left-color: var(--aris-success) !important;
	background: #f0fdf4 !important;
}
/* Active row — indigo left border */
.aris-assessment-row:has(.btn-primary) {
	border-left-color: var(--aris-primary) !important;
	background: var(--aris-primary-light) !important;
}
/* Locked row — muted */
.aris-assessment-row:last-child { margin-bottom: 0; }
.aris-assessment-row-right { display: flex; align-items: center; gap: 8px; }

/* ── DISC Bars ── */
.aris-disc-bars { margin: 16px 0; }
.aris-disc-bar-row { display: flex; align-items: center; margin-bottom: 10px; }
.aris-disc-bar-label { width: 28px; font-weight: 700; font-size: 13px; color: var(--aris-primary); }
.aris-disc-bar-track { flex: 1; height: 22px; background: var(--aris-progress-bg); border-radius: 11px; overflow: hidden; margin: 0 10px; }
.aris-disc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--aris-primary), #a78bfa); border-radius: 11px; transition: width 0.5s ease; }
.aris-disc-bar-value { width: 40px; text-align: right; font-size: 13px; font-weight: 600; color: var(--aris-text-muted); }

/* ── Transparency ── */
.aris-transparency {
	background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%) !important;
	border-color: #c7d2fe !important;
}
.aris-transparency ul { padding-left: 20px; margin: 8px 0 0; }
.aris-transparency li { margin-bottom: 10px; line-height: 1.6; color: var(--aris-text-muted); font-size: 14px; }
.aris-transparency li strong { color: var(--aris-text); }

/* ── Progress Bar ── */
.aris-progress-track { background: var(--aris-progress-bg); border-radius: 999px; height: 8px; margin-top: 8px; overflow: hidden; }
.aris-progress-fill { background: linear-gradient(90deg, var(--aris-primary), var(--aris-success)); height: 8px; border-radius: 999px; width: 0%; transition: width 0.5s ease; }

/* ── Skill Tags ── */
.aris-skill-tag {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 5px 12px;
	background: var(--aris-primary-light) !important;
	color: var(--aris-primary) !important;
	border-radius: 999px; font-size: 13px; font-weight: 500;
	border: 1px solid #c7d2fe;
}
.aris-skill-tag-remove {
	cursor: pointer; font-weight: bold; font-size: 15px; line-height: 1;
	margin-left: 2px; background: none; border: none; color: inherit; padding: 0;
	opacity: 0.6; transition: opacity 0.15s;
}
.aris-skill-tag-remove:hover { opacity: 1; }

/* ── Skill Dropdown ── */
.aris-skill-dropdown {
	display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
	background: #fff !important; border: 1px solid var(--aris-border);
	border-top: none; border-radius: 0 0 var(--aris-radius-sm) var(--aris-radius-sm);
	max-height: 200px; overflow-y: auto; box-shadow: var(--aris-shadow-md);
}
.aris-skill-dropdown-item {
	padding: 10px 14px; cursor: pointer; color: var(--aris-text) !important;
	font-size: 14px; background: #fff !important; transition: background 0.1s;
}
.aris-skill-dropdown-item:hover { background: var(--aris-bg-hover) !important; }
.aris-skill-dropdown-add {
	padding: 10px 14px; cursor: pointer; color: var(--aris-primary) !important;
	font-weight: 500; border-top: 1px solid var(--aris-border); background: #fff !important;
}
.aris-skill-dropdown-add:hover { background: var(--aris-bg-hover) !important; }

/* ── Save Banner ── */
.aris-save-banner {
	padding: 12px 16px;
	background: var(--aris-success-bg) !important;
	color: var(--aris-success-text) !important;
	border: 1px solid #a7f3d0 !important;
	border-radius: var(--aris-radius-sm);
	margin-bottom: 16px; font-weight: 500; font-size: 14px;
	transition: opacity 0.4s;
}

/* ── Security Banners ── */
.aris-banner-warning {
	padding: 10px 16px; background: var(--aris-warning-bg) !important;
	color: var(--aris-warning-text) !important; border-radius: var(--aris-radius-sm);
	border: 1px solid #fde68a !important;
	margin-bottom: 16px; font-size: 13px; font-weight: 500;
}
.aris-banner-danger {
	padding: 10px 16px; background: var(--aris-danger-bg) !important;
	color: var(--aris-danger-text) !important; border-radius: var(--aris-radius-sm);
	border: 1px solid #fca5a5 !important;
	margin-bottom: 16px; font-size: 13px; font-weight: 500;
}

/* ── Timer ── */
.aris-timer {
	font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
	padding: 6px 14px; background: var(--aris-primary-light) !important; color: var(--aris-primary) !important;
	border-radius: var(--aris-radius-sm);
	border: 1px solid #c7d2fe;
}
.aris-timer-danger { background: var(--aris-danger-bg) !important; color: var(--aris-danger-text) !important; border-color: #fca5a5 !important; }

/* ── Exam Badges ── */
.aris-diff-easy { background: var(--aris-success-bg) !important; color: var(--aris-success-text) !important; }
.aris-diff-medium { background: var(--aris-warning-bg) !important; color: var(--aris-warning-text) !important; }
.aris-diff-hard { background: var(--aris-danger-bg) !important; color: var(--aris-danger-text) !important; }

/* ── Score Display ── */
.aris-score-display { display: flex; gap: 32px; margin-top: 16px; }
.aris-score-item { text-align: center; }
.aris-score-big { font-size: 36px; font-weight: 700; color: var(--aris-primary); }
.aris-score-medium { font-size: 18px; font-weight: 600; color: var(--aris-text); }
.aris-score-label { font-size: 12px; color: var(--aris-text-light); margin-top: 2px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Checkbox Indicator ── */
.aris-checkbox-indicator {
	display: inline-block; width: 18px; height: 18px;
	border: 2px solid var(--aris-input-border); border-radius: 4px;
	margin-right: 8px; vertical-align: middle; text-align: center;
	line-height: 14px; font-size: 12px; transition: all 0.15s;
	background: #fff !important;
}
.aris-checkbox-indicator.checked {
	border-color: var(--aris-primary) !important; background: var(--aris-primary) !important; color: #fff !important;
}

/* ══════════════════════════════════════════════════════════ */
/* ══ Frappe Override Layer (ID specificity = unbeatable) ══ */
/* ══════════════════════════════════════════════════════════ */

/* ── Form Controls ── */
#main-content .form-control,
#main-content select,
#main-content textarea,
#main-content input[type="text"],
#main-content input[type="email"],
#main-content input[type="password"],
#main-content input[type="tel"],
#main-content input[type="url"],
#main-content input[type="number"] {
	display: block; width: 100%; height: auto !important; padding: 10px 14px;
	font-size: 15px; line-height: 1.4; font-family: var(--aris-font);
	border: 1.5px solid var(--aris-input-border) !important;
	border-radius: var(--aris-radius-sm) !important;
	box-sizing: border-box;
	background: #ffffff !important;
	color: var(--aris-text) !important;
	transition: border-color 0.15s, box-shadow 0.15s;
	outline: none !important;
}
#main-content .form-control:focus,
#main-content select:focus,
#main-content textarea:focus,
#main-content input:focus {
	border-color: var(--aris-primary) !important;
	box-shadow: var(--aris-focus-ring) !important;
	outline: none !important;
}
#main-content label {
	display: block; font-size: 13px; font-weight: 500;
	margin-bottom: 5px; color: var(--aris-text-muted);
	font-family: var(--aris-font);
}

/* ── Checkbox Label ── */
.aris-checkbox-label {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 13px; color: var(--aris-text-muted); cursor: pointer; line-height: 1.5;
}
.aris-checkbox-label input[type="checkbox"] { margin-top: 3px; accent-color: var(--aris-primary); }

/* ── Buttons — MUST beat Frappe with ID prefix ── */
#main-content .btn,
#main-content .btn-sm,
#main-content .btn-block {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--aris-font);
	font-weight: 600;
	border-radius: var(--aris-radius-sm) !important;
	cursor: pointer; text-decoration: none;
	transition: all 0.15s ease; gap: 6px; line-height: 1.4;
}
#main-content .btn { padding: 10px 20px; font-size: 14px; }
#main-content .btn-sm { padding: 7px 14px; font-size: 13px; }
#main-content .btn-block { display: flex !important; width: 100% !important; }

#main-content .btn-primary {
	background: var(--aris-primary) !important;
	background-image: linear-gradient(135deg, var(--aris-primary), #6366f1) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(79,70,229,.3), var(--aris-shadow-sm) !important;
}
#main-content .btn-primary:hover {
	background: var(--aris-primary-hover) !important;
	background-image: linear-gradient(135deg, var(--aris-primary-hover), #4f46e5) !important;
	box-shadow: 0 4px 16px rgba(79,70,229,.35) !important;
	transform: translateY(-1px);
	color: #fff !important;
	text-decoration: none !important;
}
#main-content .btn-primary:active { transform: translateY(0); }
#main-content .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

#main-content .btn-default {
	background: #ffffff !important;
	color: var(--aris-text) !important;
	border: 1.5px solid var(--aris-border) !important;
	box-shadow: var(--aris-shadow-sm) !important;
}
#main-content .btn-default:hover {
	background: var(--aris-bg-hover) !important;
	border-color: var(--aris-input-border) !important;
	color: var(--aris-text) !important;
	text-decoration: none !important;
}

#main-content .btn-danger {
	background: transparent !important;
	color: var(--aris-danger) !important;
	border: 1.5px solid var(--aris-danger) !important;
}
#main-content .btn-danger:hover { background: var(--aris-danger-bg) !important; }

/* ── Alert ── */
#main-content .alert { padding: 12px 16px; border-radius: var(--aris-radius-sm); margin-bottom: 16px; font-size: 14px; }
#main-content .alert-danger {
	background: var(--aris-danger-bg) !important;
	color: var(--aris-danger-text) !important;
	border: 1px solid #fca5a5 !important;
}

/* ── Badge ── */
#main-content .badge {
	display: inline-flex; align-items: center;
	padding: 4px 10px; font-size: 11px; font-weight: 600;
	border-radius: 999px;
	background: var(--aris-primary-light) !important;
	color: var(--aris-primary) !important;
	letter-spacing: 0.02em;
	border: 1px solid #c7d2fe !important;
}

/* ══════════════════════════════════════════════ */
/* ══ Assessment Pages (DISC, Psych, Exam)    ══ */
/* ══════════════════════════════════════════════ */

/* ── Question Card ── */
#main-content .disc-question,
.disc-question {
	background: #ffffff !important;
	border: 1px solid var(--aris-border) !important;
	border-left: 3px solid var(--aris-primary) !important;
	border-radius: var(--aris-radius) !important;
	padding: 28px !important;
	box-shadow: var(--aris-shadow) !important;
	color: var(--aris-text) !important;
}

.disc-options-group { display: flex; flex-direction: column; gap: 8px; }

/* ── Option Buttons — KEY: white bg, colored interaction ── */
#main-content button.disc-option,
#main-content .disc-option,
button.disc-option,
.disc-option {
	display: block !important;
	width: 100% !important;
	padding: 14px 18px !important;
	font-size: 14px !important;
	font-family: var(--aris-font) !important;
	text-align: left !important;
	background: #ffffff !important;
	border: 1.5px solid var(--aris-border) !important;
	border-radius: var(--aris-radius-sm) !important;
	cursor: pointer;
	min-height: 44px;
	color: var(--aris-text) !important;
	transition: all 0.15s ease;
	box-shadow: none !important;
}
#main-content button.disc-option:hover,
#main-content .disc-option:hover,
button.disc-option:hover,
.disc-option:hover {
	border-color: var(--aris-primary) !important;
	background: var(--aris-primary-light) !important;
	box-shadow: 0 0 0 1px var(--aris-primary) !important;
	color: var(--aris-text) !important;
	transform: translateX(2px);
}
#main-content button.disc-option.selected,
#main-content .disc-option.selected,
button.disc-option.selected,
.disc-option.selected {
	background: linear-gradient(135deg, var(--aris-primary), #6366f1) !important;
	color: #fff !important;
	border-color: var(--aris-primary) !important;
	box-shadow: 0 3px 12px rgba(79,70,229,.3) !important;
	transform: translateX(2px);
}
#main-content button.disc-option.disabled-option,
button.disc-option.disabled-option,
.disc-option.disabled-option {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}
#main-content button.disc-option.disabled-option:hover,
button.disc-option.disabled-option:hover,
.disc-option.disabled-option:hover {
	border-color: var(--aris-border) !important;
	background: #ffffff !important;
	box-shadow: none !important;
	transform: none !important;
}

/* ── Progress Bar (assessments) ── */
.disc-progress {
	background: var(--aris-progress-bg);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}
.disc-progress-fill {
	background: linear-gradient(90deg, var(--aris-primary), var(--aris-success)) !important;
	height: 6px;
	border-radius: 999px;
	width: 0%;
	transition: width 0.3s;
}

/* ── Nav Pills — colorful states ── */
#main-content .disc-nav-pill,
.disc-nav-pill {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; font-size: 11px; font-weight: 500;
	border-radius: 999px;
	border: 1.5px solid var(--aris-border) !important;
	background: #ffffff !important;
	color: var(--aris-text-muted) !important;
	cursor: pointer; padding: 0; transition: all 0.15s;
}
#main-content .disc-nav-pill.active,
.disc-nav-pill.active {
	border-color: var(--aris-primary) !important;
	background: var(--aris-primary) !important;
	color: #fff !important;
	box-shadow: 0 0 0 3px var(--aris-primary-glow);
}
#main-content .disc-nav-pill.answered,
.disc-nav-pill.answered {
	background: var(--aris-pill-answered-bg) !important;
	border-color: var(--aris-pill-answered-border) !important;
	color: var(--aris-success) !important;
	font-weight: 600;
}
#main-content .disc-nav-pill.answered.active,
.disc-nav-pill.answered.active {
	background: var(--aris-primary) !important;
	color: #fff !important;
}

/* ── Psychometric Likert ── */
.psych-likert-scale { display: flex; justify-content: center; gap: 16px; margin: 16px 0 8px; }
#main-content .psych-likert-circle,
.psych-likert-circle {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	border: 2px solid var(--aris-border) !important;
	background: #ffffff !important;
	font-size: 16px; font-weight: 500;
	color: var(--aris-text-muted) !important;
	cursor: pointer; transition: all 0.15s ease; padding: 0;
}
#main-content .psych-likert-circle:hover,
.psych-likert-circle:hover {
	border-color: var(--aris-primary) !important;
	background: var(--aris-primary-light) !important;
	color: var(--aris-primary) !important;
}
#main-content .psych-likert-circle.selected,
.psych-likert-circle.selected {
	background: linear-gradient(135deg, var(--aris-primary), #6366f1) !important;
	color: #fff !important;
	border-color: var(--aris-primary) !important;
	box-shadow: 0 0 0 4px var(--aris-primary-glow);
	transform: scale(1.08);
}
.psych-likert-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--aris-text-light); margin-bottom: 4px; }

/* ── Delete Zone — de-emphasized ── */
.aris-dash-delete-zone {
	border: 1.5px dashed #e2e8f0;
	border-radius: var(--aris-radius);
	padding: 20px 24px;
	margin-top: 40px;
	background: transparent !important;
	opacity: 0.7;
	transition: opacity 0.2s;
}
.aris-dash-delete-zone:hover { opacity: 1; }
.aris-dash-delete-zone h4 { color: var(--aris-text-light) !important; font-size: 13px; margin-bottom: 8px; }

/* ── Loading ── */
.aris-dash-loading {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 60px 20px; color: var(--aris-text-light); font-size: 14px; gap: 12px;
}
.aris-dash-loading-spinner {
	width: 32px; height: 32px;
	border: 3px solid var(--aris-border);
	border-top-color: var(--aris-primary);
	border-radius: 50%;
	animation: aris-spin 0.7s linear infinite;
}
@keyframes aris-spin { to { transform: rotate(360deg); } }

/* ── Animations ── */
@keyframes aris-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
.aris-fade-in { animation: aris-fade-up 0.35s ease-out both; }
.aris-fade-in-1 { animation-delay: 0.04s; }
.aris-fade-in-2 { animation-delay: 0.1s; }
.aris-fade-in-3 { animation-delay: 0.16s; }
.aris-fade-in-4 { animation-delay: 0.22s; }
.aris-fade-in-5 { animation-delay: 0.28s; }

/* ── Responsive: Tablet ── */
@media (max-width: 768px) {
	.aris-page, .aris-page-sm, .aris-page-md { margin: 24px auto; }
	#main-content .aris-card, .aris-card { padding: 16px !important; }
	#main-content .disc-question, .disc-question { padding: 16px !important; }
	.aris-score-display { gap: 16px; }
	.aris-dash-hero { padding: 24px 20px 20px !important; }
	.aris-dash-hero h2 { font-size: 22px; }
	.aris-dash-profile { padding: 16px 18px !important; }
}

/* ── Responsive: Mobile ── */
@media (max-width: 480px) {
	.aris-page, .aris-page-sm, .aris-page-md { margin: 16px auto; padding: 0 14px; }
	#main-content .aris-card, .aris-card { padding: 14px !important; border-radius: 10px !important; }
	#main-content .disc-question, .disc-question { padding: 14px !important; }
	.disc-nav-pill { width: 24px; height: 24px; font-size: 10px; }
	.psych-likert-scale { gap: 8px; }
	.psych-likert-circle { width: 44px; height: 44px; font-size: 14px; }
	.aris-score-display { flex-direction: column; gap: 12px; }
	.aris-disc-bar-track { height: 16px; }
	.aris-nav-row { gap: 8px; }
	.aris-dash-hero { padding: 20px 16px 16px !important; border-radius: 12px !important; }
	.aris-dash-hero h2 { font-size: 20px; }
	.aris-dash-profile {
		flex-direction: column !important; align-items: flex-start !important;
		gap: 12px; padding: 14px 16px !important;
	}
	.aris-dash-profile-actions { width: 100%; }
	.aris-dash-profile-actions .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════ */
/* ══ DARK MODE NUCLEAR OVERRIDE                              ══ */
/* ══ Frappe's website.bundle has @media(prefers-color-scheme: ══ */
/* ══ dark) that turns everything dark. We force light mode.  ══ */
/* ══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
	/* Re-assert ALL design tokens — overrides Frappe's dark mode */
	:root {
		--aris-text: #1e293b !important;
		--aris-text-muted: #64748b !important;
		--aris-text-light: #94a3b8 !important;
		--aris-bg: #f8fafc !important;
		--aris-bg-card: #ffffff !important;
		--aris-bg-hover: #f1f5f9 !important;
		--aris-bg-subtle: #eef2ff !important;
		--aris-bg-warm: #faf8ff !important;
		--aris-border: #e2e8f0 !important;
		--aris-border-light: #f1f5f9 !important;
		--aris-input-border: #cbd5e1 !important;
		--aris-progress-bg: #e2e8f0 !important;
		--aris-shadow-sm: 0 1px 2px rgba(0,0,0,.04) !important;
		--aris-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03) !important;
		--aris-shadow-md: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.03) !important;
	}

	/* Override Frappe's dark variables within portal */
	#main-content {
		--primary: var(--aris-primary) !important;
		--primary-color: var(--aris-primary) !important;
		--bg-color: #ffffff !important;
		--fg-color: #ffffff !important;
		--text-color: #1e293b !important;
		--text-muted: #64748b !important;
		--text-light: #94a3b8 !important;
		--heading-color: #1e293b !important;
		--border-color: #e2e8f0 !important;
		--control-bg: #ffffff !important;
		--control-bg-on-gray: #ffffff !important;
		--card-bg: #ffffff !important;
		--subtle-fg: #f8fafc !important;
		--subtle-accent: #eef2ff !important;
		--btn-default-bg: #ffffff !important;
		background: transparent !important;
		color: #1e293b !important;
	}

	/* Force light on ALL key elements within portal */
	#main-content .aris-card,
	#main-content .aris-dash-assessments,
	#main-content .aris-dash-profile,
	#main-content .aris-fieldset,
	#main-content .disc-question {
		background: #ffffff !important;
		color: #1e293b !important;
		border-color: #e2e8f0 !important;
	}

	#main-content .aris-assessment-row {
		background: #faf8ff !important;
		color: #1e293b !important;
	}
	#main-content .aris-assessment-row:hover {
		background: #eef2ff !important;
	}

	/* Buttons — force indigo, not black */
	#main-content .btn-primary,
	#main-content a.btn-primary,
	#main-content button.btn-primary {
		background: var(--aris-primary, #4f46e5) !important;
		background-image: linear-gradient(135deg, var(--aris-primary, #4f46e5), #6366f1) !important;
		color: #fff !important;
		border-color: var(--aris-primary, #4f46e5) !important;
	}
	#main-content .btn-default,
	#main-content a.btn-default,
	#main-content button.btn-default {
		background: #ffffff !important;
		color: #1e293b !important;
		border-color: #e2e8f0 !important;
	}

	/* Form controls — light */
	#main-content .form-control,
	#main-content select,
	#main-content textarea,
	#main-content input {
		background: #ffffff !important;
		color: #1e293b !important;
		border-color: #cbd5e1 !important;
	}
	/* Select dropdown options — force light on macOS dark */
	#main-content select option {
		background: #ffffff !important;
		color: #1e293b !important;
	}

	/* Option buttons — MUST be white in dark mode */
	#main-content button.disc-option,
	#main-content .disc-option {
		background: #ffffff !important;
		color: #1e293b !important;
		border-color: #e2e8f0 !important;
	}
	#main-content button.disc-option:hover,
	#main-content .disc-option:hover {
		background: #eef2ff !important;
		border-color: var(--aris-primary, #4f46e5) !important;
	}
	#main-content button.disc-option.selected,
	#main-content .disc-option.selected {
		background: var(--aris-primary, #4f46e5) !important;
		background-image: linear-gradient(135deg, var(--aris-primary, #4f46e5), #6366f1) !important;
		color: #fff !important;
	}

	/* Nav pills — light */
	#main-content .disc-nav-pill {
		background: #ffffff !important;
		color: #64748b !important;
		border-color: #e2e8f0 !important;
	}
	#main-content .disc-nav-pill.active {
		background: var(--aris-primary, #4f46e5) !important;
		color: #fff !important;
		border-color: var(--aris-primary, #4f46e5) !important;
	}
	#main-content .disc-nav-pill.answered {
		background: #d1fae5 !important;
		color: #059669 !important;
		border-color: #6ee7b7 !important;
	}

	/* Likert circles — light */
	#main-content .psych-likert-circle {
		background: #ffffff !important;
		color: #64748b !important;
		border-color: #e2e8f0 !important;
	}
	#main-content .psych-likert-circle.selected {
		background: var(--aris-primary, #4f46e5) !important;
		color: #fff !important;
	}

	/* Badges */
	#main-content .badge {
		background: #eef2ff !important;
		color: var(--aris-primary, #4f46e5) !important;
		border-color: #c7d2fe !important;
	}
	#main-content .aris-badge-success {
		background: #d1fae5 !important;
		color: #065f46 !important;
		border-color: #a7f3d0 !important;
	}
	#main-content .aris-badge-warning {
		background: #fef3c7 !important;
		color: #92400e !important;
		border-color: #fde68a !important;
	}

	/* Text colors */
	#main-content h1, #main-content h2, #main-content h3, #main-content h4 {
		color: #1e293b !important;
	}
	/* The hero sits on a purple gradient, so it must stay light even though the
	   rule above forces headings dark to keep the portal light on a dark OS.
	   Needs ID-level specificity to outrank #main-content h2. */
	#main-content .aris-dash-hero h2,
	#main-content .aris-dash-hero h3,
	#main-content .aris-dash-hero .aris-dash-greeting {
		color: #ffffff !important;
	}
	#main-content .aris-dash-hero p {
		color: rgba(255, 255, 255, 0.9) !important;
	}
	#main-content p, #main-content span, #main-content label, #main-content div {
		color: inherit;
	}
	#main-content .aris-text-muted { color: #64748b !important; }
	#main-content .aris-text-light { color: #94a3b8 !important; }

	/* Skill tags, dropdowns */
	#main-content .aris-skill-dropdown,
	#main-content .aris-skill-dropdown-item,
	#main-content .aris-skill-dropdown-add {
		background: #ffffff !important;
		color: #1e293b !important;
	}
	#main-content .aris-skill-dropdown-item:hover {
		background: #f1f5f9 !important;
	}

	/* Alert */
	#main-content .alert-danger {
		background: #fee2e2 !important;
		color: #991b1b !important;
	}

	/* Delete zone */
	#main-content .aris-dash-delete-zone {
		border-color: #e2e8f0 !important;
		background: transparent !important;
	}
	#main-content .btn-danger {
		background: transparent !important;
		color: #dc2626 !important;
		border-color: #dc2626 !important;
	}

	/* Offer row */
	#main-content .aris-offer-row {
		border-color: #f1f5f9 !important;
		color: #1e293b !important;
	}

	/* Hero keeps its gradient (already forced with !important) */
}