/* Swiss Recycling Metals - Custom Styles */

/* Force light mode - prevent browser dark mode (Samsung Internet, Chrome force-dark).
   The `only` keyword is the strong opt-out; plain `light` is ignored by Samsung Internet. */
:root, html {
    color-scheme: only light;
}
@media (prefers-color-scheme: dark) {
    :root { color-scheme: only light; }
    html, body { background-color: #ffffff; color: #1e293b; }
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #15803d;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #14532d;
}

/* Hero Pattern Background */
.hero-pattern {
    background-color: #ffffff;
    background-image: radial-gradient(#DAFBD8 1.5px, transparent 1.5px), radial-gradient(#DAFBD8 1.5px, #ffffff 1.5px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    opacity: 0.6;
}

/* Decorative Blob Effects */
.blob {
    position: absolute;
    filter: blur(40px);
    z-index: -1;
    opacity: 0.4;
}

/* Map Pattern Background - no opacity to preserve map colors */
.map-pattern {
    background-color: #ffffff;
    background-image: radial-gradient(#DAFBD8 1px, transparent 1px), radial-gradient(#DAFBD8 1px, #ffffff 1px);
    background-size: 25px 25px;
    background-position: 0 0, 12.5px 12.5px;
}

/* Europe Map Styles */
.europe-map-wrapper svg {
    width: 100%;
    height: auto;
    max-height: 500px;
    position: relative;
    z-index: 2;
}

/* Country detail maps - with max height constraint */
.country-map-wrapper svg {
    width: 100%;
    height: auto;
    max-height: 500px; /* Constrain height for better display */
    position: relative;
    z-index: 2;
}

.europe-map-wrapper path {
    transition: all 0.3s ease;
    stroke: #ffffff;
    stroke-width: 0.8;
    outline: none;
    /* Default gray for non-operating countries */
    fill: #ececec;
    opacity: 0.8;
}

.country-map-wrapper path {
    transition: all 0.3s ease;
    stroke: #ffffff;
    stroke-width: 0.8;
    outline: none;
    fill: #15803d;
    opacity: 0.8;
    cursor: pointer;
}

.europe-map-wrapper path.operating-country {
    cursor: pointer;
    fill: #15803d !important;
    opacity: 0.8;
    outline: none;
}

.europe-map-wrapper path.operating-country:hover,
.country-map-wrapper path:hover {
    transform: scale(1.02);
    transform-origin: center;
    fill: #14532d !important;
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(21, 128, 61, 0.3));
}

/* Tooltip Styles */
#country-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

#country-tooltip {
    transform: translateY(10px);
}

/* Map Container Responsive */
@media (max-width: 768px) {
    /* Remove max-width constraint on parent container */
    .relative.mx-auto.max-w-4xl {
        max-width: none;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .europe-map-wrapper,
    .country-map-wrapper {
        padding: 0.5rem;
        margin: 0;
        border-radius: 1rem;
        /* Remove max-width constraint for mobile */
        width: 100%;
    }
    
    .europe-map-wrapper svg,
    .country-map-wrapper svg {
        /* Remove height constraint, let it scale naturally */
        max-height: none;
        height: auto;
        /* Ensure it uses full container width */
        width: 100%;
    }
    
    /* Adjust the container to be full width on mobile */
    .europe-map-wrapper .svg-container,
    .country-map-wrapper .svg-container {
        width: 100%;
    }
}

/* Extra small mobile optimization */
@media (max-width: 480px) {
    /* Make parent container truly full width */
    .relative.mx-auto.max-w-4xl {
        margin-left: 0;
        margin-right: 0;
    }
    
    .europe-map-wrapper,
    .country-map-wrapper {
        padding: 0.25rem;
        border-radius: 0.5rem;
        /* Remove side margins completely on very small screens */
        margin: 0;
        border-left: none;
        border-right: none;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* Selection */
::selection {
    background-color: #DAFBD8;
    color: #14532d;
}

/* Members */
.nav-button {
    color: #6b7280 !important;
    background-color: transparent !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-button:hover {
    background-color: #f9fafb !important;
    color: #374151 !important;
}

.nav-button.active {
    background-color: #DAFBD8 !important;
    color: #14532d !important;
    font-weight: 700 !important;
}

.nav-button.active i {
    color: #14532d !important;
}

.nav-button.active span {
    color: #14532d !important;
}

.logout-button {
    color: #991b1b !important;
}

.logout-button:hover {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}

.logout-button i {
    color: #991b1b !important;
}

.logout-button:hover i {
    color: #991b1b !important;
}

/* Collaborator Modal - Email Overflow Fix */
#collaborators-modal .bg-white.border {
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

#collaborators-modal a {
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
}

@media (max-width: 768px) {
    #collaborators-modal .bg-white.border {
        padding: 1rem;
    }
    
    #collaborators-modal a {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}