/* Styles spécifiques au Dashboard Gestionnaire et Admin */
@import url('../../../client/assets/css/style.css?v=5');

.dashboard-layout { display: flex; min-height: 100vh; background: var(--dark-bg); }
.sidebar { width: 260px; background: var(--dark-card); border-right: 1px solid var(--dark-border); padding: 1.5rem 1rem; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar-header { margin-bottom: 2rem; padding: 0 1rem; }
.sidebar-menu { list-style: none; flex: 1; }
.sidebar-menu li { margin-bottom: 0.5rem; }
.sidebar-menu a { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; color: var(--text-secondary); border-radius: var(--radius-md); font-weight: 500; transition: var(--transition); }
.sidebar-menu a i { width: 20px; font-size: 1.1rem; }
.sidebar-menu a:hover, .sidebar-menu a.active { background: rgba(255,107,0,0.12); color: var(--orange); }

.main-dashboard { flex: 1; overflow-y: auto; padding: 2rem; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.dashboard-title h1 { font-size: 1.8rem; font-weight: 800; }
.dashboard-title p { color: var(--text-secondary); font-size: 0.9rem; }

/* Stats Cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.stat-card { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem; transition: var(--transition); }
.stat-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.stat-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.stat-icon.orange { background: rgba(255,107,0,0.15); color: var(--orange); }
.stat-icon.green { background: rgba(0,198,86,0.15); color: #00C656; }
.stat-icon.blue { background: rgba(59,130,246,0.15); color: #3B82F6; }
.stat-info h3 { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.3rem; }
.stat-info .stat-val { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); line-height: 1; }

/* Tableaux */
.table-container { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; }
.table-header { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--dark-border); display: flex; justify-content: space-between; align-items: center; }
.table-header h3 { font-size: 1.1rem; font-weight: 700; }
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 1rem 1.5rem; text-align: left; }
th { background: var(--dark-surface); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--dark-border); }
td { font-size: 0.9rem; border-bottom: 1px solid var(--dark-border); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,107,0,0.03); }

/* Badges Statuts Commande */
.badge-status { padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; }
.badge-status select { background: transparent; border: none; color: inherit; font-family: inherit; font-weight: inherit; outline: none; cursor: pointer; padding-right: 0.5rem; }

