/* ==========================================================================
   DocForce design system
   Shared look for buttons, cards, forms, tables, nav and modals across the
   live app pages (Login, mainmenu, Patient, System/Client Properties).
   Loaded alongside each page's existing stylesheets - selectors below are
   deliberately specific enough to win over the older per-page CSS without
   requiring those older files to be deleted.
   ========================================================================== */

:root {
  --df-primary: #2563a8;
  --df-primary-dark: #1c4a80;
  --df-primary-light: #eaf1fa;
  --df-accent: #17a2a0;
  --df-success: #2f9e5b;
  --df-danger: #d64545;
  --df-warning: #d99a2b;

  --df-bg: #f4f6f9;
  --df-surface: #ffffff;
  --df-border: #dde3ea;
  --df-text: #263241;
  --df-text-muted: #6b7686;

  --df-radius: 10px;
  --df-radius-sm: 6px;
  --df-shadow: 0 2px 10px rgba(23, 43, 77, 0.08);
  --df-shadow-lg: 0 12px 32px rgba(23, 43, 77, 0.16);

  --df-space-1: 4px;
  --df-space-2: 8px;
  --df-space-3: 12px;
  --df-space-4: 16px;
  --df-space-5: 24px;
  --df-space-6: 32px;

  --df-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

body {
  font-family: var(--df-font);
  color: var(--df-text);
  background: var(--df-bg);
}

.df-reset-bg {
  background: var(--df-bg) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--df-font);
  color: var(--df-text);
}

a {
  color: var(--df-primary);
}

/* -------------------------------------------------------------------------
   Cards - replaces the old tilted ".box.effect6/8/9" sticky-note panels
   ------------------------------------------------------------------------- */

.df-card {
  position: static !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  background: var(--df-surface) !important;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  padding: var(--df-space-5);
  margin-bottom: var(--df-space-5);
  text-shadow: none !important;
}

.df-card::before,
.df-card::after {
  display: none !important;
  content: none !important;
}

.df-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--df-space-3);
  margin-bottom: var(--df-space-4);
  padding-bottom: var(--df-space-3);
  border-bottom: 1px solid var(--df-border);
}

.df-card-header h1,
.df-card-header h2,
.df-card-header h3,
.df-card-header h4 {
  margin: 0;
}

.df-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--df-space-5);
  padding: var(--df-space-5);
}

.df-layout-main {
  flex: 1 1 480px;
  min-width: 0;
}

