/* ---------------------------------------------------------------------------
 * Panakkizhi — website/login branding.
 *
 * Palette and intent from `UI-Design/DESIGN.md`: a near-black canvas with a
 * single gold accent, "a gold ornament in a velvet box". The logo is gold on a
 * transparent background, so it needs the dark canvas to read at all — on
 * Frappe's default white login it would wash out.
 *
 * Scoped to the website/login pages. The desk has its own theme and is not
 * touched here: the desk is an operator tool, not a customer surface, and
 * restyling it would fight Frappe's own theming on every upgrade.
 *
 * Loaded via `Website Settings.head_html`, which reaches every web page through
 * `templates/includes/head.html`. Deliberately not `web_include_css` in
 * hooks.py — hooks are cached and that would need a bench restart on a shared
 * bench, for a stylesheet.
 *
 * G7: this is Panakkizhi's own branding. No iWEX mark appears to end users.
 * --------------------------------------------------------------------------- */

:root {
	/* DESIGN.md §Canvas & surfaces / §Accent */
	--pkz-canvas: #0E0E0E;        /* Void Charcoal — not pure black, which smears on OLED */
	--pkz-surface: #161616;       /* Card surface, one step off the canvas */
	--pkz-gold: #FFD700;          /* Panakkizhi Gold — the brand */
	--pkz-gold-aged: #C9A227;     /* Gold at rest: borders, inactive */
	--pkz-gold-hairline: rgba(255, 215, 0, 0.22);
	--pkz-text: #F5F1EA;          /* Warm bone, not #FFF */
	--pkz-text-muted: #A8A29A;
}

/* Frappe stamps the route on the body: <body data-path="login" …>. Verified on
 * the live page rather than assumed — the class-based selectors that look
 * plausible here (`body.page-login`) do not exist. */
body[data-path="login"],
body[data-path="update-password"] {
	background: var(--pkz-canvas);
	color: var(--pkz-text);
}

/* --- The card ----------------------------------------------------------- */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	background: var(--pkz-surface);
	border: 1px solid var(--pkz-gold-hairline);
	border-radius: 16px;
	/* DESIGN.md bans gradients and heavy shadows; a hairline does the work. */
	box-shadow: none;
}

body[data-path="login"] .page-card-head h4,
body[data-path="update-password"] .page-card-head h4 {
	color: var(--pkz-text);
}

body[data-path="login"] .page-card-subtitle,
body[data-path="login"] .text-muted {
	color: var(--pkz-text-muted);
}

/* --- The mark ------------------------------------------------------------
 * The logo is a circular seal with a wordmark inside it, so it needs room to
 * be legible. 72px is the smallest size at which "PANAKKIZHI" still reads;
 * below that the ≤40px text-free variant is required, and that has not been
 * drawn yet (see the logo README). */
body[data-path="login"] img.app-logo,
body[data-path="update-password"] img.app-logo {
	/* Frappe's login bundle sets `img.app-logo { max-height: 32px; width: auto }`.
	 * Setting height alone loses to that max-height, so it is overridden here
	 * too — measured on the rendered page, not assumed. */
	width: 72px;
	height: 72px;
	max-height: 72px;
	margin-bottom: 12px;
}

/* --- Fields --------------------------------------------------------------
 * Dark inputs. Frappe's defaults assume a light card, so both the surface and
 * the autofill override are needed — Chrome repaints autofilled inputs white
 * otherwise, which is the one thing that gives a dark form away. */
/* Frappe's winning rule is `.for-login .page-card .page-card-body
 * input[type="text"] { background: var(--surface-white) }` — specificity
 * (0,4,1), found with CDP getMatchedStylesForNode rather than by reading SCSS.
 * `body[…] input.form-control` inside the same two containers is (0,4,2) and
 * takes it. Overriding `--surface-white` on the body would also work and is
 * shorter, but that variable is used well beyond these inputs, so this stays
 * targeted. */
body[data-path="login"] .page-card .page-card-body input.form-control,
body[data-path="update-password"] .page-card .page-card-body input.form-control {
	background: #0F0F0F;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--pkz-text);
}

