/* Admin bar shown at the top of every /admin/* page */
#admin-bar {
  position: relative;
  background: #1f1f1f;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  z-index: 2000;
}
#admin-bar .admin-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#admin-bar .admin-bar-brand {
  font-weight: bold;
  color: #f1c40f;
  margin-right: auto;
}
#admin-bar .admin-btn {
  background: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
#admin-bar .admin-btn:hover { background: #444; color: #fff; text-decoration: none; }
#admin-bar .admin-btn-active { background: #f1c40f; color: #1f1f1f; border-color: #f1c40f; }
#admin-bar .admin-btn-muted { background: transparent; }

/* Small "Staff login" / "Admin panel" link in the public site footer -------- */
.site-footer-admin-link { color: inherit; opacity: 0.6; text-decoration: underline; }
.site-footer-admin-link:hover { opacity: 1; }

/* Admin login page ---------------------------------------------------------- */
.admin-login-body {
  background: #1f1f1f;
  min-height: 100vh; /* min- instead of a fixed height so a mobile keyboard
                         pushing the viewport doesn't clip the form */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 15px; /* breathing room when the card wraps to full width */
  font-family: Arial, sans-serif;
}
.admin-login-card {
  background: #fff;
  padding: 30px;
  border-radius: 6px;
  width: 340px;
  max-width: 100%; /* prevents horizontal overflow on phones narrower than 340px */
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.admin-login-card h3 { margin-top: 0; font-size: 18px; margin-bottom: 20px; }
.admin-login-back { text-align: center; margin-top: 15px; margin-bottom: 0; }
.admin-btn-link-style {
  background: none; border: none; padding: 0; color: #777;
  text-decoration: underline; font-size: 13px; cursor: pointer;
}
.admin-btn-link-style:hover { color: #333; }

/* Shared admin page chrome (leads / users / content / services) -------------
   A light gray page background (instead of plain white) so the white
   content-section cards actually stand out, plus tighter spacing overall
   so pages read shorter and less like one long scroll. */
body {
  background: #f2f3f5;
}
.admin-page { padding: 20px 15px 40px; font-family: Arial, sans-serif; }
.admin-page h2 { margin-top: 0; margin-bottom: 4px; font-size: 22px; }
.admin-page > .text-muted { margin-bottom: 18px; }
.admin-only-control { margin: 16px 0; }

/* Leads ----------------------------------------------------------------------- */
.lead-counts { margin: 15px 0; }
.lead-count-pill {
  display: inline-block;
  background: #eee;
  border-radius: 20px;
  padding: 4px 14px;
  margin-right: 8px;
  font-size: 13px;
}
.lead-filters { margin-bottom: 20px; }
.lead-filters .form-control { margin-right: 8px; margin-bottom: 8px; }
.lead-table { font-size: 13px; }
.lead-status-btn { min-width: 78px; }
.lead-message { max-width: 260px; white-space: normal !important; word-break: break-word; }
.lead-notes-form textarea {
  width: 160px;
  height: 60px !important;
  max-height: 60px;
  resize: none !important;
  overflow-y: auto;
  word-break: break-word;
  margin-bottom: 4px;
}

/* Users ------------------------------------------------------------------------ */
.add-user-panel { margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; }
.add-user-panel summary { list-style: none; cursor: pointer; }
.add-user-panel summary::-webkit-details-marker { display: none; }
.add-user-form-wrap { margin-top: 15px; padding: 20px; background: #fafafa; border: 1px solid #eee; border-radius: 4px; }
.add-user-hint { margin-top: 0; margin-bottom: 15px; font-size: 13px; }
.add-user-submit { display: flex; align-items: flex-end; }
.reset-password-form input { width: 140px; margin-right: 6px; }

/* Admin settings hub (/admin/settings) ------------------------------------------ */
.settings-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.settings-card {
  display: block;
  width: 200px;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 25px 15px;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.settings-card:hover { border-color: #f1c40f; text-decoration: none; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.settings-card i { font-size: 26px; margin-bottom: 10px; display: block; color: #f1c40f; }

/* Content editor (/admin/content) ---------------------------------------------- */
/* Site Content is a hub (settings-grid, styled below) linking to four
   category sub-pages (content-basics/homepage/contact/footer.ejs), each with
   this small "back to hub" link above its <h2>. */
.content-subpage-back { margin-bottom: 6px; }
.content-subpage-back a { font-size: 13px; color: #777; text-decoration: none; }
.content-subpage-back a:hover { color: #333; text-decoration: underline; }
.content-section {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.content-section h4 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  font-size: 15px;
  border-bottom: 1px solid #f0f0f0;
}
.content-section .form-group { margin-bottom: 10px; }
.content-section .form-group label { font-weight: bold; font-size: 13px; margin-bottom: 3px; }
.content-section textarea.form-control { resize: vertical; }
.hero-image-preview {
  max-width: 260px;
  display: block;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.hero-image-form { margin-top: 6px; }
.hero-image-form input[type="file"] { margin-right: 8px; }

.banner-blur-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.banner-blur-form label { font-weight: bold; font-size: 13px; margin: 0; }
.banner-blur-form input[type="range"] { width: 200px; }

.brand-color-input {
  width: 60px;
  height: 38px;
  padding: 2px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

/* Services manager (/admin/services) -------------------------------------------- */
.service-admin-card {
  position: relative;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 15px 15px 15px 40px;
  margin-bottom: 12px;
}
.service-drag-handle {
  position: absolute;
  top: 15px;
  left: 12px;
  cursor: grab;
  color: #999;
}
.service-admin-form label { font-weight: bold; font-size: 12px; margin-top: 8px; margin-bottom: 2px; display: block; }
.service-icon-preview { font-size: 22px; margin-top: 8px; color: #555; }
.service-admin-actions { margin-top: 10px; }
.service-admin-delete { position: absolute; top: 12px; right: 12px; }
.sortable-ghost { opacity: 0.4; }

/* Trix WYSIWYG editor — originally just the "Details" field on
   /admin/services, now also reused as-is for the Privacy policy field on
   /admin/content/footer (same look is wanted in both places, so the class
   name stuck rather than being renamed generic). Just enough overrides to
   match Bootstrap's .form-control look instead of Trix's own default frame,
   so it doesn't look like a foreign widget dropped into the form. */
.details-trix-editor {
  min-height: 150px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  background: #fff;
}
.details-trix-editor:focus {
  border-color: var(--primary-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--form-shadow, rgba(0, 0, 0, 0.1));
}
trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: #f7f7f7;
}
trix-toolbar + .details-trix-editor {
  border-radius: 0 0 4px 4px;
}

/* Spam & blacklist (/admin/spam) ------------------------------------------- */
.spam-add-form { margin-bottom: 16px; }
.spam-add-form .form-control { margin-right: 8px; margin-bottom: 8px; }
.spam-add-form select[name="type"] { width: 140px; }
.spam-add-form input[name="value"] { width: 220px; }
.spam-add-form input[name="reason"] { width: 260px; }
.spam-value { font-family: monospace; font-size: 12px; }
.spam-type-label {
  background: #eee;
  color: #555;
  text-transform: uppercase;
  font-weight: normal;
}
.spam-type-fingerprint { background: #fdf1d6; color: #8a6c1a; }
.spam-reason-label {
  background: #eee;
  color: #555;
  text-transform: capitalize;
  font-weight: normal;
}
.spam-log-heading { display: flex; align-items: center; justify-content: space-between; }
.spam-log-heading form { margin: 0; }
.spam-log-block-form { display: inline-block; margin-right: 4px; }
.spam-fingerprint-note { margin-top: 14px; margin-bottom: 0; font-size: 12px; }
.spam-fingerprint-note i { margin-right: 4px; }

/* Blocked-identifiers search + pagination — sits between the "add" form and
   the table itself, so it's a separate row from .spam-add-form above. */
.spam-search-form { margin-bottom: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.spam-search-form .form-control { margin-right: 8px; margin-bottom: 8px; }
.spam-search-form input[name="q"] { width: 260px; }
.spam-search-form select[name="pageSize"] { width: 130px; }
.spam-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
}
.spam-pagination-controls { display: flex; align-items: center; gap: 8px; }

/* Leads table (/admin/leads) — IP/FP columns + the "Blacklist" action
   button (blocks the IP + fingerprint, then deletes the lead, in one
   click) alongside plain delete. */
.lead-ip { font-family: monospace; font-size: 12px; white-space: nowrap; }
.lead-blacklist-form,
.lead-delete-form { display: inline-block; margin-right: 4px; }

/* Mobile ------------------------------------------------------------------
   The leads and users tables have too many columns to fit a phone screen —
   both are wrapped in Bootstrap's .table-responsive in their views, which
   scopes horizontal scrolling to just the table instead of the whole page.
   Below is everything else that needed a mobile-specific tweak. */
@media (max-width: 767px) {
  /* iOS Safari auto-zooms the page when a focused input's font-size is
     under 16px. Bootstrap 3's .form-control defaults to 14px, so every
     admin form (login, leads notes, content editor, add-user, etc.)
     would trigger that zoom on tap without this override. */
  .form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px;
  }

  /* Nav buttons get tight on narrow screens — tighten padding/gaps a bit
     so more of them fit per row before wrapping. */
  #admin-bar .admin-bar-inner { gap: 6px; padding: 8px 10px; }
  #admin-bar .admin-btn { padding: 5px 8px; font-size: 11px; }

  .admin-page { padding: 15px 10px 30px; }
  .settings-grid { justify-content: center; }
}