/* ACHI Scaffolding — theme overrides
 *
 * TIER 3 CUSTOMISATION. Read deploy/overrides/README.md before touching this.
 *
 * Injected into <head> by the proxy AFTER OpenConstructionERP's own stylesheet, so
 * these win on cascade order without any upstream file being modified.
 *
 * WHY THIS FILE EXISTS: the partner pack's `branding.primary_color` does NOT theme the
 * app. MANIFEST_REFERENCE.md claims it "replaces the CSS variable --oe-primary at boot";
 * that variable does not exist in the bundle (0 occurrences in CSS, 0 in JS). It only
 * tints one dismissible co-brand chip. Verified against 11.9.0.
 *
 * DO NOT override --ddc-sig / --ddc-origin / --__rev-c / --__lc-rev / --ddc-author.
 * They are upstream provenance notices and TRADEMARK.md §6 requires retaining them.
 */

:root {
  /* ACHI navy #284F9E — sampled from logo.png (86.8% of pixels, all four corners).
   * NB: the Frappe PWA manifest declares theme_color #378ADD, a much lighter blue
   * that does NOT match the logo. The logo is authoritative here so the mark blends
   * into the sidebar; the manifest is worth reconciling separately. */
  --oe-blue:        #284F9E;
  --oe-blue-hover:  #305FB8;
  --oe-blue-active: #1F3F80;
  --oe-blue-dark:   #1B366D;
  --oe-blue-text:   #1F3F80;
  --oe-blue-subtle: #EDF1F9;
  --oe-blue-ch:     40 79 158;    /* rgb triplet — Tailwind opacity utilities read this */
}

.dark {
  --oe-blue:        #5B82D4;
  --oe-blue-hover:  #7A9CE0;
  --oe-blue-active: #284F9E;
  --oe-blue-dark:   #1F3F80;
  --oe-blue-text:   #AFC4EC;
  --oe-blue-subtle: rgba(40, 79, 158, .18);
  --oe-blue-ch:     91 130 212;
}

/* --- Sidebar in the brand colour ------------------------------------------
 * Confirmed against a rendered page (DevTools):
 *   <aside class="oe-sidebar relative flex h-full w-sidebar flex-col bg-surface-primary"
 *          data-testid="app-sidebar" data-tour="sidebar">
 *
 * .bg-surface-primary resolves to:
 *     background-color: rgb(var(--oe-bg-ch) / var(--tw-bg-opacity, 1))
 *
 * --oe-bg-ch is the GLOBAL surface (255 255 255). Overriding it in :root would
 * paint the whole app blue. So we RESCOPE it to the sidebar subtree instead:
 * CSS custom properties inherit, so redefining --oe-bg-ch on the <aside> repaints
 * the sidebar and everything inside it, and leaves the rest of the app alone.
 *
 * No !important, no specificity war, no component selectors beyond the element
 * itself. If upstream renames --oe-bg-ch this degrades to the default white
 * sidebar — visibly wrong, not broken.
 */
