/* DALOO's OWN override sheet. NOT part of Nagish Li and not covered by its licence.
   ------------------------------------------------------------------------------
   Why this file exists: nl_color accepts only a fixed list of colour NAMES
   (blue|red|green|purple|yellow|pink|gray|brown|orange|turquoise|black). It does
   not accept a hex value, so the brand terracotta #e8714c cannot be passed as
   configuration. We therefore select the nearest supported name, "orange", and
   repaint it here.

   Specificity note, and it is load-bearing: every rule the widget injects is
   !important, and it injects its <style> into a <nagishli> element appended to
   <body>, i.e. AFTER this stylesheet in document order. Matching its specificity
   would therefore lose. Each selector below adds a leading `html` (and `html body`
   where the widget's own selector starts at an id) purely to outrank it. Do not
   "tidy" the leading element away.

   Scope is deliberately narrow: the widget's own chrome only. Nothing here touches
   the host page, and nothing here touches the user's own colour choices, which the
   widget applies to <body> through a different mechanism. */

:root {
  --daloo-a11y-primary: #e8714c;  /* brand terracotta */
  --daloo-a11y-light: #f0855f;    /* hover / active */
  --daloo-a11y-dark: #cf5b38;     /* inset shadow */
  --daloo-a11y-track: #eee;       /* unchanged from the widget */
}

/* The dropdown toggles that make up the visible bar. */
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-toggle {
  background: var(--daloo-a11y-primary) !important;
  box-shadow: 0 1px 0 var(--daloo-a11y-light) inset, 0 -1px 0 var(--daloo-a11y-dark) inset !important;
}

html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-toggle:hover,
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-toggle:focus {
  background: var(--daloo-a11y-light) !important;
}

/* Menu item separators. The widget also READS this colour back off the last item
   (border-bottom-color) and reuses it as the heading colour inside its modals, so
   overriding it here is what carries the brand into the "אודות" and statement
   panels as well. */
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-menu > li > div,
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown:last-child > .nl-dropdown-menu > li:last-child > div {
  border-color: var(--daloo-a11y-primary) !important;
}

/* Scrollbars inside the bar and inside the modal overlay. */
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange::-webkit-scrollbar-thumb,
html body #NagishLiOverlayContent.orange::-webkit-scrollbar-thumb {
  background: var(--daloo-a11y-primary) !important;
}

html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange::-webkit-scrollbar-thumb:active,
html body #NagishLiOverlayContent.orange::-webkit-scrollbar-thumb:active {
  background: var(--daloo-a11y-light) !important;
}

html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange,
html body #NagishLiOverlayContent.orange {
  scrollbar-color: var(--daloo-a11y-primary) var(--daloo-a11y-track) !important;
}

/* ── THE CLOSED TAB VERSUS THE PAGE'S OWN TOP BAR ─────────────────────────────
   MEASURED at 390 x 844 in Edge with the viewport set through CDP, because Edge
   refuses to open a window narrower than about 500px and a --window-size of 390
   produces a fake result. The closed tab occupies x 342-390, y 0-42. The org
   dashboard's top bar occupies y 20-60 and its ONLY navigation control on mobile,
   button.company-topbar-hamburger, occupies x 320-360 y 20-60 — so 18 x 22 px of a
   40 x 40 hit target, its top-right corner, sat UNDER the tab, and the tab wins on
   z-index. In RTL that corner is where a thumb lands first.

   ⚠️ margin-top IS THE LEVER, AND top: CAN NEVER BE. The widget positions its bar
   with an INLINE important declaration — measured, the live attribute reads
   `inset: 0vh 0px auto auto !important; position: fixed !important;` — and an inline
   !important outranks any stylesheet, !important or not. margin-top is not among the
   properties it sets, so this rule wins.
   And it is SAFE for the two bottom positions the visitor can pick from the widget's
   own move handle: for BR and BL the widget sets `bottom: 0vh !important; top: auto
   !important`, and for a fixed box with top auto and bottom fixed the margin is
   absorbed by the solved top, leaving the bottom edge where it was. Verified in the
   browser by reproducing the widget's exact BR declaration and re-measuring: the bar
   did not move.

   ⚠️ AND IT APPLIES ONLY WHILE THE BAR IS CLOSED, which is not tidiness. #NagishLiMenus
   carries max-height: (window height - 41)px, i.e. the widget's own invariant is that
   an open bar exactly fits the viewport below its strip. Offsetting an OPEN bar by 66px
   would push its last 66px below the fold and make the final menu items unreachable —
   an accessibility regression dressed as an accessibility fix. The widget adds .open to
   #NagishLiBarStrip when the menus are showing, so the offset drops to zero the moment
   the visitor opens it and the invariant is never touched.

   NOT FIXED HERE, AND IT IS NOT MINE TO FIX: at 1280 the tab (x 1232-1280, y 0-42)
   still clips a 16 x 10 corner of the topbar's "הגדרות" pill (x 1155-1248, y 32-72),
   and the fixed gear from src/components/GlobalSettingsButton.tsx (x 14-50, y 14-50)
   sits on the brand lockup at BOTH widths — 18 x 20 px at 1280, 20 x 29 px at 390.
   Those live in files outside this change's allotment. */
@media (max-width: 640px) {
  html nagishli#NagishLiTag > #NagishLiBar:has(> #NagishLiBarStrip:not(.open)) {
    margin-top: 66px !important;
  }
}
