/* ============================================================
   DOCTOR NOTES PWA — STYLESHEET
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ---- Reset & Variables ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:        #1a56db;
  --blue-light:  #e8f0fe;
  --blue-dark:   #1240a8;
  --green:       #0f7a55;
  --green-light: #d1fae5;
  --red:         #c81e1e;
  --red-light:   #fde8e8;
  --orange:      #d97706;
  --orange-light:#fef3c7;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-800:    #1f2937;
  --gray-900:    #111827;
  --white:       #ffffff;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.06);
  --shadow:      0 2px 8px rgba(0,0,0,.10);
  --shadow-md:   0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.15);
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   20px;
  --nav-height:  68px;
  --header-height: 60px;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--gray-100);
  color: var(--gray-800);
  /* min-height, not height: with a fixed height + box-sizing:border-box,
     padding-bottom is computed WITHIN that fixed budget -- once content
     overflows past 100% of the viewport (true on every tab of a scrolling
     form app), the overflow spills out past the box entirely and the
     padding never gets a chance to trail after it. Confirmed empirically:
     with `height:100%`, no amount of padding-bottom (tested up to 300px
     !important) moved the Settings tab's last paragraph out from behind
     the fixed bottom nav at all. min-height still fills the viewport for
     short tabs, but lets the box (and its padding) actually grow past
     100% once content needs more room. */
  min-height: 100%;
  overflow-x: hidden;
  /* var(--nav-height) alone left the last few pixels of a tab's final
     element rendering underneath the fixed bottom nav (confirmed on the
     Settings tab's closing privacy paragraph -- measured 11px of overlap).
     The extra 20px is a safety margin for any other tab's content, and
     env(safe-area-inset-bottom) accounts for the home-indicator area on
     notched phones, matching the pattern already used for .sticky-
     generate-bar's own bottom offset. */
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px);
}

/* ---- Header ---- */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  box-shadow: var(--shadow);
}

.app-header h1 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.header-sub {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: 400;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:hover, .btn-icon:active { background: rgba(255,255,255,.15); }
.btn-icon svg { width: 22px; height: 22px; }

/* ---- Drive status badge ---- */
.drive-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  background: rgba(255,255,255,.15);
  border: none;
  color: var(--white);
  font-family: inherit;
}
.drive-status:hover { background: rgba(255,255,255,.25); }
.drive-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-400);
  flex-shrink: 0;
}
.drive-dot.connected { background: #4ade80; }
.drive-dot.syncing {
  background: #fbbf24;
  animation: driveDotPulse 1s ease-in-out infinite;
}
@keyframes driveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* ---- Main content area ---- */
.main-content {
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height) - var(--nav-height));
}

.tab-panel {
  display: none;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}
.tab-panel.active { display: block; }

/* Reserves room below the last field so it can scroll fully clear of the
   fixed .sticky-generate-bar (measured ~96px tall + the 8px gap above the
   bottom nav) instead of being permanently covered by it. */
#tab-home { padding-bottom: 120px; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Bottom Navigation ---- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  display: flex;
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 0.65rem;
  font-weight: 500;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 0;
  position: relative;
}
.nav-btn svg { width: 24px; height: 24px; }
.nav-btn.active { color: var(--blue); }
.nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 3px;
  background: var(--blue);
  border-radius: 0 0 3px 3px;
}
.nav-badge {
  position: absolute;
  top: 4px; right: 50%;
  margin-right: -20px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---- Cards ---- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}

.card-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title svg { width: 16px; height: 16px; }

/* ---- Form Elements ---- */
.form-group {
  margin-bottom: 14px;
}

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 5px;
}

label .he {
  font-family: 'Heebo', sans-serif;
  font-size: 0.9em;
  color: var(--gray-500);
  margin-right: 4px;
}

input[type="text"],
input[type="date"],
input[type="tel"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
}
textarea {
  resize: vertical;
  min-height: 100px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---- Notes field with voice btn ---- */
.notes-wrapper {
  position: relative;
}
.notes-wrapper textarea {
  padding-right: 48px;
}
.voice-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--blue-light);
  color: var(--blue);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.voice-btn:active { transform: scale(0.92); }
