roll20-character-sheets/D6pp_Wild_West/d6ppww.css

:root {
  /* Font */
  --font-main: 'Georgia', serif; /**/

  /* Main Text Colors */
  --text-main: #3B2F2F; /**/
  --text-secondary: #4b2e0f;
  --text-hint: #666; /**/
  --text-table-header: #3B2F2F; /**/
  --text-readonly: #222; /**/

  /* Background Colors */
  --bg-sheet-default: #deb887; /**/
  --bg-editable-text: #f5f0e6; /**/
  --bg-table-cell: #f5f0e6; /**/
  --bg-table-header: #deb887; /**/
  --bg-container: #f5f0e6; /**/
  --bg-readonly: #c2b195; /**/

  /* Border Colors */
  --border-main: #8B4513; /**/

  /* Table/Interface Specific */
  --grid-line: #8B4513; /**/

  /* Buttons */
  --button-bg: #8B4513; /**/
  --button-hover-bg: #A0522D; /**/
  --button-text: #fff; /**/
  --button-border: #654321; /**/
  --button-text-shadow: 1px 1px 1px #000;
  --button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /**/

  /* Controls */
  --radio-button: #8B4513; /**/
  --checkbox: #8B4513; /**/

  /* Shadows */
  --shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /**/

  /* Roll Template - NOT SUPPORTED
  --shadow-rolltemplate: 2px 2px 6px #888;
  --bg-rolltemplate-error: #fbeaea;
  --bg-rolltemplate: #4b2e0f;
  --border-rolltemplate: #654321;
  --text-rolltemplate-error: #8b0000;
  --border-rolltemplate-error: #a94442;
  */
}

.sheet-d6pp-sheet {
  background-color: var(--bg-sheet-default);
  padding: 20px;
  border: 4px solid var(--border-main);
  border-radius: 12px;
  box-sizing: border-box;
  margin: 10px;
}

.sheet-d6pp-sheet p {
  font-family: var(--font-main);
  color: var(--text-main);
  font-size: 1.1em;
}

body {
  font-family: var(--font-main);
}

.sheet-rolltemplate-d6plus,
.sheet-rolltemplate-d6plus-openend,
.sheet-rolltemplate-d6plus-mishap,
.sheet-rolltemplate-d6plus-initiative,
.sheet-rolltemplate-d6damage {
  font-family: 'Georgia', serif; /* var(--font-main) */
  background-color: #f5f0e6; /* var(--bg-rolltemplate) */
  border: 2px solid #654321; /* var(--border-rolltemplate) */
  box-shadow: 2px 2px 6px #888; /* var(--shadow-rolltemplate) */
  color: #3B2F2F; /* var(--text-main) */
  padding: 8px;
  border-radius: 6px;
}

.sheet-rolltemplate-d6plus div,
.sheet-rolltemplate-d6plus-openend div,
.sheet-rolltemplate-d6plus-mishap div,
.sheet-rolltemplate-d6plus-initiative div,
.sheet-rolltemplate-d6damage div {
  margin: 4px 0;
  font-size: 1.1em;
}

.sheet-rolltemplate-d6plus-openend .inlinerollresult,
.sheet-rolltemplate-d6plus-mishap .inlinerollresult,
.sheet-rolltemplate-d6plus-initiative .inlinerollresult,
.sheet-rolltemplate-d6damage .inlinerollresult,
.sheet-rolltemplate-d6plus .inlinerollresult {
  background-color: #f5f0e6; /* var(--bg-rolltemplate) */
  color: #3B2F2F; /* var(--text-main) */
  border: 1px solid #654321; /* var(--border-rolltemplate) */
  font-weight: bold;
  padding: 0 4px;
  border-radius: 3px;
}

.sheet-rolltemplate-d6plus h3,
.sheet-rolltemplate-d6plus-openend h3,
.sheet-rolltemplate-d6plus-mishap h3,
.sheet-rolltemplate-d6plus-initiative h3,
.sheet-rolltemplate-d6damage h3 {
  font-size: 1.5em;
  color: #3B2F2F; /* var(--text-main) */
  margin: 0 0 6px 0;
  border-bottom: 1px solid #654321; /* var(--border-rolltemplate) */
}

