/* ════════════════════════════════════════════════════════════════
   GMAO CMCP — Floating Windows Fix Layer
   ────────────────────────────────────────────────────────────────
   Loaded AFTER /index.css so every rule here wins by cascade.
   Targets every floating element: modals, dialogs, popups,
   bottom sheets, side sheets, notifications, chat widgets.

   Desktop  : 24 px radius on ALL FOUR corners + soft shadow
   Mobile   : 20 px radius on ALL FOUR corners + small bottom gap
              + horizontal pill / handle on top, full‑width
   Z‑index  : works together with /gmao-fix/floating-windows.js
              which increments z‑index per newly opened layer
              so newest is always on top in chronological order.
   ════════════════════════════════════════════════════════════════ */

:root {
  --gmao-fl-accent: #ff6a13;
  --gmao-fl-accent-soft: #fff2e8;
  --gmao-fl-accent-ink: #b74a09;

  --gmao-fl-radius-desktop: 24px;
  --gmao-fl-radius-mobile : 20px;

  /* Premium stacked shadow (desktop) */
  --gmao-fl-shadow-desktop:
       0 0 0 1px rgba(10, 10, 11, 0.04),
       0 2px 4px -2px rgba(10, 10, 11, 0.06),
       0 12px 24px -8px rgba(10, 10, 11, 0.10),
       0 32px 64px -16px rgba(10, 10, 11, 0.22);

  /* Soft upward shadow (mobile bottom sheet) */
  --gmao-fl-shadow-mobile:
       0 0 0 1px rgba(10, 10, 11, 0.05),
       0 -2px 8px -4px rgba(10, 10, 11, 0.06),
       0 -12px 32px -8px rgba(10, 10, 11, 0.18);

  /* Toast / inline notification shadow */
  --gmao-fl-shadow-toast:
       0 1px 2px rgba(10, 10, 11, 0.06),
       0 8px 24px -6px rgba(10, 10, 11, 0.18);

  /* Z‑index scale — JS shim builds on top of these */
  --gmao-fl-z-base   : 99999;
  --gmao-fl-z-toast  : 2147483600;   /* always on top of everything */
}

/* ════════════════════════════════════════════════════════════════
   1) NEUTRALISE THE LEGACY RULE THAT FORCED FLAT BOTTOMS
   ────────────────────────────────────────────────────────────────
   /index.css line 63 said:
     .rounded-t-2xl, [class*="rounded-t-2xl"] {
       border-radius: 18px 18px 0 0 !important;
     }
   That made every desktop modal — which uses
   "rounded-t-2xl md:rounded-md" — keep flat bottom corners.
   The selectors below have higher specificity AND !important,
   so they override the legacy rule everywhere it shows up
   inside a floating overlay.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   2) MODAL BACKDROP — softer + consistent across all overlays
   ════════════════════════════════════════════════════════════════ */
.fixed.inset-0[class*="z-["] > [class*="absolute"][class*="inset-0"] {
  background-color: rgba(10, 10, 11, 0.48) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
          backdrop-filter: blur(8px) saturate(1.2);
}

/* ════════════════════════════════════════════════════════════════
   3) MODAL BOX — the inner panel of every overlay
   ────────────────────────────────────────────────────────────────
   Pattern in app.js (×30+ instances):
     <div class="fixed inset-0 z-[99999] flex items-end md:items-center …">
       <div class="absolute inset-0 bg-black/50 …" />          ← backdrop
       <div class="bg-white … rounded-t-2xl md:rounded-md …">  ← modal box
         …
       </div>
     </div>
   ════════════════════════════════════════════════════════════════ */

