:root {
  --pusulam-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --pusulam-brand-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --pusulam-data-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --pusulam-ink: #0f172a;
  --pusulam-muted: #64748b;
  --pusulam-blue: #2563eb;
  --pusulam-line: #dbe6f3;
  --pusulam-soft: #f8fbff;
  --pusulam-page: #eef4fb;
  --pusulam-radius-card: 6px;
  --pusulam-radius-control: 4px;
  --pusulam-radius-tight: 3px;
  --pusulam-shadow-card: 0 10px 26px rgba(15, 23, 42, 0.06);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--pusulam-font);
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

* {
  box-sizing: border-box;
}

body {
  color: var(--pusulam-ink);
}

h1,
h2,
h3,
.app-brand,
.app-nav-link {
  font-family: var(--pusulam-brand-font);
}

table,
th,
td,
.neighborhood-button,
.chart-label,
.chart-value,
.data-font {
  font-family: var(--pusulam-data-font);
}

/*
  Pusulam.NET Web UI Standardı
  Amaç: ürün genelinde ciddi, kurumsal ve okunaklı bir karar destek dili kurmak.
  Kural: büyük kartlarda hafif köşe, form/butonlarda daha sıkı köşe, hap/yoğun
  oval görünüm yok. Sayfa içi prototiplerde farklı radius verilse bile standart
  burada tek noktadan korunur.
*/

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding: 4px 12px;
  border: 1px solid rgba(219, 230, 243, 0.95);
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none !important;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 210px;
  color: var(--pusulam-ink);
  text-decoration: none;
  box-shadow: none !important;
}

.app-brand-logo {
  display: block;
  width: 210px;
  max-height: 54px;
  height: auto;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.app-brand > span {
  display: none;
}

.app-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  box-shadow: none !important;
}

.app-nav-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid transparent !important;
  border-radius: var(--pusulam-radius-tight) !important;
  color: #31506f;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none !important;
}

.app-nav-link:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.app-nav-link.active {
  border-color: #bfdbfe;
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow: none !important;
}

.app-user-context {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 290px;
  padding: 5px 7px;
  border: 1px solid #dbeafe;
  border-radius: var(--pusulam-radius-tight) !important;
  background: #f8fafc;
  color: #31506f;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: none !important;
}

.app-user-context span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-user-context-main {
  max-width: 90px;
  color: var(--pusulam-ink);
  font-weight: 950;
}

.app-user-context-role {
  max-width: 90px;
}

.app-user-context-scope {
  max-width: 100px;
  color: #1d4ed8;
}

.app-user-context-source {
  display: none;
}

.app-global-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
  white-space: nowrap;
  box-shadow: none !important;
}

.app-global-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #31506f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.app-global-controls select {
  min-width: 104px;
  height: 32px;
  border: 1px solid #cfe0f2;
  border-radius: var(--pusulam-radius-control) !important;
  padding: 0 9px;
  background: #ffffff;
  color: var(--pusulam-ink);
  font-size: 12px;
  font-weight: 850;
  box-shadow: none !important;
}

.app-global-controls label:nth-child(3) select {
  min-width: 118px;
}

.page-local-control-hidden {
  display: none !important;
}

.panel,
.card,
.soon-card,
.hero,
.map-card,
.map-svg-wrap,
.box,
.section,
.metric,
.summary-card,
.insight-card,
.table-card,
.chart-card,
.comparison-chart,
.chart-bars,
.comparison-table-wrap,
.alliance-table-wrap,
.table-shell,
.detail,
.guardrail,
.next,
.status,
.empty-state,
.evidence,
.neighborhood-pane,
.overview-title,
.decision,
.list,
.kv div {
  border-radius: var(--pusulam-radius-card) !important;
  box-shadow: var(--pusulam-shadow-card);
}

button,
input,
select,
textarea,
.pill,
.badge,
.rank-pill,
.action-link,
.tag,
.priority,
.level-badge,
.soon-badge,
.neighborhood-button {
  border-radius: var(--pusulam-radius-control) !important;
}

table,
thead,
tbody,
tr,
th,
td,
svg,
path,
line,
polyline,
text {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.decision::after,
.metric::after,
.summary-card::after,
.insight-card::after,
.dot {
  border-radius: 50% !important;
  box-shadow: none !important;
}

/*
  Seçim analizleri alt menüsü
  Çok sayıda analiz sekmesi olduğu için ikinci satıra düşmez; tek satırda,
  ince ve yatay kaydırılabilir bir şerit olarak kalır.
*/
.analysis-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 0 0 8px !important;
  padding: 0 0 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin;
  min-height: 36px !important;
  align-items: center !important;
}

.analysis-tab {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border: 1px solid #dbe6f3 !important;
  border-radius: var(--pusulam-radius-tight) !important;
  background: #ffffff !important;
  color: #1d4ed8 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.analysis-tab.active {
  border-color: #93c5fd !important;
  background: #dbeafe !important;
  color: #1e40af !important;
  box-shadow: none !important;
}

.analysis-tab:hover {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1e40af !important;
}

.analysis-tab.disabled {
  color: #94a3b8 !important;
  background: #f8fafc !important;
  pointer-events: none !important;
}

@media (max-width: 850px) {
  .app-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-brand {
    min-width: 0;
  }

  .app-brand-logo {
    width: min(220px, 72vw);
  }

  .app-nav-links {
    justify-content: flex-start;
  }

  .app-global-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}