/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:10px}
::-webkit-scrollbar-thumb{background:#777;border-radius:10px}

/* Base */
body{font-family:'Open Sans',sans-serif!important;background:#fff}

/* Badges (existing styles kept) */
.badge{padding:12px;font-size:20px;font-weight:bold;margin:10px auto;font-family:'Open Sans',sans-serif!important}
.badge_small{padding:4px 5px;font-size:14px;font-weight:bold;color:#fff;border-radius:5px;border:none;font-family:'Open Sans',sans-serif!important}
.badge_medium{padding:10px;font-size:18px;font-weight:bold;color:#fff;border-radius:5px;border:none;font-family:'Open Sans',sans-serif!important}
.badge-primary{background-color:#337ab7}
.badge-success{background-color:#33b77a}
.badge-danger{background-color:#d73a3a}

/* Tooltips */
a.my-tool-tip,a.my-tool-tip:hover,a.my-tool-tip:visited{color:#999;position:absolute;right:10px}
a.my-tool-tip2,a.my-tool-tip2:hover,a.my-tool-tip2:visited{color:#999}

/* Cards */
.value_side{color:#777}
.bn_container{background:#fff;border:1px solid #eef2ff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.06);min-height:210px;height:auto;margin-bottom:18px}
.title_container h4{margin:10px 12px 0 12px;font-weight:600;color:#444}
#source_container a{color:#777;font-family:'Open Sans',sans-serif!important;font-size:11px}
#source_container a:hover{text-decoration:none}

#main_container,#gauge-container,#result_charts_container1,#result_charts_container2,#source_container,#result_container{background:transparent}
#form_container{margin-left:10px;margin-right:10px;padding-left:15px;padding-right:15px;background:transparent; padding-bottom: 15px;}
#result_container{margin-left:10px;margin-right:10px;padding-left:15px;padding-right:15px}

/* Progress */
#bProgress{width:96%;max-width:900px;background-color:#eee;margin:10px auto;border-radius:5px}
#pBar{background-color:#16a34a;border-radius:20px;color:#fff;font-weight:bold;width:10%;height:25px;text-align:center;line-height:25px}

#mail_response{margin:5px 30%;font-weight:bold;color:#777}
#login_response{margin:5px 35%;font-weight:bold;color:#933}

/* KPI */
.kpi_card{background:#fff;border:1px solid #eef2ff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:14px 16px;margin-bottom:18px;height:100%}
.kpi_title{color:#73839c;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.kpi_value{color:#1f2a44;font-weight:700;font-size:22px;margin-top:6px}

/* Modern buttons */
.btn{border-radius:12px;padding:4px 14px;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.12)}
.btn:active{transform:scale(.98)}
.btn:focus{outline:0}
.btn-primary{background:linear-gradient(180deg,#3b82f6,#2563eb);border:none}
.btn-success{background:linear-gradient(180deg,#10b981,#059669);border:none}
.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);border:none}
.btn-secondary{background:linear-gradient(180deg,#9ca3af,#6b7280);border:none;color:#fff}

#btn_show, #btn_filter{margin-left:5px;}

.select2-selection{border-radius: 10px!important;}

/* Settings button (visible when logged in) */
.settings-btn{position:fixed;top:12px;right:12px;width:44px;height:44px;border-radius:9999px;display:flex;align-items:center;justify-content:center;z-index:1040}

/* Responsive tweaks */
@media(max-width:991px){
  .bn_container{min-height:160px;height:auto}
  .kpi_card{height:auto}
  #mail_response{margin:5px 10%}
}

/* Bootstrap 5 visual refresh for Economic Indicators
   This file overrides app.css with a lighter look that matches the provided screenshots. */

/* Base */
:root{
  --eai-grad-start:#f5576c; /* pink */
  --eai-grad-end:#a941f4;   /* purple */
  --eai-bg:#ffffff;
  --eai-card-border:#eef2ff;
  --eai-text:#1f2a44;
  --eai-muted:#73839c;
  --brand-blue-1:#1e3a8a;
  --brand-blue-2:#2563eb;
  --brand-green-1:#16a34a;
  --brand-green-2:#22c55e;
}

body{background:var(--eai-bg); padding-bottom: 6.5rem;}  

/* Buttons */
.btn{border-radius:25px;padding:12px 18px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.12)}
.btn:active{transform:scale(.98)}
.btn:focus{outline:0}
.btn-primary{background:linear-gradient(90deg,var(--brand-blue-1),var(--brand-blue-2))!important;border:none}
.btn-success{background:linear-gradient(90deg,var(--brand-green-1),var(--brand-green-2))!important;border:none}

/* KPI and cards */
.kpi_card{border:1px solid #eee;border-radius:14px;position:relative;overflow:hidden;min-height:100px;padding:16px 18px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.kpi_title{color:var(--eai-muted);font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.kpi_value{color:var(--eai-text);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:clamp(22px,4.5vw,35px);margin-top:8px}

.kpi_value.text-pos{-webkit-text-fill-color:initial}
.kpi_value.text-neg{-webkit-text-fill-color:initial}
/* decorative blob */
.kpi_card::before{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;background:radial-gradient( circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 70% );pointer-events:none}
/* background icons per card - colors match chart colors */
#kpis_row > div:nth-child(1) .kpi_card::after{content:"\f201";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#10b981;opacity:.52}
#kpis_row > div:nth-child(2) .kpi_card::after{content:"\f0c0";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#dc2626;opacity:.52}
#kpis_row > div:nth-child(3) .kpi_card::after{content:"\f155";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#f59e0b;opacity:.52}
#kpis_row > div:nth-child(4) .kpi_card::after{content:"\f015";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#8b5cf6;opacity:.52}
#kpis_row > div:nth-child(5) .kpi_card::after{content:"\f1ad";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#059669;opacity:.52}
#kpis_row > div:nth-child(6) .kpi_card::after{content:"\f0b1";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#2563eb;opacity:.52}
#kpis_row > div:nth-child(7) .kpi_card::after{content:"\f0b1";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#16a34a;opacity:.52}
#kpis_row > div:nth-child(8) .kpi_card::after{content:"\f19c";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#0ea5e9;opacity:.52}
#kpis_row > div:nth-child(9) .kpi_card::after{content:"\f0ad";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:12px;top:6px;font-size:54px;color:#f97316;opacity:.52}

.bn_container{border:1px solid var(--eai-card-border);border-radius:14px}
.title_container h4{font-weight:600;color:#444}

/* Gauge container spacing on mobile */
#app_content{padding-top:8px}

/* App header brand */
.app-header{display:flex;align-items:center;justify-content:flex-start;padding:8px 0}
.app-header img{width:28px;height:28px;border-radius:6px;object-fit:cover;margin-right:8px}
.brand-title{font-weight:800;color:#3573fb;font-size:1rem}
@media(min-width:992px){
  .brand-title{font-size:1.1rem}
}

/* Select2 pill styling */
.select2-selection{border-radius:25px!important}
.select2-container .select2-selection--single{height:44px;border:1px solid #ddd;border-radius:25px;display:flex;align-items:center;padding:0 10px}
.select2-container .select2-selection--single .select2-selection__rendered{line-height:44px;padding-left:0;color:#444}
.select2-container .select2-selection--single .select2-selection__arrow{height:44px;top:0;right:10px}

/* Table responsiveness tweaks */
.table{margin-bottom:0}
.table-responsive{border-radius:14px}

/* Sidebar brand dot off (matches current) */
.sidebar .brand .dot{background:transparent}

/* Top form spacing (city select + buttons) */
#btn_show,#btn_filter{margin-left:8px;margin-top: 8px;}

/* Mobile optimizations */
@media (max-width: 767.98px){
  .btn{padding:10px 16px}
  #btn_show,#btn_filter{margin-top:8px}
}

/* Bottom footer navigation */
.footer{height:6rem;display:flex;justify-content:space-around;align-items:center;width:100%;position:fixed;bottom:0;background-color:#f9f9f9;border-top:1px solid #eee;padding:10px 0;z-index:100}
.footer .nav-item{height:6rem;width:33%;text-align:center;font-size:1rem;color:#8a8a8a;text-decoration:none;padding-top:8px;border-top:3px solid transparent;line-height:1.2rem}
.footer .nav-item .nav-icon{display:block;font-size:1.25rem;margin:0 auto 5px}
.footer .nav-item.active{border-top:3px solid var(--brand-blue-2);color:var(--brand-blue-2)}

.bigstat-card{border:1px solid var(--eai-card-border);border-radius:14px;background:#fff;padding:12px 14px;text-align:center;height:100%}
.bigstat-card .label{font-size:.8rem;color:var(--eai-muted)}
.bigstat-card .value{font-size:1.4rem;font-weight:800;color:var(--eai-text)}
.bigstat-card .sub{font-size:.75rem;color:var(--eai-muted)}
.text-pos{color:var(--brand-green-2)!important}
.text-neg{color:#ef4444!important}

/* KPI title info icon (tooltips) */
.kpi_title.tooltip-enabled::after{content:"\f05a";font-family:"Font Awesome 5 Free";font-weight:900;margin-left:6px;color:#777;font-size:.9rem}

/* Chart title info icon (tooltips) */
.title_container h4.tooltip-enabled{cursor:pointer}
.title_container h4.tooltip-enabled::after{content:"\f05a";font-family:"Font Awesome 5 Free";font-weight:900;margin-left:6px;color:#999;font-size:.75rem}

.row{
  --bs-gutter-x: 0;
}


.centered1{
  text-align: center!important;
  display: flex!important;
  justify-content: center!important; /* Centers horizontally */
  align-items: center!important;
}

.centered2{
  text-align: center!important;
  display: flex!important;
  justify-content: center!important; /* Centers horizontally */
  align-items: center!important;
  margin: 0px auto!important;
}

.centered3{
  text-align: center!important;
  justify-content: center!important; /* Centers horizontally */
  align-items: center!important;
  margin: 0px auto!important;
}

.centered{
  display: grid!important;
  place-items: center!important; /* Centers horizontally and vertically */
}


/* Menu button (hamburger) */
.menu-btn{position:fixed;top:12px;left:12px;width:44px;height:44px;border-radius:9999px;display:flex;align-items:center;justify-content:center;z-index:1041;color:#fff!important;}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;height:100vh;width:240px;background:#0f2430;color:#e5eef5;z-index:1035;box-shadow:2px 0 8px rgba(0,0,0,.15);transform:translateX(0);transition:transform .2s ease}
.sidebar .brand{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.06);font-weight:700}
.sidebar .brand .dot{width:10px;height:10px;border-radius:9999px;background:transparent;}
.sidebar .nav{list-style:none;margin:0;padding:8px 0}
.sidebar .nav li a{display:flex;align-items:center;gap:10px;color:#cfe3ef;text-decoration:none;padding:10px 16px;border-left:3px solid transparent}
.sidebar .nav li a:hover{background:rgba(255,255,255,.06)}
.sidebar .nav li a.active{background:#0ea89e;color:#fff;border-left-color:#1cc7b0}
.sidebar .nav small{color:#8fb3c7;opacity:.9}
.sidebar-overlay{display:none}

/* Main content shift on desktop */
@media(min-width:992px){
  /* Sidebar closed by default; opened when body has .sidebar-open */
  .sidebar{transform:translateX(-260px)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  /* Content margin only when sidebar is open */
  body.with-sidebar #main_container{margin-left:0}
  body.with-sidebar.sidebar-open #main_container{margin-left:240px}
}

/* Mobile off-canvas */
@media(max-width:991px){
  .sidebar{transform:translateX(-260px)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-overlay{display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:1034}
  body.sidebar-open .sidebar-overlay{display:block}
}


.ms-10{margin-left: 10px;}
.ms-20{margin-left: 20px;}
.ms-30{margin-left: 30px;}

/* Dashboard palette overrides (avoid pure green/red in KPIs; reserve for trends) */
/* KPI big numbers mapped to chart palette */
.kpi_score, .blue21{ color:#14b8a6 !important; }
.metric-score{ color:#14b8a6 !important; }
.metric-pop{ color:#2563eb !important; }
.metric-inc{ color:#d97706 !important; }
.metric-rent{ color:#6d28d9 !important; }
.metric-vac{ color:#9a8c6d !important; }
.metric-urn{ color:#4338ca !important; }
.metric-job{ color:#16a34a !important; }
.metric-gdp{ color:#0ea5e9 !important; }
.metric-supply{ color:#f97316 !important; }

/* KPI background icons per card (match chart palette by card order) */
/* 1: Score, 2: Population, 3: MHI, 4: Avg Rent, 5: Vacancy, 6: Unemployment */
#kpis_row > div:nth-child(1) .kpi_card::after{ color:#14b8a6 !important; }
#kpis_row > div:nth-child(2) .kpi_card::after{ color:#2563eb !important; }
#kpis_row > div:nth-child(3) .kpi_card::after{ color:#d97706 !important; }
#kpis_row > div:nth-child(4) .kpi_card::after{ color:#6d28d9 !important; }
#kpis_row > div:nth-child(5) .kpi_card::after{ color:#9a8c6d !important; }
#kpis_row > div:nth-child(6) .kpi_card::after{ color:#4338ca !important; }
#kpis_row > div:nth-child(7) .kpi_card::after{ color:#16a34a !important; }
#kpis_row > div:nth-child(8) .kpi_card::after{ color:#0ea5e9 !important; }
#kpis_row > div:nth-child(9) .kpi_card::after{ color:#f97316 !important; }