/* ===========================================================================
   The clinic theme.

   ONE file, loaded after `vendor/bootstrap.min.css` and before the two
   surface stylesheets. It contains no layout of its own: Bootstrap 5.3 is
   still the grid, the components and the JavaScript behaviour. What this does
   is re-point Bootstrap's own custom properties at a deliberate palette and
   type scale, and then restyle the dozen components this product actually
   uses so they read as designed rather than as defaults.

   Why a theme and not a rewrite: the Bootstrap class names are load-bearing
   in places that are NOT templates - `apps/common/forms.py` puts
   `form-control` on every widget, and `bootstrap.bundle.min.js` drives the
   console's navbar collapse and the message dismiss buttons off `.collapse`
   and `.alert`. Swapping the framework would mean editing form code and
   re-implementing behaviour, which is exactly the accidental drift a restyle
   must not risk. Everything below is appearance.

   Delete this file and the two surface stylesheets and the product returns to
   stock Bootstrap, working identically.
   =========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
  /* Ink. Four steps, all of them AA against both white and the page canvas -
     including the smallest, because the muted text on this site carries
     meaning (it is where the timezone labels live). */
  --clinic-ink:        #14212e;
  --clinic-ink-2:      #3d4d5c;
  --clinic-ink-muted:  #566575;   /* 5.98:1 on white, 5.46:1 on canvas */
  --clinic-ink-faint:  #5f6e7d;   /* 5.23:1 on white - labels only        */

  /* Surfaces */
  --clinic-canvas:     #f2f5f8;
  --clinic-surface:    #ffffff;
  --clinic-raise:      #f7f9fb;
  --clinic-hover:      #f1f5f8;
  --clinic-line:       #dde3e9;
  --clinic-line-strong:#c6cfd8;

  /* The one accent: a desaturated clinical teal-blue. 7.18:1 on white. */
  --clinic-accent:      #0e5f78;
  --clinic-accent-dark: #0a4a5e;
  --clinic-accent-tint: #e2edf2;
  --clinic-accent-line: #bcd6e1;

  /* The console's chrome. Dark on purpose: staff work in the console all day
     and the dark bar frames the white data surface, and it also tells you at
     a glance that you are NOT in the doctor portal, which is light. */
  --clinic-chrome:      #102b3d;
  --clinic-chrome-line: #244358;
  --clinic-chrome-text: #c3d2dc;

  /* Semantic. Muted rather than saturated - this is a medical practice. */
  --clinic-danger:      #a4262c;
  --clinic-danger-dark: #8a1f24;
  --clinic-success:     #14603f;
  --clinic-amber:       #7a4b00;

  /* Status tints. Each is a background/ink/border triple, every pair >= 6:1. */
  --clinic-tint-neutral-bg:  #eceff3;
  --clinic-tint-neutral-ink: #41505f;
  --clinic-tint-neutral-line:#d5dce3;
  --clinic-tint-amber-bg:    #fdf1d9;
  --clinic-tint-amber-ink:   #7a4b00;
  --clinic-tint-amber-line:  #efd7a4;
  --clinic-tint-green-bg:    #e2f1e8;
  --clinic-tint-green-ink:   #14603f;
  --clinic-tint-green-line:  #bcdcc9;
  --clinic-tint-blue-bg:     #e2edf2;
  --clinic-tint-blue-ink:    #0d5570;
  --clinic-tint-blue-line:   #bcd6e1;
  --clinic-tint-red-bg:      #f9e4e4;
  --clinic-tint-red-ink:     #8f2226;
  --clinic-tint-red-line:    #eec5c6;
  --clinic-tint-violet-bg:   #ece9f5;
  --clinic-tint-violet-ink:  #463a75;
  --clinic-tint-violet-line: #d3cce8;

  --clinic-radius:     .5rem;
  --clinic-radius-sm:  .375rem;

  /* --- Bootstrap, re-pointed ------------------------------------------- */
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
                        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-font-monospace:  ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                        Consolas, "Liberation Mono", monospace;
  --bs-body-font-size:   .9375rem;   /* 15px: dense, still comfortable      */
  --bs-body-line-height: 1.55;
  --bs-body-color:       var(--clinic-ink);
  --bs-body-color-rgb:   20, 33, 46;
  --bs-body-bg:          var(--clinic-canvas);
  --bs-body-bg-rgb:      242, 245, 248;
  --bs-emphasis-color:   var(--clinic-ink);
  --bs-heading-color:    var(--clinic-ink);
  --bs-secondary-color:  var(--clinic-ink-muted);
  --bs-secondary-bg:     var(--clinic-raise);
  --bs-tertiary-color:   var(--clinic-ink-faint);
  --bs-tertiary-bg:      var(--clinic-raise);
  --bs-border-color:     var(--clinic-line);
  --bs-border-color-translucent: var(--clinic-line);
  --bs-link-color:       var(--clinic-accent);
  --bs-link-color-rgb:   14, 95, 120;
  --bs-link-hover-color: var(--clinic-accent-dark);
  --bs-link-hover-color-rgb: 10, 74, 94;
  --bs-code-color:       #8a1f5c;

  --bs-primary:      var(--clinic-accent);
  --bs-primary-rgb:  14, 95, 120;
  --bs-danger:       var(--clinic-danger);
  --bs-danger-rgb:   164, 38, 44;
  --bs-success:      var(--clinic-success);
  --bs-success-rgb:  20, 96, 63;
  --bs-warning:      var(--clinic-amber);
  --bs-warning-rgb:  122, 75, 0;
  --bs-info:         var(--clinic-accent);
  --bs-info-rgb:     14, 95, 120;
  --bs-secondary:    var(--clinic-ink-muted);
  --bs-secondary-rgb:86, 101, 117;

  /* These drive `.bg-*-subtle` / `.text-*-emphasis` AND every `.alert-*`. */
  --bs-primary-text-emphasis:   var(--clinic-tint-blue-ink);
  --bs-primary-bg-subtle:       var(--clinic-tint-blue-bg);
  --bs-primary-border-subtle:   var(--clinic-tint-blue-line);
  --bs-secondary-text-emphasis: var(--clinic-tint-neutral-ink);
  --bs-secondary-bg-subtle:     var(--clinic-tint-neutral-bg);
  --bs-secondary-border-subtle: var(--clinic-tint-neutral-line);
  --bs-success-text-emphasis:   var(--clinic-tint-green-ink);
  --bs-success-bg-subtle:       var(--clinic-tint-green-bg);
  --bs-success-border-subtle:   var(--clinic-tint-green-line);
  --bs-danger-text-emphasis:    var(--clinic-tint-red-ink);
  --bs-danger-bg-subtle:        var(--clinic-tint-red-bg);
  --bs-danger-border-subtle:    var(--clinic-tint-red-line);
  --bs-warning-text-emphasis:   var(--clinic-tint-amber-ink);
  --bs-warning-bg-subtle:       var(--clinic-tint-amber-bg);
  --bs-warning-border-subtle:   var(--clinic-tint-amber-line);
  --bs-info-text-emphasis:      var(--clinic-tint-blue-ink);
  --bs-info-bg-subtle:          var(--clinic-tint-blue-bg);
  --bs-info-border-subtle:      var(--clinic-tint-blue-line);
  --bs-light-bg-subtle:         var(--clinic-raise);

  --bs-border-radius:      var(--clinic-radius);
  --bs-border-radius-sm:   var(--clinic-radius-sm);
  --bs-border-radius-lg:   .625rem;
  --bs-border-radius-xl:   .875rem;

  --bs-focus-ring-width:   2px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color:   var(--clinic-accent);
}