.voice-btn.recording {
  background: var(--red-light);
  color: var(--red);
  animation: pulse 1s infinite;
}
.voice-btn svg { width: 18px; height: 18px; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ---- Autocomplete dropdown ---- */
.autocomplete-wrapper { position: relative; }
.autocomplete-list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--white);
  border: 1.5px solid var(--blue);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: var(--shadow);
  display: none;
}
.autocomplete-list.open { display: block; }
.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
  display: flex; align-items: center; justify-content: space-between;
}
.autocomplete-item:hover, .autocomplete-item.highlighted {
  background: var(--blue-light);
}
.autocomplete-item .drug-he {
  font-family: 'Heebo', sans-serif;
  font-size: 0.95rem;
}
.autocomplete-item .drug-en {
  font-size: 0.78rem;
  color: var(--gray-500);
}
.autocomplete-item.autocomplete-add {
  color: var(--blue);
  font-weight: 600;
  font-size: 0.85rem;
  justify-content: flex-start;
  background: var(--blue-light);
}
.autocomplete-item.autocomplete-add:hover { background: #c7d9f9; }

/* ---- Drug name hint / warning (below drug search input) ---- */
.drug-name-hint {
  font-family: 'Heebo', sans-serif;
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 4px;
  padding: 0 2px;
}
.drug-name-warning {
  font-size: 0.76rem;
  color: var(--orange);
  background: var(--orange-light);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 6px;
  line-height: 1.4;
}
.drug-name-warning .he { font-family: 'Heebo', sans-serif; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(26,86,219,.3);
}
.btn-primary:hover { background: var(--blue-dark); }

.btn-success {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(15,122,85,.3);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn-outline:hover { background: var(--blue-light); }

.btn-ghost {
  background: var(--gray-100);
  color: var(--gray-700);
}
.btn-ghost:hover { background: var(--gray-200); }

.btn-danger {
  background: var(--red);
  color: var(--white);
}

.btn-sm {
  padding: 7px 12px;
  font-size: 0.82rem;
}

.btn-full { width: 100%; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ---- Generate button (big, prominent, sticky on mobile) ---- */
.generate-btn {
  padding: 16px;
  font-size: 1.05rem;
  border-radius: var(--radius);
  letter-spacing: 0.3px;
}

.sticky-generate-bar {
  /* position:fixed, not sticky -- sticky still occupies its natural slot in
     the document flow, so with nothing after it reserving that space, it
     started sticking to the viewport bottom well before the form had
     actually scrolled that far, permanently covering whatever field
     happened to be at the bottom of the screen. #tab-home reserves the
     matching padding-bottom below so the last real field (clinical notes)
     can still scroll fully clear of it. */
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 8px);
  z-index: 60;
  background: var(--gray-100);
  padding: 10px 16px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 16px -8px rgba(0,0,0,.12);
}

.drive-sync-status-text {
  direction: ltr; /* always plain English status text (Saving.../PDF downloaded...) */
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 8px;
  margin-bottom: 12px;
  transition: color 0.2s;
}

/* ---- Patient search ---- */
.patient-search-wrapper {
  position: relative;
  margin-bottom: 10px;
}
.patient-search-wrapper input {
  padding-inline-start: 38px;
}
.patient-search-wrapper svg {
  position: absolute;
  inset-inline-start: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  width: 18px; height: 18px;
  pointer-events: none;
}

.recent-patients {
  display: none;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: -8px;
  margin-bottom: 12px;
}
.recent-patients.open { display: block; }
.patient-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}
.patient-item:last-child { border-bottom: none; }
.patient-item:hover { background: var(--blue-light); }
.patient-item-info .name {
  font-weight: 500;
  font-size: 0.95rem;
  font-family: 'Heebo', sans-serif;
}
.patient-item-info .meta {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 1px;
}
.patient-item-actions { display: flex; gap: 6px; }
.btn-delete-patient {
  background: none; border: none;
  color: var(--gray-400); cursor: pointer;
  padding: 4px; border-radius: 4px;
  transition: color 0.1s;
}
.btn-delete-patient:hover { color: var(--red); }
.btn-delete-patient svg { width: 16px; height: 16px; }

/* ---- Prescription: Drug rows ---- */
.drug-rows { display: flex; flex-direction: column; gap: 10px; }

.drug-row {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--gray-50);
  position: relative;
}

