// Vagabond RPG - Item Sheet Styles
// =================================

.vagabond.sheet.item {
  min-width: 500px;
  min-height: 400px;
  display: flex;
  flex-direction: column;

  // Utility class for hiding inactive tabs
  .hidden {
    display: none !important;
  }

  // Header styling
  .sheet-header.item-header {
    @include flex-between;
    padding: $spacing-4;
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    gap: $spacing-4;

    .item-img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border: 2px solid var(--color-border);
      border-radius: $radius-md;
      cursor: pointer;
      transition: all $transition-fast;
      box-shadow: 0 1px 3px var(--shadow-light);

      &:hover {
        border-color: var(--color-accent-primary);
        box-shadow: 0 2px 6px var(--shadow-medium);
        transform: scale(1.02);
      }
    }

    .header-fields {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: $spacing-2;

      .item-name {
        margin: 0;

        input {
          width: 100%;
          font-family: $font-family-header;
          font-size: $font-size-xl;
          font-weight: $font-weight-bold;
          color: var(--color-text-primary);
          border: none;
          background: transparent;
          border-bottom: 1px solid transparent;
          padding: $spacing-1 0;
          transition: border-color $transition-fast;

          &:hover {
            border-bottom-color: var(--color-border-light);
          }

          &:focus {
            border-bottom-color: var(--color-accent-primary);
            outline: none;
          }
        }
      }

      .item-type {
        .type-badge {
          display: inline-block;
          padding: $spacing-1 $spacing-3;
          font-size: $font-size-sm;
          font-weight: 500;
          text-transform: capitalize;
          background-color: var(--color-bg-primary);
          border: 1px solid var(--color-border);
          border-radius: $radius-full;

          &.weapon {
            background-color: var(--color-badge-weapon);
          }
          &.armor {
            background-color: var(--color-badge-armor);
          }
          &.spell {
            background-color: var(--color-badge-spell);
          }
          &.perk {
            background-color: var(--color-badge-perk);
          }
          &.class {
            background-color: var(--color-badge-class);
          }
          &.feature {
            background-color: var(--color-badge-feature);
          }
          &.ancestry {
            background-color: var(--color-badge-ancestry);
          }
          &.equipment {
            background-color: var(--color-badge-equipment);
          }
        }
      }
    }
  }

  // Tab content areas (both .sheet-body and .tab-content)
  .sheet-body,
  .tab-content {
    padding: $spacing-4;
    overflow-y: auto;
    background-color: var(--color-bg-primary);
    @include custom-scrollbar;

    // When used as standalone body (no tabs)
    &.sheet-body {
      flex: 1;
      min-height: 0; // Important for flexbox scrolling
    }
  }

  // Details tab specific
  .details-tab {
    &.sheet-body {
      // Combined class - body that's also the details tab
    }
  }

  // Effects tab has its own padding defined in .effects-tab
  .effects-tab.tab-content {
    padding: 0; // Remove duplicate padding, .effects-tab handles it
  }

  // Item content container
  .item-content {
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  // Stats row
  .item-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-4;
    align-items: flex-end;

    .stat-group {
      display: flex;
      flex-direction: column;
      gap: $spacing-1;
      min-width: 80px;

      &.full-width {
        flex: 1 1 100%;
      }

      &.wide {
        min-width: 140px;

        select {
          min-width: 130px;
        }
      }

      label {
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      input[type="text"],
      input[type="number"],
      select,
      textarea {
        padding: $spacing-2;
        border: 1px solid var(--color-border);
        border-radius: $radius-sm;
        background-color: var(--color-bg-input);
        font-family: $font-family-body;
        font-size: $font-size-sm;
        color: var(--color-text-primary);
        transition:
          border-color $transition-fast,
          box-shadow $transition-fast;

        &:hover:not(:disabled) {
          border-color: var(--color-border-dark);
        }

        &:focus {
          border-color: var(--color-accent-primary);
          box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15);
          outline: none;
        }

        &:disabled {
          background-color: var(--color-bg-primary);
          color: var(--color-text-muted);
          cursor: not-allowed;
        }
      }

      input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
        accent-color: var(--color-accent-primary);

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

      input[type="number"] {
        width: 70px;
      }

      .range-input {
        display: flex;
        align-items: center;
        gap: $spacing-2;

        input {
          width: 60px;
        }
      }

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

      textarea {
        min-height: 60px;
        resize: vertical;
      }
    }
  }

  // Fieldset styling
  fieldset {
    border: 1px solid var(--color-border);
    border-radius: $radius-md;
    padding: $spacing-3;
    margin: 0;
    background-color: var(--color-bg-highlight);

    legend {
      padding: 0 $spacing-2;
      font-weight: 600;
      font-size: $font-size-sm;
      display: flex;
      align-items: center;
      gap: $spacing-2;

      button {
        @include button-icon;
        padding: $spacing-1;
        font-size: $font-size-xs;
      }
    }

    &.collapsed {
      padding: $spacing-2;
      background-color: transparent;
    }
  }

  // Properties grid (checkboxes)
  .properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: $spacing-2;

    .property-checkbox {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      cursor: pointer;
      font-size: $font-size-sm;

      input[type="checkbox"] {
        width: 16px;
        height: 16px;
      }
    }
  }

  // Relic section
  .relic-section {
    .relic-toggle {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      cursor: pointer;
    }

    .relic-fields {
      display: flex;
      flex-direction: column;
      gap: $spacing-3;
      margin-top: $spacing-3;
    }
  }

  // Description editor
  .item-description {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;

    > label {
      font-weight: 600;
    }

    .editor-wrapper {
      border: 1px solid var(--color-border);
      border-radius: $radius-sm;
      background-color: var(--color-bg-input);
      min-height: 120px;

      // Static content display (non-editable)
      > .editor-content {
        min-height: 100px;
        padding: $spacing-2;
      }

      // ProseMirror custom element styling
      prose-mirror {
        display: block;
        min-height: 100px;

        // The menu bar that appears when editing
        > menu.editor-menu {
          position: sticky;
          top: 0;
          z-index: 1;
          background-color: var(--color-bg-secondary);
          border-bottom: 1px solid var(--color-border);
        }

        // Foundry's inner editor-container
        > .editor-container {
          min-height: 80px;

          // The actual editable content area
          > .editor-content {
            padding: $spacing-2;
            min-height: 60px;
          }
        }

        // Toggle button - keep visible for editing
        > button.toggle {
          // Don't hide - let Foundry handle it
        }
      }
    }
  }

  // Traits list (ancestry)
  .traits-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;

    .trait-entry {
      padding: $spacing-3;
      border: 1px solid var(--color-border);
      border-radius: $radius-sm;
      background-color: var(--color-bg-input);

      .trait-header {
        display: flex;
        gap: $spacing-2;
        margin-bottom: $spacing-2;

        input {
          flex: 1;
          font-weight: 500;
        }

        button {
          @include button-icon;
          color: var(--color-danger);
        }
      }

      .trait-description textarea {
        width: 100%;
        min-height: 60px;
      }
    }

    .no-traits {
      color: var(--color-text-secondary);
      font-style: italic;
      text-align: center;
      padding: $spacing-4;
    }
  }

  // Prerequisite sections (perk)
  .prerequisites-section {
    .prereq-stats {
      margin-bottom: $spacing-3;
    }

    .stat-prereq-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: $spacing-2;
      margin-top: $spacing-2;

      .stat-prereq {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-1;

        label {
          font-size: $font-size-xs;
          font-weight: 600;
          color: var(--color-text-secondary);
        }

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

    .prereq-label {
      font-weight: 500;
      font-size: $font-size-sm;
    }

    .prereq-training,
    .prereq-spells,
    .prereq-perks,
    .prereq-custom {
      margin-top: $spacing-3;

      label {
        display: block;
        margin-bottom: $spacing-1;
        font-size: $font-size-sm;
        font-weight: 500;
      }

      input {
        width: 100%;
      }

      .hint {
        font-size: $font-size-xs;
        color: var(--color-text-secondary);
        font-style: italic;
      }
    }
  }

  // Progression table (class)
  .progression-section {
    .progression-table {
      margin-top: $spacing-3;

      .progression-header {
        display: grid;
        grid-template-columns: 50px 60px 80px 80px 1fr 40px;
        gap: $spacing-2;
        padding: $spacing-2;
        background-color: var(--color-bg-secondary);
        font-size: $font-size-xs;
        font-weight: 600;
        border-radius: $radius-sm $radius-sm 0 0;
      }

      .progression-row {
        display: grid;
        grid-template-columns: 50px 60px 80px 80px 1fr 40px;
        gap: $spacing-2;
        padding: $spacing-2;
        border-bottom: 1px solid var(--color-border);
        background-color: var(--color-bg-input);

        &:last-child {
          border-radius: 0 0 $radius-sm $radius-sm;
        }

        input {
          width: 100%;
          padding: $spacing-1;
          font-size: $font-size-sm;
        }

        button {
          @include button-icon;
          color: var(--color-danger);
        }
      }

      .no-progression {
        padding: $spacing-4;
        text-align: center;
        color: var(--color-text-secondary);
        font-style: italic;
      }
    }
  }

  // Features list (class)
  .features-section {
    .features-list {
      display: flex;
      flex-direction: column;
      gap: $spacing-3;
      margin-top: $spacing-3;

      .feature-entry {
        padding: $spacing-3;
        border: 1px solid var(--color-border);
        border-radius: $radius-sm;
        background-color: var(--color-bg-input);

        .feature-header {
          display: flex;
          gap: $spacing-2;
          align-items: center;
          margin-bottom: $spacing-2;

          input[type="text"] {
            flex: 1;
            font-weight: 500;
          }

          input[type="number"] {
            width: 50px;
          }

          .passive-toggle {
            display: flex;
            align-items: center;
            gap: $spacing-1;
            font-size: $font-size-sm;
            cursor: pointer;
          }

          button {
            @include button-icon;
            color: var(--color-danger);
          }
        }

        .feature-description textarea {
          width: 100%;
          min-height: 60px;
        }
      }

      .no-features {
        padding: $spacing-4;
        text-align: center;
        color: var(--color-text-secondary);
        font-style: italic;
      }
    }
  }

  // Spell effect and crit effect
  .spell-effect,
  .spell-crit-effect {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;

    > label {
      font-weight: 600;
    }

    .editor-wrapper {
      border: 1px solid var(--color-border);
      border-radius: $radius-sm;
      background-color: var(--color-bg-input);
      min-height: 80px;

      // Static content display (non-editable)
      > .editor-content {
        min-height: 60px;
        padding: $spacing-2;
      }

      // ProseMirror custom element styling
      prose-mirror {
        display: block;
        min-height: 60px;

        // The menu bar that appears when editing
        > menu.editor-menu {
          position: sticky;
          top: 0;
          z-index: 1;
          background-color: var(--color-bg-secondary);
          border-bottom: 1px solid var(--color-border);
        }

        // Foundry's inner editor-container
        > .editor-container {
          min-height: 40px;

          // The actual editable content area
          > .editor-content {
            padding: $spacing-2;
            min-height: 30px;
          }
        }

        // Toggle button - keep visible for editing
        > button.toggle {
          // Don't hide - let Foundry handle it
        }
      }
    }
  }

  // Uses section
  .uses-section,
  .consumable-uses {
    .item-stats-row {
      margin-top: $spacing-2;
    }
  }

  // Activation section
  .activation-section {
    .item-stats-row {
      margin-top: $spacing-2;
    }
  }

  // Requirements section (feature)
  .requirements-section {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;

    > label {
      font-size: $font-size-xs;
      font-weight: $font-weight-semibold;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    input {
      padding: $spacing-2;
      border: 1px solid var(--color-border);
      border-radius: $radius-sm;
      background-color: var(--color-bg-input);
      font-family: $font-family-body;
      font-size: $font-size-sm;
      color: var(--color-text-primary);
      transition:
        border-color $transition-fast,
        box-shadow $transition-fast;

      &:hover:not(:disabled) {
        border-color: var(--color-border-dark);
      }

      &:focus {
        border-color: var(--color-accent-primary);
        box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15);
        outline: none;
      }

      &:disabled {
        background-color: var(--color-bg-primary);
        color: var(--color-text-muted);
        cursor: not-allowed;
      }
    }
  }

  // Ritual components (perk)
  .ritual-components {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;

    > label {
      font-size: $font-size-xs;
      font-weight: $font-weight-semibold;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    input {
      padding: $spacing-2;
      border: 1px solid var(--color-border);
      border-radius: $radius-sm;
      background-color: var(--color-bg-input);
      font-family: $font-family-body;
      font-size: $font-size-sm;
      color: var(--color-text-primary);
      transition:
        border-color $transition-fast,
        box-shadow $transition-fast;

      &:hover:not(:disabled) {
        border-color: var(--color-border-dark);
      }

      &:focus {
        border-color: var(--color-accent-primary);
        box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15);
        outline: none;
      }

      &:disabled {
        background-color: var(--color-bg-primary);
        color: var(--color-text-muted);
        cursor: not-allowed;
      }
    }
  }

  // Effects tab
  .effects-tab {
    padding: $spacing-4;

    .effects-list {
      display: flex;
      flex-direction: column;
      gap: $spacing-3;
    }

    .effects-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin: 0;
        font-size: $font-size-lg;
        font-weight: 600;
      }

      .add-effect {
        @include button-primary;
        padding: $spacing-1 $spacing-3;
        font-size: $font-size-sm;

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

    .effect-items {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: $spacing-2;
    }

    .effect-item {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-2;
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border);
      border-radius: $radius-sm;

      &.disabled {
        opacity: 0.6;

        .effect-name {
          text-decoration: line-through;
        }

        // Ensure controls remain clickable when effect is disabled
        .effect-controls {
          opacity: 1;
          pointer-events: auto;

          button {
            pointer-events: auto;
          }
        }
      }

      .effect-icon {
        width: 24px;
        height: 24px;
        border-radius: $radius-sm;
        border: 1px solid var(--color-border);
      }

      .effect-name {
        flex: 1;
        font-weight: 500;
      }

      .effect-controls {
        display: flex;
        gap: $spacing-1;

        .effect-control {
          @include button-icon;

          &.delete {
            color: var(--color-danger);

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

    .no-effects {
      color: var(--color-text-secondary);
      font-style: italic;
      text-align: center;
      padding: $spacing-4;
    }

    .effects-hint {
      font-size: $font-size-sm;
      color: var(--color-text-secondary);
      margin-top: $spacing-2;

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

// Type-specific additional styles
.vagabond.sheet.item.weapon {
  .weapon-content {
    .item-properties {
      margin-top: $spacing-2;
    }
  }
}

.vagabond.sheet.item.class {
  min-width: 600px;
  min-height: 600px;

  .class-content {
    .progression-header {
      // Adjust columns without delete button column for non-editable
      &.readonly {
        grid-template-columns: 50px 60px 80px 80px 1fr;
      }
    }
  }
}