/* --- 2. type ------------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -.011em;
  color: var(--clinic-ink);
}
h1, .h1 { font-size: 1.75rem;   line-height: 1.2; }
h2, .h2 { font-size: 1.375rem;  line-height: 1.25; }
h3, .h3 { font-size: 1.3125rem; line-height: 1.25; }
h4, .h4 { font-size: 1.0625rem; line-height: 1.3; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }

/* A section label: "Coming up", "Already recorded today". Small caps-ish
   rather than a heading, because it is a divider, not a title. */
.h6.text-uppercase {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--clinic-ink-faint) !important;
}

.small, small { font-size: .8125rem; }

/* Numbers that sit in columns must line up. Times, references, money and
   phone numbers are all read by comparison down a list. */
table, .font-monospace, .call-time, .call-dial, .tile-count,
.week-times, .week-meta, time { font-variant-numeric: tabular-nums; }

.font-monospace { font-size: .875em; letter-spacing: -.01em; }

a { text-underline-offset: .18em; }
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.page-link):not(.console-tile):not(.dropdown-item) {
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

/* --- 3. focus ------------------------------------------------------------ */
/* One focus treatment everywhere, and it is visible on every background. */

:focus-visible {
  outline: 2px solid var(--clinic-accent);
  outline-offset: 2px;
  border-radius: var(--clinic-radius-sm);
}
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clinic-accent) 22%, transparent);
}

