@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  --brand-primary: #1b8a5a;
  --brand-primary-dark: #146b45;
  --brand-accent: #f5a623;
  --brand-bg: #f7f9f8;
  --brand-text: #22303c;
  --brand-border: #d7ded9;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: var(--brand-bg);
  color: var(--brand-text);
}

.brand-header h1 {
  color: var(--brand-primary-dark);
  font-weight: 900;
}

.brand-logo {
max-width: 10vw;
  width: auto;
  flex-shrink: 0;
}

.card {
  border-color: var(--brand-border);
}

.card-header {
  background-color: var(--brand-primary);
  color: #fff;
  font-weight: 700;
}

.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
}

.mode-toggle .btn.active {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-text);
}

/* admin.css's .admin-content .card rule sets overflow:hidden (for
   rounding table/header corners to the card's own radius) — since the
   field form's Step 1 and Step 2 cards now live inside .admin-content too
   (see the header-styling-parity change), that would otherwise clip these
   absolutely-positioned dropdowns before they ever get a chance to show. */
#findCustomerCard,
#customerDetailsCard {
  overflow: visible;
}

#serviceNoResults,
#contractorResults {
  max-height: 220px;
  overflow-y: auto;
  top: 100%;
  z-index: 1000;
  background: var(--admin-surface, #fff);
}
#serviceNoResults:empty,
#contractorResults:empty {
  display: none;
}
#serviceNoResults .list-group-item,
#contractorResults .list-group-item {
  cursor: pointer;
}

.scan-video {
  background: #000;
  max-height: 220px;
  width: 100%;
  object-fit: cover;
}

.scan-preview {
  max-height: 220px;
}

[data-role="item-ready"] {
  font-weight: 700;
}

/* Shared copyright footer (site_footer_html() in config.php) — present on
   every page, field-facing and admin alike, so it's styled here in
   style.css (loaded everywhere) rather than admin.css (admin-only). */
.site-footer {
  text-align: center;
  padding: 1rem 1rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--brand-text);
  opacity: 0.65;
  border-top: 1px solid var(--brand-border);
}
.site-footer a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.site-footer a:hover {
  opacity: 0.85;
}