/**
 * Ganja Fight Club Custom Theme Styles
 * Sngine v4.1.1 Customization
 * 
 * FOLLOWS SNGINE STRUCTURE:
 * - Base styles (no class) = DAY MODE (when night-mode class is NOT present)
 * - body.night-mode = NIGHT MODE (when night-mode class IS present)
 * 
 * Brand Colors:
 * - Primary (Bronze): #cd7f32
 * - Secondary (Dark Green): #2c5530
 */

/* ============================================
   TYPOGRAPHY
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Market+Deco&family=Montserrat:wght@300;400;500;600;700&family=Reggae+One&display=swap');

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.card-header h6,
.page-title,
.post-title {
    font-family: 'Reggae One', cursive, Georgia, serif;
    font-weight: 700;
}

/* ============================================
   COLOR VARIABLES - OVERRIDE SNGINE DEFAULTS
   ============================================ */

:root {
    /* GFC Brand Colors */
    --gfc-bronze: #cd7f32;
    --gfc-bronze-hover: #e69d4a;
    --gfc-dark-green: #2c5530;
    --gfc-light-green: #4a7c59;
    
    /* Override Sngine link color with GFC bronze */
    --link-color: var(--gfc-bronze);
    
    /* GFC Dark Mode Colors (when night-mode is active) */
    --gfc-dark-bg: #1a1a1a;
    --gfc-darker-bg: #0f0f0f;
    --gfc-light-text: #f0f0f0;
    
    /* GFC Light Mode Colors (base - when night-mode is NOT active) */
    --gfc-light-bg: #ffffff;
    --gfc-light-bg-alt: #f5f5f5;
    --gfc-light-bg-body: #f0f2f5;
    --gfc-dark-text: #111111;
    --gfc-light-text-readable: #333333; /* Darker text for better visibility on light backgrounds */
    --gfc-light-input-bg: #ffffff; /* White background for input fields */
    --gfc-light-input-hover: #f8f9fa;
    --gfc-light-border: #e0e0e0;
    --gfc-light-border-green: #a8c5a8;
}

/* Override Sngine variables for GFC branding - DAY MODE (base) */
:root {
    /* Day mode (base - when night-mode class is NOT present) */
    --body-bg-color: #f0f2f5;
    --body-color: #000000;
    --header-bg-color: #ffffff;
    
    /* Night mode (when body.night-mode class IS present) */
    --body-bg-color-dark: var(--gfc-darker-bg);
    --body-color-dark: var(--gfc-light-text);
    --header-bg-color-dark: var(--gfc-dark-bg);
    --card-dark-color: var(--gfc-dark-bg);
    --card-dark-divider: var(--gfc-dark-green);
    --card-dark-hover: var(--gfc-darker-bg);
    --card-dark-input: var(--gfc-dark-bg);
    --card-dark-input-color: var(--gfc-light-text);
}

/* ============================================
   DAY MODE (BASE STYLES - NO NIGHT-MODE CLASS)
   ============================================ */

/* Body - Day Mode */
body {
    background-color: #f0f2f5;
    color: #000000;
    font-weight: 400;
}

/* Cards - Day Mode - WHITE BACKGROUND, BLACK TEXT */
.card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #000000;
}

.card * {
    color: #000000;
}

.card-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    color: #000000;
}

.card-header * {
    color: #000000;
}

.card-body {
    color: #000000;
}

.card-body * {
    color: #000000;
}

/* Sidebar Navigation - Day Mode */
.main-side-nav-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
}

.main-side-nav a,
.main-side-nav .static {
    color: #000000;
    font-weight: 500;
}

.main-side-nav a:hover {
    color: var(--gfc-bronze);
    background-color: #f5f5f5;
}

.main-side-nav > li.active > a {
    background-color: #f5f5f5;
    color: var(--gfc-bronze);
}

.main-side-nav a[data-bs-toggle="collapse"]:after {
    color: var(--gfc-bronze);
}

