/*
 * 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 Blank the sidebar app-logo — hide it entirely (round 2.1: icon area must be empty).
 *     Do NOT use content: url() — that forces display of the SRH icon even if the
 *     src attribute is blank. display:none is the correct suppression. */
.sidebar-menu .app-logo,
.app-sidebar .app-logo {
	display: none !important;
}

/* 1.4 Navbar product-name wordmark (Manju, SRH team).
 *     "Social Responsibility Hub" placed at the top of every page in the
 *     PwC-approved font. There is no logo — this is a typographic wordmark,
 *     injected by pwc_ui.js placeWordmark() into the (blanked, §1.3) navbar
 *     brand slot as a sibling of .app-logo. Neutral dark grey (theme text
 *     colour, not brand orange) keeps it typographic rather than a coloured
 *     mark, per the client's "no logo" direction.
 *
 *     Un-hide the brand link: Frappe hides the .navbar-home <a> (display:none)
 *     when the app logo is blank — which §1.3 makes it. The wordmark is a child
 *     of that link, so it inherited the parent's collapse (0×0, invisible on UAT
 *     even though the span itself was visible). Force the link visible; the
 *     .app-logo img inside stays hidden by §1.3's separate !important rules.
 *     Verified live on UAT 2026-06-23 (Chromium): forcing this renders the
 *     wordmark at 197×23px in the top navbar. */
.navbar-brand.navbar-home {
	display: inline-flex !important;
	align-items: center;
}
.srh-wordmark {
	font-family: var(--srh-font-sans) !important;
	color: var(--srh-grey-1000); /* standard branding primary-text token (#111113) — no custom value */
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	padding-left: 8px;
	margin-left: 4px;
}

/* =========================================================================
 * 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) */
/* Bug 1.5 (#32): added :not(.form-control):not(.like-disabled-input) so the
 * white-text hover doesn't bleed into Frappe form controls that carry
 * .btn-default (Link fields, read-only wrappers). Without this, hovering
 * over those controls flashed white text on a white background. */
.btn-secondary,
.btn.btn-secondary,
.btn-default:not(.btn-primary):not(.btn-danger):not(.btn-link):not(.form-control):not(.like-disabled-input),
.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):not(.form-control):not(.like-disabled-input):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):not(.form-control):not(.like-disabled-input):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;
}

/* =========================================================================
 * 10. Sidebar — active state redesign.
 *     Shipra v2 review: active item should be Grey 1000 + bold (not brand
 *     orange). Hover stays Brand 500. Default text stays Grey 1000.
 *     Applies platform-wide (not just Home workspace).
 *
 *     Frappe v15 sidebar structure:
 *       .standard-sidebar-section > .sidebar-item.selected
 *       .desk-sidebar .sidebar-item-label
 *       My Theme sets --sidebar-active-text-color via CSS custom properties
 *       injected under [data-theme]. We override at specificity here.
 * ========================================================================= */

/* Default sidebar item text — Grey 1000 */
.desk-sidebar .standard-sidebar-item .sidebar-item-label,
.desk-sidebar .sidebar-item .sidebar-item-label,
.standard-sidebar-section .sidebar-item-label {
	color: var(--srh-grey-1000);
	font-weight: 400;
}

/* Active / selected sidebar item — Grey 1000 + bold.
 * Frappe v15 applies BOTH `.selected` and `.active-sidebar` to the active
 * item depending on the rendering path (workspace nav uses `.active-sidebar`
 * on .standard-sidebar-item; older surfaces use `.selected`). Cover both,
 * and use !important on font-weight too — My Theme injects
 * --sidebar-active-text-color (brand_700 orange) via a CSS variable that
 * out-specifies non-!important rules on the inner label. */
