/* ==================================================================
   CLEAN BUILD STYLESHEET
   ================================================================== */

/* 1. COLOR VARIABLES (Best Practice for Theming) */
:root {
    --fc-primary: #0d6efd;
    --fc-success: #198754;
    --fc-warning: #ffc107;
    --fc-dark: #212529;
    --fc-light: #f8f9fa;

    /* Light Mode Defaults */
    --fc-bg-main: var(--fc-light);
    --fc-bg-card: #fff;
    --fc-text-primary: #212529; /* DARK TEXT */
    --fc-text-muted: #6c757d;
    --fc-border-color: #dee2e6;
    --fc-shadow-color: rgba(0,0,0,0.1);
}

/* Dark Mode Overrides */
.dark-mode {
    --fc-bg-main: #212529;
    --fc-bg-card: #343a40; /* Darker card background */
    --fc-text-primary: #f8f9fa; /* LIGHT TEXT */
    --fc-text-muted: #adb5bd; /* Lighter muted text */
    --fc-border-color: #495057;
    --fc-shadow-color: rgba(255,255,255,0.1);
    background-color: var(--fc-bg-main) !important;
    color: var(--fc-text-primary) !important;
}

/* 2. APPLY VARIABLES TO GLOBAL ELEMENTS (Fixing Dark Mode) */
body {
    background-color: var(--fc-bg-main) !important;
    color: var(--fc-text-primary) !important;
}

.card, .alert {
    background-color: var(--fc-bg-card) !important;
    border-color: var(--fc-border-color) !important;
    color: var(--fc-text-primary) !important;
}

/* FINAL FIX for Dark Mode Text: Target common Bootstrap/HTML elements within dark mode */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .card-title, .dark-mode .card-text, .dark-mode p {
    color: var(--fc-text-primary) !important;
}

.text-muted {
    color: var(--fc-text-muted) !important;
}

/* --- LIGHT MODE MODULE HEADER FIX (NEW) --- */
/* Target specific Bootstrap classes that clash (white text on light background) in Light Mode */
.card-header.bg-info h4, 
.card-header.bg-info h5,
.card-header.bg-info .text-white,
.card-header.bg-info .btn-light {
    color: var(--fc-text-primary) !important; /* Forces dark text on light blue */
}

/* --- Aggressive Fixes for Bootstrap Text and BG Overrides in Dark Mode --- */
/* Targetting generic utility classes to ensure they use our theme variables */
.dark-mode .text-muted { color: var(--fc-text-muted) !important; }
.dark-mode .text-dark { color: var(--fc-text-primary) !important; }
.dark-mode .text-light { color: var(--fc-text-primary) !important; }
.dark-mode .text-secondary { color: var(--fc-text-muted) !important; }

/* Ensure all Bootstrap background colors switch in dark mode */
.dark-mode .bg-light { background-color: var(--fc-bg-card) !important; }
.dark-mode .bg-white { background-color: var(--fc-bg-card) !important; }
.dark-mode .bg-dark { background-color: var(--fc-dark) !important; }

/* Fix links in dark mode */
.dark-mode a { color: #8ab4f8; } 
.dark-mode a:hover { color: #c5e1ff; }

/* Specific component fixes for dark mode */
.dark-mode .card-header.bg-dark {
    background-color: var(--fc-dark) !important;
}
.dark-mode .card-header.bg-light {
    background-color: var(--fc-dark) !important;
    color: var(--fc-text-primary) !important;
}


/* --- 3. General Card Hover Consistency (APPLIED VIA .hover-lift class) --- */
.hover-lift {
    /* Ensures animation runs smoothly */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* FINAL FIX for Hover: Increase specificity to guarantee precedence */
.card.hover-lift:hover { 
    transform: translateY(-6px) !important; 
    box-shadow: 0 12px 30px var(--fc-shadow-color) !important;
}


/* --- General Card Reset --- */
.card-horizontal {
    display: flex;
    flex-direction: row; /* Forces image and body side-by-side */
    height: 100%;
    overflow: hidden;
}

/* --- Image Constraint (The Fix) --- */
.card-horizontal img {
    /* Set a fixed size for the image container - Reduced width for better fit on wider cards */
    width: 150px !important; 
    height: 100% !important;
    object-fit: cover; /* Crops the image to fit the container */
    flex-shrink: 0;
}


/* --- Basic Tier Strip --- */
.basic-card {
    border: 1px solid #ccc;
    padding: 1rem;
    background-color: #f8f9fa;
    margin-bottom: 1rem;
}

/* --- Basic Tier Card Styling --- */
.basic-card-styled {
    border-left: 5px solid #007bff;
    /* Simple blue line */
    background-color: #f0f8ff; /* Light, distinct background */
    border-radius: 0.5rem;
}
.dark-mode .basic-card-styled {
    background-color: #495057 !important; /* Make light blue stand out on dark */
    border-left-color: #00bcd4 !important;
}

/* --- Sidebar Ad Placeholder (Kept for compatibility) --- */
.half-page {
    width: 300px;
    height: 600px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    /* Stack cards vertically on small screens */
    .card-horizontal {
        flex-direction: column;
    }
    .card-horizontal img {
        width: 100% !important;
        height: auto !important;
        max-height: 250px;
    }

    .half-page {
        width: 100%;
        height: 300px;
        /* Block ad on mobile */
        margin: 20px 0;
    }
}

/* Flexible, non-distorting logo frame for user profiles */
.logo-top-left {
    max-width: 150px !important; 
    max-height: 90px !important;
    width: auto !important;      /* Overrides fixed width */
    height: auto !important;     /* Overrides fixed height */
    object-fit: contain !important; /* Preserves aspect ratio inside the bounds */
    position: absolute;
    top: 20px;
    left: 20px;
    background: transparent;
}

/* Fix for Directory Card previews */
.logo-img-top-tier {
    width: 60px;
    height: 60px;
    object-fit: contain; /* Shrinks to fit without squishing */
    border: 1px solid var(--fc-border-color);
}

/* Google Places Autocomplete - must render above Bootstrap modals */
.pac-container {
    z-index: 1056 !important;
}

/* Profile page - card layout and image positioning */
.profile-card {
    position: relative;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    min-height: 200px;
}

.profile-content {
    padding-top: 20px;
}

.photo-top-right {
    max-width: 140px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px !important;
    top: 20px;
    right: 20px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}