/* ============================================================
   PROVELUP PROPERTY WIDGET — widget.css
   Colours, fonts and component styles directly matched
   to custom.css and mapping.css from the backend codebase.
   All classes prefixed .sdw- to prevent host-page conflicts.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;   /* matches body in custom.css */
    font-size: 0.9em;                        /* matches body in custom.css */
    font-weight: 400;
    color: #696969;                          /* --darkGrey */
    background-color: #ffffff;
}

/* ---- Brand CSS Variables (mirrors custom.css & mapping.css) ---- */
:root {
    --primaryBlue:    #141459;
    --secondaryBlue:  #00cec3;
    --activeBlue:     #eef7ff;
    --hoverGrey:      #f8f9fa;
    --uniGrey:        #ebebeb;
    --tableGrey:      rgba(0,0,0,.05);
    --midGrey:        #c7c7c7;
    --darkGrey:       #696969;
    --white:          #ffffff;
    --boxShadow1:     0 10px 40px rgba(0,0,0,0.1);
    --boxShadow2:     0 0px 10px rgba(0,0,0,0.2);

    /* Stand status colours — from mapping.css :root & getStatusColor() */
    --available:        #25d366;   /* CSS badge colour */
    --sold:             #e35c61;   /* CSS badge colour */
    --available2:       #54dd9d;
    --reserved:         #8b68eb;
    --endowment:        #6895eb;
    --pledged:          #dc68eb;
    --expiredContract:  #fcce66;
    --eviction:         #5d5353;

    /* Map polygon fill colours — from getStatusColor() in mapindex.js */
    --fill-available:   #4cffe3;   /* cyan  — getStatusColor('Available') */
    --fill-sold:        #e74c3c;   /* red   — getStatusColor('Sold') */

    --panel-width: 270px;
    --panel-width-mobile: calc(100% - 15px) ;
}

/* ====================================================================
   ACTION CLASSES
   ==================================================================== */

.hide {
    display: none!important;
}

.bg-tableGrey {
    background: var(--tableGrey)!important;
}


/* ====================================================================
   LAYOUT
   ==================================================================== */

.sdw-wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.frame-wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
    min-height: 622px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--midGrey);
    background-color: #FFF; 
}


/* ====================================================================
   LEFT PANEL  — styled like #NewFarm in mapping.css
   ==================================================================== */

.sdw-panel {
    width: var(--panel-width);
    flex-shrink: 0;
    border-radius: 10px 0px 0px 10px;
    margin: 8px 0px 8px 8px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
    /* overflow rules removed from here */
}

.sdw-panel-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sdw-panel-inner::-webkit-scrollbar { display: none; }

/* ---- Panel Header — styled like .butPri ---- */
.sdw-panel-header {
    border-radius: 9px 0 0 0;
    padding: 10px 5px 12px;
    flex-shrink: 0;
    color: var(--primaryBlue);
}

.sdw-project-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--primaryBlue);
    line-height: 1.2;
    margin-bottom: 6px;
}

.sdw-project-location {
    font-size: 12px;
    color: var(--primaryBlue);
}


/* ---- Divider — matches .divLine ---- */
.sdw-divider {
    border-bottom: 1.5px solid var(--uniGrey);
    margin: 5px 5px 5px 5px;
}


/* ---- Availability Progress Bar ---- */
.sdw-progress-section {
    padding: 8px 9px 12px 9px;
    flex-shrink: 0;
}

.sdw-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
}

.sdw-prog-avail { color: var(--available); }
.sdw-prog-sold  { color: var(--sold); }

.sdw-progress-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--uniGrey);
}

.sdw-fill-available {
    height: 100%;
    background: var(--available2);
    transition: width 0.6s ease;
}

.sdw-fill-sold {
    height: 100%;
    background: var(--sold);
    transition: width 0.6s ease;
    border-right: 2px solid #fff;
}

