<?php
/**
 * includes/header.php — Carregado em TODAS as páginas
 * Compatível com PHP 8.3.31 + MySQL 8.0.45
 * 
 * @package MKT_Telecom
 * @version 2.1
 */

require_once __DIR__ . '/../auth.php';
require_once __DIR__ . '/../functions.php';
requireLogin();

$usuario    = usuarioLogado();
$pageActive = $pageActive ?? '';

// ─────────────────────────────────────────────────────────────────
// GARANTE TABELA DE CONFIGURAÇÕES
// ─────────────────────────────────────────────────────────────────
try {
    pdo()->exec("CREATE TABLE IF NOT EXISTS `configuracoes` (
        `chave`     VARCHAR(100) NOT NULL,
        `valor`     TEXT         DEFAULT NULL,
        `descricao` VARCHAR(255) DEFAULT NULL,
        PRIMARY KEY (`chave`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci");
} catch (PDOException $e) { /* silencia */ }

// ─────────────────────────────────────────────────────────────────
// CARREGA TODAS AS CONFIGURAÇÕES
// ─────────────────────────────────────────────────────────────────
$cfgs = [];
try {
    $stmt = pdo()->query("SELECT chave, valor FROM configuracoes");
    $cfgs = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
} catch (Exception $e) {
    $cfgs = [];
}

// ─────────────────────────────────────────────────────────────────
// CONFIGURAÇÕES DA EMPRESA
// ─────────────────────────────────────────────────────────────────
$cfg_empresa    = $cfgs['empresa_nome']       ?? APP_NAME;
$cfg_logo       = $cfgs['logo_url']           ?? '';
$cfg_cor_pri    = $cfgs['cor_primaria']       ?? '#00d4ff';
$cfg_cor_acent  = $cfgs['cor_acento']         ?? '#10b981';
$cfg_cor_bg     = $cfgs['cor_fundo']          ?? '#090e1b';
$cfg_cor_sidebar= $cfgs['cor_sidebar']        ?? '#0f1729';

// ─────────────────────────────────────────────────────────────────
// CONFIGURAÇÕES DE TIPOGRAFIA
// ─────────────────────────────────────────────────────────────────
$cfg_fonte_pri   = $cfgs['fonte_principal']    ?? 'Exo 2';
$cfg_fonte_mono  = $cfgs['fonte_mono']         ?? 'Share Tech Mono';
$cfg_fonte_size  = (int)($cfgs['tamanho_fonte_base'] ?? '14');
if ($cfg_fonte_size < 10 || $cfg_fonte_size > 24) $cfg_fonte_size = 14;

// ─────────────────────────────────────────────────────────────────
// CORES ADICIONAIS
// ─────────────────────────────────────────────────────────────────
$cfg_cor_card    = $cfgs['cor_card']             ?? '#121a2e';
$cfg_cor_texto   = $cfgs['cor_texto']            ?? '#e2e8f0';
$cfg_cor_muted   = $cfgs['cor_texto_secundario'] ?? '#94a3b8';
$cfg_cor_borda   = $cfgs['cor_borda']            ?? '#1e293b';
$cfg_cor_borda_tab = $cfgs['cor_borda_tabela']   ?? '#1e293b';
$cfg_cor_sucesso = $cfgs['cor_sucesso']          ?? '#10b981';
$cfg_cor_erro    = $cfgs['cor_erro']             ?? '#ef4444';
$cfg_cor_aviso   = $cfgs['cor_aviso']            ?? '#f59e0b';
$cfg_cor_info    = $cfgs['cor_info']             ?? '#3b82f6';

// ─────────────────────────────────────────────────────────────────
// BORDAS E EFEITOS
// ─────────────────────────────────────────────────────────────────
$cfg_raio = (int)($cfgs['bordas_arredondadas'] ?? '10');
if ($cfg_raio < 0 || $cfg_raio > 24) $cfg_raio = 10;

$cfg_sombra = $cfgs['efeito_sombra'] ?? 'media';
if (!in_array($cfg_sombra, ['nenhuma','leve','media','intensa'])) $cfg_sombra = 'media';

$cfg_borda_tab_estilo = $cfgs['borda_tabela_estilo'] ?? 'solid';
if (!in_array($cfg_borda_tab_estilo, ['solid','dashed','dotted','none'])) $cfg_borda_tab_estilo = 'solid';

$cfg_borda_tab_largura = (int)($cfgs['borda_tabela_largura'] ?? '1');
if ($cfg_borda_tab_largura < 0 || $cfg_borda_tab_largura > 4) $cfg_borda_tab_largura = 1;

// ─────────────────────────────────────────────────────────────────
// TIPOGRAFIA ADICIONAL
// ─────────────────────────────────────────────────────────────────
$cfg_peso_fonte = (int)($cfgs['peso_fonte'] ?? '400');
if (!in_array($cfg_peso_fonte, [400,500,600,700])) $cfg_peso_fonte = 400;

$cfg_altura_linha = (float)($cfgs['altura_linha'] ?? '1.5');
if ($cfg_altura_linha < 1.1 || $cfg_altura_linha > 2.0) $cfg_altura_linha = 1.5;

$cfg_espacamento_letras = (float)($cfgs['espacamento_letras'] ?? '0');
if ($cfg_espacamento_letras < -0.5 || $cfg_espacamento_letras > 2) $cfg_espacamento_letras = 0;

$cfg_tamanho_titulo = (int)($cfgs['tamanho_titulo'] ?? '20');
if ($cfg_tamanho_titulo < 16 || $cfg_tamanho_titulo > 32) $cfg_tamanho_titulo = 20;

// ─────────────────────────────────────────────────────────────────
// MONTA URL GOOGLE FONTS
// ─────────────────────────────────────────────────────────────────
$_fontList = array_unique(['Exo 2', 'Share Tech Mono', $cfg_fonte_pri, $cfg_fonte_mono]);
$_fontQueryParts = [];
foreach ($_fontList as $f) {
    $_fontQueryParts[] = urlencode($f) . ':wght@300;400;500;600;700;800';
}
$_fontQuery = implode('&family=', $_fontQueryParts);
$_googleFontsUrl = 'https://fonts.googleapis.com/css2?family=' . $_fontQuery . '&display=swap';

// ─────────────────────────────────────────────────────────────────
// SANITIZA CORES
// ─────────────────────────────────────────────────────────────────
function sanitizeCor(string $c, string $default): string {
    return preg_match('/^#[0-9a-fA-F]{3,6}$/', $c) ? $c : $default;
}

$cor_pri     = sanitizeCor($cfg_cor_pri,     '#00d4ff');
$cor_acent   = sanitizeCor($cfg_cor_acent,   '#10b981');
$cor_bg      = sanitizeCor($cfg_cor_bg,      '#090e1b');
$cor_sidebar = sanitizeCor($cfg_cor_sidebar, '#0f1729');
$cor_card_cfg= sanitizeCor($cfg_cor_card,    '#121a2e');
$cor_texto   = sanitizeCor($cfg_cor_texto,   '#e2e8f0');
$cor_muted   = sanitizeCor($cfg_cor_muted,   '#94a3b8');
$cor_borda   = sanitizeCor($cfg_cor_borda,   '#1e293b');
$cor_borda_tab = sanitizeCor($cfg_cor_borda_tab, '#1e293b');
$cor_sucesso = sanitizeCor($cfg_cor_sucesso, '#10b981');
$cor_erro    = sanitizeCor($cfg_cor_erro,    '#ef4444');
$cor_aviso   = sanitizeCor($cfg_cor_aviso,   '#f59e0b');
$cor_info    = sanitizeCor($cfg_cor_info,    '#3b82f6');

// Cores fixas
$cor_pink    = '#ec4899';
$cor_purple  = '#a855f7';
$cor_orange  = '#fb923c';
$cor_waze    = '#33ccff';
$cor_maps    = '#4285F4';

// ─────────────────────────────────────────────────────────────────
// MAPEIA INTENSIDADE DE SOMBRA
// ─────────────────────────────────────────────────────────────────
$sombra_map = [
    'nenhuma' => 'none',
    'leve'    => '0 2px 6px rgba(0,0,0,.25)',
    'media'   => '0 4px 16px rgba(VAR_COR,.18)',
    'intensa' => '0 0 24px rgba(VAR_COR,.45)',
];

function hexParaRgb(string $hex): string {
    $hex = ltrim($hex, '#');
    if (strlen($hex) === 3) $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
    return implode(',', [hexdec(substr($hex,0,2)), hexdec(substr($hex,2,2)), hexdec(substr($hex,4,2))]);
}

$cor_pri_rgb = hexParaRgb($cor_pri);
$glow_shadow = str_replace('VAR_COR', $cor_pri_rgb, $sombra_map[$cfg_sombra]);
$glow_shadow_hover = str_replace('VAR_COR', $cor_pri_rgb, $sombra_map[$cfg_sombra === 'nenhuma' ? 'nenhuma' : ($cfg_sombra === 'leve' ? 'media' : 'intensa')]);
$borda_tab_css = "{$cfg_borda_tab_largura}px {$cfg_borda_tab_estilo} {$cor_borda_tab}";

// ─────────────────────────────────────────────────────────────────
// PRE-CALCULA CORES DOS CARDS
// ─────────────────────────────────────────────────────────────────
function adjustBrightness(string $hex, int $percent): string {
    $hex = ltrim($hex, '#');
    if (strlen($hex) === 3) $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
    $r = hexdec(substr($hex,0,2));
    $g = hexdec(substr($hex,2,2));
    $b = hexdec(substr($hex,4,2));
    $r = max(0, min(255, (int)($r + ($percent/100)*255)));
    $g = max(0, min(255, (int)($g + ($percent/100)*255)));
    $b = max(0, min(255, (int)($b + ($percent/100)*255)));
    return sprintf('#%02x%02x%02x', $r, $g, $b);
}

$cor_card  = $cor_card_cfg;
$cor_card2 = adjustBrightness($cor_card_cfg, 4);

// Hash para polling
$hashConfigs = md5(serialize($cfgs));

// Verificar se usuário tem veículo vinculado (para menu Frota)
$temVeiculo = false;
try {
    $stmtV = pdo()->prepare("SELECT COUNT(*) FROM frota_veiculos WHERE responsavel_id = ?");
    $stmtV->execute([$usuario['id']]);
    $temVeiculo = $stmtV->fetchColumn() > 0;
} catch (PDOException $e) {
    $temVeiculo = false;
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
<meta name="theme-color" content="<?php echo e($cor_bg); ?>"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<title><?php echo e($pageTitle ?? $cfg_empresa); ?></title>
<!-- Fontes dinâmicas -->
<link href="<?php echo e($_googleFontsUrl); ?>" rel="stylesheet"/>
<!-- CSS principal do sistema -->
<link rel="stylesheet" href="assets/style.css?v=<?php echo APP_VERSION; ?>"/>

<!-- ════ TEMA DINÂMICO ════ -->
<style id="tema-dinamico">
:root {
  --bg:      <?php echo $cor_bg; ?>;
  --surface: <?php echo $cor_sidebar; ?>;
  --cyan:    <?php echo $cor_pri; ?>;
  --cyan2:   <?php echo $cor_pri; ?>;
  --green:   <?php echo $cor_acent; ?>;
  --pink:    <?php echo $cor_pink; ?>;
  --purple:  <?php echo $cor_purple; ?>;
  --orange:  <?php echo $cor_orange; ?>;
  --waze:    <?php echo $cor_waze; ?>;
  --maps:    <?php echo $cor_maps; ?>;
  --card:    <?php echo $cor_card; ?>;
  --card2:   <?php echo $cor_card2; ?>;
  --ui:      '<?php echo e($cfg_fonte_pri); ?>', 'Exo 2', system-ui, sans-serif;
  --mono:    '<?php echo e($cfg_fonte_mono); ?>', 'Share Tech Mono', 'Courier New', monospace;
  --font-size-base: <?php echo $cfg_fonte_size; ?>px;
  --text:    <?php echo $cor_texto; ?>;
  --muted:   <?php echo $cor_muted; ?>;
  --border:  <?php echo $cor_borda; ?>;
  --border2: <?php echo $cor_borda; ?>;
  --red:     <?php echo $cor_erro; ?>;
  --amber:   <?php echo $cor_aviso; ?>;
  --success: <?php echo $cor_sucesso; ?>;
  --error:   <?php echo $cor_erro; ?>;
  --warning: <?php echo $cor_aviso; ?>;
  --info:    <?php echo $cor_info; ?>;
  --radius:  <?php echo $cfg_raio; ?>px;
  --radius-sm: <?php echo max(0, (int)($cfg_raio/2)); ?>px;
  --glow: <?php echo $glow_shadow; ?>;
  --glow-strong: <?php echo $glow_shadow_hover; ?>;
  --line-height-base: <?php echo $cfg_altura_linha; ?>;
  --letter-spacing-base: <?php echo $cfg_espacamento_letras; ?>px;
  --heading-size: <?php echo $cfg_tamanho_titulo; ?>px;
  --font-weight-base: <?php echo $cfg_peso_fonte; ?>;
}

body, input, select, textarea, button {
  font-family: var(--ui) !important;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

code, kbd, pre, samp, .badge, [class*="mono"], [style*="monospace"],
[style*="font-family:var(--mono)"], [style*="font-family: var(--mono)"] {
  font-family: var(--mono) !important;
}

h1, h2, h3, .page-title, .modal-title, .cfg-section-title, .form-section-title {
  font-size: var(--heading-size);
}

h4, h5, h6 { font-size: calc(var(--heading-size) * 0.8); }

.btn, .form-input, .form-select, .form-textarea, .cfg-section, .form-card,
.modal, .color-preview, .marcacao-card, .alert, .card, .stat-card,
.upload-zone, .upload-zone-sm, .font-card, .preview-swatch, .foto-card,
.cliente-badge-fixa, .geo-status {
  border-radius: var(--radius);
}

.size-btn, .opt-btn, .badge, .swatch-seg, input[type=color] {
  border-radius: var(--radius-sm);
}

.btn-primary, .btn-gps, .nav-item.active, .font-card.selected,
.size-btn.active, .opt-btn.active, .form-input:focus, .form-select:focus,
.marcacao-card.selecionada {
  box-shadow: var(--glow);
}

.btn-primary:hover, .btn-gps:hover {
  box-shadow: var(--glow-strong);
}

table, th, td, .tabela-preview, .tabela-preview th, .tabela-preview td {
  border: <?php echo $borda_tab_css; ?>;
}

.text-erro, .text-danger    { color: var(--error)   !important; }
.text-aviso, .text-warning  { color: var(--warning) !important; }
.text-info                  { color: var(--info)    !important; }
.text-sucesso               { color: var(--success) !important; }
.alert-danger  { border-color: var(--error)   !important; color: var(--error)   !important; }
.alert-success { border-color: var(--success) !important; color: var(--success) !important; }
.btn-primary  { background: <?php echo $cor_pri; ?>; color: #050e1a; }
.btn-primary:hover { background: <?php echo $cor_pri; ?>; opacity:.88; color: #050e1a; }
.text-green   { color: <?php echo $cor_acent; ?> !important; }
.badge-green  { background: <?php echo $cor_acent; ?>1a !important; color: <?php echo $cor_acent; ?> !important; border-color: <?php echo $cor_acent; ?>44 !important; }
.badge-green::before { background: <?php echo $cor_acent; ?> !important; }
.badge-red    { background: <?php echo $cor_erro; ?>1a !important; color: <?php echo $cor_erro; ?> !important; }
.badge-amber  { background: <?php echo $cor_aviso; ?>1a !important; color: <?php echo $cor_aviso; ?> !important; }
.badge-info   { background: <?php echo $cor_info; ?>1a !important; color: <?php echo $cor_info; ?> !important; }
.nav-item.active { color: <?php echo $cor_pri; ?> !important; border-left-color: <?php echo $cor_pri; ?> !important; background: <?php echo $cor_pri; ?>12 !important; }
.bn-item.active  { color: <?php echo $cor_pri; ?> !important; border-top-color: <?php echo $cor_pri; ?> !important; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: <?php echo $cor_pri; ?> !important; }
.btn-success { background: <?php echo $cor_acent; ?> !important; color: #050e1a !important; }
.btn-danger  { background: <?php echo $cor_erro; ?> !important; color: #fff !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* ══ MODAL GLOBAL ══ */
.modal-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(0,0,0,.82) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-overlay.open {
  display: flex !important;
}

.modal-overlay .modal {
  width: 100% !important;
  max-width: 500px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

.modal-overlay .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  background: var(--card) !important;
  z-index: 1 !important;
}

.modal-overlay .modal-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.modal-overlay .modal-close {
  background: none !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.modal-overlay .modal-close:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}

.modal-overlay .modal-body {
  padding: 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
}

.modal-overlay .modal-footer {
  padding: 14px 18px !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

@media (max-width: 767px) {
  .modal-overlay {
    align-items: flex-end !important;
  }
  .modal-overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
  }
}
</style>

<!-- ═══ POLLING DE CONFIGURAÇÕES EM TEMPO REAL ═══ -->
<script>
(function() {
    var hashAtual = '<?php echo $hashConfigs; ?>';
    var verificando = false;
    
    function verificarMudancas() {
        if (verificando) return;
        verificando = true;
        
        fetch('ajax/config_check.php?hash=' + encodeURIComponent(hashAtual), {
            cache: 'no-store'
        })
        .then(function(resp) { return resp.json(); })
        .then(function(data) {
            if (data.changed) {
                console.log('⚡ Configurações alteradas! Atualizando tema...');
                hashAtual = data.hash;
                
                var root = document.documentElement;
                var configs = data.configs;
                
                var mapa = {
                    'cor_fundo':              '--bg',
                    'cor_sidebar':            '--surface',
                    'cor_primaria':           '--cyan',
                    'cor_acento':             '--green',
                    'cor_card':               '--card',
                    'cor_texto':              '--text',
                    'cor_texto_secundario':   '--muted',
                    'cor_borda':              '--border',
                    'cor_erro':               '--red',
                    'cor_aviso':              '--amber',
                    'cor_sucesso':            '--success',
                    'cor_info':               '--info',
                    'bordas_arredondadas':    '--radius',
                    'fonte_principal':        '--ui',
                    'fonte_mono':             '--mono',
                    'tamanho_fonte_base':     '--font-size-base',
                    'peso_fonte':             '--font-weight-base',
                    'altura_linha':           '--line-height-base',
                    'espacamento_letras':     '--letter-spacing-base',
                    'tamanho_titulo':         '--heading-size',
                };
                
                for (var chave in configs) {
                    if (!mapa[chave]) continue;
                    var val = configs[chave];
                    if (chave === 'fonte_principal') val = "'" + val + "', 'Exo 2', system-ui, sans-serif";
                    if (chave === 'fonte_mono')      val = "'" + val + "', 'Share Tech Mono', monospace";
                    if (chave === 'bordas_arredondadas')  val = val + 'px';
                    if (chave === 'tamanho_fonte_base')   val = val + 'px';
                    if (chave === 'espacamento_letras')   val = val + 'px';
                    if (chave === 'tamanho_titulo')       val = val + 'px';
                    root.style.setProperty(mapa[chave], val);
                    if (chave === 'cor_primaria') root.style.setProperty('--cyan2', val);
                    if (chave === 'cor_borda')    root.style.setProperty('--border2', val);
                    if (chave === 'tamanho_fonte_base') document.body.style.fontSize = val;
                }
                
                document.body.style.display = 'none';
                document.body.offsetHeight;
                document.body.style.display = '';
            }
        })
        .catch(function(e) {
            // Silencia erros de rede
        })
        .finally(function() {
            verificando = false;
        });
    }
    
    setInterval(verificarMudancas, 5000);
    setTimeout(verificarMudancas, 3000);
})();
</script>

</head>
<body>
<div class="shell">

<!-- DRAWER OVERLAY (mobile) -->
<div class="drawer-overlay" id="drawer-overlay" onclick="fecharDrawer()"></div>

<!-- ══════════ SIDEBAR ══════════ -->
<aside class="sidebar" id="sidebar">
  <div class="logo">
    <?php if ($cfg_logo && file_exists(__DIR__ . '/../' . ltrim($cfg_logo,'/'))): ?>
      <img src="<?php echo e($cfg_logo); ?>" alt="<?php echo e($cfg_empresa); ?>"
           style="max-height:44px;max-width:160px;object-fit:contain;margin-bottom:6px"/>
    <?php else: ?>
      <div class="logo-tag">◈ TELECOM</div>
      <div class="logo-name" style="color:<?php echo $cor_pri; ?>"><?php echo e($cfg_empresa); ?></div>
      <div class="logo-sub">Sistema de Gestão v<?php echo APP_VERSION; ?></div>
    <?php endif; ?>
  </div>
  <nav class="nav">
    <div class="nav-section">PRINCIPAL</div>
    <a href="dashboard.php"      class="nav-item <?php echo $pageActive==='dashboard'     ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">⬡</span>Dashboard</a>
    <a href="clientes.php"       class="nav-item <?php echo $pageActive==='clientes'      ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">◎</span>Clientes</a>
    <a href="ordens.php"         class="nav-item <?php echo $pageActive==='ordens'        ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">◈</span>Ordens de Serviço</a>
    <a href="mapa.php"           class="nav-item <?php echo $pageActive==='mapa'          ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">◉</span>Mapa / OLTs</a>
    
    <?php if ($usuario['perfil']==='ADMIN'): ?>
    <a href="config_projeto.php" class="nav-item <?php echo $pageActive==='config_projeto'?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">▲</span>Projeto KML</a>
    <?php endif; ?>
    
    <div class="nav-section">OPERAÇÕES</div>
    <a href="materiais.php"      class="nav-item <?php echo $pageActive==='materiais'     ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">▣</span>Estoque</a>
    
    <!-- ═══ MÓDULO FROTA ═══ -->
    <?php if ($usuario['perfil']==='ADMIN' || $temVeiculo): ?>
    <a href="frota.php"          class="nav-item <?php echo $pageActive==='frota'         ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">🚛</span>Frota</a>
    <?php endif; ?>
    
    <?php if ($usuario['perfil']==='ADMIN'): ?>
    <a href="supervisores.php"   class="nav-item <?php echo $pageActive==='supervisores'  ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">👥</span>Supervisores</a>
    <a href="usuarios.php"       class="nav-item <?php echo $pageActive==='usuarios'      ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">◫</span>Usuários</a>
    <a href="configuracoes.php"  class="nav-item <?php echo $pageActive==='configuracoes' ?'active':''; ?>" onclick="fecharDrawer()"><span class="nav-icon">⚙</span>Configurações</a>
    <?php endif; ?>
  </nav>
  <div class="sidebar-bottom">
    <!-- ── Sino de notificações ── -->
    <div style="position:relative;margin-bottom:10px">
      <button id="notif-btn" onclick="toggleNotifDropdown()"
              style="width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;
                     background:none;border:1px solid var(--border);border-radius:8px;
                     color:var(--text);cursor:pointer;transition:.15s;font-family:var(--ui)"
              onmouseover="this.style.borderColor='var(--border2)'"
              onmouseout="this.style.borderColor='var(--border)'">
        <span style="font-size:18px">🔔</span>
        <span style="flex:1;font-size:12px;text-align:left">Notificações</span>
        <span id="notif-badge"
              style="display:none;background:var(--red);color:#fff;border-radius:10px;
                     font-size:10px;font-weight:800;font-family:var(--mono);
                     padding:1px 7px;min-width:18px;text-align:center">0</span>
      </button>

      <div id="notif-dropdown"
           style="display:none;position:absolute;bottom:calc(100% + 6px);left:0;right:0;
                  background:var(--surface);border:1px solid var(--border);border-radius:10px;
                  box-shadow:0 -8px 32px rgba(0,0,0,.5);z-index:600;overflow:hidden;max-height:360px">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)">
          <div style="font-size:11px;font-weight:700;font-family:var(--mono);color:var(--cyan);letter-spacing:1px">NOTIFICAÇÕES</div>
          <button onclick="marcarTodasLidas()" style="background:none;border:none;font-size:10px;color:var(--muted);cursor:pointer;font-family:var(--ui)">
            ✓ Marcar todas como lidas
          </button>
        </div>
        <div id="notif-lista" style="overflow-y:auto;max-height:280px"></div>
      </div>
    </div>

    <div class="user-badge">
      <div class="user-av" style="background:linear-gradient(135deg,<?php echo $cor_pri; ?>,<?php echo $cor_acent; ?>)">
        <?php echo strtoupper(substr($usuario['nome'],0,2)); ?>
      </div>
      <div>
        <div class="user-name"><?php echo e($usuario['nome']); ?></div>
        <div class="user-role"><?php echo e($usuario['perfil']); ?></div>
      </div>
    </div>
    <a href="logout.php" class="btn btn-ghost btn-sm" style="width:100%;margin-top:10px;text-align:center;justify-content:center;">Sair</a>
  </div>
</aside>

<!-- BOTTOM NAV (mobile) -->
<nav class="bottom-nav" id="bottom-nav">
  <div class="bottom-nav-inner">
    <a href="dashboard.php"  class="bn-item <?php echo $pageActive==='dashboard'?'active':''; ?>"><span class="bn-icon">⬡</span><span class="bn-label">Início</span></a>
    <a href="ordens.php"     class="bn-item <?php echo $pageActive==='ordens'   ?'active':''; ?>"><span class="bn-icon">◈</span><span class="bn-label">OS</span></a>
    <a href="clientes.php"   class="bn-item <?php echo $pageActive==='clientes' ?'active':''; ?>"><span class="bn-icon">◎</span><span class="bn-label">Clientes</span></a>
    <?php if ($usuario['perfil']==='ADMIN' || $temVeiculo): ?>
    <a href="frota.php"      class="bn-item <?php echo $pageActive==='frota'    ?'active':''; ?>"><span class="bn-icon">🚛</span><span class="bn-label">Frota</span></a>
    <?php else: ?>
    <a href="mapa.php"       class="bn-item <?php echo $pageActive==='mapa'     ?'active':''; ?>"><span class="bn-icon">◉</span><span class="bn-label">Mapa</span></a>
    <?php endif; ?>
    <a href="mapa.php"       class="bn-item <?php echo $pageActive==='mapa'     ?'active':''; ?>"><span class="bn-icon">◉</span><span class="bn-label">Mapa</span></a>
  </div>
</nav>

<!-- MAIN -->
<main class="main">

<script>
// ══════════════════════════════════════════════════
//  FUNÇÕES GLOBAIS (DRAWER + MODAL + NOTIFICAÇÕES)
// ══════════════════════════════════════════════════

function abrirDrawer() {
    document.getElementById('sidebar').classList.add('open');
    document.getElementById('drawer-overlay').classList.add('open');
    document.body.style.overflow = 'hidden';
}

function fecharDrawer() {
    document.getElementById('sidebar').classList.remove('open');
    document.getElementById('drawer-overlay').classList.remove('open');
    document.body.style.overflow = '';
}

// ── Modal global ──
function abrirModal(id) {
    var el = document.getElementById(id);
    if (!el) return;
    if (el.parentElement !== document.body) document.body.appendChild(el);
    el.classList.add('open');
    document.body.style.overflow = 'hidden';
}

function fecharModal(id) {
    var el = document.getElementById(id);
    if (!el) return;
    el.classList.remove('open');
    if (!document.querySelector('.modal-overlay.open')) {
        document.body.style.overflow = '';
    }
}

// Escape fecha modal/drawer
document.addEventListener('keydown', function(e) {
    if (e.key !== 'Escape') return;
    var openModal = document.querySelector('.modal-overlay.open');
    if (openModal) { fecharModal(openModal.id); return; }
    fecharDrawer();
});

// Swipe mobile para drawer
var _sx = 0;
document.addEventListener('touchstart', function(e) { _sx = e.touches[0].clientX; }, {passive: true});
document.addEventListener('touchend', function(e) {
    var dx = e.changedTouches[0].clientX - _sx;
    if (_sx < 30 && dx > 60) abrirDrawer();
    if (dx < -60 && document.getElementById('sidebar').classList.contains('open')) fecharDrawer();
}, {passive: true});

// ══════════════════════════════════════════════════
//  SISTEMA DE NOTIFICAÇÕES
// ══════════════════════════════════════════════════
var _notifOpen = false;

function toggleNotifDropdown() {
    _notifOpen = !_notifOpen;
    var dd = document.getElementById('notif-dropdown');
    dd.style.display = _notifOpen ? 'block' : 'none';
    if (_notifOpen) carregarNotificacoes();
}

document.addEventListener('click', function(e) {
    if (_notifOpen && !document.getElementById('notif-btn').contains(e.target) &&
        !document.getElementById('notif-dropdown').contains(e.target)) {
        _notifOpen = false;
        document.getElementById('notif-dropdown').style.display = 'none';
    }
});

function carregarNotificacoes() {
    var lista = document.getElementById('notif-lista');
    lista.innerHTML = '<div style="padding:20px;text-align:center;color:var(--muted);font-size:12px">Carregando...</div>';
    
    fetch('ajax/notificacoes.php?tipo=lista')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            atualizarBadge(data.total);
            if (!data.notifs || data.notifs.length === 0) {
                lista.innerHTML = '<div style="padding:24px;text-align:center;color:var(--muted);font-size:12px">✓ Nenhuma notificação pendente</div>';
                return;
            }
            lista.innerHTML = '';
            data.notifs.forEach(function(n) {
                var item = document.createElement('div');
                item.id = 'nit-' + n.id;
                item.style.cssText = 'display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(30,51,86,.4);cursor:pointer;transition:.12s;border-left:3px solid ' + n.cor;
                item.onmouseover = function() { item.style.background = 'rgba(0,0,0,.15)'; };
                item.onmouseout  = function() { item.style.background = ''; };
                item.innerHTML = '<div style="font-size:18px;flex-shrink:0;margin-top:1px">' + n.icone + '</div>' +
                    '<div style="flex:1;min-width:0">' +
                    '<div style="font-size:12px;font-weight:700;color:' + n.cor + '">' + escH(n.titulo) + '</div>' +
                    (n.mensagem ? '<div style="font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4">' + escH(n.mensagem) + '</div>' : '') +
                    '<div style="font-size:10px;color:var(--muted);font-family:monospace;margin-top:4px">' + n.tempo + '</div></div>' +
                    '<button onclick="event.stopPropagation();marcarLida(' + n.id + ')" style="background:none;border:none;font-size:14px;color:var(--muted);cursor:pointer;flex-shrink:0;padding:2px 4px" title="Marcar como lida">✕</button>';
                if (n.link) item.onclick = function() { marcarLida(n.id); window.location.href = n.link; };
                lista.appendChild(item);
            });
        })
        .catch(function(e) {
            lista.innerHTML = '<div style="padding:16px;color:var(--red);font-size:11px">Erro: ' + e + '</div>';
        });
}

function marcarLida(id) {
    var el = document.getElementById('nit-' + id);
    if (el) { el.style.opacity = '0'; el.style.transition = '.3s'; setTimeout(function() { el.remove(); }, 300); }
    fetch('ajax/notificacoes.php?tipo=marcar&id=' + id);
    atualizarBadge();
}

function marcarTodasLidas() {
    document.getElementById('notif-lista').innerHTML = '<div style="padding:24px;text-align:center;color:var(--muted);font-size:12px">✓ Todas marcadas como lidas</div>';
    atualizarBadge(0);
    fetch('ajax/notificacoes.php?tipo=marcar_todas');
}

function atualizarBadge(total) {
    if (total === undefined || total === null) {
        fetch('ajax/notificacoes.php?tipo=resumo')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                _atualizarBadgeDOM(data.total || 0);
            })
            .catch(function() {});
        return;
    }
    _atualizarBadgeDOM(total);
}

function _atualizarBadgeDOM(total) {
    var badge = document.getElementById('notif-badge');
    if (!badge) return;
    if (total > 0) {
        badge.style.display = '';
        badge.textContent = total > 99 ? '99+' : total;
    } else {
        badge.style.display = 'none';
    }
}

function escH(s) {
    return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// Carrega badge ao iniciar
atualizarBadge();
setInterval(atualizarBadge, 60000);
</script>