/*
 * Cinara Theme CSS - Updated for Bootstrap 5 Responsive Layout
 *
 * This file has been modified to work with the new layout.php.
 * Old fixed-width, absolute-positioned, and grid styles have been removed.
 * New styles for Bootstrap components (.card, .navbar, etc.) have been added.
 */

/* ==========================================================================
   FONTS AND TYPEFACES (KEPT FROM ORIGINAL)
   ========================================================================== */
@font-face {
    font-family: abaddonregular;
    src: url(../fonts/abaddon-webfont.eot);
    src: url(../fonts/abaddon-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/abaddon-webfont.woff) format("woff"), url(../fonts/abaddon-webfont.ttf) format("truetype"), url(../fonts/abaddon-webfont.svg#abaddonregular) format("svg");
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: cinzelbold;
    src: url(../fonts/cinzel-bold-webfont.eot);
    src: url(../fonts/cinzel-bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/cinzel-bold-webfont.woff) format("woff"), url(../fonts/cinzel-bold-webfont.ttf) format("truetype"), url(../fonts/cinzel-bold-webfont.svg#cinzelbold) format("svg");
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: TrajanPro;
    src: url(../fonts/TrajanPro-Regular.otf);
    font-weight: 400;
    font-style: normal
}

/* ==========================================================================
   GENERAL STYLES & PRESERVED THEME ELEMENTS
   ========================================================================== */
html,
input {
    cursor: url(../images/cursor.png), auto;
}

body {
    background-color: #0b1e29;
    background-image: url(../images/background.png);
}

#header img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.panel-title {
    padding-left: 6px;
    margin-top: 8px;
    margin-bottom: 0;
    text-align: center;
    color: #8c692e;
}

/* --- News Article Styles --- */
.articles {
    font-family: TrajanPro;
    padding: 10px 20px
}
.article {
    background-color: #10506336;
    padding: 20px;
    margin-right: 30px;
    margin-bottom: 24px
}
.article .title {
    color: #29bdd3!important;
    font-size: 18px
}
.article .article-date {
    color: #73929b;
    opacity: .5;
    font-size: 12px
}
.article .article-content {
    color: #73929b;
    font-size: 12px;
    padding: 10px 0
}
.default-title {
    color: #29bdd3!important;
    font-size: 24px;
    margin-bottom: 14px
}
p.error {
    color: red;
    font-size: 12px
}

/* --- General Link/Text Styles --- */
a,
.panel a {
    color: #29bdd3!important;
    text-decoration: none!important;
}
a:hover,
.panel a:hover {
    color: #29cff2!important;
}
.l-text {
    color: #47a19c;
    font-family: abaddonregular;
    list-style: none;
    font-size: 32px
}

/* --- Misc Kept Styles --- */
.meter {
    height: 9px;
    position: relative;
    background: #233942;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 4px;
    padding: 2px;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .3);
}
.meter>span {
    display: block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #2bc253;
    position: relative;
    overflow: hidden;
}

#networks {
    width: 285px;
    height: 128px;
    margin-left: 17px;
    margin-top: 7px;
    position: relative;
    margin-bottom: 22px;
    background-image: url(../images/networks/networks.png);
    background-repeat: no-repeat;
}
.network-icons {
    position: absolute;
    top: 55px;
    left: 67px;
}
.network-icons a {
    text-decoration: none;
}

/* --- Page-specific content styles preserved --- */
#auth-login-page, #auth-register-page, #shop-page { text-align: center }
#account-page, #account-password-page, #library-campfires-page, #library-cooking-page, #library-disintegrating-page, #library-gemcrafting-page, #library-lumberjacking-page, #library-mining-page, #library-reporting-page, #library-smithing-page, #library-vocation-page { text-align: center }
#view-character-page, #search-character-page { text-align: center }
/* Add any other specific page content styles here if needed */


/* --- Themed Scrollbar --- */
::-webkit-scrollbar {
    width: 14px;
    background-color: #1e2b34
}
::-webkit-scrollbar-button {
    background-color: #1e2b34
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #1e2b34
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(68, 113, 155, .8)
}


/* ==========================================================================
   NEW BOOTSTRAP 5 STYLES FOR CINARA THEME
   ========================================================================== */

/* --- General Body and Links --- */
body {
    color: #73929b; /* Default text color */
}

a {
    color: #29bdd3;
    text-decoration: none;
}

a:hover {
    color: #5bc8da;
    text-decoration: none;
}

/* --- Main Content and Sidebars (The new .card replaces the old .panel) --- */
.card {
    background-color: #09171f85;
    border: 2px solid #2c7e9d; /* A solid border to replace the old image borders */
    color: #73929b;
    margin-bottom: 1.5rem; /* Add some space between cards */
}

.card-header {
    font-family: 'TrajanPro', sans-serif;
    color: #b78f48;
    background-color: rgba(11, 43, 66, 0.5); /* A slightly different bg for headers */
    border-bottom: 2px solid #2c7e9d;
    font-size: 1.1rem;
}

