/*
  Ajustes de layout da WANDA para notebook e desktop.

  ARQUIVO DO PROJETO, E NAO DO TEMA. Fica fora de qompac/ de proposito: os
  arquivos do tema existem em duas versoes, a normal e a .min, e o Yii carrega a
  .min em producao e a normal em desenvolvimento (ver QompacCoreAsset::init).
  As duas JA ESTAO fora de sincronia - custom.css declara width: 250px em
  .col-contract e custom.min.css nao tem essa linha -, entao editar so uma
  produz correcao que funciona no dev e some em producao. Aqui ha um arquivo so,
  e ele carrega depois de todos os do tema.
*/

/* ------------------------------------------------------------------
   1. A BARRA LATERAL PARA DE COBRIR O CONTEUDO ENTRE 992 E 1199 px
   ------------------------------------------------------------------

   O tema tem DOIS limiares para a mesma barra, e eles nao batem:

     - em qompac-ui, abaixo de 1199.98px o conteudo perde a margem
       esquerda (margin-left: 0);
     - em responsive, so abaixo de 991px a barra sai da tela
       (transform: translateX(-100%)).

   Entre 992 e 1199 vale o primeiro e nao o segundo: o conteudo vai para
   x=0 enquanto a barra continua parada em cima dele, com 259px de
   largura. Medido: o primeiro cartao de toda tela comeca em x=24, ou
   seja, 235px dele ficam atras da barra - incluindo a primeira coluna
   das grades e o titulo da pagina.

   NAO E UMA FAIXA EXOTICA. O Windows entrega essas larguras em
   configuracoes comuns de notebook, porque a escala do sistema divide os
   pixels da tela:

     1366x768  a 125%  ->  1092px de CSS
     1440x900  a 125%  ->  1152px
     1920x1080 a 175%  ->  1097px

   A correcao alinha o limiar de cima com o de baixo: ate 992px a barra
   continua empurrando o conteudo, como faz acima de 1200. Abaixo de 992
   nada muda - la o tema ja tira a barra da tela e o comportamento de
   gaveta funciona.
*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar + .main-content {
        margin-left: var(--sidebar-width);
    }

    /* A barra recolhida tem largura propria, e ela tambem precisa empurrar. */
    .sidebar.sidebar-mini + .main-content {
        margin-left: 4.8rem;
    }

    /* A barra de topo grudada acompanha a mesma conta - sem isto ela
       nasce embaixo da lateral e o titulo fica escondido. */
    .sidebar + .main-content .iq-navbar.navs-sticky.menu-sticky {
        width: calc(100% - 16.2rem);
    }
    .sidebar.sidebar-mini + .main-content .iq-navbar.navs-sticky.menu-sticky {
        width: calc(100% - 4.8rem);
    }
}

/* ------------------------------------------------------------------
   2. AS GRADES LARGAS: CABER SEM PICAR PALAVRA
   ------------------------------------------------------------------

   Toda grade de muitas colunas usa .grade-larga junto com uma classe
   propria, que declara a largura minima e a porcentagem de cada coluna.

   TRES REGRAS, e a do meio e a que faltava:

   table-layout: fixed - a largura da coluna vem da porcentagem, e nao do
   conteudo. Sem isso a tabela cresce ate onde o texto pedir e as ultimas
   colunas saem da tela.

   min-width EM PIXEL, declarado por grade - o piso abaixo do qual as
   colunas nao encolhem. Sem ele, "fixed + width: 100%" nunca rola: a
   tabela e sempre do tamanho do container, e o texto que nao cabe
   TRANSBORDA POR CIMA da coluna vizinha. Foi o que aconteceu na tela de
   Rede: "Nome Do Escritorio", "Quant. Invest" e "Status" colados uns nos
   outros, conteudo cortado na direita, e nenhuma barra para ir ate la -
   porque, para o navegador, nada estava fora do lugar. Com o piso, a
   tabela fica maior que a area quando precisa e o .table-responsive
   passa a ter o que rolar.

   overflow-wrap: break-word, e NAO word-break - a diferenca decide se a
   tela e legivel. word-break parte no meio de qualquer palavra assim que
   ela nao couber na linha: "Consultor" virou uma letra por linha e
   "R$ 100.000,00" quebrou no meio do numero. overflow-wrap so parte
   quando a palavra sozinha nao cabe na coluna inteira - com o piso
   acima, quase nunca. A palavra volta a ser lida como palavra.

   Abaixo de 768 nada disso vale: em telefone a tabela volta a mandar na
   propria largura e rola de lado, que e o unico jeito de ler oito
   colunas numa tela dessas.
*/
.grade-larga {
    table-layout: fixed;
    width: 100%;
}

