// Vagabond RPG - Roll Dialog Styles
// ==================================
// All roll dialogs use CSS custom properties for theme support.

// ApplicationV2 Roll Dialog Base
.vagabond.roll-dialog {
  // Use themed class for proper theme support
  &.themed {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  // Enable scrolling on window content for tall dialogs
  .window-content {
    overflow-y: auto;
    max-height: 80vh;
    @include custom-scrollbar;
  }

  .roll-dialog-content {
    @include flex-column;
    gap: $spacing-3;
    padding: $spacing-4;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  // Automatic favor/hinder from Active Effects
  .auto-favor-hinder {
    @include flex-center;
    gap: $spacing-2;
    padding: $spacing-2 $spacing-3;
    border-radius: $radius-md;
    font-size: $font-size-sm;

    i {
      font-size: $font-size-base;
    }

    &.favor {
      background-color: rgba(74, 159, 66, 0.15);
      color: var(--color-success);
      border: 1px solid var(--color-success);
    }

    &.hinder {
      background-color: rgba(201, 68, 68, 0.15);
      color: var(--color-danger);
      border: 1px solid var(--color-danger);
    }
  }

  // Common selection dropdowns
  .skill-selection,
  .weapon-selection,
  .save-selection,
  .spell-selection {
    @include flex-column;
    gap: $spacing-2;

    label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }

    select {
      @include input-base;
      width: 100%;
      cursor: pointer;
    }

    .no-weapons-message,
    .no-spells-warning {
      @include flex-center;
      gap: $spacing-2;
      padding: $spacing-3;
      text-align: center;
      color: var(--color-text-muted);
      font-style: italic;
      background-color: var(--color-bg-secondary);
      border-radius: $radius-md;

      i {
        color: var(--color-warning);
      }
    }
  }

  // Info panels (skill-info, attack-info, save-info, spell-info)
  .skill-info,
  .attack-info,
  .save-info,
  .spell-info,
  .casting-skill {
    @include panel;
    @include grid(2, $spacing-2);
    padding: $spacing-3;

    > div {
      @include flex-between;
    }

    .label {
      font-size: $font-size-sm;
      color: var(--color-text-muted);
    }

    .value {
      font-weight: $font-weight-medium;
      color: var(--color-text-primary);

      &.trained {
        color: var(--color-success);
      }

      &.untrained {
        color: var(--color-text-muted);
      }

      &.difficulty {
        font-family: $font-family-header;
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        color: var(--color-accent-primary);
      }

      &.crit {
        color: var(--color-warning);
      }
    }

    .stat-name {
      font-weight: $font-weight-medium;
    }
  }

  // Crit Threshold Stepper Control
  .crit-threshold-section {
    @include flex-center;
    flex-wrap: wrap;
    gap: $spacing-2;
    padding: $spacing-2 $spacing-3;
    background-color: var(--color-bg-secondary);
    border-radius: $radius-md;

    > .label {
      font-size: $font-size-sm;
      color: var(--color-text-muted);
    }

    .crit-stepper {
      @include flex-center;
      gap: $spacing-1;

      .stepper-btn {
        @include flex-center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: $radius-sm;
        background-color: var(--color-bg-primary);
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: all $transition-fast;

        i {
          font-size: $font-size-xs;
        }

        &:hover:not(:disabled) {
          background-color: var(--color-bg-tertiary);
          border-color: var(--color-accent-primary);
          color: var(--color-accent-primary);
        }

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

        &.decrement:hover:not(:disabled) {
          border-color: var(--color-success);
          color: var(--color-success);
        }

        &.increment:hover:not(:disabled) {
          border-color: var(--color-danger);
          color: var(--color-danger);
        }
      }

      .crit-value {
        min-width: 2.5rem;
        text-align: center;
        font-family: $font-family-mono;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
        color: var(--color-text-primary);

        &.modified {
          color: var(--color-warning);
        }
      }
    }

    .crit-modifier-indicator {
      width: 100%;
      text-align: center;
      font-size: $font-size-xs;
      color: var(--color-text-muted);
      font-style: italic;
    }
  }

  // Single-column info (for spell dialog)
  .spell-info {
    @include flex-column;
    gap: $spacing-2;

    > div {
      @include flex-between;
    }
  }

  // Damage preview panel
  .damage-preview {
    @include panel;
    padding: $spacing-3;
    background-color: rgba(201, 68, 68, 0.08);
    border-color: rgba(201, 68, 68, 0.3);

    .damage-formula {
      @include flex-center;
      gap: $spacing-2;

      .label {
        font-size: $font-size-sm;
        color: var(--color-text-muted);
      }

      .value {
        font-family: $font-family-mono;
        font-weight: $font-weight-bold;
        font-size: $font-size-lg;
        color: var(--color-danger);
      }

      .damage-type {
        font-size: $font-size-sm;
        color: var(--color-text-secondary);
      }
    }

    .weapon-properties {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-1;
      margin-top: $spacing-2;
      justify-content: center;

      .property-tag {
        font-size: $font-size-xs;
        padding: $spacing-1 $spacing-2;
        background-color: var(--color-bg-secondary);
        border-radius: $radius-full;
        color: var(--color-text-secondary);
        text-transform: uppercase;
      }
    }
  }

  // Versatile weapon toggle
  .versatile-toggle {
    @include flex-center;
    padding: $spacing-2;

    .checkbox-label {
      @include flex-center;
      gap: $spacing-2;
      cursor: pointer;

      input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        accent-color: var(--color-accent-primary);
      }

      span {
        color: var(--color-text-primary);
      }
    }
  }

  // Favor/Hinder toggle section
  .favor-hinder-section {
    @include flex-column;
    gap: $spacing-2;

    > label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }

    .favor-hinder-toggles {
      display: flex;
      gap: $spacing-2;

      button {
        @include button-secondary;
        flex: 1;
        gap: $spacing-2;

        &.favor-btn {
          &.active,
          &:hover {
            background-color: rgba(74, 159, 66, 0.15);
            border-color: var(--color-success);
            color: var(--color-success);
          }
        }

        &.hinder-btn {
          &.active,
          &:hover {
            background-color: rgba(201, 68, 68, 0.15);
            border-color: var(--color-danger);
            color: var(--color-danger);
          }
        }
      }
    }

    .net-favor-hinder {
      @include flex-center;
      gap: $spacing-2;
      padding: $spacing-2 $spacing-3;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      border-radius: $radius-md;

      i {
        font-size: $font-size-base;
      }

      &.favor {
        background-color: rgba(74, 159, 66, 0.15);
        color: var(--color-success);
      }

      &.hinder {
        background-color: rgba(201, 68, 68, 0.15);
        color: var(--color-danger);
      }
    }
  }

  // Situational modifier section
  .modifier-section {
    @include flex-column;
    gap: $spacing-2;

    > label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }

    .modifier-presets {
      display: flex;
      gap: $spacing-2;

      .modifier-preset {
        @include button-secondary;
        flex: 1;
        padding: $spacing-1 $spacing-2;
        font-family: $font-family-mono;
        font-size: $font-size-sm;

        &:hover {
          background-color: var(--color-bg-secondary);
        }
      }
    }

    .modifier-input {
      input {
        @include input-base;
        width: 100%;
        text-align: center;
        font-family: $font-family-mono;
      }
    }
  }

  // Roll button
  .dialog-buttons {
    margin-top: $spacing-2;

    .roll-btn {
      @include button-primary;
      width: 100%;
      padding: $spacing-3;
      font-size: $font-size-lg;
      gap: $spacing-2;

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

      .insufficient-mana-label {
        font-size: $font-size-sm;
        opacity: 0.8;
      }
    }
  }
}

