/* ============================================================
   LAYOUT
   ============================================================ */
.app-wrapper {
  display: flex;
  height: 100vh;
  height: 100dvh; /* dynamic viewport — évite la coupure mobile due à l'URL bar */
  overflow: hidden;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  transition: transform .25s ease;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--sidebar);
  flex-shrink: 0;
}

.logo-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 16px;
}

.logo-text span {
  color: var(--gold);
}

.sidebar-tagline {
  font-size: 11px;
  color: var(--sub);
  padding: 4px 16px 10px;
}

.sidebar-nav {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 8px 4px;
}

.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: color .15s;
}

.nav-group-toggle:hover {
  color: var(--muted);
}

.nav-group-chevron {
  font-size: 9px;
  color: var(--sub);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-right: 4px;
}

.nav-group-toggle.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-items {
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease;
  max-height: 600px;
  opacity: 1;
}

.nav-group-items.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* En mode sidebar réduite : forcer tous les groupes ouverts */
.sidebar.collapsed .nav-group-items.collapsed {
  max-height: 600px;
  opacity: 1;
  pointer-events: auto;
}

/* Dashboard raccourcis */
.dash-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 96px;
  padding: 14px 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  text-align: center;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.shortcut-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-g);
  opacity: 0;
  transition: opacity .18s;
}

.shortcut-btn:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.shortcut-btn:hover::before {
  opacity: 1;
}

.shortcut-btn i {
  font-size: 24px;
  position: relative;
}

.shortcut-btn span {
  position: relative;
  line-height: 1.3;
}

.shortcut-label {
  color: var(--muted);
  font-size: 11px;
}

.shortcut-stat {
  position: relative;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

/* ── Badges sur les raccourcis du dashboard ── */
.sc-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 17px;
  border-radius: 9px;
  text-align: center;
  pointer-events: none;
}

/* ── Badges sur la bottom navigation mobile ── */
.bottom-icon-wrap {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.bottom-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  background: #ef4444;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 15px;
  border-radius: 8px;
  text-align: center;
  pointer-events: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  cursor: pointer;
  margin-bottom: 2px;
}

/* Sous-item sidebar (ex: Mes Portfolios sous Portfolio PPTX) */
.nav-sub {
  padding-left: 32px;
  font-size: 12px;
  color: var(--muted);
  opacity: .85;
  position: relative;
}

.nav-sub::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 0 3px;
}

.nav-sub:hover,
.nav-sub.active {
  color: var(--accent);
  background: var(--accent-g);
  opacity: 1;
}

.nav-item:hover {
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
}

.nav-item.active {
  background: var(--accent-g);
  color: var(--accent);
}

.nav-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-badge-accent {
  background: var(--accent);
}

.btn-sidebar-collapse {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 13px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: color .15s;
}

.btn-sidebar-collapse:hover {
  color: var(--text);
}

.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 10px;
  font-size: 12px;
  font-weight: 600;
}

.user-plan-badge {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-top: 1px;
}

.nav-admin-item {
  margin-top: 8px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: var(--radius-sm);
  color: var(--red) !important;
}

.nav-admin-item:hover {
  background: rgba(239,68,68,.15) !important;
  color: var(--red) !important;
}

.nav-admin-item .nav-label {
  color: var(--red);
  font-weight: 700;
}

.nav-admin-item i {
  color: var(--red);
}

.sidebar-footer {
  padding: 10px 8px;
  border-top: 1px solid var(--border);
}

.save-indicator {
  font-size: 11px;
  color: var(--sub);
  padding: 4px 8px;
  margin-bottom: 4px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
}

.sidebar-overlay.active {
  display: block;
}

.sidebar.collapsed {
  width: 54px;
  overflow: hidden;
}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .sidebar-tagline,
.sidebar.collapsed .sidebar-user,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .save-indicator,
.sidebar.collapsed #btn-theme span,
.sidebar.collapsed .nav-badge {
  display: none;
}

.sidebar.collapsed .nav-admin-item {
  margin-top: 4px;
  border-radius: 8px;
  margin-inline: 6px;
}
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 14px 8px; }
.sidebar.collapsed .logo-img     { margin: 0; }
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px 8px;
  border-radius: 8px;
  margin: 2px 6px;
}
.sidebar.collapsed .nav-item i { margin: 0; font-size: 18px; }
.sidebar.collapsed .sidebar-footer { padding: 8px; }
.sidebar.collapsed #btn-theme { padding: 8px; min-width: 0; }

