:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --border-color: #ccc;
    --tab-bg: #f0f0f0;
    --tab-hover: #e0e0e0;
    --input-bg: #ffffff;
    --input-border: #ccc;
    --label-w: 100px;
    --select-w: 180px;
    --magic-label-w: 60px;
    --magic-select-w: 48px;
    --gap: 8px;
    --col-gap: 18px;
    --row-gap: 10px;
    --selected-spell-bg: #f2f2f2;
    --selected-spell-hover: #e6e6e6;
}

body.dark-mode {
    --bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --border-color: #444;
    --tab-bg: #2d2d2d;
    --tab-hover: #3d3d3d;
    --input-bg: #2d2d2d;
    --selected-spell-bg: #383838;
    --selected-spell-hover: #4a4a4a;
}

* {
    color: var(--text-color);
}

body {
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

.header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--tab-bg);
    border-bottom: 2px solid var(--border-color);
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 20px;
}

.header h1 {
    margin: 0;
    white-space: nowrap;	/* prevents title wrapping */
}

.centered-img {
    height: 60px;        /* adjust to taste */
    width: auto;
    object-fit: contain;
    pointer-events: none; /* optional: so it won't block clicks on the button */
}

.theme-toggle {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.theme-toggle:hover {
    background-color: var(--tab-hover);
}

.tab-container {
    margin: 0 20px;
}

.tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    flex-wrap: wrap;
    gap: 0;
}

.tab-button {
    padding: 12px 20px;
    background-color: var(--tab-bg);
    color: var(--text-color);
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    margin-right: 5px;
}

.tab-button:hover {
    background-color: var(--tab-hover);
}

.tab-button.active {
    border-bottom-color: #4CAF50;
    background-color: var(--tab-hover);
}

.tab-content {
    display: none;
    padding: 20px;
    animation: fadeIn 0.3s;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

label {
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    font-weight: var(--label-weight);
}

input[type="text"],
input[type="number"],
input[type="url"],
select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: 6px 8px;
    border-radius: 4px;
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

br {
    line-height: 1.5;
}

table {
    border-collapse: collapse;
    margin: 15px 0;
}

td {
    padding: 10px;
}

#knownspells,
#knownlanguages,
#spellsa, #spellsb, #spellsc, #spellsd, #spellse, #spellsf,
#selecteda, #selectedb, #selectedc, #selectedd, #selectede, #selectedf {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    overflow-y: auto;
}

#knownspells,
#knownlanguages {
    height: 300px;
    width: 300px;
}

#selecteda, #selectedb, #selectedc, #selectedd, #selectede, #selectedf {
    height: 100px;
    width: 220px;
}

#spellsa, #spellsb, #spellsc, #spellsd, #spellse, #spellsf {
    height: 200px;
    width: 220px;
}

#shamanschools {
    margin: 10px 0;
}

#shamanschools.hidden {
    display: none;
}

#spellsa label,
#spellsb label,
#spellsc label,
#spellsd label,
#spellse label,
#spellsf label,
#knownspells label,
#knownlanguages label {
    font-weight: normal;
}

input[type="radio"] + label {
    font-weight: normal;
}

/* selected radio's label becomes bold */
input[type="radio"]:checked + label {
    font-weight: bold;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

button:active {
    background-color: #3d8b40;
}

#saveButton {
    margin-left: 15px;
}


.selected-spell-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1px 0;
    padding: 5px;
    text-align: left;
    border: 1px solid var(--border-color);
    background-color: var(--selected-spell-bg);
    color: var(--text-color);
    cursor: pointer;
}
.selected-spell-button:hover {
    background-color: var(--selected-spell-hover);
}


.equipment-box {
    padding: 0;
    border: 0 solid var(--input-border);
    border-radius: 4px;
    margin-bottom: 0;
    color: #000000;
    display: flex;
    gap: 0;
    align-items: center;
    box-sizing: border-box;
}

body.dark-mode .equipment-box {
    color: #e0e0e0;
}


/* grid: three narrow columns with a small gap */
#equipmentGrid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 240px));
    grid-template-rows: repeat(18, auto);
    gap: 8px; /* small gap between cells */
    row-gap: 0;
    align-items: start; 
    grid-auto-flow: column;
}

/* amount input: fixed narrow width */
.equipment-box input[type="number"] {
    width: 48px;          /* small fixed width for the amount */
    flex: 0 0 48px;      /* don't grow or shrink */
    text-align: right;
}

/* name input: take remaining space */
.equipment-box input[type="text"] {
    flex: 1 1 auto;      /* grow to fill remaining space */
    min-width: 0;        /* allow shrinking inside grid cell */
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    padding: 6px 6px;
    box-sizing: border-box;
}

.armour-shield-container {
    display: grid;
    row-gap: 10px;
    margin: 10px 0;
    justify-content: start;
}

