/* =============================================================================
   Home top bar + two-column layout
   -----------------------------------------------------------------------------
   Navigation moved out of the Home left rail into the shared navbar, so Home is
   a two-column page: feed + utility column. Everything below is additive — no
   existing rule in main.css is overridden except the two Home column widths.
   Tokens are the ones already defined in main.css (--mf-*).
   ========================================================================== */

/* -------- Navbar surface --------
   The bar sat on --mf-surface, the same value the cards use, so it read as
   part of the page rather than as chrome. It now mixes surface toward ink by a
   fixed amount. Because --mf-surface and --mf-ink are aliases of --bs-body-bg
   and --bs-body-color, the mix resolves per theme with no per-theme rules: it
   darkens the bar under the light themes and lightens it under dark, always
   moving away from the page behind it.

   --mf-navbar-bg is exposed as its own token, so the tint can be changed in
   one place, or overridden per theme if a particular one needs a nudge. */
:root {
    --mf-navbar-tint: 7%;
    --mf-navbar-bg: color-mix(in oklab, var(--mf-surface) calc(100% - var(--mf-navbar-tint)), var(--mf-ink) var(--mf-navbar-tint));
    --mf-navbar-border: color-mix(in oklab, var(--mf-border) 65%, var(--mf-ink) 35%);
}

/* Dark themes need less mixing — a 7% lift there reads as washed out. */
[data-bs-theme="dark"] {
    --mf-navbar-tint: 5%;
}

.mf-navbar {
    background: var(--mf-navbar-bg);
    border-bottom: 1px solid var(--mf-navbar-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* Browsers without color-mix fall back to the old surface, which is the
       current behaviour rather than an unstyled bar. */
@supports not (background: color-mix(in oklab, red 50%, blue)) {
    .mf-navbar {
        background: var(--mf-surface);
    }
}

/* Controls inside the bar sit on the tinted surface, so they need their own
       step away from it rather than the page's canvas value. */
.mf-navbar .mf-topnav-link:hover,
.mf-navbar .mf-topnav-link:focus-visible,
.mf-navbar .mf-topnav-icon-btn:hover,
.mf-navbar .mf-topnav-icon-btn:focus-visible {
    background: color-mix(in oklab, var(--mf-navbar-bg) 88%, var(--mf-ink) 12%);
}

.mf-navbar .mf-topnav-search .mf-search-input {
    background: var(--mf-surface);
}

.mf-navbar .mf-topnav-badge {
    border-color: var(--mf-navbar-bg);
}

/* -------- Brand --------
   The 230px logo crowded the nav once primary links joined the bar. */
#navbar-logo {
    width: 168px !important;
}

@media (max-width: 1399.98px) {
    #navbar-logo {
        width: 132px !important;
    }
}

/* -------- Primary navigation in the top bar -------- */
.mf-topnav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: .75rem;
    /* Hug the brand instead of centring in the bar — the wrapper is
       justify-content-between, which would otherwise push this to the middle. */
    margin-right: auto;
}

.mf-topnav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mf-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

    .mf-topnav-link i {
        color: var(--mf-steel, #2F6690);
        font-size: 1.05rem;
    }

    .mf-topnav-link:hover,
    .mf-topnav-link:focus-visible {
        background: var(--mf-canvas);
        color: var(--mf-ink);
    }

    .mf-topnav-link.active {
        background: var(--mf-accent, #B0332E);
        color: #fff;
    }

        .mf-topnav-link.active i {
            color: #fff;
        }

    /* Bootstrap's caret is replaced by the chevron already in the markup */
    .mf-topnav-link.dropdown-toggle::after {
        display: none;
    }

/* -------- Masterfile panel -------- */
.mf-topnav-panel {
    min-width: 520px;
    padding: 1rem;
    border: 1px solid var(--mf-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -16px rgba(20,26,34,.5);
}

.mf-topnav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem 1.5rem;
}

/* Management and Report have two or three destinations each; a two-column grid
   would leave a hole, so they stack in a narrower panel. */
.mf-topnav-grid--1 {
    grid-template-columns: 1fr;
}

.mf-topnav-panel--sm {
    min-width: 300px;
}

.mf-topnav-tile {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    font-size: .88rem;
    color: var(--mf-ink);
    text-decoration: none;
}

    .mf-topnav-tile:hover,
    .mf-topnav-tile:focus-visible {
        background: var(--mf-canvas);
        color: var(--mf-ink);
    }

.mf-topnav-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--tile-tint, var(--mf-canvas));
    color: var(--tile-accent, var(--mf-ink));
    font-size: 1.05rem;
}

.mf-topnav-shortcuts {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--mf-border);
}

/* -------- Search, moved into the right-hand group --------
   The bar's search was a collapsed icon button beside the logo. In the top-bar
   layout it sits with the other utilities as an open pill. The collapse script
   still runs; these rules just keep it open from md up, so nothing about the
   suggestions dropdown or SearchEngine.js changes. */
