/* ============================================================================
   Global "action button below the white card" layout
   ----------------------------------------------------------------------------
   Requirement: on every settings / form page the primary action button
   (Save / Update / Preview ...) must sit OUTSIDE the white container - on the
   page background, just below where the white card ends.

   Almost every form page renders its action button as the trailing, centred
   element inside a shared widget card:

       .module-shared-widget            <- the white card (bg/ring/shadow/round)
         .module-shared-widget-shell
           .box-header (blue title bar)
           .module-shared-widget-body   <- white body (no bg of its own)
             ... form rows ...
             [.col-*-12].text-center     <- trailing action row (the button)

   Rather than editing ~55 blade files, we do it with pure CSS:

   1. For any card that actually ENDS with such an action row (detected with
      :has()), we stop painting the card's white background / ring / shadow on
      the element itself and repaint it via a ::before pseudo that is inset from
      the bottom by a fixed "button zone". Everything above the zone stays a
      normal white card; the trailing action row falls into the un-painted
      bottom zone and therefore renders on the page background.

   2. The action row stays in normal document flow (it is never pulled out with
      negative margins), so the page footer / following content can never
      overlap it - its height is always reserved.

   Scoped to `.content` so it can never affect modals (rendered outside
   `.content`) or the top bar. Only cards whose LAST element is a submit /
   primary button are ever touched - list/DataTable/info widgets are ignored.

   NOTE: :has() may NOT be nested inside :has(). The trailing-action test is
   therefore expressed as a single-level :has() whose argument carries the
   button, e.g. :has(... [class*="text-center"]:last-child > .tw-dw-btn-primary).
   ========================================================================== */

:root {
    /* Height reserved on the page background for the button itself. */
    --fa-btn-zone: 4.5rem;      /* 72px - comfortably fits a *-btn-lg button   */
    /* Empty gap between the white card's bottom edge and the button.         */
    --fa-gap: 1rem;             /* 16px                                        */
    /* Bottom padding of the widget body slot wrapper (.tw-py-2) below the row */
    --fa-body-pad: 0.5rem;      /* 8px                                         */
    /* How far above the card bottom the white background stops.              */
    --fa-band: calc(var(--fa-btn-zone) + var(--fa-gap) + var(--fa-body-pad));

    /* Repainted card chrome (matches tw-ring-1 tw-ring-gray-200 + tw-shadow-sm) */
    --fa-card-radius: 0.75rem;  /* tw-rounded-xl */
    --fa-card-chrome: 0 0 0 1px #e5e7eb, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ---- 1) Card that ends with an action row: move its white paint to ::before */
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]),
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]),
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary),
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) {
    position: relative !important;
    background-color: transparent !important;   /* remove tw-bg-white from card */
    background-image: none !important;
    box-shadow: none !important;                /* remove tw-shadow-sm + ring    */
    border-radius: 0 !important;                /* the ::before carries the round */
}

.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"])::before,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"])::before,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary)::before,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--fa-band);                     /* white stops above the button */
    background: #fff;
    border-radius: var(--fa-card-radius);
    box-shadow: var(--fa-card-chrome);
    z-index: 0;
    pointer-events: none;
}

/* The widget body (and legacy .box-body) paints white with !important in
   ui-consistency-fixes.css - that white sits ON TOP of our ::before backdrop
   and would cover the whole card incl. the button. Neutralise it on matched
   cards so the ::before (which stops above the button) is what actually shows.
   This file loads after ui-consistency-fixes.css and is more specific, so it
   wins the !important cascade. */
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]) .box-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]) .box-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary) .box-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) .box-body {
    background: transparent !important;
}

/* Keep the real card content painting above the ::before backdrop. */
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]) > .module-shared-widget-shell,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]) > .module-shared-widget-shell,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary) > .module-shared-widget-shell,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) > .module-shared-widget-shell {
    position: relative;
    z-index: 1;
}

/* ---- 2) The trailing action row: reserve the bottom zone + the top gap ---- */
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> button[type="submit"]),
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> input[type="submit"]),
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> .tw-dw-btn-primary),
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> .btn-primary) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;                               /* space when 2+ buttons        */
    flex-wrap: wrap;
    min-height: var(--fa-btn-zone);
    margin-top: var(--fa-gap);                  /* the empty gap below the card */
    margin-bottom: 0;
    padding: 0 !important;
    float: none !important;                     /* neutralise Bootstrap col float */
    width: 100% !important;
    position: relative;
    z-index: 1;
}