/* ===========================================================================
   Movssy admin — shell
   ---------------------------------------------------------------------------
   Layout taken from the reference design: a thin icon rail on the left for
   setup, a horizontal pill navigation across the top for the operational
   flow, and a light gradient canvas holding white cards.

   Markup lives in partial/navbar.blade.php. The notification and profile
   dropdowns stay in partial/header.blade.php — their JS is bound to those
   element ids — and are docked into the top bar from here.

   Loaded after movssy-ui.css; tokens come from there.
   =========================================================================== */

:root {
    --mv-rail-w:   68px;
    --mv-topbar-h: 68px;
}

body {
    font-family: var(--mv-font) !important;
    color: var(--mv-ink);
    background: linear-gradient(165deg, #F6F5F7 0%, #EFEDF1 55%, #EAE8EE 100%) !important;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

/* The template's own wrappers must stop painting and stop reserving space. */
.page-wrapper,
.page-wrapper.toggled { padding: 0 !important; margin: 0 !important; }

main.page-content,
.page-wrapper .page-content {
    background: transparent !important;
    margin-left: var(--mv-rail-w) !important;
    margin-top: var(--mv-topbar-h) !important;
    min-height: calc(100vh - var(--mv-topbar-h));
}

/* ---------- Icon rail ---------------------------------------------------- */

.mv-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--mv-rail-w);
    z-index: 60;
    background: var(--mv-surface);
    border-right: 1px solid var(--mv-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 16px;
    gap: 6px;
}

.mv-rail-mark {
    width: 38px; height: 38px;
    border-radius: 13px;
    background: var(--mv-ink-surface);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 500;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.mv-rail-items {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    overflow-y: auto; overflow-x: visible;
    flex: 1;
    width: 100%;
    scrollbar-width: none;
}
.mv-rail-items::-webkit-scrollbar { width: 0; }

.mv-rail-item {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: var(--mv-faint);
    font-size: 19px;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.mv-rail-item:hover { background: var(--mv-line-soft); color: var(--mv-ink); }
.mv-rail-item.is-active { background: var(--mv-ink-surface); color: #fff; }

/* Label on hover, so an icon-only rail is still legible. */
.mv-rail-tip {
    position: absolute;
    left: calc(100% + 10px);
    white-space: nowrap;
    background: var(--mv-ink-surface);
    color: #fff;
    font-size: var(--mv-text-xs);
    padding: 6px 11px;
    border-radius: 9px;
    opacity: 0; pointer-events: none;
    transform: translateX(-4px);
    transition: opacity .14s ease, transform .14s ease;
    z-index: 70;
}
.mv-rail-item:hover .mv-rail-tip { opacity: 1; transform: translateX(0); }

.mv-rail-foot { margin-top: auto; }

/* ---------- Top bar ------------------------------------------------------ */

.mv-topbar {
    position: fixed;
    top: 0; left: var(--mv-rail-w); right: 0;
    height: var(--mv-topbar-h);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 24px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--mv-line);
}

.mv-brand {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--mv-ink);
    flex-shrink: 0;
}

.mv-topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.mv-topnav::-webkit-scrollbar { height: 0; }

.mv-topnav-item {
    padding: 9px 17px;
    border-radius: var(--mv-r-pill);
    font-size: var(--mv-text-md);
    color: var(--mv-ink-soft);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.mv-topnav-item:hover { background: var(--mv-line-soft); color: var(--mv-ink); }
.mv-topnav-item.is-active { background: var(--mv-ink-surface); color: #fff; }

.mv-topbar-spacer { flex: 1; }

/* ---------- Docking the template's own header ---------------------------- */
/* partial/header.blade.php still renders the notification and profile
   dropdowns. Rather than move that markup and break the JS bound to its ids,
   its bar is stripped of chrome and parked at the right of the new top bar. */

.top-header {
    position: fixed !important;
    top: 0 !important;
    right: 18px !important;
    left: auto !important;
    width: auto !important;
    height: var(--mv-topbar-h) !important;
    z-index: 56 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

.top-header .header-bar {
    padding: 0 !important;
    gap: 10px;
    background: transparent !important;
}

/* The hamburger belonged to the old sidebar and has nothing to toggle now. */
.top-header #close-sidebar { display: none !important; }

.top-header .dropdown-toggle > div {
    background: #fff !important;
    border: 1px solid var(--mv-line) !important;
    border-radius: 50% !important;
    box-shadow: var(--mv-shadow-sm) !important;
    color: var(--mv-ink-soft) !important;
    width: 38px; height: 38px;
    display: flex !important; align-items: center; justify-content: center;
}

.dropdown-menu {
    border-radius: var(--mv-r-lg) !important;
    border: 1px solid var(--mv-line) !important;
    box-shadow: var(--mv-shadow-lg) !important;
    overflow: hidden;
}

/* ---------- Pages not yet rewritten -------------------------------------- */
/* So every screen reads as the same system while they are migrated. */

.page-content > .container-fluid,
.page-content > div:not(.mv-scope) { padding-top: 10px; }

.page-content .rounded-md,
.page-content .rounded-lg,
.page-content .rounded-xl { border-radius: var(--mv-r-lg) !important; }

.page-content .shadow,
.page-content .shadow-md,
.page-content .shadow-lg { box-shadow: var(--mv-shadow-sm) !important; }

.page-content .bg-white { background: var(--mv-surface) !important; }

.page-content table thead th,
.page-content table thead td {
    font-size: var(--mv-text-xs) !important;
    font-weight: 400 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mv-faint) !important;
    background: var(--mv-surface-2) !important;
}
.page-content table tbody td {
    font-size: var(--mv-text-md) !important;
    border-color: var(--mv-line-soft) !important;
}

.page-content input:not([type=checkbox]):not([type=radio]),
.page-content select,
.page-content textarea {
    border-radius: var(--mv-r-md) !important;
    border-color: var(--mv-line) !important;
    font-family: var(--mv-font) !important;
}
.page-content input:focus,
.page-content select:focus,
.page-content textarea:focus {
    border-color: var(--mv-ink) !important;
    box-shadow: 0 0 0 3px rgba(12, 12, 14, .06) !important;
}

/* The template's indigo is retired: black carries primary actions, green is
   kept for confirmation only, as in the reference. */
.page-content .bg-indigo-600,
.page-content .bg-indigo-500 {
    background: var(--mv-ink-surface) !important;
    border-radius: var(--mv-r-pill) !important;
}
.page-content .text-indigo-600 { color: var(--mv-ink) !important; }

.page-content .pagination li a,
.page-content .pagination li span {
    border-radius: var(--mv-r-pill) !important;
    border-color: var(--mv-line) !important;
}

.page-content .mv-scope { background: transparent; }

/* ---------- Narrow screens ----------------------------------------------- */

@media (max-width: 820px) {
    :root { --mv-rail-w: 56px; }
    .mv-topbar { gap: 14px; padding: 0 14px; }
    .mv-brand { display: none; }
    .top-header { right: 8px !important; }
}

/* ===========================================================================
   Flat surfaces revision
   ---------------------------------------------------------------------------
   The references do not use drop shadows to create depth. Panels sit inside
   panels and are told apart by background tone and a hairline, which is why
   those screens read as calm with a lot of information on them. Shadows are
   reserved for things that genuinely float: the rail, dropdowns, tooltips.
   =========================================================================== */

:root {
    --mv-shadow-sm: none;
    --mv-shadow-md: none;
    --mv-r-lg: 20px;
    --mv-r-xl: 24px;

    /* Panel tones, lightest to deepest. */
    --mv-panel:      #FFFFFF;
    --mv-panel-sunk: #F6F6F8;
    --mv-panel-edge: #EDECF1;
}

/* Brand marks */
.mv-brand { display: flex; align-items: center; }
.mv-brand img { height: 20px; width: auto; display: block; }

.mv-rail-mark { background: transparent !important; padding: 5px; }
.mv-rail-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The rail floats: rounded, detached, dark. */
.mv-rail {
    top: 14px !important;
    bottom: 14px !important;
    left: 12px !important;
    width: 58px !important;
    border-radius: 26px !important;
    border: 0 !important;
    background: var(--mv-ink-surface) !important;
    box-shadow: 0 10px 34px rgba(12, 12, 14, .22) !important;
    padding: 10px 0 12px !important;
}
.mv-rail-item { color: rgba(255, 255, 255, .5) !important; width: 38px; height: 38px; border-radius: 12px; }
.mv-rail-item:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.mv-rail-item.is-active { background: #fff !important; color: var(--mv-ink) !important; }
.mv-rail-tip { background: var(--mv-ink-surface); box-shadow: 0 6px 20px rgba(0,0,0,.2); }

main.page-content,
.page-wrapper .page-content { margin-left: 82px !important; }

/* Top bar: no blur, no border, it is part of the canvas. */
.mv-topbar {
    left: 82px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
}

/* ---------- Cards -------------------------------------------------------- */

.mv-card {
    background: var(--mv-panel);
    border: 1px solid var(--mv-panel-edge);
    border-radius: var(--mv-r-lg);
    box-shadow: none;
}
.mv-card-hover:hover { transform: none; box-shadow: none; border-color: #DFDEE6; }

/* An outer container holding inner panels — the nesting in the references. */
.mv-panel {
    background: var(--mv-panel);
    border: 1px solid var(--mv-panel-edge);
    border-radius: var(--mv-r-xl);
    padding: 20px;
}
.mv-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}
.mv-panel-title { font-size: var(--mv-text-md); color: var(--mv-ink); }

/* Inner panel: sunk tone, no border, tighter radius. */
.mv-sunk {
    background: var(--mv-panel-sunk);
    border: 0;
    border-radius: var(--mv-r-md);
    padding: 16px;
}

/* Small circular action buttons that sit in a card corner. */
.mv-chip-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mv-panel-sunk);
    color: var(--mv-muted);
    border: 0;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.mv-chip-btn:hover { background: var(--mv-panel-edge); color: var(--mv-ink); }

/* Tabs and buttons lose their shadow too. */
.mv-tab, .mv-btn, .mv-icon-btn { box-shadow: none !important; }
.mv-tab { border-color: var(--mv-panel-edge); }
.mv-icon-btn { border-color: var(--mv-panel-edge); }

/* Table lives inside a panel; its header is the sunk tone. */
.mv-table thead th { background: var(--mv-panel-sunk) !important; border-bottom: 1px solid var(--mv-panel-edge); }
.mv-table tbody td { border-bottom: 1px solid var(--mv-panel-edge); }
.mv-table tbody tr:hover { background: var(--mv-panel-sunk); }

/* Legacy screens follow the same rule. */
.page-content .shadow,
.page-content .shadow-md,
.page-content .shadow-lg { box-shadow: none !important; border: 1px solid var(--mv-panel-edge) !important; }

/* Things that really do float keep their shadow. */
.dropdown-menu { box-shadow: 0 12px 40px rgba(12, 12, 14, .14) !important; }

/* ---------- Fixes after the flat revision -------------------------------- */

/* .mv-card is redefined above, which also flattened the emphasis card.
   Restated here so the "outstanding" tile stays black. */
.mv-card.mv-card-ink {
    background: var(--mv-ink-surface) !important;
    border-color: transparent !important;
    color: var(--mv-on-ink);
}
.mv-card.mv-card-ink .mv-label { color: rgba(255, 255, 255, .45); }

/* Content must not run under the right edge. The page owns a max width and
   the table scrolls inside its panel instead of pushing the layout. */
.mv-page { max-width: 1680px; padding-right: 32px; }
.mv-card-flush { overflow-x: auto; }
.mv-table { min-width: 880px; }

/* Long reference text in a cell should truncate, not stack into four lines. */
.mv-table td { max-width: 320px; }
.mv-table td > div { overflow: hidden; text-overflow: ellipsis; }

/* Keep the invoice number on one line. */
.mv-table td a { white-space: nowrap; }

/* ===========================================================================
   Calibration
   ---------------------------------------------------------------------------
   Two problems, measured rather than guessed:

   1. .page-content carried padding-left: 300px, reserved by the template for
      the old wide sidebar. Added to the 82px of the new rail, content started
      382px in and overflowed the viewport by exactly the rail width.

   2. The type and spacing scale was set for a marketing page, not a dense
      operations panel. The reference screens fit far more on screen: ~28px
      page titles, 10px labels, 16-20px card padding.
   =========================================================================== */

main.page-content,
.page-wrapper .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow-x: hidden;
}

/* Nothing in the panel may push the page wider than the window. */
html, body { max-width: 100%; overflow-x: hidden; }

:root {
    /* Denser scale */
    --mv-h1:      28px;
    --mv-h2:      22px;
    --mv-h3:      17px;
    --mv-display: 34px;

    --mv-text-xs: 10.5px;
    --mv-text-sm: 12.5px;
    --mv-text-md: 13.5px;
    --mv-text-lg: 15px;

    --mv-gap: 12px;
    --mv-pad: 18px;

    --mv-r-lg: 16px;
    --mv-r-xl: 18px;
    --mv-r-md: 12px;
}

.mv-page {
    padding: 20px 22px 44px !important;
    max-width: none !important;
}

.mv-title { line-height: 1.15; }
.mv-subtitle { font-size: var(--mv-text-sm); margin-top: 2px; }

.mv-card   { padding: 16px; }
.mv-panel  { padding: 16px; }
.mv-sunk   { padding: 12px; border-radius: 11px; }

.mv-value    { font-size: var(--mv-h3); }
.mv-value-lg { font-size: var(--mv-h2); }
.mv-stat     { gap: 4px; }

.mv-table thead th { padding: 10px 14px; }
.mv-table tbody td { padding: 11px 14px; }

.mv-btn      { padding: 9px 16px; }
.mv-btn-sm   { padding: 6px 12px; }
.mv-tab      { padding: 8px 14px; }
.mv-icon-btn { width: 34px; height: 34px; }
.mv-chip-btn { width: 26px; height: 26px; font-size: 12px; }

.mv-mt-lg { margin-top: 18px; }
.mv-header { gap: 16px; }

/* The six alert tiles need to fit without clipping the last one. */
.mv-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mv-grid-6 > * { min-width: 0; }
.mv-grid-4 > *, .mv-grid-3 > *, .mv-grid-2 > *, .mv-grid-5 > * { min-width: 0; }

@media (max-width: 1400px) {
    .mv-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
    .mv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Top bar at the tighter scale */
:root { --mv-topbar-h: 58px; }
.mv-brand img { height: 17px; }
.mv-topnav-item { padding: 7px 14px; }

/* ─────────────────────────────────────────────────────────────────────────
   Cargo network: map, lanes, flags

   Flags are the SVG set already in the project (assets/flags), not emoji:
   emoji render differently on every platform and vanish on Windows.
   ───────────────────────────────────────────────────────────────────────── */

.mv-flag {
    height: auto;
    border-radius: 3px;
    display: block;
    box-shadow: 0 0 0 1px rgba(12, 12, 14, .10);
    object-fit: cover;
}

.mv-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--mv-text-xs);
    color: var(--mv-faint);
}
.mv-legend i { font-size: 14px; color: var(--mv-ink); }

/* ── Map ─────────────────────────────────────────────────────────────── */

.mv-map-wrap { position: relative; }
#mv-map      { height: 400px; width: 100%; }

/* jsvectormap ships its own chrome; make it match the panel. */
#mv-map .jvm-zoom-btn {
    background: #FFFFFF;
    color: var(--mv-ink);
    border: 1px solid var(--mv-panel-edge);
    border-radius: 7px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    box-shadow: none;
}
#mv-map .jvm-zoom-btn.jvm-zoomin  { top: 8px; }
#mv-map .jvm-zoom-btn.jvm-zoomout { top: 36px; }

.jvm-tooltip {
    background: var(--mv-ink-surface);
    border: 0;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: var(--mv-font);
    font-size: 11px;
    box-shadow: 0 6px 20px rgba(12, 12, 14, .22);
}

/* Below the map, not over it: an overlay here would sit on top of the very
   lanes the panel exists to show. */
.mv-map-stats {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.mv-map-stat {
    flex: 1 1 200px;
    background: var(--mv-panel-sunk);
    border: 1px solid var(--mv-panel-edge);
    border-radius: 12px;
    padding: 10px 13px;
}

.mv-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mv-text-sm);
}

