/*
 * GlomaxGPT — Theme Sync CSS v1
 * ============================================================
 * Tüm sayfalar için Dark/Light tema senkronizasyonu.
 * Mevcut token sistemi (glomax-theme-tokens.css) üzerine inşa edilir.
 * Sadece renkler — layout, spacing, typography değişmez.
 * En son yüklenir; diğer CSS dosyalarındaki hardcoded renkleri override eder.
 * ============================================================
 */

/* ══════════════════════════════════════════════════════════════
   1. SIDEBAR — Arka plan, nav öğeleri, hover/active durumları
══════════════════════════════════════════════════════════════ */

/* Sidebar arka planı */
#sidebar,
aside#sidebar,
.sidebar,
aside.sidebar,
nav.sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  color: var(--text-primary) !important;
}

/* Sidebar header / logo alanı */
.sidebar-header,
.sb-header,
.sidebar-logo-wrap {
  background: var(--bg-sidebar) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
  color: var(--text-primary) !important;
}

/* Sidebar nav öğeleri */
.sidebar-nav-item,
.sb-nav-item,
.sidebar-link {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

.sidebar-nav-item:hover,
.sb-nav-item:hover,
.sidebar-link:hover {
  background: var(--sidebar-hover) !important;
  color: var(--text-primary) !important;
}

.sidebar-nav-item.active,
.sb-nav-item.active,
.sidebar-link.active {
  background: var(--sidebar-active) !important;
  color: var(--text-primary) !important;
}

/* Sidebar nav ikon renkleri */
.sidebar-nav-item svg,
.sb-nav-item svg {
  color: var(--icon-default) !important;
}

.sidebar-nav-item:hover svg,
.sidebar-nav-item.active svg,
.sb-nav-item:hover svg,
.sb-nav-item.active svg {
  color: var(--icon-active) !important;
}

/* Sidebar section başlıkları */
.sidebar-section-label,
.sb-section-label,
.conv-list-header span {
  color: var(--text-muted) !important;
}

/* Sidebar divider */
.sidebar-divider,
.sb-divider {
  background: var(--sidebar-border) !important;
  border-color: var(--sidebar-border) !important;
}

/* Sidebar footer / kullanıcı alanı */
.sidebar-footer,
.sb-footer,
.sidebar-user-area,
.sb-user-area {
  background: var(--bg-sidebar) !important;
  border-top: 1px solid var(--sidebar-border) !important;
}

/* Sidebar kullanıcı adı ve plan */
.user-name {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

.user-plan,
.user-email {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* Sidebar kullanıcı avatar */
.user-avatar,
.sb-user-avatar {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* Sidebar kullanıcı menüsü */
.user-menu,
.sb-user-menu {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-md) !important;
}

.user-menu-item {
  color: var(--text-secondary) !important;
}

.user-menu-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--text-primary) !important;
}

.user-menu-item.user-menu-danger {
  color: var(--color-error) !important;
}

.user-menu-item.user-menu-danger:hover {
  background: var(--color-error-bg) !important;
  color: var(--color-error) !important;
}

.user-menu-divider {
  background: var(--border-default) !important;
}

/* Sidebar arama kutusu */
.sb-search-box,
.sidebar-search {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.sb-search-box:focus-within,
.sidebar-search:focus-within {
  border-color: var(--accent) !important;
}

.sb-search-box input,
.sidebar-search input {
  color: var(--text-primary) !important;
  background: transparent !important;
}

.sb-search-box input::placeholder,
.sidebar-search input::placeholder {
  color: var(--text-muted) !important;
}

/* KonuÅŸma listesi */
.conv-item {
  color: var(--text-secondary) !important;
}

.conv-item:hover {
  background: var(--sidebar-hover) !important;
}

.conv-item.active {
  background: var(--sidebar-active) !important;
}

.conv-item-text {
  color: var(--text-secondary) !important;
}

.conv-item.active .conv-item-text {
  color: var(--text-primary) !important;
}

.conv-item-date {
  color: var(--text-muted) !important;
}

/* Konuşma aksiyon butonları */
.conv-action-btn {
  color: var(--text-muted) !important;
  background: none !important;
}

.conv-action-btn:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* Sidebar upgrade / plan butonları */
.sb-upgrade-btn {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.sb-upgrade-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* Sidebar kullanım çubuğu */
.sb-usage-bar {
  background: var(--bg-elevated) !important;
}

.sb-usage-label,
.sb-usage-text {
  color: var(--text-muted) !important;
}

/* Sidebar "daha fazla" menüsü */
.sb-more-menu {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-md) !important;
}

.sb-more-item {
  color: var(--text-secondary) !important;
}

.sb-more-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.sb-more-item.active {
  background: var(--bg-active) !important;
  color: var(--text-primary) !important;
}

.sb-more-divider {
  background: var(--border-default) !important;
}

/* ══════════════════════════════════════════════════════════════
   2. TOPBAR / INNER-TOPBAR
══════════════════════════════════════════════════════════════ */

/* Topbar arka planı */
.topbar,
.inner-topbar,
header.topbar,
#topbar {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

/* Topbar butonları */
.btn-icon {
  color: var(--text-secondary) !important;
}

.btn-icon:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Topbar site adı */
.tb-site-name {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Topbar logo */
.tb-site-logo {
  color: var(--text-primary) !important;
}

.tb-site-logo:hover {
  background: var(--bg-hover) !important;
}

/* Topbar sayfa başlığı */
.topbar-title,
.tb-page-title,
.inner-topbar-title {
  color: var(--text-primary) !important;
}

/* Topbar giriş/kayıt butonları */
.btn-topbar-login {
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
  background: var(--bg-elevated) !important;
}

.btn-topbar-login:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.btn-topbar-register {
  background: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  border-color: transparent !important;
}

.btn-topbar-register:hover {
  background: var(--primary-hover) !important;
}

/* Topbar tema toggle */
.btn-theme-toggle {
  color: var(--text-secondary) !important;
}

.btn-theme-toggle:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Topbar bildirim butonu */
.btn-notif,
.topbar-notif-btn {
  color: var(--text-secondary) !important;
}

.btn-notif:hover,
.topbar-notif-btn:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Topbar tab'ları */
.tb-tab {
  color: var(--text-muted) !important;
  border-bottom-color: transparent !important;
}

.tb-tab:hover {
  color: var(--text-primary) !important;
}

.tb-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   3. ANA İÇERİK ALANI — Arka plan ve genel metin
══════════════════════════════════════════════════════════════ */

/* Ana içerik arka planı */
.main-content,
#main-content,
.page-main,
main.page-main {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
}

/* Sayfa başlıkları */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

/* Genel metin */
p, span, li, td, th, label {
  color: inherit;
}

/* Muted / secondary metin */
.text-muted,
.text-secondary,
.text-dim {
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. KARTLAR / PANELLER
══════════════════════════════════════════════════════════════ */

/* Genel kart */
.card,
.panel,
.box,
.widget {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.card:hover,
.panel:hover {
  border-color: var(--border-strong) !important;
}

/* Kart başlığı */
.card-header,
.panel-header {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* Kart footer */
.card-footer,
.panel-footer {
  background: var(--bg-elevated) !important;
  border-top: 1px solid var(--border-default) !important;
}

/* Kart içi metin */
.card-title,
.panel-title {
  color: var(--text-primary) !important;
}

.card-desc,
.card-subtitle,
.panel-desc {
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   5. FORM ELEMENTLERİ — Input, select, textarea
══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea,
select {
  background: #ffffff00 !important;
  border: 0px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Select dropdown */
select option {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. BUTONLAR
══════════════════════════════════════════════════════════════ */

/* Primary buton */
.btn-primary,
.btn-accent {
  background: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  border-color: transparent !important;
}

.btn-primary:hover,
.btn-accent:hover {
  background: var(--primary-hover) !important;
}

/* Secondary buton */
.btn-secondary,
.btn-outline {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* Ghost buton */
.btn-ghost {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
}

.btn-ghost:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Danger buton */
.btn-danger {
  background: var(--color-error) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-danger:hover {
  opacity: 0.88 !important;
}

/* Disabled durumu */
button:disabled,
.btn:disabled,
input:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════════════
   7. BADGE / TAB / CHIP ELEMENTLERÄ°
══════════════════════════════════════════════════════════════ */

/* Badge */
.badge,
.tag,
.chip {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

/* Tab */
.tab,
.tab-item {
  color: var(--text-muted) !important;
  border-bottom-color: transparent !important;
}

.tab:hover,
.tab-item:hover {
  color: var(--text-primary) !important;
}

.tab.active,
.tab-item.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   8. MODAL / DROPDOWN / TOOLTIP
══════════════════════════════════════════════════════════════ */

/* Modal */
.modal,
.dialog,
.modal-content {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-header,
.dialog-header {
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.modal-footer,
.dialog-footer {
  border-top: 1px solid var(--border-default) !important;
}

/* Modal overlay */
.modal-overlay,
.modal-backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Dropdown */
.dropdown-menu,
.dropdown-content,
.popover {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text-primary) !important;
}

.dropdown-item {
  color: var(--text-secondary) !important;
}

.dropdown-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider {
  background: var(--border-default) !important;
}

/* Tooltip */
.tooltip,
[data-tooltip]::after {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════════
   9. TABLO
══════════════════════════════════════════════════════════════ */

table {
  color: var(--text-primary) !important;
}

thead tr,
th {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-default) !important;
}

tbody tr {
  border-bottom: 1px solid var(--border-subtle) !important;
}

tbody tr:hover {
  background: var(--bg-hover) !important;
}

td {
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   10. KOD BLOKLARI
══════════════════════════════════════════════════════════════ */

pre,
code {
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  color: var(--code-text) !important;
}

pre code {
  background: transparent !important;
  border: none !important;
}

.code-header,
.code-block-header {
  background: var(--code-header-bg) !important;
  border-bottom: 1px solid var(--code-border) !important;
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   11. SCROLLBAR
══════════════════════════════════════════════════════════════ */

* {
  scrollbar-color: var(--border-default) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ══════════════════════════════════════════════════════════════
   12. SIDEBAR ÖZEL — Hardcoded renk override'ları
══════════════════════════════════════════════════════════════ */

/* sidebar.php'deki hardcoded gradient override */
.sidebar-logo-text,
.sidebar-brand-text {
  background: var(--accent-grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Sidebar'daki "daha fazla" menü — hardcoded #1A1A1A override */
.sb-more-menu {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
}

/* Light temada sidebar overlay */
[data-theme="light"] .sidebar-overlay,
[data-theme="light"] #sidebar-overlay {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Sidebar konuÅŸma silme butonu */
.conv-action-btn.danger:hover {
  color: var(--color-error) !important;
}

/* Sidebar delete confirm */
.conv-delete-confirm {
  background: var(--color-error-bg) !important;
  border: 1px solid rgba(var(--error-rgb), 0.18) !important;
  color: var(--color-error) !important;
}

/* ══════════════════════════════════════════════════════════════
   13. INNER-TOPBAR ÖZEL — Hardcoded renk override'ları
══════════════════════════════════════════════════════════════ */

/* btn-topbar-login hardcoded gradient override */
.btn-topbar-login {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

[data-theme="light"] .btn-topbar-login {
  background: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

/* Topbar hamburger */
.sidebar-toggle-btn {
  color: var(--text-secondary) !important;
}

.sidebar-toggle-btn:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   14. SAYFA ÖZEL — Legal, Account, Code-gen vb.
══════════════════════════════════════════════════════════════ */

/* Legal sayfalar (cookies, terms, privacy) */
.legal-hero,
.page-hero {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
}

.legal-hero-icon,
.page-hero-icon {
  background: var(--accent-grad) !important;
}

.legal-content,
.page-content {
  color: var(--text-primary) !important;
}

.legal-content h2,
.legal-content h3,
.page-content h2,
.page-content h3 {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.legal-content p,
.legal-content li,
.page-content p,
.page-content li {
  color: var(--text-secondary) !important;
}

/* Account sayfası */
.account-card,
.profile-card,
.settings-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.account-card-header,
.settings-card-header {
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   15. LIGHT TEMA ÖZEL OVERRIDE'LAR
   (Dark temada zaten doÄŸru olan ama light'ta bozulan yerler)
══════════════════════════════════════════════════════════════ */

[data-theme="light"] .topbar,
[data-theme="light"] .inner-topbar,
[data-theme="light"] header.topbar,
[data-theme="light"] #topbar {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border-default) !important;
}

[data-theme="light"] #sidebar,
[data-theme="light"] aside#sidebar,
[data-theme="light"] .sidebar,
[data-theme="light"] aside.sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

[data-theme="light"] .main-content,
[data-theme="light"] #main-content,
[data-theme="light"] .page-main {
  background: var(--bg-main) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .box {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}

[data-theme="light"] pre,
[data-theme="light"] code {
  background: var(--code-bg) !important;
  color: var(--code-text) !important;
  border-color: var(--code-border) !important;
}

/* Light temada sidebar logo gradient */
[data-theme="light"] .sidebar-logo-text,
[data-theme="light"] .sidebar-brand-text {
  background: var(--accent-grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Light temada topbar buton renkleri */
[data-theme="light"] .btn-icon {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .btn-icon:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   16. DARK TEMA ÖZEL OVERRIDE'LAR
   (Light temada doÄŸru olan ama dark'ta bozulan yerler)
══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .topbar,
[data-theme="dark"] .inner-topbar,
[data-theme="dark"] header.topbar {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .panel {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}

/* ══════════════════════════════════════════════════════════════
   17. SIDEBAR — GUEST CTA ALANI
══════════════════════════════════════════════════════════════ */

.sidebar-guest-cta {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.sidebar-guest-cta strong {
  color: var(--text-primary) !important;
}

.sidebar-guest-cta .btn-sidebar-register {
  background: var(--text-primary) !important;
  color: var(--bg-main) !important;
  border-color: transparent !important;
}

.sidebar-guest-cta .btn-sidebar-register:hover {
  opacity: 0.88 !important;
}

/* ══════════════════════════════════════════════════════════════
   18. TOAST / NOTIFICATION
══════════════════════════════════════════════════════════════ */

.toast,
.notification,
.alert {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.toast-success,
.alert-success {
  background: var(--color-success-bg) !important;
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
}

.toast-error,
.alert-error,
.alert-danger {
  background: var(--color-error-bg) !important;
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
}

.toast-warning,
.alert-warning {
  background: var(--color-warning-bg) !important;
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
}

.toast-info,
.alert-info {
  background: var(--color-info-bg) !important;
  border-color: var(--color-info) !important;
  color: var(--color-info) !important;
}

/* ══════════════════════════════════════════════════════════════
   19. SIDEBAR — LOGO GRADIENT (dark/light uyumlu)
══════════════════════════════════════════════════════════════ */

/* Sidebar'daki hardcoded gradient (#444654 → #343541 → #202123) override */
.sidebar-logo-gradient,
.sb-logo-gradient {
  background: var(--accent-grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ══════════════════════════════════════════════════════════════
   20. SIDEBAR — KULLANIM ÇUBUĞU RENK OVERRIDE
══════════════════════════════════════════════════════════════ */

/* Kullanım çubuğu dolgu rengi — token'a bağla */
.sb-usage-bar-fill {
  background: var(--accent) !important;
}

/* %90+ dolulukta kırmızı, %70+ sarı — token'larla */
.sb-usage-bar-fill.warn {
  background: var(--color-warning) !important;
}

.sb-usage-bar-fill.danger {
  background: var(--color-error) !important;
}

/* ══════════════════════════════════════════════════════════════
   21. SIDEBAR — PLAN BADGE'LERİ
══════════════════════════════════════════════════════════════ */

/* Warning plan badge (hardcoded rgba(245,158,11) override) */
.sb-plan-badge-warn {
  background: var(--color-warning-bg) !important;
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
}

/* Error plan badge (hardcoded rgba(239,68,68) override) */
.sb-plan-badge-danger {
  background: var(--color-error-bg) !important;
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
}

/* ══════════════════════════════════════════════════════════════
   22. GENEL — Divider / Separator
══════════════════════════════════════════════════════════════ */

hr,
.divider,
.separator {
  border-color: var(--border-subtle) !important;
  background: var(--border-subtle) !important;
}

/* ══════════════════════════════════════════════════════════════
   23. FOCUS RING — Erişilebilirlik
══════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   24. SIDEBAR — MOBILE HEADER
══════════════════════════════════════════════════════════════ */

.cg-mobile-header,
.mobile-header,
.mobile-page-header {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

.mobile-header-btn,
.mobile-hamburger {
  color: var(--text-secondary) !important;
  background: none !important;
  border: none !important;
}

.mobile-header-btn:hover,
.mobile-hamburger:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   25. CODE-GEN SAYFASI — Tema uyumu
══════════════════════════════════════════════════════════════ */

/* code-gen shell arka planı */
.cg-shell {
  background: var(--bg-main) !important;
}

/* code-gen mesaj alanı */
.cg-msg-user {
  background: var(--bg-main) !important;
}

.cg-msg-ai {
  background: var(--bg-surface) !important;
}

.cg-msg {
  border-bottom-color: var(--border-subtle) !important;
}

/* code-gen input bar */
.cg-input-bar {
  background: var(--bg-main) !important;
  border-top-color: var(--border-default) !important;
}

.cg-input-container {
  background: var(--bg-input) !important;
  border-color: var(--border-default) !important;
}

.cg-input-container:focus-within {
  border-color: inherit !important;
  box-shadow: none !important;
}

.cg-textarea {
  color: var(--text-primary) !important;
}

.cg-textarea::placeholder {
  color: var(--text-muted) !important;
}

/* code-gen mode pill'leri */
.cg-mode-pill {
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.cg-mode-pill:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.cg-mode-pill.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* code-gen dil seçici */
.cg-lang-pill {
  background: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* code-gen chip'ler */
.cg-chip {
  background: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.cg-chip:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* code-gen öneri kartları */
.cg-suggest-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}

.cg-suggest-card:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--accent) !important;
}

.cg-suggest-card-icon {
  background: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--accent) !important;
}

/* code-gen dil badge'leri */
.cg-lang-badge {
  background: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.cg-lang-badge:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.cg-lang-badge.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* code-gen mesaj aksiyon butonları */
.cg-msg-act-btn {
  background: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.cg-msg-act-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* code-gen mesaj avatar */
.cg-msg-avatar.user-av {
  background: var(--accent-grad) !important;
}

.cg-msg-avatar.ai-av {
  background: linear-gradient(135deg, var(--color-success), var(--color-info)) !important;
}

/* code-gen mesaj meta */
.cg-msg-name {
  color: var(--text-secondary) !important;
}

.cg-msg-meta {
  color: var(--text-muted) !important;
}

/* code-gen mesaj body */
.cg-msg-body {
  color: var(--text-primary) !important;
}

.cg-msg-body pre {
  background: var(--code-bg) !important;
  border-color: var(--code-border) !important;
  color: var(--code-text) !important;
}

.cg-msg-body code {
  background: var(--bg-elevated) !important;
  color: var(--code-text) !important;
}

/* code-gen gönder butonu */
.cg-send-btn {
  background: var(--accent) !important;
}

.cg-send-btn:hover {
  opacity: 0.88 !important;
}

.cg-send-btn:disabled {
  opacity: 0.35 !important;
}

/* code-gen quick butonlar */
.cg-quick-btn {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.cg-quick-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ══════════════════════════════════════════════════════════════
   26. LEGAL SAYFALAR — Tema uyumu
══════════════════════════════════════════════════════════════ */

.legal-section {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}

.legal-section h2,
.legal-section h3 {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
}

.legal-section p,
.legal-section li {
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   27. ACCOUNT / SETTINGS SAYFASI — Tema uyumu
══════════════════════════════════════════════════════════════ */

.settings-section,
.account-section {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}

.settings-label,
.account-label {
  color: var(--text-secondary) !important;
}

.settings-value,
.account-value {
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   28. PLANS / PRICING SAYFASI — Tema uyumu
══════════════════════════════════════════════════════════════ */

.plan-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.plan-card.featured,
.plan-card.popular {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

.plan-price {
  color: var(--text-primary) !important;
}

.plan-feature {
  color: var(--text-secondary) !important;
}

.plan-feature-check {
  color: var(--color-success) !important;
}

/* ══════════════════════════════════════════════════════════════
   29. CHANGELOG / ANNOUNCEMENTS — Tema uyumu
══════════════════════════════════════════════════════════════ */

.changelog-item,
.announcement-item {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}

.changelog-date,
.announcement-date {
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   30. GENEL — Tema geçişi animasyonu
══════════════════════════════════════════════════════════════ */

/* Tema değişiminde yumuşak geçiş — sadece renkler için */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* Animasyonlu elementlerde geçişi devre dışı bırak */
.space-orb,
.streaming-cursor,
[class*="animate-"],
[class*="animation-"] {
  transition: none !important;
}

/* ══════════════════════════════════════════════════════════════
   31. MESAJ BALONLARI — Token tabanlı dark/light
══════════════════════════════════════════════════════════════ */

.message.user .message-content,
.message-user .message-content,
.user-message-content {
  background: var(--user-bubble-bg) !important;
  border: 1px solid var(--user-bubble-border) !important;
  border-radius: var(--msg-radius) var(--msg-radius) 4px var(--msg-radius) !important;
  color: var(--text-primary) !important;
}

.message.assistant .message-content,
.message-assistant .message-content {
  background: transparent !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   32. KOD BLOKLARI — Token tabanlı
══════════════════════════════════════════════════════════════ */

pre, pre code,
.code-block, .code-wrapper {
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  color: var(--code-text) !important;
}

.code-header, .code-block-header, .code-lang-label {
  background: var(--code-header-bg) !important;
  border-bottom: 1px solid var(--code-border) !important;
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   33. DARK TEMA — Sidebar, topbar glassmorphism
══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .sidebar,
[data-theme="dark"] #sidebar,
:root:not([data-theme="light"]) .sidebar,
:root:not([data-theme="light"]) #sidebar {
  background: var(-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-right: 1px solid var(
  --sidebar-border) !important;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .inner-topbar,
[data-theme="dark"] .chat-topbar,
[data-theme="dark"] .page-topbar,
:root:not([data-theme="light"]) .topbar,
:root:not([data-theme="light"]) .inner-topbar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* ══════════════════════════════════════════════════════════════
   34. TOAST / BİLDİRİM — Token tabanlı
══════════════════════════════════════════════════════════════ */

.toast, .gx-toast, .notification-toast {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

.toast.success, .gx-toast.success { border-color: var(--color-success) !important; }
.toast.error,   .gx-toast.error   { border-color: var(--color-error) !important; }
.toast.warning, .gx-toast.warning { border-color: var(--color-warning) !important; }

/* ══════════════════════════════════════════════════════════════
   35. MODAL / DIALOG — Token tabanlı
══════════════════════════════════════════════════════════════ */

.modal, .gx-modal, .dialog, [role="dialog"] {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.modal-overlay, .gx-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="light"] .modal-overlay,
[data-theme="light"] .gx-overlay {
  background: rgba(10, 22, 50, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════════
   36. BADGE / ETİKET — Token tabanlı
══════════════════════════════════════════════════════════════ */

.badge, .gx-badge, .tag {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}

.badge-primary, .gx-badge-primary {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-soft) !important;
}

.badge-success { background: var(--color-success-bg) !important; color: var(--color-success) !important; }
.badge-error   { background: var(--color-error-bg) !important; color: var(--color-error) !important; }
.badge-warning { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; }

/* ══════════════════════════════════════════════════════════════
   37. LIGHT TEMA — KAPSAMLI HARDCODED RENK OVERRIDE'LARI
   (Diğer CSS dosyalarındaki krem/bej renkleri beyaz/griye çevirir)
══════════════════════════════════════════════════════════════ */

/* Sayfa & body */
[data-theme="light"] html,
[data-theme="light"] body {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* Ana layout */
[data-theme="light"] .app-with-sidebar,
[data-theme="light"] #app,
[data-theme="light"] .page-wrapper,
[data-theme="light"] #main,
[data-theme="light"] .main-content,
[data-theme="light"] #main-content,
[data-theme="light"] #chat-area,
[data-theme="light"] .chat-area,
[data-theme="light"] #messages,
[data-theme="light"] .messages-container {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* Topbar */
[data-theme="light"] .topbar,
[data-theme="light"] .inner-topbar,
[data-theme="light"] header.topbar,
[data-theme="light"] #topbar,
[data-theme="light"] .chat-topbar,
[data-theme="light"] .page-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e8e8e8 !important;
  color: #1a1a1a !important;
}

/* Sidebar */
[data-theme="light"] #sidebar,
[data-theme="light"] aside#sidebar,
[data-theme="light"] .sidebar,
[data-theme="light"] aside.sidebar,
[data-theme="light"] nav.sidebar {
  background: #f5f5f5 !important;
  border-right: 1px solid #e8e8e8 !important;
  color: #1a1a1a !important;
}

[data-theme="light"] .sidebar-header,
[data-theme="light"] .sb-header,
[data-theme="light"] .sidebar-logo-wrap,
[data-theme="light"] .sidebar-footer,
[data-theme="light"] .sb-footer,
[data-theme="light"] .sidebar-user-area {
  background: #f5f5f5 !important;
  border-color: #e8e8e8 !important;
}

/* Input alanı */
[data-theme="light"] #chat-input-container,
[data-theme="light"] .input-container,
[data-theme="light"] .chat-input-container,
[data-theme="light"] #input-area,
[data-theme="light"] .gx-gemini-bar,
[data-theme="light"] .gemini-input-bar {
  background: #f9f9f9 !important;
  border-color: #e0e0e0 !important;
  color: #1a1a1a !important;
}

[data-theme="light"] #message-input,
[data-theme="light"] .message-input,
[data-theme="light"] #chat-input,
[data-theme="light"] .gx-textarea {
  background: transparent !important;
  color: #1a1a1a !important;
}

[data-theme="light"] #message-input::placeholder,
[data-theme="light"] .message-input::placeholder,
[data-theme="light"] #chat-input::placeholder {
  color: #999999 !important;
}

/* Mesaj balonları */
[data-theme="light"] .msg-wrapper.user .msg-bubble,
[data-theme="light"] .message.user .message-content,
[data-theme="light"] .msg-bubble.user {
  background: #ebebeb !important;
  color: #1a1a1a !important;
}

[data-theme="light"] .msg-wrapper.assistant .msg-bubble,
[data-theme="light"] .message.assistant .message-content {
  background: transparent !important;
  color: #1a1a1a !important;
}

/* Kart ve panel */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .box,
[data-theme="light"] .gx-card,
[data-theme="light"] .suggestion-card,
[data-theme="light"] .welcome-card {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #1a1a1a !important;
}

/* Dropdown menüler */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .dropdown-content,
[data-theme="light"] .popover,
[data-theme="light"] .user-menu,
[data-theme="light"] .sb-more-menu,
[data-theme="light"] .model-dropdown,
[data-theme="light"] .context-menu,
[data-theme="light"] .msg-more-menu {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1a1a1a !important;
}

/* Kod blokları */
[data-theme="light"] pre,
[data-theme="light"] .code-block,
[data-theme="light"] .hljs {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #333333 !important;
}

[data-theme="light"] .code-header,
[data-theme="light"] .code-block-header,
[data-theme="light"] .code-block-top {
  background: #ebebeb !important;
  border-bottom: 1px solid #e0e0e0 !important;
  color: #666666 !important;
}

[data-theme="light"] code {
  background: #f0f0f0 !important;
  color: #333333 !important;
}

[data-theme="light"] pre code {
  background: transparent !important;
  color: #333333 !important;
}

/* Konuşma listesi */
[data-theme="light"] .conv-item { color: #666666 !important; }
[data-theme="light"] .conv-item:hover { background: #ebebeb !important; }
[data-theme="light"] .conv-item.active { background: #e0e0e0 !important; }
[data-theme="light"] .conv-item-text { color: #666666 !important; }
[data-theme="light"] .conv-item.active .conv-item-text { color: #1a1a1a !important; }
[data-theme="light"] .conv-item-date,
[data-theme="light"] .conv-group-label { color: #999999 !important; }

/* Sidebar nav */
[data-theme="light"] .sidebar-nav-item,
[data-theme="light"] .sb-nav-item { color: #666666 !important; background: transparent !important; }
[data-theme="light"] .sidebar-nav-item:hover,
[data-theme="light"] .sb-nav-item:hover { background: #ebebeb !important; color: #1a1a1a !important; }
[data-theme="light"] .sidebar-nav-item.active,
[data-theme="light"] .sb-nav-item.active { background: #e0e0e0 !important; color: #1a1a1a !important; }

/* Modal */
[data-theme="light"] .modal,
[data-theme="light"] .gx-modal,
[data-theme="light"] .dialog,
[data-theme="light"] [role="dialog"],
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-content {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1a1a1a !important;
}

/* Scroll butonu */
[data-theme="light"] #scroll-to-bottom-btn,
[data-theme="light"] .scroll-to-bottom {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  color: #666666 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

/* Welcome ekranı */
[data-theme="light"] .welcome-title,
[data-theme="light"] .welcome-subtitle,
[data-theme="light"] .gx-welcome-title {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Arama kutusu */
[data-theme="light"] .sb-search-box,
[data-theme="light"] .sidebar-search,
[data-theme="light"] #conv-search {
  background: #ebebeb !important;
  border: 1px solid #e0e0e0 !important;
  color: #1a1a1a !important;
}

/* Gönder butonu */
[data-theme="light"] #btn-send:not(:disabled),
[data-theme="light"] .input-send-btn:not(:disabled) {
  background: #333333 !important;
  color: #ffffff !important;
}

/* Typing indicator */
[data-theme="light"] .typing-status { color: #666666 !important; }

/* Tip banner */
[data-theme="light"] .tip-banner {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}

/* Kullanıcı avatarı */
[data-theme="light"] .user-avatar,
[data-theme="light"] .sb-user-avatar {
  background: #ebebeb !important;
  border: 1px solid #e0e0e0 !important;
  color: #1a1a1a !important;
}

/* Mesaj aksiyon butonları */
[data-theme="light"] .msg-action-btn,
[data-theme="light"] .message-action-btn,
[data-theme="light"] .btn-copy-code,
[data-theme="light"] .btn-download-code {
  color: #666666 !important;
  background: transparent !important;
}
[data-theme="light"] .msg-action-btn:hover,
[data-theme="light"] .message-action-btn:hover,
[data-theme="light"] .btn-copy-code:hover,
[data-theme="light"] .btn-download-code:hover {
  background: #ebebeb !important;
  color: #1a1a1a !important;
}

/* AI avatar — beyaz (logo için) */
[data-theme="light"] .msg-avatar.ai-av,
[data-theme="light"] .msg-wrapper.assistant .msg-avatar,
[data-theme="light"] .message.assistant .message-avatar {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
}

/* Model chip */
[data-theme="light"] .model-badge,
[data-theme="light"] .model-chip,
[data-theme="light"] .model-selector-btn,
[data-theme="light"] .gx-model-pill {
  background: #ebebeb !important;
  border-color: #e0e0e0 !important;
  color: #666666 !important;
}

/* Kota çubuğu */
[data-theme="light"] .sb-usage-bar { background: #ebebeb !important; }
[data-theme="light"] .sb-usage-label,
[data-theme="light"] .sb-usage-text { color: #999999 !important; }

/* Tablo */
[data-theme="light"] thead tr,
[data-theme="light"] th {
  background: #f5f5f5 !important;
  color: #666666 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
[data-theme="light"] tbody tr:hover { background: #f5f5f5 !important; }
[data-theme="light"] td { color: #1a1a1a !important; }

/* Scrollbar */
[data-theme="light"] * { scrollbar-color: #cccccc transparent; }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: #cccccc !important; }
[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #bbbbbb !important; }