/*
 * SSSIHMS website skin.  Loaded via web_include_css; reaches the website
 * templates: /login, /update-password, portal pages, web forms, Web Pages.
 * It does NOT reach the desk (/app); that is desk.css via app_include_css.
 *
 * Written against the v16.31.0 variable list in
 * trust-compliance-demo-docs/frappe-v16-reference/css-variables-v16.31.0.txt.
 * Variables first, selectors only where Frappe writes literals: the login
 * bundle sets the sign-in button to `background: var(--gray-900)` on a
 * four-class selector, and the website navbar/footer are `background:
 * white` / literal borders.  Each selector block below says why.
 *
 * Dark mode is Frappe's own; light-only values are gated on
 * html:not([data-theme="dark"]).  Palette: SSSIHMS brand skill.
 */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;600;700&family=Roboto+Mono:wght@400&display=swap");

/* ================================================================ tokens */

:root {
	--sss-blue-deep: #003366;
	--sss-orange: #e07b39;
	--sss-orange-hover: #c66a2c;
	--sss-white: #ffffff;
	--sss-gold: #c8a84b;
	--sss-blue-mid: #1a5276;
	--sss-blue-light: #d6e8f7;
	--sss-grey-dark: #2c2c2c;
	--sss-grey-mid: #6c6c6c;
	--sss-grey-light: #f4f4f4;
	--sss-success: #1e8449;
	--sss-warning: #d4ac0d;
	--sss-warning-text: #8a6d00;
	--sss-danger: #c0392b;

	--sss-font-display: "Playfair Display", Georgia, serif;
	--sss-font-body: "Lato", Arial, sans-serif;
	--sss-font-mono: "Roboto Mono", "Courier New", monospace;
}

/* ====================================================== variables, both themes */

:root {
	--primary-color: var(--sss-orange);
	--btn-primary: var(--sss-orange);
	--font-stack: var(--sss-font-body);
	--focus-default: 0 0 0 2px var(--sss-orange);
}

/* ====================================================== variables, light only */

html:not([data-theme="dark"]) {
	--bg-color: var(--sss-grey-light);
	--card-bg: var(--sss-white);
	--fg-color: var(--sss-white);
	--heading-color: var(--sss-blue-deep);
	--text-color: var(--sss-grey-dark);
	--text-muted: var(--sss-grey-mid);
	--ink-blue-link: var(--sss-blue-mid);
	--border-color: var(--sss-blue-light);
	--navbar-bg: var(--sss-blue-deep);
	--brand-color: var(--sss-white);
	--alert-bg-success: #e5f3ea;
	--alert-text-success: var(--sss-success);
	--alert-bg-warning: #faf3d3;
	--alert-text-warning: var(--sss-warning-text);
	--alert-bg-danger: #f7e1df;
	--alert-text-danger: var(--sss-danger);
	--alert-bg-info: var(--sss-blue-light);
	--alert-text-info: var(--sss-blue-deep);
}

/* ================================================== selector overrides */

/* Display typeface.  No heading font variable exists. */
h1,
h2,
.page-card-head h4 {
	font-family: var(--sss-font-display);
	font-weight: 700;
}

/* ------------------------------------------------------------ login card */

/* Card frame.  Frappe's .page-card reads --bg-color for its ground, which
 * is now grey-light for the page; the card itself needs to stay white with
 * a deep-blue top rule.  Desktop only: the mobile rule stretches the card
 * edge to edge and removes its border, which is left as Frappe has it. */
@media (min-width: 576px) {
	html:not([data-theme="dark"]) .for-login .page-card,
	html:not([data-theme="dark"]) .for-forgot .page-card,
	html:not([data-theme="dark"]) .for-login-with-email-link .page-card,
	html:not([data-theme="dark"]) .for-signup .page-card {
		background-color: var(--sss-white);
		border: 1px solid var(--sss-blue-light);
		border-top: 4px solid var(--sss-blue-deep);
		box-shadow: 0 2px 8px rgba(0, 51, 102, 0.08);
	}
}

