:root {
    --rz-body-font-family: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body, * {
    font-family: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffcc00;
    padding: 8px 16px;
    z-index: 1000;
}

h1, h2{
    color:#0059A7 !important;
}
.body-text {
    font-size: 1.2em;
    color:#ffffff;
}
.body-text-muted {
    font-size: 1.2em;
    color:#AAAAAA;
}
.body-text-dim {
    font-size: 1.2em;
    color:#888888;
}
.crystal-accent {
    color: #00D9FF;
}
  .page-body {
      background: #000000;
      color: #ffffff;
      border-top: 1px solid #888888;
      padding: 10px 15px 10px;
  }

   .page-container {
     padding: 0 16px 16px;
     min-height: calc(100vh - 56px);
     max-width: 1400px;
 }

   .text-right {
       text-align:right;
       align-content:flex-end;
   }

  .section-heading {
      color: #00d9ff;
      font-size: 1rem;
      font-weight: 700;
      margin: 16px 0 8px;
      
  }

.full-card {
    background: #111111 !important;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* On phones (matches the 640px breakpoint the payment-history cards use), drop the
   horizontal chrome padding so page content can use the full viewport width. Scoped to the
   page-content area only (not every .rz-p-4 — the sidebar keeps its padding). .rz-p-4 is a
   Radzen spacing utility applied with !important, so the override needs !important to win. */
@media (max-width: 640px) {
    .page-body {
        padding: 0 !important;
    }

    .drill-content.rz-p-4 {
        padding: 0 !important;
    }
}

/* RadzenPanelMenu items render their icon + label through a <Template> (Radzen's own Icon slot
   is Material-only, so Font Awesome goes in the template). This lines the FA glyph up in a fixed
   column so every item's label starts at the same x, whether or not it has an icon. */
.cp-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.cp-nav-label > i,
.cp-nav-label > .cp-nav-icon-blank {
    width: 1.15rem;
    text-align: center;
    flex: 0 0 auto;
}

/* Indent each nested nav level's content 20px past its parent. Top-level items start at 16px
   (--rz-panel-menu-item-padding-inline), so level 2 lands at 36px and level 3 at 56px.

   Both values are 8px short of their target because the nested wrapper carries
   margin-inline: 0.5rem (--rz-panel-menu-item-2nd-level-margin-inline) — that 8px is what insets
   the rounded hover/active background on sub-items, so it stays and the padding absorbs it.

   Level 2 goes through Radzen's own offset variable. It is declared on :root, and .rz-panel-menu
   never redeclares it, so setting it here on the menu element wins by inheritance — app.css loads
   BEFORE the Radzen theme, so an equal-specificity rule would otherwise lose. */
.rz-panel-menu {
    --rz-panel-menu-item-2nd-level-offset: 28px; /* + 8px margin = 36px */
}

/* Level 3+ has no variable: Radzen indents every nested level with one descendant rule, so a
   3rd-level item (Admin > Content > Categories) would otherwise sit at the same x as its parent.
   Five classes outrank Radzen's four-class rule, which is what makes this stick. */
.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link {
    padding-inline-start: 48px; /* + 8px margin = 56px */
}