/* Şöyle Yapsak — Öneri Yönetimi teması.
   Eski canlı sistem (soyleyapsak.com, Metronic v7 "dashkit") ile HİZALI:
   sol beyaz sidebar + bal-peteği SARI üst banner + sarı/turuncu/yeşil/lacivert palet,
   beyaz kartlar, açık gri zemin. Referans: canlı IndexTuborg/Suggetion ekranları.
   NOT: mevcut tb-* sınıf adları korundu (churn yok); yeni yapı sınıfları eklendi. */

:root {
  /* Marka paleti (canlıdan birebir) */
  --tb-yellow: #fec526;            /* PRIMARY — Tuborg sarısı (banner, Önerilerim) */
  --tb-yellow-strong: #e6ad00;
  --tb-yellow-soft: #fff6d6;
  --tb-orange: #ed8b00;            /* Onay Bekleyenler / accent */
  --tb-green-d: #1a5632;           /* Onaylananlar (koyu yeşil) */
  --tb-navy: #303956;              /* butonlar (KAYDET), koyu başlık */
  --tb-navy-strong: #232a40;
  --tb-red: #e2145c;               /* İptal / red */
  --tb-teal: #17a2b8;              /* İşlemler dropdown */
  --tb-blue: #2b6cb0;              /* sayfalama, aktif sekme çizgisi */

  /* Nötr */
  --tb-bg: #f6f7f9;                /* içerik zemini */
  --tb-card: #ffffff;
  --tb-fg: #2b2b3b;
  --tb-muted: #7a7f8c;
  --tb-muted-bg: #f3f4f6;
  --tb-line: #e6e8ec;

  /* Durum semantiği */
  --tb-amber-bg: #fff3cd; --tb-amber-fg: #8a6d00;
  --tb-emerald-bg: #d8f3e3; --tb-emerald-fg: #1a5632;
  --tb-sky-bg: #e0f0ff; --tb-sky-fg: #1c5aa8;
  --tb-rose-bg: #fde2ec; --tb-rose-fg: #c01050;
  --tb-violet-bg: #ede9fe; --tb-violet-fg: #6d28d9;

  --tb-radius: 10px;
  --tb-radius-sm: 8px;
  --tb-shadow: 0 1px 3px rgba(20,24,40,.07);
  --tb-shadow-lg: 0 8px 24px -10px rgba(20,24,40,.18);
  --tb-sidebar-w: 240px;

  /* Geriye uyum: eski değişken adları */
  --tb-primary: var(--tb-yellow);
  --tb-primary-strong: var(--tb-yellow-strong);
  --tb-primary-soft: var(--tb-yellow-soft);
  --tb-green: var(--tb-yellow);
  --tb-green-dark: var(--tb-yellow-strong);
  --tb-green-soft: var(--tb-yellow-soft);
  --tb-gold: var(--tb-orange);
  --tb-ink: var(--tb-fg);
  --tb-ring: var(--tb-yellow-strong);
}

