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

:root {
  --bg:           #F8FAFB;
  --surface:      #FFFFFF;
  --text:         #1A2332;
  --text-muted:   #64748B;
  --accent:       #0891B2;
  --accent-light: #E0F2FE;
  --border:       #E2E8F0;
  --shadow:       0 1px 4px rgba(0,0,0,0.08);
  --radius:       12px;
  --radius-sm:    8px;
}

* { box-sizing: border-box; }

body {
  background:  var(--bg);
  font-family: 'Heebo', Arial, sans-serif;
  color:       var(--text);
  margin:      0;
}

/* ── מיכל ראשי ─────────────────────────────── */
.app-container {
  font-family: 'Heebo', Arial, sans-serif;
  padding:     32px;
  max-width:   1000px;
  margin:      0 auto;
}

.app-title {
  margin-bottom: 4px;
  font-size:     24px;
  font-weight:   700;
  color:         var(--text);
}

.app-subtitle {
  opacity:       0.6;
  margin-bottom: 14px;
  font-size:     14px;
}

/* ── Meta bar ───────────────────────────────── */
.meta-bar {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   8px;
  padding:               10px 14px;
  border:                1px solid var(--border);
  border-radius:         var(--radius);
  background:            var(--surface);
  margin-bottom:         16px;
  font-size:             13px;
  color:                 var(--text-muted);
}

/* ── Dropdown ───────────────────────────────── */
.area-info-wrapper { margin-top: 20px; }

/* ── כרטיס אזור ─────────────────────────────── */
.area-card {
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       20px;
  box-shadow:    var(--shadow);
  background:    var(--surface);
}

.card-header {
  margin-bottom:  16px;
  padding-bottom: 14px;
  border-bottom:  1px solid var(--border);
}

.card-title {
  margin:      0 0 6px;
  font-size:   20px;
  font-weight: 600;
}

.card-meta {
  font-size: 13px;
  color:     var(--text-muted);
  opacity:   0.9;
}

/* ── גריד תוכן ──────────────────────────────── */
.content-grid {
  display:               grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap:                   20px;
  align-items:           start;
}

.left-col  { min-width: 260px; }
.right-col { flex: 1 1 auto; min-width: 0; }

/* ── כותרות סקשן ────────────────────────────── */
.section-title {
  margin:         16px 0 6px;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--accent);
  border-bottom:  1px solid var(--border);
  padding-bottom: 4px;
}

/* ── רכיבים קטנים ───────────────────────────── */
.pill {
  display:       inline-block;
  padding:       3px 10px;
  border-radius: 999px;
  border:        1px solid var(--border);
  margin-block:  0 6px;
  margin-inline: 0 6px;
  font-size:     12px;
  background:    var(--accent-light);
  color:         var(--accent);
}

.color-swatch {
  display:        inline-block;
  width:          16px;
  height:         16px;
  border-radius:  4px;
  margin-inline-end: 6px;
  vertical-align: middle;
  border:         1px solid rgba(0,0,0,0.1);
}

.area-image {
  max-width:     100%;
  height:        auto;
  border-radius: var(--radius);
  border:        1px solid var(--border);
}

.no-image {
  opacity:       0.5;
  font-size:     13px;
  text-align:    center;
  padding:       20px;
  border:        1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.meningioma-block {
  padding:       10px 12px;
  border:        1px solid #fde047;
  background:    #fffbeb;
  border-radius: var(--radius-sm);
  line-height:   1.6;
  font-size:     14px;
}

.info-list {
  margin:      4px 0 0;
  padding-right: 18px;
  font-size:   14px;
  line-height: 1.7;
}

.graph-container {
  width:         100%;
  border:        1px solid var(--border);
  border-radius: var(--radius);
}

.graph-tall      { height: 360px; }
.graph-schematic { width: 100%; height: 320px; }

.spacer-sm       { height: 8px; }
.placeholder-text { opacity: 0.6; font-size: 14px; }
.error-text       { color: #b00; }

/* ── מובייל ─────────────────────────────────── */
body { overflow-x: hidden; }

@media (max-width: 768px) {
  .app-container { padding: 14px; }
  .app-title     { font-size: 20px; }
  .meta-bar      { padding: 8px 10px; }
  .area-card     { padding: 14px; }
  .card-title    { font-size: 18px; }

  .content-grid  { grid-template-columns: 1fr; gap: 16px; }
  .left-col      { min-width: 0; }

  .graph-tall      { height: 260px; }
  .graph-schematic { height: 260px; }

  /* מונע זום אוטומטי ב-iOS ומגדיל יעד מגע */
  .Select-control, .Select-input > input, .dash-dropdown { font-size: 16px; min-height: 44px; }
}