/* ── Mode marks: air and ocean must stay apart at a glance ───────────── */

.mv-mode-dot {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #FFFFFF;
    flex: none;
}
.mv-mode-air   { background: #1933FC; }
.mv-mode-ocean { background: #0E7C86; }

/* ── Lane card ───────────────────────────────────────────────────────── */

.mv-lane {
    background: var(--mv-panel-sunk);
    border: 1px solid var(--mv-panel-edge);
    border-radius: 13px;
    padding: 12px 13px;
}

.mv-lane-route {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A thin dashed run between the two flags with the mode mark riding on it,
   so the card says "these two countries, by air" in one glance. The line is
   the route; the badge is the only thing carrying colour. */
.mv-lane-track {
    flex: 1;
    height: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
}
.mv-lane-track::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    border-top: 1.5px dashed #C9C7D6;
}
.mv-lane-track i {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--mv-panel-sunk);
}
.mv-lane-track.mv-mode-air   { background: none; }
.mv-lane-track.mv-mode-ocean { background: none; }
.mv-lane-track.mv-mode-air   i { background: #1933FC; }
.mv-lane-track.mv-mode-ocean i { background: #0E7C86; }

.mv-lane-cities {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-top: 9px;
    font-size: var(--mv-text-xs);
}
.mv-lane-cities > span:first-child,
.mv-lane-cities > span:last-child { font-size: var(--mv-text-sm); }

.mv-lane-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--mv-panel-edge);
}

/* ── Sign-ups list ───────────────────────────────────────────────────── */

.mv-signup {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
}

.mv-meter {
    height: 4px;
    background: var(--mv-panel-sunk);
    border-radius: 99px;
    margin-top: 5px;
    overflow: hidden;
}
.mv-meter > div {
    height: 100%;
    background: var(--mv-ink-surface);
    border-radius: 99px;
}

@media (max-width: 1150px) {
    .mv-map-stats { position: static; margin-top: 10px; flex-wrap: wrap; }
    #mv-map { height: 320px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Invoice builder: form on the left, the real document on the right

   The preview is a document, not a widget: white page, serif-free but
   print-like spacing, so what the operator approves is what gets sent.
   ───────────────────────────────────────────────────────────────────────── */

.mv-crumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--mv-text-xs);
    color: var(--mv-faint);
    margin-bottom: 6px;
}
.mv-crumbs a { color: var(--mv-faint); }
.mv-crumbs a:hover { color: var(--mv-ink); }

