// ============================================================
// Actor sheets — Steampunk theme
// Scoped to .fvtt-ecryme.sheet.actor and .fvtt-ecryme.sheet.annency
// Applies visual theming without touching layout or tab structure.
// ============================================================

.fvtt-ecryme.sheet.actor,
.fvtt-ecryme.sheet.annency {

  // ----------------------------------------------------------
  // AppV2 window title bar — brass plate
  // ----------------------------------------------------------
  .window-header {
    .brass-gradient();
    border-bottom: 2px solid @steam-brass-dark;
    color: @steam-dark;

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

    .header-button,
    button[data-action="close"] {
      color:   @steam-dark;
      opacity: 0.75;
      &:hover { opacity: 1; color: @steam-rust; }
    }
  }

  // Window outer frame — rivets
  border: 2px solid @steam-brass-dark;
  box-shadow:
    inset  4px  4px 0 1px @steam-rivet,
    inset -4px  4px 0 1px @steam-rivet,
    inset  4px -4px 0 1px @steam-rivet,
    inset -4px -4px 0 1px @steam-rivet,
    0 4px 16px rgba(0, 0, 0, 0.55);

  // ----------------------------------------------------------
  // Sheet header — profile image + name area
  // ----------------------------------------------------------
  .sheet-header {
    background:    linear-gradient(180deg, @steam-parchment-dk 0%, @steam-parchment 100%);
    border-bottom: 2px solid @steam-brass-dark;
    padding:       8px 10px;
    align-items:   stretch;

    // Profile image — fills full header height, square ratio
    .profile-img {
      flex:         0 0 auto;
      align-self:   stretch;
      width:        auto;
      height:       auto;
      aspect-ratio: 1 / 1;
      border:        3px solid @steam-brass-dark;
      border-radius: 3px;
      box-shadow:    0 0 8px rgba(0, 0, 0, 0.45);
      background:    @steam-parchment-dk;
      object-fit:    cover;
      object-position: center top;
    }

    // Character name — large, dark ink
    h1.charname input {
      font-family:    @font-primary;
      color:          @steam-dark;
      background:     transparent;
      border:         none;
      border-bottom:  2px solid rgba(@steam-brass-dark, 0.4);
      text-shadow:    0 1px 2px rgba(0, 0, 0, 0.12);
      padding-bottom: 2px;

      &:focus {
        outline:         none;
        border-bottom-color: @steam-brass;
        background: rgba(@steam-cream, 0.4);
      }
    }

    // Header traits area (spleen/ideal/traits)
    .actor-header-traits {
      ul {
        list-style: none;
        margin:  0;
        padding: 0;
      }

      li {
        font-size:  0.82rem;
        color:      @steam-rust;
        padding:    1px 0;
        border-bottom: 1px solid rgba(@steam-brass-dark, 0.15);
        &:last-child { border-bottom: none; }
      }

      label { color: @steam-rust; }

      // Trait name as link
      a[data-action="itemEdit"] {
        color:       @steam-brass-dark;
        font-weight: bold;
        &:hover { color: @steam-brass; text-decoration: underline; }
      }
    }

    // Annency description textarea
    textarea {
      background:  @steam-cream;
      color:       @steam-dark;
      border:      1px solid @steam-brass-dark;
      border-radius: 2px;
      font-size:   0.85rem;
      padding:     3px 5px;
      resize:      vertical;
    }
  }

  // ----------------------------------------------------------
  // Tab navigation — industrial metal bar
  // ----------------------------------------------------------
  nav.sheet-tabs {
    background:    linear-gradient(180deg, @steam-metal 0%, @steam-metal-mid 100%);
    border-top:    1px solid @steam-brass-dark;
    border-bottom: 2px solid @steam-brass-dark;
    padding:       0 8px;
    gap:           4px;

    a.item {
      font-family:    @font-primary;
      font-size:      1.1rem;
      color:          @steam-parchment-dk;
      padding:        4px 10px;
      letter-spacing: 0.04em;
      border-bottom:  3px solid transparent;
      transition:     color 0.15s, border-color 0.15s;

      &:hover {
        color:        @steam-brass-light;
        border-bottom-color: rgba(@steam-brass, 0.5);
      }

      &.active {
        color:        @steam-brass-light;
        border-bottom-color: @steam-brass;
        text-shadow:  0 0 6px rgba(@steam-brass-light, 0.5);
        text-decoration: none;
      }
    }
  }

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

  // ----------------------------------------------------------
  // Sheet body (tab content)
  // ----------------------------------------------------------
  .sheet-body {
    background: transparent;
    color:      @steam-rust;
    padding:    0 8px;

    // ---- Section title rows ----
    .items-title-bg {
      .brass-gradient();
      border:        1px solid @steam-brass-dark;
      border-radius: 2px;
      padding:       3px 6px;
      margin-bottom: 2px;

      h3, label, .items-title-text {
        font-family:    @font-primary;
        font-size:      0.92rem;
        font-weight:    bold;
        color:          @steam-dark;
        text-shadow:    0 1px 1px rgba(255, 220, 60, 0.4);
        letter-spacing: 0.04em;
        margin:         0;
      }

      // Roll icons in title (NPC category roll)
      a {
        color: @steam-dark;
        opacity: 0.8;
        &:hover { opacity: 1; }
      }
    }

    // ---- Alternating item list ----
    ul.item-list,
    ul.stat-list,
    ul.alternate-list {
      list-style: none;
      margin:  2px 0;
      padding: 0;
    }

    li.list-item {
      background:    @steam-parchment;
      border-bottom: 1px solid rgba(@steam-brass-dark, 0.18);
      padding:       3px 4px;
      color:         @steam-rust;
      font-size:     0.83rem;

      &:nth-child(even) { background: @steam-parchment-dk; }
      &:last-child      { border-bottom: none; }
    }

    // Items with hover effect
    li.list-item-shadow {
      transition: background 0.1s;
      &:hover { background: mix(@steam-parchment, @steam-brass, 88%); }
    }

    // ---- Labels ----
    label,
    .item-name-label-short,
    .item-name-label-medium,
    .item-name-label-long,
    .item-name-label-long2,
    .item-name-label-free,
    .item-field-label-short,
    .item-field-label-medium {
      color: @steam-rust;
    }

    // ---- Roll action links (dice icons) ----
    a[data-action^="roll"],
    a.roll-skill,
    a.roll-spec,
    a.roll-cephaly {
      color: @steam-brass-dark;
      &:hover { color: @steam-brass; }
      i { font-size: 0.85rem; }
    }

    // ---- Item edit links ----
    a[data-action="itemEdit"],
    a.item-edit {
      color: @steam-brass-dark;
      &:hover { color: @steam-brass; }
    }

    // ---- Item control buttons (edit/delete/add) ----
    .item-controls {
      a.item-control {
        color: @steam-rust;
        opacity: 0.7;
        padding: 0 3px;
        &:hover { color: @steam-brass-dark; opacity: 1; }

        &.item-delete:hover { color: @steam-failure; }
      }
    }

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

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

    // Skill level select in header (NPC)
    .item-field-label-short-header select {
      background: @steam-parchment-dk;
      color:      @steam-dark;
    }

    // ---- HR separator — brass wire + gear ----
    hr {
      border:  none;
      height:  2px;
      background: linear-gradient(
        90deg,
        transparent        0%,
        @steam-brass-dark  10%,
        @steam-brass       50%,
        @steam-brass-dark  90%,
        transparent       100%
      );
      margin:   10px 4px;
      position: relative;

      &::after {
        content:    "⚙";
        position:   absolute;
        top:        -0.6em;
        left:       50%;
        transform:  translateX(-50%);
        color:      @steam-brass-dark;
        font-size:  0.85rem;
        background: @steam-parchment;
        padding:    0 4px;
        line-height: 1.2;
      }
    }

    // ---- Impact boxes (combat tab) ----
    .impact-box {
      background:    @steam-parchment-dk;
      border:        1px solid @steam-brass-dark;
      border-radius: 3px;
      padding:       6px 8px;
      margin:        4px;

      .impact-title {
        .brass-gradient();
        border-radius: 2px;
        padding:       3px 6px;
        margin-bottom: 4px;

        label, .items-title-text {
          font-family: @font-primary;
          font-size:   0.88rem;
          font-weight: bold;
          color:       @steam-dark;
          text-shadow: 0 1px 1px rgba(255, 220, 60, 0.4);
        }
      }

      ul {
        list-style: none;
        margin:  0;
        padding: 0;
      }

      li {
        display:     flex;
        align-items: center;
        gap:         6px;
        padding:     2px 0;
        border-bottom: 1px solid rgba(@steam-brass-dark, 0.18);
        color:       @steam-rust;
        font-size:   0.83rem;
        &:last-child { border-bottom: none; }

        // +/- impact buttons
        a[data-action="impactModify"] {
          color: @steam-brass-dark;
          font-size: 1rem;
          &:hover { color: @steam-brass; }
        }

        span { font-weight: bold; color: @steam-dark; }
      }
    }

    // ---- Sub-list (specializations) ----
    ul.ul-level1 {
      list-style: none;
      margin:  0;
      padding: 0 0 0 16px;

      li {
        background:    transparent;
        border-bottom: 1px solid rgba(@steam-brass-dark, 0.1);
        padding:       2px 4px;
        font-size:     0.8rem;
        color:         @steam-rust;

        a { color: @steam-brass-dark; &:hover { color: @steam-brass; } }
      }
    }

    // ---- Item icon (sheet-competence-img) ----
    img.sheet-competence-img {
      border:        1px solid @steam-brass-dark;
      border-radius: 2px;
      background:    @steam-parchment-dk;
      width:  24px;
      height: 24px;
      padding: 1px;
    }

    .form-group.small-editor,
    .form-group.editor {
      background:    @steam-cream;
      border:        1px solid @steam-brass-dark;
      border-radius: 2px;
      padding:       4px;
      color:         @steam-dark;
      margin-bottom: 0;
    }

    .form-group.small-editor textarea,
    .form-group.editor textarea {
      width:      100%;
      box-sizing: border-box;
      min-height: 92px;
      resize:     none;
      overflow-y: auto;
      background: @steam-cream;
      color:      @steam-dark;
      border:     none;
      padding:    4px;
      font-size:  0.85rem;
      display:    block;
      margin:     0;
    }

    // ---- Grid headings (h3/h4 outside of items-title-bg) ----
    h3, h4 {
      font-family: @font-primary;
      color:       @steam-brass-dark;
      margin:      6px 0 3px;
      font-size:   0.9rem;
    }
  }
}