/* ================================================================
   InkTracker — Global UI Refinements
   Applied after MudBlazor.min.css to fine-tune component behaviour.
   ================================================================ */

/* ---------------------------------------------------------------
   Navigation — rounded, inset links feel less like a wall of text
   --------------------------------------------------------------- */

/* Give each nav link pill-shaped hover/active treatment */
.mud-nav-link {
  border-radius: 6px !important;
  /* Inset from drawer edges so active highlight has breathing room */
  margin: 1px 8px !important;
  width: auto !important;
}

/* Slightly heavier weight on the active label */
.mud-nav-link.active .mud-nav-link-text,
.mud-nav-link.mud-tertiary-text .mud-nav-link-text {
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Data tables — cleaner column headers
   --------------------------------------------------------------- */

/* Uppercase small-caps headers sit more clearly above data rows */
.mud-table-head .mud-table-cell {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  opacity: 0.85;
}

/* Remove the double top-border that appears when a data-grid is
   flush against the top edge of its containing paper. */
.mud-table-root>thead>.mud-table-row:first-child>.mud-table-cell {
  border-top: none;
}

/* ---------------------------------------------------------------
   Toolbar inside data grids — consistent left-padding
   --------------------------------------------------------------- */
.mud-table-toolbar {
  padding-left: 16px !important;
  padding-right: 8px !important;
}

/* ---------------------------------------------------------------
   Dialog — remove the extra paper padding that causes
   NestedPaper children to look double-padded inside dialogs
   --------------------------------------------------------------- */
.mud-dialog-content {
  padding: 16px 24px !important;
}

/* ================================================================
   Atmosphere — Welcome-page visual warmth rolled out globally.
   Moderate intensity: polished but not overwhelming for data views.
   ================================================================ */

/* ---------------------------------------------------------------
   Page Background — faint purple / gold radial glow.
   background-image layers on top of MudBlazor's theme
   background-color so the theme still controls the base.
   --------------------------------------------------------------- */
.mud-main-content {
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(155, 107, 243, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(230, 179, 75, 0.025) 0%, transparent 40%);
}

/* ---------------------------------------------------------------
   Content Cards — purple tint, gold top accent, subtle hover.
   Targets elevated MudPaper inside main content only.
   Excludes: outlined papers, zero-elevation papers, dialogs
   (MudBlazor renders dialogs outside .mud-main-content).
   --------------------------------------------------------------- */
.mud-main-content .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0) {
  background-image: linear-gradient(rgba(155, 107, 243, 0.04),
      rgba(155, 107, 243, 0.04));
  border: 1px solid rgba(155, 107, 243, 0.12);
  border-top: 2px solid rgba(230, 179, 75, 0.35);
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.mud-main-content .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0):hover {
  box-shadow: 0 4px 16px rgba(155, 107, 243, 0.12);
}

/* Nested papers (e.g. NestedPaper, papers-inside-papers) must
   not receive the card treatment again — reset to defaults.
   Higher specificity (0,5,0) beats the card rule (0,4,0). */
.mud-main-content .mud-paper .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0) {
  background-image: none;
  border: none;
  border-radius: inherit;
  transition: none;
}

.mud-main-content .mud-paper .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0):hover {
  box-shadow: none;
}

/* ---------------------------------------------------------------
   Primary Button Glow — subtle purple shadow on filled buttons.
   Welcome CTA buttons already use !important and win; these rules
   affect every other filled-primary button in the app.
   --------------------------------------------------------------- */
.mud-button-filled-primary {
  box-shadow: 0 2px 12px rgba(155, 107, 243, 0.2) !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

.mud-button-filled-primary:hover {
  box-shadow: 0 3px 16px rgba(155, 107, 243, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ---------------------------------------------------------------
   Dividers — warm golden tint instead of the default grey.
   --------------------------------------------------------------- */
.mud-main-content .mud-divider {
  border-color: rgba(230, 179, 75, 0.15);
}

/* ---------------------------------------------------------------
   Icon Accents — large decorative icons default to gold.
   Only targets icons with no explicit MudBlazor Color set
   (those get mud-icon-default, not a colour-text class).
   --------------------------------------------------------------- */
.mud-main-content .mud-icon-root.mud-icon-default.mud-icon-size-large {
  color: var(--mud-palette-tertiary);
}

/* ---------------------------------------------------------------
   Reduced Motion — honour user preference.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mud-main-content .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0) {
    transition: none !important;
  }

  .mud-button-filled-primary {
    transition: none !important;
  }

  .mud-button-filled-primary:hover {
    transform: none !important;
  }
}