/* ==========================================
   داشبورد تخصصی پویاشهر
   dashboard.css
========================================== */

:root{

--primary:#1769aa;
--secondary:#0f4c81;
--success:#2e7d32;
--warning:#ff9800;
--danger:#d32f2f;
--purple:#6a1b9a;

--bg:#f4f7fb;
--card:#ffffff;
--border:#e3e8ef;

--text:#263238;
--muted:#78909c;

--shadow:0 8px 24px rgba(0,0,0,.08);

--radius:16px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:var(--font-family-base, "Vazirmatn", sans-serif);

background:var(--bg);

color:var(--text);

line-height:1.9;

}

/* ======================= */

.dashboard-layout{

width:min(1800px,96%);

margin:auto;

padding:25px;

}

/* ======================= */

.top-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

background:white;

padding:22px;

border-radius:20px;

box-shadow:var(--shadow);

margin-bottom:25px;

}

/* ======================= */

.logo-box{

display:flex;

align-items:center;

gap:18px;

}

.logo-box img{

width:72px;

height:72px;

object-fit:contain;

}

.logo-box h1{

font-size:28px;

font-weight:800;

color:var(--primary);

}

.logo-box span{

display:block;

margin-top:4px;

font-size:14px;

color:var(--muted);

}

/* ======================= */

.header-stats{

display:grid;

grid-template-columns:repeat(5,160px);

gap:14px;

}

.mini-card{

background:#fafcff;

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

border-radius:14px;

padding:14px;

text-align:center;

}

.mini-card label{

display:block;

font-size:13px;

color:var(--muted);

margin-bottom:8px;

}

.mini-card strong{

font-size:23px;

color:var(--primary);

}

/* ======================= */

.dashboard-menu{

display:flex;

gap:15px;

margin:25px 0;

background:white;

padding:14px;

border-radius:16px;

box-shadow:var(--shadow);

}

.dashboard-menu a{

padding:10px 22px;

text-decoration:none;

color:#444;

border-radius:12px;

transition:.25s;

font-weight:600;

}

.dashboard-menu a:hover{

background:#eef6ff;

color:var(--primary);

}

.dashboard-menu .active{

background:var(--primary);

color:white;

}

/* ======================= */

.kpi-section{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin-bottom:30px;

}

.kpi-card{

background:white;

border-radius:16px;

padding:22px;

box-shadow:var(--shadow);

text-align:center;

border-top:5px solid var(--primary);

}

.kpi-card h3{

font-size:15px;

font-weight:700;

margin-bottom:14px;

}

.kpi-card span{

font-size:34px;

font-weight:800;

color:var(--primary);

}

/* ======================= */

.filter-panel{

background:white;

padding:24px;

border-radius:18px;

box-shadow:var(--shadow);

margin-bottom:35px;

}

.filter-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:16px;

}

.filter-grid select,
.filter-grid input{

padding:13px;

border-radius:12px;

border:1px solid #d6dde6;

font-family:inherit;

font-size:14px;

background:white;

}

.filter-grid button{

background:var(--primary);

border:none;

color:white;

border-radius:12px;

cursor:pointer;

font-family:inherit;

font-size:15px;

font-weight:700;

transition:.25s;

}

.filter-grid button:hover{

background:var(--secondary);

}

/* ======================= */

.section-title{

margin-bottom:20px;

}

.section-title h2{

font-size:24px;

font-weight:800;

color:var(--secondary);

margin-bottom:8px;

}

.section-title p{

font-size:14px;

color:var(--muted);

}

/* ======================= */

.map-section{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

margin-bottom:35px;

}

#iranMap{

height:650px;

border-radius:16px;

overflow:hidden;

border:1px solid #ddd;

}

.map-legend{

display:flex;

gap:20px;

margin-top:20px;

flex-wrap:wrap;

}

.map-legend div{

display:flex;

align-items:center;

gap:8px;

}

.legend{

width:18px;

height:18px;

border-radius:50%;

display:inline-block;

}

