/* =========================================================================
   1. REESTRUTURAÇÃO DO GRID GLOBAL RESPONSIVO (Fim do espaço em branco)
   ========================================================================= */
body { 
    background-color: #f4f6f9; 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
    margin: 0; 
    font-family: system-ui, sans-serif; 
}

#app-root {
    width: 100vw;
    height: 100vh;
}

#app-root > .d-flex {
    display: grid !important;
    grid-template-columns: 260px 1fr; /* 260px fixo para a sidebar e 1fr para o conteúdo */
    width: 100vw;
    height: 100vh;
}

.sidebar { 
    grid-column: 1;
    width: 260px !important; 
    background-color: #1a1d20; 
    color: white; 
    display: flex; 
    flex-direction: column; 
    height: 100vh;
    position: relative !important; 
    z-index: 1000; 
    overflow-y: auto;
}

.sidebar .nav-link { 
    color: #c2c7d0; 
    cursor: pointer; 
}

.sidebar .nav-link:hover, .sidebar .nav-link.active { 
    background-color: rgba(255,255,255,0.1); 
    color: white; 
    border-radius: 4px; 
}

.main-content {
    grid-column: 2;
    margin-left: 0 !important; 
    padding: 30px !important;
    height: 100vh;
    background-color: #1a1a1f; 
    overflow: hidden; /* 🔥 IMPEDE A PÁGINA INTEIRA DE CRIAR ROLAGEM GLOBAL */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100% !important; 
}

#router-view {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; 
    box-sizing: border-box;
    display: flex;        /* Adicionado para propagar o comportamento flex */
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.card { 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    border: none; 
    width: 100%; 
}

.device-link { 
    color: #0d6efd; 
    text-decoration: none; 
    cursor: pointer; 
    font-weight: bold; 
}

.device-link:hover { 
    text-decoration: underline; 
}

.hidden-section { 
    display: none !important; 
}

#perfil-listagem-section {
    width: 100% !important;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto; /* Listagem pura pode rolar normal */
}

/* Faz a seção de configuração do Perfil se comportar como uma viewport fixa */
#perfil-config-section {
    width: 100% !important;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* =========================================================================
   2. TELA DE LOGIN - IDENTIDADE VISUAL VERDE TOK&STOK
   ========================================================================= */
.login-page-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, #1e3d2f 0%, #0d1e16 100%); 
    z-index: 9999;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border: 1px solid rgba(40, 167, 69, 0.15);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.logo-icon {
    font-size: 2.5rem;
    display: inline-block;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1));
}

.brand-name {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #1e3d2f; 
    margin: 0;
}

.brand-accent {
    color: #28a745; 
    font-style: italic;
}

.brand-sub {
    font-size: 0.82rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-top: 4px;
}

.btn-tokstok-green {
    background-color: #1e3d2f !important;
    border-color: #1e3d2f !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out;
}

.btn-tokstok-green:hover {
    background-color: #28a745 !important; 
    border-color: #28a745 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3) !important;
}

.btn-tokstok-green:active {
    transform: translateY(1px);
}

.login-card .form-control:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}

/* =========================================================================
   3. NOVO LAYOUT DE POLÍTICAS: ABA HORIZONTAL (TELA CHEIA AUTOMÁTICA)
   ========================================================================= */
.policy-nav-horizontal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #121214;
    padding: 14px 20px;
    border-radius: 6px;
    border: 1px solid #29292e;
    gap: 10px;
    width: 100%; 
    box-sizing: border-box;
    flex-shrink: 0; /* Impede o menu de amassar */
}

.policy-nav-horizontal .nav-divider {
    color: #44474e;
    font-weight: 300;
    user-select: none;
}

.policy-nav-horizontal .tab-link {
    background: none;
    border: none;
    color: #8d8d99;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.2s ease;
}

.policy-nav-horizontal .tab-link:hover {
    color: #ffffff;
}

.policy-nav-horizontal .tab-link.active {
    color: #ffffff !important;
    background-color: #1a3d2f; 
    border-radius: 4px;
}