.sdw-progress-sublabels {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-size: 10px;
    color: var(--darkGrey);
}


/* ---- Stats Section ---- */
.sdw-stats-section {
    padding: 4px 5px 8px;
    flex-shrink: 0;
}

/* .Title matches mapping.css */
.sdw-section-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--darkGrey);
}

.sdw-stat-row {
    display: flex;
    align-items: center;
    padding: 0px;
    border-radius: 5px;
    transition: background 0.15s;
}

.sdw-stat-row:last-child { border-bottom: none; }

.sdw-stat-row:hover { background-color: var(--hoverGrey); }

.sdw-stat-icon.pri  { background: var(--primaryBlue); color: var(--white); }
.sdw-stat-icon.avail { background: var(--available); color: var(--white); }
.sdw-stat-icon.sold  { background: var(--sold); color: var(--white); }

.sdw-stat-body { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    padding: 5px;
    height: 28px;
    border-radius: 5px;
}

.sdw-stat-label {
    font-size: 12px;
    color: var(--primaryBlue);
    line-height: 1.2;
}

.sdw-stat-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--primaryBlue);           
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sdw-stat-status {
    display: flex; 
    align-items: center;
    padding: 3px 5px;
    font-size: 0.8em;
    color: #fff;
    font-weight: 400;
    border-radius: 3px;
}

.sdw-stat-value.avail { background: var(--available); }
.sdw-stat-value.sold  { background: var(--sold); }
.sdw-stat-value.active { background: #25d366;} 


.info-box {
    display: flex;
    background: #dbf0ff;
    padding: 8px;
    border-radius: 5px;
    color: var(--primaryBlue);
    margin-top: 10px;
}

.info-box div:last-child {
    font-size: 0.75em;
    font-style: italic;
    
}

/* ---- Legend ---- */
.sdw-legend-section {
    padding: 4px 14px 10px;
    flex-shrink: 0;
}

/* Mirrors .legend-item from mapping.css */
.sdw-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    padding: 1px 0;
}

/* Mirrors .legend-color from mapping.css */
.sdw-legend-color {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 3px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Map polygon fill colours */
.sdw-legend-color.avail { background-color: var(--fill-available); }
.sdw-legend-color.sold  { background-color: var(--fill-sold); }

.sdw-legend-label {
    color: #333;
    font-size: 12px;
    font-weight: 400;
}

/* ---- Panel Branding ---- */
.sdw-panel-branding {
    margin-top: auto;
    padding: 8px 5px;
    font-size: 10px;
    /*border-top: 1px solid var(--uniGrey);*/
    color: var(--midGrey);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    flex-shrink: 0;
}

/* ---- Panel Refresh ---- */
.sdw-panel-refresh {
    font-size: 10px;
    color: var(--midGrey);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---- Panel Footer ---- */
.sdw-panel-footer {
    margin-top: auto;
    padding: 8px 14px;
    border-top: 1px solid var(--uniGrey);
    font-size: 10px;
    color: var(--midGrey);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}


/* ====================================================================
   MAP AREA
   ==================================================================== */

.map-branding {
    display: none;
}

.sdw-map-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    margin: 8px 8px 8px 8px;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid #cccccc;
    /*border: 1px solid var(--primaryBlue);*/
}

#sdw-map {
    width: 100%;
    height: 100%;
    border-radius: 0px 9px 9px 0px;
}

.mobMoreInfo {
    display: none!important;
}

/* ---- Loading Overlay ---- */
.sdw-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 1000;
    font-size: 13px;
    color: var(--darkGrey);
    border-radius: 9px;
    transition: opacity 0.3s;
}

.sdw-loading-overlay.sdw-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Matches .spinner from custom.css */
.sdw-spinner {
    border: 2px solid rgba(255,255,255,0);
    border-top:    2px solid var(--primaryBlue);
    border-right:  2px solid var(--primaryBlue);
    border-bottom: 2px solid var(--primaryBlue);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: sdwSpin 1s linear infinite;
}