// ===========================================
// Save Roll Dialog Specific Styles
// ===========================================
.vagabond.roll-dialog {
  // Defense options (Block/Dodge for Reflex saves)
  .defense-options {
    @include flex-column;
    gap: $spacing-2;
    margin-top: $spacing-2;

    > label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }

    .defense-buttons {
      display: flex;
      gap: $spacing-2;

      .defense-btn {
        @include button-secondary;
        flex: 1;
        gap: $spacing-2;
        padding: $spacing-3;

        i {
          font-size: $font-size-lg;
        }

        &.dodge-btn {
          &.active,
          &:hover:not(:disabled) {
            background-color: rgba(74, 159, 66, 0.15);
            border-color: var(--color-success);
            color: var(--color-success);
          }
        }

        &.block-btn {
          &.active,
          &:hover:not(:disabled) {
            background-color: rgba(64, 144, 224, 0.15);
            border-color: var(--color-info);
            color: var(--color-info);
          }
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;

          &:hover {
            background-color: transparent;
            border-color: var(--color-border);
            color: var(--color-text-muted);
          }
        }
      }
    }

    .defense-info {
      @include flex-center;
      gap: $spacing-2;
      padding: $spacing-2 $spacing-3;
      font-size: $font-size-sm;
      color: var(--color-text-secondary);
      background-color: var(--color-bg-secondary);
      border-radius: $radius-md;

      i {
        color: var(--color-info);
      }
    }
  }
}