.desk-sidebar .standard-sidebar-item.selected .sidebar-item-label,
.desk-sidebar .sidebar-item.selected .sidebar-item-label,
.standard-sidebar-section .sidebar-item.selected .sidebar-item-label,
.standard-sidebar-section a.selected .sidebar-item-label,
.standard-sidebar-item.active-sidebar .sidebar-item-label,
.desk-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.standard-sidebar-section .standard-sidebar-item.active-sidebar .sidebar-item-label {
	color: var(--srh-grey-1000) !important;
	font-weight: 700 !important;
}

/* Active background stays Brand 50 (set by My Theme) — only override text */
.desk-sidebar .standard-sidebar-item.selected,
.standard-sidebar-section .sidebar-item.selected,
.standard-sidebar-item.active-sidebar {
	background-color: var(--srh-brand-50);
}

/* Hover — Brand 500 text (unchanged from before) */
.desk-sidebar .standard-sidebar-item:hover .sidebar-item-label,
.desk-sidebar .sidebar-item:hover .sidebar-item-label,
.standard-sidebar-section .sidebar-item:hover .sidebar-item-label {
	color: var(--srh-brand-500) !important;
}

/* =========================================================================
 * 11. Home workspace — hide icon from the page-head title strip.
 *     Shipra v2 review (Page 4, top-left sticky): the Home workspace shows
 *     a large icon in the title-row of the content area. This is the
 *     `.page-head .title-image` / `.workspace-icon` rendered by Frappe's
 *     workspace page template — NOT the sidebar glyph.
 *     Sidebar glyph (pwc-home sprite) is kept. Only the header-strip icon
 *     is hidden, and only on the workspace named "Home".
 *
 *     Frappe v15 workspace page renders:
 *       .page-head .page-title → span.title-text (workspace name)
 *       .page-head .page-icon  → svg or img (workspace icon)
 *     We hide .page-icon when the page route is /app/home via the
 *     body[data-route] attribute that Frappe sets on navigation.
 * ========================================================================= */

body[data-route="home"] .page-head .page-icon,
body[data-route="home"] .page-head .title-image,
body[data-route="home"] .page-head .workspace-icon {
	display: none !important;
}

/* =========================================================================
 * 12. Sentence case — workspace title overrides.
 *     Shipra v2 review: multiple surfaces render ALL-CAPS text.
 *     This comes from Frappe's own text-transform rules on certain heading
 *     and stat-card selectors. We reset to none and rely on proper casing
 *     in Translation entries (see srh_site_setup._create_translations).
 *
 *     Targeted selectors only — do NOT apply text-transform: none globally
 *     as that would undo Frappe's legitimate uppercase badge/pill labels.
 * ========================================================================= */

/* Workspace page heading — "WELCOME TO SOCIAL RESPONSIBILITY HUB" */
.workspace-container .page-head .title-area .page-title,
.workspace-container .page-head h1,
.workspace-container .codex-editor .ce-header,
.workspace-container .workspace-heading {
	text-transform: none !important;
}

/* Stat/number card labels — "TOTAL GRANTS", "ACTIVE GRANTS", etc. */
.number-card .number-card-label,
.widget.number-card-widget .widget-label .widget-title,
.number-card .widget-title {
	text-transform: none !important;
}

/* Quick list widget headers on workspace */
.quick-list-widget-new .widget-title,
.widget.shortcut-widget-box .widget-title {
	text-transform: none !important;
}

/* =========================================================================
 * 13. Kanban view — column header and background colors.
 *     Shipra v2 review: white font on color background → black (Grey 1000);
 *     column background → Brand 50 (#FFF5ED).
 *
 *     Frappe v15 kanban selectors:
 *       .kanban-board .kanban-column (column container)
 *       .kanban-column .kanban-column-title (header text)
 *       .kanban-column .kanban-column-header (header row)
 * ========================================================================= */

/* Column background */
.kanban-column {
	background-color: var(--srh-brand-50) !important;
	border: 1px solid var(--srh-brand-100);
}

/* Column header text — black on Brand 50 */
.kanban-column .kanban-column-header {
	background-color: var(--srh-brand-100) !important;
	color: var(--srh-grey-1000) !important;
}

