/* =================================================================
   dashboard.css - Layout dashboard multi-colonnes (pattern Team-UP pilot-layout)

   Permet :
   - Une colonne gauche fixe (sidebar locale du dashboard, pas la sidebar principale)
   - Plusieurs colonnes a droite, chacune avec son propre scroll

   Chaque "panel" est une card flottante (radius + border + shadow).

   Structure HTML :
     <main class="dashboard">
       <aside class="dashboard-left">
         ... commandes / filtres / liste ...
       </aside>
       <div class="dashboard-cols">
         <section class="dashboard-col">
           <header class="dashboard-col-head">Colonne 1</header>
           <div class="dashboard-col-body">...</div>
         </section>
         <section class="dashboard-col">
           <header class="dashboard-col-head">Colonne 2</header>
           <div class="dashboard-col-body">...</div>
         </section>
         <section class="dashboard-col">
           <header class="dashboard-col-head">Colonne 3</header>
           <div class="dashboard-col-body">...</div>
         </section>
       </div>
     </main>
   ================================================================= */

main.dashboard {
  display: flex;
  flex: 1;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.dashboard-left {
  width: 350px;
  min-width: 350px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  background: var(--glass-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dashboard-cols {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow: hidden;
  height: 100%;
}

.dashboard-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  background: var(--glass-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  min-width: 0;
}

.dashboard-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  flex-shrink: 0;
}

/* Point colore en debut de header de colonne (status indicator) */
.col-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-right: var(--gap-sm);
  flex-shrink: 0;
}
.col-status-dot.online  { background: var(--success); }
.col-status-dot.warning { background: var(--warning); }
.col-status-dot.error   { background: var(--error); }
.col-status-dot.info    { background: var(--info); }
.col-status-dot.muted   { background: var(--text-muted); }

/* Decoration animee a droite du header (gears, zzz, etc.) */
.col-head-deco {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dashboard-col-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}