/**
 * Folha de Estilos da PWA Mobgate
 *
 * VERSÃO 2.4: Adiciona estilos para o botão de mostrar/ocultar senha.
 * VERSÃO 2.5: Adiciona estilos para o seletor de país na tela de login.
 * VERSÃO 2.6 (ATUAL): Adiciona estilo de 'hover' vermelho para o botão de logoff.
 */

/* --- 1. Variáveis de Tema e Reset Global --- */
:root {
    --primary-color: #3b82f6; /* Azul Principal */
    --primary-hover: #2563eb; /* Azul Escuro (Hover) */
    --danger-color: #ef4444; /* Vermelho (Perigo/Excluir) */
    --danger-hover: #dc2626; /* Vermelho Escuro (Hover) */
    --success-color: #22c55e; /* Verde (Sucesso/Ativo) */
    --success-hover: #16a34a; /* Verde Escuro (Hover) */
    --secondary-color: #6b7280; /* Cinza (Secundário/Neutro) */
    --secondary-hover: #4b5563; /* Cinza Escuro (Hover) */
    --bg-color: #f3f4f6; /* Fundo Principal (Cinza Claro) */
    --card-bg: #ffffff; /* Fundo de Cards (Branco) */
    --sidebar-bg: #1f2937; /* Fundo Sidebar (Azul Escuro/Cinza) */
    --sidebar-text: #d1d5db; /* Texto Sidebar (Cinza Claro) */
    --sidebar-text-hover: #ffffff; /* Texto Sidebar Hover (Branco) */
    --sidebar-active-bg: #374151; /* Fundo Item Ativo Sidebar */
    --text-dark: #1f2937; /* Texto Escuro Principal */
    --text-light: #6b7280; /* Texto Claro (Secundário) */
    --border-color: #e5e7eb; /* Cor da Borda */
    --input-bg: #f9fafb; /* Fundo Input */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fonte Padrão */
}
* {
    box-sizing: border-box; /* Garante que padding/border não aumentem o tamanho */
    margin: 0;
    padding: 0;
}
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent; /* Remove highlight azul no toque (iOS) */
}
.hidden {
    display: none !important; /* Classe utilitária para esconder elementos */
}

/* --- 2. Estilos de Layout e Componentes Reutilizáveis --- */
.container-view {
    position: relative; /* Para posicionar elementos filhos absolutamente */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente */
    justify-content: flex-start; /* Alinha ao topo */
    min-height: 100vh; /* Ocupa a altura inteira da tela */
    padding: 1.5rem; /* Espaçamento interno */
    width: 100%;
    margin: 0 auto; /* Centraliza o container */
    animation: fadeIn 0.5s ease-in-out; /* Animação de entrada */
}
/* Limita a largura em telas maiores (exceto no admin layout) */
@media (min-width: 640px) {
    .container-view:not(.admin-layout) {
        max-width: 500px;
    }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.logo-container {
    width: 100px;
    height: 100px;
    margin-bottom: 2rem; /* Espaço abaixo do logo */
}
.logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garante que o logo caiba sem distorcer */
}
h2 {
    font-size: 1.75rem; /* Tamanho do título principal */
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}
.input-field {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 0.5rem; /* Bordas arredondadas */
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    font-size: 1rem;
    margin-bottom: 1rem; /* Espaço abaixo do input */
    -webkit-appearance: none; /* Remove estilo padrão iOS */
}
.input-field:focus {
    outline: none; /* Remove outline padrão */
    border-color: var(--primary-color); /* Muda cor da borda no foco */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* Adiciona sombra no foco */
}
.btn {
    display: inline-flex; /* Para alinhar ícones e texto */
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s; /* Transição suave */
    user-select: none; /* Evita seleção de texto no botão */
    white-space: nowrap; /* Evita quebra de linha no texto */
}
.btn:disabled {
    opacity: 0.5; /* Aparência desabilitada */
    cursor: not-allowed;
}
.btn:active {
    transform: scale(0.98); /* Efeito de clique */
}
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover:not(:disabled) { background-color: var(--primary-hover); }
.btn-danger { background-color: var(--danger-color); color: white; }
.btn-danger:hover:not(:disabled) { background-color: var(--danger-hover); }
.btn-secondary { background-color: var(--secondary-color); color: white; }
.btn-secondary:hover:not(:disabled) { background-color: var(--secondary-hover); }
.btn-success { background-color: var(--success-color); color: white; }
.btn-success:hover:not(:disabled) { background-color: var(--success-hover); }
.btn-link {
    background: none;
    border: none;
    color: var(--secondary-color);
    font-weight: 500;
    padding: 0.5rem;
    text-decoration: underline;
}
.btn-icon {
    width: 44px !important; /* Força tamanho para ícones */
    height: 44px;
    padding: 0.6rem !important;
    border-radius: 50%; /* Botão redondo */
    flex-shrink: 0; /* Evita que encolha em flex containers */
    background-color: transparent;
    border: none;
    color: var(--text-dark);
}
.btn-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor; /* Usa a cor do texto do botão para o ícone */
}
.btn-icon:hover:not(:disabled) {
    background-color: var(--primary-hover);
    color: white;
}
.install-button {
    background-color: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco */
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}
.ios-install-banner {
    position: fixed; /* Fica fixo na tela */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    color: var(--text-dark);
    padding: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra superior */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1001; /* Garante que fique acima de outros elementos */
    border-top: 1px solid var(--border-color);
}
.ios-install-banner p {
    margin: 0;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.ios-install-banner svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}
