/* Lette - administracao: tema escuro.
   ---------------------------------------------------------------------------
   Por que existe este arquivo, e por que ele e' pequeno.

   O tema comprado ja vem com arquivos "-dark" (megna-dark.css e companhia),
   mas eles mudam so a barra lateral: sao 28 linhas de diferenca, todas dentro
   de .sidebar. O corpo da pagina continuava branco. Escurecer de verdade
   exigia outra coisa.

   A outra coisa NAO foi mexer no style.css do tema (16.754 linhas, 476
   declaracoes de fundo). Este arquivo apenas cobre, por cima, as superficies
   que as 40 telas realmente usam -- e elas usam pouca coisa repetida muitas
   vezes: white-box (55 vezes), table (34), form-control, os titulos e a
   lateral. Cobrir esse conjunto cobre o sistema inteiro.

   Tudo aqui esta dentro de html[data-tema="escuro"]. Sem esse atributo o
   arquivo nao pinta nada, entao a tela clara continua exatamente como era e
   o tema original nunca precisa ser editado -- ele e' de outro programa e
   pode ser atualizado sem levar junto as nossas alteracoes.

   Quem escreve o atributo e' o js/tema.js, que resolve "acompanhar o sistema"
   para um valor concreto. Assim as regras abaixo precisam existir uma vez so,
   em vez de aparecerem duplicadas tambem dentro de um @media.
   --------------------------------------------------------------------------- */

html[data-tema="escuro"] {
    color-scheme: dark;

    /* Mesma paleta da area do representante, para as duas parecerem da
       mesma empresa. */
    --a-ground:     #0E0E10;   /* fundo da pagina        */
    --a-surface:    #17171A;   /* cartoes, barras        */
    --a-surface-2:  #1E1E22;   /* cabecalho de tabela    */
    --a-surface-3:  #26262B;   /* hover, campos          */
    --a-line:       #26262B;
    --a-line-forte: #36363D;

    --a-ink:        #F2F2F4;   /* texto principal        */
    --a-ink-2:      #A9A9B3;
    --a-ink-3:      #85858F;   /* texto de apoio         */

    --a-acento:     #01c0c8;   /* o azul do tema, mantido como identidade */
    --a-sombra:     0 1px 3px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------------ base */

/* O fundo precisa estar tambem na raiz, e nao so no body: o tema pinta
   html de branco, e onde o conteudo transborda a largura do body -- como
   nas janelas de informacao, onde um .row solto tem margem negativa e fica
   mais largo que a pagina -- era esse branco que aparecia, numa faixa na
   lateral. */
html[data-tema="escuro"] { background: var(--a-ground); }

html[data-tema="escuro"] body,
html[data-tema="escuro"] #wrapper,
html[data-tema="escuro"] #page-wrapper,
html[data-tema="escuro"] .page-wrapper {
    background: var(--a-ground);
    color: var(--a-ink);
}

html[data-tema="escuro"] .preloader { background: var(--a-ground); }

/* Rodape: o tema o pinta de branco, e ele ficava como uma faixa clara no
   fim de toda pagina. */
html[data-tema="escuro"] .footer {
    background: var(--a-ground);
    color: var(--a-ink-3);
    border-top: 1px solid var(--a-line);
}

html[data-tema="escuro"] h1, html[data-tema="escuro"] h2,
html[data-tema="escuro"] h3, html[data-tema="escuro"] h4,
html[data-tema="escuro"] h5, html[data-tema="escuro"] h6,
html[data-tema="escuro"] b,  html[data-tema="escuro"] strong,
html[data-tema="escuro"] label {
    color: var(--a-ink);
}

html[data-tema="escuro"] .text-muted,
html[data-tema="escuro"] .text-dark,
html[data-tema="escuro"] small {
    color: var(--a-ink-3);
}

html[data-tema="escuro"] a { color: #7fd8dc; }
html[data-tema="escuro"] a:hover,
html[data-tema="escuro"] a:focus { color: #a6e6e9; }

html[data-tema="escuro"] hr { border-color: var(--a-line); }

/* ------------------------------------------------------- barra de cima */

html[data-tema="escuro"] .navbar-header,
html[data-tema="escuro"] .navbar-default,
html[data-tema="escuro"] .topbar {
    background: var(--a-surface);
    border-bottom: 1px solid var(--a-line);
}

html[data-tema="escuro"] .top-left-part,
html[data-tema="escuro"] .fix-sidebar .top-left-part {
    background: var(--a-surface);
}

html[data-tema="escuro"] .navbar-top-links > li > a,
html[data-tema="escuro"] .navbar-header .navbar-brand,
html[data-tema="escuro"] .logo i {
    color: var(--a-ink);
}

/* Titulo e trilha, que ficam dentro da barra (css/smCSS.css). */
html[data-tema="escuro"] .title-box { color: var(--a-ink); }
html[data-tema="escuro"] .title-sub {
    background-color: var(--a-surface-3);
}
html[data-tema="escuro"] .title-sub a { color: var(--a-ink-2); }

html[data-tema="escuro"] .bg-title {
    background: transparent;
    border-bottom: 1px solid var(--a-line);
}
html[data-tema="escuro"] .bg-title .breadcrumb { background: transparent; }
/* O tema pinta a trilha com rgba(0,0,0,.5): preto sobre preto, ilegivel. */
html[data-tema="escuro"] .bg-title .breadcrumb a { color: var(--a-ink-2); }
html[data-tema="escuro"] .bg-title .breadcrumb a:hover { color: var(--a-ink); }
html[data-tema="escuro"] .bg-title .breadcrumb .active { color: var(--a-acento); }
html[data-tema="escuro"] .page-title { color: var(--a-ink); }

/* ---------------------------------------------------------- lateral */

html[data-tema="escuro"] .sidebar {
    background: var(--a-surface);
    box-shadow: 1px 0 20px rgba(0, 0, 0, .35);
    border-right: 1px solid var(--a-line);
}

html[data-tema="escuro"] #side-menu li a {
    color: var(--a-ink-2);
    border-left: 0 solid var(--a-surface);
}
html[data-tema="escuro"] #side-menu > li > a:hover,
html[data-tema="escuro"] #side-menu > li > a:focus {
    background: rgba(255, 255, 255, .05);
    color: var(--a-ink);
}
html[data-tema="escuro"] #side-menu > li > a.active {
    border-left: 3px solid var(--a-acento);
    color: var(--a-ink);
    background: rgba(255, 255, 255, .04);
}
html[data-tema="escuro"] #side-menu ul > li > a.active { color: var(--a-ink); }
html[data-tema="escuro"] .content-wrapper .sidebar .nav-second-level li,
html[data-tema="escuro"] .sidebar .nav-second-level {
    background: var(--a-surface-2);
}
html[data-tema="escuro"] .sidebar .user-pro .nav-second-level a { color: var(--a-ink-2); }

