/* =========================
   Coverage Board — base
   ========================= */
#coverage-board {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
  color: #111827;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#coverage-board h1 { font-size: 22px; margin: 0 0 16px; }

/* blocks */
#coverage-board .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
#coverage-board .pad { padding: 14px; }
#coverage-board .toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
#coverage-board .row {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
#coverage-board .right { margin-left: auto; }
#coverage-board .tiny { font-size: 12px; color: #6b7280; }
#coverage-board .muted { color: #6b7280; }

/* inputs & buttons */
#coverage-board label { font-weight: 600; color: #374151; }
#coverage-board input[type="text"],
#coverage-board select,
#coverage-board textarea {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; min-height: 36px; background: #fff;
}
#coverage-board textarea { width: 100%; min-height: 90px; resize: vertical; }
#coverage-board button {
  border: 0; border-radius: 10px; background: #6366f1; color: #fff; padding: 10px 14px; cursor: pointer; font-weight: 600;
}
#coverage-board button.ghost { background: #fff; color: #111827; border: 1px solid #e5e7eb; }
#coverage-board button[disabled] { opacity:.55; cursor:not-allowed; }

/* grid */
#coverage-board .board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}

/* pills/badges (base) */
#coverage-board .pill, #coverage-board .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
}

/* empty/footer */
#coverage-board .empty { padding: 30px; text-align: center; color: #6b7280; }
#coverage-board .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* =========================
   Mobile-only reset (scoped)
   ========================= */
@media (max-width: 900px) {
  html, body.coverage-page { background: #f8fafc !important; overflow-x: hidden !important; }
  body.coverage-page *, body.coverage-page *::before, body.coverage-page *::after {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    background-image: none !important;
  }

  .coverage-page #websitecontainer,
  .coverage-page #rightsidepagecontainer,
  .coverage-page #content,
  .coverage-page .page,
  .coverage-page .app-frame {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    background: #f8fafc !important;
  }
  .coverage-page #websitecontainer::before,
  .coverage-page #websitecontainer::after,
  .coverage-page #rightsidepagecontainer::before,
  .coverage-page #rightsidepagecontainer::after { content: none !important; display: none !important; }

  .coverage-page #sidebar { display: none !important; }
  .coverage-page #navbarimg img { max-width: 140px; height: auto; }
  .coverage-page #navbarbttns { gap: 8px; }

  #coverage-board .board { grid-template-columns: 1fr; }
  #coverage-board .row { gap: 8px; }
}

/* =========================
   Status colors (CSS-only, no JS changes needed)
   We target a wide set of class/attribute names so it "just works"
   with your existing markup.
   ========================= */

/* --- Accepted (green) --- */
#coverage-board .accepted,
#coverage-board .status-accepted,
#coverage-board .is-accepted,
#coverage-board [data-status="accepted"],
#coverage-board [data-accepted="true"],
#coverage-board .pill.accepted,
#coverage-board .badge.accepted {
  background-color: rgba(16,185,129,0.12) !important; /* green */
  border-color: rgba(16,185,129,0.45) !important;
  color: #065f46 !important;
}

/* Make the WHOLE card stand out if any accepted marker exists inside it */
#coverage-board .appt:has(.accepted),
#coverage-board .appt:has([data-status="accepted"]),
#coverage-board .card:has(.accepted),
#coverage-board .card:has([data-status="accepted"]) {
  background-color: rgba(16,185,129,0.06) !important;
  border-left: 4px solid #10b981 !important;
  border-color: rgba(16,185,129,0.35) !important;
}

/* --- “This week / current week” (amber) --- */
#coverage-board .week,
#coverage-board .this-week,
#coverage-board .status-week,
#coverage-board [data-week="current"],
#coverage-board [data-this-week="true"],
#coverage-board .pill.week,
#coverage-board .badge.week,
#coverage-board .pill.this-week,
#coverage-board .badge.this-week {
  background-color: rgba(245,158,11,0.14) !important; /* amber */
  border-color: rgba(245,158,11,0.5) !important;
  color: #7c2d12 !important;
}

/* Whole card accent when week marker is present */
#coverage-board .appt:has(.week),
#coverage-board .appt:has(.this-week),
#coverage-board .appt:has([data-week="current"]),
#coverage-board .appt:has([data-this-week="true"]),
#coverage-board .card:has(.week),
#coverage-board .card:has(.this-week),
#coverage-board .card:has([data-week="current"]),
#coverage-board .card:has([data-this-week="true"]) {
  background-color: rgba(245,158,11,0.08) !important;
  border-left: 4px solid #f59e0b !important;
  border-color: rgba(245,158,11,0.45) !important;
}

/* --- Fallback for older browsers without :has() ---
   If your cards already carry classes, these ensure accents even without :has() */
#coverage-board .appt.accepted,
#coverage-board .card.accepted { border-left: 4px solid #10b981 !important; }
#coverage-board .appt.this-week,
#coverage-board .card.this-week,
#coverage-board .appt.week,
#coverage-board .card.week { border-left: 4px solid #f59e0b !important; }

/* Keep your original outline helpers if you had them */
#coverage-board .hl-green { outline: 2px solid rgba(16,185,129,.2); }
#coverage-board .hl-yellow { outline: 2px solid rgba(245,158,11,.2); }