/* Sticky footer.
   On a short page (login, an empty menu) the footer used to stop wherever the
   content ended, leaving dead space beneath it. This pushes it to the bottom of
   the viewport when the content is short, while letting it scroll normally when
   the content is long -- so it is NOT position:fixed, which would sit on top of
   the content instead.

   Kept out of custom.css deliberately: that file has uncommitted work in it.

   The footer is pushed with margin-top:auto rather than by giving the content
   flex:1, because @yield('content') renders whatever each page chooses and
   there is no single content element to target across both layouts.

   Applied via an explicit class rather than to `body` or `.wrapper` directly,
   so it cannot collide with anything else using those selectors:
     - layouts/app.blade.php   -> on <body>, guests only (the footer there is
                                  inside @guest, and the authenticated admin
                                  layout has a fixed sidebar to leave alone)
     - layouts/front.blade.php -> on .wrapper, which is where its footer lives */

.has-sticky-footer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.has-sticky-footer > footer {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Footer colour.

   Argon ships `.footer { background: #f4f5f7 }` and the menu page's own
   background is #F4F6F8 -- near enough identical that the footer disappeared
   into the content. The login footer had it worse: that element is `py-5` with
   no `.footer` class at all, so it had no background whatsoever.

   Both now sit on the brand navy already used by the meal card, so the end of
   the page is unmistakable and the colour reads as part of the system rather
   than an arbitrary grey. Scoped to .has-sticky-footer, so the authenticated
   admin footer is untouched.
   --------------------------------------------------------------------------- */

.has-sticky-footer > footer {
    background: #11223F;
    color: rgba(255, 255, 255, 0.78);
}

/* No padding override here on purpose: the guest footer carries the `.footer`
   class now (see layouts/footers/guest.blade.php), so it picks up the same
   height as the storefront footer on its own. Setting a number here instead
   would drift the moment Argon's .footer padding changes. */

/* .text-muted is a mid grey chosen for light backgrounds. Left alone on this
   navy it measures about 3.4:1 (Bootstrap's #6c757d), under the 4.5:1 minimum.
   The replacement is ~10:1. */
.has-sticky-footer > footer .copyright,
.has-sticky-footer > footer .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

.has-sticky-footer > footer .nav-link {
    color: rgba(255, 255, 255, 0.78);
}

.has-sticky-footer > footer .nav-link:hover,
.has-sticky-footer > footer .nav-link:focus {
    color: #fff;
}

.has-sticky-footer > footer a:focus-visible {
    outline: 2px solid #F5B301;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Opaque cart drawer.

   custom.css sets `background: rgba(255,255,255,0.95)` on .sidenav-cart, which
   overrides the `background-color: #fff` declared two lines above it, so the
   page shows through the drawer. Fixed here rather than in custom.css because
   that file has uncommitted work in it; this loads after it, at equal
   specificity, so it wins on cascade order alone.
   --------------------------------------------------------------------------- */

.sidenav-cart {
    background: #fff;
    background-color: #fff;
    opacity: 1;
    /* Above the navbar in both of its states: Bootstrap .fixed-top (1030) at
       the top of the page, and .custom-nav (9999, custom.css) once scrolled.
       custom.css gave the drawer 9999 too, so which one won came down to
       page order, and on a phone the navbar covered the drawer's header. */
    z-index: 10001;
    /* A column: the heading and items scroll in the middle, and the foot
       (Clear, Subtotal, Checkout) stays at the bottom however long the cart.
       Only the middle scrolls, so Checkout is never scrolled out of reach. */
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.sidenav-cart .offcanvas-menu-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sidenav-cart .minicart-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.sidenav-cart .minicart-foot {
    flex: none;
    padding: 12px 0 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
/* Just above the subtotal, at the right -- away from the drawer's close
   button at the top, and not on top of Checkout. */
.sidenav-cart .minicart-foot .minicart-clear {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px auto;
}
.sidenav-cart .minicart-foot .minicart-clear[hidden] { display: none; }
.sidenav-cart .minicart-foot #totalPrices .card { margin: 0 !important; }

/* ---------------------------------------------------------------------------
   Profile / user-admin header artwork.

   Replaces Argon's stock profile-cover.jpg -- a photo of a woman -- with the
   same food line art the storefront wears, so the signed-in pages and the home
   page read as one product.

   The source is black line work on a white field, not a transparent PNG, so it
   cannot simply be dropped in as a background image: invert() makes it white on
   black, and screen drops the black away, leaving only the strokes. This is the
   same treatment as body.home-page::before in home.css -- if either moves, move
   the other, because the two are meant to look like one texture.

   It hangs off .mask rather than .header on purpose. .mask is positioned and
   carries the navy gradient, so a pseudo-element inside it lands on top of the
   navy; the heading's container is a plain static block, and a pseudo-element
   on .header would paint over the type instead of behind it.
   --------------------------------------------------------------------------- */

.page-header {
    /* The mask is only 80% opaque, so it needs something behind it. The cover
       photo used to be that something. */
    background-color: #172b4d;
}

.page-header .mask::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../img/item-bg.png');
    background-size: 1000px auto;
    background-position: center top;
    background-repeat: repeat;
    filter: invert(1);
    mix-blend-mode: screen;
    opacity: 0.05;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Profile page.

   Scoped under .profile-page so none of it reaches the other pages on
   layouts/app -- the drawer, navbar and footer are shared and are left alone.

   The palette is the storefront's, deliberately: this is the same product, and
   the page reads as a different one when it invents its own navy. Red is kept
   for the two things you can actually do here and for focus, and is never used
   as decoration, so a red edge always means "act on this".
   --------------------------------------------------------------------------- */

.profile-page {
    --p-navy: #16224a;
    --p-red: #d7263d;
    --p-paper: #ffffff;
    --p-wash: #f4f6fb;
    --p-line: #dfe3ef;
    --p-muted: #5d6685;
}

.profile-page .card {
    border: 1px solid var(--p-line);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(22, 34, 74, 0.10);
}

/* ---------- the summary rail ---------- */

.profile-rail {
    overflow: hidden;
}

/* The one loud element on the page. Everything else is white and quiet, so the
   navy block is what the eye lands on and it answers "whose account is this"
   before anything else is read. */
.profile-rail__id {
    background: var(--p-navy);
    padding: 28px 24px 24px;
    text-align: center;
}

.profile-rail__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* Lifted off the navy rather than outlined in red: red is reserved for the
       buttons, and an accent ring here would compete with them. */
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-rail__name {
    margin: 14px 0 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.profile-facts {
    margin: 0;
    padding: 4px 24px 8px;
}

.profile-fact {
    padding: 16px 0;
    border-bottom: 1px solid var(--p-line);
}

.profile-fact:last-child {
    border-bottom: 0;
}

.profile-fact__label {
    margin: 0 0 4px;
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-fact__value {
    margin: 0;
    color: var(--p-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

/* The address belongs to the company above it, so it is set as a second line of
   the same fact rather than a fact of its own. */
.profile-fact__address {
    display: block;
    margin-top: 2px;
    color: var(--p-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

/* Missing assignments are ordinary here, not errors -- plenty of accounts have
   no department yet. Stated plainly and quietly, so the rail reads as an
   account still being set up rather than as a page that failed to load. */
.profile-fact__empty {
    color: var(--p-muted);
    font-size: 0.9375rem;
    font-weight: 400;
    font-style: italic;
}

/* ---------- the two action cards ---------- */

.profile-card__head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--p-line);
}

.profile-card__title {
    margin: 0;
    color: var(--p-navy);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.profile-card__note {
    margin: 6px 0 0;
    max-width: 62ch;
    color: var(--p-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.profile-page .card-body {
    padding: 22px 24px 24px;
}

.profile-page .form-control-label {
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-page .form-control {
    border: 1px solid var(--p-line);
    border-radius: 10px;
    background: var(--p-wash);
    box-shadow: none;
    color: var(--p-navy);
}

.profile-page .form-control:focus {
    border-color: var(--p-navy);
    background: var(--p-paper);
    box-shadow: 0 0 0 3px rgba(22, 34, 74, 0.10);
}

/* A field nobody can edit should not look like one waiting for input. */
.profile-page .form-control[readonly] {
    background: var(--p-wash);
    color: var(--p-muted);
    cursor: default;
}

/* ---------- password rules ---------- */

.profile-rules {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--p-wash);
    border: 1px solid var(--p-line);
}

.profile-rules__lead {
    margin: 0 0 6px;
    color: var(--p-navy);
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-rules__list {
    margin: 0;
    padding-left: 18px;
    color: var(--p-muted);
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* ---------- actions ---------- */

.profile-actions {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--p-line);
    text-align: right;
}

.profile-submit {
    background: var(--p-red);
    border: 1px solid var(--p-red);
    border-radius: 10px;
    padding: 10px 22px;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.16s, border-color 0.16s;
}

.profile-submit:hover,
.profile-submit:focus {
    background: #bd2035;
    border-color: #bd2035;
    color: #fff;
}

.profile-submit:focus-visible {
    outline: 3px solid var(--p-navy);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    /* Stacked, the rail is a summary above the things you came to change
       rather than a column beside them. */
    .profile-rail__id {
        padding: 22px 20px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-submit {
        transition: none;
    }
}

.profile-page .profile-hint {
    display: block;
    margin-top: 6px;
    color: var(--p-muted);
    font-size: 0.8125rem;
}

.profile-page select.form-control:disabled {
    color: var(--p-muted);
    cursor: not-allowed;
}

/* ---------- card number on the rail ---------- */

.profile-rail__card {
    margin: 10px 0 0;
}

.profile-rail__card-label {
    display: block;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-rail__card-value {
    display: block;
    margin-top: 2px;
    color: #fff;
    /* Grouped in fours by the view, so the tracking only has to keep the
       digits even -- a tabular face stops the groups jittering. */
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    word-break: break-all;
}

/* ---------- password rules, ticked off live ---------- */

/* Unscoped: the reset form reached from the emailed link carries this same
   checklist, and scoped to .profile-page it kept its bullets there -- a disc
   and a tick on every row. */
.profile-rules__list {
    list-style: none;
    padding-left: 0;
}

.profile-rule {
    display: flex;
    align-items: baseline;
    gap: 8px;
    transition: color 0.16s;
}

/* The mark carries the state as well as the colour, so the checklist still
   reads when the colour does not -- colour blindness, greyscale print, a
   washed-out projector. */
.profile-rule__mark::before {
    content: '\25CB';           /* hollow circle */
    font-size: 0.75rem;
}

.profile-rule.is-met {
    color: #0b8f5d;
    font-weight: 600;
}

.profile-rule.is-met .profile-rule__mark::before {
    content: '\2713';           /* check mark */
}

/* ---------- reveal toggle ---------- */

.profile-reveal {
    position: relative;
}

.profile-reveal .form-control {
    padding-right: 46px;
}

.profile-reveal__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;              /* a real target, not a 16px glyph */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--p-muted);
    cursor: pointer;
}

.profile-reveal__toggle:hover {
    color: var(--p-navy);
}

.profile-reveal__toggle:focus-visible {
    outline: 3px solid var(--p-navy);
    outline-offset: -3px;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .profile-rule { transition: none; }
}

/* ---------------------------------------------------------------------------
   Signed-in footer, pinned to the bottom of short pages.

   The guest layout already does this through .has-sticky-footer on <body>,
   where the footer is a direct child and margin-top:auto has something to push
   against. On a signed-in page the footer is not there: all 61 of those views
   include it inside their own .container-fluid, so it simply follows the
   content and floats mid-screen whenever the page is short.

   Rather than restructure 61 views, the container that actually holds a footer
   becomes the flex column. :has() is what keeps that honest -- only a container
   with a footer as a direct child is touched, so every other page keeps the
   block layout it has now.

   Where :has() is unsupported (Chrome < 105, Safari < 15.4, Firefox < 121) none
   of this matches and the footer sits exactly where it does today. That is the
   intended fallback, not an oversight.

   Scoped away from .has-sticky-footer so the guest layout, which already solves
   this its own way and would double up on min-height, is left alone. The navy
   treatment there is deliberately not extended here: this footer keeps Argon's
   grey.
   --------------------------------------------------------------------------- */

body:not(.has-sticky-footer) .main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:not(.has-sticky-footer) .main-content > .container-fluid:has(> footer),
body:not(.has-sticky-footer) .main-content > .container:has(> footer) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body:not(.has-sticky-footer) .main-content > .container-fluid > footer,
body:not(.has-sticky-footer) .main-content > .container > footer {
    margin-top: auto;
}

/* ---------- confirmation dialogs (SweetAlert2), on every page ----------
   Every Swal.fire -- delete, deactivate, remove, the orders list's bulk
   update -- in the app's look: a smaller icon, the card radius, navy text
   and a navy confirm button. The confirm colour is NOT !important, so a
   dialog that passes confirmButtonColor (red for delete) keeps it -- Swal
   writes that inline. v9 class names: the body is .swal2-content, not v11's
   .swal2-html-container. */
    .swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .55) !important; }
.swal2-popup {
    width: 100% !important; max-width: 400px !important;
    padding: 28px 32px 24px !important; border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25) !important;
}
/* The icon is made smaller through its font-size, not by pinning pixel
   sizes: v9 draws every part of it -- the circle, the check's two strokes,
   the cross, and the keyframes that animate the check in -- in em. Pixel
   overrides on the strokes disagreed with the em keyframes, so the check
   drew as a broken cross while it animated and sat off-centre after.
   5em at 10.4px is the 52px circle. */
.swal2-popup .swal2-icon { font-size: 10.4px; margin: 4px auto 16px; }
.swal2-popup .swal2-icon .swal2-icon-content { font-size: 32px; }
.swal2-popup .swal2-title {
    margin: 0 0 8px !important; font-size: 17px !important; font-weight: 600 !important;
    line-height: 1.35 !important; color: #1e293b !important;
}
.swal2-popup .swal2-content { font-size: 14px !important; line-height: 1.5 !important; color: #64748b !important; }
.swal2-popup .swal2-actions { margin-top: 20px !important; gap: 8px; }
.swal2-popup .swal2-styled {
    margin: 0 !important; padding: 9px 20px !important; border-radius: 8px !important;
    font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important;
}
.swal2-popup .swal2-styled.swal2-confirm { background-color: #16224a; }
.swal2-popup .swal2-styled.swal2-cancel { background: #e2e8f0 !important; color: #1e293b !important; }
.swal2-popup .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(22, 34, 74, .3) !important; }
.swal2-popup .swal2-timer-progress-bar { background: #16224a; }


/* ---------------------------------------------------------------------------
   Sidebar icons: one colour, the navy of the header, footer and dialogs.
   The menus (layouts/navbars/menus/*) gave each icon its own Argon colour --
   text-success, text-orange, text-pink and so on -- which read as meaning
   something and did not. !important because those utility classes are.
   Only icons: the Live Orders dot (.blob) keeps its red, since that one does
   mean something.
   --------------------------------------------------------------------------- */
#sidenav-main .navbar-nav .nav-link > i,
#sidenav-main .navbar-nav .nav-link > .fa,
#sidenav-main .navbar-nav .nav-link > .fas,
#sidenav-main .navbar-nav .nav-link > .far,
#sidenav-main .navbar-nav .nav-link > .ni {
    color: #16224a !important;
}