/* Icarus Analytica -- login / website branding (web_include_css). Matches the desk's 3-color system,
   defaults to DARK to match the org's default desk theme. Ink #15171A, Copper #C2733A, Cream #F4F1EA.
   Light palette applies only when the user's theme is explicitly light (:root[data-theme="light"]). */
:root { --ia-ink: #15171A; --ia-copper: #C2733A; --ia-copper-600: #a5602f; --ia-cream: #F4F1EA; }

/* ---------- DEFAULT = DARK ---------- */
body, .for-login, .login-content, .page-card-container, .web-footer, .navbar {
  background-color: var(--ia-ink) !important; color: var(--ia-cream) !important;
}
.page-card {
  background: #1e2126 !important; border: 1px solid #2b2f36 !important; border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important; color: var(--ia-cream) !important;
  margin: 0 auto 2rem !important;   /* sits directly under the logo, which carries the top spacing */
}
.page-card-head, .page-card h4, .page-card .text-muted, .page-card label { color: var(--ia-cream) !important; }
.page-card .text-muted { opacity: 0.7; }
.page-card .form-control, .page-card input.form-control {
  background: #14161a !important; color: var(--ia-cream) !important; border: 1px solid #3a3f47 !important;
}
.page-card .form-control:focus {
  border-color: var(--ia-copper) !important; box-shadow: 0 0 0 2px rgba(194,115,58,0.25) !important;
}
/* Browser autofill forces a white/yellow bg on inputs -- the inset box-shadow trick is the only way to override it. */
.page-card input:-webkit-autofill,
.page-card input:-webkit-autofill:hover,
.page-card input:-webkit-autofill:focus,
.page-card input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ia-cream) !important;
  -webkit-box-shadow: 0 0 0 1000px #14161a inset !important;
  caret-color: var(--ia-cream) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
.btn-primary {
  background-color: var(--ia-copper) !important; border-color: var(--ia-copper) !important;
  color: #fff !important; font-weight: 600 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--ia-copper-600) !important; border-color: var(--ia-copper-600) !important;
}

/* Links (e.g. "Back to Login") -> copper so they're visible on the dark bg (was near-invisible dark blue) */
.page-card a, .login-content a, .page-card a:visited { color: var(--ia-copper) !important; text-decoration: none; }
.page-card a:hover, .login-content a:hover { color: var(--ia-copper-600) !important; text-decoration: underline; }

/* FULL logo (mark + ICARUS ANALYTICA wordmark): Website Settings.app_logo = /assets/ia_branding/images/logo-full.png
   White transparent PNG shows as-is on dark; the filter inverts it to black on the light theme (theme-dynamic, one file).
   The logo + heading BOTH live in .page-card-head (a block above the form card) -- so keep the head visible for the
   logo and hide ONLY the <h4> heading text. .page-card-head carries the top spacing; the card tucks right under it. */
.page-card-head { display: block !important; text-align: center !important; margin: 9vh auto 0 !important; padding: 0 !important; }
.page-card-head h4, .page-card-head .indicator { display: none !important; }
/* height (not max-height) RESERVES the box before the PNG arrives -- on slow networks the
   unreserved image caused a measured 72px layout shift when it loaded (Slow-3G probe). */
.app-logo { height: 72px !important; max-height: 72px !important; aspect-ratio: 800 / 237;
  width: auto !important; max-width: 340px !important; display: block !important; margin: 0 auto 1.25rem !important; }
/* height reserves the box pre-load (CLS fix); max-height:72 must ALSO be declared or frappe
   v15.113's own .app-logo{max-height:42px} caps the used height (measured: logo shrank to 42);
   aspect-ratio reserves the width too, so the box is fully stable before the PNG arrives. */
:root[data-theme="light"] .app-logo { filter: brightness(0) !important; }

