Second round de corrections et améliorations

2026-04-19 18:55:34 +02:00
parent 783d4a16e6
commit d62d14c1da
33 changed files with 2225 additions and 390 deletions
--- a/src/sass/components/_character.sass
+++ b/src/sass/components/_character.sass
@@ -51,6 +51,7 @@
 		font-weight: 600
 		font-style: italic
 		text-align: center
+		color: var(--mgt2-color-form)
 		position: relative
 		& > a
 			&.roll
@@ -122,7 +123,7 @@
 			background-color: transparent
 			text-align: center
 			font-size: 1.5rem
-			width: 2rem
+			width: 3rem
 			height: 2rem
 			border: none
 			outline: none
@@ -183,13 +184,14 @@ ul
 		float: left
 		margin: 0
 		padding: 0
-		color: var(--mgt2-color-primary-light)
+		color: var(--mgt2-color-form)
 	input
 		display: block
 		border: none
 		font-weight: bold
 		font-family: "Roboto Condensed", sans-serif
 		background-color: #fff
+		color: var(--mgt2-color-form)
 		font-size: 0.8rem
 		border: 1px solid #fff
 		&:hover
@@ -203,6 +205,7 @@ ul
 		font-size: 0.7rem
 		text-transform: uppercase
 		text-wrap: nowrap
+		color: var(--mgt2-color-form)
 		i
 			margin-right: 0.25rem
 .character-body
@@ -236,7 +239,7 @@ ul
 		display: flex
 		margin: 0
 		padding: 0
-		color: #4b4a44
+		color: var(--mgt2-color-form)
 		justify-content: space-between
 		align-items: center
 		width: 100%