.ios-install-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
}
.status-indicator {
    min-height: 24px; /* Garante altura mínima mesmo vazio */
    margin-top: 1rem;
    font-weight: 500;
    text-align: center;
    color: var(--text-light);
}
.subtle-text {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    text-align: center;
    max-width: 350px; /* Limita largura do texto de descrição */
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* --- 3. Ações Principais (Menu Dropdown) --- */
.main-actions-menu {
    position: absolute; /* Posiciona no canto superior direito */
    top: 1rem;
    right: 1rem;
    z-index: 50; /* Garante que fique acima da lista */
}
.main-actions-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem); /* Abaixo do botão toggle */
    right: 0;
    background-color: var(--card-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    animation: fadeIn 0.2s ease-out; /* Animação suave ao abrir */
    min-width: 220px; /* Largura mínima do dropdown */
}
.main-actions-dropdown .btn {
    width: 100%;
    justify-content: flex-start; /* Alinha texto e ícone à esquerda */
    background-color: transparent;
    color: var(--text-dark);
    padding: 0.6rem 0.8rem;
    font-weight: 500;
}
.main-actions-dropdown .btn:hover {
    background-color: var(--bg-color); /* Fundo leve no hover */
    color: var(--primary-color); /* Cor do texto muda no hover */
}
.main-actions-dropdown .btn svg {
    margin-right: 0.75rem;
    width: 20px;
    height: 20px;
    stroke: var(--secondary-color);
    transition: stroke 0.2s;
}
.main-actions-dropdown .btn:hover svg {
    stroke: var(--primary-color); /* Cor do ícone muda no hover */
}
.main-actions-dropdown .install-button {
    color: var(--text-dark);
    border: none;
}
.main-actions-dropdown .install-button:hover {
    color: var(--primary-color);
}

/* --- Estilos Específicos por Tela --- */
#device-list-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Espaço entre os itens da lista */
    margin-top: 1rem;
}
.device-item {
    background-color: var(--card-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease-in-out;
    overflow: hidden; /* Garante que bordas arredondadas funcionem */
}
.device-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra sutil no hover */
}
.device-item-header {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    gap: 1rem; /* Espaço entre logo, info e botões */
    padding: 1rem;
    cursor: pointer;
    position: relative; /* Para badges e botões posicionados absolutamente */
}
.device-logo img { width: 48px; height: 48px; object-fit: contain; border-radius: 0.5rem; } /* Logo arredondado */
.device-info { flex-grow: 1; /* Ocupa espaço restante */ }
.device-name {
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap; /* Permite que badges quebrem linha se necessário */
}
.device-badge-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.device-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 99px; /* Badge totalmente arredondado */
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}
.admin-badge {
    background-color: var(--primary-color);
}
.ble-local-badge {
    background-color: var(--success-color);
}
.device-uuid { font-size: 0.8rem; color: var(--text-light); }