/* Logo.  Frappe caps img.app-logo at 32px; the emblem needs room.  Which
 * image is shown is Website Settings > App Logo, not CSS (README step 5). */
.for-login .page-card-head img.app-logo,
.for-forgot .page-card-head img.app-logo,
.for-login-with-email-link .page-card-head img.app-logo,
.for-signup .page-card-head img.app-logo {
	max-height: 72px;
	width: auto;
	margin: 0 auto;
}

.for-login .page-card-head,
.for-forgot .page-card-head,
.for-login-with-email-link .page-card-head,
.for-signup .page-card-head {
	align-items: center;
	text-align: center;
	gap: 12px;
}

/* Institution name under the emblem: the brand lockup.  Frappe renders no
 * element for it, so it is a pseudo-element on the flex column, ordered
 * between the logo (0) and the "Sign In" text (2).  It is decorative and
 * does not replace the heading. */
.for-login .page-card-head::before,
.for-forgot .page-card-head::before,
.for-login-with-email-link .page-card-head::before {
	content: "Sri Sathya Sai Institute of Higher Medical Sciences";
	order: 1;
	width: 100%;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sss-gold);
	font-family: var(--sss-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.2;
	color: var(--heading-color);
}

.for-login .page-card-head img.app-logo,
.for-forgot .page-card-head img.app-logo,
.for-login-with-email-link .page-card-head img.app-logo {
	order: 0;
}

.for-login .page-card-head .page-card-head-text,
.for-forgot .page-card-head .page-card-head-text,
.for-login-with-email-link .page-card-head .page-card-head-text {
	order: 2;
	align-items: center;
}

/* Field labels and inputs.  The login bundle sets label colour to
 * --ink-gray-5 and input border to --outline-gray-2, both Frappe ramp
 * values with no semantic alias to set. */
html:not([data-theme="dark"]) .for-login .page-card .page-card-body .form-label,
html:not([data-theme="dark"]) .for-forgot .page-card .page-card-body .form-label,
html:not([data-theme="dark"]) .for-login-with-email-link .page-card .page-card-body .form-label {
	color: var(--sss-grey-dark);
	font-weight: 600;
}

html:not([data-theme="dark"]) .for-login .page-card .page-card-body input[type="text"],
html:not([data-theme="dark"]) .for-login .page-card .page-card-body input[type="email"],
html:not([data-theme="dark"]) .for-login .page-card .page-card-body input[type="password"],
html:not([data-theme="dark"]) .for-forgot .page-card .page-card-body input[type="email"],
html:not([data-theme="dark"]) .for-login-with-email-link .page-card .page-card-body input[type="email"] {
	background-color: var(--sss-white);
	border: 1px solid #b9cfe4; /* --sss-blue-light one step darker so the edge shows on white */
	color: var(--sss-grey-dark);
}

html:not([data-theme="dark"]) .for-login .page-card .page-card-body input:focus,
html:not([data-theme="dark"]) .for-forgot .page-card .page-card-body input:focus,
html:not([data-theme="dark"]) .for-login-with-email-link .page-card .page-card-body input:focus {
	border-color: var(--sss-blue-mid);
	box-shadow: var(--focus-default);
	outline: none;
}

html:not([data-theme="dark"]) .for-login .page-card .page-card-body .field-icon,
html:not([data-theme="dark"]) .for-login .page-card .page-card-body .toggle-password {
	fill: var(--sss-blue-mid);
}

/* Sign-in button.  login.bundle writes `background: var(--gray-900)` on
 * `.for-login .page-card .page-card-actions .btn-login` and loads AFTER this
 * sheet, so an equal-specificity (0,4,0) match loses on source order -- that
 * was verified on a live v16.31 login page, where the button stayed #171717.
 * The leading `html` lifts these to (0,4,1) and wins without !important.
 *
 * The page prefixes and the `.btn-login` / `.btn-ldap-login` class pair are
 * copied from the bundle's own selector list: Frappe reuses `.btn-login` on
 * the forgot, signup and email-link pages too.  There is no `.btn-forgot`. */
