/* ===== Page-specific styles (Alerts, Ranking, Diagnostic, Exec, Upload, Admin) ===== */

/* Alerts */
.alert-item { padding: 9px 12px; border-radius: 8px; margin-bottom: 6px; border-left: 4px solid; display: flex; gap: 10px; align-items: flex-start }
.alert-critical { border-color: var(--red); background: var(--red-light) }
.alert-warning { border-color: var(--amber); background: var(--amber-light) }
.alert-info { border-color: #60a5fa; background: #eff6ff }
.alert-title { font-size: 12px; font-weight: 600; margin-bottom: 2px }
.alert-body { font-size: 11px; color: var(--gray-600) }

/* Ranking */
.rank-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--gray-100); color: var(--gray-600); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center }
.rank-1 { background: #fde68a; color: #92400e }
.rank-2 { background: #e5e7eb; color: #374151 }
.rank-3 { background: #fed7aa; color: #92400e }

/* Tabs */
.tabs { display: flex; border-bottom: 2px solid var(--gray-200); margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch }
.tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--gray-400); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; white-space: nowrap; flex-shrink: 0 }
.tab.active { color: var(--purple); border-bottom-color: var(--purple); font-weight: 600 }
.tab-panel { display: none }
.tab-panel.active { display: block }

/* Section titles */
.section-title { font-family: "Syne", sans-serif; font-size: 15px; font-weight: 800; color: var(--purple-dark); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.section-subtitle { font-size: 12px; font-weight: 400; color: var(--gray-400); font-family: "DM Sans", sans-serif }

/* Diagnostic */
.diag-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; padding: 9px 11px; border-radius: 8px; background: var(--gray-50) }
.diag-item:last-child { margin-bottom: 0 }
.diag-icon { font-size: 14px; flex-shrink: 0 }
.diag-name { font-size: 12px; font-weight: 600; margin-bottom: 3px }
.diag-desc { font-size: 11px; color: var(--gray-600); line-height: 1.5 }
.action-row { display: flex; gap: 6px; align-items: flex-start; margin-top: 3px }
.action-label { font-size: 10px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; min-width: 68px; flex-shrink: 0 }
.action-val { font-size: 11px; color: var(--gray-800) }

/* Priority (Consultant Queue) */
.priority-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--gray-200); margin-bottom: 6px; background: #fff; flex-wrap: wrap }
.priority-score { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-family: "Syne", sans-serif; flex-shrink: 0 }
.priority-info { flex: 1; min-width: 0 }
.priority-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.priority-meta { font-size: 11px; color: var(--gray-400) }
.priority-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px }

/* Exec */
.exec-section-bar { width: 4px; height: 18px; background: var(--purple); border-radius: 2px; flex-shrink: 0 }
.exec-section-title { font-family: "Syne", sans-serif; font-size: 13px; font-weight: 700; color: var(--purple-dark) }

/* Health */
.health-meter { display: flex; align-items: center; gap: 8px }
.health-bar { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden }
.health-fill { height: 100%; border-radius: 3px }

/* Upload zone */
.upload-zone { border: 2px dashed var(--gray-200); border-radius: 10px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all .2s; background: var(--gray-50) }
.upload-zone:hover, .upload-zone-hover { border-color: var(--purple); background: #f3e8ff }
.upload-zone input { display: none }