@keyframes sdwSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ====================================================================
   LEAFLET CONTROLS — matches .butPri / .butPri:hover from custom.css
   (#141459 base, #00cec3 hover, white text)
   Extra selectors added to beat Leaflet's own specificity.
   ==================================================================== */

.leaflet-control-zoom {
    border: none !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
    font-size: 16px;
    line-height: 25px!important;
    color: var(--primaryBlue);
}

/* ====================================================================
   LEAFLET LABELS
   ==================================================================== */

.standLabels {
    position: absolute;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.95);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid #263c94;
    color: #263c94;
    white-space: nowrap;
    pointer-events: none;
    line-height: 14px;
}

.standLabels i {
    margin-right: 4px;
    font-size: 0.8em;
}

/* ====================================================================
   LEAFLET POPUP — directly mirrors mapping.css popup rules
   ==================================================================== */

/* Matches .leaflet-popup in mapping.css */
.leaflet-popup {
    font-family: 'Montserrat', sans-serif; 
    border: 1px solid var(--midGrey) !important;
    border-radius: 11px !important;
    margin-bottom: 30px;
}

/* Matches .leaflet-popup-content-wrapper in mapping.css */
.leaflet-popup-content-wrapper {
    width: 299px !important;
    border-radius: 10px !important;
    box-shadow: var(--boxShadow2) !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
}

/* Matches .leaflet-popup-content in mapping.css */
.leaflet-popup-content {
    margin: 8px 10px 10px 10px !important;
}

/* Matches .leaflet-popup-tip rules in mapping.css */
.leaflet-popup-tip-container {
    margin-top: 0px !important;
}

.leaflet-popup-tip {
    border: 1px solid var(--midGrey) !important;
}

/* Matches .leaflet-popup-close-button in mapping.css */
.leaflet-popup-close-button {
    padding: 6px !important;
    width: 42px !important;
    font-size: 1.5em !important;
    color: var(--darkGrey) !important;
}


/* ====================================================================
   POPUP CONTENT — directly mirrors .popup-header / .popup-content
   rules from mapping.css
   ==================================================================== */

