/* Comfortaa — Google Font (rounded geometric, global app font) */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/* Self-hosted Comfortaa (latin) — later @font-face wins per weight, so
   screens keep rendering Comfortaa even when Google Fonts is unreachable.
   Kept in sync with css/print-fonts.css. */
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/comfortaa-300.woff2') format('woff2'); }
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/comfortaa-400.woff2') format('woff2'); }
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/comfortaa-500.woff2') format('woff2'); }
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/comfortaa-600.woff2') format('woff2'); }
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/comfortaa-700.woff2') format('woff2'); }

/* ── Global application ─────────────────────────────────────────────────────
   !important is required: every page head carries an inline
   * { font-family:'Comfortaa' !important } override, and this
   stylesheet loads after those inline styles. Print windows do not
   load this file, so printouts use their own Comfortaa stacks
   (doctor-core.js / print-utils.js / print-config.js). */

* {
  font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Comfortaa', sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Utility classes for font weights */
.font-comfortaa { font-family: 'Comfortaa', sans-serif !important; }
.font-comfortaa-light { font-family: 'Comfortaa', sans-serif !important; font-weight: 300 !important; }
.font-comfortaa-regular { font-family: 'Comfortaa', sans-serif !important; font-weight: 400 !important; }
.font-comfortaa-medium { font-family: 'Comfortaa', sans-serif !important; font-weight: 500 !important; }
.font-comfortaa-semibold { font-family: 'Comfortaa', sans-serif !important; font-weight: 600 !important; }
.font-comfortaa-bold { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; }

/* ── Readability: larger base font across O3HMS ── */
body { font-size: 16px !important; line-height: 1.6; }
h1 { font-size: 28px !important; }
h2 { font-size: 24px !important; }
h3 { font-size: 20px !important; }
h4 { font-size: 18px !important; }

/* ── Larger chips in symptoms / chief complaints ── */
.sym-quick-chip, .sx-chip, .hx-chip, .pmh-chip {
  font-size: 15px !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  background: #f0f1f3 !important;
  color: #333 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Selected chips: teal fill, white text */
.sx-chip.sel, .sym-quick-chip.used {
  background: #1b5e4d !important;
  color: #fff !important;
  text-decoration: none !important;
}
/* Keep the ddx blue variant distinct */
.sx-chip.sel-blue {
  background: rgba(56,189,248,0.08) !important;
  color: #38bdf8 !important;
}

/* Remove buttons on selected chips */
.sx-remove, .sym-chip-del {
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  opacity: 0.7;
}
.sx-remove:hover, .sym-chip-del:hover {
  opacity: 1;
}

/* ── Quick-chip hover actions: overlay icons, zero layout shift ── */
.sym-quick-chip-wrap { position: relative; display: inline-flex; align-items: center; }
.sym-quick-chip {
  display: inline-flex; align-items: center; position: relative;
  font-size: 14px !important;
  padding: 4px 28px 4px 12px !important; /* fixed right padding for icons */
  border-radius: 16px !important;
  background: #f0f1f3 !important;
  color: #333 !important;
  gap: 4px !important;
  transition: background 0.2s;
}
.sym-quick-chip:hover { background: #e5e7eb !important; }
.sym-quick-chip .chip-actions {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none; /* prevent interaction when hidden */
}
.sym-quick-chip:hover .chip-actions { opacity: 1; pointer-events: auto; }
.sym-quick-chip .chip-actions span {
  font-size: 10px; cursor: pointer; color: #6b7280; padding: 2px; border-radius: 4px;
  transition: color 0.15s, background 0.15s; line-height: 1;
}
.sym-quick-chip .chip-actions .edit:hover { color: #3b82f6; background: rgba(59,130,246,0.1); }
.sym-quick-chip .chip-actions .delete:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
/* Edit mode: the chip itself becomes the input */
.sym-quick-chip.editing {
  padding: 2px 8px !important;
  background: #fff !important;
  border: 2px solid #1b5e4d !important;
}
.sym-quick-chip.editing .chip-actions { display: none; }
.chip-edit-input {
  font-size: 14px; border: none; outline: none; background: transparent;
  font-family: 'Comfortaa', sans-serif; padding: 2px 4px; width: 80px;
}
.chip-edit-save { color: #1b5e4d; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.chip-edit-save:hover { background: #dcfce7; }
.chip-edit-cancel { color: #ef4444; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.chip-edit-cancel:hover { background: #fee2e2; }

/* ── Panel buttons — dark readable text on light pills ── */
.panel-btn {
  color: #1a1a2e !important;
  background: #f0f4f8 !important;
  border: 1px solid #d1dbe8 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: background 0.15s;
}
.panel-btn:hover { background: #e2e8f0 !important; border-color: #a5b4fc !important; }
.panel-btn--basic {
  background: rgba(99, 179, 237, 0.08) !important;
  border: 1px solid rgba(99, 179, 237, 0.2) !important;
  color: #1a1a2e !important;
}

/* ── Drag-to-reorder chip states ── */
.sym-quick-chip-wrap.sortable-chosen { z-index: 1000; }
.sym-quick-chip-wrap.sortable-chosen .sym-quick-chip {
  opacity: 0.8;
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: grabbing !important;
}
.sym-quick-chip-wrap.sortable-ghost .sym-quick-chip {
  opacity: 0.3;
  border: 2px dashed #1b5e4d;
  background: transparent;
}
#commonSymptomsChips.sortable-drag { cursor: grabbing; }

/* ── Print: Comfortaa everywhere on paper ── */
@media print {
  * {
    font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  }
}