/**
 * ==================================================
 * Tea Composition Map
 * ==================================================
 */

:root {

    --tea-red: #e64626;

    --tea-ochre: #e64626;

    --tea-ochre-light: #f8edd1;

    --tea-grey: #888888;

    --tea-grey-light: #f8f8f8;

    --tea-text: #333333;

    --tea-border: #dddddd;

}

/* ==================================================
   Map
   ================================================== */

.tea-map-wrapper {

    max-width: 1400px;
    margin: 0 auto;

}

.tea-map-controls {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}

#tea-map {

    width: 100%;

    height: 700px;

    border: 1px solid var(--tea-border);

    border-radius: 8px;

}

/* ==================================================
   Popup
   ================================================== */

.leaflet-popup-content-wrapper {

    border-radius: 12px;

    padding: 0;

    overflow: hidden;

}

.leaflet-popup-content {

    margin: 0;

    width: 1200px;

    max-width: 95vw;

    max-height: 85vh;

    overflow-y: auto;

    overflow-x: hidden;

}

.leaflet-popup-tip {

    background: #ffffff;

}

.leaflet-popup-close-button {

    font-size: 18px;

    padding: 8px;

}

/* ==================================================
   Popup Header
   ================================================== */

.tea-popup-header {

    background: var(--tea-red);

    color: #ffffff;

    padding: 20px 24px;

}

.tea-popup-header h3 {

    margin: 0;

    color: #hotpink;

    font-size: 24px;

    line-height: 1.3;

}

.tea-school-meta {

    margin-top: 6px;

    font-size: 13px;

    color: rgba(255,255,255,0.9);

}

/* ==================================================
   Accordion Area
   ================================================== */

.tea-accordion {

    padding: 20px;

}

/* ==================================================
   Accordion
   ================================================== */

.tea-class-accordion {

    border: 1px solid var(--tea-border);

    border-radius: 10px;

    overflow: hidden;

    background: #ffffff;

    margin-bottom: 16px;

}

.tea-class-accordion:last-child {

    margin-bottom: 0;

}

.tea-class-accordion summary {

    cursor: pointer;

    list-style: none;

    padding: 16px 18px;

    font-size: 15px;

    font-weight: 700;

    background: #fafafa;

    border-left: 5px solid var(--tea-ochre);

    transition: all 0.15s ease;

}

.tea-class-accordion summary:hover {

    background: #f5f0e3;

}

.tea-class-accordion[open] summary {

    background: var(--tea-ochre-light);

}

.tea-class-accordion summary::-webkit-details-marker {

    display: none;

}

.tea-class-accordion summary::before {

    content: "▶";

    display: inline-block;

    margin-right: 10px;

    font-size: 12px;

    transition: transform 0.2s ease;

}

.tea-class-accordion[open] summary::before {

    transform: rotate(90deg);

}

.tea-class-content {

    padding: 20px;

}

/* ==================================================
   Grid
   ================================================== */

.tea-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

}

/* ==================================================
   Soil Cards
   ================================================== */

.tea-managed,
.tea-unmanaged {

    border-radius: 10px;

    overflow: hidden;

}

.tea-managed {

    background: var(--tea-ochre-light) !important;

    border: 3px solid var(--tea-ochre) !important;

    box-shadow:
        0 2px 8px rgba(167,119,17,0.18);

}

.tea-unmanaged {

    background: #f8f8f8;

    border: 2px solid #9a9a9a;

}

/* ==================================================
   Card Headings
   ================================================== */

.tea-managed h4 {

    margin: 0;

    padding: 14px 16px;

    background: var(--tea-ochre) !important;

    color: #ffffff;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 12px;

}

.tea-unmanaged h4 {

    margin: 0;

    padding: 14px 16px;

    background: #888888;

    color: #ffffff;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 12px;

}

/* ==================================================
   Metrics
   ================================================== */

.tea-metric-grid {

    padding: 12px 14px;

    background: transparent;

}

.tea-metric {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 10px 0;

}

.tea-managed .tea-metric {

    border-bottom: 1px solid rgba(167,119,17,0.25);

}

.tea-unmanaged .tea-metric {

    border-bottom: 1px solid rgba(0,0,0,0.08);

}

.tea-metric:last-child {

    border-bottom: none;

}

.tea-label {

    flex: 1;

    color: var(--tea-text);

    font-weight: 600;

}

.tea-value {

    color: #111111;

    font-weight: 700;

    text-align: right;

    white-space: nowrap;

}

.tea-empty {

    color: #999999;

    font-style: italic;

    font-weight: 400;

}

/* ==================================================
   Marker Hover
   ================================================== */

.leaflet-marker-icon {

    transition: transform 0.15s ease;

}

.leaflet-marker-icon:hover {

    transform: scale(1.05);

}

/* ==================================================
   Scrollbars
   ================================================== */

.leaflet-popup-content::-webkit-scrollbar {

    width: 10px;

}

.leaflet-popup-content::-webkit-scrollbar-track {

    background: #f5f5f5;

}

.leaflet-popup-content::-webkit-scrollbar-thumb {

    background: #cccccc;

    border-radius: 10px;

}

/* ==================================================
   Mobile
   ================================================== */

@media (max-width: 768px) {

    #tea-map {

        height: 600px;

    }

    .leaflet-popup-content {

        width: 95vw;

    }

    .tea-grid {

        grid-template-columns: 1fr;

    }

    .tea-popup-header h3 {

        font-size: 20px;

    }

    .tea-class-content {

        padding: 15px;

    }

}

/* ==================================================
   Large Screens
   ================================================== */

@media (min-width: 1400px) {

    .leaflet-popup-content {

        width: 1300px;

    }

}