.df-layout-icons {
  flex: 0 0 220px;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.df-btn,
a.df-btn,
input.df-btn,
.df-btn.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--df-space-2);
  font-family: var(--df-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 9px 18px;
  border-radius: var(--df-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.df-btn:active {
  transform: translateY(1px);
}

.df-btn-primary {
  background: var(--df-primary);
  border-color: var(--df-primary);
  color: #fff !important;
}
.df-btn-primary:hover {
  background: var(--df-primary-dark);
  border-color: var(--df-primary-dark);
  color: #fff !important;
}

.df-btn-secondary {
  background: var(--df-surface);
  border-color: var(--df-border);
  color: var(--df-text) !important;
}
.df-btn-secondary:hover {
  background: var(--df-primary-light);
  border-color: var(--df-primary);
}

.df-btn-danger {
  background: #fff;
  border-color: var(--df-danger);
  color: var(--df-danger) !important;
}
.df-btn-danger:hover {
  background: var(--df-danger);
  color: #fff !important;
}

.df-btn-icon {
  border: none !important;
  background: transparent !important;
  padding: var(--df-space-2) !important;
  border-radius: var(--df-radius-sm);
  transition: background-color 0.15s ease;
}
.df-btn-icon:hover {
  background: var(--df-primary-light) !important;
}

/* -------------------------------------------------------------------------
   Forms - inputs, labels, field tables
   ------------------------------------------------------------------------- */

.df-field-table {
  border-collapse: separate;
  border-spacing: 0 var(--df-space-3);
  width: 100%;
}

.df-field-table td {
  padding: 4px var(--df-space-3);
  vertical-align: middle;
  font-family: var(--df-font);
  font-size: 13.5px;
}

.df-label,
.df-field-table .df-label {
  color: var(--df-text-muted) !important;
  font-family: var(--df-font) !important;
  font-weight: 600;
  font-size: 13px !important;
  white-space: nowrap;
}

.df-input,
input.df-input,
select.df-input,
textarea.df-input {
  width: 100%;
  box-sizing: border-box;
  height: 36px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--df-border) !important;
  border-radius: var(--df-radius-sm) !important;
  font-family: var(--df-font) !important;
  font-size: 13.5px !important;
  color: var(--df-text) !important;
  background: var(--df-surface) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.df-input {
  height: auto !important;
  min-height: 80px;
}

.df-input:focus {
  outline: none;
  border-color: var(--df-primary) !important;
  box-shadow: 0 0 0 3px var(--df-primary-light);
}

.df-value {
  display: inline-block;
  padding: 6px 2px;
  color: var(--df-text);
  font-family: var(--df-font);
  font-size: 13.5px;
}

.df-error-text {
  color: var(--df-danger) !important;
  font-family: var(--df-font) !important;
  font-size: 13px !important;
  font-style: normal !important;
}

/* -------------------------------------------------------------------------
   Safety-net styling for legacy table-based forms (mainmenu.aspx's inline
   "modal" dialogs use a bare <table><td class="newpatienttable"> pattern
   with no CSS class on the actual asp:TextBox/asp:Label controls) - this
   makes every such field look consistent with .df-input/.df-label without
   having to touch each individual control tag.
   ------------------------------------------------------------------------- */

.newpatienttable {
  padding: 6px 14px !important;
  vertical-align: middle;
  font-family: var(--df-font);
  font-size: 13.5px;
  color: var(--df-text);
  white-space: nowrap;
}

.newpatienttable span {
  white-space: nowrap;
}

.df-modal input[type="text"],
.df-modal input[type="password"],
.df-modal select,
.newpatienttable input[type="text"],
.newpatienttable input[type="password"],
.newpatienttable select {
  box-sizing: border-box;
  width: 100%;
  min-width: 140px;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  font-family: var(--df-font);
  font-size: 13.5px;
  color: var(--df-text);
  white-space: normal;
}

.df-modal table,
.df-field-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: auto;
}

/* -------------------------------------------------------------------------
   Tables / GridView output
   ------------------------------------------------------------------------- */

.mydatagrid,
.df-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--df-surface);
  font-family: var(--df-font);
  font-size: 13.5px;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  overflow: hidden;
}

.mydatagrid .header,
.df-table .header,
.df-table th {
  background: var(--df-primary-light);
  color: var(--df-primary-dark);
  font-weight: 700;
  text-align: left;
  padding: var(--df-space-3);
  border-bottom: 1px solid var(--df-border);
}

.mydatagrid .rows,
.df-table td {
  padding: var(--df-space-3);
  border-bottom: 1px solid var(--df-border);
  color: var(--df-text);
}

.mydatagrid tr:last-child td {
  border-bottom: none;
}

.mydatagrid tr:hover td {
  background: var(--df-primary-light);
}

.pager {
  padding: var(--df-space-3) !important;
  text-align: center;
  background: var(--df-surface);
}

/* -------------------------------------------------------------------------
   Side navigation - replaces the inline <style> sidenav block duplicated
   across mainmenu.aspx / Patient.aspx / SystemProperties.aspx / ClientProperties.aspx
   ------------------------------------------------------------------------- */

.df-sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background: var(--df-primary-dark);
  overflow-x: hidden;
  transition: width 0.25s ease;
  padding-top: 70px;
  box-shadow: var(--df-shadow-lg);
}

.df-sidenav a,
.df-sidenav a.df-btn {
  display: block;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--df-font);
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
}

.df-sidenav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.df-sidenav .df-closebtn {
  position: absolute;
  top: 8px;
  right: 20px;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer;
}

.df-topbar {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  background: var(--df-primary-dark);
  color: #fff;
  padding: var(--df-space-3) var(--df-space-5);
}

.df-topbar .df-hamburger {
  font-size: 26px;
  cursor: pointer;
  color: #fff;
  line-height: 1;
}

