/* ============================================================
   Get Patient Consent — Clinician Dashboard Styles
   ============================================================ */

/* Alpine.js: hide elements with x-cloak until Alpine has booted.
   Without this rule, modals (which use x-show + x-cloak) flash visible
   on page load and — if Alpine fails to boot — remain visible forever
   as plain inline content because x-show never gets to toggle display. */
[x-cloak] { display: none !important; }

:root {
  --gpc-teal: #0D7377;
  --gpc-teal-light: #e8f5f5;
  --gpc-navy: #1B2A4A;
  --gpc-navy-light: #2d4a7c;
  --gpc-amber: #D4943A;
  --gpc-amber-light: #fff3e0;
  --gpc-green: #198754;
  --gpc-green-light: #e8f5e9;
  --gpc-red: #dc3545;
  --gpc-red-light: #fce4ec;
  --gpc-blue: #0d6efd;
  --gpc-blue-light: #e3f2fd;
  --gpc-grey-50: #f8f9fa;
  --gpc-grey-100: #f1f3f5;
  --gpc-grey-200: #e9ecef;
  --gpc-grey-600: #6c757d;
  --gpc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --gpc-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --gpc-radius: 0.5rem;
}

body {
  background-color: var(--gpc-grey-50);
  color: var(--gpc-navy);
  /* Sticky footer: on short pages <main> grows to fill the viewport so the
     footer sits at the bottom instead of floating mid-page; on tall pages it
     just flows after the content. NOT position:fixed — long pages unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}

/* ── Pill-group rounding fix (Alpine x-for) ─────────────────
   Alpine's <template x-for> stays in the DOM as the FIRST child of the
   .btn-group, so Bootstrap's :first-child / adjacent-sibling rounding
   selectors treat the first real button as a middle one and square off
   its outer (left) edge. A single-button group (e.g. a BILATERAL "Both"
   pill) is hit the same way. Round the actual first and last BUTTON
   elements instead — :first-of-type / :last-of-type ignore the
   non-button <template> node, so this is correct for one, two, or more
   buttons. The doubled `.btn.btn` lifts specificity above Bootstrap's
   `.btn-group > :not(.btn-check) + .btn` rule so it actually wins. */
.btn-group > .btn.btn:first-of-type {
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
.btn-group > .btn.btn:last-of-type {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
.btn-group-sm > .btn.btn:first-of-type {
  border-top-left-radius: var(--bs-border-radius-sm);
  border-bottom-left-radius: var(--bs-border-radius-sm);
}
.btn-group-sm > .btn.btn:last-of-type {
  border-top-right-radius: var(--bs-border-radius-sm);
  border-bottom-right-radius: var(--bs-border-radius-sm);
}

/* ── Navbar ─────────────────────────────────────────────── */

.navbar-dark {
  background: linear-gradient(135deg, var(--gpc-navy) 0%, var(--gpc-navy-light) 100%) !important;
  box-shadow: var(--gpc-shadow);
}

.navbar-dark .navbar-brand {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.navbar-dark .nav-link {
  padding: 0.5rem 0.85rem;
  border-radius: var(--gpc-radius);
  transition: background-color 0.15s ease;
}

.navbar-dark .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15);
  font-weight: 500;
}

/* ── Cards — global overrides ───────────────────────────── */

.card {
  border: none;
  border-radius: var(--gpc-radius);
  box-shadow: var(--gpc-shadow-sm);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--gpc-shadow);
}

.card-header {
  background-color: var(--gpc-grey-50);
  border-bottom: 1px solid var(--gpc-grey-200);
  font-weight: 600;
  padding: 0.75rem 1rem;
}

/* ── Stat cards ─────────────────────────────────────────── */

.stat-card {
  border-left: 4px solid var(--gpc-teal);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.06;
}

.stat-card-drafts        { border-left-color: var(--gpc-grey-600); }
.stat-card-drafts::after  { background-color: var(--gpc-grey-600); }

.stat-card-needs-date        { border-left-color: var(--gpc-blue); }
.stat-card-needs-date::after  { background-color: var(--gpc-blue); }

.stat-card-questions        { border-left-color: var(--gpc-amber); }
.stat-card-questions::after  { background-color: var(--gpc-amber); }

.stat-card-signed        { border-left-color: var(--gpc-green); }
.stat-card-signed::after  { background-color: var(--gpc-green); }

.stat-card .card-body {
  padding: 1.25rem;
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--gpc-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.stat-card .stat-icon-drafts   { background: var(--gpc-grey-100); color: var(--gpc-grey-600); }
.stat-card .stat-icon-needs-date { background: var(--gpc-blue-light); color: var(--gpc-blue); }
.stat-card .stat-icon-questions { background: var(--gpc-amber-light); color: var(--gpc-amber); }
.stat-card .stat-icon-signed   { background: var(--gpc-green-light); color: var(--gpc-green); }

.stat-card .stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gpc-navy);
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: 0.8rem;
  color: var(--gpc-grey-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Whole-tile link: each stat card is wrapped in an anchor so the entire
   card is the tap target (not just a small link), with a clear hover lift
   and a keyboard focus ring. */
.stat-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.stat-card-link .stat-card {
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stat-card-link:hover .stat-card {
  box-shadow: var(--gpc-shadow);
  transform: translateY(-2px);
}
.stat-card-link:focus-visible {
  outline: 2px solid var(--gpc-teal);
  outline-offset: 2px;
  border-radius: var(--gpc-radius);
}

/* ── Status badges ──────────────────────────────────────── */

.badge-draft      { background-color: var(--gpc-grey-600); }
.badge-sent       { background-color: var(--gpc-blue); }
.badge-opened     { background-color: #0dcaf0; color: #000; }
.badge-in-progress { background-color: var(--gpc-amber); color: #000; }
.badge-questions-open { background-color: #ffc107; color: #000; }
.badge-ready-to-sign  { background-color: var(--gpc-teal); }
.badge-signed     { background-color: var(--gpc-green); }
.badge-confirmed  { background-color: var(--gpc-teal); }
.badge-expired    { background-color: var(--gpc-red); }
.badge-withdrawn  { background-color: var(--gpc-grey-600); }
.badge-not-performed { background-color: #495057; }

/* ── Tables ─────────────────────────────────────────────── */

.table {
  margin-bottom: 0;
}

.table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gpc-grey-600);
  font-weight: 600;
  border-bottom-width: 1px;
}

.table-hover tbody tr {
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.table-hover tbody tr:hover {
  background-color: var(--gpc-teal-light);
}

/* ── Dashboard welcome ──────────────────────────────────── */

.welcome-heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gpc-navy);
}

.welcome-subtext {
  font-size: 0.9rem;
  color: var(--gpc-grey-600);
}

/* ── Page heading bar ───────────────────────────────────── */

.page-heading {
  margin-bottom: 1.5rem;
}

.page-heading h3 {
  font-weight: 600;
  color: var(--gpc-navy);
  margin-bottom: 0;
}

/* ── Quick actions ──────────────────────────────────────── */

.btn-primary {
  background-color: var(--gpc-teal);
  border-color: var(--gpc-teal);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #0a5d60;
  border-color: #0a5d60;
}

.btn-outline-primary {
  color: var(--gpc-teal);
  border-color: var(--gpc-teal);
}

.btn-outline-primary:hover {
  background-color: var(--gpc-teal);
  border-color: var(--gpc-teal);
}

/* ── HTMX loading indicators ───────────────────────────── */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request.htmx-indicator {
  display: inline-block;
}

/* ── Question cards ─────────────────────────────────────── */

.question-urgent {
  border-left: 4px solid var(--gpc-red);
}

.question-open {
  border-left: 4px solid var(--gpc-amber);
}

/* ── Consent detail page ────────────────────────────────── */

.consent-timeline .list-group-item {
  border-left: 3px solid var(--gpc-grey-200);
  position: relative;
}

.consent-timeline .list-group-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--gpc-grey-200);
  border: 2px solid white;
}

.consent-timeline .list-group-item-success {
  border-left-color: var(--gpc-green);
}

.consent-timeline .list-group-item-success::before {
  background-color: var(--gpc-green);
}

/* Progress bars — thinner, branded */
.progress {
  height: 6px;
  border-radius: 3px;
  background-color: var(--gpc-grey-200);
}

.progress-bar {
  border-radius: 3px;
}

.progress-bar.bg-success { background-color: var(--gpc-green) !important; }
.progress-bar.bg-info    { background-color: var(--gpc-teal) !important; }
.progress-bar.bg-warning { background-color: var(--gpc-amber) !important; }

/* ── Filter bar ─────────────────────────────────────────── */

.filter-bar {
  background: white;
  border-radius: var(--gpc-radius);
  box-shadow: var(--gpc-shadow-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.filter-bar .form-select,
.filter-bar .form-control {
  border-color: var(--gpc-grey-200);
}

.filter-bar .form-select:focus,
.filter-bar .form-control:focus {
  border-color: var(--gpc-teal);
  box-shadow: 0 0 0 0.2rem rgba(13, 115, 119, 0.15);
}

/* ── Breadcrumbs ────────────────────────────────────────── */

.breadcrumb {
  background: none;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.breadcrumb-item a {
  color: var(--gpc-teal);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* ── Empty states ───────────────────────────────────────── */

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--gpc-grey-600);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
}

.empty-state p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* ── Modals (custom, no Bootstrap JS) ───────────────────── */
/* Lightweight overlay used by Alpine-driven modals. We restate the
 * flex rules on .modal-header / .modal-footer because Bootstrap's
 * defaults rely on CSS variables only set inside .modal scope. */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}

.modal-dialog-custom {
  width: 100%;
  max-width: 560px;
  background: transparent;
}

.modal-dialog-custom .modal-content {
  background: #fff;
  border-radius: var(--gpc-radius);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
  /* Cap the dialog to the viewport and lay it out as a column so a tall
     form (e.g. the new-patient modal) never overflows off-screen: the body
     scrolls while the header + footer stay pinned. Without this the modal
     grew past the screen on mobile with no way to reach the lower fields or
     the footer buttons. The 2rem allows for the overlay's 1rem padding
     top + bottom. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

.modal-dialog-custom .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--gpc-grey-200);
  flex: 0 0 auto; /* pinned — only the body scrolls */
}

.modal-dialog-custom .modal-header .modal-title {
  margin: 0;
  flex: 1 1 auto;
}

.modal-dialog-custom .modal-header .btn-close {
  flex: 0 0 auto;
  margin: 0;
}

.modal-dialog-custom .modal-body {
  padding: 1.25rem;
  overflow-y: auto; /* the one scrollable region when content is tall */
  flex: 1 1 auto;
}

.modal-dialog-custom .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--gpc-grey-200);
  flex: 0 0 auto; /* pinned — action buttons always reachable */
  flex-wrap: wrap; /* buttons wrap rather than overflow on narrow screens */
}

/* Modals on wider screens — give important ones more room */
.modal-dialog-custom.modal-lg {
  max-width: 800px;
}

/* ── Responsive tweaks ──────────────────────────────────── */

@media (max-width: 768px) {
  .stat-card .stat-number {
    font-size: 1.5rem;
  }

  main.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Give modals the full small screen: trim the overlay gutter and let the
     dialog use almost the whole viewport, so multi-field forms have room to
     scroll rather than being squeezed. */
  .modal-overlay {
    padding: 0.5rem;
    align-items: flex-start;
  }

  .modal-dialog-custom .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .modal-dialog-custom .modal-body {
    padding: 1rem;
  }
}

/* Live-update flash - applied by the SSE bootstraps after swapping
   freshly fetched content into the page (questions card on the
   dashboard consent detail, question threads on the patient side),
   so the eye is drawn to what just changed. */
.gpc-live-flash {
  animation: gpc-live-flash 1.8s ease-out;
}
@keyframes gpc-live-flash {
  0%   { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}

/* Deep-link / jump highlight — flashes a single question card when the
   clinician follows a "Answer this question" email link (#q-<id>) or
   clicks the QUESTIONS OPEN status pill. Longer + amber so it reads as
   "here it is" rather than "this just changed" (that's gpc-live-flash). */
.question-flash {
  animation: question-flash 2.6s ease-out;
}
@keyframes question-flash {
  0%, 12% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.65); background-color: rgba(255, 193, 7, 0.14); }
  100%    { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);    background-color: transparent; }
}

