/* ============================================================
   Identidade visual — KIOSKY (Gerenciamento de Tablets)
   ------------------------------------------------------------
   O painel da roleta roda o MESMO codigo, com o mesmo tema cinza
   padrao do Bootstrap (#f8f8f8): abrindo os dois lado a lado nao
   dava para saber em qual sistema se estava. Este arquivo pinta
   SOMENTE o kiosky.

   Para diferenciar a roleta depois, copie trocando a cor da marca
   (#0e6b7d) e o texto do selo em navbar.php.

   Carregado por ULTIMO no home.php, para vencer o bootstrap2.css.
   Hex puro (sem var()) porque o painel tambem e' aberto em
   navegador antigo.
   ============================================================ */

/* ============================================================
   1. BARRA SUPERIOR
   Escopo em .navbar-static-top de proposito: o menu lateral
   tambem usa .navbar-default e NAO pode ser pintado junto.
   ============================================================ */
.navbar-default.navbar-static-top {
    background-color: #0e6b7d;
    border-color: #0a5260;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.navbar-default.navbar-static-top .navbar-brand,
.navbar-default.navbar-static-top .navbar-top-links > li > a {
    color: #ffffff;
}

.navbar-default.navbar-static-top .navbar-brand:hover,
.navbar-default.navbar-static-top .navbar-brand:focus,
.navbar-default.navbar-static-top .navbar-top-links > li > a:hover,
.navbar-default.navbar-static-top .navbar-top-links > li > a:focus,
.navbar-default.navbar-static-top .navbar-top-links > li.open > a {
    color: #ffffff;
    background-color: #0a5260;
}

.navbar-default.navbar-static-top .navbar-toggle {
    border-color: rgba(255, 255, 255, 0.5);
}
.navbar-default.navbar-static-top .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-default.navbar-static-top .navbar-toggle:hover,
.navbar-default.navbar-static-top .navbar-toggle:focus {
    background-color: #0a5260;
}

/* Selo do sistema — elemento proprio em navbar.php, irmao do
   .navbar-brand. Nao usar ::after no brand: ele tem altura fixa
   de 50px e o selo vazava para fora da barra. */
.marca-selo {
    float: left;
    margin: 17px 0 0 6px;
    padding: 3px 10px;
    border-radius: 3px;
    background: #ffffff;
    color: #0e6b7d;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.5px;
}

/* ============================================================
   2. MENU LATERAL
   ============================================================ */
.navbar-default.sidebar {
    background-color: #1d2b32;
    border-color: #16232a;
}
.sidebar ul.nav > li > a {
    color: #c3d2d8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar ul.nav > li > a i.fa {
    color: #6fa8b5;
    width: 20px;
}
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
    background-color: #16232a;
    color: #ffffff;
}
.sidebar ul.nav > li > a:hover i.fa {
    color: #ffffff;
}
.sidebar ul li a.active,
.sidebar ul li.active > a {
    background-color: #0e6b7d;
    border-left: 4px solid #7fd3e3;
    color: #ffffff;
}
/* Submenu (Transacoes) um tom abaixo, para diferenciar nivel */
.sidebar .nav-second-level li a {
    background-color: #16232a;
    color: #a9bcc4;
    padding-left: 37px;
}
.sidebar .nav-second-level li a:hover {
    background-color: #0e6b7d;
    color: #ffffff;
}

/* ============================================================
   3. BOTOES DA TELA INICIAL
   Grid de verdade: os cards eram col-lg-3 soltos e, como os
   titulos quebram em 2 linhas, as alturas variavam e o float do
   Bootstrap travava, deixando buracos e cards desalinhados.
   O grid resolve por construcao — todos com a mesma altura,
   independente do tamanho do texto e de quantos o nivel exibe.
   ============================================================ */
.painel-inicial {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 18px;
    float: none;
}
.painel-inicial .kcard {
    width: auto;
    float: none;
    padding: 0;
}
.painel-inicial .kcard > a {
    display: block;
    height: 100%;
    text-decoration: none;
}
.painel-inicial .kcard .panel {
    height: 100%;
    margin: 0;
    border: 0;
    border-top: 4px solid #999;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: box-shadow .15s ease, transform .15s ease;
}
.painel-inicial .kcard > a:hover .panel {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.painel-inicial .kcard .panel-heading {
    background: transparent;
    border: 0;
    padding: 18px 14px;
}
/* Alinha icone e titulo na mesma linha, centralizados verticalmente.
   O <br> solto do HTML antigo fica sem efeito dentro do flex. */
.painel-inicial .kcard .panel-heading > .row {
    display: flex;
    align-items: center;
    margin: 0;
}
.painel-inicial .kcard .panel-heading > .row > div {
    float: none;
    padding: 0;
    width: auto;
}
.painel-inicial .kcard .panel-heading .fa-5x {
    font-size: 3.2em;
    margin-right: 14px;
}
.painel-inicial .kcard h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}
.painel-inicial .kcard .text-center {
    text-align: left;
    flex: 1;
}
.painel-inicial .kcard br {
    display: none;
}

