:root {
    --header-background-color: #364348;
    --header-foreground-color: #FFFFFF;
}

/* default theme CSS */
:root {
    --body-font-family: 'Open Sans', sans-serif;
    --headings-font-family: 'Open Sans', sans-serif;
    --body-background-color: #F7FAFC;
    --panel-background-color: white;
    --panel-border-color: #E3E8EE;
    /*--panel-color: #15272E;*/
    --background-image: none;
}

:root {
    --background-image: url('https://res.cloudinary.com/featureupvote/image/upload/c_limit,w_2000,f_auto/site_bg4_1_hljkgf.jpg');
}

/* custom board CSS */
/* 
   Echoes of Elysium - Professional Feedback Interface 
   Theme: True Transparency & High Contrast
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Kanit:wght@700&display=swap');

/* --- GLOBAL FONT & BACKGROUND --- */
body {
    background-color: transparent !important; 
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #ffffff !important;
    font-family: "proxima-nova", "Proxima Nova", "Montserrat", "Inter", sans-serif !important;
    margin: 0;
    padding: 0;
}

/* Remove all white backgrounds */
.panel, .container, .wrapper, .content, .main,
.suggestionList, .list-container, .boardContainer {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* --- LOGO & HEADER --- */
.panel.topPanel,
.top-bar {
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    padding-top: 60px !important;
}

.siteTitle,
.top-bar.board-name {
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 5px !important;
    font-size: 2.2rem !important;
    font-family: 'Kanit', sans-serif;
}

/* Detail page title */
.sDetailTitle, .detailTitle, h1, h2, .panel.topPanel h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none;
    font-size: 2.5rem !important;
}

.siteTitle::before {
    content: "";
    display: block;
    margin: 0 auto 30px auto;
    width: 100%;
    max-width: 650px; 
    height: 600px;
    background-image: url('https://images.squarespace-cdn.com/content/65cb7897ccbddd3338816204/45c15ac4-3110-4d34-9913-706dd41a3fbb/feedback_1.png?content-type=image%2Fpng');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 20px rgba(79, 195, 247, 0.5)); 
}

/* --- SUGGESTION LIST ITEMS (TRUE TRANSPARENCY) --- */
.suggestionListItem,
.suggestion-item {
    background-color: rgba(10, 15, 25, 0.85) !important; 
    border: none !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    backdrop-filter: blur(10px);
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 12px;
}



/* --- TEXT CONTRAST FIXES (HIGH CONTRAST) --- */
.sTitle, .sTitle a,
.suggestion-title {
    color: #ffffff !important;
    font-weight: 701 !important;
    text-transform: uppercase !important;
    font-size: 1.6rem !important;
    text-decoration: none !important;
    margin-bottom: 10px;
}

.sDescription {
    color: #f5f5f5 !important; /* Very bright for readability */
    font-size: 1.3rem !important;
    margin-top: 10px !important;
    line-height: 1.6 !important;
}

/* Detail page content */
.sDetailContent, .detailContent, .detail-description, p {
    color: #f5f5f5 !important;
    line-height: 1.6 !important;
}

.sMeta, .sBy, .sLastComment, .sComments {
    color: #e0e0e0 !important;
    font-size: 1rem !important;
}

.sMeta a, .sBy a {
    color: #ffffff !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.sMeta a:hover, .sBy a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.sMeta em, .sBy em {
    color: #999 !important;
}

.sMeta time {
    color: #999 !important;
}

.sComments, .sComments .sLabel {
    color: #4fc3f7 !important;
    font-weight: 400 !important;
}

.sComments:hover {
    color: #7dd7ff !important;
}

/* --- VOTE BOX STYLING --- */
.sNumbers {
    min-width: 100px !important;
    text-align: center !important;
    padding-right: 20px !important;
}

.sVotes {
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    display: block !important;
}

.sLabel {
    display: block !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    color: #ffffff !important; 
}

/* Enhanced Upvote Button */
.vote-button,
button[hx-post*="/vote"],
button[hx-post*="/unvote"] {
    background-color: #4CAF50 !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    border: none !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.2s ease;
}

.vote-button:hover,
button[hx-post*="/vote"]:hover,
button[hx-post*="/unvote"]:hover {
    background-color: #5bc75d !important;
    box-shadow: none !important;
}

