@extends('layouts.app')

@section('title', 'Mobile Dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mobile-container max-w-md mx-auto">
        <div class="mobile-dashboard">
            @include('mobile.dashboard')
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('css/mobile-app.css') }}">
<style>
    /* Mobile-specific styles */
    @media (min-width: 768px) {
        .mobile-container {
            border: 12px solid #333;
            border-radius: 36px;
            padding: 8px;
            background: #fff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            height: 80vh;
            overflow-y: auto;
        }
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('js/mobile-app.js') }}"></script>
@endpush