// ============================================================
// WINDOW CHROME — Medieval fantasy window decorations
// Targets Foundry v13 ApplicationV2 window structure
// ============================================================

// ── Outer window frame ───────────────────────────────────────
.application.oathhammer {
  border: 2px solid @color-gold;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px @color-dark,            // tight dark liner inside the gold border
    0 4px 24px rgba(0, 0, 0, 0.7),   // deep drop-shadow for depth
    inset 0 0 0 1px fade(@color-gold, 30%); // soft inner glow

  // Remove Foundry's default border/shadow so ours wins
  outline: none;

  // ── Title bar ──────────────────────────────────────────────
  > header.window-header {
    background: linear-gradient(
      to bottom,
      lighten(@color-blue, 8%) 0%,
      @color-blue           40%,
      darken(@color-blue, 10%) 100%
    );
    border-bottom: 2px solid @color-gold;
    border-radius: 4px 4px 0 0;
    padding: 4px 8px;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;

    // Decorative top highlight line
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(
        to right,
        transparent,
        fade(@color-gold, 70%) 20%,
        @color-gold 50%,
        fade(@color-gold, 70%) 80%,
        transparent
      );
      border-radius: 4px 4px 0 0;
      pointer-events: none;
    }

    // ── Window icon ──────────────────────────────────────────
    .window-icon,
    img.header-icon {
      width: 22px;
      height: 22px;
      border: 1px solid @color-gold;
      border-radius: 3px;
      object-fit: cover;
      flex-shrink: 0;
      opacity: 0.9;
    }

    // ── Window title text ────────────────────────────────────
    .window-title {
      font-family: @font-primary;   // Sherwood decorative font
      font-size: 1.05rem;
      font-weight: normal;
      color: @color-gold;
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 8px fade(@color-gold, 40%);
      letter-spacing: 0.04em;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    // ── Header control buttons (close, minimize, etc.) ───────
    .header-control,
    .close,
    button.header-control {
      color: fade(@color-gold, 70%);
      background: transparent;
      border: none;
      padding: 2px 4px;
      border-radius: 3px;
      transition: color 0.15s, background 0.15s;
      font-size: 0.9rem;
      cursor: pointer;
      flex-shrink: 0;

      &:hover {
        color: @color-gold;
        background: fade(@color-dark, 40%);
      }
    }
  }

  // ── Content area — ensure parchment bg fills properly ──────
  > .window-content {
    border-radius: 0 0 4px 4px;
  }
}