/* ═══════════════════════════════════════════════════════════════════
   ShukWAY · Section Styles · v2
   Businesses, Categories, Quality, Map, SEO
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Businesses Toolbar ─── */
.biz-toolbar{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
  flex-wrap:wrap;
}

.biz-search-wrap{flex:1;min-width:200px}

.biz-search{
  width:100%;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  font-family:var(--font);
  font-size:var(--text-sm);
  background:var(--paper);
  transition:all var(--tx-fast);
}
.biz-search:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft);
}

.biz-select{
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  font-family:var(--font);
  font-size:var(--text-sm);
  background:var(--paper);
  cursor:pointer;
  max-width:220px;
}

/* ─── Badges ─── */
.badge{
  display:inline-block;
  padding:2px var(--sp-2);
  border-radius:var(--r-sm);
  background:var(--teal-soft);
  color:var(--teal);
  font-size:var(--text-xs);
  font-weight:var(--fw-medium);
  white-space:nowrap;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge-platform{background:var(--orange-soft);color:var(--orange-deep)}
.badge-warn{background:var(--warning-bg);color:var(--warning)}

.seo-table-wrap{max-height:320px;overflow-y:auto}
.seo-alert{
  padding:var(--sp-2) var(--sp-3);
  background:var(--warning-bg);
  border-radius:var(--r-sm);
  border-right:3px solid var(--warning);
}

/* ─── Status Dots ─── */
.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:var(--r-pill);
}
.dot-success{background:var(--success)}
.dot-warning{background:var(--warning)}
.dot-danger{background:var(--danger)}

/* ─── Pagination ─── */
.biz-pagination{
  display:flex;
  gap:var(--sp-1);
  margin-top:var(--sp-4);
  justify-content:center;
}

.page-btn{
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--paper);
  font-family:var(--font);
  font-size:var(--text-xs);
  cursor:pointer;
  transition:all var(--tx-fast);
}
.page-btn:hover{background:var(--cream-warm)}
.page-btn.active{
  background:var(--teal);
  color:var(--white);
  border-color:var(--teal);
}

/* ─── Categories Grid ─── */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--sp-3);
}

.cat-card{padding:var(--sp-5)}

.cat-card-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:var(--sp-3);
}

.cat-bar{
  height:6px;
  background:var(--cream-deep);
  border-radius:var(--r-pill);
  overflow:hidden;
  margin-bottom:var(--sp-2);
}

.cat-bar-fill{
  height:100%;
  background:var(--teal);
  border-radius:var(--r-pill);
}

.cat-stats{
  display:flex;
  justify-content:space-between;
}

/* ─── Quality Section ─── */
.quality-grid{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.quality-row{
  display:grid;
  grid-template-columns:140px 1fr 50px 90px;
  align-items:center;
  gap:var(--sp-3);
}

.quality-bar{
  height:8px;
  background:var(--cream-deep);
  border-radius:var(--r-pill);
  overflow:hidden;
}

.quality-bar-fill{
  height:100%;
  border-radius:var(--r-pill);
}

.quality-row-num{text-align:left}
.quality-row-count{text-align:left}

.quality-missing-list{
  max-height:500px;
  overflow-y:auto;
}

/* ─── Map Stats Bar ─── */
.map-stats-bar{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  margin-bottom:var(--sp-4);
  font-size:var(--text-sm);
  color:var(--ink-soft);
}
.map-stat .num{color:var(--teal);font-weight:700}
.map-stat-sep{
  width:1px;height:16px;
  background:var(--border-strong);
}

/* ─── Map Section ─── */
.map-toolbar{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
  flex-wrap:wrap;
}

.map-container{
  width:100%;
  height:calc(100vh - 220px);
  min-height:280px;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:var(--sh-sm);
}

.map-legend{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin-top:var(--sp-3);
  padding:var(--sp-2) var(--sp-4);
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}

.legend-item{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  font-size:var(--text-xs);
  color:var(--muted);
}

.legend-dot{
  width:10px;
  height:10px;
  border-radius:var(--r-pill);
  display:inline-block;
}

/* ─── Overview Hero Card ─── */
.hero-card{
  background:linear-gradient(135deg, var(--paper) 0%, var(--cream-warm) 100%);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--sp-8) var(--sp-8) var(--sp-6);
  margin-bottom:var(--sp-6);
  position:relative;
  overflow:hidden;
  box-shadow:var(--sh-sm);
}
.hero-card::before{
  content:'';
  position:absolute;
  top:0;right:0;left:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal) 0%, var(--orange) 100%);
}

.hero-quote{
  font-size:var(--text-sm);
  font-style:italic;
  color:var(--muted);
  margin-bottom:var(--sp-4);
}

.hero-title{
  font-size:var(--text-2xl);
  font-weight:700;
  color:var(--ink);
  margin-bottom:var(--sp-2);
}

.hero-subtitle{
  font-size:var(--text-base);
  color:var(--ink-soft);
  margin-bottom:var(--sp-4);
}

.hero-progress-label{
  color:var(--muted);
}

.hero-progress{
  height:10px;
  background:var(--cream-deep);
  border-radius:var(--r-pill);
  overflow:hidden;
  margin-bottom:var(--sp-5);
}

.hero-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--teal) 0%, var(--orange) 100%);
  border-radius:var(--r-pill);
  transition:width 1s cubic-bezier(0.4,0,0.2,1);
}

.hero-actions{
  display:flex;
  gap:var(--sp-3);
}

/* ─── Section Labels ─── */
.section-label{
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:var(--sp-3);
}

/* ─── KPI Grid 4-col ─── */
.kpi-row-4{
  grid-template-columns:repeat(4, 1fr);
}

/* ─── Clickable KPI Cards ─── */
.kpi-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  display:block;
}
.kpi-link:hover{
  border-color:var(--teal);
}

.kpi-icon{
  font-size:var(--text-xl);
  margin-bottom:var(--sp-2);
}

.kpi-meta{
  font-size:var(--text-xs);
  color:var(--muted);
  margin-top:var(--sp-1);
}

.kpi-trend{
  margin-top:var(--sp-2);
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--success);
}
.kpi-trend-neutral{color:var(--muted)}
.kpi-trend-danger{color:var(--danger)}

.kpi-warn{border-color:var(--warning)}

/* ─── Responsive tweaks ─── */
@media (max-width:768px){
  .biz-toolbar{flex-direction:column;width:100%}
  .biz-search-wrap{width:100%}
  .quality-row{grid-template-columns:100px 1fr 40px 70px}
  .cat-grid{grid-template-columns:1fr}
  .kpi-row-4{grid-template-columns:repeat(2,1fr);overflow:hidden}
  .hero-card{padding:var(--sp-5) var(--sp-4) var(--sp-4)}
  .hero-title{font-size:var(--text-xl)}
  .hero-actions{flex-wrap:wrap}
  .hero-quote{margin-bottom:var(--sp-2)}
}