/* =========================================================================
   PAGE-HEADER ACTION BUTTONS — one row, one design, one colour per job
   (2026-07-24)

   Every button at the top of a page now wears the same pill that the green
   "Export Excel" button introduced: 12px radius, 135deg gradient, bold 13px
   label, soft coloured glow, 1px lift on hover.

   The COLOUR comes from data-act="<kind>", stamped on every action by
   App\Support\ActionPalette (via Action::configureUsing in AppServiceProvider).
   That means the same job is the same colour on all ~70 list pages and a page
   can no longer drift: import is always sky, export always amber, Excel always
   emerald, PDF always rose, print always slate, delete always red.

   Buttons the palette does not recognise still get the pill; they just inherit
   a gradient built from whatever Filament colour the page asked for (bottom
   block). Nothing here bleeds into table row actions or modal footers — the
   selectors are scoped to .fi-header.
   ========================================================================= */

/* ── 1. ONE ROW ────────────────────────────────────────────────────────────
   Filament's action container is `flex flex-wrap`, so a 4th button dropped to
   a second line. Keep them on a single line and let the strip scroll sideways
   on narrow screens instead of wrapping. */
.fi-header .fi-ac {
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;             /* room for the scrollbar, not the glow */
    scrollbar-width: thin;
}
.fi-header .fi-ac::-webkit-scrollbar { height: 4px; }
.fi-header .fi-ac::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 4px; }
.fi-header > div:last-child { min-width: 0; }   /* let the strip actually shrink */
.fi-header .fi-ac > * { flex: 0 0 auto; }

/* ── 2. THE PILL ──────────────────────────────────────────────────────────
   Same recipe as .pl-excel-btn in the Vue lists, so the header and the in-page
   toolbars read as one family. */
.fi-header .fi-ac .fi-btn,
.pl-act-btn {
    --ab-from: #334155;
    --ab-to: #64748b;
    --ab-glow: 71, 85, 105;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    cursor: pointer;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    border: none !important;
    text-decoration: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--ab-from), var(--ab-to)) !important;
    box-shadow: 0 10px 22px -10px rgba(var(--ab-glow), .65) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.fi-header .fi-ac .fi-btn:hover,
.pl-act-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -10px rgba(var(--ab-glow), .8) !important;
}
.fi-header .fi-ac .fi-btn:active,
.pl-act-btn:active { transform: translateY(0); }

/* Icon + label inherit the pill's white, whatever Filament coloured them. */
.fi-header .fi-ac .fi-btn svg,
.fi-header .fi-ac .fi-btn .fi-btn-label,
.pl-act-btn svg {
    color: #fff !important;
    width: 16px;
    height: 16px;
}
.fi-header .fi-ac .fi-btn .fi-btn-label { width: auto; height: auto; }

/* Grouped/dropdown header actions keep the pill as their trigger. */
.fi-header .fi-ac .fi-dropdown-trigger > .fi-btn { margin: 0; }

/* ── 3. THE PALETTE — one gradient per job ────────────────────────────────
   Change a colour HERE and it changes on every page at once.
   Keep in sync with App\Support\ActionPalette::KINDS. */
