/* Rano branding: logo sizing and a brand accent over Frappe's desk theme.
 *
 * Scope, deliberately: gold and blue are used as *accents* — borders, active
 * markers, headings, primary buttons — over Frappe's own light and dark
 * surfaces. The page backgrounds, form controls and text colours are left
 * alone. Repainting those means owning contrast in every state Frappe has
 * (hover, disabled, invalid, selected, dark mode), and a mill office reading
 * weighbridge tickets on a cheap monitor is exactly where that goes wrong.
 *
 * Gold is never a background for text. #f0c000 with white text is about 1.9:1,
 * far below the 4.5:1 needed to be readable; it is used for rules, borders and
 * active markers only. Blue #0078a8 with white text is about 4.7:1 and passes,
 * so it carries the primary buttons.
 *
 * To tone any of this down, delete the block — each section stands alone.
 */

:root {
	--rano-gold: #f0c000;
	--rano-gold-soft: #f7dd80;
	--rano-blue: #0078a8;
	--rano-blue-dark: #005f86;
	--rano-blue-tint: #eaf6fb;
	--rano-blue-light: #4fb3d9;
	--rano-red: #ed1c24;
}

/* Frappe's own theme variables, driven from the brand palette.
 *
 * These matter more than the selectors below: they are the desk's own colour
 * plumbing, so wherever Frappe reads them the brand follows regardless of what
 * its markup is called. Every name here was read off v16's
 * frappe/public/scss/common/css_variables.scss on 2026-09-04 — `--primary` and
 * `--text-on-primary` are NOT among them (only `--primary-color`), which is why
 * setting those did nothing.
 *
 * `--navbar-bg` is deliberately left alone: the logo is multi-colour on
 * transparent and its blue wordmark disappears against a blue bar. */
:root {
	--primary-color: var(--rano-blue);
	--btn-primary: var(--rano-blue);
	--brand-color: var(--rano-blue);
	--sidebar-select-color: var(--rano-blue-tint);
	--border-primary: var(--rano-blue);
}

/* Blue is dark enough for white button text in both themes (4.7:1), so the
 * button colour does not flip with the theme — a lighter blue would need dark
 * text, and which one Frappe uses there is not something this file can know. */
[data-theme="dark"] {
	--primary-color: var(--rano-blue-light);
	--btn-primary: var(--rano-blue);
	--brand-color: var(--rano-blue-light);
	--sidebar-select-color: #263544;
	--border-primary: var(--rano-blue-light);
}

/* ---------------------------------------------------------------- logo ---
 * The A.A. Rano lockup is circular (roughly 1.2:1), but Frappe's navbar logo
 * rule is written for a square icon and fixes both dimensions, which squashes
 * it. */
.navbar .app-logo,
.navbar-brand .app-logo,
header .app-logo {
	height: 26px !important;
	width: auto !important;
	max-width: 160px;
	object-fit: contain;
}

.page-card .app-logo,
.for-login .app-logo,
.login-content .app-logo,
.web-sidebar .app-logo {
	height: auto;
	width: auto;
	max-height: 76px;
	max-width: 220px;
	object-fit: contain;
}

.apps-card .app-logo,
.app-item .app-logo {
	object-fit: contain;
}

/* -------------------------------------------------------------- navbar ---
 * A gold rule under the navbar, matching the one under the letter head. The
 * navbar itself stays on Frappe's own background: the logo is multi-colour on
 * transparent, and its blue wordmark disappears against a blue bar. */
.navbar {
	border-bottom: 3px solid var(--rano-gold) !important;
}

/* ------------------------------------------------------------- sidebar --- */
/* v16's desk sidebar is .body-sidebar; .desk-sidebar does not exist in its
 * SCSS at all, which is why the first attempt at this did nothing. Items are
 * still .standard-sidebar-item / .sidebar-item. The v15 container names are
 * kept below so the file also works on an older bench. */