.device-admin-btn {
    position: absolute; /* Posiciona no canto superior direito do header */
    top: 0.5rem;
    right: 0.5rem;
    display: flex; /* Para alinhar botões lado a lado se houver mais de um */
    gap: 0.25rem;
}
.device-admin-btn .btn-icon {
    width: 36px !important;
    height: 36px;
    padding: 0.5rem !important;
    color: var(--secondary-color);
}
.device-admin-btn .btn-icon:hover {
    background-color: var(--bg-color); /* Fundo sutil no hover */
    color: var(--primary-color);
}
.device-controls-container {
    padding: 0 1rem 1rem 1rem; /* Espaçamento interno (sem padding superior) */
    border-top: 1px solid var(--border-color); /* Linha divisória */
    margin-top: 0.5rem; /* Pequeno espaço acima da linha */
    animation: fadeIn 0.5s;
}
.sensor-status-group {
    display: grid;
    /* Cria colunas responsivas, mínimo 140px */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin: 1rem 0; /* Espaço acima e abaixo */
}
.remote-buttons-group {
    display: flex;
    flex-direction: column; /* Botões um abaixo do outro */
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.sensor-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--input-bg);
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}
.indicator { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; transition: background-color 0.3s ease; }
.indicator.on { background-color: var(--success-color); }
.indicator.off { background-color: #d1d5db; /* Cinza para desligado */ }
.sensor-label { font-weight: 500; color: var(--text-dark); }
.remote-button { padding: 1rem; font-size: 1.1rem; font-weight: 600; }

/* ESTILOS PARA CARREGAMENTO ASSÍNCRONO DE DISPOSITIVOS */
.device-status-badge {
    position: absolute;
    top: 8px;
    right: 50px; /* Ajustado para não sobrepor o botão de excluir */
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    z-index: 2; /* Garante visibilidade */
}
.device-status-badge.verifying { background-color: var(--secondary-color); }
.device-status-badge.failed { background-color: var(--danger-color); }

.device-item--verifying,
.device-item--failed {
    opacity: 0.7; /* Levemente transparente */
    background-color: #f9fafb; /* Fundo ligeiramente diferente */
}
/* Desabilita o cursor de ponteiro para indicar que não é clicável */
.device-item--verifying .device-item-header,
.device-item--failed .device-item-header {
    cursor: not-allowed;
}
.device-item--verified { opacity: 1; }

/* Oculta APENAS o botão de admin (engrenagem) nesses estados */
.device-item--verifying .admin-btn,
.device-item--failed .admin-btn {
    display: none;
}
/* O botão de excluir (.delete-device-btn) permanece visível */

/* --- 4. PAINEL DE ADMINISTRAÇÃO --- */
#admin-panel-view.admin-layout {
    display: flex; /* Layout lado a lado (sidebar + main) */
    flex-direction: row;
    align-items: flex-start; /* Alinha ao topo */
    padding: 0; /* Remove padding do container principal */
    max-width: none; /* Ocupa largura total */
    height: 100vh; /* Ocupa altura total */
    overflow: hidden; /* Evita scroll no body */
}
#admin-sidebar {
    width: 250px; /* Largura fixa da sidebar */
    height: 100%;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Evita que a sidebar encolha */
    transition: transform 0.3s ease-in-out; /* Animação para mobile */
}
.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--sidebar-active-bg);
}
.sidebar-header h3 {
    color: white;
    font-size: 1.5rem;
}
.admin-menu {
    list-style: none;
    padding: 1rem 0;
    flex-grow: 1; /* Ocupa espaço vertical restante */
}
.admin-menu-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    border-left: 3px solid transparent; /* Indicador ativo */
}
.admin-menu-item:hover {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-text-hover);
}
.admin-menu-item.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-text-hover);
    border-left-color: var(--primary-color); /* Marca item ativo */
}
.admin-menu-item svg {
    width: 20px;
    height: 20px;
    margin-right: 1rem;
    stroke: currentColor;
    fill: none; /* Garante que ícones stroke funcionem */
}
#admin-main-content {
    flex-grow: 1; /* Ocupa espaço horizontal restante */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Permite scroll vertical no conteúdo */
    background-color: var(--bg-color);
}
.admin-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky; /* Cabeçalho fixo no topo */
    top: 0;
    z-index: 10;
}
.admin-header h2 {
    margin: 0;
    font-size: 1.5rem;
    flex-grow: 1; /* Empurra botão "Voltar" para a direita */
    text-align: left;
}
#back-from-admin-btn {
    margin-left: auto; /* Garante que fique à direita */
}
#sidebar-toggle-btn {
    display: none; /* Escondido por padrão (visível em mobile) */
    background: transparent;
    border: none;
    color: var(--text-dark);
}
#sidebar-toggle-btn svg {
    width: 24px;
    height: 24px;
}
.admin-tab-content {
    display: none; /* Abas inativas escondidas */
    padding: 1.5rem;
    animation: fadeIn 0.5s;
    flex-grow: 1; /* Ocupa espaço vertical restante */
}
.admin-tab-content.active {
    display: flex; /* Aba ativa visível */
    flex-direction: column;
    gap: 1.5rem; /* Espaço entre os cards/controles */
}
/* Estilos para layout mobile do admin */
@media (max-width: 767px) {
    #admin-sidebar {
        position: absolute; /* Sidebar flutua sobre o conteúdo */
        left: 0;
        top: 0;
        z-index: 100;
        transform: translateX(-100%); /* Escondida fora da tela */
    }
    #admin-panel-view.sidebar-open #admin-sidebar {
        transform: translateX(0); /* Mostra sidebar */
    }
    #sidebar-toggle-btn {
        display: inline-flex; /* Mostra botão de toggle */
    }
}
.admin-controls { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; }
.admin-controls .input-field { margin-bottom: 0; flex-grow: 1; }
.admin-controls .btn { width: auto; flex-shrink: 0; }
#user-list-container { width: 100%; display: flex; flex-direction: column; gap: 0.75rem; }
.user-list-item {
    display: flex; align-items: center; justify-content: space-between;
    background-color: var(--card-bg); padding: 1rem; border-radius: 0.75rem;
    border: 1px solid var(--border-color); cursor: pointer; transition: box-shadow 0.2s;
}
.user-list-item:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.user-info { flex-grow: 1; }
.user-name { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } /* Alinha ícone admin */
.user-phone { font-size: 0.85rem; color: var(--text-light); }
.user-list-item .btn-icon { background-color: transparent; border: none; }
.user-list-item .btn-icon svg { stroke: var(--text-light); } /* Seta cinza */