.drug-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.drug-row-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-light);
  padding: 2px 8px;
  border-radius: 12px;
}
.btn-remove-drug {
  background: none; border: none;
  color: var(--gray-400); cursor: pointer; padding: 4px;
  border-radius: 4px; transition: color 0.1s;
}
.btn-remove-drug:hover { color: var(--red); }
.btn-remove-drug svg { width: 18px; height: 18px; }

.drug-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.drug-row-grid .full-width { grid-column: 1 / -1; }

.drug-row label { font-size: 0.75rem; margin-bottom: 3px; }
.drug-row input, .drug-row select { padding: 9px 10px; font-size: 0.9rem; }

/* ---- Language toggle ---- */
.lang-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.lang-toggle-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lang-toggle-group {
  display: flex;
  border: 1.5px solid var(--blue);
  border-radius: 8px;
  overflow: hidden;
}
.lang-btn {
  background: none;
  border: none;
  padding: 6px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--blue);
  font-family: 'Heebo', 'Inter', sans-serif;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn + .lang-btn { border-left: 1.5px solid var(--blue); }
.lang-btn.active {
  background: var(--blue);
  color: var(--white);
}

/* ---- Section divider inside cards ---- */
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* ---- Vitals grid ---- */
.vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.vital-field label {
  font-size: 0.72rem;
  margin-bottom: 3px;
  font-family: 'Heebo', sans-serif;
  color: var(--gray-600);
}
.vital-field input {
  padding: 9px 10px;
  font-size: 0.95rem;
  text-align: center;
}

/* ---- ICD tag (selected diagnosis) ---- */
.icd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid rgba(26,86,219,.25);
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  max-width: 100%;
  word-break: break-word;
}
.icd-tag button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--blue-dark);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.icd-tag button:hover { color: var(--red); }

/* ---- Template Phrases ---- */
.phrases-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 12px 0 0;
  border: none;
  background: none;
  width: 100%;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.phrases-toggle svg { width: 18px; height: 18px; transition: transform 0.2s; }
.phrases-toggle.open svg { transform: rotate(180deg); }

.phrases-panel {
  display: none;
  padding-top: 10px;
  flex-wrap: wrap;
  gap: 7px;
}
.phrases-panel.open { display: flex; }

.phrase-chip {
  background: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid rgba(26,86,219,.2);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-align: right;
  direction: rtl;
}
.phrase-chip:hover { background: #c7d9f9; }

/* ---- History tab ---- */
.doc-log-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.doc-log-item:last-child { border-bottom: none; }

.doc-log-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--blue-light);
  color: var(--blue);
}
.doc-log-icon svg { width: 20px; height: 20px; }

.doc-log-info { flex: 1; min-width: 0; }
.doc-log-type {
  font-weight: 600;
  font-size: 0.9rem;
  font-family: 'Heebo', sans-serif;
}
.doc-log-patient {
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-top: 1px;
  font-family: 'Heebo', sans-serif;
}
.doc-log-date {
  font-size: 0.73rem;
  color: var(--gray-400);
  margin-top: 2px;
}
.doc-log-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.doc-log-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--gray-400); padding: 4px; border-radius: 4px;
  transition: color 0.1s, background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.doc-log-icon-btn:hover { color: var(--blue); background: var(--blue-light); }
.doc-log-icon-btn-danger:hover { color: var(--red); background: var(--red-light); }
.doc-log-icon-btn svg { width: 15px; height: 15px; display: block; }

