/* ============================================ */
/*  WASTELAND ROLL DIALOG STYLES               */
/* ============================================ */

.wasteland-roll-dialog {
  background: url("../assets/ui/pc_sheet_bg.webp") repeat;

  .window-content {
    background: transparent;
  }

  .dialog-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: linear-gradient(to bottom, #4a0404 0%, #3a0303 100%);
    border-bottom: 2px solid #6a0606;
    margin: -0.5rem -0.5rem 0.5rem -0.5rem;

    .actor-icon {
      width: 48px;
      height: 48px;
      border: 2px solid #6a0606;
      border-radius: 4px;
      object-fit: cover;
    }

    .dialog-title {
      flex: 1;
      color: #f5f5f5;

      h3 {
        margin: 0 0 0.15rem 0;
        font-size: 1rem;
        font-family: "Charlemagne", serif;
        font-weight: bold;
        text-transform: uppercase;
      }

      .competence-name {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.9);
        font-style: italic;

        .attribut-info {
          color: rgba(255, 255, 255, 0.7);
          font-size: 0.8rem;
        }
      }
    }
  }

  .dialog-content {
    padding: 0 0.5rem 0.5rem 0.5rem;

    .form-group {
      margin-bottom: 0.4rem;

      label {
        display: block;
        margin-bottom: 0.2rem;
        font-weight: bold;
        font-size: 0.85rem;
        color: #2a1510;
        font-family: "Charlemagne", serif;
      }

      select,
      input[type="number"] {
        width: 100%;
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid #6a0606;
        border-radius: 3px;
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
        color: #1a1510;

        &:hover {
          background: rgba(255, 255, 255, 0.6);
        }

        &:focus {
          outline: none;
          background: rgba(255, 255, 255, 0.7);
          border-color: #aa0a0a;
          box-shadow: 0 0 4px rgba(170, 10, 10, 0.3);
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
    }

    .modifiers-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem;
      margin-bottom: 0.4rem;
    }

    .attributes-section {
      background: rgba(106, 6, 6, 0.1);
      border: 1px solid #6a0606;
      border-radius: 4px;
      padding: 0.5rem;
      margin-bottom: 0.5rem;

      label {
        color: #6a0606;
      }
    }

    .special-option {
      margin-top: 0.5rem;
      padding: 0.5rem;
      background: rgba(106, 6, 6, 0.05);
      border: 2px solid #6a0606;
      border-radius: 4px;

      .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0;
        cursor: pointer;

        &.highlight {
          span {
            font-weight: bold;
            color: #6a0606;
            font-family: "Charlemagne", serif;
            font-size: 0.85rem;
          }
        }

        input[type="checkbox"] {
          width: 18px;
          height: 18px;
          cursor: pointer;
          accent-color: #6a0606;
        }

        span {
          flex: 1;
          font-size: 0.85rem;
          color: #2a1510;
        }
      }
    }

    /* Weapon Section */
    .weapon-section {
      background: rgba(139, 101, 8, 0.1);
      padding: 0.5rem;
      border-radius: 4px;
      border: 1px solid rgba(139, 101, 8, 0.4);
      margin-bottom: 0.5rem;

      .weapon-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.5rem;
        background: rgba(139, 101, 8, 0.15);
        border-radius: 3px;
        margin-bottom: 0.5rem;

        .weapon-label {
          font-weight: bold;
          font-size: 0.9rem;
          color: #2a1510;
          font-family: "Charlemagne", serif;
        }

        .weapon-bonus {
          font-size: 0.85rem;
          color: #8b0000;
          font-weight: bold;
        }
      }

      .defense-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.5rem;
        background: rgba(0, 100, 0, 0.1);
        border-radius: 3px;
        margin-bottom: 0.5rem;

        .defense-label {
          font-size: 0.85rem;
          color: #2a1510;
          font-weight: bold;
        }

        .defense-value {
          font-size: 1rem;
          color: #006400;
          font-weight: bold;
        }
      }
    }

    /* Combat Modifiers */
    .combat-modifiers,
    .ranged-combat-section {
      background: rgba(139, 69, 19, 0.1);
      padding: 0.5rem;
      border-radius: 4px;
      border: 1px solid rgba(139, 69, 19, 0.4);
      margin-bottom: 0.5rem;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #2a1510;
        font-size: 0.9rem;
        font-weight: bold;
        font-family: "Charlemagne", serif;
        text-transform: uppercase;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
      }

      .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.4rem;
        cursor: pointer;
        border-radius: 3px;
        margin-bottom: 0.3rem;
        transition: background 0.2s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        input[type="checkbox"] {
          width: auto;
          margin: 0;
          cursor: pointer;
          accent-color: #8b4513;
        }

        span {
          color: #2a1510;
          font-size: 0.85rem;
          user-select: none;
        }
      }

      .info-message {
        padding: 0.4rem 0.6rem;
        background: rgba(201, 168, 106, 0.2);
        border-left: 3px solid rgba(201, 168, 106, 0.8);
        border-radius: 3px;
        font-size: 0.85rem;
        color: #2a1510;
        margin-bottom: 0.5rem;
        font-style: italic;
      }
    }

    .modifiers-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.3rem 0.6rem;
    }
  }

  // Styles pour les boutons du dialog
  .dialog-buttons {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem;
    border-top: 1px solid #6a0606;
    margin: 0.5rem -0.5rem -0.5rem -0.5rem;
    background: rgba(255, 255, 255, 0.1);

    button {
      flex: 1;
      padding: 0.5rem 0.75rem;
      background: linear-gradient(to bottom, #4a0404 0%, #3a0303 100%);
      border: 1px solid #6a0606;
      border-radius: 3px;
      color: #f5f5f5;
      font-size: 0.85rem;
      font-weight: bold;
      font-family: "Charlemagne", serif;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: linear-gradient(to bottom, #5a0505 0%, #4a0404 100%);
        box-shadow: 0 0 6px rgba(106, 6, 6, 0.6);
      }

      &.default {
        border-width: 2px;
        border-color: #aa0a0a;
      }

      i {
        margin-right: 0.4rem;
      }
    }
  }
}