--- a/src/sass/components/_chat-sidebar.sass
+++ b/src/sass/components/_chat-sidebar.sass
@@ -1,47 +1,331 @@
-.chat-sidebar,
-.mgt2-buttons button
-	background: rgba(0, 0, 0, 0.1)
-	border: 1px solid var(--color-border-light-2)
-	border-radius: 3px
-	box-shadow: 0 0 2px #FFF inset
-//.chat-message
-	// &.message
-	// 	color: #0A0405
-	// 	background-color: #fff
-	// 	background-image: none
-.dice-formula,
-.dice-total
-	background-color: #fff
-.mgt2-buttons
-	display: flex
-	justify-content: center
-	align-items: center
-	flex-wrap: nowrap
-	color: #0A0405
-	margin-top: 5px
-	button
-		i
-			font-size: 1.1rem
-			padding: 0
-			margin: 0
-.roll-info 
-	display: flex
-	flex-direction: column
-.roll-type-group
-	flex-direction: row
-	flex-wrap: wrap
-	justify-content: space-between
-	display: flex
-.roll-type-name
-	font-size: 11px
-	text-transform: uppercase
-	color: #515151
-.roll-object-name 
-	font-weight: 400
-	font-size: 1.4rem
-.roll-success
-	font-size: 1.2rem
-	font-weight: bold
-	text-transform: uppercase
-	margin-top: 1rem
-	text-align: center
+// ─── MGT2 Chat Roll Cards ──────────────────────────────────────────────────
+
+// Light theme for ALL chat messages - matching character sheet
+li.chat-message
+    background: #ffffff !important
+    border: 1px solid #ccbbbb !important
+    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important
+    color: #0A0405
+    padding: 0 !important
+
+    .message-header
+        background: #0A0405
+        border-bottom: 3px solid #EE4050
+        padding: 4px 10px
+
+        .message-sender
+            color: #EE4050
+            font-family: 'Barlow Condensed', sans-serif
+            font-weight: 700
+            font-size: 0.75rem
+            text-transform: uppercase
+            letter-spacing: 1.5px
+            margin: 0
+
+        .message-timestamp
+            color: #888888
+            font-size: 0.68rem
+
+        .message-delete i
+            color: #888888
+
+        &:hover .message-delete i
+            color: #EE4050
+
+    // Plain Foundry roll cards (without .mgt2-chat-roll wrapper)
+    .message-content > .dice-roll
+        background: #fdf8f8
+        padding: 6px 12px
+
+        .dice-formula
+            background: #f5eeee
+            border: 1px solid #ddc8c8
+            border-radius: 3px
+            color: #664444
+            font-size: 0.78rem
+            padding: 2px 10px
+            text-align: center
+            font-family: 'Barlow Condensed', sans-serif
+            display: inline-block
+            margin: 0 auto 4px auto
+
+        .dice-result
+            display: flex
+            flex-direction: column
+            align-items: center
+            gap: 3px
+
+        h4.dice-total
+            font-family: 'Barlow Condensed', sans-serif
+            font-size: 2.2rem !important
+            font-weight: 900
+            color: #0A0405 !important
+            margin: 2px 0
+            line-height: 1
+            text-align: center
+            background: transparent !important
+            width: 100% !important
+            display: block !important
+
+        .dice-tooltip
+            .part-header
+                background: #f5eeee
+                padding: 2px 8px
+                display: flex
+                justify-content: space-between
+                .part-formula, .part-total
+                    color: #EE4050
+                    font-weight: 700
+                    font-size: 0.78rem
+            .dice-rolls
+                display: flex
+                flex-wrap: wrap
+                justify-content: center
+                gap: 4px
+                padding: 6px 8px
+                list-style: none
+                margin: 0
+            .roll.die
+                display: flex
+                align-items: center
+                justify-content: center
+                width: 26px
+                height: 26px
+                background: #f5eeee
+                border: 1.5px solid #ddc8c8
+                border-radius: 4px
+                color: #3a2020
+                font-weight: 700
+                font-size: 0.9rem
+
+// ─── Inner roll card structure ────────────────────────────────────────────
+
+.mgt2-chat-roll
+    font-family: 'Barlow Condensed', sans-serif
+
+    // ── Header: characteristic name + roll type ──
+    .mgt2-roll-header
+        background: #0A0405 !important
+        border-left: 4px solid #EE4050 !important
+        padding: 5px 10px 4px 10px !important
+
+        .mgt2-roll-char-name
+            display: block
+            color: #ffffff
+            font-size: 1.2rem
+            font-weight: 800
+            text-transform: uppercase
+            letter-spacing: 1px
+            line-height: 1
+
+        .mgt2-roll-meta
+            display: flex
+            align-items: center
+            gap: 6px
+            margin-top: 2px
+
+        .mgt2-roll-type
+            color: #EE4050
+            font-size: 0.68rem
+            font-weight: 700
+            text-transform: uppercase
+            letter-spacing: 2px
+
+        .mgt2-roll-sep
+            color: #888888
+
+        .mgt2-roll-difficulty
+            color: #bbbbbb
+            font-size: 0.68rem
+            text-transform: uppercase
+            letter-spacing: 1px
+
+    // ── Modifier line ──
+    .mgt2-roll-modifier
+        background: #f5eeee
+        border-bottom: 1px solid #e8dada
+        padding: 3px 14px
+        color: #664444
+        font-size: 0.8rem
+
+    .mgt2-roll-modifiers
+        display: flex
+        gap: 6px
+        flex-wrap: wrap
+        background: #f5eeee
+        border-bottom: 1px solid #e8dada
+        padding: 3px 14px
+
+        .mgt2-roll-mod-tag
+            color: #664444
+            font-size: 0.8rem
+
+    // ── Dice block (Foundry .dice-roll structure preserved for tooltip click) ──
+    .dice-roll
+        background: #fdf8f8
+        padding: 4px 10px
+        cursor: pointer
+
+        .dice-flavor
+            color: #888
+            font-size: 0.73rem
+            text-align: center
+            margin-bottom: 3px
+
+        .dice-result
+            display: flex
+            flex-direction: column
+            align-items: center
+            gap: 3px
+
+        .dice-formula
+            background: #f5eeee
+            border: 1px solid #ddc8c8
+            border-radius: 3px
+            color: #664444
+            font-size: 0.78rem
+            padding: 2px 14px
+            font-family: 'DM Sans', sans-serif
+            text-align: center
+
+        // Tooltip (individual dice — shown on click by Foundry)
+        .dice-tooltip
+            width: 100%
+
+            .wrapper
+                background: transparent
+
+            .tooltip-part
+                background: #fdf8f8
+                border: 1px solid #e8dada
+                border-radius: 4px
+                margin-bottom: 6px
+                overflow: hidden
+
+            .part-header
+                background: #f5eeee
+                padding: 3px 8px
+
+                .part-formula, .part-total
+                    color: #EE4050
+                    font-weight: 700
+                    font-size: 0.8rem
+
+            .dice-rolls
+                display: flex
+                flex-wrap: wrap
+                justify-content: center
+                gap: 5px
+                padding: 8px 10px
+                list-style: none
+                margin: 0
+
+            .roll.die
+                display: flex
+                align-items: center
+                justify-content: center
+                width: 30px
+                height: 30px
+                background: #f5eeee
+                border: 1.5px solid #ddc8c8
+                border-radius: 5px
+                color: #3a2020
+                font-weight: 700
+                font-size: 1rem
+                font-family: 'Barlow Condensed', sans-serif
+
+                &.max
+                    border-color: #EE4050
+                    color: #EE4050
+                    background: #fde8ea
+                    box-shadow: 0 0 8px rgba(238,64,80,0.2)
+
+                &.min
+                    border-color: #ccbbbb
+                    color: #999999
+
+        // ── Total: prominent number ──
+        h4.dice-total
+            font-size: 1.6rem !important
+            font-weight: 900
+            color: #0A0405 !important
+            margin: 3px 0 2px 0
+            line-height: 1
+            font-family: 'Barlow Condensed', sans-serif
+            text-align: center
+            text-shadow: none
+            background: #f5eeee !important
+            border: 1px solid #ddc8c8 !important
+            border-radius: 4px !important
+            padding: 2px 14px !important
+            width: auto !important
+            display: inline-block !important
+            min-width: 60px
+
+            &.success
+                color: #1a8840 !important
+                background: rgba(82,232,122,0.1) !important
+                border-color: rgba(26,136,64,0.35) !important
+
+            &.failure
+                color: #EE4050 !important
+                background: rgba(238,64,80,0.07) !important
+                border-color: rgba(238,64,80,0.3) !important
+
+    // ── Outcome badge ──
+    .mgt2-outcome
+        text-align: center
+        font-size: 0.75rem
+        font-weight: 700
+        text-transform: uppercase
+        letter-spacing: 2px
+        padding: 3px 10px
+
+        i
+            margin-right: 5px
+
+        &.is-success
+            background: rgba(26,136,64,0.08)
+            color: #1a8840
+            border-top: 1px solid rgba(26,136,64,0.2)
+
+        &.is-failure
+            background: rgba(238,64,80,0.07)
+            color: #EE4050
+            border-top: 1px solid rgba(238,64,80,0.2)
+
+    // ── Action buttons ──
+    .mgt2-buttons
+        display: flex
+        justify-content: center
+        flex-wrap: wrap
+        gap: 4px
+        padding: 5px 10px
+        background: #f5eeee
+        border-top: 1px solid #ddc8c8
+
+        button
+            background: #ffffff
+            border: 1px solid #ccbbbb
+            color: #3a2020
+            border-radius: 3px
+            padding: 4px 14px
+            font-family: 'Barlow Condensed', sans-serif
+            font-size: 0.78rem
+            font-weight: 700
+            text-transform: uppercase
+            letter-spacing: 1px
+            cursor: pointer
+            transition: background 0.15s ease, box-shadow 0.15s ease
+            box-shadow: none
+
+            i
+                font-size: 1rem
+                padding: 0
+                margin: 0
+
+            &:hover
+                background: #EE4050
+                border-color: #EE4050
+                color: #fff
+                box-shadow: 0 0 8px rgba(238,64,80,0.25)
--- a/src/sass/components/_creature.sass
+++ b/src/sass/components/_creature.sass
@@ -0,0 +1,201 @@
+// ─────────────────────────────────────────────────
+//  Creature Sheet Styles
+// ─────────────────────────────────────────────────
+
+.creature-sheet
+
+  // ── Header ────────────────────────────────────────
+  .creature-header
+    display: flex
+    flex-direction: row
+    align-items: flex-start
+    gap: 0.75rem
+    padding: 0.5rem 0.75rem 0.5rem
+    background: var(--mgt2-bgcolor-form)
+    border-bottom: 2px solid var(--mgt2-color-primary)
+
+  .creature-header-img
+    flex: 0 0 80px
+    img.profile
+      width: 80px
+      height: 80px
+      object-fit: cover
+      border: 2px solid var(--mgt2-color-primary)
+      border-radius: 4px
+      cursor: pointer
+
+  .creature-header-body
+    flex: 1
+    display: flex
+    flex-direction: column
+    gap: 0.4rem
+
+  .creature-name
+    font-family: "Barlow Condensed", sans-serif
+    font-size: 1.6rem
+    font-weight: 700
+    font-style: italic
+    color: var(--mgt2-color-form)
+    background: transparent
+    border: none
+    border-bottom: 1px solid var(--mgt2-color-primary)
+    width: 100%
+    padding: 0
+    &:focus
+      outline: none
+      border-bottom-color: var(--mgt2-color-secondary)
+
+  // ── Stat boxes ────────────────────────────────────
+  .creature-stats-row
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    gap: 0.5rem
+
+  .creature-stat
+    display: flex
+    flex-direction: column
+    align-items: center
+    background: var(--mgt2-bgcolor-primary)
+    border: 1px solid var(--mgt2-color-primary)
+    border-radius: 4px
+    padding: 2px 6px
+    min-width: 4rem
+
+    label
+      font-family: "Barlow Condensed", sans-serif
+      font-size: 0.7rem
+      font-weight: 700
+      text-transform: uppercase
+      color: var(--mgt2-color-primary)
+      line-height: 1.2
+
+    .creature-stat-value
+      display: flex
+      align-items: center
+      gap: 2px
+      input
+        width: 2.5rem
+        text-align: center
+        background: transparent
+        border: none
+        color: var(--mgt2-bgcolor-form)
+        font-size: 1rem
+        font-weight: 700
+        padding: 0
+        &:focus
+          outline: none
+          border-bottom: 1px solid var(--mgt2-color-primary)
+      .stat-max
+        width: 2.5rem
+      .stat-unit
+        font-size: 0.7rem
+        color: var(--mgt2-bgcolor-form)
+        opacity: 0.7
+      .stat-readonly
+        font-size: 1rem
+        font-weight: 700
+        color: var(--mgt2-bgcolor-form)
+        min-width: 2.5rem
+        text-align: center
+
+  // ── Behavior row ──────────────────────────────────
+  .creature-behavior-row
+    display: flex
+    flex-direction: row
+    align-items: center
+    gap: 0.5rem
+    flex-wrap: wrap
+
+    label
+      font-size: 0.75rem
+      text-transform: uppercase
+      color: var(--mgt2-color-primary)
+      font-weight: 700
+
+    .behavior-select
+      background: var(--mgt2-bgcolor-form)
+      color: var(--mgt2-color-form)
+      border: 1px solid var(--mgt2-color-primary)
+      border-radius: 3px
+      font-size: 0.85rem
+      padding: 1px 4px
+
+    .behavior-sep
+      color: var(--mgt2-color-form)
+      opacity: 0.5
+
+  .creature-size-badge
+    margin-left: auto
+    font-size: 0.75rem
+    font-style: italic
+    color: var(--mgt2-color-secondary)
+    background: var(--mgt2-bgcolor-primary)
+    border: 1px solid var(--mgt2-color-secondary)
+    border-radius: 3px
+    padding: 1px 6px
+
+  // ── Body / Tabs ────────────────────────────────────
+  .creature-body
+    flex: 1
+    overflow-y: auto
+    padding: 0.5rem 0.75rem
+
+    .tab
+      display: none
+      &.active
+        display: block
+
+  // ── Info tab ──────────────────────────────────────
+  .creature-info-tab
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
+
+  .creature-description
+    width: 100%
+    background: var(--mgt2-bgcolor-form)
+    color: var(--mgt2-color-form)
+    border: 1px solid var(--mgt2-color-primary)
+    border-radius: 3px
+    padding: 4px
+    resize: vertical
+    font-size: 0.9rem
+
+  // ── Damage formula ────────────────────────────────
+  .creature-damage
+    .damage-formula
+      font-family: "Barlow Condensed", sans-serif
+      font-weight: 700
+      color: var(--mgt2-color-primary)
+      font-size: 1rem
+
+  .trait-name
+    font-weight: 600
+    color: var(--mgt2-color-form)
+
+  .trait-value
+    font-style: italic
+    color: var(--mgt2-color-secondary)
+
+// ─────────────────────────────────────────────────
+//  Chat card – creature skill roll
+// ─────────────────────────────────────────────────
+.mgt2-creature-roll
+
+  .mgt2-roll-header
+    display: flex
+    flex-direction: row
+    align-items: center
+    gap: 0.6rem
+
+  .creature-chat-img
+    width: 36px
+    height: 36px
+    object-fit: cover
+    border: 1px solid var(--mgt2-color-primary)
+    border-radius: 3px
+    flex: 0 0 36px
+
+  .mgt2-roll-header-text
+    flex: 1
--- a/src/sass/components/_dialog.sass
+++ b/src/sass/components/_dialog.sass
@@ -1,4 +1,150 @@
-.mgt2 
-	.dialog-button 
-		color: var(--mgt2-color-primary)
-		background-color: var(--mgt2-bgcolor-primary) !important 
+.mgt2
+    .dialog-button
+        color: var(--mgt2-color-primary)
+        background-color: var(--mgt2-bgcolor-primary) !important
+
+// ─── MGT2 Roll Dialog (DialogV2) ──────────────────────────────────────────────
+.mgt2-roll-dialog
+    background: #ffffff !important
+    border: 1px solid #ccbbbb !important
+    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important
+    border-radius: 6px !important
+    overflow: hidden !important
+
+    .window-header
+        background: #0A0405 !important
+        border-bottom: 3px solid #EE4050 !important
+        padding: 10px 14px !important
+        position: relative !important
+        .window-title
+            color: #ffffff !important
+            font-family: 'Barlow Condensed', sans-serif !important
+            font-weight: 700 !important
+            font-size: 1rem !important
+            text-transform: uppercase !important
+            letter-spacing: 2px !important
+
+    .window-content
+        background: #ffffff !important
+        color: #0A0405 !important
+        padding: 0 !important
+
+        .dialog-content, .standard-form
+            background: #ffffff !important
+            padding: 14px 18px 10px !important
+
+        // Form group rows
+        .form-group
+            display: flex !important
+            align-items: center !important
+            gap: 10px !important
+            margin-bottom: 8px !important
+            padding: 4px 0 !important
+            border-bottom: 1px solid #e8e0e0 !important
+
+            &:last-child
+                border-bottom: none !important
+
+            label
+                color: #0A0405 !important
+                font-family: 'Barlow Condensed', sans-serif !important
+                font-weight: 700 !important
+                font-size: 0.72rem !important
+                text-transform: uppercase !important
+                letter-spacing: 1.2px !important
+                flex: 0 0 110px !important
+                line-height: 1.2 !important
+
+            select, input[type="number"], input[type="text"]
+                flex: 1 !important
+                background: #ffffff !important
+                border: 1px solid #ccbbbb !important
+                color: #0A0405 !important
+                border-radius: 3px !important
+                padding: 5px 10px !important
+                font-family: 'Barlow Condensed', sans-serif !important
+                font-size: 0.9rem !important
+                transition: border-color 150ms ease !important
+
+                &:focus
+                    border-color: #EE4050 !important
+                    outline: none !important
+                    background: rgba(238,64,80,0.04) !important
+
+                option
+                    background: #ffffff !important
+                    color: #0A0405 !important
+
+        // Fieldset / ÉTATS section
+        fieldset, .form-fields
+            background: #fdf8f8 !important
+            border: 1px solid #e0c8c8 !important
+            border-radius: 5px !important
+            padding: 10px 14px !important
+            margin-bottom: 8px !important
+
+            legend
+                color: #EE4050 !important
+                font-family: 'Barlow Condensed', sans-serif !important
+                font-weight: 700 !important
+                font-size: 0.72rem !important
+                text-transform: uppercase !important
+                letter-spacing: 2px !important
+                padding: 0 8px !important
+                background: #ffffff !important
+
+            // Checkboxes inside fieldset
+            .form-group
+                border-bottom: none !important
+                margin-bottom: 4px !important
+                padding: 2px 0 !important
+
+            label
+                color: #3a2020 !important
+                flex: 1 !important
+
+            input[type="checkbox"]
+                accent-color: #EE4050 !important
+                width: 14px !important
+                height: 14px !important
+
+    // Footer buttons
+    .dialog-buttons, .form-footer, footer
+        background: #f5eeee !important
+        border-top: 2px solid #EE4050 !important
+        padding: 10px 14px !important
+        display: flex !important
+        gap: 8px !important
+        justify-content: center !important
+
+        button
+            flex: 1 !important
+            max-width: 140px !important
+            background: #ffffff !important
+            border: 1px solid #ccbbbb !important
+            color: #3a2020 !important
+            border-radius: 4px !important
+            padding: 7px 14px !important
+            font-family: 'Barlow Condensed', sans-serif !important
+            font-size: 0.82rem !important
+            font-weight: 700 !important
+            text-transform: uppercase !important
+            letter-spacing: 1.5px !important
+            cursor: pointer !important
+            transition: all 150ms ease !important
+
+            &:hover
+                background: #fdf0f0 !important
+                border-color: #EE4050 !important
+                color: #EE4050 !important
+
+            // Primary action button (DialogV2: data-action="submit", autofocus)
+            &.default, &[data-action="submit"], &[autofocus]
+                background: #EE4050 !important
+                border-color: #EE4050 !important
+                color: #fff !important
+                box-shadow: 0 2px 12px rgba(238,64,80,0.3) !important
+
+                &:hover
+                    background: #ff5060 !important
+                    box-shadow: 0 4px 18px rgba(238,64,80,0.45) !important
--- a/src/sass/components/_forms.sass
+++ b/src/sass/components/_forms.sass
@@ -50,6 +50,7 @@
 			font-size: 13px
 		&.field-name
 			background-color: var(--mgt2-input-bgcolor)
