/* ===== Green → light gray page gradient, light-green footer ===== */

:root{
  --green-strong: #0ea95c;   /* top header green */
  --green-mid:    #39c97f;   /* mid transition */
  --green-pale:   #b9efd5;   /* pale green before the white/gray */
  --page-fade:    #f4f6f7;   /* near-white/gray */
  --footer-bg:    #dff7ea;   /* light green footer */
  --footer-text:  #0b3a24;   /* readable on light green */
}

/* Page background
   (dark green at the very top → pale green → white/gray as you scroll) */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: auto;

  /* fallback */
  background-color: var(--page-fade);

  /* gradient */
  background-image: linear-gradient(
    180deg,
    var(--green-strong) 0%,
    var(--green-mid)    18%,
    var(--green-pale)   42%,
    var(--page-fade)    78%,
    var(--page-fade)    100%
  );

  /* keep the gradient consistent while scrolling */
  background-attachment: fixed;
}

/* Light-green footer (not dark) */
app-foot {
  padding: 10px 20px; 
  text-align: center;
  font-size: 14px;

  background: var(--footer-bg);
  color: var(--footer-text);

  height: auto; 
  line-height: 1.5;

  /* subtle separation from page */
  border-top: 1px solid #c9ecd8;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* Dialog centering (unchanged) */
.cdk-overlay-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cdk-overlay-pane {
  position: relative !important;
  margin: 0 auto;
}