/* BureauChat V7.0.2 — menu réellement rétractable + contenu adaptatif */

:root{
  --bc-sidebar-open: 290px;
  --bc-sidebar-mini: 78px;
  --bc-sidebar-gap: 0px;
}

/* Le shell devient une vraie grille. */
body{
  --bc-sidebar-current: var(--bc-sidebar-open);
}

body.bc-sidebar-collapsed{
  --bc-sidebar-current: var(--bc-sidebar-mini);
}

.app-shell,
.app-layout,
.layout,
body > .app{
  min-width:0;
}

/* Sidebar desktop */
#bcSidebar,
.sidebar{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  width:var(--bc-sidebar-current) !important;
  min-width:var(--bc-sidebar-current) !important;
  max-width:var(--bc-sidebar-current) !important;
  height:100dvh !important;
  transition:width .22s ease,min-width .22s ease,max-width .22s ease !important;
  z-index:80 !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Toute la partie applicative se décale réellement en fonction du menu */
#bcAppMain,
.app-main,
.main-wrapper,
.content-wrapper,
body > .main{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:var(--bc-sidebar-current) !important;
  transition:margin-left .22s ease !important;
}

#bcMainContent,
.main-content,
.content,
.page,
.page-content{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Topbar suit aussi la largeur disponible */
.topbar,
.app-topbar,
header.topbar{
  width:auto !important;
  max-width:none !important;
  margin-left:0 !important;
}

/* Contrôle du menu */
.bc-sidebar-toggle,
.sidebar-toggle,
[data-sidebar-toggle]{
  position:absolute !important;
  top:54px !important;
  right:-17px !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  padding:0 !important;
  border:1px solid rgba(19,92,183,.18) !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:#fff !important;
  color:#176ad8 !important;
  box-shadow:0 8px 22px rgba(0,41,102,.18) !important;
  z-index:120 !important;
  cursor:pointer !important;
}

.bc-sidebar-toggle-icon{
  display:block;
  font-size:23px;
  line-height:1;
  transition:transform .2s ease;
}

body.bc-sidebar-collapsed .bc-sidebar-toggle-icon{
  transform:rotate(180deg);
}

/* La zone de navigation défile, le logo et Paramètres restent accessibles */
.sidebar .brand{
  flex:0 0 auto !important;
}

.sidebar nav{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
}

.sidebar-bottom{
  flex:0 0 auto !important;
}

/* ===== ÉTAT COMPACT : uniquement des icônes ===== */
body.bc-sidebar-collapsed .sidebar{
  padding-left:0 !important;
  padding-right:0 !important;
}

body.bc-sidebar-collapsed .sidebar .brand{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

body.bc-sidebar-collapsed .sidebar .brand > *:not(img):not(.logo):not(.brand-logo),
body.bc-sidebar-collapsed .sidebar .brand span,
body.bc-sidebar-collapsed .sidebar .brand strong{
  display:none !important;
}

body.bc-sidebar-collapsed .sidebar nav,
body.bc-sidebar-collapsed .sidebar .sidebar-bottom{
  padding-left:10px !important;
  padding-right:10px !important;
}

body.bc-sidebar-collapsed .sidebar .bc-nav-link,
body.bc-sidebar-collapsed .sidebar nav > a,
body.bc-sidebar-collapsed .sidebar .sidebar-bottom > a{
  width:56px !important;
  height:56px !important;
  min-height:56px !important;
  margin:6px auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  border-radius:15px !important;
  overflow:visible !important;
}

body.bc-sidebar-collapsed .sidebar .bc-nav-link > span:not(.bc-nav-icon),
body.bc-sidebar-collapsed .sidebar nav > a > span:not(:first-child),
body.bc-sidebar-collapsed .sidebar .sidebar-bottom > a > span:not(:first-child){
  display:none !important;
}

body.bc-sidebar-collapsed .sidebar .bc-nav-icon,
body.bc-sidebar-collapsed .sidebar nav > a > span:first-child,
body.bc-sidebar-collapsed .sidebar .sidebar-bottom > a > span:first-child{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
}

/* En compact, un groupe devient UNE icône de catégorie.
   Les sous-modules s'ouvrent dans un petit panneau flottant au clic. */
body.bc-sidebar-collapsed .sidebar .bc-module-group{
  position:relative !important;
  width:56px !important;
  margin:6px auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-card{
  width:56px !important;
  height:56px !important;
  min-height:56px !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  border-radius:15px !important;
  background:transparent !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-card-copy,
body.bc-sidebar-collapsed .sidebar .bc-module-card-chevron{
  display:none !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-card-icon{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-group.is-active .bc-module-card,
body.bc-sidebar-collapsed .sidebar .bc-module-card:hover{
  background:rgba(255,255,255,.11) !important;
}

/* Sous-menu flottant compact */
body.bc-sidebar-collapsed .sidebar .bc-module-panel{
  display:none !important;
  position:absolute !important;
  left:66px !important;
  top:0 !important;
  width:250px !important;
  max-height:420px !important;
  overflow-y:auto !important;
  padding:10px !important;
  margin:0 !important;
  border:1px solid rgba(22,91,176,.14) !important;
  border-radius:15px !important;
  background:#ffffff !important;
  box-shadow:0 16px 40px rgba(0,39,95,.20) !important;
  opacity:1 !important;
  z-index:200 !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-group.bc-mini-open .bc-module-panel{
  display:grid !important;
  gap:4px !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-item{
  min-height:46px !important;
  grid-template-columns:36px minmax(0,1fr) !important;
  border-radius:10px !important;
  padding:6px 8px !important;
  color:#12305b !important;
  border:0 !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-item:hover{
  background:#f0f6ff !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-item.active{
  background:#e4f0ff !important;
  color:#075dcc !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-item strong,
body.bc-sidebar-collapsed .sidebar .bc-module-item span{
  display:block !important;
  color:inherit !important;
}

body.bc-sidebar-collapsed .sidebar .bc-module-item small{
  display:none !important;
}

/* Tooltip pour les entrées simples compactes */
body.bc-sidebar-collapsed .sidebar [data-bc-label]{
  position:relative;
}

body.bc-sidebar-collapsed .sidebar [data-bc-label]:hover::after{
  content:attr(data-bc-label);
  position:absolute;
  left:66px;
  top:50%;
  transform:translateY(-50%);
  padding:7px 10px;
  border-radius:9px;
  background:#12305b;
  color:#fff;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  z-index:220;
}

/* Ouvert : les groupes restent rétractables comme demandé */
body:not(.bc-sidebar-collapsed) .bc-module-panel{
  max-height:800px !important;
  opacity:1 !important;
  transition:max-height .2s ease,opacity .15s ease !important;
}

body:not(.bc-sidebar-collapsed) .bc-module-group:not(.is-open) .bc-module-panel{
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border-top-color:transparent !important;
}

/* ===== Modules responsive à la largeur gagnée ===== */
.dashboard-grid,
.home-grid,
.cards-grid,
.kpi-grid,
.stats-grid,
.quick-grid{
  width:100% !important;
  max-width:none !important;
}

/* Les grilles exploitent automatiquement la place */
@media(min-width:1200px){
  body.bc-sidebar-collapsed .dashboard-grid,
  body.bc-sidebar-collapsed .home-grid{
    grid-template-columns:repeat(auto-fit,minmax(310px,1fr)) !important;
  }

  body.bc-sidebar-collapsed .kpi-grid,
  body.bc-sidebar-collapsed .stats-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  }
}

.card,
.panel,
.module-card,
section.card{
  max-width:none !important;
}

/* Tables utilisent toute la largeur disponible */
.table-wrap,
.table-responsive,
.payables-table-wrap{
  width:100% !important;
  max-width:none !important;
}

/* Planning */
.planning-shell,
.planning-board,
.calendar-wrap{
  width:100% !important;
  max-width:none !important;
}

/* Mobile : tiroir, jamais mini-menu permanent */
@media(max-width:900px){
  body{
    --bc-sidebar-current: 0px !important;
  }

  #bcSidebar,
  .sidebar{
    width:min(88vw,310px) !important;
    min-width:min(88vw,310px) !important;
    max-width:min(88vw,310px) !important;
    transform:translateX(-105%);
    transition:transform .2s ease !important;
  }

  body.sidebar-open #bcSidebar,
  body.sidebar-open .sidebar{
    transform:translateX(0);
  }

  #bcAppMain,
  .app-main,
  .main-wrapper,
  .content-wrapper,
  body > .main{
    margin-left:0 !important;
  }

  .bc-sidebar-toggle,
  .sidebar-toggle,
  [data-sidebar-toggle]{
    display:none !important;
  }

  body.bc-sidebar-collapsed .sidebar .bc-module-panel{
    position:static !important;
    width:auto !important;
    box-shadow:none !important;
  }
}