/* Transition main-content quand sidebar se réduit */
.sidebar { transition: width .25s ease; }
.main-content { transition: margin-left .25s ease; }

/* Éditeur s'élargit quand sidebar réduite */
/* ── Panels éditeur — expansion au collapse sidebar ──────── */
.sidebar.collapsed ~ .main-content .editor-panel,
.sidebar.collapsed ~ .main-content .lettre-panel {
  width: 536px;
}

/* Topbar */
.topbar {
  height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-nav-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--hover);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
  flex-shrink: 0;
}

.btn-nav-back:hover {
  background: var(--accent-g);
  border-color: var(--accent);
  color: var(--accent);
}

.topbar-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hamburger {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 16px;
  display: none;
}

/* Bouton thème dans la topbar — visible uniquement sur mobile */
.btn-topbar-theme {
  display: none;
  background: none;
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.btn-topbar-theme:hover { color: var(--accent); border-color: var(--accent); }
@media(max-width: 900px) { .btn-topbar-theme { display: flex; } }

/* Bouton recharger (mobile uniquement) — remplace le pull-to-refresh désactivé.
   Ouvre le modal de confirmation (ConfirmReload.request). */
.btn-topbar-reload {
  display: none;
  background: none;
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.btn-topbar-reload:hover { color: var(--accent); border-color: var(--accent); }
.btn-topbar-reload:active { transform: scale(.94); }
@media(max-width: 900px) { .btn-topbar-reload { display: flex; } }

/* Sections */
.section {
  display: none;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
  padding: 24px;
}

.section.active {
  display: block;
}

/* #section-editeur hérite display:block de .section.active */
/* editor-layout gère le flex ROW interne (panel + preview) */

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 22px;
}

.section-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border2);
  background: var(--input-bg);
  color: var(--text);
  transition: all .15s;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  background: var(--hover);
}

.btn:active {
  transform: scale(.97);
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  color: #0f1117;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-d);
  border-color: var(--accent-d);
}

.btn-secondary {
  background: rgba(59,130,246,.15);
  color: var(--blue);
  border-color: rgba(59,130,246,.3);
}

.btn-secondary:hover {
  background: rgba(59,130,246,.25);
}

.btn-danger {
  background: rgba(239,68,68,.15);
  color: var(--red);
  border-color: rgba(239,68,68,.3);
}

.btn-whatsapp {
  background: rgba(37,211,102,.15);
  color: var(--whatsapp);
  border-color: rgba(37,211,102,.3);
}

.btn-whatsapp:hover {
  background: rgba(37,211,102,.25);
}

.btn-purple {
  background: rgba(139,92,246,.15);
  color: var(--purple);
  border-color: rgba(139,92,246,.3);
}
.btn-purple:hover { background: rgba(139,92,246,.28); }

.btn-amber {
  background: rgba(245,158,11,.15);
  color: var(--amber);
  border-color: rgba(245,158,11,.3);
}
.btn-amber:hover { background: rgba(245,158,11,.28); }

.btn-success {
  background: rgba(16,185,129,.15);
  color: var(--green);
  border-color: rgba(16,185,129,.3);
}
.btn-success:hover { background: rgba(16,185,129,.28); }

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-icon {
  padding: 5px 9px;
  gap: 0;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--hover);
}

.btn-danger-icon {
  background: transparent;
  border: none;
  color: var(--red);
  padding: 4px 8px;
}

.btn-danger-icon:hover {
  background: rgba(239,68,68,.1);
}

.btn-copy {
  background: rgba(139,92,246,.15);
  color: var(--purple);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}

.btn-copy:hover {
  background: rgba(139,92,246,.3);
}

.btn-copy.copied {
  background: rgba(16,185,129,.15);
  color: var(--green);
  border-color: rgba(16,185,129,.3);
}

/* Cards */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}

.card-icon {
  font-size: 18px;
}

/* ── Dashboard ────────────────────────────────────────────── */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}

.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--accent);
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--hover);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}

.quick-btn:hover {
  background: var(--border2);
  color: var(--accent);
}

.conseil-du-jour {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  padding: 12px;
  background: var(--hover);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.relances-alert {
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--amber);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}