/* ============================================================
   responsive.css — 1 sections
   ============================================================ */

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px) {
  .sidebar { position:fixed; top:0; bottom:0; left:0; transform:translateX(-100%); z-index:200; transition:transform .25s; }
  .sidebar.open { transform:translateX(0); }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .search-wrap { display:none; }
  .content { padding:16px; padding-bottom:80px; }
  .sidebar-overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; opacity:0; pointer-events:none; transition:opacity .25s; }
  .sidebar-overlay.active { opacity:1; pointer-events:auto; }
  .topbar { padding:0 12px; gap:8px; }
  .topbar-breadcrumb { font-size:15px; }
  .theme-toggle, .theme-label { display:none; }
}

/* BOTTOM NAVIGATION — mobile only */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:180;
  background:var(--bg1); border-top:1px solid var(--border);
  height:calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.bottom-nav-inner {
  display:flex; align-items:stretch; justify-content:space-around; height:100%;
}
.bottom-nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; cursor:pointer; background:none; border:none; padding:4px 0;
  color:var(--text3); transition:color .15s; position:relative; -webkit-tap-highlight-color:transparent;
}
.bottom-nav-item.active { color:var(--red); }
.bottom-nav-item.active::before {
  content:''; position:absolute; top:0; left:25%; right:25%; height:2px; background:var(--red); border-radius:0 0 2px 2px;
}
.bottom-nav-icon { font-size:20px; line-height:1; }
.bottom-nav-label { font-size:9px; font-weight:600; letter-spacing:.3px; }

@media (max-width:900px) {
  .bottom-nav { display:block; }
}

@media (max-width:500px) {
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .kpi-val { font-size:26px; }
  .kpi-card { padding:12px; }
  .content { padding:12px; padding-bottom:76px; }
  .topbar-breadcrumb { font-size:14px; }
  .card-body { padding:14px; }
  .card-header { padding:12px 14px; }
  .modal { border-radius:12px; }

  /* Force 4-column inline grids → 2 columns on small screens */
  .content div[style*="repeat(4,1fr)"],
  .content div[style*="repeat(4, 1fr)"] {
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* Force 3-column inline grids → 1 column */
  .content div[style*="repeat(3,1fr)"],
  .content div[style*="repeat(3, 1fr)"] {
    grid-template-columns:1fr !important;
  }

  /* Prevent fixed min-width elements from overflowing */
  .content div[style*="min-width:280px"],
  .content div[style*="min-width:260px"] {
    min-width:0 !important;
    width:100% !important;
  }

  /* Calendar sidebar — hide on very small screens */
  .cal-sidebar { display:none !important; }

  /* Role selector on login — 2 columns */
  .auth-role { grid-template-columns:repeat(2,1fr) !important; }

  /* Masterclass card champion row — stack vertically */
  .content div[style*="align-items:flex-start;gap:14px"] {
    flex-wrap:wrap !important;
  }

  /* Search inputs — full width */
  .content input[style*="width:200px"] {
    width:100% !important;
  }

  /* Flex rows with too many items — allow wrapping */
  .content div[style*="display:flex"][style*="gap:"] {
    flex-wrap:wrap;
  }

  /* Bracket grid — scroll horizontal */
  .content div[style*="overflow-x:auto"] {
    -webkit-overflow-scrolling:touch;
  }

  /* Fix topbar notification overlap */
  .topbar-notif { width:28px; height:28px; font-size:14px; }
}

/* Planning V2 - Bouton + pour creer un cours en parallele */
.cv2-day-col:hover .cv2-parallel-btn { opacity: 1; }
.cv2-parallel-btn:hover { background: rgba(183,28,28,1) !important; transform: scale(1.1); }