+			color: var(--mgt2-color-primary)
 			font-size: 2rem
 			border: none
 			font-weight: 700
@@ -58,6 +59,7 @@
 			padding: 0
 		&.field-item-name
 			background-color: var(--mgt2-input-bgcolor)
+			color: var(--mgt2-color-primary)
 			height: auto
 			font-size: 2rem
 			font-weight: 700
--- a/src/sass/components/_item.sass
+++ b/src/sass/components/_item.sass
@@ -5,7 +5,7 @@
 .itemsheet-header
 	display: flex
 	background-color: var(--mgt2-bgcolor-primary)
-	color: red
+	color: var(--mgt2-color-primary)
 	padding: 0.5rem
 	align-items: center
 	flex: 0 0 2rem
--- a/src/sass/components/_tab-sidebar.sass
+++ b/src/sass/components/_tab-sidebar.sass
@@ -1,40 +1,108 @@
-.mgt2
-	.sheet-sidebar
-		.item
-			margin: 0 1rem
+// ── Overflow fixes: allow sidebar nav to protrude OUTSIDE the window frame ──
+// All ancestors of nav.sheet-sidebar need overflow:visible so absolute-positioned
+// nav (left: 100% of character-body) can extend to the right of the window border.
+// Layered !important beats Foundry's unlayered overflow:hidden per CSS cascade spec.

