/* ---------------------------------------------------
BASE
--------------------------------------------------- */

*, *::before, *::after {
box-sizing: border-box;
}

html, body {
height:100%;
margin:0;
overflow-x:hidden;
}

body{
font-family:'Inter', sans-serif;
background:#f7f7f8;
color:#111;
}


/* ---------------------------------------------------
HEADER
--------------------------------------------------- */

.app-header{
height:56px;
background:#fff;
border-bottom:1px solid #e6e6e6;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 16px;
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-weight:600;
font-size:16px;
}

.header-search{
width:300px;
}

.header-search input{
font-size:14px;
}


/* ---------------------------------------------------
LAYOUT
--------------------------------------------------- */

.app-layout{
display:flex;
height:calc(100vh - 56px);
}


/* ---------------------------------------------------
SIDEBAR
--------------------------------------------------- */

.sidebar{
width:240px;
background:#fff;
border-right:1px solid #e6e6e6;
overflow-y:auto;
}

.sidebar-inner{
padding:14px;
}

.sidebar-brand{
font-weight:600;
font-size:15px;
margin-bottom:16px;
}

.sidebar-group{
margin-bottom:14px;
}

.sidebar-title{
font-size:11px;
text-transform:uppercase;
color:#888;
margin-bottom:4px;
padding-left:8px;
}

.sidebar-link{
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
border-radius:8px;
text-decoration:none;
color:#333;
font-size:14px;
margin-bottom:2px;
}

.sidebar-link i{
font-size:16px;
}

.sidebar-link:hover{
background:#f1f1f1;
}

.sidebar-link.active{
background:#eef2ff;
color:#3730a3;
font-weight:500;
}


/* ---------------------------------------------------
MAIN CONTENT
--------------------------------------------------- */

.main-content{
flex:1;
overflow-y:auto;
padding:20px;
}


/* ---------------------------------------------------
HOUSE SALES LIST
--------------------------------------------------- */

.house-list{
max-width:800px;
}

.house-row{
background:#fff;
border-radius:8px;
padding:12px 14px;
margin-bottom:8px;
display:flex;
align-items:center;
justify-content:space-between;
border:1px solid #eee;
transition:background 0.2s ease;
}

.house-row:hover{
background:#fafafa;
}

.house-address{
font-weight:500;
}

.house-price{
font-weight:600;
}

.house-date{
font-size:13px;
color:#777;
}


/* ---------------------------------------------------
MOBILE
--------------------------------------------------- */

@media (max-width:992px){

.header-search{
display:none;
}

.main-content{
padding:16px;
}

.house-row{
flex-direction:column;
align-items:flex-start;
gap:4px;
}

}


/* ---------------------------------------------------
LINEAR PANEL LAYOUT
--------------------------------------------------- */

.module-layout{
display:flex;
height:100%;
}

/* LEFT LIST */

.list-panel{
width:360px;
border-right:1px solid #e6e6e6;
background:#fff;
overflow-y:auto;
}

/* RIGHT DETAIL */

.detail-panel{
flex:1;
padding:24px;
overflow-y:auto;
background:#fafafa;
}


/* ---------------------------------------------------
SALE LIST ITEMS
--------------------------------------------------- */

.sale-item{
padding:12px 14px;
border-bottom:1px solid #eee;
cursor:pointer;
transition:background 0.15s ease;
}

.sale-item:hover{
background:#f6f7f9;
}

.sale-item.active{
background:#eef2ff;
border-left:3px solid #4f46e5;
}

.sale-address{
font-weight:500;
}

.sale-price{
font-weight:600;
}

.sale-date{
font-size:12px;
color:#777;
}

/* ---------------------------------------------------
SALES HEADER
--------------------------------------------------- */

.sales-header{
padding:16px;
border-bottom:1px solid #eee;
background:#fff;
position:sticky;
top:0;
z-index:10;
}

.sales-title h2{
margin:0 0 10px 0;
font-size:18px;
}

.sales-stats{
display:flex;
gap:18px;
margin-bottom:10px;
}

.stat{
display:flex;
flex-direction:column;
font-size:12px;
}

.stat-label{
color:#888;
}

.stat-value{
font-weight:600;
font-size:14px;
}

.sales-search{
width:100%;
padding:8px;
border:1px solid #ddd;
border-radius:6px;
font-size:13px;
}


/* ---------------------------------------------------
SALES LIST
--------------------------------------------------- */

.sales-list{
overflow-y:auto;
}






/* ---------------------------------------------------
MOBILE MODULE LAYOUT
--------------------------------------------------- */

