/*
 * WC-DS APLICADO AO TMS — ETAPA 1
 * ------------------------------------------------------------------
 * Aplica o padrão visual aprovado (wc-design-system.css) em três partes:
 *   1. tela de login
 *   2. menu lateral e cabeçalho
 *   3. Dashboard
 *
 * O QUE ESTE ARQUIVO É: uma ponte de transição. Ele NÃO inventa estilo.
 * Todo valor aqui é uma variável --ds-* do wc-design-system.css; não há
 * um único número ou cor solta. Se o padrão mudar, isto acompanha sozinho.
 *
 * POR QUE ELE PRECISA EXISTIR (e por que usa !important):
 * as três telas são estilizadas hoje por regras espalhadas no index.html,
 * no layout-v3.css e no dashboard-v3.css, quase todas com !important —
 * a barra lateral sozinha recebe 19 declarações de fundo/largura, 17 delas
 * com !important. Como !important só perde para outro !important, não há
 * como aplicar o padrão sem usá-lo aqui. Ele aparece SÓ onde a camada
 * antiga usa, e sempre preso a um container (#login, .side, .top, #dash),
 * para não vazar para telas que ainda não foram aprovadas.
 *
 * O CAMINHO DEFINITIVO é o descrito no wc-design-system.css: remover as
 * regras antigas de cada tela. Isso não cabia nesta etapa porque essas
 * regras usam seletores globais (input, button.primary, .card), que valem
 * para o TMS inteiro — mexer neles mudaria telas fora do que foi aprovado.
 *
 * NADA de comportamento muda aqui: nenhuma rota, permissão, regra, cálculo,
 * texto ou ação de botão. Só aparência.
 */

/* ==================================================================
   1. TELA DE LOGIN
   ================================================================== */
#login.wc-ds{
  background:var(--ds-navy-900) !important;
  padding:var(--ds-4);
}
#login.wc-ds .loginbox{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-lg) !important;
  padding:var(--ds-8) !important;
  box-shadow:var(--ds-shadow-3) !important;
  width:min(var(--ds-modal-sm),100%);
}
#login.wc-ds h1{
  font-size:var(--ds-fs-3xl);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ds-navy-900);
  margin:0 0 var(--ds-1);
}
#login.wc-ds .loginbox > p{
  font-size:var(--ds-fs-md);
  color:var(--ds-text-3) !important;
  margin:0 0 var(--ds-5);
}
#login.wc-ds label{
  font-size:var(--ds-fs-sm);
  font-weight:600;
  color:var(--ds-text-2);
}
#login.wc-ds input[type="text"],
#login.wc-ds input[type="password"],
#login.wc-ds input:not([type="checkbox"]){
  height:var(--ds-control-h) !important;
  padding:0 var(--ds-3) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-sm) !important;
  font-size:var(--ds-fs-md) !important;
  color:var(--ds-text);
  background:var(--ds-surface);
  margin:var(--ds-1) 0 var(--ds-4);
  transition:border-color var(--ds-transition),box-shadow var(--ds-transition);
}
#login.wc-ds input:not([type="checkbox"]):hover{border-color:var(--ds-brand-400) !important}
#login.wc-ds input:not([type="checkbox"]):focus{
  border-color:var(--ds-brand-500) !important;
  box-shadow:var(--ds-focus) !important;
  outline:none;
}
#login.wc-ds input[type="checkbox"]{accent-color:var(--ds-brand-500)}
#login.wc-ds button.primary{
  height:var(--ds-control-h-lg) !important;
  background:var(--ds-brand-500) !important;
  border:1px solid var(--ds-brand-500) !important;
  border-radius:var(--ds-r-sm) !important;
  color:var(--ds-text-inverse) !important;
  font-size:var(--ds-fs-lg) !important;
  font-weight:600;
  transition:background var(--ds-transition);
}
#login.wc-ds button.primary:hover{background:var(--ds-brand-600) !important;border-color:var(--ds-brand-600) !important}
#login.wc-ds button.primary:focus-visible{box-shadow:var(--ds-focus) !important;outline:none}
#login.wc-ds .loginbox > div > button{
  font-size:var(--ds-fs-md);
  color:var(--ds-text-2) !important;
  border-radius:var(--ds-r-sm);
}
#login.wc-ds #err{
  font-size:var(--ds-fs-sm);
  color:var(--ds-danger-600) !important;
  margin:var(--ds-3) 0 0;
}