/* Matches .popup-header in mapping.css */
.popup-header {
    color: var(--primaryBlue);
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 10px;
    margin-left: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Matches .popup-content table rules in mapping.css */
.popup-content table {
    width: 100%;
    border-collapse: collapse;
}

.popup-content table tr td:first-child {
    padding: 5px;
    border-radius: 5px 0px 0px 5px;
}

.popup-content table tr td:nth-child(2) {
    padding: 5px;
    border-radius: 0px 5px 5px 0px;
}

.popup-content table tr:not(:last-child) td {

}

.popup-content table td:first-child {
    font-weight: 500;
    width: 40%;
    color: var(--primaryBlue);
}

.popup-content table td:last-child {
    text-align: right;
    font-weight: 400;
}

/* Status badge — matches .StandStat from mapping.css */
.StandStat {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 500;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
    margin-right: 0px;
}

/* Matches .available / .sold class colours from mapping.css */
.StandStat.available { background: var(--available); }
.StandStat.sold      { background: var(--sold); }


/* ====================================================================
   MAP LEGEND CONTROL
   Copied from mapping.css so the widget is fully self-contained.
   These classes are generated by createLegend() in widget.js.
   ==================================================================== */

.map-legend {
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 8px;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    min-width: 105px;
    max-width: 200px;
    height: 80px;
    overflow: hidden;
    transition: height 0.3s ease;
}

.map-legend:hover {
    height: 418px;
}

.legend-title {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dddddd;
    color: var(--primaryBlue);
    text-align: left;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    padding: 1px 0;
}

.legend-item:last-child {
    margin-bottom: 0;
}

.legend-color {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    margin-right: 8px;
    flex-shrink: 0;
    display: inline-block;
}

.legend-divider {
    border-top: 1px solid #dddddd;
    margin: 6px 0;
}

.legend-icon {
    width: 14px;
    height: 14px;
    margin: 2px 8px 0px 0px;
    flex-shrink: 0;
    display: inline-block;
    text-align: center;
}

.legend-label {
    font-weight: 500;
    color: #333;
    font-size: 11px;
    white-space: nowrap;
}


/* ====================================================================
   RESPONSIVE BREAKPOINTS
   Three tiers, desktop-first (rules above apply by default, these
   override downward as the viewport shrinks). Add your overrides
   inside each block — grouped here by the same layout regions as
   the rest of the file so it's easy to find what to touch.

   Tier guide:
     ≤1024px  → small laptop / tablet landscape
     ≤768px   → tablet portrait / large phone landscape
     ≤480px   → phone portrait

   Note: since this widget runs inside an iframe, these media queries
   respond to the IFRAME's own rendered width, not the host page's
   window width. If the host embeds the iframe at a fixed pixel width
   rather than a fluid one (e.g. width="400"), these breakpoints will
   only kick in if that fixed width itself drops below the threshold.
   ==================================================================== */

/* ---- Tier 1: ≤1024px — small laptop / tablet landscape ---- */
@media (max-width: 1024px) {

    /* LAYOUT */

    /* LEFT PANEL */

    /* MAP AREA */

    /* LEAFLET LABELS */

    /* LEAFLET POPUP */

    /* MAP LEGEND CONTROL */

}

/* ---- Tier 2: ≤768px — tablet portrait / large phone landscape ---- */
@media (max-width: 768px) {

    /* LAYOUT */

    .frame-wrapper {
        flex-direction: column;
    }

    /* LEFT PANEL */
    
    .sdw-panel {
        width: var(--panel-width-mobile);
        transition: height 0.35s ease;
        height: 135px;
        }
    
    .sdw-panel-inner {
        overflow: hidden;
    }

    /* inside your mobile media query, alongside height: 130px */
    .sdw-panel.sdw-panel-expanded {
        height: 320px;
    }

    /* MAP AREA */
    
    .map-branding {
        background: rgba(255, 255, 255, 0.6);
        padding: 3px 5px;
        display: flex;
        align-items: center;
        margin: 0px!important;
        gap: 8px;
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: #141459;
        cursor: pointer;
    }
    
    .map-branding svg {
        margin-bottom: 7px;
        margin-left: -3px;
    }

    .branding-logo {
        height: 10px;
        width: auto;
    }

    
    .mobMoreInfo {
        display: block!important;
        position: absolute;
        bottom: -46.6px;
        padding: 8px 14px;
        margin: -2px 15px;
        border-radius: 0px 0px 5px 5px;
        background: #FFF;
        border: 1px solid #CCC;
        border-top: 0px;
        color: var(--primaryBlue);
        font-weight: 500;
        box-shadow: 0 0 15px rgba(0,0,0,0.2) !important;
        clip-path: inset(0 -20px -20px -20px);
        z-index: 9000;
    }
    
    .sdw-map-wrapper {
        flex: 1;
        position: relative;
        overflow: hidden;
        margin: 8px 8px 8px 8px;
        border-radius: 10px;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0);
        border: 1px solid #cccccc;
        z-index: 1;  
    }
    
    #mobPlus {
        display: inline-block; 
        transition: transform 0.35s ease;
    }

    #mobPlus.sdw-spin {
        transform: rotate(180deg);
        color: #b50808;
    }

    /* LEAFLET LABELS */

    /* LEAFLET POPUP */

    /* MAP LEGEND CONTROL */

}

/* ---- Tier 3: ≤480px — phone portrait ---- */
@media (max-width: 480px) {

    /* LAYOUT */

    /* LEFT PANEL */

    /* MAP AREA */

    /* LEAFLET LABELS */

    /* LEAFLET POPUP */

    /* MAP LEGEND CONTROL */

}