/* characterTable.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    text-align: center;
}

#pageContent > .container {
    max-width: 1246px; /* Allow it to use the full width needed by cards */
    min-width: 1246px; /* Prevent shrinking, enables horizontal scroll on body */
    margin: 20px auto; /* Standard centering, from generic .container */
    border-radius: 15px; /* Consistent with .container styles */
    overflow: hidden; /* Content overflow will make body/html scroll */
    background-color: #fff; /* Standard background, from generic .container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Standard shadow, from generic .container */
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: 0px;
    text-align: center;
    font-size: 10px;
    max-height: 32px; /* Applies to all cells by default */
    height: 32px; /* Applies to all cells by default */
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #ddd;
}
th {
    background-color: #f2f2f2;
    font-size: 10px;
}

/* Ensure the first row has a specific height */
table tr:first-child td {
    height: 20px;
    max-height: 20px;
}

/* Override height limits for sprite cells */
td.sprite-cell {
    max-height: 140px !important;
    height: 140px !important;
    padding: 0; /* Remove any padding */
}
td.subtable-cell1 {
    max-height: 17px !important;
    height: 17px !important;
    padding: 0; /* Remove any padding */
    font-size: 9px;
    font-weight: bold;
    background-color: #A0A0A0;
    color: #000;
}
td.subtable-cell2 {
    max-height: 17px !important;
    height: 17px !important;
    padding: 0; /* Remove any padding */
}

td.sprite-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the image covers the entire cell */
    display: block;
    margin: 0;
}

.download-cell, .small-cell, .merged-cell {
    font-size: 9px;
    border: 1px solid #ddd;
}

.rating-cell {
    font-size: 9px;
    border: 1px solid #ddd;
}

.darker-cell, .darkest-cell {
    font-size: 10px;
    font-weight: bold;
    background-color: #A0A0A0;
    color: #000;
}

.darkest-cell {
    background-color: #404040;
    color: #fff;
}


.CellNo {
    color: #400000;
    background-color: #FFAAAA; /* For browsers that do not support gradients */
    font-weight: bold;
}


.CellYes, .CellYesPartially {
    color: #004000;
    background-color: #77FF77; /* For browsers that do not support gradients */
    font-weight: bold;
}


.CellYesOptional {
    color: #004000;
    background-color: #77FF77; /* For browsers that do not support gradients */
    font-weight: bold;
    text-shadow: -1px -1px 0 #FABEA4, 1px -1px 0 #FABE04, -1px 1px 0 #FABE04, 1px 1px 0 #FABE04;
}


.CellPotSClassic {
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    background-color: #FFA538; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 30%,
    #DE7514 60%,
    #690000 90%
  );
}

.CellPotS2022 {
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    background-color: #FA8100; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFC204 30%,
    #FA8100 60%,
    #CA3000 90%
  );
}

.CellInfinitePotSClassic {
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
    font-weight: bold;
    background-color: #7847ea; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 20%,
    #DE7514 30%,
    #59CAFF 40%,
    #FFFFFF 50%,
    #59CAFF 60%,
    #BE20E6 80%,
    #300069 100%
  );
}


.CellInfinite {
    color: #000;
    text-shadow: -1px -1px 0 #999, 1px -1px 0 #999, -1px 1px 0 #999, 1px 1px 0 #999;
    font-weight: bold;
    background-color: #7847ea; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 20%,
    #DE7514 30%,
    #59CAFF 40%,
    #FFFFFF 50%,
    #59CAFF 60%,
    #BE20E6 80%,
    #300069 100%
  );
}


.CellPotSClassicInfinite2022 {
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
    font-weight: bold;
    font-size: 8px;
    background-color: #7847ea; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 20%,
    #DE7514 30%,
    #59CAFF 40%,
    #FFFFFF 50%,
    #59CAFF 60%,
    #BE20E6 75%,
    #FFB200 90%
  );
}

/* Ensure sprite image is properly sized */
img {
        max-width: 120px;
        max-height: 140px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        align: center;
    }

.character-container {
    max-height: 160px;
    overflow: hidden;
}

.small-text {
    font-size: 10px;
}   

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Add horizontal lines between rows */
tr {
    border-bottom: 1px solid #ddd;
}

.character-row {
    border-bottom: 6px solid #ddd;
}

/* Movelist button styles */
.movelist-button, .reviews-button {
    background-color: #ffd700; /* Shiny golden color */
    color: #000; /* Black text */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    outline: none;
}

.movelist-button:hover, .reviews-button:hover {
    text-decoration: underline;
    background-color: #ffe855;
}

/* Movelist and reviews containers */
.movelist-container, .reviews-container {
    display: none;
    margin-top: 10px;
}

.movelist-content, .reviews-content {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 10px;
    line-height: 1.5;
    overflow-x: auto;
}

