/* Mobile Responsive Framework - Design System Uyumlu */

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

html, body {
  max-width: 100vw;
  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: 100vw;
  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: 100vw !important;
  }
  
  /* Container fixes */
  .container, .max-w-full, .w-full, .min-h-screen {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* Dashboard specific mobile improvements */
  .dashboard-container {
    padding: 0.5rem !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .main-content {
    padding-left: 0 !important;
    margin-left: 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 */
  input, select, textarea {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px !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 */
.mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1018;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  pointer-events: none;
  display: none;
}

.mobile-sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: block;
}

/* Overlay kapalıyken kesinlikle görünmez ve tıklanamaz olmalı */
.mobile-sidebar-overlay:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  backdrop-filter: none !important;
}

/* Ensure sidebar is above overlay and clickable */
.sidebar {
  z-index: 1020 !important;
  pointer-events: auto !important;
}

.sidebar.mobile-open {
  z-index: 1020 !important;
  pointer-events: auto !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;
  }
  
  /* Hide desktop sidebar on mobile by default */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    transform: none !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 99999 !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: #f8fafc !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    position: fixed !important;
  }
  
  /* Show sidebar when mobile-open class is present */
  .sidebar.mobile-open {
    left: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
    position: fixed !important;
  }
  
  /* Ensure collapsed sidebar stays hidden on mobile */
  .sidebar.collapsed {
    left: -100% !important;
    visibility: hidden;
    opacity: 0;
    display: none;
    pointer-events: auto;
  }
  
  /* Override collapsed when mobile-open is present */
  .sidebar.collapsed.mobile-open {
    left: 0 !important;
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto !important;
    z-index: 99999 !important;
  }
  
  /* Remove hover effects on mobile */
  .sidebar.collapsed:hover {
    left: -100% !important;
    width: 280px !important;
    transform: none !important;
  }
  
  .sidebar:hover {
    left: -100% !important;
    width: 280px !important;
    transform: none !important;
  }
  
  /* Mobile sidebar header adjustments */
  .sidebar-header {
    padding: 1rem !important;
    min-height: 70px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
  }
  
  .sidebar-brand {
    gap: 0.75rem !important;
  }
  
  .brand-title {
    font-size: 1.125rem !important;
    color: white !important;
    font-weight: 700 !important;
  }
  
  .brand-subtitle {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.8) !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 */
  .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 */
  .sidebar,
  .sidebar * {
    pointer-events: auto !important;
    z-index: 10000 !important;
  }
  
  /* Specifically ensure nav elements are clickable */
  .sidebar a,
  .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: 99999 !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, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #1e40af !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 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;
  }
  
  .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;
  }
  
  .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;
  }
  
  .nav-sublink:active {
    background: #e2e8f0 !important;
    transform: translateX(4px) scale(0.98) !important;
  }
  
  .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;
  }
  
  .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,
  .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 */
  .main-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-top: 4rem !important; /* Space for mobile hamburger menu */
  }
  
  /* Ensure main content is not affected by sidebar on mobile */
  .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;
  }
  
  .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;
  }
  
  .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: 100vw;
}

.w-mobile {
  width: 100vw;
}

.h-mobile {
  height: 100vh;
}

/* ===== DROPDOWN Z-INDEX FIXES ===== */
.dropdown-menu {
  z-index: 9999 !important;
}

.notification-dropdown {
  z-index: 9999 !important;
}

.profile-dropdown {
  z-index: 9999 !important;
}

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

nav .absolute {
  z-index: 9999 !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: 100vw !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;
  }
}