<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($page_title) ? $page_title . ' - ' : '' ?>User - Auriga Portal</title>
    <link rel="icon" type="image/png" href="<?= base_url('assets/images/auriga-logo.png') ?>">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --primary-light: #60a5fa;
            --accent: #06b6d4;
            --accent-light: #22d3ee;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
            --border-color: #e2e8f0;
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
            --info: #06b6d4;
            --bg-primary: #f8fafc;
            --bg-secondary: #ffffff;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f8fafc;
            color: var(--text-primary);
            font-size: 15px;
            overflow-x: hidden;
        }
        .main-content { min-height: 100vh; background: transparent; }

        /* Top Navbar */
        .top-navbar {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            box-shadow: 0 4px 20px rgba(59,130,246,0.15);
            padding: 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .navbar-brand {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: white !important;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .navbar-nav {
            gap: 6px;
        }
        .navbar-nav .nav-link {
            color: rgba(255,255,255,0.9) !important;
            font-weight: 600;
            font-size: 15px;
            padding: 10px 18px;
            border-radius: 10px;
            transition: all .3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .navbar-nav .nav-link i {
            font-size: 18px;
        }
        .navbar-nav .nav-link:hover {
            background: rgba(255,255,255,0.15);
            color: white !important;
            transform: translateY(-2px);
        }
        .navbar-nav .nav-link.active {
            background: rgba(255,255,255,0.25);
            color: white !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .user-details {
            color: white;
            font-weight: 600;
            font-size: 14px;
            gap: 10px;
            padding: 8px 16px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }
        .user-details i {
            font-size: 24px;
        }
        .navbar-toggler {
            border-color: rgba(255,255,255,0.5);
        }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* Content Area */
        .content-area { padding: 32px; max-width: 1400px; margin: 0 auto; }

        /* Stat Cards */
        .stat-card { 
            background: white;
            border-radius: 16px; 
            padding: 26px; 
            box-shadow: 0 4px 16px rgba(0,0,0,0.06); 
            border: 1px solid var(--border-color);
            transition: all .3s ease; 
        }
        .stat-card:hover { 
            transform: translateY(-4px); 
            box-shadow: 0 8px 24px rgba(59,130,246,0.12); 
            border-color: var(--primary-light);
        }
        .stat-card .stat-icon { 
            font-size: 42px; 
            margin-bottom: 16px; 
            opacity: 0.15; 
            transition: opacity .3s ease; 
        }
        .stat-card:hover .stat-icon { 
            opacity: 0.25; 
        }
        .stat-card .stat-label { 
            color: var(--text-muted); 
            font-weight: 700; 
            font-size: 12px; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            margin-bottom: 10px; 
        }
        .stat-card .stat-value { 
            font-family: 'Space Grotesk', sans-serif;
            font-size: 38px; 
            font-weight: 800; 
            line-height: 1.1; 
            margin-bottom: 8px; 
        }
        .stat-card.primary .stat-value { color: var(--primary); }
        .stat-card.success .stat-value { color: var(--success); }
        .stat-card.danger .stat-value { color: var(--danger); }
        .stat-card .stat-change { 
            font-size: 13px; 
            font-weight: 600; 
            display: flex; 
            align-items: center; 
            gap: 6px; 
        }
        .stat-card .stat-change.up { color: var(--success); }
        .stat-card .stat-change.down { color: var(--danger); }

        /* Card Styles */
        .card { border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); overflow: hidden; background: white; }
        .card-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; border: none; padding: 18px 24px; font-weight: 700; font-size: 16px; letter-spacing: .3px; }
        .card-header i { margin-right: 8px; }
        .card-body { padding: 24px; }

        /* Buttons */
        .btn { padding: 10px 20px; font-weight: 600; border-radius: 10px; font-size: 14px; letter-spacing: .3px; transition: all .3s ease; }
        .btn-primary { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%); border: none; box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59,130,246,0.4); }
        .btn-success { background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); border: none; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
        .btn-success:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
        .btn-danger { background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%); border: none; box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
        .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(239,68,68,0.4); }
        .btn-warning { background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%); border: none; box-shadow: 0 4px 12px rgba(245,158,11,0.3); color: white; }
        .btn-warning:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,158,11,0.4); }
        .btn-info { background: linear-gradient(135deg, var(--info-color) 0%, #0891b2 100%); border: none; box-shadow: 0 4px 12px rgba(6,182,212,0.3); }
        .btn-info:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(6,182,212,0.4); }

        /* Table Styles */
        .table-responsive { background: white; border-radius: 16px; padding: 24px; border: 1px solid var(--border-color); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .table { margin: 0; }
        .table thead th { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(6,182,212,0.1)); color: var(--text-primary); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--primary-light); padding: 16px; }
        .table tbody td { padding: 16px; vertical-align: middle; color: var(--text-primary); font-size: 14px; }
        .table tbody tr { border-bottom: 1px solid var(--border-color); transition: background .2s ease; }
        .table tbody tr:hover { background: rgba(59,130,246,0.05); }

        /* Badges */
        .badge { padding: 8px 14px; font-weight: 700; font-size: 11px; letter-spacing: .5px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
        .badge-status-pending { background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%); color: white; }
        .badge-status-sent { background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); color: white; }
        .badge-status-failed { background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%); color: white; }

        /* Alerts */
        .alert { border: none; border-radius: 12px; padding: 16px 20px; font-weight: 500; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 12px; }
        .alert-success { background: linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%); color: #166534; border-left: 4px solid var(--success-color); }
        .alert-danger { background: linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%); color: #991b1b; border-left: 4px solid var(--danger-color); }
        .alert-warning { background: linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); color: #92400e; border-left: 4px solid var(--warning-color); }
        .alert-info { background: linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%); color: #075985; border-left: 4px solid var(--info-color); }

        /* Page Title */
        .page-title { margin-bottom: 28px; display: flex; align-items: center; gap: 18px; }
        .page-title .page-icon { font-size: 28px; color: var(--primary); }
        .page-title h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--text-primary); font-size: 28px; letter-spacing: -0.8px; margin-bottom: 8px; }
        .page-title p { color: var(--text-secondary); font-size: 15px; margin: 0; }

        /* Form Controls */
        .form-control, .form-select { border: 2px solid var(--border-color); border-radius: 10px; padding: 10px 16px; font-size: 14px; transition: all .3s ease; background: white; }
        .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59,130,246,0.12); background: white; }
        .form-label { font-weight: 600; color: var(--text-primary); font-size: 14px; margin-bottom: 8px; }

        /* Progress Bar */
        .progress { height: 12px; border-radius: 8px; background: #e0f2fe; }
        .progress-bar { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: 8px; }

        /* Responsive adjustments */
        @media (max-width: 1200px) { .content-area { padding: 24px; } .stat-card { padding: 24px; } .stat-card h3 { font-size: 28px; } }
        @media (max-width: 992px) { .content-area { padding: 20px; } .navbar-brand { font-size: 18px; } .stat-card { padding: 20px; } .stat-card h3 { font-size: 26px; } .table-responsive { padding: 20px; } }
        @media (max-width: 768px) {
            .top-navbar-nav { height: 60px; }
            .navbar-brand { font-size: 16px; }
            .navbar-nav .nav-link { padding: 6px 12px; margin: 0 4px; font-size: 14px; }
            .user-details .username { display: none; }
            .content-area { padding: 16px; }
            .stat-card { padding: 20px; margin-bottom: 16px; }
            .table-responsive { padding: 16px; overflow-x: auto; }
            .panel-header { padding: 14px 20px; }
        }
        /* Panel / Card Styles - Modern Glass Design */
        .panel {
            border-radius: 16px;
            overflow: hidden;
            background: white;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            margin-bottom: 28px;
            border: 1px solid var(--border-color);
        }
        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 24px 28px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: #fff;
        }
        .panel-header .panel-title { 
            display: flex; 
            align-items: center; 
            gap: 14px; 
            font-weight: 700; 
            font-size: 20px; 
            font-family: 'Space Grotesk', sans-serif;
        }
        .panel-header .panel-title i { font-size: 24px; }
        .panel-header .panel-actions { display: flex; align-items: center; gap: 12px; }
        .view-all-btn { 
            background: rgba(255,255,255,0.2); 
            color: #fff; 
            padding: 10px 18px; 
            border-radius: 12px; 
            font-weight: 600; 
            border: 1px solid rgba(255,255,255,0.3); 
            transition: all .3s ease;
        }
        .view-all-btn:hover {
            background: rgba(255,255,255,0.3);
            border-color: rgba(255,255,255,0.5);
            transform: translateY(-2px);
        }
        .panel-body { padding: 28px; background: white; }
        .panel-inner { background: #f8fafc; border-radius: 12px; padding: 24px; border: 1px solid var(--border-color); }
        
        /* Campaign card design */
        .campaign-card { 
            background: white;
            border-radius: 16px; 
            padding: 24px; 
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            border: 1px solid var(--border-color);
            margin-bottom: 20px; 
            transition: all .3s ease;
        }
        .campaign-card:hover { 
            transform: translateY(-4px); 
            box-shadow: 0 8px 24px rgba(59,130,246,0.12); 
        }
        .campaign-card .card-top { 
            display: flex; 
            align-items: start; 
            justify-content: space-between; 
            gap: 14px; 
            margin-bottom: 18px;
        }
        .campaign-card .card-title { 
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700; 
            font-size: 20px; 
            color: var(--text-primary); 
            line-height: 1.3; 
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .campaign-card .card-title i {
            font-size: 24px;
            color: var(--primary);
        }
        .campaign-card .type-badge { 
            background: linear-gradient(135deg, #e0f2fe, #bae6fd); 
            color: var(--primary-dark); 
            padding: 8px 16px; 
            border-radius: 12px; 
            font-weight: 700; 
            font-size: 12px; 
            letter-spacing: .5px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .campaign-card .type-badge i {
            font-size: 14px;
        }
        .campaign-card .status-badge { 
            padding: 8px 16px; 
            border-radius: 12px; 
            font-weight: 700; 
            font-size: 13px; 
            color: #fff; 
            box-shadow: 0 6px 20px rgba(0,0,0,0.15); 
        }
        .campaign-card .metrics { 
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 20px;
            margin-bottom: 16px;
        }
        .campaign-card .metric { 
            text-align: left;
        }
        .campaign-card .metric .label { 
            color: var(--text-muted); 
            font-weight: 600; 
            font-size: 11px; 
            text-transform: uppercase; 
            letter-spacing: .8px;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
        }
        .campaign-card .metric .label i {
            font-size: 14px;
            color: var(--primary);
        }
        .campaign-card .metric .value { 
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700; 
            font-size: 24px; 
            color: var(--text-primary);
        }
        .campaign-card .metric.success .value { 
            color: var(--success); 
        }
        .campaign-card .metric.danger .value { 
            color: var(--danger); 
        }
        .campaign-card .progress-wrap { 
            margin-top: 16px;
        }
        .campaign-card .progress { 
            height: 8px; 
            border-radius: 10px; 
            background: #e0f2fe; 
            overflow: hidden;
        }
        .campaign-card .progress .progress-bar { 
            height: 100%; 
            background: linear-gradient(90deg, var(--primary), var(--accent)); 
            border-radius: 10px; 
            transition: width .6s ease;
        }
        .campaign-card .actions { 
            display: flex; 
            gap: 12px; 
            margin-top: 16px; 
        }
        .btn-gradient { 
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); 
            color: #fff; 
            border: none; 
            box-shadow: 0 6px 20px rgba(59,130,246,0.25); 
            padding: 12px 24px; 
            border-radius: 12px; 
            font-weight: 700; 
            font-size: 14px; 
            transition: all .3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-gradient i {
            font-size: 16px;
        }
        .btn-gradient:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 8px 28px rgba(59,130,246,0.35); 
            color: #fff; 
        }
        .btn-outline { 
            background: white; 
            border: 2px solid var(--border-color); 
            padding: 10px 20px; 
            border-radius: 12px; 
            font-weight: 700; 
            transition: all .3s ease; 
            color: var(--primary);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-outline i {
            font-size: 16px;
        }
        .btn-outline:hover { 
            border-color: var(--primary); 
            background: rgba(59,130,246,0.05); 
            transform: translateY(-2px);
        }
        @media (max-width: 768px) {
            .campaign-card .metrics { 
                grid-template-columns: repeat(2, 1fr);
                gap: 14px; 
            }
            .campaign-card .actions { 
                flex-direction: column; 
            }
            .btn-gradient, .btn-outline { 
                width: 100%; 
                justify-content: center;
            }
        }
        @media (max-width: 576px) {
            .navbar-brand { font-size: 15px; }
            .navbar-nav .nav-link { padding: 6px 10px; font-size: 13px; }
            .content-area { padding: 12px; }
            .stat-card { padding: 16px; }
        }
        @media print {
            .top-navbar-nav, .btn, .alert { display: none !important; }
            .main-content { margin-left: 0; }
            .content-area { padding: 0; }
            .stat-card, .panel { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
        }
        
        /* Card Styles (legacy - use .panel instead) */
        .card {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
            color: white;
            border: none;
            padding: 18px 24px;
            font-weight: 600;
            font-size: 16px;
            letter-spacing: 0.3px;
        }

        .card-header i {
            margin-right: 8px;
        }

        .card-body {
            padding: 24px;
        }
        
        /* Buttons */
        .btn {
            padding: 10px 20px;
            font-weight: 600;
            border-radius: 10px;
            font-size: 14px;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
            border: none;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
            border: none;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
        }

        .btn-danger {
            background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
            border: none;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
        }

        .btn-warning {
            background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);
            border: none;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
            color: white;
        }

        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
            color: white;
        }

        .btn-info {
            background: linear-gradient(135deg, var(--info-color) 0%, #0891b2 100%);
            border: none;
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
        }

        .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
        }
        
        /* Table Styles */
        .table-responsive {
            background: white;
            border-radius: 16px;
            padding: 24px;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .table {
            margin: 0;
        }

        .table thead th {
            background: #f8fafc;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid var(--border-color);
            padding: 16px;
        }

        .table tbody td {
            padding: 16px;
            vertical-align: middle;
            color: var(--text-primary);
            font-size: 14px;
        }

        .table tbody tr {
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.2s ease;
        }

        .table tbody tr:hover {
            background: #f8fafc;
        }
        
        /* Badges */
        .badge {
            padding: 6px 12px;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.5px;
            border-radius: 8px;
        }

        .badge-status-pending {
            background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);
            color: white;
        }
        
        .badge-status-sent {
            background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
            color: white;
        }
        
        .badge-status-failed {
            background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
            color: white;
        }
        
        /* Alerts */
        .alert {
            border: none;
            border-radius: 12px;
            padding: 16px 20px;
            font-weight: 500;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert-success {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            color: #166534;
            border-left: 4px solid var(--success-color);
        }

        .alert-danger {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            color: #991b1b;
            border-left: 4px solid var(--danger-color);
        }

        .alert-warning {
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
            color: #92400e;
            border-left: 4px solid var(--warning-color);
        }

        .alert-info {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            color: #075985;
            border-left: 4px solid var(--info-color);
        }
        
        /* Page Title */
        .page-title {
            margin-bottom: 28px;
        }
        
        .page-title h2 {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 28px;
            letter-spacing: -0.8px;
            margin-bottom: 8px;
        }

        .page-title p {
            color: var(--text-secondary);
            font-size: 15px;
            margin: 0;
        }

        /* Form Controls */
        .form-control,
        .form-select {
            border: 2px solid var(--border-color);
            border-radius: 10px;
            padding: 10px 16px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #f8fafc;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-blue-light);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
            background: white;
        }

        .form-label {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
            margin-bottom: 8px;
        }

        /* Progress Bar */
        .progress {
            height: 12px;
            border-radius: 8px;
            background: #e2e8f0;
        }

        .progress-bar {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
            border-radius: 8px;
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .content-area {
                padding: 24px;
            }

            .stat-card {
                padding: 24px;
            }

            .stat-card h3 {
                font-size: 28px;
            }
        }

        @media (max-width: 992px) {
            .content-area {
                padding: 20px;
            }

            .navbar-brand {
                font-size: 18px;
            }

            .stat-card {
                padding: 20px;
            }

            .stat-card h3 {
                font-size: 26px;
            }

            .table-responsive {
                padding: 20px;
            }
        }

        @media (max-width: 768px) {
            .main-content {
                margin-left: 0;
            }

            .top-navbar-nav {
                height: 60px;
            }

            .navbar-brand {
                font-size: 16px;
            }

            .navbar-nav .nav-link {
                padding: 6px 12px;
                margin: 0 4px;
                font-size: 14px;
            }

            .user-details .username {
                display: none;
            }

            .content-area {
                padding: 16px;
            }

            .page-title h2 {
                font-size: 22px;
            }

            .stat-card {
                padding: 20px;
                margin-bottom: 16px;
            }

            .stat-card h3 {
                font-size: 24px;
            }

            .stat-card p {
                font-size: 13px;
            }

            .stat-card .icon {
                font-size: 2rem;
                right: 16px;
            }

            .card-header {
                padding: 14px 16px;
                font-size: 15px;
            }

            .card-body {
                padding: 16px;
            }

            .table-responsive {
                padding: 16px;
                overflow-x: auto;
            }

            .table {
                font-size: 13px;
            }

            .table thead th {
                padding: 12px 8px;
                font-size: 11px;
            }

            .table tbody td {
                padding: 12px 8px;
                font-size: 13px;
            }

            .btn {
                padding: 8px 16px;
                font-size: 13px;
            }

            .form-control,
            .form-select {
                font-size: 14px;
                padding: 10px 14px;
            }

            .alert {
                padding: 12px 16px;
                font-size: 13px;
            }

            .progress {
                height: 10px;
            }
        }

        @media (max-width: 576px) {
            .top-navbar {
                padding: 0 16px;
            }

            .top-navbar h5 {
                font-size: 15px;
            }

            .top-navbar .user-details {
                padding: 6px 10px;
            }

            .top-navbar .user-details i {
                font-size: 18px;
            }

            .content-area {
                padding: 12px;
            }

            .page-title {
                margin-bottom: 20px;
            }

            .page-title h2 {
                font-size: 20px;
            }

            .stat-card {
                padding: 16px;
            }

            .stat-card h3 {
                font-size: 22px;
            }

            .stat-card .icon {
                font-size: 1.8rem;
            }

            .card-header {
                padding: 12px 14px;
                font-size: 14px;
            }

            .card-body {
                padding: 14px;
            }

            .table-responsive {
                padding: 12px;
            }

            .btn {
                padding: 8px 14px;
                font-size: 12px;
            }

            .mobile-menu-toggle {
                width: 52px;
                height: 52px;
                bottom: 20px;
                right: 20px;
                font-size: 22px;
            }

            .sidebar-header {
                padding: 20px 18px 18px;
            }

            .sidebar-header .logo-icon {
                width: 42px;
                height: 42px;
                font-size: 20px;
            }

            .sidebar-header h4 {
                font-size: 18px;
            }

            .sidebar-menu li a {
                padding: 12px 14px;
                font-size: 14px;
            }
        }

        @media (max-width: 400px) {
            .content-area {
                padding: 10px;
            }

            .stat-card h3 {
                font-size: 20px;
            }

            .stat-card p {
                font-size: 12px;
            }

            .table {
                font-size: 12px;
            }

            .mobile-menu-toggle {
                width: 48px;
                height: 48px;
                font-size: 20px;
            }
        }

        /* Landscape Mobile */
        @media (max-width: 768px) and (orientation: landscape) {
            .sidebar {
                width: 240px;
            }

            .sidebar-header {
                padding: 16px;
            }

            .sidebar-menu li a {
                padding: 10px 12px;
            }
        }

        /* Tablet Portrait */
        @media (min-width: 768px) and (max-width: 992px) {
            .row > [class*='col-'] {
                margin-bottom: 16px;
            }
        }

        /* Print Styles */
        @media print {
            .sidebar,
            .top-navbar,
            .mobile-menu-toggle,
            .btn,
            .alert {
                display: none !important;
            }

            .main-content {
                margin-left: 0;
            }

            .content-area {
                padding: 0;
            }

            .stat-card,
            .card {
                box-shadow: none;
                border: 1px solid #ddd;
                page-break-inside: avoid;
            }
        }
    </style>
</head>
<body>
    <!-- Top Navbar -->
    <nav class="navbar navbar-expand-lg top-navbar">
        <div class="container-fluid px-4">
            <a class="navbar-brand" href="<?= base_url('user/dashboard') ?>">
                <img src="<?= base_url('assets/images/auriga-logo.png') ?>" alt="Auriga" style="width:36px;height:36px;object-fit:contain;border-radius:8px;">
                <span>Auriga Portal</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-lg-center">
                    <li class="nav-item">
                        <a class="nav-link <?= $this->uri->segment(2) == 'dashboard' ? 'active' : '' ?>" href="<?= base_url('user/dashboard') ?>">
                            <i class="bi bi-house-door-fill"></i>
                            <span>Home</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?= $this->uri->segment(2) == 'campaigns' || $this->uri->segment(2) == 'campaign-view' ? 'active' : '' ?>" href="<?= base_url('user/campaigns') ?>">
                            <i class="bi bi-megaphone-fill"></i>
                            <span>My Campaigns</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?= $this->uri->segment(2) == 'reports' ? 'active' : '' ?>" href="<?= base_url('user/reports') ?>">
                            <i class="bi bi-bar-chart-fill"></i>
                            <span>Analytics</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?= $this->uri->segment(2) == 'send_logs' ? 'active' : '' ?>" href="<?= base_url('user/send_logs') ?>">
                            <i class="bi bi-journal-text"></i>
                            <span>Activity Logs</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?= $this->uri->segment(2) == 'profile' ? 'active' : '' ?>" href="<?= base_url('user/profile') ?>">
                            <i class="bi bi-person-fill"></i>
                            <span>My Profile</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('logout') ?>">
                            <i class="bi bi-box-arrow-right"></i>
                            <span>Sign Out</span>
                        </a>
                    </li>
                    <li class="nav-item ms-lg-3">
                        <div class="user-details">
                            <i class="bi bi-person-badge-fill"></i>
                            <span><?= current_username() ?></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="main-content">
        <div class="content-area">
            <?php if (get_flash('success')): ?>
                <div class="alert alert-success alert-dismissible fade show">
                    <i class="bi bi-check-circle-fill"></i>
                    <span><?= get_flash('success') ?></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>
            
            <?php if (get_flash('error')): ?>
                <div class="alert alert-danger alert-dismissible fade show">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <span><?= get_flash('error') ?></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>

    <script>
        // Highlight active nav link
        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
            link.addEventListener('click', function() {
                document.querySelectorAll('.navbar-nav .nav-link').forEach(l => l.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
