/* Responsividade global da Inspecia TV.
   Mantém a composição de TV em uma tela, mas adapta tipografia, gaps,
   tabelas e cards para 4K/FHD/1600x900/1366x768/1280x720 e larguras menores. */

html,body,#app{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
}
body{
  min-width:0!important;
  overflow:hidden!important;
}

.tv-shell{
  width:100%!important;
  max-width:100vw!important;
  height:100dvh!important;
  min-width:0!important;
  padding:clamp(6px,.55vw,12px)!important;
  gap:clamp(5px,.45vw,9px)!important;
  overflow:hidden!important;
}

/* Cabeçalho */
.top-header{
  min-width:0!important;
  gap:clamp(8px,1vw,18px)!important;
  padding-inline:clamp(4px,.55vw,10px)!important;
  overflow:hidden!important;
}
.header-left{
  min-width:0!important;
  flex:1 1 auto!important;
  gap:clamp(8px,1vw,18px)!important;
  overflow:hidden!important;
}
.header-right{
  flex:0 0 auto!important;
  gap:clamp(8px,1.1vw,22px)!important;
}
.brand-logo{
  font-size:clamp(21px,1.65vw,31px)!important;
  letter-spacing:clamp(-1.8px,-.08vw,-.8px)!important;
}
.title-block{
  min-width:0!important;
  overflow:hidden!important;
}
.title-block h1{
  max-width:100%!important;
  font-size:clamp(20px,2vw,39px)!important;
  letter-spacing:clamp(-1.4px,-.08vw,-.5px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.title-block p{
  max-width:100%!important;
  font-size:clamp(8px,.65vw,12px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.header-divider{height:clamp(28px,3vw,42px)!important}
.live-badge{
  padding:clamp(5px,.45vw,8px) clamp(8px,.7vw,13px)!important;
  font-size:clamp(8px,.58vw,11px)!important;
}
.date-box span{font-size:clamp(7px,.48vw,9px)!important}
.date-box strong{font-size:clamp(17px,1.3vw,25px)!important}
.operation-box{font-size:clamp(7px,.48vw,9px)!important}
.operation-title strong{font-size:clamp(8px,.54vw,10px)!important}

/* KPIs */
.metrics-row{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:clamp(4px,.38vw,7px)!important;
}
.metrics-row>.metric-card{
  min-width:0!important;
  overflow:hidden!important;
}
.metric-card{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:start!important;
  gap:clamp(5px,.52vw,10px)!important;
  padding:clamp(8px,.65vw,12px) clamp(7px,.6vw,11px)!important;
  border-radius:clamp(9px,.7vw,13px)!important;
}
.metric-icon{
  width:clamp(29px,2vw,38px)!important;
  height:clamp(29px,2vw,38px)!important;
  flex-basis:auto!important;
}
.metric-icon .ui-icon{
  width:clamp(15px,1vw,19px)!important;
  height:clamp(15px,1vw,19px)!important;
}
.metric-body{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100%!important;
}
.metric-label{
  display:block!important;
  min-width:0!important;
  font-size:clamp(7.6px,.58vw,10px)!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
}
.metric-value-row{
  width:100%!important;
  min-width:0!important;
  align-items:flex-end!important;
  gap:clamp(4px,.38vw,8px)!important;
  margin-top:clamp(4px,.45vw,8px)!important;
}
.metric-value-row strong{
  min-width:0!important;
  font-size:clamp(18px,1.55vw,30px)!important;
  letter-spacing:clamp(-1px,-.06vw,-.5px)!important;
  white-space:nowrap!important;
}
.metric-trend,.metric-percent{
  flex:0 0 auto!important;
  margin-left:auto!important;
  font-size:clamp(7px,.52vw,9px)!important;
}
.metric-body>small{
  max-width:100%!important;
  margin-top:clamp(4px,.4vw,7px)!important;
  font-size:clamp(6.7px,.48vw,8.5px)!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.mini-progress{
  width:100%!important;
  height:clamp(3px,.3vw,5px)!important;
  margin-top:auto!important;
  margin-bottom:1px!important;
}
.metric-card.inspector-agenda-card{align-items:start!important}
.metric-card.inspector-agenda-card .metric-label{white-space:normal!important}

/* Grades centrais */
.primary-grid,.secondary-grid{
  width:100%!important;
  min-width:0!important;
  gap:clamp(5px,.45vw,8px)!important;
}
.primary-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr)!important}
.secondary-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.74fr) minmax(0,.73fr)!important}
.panel,.activity-panel,.inspection-times-panel,.completion-panel{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  border-radius:clamp(9px,.7vw,13px)!important;
}
.panel-heading{
  height:clamp(45px,5.4vh,58px)!important;
  padding:clamp(8px,.7vw,12px) clamp(9px,.8vw,14px) 6px!important;
  gap:8px!important;
}
.panel-heading.compact{height:clamp(42px,4.9vh,52px)!important}
.panel-heading>div{min-width:0!important}
.panel-heading h2{
  min-width:0!important;
  font-size:clamp(11px,.8vw,15px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.panel-heading p{
  font-size:clamp(6.8px,.46vw,8.5px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.outline-chip,.counter-chip{
  flex:0 0 auto!important;
  padding:clamp(4px,.36vw,6px) clamp(7px,.58vw,11px)!important;
  font-size:clamp(6.8px,.46vw,8.5px)!important;
}

/* Produção por hora */
.chart-shell{
  padding:clamp(9px,1vw,14px) clamp(8px,.8vw,12px) clamp(15px,1.5vw,21px) clamp(34px,2.5vw,48px)!important;
}
.chart-y{
  left:clamp(8px,.75vw,14px)!important;
  font-size:clamp(6.5px,.43vw,8px)!important;
}
.chart-gridlines{left:clamp(34px,2.5vw,48px)!important}
.bars{gap:clamp(3px,.42vw,8px)!important}
.bar-fill{width:min(34px,74%)!important}
.bar-number,.bar-hour{font-size:clamp(6.2px,.43vw,8px)!important}

/* Ranking */
.rank-grid{
  grid-template-columns:minmax(14px,20px) minmax(0,1.42fr) minmax(0,1fr) minmax(30px,.55fr) minmax(34px,.62fr) minmax(55px,1.18fr)!important;
  gap:clamp(4px,.42vw,8px)!important;
}
.rank-header,.ranking-list{padding-inline:clamp(8px,.75vw,14px)!important}
.rank-header{font-size:clamp(6.4px,.42vw,7.8px)!important}
.rank-row{font-size:clamp(7px,.46vw,8.5px)!important}
.avatar{
  width:clamp(20px,1.3vw,24px)!important;
  height:clamp(20px,1.3vw,24px)!important;
  flex-basis:clamp(20px,1.3vw,24px)!important;
  font-size:clamp(6.5px,.42vw,8px)!important;
}
.inspector-cell{gap:clamp(4px,.36vw,7px)!important}
.performance{grid-template-columns:minmax(0,1fr) minmax(25px,34px)!important;gap:4px!important}
.performance b{font-size:clamp(6.5px,.42vw,8px)!important}

/* Filas e tabelas */
.queue-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.04fr) minmax(0,1.18fr) minmax(55px,.93fr) minmax(36px,.64fr)!important;
  gap:clamp(4px,.42vw,8px)!important;
}
.queue-header,.queue-row{padding-inline:0!important;margin-inline:clamp(8px,.85vw,16px)!important}
.queue-header{font-size:clamp(6.4px,.42vw,7.8px)!important}
.queue-row{font-size:clamp(7px,.46vw,8.5px)!important;min-width:0!important}
.queue-row>*{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.status-pill{
  padding:clamp(3px,.32vw,5px) clamp(6px,.48vw,9px)!important;
  font-size:clamp(6.5px,.43vw,8px)!important;
}

/* Oficinas */
.workshop-head{padding-inline:clamp(8px,.75vw,14px)!important;font-size:clamp(6.4px,.42vw,7.7px)!important}
.workshop-list{padding-inline:clamp(8px,.75vw,14px)!important;gap:clamp(3px,.3vw,5px)!important}
.workshop-row{
  grid-template-columns:minmax(64px,88px) minmax(0,1fr) minmax(28px,34px)!important;
  gap:clamp(4px,.36vw,7px)!important;
  font-size:clamp(7px,.46vw,8.5px)!important;
}
.workshop-row>*{min-width:0!important}
.workshop-row>span:first-child{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

/* Interno x externo */
.team-columns{padding:2px clamp(6px,.65vw,12px) clamp(6px,.55vw,10px)!important}
.team-column{padding:clamp(5px,.48vw,7px) clamp(6px,.65vw,12px)!important}
.team-title{gap:clamp(4px,.36vw,7px)!important;min-height:clamp(25px,3vh,32px)!important}
.team-title>.ui-icon{width:clamp(14px,1vw,18px)!important;height:clamp(14px,1vw,18px)!important}
.team-title strong{font-size:clamp(7px,.48vw,8.8px)!important}
.team-title small{font-size:clamp(6px,.4vw,7.5px)!important}
.team-column>b{font-size:clamp(17px,1.3vw,24px)!important;margin-top:clamp(5px,.55vw,9px)!important}
.team-column>span{font-size:clamp(6.3px,.42vw,7.8px)!important}
.team-column>strong{font-size:clamp(12px,.9vw,16px)!important}
.team-column>small{font-size:clamp(5.8px,.38vw,7.2px)!important}
.team-track{margin:clamp(5px,.55vw,10px) 0 clamp(4px,.4vw,6px)!important}

/* Atividade */
.activity-panel{padding:clamp(5px,.45vw,7px) clamp(6px,.55vw,9px) clamp(6px,.5vw,8px)!important}
.activity-heading strong{font-size:clamp(8.5px,.62vw,11px)!important}
.activity-heading small{font-size:clamp(6.3px,.42vw,7.8px)!important}
.activity-items{gap:clamp(4px,.38vw,7px)!important}
.activity-card{
  grid-template-columns:auto clamp(18px,1.2vw,23px) minmax(0,1fr)!important;
  gap:clamp(3px,.32vw,6px)!important;
  padding:clamp(4px,.36vw,5px) clamp(4px,.45vw,7px)!important;
}
.activity-time{font-size:clamp(6px,.4vw,7.4px)!important}
.activity-symbol{width:clamp(18px,1.2vw,23px)!important;height:clamp(18px,1.2vw,23px)!important;font-size:clamp(8px,.54vw,10px)!important}
.activity-card strong{font-size:clamp(6.2px,.42vw,7.6px)!important}
.activity-card small{font-size:clamp(5.5px,.36vw,6.7px)!important}

/* Últimas conclusões */
.inspection-times-panel,.completion-panel{padding:clamp(6px,.5vw,8px) clamp(7px,.6vw,10px) clamp(7px,.55vw,9px)!important}
.inspection-times-heading{
  height:clamp(30px,3.4vh,35px)!important;
  min-width:0!important;
  gap:8px!important;
}
.inspection-times-title{min-width:0!important}
.inspection-times-title>div{min-width:0!important}
.inspection-times-title strong{
  font-size:clamp(9.5px,.7vw,13px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.inspection-times-title small{font-size:clamp(6px,.42vw,7.8px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.inspection-live-chip,.completion-chip{flex:0 0 auto!important;padding:clamp(3px,.3vw,5px) clamp(6px,.48vw,9px)!important;font-size:clamp(6.2px,.42vw,7.8px)!important}
.inspection-time-grid{
  min-width:0!important;
  gap:clamp(4px,.48vw,9px)!important;
}
.inspection-time-head{font-size:clamp(6.2px,.42vw,7.5px)!important;padding-inline:clamp(4px,.42vw,8px)!important}
.inspection-time-row{font-size:clamp(6.8px,.46vw,8.2px)!important;padding-inline:clamp(4px,.42vw,8px)!important}
.inspection-time-row>*{min-width:0!important}
.inspection-name,.inspection-vehicle,.completion-inspector,.completion-vehicle{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.inspection-status,.completion-status{min-width:clamp(60px,4.1vw,78px)!important;padding:clamp(3px,.3vw,4px) clamp(5px,.42vw,8px)!important;font-size:clamp(6.2px,.42vw,7.5px)!important}

/* 1600 / 1440 / 1366 */
@media (max-width:1500px){
  .tv-shell{padding:7px!important;gap:6px!important}
  .header-left{gap:10px!important}
  .header-right{gap:10px!important}
  .metric-card{gap:6px!important;padding:9px 8px!important}
  .metric-icon{width:32px!important;height:32px!important}
  .metric-value-row strong{font-size:20px!important}
  .metric-label{font-size:8px!important}
  .metric-body>small{font-size:7px!important}
  .metric-trend,.metric-percent{font-size:7.5px!important}
  .panel-heading{padding-inline:10px!important}
  .panel-heading h2{font-size:12px!important}
}

/* 1280 e similares: preserva todos os blocos sem sobreposição. */
@media (max-width:1300px){
  .brand-logo{font-size:22px!important}
  .title-block h1{font-size:22px!important}
  .title-block p{font-size:8px!important;margin-top:4px!important}
  .header-divider{height:28px!important}
  .live-badge{padding:5px 8px!important;font-size:8px!important}
  .date-box strong{font-size:17px!important}
  .operation-box>span{padding-left:18px!important}

  .metrics-row{gap:4px!important}
  .metric-card{padding:8px 6px!important;gap:5px!important}
  .metric-icon{width:29px!important;height:29px!important}
  .metric-value-row{gap:4px!important}
  .metric-value-row strong{font-size:18px!important}
  .metric-label{font-size:7.4px!important}
  .metric-body>small{font-size:6.5px!important}
  .metric-trend,.metric-percent{font-size:6.7px!important}

  .primary-grid,.secondary-grid{gap:5px!important}
  .rank-grid,.queue-grid,.inspection-time-grid{gap:4px!important}
  .activity-items{gap:4px!important}
}

/* Abaixo de 1120 px, os ícones dos KPIs deixam de consumir largura,
   mantendo os sete indicadores legíveis sem criar rolagem horizontal. */
@media (max-width:1120px){
  .metric-card{grid-template-columns:minmax(0,1fr)!important}
  .metric-card>.metric-icon{display:none!important}
  .metric-value-row strong{font-size:17px!important}
  .metric-label{font-size:7px!important}
  .header-right{gap:6px!important}
  .live-badge{margin-left:4px!important}
  .operation-box>span{display:none!important}
  .secondary-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,.8fr)!important}
}

/* Alturas de notebook/TV 720p */
@media (max-height:760px){
  .tv-shell{
    grid-template-rows:6.5vh 12.5vh 27vh 27vh 18vh!important;
    padding:6px!important;
    gap:5px!important;
  }
  .panel-heading{height:45px!important;padding-top:8px!important}
  .panel-heading.compact{height:42px!important}
  .chart-shell{padding-top:8px!important}
  .metric-card{padding-block:7px!important}
  .metric-value-row{margin-top:4px!important}
  .metric-body>small{margin-top:4px!important}
  .team-column>b{margin-top:4px!important}
  .team-track{margin:5px 0 4px!important}
}

@media (max-height:680px){
  .tv-shell{grid-template-rows:6vh 12vh 27vh 27vh 18vh!important;gap:4px!important;padding:4px!important}
  .title-block p{display:none!important}
  .panel-heading p{display:none!important}
  .metric-body>small{display:none!important}
  .metric-value-row{margin-top:3px!important}
  .mini-progress{margin-top:5px!important}
}