.sheet-rolltemplate-d6plus-error {
  background-color: #fbeaea; /* var(--bg-rolltemplate-error) */
  color: #8b0000; /* var(--text-rolltemplate-error); */
  box-shadow: 2px 2px 6px #888; /* var(--shadow-rolltemplate) */
  border: 2px solid #a94442; /* var(--border-rolltemplate-error) */
  padding: 10px;

  border-radius: 6px;
}

.sheet-rolltemplate-d6plus-error h3 {
  font-size: 1.4em;
  margin: 0 0 6px 0;
  color: #8b0000; /* var(--text-rolltemplate-error); */
  text-align: center;
}

.sheet-rolltemplate-d6plus-error div {
  font-size: 1em;
  text-align: center;
}

.skill-section-collapsible {
  margin-bottom: 15px;
}

/* Arrow behavior */
.skill-toggle-label::before {
  content: "▶ ";
  display: inline-block;
  transition: transform 0.2s ease;
}

input[type="checkbox"].skill-toggle:checked + .skill-toggle-label::before {
  content: "▼ ";
}

/* Hide/show the collapsible content */
input[type="checkbox"].skill-toggle:not(:checked) + .skill-toggle-label + .skill-group-content {
  display: none;
}

.skill-group-content {
  padding: 12px;
  border: 2px solid var(--border-main);
  border-radius: 8px;
  background-color: var(--bg-container);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}

.section-has-special-ability,
.section-has-skills {
  display: none;
}

input[name="attr_skills_active"][value="1"] ~ .section-has-skills {
  display: block;
}

input[name="attr_special_ability_active"][value="1"] ~ .section-has-special-ability {
  display: block;
}

.melee-grid-one-row,
.melee-grid-two-rows {
  display: none;
}

input[name="attr_second_melee_attack_active"][value="0"] ~ .melee-grid-one-row {
  display: block;
}
input[name="attr_second_melee_attack_active"][value="1"] ~ .melee-grid-two-rows {
  display: block;
}

.section-has-special-ability {
  display: none;
}

input[name="attr_special_ability_active"][value="1"] ~ .section-has-special-ability {
  display: block;
}

.skill-roll-buttons .activate-skill-button,
.skill-roll-buttons .undo-activate-skill-button,
.skill-roll-buttons .roll-skill-button,
.skill-roll-buttons .activated-label,
.skill-roll-buttons .unactivated-label {
  display: none;
}

input[name$="_active"][value="0"] ~ .skill-roll-buttons .unactivated-label {
  display: inline-block;
}

input[name$="_active"][value="1"] ~ .skill-roll-buttons .activate-skill-button {
  display: inline-block;
}

input[name$="_active"][value="2"] ~ .skill-roll-buttons .undo-activate-skill-button {
  display: inline-block;
}

input[name$="_active"][value="3"] ~ .skill-roll-buttons .roll-skill-button,
input[name$="_active"][value="3"] ~ .skill-roll-buttons .activated-label {
  display: inline-block;
}

.sheet-skill-select-row {
  display: flex;
  align-items: baseline; /* Aligns to text baseline for consistent text flow */
  gap: 16px;
}

.sheet-skill-select-row select,
.sheet-skill-select-row span,
.sheet-skill-select-row button {
  line-height: 1.4;
  margin: 0;
  padding: 4px 6px;
  vertical-align: middle;
}

.small-hint {
  display: block;
  font-size: 0.8em;
  color: var(--text-hint);
  margin-top: 0px;
  margin-bottom: 4px;
  font-style: italic;
}

/* Always hide both buttons */
.enter-spend-mode,
.commit-spend-mode {
  display: none;
}

/* Show Enter button when spend_mode is 0 */
input[name="attr_spend_mode"][value="0"] ~ .spend-mode .enter-spend-mode {
  display: inline-block;
}