.movelist-table {
    width: 100%;
    border-collapse: collapse;
}

.movelist-table td {
    padding: 5px;
    border: 1px solid #ccc;
}

.dark-cell {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.gray-cell1 {
    background-color: #eee;
    color: #000;
    text-align: right;
    font-weight: bold;
    font-size: 20px;
}

.gray-cell2, .gray-cell3 {
    background-color: #eee;
    color: #000;
    text-align: left;
}

.gray-cell2 {
    font-weight: bold;
    font-size: 20px;
}

.gray-cell3 {
    font-size: 16px;
}

.white-cell {
    position: relative;
    background-color: #fff;
    color: #000;
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    vertical-align: middle;
}

.white-cell img {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#searchBar {
    margin: 20px 0;
}

#searchInput {
    padding: 10px;
    font-size: 16px;
}

#searchButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Loading Indicator Styles */
#loadingIndicator {
    display: flex; /* Use flex to easily center content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed; /* Full page overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(245, 245, 245, 0.95); /* Semi-transparent background matching body bg */
    z-index: 9999; /* Ensure it's on top of everything */
    text-align: center;
}

.spinner {
    border: 8px solid #e0e0e0; /* Lighter grey for the track */
    border-top: 8px solid #007bff; /* Blue for the spinner - adjust color as you like */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.2s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loadingIndicator p {
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

/* --- Editor Styles for characterTable.css --- */

td .editable-input,
td .editable-textarea,
td .editable-select {
    width: 100%;
    height: 100%; /* Attempt to fill cell height */
    min-height: 28px; /* Ensure a minimum clickable height */
    padding: 2px 4px; /* Minimal padding */
    margin: 0;
    border: 1px solid transparent; /* Transparent border initially */
    background-color: transparent; /* Transparent background initially */
    font-family: inherit; /* Use table's font */
    font-size: inherit;   /* Use table's font size */
    color: inherit;
    box-sizing: border-box; /* Crucial for width/height */
    vertical-align: middle; /* Align with other cell content if any */
    line-height: 1.2; /* Adjust for better text fit */
}

td .editable-textarea {
    resize: none; /* Prevent user resizing */
    overflow-y: hidden; /* Hide scrollbar, rely on auto-resize */
    line-height: 1.3; /* Slightly more for textareas */
    white-space: pre-wrap; /* Respect newlines and wrap text */
    padding-top: 4px; /* More top padding for textareas */
    padding-bottom: 4px;
}

/* Hover/Focus states to indicate editability */
td .editable-input:hover,
td .editable-textarea:hover,
td .editable-select:hover {
    border-color: #aaa;
    background-color: #f9f9f9;
}

td .editable-input:focus,
td .editable-textarea:focus,
td .editable-select:focus {
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 0 1px #007bff; /* Focus ring */
    outline: none;
}

/* Specific input types styling */
td input[type="number"].editable-input {
    padding-right: 2px; /* Browsers add spinners, reduce padding */
    text-align: center;
}

/* Make main name input slightly larger */
.main-name-input {
    font-weight: bold;
    font-size: 11px !important; /* Override inherited if needed */
}
.jap-name-input {
    font-size: 10px !important;
    line-height: 1.1;
}


/* Small inputs like gender, age, rating */
.gender-input, .age-input, .rating-input {
    max-width: 50px; /* Constrain width */
    text-align: center;
}
.age-input {
    max-width: 40px;
}

.download-link-input {
    font-size: 9px !important;
    height: auto !important; /* Let content dictate height */
    min-height: 20px;
    margin-top: 2px;
}
td.download-cell .editable-input {
    line-height: 1;
}


/* Textareas that span full width in movelist/reviews */
.full-width-textarea {
    width: calc(100% - 10px); /* Account for padding of parent cell */
    margin: 5px;
    min-height: 80px; /* Decent starting height */
    height: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 8px;
}
.movelist-editor-area {
    font-family: monospace;
    font-size: 11px;
    min-height: 150px;
}

/* Styling for nested tables in editor mode for debut titles/years */
table.nested-editor-label, table.nested-editor-value {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
table.nested-editor-label td, table.nested-editor-value td {
    border: none; /* Remove internal borders */
    padding: 0;
    height: 50%; /* Each row takes half the space */
    vertical-align: middle;
}
table.nested-editor-label td {
    text-align: right;
    padding-right: 5px;
    font-weight: bold;
    font-size: 9px;
}
table.nested-editor-value td .editable-input {
    height: calc(100% - 2px); /* Try to fill the sub-cell better */
    min-height: 13px;
    font-size: 9px;
}


/* Ensure nationality flag is small and input is next to it */
td.small-cell img { /* Flag image */
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    height: 12px; /* From original PHP */
}
td.small-cell .editable-input { /* Nationality text input */
    display: inline-block;
    width: calc(100% - 25px); /* Adjust based on flag width + margin */
    height: auto;
    min-height: 20px;
    vertical-align: middle;
}

/* Give select elements some breathing room if text is long */
td .editable-select option {
    background-color: #fff;
    color: #000;
}

/* Adjustments for subtable cells (Specials, Supers, Gender, Rating) */
td.subtable-cell2 .editable-input {
    font-size: 9px; /* Match original text size */
    height: auto;
}

/* The AI Level (Difficulty) display-only field */
td.merged-cell input[readonly].editable-input {
    background-color: #eee; /* Indicate it's not directly editable here */
    cursor: not-allowed;
    border-color: transparent;
}


/* --- Modal Styles --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px; /* Location of the box */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more specific e.g. 500px */
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative;
}

.modal-close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
}