.kanban-column .kanban-column-title {
	color: var(--srh-grey-1000) !important;
	font-weight: 600;
	text-transform: none !important;
}

/* Column card — white surface, sharp radius */
.kanban-column .kanban-card-wrapper {
	background-color: #FFFFFF;
	border: 1px solid var(--srh-grey-200);
	border-radius: var(--srh-radius-xs);
}

.kanban-column .kanban-card-wrapper:hover {
	border-color: var(--srh-brand-300);
	box-shadow: 0 1px 4px rgba(31,6,6,0.06);
}

/* =========================================================================
 * 14. Footer — right-align copyright text.
 *     History: Shipra v2 review moved the PwC legal footer centered →
 *     left-aligned. Anuraag (27-Jul-2026) asked for right-aligned, with the
 *     copyright line above the policy links. This supersedes the v2 call.
 *     #srh-footer and .srh-copyright cover the desk footer (injected by
 *     srh_footer.js) and the login page footer respectively; .tc-copyright
 *     covers the T&C gate.
 * ========================================================================= */

#srh-footer {
	text-align: right !important;
}

.srh-copyright,
.tc-copyright {
	text-align: right !important;
}

.srh-copyright p,
.tc-copyright p {
	text-align: right !important;
	margin: 0 0 0 auto; /* flush right, no auto centering */
	max-width: none;
}

/* Policy links strip sits under the copyright line, also flush right. */
.srh-policies {
	justify-content: flex-end !important;
}

/* =========================================================================
 * 15. Required-field asterisk → black (Kristian #4).
 *     Frappe v15/16 renders the mandatory marker as a CSS ::after pseudo-
 *     element on label.control-label.reqd with content " *". The base
 *     Frappe stylesheet sets this to a red/pink tone. We override it to
 *     Grey 1000 (black) per the global brand requirement.
 *
 *     Exact live selector confirmed: label.control-label.reqd::after
 *     Live colour before fix: rgb(235, 144, 145) — pinkish-red from Frappe base.
 *     !important required: Frappe bundles its own ::after rule at high specificity.
 *
 *     PRESERVE: placeholder grey (.form-control::placeholder stays var(--srh-grey-500)),
 *     status colour-coding (indicator pills, .srh-* utility classes), text-muted.
 * ========================================================================= */

label.control-label.reqd::after,
.frappe-control .control-label.reqd::after,
.form-group label.reqd::after {
	color: var(--srh-grey-1000) !important; /* Kristian #4: mandatory asterisk black */
}

/* =========================================================================
 * 16. Sidebar active-state icon → black (Kristian #7).
 *
 *     Primary fix: _set_theme_colors() in srh_site_setup.py now sets
 *     sidebar_active_text_color = grey_1000 (#111113). My Theme reads this
 *     token and injects it as !important CSS on .body-sidebar-container
 *     .standard-sidebar-item.active-sidebar > .item-anchor (and svg/use
 *     children). Because My Theme's injection happens AFTER static CSS
 *     files load, we cannot beat it with a file-level !important rule —
 *     only overriding the token itself works.
 *
 *     This CSS rule is belt-and-suspenders: it covers BOTH class paths:
 *       - .selected: workspace nav on some Frappe v15 rendering paths
 *       - .active-sidebar: the LIVE v15 class confirmed on UAT (2026-06-12)
 *         (live markup: .standard-sidebar-item.active-sidebar > .item-anchor)
 *     My Theme's token may not cover .selected; this file covers both.
 *     Must match My Theme's selector depth (5 classes) at equal specificity
 *     when both are !important.
 *
 *     Scoped to .body-sidebar-container — the exact container My Theme uses —
 *     so it cannot bleed into top-nav, modals, or any other chrome.
 *     Exempt: hover state (brand-500 per §10), non-active items, chart/data-viz,
 *     status badges, avatars, the left-panel shape icons (Kristian confirmed exempt).
 * ========================================================================= */

