/* uygulama.semihkaya.tr — panel styles (Bootstrap 5.3 base) */

:root {
  --app-bg: #f5f6f8;
  --app-surface: #ffffff;
  --app-border: #e5e7eb;
  --app-border-strong: #d1d5db;
  --app-text: #111827;
  --app-muted: #6b7280;
  --app-subtle: #9ca3af;
  --app-accent: #4f46e5;
  --app-accent-soft: #eef2ff;
  --app-positive: #059669;
  --app-negative: #dc2626;
  --app-sidebar-w: 240px;
  --app-radius: 10px;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-bg);
  --bs-border-color: var(--app-border);
  --bs-primary: var(--app-accent);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--app-accent);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
}

body { font-size: 14px; background: var(--app-bg); }
.btn-primary { --bs-btn-bg: var(--app-accent); --bs-btn-border-color: var(--app-accent); --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; }
.form-control:focus, .form-select:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15); }
.text-muted, .text-secondary { color: var(--app-muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* ── Shell ─────────────────────────────────────────────────────────── */
.app-shell { min-height: 100vh; }
.app-sidebar {
  width: var(--app-sidebar-w);
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
}
@media (min-width: 992px) {
  .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; }
  .app-main { margin-left: var(--app-sidebar-w); }
}
.app-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; font-weight: 650; color: var(--app-text); text-decoration: none; }
.app-brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; display: grid; place-items: center; font-size: 15px; }
.app-brand small { display: block; font-weight: 400; color: var(--app-muted); font-size: 11.5px; line-height: 1.1; }
.app-nav { padding: .25rem .75rem 1rem; }
.app-nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--app-subtle); padding: 1rem .6rem .35rem; }
.app-nav a, .app-nav .app-nav-disabled {
  display: flex; align-items: center; gap: .65rem; padding: .48rem .6rem; border-radius: 7px;
  color: #374151; text-decoration: none; font-weight: 500;
}
.app-nav a:hover { background: #f3f4f6; color: var(--app-text); }
.app-nav a.active { background: var(--app-accent-soft); color: var(--app-accent); }
.app-nav i { font-size: 16px; width: 18px; text-align: center; opacity: .85; }
.app-nav .app-nav-disabled { color: var(--app-subtle); cursor: default; }
.app-nav .phase-pill { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--app-subtle); border: 1px solid var(--app-border); border-radius: 999px; padding: 0 .4rem; }

