@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* Reset and Globals */
body {
    background: transparent !important;
    color: #e0dcd3 !important;
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

a {
    color: #ff9900 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

a:hover {
    color: #ffcc00 !important;
    text-decoration: underline !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .ico_mug {
    color: #ffcc00 !important;
    font-family: 'Marcellus SC', Georgia, serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.5) !important;
    margin-top: 0 !important;
}

.ico_mug {
    background: rgba(255, 69, 0, 0.1) !important;
    border-bottom: 2px solid #ff4500 !important;
    padding: 12px 15px 12px 35px !important;
    border-radius: 4px 4px 0 0 !important;
    font-size: 16px !important;
}

/* Containers and Panels */
#container {
    width: 100% !important;
    max-width: 1300px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    overflow: visible !important;
}

#dashboard {
    width: 100% !important;
    background: rgba(16, 12, 10, 0.75) !important;
    border: 1px solid rgba(255, 69, 0, 0.2) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 69, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

#sidebar {
    width: 100% !important;
    background: rgba(16, 12, 10, 0.75) !important;
    border: 1px solid rgba(255, 69, 0, 0.2) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 69, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Flex Grid Layout */
#content {
    background: transparent !important;
    padding: 0 !important;
}

#content_main {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    align-items: flex-start !important;
}

#main_panel_container {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: calc(100% - 300px) !important;
    max-width: calc(100% - 300px) !important;
    float: none !important;
    background: transparent !important;
    overflow: visible !important;
}

#sidebar.right {
    flex: 0 0 280px !important;
    width: 280px !important;
    float: none !important;
}

@media (max-width: 500px) {
    #content_main {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    #main_panel_container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    #sidebar.right {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

/* Header within Iframe adjustment */
#header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 69, 0, 0.2) !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
}

#logo {
    display: none !important;
}

#profile_info {
    float: none !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
}

#profile_info img#avatar {
    margin: 0 !important;
    border-radius: 4px !important;
    width: 32px !important;
    height: 32px !important;
}

#profile_info p {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: #e0dcd3 !important;
    line-height: 1.4 !important;
}

#profile_info p strong {
    color: #ff9900 !important;
}

/* Hide duplicate footer */
#footer {
    display: none !important;
}

/* Form and Fields */
input[type="text"], input[type="password"], select, textarea {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 69, 0, 0.25) !important;
    color: #fff !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    margin: 5px 0 !important;
}

input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    border-color: #ff8c00 !important;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.4) !important;
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Buttons */
input[type="submit"], button, .nk-btn {
    background: linear-gradient(45deg, #ff4500, #ff8c00) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Marcellus SC', sans-serif !important;
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    display: inline-block !important;
}

input[type="submit"]:hover, button:hover, .nk-btn:hover {
    background: linear-gradient(45deg, #ff8c00, #ffcc00) !important;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.5) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Navigation Menu styling */
#top_menu {
    background: rgba(20, 15, 10, 0.8) !important;
    border: 1px solid rgba(255, 69, 0, 0.25) !important;
    border-radius: 6px !important;
    height: auto !important;
    padding: 5px !important;
    margin-bottom: 20px !important;
}

#top_menu ul.sf-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#top_menu ul.sf-menu li {
    float: none !important;
}

#top_menu ul.sf-menu li a {
    color: #e0dcd3 !important;
    font-family: 'Marcellus SC', sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 10px 10px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

#top_menu ul.sf-menu li a:hover, #top_menu ul.sf-menu li.active a {
    background: linear-gradient(45deg, #ff4500, #ff8c00) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.4) !important;
    text-decoration: none !important;
}

/* Shortcuts Grid */
#shortcuts {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 20px !important;
    padding: 15px !important;
    background: rgba(16, 12, 10, 0.75) !important;
    border: 1px solid rgba(255, 69, 0, 0.2) !important;
    border-radius: 8px !important;
}

#shortcuts ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#shortcuts ul li {
    float: none !important;
    list-style: none !important;
}

#shortcuts ul li a {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e0dcd3 !important;
    width: 90px !important;
    height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#shortcuts ul li a img {
    max-height: 32px !important;
    width: auto !important;
    margin-bottom: 8px !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2)) !important;
    transition: transform 0.3s ease !important;
}

#shortcuts ul li a span {
    font-size: 11px !important;
    background: transparent !important;
    color: #e0dcd3 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
    font-weight: bold !important;
}