/* .selected path — workspace nav fallback + setup-script-not-yet-run cover */
.body-sidebar-container .standard-sidebar-item.selected > .item-anchor,
.body-sidebar-container .standard-sidebar-item.selected > .item-anchor .sidebar-item-label,
.body-sidebar-container .standard-sidebar-item.selected > .item-anchor .sidebar-item-icon,
.body-sidebar-container .standard-sidebar-item.selected > .item-anchor svg,
.body-sidebar-container .standard-sidebar-item.selected > .item-anchor svg use {
	color: var(--srh-grey-1000) !important; /* Kristian #7: active icon black */
	fill: var(--srh-grey-1000) !important;
	stroke: none !important;
}

/* .active-sidebar path — live Frappe v15 class confirmed on UAT (2026-06-12) */
.body-sidebar-container .standard-sidebar-item.active-sidebar > .item-anchor,
.body-sidebar-container .standard-sidebar-item.active-sidebar > .item-anchor .sidebar-item-label,
.body-sidebar-container .standard-sidebar-item.active-sidebar > .item-anchor .sidebar-item-icon,
.body-sidebar-container .standard-sidebar-item.active-sidebar > .item-anchor svg,
.body-sidebar-container .standard-sidebar-item.active-sidebar > .item-anchor svg use {
	color: var(--srh-grey-1000) !important; /* Kristian #7: active icon black */
	fill: var(--srh-grey-1000) !important;
	stroke: none !important;
}

/* =========================================================================
 * 17. Workflow stepper active step → black background (Kristian #8).
 *     The mGrant base app renders the workflow/stage stepper as
 *     <ul class="stepper"> / <li class="stepper__item current"> with an
 *     inline style="background-color: #801621" (dark maroon, base-app
 *     hardcoded — NOT in our CSS). !important is required to beat an
 *     inline style.
 *
 *     Exact live selector confirmed: .stepper__item.current
 *     Live background before fix: rgb(128, 22, 33) = #801621 (inline style).
 *     Live text before fix: rgb(255,255,255) = white — preserved after fix
 *     (white on #111113 is WCAG AAA, 18.86:1).
 *
 *     Scope: .custom-progress-bar so the override cannot bleed into any
 *     other Frappe progress widget. Only the active step is recoloured;
 *     inactive steps (#F3F3F3 bg) are untouched.
 * ========================================================================= */

.custom-progress-bar .stepper__item.current {
	background-color: var(--srh-grey-1000) !important; /* Kristian #8: active step black, beats inline style */
	color: #FFFFFF !important; /* white text — WCAG AAA (18.86:1) on #111113 */
}

/* =========================================================================
 * 18. Leaflet map attribution link → black / orange-hover (Kristian #2 straggler).
 *     The Leaflet control renders a small "Leaflet | © OpenStreetMap" strip
 *     with anchor tags. Frappe's base styles leave these as default browser
 *     blue. Override to brand-neutral black with orange hover so the link
 *     matches the SRH colour system without drawing attention.
 * ========================================================================= */

/* Kristian #2: third-party map attribution links black / orange hover */
.leaflet-control-attribution a {
	color: var(--srh-grey-1000) !important;
}

.leaflet-control-attribution a:hover {
	color: var(--srh-brand-500) !important;
}

/* =========================================================================
 * 19. Hide PwC legal footer on desk pages (#13).
 *     The base/footer JS injects a <div class="srh-copy"> legal copyright
 *     strip on every desk page. PwC asked to remove it from the desk.
 *     Hide it here — pwc_ui.css is the loaded app stylesheet (confirmed in
 *     hooks.py app_include_css), so no hooks change is needed.
 * ========================================================================= */

.srh-copy {
	display: none !important;
}

