/* ============================================================================
   DreamClear — Components
   ----------------------------------------------------------------------------
   Only what AdminLTE and Bootstrap do NOT provide, or provide in a shape the
   brand guide contradicts. Everything here traces to a decision in
   brand-guide.md or dreamclear-components.html.

   Before adding anything: check whether a vendor component plus a variable
   re-point in dreamclear-theme.css already does the job. Prefer that.
   ============================================================================ */

/* ============================================================================
   Typography
   ============================================================================ */
h1, h2, h3, h4, h5, h6,
.display-font {
  font-family: var(--dc-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--dc-ink);
}

.mono,
.text-mono {
  font-family: var(--dc-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Small uppercase mono label — section eyebrows, table headers, metadata. */
.dc-eyebrow {
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
}

/* ============================================================================
   Buttons — the red budget
   ----------------------------------------------------------------------------
   Bootstrap's .btn-primary is blue (see the bridge). Red is available ONLY as
   .btn-accent, and the rule is one per screen. Destructive actions use
   .btn-danger-outline, which is deliberately quieter than the accent — making
   deletion easy to click is not a goal.
   ============================================================================ */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 1.125rem;
  height: var(--dc-h-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.btn-sm { height: var(--dc-h-sm); --bs-btn-padding-x: 0.8125rem; --bs-btn-font-size: 0.8125rem; }
.btn-lg { height: var(--dc-h-lg); --bs-btn-padding-x: 1.5rem;    --bs-btn-font-size: 0.9375rem; }

.btn-icon { width: var(--dc-h-md); --bs-btn-padding-x: 0; }
.btn-icon.btn-sm { width: var(--dc-h-sm); }

/* THE accent. One per screen. */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dc-red);
  --bs-btn-border-color: var(--dc-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dc-red-bright);
  --bs-btn-hover-border-color: var(--dc-red-bright);
  --bs-btn-active-bg: var(--dc-red-deep);
  --bs-btn-active-border-color: var(--dc-red-deep);
  --bs-btn-disabled-bg: var(--dc-red);
  --bs-btn-disabled-border-color: var(--dc-red);
  --bs-btn-disabled-color: #fff;
  box-shadow: 0 6px 20px rgba(var(--bs-danger-rgb), 0.28);
}

/* Outlined blue — secondary action. */
.btn-soft {
  --bs-btn-color: var(--dc-blue);
  --bs-btn-bg: var(--dc-blue-tint-soft);
  --bs-btn-border-color: var(--dc-blue-tint-border);
  --bs-btn-hover-color: var(--dc-ink);
  --bs-btn-hover-bg: var(--dc-blue-tint);
  --bs-btn-hover-border-color: var(--dc-blue);
}

/* Neutral toolbar button. */
.btn-neutral {
  --bs-btn-color: var(--dc-ink);
  --bs-btn-bg: var(--dc-raised);
  --bs-btn-border-color: var(--dc-line-strong);
  --bs-btn-hover-color: var(--dc-ink);
  --bs-btn-hover-bg: var(--dc-raised);
  --bs-btn-hover-border-color: var(--dc-ink-3);
}

/* Ghost — dense tables and toolbars. */
.btn-ghost {
  --bs-btn-color: var(--dc-ink-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--dc-ink);
  --bs-btn-hover-bg: var(--dc-raised);
  --bs-btn-hover-border-color: transparent;
}

/* Destructive — outline, never filled. */
.btn-danger-outline {
  --bs-btn-color: var(--dc-red-bright);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--dc-red-tint-border);
  --bs-btn-hover-color: var(--dc-red-bright);
  --bs-btn-hover-bg: var(--dc-red-tint);
  --bs-btn-hover-border-color: var(--dc-red);
}

/* ============================================================================
   Badges — never colour alone. Dot + border + text label, so status survives
   colourblindness and greyscale.
   ============================================================================ */