// ===========================================
// Spell Cast Dialog Specific Styles
// ===========================================
.vagabond.roll-dialog {
  // Mana display
  .mana-display {
    @include panel;
    @include flex-between;
    padding: $spacing-3;
    background: linear-gradient(135deg, rgba(112, 80, 176, 0.1), rgba(112, 80, 176, 0.05));
    border-color: rgba(112, 80, 176, 0.3);

    .mana-current,
    .mana-cost {
      @include flex-center;
      gap: $spacing-2;

      .label {
        font-size: $font-size-sm;
        color: var(--color-text-muted);
      }

      .value {
        font-family: $font-family-header;
        font-size: $font-size-xl;
        font-weight: $font-weight-bold;
        color: var(--color-reason);

        &.insufficient {
          color: var(--color-danger);
        }
      }
    }
  }

  // Spell effect section
  .spell-effect {
    @include panel;
    padding: $spacing-3;
    background-color: var(--color-bg-secondary);

    .effect-header {
      margin-bottom: $spacing-2;

      .include-effect-toggle {
        @include flex-center;
        justify-content: flex-start;
        gap: $spacing-2;
        cursor: pointer;

        input[type="checkbox"] {
          width: 1.25rem;
          height: 1.25rem;
          accent-color: var(--color-accent-primary);
        }

        span {
          font-weight: $font-weight-semibold;
          color: var(--color-text-primary);
        }
      }
    }

    .effect-text {
      font-size: $font-size-sm;
      color: var(--color-text-secondary);
      padding: $spacing-2;
      background-color: var(--color-bg-primary);
      border-radius: $radius-sm;
      border-left: 3px solid var(--color-accent-primary);
    }
  }

  // Damage configuration (dice slider)
  .damage-config {
    @include flex-column;
    gap: $spacing-2;

    > label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }

    .damage-dice-input {
      @include flex-center;
      gap: $spacing-3;

      input[type="range"] {
        flex: 1;
        height: 8px;
        border-radius: $radius-full;
        background: var(--color-bg-tertiary);
        outline: none;
        cursor: pointer;

        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--color-danger);
          cursor: pointer;
          border: 2px solid var(--color-bg-primary);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        &::-moz-range-thumb {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--color-danger);
          cursor: pointer;
          border: 2px solid var(--color-bg-primary);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
      }

      .dice-count {
        font-family: $font-family-mono;
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        color: var(--color-danger);
        min-width: 4rem;
        text-align: center;
      }
    }

    .damage-preview {
      @include flex-center;
      gap: $spacing-2;
      padding: $spacing-2;
      background-color: rgba(201, 68, 68, 0.08);
      border-radius: $radius-md;

      .label {
        font-size: $font-size-sm;
        color: var(--color-text-muted);
      }

      .value {
        font-family: $font-family-mono;
        font-weight: $font-weight-bold;
        color: var(--color-danger);
      }

      .damage-type {
        font-size: $font-size-sm;
        color: var(--color-text-secondary);
      }
    }
  }

  // Delivery and Duration selection
  .delivery-selection,
  .duration-selection {
    @include flex-column;
    gap: $spacing-2;

    > label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }

    select {
      @include input-base;
      width: 100%;
      cursor: pointer;
    }
  }

  // Focus warning
  .focus-warning {
    @include panel;
    @include flex-column;
    gap: $spacing-2;
    padding: $spacing-3;
    background-color: rgba(212, 163, 44, 0.1);
    border-color: var(--color-warning);

    > i {
      color: var(--color-warning);
    }

    > span {
      font-size: $font-size-sm;
      color: var(--color-text-secondary);
    }

    .current-focus {
      font-size: $font-size-sm;
      color: var(--color-text-muted);
      font-style: italic;
    }

    .focus-limit-warning {
      @include flex-center;
      gap: $spacing-2;
      padding: $spacing-2;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      color: var(--color-danger);
      background-color: rgba(201, 68, 68, 0.1);
      border-radius: $radius-md;

      i {
        color: var(--color-danger);
      }
    }
  }
}