@media (max-width: 992px){

.module-layout{
flex-direction:column;
height:auto;
}

.list-panel{
width:100%;
border-right:none;
border-bottom:1px solid #e6e6e6;
max-height:40vh;
}

.detail-panel{
width:100%;
padding:16px;
}

}




@media (max-width: 992px){

#propertyMap{
height:260px !important;
}

}




/* --------------------------------
STREET STATS
-------------------------------- */

.street-stats{
display:flex;
gap:30px;
margin-top:10px;
margin-bottom:20px;
}

.street-stat{
background:#f7f7f8;
padding:12px 16px;
border-radius:8px;
min-width:140px;
}

.stat-label{
font-size:12px;
color:#777;
}

.stat-value{
font-size:18px;
font-weight:600;
margin-top:4px;
}

/* --------------------------------
NEARBY SALES
-------------------------------- */

.nearby-sales{
margin-top:10px;
border-top:1px solid #eee;
}

.nearby-sale-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 4px;
border-bottom:1px solid #f1f1f1;
cursor:pointer;
transition:background 0.15s ease;
}

.nearby-sale-row:hover{
background:#f6f7f9;
}

.nearby-address{
font-weight:500;
font-size:14px;
}

.nearby-meta{
display:flex;
gap:20px;
align-items:center;
}

.nearby-price{
font-weight:600;
font-size:14px;
}

.nearby-date{
color:#777;
font-size:13px;
min-width:70px;
text-align:right;
}


.nearby-sale-row{
cursor:pointer;
}

.nearby-sale-row:hover{
background:#f6f7f9;
}

/* --------------------------------
PRICE INDICATORS
-------------------------------- */

.price-indicator{
font-weight:700;
font-size:14px;
}

.price-higher{
color:#dc2626;
}

.price-lower{
color:#16a34a;
}

.price-similar{
color:#777;
}


/* --------------------------------
NEARBY STREETS
-------------------------------- */

.nearby-streets{
margin-top:10px;
border-top:1px solid #eee;
}

.nearby-street-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 4px;
border-bottom:1px solid #f1f1f1;
}

.street-name{
font-weight:500;
font-size:14px;
}

.street-meta{
display:flex;
gap:16px;
align-items:center;
}

.street-price{
font-weight:600;
}

.street-sales{
color:#777;
font-size:13px;
}



/*crime*/

.crime-item{
padding:12px;
border-bottom:1px solid #eee;
cursor:pointer;
transition:background 0.15s ease;
}

.crime-item:hover{
background:#f6f7f9;
}

.crime-item.active{
background:#eef2ff;
border-left:3px solid #4f46e5;
}


.crime-location{
font-size:13px;
color:#555;
margin-top:4px;
}

.crime-date{
font-size:12px;
color:#888;
}



/* --------------------------------
NEARBY CRIMES
-------------------------------- */

.nearby-crimes{
margin-top:10px;
border-top:1px solid #eee;
}

.nearby-crime-row{
padding:10px 4px;
border-bottom:1px solid #f1f1f1;
cursor:pointer;
}

.nearby-crime-row:hover{
background:#f6f7f9;
}

.nearby-crime-category{
font-weight:600;
font-size:14px;
}

.nearby-crime-location{
font-size:13px;
color:#555;
}

.nearby-crime-date{
font-size:12px;
color:#888;
}


.crime-filters{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:10px;
}

.crime-filter{
padding:6px 10px;
border:1px solid #ddd;
background:#fff;
border-radius:6px;
cursor:pointer;
font-size:13px;
}

.crime-filter:hover{
background:#f6f7f9;
}

.crime-filter.active{
background:#0A2342;
color:#fff;
border-color:#0A2342;
}




.school-item{
padding:12px;
border-bottom:1px solid #eee;
cursor:pointer;
}

.school-item:hover{
background:#f6f7f9;
}

.school-item.active{
background:#eef2ff;
border-left:3px solid #4f46e5;
}



.school-name{
font-weight:600;
}

.school-type{
font-size:13px;
color:#555;
}

.school-location{
font-size:12px;
color:#888;
}

/* -------------------------
SCHOOL PRICE STATS
------------------------- */

.school-price-box{
padding:14px;
border:1px solid #e5e7eb;
border-radius:8px;
background:#f9fafb;
margin-top:10px;
}

.price-value{
font-size:24px;
font-weight:600;
color:#0A2342;
}

.price-meta{
font-size:13px;
color:#666;
margin-top:4px;
}




/* -------------------------
PRICE BAND CHART
------------------------- */

.price-band-chart{
margin-top:10px;
}

.price-band-row{
display:flex;
align-items:center;
margin:6px 0;
}

.price-band-label{
width:90px;
font-size:12px;
color:#555;
}