/* --- 4. buttons ---------------------------------------------------------- */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .875rem;
  --bs-btn-padding-y: .4375rem;
  --bs-btn-padding-x: .875rem;
  --bs-btn-border-radius: var(--clinic-radius-sm);
  --bs-btn-focus-shadow-rgb: 14, 95, 120;
  min-height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  line-height: 1.25;
}
.btn-sm {
  --bs-btn-font-size: .8125rem;
  --bs-btn-padding-y: .3125rem;
  --bs-btn-padding-x: .625rem;
  min-height: 2rem;
}
.btn-lg { --bs-btn-font-size: 1rem; min-height: 2.875rem; }

.btn-primary {
  --bs-btn-bg: var(--clinic-accent);
  --bs-btn-border-color: var(--clinic-accent);
  --bs-btn-hover-bg: var(--clinic-accent-dark);
  --bs-btn-hover-border-color: var(--clinic-accent-dark);
  --bs-btn-active-bg: var(--clinic-accent-dark);
  --bs-btn-active-border-color: var(--clinic-accent-dark);
  --bs-btn-disabled-bg: var(--clinic-accent);
  --bs-btn-disabled-border-color: var(--clinic-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--clinic-accent);
  --bs-btn-border-color: var(--clinic-accent-line);
  --bs-btn-hover-bg: var(--clinic-accent);
  --bs-btn-hover-border-color: var(--clinic-accent);
  --bs-btn-active-bg: var(--clinic-accent-dark);
  --bs-btn-active-border-color: var(--clinic-accent-dark);
  --bs-btn-disabled-color: var(--clinic-accent);
  --bs-btn-disabled-border-color: var(--clinic-accent-line);
}

/* The workhorse. Every "Open", "Edit", "Hours" button in the console is this,
   so it has to be quiet and still obviously a control: a white chip with a
   real border, not a ghost. */
.btn-outline-secondary {
  --bs-btn-color: var(--clinic-ink-2);
  --bs-btn-bg: var(--clinic-surface);
  --bs-btn-border-color: var(--clinic-line-strong);
  --bs-btn-hover-color: var(--clinic-ink);
  --bs-btn-hover-bg: var(--clinic-hover);
  --bs-btn-hover-border-color: var(--clinic-line-strong);
  --bs-btn-active-color: var(--clinic-ink);
  --bs-btn-active-bg: var(--clinic-hover);
  --bs-btn-active-border-color: var(--clinic-ink-faint);
  --bs-btn-disabled-color: var(--clinic-ink-faint);
  --bs-btn-disabled-bg: var(--clinic-surface);
  --bs-btn-disabled-border-color: var(--clinic-line);
}

