.form-group {
     margin-bottom: 1rem;
 }


/* Make container wider for better space utilization */
.container {
     max-width: 95% !important;
}

/* Mobile: Use full width with minimal margins */
@media screen and (max-width: 768px) {
     .container {
          max-width: 100% !important;
          padding-left: 0.5rem !important;
          padding-right: 0.5rem !important;
     }
}

@media (min-width: 1280px) {
     .container {
          max-width: 1400px !important;
     }
}

/* Mobile Menu Styles */
.mobile-menu {
     transform: translateX(-100%);
     transition: transform 0.3s ease-in-out;
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     width: 280px;
     background: white;
     z-index: 1000;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
     transform: translateX(0);
}

/* Mobile Menu Backdrop */
#mobileMenuBackdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
}

/* Hamburger menu animation */
.hamburger {
     cursor: pointer;
     transition: all 0.3s ease;
}

.hamburger:hover {
     opacity: 0.7;
}

/* Force hide mobile elements on desktop with high specificity */
button.mobile-menu-btn.hamburger,
.mobile-menu-btn.hamburger,
.mobile-menu-btn {
     display: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
     pointer-events: none !important;
}

div.mobile-menu,
.mobile-menu {
     display: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
     pointer-events: none !important;
}

/* Ensure desktop nav is always visible on desktop */
nav.desktop-nav,
.desktop-nav {
     display: flex !important;
     visibility: visible !important;
     opacity: 1 !important;
}

/* Mobile styles ONLY - override desktop rules */
@media screen and (max-width: 768px) {
     /* Hide desktop navigation on mobile */
     nav.desktop-nav,
     .desktop-nav {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
     }
     
     /* Show mobile elements on mobile */
     button.mobile-menu-btn.hamburger,
     .mobile-menu-btn.hamburger,
     .mobile-menu-btn {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
          pointer-events: auto !important;
     }
     
     div.mobile-menu,
     .mobile-menu {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
          pointer-events: auto !important;
     }

     /* Force hide desktop tables on mobile */
     .desktop-table,
     .hidden.md\\:block {
          display: none !important;
     }
     
     /* Force show mobile cards on mobile */
     .mobile-cards,
     .md\\:hidden {
          display: block !important;
     }
}

/* Mobile Responsive Utilities */
@media screen and (max-width: 768px) {
     /* Force mobile layout - more aggressive approach */
     .desktop-table {
          display: none !important;
          visibility: hidden !important;
     }
     
     .mobile-cards {
          display: block !important;
          visibility: visible !important;
     }
     
     /* Also target any table containers */
     .overflow-x-auto table {
          display: none !important;
     }
     
     /* Keep section backgrounds white but remove shadows and rounded corners */
     .bg-white.rounded-lg.shadow-md,
     .bg-white.rounded-lg.shadow,
     .bg-white.shadow-md,
     .bg-white.shadow {
          background: white !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          border: 1px solid #e5e7eb !important;
          padding: 0.75rem !important;
          margin-bottom: 1rem !important;
     }
     
     /* Keep main containers white */
     .container .bg-white {
          background: white !important;
     }
     
     /* Keep dashboard sections with white background and subtle border */
     .bg-white.rounded-lg.shadow-md.overflow-hidden,
     .bg-white.rounded-lg.shadow.overflow-hidden {
          background: white !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          border: 1px solid #e5e7eb !important;
          padding: 0.75rem !important;
          margin-bottom: 1rem !important;
     }
     
     /* Reduce padding for section containers on mobile */
     .p-4 {
          padding: 0.75rem !important;
     }
     
     /* Keep section headers but remove card styling */
     .bg-white h2,
     .bg-white h3 {
          margin-bottom: 1rem !important;
          padding: 0 !important;
     }
     
     /* Mobile card styles for table conversions */
     .mobile-card {
          background: white !important;
          border: 1px solid #e5e7eb !important;
          border-radius: 0.5rem !important;
          padding: 1rem !important;
          margin-bottom: 0.75rem !important;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
          transition: all 0.2s ease-in-out !important;
     }
     
     .mobile-card:hover {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
          transform: translateY(-1px);
     }
     
     .mobile-card-header {
          font-weight: 700;
          font-size: 1.25rem;
          color: #111827;
          margin-bottom: 0.75rem;
          line-height: 1.3;
     }
     
     .mobile-card-field {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding: 0.75rem 0;
          border-bottom: 1px solid #f3f4f6;
     }
     
     .mobile-card-field:last-child {
          border-bottom: none;
          padding-bottom: 0;
     }
     
     .mobile-card-label {
          font-weight: 600;
          color: #6b7280;
          font-size: 0.875rem;
          min-width: 100px;
          margin-right: 1rem;
          flex-shrink: 0;
     }
     
     .mobile-card-value {
          color: #111827;
          font-size: 0.875rem;
          text-align: right;
          flex: 1;
          line-height: 1.4;
     }
     
     /* Mobile form improvements */
     .mobile-form-input {
          width: 100%;
          padding: 0.75rem;
          font-size: 16px; /* Prevents zoom on iOS */
          border: 1px solid #d1d5db;
          border-radius: 0.375rem;
     }
     
     .mobile-form-label {
          display: block;
          font-weight: 500;
          color: #374151;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
     }
     
     /* Mobile button improvements */
     .mobile-btn {
          min-height: 44px; /* iOS touch target minimum */
          padding: 0.75rem 1rem;
          font-size: 1rem;
          border-radius: 0.375rem;
          display: flex;
          align-items: center;
          justify-content: center;
     }
     
     /* Mobile table container */
     .mobile-table-container {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
     }
     
     /* Mobile calendar improvements */
     .mobile-calendar-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 1px;
          background-color: #e5e7eb;
     }
     
     .mobile-calendar-day {
          background: white;
          padding: 0.5rem;
          min-height: 60px;
          font-size: 0.875rem;
     }
     
     /* Mobile status badges */
     .mobile-status {
          display: inline-block;
          padding: 0.375rem 0.75rem;
          border-radius: 0.5rem;
          font-size: 0.75rem;
          font-weight: 600;
          text-align: center;
          min-width: 90px;
          text-transform: uppercase;
          letter-spacing: 0.025em;
     }
     
     /* Mobile spacing adjustments */
     .mobile-container {
          padding: 1rem;
     }
     
     .mobile-section {
          margin-bottom: 0.5rem;
     }
     
     /* Mobile text sizing */
     .mobile-text-sm {
          font-size: 0.875rem;
     }
     
     .mobile-text-xs {
          font-size: 0.75rem;
     }
     
     /* Mobile card spacing improvements */
     .mobile-cards {
          padding: 0.5rem 0;
     }
     
     .mobile-cards .mobile-card:last-child {
          margin-bottom: 0;
     }
     
     /* Mobile table headers */
     .mobile-cards h2 {
          font-size: 1.5rem;
          font-weight: 700;
          color: #111827;
          margin-bottom: 1rem;
     }
     
     /* Mobile button improvements */
     .mobile-cards a {
          display: inline-flex;
          align-items: center;
          padding: 0.5rem 1rem;
          background: #3b82f6;
          color: white;
          text-decoration: none;
          border-radius: 0.5rem;
          font-weight: 500;
          font-size: 0.875rem;
          transition: background-color 0.2s;
     }
     
     .mobile-cards a:hover {
          background: #2563eb;
     }
}