/**
 * Location Card Shared Styles
 *
 * WHY: Centralized CSS for location cards across all views
 * Ensures consistent badge styling for SFFR, BR, and technology badges
 * Used by unified _location_card.html component
 */

/* ============================================
   SFFR Gold Badge
   ============================================ */
.sffr-gold-badge {
    background: linear-gradient(135deg, #8B7355 0%, #B8860B 25%, #FFD700 50%, #DAA520 75%, #CD853F 100%);
    color: #000;
    font-weight: bold;
    box-shadow:
        0 2px 8px rgba(255, 215, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid #B8860B;
}

/* ============================================
   BR Badge - Green Gradient (Standard)
   WHY: Vibrant green chosen for better visibility
   DECISION: Standardized on green gradient from company map view (2025-01-04)
   ============================================ */
.br-badge {
    background: linear-gradient(135deg, #198754 0%, #20c997 25%, #25d366 50%, #28a745 75%, #157347 100%) !important;
    background-size: 200% 200% !important;
    color: #fff !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 10px rgba(37, 211, 102, 0.5) !important;
    box-shadow:
        0 3px 12px rgba(37, 211, 102, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
    border: 2px solid #198754 !important;
    position: relative !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* Legacy class name (br-silver-badge) - kept for backwards compatibility during migration */
.br-silver-badge {
    background: linear-gradient(135deg, #198754 0%, #20c997 25%, #25d366 50%, #28a745 75%, #157347 100%) !important;
    background-size: 200% 200% !important;
    color: #fff !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 10px rgba(37, 211, 102, 0.5) !important;
    box-shadow:
        0 3px 12px rgba(37, 211, 102, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
    border: 2px solid #198754 !important;
    position: relative !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* ============================================
   Technology Badge Colors
   WHY: Consistent color coding across all technology types
   ============================================ */
.badge-gas {
    background-color: #ff5252 !important;
}

.badge-dsr {
    background-color: #f57c00 !important;
}

.badge-ev-charging,
a.badge-ev-charging,
.badge.badge-ev-charging,
span.badge-ev-charging {
    background-color: #e91e63 !important;
    color: white !important;
    border: none !important;
    text-decoration: none !important;
}

.badge-nuclear {
    background-color: #8d6e63 !important;
}

.badge-chp {
    background-color: #5c6bc0 !important;
}

.badge-solar {
    background-color: #fdd835 !important;
    color: #000 !important;
}

.badge-wind {
    background-color: #29b6f6 !important;
}

.badge-battery {
    background-color: #4caf50 !important;
}

.badge-biomass {
    background-color: #8bc34a !important;
}

.badge-hydro {
    background-color: #0097a7 !important;
}

.badge-interconnector {
    background-color: #9c27b0 !important;
}

.badge-coal {
    background-color: #424242 !important;
}

.badge-unknown {
    background-color: #757575 !important;
}

/* ============================================
   Location Card Base Styles
   ============================================ */
.location-card {
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding: 20px 0 !important;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.location-card:last-child {
    border-bottom: none;
}

.location-card:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Active state (for map interaction) */
.location-card.active {
    background-color: rgba(13, 110, 253, 0.05);
    border-left: 3px solid #0d6efd;
    padding-left: 17px !important;
}

/* ============================================
   Badge Hover Effects
   ============================================ */
a.badge:hover {
    opacity: 0.8;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* ============================================
   Dark Mode Overrides
   ============================================ */
html[data-bs-theme="dark"] .location-card {
    border-bottom-color: #495057;
}

html[data-bs-theme="dark"] .location-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .location-card.active {
    background-color: rgba(13, 110, 253, 0.1);
}