/* 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;
  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. Lay the logo and credit side by side. Upstream renders both as block-level
 *    (img.block + span.mt-1.block) so they stack vertically; flex puts them in a
 *    row and mt-1 has to go or the credit sits low. */
aside.oe-sidebar button[aria-label="Customise branding"],
[data-testid="app-sidebar"] button[aria-label="Customise branding"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 4. Replace the hardcoded credit. font-size:0 collapses the "by" text node and
 *    the nested Open/Construction/ERP spans (they inherit it); ::after restores a
 *    real size for our own text. */
aside.oe-sidebar button[aria-label="Customise branding"] > span:last-child,
[data-testid="app-sidebar"] button[aria-label="Customise branding"] > span:last-child {
  font-size: 0 !important;
  margin-top: 0 !important;     /* kill upstream's mt-1, which stacked it below */
  flex: 0 1 auto;
  min-width: 0;                 /* let `truncate` still work inside the flex row */
}
aside.oe-sidebar button[aria-label="Customise branding"] > span:last-child::after,
[data-testid="app-sidebar"] button[aria-label="Customise branding"] > span:last-child::after {
  content: "by ACHI Scaffolding";
  font-size: 8px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, .58);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* --- 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;
}
