/**
 * @file
 * Dock d'accions de la pàgina (pestanyes) per a editors al front.
 *
 * Identitat de la Taula: blau #0b72b5, verd #8c9924, gris #606060, FedraSans.
 * Es desplaça amb la barra d'administració (Gin) via --drupal-displace-offset-*.
 */

.taula-dock {
  --dock-blue: #0b72b5;
  --dock-blue-dark: #085a8f;
  --dock-green: #8c9924;
  --dock-red: #c0392b;
  --dock-ink: #2f3337;
  --dock-size: 44px;
  --dock-gap: 4px;
  --dock-left: calc(var(--drupal-displace-offset-left, 0px) + 16px);

  position: fixed;
  /* El bloc és dins del contingut (amb el seu propi context d'apilament): cal un
     valor alt, com el del mòdul anterior, per quedar per sobre de les imatges. */
  z-index: 9999;
  top: 50%;
  left: var(--dock-left);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateY(-50%);
  font-family: "FedraSans", Helvetica, Arial, sans-serif;
  transition: left 0.2s ease;
}

.taula-dock__panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(11, 114, 181, 0.15);
  border-radius: calc(var(--dock-size) / 2 + 6px);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px rgba(11, 114, 181, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.taula-dock__list {
  display: flex;
  flex-direction: column;
  gap: var(--dock-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les pestanyes secundàries, separades i una mica més petites. */
.taula-dock__list--secondary {
  --dock-size: 36px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid #d8e8f2;
}

.taula-dock__item {
  position: relative;
  margin: 0;
  padding: 0;
}

.taula-dock__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dock-size);
  height: var(--dock-size);
  border-radius: 50%;
  color: var(--dock-blue);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.taula-dock__link:hover,
.taula-dock__link:focus-visible {
  color: #fff;
  background: var(--dock-blue);
  text-decoration: none;
}

.taula-dock__link:focus-visible,
.taula-dock__toggle:focus-visible {
  outline: 3px solid var(--dock-green);
  outline-offset: 2px;
}

.taula-dock__link:active {
  transform: scale(0.94);
}

.taula-dock__item.is-active > .taula-dock__link {
  color: #fff;
  background: var(--dock-green);
}

.taula-dock__link--delete:hover,
.taula-dock__link--delete:focus-visible {
  background: var(--dock-red);
}

/* Icones: SVG com a màscara perquè agafin el color del text. */
.taula-dock__icon {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--dock-icon) center / contain no-repeat;
  mask: var(--dock-icon) center / contain no-repeat;
}
.taula-dock__list--secondary .taula-dock__icon { width: 17px; height: 17px; }
.taula-dock__icon--view { --dock-icon: url(../images/dock/view.svg); }
.taula-dock__icon--edit { --dock-icon: url(../images/dock/edit.svg); }
.taula-dock__icon--delete { --dock-icon: url(../images/dock/delete.svg); }
.taula-dock__icon--revisions { --dock-icon: url(../images/dock/revisions.svg); }
.taula-dock__icon--translate { --dock-icon: url(../images/dock/translate.svg); }
.taula-dock__icon--clone { --dock-icon: url(../images/dock/clone.svg); }
.taula-dock__icon--display { --dock-icon: url(../images/dock/display.svg); }
.taula-dock__icon--results { --dock-icon: url(../images/dock/results.svg); }
.taula-dock__icon--devel { --dock-icon: url(../images/dock/devel.svg); }
.taula-dock__icon--settings { --dock-icon: url(../images/dock/settings.svg); }
.taula-dock__icon--link { --dock-icon: url(../images/dock/link.svg); }
.taula-dock__icon--collapse { --dock-icon: url(../images/dock/collapse.svg); }

/* Etiqueta: bafarada que llisca cap a la dreta. */
.taula-dock__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  padding: 7px 12px;
  border-radius: 6px;
  color: #fff;
  background: var(--dock-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-6px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.taula-dock__label::before {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  content: "";
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}
.taula-dock__link:hover .taula-dock__label,
.taula-dock__link:focus-visible .taula-dock__label {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}
.taula-dock__item.is-active .taula-dock__label {
  background: var(--dock-green);
}

/* Botó per plegar o desplegar el dock. */
.taula-dock__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(11, 114, 181, 0.2);
  border-radius: 50%;
  color: var(--dock-blue);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.taula-dock__toggle:hover {
  color: #fff;
  background: var(--dock-blue);
}
.taula-dock__toggle .taula-dock__icon {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.taula-dock.is-collapsed .taula-dock__panel {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  position: absolute;
  pointer-events: none;
}
.taula-dock.is-collapsed .taula-dock__toggle {
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--dock-blue);
}
.taula-dock.is-collapsed .taula-dock__toggle .taula-dock__icon {
  --dock-icon: url(../images/dock/edit.svg);
  transform: none;
}

/* Pantalles petites: barra horitzontal a baix, sense etiquetes flotants. */
@media (max-width: 767px) {
  .taula-dock {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    flex-direction: row;
    transform: translateX(-50%);
  }
  .taula-dock__panel,
  .taula-dock__list {
    flex-direction: row;
  }
  .taula-dock__list--secondary {
    padding-top: 0;
    padding-left: 6px;
    border-top: 0;
    border-left: 1px solid #d8e8f2;
  }
  .taula-dock__label {
    display: none;
  }
  .taula-dock__toggle .taula-dock__icon {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .taula-dock,
  .taula-dock *,
  .taula-dock *::before {
    transition: none !important;
  }
}

@media print {
  .taula-dock {
    display: none !important;
  }
}

/* Amb la barra d'administració de Gin desplegada al costat (>= 61em, el punt
   de tall de Gin), la capçalera fixa i els contenidors en respecten l'espai.
   Per sota, la barra de Gin es mostra superposada i no cal desplaçar res. */
/* Capçalera fixa amb sessió iniciada. El tema reservava 79 px per a l'antiga
   barra d'eines de core (.user-logged-in header { margin-top: 79px }). Amb Gin,
   la barra superior del front (gin-secondary-toolbar) es fixa a dalt i la
   capçalera va just a sota, en fer scroll també. Per sota de 61em, Gin ja
   fixa les seves barres i es manté el comportament original del tema. */
@media (min-width: 61em) {
  body.gin--navigation.user-logged-in header#navbar {
    margin-top: 0;
  }
  body.gin--navigation header#navbar.navbar {
    top: var(--drupal-displace-offset-top, 0px);
  }
  /* Gin ja hi posa el margin-left de l'amplada de la barra lateral. */
  body.gin--navigation .gin-secondary-toolbar--frontend {
    position: fixed;
    z-index: 502;
    top: 0;
    right: 0;
    left: 0;
  }
  /* Espai que ocupava la barra quan era dins del flux de la pàgina. */
  body.gin--navigation .dialog-off-canvas-main-canvas {
    padding-top: var(--drupal-displace-offset-top, 0px);
  }

  header#navbar.navbar {
    left: var(--drupal-displace-offset-left, 0px);
    right: var(--drupal-displace-offset-right, 0px);
  }
  /* Els .container de Bootstrap 3 d'amplada fixa no hi caben. Les columnes
     del constructor que també porten .container (col-*) conserven l'amplada
     de la graella. */
  body.gin--navigation .container:not([class*="col-"]) {
    width: auto;
    max-width: 1170px;
  }
  /* La fila principal té marges negatius de 15 px que la fan passar per sota
     de la barra lateral. */
  body.gin--navigation .main-container > .row {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (max-width: 60.99em) {
  .taula-dock {
    --dock-left: 16px;
  }
  /* Mòbil: la barra negra de Gin (39 px, fixa) i, a sota, la barra "Edita"
     també fixa; la capçalera del tema just després (Drupal.displace en suma
     les alçades a --drupal-displace-offset-top). */
  body.gin--navigation .gin-secondary-toolbar {
    position: fixed;
    z-index: 502;
    top: 39px;
    right: 0;
    left: 0;
  }
  body.gin--navigation.user-logged-in header#navbar {
    margin-top: 0;
  }
  body.gin--navigation header#navbar.navbar {
    top: var(--drupal-displace-offset-top, 0px);
  }
  body.gin--navigation .dialog-off-canvas-main-canvas {
    padding-top: 48px;
  }
}