/* Estilos gerais do formulário de configuração */
.config-form-container { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.config-section-card {
    width: 100%; background-color: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 0.75rem; padding: 1.5rem;
}
.config-header {
    font-size: 0.9rem; font-weight: 600; color: var(--text-light);
    text-transform: uppercase; margin-bottom: 1rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Layout de 2 colunas */
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; } /* Uma coluna em telas pequenas */
}
.logo-upload-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.logo-upload-container img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--input-bg);
}
/* Containers para listas dinâmicas */
#remote-devices-container, #schedules-list-container { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.schedule-card, .remote-device-card {
    background: var(--card-bg); padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--border-color);
}
/* Lista de Eventos */
#events-list-container { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.event-item {
    background-color: var(--card-bg); padding: 0.75rem 1rem; border-radius: 0.5rem;
    border-left: 4px solid var(--secondary-color); /* Barra lateral cinza */
}
.event-item .event-details { font-weight: 500; }
.event-item .event-timestamp { font-size: 0.8rem; color: var(--text-light); }
/* Botões na aba Sistema */
.system-actions { display: flex; gap: 1rem; width: 100%; margin-top: 1rem;}

/* Sub-abas (Redes) */
.sub-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.sub-tab-button {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 3px solid transparent; /* Indicador ativo */
    margin-bottom: -1px; /* Alinha com a borda inferior */
}
.sub-tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.sub-tab-content {
    display: none; /* Esconde conteúdo inativo */
}
.sub-tab-content.active {
    display: flex; /* Mostra conteúdo ativo */
    flex-direction: column;
    gap: 1.5rem;
}
/* Listas dentro das sub-abas (APIs, MQTT) */
.item-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.item-list li {
    background-color: var(--input-bg);
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item-list li .btn-icon { /* Botão de remover menor */
    width: 32px !important;
    height: 32px;
    padding: 0.4rem !important;
}

/* --- 5. MODAIS --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px); /* Efeito de desfoque (suporte variado) */
    padding: 1rem; /* Espaço nas bordas */
    animation: fadeIn 0.3s;
}
.modal-content {
    background-color: var(--bg-color); /* Fundo claro para contraste */
    border-radius: 1rem;
    width: 100%;
    max-width: 500px; /* Largura máxima do modal */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Altura máxima, permite scroll se necessário */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); }
