/* Load the Nunito font used across the site */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

/* Shared color variables for teal, mint, sky, and borders */
:root {
  --teal: #0f766e;
  --teal-deep: #134e4a;
  --mint: #2ee89a;
  --sky: #0ea5e9;
  --line: #d3e6e2;
}

/* Page shell: full-height column so the footer sits at the bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: #16323a;
  background: #eff6f5;
  font-family: "Nunito", sans-serif;
}

/* Header and footer bar: space logo/title and links on one row */
#app-header,
#site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.25rem;
}

/* Top bar: dark teal background and bold light text */
#app-header {
  background: var(--teal-deep);
  color: #ffffff;
  font-weight: 700;
}

/* Site title next to the logo, centered on one line */
#app-header h1 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

/* Header logo: fixed height, width follows the image */
#app-header img { display: block; height: 52px; width: auto; }

/* Header links (Login, etc.): white, slightly spaced from the title */
#app-header a { margin-left: 0.75rem; color: #fff; }

/* Page body: fixed sidebar plus a flexible content column */
.layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  flex: 1;
  min-width: 0;
}

/* Sidebar: light background and a right border */
nav {
  background: #f7fbfa;
  border-right: 1px solid var(--line);
  padding: 1rem 0.75rem;
}

/* Sidebar menu: stacked links with no bullets */
menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sidebar links: pill shape, teal text, no underline */
nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 0.6rem;
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: none;
}

/* Hovered or current page link: mint background */
nav a:hover,
nav a.active {
  background: #d7f3ee;
  color: var(--teal);
}

/* Main content area with page padding */
main { min-width: 0; padding: 1.25rem 1.5rem 2rem; }

/* Section titles and form legends in deep teal */
h2, h3, legend { color: var(--teal-deep); font-weight: 700; }

/* Limit paragraph width so lines stay readable */
p { max-width: 42rem; }

/* Default link color */
a { color: var(--teal); }

/* Hovering a link changes the color to the deep teal */
a:hover { color: var(--teal-deep); }

/* Shared grid for side-by-side forms and envelope cards */
.split,
.envelope-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Envelope card: icon, name, and amount on one row */
.envelope {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
}

/* Envelope icon stays a fixed size */
.envelope img { width: 48px; flex: none; }

/* Envelope text fills the remaining space and can shrink */
.envelope div { flex: 1; min-width: 0; }

/* Tighten spacing under the envelope name and balance */
.envelope h3, .envelope p { margin: 0 0 0.35rem; }

/* White rounded cards for forms and info sections */
fieldset,
section {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: #fff;
}

/* Form legend: smaller title sitting on the card border */
legend { padding: 0; font-size: 1.05rem; }

/* Stack each label above its input */
label { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; font-weight: 700; }

/* Teal outline when an input is focused */
input:focus { border-color: var(--teal); box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.25); }

/* Solid teal buttons, including hover and pressed states */
.btn-primary,
.btn-outline-primary {
  --bs-btn-bg: var(--teal);
  --bs-btn-border-color: var(--teal);
  --bs-btn-hover-bg: #0c615b;
  --bs-btn-hover-border-color: #0c615b;
  --bs-btn-active-bg: #0a524d;
  --bs-btn-active-border-color: #0a524d;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* Outline buttons: transparent fill with teal text */
.btn-outline-primary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--teal);
}

/* Table wrapper: white card with a rounded border */
.table-responsive {
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #fff;
}

/* Remove the extra gap Bootstrap adds under tables */
.table { margin: 0; }

/* Table header row: dark teal with white text */
.table th { background: var(--teal-deep); color: #fff; }

/* Alternate row shading so rows are easier to scan */
.table tbody tr:nth-child(even) td { background: #f4fbfa; }

/* Budget progress bar: full width, pill shape, no default border */
progress {
  display: block;
  width: 100%;
  height: 0.7rem;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
}

/* Progress track behind the filled amount (Chrome/Safari) */
progress::-webkit-progress-bar { background: #e1ecea; }

/* Filled portion of the bar, mint fading to sky (Chrome/Safari) */
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--mint), var(--sky)); }

/* Same mint-to-sky fill in Firefox */
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--mint), var(--sky)); }

/* Live updates panel: mint stripe on the left edge */
.live { border-left: 4px solid var(--mint); }

/* Remove extra space around the live-update list */
.live ul { margin: 0; }

/* Join QR code: small framed image */
.qr { width: 180px; max-width: 100%; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.75rem; }

/* Login form stays a readable width */
#login-form { max-width: 32rem; }

/* Footer matches the header's dark teal bar */
#site-footer { background: var(--teal-deep); color: #e7f6f4; }

/* Footer links stay white and bold */
#site-footer a { color: #fff; font-weight: 700; }

/* Phone layout: stack the sidebar above the content */
@media (max-width: 768px) {
  /* One column with a content-height nav and flexible main area */
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  /* Fix appearance of nav bar */
  nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 0.5rem; }

  /* Nav links stack when the bar is too narrow for one row */
  menu { flex-direction: column; align-items: stretch; }

  /* Smaller logo so the header fits */
  #app-header img { height: 40px; }

  /* Smaller title so the header fits */
  #app-header h1 { font-size: 1.25rem; }

  /* Tighter content padding */
  main { padding: 1rem; }

  /* Envelope buttons can drop to the next line */
  .envelope { flex-wrap: wrap; }

  /* Smaller table text and cell padding */
  .table th, .table td { padding: 0.45rem 0.4rem; font-size: 0.85rem; }
}