/* MyBudget global styling.
   Visual language borrowed from the MyReceipts web app (receipt-keeper-v4/FE): a light-cyan
   page with white panels floating on it, deep navy for text and primary actions, system font.
   MudBlazor's own stylesheet loads first, so these rules win at equal specificity; a few need
   !important to beat MudBlazor's deeper selectors. */

:root {
  --back-layer: #caf0f8;
  --front-layer: #ffffff;
  --navy: #03045e;
  --border-subtle: rgba(3, 5, 94, 0.12);
  --panel-shadow: 0 1px 3px rgba(3, 5, 94, 0.06), 0 10px 30px rgba(3, 5, 94, 0.07);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--back-layer);
  color: var(--navy);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------- App shell */

/* Top header - white bar, subtle bottom hairline, no drop shadow (FE header). */
.mud-appbar,
.mud-appbar.mud-appbar-fixed-top {
  background: var(--front-layer) !important;
  color: var(--navy) !important;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: none !important;
}

.mud-appbar .app-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  text-decoration: none;
}

/* Horizontal nav links in the header. */
.topnav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.topnav a {
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
}

.topnav a:hover {
  text-decoration: none;
  border-bottom-color: var(--border-subtle);
}

.topnav a.active {
  font-weight: 700;
  border-bottom-color: var(--navy);
}

/* The centred white "work area" that page content sits in. */
.work-area {
  width: 100%;
  max-width: 940px;
  margin: 2rem auto 4rem;
  padding: 1.9rem 2rem 2.6rem;
  background: var(--front-layer);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
}

@media (max-width: 900px) {
  .work-area {
    margin: 0;
    padding: 1.15rem 1.15rem 2.25rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* -------------------------------------------------------------- MudBlazor tweaks */

/* Page background behind the work area. */
.mud-layout,
.mud-main-content {
  background: var(--back-layer);
}

/* Sticky footer: MudBlazor's .mud-layout is only `position:relative; height:100%`, so make it a
   full-height flex column and let the main content grow, pushing the footer to the viewport
   bottom on short pages. (The fixed app bar is out of flow, so this is just [content, footer].) */
.mud-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mud-main-content {
  flex: 1 0 auto;
}

/* Footer - slim, centred, muted (mirrors the MyReceipts FE footer). */
.app-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  font-size: 0.85rem;
  color: var(--navy);
  opacity: 0.7;
}

.app-footer a {
  color: inherit;
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

/* The work area is itself the frame - panels, tables and tab bodies inside it stay flat and
   borderless (structure comes from the hairline row/section separators instead). A panel that
   really wants its own outline opts in with .framed. */
.work-area .mud-paper,
.work-area .mud-table,
.work-area .mud-tabs .mud-tabs-panels {
  box-shadow: none !important;
  border: none;
  background: transparent;
}

.work-area .mud-paper.framed {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--front-layer);
}

/* Buttons: flat navy fill / hairline-bordered secondary, no Material elevation. */
.mud-button-root {
  box-shadow: none !important;
  text-transform: none;
}

.mud-button-filled.mud-button-filled-primary {
  background-color: var(--navy);
}

.mud-button-outlined {
  border-color: var(--border-subtle);
}

/* Tables: quiet header, hairline row separators, pointer + tint on hover. */
.mud-table-head .mud-table-cell {
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--border-subtle);
}

.mud-table-row .mud-table-cell {
  border-bottom: 1px solid var(--border-subtle);
}

.mud-table-body .mud-table-row:hover {
  background-color: rgba(3, 5, 94, 0.04) !important;
}

/* Tabs: navy indicator, no uppercase. */
.mud-tabs-toolbar {
  border-bottom: 1px solid var(--border-subtle);
}

.mud-tab {
  text-transform: none;
  font-weight: 600;
}

/* Chips: soft, low-contrast by default. */
.mud-chip.mud-chip-text.mud-chip-color-default {
  background-color: rgba(3, 5, 94, 0.07);
  color: var(--navy);
}

/* Dialogs: match the FE modal - white sheet, navy-tinted scrim. */
.mud-overlay-dialog .mud-overlay-scrim,
.mud-overlay-dialog.mud-overlay-scrim {
  background-color: rgba(3, 5, 94, 0.38) !important;
}

.mud-dialog {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--panel-shadow) !important;
}

.mud-dialog-title {
  font-weight: 700;
}

/* Inputs: subtle borders (handled largely by the theme's LinesInputs). */
.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--border-subtle);
}

/* Snackbar a touch softer. */
.mud-snackbar {
  box-shadow: var(--panel-shadow) !important;
}

/* Prose (privacy policy). */
.privacy {
  max-width: 640px;
  line-height: 1.6;
}

.privacy h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.6rem 0 0.4rem;
}

.privacy p {
  margin: 0.5rem 0;
}

.privacy ul {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
}

.privacy li {
  margin: 0.3rem 0;
}

.privacy a {
  color: var(--navy);
  font-weight: 600;
}