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

  // --------------------------------------------------------
  // Global form field overrides (light theme)
  // --------------------------------------------------------
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input:not([type]),
  select,
  textarea {
    background: white;
    color: @color-text;
    border: 1px solid @color-border;
    border-radius: 3px;

    &:focus {
      border-color: @color-primary;
      outline: none;
      box-shadow: 0 0 0 2px fade(@color-primary, 20%);
    }

    &:disabled,
    &[disabled] {
      background: lighten(@color-border, 15%);
      color: @color-text-light;
      cursor: default;
    }
  }

  .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.1rem 0;
    font-size: 0.8rem;

    // Col widths: name | boost | mod | dc | bonus
    th:nth-child(1), td:nth-child(1) { width: 30%; }
    th:nth-child(2), td:nth-child(2) { width: 20%; }
    th:nth-child(3), td:nth-child(3) { width: 15%; }
    th:nth-child(4), td:nth-child(4) { width: 15%; }
    th:nth-child(5), td:nth-child(5) { width: 20%; }

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

      th {
        padding: 0.15rem 0.3rem;
        text-align: center;
        font-size: 0.72rem;
        text-transform: uppercase;
      }
    }

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

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

        select {
          width: auto;
          min-width: 50px;
          padding: 0 0.2rem;
          font-size: 0.78rem;
          background: white;
          color: @color-text;
          border: 1px solid @color-border;
          border-radius: 3px;
        }

        input {
          width: 44px;
          text-align: center;
          padding: 0 0.2rem;
          font-size: 0.78rem;
          background: white;
          color: @color-text;
          border: 1px solid @color-border;
          border-radius: 3px;
        }
      }

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

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


  // --------------------------------------------------------
  // Character Sheet Header
  // --------------------------------------------------------
  .character-content {
    fieldset {
      padding: 0.3rem 0.5rem;
      margin: 0.3rem 0;
    }

    .actor-header {
      display: grid;
      grid-template-columns: 80px 1fr auto auto;
      gap: 0.5rem 0.75rem;
      align-items: center;
      padding: 0.5rem 0.75rem;

      .actor-img {
        grid-row: 1 / 3;
        align-self: start;
        width: 80px;
        height: 80px;
      }

      .actor-identity {
        grid-column: 2;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        justify-content: center;

        .actor-name {
          font-size: 1.3rem;
          width: 100%;
        }

        .actor-details {
          display: flex;
          flex-wrap: wrap;
          gap: 0.3rem 1rem;
          align-items: center;

          .detail-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;

            label {
              font-size: 0.72rem;
              text-transform: uppercase;
              color: @color-text-light;
              white-space: nowrap;
              font-weight: 600;
            }

            select, input[type="number"] {
              width: 64px;
              padding: 0.15rem 0.25rem;
              font-size: 0.9rem;
              text-align: center;
            }
          }
        }
      }

      .actor-stats {
        grid-column: 3;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        justify-content: center;

        .resource-block {
          display: flex;
          align-items: center;
          gap: 0.4rem;
          flex-wrap: nowrap;

          > label {
            font-size: 0.7rem;
            text-transform: uppercase;
            color: @color-text-light;
            font-weight: 600;
            min-width: 70px;
            white-space: nowrap;
          }

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

            input {
              width: 42px;
              text-align: center;
              font-size: 0.9rem;
            }
          }

          .resource-temp {
            display: flex;
            align-items: center;
            gap: 0.3rem;

            label {
              font-size: 0.65rem;
              text-transform: uppercase;
              color: @color-text-light;
              white-space: nowrap;
            }

            input {
              width: 38px;
              text-align: center;
              font-size: 0.85rem;
            }
          }

          .resource-stepper {
            margin-left: 0.2rem;
          }
        }
      }

      .sheet-controls {
        grid-column: 4;
        grid-row: 1 / 3;
        align-self: center;
      }
    }
  }


  // --------------------------------------------------------
  // Creature Sheet Header (compact)
  // --------------------------------------------------------
  .creature-content {
    .actor-header {
      align-items: center;
      flex-wrap: wrap;

      .actor-img {
        width: 56px;
        height: 56px;
      }

      .actor-identity {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .actor-details {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        align-items: center;

        .detail-item {
          display: flex;
          align-items: center;
          gap: 0.25rem;

          label {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: @color-text-light;
            white-space: nowrap;
          }

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

          span {
            color: @color-text-light;
          }
        }
      }
    }

    // Eureka tab — large textareas
    .eureka-rubric {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding: 0.25rem 0;

      .eureka-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        label {
          font-weight: bold;
          font-size: 0.85rem;
          color: darken(@color-accent, 20%);
          text-transform: uppercase;
        }

        textarea {
          width: 100%;
          resize: vertical;
          border: 1px solid @color-border;
          border-radius: 4px;
          padding: 0.4rem 0.5rem;
          font-family: @font-body;
          font-size: 0.9rem;
          background: white;
          color: @color-text;
          line-height: 1.4;

          &:focus {
            border-color: @color-primary;
            outline: none;
            box-shadow: 0 0 0 2px fadeout(@color-primary, 75%);
          }

          &::placeholder {
            color: @color-text-light;
            font-style: italic;
          }
        }
      }

      .eureka-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
      }
    }
  }

  // --------------------------------------------------------
  // Creature Sheet - Eureka Rubric (legacy / fieldset version)
  // --------------------------------------------------------
  .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