/* ==================================================================
   2. MENU LATERAL
   A largura recolhida e a troca de página continuam exatamente como
   estão — aqui só mudam cor, canto e altura, para o padrão único.
   ================================================================== */
.side.wc-ds{
  background:var(--ds-navy-800) !important;
  border-right:1px solid var(--ds-navy-700) !important;
}
.side.wc-ds .nav button{
  border-radius:var(--ds-r-md) !important;
  color:var(--ds-surface-3) !important;
  transition:background var(--ds-transition),color var(--ds-transition);
}
.side.wc-ds .nav button:hover{
  background:var(--ds-navy-700) !important;
  color:var(--ds-text-inverse) !important;
}
.side.wc-ds .nav button.active{
  background:var(--ds-brand-500) !important;
  color:var(--ds-text-inverse) !important;
}
.side.wc-ds .nav button:focus-visible{box-shadow:var(--ds-focus);outline:none}
.side.wc-ds > small{color:var(--ds-text-3) !important;font-size:var(--ds-fs-xs) !important}
.side.wc-ds > div:last-child button{
  border-radius:var(--ds-r-sm) !important;
  color:var(--ds-surface-3) !important;
  font-size:var(--ds-fs-sm) !important;
}
.side.wc-ds > div:last-child button:hover{background:var(--ds-navy-700) !important;color:var(--ds-text-inverse) !important}

/* ==================================================================
   3. CABEÇALHO
   O cabeçalho que aparece é o "#wcV3TopApproved", montado pelo layout-v3.js
   dentro do ".top" (o cabeçalho original do index.html fica escondido por uma
   regra do layout-v3.css). Os alvos abaixo são os elementos reais desse
   cabeçalho, e vêm com especificidade suficiente para vencer as regras do
   layout-v3.css — que chegam a 16 declarações só no título, todas !important.
   ================================================================== */
body.wc-layout-v3 .top.wc-ds,
.top.wc-ds{
  background:var(--ds-surface) !important;
  border-bottom:1px solid var(--ds-line) !important;
}

/* título ("Olá, Administrador") */
body.wc-layout-v3 .top #wcV3TopApproved #wcV3GreetingTitle,
body.wc-layout-v3 .top #wcV3TopApproved .wc-v3-greeting h1{
  font-size:var(--ds-fs-2xl) !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  color:var(--ds-navy-900) !important;
  margin:0 !important;
}
/* linha de apoio ("Bem-vindo de volta...") */
body.wc-layout-v3 .top #wcV3TopApproved .wc-v3-greeting p{
  font-size:var(--ds-fs-sm) !important;
  color:var(--ds-text-3) !important;
  margin:var(--ds-1) 0 0 !important;
}

/* caixa de busca */
body.wc-layout-v3 .top #wcV3TopApproved #wcV3SearchApproved{
  height:var(--ds-control-h) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-sm) !important;
  background:var(--ds-surface) !important;
  transition:border-color var(--ds-transition),box-shadow var(--ds-transition);
}
body.wc-layout-v3 .top #wcV3TopApproved #wcV3SearchApproved:hover{border-color:var(--ds-brand-400) !important}
body.wc-layout-v3 .top #wcV3TopApproved #wcV3SearchApproved:focus-within{
  border-color:var(--ds-brand-500) !important;
  box-shadow:var(--ds-focus) !important;
}
body.wc-layout-v3 .top #wcV3TopApproved #wcV3SearchInput{
  font-size:var(--ds-fs-md) !important;
  color:var(--ds-text) !important;
}
body.wc-layout-v3 .top #wcV3TopApproved #wcV3SearchInput::placeholder{color:var(--ds-text-3) !important}

/* sino, avatar e demais botões do canto direito */
body.wc-layout-v3 .top #wcV3TopApproved .wc-v3-user-area button{
  height:var(--ds-control-h) !important;
  min-width:var(--ds-control-h) !important;
  border-radius:var(--ds-r-sm) !important;
  border:1px solid var(--ds-line) !important;
  font-size:var(--ds-fs-md) !important;
  transition:background var(--ds-transition),border-color var(--ds-transition);
}
body.wc-layout-v3 .top #wcV3TopApproved .wc-v3-user-area button:hover{
  background:var(--ds-surface-3) !important;
  border-color:var(--ds-line-strong) !important;
}
body.wc-layout-v3 .top #wcV3TopApproved .wc-v3-user-area button:focus-visible{
  outline:none;
  box-shadow:var(--ds-focus) !important;
}

