/* =============================================================================
   Volte admin refresh (A5) — a RESKIN, not a rebuild.
   =============================================================================
   Loaded LAST in Modules/Theme/.../layouts/backend/master.blade.php, so every rule here overrides the
   inherited staradmin/AdminLTE/Bootstrap chrome without touching a single Blade view or controller.
   That's deliberate: the admin carries deep, mature features (Collector CRM, People hub, settlement,
   verification review, invite codes, auction access). Restyling in one stylesheet gives the visual lift
   with effectively zero regression risk, and reverting is deleting one <link>.

   The design follows the customer brand (volte.art / art-app-web app/globals.css):
     · Monochrome. Near-black on white. GOLD IS RESERVED for live-auction state — never used as a general
       accent, so it does not appear in admin chrome.
     · Zero radius on every rectangle ("gallery authority"). Genuine circles stay round.
     · Hairline rules instead of shadows. Calm, quiet surfaces. Generous whitespace.
     · One type family; weight + uppercase letter-spacing carry the hierarchy.
   ============================================================================= */

:root {
  --v-gallery: #ffffff;   /* page + card ground */
  --v-surface: #f5f5f5;   /* secondary surfaces, table headers */
  --v-line:    #e6e6e6;   /* hairline rules */
  --v-line-2:  #d0d0d0;   /* stronger rule (focus, active) */
  --v-ink:     #212529;   /* primary text + emphasis */
  --v-ink-3:   #5d5d5d;   /* secondary text, labels */
  --v-ink-4:   #767676;   /* metadata, placeholders (WCAG AA on white) */
  --v-teal:    #2a6060;   /* success */
  --v-teal-lt: #d8eeee;
  --v-red:     #8b3a3a;   /* error / destructive */
  --v-red-lt:  #f7ecec;
  --v-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Ground ────────────────────────────────────────────────────────────────── */
body,
.content-wrapper,
.main-panel,
.page-body-wrapper {
  background: var(--v-gallery) !important;
  color: var(--v-ink) !important;
  font-family: var(--v-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* Kill rounded rectangles everywhere; genuine circles keep their radius. */
.card, .btn, .form-control, .custom-select, .input-group-text, .modal-content, .alert, .badge,
.nav-tabs .nav-link, .dropdown-menu, .table, .page-link, .list-group-item, .info-box, .select2-container--default .select2-selection--single {
  border-radius: 0 !important;
}
.rounded-circle, .img-circle, .badge-pill { border-radius: 9999px !important; }

/* ── Type ──────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .page-title, .card-header h4 {
  font-family: var(--v-sans) !important;
  color: var(--v-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.page-title { font-size: 20px !important; }
.card-header h4, .card-header h5 { font-size: 15px !important; margin: 0 !important; }
.text-muted, small { color: var(--v-ink-4) !important; }
label { color: var(--v-ink-3) !important; font-size: 12px !important; font-weight: 600 !important;
        text-transform: uppercase; letter-spacing: 0.07em; }

/* ── Cards: hairline, not shadow ───────────────────────────────────────────── */
.card, .info-box, .modal-content {
  background: var(--v-gallery) !important;
  border: 1px solid var(--v-line) !important;
  box-shadow: none !important;
}
.card-header {
  background: var(--v-gallery) !important;
  border-bottom: 1px solid var(--v-line) !important;
  padding: 16px 20px !important;
}
.card-body { padding: 20px !important; }
.card-footer { background: var(--v-gallery) !important; border-top: 1px solid var(--v-line) !important; }

/* Stat tiles read as quiet labelled numbers, not coloured blocks. */
.info-box .info-box-icon { background: var(--v-surface) !important; color: var(--v-ink) !important; box-shadow: none !important; }
.info-box .info-box-text { color: var(--v-ink-4) !important; text-transform: uppercase; letter-spacing: 0.07em; font-size: 11px !important; }
.info-box .info-box-number { color: var(--v-ink) !important; font-weight: 600 !important; font-size: 22px !important; }

/* ── Tables: hairlines + a calm header ─────────────────────────────────────── */
.table { border-color: var(--v-line) !important; color: var(--v-ink) !important; }
.table thead th, .table tr.data-heading th {
  background: var(--v-surface) !important;
  border-bottom: 1px solid var(--v-line-2) !important;
  border-top: 0 !important;
  color: var(--v-ink-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 14px !important;
}
.table td { border-top: 1px solid var(--v-line) !important; padding: 12px 14px !important; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }  /* stripes fight the hairlines */
.table-hover tbody tr:hover { background: var(--v-surface) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--v-line) !important; }

/* ── Buttons: ink primary, hairline secondary ──────────────────────────────── */
.btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 18px !important;
  border-width: 1px !important;
  transition: opacity .25s ease, background-color .25s ease, border-color .25s ease;
}
.btn-primary, .btn-success, .btn-info {
  background: var(--v-ink) !important;
  border-color: var(--v-ink) !important;
  color: var(--v-gallery) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover { opacity: .88; }
.btn-secondary, .btn-outline-secondary, .btn-default, .btn-light {
  background: transparent !important;
  border-color: var(--v-line-2) !important;
  color: var(--v-ink) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-default:hover { border-color: var(--v-ink) !important; background: transparent !important; }
.btn-danger, .btn-outline-danger { background: transparent !important; border-color: var(--v-red) !important; color: var(--v-red) !important; }
.btn-danger:hover, .btn-outline-danger:hover { background: var(--v-red) !important; color: var(--v-gallery) !important; }
.btn-warning, .btn-outline-warning { background: transparent !important; border-color: var(--v-ink-4) !important; color: var(--v-ink-3) !important; }
.btn-warning:hover, .btn-outline-warning:hover { border-color: var(--v-ink) !important; color: var(--v-ink) !important; }
.btn-link { color: var(--v-ink-3) !important; text-transform: none; letter-spacing: 0; }
.btn-sm { padding: 6px 12px !important; font-size: 11px !important; }

/* Icon-only action buttons in grids stay quiet until hovered. */
td .btn > i { font-size: 14px; }
td .btn { background: transparent !important; border: 0 !important; color: var(--v-ink-3) !important; padding: 6px 8px !important; }
td .btn:hover { color: var(--v-ink) !important; background: var(--v-surface) !important; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
  border: 1px solid var(--v-line-2) !important;
  background: var(--v-gallery) !important;
  color: var(--v-ink) !important;
  height: auto !important;
  min-height: 44px;
  padding: 10px 12px !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--v-ink) !important;
  box-shadow: none !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--v-ink-4) !important; }

/* ── Badges: muted, squared ────────────────────────────────────────────────── */
.badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 8px !important;
  border: 1px solid transparent;
}
.badge-success { background: var(--v-teal-lt) !important; color: var(--v-teal) !important; border-color: var(--v-teal) !important; }
.badge-danger  { background: var(--v-red-lt)  !important; color: var(--v-red)  !important; border-color: var(--v-red)  !important; }
.badge-secondary, .badge-dark, .badge-warning {
  background: var(--v-surface) !important; color: var(--v-ink-3) !important; border-color: var(--v-line-2) !important;
}

/* ── Alerts: a rule and a tint, no shout ───────────────────────────────────── */
.alert { border: 1px solid var(--v-line) !important; background: var(--v-surface) !important; color: var(--v-ink) !important; padding: 14px 16px !important; }
.alert-success { background: var(--v-teal-lt) !important; border-color: var(--v-teal) !important; color: var(--v-teal) !important; }
.alert-danger  { background: var(--v-red-lt)  !important; border-color: var(--v-red)  !important; color: var(--v-red)  !important; }

/* ── Sidebar: quiet, with an ink active state ──────────────────────────────── */
.sidebar, .main-sidebar, .left-sidebar {
  background: var(--v-gallery) !important;
  border-right: 1px solid var(--v-line) !important;
}
.sidebar .nav .nav-item .nav-link,
.main-sidebar .nav-link {
  color: var(--v-ink-3) !important;
  font-size: 13px !important;
  padding: 12px 20px !important;
  border-left: 2px solid transparent;
}
.sidebar .nav .nav-item .nav-link:hover,
.main-sidebar .nav-link:hover { color: var(--v-ink) !important; background: var(--v-surface) !important; }
.sidebar .nav .nav-item.active > .nav-link,
.main-sidebar .nav-link.active {
  color: var(--v-ink) !important;
  background: var(--v-surface) !important;
  border-left-color: var(--v-ink);
  font-weight: 600 !important;
}
.sidebar .nav .nav-item .nav-link i, .main-sidebar .nav-link i { color: inherit !important; }

/* ── Top bar + page header ─────────────────────────────────────────────────── */
.navbar, .main-header {
  background: var(--v-gallery) !important;
  border-bottom: 1px solid var(--v-line) !important;
  box-shadow: none !important;
}
.page-title-header { border-bottom: 1px solid var(--v-line); margin-bottom: 24px; }

/* ── Pagination + tabs ─────────────────────────────────────────────────────── */
.page-link { border-color: var(--v-line) !important; color: var(--v-ink-3) !important; }
.page-item.active .page-link { background: var(--v-ink) !important; border-color: var(--v-ink) !important; color: var(--v-gallery) !important; }
.nav-tabs { border-bottom: 1px solid var(--v-line) !important; }
.nav-tabs .nav-link { border: 0 !important; color: var(--v-ink-3) !important; border-bottom: 2px solid transparent !important; }
.nav-tabs .nav-link.active { color: var(--v-ink) !important; background: transparent !important; border-bottom-color: var(--v-ink) !important; font-weight: 600 !important; }

/* ── Links ─────────────────────────────────────────────────────────────────── */
a { color: var(--v-ink); text-underline-offset: 2px; }
a:hover { color: var(--v-ink); text-decoration: underline; }

/* =============================================================================
   U1 (2026-07-09) — MOBILE LAYOUT, fixed at the root (not a colour swap).
   The inherited staradmin admin was unusable on a phone: the datatable toolbar
   overlapped and tables clipped their data. These rules make the list screens
   genuinely mobile-friendly. Paired with the rewritten core::partials.pagination.
   ============================================================================= */

/* ── Datatable toolbar (page nav · record counts · per-page) ─────────────────
   A flex row that WRAPS instead of colliding. On a phone the three groups stack. */
.dt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 18px;
}
.dt-pager { display: flex; align-items: center; gap: 8px; }
.dt-page-btn { display: inline-flex; }
.dt-page-btn .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--v-line-2) !important;
  color: var(--v-ink) !important; background: var(--v-gallery) !important;
}
.dt-page-btn.disabled { opacity: .4; pointer-events: none; }
.dt-page-field { display: inline-flex; align-items: center; gap: 8px; }
.dt-page-field .form-control { width: 62px !important; height: 40px !important; text-align: center; min-height: 40px; }
.dt-of { color: var(--v-ink-3); white-space: nowrap; }
.dt-meta { display: flex; align-items: center; gap: 8px; color: var(--v-ink-3); font-size: 13px; white-space: nowrap; }
.dt-meta .dt-dot { color: var(--v-line-2); }
.dt-meta label { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--v-ink); }
.dt-perpage { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dt-perpage label { margin: 0; text-transform: none; letter-spacing: 0; color: var(--v-ink-3); font-size: 13px; font-weight: 400; }
.dt-perpage .custom-select { width: auto !important; min-width: 76px; height: 40px !important; }
@media (max-width: 767px) {
  /* U1a (2026-07-13): keep the toolbar to ~2 tight rows so the first data card is
     visible without a long scroll (was eating ~half the phone screen). */
  .dt-toolbar { gap: 8px 12px; margin-bottom: 10px; }
  .dt-perpage { margin-left: auto; }      /* per-page sits to the right of the pager, same row */
  .dt-meta { width: 100%; order: 3; font-size: 12px; }
  .dt-page-btn .page-link { width: 36px; height: 36px; }
  .dt-page-field .form-control { width: 52px !important; height: 36px !important; min-height: 36px; }
  .dt-perpage .custom-select { height: 36px !important; min-width: 64px; }
  .dt-perpage label { font-size: 12px; }
}

/* ── Tables: never clip data — scroll horizontally within the card ───────────
   `.table-responsive` is meant to scroll, but the inherited theme fought it.
   Force it, add momentum scrolling, and keep a sensible min-width so columns
   stay readable rather than crushed. A hairline hints there's more to the right. */
.card-body.table-responsive, .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.table-responsive > .table { min-width: 620px; }   /* below this, columns crush; above, they scroll */

/* ── Action icons in a row read as one group, comfortably tappable ───────────── */
td .btn { min-width: 40px; min-height: 40px; }

/* ── Filter/search forms: fields go full-width and never get clipped on a phone ── */
@media (max-width: 767px) {
  .filter-wrapper .form-group, .card-body .form-row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .content-wrapper, .main-panel .content-wrapper { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ── Sidebar as a true off-canvas DRAWER on phones/tablets ───────────────────
   Hidden off-screen by default; slides in when .sidebar-offcanvas gets .active
   (the navbar hamburger toggles it). A backdrop dims the page behind it. This is
   the fix for the sidebar overlapping the content in Jai's screenshot. */
@media (max-width: 991px) {
  .sidebar.sidebar-offcanvas {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: 260px; max-width: 82vw;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform .28s ease;
    background: var(--v-gallery) !important;
    border-right: 1px solid var(--v-line) !important;
    overflow-y: auto;
  }
  .sidebar.sidebar-offcanvas.active { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.18); }
  .main-panel { width: 100% !important; margin-left: 0 !important; }
  /* backdrop */
  body.sidebar-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035;
  }
}

/* ── Responsive data cards (U1) ──────────────────────────────────────────────
   A table marked `.vl-cards` stays a normal table on desktop, but on a phone each
   ROW becomes a labelled CARD: the header row is hidden and every cell shows its
   field name (from data-label) beside its value. So you read a customer's name,
   email and status at a glance — no horizontal scrolling, no clipped columns.
   Cells with an empty value are hidden; the actions row sits full-width at the end. */
@media (max-width: 767px) {
  .vl-cards { min-width: 0 !important; }
  .vl-cards, .vl-cards tbody, .vl-cards tr, .vl-cards td { display: block; width: 100% !important; height: auto !important; }
  .vl-cards thead { position: absolute; left: -9999px; }         /* hide the header row */
  .vl-cards.table td { border: 0 !important; }
  .vl-cards tr {
    border: 1px solid var(--v-line) !important;
    margin-bottom: 12px;
    padding: 6px 4px;
    background: var(--v-gallery);
    overflow: hidden;                                            /* a card never bleeds into the next */
  }
  .vl-cards td {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--v-line) !important;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }
  .vl-cards td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--v-ink-4); text-align: left; flex: 0 0 auto;
  }
  .vl-cards td:last-child { border-bottom: 0 !important; }
  .vl-cards td.vl-check { display: none; }                       /* row-select checkbox: not useful per-card */
  .vl-cards td[data-label]:empty { display: none; }

  /* Actions cell: a labelled, full-width column. Every action (a form, a dropdown, a button) STACKS as its
     own block so nothing overflows the card or collides with the next one (the bug the first People-hub
     screenshot showed). Forms carry inline display:inline / inline-flex from the Blade — override them. */
  /* Plain block flow inside the actions cell — the surest way for the cell (and the card) to grow to fit.
     Each form is a block; its dropdown + button sit on one wrapped line; buttons are comfortably tall. */
  .vl-cards td.vl-actions { display: block !important; text-align: left; }
  .vl-cards td.vl-actions::before { display: block; margin-bottom: 8px; }
  .vl-cards td.vl-actions form { display: block !important; width: 100%; margin: 0 0 8px 0; }
  .vl-cards td.vl-actions select.form-control { width: 100% !important; display: block !important; min-height: 44px; margin-bottom: 6px; }
  .vl-cards td.vl-actions .btn { min-height: 44px; border: 1px solid var(--v-line-2) !important; width: 100%; display: block; }
  .vl-cards td.vl-actions .text-muted { display: block; width: 100%; margin-bottom: 6px; }
  /* the sticky-action pinning is meaningless in card mode — undo it */
  .vl-cards td.sticky-action, .vl-cards th.sticky-action { position: static !important; }
}

