/* ===================================================================
   AppV2 Dialogs — Style Belle Époque (France, ~1900)
   Palette : bordeaux, or antique, sépia, fond parchemin clair
   =================================================================== */

// Couleurs Belle Époque
@be-bordeaux:    #5a0a14;
@be-gold:        #8b6914;
@be-gold-light:  rgba(139, 105, 20, 0.25);
@be-gold-border: rgba(139, 105, 20, 0.55);
@be-sepia:       #3d2b1f;
@be-sepia-light: rgba(61, 43, 31, 0.08);

.malefices-roll-dialog {

  .window-content {
    padding: 0;
    background: @bg-sheet;
    color: @be-sepia;
    font-size: 0.85rem;
  }

  .skill-roll-dialog {
    display: flex;
    flex-direction: column;

    // ── En-tête ──────────────────────────────────────────────
    header.roll-dialog-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 0.75rem 0.5rem;
      background: linear-gradient(to bottom, rgba(90, 10, 20, 0.12), rgba(90, 10, 20, 0.04));
      border-bottom: 2px solid @be-gold-border;
    }

    .actor-icon {
      width: 52px;
      height: 52px;
      object-fit: cover;
      border: 2px solid @be-gold-border;
      border-radius: 2px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.35);
      flex-shrink: 0;
    }

    // Custom title div — no h1 to avoid Foundry theme overrides
    .dialog-roll-title {
      color: @be-bordeaux;
      font-family: @font-rivanna;
      font-size: 2rem;
      font-weight: bold;
      flex: 1;
      line-height: 1.1;
      text-shadow: 1px 1px 2px rgba(255,255,255,0.6);
    }

    // ── Séparateur décoratif ──────────────────────────────────
    .dialog-separator {
      width: 100%;
      height: 18px;
      background: url("../images/ui/separator_01.webp") center/auto 100% no-repeat;
      opacity: 0.7;
      margin: 0.1rem 0;
    }

    // ── Corps du dialog ───────────────────────────────────────
    .dialog-body {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding: 0.5rem 0.75rem 0.75rem;
    }

    // Ligne attribut principal
    .dialog-attribute-row {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 0.5rem;
      padding: 0.3rem 0.5rem;
      background: @be-gold-light;
      border: 1px solid @be-gold-border;
      border-radius: 2px;

      .dialog-attr-label {
        font-family: @font-rivanna;
        font-size: 1.1rem;
        color: @be-bordeaux;
        font-weight: bold;
        flex: 1;
      }

      .dialog-attr-value {
        font-family: @font-rivanna;
        font-size: 1.3rem;
        font-weight: bold;
        color: @be-sepia;
        min-width: 2rem;
        text-align: right;
      }
    }

    // Titre de section (éléments biographiques)
    .dialog-section-title {
      font-family: @font-rivanna;
      font-size: 0.95rem;
      color: @be-gold;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid @be-gold-border;
      padding-bottom: 0.15rem;
      margin-top: 0.25rem;
    }

    // Liste des éléments biographiques
    .dialog-bio-list {
      list-style: none;
      margin: 0 0 0.25rem 0;
      padding: 0 0 0 0.5rem;

      li {
        color: @be-sepia;
        font-size: 0.8rem;
        padding: 0.1rem 0;
        border-bottom: 1px dashed rgba(139, 105, 20, 0.2);

        &:last-child { border-bottom: none; }

        &::before {
          content: "✦ ";
          color: @be-gold;
          font-size: 0.65rem;
        }
      }
    }

    // Zone des modificateurs
    .dialog-modifiers {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      margin-top: 0.2rem;
    }

    .dialog-modifier-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      padding: 0.25rem 0.5rem;
      border-bottom: 1px solid rgba(139, 105, 20, 0.18);

      &:hover {
        background: @be-sepia-light;
      }

      .dialog-modifier-label {
        flex: 1;
        color: @be-sepia;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: default;
      }

      select {
        flex: 0 0 140px;
        width: 140px;
        border: 1px solid @be-gold-border;
        background: rgba(255, 252, 245, 0.85);
        color: @be-sepia;
        font-size: 0.82rem;
        padding: 1px 4px;
        border-radius: 2px;

        &:hover {
          border-color: @be-gold;
          border-width: 2px;
        }
        &:focus {
          outline: none;
          border-color: @be-bordeaux;
          box-shadow: 0 0 3px rgba(90, 10, 20, 0.3);
        }
      }
    }
  }

  footer.form-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to bottom, rgba(139, 105, 20, 0.08), rgba(139, 105, 20, 0.16));
    border-top: 1px solid @be-gold-border;

    button {
      flex: 1;
      padding: 0.4rem 0.75rem;
      font-size: 0.9rem;
      font-weight: 600;
      border: 1px solid @be-gold-border;
      border-radius: 2px;
      background: linear-gradient(to bottom, rgba(255, 252, 240, 0.9), rgba(240, 230, 200, 0.9));
      color: @be-sepia;
      cursor: pointer;
      transition: all 0.15s ease;

      &:hover {
        background: linear-gradient(to bottom, rgba(240, 220, 170, 0.95), rgba(220, 195, 140, 0.95));
        border-color: @be-gold;
        color: @be-bordeaux;
      }

      &[data-action="roll"],
      &[type="submit"] {
        background: linear-gradient(to bottom, @be-bordeaux, darken(@be-bordeaux, 8%));
        color: rgba(255, 245, 220, 0.95);
        border-color: darken(@be-bordeaux, 10%);
        font-size: 0.95rem;

        &:hover {
          background: linear-gradient(to bottom, lighten(@be-bordeaux, 5%), @be-bordeaux);
          border-color: @be-bordeaux;
          color: #fff;
        }
      }
    }
  }
}