/* ── DESKTOP: 24 px on ALL four corners ───────────────────────── */
@media (min-width: 769px) {
  .fixed.inset-0[class*="z-["]    > [class*="rounded-t-2xl"],
  .fixed.inset-0[class*="z-["]    > [class*="rounded-t-xl"],
  .fixed.inset-0[class*="z-["]    > [class*="rounded-t-lg"],
  .fixed.inset-0[class*="z-["]    > [class*="bg-white"][class*="relative"][class*="z-10"],
  .fixed.inset-0[class*="z-["]    > [class*="bg-white"]:not([class*="absolute"]) {
    border-radius: var(--gmao-fl-radius-desktop) !important;
    box-shadow: var(--gmao-fl-shadow-desktop) !important;
    border: 1px solid rgba(10, 10, 11, 0.06) !important;
    overflow: hidden !important;             /* clip content to corners */
    isolation: isolate;
  }

  /* The header strip inside the modal often has rounded-t-* — let it
     flow into the parent's rounded corners cleanly (no double radius). */
  .fixed.inset-0[class*="z-["] [class*="rounded-t-2xl"][class*="md:rounded-t-md"],
  .fixed.inset-0[class*="z-["] [class*="rounded-t-2xl"][class*="md:rounded-t-lg"],
  .fixed.inset-0[class*="z-["] [class*="rounded-t-2xl"][class*="md:rounded-t-xl"] {
    border-radius: 0 !important;             /* parent already clips */
  }
}

/* ── MOBILE: 20 px on ALL four corners + small bottom gap ─────── */
@media (max-width: 768px) {
  /* Slight breathing room around the sheet so all 4 corners are visible */
  .fixed.inset-0[class*="z-["].flex.items-end {
    padding: 0 6px max(env(safe-area-inset-bottom, 0px) + 8px, 8px) !important;
  }
  /* When the existing classes already include p-0, our padding
     inside the container gives the rounded look without breaking layout. */

  .fixed.inset-0[class*="z-["]    > [class*="rounded-t-2xl"],
  .fixed.inset-0[class*="z-["]    > [class*="rounded-t-xl"],
  .fixed.inset-0[class*="z-["]    > [class*="rounded-t-lg"],
  .fixed.inset-0[class*="z-["]    > [class*="bg-white"][class*="relative"][class*="z-10"],
  .fixed.inset-0[class*="z-["]    > [class*="bg-white"]:not([class*="absolute"]) {
    border-radius: var(--gmao-fl-radius-mobile) !important;
    box-shadow: var(--gmao-fl-shadow-mobile) !important;
    border: 1px solid rgba(10, 10, 11, 0.05) !important;
    overflow: hidden !important;
    isolation: isolate;
    /* Keep full width minus the 6px the parent already gives us */
    width: 100% !important;
    max-height: 92vh !important;
  }

  /* Inner header — kill its own corner radius since the parent clips */
  .fixed.inset-0[class*="z-["] [class*="rounded-t-2xl"][class*="md:rounded-t-md"],
  .fixed.inset-0[class*="z-["] [class*="rounded-t-2xl"][class*="md:rounded-t-lg"],
  .fixed.inset-0[class*="z-["] [class*="rounded-t-2xl"][class*="md:rounded-t-xl"] {
    border-radius: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   4) HORIZONTAL PILL / HANDLE on mobile bottom sheets
   ────────────────────────────────────────────────────────────────
   Some modals already render a div with "w-12 h-1.5 bg-gray-300
   rounded-full" wrapped in "flex justify-center pt-3 pb-1 md:hidden".
   Re‑style it so it looks identical everywhere, and inject one via
   ::before for modals that don't render it.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Restyle the existing pill */
  .fixed.inset-0[class*="z-["] [class*="md:hidden"] > [class*="bg-gray-300"][class*="rounded-full"],
  .fixed.inset-0[class*="z-["] [class*="md:hidden"] > [class*="bg-gray-300"][class*="rounded-md"],
  .fixed.inset-0[class*="z-["] [class*="md:hidden"] > [class*="w-12"][class*="bg-gray-300"] {
    width: 40px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(10, 10, 11, 0.18) !important;
    transition: background .15s ease;
  }
  .fixed.inset-0[class*="z-["] [class*="md:hidden"] > [class*="bg-gray-300"][class*="rounded-full"]:hover,
  .fixed.inset-0[class*="z-["] [class*="md:hidden"] > [class*="bg-gray-300"][class*="rounded-md"]:hover {
    background: rgba(10, 10, 11, 0.32) !important;
  }

  /* Auto‑inject a pill for sheets that don't have one.
     Targets the inner panel; the JS shim adds .gmao-fl-sheet to
     panels that lack a native pill. */
  .gmao-fl-sheet::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(10, 10, 11, 0.18);
    z-index: 5;
    pointer-events: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   5) PCTOP MODAL EXCEPTION
   ────────────────────────────────────────────────────────────────
   PCTOP uses "rounded-t-lg md:rounded-none" + "border border-gray-300"
   — md:rounded-none strips desktop radius. Force consistency.
   ════════════════════════════════════════════════════════════════ */