.df-topbar-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
}

@media screen and (max-height: 450px) {
  .df-sidenav { padding-top: 15px; }
  .df-sidenav a { font-size: 15px; }
}

/* -------------------------------------------------------------------------
   Modals (the always-in-DOM "modal" divs in mainmenu.aspx)
   ------------------------------------------------------------------------- */

.df-modal .modal-content {
  border: none;
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow-lg);
}

.df-modal .modal-header {
  background: var(--df-primary-light);
  border-bottom: 1px solid var(--df-border);
  border-radius: var(--df-radius) var(--df-radius) 0 0;
}

.df-modal .modal-title {
  color: var(--df-primary-dark);
  font-weight: 700;
}

.df-modal .modal-body {
  padding: var(--df-space-5);
}

/* -------------------------------------------------------------------------
   Prescription pad header (ConsultationSection)
   ------------------------------------------------------------------------- */

.df-rx-card {
  border-top: 3px solid var(--df-primary);
}

.df-rx-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--df-space-4);
  padding-bottom: var(--df-space-4);
  border-bottom: 1px solid var(--df-border);
  margin-bottom: var(--df-space-2);
}

.df-rx-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--df-primary-light);
  color: var(--df-primary);
  flex-shrink: 0;
}

.df-rx-title {
  flex: 1 1 auto;
  min-width: 140px;
}

.df-rx-title h3 {
  margin: 0;
  color: var(--df-primary-dark);
}

.df-rx-clinic {
  font-size: 12.5px;
  color: var(--df-text-muted);
  letter-spacing: 0.02em;
}

.df-rx-meta {
  text-align: right;
  font-size: 13.5px;
  color: var(--df-text-muted);
  line-height: 1.5;
}

.df-rx-meta strong {
  color: var(--df-text);
  font-size: 15px;
}

.df-fee-input {
  max-width: 260px;
}

/* -------------------------------------------------------------------------
   Simple prev/next pager (LocationsPanel, etc.)
   ------------------------------------------------------------------------- */

.df-pager {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  margin-top: var(--df-space-4);
  font-size: 13.5px;
  color: var(--df-text-muted);
}

.df-modal .modal-footer {
  border-top: 1px solid var(--df-border);
  padding: var(--df-space-4) var(--df-space-5);
}

/* -------------------------------------------------------------------------
   Login / new-user / forgot-password card
   ------------------------------------------------------------------------- */

.df-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--df-primary-dark) 0%, var(--df-primary) 55%, var(--df-accent) 100%);
  font-family: var(--df-font);
  padding: var(--df-space-5);
  box-sizing: border-box;
}

.df-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--df-surface);
  border-radius: 16px;
  box-shadow: var(--df-shadow-lg);
  padding: var(--df-space-6) var(--df-space-5);
  text-align: center;
}

.df-login-card h1 {
  margin: 0 0 var(--df-space-5);
  font-size: 24px;
  font-weight: 800;
  color: var(--df-primary-dark);
  letter-spacing: 0.01em;
}

.df-login-field {
  text-align: left;
  margin-bottom: var(--df-space-4);
}

.df-login-card .df-btn-primary {
  width: 100%;
  justify-content: center;
  padding: 11px 18px;
  font-size: 14px;
  margin-top: var(--df-space-2);
}

.df-login-links {
  display: flex;
  justify-content: space-between;
  margin-top: var(--df-space-5);
  font-size: 13px;
}

.df-login-links a {
  color: var(--df-primary) !important;
  text-decoration: none !important;
}
.df-login-links a:hover {
  text-decoration: underline !important;
}

.df-login-error {
  margin-top: var(--df-space-3);
  color: var(--df-danger);
  font-size: 13px;
  min-height: 1em;
}


/* -------------------------------------------------------------------------
   Button rows - same look as before on desktop (8px between buttons);
   mobile.css lets the buttons share the row width on phones.
   ------------------------------------------------------------------------- */

.df-actions,
.df-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--df-space-2);
}

/* -------------------------------------------------------------------------
   Dictation beside the Medical Notes: notes on the left, the English draft to check on the right
   (stacked on narrow screens)
   ------------------------------------------------------------------------- */

