html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0e5a6b;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ------------------------------------------------------------------
   App background (every page except Log In) — soft beach photo
   ------------------------------------------------------------------ */

/* Fallback color while the image loads (and if it never does). */
body:not(.login-page) {
  background-color: #eef3f7;
}

/* Fixed pseudo-element instead of background-attachment:fixed (iOS Safari
   ignores that). Anchored to the bottom so the shoreline stays in view on
   tall phones. WebP is ~23 KB; the JPEG (~60 KB) is only for old browsers. */
body:not(.login-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.10) 100%),
    url("../images/bg-beach-photo.jpg") center bottom / cover no-repeat;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.10) 100%),
    image-set(url("../images/bg-beach-photo.webp") type("image/webp"),
              url("../images/bg-beach-photo.jpg") type("image/jpeg")) center bottom / cover no-repeat;
}

/* Frosted navbar and footer so the photo shows through a little. */
body:not(.login-page) .navbar {
  background-color: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body:not(.login-page) .footer {
  background-color: rgba(255, 255, 255, 0.65);
  border-top-color: transparent !important;
}

/* The page content sits on a soft white panel so text, tables and forms stay
   easy to read over the photo. */
body:not(.login-page) main {
  background-color: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(20, 60, 80, 0.08);
}

@media (max-width: 575.98px) {
  body:not(.login-page) main {
    padding: 1rem 0.875rem 0.75rem;
    border-radius: 0.75rem;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not(.login-page) main { background-color: rgba(255, 255, 255, 0.92); }
}

/* ------------------------------------------------------------------
   Login page — softened Venice pier background + frosted-glass card
   ------------------------------------------------------------------ */

/* Background lives on a fixed pseudo-element (not background-attachment:fixed,
   which iOS Safari ignores), so it stays put and covers any screen size. */
body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(235, 247, 250, 0.45) 45%,
      rgba(255, 255, 255, 0.70) 100%),
    url("../images/venicepeer1.jpeg") center 45% / cover no-repeat;
  /* Modern browsers get the lighter WebP; older ones keep the JPEG above. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(235, 247, 250, 0.45) 45%,
      rgba(255, 255, 255, 0.70) 100%),
    image-set(url("../images/venicepeer1.webp") type("image/webp"),
              url("../images/venicepeer1.jpeg") type("image/jpeg")) center 45% / cover no-repeat;
  filter: saturate(0.85);
}

/* Let the photo show through the navbar and footer on this page only. */
body.login-page .navbar {
  background-color: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.login-page .footer {
  background-color: rgba(255, 255, 255, 0.6);
  border-top-color: transparent !important;
}

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* fill the space between navbar and footer; dvh handles mobile toolbars */
  min-height: calc(100vh - 180px);
  min-height: calc(100dvh - 180px);
  padding: 1rem 0 2rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1rem 2.5rem rgba(20, 60, 80, 0.18);
}

.login-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f4e5f;
  margin-bottom: 0.25rem;
}

.login-subtitle {
  color: #5a6b73;
}

