/* Visual stability layer.
   Purpose: keep all HGP app pages visually consistent without changing data. */

html,
body {
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(48, 129, 255, .18), transparent 28%),
    linear-gradient(135deg, #020814 0%, #03172a 52%, #04111f 100%) !important;
  color: #f2ffff !important;
}

body {
  padding-bottom: 110px !important;
}

main,
.shell,
.gamer-shell,
.main,
.app-main {
  overflow: visible !important;
}

.hero {
  overflow: hidden !important;
}

.hero .muted,
.hero p {
  max-width: 960px !important;
}

.hero .muted:empty,
.hero p:empty,
.panel .muted:empty,
.panel p:empty {
  display: none !important;
}

.panel,
.card,
.dashboard-panel,
.accounts-panel,
.upload-panel,
.history-panel,
.form-panel {
  border-color: rgba(31, 221, 255, .34) !important;
  background: linear-gradient(180deg, rgba(5, 22, 38, .92), rgba(3, 14, 27, .88)) !important;
}

table {
  width: 100% !important;
  table-layout: auto !important;
}

td,
th {
  overflow-wrap: anywhere !important;
}

td:empty,
th:empty {
  display: table-cell !important;
}

#accountDashboard,
.dashboard-panel,
.workspace,
.app-shell {
  overflow: visible !important;
}

.workspace {
  align-items: flex-start !important;
}

.account-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 330px) !important;
  min-height: 260px !important;
}

.dashboard-panel {
  min-height: 760px !important;
  padding-bottom: 120px !important;
}

.record-columns {
  align-items: stretch !important;
}

.final-card,
.variance-grid {
  margin-bottom: 18px !important;
}

.signout,
#signOutBtn {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 9999 !important;
}

body.hgp-hide-bad-text .mojibake,
[data-corrupt="true"] {
  display: none !important;
}

@media (max-width: 1300px) {
  body {
    overflow-x: hidden !important;
  }

  .app-shell,
  .workspace,
  .record-columns {
    grid-template-columns: 1fr !important;
  }

  .side-nav {
    position: relative !important;
    height: auto !important;
  }
}