// ============================================================
// Roll & Confrontation dialogs — Steampunk theme
// Targets .ecryme-roll-dialog, .ecryme-confront-start-dialog,
//         .ecryme-confrontation-dialog (AppV2 root classes)
// ============================================================

// Common container mixin
.steam-dialog-window() {
  // Title bar — brass plate
  .window-header {
    .brass-gradient();
    border-bottom: 2px solid @steam-brass-dark;
    color: @steam-dark;
    text-shadow: 0 1px 1px rgba(255, 220, 80, 0.4);

    .window-title {
      font-family:    @font-primary;
      font-size:      1rem;
      font-weight:    bold;
      color:          @steam-dark;
      letter-spacing: 0.04em;
    }

    // Close button — rivet look
    .header-button,
    button[data-action="close"] {
      color:      @steam-dark;
      background: none;
      border:     none;
      font-size:  1rem;
      opacity:    0.7;
      &:hover { opacity: 1; color: @steam-rust; }
    }
  }

  // Content area — aged parchment
  .window-content {
    background: @steam-parchment;
    color:      @steam-rust;
  }
}

// ============================================================
// Apply to all three dialog app containers
// ============================================================
.ecryme-roll-dialog,
.ecryme-confront-start-dialog,
.ecryme-confrontation-dialog {
  .steam-dialog-window();

  // Outer window frame
  border: 2px solid @steam-brass-dark;
  box-shadow:
    inset  4px  4px 0 1px @steam-rivet,
    inset -4px  4px 0 1px @steam-rivet,
    inset  4px -4px 0 1px @steam-rivet,
    inset -4px -4px 0 1px @steam-rivet,
    0 4px 14px rgba(0, 0, 0, 0.6);

  // ---- Actor header row ----
  .roll-dialog-header {
    background: linear-gradient(
      90deg,
      @steam-parchment-dk 0%,
      @steam-parchment    60%
    );
    border-bottom: 1px solid @steam-brass-dark;
    border-radius: 0;
    padding: 6px 8px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;

    .actor-icon {
      border:        2px solid @steam-brass-dark;
      border-radius: 2px;
      box-shadow:    0 0 4px rgba(0, 0, 0, 0.35);
      background:    @steam-parchment-dk;
      width:  44px;
      height: 44px;
      padding: 1px;
      flex-shrink: 0;
    }

    .roll-dialog-actor-title {
      font-family:    @font-primary;
      font-size:      1rem;
      font-weight:    bold;
      color:          @steam-dark;
      letter-spacing: 0.03em;
    }
  }

  // ---- Form labels ----
  .roll-dialog-label {
    color:      @steam-rust;
    font-size:  0.88rem;
    font-weight: 600;
  }

  // ---- Row separator ----
  .flexrow {
    border-bottom: 1px solid rgba(@steam-brass-dark, 0.15);
    padding: 3px 0;
    &:last-child { border-bottom: none; }
  }

  // ---- Selects & inputs ----
  select,
  input[type="text"],
  input[type="number"] {
    background:    @steam-cream;
    color:         @steam-dark;
    border:        1px solid @steam-brass-dark;
    border-radius: 2px;
    padding:       2px 5px;
    font-size:     0.85rem;
    box-shadow:    inset 0 1px 3px rgba(0, 0, 0, 0.12);

    &:focus {
      outline:      none;
      border-color: @steam-brass;
      box-shadow:   inset 0 1px 3px rgba(0, 0, 0, 0.12),
                    0 0 4px rgba(@steam-brass, 0.5);
    }
  }

  select[multiple] {
    min-height: 60px;
  }

  // ---- Headings inside content ----
  h3, h4 {
    font-family: @font-primary;
    color:       @steam-brass-dark;
    font-size:   0.9rem;
    margin:      6px 0 3px;
    border-bottom: 1px solid rgba(@steam-brass-dark, 0.3);
    padding-bottom: 2px;
  }

  // ---- Footer ----
  .sheet-footer {
    border-top:  2px solid @steam-brass-dark;
    background:  @steam-parchment-dk;
    padding:     6px 4px;
    margin-top:  6px;

    button {
      background: linear-gradient(180deg,
        mix(@steam-brass, @steam-dark, 50%) 0%,
        mix(@steam-brass-dark, @steam-dark, 65%) 100%
      );
      border:        1px solid @steam-brass-dark;
      border-radius: 2px;
      color:         @steam-parchment;
      font-family:   @font-primary;
      font-size:     0.85rem;
      letter-spacing: 0.04em;
      padding:       5px 10px;
      cursor:        pointer;
      text-shadow:   0 1px 2px rgba(0, 0, 0, 0.7);
      box-shadow:
        inset 0 1px 0 rgba(255, 215, 80, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.35);
      transition:    background 0.15s;

      &:hover {
        background: linear-gradient(180deg,
          mix(@steam-brass-light, @steam-dark, 60%) 0%,
          mix(@steam-brass, @steam-dark, 50%) 100%
        );
        color: @steam-cream;
      }
      &:active { position: relative; top: 1px; }

      &[disabled] {
        opacity:    0.5;
        cursor:     default;
        box-shadow: none;
        &:hover { background: none; }
      }
    }
  }
}

// ============================================================
// Confrontation dialog — dice / bonus pool areas
// ============================================================
.ecryme-confrontation-dialog {

  // Area containers (execution, preservation, pool)
  .confront-area {
    background:    @steam-parchment-dk;
    border:        1px solid @steam-brass-dark;
    border-radius: 3px;
    min-height:    60px;
    padding:       4px;
    flex-wrap:     wrap;
    gap:           4px;
    margin-bottom: 4px;
  }

  // Execution area — slight warm tint
  .confront-execution-area {
    border-left: 3px solid @steam-brass;
  }

  // Preservation area — slight cool tint
  .confront-preservation-area {
    border-left: 3px solid @steam-copper;
  }

  // Pool list area
  .pool-list {
    border-left: 3px solid @steam-metal-mid;
    min-height:  50px;
  }

  // Individual dice container
  .confront-dice-container {
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         2px;
    cursor:      grab;
    padding:     3px;
    border-radius: 2px;
    transition:  background 0.1s;

    &:hover {
      background: rgba(@steam-brass, 0.18);
    }

    // Dice image
    .confront-dice {
      border:        1px solid @steam-brass-dark;
      border-radius: 2px;
      box-shadow:    0 0 4px rgba(0, 0, 0, 0.3);
      background:    @steam-parchment-dk;
      width:  38px;
      height: 38px;
    }

    // Dice value label
    .confront-dice-centered,
    .confront-bonus-centered {
      font-family: @font-primary;
      font-size:   0.85rem;
      font-weight: bold;
      color:       @steam-brass-dark;
      text-align:  center;
      margin:      0;
    }
  }

  // Bonus spec — acid tint
  .bonus-spec .confront-dice {
    border-color:     @steam-acid;
    background-color: mix(@steam-parchment, @steam-acid, 88%);
    box-shadow:       0 0 4px rgba(@steam-acid, 0.3);
  }
}