/* VX Balanced UX V21 — keep existing visuals, only slightly compact */

/* Tariff-colored full header background restored. */
body.vx-authenticated .header-lite{
  background:linear-gradient(90deg,#211d0b 0%,#3b300e 52%,#211d0b 100%)!important;
  box-shadow:0 8px 28px rgba(233,190,68,.10)!important;
}
body.vx-authenticated .header-pro{
  background:linear-gradient(90deg,#092218 0%,#103924 52%,#092218 100%)!important;
  box-shadow:0 8px 28px rgba(68,213,137,.10)!important;
}
body.vx-authenticated .header-ultra{
  background:linear-gradient(90deg,#1d1230 0%,#3b2268 52%,#1d1230 100%)!important;
  box-shadow:0 8px 30px rgba(135,89,232,.14)!important;
}

/* Generic inline instruction: compact, but normal button size. */
.vxInstructionInlineV21,
.vxDashTopActionsV21 button,
.vxBotHeadActionsV21 button{
  min-height:34px;
  padding:6px 10px;
  border-radius:9px;
  font-size:11px;
}
.vxBotHeadActionsV21,.vxDashTopActionsV21{display:flex;align-items:center;gap:7px;flex:0 0 auto}

/* Dashboard: preserve original hero/content; shave just a little vertical air. */
.vxDashTopline--v21{padding-top:0!important;gap:12px!important}
.vxDashTopline--v21 h3{font-size:22px!important;margin-top:2px!important}
.vxDashTopline--v21 p{font-size:10.5px!important}
.vxDashTopActionsV21 button{border:1px solid rgba(121,145,178,.24);background:#111c2a;color:#cbd8e7}

/* Logs: keep current page layout, only a modest page header + smaller retention card. */
#tab-logs .vxPageHeadV21{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 9px;padding:2px 2px 0
}
#tab-logs .vxPageHeadV21 h3{margin:0 0 2px;font-size:20px}
#tab-logs .vxPageHeadV21 p{margin:0;font-size:10px}
#tab-logs .vxLogsRetentionNotice--v21{
  margin-bottom:10px!important;padding:8px 10px!important;border-radius:10px!important;font-size:11px!important
}
#tab-logs .vxLogsRetentionNotice--v21 span{font-size:10.5px}

/* Tickets: only slightly tighter; keep the original header/card feel. */
#tab-tickets .vxTickets__header{gap:10px!important;padding-top:10px!important;padding-bottom:10px!important}
#tab-tickets .vxTickets__controls{gap:7px!important}
#tab-tickets .vxTickets__controls .vxSel,
#tab-tickets .vxTickets__controls .vxInp,
#tab-tickets .vxTickets__controls .vxBtn{min-height:35px!important}

/* Empty favorites: only then make the block small. Populated favorites are unchanged. */
#vx-sidebar-favorites.vxFavoritesEmptyV21{
  min-height:0!important;
  max-height:37px!important;
  padding:5px 8px!important;
  overflow:hidden!important;
}
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesTitle{margin:0!important;font-size:9px!important}
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxFavoriteEmpty{display:none!important}
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesList{min-height:0!important;max-height:10px!important}

/* Licenses: keep the Hero and cards. Just scale them down 10–15%, not into a toolbar. */
.vxLicenseHero{padding:22px!important;border-radius:19px!important}
.vxLicenseHero h1{font-size:clamp(25px,3.6vw,38px)!important;margin-bottom:6px!important}
.vxLicenseHero p{font-size:12px!important;line-height:1.5!important}
.vxLicenseTabs{margin-top:16px!important}
.vxLicenseTab{min-height:36px!important;padding:7px 12px!important;font-size:11px!important}
.vxLicenseInstructionV21{margin-left:auto!important}
.vxLicenseSummary{gap:9px!important}
.vxLicenseStat{padding:13px!important;border-radius:14px!important}
.vxLicenseStat strong{font-size:21px!important;margin-top:5px!important}
.vxLicenseStat small{font-size:10px!important}
.vxLicenseGrid{gap:10px!important;grid-template-columns:repeat(auto-fill,minmax(275px,1fr))!important}
.vxLicenseCard{padding:15px!important;border-radius:15px!important}
.vxLicenseCard h3{font-size:16px!important}
.vxLicensePills{margin-top:10px!important}
.vxLicenseActions{margin-top:11px!important}
.vxLicenseActions button,.vxLicenseActions a{min-height:35px!important;padding:7px 10px!important;font-size:11px!important}
.vxLicenseIp{padding:15px!important;border-radius:15px!important}
.vxLicenseIpChip{padding:6px 9px!important}

/* Integrations: preserve existing header/desktop card; modestly tighten spacing only. */
#tab-integrations .vxBotIntegrationHead{gap:12px!important}
#tab-integrations .vxBotIntegrationHead h3{margin-bottom:4px!important}
#tab-integrations .vxBotChannelTabs{margin-top:14px!important}
#tab-integrations .vxDesktopIntegrationCard{padding:12px 14px!important;gap:12px!important;margin-bottom:10px!important}
#tab-integrations .vxDesktopIntegrationIcon{width:42px!important;height:42px!important}
#tab-integrations .vxDesktopIntegrationCopy p{font-size:10.5px!important;line-height:1.35!important}
#tab-integrations .vxDesktopIntegrationFacts{gap:5px!important;margin-top:5px!important}
#tab-integrations .vxDesktopIntegrationFacts span{padding:4px 7px!important;font-size:9px!important}

/* RCON lazy sections look like normal cards, only collapsed initially. */
.vxRconHistoryLazy{padding-top:12px!important;padding-bottom:12px!important}
.vxRconHistoryLazy [data-rcon-history-body]:not([hidden]){margin-top:10px;overflow:auto}

@media(max-width:780px){
  .vxDashTopActionsV21,.vxBotHeadActionsV21{width:100%;justify-content:flex-end}
  .vxLicenseInstructionV21{margin-left:0!important}
}


/* V21.1: empty Favorites must be almost flat.
   vx-user-extras.js already toggles .empty on the actual block. */
#vx-sidebar-favorites.empty,
#vx-sidebar-favorites.vxFavoritesEmptyV21{
  display:block!important;
  min-height:0!important;
  height:23px!important;
  max-height:23px!important;
  padding:2px 7px!important;
  margin-top:4px!important;
  margin-bottom:3px!important;
  border-radius:7px!important;
  overflow:hidden!important;
}
#vx-sidebar-favorites.empty .vxSidebarFavoritesTitle,
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesTitle{
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  height:18px!important;
  line-height:18px!important;
  font-size:8px!important;
  opacity:.72!important;
}
#vx-sidebar-favorites.empty .vxSidebarFavoritesList,
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesList{
  display:none!important;
  min-height:0!important;
  height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
}
#vx-sidebar-favorites.empty .vxFavoriteEmpty,
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxFavoriteEmpty{
  display:none!important;
}


