/*======================================================================================
  TEKHNO — layoutResponsivo.css
  Tela de login, menu lateral (#table_div), painel de submenus (#div_menuToggle)
  e cabeçalho em telas pequenas.

  Carregar no <head> do index.html, DEPOIS dos outros CSS (index.css, menu.css...),
  para a tela de login já abrir com este visual (sem piscar a versão antiga):
    <link rel="stylesheet" href="./Index/layoutResponsivo.css" />
  O comportamento (rótulos do menu, abrir/fechar o painel, Caps Lock, botão
  "Entrando...") continua no layoutResponsivo.js.
======================================================================================*/

/* ======================= TELA DE LOGIN ======================= */
/* Enquanto o Firebase confere se já existe sessão, a tela de login fica oculta
   (evita aparecer por um instante para quem já está logado). O
   auth_onAuthStateChanged.js põe body.tk-auth-pronto; o layoutResponsivo.js
   põe também, como reserva, depois de LAYOUT_LOGIN_ESPERA_MS. */
body:not(.tk-auth-pronto) #login_div {
    visibility: hidden;
}

#login_div.box-home {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(400px,calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;
    border: 1pt solid #e4e7eb;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(5,30,52,0.22);
    padding: 2.2em 2em 1.6em;
    text-align: center;
    font-family: Nunito,sans-serif;
}

#login_div > img {
    width: 88px !important;
    margin: 0 auto 0.4em !important;
}

#login_div h3 {
    margin: 0.2em 0 0;
}

#login_div > h3:not(#name_emp_dom_html) {
    color: #696969 !important;
    font-size: 1.2em !important;
    margin-top: 1.5em !important;
    font-family: Nunito,sans-serif;
}

#login_div #name_emp_dom_html {
    padding: 0.2em 0 1.6em !important;
}

#login_div .main-header-div {
    display: none !important;
}

#login_div form {
    margin: 0;
    text-align: left;
}

#login_div form > div {
    position: relative;
    margin-bottom: 1.05em;
}

#login_div #email_field,#login_div #password_field,#login_div #reset_email_field {
    display: block;
    width: 100%;
    height: 46px;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box;
    border: 1px solid #d5dae1 !important;
    border-radius: 10px !important;
    background: #fff;
    font-family: Nunito,sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1f2a37;
    box-shadow: none;
    outline: none;
    transition: border-color .15s,box-shadow .15s;
}

#login_div #password_field {
    padding-right: 44px !important;
}

#login_div #email_field:focus,#login_div #password_field:focus,#login_div #reset_email_field:focus {
    border-color: #1E90FF !important;
    box-shadow: 0 0 0 3px rgba(30,144,255,0.15) !important;
}

#login_div form div label {
    position: absolute;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%);
    padding: 0 4px;
    background: #fff;
    color: #8a94a3 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    pointer-events: none;
    transition: top .15s,font-size .15s,color .15s;
    line-height: 1;
}

#login_div form div input:focus ~ label,#login_div form div input:valid ~ label {
    top: 0 !important;
    font-size: 11px !important;
    color: #1E90FF !important;
    font-weight: 600 !important;
}

#login_div .toggle-password {
    right: 14px !important;
    color: #8a94a3;
    font-size: 1em;
    z-index: 1;
}

#login_div .toggle-password:hover {
    color: #1a3a5c;
}

#login_div .tk-caps {
    display: none;
    font-size: 0.78em;
    color: #c0392b;
    margin: -0.6em 0 0.8em 0.2em;
    text-align: left;
}

#login_div #btn_entrar,#login_div #btn_send_password {
    width: 100%;
    height: 46px;
    margin: 0.3em 0 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 10px;
    background: #1a3a5c !important;
    color: #fff;
    font-family: Nunito,sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(26,58,92,0.25);
    transition: background .15s,transform .05s;
}

#login_div #btn_entrar:hover,#login_div #btn_send_password:hover {
    background: #10283f !important;
    box-shadow: 0 6px 16px rgba(26,58,92,0.35);
}

#login_div #btn_entrar:active,#login_div #btn_send_password:active {
    transform: translateY(1px);
}

#login_div #btn_entrar.tk-carregando {
    opacity: 0.75;
    cursor: progress;
    pointer-events: none;
}

#login_div #btn_forget_password {
    margin-top: 0.9em;
    text-align: center;
}

#login_div #btn_forget_password button {
    width: auto !important;
    display: inline-block !important;
    background: transparent !important;
    border: none;
    padding: 0.3em 0.5em !important;
    color: #1E6FB8 !important;
    font-size: 0.9em !important;
    text-align: center !important;
    cursor: pointer;
}

#login_div #btn_forget_password button:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    #login_div.box-home {
        padding: 1.6em 1.2em 1.2em;
        border-radius: 12px;
    }
    #login_div > img {
        width: 72px !important;
    }
}

@media (max-height: 520px) {
    #login_div.box-home {
        top: 16px;
        transform: translateX(-50%);
    }
}

/* ======================= MENU LATERAL ======================= */
#table_div {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

