/* Inspecia TV — ajuste FHD fiel ao layout de referência.
   Objetivo: leitura nítida à distância sem estourar a grade 16:9. */

html, body, #app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1500px) {
  body { font-weight: 500 !important; }

  .tv-shell {
    grid-template-rows: 72px 112px minmax(0, 1.08fr) minmax(0, .98fr) 82px !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .top-header { padding: 0 10px !important; }
  .header-left { gap: 16px !important; }
  .header-right { gap: 18px !important; }
  .brand-logo {
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
  }
  .header-divider { height: 40px !important; }
  .title-block h1 {
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
  }
  .title-block p {
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    color: #b7c6c0 !important;
    font-weight: 600 !important;
  }
  .live-badge {
    margin-left: 8px !important;
    padding: 8px 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }
  .date-box span {
    font-size: 10px !important;
    color: #afbeb9 !important;
    font-weight: 600 !important;
  }
  .date-box strong {
    font-size: 27px !important;
    font-weight: 900 !important;
  }
  .operation-box,
  .operation-title strong {
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  .operation-box > span {
    font-size: 9px !important;
    font-weight: 750 !important;
  }

  .metrics-row { gap: 8px !important; }
  .metric-card {
    padding: 12px 11px !important;
    gap: 10px !important;
    border-radius: 13px !important;
  }
  .metric-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
  .metric-icon .ui-icon {
    width: 19px !important;
    height: 19px !important;
  }
  .metric-label {
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    color: #c8d5d0 !important;
  }
  .metric-value-row {
    margin-top: 8px !important;
    gap: 6px !important;
  }
  .metric-value-row strong {
    font-size: 31px !important;
    line-height: .98 !important;
    font-weight: 900 !important;
    letter-spacing: -1.15px !important;
  }
  .metric-card.featured .metric-value-row strong {
    font-size: 29px !important;
  }
  .metric-body small {
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
    color: #a8b9b3 !important;
  }
  .metric-trend,
  .metric-percent {
    font-size: 10px !important;
    font-weight: 900 !important;
  }
  .mini-progress { height: 6px !important; }

  .primary-grid { grid-template-columns: 1.03fr .97fr !important; gap: 8px !important; }
  .secondary-grid { grid-template-columns: 1.45fr .74fr .73fr !important; gap: 8px !important; }
  .panel-heading {
    height: 58px !important;
    padding: 11px 14px 8px !important;
  }
  .panel-heading.compact { height: 52px !important; }
  .panel-heading h2 {
    font-size: 19px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.3px !important;
  }
  .panel-heading p {
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: #9fb1aa !important;
  }
  .section-icon {
    width: 19px !important;
    height: 19px !important;
  }
  .outline-chip,
  .counter-chip {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 7px 11px !important;
  }

  .chart-shell {
    height: calc(100% - 58px) !important;
    padding: 13px 12px 21px 48px !important;
  }
  .chart-y,
  .bar-hour {
    font-size: 9px !important;
    font-weight: 650 !important;
  }
  .bar-number {
    font-size: 10px !important;
    color: #f0f6f3 !important;
    font-weight: 900 !important;
  }

  .rank-header {
    height: 25px !important;
    font-size: 9px !important;
    font-weight: 750 !important;
  }
  .ranking-list { height: calc(100% - 83px) !important; }
  .rank-row {
    font-size: 10px !important;
    font-weight: 700 !important;
  }
  .avatar {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
    font-size: 8px !important;
  }
  .performance b {
    font-size: 9px !important;
    font-weight: 900 !important;
  }

  .queue-header {
    height: 21px !important;
    font-size: 9px !important;
    font-weight: 750 !important;
  }
  .queue-row {
    height: calc((100% - 73px)/5) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }
  .status-pill {
    padding: 5px 9px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
  }

  .workshop-head {
    height: 19px !important;
    font-size: 9px !important;
    font-weight: 750 !important;
  }
  .workshop-list { height: calc(100% - 71px) !important; }
  .workshop-row {
    grid-template-columns: 92px 1fr 37px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  .team-columns { height: calc(100% - 52px) !important; }
  .team-title strong {
    font-size: 10px !important;
    font-weight: 850 !important;
  }
  .team-title small,
  .team-column > span,
  .team-column > small {
    font-size: 8.5px !important;
    color: #9eafa9 !important;
    font-weight: 600 !important;
  }
  .team-column > b {
    font-size: 27px !important;
    font-weight: 900 !important;
  }
  .team-column > strong {
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  .activity-panel { padding: 7px 9px 8px !important; }
  .activity-heading { height: 26px !important; }
  .activity-heading strong {
    font-size: 12px !important;
    font-weight: 900 !important;
  }
  .activity-heading small {
    font-size: 8px !important;
    color: #9dada7 !important;
  }
  .activity-items { height: calc(100% - 28px) !important; }
  .activity-card {
    grid-template-columns: auto 23px 1fr !important;
    padding: 5px 7px !important;
  }
  .activity-time {
    font-size: 8px !important;
    font-weight: 750 !important;
  }
  .activity-card strong {
    font-size: 8.5px !important;
    font-weight: 850 !important;
  }
  .activity-card small {
    font-size: 7.3px !important;
    color: #a5b5af !important;
    font-weight: 600 !important;
  }
}

@media (min-width: 1500px) and (max-height: 820px) {
  .tv-shell {
    grid-template-rows: 64px 104px minmax(0, 1.05fr) minmax(0, .92fr) 74px !important;
  }
  .title-block h1 { font-size: 36px !important; }
  .title-block p { font-size: 12px !important; }
  .metric-value-row strong { font-size: 28px !important; }
  .metric-card.featured .metric-value-row strong { font-size: 26px !important; }
  .metric-label { font-size: 11px !important; }
  .metric-body small { font-size: 9px !important; }
  .panel-heading h2 { font-size: 17px !important; }
  .panel-heading p { font-size: 9px !important; }
  .queue-row, .rank-row, .workshop-row { font-size: 9.5px !important; }
}