#shortcuts ul li a:hover {
    background: rgba(255, 69, 0, 0.1) !important;
    border: 1px solid #ff4500 !important;
    box-shadow: 0 0 12px rgba(255, 69, 0, 0.3) !important;
    transform: translateY(-3px) !important;
    text-decoration: none !important;
}

#shortcuts ul li a:hover img {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.5)) !important;
}

/* Character Cards styling */
.style11, .style21, .style31, .style22 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 69, 0, 0.2) !important;
    background-size: cover !important;
    background-position: right center !important;
    margin: 0 0 15px 0 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s ease !important;
    border-collapse: separate !important;
    overflow: hidden !important;
}

.style11 {
    background-image: url('knight_modern.jpg') !important;
}
.style21 {
    background-image: url('mage_modern.jpg') !important;
}
.style31 {
    background-image: url('archer_modern.jpg') !important;
}
.style22 {
    background-image: url('thief_modern.jpg') !important;
}

.style11:hover, .style21:hover, .style31:hover, .style22:hover {
    border-color: #ff8c00 !important;
    box-shadow: 0 0 15px rgba(255, 100, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

.style11 td, .style21 td, .style31 td, .style22 td {
    padding: 12px !important;
    background: rgba(10, 8, 7, 0.65) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    border: none !important;
}

/* Exp Progress Bar Styling */
img[src*="design_2_green_02.gif"] {
    background: linear-gradient(90deg, #ff4500, #ffcc00) !important;
    height: 10px !important;
    border-radius: 4px 0 0 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

img[src*="design_2_red_02.gif"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    height: 10px !important;
    border-radius: 0 4px 4px 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

img[src*="design_2_red_01.gif"], img[src*="design_2_red_03.gif"] {
    display: none !important;
}

/* Tables and Panels Layout inside content */
table.frame {
    width: 100% !important;
    border: 1px solid rgba(255, 69, 0, 0.2) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border-collapse: separate !important;
}

table.frame table td {
    background: rgba(0, 0, 0, 0.25) !important;
    color: #e0dcd3 !important;
    border-bottom: 1px solid rgba(255, 69, 0, 0.15) !important;
    font-size: 13px !important;
    padding: 12px 15px !important;
}

table.frame table td.fieldarea {
    background: rgba(255, 140, 0, 0.06) !important;
    color: #ff9900 !important;
    border-right: 1px solid rgba(255, 69, 0, 0.15) !important;
    font-weight: bold !important;
    width: 180px !important;
}

/* Generic standard tables */
table:not(.style11):not(.style21):not(.style31):not(.style22) {
    width: 100% !important;
}

th {
    color: #ffcc00 !important;
    font-family: 'Marcellus SC', sans-serif !important;
    font-weight: bold !important;
    padding: 10px !important;
    border-bottom: 1px solid rgba(255, 69, 0, 0.3) !important;
}

td {
    padding: 10px !important;
    color: #e0dcd3 !important;
}

/* Alerts and Messages styling */
#success, .msg-ok00, .msg-ok, .msg-info {
    border: 1px solid #00ff00 !important;
    background: rgba(0, 255, 0, 0.1) !important;
    color: #00ff00 !important;
    padding: 12px !important;
    border-radius: 5px !important;
    margin: 15px 0 !important;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
    font-weight: bold !important;
}

#fail, .msg-erro, .msg-error {
    border: 1px solid #ff3333 !important;
    background: rgba(255, 51, 51, 0.1) !important;
    color: #ff3333 !important;
    padding: 12px !important;
    border-radius: 5px !important;
    margin: 15px 0 !important;
    text-shadow: 0 0 5px rgba(255, 51, 51, 0.3) !important;
    font-weight: bold !important;
}

#warning, .msg-warn {
    border: 1px solid #ffaa00 !important;
    background: rgba(255, 170, 0, 0.1) !important;
    color: #ffaa00 !important;
    padding: 12px !important;
    border-radius: 5px !important;
    margin: 15px 0 !important;
    text-shadow: 0 0 5px rgba(255, 170, 0, 0.3) !important;
    font-weight: bold !important;
}

/* Login template styling */
.login-card-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.login-card {
    background: rgba(16, 12, 10, 0.85) !important;
    border: 1px solid rgba(255, 69, 0, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 69, 0, 0.15) !important;
    padding: 30px !important;
    width: 100% !important;
    max-width: 450px !important;
    box-sizing: border-box !important;
}

.login-card h1 {
    text-align: center !important;
    margin-bottom: 25px !important;
    font-size: 24px !important;
}

.login-card form table {
    margin-bottom: 20px !important;
}

.login-card form table td {
    padding: 8px 0 !important;
}

.login-card .links-area {
    text-align: center !important;
    margin-top: 15px !important;
    line-height: 2 !important;
}

/* Legacy Table Overrides to prevent invisible text on light backgrounds */
.tbodys, .tbodysn, .trs, .tds, .subject, .subjects, .subjectss, .subjectssm, .row2, thead tr th, theadw, .theadw {
    background-color: rgba(16, 12, 10, 0.5) !important;
    background-image: none !important;
    color: #e0dcd3 !important;
    border-color: rgba(255, 69, 0, 0.15) !important;
}

.tbodys tr:hover td, .tbodysn tr:hover td {
    background-color: rgba(255, 69, 0, 0.08) !important;
}

thead tr th, theadw, .theadw {
    background-color: rgba(255, 140, 0, 0.08) !important;
    color: #ffcc00 !important;
    font-family: 'Marcellus SC', sans-serif !important;
    font-weight: bold !important;
    border-bottom: 2px solid rgba(255, 69, 0, 0.3) !important;
}

/* Force hardcoded black font tags to inherit the parent text color */
font[color="black" i], span[style*="color: black" i], span[style*="color:#000000" i] {
    color: inherit !important;
}

/* Modern Character Information Card layout */
.character-info-card {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 25px !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    color: #e0dcd3 !important;
}

.stats-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.stats-grid-two-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
}

@media (max-width: 576px) {
    .stats-grid-two-cols {
        grid-template-columns: 1fr !important;
    }
}

.stat-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 69, 0, 0.1) !important;
    padding-bottom: 8px !important;
}

