/* ==========================================================================
   AquaCert LMS — brand design system
   Clean, professional, trustworthy water-utility palette (deep blue + teal).
   Built on Bootstrap 5; overrides + custom components live here.
   All colors meet WCAG AA contrast for their usage.
   ========================================================================== */

:root {
  /* Brand palette */
  --ac-primary: #0369a1;        /* deep ocean blue — primary actions/links */
  --ac-primary-dark: #075985;   /* hover/active */
  --ac-primary-darker: #0c4a6e;
  --ac-navy: #082f49;           /* dark sections (hero, footer) */
  --ac-navy-2: #0b3a5b;

  --ac-teal: #0d9488;           /* teal accent (decorative) */
  --ac-teal-dark: #0f766e;      /* teal accent for text on white */
  --ac-teal-light: #5eead4;     /* teal accent on dark backgrounds */

  --ac-ink: #0f1b2a;            /* body text */
  --ac-muted: #55677a;          /* secondary text (AA on white) */
  --ac-bg: #f5f8fb;             /* page background */
  --ac-surface: #ffffff;
  --ac-surface-2: #eef4f9;
  --ac-border: #e1e8f0;

  --ac-success: #15803d;
  --ac-warning: #b45309;
  --ac-danger: #b91c1c;

  --ac-shadow-sm: 0 1px 2px rgba(8, 47, 73, .06), 0 1px 3px rgba(8, 47, 73, .08);
  --ac-shadow-md: 0 4px 12px rgba(8, 47, 73, .08), 0 2px 6px rgba(8, 47, 73, .06);
  --ac-shadow-lg: 0 18px 40px rgba(8, 47, 73, .14);
  --ac-radius: .75rem;
  --ac-radius-sm: .5rem;

  /* Map Bootstrap theme variables to the brand */
  --bs-primary: var(--ac-primary);
  --bs-primary-rgb: 3, 105, 161;
  --bs-link-color: var(--ac-primary);
  --bs-link-color-rgb: 3, 105, 161;
  --bs-link-hover-color: var(--ac-primary-dark);
  --bs-body-color: var(--ac-ink);
  --bs-body-bg: var(--ac-bg);
  --bs-border-color: var(--ac-border);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

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

body {
  font-family: var(--bs-body-font-family);
  color: var(--ac-ink);
  background-color: var(--ac-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  color: var(--ac-navy);
  font-weight: 700;
  letter-spacing: -.01em;
}

p { line-height: 1.65; }

a { color: var(--ac-primary); text-decoration: none; }
a:hover { color: var(--ac-primary-dark); text-decoration: underline; }

.text-muted { color: var(--ac-muted) !important; }
.lead { color: #3a4a5a; }

/* Accessible focus ring in brand color */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus,
a:focus-visible, .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(3, 105, 161, .35);
}

/* ---------- Header / navbar ---------- */
.ac-navbar {
  background: var(--ac-surface);
  border-bottom: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-sm);
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.ac-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  color: var(--ac-navy) !important;
  white-space: nowrap;
}
.ac-brand:hover { text-decoration: none; }
.ac-brand .ac-brand-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--ac-primary), var(--ac-teal));
  box-shadow: 0 2px 6px rgba(3, 105, 161, .3);
}
.ac-brand .ac-brand-mark svg { width: 20px; height: 20px; }
.ac-brand .ac-brand-name { color: var(--ac-navy); }
.ac-brand .ac-brand-name .ac-cert { color: var(--ac-primary); }

.ac-navbar .nav-link {
  color: #33475b;
  font-weight: 500;
  padding: .5rem .9rem;
  border-radius: 8px;
  transition: color .12s ease, background-color .12s ease;
}
.ac-navbar .nav-link:hover { color: var(--ac-primary); background: var(--ac-surface-2); text-decoration: none; }
.ac-navbar .nav-link.active { color: var(--ac-primary); background: var(--ac-surface-2); }

/* Login/register/logout on the right */
.ac-navbar .navbar-nav .btn-link.nav-link { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  font-weight: 600;
  border-radius: 10px;
  padding: .55rem 1.15rem;
  transition: transform .04s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--ac-primary);
  --bs-btn-border-color: var(--ac-primary);
  --bs-btn-hover-bg: var(--ac-primary-dark);
  --bs-btn-hover-border-color: var(--ac-primary-dark);
  --bs-btn-active-bg: var(--ac-primary-darker);
  --bs-btn-active-border-color: var(--ac-primary-darker);
  --bs-btn-disabled-bg: var(--ac-primary);
  --bs-btn-disabled-border-color: var(--ac-primary);
  color: #fff;
  background-color: var(--ac-primary);
  border-color: var(--ac-primary);
  box-shadow: 0 2px 6px rgba(3, 105, 161, .25);
}
.btn-primary:hover, .btn-primary:focus {
  color: #fff;
  background-color: var(--ac-primary-dark);
  border-color: var(--ac-primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--ac-primary);
  --bs-btn-border-color: var(--ac-primary);
  --bs-btn-hover-bg: var(--ac-primary);
  --bs-btn-hover-border-color: var(--ac-primary);
  --bs-btn-active-bg: var(--ac-primary-dark);
  color: var(--ac-primary);
  border-color: var(--ac-primary);
}