/* Show Commit button when spend_mode is 1 */
input[name="attr_spend_mode"][value="1"] ~ .spend-mode .commit-spend-mode {
  display: inline-block;
}

.enter-spend-mode,
.commit-spend-mode {
  width: 150px;
  text-align: center;
}

/* Hide all by default */
.preaction-normal,
.preaction-ignorepain,
.preaction-disengage {
  display: none;
}

/* Normal if neither special is active */
input[name="attr_preaction_ignorepain_active"][value="0"]
~ input[name="attr_preaction_disengage_active"][value="0"]
~ .preaction-normal {
  display: block;
}

/* Show ignorepain dropdown */
input[name="attr_preaction_ignorepain_active"][value="1"]
~ .preaction-ignorepain {
  display: block;
}

/* Show disengage dropdown */
input[name="attr_preaction_disengage_active"][value="1"]
~ .preaction-disengage {
  display: block;
}

.reaction-normal,
.reaction-medic,
.reaction-fixit {
  display: none;
}

/* Normal if neither special is active */
input[name="attr_reaction_fixit_active"][value="0"]
~ input[name="attr_reaction_medic_active"][value="0"]
~ .reaction-normal {
  display: block;
}

/* Show disengage dropdown */
input[name="attr_reaction_medic_active"][value="1"]
~ .reaction-medic {
  display: block;
}

input[name="attr_reaction_fixit_active"][value="1"]
~ .reaction-fixit {
  display: block;
}

.training-ready-toggle:not(:checked) ~ .next-step-button {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.sheet-ready-toggle:not(:checked) ~ .final-step-button {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.d6pp-checkbox {
  display: inline-flex;
  align-items: center;
  margin-left: 10px; /* Adjust spacing as needed */
  font-weight: bold;
}

.d6pp-checkbox input {
  margin-right: 5px;
}

.inline-checkbox-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 5px;
}

.inline-checkbox-label input[type="checkbox"] {
  margin: 0;
  transform: scale(1.2); /* Optional */
}

select {
  width: auto;
  max-width: 150px;
}

.sheet-attack-section {
  display: none;
  transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

/* Show only the matching section when the radio is checked */
input[type="radio"][name="attr_attack_mode"][value="firearms"]:checked ~ .sheet-firearms,
input[type="radio"][name="attr_attack_mode"][value="ranged"]:checked ~ .sheet-ranged,
input[type="radio"][name="attr_attack_mode"][value="melee"]:checked ~ .sheet-melee,
input[type="radio"][name="attr_attack_mode_q"][value="firearms"]:checked ~ .sheet-firearms,
input[type="radio"][name="attr_attack_mode_q"][value="ranged"]:checked ~ .sheet-ranged,
input[type="radio"][name="attr_attack_mode_q"][value="melee"]:checked ~ .sheet-melee  {
  display: block;
}

button[type="action"].sheet-d6pp,
button[type="roll"].sheet-d6pp,
button[type="action"].roll-skill-button,
button[type="action"].undo-activate-skill-button,
button[type="action"].activate-skill-button,
button[type="action"].enter-spend-mode,
button[type="action"].commit-spend-mode,
button.repcontrol_add,
button.repcontrol_edit,
button[type="action"] {
  background: var(--button-bg);
  color: var(--button-text);
  border: 2px solid var(--button-border);
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 8px;
  text-shadow: var(--button-text-shadow);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button[type="action"].sheet-d6pp:hover,
button[type="roll"].sheet-d6pp:hover,
button[type="action"].activate-skill-button:hover,
button[type="action"].undo-activate-skill-button:hover,
button[type="action"].roll-skill-button:hover,
button[type="action"].enter-spend-mode:hover,
button.repcontrol_add:hover,
button.repcontrol_edit:hover,
button[type="action"].commit-spend-mode:hover {
  background: var(--button-hover-bg);
  transform: scale(1.05);
  color: var(--button-text);
}

.sheet-condition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  gap: 4px 12px;
  margin-bottom: 10px;
}

.sheet-condition-grid label {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
}

textarea.sheet-d6pp {
  resize: vertical;
  width: 100%;
  line-height: 1.4;

}

.textarea-ten-lines {
  height: auto !important;
  min-height: calc(1.4em * 10 + 8px); /* Matches 10 rows */
}

.textarea-two-lines {
  height: auto !important;
  min-height: calc(1.4em * 2 + 8px); /* Matches 2 rows */
}

input.sheet-d6pp,
textarea.sheet-d6pp {
  background-color: var(--bg-editable-text);
  border: 2px solid var(--border-main);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-main);
  box-shadow: var(--shadow);
  text-align: left;
}

.description-display {
  white-space: pre-wrap;
  padding: 6px;
  background-color: var(--bg-parchment);
  font-family: var(--font-main);
}

.sheet-d6pp-label {
  font-weight: bold;
  font-size: 1.2em;  /* Match actual label size */
  color: var(--text-main);
  display: inline-block;
  margin-bottom: 4px;
}

.sheet-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

/* Each group in the row */
.sheet-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-character-top-grid {
  display: grid;
  grid-template-columns: auto 3fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 8px 4px;
  align-items: center;
  margin-bottom: 10px;
}

.sheet-character-inventory-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  gap: 8px 6px;
  align-items: center;
  margin-bottom: 10px;
}

