
/**************************/
/* DnD5e sheets */
/**************************/
body.crlngn-ui.crlngn-sheets {
  --dnd5e-border-gold: none;

  .dnd5e2.actor .meter{
    border: 1px solid transparent;
  }
  .dnd5e2.actor fieldset {
    border: 1px solid transparent;
  }

  .dnd5e2.sheet.actor.character .sheet-header > .right > div:last-child .xp-bar::after {
    background: var(--color-warm-2);
    box-shadow: none;
  }
  .dnd5e2.sheet.actor.character .tab[data-tab="spells"] .top .card.spellcasting {
    width: 300px;
  }
  &:is(.dnd5e-theme-light, .theme-light) .dnd5e2.sheet.actor.character .sheet-header,
  .theme-light.dnd5e2.sheet.actor.character .sheet-header{
    position: relative;
    background: transparent;
    z-index:0;
  }
  &:is(.dnd5e-theme-light, .theme-light) .dnd5e2.sheet.actor.character:not(.theme-dark) .window-content .sheet-header:before,
  .theme-light.dnd5e2.sheet.actor.character:not(.theme-dark) .window-content .sheet-header:before{
    content: '';
    background: transparent url(/systems/dnd5e/ui/official/banner-character.jpg) no-repeat center / cover;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -2;
    border-radius: 5px 5px 0 0;
    filter: grayscale(1) contrast(1) brightness(3);
  }
  &:is(.dnd5e-theme-light, .theme-light) .dnd5e2.sheet.actor.character:not(.theme-dark) .window-content .sheet-header:after,
  .theme-light.dnd5e2.sheet.actor.character:not(.theme-dark) .window-content .sheet-header:after{
    content: '';
    position: absolute;
    background: var(--color-highlights);
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    mix-blend-mode: multiply;
    border-radius: 5px 5px 0 0;
  }
  /*
  .dnd5e2.sheet.actor.character .window-content > * {
    z-index: 2;
  }*/
  &:is(.dnd5e-theme-dark, .theme-dark) .dnd5e2.sheet.actor.character:not(.theme-light) .window-content,
  .dnd5e2.sheet.actor.character.theme-dark .window-content {
    z-index: 0;
  }
  &:is(.dnd5e-theme-dark, .theme-dark) .dnd5e2.sheet.actor.character:not(.theme-light) .window-content::before,
  .dnd5e2.sheet.actor.character.theme-dark .window-content::before {
    filter: grayscale(1) contrast(1) brightness(3);
    z-index: -2;
    pointer-events: none;
    border-radius: 5px 5px 0 0;
  }
  &:is(.dnd5e-theme-dark, .theme-dark) .dnd5e2.sheet.actor.character:not(.theme-light) .window-content:after,
  .dnd5e2.sheet.actor.character.theme-dark .window-content:after{
    content: '';
    position: absolute;
    background: linear-gradient(to bottom,var(--color-highlights) 0%,var(--color-highlights-75) 180px, transparent 280px);
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    mix-blend-mode: multiply;
    border-radius: 6px;
    pointer-events: none;
  }
  &:is(.dnd5e-theme-dark, .theme-dark) .dnd5e2.sheet.actor .card .header, 
  .dnd5e2.dnd5e-theme-dark.sheet.actor .card .header,
  &:is(.dnd5e-theme-dark, .theme-dark) .dnd5e2.compendium-browser .card .header, 
  .dnd5e2.dnd5e-theme-dark.compendium-browser .card .header {
    background: linear-gradient(to right, var(--color-warm-2), var(--color-warm-3));
  }
  &:is(.dnd5e-theme-light, .theme-light) .dnd5e2.sheet.actor .card .header, 
  .dnd5e2.dnd5e-theme-light.sheet.actor .card .header,
  &:is(.dnd5e-theme-light, .theme-light) .dnd5e2.compendium-browser .card .header, 
  .dnd5e2.dnd5e-theme-light.compendium-browser .card .header {
    background: linear-gradient(to right, var(--color-warm-2), var(--color-warm-3));
  }

  /* sheet tabs */
  .dnd5e2.sheet.actor > *,
  .dnd5e2.sheet.actor.character .sheet-body{
    order: 2;
  }
  .dnd5e2.sheet.actor.character .sheet-header > .left.optional-ability-2,
  .dnd5e2.sheet.actor.character .sheet-header > .left.optional-ability-1 {
    padding-right: 0;
  }

  .dnd5e2.sheet.actor.character .ability-scores {
    z-index: 2;

    .ability-score, .ability-score.flipped {
      font-weight: 600;
      padding-top: 6px;
      width: auto;
      flex: 0 1 auto;
      min-width: 60px;
      height: 72px;
      gap: 0;

      .label {
        font-size: var(--font-size-14);
      }
      .score {
        font-size: var(--font-size-16);
        line-height: 1.15;
        margin: 0;
        height: auto;
        order: initial;
      }
      .score > input {
        color: var(--color-light-1);
        margin: -1px;
        height: auto;
      }
      .mod{
        padding: 3px 0 8px 0;
      }
    }
    /*
    .rows {
      padding: 60px 0 76px 24px;
    }*/
  }

  .dnd5e2.sheet.actor.character .ability-scores {
    z-index: 10;
    transition: opacity 0.15s ease-out, left 0.35s ease-out 0.1s;
    min-height: 72px;
    height: auto;

    &.flipped {
      padding: 12px 0 0;
      justify-content: space-between;
      gap: unset;
    }

    &.fadeout{
      opacity: 0;
      pointer-events: none;
    }

    .rows {
      padding: 150px 10px 0 20px;
      flex-direction: row;
      align-items: flex-start;
      justify-content: stretch;
      flex-wrap: nowrap;
      width: auto;
      gap: 15px;
      overflow: auto;
      /* deal with scrollbar */
      -ms-overflow-style: none !important;  /* IE and Edge */
      scrollbar-width: none !important;  /* Firefox */
      &::-webkit-scrollbar {
        display: none !important;
      }

      .top {
        min-height: 80px;
        order: 0;
        min-width: 0;
        flex: 0 0 auto;
        width: auto;
        padding-right: 0;
        gap: 5px;
        margin: 0;

        .ability-score::before{
          border: 1px solid var(--dnd5e-color-gold);
        }
      }
      .bottom {
        order: 1;
        flex: 0 1 auto;
        width: auto;
        gap: 5px;
        margin: 0;
        justify-content: flex-start;
        min-height: 80px;
      }
    }
  }

  @container (min-width: 700px) {
    .dnd5e2.sheet.actor.character .ability-scores.optional-ability-0 .rows .top {
      min-height: 72px;
      order: 0;
    }
  }

  &.crlngn-sheet-tabs {
    .dnd5e2.sheet.actor.character .ability-scores .rows {
      padding: 215px 10px 10px 20px;
    }
    /* custom dnd5e */
    .dnd5e2.sheet.actor.character.custom-dnd5e .ability-scores .rows {
      padding: 0px 10px 10px 20px;
    }

    .dnd5e2.sheet.actor.character{
      --dnd5e-sheet-header-height: 160px;
    }
    .dnd5e2.sheet.actor.vertical-tabs nav.tabs,
    .dnd5e2.compendium-browser.vertical-tabs nav.tabs {
      --tab-full-width: auto;
      --tab-inactive-width: auto;
      flex-direction: row;
      gap: 1.5rem;
      left: 0;
      margin: 0 2.6rem;
      padding: 0.15em 0;
      order: 0;
      position: relative;
      top: 0;
      width: 100%;
      justify-content: flex-start;
      overflow: scroll;
      z-index: 1;
      /*background-color: var(--color-dark-bg-25);*/
      font-size: var(--font-size-14);
      
      /* deal with scrollbar */
      -ms-overflow-style: none !important;  /* IE and Edge */
      scrollbar-width: none !important;  /* Firefox */
      &::-webkit-scrollbar {
        display: none !important;
      }

      .tabs-right{
        flex-direction: row;
      }
      > a.item{
        --icon-size: 1em;
        align-items: center;
        background: transparent;
        border: none;
        border-bottom: 1px solid transparent;
        border-radius: 0;
        display: block;
        flex: 0 0 auto;
        padding: 6px 0;
        gap: 3px;
        line-height: 1.25;
        width: auto;
        height: auto;
        box-shadow: none;
        font-weight: 500;
        filter: brightness(3);
        opacity: 0.8;

        &:hover, &.active{
          box-shadow: none;
          opacity: 1;
          color: var(--color-light-1);
          font-weight: 600;
        }
        &.active{
          filter: none;
          opacity: 1;
          color: var(--color-light-1);
          font-weight: 600;
        }
      }
      > a.item i{
        display: inline-flex;
        position: relative;
        line-height: 1.1;
        margin: 0;
        font-size: var(--font-size-12);
      }
      > a.item::after {
        content: attr(aria-label);
        display: inline-flex;
        border-radius: 0;
        border: none;
        width: auto;
        height: auto;
        position: relative;
        line-height: 1.1;
        inset: 0;
      }
    }

    .dnd5e2.compendium-browser.vertical-tabs nav.tabs {
      /*margin: 0.5rem 1rem;*/
      gap: 1rem;
      font-size: 1em;
      grid-column: span 2;
      grid-row-end: 1;

      > a.item {
        &.active{
          filter: unset;
          opacity: 1;
        }
      }
    }
    .dnd5e2.compendium-browser .sidebar .filter.filter-set .filter-choice {
      margin: 0.25em 0;
    }

    .dnd5e2.sheet.actor.character.tab-details .tab-body {
      padding-top: 106px;
    }
    /* custom dnd5e */
    .dnd5e2.sheet.actor.character.tab-details.custom-dnd5e .tab-body {
      padding-top: 0px;
    }

    .theme-light {
      .dnd5e2.vertical-tabs nav.tabs {
        /*background-color: var(--color-warm-3);*/
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

        > a.item {
          filter: brightness(0.5);

          &.active{
            filter: brightness(3) !important;
            border-bottom: 1px solid var(--color-light-1);
          }
        }
      }
      .dnd5e2.sheet.actor.vertical-tabs nav.tabs,
      .dnd5e2.compendium-browser.vertical-tabs nav.tabs {
        background-color: var(--color-warm-3);
      }
      button.crlngn-tab-scroll-btn {
        background-color: var(--color-warm-3);
        color: var(--color-light-1);
      }
    } 
  } 

  .dnd5e2.compendium-browser.vertical-tabs .window-content:has(.crlngn-tab-scroll-wrapper) {
    grid-template-rows: auto 1fr !important;
  }

  .dnd5e2 .crlngn-tab-scroll-wrapper{
    display: none;
  }

  &.crlngn-sheet-tabs {
    .dnd5e2 .crlngn-tab-scroll-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      align-self: start;
      width: 100%;
      grid-column: span 2;
      grid-row-end: 1;
      height: fit-content;
      background-color: var(--dnd5e-tabs-bg);
      
      nav.tabs {
        flex: 1;
        margin: 0 2.5rem;
      }
    }
  }

  .dnd5e2 button.crlngn-tab-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: transparent;
    border-radius: 0;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    line-height: 1;
    color: var(--dnd5e-color-gold);
    text-shadow: rgba(0,0,0,0.5) 0px 2px 4px;
    box-shadow: none;

    &:hover {
      color: var(--color-light-1);
    }
    &:hover, &:focus {
      box-shadow: none;
      border: 0;
      outline: 0;
    }

    &.crlngn-tab-scroll-prev {
      left: 0;
    }

    &.crlngn-tab-scroll-next {
      right: 0;
    }

    i {
      color: var(--dnd5e-color-gold);
      font-size: 1.2em;
    }
  }

  .dnd5e2.sheet.actor:not(.minimized) .window-header {
    margin-top: -1px;
  }
  .dnd5e2.sheet.actor.character section.window-content {
    order: 2;
    z-index: 0;
    background: var(--control-bg-color);
  }
  .dnd5e2 .items-section .items-header .item-image, 
  .dnd5e2 .items-section .item .item-image,
  .dnd5e2.sheet.actor .classes.pills-lg .class .icons img {
    border: 0;
    box-shadow: none;
  } 

  .dnd5e2 .gold-button::after, .dnd5e2.standard-form button.gold-button::after {
    inset: 1px;
  }
  
  
  .dnd5e2.sheet.actor .window-resize-handle {
    z-index: 10;
  }
  .dnd5e2.sheet:is(.item, .actor) form:is(.tab-inventory, .tab-features, .tab-spells, .tab-effects, .tab-advancement, .tab-activities) .create-child, 
  .dnd5e2.sheet:is(.item, .actor):is(.tab-inventory, .tab-features, .tab-spells, .tab-effects, .tab-advancement, .tab-activities) .create-child {
    order: 4;
    z-index: 10;
  }
  .dnd5e2.sheet.actor.character .sheet-body .main-content{
    padding: 2em 8px;
  }
  .dnd5e2.sheet.actor.character .ability-scores .ability-score::before {
    background: var(--dnd5e-sheet-bg);
    border-radius: 5px;
  }
  .dnd5e2.sheet.actor.character .ability-scores .ability-score .score {
    background: var(--dnd5e-color-gold);
    color: var(--color-light-1);
  }
  &:is(.dnd5e-theme-light, .theme-light) {
    --dnd5e-background-alt-2: rgba(244, 239, 237,0.8);
    .dnd5e2.sheet.actor.character:not(.theme-dark) .sheet-body .sidebar .card,
    .dnd5e2.sheet.actor.character:not(.theme-dark) .sheet-body .sidebar .card .card-tab.collapser,
    .dnd5e2.sheet.actor.character:not(.theme-dark) .sheet-body .sidebar .card .card-tab,
    .dnd5e2.sheet.actor.character:not(.theme-dark) .sheet-body .sidebar .card .death-tray .death-saves {
      background: var(--dnd5e-color-parchment);
      box-shadow: 0px 1px 4px var(--dnd5e-shadow-15, rgba(0,0,0,0.15));
    }
  }
  .theme-light.dnd5e2.sheet.actor.character .sheet-body .sidebar .card,
  .theme-light.dnd5e2.sheet.actor.character .sheet-body .sidebar .card .card-tab.collapser,
  .theme-light.dnd5e2.sheet.actor.character .sheet-body .sidebar .card .card-tab,
  .theme-light.dnd5e2.sheet.actor.character .sheet-body .sidebar .card .death-tray .death-saves {
    background: rgba(244, 239, 237,1);
  }


  .theme-light.dnd5e2.sheet.actor.character .pips .pip, 
  .theme-light.dnd5e2.sheet.actor.character .standard-form .pips .pip,
  .theme-light.dnd5e2.sheet.actor.character .sheet-body .sidebar .card .death-tray .death-saves .pip {
    background: #fff;
    &.filled {
      background: var(--dnd5e-color-gold);
    }
  }

  /* NPC */
  &:is(.dnd5e-theme-dark, .theme-dark) .dnd5e2.sheet.actor.npc:not(.minimized)::before, 
  .dnd5e2.sheet.actor.npc.dnd5e-theme-dark:not(.minimized)::before ,
  &:is(.dnd5e-theme-light, .theme-light) .dnd5e2.sheet.actor.npc:not(.minimized)::before, 
  .dnd5e2.sheet.actor.npc.dnd5e-theme-light:not(.minimized)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 300px;
    border-radius: 5px 5px 0 0;
    opacity: 0.2;
    background: url(/systems/dnd5e/ui/official/banner-npc-dark.webp) no-repeat top center / cover;
    mask-image: linear-gradient(to bottom, black, transparent);
    z-index: -1;
  }

  &:is(.dnd5e-theme-dark, .theme-dark) .dnd5e2.sheet.actor.npc:not(.minimized)::after, 
  .dnd5e2.sheet.actor.npc.dnd5e-theme-dark:not(.minimized)::after,
  &:is(.dnd5e-theme-light, .theme-light) .dnd5e2.sheet.actor.npc:not(.minimized)::after, 
  .dnd5e2.sheet.actor.npc.dnd5e-theme-light:not(.minimized)::after{
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to bottom, var(--color-highlights) 0%, var(--color-highlights) 200px, transparent 340px);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
  }
  .dnd5e2.sheet.actor.npc .sheet-header .portrait > img {
    border: 4px solid var(--dnd5e-color-groove);
  }

  .dnd5e2.sheet.actor.npc .sheet-body {
    order: 2;
    margin-top: 1em;
  }
  .dnd5e2.sheet.actor.npc .sheet-header .top {
    color: var(--color-light-1);
  }
  .dnd5e2.sheet.actor.npc .sheet-body .main-content{
    --sidebar-padding: 16px;
  }
  .dnd5e2.sheet.actor.npc .sheet-body .main-content .sidebar {
    gap: 1.6em;
    line-height: 1.4;

    .pills-group h3 {
      font-family: var(--crlngn-font-titles);
      font-size: var(--font-size-13);
      color: inherit;
    }
  }


  .dnd5e2.sheet.actor .pills-group .pill {
    font-weight: 500;
    font-size: var(--font-size-12);
    text-transform: none;
    border: 1px solid transparent;
  }
  .dnd5e2.sheet.actor.npc .sheet-header .legendary :is(.legact, .legres) .pip {
    --pip-size: 20px;
  }
  .dnd5e2.sheet.actor.npc .window-header > *,
  .dnd5e2.sheet.actor.npc .sheet-header .legendary > label > span.label, 
  .dnd5e2.sheet.actor.npc .sheet-header .legendary > div > span.label,
  .dnd5e2.sheet.actor.npc.editable .sheet-header .labels, 
  .dnd5e2.sheet.actor.npc.editable .sheet-header > .left {
    color: inherit;
  }
  .dnd5e2 .standard-form :is(select, input):not([type="range"]), 
  .dnd5e2.standard-form :is(select, input):not([type="range"]) {
    --input-text-color: inherit;
  }
  .dnd5e2.sheet.actor.npc > header slide-toggle {
    --slide-toggle-track-color-unchecked: var(--color-dark-bg-50);
  }


  &.crlngn-sheet-tabs {
    .dnd5e2.vertical-tabs.sheet.actor.npc nav.tabs {
      margin-top: 0;
      padding-left: 2.6em;
    }
  }

  /* group sheets */
  .dnd5e2.sheet.actor.group section.window-content .sheet-header {
    order: 0;
  }
  .dnd5e2.sheet.actor.group section.window-content .sheet-body {
    order: 2;
  }
  .dnd5e2.sheet.actor.group section.window-content .crlngn-tab-scroll-wrapper {
    order: 1;
  }
  
}

/* journal */

body.crlngn-ui .sheet.journal-entry.application .journal-sidebar .toc li.page {
  border-top: 1px solid transparent;
  border-bottom: 1px solid light-dark(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
}
body.crlngn-ui .sheet.journal-entry.application .journal-sidebar .toc li.page.active{
  border-top: 1px solid var(--color-warm-2);
  border-bottom: 1px solid var(--color-warm-2);
}
body.crlngn-ui .sheet.journal-entry .journal-header .title {
  border-color: transparent;
  background-color: light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.2));
}

body.crlngn-ui .ddb .Flowchart-Block,
body.crlngn-ui .ddb .Flowchart-Block > * {
  color: var(--color-dark-1);
}