.modal-header h3 { font-size: 1.25rem; margin: 0; color: var(--text-dark); }
.modal-body { padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.modal-footer {
    padding: 1rem 1.5rem; border-top: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    background-color: var(--card-bg); /* Fundo ligeiramente diferente */
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.modal-footer-actions {
    display: flex;
    gap: 0.5rem; /* Espaço entre botões de ação */
}
#modal-delete-btn { margin-right: auto; } /* Empurra botão de excluir para a esquerda */

/* Grupos de campos dentro do modal */
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-group label { font-weight: 500; font-size: 0.9rem; color: var(--text-dark); }
.form-group .input-field { margin-bottom: 0; }
.form-group-row { display: flex; align-items: center; gap: 0.5rem; }
/* Seções de acesso e permissões */
.access-section, .permissions-section {
    border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem;
    background-color: var(--card-bg); display: flex; flex-direction: column; gap: 1rem;
}
/* Layout para itens de acesso (TAG, Facial, TX) */
.access-item {
    display: grid;
    grid-template-areas:
        "label label"
        "input actions"; /* Layout em L */
    grid-template-columns: 1fr auto; /* Input ocupa espaço, ações tamanho automático */
    align-items: center;
    row-gap: 0.25rem;
    column-gap: 0.75rem;
}
.access-item label {
    grid-area: label;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}
.access-item .input-field.access-code {
    grid-area: input;
    margin-bottom: 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px; /* Espaçamento para códigos */
}
.access-item .cell-actions {
    grid-area: actions;
}
/* Estilo visual para input readonly vs editável */
.access-item .input-field.access-code[readonly] {
    background-color: var(--input-bg);
    cursor: default;
    color: var(--text-light);
}
.access-item .input-field.access-code:not([readonly]) {
    background-color: white;
    cursor: text;
    border-color: var(--primary-color); /* Destaca quando editável */
    color: var(--text-dark);
}
.access-item .cell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinha botões à direita */
    gap: 0.25rem;
}
.access-item .btn-icon { /* Botões de ação menores */
    width: 36px !important;
    height: 36px;
    padding: 0.5rem !important;
}
/* Layout para permissões (ShareRly, Admin) */
.permissions-section .permission-label { font-weight: 600; margin-bottom: 0.5rem; display: block;}
#edit-user-sharerly-container, #share-relay-options-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas para checkboxes */
    gap: 1rem;
}
@media (max-width: 450px) {
    #edit-user-sharerly-container, #share-relay-options-container {
        grid-template-columns: 1fr; /* Uma coluna em telas muito pequenas */
    }
}
#edit-user-sharerly-container div, #share-relay-options-container div {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Label à esquerda, switch à direita */
}
.admin-permission {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1rem; border-top: 1px solid var(--border-color); margin-top: 0.5rem;
}
/* Componente Switch Toggle */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(22px); } /* Movimento do slider */

/* --- 6. OVERLAYS GLOBAIS E ELEMENTOS NOVOS --- */
.spinner-container { text-align: center; color: var(--text-dark); background: var(--card-bg); padding: 2rem; border-radius: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.spinner { width: 32px; height: 32px; border: 4px solid var(--border-color); border-left-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.message-box {
    background-color: var(--card-bg); padding: 1.5rem; border-radius: 0.75rem;
    width: 90%; max-width: 400px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
#message-text { margin-bottom: 1.5rem; font-size: 1.1rem; }
/* Estilos para captura/preview facial */
.facial-preview-container {
    width: 100%;
    max-width: 256px; /* Limita tamanho do preview */
    height: 256px;
    margin: 1rem auto;
    background-color: var(--input-bg);
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Garante que imagem não saia */
}
#facial-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mostra imagem inteira */
}
.facial-capture-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
}
#edit-user-facial-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
/* Switch e indicador de status do Suporte WebPro */
.support-switch-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}
#support-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--secondary-color); /* Cinza por padrão */
    transition: background-color 0.3s ease;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
#support-status-indicator.connected {
    background-color: var(--success-color); /* Verde quando conectado */
}
/* Labels para dias da semana em agendamentos */
.weekday-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer; /* Indica que é clicável */
}

/* --- 7. AJUSTES PARA POSICIONAMENTO SUPERIOR DIREITO --- */
.top-right-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 50; /* Garante que fique acima de outros elementos */
}

