/* ═══════════════════════════════════════════════════════════
   mobile.css — Responsive complet MySpace
   Breakpoints : 768px (tablette), 480px (mobile)
   ═══════════════════════════════════════════════════════════ */

/* ── Burger button ── */
.burger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.burger-btn:hover { background: var(--color-bg-hover); }
.burger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav drawer ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  background: rgba(26,26,46,0.98); /* var(--color-bg-card); */
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3);
  flex-direction: column;
  gap: 4px;
  z-index: 150;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-nav .nav-link:hover,
.mobile-nav .nav-link.active { background: rgba(167,139,250,.1); color: var(--color-purple); }

@media (max-width: 768px) {

  /* ── Navbar ── */
  .burger-btn { display: flex; }
  .nav-links   { display: none !important; }
  .navbar      { padding: 0 var(--space-3); }
  .nav-brand   { font-size: var(--text-sm); }

  /* ── Layout général ── */
  .main { padding: var(--space-3); }
  body  { overflow-x: hidden; }

  /* ── Dashboard ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .stat-card { padding: var(--space-3); }
  .stat-card__number { font-size: 22px; }

  .content-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
    height: auto !important;
    overflow: visible !important;
  }
  .col, .col--right {
    height: auto !important;
    overflow: visible !important;
    min-height: 0;
  }
  .card {
    overflow: visible !important;
    height: auto !important;
  }

  /* Documents importants */
  .docs-important-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Agenda ── */
  .agenda-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .agenda-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border);
  }
  .cal-grid { gap: 2px; }
  .cal-cell { min-height: 36px; }

  /* ── Documents ── */
  .docs-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .docs-sidebar {
    width: 100% !important;
    max-height: none;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .docs-sidebar.mobile-open { display: flex; }
  .docs-main { height: auto !important; overflow: visible !important; }

  /* Bouton sidebar toggle mobile */
  .docs-sidebar-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-card-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 7px 12px;
    font-size: var(--text-sm);
    color: var(--color-text-2);
    cursor: pointer;
    font-family: var(--font-sans);
    margin-bottom: var(--space-3);
  }

  .docs-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .docs-toolbar__right {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .docs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3);
  }

  /* Barre de sélection */
  #selectionBar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
  }
  .selection-actions { flex-wrap: wrap; }

  /* ── Projets ── */
  .projets-layout {
    flex-direction: column !important;
    height: auto !important;
  }

  /* ── Modals ── */
  .modal {
    width: calc(100vw - var(--space-6)) !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ── Login ── */
  .login-card {
    width: calc(100vw - var(--space-6)) !important;
    padding: var(--space-4) !important;
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-grid  { grid-template-columns: 1fr !important; }
  .docs-toolbar__right { width: 100%; }

  .docs-important-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mini cal plus compact */
  .mini-cal-day { font-size: 10px !important; }
  .mini-cal-dot { width: 3px !important; height: 3px !important; }

  /* Avatar menu */
  .avatar-menu {
    right: var(--space-2) !important;
    width: calc(100vw - var(--space-4)) !important;
  }

  /* Quick access modal */
  #quickAccessModal > div { width: calc(100vw - var(--space-4)) !important; }
}