.grade-larga th,
.grade-larga td {
    white-space: normal;
    overflow-wrap: break-word;

    /* O TEMA GASTA ~44px DE RECHEIO POR CELULA, e numa coluna estreita sobra
       quase nada para o texto. Medido: a coluna de acoes ficava com 60px de
       largura e 12px uteis - "Acoes" precisa de 56 e virava "A/c/o/e/s". Aqui a
       conta muda de dono: o recheio encolhe e a largura declarada vira, quase
       toda, espaco de leitura. */
    padding-left: .5rem;
    padding-right: .5rem;
}

@media (max-width: 767.98px) {
    .grade-larga {
        table-layout: auto;
        min-width: 0 !important;
    }
    .grade-larga th,
    .grade-larga td {
        white-space: nowrap;
    }
}

/* A COLUNA DE ACOES GUARDA UM GRUPO DE BOTOES, e um <div class="d-flex"> nao
   encolhe: se os botoes nao couberem, ele TRANSBORDA a celula e some na borda
   da tabela. Foi o que cortou o terceiro botao da tela de Rede - o de entrar
   como o consultor, que so o administrador ve, e por isso so a tela dele
   cortava. Deixando o grupo quebrar, os botoes passam para a fileira de baixo
   dentro da propria celula em vez de sair pela direita. */
.grade-larga td .d-flex {
    flex-wrap: wrap;
}

/* Numero, data e taxa nao quebram NUNCA: "R$ 100.000,00" partido em duas
   linhas deixa de ser um valor e vira dois pedacos. A coluna que carrega
   um destes tem porcentagem folgada o bastante na propria grade. */
.grade-larga .nao-quebra {
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   3. A ROLAGEM DA GRADE FICA VISIVEL
   ------------------------------------------------------------------

   Quando a tabela encosta no piso e passa a rolar, a barra do Bootstrap e
   fina e some quando parada - quem olha nao percebe que ha coluna a
   direita, e a tela parece simplesmente ter menos colunas.
*/
.table-responsive {
    scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar {
    height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(54, 128, 147, .45);
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .05);
}

/* ------------------------------------------------------------------
   4. OS NUMEROS DOS CARTOES DE INDICADOR NAO QUEBRAM
   ------------------------------------------------------------------

   "R$ 62.626.288,75" nao cabia num cartao de um quarto de tela a 1280 e
   quebrava depois do milhar - "R$ 62.626.288" numa linha, ",75" na
   outra. Um valor partido assim se le errado antes de se ler certo.

   O tamanho da fonte acompanha a largura da janela em vez de ser fixo, e
   o valor fica proibido de quebrar. tabular-nums alinha os digitos entre
   cartoes vizinhos.
*/
.kpi-valor {
    white-space: nowrap;
    font-size: clamp(1rem, 1.45vw, 1.6rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* O painel do socio usa h2 nesses numeros - o valor ali e o assunto da tela,
   e nao um indicador entre outros. Mantem o porte maior, com o mesmo teto
   movel. */
h2.kpi-valor {
    font-size: clamp(1.15rem, 1.9vw, 2rem);
}