/* O cabeçalho original do index.html continua escondido pelo layout-v3.css.
   As regras abaixo valem só se algum dia ele voltar a aparecer — não custam
   nada e evitam que ele reapareça fora do padrão. */
.top.wc-ds #title{
  font-size:var(--ds-fs-2xl);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ds-navy-900);
  margin:0;
}
.top.wc-ds #who{font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
.top.wc-ds > div > button{
  height:var(--ds-control-h);
  border-radius:var(--ds-r-sm);
  font-size:var(--ds-fs-md);
  border:1px solid var(--ds-line);
}
.top.wc-ds > div > button.gold{
  background:var(--ds-brand-500);
  border-color:var(--ds-brand-500);
  color:var(--ds-text-inverse);
  font-weight:600;
}

/* ==================================================================
   4. DASHBOARD
   ================================================================== */
#dash.wc-ds{background:var(--ds-canvas)}
#dash.wc-ds .wc-v3-panel,
#dash.wc-ds .wc-v3-kpi,
#dash.wc-ds .wc-v5-kpi,
#dash.wc-ds .wc-v5-legacy-kpi,
#dash.wc-ds .wc-v5-service-card,
#dash.wc-ds .wc-v5-service-panel,
#dash.wc-ds .wc-v5-summary,
#dash.wc-ds .card{
  background:var(--ds-surface) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:var(--ds-r-md) !important;
  box-shadow:var(--ds-shadow-1) !important;
}
#dash.wc-ds .wc-v3-panel-head{
  border-bottom:1px solid var(--ds-line) !important;
  padding:var(--ds-4) var(--ds-5) !important;
}
#dash.wc-ds h2{font-size:var(--ds-fs-2xl) !important;color:var(--ds-navy-900) !important;letter-spacing:-.01em}
#dash.wc-ds h3{font-size:var(--ds-fs-xl) !important;color:var(--ds-navy-800) !important}
#dash.wc-ds h4{font-size:var(--ds-fs-lg) !important;color:var(--ds-navy-800) !important}
/* números do painel: alinhados em coluna, como manda o padrão */
#dash.wc-ds .wc-v3-kpi-value,
#dash.wc-ds .wc-v5-kpi-value,
#dash.wc-ds .wc-v5-metric-value,
#dash.wc-ds .value{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--ds-navy-900) !important;
}
#dash.wc-ds .label,
#dash.wc-ds .wc-v3-kpi-label,
#dash.wc-ds .wc-v5-kpi-label{
  font-size:var(--ds-fs-xs) !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ds-text-3) !important;
}
#dash.wc-ds table th{
  height:var(--ds-control-h) !important;
  font-size:var(--ds-fs-xs) !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ds-text-3) !important;
  background:var(--ds-surface-2) !important;
  border-bottom:1px solid var(--ds-line) !important;
}
#dash.wc-ds table td{
  height:var(--ds-row-h) !important;
  font-size:var(--ds-fs-md) !important;
  color:var(--ds-text) !important;
  border-bottom:1px solid var(--ds-line) !important;
}
#dash.wc-ds button{
  border-radius:var(--ds-r-sm) !important;
  font-size:var(--ds-fs-md) !important;
  transition:background var(--ds-transition);
}
#dash.wc-ds button:focus-visible{box-shadow:var(--ds-focus);outline:none}

/* ==================================================================
   5. CELULAR
   Mantém o que já funciona; só garante que o padrão não aperte a tela.
   ================================================================== */
