/* 1. The Foundation */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}

body {
background-color: #0a0a0a;
color: #f2e8cf;
overflow-x: hidden;
}

/* 2. The Roman Navbar */
.navbar {
background-color: #1a1a1a;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 3px double #D4AF37;
position: sticky;
top: 0;
z-index: 1000;
}

.nav-content {
width: 95%;
max-width: 1400px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
color: #D4AF37;
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 2px 2px #800000;
display: flex;
align-items: center;
gap: 12px;
}

.logo-img {
height: 45px;
width: auto;
border: 1px solid #D4AF37;
background: #000;
}

.search-bar input {
background-color: #222;
border: 1px solid #D4AF37;
color: #D4AF37;
padding: 10px 20px;
width: 300px;
font-style: italic;
outline: none;
}

/* 3. Three-Column Layout */
.main-layout {
max-width: 1400px; 
margin: 30px auto;
display: flex;
gap: 25px; 
padding: 0 20px;
align-items: flex-start; /* Keeps sidebars from stretching weirdly */
}

/* Sidebar Columns */
.sidebar-left, .sidebar-right {
flex: 1;
min-width: 250px;
position: sticky;
top: 100px;
}

/* Sidebar Label Spacing */
.nav-label {
font-size: 0.75rem;
text-transform: uppercase;
color: #666;
letter-spacing: 1.5px;
margin-bottom: 10px;
font-weight: bold;
}

/* Location Items Styling */
.location-item {
padding: 10px;
margin: 5px 0;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
color: #bbb; 
list-style: none;
}

.location-item:hover {
background: rgba(255, 255, 255, 0.05);
color: white;
padding-left: 15px; /* Subtle slide effect on hover */
}

/* Center Feed */
.feed-column {
flex: 2;
min-width: 500px;
}

/* 4. Imperial Cards & Borders */
.roman-border {
border: 2px solid #D4AF37;
background: linear-gradient(145deg, #1a1a1a, #111);
}

.sidebar-card {
padding: 20px;
margin-bottom: 20px;
}

.sidebar-card h3 {
color: #D4AF37;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
border-bottom: 1px solid #333;
padding-bottom: 10px;
}

/* 5. Province List (Left Sidebar) */
.province-list {
list-style: none;
}

.province-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
margin-bottom: 8px;
cursor: pointer;
transition: 0.3s ease;
border-left: 3px solid transparent;
}

.province-item strong {
display: block;
color: #D4AF37;
}

.province-item p {
font-size: 11px;
color: #888;
}

