@import "mixins";

// ─── Item sheets shared ───────────────────────────────────────────────────────

.celestopol.item-sheet {

  .item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--cel-green);
    background-image: url("../assets/ui/fond_cadrille.jpg");
    background-blend-mode: overlay;
    border-bottom: 2px solid var(--cel-orange);

    .item-portrait img {
      width: 56px;
      height: 56px;
      object-fit: cover;
      border: 2px solid var(--cel-orange);
      cursor: pointer;
    }

    .item-header-fields {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;

      input[type="text"] {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--cel-orange-light);
        color: var(--cel-orange);
        font-family: var(--cel-font-title);
        font-size: 1.2em;
        font-weight: bold;
        padding: 2px 4px;
      }

      .item-meta {
        display: flex;
        gap: 8px;
        align-items: center;

        select {
          background: transparent;
          border: 1px solid var(--cel-orange-light);
          color: var(--cel-orange);
          font-size: 0.85em;
          option { background: var(--cel-green-dark); color: var(--cel-cream); }
        }
      }

      .item-value-field {
        display: flex;
        align-items: center;
        gap: 4px;
        label { color: var(--cel-orange-light); font-size: 0.75em; text-transform: uppercase; }
        input[type="number"] {
          width: 40px;
          background: transparent;
          border: 1px solid var(--cel-orange-light);
          color: var(--cel-orange);
          text-align: center;
          font-size: 1.1em;
          font-weight: bold;
        }
      }
    }
  }

  .item-tabs {
    display: flex;
    background: var(--cel-green-dark);
    border-bottom: 2px solid var(--cel-orange);

    .item {
      padding: 5px 10px;
      color: var(--cel-cream);
      font-family: var(--cel-font-title);
      font-size: 0.8em;
      text-transform: uppercase;
      cursor: pointer;
      &:hover { background: var(--cel-green-light); }
      &.active { background: var(--cel-orange); color: #1a0a00; font-weight: bold; }
    }
  }

  section.tab {
    padding: 8px;
    display: none;
    &.active { display: block; }
  }

  .form-group {
    margin-bottom: 8px;
    label {
      display: block;
      font-size: 0.75em;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--cel-green);
      margin-bottom: 2px;
    }
    input[type="text"], input[type="number"] { .cel-input-std(); width: 100%; box-sizing: border-box; }
  }

  // Scores grid
  .scores-section {
    .scores-header { .cel-section-header(); }

    .scores-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;

      .scores-stat-col {
        .scores-stat-name {
          font-family: var(--cel-font-title);
          font-size: 0.75em;
          color: var(--cel-green);
          text-transform: uppercase;
          border-bottom: 1px solid var(--cel-border);
          margin-bottom: 4px;
        }

        .score-row {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 2px 0;
          font-size: 0.8em;

          .score-skill-name { flex: 1; }
          .score-bonus, .score-malus {
            width: 36px;
            .cel-input-std();
            text-align: center;
          }
          .score-bonus { border-color: #4a8a4a; }
          .score-malus { border-color: #8a4a4a; }
        }
      }
    }
  }

  // Equipment-specific
  &.equipment-sheet {
    .equipment-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 8px;
    }
  }
}