aside.oe-sidebar,
[data-testid="app-sidebar"] {
  --oe-bg-ch:            40 79 158;               /* EXACTLY logo.png's background (#284F9E)
                                                   * so the logo square dissolves into the
                                                   * sidebar instead of sitting on a tile. */
  --oe-bg:              #284F9E;
  --oe-bg-secondary-ch:  48 95 184;               /* nested surfaces: one step lighter, so
                                                   * depth reads on a dark ground */
  --oe-bg-tertiary-ch:   48 95 184;
  --oe-bg-elevated-ch:   48 95 184;

  /* Text and borders must invert or the sidebar is unreadable on blue. */
  --oe-text-primary:    #ffffff;
  --oe-text-secondary:  rgba(255, 255, 255, .80);
  --oe-text-tertiary:   rgba(255, 255, 255, .64);
  --oe-text-quaternary: rgba(255, 255, 255, .55);
  --oe-border:          rgba(255, 255, 255, .18);
  --oe-border-light:    rgba(255, 255, 255, .12);

  /* Accent. --oe-blue-ch is read by BOTH .text-oe-blue and .bg-oe-blue, which on a
   * dark sidebar want opposite things. Count the consumers before choosing:
   *
   *   TEXT / BORDER / WASH (wants LIGHT) — the active nav row, aria-current="page":
   *       border-oe-blue  bg-oe-blue/[0.14]  text-oe-blue
   *     plus the pin button's hover:text-oe-blue and the chevron's text-oe-blue/60.
   *   SOLID BACKGROUND (wants DARK) — exactly ONE element: the collapse button's
   *       hover:bg-oe-blue hover:text-white
   *
   * So: light wins the variable, and the single exception is overridden below.
   *
   * #E3EDFB measured against the navy ground:
   *     text on the active row (bg-oe-blue/[0.14] -> #4265AB) : 4.83:1  PASS AA
   *     text on plain navy                                    : 6.58:1  PASS AA
   * #C7DBF7 fails at 4.17:1 on the row — the 14% wash lightens row and text
   * together, so contrast between them barely improves as you go lighter. Pure
   * white passes but makes the active row indistinguishable from inactive ones.
   * Re-measure before changing. */
  --oe-blue:            #E3EDFB;
  --oe-blue-ch:         227 237 251;
  --oe-blue-hover:      #FFFFFF;
  --oe-blue-active:     #C7DBF7;
  --oe-blue-subtle:     rgba(255, 255, 255, .16);
  --oe-blue-text:       #E3EDFB;
}

/* The native sidebar scrolls its module list vertically. Synthetic ACHI rows
 * can make that list a few pixels wider during the 248px -> 64px transition,
 * which exposed both horizontal and vertical scrollbar tracks when collapsed.
 * Keep wheel/touch/keyboard scrolling, but contain horizontal overflow and hide
 * scrollbar chrome inside the navigation rail. */
