// Adventures with Emmy - Main LESS stylesheet

// ============================================================
// Variables
// ============================================================

@color-primary: #3a5a8c;
@color-secondary: #e8a020;
@color-accent: #2ecc71;
@color-bg: #f5f0e8;
@color-text: #2c2c2c;
@color-text-light: #6c6c6c;
@color-border: #c8b89a;
@color-success: #27ae60;
@color-failure: #e74c3c;
@color-critical-success: #1abc9c;
@color-critical-failure: #8e44ad;

@font-heading: "Signika", "Palatino Linotype", serif;
@font-body: "Signika", "Book Antiqua", serif;

// ============================================================
// Base Styles
// ============================================================

.awemmy {
  font-family: @font-body;
  color: @color-text;
  background: @color-bg;

  .window-header {
    background: @color-primary;
    color: white;

    .window-title {
      font-family: @font-heading;
      font-size: 1.1rem;
    }
  }

  // --------------------------------------------------------
  // Sheet Controls
  // --------------------------------------------------------
  .sheet-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;

    .toggle-sheet {
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      border: 1px solid @color-border;
      border-radius: 3px;
      background: white;

      &:hover {
        background: @color-secondary;
        color: white;
        border-color: @color-secondary;
      }
    }
  }

  // --------------------------------------------------------
  // Actor Header
  // --------------------------------------------------------
  .actor-header {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    background: lighten(@color-primary, 50%);
    border-bottom: 2px solid @color-border;

    .actor-img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border: 2px solid @color-border;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        border-color: @color-secondary;
      }
    }

    .actor-name {
      font-family: @font-heading;
      font-size: 1.4rem;
      font-weight: bold;
      color: @color-primary;
    }
  }

  // --------------------------------------------------------
  // Attributes Table
  // --------------------------------------------------------
  .attributes-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;

    thead tr {
      background: @color-primary;
      color: white;

      th {
        padding: 0.4rem 0.5rem;
        text-align: center;
        font-size: 0.8rem;
        text-transform: uppercase;
      }
    }

    tbody tr {
      &:nth-child(even) {
        background: lighten(@color-primary, 55%);
      }

      td {
        padding: 0.35rem 0.5rem;
        text-align: center;
        border-bottom: 1px solid @color-border;

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

      .attr-label {
        text-align: left;
        font-weight: bold;
      }

      .rollable {
        cursor: pointer;
        color: @color-primary;

        &:hover {
          color: @color-secondary;
          text-decoration: underline;
        }
      }
    }
  }

  // --------------------------------------------------------
  // HP / Flow Points
  // --------------------------------------------------------
  .resource-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    label {
      font-size: 0.8rem;
      text-transform: uppercase;
      color: @color-text-light;
      min-width: 80px;
    }

    .resource-values {
      display: flex;
      align-items: center;
      gap: 0.25rem;

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

      .separator {
        color: @color-text-light;
      }
    }

    .resource-stepper {
      display: flex;
      gap: 0.15rem;

      button {
        width: 22px;
        height: 22px;
        padding: 0;
        font-size: 0.9rem;
        line-height: 1;
        cursor: pointer;
        border: 1px solid @color-border;
        border-radius: 3px;
        background: white;

        &:hover {
          background: @color-secondary;
          color: white;
        }
      }
    }
  }

  // --------------------------------------------------------
  // Item Lists
  // --------------------------------------------------------
  .item-list {
    .item-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.3rem 0.25rem;
      border-bottom: 1px solid lighten(@color-border, 10%);

      &:hover {
        background: lighten(@color-primary, 55%);
      }

      .item-img {
        width: 28px;
        height: 28px;
        object-fit: cover;
        border-radius: 3px;
        border: 1px solid @color-border;
      }

      .item-name {
        flex: 1;
        font-weight: bold;
      }

      .item-controls {
        display: flex;
        gap: 0.25rem;

        a {
          color: @color-text-light;
          cursor: pointer;

          &:hover {
            color: @color-primary;
          }

          &[data-action="delete"]:hover {
            color: @color-failure;
          }
        }
      }
    }

    .item-add {
      margin-top: 0.25rem;

      button {
        width: 100%;
        cursor: pointer;
        border: 1px dashed @color-border;
        background: transparent;
        padding: 0.25rem;
        color: @color-text-light;

        &:hover {
          color: @color-primary;
          border-color: @color-primary;
          background: lighten(@color-primary, 55%);
        }
      }
    }
  }

  // --------------------------------------------------------
  // Fieldsets
  // --------------------------------------------------------
  fieldset {
    border: 1px solid @color-border;
    border-radius: 4px;
    padding: 0.5rem;
    margin: 0.5rem 0;

    legend {
      font-family: @font-heading;
      font-weight: bold;
      color: @color-primary;
      padding: 0 0.5rem;
    }
  }

  // --------------------------------------------------------
  // Tab Navigation
  // --------------------------------------------------------
  .tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid @color-primary;

    .item {
      padding: 0.4rem 1rem;
      cursor: pointer;
      border: 1px solid transparent;
      border-bottom: none;
      color: @color-text-light;

      &:hover {
        color: @color-primary;
        background: lighten(@color-primary, 55%);
      }

      &.active {
        background: white;
        color: @color-primary;
        border-color: @color-primary;
        border-bottom-color: white;
        font-weight: bold;
        margin-bottom: -2px;
      }
    }
  }

  // --------------------------------------------------------
  // Creature Sheet - Eureka Rubric
  // --------------------------------------------------------
  .eureka-rubric {
    background: lighten(@color-accent, 45%);
    border: 1px solid @color-accent;
    border-radius: 4px;
    padding: 0.5rem;

    .eureka-row {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      margin-bottom: 0.4rem;

      label {
        font-weight: bold;
        min-width: 80px;
        color: darken(@color-accent, 15%);
      }

      input, textarea {
        flex: 1;
      }
    }
  }
}

// ============================================================
// Item Sheets
// ============================================================

.awemmy.item {
  .item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: lighten(@color-primary, 50%);
    border-bottom: 2px solid @color-border;

    .item-img {
      width: 56px;
      height: 56px;
      object-fit: cover;
      border: 2px solid @color-border;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        border-color: @color-secondary;
      }
    }

    input[type="text"] {
      font-family: @font-heading;
      font-size: 1.2rem;
      font-weight: bold;
      flex: 1;
      border: none;
      background: transparent;

      &:focus {
        background: white;
        border: 1px solid @color-border;
      }
    }
  }

  .item-body {
    padding: 0.5rem;

    .form-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.4rem;

      label {
        min-width: 120px;
        font-size: 0.85rem;
        color: @color-text-light;
        text-transform: uppercase;
      }
    }
  }
}

// ============================================================
// Chat Message
// ============================================================

.awemmy-chat {
  padding: 0.5rem;

  .chat-roll-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

    .chat-actor-img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid @color-border;
    }

    .chat-roll-label {
      font-family: @font-heading;
      font-size: 1rem;
      font-weight: bold;
      color: @color-primary;
    }
  }

  .roll-result {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 0.5rem;
    border-radius: 4px;
    margin: 0.5rem 0;
    background: lighten(@color-primary, 50%);
    color: @color-primary;
  }

  .outcome-badge {
    text-align: center;
    padding: 0.3rem 0.75rem;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.9rem;

    &.critical-success { background: @color-critical-success; color: white; }
    &.success { background: @color-success; color: white; }
    &.failure { background: @color-failure; color: white; }
    &.critical-failure { background: @color-critical-failure; color: white; }
  }
}