/* ---- Patients tab ---- */
.patient-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.patient-list-item:last-child { border-bottom: none; }
.patient-list-name {
  font-weight: 500; font-size: 0.95rem; font-family: 'Heebo', sans-serif;
}
.patient-list-meta { font-size: 0.78rem; color: var(--gray-500); margin-top: 2px; }

/* ---- Settings tab ---- */
.settings-section {
  margin-bottom: 8px;
}
.setting-row {
  display: flex; align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
  gap: 12px;
}
.setting-row:last-child { border-bottom: none; }
.setting-icon {
  width: 36px; height: 36px;
  background: var(--gray-100);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-600); flex-shrink: 0;
}
.setting-icon svg { width: 18px; height: 18px; }
.setting-info { flex: 1; }
.setting-label { font-size: 0.82rem; color: var(--gray-500); }
.setting-value { font-size: 0.95rem; font-weight: 500; }

.img-upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.img-upload-area:hover { border-color: var(--blue); }
.img-upload-area.has-image { border-color: var(--green); border-style: solid; }
.img-upload-preview { max-height: 60px; max-width: 160px; margin: 0 auto 8px; display: block; }
.img-upload-label {
  direction: ltr; /* "Tap to upload / signature.png" is plain English */
  font-size: 0.82rem; color: var(--gray-500);
  pointer-events: none;
}
input[type="file"] { display: none; }

/* ---- Toast notifications ---- */
.toast-container {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
  max-width: calc(100vw - 32px);
}

.toast {
  background: var(--gray-900);
  color: var(--white);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.25s ease;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.success { background: var(--green); }
.toast.error   { background: var(--red); }
.toast.info    { background: var(--blue); }
.toast.warning { background: var(--orange); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Loading overlay ---- */
.loading-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 500;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
}
.loading-overlay.visible { display: flex; }
.spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--white); font-weight: 500; }

/* ---- Modal ---- */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 400;
  align-items: flex-end; justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 20px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.modal-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
.modal-handle {
  width: 36px; height: 4px;
  background: var(--gray-300);
  border-radius: 2px;
  margin: 0 auto 16px;
}

/* ---- Empty state ---- */
.empty-state {
  direction: ltr; /* "No documents yet" / "No saved patients" — plain English */
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-400);
}
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 12px; display: block; }
.empty-state p { font-size: 0.9rem; }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-blue   { background: var(--blue-light);  color: var(--blue-dark); }
.badge-green  { background: var(--green-light); color: var(--green); }
.badge-orange { background: var(--orange-light); color: var(--orange); }

/* ---- Divider ---- */
.divider { height: 1px; background: var(--gray-200); margin: 12px 0; }

/* ---- Two-column grid ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- Pending sync indicator ---- */
.pending-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  margin-left: 6px;
}

/* ---- RTL document preview (for PDF capture) ---- */
#doc-preview-container {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 794px;
  background: white;
  z-index: -1;
  pointer-events: none;
}

/* ---- Sign-in gate ---- */
.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  z-index: 1000;
}
/* Higher specificity than .auth-screen alone, so this reliably wins over
   the display:flex above -- an author stylesheet rule otherwise overrides
   the browser's native [hidden] default even at equal specificity. */
.auth-screen[hidden] {
  display: none;
}
.auth-screen .spinner {
  border: 4px solid var(--gray-200);
  border-top-color: var(--blue);
}
/* No card chrome here (background/shadow/border-radius) -- Clerk's own
   mountSignIn() renders its own styled card into #clerk-sign-in right
   below this. Wrapping it in a second card produced two overlapping
   white boxes instead of one cohesive panel; this is just a plain
   container that centers the doctor's name above Clerk's card. */
.auth-gate-card {
  width: min(360px, calc(100vw - 32px));
  text-align: center;
}
.auth-gate-title {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.auth-gate-sub {
  color: var(--gray-500);
  font-size: .85rem;
  margin-bottom: 24px;
}
.sign-out-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: var(--white);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.sign-out-btn:hover { background: rgba(255,255,255,.25); }
.sign-out-btn svg { width: 16px; height: 16px; }