/* Dashboard metrics — styles scopés sous #view-metrics. Angles droits (charte SNECHO). */
#view-metrics{ --card-bg:var(--panel); --success:#3F8F5C; --mid:#FFC000; --low:#E01D25; }
#view-metrics .mt-subtitle{ font-size:14px; color:var(--text-secondary); margin:6px 0 20px; }
#view-metrics h2{ font-size:18px; margin:2rem 0 1rem; }
#view-metrics .card{ background:var(--panel); border:1px solid var(--border); border-radius:0; padding:1.25rem; margin-bottom:1rem; }
#view-metrics .metrics-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:1.5rem; }
#view-metrics .metric-card{ background:var(--panel); border:1px solid var(--border); border-radius:0; padding:1rem; text-align:center; }
#view-metrics .metric-label{ font-size:12px; color:var(--text-secondary); margin:0 0 4px; }
#view-metrics .metric-value{ font-size:24px; font-weight:500; margin:0; }
#view-metrics table{ width:100%; border-collapse:collapse; font-size:14px; }
#view-metrics th, #view-metrics td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--border); }
#view-metrics th{ font-weight:500; color:var(--text-secondary); font-size:12px; text-transform:uppercase; }
#view-metrics th.sortable{ cursor:pointer; user-select:none; }
#view-metrics th.sortable:hover{ color:var(--text-primary); }
#view-metrics td.num, #view-metrics th.num{ text-align:right; }
#view-metrics .pct-bar-wrapper{ display:flex; align-items:center; gap:8px; }
#view-metrics .pct-bar-bg{ flex:1; height:6px; background:var(--panel-raised); border-radius:0; overflow:hidden; }
#view-metrics .pct-bar-fill{ height:100%; background:var(--success); }
#view-metrics .pct-bar-fill.low{ background:var(--low); }
#view-metrics .pct-bar-fill.mid{ background:var(--mid); }
#view-metrics .chart-wrapper{ position:relative; height:260px; margin-top:.5rem; }
#view-metrics .loading{ color:var(--text-muted); font-size:14px; padding:2rem 0; text-align:center; }
#view-metrics .refresh-btn{ cursor:pointer; border:1px solid var(--border); border-radius:0; background:var(--gold); color:#15171A; font-size:14px; font-weight:500; padding:8px 14px; }
#view-metrics .refresh-btn:hover{ background:var(--gold-hover); }
#view-metrics .test-toggle-label{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); margin-left:14px; }
#view-metrics .controls-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:1rem; }
#view-metrics .controls-left{ display:flex; align-items:center; flex-wrap:wrap; }
#view-metrics .nav-btn{ cursor:pointer; border:1px solid var(--border); border-radius:0; background:var(--panel-raised); color:var(--text-secondary); font-size:13px; padding:7px 12px; margin-left:8px; }
#view-metrics .nav-btn:hover{ color:var(--text-primary); background:var(--panel); }
#view-metrics .new-badge{ font-size:12px; font-weight:600; color:var(--brand-red); background:rgba(224,29,37,.1); border:1px solid var(--brand-red); border-radius:0; padding:2px 8px; margin-left:8px; vertical-align:middle; }
#view-metrics .doc-panel{ display:none; position:fixed; top:0; right:0; bottom:0; width:100%; max-width:680px; background:var(--panel); border-left:1px solid var(--border); z-index:100; overflow-y:auto; padding:2rem 2rem 3rem; }
#view-metrics .doc-panel.open{ display:block; }
#view-metrics .doc-panel-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; }
#view-metrics .doc-panel h2{ font-size:20px; margin:0; }
#view-metrics .doc-panel-close{ cursor:pointer; background:var(--panel-raised); border:1px solid var(--border); border-radius:0; color:var(--text-secondary); font-size:16px; padding:4px 10px; flex-shrink:0; }
#view-metrics .doc-panel-close:hover{ color:var(--text-primary); }
#view-metrics .doc-section{ margin-bottom:1.5rem; }
#view-metrics .doc-term{ font-weight:600; font-size:14px; color:var(--text-primary); margin:0 0 4px; }
#view-metrics .doc-def{ font-size:13px; color:var(--text-secondary); line-height:1.6; margin:0; }
#view-metrics .doc-sep{ border:none; border-top:1px solid var(--border); margin:1rem 0; }
#view-metrics .level-table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:.5rem; }
#view-metrics .level-table th, #view-metrics .level-table td{ padding:7px 6px; }
#view-metrics .level-table th{ font-weight:600; font-size:11px; }
#view-metrics .level-num-cell{ font-weight:700; color:var(--gold); min-width:28px; }