/* The staff console's own components. Tokens and the framework overrides live
   in `theme.css`; this file is only the handful of things that exist just
   here - the chrome, the attention tiles, the weekly grid and the audit
   trail. */

/* --- the chrome ---------------------------------------------------------- */
/* Dark, and deliberately so. Staff live in this screen; a dark bar frames the
   white data surface underneath, and it is the fastest way to tell the
   console apart from the doctor portal, which is light. */

.console-nav {
  background: var(--clinic-chrome);
  border-bottom: 1px solid var(--clinic-chrome);
  padding-top: .5rem;
  padding-bottom: .5rem;
  box-shadow: 0 1px 0 rgba(16, 43, 61, .08);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.console-nav .navbar-brand {
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.005em;
  padding-right: 1.25rem;
  margin-right: .75rem;
  border-right: 1px solid var(--clinic-chrome-line);
}
.console-nav .navbar-nav { gap: .125rem; }
.console-nav .nav-link {
  color: var(--clinic-chrome-text);
  font-size: .875rem;
  padding: .375rem .625rem;
  border-radius: var(--clinic-radius-sm);
}
.console-nav .nav-link:hover,
.console-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .08); }
.console-nav .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
.console-nav .navbar-toggler {
  border-color: var(--clinic-chrome-line);
  padding: .3rem .5rem;
}
.console-nav-user {
  color: var(--clinic-chrome-text);
  font-size: .8125rem;
  white-space: nowrap;
}
/* The two chrome buttons are on a dark bar, so the light outline button from
   `theme.css` would be a white slab. */
.console-nav .btn-outline-secondary {
  --bs-btn-color: #e7eef3;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--clinic-chrome-line);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .1);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .35);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .16);
  --bs-btn-active-border-color: rgba(255, 255, 255, .35);
}
.console-nav .btn:focus-visible { outline-color: #fff; }
@media (max-width: 991.98px) {
  .console-nav .navbar-collapse { padding-top: .5rem; }
  .console-nav .navbar-brand { border-right: 0; }
  .console-nav-account {
    margin-top: .5rem;
    padding-top: .625rem;
    border-top: 1px solid var(--clinic-chrome-line);
  }
}

.console-main { max-width: 108rem; }
.console-footer {
  max-width: 108rem;
  font-size: .8125rem;
  color: var(--clinic-ink-muted);
  padding-top: 1.5rem;
}

/* --- the attention tiles ------------------------------------------------- */
/* Five counts, each a link to the list behind it. The colour is the message:
   a worklist with work in it is amber, everything else is quiet. The old
   version painted every non-zero count red, which made "10 appointments next
   week" - the healthiest number on the page - look like an incident. */

.console-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.console-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  height: 100%;
  padding: 1rem 1.125rem 1.125rem;
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-line);
  border-radius: var(--clinic-radius);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}
.console-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--clinic-line-strong);
}
.console-tile:hover {
  border-color: var(--clinic-line-strong);
  box-shadow: 0 2px 6px rgba(16, 43, 61, .07);
}
.console-tile .tile-count {
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--clinic-ink);
}
.console-tile .tile-label {
  font-weight: 650;
  font-size: .9375rem;
  color: var(--clinic-ink);
}
.console-tile .tile-help {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--clinic-ink-muted);
  margin: .1875rem 0 0;
}

/* Nothing to do: the number recedes so the eye skips it. */
.console-tile.tile-clear::before { background: var(--clinic-line); }
.console-tile.tile-clear .tile-count { color: var(--clinic-ink-faint); }

