/* ===========================================================================
   Movssy dashboard — Cargo Distribution layout, Movssy palette
   ---------------------------------------------------------------------------
   Structure from the UPS "Cargo Distribution" reference: a dense four-column
   workspace of white cards, one selected record picked out in solid black,
   small strip headers over each record, hatched slots where there is nothing
   yet, and a single green button as the confirming action.

   Colour is Movssy's own brand set:
       #2575FC  primary blue — actions, links, the selected marker
       #86FF7B  green — money earned, and the one confirming button
       #FF6262  red — money or time being lost
       #DAD5E3  the light lavender grey, used for every hairline and rule
       #000000  black, for structure and the focused record

   Green is light enough that white type on it is unreadable, so anything
   sitting on green is set in a deep green ink instead. Red appears nowhere
   except where something is actually wrong.

   Set in Lufga throughout.
   =========================================================================== */

.mv-dash {
    --v-navy:    #000000;
    --v-navy-d:  #111113;
    --v-ink:     #0B0B0C;
    --v-slate:   #5F5B68;
    --v-mute:    #8E8898;

    --v-line:    #DAD5E3;
    --v-line-s:  #EBE8F0;
    --v-paper:   #F5F4F8;
    --v-paper-d: #EAE7F0;
    --v-card:    #FFFFFF;

    --v-blue:    #2575FC;
    --v-blue-s:  #E8F0FE;
    --v-green:   #86FF7B;
    --v-green-s: #EEFFEC;
    --v-green-i: #0B3D06;          /* ink for type sitting on the green */
    --v-amber:   #9A6B00;
    --v-amber-s: #FFF3D6;
    --v-red:     #FF6262;
    --v-red-s:   #FFECEC;
    --v-red-i:   #8A1F1F;          /* ink for type sitting on the red */

    --v-r:       16px;
    --v-gap:     14px;

    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
    font-size: 13px;
    color: var(--v-slate);
}

.mv-dash a { color: inherit; }

/* The warm off-white Veeqo sits its sections on.
   Literal, not var(--v-paper): the properties are declared on .mv-dash, so a
   var() here resolves to nothing, and an invalid var() makes the whole
   declaration compute to unset — which leaves the page transparent and shows
   whatever dark canvas is behind it. */
html:has(.mv-dash),
body:has(.mv-dash),
.page-wrapper:has(.mv-dash),
.page-content:has(.mv-dash) { background: #F5F4F8 !important; }

/* ── Page header ─────────────────────────────────────────────────────── */

.v-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 2px 20px;
    flex-wrap: wrap;
}

.v-back {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--v-line);
    background: var(--v-card);
    display: flex; align-items: center; justify-content: center;
    color: var(--v-navy);
    font-size: 17px;
    flex: none;
}
.v-back:hover { background: var(--v-paper-d); color: var(--v-navy); }

.v-title {
    font-size: 30px;
    font-weight: 500;
    color: var(--v-navy);
    letter-spacing: -.7px;
    margin: 0;
}
.v-sub { font-size: 12.5px; color: var(--v-mute); margin: 2px 0 0; }
.v-sub b { color: var(--v-red); font-weight: 500; }

.v-head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.v-search {
    display: flex; align-items: center; gap: 9px;
    background: var(--v-card);
    border: 1px solid var(--v-line);
    border-radius: 999px;
    padding: 9px 16px;
    min-width: 230px;
    color: var(--v-mute);
    font-size: 12.5px;
}
.v-search i { font-size: 15px; }

/* ── Workspace ───────────────────────────────────────────────────────── */

.v-work {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--v-gap);
    align-items: start;
}
.v-work > * { min-width: 0; }

.v-c3 { grid-column: span 3; }
.v-c4 { grid-column: span 4; }
.v-c5 { grid-column: span 5; }
.v-c6 { grid-column: span 6; }
.v-c12 { grid-column: span 12; }

.v-col { display: flex; flex-direction: column; gap: var(--v-gap); }

/* ── Panel ───────────────────────────────────────────────────────────── */

.v-panel {
    background: var(--v-card);
    border: 1px solid var(--v-line-s);
    border-radius: var(--v-r);
    padding: 18px;
}
.v-panel-flush { padding: 18px 0; }

.v-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.v-panel-flush .v-panel-head { padding: 0 18px; }

.v-eyebrow { font-size: 11px; color: var(--v-mute); }
.v-panel-title { font-size: 16px; font-weight: 500; color: var(--v-navy); letter-spacing: -.3px; }