/* =============================================================================
   U2 (2026-07-09) — COMPACT, intentional density. Jai's screenshot showed a filter
   with ~90% empty space: every field was a 96px block with a 32px bottom margin, so a
   form with 9 fields became an 896px wall of gaps. This tightens the spacing scale
   across EVERY admin page (forms, filters, cards) so screens are dense and scannable,
   not padded to death. Values are deliberate, not a random reduction.
   ============================================================================= */

/* Fields: one tight rhythm everywhere. Label sits close to its input; ~14px between fields. */
.form-group { margin-bottom: 14px !important; }
.form-group:last-child { margin-bottom: 0 !important; }
label { margin-bottom: 5px !important; line-height: 1.2; }
.form-control, .custom-select { min-height: 40px !important; padding: 8px 12px !important; }

/* Cards: comfortable but not cavernous. Tighter on phones where space is precious. */
.card-body { padding: 16px !important; }
.card-header { padding: 12px 16px !important; }
@media (min-width: 768px) { .card-body { padding: 20px !important; } .card-header { padding: 14px 20px !important; } }

/* The filter accordion: flatten the card-in-a-card and compact its grid. */
.collapseFilter .card-body { padding: 4px 0 12px !important; }
.filter-main { padding: 0 !important; }
.filter-main .form-group { margin-bottom: 12px !important; }
.accordion .card, .md-accordion .card { border: 0 !important; box-shadow: none !important; }
.accordion .card-header, .md-accordion .card-header { padding: 12px 4px !important; }
.filter-main .row { margin-left: 0 !important; margin-right: 0 !important; }
.filter-main .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* Card rows: trim per-cell padding so cards aren't tall and airy. */
@media (max-width: 767px) {
  .vl-cards td { padding: 7px 12px !important; }
  .vl-cards tr { margin-bottom: 10px; }
  .content-wrapper, .main-panel .content-wrapper { padding: 12px !important; }
  .page-title-header { margin-bottom: 14px; padding-bottom: 10px !important; }
}

