/* ═══════════════════════════════════════════════════════════════════
   ShukWAY · Components · v2
   Cards, KPIs, Tables, Map, Micro-interactions
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Cards ─── */
.card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--sh-sm);
  transition:all var(--tx-base);
}
.card:hover{
  border-color:var(--border-strong);
  box-shadow:var(--sh-md);
  transform:translateY(-1px);
}

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

.card-title{
  font-size:var(--text-lg);
  font-weight:700;
}

/* ─── KPI Cards (signature ShukWAY gradient + top bar) ─── */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}

.kpi-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-6);
  position:relative;
  overflow:hidden;
  transition:all var(--tx-base);
}

/* Teal-to-orange gradient top bar — signature ShukWAY */
.kpi-card::before{
  content:'';
  position:absolute;
  top:0;right:0;left:0;
  height:3px;
  background:linear-gradient(90deg, var(--teal) 0%, var(--orange) 100%);
}

/* Executive overview: solid color top bar per row */
.exec-kpi::before{
  background:var(--kpi-border, var(--teal));
}

.kpi-card:hover{
  box-shadow:var(--sh-md);
  transform:translateY(-2px);
}

.kpi-card .kpi-value{
  font-size:var(--text-3xl);
  font-weight:600;
  color:var(--ink);
  line-height:1.15;
  margin-bottom:var(--sp-1);
  direction:ltr;
  font-variant-numeric:tabular-nums;
  display:inline-block;
  letter-spacing:-0.01em;
}

.kpi-card .kpi-label{
  font-size:var(--text-sm);
  color:var(--muted);
  font-weight:var(--fw-medium);
}

.kpi-card .kpi-trend{
  margin-top:var(--sp-2);
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  font-size:var(--text-xs);
  color:var(--success);
}

/* ─── Tables ─── */
.biz-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--paper);
  box-shadow:var(--sh-xs);
}

.biz-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--text-sm);
}

.biz-table thead{
  background:var(--cream-warm);
}

.biz-table th{
  text-align:right;
  padding:var(--sp-3) var(--sp-4);
  font-weight:var(--fw-medium);
  font-size:11px;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.05em;
  white-space:nowrap;
  border-bottom:1px solid var(--border);
  user-select:none;
}

.biz-table th.sortable{cursor:pointer}
.biz-table th.sortable:hover{background:var(--cream-deep)}
.biz-table th.sort-asc::after{content:' \25B2';font-size:0.6em}
.biz-table th.sort-desc::after{content:' \25BC';font-size:0.6em}

.biz-table td{
  padding:var(--sp-4);
  border-bottom:1px solid var(--divider);
  vertical-align:middle;
}

.biz-table tbody tr{
  transition:background var(--tx-fast);
  position:relative;
}

.biz-table tbody tr:hover{
  background:var(--cream);
}

.biz-table tbody tr:last-child td{
  border-bottom:none;
}

/* Hover arrow on table rows */
.biz-table tbody tr::after{
  content:'\2190';
  position:absolute;
  inset-inline-end:var(--sp-3);
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  color:var(--teal);
  font-size:var(--text-sm);
  transition:all var(--tx-fast);
}
.biz-table tbody tr:hover::after{
  opacity:1;
  inset-inline-end:var(--sp-2);
}

.biz-name{font-weight:var(--fw-medium);font-size:var(--text-sm)}

/* ─── Leaflet Popup (warm, not white) ─── */
.leaflet-popup-content-wrapper{
  background:var(--paper) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-lg) !important;
  border:1px solid var(--border) !important;
  font-family:var(--font);
}

.leaflet-popup-content{
  margin:var(--sp-4) !important;
  font-family:var(--font);
  font-size:var(--text-sm);
  line-height:var(--leading-snug);
}

.leaflet-popup-tip{
  background:var(--paper) !important;
}

/* ─── Map Pin Styles ─── */
.map-marker{background:none !important;border:none !important}
.map-dot{
  width:14px;
  height:14px;
  border-radius:var(--r-pill);
  border:2.5px solid var(--paper);
  box-shadow:var(--sh-sm), 0 0 0 3px rgba(0,0,0,0);
  cursor:pointer;
  transition:all var(--tx-fast);
}

/* Pin halo on hover */
.map-dot:hover{
  transform:scale(1.4);
  box-shadow:var(--sh-md), 0 0 0 6px rgba(229,110,19,0.15);
}

/* Pin pulse animation for featured */
@keyframes pin-pulse{
  0%,100%{box-shadow:var(--sh-sm), 0 0 0 0 rgba(229,110,19,0.4)}
  50%{box-shadow:var(--sh-sm), 0 0 0 8px rgba(229,110,19,0)}
}
.map-dot.featured{animation:pin-pulse 2s infinite}