/* ── Withdrawn consent ──────────────────────────────────────
   A consent retracted before signing. The whole detail body is greyed,
   stamped with a repeating WITHDRAWN watermark, and made non-interactive
   so it reads unmistakably as a dead record and nothing inside can be
   clicked or edited. The action bar and read-only notice sit outside this
   wrapper and stay live. */
.consent-dead {
  position: relative;
  filter: grayscale(0.9);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}
.consent-dead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-repeat: repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160'%3E%3Ctext x='20' y='95' transform='rotate(-22 160 80)' fill='%23dc3545' fill-opacity='0.16' font-family='Helvetica,Arial,sans-serif' font-size='30' font-weight='700' letter-spacing='2'%3EWITHDRAWN%3C/text%3E%3C/svg%3E");
}

/* ── App footer ─────────────────────────────────────────────────────
   Mirrors the marketing site footer (website/css/style.css .site-footer)
   so the app and website share a consistent footer. Used via
   partials/app-footer.eta in the clinician layout. */
.app-footer {
  background-color: #151E34;
  color: rgba(255, 255, 255, 0.6);
  padding: 2.5rem 0 1.75rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.app-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.app-footer a:hover { color: #ffffff; text-decoration: underline; }
.app-footer .app-footer-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 0.4rem;
}

/* "New from library" clinical item — subtle amber ring so the addition draws
   the eye at the point of use (procedure-library-updates.md). */
.pl-new-item { border-radius: .375rem; box-shadow: 0 0 0 2px var(--bs-warning, #ffc107); }