[data-act="create"]   { --ab-from:#4338ca !important; --ab-to:#6366f1 !important; --ab-glow:79,70,229 !important; }   /* indigo   */
[data-act="edit"]     { --ab-from:#1d4ed8 !important; --ab-to:#3b82f6 !important; --ab-glow:37,99,235 !important; }   /* blue     */
[data-act="view"]     { --ab-from:#6d28d9 !important; --ab-to:#8b5cf6 !important; --ab-glow:124,58,237 !important; }  /* violet   */
[data-act="import"]   { --ab-from:#0369a1 !important; --ab-to:#0ea5e9 !important; --ab-glow:2,132,199 !important; }   /* sky      */
[data-act="export"]   { --ab-from:#b45309 !important; --ab-to:#f59e0b !important; --ab-glow:217,119,6 !important; }   /* amber    */
[data-act="excel"]    { --ab-from:#047857 !important; --ab-to:#10b981 !important; --ab-glow:5,150,105 !important; }   /* emerald  */
[data-act="pdf"]      { --ab-from:#be123c !important; --ab-to:#f43f5e !important; --ab-glow:225,29,72 !important; }   /* rose     */
[data-act="print"]    { --ab-from:#334155 !important; --ab-to:#64748b !important; --ab-glow:71,85,105 !important; }   /* slate    */
[data-act="whatsapp"] { --ab-from:#128c7e !important; --ab-to:#25d366 !important; --ab-glow:18,140,126 !important; }  /* WA green */
[data-act="send"]     { --ab-from:#0e7490 !important; --ab-to:#06b6d4 !important; --ab-glow:8,145,178 !important; }   /* cyan     */
[data-act="attach"]   { --ab-from:#0f766e !important; --ab-to:#14b8a6 !important; --ab-glow:13,148,136 !important; }  /* teal     */
/* Lime, not another green: approve/confirm sits next to the WhatsApp pill on
   the owner + contract view pages and the two greens were indistinguishable. */
[data-act="approve"]  { --ab-from:#4d7c0f !important; --ab-to:#a3e635 !important; --ab-glow:101,163,13 !important; }  /* lime     */
[data-act="generate"] { --ab-from:#7e22ce !important; --ab-to:#a855f7 !important; --ab-glow:147,51,234 !important; }  /* purple   */
[data-act="danger"]   { --ab-from:#b91c1c !important; --ab-to:#ef4444 !important; --ab-glow:220,38,38 !important; }   /* red      */

/* "back" is the one deliberate non-gradient: a quiet ghost so it never
   competes with the real action next to it. */
.fi-header .fi-ac .fi-btn[data-act="back"],
.pl-act-btn[data-act="back"] {
    background: transparent !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: none !important;
}
.fi-header .fi-ac .fi-btn[data-act="back"] svg,
.pl-act-btn[data-act="back"] svg { color: #475569 !important; }
.fi-header .fi-ac .fi-btn[data-act="back"]:hover,
.pl-act-btn[data-act="back"]:hover { background: rgba(100,116,139,.08) !important; }
.dark .fi-header .fi-ac .fi-btn[data-act="back"],
.dark .pl-act-btn[data-act="back"] { color: #cbd5e1 !important; border-color: #3f4658 !important; }
.dark .fi-header .fi-ac .fi-btn[data-act="back"] svg,
.dark .pl-act-btn[data-act="back"] svg { color: #cbd5e1 !important; }

/* ── 4. FALLBACK for actions the palette does not name ────────────────────
   They still get the pill; the hue is derived from the Filament colour the
   page already chose, so nothing ever renders as an unstyled grey box. */
.fi-header .fi-ac .fi-btn:not([data-act]).fi-color-primary { --ab-from:#4338ca; --ab-to:#6366f1; --ab-glow:79,70,229; }
.fi-header .fi-ac .fi-btn:not([data-act]).fi-color-info    { --ab-from:#0369a1; --ab-to:#0ea5e9; --ab-glow:2,132,199; }
.fi-header .fi-ac .fi-btn:not([data-act]).fi-color-success { --ab-from:#15803d; --ab-to:#22c55e; --ab-glow:22,163,74; }
.fi-header .fi-ac .fi-btn:not([data-act]).fi-color-warning { --ab-from:#b45309; --ab-to:#f59e0b; --ab-glow:217,119,6; }
.fi-header .fi-ac .fi-btn:not([data-act]).fi-color-danger  { --ab-from:#b91c1c; --ab-to:#ef4444; --ab-glow:220,38,38; }
.fi-header .fi-ac .fi-btn:not([data-act]).fi-color-gray    { --ab-from:#334155; --ab-to:#64748b; --ab-glow:71,85,105; }

/* Dark mode: gradients carry over, only the glow needs toning down so the
   cards behind them do not bloom. */
.dark .fi-header .fi-ac .fi-btn,
.dark .pl-act-btn { box-shadow: 0 8px 18px -10px rgba(var(--ab-glow), .75) !important; }

/* Disabled stays readable instead of turning into a washed-out gradient. */
.fi-header .fi-ac .fi-btn:disabled,
.fi-header .fi-ac .fi-btn.fi-disabled {
    filter: grayscale(.55);
    box-shadow: none !important;
    transform: none !important;
}

/* ── 5. Vue in-page toolbars ──────────────────────────────────────────────
   The list pages render their own pills (.pl-excel-btn). Give them the same
   palette so a green Excel pill in a filter bar matches the header exactly.
   !important is required: those rules are inlined per-blade via @assets and
   land in <head> after this file. */
.pl-excel-btn[data-act] {
    background: linear-gradient(135deg, var(--ab-from), var(--ab-to)) !important;
    box-shadow: 0 10px 22px -10px rgba(var(--ab-glow), .65) !important;
    color: #fff !important;
}
.pl-excel-btn[data-act] svg { color: #fff !important; }