.mv-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mv-gap);
    align-items: start;
}
.mv-split.is-solo { grid-template-columns: minmax(0, 1fr); }
.mv-split.is-solo .mv-preview-col { display: none; }

.mv-build { align-self: start; }

.mv-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--mv-text-md);
    font-weight: 500;
    color: var(--mv-ink);
    margin-bottom: 11px;
}

/* ── Fields ──────────────────────────────────────────────────────────── */

.mv-field > span {
    display: block;
    font-size: var(--mv-text-xs);
    color: var(--mv-faint);
    margin-bottom: 5px;
}
.mv-field > span b { color: var(--mv-danger); font-weight: 400; }
.mv-field > small { display: block; margin-top: 5px; font-size: 10px; }

.mv-field-check {
    display: flex;
    align-items: center;
    gap: 7px;
    align-self: end;
    padding-bottom: 10px;
}
.mv-field-check > span { margin: 0; font-size: var(--mv-text-sm); color: var(--mv-ink); }
.mv-field-check input { width: 15px; height: 15px; accent-color: var(--mv-ink-surface); }

textarea.mv-input { resize: vertical; min-height: 56px; }
select.mv-input   { appearance: auto; }
.mv-input:disabled { background: var(--mv-panel-sunk); color: var(--mv-faint); }

/* ── Charge item ─────────────────────────────────────────────────────── */

.mv-item {
    background: var(--mv-panel-sunk);
    border: 1px solid var(--mv-panel-edge);
    border-radius: 13px;
    padding: 13px;
    margin-bottom: 10px;
}

.mv-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}
.mv-item-no { font-size: var(--mv-text-xs); color: var(--mv-faint); }

.mv-item-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .7fr)
                           minmax(0, 1fr) auto minmax(0, .8fr);
    gap: 9px;
    margin-top: 9px;
}

/* ── The document ────────────────────────────────────────────────────── */

.mv-preview-col { position: sticky; top: calc(var(--mv-topbar-h) + 12px); }

.mv-preview-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px 9px;
}

.mv-doc {
    background: #FFFFFF;
    border: 1px solid var(--mv-panel-edge);
    border-radius: var(--mv-r-lg);
    padding: 26px 28px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mv-ink);
    max-height: calc(100vh - var(--mv-topbar-h) - 120px);
    overflow-y: auto;
}