/* =========================================================================
 * 20. Helvetica Neue residual-surface sweep (Kristian brand round 2, 2026-06-18).
 *     Rationale: §2 covers body, controls, buttons, and high-traffic form
 *     selectors; this section catches straggler surfaces that inherit Frappe's
 *     Inter fallback because they are rendered outside those selectors.
 *     All rules use var(--srh-font-sans) !important to beat any Frappe
 *     bundled font-family that loads after our stylesheet.
 * ========================================================================= */

/* 20.1 DataTable (frappe-datatable) — list-view and report cells/headers.
 *      Frappe's datatable injects its own stylesheet with font-family: inherit
 *      on .dt-cell and .dt-instance; "inherit" traces back to Frappe's :root
 *      which still has Inter unless our §2 :root override wins first in the
 *      cascade. Belt-and-suspenders direct rule here. */
.dt-cell,
.dt-cell__content,
.dt-cell__edit,
.dt-cell__edit input,
.dt-row,
.dt-header,
.dt-column-header,
.dt-instance {
	font-family: var(--srh-font-sans) !important;
}

/* 20.2 Home workspace tables — "To-do" and "Reporting" quick-list widgets
 *      that appear on the Home page as HTML table blocks. These are rendered
 *      inside .codex-editor (Frappe's workspace editor) which has its own
 *      font-family reset. */
.codex-editor,
.codex-editor *,
.ce-block,
.ce-block__content {
	font-family: var(--srh-font-sans) !important;
}

/* 20.3 Modals and dialogs — .modal-content already covered in §7 but the
 *      dialog-specific Frappe class (.frappe-dialog) has its own stack. */
.frappe-dialog,
.frappe-dialog .modal-body,
.frappe-dialog .modal-footer,
.frappe-dialog .modal-header,
.frappe-dialog input,
.frappe-dialog select,
.frappe-dialog textarea,
.frappe-dialog .frappe-control {
	font-family: var(--srh-font-sans) !important;
}

/* 20.4 Awesomebar (global search) — Frappe's awesomebar renders a separate
 *      pop-over (.awesomebar-container / .search-container) which has its own
 *      font-family from Frappe's theme variables. */
.awesomebar-container,
.awesomebar-container input,
.awesomebar-container .search-result,
.search-container,
.search-container input,
.search-container .result-item,
.navbar-search input[type="search"],
#navbar-search {
	font-family: var(--srh-font-sans) !important;
}

/* 20.5 Grid / child table (Frappe inline-editable grid inside forms).
 *      .grid-row, .grid-heading-row, .grid-footer cover the three zones.
 *      .small, .grid-row .btn-open-row — row-level action affordances. */
.grid-row,
.grid-row td,
.grid-heading-row,
.grid-heading-row th,
.grid-footer,
.grid-body,
.grid-body input,
.grid-body select,
.grid-body textarea,
.grid-row .btn-open-row,
.row-index,
.form-grid .grid-row {
	font-family: var(--srh-font-sans) !important;
}

/* 20.6 Tooltips — Bootstrap tooltips (.tooltip-inner) rendered by Frappe. */
.tooltip-inner,
.popover,
.popover-body,
.popover-header {
	font-family: var(--srh-font-sans) !important;
}

/* 20.7 Dropdowns and select2 — Frappe uses .dropdown-menu for action
 *      dropdowns; some datatable filter controls use .select2-dropdown. */
.dropdown-menu,
.dropdown-menu li,
.dropdown-menu a,
.dropdown-item,
.select2-dropdown,
.select2-results__option {
	font-family: var(--srh-font-sans) !important;
}

/* 20.8 Sidebar navigation labels — catches any sidebar text node not already
 *      covered by §10's .sidebar-item-label selectors (e.g. section headers,
 *      the workspace-switcher label rendered in the collapsed rail). */
.desk-sidebar,
.desk-sidebar *,
.sidebar-section-head,
.sidebar-section > .sidebar-label {
	font-family: var(--srh-font-sans) !important;
}

/* 20.9 Report view tables — Query/Script Report output rendered in
 *      .report-wrapper or .datatable-wrapper. Also covers .report-summary
 *      cards. */
