@php
    $settings = $websiteSettings ?? \App\Models\WebsiteSetting::current();
    $adminPrimary = $settings['admin_primary_color'] ?? '#1e84c4';
    $adminSecondary = $settings['admin_secondary_color'] ?? '#5d7186';
    $adminAccent = $settings['admin_accent_color'] ?? '#23c6c8';
    $adminBackground = $settings['admin_background_color'] ?? '#f3f3f5';
    $adminText = $settings['admin_text_color'] ?? '#323a46';
    $adminSidebar = $settings['admin_sidebar_color'] ?? '#ffffff';
    $adminTopbar = $settings['admin_topbar_color'] ?? '#ffffff';

    $hexToRgb = function (string $hex, string $fallback) {
        $hex = ltrim($hex, '#');
        if (strlen($hex) !== 6 || ! ctype_xdigit($hex)) {
            return $fallback;
        }

        return hexdec(substr($hex, 0, 2)) . ',' . hexdec(substr($hex, 2, 2)) . ',' . hexdec(substr($hex, 4, 2));
    };

    $contrast = function (string $hex) {
        $hex = ltrim($hex, '#');
        if (strlen($hex) !== 6 || ! ctype_xdigit($hex)) {
            return '#ffffff';
        }

        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        return (($r * 299 + $g * 587 + $b * 114) / 1000) >= 150 ? '#1f2937' : '#ffffff';
    };

    $primaryRgb = $hexToRgb($adminPrimary, '30,132,196');
    $secondaryRgb = $hexToRgb($adminSecondary, '93,113,134');
    $accentRgb = $hexToRgb($adminAccent, '35,198,200');
    $backgroundRgb = $hexToRgb($adminBackground, '243,243,245');
    $textRgb = $hexToRgb($adminText, '50,58,70');
    $sidebarRgb = $hexToRgb($adminSidebar, '255,255,255');
    $topbarRgb = $hexToRgb($adminTopbar, '255,255,255');
    $primaryContrast = $contrast($adminPrimary);
    $secondaryContrast = $contrast($adminSecondary);
    $accentContrast = $contrast($adminAccent);
    $sidebarText = $contrast($adminSidebar);
    $topbarText = $contrast($adminTopbar);
@endphp