/* V22 — ticket counters */
.vxTicketCounters{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}
.vxTicketCounters span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border:1px solid rgba(137,156,184,.16);
  border-radius:7px;
  background:rgba(255,255,255,.025);
  color:#8491a4;
  font-size:9px;
  line-height:1;
}
.vxTicketCounters b{color:#dbe4f0;font-size:10px}
.vxTicketCounters .is-open b{color:#72d99c}
.vxTicketCounters .is-closed b{color:#e2ba69}
.vxTicketCounters .is-archived b{color:#98a5b8}

/* V22 — renew each renewable module without turning cards into toolbars. */
.vxLicenseModuleRenew{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:2px 5px;
  border:1px solid rgba(139,164,255,.24);
  border-radius:6px;
  background:rgba(109,134,238,.08);
  color:#bac8ff!important;
  font-size:8px;
  font-weight:850;
  line-height:1.2;
  text-decoration:none!important;
  white-space:nowrap;
}
.vxLicenseModuleRenew:hover{
  border-color:rgba(139,164,255,.42);
  background:rgba(109,134,238,.14);
}
.vxLicenseModuleIncluded{font-size:8px;color:#7f8b9e}

/* V22 fallback: JS also stamps body[data-vx-plan].
   This guarantees the visible cabinet header follows the active project plan. */
body.vx-authenticated[data-vx-plan="LITE"] > header:not(.vx-public-header){
  background:linear-gradient(90deg,#211d0b 0%,#3b300e 52%,#211d0b 100%)!important;
}
body.vx-authenticated[data-vx-plan="PRO"] > header:not(.vx-public-header){
  background:linear-gradient(90deg,#092218 0%,#103924 52%,#092218 100%)!important;
}
body.vx-authenticated[data-vx-plan="ULTRA"] > header:not(.vx-public-header){
  background:linear-gradient(90deg,#1d1230 0%,#3b2268 52%,#1d1230 100%)!important;
}


/* V23 — clickable ticket counters + compact New/Replies badges */
.vxTicketCounters button{
  min-height:0!important;
  margin:0!important;
  padding:3px 6px!important;
  border:1px solid rgba(137,156,184,.16)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.025)!important;
  color:#8491a4!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:600!important;
  box-shadow:none!important;
  transform:none!important;
}
.vxTicketCounters button:hover{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(137,156,184,.30)!important;
}
.vxTicketCounters button.is-active{
  background:rgba(105,132,239,.13)!important;
  border-color:rgba(123,151,255,.40)!important;
  color:#dce4ff!important;
}
.vxTicketCounters .is-new{
  border-color:rgba(93,213,150,.20);
  background:rgba(65,184,124,.055);
}
.vxTicketCounters .is-new b{color:#72d99c}
.vxTicketCounters .is-reply{
  border-color:rgba(113,144,255,.22);
  background:rgba(91,117,221,.06);
}
.vxTicketCounters .is-reply b{color:#aebdff}