-	nav[data-group="sidebar"].tabs
-		position: absolute
-		left: 100%
-		top: 172px
-		display: flex
-		flex-direction: column
-		z-index: -1
-		& > .item
-			height: 40px
-			position: relative
-			display: flex
-			justify-content: end
-			align-items: center
-			padding-right: 0.75rem
-			background: var(--mgt2-bgcolor-primary)
-			color: var(--mgt2-color-primary)
-			border: 1px solid transparent
-			font-size: 1rem
-			transition: all 250ms ease
-			margin-left: 0
-			&.active
-				text-shadow: none
-				margin: 0
-				border-color: var(--mgt2-color-primary)
-				&::after
-					border-left: none
-					inset: 0.25rem 0.25rem 0.25rem 0
-			&::after
-				content: ""
-				position: absolute
-				inset: 0.25rem
-				border: 1px solid var(--mgt2-color-primary)
-				pointer-events: none
-			i
-				margin-left: 0.8rem
+.mgt2.character, .mgt2.creature
+    overflow: visible !important
+    > .window-content
+        overflow: visible !important
+    .editable, .locked
+        overflow: visible !important
+
+.mgt2.character .character-body
+    position: relative !important
+    overflow: visible !important
+
+.mgt2.creature .creature-body
+    position: relative !important
+    overflow: visible !important
+
+// ── Vertical sidebar tab navigation (outside window, right side) ──
+.mgt2
+    nav.sheet-sidebar.tabs
+        position: absolute !important
+        left: 100% !important
+        top: 0 !important
+        bottom: 0 !important
+        width: 62px !important
+        flex: none !important
+        display: flex !important
+        flex-direction: column
+        // Rich dark gradient matching MGT2 theme
+        background: linear-gradient(180deg, #1e0507 0%, #110304 40%, #0a0202 100%)
+        border-top: 1px solid rgba(238,64,80,0.35)
+        border-right: 1px solid rgba(238,64,80,0.25)
+        border-bottom: 1px solid rgba(238,64,80,0.2)
+        border-left: 3px solid var(--mgt2-color-primary)
+        border-radius: 0 10px 10px 0
+        box-shadow: 6px 0 24px rgba(0,0,0,0.75), 0 0 0 0 transparent, inset 1px 0 16px rgba(238,64,80,0.05)
+        z-index: 10
+        overflow: hidden !important
+        padding: 2px 0
+
+        & > .item
+            position: relative
+            display: flex !important
+            flex-direction: column !important
+            justify-content: center !important
+            align-items: center !important
+            gap: 4px !important
+            min-height: 54px
+            padding: 8px 4px
+            color: rgba(238,64,80,0.45)
+            border-bottom: 1px solid rgba(238,64,80,0.07)
+            cursor: pointer
+            transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease
+            user-select: none
+            text-decoration: none !important
+
+            // Left accent bar
+            &::before
+                content: ''
+                position: absolute
+                left: -3px
+                top: 18%
+                bottom: 18%
+                width: 3px
+                background: transparent
+                border-radius: 0 3px 3px 0
+                transition: background 180ms ease, top 180ms ease, bottom 180ms ease, box-shadow 180ms ease
+
+            &:hover
+                color: var(--mgt2-color-primary)
+                background: rgba(238,64,80,0.07)
+                &::before
+                    background: rgba(238,64,80,0.5)
+                .tab-label
+                    color: rgba(238,64,80,0.7)
+
+            &.active
+                color: var(--mgt2-color-primary)
+                background: linear-gradient(90deg, rgba(238,64,80,0.16) 0%, rgba(238,64,80,0.03) 100%)
+                box-shadow: inset 0 1px 0 rgba(238,64,80,0.12), inset 0 -1px 0 rgba(238,64,80,0.08)
+                &::before
+                    background: var(--mgt2-color-primary)
+                    top: 10%
+                    bottom: 10%
+                    box-shadow: 0 0 10px rgba(238,64,80,0.7), 0 0 20px rgba(238,64,80,0.3)
+                i
+                    filter: drop-shadow(0 0 5px rgba(238,64,80,0.55))
+                .tab-label
+                    color: rgba(238,64,80,0.85)
+
+            i
+                font-size: 1.15rem
+                pointer-events: none
+                line-height: 1
+
+            .tab-label
+                font-family: 'Barlow Condensed', sans-serif
+                font-size: 0.52rem
+                font-weight: 700
+                text-transform: uppercase
+                letter-spacing: 0.8px
+                color: rgba(238,64,80,0.3)
+                line-height: 1
+                pointer-events: none
+                transition: color 180ms ease
--- a/src/sass/components/_tables.sass
+++ b/src/sass/components/_tables.sass
@@ -63,7 +63,7 @@
 			&:not(:last-child)
 				margin-right: 0.4rem
 	i
-		color: black
+		color: var(--mgt2-color-form)
 	a[data-roll]
 		margin-right: 0.5rem
 .heading
--- a/src/sass/mgt2.sass
+++ b/src/sass/mgt2.sass
@@ -12,4 +12,5 @@

@import 'components/_tabs'
@import 'components/_tab-sidebar'
-@import 'components/_tables'
+@import 'components/_tables'
+@import 'components/_creature'
--- a/src/sass/utils/_window.sass
+++ b/src/sass/utils/_window.sass
@@ -11,6 +11,7 @@
 	&.sheet
 		.window-content
 			background: var(--mgt2-bgcolor-form)
+			color: var(--mgt2-color-form)
 			padding: 0

 .nopad