// ===========================================
// Legacy dialog styles (for backward compatibility)
// ===========================================
.vagabond.dialog.roll-dialog {
  .dialog-content {
    padding: $spacing-4;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  // Roll info section
  .roll-info {
    @include panel;
    padding: $spacing-3;
    margin-bottom: $spacing-4;

    .difficulty-display {
      @include flex-center;
      gap: $spacing-4;

      .difficulty-value {
        font-family: $font-family-header;
        font-size: $font-size-3xl;
        font-weight: $font-weight-bold;
        color: var(--color-accent-primary);
      }

      .crit-threshold {
        font-size: $font-size-sm;
        color: var(--color-text-muted);

        .crit-value {
          color: var(--color-warning);
          font-weight: $font-weight-bold;
        }
      }
    }
  }

  // Favor/Hinder toggles
  .modifiers {
    @include flex-center;
    gap: $spacing-4;
    margin-bottom: $spacing-4;

    .modifier-toggle {
      @include flex-center;
      gap: $spacing-2;

      label {
        font-weight: $font-weight-medium;
        color: var(--color-text-primary);
      }

      &.favor .toggle-active {
        color: var(--color-success);
      }

      &.hinder .toggle-active {
        color: var(--color-danger);
      }
    }
  }

  // Situational modifier
  .situational-modifier {
    @include flex-center;
    gap: $spacing-2;
    margin-bottom: $spacing-4;

    input {
      width: 60px;
      text-align: center;
    }
  }

  // Roll button
  .roll-button {
    @include button-primary;
    width: 100%;
    padding: $spacing-3;
    font-size: $font-size-lg;

    i {
      margin-right: $spacing-2;
    }
  }
}

// Legacy spell cast dialog
.vagabond.dialog.spell-cast-dialog {
  .mana-cost {
    @include panel;
    @include flex-between;
    padding: $spacing-3;
    margin-bottom: $spacing-4;

    .cost-label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }

    .cost-value {
      font-family: $font-family-header;
      font-size: $font-size-xl;
      font-weight: $font-weight-bold;
      color: var(--color-reason);
    }

    &.insufficient {
      border-color: var(--color-danger);

      .cost-value {
        color: var(--color-danger);
      }
    }
  }

  .delivery-selection,
  .duration-selection,
  .damage-selection {
    margin-bottom: $spacing-4;

    .selection-label {
      font-weight: $font-weight-semibold;
      margin-bottom: $spacing-2;
      color: var(--color-text-primary);
    }

    .selection-grid {
      @include grid(2, $spacing-2);
    }

    .selection-option {
      @include panel;
      padding: $spacing-2;
      cursor: pointer;
      transition: all $transition-fast;

      &:hover {
        border-color: var(--color-accent-primary);
      }

      &.selected {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-accent-primary);
      }

      .option-name {
        font-weight: $font-weight-medium;
        color: var(--color-text-primary);
      }

      .option-cost {
        font-size: $font-size-sm;
        color: var(--color-text-muted);
      }
    }
  }
}

