// Vagabond RPG - Actor Sheet Styles
// ==================================

// Base actor sheet styles
.vagabond.sheet.actor {
  min-width: 600px;
  min-height: 500px;

  // ==========================================
  // HEADER - Three Column Layout
  // ==========================================
  .sheet-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: $spacing-4;
    padding: $spacing-4;
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);

    // Left column - Portrait
    .header-left {
      display: flex;
      align-items: flex-start;

      .profile-img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: none; // Remove border, container provides it
        border-radius: $radius-md;
        cursor: pointer;
        transition: opacity $transition-fast;

        &:hover {
          opacity: 0.85;
        }
      }
    }

    // Center column - Name and details
    .header-center {
      display: flex;
      flex-direction: column;
      gap: $spacing-2;
      min-width: 200px;

      .actor-name {
        margin: 0;

        input {
          @include input-base;
          width: 100%;
          font-family: $font-family-header;
          font-size: $font-size-xl;
          font-weight: $font-weight-bold;
          padding: $spacing-2;
        }
      }

      .header-fields {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: $spacing-2;

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

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

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

          input {
            @include input-base;
            padding: $spacing-1 $spacing-2;
            font-size: $font-size-sm;

            &[type="number"] {
              width: 100%;
              text-align: center;
            }
          }
        }
      }
    }

    // Right column - Resources
    .header-right {
      display: flex;
      flex-direction: column;
      gap: $spacing-3;
      min-width: 200px;
      max-width: 250px;
    }
  }

  // ==========================================
  // RESOURCE BARS (HP, Mana)
  // ==========================================
  .resource-bars {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
  }

  .resource-bar {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;

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

    .bar-row {
      display: flex;
      align-items: center;
      gap: $spacing-2;
    }

    // The meter container
    .bar-container {
      flex: 1;
      position: relative;
      height: 28px;
      background-color: var(--color-bg-secondary) er;
      border: 1px solid var(--color-border);
      border-radius: $radius-md;
      overflow: hidden;
      box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15);

      // The fill bar
      .bar-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: $radius-md 0 0 $radius-md;
        transition: width $transition-base;
      }

      // Values overlay - backdrop pill for legibility
      .bar-values {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-1;
        padding: $spacing-1 $spacing-2;
        background: var(--color-bar-values-bg);
        border-radius: $radius-full;
        font-weight: $font-weight-semibold;
        color: var(--color-text-primary);

        input {
          width: 32px;
          padding: 2px 4px;
          font-size: $font-size-sm;
          font-weight: $font-weight-bold;
          text-align: center;
          background: var(--color-bar-input-bg);
          border: 1px solid var(--color-border-light);
          border-radius: $radius-sm;
          color: var(--color-text-primary);

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

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

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

    // Resource +/- buttons
    .resource-buttons {
      display: flex;
      gap: $spacing-1;

      button {
        @include button-base;
        @include flex-center;
        width: 24px;
        height: 24px;
        padding: 0;
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        color: var(--color-text-primary);

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

        i {
          font-size: 10px;
          color: inherit;
        }
      }
    }

    // HP-specific colors
    &.hp {
      .bar-fill {
        background: linear-gradient(to bottom, var(--color-danger), #6b0000);
      }

      &.healthy .bar-fill {
        background: linear-gradient(to bottom, var(--color-success), #1f3f1b);
      }

      &.warning .bar-fill {
        background: linear-gradient(to bottom, var(--color-warning), #9a7009);
      }

      &.critical .bar-fill {
        background: linear-gradient(to bottom, var(--color-danger), #580000);
      }
    }

    // Mana-specific colors
    &.mana {
      .bar-fill {
        background: linear-gradient(to bottom, var(--color-info), #1f3838);
      }
    }
  }

  // ==========================================
  // SECONDARY RESOURCES (Luck, Fatigue, etc.)
  // ==========================================
  .secondary-resources {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-2;
  }

  .resource {
    display: flex;
    align-items: center;
    gap: $spacing-1;
    padding: $spacing-1 $spacing-2;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border)-light;
    border-radius: $radius-md;
    font-size: $font-size-sm;

    label {
      font-weight: $font-weight-semibold;
      color: var(--color-text-secondary);
      margin-right: auto;
    }

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

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

    .max {
      color: var(--color-text-secondary);
    }

    .unit {
      font-size: $font-size-xs;
      color: var(--color-text-muted);
    }

    input {
      width: 36px;
      padding: $spacing-1;
      font-size: $font-size-sm;
      font-weight: $font-weight-bold;
      text-align: center;
      background: var(--color-bg-input);
      border: 1px solid var(--color-border)-light;
      border-radius: $radius-sm;

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

    // Danger state for fatigue
    &.danger {
      background-color: rgba(139, 0, 0, 0.1);
      border-color: var(--color-danger);

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

  // ==========================================
  // STATUS BAR - Active Status Conditions
  // ==========================================
  .status-bar {
    padding: $spacing-2 $spacing-4;
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);

    .status-list {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-2;
    }

    .status-chip {
      display: inline-flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-1 $spacing-2;
      background-color: var(--color-badge-status);
      border: 1px solid var(--color-danger);
      border-radius: $radius-full;
      cursor: pointer;
      transition: all $transition-fast;

      &:hover {
        background-color: rgba(139, 0, 0, 0.25);
        border-color: var(--color-danger);

        .status-remove {
          opacity: 1;
        }
      }

      .status-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
        flex-shrink: 0;
      }

      .status-name {
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        color: var(--color-text-primary);
        white-space: nowrap;
      }

      .status-remove {
        @include flex-center;
        width: 18px;
        height: 18px;
        padding: 0;
        margin-left: $spacing-1;
        background-color: transparent;
        border: none;
        border-radius: $radius-full;
        color: var(--color-danger);
        opacity: 0.6;
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: var(--color-danger);
          color: white;
          opacity: 1;
        }

        i {
          font-size: 10px;
        }
      }
    }
  }
}

// ==========================================
// CHARACTER SHEET SPECIFIC
// ==========================================
.vagabond.sheet.actor.character {
  // ----------------------------------------
  // Tab Content Area
  // ----------------------------------------
  .tab-content {
    padding: $spacing-4;
    background-color: var(--color-bg-primary);
    overflow-y: auto;
    @include custom-scrollbar;

    // Enable container queries for responsive layout based on sheet width
    container-type: inline-size;
    container-name: sheet-content;
  }

  // ----------------------------------------
  // Section Headers
  // ----------------------------------------
  .section-header {
    font-family: $font-family-header;
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: var(--color-text-primary);
    margin: 0 0 $spacing-3 0;
    padding-bottom: $spacing-2;
    border-bottom: 2px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .subsection-header {
    font-family: $font-family-header;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    color: var(--color-text-secondary);
    margin: $spacing-3 0 $spacing-2 0;
  }

  // ----------------------------------------
  // Main Tab Layout
  // ----------------------------------------
  .main-tab {
    .main-grid {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: $spacing-4;

      // Responsive: stack vertically on narrow container
      @container sheet-content (max-width: #{$breakpoint-narrow}) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;

        .stats-column {
          order: 1;
        }
        .center-column {
          order: 2;
        }
        .attacks-column {
          order: 3;
        }
      }
    }
  }

  // ----------------------------------------
  // Stats Column (Left)
  // ----------------------------------------
  .stats-column {
    min-width: 120px;

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-2;
    }

    .stat-block {
      @include flex-column;
      align-items: center;
      padding: $spacing-2;
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border)-light;
      border-radius: $radius-md;

      .stat-label {
        font-family: $font-family-header;
        font-size: $font-size-xs;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-secondary);
        margin-bottom: $spacing-1;
      }

      .stat-value {
        width: 48px;
        height: 48px;
        padding: 0;
        font-family: $font-family-header;
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        text-align: center;
        color: var(--color-text-primary);
        background-color: var(--color-bg-primary);
        border: 2px solid var(--color-border);
        border-radius: $radius-md;

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

    // Responsive: horizontal stats on narrow container
    @container sheet-content (max-width: #{$breakpoint-narrow}) {
      min-width: 0;

      .stats-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: $spacing-1;
      }

      .stat-block {
        padding: $spacing-1;

        .stat-value {
          width: 40px;
          height: 40px;
          font-size: $font-size-xl;
        }
      }
    }
  }

  // ----------------------------------------
  // Center Column (Saves & Skills)
  // ----------------------------------------
  .center-column {
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  // Saves Section
  .saves-section {
    .saves-list {
      display: flex;
      flex-direction: column;
      gap: $spacing-2;
    }

    .save-row {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-2 $spacing-3;
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border)-light;
      border-radius: $radius-md;
      cursor: pointer;
      transition: all $transition-fast;

      &:hover {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-accent-primary);

        .roll-icon {
          color: var(--color-accent-primary);
        }
      }

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

      .save-stats {
        font-size: $font-size-sm;
        color: var(--color-text-secondary);
        margin-right: auto;
      }

      .save-difficulty {
        font-family: $font-family-header;
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        color: var(--color-text-primary);
        min-width: 28px;
        text-align: center;
      }

      .roll-icon {
        color: var(--color-text-muted);
        transition: color $transition-fast;
      }
    }
  }

  // Skills Section
  .skills-section {
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-2;
    }

    .skill-row {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-1 $spacing-2;
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border)-light;
      border-radius: $radius-md;
      transition: all $transition-fast;

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

      &.trained {
        background-color: rgba(45, 90, 39, 0.1);
        border-color: rgba(45, 90, 39, 0.3);

        .skill-trained-toggle {
          color: var(--color-success);
          border-color: var(--color-success);
        }
      }

      .skill-trained-toggle {
        @include flex-center;
        width: 20px;
        height: 20px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--color-border);
        border-radius: $radius-sm;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: all $transition-fast;

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

        i {
          font-size: 10px;
        }
      }

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

      .skill-stat {
        font-size: $font-size-xs;
        color: var(--color-text-secondary);
      }

      .skill-difficulty {
        font-family: $font-family-header;
        font-weight: $font-weight-bold;
        color: var(--color-text-primary);
        min-width: 24px;
        text-align: center;
      }

      .skill-crit {
        font-size: $font-size-xs;
        color: var(--color-warning);

        i {
          margin-right: 2px;
        }
      }

      .skill-roll-btn {
        @include flex-center;
        width: 24px;
        height: 24px;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: color $transition-fast;

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

  // ----------------------------------------
  // Attacks Column (Right)
  // ----------------------------------------
  .attacks-column {
    min-width: 180px;

    .attack-skills-grid {
      display: flex;
      flex-direction: column;
      gap: $spacing-2;
    }

    // Responsive: horizontal attacks on narrow container
    @container sheet-content (max-width: #{$breakpoint-narrow}) {
      min-width: 0;

      .attack-skills-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: $spacing-2;
      }
    }

    .attack-skill-row {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-1 $spacing-2;
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border)-light;
      border-radius: $radius-md;
      transition: all $transition-fast;

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

      &.trained {
        background-color: rgba(45, 90, 39, 0.1);
        border-color: rgba(45, 90, 39, 0.3);

        .attack-trained-toggle {
          color: var(--color-success);
          border-color: var(--color-success);
        }
      }

      .attack-trained-toggle {
        @include flex-center;
        width: 20px;
        height: 20px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--color-border);
        border-radius: $radius-sm;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: all $transition-fast;

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

        i {
          font-size: 10px;
        }
      }

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

      .attack-stat {
        font-size: $font-size-xs;
        color: var(--color-text-secondary);
      }

      .attack-difficulty {
        font-family: $font-family-header;
        font-weight: $font-weight-bold;
        color: var(--color-text-primary);
        min-width: 24px;
        text-align: center;
      }

      .attack-crit {
        font-size: $font-size-xs;
        color: var(--color-warning);

        i {
          margin-right: 2px;
        }
      }

      .attack-roll-btn {
        @include flex-center;
        width: 24px;
        height: 24px;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: color $transition-fast;

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

    // Equipped Weapons List
    .weapon-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .weapon-item {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-2;
      border-bottom: 1px solid var(--color-border)-light;

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

      .weapon-name {
        flex: 1;
        font-weight: $font-weight-medium;
        color: var(--color-text-primary);
        cursor: pointer;

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

      .weapon-damage {
        font-family: $font-family-mono;
        font-size: $font-size-sm;
        color: var(--color-danger);
      }

      .weapon-roll {
        @include flex-center;
        width: 28px;
        height: 28px;
        padding: 0;
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: $radius-md;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: all $transition-fast;

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

  // ----------------------------------------
  // Inventory Tab Layout
  // ----------------------------------------
  .inventory-tab {
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  // Inventory Header (Slots & Wealth) - Inline row
  .inventory-header {
    display: flex;
    align-items: center;
    gap: $spacing-4;
    padding-bottom: $spacing-3;
    margin-bottom: $spacing-2;
    border-bottom: 2px solid var(--color-border);
    flex-wrap: nowrap;

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

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

      .stat-value {
        display: flex;
        align-items: baseline;
        gap: 2px;
        font-family: $font-family-header;
        font-size: $font-size-lg;

        .current {
          font-weight: $font-weight-bold;
          color: var(--color-text-primary);
        }

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

        .max {
          color: var(--color-text-secondary);
        }
      }

      input {
        width: 60px;
        padding: $spacing-1 $spacing-2;
        font-family: $font-family-header;
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        text-align: center;
        background-color: var(--color-bg-input);
        border: 1px solid var(--color-border);
        border-radius: $radius-md;

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

      // Item slots takes remaining space to push currencies right
      &.item-slots {
        flex-direction: row;
        align-items: center;
        gap: $spacing-2;
        margin-right: auto;

        label {
          margin-bottom: 0;
        }

        .overburdened-warning {
          color: var(--color-danger);
        }

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

      // Currency-specific label colors
      &.gold label {
        color: #b8860b;
      }

      &.silver label {
        color: #707070;
      }

      &.copper label {
        color: #8b4513;
      }
    }
  }

  // Inventory Sections (Weapons, Armor, Equipment)
  .inventory-section {
    .section-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $spacing-2;

      .section-header {
        margin: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .item-create {
        @include flex-center;
        width: 28px;
        height: 28px;
        padding: 0;
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: $radius-md;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: var(--color-success);
          border-color: var(--color-success);
          color: white;
        }

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

  // Item Lists
  .item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border)-light;
    border-radius: $radius-md;
    overflow: hidden;
  }

  .item-row {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-2 $spacing-3;
    border-bottom: 1px solid var(--color-border)-light;
    transition: background-color $transition-fast;

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

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

    &.empty {
      justify-content: center;
      padding: $spacing-4;
      font-style: italic;
      color: var(--color-text-muted);
    }

    // Item thumbnail
    .item-img {
      width: 32px;
      height: 32px;
      object-fit: cover;
      border: 1px solid var(--color-border);
      border-radius: $radius-sm;
      background-color: var(--color-bg-primary);
      flex-shrink: 0;
    }

    // Item name (clickable to edit)
    .item-name {
      flex: 1;
      font-weight: $font-weight-medium;
      color: var(--color-text-primary);
      cursor: pointer;
      transition: color $transition-fast;

      &:hover {
        color: var(--color-accent-primary);
        text-decoration: underline;
      }
    }

    // Item stats (damage, armor, quantity)
    .item-damage,
    .item-armor-value {
      font-family: $font-family-mono;
      font-size: $font-size-sm;
      font-weight: $font-weight-semibold;
      padding: $spacing-1 $spacing-2;
      background-color: rgba(139, 0, 0, 0.1);
      border-radius: $radius-sm;
      color: var(--color-danger);
    }

    .item-armor-value {
      background-color: rgba(47, 79, 79, 0.1);
      color: var(--color-info);
    }

    .item-quantity {
      font-family: $font-family-mono;
      font-size: $font-size-sm;
      color: var(--color-text-secondary);
      min-width: 32px;
      text-align: center;
    }

    .item-slots {
      font-size: $font-size-xs;
      color: var(--color-text-muted);
      white-space: nowrap;
    }

    // Item control buttons
    .item-equipped,
    .item-delete {
      @include flex-center;
      width: 28px;
      height: 28px;
      padding: 0;
      background-color: transparent;
      border: 1px solid var(--color-border)-light;
      border-radius: $radius-sm;
      color: var(--color-text-muted);
      cursor: pointer;
      transition: all $transition-fast;
      flex-shrink: 0;

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

    .item-equipped {
      &:hover {
        background-color: rgba(45, 90, 39, 0.1);
        border-color: var(--color-success);
        color: var(--color-success);
      }

      &.active {
        background-color: var(--color-success);
        border-color: var(--color-success);
        color: white;
      }
    }

    .item-delete {
      &:hover {
        background-color: rgba(139, 0, 0, 0.1);
        border-color: var(--color-danger);
        color: var(--color-danger);
      }
    }
  }

  // Responsive inventory layout
  @container sheet-content (max-width: 500px) {
    .inventory-header {
      flex-wrap: wrap;

      .header-stat.item-slots {
        flex-basis: 100%;
        margin-bottom: $spacing-2;
      }
    }

    .item-row {
      flex-wrap: wrap;

      .item-name {
        flex-basis: calc(100% - 50px);
        order: 1;
      }

      .item-img {
        order: 0;
      }

      .item-damage,
      .item-armor-value,
      .item-quantity,
      .item-slots {
        order: 2;
      }

      .item-equipped,
      .item-delete {
        order: 3;
      }
    }
  }

  // ----------------------------------------
  // Abilities Tab Layout
  // ----------------------------------------
  .abilities-tab {
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  .abilities-section {
    .section-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $spacing-2;

      .section-header {
        margin: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .item-create {
        @include flex-center;
        width: 28px;
        height: 28px;
        padding: 0;
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: $radius-md;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: var(--color-success);
          border-color: var(--color-success);
          color: white;
        }

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

  // Ancestry Block
  .ancestry-block {
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border)-light;
    border-radius: $radius-md;
    overflow: hidden;

    .ancestry-header {
      display: flex;
      align-items: center;
      gap: $spacing-3;
      padding: $spacing-3;
      background-color: var(--color-bg-secondary);
      border-bottom: 1px solid var(--color-border)-light;

      .ancestry-img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border: 2px solid var(--color-border);
        border-radius: $radius-md;
        background-color: var(--color-bg-primary);
      }

      .ancestry-info {
        display: flex;
        flex-direction: column;
        gap: $spacing-1;

        .ancestry-name {
          font-family: $font-family-header;
          font-size: $font-size-lg;
          font-weight: $font-weight-bold;
          color: var(--color-text-primary);
          cursor: pointer;

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

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

        .ancestry-being-type::after {
          content: " · ";
        }
      }
    }

    .ancestry-traits {
      padding: $spacing-3;

      .trait {
        padding: $spacing-2 0;
        border-bottom: 1px solid var(--color-border)-light;
        font-size: $font-size-sm;
        line-height: $line-height-relaxed;

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

        &:first-child {
          padding-top: 0;
        }

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

  // Ability Lists (Features & Perks)
  .ability-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
  }

  .ability-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: $spacing-2;
    padding: $spacing-3;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border)-light;
    border-radius: $radius-md;
    transition: background-color $transition-fast;

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

    &.empty {
      display: flex;
      justify-content: center;
      padding: $spacing-4;
      font-style: italic;
      color: var(--color-text-muted);
    }

    .ability-img {
      grid-row: span 2;
      width: 40px;
      height: 40px;
      object-fit: cover;
      border: 1px solid var(--color-border);
      border-radius: $radius-md;
      background-color: var(--color-bg-primary);
    }

    .ability-info {
      display: flex;
      flex-direction: column;
      gap: 2px;

      .ability-name {
        font-weight: $font-weight-semibold;
        color: var(--color-text-primary);
        cursor: pointer;

        &:hover {
          color: var(--color-accent-primary);
          text-decoration: underline;
        }
      }

      .ability-source,
      .ability-prereqs {
        font-size: $font-size-xs;
        color: var(--color-text-secondary);
      }

      .ability-prereqs {
        font-style: italic;
      }
    }

    .ability-description {
      grid-column: 2 / -1;
      font-size: $font-size-sm;
      color: var(--color-text-secondary);
      line-height: $line-height-normal;

      // Style inline HTML from descriptions
      p {
        margin: 0 0 $spacing-2 0;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .item-delete {
      grid-row: 1;
      grid-column: 3;
      @include flex-center;
      width: 28px;
      height: 28px;
      padding: 0;
      background-color: transparent;
      border: 1px solid var(--color-border)-light;
      border-radius: $radius-sm;
      color: var(--color-text-muted);
      cursor: pointer;
      transition: all $transition-fast;

      &:hover {
        background-color: rgba(139, 0, 0, 0.1);
        border-color: var(--color-danger);
        color: var(--color-danger);
      }

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

  // Active Effects
  .effects-group {
    margin-bottom: $spacing-3;

    &:last-child {
      margin-bottom: 0;
    }
  }

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

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

    .effect-icon {
      width: 24px;
      height: 24px;
      object-fit: cover;
      border-radius: $radius-sm;
    }

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

    .effect-duration {
      font-size: $font-size-xs;
      padding: $spacing-1 $spacing-2;
      background-color: rgba(184, 134, 11, 0.15);
      border-radius: $radius-sm;
      color: var(--color-warning);
    }

    .effect-source {
      font-size: $font-size-xs;
      color: var(--color-text-muted);
    }
  }

  // Responsive abilities layout
  @container sheet-content (max-width: 500px) {
    .ability-item {
      grid-template-columns: auto 1fr;

      .ability-description {
        grid-column: 1 / -1;
      }

      .item-delete {
        position: absolute;
        top: $spacing-2;
        right: $spacing-2;
      }
    }

    .ancestry-block .ancestry-header {
      flex-direction: column;
      text-align: center;

      .ancestry-info {
        align-items: center;
      }
    }
  }

  // ----------------------------------------
  // Magic Tab Layout
  // ----------------------------------------
  .magic-tab {
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  // Magic Header (Mana & Focus)
  .magic-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: $spacing-4;
    padding-bottom: $spacing-3;
    margin-bottom: $spacing-2;
    border-bottom: 2px solid var(--color-border);
  }

  // Mana Display - matches inventory item-slots format
  .mana-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: $spacing-2;
    margin-right: auto;

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

    .mana-values {
      display: flex;
      align-items: baseline;
      gap: 2px;
      font-family: $font-family-header;
      font-size: $font-size-lg;

      input {
        width: 40px;
        padding: 2px 4px;
        font-family: $font-family-header;
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        text-align: center;
        color: var(--color-text-primary);
        background-color: var(--color-bg-input);
        border: 1px solid var(--color-border);
        border-radius: $radius-sm;

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

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

      .max {
        color: var(--color-text-secondary);
      }
    }

    .casting-max {
      display: flex;
      align-items: center;
      gap: $spacing-2;
      margin-left: $spacing-3;
      padding-left: $spacing-3;
      border-left: 1px solid var(--color-border)-light;
      font-size: $font-size-sm;

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

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

  // Focus Display
  .focus-display {
    flex: 1;
    min-width: 200px;
    padding: $spacing-3;
    background-color: rgba(184, 134, 11, 0.1);
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: $radius-md;

    h3 {
      margin: 0 0 $spacing-2 0;
      font-family: $font-family-header;
      font-size: $font-size-base;
      font-weight: $font-weight-bold;
      color: var(--color-warning);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .focus-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: $spacing-1;
    }

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

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

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

      .focus-cost {
        font-size: $font-size-xs;
        padding: $spacing-1 $spacing-2;
        background-color: rgba(47, 79, 79, 0.1);
        border-radius: $radius-sm;
        color: var(--color-info);
        margin-left: auto;
      }
    }
  }

  // Spells Section
  .spells-section {
    .section-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $spacing-2;

      .section-header {
        margin: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .item-create {
        @include flex-center;
        width: 28px;
        height: 28px;
        padding: 0;
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: $radius-md;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: var(--color-success);
          border-color: var(--color-success);
          color: white;
        }

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

  // Spell List
  .spell-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
  }

  .spell-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: $spacing-3;
    align-items: center;
    padding: $spacing-3;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border)-light;
    border-radius: $radius-md;
    transition: all $transition-fast;

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

    &.empty {
      display: flex;
      justify-content: center;
      padding: $spacing-4;
      font-style: italic;
      color: var(--color-text-muted);
    }

    .spell-img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border: 1px solid var(--color-border);
      border-radius: $radius-md;
      background-color: var(--color-bg-primary);
    }

    .spell-info {
      display: flex;
      flex-direction: column;
      gap: 2px;

      .spell-name {
        font-weight: $font-weight-semibold;
        color: var(--color-text-primary);
        cursor: pointer;

        &:hover {
          color: var(--color-accent-primary);
          text-decoration: underline;
        }
      }

      .spell-type {
        font-size: $font-size-xs;
        color: var(--color-text-secondary);
        text-transform: capitalize;
      }
    }

    .spell-details {
      display: flex;
      align-items: center;
      gap: $spacing-2;

      .spell-damage {
        display: flex;
        align-items: center;
        gap: $spacing-1;
        padding: $spacing-1 $spacing-2;
        background-color: rgba(139, 0, 0, 0.1);
        border-radius: $radius-sm;
        font-family: $font-family-mono;
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        color: var(--color-danger);

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

      .spell-effect {
        display: flex;
        align-items: center;
        gap: $spacing-1;
        padding: $spacing-1 $spacing-2;
        background-color: rgba(47, 79, 79, 0.1);
        border-radius: $radius-sm;
        font-size: $font-size-sm;
        color: var(--color-info);
        cursor: help;

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

    .spell-actions {
      display: flex;
      align-items: center;
      gap: $spacing-2;

      .spell-cast {
        display: flex;
        align-items: center;
        gap: $spacing-1;
        padding: $spacing-2 $spacing-3;
        background-color: var(--color-info);
        border: none;
        border-radius: $radius-md;
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        color: white;
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: #1f3838;
        }

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

      .item-delete {
        @include flex-center;
        width: 28px;
        height: 28px;
        padding: 0;
        background-color: transparent;
        border: 1px solid var(--color-border)-light;
        border-radius: $radius-sm;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: rgba(139, 0, 0, 0.1);
          border-color: var(--color-danger);
          color: var(--color-danger);
        }

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

  // Casting Reference
  .casting-reference {
    padding: $spacing-3;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border)-light;
    border-radius: $radius-md;

    > h3 {
      margin: 0 0 $spacing-3 0;
      font-family: $font-family-header;
      font-size: $font-size-base;
      font-weight: $font-weight-bold;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding-bottom: $spacing-2;
      border-bottom: 1px solid var(--color-border)-light;
    }

    .reference-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-4;
    }

    .reference-section {
      h4 {
        margin: 0 0 $spacing-2 0;
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        color: var(--color-text-primary);
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: $spacing-1;

        li {
          font-size: $font-size-sm;
          color: var(--color-text-secondary);
          line-height: $line-height-normal;

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

  // Responsive magic layout
  @container sheet-content (max-width: 500px) {
    .magic-header {
      flex-direction: column;
    }

    .spell-item {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;

      .spell-img {
        grid-row: span 2;
      }

      .spell-details {
        grid-column: 2;
        justify-content: flex-start;
      }

      .spell-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
      }
    }

    .casting-reference .reference-grid {
      grid-template-columns: 1fr;
    }
  }

  // ----------------------------------------
  // Biography Tab Layout
  // ----------------------------------------
  .biography-tab {
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  .biography-section {
    // Hide languages section - not yet implemented
    &.languages {
      display: none;
    }
  }

  // Character Details (Size, Being Type)
  .details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-3;

    .detail-field {
      display: flex;
      flex-direction: column;
      gap: $spacing-1;

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

      select {
        @include input-base;
        padding: $spacing-2;
        font-size: $font-size-base;
        cursor: pointer;

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

  // Senses Section
  .senses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-3;

    .sense-field {
      label {
        display: flex;
        align-items: center;
        gap: $spacing-2;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: var(--color-text-primary);
        cursor: pointer;
        padding: $spacing-2;
        background-color: var(--color-bg-input);
        border: 1px solid var(--color-border)-light;
        border-radius: $radius-sm;
        transition: all $transition-fast;

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

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

          &:checked + span,
          &:checked ~ span {
            color: var(--color-accent-primary);
            font-weight: $font-weight-semibold;
          }
        }
      }

      // Style when checkbox is checked
      &:has(input:checked) label {
        background-color: rgba(45, 90, 39, 0.1);
        border-color: rgba(45, 90, 39, 0.3);
      }
    }
  }

  // Movement Section (same pattern as Senses)
  .movement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-3;

    .movement-field {
      label {
        display: flex;
        align-items: center;
        gap: $spacing-2;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: var(--color-text-primary);
        cursor: pointer;
        padding: $spacing-2;
        background-color: var(--color-bg-input);
        border: 1px solid var(--color-border)-light;
        border-radius: $radius-sm;
        transition: all $transition-fast;

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

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

          &:checked + span,
          &:checked ~ span {
            color: var(--color-accent-primary);
            font-weight: $font-weight-semibold;
          }
        }
      }

      // Style when checkbox is checked
      &:has(input:checked) label {
        background-color: rgba(45, 90, 39, 0.1);
        border-color: rgba(45, 90, 39, 0.3);
      }
    }
  }

  // Biography & Notes Text Areas
  .biography-text,
  .notes {
    .editor-container {
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border);
      border-radius: $radius-md;
      overflow: hidden;
    }

    textarea {
      width: 100%;
      min-height: 150px;
      padding: $spacing-3;
      font-family: $font-family-body;
      font-size: $font-size-sm;
      line-height: $line-height-relaxed;
      color: var(--color-text-primary);
      background-color: transparent;
      border: none;
      resize: vertical;

      &:focus {
        outline: none;
      }

      &::placeholder {
        color: var(--color-text-muted);
        font-style: italic;
      }
    }
  }

  // Biography gets more height
  .biography-text textarea {
    min-height: 200px;
  }

  // Responsive biography layout
  @container sheet-content (max-width: 500px) {
    .details-grid {
      grid-template-columns: 1fr;
    }

    .senses-grid,
    .movement-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

// ==========================================
// NPC/MONSTER SHEET SPECIFIC
// ==========================================
.vagabond.sheet.actor.npc {
  min-width: 450px;
  min-height: 500px;

  // ----------------------------------------
  // NPC Header
  // ----------------------------------------
  .npc-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: $spacing-3;
    padding: $spacing-3;
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);

    .header-portrait {
      .profile-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border: 2px solid var(--color-border);
        border-radius: $radius-md;
        cursor: pointer;
        transition: border-color $transition-fast;

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

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

      .actor-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);
          background: transparent;
          border: none;
          border-bottom: 1px solid transparent;
          padding: $spacing-1 0;

          &:hover,
          &:focus {
            border-bottom-color: var(--color-border);
            outline: none;
          }
        }
      }

      .header-stats {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-2;

        .stat-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2px;
          padding: $spacing-2;
          background-color: var(--color-bg-input);
          border: 1px solid var(--color-border);
          border-radius: $radius-sm;
          min-width: 50px;

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

          input {
            width: 40px;
            font-family: $font-family-header;
            font-size: $font-size-lg;
            font-weight: $font-weight-bold;
            text-align: center;
            color: var(--color-text-primary);
            background: transparent;
            border: none;

            &:focus {
              outline: none;
              background-color: white;
              border-radius: $radius-sm;
            }
          }

          &.morale {
            flex-direction: row;
            gap: $spacing-2;
            padding: $spacing-1 $spacing-2;

            label {
              margin-right: auto;
            }

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

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

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

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

    .header-hp {
      display: flex;
      flex-direction: column;
      gap: $spacing-2;
      min-width: 120px;

      .hp-bar {
        display: flex;
        flex-direction: column;
        gap: $spacing-1;

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

        .bar-container {
          position: relative;
          height: 32px;
          background-color: var(--color-bg-input);
          border: 2px solid var(--color-border);
          border-radius: $radius-md;
          overflow: hidden;

          .bar-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: linear-gradient(to bottom, var(--color-success), #1f3f1b);
            transition: width 0.3s ease;
          }

          .bar-values {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            z-index: 1;

            input {
              width: 36px;
              font-family: $font-family-header;
              font-size: $font-size-base;
              font-weight: $font-weight-bold;
              text-align: center;
              color: var(--color-text-primary);
              background: transparent;
              border: none;

              &:focus {
                outline: none;
                background-color: rgba(white, 0.8);
                border-radius: $radius-sm;
              }
            }

            .separator {
              color: var(--color-text-secondary);
              margin: 0 2px;
            }
          }
        }

        // HP state colors
        &.half .bar-fill {
          background: linear-gradient(to bottom, var(--color-warning), #9a7009);
        }

        &.dead .bar-fill {
          background: linear-gradient(to bottom, var(--color-danger), #6b0000);
        }
      }

      .morale-broken {
        display: flex;
        align-items: center;
        gap: $spacing-1;
        padding: $spacing-1 $spacing-2;
        background-color: rgba(139, 0, 0, 0.1);
        border: 1px solid rgba(139, 0, 0, 0.3);
        border-radius: $radius-sm;
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        color: var(--color-danger);

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

  // ----------------------------------------
  // NPC Body / Content
  // ----------------------------------------
  .sheet-body {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;
    padding: $spacing-3;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  // ----------------------------------------
  // NPC Stats Section
  // ----------------------------------------
  .npc-stats {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;
    padding: $spacing-3;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: $radius-md;

    .stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: $spacing-3;
    }

    .stat-group {
      display: flex;
      flex-direction: column;
      gap: $spacing-1;

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

        // Rollable labels (e.g., Appearing)
        &.rollable {
          display: inline-flex;
          align-items: center;
          gap: $spacing-1;
          cursor: pointer;
          transition: color $transition-fast;

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

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

          i {
            font-size: $font-size-xs;
            color: var(--color-text-muted);
            transition: color $transition-fast;
          }
        }
      }

      select,
      input[type="text"],
      input[type="number"] {
        @include input-base;
        padding: $spacing-1 $spacing-2;
        font-size: $font-size-sm;
      }

      .zone-hint {
        margin: 0;
        font-size: $font-size-xs;
        font-style: italic;
        color: var(--color-text-muted);
        line-height: $line-height-tight;
      }
    }

    .stat-group.speed {
      .speed-value {
        display: flex;
        align-items: center;
        gap: $spacing-1;

        input {
          width: 50px;
          padding: $spacing-1 $spacing-2;
          font-size: $font-size-base;
          font-weight: $font-weight-semibold;
          text-align: center;
          background-color: var(--color-bg-primary);
          border: 1px solid var(--color-border)-light;
          border-radius: $radius-sm;

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

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

    // Movement Section (uses same styling as biography movement-grid)
    .biography-section.movement {
      padding: $spacing-2 0;
      border-top: 1px solid var(--color-border)-light;

      .section-header {
        font-family: $font-family-header;
        font-size: $font-size-sm;
        font-weight: $font-weight-bold;
        color: var(--color-text-secondary);
        margin: 0 0 $spacing-2 0;
        padding: 0;
        border: none;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .movement-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: $spacing-2;
      }

      .movement-field label {
        display: flex;
        align-items: center;
        gap: $spacing-2;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: var(--color-text-primary);
        cursor: pointer;
        padding: $spacing-2;
        background-color: var(--color-bg-input);
        border: 1px solid var(--color-border)-light;
        border-radius: $radius-sm;
        transition: all $transition-fast;

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

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

      .movement-field:has(input:checked) label {
        background-color: rgba(45, 90, 39, 0.1);
        border-color: rgba(45, 90, 39, 0.3);
      }
    }

    .stat-group.type {
      .type-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: $spacing-2;

        &:last-child {
          margin-bottom: 0;
        }

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

    // Senses Row
    .senses-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: $spacing-2;
      padding-top: $spacing-2;
      border-top: 1px solid var(--color-border)-light;

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

      .sense-tag {
        padding: $spacing-1 $spacing-2;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        color: var(--color-info);
        background-color: rgba(47, 79, 79, 0.1);
        border: 1px solid rgba(47, 79, 79, 0.3);
        border-radius: $radius-sm;
      }
    }

    // Damage Modifiers
    .damage-modifiers {
      display: flex;
      flex-direction: column;
      gap: $spacing-2;
      padding-top: $spacing-2;
      border-top: 1px solid var(--color-border)-light;

      .modifier-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: $spacing-2;

        > label {
          font-size: $font-size-sm;
          font-weight: $font-weight-semibold;
          color: var(--color-text-secondary);
          min-width: 80px;
        }

        .modifier-tags {
          display: flex;
          flex-wrap: wrap;
          gap: $spacing-1;
        }

        .modifier-tag {
          padding: $spacing-1 $spacing-2;
          font-size: $font-size-xs;
          font-weight: $font-weight-medium;
          border-radius: $radius-sm;
          text-transform: capitalize;

          &.immune {
            color: #1a2929;
            background-color: rgba(47, 79, 79, 0.15);
            border: 1px solid rgba(47, 79, 79, 0.3);
          }

          &.resist {
            color: #163015;
            background-color: rgba(45, 90, 39, 0.15);
            border: 1px solid rgba(45, 90, 39, 0.3);
          }

          &.weak {
            color: #6b0000;
            background-color: rgba(139, 0, 0, 0.15);
            border: 1px solid rgba(139, 0, 0, 0.3);
          }
        }
      }
    }
  }

  // ----------------------------------------
  // NPC Actions Section
  // ----------------------------------------
  .npc-actions {
    .section-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $spacing-2;

      .section-header {
        margin: 0;
        font-family: $font-family-header;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
        color: var(--color-text-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .action-add {
        @include flex-center;
        width: 28px;
        height: 28px;
        padding: 0;
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: $radius-md;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: var(--color-success);
          border-color: var(--color-success);
          color: white;
        }

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

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

    .action-item {
      padding: $spacing-3;
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border);
      border-radius: $radius-md;

      &.empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-2;
        padding: $spacing-4;

        p {
          margin: 0;
          font-style: italic;
          color: var(--color-text-muted);
        }

        button {
          display: flex;
          align-items: center;
          gap: $spacing-1;
          padding: $spacing-2 $spacing-3;
          background-color: var(--color-bg-primary);
          border: 1px solid var(--color-border);
          border-radius: $radius-md;
          font-size: $font-size-sm;
          color: var(--color-text-primary);
          cursor: pointer;
          transition: all $transition-fast;

          &:hover {
            background-color: var(--color-success);
            border-color: var(--color-success);
            color: white;
          }
        }
      }

      .action-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: $spacing-2;
        margin-bottom: $spacing-2;

        .action-name {
          flex: 1;
          font-family: $font-family-header;
          font-size: $font-size-base;
          font-weight: $font-weight-semibold;
          color: var(--color-text-primary);
          background: transparent;
          border: none;
          border-bottom: 1px solid transparent;
          padding: $spacing-1 0;

          &:hover,
          &:focus {
            border-bottom-color: var(--color-border);
            outline: none;
          }
        }

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

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

            &.action-roll:hover {
              background-color: var(--color-accent-primary);
              border-color: var(--color-accent-primary);
              color: white;
            }

            &.action-delete:hover {
              background-color: rgba(139, 0, 0, 0.1);
              border-color: var(--color-danger);
              color: var(--color-danger);
            }

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

      .action-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: $spacing-2;
        margin-bottom: $spacing-2;

        .action-field {
          display: flex;
          flex-direction: column;
          gap: 2px;

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

          input,
          select {
            @include input-base;
            padding: $spacing-1 $spacing-2;
            font-size: $font-size-sm;
          }
        }
      }

      .action-description {
        textarea {
          width: 100%;
          min-height: 60px;
          padding: $spacing-2;
          font-size: $font-size-sm;
          line-height: $line-height-relaxed;
          color: var(--color-text-primary);
          background-color: var(--color-bg-primary);
          border: 1px solid var(--color-border)-light;
          border-radius: $radius-sm;
          resize: vertical;

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

          &::placeholder {
            color: var(--color-text-muted);
            font-style: italic;
          }
        }
      }
    }
  }

  // ----------------------------------------
  // NPC Abilities Section
  // ----------------------------------------
  .npc-abilities {
    .section-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $spacing-2;

      .section-header {
        margin: 0;
        font-family: $font-family-header;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
        color: var(--color-text-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .ability-add {
        @include flex-center;
        width: 28px;
        height: 28px;
        padding: 0;
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: $radius-md;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: all $transition-fast;

        &:hover {
          background-color: var(--color-success);
          border-color: var(--color-success);
          color: white;
        }

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

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

    .ability-item {
      padding: $spacing-3;
      background-color: var(--color-bg-input);
      border: 1px solid var(--color-border);
      border-radius: $radius-md;

      &.empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-2;
        padding: $spacing-4;

        p {
          margin: 0;
          font-style: italic;
          color: var(--color-text-muted);
        }

        button {
          display: flex;
          align-items: center;
          gap: $spacing-1;
          padding: $spacing-2 $spacing-3;
          background-color: var(--color-bg-primary);
          border: 1px solid var(--color-border);
          border-radius: $radius-md;
          font-size: $font-size-sm;
          color: var(--color-text-primary);
          cursor: pointer;
          transition: all $transition-fast;

          &:hover {
            background-color: var(--color-success);
            border-color: var(--color-success);
            color: white;
          }
        }
      }

      .ability-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: $spacing-2;
        margin-bottom: $spacing-2;

        .ability-name {
          flex: 1;
          font-family: $font-family-header;
          font-size: $font-size-base;
          font-weight: $font-weight-semibold;
          color: var(--color-text-primary);
          background: transparent;
          border: none;
          border-bottom: 1px solid transparent;
          padding: $spacing-1 0;

          &:hover,
          &:focus {
            border-bottom-color: var(--color-border);
            outline: none;
          }
        }

        .ability-controls {
          display: flex;
          align-items: center;
          gap: $spacing-2;

          .ability-passive {
            display: flex;
            align-items: center;
            gap: $spacing-1;
            font-size: $font-size-xs;
            color: var(--color-text-secondary);
            cursor: pointer;

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

          .ability-delete {
            @include flex-center;
            width: 24px;
            height: 24px;
            padding: 0;
            background-color: transparent;
            border: 1px solid var(--color-border)-light;
            border-radius: $radius-sm;
            color: var(--color-text-muted);
            cursor: pointer;
            transition: all $transition-fast;

            &:hover {
              background-color: rgba(139, 0, 0, 0.1);
              border-color: var(--color-danger);
              color: var(--color-danger);
            }

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

      .ability-description {
        textarea {
          width: 100%;
          min-height: 60px;
          padding: $spacing-2;
          font-size: $font-size-sm;
          line-height: $line-height-relaxed;
          color: var(--color-text-primary);
          background-color: var(--color-bg-primary);
          border: 1px solid var(--color-border)-light;
          border-radius: $radius-sm;
          resize: vertical;

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

          &::placeholder {
            color: var(--color-text-muted);
            font-style: italic;
          }
        }
      }
    }
  }

  // ----------------------------------------
  // NPC Notes Section
  // ----------------------------------------
  .npc-notes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-3;

    .notes-section {
      display: flex;
      flex-direction: column;
      gap: $spacing-2;

      .section-header {
        margin: 0;
        font-family: $font-family-header;
        font-size: $font-size-sm;
        font-weight: $font-weight-bold;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .editor-container {
        flex: 1;

        textarea {
          width: 100%;
          min-height: 100px;
          height: 100%;
          padding: $spacing-2;
          font-size: $font-size-sm;
          line-height: $line-height-relaxed;
          color: var(--color-text-primary);
          background-color: var(--color-bg-input);
          border: 1px solid var(--color-border);
          border-radius: $radius-md;
          resize: vertical;

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

          &::placeholder {
            color: var(--color-text-muted);
            font-style: italic;
          }
        }
      }
    }
  }

  // ----------------------------------------
  // Responsive NPC Layout
  // ----------------------------------------
  @media (max-width: 550px) {
    .npc-header {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;

      .header-portrait {
        grid-row: span 2;
      }

      .header-hp {
        grid-column: 2;
      }
    }

    .npc-notes {
      grid-template-columns: 1fr;
    }

    .npc-actions .action-item .action-details {
      grid-template-columns: 1fr 1fr;
    }
  }
}