/*
 * WC-DS APLICADO AO TMS
 * ------------------------------------------------------------------
 * ETAPA A (16/09/2026) - O QUE SAIU DAQUI E POR QUE
 *
 * Este arquivo nasceu como PONTE DE TRANSICAO: ele aplicava o padrao
 * visual por cima das camadas antigas, e por isso precisava de
 * !important - era a unica forma de vencer regras que tambem usavam
 * !important. O proprio arquivo dizia qual era o caminho definitivo:
 * "remover as regras antigas de cada tela".
 *
 * Nesta etapa isso foi feito para o MENU LATERAL, o CABECALHO e o
 * PAINEL. As secoes que cuidavam dessas tres telas SAIRAM daqui:
 *   - "2. MENU LATERAL"  -> agora em layout-v3.css, sem !important
 *   - "3. CABECALHO"     -> agora em layout-v3.css, sem !important
 *   - "4. DASHBOARD"     -> agora em dashboard-v3.css, sem !important
 *
 * Elas nao podiam ficar: carregavam o menu azul-marinho e as medidas
 * antigas do painel com !important e venceriam o desenho aprovado,
 * porque este arquivo e carregado depois do layout-v3.css.
 *
 * O QUE CONTINUA AQUI
 *   1. TELA DE LOGIN - ainda NAO migrada, segue como estava.
 *   2. MENU NO CELULAR - o botao e o painel deslizante. Foi reescrito
 *      nas variaveis --wc-* do modelo aprovado, para acompanhar o
 *      claro e o escuro, e a largura de corte passou a ser a mesma do
 *      esqueleto novo (800px), fechando a faixa entre 601 e 800px em
 *      que o menu desaparecia sem botao para abrir.
 *
 * NADA de comportamento muda aqui: nenhuma rota, permissao, regra,
 * calculo, texto ou acao de botao. So aparencia.
 */

/* ==================================================================
   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 NO CELULAR E NO TABLET
   Ate 800px o menu lateral fica escondido (layout-v3.css). Este e o
   botao que o abre, o painel deslizante e o fundo escurecido.

   A largura de corte e a MESMA do esqueleto novo: 800px. Antes o
   esqueleto escondia o menu em 800px mas o botao so aparecia em
   600px, entao entre 601 e 800px nao havia como trocar de tela.

   Os alvos (#wcMenuCelularBtn, #wcMenuCelularFechar,
   #wcMenuCelularFundo e a classe wc-menu-celular-aberto) sao os que
   o wc-menu-celular.js monta; nenhum deles mudou de nome.
   ================================================================== */

/* Os tres nascem escondidos; so a media query 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:800px){

  /* BOTAO DE ABRIR, no cabecalho */
  body.wc-layout-v3 .top #wcMenuCelularBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:40px;
    height:40px;
    padding:0;
    background:var(--wca-card);
    border:1px solid var(--wca-line);
    border-radius:10px;
    cursor:pointer;
  }

  body.wc-layout-v3 #wcMenuCelularBtn:hover{
    background:var(--wca-soft);
  }

  /* os tres tracos, na cor do texto do padrao */
  #wcMenuCelularBtn .wc-menu-tracos,
  #wcMenuCelularBtn .wc-menu-tracos::before,
  #wcMenuCelularBtn .wc-menu-tracos::after{
    display:block;
    width:18px;
    height:2px;
    border-radius:99px;
    background:var(--wca-ink);
    transition:transform .15s ease,opacity .15s ease;
  }

  #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 tracos 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)}

  /* PAINEL DESLIZANTE */
  body.wc-menu-celular-aberto.wc-layout-v3 .side{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(280px,82vw);
    max-width:82vw;
    height:100%;
    padding:52px 14px 18px;
    overflow-y:auto;
    z-index:1000;
    box-shadow:0 0 40px rgba(15,27,51,.2);
  }

  body.wc-menu-celular-aberto.wc-layout-v3.wc-env-homologation .side{
    top:var(--wc-environment-banner-height);
    height:calc(100% - var(--wc-environment-banner-height));
  }

  /* BOTAO DE FECHAR, dentro do painel.
     Ele mora no painel de proposito: o cabecalho e "sticky" e forma seu
     proprio contexto de empilhamento, entao um X preso a ele ficaria
     atras do fundo escurecido. */
  body.wc-menu-celular-aberto #wcMenuCelularFechar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    padding:0;
    background:var(--wca-card);
    border:1px solid var(--wca-line);
    border-radius:9px;
    cursor:pointer;
    z-index:2;
  }

  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:99px;
    background:var(--wca-ink);
  }

  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:#0A1222;
    opacity:.5;
  }

  body.wc-menu-celular-aberto{overflow:hidden}

  /* No painel aberto o rotulo aparece inteiro, em duas linhas se
     precisar. Nada e escondido nem cortado.
     O item do menu e desenhado em bloco (ver layout-v3.css), com o
     icone em linha; aqui ele so ganha permissao para quebrar linha. */
  body.wc-menu-celular-aberto.wc-layout-v3 .side .nav button{
    height:auto;
    min-height:44px;
    padding-top:12px;
    padding-bottom:12px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:20px;
  }

  body.wc-menu-celular-aberto.wc-layout-v3 .side .nav button .wc-v3-menu-svg-real{
    vertical-align:middle;
  }

  body.wc-menu-celular-aberto.wc-layout-v3 .side .nav button .wc-v3-menu-label{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  /* LOGIN, na largura pequena */
  #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)}
}

@media(prefers-reduced-motion:reduce){
  #wcMenuCelularBtn .wc-menu-tracos,
  #wcMenuCelularBtn .wc-menu-tracos::before,
  #wcMenuCelularBtn .wc-menu-tracos::after{transition:none}
}