.low{background:#4caf50;}
.medium{background:#ffc107;}
.high{background:#ff9800;}
.critical{background:#d32f2f;}

/* ============================= */
/* بانک‌های داده */
/* ============================= */

.banks-container{

display:flex;

flex-direction:column;

gap:32px;

margin-top:35px;

margin-bottom:40px;

}

.bank-card{

background:var(--card);

border-radius:20px;

box-shadow:var(--shadow);

padding:26px;

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

overflow:hidden;

}

.bank-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:22px;

padding-bottom:18px;

border-bottom:1px solid #edf2f7;

}

.bank-header h2{

font-size:24px;

font-weight:800;

color:var(--secondary);

}

.bank-header span{

font-size:13px;

color:var(--muted);

font-weight:600;

}

/* ============================= */

.bank-tabs{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:28px;

}

.bank-tabs button{

background:#eef4fb;

border:none;

padding:10px 18px;

border-radius:10px;

font-family:inherit;

cursor:pointer;

font-size:14px;

font-weight:700;

transition:.25s;

color:#455a64;

}

.bank-tabs button:hover{

background:#d8eaff;

}

.bank-tabs button.active{

background:var(--primary);

color:white;

}

/* ============================= */

.bank-content{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:22px;

}

/* ============================= */

.chart-card{

background:#fbfcfe;

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

border-radius:16px;

padding:18px;

min-height:360px;

display:flex;

flex-direction:column;

justify-content:center;

}

.chart-card h3{

margin-bottom:18px;

font-size:17px;

font-weight:700;

color:#37474f;

}

.chart-card canvas{

width:100% !important;

height:300px !important;

}

/* ============================= */

.table-card{

grid-column:1 / -1;

background:#fcfdff;

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

border-radius:16px;

padding:18px;

overflow:auto;

}

.table-card h3{

margin-bottom:16px;

font-size:18px;

font-weight:700;

color:#37474f;

}

/* ============================= */

table{

width:100%;

border-collapse:collapse;

font-size:14px;

}

thead{

background:#edf5ff;

}

thead th{

padding:14px;

text-align:center;

font-weight:800;

color:#244b75;

border-bottom:2px solid #dbe8f8;

}

tbody td{

padding:13px;

text-align:center;

border-bottom:1px solid #edf2f7;

}

tbody tr:hover{

background:#f8fbff;

}

/* ============================= */
/* شاخص‌های کلان */
/* ============================= */

.global-indicators{

margin-top:45px;

margin-bottom:45px;

}

.indicator-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

}

.indicator-box{

background:white;

border-radius:18px;

padding:24px;

box-shadow:var(--shadow);

text-align:center;

border-top:5px solid var(--primary);

transition:.25s;

}

.indicator-box:hover{

transform:translateY(-4px);

}

.indicator-box h3{

font-size:16px;

margin-bottom:14px;

font-weight:700;

color:#455a64;

}

.indicator-box h1{

font-size:38px;

font-weight:800;

color:var(--primary);

}

/* ====================================== */
/* بخش مقایسه */
/* ====================================== */

.comparison-section{

margin-top:50px;

margin-bottom:50px;

}

.comparison-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:24px;

}

/* ====================================== */
/* رتبه‌بندی */
/* ====================================== */

.ranking-section{

margin-top:50px;

margin-bottom:50px;

}

.ranking-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

}

/* ====================================== */
/* خروجی‌ها */
/* ====================================== */

.export-section{

margin-top:50px;

margin-bottom:40px;

}

.export-buttons{

display:flex;

flex-wrap:wrap;

gap:16px;

}

.export-buttons button{

padding:14px 28px;

border:none;

border-radius:12px;

cursor:pointer;

font-family:inherit;

font-size:15px;

font-weight:700;

color:white;

background:var(--primary);

transition:.25s;

}

.export-buttons button:hover{

background:var(--secondary);

transform:translateY(-2px);

}

/* ====================================== */
/* فوتر */
/* ====================================== */

.dashboard-footer{

margin-top:50px;

padding:25px;

background:white;

border-radius:18px;

box-shadow:var(--shadow);

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}

.dashboard-footer strong{

font-size:22px;

color:var(--primary);

font-weight:800;

}

.dashboard-footer p{

font-size:14px;

color:var(--muted);

margin-top:6px;

}

/* ====================================== */
/* Scrollbar */
/* ====================================== */

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:#b0bec5;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#78909c;

}

/* ====================================== */
/* واکنش‌گرا */
/* ====================================== */

@media(max-width:1600px){

.header-stats{

grid-template-columns:repeat(3,1fr);

}

.kpi-section{

grid-template-columns:repeat(4,1fr);

}

.bank-content{

grid-template-columns:repeat(2,1fr);

}

.indicator-grid{

grid-template-columns:repeat(4,1fr);

}

}

@media(max-width:1200px){

.filter-grid{

grid-template-columns:repeat(2,1fr);

}

.kpi-section{

grid-template-columns:repeat(2,1fr);

}

.indicator-grid{

grid-template-columns:repeat(2,1fr);

}

.comparison-grid{

grid-template-columns:1fr;

}

.ranking-grid{

grid-template-columns:1fr;

}

.bank-content{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.dashboard-layout{

padding:15px;

}

.top-header{

flex-direction:column;

}

.header-stats{

grid-template-columns:repeat(2,1fr);

width:100%;

}

.dashboard-menu{

overflow:auto;

white-space:nowrap;

}

.filter-grid{

grid-template-columns:1fr;

}

.kpi-section{

grid-template-columns:1fr;

}

.indicator-grid{

grid-template-columns:1fr;

}

.export-buttons{

flex-direction:column;

}

.dashboard-footer{

flex-direction:column;

text-align:center;

}

#iranMap{

height:450px;

}

.bank-tabs{

justify-content:center;

}

}

/* ====================================== */
/* رنگ‌بندی شاخص‌ها */
/* ====================================== */

.crisis-color{

color:var(--danger)!important;

}

.capacity-color{

color:var(--success)!important;

}

.satisfaction-color{

color:#1976d2!important;

}

.quality-color{

color:#6a1b9a!important;

}

.participation-color{

color:#00897b!important;

}