.df-notes-split-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--df-space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .df-notes-split-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.df-dictation .df-card-header {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
}

.df-dictation-hint {
  margin: 0 0 var(--df-space-3);
  font-size: 13.5px;
}

.df-demo-chip {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--df-warning);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.df-demo-note {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--df-warning);
}

.df-heard {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--df-primary-light);
  border: 1px solid var(--df-border);
  border-radius: 8px;
}

.df-heard-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--df-text-muted);
}

.df-heard-text {
  font-size: 14px;
  white-space: pre-wrap;
}

.df-voice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.df-mic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.df-mic-recording,
.df-mic-recording:hover {
  background: var(--df-danger);
  border-color: var(--df-danger);
  color: #fff !important;
}

.df-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: df-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes df-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.df-voice-working {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--df-text-muted);
  font-size: 14px;
}

.df-voice-msg {
  flex: 1 1 100%;
  font-size: 13px;
  color: var(--df-text-muted);
}

.df-voice-error {
  color: var(--df-danger);
}
/* -------------------------------------------------------------------------
   Fingerprint / Face ID sign-in
   ------------------------------------------------------------------------- */

.df-passkey {
  margin-top: var(--df-space-4);
}

.df-passkey-or {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  margin-bottom: var(--df-space-3);
  color: var(--df-text-muted);
  font-size: 13px;
}

.df-passkey-or::before,
.df-passkey-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--df-border);
}

.df-login-card .df-passkey-btn {
  width: 100%;
  justify-content: center;
  padding: 11px 18px;
  font-size: 14px;
}

.df-muted {
  color: var(--df-text-muted);
  font-size: 13.5px;
}

.df-success-text {
  color: var(--df-success);
  font-size: 13.5px;
}

/* -------------------------------------------------------------------------
   Hint next to a switched-off action (e.g. New Patient before today's location is set)
   ------------------------------------------------------------------------- */

.df-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--df-space-2);
  margin: var(--df-space-3) 0 0;
  padding: 10px 12px;
  background: var(--df-primary-light);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  color: var(--df-text);
  font-size: 13.5px;
  line-height: 1.4;
}

.df-hint .mud-icon-root {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--df-primary);
}

.df-sidenav a.df-nav-off {
  opacity: 0.75;
}

.df-sidenav a small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}

/* -------------------------------------------------------------------------
   A switched-off button must look switched off (it used to look clickable)
   ------------------------------------------------------------------------- */

.df-btn:disabled,
.df-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.df-btn:disabled:hover,
.df-btn[disabled]:hover {
  background: revert-layer;
}

/* -------------------------------------------------------------------------
   Dated record lists (Blood Investigation / Cardiac Echo / ... tabs)
   ------------------------------------------------------------------------- */

.df-cell-preview {
  max-width: 0;              /* lets the cell shrink so the text below can be cut with "..." */
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--df-text-muted);
}

.df-table tr.df-row-active td {
  background: var(--df-primary-light);
}
.df-cell-date {
  white-space: nowrap;       /* keep "19-Sep-2026" on one line */
  vertical-align: middle;
}
/* Patient age next to the name (top bar) and in the profile card header */
.df-topbar-age { margin-left: 10px; font-size: 13px; font-weight: 500; opacity: .85; white-space: nowrap; }
.df-age-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--df-primary-light, #e8f0fb); color: var(--df-primary, #1d4a80); }
.df-nid-input input { text-transform: uppercase; letter-spacing: .04em; }

