/**
 * 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;
}

/* Day mode only — darken links for WCAG AA (#965214 ≈ 5.7:1 on white; #cd7f32 = only 3.0:1) */
body:not(.night-mode) a:not(.btn):not(.badge):not(.dropdown-item) {
    color: #965214;
}

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

/* Day mode — links inside .card (overrides .card * { color: #000 !important }) */
body:not(.night-mode) .card a:not(.btn):not(.badge):not(.dropdown-item) {
    color: #965214 !important;
}

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

/* 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 text at regular weight */
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) small,
body:not(.night-mode) em {
    color: #000000 !important;
    font-weight: 400 !important;
}

/* Label and strong stay emphasized */
body:not(.night-mode) label,
body:not(.night-mode) strong {
    color: #000000 !important;
    font-weight: 700 !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;
}

/* ============================================================
   Signin form icon positioning fixes
   fr_welcome_field svg was rendering as a top-left square
   due to position:absolute with no left/top coordinates
   ============================================================ */
.fr_welcome_field svg:not(.eye-icon):not(.eye-icon-slash) {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  opacity: 0.5;
  pointer-events: none;
}

/* Password eye toggle — keep it inside the input, right side */
.fr_welcome_field .js_toggle-password {
  position: absolute !important;
  right: 8px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto !important;
  /* 44px min touch target for mobile (WCAG 2.5.5) */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fr_welcome_field .eye-icon,
.fr_welcome_field .eye-icon-slash {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: auto;
  fill: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

.fr_welcome_field .js_toggle-password:hover .eye-icon,
.fr_welcome_field .js_toggle-password:hover .eye-icon-slash {
  opacity: 1;
}

/* Fix: Tabler Icons bounding-box paths must never fill */
path[fill="none"][stroke="none"] {
  fill: none !important;
}

/* Profile: add space between username and experience badge */
.profile-experience-badges {
  margin-left: 12px;
}
.profile-name-wrapper {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Fix: reaction button icon visible in night mode */
body.night-mode .reaction-btn .reaction-btn-icon i,
body.night-mode .reaction-btn-icon i.action-icon {
  color: var(--body-color-dark, #e0e0e0) !important;
}

/* Fix: iOS Safari won't fire click on plain divs without cursor:pointer */
.reactions-wrapper,
.post-actions .action-btn {
  cursor: pointer;
  touch-action: manipulation;
}

/* Fix: reaction popup stays in viewport on mobile, above the 70px fixed bottom nav (z-index 999) */
@media (max-width: 767px) {
  .reactions-container[style] {
    bottom: 80px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    z-index: 1000 !important;
  }
}

/* Fix: comment/post form icon clutter on mobile */
@media (max-width: 767px) {
  .comment-form textarea,
  .post-form textarea {
    padding-right: 155px !important;
  }
  .comment-form .x-form-tools li,
  .post-form .x-form-tools li {
    min-width: 34px !important;
    min-height: 40px !important;
  }
}

/* ============================================================
   btn-light in night mode — Bootstrap hardcodes #f8f9fa which
   ignores the dark theme, producing jarring white buttons
   (publisher privacy dropdown, market search button, etc.)
   ============================================================ */
body.night-mode .btn-light {
  background-color: #2a2a2a !important;
  border-color: var(--gfc-dark-green, #2c5530) !important;
  color: #c1d4e3 !important;
}
body.night-mode .btn-light:hover,
body.night-mode .btn-light:focus,
body.night-mode .btn-light:active {
  background-color: #333333 !important;
  border-color: var(--gfc-bronze, #cd7f32) !important;
  color: #ffffff !important;
}
body.night-mode .btn-light::after {
  border-top-color: #c1d4e3 !important;
}

/* ============================================================
   Market search bar — stack inputs vertically on mobile
   The .input-group puts everything in one horizontal row with
   no Bootstrap responsive stacking variant
   ============================================================ */
@media (max-width: 575px) {
  .js_search-form .input-group {
    flex-direction: column;
    gap: 8px;
  }
  .js_search-form .input-group .form-control,
  .js_search-form .input-group .btn {
    border-radius: 6px !important;
    width: 100%;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
  }
}

/* ============================================================
   Card headers with title+subtitle on left and a button on
   right — shift to flex-start on mobile so the button doesn't
   vertically center against a two-line heading and overlap the
   subtitle text (visible in Stash Tracker, Grow Logs, etc.)
   ============================================================ */
@media (max-width: 575px) {
  .card-header.d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start !important;
  }
  .card-header.d-flex.justify-content-between.align-items-center > div:last-child .btn,
  .card-header.d-flex.justify-content-between.align-items-center > div:last-child a.btn {
    white-space: nowrap;
  }
}

/* ============================================================
   Messages page mobile offcanvas fix
   Sngine's style.css loads after gfc-custom.css, so !important
   is required to override its same-specificity mobile rules.

   active class = conversation LIST view (/messages)
   no active    = specific conversation (/messages/user/foo)
   ============================================================ */
@media (max-width: 767px) {
  /* Break out of h-100 full-viewport-height chain on mobile */
  .sg-offcanvas,
  .sg-offcanvas > .row {
    height: auto !important;
    min-height: auto !important;
  }
  /* Conversation list view: sidebar fills full width, natural height */
  .sg-offcanvas.active .sg-offcanvas-sidebar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    height: auto !important;
    min-height: auto !important;
    left: 0 !important;
  }
  /* Conversation list view: mainbar fully removed from flow */
  .sg-offcanvas.active .sg-offcanvas-mainbar {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  /* Specific conversation view: mainbar fills full width */
  .sg-offcanvas:not(.active) .sg-offcanvas-mainbar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    left: 0 !important;
    height: auto !important;
  }
  /* Specific conversation view: sidebar hidden */
  .sg-offcanvas:not(.active) .sg-offcanvas-sidebar {
    position: absolute !important;
    left: -100% !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
}

/* ============================================================
   Profile cover photo empty-state CTA
   When own profile has no cover, show a subtle "Add Cover Photo"
   hint centered in the dark cover area. Uses :has() which is
   supported in all modern browsers (Chrome 105+, FF 121+, Safari 15.4+).
   ============================================================ */
.profile-cover-wrapper:not(:has(img.js_position-cover-cropped)) {
  position: relative;
  cursor: pointer;
  min-height: 200px;
}
.profile-cover-wrapper:not(:has(img.js_position-cover-cropped)) .profile-cover-buttons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-cover-wrapper:not(:has(img.js_position-cover-cropped)) .profile-cover-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}
.profile-cover-wrapper:not(:has(img.js_position-cover-cropped)) .profile-cover-change:hover {
  color: rgba(255, 255, 255, 0.85);
}
.profile-cover-wrapper:not(:has(img.js_position-cover-cropped)) .profile-cover-change::after {
  content: "Add Cover Photo";
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
}


/* ============================================================
   WCAG AA CONTRAST FIXES — 2026-05-30
   Targets: Bootstrap4→5 badge compat, text-muted uplift,
   text-primary label override, sidebar section labels,
   section-title, journal card meta, strains page meta.
   All contrast ratios verified against WCAG 2.1 AA:
     ≥4.5:1 normal text, ≥3:1 large text / UI components.
   ============================================================ */

/* ── Bootstrap 4 badge class compatibility ──────────────────
   grow-journals.tpl, strains.tpl use badge-* (BS4 syntax).
   Bootstrap 5 doesn't define these → badges render transparent.
   Day-mode backgrounds chosen to give ≥5:1 with white text.
   ---------------------------------------------------------- */
.badge.badge-primary   { background-color: #a86826 !important; color: #fff !important; border: none !important; }
.badge.badge-success   { background-color: #146c3c !important; color: #fff !important; border: none !important; }
.badge.badge-danger    { background-color: #b02a37 !important; color: #fff !important; border: none !important; }
.badge.badge-warning   { background-color: #b45309 !important; color: #fff !important; border: none !important; }
.badge.badge-info      { background-color: #0a5c78 !important; color: #fff !important; border: none !important; }
.badge.badge-secondary { background-color: #495057 !important; color: #fff !important; border: none !important; }
.badge.badge-light     { background-color: #e9ecef !important; color: #1a1a1a !important; border: 1px solid #ccc !important; }
.badge.badge-dark      { background-color: #343a40 !important; color: #fff !important; border: none !important; }

/* Night mode badge variants — darker bg, light accessible text */
body.night-mode .badge.badge-primary   { background-color: #cd7f32 !important; color: #fff !important; }
body.night-mode .badge.badge-success   { background-color: #0d4f27 !important; color: #86efac !important; }
body.night-mode .badge.badge-danger    { background-color: #6b1a26 !important; color: #fca5a5 !important; }
body.night-mode .badge.badge-warning   { background-color: #5c3a00 !important; color: #fde68a !important; }
body.night-mode .badge.badge-info      { background-color: #0a3f56 !important; color: #7dd3fc !important; }
body.night-mode .badge.badge-secondary { background-color: #2d3748 !important; color: #e2e8f0 !important; }
body.night-mode .badge.badge-light     { background-color: #1e2937 !important; color: #c1d4e3 !important; }
body.night-mode .badge.badge-dark      { background-color: #111827 !important; color: #f9fafb !important; }

/* ── text-muted contrast uplift ─────────────────────────────
   Sngine forces #798ea4 in night mode (4.76:1 — marginal).
   Raising to #afc3d6 gives 8.9:1 — clearly legible.
   Day mode: Bootstrap default #6c757d on white = 4.58:1.
   Darkening to #505a63 gives 7:1 on white.
   ---------------------------------------------------------- */
body.night-mode .text-muted {
    color: #afc3d6 !important;
}

body:not(.night-mode) .text-muted {
    color: #505a63 !important;
}

/* ── Form labels using Bootstrap text-colour utilities ──────
   Filter labels in grow-journals use `text-primary fw-bold`.
   BS5 text-primary (#0d6efd) on dark = 3.85:1 — fails AA.
   Override with high-specificity rule on both modes.
   ---------------------------------------------------------- */
body.night-mode .form-label[class*="text-"],
body.night-mode label[class*="text-"],
body.night-mode .form-label.text-primary,
body.night-mode label.text-primary {
    color: #e8f0f7 !important;
}

body:not(.night-mode) .form-label[class*="text-"],
body:not(.night-mode) label[class*="text-"],
body:not(.night-mode) .form-label.text-primary,
body:not(.night-mode) label.text-primary {
    color: #1a1a1a !important;
}

/* ── Sidebar section labels (ADVERTISING, DISCOVER & COMMUNITY)
   <small class="text-muted"> inside .main-side-nav
   ---------------------------------------------------------- */
body.night-mode .main-side-nav li > small,
body.night-mode .main-side-nav li > small.text-muted {
    color: #9eb3c7 !important;   /* 7.5:1 on #1a1a1a */
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    opacity: 1 !important;
}

body:not(.night-mode) .main-side-nav li > small,
body:not(.night-mode) .main-side-nav li > small.text-muted {
    color: #374151 !important;   /* 10.7:1 on #ffffff */
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    opacity: 1 !important;
}

/* ── .section-title in night mode ───────────────────────────
   Background becomes --card-dark-hover (#0f0f0f); keep text bright
   ---------------------------------------------------------- */
body.night-mode .section-title {
    color: #e0eaf0 !important;
}

body.night-mode .section-title * {
    color: #e0eaf0 !important;
}

/* ── .heading-small / card sub-heading labels ───────────────*/
body.night-mode .heading-small {
    color: #9eb3c7 !important;
}

body:not(.night-mode) .heading-small {
    color: #374151 !important;
}

/* ── Grow journal card meta (date / update / photo counts) ──
   <div class="text-muted small"> inside card-body
   ---------------------------------------------------------- */
body.night-mode .card-body > .text-muted,
body.night-mode .card-body .text-muted.small,
body.night-mode .card .text-muted {
    color: #afc3d6 !important;
}

body:not(.night-mode) .card-body > .text-muted,
body:not(.night-mode) .card-body .text-muted.small,
body:not(.night-mode) .card .text-muted {
    color: #505a63 !important;
}

/* FA icons inside text-muted contexts */
body.night-mode .text-muted .fa,
body.night-mode .text-muted i[class*="fa"] {
    color: #afc3d6 !important;
}

body:not(.night-mode) .text-muted .fa,
body:not(.night-mode) .text-muted i[class*="fa"] {
    color: #505a63 !important;
}

/* ── Strains page: card metadata / small text ───────────────*/
body.night-mode .strain-card .text-muted,
body.night-mode .strain-card small {
    color: #afc3d6 !important;
}

body:not(.night-mode) .strain-card .text-muted,
body:not(.night-mode) .strain-card small {
    color: #505a63 !important;
}

/* ── page-header: enforce white text + subtle shadow ────────*/
.page-header h1, .page-header h2, .page-header h3,
.page-header p, .page-header span:not(.badge) {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Strains compare table — breeder cell readability ───────*/
body.night-mode .compare-table td,
body.night-mode .compare-table th {
    color: #c1d4e3 !important;
}

body.night-mode .compare-table .text-muted {
    color: #afc3d6 !important;
}

/* ── btn-outline-* in dark mode — visible borders + text ───*/
body.night-mode .btn-outline-secondary {
    color: #c1d4e3 !important;
    border-color: #6b7280 !important;
}

body.night-mode .btn-outline-secondary:hover {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #9ca3af !important;
}

body.night-mode .btn-outline-danger {
    color: #fca5a5 !important;
    border-color: #f87171 !important;
}

body.night-mode .btn-outline-danger:hover {
    background-color: #6b1a26 !important;
    color: #fecaca !important;
}

/* ── Post stats .fa icons — clearly visible in night mode ───*/
body.night-mode .post-stats .fa,
body.night-mode .post-footer .fa {
    color: #afc3d6 !important;
}

/* ── Fix: --gfc-light-gray CSS variable ─────────────────────
   strains.css references var(--gfc-light-gray) at lines 78,
   171, 315, 723 — but the variable was never defined anywhere.
   Defining it here (gfc-custom.css loads before strains.css)
   resolves all four invalid declarations.
   Value: #afc3d6 — matches our text-muted night-mode uplift
   colour (8.9:1 on #1a1a1a, 2.8:1 on #ffffff — light-gray is
   night-mode-only usage per context in strains.css).
   ---------------------------------------------------------- */
:root {
    --gfc-light-gray: #afc3d6;
}

/* ── Fix: --gfc-white (btn-strain-primary text color, undefined) ─*/
:root {
    --gfc-white: #ffffff;
}

/* ── Mobile bottom nav: safe-area inset (iOS notch/home indicator) ──────────
   Without env(safe-area-inset-bottom) the fixed bar renders *under* the
   home indicator on iPhone X+. Also: body needs matching padding-bottom so
   page content is never hidden beneath the fixed bar on mobile.
   Fallback 0px covers Android and non-notch devices with no change.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .footer-bottom-bar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Breadcrumb styling for grow-journals ───────────────────*/
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

body.night-mode .breadcrumb-item a {
    color: #7dd3fc;
}

body.night-mode .breadcrumb-item.active {
    color: #afc3d6;
}

body.night-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #6b7280;
}

/* ===== GFC DESIGN REVIEW FIXES — 2026-06-02 ===== */

/* 1. Landing page font consistency */
.elengine-wrapper, .elengine-wrapper * { font-family: 'Montserrat', sans-serif !important; }
.elengine-wrapper h1, .elengine-wrapper h2, .elengine-wrapper h3 {
  font-family: 'Reggae One', cursive !important;
}

/* 2. Messages — mobile column stacking fix */
@media (max-width: 767px) {
  .sg-offcanvas-sidebar {
    width: 100% !important; max-width: 100% !important;
    flex: 0 0 100% !important; position: relative !important;
    border-right: none !important;
  }
  .sg-offcanvas-mainbar {
    width: 100% !important; max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .js_conversation-container.sg-offcanvas-mainbar--open {
    position: fixed !important; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200 !important; background: var(--bs-dark, #1a1a2e);
  }
}

/* 3. Custom scrollbars — bronze accent on dark */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #cd7f32; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #e8962b; }

/* 4. Post entrance animation */
@keyframes gfc-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sg-post-item { animation: gfc-fade-up 0.35s ease both; }
@media (prefers-reduced-motion: reduce) { .sg-post-item { animation: none; } }

/* 5. Bronze glow on primary CTA buttons */
.btn-primary, .btn-success:not(.btn-sm) {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover, .btn-success:not(.btn-sm):hover {
  box-shadow: 0 0 14px rgba(205, 127, 50, 0.55);
  transform: translateY(-1px);
}

/* 6. Strain card stagger animation keyframe */
@keyframes gfc-strain-slide {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   SOCIAL SHARE ICONS — BRAND COLORS
   Uses FA brand icons (<i class="fab fa-*">) which are CSS color-based,
   immune to the SVG fill: #c1d4e3 !important night-mode override.
   ============================================ */
.gfc-share-facebook  { background: #1877f2 !important; }
.gfc-share-x         { background: #000000 !important; }
.gfc-share-linkedin  { background: #0a66c2 !important; }
.gfc-share-whatsapp  { background: #25d366 !important; }
.gfc-share-reddit    { background: #ff4500 !important; }
.gfc-share-pinterest { background: #e60023 !important; }
.gfc-share-vk        { background: #2787f5 !important; }

/* White icon on brand background — same in both day and night mode */
.btn-icon-social[class*="gfc-share-"] i {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 16px !important;
    line-height: 40px !important;
    display: block;
}

/* Explicit night-mode override to beat body.night-mode i[class*="fa-"] { color: #c1d4e3 } */
body.night-mode .btn-icon-social[class*="gfc-share-"] i {
    color: #ffffff !important;
}

/* ===================================================================
   WCAG 2.1 AA DAY-MODE CONTRAST FIXES — 2026-06-03
   Addresses failures from automated contrast audit (contrast-audit.json)
   and Bootstrap 5 dark-mode variable cascade into day mode.

   Verified ratios (WCAG AA: ≥4.5:1 normal text, ≥3:1 large/UI):
     #8B5A1C on #fff = 5.23:1  ✓  (dark bronze, btn-primary bg)
     #965214 on #fff = 5.59:1  ✓  (dark bronze, links / text-link)
     #7a4310 on #fff = 6.1:1   ✓  (deep bronze, hover states)
     #505a63 on #fff = 7.0:1   ✓  (muted text)
     #767676 on #fff = 4.48:1  ✓  (placeholder — borderline AA)
   =================================================================== */

/* 1. Bootstrap CSS variable override for day mode
   Root cause: BS5 sets --bs-secondary-color: rgba(222,226,230,0.75) at :root.
   That value is ~1.8:1 on white — catastrophically invisible.
   Overriding the vars here fixes ALL utility classes that reference them:
   .text-secondary, .text-body-secondary, .text-body-tertiary, etc. */
body:not(.night-mode) {
    --bs-secondary-color: #505a63;
    --bs-secondary-rgb: 80, 90, 99;
    --bs-tertiary-color: #6c757d;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-emphasis-color: #000000;
    --bs-link-color: #965214;
    --bs-link-hover-color: #7a4310;
    --bs-link-color-rgb: 150, 82, 20;
}

/* 2. Belt-and-suspenders for .text-secondary (Bootstrap !important in compiled CSS
   can beat the var override; explicit rule wins by specificity + cascade position) */
body:not(.night-mode) .text-secondary {
    color: #505a63 !important;
}
body:not(.night-mode) .text-body-secondary {
    color: #505a63 !important;
}

/* 3. .btn-primary day mode — audit failure: white text on #cd7f32 = 3.14:1
   Fix: darker bronze background → white text passes at 5.23:1 */
body:not(.night-mode) .btn-primary {
    background-color: #8B5A1C !important;
    border-color: #8B5A1C !important;
    color: #ffffff !important;
}
body:not(.night-mode) .btn-primary:hover,
body:not(.night-mode) .btn-primary:focus {
    background-color: #7a4f18 !important;
    border-color: #7a4f18 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 90, 28, 0.3) !important;
}
body:not(.night-mode) .btn-primary:active {
    background-color: #6b4415 !important;
    border-color: #6b4415 !important;
}

/* 4. .text-link — audit failure: #cd7f32 on white = 3.14:1
   Used by login panel toggle links (Sign In / Sign Up) */
body:not(.night-mode) .text-link {
    color: #965214 !important;
}
body:not(.night-mode) .text-link:hover {
    color: #7a4310 !important;
    text-decoration: underline !important;
}

/* 5. Link hover in day mode — existing hover reverts to var(--gfc-bronze) = 3.14:1
   and var(--gfc-bronze-hover) = #e69d4a which is even worse (2.45:1).
   Force accessible dark bronze on hover. */
body:not(.night-mode) a:not(.btn):not(.badge):not(.dropdown-item):hover {
    color: #7a4310 !important;
}
body:not(.night-mode) .card a:not(.btn):not(.badge):not(.dropdown-item):hover {
    color: #7a4310 !important;
}

/* 6. Dropdown hover/active — existing rule sets bronze #cd7f32 on #f5f5f5 = 3.09:1
   Active: white on #cd7f32 = 3.14:1. Both fail AA. */
body:not(.night-mode) .dropdown-item:hover,
body:not(.night-mode) .dropdown-item:focus {
    color: #965214 !important;
}
body:not(.night-mode) .dropdown-item.active,
body:not(.night-mode) .dropdown-item:active {
    background-color: #8B5A1C !important;
    color: #ffffff !important;
}

/* 7. Input placeholders — BS5 default can render near-invisible on light bg */
body:not(.night-mode) ::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}
body:not(.night-mode) :-ms-input-placeholder {
    color: #767676 !important;
}

/* 8. Post stats / meta timestamps — small text that can inherit low-contrast values */
body:not(.night-mode) .post-stats a,
body:not(.night-mode) .data-content .time,
body:not(.night-mode) .data-content span.small {
    color: #505a63;
}

/* ═══════════════════════════════════════════════════════
   GFC UX AUDIT FIXES — 2026-06-07
   ═══════════════════════════════════════════════════════ */

/* 1. Page header — replace Sngine default blue gradient with GFC dark green→bronze brand */
/* Overrides style.min.css: .page-header { background: linear-gradient(to right, #667db6, #0082c8...) } */
.page-header {
    background: linear-gradient(135deg, #1a3a1c 0%, #2c5530 50%, #7a5c20 100%) !important;
}
.page-header h1, .page-header h2, .page-header h3,
.page-header p, .page-header .page-header-content,
.page-header small, .page-header .lead {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 2. Brand colour fix: teal .btn-info → GFC bronze */
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
    background-color: #cd7f32 !important;
    border-color: #a0621e !important;
    color: #ffffff !important;
}
.btn-outline-info {
    color: #cd7f32 !important;
    border-color: #cd7f32 !important;
    background-color: transparent !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: #cd7f32 !important;
    color: #ffffff !important;
}
.badge.bg-info,
.badge.text-bg-info {
    background-color: #cd7f32 !important;
    color: #ffffff !important;
}

/* 3. Messages — right pane invisible (solid black) on mobile — fix background */
/* Selectors from messages.tpl: .sg-offcanvas-mainbar (.col-md-8.col-lg-9) contains
   .card.panel-messages.fresh > .chat-conversations */
@media (max-width: 767px) {
    .sg-offcanvas-mainbar {
        background-color: var(--card-bg, #ffffff) !important;
        color: var(--text-color, #212529) !important;
    }
    .panel-messages {
        background-color: var(--card-bg, #ffffff) !important;
    }
    .panel-messages .chat-conversations {
        background-color: var(--card-bg, #ffffff) !important;
        color: var(--text-color, #212529) !important;
        min-height: 150px;
    }
    .js_conversation-container {
        background-color: var(--card-bg, #ffffff) !important;
    }
}

/* 4. Stash Tracker — horizontal scroll on mobile to prevent column cutoff */
/* Selectors from stash-tracker.tpl: .table-responsive wraps .table.table-hover */
@media (max-width: 991px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive .table {
        min-width: 650px;
    }
}