.resilience-color{

color:#ef6c00!important;

}

.management-color{

color:#3949ab!important;

}

/* ====================================== */
/* وضعیت‌ها */
/* ====================================== */

.status{

display:inline-flex;

align-items:center;

justify-content:center;

padding:6px 12px;

border-radius:30px;

font-size:12px;

font-weight:700;

}

.status-new{

background:#e3f2fd;

color:#1565c0;

}

.status-repeat{

background:#fff8e1;

color:#ef6c00;

}

.status-progress{

background:#ede7f6;

color:#512da8;

}

.status-partial{

background:#fff3e0;

color:#f57c00;

}

.status-complete{

background:#e8f5e9;

color:#2e7d32;

}

.status-unknown{

background:#eceff1;

color:#607d8b;

}

/* ====================================== */
/* Badge */
/* ====================================== */

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:5px 10px;

border-radius:50px;

font-size:12px;

font-weight:700;

background:#edf5ff;

color:var(--primary);

}

/* ====================================== */
/* کارت‌ها */
/* ====================================== */

.card-hover{

transition:.3s;

}

.card-hover:hover{

transform:translateY(-5px);

box-shadow:0 12px 28px rgba(0,0,0,.12);

}

/* ====================================== */
/* لودر */
/* ====================================== */

.loading{

display:flex;

justify-content:center;

align-items:center;

padding:60px;

}

.spinner{

width:42px;

height:42px;

border-radius:50%;

border:5px solid #e0e0e0;

border-top-color:var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

/* ====================================== */
/* Fade Animation */
/* ====================================== */

.fade-in{

animation:fadeIn .45s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ====================================== */
/* بانک فعال */
/* ====================================== */

.bank-card.active{

border:2px solid var(--primary);

box-shadow:0 10px 28px rgba(23,105,170,.18);

}

/* ====================================== */
/* KPI Animation */
/* ====================================== */

.kpi-card span,
.indicator-box h1{

transition:.35s;

}

.kpi-card:hover span,
.indicator-box:hover h1{

transform:scale(1.08);

display:inline-block;

}

/* ====================================== */
/* Utility Classes */
/* ====================================== */

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mb-20{

margin-bottom:20px;

}

.mb-30{

margin-bottom:30px;

}

.hidden{

display:none!important;

}

.flex{

display:flex;

}

.flex-between{

display:flex;

justify-content:space-between;

align-items:center;

}

.w-100{

width:100%;

}

/* ====================================== */
/* افکت پویا/پرشی هنگام هاور یا لمس روی کارت‌ها */
/* یکدست‌سازی با کارت‌های صفحه معرفی (.card:hover در style.css) */
/* ====================================== */
.kpi-card, .bank-card, .mini-card, .chart-card, .table-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.kpi-card:hover, .bank-card:hover, .mini-card:hover, .chart-card:hover, .table-card:hover,
.kpi-card:active, .bank-card:active, .mini-card:active, .chart-card:active, .table-card:active {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgba(0,0,0,.15);
}

/* ====================================== */
/* پایان فایل dashboard.css */
/* ====================================== */
/* Shared Urban Data Store — identical across dashboards */
.urban-data-store{max-width:1400px;margin:28px auto;padding:0 20px}
.urban-data-store .section-title{text-align:center;margin-bottom:20px}
.urban-data-store .section-title p{color:var(--muted,#64748b);margin-top:8px}
.commerce-status{text-align:center;padding:20px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:20px}
.commerce-status strong{font-size:1.125rem;color:var(--muted,#64748b)}
.commerce-status p{font-size:.875rem;color:#64748b;margin:8px 0 0}
.commerce-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.commerce-item{padding:20px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;opacity:.8;cursor:not-allowed}
.commerce-item .commerce-icon{font-size:2rem}
.commerce-item h4{margin:10px 0;color:#455a64;font-size:1rem}
.commerce-item span{font-size:.8125rem;color:#64748b}

/* Shared urban data store buttons are semantic controls, not active links. */
.urban-data-store .commerce-item {
  width: 100%;
  border: 1px solid var(--border, #e5e7eb);
  font: inherit;
  text-align: center;
}
.urban-data-store .commerce-item:disabled {
  cursor: not-allowed;
  opacity: .76;
}
.urban-data-store .commerce-product-copy {
  display: grid;
  gap: .25rem;
}
.urban-data-store .commerce-product-copy strong,
.urban-data-store .commerce-product-copy small {
  font: inherit;
}
.urban-data-store .commerce-product-copy small { font-size: .82rem; opacity: .78; }

.admin-control-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin:1rem 0}.admin-control-form label{display:grid;gap:.35rem}.admin-control-form input,.admin-control-form select,.admin-control-form textarea{width:100%;min-height:44px;border:1px solid var(--poya-border,#cbd5e1);border-radius:12px;padding:.7rem;background:var(--poya-surface,#fff);color:inherit}.admin-control-form textarea{min-height:96px;resize:vertical}.admin-form-wide{grid-column:1/-1}@media(max-width:720px){.admin-control-form{grid-template-columns:1fr}.admin-form-wide{grid-column:auto}}