.mv-doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mv-panel-edge);
}
.mv-doc-word { font-size: 26px; font-weight: 600; letter-spacing: -.5px; }
.mv-doc-no   { color: var(--mv-faint); font-size: 10.5px; margin-top: 2px; }
.mv-doc-no b { color: var(--mv-ink); font-weight: 500; }

.mv-doc-parties {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 0;
}
.mv-doc-parties > div { display: flex; flex-direction: column; min-width: 0; }
.mv-doc-parties span { overflow: hidden; text-overflow: ellipsis; }
.mv-doc-parties b { font-weight: 500; }

.mv-doc-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mv-faint);
    margin-bottom: 3px;
}

.mv-doc-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.mv-doc-table th {
    text-align: left;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mv-faint);
    font-weight: 400;
    padding: 8px 0;
    border-bottom: 1px solid var(--mv-panel-edge);
}
.mv-doc-table td {
    padding: 9px 0;
    border-bottom: 1px solid #F1F0F5;
    vertical-align: top;
}
.mv-doc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-doc-table th.num { padding-left: 14px; }
.mv-doc-table td.num { padding-left: 14px; }

.mv-doc-totals { margin-top: 14px; margin-left: auto; width: 62%; }
.mv-doc-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}
.mv-doc-totals b { font-variant-numeric: tabular-nums; font-weight: 500; }
.mv-doc-totals .grand {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1.5px solid var(--mv-ink);
    font-size: 13px;
}
.mv-doc-totals .grand b { font-weight: 600; }

.mv-doc-note {
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--mv-panel-sunk);
    border-radius: 9px;
    font-size: 10.5px;
}

.mv-doc-pay {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mv-panel-edge);
    font-size: 10.5px;
}

@media (max-width: 1250px) {
    .mv-split { grid-template-columns: minmax(0, 1fr); }
    .mv-preview-col { position: static; }
    .mv-doc { max-height: none; }
    .mv-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Rail with captions

   An icon alone is a guess. The caption under it is what makes a sidebar
   usable by someone who is not the person who built it.
   ───────────────────────────────────────────────────────────────────────── */

:root { --mv-rail-w: 104px; }

.mv-rail {
    width: 80px !important;
    padding: 12px 7px 12px !important;
    gap: 2px;
}

.mv-rail-item {
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 7px 3px 6px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
}

/* The tooltip becomes the caption: always on, never guessed at. */
.mv-rail-tip {
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: normal;
    max-width: 100%;
    pointer-events: none;
}

.mv-rail-item.is-active .mv-rail-tip { color: #fff; }

.mv-rail-mark { width: 40px; height: 40px; margin-bottom: 8px; }

/* The rail is taller than the viewport once every item is labelled, so it
   scrolls; the brand mark and sign-out stay put. */
.mv-rail-items { gap: 2px; padding: 2px 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Dashboard headline band
   ───────────────────────────────────────────────────────────────────────── */

.mv-hero { padding: 4px 0 0; }

.mv-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mv-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    padding: 18px 0 20px;
    border-top: 1px solid var(--mv-panel-edge);
    border-bottom: 1px solid var(--mv-panel-edge);
}

.mv-hero-stat {
    padding: 0 22px;
    border-left: 1px solid var(--mv-panel-edge);
    min-width: 0;
}
.mv-hero-stat:first-child { border-left: 0; padding-left: 2px; }

.mv-hero-figure {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 5px 0 4px;
    flex-wrap: wrap;
}
.mv-hero-figure > .mv-num {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.5px;
    line-height: 1.1;
}
.mv-hero-stat.is-lead .mv-hero-figure > .mv-num { font-size: 34px; }

@media (max-width: 1150px) {
    .mv-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .mv-hero-stat:nth-child(odd) { border-left: 0; padding-left: 2px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Needs attention, and the payables breakdown
   ───────────────────────────────────────────────────────────────────────── */

.mv-alert-tile {
    display: block;
    background: var(--mv-panel-sunk);
    border: 1px solid var(--mv-panel-edge);
    border-radius: 13px;
    padding: 13px;
    color: var(--mv-ink);
    transition: border-color .14s ease, background .14s ease;
}
.mv-alert-tile:hover { border-color: #C9C7D6; }

/* A tile with something in it earns the colour; an empty one stays quiet,
   so a glance at the row is enough to see whether anything is wrong. */
.mv-alert-tile.is-hot {
    background: rgba(255, 98, 98, .07);
    border-color: rgba(255, 98, 98, .28);
}

.mv-alert-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid var(--mv-panel-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--mv-faint);
}
.mv-alert-tile.is-hot .mv-alert-icon {
    background: var(--mv-danger);
    border-color: transparent;
    color: #FFFFFF;
}

.mv-alert-n {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    margin-top: 10px;
}
.mv-alert-label { display: block; font-size: var(--mv-text-sm); margin-top: 3px; }
.mv-alert-note  { display: block; font-size: var(--mv-text-xs); color: var(--mv-faint); margin-top: 2px; }

.mv-ap-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
}
.mv-ap-row + .mv-ap-row { border-top: 1px solid var(--mv-panel-edge); }

.mv-ap-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--mv-panel-sunk);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--mv-ink);
    flex: none;
}

/* ===========================================================================
   Rail, rebuilt to the UPS reference
   ---------------------------------------------------------------------------
   White, flush with the edge, full height. Each item is an icon over an
   uppercase caption, and the active one is marked by a coloured bar down its
   left edge against a tinted background — the way the UPS rail marks QUOTE.

   This block comes last in the file deliberately: the earlier "floating dark
   rail" revision set its properties with !important, so they are restated
   here rather than edited in place, which would have rewritten history that
   other screens were checked against.
   =========================================================================== */

:root { --mv-rail-w: 92px; }

.mv-rail {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 84px !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    border-right: 1px solid #E3E4E8 !important;
    box-shadow: none !important;
    padding: 16px 0 14px !important;
    gap: 0;
}

.mv-rail-mark {
    background: transparent !important;
    width: 46px; height: 46px;
    margin-bottom: 14px;
}

.mv-rail-items { gap: 0; width: 100%; }

.mv-rail-item {
    width: 100% !important;
    height: auto !important;
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 9px 4px 8px;
    border-radius: 0;
    border-left: 3px solid transparent;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    color: #6B6C76 !important;
    background: transparent !important;
}
.mv-rail-item:hover {
    background: #F5F6F8 !important;
    color: var(--mv-ink) !important;
}

/* The marker: a bar in the brand blue, with the icon picking up the colour. */
.mv-rail-item.is-active {
    background: #F2F4FF !important;
    color: #1933FC !important;
    border-left-color: #1933FC;
}

