/* Mobile Responsive Framework - Design System Uyumlu - Test Update */

/* ===== MOBILE FIRST APPROACH ===== */
* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== MOBILE UTILITY CLASSES - DESIGN SYSTEM UYUMLU ===== */
.mobile-container {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  padding: 0 var(--space-4);
}

.mobile-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-full {
  width: 100%;
  max-width: 100%;
}

.mobile-text-responsive {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.mobile-button {
  min-height: 44px;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  max-width: 100%;
}

.mobile-input {
  width: 100%;
  max-width: 100%;
  font-size: 16px; /* Prevents zoom on iOS */
  padding: var(--space-3);
}

.mobile-card {
  margin: var(--space-2) 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mobile-table {
  width: 100%;
  max-width: 100%;
  font-size: 0.75rem;
  table-layout: fixed;
}

.mobile-table th,
.mobile-table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 0;
  padding: 0.5rem 0.25rem;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Mobile (320px - 768px) */
@media (max-width: 768px) {
  /* Global mobile overrides */
  * {
    max-width: 100% !important;
  }
  
  /* Container fixes */
  .container, .max-w-full, .w-full, .min-h-screen {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* Dashboard specific mobile improvements */
  body:has(#mainTabContainer) {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Header ile içerik arasındaki boşluğu kaldır */
  body:has(#mainTabContainer) .dashboard-main {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Kârlılık kartlarının ekrana daha yakın gelmesi için gutter'ı sıfırla */
  body:has(#mainTabContainer) .sticky-header .row {
    --bs-gutter-x: 0 !important;
    margin: 0 !important;
  }

  /* Tüm sayfalarda kenar boşluklarını küçült */
  .container,
  .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Özellikle dashboard gibi px-* verilen container'lar */
  .container-fluid.px-2,
  .container-fluid.px-3,
  .container-fluid.px-4,
  .container-fluid.px-6,
  .container-fluid.px-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Sipariş tab ve kartları - tam genişlik */
  #ordersTab,
  #ordersTab > div,
  #ordersTab .card,
  #ordersTab .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .orders-cards-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Overview tab - KPI kartları ve container boşlukları azalt */
  #overviewTab,
  #overviewTab > div,
  #overviewTab .container-fluid,
  .overview-tab-content {
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Bootstrap row gutter azalt */
  #overviewTab .row,
  #overviewTab .row.g-3,
  #analyticsTab .row,
  #analyticsTab .row.g-3,
  #ordersTab .row,
  .overview-first-row,
  .widget-row {
    --bs-gutter-x: 0.3rem !important;
    --bs-gutter-y: 0.3rem !important;
    margin-left: -0.15rem !important;
    margin-right: -0.15rem !important;
  }
  
  /* mb-3 row margin azalt */
  .row.mb-3,
  .widget-row.mb-3 {
    margin-bottom: 0.35rem !important;
  }
  
  /* Sticky header boşluk azalt */
  .sticky-header {
    padding: 0.25rem 0.15rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* Dashboard kartları boşluk */
  .dashboard-widget,
  .quick-access-widget,
  .metric-card {
    margin-bottom: 0.25rem !important;
  }
  
  /* Bootstrap mb-* sınıflarını mobilde azalt */
  .mb-3 {
    margin-bottom: 0.35rem !important;
  }
  
  .mb-2 {
    margin-bottom: 0.25rem !important;
  }
  
  .gap-3 {
    gap: 0.35rem !important;
  }
  
  .gap-2 {
    gap: 0.25rem !important;
  }
  
  /* p-3, p-4 padding'leri azalt */
  .p-3 {
    padding: 0.5rem !important;
  }
  
  .p-4 {
    padding: 0.65rem !important;
  }
  
  /* ===== DASHBOARD MOBİL - SIFIR KENAR BOŞLUĞU ===== */
  /* Container'lar - SIFIR */
  .dashboard-widget-container,
  .dashboard-widget-inner,
  .widget-row,
  .dashboard-main,
  #overviewTab,
  #ordersTab,
  #analyticsTab,
  body:has(#mainTabContainer),
  .sticky-header,
  .main-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Row gutter - SIFIR */
  .row,
  .row.g-3,
  .row.g-4,
  .row.g-2,
  .overview-first-row,
  .welcome-metrics-row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 4px !important;
    margin: 0 !important;
  }
  
  /* Col padding - SIFIR */
  [class*="col-"] {
    padding: 0 !important;
  }
  
  /* Welcome kart - mobilde tam genişlik */
  .welcome-card--mobile-simple,
  .welcome-card {
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  
  /* Date metrics kart - mobilde tam genişlik */
  .dashboard-date-metrics-card {
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  
  /* Welcome metrics row - flex column ile kartları üst üste */
  .welcome-metrics-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin: 0 !important;
  }
  
  .welcome-metrics-row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Kartlar - kenarlara yasla */
  .bg-white.rounded-lg,
  .dashboard-widget-inner,
  .metric-card {
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  /* Kart içi padding - minimal */
  .p-3, .p-4 { padding: 8px !important; }
  .orders-tab-header, .orders-inner-padding { padding: 8px !important; }
  
  /* Gap ve margin - minimal */
  .gap-2, .gap-3, .gap-4 { gap: 4px !important; }
  .mb-2, .mb-3, .mb-4 { margin-bottom: 4px !important; }
  .mt-2, .mt-3, .mt-4 { margin-top: 4px !important; }
  .pb-6, .pt-6 { padding: 4px 0 !important; }
  
  /* Layout fixes */
  .flex {
    flex-wrap: wrap !important;
  }
  
  .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Text size adjustments */
  .text-6xl { font-size: 2.5rem !important; }
  .text-5xl { font-size: 2rem !important; }
  .text-4xl { font-size: 1.75rem !important; }
  .text-3xl { font-size: 1.5rem !important; }
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl { font-size: 1.125rem !important; }
  .text-lg { font-size: 1rem !important; }
  .text-base { font-size: 0.875rem !important; }
  .text-sm { font-size: 0.75rem !important; }
  .text-xs { font-size: 0.625rem !important; }
  
  /* Spacing adjustments */
  .p-8 { padding: 1rem !important; }
  .p-6 { padding: 0.75rem !important; }
  .p-4 { padding: 0.5rem !important; }
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-6 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  
  .m-8 { margin: 1rem !important; }
  .m-6 { margin: 0.75rem !important; }
  .m-4 { margin: 0.5rem !important; }
  .mb-8 { margin-bottom: 1rem !important; }
  .mb-6 { margin-bottom: 0.75rem !important; }
  .mb-4 { margin-bottom: 0.5rem !important; }
  .mt-8 { margin-top: 1rem !important; }
  .mt-6 { margin-top: 0.75rem !important; }
  .mt-4 { margin-top: 0.5rem !important; }
  
  /* Gap adjustments */
  .gap-8 { gap: 1rem !important; }
  .gap-6 { gap: 0.75rem !important; }
  .gap-4 { gap: 0.5rem !important; }
  .gap-2 { gap: 0.25rem !important; }
  
  /* Button adjustments */
  .px-6.py-3 { padding: 0.75rem 1rem !important; }
  .px-8.py-4 { padding: 1rem 1.5rem !important; }
  .px-4.py-2 { padding: 0.5rem 0.75rem !important; }
  
  /* Table adjustments */
  .overflow-x-auto {
    font-size: 0.75rem !important;
  }
  
  /* Form adjustments */
  /* NOTE: exclude radio/checkbox; forcing width:100% breaks their shape */
  input:not([type="radio"]):not([type="checkbox"]), select, textarea {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px !important;
  }

  /* ===== Account pages: mobile-friendly toggles (switch/checkbox) ===== */
  .account-page-wrapper .form-check,
  .profile-page-wrapper .form-check,
  .subscription-page-wrapper .form-check,
  .shipping-page-wrapper .form-check,
  .security-page-wrapper .form-check,
  .notifications-page-wrapper .form-check,
  .balance-page-wrapper .form-check,
  .integration-page-wrapper .form-check,
  .cart-page-wrapper .form-check,
  .favorites-page-wrapper .form-check,
  .orders-page-wrapper .form-check {
    padding-left: 0 !important; /* avoid bootstrap left gutter on mobile */
  }

  /* Regular checkbox rows (profile page) */
  .profile-page-wrapper .form-check:not(.form-switch) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .profile-page-wrapper .form-check:not(.form-switch) > .form-check-input[type="checkbox"] {
    margin: 0.2rem 0 0 0 !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    flex: 0 0 auto !important;
  }

  .profile-page-wrapper .form-check:not(.form-switch) > .form-check-label {
    margin: 0 !important;
    line-height: 1.3 !important;
    flex: 1 1 auto !important;
  }

  /* Switch toggles (notifications page uses form-switch without label) */
  .notifications-page-wrapper .form-check.form-switch {
    margin: 0 !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .notifications-page-wrapper .form-check.form-switch > .form-check-input[type="checkbox"] {
    margin: 0 !important; /* kill negative margin from bootstrap */
    float: none !important;
    flex: 0 0 auto !important;
    width: 3rem !important; /* stable switch size */
    height: 1.6rem !important;
    border-radius: 999px !important;
  }

  /* ===== Account forms: action buttons should not "break" on mobile ===== */
  .account-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .profile-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .subscription-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .shipping-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .security-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .notifications-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .balance-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .integration-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .cart-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .favorites-page-wrapper .card-body .d-flex.gap-2.justify-content-end,
  .orders-page-wrapper .card-body .d-flex.gap-2.justify-content-end {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .account-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .profile-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .subscription-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .shipping-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .security-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .notifications-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .balance-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .integration-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .cart-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .favorites-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .orders-page-wrapper .card-body .d-flex.gap-2.justify-content-end > .btn,
  .account-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .profile-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .subscription-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .shipping-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .security-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .notifications-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .balance-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .integration-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .cart-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .favorites-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button,
  .orders-page-wrapper .card-body .d-flex.gap-2.justify-content-end > button {
    width: 100% !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: normal !important;
  }
  
  /* Card adjustments */
  .card, .bg-white {
    margin: 0.5rem 0 !important;
    padding: 1rem !important;
  }
  
  /* Grid adjustments */
  .grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4,
  .grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
  .grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4,
  .grid-cols-3.md\\:grid-cols-4.lg\\:grid-cols-6 {
    grid-template-columns: 1fr !important;
  }
  
  /* Hide elements on mobile */
  .hidden-mobile {
    display: none !important;
  }
  
  /* Show elements only on mobile */
  .mobile-only {
    display: block !important;
  }
  
  /* Mobile navigation */
  .mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Mobile content padding */
  .mobile-content {
    padding-top: 4rem !important;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  .mobile-container {
    padding: 0 0.5rem;
  }
  
  .text-6xl { font-size: 2rem !important; }
  .text-5xl { font-size: 1.75rem !important; }
  .text-4xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.25rem !important; }
  .text-2xl { font-size: 1.125rem !important; }
  .text-xl { font-size: 1rem !important; }
  
  .p-8 { padding: 0.75rem !important; }
  .p-6 { padding: 0.5rem !important; }
  .px-8 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .px-6 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .py-8 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .py-6 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  
  .gap-8 { gap: 0.75rem !important; }
  .gap-6 { gap: 0.5rem !important; }
  .gap-4 { gap: 0.25rem !important; }
  
  .px-6.py-3 { padding: 0.5rem 0.75rem !important; }
  .px-8.py-4 { padding: 0.75rem 1rem !important; }
}

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .tablet-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .tablet-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* ===== MOBILE SIDEBAR STYLES ===== */

/* Mobile Hamburger Menu Button */
.mobile-menu-toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1001;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
  background: #f9fafb;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

/* Mobile Sidebar Overlay - TAMAMEN DEVRE DIŞI */
.mobile-sidebar-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}

.mobile-sidebar-overlay.active {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}

/* Overlay her durumda tamamen devre dışı */
.mobile-sidebar-overlay:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ensure sidebar is above overlay and clickable */
body:not(:has(#tmv2App)) .sidebar {
  z-index: 1020 !important;
  pointer-events: auto !important;
}

body:not(:has(#tmv2App)) .sidebar.mobile-open {
  z-index: 1020 !important;
  pointer-events: auto !important;
}

/* Mobile sidebar açıkken loading overlay'leri kesinlikle gizle */
.sidebar.mobile-open ~ #loading-overlay,
.sidebar.mobile-open ~ #globalLoadingOverlay,
body:has(.sidebar.mobile-open) #loading-overlay,
body:has(.sidebar.mobile-open) #globalLoadingOverlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mobile Sidebar Close Button */
.mobile-sidebar-close {
  display: none;
  background: #ef4444;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem;
  cursor: pointer;
  color: white;
  transition: all 0.3s ease;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.mobile-sidebar-close:hover {
  background: #dc2626;
  transform: scale(1.05);
}

/* Mobile Sidebar Styles */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .mobile-sidebar-close {
    display: flex;
  }
  
  /* COMPLETE OVERRIDE: Hide desktop sidebar on mobile by default - Override ALL global.css rules */
  body:not(:has(#tmv2App)) .sidebar,
  body:not(:has(#tmv2App)) body .sidebar,
  body:not(:has(#tmv2App)) html .sidebar,
  body:not(:has(#tmv2App)) .sidebar.collapsed,
  body:not(:has(#tmv2App)) .sidebar:hover,
  body:not(:has(#tmv2App)) .sidebar.collapsed:hover {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    transform: none !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: var(--tm-z-sidebar) !important;
    transition: left 0.3s ease !important;
    border-radius: 0 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15) !important;
    display: none !important;
    flex-direction: column !important;
    background: #ffffff !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* Show sidebar when mobile-open class is present - COMPLETE OVERRIDE */
  body:not(:has(#tmv2App)) .sidebar.mobile-open,
  body:not(:has(#tmv2App)) body .sidebar.mobile-open,
  body:not(:has(#tmv2App)) html .sidebar.mobile-open,
  body:not(:has(#tmv2App)) .sidebar.collapsed.mobile-open,
  body:not(:has(#tmv2App)) .sidebar.mobile-open:hover {
    left: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: var(--tm-z-sidebar) !important;
    position: fixed !important;
    transform: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    background: #ffffff !important;
  }
  
  /* Ensure collapsed sidebar stays hidden on mobile */
  body:not(:has(#tmv2App)) .sidebar.collapsed {
    left: -100% !important;
    visibility: hidden;
    opacity: 0;
    display: none;
    pointer-events: auto;
  }

  /* Override collapsed when mobile-open is present */
  body:not(:has(#tmv2App)) .sidebar.collapsed.mobile-open {
    left: 0 !important;
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto !important;
    z-index: var(--tm-z-sidebar) !important;
  }
  
  /* Remove hover effects on mobile - COMPLETE OVERRIDE */
  body:not(:has(#tmv2App)) .sidebar.collapsed:hover,
  body:not(:has(#tmv2App)) body .sidebar.collapsed:hover,
  body:not(:has(#tmv2App)) html .sidebar.collapsed:hover {
    left: -100% !important;
    width: 280px !important;
    transform: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  body:not(:has(#tmv2App)) .sidebar:hover,
  body:not(:has(#tmv2App)) body .sidebar:hover,
  body:not(:has(#tmv2App)) html .sidebar:hover {
    left: -100% !important;
    width: 280px !important;
    transform: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* Mobil ana sidebar (#sidebar) — şablon inline stilleriyle uyumlu: açık üst bar + turuncu marka */
  #sidebar.sidebar .sidebar-header,
  aside#sidebar .sidebar-header {
    padding: 1rem !important;
    min-height: 70px !important;
    border-bottom: 2px solid var(--color-primary) !important;
    background: #ffffff !important;
    color: #0f172a !important;
  }
  
  .sidebar-brand {
    gap: 0.75rem !important;
  }
  
  #sidebar.sidebar .brand-title,
  aside#sidebar .brand-title {
    font-size: 1.2rem !important;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  #sidebar.sidebar .brand-text,
  aside#sidebar .brand-text {
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #sidebar.sidebar .brand-subtitle,
  aside#sidebar .brand-subtitle {
    font-size: 0.75rem !important;
    color: #64748b !important;
    opacity: 1 !important;
    width: auto !important;
  }
  
  .brand-icon {
    width: 24px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  .brand-icon img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
  }
  
  /* Mobile navigation adjustments */
  .sidebar-nav {
    padding: 1rem !important;
    gap: 0.5rem !important;
    background: #f8fafc !important;
  }
  
  /* Mobile sidebar modern design - only when mobile-open */
  body:not(:has(#tmv2App)) .sidebar.mobile-open {
    background: #ffffff !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-right: 1px solid #e2e8f0 !important;
    pointer-events: auto !important;
  }

  /* Ensure all sidebar content is clickable */
  body:not(:has(#tmv2App)) .sidebar,
  body:not(:has(#tmv2App)) .sidebar * {
    pointer-events: auto !important;
    z-index: 10000 !important;
  }

  /* Specifically ensure nav elements are clickable */
  body:not(:has(#tmv2App)) .sidebar a,
  body:not(:has(#tmv2App)) .sidebar button {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10001 !important;
  }
  
  .nav-link,
  .nav-group-header {
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    min-height: 48px !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    text-decoration: none !important;
    color: inherit !important;
  }
  
  .nav-link::before,
  .nav-group-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transition: left 0.5s ease !important;
  }
  
  .nav-link:active::before,
  .nav-group-header:active::before {
    left: 100% !important;
  }
  
  .nav-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    position: relative !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Removed nav-group-header * pointer-events rule to allow clicking on sidebar elements */
  
  /* Mobile accordion button specific styles */
  .mobile-accordion-btn {
    z-index: var(--tm-z-sidebar) !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    min-height: 48px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  
  /* Removed mobile-accordion-btn * pointer-events rule to allow clicking on accordion elements */
  
  .mobile-accordion-btn:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
  }
  
  .mobile-accordion-btn:focus:not(:focus-visible) {
    outline: none !important;
  }
  
  .mobile-accordion-btn:hover {
    background: #f1f5f9 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  .mobile-accordion-btn:active {
    transform: scale(0.98) !important;
    background: #e2e8f0 !important;
  }
  
  .nav-link:hover {
    background: #f1f5f9 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  .nav-group-header:hover {
    background: #f1f5f9 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  .nav-group-header:active {
    background: #e2e8f0 !important;
    transform: scale(0.98) !important;
  }
  
  .nav-link.active {
    background: linear-gradient(135deg, #FFF3E4 0%, #FFE5CC 100%) !important;
    color: #F27A1A !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(242, 122, 26, 0.3) !important;
    transform: translateX(6px) !important;
  }
  
  .nav-group-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
  }
  
  .nav-group.expanded .nav-group-content {
    max-height: 500px !important;
    padding: 0.5rem 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* v2 panel (#tmv2SidebarRoot): alt satır hizası — translateX hover/active ile kaymasın */
  body:not(:has(#tmv2SidebarRoot)) .nav-sublink {
    padding: 0.625rem 1rem 0.625rem 2.5rem !important;
    font-size: 0.8125rem !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0.125rem 0 !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    color: #64748b !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }
  
  body:not(:has(#tmv2SidebarRoot)) .nav-sublink:hover {
    background: #f8fafc !important;
    transform: translateX(8px) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
  
  body:not(:has(#tmv2SidebarRoot)) .nav-sublink:active {
    background: #e2e8f0 !important;
    transform: translateX(4px) scale(0.98) !important;
  }
  
  body:not(:has(#tmv2SidebarRoot)) .nav-sublink.active {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #1e40af !important;
    font-weight: 500 !important;
    transform: translateX(8px) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
  }
  
  .nav-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  body:not(:has(#tmv2SidebarRoot)) .nav-sublink i {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  
  .nav-arrow {
    transition: transform 0.3s ease !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  
  .nav-group.expanded .nav-arrow {
    transform: rotate(180deg) !important;
  }
  
  /* Mobile-specific touch feedback */
  .nav-link:active,
  body:not(:has(#tmv2SidebarRoot)) .nav-sublink:active {
    transform: scale(0.98) !important;
  }
  
  /* Mobile logout styling */
  .nav-link.logout {
    color: #ef4444 !important;
    font-weight: 500 !important;
  }
  
  .nav-link.logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
  }
  
  .nav-link.logout:active {
    background: #fee2e2 !important;
    transform: scale(0.98) !important;
  }
  
  /* Mobile main content adjustments */
  body:not(:has(#tmv2App)) .main-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 4rem !important; /* Space for mobile hamburger menu */
  }

  /* Ensure main content is not affected by sidebar on mobile */
  body:not(:has(#tmv2App)) .main-content.no-sidebar {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Hide desktop sidebar toggle on mobile */
  .sidebar-toggle {
    display: none !important;
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .mobile-menu-toggle {
    top: 0.75rem;
    left: 0.75rem;
    width: 44px;
    height: 44px;
    padding: 0.625rem;
  }
  
  body:not(:has(#tmv2App)) .sidebar {
    width: 260px !important;
  }

  .sidebar-header {
    padding: 0.875rem !important;
    min-height: 65px !important;
  }
  
  .sidebar-nav {
    padding: 0.875rem !important;
  }
  
  .nav-link,
  .nav-group-header {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.8125rem !important;
  }
  
  body:not(:has(#tmv2SidebarRoot)) .nav-sublink {
    padding: 0.5rem 0.875rem 0.5rem 2.25rem !important;
    font-size: 0.75rem !important;
  }
}

/* ===== MOBILE COMPONENT STYLES ===== */

/* Mobile Tables */
.mobile-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.mobile-table-container table {
  min-width: 100%;
  font-size: 0.75rem;
}

/* Dashboard Mobile Table Improvements */
@media (max-width: 768px) {
  .mobile-table-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
  }
  
  .mobile-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  
  .mobile-table-scroll::-webkit-scrollbar {
    height: 4px;
  }
  
  .mobile-table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
  }
  
  .mobile-table-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
  }
  
  .mobile-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  
  .table {
    font-size: 0.75rem !important;
    min-width: 600px !important;
  }
  
  .table th,
  .table td {
    padding: 0.5rem 0.25rem !important;
    white-space: nowrap !important;
  }
  
  .table th:first-child,
  .table td:first-child {
    position: sticky !important;
    left: 0 !important;
    background: white !important;
    z-index: 10 !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
  }
}

/* Mobile Cards */
.mobile-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-card-stack .card {
  margin: 0;
  padding: 1rem;
}

/* Mobile Forms */
.mobile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.mobile-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-form label {
  font-weight: 500;
  font-size: 0.875rem;
}

.mobile-form input,
.mobile-form select,
.mobile-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 16px;
}

/* Mobile Buttons */
.mobile-button-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.mobile-button-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.mobile-button-group.horizontal .btn {
  flex: 1;
  min-width: 0;
}

/* Mobile Navigation */
.mobile-nav-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.mobile-nav-tabs .nav-tab {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
}

.mobile-nav-tabs .nav-tab.active {
  border-bottom-color: #3b82f6;
  color: #3b82f6;
}

/* Mobile Stats */
.mobile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.mobile-stats .stat-card {
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.mobile-stats .stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.mobile-stats .stat-label {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Mobile Lists */
.mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-list .list-item {
  padding: 0.75rem;
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

/* Mobile Alerts */
.mobile-alert {
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border-left: 4px solid;
}

.mobile-alert.success {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #166534;
}

.mobile-alert.warning {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}

.mobile-alert.error {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.mobile-alert.info {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

/* ===== UTILITY CLASSES ===== */
.text-break {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.overflow-hidden-mobile {
  overflow: hidden;
}

.max-w-mobile {
  max-width: 100%;
}

.w-mobile {
  width: 100%;
  max-width: 100%;
}

.h-mobile {
  height: 100vh;
}

/* ===== DROPDOWN Z-INDEX FIXES ===== */
.dropdown-menu {
  z-index: var(--tm-z-dropdown) !important;
}

.notification-dropdown {
  z-index: var(--tm-z-dropdown) !important;
}

.profile-dropdown {
  z-index: var(--tm-z-dropdown) !important;
}

/* Navbar dropdown positioning */
nav .relative {
  position: relative;
  z-index: 10000;
}

nav .absolute {
  z-index: var(--tm-z-dropdown) !important;
}

/* ===== LOADING OVERLAY FIXES ===== */
#loading-overlay {
  z-index: 10001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#loading-overlay .bg-white {
  max-width: 90vw !important;
  width: auto !important;
  min-width: 280px !important;
}

/* Mobile loading overlay optimizations */
@media (max-width: 768px) {
  #loading-overlay .bg-white {
    max-width: 95vw !important;
    margin: 1rem !important;
    padding: 1rem !important;
  }
  
  #loading-overlay h3 {
    font-size: 1rem !important;
  }
  
  #loading-overlay p {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  #loading-overlay .bg-white {
    max-width: 98vw !important;
    margin: 0.5rem !important;
    padding: 0.75rem !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  * {
    max-width: none !important;
    overflow: visible !important;
  }
}

/* ===== TOAST (MOBILE) - more compact ===== */
@media (max-width: 480px) {
  /* JS ile üretilen (bootstrap olmayan) toast'lar */
  #toastContainer > div:not(.toast),
  #toast-container > div:not(.toast) {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
    max-width: calc(100% - 20px) !important;
  }

  /* Bootstrap toast'lar için daha küçük body */
  #toastContainer .toast-body,
  #toast-container .toast-body,
  .toast-container .toast-body {
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
  }
}