// ===========================================
// Favor/Hinder Debug Panel
// ===========================================
.vagabond.favor-hinder-debug {
  &.themed {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  // Enable scrolling on the window content
  .window-content {
    overflow-y: auto !important;
    max-height: 80vh;
    @include custom-scrollbar;
  }

  .favor-hinder-debug-content {
    @include flex-column;
    gap: $spacing-4;
    padding: $spacing-4;
    background-color: var(--color-bg-primary);
  }

  .actor-selection {
    @include flex-column;
    gap: $spacing-2;

    label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-primary);
    }
  }

  .debug-panels {
    @include flex-column;
    gap: $spacing-4;
  }

  .debug-panel {
    @include panel;
    padding: $spacing-3;
    background-color: var(--color-bg-secondary);

    h3 {
      @include flex-center;
      justify-content: flex-start;
      gap: $spacing-2;
      margin: 0 0 $spacing-3 0;
      padding-bottom: $spacing-2;
      border-bottom: 1px solid var(--color-border);
      font-size: $font-size-base;
      color: var(--color-text-primary);

      i {
        color: var(--color-accent-primary);
      }
    }
  }

  .flag-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-bg-secondary);

    th,
    td {
      padding: $spacing-2;
      text-align: left;
      border-bottom: 1px solid var(--color-border-light);
      color: var(--color-text-primary);
    }

    th {
      font-size: $font-size-sm;
      font-weight: $font-weight-semibold;
      color: var(--color-text-secondary);
      background-color: var(--color-bg-tertiary);

      &.center {
        text-align: center;
      }
    }

    td {
      background-color: var(--color-bg-secondary);

      &.center {
        text-align: center;
      }

      &.skill-name {
        @include flex-between;
      }
    }

    tbody tr:nth-child(even) td {
      background-color: var(--color-bg-primary);
    }

    .stat-tag {
      font-size: $font-size-xs;
      padding: $spacing-1 $spacing-2;
      background-color: var(--color-bg-tertiary);
      border-radius: $radius-full;
      color: var(--color-text-secondary);
      text-transform: uppercase;
    }

    input[type="checkbox"] {
      width: 1.25rem;
      height: 1.25rem;
      cursor: pointer;
      accent-color: var(--color-accent-primary);
    }

    tbody tr:hover td {
      background-color: var(--color-bg-tertiary);
    }
  }

  .debug-actions {
    display: flex;
    gap: $spacing-3;
    padding-top: $spacing-3;
    border-top: 1px solid var(--color-border);

    button {
      @include button-base;
      flex: 1;
      gap: $spacing-2;
    }

    .test-roll-btn {
      @include button-primary;
    }

    .clear-btn {
      @include button-secondary;
      color: var(--color-danger);
      border-color: var(--color-danger);

      &:hover:not(:disabled) {
        background-color: rgba(201, 68, 68, 0.1);
      }
    }
  }

  .no-actor-message {
    @include flex-column;
    align-items: center;
    gap: $spacing-3;
    padding: $spacing-6;
    text-align: center;
    color: var(--color-text-muted);

    i {
      font-size: $font-size-4xl;
      opacity: 0.5;
    }

    p {
      margin: 0;
    }

    .hint {
      font-size: $font-size-sm;
      font-style: italic;
    }
  }
}