.mv-rail-tip {
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    box-shadow: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: normal;
    pointer-events: none;
}
.mv-rail-item.is-active .mv-rail-tip { color: #1933FC; }

.mv-rail-foot { margin-top: auto; width: 100%; border-top: 1px solid #EDEEF1; padding-top: 8px; }

/* The page sits beside a flush rail now, not a detached one. */
main.page-content, .page-wrapper .page-content { margin-left: 84px !important; }
.mv-topbar { left: 84px !important; }

/* ===========================================================================
   Shell in the Movssy palette
   ---------------------------------------------------------------------------
   Black for structure, #2575FC for the active marker, #DAD5E3 for hairlines
   and #F5F4F8 for the page. Restated at the end of the file rather than
   edited in place, because the earlier revisions set these with !important
   and other screens were checked against them.
   =========================================================================== */

.mv-rail {
    background: #FFFFFF !important;
    border-right: 1px solid #DAD5E3 !important;
}

.mv-rail-item { color: #6B6676 !important; }
.mv-rail-item:hover { background: #F5F4F8 !important; color: #000000 !important; }

.mv-rail-item.is-active {
    background: #E8F0FE !important;
    color: #2575FC !important;
    border-left-color: #2575FC;
}
.mv-rail-item.is-active .mv-rail-tip { color: #2575FC; }

/* The top bar and its pills take the navy. */
.mv-topbar { background: #F5F4F8 !important; border-bottom: 1px solid #DAD5E3 !important; }
.mv-topnav-item { color: #6B6676 !important; }
.mv-topnav-item:hover { color: #000000 !important; }
.mv-topnav-item.is-active { background: #000000 !important; color: #FFFFFF !important; }

main.page-content, .page-wrapper .page-content { background: #F5F4F8 !important; }

/* The stock template sets .page-content to display:inline-block, which was
   fine beside its old fixed sidebar but makes the element shrink to fit its
   content: on a wide screen that left roughly a third of the window empty and
   folded the dashboard's four columns down to two. It fills the row now. */
main.page-content, .page-wrapper .page-content {
    display: block !important;
    width: auto !important;
}

/* ===========================================================================
   Primary action colour
   ---------------------------------------------------------------------------
   The filled buttons and the active navigation pill were black, which is the
   stock template's emphasis colour. The brand's primary is #2575FC, so that
   is what every solid action takes. Black stays for structure — the focused
   record card, headings — where it is the surface, not the action.
   =========================================================================== */

.mv-btn-ink,
.mv-btn-ink:hover,
.mv-topnav-item.is-active {
    background: #2575FC !important;
    border-color: #2575FC !important;
    color: #FFFFFF !important;
}
.mv-btn-ink:hover { background: #1A63E0 !important; border-color: #1A63E0 !important; }

/* ===========================================================================
   Top bar controls
   ---------------------------------------------------------------------------
   A settings pill and the account, beside the bell and the sign-out control
   the template already renders. Those two keep their markup — their JS is
   bound to element ids inside them — and are only reshaped here.
   =========================================================================== */

.mv-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-right: 8px;
}

.mv-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    color: #14182A;
    font-size: 13px;
    white-space: nowrap;
}
.mv-pill i { font-size: 16px; color: #5A6177; }
.mv-pill:hover { background: #F4F5FA; color: #14182A; }

.mv-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 500;
    color: #14182A;
}
.mv-avatar:hover { background: #F4F5FA; color: #14182A; }

/* The template's own two controls, reshaped to match. */
.top-header .dropdown-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1px solid #E7E4EE !important;
    box-shadow: none !important;
}
.top-header .dropdown-toggle > div {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.top-header .list-none { display: flex; align-items: center; gap: 8px; }

/* The unread dot the bell's JS writes in. */
#notification-bell-container { position: relative; }

@media (max-width: 900px) {
    .mv-pill span { display: none; }
    .mv-pill { padding: 0; width: 38px; justify-content: center; }
}

/* ===========================================================================
   Notifications and the account, in the top bar
   ---------------------------------------------------------------------------
   The dropdown's markup is the template's own, kept intact because its
   JavaScript binds to the ids inside it. Only the shell around it is new.
   =========================================================================== */

.mv-notif { position: relative; display: inline-flex; }

.mv-notif-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #14182A;
    cursor: pointer;
    padding: 0;
}
.mv-notif-btn:hover { background: #F4F5FA; }
.mv-notif-btn svg { width: 17px; height: 17px; }

#notification-bell-container { position: relative; display: inline-flex; }

/* The badge the script writes in. */
#notification-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #FF6262;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #F1F2F7;
}

#notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    border-radius: 16px;
    box-shadow: 0 24px 48px -24px rgba(20, 24, 42, .4);
    overflow: hidden;
    z-index: 80;
}
#notification-dropdown.hidden { display: none; }
#notification-list { max-height: 300px; overflow-y: auto; }
#notification-list .notification-item { display: block; padding: 11px 16px; font-size: 12.5px; }
#notification-list .notification-item:hover { background: #F4F5FA; }
#mark-all-read-btn { color: #2575FC; font-size: 11.5px; }

/* ── The account ─────────────────────────────────────────────────────── */

.mv-pill-me { padding: 0 12px 0 5px; gap: 9px; height: 42px; }
.mv-pill-me .mv-avatar {
    width: 32px;
    height: 32px;
    border: 0;
    background: #2575FC;
    color: #FFFFFF;
    font-size: 11.5px;
}
.mv-pill-me .mv-me { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mv-pill-me .mv-me b { font-size: 12.5px; font-weight: 500; color: #14182A; white-space: nowrap; }
.mv-pill-me .mv-me em {
    font-style: normal;
    font-size: 10px;
    color: #8A91A6;
    white-space: nowrap;
}
.mv-pill-me i { color: #B6BCCC; font-size: 15px; }

@media (max-width: 1000px) {
    .mv-pill-me .mv-me { display: none; }
    .mv-pill-me i { display: none; }
    .mv-pill-me { padding: 0 5px; }
}

/* ===========================================================================
   Top bar: one floating group
   ---------------------------------------------------------------------------
   The pages, settings, the bell and the account sit inside a single rounded
   white bar, with the current page marked by a dark pill. Restated at the
   end of the file because the earlier revisions set these with !important.
   =========================================================================== */

.mv-topbar {
    display: flex !important;
    align-items: center;
    gap: 18px;
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 0 18px !important;
}

.mv-navgroup {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    border-radius: 999px;
    padding: 5px;
    box-shadow: 0 10px 26px -20px rgba(20, 24, 42, .5);
}

.mv-navgroup .mv-topnav { display: flex; align-items: center; gap: 2px; }

.mv-topnav-item {
    padding: 9px 15px !important;
    border-radius: 999px !important;
    font-size: 13px;
    color: #5A6177 !important;
    white-space: nowrap;
    background: transparent !important;
}
.mv-topnav-item:hover { background: #F4F5FA !important; color: #14182A !important; }

/* The current page. Dark, as on the reference — the brand blue is reserved
   for things you press, and a nav marker is a position, not an action. */
.mv-topnav-item.is-active {
    background: #14182A !important;
    color: #FFFFFF !important;
}

.mv-ng-rule { width: 1px; height: 22px; background: #E7E4EE; margin: 0 6px; flex: none; }

.mv-ng-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: #14182A;
    font-size: 13px;
    white-space: nowrap;
}
.mv-ng-pill i { font-size: 16px; color: #5A6177; }
.mv-ng-pill:hover { background: #F4F5FA; color: #14182A; }

/* ── The bell ────────────────────────────────────────────────────────── */

.mv-notif-btn {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
}
.mv-notif-btn:hover { background: #F4F5FA; }

/* A dot, not a counter: the number was a red blob on a white bell and read
   as an error. The count is in the panel, one click away. */
#notification-badge {
    top: -1px;
    right: -2px;
    min-width: 9px;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: #FFC83D;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    box-shadow: 0 0 0 2px #FFFFFF;
}

/* ── The account ─────────────────────────────────────────────────────── */

.mv-account { position: relative; }

.mv-account-btn {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mv-account-btn:hover { background: #F4F5FA; }

.mv-avatar {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #2575FC;
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mv-avatar-lg { width: 40px; height: 40px; font-size: 14px; }

.mv-account-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 262px;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    border-radius: 16px;
    box-shadow: 0 26px 52px -26px rgba(20, 24, 42, .45);
    padding: 7px;
    z-index: 90;
}
.mv-account-menu[hidden] { display: none; }

.mv-account-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px 13px;
    border-bottom: 1px solid #F0EEF5;
    margin-bottom: 6px;
}
.mv-account-head b { display: block; font-size: 13px; font-weight: 500; color: #14182A; }
.mv-account-head em { display: block; font-style: normal; font-size: 11px; color: #8A91A6; margin-top: 1px; }

.mv-account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #14182A;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.mv-account-item i { font-size: 16px; color: #8A91A6; }
.mv-account-item:hover { background: #F4F5FA; color: #14182A; }

.mv-account-sep { height: 1px; background: #F0EEF5; margin: 6px 0; }

.mv-account-out { color: #C83C3C; }
.mv-account-out i { color: #C83C3C; }
.mv-account-out:hover { background: #FFEDED; color: #C83C3C; }

@media (max-width: 1150px) {
    .mv-ng-pill span { display: none; }
    .mv-ng-pill { padding: 0 10px; }
}
@media (max-width: 950px) {
    .mv-navgroup .mv-topnav { display: none; }
    .mv-ng-rule { display: none; }
}

/* The unread mark. Yellow, and a dot rather than a number: a red counter on
   a white bell reads as something broken, which unread mail is not. */
#notification-badge,
.note-badge {
    position: absolute;
    top: 0;
    right: -1px;
    width: 9px;
    height: 9px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: #FFC83D !important;
    box-shadow: 0 0 0 2px #FFFFFF;
    font-size: 0;
    line-height: 0;
    color: transparent;
    pointer-events: none;
}

/* The count sits inside the yellow. Dark ink on it, because #FFC83D is a
   light colour and white type on it cannot be read at 9px. */
#notification-badge,
.note-badge {
    width: auto;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    color: #5C4300;
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
    top: -4px;
    right: -5px;
}

/* ===========================================================================
   Top bar: back to the full-width fixed strip
   ---------------------------------------------------------------------------
   The floating pill group looked neat and cost the bar its edges: on a wide
   screen it drifted into the middle of nothing, and the brand, the pages and
   the account stopped reading as one row. This is a single strip across the
   top with a surface and a hairline under it, pinned so it stays while the
   page scrolls.

   Restated at the end of the file because the earlier revisions set these
   properties with !important.
   =========================================================================== */

.mv-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 84px !important;
    right: 0 !important;
    height: var(--mv-topbar-h, 62px);
    display: flex !important;
    align-items: center;
    gap: 22px;
    padding: 0 20px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E7E4EE !important;
    z-index: 55;
}

/* The group loses its own shell and becomes part of the strip. */
.mv-navgroup {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.mv-navgroup .mv-topnav { display: flex; align-items: center; gap: 2px; }

.mv-ng-rule { width: 1px; height: 24px; background: #E7E4EE; margin: 0 10px; flex: none; }

/* The page the content starts below the strip. */
main.page-content, .page-wrapper .page-content {
    padding-top: calc(var(--mv-topbar-h, 62px) + 18px) !important;
}

/* ── The bell ────────────────────────────────────────────────────────── */

/* With an unread count the button grows into a pill and the number sits
   beside the bell. It used to be parked on the bell's face, covering the
   icon it was there to annotate. */
.mv-notif-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: width .18s ease, padding .18s ease, background .18s ease;
}
.mv-notif-btn:hover { background: #F4F5FA; }

.mv-notif-btn.has-unread {
    width: auto;
    padding: 0 10px 0 9px;
    background: #FFF8E4;
}
.mv-notif-btn.has-unread:hover { background: #FFF2D0; }

#notification-bell-container { position: static; display: inline-flex; }
.mv-notif-btn svg { width: 17px; height: 17px; display: block; }

/* No longer a floating dot: a chip in the row, which is why it can carry a
   number without hiding anything. */
#notification-badge,
.note-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: #FFC83D !important;
    color: #5C4300;
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    pointer-events: none;
}

/* ── The account ─────────────────────────────────────────────────────── */

.mv-avatar-img { object-fit: cover; display: block; }

@media (max-width: 950px) {
    .mv-topbar { left: 0 !important; }
}

/* ===========================================================================
   Top bar: controls at the right edge, and a mobile layout
   ---------------------------------------------------------------------------
   The whole group was pushed right together, which crowded the pages and the
   account into the same corner. The page links now sit beside the brand and
   only the controls are pinned to the edge — those are what somebody reaches
   for without looking, so they belong where the hand goes.

   Below 1050px the rail has nowhere to sit and seven page links do not fit,
   so both fold into one menu behind a button, with the brand on the left and
   the bell and the account still on the right.
   =========================================================================== */

.mv-navgroup { margin-left: 0; flex: 1; }

/* The rule is the hinge: everything after it is pushed to the edge. */
.mv-ng-rule { margin-left: auto; margin-right: 10px; }

/* ── The menu button ─────────────────────────────────────────────────── */

.mv-burger {
    display: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #14182A;
    font-size: 21px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    padding: 0;
}
.mv-burger:hover { background: #F4F5FA; }
.mv-burger.is-open { background: #14182A; color: #FFFFFF; }

/* ── The panel ───────────────────────────────────────────────────────── */

/* The same drawer as the customer panel (seba-frontend, movssy-shell.css):
   it slides in from the left over a dimmed page. It used to be a panel that
   dropped under the bar, different from the customer's for no reason. */
.mv-menu-fondo {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(12, 10, 9, .42);
}
.mv-menu-fondo[hidden] { display: none; }

.mv-menu {
    position: fixed;
    z-index: 1201;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(302px, 86vw);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 24px;
    background: #FFFFFF;
    box-shadow: 0 0 44px rgba(0, 0, 0, .22);
    animation: mv-menu-entra .16s ease-out;
}
.mv-menu[hidden] { display: none; }
@keyframes mv-menu-entra {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mv-menu { animation: none; }
}

.mv-menu-grupo { margin-bottom: 18px; }

.mv-menu-k {
    display: block;
    padding: 0 10px 7px;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #9A938E;
}

a.mv-menu-item,
button.mv-menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 14.5px;
    color: #121212;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}
a.mv-menu-item:hover,
button.mv-menu-item:hover { background: #F4F2F0; color: #121212; }

a.mv-menu-item i,
button.mv-menu-item i { font-size: 17px; color: #857E7A; flex: none; }

a.mv-menu-item.is-active {
    background: #FFF4D4;
    font-weight: 600;
}
a.mv-menu-item.is-active i { color: #121212; }

button.mv-menu-out {
    margin-top: 6px;
    border-top: 1px solid #E6E2DE;
    border-radius: 0;
    color: #B3261E;
}
button.mv-menu-out i { color: #B3261E; }

/* The languages, as a short list: the rail's button is hidden on a phone. */
.mv-menu-idiomas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
a.mv-menu-idioma {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: #121212;
    text-decoration: none;
}
a.mv-menu-idioma:hover { background: #F4F2F0; color: #121212; }
a.mv-menu-idioma.is-on { background: #FFF4D4; font-weight: 600; }

/* Above 1050px the menu does not exist: the rail and the bar are there. */
@media (min-width: 1051px) {
    .mv-menu,
    .mv-menu-fondo { display: none !important; }
}

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 1050px) {
    .mv-burger { display: inline-flex; }

    /* The rail is 84px of icons with no room to live; its links move into
       the panel instead. */
    .mv-rail { display: none !important; }

    .mv-topbar { left: 0 !important; gap: 10px; padding: 0 12px !important; }

    main.page-content,
    .page-wrapper .page-content {
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mv-navgroup .mv-topnav { display: none; }
    .mv-ng-rule { display: none; }
    .mv-navgroup { flex: 1; justify-content: flex-end; }

    .mv-brand img { height: 18px; }
}

@media (max-width: 560px) {
    .mv-ng-pill span { display: none; }
    .mv-ng-pill { width: 36px; padding: 0; justify-content: center; }

    /* The menu is wide enough on a phone; the dropdown should not hang off
       the edge of it. */
    .mv-account-menu { right: -6px; width: calc(100vw - 24px); max-width: 280px; }
    #notification-dropdown { right: -40px; width: calc(100vw - 24px); max-width: 320px; }
}

/* ===========================================================================
   The notification list
   ---------------------------------------------------------------------------
   The panel used to hold unread items only, so there was nothing to compare
   against — every row looked the same and the list emptied itself as you
   clicked. It now carries the last fifteen either way, and an unread one is
   marked in the same amber as the badge on the bell, so the mark outside and
   the mark inside read as one thing.
   =========================================================================== */

#notification-dropdown {
    width: 332px;
    border: 1px solid #E7E4EE;
    border-radius: 16px;
    box-shadow: 0 24px 48px -28px rgba(20, 24, 42, .45);
    overflow: hidden;
}

/* The title and the action belong on one line. */
#notification-dropdown > div:first-child {
    flex-direction: row !important;
    align-items: center;
    padding: 13px 16px !important;
}
#notification-dropdown > div:first-child > span {
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #14182A;
}
#mark-all-read-btn {
    font-size: 11.5px;
    font-weight: 500;
    color: #2575FC;
    padding: 4px 9px;
    border-radius: 999px;
}
#mark-all-read-btn:hover { background: #EEF4FF; color: #1A55D4; }

#notification-list { height: 322px; padding: 6px; }

/* ── A row ───────────────────────────────────────────────────────────── */

.note-row { list-style: none; margin-bottom: 2px; }

.note-row .notification-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
}
.note-row .notification-item:hover { background: #F4F5FA; }

.note-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    margin-top: 6px;
    flex: none;
    background: transparent;
}

.note-body { display: block; min-width: 0; flex: 1; }

.note-title {
    display: block;
    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: #14182A;
    line-height: 1.3;
    margin-bottom: 2px;
}
.note-msg {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: #6B7183;
    line-height: 1.45;
}
.note-when {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 11px;
    color: #9AA0B2;
}

/* ── Unread ──────────────────────────────────────────────────────────── */

/* Three signals, not one: the tint, the dot and the word. Colour alone would
   leave the distinction invisible to anyone who cannot see it. */
.note-row.is-unread .notification-item { background: #FFFAEC; }
.note-row.is-unread .notification-item:hover { background: #FFF3D6; }
.note-row.is-unread .note-dot { background: #FFC83D; }

.note-new {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7A5600;
    background: #FFC83D;
    border-radius: 999px;
    padding: 2px 6px;
    line-height: 1;
}

/* ── Already opened ──────────────────────────────────────────────────── */

.note-row.is-read .note-title { font-weight: 500; color: #4E5467; }
.note-row.is-read .note-msg   { color: #9AA0B2; }

/* ===========================================================================
   The shell, rebuilt to the UPS Forwarding Hub
   ---------------------------------------------------------------------------
   Three bands across the top, as the Hub has them: a thin utility line for
   what you touch once a month, a white header carrying the mark and the two
   named menus, and the page's own banner below. Down the left, a narrow
   white rail of icon-over-caption, with a gold bar marking where you are.

   Restated at the end of the file because the earlier revisions set several
   of these with !important.
   =========================================================================== */

:root { --mv-util-h: 30px; --mv-topbar-h: 58px; --mv-rail-w: 72px; }

/* ── The utility line ────────────────────────────────────────────────── */

.mv-util {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mv-util-h);
    z-index: 57;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 0 20px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEBE8;
    font-family: 'Roboto', 'Lufga', system-ui, sans-serif;
    font-size: 11.5px;
    color: #5F5753;
}
.mv-util a { color: #5F5753; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.mv-util a:hover { color: #121212; text-decoration: underline; }
.mv-util i { font-size: 13px; }
.mv-util-sep { width: 1px; height: 13px; background: #DFDBD7; }
.mv-util-plain { display: inline-flex; align-items: center; gap: 4px; }

/* ── The header ──────────────────────────────────────────────────────── */

.mv-topbar {
    position: fixed !important;
    top: var(--mv-util-h) !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mv-topbar-h);
    display: flex !important;
    align-items: center;
    gap: 0;
    padding: 0 20px 0 0 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #DFDBD7 !important;
    font-family: 'Roboto', 'Lufga', system-ui, sans-serif;
    z-index: 55;
}

/* The mark sits over the rail, squaring the corner the two bars make. */
.mv-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    width: var(--mv-rail-w);
    height: var(--mv-topbar-h);
    justify-content: center;
    flex: none;
    border-right: 1px solid #DFDBD7;
    text-decoration: none;
}
.mv-brand img { height: 22px; width: auto; }

.mv-brand-word {
    position: absolute;
    left: calc(var(--mv-rail-w) + 18px);
    font-size: 16px;
    font-weight: 400;
    color: #121212;
    white-space: nowrap;
}

.mv-navgroup {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

/* The page links move under the header on the Hub; here they stay in it,
   but quiet — black text, no pills, a gold underline on the one you are on. */
.mv-navgroup .mv-topnav { display: flex; align-items: center; gap: 0; }

.mv-topnav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--mv-topbar-h);
    padding: 0 14px;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    color: #5F5753;
    text-decoration: none;
}
.mv-topnav-item:hover { color: #121212; background: #FAF9F8; }
.mv-topnav-item.is-active { color: #121212; font-weight: 500; background: transparent; }
.mv-topnav-item.is-active::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 3px;
    background: #FFC400;
}

.mv-ng-rule { width: 1px; height: 24px; background: #DFDBD7; margin: 0 12px; flex: none; }

/* ── The two named menus ─────────────────────────────────────────────── */

.mv-ng-pill,
.mv-notif-btn,
.mv-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 11px;
    border: 0;
    border-radius: 2.5px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #121212;
    text-decoration: none;
    cursor: pointer;
    width: auto;
}
.mv-ng-pill:hover,
.mv-notif-btn:hover,
.mv-account-btn:hover { background: #F2F1EF; color: #121212; }

.mv-btn-word { white-space: nowrap; }
.mv-btn-caret { font-size: 16px; color: #5F5753; }

.mv-notif-btn svg { width: 18px; height: 18px; }
.mv-notif-btn.has-unread { background: transparent; padding: 0 11px; }
.mv-notif-btn.has-unread:hover { background: #F2F1EF; }

/* The count rides beside the bell in the Hub's gold. */
#notification-badge,
.note-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    margin-left: 2px;
    border-radius: 30px;
    background: #FFC400 !important;
    color: #121212;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.mv-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #351C15;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mv-avatar-img { object-fit: cover; }

/* ── The rail ────────────────────────────────────────────────────────── */

/* Flush to the edge and white, not a floating pill: the Hub's rail is part
   of the frame, which is what lets the gold bar read as "you are here". */
.mv-rail {
    position: fixed !important;
    top: calc(var(--mv-util-h) + var(--mv-topbar-h)) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--mv-rail-w) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #DFDBD7 !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 54;
    font-family: 'Roboto', 'Lufga', system-ui, sans-serif;
}
.mv-rail::-webkit-scrollbar { display: none; }

/* The mark already lives in the header, over this column. */
.mv-rail-mark { display: none !important; }

.mv-rail-items { display: flex; flex-direction: column; }

.mv-rail-item {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: auto;
    min-height: 62px;
    padding: 11px 4px 10px;
    border: 0;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5F5753 !important;
    text-decoration: none;
    cursor: pointer;
}
.mv-rail-item i { font-size: 19px; line-height: 1; }

/* The caption is always shown — the Hub never hides it behind a hover. */
.mv-rail-tip {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}
.mv-rail-tip::after { display: none !important; }

.mv-rail-item:hover { background: #FAF9F8 !important; color: #121212 !important; }

/* Where you are: a gold bar down the left edge and the glyph in near-black.
   No fill, so the rail stays one quiet column. */
.mv-rail-item.is-active { background: #F7F6F4 !important; color: #121212 !important; }
.mv-rail-item.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #FFC400;
}

.mv-rail-foot { margin-top: auto; border-top: 1px solid #EDEBE8; }

/* ── What the two bars leave for the page ────────────────────────────── */

main.page-content,
.page-wrapper .page-content {
    margin-left: var(--mv-rail-w) !important;
    padding-top: calc(var(--mv-util-h) + var(--mv-topbar-h) + 18px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The task manager's banner runs to the edges, so its own padding applies. */
.u-page { margin: 0; }

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 1050px) {
    .mv-util { display: none; }
    .mv-topbar { top: 0 !important; padding-left: 10px !important; }
    .mv-brand { width: auto; border-right: 0; padding-right: 10px; }
    .mv-brand-word { display: none; }
    .mv-rail { display: none !important; }

    main.page-content,
    .page-wrapper .page-content {
        margin-left: 0 !important;
        padding-top: calc(var(--mv-topbar-h) + 14px) !important;
    }
}

@media (max-width: 620px) {
    /* The two menus keep their icons and drop their words. */
    .mv-btn-word, .mv-btn-caret { display: none; }
    .mv-ng-pill, .mv-notif-btn, .mv-account-btn { padding: 0 8px; }
}

/* The wordmark is a sibling of the tile now, not inside it. */
.mv-brand img { height: 26px; }
.mv-brand-word {
    position: static;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 400;
    color: #121212;
    white-space: nowrap;
}
.mv-brand-word sup { font-size: 9px; top: -.6em; }

/* A page that brings its own banner butts it against the header; the
   default gap would leave a white band above the colour. */
main.page-content:has(.u-page) {
    padding-top: calc(var(--mv-util-h) + var(--mv-topbar-h)) !important;
    margin-top: 0 !important;
}

@media (max-width: 1050px) {
    main.page-content:has(.u-page) { padding-top: var(--mv-topbar-h) !important; }
}

@media (max-width: 860px) {
    .mv-brand-word { display: none; }
}

/* An earlier revision set the active page link to a black pill with
   !important; the Hub marks it with the gold underline instead. */
.mv-topbar .mv-topnav-item.is-active {
    background: transparent !important;
    color: #121212 !important;
    border-radius: 0 !important;
}

/* Pages that do not bring their own banner still need a gutter against the
   rail; the task manager sets its own and is left alone. */
main.page-content:not(:has(.u-page)),
.page-wrapper .page-content:not(:has(.u-page)) {
    padding-left: 22px !important;
    padding-right: 22px !important;
}

@media (max-width: 720px) {
    main.page-content:not(:has(.u-page)),
    .page-wrapper .page-content:not(:has(.u-page)) {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* The page links come after the burger in source order now, so the earlier
   rule that hid them on narrow screens no longer wins. */
@media (max-width: 1050px) {
    .mv-topbar .mv-navgroup .mv-topnav { display: none; }
    .mv-topbar .mv-ng-rule { display: none; }
}

/* The utility line is out of the markup for now, so the bars sit at the
   top of the window. One token, rather than hunting every offset. */
:root { --mv-util-h: 0px; }

/* ── El idioma, en el riel y arriba de Salir ───────────────────────── */

.mv-rail-lang { position: relative; }

.mv-rail-flag { font-size: 19px; line-height: 1; }

/* Fija al viewport y colocada por JS desde el boton: el riel tiene reglas
   con !important que lo vuelven una barra angosta, y una lista `absolute`
   adentro de eso queda recortada o por detras. */
.mv-lang-pop {
    position: fixed;
    z-index: 1200;
    min-width: 168px;
    background: #FFFFFF;
    border: 1px solid #DFDBD7;
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
    padding: 5px;
}

.mv-lang-pop[hidden] { display: none; }

.mv-lang-pop a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 3px;
    font-size: 13px;
    color: #121212;
    text-decoration: none;
}

.mv-lang-pop a:hover { background: #F2F1EF; }
.mv-lang-pop a.is-on { background: #FFF4D4; font-weight: 600; }
.mv-lang-pop a span { font-size: 16px; line-height: 1; }