.card-body {
    font-family: 'TrajanPro', sans-serif;
    font-size: 14px;
    padding: 1.5rem;
}

/* --- Left Menu Sidebar (List Group inside a Card) --- */
.card .list-group-item {
    font-family: 'TrajanPro', sans-serif;
    font-size: 15px;
    background-color: transparent;
    border-bottom: 1px solid #183f4f; /* Separator line */
    padding: 0.75rem 1.25rem;
}

.card .list-group-item:last-child {
    border-bottom: none;
}

.card .list-group-item a {
    color: #b78f48 !important;
    display: block; /* Make the whole area clickable */
    transition: all 0.2s ease-in-out;
}

.card .list-group-item a:hover {
    color: #f0bc4d !important;
    text-decoration: none !important;
    transform: translateX(5px);
}

/* --- Generic Table Styling --- */
table.table {
    background-color: rgba(3, 25, 36, .48);
    border: 2px solid #31565f;
    margin-bottom: 1rem;
}
/* Bootstrap 5 override for table cell text color */
.table>:not(caption)>*>* {
    color: #73929b;
    border-color: #31565f;
    padding: .75rem;
}
table.table a {
    color: #b78f48 !important;
    font-weight: bold;
}
table.table thead th {
    color: #f0bc4d;
    border-bottom-width: 2px;
}
table tr {
	background-color: transparent !important;
}

/* --- Top Navigation Bar Styling --- */
.navbar-dark {
    background-color: #0b2b42 !important; /* Force a dark background */
    border: 1px solid #2c7e9d;
    border-radius: 5px;
}

.navbar-dark .nav-item .nav-link {
    font-family: 'TrajanPro', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    color: #62a6b7;
    text-shadow: 2px 2px #0e0e0e;
    transition: color 0.2s;
}

.navbar-dark .nav-item .nav-link:hover,
.navbar-dark .nav-item .nav-link.active {
    color: #ffffff;
}
.navbar-toggler {
    border-color: #2c7e9d;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28178, 143, 72, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Form & Button Styling --- */
.form-control {
    background-color: #081924;
    border: 1px solid #183f4f;
    color: #fff;
}
.form-control:focus {
    background-color: #081924;
    color: #fff;
    border-color: #29bdd3;
    box-shadow: 0 0 5px #29bdd3;
}
.btn-primary {
    font-family: 'TrajanPro', sans-serif;
    background: #0b2b42;
    color: #f0bc4d;
    border: 1px solid #2c7e9d;
    transition: all 0.2s;
}
.btn-primary:hover {
    border: 1px solid #507b94;
    background-color: #184157;
    color: #f0bc4d;
}

/* --- Preserved Gallery and Lightbox Styles --- */
.gallery-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; padding: 10px; }
.gallery-item { display: block; overflow: hidden; border-radius: 5px; border: 2px solid #444; transition: transform 0.2s ease, border-color 0.2s ease; }
.gallery-item:hover { transform: scale(1.05); border-color: #9d74c4; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: none; justify-content: center; align-items: center; z-index: 1000; }
.lightbox-content { position: relative; max-width: 90%; max-height: 85%; }
.lightbox-image { max-width: 100%; max-height: 100%; display: block; border: 3px solid #fff; border-radius: 5px; }
.lightbox-close { position: absolute; top: 15px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.2s ease; }
.lightbox-close:hover { color: #bbb; }

/* --- Preserved Top Countries Table Styles --- */
.country-rank-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 2em auto; width: 100%; max-width: 600px; }
.top-countries-table { width: 100%; border-collapse: collapse; font-size: 16px; color: #333; }
.top-countries-table thead th { text-align: left; padding: 12px 15px; border-bottom: 2px solid #e0e0e0; font-weight: 600; color: #666; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
.top-countries-table thead .rank-col { width: 60px; }
.top-countries-table thead .players-col { text-align: right; }
.top-countries-table tbody td { padding: 15px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; }
.top-countries-table tbody tr:last-child td { border-bottom: none; }
.top-countries-table tbody tr:hover { background-color: #f9f9f9; }
.top-countries-table .rank-cell { font-weight: bold; font-size: 18px; color: #007bff; }
.top-countries-table .players-cell { text-align: right; font-weight: 500; }
.top-countries-table .country-cell { display: flex; align-items: center; gap: 15px; font-weight: 500; }
.top-countries-table .country-flag { width: 32px; height: auto; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
@media (max-width: 768px) { .top-countries-table thead { display: none; } .top-countries-table tr { display: block; margin-bottom: 15px; border-radius: 8px; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e9e9e9; } .top-countries-table td { display: block; text-align: right; padding: 12px 15px; position: relative; border-bottom: 1px solid #f0f0f0; } .top-countries-table td:last-child { border-bottom: none; } .top-countries-table td::before { content: attr(data-label); position: absolute; left: 15px; font-weight: bold; color: #333; text-align: left; } .top-countries-table .players-cell, .top-countries-table .rank-cell { text-align: right; } .top-countries-table .country-cell { justify-content: flex-end; } }