/* Teal accent button (used on dark hero) */
.btn-accent {
  color: var(--ac-navy);
  background-color: var(--ac-teal-light);
  border: 1px solid var(--ac-teal-light);
  box-shadow: 0 2px 10px rgba(94, 234, 212, .28);
}
.btn-accent:hover { color: var(--ac-navy); background-color: #7af0dd; border-color: #7af0dd; }

.btn-light-outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
}
.btn-light-outline:hover { color: var(--ac-navy); background: #fff; border-color: #fff; }

.btn-success {
  --bs-btn-bg: var(--ac-success);
  --bs-btn-border-color: var(--ac-success);
  --bs-btn-hover-bg: #126b34;
  --bs-btn-hover-border-color: #126b34;
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-surface);
  box-shadow: var(--ac-shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card-title { color: var(--ac-navy); font-weight: 700; }

/* Interactive course cards */
.ac-course-card { overflow: hidden; }
.ac-course-card:hover {
  box-shadow: var(--ac-shadow-md);
  transform: translateY(-3px);
  border-color: #c9d8e6;
}
.ac-course-card .ac-course-top {
  height: 6px;
  background: linear-gradient(90deg, var(--ac-primary), var(--ac-teal));
}
.ac-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ac-navy);
}
.ac-price small { font-size: .8rem; font-weight: 600; color: var(--ac-muted); }

/* ---------- Badges / pills ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .4em .7em; letter-spacing: .01em; }
.ac-badge-approved {
  color: var(--ac-success);
  background: #e7f6ec;
  border: 1px solid #bfe6cc;
}
.ac-badge-pending {
  color: var(--ac-warning);
  background: #fdf3e7;
  border: 1px solid #f4d9b0;
}
.ac-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 999px;
}
.ac-pill-complete { color: var(--ac-success); background: #e7f6ec; border: 1px solid #bfe6cc; }
.ac-pill-progress { color: var(--ac-primary-dark); background: #e6f1f8; border: 1px solid #c3ddef; }
.ac-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Eyebrow / section headings ---------- */
.ac-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .78rem;
  color: var(--ac-teal-dark);
}

