/* Paineis de Indicadores (Chamados > Indicadores e Inventario > Indicadores).
 *
 * As classes hdi-* sao agnosticas de modulo: as duas telas usam ESTE arquivo,
 * sem duplicacao — nenhuma regra exclusiva de inventario foi necessaria.
 *
 * Layer 'pages' (nao 'overrides'): a tela e nova e nao disputa especificidade
 * com nada. Orcamento zero de prioridade forcada neste arquivo, de proposito —
 * quem precisa forcar prioridade nesta layer esta brigando com uma regra que
 * deveria ser ajustada na origem (ver scripts/css-important-budget.json).
 *
 * Zero cor crua: tudo sai de tokens de public/css/design-system/tokens.css, que
 * viram com [data-theme-mode]. Onde o desenho pede uma opacidade especifica da
 * cor primaria (celulas do heatmap), usamos color-mix() em cima do token —
 * funcao de cor com variavel dentro dos canais nao resolve, e travaria o escuro.
 *
 * Todo SVG aqui e geometria; texto e HTML (ver public/js/charts/indicatorsGeometry.js).
 */

@layer pages {
  /* Nivel intermediario do breadcrumb ("Chamados › Indicadores"): mesmo
     tratamento do atual, so um pouco mais apagado pra hierarquia ficar clara. */
  .dashboard-breadcrumb__parent {
    opacity: 0.72;
    font-weight: 500;
  }

  /* ==========================================================
     Base da tela
     ========================================================== */
  .hdi-screen {
    display: grid;
    gap: 14px;
    align-content: start;
    padding-bottom: 22px;
    color: var(--color-text);
    font-family: var(--font-sans);
  }

  .hdi-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm), var(--nz-intensity-light-shadow);
  }

  .hdi-card[hidden],
  .hdi-screen [hidden] {
    display: none;
  }

  .hdi-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* Sem o flex-basis o titulo quebra palavra por palavra quando a legenda
     ocupa a linha inteira. */
  .hdi-card__heading {
    flex: 1 1 190px;
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .hdi-card--volume .hdi-card__head {
    gap: 10px 14px;
  }

  .hdi-card--volume .hdi-card__heading {
    flex: 1 1 200px;
  }

  .hdi-card__title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--color-text);
  }

  .hdi-card__subtitle {
    margin: 0;
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-muted {
    color: var(--color-text-muted);
  }

  .hdi-row {
    display: grid;
    gap: 14px;
  }

  .hdi-row--kpis { grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); }
  .hdi-row--main { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .hdi-row--trio { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .hdi-row--dist { grid-template-columns: repeat(auto-fit, minmax(304px, 1fr)); }
  .hdi-row--heat { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

  /* Cada bloco carrega a cor da sua serie por custom property: o mesmo markup
     de barra/icone serve pra todas as tonalidades sem multiplicar seletor.
     `--hdi-on-tone` e a tinta que fica EM CIMA da cor cheia (numero dentro do
     segmento, icone dentro da caixa). Branco fixo — como no protótipo — reprova
     contraste no ciano do tema claro e em TODOS os tons do escuro, onde os
     tokens viram para as shades 400 (claras). */
  .hdi-tone-primary {
    --hdi-tone: var(--color-primary);
    --hdi-tone-soft: var(--color-primary-soft);
    --hdi-on-tone: var(--color-text-on-primary);
  }
  .hdi-tone-secondary {
    --hdi-tone: var(--color-secondary-500);
    --hdi-tone-soft: var(--color-info-soft);
    /* Ciano e claro nos DOIS temas, entao a tinta e escura nos dois. Primitiva
       (--color-neutral-900) e nao semantica de propósito: --color-text-inverse
       vira branco no tema claro e o número sumiria de novo. */
    --hdi-on-tone: var(--color-neutral-900);
  }
  .hdi-tone-success {
    --hdi-tone: var(--color-success);
    --hdi-tone-soft: var(--color-success-soft);
    --hdi-on-tone: var(--color-text-on-primary);
  }
  .hdi-tone-warning {
    --hdi-tone: var(--color-warning);
    --hdi-tone-soft: var(--color-warning-soft);
    --hdi-on-tone: var(--color-text-on-primary);
  }
  .hdi-tone-danger {
    --hdi-tone: var(--color-danger);
    --hdi-tone-soft: var(--color-danger-soft);
    --hdi-on-tone: var(--color-text-on-primary);
  }
  .hdi-tone-neutral {
    --hdi-tone: var(--color-neutral-fg-soft);
    --hdi-tone-soft: var(--color-neutral-bg);
    --hdi-on-tone: var(--color-text-on-primary);
  }

  /* No escuro TODOS os tons sao shades claras (400): a tinta vira escura. */
  [data-theme-mode="dark"] .hdi-tone-primary,
  [data-theme-mode="dark"] .hdi-tone-success,
  [data-theme-mode="dark"] .hdi-tone-warning,
  [data-theme-mode="dark"] .hdi-tone-danger,
  [data-theme-mode="dark"] .hdi-tone-neutral {
    --hdi-on-tone: var(--color-neutral-900);
  }

  [data-theme-mode="dark"] .hdi-tone-secondary {
    --hdi-tone: var(--color-secondary-400);
  }

  /* ==========================================================
     1. Barra de comando
     ========================================================== */
  .hdi-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm), var(--nz-intensity-light-shadow);
  }

  .hdi-bar__title {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .hdi-eyebrow {
    color: var(--color-primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .hdi-bar__title h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .hdi-bar__scope {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 12.5px;
  }

  .hdi-bar__center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 380px;
  }

  .hdi-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .hdi-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
  }

  .hdi-segmented__btn {
    min-height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-soft);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .hdi-segmented__btn.is-active {
    background: var(--color-surface-solid);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
  }

  .hdi-select,
  .hdi-compare {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .hdi-select:hover,
  .hdi-compare:hover {
    border-color: var(--color-primary);
  }

  .hdi-select > i,
  .hdi-compare > i {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-select select {
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    max-width: 190px;
  }

  .hdi-select select:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .hdi-compare.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
  }

  .hdi-compare.is-active > i {
    color: var(--color-primary);
  }

  .hdi-chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--color-primary);
    border-radius: 11px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }

  .hdi-chip-filter__clear {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: 9px;
  }

  /* ==========================================================
     Periodo personalizado — botao + popover com as duas datas.
     Fica fora do grupo segmentado porque nao e um atalho: escolher datas exige
     dois campos e uma confirmacao, e nao caberia numa pilula.
     ========================================================== */
  .hdi-range {
    position: relative;
  }

  .hdi-range__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .hdi-range__btn > i {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-range__btn:hover {
    border-color: var(--color-primary);
  }

  /* Ativo = a janela do painel VEM daqui. Mesmo tratamento do "Comparar
     períodos" ligado, pra leitura da barra ser uma so. */
  .hdi-range__btn.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
  }

  .hdi-range__btn.is-active > i {
    color: var(--color-primary);
  }

  .hdi-range__menu {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 40;
    display: grid;
    gap: 10px;
    width: 268px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
    animation: hdi-rise var(--duration-short) var(--ease-decelerate);
  }

  .hdi-range__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hdi-range__field {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 600;
  }

  .hdi-range__field input {
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
  }

  .hdi-range__field input:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
    border-color: var(--color-primary);
  }

  .hdi-range__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .hdi-bar__range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
  }

  .hdi-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 11px;
  }

  .hdi-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-success);
    animation: hdi-pulse 2.4s ease-in-out infinite;
  }

  .hdi-icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .hdi-icon-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }

  .hdi-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500) 56%, var(--color-primary-300)));
    color: var(--color-text-on-primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }

  .hdi-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .hdi-ghost-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .hdi-export {
    position: relative;
  }

  .hdi-export__menu {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 40;
    width: 236px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
    animation: hdi-rise var(--duration-short) var(--ease-decelerate);
  }

  .hdi-export__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }

  .hdi-export__item:hover {
    background: var(--color-surface-muted);
  }

  .hdi-export__item i {
    width: 15px;
    text-align: center;
    font-size: 11.5px;
    color: var(--color-text-muted);
  }

  /* ==========================================================
     2. Faixa de alerta de projecao
     ========================================================== */
  .hdi-alert {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--color-warning);
    border-radius: 16px;
    background: var(--color-warning-soft);
  }

  /* No escuro --color-warning vira o ambar 400 (claro) e o icone branco some.
     A tinta acompanha o tema pelo mesmo mecanismo dos segmentos. */
  .hdi-alert__icon {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--color-warning);
    color: var(--color-warning-fg);
    font-size: 13px;
  }

  [data-theme-mode="dark"] .hdi-alert__icon {
    color: var(--color-neutral-900);
  }

  .hdi-alert__body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .hdi-alert__body strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }

  .hdi-alert__body span {
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-alert__actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .hdi-alert__link {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-warning);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-warning-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  /* ==========================================================
     3. KPIs
     ========================================================== */
  .hdi-kpi {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 15px 16px 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm), var(--nz-intensity-light-shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }

  .hdi-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .hdi-kpi__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .hdi-kpi__icon {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--hdi-tone-soft);
    color: var(--hdi-tone);
    font-size: 11px;
  }

  .hdi-kpi__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-soft);
  }

  .hdi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--color-neutral-bg);
    color: var(--color-text-muted);
  }

  .hdi-delta i {
    font-size: 8.5px;
  }

  .hdi-delta.is-good {
    background: var(--color-success-soft);
    color: var(--color-success-text);
  }

  .hdi-delta.is-bad {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
  }

  .hdi-kpi__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }

  .hdi-kpi__value strong {
    font-size: 29px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--color-text);
  }

  .hdi-kpi__unit,
  .hdi-kpi__hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  /* full-bleed: a sparkline encosta nas duas bordas do card. */
  .hdi-kpi__spark {
    display: block;
    width: calc(100% + 32px);
    height: 38px;
    margin: 0 -16px;
  }

  /* ==========================================================
     4/6. Grafico de serie (volume e backlog)
     ========================================================== */
  .hdi-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .hdi-legend__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
  }

  .hdi-legend__btn[aria-pressed="false"] {
    background: transparent;
    color: var(--color-text-muted);
    opacity: 0.5;
  }

  .hdi-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--hdi-tone, var(--color-primary));
  }

  .hdi-legend__btn[aria-pressed="false"] .hdi-swatch {
    background: var(--color-text-muted);
  }

  .hdi-chart {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
  }

  .hdi-chart--backlog {
    grid-template-columns: 30px 1fr;
  }

  .hdi-chart__axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 236px;
    font-size: 10.5px;
    color: var(--color-text-muted);
  }

  .hdi-chart--backlog .hdi-chart__axis {
    height: 156px;
  }

  .hdi-chart__plot {
    position: relative;
    height: 236px;
  }

  .hdi-chart--backlog .hdi-chart__plot {
    height: 156px;
  }

  .hdi-chart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hdi-chart__grid {
    stroke: var(--color-border);
    stroke-width: 1;
  }

  .hdi-chart__area {
    fill: var(--hdi-tone-soft);
    stroke: none;
  }

  .hdi-chart__line {
    fill: none;
    stroke: var(--hdi-tone);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .hdi-chart__ghost {
    fill: none;
    stroke: var(--hdi-tone);
    stroke-width: 1.6;
    stroke-dasharray: 4 4;
    opacity: 0.45;
  }

  .hdi-chart__cols {
    position: absolute;
    inset: 0;
    display: flex;
  }

  .hdi-chart__col {
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  .hdi-chart__col.is-hover {
    background: var(--color-primary-soft);
  }

  .hdi-chart__cross {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-primary);
    opacity: 0.35;
    pointer-events: none;
  }

  .hdi-chart__dot {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border: 2px solid var(--color-surface-solid);
    border-radius: 999px;
    background: var(--hdi-tone);
    pointer-events: none;
  }

  .hdi-chart__xaxis {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--color-text-muted);
  }

  .hdi-tip {
    position: absolute;
    top: 10px;
    z-index: 5;
    min-width: 172px;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    /* Só opacidade. `hdi-rise` anima `transform`, e animação vence o style
       inline — o translateX(-50%/-100%) que ancora o balão nas bordas seria
       descartado durante a animação e o tooltip vazaria pra fora do card. */
    animation: hdi-fade var(--duration-instant) var(--ease-decelerate);
  }

  .hdi-tip__title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text);
  }

  .hdi-tip__row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-tip__row strong {
    margin-left: auto;
    color: var(--color-text);
  }

  /* "antes N" vem DEPOIS do valor do dia: o numero grande e o do periodo atual,
     a comparacao e nota de rodape. */
  .hdi-tip__row small {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 10.5px;
  }

  .hdi-tip__foot {
    padding-top: 6px;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 10.5px;
    color: var(--color-text-muted);
  }

  /* ==========================================================
     5. Cumprimento de SLA
     ========================================================== */
  .hdi-sla {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }

  .hdi-gauge {
    position: relative;
    flex: 0 1 150px;
    min-width: 120px;
    height: 150px;
  }

  .hdi-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .hdi-gauge__track {
    fill: none;
    stroke: var(--color-surface-muted);
    stroke-width: 13;
  }

  .hdi-gauge__fill {
    fill: none;
    stroke: var(--color-success);
    stroke-width: 13;
    stroke-linecap: round;
  }

  .hdi-gauge__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    text-align: center;
  }

  .hdi-gauge__center strong {
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--color-text);
  }

  .hdi-gauge__center span {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .hdi-sla__rows {
    flex: 1 1 180px;
    display: grid;
    gap: 8px;
    align-content: start;
  }

  .hdi-sla__row {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast);
  }

  .hdi-sla__row:hover {
    border-color: var(--hdi-tone);
  }

  .hdi-sla__row header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-sla__row header strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }

  .hdi-sla__note {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--color-warning);
    border-radius: 12px;
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  .hdi-bar-track {
    height: 5px;
    border-radius: 99px;
    background: var(--color-border-subtle);
    overflow: hidden;
  }

  .hdi-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--hdi-tone);
  }

  /* ==========================================================
     7. Tempos medios
     ========================================================== */
  .hdi-times {
    display: grid;
    gap: 10px;
  }

  .hdi-time {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 14px;
    background: var(--color-surface-muted);
  }

  .hdi-time__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-soft);
  }

  .hdi-time__head i {
    color: var(--hdi-tone);
    font-size: 11px;
  }

  .hdi-time__head .hdi-delta {
    margin-left: auto;
  }

  .hdi-time__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .hdi-time__value strong {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--color-text);
  }

  .hdi-time__value span {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-time__spark {
    display: block;
    width: 100%;
    height: 34px;
  }

  /* ==========================================================
     8. Satisfacao e reabertura
     ========================================================== */
  .hdi-csat {
    display: grid;
    gap: 12px;
  }

  .hdi-csat__score {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .hdi-csat__score strong {
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-success);
  }

  .hdi-csat__score span {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* Distribuição Ótimo/Neutro/Ruim. Só renderiza quando há resposta no período
     (helpdeskSatisfactionService grava a nota no próprio chamado). */
  .hdi-csat__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-csat__row > span:first-child {
    flex: 0 0 52px;
  }

  .hdi-csat__row .hdi-bar-track {
    flex: 1 1 auto;
    height: 6px;
  }

  .hdi-csat__row > span:last-child {
    flex: 0 0 34px;
    text-align: right;
    color: var(--color-text);
    font-weight: 600;
  }

  .hdi-minis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hdi-mini {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-surface-muted);
  }

  .hdi-mini span {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-mini strong {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .hdi-mini small {
    font-size: 11px;
    font-weight: 600;
    color: var(--hdi-tone);
  }

  /* Bloco sem origem de dado (nao ha pesquisa de satisfacao ainda): dizemos
     isso na cara, em vez de mostrar 0,0 e parecer nota pessima. */
  .hdi-nodata {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-muted);
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-nodata strong {
    font-size: 12.5px;
    color: var(--color-text);
  }

  /* ==========================================================
     9. Carga por responsavel
     ========================================================== */
  .hdi-list {
    display: grid;
    gap: 8px;
  }

  .hdi-agent {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .hdi-agent:hover {
    border-color: var(--color-primary);
  }

  .hdi-agent.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }

  .hdi-agent__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .hdi-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
  }

  .hdi-agent__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
  }

  .hdi-agent__count {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--color-text-muted);
  }

  .hdi-stack {
    display: flex;
    height: 9px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--color-border-subtle);
  }

  .hdi-stack__seg {
    height: 100%;
  }

  /* ==========================================================
     10. Por servico
     ========================================================== */
  .hdi-svc {
    display: grid;
    gap: 6px;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .hdi-svc__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 12px;
  }

  .hdi-svc__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-soft);
  }

  .hdi-svc__value {
    font-weight: 600;
  }

  .hdi-svc__pct {
    flex: 0 0 38px;
    text-align: right;
    color: var(--color-text-muted);
  }

  .hdi-svc .hdi-bar-track {
    height: 8px;
    background: var(--color-surface-muted);
  }

  .hdi-svc:hover .hdi-svc__label {
    color: var(--color-text);
  }

  /* ==========================================================
     11. Por organizacao
     ========================================================== */
  .hdi-orgs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .hdi-ring {
    position: relative;
    flex: 0 1 132px;
    min-width: 112px;
    height: 132px;
  }

  .hdi-ring svg {
    width: 100%;
    height: 100%;
  }

  .hdi-ring path {
    stroke: var(--color-surface);
    stroke-width: 1;
  }

  .hdi-ring__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1px;
  }

  .hdi-ring__center strong {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .hdi-ring__center span {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .hdi-orgs__list {
    flex: 1 1 160px;
    display: grid;
    gap: 2px;
    align-content: start;
  }

  /* A legenda e uma LISTA com nome legivel e percentual alinhado. Truncar em 4
     caracteres dentro da rosca (como no produto antigo) deixava "Sam…"/"Caio…". */
  .hdi-orgs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-soft);
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
  }

  .hdi-orgs__item:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  .hdi-orgs__item span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hdi-orgs__item strong {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text);
  }

  /* ==========================================================
     12. Quem mais abre chamados
     ========================================================== */
  .hdi-ranks {
    display: grid;
    gap: 6px;
  }

  /* Linha larga de propósito: o card ocupa a largura toda pra caber nome,
     empresa, barra, serviços e total na MESMA linha. Empilhado em coluna
     estreita, o ranking vira dez cartões e some a comparação, que é a única
     razão de existir de um ranking. */
  .hdi-rank {
    display: grid;
    grid-template-columns: 26px 26px minmax(140px, 1.1fr) minmax(180px, 2fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .hdi-rank:hover {
    border-color: var(--color-primary);
  }

  .hdi-rank.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }

  .hdi-rank__pos {
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
  }

  /* Pódio: as três primeiras posições ganham peso, o resto é lista. */
  .hdi-rank:nth-child(-n+3) .hdi-rank__pos {
    color: var(--color-primary);
  }

  .hdi-rank__who {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .hdi-rank__name,
  .hdi-rank__company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hdi-rank__name {
    font-size: 12.5px;
    font-weight: 600;
  }

  .hdi-rank__company {
    font-size: 10.5px;
    color: var(--color-text-muted);
  }

  .hdi-rank__body {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .hdi-rank__body .hdi-bar-track {
    height: 7px;
    background: var(--color-surface);
  }

  .hdi-rank__svcs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
  }

  /* O serviço é o "por que" do ranking: sem ele a linha diz que alguém abre
     muito e não diz do quê. A bolinha herda --hdi-tone da própria etiqueta. */
  .hdi-rank__svc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    font-size: 10.5px;
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hdi-rank__svc strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .hdi-rank__total {
    display: grid;
    justify-items: end;
    gap: 1px;
    text-align: right;
  }

  .hdi-rank__total strong {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  /* Classe propria em vez de `.hdi-rank__total > span`: aquele seletor tem
     especificidade maior que `.hdi-rank__flag` e pintava o selo de cinza. */
  .hdi-rank__share {
    font-size: 10px;
    color: var(--color-text-muted);
  }

  .hdi-rank__flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .hdi-rank__more {
    justify-self: start;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
  }

  .hdi-rank__more:hover {
    background: var(--color-primary-soft);
  }

  /* ==========================================================
     13. Heatmap
     ========================================================== */
  .hdi-heat__scale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--color-text-muted);
  }

  .hdi-heat__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
  }

  .hdi-heat__grid {
    display: grid;
    grid-template-columns: 34px repeat(12, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
  }

  .hdi-heat__day,
  .hdi-heat__hour {
    font-size: 10.5px;
    color: var(--color-text-muted);
  }

  .hdi-heat__hour {
    text-align: center;
  }

  .hdi-heat__cell {
    height: 26px;
    border: 0;
    border-radius: 5px;
    cursor: default;
    transition: transform var(--duration-instant) var(--ease-standard);
  }

  .hdi-heat__cell:hover {
    transform: scale(1.12);
  }

  /* Faixas do desenho. color-mix() em cima do token e o unico jeito de ter
     "primaria a 35%" sem cravar canais literais — que nao virariam no escuro. */
  .hdi-heat__cell[data-level="0"],
  .hdi-heat__swatch[data-level="0"] { background: var(--color-surface-muted); }
  .hdi-heat__cell[data-level="1"],
  .hdi-heat__swatch[data-level="1"] { background: var(--color-primary-soft); }
  .hdi-heat__cell[data-level="2"],
  .hdi-heat__swatch[data-level="2"] { background: color-mix(in srgb, var(--color-primary) 35%, transparent); }
  .hdi-heat__cell[data-level="3"],
  .hdi-heat__swatch[data-level="3"] { background: color-mix(in srgb, var(--color-primary) 62%, transparent); }
  .hdi-heat__cell[data-level="4"],
  .hdi-heat__swatch[data-level="4"] { background: var(--color-primary); }

  /* ==========================================================
     14. Prioridade x situacao
     ========================================================== */
  .hdi-prio {
    display: grid;
    gap: 6px;
  }

  .hdi-prio__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-soft);
  }

  .hdi-prio__head strong {
    margin-left: auto;
    color: var(--color-text);
    font-weight: 600;
  }

  .hdi-prio__dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--hdi-tone);
  }

  .hdi-prio__bar {
    display: flex;
    height: 22px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-muted);
  }

  .hdi-prio__seg {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--hdi-on-tone, var(--color-text-on-primary));
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
  }

  .hdi-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 10.5px;
    color: var(--color-text-muted);
  }

  .hdi-status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* ==========================================================
     15. Metas de SLA por servico
     ========================================================== */
  .hdi-goals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px 20px;
  }

  .hdi-goal {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast);
  }

  .hdi-goal:hover {
    border-color: var(--hdi-tone);
  }

  .hdi-goal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .hdi-goal__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
  }

  .hdi-goal__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--hdi-tone-soft);
    color: var(--hdi-tone);
    font-size: 10.5px;
    font-weight: 700;
  }

  .hdi-goal__status i {
    font-size: 8.5px;
  }

  .hdi-goal__bar {
    position: relative;
    height: 9px;
    border-radius: 99px;
    background: var(--color-border-subtle);
    overflow: visible;
  }

  .hdi-goal__fill {
    height: 100%;
    border-radius: 99px;
    background: var(--hdi-tone);
  }

  .hdi-goal__marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 17px;
    border-radius: 2px;
    background: var(--color-text-soft);
  }

  .hdi-goal__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-goal__proj {
    color: var(--hdi-tone);
    font-weight: 600;
  }

  .hdi-goal__meta {
    margin-left: auto;
  }

  /* ==========================================================
     Overlays: drawer e modal
     ========================================================== */
  .hdi-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--color-surface-overlay);
  }

  .hdi-backdrop--modal {
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .hdi-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: 432px;
    max-width: 92vw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface-solid);
    box-shadow: var(--shadow-xl);
    animation: hdi-rise var(--duration-short) var(--ease-decelerate);
  }

  .hdi-drawer--config {
    width: 452px;
  }

  .hdi-drawer__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
  }

  .hdi-drawer__head > div {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .hdi-drawer__head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .hdi-drawer__head p {
    margin: 0;
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-close {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    cursor: pointer;
  }

  .hdi-close:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
  }

  .hdi-drawer__body {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 16px 20px;
    overflow-y: auto;
  }

  .hdi-drawer__foot {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
  }

  .hdi-drawer__foot .hdi-primary-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Vale para <article> (recorte sem id do chamado) e para <a> (o caso comum,
     que abre o chamado em nova guia): as duas tags compartilham o mesmo card. */
  .hdi-drill-item {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--color-surface-muted);
    color: inherit;
    text-decoration: none;
  }

  .hdi-drill-item:hover {
    border-color: var(--color-primary);
  }

  /* Teclado: o card e o alvo do Tab dentro do drawer, entao precisa de um anel
     visivel proprio — o :hover sozinho nao aparece pra quem navega sem mouse. */
  a.hdi-drill-item:focus-visible {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Sinaliza "abre em outra guia" antes do clique. Discreto em repouso pra nao
     competir com o status; ganha contraste quando o card esta sob o cursor. */
  .hdi-drill-item__open {
    font-size: 10px;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
  }

  .hdi-drill-item:hover .hdi-drill-item__open,
  a.hdi-drill-item:focus-visible .hdi-drill-item__open {
    color: var(--color-primary);
  }

  .hdi-drill-item__top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-drill-item__number {
    font-weight: 700;
    color: var(--color-text-soft);
  }

  .hdi-status-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hdi-tone-soft);
    color: var(--hdi-tone);
    font-size: 10.5px;
    font-weight: 700;
  }

  .hdi-drill-item__age {
    margin-left: auto;
  }

  .hdi-drill-item__subject {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
  }

  .hdi-drill-item__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-drill-item__foot i {
    font-size: 10px;
    margin-right: 5px;
  }

  /* Switch — mesmo componente no drawer de configuração e no modal. */
  .hdi-config-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
  }

  .hdi-config-row.is-off {
    border-color: var(--color-border-subtle);
    background: var(--color-surface-muted);
  }

  .hdi-config-row__icon {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 11px;
  }

  .hdi-config-row.is-off .hdi-config-row__icon {
    background: var(--color-neutral-bg);
    color: var(--color-text-muted);
  }

  .hdi-config-row__text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 1px;
  }

  .hdi-config-row__text strong {
    font-size: 12.5px;
    font-weight: 600;
  }

  .hdi-config-row.is-off .hdi-config-row__text strong {
    color: var(--color-text-muted);
  }

  .hdi-config-row__text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-switch {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: var(--color-border);
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  .hdi-switch[aria-checked="true"] {
    background: var(--color-primary);
  }

  .hdi-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--color-surface-solid);
    box-shadow: var(--shadow-xs);
    transition: left var(--transition-fast);
  }

  .hdi-switch[aria-checked="true"]::after {
    left: 21px;
  }

  .hdi-modal {
    width: 472px;
    max-width: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface-solid);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    animation: hdi-rise var(--duration-short) var(--ease-decelerate);
  }

  .hdi-modal__icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 14px;
  }

  .hdi-field {
    display: grid;
    gap: 7px;
  }

  /* Grupos de pill usam <span> + role="group": <label> sem controle associado
     nao anuncia nada em leitor de tela. So os campos de verdade levam <label>. */
  .hdi-field > label,
  .hdi-field__label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-soft);
  }

  .hdi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .hdi-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .hdi-pill--day {
    min-width: 40px;
    justify-content: center;
    padding: 0 8px;
  }

  .hdi-pill.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
  }

  .hdi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
  }

  .hdi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 11.5px;
    font-weight: 600;
  }

  .hdi-chip button {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: 8px;
    cursor: pointer;
  }

  .hdi-chips input {
    flex: 1 1 140px;
    min-width: 120px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
  }

  .hdi-chips input:focus-visible {
    outline: none;
  }

  .hdi-chips:focus-within {
    border-color: var(--color-primary);
  }

  /* Caminho explicito pra confirmar o e-mail digitado. So o Enter deixava um
     modo escondido: quem digitava e ia direto no "Agendar envio" nunca via o
     destinatario virar chip. */
  .hdi-chips__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-soft);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .hdi-chips__add:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .hdi-chips__add i {
    font-size: 9px;
  }

  .hdi-field__error {
    font-size: 11px;
    color: var(--color-danger-text);
  }

  .hdi-field__hint {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .hdi-preview {
    display: flex;
    gap: 9px;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--color-surface-muted);
    font-size: 11.5px;
    color: var(--color-text-soft);
  }

  .hdi-preview i {
    color: var(--color-primary);
    font-size: 12px;
  }

  /* ==========================================================
     Estados: carregando, vazio, erro
     ========================================================== */
  .hdi-skel {
    border-radius: 8px;
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-text-muted) 10%, transparent) 8%,
        color-mix(in srgb, var(--color-text-muted) 22%, transparent) 20%,
        color-mix(in srgb, var(--color-text-muted) 10%, transparent) 34%
      );
    background-size: 520px 100%;
    animation: hdi-shimmer 1.35s linear infinite;
  }

  .hdi-skel--kpi { height: 126px; border-radius: 18px; }
  .hdi-skel--chart { height: 336px; border-radius: 18px; }

  .hdi-empty,
  .hdi-error {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 76px 24px;
    border: 1px dashed var(--color-border);
    border-radius: 18px;
    background: var(--color-surface);
    text-align: center;
  }

  .hdi-empty__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 24px;
  }

  .hdi-error .hdi-empty__icon {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .hdi-empty h2,
  .hdi-error h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
  }

  .hdi-empty p,
  .hdi-error p {
    margin: 0;
    max-width: 46ch;
    font-size: 12.5px;
    color: var(--color-text-soft);
  }

  .hdi-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  /* ==========================================================
     Movimento
     ========================================================== */
  @keyframes hdi-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes hdi-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes hdi-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
  }

  @keyframes hdi-shimmer {
    0%   { background-position: -520px 0; }
    100% { background-position: 520px 0; }
  }

  /* Transicoes ja zeram sozinhas (tokens de --duration-* viram 0ms); animacoes
     de keyframe precisam ser desligadas na mao. */
  @media (prefers-reduced-motion: reduce) {
    .hdi-dot,
    .hdi-skel,
    .hdi-tip,
    .hdi-drawer,
    .hdi-modal,
    .hdi-export__menu {
      animation: none;
    }

    .hdi-kpi:hover,
    .hdi-heat__cell:hover {
      transform: none;
    }
  }

  /* ==========================================================
     Impressao — "Exportar > PDF do painel inteiro".
     A exportacao NAO imprime a tela viva: public/js/indicatorsPrint.js monta um
     clone do painel fora do shell (`#nz-print-root`) e injeta uma folha unica
     sob medida (a regra de pagina recebe as dimensoes do clone ja medido).
     Essa regra fica LA, e nao aqui, porque ela e global — fixa-la neste
     arquivo mexeria em toda impressao do app — e porque a altura so existe
     depois da medicao. O que sobra aqui e o cabecalho desse clone (origem +
     filtros no lugar da topbar do app) e a higiene de quem manda imprimir pelo
     Ctrl+P do navegador.
     ========================================================== */
  .hdi-print__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .hdi-print__title h1 {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .hdi-print__title p {
    margin: 2px 0 0;
    color: var(--color-text-soft);
    font-size: 12px;
  }

  /* Quem assina a folha no lugar da topbar do app: o sistema e o tenant de
     onde a extracao saiu. */
  .hdi-print__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
  }

  .hdi-print__brand-note {
    font-size: 10px;
    color: var(--color-text-soft);
  }

  .hdi-print__brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-primary);
  }

  .hdi-print__brand-tenant {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
  }

  /* Recorte que gerou o PDF impresso junto: uma folha solta na mesa de reuniao
     sem o periodo e a empresa nao vale nada. */
  .hdi-print__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
  }

  .hdi-print__chip {
    display: inline-flex;
    gap: 5px;
    color: var(--color-text-soft);
    font-size: 11px;
  }

  .hdi-print__chip strong {
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .hdi-print__chip strong::after {
    content: ':';
  }

  @media print {
    .hdi-bar__center,
    .hdi-bar__right,
    .hdi-alert__actions,
    .hdi-backdrop,
    .hdi-drawer,
    .hdi-modal {
      display: none;
    }

    /* A sombra translucida do desenho e rasterizada pela impressora e sai como
       mancha cinza em volta de cada bloco. Zera em TUDO, e nao so nos cards. */
    .hdi-screen *,
    .hdi-print * {
      box-shadow: none;
      text-shadow: none;
    }

    .hdi-card,
    .hdi-kpi,
    .hdi-agent,
    .hdi-goal {
      break-inside: avoid;
    }
  }

  /* ==========================================================
     Responsivo — o alvo e nao quebrar entre 1024 e 1920.
     ========================================================== */
  @media (max-width: 900px) {
    .hdi-bar {
      gap: 12px;
    }

    .hdi-bar__center,
    .hdi-bar__right {
      flex: 1 1 100%;
    }

    .hdi-heat__grid {
      grid-template-columns: 30px repeat(12, minmax(0, 1fr));
      gap: 3px;
    }

    .hdi-heat__hour {
      font-size: 9px;
    }

    /* Sem largura pras cinco colunas, a barra e os serviços descem pra uma
       segunda faixa da mesma linha em vez de virarem coluna espremida — nome
       e total continuam lado a lado, que e o que se compara no ranking. */
    .hdi-rank {
      grid-template-columns: 22px 26px minmax(0, 1fr) auto;
      row-gap: 8px;
    }

    .hdi-rank__body {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .hdi-rank__total {
      grid-column: 4;
      grid-row: 1;
    }
  }

  @media (max-width: 640px) {
    .hdi-screen {
      gap: 12px;
    }

    .hdi-minis {
      grid-template-columns: 1fr;
    }

    .hdi-drawer {
      width: 100%;
    }
  }
}

/* ============================================================
   ALVOS DE TOQUE DOS PAINÉIS DE INDICADORES (fase 2)

   Vale para as duas telas que usam este arquivo: Chamados >
   Indicadores e Inventário > Indicadores.

   A tela já era responsiva (nada estoura a viewport, tudo empilha),
   mas os controles ficavam entre 23px e 36px de altura — o seletor de
   período e as linhas de serviço/empresa são justamente os mais
   tocados aqui.

   Sem marcação important: estes tamanhos são declarações normais deste
   mesmo arquivo (@layer pages) e nenhum outro CSS do projeto usa as
   classes hdi-*, então basta este bloco vir por último.

   FORA DA REGRA: .hdi-chart__col. São as colunas do gráfico de volume
   (9px de largura); alargá-las para 44px descaracterizaria o gráfico.
   Alvo de dado não é alvo de comando — ampliar a área de toque ali
   exigiria uma camada de captura por coluna, o que é mudança de
   componente, não ajuste de dimensão.
   ============================================================ */
@layer pages {
  @media (pointer: coarse) {
    .hdi-segmented__btn,
    .hdi-legend__btn,
    .hdi-range__btn,
    .hdi-compare,
    .hdi-ghost-btn,
    .hdi-primary-btn,
    .hdi-alert__link,
    .hdi-rank__more,
    .hdi-svc,
    .hdi-orgs__item {
      min-height: var(--nz-touch-target-min);
    }

    .hdi-icon-btn,
    .hdi-close {
      min-width: var(--nz-touch-target-min);
      min-height: var(--nz-touch-target-min);
    }
  }
}