/* ═══════════════════════════════════════════════════════
   style.css  —  Lexical Analyzer Ana Stil Dosyası
   Tema: Koyu (One Dark benzeri), monospace ağırlıklı

   v2 Değişiklikleri:
    - .btn-paused: Analiz Et butonu duraklatma modunda farklı renk alır
    - .dfa-toolbar: DFA sekmesinin alt araç çubuğu konumlandırması
    - .pane-dfa-diagram: flex-direction column → toolbar + progress altta
═══════════════════════════════════════════════════════ */

/* ── Temel Değişkenler ─────────────────────────────── */
:root {
  --bg-0:      #1a1d23;   /* en koyu arka plan (body) */
  --bg-1:      #21252b;   /* panel arka planı */
  --bg-2:      #282c34;   /* kart / pane arka planı */
  --bg-3:      #2c313a;   /* hover yüzeyler */
  --bg-4:      #3e4451;   /* seçili / aktif yüzeyler */

  --border:    #3a3f4b;   /* genel kenarlık */
  --border-lt: #4b5263;   /* hafif kenarlık */

  --text-1:    #abb2bf;   /* ana metin */
  --text-2:    #7f848e;   /* ikincil metin */
  --text-3:    #4b5263;   /* soluk ipucu metni */

  /* Token renkleri (One Dark paleti) */
  --c-keyword:    #61afef;
  --c-ident:      #e5c07b;
  --c-number:     #d19a66;
  --c-float:      #d19a66;
  --c-operator:   #c678dd;
  --c-assign:     #56b6c2;
  --c-paren:      #98c379;
  --c-brace:      #e06c75;
  --c-semi:       #7f848e;
  --c-comma:      #7f848e;
  --c-unknown:    #ff6b6b;
  --c-eof:        #4b5263;

  /* Aksanlar */
  --accent:       #61afef;
  --accent-green: #98c379;
  --accent-red:   #e06c75;
  --accent-yellow:#e5c07b;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --font-ui:   'Segoe UI', system-ui, sans-serif;

  --transition: 0.18s ease;
}

/* ── Reset & Temel ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
}

/* scrollbar stili */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-lt); }

/* ── Header ────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 58px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  font-size: 24px;
  color: var(--accent);
  line-height: 1;
}

.app-header h1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: -0.3px;
}

.subtitle {
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--font-ui);
}

/* ── Sekme Navigasyonu ─────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 4px;
}

.tab-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn:hover {
  background: var(--bg-3);
  color: var(--text-1);
}

.tab-btn.active {
  background: var(--bg-4);
  color: var(--accent);
  border-color: var(--border-lt);
}

/* ── Ana İçerik ────────────────────────────────────── */
.app-main {
  height: calc(100vh - 58px);
  overflow: hidden;
}

/* Sekme göster/gizle */
.tab-content         { display: none; height: 100%; overflow: auto; }
.tab-content.active  { display: block; }

/* ── Pane (Panel) Bileşeni ─────────────────────────── */
.pane {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  flex-shrink: 0;
}

.pane-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.pane-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hint-text {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

/* ── Butonlar ──────────────────────────────────────── */
.btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

/* Ana eylem butonu (Analiz Et / Duraklat) */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { opacity: 0.85; }

/* Duraklatma modunda Analiz Et butonu sarı/turuncu tona döner */
.btn-primary.btn-paused {
  background: var(--accent-yellow);
  border-color: var(--accent-yellow);
  color: #1a1a00;
}
.btn-primary.btn-paused:hover { opacity: 0.85; }

/* İkincil buton (Geri / İleri adım) */
.btn-secondary {
  background: var(--bg-4);
  color: var(--text-1);
  border-color: var(--border-lt);
}
.btn-secondary:hover { background: var(--bg-3); }

/* Hayalet buton (Sıfırla vb.) */
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-3); color: var(--text-1); }

.btn-sm { font-size: 11px; padding: 4px 10px; }

/* ── SEKME 1: EDİTÖR LAYOUT ────────────────────────── */
.editor-layout {
  display: grid;
  grid-template-columns: 1fr 380px; /* sol: editör, sağ: sonuçlar */
  gap: 12px;
  padding: 12px;
  height: 100%;
  overflow: hidden;
}

/* Sol panel */
.pane-editor {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Satır numaralı editör sarmalayıcı */
.editor-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: var(--bg-1);
}

/* Satır numaraları sütunu */
.line-numbers {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-3);
  text-align: right;
  padding: 10px 8px 10px 10px;
  min-width: 40px;
  user-select: none;
  white-space: pre;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--bg-1);
}

/* Kod yazma alanı */
.source-editor {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-1);
  background: var(--bg-1);
  border: none;
  outline: none;
  resize: none;
  padding: 10px 14px;
  overflow: auto;
  tab-size: 4;
}

.source-editor::placeholder { color: var(--text-3); }

/* ── Araç Çubuğu (Editör & DFA ortak stili) ─────────
   .editor-toolbar  → Editör sekmesindeki çubuk
   .dfa-toolbar     → DFA sekmesindeki çubuk (ekstra konum kuralı)
   İkisi aynı flex düzenini paylaşır. */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* DFA araç çubuğu: pane-dfa-diagram içinde en alta yapışır */
.dfa-toolbar {
  border-top: 1px solid var(--border);
  margin-top: auto; /* SVG container flex büyüdüğünde çubuğu alta iter */
}

/* Hız ayarı */
.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-2);
}

.speed-control input[type="range"] {
  width: 100px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* İlerleme çubuğu */
.progress-bar {
  height: 3px;
  background: var(--bg-4);
  flex-shrink: 0;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.25s ease;
}

/* Sağ sonuç panelleri sütunu */
.pane-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
}

