/* Mobile More Menu Overlay Styles */
.mobile-more-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-more-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-more-menu {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: white !important;
  border-radius: 20px 20px 0 0 !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  transform: translateY(100%) !important;
  transition: transform 0.3s ease !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
}

.mobile-more-overlay.show .mobile-more-menu {
  transform: translateY(0) !important;
}

.mobile-more-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid #e5e7eb !important;
  position: sticky !important;
  top: 0 !important;
  background: white !important;
  z-index: 1 !important;
}

.mobile-more-header h3 {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.mobile-more-header .close-btn {
  background: none !important;
  border: none !important;
  font-size: 2rem !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: background 0.2s !important;
}

.mobile-more-header .close-btn:hover {
  background: #f3f4f6 !important;
}

.mobile-more-content {
  padding: 0.5rem !important;
}

.mobile-more-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #374151 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  transition: background 0.2s !important;
  margin-bottom: 0.25rem !important;
}

.mobile-more-item:hover {
  background: #f3f4f6 !important;
}

.mobile-more-item svg {
  flex-shrink: 0 !important;
  color: #6b7280 !important;
}

.mobile-more-item.priority {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
  color: #6b21a8 !important;
}

.mobile-more-item.priority svg {
  color: #a855f7 !important;
}

.mobile-more-divider {
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 0.75rem 0 !important;
}

.mobile-more-user {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem !important;
  background: #f9fafb !important;
  border-radius: 12px !important;
  margin-bottom: 1rem !important;
}

.mobile-more-user .user-badge {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: white !important;
  flex-shrink: 0 !important;
}

.mobile-more-user .user-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.mobile-more-user .user-name {
  font-weight: 600 !important;
  color: #1f2937 !important;
  font-size: 1rem !important;
}

.mobile-more-user .user-role {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
}

.mobile-more-logout {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  padding: 1rem !important;
  background: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  color: #dc2626 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.mobile-more-logout:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

.mobile-more-logout svg {
  flex-shrink: 0 !important;
}

/* Hide top navbar and pinned projects on mobile */
@media (max-width: 768px) {
  .navbar {
    display: none !important;
  }
  
  /* Hide the entire pinned projects section on mobile */
  #pinned-projects {
    display: none !important;
  }
  
  /* Hide the parent section container */
  #pinned-projects-section,
  .pinned-projects-section {
    display: none !important;
  }
  
  /* Fix invoice list visibility on mobile - Override mobile-first.css */
  .card:has(#invoices-list) {
    overflow: visible !important;
  }
  
  #invoices-list {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 200px !important;
  }
  
  #invoices-list > * {
    display: block !important;
    width: 100% !important;
  }
  
  #invoices-list .table-responsive {
    display: block !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overflow: visible !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  #invoices-list .table-mobile-cards {
    min-width: unset !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  
  #invoices-list .table-mobile-cards thead {
    display: none !important;
  }
  
  #invoices-list .table-mobile-cards tbody {
    display: block !important;
    width: 100% !important;
  }
  
  #invoices-list .table-mobile-cards tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  
  #invoices-list .table-mobile-cards td {
    display: flex !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.5rem 0 !important;
    padding-left: 0 !important;
    border: none !important;
    position: relative !important;
  }
  
  #invoices-list .table-mobile-cards td:before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    display: inline-block !important;
    min-width: 100px !important;
    margin-right: 1rem !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
    flex-shrink: 0 !important;
  }
  
  #invoices-list .table-mobile-cards td[data-label="Actions"] {
    padding-top: 1rem !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 0.5rem !important;
  }
  
  #invoices-list .table-mobile-cards .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  #invoices-list .table-mobile-cards .btn {
    flex: 1 !important;
    min-width: 80px !important;
  }
}