/* --- 8. NOVOS ESTILOS PARA A ABA SISTEMA --- */
.system-info-grid {
    display: grid;
    /* Colunas responsivas, mínimo 250px */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.info-item {
    display: flex;
    flex-direction: column;
}
.info-item label {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.info-item span {
    font-family: 'Menlo', 'Consolas', monospace; /* Fonte monoespaçada */
    font-size: 1rem;
    background-color: var(--input-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    word-break: break-all; /* Quebra MAC/UUID longos */
}
.info-item.full-width {
    grid-column: 1 / -1; /* Ocupa largura total (ex: UUID) */
}

/* --- 9. ESTILOS PARA MOSTRAR/OCULTAR SENHA --- */
.password-input-container {
    position: relative; /* Necessário para posicionar o botão absolutamente */
}
.password-input-container .input-field {
    /* Adiciona padding à direita para não sobrepor o texto com o ícone */
    padding-right: 3rem; /* Ajuste conforme necessário (3rem = 48px) */
}
.password-toggle-btn {
    position: absolute;
    top: 50%; /* Alinha verticalmente com o centro do container */
    right: 0.5rem; /* Posiciona à direita dentro do padding */
    transform: translateY(-50%); /* Ajusta o centro vertical exato */
    width: 36px !important; /* Tamanho do botão */
    height: 36px !important;
    padding: 0.5rem !important; /* Padding interno do botão */
    color: var(--text-light); /* Cor do ícone */
    background: transparent;
    border: none;
    cursor: pointer;
    /* Remove hover padrão se desejar */
    /* background-color: transparent !important; */
}
/* Opcional: Estilo hover/foco específico se o padrão .btn-icon:hover não for suficiente */
.password-toggle-btn:hover,
.password-toggle-btn:focus {
    color: var(--primary-color);
    background-color: rgba(59, 130, 246, 0.1); /* Fundo leve no hover */
    outline: none;
}
/* Garante que o ícone SVG dentro do botão tenha a cor correta e tamanho */
.password-toggle-btn svg {
    width: 100%;
    height: 100%;
    stroke: currentColor; /* Usa a cor definida no botão */
    fill: none; /* Garante que ícones stroke funcionem */
}


/* --- 10. ESTILOS DO GRUPO DE TELEFONE (LOGIN) --- */

/* Adiciona um estilo de grupo de formulário para o login, similar ao do admin */
#phone-login-view .form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* Espaço entre o rótulo e o grupo de input */
    margin-bottom: 1.5rem; /* Espaçamento abaixo do grupo */
}
#phone-login-view .form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-dark);
    text-align: left; /* Alinha o rótulo à esquerda */
}
/* Container que agrupa o seletor de país e o input do telefone */
.phone-input-group {
    display: flex;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--input-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden; /* Garante que os cantos arredondados funcionem */
}
/* Aplica o estilo de foco ao grupo inteiro quando qualquer filho focar */
.phone-input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
/* Estilo para o <select> do código do país */
#country-code-select {
    flex-shrink: 0; /* Impede que o seletor encolha */
    padding: 0.8rem 0.5rem 0.8rem 1rem;
    border: none;
    background-color: transparent; /* Combina com o fundo do grupo */
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    border-right: 1px solid var(--border-color); /* Linha separadora */
    -webkit-appearance: none; /* Remove estilo padrão iOS/Safari */
    appearance: none;
    cursor: pointer;
}
#country-code-select:focus {
    outline: none; /* O foco é tratado pelo :focus-within no pai */
}
/* Modifica o input-field quando está dentro do grupo */
.phone-input-group .input-field {
    flex-grow: 1; /* Ocupa o espaço restante */
    border: none;
    margin-bottom: 0; /* Remove a margem padrão do input-field */
    border-top-left-radius: 0; /* Remove cantos arredondados que conflitam */
    border-bottom-left-radius: 0;
}
.phone-input-group .input-field:focus {
    outline: none;
    box-shadow: none; /* O foco é tratado pelo pai */
}

/* --- 11. (NOVO) ESTILO DO BOTÃO LOGOFF --- */

/* Estilo específico para o botão de logoff no dropdown */
#logoff-btn {
    /* A cor base já é pega pelo .btn (transparente) e .main-actions-dropdown .btn (texto escuro) */
}

/* No hover, faz o texto e o ícone ficarem vermelhos */
#logoff-btn:hover {
    color: var(--danger-color); /* Texto vermelho no hover */
    background-color: rgba(239, 68, 68, 0.1); /* Fundo vermelho bem claro no hover */
}

/* Garante que o ícone do logoff também fique vermelho no hover */
#logoff-btn:hover svg {
    stroke: var(--danger-color);
}