intelligent-system-design-language 0.3.21 → 0.3.23

package/out/cli/components/_isdlStyles.scss

@@ -1,1381 +1,1444 @@
-@use "./backgrounds";
-
-@mixin isdlStyles {
-
-  &.isdl-prompt,
-  .isdl-datatable {
-    .v-application__wrap {
-      min-height: 100%;
-    }
-  }
-
-  &.isdl-datatable {
-    color: black;
-    background-repeat: repeat;
-    @include backgrounds.topography;
-
-    > .window-content {
-      padding: 16px;
-    }
-
-    .custom-datatable {
-      table-layout: auto !important;
-      background: transparent;
-    }
-
-    .custom-datatable :deep(.v-data-table__table) {
-      width: auto !important;
-      table-layout: auto !important;
-      background: transparent;
-    }
-
-    .custom-datatable :deep(th) {
-      white-space: nowrap !important;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      min-width: fit-content;
-      padding: 0 8px !important;
-      background: transparent;
-    }
-
-    .custom-datatable :deep(th .v-data-table__column-header) {
-      white-space: nowrap !important;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      background: transparent;
-    }
-
-    .custom-datatable :deep(td) {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      vertical-align: middle;
-      background: transparent;
-    }
-
-    .custom-datatable :deep(tr[draggable="true"]) {
-      cursor: grab;
-
-      &:active {
-        cursor: grabbing;
-      }
-
-      &.dragging {
-        opacity: 0.5;
-      }
-    }
-
-    /* Allow text columns to grow naturally but with reasonable limits */
-    .custom-datatable :deep(td .text-caption.text-truncate) {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      min-width: 80px;
-      max-width: 300px;
-    }
-
-    .column-config-list {
-      max-height: 400px;
-      overflow-y: auto;
-    }
-
-    .column-config-item {
-      border: 1px solid transparent;
-      border-radius: 4px;
-      margin-bottom: 2px;
-      transition: all 0.2s ease;
-    }
-
-    .column-config-item:hover {
-      background-color: rgba(var(--v-theme-on-surface), 0.05);
-      border-color: rgba(var(--v-theme-primary), 0.2);
-    }
-
-    .column-config-item.dragging {
-      opacity: 0.5;
-      transform: scale(0.98);
-    }
-
-    .drag-handle:hover {
-      cursor: grabbing !important;
-    }
-  }
-
-  .v-input {
-    &:not(.document-name) {
-      .v-input__control {
-        background-color: #e9e9e9;
-      }
-    }
-  }
-
-  .v-alert__prepend {
-    padding-top: 8px;
-  }
-
-  .v-main > .v-container {
-    background-repeat: repeat;
-    @include backgrounds.topography;
-
-    &.edit-mode {
-      @include backgrounds.cogs;
-    }
-
-    &.dead {
-      @include backgrounds.skulls;
-    }
-
-    &.hideout {
-      @include backgrounds.hideout;
-    }
-
-    &.graphpaper {
-      @include backgrounds.graphpaper;
-    }
-
-    &.texture {
-      @include backgrounds.texture;
-    }
-
-    &.squares {
-      @include backgrounds.squares;
-    }
-
-    &.dominoes {
-      @include backgrounds.dominoes;
-    }
-
-    &.temple {
-      @include backgrounds.temple;
-    }
-
-    &.food {
-      @include backgrounds.food;
-    }
-
-    &.anchors {
-      @include backgrounds.anchors;
-    }
-
-    &.bubbles {
-      @include backgrounds.bubbles;
-    }
-
-    &.diamonds {
-      @include backgrounds.diamonds;
-    }
-
-    &.circuitboard {
-      @include backgrounds.circuitboard;
-    }
-
-    &.bricks {
-      @include backgrounds.bricks;
-    }
-
-    &.signal {
-      @include backgrounds.signal;
-    }
-  }
-
-  .v-container {
-    min-height: 0;
-    padding: 0;
-
-    > .v-window {
-      padding: 16px;
-      height: 100%;
-
-      > .v-window__container {
-        > .v-window-item {
-          height: 100%;
-        }
-      }
-    }
-  }
-
-  .v-slide-group__content {
-    > button {
-      width: unset;
-    }
-  }
-
-  .dt-body-center {
-    text-align: center;
-  }
-
-  .dt-buttons {
-    display: flex;
-    height: 52px;
-    align-items: center;
-  }
-
-  .dtr-control {
-    padding: 0;
-
-    > div {
-      > div {
-        display: flex;
-      }
-    }
-  }
-
-  .tabs-window {
-    height: 100%;
-
-    > .v-window__container {
-      height: 100%;
-    }
-
-    .dt-button-background {
-      display: none;
-      height: 0px;
-    }
-  }
-
-  .prose-mirror-wrapper {
-    background-color: #dddddd;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: inset 0px 0px 2px 0px black;
-    padding: 1rem;
-
-    .editor-menu {
-      color: black;
-      background: none;
-
-      i {
-        margin-right: 4px;
-        padding-left: 3px;
-      }
-    }
-
-    .toggle {
-      width: 30px;
-
-      > i {
-        padding-left: 4px;
-      }
-    }
-  }
-
-  .resource-card,
-  .tracker-card {
-    min-width: 300px;
-    margin-bottom: 1rem;
-    flex: 1;
-
-    .v-progress-linear__background {
-      opacity: 0.2;
-    }
-  }
-
-  .v-label {
-    color: black;
-  }
-
-  .v-field-label--floating {
-    font-size: 14px;
-    font-weight: bold;
-  }
-
-  .v-text-field {
-    .v-field__field {
-      input {
-        padding-left: 16px;
-      }
-    }
-  }
-
-  .v-number-input {
-    .v-field__input {
-      padding-left: 16px;
-      padding-top: 2px;
-    }
-
-    &.calculated-number {
-      .v-field__field {
-        margin-right: -36px;
-      }
-    }
-
-    .v-field__field {
-      input {
-        border: none;
-      }
-    }
-  }
-
-  .v-text-field {
-    .v-field__field {
-      input {
-        border: none;
-      }
-    }
-  }
-
-
-  .v-field__input {
-    height: 100%;
-  }
-
-  .v-field__field {
-    > input {
-      background: unset;
-    }
-  }
-
-  .v-col {
-    &.section {
-      min-width: 332px;
-    }
-  }
-
-  .v-row {
-    column-gap: 1rem;
-    height: auto;
-
-    > .v-col {
-      height: auto;
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-
-  .isdl-datatable,
-  .datatable {
-    background: none;
-
-    > .v-card-title {
-      background: none;
-    }
-
-    table {
-      background: none;
-    }
-
-    thead {
-      background: rgba(0, 0, 0, 0.5);
-      color: var(--color-text-light-highlight);
-      text-shadow: 1px 1px var(--color-shadow-dark);
-      border-bottom: 1px solid var(--color-border-dark);
-    }
-  }
-
-  .v-input {
-    flex: 1;
-    min-width: 150px;
-    max-width: 600px;
-    margin-top: 0.75rem;
-
-    &.document-name {
-      margin: 0;
-    }
-
-    > .v-input__details {
-      display: none;
-    }
-  }
-
-
-  .isdl-html {
-    min-width: 300px;
-    max-width: 600px;
-    flex: 1;
-  }
-
-  // Description tab can be full width
-  .v-tabs-window-item {
-    .isdl-html {
-      max-width: unset;
-    }
-  }
-
-  .action-btn,
-  .isdl-property,
-  .isdl-single-document,
-  .single-wide {
-    flex: 1;
-    min-width: 150px;
-    max-width: 600px;
-  }
-
-  .action-btn {
-    margin-top: 12px;
-    height: 40px;
-    flex: 1;
-    padding: 0;
-    align-self: center;
-
-    .v-btn__content {
-      justify-content: left;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .isdl-tracker,
-  .double-wide {
-    min-width: 300px;
-    max-width: 600px;
-    flex: 2;
-
-    .slim-number {
-      font-size: 0.75rem;
-    }
-
-    .tracker-inner-content {
-      > .v-progress-linear {
-        border: 1px solid black;
-      }
-    }
-  }
-
-  .isdl-single-document {
-    margin-top: 0.75rem;
-    margin-bottom: 1rem;
-    max-width: 300px;
-  }
-
-  .v-card {
-    .v-card-text {
-      column-gap: 1rem;
-    }
-  }
-
-  .calc-button:hover {
-    background: rgba(50, 50, 50, 0.7);
-  }
-
-  .v-field,
-  .v-field__field {
-    z-index: 10;
-  }
-
-  .v-btn-group {
-    min-width: 300px;
-  }
-
-  .calculator {
-    position: absolute;
-    top: 50px;
-    left: 50px;
-    background: rgba(30, 30, 30, 0.8);
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(5px);
-    z-index: 20;
-
-    input {
-      width: 100%;
-      padding: 5px;
-      font-size: 14px;
-      border-radius: 4px;
-      border: none;
-      margin-bottom: 5px;
-      background-color: #dddddd;
-    }
-
-    .calc-buttons {
-      display: flex;
-    }
-
-    button {
-      background: rgba(255, 255, 255, 0.4);
-      border: none;
-      padding: 8px;
-      font-size: 16px;
-      margin: 2px;
-      cursor: pointer;
-      border-radius: 4px;
-
-      &.active {
-        background: rgba(195, 111, 110, 0.8);
-      }
-    }
-  }
-
-  .dice-container {
-    margin-top: 0.75rem;
-  }
-
-  .isdl-dice-field {
-    .inner-input {
-      margin: 0;
-    }
-
-    .inner-content {
-      padding: 4px;
-      width: 100%;
-      align-items: center;
-    }
-
-    // Style the inner controls
-    .dice-number-input,
-    .dice-type-select {
-
-      // Remove extra padding/margins for nested plain variants
-      .v-field {
-        background: transparent !important;
-        box-shadow: none !important;
-      }
-
-      // Align input content properly
-      .v-field__input {
-        align-items: center;
-        padding: 0;
-      }
-    }
-
-    // Fine-tune number input specifically
-    .dice-number-input {
-      .v-number-input__control {
-        .v-btn {
-          min-width: 24px;
-          width: 24px;
-        }
-      }
-    }
-
-    .dice-type-select {
-      .v-field__append-inner {
-        padding: 0;
-        align-self: center;
-      }
-    }
-
-    // Styling for the container div
-    .d-flex {
-      min-height: 40px;
-    }
-  }
-
-  .attributeExp {
-    display: flex;
-    flex-direction: column;
-    border: 3px solid #333;
-    border-radius: 4px;
-    min-width: 75px;
-
-    &.no-mod {
-      max-height: 70px;
-    }
-
-    > label {
-      justify-content: center;
-      width: 100%;
-      font-weight: bold;
-    }
-
-    .v-input {
-      min-width: 100px;
-      max-width: 100%;
-      text-align: center;
-      margin: 0;
-      flex: unset;
-    }
-
-    .v-field__input {
-      padding: 0 !important;
-    }
-
-    > .mod {
-      font-size: 26px;
-      font-weight: bold;
-      margin: 10px 0;
-      text-align: center;
-    }
-
-
-  }
-
-  .dice-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(2px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s ease-in-out;
-    z-index: 10;
-
-    &.plain {
-      height: 100%;
-    }
-  }
-
-  .dice-overlay:hover {
-    background: rgba(0, 0, 0, 0.4);
-  }
-
-  .dice-roll-btn {
-    transition: transform 0.2s ease-in-out;
-  }
-
-  .dice-overlay:hover .dice-roll-btn {
-    transform: scale(1.1);
-  }
-
-  .dice-container {
-    position: relative;
-  }
-
-  // Image-cell action affordance: reveal a circular action button over the row image on hover,
-  // mirroring the attribute roll overlay. Pure CSS hover so it works per-row in a data table.
-  .isdl-image-action {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    border-radius: 4px;
-
-    .isdl-image-action-overlay {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(0, 0, 0, 0.2);
-      backdrop-filter: blur(2px);
-      border-radius: 4px;
-      opacity: 0;
-      transition: opacity 0.15s ease-in-out;
-      z-index: 10;
-    }
-
-    .isdl-image-action-btn {
-      transition: transform 0.2s ease-in-out;
-    }
-
-    &:hover .isdl-image-action-overlay {
-      opacity: 1;
-    }
-
-    &:hover .isdl-image-action-btn {
-      transform: scale(1.1);
-    }
-  }
-
-  .isdl-paperdoll {
-    min-width: 307px;
-    width: 307px;
-    max-width: 307px;
-    margin-top: 0.75rem;
-
-    .paper-doll-container {
-      position: relative;
-      height: 275px;
-      width: 275px;
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-
-    .paper-doll-slot {
-      position: absolute;
-      width: 40px;
-      height: 40px;
-      border: 2px dashed rgba(0, 0, 0, 0.5);
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  .isdl-datetime {
-    input {
-      border: none;
-      height: 40px;
-      padding-left: 16px;
-      padding-right: 0px;
-    }
-  }
-
-  .isdl-tracker {
-    height: auto;
-
-    .tracker-content {
-      width: 100%;
-      height: 100%;
-      padding: 4px;
-      min-height: 40px;
-      justify-content: center;
-
-      .tracker-inner-content {
-        > * {
-          align-self: center;
-          width: 100%;
-        }
-      }
-    }
-
-    &.dial,
-    &.clock {
-      .tracker-content {
-        min-height: 116px;
-      }
-    }
-  }
-
-  .isdl-damage-bonuses, .isdl-damage-resistances {
-    flex: 1;
-
-    .v-card-text {
-      padding: 0;
-    }
-  }
-
-  .isdl-boolean {
-    .field-label {
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-    }
-  }
-
-  .isdl-die {
-
-    .field-label {
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-    }
-  }
-
-  .isdl-string-method {
-    .field-label {
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-    }
-  }
-
-  .isdl-number {
-    .field-label {
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-    }
-  }
-
-  .isdl-string-choice {
-    .field-label {
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-    }
-  }
-
-  .isdl-parent-property-reference {
-
-    .field-label {
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-    }
-  }
-
-  .isdl-damage-track {
-    padding: 4px 0;
-
-    .damage-track-label {
-      font-size: 0.75rem;
-      font-weight: 500;
-      opacity: 0.7;
-      margin-bottom: 4px;
-    }
-
-    .damage-track-boxes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 3px;
-      margin-bottom: 4px;
-    }
-
-    .damage-box {
-      width: 24px;
-      height: 24px;
-      border: 2px solid;
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      user-select: none;
-      font-size: 0.8rem;
-      font-weight: bold;
-      line-height: 1;
-      transition: background-color 0.15s, border-color 0.15s;
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      .damage-symbol {
-        pointer-events: none;
-      }
-    }
-
-    .damage-track-legend {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      font-size: 0.7rem;
-      opacity: 0.8;
-    }
-
-    .damage-legend-item {
-      display: flex;
-      align-items: center;
-      gap: 3px;
-    }
-  }
-
-  .isdl-money-denominations {
-
-    > .v-input__control {
-      > .v-field {
-        > .v-field__append-inner {
-          position: fixed;
-          top: 8px;
-          right: 0;
-          z-index: 100;
-        }
-      }
-    }
-
-    .money-content {
-      width: 100%;
-      height: 100%;
-      padding: 4px;
-      min-height: 40px;
-      justify-content: center;
-
-      .money-inner-content {
-        > * {
-          align-self: center;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  .isdl-measured-template {
-
-    > .v-input__control {
-      > .v-field {
-        > .v-field__append-inner {
-          position: fixed;
-          top: 8px;
-          right: 0;
-          z-index: 100;
-        }
-      }
-    }
-
-    .map-icon {
-      cursor: pointer;
-      transition: transform 0.3s ease;
-      transform-origin: center;
-    }
-
-    .map-icon:hover {
-      animation: mapUnfold 0.8s ease-in-out;
-    }
-
-    @keyframes mapUnfold {
-      0% {
-        transform: scale(1) rotateY(0deg);
-      }
-
-      25% {
-        transform: scale(0.95) rotateY(-8deg) rotateX(5deg);
-      }
-
-      50% {
-        transform: scale(1.05) rotateY(3deg) rotateX(-2deg);
-      }
-
-      75% {
-        transform: scale(1.02) rotateY(-1deg) rotateX(1deg);
-      }
-
-      100% {
-        transform: scale(1) rotateY(0deg) rotateX(0deg);
-      }
-    }
-
-    /* Gentle flutter when clicked */
-    .map-icon:active {
-      animation: mapFlutter 0.5s ease-in-out;
-    }
-
-    @keyframes mapFlutter {
-
-      0%,
-      100% {
-        transform: scale(1) rotate(0deg);
-      }
-
-      25% {
-        transform: scale(1.02) rotate(-2deg) translateY(-1px);
-      }
-
-      75% {
-        transform: scale(1.02) rotate(2deg) translateY(-1px);
-      }
-    }
-
-    .template-canvas {
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      background: #f8f9fa;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .v-autocomplete {
-    .v-field__input {
-      input {
-        border: none;
-        background: none
-      }
-    }
-  }
-}
-
-/* Keyword References */
-.keyword-reference {
-  border: 2px outset whitesmoke;
-  border-radius: 2px;
-  cursor: pointer;
-  padding: 0 2px;
-  display: inline-block;
-
-  i {
-    margin-right: 4px;
-  }
-}
-
-/* Journal System Documentation Styles */
-.isdl-journal-section {
-  margin-bottom: 20px;
-
-  .isdl-journal-description {
-    margin-bottom: 12px;
-  }
-
-  .isdl-journal-info-box {
-    background: #f5f5f5;
-    padding: 8px;
-    border-radius: 4px;
-    font-size: 0.9em;
-
-    .isdl-journal-info-title {
-      font-weight: bold;
-      margin-bottom: 4px;
-    }
-
-    .isdl-journal-info-list {
-      margin: 4px 0 0 16px;
-      padding: 0;
-
-      li {
-        margin-bottom: 2px;
-      }
-    }
-  }
-}
-
-.isdl-journal-entry {
-  border-left: 4px solid #666666;
-  padding: 12px;
-  margin-bottom: 16px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 0 4px 4px 0;
-
-  .isdl-journal-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-
-    .isdl-journal-icon {
-      margin-right: 8px;
-      font-size: 1.2em;
-    }
-
-    .isdl-journal-title {
-      margin: 0 !important;
-      flex-grow: 0;
-    }
-
-    .isdl-journal-badge {
-      margin-left: auto;
-      font-size: 0.8em;
-      padding: 2px 6px;
-      border-radius: 3px;
-      background: rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .isdl-journal-description {
-    margin-bottom: 12px;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  .isdl-journal-condition {
-    margin-bottom: 12px;
-    padding: 8px;
-    background: #f0f9ff;
-    border-left: 3px solid #0ea5e9;
-    border-radius: 4px;
-
-    p {
-      margin: 0;
-    }
-
-    .isdl-journal-condition-label {
-      font-weight: bold;
-    }
-  }
-
-  .isdl-journal-technical-info {
-    margin-top: 12px;
-    padding: 8px;
-    background: #f8f9fa;
-    border-radius: 4px;
-    font-size: 0.85em;
-    color: #6b7280;
-
-    .isdl-journal-death-note {
-      color: #dc2626;
-      font-weight: bold;
-    }
-  }
-}
-
-// Specific styling for different entry types
-.isdl-keyword-entry {
-  @extend .isdl-journal-entry;
-}
-
-.isdl-damage-type-entry {
-  @extend .isdl-journal-entry;
-
-  .isdl-journal-title {
-    color: inherit; // Will use the border color
-  }
-}
-
-.isdl-status-effect-entry {
-  @extend .isdl-journal-entry;
-
-  .isdl-status-effect-image {
-    width: 32px;
-    height: 32px;
-    margin-right: 8px;
-    border-radius: 4px;
-    object-fit: cover;
-  }
-
-  .isdl-journal-title {
-    color: inherit; // Will use the border color
-  }
-}
-
-// Inventory Component Styles
-.isdl-inventory {
-  width: 100%;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  .inventory-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: 4px;
-
-    .header-content {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .inventory-label {
-      font-weight: 600;
-      font-size: 14px;
-    }
-
-    .inventory-count {
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.6);
-      font-weight: 500;
-    }
-  }
-
-  .inventory-grid-container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.02);
-    border-radius: 4px;
-    padding: 12px;
-    overflow-x: auto;
-
-    .inventory-grid {
-      display: grid;
-      gap: 8px;
-      width: 100%;
-      margin: 0 auto;
-    }
-  }
-
-  .inventory-slot {
-    position: relative;
-    border: 2px solid rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    overflow: hidden;
-    cursor: pointer;
-    background: rgba(255, 255, 255, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-    box-sizing: border-box;
-
-    &.empty {
-      background: rgba(0, 0, 0, 0.05);
-      border-style: dashed;
-      cursor: default;
-    }
-
-    &.create-slot {
-      background: rgba(76, 175, 80, 0.1);
-      border-color: rgba(76, 175, 80, 0.4);
-      border-style: dashed;
-      cursor: pointer;
-
-      .create-icon {
-        color: rgba(76, 175, 80, 0.7);
-        transition: all 0.2s ease;
-      }
-
-      &:hover {
-        background: rgba(76, 175, 80, 0.2);
-        border-color: rgba(76, 175, 80, 0.6);
-        transform: scale(1.05);
-
-        .create-icon {
-          color: rgba(76, 175, 80, 1);
-        }
-      }
-    }
-
-    &.filled {
-      cursor: grab;
-
-      &:active {
-        cursor: grabbing;
-      }
-
-      &:hover {
-        border-color: rgba(0, 0, 0, 0.5);
-        transform: scale(1.05);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        z-index: 10;
-      }
-    }
-
-    &.dragging {
-      opacity: 0.5;
-      transform: scale(0.95);
-    }
-
-    .slot-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-
-    .delete-button {
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      background: rgba(244, 67, 54, 0.9);
-      color: white;
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      opacity: 0;
-      transition: all 0.2s ease;
-      z-index: 5;
-
-      &:hover {
-        background: rgba(211, 47, 47, 1);
-        transform: scale(1.1);
-      }
-    }
-
-    &.filled:hover .delete-button {
-      opacity: 1;
-    }
-
-    .quantity-badge {
-      position: absolute;
-      bottom: 2px;
-      right: 2px;
-      background: rgba(0, 0, 0, 0.8);
-      color: white;
-      font-size: 10px;
-      font-weight: 700;
-      padding: 2px 4px;
-      border-radius: 3px;
-      line-height: 1;
-      min-width: 16px;
-      text-align: center;
-    }
-  }
-
-  .inventory-footer {
-    padding: 12px;
-    background: rgba(0, 0, 0, 0.02);
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .footer-divider {
-      margin-bottom: 4px;
-    }
-
-    .inventory-stat {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 16px;
-
-      .stat-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex-shrink: 0;
-
-        .stat-label {
-          font-weight: 600;
-          font-size: 13px;
-          white-space: nowrap;
-        }
-      }
-
-      .stat-value-container {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 4px;
-
-        .capacity-progress {
-          width: 100%;
-          max-width: 200px;
-        }
-      }
-
-      .stat-value {
-        font-weight: 700;
-        font-size: 14px;
-        white-space: nowrap;
-        text-align: right;
-
-        .stat-max {
-          font-weight: 400;
-          color: rgba(0, 0, 0, 0.6);
-        }
-      }
-    }
-
-    .money-display {
-      .stat-value {
-        color: #d4af37; // Gold color
-      }
-    }
-  }
-
-  // Inventory tooltip styles
-  .inventory-tooltip {
-    max-width: 400px;
-    padding: 4px;
-
-    .tooltip-title {
-      font-weight: 600;
-      font-size: 14px;
-      margin-bottom: 6px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-      padding-bottom: 4px;
-    }
-
-    .tooltip-description {
-      font-size: 12px;
-      line-height: 1.4;
-      opacity: 0.9;
-      margin-bottom: 6px;
-
-      // Style rich text content
-      p {
-        margin: 0;
-        margin-bottom: 4px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      strong {
-        font-weight: 600;
-      }
-
-      em {
-        font-style: italic;
-      }
-    }
-
-    .tooltip-properties {
-      margin-top: 6px;
-      padding-top: 6px;
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-      font-size: 11px;
-
-      .tooltip-property {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 2px 0;
-
-        .property-label {
-          opacity: 0.8;
-          margin-right: 8px;
-        }
-
-        .property-value {
-          font-weight: 600;
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
+@use "./backgrounds";
+
+@mixin isdlStyles {
+
+  &.isdl-prompt,
+  .isdl-datatable {
+    .v-application__wrap {
+      min-height: 100%;
+    }
+  }
+
+  &.isdl-datatable {
+    color: black;
+    background-repeat: repeat;
+    @include backgrounds.topography;
+
+    > .window-content {
+      padding: 16px;
+    }
+
+    .custom-datatable {
+      table-layout: auto !important;
+      background: transparent;
+    }
+
+    .custom-datatable :deep(.v-data-table__table) {
+      width: auto !important;
+      table-layout: auto !important;
+      background: transparent;
+    }
+
+    .custom-datatable :deep(th) {
+      white-space: nowrap !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: fit-content;
+      padding: 0 8px !important;
+      background: transparent;
+    }
+
+    .custom-datatable :deep(th .v-data-table__column-header) {
+      white-space: nowrap !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background: transparent;
+    }
+
+    .custom-datatable :deep(td) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+      background: transparent;
+    }
+
+    .custom-datatable :deep(tr[draggable="true"]) {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+
+      &.dragging {
+        opacity: 0.5;
+      }
+    }
+
+    /* Allow text columns to grow naturally but with reasonable limits */
+    .custom-datatable :deep(td .text-caption.text-truncate) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 80px;
+      max-width: 300px;
+    }
+
+    .column-config-list {
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .column-config-item {
+      border: 1px solid transparent;
+      border-radius: 4px;
+      margin-bottom: 2px;
+      transition: all 0.2s ease;
+    }
+
+    .column-config-item:hover {
+      background-color: rgba(var(--v-theme-on-surface), 0.05);
+      border-color: rgba(var(--v-theme-primary), 0.2);
+    }
+
+    .column-config-item.dragging {
+      opacity: 0.5;
+      transform: scale(0.98);
+    }
+
+    .drag-handle:hover {
+      cursor: grabbing !important;
+    }
+  }
+
+  .v-input {
+    &:not(.document-name) {
+      .v-input__control {
+        background-color: #e9e9e9;
+      }
+    }
+  }
+
+  .v-alert__prepend {
+    padding-top: 8px;
+  }
+
+  .v-main > .v-container {
+    background-repeat: repeat;
+    @include backgrounds.topography;
+
+    &.edit-mode {
+      @include backgrounds.cogs;
+    }
+
+    &.dead {
+      @include backgrounds.skulls;
+    }
+
+    &.hideout {
+      @include backgrounds.hideout;
+    }
+
+    &.graphpaper {
+      @include backgrounds.graphpaper;
+    }
+
+    &.texture {
+      @include backgrounds.texture;
+    }
+
+    &.squares {
+      @include backgrounds.squares;
+    }
+
+    &.dominoes {
+      @include backgrounds.dominoes;
+    }
+
+    &.temple {
+      @include backgrounds.temple;
+    }
+
+    &.food {
+      @include backgrounds.food;
+    }
+
+    &.anchors {
+      @include backgrounds.anchors;
+    }
+
+    &.bubbles {
+      @include backgrounds.bubbles;
+    }
+
+    &.diamonds {
+      @include backgrounds.diamonds;
+    }
+
+    &.circuitboard {
+      @include backgrounds.circuitboard;
+    }
+
+    &.bricks {
+      @include backgrounds.bricks;
+    }
+
+    &.signal {
+      @include backgrounds.signal;
+    }
+  }
+
+  .v-container {
+    min-height: 0;
+    padding: 0;
+
+    > .v-window {
+      padding: 16px;
+      height: 100%;
+
+      > .v-window__container {
+        > .v-window-item {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .v-slide-group__content {
+    > button {
+      width: unset;
+    }
+  }
+
+  .dt-body-center {
+    text-align: center;
+  }
+
+  .dt-buttons {
+    display: flex;
+    height: 52px;
+    align-items: center;
+  }
+
+  .dtr-control {
+    padding: 0;
+
+    > div {
+      > div {
+        display: flex;
+      }
+    }
+  }
+
+  .tabs-window {
+    height: 100%;
+
+    > .v-window__container {
+      height: 100%;
+    }
+
+    .dt-button-background {
+      display: none;
+      height: 0px;
+    }
+  }
+
+  .prose-mirror-wrapper {
+    background-color: #dddddd;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: inset 0px 0px 2px 0px black;
+    padding: 1rem;
+
+    .editor-menu {
+      color: black;
+      background: none;
+
+      i {
+        margin-right: 4px;
+        padding-left: 3px;
+      }
+    }
+
+    .toggle {
+      width: 30px;
+
+      > i {
+        padding-left: 4px;
+      }
+    }
+  }
+
+  .resource-card,
+  .tracker-card {
+    min-width: 300px;
+    margin-bottom: 1rem;
+    flex: 1;
+
+    .v-progress-linear__background {
+      opacity: 0.2;
+    }
+  }
+
+  .v-label {
+    color: black;
+  }
+
+  .v-field-label--floating {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .v-text-field {
+    .v-field__field {
+      input {
+        padding-left: 16px;
+      }
+    }
+  }
+
+  .v-number-input {
+    .v-field__input {
+      padding-left: 16px;
+      padding-top: 2px;
+    }
+
+    &.calculated-number {
+      .v-field__field {
+        margin-right: -36px;
+      }
+    }
+
+    .v-field__field {
+      input {
+        border: none;
+      }
+    }
+  }
+
+  .v-text-field {
+    .v-field__field {
+      input {
+        border: none;
+      }
+    }
+  }
+
+
+  .v-field__input {
+    height: 100%;
+  }
+
+  .v-field__field {
+    > input {
+      background: unset;
+    }
+  }
+
+  .v-col {
+    &.section {
+      min-width: 332px;
+    }
+  }
+
+  .v-row {
+    column-gap: 1rem;
+    height: auto;
+
+    > .v-col {
+      height: auto;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  .isdl-datatable,
+  .datatable {
+    background: none;
+
+    > .v-card-title {
+      background: none;
+    }
+
+    table {
+      background: none;
+    }
+
+    thead {
+      background: rgba(0, 0, 0, 0.5);
+      color: var(--color-text-light-highlight);
+      text-shadow: 1px 1px var(--color-shadow-dark);
+      border-bottom: 1px solid var(--color-border-dark);
+    }
+  }
+
+  .v-input {
+    flex: 1;
+    min-width: 150px;
+    max-width: 600px;
+    margin-top: 0.75rem;
+
+    &.document-name {
+      margin: 0;
+    }
+
+    > .v-input__details {
+      display: none;
+    }
+  }
+
+
+  .isdl-html {
+    min-width: 300px;
+    max-width: 600px;
+    flex: 1;
+  }
+
+  // Description tab can be full width
+  .v-tabs-window-item {
+    .isdl-html {
+      max-width: unset;
+    }
+  }
+
+  .action-btn,
+  .isdl-property,
+  .isdl-single-document,
+  .single-wide {
+    flex: 1;
+    min-width: 150px;
+    max-width: 600px;
+  }
+
+  .action-btn {
+    margin-top: 12px;
+    height: 40px;
+    flex: 1;
+    padding: 0;
+    align-self: center;
+
+    .v-btn__content {
+      justify-content: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .isdl-tracker,
+  .double-wide {
+    min-width: 300px;
+    max-width: 600px;
+    flex: 2;
+
+    .slim-number {
+      font-size: 0.75rem;
+    }
+
+    .tracker-inner-content {
+      > .v-progress-linear {
+        border: 1px solid black;
+      }
+    }
+  }
+
+  .isdl-single-document {
+    margin-top: 0.75rem;
+    margin-bottom: 1rem;
+    max-width: 300px;
+  }
+
+  .v-card {
+    .v-card-text {
+      column-gap: 1rem;
+    }
+  }
+
+  .calc-button:hover {
+    background: rgba(50, 50, 50, 0.7);
+  }
+
+  .v-field,
+  .v-field__field {
+    z-index: 10;
+  }
+
+  .v-btn-group {
+    min-width: 300px;
+  }
+
+  .calculator {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: rgba(30, 30, 30, 0.8);
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    z-index: 20;
+
+    input {
+      width: 100%;
+      padding: 5px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: none;
+      margin-bottom: 5px;
+      background-color: #dddddd;
+    }
+
+    .calc-buttons {
+      display: flex;
+    }
+
+    button {
+      background: rgba(255, 255, 255, 0.4);
+      border: none;
+      padding: 8px;
+      font-size: 16px;
+      margin: 2px;
+      cursor: pointer;
+      border-radius: 4px;
+
+      &.active {
+        background: rgba(195, 111, 110, 0.8);
+      }
+    }
+  }
+
+  .dice-container {
+    margin-top: 0.75rem;
+  }
+
+  .isdl-dice-field {
+    .inner-input {
+      margin: 0;
+    }
+
+    .inner-content {
+      padding: 4px;
+      width: 100%;
+      align-items: center;
+    }
+
+    // Style the inner controls
+    .dice-number-input,
+    .dice-type-select {
+
+      // Remove extra padding/margins for nested plain variants
+      .v-field {
+        background: transparent !important;
+        box-shadow: none !important;
+      }
+
+      // Align input content properly
+      .v-field__input {
+        align-items: center;
+        padding: 0;
+      }
+    }
+
+    // Fine-tune number input specifically
+    .dice-number-input {
+      .v-number-input__control {
+        .v-btn {
+          min-width: 24px;
+          width: 24px;
+        }
+      }
+    }
+
+    .dice-type-select {
+      .v-field__append-inner {
+        padding: 0;
+        align-self: center;
+      }
+    }
+
+    // Styling for the container div
+    .d-flex {
+      min-height: 40px;
+    }
+  }
+
+  .attributeExp {
+    display: flex;
+    flex-direction: column;
+    border: 3px solid #333;
+    border-radius: 4px;
+    min-width: 75px;
+
+    &.no-mod {
+      max-height: 70px;
+    }
+
+    > label {
+      justify-content: center;
+      width: 100%;
+      font-weight: bold;
+    }
+
+    .v-input {
+      min-width: 100px;
+      max-width: 100%;
+      text-align: center;
+      margin: 0;
+      flex: unset;
+    }
+
+    .v-field__input {
+      padding: 0 !important;
+    }
+
+    > .mod {
+      font-size: 26px;
+      font-weight: bold;
+      margin: 10px 0;
+      text-align: center;
+    }
+
+
+  }
+
+  .dice-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease-in-out;
+    z-index: 10;
+
+    &.plain {
+      height: 100%;
+    }
+  }
+
+  .dice-overlay:hover {
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .dice-roll-btn {
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .dice-overlay:hover .dice-roll-btn {
+    transform: scale(1.1);
+  }
+
+  .dice-container {
+    position: relative;
+  }
+
+  // Image-cell action affordance: reveal a circular action button over the row image on hover,
+  // mirroring the attribute roll overlay. Pure CSS hover so it works per-row in a data table.
+  .isdl-image-action {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    border-radius: 4px;
+
+    .isdl-image-action-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.2);
+      backdrop-filter: blur(2px);
+      border-radius: 4px;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out;
+      z-index: 10;
+    }
+
+    .isdl-image-action-btn {
+      transition: transform 0.2s ease-in-out;
+    }
+
+    &:hover .isdl-image-action-overlay {
+      opacity: 1;
+    }
+
+    &:hover .isdl-image-action-btn {
+      transform: scale(1.1);
+    }
+  }
+
+  .isdl-paperdoll {
+    min-width: 307px;
+    width: 307px;
+    max-width: 307px;
+    margin-top: 0.75rem;
+
+    .paper-doll-container {
+      position: relative;
+      height: 275px;
+      width: 275px;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+
+    .paper-doll-slot {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      border: 2px dashed rgba(0, 0, 0, 0.5);
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .isdl-datetime {
+    input {
+      border: none;
+      height: 40px;
+      padding-left: 16px;
+      padding-right: 0px;
+    }
+  }
+
+  .isdl-tracker {
+    height: auto;
+
+    .tracker-content {
+      width: 100%;
+      height: 100%;
+      padding: 4px;
+      min-height: 40px;
+      justify-content: center;
+
+      .tracker-inner-content {
+        > * {
+          align-self: center;
+          width: 100%;
+        }
+      }
+    }
+
+    &.dial,
+    &.clock {
+      .tracker-content {
+        min-height: 116px;
+      }
+    }
+  }
+
+  .isdl-damage-bonuses, .isdl-damage-resistances {
+    flex: 1;
+
+    .v-card-text {
+      padding: 0;
+    }
+  }
+
+  .isdl-boolean {
+    .field-label {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+    }
+  }
+
+  .isdl-die {
+
+    .field-label {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+    }
+  }
+
+  .isdl-string-method {
+    .field-label {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+    }
+  }
+
+  .isdl-number {
+    .field-label {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+    }
+  }
+
+  .isdl-string-choice {
+    .field-label {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+    }
+  }
+
+  .isdl-parent-property-reference {
+
+    .field-label {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+    }
+  }
+
+  .isdl-damage-track {
+    padding: 4px 0;
+
+    .damage-track-label {
+      font-size: 0.75rem;
+      font-weight: 500;
+      opacity: 0.7;
+      margin-bottom: 4px;
+    }
+
+    .damage-track-boxes {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 3px;
+      margin-bottom: 4px;
+    }
+
+    .damage-box {
+      width: 24px;
+      height: 24px;
+      border: 2px solid;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      user-select: none;
+      font-size: 0.8rem;
+      font-weight: bold;
+      line-height: 1;
+      transition: background-color 0.15s, border-color 0.15s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      .damage-symbol {
+        pointer-events: none;
+      }
+    }
+
+    .damage-track-legend {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      font-size: 0.7rem;
+      opacity: 0.8;
+    }
+
+    .damage-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+  }
+
+  .isdl-money-denominations {
+
+    > .v-input__control {
+      > .v-field {
+        > .v-field__append-inner {
+          position: fixed;
+          top: 8px;
+          right: 0;
+          z-index: 100;
+        }
+      }
+    }
+
+    .money-content {
+      width: 100%;
+      height: 100%;
+      padding: 4px;
+      min-height: 40px;
+      justify-content: center;
+
+      .money-inner-content {
+        > * {
+          align-self: center;
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .isdl-measured-template {
+
+    > .v-input__control {
+      > .v-field {
+        > .v-field__append-inner {
+          position: fixed;
+          top: 8px;
+          right: 0;
+          z-index: 100;
+        }
+      }
+    }
+
+    .map-icon {
+      cursor: pointer;
+      transition: transform 0.3s ease;
+      transform-origin: center;
+    }
+
+    .map-icon:hover {
+      animation: mapUnfold 0.8s ease-in-out;
+    }
+
+    @keyframes mapUnfold {
+      0% {
+        transform: scale(1) rotateY(0deg);
+      }
+
+      25% {
+        transform: scale(0.95) rotateY(-8deg) rotateX(5deg);
+      }
+
+      50% {
+        transform: scale(1.05) rotateY(3deg) rotateX(-2deg);
+      }
+
+      75% {
+        transform: scale(1.02) rotateY(-1deg) rotateX(1deg);
+      }
+
+      100% {
+        transform: scale(1) rotateY(0deg) rotateX(0deg);
+      }
+    }
+
+    /* Gentle flutter when clicked */
+    .map-icon:active {
+      animation: mapFlutter 0.5s ease-in-out;
+    }
+
+    @keyframes mapFlutter {
+
+      0%,
+      100% {
+        transform: scale(1) rotate(0deg);
+      }
+
+      25% {
+        transform: scale(1.02) rotate(-2deg) translateY(-1px);
+      }
+
+      75% {
+        transform: scale(1.02) rotate(2deg) translateY(-1px);
+      }
+    }
+
+    .template-canvas {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: #f8f9fa;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .v-autocomplete {
+    .v-field__input {
+      input {
+        border: none;
+        background: none
+      }
+    }
+  }
+
+  /* Roll Visualizer -- compact distribution preview for a dice formula */
+  .isdl-roll-visualizer {
+    display: flex;
+    flex-direction: column;
+    /* Floor so the graph is always meaningfully visible; can still grow taller to
+       fill a stretched cell (see the svg flex rule below). */
+    min-height: 140px;
+    margin: 8px 4px;
+    padding: 6px 10px;
+    /* Solid surface so the preview reads as a panel rather than blending into the
+       textured sheet background. */
+    background-color: rgb(var(--v-theme-surface));
+
+    .isdl-roll-visualizer__header {
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 8px;
+    }
+
+    .isdl-roll-visualizer__label {
+      font-weight: 600;
+      font-size: 0.85rem;
+    }
+
+    .isdl-roll-visualizer__avg {
+      font-weight: 700;
+      font-size: 1.1rem;
+      line-height: 1;
+    }
+
+    /* The sparkline svg renders as a direct child (no .v-sparkline class). Let it grow
+       to fill any extra card height -- e.g. when stretched to match a taller sibling --
+       rather than sitting at a fixed small height. preserveAspectRatio="none" on the
+       sparkline lets it stretch vertically instead of letterboxing. */
+    > svg {
+      flex: 1 1 auto;
+      width: 100%;
+      min-height: 48px;
+    }
+
+    .isdl-roll-visualizer__empty {
+      flex: 1 1 auto;
+      opacity: 0.7;
+      padding: 8px 0;
+    }
+
+    .isdl-roll-visualizer__footer {
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      opacity: 0.85;
+      gap: 8px;
+    }
+
+    .isdl-roll-visualizer__approx {
+      opacity: 0.7;
+      font-style: italic;
+    }
+  }
+}
+
+/* Keyword References */
+.keyword-reference {
+  border: 2px outset whitesmoke;
+  border-radius: 2px;
+  cursor: pointer;
+  padding: 0 2px;
+  display: inline-block;
+
+  i {
+    margin-right: 4px;
+  }
+}
+
+/* Journal System Documentation Styles */
+.isdl-journal-section {
+  margin-bottom: 20px;
+
+  .isdl-journal-description {
+    margin-bottom: 12px;
+  }
+
+  .isdl-journal-info-box {
+    background: #f5f5f5;
+    padding: 8px;
+    border-radius: 4px;
+    font-size: 0.9em;
+
+    .isdl-journal-info-title {
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+
+    .isdl-journal-info-list {
+      margin: 4px 0 0 16px;
+      padding: 0;
+
+      li {
+        margin-bottom: 2px;
+      }
+    }
+  }
+}
+
+.isdl-journal-entry {
+  border-left: 4px solid #666666;
+  padding: 12px;
+  margin-bottom: 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0 4px 4px 0;
+
+  .isdl-journal-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+
+    .isdl-journal-icon {
+      margin-right: 8px;
+      font-size: 1.2em;
+    }
+
+    .isdl-journal-title {
+      margin: 0 !important;
+      flex-grow: 0;
+    }
+
+    .isdl-journal-badge {
+      margin-left: auto;
+      font-size: 0.8em;
+      padding: 2px 6px;
+      border-radius: 3px;
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .isdl-journal-description {
+    margin-bottom: 12px;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .isdl-journal-condition {
+    margin-bottom: 12px;
+    padding: 8px;
+    background: #f0f9ff;
+    border-left: 3px solid #0ea5e9;
+    border-radius: 4px;
+
+    p {
+      margin: 0;
+    }
+
+    .isdl-journal-condition-label {
+      font-weight: bold;
+    }
+  }
+
+  .isdl-journal-technical-info {
+    margin-top: 12px;
+    padding: 8px;
+    background: #f8f9fa;
+    border-radius: 4px;
+    font-size: 0.85em;
+    color: #6b7280;
+
+    .isdl-journal-death-note {
+      color: #dc2626;
+      font-weight: bold;
+    }
+  }
+}
+
+// Specific styling for different entry types
+.isdl-keyword-entry {
+  @extend .isdl-journal-entry;
+}
+
+.isdl-damage-type-entry {
+  @extend .isdl-journal-entry;
+
+  .isdl-journal-title {
+    color: inherit; // Will use the border color
+  }
+}
+
+.isdl-status-effect-entry {
+  @extend .isdl-journal-entry;
+
+  .isdl-status-effect-image {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    border-radius: 4px;
+    object-fit: cover;
+  }
+
+  .isdl-journal-title {
+    color: inherit; // Will use the border color
+  }
+}
+
+// Inventory Component Styles
+.isdl-inventory {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .inventory-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+
+    .header-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .inventory-label {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .inventory-count {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.6);
+      font-weight: 500;
+    }
+  }
+
+  .inventory-grid-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 4px;
+    padding: 12px;
+    overflow-x: auto;
+
+    .inventory-grid {
+      display: grid;
+      gap: 8px;
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  .inventory-slot {
+    position: relative;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+
+    &.empty {
+      background: rgba(0, 0, 0, 0.05);
+      border-style: dashed;
+      cursor: default;
+    }
+
+    &.create-slot {
+      background: rgba(76, 175, 80, 0.1);
+      border-color: rgba(76, 175, 80, 0.4);
+      border-style: dashed;
+      cursor: pointer;
+
+      .create-icon {
+        color: rgba(76, 175, 80, 0.7);
+        transition: all 0.2s ease;
+      }
+
+      &:hover {
+        background: rgba(76, 175, 80, 0.2);
+        border-color: rgba(76, 175, 80, 0.6);
+        transform: scale(1.05);
+
+        .create-icon {
+          color: rgba(76, 175, 80, 1);
+        }
+      }
+    }
+
+    &.filled {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+
+      &:hover {
+        border-color: rgba(0, 0, 0, 0.5);
+        transform: scale(1.05);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+      }
+    }
+
+    &.dragging {
+      opacity: 0.5;
+      transform: scale(0.95);
+    }
+
+    .slot-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .delete-button {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      background: rgba(244, 67, 54, 0.9);
+      color: white;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      opacity: 0;
+      transition: all 0.2s ease;
+      z-index: 5;
+
+      &:hover {
+        background: rgba(211, 47, 47, 1);
+        transform: scale(1.1);
+      }
+    }
+
+    &.filled:hover .delete-button {
+      opacity: 1;
+    }
+
+    .quantity-badge {
+      position: absolute;
+      bottom: 2px;
+      right: 2px;
+      background: rgba(0, 0, 0, 0.8);
+      color: white;
+      font-size: 10px;
+      font-weight: 700;
+      padding: 2px 4px;
+      border-radius: 3px;
+      line-height: 1;
+      min-width: 16px;
+      text-align: center;
+    }
+  }
+
+  .inventory-footer {
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .footer-divider {
+      margin-bottom: 4px;
+    }
+
+    .inventory-stat {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+
+      .stat-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+
+        .stat-label {
+          font-weight: 600;
+          font-size: 13px;
+          white-space: nowrap;
+        }
+      }
+
+      .stat-value-container {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 4px;
+
+        .capacity-progress {
+          width: 100%;
+          max-width: 200px;
+        }
+      }
+
+      .stat-value {
+        font-weight: 700;
+        font-size: 14px;
+        white-space: nowrap;
+        text-align: right;
+
+        .stat-max {
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+    }
+
+    .money-display {
+      .stat-value {
+        color: #d4af37; // Gold color
+      }
+    }
+  }
+
+  // Inventory tooltip styles
+  .inventory-tooltip {
+    max-width: 400px;
+    padding: 4px;
+
+    .tooltip-title {
+      font-weight: 600;
+      font-size: 14px;
+      margin-bottom: 6px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+      padding-bottom: 4px;
+    }
+
+    .tooltip-description {
+      font-size: 12px;
+      line-height: 1.4;
+      opacity: 0.9;
+      margin-bottom: 6px;
+
+      // Style rich text content
+      p {
+        margin: 0;
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      strong {
+        font-weight: 600;
+      }
+
+      em {
+        font-style: italic;
+      }
+    }
+
+    .tooltip-properties {
+      margin-top: 6px;
+      padding-top: 6px;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      font-size: 11px;
+
+      .tooltip-property {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 2px 0;
+
+        .property-label {
+          opacity: 0.8;
+          margin-right: 8px;
+        }
+
+        .property-value {
+          font-weight: 600;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}