body[data-path="login"] .page-card .page-card-body input.form-control:focus,
body[data-path="update-password"] .page-card .page-card-body input.form-control:focus {
	background: #0F0F0F;
	border-color: var(--pkz-gold);
	box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18);
}

body[data-path="login"] .page-card .page-card-body input.form-control::placeholder {
	color: #6B6660;
}

body[data-path="login"] input:-webkit-autofill,
body[data-path="login"] input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--pkz-text);
	-webkit-box-shadow: 0 0 0 1000px #0F0F0F inset;
	caret-color: var(--pkz-text);
}

body[data-path="login"] .form-label,
body[data-path="login"] .field-icon,
body[data-path="login"] .es-lock {
	color: var(--pkz-text-muted);
}

/* --- Actions -------------------------------------------------------------
 * Gold is the primary action and appears nowhere else on this page — DESIGN.md:
 * "gold appears rarely and only where it means something." */
/* The submit button carries `btn btn-sm btn-default btn-block btn-login`, so it
 * matches BOTH rules below. `:not(.btn-login-option)` keeps the two apart —
 * without it the later secondary rule won on equal specificity and the primary
 * action silently lost its gold. The extra `.page-card` also outranks Frappe's
 * own `.btn-default`, which otherwise paints it light. */
body[data-path="login"] .page-card .btn-login:not(.btn-login-option),
body[data-path="update-password"] .page-card .btn-primary {
	background: var(--pkz-gold);
	border-color: var(--pkz-gold);
	color: #0E0E0E;
	font-weight: 600;
}

body[data-path="login"] .page-card .btn-login:not(.btn-login-option):hover,
body[data-path="update-password"] .page-card .btn-primary:hover {
	background: var(--pkz-gold-aged);
	border-color: var(--pkz-gold-aged);
	color: #0E0E0E;
}

/* Secondary actions stay quiet — outlined, never a second gold block.
 *
 * Frappe compiles this as `.for-login .page-card .page-card-actions
 * .btn-login-option` — specificity (0,4,0). The obvious two-level selector here
 * is (0,3,1) and loses, which is why the button kept rendering light grey.
 * Matching its depth makes this (0,4,1). Checked against the compiled bundle
 * rather than guessed. */
body[data-path="login"] .page-card .page-card-actions .btn-login-option {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--pkz-text);
}

body[data-path="login"] .page-card .page-card-actions .btn-login-option:hover {
	border: 1px solid var(--pkz-gold-hairline);
	color: var(--pkz-gold);
	background: transparent;
}

body[data-path="login"] a,
body[data-path="login"] .btn-resend-link {
	color: var(--pkz-gold-aged);
}

body[data-path="login"] a:hover {
	color: var(--pkz-gold);
}

/* --- Feedback ------------------------------------------------------------
 * Frappe's own error colour is `var(--ink-red-4)` (#CC2929), chosen for a white
 * card. On this near-black one it measures **3.38:1** — below WCAG AA's 4.5:1
 * for body text, and this is the message that tells someone their password was
 * wrong. #FF6B6B measures 6.52:1 on the same surface.
 *
 * Frappe's selector is `.for-login .page-card .page-card-body
 * .login-error-banner` (0,4,0), so these match its depth. The message itself
 * sits in an unclassed <span> and simply inherits. */
body[data-path="login"] .page-card .page-card-body .login-error-banner,
body[data-path="login"] .page-card .page-card-body .field-error {
	color: #FF6B6B;
	/* The banner also ships a near-white pink fill, which reads as a hole
	 * punched in the dark card. A low-alpha red keeps it legible as an alert
	 * without lighting up the whole panel. */
	background: rgba(255, 107, 107, 0.10);
	border: 1px solid rgba(255, 107, 107, 0.28);
}

body[data-path="login"] .page-card .page-card-body .login-success-banner {
	/* 8.4:1 on the card. */
	color: #6BCB77;
}

/* Focus must stay visible for keyboard users on a dark ground. */
body[data-path="login"] :focus-visible {
	outline: 2px solid var(--pkz-gold);
	outline-offset: 2px;
}