/* Each row: label select label select */
.armour-shield-row {
    display: grid;
    grid-template-columns: 100px 130px 60px 48px;
    column-gap: 8px;
    row-gap: 10px;
    align-items: center;
}

/* Labels: right aligned */
.armour-shield-row label {
    text-align: right;
    white-space: nowrap;
}

/* Specific select widths */
#armour,
#shield {
    width: 120px;
}

#armourmagic,
#shieldmagic {
    width: 48px;
}

/* Optional: make selects visually consistent */
.armour-shield-row select {
    padding: 4px 6px;
    font-size: 14px;
}

.ac-override-grid {
    display: grid;
    grid-template-columns: 172px 48px;
    column-gap: 8px;
    row-gap: 10px;
    align-items: center;
    justify-content: start;    /* keep grid left-aligned */
    width: max-content;        /* size to content, don't fill page */
}

/* Labels: fixed column width, right-aligned, allow wrapping */
.ac-override-grid label {
    text-align: right;
    white-space: normal;       /* allow wrapping */
    overflow-wrap: break-word; /* break long words if needed */
    line-height: 1.2;
}

/* Inputs: fixed width to match the second column */
.ac-override-grid input {
    width: 48px;
    box-sizing: border-box;
}

/* container: two columns (label | control) */
.fightermastery {
    display: grid;
    grid-template-columns: 250px 200px;
    row-gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

/* labels: same width, right-justified */
.fightermastery label {
    width: 236px;
    text-align: right;
}

/* selects: fill the second column and share the same width */
.fightermastery select {
    width: 200px;
    justify-self: start;
}

.mastery-grid {
    display: grid;
    grid-template-columns: 250px;
    row-gap: 10px;
    align-items: center;
}

.mastery-item {
    display: grid;
    grid-template-columns: 250px 200px;
    align-items: right;
}

.mastery-item.hidden {
    display: none;
}

/* .mastery-grid label { */
/*     justify-self: start; */
/* } */

/* Container: two columns side-by-side */
.weapons-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--col-gap);
    align-items: start;
    justify-content: start;
    margin: 10px 0;
    width: max-content; /* keeps container only as wide as needed */
}

/* Each column holds a vertical stack of weapon-pair rows */
.weapons-column {
    display: grid;
    row-gap: var(--row-gap);
    justify-items: start;
}

/* Column title styling */
.column-title {
    display: block;
    margin-bottom: 6px;
}

/* Each weapon row uses the same 4-cell grid as armour-shield */
.weapon-pair {
    display: grid;
    grid-template-columns: var(--label-w) var(--select-w) var(--magic-label-w) var(--magic-select-w);
    column-gap: var(--gap);
    align-items: center;
}

/* Right-align labels */
.weapon-pair label {
    text-align: right;
    white-space: nowrap;
}