.price-band-bar{
flex:1;
height:10px;
background:#e5e7eb;
border-radius:5px;
overflow:hidden;
margin:0 8px;
}

.price-band-fill{
height:100%;
background:#0A2342;
}

.price-band-count{
font-size:12px;
color:#666;
width:30px;
text-align:right;
}




#schoolResults{
max-height:300px;
overflow-y:auto;
z-index:1000;
}



/* -------------------------
Insight Cards
------------------------- */

.insight-card{
background:#fff;
border:1px solid #e9ecef;
border-radius:10px;
padding:20px;
transition:all .15s ease;
}

.insight-card:hover{
border-color:#d0d7de;
background:#fafafa;
}

.insight-title{
font-size:13px;
text-transform:uppercase;
letter-spacing:.05em;
color:#6c757d;
margin-bottom:6px;
}

.insight-value{
font-size:28px;
font-weight:600;
color:#0A2342;
line-height:1.2;
}

.insight-sub{
font-size:13px;
color:#6c757d;
margin-top:4px;
}


/* -------------------------
Dashboard Sections
------------------------- */

.section-block{
background:#fff;
border:1px solid #e9ecef;
border-radius:10px;
padding:22px;
margin-bottom:20px;
}

.section-title{
font-size:18px;
font-weight:600;
color:#111;
margin-bottom:16px;
}

.section-sub{
font-size:13px;
color:#6c757d;
margin-top:-8px;
margin-bottom:16px;
}


/* -------------------------
Stat Blocks
------------------------- */

.stat-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}

.stat-item{
padding:6px 0;
}

.stat-value{
font-size:16px;
font-weight:600;
color:#0A2342;
line-height:1.2;
}

.stat-label{
font-size:13px;
color:#6c757d;
margin-top:3px;
}

.stat-divider{
height:1px;
background:#ececec;
margin:18px 0;
}




/* list item base */

.list-item{
padding:14px 16px;
border-bottom:1px solid #ececec;
cursor:pointer;
transition:background .15s ease;
}

/* hover */

.list-item:hover{
background:#f7f7f9;
}

/* active item */

.list-item.active{
background:#eef2ff;
border-left:4px solid #4f46e5;
padding-left:12px;
}


/* -------------------------
Footer
------------------------- */

.site-footer{
margin-top:40px;
border-top:1px solid #ececec;
background:#fff;
}

.footer-inner{
max-width:1200px;
margin:0 auto;
padding:30px 20px;
display:flex;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;
}

.footer-brand{
font-weight:600;
font-size:16px;
margin-bottom:10px;
}

.footer-links a{
display:inline-block;
margin-right:12px;
font-size:13px;
color:#6c757d;
text-decoration:none;
}

.footer-links a:hover{
color:#0A2342;
}

.footer-heading{
font-size:13px;
font-weight:600;
margin-bottom:8px;
color:#111;
}

.footer-text{
font-size:12px;
color:#6c757d;
line-height:1.6;
max-width:420px;
}

.site-footer{
font-size:13px;
background:#fafafa;
}




/* -------------------------
Cookie Banner
------------------------- */

.cookie-banner{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
padding:14px 18px;
max-width:720px;
width:90%;
z-index:9999;
display:none;
}

.cookie-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
flex-wrap:wrap;
}

.cookie-text{
font-size:13px;
color:#444;
line-height:1.4;
}

.cookie-text a{
color:#4f46e5;
text-decoration:none;
}

.cookie-actions button{
margin-left:6px;
}




#postcodeResults{
max-height:300px;
overflow-y:auto;
z-index:1000;
border:1px solid #e5e7eb;
border-radius:8px;
background:#fff;
}




/* FULL HEIGHT LAYOUT */

html, body {
    height: 100%;
    margin: 0;
}

/* MAIN WRAPPER */

.app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* BODY AREA (sidebar + content) */

.app-body {
    flex: 1;
    display: flex;
}

/* MAIN CONTENT */

.main-content {
    flex: 1;
    padding: 20px;
}

/* FOOTER */

.app-footer {
    margin-top: auto;
}



.pricing-card {
    background: #fff;
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.pricing-card ul li {
    margin-bottom: 8px;
    font-size: 15px;
}

/* PREMIUM CARD */
.pricing-card.featured {
    border: 2px solid #0d6efd;
    position: relative;
}

/* FEATURED BADGE */
.badge-featured {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d6efd;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}



.table td {
    vertical-align: middle;
}

.badge {
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 6px;
}



/* sex population */
.gender-bar {
    display: flex;
    height: 14px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}

.gender-bar .male {
    background: #0d6efd;
}

.gender-bar .female {
    background: #ff6b81;
}