.stat-label {
    color: #ff9900 !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.stat-value {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.class-portrait-wrapper {
    position: relative !important;
    border: 2px solid rgba(255, 69, 0, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
}

.class-portrait-wrapper:hover {
    border-color: #ff8c00 !important;
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.3) !important;
}

.class-portrait-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.portrait-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #ffcc00 !important;
    text-align: center !important;
    padding: 6px !important;
    font-family: 'Marcellus SC', sans-serif !important;
    font-weight: bold !important;
    font-size: 14px !important;
    border-top: 1px solid rgba(255, 69, 0, 0.2) !important;
}

/* Admin Sidebar Links */
.admin-panel-sidebar {
    margin-top: 20px !important;
}

.admin-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.admin-links li {
    float: none !important;
    margin: 0 !important;
    display: block !important;
}

.admin-links li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: rgba(255, 69, 0, 0.04) !important;
    border: 1px solid rgba(255, 69, 0, 0.15) !important;
    border-radius: 6px !important;
    color: #e0dcd3 !important;
    transition: all 0.3s ease !important;
    font-weight: bold !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.admin-links li a img {
    width: 20px !important;
    height: 20px !important;
    max-height: 20px !important;
    filter: drop-shadow(0 0 3px rgba(255, 69, 0, 0.2)) !important;
    transition: transform 0.3s ease !important;
}

.admin-links li a span {
    font-size: 13px !important;
    color: #e0dcd3 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    width: auto !important;
    font-weight: bold !important;
}

.admin-links li a:hover {
    background: rgba(255, 69, 0, 0.12) !important;
    border-color: #ff4500 !important;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.3) !important;
    transform: translateX(4px) !important;
    text-decoration: none !important;
}

.admin-links li a:hover img {
    transform: scale(1.1) !important;
}

.btn-sidebar-logout:hover {
    background: linear-gradient(135deg, #b22222, #ff4500) !important;
    box-shadow: 0 0 18px rgba(255, 69, 0, 0.7) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0px rgba(255, 215, 0, 0), inset 0 0 0px rgba(255, 215, 0, 0); }
    50% { box-shadow: 0 0 15px rgba(255, 215, 0, 1), inset 0 0 15px rgba(255, 215, 0, 0.5); }
    100% { box-shadow: 0 0 0px rgba(255, 215, 0, 0), inset 0 0 0px rgba(255, 215, 0, 0); }
}

#shortcuts ul li a.special-effect {
    animation: pulseGlow 1.5s infinite ease-in-out !important;
    border: 1px solid rgba(255, 215, 0, 0.5) !important;
}