/**
 * Trendmetrik UI v2 — dashboard primitives (TRE-23 / TRE-25)
 * Used with macros/kpi_card.html and future tmv2-* dashboard blocks.
 */

.tmv2-kpi-skeleton-wrap,
.tmv2-kpi-actual-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--tmv2-dashboard-gap);
  width: 100%;
  min-width: 0;
}

/* Genel Bakış / Siparişler tab içi — alt boşluk */
.tmv2-overview-tab-inner,
.tmv2-orders-tab-inner {
  padding-bottom: var(--tmv2-dashboard-section-gap);
}

/* Uyarı + hızlı erişim — .tmv2-panel köşe yarıçapı (tm-ui-system) */
.tmv2-dash-panel {
  border-radius: inherit;
}

.tmv2-kpi-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tmv2-dashboard-gap);
  width: 100%;
  min-width: 0;
}

.tmv2-dashboard-grid {
  display: grid;
  gap: var(--tmv2-dashboard-gap);
  width: 100%;
  min-width: 0;
}

@media (min-width: 992px) {
  .tmv2-dashboard-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tmv2-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tmv2-panel-body {
  min-width: 0;
}

.tmv2-panel-header__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tmv2-ink, var(--color-text));
  letter-spacing: -0.01em;
}

.tmv2-panel-header__meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
}

/* Genel Bakış: skeleton + gerçek KPI aynı hücrede üst üste (dashboard-ui-enhancements ile uyumlu) */
#overviewTab .kpi-cards-wrapper {
  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-width: 0;
}

#overviewTab .kpi-cards-wrapper #kpi-skeleton-loader,
#overviewTab .kpi-cards-wrapper #kpi-actual-content {
  grid-area: stack;
}

/* Flex sütun (.overview-metric-deck) içinde grid yığınının küçülmesi/taşması */
#overviewTab .overview-kpi-section--deck > .overview-metric-deck > .kpi-cards-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.tmv2-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tmv2-page-header__titles h1,
.tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text-primary, #0f172a);
}

.tmv2-page-header__titles p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #64748b);
}

.tmv2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

@media (min-width: 1024px) {
  .tmv2-grid--kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Genel Bakış: `.tmv2-grid` on KPI rows is a v2 hook; column/gap rules stay in dashboard-overview-metric-cards (higher specificity). */
html.dark-mode #overviewTab .dashboard-overview-tmv2-head .tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  color: var(--color-text-primary, #f1f5f9);
}
html.dark-mode #overviewTab .dashboard-overview-tmv2-head .tmv2-page-header__titles p {
  color: var(--color-text-secondary, #94a3b8);
}

/* Siparişler / Analiz vb. sekmeler: --color-text-secondary tanımsız olduğu için p hep #64748b kalıyordu */
html.dark-mode .dashboard-overview-tmv2-head .tmv2-page-header__titles p {
  color: var(--tm-text-secondary, var(--color-text-muted, #94a3b8));
}

/* Genel v2 başlık — tabbed dashboard üst şerit ile uyum */
.tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  color: var(--color-text-primary, var(--color-text));
}
html.dark-mode .tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  color: var(--color-text-primary, #f1f5f9);
}

/* ========== Referans v2 — KPI, panel, grid (trendmetrik-v2 paketi) ========== */
/* KPI grid */
.tmv2-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tmv2-dashboard-gap);
  margin-bottom: var(--tmv2-dashboard-gap);
}
.tmv2-kpi-row.five {
  grid-template-columns: repeat(5, 1fr);
}