* { box-sizing: border-box; }
body { background: var(--tb-bg); color: var(--tb-fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

/* =================== UYGULAMA İSKELETİ (sidebar + banner) =================== */
.tb-app { display: flex; min-height: 100vh; }
.tb-sidebar {
  width: var(--tb-sidebar-w); flex: 0 0 var(--tb-sidebar-w);
  background: var(--tb-card); border-right: 1px solid var(--tb-line);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 20;
}
.tb-sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: 1.1rem 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.tb-sidebar-nav { padding: .5rem .6rem; display: flex; flex-direction: column; gap: .15rem; }
.tb-side-link { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: var(--tb-radius-sm); color: var(--tb-muted); font-weight: 600; font-size: .92rem; cursor: pointer; transition: background .15s, color .15s; }
.tb-side-link:hover { background: var(--tb-muted-bg); color: var(--tb-fg); }
.tb-side-link.active { background: var(--tb-yellow-soft); color: var(--tb-navy); }
.tb-side-link.active .tb-side-ic { color: var(--tb-orange); }
.tb-side-ic { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; color: var(--tb-muted); }
.tb-side-ic svg { width: 100%; height: 100%; }

.tb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Bal-peteği sarı banner */
.tb-banner {
  background: var(--tb-yellow);
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.06' stroke-width='2'%3E%3Cpath d='M28 66L0 50V17L28 1l28 16v33L28 66z'/%3E%3Cpath d='M28 100L0 84V50l28-16 28 16v34L28 100z'/%3E%3C/g%3E%3C/svg%3E");
  color: #1a1400; border-radius: 0 0 14px 14px;
  margin: 0 0 1.25rem; padding: 0; box-shadow: var(--tb-shadow);
  position: sticky; top: 0; z-index: 15;
}
.tb-banner-inner { display: flex; align-items: center; gap: 1rem; height: 62px; padding: 0 1.5rem; }
.tb-banner-title { font-size: 1.15rem; font-weight: 800; }
.tb-banner-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.tb-banner-ic { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; color: #1a1400; cursor: pointer; border-radius: 8px; }
.tb-banner-ic:hover { background: rgba(0,0,0,.06); }
.tb-user-pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--tb-navy); color: #fff; padding: .4rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.tb-content { padding: 0 1.5rem 2rem; }

/* Eski .tb-header (login/legacy) — sarı bant olarak korunur */
.tb-header { background: var(--tb-yellow); color: #1a1400; border-bottom: 1px solid var(--tb-yellow-strong); position: sticky; top: 0; z-index: 30; }
.tb-header .tb-logo { color: #1a1400; }
.tb-logo { font-weight: 800; letter-spacing: -.01em; }
.tb-logo .dot { color: var(--tb-orange); }
.tb-header .tb-tab { color: rgba(26,20,0,.6); }
.tb-header .tb-tab:hover { color: #1a1400; }
.tb-header .tb-tab.active { color: #1a1400; border-color: #1a1400; }

/* =================== KARTLAR / BİLEŞENLER =================== */
.tb-card { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-radius); box-shadow: var(--tb-shadow); }
a.tb-card, .tb-card-hover { transition: box-shadow .2s, border-color .2s; }
a.tb-card:hover, .tb-card-hover:hover { box-shadow: var(--tb-shadow-lg); border-color: color-mix(in srgb, var(--tb-yellow) 45%, var(--tb-line)); }
.tb-card-title { font-weight: 700; color: var(--tb-navy); }

/* Butonlar */
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 700; border-radius: var(--tb-radius-sm); padding: .55rem 1.1rem; cursor: pointer; border: 1px solid transparent; transition: .15s; font-size: .9rem; line-height: 1.1; }
.tb-btn:disabled { opacity: .5; cursor: not-allowed; }
.tb-btn-primary { background: var(--tb-navy); color: #fff; border-color: var(--tb-navy); }   /* KAYDET/ana eylem = lacivert */
.tb-btn-primary:hover:not(:disabled) { background: var(--tb-navy-strong); }
.tb-btn-yellow { background: var(--tb-yellow); color: #1a1400; border-color: var(--tb-yellow-strong); }
.tb-btn-yellow:hover:not(:disabled) { background: var(--tb-yellow-strong); }
.tb-btn-gold { background: var(--tb-orange); color: #fff; }
.tb-btn-gold:hover:not(:disabled) { filter: brightness(.96); }
.tb-btn-ghost { background: var(--tb-card); border-color: var(--tb-line); color: var(--tb-fg); }
.tb-btn-ghost:hover:not(:disabled) { background: var(--tb-muted-bg); }
.tb-btn-danger { background: var(--tb-red); border-color: var(--tb-red); color: #fff; }
.tb-btn-danger:hover:not(:disabled) { filter: brightness(.95); }
.tb-btn-teal { background: var(--tb-teal); color: #fff; border-color: var(--tb-teal); }

/* Girişler */
.tb-input, .tb-select, .tb-textarea { width: 100%; border: 1px solid var(--tb-line); border-radius: var(--tb-radius-sm); padding: .6rem .75rem; font-size: .95rem; background: var(--tb-card); color: var(--tb-fg); transition: border-color .15s, box-shadow .15s; }
.tb-input::placeholder, .tb-textarea::placeholder { color: color-mix(in srgb, var(--tb-muted) 85%, transparent); }
.tb-input:focus, .tb-select:focus, .tb-textarea:focus { outline: none; border-color: var(--tb-yellow-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-yellow) 40%, transparent); }
.tb-label { font-size: .84rem; font-weight: 700; color: var(--tb-fg); margin-bottom: .35rem; display: block; }
.tb-label .req { color: var(--tb-red); }

/* Sekmeler (legacy yatay) */
.tb-tab { padding: .8rem .2rem; font-weight: 600; color: var(--tb-muted); border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; }
.tb-tab:hover { color: var(--tb-fg); }
.tb-tab.active { color: var(--tb-navy); border-color: var(--tb-blue); }

/* 3 renkli sekme-kartı (Önerilerim / Onay Bekleyenler / Onaylananlar) */
.tb-tabcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: var(--tb-radius) var(--tb-radius) 0 0; overflow: hidden; }
.tb-tabcard { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.25rem; color: #fff; cursor: pointer; border-bottom: 3px solid transparent; }
.tb-tabcard .tb-tc-ic { width: 2rem; height: 2rem; flex: 0 0 auto; }
.tb-tabcard .tb-tc-ic svg { width: 100%; height: 100%; }
.tb-tabcard-title { font-weight: 800; font-size: 1.02rem; line-height: 1.1; }
.tb-tabcard-sub { font-size: .76rem; opacity: .85; }
.tb-tabcard.tc-yellow { background: var(--tb-yellow); color: #1a1400; }
.tb-tabcard.tc-orange { background: var(--tb-orange); }
.tb-tabcard.tc-green  { background: var(--tb-green-d); }
.tb-tabcard.active { border-bottom-color: var(--tb-blue); }
.tb-tabcard:not(.active) { filter: saturate(.9) brightness(.98); }

/* Tablo */
.tb-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tb-table thead th { text-align: left; padding: .75rem 1rem; color: var(--tb-muted); font-weight: 700; border-bottom: 1px solid var(--tb-line); white-space: nowrap; }
.tb-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--tb-line); }
.tb-table tbody tr:last-child td { border-bottom: none; }
.tb-table tbody tr:hover { background: var(--tb-muted-bg); }

/* Durum rozetleri */
.tb-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .25rem .625rem; border-radius: 999px; white-space: nowrap; }
.tb-badge[data-status="1"], .tb-badge[data-status="3"], .tb-badge[data-status="5"], .tb-badge[data-status="9"] { background: var(--tb-amber-bg); color: var(--tb-amber-fg); }
.tb-badge[data-status="7"] { background: var(--tb-sky-bg); color: var(--tb-sky-fg); }
.tb-badge[data-status="8"] { background: var(--tb-emerald-bg); color: var(--tb-emerald-fg); }
.tb-badge[data-status="2"], .tb-badge[data-status="4"], .tb-badge[data-status="6"], .tb-badge[data-status="10"] { background: var(--tb-rose-bg); color: var(--tb-rose-fg); }

/* İstatistik listesi kartı ("Bugüne Kadar") */
.tb-statlist { overflow: hidden; }
.tb-statlist-head { background: var(--tb-navy); color: var(--tb-yellow); text-align: center; font-weight: 800; padding: .8rem; }
.tb-statrow { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-top: 1px solid var(--tb-line); }
.tb-statrow:first-of-type { border-top: none; }
.tb-statrow-val { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--tb-navy); }
.tb-statrow-lbl { font-size: .74rem; color: var(--tb-muted); margin-top: .2rem; }
.tb-statrow-ic { color: var(--tb-muted); width: 1.4rem; height: 1.4rem; }

/* İstatistik kutu kartı (opsiyonel yatay) */
.tb-stat { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; }
.tb-stat-icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.tb-stat-icon svg { width: 1.25rem; height: 1.25rem; }
.tb-stat-val { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.tb-stat-lbl { font-size: .75rem; color: var(--tb-muted); margin-top: .3rem; }
.tb-accent-sky { background: var(--tb-sky-bg); color: var(--tb-sky-fg); }
.tb-accent-amber { background: var(--tb-amber-bg); color: var(--tb-amber-fg); }
.tb-accent-emerald { background: var(--tb-emerald-bg); color: var(--tb-emerald-fg); }
.tb-accent-violet { background: var(--tb-violet-bg); color: var(--tb-violet-fg); }
.tb-accent-primary { background: var(--tb-yellow-soft); color: var(--tb-yellow-strong); }

/* Alan kutucuğu — detay */
.tb-field { border: 1px solid var(--tb-line); background: color-mix(in srgb, var(--tb-muted-bg) 45%, transparent); border-radius: var(--tb-radius-sm); padding: .85rem; }
.tb-field-lbl { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: var(--tb-muted); margin-bottom: .35rem; }
.tb-field-lbl svg { width: .9rem; height: .9rem; }

/* Yılın teması / öneri satırları (banner-listeler) */
.tb-listrow { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-top: 1px solid var(--tb-line); font-weight: 600; color: var(--tb-navy); cursor: pointer; transition: background .15s; }
.tb-listrow:first-child { border-top: none; }
.tb-listrow:hover { background: var(--tb-muted-bg); }

/* Kısayol satır-kartı */
.tb-shortcut { display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; border-radius: var(--tb-radius-sm); transition: background .15s; }
.tb-shortcut:hover { background: var(--tb-muted-bg); }
.tb-shortcut:hover .tb-sc-arrow { transform: translateX(2px); color: var(--tb-orange); }
.tb-shortcut .tb-sc-ic { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.tb-shortcut .tb-sc-ic svg { width: 1.1rem; height: 1.1rem; }
.tb-sc-arrow { color: var(--tb-muted); transition: transform .15s, color .15s; }

.tb-icon-box { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tb-radius-sm); background: var(--tb-yellow-soft); color: var(--tb-yellow-strong); }

/* Zaman çizelgesi */
.tb-timeline { position: relative; padding-left: 1.4rem; border-left: 2px solid var(--tb-line); margin-left: .3rem; }
.tb-tl-item { position: relative; padding-bottom: 1rem; }
.tb-tl-item:last-child { padding-bottom: 0; }
.tb-tl-item::before { content: ""; position: absolute; left: -1.72rem; top: .3rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--tb-muted); box-shadow: 0 0 0 4px var(--tb-card); }
.tb-tl-item:last-child::before { background: var(--tb-orange); }

.tb-ic { width: .9rem !important; height: .9rem !important; vertical-align: -.15em; }
.tb-muted { color: var(--tb-muted); }
.tb-chip { display: inline-flex; align-items: center; font-size: .72rem; background: var(--tb-muted-bg); color: var(--tb-muted); padding: .18rem .55rem; border-radius: 999px; font-weight: 700; }
hr, .tb-divider { border: none; border-top: 1px solid var(--tb-line); }

/* Bölüm başlığı (ÖNERİLER / YILIN TEMASI gibi) */
.tb-section-head { font-size: .8rem; font-weight: 800; letter-spacing: .04em; color: var(--tb-muted); text-transform: uppercase; padding-bottom: .5rem; border-bottom: 1px solid var(--tb-line); margin-bottom: .75rem; }

/* Toast */
#tb-toast { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 60; }
.tb-toast { background: var(--tb-navy); color: #fff; padding: .7rem 1rem; border-radius: var(--tb-radius-sm); box-shadow: var(--tb-shadow-lg); font-size: .9rem; max-width: 340px; }
.tb-toast.err { background: var(--tb-red); }
.tb-toast.ok { background: var(--tb-green-d); }

/* Responsive: sidebar gizle (mobil) */
@media (max-width: 860px) {
  .tb-sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--tb-shadow-lg); }
  .tb-sidebar.open { transform: translateX(0); }
  .tb-tabcards { grid-template-columns: 1fr; }
}