/* ============================================================
   IAMSHIBA – Apple MacBook Air skin (overrides only)
   FICHIER 2/2 : NAVBAR GAUCHE (DOCK VERTICAL)
   À charger APRÈS iamshiba-core.css
   ============================================================ */

/* ============================================================
   0. Layout global : zone fixe à gauche pour le dock
   ============================================================ */

/* 
   Colonne gauche réservée en permanence (dock + labels)
   => même padding en collapsed et extended => le contenu ne bouge jamais
*/
:root {
  --iamshiba-dock-width: 50px;  /* 🔧 largeur de la colonne nav (change ici si besoin) */
}

body {
  padding-left: var(--iamshiba-dock-width) !important;
  overflow-x: hidden;
}

/* ============================================================
   1. Base navbar Espo : on neutralise la barre noire
   ============================================================ */

body .navbar.navbar-inverse {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* On masque les boutons hamburger / side-menu natifs d'Espo */
body .navbar.navbar-inverse .navbar-header .navbar-toggle,
body .navbar.navbar-inverse .navbar-header .side-menu-button {
  display: none !important;
}

/* ============================================================
   2. Logo Shiba en haut à gauche
   ============================================================ */

body .navbar.navbar-inverse .navbar-logo-container {
  position: fixed !important;
  left: 5px !important;
  top: 5px !important;
  width: 35px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .navbar.navbar-inverse .navbar-logo-container .logo {
  max-width: 35px !important;
  max-height: 35px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============================================================
   3. Dock vertical (.tabs) – structure commune
   ============================================================ */

/* 
   .tabs = dock vertical, toujours la même largeur,
   uniquement le COMPORTEMENT interne change (texte visible ou non).
*/
body .navbar.navbar-inverse .nav.navbar-nav.tabs {
  position: fixed !important;
  left: 4px !important;
  top: 56px !important;                     /* sous le logo */
  width: calc(var(--iamshiba-dock-width) - 8px) !important;
  height: calc(100vh - 76px) !important;    /* laisse la place pour la flèche */

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

/* Chaque item du dock : aucun float */
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Le bouton "..." poussé vers le bas du dock */
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li.dropdown.more {
  margin-top: auto !important;
}

/* ============================================================
   4. Icônes – carrés translucides (communs aux 2 modes)
   ============================================================ */

body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px !important;
  height: 36px !important;

  border-radius: 12px !important;
  padding: 0 !important;
  margin-left: 0 !important;

  text-decoration: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  overflow: visible !important; /* pour laisser sortir la bulle texte */

  background: rgba(255,255,255,0.96) !important;
  color: #8d9295 !important;

  transition:
    transform 0.16s ease-out,
    background 0.16s ease-out,
    border-color 0.16s ease-out,
    color 0.12s ease-out !important;
}

/* ACTIVITIES (après divider-8) : icône simple, sans pill blanc */
body .navbar.navbar-inverse .nav.navbar-nav.tabs
> li[data-name="divider-8"] ~ li.tab > a.nav-link {
  background: transparent !important;
  border: none !important;
}

/* Conteneur de l'icône */
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link .short-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Icônes FontAwesome */
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link .short-label > .fas,
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link .short-label > .far,
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link .short-label > .fal,
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link .short-label > .fab {
  font-size: 16px !important;
  color: #8d9295 !important;
  transition: inherit;
}

/* Hover : léger zoom + icône plus foncée */
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li:hover > a.nav-link {
  transform: scale(1.12) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

body .navbar.navbar-inverse .nav.navbar-nav.tabs > li:hover > a.nav-link .short-label > .fas,
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li:hover > a.nav-link .short-label > .far {
  color: #111827 !important;
}

/* Pas de tooltips Bootstrap qui viennent se mettre au-dessus */
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li .tooltip {
  display: none !important;
}

/* ============================================================
   5. Labels texte (full-label)
   ============================================================ */

/* Bulle texte commune (on gère la visibilité par mode juste après) */
body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link .full-label {
  position: absolute !important;
  left: 44px !important;                  /* à droite du carré d’icône */
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: inline-block !important;
  max-width: none !important;
  overflow: visible !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  white-space: nowrap !important;

  background: rgba(255,255,255,0.92) !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 10px rgba(15,23,42,0.10) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 10000 !important;
  transition: opacity 0.15s ease-out !important;
}

/* Home : jamais de bulle de texte (logo only) */
body .navbar.navbar-inverse .nav.navbar-nav.tabs
> li[data-name="Home"] > a.nav-link .full-label {
  display: none !important;
}

/* -------- Mode COLLAPSÉ : texte uniquement au hover -------- */

body.minimized .navbar.navbar-inverse .nav.navbar-nav.tabs
> li:not([data-name="Home"]):hover > a.nav-link .full-label {
  opacity: 1 !important;
  visibility: visible !important;
}

/* -------- Mode ÉTENDU : texte toujours visible -------- */

body:not(.minimized) .navbar.navbar-inverse .nav.navbar-nav.tabs
> li > a.nav-link .full-label {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* (si tu gardes Home) : label aussi visible en extended */
body:not(.minimized) .navbar.navbar-inverse .nav.navbar-nav.tabs
> li[data-name="Home"] > a.nav-link .full-label {
  display: inline-block !important;
}

/* En extended, le hover ne change plus l'opacité du texte */
body:not(.minimized) .navbar.navbar-inverse .nav.navbar-nav.tabs
> li:not([data-name="Home"]):hover > a.nav-link .full-label {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   6. Diviseurs "CRM" / "Activities"
   ============================================================ */

body .navbar.navbar-inverse .nav.navbar-nav.tabs > li.tab-divider {
  width: 100% !important;
  margin: 10px 0 4px !important;
  border: none !important;
  text-align: left !important;
  padding-left: 44px !important; /* aligné sur les labels */
}

body .navbar.navbar-inverse .nav.navbar-nav.tabs
> li.tab-divider .nav-divider-text .label-text {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #b0b3b8 !important;
}

/* ============================================================
   7. Bouton "..." et menu déroulant
   ============================================================ */

body .navbar.navbar-inverse .nav.navbar-nav.tabs > li.dropdown.more > a {
  background: transparent !important;
  border: none !important;
}

body .navbar.navbar-inverse .nav.navbar-nav.tabs > li.dropdown.more > a .more-icon {
  color: #4b4f54 !important;
}

body .navbar.navbar-inverse .nav.navbar-nav.tabs
> li.dropdown.more.open > ul.more-dropdown-menu {
  position: fixed !important;
  left: calc(44px + 36px + 8px) !important; /* à droite de l’icône ... */
  bottom: 24px !important;
  top: auto !important;
  transform: none !important;

  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;

  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 12px 30px rgba(15,23,42,0.18) !important;
  border-radius: 14px !important;
  z-index: 10001 !important;
}

/* ============================================================
   8. Flèche minimizer
   ============================================================ */

body .navbar.navbar-inverse a.minimizer {
  position: fixed !important;
  left: 8px !important;
  bottom: 10px !important;
  width: 32px !important;
  height: 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: #e5e7eb !important;
  border: 1px solid #d1d5db !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  z-index: 10002 !important;
}

body .navbar.navbar-inverse a.minimizer .right,
body .navbar.navbar-inverse a.minimizer .left {
  font-size: 14px !important;
}

/* COLLAPSÉ : flèche vers la droite (▶) */
body.minimized .navbar.navbar-inverse a.minimizer .right {
  display: inline-block !important;
}
body.minimized .navbar.navbar-inverse a.minimizer .left {
  display: none !important;
}

/* ÉTENDU : flèche vers la gauche (◀) */
body:not(.minimized) .navbar.navbar-inverse a.minimizer .right {
  display: none !important;
}
body:not(.minimized) .navbar.navbar-inverse a.minimizer .left {
  display: inline-block !important;
}

/* ============================================================
   9. Mobile – option simple
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --iamshiba-dock-width: 170px; /* colonne un peu moins large sur mobile */
  }

  body {
    padding-left: var(--iamshiba-dock-width) !important;
  }

  body .navbar.navbar-inverse .nav.navbar-nav.tabs {
    top: 52px !important;
    width: calc(var(--iamshiba-dock-width) - 8px) !important;
    height: calc(100vh - 72px) !important;
  }

  body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  body .navbar.navbar-inverse .nav.navbar-nav.tabs > li > a.nav-link .full-label {
    font-size: 11px !important;
  }

  body .navbar.navbar-inverse .nav.navbar-nav.tabs
  > li.dropdown.more.open > ul.more-dropdown-menu {
    left: 80px !important;
    bottom: 20px !important;
  }
}

/* ============================================================
   10. Patch – masquer le bouton Home dans le dock
   ============================================================ */

body .navbar.navbar-inverse .nav.navbar-nav.tabs > li[data-name="Home"] {
  display: none !important;
}