<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', config('app.name')) - Salon</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />
    <style>
      * { box-sizing: border-box; }
      body { margin: 0; font-family: system-ui, sans-serif; background: #f8fafc; color: #1e293b; -webkit-font-smoothing: antialiased; }
      .salon-wrap { min-height: 100vh; display: flex; }
      .salon-sidebar { width: 16rem; flex-shrink: 0; min-height: 100vh; background: #1e293b; color: #e2e8f0; padding: 1.25rem 0 1rem; overflow-y: auto; }
      .salon-sidebar .brand { padding: 0 1rem 1rem; font-weight: 600; font-size: 1.125rem; color: #fff; }
      .salon-sidebar nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.5rem; }
      .salon-sidebar nav a { display: block; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #cbd5e1; text-decoration: none; border-radius: 0.375rem; }
      .salon-sidebar nav a:hover { background: #334155; color: #fff; }
      .salon-sidebar nav a.active { background: #334155; color: #fff; }
      .salon-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
      .salon-topbar { height: 3.5rem; background: #fff; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; }
      .salon-content { flex: 1; padding: 1rem 1.5rem; }
      .salon-card { background: #fff; border-radius: 0.75rem; border: 1px solid #e2e8f0; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
      .salon-card h2 { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0 0 0.75rem; }
      .salon-grid { display: grid; gap: 1rem; }
      .salon-grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
      .salon-grid-2 { grid-template-columns: 2fr 1fr; }
      @media (max-width: 768px) { .salon-grid-2 { grid-template-columns: 1fr; } }
      .salon-stat { background: #fff; border-radius: 0.75rem; border: 1px solid #e2e8f0; padding: 1.25rem; }
      .salon-stat p:first-child { font-size: 0.875rem; color: #64748b; margin: 0 0 0.25rem; }
      .salon-stat p:last-child { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin: 0; }
      .salon-list { list-style: none; padding: 0; margin: 0; }
      .salon-list li { padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
      .salon-list li:last-child { border-bottom: none; }
      .salon-alert-success { background: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; padding: 0.5rem 1rem; border-radius: 0.5rem; margin: 0.5rem 1rem; font-size: 0.875rem; }
      .salon-alert-error { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; padding: 0.5rem 1rem; border-radius: 0.5rem; margin: 0.5rem 1rem; font-size: 0.875rem; }

      /* Utility styles to make Tailwind-like classes actually look good without Tailwind */
      .max-w-2xl { max-width: 42rem; }
      .max-w-3xl { max-width: 48rem; }
      .max-w-4xl { max-width: 56rem; }
      .max-w-5xl { max-width: 64rem; }
      .max-w-6xl { max-width: 72rem; }

      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-between { justify-content: space-between; }
      .flex-wrap { flex-wrap: wrap; }
      .gap-3 { gap: 0.75rem; }
      .gap-4 { gap: 1rem; }

      .grid { display: grid; gap: 1rem; }
      .grid-cols-1 { grid-template-columns: 1fr; }
      .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

      .rounded-lg { border-radius: 0.5rem; }
      .rounded-xl { border-radius: 0.75rem; }
      .shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
      .border { border: 1px solid #e2e8f0; }
      .border-slate-200 { border-color: #e2e8f0; }

      .bg-white { background-color: #ffffff; }
      .bg-slate-800 { background-color: #0f172a; }
      .bg-slate-200 { background-color: #e5e7eb; }
      .bg-emerald-600 { background-color: #059669; }

      .text-sm { font-size: 0.875rem; }
      .text-2xl { font-size: 1.5rem; }
      .font-semibold { font-weight: 600; }
      .font-medium { font-weight: 500; }
      .text-slate-800 { color: #1e293b; }
      .text-slate-700 { color: #334155; }
      .text-slate-600 { color: #475569; }
      .text-slate-500 { color: #64748b; }

      .px-4 { padding-left: 1rem; padding-right: 1rem; }
      .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
      .mb-4 { margin-bottom: 1rem; }
      .mt-1 { margin-top: 0.25rem; }

      .space-y-4 > * + * { margin-top: 1rem; }

      /* Generic form styling in content area */
      .salon-content input[type="text"],
      .salon-content input[type="email"],
      .salon-content input[type="number"],
      .salon-content input[type="time"],
      .salon-content input[type="date"],
      .salon-content select,
      .salon-content textarea {
          width: 100%;
          padding: 0.45rem 0.6rem;
          border-radius: 0.5rem;
          border: 1px solid #cbd5e1;
          font-size: 0.875rem;
          color: #0f172a;
      }

      .salon-content button[type="submit"],
      .salon-content a.px-4.py-2 {
          border-radius: 0.6rem;
          font-size: 0.85rem;
          font-weight: 500;
      }

      /* Premium button styling similar to Tailor app */
      .btn,
      .salon-content a.px-4.py-2.bg-slate-800,
      .salon-content button.px-4.py-2.bg-slate-800 {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.5rem 1.1rem;
          border-radius: 9999px;
          font-size: 0.85rem;
          font-weight: 500;
          border: 1px solid transparent;
          cursor: pointer;
          background-color: #020617;
          color: #ffffff;
          box-shadow: 0 10px 15px -3px rgba(15,23,42,0.2);
          text-decoration: none;
          transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
      }

      .btn:hover,
      .salon-content a.px-4.py-2.bg-slate-800:hover,
      .salon-content button.px-4.py-2.bg-slate-800:hover {
          background-color: #020617;
          box-shadow: 0 20px 25px -5px rgba(15,23,42,0.25);
          transform: translateY(-1px);
      }

      .btn-outline,
      .salon-content a.px-4.py-2.bg-slate-200,
      .salon-content button.px-4.py-2.bg-slate-200 {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.5rem 1.1rem;
          border-radius: 9999px;
          font-size: 0.85rem;
          font-weight: 500;
          border: 1px solid #cbd5e1;
          background-color: #ffffff;
          color: #020617;
          text-decoration: none;
          cursor: pointer;
          transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
      }

      .btn-outline:hover,
      .salon-content a.px-4.py-2.bg-slate-200:hover,
      .salon-content button.px-4.py-2.bg-slate-200:hover {
          background-color: #e5e7eb;
          box-shadow: 0 10px 15px -3px rgba(15,23,42,0.1);
          transform: translateY(-1px);
      }

      /* Page header (title + actions) */
      .page-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
          margin-bottom: 1.25rem;
      }
      .page-title {
          font-size: 1.25rem;
          font-weight: 600;
          color: #0f172a;
          margin: 0;
      }
      .page-subtitle {
          font-size: 0.875rem;
          color: #64748b;
          margin-top: 0.15rem;
      }
      .page-actions {
          display: flex;
          align-items: center;
          gap: 0.75rem;
      }

      /* Soft status badges */
      .badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.15rem 0.6rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 500;
          text-transform: lowercase;
      }
      .badge-success { background-color: #dcfce7; color: #166534; }
      .badge-warning { background-color: #fef9c3; color: #854d0e; }
      .badge-info { background-color: #dbeafe; color: #1d4ed8; }
      .badge-muted { background-color: #e5e7eb; color: #374151; }
      .badge-danger { background-color: #fee2e2; color: #b91c1c; }

      /* Table action links */
      .table-actions {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 0.75rem;
          white-space: nowrap;
      }
      .table-actions a {
          font-size: 0.8rem;
          font-weight: 500;
          color: #4b5563;
          text-decoration: none;
      }
      .table-actions a:hover {
          color: #111827;
      }
      .table-actions .link-danger,
      .table-actions button.link-danger {
          color: #dc2626;
      }
      .table-actions .link-danger:hover,
      .table-actions button.link-danger:hover {
          color: #b91c1c;
      }
      .table-actions button.link-danger {
          background: none;
          border: none;
          padding: 0;
          cursor: pointer;
          font-size: 0.8rem;
          font-weight: 500;
      }
    </style>
    @stack('styles')
</head>
<body>
    <div class="salon-wrap">
        <aside class="salon-sidebar">
            <div class="brand">Salon Manager</div>
            <nav>
                @can('view dashboard')
                    <a href="{{ route('dashboard') }}" class="{{ request()->routeIs('dashboard') ? 'active' : '' }}">Dashboard</a>
                @endcan
                @can('manage branches')
                    <a href="{{ route('branches.index') }}" class="{{ request()->routeIs('branches.*') ? 'active' : '' }}">Branches</a>
                @endcan
                @can('manage customers')
                    <a href="{{ route('customers.index') }}" class="{{ request()->routeIs('customers.*') ? 'active' : '' }}">Customers</a>
                @endcan
                @can('manage staff')
                    <a href="{{ route('staff.index') }}" class="{{ request()->routeIs('staff.*') ? 'active' : '' }}">Staff</a>
                @endcan
                @can('manage services')
                    <a href="{{ route('service-categories.index') }}" class="{{ request()->routeIs('service-categories.*') ? 'active' : '' }}">Categories</a>
                    <a href="{{ route('services.index') }}" class="{{ request()->routeIs('services.*') ? 'active' : '' }}">Services</a>
                @endcan
                @can('manage appointments')
                    <a href="{{ route('appointments.index') }}" class="{{ request()->routeIs('appointments.*') ? 'active' : '' }}">Appointments</a>
                    <a href="{{ route('appointments.calendar') }}">Calendar</a>
                @endcan
                @can('manage walk-ins')
                    <a href="{{ route('walk-ins.index') }}" class="{{ request()->routeIs('walk-ins.*') ? 'active' : '' }}">Walk-In Queue</a>
                @endcan
            </nav>
        </aside>

        <div class="salon-main">
            <header class="salon-topbar">
                <span class="salon-breadcrumb">@yield('breadcrumb', 'Dashboard')</span>
                <div>
                    <span>{{ Auth::user()->name }}</span>
                    <a href="{{ route('profile.edit') }}" style="margin-left:1rem;">Profile</a>
                    <form action="{{ route('logout') }}" method="POST" style="display:inline;">
                        @csrf
                        <button type="submit" style="margin-left:0.5rem;background:none;border:none;cursor:pointer;color:#475569;text-decoration:underline;">Log out</button>
                    </form>
                </div>
            </header>

            @if (session('success'))
                <div class="salon-alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="salon-alert-error">{{ session('error') }}</div>
            @endif

            <main class="salon-content">
                @isset($slot)
                    {{ $slot }}
                @else
                    @yield('content')
                @endisset
            </main>
        </div>
    </div>
    @stack('scripts')
</body>
</html>