/* Yüzey: .tmv2-metric-card (tm-ui-system); burada yalnızca KPI düzeni */
.tmv2-kpi {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tmv2-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--tmv2-sh-2);
}
.tmv2-kpi .k-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tmv2-ink, var(--color-text));
  letter-spacing: -0.005em;
}
.tmv2-kpi .k-en {
  font-size: 10.5px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  text-transform: lowercase;
}
.tmv2-kpi .k-value {
  font-family: var(--tmv2-ff-mono, ui-monospace, monospace);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tmv2-ink, var(--color-text));
  margin-top: 10px;
}
.tmv2-kpi .k-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: var(--tmv2-r-pill, 999px);
  font-size: 11px;
  font-weight: 600;
  background: var(--tmv2-success-soft, #dcfce7);
  color: var(--tmv2-success, #16a34a);
}
.tmv2-kpi .k-delta.down {
  background: var(--tmv2-danger-soft, #fee2e2);
  color: var(--tmv2-danger, #dc2626);
}
html.dark-mode .tmv2-kpi .k-delta {
  background: var(--tmv2-success-soft);
  color: var(--tmv2-delta-success-fg-dark);
}
html.dark-mode .tmv2-kpi .k-delta.down {
  background: var(--tmv2-danger-soft);
  color: var(--tmv2-delta-danger-fg-dark);
}
.tmv2-kpi .k-delta svg,
.tmv2-kpi .k-delta i {
  width: 11px;
  height: 11px;
}
.tmv2-kpi .k-delta-txt {
  font-size: 11px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  margin-left: 6px;
  font-weight: 500;
}
.tmv2-kpi .spark {
  position: absolute;
  right: 10px;
  top: 14px;
  width: 120px;
  height: 46px;
  pointer-events: none;
}

.tmv2-kpi.accent,
.tmv2-kpi.tmv2-metric-card--primary {
  color: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .k-label,
.tmv2-kpi.accent .k-value,
.tmv2-kpi.tmv2-metric-card--primary .k-label,
.tmv2-kpi.tmv2-metric-card--primary .k-value {
  color: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .k-en,
.tmv2-kpi.tmv2-metric-card--primary .k-en {
  color: rgba(255, 255, 255, 0.75);
}
.tmv2-kpi.accent .k-delta,
.tmv2-kpi.tmv2-metric-card--primary .k-delta {
  background: rgba(255, 255, 255, 0.2);
  color: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .k-delta-txt,
.tmv2-kpi.tmv2-metric-card--primary .k-delta-txt {
  color: rgba(255, 255, 255, 0.7);
}
.tmv2-kpi.accent .spark path.area,
.tmv2-kpi.tmv2-metric-card--primary .spark path.area {
  fill: rgba(255, 255, 255, 0.18);
}
.tmv2-kpi.accent .spark path.line,
.tmv2-kpi.tmv2-metric-card--primary .spark path.line {
  stroke: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .big-circle,
.tmv2-kpi.tmv2-metric-card--primary .big-circle {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
  pointer-events: none;
}

.tmv2-kpi.tall .k-value {
  margin-top: 6px;
}
.tmv2-kpi.tall .big-spark {
  margin-top: 14px;
  height: 48px;
  width: 100%;
  display: block;
}

/* Alt KPI satırı: değer + delta yan yana (referans dashboard-v2) */
.tmv2-kpi.tall .tmv2-kpi-row-mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.tmv2-kpi.tall .tmv2-kpi-row-mid .k-value {
  margin-top: 0;
}

/* Üst satır: etiket + sparkline için içerik alanı */
.tmv2-kpi .tmv2-kpi-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-right: 128px;
}

.tmv2-kpi.accent .tmv2-kpi-head,
.tmv2-kpi.tmv2-metric-card--primary .tmv2-kpi-head {
  padding-right: 128px;
}

.tmv2-kpi .tmv2-kpi-delta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* .tmv2-panel / .tmv2-card — tek kaynak: tm-ui-system.css (#tmv2App) */

/* İç bölüm kendi padding’ini veriyorsa (ör. başlık + gövde split) */
.tmv2-panel.tmv2-panel--flush {
  padding: 0;
}
.tmv2-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.tmv2-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tmv2-ink, var(--color-text));
  letter-spacing: -0.005em;
}
.tmv2-panel-sub {
  font-size: 12px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  margin-top: 2px;
}

.tmv2-seg {
  display: inline-flex;
  background: var(--tmv2-surface-2, var(--color-surface-alt));
  border: 1px solid var(--tmv2-line, var(--color-border));
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.tmv2-seg button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.tmv2-seg button.active {
  background: var(--tmv2-surface, var(--color-surface));
  color: var(--tmv2-ink, var(--color-text));
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.tmv2-two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.tmv2-three-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 14px;
}

@media (max-width: 1280px) {
  .tmv2-kpi-row,
  .tmv2-kpi-row.five {
    grid-template-columns: repeat(2, 1fr);
  }
  .tmv2-three-col {
    grid-template-columns: 1fr;
  }
  .tmv2-two-col {
    grid-template-columns: 1fr;
  }
  .tmv2-donut-panel {
    grid-template-columns: 1fr;
  }
}

/* ============ MOBILE: 1-col KPI, compact cards ============ */
@media (max-width: 768px) {
  .tmv2-kpi-row,
  .tmv2-kpi-row.five {
    grid-template-columns: 1fr;
    gap: var(--tmv2-dashboard-gap);
  }

  .tmv2-kpi .k-value {
    font-size: 20px;
  }

  .tmv2-panel-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tmv2-seg {
    width: 100%;
    justify-content: center;
  }

  .tmv2-chart-wrap {
    height: 200px;
  }
}

/* Genel Bakış — kompakt KPI (global .tmv2-metric-card’dan ayrı; yalnızca #overviewTab) */
#tmv2App #overviewTab .overview-dash-v2 .overview-kpi-tmv2 .tmv2-kpi.tmv2-metric-card {
  box-sizing: border-box;
  padding: var(--tmv2-sp-3) var(--tmv2-sp-3) var(--tmv2-sp-2);
  min-height: var(--tmv2-dashboard-metric-min-h);
}

#tmv2App #overviewTab .overview-dash-v2 .overview-kpi-tmv2 .tmv2-kpi.tall.tmv2-metric-card {
  min-height: var(--tmv2-dashboard-metric-tall-min-h);
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .k-value {
  margin-top: var(--tmv2-sp-2);
  font-size: 1.35rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .tmv2-kpi-delta-row {
  margin-top: var(--tmv2-sp-2);
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .spark {
  top: var(--tmv2-sp-2);
  width: 6.75rem;
  height: 2.5rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .tmv2-kpi-head,
#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.accent .tmv2-kpi-head,
#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.tmv2-metric-card--primary .tmv2-kpi-head {
  padding-right: 7rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.tall .big-spark {
  margin-top: var(--tmv2-sp-2);
  height: 2.5rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.tall .k-value {
  margin-top: var(--tmv2-sp-2);
}

/* ============ SMALL MOBILE ============ */
@media (max-width: 480px) {
  .tmv2-kpi .k-value {
    font-size: 18px;
  }

  .tmv2-kpi .k-label {
    font-size: 12px;
  }

  .tmv2-chart-wrap {
    height: 180px;
  }
}