#table_div::-webkit-scrollbar {
    display: none;
}

/* itens compactos: o menu não precisa ocupar a altura toda da tela */
#table_div .menuToggle {
    position: relative;
    cursor: pointer;
    padding: 0.62em 0.4em !important;
}

#table_div .menuToggle i {
    font-size: 0.95em !important;
}

#table_div #menuToggle {
    padding: 0.5em 0.4em 0.7em !important;
}

#table_div #menuToggle img {
    width: 42px !important;
}

#table_div .menuToggle .tooltipMenu {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* o rótulo de cada item é o flutuante (.tk-menu-rotulo), criado pelo layoutResponsivo.js */
#table_div .menuToggle .tooltiptext {
    display: none !important;
}

#table_div .menuToggle.tk-ativo {
    background: #1a3a5c !important;
    border-left: solid 3pt #1E90FF !important;
}

#table_div .menuToggle.tk-ativo i {
    color: #fff !important;
}

#table_div .menuToggle.tk-desabilitado {
    cursor: progress;
}

.tk-menu-rotulo {
    position: fixed;
    z-index: 20000;
    background: rgba(17,24,39,0.92);
    color: #fff;
    font-family: Nunito,sans-serif;
    font-size: 13px;
    padding: 0.4em 0.7em;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s;
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.tk-menu-rotulo.visivel {
    opacity: 1;
}

.tk-menu-rotulo::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-right-color: rgba(17,24,39,0.92);
}

@media (max-width: 600px) {
    #table_div {
        width: 54px !important;
    }
    #table_div .menuToggle {
        padding: 0.55em 0.3em !important;
    }
    #table_div #menuToggle img {
        width: 36px !important;
    }
}

/* ======================= PAINEL DE SUBMENUS ======================= */
/* --tk-topo e --tk-menu são calculados pelo layoutResponsivo.js */
#div_menuToggle {
    position: fixed !important;
    top: var(--tk-topo,0px) !important;
    bottom: 0 !important;
    left: var(--tk-menu,68px) !important;
    height: auto !important;
    width: clamp(260px,20vw,360px) !important;
    margin: 0 !important;
    z-index: 60 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f5f6f8 !important;
    border-right: 1pt solid #dfe3e8 !important;
    box-shadow: 8px 0 24px rgba(0,0,0,0.12) !important;
    border-radius: 0 !important;
    transform: translateX(-12px);
    opacity: 0;
    transition: transform .2s ease,opacity .2s ease;
    font-family: Nunito,sans-serif;
}

#div_menuToggle.tk-aberto {
    transform: translateX(0);
    opacity: 1;
}

#div_menuToggle #tb_div_menuToggle {
    width: 100% !important;
    min-width: 100%;
    border-collapse: collapse;
    background: transparent !important;
}

#div_menuToggle thead tr,#div_menuToggle .tk-sub-cab {
    background: #e8e8e8 !important;
    border: none !important;
    border-bottom: 1pt solid #d6d6d6 !important;
}

#div_menuToggle .tk-sub-cab td {
    color: #333 !important;
    padding: 0.85em 1em !important;
    font-size: 0.95em !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
}

#div_menuToggle .tk-sub-cab td i {
    color: #333 !important;
    cursor: pointer;
    opacity: 0.85;
    margin: 0 !important;
    font-size: 1.1em;
}

#div_menuToggle .tk-sub-cab td i:hover {
    opacity: 1;
}

#div_menuToggle .sub-main-table {
    background: transparent !important;
}

#div_menuToggle #tbody_financeiro_sub tr {
    background: #fff !important;
    border-bottom: 1pt solid #eceef1;
    cursor: pointer;
}

#div_menuToggle #tbody_financeiro_sub tr:hover {
    background: #eef4fb !important;
}

#div_menuToggle #tbody_financeiro_sub td {
    padding: 0.15em 0.4em !important;
}

#div_menuToggle #tbody_financeiro_sub .menuButton {
    width: 100%;
    text-align: left !important;
    padding: 0.6em 0.4em !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px;
    display: block;
    font-size: 0.92em !important;
    color: #333 !important;
    font-family: Nunito,sans-serif !important;
    cursor: pointer;
}

#div_menuToggle #tbody_financeiro_sub .menuButton i {
    width: 1.4em;
    text-align: center;
    color: #333 !important;
    margin-right: 0.35em;
}

#div_menuToggle #tbody_financeiro_sub i {
    color: #333;
}

#div_menuToggle #tbody_financeiro_sub .fa-star {
    font-size: 0.85em !important;
    padding: 0.4em;
}

@media (max-width: 600px) {
    #div_menuToggle {
        width: calc(100vw - var(--tk-menu,54px)) !important;
    }
}

/* ======================= CABEÇALHO EM TELAS PEQUENAS ======================= */
@media (max-width: 700px) {
    #header_div > table {
        padding-left: var(--tk-menu,54px);
        box-sizing: border-box;
    }
    #header_div #cargo_user {
        display: none;
    }
    #header_div #usuario {
        font-size: 1em !important;
    }
    #home_header_data {
        display: none;
    }
}