/* ─── Animated Progress Bars ─── */
.quality-bar-fill,
.cat-bar-fill{
  width:0;
  transition:width 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.quality-bar-fill.loaded,
.cat-bar-fill.loaded{
  /* width set by inline style */
}

/* ─── Loading States ─── */
.skeleton{
  background:linear-gradient(90deg,var(--cream-warm) 0%,var(--cream-deep) 50%,var(--cream-warm) 100%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.spinner{
  width:24px;height:24px;
  border:3px solid var(--cream-deep);
  border-top-color:var(--orange);
  border-radius:var(--r-pill);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Toast container (stacked, bottom-center) ─── */
.toast-container{
  position:fixed;
  bottom:var(--sp-6);
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  display:flex;
  flex-direction:column-reverse;
  gap:var(--sp-2);
  pointer-events:none;
}

.toast-item{
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  font-family:var(--font);
  font-size:var(--text-sm);
  font-weight:var(--fw-medium);
  color:white;
  pointer-events:auto;
  opacity:0;
  transform:translateY(10px);
  transition:all var(--tx-base);
  text-align:center;
  direction:rtl;
  white-space:nowrap;
}
.toast-item.toast-visible{opacity:1;transform:translateY(0)}
.toast-item.toast-exit{opacity:0;transform:translateY(-10px)}
.toast-success{background:var(--teal)}
.toast-error{background:var(--danger)}
.toast-info{background:var(--orange)}

/* Legacy .toast class (used by shared.js showToast) */
.toast{
  position:fixed;
  bottom:var(--sp-6);
  left:50%;
  transform:translateX(-50%);
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  font-family:var(--font);
  font-size:var(--text-sm);
  font-weight:var(--fw-medium);
  color:white;
  z-index:10000;
  animation:toastIn var(--tx-base);
}
@keyframes toastIn{
  from{transform:translate(-50%,10px);opacity:0}
  to{transform:translate(-50%,0);opacity:1}
}

@media(max-width:480px){
  .toast-container{
    left:var(--sp-3);
    right:var(--sp-3);
    transform:none;
  }
  .toast-item{white-space:normal;border-radius:var(--r-sm)}
}

/* ─── Tooltip ? icon — 3 states ─── */
.tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-inline-start:3px;
  background:rgba(3,138,130,0.15);
  color:var(--teal);
  border-radius:var(--r-pill);
  font-size:10px;
  font-weight:var(--fw-medium);
  cursor:help;
  vertical-align:middle;
  line-height:1;
  flex-shrink:0;
  transition:all var(--tx-fast);
}
/* Hover: orange */
.tip:hover{
  background:rgba(229,110,19,0.15);
  color:#E56E13;
  transform:scale(1.1);
}
/* Active/focused: yellow with glow */
.tip:focus,
.tip.tip-active{
  background:rgba(245,166,35,0.20);
  color:#F5A623;
  box-shadow:0 0 0 3px rgba(245,166,35,0.15);
  outline:none;
}

/* ─── Tooltip popup (rendered by JS, position:fixed) ─── */
.tip-popup{
  position:fixed;
  z-index:10000;
  background:var(--teal-deep);
  color:#FFFFFF;
  font-family:var(--font);
  font-size:14px;
  font-weight:var(--fw-regular);
  line-height:1.55;
  padding:10px 14px;
  border-radius:8px;
  max-width:280px;
  width:max-content;
  text-align:right;
  direction:rtl;
  box-shadow:0 8px 24px rgba(120,90,40,0.20);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--tx-fast);
}
.tip-popup.visible{opacity:1}
/* Arrow — position set by JS via --arrow-left */
.tip-popup::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:var(--arrow-left, 50%);
  transform:translateX(-50%);
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid var(--teal-deep);
}
/* When popup appears below the icon */
.tip-popup.tip-popup-below::after{
  bottom:auto;
  top:-6px;
  border-top:none;
  border-bottom:6px solid var(--teal-deep);
}

/* ─── Recommendation bar ─── */
.recommendation{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:linear-gradient(90deg, var(--teal-soft) 0%, var(--paper) 100%);
  border:1px solid var(--teal-mist);
  border-radius:var(--r-md);
  margin-top:var(--sp-6);
  border-right:3px solid var(--teal);
}
.recommendation-icon{font-size:var(--text-lg);flex-shrink:0}
.recommendation-label{
  display:block;
  font-size:var(--text-xs);
  font-weight:var(--fw-medium);
  color:var(--teal);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:2px;
}
.recommendation-text{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.6}

/* ─── Executive period filter ─── */
.exec-period-filter{
  display:inline-flex;
  gap:2px;
  background:var(--cream-deep);
  border-radius:var(--r-md);
  padding:2px;
}
.exec-period-btn{
  padding:var(--sp-1) var(--sp-3) !important;
  font-size:var(--text-xs) !important;
  min-width:32px;
  border-radius:var(--r-sm) !important;
}
.exec-period-btn.exec-period-active{
  background:var(--teal) !important;
  color:var(--white) !important;
}

/* ─── Custom date picker modal ─── */
.exec-date-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
}
.exec-date-modal-content{
  background:var(--paper);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  box-shadow:var(--sh-xl);
  max-width:380px;
  width:90%;
  direction:rtl;
}