.dc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.dc-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.dc-badge-success { color: var(--dc-success); background: rgba(40,208,126,.10); border-color: rgba(40,208,126,.28); }
.dc-badge-warning { color: var(--dc-warning); background: rgba(255,176,32,.10); border-color: rgba(255,176,32,.28); }
.dc-badge-error   { color: var(--dc-error);   background: var(--dc-red-tint);  border-color: var(--dc-red-tint-border); }
.dc-badge-info    { color: var(--dc-blue);    background: var(--dc-blue-tint-soft); border-color: var(--dc-blue-tint-border); }
.dc-badge-neutral { color: var(--dc-ink-2);   background: var(--dc-blue-tint-soft); border-color: var(--dc-line-strong); }

/* ============================================================================
   Brand marks
   ============================================================================ */
.dc-wordmark {
  font-family: var(--dc-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dc-ink);
}
.dc-wordmark span { color: var(--dc-blue); }

/* The signature gradient. Signature moments only — never decoration. */
.dc-grad-rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--dc-brand-grad);
  opacity: 0.9;
}

/* ============================================================================
   Sidebar navigation
   ----------------------------------------------------------------------------
   Active state is BLUE. A lit nav item is structure, not emphasis — the same
   logic that makes an enabled module blue rather than red.
   ============================================================================ */
.app-sidebar .nav-link {
  color: var(--dc-ink-2);
  border-radius: var(--dc-radius-btn);
  padding: 0.5rem 0.75rem;
  margin: 0.0625rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  transition: background-color .15s ease, color .15s ease;
}
.app-sidebar .nav-link:hover {
  background-color: var(--dc-blue-tint-soft);
  color: var(--dc-ink);
}
.app-sidebar .nav-link.active {
  background-color: var(--dc-blue-tint);
  color: var(--dc-blue);
  font-weight: 600;
}
.app-sidebar .nav-link i {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  flex: none;
}

/* Group heading between nav sections. */
.dc-nav-heading {
  font-family: var(--dc-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
  padding: 1.25rem 1.25rem 0.375rem;
}

.dc-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0 1.125rem;
  height: var(--dc-topbar-h);
  border-bottom: 1px solid var(--dc-line);
  text-decoration: none;
}

/* ============================================================================
   Page furniture
   ============================================================================ */
.dc-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.dc-page-header h1 {
  font-size: 1.5rem;
  margin: 0;
}
.dc-page-header .subtitle {
  color: var(--dc-ink-2);
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

/* Stat tile. */
.dc-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dc-stat .label {
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
}
.dc-stat .value {
  font-family: var(--dc-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dc-ink);
  font-variant-numeric: tabular-nums;
}

/* Module card — the atom of the product. On-state is blue. */
.dc-module {
  background: var(--dc-raised);
  border: 1px solid var(--dc-line);
  border-radius: 12px;
  padding: 0.875rem;
  height: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.dc-module:hover { border-color: var(--dc-line-strong); }
.dc-module.is-on {
  border-color: var(--dc-blue-tint-border);
  background: linear-gradient(180deg, var(--dc-blue-tint-soft), transparent 70%), var(--dc-raised);
}
.dc-module .name {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
}
.dc-module .desc {
  font-size: 0.78125rem;
  color: var(--dc-ink-2);
  margin: 0.375rem 0 0;
  line-height: 1.5;
}

/* Switch — the module on/off control. Blue when on, never red. */
.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.375rem;
  background-color: var(--dc-raised);
  border-color: var(--dc-line-strong);
}
.form-switch .form-check-input:checked {
  background-color: var(--dc-blue);
  border-color: var(--dc-blue);
}
.form-switch .form-check-label {
  margin-top: 0.1875rem;
  margin-left: 0.25rem;
}

/* ============================================================================
   Opening hours grid
   ============================================================================ */
.dc-hours {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dc-hours-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius-btn);
  background: var(--dc-raised);
  transition: opacity .15s ease;
}

/* Closed days recede rather than disappear — the row stays in place so the week
   keeps its shape and nothing shifts as days are toggled. */
.dc-hours-row.is-closed { opacity: 0.55; }

.dc-hours-day {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--dc-ink);
}

