// ============================================================
// Item sheets — Steampunk theme
// Scoped to .fvtt-ecryme.item
// Same visual language as actor-sheet-steampunk.less
// ============================================================

.fvtt-ecryme.item {

  // ----------------------------------------------------------
  // 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);

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

  // ----------------------------------------------------------
  // Sheet header — item image + name
  // ----------------------------------------------------------
  .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:   center;

    .item-sheet-img {
      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:    contain;
    }

    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);
      }
    }
  }

  // ----------------------------------------------------------
  // 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 {
      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;
      text-decoration: none;

      &: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;
      }
    }
  }

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

    // ---- Field rows ----
    ul {
      list-style: none;
      margin:  4px 0;
      padding: 0;
    }

    ul li.flexrow {
      align-items:   center;
      padding:       4px 2px;
      border-bottom: 1px solid rgba(@steam-brass-dark, 0.18);
      color:         @steam-rust;
      font-size:     0.85rem;
      gap:           6px;

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

    // ---- 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;
    }

    // ---- Selects & inputs ----
    select,
    input[type="text"],
    input[type="number"] {
      background:    @steam-cream;
      color:         @steam-dark;
      border:        1px solid @steam-brass-dark;
      border-radius: 2px;
      padding:       2px 5px;
      font-size:     0.85rem;
      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);
      }
    }

    // ---- Description editor area ----
    .tab.description {
      .editor,
      .editor-content,
      .prosemirror,
      [data-edit] {
        background:    @steam-cream;
        color:         @steam-dark;
        border:        1px solid @steam-brass-dark;
        border-radius: 2px;
        padding:       6px 8px;
        font-size:     0.86rem;
        min-height:    80px;
      }
    }

    // ---- 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;
      }
    }

    // ---- h3/h4 outside section titles ----
    h3, h4 {
      font-family: @font-primary;
      color:       @steam-brass-dark;
      margin:      6px 0 3px;
      font-size:   0.9rem;
    }

    // ---- 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;
      }
    }

    // ---- Item icon (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;
    }
  }
}