.body-sidebar,
.body-sidebar-container,
.layout-side-section,
.desk-sidebar,
.standard-sidebar {
	background-color: var(--rano-blue-tint);
}

/* The active item. v16 marks it .active-sidebar; .selected is the v15 spelling
 * and both class names exist in this version's SCSS. */
.sidebar-item.active-sidebar,
.standard-sidebar-item.active-sidebar,
.active-sidebar,
.standard-sidebar-item.selected {
	background-color: var(--card-bg, #ffffff);
	border-left: 3px solid var(--rano-gold);
	font-weight: 600;
}

.sidebar-item.active-sidebar .sidebar-item-label,
.standard-sidebar-item.selected .sidebar-item-label {
	color: var(--rano-blue-dark);
}

.body-sidebar-top .sidebar-label,
.standard-sidebar-section .sidebar-group-title,
.layout-side-section .sidebar-label {
	color: var(--rano-blue-dark);
	letter-spacing: 0.3px;
}

/* --------------------------------------------------------------- cards ---
 * Workspace widgets, number cards, shortcuts and dashboards. */
.widget-head .widget-title,
.widget-head .widget-title span,
.widget-title,
.dashboard-section .section-head {
	color: var(--rano-blue-dark);
}

.widget-head {
	border-bottom: 1px solid var(--rano-gold-soft);
}

/* v16's card classes, read off its own SCSS. A number card is
 * .number-widget-box here, not .number-card. */
.number-widget-box,
.shortcut-widget-box,
.links-widget-box,
.dashboard-widget-box,
.quick-list-widget-box,
.custom-block-widget-box,
.onboarding-widget-box,
.chart-widget {
	border-top: 2px solid var(--rano-gold-soft);
}

/* Form section headings, the closest thing to a card header inside a document. */
.section-head,
.form-section-heading,
.form-tabs .nav-link.active {
	color: var(--rano-blue-dark);
}

.form-tabs .nav-link.active {
	border-bottom-color: var(--rano-gold) !important;
}

/* ------------------------------------------------------------- actions --- */
.btn-primary,
.btn-primary:focus {
	background-color: var(--rano-blue) !important;
	border-color: var(--rano-blue) !important;
	color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:active {
	background-color: var(--rano-blue-dark) !important;
	border-color: var(--rano-blue-dark) !important;
}

/* The workflow state pill on an approved document, and page-level indicators,
 * keep Frappe's own colours: green/red/orange there mean something, and a
 * brand colour over them would be actively misleading. */

/* ---------------------------------------------------------- dark theme ---
 * Frappe stamps data-theme="dark" on the root element. The tints above are
 * built for light surfaces, so they are replaced rather than inherited. */
[data-theme="dark"] {
	--rano-blue-tint: #1c2733;
}

[data-theme="dark"] .body-sidebar,
[data-theme="dark"] .body-sidebar-container,
[data-theme="dark"] .layout-side-section,
[data-theme="dark"] .desk-sidebar,
[data-theme="dark"] .standard-sidebar {
	background-color: var(--rano-blue-tint);
}

[data-theme="dark"] .body-sidebar .active-sidebar,
[data-theme="dark"] .active-sidebar,
[data-theme="dark"] .standard-sidebar-item.selected {
	background-color: #263544;
}

[data-theme="dark"] .widget-head .widget-title,
[data-theme="dark"] .widget-head .widget-title span,
[data-theme="dark"] .widget-title,
[data-theme="dark"] .body-sidebar-top .sidebar-label,
[data-theme="dark"] .standard-sidebar-section .sidebar-group-title,
[data-theme="dark"] .sidebar-item.active-sidebar .sidebar-item-label,
[data-theme="dark"] .section-head,
[data-theme="dark"] .form-section-heading,
[data-theme="dark"] .form-tabs .nav-link.active,
[data-theme="dark"] .dashboard-section .section-head {
	color: var(--rano-blue-light);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:focus {
	background-color: var(--rano-blue) !important;
	border-color: var(--rano-blue) !important;
}

/* ==================================================================== login ==
 * A two-panel login: photograph on the left, the sign-in card on the right.
 *
 * Done in CSS against Frappe's own markup — v16 renders
 * `section.for-login > div.login-content.page-card`. Overriding www/login.html
 * instead would mean owning the OAuth provider buttons, LDAP, 2FA, email-link
 * login and password reset it also carries, through every future upgrade, for a
 * layout that needs none of them.
 *
 * BOTH halves are position:fixed, and that is the point. An earlier version
 * used the `width:100vw; left:50%; margin-left:-50vw` full-bleed trick, which
 * any ancestor with a max-width or overflow:hidden silently defeats — and what
 * templates/web.html wraps this page in is not something this file can see.
 * Fixed boxes are laid out against the viewport, so no ancestor can clip,
 * narrow or centre them. Between them they cover the viewport, which is why the
 * page below collapsing to nothing does not matter.
 *
 * The photograph is optional. It is the middle of three background layers, so
 * when /files/rano-login.jpg is absent the brand gradient beneath shows through
 * — a site with no photograph gets the layout, not a broken image.
 */

@media (min-width: 900px) {
	section.for-login::before {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 45%;
		z-index: 1;
		background-image:
			linear-gradient(to top, rgba(0, 42, 60, 0.88) 0%, rgba(0, 42, 60, 0.30) 45%, rgba(0, 42, 60, 0.15) 100%),
			url("/files/rano-login.jpg"),
			linear-gradient(160deg, #005f86 0%, #00293a 100%);
		background-size: cover, cover, cover;
		background-position: center, center, center;
		background-repeat: no-repeat;
	}

	/* The company name goes on the photograph, not the logo: the wordmark is
	 * blue and would disappear against a darkened image. */
	section.for-login::after {
		content: "A.A. RANO RICE MILL LIMITED\A Dawakin Kudu, Kano State";
		white-space: pre-line;
		position: fixed;
		left: 3.5rem;
		bottom: 3.5rem;
		width: calc(55vw - 7rem);
		z-index: 2;
		color: #ffffff;
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.4px;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	}

	/* The form band. overflow-y keeps a tall card (social logins, LDAP) usable
	 * on a short screen instead of clipping it. */
	section.for-login {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 55%;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		padding: 2rem;
		box-sizing: border-box;
		background-color: var(--card-bg, #ffffff);
	}

	section.for-login .page-card {
		margin: 0;
		border: none;
		box-shadow: none;
		background: transparent;
		width: min(400px, 100%);
	}
}

/* Card presentation, both layouts. */
section.for-login .page-card-head .app-logo {
	max-height: 64px;
	margin-bottom: 0.75rem;
}

section.for-login .page-card-head h4 {
	color: var(--rano-blue-dark);
	font-weight: 700;
}

section.for-login .page-card-subtitle {
	color: var(--subtle-fg, #6b7280);
}

/* Frappe's sign-in button is .btn-default, not .btn-primary, so the brand rule
 * further up this file never reached it. */
section.for-login .btn-login[type="submit"] {
	background-color: var(--rano-blue) !important;
	border-color: var(--rano-blue) !important;
	color: #ffffff !important;
	font-weight: 600;
}

section.for-login .btn-login[type="submit"]:hover {
	background-color: var(--rano-blue-dark) !important;
	border-color: var(--rano-blue-dark) !important;
}

section.for-login .forgot-password-message a,
section.for-login a {
	color: var(--rano-blue-dark);
}

/* Below 900px the panel is dropped rather than squeezed, and everything returns
 * to normal flow so the form gets the full width. */
@media (max-width: 899px) {
	section.for-login::before,
	section.for-login::after {
		display: none;
	}
}

[data-theme="dark"] section.for-login .page-card-head h4 {
	color: var(--rano-blue-light);
}