@once
    @section('css')
        @parent
        <style>
            .card-widget {
                background: radial-gradient(circle at top right, rgba(255, 255, 255, .15), transparent 45%),
                    linear-gradient(160deg, #101524, #1c2439 60%, #202a44);
                border: none;
                border-radius: 1.25rem;
                color: #f8fafc;
                overflow: hidden;
                position: relative;
                transition: transform .25s ease, box-shadow .25s ease;
            }

            .card-widget:hover {
                transform: translateY(-4px);
                box-shadow: 0 18px 45px rgba(15, 23, 42, .45);
            }

            .card-widget__body {
                min-height: 170px;
                padding: 1.75rem;
                display: flex;
                flex-direction: column;
                gap: 1.25rem;
            }

            .card-widget__title {
                display: flex;
                flex-direction: column;
                gap: .15rem;
            }

            .card-widget__eyebrow {
                font-size: .78rem;
                font-weight: 600;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: rgba(248, 250, 252, .8);
            }

            .card-widget__divider {
                width: 48px;
                height: 2px;
                border-radius: 999px;
                background: rgba(248, 250, 252, .3);
                margin: .35rem 0;
            }

            .card-widget__subtitle {
                font-size: .85rem;
                letter-spacing: normal;
                text-transform: none;
                color: rgba(248, 250, 252, .65);
                margin-top: .2rem;
            }

            .card-widget__value {
                font-size: 2rem;
                font-weight: 600;
                color: #fff;
                flex-grow: 1;
                word-break: break-word;
            }

            .card-widget__value > *:last-child {
                margin-bottom: 0;
            }

            .card-widget__value ol,
            .card-widget__value ul {
                margin-bottom: 0;
                font-size: 1rem;
                padding-left: 1.1rem;
            }

            .card-widget__value li {
                margin-bottom: .25rem;
            }
        </style>
    @endsection
@endonce

@if (isset($card_data['title'], $card_data['data']))
    @php
        $size = (int) ($card_data['size'] ?? 25);
        $columnClass = $card_data['column_class'] ?? match (true) {
            $size >= 40 => 'col-12 col-lg-6',
            $size >= 30 => 'col-sm-6 col-lg-4',
            default => 'col-sm-6 col-lg-3',
        };
        $titleRaw = (string) ($card_data['title'] ?? '');
        $titleParts = array_values(
            array_filter(
                preg_split('/<hr\s*\/?>/i', $titleRaw),
                static fn ($part) => trim((string) $part) !== ''
            )
        );
        $titlePrimary = $titleParts[0] ?? $titleRaw;
        $titleSecondary = count($titleParts) > 1 ? implode('<br/>', array_slice($titleParts, 1)) : null;
    @endphp
    <div class="{{ $columnClass }} mb-4 d-flex">
        <div class="card card-widget shadow-sm h-100 w-100">
            <div class="card-widget__body">
                <div class="card-widget__title">
                    <div class="card-widget__eyebrow">{!! $titlePrimary !!}</div>
                    @if ($titleSecondary)
                        <span class="card-widget__divider"></span>
                        <div class="card-widget__subtitle">{!! $titleSecondary !!}</div>
                    @endif
                </div>
                <div class="card-widget__value">
                    {!! $card_data['data'] !!}
                </div>
            </div>
        </div>
    </div>
@else
    <div class="col-sm-6 col-lg-3 mb-4"></div>
@endif

@section('scripts')
@parent
@endsection