/* Header - Day Mode - WHITE BACKGROUND */
.main-header {
    background: #ffffff;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

/* Override any header children - ALL TEXT BLACK */
.main-header * {
    color: #000000 !important;
}

.main-header .logo,
.main-header .logo *,
.main-header .logo-wrapper,
.main-header .logo-wrapper *,
.main-header .logo img {
    color: #000000 !important;
}

/* Search input - Day Mode */
.main-header .search-wrapper {
    background: transparent !important;
}

.main-header .search-wrapper .form-control {
    background-color: #f2f2f2 !important;
    background: #f2f2f2 !important;
    color: #000000 !important;
    border: 0 none !important;
    font-weight: 600 !important;
}

.main-header .search-wrapper .form-control::placeholder,
.main-header .search-wrapper .form-control::-webkit-input-placeholder {
    color: #666666 !important;
    font-weight: 400 !important;
}

/* Header navigation text */
.main-header .header-navigation a,
.main-header .primary-menu a,
.main-header .header-navigation li a,
.main-header .primary-menu > li > a {
    color: #000000 !important;
    font-weight: 600 !important;
}

.main-header .header-navigation a:hover,
.main-header .primary-menu a:hover,
.main-header .header-navigation li a:hover,
.main-header .primary-menu > li > a:hover {
    color: var(--gfc-bronze) !important;
}

/* User menu in header */
.main-header .user-menu,
.main-header .user-menu * {
    color: #000000 !important;
}

/* Posts - Day Mode - WHITE BACKGROUND, BLACK TEXT */
.post {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #000000;
}

.post * {
    color: #000000;
}

.post-header {
    border-bottom: 1px solid #e0e0e0;
    background-color: #f5f5f5;
}

.post-header * {
    color: #000000;
}

.post-body {
    color: #000000;
}

.post-body * {
    color: #000000;
}

/* Publisher - Day Mode */
.publisher {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #000000;
}

.publisher textarea,
.publisher input {
    background-color: #ffffff;
    color: #000000;
    border-color: #e0e0e0;
    font-weight: 600;
}

.publisher textarea::placeholder,
.publisher input::placeholder {
    color: #666666;
}

/* Forms - Day Mode - WHITE BACKGROUND, BLACK TEXT */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #e0e0e0;
    font-weight: 400;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    font-weight: 400;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--gfc-bronze);
    box-shadow: 0 0 0 2px rgba(205, 127, 50, 0.2);
    background-color: #ffffff;
    color: #000000;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #666666;
    font-weight: 400;
}

label,
.form-label {
    color: #000000;
    font-weight: 700;
}

/* Links - Light Mode */
a:not(.btn):not(.badge):not(.dropdown-item) {
    color: var(--gfc-bronze);
    font-weight: 500;
}

a:not(.btn):not(.badge):not(.dropdown-item):hover {
    color: var(--gfc-bronze-hover);
    text-decoration: underline;
}

/* Text Elements - Day Mode - BLACK TEXT */
p, span:not(.badge):not(.main-icon):not(.header-icon):not(.action-icon),
li:not(.main-side-nav > li):not(.side-nav > li),
td, th, small, em {
    color: #000000;
    font-weight: 400;
}

strong, b {
    color: #000000;
    font-weight: 600;
}

.text-muted {
    color: #555555;
    font-weight: 400;
}

/* Headings - Day Mode - BLACK TEXT - HIGH CONTRAST */
h1, h2, h3, h4, h5, h6,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.page-title,
.post-title,
.section-title,
.card-title {
    color: #000000 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Ensure headings in cards are visible */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Dropdowns - Day Mode - HIGH CONTRAST */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item {
    color: #000000 !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f5f5f5 !important;
    color: var(--gfc-bronze) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--gfc-bronze) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #999999 !important;
    opacity: 0.6 !important;
}

.dropdown-divider {
    border-top-color: #e0e0e0 !important;
    margin: 4px 0 !important;
}

/* Modals - Day Mode */
.modal-content {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #000000;
}

.modal-content * {
    color: #000000;
}

.modal-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    color: #000000;
}

.modal-header * {
    color: #000000;
}

.modal-header .modal-title {
    color: #000000;
    font-weight: 700;
}

.modal-body {
    color: #000000;
    font-weight: 600;
}

.modal-body * {
    color: #000000;
}

.modal-footer {
    background-color: var(--gfc-light-bg-alt);
    border-top: 1px solid var(--gfc-light-border);
}

/* Buttons - Light Mode */
.btn-primary {
    background-color: var(--gfc-bronze);
    border-color: var(--gfc-bronze);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--gfc-bronze-hover);
    border-color: var(--gfc-bronze-hover);
    color: #ffffff;
}

/* Icons - Day Mode - BLACK */
.header-icon,
.header-icon * {
    color: #000000;
    fill: #000000;
}

.main-icon,
.main-icon *,
.x-form-tools {
    color: #000000;
    fill: #000000;
}

.action-icon,
.action-icon * {
    color: #000000;
    fill: #000000;
}

