/*
 * PwC UI Customizations — Social Responsibility Hub
 *
 * Layered on top of srh_tokens.css (variables) and srh_status.css (utility
 * status classes). This file applies the PwC Core Library Figma spec to
 * Frappe's actual UI primitives — typography, buttons, inputs, checkboxes,
 * login page, list/form chrome.
 *
 * Cascade order (set in hooks.py):
 *   srh_tokens.css  → variable declarations
 *   srh_typography.css → @font-face blocks
 *   srh_status.css  → status utility classes
 *   pwc_ui.css      → component overrides (THIS file)
 *   srh_footer.css  → footer + policy-link strip
 *
 * Spec sources:
 *   - Image 19 (buttons): primary peach + dark text, secondary outline, tertiary text.
 *     Hover → Orange 500, Pressed → Orange 300.
 *   - Image 20 (inputs + checkboxes): 1px border, 2px radius, Orange focus.
 *   - Image 21 (login): same component system, larger type for welcome.
 *
 * Specificity note: Frappe's bundled CSS loads first. Where Frappe sets
 * properties on broader selectors than ours, we either match selector depth
 * or use `!important`. `!important` is reserved for properties that Frappe
 * sets inline via JS (radius on .btn, color on .form-control:focus, etc.).
 */

/* =========================================================================
 * 1. Legacy: workspace logo hiding + sidebar ellipsis (preserved verbatim
 *    from pre-branding pwc_ui.css — these don't relate to the brand overhaul
 *    but must not regress).
 * ========================================================================= */

/* 1.1 Hide the big app logo banner in workspace content area */
.workspace-container .desk-sidebar + .layout-main .codex-editor .ce-block:first-child img[src*="logo"],
.workspace-container .layout-main img.app-logo,
img.workspace-app-logo,
.workspace-page .app-logo-area,
.page-container .layout-main-section img[src*="mGrant"][src*="logo"],
.page-container .layout-main-section img[src*="PwC"][src*="Logo"],
.desk-page .layout-main img[src*="logo.png"]:not(.navbar-brand img) {
	display: none !important;
}

/* 1.2 Sidebar app name — prevent overflow, show ellipsis */
.sidebar-menu .app-switcher .app-name,
.sidebar-menu .sidebar-item-label,
.app-sidebar-toggle .sidebar-item-label,
.sidebar-toggle-placeholder .sidebar-label,
#sidebar-app-text,
.desk-sidebar .sidebar-menu > li:first-child .sidebar-item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 140px;
}

/* 1.3 Override the mGrant sidebar icon with SRH icon */
.sidebar-menu .app-logo,
.app-sidebar .app-logo {
	content: url("/assets/pwc/images/srh-icon.svg");
	width: 24px;
	height: 24px;
}

/* =========================================================================
 * 2. Typography — Helvetica Neue everywhere.
 *    Frappe v15 defaults to Inter via --font-stack on :root. We override
 *    that variable AND apply font-family directly on the high-traffic
 *    surfaces (body, controls, buttons) for resilience against bench
 *    builds that re-inject Inter.
 * ========================================================================= */

:root {
	--font-stack: var(--srh-font-sans);
	--font-family: var(--srh-font-sans);
}

body,
.layout-main,
.layout-main-section,
.navbar,
.modal,
.frappe-control,
.form-control,
.input-with-feedback,
.btn,
.list-row,
.list-row-col,
.list-subject,
.page-head,
.page-title,
.sidebar-label,
.section-head,
.tab-content,
input,
textarea,
select,
button {
	font-family: var(--srh-font-sans) !important;
}

/* Headings — Medium weight, tightened line-height, Grey 1000 text */
h1, h2, h3, h4, h5, h6,
.page-title,
.section-head,
.modal-title {
	font-family: var(--srh-font-sans);
	font-weight: 500;
	color: var(--srh-grey-1000);
	letter-spacing: -0.01em;
}

/* =========================================================================
 * 3. Radius — sharper than Frappe defaults.
 *    Frappe v15 uses --border-radius (6px-ish) as a global var on many
 *    controls. We push it down to 2px (--srh-radius-xs) so the sharper
 *    PwC Core Library aesthetic cascades naturally to controls that read
 *    the variable. Explicit per-component overrides below catch anything
 *    that hard-codes border-radius inline.
 * ========================================================================= */

:root {
	--border-radius: var(--srh-radius-xs);
	--border-radius-sm: var(--srh-radius-xs);
	--border-radius-md: var(--srh-radius-sm);
	--border-radius-lg: var(--srh-radius-sm);
}

