/* Reset/minimum */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,system-ui,Arial,sans-serif;background:#f3f6f8;color:#111}

/* Header */
header{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:#0f1720; color:white; position:relative;
}
.logo{font-weight:700; font-size:1.1rem}
.hamburger{
  background:none;border:0;color:white;font-size:26px;padding:8px;cursor:pointer;border-radius:8px;
}

/* Sidebar (hidden by default) */
.sidebar{
  position:fixed; top:72px; left:16px; width:260px; height:calc(100% - 96px);
  background:#222; color:white; padding:14px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.4);
  transform: translateX(-18px) scale(.98); opacity:0; pointer-events:none;
  transition: transform .22s ease, opacity .22s ease;
  z-index:50;
}
.sidebar.open{ transform: translateX(0) scale(1); opacity:1; pointer-events:auto; }
.close-sidebar{ float:right; background:none;border:0;color:white;font-size:18px; cursor:pointer; }

/* Sidebar content */
.sidebar h2{ margin-top:4px; margin-bottom:12px }
.sidebar ul{ padding:0; margin:0; list-style:none }
.sidebar li{ margin-bottom:8px }
.nav-btn{ width:100%; padding:10px; border-radius:8px; border:0; background:#2b2f33; color:white; cursor:pointer; text-align:left }

/* Overlay when sidebar open */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.45); opacity:0; pointer-events:none; transition:opacity .2s;
  z-index:40;
}
.overlay.show{ opacity:1; pointer-events:auto; }

/* Main layout */
main{ padding:20px; max-width:1100px; margin:18px auto }

/* Pages */
.page{ display:none }
.page.visible{ display:block }

/* CodeMirror Editor styles */
.editor-codemirror{ 
  border:1px solid #1e2127; /* Bordure sombre pour correspondre au thème */
  border-radius: 0 0 10px 10px; /* Coins arrondis en bas */
  overflow: hidden; 
}
/* Style pour la zone d'édition (Monokai) */
.CodeMirror {
  height: 360px; /* Hauteur fixe pour l'éditeur */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 14px;
}
.buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; margin-bottom:12px }
button{ padding:10px 14px; border-radius:8px; border:0; cursor:pointer; background:#0066ff; color:white; font-weight:600; }
button.primary-btn { background: #0066ff; }

/* File Tabs */
.file-tabs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e2127; /* Fond sombre de la barre d'onglets */
  border-radius: 10px 10px 0 0;
  padding: 0 10px 0 0;
}
.file-tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}
.file-tab {
  padding: 10px 15px;
  background: #272c34; /* Onglet inactif */
  color: #abb2bf;
  cursor: pointer;
  border-right: 1px solid #1e2127;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}
.file-tab.active {
  background: #1e2127; /* Onglet actif */
  color: #61afef; /* Couleur de surbrillance */
}
.file-tab:hover:not(.active) {
  background: #3e4451;
}
.file-tab-close {
  background: none;
  border: 0;
  color: #c678dd;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 14px;
}
#newFileBtn {
  background: #c678dd; /* Bouton 'Ajouter Fichier' */
  padding: 5px 10px;
  margin-left: 10px;
  flex-shrink: 0;
}

/* Preview */
iframe#preview{ width:100%; height:360px; border:1px solid #ddd; border-radius:10px; background:white; margin-top: 12px; }

/* Projects */
.project-list{ display:flex; flex-direction:column; gap:10px }
.project-item{ padding:12px; background:#fff; border-radius:10px; border:1px solid #e0e0e0; display:flex; justify-content:space-between; align-items:center }
.project-actions button{ margin-left:8px; padding:8px 10px; background:#0f1720; color:white; border-radius:8px; border:0; cursor:pointer }

/* Responsive tweaks */
@media (max-width:900px){
  .sidebar{ left:8px; width:90%; top:72px; height:60%; overflow:auto }
  .CodeMirror{ height: 280px; }
  iframe#preview{ height:240px }
  main{ padding:12px }
}

/* --- MODAL STYLES --- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal.visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #fff;
    color: #111;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    transform: translateY(-50px);
    transition: transform 0.3s;
}

.modal.visible .modal-content {
    transform: translateY(0);
}

.modal-content h2 {
    margin-top: 0;
    color: #0f1720;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background: #f9f9f9;
}

.help-text {
    font-size: 0.8rem;
    color: #555;
    margin-top: 5px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.modal-actions button.secondary-btn {
    background: #ccc;
    color: #111;
}

.secondary-btn {
    background: #ccc !important;
    color: #111 !important;
}