/* Limita e adjusts o box central das abas */
.policy-forms-view {
    background: #121214;
    border: 1px solid #29292e;
    width: 100%; 
    box-sizing: border-box;
    padding: 24px;
    flex-grow: 1;       /* Consome o espaço disponível perfeitamente */
    overflow: hidden;   /* Entrega o controle de scroll para as sub-abas */
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.policy-tab-content {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;   /* 🔥 O SCROLL ACONTECE AQUI DENTRO AGORA! */
    padding-right: 5px; /* Evita que a barra de rolagem cubra o conteúdo */
}

.policy-tab-content.active {
    display: block;
}

/* STICKY HEADER PARA AS TABELAS INTERNAS (REPOSITÓRIO E PLAYSTORE) */
.table-responsive {
    max-height: 100%;
    overflow-y: auto !important;
}

.table-responsive thead th {
    position: sticky !important;
    top: 0;
    background-color: #f8f9fa !important;
    z-index: 10;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}

.sidebar-input {
    width: 100%;
    background: #1a1a1f;
    border: 1px solid #29292e;
    border-radius: 4px;
    padding: 12px; 
    color: #fff;
    box-sizing: border-box;
}

.sidebar-input:focus {
    border-color: #00b37e;
    outline: none;
}

/* Sincronização dos dropdowns com o tema escuro */
select.sidebar-input {
    background-color: #1a1a1f !important;
    color: #fff !important;
    border: 1px solid #29292e !important;
}
select.sidebar-input option {
    background-color: #121214;
    color: #fff;
}

.sidebar-switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #29292e;
    width: 100%;
}

.sidebar-switch-row:last-child {
    border-bottom: none;
}

.grid-local-apks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
}

.app-box-item {
    background: #1a1a1f;
    border: 1px solid #29292e;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.app-box-item:hover {
    border-color: #444;
}

.app-box-item.active {
    border-color: #00b37e;
    background: #14241f;
}

.font-size-13 { font-size: 13px; }
.font-size-14 { font-size: 14px; }

/* Custom CSS Toggle Switch corporativo */
.s-switch { 
    position: relative; 
    display: inline-block; 
    width: 42px; 
    height: 22px; 
    flex-shrink: 0;
}

.s-switch input { opacity: 0; width: 0; height: 0; }

.s-slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background-color: #29292e; 
    transition: .2s; 
    border-radius: 20px; 
}

.s-slider:before { 
    position: absolute; 
    content: ""; 
    height: 16px; width: 16px; left: 3px; bottom: 3px; 
    background-color: white; 
    transition: .2s; 
    border-radius: 50%; 
}
/* Ajustes finos de padding para os inputs de rede compactados */
.wifi-network-entry .sidebar-input {
    padding: 6px 12px !important;
    font-size: 13px !important;
}
.wifi-network-entry select.sidebar-input {
    height: 33px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* =========================================================================
   4. MODAL CUSTOMIZADO DO LAUNCHER ALLOWLIST
   ========================================================================= */
.amapi-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.amapi-modal-backdrop.show-modal {
    display: flex !important;
}
.amapi-modal-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    animation: amapiModalFade 0.2s ease-out;
}
.btn-modal-tab {
    font-size: 13px;
    transition: all 0.15s ease-in-out;
    border-bottom: 2px solid transparent !important;
    color: #6c757d;
}
.btn-modal-tab.active {
    color: #0d6efd !important;
    background-color: #ffffff !important;
    border-bottom: 2px solid #0d6efd !important;
}
@keyframes amapiModalFade {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

input:checked + .s-slider { background-color: #00b37e; }
input:checked + .s-slider:before { transform: translateX(20px); }

/* =========================================================================
   ⚠️ 5. CORREÇÃO CIRÚRGICA DE INVISIBILIDADE E REATIVIDADE VISUAL (PERFIS)
   ========================================================================= */

/* Força o título secundário dos cartões a ficar visível */
.main-content .card-header .text-secondary,
.main-content .card-header h5 {
    color: #2d3748 !important;
    font-weight: 700 !important;
}

/* Garante visibilidade constante para o botão de QR Code */
#profiles-table-body .btn-light,
#profiles-table-body button:not(.btn-danger) {
    opacity: 1 !important;
    visibility: visible !important;
    color: #1a1d20 !important;
    border-color: #cbd5e1 !important;
}

/* Garante que o botão de lixeira renderize o fundo vermelho e contraste perfeitamente */
#profiles-table-body .btn-danger,
#profiles-table-body .bg-danger,
.main-content .btn-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 32px;
}