html .for-login .page-card .page-card-actions .btn-login,
html .for-login .page-card .page-card-actions .btn-ldap-login,
html .for-forgot .page-card .page-card-actions .btn-login,
html .for-forgot .page-card .page-card-actions .btn-ldap-login,
html .for-login-with-email-link .page-card .page-card-actions .btn-login,
html .for-login-with-email-link .page-card .page-card-actions .btn-ldap-login,
html .for-signup .page-card .page-card-actions .btn-login,
html .for-signup .page-card .page-card-actions .btn-ldap-login,
html .for-email-login .page-card .page-card-actions .btn-login,
html .for-email-login .page-card .page-card-actions .btn-ldap-login,
html .for-reset-password .page-card .page-card-actions .btn-login,
html .for-reset-password .page-card .page-card-actions .btn-ldap-login {
	background: var(--sss-orange);
	color: var(--sss-white);
	font-weight: 600;
	letter-spacing: 0.02em;
	border: none;
}

html .for-login .page-card .page-card-actions .btn-login:hover,
html .for-login .page-card .page-card-actions .btn-ldap-login:hover,
html .for-forgot .page-card .page-card-actions .btn-login:hover,
html .for-forgot .page-card .page-card-actions .btn-ldap-login:hover,
html .for-login-with-email-link .page-card .page-card-actions .btn-login:hover,
html .for-login-with-email-link .page-card .page-card-actions .btn-ldap-login:hover,
html .for-signup .page-card .page-card-actions .btn-login:hover,
html .for-signup .page-card .page-card-actions .btn-ldap-login:hover,
html .for-email-login .page-card .page-card-actions .btn-login:hover,
html .for-email-login .page-card .page-card-actions .btn-ldap-login:hover,
html .for-reset-password .page-card .page-card-actions .btn-login:hover,
html .for-reset-password .page-card .page-card-actions .btn-ldap-login:hover,
html .for-login .page-card .page-card-actions .btn-login:focus,
html .for-login .page-card .page-card-actions .btn-ldap-login:focus,
html .for-forgot .page-card .page-card-actions .btn-login:focus,
html .for-forgot .page-card .page-card-actions .btn-ldap-login:focus,
html .for-login-with-email-link .page-card .page-card-actions .btn-login:focus,
html .for-login-with-email-link .page-card .page-card-actions .btn-ldap-login:focus,
html .for-signup .page-card .page-card-actions .btn-login:focus,
html .for-signup .page-card .page-card-actions .btn-ldap-login:focus,
html .for-email-login .page-card .page-card-actions .btn-login:focus,
html .for-email-login .page-card .page-card-actions .btn-ldap-login:focus,
html .for-reset-password .page-card .page-card-actions .btn-login:focus,
html .for-reset-password .page-card .page-card-actions .btn-ldap-login:focus {
	background: var(--sss-orange-hover);
	color: var(--sss-white);
}

html .for-login .page-card .page-card-actions .btn-login:disabled,
html .for-login .page-card .page-card-actions .btn-ldap-login:disabled,
html .for-forgot .page-card .page-card-actions .btn-login:disabled,
html .for-forgot .page-card .page-card-actions .btn-ldap-login:disabled,
html .for-login-with-email-link .page-card .page-card-actions .btn-login:disabled,
html .for-login-with-email-link .page-card .page-card-actions .btn-ldap-login:disabled,
html .for-signup .page-card .page-card-actions .btn-login:disabled,
html .for-signup .page-card .page-card-actions .btn-ldap-login:disabled,
html .for-email-login .page-card .page-card-actions .btn-login:disabled,
html .for-email-login .page-card .page-card-actions .btn-ldap-login:disabled,
html .for-reset-password .page-card .page-card-actions .btn-login:disabled,
html .for-reset-password .page-card .page-card-actions .btn-ldap-login:disabled {
	background: var(--sss-orange);
	opacity: 0.6;
}