/* ===================================================================
   Dialogs AppV2 partagés (class: MaleficesDialog)
   — utilisé par Tirage Tarot et Résumé des Personnages
   =================================================================== */
.MaleficesDialog {

  .window-content {
    background: @bg-sheet;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  // ── Résumé des Personnages ─────────────────────────────
  .character-summary-container {
    padding: 0.5rem 0.75rem;
    color: @be-sepia;

    .items-list {
      list-style: none;
      margin: 0;
      padding: 0;

      .item {
        display: flex;
        align-items: center;
        padding: 0.2rem 0.4rem;
        border-bottom: 1px solid fade(@be-gold-border, 40%);

        &:last-child { border-bottom: none; }

        &.item-header {
          background: linear-gradient(135deg, rgba(90,10,20,0.10), rgba(139,105,20,0.10));
          border: 1px solid @be-gold-border;
          border-radius: 2px;
          margin-bottom: 0.25rem;
          font-family: "Cinzel Decorative", "Cinzel", serif;
          font-size: 0.65rem;
          font-weight: 700;
          letter-spacing: 0.04em;
          color: @be-bordeaux;
          text-transform: uppercase;

          &:not(:first-child) { margin-top: 0.5rem; }
        }

        &:hover:not(.item-header) {
          background: rgba(139, 105, 20, 0.08);
        }
      }

      .item-field {
        flex: 1;
        text-align: center;
        font-size: 0.85rem;

        &.item-name { flex: 3; text-align: left; font-weight: 600; }
        &.item-name-label-long { flex: 3; text-align: left; }
        &.item-name-label-short { flex: 1; text-align: center; }
        &.right { text-align: right; }
      }

      a.summary-roll, a.actor-open {
        cursor: pointer;
        color: @be-sepia;
        &:hover { color: @be-bordeaux; text-decoration: underline; }
      }

      .actor-delete {
        color: fade(@be-sepia, 50%);
        font-size: 0.75rem;
        cursor: pointer;
        &:hover { color: @be-bordeaux; }
      }
    }
  }

  .tirage-tarot-dialog {
    display: block;
    padding: 0.6rem 0.75rem;
    color: @be-sepia;

    // ── Sélection joueur / attribution ────────────────────
    .tirage-select-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.4rem 0.6rem;
      margin-bottom: 0.5rem;
      background: linear-gradient(135deg, rgba(90,10,20,0.08), rgba(139,105,20,0.08));
      border: 1px solid @be-gold-border;
      border-radius: 2px;

      .tirage-select-label {
        flex: 1;
        font-size: 0.85rem;
        font-weight: 600;
        color: @be-sepia;
      }

      .tirage-select {
        flex: 0 0 180px;
        width: 180px;
        border: 1px solid @be-gold-border;
        background: rgba(255,252,240,0.85);
        color: @be-sepia;
        font-size: 0.85rem;
        padding: 2px 4px;
        border-radius: 2px;
        &:focus { outline: none; border-color: @be-bordeaux; }
      }
    }

    .tirage-attribute-row {
      background: linear-gradient(135deg, rgba(20,80,20,0.08), rgba(30,100,30,0.05));
      border-color: rgba(30,100,30,0.35);
    }

    // ── Section (main joueur / main secrète) ──────────────
    .tirage-section {
      display: block;
      margin-bottom: 0.5rem;

      .tirage-section-title {
        display: block;
        font-family: @font-rivanna, serif;
        font-size: 1rem;
        color: @be-bordeaux;
        border-bottom: 1px solid @be-gold-border;
        padding-bottom: 0.2rem;
        margin-bottom: 0.4rem;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4);

        i { margin-right: 0.35rem; font-size: 0.85em; opacity: 0.7; }

        .tirage-player-name {
          font-size: 0.85rem;
          font-style: italic;
          color: @be-sepia;
          opacity: 0.8;
        }
      }

      .tirage-secret-title { color: fade(@be-sepia, 70%); }
    }

    // ── Grille de cartes ──────────────────────────────────
    .tirage-cards-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 0.5rem;
    }

    .tirage-card {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;
      width: 100px;
      vertical-align: top;

      &:hover {
        position: relative;
        z-index: 100;

        .tirage-card-img {
          transform: scale(2.2);
          transform-origin: center top;
          box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
        }
      }

      .tirage-card-img {
        width: 100px;
        border: 1px solid @be-gold-border;
        border-radius: 2px;
        box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        transform-origin: center center;
        cursor: zoom-in;
      }

      .tirage-card-name {
        font-family: @font-rivanna, serif;
        font-size: 0.75rem;
        color: @be-bordeaux;
        text-align: center;
        line-height: 1.2;
      }

      .tirage-card-side {
        font-size: 0.7rem;
        font-weight: 600;
        &.tirage-positif { color: #1a5c1a; }
        &.tirage-negatif { color: @be-bordeaux; }
      }

      &.tirage-card-secret {
        opacity: 0.85;
        .tirage-card-name { color: fade(@be-sepia, 70%); }
      }
    }

    // ── Séparateur décoratif ──────────────────────────────
    .tirage-separator {
      display: block;
      height: 18px;
      background: url("../images/ui/separator_01.webp") center/auto 100% no-repeat;
      opacity: 0.5;
      margin: 0.25rem 0;
    }
  }

  // ── Footer avec bouton Fermer ─────────────────────────
  .tirage-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid @be-gold-border;
    background: linear-gradient(to bottom, rgba(139,105,20,0.08), rgba(139,105,20,0.16));

    .tirage-close-btn {
      padding: 0.3rem 1rem;
      font-size: 0.85rem;
      border: 1px solid @be-gold-border;
      border-radius: 2px;
      background: linear-gradient(to bottom, rgba(255,252,240,0.9), rgba(240,230,200,0.9));
      color: @be-sepia;
      cursor: pointer;
      &:hover {
        background: linear-gradient(to bottom, rgba(240,220,170,0.95), rgba(220,195,140,0.95));
        border-color: @be-gold;
        color: @be-bordeaux;
      }
    }
  }
}