@media (min-width: 768px) {
    .mf-topnav-search {
        width: 240px;
    }

        .mf-topnav-search .mf-search-btn,
        .mf-topnav-search .mf-search-close {
            display: none;
        }

        .mf-topnav-search .mf-search-form,
        .mf-topnav-search.is-active .mf-search-form {
            position: static;
            transform: none;
            width: 100%;
            opacity: 1;
            pointer-events: auto;
        }

        .mf-topnav-search .mf-search-input {
            height: 34px;
            border-radius: 999px;
            background: var(--mf-canvas);
            border-color: var(--mf-border);
            font-size: .82rem;
        }

        .mf-topnav-search .mf-search-suggestions {
            width: min(420px, 60vw);
        }
}

@media (min-width: 1400px) {
    .mf-topnav-search {
        width: 300px;
    }
}

/* -------- Icon buttons, notification badge, account -------- */
.mf-topnav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--mf-muted);
    font-size: 1.25rem;
    cursor: pointer;
}

    .mf-topnav-icon-btn:hover,
    .mf-topnav-icon-btn:focus-visible {
        background: var(--mf-canvas);
        color: var(--mf-ink);
    }

    /* The chat icon is a link to a page, so unlike the other icon buttons it can
       be the current one. Without this the "active" class it carries would style
       nothing and the icon would look identical wherever you were. */
    .mf-topnav-icon-btn.active {
        background: var(--mf-canvas);
        color: var(--mf-accent, #B0332E);
    }

    /* An anchor inherits link colour and underline; the icon buttons are circles
       of glyph, not text. */
    a.mf-topnav-icon-btn {
        text-decoration: none;
    }

.mf-topnav-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border: 2px solid var(--mf-surface);
    border-radius: 999px;
    background: var(--mf-accent, #B0332E);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 11px;
    text-align: center;
}

.mf-topnav-account {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mf-muted);
    cursor: pointer;
}

.mf-topnav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.mf-topnav-avatar--lg {
    width: 40px;
    height: 40px;
}

.mf-topnav-account-menu {
    min-width: 250px;
    padding: 0 0 .4rem;
    border: 1px solid var(--mf-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px -16px rgba(20,26,34,.5);
}

/* Notification panel — same shell as the account menu so the two dropdowns in
   the top bar read as one family. */
.mf-topnav-notif-menu {
    width: 340px;
    max-width: calc(100vw - 1.5rem);
    padding: 0;
    border: 1px solid var(--mf-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px -16px rgba(20,26,34,.5);
}

/* Type chips. Horizontally scrollable rather than wrapping: a wrapped second row
   pushes the list down and changes the panel's height as types come and go. */
.mf-topnav-notif-filters {
    display: flex;
    gap: .3rem;
    padding: .5rem .6rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--mf-border);
}

.mf-topnav-notif-filters::-webkit-scrollbar {
    display: none;
}

.mf-topnav-notif-filters:empty {
    display: none;
    border-bottom: 0;
}

.mf-topnav-notif-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    padding: .2rem .55rem;
    border: 1px solid var(--mf-border);
    border-radius: 999px;
    background: transparent;
    color: var(--mf-muted);
    font-size: .74rem;
    white-space: nowrap;
    cursor: pointer;
}

.mf-topnav-notif-chip:hover {
    color: var(--mf-ink);
}

.mf-topnav-notif-chip.active {
    border-color: var(--mf-accent, #B0332E);
    background: var(--mf-accent, #B0332E);
    color: #fff;
}

/* Unread count inside a chip. On the active chip it has to invert, since the
   chip itself is already accent-coloured. */
.mf-topnav-notif-chip-count {
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--mf-accent, #B0332E);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
}

.mf-topnav-notif-chip.active .mf-topnav-notif-chip-count {
    background: #fff;
    color: var(--mf-accent, #B0332E);
}

/* Capped so a long run of notifications scrolls inside the panel instead of
   growing it past the bottom of the window. */
.mf-topnav-notif-list {
    max-height: 22rem;
    overflow-y: auto;
}

.mf-topnav-notif-item {
    display: block;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--mf-border);
    font-size: .85rem;
    line-height: 1.35;
}

.mf-topnav-notif-item:last-child {
    border-bottom: 0;
}

/* Delivery entries with a resolvable RouteID render as <a> instead of <div>
   (see renderNotifications in NotificationSignalR.js) — reset link defaults
   and leave room on the right for the chevron affordance below. */
a.mf-topnav-notif-item {
    position: relative;
    color: inherit;
    text-decoration: none;
    padding-right: 2rem;
}

    a.mf-topnav-notif-item:hover {
        background: var(--mf-canvas);
        color: inherit;
    }

    a.mf-topnav-notif-item .mf-topnav-notif-goto {
        position: absolute;
        right: .75rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        color: var(--mf-muted);
    }

/* Unread items carry a tinted rail rather than a bold font: the text of a
   notification is often long, and bolding the whole thing makes the panel
   harder to scan, not easier. */
.mf-topnav-notif-item--unread {
    border-left: 3px solid var(--mf-accent, #B0332E);
    background: rgba(176,51,46,.05);
}

.mf-topnav-notif-time {
    display: block;
    margin-top: .15rem;
    font-size: .72rem;
    color: var(--mf-muted);
}

    .mf-topnav-account-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: .6rem;
        margin: 0 .4rem;
        width: auto;
        border-radius: 8px;
        font-size: .88rem;
    }

        .mf-topnav-account-menu .dropdown-item i {
            font-size: 1.1rem;
        }

.mf-topnav-account-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--mf-border);
}

