/*
 * assets/css/topbar.css - THE topbar. One definition, linked by every customer page.
 *
 * Moved out of assets/css/volantis-theme.css (2026-08-30), where this block already
 * unified the bar for every page that loaded the theme. The catch: four customer pages -
 * networks.php, accept_terms.php, sponsor/index.php and partners.php - do NOT load the
 * theme. They carry their own design tokens, and pulling the whole theme in would bring its
 * global body/typography overrides with it. So they each kept a private copy of these rules
 * instead, and that is where the drift came from.
 *
 * Splitting the bar out means a page can take the bar WITHOUT taking the theme.
 * includes/topbar.php emits the link (vol_topbar_assets()), so any page using the component
 * gets it automatically and no page needs its own copy again.
 *
 * !important throughout is inherited from the original block: it existed to beat each
 * page-level <style id="ecs-topbar-2025-styles">. Those are gone now, but the declarations
 * are left exactly as they were - this move is a relocation, not a restyle.
 */

/* EVERY var() BELOW CARRIES A FALLBACK, and that is load-bearing.
   networks.php, accept_terms.php, sponsor/index.php and partners.php link this file without
   loading volantis.css, so --v-* is undefined on them. A var() with no fallback makes the
   WHOLE declaration invalid - the CTA came out transparent with white text, an invisible
   button, before these were added. The fallback values are the literals from volantis.css,
   so a page that does have the tokens renders identically. */


/* ============================================================
   Unified Volantis top navigation
   Restyles every page's #ecs-topbar-2025 into ONE consistent bar:
   Volantis mark + Poppins wordmark + page label (left), action/back
   button (right). !important beats each page's older inline
   <style id="ecs-topbar-2025-styles">. server_view.php has no
   #ecs-topbar-2025, so it is intentionally left alone.
   ============================================================ */
#ecs-topbar-2025{
  /* THESE VARIABLES ARE PART OF THE CONTRACT, not private detail.
     dashboard.php's notifications bell is styled by dashboard.php - the widget is its own - and
     that CSS reads --ecs-topbar-btn-bg and --ecs-topbar-btn-border. When the bar's old inline
     block was deleted, these went with it, every one of those declarations became invalid (a
     var() with no fallback kills the WHOLE declaration) and the bell lost its circle: no border,
     no background, just a floating glyph. Anything in the actions slot may read them.

     --ecs-topbar-max is the OTHER half of the contract: the bar's content column. It exists so a
     page can line the wordmark up with its own content instead of being told what width to be -
     account settings is a 1060px page, the dashboard a 1350px one, and a bar that ignores that
     hangs its logo in space. vol_topbar_assets(['max' => ..]) sets it per page. */
  --ecs-topbar-btn-text:#1E293B;
  --ecs-topbar-btn-border:#D1D5DB;
  --ecs-topbar-btn-bg:#FFFFFF;
  --ecs-topbar-btn-bg-hover:#F3F4F6;

  position:sticky!important; top:0!important; z-index:2000!important;
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid var(--v-border, #E6EAF1)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:saturate(180%) blur(10px)!important;
  backdrop-filter:saturate(180%) blur(10px)!important;
}
#ecs-topbar-2025.is-scrolled{box-shadow:0 1px 0 rgba(16,24,40,.03),0 6px 20px rgba(16,24,40,.05)!important}
#ecs-topbar-2025 .ecs-topbar__inner{
  max-width:var(--ecs-topbar-max,1180px)!important; margin:0 auto!important;
  padding:11px var(--ecs-topbar-side-pad,24px)!important; min-height:60px!important;
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:16px!important; box-sizing:border-box!important;
}
#ecs-topbar-2025 .ecs-topbar__brand{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important}
#ecs-topbar-2025 .ecs-topbar__logo{
  display:inline-flex!important; align-items:center!important; gap:9px!important;
  font-family:var(--v-display, 'Poppins','Inter',system-ui,-apple-system,'Segoe UI',sans-serif)!important; font-weight:700!important; font-size:20px!important;
  line-height:1!important; letter-spacing:-.2px!important; color:var(--v-ink, #0F172A)!important;
  text-decoration:none!important; white-space:nowrap!important;
}
#ecs-topbar-2025 .ecs-topbar__logo::before{
  content:""!important; flex:0 0 26px!important; width:26px!important; height:26px!important;
  background:url("/assets/brand/volantis-mark.svg") center/contain no-repeat!important;
}
/* line-height 1.4, not 1, and that is the descender fix. This label hides its overflow so a long
   page name ellipsises - and at line-height 1 the box is exactly the cap height, so `overflow:hidden`
   sliced the tails off every g, j, p, q and y. "Changelog" rendered as "Chanqeloq". Same trap as
   .ecs-topbar__username and .ecs-acct__item span in topbar-menu.css: anything that ellipsises needs
   room below the baseline. The taller box also makes the divider rule beside it a better height. */
