/* ==========================================================
   PUBLIC COMPANY WEBSITE -- BOTTOM NAVIGATION (.cp-bottom-nav)
   ----------------------------------------------------------
   Signed-in mobile viewers only (site_bottom_nav.php never renders this
   markup at all for an anonymous visitor -- there's nothing account-
   scoped for them to jump to). Mirrors the spirit of Workspace's own
   phone-only bottom nav (workspace/33_bottom_nav.css) -- same height/
   safe-area/icon-font approach -- adapted to 5 tabs: Home, Store (or
   Contact), a center "back to your Workspace" ShiftTrack tab styled as
   a raised pill like Workspace's own Attendance tab, Messages, and
   Notifications (Alerts). Hidden entirely above the ≤560px mobile
   breakpoint -- this site's own mobile cutoff (07_homepage.css's
   is_visible_mobile toggle uses the same value), narrower than
   Workspace's own 980px "phone" bar on purpose (see this feature's own
   design discussion -- a business page's mobile chrome is scoped
   tighter than the account-wide app shell it sits inside).

   Do NOT place header, hamburger, or shell/padding styles here -- those
   are 05_header.css/03_shell.css's own.
========================================================== */

.cp-bottom-nav {
    display: none;
}

@media (max-width: 560px) {
    .cp-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;

        display: flex;
        align-items: stretch;

        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);

        background: var(--cp-surface);
        border-top: 1px solid var(--cp-border);
    }

    .cp-bottom-nav__item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        min-width: 0;
        padding: 0;

        background: none;
        border: 0;

        color: var(--cp-text-faint);
        text-decoration: none;

        font-family: inherit;
        cursor: pointer;
    }

    .cp-bottom-nav__item.is-active {
        color: var(--cp-primary, #137A5A);
    }

    /* Same Material Symbols Outlined font already loaded for the post
       card action icons (company_public_layout.php) -- no new font
       load needed for this. */
    .cp-bottom-nav__icon {
        display: inline-block;
        font-size: 22px;
        line-height: 1;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;
    }

    .cp-bottom-nav__item.is-active .cp-bottom-nav__icon {
        font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 22;
    }

    .cp-bottom-nav__icon-wrap {
        position: relative;
        display: inline-flex;
    }

    .cp-bottom-nav__badge {
        position: absolute;
        top: -4px;
        right: -8px;

        min-width: 16px;
        height: 16px;
        padding: 0 4px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        color: var(--cp-inverse);
        background: var(--cp-danger);
        border-radius: var(--cp-radius-pill);

        font-size: 9px;
        font-weight: 800;
        line-height: 1;
    }

    .cp-bottom-nav__badge[hidden] { display: none; }

    .cp-bottom-nav__label {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    .cp-bottom-nav__item.is-active .cp-bottom-nav__label {
        font-weight: 750;
    }

    /* The center tab -- the way back to the account's own Personal
       Workspace, the one destination on this bar that isn't shared with
       Workspace's own bottom nav (this bar's whole reason for not just
       being a copy of it). Raised pill treatment mirrors Workspace's own
       Attendance tab -- the one item there that's also a distinct action
       rather than a plain destination. */
    .cp-bottom-nav__item--brand {
        justify-content: center;
    }

    /* White, not the company's own --cp-primary -- same reasoning as the
       header's .cp-header-signin-avatar and the auth modal's own brand
       mark: this is the ShiftTrack logo specifically, and it needs a
       neutral backdrop to stay legible regardless of which color a given
       company's theme happens to use. */
    .cp-bottom-nav__brand-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: var(--cp-surface-soft);
        border-radius: var(--cp-radius-pill);
    }

    .cp-bottom-nav__brand-badge img {
        width: 35px;
        height: 35px;
        object-fit: contain;
    }

    /* The Messages tab's "coming soon" toast (site.js) -- floats just
       above the bar itself so it never gets covered by it. */
    .cp-bottom-nav-toast {
        position: fixed;
        left: 50%;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px);
        transform: translate(-50%, 6px);
        z-index: 31;
        background: rgba(16, 21, 29, .9);
        color: var(--cp-inverse);
        font-size: 13px;
        font-weight: 600;
        padding: 10px 18px;
        border-radius: var(--cp-radius-pill);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .cp-bottom-nav-toast--visible {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}