/**
 * CLMS v2 Dark Theme - Navigation Styling
 * Consolidated navigation styling using CSS variables
 */

/* ===== HEADER NAVIGATION ===== */
[data-bs-theme="dark"] {
  .perfo-header {
    background-color: var(--clms-bg-header) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .perfo-header .navbar-brand {
    color: var(--clms-white) !important;
  }

  .perfo-header .navbar-text {
    color: var(--clms-white) !important;
  }
}

/* ===== SIDEBAR NAVIGATION ===== */
[data-bs-theme="dark"] {
  /* Sidebar container */
  #sidebar {
    background: var(--clms-bg-sidebar) !important;
    color: var(--clms-nav-link-color) !important;
    border-right: 1px solid var(--clms-border-primary) !important;
  }

  /* Sidebar header */
  #sidebar .sidebar-heading {
    color: var(--clms-text-primary) !important;
    border-bottom: 1px solid var(--clms-border-primary) !important;
  }

  /* Sidebar brand/logo */
  .sidebarheadericon,
  .sidebarheadertext {
    color: var(--clms-nav-link-color) !important;
    transition: color 0.2s ease !important;
  }

  .sidebarheadericon:hover,
  .sidebarheadertext:hover {
    color: var(--clms-nav-link-hover) !important;
  }
}

/* ===== SIDEBAR LINKS ===== */
[data-bs-theme="dark"] {
  /* Base link styling */
  #sidebar .nav-link,
  #sidebar ul li a {
    color: var(--clms-nav-link-color) !important;
    transition: all 0.2s ease !important;
    border-radius: 0.25rem !important;
    margin: 0.125rem 0 !important;
  }

  /* Link icons and text */
  #sidebar .nav-link i,
  #sidebar .nav-link span,
  #sidebar ul li a i,
  #sidebar ul li a span {
    color: inherit !important;
    transition: color 0.2s ease !important;
  }

  /* Hover states */
  #sidebar .nav-link:hover,
  #sidebar ul li a:hover {
    color: var(--clms-nav-link-hover) !important;
    background-color: rgba(211, 152, 63, 0.1) !important;
  }

  #sidebar .nav-link:hover i,
  #sidebar .nav-link:hover span,
  #sidebar ul li a:hover i,
  #sidebar ul li a:hover span {
    color: var(--clms-nav-link-hover) !important;
  }

  /* Active states */
  #sidebar .nav-link.active,
  #sidebar ul li a.active {
    color: var(--clms-nav-link-active) !important;
    background-color: rgba(211, 152, 63, 0.2) !important;
  }

  #sidebar .nav-link.active i,
  #sidebar .nav-link.active span,
  #sidebar ul li a.active i,
  #sidebar ul li a.active span {
    color: var(--clms-nav-link-active) !important;
  }
}

/* ===== SIDEBAR DROPDOWNS ===== */
[data-bs-theme="dark"] {
  /* Dropdown toggle arrows */
  #sidebar .dropdown-toggle::after,
  #sidebar.active .dropdown-toggle::after {
    border-top-color: var(--clms-nav-link-color) !important;
    border-color: var(--clms-nav-link-color) transparent transparent transparent !important;
    transition: all 0.2s ease !important;
  }

  /* Dropdown toggle hover state */
  #sidebar .dropdown-toggle:hover::after {
    border-top-color: var(--clms-nav-link-hover) !important;
    border-color: var(--clms-nav-link-hover) transparent transparent transparent !important;
  }

  /* Dropdown menu styling */
  #sidebar .dropdown-menu {
    background-color: var(--clms-bg-secondary) !important;
    border-color: var(--clms-border-primary) !important;
    margin-left: 1rem !important;
    box-shadow: none !important;
  }

  #sidebar .dropdown-item {
    color: var(--clms-nav-link-color) !important;
    padding-left: 2rem !important;
    transition: all 0.2s ease !important;
  }

  #sidebar .dropdown-item:hover,
  #sidebar .dropdown-item:focus {
    background-color: rgba(211, 152, 63, 0.1) !important;
    color: var(--clms-nav-link-hover) !important;
  }

  #sidebar .dropdown-item.active {
    background-color: rgba(211, 152, 63, 0.2) !important;
    color: var(--clms-nav-link-active) !important;
  }
}