@media(max-width:800px){
  /* CORREÇÃO DE DEFEITO PRÉ-EXISTENTE (não veio desta etapa visual).
     No celular a barra lateral fica escondida, mas o layout-v3.css reserva
     "margin-left:238px" e "width:calc(100% - 230px)", ambos !important e ambos
     SEM media query — então valiam também no celular e espremiam o conteúdo
     em 152px de 390px,
     com rolagem lateral. As regras de celular já existiam no index.html; só
     estavam sendo anuladas. Isto apenas as restabelece. */
  body.wc-layout-v3 .main{
    margin-left:0 !important;
    width:auto !important;   /* o layout-v3.css fixa calc(100% - 230px), também sem media query */
    max-width:100% !important;
  }

  #login.wc-ds{padding:var(--ds-3)}
  #login.wc-ds .loginbox{padding:var(--ds-5) !important}
  #login.wc-ds h1{font-size:var(--ds-fs-2xl)}
  .top.wc-ds h1,
  .top.wc-ds #title{font-size:var(--ds-fs-xl) !important}
  #dash.wc-ds table td{height:auto !important;padding:var(--ds-3) !important}

  /* Outro defeito pré-existente, que só aparecia depois da correção acima:
     o texto de rodapé do cartão (".trend") é posicionado no canto de baixo
     por "position:absolute". Em cartão estreito ele monta por cima do texto
     que vem no fluxo. No celular ele volta a ser uma linha normal. */
  #dash.wc-ds .wc-v5-kpi,
  #dash.wc-ds .wc-v3-kpi{padding-bottom:var(--ds-4) !important}
  #dash.wc-ds .wc-v5-kpi .trend,
  #dash.wc-ds .wc-v3-kpi .trend{
    position:static !important;
    display:block;
    margin-top:var(--ds-2);
    font-size:var(--ds-fs-sm) !important;
  }
}

/* ==================================================================
   6. BOTÃO DO MENU NO CELULAR
   Em telas de até 600px o menu lateral fica escondido pelo próprio
   index.html ("display:none" nessa largura), e não havia como abrir.
   Acima de 600px nada aqui vale: o botão nem aparece.
   Como o resto deste arquivo, só usa variáveis --ds-*.
   ================================================================== */
/* Os três nascem escondidos e só a media query de celular os mostra.
   Precisa ser aqui fora: dentro da media query eles apareceriam em tela larga. */
#wcMenuCelularBtn{display:none}
#wcMenuCelularFechar{display:none}
#wcMenuCelularFundo{display:none}