.dc-hours-times {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.dc-hours-times input[type="time"] {
  width: auto;
  min-width: 7.5rem;
  font-family: var(--dc-font-mono);
}

/* Dark mode leaves the native time picker icon nearly invisible. */
[data-bs-theme="dark"] .dc-hours-times input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

/* 2026-08-13 (Steve caught during patient-profile QA) — native calendar / time
   picker icon on <input type="date|datetime-local|time|month|week"> was
   rendering with near-zero contrast (white-on-white in light theme, dark-on-
   dark in dark theme). The `filter: invert()` approach flipped that around
   and made the icon white-on-white in the opposite theme. Switch to the
   modern `color-scheme` CSS property: it tells the browser to render its
   FORM CONTROLS (including native pickers, scrollbars, selection colors)
   in the requested theme, and the browser picks the correct icon tint for
   each background. No filter hack — works in Chrome/Edge/Safari/Firefox. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  color-scheme: light;
  cursor: pointer;
}
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="month"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="week"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.dc-hours-overnight { white-space: nowrap; }

@media (max-width: 767.98px) {
  .dc-hours-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .dc-hours-times { flex-wrap: wrap; }
}

/* Skip link — keyboard users land here first. */
.dc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--dc-blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--dc-radius-btn) 0;
  font-weight: 600;
}
.dc-skip-link:focus {
  left: 0;
}


/* ============================================================================
   Select2 — dc-searchable overrides
   ----------------------------------------------------------------------------
   Applied globally wherever initSearchables() activates a <select.dc-searchable>.
   Goals:
     - Selection box matches .form-select / .form-control: same border color,
       radius, background, and text color from dc-tokens so it's indistinguishable
       from other inputs on the page.
     - Dropdown auto-expands beyond the trigger width so long practice names
       never wrap or force a horizontal scrollbar.
     - Options stay on one line; the dropdown scrolls vertically only.
     - form-select-sm sizing carried through to the S2 container.
   ============================================================================ */

/* ── Trigger box — match .form-select exactly ── */
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--dc-void);
    border-color:     var(--dc-line-strong);
    border-radius:    var(--bs-border-radius-sm);
    color:            var(--dc-ink);
    min-height:       var(--dc-h-md);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--dc-ink);
}

/* Focus ring — matches Bootstrap .form-control:focus */
.select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
.select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap-5.select2-container--open  .select2-selection--single,
.select2-container--bootstrap-5.select2-container--open  .select2-selection--multiple {
    border-color: var(--bs-primary);
    box-shadow:   0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ── Dropdown panel ── */
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--dc-void);
    border-color:     var(--dc-line-strong);
    min-width:        240px;
    width:            max-content !important;
    max-width:        520px;
}

.select2-container--bootstrap-5 .select2-results__option {
    color:       var(--dc-ink);
    white-space: nowrap;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--bs-primary);
    color:            #fff;
}

/* Search input inside dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--dc-void);
    border-color:     var(--dc-line-strong);
    border-radius:    var(--bs-border-radius-sm);
    color:            var(--dc-ink);
}

/* ── form-select-sm compat ── */
.select2-container--bootstrap-5.select2-container--sm .select2-selection--single,
.select2-container--bootstrap-5.select2-container--sm .select2-selection--multiple {
    min-height:    calc(1.5em + 0.5rem + 2px);
    font-size:     0.875rem;
    padding-top:   0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 8px;
}

/* ── Inline message translation (Steve 2026-08-28) ──────────────────────────
   Original, a separation line, then the translation in italics and subdued.
   Lives here rather than in a page's <style> because BOTH the standalone
   Conversations page and the Patient Profile tab render these bubbles from
   their own copy of the markup — a third copy of the rules would be a third
   thing to keep in sync. */
.dc-msg-translation {
    margin-top: .4rem;
}
.dc-msg-translation-sep {
    border-top: 1px solid var(--bs-border-color);
    opacity: .55;
    margin-bottom: .35rem;
}
.dc-msg-translation-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .65;
    margin-bottom: .1rem;
}
.dc-msg-translation-body {
    font-style: italic;
    font-size: .88rem;
    opacity: .78;
    /* Non-Latin scripts (Armenian, Persian, Vietnamese, Chinese, Hindi) need
       more vertical room than Latin at the same size, and the italic makes it
       tighter still. */
    line-height: 1.45;
}
/* Persian is right-to-left. Without this the punctuation lands on the wrong
   end and the text reads as broken to anyone who can actually read it. */
.dc-msg-translation-body[dir="rtl"] {
    text-align: right;
}