/* ----------------------------------------------------------- cartoes */

html[data-tema="escuro"] .white-box,
html[data-tema="escuro"] .panel,
html[data-tema="escuro"] .panel-body,
html[data-tema="escuro"] .card,
html[data-tema="escuro"] .well {
    background: var(--a-surface);
    border-color: var(--a-line);
    color: var(--a-ink);
    box-shadow: var(--a-sombra);
}

html[data-tema="escuro"] .panel-heading,
html[data-tema="escuro"] .panel-footer {
    background: var(--a-surface-2);
    border-color: var(--a-line);
    color: var(--a-ink);
}

html[data-tema="escuro"] .box-title {
    color: var(--a-ink);
    border-bottom-color: var(--a-line);
}

/* Ficha de cadastro (css/smCSS.css). */
html[data-tema="escuro"] .ficha {
    background: var(--a-surface);       /* igual ao campo, para a sobra sumir */
    border-color: var(--a-line);
}
html[data-tema="escuro"] .ficha-item {
    background: var(--a-surface);
    box-shadow: 0 0 0 1px var(--a-line);
}
html[data-tema="escuro"] .ficha dt       { color: var(--a-ink-3); }
html[data-tema="escuro"] .ficha dd       { color: var(--a-ink); }
html[data-tema="escuro"] .ficha dd.vazio    { color: #5A5A63; }
html[data-tema="escuro"] .ficha dd.negativo { color: #F58F84; }

html[data-tema="escuro"] .lista-vazia      { color: var(--a-ink-3); }
html[data-tema="escuro"] .filtro-st label { color: var(--a-ink-3); }
html[data-tema="escuro"] .filtro-st select {
    background: var(--a-surface-3);
    border-color: var(--a-line-forte);
    color: var(--a-ink);
}

html[data-tema="escuro"] .selo-inativo {
    background: #2E1815;
    border-color: #5C2A24;
    color: #F58F84;
}
html[data-tema="escuro"] .ficha dd small { color: var(--a-ink-3); }

html[data-tema="escuro"] .ficha-nota {
    background: var(--a-surface-2);
    border-color: var(--a-line);
}
html[data-tema="escuro"] .ficha-nota-rotulo { color: var(--a-ink-3); }
html[data-tema="escuro"] .ficha-nota p      { color: var(--a-ink); }

html[data-tema="escuro"] .ficha-destaque {
    background: var(--a-surface-2);
    border-color: var(--a-line);
}
html[data-tema="escuro"] .ficha-destaque-rotulo,
html[data-tema="escuro"] .ficha-destaque-valor small { color: var(--a-ink-3); }
html[data-tema="escuro"] .ficha-destaque-valor       { color: var(--a-ink); }

/* Botao "Retorna" no pe das telas de detalhe (css/smCSS.css). O fundo dele
   e' um azul bem claro escrito na mao, que no escuro virava uma pastilha
   acesa no fim da pagina. */
html[data-tema="escuro"] .container_buttons {
    background: var(--a-surface-3);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------- tabelas */

html[data-tema="escuro"] .table,
html[data-tema="escuro"] .table > thead > tr > th,
html[data-tema="escuro"] .table > tbody > tr > td,
html[data-tema="escuro"] .table > tbody > tr > th,
html[data-tema="escuro"] .table > tfoot > tr > td {
    color: var(--a-ink);
    border-color: var(--a-line);
}

html[data-tema="escuro"] .table > thead > tr > th {
    background: var(--a-surface-2);
    border-bottom-color: var(--a-line-forte);
    color: var(--a-ink-2);
}

/* A faixa alternada precisa ser bem discreta: no escuro, o mesmo contraste
   que funciona no claro vira listra piscando.

   O !important aqui nao e' preguica de calcular especificidade: o tema
   declara a faixa como "background-color: #f7fafc !important", e sem
   responder no mesmo nivel a linha impar continuava branca -- uma tarja
   clara atravessando a tabela escura, com o texto claro sumindo dentro
   dela. E' o unico ponto do tema que obriga a isso. */
html[data-tema="escuro"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-tema="escuro"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #1C1C20 !important;
}
html[data-tema="escuro"] .table-hover > tbody > tr:hover,
html[data-tema="escuro"] .table-hover > tbody > tr:hover > td {
    background-color: #26262B !important;
}
html[data-tema="escuro"] .table-bordered,
html[data-tema="escuro"] .table-bordered > thead > tr > th,
html[data-tema="escuro"] .table-bordered > tbody > tr > td {
    border-color: var(--a-line);
}

/* ---------------------------------------------------------- DataTables

   As listas passam pelo DataTables, e ele nao usa a faixa do Bootstrap: pinta
   as linhas por conta propria, com as classes .odd e .even que ele mesmo
   coloca. E pinta TODAS as linhas de branco, nao so as alternadas.

   Por isso a regra de .table-striped feita mais acima nao bastava: ela pega
   as linhas impares pela posicao e deixava as pares com o branco do
   DataTables. O resultado era uma lista listrada de preto e branco.

   Alem das linhas, o DataTables pinta as celulas da coluna que esta ordenada
   (.sorting_1 a .sorting_3), em uma dezena de tons claros diferentes.
   Repetir essa dezena no escuro seria trabalho inutil: aqui elas ficam
   transparentes com um veu claro por cima, que funciona sobre linha par ou
   impar sem precisar saber qual e' qual. */

html[data-tema="escuro"] table.dataTable tbody tr,
html[data-tema="escuro"] table.dataTable tbody tr.even {
    background-color: var(--a-surface);
}
html[data-tema="escuro"] table.dataTable.stripe tbody tr.odd,
html[data-tema="escuro"] table.dataTable.display tbody tr.odd,
html[data-tema="escuro"] table.dataTable tbody tr.odd {
    background-color: #1C1C20;
}
html[data-tema="escuro"] table.dataTable.hover tbody tr:hover,
html[data-tema="escuro"] table.dataTable.display tbody tr:hover,
html[data-tema="escuro"] table.dataTable tbody tr:hover {
    background-color: #26262B;
}
html[data-tema="escuro"] table.dataTable tbody tr.selected {
    background-color: #24344A;
}

/* Coluna ordenada: sem cor propria, de proposito.

   O DataTables costuma clarear as celulas da coluna que esta ordenada, mas
   as regras dele para isso exigem as classes .display, .stripe ou
   .order-column, e nenhuma tabela daqui as usa -- entao nao ha nada claro
   para cobrir.

   Uma tentativa anterior de por um veu claro nessas celulas saiu pior:
   nas linhas impares a regra de faixa mais acima pinta o proprio <td> com
   !important, entao o veu era ignorado; nas pares nao havia nada, e o veu
   aparecia. O realce acabava surgindo so de duas em duas linhas, o que
   parecia defeito de desenho.

   A coluna ordenada ja se identifica pela seta no cabecalho. Aqui ela
   simplesmente acompanha a cor da linha. */
html[data-tema="escuro"] table.dataTable tbody tr > .sorting_1,
html[data-tema="escuro"] table.dataTable tbody tr > .sorting_2,
html[data-tema="escuro"] table.dataTable tbody tr > .sorting_3 {
    background-color: transparent;
}

/* A tarja que passa por cima da lista enquanto ela carrega e' um degrade
   branco -- no escuro ela piscava como um claro atravessando a tela. */
html[data-tema="escuro"] .dataTables_wrapper .dataTables_processing {
    background: var(--a-surface-2);
    color: var(--a-ink);
    border-color: var(--a-line-forte);
}

/* DataTables: a barra de busca, o "Mostrando x de y" e a paginacao. */
html[data-tema="escuro"] .dataTables_wrapper,
html[data-tema="escuro"] .dataTables_info,
html[data-tema="escuro"] .dataTables_length,
html[data-tema="escuro"] .dataTables_filter {
    color: var(--a-ink-2);
}
html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--a-ink-2) !important;
    background: var(--a-surface-2);
    border-color: var(--a-line);
}
html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--a-ink) !important;
    background: var(--a-surface-3);
    border-color: var(--a-line-forte);
}
html[data-tema="escuro"] table.dataTable thead .sorting,
html[data-tema="escuro"] table.dataTable thead .sorting_asc,
html[data-tema="escuro"] table.dataTable thead .sorting_desc {
    background-color: var(--a-surface-2);
}