.fixed.inset-0[class*="z-["] > [class*="rounded-t-lg"][class*="md:rounded-none"] {
  border-radius: var(--gmao-fl-radius-mobile) !important;
}
@media (min-width: 769px) {
  .fixed.inset-0[class*="z-["] > [class*="rounded-t-lg"][class*="md:rounded-none"] {
    border-radius: var(--gmao-fl-radius-desktop) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   6) NOTIFICATIONS PANEL — mobile sheet + desktop popover
   ────────────────────────────────────────────────────────────────
   Mobile (line 1645 in app.js): "md:hidden fixed inset-0 z-[9999] …"
   Desktop (line 1667):           "hidden md:block absolute right-0 mt-3 …"
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Mobile notifications sheet */
  .md\:hidden.fixed.inset-0[class*="z-[9999]"] > [class*="rounded-t-2xl"],
  [class*="md:hidden"][class*="z-[9999]"].fixed.inset-0 > [class*="bg-white"][class*="rounded-t"] {
    border-radius: var(--gmao-fl-radius-mobile) !important;
    margin: 0 !important;                    /* parent now provides padding */
    box-shadow: var(--gmao-fl-shadow-mobile) !important;
  }
}

/* Desktop notifications popover (right-anchored card under bell) */
@media (min-width: 769px) {
  [class*="hidden"][class*="md:block"][class*="absolute"][class*="z-[9999]"] {
    border-radius: 18px !important;
    box-shadow: var(--gmao-fl-shadow-desktop) !important;
    border: 1px solid rgba(10, 10, 11, 0.06) !important;
    overflow: hidden;
  }
  /* hide the legacy little arrow notch — looks dated next to round corners */
  [class*="hidden"][class*="md:block"][class*="absolute"][class*="z-[9999]"] >
      [class*="-top-2"][class*="rotate-45"] {
    display: none !important;
  }
  /* internal header / footer flush */
  [class*="hidden"][class*="md:block"][class*="absolute"][class*="z-[9999]"] > [class*="rounded-t-lg"] {
    border-radius: 0 !important;
  }
  [class*="hidden"][class*="md:block"][class*="absolute"][class*="z-[9999]"] > [class*="rounded-b-lg"] {
    border-radius: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   7) CHATBOT FLOATING PANEL  (fixed bottom-6 right-6 … z-50)
   ════════════════════════════════════════════════════════════════ */
.fixed[class*="bottom-6"][class*="right-6"][class*="rounded-md"][class*="z-50"] {
  border-radius: var(--gmao-fl-radius-desktop) !important;
  box-shadow: var(--gmao-fl-shadow-desktop) !important;
  border: 1px solid rgba(10, 10, 11, 0.06) !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .fixed[class*="bottom-"][class*="right-"][class*="rounded-md"][class*="z-50"][class*="bg-white"] {
    border-radius: var(--gmao-fl-radius-mobile) !important;
    /* On mobile, lift it above the bottom nav (h-16 ≈ 64px) and away from edges */
    inset: auto 8px calc(72px + env(safe-area-inset-bottom, 0px)) 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 70vh !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   8) BULK‑EDIT FLOATING TOOLBAR (fixed bottom-6 left-1/2 …)
   ────────────────────────────────────────────────────────────────
   Already rounded-full so radius is fine — improve shadow & lift
   it above the mobile bottom nav.
   ════════════════════════════════════════════════════════════════ */
.fixed[class*="bottom-6"][class*="left-1/2"][class*="rounded-full"] {
  box-shadow: var(--gmao-fl-shadow-toast) !important;
}
@media (max-width: 768px) {
  .fixed[class*="bottom-6"][class*="left-1/2"][class*="rounded-full"] {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100% - 24px);
    max-width: 520px;
  }
}

/* ════════════════════════════════════════════════════════════════
   9) FAB — floating action button cluster (z-[9999] container)
   ────────────────────────────────────────────────────────────────
   Already round; just bump the FAB itself a bit on mobile so it
   sits above the bottom nav comfortably and casts a clean shadow.
   ════════════════════════════════════════════════════════════════ */
.fixed[class*="bottom-20"][class*="right-4"][class*="z-[9999]"] > button,
.fixed[class*="bottom-8"][class*="right-8"][class*="z-[9999]"] > button {
  box-shadow: 0 6px 18px -4px rgba(255, 106, 19, 0.45),
              0 2px 4px rgba(10, 10, 11, 0.10) !important;
}

/* ════════════════════════════════════════════════════════════════
   10) SIDE SHEET / SLIDE PANEL (#gmao-slide-panel)
   ────────────────────────────────────────────────────────────────
   Currently flat right‑side panel. Round its inner corners and add
   a margin so the whole panel "floats" with all four corners visible.
   ════════════════════════════════════════════════════════════════ */
#gmao-slide-panel {
  border-radius: var(--gmao-fl-radius-desktop) !important;
  border-left: 1px solid rgba(10, 10, 11, 0.06) !important;
  box-shadow: var(--gmao-fl-shadow-desktop) !important;
  /* lift it off edges */
  top: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  height: auto !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  #gmao-slide-panel {
    border-radius: var(--gmao-fl-radius-mobile) !important;
    top: 8px !important;
    right: 8px !important;
    bottom: max(80px, env(safe-area-inset-bottom, 0px) + 80px) !important;
    width: calc(100% - 16px) !important;
    max-width: none !important;
    box-shadow: var(--gmao-fl-shadow-mobile) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   11) GLOBAL TOAST / NOTIFICATION CONTAINER
   ────────────────────────────────────────────────────────────────
   Reserved layer that always sits on top — used by the JS shim
   when it surfaces stacked notifications. Each toast is a card.
   ════════════════════════════════════════════════════════════════ */