<style>
    :root {
        --admin-primary-color: {{ $adminPrimary }};
        --admin-secondary-color: {{ $adminSecondary }};
        --admin-accent-color: {{ $adminAccent }};
        --admin-background-color: {{ $adminBackground }};
        --admin-text-color: {{ $adminText }};
        --admin-sidebar-color: {{ $adminSidebar }};
        --admin-topbar-color: {{ $adminTopbar }};

        --admin-primary-rgb: {{ $primaryRgb }};
        --admin-secondary-rgb: {{ $secondaryRgb }};
        --admin-accent-rgb: {{ $accentRgb }};
        --admin-background-rgb: {{ $backgroundRgb }};
        --admin-text-rgb: {{ $textRgb }};
        --admin-sidebar-rgb: {{ $sidebarRgb }};
        --admin-topbar-rgb: {{ $topbarRgb }};

        --admin-primary-contrast: {{ $primaryContrast }};
        --admin-secondary-contrast: {{ $secondaryContrast }};
        --admin-accent-contrast: {{ $accentContrast }};
        --admin-sidebar-text: {{ $sidebarText }};
        --admin-topbar-text: {{ $topbarText }};

        --admin-surface-color: color-mix(in srgb, var(--admin-background-color) 82%, white);
        --admin-surface-strong: color-mix(in srgb, var(--admin-background-color) 68%, white);
        --admin-muted-color: color-mix(in srgb, var(--admin-text-color) 66%, var(--admin-background-color));
        --admin-border-color: rgba(var(--admin-text-rgb), .12);
        --admin-shadow-color: rgba(var(--admin-text-rgb), .10);

        --bs-primary: var(--admin-primary-color);
        --bs-secondary: var(--admin-secondary-color);
        --bs-info: var(--admin-accent-color);
        --bs-success: var(--admin-secondary-color);
        --bs-primary-rgb: var(--admin-primary-rgb);
        --bs-secondary-rgb: var(--admin-secondary-rgb);
        --bs-info-rgb: var(--admin-accent-rgb);
        --bs-body-bg: var(--admin-background-color);
        --bs-body-color: var(--admin-text-color);
        --bs-link-color: var(--admin-primary-color);
        --bs-link-hover-color: var(--admin-accent-color);
    }

    html,
    body,
    .wrapper,
    .page-content {
        background: var(--admin-background-color) !important;
        color: var(--admin-text-color) !important;
    }

    .main-nav,
    .logo-box,
    .scrollbar {
        background: var(--admin-sidebar-color) !important;
        color: var(--admin-sidebar-text) !important;
        border-color: var(--admin-border-color) !important;
    }

    .topbar,
    .navbar-header {
        background: var(--admin-topbar-color) !important;
        color: var(--admin-topbar-text) !important;
        border-color: var(--admin-border-color) !important;
    }

    .navbar-nav .menu-title,
    .navbar-nav .nav-link,
    .nav-text,
    .nav-icon {
        color: var(--admin-sidebar-text) !important;
    }

    .topbar .topbar-button,
    .topbar .dropdown .btn,
    .topbar .fw-semibold,
    .topbar small {
        color: var(--admin-topbar-text) !important;
    }

    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:hover,
    .topbar-button:hover {
        background: rgba(var(--admin-primary-rgb), .14) !important;
        color: var(--admin-primary-color) !important;
    }

    .navbar-nav .nav-link.active .nav-icon,
    .navbar-nav .nav-link:hover .nav-icon,
    .navbar-nav .nav-link.active .nav-text,
    .navbar-nav .nav-link:hover .nav-text {
        color: var(--admin-primary-color) !important;
    }

    .card,
    .dropdown-menu,
    .modal-content,
    .offcanvas,
    .list-group-item,
    .table,
    .content-action {
        background: var(--admin-surface-color) !important;
        border-color: var(--admin-border-color) !important;
        color: var(--admin-text-color) !important;
    }

    .card,
    .content-action {
        box-shadow: 0 14px 34px var(--admin-shadow-color) !important;
    }

    .card-header,
    .modal-header,
    .modal-footer {
        background: var(--admin-surface-strong) !important;
        border-color: var(--admin-border-color) !important;
    }

    h1, h2, h3, h4, h5, h6,
    .card-title,
    .fw-bold,
    .fw-semibold,
    .dropdown-header {
        color: var(--admin-text-color) !important;
    }

    .text-muted,
    small,
    .form-text {
        color: var(--admin-muted-color) !important;
    }

    a,
    .content-action i,
    .text-primary,
    iconify-icon {
        color: var(--admin-primary-color) !important;
    }

    a:hover,
    .dropdown-item:hover {
        color: var(--admin-accent-color) !important;
    }

    .btn-primary,
    .bg-primary,
    .badge.bg-primary,
    .progress-bar,
    .form-check-input:checked {
        background: var(--admin-primary-color) !important;
        border-color: var(--admin-primary-color) !important;
        color: var(--admin-primary-contrast) !important;
    }

    .btn-secondary,
    .bg-secondary,
    .badge.bg-secondary {
        background: var(--admin-secondary-color) !important;
        border-color: var(--admin-secondary-color) !important;
        color: var(--admin-secondary-contrast) !important;
    }

    .btn-info,
    .bg-info,
    .badge.bg-info {
        background: var(--admin-accent-color) !important;
        border-color: var(--admin-accent-color) !important;
        color: var(--admin-accent-contrast) !important;
    }

    .btn-outline-primary {
        color: var(--admin-primary-color) !important;
        border-color: var(--admin-primary-color) !important;
    }

    .btn-outline-primary:hover {
        background: var(--admin-primary-color) !important;
        color: var(--admin-primary-contrast) !important;
    }

    .form-control,
    .form-select,
    .input-group-text,
    textarea {
        background: var(--admin-surface-color) !important;
        border-color: var(--admin-border-color) !important;
        color: var(--admin-text-color) !important;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--admin-primary-color) !important;
        box-shadow: 0 0 0 .2rem rgba(var(--admin-primary-rgb), .18) !important;
    }

    .table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--admin-text-color);
        --bs-table-border-color: var(--admin-border-color);
    }
</style>