@font-face {
  font-family: "DistressBlack";
  src: url("@{fonts-path}/dcc_sharp_distress_black_by_dccanim.otf");
}

* {
  box-sizing: border-box;
}

body.system-vermine2047 {
  font-family: "Roboto", sans-serif;
  color: @theme-color-secondary;
}

img {
  border: none;
}

ul.unstyled {
  list-style-type: none;
  padding: 0;
  margin: 0;

  li {
    padding: 0;
    margin: 0;
  }
}

.w-full {
  width: 100%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.window-app {
  font-family: "Roboto", sans-serif;
  .shadow(0px, 0px, 30px, rgba(106, 176, 76, 0.25));
}

.system-vermine2047 {
  .window-content,
  form.application.sheet.vermine2047 {
    .background-image(url("@{ui-path}/box_background.webp"), repeat);
    padding: 10px;
    overflow-y: hidden;
  }

  .dialog .window-content {
    .background-image(url("@{ui-path}/fond_chat_box.webp"), repeat);
    padding: 0.5rem;
    overflow-y: hidden;
  }
}

.window-content .row {
  &.smb { margin-bottom: 0.25rem; }
  &.mdb { margin-bottom: 0.5rem; }
  &.lgb { margin-bottom: 1rem; }
}

.rollable:hover,
.rollable:focus {
  color: #000;
  text-shadow: 0 0 10px @color-acid-green;
  cursor: pointer;
  .transition();
}

.rollable {
  .transition();
}

img.profile-img {
  filter: drop-shadow(0px 0px 20px rgb(110, 133, 27));
  height: auto;
  width: 100%;
  max-width: 10rem;
}

body.system-vermine2047 img#logo {
  content: url("@{assets-path}/images/ui/logo_vermine_foundry.webp");
  height: auto;
}

#chat-log,
.chat-log {
  .message {
    .background-image(url("@{ui-path}/box_background.webp"), repeat);
  }
}

.grid {
  display: grid;
  grid-column: span 2 / span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 5px 0;
  padding: 0;
}

