<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin — Mount Kenya Treks</title>
    
    <link rel="stylesheet" href="<?= base_url('css/uno.css') ?>">
    
    <style>
        /* Removed un-cloak style that was hiding your content */
        body { background-color: #f4f1ea; font-family: 'Inter', system-ui, sans-serif; color: #18181b; margin: 0; }
        
        /* Ensure the main area is visible and takes up space */
        main { display: block; width: 100%; }
    </style>
    
    <?= $this->renderSection('styles') ?>
</head>
<body class="min-h-screen flex flex-col">
    
    <header class="bg-primary text-white px-6 py-4 flex justify-between items-center shadow-lg z-30">
        <div class="flex items-center gap-4">
            <a href="<?= url_to('admin.dashboard') ?>" class="w-10 h-10 bg-secondary rounded-lg flex items-center justify-center text-primary font-black hover:bg-accent transition-colors">
                MK
            </a>
            <h2 class="text-lg font-black tracking-tight uppercase">Mount Kenya <span class="text-secondary">Admin</span></h2>
        </div>
        
        <div class="flex items-center gap-6">
            <nav class="hidden lg:flex gap-8 text-[11px] font-black uppercase tracking-widest">
                <a href="<?= url_to('admin.dashboard') ?>" class="text-white/70 hover:text-secondary transition-colors">Dashboard</a>
                <a href="<?= url_to('admin.blog.index') ?>" class="text-secondary border-b-2 border-secondary pb-1">Blog</a>
                <a href="<?= url_to('admin.tours.index') ?>" class="text-white/70 hover:text-secondary transition-colors">Tours</a>
                <a href="#" class="text-white/70 hover:text-secondary transition-colors">Settings</a>
            </nav>
            <div class="h-6 w-px bg-white/10 mx-2"></div>
            <a href="<?= url_to('admin.logout') ?>" 
               class="px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-bold transition-all border border-white/10 uppercase tracking-widest">
               Logout
            </a>
        </div>
    </header>

    <main class="flex-grow">
        <?= $this->renderSection('content') ?>
    </main>

    <footer class="p-8 text-center text-muted text-[10px] font-bold uppercase tracking-[0.2em]">
        &copy; <?= date('Y') ?> Mount Kenya Treks — Expedition Management Portal
    </footer>

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: 'textarea.tinymce',
            plugins: 'link image lists code table',
            toolbar: 'undo redo | bold italic | bullist numlist | link image | code',
            skin: 'oxide',
            content_style: 'body { font-family:Inter,sans-serif; font-size:14px }',
            setup: function (editor) {
                editor.on('init', function () {
                    editor.getContainer().style.borderRadius = "0.75rem";
                    editor.getContainer().style.border = "2px solid #d6d3cc";
                });
            }
        });
    </script>
</body>
</html>