/* -------------------------------------------------------------------------
   AUTH FOOTER

   Shared by the screens that extend frontend::auth.master and want the app
   footer to read as one row over the wave: auth/login.blade.php and
   auth/login_dashboard_v2.blade.php. Pushed per view rather than added to the
   layout so the older auth screens keep the footer they already ship.

   The theme (assets/css/argon.min.css) sets `.footer { background: #f8f9fe }`,
   which paints an opaque near-white strip across the bottom of a page whose
   background is a blue gradient and a wave. The footer is also
   position: fixed, so that strip sits over the artwork at every viewport.

   Overridden here rather than in the theme, so the change cannot reach any
   other screen that relies on the light footer. The layout already intends a
   transparent footer over the gradient — auth/master.blade.php sets white link
   text and a text shadow — but the theme's background wins, so the text ends
   up grey on white.
   ------------------------------------------------------------------------- */

/*
 * Only the background is overridden. The footer sits on the white crest of the
 * wave, so the theme's dark link/copyright colour is correct and is left alone —
 * the opaque panel behind it was the whole problem, because it painted a second,
 * slightly different white band on top of the wave.
 */
body .footer_container .footer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * FOOTER LAYOUT
 *
 * Two layouts, and the breakpoint between them is the width at which both
 * halves genuinely fit on one line — not the width at which the padding rule
 * happens to change.
 *
 * The ends-apart row used to start at 792px, which is roughly where the two
 * halves stop overlapping but well below where they stop WRAPPING. Between
 * ~800px and ~1200px the copyright dropped to a second line, and a wrapped
 * flex line under `space-between` sits at the start — so both halves ended up
 * jammed against the left edge, stacked. `text-align: right` could not save it
 * either, because the box had already been shrunk to `width: auto`.
 *
 * 1200px is where the links and the full copyright sentence stop competing for
 * the same line. Note these pages do NOT load style.css — the auth layout uses
 * login_style.css, and style.css is where `.app-footer-row` gets its flex — so
 * nothing else is laying this footer out for us; these rules are the whole
 * story.
 */

/* Centred and stacked wherever the two halves cannot share a line. */
@media (max-width: 1200px) {
    body .footer_container .footer .footer-row {
        text-align: center;
    }

    body .footer_container .footer .footer-row .nav-footer {
        justify-content: center;
    }

    body .footer_container .footer .footer-row .copyright {
        text-align: center;
    }
}

/*
 * One row, ends apart: links left, copyright right.
 *
 * `.footer-row` is display:block, so `.copyright` — a block element — took the
 * full width and dropped onto a second line under the links. Making the row a
 * flex container puts them on one baseline; the copyright also needs its width
 * released, or it still spans the row and space-between has nothing to push
 * against.
 *
 * The padding is restated because login.css and login_dashboard_style.css both
 * zero `.footer_container .footer` with !important, pinning both halves hard
 * against the viewport edges. The `body` prefix adds an element to the
 * specificity so this outranks them without editing either file.
 */
@media (min-width: 1201px) {
    body .footer_container .footer {
        padding: 0 30px !important;
    }

    body .footer_container .footer .footer-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 18px;
    }

    body .footer_container .footer .footer-row .copyright {
        width: auto !important;
        margin: 0 !important;
        text-align: right;
    }

    body .footer_container .footer .footer-row .nav-footer {
        margin: 0 !important;
    }
}
