/* =====================================================================
   ViewShark 4.0 Ultimate + MajiMedia 3.0 — VS30_PATCH_034
   maji_logo.css — square (1:1) header logo support.

   WHY THIS FILE EXISTS
   ViewShark's header logo slot is a fixed WIDE rectangle: 275x50 at
   full size and 200x36 below the breakpoint, painted as a CSS
   background on #logo with an explicit background-size. Dropping a
   square or tall lockup into that slot stretches it, because the
   stock rule pins BOTH dimensions.

   This override makes the slot square and, crucially, switches to
   background-size:contain so the artwork keeps its own aspect ratio
   and is never distorted whatever shape it is.

   Loaded AFTER custom.min.css so it wins without editing the stock
   minified files - which matters because those get replaced whenever
   ViewShark is updated.

   ONE NUMBER CONTROLS EVERYTHING
   --maji-logo-size sets the logo edge length. The header grows to fit
   it and every element pinned to the header height follows, so the
   layout cannot end up half-adjusted. Change it in one place.
   ===================================================================== */

:root{
  /* Logo edge length. 44px fits inside the stock 56px header with
     breathing room. Raise it and the header grows to match. */
  --maji-logo-size: 44px;
  /* Vertical breathing room above and below the logo. */
  --maji-logo-pad: 6px;
  /* Width of #logo_container (menu trigger + logo) — the left boundary of
     the gap the Ticket button centres itself in. Measured 111px at 1500px. */
  --maji-logo-block: 111px;
  /* Resulting header height, never smaller than ViewShark's 56px. */
  --maji-header-h: max(56px, calc(var(--maji-logo-size) + (var(--maji-logo-pad) * 2)));
}

/* ---- the logo itself: square slot, undistorted artwork ---- */
header#main_header a#logo,
header#main_header.smaller a#logo{
  width:  var(--maji-logo-size) !important;
  height: var(--maji-logo-size) !important;
  /* contain, not a fixed pair of dimensions: this is what stops the
     stretch. The artwork fits inside the square and keeps its ratio. */
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: var(--maji-logo-pad) 0 var(--maji-logo-pad) 15px !important;
  float: none !important;
  display: block !important;
}

/* The stock theme swaps the logo file per colour variant. Point every
   variant at the MajiMedia mark so switching theme cannot revert it. */
header#main_header a#logo{
  background-image: url("../img/logo-header-maji1.png") !important;   /* MajiMedia mark supplied 2026-08-03 */
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  header#main_header a#logo{
    background-image: url("../img/logo-header-maji1@2x.png") !important;
  }
}

#logo_container{
  display: flex !important;
  align-items: center !important;
  height: var(--maji-header-h) !important;
}

/* ---- the header grows only if the logo needs more than 56px ---- */
header#main_header,
#ct-header-top,
.dynamic_container{
  height: var(--maji-header-h) !important;
}

/* Everything pinned to the old 56px must follow, or the page sits
   underneath the header or leaves a gap. */
.container_wrapper{ margin-top: var(--maji-header-h) !important; }
.fixed-width{
  top: var(--maji-header-h) !important;
  height: calc(100% - var(--maji-header-h)) !important;
}
#upload-arrow-box,
#notifications-arrow-box{ top: var(--maji-header-h) !important; }
/* MajiMedia fix: this mirrors the stock rule in custom.min.css, which is
     @media (max-width: 1250px) { .tpl_view .fluid { margin-top: 55px } }
   The media query was dropped when the value was re-pointed at
   --maji-header-h, so the offset applied at EVERY width — and with
   !important. .container_wrapper above already carries the same
   margin-top to clear the fixed header, so above 1250px the page took the
   offset twice and every watch page (video and live alike) opened with a
   ~56px blank band between the header and the content.
   Re-scoped to the same breakpoint as the rule it mirrors. */
@media (max-width: 1250px) {
  .tpl_view .fluid{ margin-top: var(--maji-header-h) !important; }
}
.tpl_shorts .fluid{ height: calc(100vh - var(--maji-header-h)) !important; }

