@use "tokens" as *;

// Piezas compartidas por los gestores del admin (previews y PDF).
// Mobile-first: todo funciona en una columna estrecha; la rejilla pasa a dos
// columnas según el ancho del contenedor `content` (el área de contenido del
// AdminLayout), no del viewport.

.manager-container {
  display: grid;
  gap: $space-5;
  // Deja aire bajo las migas y esquiva el asa del panel derecho.
  margin-top: $space-4;
}

.manager-bar {
  display: flex;
  justify-content: flex-end;
  gap: $space-2;
  flex-wrap: wrap;
}

// Mismos escalones que el preset `cards` de BaseGrid (1 → 2 → 3 → 4 → 5 con
// los breakpoints canónicos del contenedor `content`).
.manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: $space-4;
  align-items: start;

  @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.manager-card {
  background: $surface;
  border: 1px solid $border;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  overflow: hidden;
  min-width: 0;
  cursor: pointer; // TODA la tarjeta selecciona (menos sus controles)
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  // La tarjeta es su propio contenedor `content`: los botones con icono se
  // apilan según el ancho de la TARJETA, no de la página (patrón kontuan).
  container-name: content;
  container-type: inline-size;

  &:hover {
    border-color: $border-strong;
    box-shadow: $shadow-md;

    .manager-card__hint { color: $accent-500; }
  }

  &:focus-visible {
    outline: 2px solid $accent-500;
    outline-offset: 2px;
  }

  &.is-active {
    border-color: $accent-500;
    box-shadow:
      0 0 0 1px $accent-500,
      0 2px 10px color-mix(in srgb, $accent-500 30%, transparent);
  }

  // Cabecera con divisoria, como la de EntityCard.
  &__head {
    display: flex;
    align-items: center;
    gap: $space-2;
    color: $text-1;
    padding: $space-3 $space-4 $space-2;
    border-bottom: 1px solid $border;
    min-width: 0;

    // Card sin nada debajo de la cabecera: ni divisoria ni padding cojo.
    &:last-child {
      border-bottom: none;
      padding-bottom: $space-3;
    }
  }

  &__title {
    font-size: $fs-16;
    font-weight: $k-fw-semibold;
    min-width: 0;
  }

  // El aspecto lo pone el .chip unificado (@edc-motor/ui); aquí solo la posición.
  &__chip {
    margin-left: auto;
    flex: 0 0 auto;
  }

  &__hint {
    flex: 0 0 auto;
    color: $text-3;

    // Sin chip, el icono se va al borde derecho.
    &:first-of-type { margin-left: auto; }
    .manager-card__chip + & { margin-left: 0; }
  }

  // Contenido como el de EntityCard: badges (chips) arriba, meta debajo.
  &__content {
    display: flex;
    flex-direction: column;
    gap: $space-2;
    padding: $space-2 $space-4 $space-3;
  }

  &__badges {
    display: flex;
    flex-wrap: wrap;
    gap: $space-1;
  }

  &__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $space-1 $space-3;
    font-size: $fs-13;
    color: $text-3;
  }

  &__body {
    border-top: 1px solid $border;
    background: $surface-2;
    padding: $space-3 $space-4;
    display: grid;
    gap: $space-3;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: $space-2;
    border-top: 1px solid $border;
    padding: $space-3 $space-4;
  }
}

.manager-stat {
  font-size: $fs-13;
  color: $text-2;

  strong { color: $text-1; }
  &.is-ok strong { color: $success; }
  &.is-warn strong { color: $warning; }
}

// ---------------------------------------------------------------------------
// Contenido del panel derecho de los gestores: selector con buscador +
// detalle del elemento elegido.
// ---------------------------------------------------------------------------

.manager-panel {
  display: grid;
  gap: $space-3;

  &__empty {
    color: $text-3;
    font-size: $fs-13;
    margin: 0;
  }

  &__kicker {
    color: $text-3;
    font-size: $fs-12;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
  }

  // Separador entre bloques del panel (acciones | sección | sección…):
  // TODOS los paneles derechos siguen el mismo orden.
  &__divider {
    border: none;
    border-top: 1px solid $border;
    margin: $space-1 0;
    width: 100%;
  }

  // Sección del panel (divisoria + kicker + contenido) con el aire justo
  // entre el kicker y lo suyo: reutilizable por cualquier panel derecho
  // (la usa el panel de bloque de PageBlocks).
  &__section {
    display: grid;
    gap: $space-2;
  }

  // Botón-volver del panel (texto con flecha): del detalle de la card
  // seleccionada al estado sin selección (los filtros del listado).
  &__back {
    display: inline-flex;
    align-items: center;
    gap: $space-1;
    background: none;
    border: none;
    padding: 0;
    color: $accent-500;
    font-size: $fs-13;
    cursor: pointer;
    justify-self: start;

    &:hover {
      color: $accent-600;
      text-decoration: underline;
    }
  }
}