/* ─── Clipboard button ─── */
.clipboard-btn{
  margin-top:var(--sp-3);
  font-size:var(--text-xs) !important;
}
.section-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
}

/* ─── Mobile responsive ─── */

/* Tablet and below */
@media (max-width:768px){
  /* Bug 1: KPI grid must be 2x2, never overflow */
  .kpi-row,.kpi-row-4{
    grid-template-columns:1fr 1fr !important;
    overflow:hidden;
  }

  /* Bug 2: ensure hamburger is visible */
  .sidebar-toggle{
    display:inline-flex !important;
  }

  /* Inline grids go single column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

/* Phone (375px) */
@media (max-width:480px){
  /* KPI cards compact */
  .kpi-card{padding:var(--sp-3);overflow:hidden}
  .kpi-card .kpi-value{font-size:var(--text-xl) !important;word-break:break-all}
  .kpi-icon{font-size:var(--text-base)}
  .kpi-card .kpi-label{font-size:var(--text-xs)}
  .kpi-card .kpi-meta{font-size:10px}

  /* Businesses KPI: try 1x4 ultra-compact row */
  .kpi-row-compact{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:var(--sp-1);
  }
  .kpi-row-compact .kpi-card{
    padding:var(--sp-2);
    text-align:center;
  }
  .kpi-row-compact .kpi-icon{display:none}
  .kpi-row-compact .kpi-value{
    font-size:var(--text-xl) !important;
    display:block;
  }
  .kpi-row-compact .kpi-label{
    font-size:10px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Hero compact */
  .hero-card{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .hero-title{font-size:var(--text-base) !important}
  .hero-subtitle{font-size:var(--text-xs)}
  .hero-quote{font-size:var(--text-xs)}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}

  /* Cards */
  .card{padding:var(--sp-3)}
  .card-title{font-size:var(--text-sm)}
  .card-header{margin-bottom:var(--sp-3)}

  /* Bug 2: topbar compact */
  .topbar{padding:0 var(--sp-3);gap:var(--sp-2)}
  .topbar h2{font-size:var(--text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Bug 3: selects need min-height and visible labels */
  .biz-toolbar{flex-direction:column;gap:var(--sp-2)}
  .biz-search-wrap{width:100%}
  .biz-select{
    max-width:100%;
    width:100%;
    min-height:40px;
    font-size:var(--text-sm);
    padding:var(--sp-2) var(--sp-3);
    appearance:menulist;
    -webkit-appearance:menulist;
  }

  /* Bug 4: table cells need proper spacing */
  .biz-table{font-size:11px}
  .biz-table th{padding:var(--sp-2);font-size:10px}
  .biz-table td{padding:var(--sp-2) var(--sp-2);line-height:1.4;vertical-align:top}
  .biz-table tbody tr::after{display:none}
  .biz-name{font-size:12px}

  /* Hide less critical table columns on mobile */
  .biz-table th:nth-child(5),
  .biz-table td:nth-child(5),
  .biz-table th:nth-child(6),
  .biz-table td:nth-child(6),
  .biz-table th:nth-child(7),
  .biz-table td:nth-child(7){
    display:none;
  }

  /* Quality rows compact */
  .quality-row{grid-template-columns:80px 1fr 32px 60px;gap:var(--sp-1)}
  .quality-row-label{font-size:11px}

  /* Map */
  .map-container{height:50vh;min-height:280px}
  .map-stats-bar{flex-wrap:wrap;gap:var(--sp-2);font-size:var(--text-xs)}
  .map-stat-sep{display:none}

  /* Other */
  .recommendation{flex-direction:column;gap:var(--sp-2);padding:var(--sp-3)}
  .tip-popup{max-width:calc(100vw - 24px);font-size:13px}
  .section-footer{flex-direction:column;align-items:stretch}
  .content{padding:var(--sp-2) !important}
  .cat-grid{grid-template-columns:1fr !important}
  .stat-item{gap:var(--sp-1);font-size:var(--text-sm)}
  .section-label{font-size:var(--text-xs)}

  /* Prevent any horizontal overflow */
  .content,
  .kpi-row,
  .biz-toolbar,
  .biz-table-wrap{
    max-width:100vw;
    overflow-x:hidden;
  }
}