/* Select widths */
.weapon-pair select {
    padding: 4px 6px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Specific widths for the first select and magic select */
.weapon-pair select:nth-of-type(1) { width: var(--select-w); }
.weapon-pair select:nth-of-type(2) { width: var(--magic-select-w); }

/* Optional: make selects visually consistent across the whole form */
.weapons-column select {
    box-sizing: border-box;
}

.form-grid {
    display: grid;
    grid-template-columns: 140px 140px;
    gap: 10px 5px;
    align-items: center;
}

.form-grid label {
    justify-self: end;
}

.small-form-grid {
    display: grid;
    grid-template-columns: 80px 50px;
    gap: 10px 5px;
    align-items: center;
}

.small-form-grid label {
    justify-self: end;
}

.hit-dice {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: 18px;
    row-gap: 10px;
    margin: 10px 0;
    align-items: start;
}

.hd-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hd-item.hidden {
    display: none;
}

.hit-dice label {
    width: 30px;
    text-align: left;
}

/* optional: make inputs a fixed width so columns stay compact */
.hit-dice input {
    width: 72px;
    box-sizing: border-box;
}

footer {
    padding: 1px;
    margin-left: 10px;
    text-align: left;
    color: white;
    font-size: 12px;
}

body.drag-over {
    outline: 4px dashed #88f;
    outline-offset: -10px;
    background: rgba(200, 220, 255, 0.2);
}

.autocomplete-box {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.autocomplete-box .autocomplete-item {
    padding: 4px 6px;
    cursor: pointer;
    background: transparent;
    color: inherit;
}

.autocomplete-box .autocomplete-item.highlight,
.autocomplete-box .autocomplete-item:hover {
    background: var(--tab-hover);
    color: var(--text-color);
}

/* container: left = ammo+consumables, right = currency */
.supplies-grid {
    display: grid;
    grid-template-columns: minmax(0, 370px) minmax(0, 320px); /* adjust 320px for money column width */
    gap: 0;
    align-items: start;
    width: 100%;
    margin: 0 0 12px 0;
}

/* default per-row layout: label | input | count */
.s-row {
    display: grid;
    grid-template-columns: 140px 160px 64px; /* label | middle | count */
    column-gap: 8px;
    align-items: center;
    padding: 2px 0;
    margin: 0;
    box-sizing: border-box;
    min-height: 28px;
}

/* rows that only need label + single input (currency, consumables) */
.s-row.currencyless {
    grid-template-columns: 140px 1fr; /* label | input */
}

/* Ensure grid column is fixed for ammo rows */
.s-row.ammo-row {
    grid-template-columns: 140px 160px 64px; /* label | ammo name fixed | count */
}

/* Strong, specific rule for ammo text inputs: fixed width, cannot
   grow or shrink, and won't be overridden by generic rules */
.s-row.ammo-row input[type="text"] {
    width: 160px !important;      /* fixed width */
    max-width: 160px !important;  /* prevent expansion */
    min-width: 0;                 /* allow shrinking inside grid if needed */
    box-sizing: border-box;
    flex: 0 0 160px;              /* do not grow or shrink in flex contexts */
    padding: 4px 6px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
}

.s-row input[type="text"]:not(.ammo-row input[type="text"]) {
    max-width: 160px;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
}

/* number/count inputs fixed width */
.s-row input[type="number"] {
    width: 64px;
    box-sizing: border-box;
    padding: 4px 6px;
    text-align: right;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
}

/* label alignment */
.s-row label {
    justify-self: end;
    text-align: right;
    margin: 0;
    padding-right: 6px;
    white-space: nowrap;
    font-weight: var(--label-weight);
}

/* target currency inputs inside the right column only */
.supplies-right input[type="text"],
.supplies-right input[inputmode="numeric"] {
    text-align: right;
}

/* ensure placeholders also appear right-aligned in some browsers */
.supplies-right input::placeholder {
    text-align: right;
}

/* optional: make sure width/box-sizing don't interfere */
.supplies-right input[type="text"] {
    box-sizing: border-box;
    min-width: 0;
}

/* sizing variables you can tweak */
.personality-grid {
    --label-w: 140px;   /* width of the label column (aligns labels) */
    --items-w: 180px;	/* width of the associated inputs and selects */
    --right-w: 320px;   /* should always be wider than width of Known Languages */
    --gap-w: 16px;
}

/* overall grid: left flexible, right fixed for known languages */
.personality-grid {
    display: grid;
    grid-template-columns: calc(var(--label-w) + var(--items-w) + var(--gap-w)) var(--right-w);
    gap: 12px var(--gap-w);
    align-items: start;
}

/* left and right stacks */
.personality-left,
.personality-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.personality-left label {
    justify-self: end;
    text-align: right;
    margin: 0;
    padding: 0;
}

/* per-field row: label | control */
.p-row {
    display: grid;
    grid-template-columns: var(--label-w) var(--items-w);
    column-gap: 12px;
    align-items: center;
}

/* make the right column stack label above the box */
.personality-right .known-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
}

/* ensure the label matches left-column label alignment */
.personality-right .known-stack label {
    justify-self: start;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* bottom rows: keep labels aligned with left column and inputs ending
   at known-langs edge */
.p-full {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--label-w) var(--right-w);
    column-gap: 12px;
    align-items: center;
    margin-top: 6px;
}

.p-full label {
    justify-self: end;
    text-align: right;
    margin: 0;
    padding: 0;
}

/* bottom inputs match known-langs width exactly */
.p-full input {
    width: calc(var(--items-w) + 300px + 5px);
}

#previewContainer {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: start;
}

#imagePreview {
    grid-column: 1;
}

#imageStatus {
    grid-column: 2;
}

.companions {
    border: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    max-width: 700px;
}

.grid-header,
.grid-row {
    display: grid;
    grid-template-columns: 160px 440px;
    gap: 8px;
}

.grid-header {
    font-weight: 600;
}

.grid-row {
    align-items: center;
}

.grid-row input {
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
}

.col-label {
    padding: 6px 0;
}

/* visually hidden utility */
.sr-only, .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* responsive */
@media (max-width: 600px) {
    .grid-header,
    .grid-row {
	grid-template-columns: 1fr;
    }
}

.notes-full {
    display: grid;
    grid-template-columns: 160px 440px;
    column-gap: 12px;
    align-items: center;
    margin-top: 6px;
}

.notes-full label {
    justify-self: end;
    text-align: right;
    margin: 0;
    padding: 0;
}

#toast {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #333;
    color: white;
    padding: 10px 16px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .3s;
    white-space: pre-line;	/* newline rendering */
}
#toast.show {
    opacity: 1;
}