/* ---- small screens: shrink the logo, not the aspect ratio ---- */
@media (max-width: 700px){
  :root{ --maji-logo-size: 38px; }
  header#main_header a#logo,
  header#main_header.smaller a#logo{
    margin-left: 10px !important;
  }
}
@media (max-width: 480px){
  :root{ --maji-logo-size: 34px; }
}

/* =====================================================================
   HEADER SEARCH BAR ALIGNMENT

   #ct-header-top is a flex row using justify-content:space-between with
   four children: #logo_container, the <center> that wraps the search
   bar, #vs-dtw (the date/time widget) and #top_actions.

   The date/time widget used to carry margin-left:auto. A flex auto
   margin absorbs all free space BEFORE justify-content is applied, so
   space-between had nothing left to distribute and the search bar was
   pinned next to the logo with a large dead gap in the middle of the
   header. That auto margin has been removed.

   With it gone, space-between alone spreads the four items evenly,
   which still leaves the search bar left of centre.

   Centring is done by putting the three middle items - Ticket, search
   bar and clock - into one group and centring that group as a unit,
   using the two-auto-margin trick: an auto margin on the first item of
   the group and another on #top_actions. Auto margins consume the free
   space before justify-content runs, and two of them split it equally,
   so the group lands in the middle of the run between the logo and the
   icons. Page centre is off by only (logo width - icons width) / 2,
   which is a couple of dozen px at most.

   <center> is deliberately NOT flex:1 here. Letting it grow was an
   earlier attempt at centring, but a growing <center> eats the free
   space and pushes #vs-dtw away from the search bar and out to the far
   right. Shrink-to-fit keeps the clock sitting directly beside the
   search bar, separated only by its own 14px margin.

   .search_holder keeps its own width (width:100% capped by max-width),
   so this repositions the search bar without resizing it.

   Scoped to >800px: below that yt.min.css takes .search_holder out of
   flow (position:absolute) and then hides it, so an empty flex child
   is all that would be left to centre.
   ===================================================================== */
@media (min-width: 801px){
  #ct-header-top{
    position: relative;      /* containing block for the three items below */
    /* #sb-search's width at this breakpoint, from custom.min.css. Only
       used to work out where the centred search bar's edges fall. */
    --maji-search-w: 650px;
    /* #top_actions' width, from custom.min.css. */
    --maji-actions-w: 165px;
  }
  /* Logged out, #top_actions is wider (the Sign in button). */
  #ct-header-top:has(#top_actions.no-session){ --maji-actions-w: 240px; }

  /* SEARCH BAR - dead centre of the header. translateX(-50%) centres it
     on its own width, so this holds at every breakpoint without needing
     to know how wide the search bar actually is. */
  #ct-header-top > center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
  }
  #ct-header-top .search_holder{ margin-top: 0 !important; }

  /* TICKET - centred in the gap between the logo and the search bar.
     It used to be pinned to the search bar's left edge
     (right: calc(50% + var(--maji-search-w)/2 + 14px)), which left the space
     lopsided: measured at 1500px there was 200px of gap after the logo and
     only 28px before the search bar.

     The search bar is centred, so its left edge is 50% - (search/2). The logo
     block ends at --maji-logo-block. The midpoint between those two is
     therefore (logo-block + 50% - search/2) / 2, and translateX(-50%) centres
     the button on it — which keeps it centred whatever its own width. */
  #ct-header-top > .maji-ticket-wrap{
    position: absolute;
    /* Span the whole gap — from the end of the logo block to the search bar's
       left edge — and let the wrap's own flex centring place the button in the
       middle of it.
       Deliberately NOT transform: translateX(-50%), which is the obvious way to
       centre this. #maji-ticket-modal is position:fixed;inset:0 and lives INSIDE
       this wrap, and a transform on an ancestor becomes the containing block for
       fixed descendants — so the modal stopped resolving against the viewport
       and collapsed into an ~86px column. Spanning + centring needs no transform,
       so the modal keeps the viewport as its containing block. */
    left: var(--maji-logo-block);
    right: calc(50% + (var(--maji-search-w) / 2));
    justify-content: center;
    top: 0;
    height: 100%;
    margin: 0;
  }

  /* CLOCK - stretched across the gap between the search bar's right edge
     and the icons, then centred inside that gap by justify-content. The
     box spans the gap; the widget itself stays 150px. */
  #ct-header-top > #vs-dtw{
    position: absolute;
    left: calc(50% + (var(--maji-search-w) / 2));
    right: var(--maji-actions-w);
    top: 0;
    height: 100%;
    width: auto;
    min-width: 0;
    margin: 0;
    justify-content: center;
  }
  /* ...so the inner wrapper must not stretch to the full gap. */
  #ct-header-top > #vs-dtw .vs-dtw-inner{ width: auto; }
  #ct-header-top > #vs-dtw .widget-container{
    width: 150px !important;
    max-width: 150px !important;
  }
}
/* Track #sb-search as custom.min.css steps it down, so the edges the
   Ticket and clock are pinned to stay correct. */
