<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
    <title>{% block title %}{% endblock %} - Controles OCI</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css?v=1" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Componentes CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}?v={{ range(1, 10000) | random }}">
    
    <style>
        :root {
            --primary-color: #dc3545;
            --primary-light: #e35d6a;
            --secondary-color: #6c757d;
            --secondary-light: #868e96;
            --success-color: #198754;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --info-color: #0dcaf0;
            --background-gradient: linear-gradient(135deg, var(--primary-color) 40%, white 100%);
            --navbar-stripe: 4px solid var(--primary-color);
            
            /* Adicionando variáveis para os botões */
            --bs-success: #198754;
            --bs-success-dark: #157347;
            --bs-secondary: #6c757d;
            --bs-secondary-dark: #565e64;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }

        .navbar {
            background: #343a40 !important;
            padding: 0.5rem 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-bottom: var(--navbar-stripe);
        }

        .navbar > .container-fluid {
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-brand {
            flex: 0 0 auto;
            margin-right: 2rem;
            font-weight: 500;
            color: #fff !important;
            display: flex;
            align-items: center;
            white-space: nowrap;
            font-size: 1.2rem;
        }

        .navbar-brand img {
            height: 35px;
            margin-right: 0.75rem;
        }

        #navbarNav {
            display: flex;
            justify-content: center;
            flex: 1;
        }

        .navbar-nav.mx-auto {
            margin: 0 auto;
        }

        .navbar-nav:last-child {
            flex: 0 0 auto;
            margin-left: 2rem;
        }

        .nav-link {
            color: rgba(255,255,255,0.85) !important;
            transition: all 0.2s ease;
            padding: 0.75rem 1rem;
            white-space: nowrap;
            font-size: 0.95rem;
            font-weight: 400;
            letter-spacing: 0.3px;
        }

        .nav-link:hover {
            color: #fff !important;
            background-color: var(--primary-color);
            border-radius: 4px;
        }

        .nav-link i {
            font-size: 0.9rem;
            opacity: 0.9;
            margin-right: 0.5rem;
        }

        .dropdown-menu {
            background-color: #343a40;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            padding: 0.5rem;
            margin-top: 0.5rem;
            border-radius: 8px;
            min-width: 200px;
        }

        .dropdown-item {
            color: rgba(255,255,255,0.85) !important;
            font-size: 0.9rem;
            font-weight: 400;
            padding: 0.6rem 1rem;
            transition: all 0.2s ease;
            border-radius: 6px;
        }

        .dropdown-item:hover {
            background-color: var(--primary-color);
            color: #fff !important;
            transform: translateX(3px);
        }

        .dropdown-item i {
            margin-right: 0.75rem;
            width: 1.25rem;
            text-align: center;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .dropdown-divider {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin: 0.5rem 0;
        }

        /* Estilo para o menu mobile */
        @media (max-width: 768px) {
            .navbar-collapse {
                background-color: #343a40;
                padding: 1rem;
                border-radius: 0 0 10px 10px;
                margin-top: 0.5rem;
            }
            
            .navbar-brand img {
                height: 30px;
            }

            .dropdown-menu {
                background-color: rgba(0,0,0,0.2);
                margin-left: 1rem;
                min-width: auto;
            }

            .nav-link {
                padding: 0.5rem 1rem;
            }

            .navbar-nav {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .container {
            max-width: 1320px !important;
            margin: 0 auto !important;
        }

        @media (max-width: 1400px) {
            .container {
                max-width: 1140px !important;
            }
        }

        @media (max-width: 1200px) {
            .container {
                max-width: 960px !important;
            }
            .page-wrapper {
                padding: 1.5rem 0.75rem;
            }
        }

        @media (max-width: 992px) {
            .container {
                max-width: 720px !important;
            }
        }

        @media (max-width: 768px) {
            .container {
                max-width: 540px !important;
            }
            .page-wrapper {
                padding: 1rem 0.5rem;
            }
        }

        @media (max-width: 576px) {
            .page-wrapper {
                padding: 0.75rem 0.25rem;
            }
        }

        /* Cards da Dashboard */
        .card {
            border: none;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            height: 100%;
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            padding: 1rem;
        }

        .card-header .card-title {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .card-header h5 {
            margin: 0;
            display: flex;
            align-items: center;
            font-size: 1.1rem;
        }

        .card-header h5 i {
            margin-right: 0.75rem;
            color: var(--primary-color);
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-footer {
            background: none;
            border-top: 1px solid rgba(0,0,0,0.05);
            padding: 1rem 1.5rem;
        }

        /* Estatísticas da Dashboard */
        .stats-card {
            position: relative;
            padding: 1.5rem;
            border-radius: 0.5rem;
            color: white;
            box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            overflow: hidden;
            min-height: 140px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .stats-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        }

        .stats-card.blue {
            background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
        }

        .stats-card.green {
            background: linear-gradient(45deg, #1cc88a, #13855c);
        }

        .stats-card.cyan {
            background: linear-gradient(45deg, #36b9cc, #258391);
        }

        .stats-card.yellow {
            background: linear-gradient(45deg, #f6c23e, #dda20a);
        }

        .stats-card .title {
            font-size: 0.9rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
            color: rgba(255,255,255,0.8);
        }

        .stats-card .value {
            font-size: 2rem;
            font-weight: bold;
            margin: 0.5rem 0;
            color: white;
        }

        .stats-card .link {
            color: white;
            text-decoration: none;
            font-size: 0.9rem;
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }

        .stats-card .link:hover {
            opacity: 1;
        }

        .stats-card .icon {
            position: absolute;
            right: 1rem;
            bottom: 1rem;
            font-size: 4rem;
            opacity: 0.2;
            color: white;
        }

        /* Tabelas e Listas */
        .table {
            margin-bottom: 0;
        }

        .table th {
            border-top: none;
            font-weight: 600;
            padding: 1rem;
            background-color: #f8f9fa;
        }

        .table td {
            padding: 1rem;
            vertical-align: middle;
        }

        .table-hover tbody tr:hover {
            background-color: #f8f9fa;
        }

        .list-group-item {
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 1rem 1.5rem;
            transition: background-color 0.2s ease;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .list-group-item:hover {
            background-color: #f8f9fa;
        }

        .list-group-item:last-child {
            border-bottom: none;
        }

        .militante-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .militante-info h6 {
            margin: 0;
            color: #333;
            font-weight: 500;
        }

        .militante-info small {
            color: var(--secondary-color);
            margin-top: 0.25rem;
        }

        /* Botões e Alertas */
        .alert {
            border-radius: 0.5rem;
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
        }

        .btn {
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            font-weight: 500;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
        }

        .btn-danger {
            background-color: var(--danger-color);
            border-color: var(--danger-color);
        }

        .btn-secondary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        /* Badges e Labels */
        .badge {
            padding: 0.5em 0.75em;
            font-weight: 500;
            border-radius: 0.375rem;
        }

        .text-muted {
            color: var(--secondary-color) !important;
        }

        .modal-content {
            border: none;
            border-radius: 0.5rem;
        }

        .modal-header {
            border-bottom: 1px solid #e9ecef;
            padding: 1rem;
        }

        .modal-footer {
            border-top: 1px solid #e9ecef;
            padding: 1rem;
        }

        /* Login page specific */
        .login-page {
            background: var(--background-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
            width: 100%;
            max-width: 400px;
        }

        .login-logo {
            height: 60px;
            width: auto;
            margin-bottom: 1rem;
        }

        .login-title {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .login-subtitle {
            color: var(--secondary-color);
            font-size: 0.9rem;
            margin-bottom: 2rem;
        }

        .welcome-header {
            margin-bottom: 2rem;
        }

        @media (max-width: 768px) {
            .stats-card {
                margin-bottom: 1rem;
            }
        }

        .page-wrapper {
            padding: 2rem 1rem;
            min-height: calc(100vh - 70px);
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    {% block navbar %}
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('home') }}">
                <img src="{{ url_for('static', filename='img/logo002-alpha.png') }}" alt="Logo OCI">
                Controles OCI
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            {% if session.get('user_id') %}
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" data-bs-toggle="dropdown">
                            <i class="fas fa-users me-1"></i>Militantes
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_militantes') }}">
                                    <i class="fas fa-list"></i>Listar Militantes
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" data-bs-toggle="dropdown">
                            <i class="fas fa-dollar-sign me-1"></i>Financeiro
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_cotas') }}">
                                    <i class="fas fa-money-bill-wave"></i>Cotas
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_pagamentos') }}">
                                    <i class="fas fa-receipt"></i>Pagamentos
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" data-bs-toggle="dropdown">
                            <i class="fas fa-box me-1"></i>Materiais
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_materiais') }}">
                                    <i class="fas fa-box"></i>Listar Materiais
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_vendas_jornal') }}">
                                    <i class="fas fa-newspaper"></i>Vendas de Jornais
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_assinaturas') }}">
                                    <i class="fas fa-file-signature"></i>Assinaturas
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" data-bs-toggle="dropdown">
                            <i class="fas fa-chart-bar me-1"></i>Relatórios
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_relatorios_cotas') }}">
                                    <i class="fas fa-file-invoice-dollar"></i>Relatórios de Cotas
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('listar_relatorios_vendas') }}">
                                    <i class="fas fa-file-alt"></i>Relatórios de Vendas
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" data-bs-toggle="dropdown">
                            <i class="fas fa-user me-1"></i>{{ session.get('username', 'Usuário') }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            {% if session.get('is_admin') %}
                            <li>
                                <a class="dropdown-item" href="{{ url_for('novo_usuario') }}">
                                    <i class="fas fa-user-plus"></i>Novo Usuário
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('admin.dashboard') }}">
                                    <i class="fas fa-cog fa fa-cog fa-solid fa-cog" style="display: inline-block !important; visibility: visible !important;"></i>Administração
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            {% endif %}
                            <li>
                                <a class="dropdown-item" href="{{ url_for('logout') }}">
                                    <i class="fas fa-sign-out-alt"></i>Sair
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            {% endif %}
        </div>
    </nav>
    {% endblock %}

    <div class="page-wrapper">
        <div class="container py-4">
            {% block content %}{% endblock %}
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>