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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kaataru</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="<?= base_url(); ?>assets/css/dashboard.css">
    
    <!-- SweetAlert2 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <style>
        /* Global SweetAlert2 custom styling */
        .swal2-popup {
            border-radius: 15px !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        .swal2-title {
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            color: #2c3e50 !important;
        }

        .swal2-content {
            font-size: 1rem !important;
            color: #495057 !important;
        }

        .swal2-confirm {
            border-radius: 25px !important;
            padding: 10px 25px !important;
            font-weight: 600 !important;
            transition: all 0.3s ease !important;
        }

        .swal2-cancel {
            border-radius: 25px !important;
            padding: 10px 25px !important;
            font-weight: 600 !important;
            transition: all 0.3s ease !important;
        }

        .swal2-confirm:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
        }

        .swal2-cancel:hover {
            transform: translateY(-1px) !important;
        }

        /* Custom loader styling */
        .swal2-loader {
            border-color: #007bff transparent #007bff transparent !important;
        }

        /* Toast notifications */
        .swal2-toast {
            border-radius: 10px !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .swal2-popup {
                margin: 0 10px !important;
                width: calc(100% - 20px) !important;
                max-width: none !important;
            }
        }
    </style>
</head>

<body>

<div class="layout">
