/* ==========================================================================
 * Vantage portal nav/header refresh (2026-09-23)
 *
 * Aligns the client-area chrome with report-19p.3vs.io (strategic-report-v2):
 * Inter/JetBrains Mono, report-style collapsible nav groups with the gold
 * active rail + arrow, sticky full-width KB search at the top of the nav,
 * account switcher under the company name, message-icon notifications,
 * sun/moon theme pull-tab, Integrations + Assets sharing a padded row, and a
 * collapsed sidebar whose layout column shrinks with it. Loaded after
 * vantage-layout-v2.css; token-driven so it holds in both data-theme values.
 * ========================================================================== */

:root {
  --vpn-gold: #f5c518;
  --vpn-gold-soft: rgba(245, 197, 24, 0.15);
  --vpn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vpn-rail: 64px;
}

/* ---- Header ------------------------------------------------------------ */
#header .logo-img { height: 28px; width: auto; }

.vantage-msg-btn { position: relative; padding: 6px 8px; font-size: 17px; line-height: 1; color: var(--muted-foreground, #a0a0a0); }
.vantage-msg-btn:hover { color: var(--foreground, #f0f0f0); }
.vantage-msg-badge {
  position: absolute; top: 1px; right: -2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--vpn-gold); color: #0a0a0f;
  font: 600 9px/15px var(--font-sans, Inter, sans-serif); text-align: center;
  box-shadow: 0 0 0 2px var(--card, #12121a);
}

#header .toolbar li[menuItemName="Account"] > a { font-size: 13px; color: var(--muted-foreground, #a0a0a0); }
#header .toolbar li[menuItemName="Account"] > a:hover { color: var(--foreground, #f0f0f0); }

/* Theme pull-tab: sun/moon slider, descriptive text on hover. */
.vantage-theme-tab {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 50px; height: 24px; padding: 0 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border, #2a2a3a); background: var(--secondary, #1a1a25);
  color: var(--muted-foreground, #a0a0a0); font-size: 11px;
}
.vantage-theme-tab::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--vpn-gold); transition: transform .25s var(--vpn-ease);
}
.vantage-theme-tab[data-mode="dark"]::after { transform: translateX(26px); }
.vantage-theme-tab i { position: relative; z-index: 1; }
.vantage-theme-tab[data-mode="light"] .vantage-theme-sun,
.vantage-theme-tab[data-mode="dark"] .vantage-theme-moon { color: #0a0a0f; }
.vantage-theme-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1050; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; font-size: 11px; pointer-events: none;
  background: var(--popover, #12121a); color: var(--popover-foreground, #f0f0f0);
  border: 1px solid var(--border, #2a2a3a); opacity: 0; transform: translateY(-3px);
  transition: opacity .15s, transform .15s;
}
.vantage-theme-tab:hover .vantage-theme-tip,
.vantage-theme-tab:focus-visible .vantage-theme-tip { opacity: 1; transform: none; }

/* ---- Sidebar header: name, company, switcher --------------------------- */
.vantage-sidebar-company { display: block; font-size: 12px; font-weight: 600; color: var(--foreground, #f0f0f0); margin-top: 2px; }
.vantage-sidebar-switch { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; color: var(--muted-foreground, #a0a0a0); text-decoration: none; }
.vantage-sidebar-switch:hover { color: var(--vpn-gold); text-decoration: none; }

/* ---- Sticky full-width search ------------------------------------------ */
.vantage-sidebar-nav { padding-top: 0; }
.vantage-nav-search {
  position: sticky; top: 0; z-index: 5; margin: 0; width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 40px;
  background: var(--sidebar-background, var(--card, #12121a));
  border-bottom: 1px solid var(--border, #2a2a3a);
}
.vantage-nav-search i { color: var(--muted-foreground, #a0a0a0); font-size: 12px; }
.vantage-nav-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--foreground, #f0f0f0); font: 13px var(--font-sans, Inter, sans-serif);
}

/* ---- Report-style nav groups ------------------------------------------- */
.vantage-sidebar, .vantage-sidebar-nav { font-family: var(--font-sans, Inter, sans-serif); }
.vantage-nav-section { margin-bottom: 4px; }
button.vantage-nav-section-title {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 12px 20px 6px !important; font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 1px !important; color: var(--muted-foreground, #666) !important;
}
button.vantage-nav-section-title:hover { color: var(--foreground, #f0f0f0) !important; }
.vantage-nav-caret { font-size: 9px; transition: transform .3s var(--vpn-ease); }
.vantage-nav-section.is-collapsed .vantage-nav-caret { transform: rotate(-90deg); }
.vantage-nav-section .vantage-nav-list {
  max-height: 900px; overflow: hidden; opacity: 1;
  transition: max-height .35s var(--vpn-ease), opacity .25s ease;
}
.vantage-nav-section.is-collapsed .vantage-nav-list { max-height: 0; opacity: 0; }

.vantage-nav-link {
  position: relative; border-radius: 0 !important; border-left: 3px solid transparent;
  padding: 9px 20px 9px 24px !important; font-size: 13px; overflow: hidden;
  transition: all .25s var(--vpn-ease);
}
.vantage-nav-link::before {
  content: ''; position: absolute; left: 8px; top: 50%; margin-top: -5px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid var(--vpn-gold); opacity: 0; transform: translateX(-20px);
  transition: all .3s var(--vpn-ease);
}
.vantage-nav-link:hover { padding-left: 28px !important; color: var(--foreground, #f0f0f0) !important; background: var(--secondary, #1a1a25) !important; }
.vantage-nav-link:hover::before { opacity: .5; transform: none; }
.vantage-nav-active > .vantage-nav-link {
  background: linear-gradient(90deg, var(--vpn-gold-soft) 0%, transparent 100%) !important;
  color: var(--vpn-gold) !important; border-left-color: var(--vpn-gold); font-weight: 500;
}
.vantage-nav-active > .vantage-nav-link::before { opacity: 1; transform: none; }
.vantage-nav-badge[hidden] { display: none; }

/* ---- Collapsed sidebar: the layout column shrinks to the icon rail ------
   Before: .vantage-sidebar went to 64px but its Bootstrap column kept its
   col-lg-4/col-xl-3 width, leaving a dead band beside the rail. */
@media (min-width: 992px) {
  #main-body .row > div:has(> .sidebar > .vantage-sidebar-collapsed) {
    flex: 0 0 var(--vpn-rail); max-width: var(--vpn-rail); padding-left: 0; padding-right: 0;
  }
  #main-body .row:has(.vantage-sidebar-collapsed) > #main-content {
    flex: 1 1 0; max-width: calc(100% - var(--vpn-rail));
  }
}
.vantage-sidebar-collapsed { width: var(--vpn-rail) !important; }
.vantage-sidebar-collapsed .vantage-nav-search,
.vantage-sidebar-collapsed .vantage-sidebar-company,
.vantage-sidebar-collapsed .vantage-sidebar-switch { display: none; }
.vantage-sidebar-collapsed .vantage-nav-section .vantage-nav-list { max-height: none; opacity: 1; }
.vantage-sidebar-collapsed .vantage-nav-section + .vantage-nav-section { border-top: 1px solid var(--border, #2a2a3a); }
.vantage-sidebar-collapsed .vantage-nav-link,
.vantage-sidebar-collapsed .vantage-nav-link:hover {
  justify-content: center; padding: 10px 0 !important; border-left-width: 0;
}
.vantage-sidebar-collapsed .vantage-nav-link::before { display: none; }
.vantage-sidebar-collapsed .vantage-nav-active > .vantage-nav-link { box-shadow: inset 3px 0 0 var(--vpn-gold); }
.vantage-sidebar-collapsed .vantage-sidebar-header { flex-direction: column; gap: 8px; padding: 12px 0; }

/* ---- Dashboard: Integrations + Assets share a padded row --------------- */
.vantage-dash-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.vantage-dash-pair > * { min-width: 0; }
@media (max-width: 1199px) { .vantage-dash-pair { grid-template-columns: 1fr; } }
.vantage-dashboard .vantage-widget-integrations .vantage-card-body,
.vantage-dashboard #vas-block .vantage-card-body { padding: 20px 24px; }
.vantage-dashboard .vantage-widget-integrations .vantage-card-header,
.vantage-dashboard #vas-block .vantage-card-header { padding: 16px 24px; }

/* ---- Footer copyright (2026-09-23 follow-up) ----------------------------
   Two notices joined by <br>, one size smaller (11px) and slightly faded.
   Height is held at the previous footprint: old = one 12px line (19px) +
   16px margin = 35px; new = 2 x 16px lines + 3px margin = 35px. The
   min-height keeps the single-line (no client) case at the same 35px. */
#footer .vantage-footer-copyright {
  font-size: 11px; line-height: 16px; opacity: .7;
  margin: 0 0 3px; min-height: 32px; display: block;
}