<!doctype html>
<html lang="en" dir="ltr">

<head>

    <!-- META DATA -->
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="<?php echo APP_NAME; ?>">
    <meta name="author" content="Spruko Technologies Private Limited">
    <meta name="keywords" content="sms, marketing, admin panel">

    <!-- FAVICON -->
    <link rel="shortcut icon" type="image/x-icon" href="<?php echo asset_url('assets/images/brand/favicon.ico'); ?>" />

    <!-- TITLE -->
    <title><?php echo $pageTitle ?? APP_NAME; ?></title>

    <!-- BOOTSTRAP CSS -->
    <link id="style" href="<?php echo asset_url('assets/plugins/bootstrap/css/bootstrap.min.css'); ?>"
        rel="stylesheet" />

    <!-- STYLE CSS -->
    <link href="<?php echo asset_url('assets/css/style.css'); ?>" rel="stylesheet" />
    <link href="<?php echo asset_url('assets/css/dark-style.css'); ?>" rel="stylesheet" />
    <link href="<?php echo asset_url('assets/css/transparent-style.css'); ?>" rel="stylesheet" />
    <link href="<?php echo asset_url('assets/css/skin-modes.css'); ?>" rel="stylesheet" />

    <!--- FONT-ICONS CSS -->
    <link href="<?php echo asset_url('assets/css/icons.css'); ?>" rel="stylesheet" />

    <!-- Font Awesome CDN (Fallback) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- COLOR SKIN CSS -->
    <link id="theme" rel="stylesheet" type="text/css" media="all"
        href="<?php echo asset_url('assets/colors/color1.css'); ?>" />

    <!-- MODERN UI V2 -->
    <link href="<?php echo asset_url('css/modern-ui.css'); ?>" rel="stylesheet" />

    <style>
        /* Fix for Sidebar Overlap */
        @media (min-width: 992px) {

            /* Standard Sidebar State (Open) */
            .app.sidebar-mini .page {
                padding-left: 270px;
                transition: padding-left 0.3s ease;
            }

            /* Collapsed Sidebar State */
            .app.sidebar-mini.sidenav-toggled .page {
                padding-left: 70px;
                /* Adjust if icon-only sidebar has width */
            }

            /* If collapsed is 0 width overlay */
            .app.sidebar-mini.sidenav-toggled.sidenav-toggled-open .page {
                padding-left: 270px;
            }

            /* Ensure page-main doesn't have conflicting margins */
            .page-main {
                margin-left: 0 !important;
            }

            /* Fix for sticky sidebar */
            .app-sidebar {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                z-index: 1000;
                width: 270px;
                transition: width 0.3s ease, left 0.3s ease;
            }

            .app.sidebar-mini.sidenav-toggled .app-sidebar {
                width: 70px;
                /* Collapsed width */
            }

            .app.sidebar-mini.sidenav-toggled .app-sidebar:hover {
                width: 270px;
                /* Expand on hover if desired, standard admin 10 behavior */
            }
        }

        /* Mobile Logo Responsive Fix */
        @media (max-width: 768px) {
            .logo-horizontal img {
                max-width: 120px !important;
                height: auto !important;
                width: auto !important;
            }

            .header-brand-img {
                max-height: 40px;
                width: auto !important;
            }
        }

        /* Very small screens */
        @media (max-width: 480px) {
            .logo-horizontal img {
                max-width: 100px !important;
            }
        }
    </style>

    <!-- Theme Persistence Script (Must load before body) -->
    <script>
        // Load saved theme preference BEFORE page renders
        (function () {
            var savedTheme = localStorage.getItem('appTheme') || 'light-mode';
            document.documentElement.classList.add(savedTheme);
        })();
    </script>

</head>

<body class="app sidebar-mini ltr">
    <script>
        // Apply saved theme to body
        (function () {
            var savedTheme = localStorage.getItem('appTheme') || 'light-mode';
            document.body.classList.add(savedTheme);
        })();
    </script>

    <!-- GLOBAL-LOADER -->
    <div id="global-loader">
        <img src="<?php echo asset_url('assets/images/loader.svg'); ?>" class="loader-img" alt="Loader">
    </div>
    <!-- /GLOBAL-LOADER -->

    <!-- PAGE -->
    <div class="page">
        <div class="page-main p-4">