/* css/detailCharacter.css */

/* Characters Section */
.user-character-activities {
    display: flex;
    width: 100%;
    height: 100%; /* Use full height of parent */
    max-height: 100%; /* Prevent overflow */
}

.quest_container, .game_container {
    width: 70%;
    height: 100%;
    box-sizing: border-box;
}

.quest_container {
    padding: 5px; /* Reduced padding */
}

.activity-button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5vmin; /* Scale font size */
}

.activity-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

body.dark-mode .activity-button {
    background-color: #00cc00;
    color: #1a1a1a;
}

body.dark-mode .activity-button:disabled {
    background-color: #555;
    color: #aaa;
}

.game_container {
    display: flex;
    flex-direction: column;
    padding: 2px; /* Reduced padding */
}

.game_container_upper, .game_container_lower {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-modal-button {
    width: 100%;
    height: 80%;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2vmin; /* Scale font size */
}

body.dark-mode .game-modal-button {
    background-color: #00cc00;
    color: #1a1a1a;
}

.dashboard_characters {
    width: 70%;
    height: 97%;
    overflow-y: auto; /* Allow scrolling */
    box-sizing: border-box;
    background-color: #f5f5f5; /* Light mode */
    padding: 5px; /* Reduced padding */
    border: 1px solid #ccc; /* Light mode border */
    border-radius: 5px;
}

body.dark-mode .dashboard_characters {
    background-color: #2a2a2a; /* Slightly lighter dark for contrast */
    border-color: #00cc00; /* Accent border in dark mode */
}

/* Characters section (dynamic grid) */
.characters_section {
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);*/
    gap: 5px; /* Reduced gap */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Individual character container */
.dashboard_character_container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto; /* Allow content to fit */
}

/* User character section */
.user-character-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100px; /* Fixed height, will be scaled */
    gap: 3px; /* Reduced gap */
    min-height: 0;
}

.user-character-section.enlarged {
    display: flex;
}

/* User character short profile */
.user-character-short-profile {
    width: 60%;
    height: 100%;
    border: 1px solid #000; /* Light mode border */
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 3px; /* Reduced padding */
    background-color: #fff; /* Light mode */
    box-sizing: border-box;
}

body.dark-mode .user-character-short-profile {
    border-color: #00cc00; /* Accent border in dark mode */
    background-color: #2a2a2a; /* Slightly lighter dark for contrast */
}

.character_item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 3px; /* Reduced gap */
}

.character_icon {
    width: 40px; /* Reduced size */
    height: 40px;
    flex-shrink: 0;
}

.character_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.character_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px; /* Reduced gap */
    font-size: 1.5vmin; /* Scale font size */
    overflow: hidden;
}

.charactername,
.level,
.servername {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User character activities */
.user-character-activities {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    height: 100%;
    width: 40%;
    background-color: #e0e0e0; /* Light mode */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px; /* Reduced padding */
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

body.dark-mode .user-character-activities {
    background-color: #333; /* Darker background in dark mode */
}

.dropdown-container {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.activity2timeDropdown {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 150px; /* Reduced width */
    margin-bottom: 3px;
    font-size: 1vmin; /* Scale font size */
    border: 1px solid #ccc; /* Light mode border */
    border-radius: 3px;
    padding: 1px;
    background: #fff; /* Light mode */
    color: #000; /* Light mode text */
}

body.dark-mode .activity2timeDropdown {
    border-color: #00cc00; /* Accent border in dark mode */
    background: #333; /* Darker background in dark mode */
    color: #fff; /* White text in dark mode */
}

.buttons-container {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 3px; /* Reduced gap */
    width: 100%;
    flex-wrap: nowrap;
}

.activity-button {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 2px 4px; /* Reduced padding */
    font-size: 2vmin; /* Scale font size */
    cursor: pointer;
    flex: 1;
    text-align: center;
    border: 1px solid #ccc; /* Light mode border */
    border-radius: 3px;
    background-color: #fff; /* Light mode */
    color: #00cc00; /* Light mode text */
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    max-width: none;
    max-height: none;
    background-image: url(/media/vinylBackground.PNG);
    background-blend-mode: luminosity;
}

body.dark-mode .activity-button {
    border-color: #00cc00; /* Accent border in dark mode */
    background-color: #333; /* Darker background in dark mode */
    color: #fff; /* White text in dark mode */
}

.activity-button:hover {
    background-color: #f0f0f0; /* Light mode hover */
}

body.dark-mode .activity-button:hover {
    background-color: #00cc00; /* Accent color in dark mode */
    color: #1a1a1a; /* Dark text for contrast */
}

.activity-button:disabled {
    cursor: default;
    opacity: 0.5;
    font-size: 2vmin;
}

.activity-button .tooltip {
    font-family: Roboto, Arial, sans-serif;
    cursor: pointer;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Light mode tooltip */
    color: #fff;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 1vmin; /* Scale font size */
    white-space: nowrap;
    z-index: 100;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.dark-mode .activity-button .tooltip {
    background-color: #00cc00; /* Accent color in dark mode */
    color: #1a1a1a; /* Dark text for contrast */
}

.activity-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.remaining-time-container {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 3px; /* Reduced gap */
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.remaining-time {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 0.8vmin; /* Scale font size */
    color: #666; /* Light mode */
    flex: 1;
    text-align: center;
    min-height: 12px; /* Reduced height */
}

body.dark-mode .remaining-time {
    color: #ccc; /* Lighter gray in dark mode */
}

/* Game info container */
.game_info {
    margin-top: 3px;
    padding: 3px; /* Reduced padding */
    background-color: #f0f0f0; /* Light mode */
    border: 1px solid #ddd; /* Light mode border */
    border-radius: 3px;
    font-size: 1.5vmin; /* Scale font size */
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
}

body.dark-mode .game_info {
    background-color: #2a2a2a; /* Slightly lighter dark for contrast */
    border-color: #00cc00; /* Accent border in dark mode */
}

.game_info p {
    margin: 1px 0;
}

.game_info a {
    color: #007bff; /* Light mode link */
    text-decoration: none;
}

body.dark-mode .game_info a {
    color: #00cc00; /* Accent color in dark mode */
}

.game_info a:hover {
    text-decoration: underline;
}

/* User Character New and View */
#user_character_newAndView {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 10px 0;
}

#add_character_button {
    padding: 5px 10px;
    font-size: 0.9em;
    height: 100%;
}

#add_character_button a {
    display: block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    text-decoration: none;
    background-image: url(/media/vinylBackground.PNG);
    background-blend-mode: luminosity;
    color: 00cc00;
}

body.dark-mode #add_character_button a {
    background-color: #333;
    border: 1px solid #00cc00;
    color: #fff;
}

#add_character_button:hover {
    cursor: pointer;
}

