/* RESET BÁSICO */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
body { background-color: #f1f1f1; color: #333; }

/* REGRA 2: BLOQUEIO DE SELEÇÃO GLOBAL (Pode ser sobrescrito em inputs) */
body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* CORES ACURYS */
:root {
    --acurys-green: #b8d433; /* Verde do topo */
    --acurys-blue: #009cb4;  /* Azul do logo/texto */
    --menu-bg: #e2e2e2;
    --menu-hover: #ffffff;
    --border-color: #ccc;
}

/* TOPO */
.top-green-bar { height: 5px; background-color: var(--acurys-green); width: 100%; }

/* HEADER: LOGO E USUÁRIO */
.main-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 30px; background-color: #ffffff; border-bottom: 1px solid var(--border-color);
}
.user-info { text-align: right; font-size: 12px; }
.user-name { color: var(--acurys-blue); font-weight: bold; font-size: 14px; text-transform: uppercase; margin-bottom: 3px; }
.user-role { color: #666; font-weight: bold; margin-bottom: 2px; }
.user-email { color: #999; }

/* MENU PRINCIPAL */
.main-nav { background-color: var(--menu-bg); border-bottom: 2px solid var(--border-color); padding: 0 20px; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 5px; padding-top: 10px; }

/* ITENS DO MENU (NÍVEL 1) */
.nav-menu > li { position: relative; }
.nav-menu > li > a {
    display: block; padding: 10px 15px; text-decoration: none; color: var(--acurys-blue);
    font-weight: bold; font-size: 14px; background-color: #f8f8f8;
    border: 1px solid var(--border-color); border-bottom: none; border-radius: 5px 5px 0 0;
}
.nav-menu > li:hover > a, .nav-menu > li.active > a {
    background-color: var(--acurys-green); color: #fff;
}

/* DROPDOWNS (NÍVEL 2 e NÍVEL 3) */
.dropdown {
    display: none; position: absolute; top: 100%; left: 0; background-color: #fff;
    min-width: 220px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: 1px solid var(--border-color); z-index: 1000;
}
.dropdown li { list-style: none; border-bottom: 1px solid #eee; position: relative; }
.dropdown li a { display: block; padding: 10px 15px; text-decoration: none; color: #555; font-size: 13px; }
.dropdown li:hover > a { background-color: #f1f1f1; color: var(--acurys-blue); }

/* Exibe o Dropdown ao passar o mouse */
.nav-menu li:hover > .dropdown { display: block; }

/* SUBMENU (NÍVEL 3 - Ex: Configurações > Financeiro > Bancos) */
.dropdown .submenu { top: 0; left: 100%; display: none; }
.dropdown .has-submenu:hover > .submenu { display: block; }

/* Trava o submenu aberto quando o JavaScript adicionar a classe */
.nav-menu li.menu-travado > .dropdown { 
    display: block !important; 
}

/* ÁREA DE CONTEÚDO */
.main-content { padding: 20px 30px; }
.welcome-box { background: #fff; padding: 30px; border-radius: 5px; border: 1px solid var(--border-color); text-align: center; color: #666; }



/* ==========================================================================
   DESIGN SYSTEM ACURYS (Cards, Botões, Formulários e Tabelas)
   ========================================================================== */

/* CARDS MODERNOS */
.modern-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.card-title { color: var(--acurys-blue); font-size: 14px; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #f3f4f6; padding-bottom: 12px; margin-bottom: 20px; }

/* BOTÕES */
.btn-salvar-moderno {
    background: linear-gradient(180deg, #c4e035 0%, #b8d433 100%);
    color: #ffffff !important; 
    border: 1px solid #a8c422; padding: 10px 24px; border-radius: 6px; font-weight: 700; font-size: 13px;
    cursor: pointer; display: inline-flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease; text-transform: uppercase;
}
.btn-salvar-moderno:hover { background: linear-gradient(180deg, #cde648 0%, #c1db3e 100%); transform: translateY(-1px); }
.btn-salvar-moderno:active { transform: translateY(1px); box-shadow: none; }

/* FORMULÁRIOS (Grids e Inputs) */
.form-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-size: 11px; font-weight: 600; color: #4b5563; margin-bottom: 6px; text-transform: uppercase; }
.req { color: #d93025; font-weight: bold; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #1f2937; background-color: #fcfcfc; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--acurys-blue); background-color: #ffffff; box-shadow: 0 0 0 3px rgba(0, 156, 180, 0.1); }
.option-novo { font-weight: bold; color: var(--acurys-blue); }

/* ALERTAS */
.alerta-box { display: none; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-weight: 600; font-size: 13px; }
.alerta-box.erro { background: #fef2f2; color: #991b1b; border: 1px solid #f87171; }
.alerta-box.sucesso { background: #f0fdf4; color: #166534; border: 1px solid #4ade80; }

/* CABEÇALHOS DAS TELAS (View Headers) */
.view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.header-titles h2 { color: var(--acurys-blue); font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.header-titles p { color: #6b7280; font-size: 13px; margin: 0; }

/* TABELAS MODERNAS (Acurys) */
.modern-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.modern-table thead { background-color: #f8f9fa; border-bottom: 2px solid #e5e7eb; }
.modern-table th { padding: 12px 16px; font-weight: 700; color: var(--acurys-blue); text-transform: uppercase; font-size: 11px; }
.col-sortable { cursor: pointer; transition: background 0.2s; }
.col-sortable:hover { background-color: #eef2f6; }
.modern-table td { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; color: #4b5563; }
.modern-table tbody tr:hover { background-color: #f9fafb; }

/* TAGS DE STATUS */
.tag-status { padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.tag-status.sim { background: #e6f4ea; color: #1e8e3e; }
.tag-status.nao { background: #fce8e6; color: #d93025; }


/* MODAIS (Telas Flutuantes) */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-content { width: 450px; max-width: 90%; background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }

/* MENU DE AÇÕES (Tabela) */
.acao-container { position: relative; display: inline-block; }
.btn-acao-tabela { background: #eef2a7; border: 1px solid #d4d977; color: #555; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: 0.2s; }
.btn-acao-tabela:hover { background: #dce08b; }
.dropdown-acao { display: none; position: absolute; right: 0; top: 100%; background: #fff; min-width: 180px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid #e5e7eb; border-radius: 4px; z-index: 1000; text-align: left; overflow: hidden; }
.dropdown-acao.mostrar { display: block; }
.dropdown-acao button { width: 100%; text-align: left; padding: 10px 15px; border: none; background: none; font-size: 13px; color: #444; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: 0.2s; display: flex; align-items: center; gap: 10px; }
.dropdown-acao button:hover { background: #f9fafb; color: var(--acurys-blue); }
.dropdown-acao button:last-child { border-bottom: none; }

/* Remove o overflow hidden da tabela para o menu poder "vazar" pra fora */
.modern-card.overflow-visible { overflow: visible !important; }

/* ==========================================================================
   MENU DO PERFIL (CANTO SUPERIOR DIREITO)
   ========================================================================== */
.user-profile-container { position: relative; display: inline-block; margin-left: auto; }
.user-profile-btn { cursor: pointer; text-align: right; padding: 5px 10px; transition: 0.2s; border-radius: 4px; }
.user-profile-btn:hover { background: #f3f4f6; }
.user-info { display: flex; flex-direction: column; align-items: flex-end; }
.user-name { font-weight: bold; color: var(--acurys-blue); font-size: 13px; text-transform: uppercase; }
.user-role { font-size: 11px; color: #666; }

.user-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; background: #fff; min-width: 220px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid #e5e7eb; border-radius: 4px; z-index: 9999; margin-top: 5px; overflow: hidden; }
.user-dropdown-menu.mostrar { display: block; }
.user-menu-item { width: 100%; text-align: left; padding: 12px 15px; border: none; background: none; font-size: 13px; color: #444; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: 0.2s; display: flex; align-items: center; gap: 10px; }
.user-menu-item:hover { background: #f9fafb; color: var(--acurys-blue); }
.user-menu-item:last-child { border-bottom: none; }
.text-danger:hover { color: #d93025 !important; font-weight: bold; }

/* ==========================================================================
   TELA DE LOGIN E CONTROLE DE VISIBILIDADE
   ========================================================================== */
.hidden { display: none !important; }

#login-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    display: flex; align-items: center; justify-content: center; z-index: 10000;
}

.login-box {
    background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 350px; text-align: center; border-top: 5px solid var(--acurys-blue);
}

.login-logo { font-size: 28px; font-weight: bold; color: var(--acurys-blue); margin-bottom: 5px; }
.login-logo span { color: #b8d433; }
.login-subtitle { font-size: 13px; color: #666; margin-bottom: 30px; }

.login-input {
    width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 14px; text-align: left;
}
.login-input:focus { border-color: var(--acurys-blue); outline: none; }

.btn-login {
    width: 100%; background: var(--acurys-blue); color: white; border: none;
    padding: 12px; border-radius: 6px; font-weight: bold; font-size: 14px;
    cursor: pointer; transition: 0.2s; margin-top: 10px; text-transform: uppercase;
}
.btn-login:hover { background: #00879c; }

/* ==========================================================================
   SEGURANÇA (DLP): BLOQUEIO DE SELEÇÃO E CÓPIA DE TELA
   ========================================================================== */
body.bloquear-copia {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Padrão */
}

/* Exceção obrigatória: O usuário TEM que conseguir selecionar o texto que ele mesmo está digitando */
body.bloquear-copia input,
body.bloquear-copia textarea,
body.bloquear-copia select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Força a liberação da cópia se o JavaScript remover a trava do body */
body:not(.bloquear-copia) {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}

/* ==========================================================================
   CALENDÁRIO PERSONALIZADO (FLATPICKR)
   ========================================================================== */
.flatpickr-calendar { font-family: Roboto, sans-serif; border: 1px solid rgba(0,0,0,.15); box-shadow: rgba(0,0,0,.2) 0 1px 3px; }
.flatpickr-months, .flatpickr-weekdays { background: #b8d433 !important; }
.flatpickr-month, .flatpickr-current-month input.cur-year { color: white !important; fill: white !important; }
span.flatpickr-weekday { color: white !important; font-weight: bold; }
.flatpickr-day.selected { background: #b8d433 !important; border-color: #b8d433 !important; }
.flatpickr-monthDropdown-months option { color: #444 !important; background: #fff !important; }


/* =========================================================================
   MODAL DE CONTATOS (POP-UP) E NOVOS ESTILOS DE TABELA
   ========================================================================= */

/* Fundo escuro do modal */
.modal-acurys {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 10000; /* Garante que fique acima de tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Fundo preto semi-transparente */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px); /* Efeito borrado no fundo */
}

/* Caixa de conteúdo do modal */
.modal-acurys-content {
    background-color: #fff;
    width: 90%;
    max-width: 900px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: zoomInModal 0.3s ease;
}

/* Animação de entrada */
@keyframes zoomInModal {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Cabeçalho do modal */
.modal-acurys-header {
    background-color: var(--acurys-blue);
    color: #fff;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-acurys-header h2 {
    margin: 0;
    font-size: 16px;
}

.modal-acurys-header .btn-close-modal {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
}

/* Corpo do modal */
.modal-acurys-body {
    padding: 20px;
    overflow-y: auto; /* Permite rolagem dentro do modal */
    max-height: 80vh; /* Limita a altura para 80% da tela */
}

/* Estilos para o menu dropdown da tabela - mais profissional */
.dropdown-acao {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.dropdown-acao button {
    transition: background 0.2s;
    font-size: 13px !important;
}

.dropdown-acao button:hover {
    background-color: #f4f6f8;
}

/* Tags de status Sim/Não nas tabelas secundárias */
.tag-status-sec {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 10px;
}
.tag-status-sec.sim { background: #e6f7e6; color: #1e7e1e; border: 1px solid #c3e6cb; }
.tag-status-sec.nao { background: #f8e6e6; color: #7e1e1e; border: 1px solid #e6c3c3; }

/* ESTILO DOS INPUTS DENTRO DAS TABELAS (Vendas) */
.modern-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    background-color: #fcfcfc;
    transition: all 0.2s ease;
}
.modern-input:focus {
    outline: none;
    border-color: var(--acurys-blue);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 156, 180, 0.1);
}

/* ==========================================================================
   LINKS DINÂMICOS GLOBAIS (Nomes, Produtos, Seriais)
   ========================================================================== */
.link-dinamico {
    color: var(--acurys-blue) !important;
    cursor: pointer !important;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.link-dinamico:hover {
    text-decoration: underline !important;
}