/* Shared small-screen fixes for the authenticated Tsumi pages. */
html {
  min-height: 100%;
  background: #0b070c;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow-x: clip;
}

body > .petals,
body > .tsumi-petals {
  position: fixed !important;
  z-index: 0 !important;
}

body > header,
body > .status-bar,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex: 0 0 auto;
}

/* Keep header menus above the status bar and all page content. */
body > header,
body > header.dashboard-header {
  z-index: 100 !important;
}

body > .status-bar {
  z-index: 2 !important;
}

body > header .brand p.tsumi-role-greeting {
  --role-color: #f3a1bc;
  --role-soft: rgba(243, 161, 188, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--role-color) !important;
  font-size: 15px !important;
  font-weight: 850;
  letter-spacing: 0.15px;
  text-shadow: 0 0 7px var(--role-color), 0 0 18px var(--role-soft);
}

body > header .brand p.tsumi-role-greeting::after {
  padding: 3px 7px;
  border: 1px solid var(--role-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--role-color) 14%, transparent);
  box-shadow: 0 0 12px var(--role-soft), inset 0 0 8px color-mix(in srgb, var(--role-color) 8%, transparent);
  color: var(--role-color);
  content: attr(data-role-label);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  line-height: 1;
  text-shadow: 0 0 7px var(--role-color);
  text-transform: uppercase;
}

body > header .brand p.tsumi-role-greeting[data-tsumi-role="owner"] { --role-color:#ffd166; --role-soft:rgba(255,209,102,.48); }
body > header .brand p.tsumi-role-greeting[data-tsumi-role="admin"] { --role-color:#ff4d5e; --role-soft:rgba(255,38,58,.52); }
body > header .brand p.tsumi-role-greeting[data-tsumi-role="support"] { --role-color:#70d9ff; --role-soft:rgba(63,194,255,.46); }
body > header .brand p.tsumi-role-greeting[data-tsumi-role="reseller_manager"] { --role-color:#76efb5; --role-soft:rgba(71,226,153,.44); }
body > header .brand p.tsumi-role-greeting[data-tsumi-role="member"] { --role-color:#d9a8ff; --role-soft:rgba(176,104,255,.4); }

@media (max-width: 650px) {
  body > .petals,
  body > .tsumi-petals {
    display: none !important;
  }

  body {
    width: 100%;
  }

  body > header,
  body > header.dashboard-header {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
  }

  body > header .brand {
    min-width: 0;
  }

  body > header .brand > div {
    min-width: 0;
  }

  body > header .brand h1,
  body > header .brand p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body > header .header-actions,
  body > header.dashboard-header .header-actions {
    min-width: 0;
    margin-left: 0;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    gap: 6px !important;
  }

  body > header .header-actions > * {
    flex: 0 0 auto;
  }

  body > header .nav-button,
  body > header.dashboard-header .nav-button,
  body > header .motion-switch {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 !important;
    gap: 0;
    font-size: 0;
  }

  body > header .nav-button img,
  body > header .nav-button .nav-icon,
  body > header .nav-button .nav-icon-image {
    width: 16px;
    height: 16px;
    margin: 0;
    font-size: 15px;
  }

  body > header .motion-switch .switch-label {
    display: none;
  }

  body > header .motion-switch .switch-track {
    width: 27px;
    height: 17px;
  }

  body > header .motion-switch .switch-track::after {
    width: 11px;
    height: 11px;
  }

  body > header .motion-switch input:checked + .switch-track::after {
    transform: translateX(10px);
  }

  body > header .account-popover,
  body > header .admin-account-popover,
  body > header .admin-popover {
    width: min(220px, calc(100vw - 24px));
    font-size: 13px;
  }

  main,
  .status-bar {
    width: calc(100% - 28px) !important;
  }

  main {
    margin-top: 24px !important;
    margin-bottom: 28px !important;
  }

  .card,
  .license-center,
  .error-help,
  .changelog-directory,
  .announcement-directory,
  .reseller-directory,
  .panel {
    padding: 18px !important;
  }

  .site-footer {
    width: calc(100% - 20px);
    margin: auto 10px 10px;
  }

  /* Touch devices can retain :hover; keep their decorative petals behind cards. */
  .card::before,
  .card::after,
  .license-center::before,
  .license-center::after,
  .error-help::before,
  .error-help::after,
  .changelog-card::before,
  .changelog-card::after,
  button::before,
  button::after,
  .nav-button::before,
  .nav-button::after {
    display: none !important;
  }
}

@media (max-width: 410px) {
  body > header,
  body > header.dashboard-header {
    grid-template-columns: 1fr;
  }

  body > header .header-actions,
  body > header.dashboard-header .header-actions {
    width: 100%;
    justify-content: space-between;
  }
}