/* =========================================================================
 * 4. Buttons — Image 19 spec.
 *    Primary: peachy bg (Orange 300) + dark text (Orange 1000) + arrow accent.
 *    Hover: shift to Orange 500 bg.
 *    Pressed: Orange 300 bg (same as enabled per Figma; visual depression
 *             comes from active:translateY rather than colour shift).
 *
 *    Secondary: white bg, Orange 1000 (1px) border + Orange 1000 text.
 *    Hover: invert to Orange 500 bg + white text.
 *
 *    Tertiary / link: no chrome, Orange 1000 text, Orange 500 on hover.
 *
 *    All radii 2px. Frappe ships .btn at ~6px radius via inline style on
 *    .standard-form so !important is required.
 * ========================================================================= */

.btn,
.btn.btn-default,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-danger,
.btn-modal-primary {
	font-family: var(--srh-font-sans) !important;
	font-weight: 500;
	border-radius: var(--srh-radius-xs) !important;
	padding: 6px 14px;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
	letter-spacing: 0;
}

.btn:active {
	transform: translateY(1px);
}

/* 4.1 Primary CTA */
.btn-primary,
.btn.btn-primary,
.btn-modal-primary {
	background-color: var(--srh-brand-300) !important;
	color: var(--srh-grey-1000) !important;
	border: 1px solid var(--srh-brand-300) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-modal-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
	background-color: var(--srh-brand-500) !important;
	color: var(--srh-grey-1000) !important;
	border-color: var(--srh-brand-500) !important;
}

.btn-primary:active,
.btn.btn-primary:active {
	background-color: var(--srh-brand-300) !important;
	color: var(--srh-grey-1000) !important;
	border-color: var(--srh-brand-400) !important;
}

.btn-primary:disabled,
.btn.btn-primary:disabled,
.btn-primary.disabled {
	background-color: var(--srh-brand-100) !important;
	color: var(--srh-grey-700) !important;
	border-color: var(--srh-brand-100) !important;
}

/* 4.2 Secondary (Frappe ships .btn-secondary and .btn-default as the
 * outline-style siblings — apply identical styling so callers don't
 * have to pick) */
.btn-secondary,
.btn.btn-secondary,
.btn-default:not(.btn-primary):not(.btn-danger):not(.btn-link),
.btn.btn-default:not(.btn-primary):not(.btn-danger):not(.btn-link) {
	background-color: #FFFFFF !important;
	color: var(--srh-grey-1000) !important;
	border: 1px solid var(--srh-grey-1000) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-default:not(.btn-primary):not(.btn-danger):not(.btn-link):hover {
	background-color: var(--srh-brand-500) !important;
	color: #FFFFFF !important;
	border-color: var(--srh-brand-500) !important;
}

.btn-secondary:active,
.btn.btn-secondary:active,
.btn-default:not(.btn-primary):not(.btn-danger):not(.btn-link):active {
	background-color: var(--srh-brand-300) !important;
	color: var(--srh-grey-1000) !important;
	border-color: var(--srh-brand-400) !important;
}

/* 4.3 Tertiary / link buttons — text-only, no chrome */
.btn-link,
.btn.btn-link {
	color: var(--srh-grey-1000) !important;
	background: transparent !important;
	border: none !important;
	padding: 6px 8px;
	text-decoration: none;
}

.btn-link:hover,
.btn.btn-link:hover {
	color: var(--srh-brand-500) !important;
	background: transparent !important;
	text-decoration: none;
}

.btn-link:active,
.btn.btn-link:active {
	color: var(--srh-grey-1000) !important;
}

/* 4.4 Danger — destructive uses status error red, sharp radius preserved */
.btn-danger,
.btn.btn-danger {
	background-color: var(--srh-error-600) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--srh-error-600) !important;
}

.btn-danger:hover,
.btn.btn-danger:hover {
	background-color: #B71C1C !important;
	border-color: #B71C1C !important;
	color: #FFFFFF !important;
}

/* 4.5 Icon-only buttons in toolbars (e.g. list view "Add Row" +)
 * keep sharp radius and inherit font */
.btn-toolbar .btn,
.frappe-control .btn,
.standard-actions .btn {
	border-radius: var(--srh-radius-xs) !important;
}

/* =========================================================================
 * 5. Inputs — Image 20 spec.
 *    Label above (Frappe default). 1px Grey 300 border. 2px radius.
 *    Hover: Orange 300 border. Focus: Orange 500 border, no glow.
 *    Disabled: Grey 50 bg.
 * ========================================================================= */