/* Destructive. Never the same shape as a neutral action. */
.btn-danger {
  --bs-btn-bg: var(--clinic-danger);
  --bs-btn-border-color: var(--clinic-danger);
  --bs-btn-hover-bg: var(--clinic-danger-dark);
  --bs-btn-hover-border-color: var(--clinic-danger-dark);
  --bs-btn-active-bg: var(--clinic-danger-dark);
  --bs-btn-active-border-color: var(--clinic-danger-dark);
  --bs-btn-disabled-bg: var(--clinic-danger);
  --bs-btn-disabled-border-color: var(--clinic-danger);
  --bs-btn-focus-shadow-rgb: 164, 38, 44;
}
.btn-outline-danger {
  --bs-btn-color: var(--clinic-danger);
  --bs-btn-bg: var(--clinic-surface);
  --bs-btn-border-color: var(--clinic-tint-red-line);
  --bs-btn-hover-bg: var(--clinic-danger);
  --bs-btn-hover-border-color: var(--clinic-danger);
  --bs-btn-active-bg: var(--clinic-danger-dark);
  --bs-btn-active-border-color: var(--clinic-danger-dark);
  --bs-btn-disabled-color: var(--clinic-danger);
  --bs-btn-disabled-border-color: var(--clinic-tint-red-line);
  --bs-btn-focus-shadow-rgb: 164, 38, 44;
}
.btn-outline-success {
  --bs-btn-color: var(--clinic-success);
  --bs-btn-bg: var(--clinic-surface);
  --bs-btn-border-color: var(--clinic-tint-green-line);
  --bs-btn-hover-bg: var(--clinic-success);
  --bs-btn-hover-border-color: var(--clinic-success);
  --bs-btn-active-bg: var(--clinic-success);
  --bs-btn-active-border-color: var(--clinic-success);
  --bs-btn-disabled-color: var(--clinic-success);
  --bs-btn-disabled-border-color: var(--clinic-tint-green-line);
  --bs-btn-focus-shadow-rgb: 20, 96, 63;
}
.btn-warning {
  --bs-btn-color: var(--clinic-tint-amber-ink);
  --bs-btn-bg: var(--clinic-tint-amber-bg);
  --bs-btn-border-color: var(--clinic-tint-amber-line);
  --bs-btn-hover-color: var(--clinic-tint-amber-ink);
  --bs-btn-hover-bg: #fbe8c4;
  --bs-btn-hover-border-color: #e5c68f;
  --bs-btn-active-color: var(--clinic-tint-amber-ink);
  --bs-btn-active-bg: #f8e2b6;
  --bs-btn-active-border-color: #e2c48c;
  --bs-btn-focus-shadow-rgb: 122, 75, 0;
}
.btn-link {
  --bs-btn-color: var(--clinic-accent);
  --bs-btn-hover-color: var(--clinic-accent-dark);
  --bs-btn-font-weight: 600;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* --- 5. forms ------------------------------------------------------------ */

.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--clinic-ink-2);
  margin-bottom: .3125rem;
}
.form-control,
.form-select {
  --bs-border-color: var(--clinic-line-strong);
  border-color: var(--clinic-line-strong);
  border-radius: var(--clinic-radius-sm);
  padding: .4375rem .625rem;
  min-height: 2.375rem;
  color: var(--clinic-ink);
  background-color: var(--clinic-surface);
}
.form-control::placeholder { color: var(--clinic-ink-faint); }
.form-control:focus,
.form-select:focus {
  border-color: var(--clinic-accent);
  outline: none;
  /* Bootstrap's focus rule sets `background-color: var(--bs-body-bg)`, and in
     this theme that variable is the page canvas - so without this line every
     focused field turns grey the moment you click it. */
  background-color: var(--clinic-surface);
}
.form-control-sm, .form-select-sm { min-height: 2rem; padding: .25rem .5rem; }
.form-text {
  font-size: .8125rem;
  color: var(--clinic-ink-muted);
  margin-top: .3125rem;
}
.form-check-input {
  border-color: var(--clinic-line-strong);
  width: 1.05em;
  height: 1.05em;
  margin-top: .22em;
}
.form-check-input:checked {
  background-color: var(--clinic-accent);
  border-color: var(--clinic-accent);
}
.form-check-label { color: var(--clinic-ink-2); }
fieldset legend.form-label { float: none; width: auto; }

