// Add custom fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

// Import utilities
@import 'utils/variables';
@import 'utils/typography';
@import 'utils/colors';
@import 'utils/mixins';

// Global styles
@import 'global/window';
@import 'global/grid';
@import 'global/flex';

// Components
@import 'components/forms';
@import 'components/items';
@import 'components/effects';
@import 'components/resource';
@import 'components/characteristics';
@import 'components/modifiers';
@import 'components/features';

/* Styles spécifiques au système Myriad */
.myriad-system.sheet.actor {
  min-width: 560px;
  min-height: 420px;

  .sheet-header {
    flex: 0 0 auto;
    overflow: visible;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 120px;

    .profile-img {
      flex: 0 0 100px;
      height: 100px;
      margin-right: 15px;
      border-radius: 5px;
      border: 1px solid #ddd;
    }

    .header-fields {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 100px;
      gap: 10px;

      .charname-container {
        flex: 0 0 auto;
        
        .charname {
          margin: 0 0 10px 0;
          padding: 0;
          height: auto;
          
          input {
            width: 100%;
            height: 32px;
            margin: 0;
            font-size: 18px;
            font-weight: bold;
          }
        }
      }

      .resources-container {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;

        .resource {
          flex: 0 0 calc(33% - 7px);
          min-width: 120px;
          height: auto;
          margin: 0;
          text-align: center;
          
          .resource-label {
            font-size: 11px;
            font-weight: bold;
            margin-bottom: 2px;
            display: block;
          }

          .resource-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;

            input {
              width: 40px;
              height: 24px;
              text-align: center;
              font-size: 12px;
            }

            .sep {
              font-weight: bold;
              font-size: 14px;
            }

            .xp-unspent, .xp-total {
              font-size: 12px;
              font-weight: bold;
              min-width: 20px;
              text-align: center;
            }

            .health-max {
              font-size: 12px;
              font-weight: bold;
              min-width: 20px;
              text-align: center;
              color: #666;
              background: #f5f5f5;
              border: 1px solid #ddd;
              border-radius: 3px;
              padding: 2px 4px;
            }

            .xp-control {
              background: #f8f8f8;
              border: 1px solid #ccc;
              border-radius: 3px;
              padding: 2px 4px;
              cursor: pointer;
              font-size: 10px;
              transition: background-color 0.2s;

              &:hover {
                background: #e8e8e8;
              }

              &:active {
                background: #d8d8d8;
              }

              i {
                font-size: 8px;
              }
            }
          }
        }
      }
    }
  }

  // Section des caractéristiques
  .characteristics {
    .characteristic {
      margin: 5px 0;
      padding: 5px;
      border: 1px solid #AAA;
      border-radius: 3px;

      .characteristic-label {
        font-weight: bold;
        min-width: 120px;
      }

      .characteristic-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;

        input {
          flex: 0 0 60px;
          text-align: center;
        }

        .characteristic-roll {
          background: #f0f0f0;
          border: 1px solid #ccc;
          border-radius: 3px;
          padding: 4px 6px;
          cursor: pointer;
          transition: all 0.2s;
          
          &:hover {
            background: #e0e0e0;
            transform: scale(1.05);
          }

          &:active {
            background: #d0d0d0;
          }

          i {
            font-size: 14px;
            color: #444;
          }
        }

        .characteristic-modifiers {
          display: flex;
          gap: 3px;
          margin-left: 5px;

          .characteristic-bonus {
            color: #2e8b57;
            font-weight: bold;
            font-size: 11px;
          }

          .characteristic-malus {
            color: #dc143c;
            font-weight: bold;
            font-size: 11px;
          }
        }
      }
    }
  }

  // Section des objets et listes
  .items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    color: #444;

    .item {
      line-height: 30px;
      padding: 3px 0;
      border-bottom: 1px solid #BBB;

      .item-name {
        margin: 0;
      }

      .item-image {
        flex: 0 0 24px;
        margin-right: 5px;
      }

      img {
        display: block;
      }

      .item-tags {
        flex: 1;
        margin: 0 5px;
      }

      .tag {
        display: inline-block;
        margin: 0 2px;
        padding: 0 3px;
        font-size: 10px;
        line-height: 16px;
        border: 1px solid #999;
        border-radius: 3px;
        background: #DDD;
      }

      .item-controls {
        flex: 0 0 80px;
        text-align: right;

        .item-control {
          margin: 0 2px;
          
          i {
            font-size: 12px;
          }
        }
      }
    }
  }

  // Inventaire en grille
  .inventory-grid {
    display: grid;
    gap: 1px;
    background: #DDD;
    padding: 5px;
    margin-bottom: 10px;

    .inventory-cell {
      width: 50px;
      height: 50px;
      background: white;
      border: 1px solid #AAA;
      transition: all 0.2s ease;

      &.occupied {
        background: #EEE;
      }

      &.dragging-over {
        background: #CFC;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

/* Styles pour les résultats de jets de dés */
.dice-roll {
  .critical-success {
    color: #2e8b57;
    font-weight: bold;
  }

  .success {
    color: #4caf50;
    font-weight: bold;
  }

  .failure {
    color: #f44336;
    font-weight: bold;
  }

  .critical-failure {
    color: #d32f2f;
    font-weight: bold;
  }
}
