/* SouPrimeiroAC V22.2.27 — correção de layout técnico e contraste. */

/* Seleção amarela: texto SEMPRE escuro, inclusive subtítulos, quantidades e controles. */
html[data-theme="dark"] :is(
  #camerasView .camera-list-item.active,
  #camerasView .camera-list-row.active .camera-list-item,
  #lentesView .tech-list-item.active,
  #monitoresView .tech-list-item.active,
  #transmissaoView .tech-list-item.active,
  #acessoriosView .tech-list-item.active,
  #equipamentosView .equipment-card.selected,
  .check-picker-card.selected,
  .catalog-card.selected
),
html[data-theme="dark"] :is(
  #camerasView .camera-list-item.active,
  #camerasView .camera-list-row.active .camera-list-item,
  #lentesView .tech-list-item.active,
  #monitoresView .tech-list-item.active,
  #transmissaoView .tech-list-item.active,
  #acessoriosView .tech-list-item.active,
  #equipamentosView .equipment-card.selected,
  .check-picker-card.selected,
  .catalog-card.selected
) :is(span,strong,small,p,b,i,label){
  color:#111214!important;
  -webkit-text-fill-color:#111214!important;
}

/* Desktop: página técnica realmente dividida em duas colunas iguais. */
@media(min-width:761px){
  :is(#camerasView,#lentesView,#monitoresView,#transmissaoView,#acessoriosView) .tech-lab,
  #camerasView .camera-lab.camera-standard-lab{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:18px!important;
    align-items:start!important;
  }

  :is(#camerasView,#lentesView,#monitoresView,#transmissaoView,#acessoriosView) :is(.tech-browser,.camera-browser){
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
    position:sticky!important;
    top:14px!important;
    max-height:calc(100vh - 36px)!important;
    overflow:hidden!important;
  }

  :is(#camerasView,#lentesView,#monitoresView,#transmissaoView,#acessoriosView) :is(.tech-list,.camera-list){
    width:100%!important;
    min-width:0!important;
    max-height:calc(100vh - 235px)!important;
    overflow:auto!important;
    padding-right:3px!important;
  }

  :is(#camerasView,#lentesView,#monitoresView,#transmissaoView,#acessoriosView) :is(.tech-detail,.camera-workspace){
    width:100%!important;
    min-width:0!important;
  }

  /* O painel da direita ganha hierarquia simples e legível, sem cards gigantes. */
  :is(#lentesView,#monitoresView,#transmissaoView,#acessoriosView) .tech-hero{
    grid-template-columns:minmax(0,1fr) 96px!important;
    min-height:150px!important;
    padding:20px!important;
    gap:16px!important;
  }
  :is(#lentesView,#monitoresView,#transmissaoView,#acessoriosView) .tech-hero h3{
    max-width:none!important;
    font-size:clamp(1.75rem,3vw,3rem)!important;
    line-height:1!important;
    overflow-wrap:anywhere!important;
  }
  :is(#lentesView,#monitoresView,#transmissaoView,#acessoriosView) .tech-symbol{
    width:82px!important;
    height:82px!important;
    border-radius:20px!important;
    font-size:2.4rem!important;
  }
  :is(#lentesView,#monitoresView,#transmissaoView,#acessoriosView) .tech-specs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  :is(#lentesView,#monitoresView,#transmissaoView,#acessoriosView) .tech-spec-row{
    min-height:0!important;
    padding:12px!important;
  }

  /* Câmeras: mesma divisão 50/50; conteúdo interno se adapta à metade direita. */
  #camerasView .camera-hero-card{
    grid-template-columns:minmax(0,1fr) 130px!important;
    min-height:160px!important;
    padding:20px!important;
  }
  #camerasView .camera-hero-copy h3{
    font-size:clamp(1.8rem,3vw,3.2rem)!important;
    overflow-wrap:anywhere!important;
  }
  #camerasView .camera-visual{min-height:112px!important}
  #camerasView .camera-body-shape{transform:scale(.66)!important}
  #camerasView .camera-spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #camerasView .camera-info-grid{grid-template-columns:1fr!important}
  #camerasView .storage-layout{grid-template-columns:1fr!important}
  #camerasView .storage-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #camerasView .recording-modes-table{overflow-x:auto!important}
  #camerasView :is(.recording-head,.recording-row){min-width:620px}
}

/* Mobile permanece com o comportamento aprovado: uma coluna. */
@media(max-width:760px){
  :is(#camerasView,#lentesView,#monitoresView,#transmissaoView,#acessoriosView) .tech-lab,
  #camerasView .camera-lab.camera-standard-lab{grid-template-columns:1fr!important}
}