/* --- 6. cards ------------------------------------------------------------ */
/* Flat, bordered, hairline-separated. Shadows are reserved for things that
   actually float; a page of drop-shadowed panels reads as noise. The
   templates ask for `border-0 shadow-sm`, so the border comes back here. */

.card {
  --bs-card-border-color: var(--clinic-line);
  --bs-card-border-radius: var(--clinic-radius);
  --bs-card-inner-border-radius: calc(var(--clinic-radius) - 1px);
  --bs-card-cap-bg: var(--clinic-raise);
  --bs-card-bg: var(--clinic-surface);
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1.125rem;
  --bs-card-cap-padding-y: .6875rem;
  --bs-card-cap-padding-x: 1.125rem;
}
.card.border-0 { border: 1px solid var(--clinic-line) !important; }
.card.shadow-sm { box-shadow: 0 1px 2px rgba(16, 43, 61, .05) !important; }
.card-header {
  font-size: .875rem;
  color: var(--clinic-ink);
  border-bottom-color: var(--clinic-line);
}
/* Several headers say `bg-white`; the theme wants the raised tint instead. */
.card-header.bg-white { background-color: var(--clinic-raise) !important; }

/* --- 7. tables ----------------------------------------------------------- */

.table {
  --bs-table-color: var(--clinic-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--clinic-line);
  --bs-table-hover-bg: var(--clinic-hover);
  --bs-table-hover-color: var(--clinic-ink);
  --bs-table-striped-bg: var(--clinic-raise);
  margin-bottom: 0;
}
.table > thead {
  --bs-table-bg: var(--clinic-raise);
  --bs-table-color: var(--clinic-ink-faint);
}
.table > thead th {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clinic-ink-faint);
  background-color: var(--clinic-raise);
  border-bottom: 1px solid var(--clinic-line);
  padding: .625rem .75rem;
  white-space: nowrap;
  vertical-align: middle;
}
/* The one place a header carries a sentence rather than a label. */
.table > thead th .fw-normal {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.table > tbody td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--clinic-line);
  vertical-align: middle;
}
.table > tbody tr:last-child td { border-bottom: 0; }
.table-sm > thead th,
.table-sm > tbody td { padding: .5rem .625rem; }
.table-light { --bs-table-bg: var(--clinic-raise); }

/* Every list in the console is a table in this wrapper. */
.table-responsive.bg-white {
  background-color: var(--clinic-surface) !important;
  border: 1px solid var(--clinic-line) !important;
  border-radius: var(--clinic-radius) !important;
}

/* A table wider than its box scrolls sideways, and on a phone most of them
   are. The shadow at the cut edge is the only thing that says so - without it
   the last visible column simply looks truncated, which reads as a layout bug
   rather than as "there is more this way". Pure CSS: the local-attachment
   layers scroll with the content and uncover the fixed radial ones. */
