<?php
// Layout base do ERP - ActSafe
// Requer: $usuario (array com dados do usuário logado), $pagina_titulo
$perfil_labels = [
    'admin'          => ['label' => 'Administrador', 'cor' => 'bg-red-500'],
    'diretor_geral'  => ['label' => 'Diretor Geral',  'cor' => 'bg-purple-500'],
    'gestor_unidade' => ['label' => 'Gestor de Unidade', 'cor' => 'bg-blue-500'],
    'tecnico'        => ['label' => 'Técnico',        'cor' => 'bg-green-500'],
];
$perfil_info = $perfil_labels[$usuario['perfil']] ?? ['label' => 'Usuário', 'cor' => 'bg-gray-500'];
$iniciais = strtoupper(implode('', array_map(fn($p) => $p[0], array_slice(explode(' ', $usuario['nome']), 0, 2))));
$pagina_atual = basename($_SERVER['PHP_SELF']);

$menu = [
    ['icon' => 'gauge',           'label' => 'Dashboard',         'href' => 'dashboard.php',         'cor' => 'text-white'],
    ['icon' => 'building-2',      'label' => 'Unidades Fabris',   'href' => 'unidades.php',           'cor' => 'text-white'],
    ['icon' => 'zap',             'label' => 'NR 10 — Elétrica',  'href' => 'nr10.php',               'cor' => 'text-yellow-300'],
    ['icon' => 'cog',             'label' => 'NR 12 — Máquinas',  'href' => 'nr12.php',               'cor' => 'text-orange-300'],
    ['icon' => 'cloud-lightning', 'label' => 'SPDA',              'href' => 'spda.php',               'cor' => 'text-blue-200'],
    ['icon' => 'file-text',       'label' => 'Documentos',        'href' => 'documentos.php',         'cor' => 'text-white'],
    ['icon' => 'alert-triangle',  'label' => 'Não Conformidades', 'href' => 'nao_conformidades.php',  'cor' => 'text-red-300'],
    ['icon' => 'smartphone',       'label' => 'Inspeções Mobile',  'href' => 'inspecoes.php',          'cor' => 'text-green-300'],
    ['icon' => 'settings',        'label' => 'Configurações',     'href' => 'configuracoes.php',      'cor' => 'text-white'],
];
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= sanitizar($pagina_titulo ?? 'ERP - ActSafe') ?> | ERP - ActSafe</title>
  <link rel="manifest" href="../manifest.json">
  <meta name="theme-color" content="#0F4C81">
  <!-- Tailwind CSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'actsafe-blue':   '#0F4C81',
            'actsafe-dark':   '#0a3560',
            'actsafe-orange': '#F26419',
            'actsafe-green':  '#2ECC71',
            'actsafe-red':    '#E74C3C',
            'actsafe-yellow': '#F1C40F',
            'actsafe-bg':     '#F4F6F9',
            'actsafe-text':   '#2C3E50',
          }
        }
      }
    }
  </script>
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
  <style>
    body { font-family: 'Inter', system-ui, sans-serif; background: #F4F6F9; }
    .sidebar { width: 260px; min-height: 100vh; background: #0F4C81; flex-shrink: 0; transition: transform 0.3s ease; }
    .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s; color: #bfdbfe; font-size: 14px; text-decoration: none; }
    .sidebar-item:hover { background: rgba(255,255,255,0.1); color: white; }
    .sidebar-item.active { background: rgba(255,255,255,0.2); color: white; font-weight: 600; border-left: 4px solid #F26419; }
    .sidebar-item.active i { color: #F26419; }
    .badge-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; border: 1px solid; }
    .badge-pendente    { background: #fef9c3; color: #854d0e; border-color: #fde047; }
    .badge-em_andamento{ background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
    .badge-concluida   { background: #dcfce7; color: #166534; border-color: #86efac; }
    .badge-atrasada    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
    .badge-aberta      { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
    .badge-encerrada   { background: #dcfce7; color: #166534; border-color: #86efac; }
    .card { background: white; border-radius: 12px; border: 1px solid #e5e7eb; padding: 20px; }
    .btn-primary   { background: #0F4C81; color: white; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: none; transition: background 0.15s; text-decoration: none; }
    .btn-primary:hover { background: #0a3560; }
    .btn-danger    { background: #E74C3C; color: white; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: none; transition: background 0.15s; text-decoration: none; }
    .btn-danger:hover  { background: #c0392b; }
    .btn-outline   { background: transparent; color: #0F4C81; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid #0F4C81; transition: all 0.15s; text-decoration: none; }
    .btn-outline:hover { background: #0F4C81; color: white; }
    .form-input    { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.15s; }
    .form-input:focus { border-color: #0F4C81; box-shadow: 0 0 0 3px rgba(15,76,129,0.1); }
    .form-label    { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 4px; }
    .table-row:hover { background: #f9fafb; }
    /* Mobile */
    @media (max-width: 768px) {
      .sidebar { position: fixed; top: 0; left: 0; z-index: 50; transform: translateX(-100%); }
      .sidebar.open { transform: translateX(0); }
      .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; }
      .overlay.open { display: block; }
      .main-content { margin-left: 0 !important; }
    }
    /* Network banner */
    #network-banner { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 100; text-align: center; padding: 8px 16px; font-size: 13px; font-weight: 500; }
    #network-banner.offline { display: block; background: #dc2626; color: white; }
    #network-banner.online-restored { display: block; background: #16a34a; color: white; }
  </style>
</head>
<body class="bg-actsafe-bg">

<!-- Banner de Status de Rede -->
<div id="network-banner">
  <span id="network-msg"></span>
</div>

<!-- Overlay Mobile -->
<div class="overlay" id="overlay" onclick="fecharMenu()"></div>

<div class="flex min-h-screen">
  <!-- SIDEBAR -->
  <aside class="sidebar flex flex-col" id="sidebar">
    <!-- Logo -->
    <div class="px-4 py-5 border-b border-white/10">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center flex-shrink-0">
          <i data-lucide="shield-check" class="w-6 h-6 text-white"></i>
        </div>
        <div>
          <p class="text-white font-bold text-base leading-tight">ERP - ActSafe</p>
          <p class="text-blue-200 text-xs">Conformidade Normativa</p>
        </div>
      </div>
    </div>

    <!-- Menu -->
    <nav class="flex-1 px-2 py-3 space-y-0.5 overflow-y-auto">
      <?php foreach ($menu as $item):
        $ativo = ($pagina_atual === $item['href']) ? 'active' : '';
      ?>
      <a href="<?= $item['href'] ?>" class="sidebar-item <?= $ativo ?>">
        <i data-lucide="<?= $item['icon'] ?>" class="w-5 h-5 flex-shrink-0 <?= $item['cor'] ?>"></i>
        <span><?= $item['label'] ?></span>
      </a>
      <?php endforeach; ?>
    </nav>

    <!-- Footer do Sidebar (Usuário) -->
    <div class="px-3 py-3 border-t border-white/10">
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-actsafe-orange flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
          <?= $iniciais ?>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-white text-sm font-medium truncate"><?= sanitizar($usuario['nome']) ?></p>
          <span class="inline-block text-white text-[10px] px-1.5 py-0.5 rounded-full <?= $perfil_info['cor'] ?>">
            <?= $perfil_info['label'] ?>
          </span>
        </div>
        <a href="logout.php" title="Sair" class="text-blue-200 hover:text-white transition-colors">
          <i data-lucide="log-out" class="w-4 h-4"></i>
        </a>
      </div>
    </div>
  </aside>

  <!-- MAIN CONTENT -->
  <div class="flex-1 flex flex-col min-w-0 main-content">
    <!-- TOP BAR -->
    <header class="bg-white border-b border-gray-200 px-4 py-3 flex items-center gap-3 sticky top-0 z-10 shadow-sm">
      <!-- Botão hambúrguer mobile -->
      <button onclick="abrirMenu()" class="text-gray-500 hover:text-actsafe-blue md:hidden">
        <i data-lucide="menu" class="w-6 h-6"></i>
      </button>
      <div class="flex-1"></div>
      <span class="text-xs text-gray-500 hidden sm:block">
        <?= date('l, d \d\e F \d\e Y', time()) ?>
      </span>
      <div class="flex items-center gap-1.5 bg-actsafe-blue/10 text-actsafe-blue px-3 py-1.5 rounded-lg text-xs font-semibold">
        <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
        ERP - ActSafe
      </div>
    </header>

    <!-- PAGE CONTENT -->
    <main class="flex-1 p-4 md:p-6 overflow-auto">