@media (min-width: 801px) and (max-width: 1350px){
  #ct-header-top{ --maji-search-w: 480px; }
}
@media (min-width: 801px) and (max-width: 1150px){
  #ct-header-top{ --maji-search-w: 360px; }
}
@media (min-width: 801px) and (max-width: 1024px){
  #ct-header-top{ --maji-search-w: 240px; }
}

/* =====================================================================
   HEADER ROW: TICKET, SEARCH BAR AND CLOCK ON ONE LINE

   The Ticket button used to live inside .search_holder as a static
   block box. #sb-search sits next to it as float:right with a fixed
   650px width, which is exactly .search_holder's max-width, so there
   was no room beside the float and the two stacked vertically -
   .search_holder grew to roughly 79px and pushed the Ticket button out
   of the 56px header. The button is now a direct child of
   #ct-header-top (see tpl_headernav_yt.tpl) and takes its place in the
   flex row, between the logo and the search bar.

   All three of Ticket, search bar and clock are centred on the same
   header line: the button and #vs-dtw via align-self, the search bar
   via the flex centring on <center> above.
   ===================================================================== */
#ct-header-top > .maji-ticket-wrap{
  /* #logo_container is order:1 in custom.min.css, so this shares its band
     and falls after it on DOM order: logo, ticket, search, clock, icons. */
  order: 1;
  align-self: center;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* margin-right only. A margin shorthand here would come later in the
     file than the centring block above and reset its margin-left:auto,
     silently killing the centring. */
  /* margin-right:auto pairs with the margin-left:auto above so the free space
     between the logo and the search bar is split evenly on BOTH sides of the
     button, centring it in that gap. It previously had a fixed 14px here, which
     left all the slack on the left and parked the Ticket hard against the
     search bar — measured at 1500px: 200px of gap before it, 28px after. */
  margin-right: auto;
  line-height: 0;           /* kill the inline descender gap under the img */
}

/* Matches the search bar, which yt.min.css hides at this width. Keeps the
   button's previous behaviour, where it was hidden along with its parent. */
@media (max-width: 800px){
  #ct-header-top > .maji-ticket-wrap{ display: none; }
}
/* Hidden while the mobile search overlay is open, as the clock is. */
.s-open #ct-header-top > .maji-ticket-wrap{ display: none; }

/* =====================================================================
   MENU POPOUT ALIGNED OVER THE SIDEBAR ICONS

   The sidebar icons (Home, Shorts, ...) start at x=24: custom.min.css
   gives .sidebar-container .blue .accordion a margin:0 12px on the
   accordion plus padding-left:12px on the link. yt.min.css puts the
   menu trigger at margin-left:28px, so it sat 4px to their right. This
   lines the two up so the popout button is directly above the icons it
   opens.

   Left alone below 701px, where custom.min.css uses a 20px margin and
   the sidebar is not on screen to align to.
   ===================================================================== */
