/* ============================================================
   STRUCTURE PRINCIPALE
   ============================================================ */
.app-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 300px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(99,102,241,0.05) 0%, rgba(255,255,255,0.02) 40%, transparent 100%),
              var(--bg-sidebar);
  border-right: 1px solid rgba(99,102,241,0.18);
  box-shadow: 4px 0 30px rgba(0,0,0,0.25);
  position: relative;
}

.sidebar::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -1px;
  height: 60%;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(99,102,241,0.45), transparent);
  border-radius: 999px;
  pointer-events: none;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 50px;
}

.logo-box {
  width: 48px;
  height: 48px;
  background: var(--primary-gradient);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 8px 28px rgba(99,102,241,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  flex-shrink: 0;
  position: relative;
}

.logo-img {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  object-fit: cover;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 8px 28px rgba(130,60,200,0.55);
}

.logo-img::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(130,60,200,0.4), rgba(168,85,247,0.3));
  filter: blur(8px);
  z-index: -1;
  opacity: 0.7;
}

.logo-txt {
  font-weight: 800;
  font-size: 20px;
  display: block;
}

.logo-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* nav */
.nav-item {
  padding: 12px 18px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.nav-item i {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  font-size: 15px;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-white);
  transform: translateX(3px);
}

.nav-item:hover i {
  background: rgba(255,255,255,0.09);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.85), rgba(129,140,248,0.75));
  color: white;
  box-shadow: 0 8px 28px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateX(0);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 55%;
  width: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.4));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(255,255,255,0.35);
}

.nav-item.active i {
  background: rgba(255,255,255,0.2);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.5));
}

.nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(99,102,241,0.35);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}


/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */
.main-view {
  flex: 1;
  height: 100vh;
  padding: clamp(22px, 4vw, 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(rgba(99,102,241,0.055) 1px, transparent 1px),
    var(--bg-dark);
  background-size: 30px 30px, 100% 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.4) transparent;
}

.header-section h2 {
  font-size: 36px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, #f8fafc 30%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ── Tablet intermédiaire (820px) ─────────────────────────── */
@media (max-width: 820px) {
  .dash-grid   { grid-template-columns: 1fr; }
  .dash-kpis   { grid-template-columns: repeat(2, 1fr); }
  .admin-grid  { grid-template-columns: 1fr; }
  .stats-container { gap: 16px; }
}

/* ── Mobile (980px) ───────────────────────────────────────── */
@media (max-width: 980px) {
  body { overflow: auto; }
  .app-container { flex-direction: column; height: auto; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; gap: 12px; padding: 14px 20px; flex-wrap: nowrap; }
  .sidebar::after { display: none; }
  .sidebar-brand { margin-bottom: 0; flex-shrink: 0; gap: 10px; }
  .sidebar-brand > div { display: none; }
  .logo-img { width: 38px; height: 38px; border-radius: 10px; }
  .sidebar-nav { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; padding-bottom: 2px; }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-footer { display: none; }
  .main-view { padding: 20px 18px; height: auto; min-height: calc(100vh - 72px); }
  .stats-container { flex-direction: column; }
  .stats-container .stat-card { flex: unset; }
  .drawer-inner { width: min(460px, 100vw); }
  .profile-grid-large { grid-template-columns: 1fr; }
  .tab-toolbar { gap: 10px; }
  .tab-toolbar h2 { font-size: 22px; }
  .header-section h2 { font-size: 26px; }
}

/* ── Petit mobile (540px) ─────────────────────────────────── */
@media (max-width: 540px) {
  .main-view { padding: 14px 12px; }
  .sidebar { padding: 10px 12px; gap: 8px; }
  .nav-item { padding: 8px 10px; font-size: 12px; gap: 6px; }
  .nav-item i { width: 26px; height: 26px; font-size: 13px; flex-shrink: 0; }
  .drawer-inner { width: 100vw; }
  .tab-toolbar-right { gap: 6px; }
  .tab-search-inline { max-width: unset; flex: 1; }
  .my-activity-inner { border-radius: 14px; }
  .my-activity-body { padding: 12px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}