html .for-login .page-card .page-card-actions .btn-login:focus-visible,
html .for-login .page-card .page-card-actions .btn-ldap-login:focus-visible,
html .for-forgot .page-card .page-card-actions .btn-login:focus-visible,
html .for-forgot .page-card .page-card-actions .btn-ldap-login:focus-visible,
html .for-login-with-email-link .page-card .page-card-actions .btn-login:focus-visible,
html .for-login-with-email-link .page-card .page-card-actions .btn-ldap-login:focus-visible,
html .for-signup .page-card .page-card-actions .btn-login:focus-visible,
html .for-signup .page-card .page-card-actions .btn-ldap-login:focus-visible,
html .for-email-login .page-card .page-card-actions .btn-login:focus-visible,
html .for-email-login .page-card .page-card-actions .btn-ldap-login:focus-visible,
html .for-reset-password .page-card .page-card-actions .btn-login:focus-visible,
html .for-reset-password .page-card .page-card-actions .btn-ldap-login:focus-visible {
	box-shadow: 0 0 0 2px var(--sss-white), 0 0 0 4px var(--sss-orange);
}

/* Secondary login options (email link, LDAP list, social).  Literal
 * --gray-100 / --gray-800 in the bundle. */
html:not([data-theme="dark"]) .for-login .page-card .page-card-actions .btn-login-option {
	background: var(--sss-grey-light);
	color: var(--sss-blue-deep);
}

html:not([data-theme="dark"]) .for-login .page-card .page-card-actions .btn-login-option:hover {
	background: var(--sss-blue-light);
}

/* Forgot-password and footer links: literal --ink-gray-5/6 in the bundle. */
html:not([data-theme="dark"]) .for-login .forgot-password-message > *,
html:not([data-theme="dark"]) .for-login .sign-up-message a,
html:not([data-theme="dark"]) .for-forgot .sign-up-message a {
	color: var(--sss-blue-mid);
}

/* Error and success banners: literal --red-50 / --surface-green-1. */
html:not([data-theme="dark"]) .for-login .page-card .page-card-body .login-error-banner {
	background-color: var(--alert-bg-danger);
	color: var(--alert-text-danger);
}

html:not([data-theme="dark"]) .for-login .page-card .page-card-body .login-error-banner svg {
	fill: var(--alert-text-danger);
}

html:not([data-theme="dark"]) .for-login .page-card .page-card-body .login-success-banner {
	background-color: var(--alert-bg-success);
	color: var(--alert-text-success);
}

/* ------------------------------------------------------------ portal shell */

/* Website navbar.  website.bundle writes `.navbar-light { background:
 * white; border-bottom: 1px solid #e2e2e2 }` and link colours as literals;
 * --navbar-bg is not read by the website navbar. */
html:not([data-theme="dark"]) .navbar-light {
	background: var(--sss-blue-deep);
	border-bottom: 2px solid var(--sss-gold);
}

html:not([data-theme="dark"]) .navbar-light .navbar-brand,
html:not([data-theme="dark"]) .navbar-light .navbar-nav .nav-link,
html:not([data-theme="dark"]) .navbar-light .navbar-nav .nav-link:hover,
html:not([data-theme="dark"]) .navbar-light .navbar-nav .nav-link:focus {
	color: var(--sss-white);
}

html:not([data-theme="dark"]) .navbar-light .navbar-toggler .icon,
html:not([data-theme="dark"]) .navbar-light .navbar-toggler .es-icon {
	stroke: var(--sss-white);
}

/* Website footer.  Reads --fg-color for its ground (now white) but its
 * border is a literal #e2e2e2; only the rule colour is changed. */
html:not([data-theme="dark"]) .web-footer {
	border-top: 2px solid var(--sss-gold);
}

/* Website primary button (web forms, portal actions).  website.bundle
 * writes `.btn-primary { background-color: #171717 }` as a literal. */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active {
	color: var(--sss-white);
	background-color: var(--sss-orange);
	border-color: var(--sss-orange);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
	color: var(--sss-white);
	background-color: var(--sss-orange-hover);
	border-color: var(--sss-orange-hover);
	box-shadow: none;
}