@media (min-width: 701px){
  #ct-header-top #logo_container i.menu-trigger{
    margin-left: 24px !important;
  }
}

/* =====================================================================
   SIDEBAR NAV LABELS LINED UP

   Enhanced Mode replaces 14 specific sidebar icons - matched by href, in
   enhanced_mode.css - with 18x18 PNGs carrying margin-right:6px. Every
   other row keeps its icomoon glyph, whose advance width differs per
   character, on the stock margin-right:10px (20px inside
   #categories-accordion, 5px inside #no-session-accordion).

   The result is that the label on each row starts at a different x, so
   the menu reads as ragged. Giving every icon the same fixed box and the
   same gap makes the labels line up whichever kind of icon a row uses.

   #categories-accordion is excluded: its icons are deliberately coloured
   chips with their own padding, and resizing them would break that.
   ===================================================================== */
body.enhanced-mode .sidebar-container .accordion:not(#categories-accordion) a > i{
  display: inline-block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin-right: 10px !important;
  line-height: 24px !important;
  /* font-size must rise with the box or the un-replaced icomoon glyphs (Home,
     and any row without a PNG) stay at 18px while the PNG rows render 24px.
     !important is required: #no-session-accordion2 a i pins 18px by ID. */
  font-size: 22px !important;
  text-align: center !important;
  vertical-align: middle !important;
  background-position: center center !important;
  flex: 0 0 auto;
}
/* The PNG replacement carries its own 6px gap; drop it so the box above
   is the only thing deciding the spacing. */
body.enhanced-mode .sidebar-container .accordion:not(#categories-accordion) a > i::before{
  margin-right: 0 !important;
  vertical-align: middle !important;
}

/* =====================================================================
   LOGO HARDENING

   The MajiMedia mark was reported as not rendering. Everything checkable
   from the server is correct - the PNG returns 200 and is a valid image,
   there is no hotlink rule, and the background-image rule above already
   carries !important - so the cause is one of a small number of states
   that can only be seen in the browser. Rather than guess which, this
   forces every one of them back to a rendering state:

     - a later background/background-image from a theme variant
     - the box collapsing to zero width or height
     - display:none or opacity from a theme rule
     - the .navbar-brand padding eating the box

   visibility is handled separately below, because the mobile search
   overlay legitimately hides the logo with an inline style and that
   behaviour must survive.
   ===================================================================== */
header#main_header a#logo,
header#main_header.smaller a#logo,
#ct-header-top #logo_container a#logo{
  background-image: url("../img/logo-header-maji1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  background-color: transparent !important;
  width:  var(--maji-logo-size) !important;
  height: var(--maji-logo-size) !important;
  min-width: var(--maji-logo-size) !important;
  min-height: var(--maji-logo-size) !important;
  padding: 0 !important;
  display: block !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  text-indent: 0 !important;
  font-size: 0 !important;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
  header#main_header a#logo,
  header#main_header.smaller a#logo,
  #ct-header-top #logo_container a#logo{
    background-image: url("../img/logo-header-maji1@2x.png") !important;
  }
}

/* Forced visible EXCEPT while the mobile search overlay is open, where
   tpl_headernav_yt.tpl deliberately sets visibility:hidden inline. A
   blanket !important here would beat that inline style and leave the
   logo on top of the open search field. */
.dynamic_container:not(.s-open) #logo_container a#logo{
  visibility: visible !important;
}

/* =====================================================================
   SIDEBAR ROW: VERTICAL CENTRING

   Reported: menu icons sit noticeably below their labels (Media Library,
   Token Panel and the rest of the signed-in section).

   custom.min.css centres these rows with

     .sidebar-container .blue .accordion .menu-panel-entry a.dcjq-parent
       { display:flex; align-items:center }

   but that selector requires .blue in the ancestor chain. Rows that sit
   in an accordion without it never become flex, so their icon falls back
   to vertical-align:middle — which aligns to the baseline plus half the
   x-height, leaving the icon low against cap-height text. Measured on a
   screenshot of the signed-in menu the icon centre sat ~10px below the
   label centre; the guest rows, which DO match the .blue selector, measure
   exactly 0px offset.

   Applying the same centring without the .blue requirement gives every row
   the treatment that already works, rather than nudging icons by a magic
   number that would only be right for one font size.
   ===================================================================== */