.grid-2col { .grid(); }
.grid-3col { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4col { grid-column: span 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5col { grid-column: span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6col { grid-column: span 6; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-7col { grid-column: span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-8col { grid-column: span 8; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-9col { grid-column: span 9; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-10col { grid-column: span 10; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-11col { grid-column: span 11; grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-12col { grid-column: span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-start-2 { grid-column-start: 2; }
.grid-start-3 { grid-column-start: 3; }
.grid-start-4 { grid-column-start: 4; }
.grid-start-5 { grid-column-start: 5; }
.grid-start-6 { grid-column-start: 6; }
.grid-start-7 { grid-column-start: 7; }
.grid-start-8 { grid-column-start: 8; }
.grid-start-9 { grid-column-start: 9; }
.grid-start-10 { grid-column-start: 10; }
.grid-start-11 { grid-column-start: 11; }
.grid-start-12 { grid-column-start: 12; }

.grid-span-2 { grid-column-end: span 2; }
.grid-span-3 { grid-column-end: span 3; }
.grid-span-4 { grid-column-end: span 4; }
.grid-span-5 { grid-column-end: span 5; }
.grid-span-6 { grid-column-end: span 6; }
.grid-span-7 { grid-column-end: span 7; }
.grid-span-8 { grid-column-end: span 8; }
.grid-span-9 { grid-column-end: span 9; }
.grid-span-10 { grid-column-end: span 10; }
.grid-span-11 { grid-column-end: span 11; }
.grid-span-12 { grid-column-end: span 12; }

.flex-group-center,
.flex-group-left,
.flex-group-right {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flex-group-left {
  justify-content: flex-start;
  text-align: left;
}

.flex-group-right {
  justify-content: flex-end;
  text-align: right;
}

.flex-align-left { align-items: flex-start; }
.flex-align-right { align-items: flex-end; }
.gap-xs { gap: 2px; }
.gap-sm { gap: 4px; }
.gap-md { gap: 8px; }
.gap-lg { gap: 16px; }
.flexshrink { flex: 0; }
.flex-between { justify-content: space-between; }
.flexlarge { flex: 2; }

.align-left {
  justify-content: flex-start;
  text-align: left;
}

.align-right {
  justify-content: flex-end;
  text-align: right;
}

.align-center {
  justify-content: center;
  text-align: center;
}

::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 3px;
  background: #577822;
  border: 1px solid var(--color-border-highlight);
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.system-vermine2047 {
  .item-form {
    font-family: "Roboto", sans-serif;
  }

  .sheet-header {
    flex: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 10px;

    .profile-img {
      flex: 0 0 100px;
      height: 100px;
      margin-right: 10px;
    }

    .header-fields {
      flex: 1;
    }

    h1.charname {
      height: 50px;
      padding: 0px;
      margin: 5px 0;
      border-bottom: 0;

      input {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    }
  }

  .sheet-tabs {
    flex: 0;
  }

  .sheet-body .tab,
  .editor {
    height: 100%;
    width: 100%;
  }

  .editor {
    min-height: 75px;
    margin-bottom: 1rem;
    min-width: 100%;

    .editor-content {
      min-width: 100%;
      min-height: 3rem;
    }
  }

  .editor:hover .editor-edit {
    display: block;
  }

  .tox {
    min-height: 25vh;

    .tox-editor-container {
      background: #fff;
    }

    .tox-edit-area {
      padding: 0 8px;
    }
  }

  .resource-label {
    font-weight: bold;
  }

  .items-header {
    height: 28px;
    margin: 2px 0;
    padding: 0;
    align-items: center;
    background: rgba(0, 0, 0, 0.05);
    border: 2px groove #eeede0;
    font-weight: bold;

    > * {
      font-size: 14px;
      text-align: center;
    }

    .item-name {
      font-weight: bold;
      padding-left: 5px;
      text-align: left;
      display: flex;
    }
  }

  .items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    color: #444;

    .item-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .item-name {
      flex: 2;
      margin: 0;
      overflow: hidden;
      font-size: 13px;
      text-align: left;
      align-items: center;
      display: flex;

      h3, h4 {
        margin: 0;
        white-space: nowrap;
        overflow-x: hidden;
      }
    }

    .item-controls {
      display: flex;
      flex: 0;
      justify-content: flex-end;

      a {
        font-size: 12px;
        text-align: center;
        margin: 0 6px;
      }
    }

    .item {
      align-items: center;
      padding: 0 2px;
      border-bottom: 1px solid #c9c7b8;

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

      .item-name {
        color: @theme-color-dark;

        .item-image {
          flex: 0 0 30px;
          height: 30px;
          background-size: 30px;
          border: none;
          margin-right: 5px;
        }
      }

      .item-prop {
        text-align: center;
        border-left: 1px solid #c9c7b8;
        border-right: 1px solid #c9c7b8;
        font-size: 12px;
      }

      .items-header {
        height: 28px;
        margin: 2px 0;
        padding: 0;
        align-items: center;
        background: rgba(0, 0, 0, 0.05);
        border: 2px groove #eeede0;
        font-weight: bold;

        > * {
          font-size: 12px;
          text-align: center;
        }

        .item-name {
          padding-left: 5px;
          text-align: left;
        }
      }
    }

    .effects .item {
      .effect-source,
      .effect-duration,
      .effect-controls {
        text-align: center;
        border-left: 1px solid #c9c7b8;
        border-right: 1px solid #c9c7b8;
        font-size: 12px;
      }

      .effect-controls {
        border: none;
      }
    }
  }

  .item-formula {
    flex: 0 0 200px;
    padding: 0 8px;
  }
}

span.game-mode {
  font-family: "DistressBlack", sans-serif;
  position: absolute;
  margin-left: auto;
  color: rgba(0, 0, 0, 0);
  top: 1rem;
  z-index: 900;
  width: 55%;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.767) 0%,
    rgba(0, 0, 0, 0.61) 17%,
    rgba(0, 0, 0, 0.548) 19%,
    rgba(222, 255, 221, 0.575) 24%,
    rgba(255, 255, 255, 0.637) 43%,
    rgba(0, 0, 0, 0.486) 47%,
    rgba(254, 255, 254, 0.466) 50%,
    rgba(0, 0, 0, 0.699) 63%,
    rgba(134, 160, 137, 0.479) 64%,
    rgba(213, 248, 210, 0.493) 100%
  );
  background-clip: text;
}

span.game-mode#game-mode-1 { color: @game-mode-1-color; }
span.game-mode#game-mode-2 { color: @game-mode-2-color; }
span.game-mode#game-mode-3 { color: @game-mode-3-color; }

.shadow {
  .shadow();
}

ol#chat-log,
ol.chat-log {
  header.message-header {
    background-color: #000;
    padding: 0 1rem;
  }

  .vermine-roll-message {
    overflow: hidden;
    padding: 4px 10px 10px;
    position: relative;

    > h3 {
      font-family: "DistressBlack";
      text-transform: uppercase;
      font-size: @font-size-14;
      margin: 6px 0 8px;
      padding: 4px 10px;
      background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
      box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.3) inset;
      font-weight: 900;
      border-bottom: none;
    }

    > .flexrow:not(.roll-total):not(.roll-results) {
      align-items: center;
      gap: 6px;
      margin: 4px 0;

      h4 {
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        margin: 0;
        border-bottom: none;
        font-weight: 900;
      }

      span {
        font-family: "Roboto", sans-serif;
        font-size: @font-size-12;
      }
    }

    // ── Reroll section ──────────────────────────────────────────────
    .reroll-fromroll {
      > h4 {
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        margin: 6px 0 4px;
        border-bottom: none;
        font-weight: 900;

        #allowed_reroll {
          font-size: @font-size-12;
        }
      }
    }

    div.reroll {
      .transition(0.3s);
      max-height: 1px;
      overflow: hidden;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;

      button {
        text-transform: uppercase;
        font-family: "DistressBlack";
        font-size: @font-size-12;
        padding: 2px 12px;
        max-width: fit-content;
        box-shadow: 0px 0px 2px #000;
        .background-image(url("@{ui-path}/scotch.webp"), no-repeat, cover, 50% 0%);
      }

      &.visible { max-height: 15rem; }
    }

    // ── Dice results ────────────────────────────────────────────────
    ul.roll-results {
      list-style: none;
      padding: 6px 0;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;

      li.die {
        position: relative;
        width: 3rem;
        height: 3rem;
        flex: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        .transition();
        border-bottom: 4px solid @color-hemolymph;
        border-radius: 50%;

        &:after {
          content: "";
          position: absolute;
          top: -1rem;
          text-wrap: nowrap;
          color: #fff;
          font-weight: 100;
          font-size: smaller;
          text-align: center;
          opacity: 0;
          text-shadow: 0px 0px 5px #000;
        }

        &:hover::after {
          opacity: 1;
          color: #fff;
        }

        &.human { border-top: 4px solid @totem-human-color; }
        &.adapted { border-top: 4px solid @totem-adapted-color; }
        &.rerollable {
          cursor: pointer;
          &:hover { transform: translateY(0.5rem); }
        }
        &.success { border-bottom-color: @color-acid-green; }
        &.adapted::after { content: "adapté"; }
        &.human::after { content: "humain"; }
        &.rerolled { transform: translateY(0rem); }

        span {
          display: none;
        }

        &:not([data-result]) {
          background-image: url("@{dice-path}/d10c-1.webp");
          opacity: 0.5;
          filter: grayscale(1);
        }
      }

      // Per-face dice background images
      .generate-dice-faces(@i: 1) when (@i =< 10) {
        li.die[data-result="@{i}"] {
          background-image: url("@{dice-path}/d10c-@{i}.webp");
        }
        .generate-dice-faces(@i + 1);
      }
      .generate-dice-faces();
    }

    // ── Total section ───────────────────────────────────────────────
    div.roll-total {
      margin-top: 8px;
      padding: 8px 16px;
      background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
      box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.3) inset;
      border-radius: 2px;
      gap: 16px;
      justify-content: center;

      > div {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      h4 {
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        margin: 0;
        border-bottom: none;
        font-weight: 900;
        text-align: center;
      }

      span {
        font-family: "DistressBlack";
        font-size: @font-size-20;
      }

      #total {
        color: @color-acid-green;
        text-shadow: 0 0 4px fade(@color-acid-green, 40%);
      }

      #required {
        color: @color-amber;
      }
    }
  }

  div.item-card header img {
    max-width: 30%;
  }
}

// Padding supplémentaire pour les fiches groupe, npc et créature
.system-vermine2047 {
  .group-content,
  .npc-content,
  .creature-content {
    padding: 15px;
  }
}