.manager-detail {
  display: grid;
  gap: $space-3;
  border-top: 1px dashed $border;
  padding-top: $space-3;

  // Tras un divider del panel, la divisoria dashed propia sobra (quedaba un
  // doble separador — línea + "puntos suspensivos"): fuera.
  .manager-panel__divider + & {
    border-top: 0;
    padding-top: 0;
  }

  &__title {
    margin: 0;
    font-size: $fs-16;
    overflow-wrap: anywhere;
  }

  &__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $space-1;
  }

  &__meta {
    color: $text-2;
    font-size: $fs-13;
    margin: 0;
  }

  &__error {
    color: $danger;
    font-size: $fs-13;
    margin: 0;
    overflow-wrap: anywhere;
  }

  &__figures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: $space-2;
  }

  &__figure {
    margin: 0;
    display: grid;
    gap: $space-1;
    justify-items: center;

    img,
    .manager-detail__hole {
      width: 100%;
      border-radius: $radius-sm;
      border: 1px solid $border;
      background: $surface-2;
    }

    figcaption {
      color: $text-3;
      font-size: $fs-12;
    }

    &.is-missing figcaption { color: $warning; }
  }

  &__hole {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    color: $text-3;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    gap: $space-2;

    // Botones de acción del panel: TODOS con su color, en CONTORNO — borde
    // y texto/stroke del color de la acción; en hover el color pasa al
    // fondo y el texto al color de texto normal.
    @each $variant, $color in (
      primary: $accent-500,
      info: $info,
      warning: $warning,
      success: $success,
      danger: $danger,
    ) {
      .edc-button--#{$variant} {
        background: transparent;
        border-color: $color;
        color: $color;

        // Relleno: el texto lo decide el fondo (contrast-text), no el tema
        // — $text-1 del tema oscuro no se leía sobre warning/success.
        &:hover:not(:disabled) {
          background: $color;
          border-color: $color;
          @include contrast-text($color);
        }

        // Interruptores (aria-pressed): encendido = RELLENO del color (como
        // el hover); apagado = contorno ATENUADO — el estado se ve de un
        // vistazo junto a los botones de acción normales.
        &.is-on {
          background: $color;
          border-color: $color;
          @include contrast-text($color);
        }

        &.is-off {
          border-color: color-mix(in srgb, $color 45%, transparent);
        }
      }
    }
  }

  // Listado compacto del panel (p.ej. bloques de la página seleccionada):
  // cada fila es UNA línea, con el resto truncado.
  &__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: $space-2;
  }

  &__row-line {
    display: flex;
    align-items: baseline;
    gap: $space-2;
    min-width: 0;
    font-size: $fs-13;

    strong {
      flex: 0 0 auto;
      color: $text-1;
    }
  }

  &__row-text {
    color: $text-3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // Campos del bloque seleccionado: etiqueta + valor; los valores largos se
  // recortan a unas pocas líneas.
  // Campo del panel de bloque: «Label: valor» como UN ÚNICO PÁRRAFO corrido
  // — dt y dd van en línea, el valor arranca tras los dos puntos y, al
  // envolver, ocupa el ancho completo bajo el label (nada de dos columnas).
  // El clamp de líneas vive ahora en el PÁRRAFO entero (el -webkit-box no
  // convive con hijos inline sueltos, así que recorta label+valor juntos:
  // con labels de una palabra, en la práctica es el mismo recorte de antes).
  // Las imágenes van apiladas (is-stacked), con la miniatura bajo el label.
  &__field {
    min-width: 0;
    font-size: $fs-13;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;

    dt {
      display: inline;
      color: $text-3;
      font-size: $fs-12;
      text-transform: uppercase;
      letter-spacing: 0.04em;

      // El hueco tras los dos puntos va en margen: Vue condensa el
      // whitespace entre <dt> y <dd> y en línea quedarían pegados.
      &::after {
        content: ':';
        margin-inline-end: 0.4em;
      }
    }

    dd {
      display: inline;
      margin: 0;
      color: $text-2;
    }

    &.is-stacked {
      display: grid;
      gap: 2px;
      -webkit-line-clamp: none;
      line-clamp: none;
      overflow: visible;

      dt::after { content: none; }
    }
  }

  &__fields {
    margin: 0;
    display: grid;
    gap: $space-2;
  }

  &__thumb {
    max-width: 120px;
    border-radius: $radius-sm;
    border: 1px solid $border;
    background: $surface-2;
  }
}