.login-card .form-control {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Floating labels already name the fields; hide the template's right-aligned placeholders. */
.login-card .form-floating > .form-control::placeholder {
  color: transparent;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: #6c7a80;
  font-size: 0.875rem;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(31, 78, 95, 0.2);
}

.login-verse {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: #4d6570;
}

.login-verse span {
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Phones: edge-to-edge-ish card, a bit more photo wash for readability */
@media (max-width: 575.98px) {
  .login-wrap {
    align-items: flex-start;
    padding-top: 0.5rem;
  }

  .login-card {
    padding: 1.5rem 1.25rem;
    border-radius: 1rem;
  }

  .login-title {
    font-size: 1.5rem;
  }
}

/* Browsers without backdrop-filter: make the card more opaque instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-card { background: rgba(255, 255, 255, 0.88); }
}

/* ---------------------------------------------------------------------------
   Brand color for primary buttons: #0e5a6b (teal) instead of Bootstrap blue.
   Covers .btn-primary (solid) and .btn-outline-primary (outlined), including
   hover, pressed, focus ring and disabled states. Bootstrap 5.3 reads these
   --bs-btn-* variables, so no other rules are needed.
   --------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0e5a6b;
    --bs-btn-border-color: #0e5a6b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b4a58;
    --bs-btn-hover-border-color: #0a4552;
    --bs-btn-focus-shadow-rgb: 14, 90, 107;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #093e4a;
    --bs-btn-active-border-color: #083a45;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0e5a6b;
    --bs-btn-disabled-border-color: #0e5a6b;
}

.btn-outline-primary {
    --bs-btn-color: #0e5a6b;
    --bs-btn-border-color: #0e5a6b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0e5a6b;
    --bs-btn-hover-border-color: #0e5a6b;
    --bs-btn-focus-shadow-rgb: 14, 90, 107;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0e5a6b;
    --bs-btn-active-border-color: #0e5a6b;
    --bs-btn-disabled-color: #0e5a6b;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0e5a6b;
}

/* ------------------------------------------------------------------
   Printing (e.g. the Dashboard's Print button): just the page content,
   on plain white — no menu, footer, background photo or buttons.
   ------------------------------------------------------------------ */
.print-only {
  display: none;
}

@media print {
  header,
  footer,
  .no-print,
  #idle-warning {
    display: none !important;
  }

  .print-only {
    display: inline;
  }

  body {
    margin-bottom: 0;
    background: #fff !important;
  }

  body::before {
    display: none !important;
  }

  body:not(.login-page) main {
    background: #fff;
    box-shadow: none;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .container {
    max-width: none;
  }
}

/* ------------------------------------------------------------------
   Dashboard (Group Leaders/Admins): number tiles and simple bar charts.
   Global rather than scoped CSS because the tiles are tag-helper links.
   ------------------------------------------------------------------ */

.dash-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  background-color: #fff;
  color: inherit;
  text-decoration: none;
}

a.dash-tile:hover,
a.dash-tile:focus-visible {
  border-color: #0e5a6b;
  box-shadow: 0 0.25rem 0.75rem rgba(14, 90, 107, 0.12);
}

.dash-tile-alert {
  border-color: #f1aeb5;
  background-color: #fff5f6;
}

.dash-num {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  color: #0d4f63;
}

.dash-tile-alert .dash-num {
  color: #b02a37;
}

.dash-label {
  font-size: 0.875rem;
  line-height: 1.25;
}

.dash-sub {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: #6c757d;
}

.dash-praise blockquote {
  padding-left: 0.75rem;
  border-left: 3px solid #9ec5d0;
  font-style: italic;
  white-space: pre-line;
}

/* Bars: width is set inline as a % of the largest value in the table. */
.dash-bar {
  display: inline-block;
  height: 0.7rem;
  min-width: 2px;
  max-width: calc(100% - 2.5rem);
  margin-right: 0.35rem;
  border-radius: 0.2rem;
  vertical-align: middle;
  background-color: #0e5a6b;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.dash-bar-ans {
  background-color: #e0a466;
}

.dash-key {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.15rem;
  vertical-align: middle;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.dash-key-sub { background-color: #0e5a6b; }
.dash-key-ans { background-color: #e0a466; }

.dash-bars td {
  font-variant-numeric: tabular-nums;
}

/* The "waiting 3 days" / "last login …" note on the right of each list row. */
.dash-when {
  flex-shrink: 0;
  max-width: 45%;
  text-align: right;
}

@media print {
  .dash-section {
      break-inside: auto;
  }

  .dash-tile,
  .list-group-item,
  .dash-bars tr {
      break-inside: avoid;
  }

  .dash-tile {
      padding: 0.4rem 0.6rem;
  }

  .dash-num {
      font-size: 1.3rem;
  }

  /* Paper is narrower than Bootstrap's md breakpoint: keep the wide layout anyway. */
  .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
  .dash-section .col-md-6 { flex: 0 0 auto; width: 50%; }

  .dash-section a {
      color: inherit !important;
      text-decoration: none !important;
  }
}