/* hero.css — Overview hero block: Vitruvian body map, system toggles,
   conditions history, filter toggle, tooltips, badges.
   Ported verbatim from:
     tmp/frontend0/css/dashboard-layout.css (lines 107-245)
     tmp/frontend0/css/app-bodymap.css (full file)
     tmp/frontend0/css/base-landing.css (slow-rotate keyframe) */

/* ===== OVERVIEW HERO: SVG body map + system toggle panel ===== */
    .overview-hero {
      display: flex;
      align-items: stretch;
      gap: 1.5rem;
      margin-bottom: 1rem;
    }
    .overview-hero-svg {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      position: relative;
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: 10px;
    }
    .overview-hero-svg svg {
      width: 100%;
      max-width: 380px;
      height: auto;
      filter: drop-shadow(0 4px 20px rgba(10,110,92,0.10));
    }

    /* Body map SVG interactive elements */
    .bodymap-region { pointer-events: none; transition: fill-opacity 0.3s ease; }
    .bodymap-marker { transition: opacity 0.15s; }

    /* Body map tooltip */
    .bodymap-tooltip {
      display: none; position: absolute; z-index: 100;
      background: var(--white); border: 1px solid var(--gray-100);
      border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      padding: 0.5rem 0.65rem; min-width: 160px; max-width: 260px;
      transform: translate(-50%, -100%) translateY(-12px);
      pointer-events: none; font-size: 0.8rem;
      transition: box-shadow 0.15s;
    }
    .bodymap-tooltip.active { display: block; }
    .bodymap-tooltip.pinned {
      pointer-events: auto;
      box-shadow: 0 6px 24px rgba(0,0,0,0.18);
      border-color: var(--primary);
    }
    .bodymap-tooltip::after {
      content: ''; position: absolute; bottom: -6px; left: 50%;
      transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px;
      background: var(--white); border-right: 1px solid var(--gray-100);
      border-bottom: 1px solid var(--gray-100);
    }
    .bmt-header {
      font-size: 0.7rem; color: var(--text-light); margin-bottom: 0.2rem;
    }
    .bmt-name { font-weight: 600; font-size: 0.85rem; color: var(--text); margin-bottom: 0.25rem; }
    .bmt-location { font-size: 0.7rem; color: var(--text-light); margin-bottom: 0.25rem; }
    .bmt-badges { display: flex; flex-wrap: wrap; gap: 0.2rem; }
    .bmt-badges .hr-badge { font-size: 0.65rem; }

    /* ===== SYSTEM TOGGLE PANEL ===== */
    .overview-hero-systems {
      flex: 1 1 0; min-width: 0;
      display: flex; flex-direction: column;
      overflow: hidden; min-height: 0;
      max-height: 420px;
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: 10px;
    }
    .system-toggles-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--gray-100);
      flex-shrink: 0;
    }
    .system-toggles-title {
      font-weight: 700; font-size: 0.85rem; color: var(--text);
    }
    .system-toggles-btns { display: flex; gap: 0.3rem; }
    .sys-toggle-all {
      background: var(--gray-50); border: 1px solid var(--gray-100);
      border-radius: 4px; padding: 0.2rem 0.5rem; font-size: 0.7rem;
      cursor: pointer; color: var(--text-light); transition: all 0.15s;
    }
    .sys-toggle-all:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
    .sys-filter-toggle.active {
      background: var(--success, #4caf50); color: var(--text-inverted, #fff);
      border-color: var(--success, #4caf50);
    }
    .sys-filter-toggle.active:hover {
      background: var(--success, #4caf50); opacity: 0.85;
    }
    .system-toggles-list {
      overflow-y: auto; flex: 1; padding: 0.3rem 0;
    }
    .system-toggle-row {
      display: flex; align-items: center; gap: 0.4rem;
      padding: 0.35rem 0.8rem; cursor: pointer; transition: background 0.15s;
      border-left: 3px solid transparent;
    }
    .system-toggle-row:hover { background: var(--gray-50); }
    .system-toggle-row.affected { border-left-color: var(--primary); }
    .system-toggle-icon { font-size: 0.85rem; flex-shrink: 0; }
    .system-toggle-name {
      font-size: 0.78rem; color: var(--text); flex: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .system-toggle-desc {
      display: block;
      font-size: 0.65rem;
      color: var(--text-light);
      opacity: 0.75;
      font-weight: 400;
    }
    .system-toggle-count {
      font-size: 0.65rem; font-weight: 700; color: var(--text-inverted);
      min-width: 18px; height: 18px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .system-toggle-ok {
      font-size: 0.7rem; color: #4caf50; flex-shrink: 0; font-weight: 700;
    }

    /* Toggle switch */
    .system-toggle {
      position: relative; width: 28px; height: 16px; flex-shrink: 0;
    }
    .system-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .system-toggle-slider {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: var(--gray-200); border-radius: 8px; cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      border: 1.5px solid var(--toggle-color, var(--gray-200));
      box-sizing: border-box;
    }
    .system-toggle-slider::before {
      content: ''; position: absolute; width: 10px; height: 10px;
      left: 1.5px; bottom: 1.5px; background: #fff; border-radius: 50%;
      transition: transform 0.2s;
      box-shadow: 0 0.5px 1px rgba(0,0,0,0.15);
    }
    .system-toggle input:checked + .system-toggle-slider {
      background: var(--toggle-color, var(--primary));
      border-color: var(--toggle-color, var(--primary));
    }
    .system-toggle input:checked + .system-toggle-slider::before {
      transform: translateX(12px);
    }

/* ===== BODY MAP CONDITIONS (from app-bodymap.css) ===== */
    .history-system-group {
      margin-bottom: 1.25rem;
    }
    .history-system-header {
      font-weight: 600;
      font-size: 1rem;
      color: var(--primary);
      padding: 0.5rem 0.75rem;
      background: var(--primary-light);
      border-radius: 8px;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      user-select: none;
    }
    .history-system-header .system-icon {
      font-size: 1.1rem;
    }
    .history-system-desc {
      font-weight: 400;
      font-size: 0.82rem;
      color: var(--text-light);
      opacity: 0.8;
    }
    .history-system-header .system-count {
      font-weight: 400;
      color: var(--text-light);
      font-size: 0.85rem;
    }
    .history-system-header .system-chevron {
      margin-left: auto;
      transition: transform 0.2s;
    }
    .history-system-header.collapsed .system-chevron {
      transform: rotate(-90deg);
    }
    .history-system-body.collapsed {
      display: none;
    }
    .history-condition-item {
      display: flex; flex-wrap: wrap;
      align-items: flex-start;
      gap: 0.5rem 0.75rem;
      padding: 0.6rem 0.75rem;
      border-radius: 6px;
      margin-bottom: 0.3rem;
      background: var(--gray-50);
      transition: background 0.15s;
    }
    .history-condition-item:hover {
      background: var(--gray-100);
    }
    .history-condition-name {
      flex: 1;
      font-size: 0.95rem;
    }
    .history-condition-date {
      font-size: 0.8rem;
      color: var(--text-light);
      margin-left: 0.5rem;
    }
    .history-condition-location {
      font-size: 0.75rem; color: var(--text-light); flex-basis: 100%;
      margin: -0.1rem 0 0.15rem 0; padding-left: 0.1rem;
    }
    .condition-doc-link {
      cursor: pointer;
      font-size: 0.85rem;
      opacity: 0.45;
      transition: opacity 0.15s, transform 0.15s;
      flex-shrink: 0;
    }
    .condition-doc-link:hover {
      opacity: 1;
      transform: scale(1.15);
    }
    .history-condition-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
    }
    .history-condition-edit {
      color: var(--text-light);
      cursor: pointer;
      font-size: 1rem;
      padding: 0.2rem 0.4rem;
      opacity: 0.6;
      transition: opacity 0.15s, color 0.15s, background 0.15s;
      border-radius: 4px;
    }
    .history-condition-edit:hover {
      opacity: 1;
      color: var(--primary);
      background: var(--primary-light);
    }
    .history-condition-actions {
      display: flex;
      gap: 0.25rem;
      align-items: center;
    }
    .history-condition-delete {
      color: var(--text-light);
      cursor: pointer;
      font-size: 0.9rem;
      padding: 0.2rem 0.4rem;
      opacity: 0.5;
      transition: opacity 0.15s, color 0.15s, background 0.15s;
      border-radius: 4px;
    }
    .history-condition-delete:hover {
      opacity: 1;
      color: #dc3545;
      background: #fde8ea;
    }
    .hr-badge-date {
      background: #e8f5e9;
      color: #2e7d32;
    }
    .history-system-empty {
      padding: 0.5rem 0.75rem;
      color: #28a745;
      font-size: 0.9rem;
      font-style: italic;
    }
    /* Pending/new conditions (red styling) */
    .history-condition-item.pending {
      background: #fff5f5;
      border: 1px solid #dc3545;
    }
    .history-condition-item.pending .history-condition-name {
      color: #dc3545;
    }
    /* Self-entry badge */
    .hr-badge-self {
      background: #e3f2fd;
      color: #1565c0;
    }
    /* Status badges */
    .hr-badge-status {
      background: #f3e5f5;
      color: #7b1fa2;
    }
    .hr-badge-status.healed {
      background: #e8f5e9;
      color: #2e7d32;
    }
    .hr-badge-status.controlled {
      background: #e3f2fd;
      color: #1565c0;
    }
    .hr-badge-status.progressing {
      background: #fff3e0;
      color: #e65100;
    }
    .hr-badge-status.monitoring {
      background: #fce4ec;
      color: #c2185b;
    }
    /* Entry type badges */
    .hr-badge-type {
      background: #ede7f6;
      color: #512da8;
    }
    .hr-badge-type.procedure {
      background: #e8eaf6;
      color: #303f9f;
    }
    .hr-badge-type.diagnosis {
      background: #e0f7fa;
      color: #00838f;
    }
    /* Approval buttons for pending conditions */
    .pending-actions {
      display: flex;
      gap: 0.5rem;
      margin-left: auto;
    }
    .pending-actions button {
      padding: 0.2rem 0.5rem;
      font-size: 0.75rem;
      border-radius: 4px;
      cursor: pointer;
      border: none;
    }
    .pending-actions .btn-approve {
      background: var(--success);
      color: var(--text-inverted);
    }
    .pending-actions .btn-reject {
      background: var(--error);
      color: var(--text-inverted);
    }

    /* ===== BODY MAP FILTER TOGGLE ===== */
    .bodymap-filter-toggle {
      display: flex;
      gap: 0;
      margin-bottom: 0.5rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }
    .bodymap-filter-btn {
      flex: 1;
      padding: 0.3rem 0.6rem;
      font-size: 0.72rem;
      background: var(--white);
      border: none;
      cursor: pointer;
      color: var(--text-light);
      transition: all 0.15s;
      font-weight: 500;
      font-family: inherit;
    }
    .bodymap-filter-btn:not(:last-child) {
      border-right: 1px solid var(--border);
    }
    .bodymap-filter-btn.active {
      background: var(--primary);
      color: var(--text-inverted);
    }
    .bodymap-filter-btn:hover:not(.active) {
      background: var(--primary-light);
      color: var(--primary);
    }

    /* Major event labels on body map */
    .bodymap-major-label {
      opacity: 0.85;
      paint-order: stroke;
      stroke: #fff;
      stroke-width: 3px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

/* Strip PanelRenderer's .block card chrome — the two inner cards provide it */
    .block-hero {
      background: none;
      border: none;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
    }

/* ===== ANIMATION ===== */
    @keyframes slow-rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

/* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .overview-hero { flex-direction: column; }
      .overview-hero-svg { width: 100%; }
      .overview-hero-systems { width: 100%; min-width: 0; max-height: 300px; flex: none; }
      .bodymap-tooltip { min-width: 160px; max-width: 220px; font-size: 0.8rem; }
    }