/* Thematic Hovers */
.egypt:hover { border-left-color: #e3b04b; background: rgba(227, 176, 75, 0.1); }
.judea:hover { border-left-color: #8ba4b9; background: rgba(139, 164, 185, 0.1); }
.gaul:hover { border-left-color: #4a7c44; background: rgba(74, 124, 68, 0.1); }
.britannia:hover { border-left-color: #708090; background: rgba(112, 128, 144, 0.1); }

/* 6. Create Post Box */
.create-post {
padding: 20px;
margin-bottom: 30px;
}

.post-top {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}

.post-top input {
flex-grow: 1;
background-color: #2a2a2a;
border: 1px inset #D4AF37;
padding: 15px;
color: #fff;
font-size: 18px;
outline: none;
}

/* 7. Post Styling */
.post {
padding: 20px;
margin-bottom: 25px;
}

.post-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}

.post-user {
font-weight: bold;
color: #D4AF37;
font-size: 18px;
}

.post-time {
color: #888;
font-size: 12px;
text-transform: uppercase;
}

.post-image img {
width: 100%;
border: 1px solid #D4AF37;
margin: 15px 0;
}

/* 8. Global UI Elements */
.profile-circle {
width: 50px;
height: 50px;
background-color: #800000;
border: 2px solid #D4AF37;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.profile-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}

.nav-btn, .action-btn {
background: none;
border: none;
color: #D4AF37;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: 0.3s;
}

.post-actions {
display: flex;
border-top: 1px solid #333;
padding-top: 10px;
}

.action-btn {
flex: 1;
padding: 10px;
}

.action-btn:hover {
background-color: #800000;
color: white;
}

.divider { border: 0; border-top: 1px solid #333; margin-bottom: 15px; }

.trending-list li { margin-bottom: 15px; display: flex; flex-direction: column; cursor: pointer; }
.trend-topic { font-weight: bold; color: #f2e8cf; }
.trend-stats { font-size: 12px; color: #888; }

.province-chat {
background: #1a1a1a;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Cleaner font for chat */
}

#chat-messages {
display: flex;
flex-direction: column;
gap: 8px;
}

.chat-bubble {
background: #333;
padding: 8px 12px;
border-radius: 12px;
max-width: 85%;
font-size: 14px;
color: #f2e8cf;
}

.chat-bubble.me {
align-self: flex-end;
background: #800000; /* Imperial Red for your messages */
border: 1px solid #D4AF37;
}

/* --- Province Themes --- */

/* Aegyptus Theme Variables */
.theme-egypt {
--egypt-gold: #C5A059;
--egypt-sand: #1e1a11;
}

.theme-egypt .roman-border {
border-color: var(--egypt-gold);
box-shadow: 0 0 15px rgba(197, 160, 89, 0.2);
}

/* View Toggle Buttons */
.view-toggle {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 10px;
}

.toggle-btn {
background: transparent;
border: 1px solid var(--egypt-gold);
color: var(--egypt-gold);
padding: 8px 20px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
}

.toggle-btn.active {
background: var(--egypt-gold);
color: #000;
}

.return-link {
display: block;
margin-top: 15px;
color: #888;
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}

/* --- UNIVERSAL PROVINCE STYLES --- */
#province-view, #iudaea-view {
width: 100%;
/* Remove max-width if it's smaller than your feed-column */
flex-grow: 1; 
margin: 0; 
}

/* This ensures the buttons use the theme's color */
.toggle-btn {
background: transparent;
border: 1px solid var(--province-accent);
color: var(--province-accent);
padding: 8px 20px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
}

.toggle-btn.active {
background: var(--province-accent);
color: #000;
}

/* --- THEME DEFINITIONS --- */

.theme-egypt {
--province-accent: #C5A059; /* Gold */
}

.theme-iudaea {
--province-accent: #8ba4b9; /* Slate Blue */
}

/* Apply the accent color to the borders of WHICHEVER province is active */
.theme-egypt .roman-border, 
.theme-iudaea .roman-border {
border-color: var(--province-accent) !important;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

/* Gallia Theme Variables */
.theme-gaul {
--province-accent: #4A7C44; /* Forest Green */
}

.theme-gaul .province-banner {
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
url('https://www.transparenttextures.com/patterns/wood-pattern.png');
border-bottom: 5px solid var(--province-accent);
}

.theme-gaul .roman-border {
border-color: var(--province-accent) !important;
box-shadow: 0 0 15px rgba(74, 124, 68, 0.2);
}

/* Britannia Political Theme */
.theme-britannia {
--province-accent: #663399; /* Imperial Purple for Politics */
}

.theme-britannia .province-banner {
background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), 
url('https://www.transparenttextures.com/patterns/natural-paper.png');
border-bottom: 5px solid var(--province-accent);
}

.theme-britannia .roman-border {
border-color: var(--province-accent) !important;
}

.theme-britannia .toggle-btn.active {
background: var(--province-accent);
color: #fff;
}

/* Forum Theme - Crimson & Marble */
.theme-forum {
--province-accent: #e74c3c; /* Marketplace Crimson */
}

/* Inherit the same border behavior as the provinces */
.theme-forum .roman-border {
border-color: var(--province-accent) !important;
box-shadow: 0 0 15px rgba(231, 76, 60, 0.15);
}

.theme-forum .toggle-btn.active {
background: var(--province-accent);
color: #fff;
border-color: var(--province-accent);
}

/* Colosseum Theme - Blood & Iron */
.theme-colosseum {
--arena-red: #8b0000; /* Dark Blood Red */
--iron-grey: #2f2f2f;
}

.theme-colosseum .province-banner {
background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), 
url('https://www.transparenttextures.com/patterns/asfalt-dark.png'); /* Gritty texture */
border-bottom: 5px solid var(--arena-red);
}

.theme-colosseum .roman-border {
border-color: var(--arena-red) !important;
box-shadow: 0 0 20px rgba(139, 0, 0, 0.3);
}

.theme-colosseum .toggle-btn.active {
background: var(--arena-red);
color: #fff;
border-color: var(--arena-red);
}

/* Pompeii Theme - Wine & Gold */
.theme-pompeii {
--pompeii-wine: #5e1914; 
--pompeii-gold: #d4af37;
}

.theme-pompeii .province-banner {
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
url('https://www.transparenttextures.com/patterns/pinstriped-suit.png'); 
border-bottom: 5px solid var(--pompeii-gold);
}

.theme-pompeii .roman-border {
border-color: var(--pompeii-gold) !important;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.theme-pompeii .toggle-btn.active {
background: var(--pompeii-gold);
color: #000;
font-weight: bold;
border-color: var(--pompeii-gold);
}

/* Ostia Theme - Coastal Cinema */
.theme-ostia {
--ostia-teal: #008080;
--ostia-silver: #c0c0c0;
}

.theme-ostia .province-banner {
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); 
border-bottom: 5px solid var(--ostia-teal);
}

.theme-ostia .roman-border {
border-color: var(--ostia-teal) !important;
box-shadow: 0 0 15px rgba(0, 128, 128, 0.2);
}

.theme-ostia .toggle-btn.active {
background: var(--ostia-teal);
color: #fff;
border-color: var(--ostia-teal);
}

.chat-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.chat-bubble {
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    background: #940303;
    font-size: 0.9rem;
    border: 1px solid #ddd;
}

.preview-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.close-preview {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(128, 0, 0, 0.8); /* Roman Maroon */
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
}

/* This ensures that when a province view is active, it behaves like the center column */
#province-view, 
#iudaea-view, 
#gallia-view, 
#britannia-view, 
#colosseum-view, 
#forum-view, 
#pompeii-view, 
#ostia-view {
    flex: 2;           /* Matches the .feed-column flex grow */
    min-width: 500px;  /* Matches the .feed-column min-width */
    margin: 0;         /* Removes any stray margins */
}

.admin-delete-btn {
    background: #4a0000;
    color: #ffd700;
    border: 1px solid #ffd700;
    padding: 2px 8px;
    font-size: 10px;
    cursor: pointer;
    float: right;
    font-family: 'Cinzel', serif;
}

.admin-delete-btn:hover {
    background: #ff0000;
    color: white;
}

.roman-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; /* Always on top */
}

.auth-card {
    background: #ff5900; /* Parchment color */
    padding: 30px;
    width: 320px;
    text-align: center;
    box-shadow: 0 0 20px #ffd700;
}

.auth-card input {
    width: 90%;
    padding: 10px;
    margin: 8px 0;
    background: rgba(255,255,255,0.5);
    border: 1px solid #8b4513;
    font-family: 'Cinzel', serif;
}

.auth-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

/* Comment Section Styling */
.comment-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(139, 69, 19, 0.3);
    font-size: 0.9rem;
}

.comment {
    background: rgba(0, 0, 0, 0.03);
    margin: 5px 0;
    padding: 8px;
    border-radius: 4px;
}

.comment-user {
    font-weight: bold;
    color: #800000;
    font-size: 0.8rem;
}

.comment-input-area {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.comment-input {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #8b4513;
    font-family: 'Cinzel', serif;
}