/* species-detail-specific.css */

/* IMPORTANT: THIS FILE SHOULD NOT CONTAIN:
   - body { ... }
   - .navbar { ... }
   - .footer and related footer styles
   as those are handled by the main dashboard's style.css
*/

/* Species Hero Section */
.species-hero-section {
    background-image: url("../images/background/background_sp.png"); /* Path relative to where species.html is served from */
    background-size: cover;
    padding: 2rem;
    border-radius: 0.375rem;
}

.species-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #e9ecef;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.image-caption {
    font-size: 0.75rem;
    color: #6c757d;
}

.species-title {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.scientific-name {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.family-name {
    font-size: 0.9rem;
    color: #495057;
}

/* Info Box Styles - WITH RESPONSIVE FIXES */
.info-box {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #d3d2d2;
    border-radius: 5px;
    border: 1px solid #9d9fa0;
    min-height: 70px;
    width: 100%; /* Ensure info-box takes full width of its column */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.info-box-icon {
    font-size: 1.5rem;
    margin-right: 15px; /* Space between icon and text on larger screens */
    flex-shrink: 0;     /* Prevent icon from shrinking */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-box-icon img { /* Ensure images within icons behave */
    max-width: 100%;
    max-height: 100%;
}

/* This div contains the <small> and <p> text elements */
.info-box > div:not(.info-box-icon) {
    flex-grow: 1; /* Allow this text container to take up remaining space */
    min-width: 0; /* Important for flex items to prevent overflow with long text */
}

.info-box > div:not(.info-box-icon) p {
    margin-bottom: 0; /* Remove default bottom margin from paragraph if desired */
    word-wrap: break-word; /* Allow long words to break and wrap */
    /* overflow-wrap: break-word; */ /* Alternative modern property */
}

/* Specific IUCN icon styles */
.info-box .iucn-na-text { color: #979c98 !important; font-size: small;}
.info-box .iucn-na-icon {
    background-color: #959996;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    font-size: 0.9em;
    padding: 2px 5px;
    line-height: 1;
    width: auto; /* Let content define width */
    height: auto; /* Let content define height */
}

.section-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.species-details-section > .section-title:first-child {
    margin-top: 0;
}

/* Status Table Styles */
.status-table-container {
    /* background-color: #f8f9fa; */ /* Can be removed if parent pane has this bg */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 2rem;
    border: 1px solid #e9ecef;
}

.status-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 6px;
    overflow: hidden; /* For border-radius on table */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status-table th, .status-table .thead_bg th { /* Ensure thead_bg is covered if used */
    background-color: #333446;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.9rem;
}

.status-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    color: #333;
    vertical-align: middle;
}

.status-table tbody tr:hover {
    background-color: #f1f3f5; /* Slightly different hover */
}

.status-table tbody tr:last-child td {
    border-bottom: none;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    min-width: 60px;
}

.status-lc { background-color: #60C659; color: white; }
.status-not-recognised { background-color: #D1D1D1; color: #333; }
.year-cell { font-size: small; font-weight: 400; color: #495057; }

.taxonomy-card {
    background-color: #fff; padding: 20px; border-radius: 5px;
    border: 1px solid #e0e0e0; text-align: left;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    height: 100%; /* Make cards in a row same height */
}
.taxonomy-card-title {
    font-size: 0.8rem; color: #6c757d; margin-bottom: 0.25rem;
    text-transform: uppercase;
}
.taxonomy-card-value {
    font-size: 1.1rem; font-weight: 500; color: #333; margin-bottom: 0;
}

/* Style for the map container IF it gets initialized */
#observationMap {
    height: 350px; /* Adjusted height for within a pane */
    width: 100%; border: 1px solid #ccc; border-radius: 5px;
    margin-top: 1rem;
}

.legend {
    padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif;
    background: white; background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px;
    line-height: 18px; color: #555;
}
.legend i {
    width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7;
}

/* Islands section within species detail */
.islands-container {
    display: flex; justify-content: flex-start; /* Changed from left */
    align-items: flex-start;
    gap: 1.5rem; /* Slightly reduced gap */
    padding: 1rem 0; /* Reduced padding */
    flex-wrap: wrap;
}
.island-item {
    text-align: center; max-width: 180px; /* Adjusted max-width */
    flex-basis: calc(33.333% - 1rem); /* Aim for 3 items per row, adjusting for gap */
    min-width: 140px;
    margin-bottom: 1rem;
}
.islands-image {
    width: 120px; height: 120px; /* Adjusted size */
    border-radius: 50%; object-fit: cover;
    border: 3px solid #cc942b; box-shadow: 0 0 8px rgba(0,0,0,0.1);
    margin-bottom: 0.5rem;
}
.island-name {
    font-weight: bold; font-size: 1rem; margin: 0; margin-bottom: 0.1rem; color: #333;
}
.island-location {
    font-weight: 300; font-size: 0.8rem; margin: 0; color: #666;
}


/* Responsive adjustments for content within species-detail-specific.css */
@media (max-width: 767.98px) {
    .species-hero-section .species-image { /* Scoped for clarity, was .species-image */
        width: 150px;
        height: 150px;
        margin-bottom: 1rem;
    }
    /* .info-box already handled by its own media query block */
    .species-hero-section .info-box { /* Scoped rule for hero section context if needed, though base .info-box should cover */
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .species-hero-section .info-box-icon { /* Scoped rule */
        margin-right: 0;
        margin-left: 0; /* Ensure it aligns left */
        margin-bottom: 8px;
    }
    .species-hero-section { padding: 1.5rem; }

    .status-table th, .status-table td { padding: 8px 10px; font-size: 0.85rem; }

    .islands-container {
        justify-content: center; /* Center items when they stack */
        gap: 1rem;
    }
    .island-item {
        flex-basis: calc(50% - 0.5rem); /* 2 items per row */
        max-width: 160px;
    }
    .islands-image { width: 100px; height: 100px; }
}

@media (max-width: 480px) {
    .island-item {
        flex-basis: 100%; /* 1 item per row */
        max-width: 150px;
    }
    .islands-image { width: 90px; height: 90px; }
    .island-name { font-size: 0.95rem; }
    .island-location { font-size: 0.75rem; }
}