/* ---------- Hero ---------- */
.ac-hero {
  position: relative;
  color: #eaf3fa;
  background:
    radial-gradient(1100px 500px at 82% -8%, rgba(13, 148, 136, .38), transparent 60%),
    radial-gradient(900px 480px at 5% 108%, rgba(3, 105, 161, .5), transparent 55%),
    linear-gradient(135deg, var(--ac-navy) 0%, var(--ac-navy-2) 55%, #0c4a6e 100%);
  border-radius: 20px;
  overflow: hidden;
}
.ac-hero::after {
  /* subtle wave at the bottom edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 60px;
  background: var(--ac-bg);
  clip-path: ellipse(75% 100% at 50% 100%);
  opacity: 0;
}
.ac-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.08; }
.ac-hero .ac-eyebrow { color: var(--ac-teal-light); }
.ac-hero p.lead { color: #cfe2f0; }
.ac-hero-trust { color: #b7cfe1; font-size: .9rem; }
.ac-hero-trust svg { color: var(--ac-teal-light); }

/* Panel used on the hero (course spotlight) */
.ac-hero-panel {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  backdrop-filter: blur(2px);
}
.ac-hero-panel .ac-hero-panel-price { color: #fff; }

/* ---------- Feature blocks ---------- */
.ac-feature-icon {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--ac-primary);
  background: var(--ac-surface-2);
  border: 1px solid #d8e6f1;
}
.ac-feature-icon svg { width: 24px; height: 24px; }

.ac-step-num {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(150deg, var(--ac-primary), var(--ac-teal));
}

/* Soft feature/section band */
.ac-band { background: var(--ac-surface); border-top: 1px solid var(--ac-border); border-bottom: 1px solid var(--ac-border); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; color: var(--ac-ink); }
.ac-table-card {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
  overflow: hidden;
}
.ac-table-card .table { margin-bottom: 0; }
.ac-table-card .table thead th {
  background: var(--ac-surface-2);
  color: var(--ac-navy);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ac-border);
  padding: .85rem 1rem;
}
.ac-table-card .table tbody td { padding: .9rem 1rem; vertical-align: middle; border-color: #eef2f6; }
.ac-table-card .table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Progress ---------- */
.progress { background: #e6edf3; border-radius: 999px; height: .55rem; }
.progress-bar { background: linear-gradient(90deg, var(--ac-primary), var(--ac-teal)); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--ac-radius-sm); border: 1px solid transparent; }
.alert-success { color: #0f5132; background: #e7f6ec; border-color: #bfe6cc; }
.alert-warning { color: #7a4c07; background: #fdf3e7; border-color: #f4d9b0; }
.alert-danger  { color: #842029; background: #fbe9e9; border-color: #f2c2c2; }

/* ---------- Forms / auth pages ---------- */
.form-control, .form-select {
  border-radius: 10px;
  border-color: #d5dfe8;
  padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus { border-color: var(--ac-primary); }
.form-floating > label { color: var(--ac-muted); }

/* ---------- Identity auth pages (Login, Register, password reset, etc.) ----------
   Stock ASP.NET Identity markup, restyled purely via the .ac-auth-page body class
   set in Areas/Identity/Pages/Account/_ViewStart.cshtml. No page logic is touched. */
.ac-auth-page main > .container {
  max-width: 480px;
}
.ac-auth-page main h1 {
  text-align: center;
  font-size: 1.7rem;
  margin-bottom: 1.25rem;
}
.ac-auth-page main hr { display: none; }

/* Collapse the default two-column grid into one centered column */
.ac-auth-page main .row { justify-content: center; }
.ac-auth-page main .row > div:first-child {
  flex: 0 0 100%;
  max-width: 100%;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-md);
  padding: 2rem;
}

/* Hide the "Use another service to log in" column — developer boilerplate shown
   only while no external providers are configured. Remove this rule if you add SSO. */
.ac-auth-page main .row > .col-lg-4,
.ac-auth-page main .row > [class*="offset"] { display: none; }

/* The in-card subheading ("Use a local account…", "Create a new account.") is
   redundant with the page's h1 — shrink it to a muted caption. */
.ac-auth-page main .row h2 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ac-muted);
  text-align: center;
  margin-bottom: 1.5rem;
}

.ac-auth-page form { margin-bottom: .25rem; }
.ac-auth-page .form-floating { margin-bottom: 1rem; }
.ac-auth-page [type="submit"].btn { width: 100%; }
.ac-auth-page .checkbox, .ac-auth-page .form-check { margin-bottom: 1rem; }
.ac-auth-page a { font-weight: 500; }

/* ---------- Verification result ---------- */
.ac-verify-banner {
  display: flex; align-items: center; gap: .9rem;
  border-radius: var(--ac-radius);
  padding: 1.1rem 1.25rem;
  font-weight: 600;
}
.ac-verify-valid { color: #0f5132; background: #e7f6ec; border: 1px solid #bfe6cc; }
.ac-verify-invalid { color: #842029; background: #fbe9e9; border: 1px solid #f2c2c2; }
.ac-verify-icon { flex: 0 0 auto; width: 40px; height: 40px; }

/* ---------- Page heading helper ---------- */
.ac-page-head { margin: .5rem 0 1.5rem; }
.ac-page-head h1 { margin-bottom: .35rem; }

/* ---------- Footer ---------- */
.ac-footer {
  flex-shrink: 0;
  background: var(--ac-navy);
  color: #b7cfe1;
  border-top: 4px solid var(--ac-teal);
  margin-top: 3.5rem;
}
.ac-footer a { color: #d7e7f2; }
.ac-footer a:hover { color: #fff; }
.ac-footer .ac-brand-name { color: #fff; }
.ac-footer .ac-footer-mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--ac-primary), var(--ac-teal));
}
.ac-footer .ac-footer-mark svg { width: 18px; height: 18px; }
.ac-footer-heading {
  color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.ac-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); color: #90aec6; font-size: .875rem; }

/* ---------- Legal / policy pages ---------- */
.ac-legal h2 {
  font-size: 1.15rem;
  margin: 2rem 0 .6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ac-border);
}
.ac-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.ac-legal ul { padding-left: 1.2rem; }
.ac-legal li { margin-bottom: .5rem; line-height: 1.6; }
.ac-legal p { color: #2c3a48; }

/* ---------- Utilities ---------- */
.ac-bg-soft { background: var(--ac-surface); }
.ac-shadow { box-shadow: var(--ac-shadow-md); }
.ac-rounded { border-radius: var(--ac-radius); }
.ac-maxw-prose { max-width: 42rem; }


/* ---------------------------------------------------------------------------
   Phone
   The admin was built and only ever looked at on a desktop, where there is enough
   width to hide a layout that does not really work. On a phone the same markup
   left links stacked on top of each other and put form fields past the right edge
   with no way to scroll to them.
   --------------------------------------------------------------------------- */

/* Links that behave like a row of links rather than a paragraph that happens to
   contain them. Tappable targets rather than 14px text a thumb cannot hit. */
.ac-admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ac-admin-nav a {
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid var(--ac-border);
  border-radius: 999px;
  background: var(--ac-surface);
  text-decoration: none;
  font-size: .925rem;
  line-height: 1.2;
}
.ac-admin-nav a:hover { background: var(--ac-surface-2); }

@media (max-width: 575.98px) {
  /* A card that reaches the edges: on a 390px screen, 16px of padding either side
     is 8% of the screen spent on nothing. */
  .card-body { padding: 1rem .85rem; }

  /* Form fields big enough to see and hit.

     form-control-sm is a desktop density: in a narrow column it left a number field
     so small that the digits being typed into it were not visible. And anything under
     16px makes iOS zoom the whole page on focus, which then hides the field you are
     typing into behind the keyboard. 16px is not a style choice here, it is the
     threshold that stops that happening. */
  .form-control, .form-select,
  .form-control-sm, .form-select-sm {
    font-size: 16px;
    padding: .5rem .65rem;
    min-height: 44px;
    line-height: 1.3;
  }

  /* Spinner arrows take a third of the width of a narrow number field and are useless
     on a touch screen, where the keyboard is already numeric. */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

  /* Labels that do not crowd the field they belong to. */
  .form-label, .form-label.small { font-size: .875rem; margin-bottom: .3rem; }

  /* A checkbox is a touch target too. */
  .form-check-input { width: 1.15em; height: 1.15em; margin-top: .15em; }
  .form-check-label { font-size: .95rem; }

  /* Anything genuinely too wide to wrap can at least be reached. Without this a
     control past the right edge is simply unavailable — which is what happened to
     the state approval form. */
  .table-responsive, .ac-scroll-x { -webkit-overflow-scrolling: touch; }

  /* Stat cards two-up instead of one enormous number per screenful. */
  .row-cols-2 > * { padding-left: .4rem; padding-right: .4rem; }

  /* Buttons in a form row should not each be their own line. */
  .btn-sm { padding: .3rem .6rem; }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
}

/* Nothing should push the page itself sideways. A single overflowing element makes
   the whole document scroll, and every other page then feels broken too. */
body { overflow-x: hidden; }

/* DMR Bench (admin-only while it is built). Field-first: big inputs that a thumb can hit, and a worksheet
   that prints as the review sheet. */
.dmr-entry .form-control-lg { font-size: 1.25rem; }
.dmr-sheet td, .dmr-sheet th { vertical-align: middle; }
.dmr-print-only { display: none; }
@media print {
  .dmr-print-hide, nav, header, footer, .navbar { display: none !important; }
  .dmr-print-only { display: block; }
  .dmr-sheet .d-none { display: table-cell !important; }
  body { font-size: 10pt; }
}
.dmr-drop { border: 2px dashed var(--bs-border-color, #ccd); border-radius: .5rem; padding: 1.25rem; text-align: center; cursor: pointer; background: var(--ac-surface-2, #f7f9f8); }
.dmr-drop.is-over { border-color: var(--bs-primary, #0d6efd); background: rgba(13,110,253,.06); }
.dmr-bench-sheet td { height: 1.9rem; min-width: 4.5rem; }
@media print { .dmr-bench-sheet { font-size: 9pt; } @page { size: landscape; } }

/* Water Bench: IEPA's sheets are wide (29 columns on chemical feeding). Small type on screen, smaller in print,
   and the trend charts print as drawn. */
.water-sheet { font-size: .8rem; }
.water-sheet td, .water-sheet th { padding: .15rem .3rem; white-space: nowrap; }
.water-sheet tbody td { height: 1.6rem; }
.trend-svg { max-width: 100%; height: auto; }
@media print { .water-sheet { font-size: 7pt; } .water-sheet td, .water-sheet th { padding: 1px 2px; } .card { border: 0 !important; } }

/* Report Bench print copies and the CCR: paper-shaped on screen, plain on paper. */
.report-print { background: #fff; border: 1px solid #dee2e6; padding: 1.5rem 2rem; }
.report-print table { font-size: .8rem; }
@media print { .report-print { border: 0; padding: 0; } .report-print .h3, .report-print .h4 { page-break-after: avoid; } }