.form-control,
.input-with-feedback,
.like-disabled-input,
input[type="text"]:not(.search-input),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea.form-control,
select.form-control {
	font-family: var(--srh-font-sans) !important;
	font-weight: 400;
	background-color: #FFFFFF;
	color: var(--srh-grey-1000);
	border: 1px solid var(--srh-grey-300) !important;
	border-radius: var(--srh-radius-xs) !important;
	box-shadow: none !important;
	transition: border-color 120ms ease;
	padding: 6px 10px;
}

.form-control::placeholder,
.input-with-feedback::placeholder {
	color: var(--srh-grey-500);
}

/* Hover */
.form-control:hover,
.input-with-feedback:hover,
textarea.form-control:hover,
select.form-control:hover {
	border-color: var(--srh-brand-300) !important;
}

/* Focus / Active */
.form-control:focus,
.input-with-feedback:focus,
textarea.form-control:focus,
select.form-control:focus,
.form-control:focus-within {
	border-color: var(--srh-brand-500) !important;
	box-shadow: none !important;
	outline: none;
}

/* Disabled */
.form-control:disabled,
.form-control[readonly],
.like-disabled-input {
	background-color: var(--srh-grey-50) !important;
	color: var(--srh-grey-700);
	border-color: var(--srh-grey-200) !important;
}

/* Field label (above the input) */
.control-label,
.frappe-control > label,
.form-group > label {
	font-family: var(--srh-font-sans);
	font-weight: 500;
	color: var(--srh-grey-1000);
	font-size: var(--srh-text-body);
	margin-bottom: 4px;
}

/* Description / help text below the input */
.help-box,
.help-text,
.frappe-control .description {
	font-family: var(--srh-font-sans);
	color: var(--srh-grey-700);
	font-size: var(--srh-text-caption);
}

/* =========================================================================
 * 6. Checkboxes — Image 20 spec.
 *    Unselected: white bg, Grey 400 (1px) border.
 *    Unselected hover: Orange 500 border.
 *    Selected: Orange 500 bg, white check.
 *    Selected hover/pressed: Grey 1000 bg.
 *    Frappe checkboxes are real <input type=checkbox> so we use accent-color
 *    where supported AND -webkit-appearance overrides for legacy renderers.
 * ========================================================================= */

input[type="checkbox"],
.checkbox input[type="checkbox"],
.frappe-control[data-fieldtype="Check"] input[type="checkbox"] {
	accent-color: var(--srh-brand-500);
	border-radius: var(--srh-radius-xs);
	width: 14px;
	height: 14px;
	cursor: pointer;
}