.report-wrapper,
.report-wrapper *,
.report-summary,
.report-summary * {
	font-family: var(--srh-font-sans) !important;
}

/* 20.10 Notification dropdown panel — the panel rendered by the bell click
 *       (.notifications-list, .notification-item). */
.notifications-list,
.notification-item,
.notification-item *,
.dropdown-notifications,
.dropdown-notifications * {
	font-family: var(--srh-font-sans) !important;
}

/* =========================================================================
 * 21. Blank workspace brand mark + hide name (Kristian brand round 2, 2026-06-18).
 *     Rationale: product owner wants NO icon and NO name text in the top-left
 *     brand area (expanded sidebar header, collapsed rail, and top bar).
 *     blank.svg is a 1×1 transparent SVG; hooks.py points app_logo_url and
 *     add_to_apps_screen[0].logo at it. This CSS belt ensures text labels
 *     associated with the app name / workspace switcher label are hidden even
 *     if Frappe falls back to rendering them.
 *
 *     Preserved: user avatar, Help dropdown, workspace switcher click behaviour.
 *     Selector sources: §1.2 and §1.3 (legacy sidebar name/logo selectors) +
 *     Frappe v15 navbar brand classes confirmed live on UAT.
 * ========================================================================= */

/* 21.1 Hide the top-left brand name text in the expanded sidebar header and
 *      the navbar. Frappe v15 sidebar renders the app name as .app-name inside
 *      .sidebar-menu (also covered by §1.2's ellipsis selectors — add display:none
 *      here to fully suppress it rather than just truncating).
 *      Round 2.1: live DOM inspection confirmed the VISIBLE class is
 *      .sidebar-item-label.app-title (NOT .app-name which was already absent).
 *      Both classes are now suppressed. */
.sidebar-menu .app-name,
.sidebar-menu .app-switcher .app-name,
.navbar-home .app-name,
.navbar .app-name,
.navbar-brand .app-name,
.desk-sidebar .app-name,
.app-switcher .app-name,
.sidebar-item-label.app-name,
/* FIX 2 (round 2.1): the live Frappe v15 app-title class confirmed on UAT */
.sidebar-item-label.app-title,
.app-logo-container .sidebar-item-label,
/* Workspace-switcher label (title of the active workspace in the header strip) */
.workspace-switcher .workspace-name,
.workspace-switcher .current-workspace-name,
.page-head .workspace-title-text,
/* The sidebar header app title (text next to the logo) */
#sidebar-app-text,
.sidebar-label.app-label {
	display: none !important;
}

/* 21.2 Ensure the app-logo img has no visible dimensions regardless of src.
 *      §1.3 now suppresses via display:none; this is belt-and-suspenders for
 *      any Frappe rendering path that might override display. Also covers the
 *      blank.svg image slots in navbar and sidebar header. */