#add_character_button[title]:hover:after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    z-index: 1000;
    white-space: nowrap;
}

body.dark-mode #add_character_button[title]:hover:after {
    background: #00cc00;
    color: #1a1a1a;
}

#user_character_editView {
    padding: 5px 10px;
    font-size: 0.9em;
    height: 100%;
}

#user_character_reportButton {
    padding: 5px 10px;
    font-size: 0.9em;
    height: 100%;
    background-color: red;
    color: black;
    margin-left: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

body.dark-mode #user_character_reportButton {
    background-color: #ff4500;
    color: #fff;
}

#user_character_reportButton:hover {
    background-color: darkred;
}

body.dark-mode #user_character_reportButton:hover {
    background-color: #cc3700;
}

.edit-view-button {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

body.dark-mode .edit-view-button {
    background-color: #00cc00;
    color: #1a1a1a;
}

.edit-view-button:hover {
    background-color: #0056b3;
}

body.dark-mode .edit-view-button:hover {
    background-color: #009900;
}

/* Responsive Design */
@media screen and (max-width: 720px) {
    .user-character-activities {
        display: flex;
        width: 100%;
        height: 100%; /* Use full height of parent */
        max-height: 100%; /* Prevent overflow */
    }
    
    .quest_container, .game_container {
        width: 70%;
        height: 100%;
        box-sizing: border-box;
    }
    
    .quest_container {
        padding: 5px; /* Reduced padding */
    }
    
    .activity-button {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1.5vmin; /* Scale font size */
    }
    
    .activity-button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }
    
    body.dark-mode .activity-button {
        background-color: #00cc00;
        color: #1a1a1a;
    }
    
    body.dark-mode .activity-button:disabled {
        background-color: #555;
        color: #aaa;
    }
    
    .game_container {
        display: flex;
        flex-direction: column;
        padding: 2px; /* Reduced padding */
    }
    
    .game_container_upper, .game_container_lower {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .game-modal-button {
        width: 100%;
        height: 80%;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 3vmin; /* Scale font size */
    }
    
    body.dark-mode .game-modal-button {
        background-color: #00cc00;
        color: #1a1a1a;
    }
    
    .dashboard_characters {
        width: 70%;
        height: 97%;
        overflow-y: auto; /* Allow scrolling */
        box-sizing: border-box;
        background-color: #f5f5f5; /* Light mode */
        padding: 5px; /* Reduced padding */
        border: 1px solid #ccc; /* Light mode border */
        border-radius: 5px;
    }
    
    body.dark-mode .dashboard_characters {
        background-color: #2a2a2a; /* Slightly lighter dark for contrast */
        border-color: #00cc00; /* Accent border in dark mode */
    }
    
    /* Characters section (dynamic grid) */
    .characters_section {
        display: flex;
        flex-direction: column;
        gap: 5px; /* Reduced gap */
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    
    /* Individual character container */
    .dashboard_character_container {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: auto; /* Allow content to fit */
    }
    
    /* User character section */
    .user-character-section {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100px; /* Fixed height, will be scaled */
        gap: 3px; /* Reduced gap */
        min-height: 0;
    }
    
    .user-character-section.enlarged {
        display: flex;
    }
    
    /* User character short profile */
    .user-character-short-profile {
        width: 60%;
        height: 100%;
        border: 1px solid #000; /* Light mode border */
        border-radius: 5px;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 3px; /* Reduced padding */
        background-color: #fff; /* Light mode */
        box-sizing: border-box;
    }
    
    body.dark-mode .user-character-short-profile {
        border-color: #00cc00; /* Accent border in dark mode */
        background-color: #2a2a2a; /* Slightly lighter dark for contrast */
    }
    
    .character_item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        gap: 3px; /* Reduced gap */
    }
    
    .character_icon {
        width: 40px !important; /* Reduced size */
        height: 40px !important;
        flex-shrink: 0;
    }
    
    .character_icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    .character_info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1px; /* Reduced gap */
        font-size: 1.5vmin; /* Scale font size */
        overflow: hidden;
    }
    
    .charactername,
    .level,
    .servername {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* User character activities */
    .user-character-activities {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        height: 100%;
        width: 40%;
        background-color: #e0e0e0; /* Light mode */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px; /* Reduced padding */
        box-sizing: border-box;
        position: relative;
        overflow: hidden; /* Prevent overflow */
    }
    
    body.dark-mode .user-character-activities {
        background-color: #333; /* Darker background in dark mode */
    }
    
    .dropdown-container {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .activity2timeDropdown {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: 150px; /* Reduced width */
        margin-bottom: 3px;
        font-size: 1vmin; /* Scale font size */
        border: 1px solid #ccc; /* Light mode border */
        border-radius: 3px;
        padding: 1px;
        background: #fff; /* Light mode */
        color: #000; /* Light mode text */
    }
    
    body.dark-mode .activity2timeDropdown {
        border-color: #00cc00; /* Accent border in dark mode */
        background: #333; /* Darker background in dark mode */
        color: #fff; /* White text in dark mode */
    }
    
    .buttons-container {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        gap: 3px; /* Reduced gap */
        width: 100%;
        flex-wrap: nowrap;
    }
    
    .activity-button {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        padding: 2px 4px; /* Reduced padding */
        font-size: 4vmin; /* Scale font size */
        cursor: pointer;
        flex: 1;
        text-align: center;
        border: 1px solid #ccc; /* Light mode border */
        border-radius: 3px;
        background-color: #fff; /* Light mode */
        color: #00cc00; /* Light mode text */
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        max-width: none;
        max-height: none;
    }
    
    body.dark-mode .activity-button {
        border-color: #00cc00; /* Accent border in dark mode */
        background-color: #333; /* Darker background in dark mode */
        color: #fff; /* White text in dark mode */
    }
    
    .activity-button:hover {
        background-color: #f0f0f0; /* Light mode hover */
    }
    
    body.dark-mode .activity-button:hover {
        background-color: #00cc00; /* Accent color in dark mode */
        color: #1a1a1a; /* Dark text for contrast */
    }
    
    .activity-button:disabled {
        cursor: default;
        opacity: 0.5;
        font-size: 3vmin;
    }
    
    .activity-button .tooltip {
        font-family: Roboto, Arial, sans-serif;
        cursor: pointer;
        text-align: center;
        margin: 0;
        box-sizing: border-box;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333; /* Light mode tooltip */
        color: #fff;
        padding: 3px 5px;
        border-radius: 4px;
        font-size: 1vmin; /* Scale font size */
        white-space: nowrap;
        z-index: 100;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    body.dark-mode .activity-button .tooltip {
        background-color: #00cc00; /* Accent color in dark mode */
        color: #1a1a1a; /* Dark text for contrast */
    }
    
    .activity-button:hover .tooltip {
        visibility: visible;
        opacity: 1;
    }
    
    .remaining-time-container {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        gap: 3px; /* Reduced gap */
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .remaining-time {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 0.8vmin; /* Scale font size */
        color: #666; /* Light mode */
        flex: 1;
        text-align: center;
        min-height: 12px; /* Reduced height */
    }
    
    body.dark-mode .remaining-time {
        color: #ccc; /* Lighter gray in dark mode */
    }
    
    /* Game info container */
    .game_info {
        margin-top: 3px;
        padding: 3px; /* Reduced padding */
        background-color: #f0f0f0; /* Light mode */
        border: 1px solid #ddd; /* Light mode border */
        border-radius: 3px;
        font-size: 1.5vmin; /* Scale font size */
        height: -webkit-fill-available;
        display: flex;
        flex-direction: column;
    }
    
    body.dark-mode .game_info {
        background-color: #2a2a2a; /* Slightly lighter dark for contrast */
        border-color: #00cc00; /* Accent border in dark mode */
    }
    
    .game_info p {
        margin: 1px 0;
    }
    
    .game_info a {
        color: #007bff; /* Light mode link */
        text-decoration: none;
    }
    
    body.dark-mode .game_info a {
        color: #00cc00; /* Accent color in dark mode */
    }
    
    .game_info a:hover {
        text-decoration: underline;
    }
}