fvtt-malefices/less/actor-sheet.less

/* ===================================================================
   AppV2 Actor Sheets
   =================================================================== */

/* NOTE: DocumentSheetV2 uses tag:"form" — the APPLICATION ROOT is the <form>.
   The DOM is: form.application > section.window-content > section.editable > ...
   There is NO <form> child inside window-content. */

.fvtt-malefices.actor {

  /* window-content: background and remove Foundry's default padding.
     Foundry AppV2 already sets: display:flex flex-flow:column overflow:hidden */
  .window-content {
    padding: 0;
    background: @bg-sheet;
    color: @color-text;
    font-size: 0.8rem;
  }

  /* All sections inside actor fill their flex container and form a flex column.
     This covers: section.editable (template root) and section.sheet-body. */
  section {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* sheet-body: scroll container instead of clipping */
  section.sheet-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0.5rem;
  }

  /* Override legacy fixed 210px height — shrink to fit content */
  .sheet-header {
    flex: 0 0 auto;
    overflow: visible;
  }

  /* Override legacy "height: 100%" on .tab divs so their content
     can overflow sheet-body and trigger the scrollbar;
     hide all tabs, show only the active one */
  .tab[data-tab] {
    height: auto;
    display: none;

    &.active {
      display: block;
    }
  }

  /* Tab navigation */
  nav.tabs {
    display: flex;
    flex: 0 0 auto;
    font-family: @font-rivanna;
    font-size: @tab-font-size;
    font-weight: bold;
    height: @tab-height;
    margin: 0;
    padding: 0 0 0 0.25rem;
    text-align: center;
    text-transform: uppercase;
    line-height: @tab-height;
    border-top: 0 none;
    border-bottom: 0 none;
    background-color: @color-tab-bg;
    color: @color-tab-text;
    gap: 0.25rem;

    a.item {
      position: relative;
      padding: 0 0.5rem;
      color: @color-tab-text;
      font-family: @font-rivanna;
      font-size: @tab-font-size;
      text-decoration: none;
      line-height: @tab-height;

      &:hover {
        text-shadow: 1px 0px 0px @color-accent;
      }

      &.active {
        text-shadow: 1px 0px 0px @color-accent;
        text-decoration: underline;
      }
    }
  }

  /* Force dark text on section titles and labels inside actor sheet body
     (overrides Foundry core heading/label colors from the default dark theme) */
  section.sheet-body {
    h1, h2, h3, h4, label, span, a {
      color: @color-text;
    }
  }

  /* ── Belle Époque aesthetic improvements ─────────────────────────── */
  @be-bordeaux:    #5a0a14;
  @be-gold:        #8b6914;
  @be-gold-border: rgba(139, 105, 20, 0.45);
  @be-sepia:       #3d2b1f;

  // Sheet header — portrait with gold border, charname input styled
  .sheet-header {
    .profile-img {
      border: 2px solid @be-gold-border;
      border-radius: 2px;
      box-shadow: 1px 1px 4px rgba(0,0,0,0.25);
    }

    h1.charname input {
      font-family: @font-rivanna, serif;
      font-size: 1.3rem;
      color: @be-bordeaux;
      border-bottom: 1px solid @be-gold-border;
      border-top: none;
      border-left: none;
      border-right: none;
      background: transparent;
      text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    }

    input[type="text"] {
      border-bottom: 1px solid @be-gold-border;
      border-top: none;
      border-left: none;
      border-right: none;
      background: transparent;
      &:focus {
        outline: none;
        border-bottom-color: @be-bordeaux;
        box-shadow: none;
      }
    }
  }

  // Section title rows (Attributs, Armes, Équipements, etc.)
  .items-title-bg {
    background: linear-gradient(to right, rgba(90,10,20,0.15), rgba(139,105,20,0.10)) !important;
    border-bottom: 1px solid @be-gold-border;
    border-top: 1px solid @be-gold-border;
    margin-top: 6px;

    .items-title-text {
      font-family: @font-rivanna, serif;
      font-size: 0.9rem;
      color: @be-bordeaux !important;
      letter-spacing: 0.03em;
    }
  }

  // Roll links — attributs and weapons
  a.roll-attribut, a.roll-arme {
    color: @be-sepia !important;
    font-weight: 600;
    transition: color 0.12s;

    i { color: fade(@be-gold, 80%); margin-left: 0.2rem; font-size: 0.75em; }

    &:hover {
      color: @be-bordeaux !important;
      text-decoration: none;
      i { color: @be-bordeaux; }
    }
  }

  // Attribute value inputs
  input.item-field-label-short, input.item-field-label-medium {
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: @be-bordeaux;
    border: 1px solid @be-gold-border;
    border-radius: 2px;
    background: rgba(255,252,240,0.6);
    &:focus {
      outline: none;
      border-color: @be-bordeaux;
      box-shadow: 0 0 3px rgba(90,10,20,0.2);
    }
  }

  // Item rows — zebra effect with Belle Époque tones
  .alternate-list {
    .list-item:nth-child(even) {
      background: rgba(139,105,20,0.07);
    }
    .list-item:nth-child(odd) {
      background: rgba(61,43,31,0.04);
    }
    .list-item:hover {
      background: rgba(139,105,20,0.15) !important;
    }
  }

  // Item icon — small gold border
  .sheet-competence-img {
    border: 1px solid @be-gold-border;
    border-radius: 1px;
  }

  // Item control icons (edit/delete)
  .item-controls a.item-control {
    color: fade(@be-sepia, 60%);
    &:hover { color: @be-bordeaux; }
  }

  // Biography tab inputs
  .tab.biodata {
    input[type="text"] {
      border-bottom: 1px solid @be-gold-border;
      border-top: none;
      border-left: none;
      border-right: none;
      background: transparent;
      color: @be-sepia;
      &:focus {
        outline: none;
        border-bottom-color: @be-bordeaux;
      }
    }

    label.item-name-label-medium {
      font-weight: 600;
      color: @be-sepia !important;
    }
  }

}