.v-icon-btn {
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1px solid var(--v-line);
    background: var(--v-card);
    display: flex; align-items: center; justify-content: center;
    color: var(--v-slate);
    font-size: 14px;
    flex: none;
}
.v-icon-btn:hover { background: var(--v-paper); color: var(--v-navy); }

.v-count-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 0 18px 12px;
    border-bottom: 1px solid var(--v-line-s);
    font-size: 12.5px;
}
.v-count-row b { color: var(--v-navy); font-weight: 500; }

/* ── Record card, the "available flight" row ─────────────────────────── */

.v-rec { display: block; padding: 0 18px; border-bottom: 1px solid var(--v-line-s); }
.v-rec:last-child { border-bottom: 0; }

.v-rec-inner { padding: 13px 0; border-radius: 12px; }

/* The strip of codes across the top of each record. */
.v-strip {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 10px;
    color: var(--v-mute);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.v-strip > span {
    padding: 0 10px;
    border-left: 1px solid var(--v-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v-strip > span:first-child { padding-left: 0; border-left: 0; }

.v-rec-no {
    font-size: 21px;
    font-weight: 500;
    color: var(--v-navy);
    letter-spacing: -.3px;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* The route line with its two end dots and the mode glyph. */
.v-route { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.v-route-line {
    flex: 1;
    height: 12px;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 40px;
}
.v-route-line::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 50%;
    border-top: 1px dashed var(--v-line);
}
.v-route-line > i {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    height: 2px;
    border-radius: 2px;
    background: var(--v-red);
}
.v-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v-navy); flex: none; }
.v-dot-open { background: var(--v-card); border: 2px solid var(--v-navy); width: 9px; height: 9px; }

.v-rec-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    font-size: 11.5px;
}
.v-rec-meta i { font-size: 13px; }

.v-badge-n {
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--v-paper-d);
    color: var(--v-navy);
    font-size: 10px;
    font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
}

/* The one picked out in navy, as the reference marks the selected flight. */
.v-rec.is-on { padding: 0 8px; border-bottom-color: transparent; }
.v-rec.is-on .v-rec-inner {
    background: var(--v-navy);
    padding: 13px 14px;
    box-shadow: 0 10px 24px -14px rgba(12, 39, 60, .7);
}
.v-rec.is-on .v-strip > span { color: rgba(255, 255, 255, .6); border-left-color: rgba(255, 255, 255, .18); }
.v-rec.is-on .v-rec-no,
.v-rec.is-on .v-rec-meta { color: #FFFFFF; }
.v-rec.is-on .v-dot { background: #FFFFFF; }
.v-rec.is-on .v-dot-open { background: var(--v-navy); border-color: #FFFFFF; }
.v-rec.is-on .v-route-line::before { border-top-color: rgba(255, 255, 255, .28); }
.v-rec.is-on .v-badge-n { background: rgba(255, 255, 255, .18); color: #FFFFFF; }

/* ── Pipeline bays ───────────────────────────────────────────────────── */

.v-bays { display: flex; gap: 12px; }

.v-bay-nums { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.v-bay-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--v-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    color: var(--v-mute);
    flex: none;
}
.v-bay-num.is-on { background: var(--v-navy); border-color: var(--v-navy); color: #FFFFFF; }

.v-bay-stack { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.v-bay {
    border: 1px solid var(--v-line);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}
.v-bay b { display: block; font-size: 11.5px; font-weight: 500; color: var(--v-navy); letter-spacing: .03em; }
.v-bay em {
    display: block; font-style: normal;
    font-size: 22px; font-weight: 500; color: var(--v-navy);
    margin-top: 6px; letter-spacing: -.4px;
}
.v-bay span { display: block; font-size: 10.5px; color: var(--v-mute); margin-top: 1px; }

/* An empty bay is hatched, exactly as the reference marks an unfilled slot. */
.v-bay-empty {
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 5px, var(--v-line-s) 5px, var(--v-line-s) 10px);
    border-style: dashed;
}
.v-bay-empty b, .v-bay-empty em { color: var(--v-mute); }

.v-bay-add {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--v-navy);
    color: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    margin-top: 8px;
}

/* ── Arc timeline over the gateways ──────────────────────────────────── */

.v-arc-times { display: flex; justify-content: space-around; margin-bottom: 2px; }
.v-arc-time {
    font-size: 10.5px;
    color: var(--v-slate);
    background: var(--v-paper);
    border-radius: 999px;
    padding: 3px 10px;
}
.v-arc-codes {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--v-navy);
    margin-top: 2px;
}

/* ── Slot grid, the cargo tiles ──────────────────────────────────────── */

.v-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.v-slot {
    border: 1px solid var(--v-line);
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
}
.v-slot-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-size: 10.5px;
    color: var(--v-mute);
}
.v-slot-top b { color: var(--v-navy); font-weight: 500; }
.v-slot-body { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.v-slot-cities { font-size: 12px; color: var(--v-navy); margin-top: 9px; }
.v-slot-fig { font-size: 11.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }

.v-slot.is-on { background: var(--v-navy); border-color: var(--v-navy); }
.v-slot.is-on .v-slot-top,
.v-slot.is-on .v-slot-fig { color: rgba(255, 255, 255, .72); }
.v-slot.is-on .v-slot-top b,
.v-slot.is-on .v-slot-cities { color: #FFFFFF; }

.v-slot-empty {
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 5px, var(--v-line-s) 5px, var(--v-line-s) 10px);
    border-style: dashed;
    display: flex; align-items: center; justify-content: center;
    min-height: 86px;
    font-size: 11.5px;
    color: var(--v-mute);
    text-align: center;
}

/* ── Detail rows, the parcel list ────────────────────────────────────── */

.v-detail-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--v-line-s);
    font-size: 12.5px;
}
.v-detail-row:last-child { border-bottom: 0; }
.v-detail-row .grow { flex: 1; min-width: 0; }
.v-detail-row b { color: var(--v-navy); font-weight: 500; }

.v-mark {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--v-paper);
    color: var(--v-navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex: none;
}
.v-mark-blue  { background: var(--v-blue-s);  color: var(--v-blue); }
.v-mark-green { background: var(--v-green-s); color: var(--v-green-i); }
.v-mark-amber { background: var(--v-amber-s); color: var(--v-amber); }
.v-mark-red   { background: var(--v-red-s);   color: var(--v-red-i); }

/* ── Chips ───────────────────────────────────────────────────────────── */

.v-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--v-paper);
    color: var(--v-slate);
    white-space: nowrap;
}
.v-chip-blue  { background: var(--v-blue-s);  color: #0E4FC4; }
.v-chip-green { background: var(--v-green-s); color: var(--v-green-i); }
.v-chip-amber { background: var(--v-amber-s); color: var(--v-amber); }
.v-chip-red   { background: var(--v-red-s);   color: var(--v-red-i); }
.v-chip-navy  { background: var(--v-navy);    color: #FFFFFF; }

.v-good { color: var(--v-green-i); }
.v-bad  { color: var(--v-red-i); }

/* ── Selects, as on the parcel detail column ─────────────────────────── */

.v-field {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--v-line);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--v-navy);
    background: var(--v-card);
    min-width: 0;
}
.v-field i:first-child { color: var(--v-slate); font-size: 14px; }
.v-field span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Footer totals and actions ───────────────────────────────────────── */

