/* Batitrax/assets/sidebar.css */

/* Conteneur principal */
.container {
  display: flex;
}

/* Sidebar — largeur gérée ici uniquement (menu.php ne surcharge pas la width) */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 60px;
  overflow-x: hidden;
  background: var(--bg-menu);
  transition: width 0.22s ease;
  z-index: 1000;
}
/* Expansion au survol */
.sidebar:hover {
  width: 224px;
}

/* Wrapper contenant header + main */
.page-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Le contenu est décalé de 60px (largeur sidebar fermée) */
.page-wrapper header,
.page-wrapper .content {
  margin-left: 60px;
  transition: margin-left 0.22s ease;
}

.sidebar-projects {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fafdff;
  box-shadow: 2px 0 12px #d0e8fa22;
  border-right: 2px solid #e7effc;
  border-radius: 0 16px 16px 0;
}

.project-search-row {
  display: flex;
  align-items: center;
  padding: 1.1em 1.4em 0.8em 1.4em;
  background: #fafdff;
  border-bottom: 1.5px solid #eaf2fb;
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 0.5em;
}

.project-search-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.09em;
  padding: 0.58em 1.1em;
  border: 1.5px solid #b0d7fa;
  background: #f7fbfe;
  color: #1b385f;
  border-radius: 10px;
  outline: none;
  box-shadow: 0 1.5px 7px #e4eefb33 inset;
  transition: border 0.14s, box-shadow 0.17s;
  margin-right: 7px;
}
.project-search-row input[type="text"]:focus {
  border-color: #3286de;
  box-shadow: 0 2px 12px #b7dbff22;
}
.create-project-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #378ad4;
  color: #fff;
  font-size: 1.59em;
  font-weight: 900;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-shadow: 0 2px 8px #b9e3ff44;
  transition: background 0.15s, box-shadow 0.18s, color 0.13s;
  text-decoration: none;
  outline: none;
  border: 1.3px solid #d6e9f8;
}
.create-project-plus-btn:hover, .create-project-plus-btn:focus {
  background: #2666ad;
  color: #fff;
  box-shadow: 0 4px 16px #bad5f977;
  border-color: #378ad4;
}

.projects-list-container {
  flex: 1 1 auto;
  overflow-y: auto;
  width: 100%;
  min-width: 0;
  padding-bottom: 8px;
  background: #fafdff;
}

/* Scrollbar custom */
.projects-list-container::-webkit-scrollbar {
  width: 11px;
}
.projects-list-container::-webkit-scrollbar-thumb {
  background: #ddeffc;
  border-radius: 8px;
}
.projects-list-container::-webkit-scrollbar-track {
  background: transparent;
}

/* Projets style "carte" */
.projects-list {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0 0 8px 0;
  margin: 0;
  list-style: none;
}
.projects-list li {
  background: #fff;
  margin: 12px 12px 0 12px;
  border-radius: 11px;
  padding: 10px 8px 7px 12px;
  box-shadow: 0 1.5px 10px #b7dbff18;
  border: 1.3px solid #f0f5ff;
  transition: box-shadow 0.13s, border 0.14s;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}
.projects-list li:last-child { margin-bottom: 14px; }
.projects-list li:hover, .projects-list li:focus-within {
  box-shadow: 0 4px 24px #b9e3ff33;
  border-color: #b0d7fa;
}
.projects-list li.selected {
  background: #eaf4fd !important;
  box-shadow: 0 4px 24px #b9e3ff1a;
  border-color: #b0d7fa;
}
.projects-list li.selected .project-name {
  background: none !important;
}


.project-header-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.project-emoji {
  font-size: 1.24em;
  margin-right: 2px;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.project-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.04em;
  color: #23478d;
  font-weight: 700;
  line-height: 1;
  display: block;
  text-decoration: none;
}
.project-name.active,
 {
  background: #eaf4fd;
}
.projects-settings-btn {
  padding: 0 2px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.18em;
  color: #767676;
  border-radius: 6px;
  transition: color 0.12s, background 0.13s;
}
.projects-settings-btn:hover, .projects-settings-btn:focus {
  color: #3286de;
  background: #f0f8ff;
}
.pin-btn {
  margin-left: 2px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 2px 0 2px;
  border-radius: 5px;
  transition: filter 0.12s, background 0.13s;
  flex-shrink: 0;
}
.pin-btn svg { display: block; }
.pin-btn:hover svg path { filter: drop-shadow(0 0 3px #f3b5b5); }
.pin-btn:focus { background: #eaf2fb; }
.new-indicator {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%; background: #1abc9c; margin-right: 8px;
}
.project-meta {
  margin-left: 2.2em;
  font-size: 0.99em;
  color: #44619c;
  margin-top: 3px;
  display: flex;
  gap: 1em;
  align-items: center;
  white-space: normal;
  overflow: hidden;
  max-width: 100%;
}
.meta-label, .meta-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 95%;
  display: inline-block;
  color: #447bc3;
  font-weight: 400;
}
@media (max-width: 700px) {
  .sidebar-projects {
    border-radius: 0;
    min-width: unset;
    max-width: unset;
    box-shadow: none;
    border-right: none;
    padding: 0;
  }
  .projects-list li {
    margin: 11px 4vw 0 4vw;
    border-radius: 10px;
    font-size: 0.98em;
    padding: 10px 5px 7px 10px;
  }
}
.sidebar-projects,
.projects-list li,
.project-header-row,
.project-emoji,
.project-name,
.project-meta,
.meta-label,
.meta-value {
  font-size: 0.99em !important;
}

.project-name {
  font-size: 0.98em !important;
  font-weight: 600 !important;
}

.project-emoji {
  font-size: 1.1em !important;
}

.project-meta {
  font-size: 0.93em !important;
}