.app-topbar {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(245, 246, 248, .92); backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--app-border);
  padding: .75rem 1.5rem;
}
.app-content { padding: 1.5rem; max-width: 1480px; }
@media (max-width: 575.98px) {
  .app-content { padding: 1rem; }
  .app-topbar { padding: .65rem 1rem; }
}
.page-title { font-size: 20px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.page-subtitle { color: var(--app-muted); font-size: 13px; }

.app-user { display: flex; align-items: center; gap: .5rem; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #e0e7ff; color: var(--app-accent); display: grid; place-items: center; font-weight: 600; font-size: 12px; }

/* ── Demo / environment banner ─────────────────────────────────────── */
.demo-banner {
  background: repeating-linear-gradient(-45deg, #fef3c7, #fef3c7 12px, #fde68a 12px, #fde68a 24px);
  color: #78350f; font-weight: 600; font-size: 12.5px; text-align: center; padding: .4rem 1rem;
  border-bottom: 1px solid #f59e0b;
}
.demo-chip { background: #f59e0b; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; border-radius: 4px; padding: .1rem .4rem; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--app-border); }
.panel-title { font-size: 14px; font-weight: 600; margin: 0; }
.panel-body { padding: 1.1rem; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--app-muted); font-weight: 600; margin: 1.75rem 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--app-border); }

.kpi {
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius);
  padding: .95rem 1rem .85rem; height: 100%; display: flex; flex-direction: column; gap: .35rem;
}
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kpi-label { font-size: 12px; color: var(--app-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: .3rem; }
.kpi-label .bi-info-circle { font-size: 11px; color: var(--app-subtle); cursor: help; }
.kpi-value { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-value.is-empty { color: var(--app-subtle); font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.kpi-hero .kpi-value { font-size: 30px; }
.kpi-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.kpi-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 12px; color: var(--app-muted); }
.kpi-split { font-size: 12px; color: var(--app-muted); display: flex; gap: .75rem; }
.kpi-split b { color: var(--app-text); font-weight: 600; }
.kpi.is-negative .kpi-value { color: var(--app-negative); }

.delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--app-positive); }
.delta.down { color: var(--app-negative); }
.delta.flat { color: var(--app-muted); }

/* ── Source / qualifier badges ─────────────────────────────────────── */
.sb {
  display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 4px; padding: .14rem .38rem; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent;
}
.sb-apple { background: #111827; color: #fff; }
.sb-google_play { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.sb-meta { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.sb-admob { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sb-internal { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.sb-attributed { background: #fff; color: #0f766e; border-color: #5eead4; }
.sb-modeled { background: #fff; color: #c2410c; border-color: #fdba74; }
.sb-estimated { background: #fff; color: #a16207; border-color: #fcd34d; border-style: dashed; }
.sb-blended { background: #fff; color: #475569; border-color: #cbd5e1; }
.sb-store_total { background: #fff; color: #111827; border-color: #9ca3af; }
.sb-verified { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.sb-cohort { background: #fff; color: #6d28d9; border-color: #c4b5fd; border-style: dashed; }
.sb-derived { background: #f3f4f6; color: #4b5563; }
.sb-unofficial { background: #fee2e2; color: #991b1b; }

/* ── Freshness states ──────────────────────────────────────────────── */
.fs { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.fs::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fs-fresh { color: #059669; }
.fs-delayed { color: #d97706; }
.fs-stale { color: #ea580c; }
.fs-error { color: #dc2626; }
.fs-no_data, .fs-not_connected { color: #9ca3af; }
.stale-flag { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #fff; background: #ea580c; border-radius: 4px; padding: .1rem .35rem; }

/* ── Filter bar ────────────────────────────────────────────────────── */
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filterbar .form-select, .filterbar .form-control { font-size: 13px; padding-top: .3rem; padding-bottom: .3rem; min-width: 0; }
.filterbar .form-select { width: auto; }
.seg { display: inline-flex; background: var(--app-surface); border: 1px solid var(--app-border-strong); border-radius: 8px; padding: 2px; }
.seg a { padding: .22rem .6rem; border-radius: 6px; color: #374151; text-decoration: none; font-size: 12.5px; font-weight: 600; }
.seg a.active { background: var(--app-accent); color: #fff; }
.seg a:not(.active):hover { background: #f3f4f6; }
.custom-range { display: none; gap: .35rem; align-items: center; }
.custom-range.show { display: inline-flex; }
.custom-range input { width: 140px; }

/* ── Tables ────────────────────────────────────────────────────────── */
.table-app { margin: 0; font-size: 13px; }
.table-app thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--app-muted); font-weight: 600; background: #fafafa; border-bottom: 1px solid var(--app-border); white-space: nowrap; padding: .6rem .9rem; }
.table-app td { padding: .7rem .9rem; vertical-align: middle; border-color: #f0f1f3; }
.table-app tbody tr:hover { background: #fafbff; }
.table-app .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-app td.num { font-weight: 500; }

.app-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.app-icon-lg { width: 64px; height: 64px; border-radius: 15px; font-size: 22px; }
.app-icon.c0 { background: linear-gradient(135deg, #f97316, #db2777); }
.app-icon.c1 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.app-icon.c2 { background: linear-gradient(135deg, #22c55e, #0d9488); }
.app-icon.c3 { background: linear-gradient(135deg, #a855f7, #6366f1); }
.app-icon.c4 { background: linear-gradient(135deg, #64748b, #334155); }
.platform { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; font-weight: 600; color: #374151; }
.platform i { font-size: 13px; }

.status-pill { font-size: 11px; font-weight: 600; border-radius: 999px; padding: .12rem .5rem; background: #f3f4f6; color: #374151; white-space: nowrap; }
.status-pill.live, .status-pill.active, .status-pill.connected { background: #dcfce7; color: #166534; }
.status-pill.in_review, .status-pill.development, .status-pill.configured, .status-pill.in_development { background: #e0e7ff; color: #3730a3; }
.status-pill.paused, .status-pill.unpublished { background: #fef3c7; color: #92400e; }
.status-pill.removed, .status-pill.archived, .status-pill.error { background: #fee2e2; color: #991b1b; }
.status-pill.not_configured { background: #f3f4f6; color: #6b7280; }

/* ── Charts ────────────────────────────────────────────────────────── */
.chart-box { position: relative; height: 260px; }
.chart-box-sm { position: relative; height: 200px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: 12px; color: var(--app-muted); }
.chart-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: var(--legend-color, #999); }
.lg-spend { --legend-color: #94a3b8; }
.lg-revenue { --legend-color: #4f46e5; }
.lg-iap { --legend-color: #4f46e5; }
.lg-admob { --legend-color: #f59e0b; }
.lg-store { --legend-color: #111827; }
.lg-attributed { --legend-color: #2563eb; }
.lg-apple { --legend-color: #111827; }
.lg-google { --legend-color: #16a34a; }
.lg-negative { --legend-color: #dc2626; }
.lg-firstopen { --legend-color: #8b5cf6; }
.lg-cpi { --legend-color: #0d9488; }
.lg-roas { --legend-color: #db2777; }

/* ── App detail ────────────────────────────────────────────────────── */
.app-header { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem 1.5rem; }
.meta-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--app-muted); font-weight: 600; margin-bottom: .15rem; }
.meta-grid dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.tabs-scroll { overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--app-border); }
.tabs-scroll .nav { flex-wrap: nowrap; border-bottom: 0; }
.tabs-scroll .nav-link { white-space: nowrap; color: var(--app-muted); font-weight: 600; font-size: 13px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .6rem .85rem; }
.tabs-scroll .nav-link.active { color: var(--app-accent); border-bottom-color: var(--app-accent); background: transparent; }
.tabs-scroll .nav-link .phase-pill { font-size: 9.5px; color: var(--app-subtle); margin-left: .25rem; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--app-muted); }
.empty-state i { font-size: 30px; color: var(--app-subtle); display: block; margin-bottom: .6rem; }
.empty-state h3 { font-size: 15px; color: var(--app-text); font-weight: 600; }

/* ── Connections ───────────────────────────────────────────────────── */
.provider-logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.pl-apple { background: #111827; color: #fff; }
.pl-google_play { background: #dcfce7; color: #166534; }
.pl-meta { background: #dbeafe; color: #1d4ed8; }
.pl-admob { background: #fef3c7; color: #b45309; }
.pl-internal { background: #ede9fe; color: #6d28d9; }
.secret-mask { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; color: var(--app-muted); }

/* ── Auth ──────────────────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1200px 500px at 50% -10%, #e0e7ff 0%, var(--app-bg) 60%); }
.auth-card { width: 100%; max-width: 410px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; padding: 2rem; box-shadow: 0 10px 30px rgba(17, 24, 39, .06); }
.auth-card.wide { max-width: 520px; }
.qr-img { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--app-border); border-radius: 10px; padding: 6px; background: #fff; }
.code-input { font-size: 22px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
.recovery-grid div { background: #f9fafb; border: 1px solid var(--app-border); border-radius: 7px; padding: .45rem; text-align: center; }

.warnings .alert { font-size: 13px; padding: .55rem .85rem; margin-bottom: .5rem; }
.tz-note { font-size: 12px; color: var(--app-muted); }
.small-muted { font-size: 12px; color: var(--app-muted); }
.auth-alert { max-width: 410px; }
.sync-error { min-width: 180px; max-width: 260px; }

@media (max-width: 575.98px) {
  .kpi { padding: .75rem .75rem .65rem; }
  .kpi-value, .kpi-hero .kpi-value { font-size: 19px; }
  .kpi-value.is-empty { font-size: 14px; }
  .kpi-label { font-size: 10.5px; }
  .kpi-head { flex-wrap: wrap; row-gap: .1rem; }
  .kpi-foot { flex-wrap: wrap; row-gap: .15rem; font-size: 11px; }
  .kpi-split { gap: .5rem; font-size: 11px; }
  .page-title { font-size: 17px; }
}
@media (max-width: 991.98px) {
  .app-topbar { position: static; backdrop-filter: none; }
}
.min-w-0 { min-width: 0; }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg a { white-space: nowrap; }

/* ── Reviews (Phase 2) ─────────────────────────────────────────────── */
.review-stars { color: #f59e0b; letter-spacing: .05em; font-size: 14px; }
.review-negative { border-left: 3px solid #dc2626; }
.review-body { white-space: normal; overflow-wrap: anywhere; }
.review-response { background: #f8fafc; border-left: 3px solid var(--app-accent); border-radius: 6px; padding: .5rem .75rem; }
.review-quote { background: #fafafa; border: 1px solid var(--app-border); border-radius: 8px; padding: .75rem; }
.sb-negative { background: #fee2e2; color: #991b1b; }
details > summary { cursor: pointer; }
.cap-list { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: 12px; }
.cap-ok { color: #059669; } .cap-bad { color: #dc2626; } .cap-muted { color: var(--app-subtle); }
.apple-map-cell { min-width: 320px; }

/* Turkish UI mixes Turkish words with English industry terms (Attributed, eCPM…):
   CSS uppercase under lang="tr" would turn "i" into "İ", so labels keep their written case. */
.kpi-label, .section-title, .table-app thead th, .meta-grid dt, .app-nav-section { text-transform: none; letter-spacing: .01em; }
.kpi-label { font-size: 12.5px; color: #4b5563; }
.section-title { font-size: 13px; color: #374151; }
.table-app thead th { font-size: 12px; }
.app-nav-section { font-size: 11.5px; font-weight: 600; }

/* Review inbox: selected 1–2★ filter chips stay readable */
.btn-check:checked + .btn-outline-secondary.text-danger { color: #fff !important; background-color: #dc2626; border-color: #dc2626; }

/* Creatives (Phase 7) */
.creative-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.creative-thumb-lg { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.placeholder-thumb { background: #f1f5f9; color: #94a3b8; }
.creative-thumb-cell { width: 56px; }
.creative-variant td { background: #fbfcfe; }
.ads-tree .lvl-campaign td { background: #f8fafc; }
.ads-tree .lvl-adset td:first-child { padding-left: 1.5rem; }
.ads-tree .lvl-ad td:first-child { padding-left: 3rem; }
.ads-tree tbody + tbody { border-top: 2px solid #e5e7eb; }

/* Internal analytics (Phase 8) */
.funnel-meter { width: 100%; height: 10px; }
.funnel-bar-col { width: 30%; }
.funnel-context td { color: #6b7280; background: #fafafa; }
.cohort-cell { color: #111827; }
.cohort-cell.heat-0 { background: #eef2ff; }
.cohort-cell.heat-1 { background: #e0e7ff; }
.cohort-cell.heat-2 { background: #c7d2fe; }
.cohort-cell.heat-3 { background: #a5b4fc; }
.cohort-cell.heat-4 { background: #818cf8; color: #fff; }
.cohort-cell.heat-5, .cohort-cell.heat-6 { background: #6366f1; color: #fff; }

/* ── Alerts (Phase 12) ─────────────────────────────────────────── */
.topbar-bell { font-size: 1.1rem; line-height: 1; }
.topbar-bell .bell-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.alert-feed .alert-item { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border-top: 1px solid var(--app-border); }
.alert-feed .alert-item:first-child { border-top: 0; }
.alert-feed .alert-item.unread { background: var(--app-accent-soft); }
.alert-feed .alert-item:not(.unread) { opacity: .75; }
.alert-feed .alert-item > .bi { font-size: 1.05rem; margin-top: .1rem; }
.rule-num { width: 5rem; }

/* Level progression */
.table-app tr.level-hard > td { background: rgba(220, 38, 38, .05); }
.level-meter { display: block; width: 100%; min-width: 6rem; height: 6px; margin-left: auto; }