/* Buttons: a touch tighter vertically. */
.btn { padding: 9px 16px !important; }
.btn-sm { padding: 6px 12px !important; }

/* ── Dashboard stat tiles: one clear headline number + a labelled breakdown ──────
   Replaces the ambiguous "4 / 4" with "8" over "4 approved · 4 pending". Every number
   now says what it is. Tiles are compact, not cavernous. */
.info-box { padding: 14px 16px !important; align-items: flex-start !important; min-height: 0 !important; }
.info-box .info-box-icon { width: 42px; height: 42px; line-height: 42px; font-size: 18px !important; margin-right: 12px; flex: 0 0 42px; }
.info-box .info-box-number { font-size: 26px !important; line-height: 1.1; margin: 2px 0 0; }
.info-box-breakdown { display: block; margin-top: 6px; color: var(--v-ink-3); font-size: 12px; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.info-box-breakdown a { color: var(--v-ink-3); text-decoration: none; }
.info-box-breakdown a:hover { color: var(--v-ink); text-decoration: underline; }
.info-box-breakdown strong { color: var(--v-ink); font-weight: 700; }
.info-box.mb-4 { margin-bottom: 12px !important; }

/* =============================================================================
   U1c (2026-07-13) — DESKTOP SIDEBAR was broken on a Mac (Jai): every nav label
   was invisible until you hovered it. Root cause: the inherited `sidebar-dark`
   body class colours .menu-title / .menu-icon WHITE, but our brand sidebar ground
   is WHITE — so white-on-white text, revealed only when :hover flips it to ink.
   Earlier we only recoloured `.nav-link`; the .menu-title span kept its white rule.
   FIX: force ALL sidebar text to ink at rest (not just on hover). Also the sidebar
   sat at a cramped ~100px icon-only width with labels wrapping under the icons — on
   desktop give it a real 230px width with icon BESIDE label, and move the main panel
   to match (both are CSS-controlled: fixed sidebar + main-panel margin-left).
   Scoped to >=992px so the mobile off-canvas drawer (<=991px) is untouched.
   ============================================================================= */
.sidebar .nav .nav-item .nav-link .menu-title,
.sidebar .nav .nav-item .nav-link .menu-icon,
.sidebar .nav .nav-item .nav-link .menu-arrow,
.sidebar .nav .nav-item .nav-link i {
  color: var(--v-ink-3) !important;               /* visible at rest, no hover needed */
}
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link .menu-icon,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item .nav-link:hover .menu-title,
.sidebar .nav .nav-item .nav-link:hover .menu-icon,
.sidebar .nav .nav-item .nav-link:hover i {
  color: var(--v-ink) !important;                 /* stronger ink for active/hover */
}

@media (min-width: 992px) {
  nav.sidebar.sidebar-offcanvas { width: 230px !important; }
  .main-panel { margin-left: 230px !important; }
  .navbar .navbar-brand-wrapper { width: 230px !important; }  /* keep the top-bar logo box aligned */
  /* staradmin lays .nav out as a flex grid for its icon-only mode — force a single
     vertical stack so items don't wrap into 2 columns at the wider width. */
  .sidebar .sidebar-inner > .nav { display: block !important; }
  .sidebar .nav > .nav-item { display: block !important; width: 100% !important; float: none !important; border: 0 !important; }
  .sidebar .nav .nav-item .nav-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    text-align: left !important;
    white-space: normal;
    height: auto !important;
    padding: 12px 20px !important;
    border-left: 2px solid transparent;   /* only the active item shows this in ink */
  }
  .sidebar .nav .nav-item .nav-link .menu-icon { margin: 0 !important; font-size: 15px; width: 18px; text-align: center; flex: 0 0 18px; }
  .sidebar .nav .nav-item .nav-link .menu-title { font-size: 13px; }
  /* brand-logo sits alone at the top of the stack, not inline with the first item */
  .sidebar .nav > .nav-item.brand-logo { padding: 8px 20px; border-bottom: 1px solid var(--v-line); }
}