/* ============================================================
   MyGarage Tema Sistemi
   - :root         → koyu tema token'ları (varsayılan)
   - [data-theme=light] → aydınlık tema override'ları
   Not: Nitro, hikaye görüntüleyici ve video yüzeyleri her
   temada koyu kalır (medya odaklı yüzeyler).
   ============================================================ */

:root {
  color-scheme: dark;
  --mg-accent: #e9003f;
  --mg-accent-soft: rgba(233, 0, 63, .12);
  /* Zemin üstünde METİN/ikon olarak kullanılacak marka tonu: koyu temada
     biraz açılır, aydınlık temada koyulaşır — neon kırmızı beyaz üstünde ucuz duruyor. */
  --mg-accent-ink: #ff3b62;
  --mg-bg: #07090c;
  --mg-surface: #0d1116;
  --mg-surface-2: #141a20;
  --mg-line: #1c2229;
  --mg-line-strong: #29313a;
  --mg-text: #f5f6f7;
  --mg-muted: #9ca3af;
  /* AA: eski #6b7480 yüzey (#0d1116) üstünde 4,00:1 idi — zaman damgaları,
     adresler ve altbilgi bağlantıları okunmuyordu. 4,61:1. */
  --mg-faint: #757e8a;
}

html[data-theme="light"] {
  color-scheme: light;
  --mg-accent-ink: #c00030;
  --mg-bg: #f2f4f7;
  --mg-surface: #ffffff;
  --mg-surface-2: #eef1f5;
  --mg-line: #e3e8ee;
  --mg-line-strong: #d3dae2;
  --mg-text: #171c23;
  --mg-muted: #5d6774;
  /* AA: eski #8a94a1 sayfa zemininde (#f2f4f7) 2,79:1 ile çok kötüydü.
     4,56:1. Muted ile arası daralıyor; ayrım artık boyut/ağırlıkla. */
  --mg-faint: #66707d;
}

/* ---------- Tema düğmesi (topbar) ---------- */
.theme-toggle { cursor: pointer; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { display: grid; place-items: center; }
html:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; }
html[data-theme="light"] .theme-toggle .tt-sun { display: none; }

/* ============================================================
   AYDINLIK TEMA
   ============================================================ */

/* ---------- Sayfa zeminleri ---------- */
html[data-theme="light"] body { background: var(--mg-bg); color: var(--mg-text); }
html[data-theme="light"] :is(.social-app, .settings-app, .notifications-app, .blogs-app,
  .saved-app, .shops-app, .forum-app-shell, .xp-app, .gs-app, .explore-app, .create-app,
  .vehicle-add-app, .shop-detail-app, .route-detail-app, .sp-app, .chat-main, .auth-gate-boot) {
  background: var(--mg-bg); color: var(--mg-text);
}
html[data-theme="light"] :is(.social-app, .settings-app, .notifications-app, .blogs-app,
  .saved-app, .shops-app, .forum-app-shell, .xp-app, .gs-app, .explore-app, .create-app,
  .vehicle-add-app, .shop-detail-app, .route-detail-app, .sp-app)
  :is(h1, h2, h3, h4, b, strong) { color: inherit; }

