/* 
 * Swampcoin Explorer - Custom Green Theme
 * This file contains additional customizations for the green accent theme
 * You can modify colors and styles here without touching the main template files
 */

/* Additional Green Theme Enhancements */
:root {
    /* Extended color palette for green theme */
    --swamp-green-light: #34ce57;
    --swamp-green-dark: #155724; /* Darker green for better contrast */
    --swamp-green-medium: #1e7e34; /* Medium dark green */
    --swamp-green-glow: rgba(40, 167, 69, 0.3);
    --swamp-accent: #20c997; /* Teal accent for variety */
}

/* Icon color enhancements */
.feature-icon-small {
    background: linear-gradient(135deg, var(--bs-primary), var(--swamp-accent)) !important;
    border: 2px solid rgba(40, 167, 69, 0.3);
    color: var(--bs-primary) !important;
}

/* SVG icon fills - darker green for better visibility - FORCE OVERRIDE */
.feature-icon-small svg,
.text-primary svg,
svg.text-primary,
.bi-coin,
.bi-boxes,
.bi-lightning-charge,
.bi-gear,
.bi-search,
svg[class*="bi-"] {
    fill: var(--swamp-green-medium) !important; /* Darker green for better contrast */
    color: var(--swamp-green-medium) !important;
}

/* Very dark green SVG fills for better contrast on primary backgrounds */
.bg-primary svg,
.btn-primary svg,
.badge.bg-primary svg {
    fill: var(--swamp-green-dark) !important; /* Very dark green (#155724) */
    color: var(--swamp-green-dark) !important;
}

/* Ensure Bootstrap icons inherit theme colors */
[class*="bi-"] {
    fill: currentColor !important;
}

/* Feature icons with green theme */
.feature-icon-small [class*="bi-"] {
    fill: var(--swamp-green-dark) !important;
}

/* Navbar and general SVG styling */
.navbar svg,
.search-form svg {
    fill: currentColor;
    transition: all 0.3s ease;
}

/* Button SVG hover effects */
.btn:hover svg {
    transform: scale(1.1);
}

/* Icon containers with green theme */
.text-primary .feature-icon-small,
.feature-icon-small.text-primary {
    color: var(--bs-primary) !important;
    background: linear-gradient(135deg, var(--bs-primary), var(--swamp-accent)) !important;
}

/* Ensure all path elements in SVGs use theme colors */
.text-primary svg path,
.feature-icon-small svg path {
    fill: inherit !important;
}

/* Table row hover effects */
.table-hover tbody tr:hover {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

/* Search button glow effect */
.btn-primary:focus {
    box-shadow: 0 0 20px var(--bs-primary-glow) !important;
}

/* Pagination styling */
.page-link {
    color: var(--bs-primary);
    border-color: rgba(40, 167, 69, 0.3);
}

.page-link:hover {
    color: var(--bs-primary-hover);
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--bs-primary);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 10px var(--bs-primary-glow);
}

/* Form input focus states */
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 10px var(--bs-primary-glow);
}

/* Sponsor card hover effects with green theme */
.sponsor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--bs-primary-glow);
}

/* Sponsor section title underline with green theme */
.sponsors-underline {
    background: linear-gradient(90deg, var(--bs-primary), var(--swamp-accent)) !important;
}

/* Override any hardcoded SVG fills in sponsor logos */
.sponsor-card svg path[fill="#1E4192"],
.sponsor-card svg path[fill="#D4171D"] {
    fill: var(--bs-primary) !important;
}

/* General SVG path override for theme consistency */
svg path[fill]:not([fill="none"]):not([fill="currentColor"]) {
    fill: var(--bs-primary) !important;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 29, 32, 0.8);
}

::-webkit-scrollbar-thumb {
    background: var(--bs-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary-hover);
}

/* Loading animation with green theme */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 var(--bs-primary-glow); }
    70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.pulse-green {
    animation: pulse-green 2s infinite;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .card,
    .card.bg-dark,
    .bg-dark.card,
    div.card {
        background: rgba(33, 37, 41, 0.15) !important; /* Same 15% opacity on mobile */
        background-color: rgba(33, 37, 41, 0.15) !important;
    }

    body::before {
        background-attachment: scroll !important; /* Better performance on mobile */
    }
}

/* Print styles */
@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .card {
        background: white !important;
        border: 1px solid #ccc !important;
    }
}

/* FINAL OVERRIDES - Highest Priority */
/* Force card transparency */
.card,
.card.bg-dark,
.bg-dark.card,
div.card,
section.card {
    background: rgba(33, 37, 41, 0.15) !important;
    background-color: rgba(33, 37, 41, 0.15) !important;
}

/* Force navbar and footer transparency to match cards */
.navbar,
nav.navbar,
footer,
footer.footer {
    background: rgba(26, 29, 32, 0.15) !important;
    background-color: rgba(26, 29, 32, 0.15) !important;
    backdrop-filter: blur(10px) !important;
}

/* Force green primary colors */
.btn-primary,
button.btn-primary {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    background-color: #218838 !important;
    border-color: #218838 !important;
}

/* Force green text colors */
.text-primary,
a.text-primary {
    color: #28a745 !important;
}

/* Force green badges */
.badge.bg-primary,
span.badge.bg-primary {
    background-color: #28a745 !important;
}