/* DFA Durum grid */
.state-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}

.state-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.state-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.state-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  word-break: break-all;
}

/* Durum badge renkleri */
.badge-blue  { color: var(--c-keyword);  border-color: #185fa5; background: #0c1e3a; }
.badge-green { color: var(--c-paren);    border-color: #3b6d11; background: #0f2008; }
.badge-mono  { color: var(--text-1);     border-color: var(--border); background: var(--bg-1); }

/* Token chip alanı */
.pane-tokens { flex-shrink: 0; }

.token-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  max-height: 130px;
  overflow-y: auto;
}

/* Token chip (renkli etiket) */
.tok-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  cursor: default;
  transition: transform 0.12s, box-shadow 0.12s;
}

.tok-chip:hover { transform: scale(1.08); }

/* Aktif (yeni üretilen) chip animasyonu */
.tok-chip.just-added {
  animation: chip-pop 0.35s ease;
}

@keyframes chip-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Token renk stilleri */
.tok-KEYWORD    { background:#0c1e3a; color:var(--c-keyword);  border-color:#185fa5; }
.tok-IDENTIFIER { background:#1a1200; color:var(--c-ident);    border-color:#6b5000; }
.tok-NUMBER     { background:#1a0e00; color:var(--c-number);   border-color:#854f0b; }
.tok-FLOAT      { background:#1a0e00; color:var(--c-float);    border-color:#854f0b; }
.tok-OPERATOR   { background:#1a0a1a; color:var(--c-operator); border-color:#534ab7; }
.tok-ASSIGN     { background:#001a1a; color:var(--c-assign);   border-color:#0f6e56; }
.tok-LPAREN,
.tok-RPAREN     { background:#0a1a0a; color:var(--c-paren);    border-color:#3b6d11; }
.tok-LBRACE,
.tok-RBRACE     { background:#1a0a0a; color:var(--c-brace);    border-color:#a32d2d; }
.tok-SEMICOLON,
.tok-COMMA      { background:#111111; color:var(--c-semi);     border-color:#333; }
.tok-UNKNOWN    { background:#1a0000; color:var(--c-unknown);  border-color:#ff3333; }
.tok-EOF        { background:#111111; color:var(--c-eof);      border-color:#333; }

/* Adım logu */
.pane-log { flex: 1; min-height: 120px; overflow: hidden; }

.step-log {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--text-2);
  overflow-y: auto;
  padding: 8px 12px;
  max-height: 200px;
}

.log-entry { padding: 1px 6px; border-radius: 3px; }
.log-entry.log-token   { color: var(--accent-green); }
.log-entry.log-step    { color: var(--text-2); }
.log-entry.log-skip    { color: var(--text-3); }
.log-entry.log-current {
  background: rgba(97, 175, 239, 0.1);
  color: var(--accent);
}

/* Sayı rozeti */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.badge-count {
  background: var(--bg-4);
  color: var(--text-2);
  font-family: var(--font-mono);
}

/* Placeholder metni */
.placeholder-text {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 8px 0;
}

/* ── SEKME 2: DFA DİYAGRAMI ────────────────────────── */
.dfa-page {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 12px;
  padding: 12px;
  height: 100%;
  overflow: hidden;
}

/* DFA diyagram paneli: SVG üstte, toolbar + progress altta */
.pane-dfa-diagram {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* SVG container: kalan alanı kaplar, toolbar için yer bırakır */
#dfa-svg-container {
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0; /* flex overflow hack */
}

#dfa-svg-container svg {
  max-width: 100%;
  height: auto;
}

/* Geçiş tablosu */
.pane-dfa-table { overflow: hidden; }

.table-wrapper {
  overflow: auto;
  padding: 8px;
  flex: 1;
}

/* Ortak tablo stili */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono);
}

th {
  background: var(--bg-1);
  color: var(--text-2);
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  vertical-align: middle;
}

tr:hover td { background: var(--bg-3); }

/* Geçiş tablosunda aktif satır vurgusu */
tr.row-active td {
  background: rgba(97, 175, 239, 0.08);
  color: var(--accent);
}

/* Durum hücresi rengi */
.cell-state     { color: var(--c-keyword); font-weight: 600; }
.cell-arrow     { color: var(--c-operator); text-align: center; }
.cell-next      { color: var(--accent-green); }
.cell-none      { color: var(--text-3); font-style: italic; }

/* ── SEKME 3: İSTATİSTİKLER ────────────────────────── */
.stats-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
  height: 100%;
}

/* Metrik kartları */
.stats-cards {
  grid-column: 1 / -1;   
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  flex-shrink: 0;
}

.stat-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}

.stat-error { color: var(--accent-red); }

/* Bar grafiği */
.pane-chart { flex-shrink: 0; }

.bar-chart {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tek bar satırı */
.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 50px;
  align-items: center;
  gap: 10px;
}

.bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
}

.bar-track {
  background: var(--bg-4);
  border-radius: 3px;
  height: 18px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.bar-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
}

/* Detay tablosu */
.pane-stats-table { flex: 1; overflow: hidden; }

.token-table { font-size: 12px; }

/* Token tür sütunundaki renkli rozet */
.type-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
  display: inline-block;
}

/* ── Toast Bildirimi ────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bg-4);
  color: var(--text-1);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Duyarlı Tasarım ────────────────────────────────── */
@media (max-width: 900px) {
  .editor-layout   { grid-template-columns: 1fr; }
  .pane-results    { max-height: 400px; }
  .stats-cards     { grid-template-columns: repeat(2, 1fr); }
  .dfa-page        { grid-template-columns: 1fr; }
}