/* =========================================
   Galen Reçete Kontrol - Responsive Stiller
   =========================================
   Breakpoints: Bootstrap XL = 1200px. Navbar uses navbar-expand-xl,
   so collapsed (hamburger) up to 1199px; horizontal nav from 1200px+.
   This block applies to all viewports where navbar is collapsed
   (phones, tablets, iPad Pro 1024px, small desktops). */

/* Navbar ve Dropdown – tablet ve küçük masaüstü dahil (≤1199px) */
@media (max-width: 1199px) {
  /* Body ve html overflow kontrolü (100% avoids scrollbar-induced horizontal overflow vs 100vw) */
  body, html {
    overflow-x: hidden !important;
    max-width: 100%;
    position: relative;
  }
  
  /* Navbar: overflow visible so dropdown can extend over body */
  .navbar {
    overflow: visible;
    max-width: 100%;
    position: relative;
  }
  
  /* Navbar brand'in genişlik kontrolü */
  .navbar-brand {
    max-width: calc(100% - 60px);
    overflow: hidden;
  }
  
  /* Navbar container: overflow visible so dropdown can extend over body */
  .navbar .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    overflow: visible;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /*
   * Navbar collapse: only set overflow:visible when fully expanded so
   * dropdown menus can extend beyond the container.  During the
   * Bootstrap .collapsing transition the default overflow:hidden must
   * remain intact — otherwise menu text stays visible while the
   * container height animates to 0.
   */
  .navbar-collapse.collapse.show {
    overflow: visible;
    max-width: 100%;
  }

  .navbar-collapse.collapsing {
    overflow: hidden !important;
  }
  
  /* Navbar actions: overflow visible so dropdown can extend over body */
  .navbar-actions {
    max-width: 100%;
    overflow: visible;
    min-width: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Dropdown wrapper'ın genişlik kontrolü */
  .navbar-actions .dropdown {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  
  /* Bootstrap gap-2 sınıfını override et */
  .user-dropdown-btn.gap-2 {
    gap: 4px !important;
  }
  
  /* Bildirim badge'ini köşeden uzaklaştır - okunabilirlik */
  .user-dropdown-btn .notification-badge {
    top: 4px;
    right: 14px;
  }
  
  /* Dropdown butonunun mobilde kompakt olması */
  #userDropdown {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px;
    gap: 4px !important;
    box-sizing: border-box;
  }
  
  /* Dropdown butonu içindeki içerik */
  #userDropdown .user-avatar-small {
    flex-shrink: 0;
    width: 26px !important;
    height: 26px !important;
    font-size: 11px;
    margin: 0;
  }
  
  #userDropdown .user-name-nav {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 35px);
  }
  
  /* Dropdown toggle icon'unu küçült */
  #userDropdown::after {
    margin-left: 4px !important;
  }
  
  /* Dropdown menu'nun sağa taşmaması için */
  .dropdown-menu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
    max-width: calc(100% - 24px);
  }
}

/* Çok küçük ekranlar için ek düzenlemeler */
@media (max-width: 575px) {
  .navbar .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .user-dropdown-btn.gap-2 {
    gap: 3px !important;
  }
  
  #userDropdown {
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 3px !important;
  }
  
  #userDropdown .user-avatar-small {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px;
  }
  
  #userDropdown .user-name-nav {
    max-width: calc(100% - 30px);
    font-size: 12px;
  }
  
  .user-dropdown-btn .notification-badge {
    top: 4px;
    right: 14px;
  }
  
  .dropdown-menu.dropdown-menu-end {
    max-width: calc(100% - 20px);
  }
}