body.enhanced-mode .sidebar-container .accordion:not(#categories-accordion) a.dcjq-parent {
  display: flex !important;
  align-items: center !important;
}

/* Centre the icon artwork INSIDE its box, not on the text baseline.
   The rule above pins an 18x18 box and the row centres that box correctly —
   verified: the box centre matches the label centre exactly. What still sat
   low was the artwork within the box, because ::before carries
   vertical-align:middle, which aligns to the baseline plus half the x-height
   rather than to the box's centre. On a screenshot of the signed-in menu that
   put the icon ~10px below the label centre on every row.

   Making the box a flex container centres its ::before geometrically, so the
   result no longer depends on font metrics. */
body.enhanced-mode .sidebar-container .accordion:not(#categories-accordion) a > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
body.enhanced-mode .sidebar-container .accordion:not(#categories-accordion) a > i::before {
  vertical-align: middle !important;
  line-height: 1 !important;
  display: block !important;
}

/* Icon size raised 18px -> 24px. The source PNGs carry ~49px of artwork on a
   56px canvas, so 24px is still a DOWNSCALE — nothing is upscaled and no
   sharpness is lost. At 18px most of that detail was simply being discarded. */

/* =====================================================================
   TICKET MODAL — legibility

   Three faults, all visible at once in the reported screenshot:

   1. Every line of text sat on top of the next. #maji-ticket-modal is a
      child of .maji-ticket-wrap, which carries line-height:0 to kill the
      descender gap under the button image — and line-height inherits, so
      the whole dialog collapsed. Restoring a normal line-height on the
      modal subtree fixes the title/subtitle overlap and the labels that
      were printing over their own inputs.

   2. The panel is white (inline style background:#fff), which is wrong
      against the rest of the UI.

   3. The text renders gold-on-white: the dialog's inline colours assume
      dark text on white, while Enhanced Mode recolours text to #FFC90E.

   Everything here needs !important because the dialog is styled with
   inline style="" attributes, which otherwise win.
   ===================================================================== */
#maji-ticket-modal,
#maji-ticket-modal *{
  line-height: normal !important;
}

/* Panel: dark grey instead of white, white text. */
#maji-ticket-modal > div{
  background: #2a2a2e !important;
  color: #ffffff !important;
  border: 1px solid #45454f !important;
}
#maji-ticket-modal,
#maji-ticket-modal div,
#maji-ticket-modal label,
#maji-ticket-modal p,
#maji-ticket-modal span,
#maji-ticket-modal #maji-ticket-title{
  color: #ffffff !important;
}
/* Section divider was drawn for a white panel. */
#maji-ticket-modal > div > div{
  border-bottom-color: #45454f !important;
}
/* Supporting copy stays readable but recedes from the headline. */
#maji-ticket-modal label,
#maji-ticket-modal #maji-ticket-title + div{
  color: #c3c3cc !important;
}

/* Fields: dark, white text, visible on the dark panel. */
#maji-ticket-modal select,
#maji-ticket-modal input,
#maji-ticket-modal textarea{
  background: #35353c !important;
  color: #ffffff !important;
  border: 1px solid #55555f !important;
}
#maji-ticket-modal select option{
  background: #35353c !important;
  color: #ffffff !important;
}
#maji-ticket-modal input::placeholder,
#maji-ticket-modal textarea::placeholder{
  color: #9a9aa6 !important;
}
#maji-ticket-modal #maji-ticket-close{
  color: #ffffff !important;
}
/* The footer bar behind Send ticket was a near-white tint. */
#maji-ticket-modal > div > div:last-child{
  background: #232327 !important;
  border-top-color: #45454f !important;
}