.sheet-character-inventory-grid label {
  font-weight: bold;
  font-size: 1.1em;
  color: var(--text-main);
  text-align: right;
}

.sheet-character-inventory-grid input[type="text"] {
  width: 100%;
  min-width: 100px;
  box-sizing: border-box;
  background-color: var(--bg-editable-text);
  border: 2px solid var(--border-main);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-main);
  text-align: center;
  box-shadow: var(--shadow);
}

.sheet-controls-row label,
.sheet-character-top-grid label {
  display: grid;
  place-items: center end;  /* Vertical + right alignment */
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  box-sizing: border-box;
}

.sheet-character-top-grid input {
  width: 100%;
  line-height: 1.2;
  box-sizing: border-box;
}

.sheet-character-top-grid label:not(:first-of-type) {
  margin-left: 4px;
}

.sheet-character-desc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 6px 10px;
  margin-bottom: 0px;
}

.sheet-character-desc-grid label {
  text-align: left;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.sheet-character-desc-grid textarea {
  width: 100%;
  height: 100px;
  resize: vertical;
  box-sizing: border-box;
}

textarea.sheet-d6pp[readonly],
.sheet-character-desc-grid textarea[readonly],
input.sheet-d6pp[readonly] {
  background-color: var(--bg-readonly);
  color: var(--text-readonly);
  border: 2px solid var(--border-main);
  box-sizing: border-box;
}

#attr_skill_points,
#attr_advantage {
  width: 60px;
  max-width: 100%;
  text-align: center;
}

.skill-group-content {
  padding: 12px;
}

select.preaction-normal,
select.preaction-ignorepain,
select.preaction-disengage,
select.reaction-normal,
select.reaction-medic,
select.reaction-fixit,
select.background-select,
select[name="attr_significant_action_selection"],
select[name="attr_simple_action_selection"] {
  background-color: var(--bg-editable-text);
  border: 2px solid var(--border-main);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-main);
  box-shadow: var(--shadow);
  text-align: left;
  max-width: 100%;
}


.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px 12px;
  align-items: start;
  align-self: stretch;
}

.action-grid-header {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--text-main);
  padding-bottom: 4px;
}

.action-grid > div:nth-child(odd) {
  border-right: 2px solid var(--border-main);
  padding-right: 16px;
  align-self: stretch;
}

.d6pp-checkbox input[type="checkbox"] {
  accent-color: var(--checkbox);
  transform: scale(1.2);
}

input[type="radio"].sheet-tab {
  accent-color: var(--radio-button);
  transform: scale(1.2);
  margin-right: 6px;
}

.sheet-tab + span {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-main);
  margin-right: 12px;
}