/* SVG Icons - Force currentColor for proper theming + CONSISTENT WIDTHS */
.main-icon svg,
.main-icon svg path,
.main-icon svg *,
.svg-container.main-icon svg,
.svg-container.main-icon svg path,
.svg-container.main-icon svg *,
.main-icon .svg-container svg,
.main-icon .svg-container svg path,
.main-icon .svg-container svg * {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

/* Standardize icon container sizes */
.svg-container.main-icon,
.main-icon.svg-container,
.main-side-nav .svg-container,
.main-side-nav .main-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    visibility: visible;
    opacity: 1;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
}

/* Standardize sidebar icon sizes */
.main-side-nav svg,
.main-side-nav .svg-container svg,
.main-side-nav .main-icon svg {
    display: block;
    visibility: visible;
    opacity: 1;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

/* Standardize header icon sizes */
.header-icon svg,
.header-icon .svg-container svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/* Standardize action icon sizes */
.action-icon svg,
.action-icon .svg-container svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

/* Ensure consistent stroke width for all SVG icons - THINNER */
svg path,
svg circle,
svg rect,
svg polygon,
svg line {
    stroke-width: 1 !important;
    vector-effect: non-scaling-stroke;
}

/* ============================================
   DARK MODE (OVERRIDES - body.night-mode)
   ============================================ */

/* Body - Dark Mode */
body.night-mode {
    background-color: var(--gfc-darker-bg);
    color: var(--gfc-light-text);
}

/* Cards - Dark Mode */
body.night-mode .card {
    background-color: var(--gfc-dark-bg);
    border: 1px solid var(--gfc-dark-green);
    color: var(--gfc-light-text);
}

body.night-mode .card-header {
    background-color: var(--gfc-dark-bg);
    border-bottom: 1px solid var(--gfc-dark-green);
    color: var(--gfc-light-text);
}

body.night-mode .card-body {
    color: var(--gfc-light-text);
}

/* Sidebar Navigation - Dark Mode */
body.night-mode .main-side-nav-card {
    background-color: var(--gfc-dark-bg);
    border: 1px solid var(--gfc-dark-green);
}

body.night-mode .main-side-nav a,
body.night-mode .main-side-nav .static {
    color: var(--gfc-light-text);
}

body.night-mode .main-side-nav a:hover {
    color: var(--gfc-bronze);
    background-color: var(--gfc-darker-bg);
}

body.night-mode .main-side-nav > li.active > a {
    background-color: var(--gfc-darker-bg);
    color: var(--gfc-bronze);
}

body.night-mode .main-side-nav a[data-bs-toggle="collapse"]:after {
    color: var(--gfc-bronze);
}

/* Header - Dark Mode */
body.night-mode .main-header {
    background-color: var(--gfc-dark-bg);
    border-bottom: 1px solid var(--gfc-dark-green);
}

/* Posts - Dark Mode */
body.night-mode .post {
    background-color: var(--gfc-dark-bg);
    border: 1px solid var(--gfc-dark-green);
    color: var(--gfc-light-text);
}

body.night-mode .post-header {
    border-bottom: 1px solid var(--gfc-dark-green);
    background-color: var(--gfc-dark-bg);
}

body.night-mode .post-body {
    color: var(--gfc-light-text);
}

/* Ensure post titles and headings are visible in night mode */
body.night-mode .post-header h1,
body.night-mode .post-header h2,
body.night-mode .post-header h3,
body.night-mode .post-header h4,
body.night-mode .post-header h5,
body.night-mode .post-header h6 {
    color: #f0f0f0 !important;
    font-weight: 700 !important;
}

/* Publisher - Dark Mode */
body.night-mode .publisher {
    background-color: var(--gfc-dark-bg);
    border: 1px solid var(--gfc-dark-green);
    color: var(--gfc-light-text);
}

body.night-mode .publisher textarea,
body.night-mode .publisher input {
    background-color: var(--gfc-dark-bg);
    color: var(--gfc-light-text);
    border-color: var(--gfc-dark-green);
}

body.night-mode .publisher textarea::placeholder,
body.night-mode .publisher input::placeholder {
    color: #999999;
}

/* Forms - Dark Mode */
body.night-mode .form-control,
body.night-mode .form-select,
body.night-mode input[type="text"],
body.night-mode input[type="email"],
body.night-mode input[type="password"],
body.night-mode input[type="number"],
body.night-mode input[type="search"],
body.night-mode textarea,
body.night-mode select {
    background-color: var(--gfc-dark-bg);
    color: #f0f0f0;
    border: 1px solid var(--gfc-dark-green);
    font-weight: 400;
}

body.night-mode .form-control:focus,
body.night-mode .form-select:focus,
body.night-mode input:focus,
body.night-mode textarea:focus,
body.night-mode select:focus {
    border-color: var(--gfc-bronze);
    box-shadow: 0 0 0 2px rgba(205, 127, 50, 0.2);
    background-color: #333333;
    color: var(--gfc-light-text);
}

body.night-mode .form-control::placeholder,
body.night-mode input::placeholder,
body.night-mode textarea::placeholder {
    color: #999999;
}

body.night-mode label,
body.night-mode .form-label {
    color: #f0f0f0;
    font-weight: 600;
}

/* Links - Dark Mode */
body.night-mode a:not(.btn):not(.badge):not(.dropdown-item) {
    color: var(--gfc-bronze);
    font-weight: 500;
}

body.night-mode a:not(.btn):not(.badge):not(.dropdown-item):hover {
    color: var(--gfc-bronze-hover);
    text-decoration: underline;
}

/* Text Elements - Dark Mode */
body.night-mode p,
body.night-mode span:not(.badge):not(.main-icon),
body.night-mode li:not(.main-side-nav > li):not(.side-nav > li),
body.night-mode td,
body.night-mode th,
body.night-mode label,
body.night-mode small,
body.night-mode strong,
body.night-mode em {
    color: var(--gfc-light-text);
    font-weight: 500;
}

body.night-mode .text-muted {
    color: #a2acb7;
    font-weight: 400;
}

/* Headings - Night Mode - LIGHT TEXT - HIGH CONTRAST */
body.night-mode h1,
body.night-mode h2,
body.night-mode h3,
body.night-mode h4,
body.night-mode h5,
body.night-mode h6,
body.night-mode .card-header h1,
body.night-mode .card-header h2,
body.night-mode .card-header h3,
body.night-mode .card-header h4,
body.night-mode .card-header h5,
body.night-mode .card-header h6,
body.night-mode .page-title,
body.night-mode .post-title,
body.night-mode .section-title,
body.night-mode .card-title {
    color: #f0f0f0 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Ensure headings in cards are visible in night mode */
body.night-mode .card-header h1,
body.night-mode .card-header h2,
body.night-mode .card-header h3,
body.night-mode .card-header h4,
body.night-mode .card-header h5,
body.night-mode .card-header h6,
body.night-mode .card-header .card-title {
    color: #f0f0f0 !important;
    font-weight: 700 !important;
}

/* Dropdowns - Night Mode - HIGH CONTRAST */
body.night-mode .dropdown-menu {
    background-color: var(--gfc-dark-bg) !important;
    border: 1px solid var(--gfc-dark-green) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .dropdown-item {
    color: #f0f0f0 !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
}

body.night-mode .dropdown-item:hover,
body.night-mode .dropdown-item:focus {
    background-color: var(--gfc-darker-bg) !important;
    color: var(--gfc-bronze) !important;
}

body.night-mode .dropdown-item.active,
body.night-mode .dropdown-item:active {
    background-color: var(--gfc-bronze) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

body.night-mode .dropdown-item.disabled,
body.night-mode .dropdown-item:disabled {
    color: #888888 !important;
    opacity: 0.6 !important;
}

body.night-mode .dropdown-divider {
    border-top-color: var(--gfc-dark-green) !important;
    margin: 4px 0 !important;
}

/* Modals - Dark Mode */
body.night-mode .modal-content {
    background-color: var(--gfc-dark-bg);
    border: 1px solid var(--gfc-dark-green);
    color: var(--gfc-light-text);
}

body.night-mode .modal-header {
    background-color: var(--gfc-dark-bg);
    border-bottom: 1px solid var(--gfc-dark-green);
    color: var(--gfc-light-text);
}

body.night-mode .modal-header .modal-title {
    color: var(--gfc-light-text);
    font-weight: 700;
}

body.night-mode .modal-body {
    color: var(--gfc-light-text);
    font-weight: 500;
}

body.night-mode .modal-footer {
    background-color: var(--gfc-dark-bg);
    border-top: 1px solid var(--gfc-dark-green);
}

/* Buttons - Dark Mode */
body.night-mode .btn-primary {
    background-color: var(--gfc-bronze);
    border-color: var(--gfc-bronze);
    color: #ffffff;
}

body.night-mode .btn-primary:hover {
    background-color: var(--gfc-bronze-hover);
    border-color: var(--gfc-bronze-hover);
    color: #ffffff;
}

/* Icons - Dark Mode */
body.night-mode .header-icon,
body.night-mode .header-icon * {
    color: var(--gfc-light-text);
    fill: var(--gfc-light-text);
}

body.night-mode .main-icon,
body.night-mode .main-icon *,
body.night-mode .x-form-tools {
    color: var(--gfc-light-text);
    fill: var(--gfc-light-text);
}

body.night-mode .action-icon,
body.night-mode .action-icon * {
    color: var(--gfc-light-text);
    fill: var(--gfc-light-text);
}

/* ============================================
   PROFILE PICTURE QUALITY - MOBILE
   ============================================ */

/* Profile Picture Quality - Mobile - Use auto rendering for photos */
.profile-avatar-wrapper img,
.comment-avatar-picture,
.user-avatar img,
.user-avatar,
.avatar,
.avatar img {
    image-rendering: auto; /* Use auto for photos, not pixelated/crisp-edges */
    -ms-interpolation-mode: bicubic; /* Better quality for IE/Edge */
    object-fit: cover;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform; /* Optimize for GPU acceleration */
}

/* ============================================
   MOBILE COMMENT INPUT FIELD FIXES
   ============================================ */

/* Mobile Comment Input Field Fixes */
@media (max-width: 767px) {
    .comment-form textarea,
    .post-form textarea {
        padding-right: 100px !important;
        padding-left: 12px !important;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .comment-form .x-form-tools,
    .post-form .x-form-tools {
        bottom: 6px;
        right: 8px;
        left: auto;
    }
    
    .comment-form .x-form-tools li,
    .post-form .x-form-tools li {
        margin-left: 4px;
        margin-right: 0;
    }
    
    .comment-form .x-form-tools i,
    .post-form .x-form-tools i {
        font-size: 16px;
    }
}

/* Day Mode - Comment Input */
.comment-form textarea,
.post-form textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
}

/* Night Mode - Comment Input */
body.night-mode .comment-form textarea,
body.night-mode .post-form textarea {
    background: var(--card-dark-input) !important;
    color: var(--card-dark-input-color) !important;
    border: 1px solid var(--card-dark-divider) !important;
}

/* ============================================
   ADDITIONAL MOBILE RESPONSIVENESS FIXES
   ============================================ */

/* Ensure proper touch target sizes (minimum 44x44px) */
@media (max-width: 767px) {
    .btn,
    .dropdown-item,
    .x-form-tools li,
    .main-icon,
    .header-icon,
    .action-icon {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Fix dropdown menus on mobile */
    .dropdown-menu {
        max-width: calc(100vw - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }
    
    /* Ensure form inputs are properly styled on mobile */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 44px;
    }
}

/* ============================================
   DATABASE CSS OVERRIDES - DAY MODE
   Must override database CSS that loads after this file
   ============================================ */

/* Override database-set colors for DAY MODE - USE !important to override inline database CSS */
body:not(.night-mode) {
    background: #f0f2f5 !important;
}

body:not(.night-mode) .main-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body:not(.night-mode) .main-header * {
    color: #000000 !important;
}

body:not(.night-mode) .main-header .logo,
body:not(.night-mode) .main-header .logo *,
body:not(.night-mode) .main-header .logo-wrapper,
body:not(.night-mode) .main-header .logo-wrapper * {
    color: #000000 !important;
}

body:not(.night-mode) .main-header .search-wrapper .form-control {
    background: #f2f2f2 !important;
    background-color: #f2f2f2 !important;
    color: #000000 !important;
}

body:not(.night-mode) .main-header .search-wrapper .form-control::placeholder {
    color: #666666 !important;
}

body:not(.night-mode) .header-icon,
body:not(.night-mode) .header-icon * {
    color: #000000 !important;
    fill: #000000 !important;
}

body:not(.night-mode) .main-icon,
body:not(.night-mode) .main-icon *,
body:not(.night-mode) .x-form-tools {
    color: #000000 !important;
    fill: #000000 !important;
}

body:not(.night-mode) .action-icon,
body:not(.night-mode) .action-icon * {
    color: #000000 !important;
    fill: #000000 !important;
}

/* Ensure all text is black in day mode */
body:not(.night-mode) p,
body:not(.night-mode) span:not(.badge):not(.main-icon):not(.header-icon):not(.action-icon),
body:not(.night-mode) li:not(.main-side-nav > li):not(.side-nav > li),
body:not(.night-mode) td,
body:not(.night-mode) th,
body:not(.night-mode) label,
body:not(.night-mode) small,
body:not(.night-mode) strong,
body:not(.night-mode) em {
    color: #000000 !important;
    font-weight: 600 !important;
}

body:not(.night-mode) h1,
body:not(.night-mode) h2,
body:not(.night-mode) h3,
body:not(.night-mode) h4,
body:not(.night-mode) h5,
body:not(.night-mode) h6,
body:not(.night-mode) .card-header h1,
body:not(.night-mode) .card-header h2,
body:not(.night-mode) .card-header h3,
body:not(.night-mode) .card-header h4,
body:not(.night-mode) .card-header h5,
body:not(.night-mode) .card-header h6,
body:not(.night-mode) .page-title,
body:not(.night-mode) .post-title,
body:not(.night-mode) .section-title,
body:not(.night-mode) .card-title {
    color: #000000 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body:not(.night-mode) .card {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body:not(.night-mode) .card * {
    color: #000000 !important;
}

body:not(.night-mode) .post {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body:not(.night-mode) .post * {
    color: #000000 !important;
}

/* Ensure post titles and headings are visible in day mode */
body:not(.night-mode) .post-title,
body:not(.night-mode) .post-header h1,
body:not(.night-mode) .post-header h2,
body:not(.night-mode) .post-header h3,
body:not(.night-mode) .post-header h4,
body:not(.night-mode) .post-header h5,
body:not(.night-mode) .post-header h6 {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Ensure post titles and headings are visible in day mode */
body:not(.night-mode) .post-title,
body:not(.night-mode) .post-header h1,
body:not(.night-mode) .post-header h2,
body:not(.night-mode) .post-header h3,
body:not(.night-mode) .post-header h4,
body:not(.night-mode) .post-header h5,
body:not(.night-mode) .post-header h6 {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Override database-set colors for dark mode */
body.night-mode {
    background: var(--gfc-darker-bg);
}

body.night-mode a:not(.main-side-nav a):not(.side-nav a),
body.night-mode .data-content .name a:not(.main-side-nav a),
body.night-mode .text-link:not(.main-side-nav a),
body.night-mode .post-stats-alt,
body.night-mode .navbar-container .data-content .name a:not(.main-side-nav a) {
    color: var(--gfc-bronze);
}

/* Post stats icons should be visible but not bronze */
body.night-mode .post-stats .fa:not(.main-side-nav a) {
    color: #c1d4e3 !important;
}

body.night-mode .main-header {
    background: var(--gfc-dark-bg);
}

body.night-mode .main-header .user-menu {
    border-left-color: var(--gfc-dark-green);
}

body.night-mode .main-header .search-wrapper .form-control {
    background: var(--gfc-dark-bg);
    color: var(--gfc-light-text);
    border-color: var(--gfc-dark-green);
}

body.night-mode .main-header .search-wrapper .form-control::placeholder {
    color: #999999;
}

body.night-mode .header-icon,
body.night-mode .header-icon * {
    color: var(--gfc-light-text);
    fill: var(--gfc-light-text);
}

body.night-mode .main-icon,
body.night-mode .main-icon *,
body.night-mode .x-form-tools {
    color: var(--gfc-light-text);
    fill: var(--gfc-light-text);
}

body.night-mode .action-icon,
body.night-mode .action-icon * {
    color: var(--gfc-light-text);
    fill: var(--gfc-light-text);
}

body.night-mode .btn-primary,
body.night-mode .btn-primary:focus,
body.night-mode .btn-primary:hover {
    background: var(--gfc-bronze);
    border-color: var(--gfc-bronze);
    color: #ffffff;
}

/* ============================================
   COMPREHENSIVE NIGHT MODE OVERRIDES
   ============================================ */

/* Text Elements - Night Mode */
body.night-mode p,
body.night-mode span:not(.badge):not(.main-icon):not(.header-icon):not(.action-icon),
body.night-mode li:not(.main-side-nav > li):not(.side-nav > li):not(.dropdown-item),
body.night-mode td,
body.night-mode th,
body.night-mode small,
body.night-mode em,
body.night-mode div:not(.badge):not(.btn) {
    color: #c1d4e3 !important;
}

/* Headings - Night Mode */
body.night-mode h1,
body.night-mode h2,
body.night-mode h3,
body.night-mode h4,
body.night-mode h5,
body.night-mode h6,
body.night-mode .card-header h6,
body.night-mode .page-title,
body.night-mode .post-title {
    color: #ffffff !important;
}

/* Labels and Form Text - Night Mode */
body.night-mode label,
body.night-mode .form-label,
body.night-mode .form-text {
    color: #c1d4e3 !important;
}

/* Forms - Night Mode */
body.night-mode .form-control,
body.night-mode .form-select,
body.night-mode input[type="text"],
body.night-mode input[type="email"],
body.night-mode input[type="password"],
body.night-mode input[type="number"],
body.night-mode input[type="search"],
body.night-mode textarea,
body.night-mode select {
    background-color: var(--card-dark-input) !important;
    color: var(--card-dark-input-color) !important;
    border-color: var(--card-dark-divider) !important;
}

body.night-mode .form-control::placeholder,
body.night-mode input::placeholder,
body.night-mode textarea::placeholder {
    color: #798ea4 !important;
}

body.night-mode .form-control:focus,
body.night-mode .form-select:focus,
body.night-mode input:focus,
body.night-mode textarea:focus,
body.night-mode select:focus {
    background-color: var(--card-dark-input) !important;
    color: var(--card-dark-input-color) !important;
    border-color: var(--gfc-bronze) !important;
}

/* Cards - Night Mode */
body.night-mode .card {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
    color: #c1d4e3 !important;
}

body.night-mode .card-header,
body.night-mode .card-footer {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
    color: #c1d4e3 !important;
}

body.night-mode .card-body {
    background-color: var(--card-dark-color) !important;
    color: #c1d4e3 !important;
}

/* Sidebar - Night Mode */
body.night-mode .sg-offcanvas-sidebar {
    background-color: var(--card-dark-color) !important;
    color: #c1d4e3 !important;
}

body.night-mode .sg-offcanvas-sidebar .card {
    background-color: var(--card-dark-color) !important;
}

/* Dropdown menus - Night Mode */
body.night-mode .dropdown-menu {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
}

body.night-mode .dropdown-item {
    color: #c1d4e3 !important;
}

body.night-mode .dropdown-item:hover,
body.night-mode .dropdown-item:focus {
    background-color: var(--card-dark-hover) !important;
    color: #ffffff !important;
}

body.night-mode .dropdown-divider {
    border-color: var(--card-dark-divider) !important;
}

/* Publisher - Night Mode */
body.night-mode .publisher {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
    color: #c1d4e3 !important;
}

body.night-mode .publisher textarea,
body.night-mode .publisher input {
    background-color: var(--card-dark-input) !important;
    color: var(--card-dark-input-color) !important;
    border-color: var(--card-dark-divider) !important;
}

/* Links - Night Mode */
body.night-mode a:not(.btn):not(.badge):not(.dropdown-item) {
    color: var(--gfc-bronze-hover) !important;
}

body.night-mode a:not(.btn):not(.badge):not(.dropdown-item):hover {
    color: var(--gfc-bronze) !important;
}

/* Alert boxes - Night Mode */
body.night-mode .alert-info {
    background-color: rgba(17, 205, 239, 0.15) !important;
    border-color: #11cdef !important;
    color: #c1d4e3 !important;
}

body.night-mode .alert-warning {
    background-color: rgba(251, 99, 64, 0.15) !important;
    border-color: #fb6340 !important;
    color: #c1d4e3 !important;
}

body.night-mode .alert-success {
    background-color: rgba(45, 206, 137, 0.15) !important;
    border-color: #2dce89 !important;
    color: #c1d4e3 !important;
}

body.night-mode .alert-danger {
    background-color: rgba(245, 54, 92, 0.15) !important;
    border-color: #f5365c !important;
    color: #c1d4e3 !important;
}

/* Table - Night Mode */
body.night-mode table {
    color: #c1d4e3 !important;
}

body.night-mode table thead th {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
    color: #ffffff !important;
}

body.night-mode table tbody td {
    border-color: var(--card-dark-divider) !important;
    color: #c1d4e3 !important;
}

/* Modals - Night Mode */
body.night-mode .modal-content {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
    color: #c1d4e3 !important;
}

body.night-mode .modal-header,
body.night-mode .modal-footer {
    border-color: var(--card-dark-divider) !important;
}

/* Tabs - Night Mode */
body.night-mode .content-tabs {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
}

body.night-mode .content-tabs ul li a {
    color: #c1d4e3 !important;
}

body.night-mode .content-tabs ul li.active a {
    color: #ffffff !important;
    border-bottom-color: var(--gfc-bronze) !important;
}

/* Navigation - Night Mode */
body.night-mode .nav-link {
    color: #c1d4e3 !important;
}

body.night-mode .nav-link:hover {
    color: #ffffff !important;
}

body.night-mode .nav-link.active {
    color: #ffffff !important;
}

/* List Groups - Night Mode */
body.night-mode .list-group-item {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
    color: #c1d4e3 !important;
}

/* Badges - Night Mode */
body.night-mode .badge {
    border-width: 1px;
    border-style: solid;
}

body.night-mode .badge.bg-light {
    background-color: var(--card-dark-hover) !important;
    color: #c1d4e3 !important;
}

/* Pagination - Night Mode */
body.night-mode .pagination .page-link {
    background-color: var(--card-dark-color) !important;
    border-color: var(--card-dark-divider) !important;
    color: #c1d4e3 !important;
}

body.night-mode .pagination .page-item.active .page-link {
    background-color: var(--gfc-bronze) !important;
    border-color: var(--gfc-bronze) !important;
    color: #ffffff !important;
}

/* Breadcrumb - Night Mode */
body.night-mode .breadcrumb {
    background-color: var(--card-dark-color) !important;
}

body.night-mode .breadcrumb-item a {
    color: var(--gfc-bronze-hover) !important;
}

/* Profile and Posts - Night Mode */
body.night-mode .post-body,
body.night-mode .post-media,
body.night-mode .post-stats {
    color: #c1d4e3 !important;
}

body.night-mode .post-author .post-author-name {
    color: #ffffff !important;
}

/* Search - Night Mode */
body.night-mode .search-form input {
    background-color: var(--card-dark-input) !important;
    color: var(--card-dark-input-color) !important;
    border-color: var(--card-dark-divider) !important;
}

/* Tooltip - Night Mode */
body.night-mode .tooltip-inner {
    background-color: var(--card-dark-color) !important;
    color: #c1d4e3 !important;
}

/* Icons - Night Mode - CRITICAL FIX */
body.night-mode .fa,
body.night-mode i.fa,
body.night-mode i[class*="fa-"],
body.night-mode .icon,
body.night-mode .svg-icon,
body.night-mode svg {
    color: #c1d4e3 !important;
    fill: #c1d4e3 !important;
}

/* Specific icon contexts */
body.night-mode .post-stats .fa,
body.night-mode .notification .fa,
body.night-mode .dropdown-toggle .fa,
body.night-mode .text-link .fa,
body.night-mode .x-dropdown .fa {
    color: #c1d4e3 !important;
}

/* Ensure SVG icons are visible */
body.night-mode svg path,
body.night-mode svg circle,
body.night-mode svg rect {
    fill: #c1d4e3 !important;
}

/* Keep colored icons (reactions, etc) intact */
body.night-mode .reactions-item .fa,
body.night-mode .emoji {
    color: inherit !important;
    fill: inherit !important;
}

/* Button icons should be white */
body.night-mode .btn .fa,
body.night-mode .btn i {
    color: inherit !important;
}

/* Notification icons */
body.night-mode .notification-icon,
body.night-mode .notification .fa,
body.night-mode .x-dropdown .fa,
body.night-mode .dropdown-menu .fa {
    color: #c1d4e3 !important;
}

/* Muted/subtle icons in night mode */
body.night-mode .text-muted .fa,
body.night-mode small .fa,
body.night-mode .fa-globe,
body.night-mode .fa-chevron-down,
body.night-mode .fa-angle-down,
body.night-mode .fa-caret-down {
    color: #798ea4 !important;
    opacity: 0.8;
}

/* Activity/feed icons */
body.night-mode .activity-item .fa,
body.night-mode .feed-item .fa,
body.night-mode .timeline .fa {
    color: #c1d4e3 !important;
}

/* ============================================
   PROFILE PICTURE OPTIMIZATION
   ============================================ */

/* Optimize image rendering for profile pictures to prevent blur */
img[src*="/photos/"],
.user-picture,
.profile-picture,
.user-avatar,
.avatar,
img[class*="picture"],
img[class*="avatar"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

/* Ensure profile images maintain aspect ratio */
.user-picture,
.profile-picture,
.user-avatar,
.avatar {
    object-fit: cover;
    object-position: center;
}

/* Prevent scaling artifacts on retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img[src*="/photos/"],
    .user-picture,
    .profile-picture,
    .user-avatar,
    .avatar {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   Admin Panel Form Icons - Fix oversized icons
   ============================================ */
.form-table-row > div.avatar {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-table-row > div.avatar .svg-container {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

.form-table-row > div.avatar .svg-container svg {
    width: 100% !important;
    height: 100% !important;
}

/* Ensure admin panel icons use theme colors */
.form-table-row > div.avatar svg,
.form-table-row > div.avatar svg path {
    fill: currentColor;
}