/* ALL login-option buttons (Microsoft, Email-Link, any future) -> one consistent dark, elevated look */
.btn-login-option {
  background: #14161a !important; color: var(--ia-cream) !important; border: 1px solid #3a3f47 !important;
  border-radius: 8px !important; font-weight: 600 !important; padding: 11px 14px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px;
  box-shadow: none !important;
}
.btn-login-option:hover { border-color: var(--ia-copper) !important; background: #1a1d22 !important; }
/* Microsoft button ONLY: hide the raw "office_365" text, show the 4-square logo + a clean label */
.btn-login-option.btn-office_365 { font-size: 0 !important; }
.btn-login-option.btn-office_365::before {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path fill="%23f35325" d="M1 1h10v10H1z"/><path fill="%2381bc06" d="M12 1h10v10H12z"/><path fill="%2305a6f0" d="M1 12h10v10H1z"/><path fill="%23ffba08" d="M12 12h10v10H12z"/></svg>') center/contain no-repeat;
}
.btn-login-option.btn-office_365::after { content: "Sign in with Microsoft"; font-size: 14px; }

/* ---------- LIGHT theme override (only when the user explicitly picks light) ---------- */
:root[data-theme="light"] body, :root[data-theme="light"] .for-login, :root[data-theme="light"] .login-content,
:root[data-theme="light"] .page-card-container, :root[data-theme="light"] .web-footer, :root[data-theme="light"] .navbar {
  background-color: var(--ia-cream) !important; color: var(--ia-ink) !important;
}
:root[data-theme="light"] .page-card { background: #fff !important; border-color: #e4ded1 !important; color: var(--ia-ink) !important; }
:root[data-theme="light"] .page-card-head, :root[data-theme="light"] .page-card label { color: var(--ia-ink) !important; }
:root[data-theme="light"] .page-card .form-control { background: #fff !important; color: var(--ia-ink) !important; border-color: rgba(0,0,0,0.18) !important; }
:root[data-theme="light"] .btn-login-option { background: #fff !important; color: #2b2b2b !important; border-color: #d4d0c8 !important; }
:root[data-theme="light"] .page-card a, :root[data-theme="light"] .login-content a { color: var(--ia-copper-600) !important; }

/* ---------- pixel parity + interactive password login (2026-07-12, owner) ---------- */
/* Newer frappe templates wrap page content in <main class="container my-4"> -- zero it so the
   9vh logo offset measures from the viewport (keeps erp/learn login pixel-identical). */
main.container.my-4 { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Password login is a first-class method: email/password fields are fully interactive and the
   Login button + "Forgot Password?" link are shown. Higher specificity (html body .for-login ...)
   so this parse-time head_html copy wins over any still-cached web_include_css bundle that predates
   this change -- a harmless no-op once the app bundle is rebuilt from this file. */
html body .for-login input.form-control { pointer-events: auto !important; opacity: 1 !important; user-select: auto !important; caret-color: auto !important; }
html body .for-login .btn-login { display: block !important; pointer-events: auto !important; opacity: 1 !important; }
html body .for-login .forgot-password-message { display: block !important; pointer-events: auto !important; opacity: 1 !important; }
html body .for-login .toggle-password { display: revert !important; pointer-events: auto !important; opacity: 1 !important; }

/* ---------- 404 GOLD STANDARD (owner spec 2026-07-10) ----------
   Base = erp's stock 404 (viewport-centered "Page not found" + plain Back-to-Home), with ONLY the
   link changed: copper accent token, never underlined in ANY state (default/hover/active/focus/
   visited); keyboard users keep a visible copper focus outline via :focus-visible -- removing all
   focus affordance would fail accessibility standards (decision recorded in OPS_WORKLOG).
   Learn's newer-frappe 404 markup (h2/error-text/img-404/btn) is normalized to render identically.
   Counterpart block in the other repo's css -- keep in sync (ia-login.css <-> ia_web.css). */
/* fixed+inset anchors the 404 to the VIEWPORT itself -- both frappe generations wrap the page
   in different chrome (a measured 48px phantom offset on learn resisted every box-model probe);
   a state screen should not depend on ancestor layout at all. */
.error-page { position: fixed; inset: 0; margin: 0 !important; background: var(--ia-ink); display: flex !important; align-items: center; justify-content: center; }
/* margin:0 matters: frappe's stock .error-page carries margin:3rem 0, which shrinks even a fixed
   inset box (and was the original phantom 48px offset, collapsing up through the wrappers). */
.error-page .img-404, .error-page .error-text { display: none !important; }
.error-page h2 { font-size: 0 !important; margin: 0 0 8px !important; }
.error-page h2::before { content: "Page not found"; font-size: 20.8px; font-weight: 600; color: rgb(124, 124, 124); }
.error-page h4 { color: rgb(124, 124, 124); }
.error-page .back-to-home { margin: 0 !important; }
.error-page a, .error-page a:visited, .error-page a:hover, .error-page a:active, .error-page a:focus {
  background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important;
  color: var(--ia-copper) !important; text-decoration: none !important;
  font-size: 14px !important; font-weight: 420 !important; line-height: inherit !important;
}
.error-page a:focus-visible { outline: 2px solid var(--ia-copper) !important; outline-offset: 3px !important; border-radius: 2px !important; }

/* 404 geometry equalizer: learn's page chrome adds a 48px offset above page_content (measured);
   anchor the 404 to the viewport on BOTH sites (no-op on erp, whose wrappers are zero-height). */
body:has(.error-page) .page-header-wrapper,
body:has(.error-page) .page-footer,
body:has(.error-page) .web-footer { display: none !important; }
body:has(.error-page) .page_content,
body:has(.error-page) main.container { margin: 0 !important; padding: 0 !important; }
.error-page h2 { line-height: 0 !important; }
.error-page h2::before { display: block; line-height: 1.5; }

/* internal stack equalizer: same heading margin + same heading->link gap on both markups */
.error-page h4 { margin: 0 0 8px !important; }
.error-page .details, .error-page .back-to-home { margin: 16px 0 0 !important; padding: 0 !important; border: none !important; }

/* exact line boxes: kills the last +-8px between h4 (erp) and h2::before (learn) */
.error-page h2::before { line-height: 31.2px !important; }
.error-page h4 { line-height: 31.2px !important; }
.error-page a { line-height: 21px !important; }