.table-responsive {
  background-image:
    linear-gradient(to right, var(--clinic-surface), rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--clinic-surface), rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(16, 43, 61, .14), rgba(16, 43, 61, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(16, 43, 61, .14), rgba(16, 43, 61, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, .75rem 100%, .75rem 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Single-line rows on a phone. A cell that wraps to three lines to avoid a
   scrollbar is not easier to read - it just makes the row four times as tall
   and still does not show the columns on the right. */
@media (max-width: 767.98px) {
  .table-responsive > .table > tbody > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > thead > tr > th { white-space: nowrap; }
}

/* --- 8. lists ------------------------------------------------------------ */

.list-group {
  --bs-list-group-border-color: var(--clinic-line);
  --bs-list-group-border-radius: var(--clinic-radius);
  --bs-list-group-item-padding-y: .75rem;
  --bs-list-group-item-padding-x: 1.125rem;
  --bs-list-group-color: var(--clinic-ink);
  --bs-list-group-bg: var(--clinic-surface);
  --bs-list-group-action-hover-bg: var(--clinic-hover);
  --bs-list-group-action-hover-color: var(--clinic-ink);
}

/* --- 9. alerts ----------------------------------------------------------- */
/* A left rail instead of a full border: the colour is a signal, and a signal
   reads better as an edge than as an outline. */

.alert {
  --bs-alert-border-color: transparent;
  border: 1px solid var(--clinic-line);
  border-left: 3px solid var(--clinic-ink-faint);
  border-radius: var(--clinic-radius-sm);
  padding: .75rem 1rem;
  font-size: .875rem;
}
.alert strong { font-weight: 650; }
.alert-warning { border-left-color: #c08a1e; border-color: var(--clinic-tint-amber-line); }
.alert-danger  { border-left-color: var(--clinic-danger); border-color: var(--clinic-tint-red-line); }
.alert-success { border-left-color: var(--clinic-success); border-color: var(--clinic-tint-green-line); }
.alert-info,
.alert-primary { border-left-color: var(--clinic-accent); border-color: var(--clinic-tint-blue-line); }
.alert-light   { border-left-color: var(--clinic-line-strong); background-color: var(--clinic-raise); }
.alert-dismissible { padding-right: 2.75rem; }
.alert .btn-close { padding: .9rem 1rem; }

/* --- 10. status pills ---------------------------------------------------- */
/* Booking state and payment state, everywhere they appear. The mapping lives
   in `apps/console/templatetags/console_extras.py`; the meaning of each
   colour is fixed here so it cannot drift between screens:
     neutral = finished or inert, amber = waiting on somebody,
     green = good, blue = done and recorded, red = went wrong. */

.status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1875rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .005em;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}
.status::before {
  content: "";
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: .85;
}
.status-neutral { background: var(--clinic-tint-neutral-bg); color: var(--clinic-tint-neutral-ink); border-color: var(--clinic-tint-neutral-line); }
.status-wait    { background: var(--clinic-tint-amber-bg);   color: var(--clinic-tint-amber-ink);   border-color: var(--clinic-tint-amber-line); }
.status-good    { background: var(--clinic-tint-green-bg);   color: var(--clinic-tint-green-ink);   border-color: var(--clinic-tint-green-line); }
.status-done    { background: var(--clinic-tint-blue-bg);    color: var(--clinic-tint-blue-ink);    border-color: var(--clinic-tint-blue-line); }
.status-bad     { background: var(--clinic-tint-red-bg);     color: var(--clinic-tint-red-ink);     border-color: var(--clinic-tint-red-line); }
.status-money   { background: var(--clinic-tint-violet-bg);  color: var(--clinic-tint-violet-ink);  border-color: var(--clinic-tint-violet-line); }

/* Bootstrap badges that are not statuses (the portal's "next" flag). */
.badge {
  font-weight: 650;
  font-size: .75rem;
  padding: .1875rem .5rem;
  border-radius: 999px;
  letter-spacing: .005em;
}

/* --- 11. pagination ------------------------------------------------------ */

.pagination {
  --bs-pagination-color: var(--clinic-ink-2);
  --bs-pagination-bg: var(--clinic-surface);
  --bs-pagination-border-color: var(--clinic-line-strong);
  --bs-pagination-hover-color: var(--clinic-ink);
  --bs-pagination-hover-bg: var(--clinic-hover);
  --bs-pagination-hover-border-color: var(--clinic-line-strong);
  --bs-pagination-focus-color: var(--clinic-ink);
  --bs-pagination-focus-bg: var(--clinic-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--clinic-accent) 22%, transparent);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--clinic-accent);
  --bs-pagination-active-border-color: var(--clinic-accent);
  --bs-pagination-disabled-color: var(--clinic-ink-faint);
  --bs-pagination-disabled-bg: var(--clinic-raise);
  --bs-pagination-disabled-border-color: var(--clinic-line);
  --bs-pagination-border-radius: var(--clinic-radius-sm);
  --bs-pagination-font-size: .8125rem;
  --bs-pagination-padding-y: .3125rem;
  --bs-pagination-padding-x: .625rem;
}
.page-link { font-weight: 600; }

/* --- 12. disclosure ------------------------------------------------------ */
/* `<details>` appears in the audit trail and in the availability form. The
   default marker is a tiny black triangle glued to the text. */

details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  color: var(--clinic-accent);
  padding: .125rem 0;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .12s ease-in-out;
  flex: none;
}
details[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
details > summary:hover { color: var(--clinic-accent-dark); }

/* --- 13. empty states ---------------------------------------------------- */

.empty-state {
  background: var(--clinic-surface);
  border: 1px dashed var(--clinic-line-strong);
  border-radius: var(--clinic-radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
/* Also used on their own, inside a card that is empty rather than a whole
   page that is - same words, same weight, no dashed box around them. */
.empty-title {
  font-weight: 650;
  font-size: 1rem;
  color: var(--clinic-ink-2);
  margin-bottom: .25rem;
}
.empty-hint {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--clinic-ink-muted);
  max-width: 44ch;
}
.empty-state .empty-hint { margin-left: auto; margin-right: auto; }

/* --- 14. page headers ---------------------------------------------------- */
/* Every screen opens with a title, an optional sentence and an optional
   action. Giving that shape one class is what stops the four layout bugs
   screenshots have already found here from coming back in a fifth place. */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1.25rem;
}
.page-head > :first-child { min-width: 0; flex: 1 1 22rem; }
.page-head .page-lede {
  color: var(--clinic-ink-muted);
  margin: .3125rem 0 0;
  max-width: 78ch;
  font-size: .875rem;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* A toolbar of sibling actions: consistent gaps, and the destructive one
   pushed away from the rest so it is never the button next to the one you
   meant to press. */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.action-bar .action-destructive { margin-left: .75rem; }
@media (max-width: 575.98px) {
  .action-bar .action-destructive { margin-left: 0; }
}

/* --- 15. filter bar ------------------------------------------------------ */

.filter-bar {
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-line);
  border-radius: var(--clinic-radius);
  padding: .875rem 1rem;
  margin-bottom: 1rem;
}
.filter-bar .form-label { margin-bottom: .25rem; }

/* --- 16. misc ------------------------------------------------------------ */

hr { border-color: var(--clinic-line); opacity: 1; }
.min-w-0 { min-width: 0; }
.border { border-color: var(--clinic-line) !important; }
.bg-white { background-color: var(--clinic-surface) !important; }
.bg-body-tertiary { background-color: var(--clinic-canvas) !important; }
.text-body-secondary { color: var(--clinic-ink-muted) !important; }

/* Django's own admin link and the footer note. */
footer { font-size: .8125rem; }

/* --- 17. record-detail bits ---------------------------------------------- */

.booking-ref {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--clinic-ink);
}

/* The same instant on two clocks. They are the same size on purpose: neither
   one is the "real" time, and making one bigger implies it is. */
.clock-row {
  padding: .625rem 0;
  border-bottom: 1px solid var(--clinic-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
}
.clock-row:last-child { border-bottom: 0; padding-bottom: 0; }
.clock-row:first-child { padding-top: 0; }
.clock-label {
  flex: 1 0 100%;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clinic-ink-faint);
  margin-bottom: .125rem;
}
.clock-time {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--clinic-ink);
  font-variant-numeric: tabular-nums;
}
.clock-end { color: var(--clinic-ink-muted); font-variant-numeric: tabular-nums; }
.clock-note { flex: 1 0 100%; white-space: normal; text-align: left; margin-top: .25rem; }

.money-total {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--clinic-ink);
  font-variant-numeric: tabular-nums;
}

/* Definition lists used as record fields (the call, the patient, the doctor). */
.card-body > dl.row > dt {
  font-weight: 600;
  color: var(--clinic-ink-muted);
  font-size: .8125rem;
  padding-top: .1875rem;
}
.card-body > dl.row > dd { margin-bottom: .625rem; }
.card-body > dl.row > dd:last-child { margin-bottom: 0; }