<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}AWS Inventory Browser{% endblock %}</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'aws-orange': '#FF9900',
                        'aws-dark': '#232F3E',
                        'aws-blue': '#146EB4',
                    }
                }
            }
        }
    </script>

    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1"></script>

    <!-- Tabulator CSS & JS -->
    <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator_simple.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>

    <!-- Alpine.js -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Plus Jakarta Sans - Premium Modern Font -->
    <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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Custom styles -->
    <style>
        :root {
            /* Vibrant color palette */
            --color-primary: #6366f1;
            --color-primary-dark: #4f46e5;
            --color-primary-light: #a5b4fc;
            --color-success: #10b981;
            --color-danger: #f43f5e;
            --color-warning: #f59e0b;
            --color-info: #06b6d4;

            /* Gradients */
            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            --gradient-danger: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --gradient-dark: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);

            /* Shadows */
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);

            /* Radius */
            --radius-sm: 0.5rem;
            --radius-md: 0.75rem;
            --radius-lg: 1rem;
            --radius-xl: 1.25rem;
        }

        * {
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
        }

        body {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh;
        }

        [x-cloak] { display: none !important; }
        .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
        .htmx-request .htmx-indicator { opacity: 1; }
        .htmx-request.htmx-indicator { opacity: 1; }

        /* ===== FORM ELEMENTS - Premium Styling ===== */
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="number"],
        input[type="url"],
        input[type="tel"],
        textarea,
        select,
        .input {
            padding: 0.75rem 1rem;
            font-size: 0.9375rem;
            font-weight: 500;
            line-height: 1.5;
            color: #1e293b;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border: 2px solid #e2e8f0;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(0, 0, 0, 0.02);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
        }

        input[type="text"]:hover,
        input[type="email"]:hover,
        input[type="password"]:hover,
        input[type="search"]:hover,
        input[type="number"]:hover,
        input[type="url"]:hover,
        input[type="tel"]:hover,
        textarea:hover,
        select:hover,
        .input:hover {
            border-color: #cbd5e1;
            background: #ffffff;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus,
        input[type="search"]:focus,
        input[type="number"]:focus,
        input[type="url"]:focus,
        input[type="tel"]:focus,
        textarea:focus,
        select:focus,
        .input:focus {
            outline: none;
            border-color: var(--color-primary);
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), var(--shadow-md);
        }

        input::placeholder,
        textarea::placeholder {
            color: #94a3b8;
            font-weight: 400;
        }

        /* Select with custom arrow - ensure consistent styling */
        select,
        select.border-gray-300,
        select[class*="border-gray"] {
            padding: 0.75rem 2.75rem 0.75rem 1rem !important;
            font-size: 0.9375rem !important;
            font-weight: 500 !important;
            color: #1e293b !important;
            background-color: #ffffff !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
            background-position: right 0.875rem center !important;
            background-repeat: no-repeat !important;
            background-size: 1.25em 1.25em !important;
            border: 2px solid #e2e8f0 !important;
            border-radius: var(--radius-md) !important;
            box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
            min-height: 46px !important;
            appearance: none !important;
            cursor: pointer !important;
        }

        select:hover,
        select.border-gray-300:hover {
            border-color: #cbd5e1 !important;
        }

        select:focus,
        select.border-gray-300:focus {
            outline: none !important;
            border-color: var(--color-primary) !important;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), var(--shadow-md) !important;
        }

        /* Remove mt-1 margin adjustment for better alignment */
        select.mt-1 {
            margin-top: 0 !important;
            background-size: 1.25em 1.25em;
            appearance: none;
            cursor: pointer;
        }

        /* ===== ADVANCED FILTER ELEMENTS ===== */
        /* Small selects in filter conditions */
        select.text-xs,
        select.sm\:text-sm,
        select[class*="rounded"][class*="border-gray"],
        .border-gray-200 select,
        .bg-white select {
            padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
            font-size: 0.8125rem !important;
            font-weight: 600 !important;
            color: #334155 !important;
            background-color: #ffffff !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
            background-position: right 0.5rem center !important;
            background-repeat: no-repeat !important;
            background-size: 1em 1em !important;
            border: 2px solid #e2e8f0 !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
            min-height: 36px !important;
            appearance: none !important;
            cursor: pointer !important;
            width: auto !important;
            min-width: 100px !important;
        }

        select.text-xs:hover,
        select.sm\:text-sm:hover,
        .border-gray-200 select:hover {
            border-color: #a5b4fc !important;
            background-color: #fafaff !important;
        }

        select.text-xs:focus,
        select.sm\:text-sm:focus,
        .border-gray-200 select:focus {
            outline: none !important;
            border-color: var(--color-primary) !important;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }

        /* Logic selectors (AND/OR) with colored backgrounds */
        select.text-blue-700,
        select.text-purple-700,
        select.bg-blue-50,
        select.bg-purple-50,
        select[class*="text-blue-700"],
        select[class*="text-purple-700"] {
            font-weight: 700 !important;
            border-radius: 0.5rem !important;
            border: 2px solid transparent !important;
        }

        select.bg-blue-50,
        select[class*="bg-blue-50"] {
            background-color: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

        select.bg-purple-50,
        select[class*="bg-purple-50"] {
            background-color: #faf5ff !important;
            border-color: #ddd6fe !important;
            color: #7c3aed !important;
        }

        /* Small text inputs in filter conditions */
        input[type="text"].text-xs,
        input[type="text"].sm\:text-sm,
        .border-gray-200 input[type="text"],
        input[type="text"][class*="rounded"][class*="border-gray"],
        input[type="text"][placeholder*="Value"],
        input[type="text"][placeholder*="Enter"] {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.8125rem !important;
            font-weight: 500 !important;
            color: #334155 !important;
            background: #ffffff !important;
            border: 2px solid #e2e8f0 !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
            min-height: 36px !important;
            width: auto !important;
            flex: 1 !important;
        }

        input[type="text"].text-xs:hover,
        input[type="text"].sm\:text-sm:hover,
        .border-gray-200 input[type="text"]:hover {
            border-color: #a5b4fc !important;
        }

        input[type="text"].text-xs:focus,
        input[type="text"].sm\:text-sm:focus,
        .border-gray-200 input[type="text"]:focus {
            outline: none !important;
            border-color: var(--color-primary) !important;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }

        /* Multi-select dropdown trigger buttons in conditions */
        .border-gray-200 button[type="button"],
        button.w-full[class*="border"][class*="border-gray"],
        div.relative button[class*="rounded"][class*="border"] {
            padding: 0.5rem 2rem 0.5rem 0.75rem !important;
            font-size: 0.8125rem !important;
            font-weight: 500 !important;
            color: #334155 !important;
            background: #ffffff !important;
            border: 2px solid #e2e8f0 !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
            min-height: 36px !important;
            text-align: left !important;
            cursor: pointer !important;
        }

        .border-gray-200 button[type="button"]:hover,
        button.w-full[class*="border"][class*="border-gray"]:hover {
            border-color: #a5b4fc !important;
            background: #fafaff !important;
        }

        /* Filter condition row styling */
        .flex.items-center.space-x-2.p-2.bg-white.rounded-lg,
        .flex.items-center.space-x-2.p-3.bg-white.rounded-lg {
            background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
            border: 2px solid #e2e8f0 !important;
            border-radius: 0.75rem !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
            padding: 0.75rem !important;
        }

        .flex.items-center.space-x-2.p-2.bg-white.rounded-lg:hover,
        .flex.items-center.space-x-2.p-3.bg-white.rounded-lg:hover {
            border-color: #cbd5e1 !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
        }

        /* Filter group containers */
        .border-2.rounded-lg.p-3.ml-4[class*="border-blue"],
        .border-2.rounded-lg.p-3.ml-4[class*="border-purple"],
        div[class*="border-blue-200"][class*="bg-blue-50"],
        div[class*="border-purple-200"][class*="bg-purple-50"] {
            border-radius: 0.75rem !important;
            border-width: 2px !important;
        }

        /* Root filter group */
        .border-2.border-gray-200.rounded-lg.p-4.bg-gray-50 {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
            border: 2px solid #e2e8f0 !important;
            border-radius: 1rem !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        }

        /* Add/Remove condition buttons */
        button.inline-flex[class*="px-2"][class*="py-1"][class*="text-xs"] {
            padding: 0.375rem 0.75rem !important;
            font-size: 0.75rem !important;
            font-weight: 600 !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
            border: 1.5px solid #e2e8f0 !important;
            border-radius: 0.5rem !important;
            color: #475569 !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
            transition: all 0.2s ease !important;
        }

        button.inline-flex[class*="px-2"][class*="py-1"][class*="text-xs"]:hover {
            border-color: #a5b4fc !important;
            background: #ffffff !important;
            color: var(--color-primary) !important;
            box-shadow: 0 2px 4px rgba(99, 102, 241, 0.12) !important;
        }

        /* Remove button (X) */
        button.p-1.text-red-500,
        button.p-2.text-red-600,
        button[class*="text-red"][class*="hover:text-red"] {
            color: #f43f5e !important;
            border-radius: 0.375rem !important;
            transition: all 0.2s ease !important;
        }

        button.p-1.text-red-500:hover,
        button.p-2.text-red-600:hover,
        button[class*="text-red"][class*="hover:text-red"]:hover {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
            color: #dc2626 !important;
        }

        /* Logic connector pills */
        span.px-2.py-0\.5.text-xs.font-bold.rounded-full,
        span.px-1\.5.py-0\.5.text-xs.font-bold.rounded-full {
            font-weight: 800 !important;
            letter-spacing: 0.05em !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        }

        span.bg-blue-100.text-blue-700 {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
            color: #1d4ed8 !important;
        }

        span.bg-purple-100.text-purple-700 {
            background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
            color: #7c3aed !important;
        }

        /* Checkbox and Radio - Modern Style */
        input[type="checkbox"],
        input[type="radio"] {
            width: 1.25rem;
            height: 1.25rem;
            color: var(--color-primary);
            border: 2px solid #cbd5e1;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            accent-color: var(--color-primary);
        }

        input[type="radio"] {
            border-radius: 50%;
        }

        input[type="checkbox"]:hover,
        input[type="radio"]:hover {
            border-color: var(--color-primary-light);
        }

        input[type="checkbox"]:checked,
        input[type="radio"]:checked {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
        }

        input[type="checkbox"]:focus,
        input[type="radio"]:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
        }

        /* Form Labels */
        label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 0.5rem;
            letter-spacing: 0.01em;
        }

        /* ===== DROPDOWN BUTTONS & SELECTS ===== */
        /* Multi-select dropdown buttons */
        .relative button[type="button"] {
            padding: 0.75rem 2.5rem 0.75rem 1rem;
            font-size: 0.9375rem;
            font-weight: 500;
            color: #1e293b;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border: 2px solid #e2e8f0;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(0, 0, 0, 0.02);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 46px;
        }

        .relative button[type="button"]:hover {
            border-color: #cbd5e1;
            background: #ffffff;
        }

        .relative button[type="button"]:focus {
            outline: none;
            border-color: var(--color-primary);
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), var(--shadow-md);
        }

        /* Active filter state */
        .relative button[type="button"].border-green-500 {
            border-color: #10b981 !important;
            background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
        }

        /* Dropdown Menu Panels */
        .absolute[class*="shadow-lg"],
        [x-show][class*="bg-white"][class*="shadow-lg"] {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-xl);
            margin-top: 0.5rem;
        }

        /* Dropdown Menu Items - checkbox labels */
        .absolute label,
        [x-show] label.flex {
            padding: 0.625rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .absolute label:hover,
        [x-show] label.flex:hover {
            background: linear-gradient(90deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
        }

        /* Dropdown Header */
        .absolute .border-b,
        [x-show] .border-b {
            padding: 0.75rem 1rem;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }

        /* ===== BUTTONS - Vibrant & Premium ===== */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.25;
            letter-spacing: 0.01em;
            border-radius: var(--radius-md);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: none;
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn:focus {
            outline: none;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        .btn-primary {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        }

        .btn-primary:hover:not(:disabled) {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .btn-primary:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 2px 8px 0 rgba(99, 102, 241, 0.4);
        }

        .btn-primary:focus {
            box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4), 0 0 0 4px rgba(99, 102, 241, 0.2);
        }

        .btn-secondary {
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            color: #475569;
            border: 2px solid #e2e8f0;
            box-shadow: var(--shadow-sm);
        }

        .btn-secondary:hover:not(:disabled) {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            border-color: #cbd5e1;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-secondary:focus {
            box-shadow: var(--shadow-sm), 0 0 0 4px rgba(99, 102, 241, 0.1);
        }

        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
            color: white;
            box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        }

        .btn-success:hover:not(:disabled) {
            background: linear-gradient(135deg, #059669 0%, #10b981 100%);
            box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.5);
            transform: translateY(-2px);
        }

        .btn-danger {
            background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
            color: white;
            box-shadow: 0 4px 14px 0 rgba(244, 63, 94, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        }

        .btn-danger:hover:not(:disabled) {
            background: linear-gradient(135deg, #e11d48 0%, #db2777 100%);
            box-shadow: 0 6px 20px 0 rgba(244, 63, 94, 0.5);
            transform: translateY(-2px);
        }

        .btn-ghost {
            background: transparent;
            color: #64748b;
            box-shadow: none;
        }

        .btn-ghost:hover:not(:disabled) {
            background: rgba(99, 102, 241, 0.08);
            color: var(--color-primary);
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.8125rem;
        }

        .btn-lg {
            padding: 1rem 2rem;
            font-size: 1rem;
        }

        .btn-icon {
            padding: 0.625rem;
            border-radius: var(--radius-sm);
        }

        /* Table container - ensure full width */
        #resource-table {
            width: 100% !important;
            overflow-x: auto;
        }

        /* Tabulator - Modern Premium Style */
        .tabulator {
            border: none;
            border-radius: var(--radius-lg);
            font-family: inherit;
            background: #ffffff;
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }

        .tabulator .tabulator-tableholder {
            overflow-x: auto;
            overflow-y: auto;
        }

        .tabulator-table {
            table-layout: auto;
        }

        .tabulator .tabulator-header {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            border-bottom: 2px solid #e2e8f0;
            font-weight: 600;
            overflow: visible;
        }

        .tabulator .tabulator-header .tabulator-headers {
            overflow: visible;
        }

        .tabulator .tabulator-header .tabulator-col {
            background: transparent;
            border-right: 1px solid #e2e8f0;
        }

        .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
            background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.1) 100%);
        }

        .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
            padding: 14px 16px;
        }

        .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #64748b;
            font-weight: 700;
        }

        .tabulator .tabulator-header .tabulator-frozen {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            border-right: 2px solid var(--color-primary-light) !important;
        }

        .tabulator-row {
            border-bottom: 1px solid #f1f5f9;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .tabulator-row:nth-child(even) {
            background-color: #fafbfc;
        }

        .tabulator-row:hover {
            background: linear-gradient(90deg, rgba(99, 102, 241, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%) !important;
            transform: scale(1.001);
        }

        .tabulator-row .tabulator-cell {
            padding: 14px 16px;
            font-size: 0.875rem;
            font-weight: 500;
            color: #334155;
            border-right: 1px solid #f1f5f9;
        }

        .tabulator-row .tabulator-frozen {
            background: inherit;
            border-right: 2px solid var(--color-primary-light) !important;
        }

        .tabulator-row:nth-child(even) .tabulator-frozen {
            background-color: #fafbfc;
        }

        .tabulator-row:hover .tabulator-frozen {
            background: linear-gradient(90deg, rgba(99, 102, 241, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%) !important;
        }

        /* Column resize handle */
        .tabulator .tabulator-header .tabulator-col .tabulator-col-resize-handle {
            width: 4px;
            background: transparent;
            transition: background-color 0.2s ease;
        }

        .tabulator .tabulator-header .tabulator-col .tabulator-col-resize-handle:hover {
            background: var(--color-primary);
        }

        /* Frozen column shadow */
        .tabulator .tabulator-frozen-right {
            box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
        }

        .tabulator .tabulator-frozen-left {
            box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
        }

        /* Sort arrows */
        .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter {
            color: #94a3b8;
        }

        .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-sorter,
        .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-sorter {
            color: var(--color-primary);
        }

        /* Move handle styling */
        .tabulator .tabulator-header .tabulator-col .tabulator-col-resize-guide {
            background: var(--color-primary);
        }

        /* Footer/pagination */
        .tabulator .tabulator-footer {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            border-top: 2px solid #e2e8f0;
            padding: 14px 16px;
        }

        .tabulator .tabulator-footer .tabulator-page {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: var(--radius-sm);
            padding: 8px 14px;
            margin: 0 3px;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .tabulator .tabulator-footer .tabulator-page:hover {
            border-color: var(--color-primary-light);
            background: rgba(99, 102, 241, 0.05);
        }

        .tabulator .tabulator-footer .tabulator-page.active {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-color: transparent;
            color: white;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
        }

        /* Row selection */
        .tabulator-row.tabulator-selected {
            background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
        }

        .tabulator-row.tabulator-selected:hover {
            background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
        }

        /* Resource type badges - Vibrant */
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            font-size: 0.6875rem;
            font-weight: 700;
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: var(--shadow-sm);
        }

        .badge-s3 { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; border: 1px solid #6ee7b7; }
        .badge-ec2 { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); color: #9a3412; border: 1px solid #fdba74; }
        .badge-lambda { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; border: 1px solid #fcd34d; }
        .badge-iam { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); color: #9d174d; border: 1px solid #f9a8d4; }
        .badge-rds { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; border: 1px solid #93c5fd; }
        .badge-dynamodb { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); color: #3730a3; border: 1px solid #a5b4fc; }
        .badge-kms { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); color: #6b21a8; border: 1px solid #d8b4fe; }
        .badge-logs { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%); color: #155e75; border: 1px solid #67e8f9; }
        .badge-default { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); color: #475569; border: 1px solid #cbd5e1; }

        /* Custom scrollbar */
        .table-container {
            scrollbar-width: thin;
            scrollbar-color: #c7d2fe #f1f5f9;
        }

        .table-container::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .table-container::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }

        .table-container::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 100%);
            border-radius: 10px;
            border: 2px solid #f1f5f9;
        }

        .table-container::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
        }

        /* Card styling - Premium */
        .card {
            background: #ffffff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(226, 232, 240, 0.8);
            width: 100%;
            max-width: 100%;
        }

        .card-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #f1f5f9;
            background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }

        /* Section headers */
        h1, h2, h3 {
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #1e293b;
        }

        /* Page headings with gradient */
        .page-title {
            font-size: 1.875rem;
            font-weight: 800;
            background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Subtle animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.4s ease-out;
        }

        /* Glass effect for modals */
        .glass {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* Hover lift effect */
        .hover-lift {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hover-lift:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-xl);
        }
    </style>

    {% block head %}{% endblock %}
</head>
<body class="h-full antialiased overflow-hidden">
    <div class="h-screen flex overflow-hidden">
        {% include "components/sidebar.html" %}

        <div class="flex-1 flex flex-col h-screen overflow-hidden">
            {% include "components/navbar.html" %}

            <main class="flex-1 p-4 overflow-auto min-h-0">
                <!-- Loading indicator -->
                <div class="htmx-indicator fixed top-20 right-6 z-50">
                    <div class="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-lg border border-gray-100">
                        <div class="animate-spin rounded-full h-5 w-5 border-2 border-indigo-600 border-t-transparent"></div>
                        <span class="text-sm font-medium text-gray-600">Loading...</span>
                    </div>
                </div>

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

    {% block scripts %}{% endblock %}
</body>
</html>
