/* V3.8 - Header pro + navigation racine simplifiée */
.topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(280px, 1fr) max-content !important;
  grid-template-areas: "brand search right" !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 58px !important;
  padding: 8px 12px !important;
  background: #0c1119 !important;
  border-bottom: 1px solid #252f3f !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

.topbar .brand {
  grid-area: brand !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  padding: 0 2px !important;
}

.topbar .search {
  grid-area: search !important;
  min-width: 0 !important;
  height: 40px !important;
  border-radius: 11px !important;
  background: #0a0f16 !important;
  border: 1px solid #2c3748 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

.topbar .search:focus {
  border-color: #526b93 !important;
  box-shadow: 0 0 0 3px rgba(82, 107, 147, .13) !important;
}

.topbar .top-actions {
  grid-area: right !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: max-content !important;
}

.topbar .global-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-column: auto !important;
  order: initial !important;
  overflow: visible !important;
}

.global-tabs button {
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  border: 1px solid #2a3546 !important;
  background: #111823 !important;
  color: #d7e0ec !important;
  font-size: 12.5px !important;
  transition: .15s ease !important;
}

.global-tabs button:hover {
  background: #1a2431 !important;
  border-color: #3c4b62 !important;
}

.global-tabs button.active {
  box-shadow: none !important;
}

.global-tabs button[data-section="vault"].active {
  background: #1f5f49 !important;
  border-color: #2f7c61 !important;
  color: #eafbf3 !important;
}

.global-tabs button[data-section="memo"].active {
  background: #355b9f !important;
  border-color: #4f74b9 !important;
  color: #fff !important;
}

.global-tabs button[data-section="command"].active {
  background: #c86f43 !important;
  border-color: #e18557 !important;
  color: #fff !important;
}

.global-tabs button[data-section="template"].active {
  background: #6f4aa5 !important;
  border-color: #8b64bf !important;
  color: #fff !important;
}

.data-status {
  height: 36px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  background: #111823 !important;
  border: 1px solid #2a3546 !important;
  font-size: 11px !important;
}

.data-status:hover {
  background: #182130 !important;
}

.topbar .icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #111823 !important;
  border: 1px solid #2a3546 !important;
}

.topbar .icon-btn:hover {
  background: #1a2431 !important;
}

@media(max-width:1100px) {
  .topbar {
    grid-template-columns: max-content minmax(200px, 1fr) !important;
    grid-template-areas:
      "brand right"
      "search search" !important;
  }

  .topbar .top-actions {
    justify-content: flex-end !important;
  }
}