/* Something to do. Amber, not red - these are jobs, not failures. */
.console-tile.tile-attention::before { background: #c08a1e; }
.console-tile.tile-attention .tile-count { color: var(--clinic-tint-amber-ink); }

/* Two of the five tiles are not worklists at all, they are just how much is
   booked. A count there is normal and must never look like an alarm. */
.console-tile[data-tile="today"].tile-attention::before,
.console-tile[data-tile="upcoming"].tile-attention::before { background: var(--clinic-accent); }
.console-tile[data-tile="today"].tile-attention .tile-count,
.console-tile[data-tile="upcoming"].tile-attention .tile-count { color: var(--clinic-accent); }

/* --- the audit trail ----------------------------------------------------- */

.audit-list { max-height: none; }
.audit-list .list-group-item { padding: .8125rem 1.125rem; }
.audit-event { font-weight: 600; color: var(--clinic-ink); }
.audit-when {
  font-size: .75rem;
  color: var(--clinic-ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.audit-actor { font-size: .8125rem; color: var(--clinic-ink-muted); }
/* The raw event payload. Machine data, so monospace - but a light panel
   rather than a black terminal block: this is a calm clinical console and one
   inverted rectangle per audit row is the loudest thing on the page. */
.audit-payload {
  font-size: .75rem;
  line-height: 1.55;
  background: var(--clinic-raise);
  color: var(--clinic-ink-2);
  border: 1px solid var(--clinic-line);
  border-radius: var(--clinic-radius-sm);
  padding: .625rem .75rem;
  margin: .5rem 0 .25rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* --- an undelivered WhatsApp message ------------------------------------- */
/* This is the text a patient would have read, quoted back. It used to borrow
   `.audit-payload`, which made a friendly sentence about an appointment look
   like a stack trace. It is prose: body font, quoted, in the same left-rail
   treatment as the conversation transcript on the patient page. */
.message-body {
  font-family: var(--bs-font-sans-serif);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--clinic-ink);
  background: var(--clinic-raise);
  border-left: 3px solid var(--clinic-line-strong);
  border-radius: 0 var(--clinic-radius-sm) var(--clinic-radius-sm) 0;
  padding: .625rem .875rem;
  margin: .625rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- the weekly availability grid ---------------------------------------- */
/* One card per day, empty days included so a missing Wednesday is visible
   rather than absent.

   Each window is a three-line block and that is a fix rather than a
   preference: since step 7 every window prints the zone it is written in
   ("13:00 - 16:00 (America/Sao_Paulo)") plus the UTC it is stored as, which
   does not fit beside a `remove` link in an 11rem column. It used to overflow
   the card and clip the link. A screenshot caught that; no test could have.
   The `remove` control now sits on its own row whenever the column is too
   narrow to hold both, so no amount of timezone name can push it out of the
   card or land it in the middle of a sentence. */

.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: .625rem;
}
.week-day {
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-line);
  border-radius: var(--clinic-radius-sm);
  padding: .75rem .8125rem .625rem;
  display: flex;
  flex-direction: column;
}
.week-day.is-empty { background: var(--clinic-raise); border-style: dashed; }
.week-day h3 {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clinic-ink-faint);
  margin-bottom: .5rem;
}
.week-rule { padding: .125rem 0 .375rem; }
.week-rule + .week-rule {
  border-top: 1px solid var(--clinic-line);
  margin-top: .375rem;
  padding-top: .5rem;
}
.week-times {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--clinic-ink);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.week-zone {
  display: block;
  font-weight: 400;
  color: var(--clinic-ink-muted);
  font-size: .75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.week-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .125rem .5rem;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--clinic-ink-muted);
}
/* The basis is what makes this work. When the column is narrow - the console
   lists seven days side by side - 11rem of meta text plus the `remove` link
   cannot both fit, so the link wraps onto its own line, right-aligned, rather
   than being dropped into the middle of "Sun 22:00 - Mon 02:00 UTC". When
   there is room, as in the portal's single column, they stay on one line. */
.week-meta > span { flex: 1 1 11rem; min-width: 0; overflow-wrap: anywhere; }
.week-meta form { flex: none; margin-left: auto; }
.week-remove {
  --bs-btn-font-size: .75rem;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--clinic-danger);
  --bs-btn-hover-color: var(--clinic-danger-dark);
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: .16em;
}
.week-dates { font-size: .75rem; color: var(--clinic-ink-muted); margin-top: .125rem; }
.week-none { font-size: .8125rem; color: var(--clinic-ink-faint); }

/* --- the WhatsApp transcript --------------------------------------------- */

.transcript-in  { border-left: 3px solid var(--clinic-accent); padding-left: .75rem; }
.transcript-out { border-left: 3px solid var(--clinic-line-strong); padding-left: .75rem; }

.char-counter.over { color: var(--clinic-danger); font-weight: 600; }

/* --- HTMX ---------------------------------------------------------------- */
/* Search-as-you-type: HTMX swaps the rows, this shows it is working. */
.htmx-request .htmx-indicator { visibility: visible; }
.htmx-indicator { visibility: hidden; }

/* --- the sign-in page ---------------------------------------------------- */
/* Shared by all three surfaces, so it belongs to neither: light, centred, and
   nothing on it but the one thing you came to do. */

.signin-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--clinic-canvas);
  background-image:
    linear-gradient(0deg, var(--clinic-canvas), var(--clinic-canvas)),
    linear-gradient(180deg, #e8eef3 0, var(--clinic-canvas) 22rem);
  background-blend-mode: normal;
}
.signin-panel { width: 100%; max-width: 24rem; }
/* The 'no role yet' page carries two paragraphs of explanation, not a
   two-field form, and reads badly at 24rem. */
.signin-panel-wide { max-width: 32rem; }
.signin-panel .card { border-radius: .75rem; box-shadow: 0 1px 2px rgba(16, 43, 61, .06); }
.signin-panel .card-body { padding: 1.75rem 1.75rem 1.875rem; }
.signin-title {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.012em;
  color: var(--clinic-ink);
  margin: 0 0 .375rem;
}
.signin-lede {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--clinic-ink-muted);
  margin-bottom: 1.25rem;
}
.signin-panel .form-control { min-height: 2.625rem; }
.signin-foot {
  text-align: center;
  font-size: .8125rem;
  color: var(--clinic-ink-muted);
  margin: 1rem 0 0;
}