.modal-close-button:hover,
.modal-close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal h4 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal-body {
    padding: 10px 0;
}

.modal-input {
    width: calc(100% - 12px); /* Account for padding */
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#ageModal .modal-input { /* More specific for age inputs */
    width: 60px;
    padding: 6px;
    margin-right: 5px;
}


.modal-footer {
    padding-top: 15px;
    text-align: right;
    border-top: 1px solid #eee;
}

.modal-button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

.modal-button-save {
    background-color: #4CAF50;
    color: white;
}

.modal-button-cancel {
    background-color: #f44336;
    color: white;
}
.modal-button-cancel:hover, .modal-button-save:hover {
    opacity: 0.9;
}


/* --- Clickable Cell Styles --- */
.age-cell-clickable,
.logo-cell-clickable {
    cursor: pointer;
    position: relative; /* For potential future icons or indicators */
}
.age-cell-clickable:hover,
.logo-cell-clickable:hover {
    background-color: #f0f0f0; /* Slight hover indication */
}

/* Style for logo display containers to ensure consistent height and centering */
.logo-display-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px; /* Ensure there's clickable area even if empty */
    width: 100%;
    height: 100%;
}
.logo-display-container img.logo-image {
    max-width: 100%;
    max-height: 60px; /* Adjust as needed for logo sizes */
    object-fit: contain;
}

/* Ensure textareas correctly interpret newlines (already default behavior) */
textarea.editable-textarea {
    white-space: pre-wrap; /* This helps display \n as newlines and wrap text */
}

/* Ensure the image in the logo modal preview is reasonably sized */
#logoModalPreviewContainer img.logo-image {
    max-width: 100%;
    max-height: 80px; /* Or other desired max height for preview */
    object-fit: contain;
}


/* --- Dynamic Dropdown Styling --- */
select.editable-select.CellNo {
    color: #400000;
    background-color: #FFAAAA;
    font-weight: bold;
}
select.editable-select.CellNo option { /* Style options too for consistency */
    background-color: #FFAAAA;
    color: #400000;
}
select.editable-select.CellNo option:checked {
    background-color: #FFAAAA !important; /* Ensure selected option maintains parent's style */
    color: #400000 !important;
}


select.editable-select.CellYes,
select.editable-select.CellYesPartially { /* Combined Yes and Yes (Partially) */
    color: #004000;
    background-color: #77FF77;
    font-weight: bold;
}
select.editable-select.CellYes option,
select.editable-select.CellYesPartially option {
    background-color: #77FF77;
    color: #004000;
}
select.editable-select.CellYes option:checked,
select.editable-select.CellYesPartially option:checked {
    background-color: #77FF77 !important;
    color: #004000 !important;
}

select.editable-select.CellYesOptional {
    color: #004000;
    background-color: #77FF77;
    font-weight: bold;
    text-shadow: -1px -1px 0 #FABEA4, 1px -1px 0 #FABE04, -1px 1px 0 #FABE04, 1px 1px 0 #FABE04;
}
select.editable-select.CellYesOptional option {
    background-color: #77FF77;
    color: #004000;
    /* Text shadow on option elements is not widely supported */
}
select.editable-select.CellYesOptional option:checked {
    background-color: #77FF77 !important;
    color: #004000 !important;
}