.mf-topnav-account-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--mf-ink);
}

.mf-topnav-account-role {
    font-size: .76rem;
    color: var(--mf-muted);
}

/* -------- Mobile drawer -------- */
.mf-nav-drawer {
    width: 300px;
}

.mf-nav-drawer-head {
    border-bottom: 1px solid var(--mf-border);
}

.mf-nav-drawer-logout {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    color: var(--bs-danger, #dc3545);
    font-size: .9rem;
    text-decoration: none;
}

/* -------- Home two-column grid -------- */
.mf-home {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Explicit tracks, not flex. The feed contains an Owl carousel that measures
   its own width on init; with `flex: 1 1 auto` the carousel's measurement drove
   the column instead of the reverse, collapsing the feed to a sliver and
   letting the carousel overflow across the page. `minmax(0, 1fr)` fixes the
   track width before any child measures itself. */
.mf-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 1.5rem;
}

.mf-home-main {
    min-width: 0;
    overflow-x: clip;
}

    /* The feed's own content stays centred and capped, as it was before. */
    .mf-home-main > * {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Owl builds .owl-stage at a pixel width from its container; keep both the
       viewport and the carousel itself inside the capped column. */
    .mf-home-main .owl-carousel,
    .mf-home-main .owl-stage-outer {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

/* Sticky, but with its own scroll region. Without the max-height the column is
   pinned at `top` and anything below the fold is unreachable — the feed loads
   more posts forever, so the page never scrolls far enough to reveal the rest
   of the aside. Capping it to the viewport lets the tail scroll into view. */
.mf-home-aside {
    min-width: 0;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--mf-border) transparent;
    /* Room for the scrollbar so cards don't shift when it appears. */
    padding-right: 4px;
}

    .mf-home-aside::-webkit-scrollbar {
        width: 6px;
    }

    .mf-home-aside::-webkit-scrollbar-track {
        background: transparent;
    }

    .mf-home-aside::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--mf-border);
    }

        .mf-home-aside::-webkit-scrollbar-thumb:hover {
            background: var(--mf-muted);
        }

/* -------- Aside banner --------
   GetBanners renders whatever aspect ratio the uploaded image happens to have.
   In a 320px column a square logo became a ~450px tall block that pushed
   everything else out of view. Capped and cropped instead. */
.mf-aside-banner .owl-carousel,
.mf-aside-banner .item,
.mf-aside-banner img {
    border-radius: 12px;
}

.mf-aside-banner img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

/* -------- Empty feed -------- */
.mf-feed-empty {
    padding: 2.5rem 1.5rem;
}

    .mf-feed-empty i {
        font-size: 2.2rem;
        color: var(--mf-muted);
        opacity: .6;
    }

    .mf-feed-empty h3 {
        margin: .6rem 0 .35rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--mf-ink);
    }

    .mf-feed-empty p {
        margin: 0 0 1rem;
        font-size: .88rem;
        color: var(--mf-muted);
    }

/* -------- Responsive -------- */
/* Below 1200 the utility column drops under the feed rather than disappearing.
   This is the behaviour the layout was chosen for — on the old grid both
   sidebars were d-none below md and their content was unreachable. */
@media (max-width: 1199.98px) {
    .mf-home-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mf-home-aside {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
    }

        .mf-home-aside #rightbar {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            align-items: start;
        }

            .mf-home-aside #rightbar > * {
                width: 100% !important;
                margin-bottom: 0 !important;
            }
}

@media (max-width: 767.98px) {
    .mf-home-aside #rightbar {
        grid-template-columns: 1fr;
    }

    .mf-topnav-panel {
        min-width: 0;
    }
}

/* ===========================================================================
   Chat avatars (Truck > Trucker Chat)

   The initials sit UNDERNEATH the photo rather than being swapped in by an
   onerror handler. Employee photos are named by user id and most users have
   none — Content/Images/EmployeeImg holds a handful — and there is no
   default.jpg in the folder, so the usual `onerror -> default.jpg` fallback
   used elsewhere in this app resolves to a 404 and a broken-image icon.
   Layering means a missing photo simply reveals the initials.
   =========================================================================== */
.mf-chat-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mf-canvas);
    color: var(--mf-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    user-select: none;
}

.mf-chat-avatar-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-chat-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hides the broken-image glyph when there is no photo, letting the initials
   underneath show through cleanly. */
.mf-chat-avatar img:not([src]),
.mf-chat-avatar img[src=""] {
    display: none;
}