/* Raptool Device Manager 2.0 (part B) - alerts, charts, reports, integrations, mail. Design tokens only (tokens.css / theme.css), so dark mode works unchanged. */

/* ---------------------------------------------------------------- header bell */
.alert-bell { position: relative; }
.alert-bell[hidden] { display: none; }
.alert-bell .bell-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent-primary); color: var(--surface); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; }
.alert-bell .bell-badge[hidden] { display: none; }
.alert-bell.crit .bell-badge { background: var(--error); }
.alert-bell.crit > .material-symbols-outlined { color: var(--error); }

/* ---------------------------------------------------------------- severity + status chips */
.sev-chip, .st-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; border: 0; font-family: inherit; }
.sev-chip .material-symbols-outlined { font-size: 15px; }
.sev-critical { background: color-mix(in srgb, var(--error) 16%, var(--surface)); color: var(--error); }
.sev-warning { background: color-mix(in srgb, var(--warning) 20%, var(--surface)); color: color-mix(in srgb, var(--warning) 55%, var(--on-surface)); }
.sev-info { background: color-mix(in srgb, var(--accent-primary) 15%, var(--surface)); color: var(--accent-primary); }
button.sev-chip { cursor: pointer; }
.st-open { background: color-mix(in srgb, var(--error) 14%, var(--surface)); color: var(--error); }
.st-acknowledged { background: color-mix(in srgb, var(--accent-primary) 15%, var(--surface)); color: var(--accent-primary); }
.st-snoozed { background: var(--surface-container-low); color: var(--text-muted); }
.st-resolved { background: color-mix(in srgb, var(--accent-emerald) 16%, var(--surface)); color: color-mix(in srgb, var(--accent-emerald) 70%, var(--on-surface)); }
.al-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); margin-right: 6px; vertical-align: middle; }
.al-sub { font-size: 12px; font-weight: 400; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.al-unread td { font-weight: 600; }
.al-mark { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 9999px; font-size: 12px; font-weight: 700; }
.al-mark .material-symbols-outlined { font-size: 15px; }
.al-kpis { margin-bottom: var(--space-md); }
.al-bulk { margin-bottom: var(--space-sm); justify-content: flex-start; }
.al-snz { position: fixed; z-index: 400; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.al-snz .tab-btn { justify-content: flex-start; width: 100%; }
.al-detail { margin: 0 0 8px; line-height: 1.45; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-sentence { padding: 10px 14px; margin-bottom: 4px; font-weight: 600; color: var(--accent-primary); }
.rl-test { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-container-low); font-size: 13px; }
.rl-test ul { margin: 6px 0 0 18px; padding: 0; }
.rp-row { margin: 8px 0 0; }
.form-hint.ok { color: var(--accent-emerald); }
.form-hint.bad { color: var(--error); }

/* ---------------------------------------------------------------- charts (assets/chart.js) */
.rc { position: relative; width: 100%; min-height: 60px; }
.rc-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.rc-t { fill: var(--text-muted); font-size: 11px; font-family: inherit; }
.rc-axis-title { fill: var(--on-surface-variant); font-size: 11px; font-weight: 600; }
.rc-center { fill: var(--on-surface); font-size: 22px; font-weight: 700; }
.rc-grid { stroke: var(--outline-variant); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.rc-base { stroke: var(--outline); stroke-width: 1; }
.rc-tick { stroke: var(--outline); stroke-width: 1; }
.rc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rc-area { opacity: .13; stroke: none; }
.rc-band { opacity: .16; }
.rc-guide { stroke: var(--on-surface-variant); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.rc-dot { stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.rc-bar { opacity: .88; transition: opacity .1s; }
.rc-bar.rc-hot { opacity: 1; }
.rc-hit { cursor: crosshair; }
.rc-click { cursor: pointer; }
.rc-slice { stroke: var(--surface); stroke-width: 1; transition: opacity .15s; }
.rc-slice-ring { fill: none; }
.rc-dim { opacity: .35; }
.rc-sel { opacity: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--on-surface) 40%, transparent)); }
.rc-tip { position: absolute; z-index: 5; pointer-events: none; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--inverse-surface, var(--on-surface)); color: var(--inverse-on-surface, var(--surface)); font-size: 12px; line-height: 1.4; box-shadow: var(--shadow-raised, 0 4px 14px rgba(0,0,0,.25)); white-space: nowrap; }
.rc-tip[hidden] { display: none; }
.rc-tip-h { font-weight: 700; margin-bottom: 2px; }
.rc-tip-n { opacity: .8; font-style: italic; }
.rc-tip i, .rc-legend i, .rc-lg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: none; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; color: var(--on-surface-variant); }
.rc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 100px; padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }
.rc-empty .material-symbols-outlined { font-size: 28px; opacity: .6; }
.rc-donut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rc-donut-svg { flex: none; width: 140px; }
.rc-donut-legend { display: flex; flex-direction: column; gap: 2px; flex: 1 1 110px; min-width: 0; }
.rc-lg { display: flex; align-items: center; gap: 0; padding: 3px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 12px; color: var(--on-surface); text-align: left; cursor: pointer; min-height: 26px; }
.rc-lg:disabled { cursor: default; }
.rc-lg:not(:disabled):hover { background: var(--surface-container-low); }
.rc-lg.on { background: color-mix(in srgb, var(--accent-primary) 14%, var(--surface)); font-weight: 700; }
.rc-lg-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-lg b { margin-left: 8px; font-variant-numeric: tabular-nums; }
.ch-card { padding: 10px 12px; border-radius: var(--radius-default); background: var(--surface); box-shadow: var(--shadow-shallow); min-width: 0; }
.ch-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.dash-charts { padding: var(--space-md); margin: 0 0 var(--space-md); }
.dash-charts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-charts-grid, .rp-fleet { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.dash-charts .filter-row { margin-top: var(--space-sm); }
.dm-hist .hist-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.dm-hist .hist-body { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.hist-empty { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--text-muted); font-size: 13px; }

/* ---------------------------------------------------------------- reports, mail, settings, integrations */
.rp-sec { margin: var(--space-lg) 0 var(--space-sm); }
.rp-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rp-card { height: 100%; }
.rp-run { padding: var(--space-md); margin: var(--space-md) 0; }
.rp-run-head { font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rp-run-actions { margin-top: var(--space-md); display: flex; gap: 8px; }
.rp-res-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-res-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ml-intro { max-width: 760px; margin: 0 0 var(--space-md); }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-md); align-items: start; }
.ml-card { padding: var(--space-md); }
.ml-actions { margin-top: var(--space-md); display: flex; gap: 8px; }
.ml-ob-title { margin: var(--space-lg) 0 var(--space-sm); }
.ml-kpis { margin-bottom: var(--space-sm); grid-template-columns: repeat(3, minmax(100px, 1fr)); }
.ap-base { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.ap-scope-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: var(--space-sm); }
.ap-scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin: 6px 0; }
.ap-scope-grid[hidden] { display: none; }
.ap-scope { align-items: flex-start; font-size: 13px; }
.ap-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-once { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 18%, var(--surface)); margin-bottom: 10px; font-size: 13px; }
.ap-once .material-symbols-outlined { color: var(--warning); flex: none; }
.ap-secret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-container-low); box-shadow: var(--shadow-inset); }
.ap-secret code { word-break: break-all; flex: 1 1 240px; }
.ap-curl { margin-bottom: 8px; }
.dt-export { color: var(--text-muted); }

@media (max-width: 600px) {
  .dash-charts-grid, .rp-fleet { grid-template-columns: 1fr; }
  .rp-cards { grid-template-columns: 1fr 1fr; }
  .ml-grid { grid-template-columns: 1fr; }
  .rc-donut { justify-content: center; }
  .ap-scope-grid { grid-template-columns: 1fr; }
  .al-sub { max-width: 220px; }
  .ml-kpis { grid-template-columns: 1fr 1fr 1fr; }
}