/* ---------- Üst bar ---------- */
html[data-theme="light"] .app-topbar { background: rgba(255, 255, 255, .94); border-bottom-color: var(--mg-line); }
html[data-theme="light"] :is(.app-logo, .app-tools) { border-color: var(--mg-line); }
/* Logo artık filtreyle değil, Brand.razor içindeki iki dosyayla değişiyor. */
html[data-theme="light"] .app-search { background: var(--mg-surface-2); border-color: var(--mg-line); color: var(--mg-faint); }
html[data-theme="light"] .app-search input { color: var(--mg-text); }
html[data-theme="light"] .app-search kbd { background: #fff; border-color: var(--mg-line-strong); color: var(--mg-faint); }
html[data-theme="light"] .app-tools button { color: var(--mg-text); }
html[data-theme="light"] .top-action { color: #444e5a; }
html[data-theme="light"] .app-tools .top-action:hover { background: var(--mg-surface-2); color: var(--mg-text); }
html[data-theme="light"] .guest-avatar { background: #dfe4ea; color: #333c47; }
html[data-theme="light"] .topbar-account:hover { background: var(--mg-surface-2); }
html[data-theme="light"] .topbar-account > .mg-icon { color: var(--mg-faint); }
html[data-theme="light"] .topbar-account.guest b { color: var(--mg-text); }

/* ---------- Sol menü ----------
   Aktif satır: pembe zemin + neon kırmızı yazı yerine nötr yükseltilmiş yüzey
   üstünde koyu metin; marka rengi yalnızca sol çubuk ve ikonda kalır. */
html[data-theme="light"] .social-sidebar { border-color: var(--mg-line); }
html[data-theme="light"] .social-sidebar nav a { color: #4b5563; }
html[data-theme="light"] .social-sidebar nav a:hover { background: var(--mg-surface-2); color: var(--mg-text); }
html[data-theme="light"] .social-sidebar nav a.active { background: var(--mg-surface-2); color: var(--mg-text); }
html[data-theme="light"] .sidebar-separator { background: var(--mg-line); }
html[data-theme="light"] .mini-user { border-bottom-color: var(--mg-line); }
html[data-theme="light"] .mini-user small { color: var(--mg-faint); }
html[data-theme="light"] .mini-user > i { color: var(--mg-faint); }
html[data-theme="light"] .nav-label { color: #6f7987; }
html[data-theme="light"] .social-sidebar .nitro-link strong { color: var(--mg-accent-ink); }
/* Beyaz üstünde dolgu olarak neon kırmızı yerine koyu marka tonu */
html[data-theme="light"] .create-post-button { background: var(--mg-accent-ink); }
html[data-theme="light"] .notifications-layout .social-sidebar .active { background: var(--mg-surface-2); color: var(--mg-text); }

/* ---------- Trend kullanıcılar (ızgara; kartsız öğeler) ---------- */
html[data-theme="light"] .trend-user { background: transparent; border-color: transparent; }
html[data-theme="light"] .trend-user:hover { background: var(--mg-surface-2); }
html[data-theme="light"] .trend-user small { color: var(--mg-faint); }

/* ---------- Akış (feed) ---------- */
html[data-theme="light"] .feed-column { border-color: var(--mg-line); }
html[data-theme="light"] .story-ring i { background: #e6eaef; color: #38414c; }
html[data-theme="light"] .story small { color: var(--mg-muted); }
html[data-theme="light"] .story-ring.add-story b { border-color: var(--mg-bg); background: var(--mg-accent); }
html[data-theme="light"] :is(.feed-tabs, .feed-mobile-title, .stories) { border-color: var(--mg-line); }
html[data-theme="light"] .feed-tabs button { color: var(--mg-faint); }
html[data-theme="light"] .feed-tabs button.active { color: var(--mg-accent); }
html[data-theme="light"] .feed-filters button { border-color: var(--mg-line-strong); background: #fff; color: var(--mg-muted); }
html[data-theme="light"] .feed-filters button.active { border-color: var(--mg-accent); background: var(--mg-accent-soft); color: var(--mg-accent); }
html[data-theme="light"] .post-card { border-color: var(--mg-line); }
html[data-theme="light"] .post-card header button { color: var(--mg-faint); }
html[data-theme="light"] .post-copy { color: #2a323c; }
html[data-theme="light"] .post-media { background: var(--mg-surface-2); border-color: var(--mg-line); }
html[data-theme="light"] .post-actions { border-color: var(--mg-line); }
html[data-theme="light"] .post-actions button { color: #5b6572; }
html[data-theme="light"] .post-actions .liked { color: #e42a55; }
html[data-theme="light"] .post-actions .saved { color: var(--mg-accent); }
html[data-theme="light"] .composer { background: var(--mg-surface); border-color: var(--mg-line); }
html[data-theme="light"] .composer textarea { color: var(--mg-text); }
html[data-theme="light"] .composer-actions { border-color: var(--mg-line); }
html[data-theme="light"] .feed-load-more { border-color: var(--mg-line-strong); background: #fff; color: var(--mg-muted); }
html[data-theme="light"] .feed-load-more:hover:not(:disabled) { color: var(--mg-text); border-color: #b9c2cc; }
html[data-theme="light"] .user-identity-text small { color: var(--mg-faint); }

/* ---------- Sağ ray ---------- */
html[data-theme="light"] .social-rail { border-color: var(--mg-line); }
html[data-theme="light"] .rail-card { background: var(--mg-surface); border-color: var(--mg-line); }
html[data-theme="light"] .rail-search { background: var(--mg-surface-2); border-color: var(--mg-line); color: var(--mg-faint); }
html[data-theme="light"] .rail-search input { color: var(--mg-text); }
html[data-theme="light"] .trends li { border-color: var(--mg-line); }
html[data-theme="light"] .trends small { color: var(--mg-faint); }
html[data-theme="light"] .nearby-shop { background: var(--mg-surface-2); }
html[data-theme="light"] .nearby-shop em { color: var(--mg-muted); }
html[data-theme="light"] .route-list > div { background: var(--mg-surface-2); }
html[data-theme="light"] .route-list small { color: var(--mg-muted); }
html[data-theme="light"] .brand-row span { background: #fff; border-color: var(--mg-line-strong); }

/* ---------- Kartlar / paneller (sayfalar arası ortak) ---------- */
html[data-theme="light"] :is(
  .post-detail-card .post-card, .comment-item, .profile-stats > div, .profile-posts .post-card,
  .social-app .vehicle-card, .social-app .route-card,
  .vd-main, .vd-head, .vd-owner, .vd-service, .vd-row, .vd-prop, .vd-form,
  .blog-detail, .blog-card, .settings-card, .saved-main .post-card,
  .club-card, .club-list, .club-head, .member-list, .event-row,
  .event-card, .event-detail-head, .event-content,
  .explore-panel, .announcement-card, .route-page-card, .shop-item-grid article,
  .shop-detail-card, .route-detail-card, .route-live-map-card,
  .create-card, .vehicle-add-card,
  .category-card, .topic-list, .topic-head, .entry-card, .forum-empty, .reply-login,
  .forum-modal, .dash-grid article, .garage-entry-modal,
  .xp-section, .xp-user, .xp-marquee, .xp-mq-card, .xp-event, .xp-blog-rest a, .xp-club-list a, .xp-forum-grid a,
  .gs-section, .gs-user, .gs-row,
  .sp-card, .sp-selected, .sp-map-summary span, .shop-result, .shops-list-panel,
  .route-detail-stats, .route-stops, .route-comments, .route-detail-aside,
  .route-stop-list article, .route-comment-composer, .route-comment-list > article,
  .stories-note, .replying-chip, .forum-right .rail-card,
  .chat-peer-card, .chat-peer-profile, .signup-summary
) { background: var(--mg-surface); border-color: var(--mg-line); color: var(--mg-text); }

/* ---------- Yükseltilmiş zeminler, girişler, ikincil butonlar ---------- */
html[data-theme="light"] :is(
  .add-fields input, .add-fields select, .setting-field select, .create-footer select,
  .create-tools button, .topic-search, .filter-button, .chip, .reply-box textarea,
  .forum-modal input, .forum-modal select, .forum-modal textarea,
  .chat-composer textarea, .chat-list-status button, .calendar-button, .message-button,
  .load-more, .draft-button, .danger-zone button, .wizard-actions .secondary,
  .add-callout, .wizard-steps b, .xp-rank, .settings-menu button.active,
  .club-logo, .event-thumb, .member-more, .sp-cats button, .sp-fav, .sp-logo,
  .xp-mq-img, .gs-thumb, .xp-club-logo, .quick-panel > div > a, .trend-car-grid > a,
  .explore-list > a > span, .working-hours span, .shops-heading select, .shop-filters button,
  .shop-photo, .selected-shop > span, .vd-thumbs button, .vd-form-grid select, .vd-maint-modal input,
  .route-social-button, .vehicle-chip, .media-grid a, .chat-peer-stats > div, .bubble,
  .xp-browser-bar b, .xp-event.done .xp-event-date, .create-file, .nitro-drawer-toggle
) { background: var(--mg-surface-2); border-color: var(--mg-line-strong); color: var(--mg-text); }

html[data-theme="light"] .sp-sort button:not(.active) { background: #fff; border-color: var(--mg-line-strong); color: var(--mg-muted); }
html[data-theme="light"] .sp-cats button.active { border-color: var(--mg-accent); color: var(--mg-accent); background: var(--mg-accent-soft); }
html[data-theme="light"] .sp-sort button:hover:not(.active) { color: var(--mg-text); border-color: #b9c2cc; }
html[data-theme="light"] .bubble.mine { background: var(--mg-accent); color: #fff; }
html[data-theme="light"] :is(.channel-row:hover, .channel-row.on, .topic-row:hover,
  .shop-result:hover, .shop-result.selected, .xp-mq-card:hover) { background: var(--mg-surface-2); }
html[data-theme="light"] .settings-menu button { color: var(--mg-muted); }
html[data-theme="light"] .settings-menu button.active { color: var(--mg-text); }
html[data-theme="light"] .setting-row, html[data-theme="light"] .setting-field { border-color: var(--mg-line); }
html[data-theme="light"] :is(.settings-heading, .chat-list-head, .chat-thread-head,
  .chat-tabs, .chat-composer, .channel-row, .topic-row, .notification-item) { border-color: var(--mg-line); }
html[data-theme="light"] .notification-item.unread { background: #fff; }
html[data-theme="light"] .notification-tabs { border-color: var(--mg-line); }
html[data-theme="light"] .notification-tabs .active { color: var(--mg-text); }
html[data-theme="light"] .toggle i { background: #cdd5dd; }
html[data-theme="light"] .toggle input:checked + i { background: var(--mg-accent); }
html[data-theme="light"] .toggle i:after { background: #fff; box-shadow: 0 1px 3px rgba(9, 14, 20, .3); }

/* ---------- Formlar (genel) ---------- */
html[data-theme="light"] :is(.settings-main, .create-main, .vehicle-add-main) input:not([type=checkbox]):not([type=radio]),
html[data-theme="light"] :is(.settings-main, .create-main, .vehicle-add-main) textarea {
  background: var(--mg-surface-2); border-color: var(--mg-line-strong); color: var(--mg-text);
}
html[data-theme="light"] ::placeholder { color: #9aa4b0; }

/* ---------- Harita yüzeyleri ---------- */
html[data-theme="light"] :is(.leaflet-container, .mg-map, .sp-map, .shops-map) { background: #dfe5ea; }
html[data-theme="light"] :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip) { background: #fff; color: var(--mg-text); }

/* ---------- Yüzen rıhtım (dock) ---------- */
html[data-theme="light"] .floating-dock { background: rgba(255, 255, 255, .95); border-color: var(--mg-line); box-shadow: 0 -10px 30px rgba(15, 23, 33, .12); }
html[data-theme="light"] .floating-dock a { color: #5b6572; }
html[data-theme="light"] .floating-dock a.active { color: var(--mg-accent); }
html[data-theme="light"] .floating-dock .dock-logo { border-color: #fff; }

/* ---------- Giriş / Kayıt (form tarafı temaya uyar, tanıtım paneli hep koyu) ---------- */
html[data-theme="light"] .auth-page { background: var(--mg-bg); }
html[data-theme="light"] .auth-side { background: var(--mg-bg); }
html[data-theme="light"] .auth-card { background: var(--mg-surface); border-color: var(--mg-line); box-shadow: 0 24px 60px rgba(15, 23, 33, .08); }
html[data-theme="light"] .auth-card { color: var(--mg-text); }
html[data-theme="light"] .auth-form h2 { color: var(--mg-text); }
html[data-theme="light"] .auth-form label { color: #444e5a; }
html[data-theme="light"] .auth-form input:not([type=checkbox]) { background: #fff; border-color: var(--mg-line-strong); color: var(--mg-text); }
html[data-theme="light"] .auth-form input:not([type=checkbox]):focus { border-color: var(--mg-accent); }
html[data-theme="light"] .auth-form input:-webkit-autofill,
html[data-theme="light"] .auth-form input:-webkit-autofill:hover,
html[data-theme="light"] .auth-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--mg-text); caret-color: var(--mg-text);
}
html[data-theme="light"] .signup-back { background: #fff; border-color: var(--mg-line-strong); color: var(--mg-muted); }
html[data-theme="light"] .signup-steps .step i { background: #fff; border-color: var(--mg-line-strong); color: var(--mg-muted); }
html[data-theme="light"] .signup-steps .step.on i { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; }
html[data-theme="light"] .signup-steps .step.on small { color: var(--mg-text); }
html[data-theme="light"] .signup-steps .step.done small { color: var(--mg-muted); }
html[data-theme="light"] .signup-steps .bar { background: var(--mg-line-strong); }
html[data-theme="light"] .signup-summary b { color: var(--mg-text); }
html[data-theme="light"] .forgot-panel { background: var(--mg-surface-2); border-color: var(--mg-line); }
html[data-theme="light"] .forgot-panel input { background: #fff; border-color: var(--mg-line-strong); color: var(--mg-text); }
html[data-theme="light"] .auth-error { background: rgba(233, 0, 63, .06); border-color: rgba(233, 0, 63, .3); color: #c40036; }
html[data-theme="light"] :is(.auth-switch, .guest-link) { color: var(--mg-muted); }

/* ---------- Kaydırma çubukları ---------- */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c3ccd6; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aab5c2; }