/* ===== DEVICE MENU ===== */
[data-bs-theme="dark"] {
  /* Device menu container - use original transparent background */
  .deviceMenu,
  .bg-light.deviceMenu,
  .deviceMenu.bg-light {
    background-color: #1c1c1c00 !important; /* Transparant zoals origineel */
    border-bottom: 1px solid var(--clms-border-primary) !important;
  }

  /* Device menu layout - prevent wrapping */
  .deviceMenu ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Device menu items */
  .deviceMenu li {
    border-bottom: 2px solid transparent !important;
    transition: border-color 0.2s ease !important;
  }

  .deviceMenu li a {
    color: var(--clms-nav-link-color) !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    min-width: max-content !important;
  }

  .deviceMenu li a:hover {
    color: var(--clms-nav-link-hover) !important;
    background-color: transparent !important;
  }

  /* Active device menu item */
  .deviceMenu li.active {
    border-bottom-color: var(--clms-nav-link-active) !important;
  }

  .deviceMenu li.active a {
    color: var(--clms-nav-link-active) !important;
    background-color: transparent !important;
  }
}

/* ===== TOP NAVIGATION ===== */
[data-bs-theme="dark"] {
  /* Navbar */
  .navbar {
    background-color: var(--clms-bg-primary) !important;
    border-color: var(--clms-border-primary) !important;
  }

  .navbar-brand {
    color: var(--clms-text-primary) !important;
  }

  .navbar-brand:hover,
  .navbar-brand:focus {
    color: var(--clms-text-link-hover) !important;
  }

  /* Navbar nav links */
  .navbar-nav .nav-link {
    color: var(--clms-text-link) !important;
    transition: color 0.2s ease !important;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    color: var(--clms-text-link-hover) !important;
  }

  .navbar-nav .nav-link.active {
    color: var(--clms-nav-link-active) !important;
  }

  /* Navbar toggler */
  .navbar-toggler {
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--clms-focus-shadow) !important;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }
}

/* ===== TAB NAVIGATION ===== */
[data-bs-theme="dark"] {
  /* Nav tabs */
  .nav-tabs {
    border-bottom-color: var(--clms-border-primary) !important;
  }

  .nav-tabs .nav-link {
    background-color: var(--clms-bg-tertiary) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-secondary) !important;
    transition: all 0.2s ease !important;
  }

  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:focus {
    background-color: var(--clms-hover-bg) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .nav-tabs .nav-link.active {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) var(--clms-border-primary) var(--clms-bg-card) !important;
    color: var(--clms-text-primary) !important;
  }

  /* Nav pills */
  .nav-pills .nav-link {
    color: var(--clms-text-secondary) !important;
    transition: all 0.2s ease !important;
  }

  .nav-pills .nav-link:hover,
  .nav-pills .nav-link:focus {
    background-color: var(--clms-hover-bg) !important;
    color: var(--clms-text-primary) !important;
  }

  .nav-pills .nav-link.active {
    background-color: var(--clms-accent-orange) !important;
    color: var(--clms-white) !important;
  }
}

/* ===== PAGINATION ===== */
[data-bs-theme="dark"] {
  .page-link {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-link) !important;
    transition: all 0.2s ease !important;
  }

  .page-link:hover,
  .page-link:focus {
    background-color: var(--clms-hover-bg) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-link-hover) !important;
  }

  .page-item.active .page-link {
    background-color: var(--clms-accent-orange) !important;
    border-color: var(--clms-accent-orange) !important;
    color: var(--clms-white) !important;
  }

  .page-item.disabled .page-link {
    background-color: var(--clms-form-disabled-bg) !important;
    border-color: var(--clms-border-muted) !important;
    color: var(--clms-text-muted) !important;
  }
}