/* ============================================================================
 * Save action — the platform's save button and its anchored pill.
 *
 * Loaded on every page from //layouts/main (cache-busted on filemtime), so the
 * classes below are available everywhere without a per-view include.
 *
 * WHAT COUNTS AS A "SAVE": the action that commits the user's work on the page.
 * NOT every type="submit" — a row-adding button, a search, a navigation link or
 * a modal dismiss are not saves and keep the neutral/primary reference buttons
 * (.boat-rent-btn / .boat-rent-btn-primary). See docs/save-action/README.md.
 *
 * COLOURS ARE LITERAL, NOT var(--…), on purpose. The save green is one colour
 * platform-wide, not a per-area accent, so it does not belong in the
 * area-tokens.css token set. Keeping it literal also removes any cross-file
 * var() dependency: an external stylesheet served from a stale cache would
 * otherwise leave the declaration unresolved and paint the button transparent —
 * a bug this project already shipped and reverted once (see
 * docs/reference-style.md §1.1). The focus ring is the one exception: it reads
 * the per-area accent so keyboard focus matches the rest of the page.
 *
 * Contrast (WCAG 2.1, guarded by tests/Unit/SaveActionStyleTest.php):
 *   #157347 + white label ............ 5.87:1  (AA text, needs 4.5)
 *   #157347 vs white card ............ 5.87:1  (UI boundary, needs 3)
 *   #157347 vs #e3e3e3 page .......... 4.58:1  (UI boundary, needs 3)
 *   #157347 vs #2c3e50 pill .......... 1.87:1  FAILS — hence the light border
 *   rgba(255,255,255,.7) vs #2c3e50 .. 6.32:1  the border carries the boundary
 *                                              (composited, that border is #c0c5cb)
 *
 * No green satisfies both "3:1 against the navy pill" and "4.5:1 under a white
 * label" — the two thresholds are mutually exclusive across the whole green
 * scale. That is why the pill lends the button a border instead of the button
 * changing colour on dark ground.
 * ========================================================================== */

/* ---- The atom: the save button itself ---------------------------------- */
/* Bootstrap in this build ships border-radius:0 on .btn AND on .btn-lg, so the
   8px radius has to be restated here — it is not inherited from anywhere. */
.bs-btn-save {
    background: #157347;
    border: 1px solid #157347;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 24px;
    transition: background-color .15s ease, border-color .15s ease;
}

.bs-btn-save:hover,
.bs-btn-save:focus,
.bs-btn-save:active,
.bs-btn-save:active:focus {
    background: #0f5132;
    border-color: #0f5132;
    color: #fff;
    outline: none;
    box-shadow: none;
}

.bs-btn-save i {
    margin-right: 6px;
}

/* Same focus ring as the rest of the reference style: Bootstrap's outline is
   cleared above, so keyboard users depend entirely on :focus-visible. */
.bs-btn-save:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--area-accent-ring-strong, rgba(26, 188, 156, .25));
}

.bs-btn-save[disabled],
.bs-btn-save.disabled {
    background: #7f9d8b;
    border-color: #7f9d8b;
    color: #fff;
    cursor: not-allowed;
}

/* ---- The container: anchored pill, centred ------------------------------ */
/* Centred on purpose. The Intercom messenger parks its launcher in the
   bottom-RIGHT corner on a z-index in the billions, which no stacking context
   of ours can outrank; staying centred sidesteps it entirely and needs no
   vertical_padding correction on the Intercom side.
   Geometry taken from the pill this app already uses (#rb-linkbar in
   admin/views/orderDetail/resourceBoard.php), minus its 20000 z-index: the save
   pill must sit UNDER Bootstrap modals (1040) so a dialog is never blocked. */
.bs-save-pill {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 24px);
    padding: 10px 16px;
    background: #2c3e50;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 13px;
}

/* On the dark pill the green fill alone cannot mark the button's edge
   (1.87:1). The border does it (6.32:1 against the navy), so page authors never
   have to think about it — the container adapts the button. */
.bs-save-pill .bs-btn-save {
    border-color: rgba(255, 255, 255, .7);
}

/* The "there are unsaved changes" line, shown only while the form is dirty (see the
   gate below) — so it states a fact rather than labelling a button. 8.45:1 on the
   navy. Callers may replace it with their own text, or pass '' for none. */
.bs-save-pill-status {
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
}

/* Secondary action inside the pill is a text link, never a second box: one
   primary per action group (docs/reference-style.md §4). */
.bs-save-pill-cancel {
    background: none;
    border: 0;
    padding: 6px 4px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bs-save-pill-cancel:hover,
.bs-save-pill-cancel:focus {
    color: #fff;
    text-decoration: underline;
}

.bs-save-pill-cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .4);
    border-radius: 4px;
}

/* The pill is out of flow, so it would sit over the last rows of the form and
   over the layout's global #footer. The spacer reserves its height in flow —
   rendered by the SavePill widget right before the pill, so no page has to
   remember a magic margin (which is what tenant/config.php does by hand). */
.bs-save-pill-spacer {
    height: 76px;
}

/* ---- Only while there is something to save ------------------------------ */
/* js/save-pill.js marks the form clean; nothing here hides the pill on its own. The pill is rendered
   VISIBLE and only ever hidden by that class, so a JS failure leaves a usable save button rather than a
   form the user cannot submit. The spacer collapses with it, or a clean page would keep an empty
   76px gap above its footer.
   The `data-hide-when-clean` gate is what the widget's opt-out switches off — but the STATUS line is
   hidden on any clean form regardless, because a pill that deliberately stays visible must never claim
   there are unsaved changes when there are none. */
form.bs-save-clean .bs-save-pill[data-hide-when-clean="1"] {
    display: none;
}

form.bs-save-clean .bs-save-pill-spacer[data-hide-when-clean="1"] {
    height: 0;
}

form.bs-save-clean .bs-save-pill-status {
    display: none;
}

/* ---- Narrow screens ---------------------------------------------------- */
/* Below Bootstrap's `md` the pill returns to the flow. Two reasons, and the
   second is measured: anchoring buys little once the form is a single stacked
   column, and a FIXED pill collides with the layout footer's language picker in
   the 768-991px band — 134px of the select covered at 768px, 68px at 900px, and
   nothing from 992px up (where 23px of clearance remains, growing with width).
   992px is also where the page's own col-md-* grid stacks, so an in-flow save is
   what the rest of the layout is already doing there. */
@media (max-width: 991px) {
    .bs-save-pill {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 20px;
    }

    .bs-save-pill .bs-btn-save,
    .bs-save-pill-cancel {
        width: 100%;
    }

    /* The cancel is an <a> at full width, which would keep its text on the left while the status line
       above it is centred — the stack has to read as one column. */
    .bs-save-pill-cancel {
        text-align: center;
    }

    .bs-save-pill-status {
        text-align: center;
        white-space: normal;
    }

    .bs-save-pill-spacer {
        height: 0;
    }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bs-btn-save {
        transition: none;
    }
}