@media(max-width:760px) {
  .topbar {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand right"
      "search search" !important;
  }

  .global-tabs {
    max-width: 58vw;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .global-tabs::-webkit-scrollbar {
    display: none
  }

  .global-tabs button {
    padding: 0 10px !important
  }

  .data-status span:last-child {
    display: none
  }
}

/* V3.8.1 - Header final */
.topbar {
  grid-template-columns: max-content minmax(320px, 1fr) max-content !important;
  grid-template-areas: "brand search right" !important;
}

.topbar .top-actions {
  grid-area: right !important;
}

.topbar .global-tabs {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  max-width: none !important;
}

@media(max-width:1100px) {
  .topbar {
    grid-template-columns: max-content minmax(220px, 1fr) !important;
    grid-template-areas:
      "brand right"
      "search search" !important;
  }
}

@media(max-width:760px) {
  .topbar .top-actions {
    max-width: 72vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar .top-actions::-webkit-scrollbar {
    display: none
  }
}

/* V3.9 - Navigation redimensionnable + header redesign */
:root {
  --explorer-width: 260px;
}

/* Layout avec splitter */
.unified-workspace {
  position: relative;
  display: grid !important;
  grid-template-columns: var(--explorer-width) 1px minmax(0, 1fr) !important;
  gap: 0 !important;
}

.library-workspace {
  overflow: hidden;
  border: 1px solid #283243;
  border-radius: 8px;
}

.library-workspace>.explorer-pane,
.library-workspace>.detail-pane {
  border: 0;
  border-radius: 0 !important;
}

.explorer-pane {
  grid-column: 1;
  border-radius: 8px 0 0 8px !important;
}

.workspace-splitter {
  grid-column: 2;
  position: relative;
  width: 9px;
  margin-left: -4px;
  cursor: col-resize;
  background: transparent;
  z-index: 20;
  outline: none;
}

.workspace-splitter::before {
  display: none;
}

.workspace-splitter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 3px;
  height: 38px;
  transform: translateY(-50%) scaleY(.72);
  border-radius: 3px;
  background: var(--section-accent, #6f91cf);
  opacity: 0;
  transition: opacity .15s, transform .15s;
}

.workspace-splitter:hover::after,
.workspace-splitter.dragging::after,
.workspace-splitter:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

.detail-pane {
  grid-column: 3;
  border-radius: 0 8px 8px 0 !important;
}

/* Header complètement revu */
.topbar {
  min-height: 76px !important;
  height: 76px !important;
  display: grid !important;
  grid-template-columns: max-content minmax(220px, 1fr) max-content !important;
  grid-template-areas: "brand center tools" !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 7px 12px !important;
  background: #0b1017 !important;
  border-bottom: 1px solid #222c3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18) !important;
}

.topbar .brand {
  grid-area: brand !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  white-space: nowrap;
  cursor: pointer;
}

.topbar .search {
  grid-area: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  max-width: 760px;
  width: 100%;
  justify-self: center;
  height: 36px !important;
  padding: 0 !important;
  background: #0f151e !important;
  border: 1px solid #293445 !important;
  border-radius: 10px !important;
  position: relative;
}

.topbar .search::before {
  content: "⌕";
  color: #6f7e93;
  font-size: 17px;
  margin-left: 11px;
  flex: 0 0 auto;
}

.topbar .search input {
  width: 100%;
  height: 34px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #e5edf7 !important;
  padding: 0 10px 0 0 !important;
  font-size: 12.5px !important;
}

.topbar .search:focus-within {
  border-color: #4c6489 !important;
  box-shadow: 0 0 0 3px rgba(76, 100, 137, .12) !important;
}

.topbar .top-actions {
  grid-area: tools !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: max-content !important;
}

.topbar .global-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px !important;
  margin: 0 !important;
  background: #101721 !important;
  border: 1px solid #263142 !important;
  border-radius: 11px !important;
}

.global-tabs button {
  height: 30px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #95a4b8 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.global-tabs button:hover {
  background: #192231 !important;
  color: #dce5f2 !important;
}

.global-tabs button.active {
  color: #fff !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18) !important;
}

.global-tabs button[data-section="vault"].active {
  background: #1f674d !important
}

.global-tabs button[data-section="memo"].active {
  background: #3e65ab !important
}

.global-tabs button[data-section="command"].active {
  background: #cf7445 !important
}

.global-tabs button[data-section="template"].active {
  background: #7650aa !important
}

.data-status {
  height: 34px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  background: #101721 !important;
  border: 1px solid #263142 !important;
  color: #9dacbf !important;
  font-size: 10.5px !important;
}

.data-status:hover {
  background: #17202d !important;
}

.topbar .icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: #101721 !important;
  border: 1px solid #263142 !important;
  color: #9dacbf !important;
}

.topbar .icon-btn:hover {
  background: #17202d !important;
  color: #fff !important;
}

/* Petit indicateur de largeur */
.explorer-width-tip {
  position: fixed;
  z-index: 200000;
  pointer-events: none;
  padding: 5px 8px;
  border-radius: 7px;
  background: #0b1017;
  border: 1px solid #35445a;
  color: #c8d3e3;
  font-size: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

/* Responsive */
@media(max-width:1180px) {
  .topbar {
    height: auto !important;
    min-height: 76px !important;
    grid-template-columns: max-content minmax(180px, 1fr) !important;
    grid-template-areas:
      "brand tools"
      "center center" !important;
    padding-bottom: 9px !important;
  }

  .topbar .top-actions {
    justify-content: flex-end !important;
  }

  .topbar .search {
    max-width: none !important;
  }
}

@media(max-width:760px) {
  :root {
    --explorer-width: 210px
  }

  .unified-workspace {
    grid-template-columns: var(--explorer-width) 5px minmax(0, 1fr) !important;
  }

  .library-workspace {
    border: 0
  }

  .library-workspace>.detail-pane {
    border: 1px solid #283243
  }

  .topbar .global-tabs {
    max-width: min(62vw, calc(100vw - 151px)) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .topbar .global-tabs::-webkit-scrollbar {
    display: none
  }

  .global-tabs button {
    padding: 0 9px !important
  }

  .data-status span:last-child {
    display: none
  }
}