/*
 * Medix — Neo-Brutalist Desk/Login theme.
 * 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.
 */

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);

	--mx-font-heading: "Cabinet Grotesk", "Segoe UI", -apple-system, sans-serif;
	--mx-font-body: "Satoshi", "Segoe UI", -apple-system, sans-serif;

	--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);

	--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);
}

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;
}

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;
}

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;
}

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;
}

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);
}

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);
}