/* Actions */
.action-btn { width: 32px; height: 32px; border-radius: 6px; border: none; background: var(--dark-surface); color: var(--text-secondary); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; }
.action-btn:hover { background: var(--orange); color: white; }
.action-btn.danger:hover { background: #F87171; color: white; }

/* ─── OPTIMISATION ET RESPONSIVITÉ MOBILE (ADMIN & GESTIONNAIRE) ─── */
.mobile-admin-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  background: var(--dark-card);
  border-bottom: 1px solid var(--dark-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

@media(max-width: 992px) {
  .mobile-admin-header { display: flex !important; }
  .dashboard-layout { flex-direction: column !important; }
  
  /* Sidebar en Tiroir Vertical complet */
  .sidebar { 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-100%) !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 1.5rem 1rem !important;
    background: #0f1420 !important;
    border-right: 1px solid var(--dark-border) !important;
    border-top: none !important;
  }
  
  .sidebar.active {
    transform: translateX(0) !important;
  }
  
  .sidebar-header { display: block !important; margin-bottom: 1.5rem !important; }
  .sidebar-footer { display: block !important; margin-top: auto !important; }
  
  /* Forcer le menu sous forme de liste VERTICALE complète */
  .sidebar-menu { 
    display: flex !important; 
    flex-direction: column !important; 
    width: 100% !important; 
    justify-content: flex-start !important; 
    align-items: stretch !important; 
    gap: 0.4rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .sidebar-menu li { 
    width: 100% !important; 
    margin-bottom: 0 !important; 
  }
  
  .sidebar-menu a { 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: flex-start !important; 
    gap: 1rem !important; 
    padding: 0.85rem 1rem !important; 
    font-size: 0.95rem !important; 
    border-radius: var(--radius-md) !important; 
    width: 100% !important; 
    text-align: left !important;
    white-space: normal !important;
  }
  
  .sidebar-menu a i { 
    font-size: 1.1rem !important; 
    width: 20px !important; 
    margin: 0 !important; 
  }

  .main-dashboard { padding: 1.2rem 1rem; }
  .dashboard-header { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
  .dashboard-title h1 { font-size: 1.4rem; }
  .dashboard-header > div { width: 100%; flex-wrap: wrap; gap: 0.8rem !important; }
}

@media(max-width: 768px) {
  .main-dashboard { padding: 1rem 0.8rem; }
  .dashboard-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 0.8rem !important; }
  .stat-card { padding: 1rem !important; gap: 1rem !important; }
  .stat-icon { width: 42px !important; height: 42px !important; font-size: 1.2rem !important; }
  .stat-info .stat-val { font-size: 1.3rem !important; }
  
  /* Cartes restaurants en attente */
  .rest-card { flex-direction: column !important; gap: 1rem !important; padding: 1rem !important; }
  .rest-actions {
    width: 100% !important;
    min-width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--dark-border) !important;
    padding-left: 0 !important;
    padding-top: 0.8rem !important;
    flex-direction: row !important;
  }
  .rest-actions .btn { flex: 1; text-align: center; justify-content: center; }
  
  /* Cartes et conteneurs de tables */
  .card { padding: 1rem !important; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 0.75rem 0.8rem !important; font-size: 0.82rem !important; }
  
  /* Navigation par onglets */
  .tabs { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tab-btn { padding: 0.6rem 0.8rem !important; font-size: 0.85rem !important; flex-shrink: 0; }
  
  /* Formulaires */
  .grid-2 { grid-template-columns: 1fr !important; }
  .form-control, input, select, textarea { font-size: 0.9rem !important; }
  
  /* Modales mobile */
  .modal-overlay .modal { width: 95% !important; max-height: 90vh !important; padding: 1.2rem !important; }
}


/* ─── OVERRIDES MODE CLAIR GLOBAL (ADMIN & GESTIONNAIRE) ─── */
body.light-theme {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

body.light-theme .dashboard-layout {
  background: #f3f4f6 !important;
}

body.light-theme .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
}

body.light-theme .sidebar-header h1,
body.light-theme .sidebar-header span,
body.light-theme .sidebar-header div {
  color: #1f2937 !important;
}

body.light-theme .sidebar-menu a {
  color: #4b5563 !important;
}

body.light-theme .sidebar-menu a:hover,
body.light-theme .sidebar-menu a.active {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #2563eb !important;
}

body.light-theme .main-dashboard {
  background: radial-gradient(circle at 50% 50%, #f9fafb 0%, #f3f4f6 100%) !important;
}

body.light-theme .dashboard-title h1 {
  color: #111827 !important;
}

body.light-theme .dashboard-title p {
  color: #4b5563 !important;
}

body.light-theme .card,
body.light-theme .table-container,
body.light-theme .modal,
body.light-theme .modal-overlay .modal {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03) !important;
}

body.light-theme .card-title,
body.light-theme .table-header {
  color: #111827 !important;
  border-bottom-color: #e5e7eb !important;
}

body.light-theme .stat-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
}

body.light-theme .stat-card:hover {
  border-color: #3b82f6 !important;
}

body.light-theme .stat-info h3 {
  color: #4b5563 !important;
}

body.light-theme .stat-info .stat-val {
  color: #111827 !important;
}

body.light-theme th {
  background: #f9fafb !important;
  color: #4b5563 !important;
  border-bottom-color: #e5e7eb !important;
}

body.light-theme td {
  color: #1f2937 !important;
  border-bottom-color: #e5e7eb !important;
}

body.light-theme tr:hover td {
  background: rgba(59, 130, 246, 0.02) !important;
}

body.light-theme .client-card,
body.light-theme .rest-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

body.light-theme .client-card:hover,
body.light-theme .rest-card:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}

body.light-theme .form-control,
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

body.light-theme .form-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

body.light-theme .btn-ghost {
  color: #4b5563 !important;
  border-color: #e5e7eb !important;
}

body.light-theme .btn-ghost:hover {
  background: #f3f4f6 !important;
}

body.light-theme #theme-toggle {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #4b5563 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

body.light-theme code {
  background: #f3f4f6 !important;
  color: #2563eb !important;
}