/**
 * Trendmetrik v2 — Reference Chrome
 * Sidebar inner elements + dark mode canvas.
 * Layout handled by tm-shell-v2.css (grid + sticky).
 * This file handles:
 *   - Inner #sidebar reset (legacy rail → full panel)
 *   - Dark mode canvas gradient
 *   - Nav active states
 */

/* ----- App font ----- */
#tmv2App.tmv2-app {
  font-family: var(--tmv2-ff-sans);
  -webkit-font-smoothing: antialiased;
}

/* ----- Inner #sidebar: override legacy sidebar-panel.css fixed/rail behavior ----- */
@media (min-width: 1025px) {
  /* Hide duplicate header inside sidebar body */
  #tmv2SidebarRoot .tmv2-sidebar-body .sidebar-header {
    display: none !important;
  }

  #tmv2App {
    --tm-sidebar-rail: var(--tmv2-sb-w);
  }

  #tmv2SidebarRoot #sidebar.sidebar,
  #tmv2SidebarRoot #sidebar,
  body #tmv2SidebarRoot #sidebar,
  html body #tmv2SidebarRoot #sidebar {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: auto !important;
  }

  #tmv2SidebarRoot #sidebar:hover,
  body #tmv2SidebarRoot #sidebar:hover {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    box-shadow: none !important;
  }

  #tmv2SidebarRoot #sidebar .nav-label {
    opacity: 1 !important;
    width: auto !important;
    flex: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
    text-align: left !important;
    font-family: var(--tmv2-ff-sans);
    font-size: 13px;
    color: var(--tmv2-ink);
  }

  html.dark-mode #tmv2SidebarRoot #sidebar .nav-label {
    color: var(--tmv2-ink, var(--color-text, #e2e8f0));
  }

  #tmv2SidebarRoot #sidebar .nav-link.active .nav-label {
    color: inherit !important;
  }

  #tmv2SidebarRoot #sidebar .nav-link .nav-icon {
    background: transparent !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
  }

  #tmv2SidebarRoot #sidebar .nav-group.expanded .nav-group-header:not(.admin-accordion) {
    background: #f3f4f6 !important;
    color: var(--tmv2-ink) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  }

  html.dark-mode #tmv2SidebarRoot #sidebar .nav-group.expanded .nav-group-header:not(.admin-accordion) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--tmv2-ink, #e2e8f0) !important;
  }

  #tmv2SidebarRoot #sidebar .nav-link,
  #tmv2SidebarRoot #sidebar .nav-group-header {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #tmv2SidebarRoot #sidebar .nav-link.active {
    background: var(--tmv2-nav-active-bg, #f1f5f9) !important;
    color: var(--tmv2-nav-active-ink, #0f172a) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: var(--tmv2-nav-active-bar, 3px) solid var(--tmv2-nav-active-bar-color, #2563eb) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  #tmv2SidebarRoot #sidebar .nav-link.active .nav-icon {
    background: transparent !important;
    color: var(--tmv2-nav-active-icon, #2563eb) !important;
  }

  html.dark-mode #tmv2SidebarRoot #sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-text) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: var(--tmv2-nav-active-bar, 3px) solid var(--color-primary) !important;
    box-shadow: none !important;
  }

  html.dark-mode #tmv2SidebarRoot #sidebar .nav-link.active .nav-icon {
    color: var(--tmv2-nav-active-icon, var(--color-primary)) !important;
  }

  #tmv2SidebarRoot #sidebar .nav-sublink.active {
    background: var(--tmv2-nav-active-bg, #f1f5f9) !important;
    color: var(--tmv2-nav-active-ink, #0f172a) !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  html.dark-mode #tmv2SidebarRoot #sidebar .nav-sublink.active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-text) !important;
    border: none !important;
    box-shadow: none !important;
  }

  #tmv2SidebarRoot #sidebar .sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0.35rem 0.75rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #tmv2SidebarRoot #sidebar .sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Accordion: only expand on .expanded class, not hover */
  #tmv2SidebarRoot #sidebar .nav-group:not(.expanded) .nav-group-content {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #tmv2SidebarRoot #sidebar .nav-group.expanded .nav-group-content {
    max-height: none !important;
    overflow: visible !important;
  }

  #tmv2SidebarRoot #sidebar .nav-group-header {
    padding: 0.35rem 0.65rem !important;
  }

  #tmv2SidebarRoot #sidebar .nav-sublink {
    font-size: 12.5px;
    border-radius: 8px;
    /* tm-sidebar-v2-host-override ile aynı sol iç boşluk (1.75rem hover kayması yok) */
    padding: 0.4rem 10px 0.4rem 14px !important;
    color: var(--tmv2-ink-2);
    border: none !important;
    box-sizing: border-box !important;
  }

  html.dark-mode #tmv2SidebarRoot #sidebar .nav-sublink {
    color: var(--tmv2-ink-2, #94a3b8);
  }

  /* Hide toggle button */
  #tmv2SidebarRoot #sidebar .sidebar-toggle {
    display: none !important;
  }
}

/* ----- Mobile: inner sidebar fully relative ----- */
@media (max-width: 1024px) {
  #tmv2SidebarRoot #sidebar.sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #tmv2SidebarRoot #sidebar.mobile-open .sidebar-nav {
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  #tmv2SidebarRoot #sidebar.sidebar {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    background: transparent !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
  }
}

/* ----- Dark mode: canvas gradient ----- */
html.dark-mode body.tmv2-body .tmv2-app {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(58, 136, 229, 0.12), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(232, 138, 61, 0.06), transparent 50%),
    var(--tmv2-page);
}

/* Page shell — neutralized in v2 (styled via tm-shell-v2.css) */

/*
 * Üst şerit / grid hizası — test ve dokümantasyon için ana sütun seçicisi + token
 * (gerçek yerleşim tm-shell-v2 grid’de; sabit header varyantı: .tmv2-main:not(.tmv2-main--no-sidebar) left: var(--tmv2-sb-w))
 */

/* v2 nav — satır şekli; hover yok (tm-sidebar-v2-host-override.css) */
@media (min-width: 1025px) {
  #tmv2SidebarRoot .tmv2-sidebar-nav .tmv2-nav-item.nav-link,
  #tmv2SidebarRoot .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink {
    border-radius: 10px;
  }

  #tmv2SidebarRoot .tmv2-sidebar-nav .tmv2-nav-item--group.nav-group-header {
    border-radius: 8px;
  }
}