/* --------------------------------------------------------- formularios */

html[data-tema="escuro"] .form-control,
html[data-tema="escuro"] input[type="text"],
html[data-tema="escuro"] input[type="number"],
html[data-tema="escuro"] input[type="date"],
html[data-tema="escuro"] input[type="email"],
html[data-tema="escuro"] input[type="password"],
html[data-tema="escuro"] select,
html[data-tema="escuro"] textarea {
    background: var(--a-surface-3);
    border-color: var(--a-line-forte);
    color: var(--a-ink);
}
html[data-tema="escuro"] .form-control:focus,
html[data-tema="escuro"] select:focus,
html[data-tema="escuro"] textarea:focus {
    background: var(--a-surface-3);
    border-color: var(--a-acento);
    color: var(--a-ink);
}
html[data-tema="escuro"] .form-control::placeholder { color: var(--a-ink-3); }
html[data-tema="escuro"] .form-control[disabled],
html[data-tema="escuro"] .form-control[readonly] {
    background: var(--a-surface-2);
    color: var(--a-ink-3);
}
html[data-tema="escuro"] .input-group-addon {
    background: var(--a-surface-2);
    border-color: var(--a-line-forte);
    color: var(--a-ink-2);
}

/* O calendario nativo do Chrome fica ilegivel sobre campo escuro sem isto. */
html[data-tema="escuro"] input::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.7);
}