.vote-button:active,
button[hx-post*="/vote"]:active,
button[hx-post*="/unvote"]:active {
    transform: none;
    box-shadow: none !important;
}

.vote-count {
    font-size: 2.5rem !important;
    color: #ffffff !important;
    font-family: 'Kanit', sans-serif;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    text-shadow: none;
}

.vote-label {
    color: #ffffff !important;
    font-size: 1rem !important;
    text-transform: lowercase !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* --- LABELS / TAGS --- */
.sLabelUC,
.status-tag {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #d1d1d1 !important;
    text-transform: capitalize !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 3px;
    font-weight: 400;
    letter-spacing: 0;
}

.sLabelPinThis, .labelButton {
    background-color: rgba(188, 32, 38, 0.2) !important;
    border: 1px solid #bc2026 !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
}

.sLabelPinThis:hover, .labelButton:hover {
    background-color: rgba(188, 32, 38, 0.3) !important;
}

.status-tag-planned {
    background-color: rgba(188, 32, 38, 0.2) !important;
    border-color: #bc2026 !important;
    color: #bc2026 !important;
}

.status-tag-implemented {
    background-color: rgba(76, 175, 80, 0.2) !important;
    border-color: #4CAF50 !important;
    color: #4CAF50 !important;
}

.tag-filter-list {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
}

/* --- SEARCH & BUTTONS --- */
#search-query,
.search-container input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 30px;
    width: 250px;
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#search-query:focus,
.search-container input:focus {
    width: 400px;
    border-color: #4fc3f7 !important;
    outline: none;
}

.btn-primary, .btnAddSuggestion {
    background-color: #bc2026 !important;
    border: none !important;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover, .btnAddSuggestion:hover {
    background-color: #e02030 !important;
    box-shadow: 0 0 20px rgba(188, 32, 38, 0.5);
}

/* All buttons and links */
button, .btn, a {
    color: #ffffff !important;
}

button, .btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
}

button:hover, .btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* --- DETAIL PAGE STRUCTURE --- */
.suggestionBody, .panel.suggestionBody {
    background-color: rgba(10, 15, 25, 0.6) !important;
    backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(79, 195, 247, 0.2) !important;
    padding: 30px !important;
    margin: 20px auto !important;
    max-width: 1200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    align-items: flex-start !important;
}

/* Voting Panel - Left side card */
.voting-panel {
    background-color: rgba(10, 15, 25, 0.95) !important;
    border: 1px solid rgba(80, 195, 247, 0.3) !important;
    border-radius: 4px;
    padding: 20px !important;
    margin: 0 !important;
    text-align: center;
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.vote-info {
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
    border-bottom: none;
}

.btn-voting-panel, .btn-voted {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background-color: #4CAF50 !important;
    border: none !important;
    border-radius: 4px !important;
}

.btn-voting-panel:hover, .btn-voted:hover {
    background-color: #5bc75d !important;
}

.btn-voting-options {
    display: none !important;
}

.btn-voting-options button {
    display: none !important;
}

/* Description Section */
.suggestionDescription {
    background-color: transparent !important;
    border-left: 3px solid rgba(79, 195, 247, 0.5) !important;
    padding: 0 0 0 25px !important;
    margin: 0 !important;
    border-radius: 0;
    flex: 1 !important;
}

.suggestionDescription p {
    color: #d1d1d1 !important;
    font-size: 1.3rem !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}

/* Metadata Bar */
.sMeta {
    background-color: rgba(1, 0, 0, 0.3) !important;
    padding: 15px 20px !important;
    margin: 30px 0 0 0 !important;
    border-radius: 0;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
}

/* Controls Bar */
.sControls {
    background-color: transparent !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
}

.sControls .btn-group {
    margin-right: 8px;
    margin-bottom: 8px;
}

.sControls .btn {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #d1d1d1 !important;
    font-weight: 400 !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
}

.sControls .btn:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: rgba(10, 15, 25, 0.95) !important;
    border: 1px solid rgba(79, 195, 247, 0.3) !important;
    backdrop-filter: blur(10px);
}

.dropdown-menu li a {
    color: #ffffff !important;
    padding: 10px 20px !important;
}

.dropdown-menu li a:hover {
    background-color: rgba(79, 195, 247, 0.2) !important;
}

.dropdown-menu .divider {
    background-color: rgba(255, 255, 255, 0.1) !important;
}