@media(max-width:600px){
  #wcMenuCelularBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:var(--ds-control-h);
    height:var(--ds-control-h);
    padding:0;
    margin-right:var(--ds-3);
    background:var(--ds-surface);
    border:1px solid var(--ds-line);
    border-radius:var(--ds-r-sm);
    cursor:pointer;
    transition:background var(--ds-transition),border-color var(--ds-transition);
  }
  #wcMenuCelularBtn:hover{background:var(--ds-surface-3);border-color:var(--ds-line-strong)}
  #wcMenuCelularBtn:focus-visible{outline:none;box-shadow:var(--ds-focus)}

  /* os três traços, desenhados com a própria cor do texto do padrão */
  #wcMenuCelularBtn .wc-menu-tracos,
  #wcMenuCelularBtn .wc-menu-tracos::before,
  #wcMenuCelularBtn .wc-menu-tracos::after{
    display:block;
    width:18px;
    height:2px;
    border-radius:var(--ds-r-full);
    background:var(--ds-navy-800);
    transition:transform var(--ds-transition),opacity var(--ds-transition);
  }
  #wcMenuCelularBtn .wc-menu-tracos{position:relative}
  #wcMenuCelularBtn .wc-menu-tracos::before{content:"";position:absolute;top:-6px;left:0}
  #wcMenuCelularBtn .wc-menu-tracos::after{content:"";position:absolute;top:6px;left:0}

  /* aberto: os traços viram um "x" */
  body.wc-menu-celular-aberto #wcMenuCelularBtn .wc-menu-tracos{background:transparent}
  body.wc-menu-celular-aberto #wcMenuCelularBtn .wc-menu-tracos::before{transform:translateY(6px) rotate(45deg)}
  body.wc-menu-celular-aberto #wcMenuCelularBtn .wc-menu-tracos::after{transform:translateY(-6px) rotate(-45deg)}

  /* o cabeçalho real (montado pelo layout-v3.js) abre espaço para o botão */
  body.wc-layout-v3 #wcV3TopApproved{
    display:flex !important;
    align-items:center;
    gap:var(--ds-3);
    flex-wrap:wrap;
  }
  /* No celular não cabe tudo numa linha só. Em vez de cortar o nome ou esconder
     a linha de apoio, o cabeçalho usa duas linhas: botão e ações em cima,
     saudação inteira embaixo. Nada é removido. */
  body.wc-layout-v3 #wcV3TopApproved #wcMenuCelularBtn{order:1}
  body.wc-layout-v3 #wcV3TopApproved .wc-v3-user-area{order:2;flex:0 0 auto;margin-left:auto}
  body.wc-layout-v3 #wcV3TopApproved #wcV3SearchApproved{order:3}
  body.wc-layout-v3 #wcV3TopApproved .wc-v3-greeting{order:4;flex:1 1 100%;min-width:0}
  body.wc-layout-v3 .top #wcV3TopApproved #wcV3GreetingTitle,
  body.wc-layout-v3 .top #wcV3TopApproved .wc-v3-greeting h1{font-size:var(--ds-fs-xl) !important}
  /* o botão é filho do cabeçalho real, então precisa escapar da regra do
     layout-v3.css que esconde os filhos do ".top" que ele não conhece */
  body.wc-layout-v3 .top #wcMenuCelularBtn{display:inline-flex !important}

  /* o menu só aparece quando o botão abre */
  body.wc-menu-celular-aberto .side{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(var(--ds-modal-sm),78vw) !important;
    max-width:78vw !important;
    height:100% !important;
    overflow-y:auto !important;
    z-index:1000 !important;
    box-shadow:var(--ds-shadow-3) !important;
    padding:var(--ds-10) var(--ds-4) var(--ds-5) !important;
  }
  /* no painel aberto o item do menu vira uma linha larga, com o rótulo à mostra */
  body.wc-menu-celular-aberto .side .nav{display:block !important}
  body.wc-menu-celular-aberto .side .nav button{
    display:flex !important;
    align-items:center;
    gap:var(--ds-3);
    width:100% !important;
    height:var(--ds-row-h) !important;
    padding:0 var(--ds-3) !important;
    margin:var(--ds-1) 0 !important;
    font-size:var(--ds-fs-md) !important;
    text-align:left !important;
    justify-content:flex-start !important;
  }
  body.wc-menu-celular-aberto .side .nav button .wc-v3-menu-label{
    display:inline !important;
    opacity:1 !important;
    font-size:var(--ds-fs-md) !important;
  }
  body.wc-menu-celular-aberto .side > div:last-child{
    position:static !important;
    margin-top:var(--ds-5);
  }

  /* O botão de fechar mora dentro do painel, então acompanha a camada dele. */
  body.wc-menu-celular-aberto #wcMenuCelularFechar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:var(--ds-3);
    right:var(--ds-3);
    width:var(--ds-control-h-sm);
    height:var(--ds-control-h-sm);
    padding:0;
    background:transparent;
    border:1px solid var(--ds-navy-700);
    border-radius:var(--ds-r-sm);
    cursor:pointer;
    z-index:2;
  }
  body.wc-menu-celular-aberto #wcMenuCelularFechar:focus-visible{outline:none;box-shadow:var(--ds-focus)}
  body.wc-menu-celular-aberto #wcMenuCelularFechar .wc-menu-x{position:relative;display:block;width:14px;height:14px}
  body.wc-menu-celular-aberto #wcMenuCelularFechar .wc-menu-x::before,
  body.wc-menu-celular-aberto #wcMenuCelularFechar .wc-menu-x::after{
    content:"";position:absolute;top:6px;left:0;width:14px;height:2px;
    border-radius:var(--ds-r-full);background:var(--ds-surface-3);
  }
  body.wc-menu-celular-aberto #wcMenuCelularFechar .wc-menu-x::before{transform:rotate(45deg)}
  body.wc-menu-celular-aberto #wcMenuCelularFechar .wc-menu-x::after{transform:rotate(-45deg)}

  /* fundo escurecido: tocar aqui fecha */
  body.wc-menu-celular-aberto #wcMenuCelularFundo{
    display:block;
    position:fixed;
    inset:0;
    z-index:999;
    background:var(--ds-navy-900);
    opacity:.5;
  }
  body.wc-menu-celular-aberto{overflow:hidden}
}