/* filas.css — Aba Filas: KPIs + tabela por fila + sparkline + comparação */
.filas { display: flex; flex-direction: column; min-height: 0; }
.filas-filters { padding: 12px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: .5px solid var(--az-border-tertiary); }
.filas-kpis { padding: 16px 20px 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

.filas-table { padding: 0 20px 16px; }
.fq-head, .fq-row { display: grid; grid-template-columns: 1.6fr 64px 64px 64px 64px 64px 72px 72px 64px 80px 100px 24px; gap: 10px; align-items: center; min-width: 1020px; }
.fq-head { padding: 10px 0 8px; font-size: 11px; color: var(--az-text-secondary); text-transform: uppercase; letter-spacing: .3px; border-bottom: .5px solid var(--az-border-tertiary); }
.fq-row { padding: 11px 0; font-size: 13px; border-bottom: .5px solid var(--az-border-tertiary); cursor: pointer; border-radius: 6px; }
.fq-row:hover { background: var(--az-primary-50); }
.fq-row .r { text-align: right; font-variant-numeric: tabular-nums; }
.fq-row .na { color: var(--az-text-tertiary); }
.fq-name { font-weight: 500; }
.fq-bad { color: var(--az-danger-700); }

/* sparkline mini-bars */
.spark { display: flex; align-items: flex-end; gap: 1px; height: 28px; }
.spark span { flex: 1; background: var(--az-primary-300); border-radius: 1px 1px 0 0; min-height: 1px; }
.spark span.peak { background: var(--az-primary); }

/* comparação lado a lado */
.compare { padding: 16px 20px; }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 10px 12px; border-bottom: .5px solid var(--az-border-tertiary); font-size: 13px; }
.compare th { font-size: 11px; color: var(--az-text-secondary); text-transform: uppercase; }
.compare td.kpi-name { color: var(--az-text-secondary); font-size: 12px; }
.compare td.val { font-weight: 500; font-variant-numeric: tabular-nums; }

/* drawer de fila reusa .drawer/.drawer-backdrop de drawer.css */
.qd-section { margin-bottom: 22px; }
.qd-section h4 { margin: 0 0 10px; font-size: 13px; font-weight: 500; }
.qd-hourly { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.qd-hourly .hb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.qd-hourly .hb .b1 { background: var(--az-primary); border-radius: 1px 1px 0 0; }
.qd-hourly .hb .b2 { background: var(--az-danger-700); }
.qd-hourly .hb .hl { font-size: 8px; color: var(--az-text-tertiary); text-align: center; margin-top: 2px; }
.qd-list .li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: .5px solid var(--az-border-tertiary); font-size: 13px; }
.qd-list .li:last-child { border-bottom: 0; }
.unavail { font-size: 11px; color: var(--az-text-tertiary); font-style: italic; }

/* ── Tabela de filas agrupada (Sprint 4.B) ── */
.qtbl-wrap { overflow: auto; max-height: calc(100vh - 230px); border: .5px solid var(--az-border-tertiary); border-radius: var(--az-radius-md); margin: 0 20px; }
.qtbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; white-space: nowrap; }
.qtbl th, .qtbl td { padding: 5px 8px; border-bottom: .5px solid var(--az-border-tertiary); }
.qtbl thead th { position: sticky; background: var(--az-bg-secondary); z-index: 2; font-weight: 600; color: var(--az-text-secondary); }
.qtbl thead tr.grp th { top: 0; height: 26px; text-align: center; text-transform: uppercase; font-size: 10px; letter-spacing: .4px; border-left: 1px solid var(--az-border-secondary); }
.qtbl thead tr.col th { top: 26px; font-size: 10px; text-transform: uppercase; }
.qtbl th.g0, .qtbl td.g0 { border-left: 1px solid var(--az-border-secondary); }
.qtbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.qtbl .qname, .qtbl .qname-h { position: sticky; left: 0; background: var(--az-bg-primary); z-index: 3; text-align: left; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.qtbl thead .qname-h { z-index: 4; background: var(--az-bg-secondary); }
.qtbl tbody tr.qrow { cursor: pointer; }
.qtbl tbody tr.qrow:hover td { background: var(--az-primary-50); }
.qtbl tbody tr.qrow:hover td.qname { background: var(--az-primary-50); }
.qtbl tfoot td { position: sticky; bottom: 0; background: var(--az-bg-secondary); font-weight: 600; z-index: 2; }
.qtbl .c-ok   { color: var(--az-success-700); font-weight: 600; }
.qtbl .c-warn { color: var(--az-warning-700); font-weight: 600; }
.qtbl .c-bad  { color: var(--az-danger-700); font-weight: 600; }
.qtbl .c-blue { color: var(--az-primary); }