/*
 * Redesign — Tecnico (so' os cards de O.S. dentro da aba
 * "Servicos", que reusam o mesmo componente .os-card/.os-fields/
 * .os-status-badge da Gerenciar O.S. admin - mesmo tratamento
 * visual aplicado la'. O resto da pagina (clima/relogio, abas,
 * formulario de finalizar atividade) fica intocado - nao faz parte
 * do padrao titulo+filtro+KPIs das outras paginas.
 */
@media (min-width: 901px) {
  /* Conteudo colado no topo/laterais, igual as outras paginas. */
  body[data-page="tecnico"][data-theme-preset="dark"] .container.app-content {
    padding: 20px !important;
  }

  /* Pedido explicito: no desktop, esconder a navegacao por abas
     (Servicos/Materiais/Modem) - mantem o titulo "Tecnico" visivel,
     so' o <nav> some. Mobile (tech-mobile-only, fora desse
     breakpoint) fica intocado. */
  body[data-page="tecnico"][data-theme-preset="dark"] .tech-tabs-section .admin-tabs {
    display: none;
  }

  /* .tech-servicos-section e' um <section class="card ..."> - o
     .card generico (pro-ui.css) tem padding/borda/fundo proprios,
     virando uma "tabela mae" envolvendo o titulo + os cards de O.S.
     Mesmo fix aplicado no Gerenciar O.S./Instalacoes: cards soltos,
     sem essa caixa por fora. */
  body[data-page="tecnico"][data-theme-preset="dark"] .tech-servicos-section {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* .tech-servicos-section tem a classe "card" (sem "app-page"), e'
     pega pela regra generica ".card:not(.app-page):hover{background:
     var(--app-elevated-hover-bg)}" (app-layout.css) - pensada pra
     card pequenos, nao pra secao inteira. Como zeramos o fundo/borda
     acima, sobra so' esse fundo cinza aparecendo ao passar o mouse. */
  body[data-page="tecnico"][data-theme-preset="dark"] .tech-servicos-section:hover {
    background: transparent !important;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .tech-servicos-section > .receitas-periodo-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-foreground);
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .tech-servicos-section > .receitas-periodo-heading::before {
    background: var(--ds-accent) !important;
  }

  body[data-page="tecnico"][data-theme-preset="dark"] .os-card {
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: var(--ds-radius-xl) !important;
    background: var(--ds-card) !important;
    box-shadow: none !important;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card.os-card-os-aberta {
    border-width: 1px !important;
    background: var(--ds-card) !important;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card.os-card-os-em-andamento {
    border-left-width: 1px !important;
  }

  body[data-page="tecnico"][data-theme-preset="dark"] .os-card-head {
    position: relative;
    border-bottom: none !important;
    background: none !important;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.14) 15%, rgba(148, 163, 184, 0.14) 85%, transparent);
  }

  body[data-page="tecnico"][data-theme-preset="dark"] .os-card-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .inst-pill {
    background: color-mix(in srgb, #3B82F6 12%, transparent) !important;
    color: #3B82F6 !important;
    border: 1px solid color-mix(in srgb, #3B82F6 40%, transparent) !important;
    font-weight: 500;
  }

  body[data-page="tecnico"][data-theme-preset="dark"] .os-status-badge {
    background: var(--ds-secondary) !important;
    color: var(--ds-muted-foreground) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px !important;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-status-badge.os-st-aberta {
    color: var(--ds-foreground) !important;
  }

  body[data-page="tecnico"][data-theme-preset="dark"] .os-fields {
    display: block;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-fields-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 20px;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-fields-group + .os-fields-group {
    position: relative;
    margin-top: 16px;
    padding-top: 16px;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-fields-group + .os-fields-group::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.14) 15%, rgba(148, 163, 184, 0.14) 85%, transparent);
  }

  /* Seta clicavel pra recolher/expandir o card. O rodape de
     finalizar atividade (formulario, nao mexido) tambem some quando
     recolhido. */
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card-chevron {
    color: var(--ds-muted-foreground);
    flex-shrink: 0;
    transition: transform .15s ease;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card:not(.is-collapsed) .os-card-chevron {
    transform: rotate(180deg);
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card.is-collapsed .os-fields,
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card.is-collapsed .os-tecnico-pc-footer {
    display: none;
  }
  body[data-page="tecnico"][data-theme-preset="dark"] .os-card.is-collapsed .os-card-head::after {
    display: none;
  }
}