/* static/css/layout.css - vRobustAlternative */

:root {
  --header-height: 70px;
  --controls-height: 55px;
  --sidebar-width-collapsed: 0px;
  --sidebar-width-expanded: 250px;
  --meetings-panel-width: 480px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --border-radius-lg: 15px;
  --breakpoint-md: 768px;
  /* Espace désiré entre les éléments principaux */
  --main-gap: 15px;
}

/* Structure principale */
.main-container {
  display: grid;
  height: 100vh; width: 100vw;
  /* Lignes: Header fixe, Contenu flexible, Contrôles fixes */
  /* Calcul explicite de la hauteur de la ligne centrale */
  grid-template-rows: var(--header-height) calc(100vh - var(--header-height) - var(--controls-height) - (2 * var(--main-gap))) var(--controls-height);
  grid-template-columns: var(--sidebar-width-collapsed) 1fr var(--meetings-panel-width);
  grid-template-areas:
    "menu header header"
    "menu content meetings"
    "menu controls controls";
  /* Ajouter un gap explicite entre les lignes */
  gap: var(--main-gap) 0; /* Gap vertical, pas de gap horizontal */
  padding: 0; position: relative; overflow: hidden;
  transition: grid-template-columns 0.3s ease;
  box-sizing: border-box;
  background-color: transparent;
}
.main-container.menu-expanded { grid-template-columns: var(--sidebar-width-expanded) 1fr var(--meetings-panel-width); }

/* Header section - Flexbox pour alignement */
.header {
  grid-area: header; display: flex; align-items: center;
  /* Padding standard, l'espacement interne géré par flex/margin */
  padding: 0 var(--spacing-md);
  z-index: var(--z-index-above); background-color: var(--bg-dark);
  backdrop-filter: blur(5px); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md); height: var(--header-height); position: relative;
  box-sizing: border-box;
}

/* Espace après le bouton menu (invisible mais prend de la place) */
.header::before {
    content: '';
    display: block;
    width: 60px; /* Largeur approx du bouton menu + marge */
    flex-shrink: 0;
}

/* Date/Heure (à gauche) */
.datetime {
  display: flex; flex-direction: column; align-items: flex-start;
  background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px);
  border-radius: var(--border-radius-sm); padding: 5px 10px;
  box-shadow: var(--shadow-sm);
  /* Marge DROITE pour séparer du titre */
  margin-right: var(--spacing-md);
  z-index: 2; border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.datetime p { margin: 2px 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; white-space: nowrap; }
.datetime p#dateDisplay { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); }

/* Titre central (prend l'espace restant) */
.title-container {
  flex-grow: 1; /* Prend l'espace */
  display: flex; justify-content: center; align-items: center;
  overflow: hidden; min-width: 50px;
}
.title { text-align: center; font-size: 1.3rem; font-weight: 600; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); color: white; background: rgba(0, 0, 0, 0.5); padding: 5px 12px; border-radius: var(--border-radius-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-sm); border: 1px solid rgba(255, 255, 255, 0.15); max-width: 100%; }

/* Profil utilisateur (à droite) */
.user-profile { flex-shrink: 0; z-index: 2; margin-left: var(--spacing-md); /* Marge GAUCHE pour séparer du titre */ }

/* Content area (milieu) */
.content { grid-area: content; position: relative; overflow: auto; min-height: 0; padding: 0; /* Pas de padding ici */ box-sizing: border-box; }
#main-content-area { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* Panneau des réunions */
.meetings-container {
    grid-area: meetings; display: flex; flex-direction: column;
    overflow: hidden;
    /* Marge externe gérée par le gap de la grille */
    margin: 0 !important;
    border-radius: var(--border-radius-lg) !important; /* Arrondi */
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: var(--bg-dark);
    min-height: 0; position: relative;
}

/* Barre de contrôles du bas */
.controls-container {
  grid-area: controls; display: flex; justify-content: center; align-items: center;
  padding: 0 var(--spacing-md); background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, 0.15);
  z-index: var(--z-index-controls); position: relative;
  height: var(--controls-height); box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2);
}
/* ... (Styles .control-buttons et .compact-btn inchangés) ... */
.control-buttons { display: flex; gap: var(--spacing-sm); }
.control-buttons button.compact-btn { padding: 6px 12px; font-size: 0.9rem; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-sm); background: rgba(65, 65, 65, 0.7); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; box-shadow: none; transition: var(--transition-fast); min-width: 40px; height: 36px; }
.control-buttons button.compact-btn:hover { background: rgba(85, 85, 85, 0.8); color: var(--text-primary); transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.2); }
.control-buttons button.compact-btn:active { transform: translateY(0px); background: rgba(55, 55, 55, 0.8); }
.control-buttons button.compact-btn i { font-size: 1rem; margin: 0; }


/* Adaptations responsives */
@media (max-width: 992px) {
  :root { --meetings-panel-width: 320px; }
  .title { font-size: 1.2rem; }
  .header { padding: 0 var(--spacing-sm) 0 90px; } /* Ajuster padding tablette */
}

@media (max-width: 768px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header" "meetings" "controls";
    row-gap: var(--spacing-sm);
  }
  .content { display: none; }
  .meetings-container { border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
  .header { padding-left: 70px; }
  .header::before { width: 60px; } /* Réduire espace réservé au bouton menu */
  .datetime { margin-left: 0; }
  .title-container { padding: 0 10px; margin: 0 5px; } /* Réduire marges titre */
  .title { font-size: 1.1rem; }
  .control-buttons button.compact-btn .btn-text-control { display: none; }
  .control-buttons button.compact-btn { min-width: 45px; }
}

@media (max-width: 480px) {
    .header { padding: 5px 5px 5px 65px; }
    .header::before { width: 55px; }
    .title { font-size: 1rem; }
    .datetime p { font-size: 0.9rem; }
    .datetime p#dateDisplay { font-size: 0.7rem; }
    .controls-container { height: auto; min-height: var(--controls-height); }
    .control-buttons { gap: 5px; }
    .control-buttons button.compact-btn { min-width: 40px; height: 35px; padding: 5px 8px; }
    .control-buttons button.compact-btn i { font-size: 0.9rem; }
}