/* --- Uma cor por botao ---------------------------------------
   O .blue original vinha de fora e pintava todos de azul; as
   regras abaixo vencem por especificidade (.painel-inicial ...). */
.painel-inicial .kcard-painel       .panel { border-top-color: #37474f; }
.painel-inicial .kcard-painel       .fa,
.painel-inicial .kcard-painel       h4     { color: #37474f; }

.painel-inicial .kcard-admin        .panel { border-top-color: #3f51b5; }
.painel-inicial .kcard-admin        .fa,
.painel-inicial .kcard-admin        h4     { color: #3f51b5; }

.painel-inicial .kcard-jogos        .panel { border-top-color: #7b3fa0; }
.painel-inicial .kcard-jogos        .fa,
.painel-inicial .kcard-jogos        h4     { color: #7b3fa0; }

.painel-inicial .kcard-regioes      .panel { border-top-color: #2e7d32; }
.painel-inicial .kcard-regioes      .fa,
.painel-inicial .kcard-regioes      h4     { color: #2e7d32; }

.painel-inicial .kcard-operadores   .panel { border-top-color: #ef6c00; }
.painel-inicial .kcard-operadores   .fa,
.painel-inicial .kcard-operadores   h4     { color: #ef6c00; }

.painel-inicial .kcard-funcionarios .panel { border-top-color: #0277bd; }
.painel-inicial .kcard-funcionarios .fa,
.painel-inicial .kcard-funcionarios h4     { color: #0277bd; }

.painel-inicial .kcard-pontos       .panel { border-top-color: #c62828; }
.painel-inicial .kcard-pontos       .fa,
.painel-inicial .kcard-pontos       h4     { color: #c62828; }

/* Tablets fica com a cor da marca: e' a tela mais usada */
.painel-inicial .kcard-tablets      .panel { border-top-color: #0e6b7d; }
.painel-inicial .kcard-tablets      .fa,
.painel-inicial .kcard-tablets      h4     { color: #0e6b7d; }

/* ============================================================
   4. AREA DE CONTEUDO
   ============================================================ */
#page-wrapper {
    border-top: 3px solid #0e6b7d;
    background-color: #f2f5f6;
}

/* Em telas estreitas o grid ja cai para 1 coluna sozinho
   (auto-fill + minmax); so folgamos a margem lateral. */
@media (max-width: 768px) {
    .painel-inicial { gap: 12px; }
    .marca-selo { display: none; }
}

/* ============================================================
   5. TELA DE LOGIN (index.php)
   Era o painel padrao do SB Admin 2, sem marca nenhuma — igual
   ao da roleta. Usa as mesmas cores do painel.
   ============================================================ */
body.login-kiosky {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #0e6b7d;
    /* fallback acima; o gradiente e' so enfeite e pode ser ignorado
       por navegador antigo sem prejuizo nenhum */
    background: linear-gradient(160deg, #12808f 0%, #0e6b7d 45%, #08404c 100%);
}

.login-caixa {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.login-marca {
    padding: 26px 24px 20px;
    text-align: center;
    border-top: 5px solid #0a5260;
    background: #f7fafb;
}
.login-marca img { display: block; margin: 0 auto 10px; }
.login-nome {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #0e6b7d;
}
.login-sub {
    margin-top: 3px;
    font-size: 12px;
    color: #6b8189;
}

.login-corpo { padding: 22px 24px 24px; }

/* Icone dentro do campo: padding a esquerda no input abre o espaco */
.login-campo { position: relative; margin-bottom: 14px; }
.login-campo i.fa {
    position: absolute;
    left: 13px;
    top: 50%;
    margin-top: -7px;
    color: #9bb2ba;
    font-size: 14px;
}
.login-campo .form-control {
    height: 44px;
    padding-left: 38px;
    border: 1px solid #d5e0e4;
    border-radius: 5px;
    box-shadow: none;
    font-size: 14px;
}
.login-campo .form-control:focus {
    border-color: #0e6b7d;
    box-shadow: 0 0 0 3px rgba(14, 107, 125, 0.15);
}

.login-botao {
    width: 100%;
    height: 44px;
    margin-top: 4px;
    border: 0;
    border-radius: 5px;
    background: #0e6b7d;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    transition: background .15s ease;
}
.login-botao:hover,
.login-botao:focus { background: #0a5260; color: #ffffff; }

.login-erro {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 5px;
    border-left: 4px solid #c62828;
    background: #fdecea;
    color: #8e2020;
    font-size: 13px;
}

.login-rodape {
    padding: 12px 24px 16px;
    text-align: center;
    font-size: 11px;
    color: #94a9b0;
    border-top: 1px solid #eef2f4;
}