<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{$settings->site_name}} Logistics Company | Invoice</title>
    
    <!-- Define Charset -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- Page Description and Author -->
    <meta name="description" content="{{$settings->site_name}} Tracking and Logistics">
    <meta name="keywords" content="{{$settings->site_name}}, logistics, shipping, courier">
    <meta name="author" content="{{$settings->site_name}}">
    
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '{{ $settings->brand_light_color ?? '#fff7ed' }}',
                            100: '{{ $settings->brand_light_color ?? '#fff7ed' }}',
                            200: '{{ $settings->brand_light_color ?? '#fff7ed' }}',
                            300: '{{ $settings->brand_primary_color ?? '#f7931a' }}',
                            400: '{{ $settings->brand_primary_color ?? '#f7931a' }}',
                            500: '{{ $settings->brand_primary_color ?? '#f7931a' }}',
                            600: '{{ $settings->brand_primary_color ?? '#f7931a' }}',
                            700: '{{ $settings->brand_secondary_color ?? '#155c9d' }}',
                            800: '{{ $settings->brand_secondary_color ?? '#155c9d' }}',
                            900: '{{ $settings->brand_dark_color ?? '#102033' }}',
                            950: '{{ $settings->brand_dark_color ?? '#102033' }}',
                        },
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <!-- Google Fonts -->
    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Custom Styles -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
        }
        
        @page {
            size: A4;
            margin: 0.5cm;
        }
        
        @media print {
            html, body {
                width: 210mm;
                height: 297mm;
                background-color: white !important;
            }
            
            body {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }
            
            .print\:hidden {
                display: none !important;
            }
            
            .print\:block {
                display: block !important;
            }
            
            .print\:shadow-none {
                box-shadow: none !important;
            }
            
            .print\:bg-white {
                background-color: white !important;
            }
        }
    </style>
    @include('partials.brand-colors-css')
</head>
<body>
@yield('content')
</body>

<script>
    // Initialize Lucide icons
    lucide.createIcons();
</script>

</html>
