<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@yield('title', 'Admin') | Clear.Bank</title>
  <link href="{{ asset('css2?family=Inter:wght@400;500;600;700;800&display=swap') }}" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
    body { background: #0f172a; color: #f8fafc; min-height: 100vh; }
    
    .admin-header { background: #1e293b; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155; }
    .admin-header h1 { font-size: 20px; font-weight: 800; color: white; }
    .admin-brand { font-size: 18px; font-weight: 800; color: #00E5C4; letter-spacing: -0.5px; }
    
    .admin-layout { display: flex; min-height: calc(100vh - 60px); }
    .admin-sidebar { width: 260px; background: #1e293b; border-right: 1px solid #334155; padding: 24px 0; }
    .admin-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 24px; color: #94a3b8; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.2s; }
    .admin-nav-item:hover, .admin-nav-item.active { background: #0f172a; color: white; border-right: 3px solid #00E5C4; }
    .admin-nav-item svg { width: 20px; height: 20px; }
    
    .admin-content { flex: 1; padding: 32px; overflow-x: auto; }
    
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 32px; }
    .stat-card { background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 24px; }
    .stat-card h3 { font-size: 14px; color: #94a3b8; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    .stat-card .value { font-size: 32px; font-weight: 800; color: white; }
    .stat-card .value.accent { color: #00E5C4; }
    
    .data-table { width: 100%; background: #1e293b; border: 1px solid #334155; border-radius: 16px; overflow: hidden; }
    .data-table table { width: 100%; border-collapse: collapse; }
    .data-table th { background: #0f172a; padding: 16px 20px; text-align: left; font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
    .data-table td { padding: 16px 20px; border-top: 1px solid #334155; font-size: 14px; color: #f1f5f9; }
    .data-table tr:hover td { background: rgba(255,255,255,0.02); }
    
    .badge { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; display: inline-block; text-transform: uppercase; }
    .badge-success { background: #064e3b; color: #10b981; }
    .badge-warning { background: #451a03; color: #f59e0b; }
    .badge-danger { background: #450a0a; color: #ef4444; }
    .badge-info { background: #0c4a6e; color: #38bdf8; }
    
    .btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
    .btn-primary { background: #00E5C4; color: #0f172a; }
    .btn-primary:hover { background: #00ccb3; }
    .btn-sm { padding: 6px 12px; font-size: 12px; }
    
    .empty-state { text-align: center; padding: 60px 20px; color: #64748b; }
    .empty-state svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.5; }
    
    a { color: #00E5C4; text-decoration: none; }
    a:hover { text-decoration: underline; }
    
    form { display: inline; }
  </style>
</head>
<body>
  <div class="admin-header">
    <div class="admin-brand">Clear.Bank Admin</div>
    <div style="display: flex; align-items: center; gap: 16px;">
      <span style="font-size: 14px; color: #94a3b8;">{{ auth()->user()->name }}</span>
      <form method="POST" action="{{ route('logout') }}">
        @csrf
        <button class="btn btn-sm" style="background: #334155; color: #f8fafc;">Logout</button>
      </form>
    </div>
  </div>
  
  <div class="admin-layout">
    <nav class="admin-sidebar">
      <a href="{{ route('admin.index') }}" class="admin-nav-item {{ request()->routeIs('admin.index') ? 'active' : '' }}">
        <i data-lucide="layout-dashboard"></i>
        Dashboard
      </a>
      <a href="{{ route('admin.users') }}" class="admin-nav-item {{ request()->routeIs('admin.users*') ? 'active' : '' }}">
        <i data-lucide="users"></i>
        Users
      </a>
      <a href="{{ route('admin.transactions') }}" class="admin-nav-item {{ request()->routeIs('admin.transactions') ? 'active' : '' }}">
        <i data-lucide="arrow-right-left"></i>
        Transactions
      </a>
      <a href="{{ route('admin.support') }}" class="admin-nav-item {{ request()->routeIs('admin.support*') ? 'active' : '' }}">
        <i data-lucide="headphones"></i>
        Support
      </a>
      <div style="margin-top: 24px; padding: 0 24px;">
        <a href="{{ route('dashboard') }}" class="admin-nav-item" style="border-radius: 8px;">
          <i data-lucide="arrow-left"></i>
          Back to App
        </a>
      </div>
    </nav>
    
    <main class="admin-content">
      @if(session('status'))
        <div style="background: #064e3b; color: #10b981; padding: 16px; border-radius: 12px; margin-bottom: 24px; font-weight: 600;">
          {{ session('status') }}
        </div>
      @endif
      
      @yield('content')
    </main>
  </div>
  
  <script>lucide.createIcons();</script>
</body>
</html>