.sidebar-menu .app-logo,
.app-sidebar .app-logo,
.navbar-brand img[src*="blank.svg"],
.sidebar-header img[src*="blank.svg"],
.app-logo-container img {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* 21.3 The collapsed sidebar rail also shows a small icon in the rail header
 *      (Frappe v15 collapses the sidebar to a narrow icon-only rail on small
 *      screens or when toggled). Hide the rail's brand mark slot. */
.body-sidebar-container.close .desk-sidebar .sidebar-header,
.body-sidebar-container.close .standard-sidebar-section:first-child .sidebar-item:first-child .sidebar-item-icon,
.desk-sidebar.standard-sidebar.close .app-logo {
	display: none !important;
}

/* 21.4 Hide the app-logo img regardless of src (FIX 1 belt-and-suspenders).
 *      Frappe v15 may dynamically inject the app-logo after CSS loads — this
 *      covers the .app-logo-container / .custom-logo surfaces confirmed live
 *      on UAT. Does NOT affect workspace sidebar item icons (those use
 *      .sidebar-item-icon not .app-logo-container or .custom-logo). */
.app-logo-container .app-logo,
.sidebar-item-icon.app-logo-container,
.navbar-brand.navbar-home .app-logo,
.custom-logo,
.custom-logo img {
	display: none !important;
}

/* 21.5 My Theme custom_logo block — hide the entire container where My Theme
 *      renders the custom logo (settings-page header, 36×36 slot). */
.navbar .custom-logo,
.page-container .custom-logo,
.body-container .custom-logo-area,
.navbar-brand .custom-logo-container,
[class*="custom-logo"] {
	display: none !important;
}

/* =========================================================================
 * 22. Helvetica Neue on headings + bold-weight surfaces (brand round 2.1, 2026-06-19).
 *     Product owner: every bold/heading in the sidebar and across the system
 *     must use Helvetica Neue (var(--srh-font-sans)), not the Frappe-default
 *     system stack. §2 and §20 cover body/controls/nav/datagrid/sidebar label
 *     text; this section targets heading elements and additional bold surfaces.
 *
 *     Frappe v15 renders workspace headings and sidebar labels with font-weight
 *     700 via its own stylesheet; some render with the system font-stack because
 *     they fall outside body's cascade. Bold weights within Helvetica Neue are
 *     covered by srh_typography.css (700 Bold @font-face). No weight override
 *     here — Frappe's bold usage is intentional; we only ensure it resolves to HN.
 * ========================================================================= */

/* 22.1 Headings — all levels + Frappe heading utility classes */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--srh-font-sans) !important;
}

/* 22.2 Editor.js block headers (workspace content headings in CodeX editor) */
.ce-header {
	font-family: var(--srh-font-sans) !important;
}

/* 22.3 Sidebar item labels — all variants including app-title and nav links.
 *      §10 and §20.8 already cover some of these paths; this is explicit
 *      belt-and-suspenders for the bold-weight sidebar label surface. */
.sidebar-item-label,
.sidebar-item-label.app-title,
.standard-sidebar-item .sidebar-item-label,
.desk-sidebar .sidebar-item-label {
	font-family: var(--srh-font-sans) !important;
}

/* 22.4 Page title and form title rendered as bold text */
.page-title,
.title-text,
.form-page-title,
.page-head .title-area h1,
.page-head .title-area .page-title {
	font-family: var(--srh-font-sans) !important;
}

/* 22.5 Inline bold/strong elements that may inherit system font from Frappe */
b, strong {
	font-family: var(--srh-font-sans) !important;
}

/* =========================================================================
 * 23. Pagination glyphs (round 2.3, 2026-06-19).
 *     Frappe Bootstrap pagination renders first/prev/next/last as TEXT
 *     (<< < > >>). pwc_ui.js _applyPwcPagination() swaps the text for these
 *     PwC arrow SVGs; this sizes them inline within .page-link buttons.
 * ========================================================================= */
.page-link .pwc-pg-ico {
	width: 12px;
	height: 12px;
	vertical-align: middle;
	display: inline-block;
}
/* Double arrows (<< / >>) overlap slightly so they read as a single control. */
.page-link .pwc-pg-ico + .pwc-pg-ico {
	margin-left: -4px;
}

/* =========================================================================
 * 24. Select field clip fix (Bug 1.5 — select-clip).
 *     Frappe renders Select controls as <select class="form-control ellipsis">.
 *     The `.ellipsis` class sets overflow:hidden + text-overflow:ellipsis, and
 *     §5's padding (6px 10px) is tight for native <select> elements — the
 *     combination clips the option text vertically.
 *     Fix: override overflow to visible on <select>, give it adequate height,
 *     and ensure the native dropdown arrow has room (padding-right).
 * ========================================================================= */

select.form-control,
select.input-with-feedback,
select.form-control.ellipsis {
	overflow: visible !important;
	text-overflow: clip;
	height: auto;
	min-height: 34px;
	line-height: 1.5;
	padding-right: 28px; /* space for the native dropdown arrow */
}