<?php include "config.php"; include "auth.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<link href="/firstchoice_admin/admin/assets/css/admin.css" rel="stylesheet">
<style>
body { background: #f5f7fa !important; }
.sidebar { width: 270px !important; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; min-height: 100vh !important; color: white !important; padding: 25px 0 !important; position: fixed !important; left: 0 !important; top: 0 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important; z-index: 1000 !important; overflow-y: auto !important; }
.main-content { margin-left: 270px !important; flex: 1 !important; padding: 30px !important; }
.page-title { margin-bottom: 30px !important; color: #2c3e50 !important; font-size: 32px !important; font-weight: 800 !important; }
.table { border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important; }
.table thead { background: #f0f2f5 !important; }
.table th { font-weight: 700 !important; color: #667eea !important; padding: 16px 15px !important; }
.table td { padding: 14px 15px !important; }
.btn { border-radius: 6px !important; font-weight: 600 !important; transition: all 0.3s ease !important; }
.btn-primary { background: linear-gradient(135deg, #667eea 0%, #5568d3 100%) !important; color: white !important; }
.btn-primary:hover { background: linear-gradient(135deg, #5568d3 0%, #4a5bc7 100%) !important; transform: translateY(-2px) !important; }
.btn-danger { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important; color: white !important; }
.btn-danger:hover { background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important; }
.btn-success { background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important; color: white !important; }
.btn-secondary { background: #ecf0f1 !important; color: #2c3e50 !important; border: 1px solid #d5dce0 !important; }
.card { border: none !important; border-radius: 10px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important; }
.stat-card { background: white !important; border-radius: 10px !important; padding: 25px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important; transition: all 0.3s ease !important; }
.stat-card:hover { transform: translateY(-8px) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important; }
.badge { padding: 6px 12px !important; border-radius: 20px !important; font-weight: 700 !important; }
.form-control { border: 1px solid #d5dce0 !important; border-radius: 6px !important; padding: 11px 14px !important; transition: all 0.3s ease !important; }
.form-control:focus { border-color: #667eea !important; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important; }
.sidebar-toggle { display: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; padding: 12px 15px; font-size: 18px; cursor: pointer; z-index: 1001; }
/* Tablet & Mobile Responsive */
@media (max-width: 1024px) {
  .sidebar { width: 240px !important; }
  .main-content { margin-left: 240px !important; padding: 20px !important; }
  .page-title { font-size: 26px !important; }
  .table th, .table td { padding: 12px 10px !important; font-size: 12px !important; }
}
@media (max-width: 768px) {
  .sidebar { position: fixed !important; left: 0 !important; top: 0 !important; width: 260px !important; transform: translateX(-100%) !important; transition: transform 0.3s ease !important; height: 100vh !important; }
  .sidebar.active { transform: translateX(0) !important; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) !important; }
  .sidebar::after { content: ''; position: fixed; left: 260px; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); display: none; z-index: 999; }
  .sidebar.active::after { display: block !important; }
  .main-content { margin-left: 0 !important; padding: 15px !important; }
  .sidebar-toggle { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; width: auto !important; }
  .page-title { font-size: 22px !important; margin-bottom: 20px !important; padding-top: 10px !important; }
  .table { font-size: 12px !important; }
  .table th, .table td { padding: 10px 8px !important; }
  .btn { padding: 8px 12px !important; font-size: 11px !important; }
  .btn-sm { padding: 5px 10px !important; font-size: 10px !important; }
  .row { flex-direction: column !important; }
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { width: 100% !important; }
  .stat-card { margin-bottom: 15px !important; padding: 20px !important; }
  .stat-card h6 { font-size: 12px !important; }
  .stat-card h3 { font-size: 24px !important; }
  .form-container { max-width: 100% !important; }
  .page-header { flex-direction: column !important; }
  .page-header .btn { width: 100% !important; margin-top: 10px !important; }
}
@media (max-width: 480px) {
  .sidebar { width: 100% !important; }
  .sidebar-toggle { display: block !important; }
  .main-content { margin-left: 0 !important; padding: 10px !important; }
  .page-title { font-size: 18px !important; margin-bottom: 15px !important; }
  .table { font-size: 11px !important; overflow-x: auto !important; display: block !important; }
  .table thead { font-size: 10px !important; }
  .table tbody tr { display: block !important; margin-bottom: 10px !important; border: 1px solid #ddd !important; }
  .table td { display: block !important; width: 100% !important; padding: 8px 5px !important; }
  .table td::before { content: attr(data-label) !important; font-weight: bold !important; color: #667eea !important; margin-right: 10px !important; }
  .card { margin-bottom: 15px !important; padding: 15px !important; }
  .btn { width: 100% !important; margin-bottom: 8px !important; padding: 10px !important; }
  .btn-sm { width: auto !important; }
  .form-control { padding: 10px 8px !important; font-size: 14px !important; }
  .form-label { font-size: 12px !important; }
  h2.page-title { font-size: 18px !important; }
  .d-flex { flex-direction: column !important; }
  .d-flex > * { margin-bottom: 10px !important; }
}
</style>
</head>
<body>

<div class="admin-wrapper">
