/* ==========================================================================
   Asturex Recruit — brand theme for the Frappe desk and web (login, portals)
   Mirrors the asturex-it.com design system: navy / cobalt / cyan, Archivo +
   Public Sans + JetBrains Mono, square-ish 3px corners.
   Loaded via app_include_css (desk) and web_include_css (login + portals).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root,
[data-theme="light"] {
	/* Asturex palette */
	--asx-navy: #002245;
	--asx-navy-2: #0a3157;
	--asx-navy-3: #16456f;
	--asx-blue: #0058a0;
	--asx-blue-dark: #004681;
	--asx-blue-soft: #4e9bd8;
	--asx-blue-wash: #e8f1f9;
	--asx-cyan: #0fa8bc;
	--asx-cyan-wash: #e4f5f8;
	--asx-ochre: #e09a2e;
	--asx-mist: #eef2f6;
	--asx-line: #d9e1e9;
	--asx-slate: #506878;
	--asx-slate-2: #8fa3b5;

	/* Type */
	--font-stack: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--asx-font-display: "Archivo", "Helvetica Neue", sans-serif;
	--asx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Neutrals: navy-tinted instead of pure grey */
	--gray-900: var(--asx-navy);
	--gray-800: #16324f;
	--gray-700: #2b4660;
	--gray-600: var(--asx-slate);
	--gray-500: #6b7f90;
	--gray-400: var(--asx-slate-2);
	--gray-300: #c3cfda;
	--gray-200: var(--asx-line);
	--gray-100: #e6ecf2;
	--gray-50: #f3f6f9;
	--text-color: var(--gray-800);
	--heading-color: var(--asx-navy);

	/* Brand / primary */
	--primary: var(--asx-blue);
	--primary-color: var(--asx-blue);
	--brand-color: var(--asx-blue);
	--btn-primary: var(--asx-blue);
	--blue-500: var(--asx-blue);
	--blue-600: var(--asx-blue);
	--blue-700: var(--asx-blue-dark);

	/* Surfaces */
	--bg-color: var(--asx-mist);
	--fg-color: #ffffff;
	--card-bg: #ffffff;
	--navbar-bg: #ffffff;
	--subtle-accent: #f3f6f9;
	--border-color: var(--asx-line);
	--dark-border-color: #c3cfda;
	--sidebar-select-color: var(--asx-blue-wash);
	--control-bg: #f3f6f9;
	--control-bg-on-gray: #e6ecf2;

	/* Shape: the website uses 3px corners */
	--border-radius-tiny: 2px;
	--border-radius-sm: 3px;
	--border-radius: 3px;
	--border-radius-md: 3px;
	--border-radius-lg: 4px;
	--border-radius-xl: 6px;
	--border-radius-2xl: 8px;
}

/* ---------------------------------------------------------------- typography */
h1, h2, h3, h4,
.title-text,
.page-title .title-text,
.widget-title,
.section-head,
.modal-title,
.page-card-head h4 {
	font-family: var(--asx-font-display);
	letter-spacing: -0.01em;
}
h1, h2, .title-text, .page-title .title-text { font-weight: 700; }
.number-card .number, .stat-value, .indicator-pill, code, .code, pre {
	font-family: var(--asx-font-mono);
}

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: var(--border-radius); }
.btn-primary,
.btn-primary-light { font-weight: 600; }
.btn-primary {
	background: var(--asx-blue);
	border-color: var(--asx-blue);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background: var(--asx-blue-dark);
	border-color: var(--asx-blue-dark);
	color: #fff;
}
a { color: var(--asx-blue); }
a:hover { color: var(--asx-blue-dark); }

/* ---------------------------------------------------------------- desk chrome */
.navbar {
	border-bottom: 3px solid var(--asx-blue);
	box-shadow: 0 1px 0 rgba(0, 34, 69, 0.04);
}
.navbar .navbar-brand .app-logo,
.navbar .app-logo { max-height: 28px; height: 28px; width: auto; }

.standard-sidebar-item.selected,
.sidebar-item.selected,
.desk-sidebar-item.selected,
.list-sidebar .selected {
	background: var(--asx-blue-wash);
	border-left: 3px solid var(--asx-blue);
	color: var(--asx-navy);
}

.form-control:focus,
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus {
	border-color: var(--asx-blue);
	box-shadow: 0 0 0 1px var(--asx-blue);
}

.indicator-pill.blue, .indicator.blue::before { --indicator-color: var(--asx-blue); }
.frappe-card, .widget, .form-layout .form-page, .layout-main-section {
	border-color: var(--asx-line);
}
.page-head { border-bottom: 1px solid var(--asx-line); }

/* ---------------------------------------------------------------- login / web pages */
body[data-path="login"],
body[data-path="update-password"],
body[data-path="signup"] {
	background:
		radial-gradient(1200px 500px at 85% -10%, rgba(15, 168, 188, 0.22), transparent 60%),
		linear-gradient(160deg, var(--asx-navy) 0%, var(--asx-navy-2) 55%, var(--asx-navy-3) 100%);
	min-height: 100vh;
}
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card,
body[data-path="signup"] .page-card {
	background: #fff;
	border: none;
	border-top: 4px solid var(--asx-blue);
	border-radius: var(--border-radius);
	box-shadow: 0 18px 50px rgba(0, 20, 40, 0.35);
}
.page-card .app-logo,
.login-content .app-logo {
	height: 46px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.page-card-head h4 {
	font-family: var(--asx-font-display);
	font-weight: 700;
	color: var(--asx-navy);
}
.page-card .btn-primary,
.page-card .btn-login { background: var(--asx-blue); border-color: var(--asx-blue); }
.page-card .btn-primary:hover { background: var(--asx-blue-dark); border-color: var(--asx-blue-dark); }
.login-content .btn-login-option,
.login-content .btn-default { border-radius: var(--border-radius); }

/* Frappe / ERPNext attribution in the footer of web pages */
.web-footer .footer-powered, .footer-powered { display: none; }

/* Login buttons: Frappe styles these with its own near-black; use the brand cobalt */
body[data-path="login"] .page-card .btn-login:not(.btn-login-option),
body[data-path="login"] .page-card .btn-primary,
body[data-path="update-password"] .page-card .btn-primary,
body[data-path="signup"] .page-card .btn-primary {
	background: var(--asx-blue);
	border-color: var(--asx-blue);
	color: #fff;
	font-weight: 600;
}
body[data-path="login"] .page-card .btn-login:not(.btn-login-option):hover,
body[data-path="login"] .page-card .btn-primary:hover {
	background: var(--asx-blue-dark);
	border-color: var(--asx-blue-dark);
}
.page-card .form-control:focus { border-color: var(--asx-blue); box-shadow: 0 0 0 1px var(--asx-blue); }