/* Strip widget chrome around our finance front-components.

   ⚠️ SCOPING: Twenty has no stable DOM marker for "CANVAS-mode tab" vs
   multi-widget DASHBOARD/STANDALONE pages — variant is computed in JS and
   compiled away by Linaria. We use `:only-child` of `.react-grid-layout` as
   a proxy: our CANVAS tabs have exactly ONE widget per tab, native Twenty
   dashboards have multiple. So every rule below is gated on
   `.react-grid-item:only-child` to avoid breaking native multi-widget
   dashboards (e.g. "My First Dashboard") whose widgets need their card
   chrome AND the react-grid-layout's own pixel positioning.

   Maintained in the twenty-finance repo at infra/twenty-overrides/.
   Deployed to /opt/twenty/twenty-finance-overrides.css by bootstrap.sh.
   See OPS.md §1.1.c. */

/* 1. Strip per-widget chrome (border / bg / padding / border-radius) — only
      for the sole widget on a CANVAS tab. */
.react-grid-item:only-child .widget {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.react-grid-item:only-child .widget > div {
  padding: 0 !important;
  /* Twenty wraps our React content in a SidePanel-style container
     (Emotion class .s12u5dly etc.) that adds its own border/bg/radius via
     CSS-vars. Strip them — we want flush-with-page like native tables. */
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Twenty renders an empty 24px-tall placeholder for the widget title-bar
   as the first child of `.widget` even when widget.title is blank. Hide it. */
.react-grid-item:only-child .widget > div:first-child {
  display: none !important;
}

/* 2. Strip 8px padding on the IMMEDIATE parent of `.react-grid-layout` —
   only when that grid contains a single widget (our CANVAS case). Multi-
   widget native dashboards keep their outer gutter. We deliberately don't
   touch the page-layout content container (`sqk4ymo` etc.) so Twenty's 12px
   right/bottom gutter around the page area stays. */
*:has(> .react-grid-layout > .react-grid-item:only-child) {
  padding: 0 !important;
  height: 100% !important;
}

/* 5. Hide artifacts Twenty adds to VIEW-type sidebar nav items:
      - the small grey "object icon overlay" (StyledViewOverlay, bottom-right
        of the icon tile) — duplicates the colored icon visually
      - the secondary label " · ObjectName" after the item name
   See NavigationMenuItemIcon.tsx & NavigationDrawerItem.tsx upstream.
   ⚠️ Linaria-hashed class names — re-verify after Twenty upgrades. To find
   new hashes: open sidebar in DevTools, find any VIEW item, look for a
   `<div>` with `position: absolute; bottom: -5px; right: -6px` (overlay)
   and a `<span>` whose text starts with " · " (secondary label).
   We can't switch VIEW → OBJECT type because OBJECT loses the specific
   viewId binding (would land on default view, not our pre-built ones). */
.s1ibkgiv {
  display: none !important;
}
.se0vtxf {
  display: none !important;
}

/* 3. react-grid-layout inline-styles each item with a fixed pixel width and
   the layout container with a fixed pixel height derived from
   `rowHeight × rowSpan`. For our single-widget CANVAS tabs this leaves gaps
   (~20px right, ~38px bottom). Force fill to 100%×100% — but ONLY for
   single-widget grids. Multi-widget grids MUST keep their inline pixel
   sizing or items will all stretch to 100% and overlap (this is exactly
   what broke "My First Dashboard"). */
.react-grid-layout:has(> .react-grid-item:only-child) {
  margin: 0 !important;
  height: 100% !important;
}
.react-grid-layout > .react-grid-item:only-child {
  width: 100% !important;
  height: 100% !important;
}