/* =========================================================================
   🔥 6. PROTEÇÃO GLOBAL CONTRA TEXTOS BRANCOS EM FUNDOS CLAROS (TODAS AS TELAS)
   ========================================================================= */

/* Corrige de uma vez por todas os textos normais e cabeçalhos das tabelas claras */
.main-content table.table {
    color: #2d3748 !important; /* Força cor grafite escuro em qualquer dado da tabela */
}

/* Força os títulos das colunas de QUALQUER tabela (Repositório, Comandos, etc.) a ficarem cinza escuro legível */
.main-content table.table thead tr th,
.main-content table.table th {
    color: #4a5568 !important;
    background-color: #f8f9fa !important;
    font-weight: 700 !important;
}

/* Protege os textos das linhas normais (td) nas telas claras contra herança de branco */
.main-content table.table tbody tr td {
    color: #2d3748 !important;
}

/* Corrige especificamente os links ou textos destacados em tabelas claras */
.main-content table.table td a,
.main-content table.table td span {
    color: inherit;
}
/* =========================================================================
   🟢 CORREÇÃO DOS BOTÕES DA LISTAGEM DE PERFIS (POLÍTICAS E QR CODE)
   ========================================================================= */

/* Força os botões da tabela de perfis a terem excelente contraste e leitura */
#profiles-table-body .btn-light,
#profiles-table-body .btn-outline-dark,
#profiles-table-body button {
    color: #1a1d20 !important;      /* Texto e ícones em grafite escuro */
    background-color: #f8f9fa !important; /* Fundo cinza claro padrão */
    border-color: #cbd5e1 !important;     /* Borda suave visível */
    opacity: 1 !important;
}

/* Garante o comportamento correto quando passar o mouse por cima (Hover) */
#profiles-table-body .btn-light:hover,
#profiles-table-body .btn-outline-dark:hover {
    background-color: #e2e8f0 !important; /* Escurece levemente o fundo no hover */
    color: #000000 !important;            /* Texto totalmente preto */
}

/* Mantém o botão de Excluir vermelho e legível sem interferência */
#profiles-table-body .btn-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
}
/* =========================================================================
   🔥 7. PREVENÇÃO COMPLETA DE QUEBRA VERTICAL E ESTOURO DO RAIO-X
   ========================================================================= */

/* Força o contêiner interno do roteador a se comportar como uma caixa de viewport flexível */
#router-view > .animate-fadeIn {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Reduz o espaçamento de tabelas de dados do Raio-X para máxima eficiência vertical */
.style-table-clean tbody tr td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12.5px !important;
}

/* Customização fina do bloco de Comandos para agir como menu compacto colado */
.col-lg-3 .card-body {
    padding: 8px !important;
}

.col-lg-3 .card-body .btn {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
}

/* Garante rolagem perfeita dentro do box de Aplicativos Coletados do rodapé */
#dash-device-apps-list {
    max-height: 140px !important; /* Altura segura perfeitamente calculada para monitores HD/FullHD */
    overflow-y: auto !important;
    padding-right: 4px;
}

/* Customização elegante das barras de rolagem internas da aplicação */
#dash-device-apps-list::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}
#dash-device-apps-list::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}
#dash-device-apps-list::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
    background-color: transparent;
}

/* =========================================================================
   🚀 8. INJEÇÕES DE PARIDADE AVANÇADA - MENUS DE LAUNCHER E KIOSK
   ========================================================================= */

/* Estilização responsiva nativa para os campos ocultos dinâmicos do Kiosk */
.id-kiosk-container,
.advanced-kiosk-field {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease-in-out;
}

/* Garante que o input nativo type="color" do Bootstrap ocupe a altura correta do grid */
.form-control-color-mdm {
    height: 38px !important;
    padding: 6px 12px !important;
    cursor: pointer;
    border-radius: 0.375rem;
}

/* Ajuste fino nas tabelas internas do Kiosk Allowlist para evitar quebras textuais */
#tbody_launcher_allowlist tr td {
    vertical-align: middle !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13px !important;
}

#tbody_launcher_allowlist code {
    background-color: #f1f5f9;
    padding: 3px 6px;
    border-radius: 4px;
    color: #64748b;
}