.v-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    background: var(--v-paper);
    border-radius: 12px;
    padding: 14px;
    margin-top: 14px;
}
.v-totals span { display: block; font-size: 10.5px; color: var(--v-mute); }
.v-totals b {
    display: block;
    font-size: 16px; font-weight: 500;
    color: var(--v-navy);
    margin-top: 3px;
    letter-spacing: -.3px;
}

.v-actions { display: flex; gap: 8px; margin-top: 12px; }

.v-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--v-line);
    background: var(--v-card);
    color: var(--v-navy);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.v-btn:hover { background: var(--v-paper); color: var(--v-navy); }

/* Green is the single confirming action, as the reference reserves it. */
.v-btn-go {
    background: var(--v-green);
    border-color: var(--v-green);
    color: var(--v-green-i);
    font-weight: 600;
}
.v-btn-go:hover { background: #6FF262; border-color: #6FF262; color: var(--v-green-i); }

.v-btn-navy { background: var(--v-navy); border-color: var(--v-navy); color: #FFFFFF; }
.v-btn-navy:hover { background: var(--v-navy-d); border-color: var(--v-navy-d); color: #FFFFFF; }

/* ── Ageing ──────────────────────────────────────────────────────────── */

.v-ageing { display: flex; gap: 3px; height: 8px; margin: 10px 0 12px; }
.v-ageing > span { border-radius: 999px; min-width: 4px; }

.v-meter { height: 4px; background: var(--v-paper-d); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.v-meter > i { display: block; height: 100%; border-radius: 999px; background: var(--v-blue); }

/* ── Chart ───────────────────────────────────────────────────────────── */

.v-chart {
    display: flex; align-items: flex-end; gap: 2px;
    height: 128px;
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 6px, #F6F7F9 6px, #F6F7F9 12px);
    border-radius: 10px;
    padding: 8px 6px 0;
}
.v-chart-w {
    flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px;
    height: 100%; position: relative; min-width: 0;
}
.v-chart-w > i { width: 4px; border-radius: 2px 2px 0 0; min-height: 2px; display: block; }
.v-chart-w .rev { background: var(--v-navy); }
.v-chart-w .mar { background: #4FCB45; }
.v-chart-w:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--v-navy); color: #FFF; font-size: 10px; padding: 5px 9px;
    border-radius: 7px; white-space: nowrap; z-index: 6; pointer-events: none;
}
.v-axis { display: flex; gap: 2px; margin-top: 8px; }
.v-axis > span { flex: 1; text-align: center; font-size: 9.5px; color: var(--v-mute); min-width: 0; }

.v-legend { display: flex; gap: 14px; }
.v-key { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--v-mute); }
.v-key::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.v-key-rev { color: var(--v-navy); }
.v-key-mar { color: #4FCB45; }

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

.v-map { height: 280px; width: 100%; }
.v-map .jvm-zoom-btn { display: none; }

/* ── Flags ───────────────────────────────────────────────────────────── */

.v-flag {
    height: auto;
    border-radius: 3px;
    display: block;
    flex: none;
    box-shadow: 0 0 0 1px rgba(12, 39, 60, .14);
}

/* ── Table ───────────────────────────────────────────────────────────── */

.v-table { width: 100%; border-collapse: collapse; }
.v-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--v-mute);
    padding: 0 14px 10px;
}
.v-table td {
    padding: 11px 14px;
    border-top: 1px solid var(--v-line-s);
    font-size: 12.5px;
}
.v-table tbody tr:hover td { background: var(--v-paper); }
.v-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Responsive ──────────────────────────────────────────────────────── */

/* The four columns need about 300px each to stay readable; below that they
   fold to two rather than being squeezed. */
@media (max-width: 1280px) {
    .v-c3 { grid-column: span 6; }
    .v-c4 { grid-column: span 6; }
    .v-c5 { grid-column: span 6; }
    .v-c6 { grid-column: span 12; }
}
@media (max-width: 1050px) {
    .v-c3, .v-c4, .v-c5, .v-c6 { grid-column: span 12; }
    .v-slots, .v-totals { grid-template-columns: 1fr; }
    .v-title { font-size: 24px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Hero: the isometric hub beside the month

   A dark blue slab with the drawn hub bleeding off its left edge. The art is
   the point of it — the figures sit on the right where the scene is empty, so
   nothing is covered.
   ───────────────────────────────────────────────────────────────────────── */

.mv-dash .v-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 20px;
    align-items: center;
    background:
        radial-gradient(120% 140% at 12% 18%, #2C5BE0 0%, #16329B 46%, #0B1C63 100%);
    padding-left: 10px;
    border-radius: 26px;
    overflow: hidden;
    margin-bottom: var(--v-gap);
    min-height: 320px;
}

/* A soft bloom behind the aircraft, so the slab is not a flat block. */
.mv-dash .v-hero::before {
    content: '';
    position: absolute;
    left: -6%;
    bottom: -40%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, rgba(134, 255, 123, .20) 0%, rgba(134, 255, 123, 0) 68%);
    pointer-events: none;
}

.mv-dash .v-hero-art { position: relative; min-width: 0; margin: -18px 0 -34px -26px; }
.mv-dash .v-scene { width: 100%; height: auto; display: block; max-height: 420px; }

.mv-dash .v-hero-body { position: relative; padding: 26px 30px 26px 0; color: #FFFFFF; min-width: 0; }

.mv-dash .v-hero-fig {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.mv-dash .v-hero-fig small {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
    margin-right: 7px;
    letter-spacing: 0;
}
.mv-dash .v-hero-note { font-size: 12px; color: rgba(255, 255, 255, .7); margin-top: 6px; }

.mv-dash .v-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.mv-dash .v-hero-stats span { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .6); }
.mv-dash .v-hero-stats b {
    display: block;
    font-size: 19px;
    font-weight: 500;
    margin-top: 3px;
    letter-spacing: -.3px;
}

.mv-dash .v-hero-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

.mv-dash .v-btn-glass {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .26);
    color: #FFFFFF;
}
.mv-dash .v-btn-glass:hover { background: rgba(255, 255, 255, .2); color: #FFFFFF; }

/* ─────────────────────────────────────────────────────────────────────────
   Cargo hold: the bays laid inside the hull
   ───────────────────────────────────────────────────────────────────────── */

.mv-dash .v-hold { position: relative; flex: 1; min-width: 0; padding: 14px 0 26px; }

.mv-dash .v-hull {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.mv-dash .v-hold .v-bay-stack { position: relative; z-index: 1; padding: 0 12px; }

/* Inside the hull the bays need their own ground, or the hull's centre line
   and frame stations read straight through them. */
.mv-dash .v-hold .v-bay { background: #FFFFFF; }
.mv-dash .v-hold .v-bay-empty {
    background-color: #FBFAFD;
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 5px, var(--v-line-s) 5px, var(--v-line-s) 10px);
}

@media (max-width: 1050px) {
    .mv-dash .v-hero { grid-template-columns: minmax(0, 1fr); }
    .mv-dash .v-hero-body { padding: 0 24px 24px; }
    .mv-dash .v-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The solid action on the dashboard takes the brand primary, not black.
   Black is kept for the focused record, where it is a surface rather than
   something to press. */
.mv-dash .v-btn-navy {
    background: #2575FC;
    border-color: #2575FC;
    color: #FFFFFF;
}
.mv-dash .v-btn-navy:hover { background: #1A63E0; border-color: #1A63E0; color: #FFFFFF; }

/* ─────────────────────────────────────────────────────────────────────────
   Hero with the 3D render

   The render is warm — dusty pinks and greens — so the slab goes deep navy
   rather than mid blue: a pastel subject on a mid-blue field washes out,
   while on near-black it reads as lit. Brand blue stays on the buttons and
   the markers, where it is the action.
   ───────────────────────────────────────────────────────────────────────── */

.mv-dash .v-hero {
    background:
        radial-gradient(130% 150% at 14% 14%, #1D3E9E 0%, #0C1C56 42%, #050B22 100%);
}

.mv-dash .v-hero-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    object-position: left bottom;
    /* The render carries no shadow of its own, so it gets one here and stops
       looking pasted onto the slab. */
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45));
}

/* The drawn scene is only shown if the render fails to load. */
.mv-dash .v-hero-draw { display: none; }
.mv-dash .v-hero-art.is-fallback .v-hero-draw { display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   List screens: filters, rows, pager
   Shared by Orders and the other record lists.
   ───────────────────────────────────────────────────────────────────────── */

.mv-dash .v-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}
.mv-dash .v-filters > label { display: block; min-width: 0; }
.mv-dash .v-filters > label > span {
    display: block;
    font-size: 11px;
    color: var(--v-mute);
    margin-bottom: 6px;
}

.mv-dash .v-input {
    width: 100%;
    border: 1px solid var(--v-line);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--v-navy);
    background: var(--v-card);
}
.mv-dash .v-input::placeholder { color: var(--v-mute); }
.mv-dash .v-input:focus {
    outline: none;
    border-color: #2575FC;
    box-shadow: 0 0 0 3px rgba(37, 117, 252, .14);
}
.mv-dash select.v-input { appearance: auto; }

/* A row sold below what the carrier charged is the one thing worth
   interrupting the table for. */
.mv-dash .v-table tbody tr.is-under td { background: #FFF6F6; }
.mv-dash .v-table tbody tr.is-under:hover td { background: #FFEFEF; }
.mv-dash .v-table tbody tr.is-under td:first-child { box-shadow: inset 3px 0 0 var(--v-red); }

/* ── Pager ───────────────────────────────────────────────────────────── */

.mv-dash .v-pager { padding: 16px 18px 0; border-top: 1px solid var(--v-line-s); margin-top: 6px; }
.mv-dash .v-pager svg { width: 15px; height: 15px; }

/* Laravel's default pagination markup, restyled rather than replaced so the
   links keep working without a custom paginator view. */
.mv-dash .v-pager nav > div:first-child { display: none; }          /* the mobile prev/next pair */
.mv-dash .v-pager nav p { font-size: 12px; color: var(--v-mute); margin: 0; }
.mv-dash .v-pager nav span[aria-current="page"] > span,
.mv-dash .v-pager nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--v-line);
    border-radius: 9px;
    margin-left: 4px;
    font-size: 12.5px;
    color: var(--v-navy);
    background: var(--v-card);
}
.mv-dash .v-pager nav a:hover { background: var(--v-paper); }
.mv-dash .v-pager nav span[aria-current="page"] > span {
    background: #2575FC;
    border-color: #2575FC;
    color: #FFFFFF;
    font-weight: 500;
}
.mv-dash .v-pager nav span[aria-disabled="true"] > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--v-line-s);
    border-radius: 9px;
    margin-left: 4px;
    color: var(--v-mute);
}

@media (max-width: 1050px) {
    .mv-dash .v-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mv-dash .v-filters > button { grid-column: 1 / -1; }
}