.spacer-sm {
  height: 8px;
}

.spacer-md {
  height: 16px;
}

.spacer-lg {
  height: 24px;
}

.spacer-xl {
  height: 32px;
}

.target-number-cell {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  background-color: var(--bg-table-cell);
  padding: 6px 8px;
  border: 1px solid var(--grid-line);
}

.number-cell {
  text-align: center;
  font-size: 1.1em;
  background-color: var(--bg-table-cell);
  padding: 6px 8px;
  border: 1px solid var(--grid-line);
}

.d6pp-span {
  font-size: 1.1em;
  color: var(--text-main);
  margin-right: 4px;
  white-space: nowrap;
}

.sheet-d6pp-select {
  background-color: var(--bg-editable-text);
  border: 2px solid var(--border-main);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-main);
  box-shadow: var(--shadow);
  text-align: left;
  max-width: 100%;
  box-sizing: border-box;
}

input[name="attr_spend_mode"][value="1"] ~ .hide-when-spending {
  display: none;
}

.show-when-spending {
  display: none;
}

input[name="attr_spend_mode"][value="1"] ~ .show-when-spending {
  display: block;
}

.sheet-mode-background,
.sheet-mode-training,
.sheet-mode-sheet,
.sheet-mode-type,
.sheet-mode-quicknpc,
.sheet-mode-monster {
  display: none;
}

/* Only show background step when attr_sheet_mode is "background" */
input[name="attr_sheet_mode"][value="type"] ~ .sheet-step-type {
  display: block;
}

/* Only show background step when attr_sheet_mode is "background" */
input[name="attr_sheet_mode"][value="background"] ~ .sheet-step-background {
  display: block;
}

/* Only show training step when attr_sheet_mode is "Training" */
input[name="attr_sheet_mode"][value="training"] ~ .sheet-step-training {
  display: block;
}

/* Only show character sheet step when attr_sheet_mode is "sheet" */
input[name="attr_sheet_mode"][value="sheet"] ~ .sheet-step-sheet {
  display: block;
}

/* Only show character sheet step when attr_sheet_mode is "sheet" */
input[name="attr_sheet_mode"][value="quicknpc"] ~ .sheet-step-quicknpc {
  display: block;
}

/* Only show monster sheet step when attr_sheet_mode is "monster" */
input[name="attr_sheet_mode"][value="monster"] ~ .sheet-step-monster {
  display: block;
}

.attack-count-group {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ensures items stay to the left */
  gap: 8px; /* space between label and input */
  width: fit-content; /* shrink to fit contents */
}

.sheet-small-input {
  width: 60px; /* Adjust as needed */
  min-width: 60px;
  max-width: 60px;
  text-align: center;
}

.show-if-pc,
.show-if-major,
.show-if-npc {
  display: none;
}

/* These MUST be siblings */
input[name="attr_character_type"][value="pc"] ~ .show-if-pc {
  display: inline-block;
}

input[name="attr_character_type"][value="major_npc"] ~ .show-if-major {
  display: inline-block;
}

input[name="attr_character_type"][value="npc"] ~ .show-if-npc {
  display: inline-block;
}

.show-if-not-npc {
  display: none;
}

input[name="attr_character_type"][value="pc"] ~ .show-if-not-npc,
input[name="attr_character_type"][value="major_npc"] ~ .show-if-not-npc {
  display: block;
}

/* ================================
   Inventory Card Styles (Wild West)
   ================================ */

.inventory-card {
  border: 2px solid var(--border-main);
  border-radius: 8px;
  background-color: var(--bg-container);
  box-shadow: var(--bg-shadow);
  padding: 10px;
  margin-bottom: 12px;
  font-family: var(--font-main);
}

.inventory-card-header {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.8fr 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.inventory-item-name,
.inventory-item-location,
.inventory-input {
  background-color: var(--bg-editable-text);
  border: 2px solid var(--border-main);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-main);
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-main);
}

.inventory-card-description {
  margin-top: 6px;
  padding-left: 0;
  padding-right: 0;
}

