/*
 * Medix — Neo-Brutalist Desk/Login theme.
 * Source spec: style guide doc shared for medix.posix.mx (yellow #ffe17c,
 * charcoal #171e19, sage #b7c6c2, 2px black borders, 0-blur hard shadows).
 *
 * Scope: only html[data-mx-theme="medix"] (set by medix_theme.js when the
 * hostname is medix.posix.mx), so installing "mejoras" on other POSIX client
 * sites never leaks this look onto them.
 *
 * Lives in the "mejoras" app, not sires_nom024 — this is cosmetic, unrelated
 * to NOM-024 compliance.
 */

html[data-mx-theme="medix"] {
	--mx-yellow: #ffe17c;
	--mx-charcoal: #171e19;
	--mx-sage: #b7c6c2;
	--mx-white: #ffffff;
	--mx-black: #000000;

	--mx-shadow-sm: 3px 3px 0px 0px var(--mx-black);
	--mx-shadow-md: 4px 4px 0px 0px var(--mx-black);
	--mx-shadow-lg: 8px 8px 0px 0px var(--mx-black);
	--mx-border: 2px solid var(--mx-black);

	/* Cabinet Grotesk / Satoshi aren't self-hosted here; fall back to a bold
	   system stack so the theme works with no external font request. */
	--mx-font-heading: "Cabinet Grotesk", "Segoe UI", -apple-system, sans-serif;
	--mx-font-body: "Satoshi", "Segoe UI", -apple-system, sans-serif;

	/* --- wire into Frappe's own theme variables --- */
	--brand-color: var(--mx-black);
	--primary: var(--mx-black);
	--primary-color: var(--mx-black);
	--btn-primary: var(--mx-black);
	--btn-default-bg: var(--mx-white);
	--btn-default-hover-bg: var(--mx-sage);
	--btn-ghost-hover-bg: var(--mx-sage);
	--border-primary: var(--mx-black);

	--navbar-bg: var(--mx-yellow);
	--card-shadow: var(--mx-shadow-md);
	--modal-shadow: var(--mx-shadow-lg);
	--btn-shadow: var(--mx-shadow-sm);

	--scrollbar-thumb-color: var(--mx-charcoal);
	--scrollbar-track-color: var(--mx-sage);
	--highlight-color: var(--mx-yellow);
	--sidebar-select-color: var(--mx-yellow);

	/* desk/sidebar.scss */
	--surface-menu-bar: var(--mx-charcoal);
	--sidebar-border-color: var(--mx-black);
	--sidebar-hover-color: var(--mx-sage);
	--sidebar-active-color: var(--mx-yellow);
	--divider-color: var(--mx-black);
}

/* ---------- typography ---------- */

html[data-mx-theme="medix"] body {
	font-family: var(--mx-font-body);
}

html[data-mx-theme="medix"] h1,
html[data-mx-theme="medix"] h2,
html[data-mx-theme="medix"] h3,
html[data-mx-theme="medix"] h4,
html[data-mx-theme="medix"] .navbar-brand,
html[data-mx-theme="medix"] .page-title,
html[data-mx-theme="medix"] .title-text,
html[data-mx-theme="medix"] .modal-title {
	font-family: var(--mx-font-heading);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* ---------- navbar ---------- */

html[data-mx-theme="medix"] .navbar {
	background-color: var(--mx-yellow) !important;
	border-bottom: var(--mx-border);
	background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
	background-size: 32px 32px;
	--icon-stroke: var(--mx-black);
}

html[data-mx-theme="medix"] .navbar,
html[data-mx-theme="medix"] .navbar a,
html[data-mx-theme="medix"] .navbar .navbar-brand,
html[data-mx-theme="medix"] .navbar .octicon {
	color: var(--mx-black) !important;
}

/* ---------- app-switcher rail (dark bar, echoes the spec's social-proof strip) ---------- */

html[data-mx-theme="medix"] .body-sidebar {
	background: var(--mx-charcoal) !important;
	border-right: var(--mx-border);
	color: var(--mx-white);
}

html[data-mx-theme="medix"] .body-sidebar .active-sidebar,
html[data-mx-theme="medix"] .body-sidebar .hover {
	background-color: var(--mx-yellow) !important;
	color: var(--mx-charcoal) !important;
	border-radius: 6px;
}

/* ---------- buttons: hard shadow that "presses" on hover ---------- */

html[data-mx-theme="medix"] .btn {
	border: var(--mx-border) !important;
	border-radius: 8px;
	box-shadow: var(--mx-shadow-sm);
	font-family: var(--mx-font-body);
	font-weight: 600;
	transition:
		transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		box-shadow 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

html[data-mx-theme="medix"] .btn:hover,
html[data-mx-theme="medix"] .btn:focus {
	transform: translate(2px, 2px);
	box-shadow: 0px 0px 0px 0px var(--mx-black);
}

html[data-mx-theme="medix"] .btn:active {
	transform: translate(3px, 3px);
}

html[data-mx-theme="medix"] .btn-primary {
	color: var(--mx-white) !important;
}

/* ---------- cards, forms, modals ---------- */

html[data-mx-theme="medix"] .frappe-card,
html[data-mx-theme="medix"] .widget,
html[data-mx-theme="medix"] .form-section.card-section,
html[data-mx-theme="medix"] .page-card {
	border: var(--mx-border);
	border-radius: 10px;
	box-shadow: var(--mx-shadow-md);
}

html[data-mx-theme="medix"] .modal-content {
	border: var(--mx-border);
	border-radius: 10px;
	box-shadow: var(--mx-shadow-lg);
}

html[data-mx-theme="medix"] .indicator-pill {
	border: 1px solid var(--mx-black);
}

/* ---------- login page ---------- */

html[data-mx-theme="medix"] .page-card {
	background: var(--mx-white);
}

html[data-mx-theme="medix"] section.for-login .page-card-head,
html[data-mx-theme="medix"] section.for-signup .page-card-head,
html[data-mx-theme="medix"] section.for-forgot .page-card-head {
	background-color: var(--mx-yellow);
	background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
	background-size: 32px 32px;
	border-bottom: var(--mx-border);
	border-radius: 8px 8px 0 0;
}

html[data-mx-theme="medix"] body[data-path="login"] .page-content-wrapper {
	background-color: var(--mx-sage);
}