#ecs-topbar-2025 .ecs-topbar__sub{
  font-family:var(--v-sans, 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif)!important; font-size:15px!important; font-weight:500!important;
  line-height:1.4!important; color:var(--v-muted, #697586)!important; margin:0!important;
  padding-left:12px!important; border-left:1px solid var(--v-border, #E6EAF1)!important;
  white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
}
/* The optional link row beside the page label (vol_topbar's `nav`). Public pages use it; it lives
   here rather than in the page that wanted it, because partners.php styling its own nav is what led
   to partners.php mirroring this entire stylesheet. */
#ecs-topbar-2025 .ecs-topbar__nav{display:flex!important;gap:22px!important;margin-left:6px!important}
#ecs-topbar-2025 .ecs-topbar__nav a{
  font-family:var(--v-sans, 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif)!important;
  font-size:14.5px!important; font-weight:500!important; line-height:1.4!important;
  color:var(--v-ink-2, #3C4657)!important; text-decoration:none!important; white-space:nowrap!important;
}
#ecs-topbar-2025 .ecs-topbar__nav a:hover{color:var(--v-primary, #2563EB)!important}

#ecs-topbar-2025 .ecs-topbar__actions{display:flex!important;align-items:center!important;gap:10px!important}
/* "Back to dashboard" is a quiet text link with a chevron - the treatment account_settings.php and
   billing_settings.php always had, and the one to keep. Going back is not an action you want the
   eye pulled to; the bordered pill this briefly became competed with the account button next to it
   and made the right-hand side read as two equal buttons. */
#ecs-topbar-2025 .ecs-topbar__back{
  display:inline-flex!important; align-items:center!important; gap:7px!important;
  font-family:var(--v-sans, 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif)!important;
  font-size:14.5px!important; font-weight:500!important;
  color:var(--v-muted, #697586)!important; text-decoration:none!important;
  background:transparent!important; border:0!important; border-radius:8px!important;
  padding:6px 4px!important;
  transition:color .15s ease!important;
}
#ecs-topbar-2025 .ecs-topbar__back:hover{color:var(--v-ink, #0F172A)!important}
#ecs-topbar-2025 .ecs-topbar__back:focus-visible{outline:0!important;box-shadow:var(--v-ring, 0 0 0 3px rgba(37,99,235,.22))!important}
#ecs-topbar-2025 .ecs-topbar__back svg{width:16px!important;height:16px!important;flex:0 0 auto!important}
#ecs-topbar-2025 .ecs-topbar__back i{font-size:15px!important;line-height:1!important}

/* The guest pair - "My tickets" and "Sign in" - are destinations, not a way back, so they keep the
   bordered pill. This is the shape .ecs-topbar__back used to have, split off rather than deleted:
   turning "Sign in" into bare grey text would have buried the only thing a signed-out visitor is
   there to press. */
#ecs-topbar-2025 .ecs-topbar__pill{
  display:inline-flex!important; align-items:center!important; gap:8px!important;
  font-family:var(--v-sans, 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif)!important; font-size:14px!important; font-weight:600!important;
  color:var(--v-ink-2, #3C4657)!important; text-decoration:none!important; background:var(--v-surface, #FFFFFF)!important;
  border:1px solid var(--v-border, #E6EAF1)!important; border-radius:10px!important; padding:8px 14px!important;
  transition:background .15s ease,border-color .15s ease,transform .06s ease!important;
}
#ecs-topbar-2025 .ecs-topbar__pill:hover{background:var(--v-bg, #F6F8FB)!important;border-color:var(--v-border-strong, #D7DEE9)!important;color:var(--v-ink, #0F172A)!important;transform:translateY(-1px)!important}
#ecs-topbar-2025 .ecs-topbar__pill:focus-visible{outline:0!important;box-shadow:var(--v-ring, 0 0 0 3px rgba(37,99,235,.22))!important}
/* The menu draws its glyphs as inline SVG (see vol_topbar_icon): only four of the fifteen pages
   that render this bar load an icon font, so an icon-font tag was an empty box on the rest. */
/* No !important on the size here, unlike everything else in this file. Nothing on any host
   page styles .ecs-topbar__icon - it is ours - and topbar-menu.css needs to be able to make
   the caret smaller and the external-link arrow smaller still. Both files reach these with
   the same specificity, so an !important here would have frozen every icon at 16px. */
#ecs-topbar-2025 .ecs-topbar__icon{width:16px;height:16px;flex:0 0 auto;display:block}

/* The bar's ONE primary action, for a page whose main call to action belongs up here - partners'
   "Apply". Before this class those pages reached for Bootstrap's `.btn btn-primary btn-sm`, which is
   why the buttons looked different from bar to bar. Two classes exist for this bar and this is the
   second; nothing else belongs in .ecs-topbar__actions. */
#ecs-topbar-2025 .ecs-topbar__cta{
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  font-size:14px!important;font-weight:600!important;
  color:#fff!important;text-decoration:none!important;
  background:var(--v-primary, #2563EB)!important;border:1px solid var(--v-primary, #2563EB)!important;
  border-radius:10px!important;padding:8px 16px!important;
  transition:background .15s ease,border-color .15s ease,transform .06s ease!important;
}
/* `color` is pinned on hover deliberately: this file also sets a global
   `a:hover{color:var(--v-primary-hover, #1D4FD7)}`, which would otherwise repaint the label to exactly the
   colour this rule paints the background and make it disappear. Same trap that blanked
   .help-new-btn on the tickets page. */
#ecs-topbar-2025 .ecs-topbar__cta:hover{
  background:var(--v-primary-hover, #1D4FD7)!important;border-color:var(--v-primary-hover, #1D4FD7)!important;
  color:#fff!important;transform:translateY(-1px)!important;
}
#ecs-topbar-2025 .ecs-topbar__cta:focus-visible{
  outline:0!important;box-shadow:0 0 0 3px rgba(37,99,235,.22)!important;
}
@media (max-width:480px){
  #ecs-topbar-2025 .ecs-topbar__inner{min-height:54px!important;padding-top:9px!important;padding-bottom:9px!important}
  #ecs-topbar-2025 .ecs-topbar__logo{font-size:18px!important}
  #ecs-topbar-2025 .ecs-topbar__back{padding:6px 2px!important}
  #ecs-topbar-2025 .ecs-topbar__back span{display:none!important}
  #ecs-topbar-2025 .ecs-topbar__pill{padding:8px 10px!important}
}
/* The link row goes before the buttons do: on a phone the actions are the reason you are
   looking at the bar, and the links are all reachable from the page below. */
@media (max-width:640px){ #ecs-topbar-2025 .ecs-topbar__nav{display:none!important} }