.inventory-card-description textarea {
  width: 100%;
  height: calc(1.4em + 15px); /* Two lines high */
  resize: vertical;
  border: 2px solid var(--border-main);
  border-radius: 6px;
  background-color: var(--bg-editable-text);
  padding: 6px;
  font-size: 14px;
  color: var(--text-main);
  font-family: var(--font-main);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.inventory-labeled-input {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  font-size: 0.95em;
  color: var(--text-main);
  width: 100%;
}

/* Remove arrows from weight field only */
.weight-input::-webkit-outer-spin-button,
.weight-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.weight-input {
  -moz-appearance: textfield;
}

/* Hide by default */
.sheet-view-character,
.sheet-view-inventory {
  display: none;
}

/* Show appropriate view based on attr_view_mode */
.sheet-view-wrapper input[name="attr_view_mode"][value="character"] ~ .sheet-view-character {
  display: block;
}

.sheet-view-wrapper input[name="attr_view_mode"][value="inventory"] ~ .sheet-view-inventory {
  display: block;
}

/* Hide by default */
.sheet-view-wrapper .sheet-encumbrance-section {
  display: none;
}

/* Show when visibility flag is set */
.sheet-view-wrapper input[name="attr_encumbrance_visible"][value="1"] ~ .sheet-encumbrance-section {
  display: block;
}

.skill-group-content textarea.sheet-d6pp {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.sheet-dodge-toggle {
  display: none;
}

input[name="attr_preaction_selection_normal"][value="Dodge"] ~ .sheet-dodge-toggle,
input[name="attr_preaction_selection_ignorepain"][value="Dodge"] ~ .sheet-dodge-toggle,
input[name="attr_preaction_selection_disengage"][value="Dodge"] ~ .sheet-dodge-toggle {
  display: inline-block;
}

.sheet-multi-attack-toggle {
  display: none;
}

input[name="attr_preaction_selection_normal"][value="Multi-attack"] ~ .sheet-multi-attack-toggle,
input[name="attr_preaction_selection_ignorepain"][value="Multi-attack"] ~ .sheet-multi-attack-toggle,
input[name="attr_preaction_selection_disengage"][value="Multi-attack"] ~ .sheet-multi-attack-toggle {
  display: inline-block;
}

/***** Grid Tables *****/

.sheet-grid-table {
  display: grid;
  width: 500px;
  grid-auto-rows: auto;
  box-sizing: border-box;
}

.sheet-grid-table.full-width {
  width: 100%;
}

/* Column count variants */
.sheet-grid-table.two-col   { grid-template-columns: repeat(2, 1fr); }
.sheet-grid-table.three-col { grid-template-columns: repeat(3, 1fr); }
.sheet-grid-table.four-col  { grid-template-columns: repeat(4, 1fr); }
.sheet-grid-table.five-col  { grid-template-columns: repeat(5, 1fr); }
.sheet-grid-table.six-col   { grid-template-columns: repeat(6, 1fr); }
.sheet-grid-table.seven-col { grid-template-columns: repeat(7, 1fr); }
.sheet-grid-table.eight-col { grid-template-columns: repeat(8, 1fr); }
.sheet-grid-table.nine-col { grid-template-columns: repeat(9, 1fr); }

/* All cells */
.sheet-grid-table .grid-header,
.sheet-grid-table .grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 6px 8px;
  font-size: 1.0em;
  text-align: center;
  box-sizing: border-box;

  /* Only top and left borders to prevent doubling */
  border-top: 0px;
  border-left: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  border-right: 0px;
}

/* Header styling */
.sheet-grid-table .grid-header {
  background-color: var(--bg-table-header);
  font-weight: bold;
  color: var(--text-table-header);
  border-top: 1px solid var(--grid-line);
}

/* Body cell background */
.sheet-grid-table .grid-cell {
  background-color: var(--bg-table-cell);
}

/* Add right border to the last column of every row */
.sheet-grid-table.two-col   > *:nth-child(2n),
.sheet-grid-table.three-col > *:nth-child(3n),
.sheet-grid-table.four-col  > *:nth-child(4n),
.sheet-grid-table.five-col  > *:nth-child(5n),
.sheet-grid-table.six-col   > *:nth-child(6n),
.sheet-grid-table.seven-col > *:nth-child(7n),
.sheet-grid-table.eight-col > *:nth-child(8n),
.sheet-grid-table.nine-col > *:nth-child(9n) {
  border-right: 1px solid var(--grid-line);
}

/***** FIREARM TABLE *****/

/* === Base Attack Grid Styling === */
.sheet-grid-attack {
  display: grid;
  width: 500px; /* default */
  grid-auto-rows: auto;
  box-sizing: border-box;
}

.sheet-grid-attack.full-width {
  width: 100%;
}

.sheet-grid-table .target-number-cell {
  font-weight: bold;
  font-size: 2em;
  color: var(--text-main);
}

.sheet-grid-attack > div {
  border: 1px solid var(--grid-line);
  padding: 6px 8px;
  font-size: 1em;
  font-family: var(--font-main);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.sheet-grid-attack .grid-header,
.sheet-grid-attack .grid-cell {
  border-left: 1px solid var(--grid-line);
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--grid-line);
}

.sheet-grid-attack .grid-header {
  background-color: var(--bg-table-header);
  color: var(--text-table-header);
  font-weight: bold;
  border-top: 1px solid var(--grid-line);
}

.sheet-grid-attack select {
  width: 100%;
  font-size: 14px;
}

.sheet-grid-attack button {
  font-size: 1.1em;
  margin: 0;
  padding: 4px 8px;
}

.stack-tight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stack-weapon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.weapon-skill {
  font-style: italic;
  font-size: 0.9em;
  font-family: var(--font-main);
  line-height: 1.2em;
}

.weapon-skill .small-hint {
  display: inline;
}

.ammo-button-row {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.grid-cell.ammo-display {
  display: flex;              /* Ensure flex container */
  justify-content: flex-start; /* Align contents to left */
  align-items: center;         /* Vertically center if desired */
  text-align: left;
  padding-left: 4px;
  font-size: 1.5em;
}

/* === Specific Grid Column Layouts === */
.sheet-grid-firearms {
  grid-template-columns:
    2fr   /* Weapon */
    1fr   /* Dice */
    1fr   /* Damage */
    1.2fr /* Ammo */
    1fr   /* Short */
    1fr   /* Medium */
    1fr   /* Long */
    1fr;  /* Extreme */
}

.sheet-grid-ranged {
  grid-template-columns:
    2fr   /* Weapon */
    1fr   /* Dice */
    1fr   /* Damage */
    1fr   /* Short */
    1fr   /* Medium */
    1fr   /* Long */
    1fr;  /* Extreme */
}

.sheet-grid-melee {
  grid-template-columns:
    2fr   /* Weapon */
    1fr   /* Dice */
    1fr;  /* Damage */
}

/* Add right border to the last column of every row when grid is melee or ranged */
.sheet-grid-attack.sheet-grid-firearms > *:nth-child(8n),
.sheet-grid-attack.sheet-grid-melee > *:nth-child(3n),
.sheet-grid-attack.sheet-grid-ranged > *:nth-child(7n) {
  border-right: 1px solid var(--grid-line);
}

.sheet-grid-attack.sheet-grid-firearms > .full-row {
  grid-column: span 8;
  border-right: 1px solid var(--grid-line);
}

.sheet-grid-attack.sheet-grid-firearms > .last-row {
  grid-column: span 8;
  border-bottom: 1px solid var(--grid-line);
}

/**** START Spinner Arrows trick *****/
/* Firefox - hide number input spinners by default */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Firefox - restore spinner on hover */
input[type="number"]:hover {
  -moz-appearance: initial;
}

/* Chrome/Safari/Edge - hide spinners by default */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Chrome/Safari/Edge - show spinners on hover */
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
  opacity: 1;
}
/**** END Spinner Arrows trick *****/