/* Modern browsers — custom render via -webkit-appearance: none */
@supports (selector(input[type=checkbox])) {
	input[type="checkbox"]:not(.legacy-checkbox),
	.checkbox input[type="checkbox"],
	.frappe-control[data-fieldtype="Check"] input[type="checkbox"] {
		-webkit-appearance: none;
		appearance: none;
		background-color: #FFFFFF;
		border: 1px solid var(--srh-grey-400);
		border-radius: var(--srh-radius-xs);
		position: relative;
		transition: background-color 120ms ease, border-color 120ms ease;
	}

	input[type="checkbox"]:hover {
		border-color: var(--srh-brand-500);
	}

	input[type="checkbox"]:checked {
		background-color: var(--srh-brand-500);
		border-color: var(--srh-brand-500);
	}

	input[type="checkbox"]:checked::after {
		content: '';
		position: absolute;
		left: 3px;
		top: 0px;
		width: 4px;
		height: 8px;
		border: solid #FFFFFF;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}

	input[type="checkbox"]:checked:hover {
		background-color: var(--srh-brand-700);
		border-color: var(--srh-brand-700);
	}

	input[type="checkbox"]:active {
		background-color: var(--srh-grey-1000);
		border-color: var(--srh-grey-1000);
	}

	input[type="checkbox"]:disabled {
		background-color: var(--srh-grey-50);
		border-color: var(--srh-grey-200);
		cursor: not-allowed;
	}
}

/* Checkbox label */
.checkbox label,
.frappe-control[data-fieldtype="Check"] label {
	font-family: var(--srh-font-sans);
	color: var(--srh-grey-1000);
	font-weight: 400;
}

/* =========================================================================
 * 7. List & form chrome — apply tokens to common surfaces.
 *    List view filter section, page head buttons, modal headers, etc.
 * ========================================================================= */

/* List view filter section — sharper inputs, consistent spacing */
.list-filter,
.filter-section,
.list-filter-area {
	font-family: var(--srh-font-sans);
}

.list-filter .form-control,
.filter-section .form-control,
.list-filter-area .form-control {
	border-radius: var(--srh-radius-xs) !important;
	border-color: var(--srh-grey-300) !important;
}

/* Page head — sharp button corners, clean spacing */
.page-head .btn,
.page-actions .btn,
.standard-actions .btn {
	border-radius: var(--srh-radius-xs) !important;
}

/* Modal — sharp corners on dialogs, but a touch softer than buttons */
.modal-content {
	border-radius: var(--srh-radius-sm);
	font-family: var(--srh-font-sans);
}
.modal-header,
.modal-footer,
.modal-body {
	font-family: var(--srh-font-sans);
}

/* List row hover — subtle brand layer */
.list-row:hover,
.list-row-container:hover {
	background-color: var(--srh-brand-50);
}

/* Selected list row — washed brand variant */
.list-row.selected,
.list-row-container.selected {
	background-color: var(--srh-brand-100);
}

/* Indicator pills (status dots) — already styled by Frappe; just ensure
 * the radius matches our sharper aesthetic if Frappe overrides it */
.indicator-pill {
	border-radius: var(--srh-radius-sm);
}

/* Table head — quieter grey to let content breathe */
.frappe-list .list-headers,
.list-row-head,
table.table thead {
	font-family: var(--srh-font-sans);
	background-color: var(--srh-grey-50);
	color: var(--srh-grey-900);
}

/* =========================================================================
 * 8. Login page — restyle current SSO + password form.
 *    Frappe's login.html ships .login-content / .login-card / form-signin
 *    selectors. PwC's www/login.html uses a similar structure.
 *    No flow change — same fields, sharper aesthetic.
 * ========================================================================= */

.login-content,
.for-login,
.for-signup,
.for-forgot,
.login-card {
	font-family: var(--srh-font-sans);
}

.login-content h1,
.login-content h2,
.login-content h3,
.login-content .page-card-head {
	font-family: var(--srh-font-sans);
	font-weight: 500;
	color: var(--srh-grey-1000);
	letter-spacing: -0.01em;
}

.login-content .form-control,
.for-login .form-control,
.for-signup .form-control {
	border-radius: var(--srh-radius-xs) !important;
	border-color: var(--srh-grey-300) !important;
}

.login-content .btn-primary,
.for-login .btn-primary,
.for-signup .btn-primary,
.login-content .btn.btn-primary {
	background-color: var(--srh-brand-300) !important;
	color: var(--srh-grey-1000) !important;
	border-color: var(--srh-brand-300) !important;
	border-radius: var(--srh-radius-xs) !important;
	font-weight: 500;
}

.login-content .btn-primary:hover,
.for-login .btn-primary:hover,
.login-content .btn.btn-primary:hover {
	background-color: var(--srh-brand-500) !important;
	color: var(--srh-grey-1000) !important;
	border-color: var(--srh-brand-500) !important;
}

/* SSO button — typically rendered as .btn-default or .btn-secondary; our
 * secondary spec covers it. Add explicit fallback so legacy classes work. */
.login-content .sso-login,
.login-content .btn-sso,
.for-login button[name="sso_login"] {
	background-color: #FFFFFF !important;
	color: var(--srh-grey-1000) !important;
	border: 1px solid var(--srh-grey-1000) !important;
	border-radius: var(--srh-radius-xs) !important;
}

.login-content .sso-login:hover,
.login-content .btn-sso:hover,
.for-login button[name="sso_login"]:hover {
	background-color: var(--srh-brand-500) !important;
	color: #FFFFFF !important;
	border-color: var(--srh-brand-500) !important;
}

/* Login page background — keep the SDG carousel, but ensure the card
 * surface is white with a 4px corner (slightly softer than buttons to
 * read as a "container") */
.login-content .page-card,
.login-content .login-card,
.for-login .page-card {
	background-color: #FFFFFF;
	border-radius: var(--srh-radius-sm);
	border: 1px solid var(--srh-grey-200);
}

/* =========================================================================
 * 9. Focus ring — accessibility. Frappe drops focus outlines on .btn;
 *    we add a subtle one for keyboard users.
 * ========================================================================= */

.btn:focus-visible,
.form-control:focus-visible,
input[type="checkbox"]:focus-visible,
a:focus-visible {
	outline: 2px solid var(--srh-brand-500);
	outline-offset: 2px;
}