select.editable-select.CellPotSClassic {
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    background-color: #FFA538;
    background-image: linear-gradient(to top right, #FFFFFF 0%, #FFEA79 30%, #DE7514 60%, #690000 90%);
}
select.editable-select.CellPotSClassic option {
    background-color: #FFA538; /* Fallback, gradient not on options */
    color: #000;
}
select.editable-select.CellPotSClassic option:checked {
    background-color: #FFA538 !important;
    color: #000 !important;
}


select.editable-select.CellPotS2022, /* Value "2022" will become class "Cell2022" */
select.editable-select.Cell2022 { /* Explicitly add for value "2022" */
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    background-color: #FA8100;
    background-image: linear-gradient(to top right, #FFFFFF 0%, #FFC204 30%, #FA8100 60%, #CA3000 90%);
}
select.editable-select.CellPotS2022 option,
select.editable-select.Cell2022 option {
    background-color: #FA8100;
    color: #000;
}
select.editable-select.CellPotS2022 option:checked,
select.editable-select.Cell2022 option:checked {
    background-color: #FA8100 !important;
    color: #000 !important;
}


select.editable-select.CellInfinitePotSClassicOptional { /* Sanitized class name */
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
    font-weight: bold;
    background-color: #7847ea;
    background-image: linear-gradient( to top right, #FFFFFF 0%, #FFEA79 20%, #DE7514 30%, #59CAFF 40%, #FFFFFF 50%, #59CAFF 60%, #BE20E6 80%, #300069 100% );
}
select.editable-select.CellInfinitePotSClassicOptional option {
    background-color: #7847ea;
    color: #000;
}
select.editable-select.CellInfinitePotSClassicOptional option:checked {
    background-color: #7847ea !important;
    color: #000 !important;
}


select.editable-select.CellInfinite {
    color: #000;
    text-shadow: -1px -1px 0 #999, 1px -1px 0 #999, -1px 1px 0 #999, 1px 1px 0 #999;
    font-weight: bold;
    background-color: #7847ea;
    background-image: linear-gradient( to top right, #FFFFFF 0%, #FFEA79 20%, #DE7514 30%, #59CAFF 40%, #FFFFFF 50%, #59CAFF 60%, #BE20E6 80%, #300069 100% );
}
select.editable-select.CellInfinite option {
    background-color: #7847ea;
    color: #000;
}
select.editable-select.CellInfinite option:checked {
    background-color: #7847ea !important;
    color: #000 !important;
}


select.editable-select.CellPotSClassicInfinitePotS2022Optional { /* Sanitized class name */
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
    font-weight: bold;
    font-size: 8px !important; /* Match original cell style */
    background-color: #7847ea;
    background-image: linear-gradient( to top right, #FFFFFF 0%, #FFEA79 20%, #DE7514 30%, #59CAFF 40%, #FFFFFF 50%, #59CAFF 60%, #BE20E6 75%, #FFB200 90% );
}
select.editable-select.CellPotSClassicInfinitePotS2022Optional option {
    background-color: #7847ea; /* Fallback */
    color: #000;
    font-size: 10px; /* Reset font size for options if needed */
}
select.editable-select.CellPotSClassicInfinitePotS2022Optional option:checked {
    background-color: #7847ea !important;
    color: #000 !important;
}

/* Default select style if no specific class matches */
select.editable-select {
    background-color: #fff; /* Or transparent if you prefer parent cell background */
    color: #333;
    font-weight: normal;
    text-shadow: none;
}
select.editable-select option {
    background-color: #fff;
    color: #333;
}
select.editable-select option:checked {
    background-color: #007bff !important; /* Standard browser selection color or your theme's highlight */
    color: white !important;
}


td[class^="Cell"] select.editable-select,
td[class^="Gender"] select.editable-select {
    width: 100%;
    height: 100%; /* Fill the TD height */
    background-color: transparent !important; /* Crucial for TD background to show */
    color: inherit !important; /* Inherit text color from TD */
    font-weight: inherit; /* Inherit font-weight from TD */
    border: none !important; /* Cleaner look, no competing borders */
    padding: 0 2px; /* Minimal padding */
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle; /* Align select content vertically */
    text-align: center; /* Center text, good for single symbols like gender */
    text-align-last: center; /* Firefox specific for text-align center */

    /* Remove native dropdown arrow if TD has complex background/gradients */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Styling for the <option> elements within these dropdowns */
td[class^="Cell"] select.editable-select option,
td[class^="Gender"] select.editable-select option {
    color: black; /* Standard readable text color for options */
    background-color: white; /* Standard background for options */
    font-weight: normal; /* Options usually aren't bold by default */
    text-align: left; /* Options text typically left-aligned */
    text-shadow: none; /* Ensure no text shadow bleeds into options */
}

/* Base style for TDs that will host styled dropdowns (height, padding, etc.) */
/* This ensures layout consistency, matching subtable-cell2 */
td[class^="Cell"],
td[class^="Gender"] {
    height: 17px !important;
    max-height: 17px !important;
    padding: 0 !important;
    vertical-align: middle; /* Vertically center the select element */
    font-weight: bold; /* Default to bold text for styled cells */
}


/* --- Gender Dropdown Specific Styles --- */
/* ? : Gray background, bold black text */
td.GenderUnknown {
    background-color: #e9e9e9; /* Gray */
    color: black;
}

/* ♂ : Blue background, bold white text */
td.GenderMale {
    background-color: #3498DB; /* Blue */
    color: white;
}

/* ♀ : Pink/purple background, bold white text */
td.GenderFemale {
    background-color: #D279A6; /* Pink/Purple */
    color: white;
}

/* ♂/...&...+♀ : Blue to Pink/Purple fade, bold white text */
td.GenderMaleSlashFemale, 
td.GenderMaleAndFemale, 
td.GenderMalePlusFemale {
    background: linear-gradient(to right, #3498DB, #D279A6);
    color: white;
}

/* ♀/...&...+♂ : Pink/Purple to Blue fade, bold white text */
td.GenderFemaleSlashMale, 
td.GenderFemaleAndMale, 
td.GenderFemalePlusMale {
    background: linear-gradient(to right, #D279A6, #3498DB);
    color: white;
}

/* ⚧️ : Trans flag vertical pattern, bold black text */
/* Trans Flag Colors: Light Blue: #5BCEFA, Light Pink: #F5A9B8, White: #FFFFFF */
td.GenderTrans {
    background: linear-gradient(to right,
        #5BCEFA 0%, #5BCEFA 20%,    /* Light Blue stripe */
        #F5A9B8 20%, #F5A9B8 40%,   /* Light Pink stripe */
        #FFFFFF 40%, #FFFFFF 60%,   /* White stripe */
        #F5A9B8 60%, #F5A9B8 80%,   /* Light Pink stripe */
        #5BCEFA 80%, #5BCEFA 100%  /* Light Blue stripe */
    );
    color: black;
    /* Optional: subtle text shadow for better readability on the flag pattern */
    text-shadow: 0px 0px 2px #FFFFFF, 0px 0px 2px #FFFFFF;
}

/* --- Refactored Existing Dropdown Styles (Cell...) --- */
/* These now style the TD for background and the SELECT for text properties */

/* .CellNo */
td.CellNo {
    background-color: #FFAAAA;
    color: #400000; /* Text color defined on TD, inherited by select */
    /* font-weight: bold; is covered by td[class^="Cell"] */
}

/* .CellYes, .CellYesPartially */
td.CellYes,
td.CellYesPartially {
    background-color: #77FF77;
    color: #004000;
}

/* .CellYesOptional */
td.CellYesOptional {
    background-color: #77FF77;
    color: #004000;
    text-shadow: -1px -1px 0 #FABEA4, 1px -1px 0 #FABE04, -1px 1px 0 #FABE04, 1px 1px 0 #FABE04;
}
/* Text shadow on select needs to be explicitly set if it shouldn't inherit TD's */
td.CellYesOptional select.editable-select {
    text-shadow: inherit; /* Or 'none' if select text shouldn't have shadow */
}


/* .CellPotSClassic */
td.CellPotSClassic {
    background-color: #FFA538;
    background-image: linear-gradient(to top right, #FFFFFF 0%, #FFEA79 30%, #DE7514 60%, #690000 90%);
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
}
td.CellPotSClassic select.editable-select { text-shadow: inherit; }

/* .CellPotS2022, .Cell2022 */
td.CellPotS2022,
td.Cell2022 {
    background-color: #FA8100;
    background-image: linear-gradient(to top right, #FFFFFF 0%, #FFC204 30%, #FA8100 60%, #CA3000 90%);
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
}
td.CellPotS2022 select.editable-select,
td.Cell2022 select.editable-select { text-shadow: inherit; }


/* .CellInfinitePotSClassicOptional (was InfinitePotSClassic) */
td.CellInfinitePotSClassicOptional {
    background-color: #7847ea;
    background-image: linear-gradient( to top right, #FFFFFF 0%, #FFEA79 20%, #DE7514 30%, #59CAFF 40%, #FFFFFF 50%, #59CAFF 60%, #BE20E6 80%, #300069 100% );
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
}
td.CellInfinitePotSClassicOptional select.editable-select { text-shadow: inherit; }


/* .CellInfinite */
td.CellInfinite {
    background-color: #7847ea;
    background-image: linear-gradient( to top right, #FFFFFF 0%, #FFEA79 20%, #DE7514 30%, #59CAFF 40%, #FFFFFF 50%, #59CAFF 60%, #BE20E6 80%, #300069 100% );
    color: #000;
    text-shadow: -1px -1px 0 #999, 1px -1px 0 #999, -1px 1px 0 #999, 1px 1px 0 #999;
}
td.CellInfinite select.editable-select { text-shadow: inherit; }


/* .CellPotSClassicInfinitePotS2022Optional (was PotSClassicInfinite2022) */
td.CellPotSClassicInfinitePotS2022Optional {
    background-color: #7847ea;
    background-image: linear-gradient( to top right, #FFFFFF 0%, #FFEA79 20%, #DE7514 30%, #59CAFF 40%, #FFFFFF 50%, #59CAFF 60%, #BE20E6 75%, #FFB200 90% );
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
    font-size: 8px !important; /* Specific font size for this complex cell */
}
td.CellPotSClassicInfinitePotS2022Optional select.editable-select {
    text-shadow: inherit;
    font-size: inherit !important; /* Ensure select inherits the 8px font size */
}

/* Fallback for any .CellDefault that might occur */
td.CellDefault {
    background-color: #fff;
    color: #333;
    font-weight: normal;
}

/* === Add/Update these lines in characterTable.css === */

/* Common visual properties for all styled gender cells/containers */
/* Applied to TDs that have a Gender... class */
td.GenderUnknown, td.GenderMale, td.GenderFemale, 
td.GenderMaleSlashFemale, td.GenderFemaleSlashMale,
td.GenderMaleAndFemale, td.GenderFemaleAndMale,
td.GenderMalePlusFemale, td.GenderFemalePlusMale,
td.GenderTrans {
    font-weight: bold;
    text-align: center;     /* Center the gender symbols in view-only */
    vertical-align: middle; /* Ensures content is vertically centered */
    /* Height/padding are typically handled by other classes like subtable-cell2
       or specific rules for editor container TDs. These rules focus on visual styling. */
}

/* ? : Gray background, bold black text */
td.GenderUnknown {
    background-color: #B0B0B0; /* Gray */
    color: black;
}

/* ♂ : Blue background, bold white text */
td.GenderMale {
    background-color: #3498DB; /* Blue */
    color: white;
}

/* ♀ : Pink/purple background, bold white text */
td.GenderFemale {
    background-color: #D279A6; /* Pink/Purple */
    color: white;
}

/* ♂/...&...+♀ : Blue to Pink/Purple fade, bold white text */
td.GenderMaleSlashFemale, 
td.GenderMaleAndFemale, 
td.GenderMalePlusFemale {
    background: linear-gradient(to right, #3498DB, #D279A6);
    color: white;
}

/* ♀/...&...+♂ : Pink/Purple to Blue fade, bold white text */
td.GenderFemaleSlashMale, 
td.GenderFemaleAndMale, 
td.GenderFemalePlusMale {
    background: linear-gradient(to right, #D279A6, #3498DB);
    color: white;
}

/* ⚧️ : Trans flag vertical pattern, bold black text */
/* Trans Flag Colors: Light Blue: #5BCEFA, Light Pink: #F5A9B8, White: #FFFFFF */
td.GenderTrans {
    background: linear-gradient(to right,
        #5BCEFA 0%, #5BCEFA 20%,    /* Light Blue stripe */
        #F5A9B8 20%, #F5A9B8 40%,   /* Light Pink stripe */
        #FFFFFF 40%, #FFFFFF 60%,   /* White stripe */
        #F5A9B8 60%, #F5A9B8 80%,   /* Light Pink stripe */
        #5BCEFA 80%, #5BCEFA 100%  /* Light Blue stripe */
    );
    color: black;
    /* Optional: subtle text shadow for better readability on the flag pattern */
    text-shadow: 0px 0px 2px #FFFFFF, 0px 0px 2px #FFFFFF;
}

/* Ensure subtable-cell2 (which will host the gender symbol) has appropriate base styles */
/* This should already exist, but confirm it doesn't conflict with font-weight or color */
td.subtable-cell2 {
    max-height: 17px !important;
    height: 17px !important;
    padding: 0 !important; /* Usually 0 for cells with specific background colors */
    /* text-align, font-weight, color will be driven by the Gender... classes */
}

/* --- Character Visibility Border Styles --- */
.visibility-wrapper {
    position: relative;
    max-width: 1200px; /* Content area for the character card table */
    margin: 0 auto 25px auto; /* Centered, with bottom margin */
    padding: 0 20px; /* 20px padding on left/right, around the character card table */
    padding-top: 38px; /* Space for banner: 30px height + 5px top margin + 3px top border of banner */
    
    border-style: solid;
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-top: none; /* Banner visually forms the top border part */
    border-radius: 8px; /* Rounded corners for the whole wrapper */
    
    /* CSS custom property for border/banner color, to be set by specific classes */
    --current-visibility-color: #ccc; /* Default fallback color */
    border-color: var(--current-visibility-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for the wrapper */
}

.visibility-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px; 
    background-color: var(--current-visibility-color);
    color: white; /* Default text color for banners */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 15px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 3px solid var(--current-visibility-color); /* Thickens the top appearance */
    border-radius: 8px 8px 0 0; /* Match top corners of wrapper */
    box-sizing: border-box;
}
.visibility-banner:hover {
    filter: brightness(1.1);
}

.visibility-banner-info {
    display: flex;
    gap: 8px; /* Space between value, desc, status */
    align-items: center;
}
.visibility-banner-info .vb-value {
    min-width: 15px; /* Ensure 'P' or 'M' doesn't make it too small */
    text-align: center;
}
.visibility-banner-info .vb-desc {
    flex-grow: 1;
}
.visibility-banner-info .vb-status {
    font-style: italic;
    font-size: 0.9em;
}
.visibility-banner .vb-arrow {
    font-size: 0.8em;
}

.visibility-dropdown {
    display: none;
    position: absolute;
    top: 30px; /* Below the banner */
    left: 0px; /* Align with wrapper's padding edge */
    right: 0px;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 100;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    border-radius: 0 0 5px 5px;
    max-height: 300px; /* Prevent very long dropdowns */
    overflow-y: auto;
}
.visibility-dropdown table {
    width: 100%;
    border-collapse: collapse;
}
.visibility-dropdown td {
    padding: 6px 10px; /* Reduced padding */
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 10px; /* Reduced font size */
    text-align: left;
    border-left: none; 
    border-right: none; 
    height: auto; /* Override general td height */
    max-height: none; /* Override general td max-height */
    white-space: normal; /* Allow text to wrap */
}
.visibility-dropdown tr:last-child td {
    border-bottom: none;
}
.visibility-dropdown td:hover {
    background-color: #f0f0f0;
}
.visibility-dropdown .value-col { width: 8%; font-weight: bold; text-align: center; }
.visibility-dropdown .desc-col { width: auto; } /* Let it take remaining space */
.visibility-dropdown .status-col { width: 15%; font-style: italic; text-align: right; font-size: 0.9em; }


/* Color classes for border and banner */
.visibility-border-green    { --current-visibility-color: #28a745; } /* Green */
.visibility-border-purple   { --current-visibility-color: #6f42c1; } /* Purple */
.visibility-border-orange   { --current-visibility-color: #fd7e14; } /* Orange */
.visibility-border-turquoise{ --current-visibility-color: #20c997; } /* Turquoise */
.visibility-border-gray     { --current-visibility-color: #6c757d; } /* Gray */
.visibility-border-lightgray{ --current-visibility-color: #adb5bd; } /* Light Gray */
.visibility-border-darkgray { --current-visibility-color: #343a40; } /* Dark Gray */
.visibility-border-black    { --current-visibility-color: #000000; } /* Black */

/* Text color adjustments for lighter banner backgrounds */
.visibility-border-orange .visibility-banner,
.visibility-border-turquoise .visibility-banner,
.visibility-border-gray .visibility-banner, /* Standard gray can be light enough for black text */
.visibility-border-lightgray .visibility-banner {
    color: black;
}


/* Adjustments for the main page container to accommodate new card width */
body > #pageContent > form > .container { /* Targeting the outermost .container */
    max-width: 1246px; /* 1200px (content) + 2*20px (padding L/R in wrapper) + 2*3px (border L/R of wrapper) */
    /* Or adjust this value if your border widths or paddings are different. */
    /* For example, if border is 1px: 1200 + 40 + 2 = 1242px */
}

/* Adjustments for the .character-entry when inside the .visibility-wrapper */
.visibility-wrapper > .character-entry.container {
    max-width: 100%; /* Takes full width of the .visibility-wrapper's padded content area */
    margin: 0; /* Remove its own auto margins */
    padding: 0; /* Remove its own padding if it had any from .container */
    border-radius: 0; /* Wrapper now controls outer rounding */
    box-shadow: none; /* Wrapper has shadow now */
    overflow: visible; /* Allow content to naturally flow; wrapper handles clipping if any */
    background-color: #fff; /* Ensure it has its white background */
    border: none; /* Remove its own border if it had any from .container */
}

/* Ensure the table inside .character-entry still behaves as expected */
.visibility-wrapper > .character-entry.container > table {
    width: 100%; /* Table should fill the 1200px effective content width */
}

#charactersContainer.container {
    /* This nested container for characters list should not impose its own max-width if the parent form > .container does */
    max-width: none; /* Allow it to be as wide as its parent */
    padding: 0; /* Remove padding, .visibility-wrapper handles spacing */
    margin: 0;
    border: none;
    box-shadow: none;
    background-color: transparent; /* Make it transparent, page bg shows through */
}

/* Ensure form also takes full width if it's an intermediate wrapper */
#characterEditorForm {
    /* Add any styles if form itself constrains width */
}



/* --- Character Visibility Border Styles (Copied from Admin Version) --- */
.visibility-wrapper {
    position: relative;
    /* max-width: 1200px; */ /* Content area for the character card table - this will be handled by inner .container */
    margin: 0 auto 25px auto; /* Centered, with bottom margin */
    padding: 0 20px; /* 20px padding on left/right, around the character card table */
    padding-top: 38px; /* Space for banner: 30px height + 5px top margin + 3px top border of banner */
    
    border-style: solid;
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-top: none; /* Banner visually forms the top border part */
    border-radius: 8px; /* Rounded corners for the whole wrapper */
    
    /* CSS custom property for border/banner color, to be set by specific classes */
    --current-visibility-color: #ccc; /* Default fallback color */
    border-color: var(--current-visibility-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for the wrapper */
}

.visibility-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px; 
    background-color: var(--current-visibility-color);
    color: white; /* Default text color for banners */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 15px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer; /* Kept cursor pointer for consistency, even if dropdown is informational */
    border-bottom: 3px solid var(--current-visibility-color); /* Thickens the top appearance */
    border-radius: 8px 8px 0 0; /* Match top corners of wrapper */
    box-sizing: border-box;
}
.visibility-banner:hover {
    filter: brightness(1.1);
}

.visibility-banner-info {
    display: flex;
    gap: 8px; /* Space between value, desc, status */
    align-items: center;
}
.visibility-banner-info .vb-value {
    min-width: 15px; /* Ensure 'P' or 'M' doesn't make it too small */
    text-align: center;
}
.visibility-banner-info .vb-desc {
    flex-grow: 1;
}
.visibility-banner-info .vb-status {
    font-style: italic;
    font-size: 0.9em;
}
.visibility-banner .vb-arrow {
    font-size: 0.8em;
}

.visibility-dropdown {
    display: none;
    position: absolute;
    top: 30px; /* Below the banner */
    left: 0px; /* Align with wrapper's padding edge */
    right: 0px;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 100;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    border-radius: 0 0 5px 5px;
    max-height: 300px; /* Prevent very long dropdowns */
    overflow-y: auto;
}
.visibility-dropdown table {
    width: 100%;
    border-collapse: collapse;
}
.visibility-dropdown td {
    padding: 6px 10px; 
    border-bottom: 1px solid #eee;
    /* cursor: pointer; */ /* Not interactive for view-only */
    cursor: default;
    font-size: 10px; 
    text-align: left;
    border-left: none; 
    border-right: none; 
    height: auto; 
    max-height: none; 
    white-space: normal; 
}
.visibility-dropdown tr:last-child td {
    border-bottom: none;
}
/* .visibility-dropdown td:hover { background-color: #f0f0f0; } */ /* No hover effect for non-interactive */

.visibility-dropdown .value-col { width: 8%; font-weight: bold; text-align: center; }
.visibility-dropdown .desc-col { width: auto; } 
.visibility-dropdown .status-col { width: 15%; font-style: italic; text-align: right; font-size: 0.9em; }


/* Color classes for border and banner */
.visibility-border-green    { --current-visibility-color: #28a745; } /* Green */
.visibility-border-purple   { --current-visibility-color: #6f42c1; } /* Purple */
.visibility-border-orange   { --current-visibility-color: #fd7e14; } /* Orange */
.visibility-border-turquoise{ --current-visibility-color: #20c997; } /* Turquoise */
.visibility-border-gray     { --current-visibility-color: #6c757d; } /* Gray */
.visibility-border-lightgray{ --current-visibility-color: #adb5bd; } /* Light Gray */
.visibility-border-darkgray { --current-visibility-color: #343a40; } /* Dark Gray */
.visibility-border-black    { --current-visibility-color: #000000; } /* Black */

/* Text color adjustments for lighter banner backgrounds */
.visibility-border-orange .visibility-banner,
.visibility-border-turquoise .visibility-banner,
.visibility-border-gray .visibility-banner, 
.visibility-border-lightgray .visibility-banner {
    color: black;
}

/* This is the container that holds all the visibility-wrapper cards */
/* On index.html, it's #charactersContainer */
/* On authorPage.html, it's .characters-list */
#charactersContainer, .author-page-container .characters-list {
    /* background-color: transparent; */ /* Optional: if you want page bg to show */
    padding:0; /* No internal padding, visibility-wrapper handles its own */
    margin:0;
    border: none;
    box-shadow: none;
}

/* Adjustments for the .container (character card) when inside the .visibility-wrapper */
.visibility-wrapper > .container { /* This is the actual character card table container */
    max-width: 1200px; /* This maintains the inner card content width */
    margin: 0 auto; /* Center the 1200px card within the padded visibility-wrapper */
    padding: 0; 
    border-radius: 0 0 5px 5px; /* Rounded bottom corners to match wrapper */
    box-shadow: none; 
    overflow: hidden; /* Keep this for the card's own content */
    background-color: #fff; 
    border: none; 
}

/* Ensure the table inside the character card container still behaves as expected */
.visibility-wrapper > .container > table {
    width: 100%; 
}