/* Locations panel: working days and hours */
.df-days { display: flex; flex-wrap: wrap; gap: 0 4px; }
.df-hours { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.df-hours input[type="time"] { padding: 6px 8px; border: 1px solid var(--df-border, #cbd5e1); border-radius: 6px; font: inherit; }
.df-loc-card { border: 1px solid var(--df-border, #d8dee9); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.df-loc-card.df-loc-off { opacity: .65; }
.df-loc-summary { color: var(--df-text-muted); font-size: 13px; }

/* Prescription screen: send status */
.df-send-line { margin: 8px 0 0; font-size: 13.5px; }
.df-send-ok { color: var(--df-success, #15803d); }
.df-send-bad { color: var(--df-danger, #b91c1c); }
.df-rx-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }

/* Working locations: one row per day (tick, from, to) */
.df-hours-table { border-collapse: collapse; margin: 6px 0 10px; }
.df-hours-table td { padding: 0 14px 0 0; vertical-align: middle; }
.df-hours-table .df-hours-day { min-width: 150px; }
.df-hours-table label { display: inline-flex; align-items: center; gap: 6px; }
.df-hours-table input[type="time"] { padding: 6px 8px; border: 1px solid var(--df-border, #cbd5e1); border-radius: 6px; font: inherit; }
.df-hours-table input[type="time"]:disabled { opacity: .45; }

/* New Patient: answer to "is this NID already registered?" */
.df-nid-found, .df-nid-new { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; margin-top: 4px; font-size: 14px; }
.df-nid-found { background: #fff4e0; border: 1px solid #f0c36d; color: #6b4a00; }
.df-nid-new { background: #e8f6ee; border: 1px solid #9ed6b3; color: #1b5e3a; align-items: center; }

/* Patient search in the top bar */
/* The search box takes the room between the (centred) STAGING strip and the user name, up to 320px, so the two never touch */
.df-topsearch { flex: 0 0 auto; width: clamp(140px, calc(50vw - 430px), 320px); margin-left: auto; }
@media (max-width: 1250px) { .df-topsearch { width: clamp(140px, calc(50vw - 340px), 320px); } }
/* narrow windows: the strip joins the row (nothing floats over anything) and the search box shares what is left */
@media (max-width: 1000px) {
  .df-topbar .df-env-topbar { position: static !important; transform: none !important; margin: 0 auto; flex: 0 0 auto; }
  .df-topsearch { flex: 1 1 140px; width: auto; max-width: 320px; }
}
.df-topsearch .mud-input-control { margin: 0; }
.df-topsearch .mud-input-outlined-border { border-color: rgba(255,255,255,.35) !important; }
.df-topsearch .mud-input { background: rgba(255,255,255,.96); border-radius: 8px; color: #1f2a37; }
.df-topsearch .mud-input input { padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
.df-topsearch-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; }
.df-topsearch-item small { color: var(--df-text-muted, #64748b); white-space: nowrap; }

/* Patient record side menu (desktop): icon and text left aligned, every tab on a single line */
@media (min-width: 769px) {
  .df-layout-icons { flex: 0 0 250px; }
  .df-layout-icons .mud-button-root {
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
    padding-left: 14px;
    padding-right: 10px;
    font-size: 13px;
    letter-spacing: .03em;
  }
  .df-layout-icons .mud-button-label { justify-content: flex-start; width: 100%; }
  .df-layout-icons .mud-button-icon-start { margin-left: 0; margin-right: 12px; }
}

/* The STAGING strip stays centred in the top bar; below this width its small print is dropped so it never touches the search box */
.df-topbar .df-topbar-user, .df-topbar .df-btn-icon { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 1250px) { .df-topbar .df-env-sub { display: none; } }
.df-loc-summary { margin-top: 8px; }

/* Main menu appointment calendar (this month and next) */
.df-cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 12px; }
.df-cal-title { margin: 0 0 8px; font-size: 17px; }
.df-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.df-cal-head { text-align: center; font-size: 12px; font-weight: 700; color: var(--df-text-muted, #64748b); padding: 4px 0; text-transform: uppercase; }
.df-cal-blank { min-height: 0; }
.df-cal-day {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-height: 84px; padding: 6px; text-align: left; font: inherit; cursor: pointer;
  background: var(--df-surface, #fff); border: 1px solid var(--df-border, #d8dee9); border-radius: 8px; color: var(--df-text, #1f2a37);
}
.df-cal-day:hover { border-color: var(--df-primary, #2563a8); }
.df-cal-num { font-size: 13px; font-weight: 600; }
.df-cal-today { box-shadow: inset 0 0 0 2px var(--df-primary, #2563a8); }
.df-cal-today .df-cal-num { color: var(--df-primary, #2563a8); }
.df-cal-has { background: var(--df-primary-light, #eaf1fa); }
.df-cal-selected { border-color: var(--df-primary, #2563a8); background: #dbe8f8; }
.df-cal-total { display: none; position: absolute; right: 4px; top: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--df-primary, #2563a8); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px; }
.df-cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.df-cal-chip { display: block; padding: 1px 5px; border-radius: 4px; color: #fff; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.df-cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.df-cal-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.df-cal-detail { margin-top: 16px; }
.df-cal-detail h3 { margin: 0 0 8px; font-size: 16px; }
.df-cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.df-cal-range { flex: 1 1 200px; text-align: center; font-size: 16px; }

/* Appointment status labels */
.df-flag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.df-flag-ok { background: #dcf3e4; color: #14532d; }
.df-flag-bad { background: #fde2e2; color: #991b1b; }
.df-flag-muted { background: #e5e7eb; color: #374151; }
.df-flag-warn { background: #fdf0d2; color: #7a4b00; }
.df-flag-info { background: #dbe8f8; color: #1e4f8a; }

/* -------------------------------------------------------------------------
   Roles, allergies, vital signs, vaccinations, medical certificates
   ------------------------------------------------------------------------- */

.df-field-label {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--df-text-muted);
}

.df-link-button {
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--df-primary);
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
}

.df-warn-text { color: var(--df-warning); font-weight: 600; }

.df-row-muted td { background: #f7f8fa; color: var(--df-text-muted); }

.df-pre {
  margin: 6px 0;
  padding: 10px 12px;
  border: 1px solid var(--df-border);
  border-radius: 8px;
  background: var(--df-surface);
  font: 13.5px/1.45 var(--df-font);
  white-space: pre-wrap;
}

/* feature checklist in the role editor */
.df-feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.df-feature-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--df-border); border-radius: 8px; cursor: pointer;
}
.df-feature-item input { margin-top: 4px; width: 18px; height: 18px; }
.df-feature-item strong { display: block; font-size: 14px; }
.df-feature-item small { display: block; color: var(--df-text-muted); font-size: 12.5px; }

/* toggle chips (reactions, chart choices) */
.df-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.df-chip {
  padding: 6px 12px; border: 1px solid var(--df-border); border-radius: 999px;
  background: var(--df-surface); color: var(--df-text); font: 500 13.5px var(--df-font); cursor: pointer;
}
.df-chip-small { padding: 4px 10px; font-size: 12.5px; }
.df-chip.active { background: var(--df-primary); border-color: var(--df-primary); color: #fff; }

/* allergy alerts */
.df-allergy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--df-border); font-size: 14px; text-align: left;
}
.df-allergy + .df-allergy { margin-top: 4px; }
.df-allergy-alert { background: #fdecea; border-color: #f2b8b5; color: #8a1f1a; }
.df-allergy-ok { background: #e9f6ee; border-color: #b7dfc6; color: #1e6b3f; }
.df-allergy-unknown { background: #fff6e0; border-color: #f0d9a3; color: #7a5a10; }
.df-allergy-chip { padding: 2px 10px; border-radius: 999px; background: #fff; border: 1px solid #f2b8b5; font-weight: 600; }
.df-allergy-chip small { font-weight: 400; }
.df-allergy-chip-severe { border-color: #d64545; }
.df-allergy-chip-lt { background: #d64545; border-color: #d64545; color: #fff; }
.df-allergy-tag { margin-left: 4px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.08); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

.df-alerts { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.df-alerts-item { display: block; width: 100%; padding: 0; border: none; background: none; text-align: left; cursor: pointer; font: inherit; }

.df-sev { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef1f5; }
.df-sev-moderate { background: #fff1cf; color: #7a5a10; }
.df-sev-severe { background: #fbdcdc; color: #8a1f1a; }
.df-sev-lt { background: #d64545; color: #fff; }

/* medical certificate */
.df-cert-auto { padding: 10px 14px; border: 1px dashed var(--df-border); border-radius: 8px; background: var(--df-primary-light); font-size: 14px; }
.df-receipt-box { padding: 10px 14px; border: 1px dashed var(--df-border); border-radius: 8px; background: var(--df-primary-light); font-size: 14px; }
.df-cert-row { padding: 10px 0; border-bottom: 1px solid var(--df-border); }
.df-cert-row:last-child { border-bottom: none; }
.df-cert-head { font-size: 15px; }

/* vaccinations */
.df-due { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.df-due-overdue { background: #fbdcdc; color: #8a1f1a; }
.df-due-due { background: #fff1cf; color: #7a5a10; }
.df-due-upcoming { background: #e3eefb; color: #1d4d86; }

.df-trust { display: inline-block; padding: 0 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
.df-trust-verified { background: #e1f3e8; color: #1e6b3f; }
.df-trust-documented { background: #e3eefb; color: #1d4d86; }
.df-trust-reported { background: #fff1cf; color: #7a5a10; }

.df-safety { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--df-border); border-radius: 8px; background: var(--df-surface); }
.df-safety-item { margin-top: 6px; padding: 6px 10px; border-left: 4px solid var(--df-border); border-radius: 4px; font-size: 14px; }
.df-safety-block { background: #fdecea; border-left-color: #d64545; color: #8a1f1a; font-weight: 600; }
.df-safety-warn { background: #fff6e0; border-left-color: #d99a2b; color: #6b4d0c; }
.df-safety-info { background: #eaf2fb; border-left-color: #2563a8; color: #1d4d86; }

/* vital signs */
.df-vital-abn { color: #c0392b !important; font-weight: 700; }

.df-chart-wrap { margin-top: 10px; }
.df-chart { display: block; width: 100%; height: auto; max-height: 430px; }
.df-chart-band { fill: rgba(47, 158, 91, 0.12); }
.df-chart-grid { stroke: #e3e7ee; stroke-width: 1; }
.df-chart-grid-x { stroke-dasharray: 3 4; }
.df-chart-axis { stroke: #9aa5b5; stroke-width: 1.2; }
.df-chart-label { fill: var(--df-text-muted); font: 12px var(--df-font); }
.df-chart-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.df-chart-line.s1 { stroke: #2563a8; }
.df-chart-line.s2 { stroke: #d64545; }
.df-chart-dot { stroke: #fff; stroke-width: 1.5; }
.df-chart-dot.s1 { fill: #2563a8; }
.df-chart-dot.s2 { fill: #d64545; }
.df-chart-legend { display: flex; gap: 16px; justify-content: center; font-size: 13px; color: var(--df-text-muted); }
.df-chart-key { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.df-chart-key.s1 { background: #2563a8; }
.df-chart-key.s2 { background: #d64545; }

/* -------------------------------------------------------------------------
   Header that stays put while scrolling, role switch, role choice, misc
   ------------------------------------------------------------------------- */

/* the main bar stays at the top; the page bar (patient name, page title) stays right under it.
   --df-topbar-h is measured in sidenav.js so it stays right when the bar wraps on a narrow window */
.df-topbar:not(.df-pagebar) { position: sticky; top: 0; z-index: 1100; }
.df-pagebar { position: sticky; top: var(--df-topbar-h, 64px); z-index: 1090; }

.df-topbar .df-topbar-user { color: #fff; text-decoration: none; }
.df-topbar a.df-topbar-user:hover { text-decoration: underline; }

.df-role-switch { margin: 0; flex: 0 0 auto; }
.df-role-switch select {
  max-width: 190px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 6px;
  background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 13px var(--df-font); cursor: pointer;
}
.df-role-switch select option { color: #1f2937; background: #fff; }
.df-role-chip {
  flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

.df-role-choice { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 12px 16px; text-align: left; }
.df-role-choice small { margin-top: 3px; font-weight: 400; opacity: 0.9; white-space: normal; }

.df-rules { margin: 6px 0 6px 18px; padding: 0; font-size: 14px; line-height: 1.6; }

.df-deceased {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid #b9bcc4;
  background: #eceef2; color: #3b4252; font-weight: 700;
}

.df-saved-card { border: 2px solid var(--df-success); background: #f3fbf6; }