<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ lab_name }} Management{% endblock %}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
        rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Nunito', sans-serif;
        }

        :root {
            /* Original Darker Palette */
            --primary: #8B4513;
            /* SaddleBrown */
            --primary-light: #A0522D;
            /* Sienna */
            --primary-dark: #654321;
            /* Dark Brown */

            --secondary: #D2691E;
            /* Chocolate */
            --accent: #CD853F;
            /* Peru */

            /* Action Colors */
            --success: #558B2F;
            /* Dark Green */
            --success-light: #C8E6C9;
            /* Light Green for buttons */
            --success-text: #2E7D32;

            --error: #C62828;
            /* Dark Red */
            --warning: #F57C00;
            /* Dark Orange */

            --info-light: #B3E5FC;
            --info-text: #0277BD;

            /* Lighter Button Variants */
            --btn-secondary-light: #E8DDD3;
            --btn-secondary-text: #6D5D4B;

            --warning-light: #FFE0B2;
            --warning-text: #EF6C00;

            /* Base Colors */
            --bg-light: #FFF8DC;
            /* Cornsilk */
            --bg-white: #FFFFFF;
            --border: #D7CCC8;
            /* Light border */
            --text-dark: #3E2723;
            /* Very dark brown */
            --text-light: #6D4C41;
            /* Medium brown */
        }

        /* ... existing body styles ... */

        /* Updated lighter button styles */
        .btn-secondary-light {
            background-color: var(--btn-secondary-light);
            color: var(--btn-secondary-text);
        }

        .btn-secondary-light:hover {
            background-color: #BCAAA4;
        }

        /* Gantt Chart Custom Colors for Lighter Look */
        .gantt-pending {
            background-color: var(--warning-light);
            color: var(--warning-text);
        }

        .gantt-in-progress {
            background-color: var(--info-light);
            color: var(--info-text);
        }

        .gantt-completed {
            background-color: var(--success-light);
            color: var(--success-text);
        }

        .previous-due-date {
            font-size: 0.8rem;
            color: var(--error);
            margin-left: 0.5rem;
            text-decoration: line-through;
            opacity: 0.7;
        }

        body {
            font-family: 'Nunito', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.6;
        }

        .navbar {
            background-color: var(--primary-dark);
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            border-radius: 0;
        }

        .navbar-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }

        .navbar-menu {
            display: flex;
            gap: 1.5rem;
            list-style: none;
        }

        .navbar-menu a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .navbar-menu a:hover {
            background-color: var(--primary-dark);
        }

        .container {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .card {
            background-color: var(--bg-white);
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            border: 1px solid var(--border);
        }

        .card-header {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--accent);
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1rem;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            line-height: 1.5;
            vertical-align: middle;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

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

        .btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
        }

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

        .btn-secondary:hover {
            background-color: var(--primary-light);
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
        }

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

        .btn-danger:hover {
            background-color: #D32F2F;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 1rem;
            background-color: var(--bg-white);
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.15);
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

        .table th {
            background-color: var(--primary);
            color: white;
            padding: 1rem;
            text-align: left;
            font-weight: 600;
        }

        .table th:first-child {
            border-radius: 20px 0 0 0;
        }

        .table th:last-child {
            border-radius: 0 20px 0 0;
        }

        .table td {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .table tr:hover {
            background-color: var(--bg-light);
        }

        .alert {
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 1rem;
        }

        .alert-success {
            background-color: var(--success-light);
            color: var(--success-text);
            border: 1px solid var(--success);
        }

        .alert-error {
            background-color: #FFCDD2;
            color: #C62828;
            border: 1px solid var(--error);
        }

        .grid {
            display: grid;
            gap: 2rem;
        }

        .grid-2 {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .grid-3 {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        .badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 16px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .badge-admin {
            background-color: var(--secondary);
            color: white;
        }

        .badge-user {
            background-color: var(--accent);
            color: white;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            .navbar-container {
                flex-direction: column;
                gap: 0.5rem;
            }

            .navbar-menu {
                flex-direction: column;
                width: 100%;
                gap: 0.5rem;
            }

            .navbar-menu li {
                width: 100%;
            }

            .navbar-menu a {
                display: block;
                width: 100%;
                text-align: center;
            }

            .container {
                padding: 0 1rem;
                margin: 1rem auto;
            }

            .grid-2,
            .grid-3 {
                grid-template-columns: 1fr !important;
            }

            .table {
                font-size: 0.85rem;
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .table th,
            .table td {
                padding: 0.5rem;
                min-width: 100px;
            }

            .btn {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
            }

            .card {
                padding: 1rem;
                margin-bottom: 1rem;
            }

            .card-header {
                font-size: 1.25rem;
            }

            .form-control {
                font-size: 16px;
                /* Prevents zoom on iOS */
            }
        }

        @media (max-width: 480px) {
            .navbar-brand {
                font-size: 1.2rem;
            }

            body {
                font-size: 14px;
            }

            .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }

        /* Gantt Chart Styles */
        .gantt-chart {
            margin-top: 1rem;
            position: relative;
            padding-bottom: 2rem;
        }

        .gantt-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 0.5rem;
            font-size: 0.85rem;
            color: var(--text-light);
        }

        .gantt-row {
            margin-bottom: 0.5rem;
            position: relative;
            height: 30px;
            background-color: var(--bg-light);
            border-radius: 12px;
        }

        .gantt-bar {
            position: absolute;
            height: 100%;
            border-radius: 12px;
            display: flex;
            align-items: center;
            padding: 0 0.5rem;
            color: white;
            font-size: 0.85rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            min-width: 30px;
            /* Ensure visibility */
        }

        .gantt-pending {
            background-color: var(--warning);
        }

        .gantt-in-progress {
            background-color: var(--accent);
        }

        .gantt-completed {
            background-color: var(--success);
        }

        .gantt-tooltip {
            position: absolute;
            background-color: rgba(93, 78, 66, 0.95);
            /* Softer dark brown */
            color: white;
            padding: 0.75rem;
            border-radius: 12px;
            font-size: 0.9rem;
            z-index: 1000;
            pointer-events: none;
            /* Let clicks pass through */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
            min-width: 150px;
            line-height: 1.4;
        }
    </style>
</head>

<body>
    {% if session.user_id %}
    <nav class="navbar">
        <div class="navbar-container">
            <a href="{{ url_for('dashboard') }}" class="navbar-brand">{{ lab_name }}</a>
            <ul class="navbar-menu">
                <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('users') }}">Members</a></li>
                <li><a href="{{ url_for('groups') }}">Groups</a></li>
                <li><a href="{{ url_for('research') }}">Research</a></li>
                <li><a href="{{ url_for('meetings') }}">Meetings</a></li>
                <li><a href="{{ url_for('content') }}">Content</a></li>
                <li><a href="{{ url_for('inventory') }}">Inventory</a></li>
                <li style="position: relative;">
                    <a href="#" style="cursor: pointer;" onclick="toggleDropdown(event)">
                        Profile ▾
                    </a>
                    <ul id="profileDropdown" style="display: none; position: absolute; top: 100%; right: 0; 
                                                       background: var(--primary-dark); min-width: 200px; 
                                                       list-style: none; padding: 0.5rem 0; border-radius: 12px;
                                                       box-shadow: 0 6px 16px rgba(0,0,0,0.15); z-index: 1000;">
                        <li><a href="{{ url_for('edit_profile') }}" style="display: block; padding: 0.5rem 1rem;">Edit
                                Profile</a></li>
                        <li><a href="{{ url_for('change_password') }}"
                                style="display: block; padding: 0.5rem 1rem;">Change Password</a></li>
                        <li><a href="{{ url_for('logout') }}" style="display: block; padding: 0.5rem 1rem;">Logout</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    {% endif %}

    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        {% for category, message in messages %}
        <div class="alert alert-{{ category }}">{{ message }}</div>
        {% endfor %}
        {% endif %}
        {% endwith %}

        {% block content %}{% endblock %}
    </div>

    <div id="gantt-tooltip" class="gantt-tooltip" style="display: none;"></div>

    <script>
        function toggleDropdown(event) {
            event.preventDefault();
            const dropdown = document.getElementById('profileDropdown');
            dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function (event) {
            const dropdown = document.getElementById('profileDropdown');
            const isClickInside = event.target.closest('li');
            if (!isClickInside && dropdown) {
                dropdown.style.display = 'none';
            }
        });

        // Gantt Chart Tooltip Logic
        document.addEventListener('DOMContentLoaded', () => {
            const tooltip = document.getElementById('gantt-tooltip');

            document.addEventListener('mouseover', (e) => {
                if (e.target.classList.contains('gantt-bar')) {
                    const name = e.target.dataset.taskName;
                    const status = e.target.dataset.status;
                    const start = e.target.dataset.start;
                    const end = e.target.dataset.end;

                    if (name) {
                        tooltip.innerHTML = `
                            <strong>${name}</strong><br>
                            <span style="font-size: 0.8rem; opacity: 0.9;">Status: ${status}</span><br>
                            <span style="font-size: 0.8rem; opacity: 0.9;">${start} to ${end}</span>
                        `;
                        tooltip.style.display = 'block';
                    }
                }
            });

            document.addEventListener('mousemove', (e) => {
                if (tooltip.style.display === 'block') {
                    // Position tooltip near cursor but slightly offset to not block view
                    // Ensure it doesn't go off screen (basic check)
                    let left = e.pageX + 15;
                    let top = e.pageY + 15;

                    tooltip.style.left = left + 'px';
                    tooltip.style.top = top + 'px';
                }
            });

            document.addEventListener('mouseout', (e) => {
                if (e.target.classList.contains('gantt-bar')) {
                    tooltip.style.display = 'none';
                }
            });
        });
    </script>
</body>

</html>