/* -------------------------------------------------- janelas e menus */

html[data-tema="escuro"] .modal-content,
html[data-tema="escuro"] .dropdown-menu,
html[data-tema="escuro"] .popover {
    background: var(--a-surface);
    border-color: var(--a-line-forte);
    color: var(--a-ink);
}
html[data-tema="escuro"] .modal-header,
html[data-tema="escuro"] .modal-footer { border-color: var(--a-line); }
html[data-tema="escuro"] .dropdown-menu > li > a { color: var(--a-ink-2); }
html[data-tema="escuro"] .dropdown-menu > li > a:hover {
    background: var(--a-surface-3);
    color: var(--a-ink);
}
html[data-tema="escuro"] .modal-backdrop.in { opacity: .7; }

/* ------------------------------------------------------------ botoes */

html[data-tema="escuro"] .btn-default {
    background: var(--a-surface-3);
    border-color: var(--a-line-forte);
    color: var(--a-ink);
}
html[data-tema="escuro"] .btn-default:hover,
html[data-tema="escuro"] .btn-default:focus {
    background: var(--a-line-forte);
    color: var(--a-ink);
}

/* ------------------------------------------------- botao de tema */

/* Fica na barra de cima, discreto: e' um ajuste de conforto, nao uma acao
   do sistema. Escrito aqui fora do bloco escuro porque ele precisa
   aparecer nos dois temas. */
.tema-botao {
    background: none;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    padding: 0;
    opacity: .85;
    border-radius: 4px;
}
.tema-botao:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.tema-botao svg { height: 19px; width: 19px; }

/* Mostra so o icone do estado atual. */
.tema-botao .i-sistema,
.tema-botao .i-claro,
.tema-botao .i-escuro { display: none; }
.tema-botao[data-estado="sistema"] .i-sistema,
.tema-botao[data-estado="claro"]   .i-claro,
.tema-botao[data-estado="escuro"]  .i-escuro { display: block; }

html[data-tema="escuro"] .tema-botao { color: var(--a-ink); }