/* HVSZ_H127_VISUAL_CLEANUP_V1
 *
 * Final v2 visual cleanup layer.
 *
 * Scope:
 * - remove legacy blue hover material from non-active sidebar items without
 *   changing the established active navigation treatment;
 * - keep translated sidebar items inside their scrollport instead of clipping;
 * - replace legacy --panel (#0f172a in dark mode) surfaces in the H88 account
 *   modal footer and department subpanels with v2 neutral graphite tokens;
 * - hard-reset the customer ticket metadata grid wrapper so only the rounded
 *   detail cards paint a surface;
 * - prevent generic reveal animations from replaying inside department subtabs;
 * - neutralize blue-tinted surfaces introduced by the Members work tracker.
 *
 * CSS only. No business/security behavior belongs in this file.
 */

/* -------------------------------------------------------------------------
   1) Sidebar hover: preserve the 2px interaction, give it breathing room,
      and use neutral v2 material instead of the old cyan-blue hover patch.
   ------------------------------------------------------------------------- */
body.ui-v2-shell .topbar .topbar-center,
body.ui-v2-shell .topbar nav.topbar-center{
  padding-left:0!important;
  padding-right:0!important;
}

body.ui-v2-shell .topbar .topbar-center > .topbar-pill,
body.ui-v2-shell .topbar .topbar-center > a.topbar-pill,
body.ui-v2-shell .topbar .topbar-center > button.topbar-pill{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Resting state remains exactly as wide as the brand/divider. On hover the
   item gives back the same 2px that it translates, so its right edge never
   crosses the navigation viewport. */
body.ui-v2-shell .topbar .topbar-center > .topbar-pill:hover:not(.active),
body.ui-v2-shell .topbar .topbar-center > a.topbar-pill:hover:not(.active),
body.ui-v2-shell .topbar .topbar-center > button.topbar-pill:hover:not(.active){
  width:calc(100% - 2px)!important;
  max-width:calc(100% - 2px)!important;
  align-self:flex-start!important;
  transform:translateX(2px)!important;
  background:color-mix(in srgb,var(--v2-control-2,#202226) 88%,var(--v2-text,#f3f5f7) 12%)!important;
  background-image:none!important;
  border-color:var(--v2-border,rgba(255,255,255,.11))!important;
  box-shadow:none!important;
}

/* Active buttons keep their full-width geometry even when the pointer is on
   them; this also prevents the generic legacy :hover translation from making
   an active item clip at the right edge. */
body.ui-v2-shell .topbar .topbar-center > .topbar-pill.active:hover,
body.ui-v2-shell .topbar .topbar-center > a.topbar-pill.active:hover,
body.ui-v2-shell .topbar .topbar-center > button.topbar-pill.active:hover{
  width:100%!important;
  max-width:100%!important;
  transform:none!important;
}

html[data-theme="dark"] body.ui-v2-shell .topbar .topbar-center > .topbar-pill:hover:not(.active),
html[data-theme="dark"] body.ui-v2-shell .topbar .topbar-center > a.topbar-pill:hover:not(.active),
html[data-theme="dark"] body.ui-v2-shell .topbar .topbar-center > button.topbar-pill:hover:not(.active){
  background:rgba(255,255,255,.055)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:none!important;
}

/* -------------------------------------------------------------------------
   2) H88 account/organization modal fixed actions: var(--panel) is the legacy
      dark #0f172a token. Use the neutral v2 card token instead.
   ------------------------------------------------------------------------- */
html body.ui-v2-shell .modal.h88-account-modal .h88-modal-actions,
html body.ui-v2-shell .modal.h88-organization-modal .h88-modal-actions{
  background:var(--v2-card-2,#23252a)!important;
  background-color:var(--v2-card-2,#23252a)!important;
  background-image:none!important;
  border-top-color:var(--v2-border,rgba(255,255,255,.11))!important;
  box-shadow:none!important;
}

/* -------------------------------------------------------------------------
   3) Customer ticket_view metadata wrapper.
      Several historic bundles painted .ticket-meta-grid / .ticket-meta-col.
      The grid and its display:contents columns must never paint their own box.
   ------------------------------------------------------------------------- */
html body.ui-v2-shell.customer-v2-portal main.customer-ticket-view-page .ticket-meta-grid,
html body.ui-v2-shell main.customer-ticket-view-page .ticket-meta-grid,
html body.ui-v2-shell .customer-ticket-view-page .ticket-meta-grid{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body.ui-v2-shell.customer-v2-portal main.customer-ticket-view-page .ticket-meta-grid::before,
html body.ui-v2-shell.customer-v2-portal main.customer-ticket-view-page .ticket-meta-grid::after,
html body.ui-v2-shell main.customer-ticket-view-page .ticket-meta-grid::before,
html body.ui-v2-shell main.customer-ticket-view-page .ticket-meta-grid::after{
  content:none!important;
  display:none!important;
}

html body.ui-v2-shell.customer-v2-portal main.customer-ticket-view-page .ticket-meta-col,
html body.ui-v2-shell main.customer-ticket-view-page .ticket-meta-col,
html body.ui-v2-shell .customer-ticket-view-page .ticket-meta-col{
  display:contents!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}

/* -------------------------------------------------------------------------
   4) Department subtabs.
      The current shell used var(--panel), whose dark legacy token is navy.
      Cards inside the panels are also auto-tagged with generic reveal classes,
      which makes a tab switch briefly expose the parent background.
   ------------------------------------------------------------------------- */
.dept-v2-page-active .dept-v2-panels{
  background:transparent!important;
  background-image:none!important;
}

.dept-v2-page-active .dept-v2-panel{
  background:var(--v2-card,#1d1f22)!important;
  background-color:var(--v2-card,#1d1f22)!important;
  background-image:none!important;
}

.dept-v2-page-active .dept-v2-panel .reveal,
.dept-v2-page-active .dept-v2-panel .reveal.is-visible{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  transition-delay:0ms!important;
  animation:none!important;
  filter:none!important;
  will-change:auto!important;
}

/* -------------------------------------------------------------------------
   5) Members work tracker: the ticket status remains in the dedicated favicon.
      Supporting surfaces use graphite/neutral tokens, not blue blocks.
   ------------------------------------------------------------------------- */
.dept-v2-page-active .dept-member-profile-badge,
.dept-v2-page-active .dept-member-priority-rank,
.dept-v2-page-active .dept-member-live-status{
  background:color-mix(in srgb,var(--v2-control-2,#202226) 92%,transparent)!important;
  background-image:none!important;
  border-color:var(--v2-border,rgba(255,255,255,.11))!important;
  box-shadow:none!important;
}

.dept-v2-page-active .dept-member-task-link--priority{
  background:color-mix(in srgb,var(--v2-control-2,#202226) 76%,transparent)!important;
  background-image:none!important;
  border-color:var(--v2-border,rgba(255,255,255,.11))!important;
  box-shadow:none!important;
}

.dept-v2-page-active .dept-member-task-link--priority:hover{
  background:color-mix(in srgb,var(--v2-control-2,#202226) 88%,transparent)!important;
  background-image:none!important;
  border-color:var(--v2-border-strong,rgba(255,255,255,.17))!important;
  box-shadow:none!important;
}

html[data-theme="dark"] .dept-v2-page-active .dept-member-profile-badge,
html[data-theme="dark"] .dept-v2-page-active .dept-member-priority-rank,
html[data-theme="dark"] .dept-v2-page-active .dept-member-live-status{
  background:rgba(255,255,255,.045)!important;
}

html[data-theme="dark"] .dept-v2-page-active .dept-member-task-link--priority{
  background:rgba(255,255,255,.025)!important;
}

html[data-theme="dark"] .dept-v2-page-active .dept-member-task-link--priority:hover{
  background:rgba(255,255,255,.055)!important;
}


/* -------------------------------------------------------------------------
   6) Statistics page header polish.
      Keep the short page title as one semantic visual unit on narrow layouts.
   ------------------------------------------------------------------------- */
body.ui-v2-shell .stats-page-header > h1.page-title-with-icon{
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
}

body.ui-v2-shell .stats-page-header > h1.page-title-with-icon > span{
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  hyphens:none!important;
}