#gmao-toast-root {
  position: fixed;
  inset: auto 16px max(16px, env(safe-area-inset-bottom, 0px) + 16px) auto;
  z-index: var(--gmao-fl-z-toast);
  display: flex;
  flex-direction: column-reverse;        /* newest on top of stack */
  gap: 10px;
  pointer-events: none;
  width: min(380px, calc(100vw - 32px));
}

/* On mobile, lift toasts above the bottom navigation bar */
@media (max-width: 768px) {
  #gmao-toast-root {
    bottom: max(88px, env(safe-area-inset-bottom, 0px) + 88px);
    left: 12px;
    right: 12px;
    width: auto;
  }
}

.gmao-toast {
  pointer-events: auto;
  background: #fff;
  color: var(--ink, #0a0a0b);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--gmao-fl-shadow-toast);
  border: 1px solid rgba(10, 10, 11, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  animation: gmao-toast-in .26s cubic-bezier(.2,.8,.2,1);
}
.gmao-toast--success { border-left: 3px solid #0ea76a; }
.gmao-toast--error   { border-left: 3px solid #e53935; }
.gmao-toast--warn    { border-left: 3px solid #f59e0b; }
.gmao-toast--info    { border-left: 3px solid var(--gmao-fl-accent); }
.gmao-toast__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: auto;
  color: rgba(10, 10, 11, 0.45);
  font-size: 16px;
  line-height: 1;
}
.gmao-toast__close:hover { color: rgba(10, 10, 11, 0.85); }

@keyframes gmao-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   12) ORANGE ACCENT BAR on the active modal (subtle brand cue)
   ────────────────────────────────────────────────────────────────
   Adds a 3‑px orange strip at the top of every modal — present but
   discreet. Disabled if the modal already has a colored header
   (bg-primary, bg-green-600, bg-blue-600 etc.) to avoid clashing.
   ════════════════════════════════════════════════════════════════ */
.fixed.inset-0[class*="z-["] > [class*="rounded-t-2xl"]::before,
.fixed.inset-0[class*="z-["] > [class*="rounded-t-lg"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
              var(--gmao-fl-accent) 0%,
              #ff9a55 100%);
  z-index: 4;
  pointer-events: none;
  opacity: 0.9;
}
/* Hide the strip if the header inside has its own brand color */
.fixed.inset-0[class*="z-["]
    > [class*="rounded-t-2xl"]:has(> [class*="bg-primary"]),
.fixed.inset-0[class*="z-["]
    > [class*="rounded-t-2xl"]:has(> [class*="bg-green-6"]),
.fixed.inset-0[class*="z-["]
    > [class*="rounded-t-2xl"]:has(> [class*="bg-blue-6"]) {
    /* keep ::before but soften so colored header still reads */
}
.fixed.inset-0[class*="z-["]
    > [class*="rounded-t-2xl"]:has(> [class*="bg-primary"])::before,
.fixed.inset-0[class*="z-["]
    > [class*="rounded-t-2xl"]:has(> [class*="bg-green-6"])::before,
.fixed.inset-0[class*="z-["]
    > [class*="rounded-t-2xl"]:has(> [class*="bg-blue-6"])::before {
    display: none;
}
/* Don't draw the strip on the inner header (prevent double bars) */
.fixed.inset-0[class*="z-["] [class*="rounded-t-2xl"]
    [class*="rounded-t-2xl"]::before {
  display: none !important;
}

/* On mobile, hide the strip to keep the pill clean */
@media (max-width: 768px) {
  .fixed.inset-0[class*="z-["] > [class*="rounded-t-2xl"]::before,
  .fixed.inset-0[class*="z-["] > [class*="rounded-t-lg"]::before {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   13) MARK ANIMATIONS — preserve, don't fight
   ────────────────────────────────────────────────────────────────
   The app uses Tailwind's animate-in slide-in-from-bottom +
   md:zoom-in-95. Our overrides keep these working unchanged.
   ════════════════════════════════════════════════════════════════ */
.fixed.inset-0[class*="z-["] > [class*="rounded-t-"] {
  animation-fill-mode: both !important;
}

/* ════════════════════════════════════════════════════════════════
   14) Z‑INDEX STACKING (CSS half) — JS sets data-fl-stack=N
   ────────────────────────────────────────────────────────────────
   Each newly opened overlay gets data-fl-stack=N from the JS shim.
   We multiply N to keep generous separation.
   ════════════════════════════════════════════════════════════════ */
.fixed.inset-0[data-fl-stack] {
  z-index: calc(var(--gmao-fl-z-base) + (var(--gmao-fl-stack, 0) * 10)) !important;
}
[data-fl-stack="1"]  { --gmao-fl-stack: 1; }
[data-fl-stack="2"]  { --gmao-fl-stack: 2; }
[data-fl-stack="3"]  { --gmao-fl-stack: 3; }
[data-fl-stack="4"]  { --gmao-fl-stack: 4; }
[data-fl-stack="5"]  { --gmao-fl-stack: 5; }
[data-fl-stack="6"]  { --gmao-fl-stack: 6; }
[data-fl-stack="7"]  { --gmao-fl-stack: 7; }
[data-fl-stack="8"]  { --gmao-fl-stack: 8; }
[data-fl-stack="9"]  { --gmao-fl-stack: 9; }
[data-fl-stack="10"] { --gmao-fl-stack: 10; }

/* ════════════════════════════════════════════════════════════════
   15) PREVENT BACKGROUND SCROLL when an overlay is open
   ════════════════════════════════════════════════════════════════ */
body.gmao-fl-locked {
  overflow: hidden !important;
  /* iOS bounce fix */
  position: fixed !important;
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════
   16) FOCUS STYLES — orange accent ring on inputs inside modals
   ════════════════════════════════════════════════════════════════ */
.fixed.inset-0[class*="z-["] input:focus-visible,
.fixed.inset-0[class*="z-["] textarea:focus-visible,
.fixed.inset-0[class*="z-["] select:focus-visible {
  outline: 2px solid var(--gmao-fl-accent) !important;
  outline-offset: 1px;
  border-color: var(--gmao-fl-accent) !important;
}

/* ════════════════════════════════════════════════════════════════
   17) SAFETY: keep buttons / inputs from inheriting "overflow:hidden"
   parent's clipping when they have shadows
   ════════════════════════════════════════════════════════════════ */
.fixed.inset-0[class*="z-["] [class*="rounded-full"][class*="shadow"] {
  filter: drop-shadow(0 1px 1px rgba(10, 10, 11, .06));
}

/* ════════════════════════════════════════════════════════════════
   END
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   ACTION BUTTONS — desktop + mobile unification
   ────────────────────────────────────────────────────────────────
   The app already ships with a header toolbar system (see the IIFE
   in /index.html that builds .gmao-hdr-toolbar inside the layout
   header on every breakpoint). It mirrors each FABMenu's actions
   as icon-only buttons and click-delegates to the FAB underneath.

   Earlier the FAB was ALSO visible — that's the duplication users
   were seeing. This layer:

     1. Hides the bottom-right FAB on every breakpoint (it stays
        in the DOM so the existing click-delegation keeps working —
        .click() still fires on display:none elements).

     2. Polishes the header toolbar so it feels modern, with the
        orange "+" pop and consistent sizing across breakpoints.

     3. Tightens the layout-header right cluster so the toolbar
        always has room (date pill collapsed on narrow desktop).
   ════════════════════════════════════════════════════════════════ */

/* ─── 1) Hide the FAB everywhere — it's the duplicate source ─── */
.gmao-fab-root,
div.fixed.bottom-20.right-4[class*="z-[9999]"],
div.fixed[class*="bottom-20"][class*="right-4"][class*="md:bottom-8"][class*="md:right-8"] {
  /* `display:none` keeps the buttons in DOM so the header toolbar's
     click-delegation in /index.html (lines ~601-610) still works.
     visibility:hidden would also work; display:none is cheaper. */
  display: none !important;
}

/* ─── 2) Layout-header right cluster — make room for the toolbar ─ */
@media (min-width: 769px) and (max-width: 1199px) {
  /* Hide the decorative date pill on smaller desktops so the
     toolbar + bell + branding fit on one line without wrapping. */
  header.h-20 .text-sm.font-medium.text-gray-500.bg-gray-50.rounded-full {
    display: none !important;
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  /* On the narrowest desktop range, also hide the "DS SMITH" label
     to give the toolbar full breathing room. The bell stays. */
  header.h-20 [class*="hidden"][class*="sm:flex"]:has(> div > .text-sm.font-bold) {
    display: none !important;
  }
}

/* ─── 3) Toolbar wrapper polish ─────────────────────────────── */
.gmao-hdr-toolbar {
  /* Override the legacy "border-right divider" with a more refined
     vertical hairline + extra spacing for a premium feel. */
  gap: 8px !important;
  padding-right: 12px !important;
  margin-right: 8px !important;
  border-right: 1px solid var(--line, #ececf0) !important;
}
@media (max-width: 767px) {
  .gmao-hdr-toolbar {
    /* On mobile, drop the divider — every pixel matters there. */
    gap: 6px !important;
    padding-right: 0 !important;
    margin-right: 6px !important;
    border-right: 0 !important;
  }
}

/* Subtle staggered fade-in when the toolbar (re)builds on nav */
.gmao-hdr-toolbar > .gmao-act-btn {
  animation: gmao-tb-in .22s cubic-bezier(.2,.8,.2,1) backwards;
}
.gmao-hdr-toolbar > .gmao-act-btn:nth-child(1) { animation-delay: 0ms;  }
.gmao-hdr-toolbar > .gmao-act-btn:nth-child(2) { animation-delay: 25ms; }
.gmao-hdr-toolbar > .gmao-act-btn:nth-child(3) { animation-delay: 50ms; }
.gmao-hdr-toolbar > .gmao-act-btn:nth-child(4) { animation-delay: 75ms; }
.gmao-hdr-toolbar > .gmao-act-btn:nth-child(5) { animation-delay: 100ms; }
@keyframes gmao-tb-in {
  from { opacity: 0; transform: translateY(-3px) scale(.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ─── 4) Button polish — better hover, focus, active feedback ─ */
.gmao-act-btn {
  /* Modernize the existing button: subtle shadow, refined hover */
  box-shadow:
    0 1px 0 rgba(10, 10, 11, 0.02),
    0 1px 2px rgba(10, 10, 11, 0.04) !important;
  position: relative;
}
.gmao-act-btn:hover {
  /* Soft tint on hover instead of just bg-color flip */
  background: var(--line-2, #f3f3f7) !important;
  border-color: var(--mut-2, #a3a3ad) !important;
  box-shadow:
    0 1px 0 rgba(10, 10, 11, 0.04),
    0 2px 6px -1px rgba(10, 10, 11, 0.08) !important;
}
.gmao-act-btn:focus-visible {
  outline: 2px solid var(--accent, #ff6a13) !important;
  outline-offset: 2px;
}
.gmao-act-btn:active {
  transform: scale(0.95) !important;
}

/* Tooltip on hover — pure CSS, uses the title attribute already
   present from buildActionButton(). We layer our own visual since
   native title tooltips look dated. */
.gmao-act-btn[title]::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  transform: translateY(-2px);
  background: var(--ink, #0a0a0b);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 100;
  box-shadow: 0 4px 12px -2px rgba(10, 10, 11, 0.18);
}
.gmao-act-btn[title]:hover::after {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .25s;
}
@media (max-width: 767px) {
  /* No tooltips on mobile — touch devices don't hover */
  .gmao-act-btn[title]::after { display: none; }
}

/* ─── 5) Variant: "+" Add button ────────────────────────────── */
.gmao-act-btn.gmao-act-add {
  /* Make the orange Add button more prominent than peers — it's the
     primary CTA on every page. */
  background: var(--accent, #ff6a13) !important;
  border-color: var(--accent, #ff6a13) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 106, 19, 0.20),
    0 4px 12px -2px rgba(255, 106, 19, 0.42),
    0 2px 4px rgba(255, 106, 19, 0.18) !important;
}
.gmao-act-btn.gmao-act-add:hover {
  background: var(--accent-ink, #b74a09) !important;
  border-color: var(--accent-ink, #b74a09) !important;
  box-shadow:
    0 1px 0 rgba(255, 106, 19, 0.28),
    0 6px 16px -2px rgba(255, 106, 19, 0.50),
    0 3px 6px rgba(255, 106, 19, 0.22) !important;
}
.gmao-act-btn.gmao-act-add:focus-visible {
  outline-color: var(--accent-ink, #b74a09) !important;
}
.gmao-act-btn.gmao-act-add svg {
  stroke-width: 2.5 !important;
}

/* ─── 6) Variants: tinted icons for visual hierarchy ───────── */
.gmao-act-btn.gmao-act-import svg,
.gmao-act-btn.gmao-act-export svg,
.gmao-act-btn.gmao-act-print svg,
.gmao-act-btn.gmao-act-filter svg {
  color: var(--mut, #6b6b75);
  transition: color .15s;
}
.gmao-act-btn.gmao-act-import:hover svg,
.gmao-act-btn.gmao-act-export:hover svg,
.gmao-act-btn.gmao-act-print:hover svg,
.gmao-act-btn.gmao-act-filter:hover svg {
  color: var(--accent, #ff6a13);
}

/* ─── 7) Make sure the toolbar slot is wider than the bell+brand
   on desktop, and stays fully tappable on mobile (44px target). ─ */
@media (max-width: 767px) {
  .gmao-act-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
}
@media (max-width: 380px) {
  .gmao-act-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .gmao-act-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ─── 8) When a modal is open, fade out the toolbar so it doesn't
   compete visually with the dialog. The body lock class is set by
   floating-windows.js when an overlay opens. ───────────────── */
body.gmao-fl-locked .gmao-hdr-toolbar {
  filter: grayscale(0.4);
  opacity: 0.55;
  pointer-events: none;
}

/* ─── 9) Page-level toolbar duplicates — hide them once the
   layout-header toolbar mirrors the same actions. The buttons
   stay in the DOM (display:none doesn't break .click() delegation),
   so the header-toolbar fallback in /index.html still finds them
   by their `title` attribute and forwards clicks. ─────────── */

/* Suivi Budget — hide the in-page Import / Configure / Export bar.
   Selector matches a flex row that contains a "Configurer Budget…"
   button — that's unique to the BudgetTracking page. */
main div.flex.items-center.justify-end.gap-2:has(> button[title^="Configurer Budget"]),
main div.flex.items-center.justify-end.gap-2:has(> button[title*="Configurer Budget"]) {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   END — ACTION BUTTONS LAYER
   ════════════════════════════════════════════════════════════════ */