aside.oe-sidebar,
[data-testid="app-sidebar"] {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
aside.oe-sidebar *,
[data-testid="app-sidebar"] * {
  scrollbar-width: none;
}
aside.oe-sidebar::-webkit-scrollbar,
aside.oe-sidebar *::-webkit-scrollbar,
[data-testid="app-sidebar"]::-webkit-scrollbar,
[data-testid="app-sidebar"] *::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Module links are reordered by achi-nav.js. Keep the drag affordance subtle:
 * the whole row remains the handle, with a clear lift state while moving. */
aside.oe-sidebar li.achi-sidebar-draggable,
[data-testid="app-sidebar"] li.achi-sidebar-draggable {
  cursor: grab;
}
aside.oe-sidebar li.achi-sidebar-dragging,
[data-testid="app-sidebar"] li.achi-sidebar-dragging {
  cursor: grabbing;
  opacity: .58;
  outline: 1px dashed rgba(255,255,255,.72);
  outline-offset: -2px;
}

/* --- Hide upstream's community links in the sidebar footer -----------------
 * Confirmed in DevTools:
 *   <div class="pt-2 pb-1 flex flex-col items-center gap-1">
 *     <a href="https://github.com/datadrivenconstruction/OpenConstructionERP" …>
 *     <a href="https://t.me/datadrivenconstruction" …>
 *
 * Targeted by HREF, not by class. The Tailwind classes here ("pt-2 pb-1 flex
 * flex-col items-center gap-1") are generic and appear all over the app — matching
 * them would hide things at random on upgrade. The vendor's own URLs are specific
 * and far more stable.
 *
 * :has() collapses the wrapper too, so we don't leave its pt-2/pb-1 padding and a
 * stray gradient divider floating in the footer.
 *
 * LEGAL: these are community links, not legal notices. The About page (/about) is
 * untouched and still carries upstream's copyright and licence — AGPL §5(d) wants
 * Appropriate Legal Notices to keep being displayed, and TRADEMARK.md §6 requires
 * retaining notices. Do not "tidy away" /about.
 */
aside.oe-sidebar a[href*="github.com/datadrivenconstruction"],
aside.oe-sidebar a[href*="t.me/datadrivenconstruction"],
[data-testid="app-sidebar"] a[href*="datadrivenconstruction"] {
  display: none !important;
}

/* Collapse the now-empty wrapper (and its divider) rather than leave a gap. */
aside.oe-sidebar div:has(> a[href*="datadrivenconstruction"]) {
  display: none !important;
}

/* --- Hide upstream's module-marketing cards from the sidebar footer --------
 * Confirmed in DevTools:
 *   <div class="pt-2 pb-1 px-3"><a href="/modules/developer-guide">Add module</a></div>
 *   <div class="pt-1 pb-3 px-3"><button aria-haspopup="dialog">Request a custom module</button></div>
 *
 * The first is matched by href — specific and stable. The second has no href, so
 * it is matched by its sparkles icon plus aria-haspopup: still far more stable
 * than its Tailwind classes ("pt-1 pb-3 px-3" is generic and used elsewhere).
 * :has() takes the wrapper so no padding is left behind.
 *
 * "Request a custom module" opens a dialog that sends a request to the VENDOR,
 * not to us. It has no place in ACHI's sidebar. The developer guide stays
 * reachable at /modules/developer-guide for whoever is building modules/achi/.
 */
aside.oe-sidebar div:has(> a[href="/modules/developer-guide"]),
aside.oe-sidebar div:has(> button[aria-haspopup="dialog"]:has(svg.lucide-sparkles)) {
  display: none !important;
}

/* --- The one element that needs --oe-blue as a SOLID background -------------
 * <button aria-label="Collapse sidebar" class="… hover:bg-oe-blue hover:text-white …">
 * With --oe-blue light (correct for the active nav row), this would paint white
 * text on a near-white pill and the chevron would vanish — the "white flash".
 * #3D6BC4 gives 5.12:1 against white text (WCAG AA).
 */
aside.oe-sidebar button[aria-label="Collapse sidebar"]:hover,
[data-testid="app-sidebar"] button[aria-label="Collapse sidebar"]:hover {
  background-color: #3D6BC4 !important;
  border-color:     #3D6BC4 !important;
}

/* --- Branding widget: kill the highlight, the pen, and the hardcoded credit ---
 *
 * IMPORTANT: "by OpenConstructionERP" here is NOT branding.powered_by_text. It is
 * HARDCODED JSX in the component (index-*.js, function Cw):
 *     children: ["by", " ", <span>"Open"<span>Construction</span><span>ERP</span></span>]
 * No pack setting, no API field, and no config reaches it. CSS or a fork are the
 * only options — so we blank the text and print our own with ::after.
 *
 * TRADEMARK.md §4 requires replacing DDC marks in a modified product's UI, so this
 * is the required direction, not merely cosmetic. /about still carries upstream's
 * copyright and licence (AGPL §5(d)) — that stays.
 */

/* 1. No hover highlight on the logo (upstream: hover:bg-surface-secondary/40). */
aside.oe-sidebar button[aria-label="Customise branding"]:hover,
[data-testid="app-sidebar"] button[aria-label="Customise branding"]:hover {
  background-color: transparent !important;
}

/* 2. Hide the pen. Its aria-label is identical to the logo button's, so it is
 *    matched on `title`, which is unique to it. NOTE: clicking the LOGO still
 *    opens the same branding dialog — this hides the button, not the feature. */
aside.oe-sidebar button[title="Add your logo or company name"],
[data-testid="app-sidebar"] button[title="Add your logo or company name"] {
  display: none !important;
}

/* 3. Replace the whole brand block with the product name "ARARA".
 *    No logo and no "by …" credit. The slot is upstream's `div.flex-1.min-w-0`,
 *    whose only child is the branding button (logo/text mode) OR the
 *    OpenConstructionERP link (default mode) — so this covers every branding
 *    mode, including a stale custom logo cached in the browser. Children are
 *    hidden (font-size:0 also collapses bare text nodes) and ::after prints
 *    the name. The DDC mark leaves the UI (TRADEMARK.md §4); /about and the
 *    footer notices are untouched. */
aside.oe-sidebar button[aria-label="Customise branding"],
[data-testid="app-sidebar"] button[aria-label="Customise branding"],
aside.oe-sidebar a[title="OpenConstructionERP"],
[data-testid="app-sidebar"] a[title="OpenConstructionERP"] {
  display: flex !important;
  align-items: center !important;
  font-size: 0 !important;
  pointer-events: none !important;   /* no branding dialog, no outbound link */
}
aside.oe-sidebar button[aria-label="Customise branding"] > *,
[data-testid="app-sidebar"] button[aria-label="Customise branding"] > *,
aside.oe-sidebar a[title="OpenConstructionERP"] > *,
[data-testid="app-sidebar"] a[title="OpenConstructionERP"] > * {
  display: none !important;
}
aside.oe-sidebar button[aria-label="Customise branding"]::after,
[data-testid="app-sidebar"] button[aria-label="Customise branding"]::after,
aside.oe-sidebar a[title="OpenConstructionERP"]::after,
[data-testid="app-sidebar"] a[title="OpenConstructionERP"]::after {
  content: "ARARA";
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Collapsed (iconified) sidebar: the slot is ~28px wide, so just "A". */
aside.oe-sidebar :not(.min-w-0) > button[aria-label="Customise branding"]::after,
[data-testid="app-sidebar"] :not(.min-w-0) > button[aria-label="Customise branding"]::after,
aside.oe-sidebar :not(.min-w-0) > a[title="OpenConstructionERP"]::after,
[data-testid="app-sidebar"] :not(.min-w-0) > a[title="OpenConstructionERP"]::after {
  content: "A";
  letter-spacing: 0;
}

/* --- 5. Hide the "Uberization of Construction" article card ----------------
 *
 * A promotional card linking out to openconstructionerp.com, pinned above the
 * sidebar footer. Hidden here because it competes for attention in a sidebar
 * the crew reads all day; it is not a notice we are required to keep.
 *
 * SCOPE, deliberately: this hides ONE marketing card. It does NOT touch the
 * copyright, licence or provenance notices --ddc-sig / --ddc-origin / --__rev-c
 * / --__lc-rev / --ddc-author, nor the "v11.9.0 · AGPL-3.0" footer, all of which
 * TRADEMARK.md §6 requires retaining and which stay exactly as upstream ships
 * them. Read `deploy/overrides/README.md` before extending this rule.
 *
 * `data-testid` is a stable hook (upstream's own test selector), so this is less
 * fragile than matching the generated Tailwind classes beside it. If upstream
 * renames it the card simply comes back — visibly, not silently.
 */
[data-testid="sidebar-article-news"] {
  display: none !important;
}

/* --- Login screen: remove the two text lines under the logo -----------------
 *
 * The user wants the sign-in header to carry only the (now circular) logo — no
 * brand credit and no tagline. This SUPERSEDES the earlier "rewrite
 * by OpenConstructionERP -> Achi Scaffolding" rule, which is why that block is
 * gone: the DDC mark is now REMOVED from the sign-in UI rather than replaced,
 * which still satisfies TRADEMARK.md §4. The login FOOTER author attribution
 * ("… · OpenConstructionERP · info@datadrivenconstruction…") and /about are
 * untouched, so the AGPL §5(d) / TRADEMARK.md §6 legal notices stay displayed.
 *
 * Confirmed DOM (built bundle assets/index-*.js) — inside the centered brand
 * wrapper sit, in order, the header row (logo + white-label pen), then the
 * tagline <p>:
 *   <div class="relative mb-5 flex flex-col items-center …">
 *     <div class="flex items-center gap-2">
 *       <… logo …>
 *       "by " <span class="font-semibold tracking-tight">Open…ERP</span>   (custom-logo branch credit)
 *       — or — <span class="text-2xl font-medium …">Open…ERP</span>        (default branch name)
 *       <button … aria-label="Customize logo">✎</button>
 *     </div>
 *     <p class="mt-2 text-sm text-content-tertiary">Professional construction…</p>
 *   </div>
 *
 * The white-label pen is the stable, login-only anchor. `:has(> button…)` picks
 * the header row (pen is its direct child); the credit "by …" span is hidden as
 * a whole via span:has(> span.font-semibold.tracking-tight) so "by" goes too,
 * and the default-branch big name via .text-2xl.font-medium. The tagline sits
 * OUTSIDE that row, so it is reached from the wrapper with a descendant
 * :has(button…) plus a direct-child `> p` — which no other pen-containing
 * ancestor has, so nothing else is hit. British "Customise" is listed beside
 * the American "Customize" in case a future build flips the spelling.
 */
/* line 1 — the "by …" credit (custom-logo branch), the whole span incl. "by" */
:has(> button[aria-label="Customise logo"]) span:has(> span.font-semibold.tracking-tight),
:has(> button[title="Customise logo"]) span:has(> span.font-semibold.tracking-tight),
:has(> button[aria-label="Customize logo"]) span:has(> span.font-semibold.tracking-tight),
:has(> button[title="Customize logo"]) span:has(> span.font-semibold.tracking-tight),
/* line 1 — the big brand name (default branch) */
:has(> button[aria-label="Customise logo"]) span.text-2xl.font-medium,
:has(> button[title="Customise logo"]) span.text-2xl.font-medium,
:has(> button[aria-label="Customize logo"]) span.text-2xl.font-medium,
:has(> button[title="Customize logo"]) span.text-2xl.font-medium,
/* line 2 — the workspace tagline <p>, a sibling below the header row */
div:has(button[aria-label="Customise logo"]) > p.text-sm.text-content-tertiary,
div:has(button[title="Customise logo"]) > p.text-sm.text-content-tertiary,
div:has(button[aria-label="Customize logo"]) > p.text-sm.text-content-tertiary,
div:has(button[title="Customize logo"]) > p.text-sm.text-content-tertiary {
  display: none !important;
}

/* --- Login screen: the product name "ARARA" instead of any logo -------------
 * The header row's first child is the brand block (upstream logo + name in
 * default mode, or the custom logo/name + credit). Hide its contents and print
 * the name. Same pen-button anchor as the rules above, so only the login page. */
:has(> button[aria-label="Customise logo"]) > :first-child > *,
:has(> button[title="Customise logo"]) > :first-child > *,
:has(> button[aria-label="Customize logo"]) > :first-child > *,
:has(> button[title="Customize logo"]) > :first-child > * {
  display: none !important;
}
:has(> button[aria-label="Customise logo"]) > :first-child::after,
:has(> button[title="Customise logo"]) > :first-child::after,
:has(> button[aria-label="Customize logo"]) > :first-child::after,
:has(> button[title="Customize logo"]) > :first-child::after {
  content: "ARARA";
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #284F9E;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* --- Login screen: make the logo mark round, not a square -------------------
 *
 * The brand header renders the logo as <img class="… object-contain"> inside
 * the same header row as the white-label pen button (see the credit rule above
 * for the confirmed DOM). Scoped by :has(> button[… logo]) so it only affects
 * the sign-in logo, never other object-contain images in the app.
 *
 * border-radius:50% on a replaced element (img) clips the bitmap straight to a
 * circle — logo.png is a square (its background is one flat navy, ~87% of the
 * pixels), so the crop just rounds the corners and the arch stays centred.
 * aspect-ratio:1 + object-cover guarantee a true circle even if the source is
 * not perfectly square, rather than an ellipse. overflow:hidden is belt-and-
 * braces for any nested art.
 */
:has(> button[aria-label="Customise logo"]) img.object-contain,
:has(> button[title="Customise logo"]) img.object-contain,
:has(> button[aria-label="Customize logo"]) img.object-contain,
:has(> button[title="Customize logo"]) img.object-contain {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

/* --- Login screen: remove the GitHub / Community link cards ------------------
 *
 * The sign-in page shows two promo cards below the form (confirmed in the built
 * bundle assets/index-*.js):
 *   <div class="mt-4 grid grid-cols-2 gap-3 animate-stagger-in">
 *     <a href="https://github.com/datadrivenconstruction/OpenConstructionERP">GitHub · Source code</a>
 *     <a href="https://t.me/datadrivenconstruction">Community · Get help & discuss</a>
 *   </div>
 * These are community/marketing links, not legal notices — the same class as
 * the sidebar footer links already hidden above, and distinct from /about and
 * the login footer attribution, which stay (AGPL §5(d) / TRADEMARK.md §6).
 *
 * Collapse the whole grid so no empty row or gap is left. The selector needs
 * BOTH DDC links as direct children AND grid-cols-2, so it matches only this
 * two-card row: the sidebar cluster is a flex-col (won't match), and /about —
 * whose GitHub link is the AGPL source offer we must keep — is not a two-column
 * grid of these two links, so it is untouched.
 */
div.grid.grid-cols-2:has(> a[href*="github.com/datadrivenconstruction"]):has(> a[href*="t.me/datadrivenconstruction"]) {
  display: none !important;
}

/* --- Login screen: show only the centered sign-in form ----------------------
 *
 * Remove the left marketing hero (headline, the stat row, the hexagon module
 * grid, the feature bullets, the "Open Source" badge and the AGPL-3.0 · OCE
 * line), keep the top-right theme + language controls exactly where they are,
 * and centre the sign-in card on the page.
 *
 * Confirmed DOM (built bundle assets/index-*.js):
 *   <div class="relative grid h-screen grid-cols-1 lg:grid-cols-2 bg-surface-secondary …">
 *     … decorative blobs (absolute, z-0) …
 *     <div class="absolute top-4 right-4 z-30 …"> theme toggle + language </div>   (KEEP — absolute, unaffected)
 *     <div class="hidden lg:flex … lg:order-2 …"> marketing hero </div>            (REMOVE)
 *     <div class="relative flex items-center justify-center … lg:order-1 …"> sign-in card </div>  (CENTRE)
 *   </div>
 *
 * The controls are positioned absolutely against the grid, so removing the hero
 * column does not move them. On lg the grid keeps two column tracks even with
 * the hero display:none, which would pin the form to the left half — so we
 * collapse the grid to a single 1fr track; the form column already centres its
 * card via flex items-center/justify-center, now across the full width.
 *
 * LEGAL: the hero's "AGPL-3.0 · OpenConstructionERP.com" line is removed with
 * it, but /about still displays the full copyright + licence (AGPL §5(d) is
 * satisfied by /about, per the sidebar/login rules above), and the login footer
 * author attribution stays. Only the marketing hero goes.
 */
.grid.lg\:grid-cols-2.bg-surface-secondary {
  grid-template-columns: 1fr !important;
}
.grid.lg\:grid-cols-2.bg-surface-secondary > .lg\:order-2 {
  display: none !important;
}

/* --- Login screen: remove the sign-in card frame ----------------------------
 *
 * The sign-in form sits in a glass panel (confirmed in the built bundle
 * assets/index-*.js): <div class="login-glass-pro relative rounded-2xl px-6
 * py-5 animate-form-scale-in">. `login-glass-pro` is defined in an inline
 * <style> the login component injects — it paints the frame: a translucent
 * gradient background, a 28px backdrop-blur, a 1px border, a big drop shadow,
 * and a ::after highlight overlay. We strip all of that so the fields sit
 * directly on the page background; padding stays so the form keeps its spacing.
 *
 * Scoped to .animate-form-scale-in (the sign-in card) so the other glass panel
 * on the page is untouched. Because login-glass-pro is injected inline (later
 * in the DOM than this file), the two-class selector + !important is what wins
 * the cascade. The aria-hidden/pointer-events-none hairline highlights are
 * decorative children of the card; hidden too so no stray line floats once the
 * panel behind them is gone.
 */
.login-glass-pro.animate-form-scale-in {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.login-glass-pro.animate-form-scale-in::after {
  display: none !important;
}
.login-glass-pro.animate-form-scale-in > .pointer-events-none.absolute {
  display: none !important;
}

/* --- Login screen: no "Sign in / Enter your credentials…" heading -----------
 * The card's first stagger block is <div class="animate-stagger-in"><h2>Sign
 * in</h2><p>Enter your credentials…</p></div> (built bundle). The screen-reader
 * <h1> and the form's aria-label stay, so the page is still labelled. */
.login-glass-pro.animate-form-scale-in > div.animate-stagger-in:has(> h2 + p) {
  display: none !important;
}

/* --- Login screen: no light/dark theme switch --------------------------------
 * Top-right controls (built bundle): <div class="absolute top-4 right-4 z-30">
 * <div role="radiogroup">sun/moon/system</div> <div class="relative">language
 * </div></div>. ARARA is light-only; achi-nav.js also pins the theme to light. */
.absolute.top-4.right-4.z-30 > [role="radiogroup"] {
  display: none !important;
}

/* --- Login screen: language picker in ARARA style ----------------------------
 * Same markup as above: button = globe icon, flag, name, chevron; the open menu
 * is the sibling <div> of flag + name rows. Plain white, navy text, the same
 * hairline border and font as the ARARA pages — no frosted glass, no globe. */
.absolute.top-4.right-4.z-30 > .relative > button {
  gap: 8px !important;
  height: 36px !important;
  padding: 0 12px 0 10px !important;
  border: 1px solid #dfe4ec !important;
  border-radius: 999px !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: #284F9E !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}
.absolute.top-4.right-4.z-30 > .relative > button:hover {
  background: #eef2fb !important;
  border-color: #c9d3e6 !important;
}
.absolute.top-4.right-4.z-30 > .relative > button > svg:first-child {
  display: none !important;                      /* the globe */
}
.absolute.top-4.right-4.z-30 > .relative > button > svg:last-child {
  color: #284F9E !important;                     /* the chevron */
  opacity: .7;
}
.absolute.top-4.right-4.z-30 > .relative img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 0 0 1px rgba(40, 79, 158, .15);
}
.absolute.top-4.right-4.z-30 > .relative > div {
  margin-top: 6px !important;
  width: 220px !important;
  padding: 4px !important;
  border: 1px solid #dfe4ec !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(16, 32, 64, .10) !important;
}
.absolute.top-4.right-4.z-30 > .relative > div > button {
  border-radius: 8px !important;
  padding: 7px 10px !important;
  color: #1d2433 !important;
  font: 500 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}
.absolute.top-4.right-4.z-30 > .relative > div > button:hover {
  background: #eef2fb !important;
}
.absolute.top-4.right-4.z-30 > .relative > div > button.text-oe-blue {
  background: #284F9E !important;
  color: #fff !important;
}
.absolute.top-4.right-4.z-30 > .relative > div > button.text-oe-blue span {
  color: inherit !important;
}

/* --- Login screen: no "Customize logo" pen next to ARARA ---------------------
 * display:none keeps the button in the DOM, so the :has(> button…) anchors the
 * rules above rely on still match. */
button[aria-label="Customise logo"],
button[title="Customise logo"],
button[aria-label="Customize logo"],
button[title="Customize logo"] {
  display: none !important;
}

/* --- Login screen (phone): no "Open Source · The #1 open-source construction ERP" box ---
 * Below lg the sign-in column shows a gradient badge above the card
 * (built bundle assets/index-*.js):
 *   <div class="lg:hidden mb-4 animate-stagger-in">
 *     <div class="rounded-xl bg-gradient-to-r from-oe-blue/10 … px-4 py-3 text-center">
 *       … "Open Source" … <p>The #1 open-source construction ERP</p>
 * Marketing, not a legal notice (the login footer attribution and /about stay).
 * Matched by its own classes and its gradient box child, so nothing else goes.
 */
div.lg\:hidden.mb-4.animate-stagger-in:has(> div.rounded-xl.bg-gradient-to-r.text-center) {
  display: none !important;
}