// ============================================================

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

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

    .item-img {
      width: 52px;
      height: 52px;
      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.15rem;
      font-weight: bold;
      flex: 1;
      border: none;
      background: transparent;

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

  .item-body {
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    // Single field row: label | input
    .form-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-height: 28px;

      label {
        width: 38%;
        flex-shrink: 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: @color-text-light;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      input, select {
        flex: 1;
        min-width: 0;
      }
    }

    // Two fields side by side
    .form-row {
      display: flex;
      gap: 0.75rem;

      .form-group {
        flex: 1;
      }
    }

    // Charges: value / max inline
    .charges-group {
      display: flex;
      align-items: center;
      gap: 0.4rem;

      label {
        width: 38%;
        flex-shrink: 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: @color-text-light;
        text-transform: uppercase;
      }

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

      .separator {
        color: @color-text-light;
        font-weight: bold;
      }
    }

    // Tags (traits, specializations)
    .form-group-tags {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;

      label {
        width: 38%;
        flex-shrink: 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: @color-text-light;
        text-transform: uppercase;
        padding-top: 0.25rem;
      }

      .tags-list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        align-items: center;

        .tag {
          display: inline-flex;
          align-items: center;
          gap: 0.2rem;
          padding: 0.15rem 0.5rem;
          background: lighten(@color-primary, 48%);
          border: 1px solid @color-border;
          border-radius: 12px;
          font-size: 0.78rem;
          color: @color-text;

          a {
            color: @color-text-light;
            cursor: pointer;
            font-weight: bold;
            line-height: 1;

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

        .new-tag {
          width: 110px;
          font-size: 0.78rem;
          padding: 0.15rem 0.4rem;
          border-style: dashed;
        }
      }
    }

    // Divider between properties and description
    .section-divider {
      border: none;
      border-top: 1px solid @color-border;
      margin: 0.3rem 0;
    }

    // Description fieldset
    fieldset {
      border: 1px solid @color-border;
      border-radius: 4px;
      padding: 0.4rem 0.6rem;
      margin-top: 0.3rem;

      legend {
        font-size: 0.78rem;
        font-weight: 600;
        color: @color-text-light;
        text-transform: uppercase;
        padding: 0 0.3rem;
      }

      .editor, .prosemirror, textarea {
        min-height: 100px;
      }
    }
  }
}

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

// ============================================================
// Roll Dialog
// ============================================================

.awemmy.dialog {
  .awemmy-roll-dialog {
    padding: 0.5rem 0.25rem;

    .roll-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 0.4rem 0.5rem;
      background: lighten(@color-primary, 50%);
      border-radius: 4px;
      margin-bottom: 0.5rem;
      border-left: 4px solid @color-primary;

      .roll-attr-name {
        font-family: @font-heading;
        font-size: 1.05rem;
        font-weight: bold;
        color: @color-primary;
      }

      .roll-formula-summary {
        font-size: 0.85rem;
        color: @color-text-light;

        em {
          color: @color-secondary;
          font-style: normal;
          font-weight: bold;
        }
      }
    }

    .dialog-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.35rem;

      label {
        width: 42%;
        flex-shrink: 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: @color-text-light;
        text-transform: uppercase;
      }

      input, select {
        flex: 1;
        min-width: 0;
        background: white;
        color: @color-text;
        border: 1px solid @color-border;
        border-radius: 3px;
        padding: 0.2rem 0.35rem;
        font-size: 0.85rem;
      }
    }

    .hint-row {
      justify-content: space-between;
      background: lighten(@color-border, 10%);
      border-radius: 3px;
      padding: 0.15rem 0.5rem;
      font-size: 0.8rem;

      .hint-label { color: @color-text-light; font-weight: 600; text-transform: uppercase; }
      .hint-value { font-weight: bold;
        &.positive { color: @color-success; }
        &.negative { color: @color-failure; }
      }
    }

    .formula-preview {
      background: lighten(@color-primary, 52%);
      border-radius: 3px;
      padding: 0.2rem 0.5rem;
      margin-top: 0.2rem;

      .formula-label {
        width: 42%;
        flex-shrink: 0;
        font-size: 0.78rem;
        font-weight: 600;
        color: @color-text-light;
        text-transform: uppercase;
      }

      .formula-text {
        font-family: monospace;
        font-size: 0.95rem;
        font-weight: bold;
        color: @color-primary;
      }
    }
  }
}

// ============================================================
// Chat Message (updated)
// ============================================================

.awemmy-chat {
  padding: 0.4rem;

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

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

    .chat-roll-info {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .chat-actor-name {
      font-size: 0.75rem;
      color: @color-text-light;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

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

  .roll-breakdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: lighten(@color-primary, 50%);
    border-radius: 4px;
    margin: 0.35rem 0;
    font-size: 1rem;

    .die-result {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-weight: bold;
      color: @color-text;

      &.max { color: @color-critical-success; }
      &.min { color: @color-critical-failure; }

      i { color: @color-primary; font-size: 1.1rem; }
    }

    .roll-mod {
      color: @color-text-light;
      font-size: 0.9rem;
    }

    .roll-equals {
      color: @color-text-light;
    }

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

    .roll-dc {
      font-size: 0.8rem;
      color: @color-text-light;
      border-left: 1px solid @color-border;
      padding-left: 0.5rem;
    }
  }

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

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

  .private-result {
    text-align: center;
    color: @color-text-light;
    font-size: 0.85rem;
    padding: 0.5rem;
  }
}