/**
 * BIMS Responsive Styles - Device-Specific Optimizations
 *
 * Target Devices:
 * - PHONE-BIMS: 375x812 (iPhone 12 Pro size)
 * - PHONE-BIMS-LARGE: 430x932 (iPhone 14 Pro Max)
 * - TABLET-BIMS: 768x1024 (iPad Portrait)
 * - TABLET-BIMS-LANDSCAPE: 1024x768 (iPad Landscape)
 *
 * Breakpoints:
 * - Desktop: >= 1025px (portrait) AND >= 1280px (landscape)
 * - Tablet Landscape: 1024x768 (landscape orientation)
 * - Tablet Portrait: 768-1023px
 * - Phone Large: 430-767px
 * - Phone Small: < 430px
 */

/* ========================================
   DESKTOP VIEW - DO NOT TOUCH
   >= 1025px portrait OR >= 1280px landscape
======================================== */

/* Desktop: Ensure announcement button stays compact (not full-width) */
@media (min-width: 768px) {
  .bg-white.rounded-xl.shadow-sm > .flex.items-center.justify-between.mb-6 {
    flex-direction: row !important;
    align-items: center !important;
  }

  /* CRITICAL FIX: Create Project button must stay compact on desktop */
  #createProjectBtn {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .bg-white.rounded-xl.shadow-sm > .flex.items-center.justify-between.mb-6 button {
    width: auto !important;
    flex-shrink: 0 !important;
  }
}

/* ========================================
   MOBILE NAVIGATION SYSTEM
   Only visible on tablet and mobile
======================================== */

/* Mobile Nav Bar - HIDDEN on desktop by default */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(135deg, #2f6e4e 0%, #3d8b64 100%);
  box-shadow: 0 4px 20px rgba(47, 110, 78, 0.25);
  z-index: 1000;
  padding: 0 1rem;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: space-between;
}

/* Show mobile nav on ALL non-desktop devices including tablet landscape */
@media (max-width: 1024px) {
  .mobile-nav {
    display: flex;
  }
}

/* CRITICAL: Also show on tablet landscape (1024x768) */
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
  .mobile-nav {
    display: flex;
  }
}

/* Hamburger Menu Button */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

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

.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
  color: white;
}

/* Mobile Nav Logo - HIDE to remove white rectangle */
.mobile-nav img {
  display: none !important; /* Hide logo entirely to remove white rectangle */
}

.mobile-nav span {
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

/* Sidebar Overlay */
.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
   SIDEBAR BEHAVIOR (All Non-Desktop Devices)
   Applies to: Phones, Tablets (portrait & landscape)
======================================== */

@media (max-width: 1024px),
       (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
  /* Transform sidebar to slide-out drawer - CRITICAL: Hide immediately on page load */
  aside {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw;
    transform: translateX(-100%) !important; /* Hidden by default, no FOUC */
    z-index: 1001;
    overflow-y: auto;
  }

  /* Add transition only after .sidebar class is added (prevents animation on page load) */
  aside.sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  aside.sidebar.active {
    transform: translateX(0) !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2);
  }

  /* FIX: Remove top padding from sidebar content on mobile to make logo flush with top */
  aside > .p-6,
  aside > div.p-6 {
    padding-top: 1rem !important;
  }

  /* FIX: Remove overflow-hidden and h-screen constraints */
  body .flex.h-screen {
    display: block !important;
    height: auto !important; /* Remove viewport height lock */
    overflow: visible !important; /* Allow scrolling */
    min-height: 100vh; /* Ensure full page height */
  }

  /* Main content adjustments - FIX: Match mobile nav height (no gap) */
  .flex.h-screen > main,
  .flex.h-screen > .flex-1,
  main.flex-1 {
    margin-left: 0 !important;
    padding-top: 64px !important; /* Match mobile nav height exactly (no gap) */
    overflow: visible !important; /* Allow content to flow */
  }

  /* Ensure the flex-1 wrapper allows scrolling */
  .flex.h-screen > .flex-1.overflow-auto {
    overflow: visible !important;
    height: auto !important;
  }

  /* Body should allow scrolling */
  body {
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Allow vertical scroll */
  }
}


/* ========================================
   MOBILE HEADER FIXES
   Overrides for mobile header to ensure proper alignment and spacing.
======================================== */

/* Small Phones (< 430px) */
@media (max-width: 429px) {
  /* Header container - reduce right padding */
  header.bg-gradient-to-r > div.px-8.py-6 {
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Actions section - remove extra spacing */
  header.bg-gradient-to-r div.space-x-4 {
    gap: 0.5rem !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  /* Profile section - remove padding */
  header.bg-gradient-to-r .space-x-3.px-3.py-2 {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Notification button - compact */
  header.bg-gradient-to-r button[onclick*="Notification"] {
    padding: 0.375rem !important;
  }
}

/* Large Phones (430px - 767px) */
@media (min-width: 430px) and (max-width: 767px) {
  /* Header container - reduce right padding */
  header.bg-gradient-to-r > div.px-8.py-6 {
    padding-left: 1.25rem !important;
    padding-right: 0.75rem !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* Actions section - remove extra spacing */
  header.bg-gradient-to-r div.space-x-4 {
    gap: 0.5rem !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  /* Profile section - remove padding */
  header.bg-gradient-to-r .space-x-3.px-3.py-2 {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Notification button - compact */
  header.bg-gradient-to-r button[onclick*="Notification"] {
    padding: 0.5rem !important;
  }
}

/* ========================================
   TABLET STYLES (768px - 1023px)
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Statistics cards - 2 columns */
  .grid.grid-cols-1.md\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Wider sidebar on tablet */
  aside.sidebar {
    width: 300px !important;
  }
}

/* ========================================
   MOBILE STYLES (< 768px)
======================================== */

@media (max-width: 767px) {
  /* Statistics cards - single column */
  .grid.grid-cols-1.md\:grid-cols-5,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Card optimizations */
  .rounded-2xl.shadow-md.p-6,
  .rounded-xl.shadow-md.p-6 {
    padding: 1.25rem;
  }

  /* Slightly smaller numbers */
  .text-4xl.font-extrabold {
    font-size: 2rem;
  }

  /* Form inputs - prevent iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Single column forms */
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  /* Better padding on mobile */
  .p-8 {
    padding: 1.25rem;
  }

  .px-8 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Toast notifications repositioned */
  div[style*="z-index: 10000"] {
    top: 80px !important;
    right: 1rem !important;
    left: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* ========================================
   TOUCH OPTIMIZATIONS (All Non-Desktop)
======================================== */

@media (max-width: 1024px),
       (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
  /* Minimum touch targets */
  button,
  a,
  [role="button"] {
    min-height: 44px;
  }

  /* Better focus states */
  *:focus-visible {
    outline: 2px solid #2f6e4e;
    outline-offset: 2px;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
}

/* ========================================
   GLOBAL TOUCH IMPROVEMENTS
======================================== */

* {
  -webkit-tap-highlight-color: rgba(47, 110, 78, 0.1);
}

/* Prevent text selection on interactive elements */
button,
.btn,
[role="button"] {
  -webkit-user-select: none;
  user-select: none;
}

/* FIX: Mobile viewport height issues (iOS Safari dynamic toolbar) */
@media (max-width: 1024px),
       (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
  html {
    height: -webkit-fill-available;
  }

  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* ========================================
   UTILITY CLASSES
======================================== */

/* Hide on desktop, show on mobile/tablet */
.show-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .show-mobile {
    display: block;
  }
}

/* Hide on mobile/tablet, show on desktop */
.hide-mobile {
  display: block;
}

@media (max-width: 1023px) {
  .hide-mobile {
    display: none;
  }
}

/* Hide only on phone */
.hide-phone {
  display: block;
}

@media (max-width: 767px) {
  .hide-phone {
    display: none;
  }
}

/* ========================================
   DEVICE-SPECIFIC OPTIMIZATIONS
======================================== */

/* TABLET-BIMS-LANDSCAPE: 1024x768 (iPad Landscape) */
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape),
       (min-width: 1024px) and (max-width: 1280px) and (max-height: 800px) and (orientation: landscape) {
  /* Use 3-column grid for landscape tablets */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Use 3-column for stats */
  .grid.grid-cols-1.md\:grid-cols-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Reduce main content padding */
  main.flex-1 {
    padding-top: 70px !important;
  }

  /* Optimize mobile nav height */
  .mobile-nav {
    height: 56px !important;
  }

  /* Smaller sidebar on landscape */
  aside.sidebar {
    width: 260px !important;
  }

  /* Tighter content padding */
  .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .py-6 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* TABLET-BIMS: 768x1024 (iPad Portrait) */
@media (min-width: 768px) and (max-width: 768px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* 2-column grid works well */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Compact sidebar */
  aside.sidebar {
    width: 280px !important;
  }

  /* Optimize content area */
  main.flex-1 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* PHONE-BIMS-LARGE: 430x932 (Large Phones) */
@media (min-width: 430px) and (max-width: 767px) {
  /* Single column grid */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-1.md\:grid-cols-5 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Reduce mobile nav height */
  .mobile-nav {
    height: 56px !important;
  }

  /* Reduce top padding - FIX: Match mobile nav height (56px, no gap) */
  main.flex-1,
  .flex.h-screen > main,
  .flex.h-screen > .flex-1 {
    padding-top: 56px !important; /* Match tablet mobile nav height exactly */
  }

  /* Tighter card padding */
  .rounded-2xl.shadow-md.p-6,
  .rounded-xl.shadow-md.p-6 {
    padding: 1rem !important;
  }

  /* Optimize main content padding */
  .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .py-6 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Smaller header text */
  header .text-2xl {
    font-size: 1.5rem !important;
  }

  /* Compact statistics cards */
  .text-4xl.font-extrabold {
    font-size: 1.75rem !important;
  }
}

/* PHONE-BIMS: 375x812 (Small Phones - iPhone 12 Pro, etc.) */
@media (max-width: 429px) {
  /* Single column everything */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-1.md\:grid-cols-5,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }

  /* Compact mobile nav */
  .mobile-nav {
    height: 52px !important;
    padding: 0 0.75rem !important;
  }

  /* Smaller hamburger button */
  .mobile-menu-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* Reduce top padding - FIX: Match mobile nav height (52px, no gap) */
  main.flex-1,
  .flex.h-screen > main,
  .flex.h-screen > .flex-1 {
    padding-top: 52px !important; /* Match small phone mobile nav height exactly */
  }

  /* Very tight card padding */
  .rounded-2xl.shadow-md.p-6,
  .rounded-xl.shadow-md.p-6 {
    padding: 0.875rem !important;
  }

  /* Minimal main padding */
  .px-6 {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .py-6 {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }

  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .p-8 {
    padding: 1rem !important;
  }

  /* Compact header */
  header .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  header .py-6 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Smaller text in header */
  header .text-2xl {
    font-size: 1.375rem !important;
    line-height: 1.75rem !important;
  }

  header .text-sm {
    font-size: 0.8125rem !important;
  }

  /* Compact statistics numbers */
  .text-4xl.font-extrabold {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  /* Smaller profile avatar */
  header .w-10.h-10 {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
  }

  /* Hide secondary text on very small screens */
  header .text-xs {
    display: none !important;
  }

  /* Compact section headers */
  .text-lg.font-bold {
    font-size: 1rem !important;
  }

  /* Smaller announcement cards */
  article .h-36 {
    height: 7rem !important;
  }

  article .w-20.h-20 {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* Compact buttons */
  button,
  .btn {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
  }

  /* Toast notifications - very compact */
  div[style*="z-index: 10000"],
  .toast {
    top: 64px !important;
    right: 0.75rem !important;
    left: 0.75rem !important;
    max-width: calc(100vw - 1.5rem) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* Narrower sidebar */
  aside.sidebar {
    width: 260px !important;
  }

  /* Compact sidebar items */
  aside nav a {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  aside nav .w-9.h-9 {
    width: 2rem !important;
    height: 2rem !important;
  }

  aside nav .w-5.h-5 {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }
}

/* ========================================
   SMALL PHONE FIXES (All Devices < 768px)
   Critical UI/UX Fixes for Mobile Experience
======================================== */

@media (max-width: 767px) {
  /* FIX 1: Modal Positioning - Prevent Overlap with Mobile Nav */
  /* Modern responsive approach: Use natural padding instead of forced positioning */

  /* For modals that DON'T have responsive padding built-in (legacy modals) */
  .fixed.inset-0.z-50 .flex.items-center.justify-center.min-h-screen,
  [id*="Modal"]:not(#projectViewModal):not(#evaluationModal):not(#downloadReportModal) .flex.items-center.justify-center.min-h-screen,
  [id*="modal"]:not(#projectViewModal):not(#evaluationModal):not(#downloadReportModal) .flex.items-center.justify-center.min-h-screen {
    padding-top: 80px !important; /* Mobile nav height + buffer */
    padding-bottom: 16px !important; /* Bottom spacing */
    align-items: flex-start !important; /* Align to top instead of center */
    min-height: 100vh !important;
  }

  /* SK Dashboard & Youth Dashboard modals - Modern responsive pattern */
  /* Mobile: Align to top with proper header spacing + padding for content */
  #createModal,
  #editModal,
  #viewModal,
  #deleteModal,
  #budgetEditModal,
  #announcementModal,
  #profileModal,
  #testimonyConfirmModal,
  #confirmModal,
  #notificationModal,
  #decisionModal {
    padding-top: 80px !important; /* Header height + buffer */
    padding-left: 0.5rem !important; /* p-2 for mobile (matches sk-projects.html) */
    padding-right: 0.5rem !important;
    padding-bottom: 1rem !important; /* Bottom spacing */
    align-items: flex-start !important; /* Align to top instead of center */
  }

  /* Modal content max height - Mobile optimized (account for header) */
  #createModal > div,
  #editModal > div,
  #viewModal > div,
  #deleteModal > div,
  #budgetEditModal > div,
  #announcementModal > div,
  #profileModal > div,
  #testimonyConfirmModal > div,
  #confirmModal > div,
  #notificationModal > div,
  #decisionModal > div {
    max-height: calc(100vh - 96px) !important; /* Full viewport minus header + padding */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* iOS smooth scrolling */
  }

  /* TESTING - COMMENTED OUT   /* Notification Dropdown Modal - Mobile Responsive */ */
  /* TESTING - COMMENTED OUT   #notificationModal { */
  /* TESTING - COMMENTED OUT     width: calc(100vw - 1.5rem) !important; /* Full width minus margins */ */
  /* TESTING - COMMENTED OUT     right: 0.75rem !important; /* Smaller margin */ */
  /* TESTING - COMMENTED OUT     left: 0.75rem !important; */
  /* TESTING - COMMENTED OUT     top: 60px !important; /* Closer to mobile nav */ */
  /* TESTING - COMMENTED OUT     max-width: 100% !important; */
  /* TESTING - COMMENTED OUT     max-height: calc(100vh - 70px) !important; /* Prevent overflow */ */
  /* TESTING - COMMENTED OUT   } */

  /* Notification modal content - ensure it scrolls properly on mobile */
  /* TESTING - COMMENTED OUT   #notificationModal #notificationList { */
  /* TESTING - COMMENTED OUT     max-height: calc(100vh - 200px) !important; /* Account for header and modal header */ */
  /* TESTING - COMMENTED OUT     overflow-y: auto !important; */
  /* TESTING - COMMENTED OUT     -webkit-overflow-scrolling: touch !important; */
  /* TESTING - COMMENTED OUT   } */

  /* Modal Button Alignment Fix - Ensure buttons align vertically */
  #createModal .flex.justify-end.space-x-3,
  #editModal .flex.justify-end.space-x-3 {
    align-items: center !important; /* Ensure vertical alignment */
  }

  #createModal button,
  #editModal button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important; /* Ensure consistent height */
  }

  /* Header Login/Sign Up Button Padding - Reduce on Mobile */
  /* More specific selectors to override Tailwind classes */
  nav a[href="login.html"],
  nav .flex.items-center.space-x-3 a[href="login.html"],
  a[href="login.html"].px-5 {
    padding-left: 0.75rem !important; /* px-3 instead of px-5 */
    padding-right: 0.75rem !important;
  }

  nav a[href="login.html"],
  nav .flex.items-center.space-x-3 a[href="login.html"],
  a[href="login.html"].py-2\.5 {
    padding-top: 0.375rem !important; /* Reduced vertical padding */
    padding-bottom: 0.375rem !important; /* Reduced bottom padding */
  }

  nav a[href="signup.html"],
  nav .flex.items-center.space-x-3 a[href="signup.html"],
  a[href="signup.html"].px-6 {
    padding-left: 1rem !important; /* px-4 instead of px-6 */
    padding-right: 1rem !important;
  }

  nav a[href="signup.html"],
  nav .flex.items-center.space-x-3 a[href="signup.html"],
  a[href="signup.html"].py-2\.5 {
    padding-top: 0.375rem !important; /* Reduced vertical padding */
    padding-bottom: 0.375rem !important; /* Reduced bottom padding */
  }

  /* General modal content max height adjustment */
  .fixed.inset-0 .max-h-\[90vh\],
  .fixed.inset-0.z-50 .max-h-\[90vh\],
  [id*="Modal"] .max-h-\[90vh\],
  [id*="modal"] .max-h-\[90vh\] {
    max-height: 95vh !important; /* Mobile gets more space */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* iOS smooth scrolling */
  }

  /* Edit Application Modal - Ensure scrollable */
  #editApplicationModal .max-h-\[90vh\] {
    max-height: calc(100vh - 100px) !important; /* Extra space for mobile nav */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure modal wrapper allows scrolling */
  #editApplicationModal.overflow-y-auto {
    overflow-y: auto !important;
    max-height: 100vh !important;
  }

  /* Edit Application Modal - Form spacing for small screens */
  #editApplicationModal .p-6 {
    padding: 1rem !important;
  }

  /* Edit Application Modal - Reduce input padding */
  #editApplicationModal input,
  #editApplicationModal select {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }

  /* Edit Application Modal - Grid spacing */
  #editApplicationModal .grid {
    gap: 0.75rem !important;
  }

  /* Edit Application Modal - Space-y spacing */
  #editApplicationModal .space-y-4 {
    gap: 0.75rem !important;
  }

  /* FIX 2: FullCalendar Toolbar - Make Responsive */
  .fc .fc-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }

  .fc .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Calendar title - smaller on mobile */
  .fc .fc-toolbar-title {
    font-size: 1.125rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Calendar buttons - better spacing */
  .fc .fc-button {
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.625rem !important;
  }

  .fc .fc-button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }

  /* ===== CALENDAR RESPONSIVE FIXES - SMALL PHONES ===== */

  /* Calendar container - allow horizontal scroll on very small screens */
  #calendar {
    width: 100% !important;
    min-height: 400px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Force calendar to be visible and have height */
  .fc {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 400px !important;
  }

  .fc-view-harness {
    height: auto !important;
    min-height: 400px !important;
  }

  /* Ensure calendar view is visible */
  .fc-view {
    display: block !important;
    visibility: visible !important;
  }

  /* Calendar day grid - set minimum widths */
  .fc .fc-scrollgrid {
    min-width: 100% !important;
    display: table !important;
    visibility: visible !important;
    border-collapse: collapse !important;
  }

  /* Force all calendar table parts to display */
  .fc .fc-scrollgrid-section,
  .fc .fc-scrollgrid-section-header,
  .fc .fc-scrollgrid-section-body,
  .fc .fc-scrollgrid-section-footer {
    display: table-row-group !important;
    visibility: visible !important;
  }

  .fc .fc-daygrid-body,
  .fc .fc-col-header,
  .fc thead,
  .fc tbody {
    display: table-row-group !important;
    visibility: visible !important;
  }

  /* Table rows */
  .fc tr {
    display: table-row !important;
    visibility: visible !important;
  }

  /* Day cells - ensure minimum touch-friendly size */
  .fc .fc-daygrid-day,
  .fc .fc-col-header-cell,
  .fc td,
  .fc th {
    min-height: 50px !important;
    display: table-cell !important;
    visibility: visible !important;
    border: 1px solid #e5e7eb !important;
  }

  /* Day frame inside cells */
  .fc .fc-daygrid-day-frame {
    display: block !important;
    min-height: 48px !important;
    visibility: visible !important;
  }

  /* Day top (where date number appears) */
  .fc .fc-daygrid-day-top {
    display: flex !important;
    visibility: visible !important;
  }

  /* Day numbers - larger and more readable */
  .fc .fc-daygrid-day-number {
    font-size: 0.875rem !important;
    padding: 4px !important;
  }

  /* Column headers (day names) - more readable */
  .fc .fc-col-header-cell {
    font-size: 0.75rem !important;
    padding: 8px 4px !important;
  }

  /* Events in calendar - better sizing */
  .fc .fc-event {
    font-size: 0.6875rem !important;
    padding: 2px 4px !important;
    margin: 1px !important;
  }

  .fc .fc-event-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Time grid (week/day view) - better sizing */
  .fc .fc-timegrid-slot {
    height: 2.5rem !important;
  }

  .fc .fc-timegrid-event {
    font-size: 0.75rem !important;
  }

  /* Calendar wrapper - prevent overflow */
  .bg-white.rounded-xl:has(#calendar) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* FIX 3: Search Bar Layout - Stack Vertically */
  /* Search container should stack - covers all search/filter patterns */
  .flex.items-center.gap-4:has(#projectSearch),
  .flex.items-center.gap-4:has(#fileSearch),
  .flex.items-center.gap-4:has([id*="search" i]),
  .flex.items-center.gap-4:has([id*="Search"]),
  .mb-6.flex.items-center.gap-4:has(input[type="text"]),
  .mb-6.flex.items-center.gap-4:has(select),
  .flex.items-center.gap-4:has(#categoryFilter),
  .flex.items-center.gap-4:has(#filterCategory) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  /* Search input full width */
  .flex-1.relative:has(input[type="text"]),
  .flex-1:has(#projectSearch),
  .flex-1:has(#fileSearch) {
    flex: none !important;
    width: 100% !important;
  }

  /* All search inputs full width */
  #projectSearch,
  #fileSearch,
  input[type="text"][placeholder*="Search" i],
  input[type="text"][placeholder*="search" i] {
    width: 100% !important;
  }

  /* Filter select and button full width */
  select[id*="Filter"],
  select[id*="filter"],
  #categoryFilter,
  #filterCategory,
  button:has(+ select),
  .flex.items-center.gap-4 button,
  .mb-6.flex.items-center.gap-4 button {
    width: 100% !important;
    min-width: 100% !important;
  }


  /* FIX 4: My Applications Cards - Force Single Column */
  #myApplicationsGrid,
  [id*="application" i].grid,
  .grid:has([class*="application" i]) {
    grid-template-columns: 1fr !important;
  }

  /* FIX 4.1: My Applications Card Content - Stack on Mobile */
  /* Application card flex layout - better wrapping */
  #myApplicationsGrid .flex.items-start.gap-4,
  [id*="application" i] .flex.items-start.gap-4 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Status icon - smaller on mobile */
  #myApplicationsGrid .w-12.h-12,
  [id*="application" i] .w-12.h-12 {
    width: 2.5rem !important; /* 40px instead of 48px */
    height: 2.5rem !important;
  }

  /* Right section - full width on mobile */
  #myApplicationsGrid .text-right.flex.flex-col,
  [id*="application" i] .text-right.flex.flex-col {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Button container - wrap buttons */
  #myApplicationsGrid .flex.gap-2:has(button),
  [id*="application" i] .flex.gap-2:has(button) {
    flex-wrap: wrap !important;
  }

  /* Card padding - more compact */
  #myApplicationsGrid .p-4,
  [id*="application" i] .p-4 {
    padding: 0.875rem !important;
  }

  /* FIX 5: Apply Modal Form Grid - Responsive Columns */
  .grid.grid-cols-8 {
    grid-template-columns: 1fr !important;
  }

  .grid.grid-cols-8 > * {
    grid-column: span 1 !important;
  }

  /* All multi-column grids in modals become single column */
  [id*="Modal"] .grid.grid-cols-2,
  [id*="Modal"] .grid.grid-cols-3,
  [id*="Modal"] .grid.grid-cols-4,
  [id*="modal"] .grid.grid-cols-2,
  [id*="modal"] .grid.grid-cols-3,
  [id*="modal"] .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* FIX 5.1: Profile Modal Grid - Force Single Column on Mobile */
  #profileModal .grid {
    grid-template-columns: 1fr !important;
  }

  /* FIX 5.2: Profile Modal content padding and spacing for mobile */
  #profileModal .p-6 {
    padding: 1rem !important; /* Reduce overall padding */
  }

  #profileModal #profileForm.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem !important; /* Reduce vertical spacing between sections */
  }

  #profileModal .grid.gap-4 {
    gap: 0.75rem !important; /* Reduce grid item spacing */
  }

  /* FIX 5.4: Ensure labels are left-aligned within profile modal on mobile */
  #profileModal label {
    text-align: left !important;
  }

  /* FIX 5.5: Further ensure even spacing and alignment for all form elements within profile modal */
  #profileModal label,
  #profileModal input,
  #profileModal select,
  #profileModal textarea,
  #profileModal button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important; /* Ensure consistent box model */
  }

  #profileModal input,
  #profileModal select,
  #profileModal textarea {
    padding-left: 0.75rem !important; /* Standardize input padding */
    padding-right: 0.75rem !important;
  }

  /* FIX 5.2: Profile Modal content padding on mobile */
  #profileModal .p-6 {
    padding: 1rem !important; /* Reduced from 1.5rem (p-6) to 1rem (p-4 equivalent) */
  }

  /* FIX 5.3: Profile Modal form spacing on mobile */
  #profileModal #profileForm.space-y-6 {
    margin-top: 1rem !important; /* Reduced from 1.5rem (space-y-6) to 1rem (space-y-4 equivalent) */
  }

  /* FIX 6: File Cards/Lists - Prevent Overflow */
  /* File name truncation */
  [class*="file" i] .text-sm,
  [class*="file" i] .font-medium,
  [id*="file" i] .text-sm,
  [id*="file" i] .font-medium {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* File cards responsive */
  [class*="file" i].grid,
  [id*="file" i].grid {
    grid-template-columns: 1fr !important;
  }

  /* FIX: File Icons - Smaller on Mobile */
  /* Target file type icons (PDF, XLSX, PNG, etc.) */
  .w-10.h-10.rounded-lg.flex.items-center.justify-center {
    width: 2rem !important; /* 32px instead of 40px */
    height: 2rem !important;
    font-size: 0.625rem !important; /* 10px for text inside */
    font-weight: 700 !important;
  }

  /* File card flex container - better wrapping */
  .flex.items-center.mb-3:has(.w-10.h-10) {
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }

  /* File name in card - ensure it doesn't overflow */
  .flex.items-center.mb-3 .ml-3 {
    margin-left: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .flex.items-center.mb-3 .font-semibold {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Table responsive - scroll horizontally */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* FIX 7: Share Your Experience / Testimony Cards */
  [class*="testimony" i],
  [class*="experience" i],
  [id*="testimony" i],
  [id*="experience" i] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Testimony cards grid */
  .grid:has([class*="testimony" i]),
  .grid:has([class*="experience" i]) {
    grid-template-columns: 1fr !important;
  }

  /* FIX 8: Modal Headers - Compact on Small Screens */
  [id*="Modal"] .p-6.border-b,
  [id*="modal"] .p-6.border-b {
    padding: 1rem !important;
  }

  [id*="Modal"] h2,
  [id*="Modal"] h3,
  [id*="modal"] h2,
  [id*="modal"] h3 {
    font-size: 1.25rem !important;
  }

  /* FIX 9: Prevent Horizontal Overflow on Cards */
  .rounded-xl,
  .rounded-2xl,
  .rounded-lg {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* FIX 10: Better Touch Targets in Modals */
  [id*="Modal"] button,
  [id*="modal"] button {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
  }

  /* FIX 11: Form Inputs in Modals - Full Width */
  [id*="Modal"] input,
  [id*="Modal"] select,
  [id*="Modal"] textarea,
  [id*="modal"] input,
  [id*="modal"] select,
  [id*="modal"] textarea {
    width: 100% !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  /* FIX 12: Project Cards Status Badges */
  .grid article .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

/* PHONE-BIMS SMALL (375px) - Additional Compact Fixes */
@media (max-width: 429px) {
  /* Even more compact modals */
  [id*="Modal"] .p-6,
  [id*="modal"] .p-6 {
    padding: 0.875rem !important;
  }

  /* Calendar even more compact */
  .fc .fc-toolbar-title {
    font-size: 1rem !important;
  }

  .fc .fc-button {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Search button text shorter */
  button:has(+ select)::after,
  .flex.items-center.gap-4 button {
    font-size: 0.875rem !important;
  }

  /* Modal close buttons more visible */
  [id*="Modal"] button[onclick*="close"],
  [id*="modal"] button[onclick*="close"] {
    padding: 0.5rem !important;
    min-height: 40px !important;
    min-width: 40px !important;
  }

  /* FIX: File Icons - Even Smaller on Tiny Screens */
  .w-10.h-10.rounded-lg.flex.items-center.justify-center {
    width: 1.75rem !important; /* 28px for tiny screens */
    height: 1.75rem !important;
    font-size: 0.5625rem !important; /* 9px */
  }

  /* File card padding - more compact */
  .border.border-gray-200.rounded-xl.p-5 {
    padding: 0.875rem !important;
  }

  /* My Applications - Extra Compact on 375px */
  #myApplicationsGrid .w-12.h-12,
  [id*="application" i] .w-12.h-12 {
    width: 2rem !important; /* 32px for tiny screens */
    height: 2rem !important;
  }

  /* Status badge text smaller */
  #myApplicationsGrid .text-xs,
  [id*="application" i] .text-xs {
    font-size: 0.6875rem !important; /* 11px */
  }

  /* Buttons more compact */
  #myApplicationsGrid button,
  [id*="application" i] button {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important; /* 13px */
  }

  /* ========================================
     SK & CAPTAIN DASHBOARD FIXES
     Issues: Cramped buttons, tabs, modals
  ======================================== */

  /* FIX 10: SK Dashboard - Manage Announcements Header (MOBILE ONLY) */
  /* Stack heading and button in announcement sections - ONLY ON MOBILE */
  @media (max-width: 767px) {
    .bg-white.rounded-xl.shadow-sm > .flex.items-center.justify-between.mb-6 {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 1rem !important;
    }

    /* Full width button on mobile */
    .bg-white.rounded-xl.shadow-sm > .flex.items-center.justify-between.mb-6 button {
      width: 100% !important;
      justify-content: center !important;
    }
  }

  /* FIX 11: SK Projects - Action Bar - MOVED TO SMALL PHONE SECTION */
  /* This fix now only applies to phones < 430px */
  /* See line 913+ for small phone implementation */
  /* See line 1567+ for large phone horizontal layout */

  /* FIX 12: Project View Modal - Tabs Navigation */
  /* Make tabs scrollable and prevent cut-off */
  .border-b.border-gray-200.bg-white.px-6 nav.flex {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin !important;
  }

  /* Tab buttons - smaller padding, prevent wrapping */
  .tab-btn,
  button[onclick*="switchTab"] {
    padding: 0.75rem 1rem !important;
    font-size: 0.8125rem !important; /* 13px */
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Reduce space between tabs - SPECIFIC to modal tabs only */
  #projectViewModal nav.flex.space-x-8,
  .border-b.border-gray-200.bg-white.px-6 nav.flex {
    gap: 0.5rem !important;
  }

  #projectViewModal nav.flex.space-x-8 > *,
  .border-b.border-gray-200.bg-white.px-6 nav.flex > * {
    margin-right: 0 !important;
  }

  /* FIX 13: Download PDF Button & Generate Attendance */
  /* Stack heading and button vertically in modal sections */
  .mt-6.pt-6.border-t .flex.items-center.justify-between.mb-4,
  .flex.items-center.justify-between.mb-4:has(h3) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  /* Download PDF button full width */
  button[onclick*="generateAttendancePDF"],
  .mt-6.pt-6.border-t button.px-6.py-3 {
    width: 100% !important;
    justify-content: center !important;
  }

  /* FIX 14: Modal Footer Buttons (Cancel + Submit) */
  /* Ensure buttons stack on ALL phone screens (up to 767px) */
  @media (max-width: 767px) {
    .p-6.border-t.flex.justify-end.gap-3 {
      flex-direction: column !important;
      gap: 0.75rem !important;
    }

    .p-6.border-t.flex.justify-end.gap-3 button {
      width: 100% !important;
      justify-content: center !important;
    }
  }

  /* FIX 15: SK Archive - Generate Bulk Reports Section */
  /* Stack heading and download button */
  .bg-gradient-to-r.from-\[#2f6e4e\]\/10 .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  /* Download Selected Reports button full width */
  button[onclick*="generateBulkReports"],
  .bg-gradient-to-r button.px-6.py-3 {
    width: 100% !important;
    justify-content: center !important;
  }

  /* FIX 15.1: Bulk Reports - Selection Controls Below */
  /* Stack the selection info section vertically */
  .bg-gradient-to-r .mt-4.pt-4.border-t .flex.items-center.justify-between.text-sm {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  /* Selection controls container - stack vertically */
  .bg-gradient-to-r .flex.items-center.space-x-6 {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .bg-gradient-to-r .flex.items-center.space-x-6 > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Selected count - full width with proper spacing */
  .bg-gradient-to-r .flex.items-center.space-x-6 > span {
    width: 100% !important;
    padding: 0.5rem !important;
    background: white !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
  }

  /* Buttons full width */
  button[onclick*="selectAllFiltered"],
  button[onclick*="deselectAll"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.625rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    background: white !important;
  }

  /* Instruction text full width */
  .bg-gradient-to-r .mt-4.pt-4.border-t .text-gray-500 {
    width: 100% !important;
    text-align: left !important;
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.4 !important;
    padding: 0.5rem !important;
    background: white !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
  }

  /* FIX 16: Archive Project Cards */
  /* Ensure cards don't get cramped */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Card content spacing */
  .border.border-gray-200.rounded-xl.p-4,
  .bg-white.rounded-xl.p-6 {
    padding: 1rem !important;
  }

  /* FIX 16.1: Enhanced Archive Project Cards Design */
  /* Better visual hierarchy and mobile optimization */

  /* Archive cards - enhanced styling */
  #projectsList > div {
    padding: 1.25rem !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  #projectsList > div:hover {
    box-shadow: 0 4px 12px rgba(47, 110, 78, 0.08) !important;
    border-color: #d1d5db !important;
  }

  /* Card header - stack on mobile */
  #projectsList .flex.items-start.justify-between.mb-4 {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Title section with checkbox */
  #projectsList .flex.items-center.space-x-3.flex-1 {
    width: 100% !important;
    align-items: flex-start !important;
  }

  /* Checkbox - larger touch target */
  #projectsList input[type="checkbox"] {
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important;
    margin-top: 0.125rem !important;
    flex-shrink: 0 !important;
  }

  /* Project title - better hierarchy */
  #projectsList h3 {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.4 !important;
    margin-bottom: 0.625rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
  }

  /* Success badge - more prominent */
  #projectsList .px-3.py-1.text-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  /* Metadata section (date/quarter) - better spacing */
  #projectsList .flex.items-center.space-x-4.text-sm {
    margin-top: 0.5rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.375rem !important;
  }

  #projectsList .flex.items-center.space-x-4.text-sm > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #projectsList .flex.items-center.space-x-4.text-sm span {
    font-size: 0.8125rem !important; /* 13px */
    color: #6b7280 !important;
  }

  /* View Details button - full width on mobile */
  #projectsList button[onclick*="viewProject"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(47, 110, 78, 0.2) !important;
  }

  #projectsList button[onclick*="viewProject"]:hover {
    box-shadow: 0 4px 8px rgba(47, 110, 78, 0.3) !important;
    transform: translateY(-1px) !important;
  }

  /* Metrics grid - force 2 columns on mobile */
  #projectsList .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  /* Metric cards - enhanced design */
  #projectsList .bg-gray-50.rounded-lg.p-3 {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    padding: 0.875rem !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  }

  /* Metric labels */
  #projectsList .bg-gray-50.rounded-lg.p-3 .text-xs.text-gray-500 {
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #6b7280 !important;
    margin-bottom: 0.375rem !important;
  }

  /* Metric values */
  #projectsList .bg-gray-50.rounded-lg.p-3 .font-semibold {
    font-size: 1.125rem !important; /* 18px */
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
  }

  /* Spent amount under budget */
  #projectsList .bg-gray-50.rounded-lg.p-3 .text-xs.text-gray-500:last-child {
    font-size: 0.6875rem !important;
    margin-top: 0.25rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* Overall Success Rate section - enhanced */
  #projectsList .space-y-2 {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #a7f3d0 !important;
    margin-top: 1rem !important;
  }

  /* Success rate label and value */
  #projectsList .space-y-2 .flex.items-center.justify-between {
    margin-bottom: 0.625rem !important;
  }

  #projectsList .space-y-2 .text-gray-600 {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #047857 !important;
  }

  #projectsList .space-y-2 .font-semibold.text-gray-800 {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 800 !important;
    color: #065f46 !important;
  }

  /* Progress bar - sophisticated design */
  #projectsList .w-full.bg-gray-200.rounded-full {
    background: #e5e7eb !important;
    height: 0.5rem !important; /* 8px */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
  }

  #projectsList .w-full.bg-gray-200.rounded-full > div {
    height: 0.5rem !important;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.4) !important;
    transition: width 0.6s ease-out !important;
  }

  /* Selected state - enhanced ring */
  #projectsList > div.ring-2 {
    border-color: #3d8b64 !important;
    box-shadow: 0 0 0 3px rgba(61, 139, 100, 0.1), 0 4px 12px rgba(47, 110, 78, 0.15) !important;
  }

  /* FIX 18: Archive Project View Modal - Action Buttons */
  /* Stack Permanent Delete, Download Report, and Close buttons vertically */

  /* Modal actions container - stack vertically */
  #projectModal .flex.justify-between.items-center.pt-4.border-t {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }

  /* Permanent Delete button - full width */
  #projectModal button[onclick*="confirmPermanentDelete"] {
    width: 100% !important;
    justify-content: center !important;
    order: 3 !important; /* Move to bottom for safety */
  }

  /* Right side buttons container - full width, stack */
  #projectModal .flex.justify-between.items-center.pt-4.border-t > .flex.space-x-3 {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  #projectModal .flex.space-x-3 > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Download Report dropdown container - full width */
  #projectModal .flex.space-x-3 > .relative {
    width: 100% !important;
  }

  /* Download Report button - full width */
  #projectModal button[onclick*="toggleDownloadMenu"] {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Download dropdown menu - adjust position for mobile */
  #downloadMenu {
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    top: 100% !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  /* Close button - full width */
  #projectModal button[onclick*="closeModal"]:not(.text-gray-400) {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Modal header close button (X) - keep as is */
  #projectModal .sticky.top-0 button[onclick*="closeModal"] {
    width: auto !important;
  }
}

  /* FIX 17: Captain Dashboard - Approval Workflow Tabs */
  /* Make tabs scrollable on small screens */
  nav.flex.-mb-px {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin !important;
    gap: 0 !important;
  }

  /* Approval tabs - compact padding */
  .approval-tab,
  button[onclick*="switchTab"] {
    padding: 0.75rem 1rem !important;
    font-size: 0.8125rem !important; /* 13px */
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Tab badge - smaller */
  .approval-tab span.ml-2,
  button[onclick*="switchTab"] span {
    font-size: 0.625rem !important; /* 10px */
    padding: 0.125rem 0.375rem !important;
  }

  /* FIX 11: SK Projects - Action Bar (SMALL PHONES ONLY - Stack Vertically) */
  /* Stack search, filter, and create project button vertically on small phones */
  .flex.justify-between.items-center.mb-6:has(#projectSearch),
  .flex.justify-between.items-center.mb-6:has(#categoryFilter) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  /* Search container full width */
  .flex.items-center.gap-4.flex-1:has(#projectSearch) {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* All inputs and selects full width on small phones */
  #projectSearch,
  #categoryFilter {
    width: 100% !important;
    min-width: 100% !important;
  }


  /* FIX: View Applicants Tab - Cramped Layout */

  /* Applicants filter bar - stack vertically */
  #tabContentApplicants .mb-4.flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.875rem !important;
  }

  /* Status filter dropdown - full width */
  #applicantStatusFilter {
    width: 100% !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  /* Status badges container - stack or wrap */
  #tabContentApplicants .flex.gap-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #tabContentApplicants .flex.gap-2 span {
    font-size: 0.6875rem !important; /* 11px */
    padding: 0.375rem 0.625rem !important;
  }

  /* Applicant cards - stack name and status */
  #applicantsList > div {
    padding: 0.875rem !important; /* More compact */
  }

  #applicantsList > div > .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  #applicantsList > div .flex-1 {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  #applicantsList > div .flex-1 h4 {
    font-size: 0.9375rem !important; /* 15px */
  }

  #applicantsList > div .flex-1 p {
    font-size: 0.8125rem !important; /* 13px */
  }

  /* Status badge and attendance checkbox row */
  #applicantsList > div .flex.items-center.gap-3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  #applicantsList > div .flex.items-center.gap-3 label {
    font-size: 0.8125rem !important; /* 13px */
  }

  #applicantsList > div .flex.items-center.gap-3 span.px-3 {
    font-size: 0.6875rem !important; /* 11px */
    padding: 0.375rem 0.625rem !important;
  }

  /* Attendance generator section - stack vertically */
  #tabContentApplicants .mt-6.pt-6 .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.875rem !important;
  }

  #tabContentApplicants .mt-6.pt-6 h3 {
    font-size: 1rem !important; /* 16px */
  }

  #tabContentApplicants .mt-6.pt-6 p {
    font-size: 0.8125rem !important; /* 13px */
  }

  #tabContentApplicants .mt-6.pt-6 button {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* ========================================
   LARGE PHONE OPTIMIZATIONS (430px - 767px)
   COMPREHENSIVE: All 29 fixes scaled for larger mobile screens
   Better spacing, smarter layouts, larger touch targets
======================================== */

@media (min-width: 430px) and (max-width: 767px) {

  /* ===== GENERAL TYPOGRAPHY & SPACING ===== */

  /* More generous padding for cards and sections */
  #projectsList > div,
  .bg-white.rounded-xl.shadow-sm {
    padding: 1.5rem !important;
  }

  /* Heading hierarchy - larger on 430px */
  h3.text-xl {
    font-size: 1.25rem !important; /* 20px vs 18px on 375px */
  }

  h3.text-lg {
    font-size: 1.125rem !important; /* 18px vs 16px */
  }

  h2 {
    font-size: 1.375rem !important; /* 22px vs 20px */
  }

  /* Better margin spacing - 20% more generous */
  .mb-4 {
    margin-bottom: 1.25rem !important;
  }

  .mb-6 {
    margin-bottom: 1.75rem !important;
  }

  /* More generous gaps */
  .grid.gap-4,
  .flex.gap-4 {
    gap: 1rem !important;
  }


  /* ===== FIX 3: FULLCALENDAR TOOLBAR ===== */

  /* Calendar title - larger and more prominent */
  .fc .fc-toolbar-title {
    font-size: 1.25rem !important; /* 20px vs 18px on 375px */
    font-weight: 700 !important;
  }

  /* Calendar buttons - larger and more comfortable */
  .fc .fc-button {
    font-size: 0.875rem !important; /* 14px vs 13px on 375px */
    padding: 0.5rem 0.875rem !important; /* More padding */
    min-height: 40px !important; /* Better touch target */
  }

  /* Calendar toolbar gap */
  .fc .fc-toolbar {
    gap: 1rem !important; /* vs 0.75rem on 375px */
  }

  .fc .fc-toolbar-chunk {
    gap: 0.625rem !important; /* vs 0.5rem */
  }

  .fc .fc-button-group {
    gap: 0.5rem !important; /* vs 0.375rem */
  }

  /* ===== CALENDAR RESPONSIVE FIXES - LARGE PHONES ===== */

  /* Calendar container - better sizing */
  #calendar {
    width: 100% !important;
    min-height: 500px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Force calendar to be visible and have height */
  .fc {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 500px !important;
  }

  .fc-view-harness {
    height: auto !important;
    min-height: 500px !important;
  }

  /* Ensure calendar view is visible */
  .fc-view {
    display: block !important;
    visibility: visible !important;
  }

  /* Calendar day grid - ensure visibility */
  .fc .fc-scrollgrid {
    min-width: 100% !important;
    display: table !important;
    visibility: visible !important;
    border-collapse: collapse !important;
  }

  /* Force all calendar table parts to display */
  .fc .fc-scrollgrid-section,
  .fc .fc-scrollgrid-section-header,
  .fc .fc-scrollgrid-section-body,
  .fc .fc-scrollgrid-section-footer {
    display: table-row-group !important;
    visibility: visible !important;
  }

  .fc .fc-daygrid-body,
  .fc .fc-col-header,
  .fc thead,
  .fc tbody {
    display: table-row-group !important;
    visibility: visible !important;
  }

  /* Table rows */
  .fc tr {
    display: table-row !important;
    visibility: visible !important;
  }

  /* Day cells - larger touch targets */
  .fc .fc-daygrid-day,
  .fc .fc-col-header-cell,
  .fc td,
  .fc th {
    min-height: 60px !important; /* vs 50px on 375px */
    display: table-cell !important;
    visibility: visible !important;
    border: 1px solid #e5e7eb !important;
  }

  /* Day frame inside cells */
  .fc .fc-daygrid-day-frame {
    display: block !important;
    min-height: 58px !important;
    visibility: visible !important;
  }

  /* Day top (where date number appears) */
  .fc .fc-daygrid-day-top {
    display: flex !important;
    visibility: visible !important;
  }

  /* Day numbers - more readable */
  .fc .fc-daygrid-day-number {
    font-size: 1rem !important; /* vs 0.875rem on 375px */
    padding: 6px !important; /* vs 4px */
  }

  /* Column headers - larger and clearer */
  .fc .fc-col-header-cell {
    font-size: 0.875rem !important; /* vs 0.75rem on 375px */
    padding: 10px 6px !important; /* vs 8px 4px */
  }

  /* Events - more readable */
  .fc .fc-event {
    font-size: 0.75rem !important; /* vs 0.6875rem on 375px */
    padding: 3px 6px !important; /* vs 2px 4px */
    margin: 2px !important; /* vs 1px */
  }

  .fc .fc-event-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Time grid - better spacing */
  .fc .fc-timegrid-slot {
    height: 3rem !important; /* vs 2.5rem on 375px */
  }

  .fc .fc-timegrid-event {
    font-size: 0.875rem !important; /* vs 0.75rem on 375px */
  }

  /* Calendar wrapper - prevent overflow */
  .bg-white.rounded-xl:has(#calendar) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }


  /* ===== FIX 5: MY APPLICATIONS CARDS ===== */

  /* Icons larger on big phones */
  #myApplicationsGrid .w-12.h-12 {
    width: 2.75rem !important; /* 44px vs 32px on 375px */
    height: 2.75rem !important;
    font-size: 1.125rem !important; /* Larger icon text */
  }

  /* Status badge text larger */
  #myApplicationsGrid .text-xs {
    font-size: 0.75rem !important; /* 12px vs 11px */
  }

  /* Button text more comfortable */
  #myApplicationsGrid button {
    padding: 0.5rem 1rem !important; /* vs 0.375rem 0.75rem */
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Card padding more generous */
  #myApplicationsGrid .p-4 {
    padding: 1.125rem !important; /* 18px vs 14px on 375px */
  }


  /* ===== FIX 7.1: FILE ICONS ===== */

  /* File icons larger */
  .w-10.h-10.rounded-lg.flex.items-center.justify-center {
    width: 2.25rem !important; /* 36px vs 28px on 375px */
    height: 2.25rem !important;
    font-size: 0.6875rem !important; /* 11px vs 9px */
  }

  /* File cards padding */
  .border.border-gray-200.rounded-xl.p-5 {
    padding: 1.125rem !important; /* 18px vs 14px on 375px */
  }


  /* ===== FIX 10: SK DASHBOARD - MANAGE ANNOUNCEMENTS ===== */

  /* Header can stay horizontal with smart sizing */
  .bg-white.rounded-xl.shadow-sm > .flex.items-center.justify-between.mb-6 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  .bg-white.rounded-xl.shadow-sm > .flex.items-center.justify-between.mb-6 h3 {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .bg-white.rounded-xl.shadow-sm > .flex.items-center.justify-between.mb-6 button {
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important; /* 14px */
  }


  /* ===== FIX 11: SK PROJECTS - SEARCH BAR LAYOUT (ALL ON ONE LINE) ===== */

  /* CRITICAL: Direct targeting of search bar parent container */
  #projectSearch {
    flex: 1 1 auto !important;
    min-width: 100px !important;
    max-width: none !important;
    font-size: 0.8125rem !important; /* 13px */
    padding: 0.5rem 0.75rem !important; /* Compact padding */
  }

  #categoryFilter {
    flex: 0 0 auto !important;
    width: 80px !important;
    min-width: 80px !important;
    font-size: 0.75rem !important; /* 12px */
    padding: 0.5rem 0.375rem !important;
  }

  /* Target the search button by its onclick attribute */
  button[onclick="applyFilters()"] {
    flex: 0 0 auto !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important; /* 12px */
    white-space: nowrap !important;
  }

  /* Target Create Project button directly */
  #createProjectBtn {
    flex: 0 0 auto !important;
    margin-left: 0.375rem !important; /* 6px gap */
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important; /* 12px */
    white-space: nowrap !important;
  }

  /* FORCE the parent container to stay horizontal */
  #projectSearch,
  #categoryFilter {
    /* This targets their parent div */
  }

  /* Use adjacent sibling to target parent - more specific */
  #projectSearch:first-child {
    /* Ensures search stays first in flex */
  }

  /* Universal fix for the entire action bar */
  .px-6.py-6 > div > div.flex.justify-between {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.375rem !important;
  }

  .px-6.py-6 > div > div.flex.justify-between > div.flex-1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.375rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }


  /* ===== FIX 12: SK PROJECTS - INQUIRIES TABS ===== */

  /* Tabs more comfortable sizing */
  .tab-btn,
  button[onclick*="switchTab"] {
    padding: 0.875rem 1.25rem !important; /* vs 0.75rem 1rem on 375px */
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Tab spacing - SPECIFIC to modal tabs only */
  #projectViewModal nav.flex.space-x-8,
  .border-b.border-gray-200.bg-white.px-6 nav.flex {
    gap: 0.75rem !important; /* vs 0.5rem */
  }


  /* ===== FIX: VIEW APPLICANTS TAB - LARGE PHONE OPTIMIZATION ===== */

  /* Applicants filter bar - can keep horizontal on large phones */
  #tabContentApplicants .mb-4.flex.items-center.justify-between {
    flex-direction: row !important; /* Horizontal on 430px */
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important; /* Allow wrapping if needed */
  }

  /* Status filter dropdown - auto width */
  #applicantStatusFilter {
    width: auto !important;
    min-width: 120px !important;
    padding: 0.625rem 0.875rem !important; /* Slightly more padding */
    font-size: 0.875rem !important;
  }

  /* Status badges container - horizontal */
  #tabContentApplicants .flex.gap-2 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.625rem !important;
  }

  #tabContentApplicants .flex.gap-2 span {
    font-size: 0.75rem !important; /* 12px vs 11px small */
    padding: 0.375rem 0.75rem !important; /* More padding */
  }

  /* Applicant cards - more generous spacing */
  #applicantsList > div {
    padding: 1rem !important; /* vs 0.875rem on small */
  }

  #applicantsList > div > .flex.items-center.justify-between {
    flex-direction: row !important; /* Horizontal on large phones */
    align-items: center !important;
    gap: 1rem !important;
  }

  #applicantsList > div .flex-1 {
    width: auto !important;
    margin-bottom: 0 !important;
  }

  #applicantsList > div .flex-1 h4 {
    font-size: 1rem !important; /* 16px vs 15px */
  }

  #applicantsList > div .flex-1 p {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Status badge and attendance - more space */
  #applicantsList > div .flex.items-center.gap-3 {
    gap: 0.75rem !important;
    width: auto !important;
  }

  #applicantsList > div .flex.items-center.gap-3 label {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  #applicantsList > div .flex.items-center.gap-3 span.px-3 {
    font-size: 0.75rem !important; /* 12px vs 11px */
    padding: 0.375rem 0.75rem !important;
  }

  /* Attendance generator - horizontal on large phones */
  #tabContentApplicants .mt-6.pt-6 .flex.items-center.justify-between {
    flex-direction: row !important; /* Horizontal */
    align-items: center !important;
    gap: 1rem !important;
  }

  #tabContentApplicants .mt-6.pt-6 h3 {
    font-size: 1.0625rem !important; /* 17px vs 16px */
  }

  #tabContentApplicants .mt-6.pt-6 p {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  #tabContentApplicants .mt-6.pt-6 button {
    width: auto !important; /* Auto width, not full */
    flex-shrink: 0 !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
  }


  /* ===== FIX 13: SK PROJECTS - DOWNLOAD PDF BUTTON ===== */

  /* Can stay horizontal with proper sizing */
  .mt-6.pt-6.border-t .flex.items-center.justify-between.mb-4 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  .mt-6.pt-6.border-t .flex.items-center.justify-between.mb-4 h3 {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .mt-6.pt-6.border-t button.px-6.py-3 {
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.75rem 1.5rem !important; /* More comfortable */
    font-size: 0.875rem !important;
  }


  /* ===== FIX 15: SK ARCHIVE - GENERATE BULK REPORTS ===== */

  /* Header can stay horizontal */
  .bg-gradient-to-r.from-\[#2f6e4e\]\/10 .flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  /* Download Selected Reports button - auto width */
  button[onclick*="generateBulkReports"],
  .bg-gradient-to-r button.px-6.py-3 {
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.75rem 1.5rem !important;
    justify-content: center !important;
  }


  /* ===== FIX 15.1: BULK REPORTS - SELECTION CONTROLS ===== */

  /* Selection controls - smart horizontal layout */
  .bg-gradient-to-r .flex.items-center.space-x-6 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.875rem !important; /* vs 0.75rem */
  }

  /* Counter full width at top */
  .bg-gradient-to-r .flex.items-center.space-x-6 > span {
    width: 100% !important;
    padding: 0.625rem !important; /* vs 0.5rem */
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Buttons side by side - 50% each */
  button[onclick*="selectAllFiltered"],
  button[onclick*="deselectAll"] {
    flex: 1 !important;
    min-width: calc(50% - 0.4375rem) !important;
    padding: 0.75rem 1rem !important; /* vs 0.625rem */
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Instruction text larger */
  .bg-gradient-to-r .mt-4.pt-4.border-t .text-gray-500 {
    font-size: 0.875rem !important; /* 14px vs 13px */
    padding: 0.625rem !important;
  }


  /* ===== FIX 16.1: ARCHIVE CARDS - ENHANCED DESIGN (LARGE PHONE) ===== */

  /* Archive cards - more generous padding and enhanced styling */
  #projectsList > div {
    padding: 1.5rem !important; /* vs 1.25rem on 375px */
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; /* Slightly stronger */
    border-radius: 0.875rem !important; /* Larger radius */
  }

  #projectsList > div:hover {
    box-shadow: 0 4px 14px rgba(47, 110, 78, 0.1) !important; /* More prominent */
    border-color: #d1d5db !important;
  }

  /* Card header - better spacing */
  #projectsList .flex.items-start.justify-between.mb-4 {
    flex-direction: column !important;
    gap: 1.125rem !important; /* vs 1rem */
    margin-bottom: 1.125rem !important;
  }

  /* Checkbox - larger for better touch */
  #projectsList input[type="checkbox"] {
    width: 1.375rem !important; /* 22px vs 20px on 375px */
    height: 1.375rem !important;
    margin-top: 0.125rem !important;
  }

  /* Project title - larger and more prominent */
  #projectsList h3 {
    font-size: 1.125rem !important; /* 18px vs 17px on 375px */
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important; /* vs 0.625rem */
    font-weight: 700 !important;
    color: #1f2937 !important;
  }

  /* Success badge - larger and more prominent */
  #projectsList .px-3.py-1.text-xs {
    padding: 0.5rem 1rem !important; /* vs 0.375rem 0.75rem */
    font-size: 0.75rem !important; /* 12px vs 11px */
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  }

  /* Metadata section - horizontal layout on large phones */
  #projectsList .flex.items-center.space-x-4.text-sm {
    margin-top: 0.625rem !important;
    flex-direction: row !important; /* Horizontal on 430px */
    align-items: center !important;
    gap: 1rem !important;
  }

  #projectsList .flex.items-center.space-x-4.text-sm span {
    font-size: 0.8125rem !important; /* 13px vs 12px */
    color: #6b7280 !important;
  }

  /* View Details button - full width with better sizing */
  #projectsList button[onclick*="viewProject"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.75rem 1.25rem !important; /* vs 0.75rem 1rem */
    font-size: 0.875rem !important; /* 14px vs 13px */
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(47, 110, 78, 0.25) !important;
  }

  #projectsList button[onclick*="viewProject"]:hover {
    box-shadow: 0 4px 10px rgba(47, 110, 78, 0.35) !important;
    transform: translateY(-1px) !important;
  }

  /* Metrics grid - 2 columns with better spacing */
  #projectsList .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important; /* vs 0.75rem */
    margin-bottom: 1.25rem !important;
  }

  /* Metric cards - enhanced with larger sizing */
  #projectsList .bg-gray-50.rounded-lg.p-3 {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    padding: 1rem !important; /* vs 0.875rem */
    border: 1px solid #e5e7eb !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    border-radius: 0.625rem !important;
  }

  /* Metric labels - larger */
  #projectsList .bg-gray-50.rounded-lg.p-3 .text-xs.text-gray-500 {
    font-size: 0.6875rem !important; /* 11px vs 10px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #6b7280 !important;
    margin-bottom: 0.5rem !important; /* vs 0.375rem */
  }

  /* Metric values - larger and bolder */
  #projectsList .bg-gray-50.rounded-lg.p-3 .font-semibold {
    font-size: 1.25rem !important; /* 20px vs 18px */
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
  }

  /* Spent amount text */
  #projectsList .bg-gray-50.rounded-lg.p-3 .text-xs.text-gray-500:last-child {
    font-size: 0.75rem !important; /* 12px vs 11px */
    margin-top: 0.375rem !important; /* vs 0.25rem */
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* Overall Success Rate section - enhanced with better spacing */
  #projectsList .space-y-2 {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    padding: 1.25rem !important; /* vs 1rem */
    border-radius: 0.875rem !important; /* vs 0.75rem */
    border: 1px solid #a7f3d0 !important;
    margin-top: 1.25rem !important;
  }

  /* Success rate label and value spacing */
  #projectsList .space-y-2 .flex.items-center.justify-between {
    margin-bottom: 0.75rem !important; /* vs 0.625rem */
  }

  /* Success rate label - larger */
  #projectsList .space-y-2 .text-gray-600 {
    font-size: 0.8125rem !important; /* 13px vs 12px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #047857 !important;
  }

  /* Success rate value - larger and bolder */
  #projectsList .space-y-2 .font-semibold.text-gray-800 {
    font-size: 1.375rem !important; /* 22px vs 20px */
    font-weight: 800 !important;
    color: #065f46 !important;
  }

  /* Progress bar - thicker and more prominent */
  #projectsList .w-full.bg-gray-200.rounded-full {
    background: #e5e7eb !important;
    height: 0.625rem !important; /* 10px vs 8px */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
  }

  #projectsList .w-full.bg-gray-200.rounded-full > div {
    height: 0.625rem !important;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.5) !important; /* Stronger glow */
    transition: width 0.6s ease-out !important;
  }

  /* Selected state - enhanced with stronger visual feedback */
  #projectsList > div.ring-2 {
    border-color: #3d8b64 !important;
    box-shadow: 0 0 0 3px rgba(61, 139, 100, 0.12), 0 4px 14px rgba(47, 110, 78, 0.18) !important;
  }


  /* ===== FIX 18: SK ARCHIVE - MODAL ACTION BUTTONS ===== */

  /* Modal footer - Download + Close side by side, Delete below */
  #projectModal .flex.justify-between.items-center.pt-4.border-t > .flex.space-x-3 {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 0.875rem !important; /* vs 0.75rem */
  }

  #projectModal .flex.space-x-3 > .relative,
  #projectModal .flex.space-x-3 > button {
    flex: 1 !important;
    margin: 0 !important;
  }

  /* Buttons more comfortable sizing */
  #projectModal .flex.space-x-3 button {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important; /* 14px */
  }

  /* Permanent Delete still full width below for safety */
  #projectModal button[onclick*="confirmPermanentDelete"] {
    order: 3 !important;
    width: 100% !important;
    padding: 0.75rem !important;
    margin-top: 0.875rem !important;
  }


  /* ===== FIX 17: CAPTAIN DASHBOARD - APPROVAL TABS ===== */

  /* Approval tabs more comfortable */
  .approval-tab,
  button[onclick*="switchTab"] {
    padding: 0.875rem 1.25rem !important; /* vs 0.75rem 1rem on 375px */
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Tab badges larger */
  .approval-tab span.ml-2,
  button[onclick*="switchTab"] span {
    font-size: 0.6875rem !important; /* 11px vs 10px on 375px */
    padding: 0.1875rem 0.5rem !important; /* vs 0.125rem 0.375rem */
  }

  /* Tab container spacing */
  nav.flex.-mb-px {
    gap: 0.5rem !important;
  }


  /* ===== MODAL OPTIMIZATIONS ===== */

  /* Edit Application Modal - 3-column name grid */
  #editApplicationModal .grid.grid-cols-8 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.875rem !important; /* vs 0.75rem */
  }

  #editApplicationModal .col-span-3,
  #editApplicationModal .col-span-4,
  #editApplicationModal .col-span-1 {
    grid-column: span 1 !important;
  }

  /* 2-column layout for date/contact fields */
  #editApplicationModal .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.875rem !important;
  }

  /* Modal padding more generous */
  #editApplicationModal .p-6 {
    padding: 1.25rem !important; /* vs 1rem on 375px */
  }

  /* Modal inputs more comfortable */
  #editApplicationModal input,
  #editApplicationModal select {
    padding: 0.75rem 0.875rem !important; /* vs 0.625rem 0.75rem */
    font-size: 0.9375rem !important; /* 15px */
  }


  /* ===== BUTTON IMPROVEMENTS ===== */

  /* General button sizing */
  button.px-4,
  button.px-5,
  button.px-6 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    min-height: 44px !important; /* Comfortable touch target */
  }

  /* Button text sizing */
  button {
    font-size: 0.875rem !important; /* 14px default */
  }


  /* ===== INPUT IMPROVEMENTS ===== */

  /* Standard inputs more comfortable */
  input.px-4,
  select.px-4,
  textarea.px-4 {
    padding: 0.75rem 1rem !important; /* vs 0.625rem on 375px */
    font-size: 0.9375rem !important; /* 15px */
  }


  /* ===== RESPONSIVE TWEAKS ===== */

  /* Checkbox larger for better touch */
  input[type="checkbox"] {
    width: 1.25rem !important; /* 20px vs 18px */
    height: 1.25rem !important;
  }

  /* Better line heights */
  p {
    line-height: 1.6 !important;
  }

  /* Card border radius slightly larger */
  .rounded-xl {
    border-radius: 0.875rem !important; /* vs 0.75rem */
  }
}

/* ========================================
   INDEX.HTML (LANDING PAGE) - MOBILE RESPONSIVE FIXES
   All phones (< 768px) - Small and Large
======================================== */

@media (max-width: 767px) {

  /* NAVIGATION HEADER - SPECIFIC TO INDEX.HTML FIXED NAV */

  /* Logo and brand text - compact on mobile */
  nav.fixed .flex.items-center.space-x-4 {
    gap: 0.75rem !important;
  }

  nav.fixed .w-12.h-12 {
    width: 2.5rem !important; /* 40px */
    height: 2.5rem !important;
  }

  nav.fixed h1 {
    font-size: 1.25rem !important; /* 20px */
  }

  nav.fixed .text-sm {
    font-size: 0.75rem !important; /* 12px */
  }

  /* CTA buttons in nav - KEEP HORIZONTAL on mobile (INDEX.HTML ONLY) */
  nav.fixed .flex.items-center.space-x-3 {
    flex-direction: row !important;
    gap: 0.5rem !important;
    align-items: center !important;
    padding-right: 1rem !important; /* 16px from right edge */
  }

  /* Make Login button look like a button with border */
  nav.fixed .flex.items-center.space-x-3 a:first-child {
    padding: 0.375rem 0.75rem !important; /* 6px 12px */
    font-size: 0.875rem !important; /* 14px */
    border: 1px solid #2f6e4e !important;
    border-radius: 0.5rem !important;
    background: white !important;
  }

  /* Sign Up button - compact and balanced */
  nav.fixed .flex.items-center.space-x-3 a:last-child {
    padding: 0.375rem 0.75rem !important; /* 6px 12px - same as Login */
    font-size: 0.875rem !important; /* 14px */
  }


  /* HERO SECTION */

  /* Hero content spacing */
  #home .max-w-7xl {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Badge at top */
  #home .inline-block.px-4.py-2 {
    font-size: 0.75rem !important; /* 12px */
    padding: 0.5rem 0.875rem !important;
  }

  /* Main heading - smaller on mobile */
  #home h1 {
    font-size: 2rem !important; /* 32px */
    line-height: 1.2 !important;
  }

  /* Subheading */
  #home .text-xl.md\:text-2xl {
    font-size: 1rem !important; /* 16px */
  }

  #home .text-lg {
    font-size: 0.875rem !important; /* 14px */
  }

  /* CTA buttons - stack on mobile */
  #home .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  #home .flex.flex-col.sm\:flex-row a {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important; /* 15px */
  }

  /* Stats grid - 3 columns but more compact */
  #home .grid.grid-cols-3 {
    gap: 1rem !important;
    padding-top: 1.5rem !important;
  }

  #home .grid.grid-cols-3 .text-4xl {
    font-size: 1.75rem !important; /* 28px */
  }

  #home .grid.grid-cols-3 .text-sm {
    font-size: 0.6875rem !important; /* 11px */
  }


  /* FEATURES SECTION */

  /* Section headers */
  #features h2,
  #projects h2,
  #testimonials h2,
  #transparency h2 {
    font-size: 1.875rem !important; /* 30px */
  }

  #features .text-xl,
  #projects .text-xl,
  #testimonials .text-xl,
  #transparency .text-xl {
    font-size: 1rem !important; /* 16px */
  }

  /* Feature cards - single column, compact */
  #features .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #features .bg-white.p-8 {
    padding: 1.5rem !important;
  }

  #features .w-16.h-16 {
    width: 3rem !important; /* 48px */
    height: 3rem !important;
  }

  #features .w-8.h-8 {
    width: 1.75rem !important; /* 28px */
    height: 1.75rem !important;
  }

  #features h3 {
    font-size: 1.25rem !important; /* 20px */
  }


  /* PROJECTS SECTION */

  /* Filter buttons container - better design for small phones */
  #projects .inline-flex.bg-gray-100 {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    padding: 0.375rem !important; /* 6px */
    gap: 0.375rem !important; /* 6px between buttons */
    border-radius: 0.75rem !important; /* 12px */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important; /* Allow wrapping on very small screens */
    overflow: visible !important;
  }

  /* Filter buttons - improved visual design */
  #projects .filter-btn {
    padding: 0.625rem 1rem !important; /* 10px 16px */
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important; /* Flexible sizing */
    min-width: fit-content !important;
    border-radius: 0.5rem !important; /* 8px */
    transition: all 0.2s ease !important;
    background: transparent !important;
    color: #6b7280 !important;
    box-shadow: none !important;
  }

  /* Filter button hover state */
  #projects .filter-btn:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    color: #374151 !important;
  }

  /* Filter button active state */
  #projects .filter-btn.active {
    background: linear-gradient(135deg, #2f6e4e 0%, #3d8b64 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(47, 110, 78, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.1) !important;
    font-weight: 700 !important;
  }

  /* Project cards - single column */
  #projects .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #projects .project-card {
    max-width: 100% !important;
  }

  #projects .h-48 {
    height: 10rem !important; /* 160px */
  }

  #projects .p-6 {
    padding: 1.25rem !important;
  }

  #projects h3 {
    font-size: 1.125rem !important; /* 18px */
  }


  /* TESTIMONIALS SECTION */

  /* Carousel arrows - smaller and positioned better */
  #testimonials button[onclick*="Testimonial"] {
    width: 2.5rem !important; /* 40px */
    height: 2.5rem !important;
    transform: translateY(-50%) translateX(0) !important;
  }

  #testimonials button[onclick*="prevTestimonial"] {
    left: 0.5rem !important;
  }

  #testimonials button[onclick*="nextTestimonial"] {
    right: 0.5rem !important;
  }

  #testimonials button svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Testimonial cards - compact with extra bottom padding to prevent cutoff */
  #testimonialsCarousel .bg-white.p-8 {
    padding: 1.25rem !important;
    padding-bottom: 1.75rem !important; /* Extra bottom padding to prevent cutoff */
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #testimonialsCarousel .w-14.h-14 {
    width: 2.75rem !important; /* 44px */
    height: 2.75rem !important;
    font-size: 1rem !important;
  }

  #testimonialsCarousel h4 {
    font-size: 1rem !important; /* 16px */
  }

  #testimonialsCarousel .text-sm {
    font-size: 0.75rem !important; /* 12px */
  }


  /* TRANSPARENCY SECTION */

  /* Budget cards - single column */
  #transparency .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #transparency .bg-gradient-to-br {
    padding: 1.5rem !important;
  }

  #transparency h3 {
    font-size: 1.25rem !important; /* 20px */
  }

  #transparency .w-12.h-12 {
    width: 2.5rem !important; /* 40px */
    height: 2.5rem !important;
  }

  /* Header icons - Budget and Metrics cards */
  #transparency .w-14.h-14 {
    width: 2.75rem !important; /* 44px */
    height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #transparency .w-14.h-14 svg {
    width: 1.5rem !important; /* 24px */
    height: 1.5rem !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Also target SVGs with w-7/h-7 class */
  #transparency .w-14.h-14 svg.w-7,
  #transparency .w-14.h-14 svg.h-7 {
    width: 1.5rem !important; /* 24px */
    height: 1.5rem !important;
    display: block !important;
  }

  /* Small metric card icon containers */
  #transparency .w-6.h-6 {
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #transparency .w-8.h-8 {
    width: 1.5rem !important; /* 24px */
    height: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* SVG icons inside metric card containers - force visibility */
  #transparency .w-6.h-6 svg,
  #transparency .w-8.h-8 svg {
    width: 0.875rem !important; /* 14px */
    height: 0.875rem !important;
    display: block !important;
  }

  /* Also target SVGs with w-3/h-3 and w-4/h-4 classes */
  #transparency .absolute svg.w-3,
  #transparency .absolute svg.h-3,
  #transparency .absolute svg.w-4,
  #transparency .absolute svg.h-4 {
    width: 0.875rem !important; /* 14px */
    height: 0.875rem !important;
    display: block !important;
  }

  /* Metric card icon containers */
  #transparency .absolute.top-2.right-2 {
    top: 0.375rem !important;
    right: 0.375rem !important;
  }

  #transparency .text-5xl {
    font-size: 2rem !important; /* 32px */
  }

  #transparency .text-3xl {
    font-size: 1.5rem !important; /* 24px */
  }

  /* Download reports - single column */
  #transparency .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #transparency .flex.items-center.justify-between.p-6 {
    padding: 1rem !important;
  }

  #transparency .w-10.h-10 {
    width: 2rem !important; /* 32px */
    height: 2rem !important;
  }


  /* BUDGET EDIT MODAL */

  /* Modal sizing */
  #budgetEditModal .max-w-2xl {
    max-width: calc(100vw - 2rem) !important;
    margin: 1rem !important;
  }

  #budgetEditModal .p-6 {
    padding: 1.25rem !important;
  }

  #budgetEditModal h2 {
    font-size: 1.25rem !important; /* 20px */
  }

  #budgetEditModal input {
    font-size: 0.9375rem !important; /* 15px */
    padding: 0.75rem !important;
    padding-left: 2rem !important;
  }

  /* Modal footer buttons - stack on mobile */
  #budgetEditModal .flex.justify-end.space-x-3 {
    flex-direction: column-reverse !important;
    gap: 0.75rem !important;
  }

  #budgetEditModal .flex.justify-end.space-x-3 button {
    width: 100% !important;
    justify-content: center !important;
  }


  /* CTA SECTION */

  section.gradient-bg h2 {
    font-size: 1.875rem !important; /* 30px */
  }

  section.gradient-bg .text-xl {
    font-size: 1rem !important; /* 16px */
  }

  section.gradient-bg .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* CTA buttons - smaller and more compact for small phones */
  section.gradient-bg a.px-10 {
    padding: 0.625rem 1.25rem !important; /* 10px 20px - much smaller */
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25 !important;
  }


  /* FOOTER */

  /* Footer grid - 2 columns on mobile */
  footer .grid.grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  footer .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  footer h3 {
    font-size: 1rem !important; /* 16px */
  }

  footer .text-sm,
  footer ul {
    font-size: 0.8125rem !important; /* 13px */
  }
}


/* ========================================
   INDEX.HTML - LARGE PHONE OPTIMIZATIONS (430px - 767px)
   Better spacing and layouts for larger mobile screens
======================================== */

@media (min-width: 430px) and (max-width: 767px) {

  /* NAVIGATION - INDEX.HTML FIXED NAV ONLY */

  nav.fixed .w-12.h-12 {
    width: 2.75rem !important; /* 44px */
    height: 2.75rem !important;
  }

  nav.fixed h1 {
    font-size: 1.375rem !important; /* 22px */
  }

  /* CTA buttons - horizontal with proper spacing (INDEX.HTML ONLY) */
  nav.fixed .flex.items-center.space-x-3 {
    flex-direction: row !important;
    gap: 0.75rem !important; /* 12px between buttons */
    align-items: center !important;
    padding-right: 1.25rem !important; /* 20px from right edge */
  }

  /* Make Login button look like a button with border */
  nav.fixed .flex.items-center.space-x-3 a:first-child {
    padding: 0.5rem 1rem !important; /* 8px 16px */
    font-size: 0.9375rem !important; /* 15px */
    border: 1px solid #2f6e4e !important;
    border-radius: 0.5rem !important;
    background: white !important;
  }

  /* Sign Up button - compact and balanced */
  nav.fixed .flex.items-center.space-x-3 a:last-child {
    padding: 0.5rem 1rem !important; /* 8px 16px - same as Login */
    font-size: 0.9375rem !important; /* 15px */
  }


  /* HERO SECTION */

  #home h1 {
    font-size: 2.25rem !important; /* 36px vs 32px on 375px */
  }

  #home .text-xl.md\:text-2xl {
    font-size: 1.125rem !important; /* 18px vs 16px */
  }

  #home .text-lg {
    font-size: 1rem !important; /* 16px vs 14px */
  }

  /* Stats grid - more generous */
  #home .grid.grid-cols-3 {
    gap: 1.25rem !important;
  }

  #home .grid.grid-cols-3 .text-4xl {
    font-size: 2rem !important; /* 32px vs 28px */
  }

  #home .grid.grid-cols-3 .text-sm {
    font-size: 0.75rem !important; /* 12px vs 11px */
  }


  /* FEATURES SECTION */

  #features h2,
  #projects h2,
  #testimonials h2,
  #transparency h2 {
    font-size: 2.25rem !important; /* 36px vs 30px */
  }

  #features .text-xl,
  #projects .text-xl,
  #testimonials .text-xl,
  #transparency .text-xl {
    font-size: 1.125rem !important; /* 18px vs 16px */
  }

  #features .bg-white.p-8 {
    padding: 1.75rem !important; /* vs 1.5rem */
  }

  #features .w-16.h-16 {
    width: 3.5rem !important; /* 56px vs 48px */
    height: 3.5rem !important;
  }

  #features h3 {
    font-size: 1.375rem !important; /* 22px vs 20px */
  }


  /* PROJECTS SECTION */

  /* Filter buttons container - enhanced for large phones */
  #projects .inline-flex.bg-gray-100 {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    padding: 0.5rem !important; /* 8px vs 6px on small phones */
    gap: 0.5rem !important; /* 8px vs 6px */
    border-radius: 0.875rem !important; /* 14px vs 12px */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  /* Filter buttons - larger and more comfortable */
  #projects .filter-btn {
    padding: 0.75rem 1.5rem !important; /* 12px 24px */
    font-size: 0.875rem !important; /* 14px vs 13px */
    font-weight: 600 !important;
    border-radius: 0.625rem !important; /* 10px vs 8px */
    transition: all 0.2s ease !important;
  }

  /* Filter button hover state */
  #projects .filter-btn:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-1px) !important;
  }

  /* Filter button active state - enhanced */
  #projects .filter-btn.active {
    background: linear-gradient(135deg, #2f6e4e 0%, #3d8b64 100%) !important;
    color: white !important;
    box-shadow: 0 3px 8px rgba(47, 110, 78, 0.35),
                0 1px 3px rgba(0, 0, 0, 0.12) !important;
    font-weight: 700 !important;
    transform: translateY(-1px) !important;
  }

  #projects .h-48 {
    height: 11rem !important; /* 176px vs 160px */
  }

  #projects .p-6 {
    padding: 1.5rem !important; /* vs 1.25rem */
  }

  #projects h3 {
    font-size: 1.25rem !important; /* 20px vs 18px */
  }


  /* TESTIMONIALS */

  #testimonials button[onclick*="Testimonial"] {
    width: 2.75rem !important; /* 44px vs 40px */
    height: 2.75rem !important;
  }

  /* Testimonial cards - larger with extra bottom padding */
  #testimonialsCarousel .bg-white.p-8 {
    padding: 1.5rem !important; /* vs 1.25rem */
    padding-bottom: 2rem !important; /* Extra bottom padding to prevent cutoff */
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #testimonialsCarousel .w-14.h-14 {
    width: 3rem !important; /* 48px vs 44px */
    height: 3rem !important;
  }


  /* TRANSPARENCY SECTION */

  #transparency .bg-gradient-to-br {
    padding: 1.75rem !important; /* vs 1.5rem */
  }

  #transparency h3 {
    font-size: 1.375rem !important; /* 22px vs 20px */
  }

  #transparency .w-12.h-12 {
    width: 2.75rem !important; /* 44px vs 40px */
    height: 2.75rem !important;
  }

  /* Header icons - Budget and Metrics cards (large phone) */
  #transparency .w-14.h-14 {
    width: 3rem !important; /* 48px vs 44px on small phones */
    height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #transparency .w-14.h-14 svg {
    width: 1.625rem !important; /* 26px vs 24px */
    height: 1.625rem !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Also target SVGs with w-7/h-7 class */
  #transparency .w-14.h-14 svg.w-7,
  #transparency .w-14.h-14 svg.h-7 {
    width: 1.625rem !important; /* 26px vs 24px */
    height: 1.625rem !important;
    display: block !important;
  }

  /* Small metric card icon containers (large phone) */
  #transparency .w-6.h-6 {
    width: 1.375rem !important; /* 22px vs 20px */
    height: 1.375rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #transparency .w-8.h-8 {
    width: 1.625rem !important; /* 26px vs 24px */
    height: 1.625rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* SVG icons inside metric card containers - force visibility (large phone) */
  #transparency .w-6.h-6 svg,
  #transparency .w-8.h-8 svg {
    width: 1rem !important; /* 16px */
    height: 1rem !important;
    display: block !important;
  }

  /* Also target SVGs with w-3/h-3 and w-4/h-4 classes */
  #transparency .absolute svg.w-3,
  #transparency .absolute svg.h-3,
  #transparency .absolute svg.w-4,
  #transparency .absolute svg.h-4 {
    width: 1rem !important; /* 16px */
    height: 1rem !important;
    display: block !important;
  }

  /* Metric card icon containers - slightly larger positioning */
  #transparency .absolute.top-2.right-2 {
    top: 0.5rem !important;
    right: 0.5rem !important;
  }

  #transparency .text-5xl {
    font-size: 2.25rem !important; /* 36px vs 32px */
  }

  #transparency .text-3xl {
    font-size: 1.75rem !important; /* 28px vs 24px */
  }


  /* BUDGET EDIT MODAL */

  #budgetEditModal h2 {
    font-size: 1.5rem !important; /* 24px vs 20px */
  }

  #budgetEditModal input {
    padding: 0.875rem !important;
    padding-left: 2.25rem !important;
  }

  /* Modal footer - buttons can stay horizontal */
  #budgetEditModal .flex.justify-end.space-x-3 {
    flex-direction: row !important;
    gap: 0.75rem !important;
  }

  #budgetEditModal .flex.justify-end.space-x-3 button {
    width: auto !important;
    min-width: 120px !important;
  }


  /* CTA SECTION */

  section.gradient-bg h2 {
    font-size: 2.25rem !important; /* 36px vs 30px */
  }

  section.gradient-bg .text-xl {
    font-size: 1.125rem !important; /* 18px vs 16px */
  }

  /* Buttons can stay horizontal */
  section.gradient-bg .flex.flex-col.sm\:flex-row {
    flex-direction: row !important;
    gap: 1rem !important;
  }

  /* CTA buttons - compact size for large phones */
  section.gradient-bg a.px-10 {
    padding: 0.75rem 1.5rem !important; /* 12px 24px */
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.25 !important;
  }


  /* FOOTER */

  footer .grid.grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important; /* More generous */
  }

  footer h3 {
    font-size: 1.0625rem !important; /* 17px vs 16px */
  }
}


/* ========================================
   LOGIN & SIGNUP PAGES - MOBILE RESPONSIVE FIXES
   All phones (< 768px) - Compact layouts
======================================== */

@media (max-width: 767px) {

  /* ===== COMMON AUTH PAGES STYLES ===== */

  /* Main container - remove outer padding */
  body.bg-gray-100 > div.w-full.max-w-6xl {
    padding: 0.5rem !important; /* Minimal padding */
  }

  /* Split panel container - stack vertically */
  .bg-white.rounded-2xl.shadow-2xl.overflow-hidden {
    flex-direction: column !important;
    min-height: auto !important;
  }

  /* Green welcome panel - compact on mobile */
  .w-full.md\:w-1\/2.bg-gradient-to-br {
    padding: 2rem 1.5rem !important; /* 32px 24px vs 48px desktop */
    min-height: auto !important;
  }

  /* Logo container in green panel */
  .w-full.md\:w-1\/2.bg-gradient-to-br .w-12.h-12 {
    width: 2.5rem !important; /* 40px vs 48px */
    height: 2.5rem !important;
  }

  .w-full.md\:w-1\/2.bg-gradient-to-br .text-xl.font-bold {
    font-size: 1.125rem !important; /* 18px vs 20px */
  }

  /* Logo section spacing */
  .w-full.md\:w-1\/2.bg-gradient-to-br .mb-12 {
    margin-bottom: 1.5rem !important; /* 24px vs 48px */
  }

  /* Welcome heading - smaller on mobile */
  .w-full.md\:w-1\/2.bg-gradient-to-br h1 {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Welcome paragraph */
  .w-full.md\:w-1\/2.bg-gradient-to-br p {
    font-size: 0.9375rem !important; /* 15px vs 18px */
  }

  .w-full.md\:w-1\/2.bg-gradient-to-br .space-y-6 {
    gap: 1rem !important;
  }

  /* Form panel - compact padding */
  .w-full.md\:w-1\/2.p-12 {
    padding: 2rem 1.5rem !important; /* 32px 24px vs 48px */
  }

  /* Form header */
  .w-full.md\:w-1\/2.p-12 h2 {
    font-size: 1.5rem !important; /* 24px vs 48px */
  }

  .w-full.md\:w-1\/2.p-12 .mb-8 {
    margin-bottom: 1.5rem !important; /* 24px vs 32px */
  }

  .w-full.md\:w-1\/2.p-12 .mb-8 p {
    font-size: 0.8125rem !important; /* 13px vs 14px */
  }

  /* Form inputs - comfortable touch targets */
  #loginForm input[type="text"],
  #loginForm input[type="email"],
  #loginForm input[type="password"],
  #signupForm input[type="text"],
  #signupForm input[type="email"],
  #signupForm input[type="password"] {
    padding: 0.75rem 1rem !important; /* 12px 16px */
    font-size: 0.9375rem !important; /* 15px */
  }

  #loginForm input::placeholder,
  #signupForm input::placeholder {
    font-size: 0.875rem !important; /* 14px */
  }

  /* Form labels */
  #loginForm label,
  #signupForm label {
    font-size: 0.8125rem !important; /* 13px vs 14px */
    margin-bottom: 0.5rem !important;
  }

  /* Form spacing */
  #loginForm {
    gap: 1.25rem !important; /* 20px vs 24px */
  }

  #signupForm {
    gap: 1rem !important; /* 16px vs 20px - tighter for more fields */
  }

  /* Buttons - full width with proper touch targets */
  #loginForm button[type="submit"],
  #loginForm button[type="button"],
  #signupForm button[type="submit"],
  #signupForm button[type="button"] {
    padding: 0.875rem 1.5rem !important; /* 14px 24px */
    font-size: 0.9375rem !important; /* 15px */
  }

  /* Remember me & Forgot Password */
  #loginForm .flex.items-center.justify-between {
    font-size: 0.8125rem !important; /* 13px */
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }

  #loginForm .flex.items-center.justify-between input[type="checkbox"] {
    width: 1rem !important; /* 16px */
    height: 1rem !important;
  }

  /* OR divider spacing */
  #loginForm .relative:has(.border-t),
  #signupForm .relative:has(.border-t) {
    margin: 1.25rem 0 !important; /* 20px vs 24px */
  }

  /* Sign up/Sign in links */
  #loginForm .text-center p,
  #signupForm .text-center p {
    font-size: 0.8125rem !important; /* 13px */
  }

  /* Toast notifications - mobile positioning */
  .toast {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    min-width: auto !important;
    max-width: calc(100vw - 20px) !important;
    padding: 12px 16px !important; /* Slightly more compact */
  }

  .toast svg {
    width: 1.25rem !important; /* 20px vs 24px */
    height: 1.25rem !important;
  }


  /* ===== SIGNUP PAGE SPECIFIC ===== */

  /* Name fields grid - stack on mobile */
  #signupForm .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important; /* 16px */
  }

  /* Terms checkbox - compact spacing */
  #signupForm .flex.items-start input[type="checkbox"] {
    width: 1rem !important;
    height: 1rem !important;
    margin-top: 0.25rem !important;
  }

  #signupForm .flex.items-start label {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.4 !important;
  }

}


/* ========================================
   LOGIN & SIGNUP PAGES - LARGE PHONE OPTIMIZATIONS (430px - 767px)
   Better spacing and sizing for larger mobile screens
======================================== */

@media (min-width: 430px) and (max-width: 767px) {

  /* Main container - slightly more padding */
  body.bg-gray-100 > div.w-full.max-w-6xl {
    padding: 0.75rem !important;
  }

  /* Green welcome panel - more generous padding */
  .w-full.md\:w-1\/2.bg-gradient-to-br {
    padding: 2.5rem 2rem !important; /* 40px 32px */
  }

  /* Logo container */
  .w-full.md\:w-1\/2.bg-gradient-to-br .w-12.h-12 {
    width: 2.75rem !important; /* 44px vs 40px on small phones */
    height: 2.75rem !important;
  }

  .w-full.md\:w-1\/2.bg-gradient-to-br .text-xl.font-bold {
    font-size: 1.1875rem !important; /* 19px vs 18px */
  }

  .w-full.md\:w-1\/2.bg-gradient-to-br .mb-12 {
    margin-bottom: 2rem !important; /* 32px vs 24px */
  }

  /* Welcome heading - larger on bigger phones */
  .w-full.md\:w-1\/2.bg-gradient-to-br h1 {
    font-size: 2rem !important; /* 32px vs 28px on small phones */
  }

  /* Welcome paragraph */
  .w-full.md\:w-1\/2.bg-gradient-to-br p {
    font-size: 1rem !important; /* 16px vs 15px */
  }

  /* Form panel - more generous padding */
  .w-full.md\:w-1\/2.p-12 {
    padding: 2.5rem 2rem !important; /* 40px 32px */
  }

  /* Form header */
  .w-full.md\:w-1\/2.p-12 h2 {
    font-size: 1.625rem !important; /* 26px vs 24px */
  }

  .w-full.md\:w-1\/2.p-12 .mb-8 {
    margin-bottom: 1.75rem !important; /* 28px */
  }

  .w-full.md\:w-1\/2.p-12 .mb-8 p {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Form inputs - slightly larger */
  #loginForm input[type="text"],
  #loginForm input[type="email"],
  #loginForm input[type="password"],
  #signupForm input[type="text"],
  #signupForm input[type="email"],
  #signupForm input[type="password"] {
    padding: 0.875rem 1rem !important; /* 14px 16px vs 12px 16px */
    font-size: 1rem !important; /* 16px vs 15px */
  }

  #loginForm input::placeholder,
  #signupForm input::placeholder {
    font-size: 0.9375rem !important; /* 15px vs 14px */
  }

  /* Form labels */
  #loginForm label,
  #signupForm label {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  /* Form spacing - more generous */
  #loginForm {
    gap: 1.5rem !important; /* 24px vs 20px */
  }

  #signupForm {
    gap: 1.25rem !important; /* 20px vs 16px */
  }

  /* Buttons - more comfortable sizing */
  #loginForm button[type="submit"],
  #loginForm button[type="button"],
  #signupForm button[type="submit"],
  #signupForm button[type="button"] {
    padding: 1rem 1.5rem !important; /* 16px 24px vs 14px 24px */
    font-size: 1rem !important; /* 16px vs 15px */
  }

  /* Remember me & Forgot Password */
  #loginForm .flex.items-center.justify-between {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

  #loginForm .flex.items-center.justify-between input[type="checkbox"] {
    width: 1.125rem !important; /* 18px vs 16px */
    height: 1.125rem !important;
  }

  /* Sign up/Sign in links */
  #loginForm .text-center p,
  #signupForm .text-center p {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }


  /* ===== SIGNUP PAGE SPECIFIC ===== */

  /* Name and Password fields - stack on all phones */
  #signupForm .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important; /* Single column on all phones */
    gap: 1rem !important;
  }

  /* Terms checkbox - larger */
  #signupForm .flex.items-start input[type="checkbox"] {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  #signupForm .flex.items-start label {
    font-size: 0.875rem !important; /* 14px vs 13px */
  }

}


/* Extra compact for very small phones (< 430px) */
@media (max-width: 429px) {
  /* Even more compact tabs */
  .tab-btn,
  .approval-tab,
  button[onclick*="switchTab"] {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.75rem !important; /* 12px */
  }

  /* Smaller heading text in sections */
  h3.text-xl {
    font-size: 1.125rem !important; /* 18px instead of 20px */
  }

  h3.text-lg {
    font-size: 1rem !important; /* 16px instead of 18px */
  }

  /* Button text smaller */
  button span {
    font-size: 0.8125rem !important; /* 13px */
  }
}

/* ========================================
   BARANGAY CAPTAIN DASHBOARD - HEADER
   Phone screens (< 768px)
======================================== */

/* ===== PHONE SMALL (< 430px) ===== */
@media (max-width: 429px) {

  /* Logo hidden globally - no phone-specific overrides needed */

  .mobile-nav span {
    font-size: 1rem !important; /* 16px for fallback text */
  }

  /* NOTIFICATION MODAL - FIX CUT OFF ON SMALL PHONES */
  /* TESTING - COMMENTED OUT   #notificationModal { */
  /* TESTING - COMMENTED OUT     position: fixed !important; */
  /* TESTING - COMMENTED OUT     top: 56px !important; /* Below mobile nav (52px + 4px gap) */ */
  /* TESTING - COMMENTED OUT     left: 0.5rem !important; /* 8px from left */ */
  /* TESTING - COMMENTED OUT     right: 0.5rem !important; /* 8px from right */ */
  /* TESTING - COMMENTED OUT     width: auto !important; /* Override w-96 (384px) */ */
  /* TESTING - COMMENTED OUT     max-width: calc(100vw - 1rem) !important; /* Ensure it fits */ */
  /* TESTING - COMMENTED OUT   } */
  /* TESTING - COMMENTED OUT  */
  /* TESTING - COMMENTED OUT   /* Notification list - compact height */ */
  /* TESTING - COMMENTED OUT   #notificationModal .max-h-96 { */
  /* TESTING - COMMENTED OUT     max-height: 18rem !important; /* 288px instead of 384px */ */
  /* TESTING - COMMENTED OUT   } */

  /* HEADER CONTAINER - COMPACT PADDING */
  header.bg-gradient-to-r {
    padding: 0 !important; /* Remove default padding */
  }

  header.bg-gradient-to-r > div {
    padding: 1rem 1rem !important; /* 16px all around - very compact */
  }

  /* HEADER LAYOUT - INDUSTRY STANDARD: Single row, icons only */
  header.bg-gradient-to-r .flex.items-center.justify-between {
    flex-direction: row !important; /* CRITICAL: Keep horizontal, never column */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important; /* 12px gap */
  }

  /* Title section - allow text truncation if needed */
  header.bg-gradient-to-r > div > div.flex.items-center.justify-between > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Enable text truncation */
    max-width: calc(100% - 100px) !important; /* Reserve space for icons */
  }

  /* Actions section - compact icon-only layout */
  header.bg-gradient-to-r > div > div.flex.items-center.justify-between > div.flex.items-center {
    flex: 0 0 auto !important;
    gap: 0.375rem !important; /* 6px tight spacing between bell and avatar */
  }

  /* NOTIFICATION BUTTON - Generic selector for all notification buttons */
  header.bg-gradient-to-r button[onclick*="Notification"],
  header.bg-gradient-to-r .relative > button {
    padding: 0.5rem !important; /* 8px */
  }

  header.bg-gradient-to-r button[onclick*="Notification"] svg,
  header.bg-gradient-to-r .relative > button svg {
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important;
  }

  /* DATE TEXT - READABLE SIZE */
  header.bg-gradient-to-r p#currentDate {
    font-size: 0.6875rem !important; /* 11px */
    margin-bottom: 0.25rem !important; /* 4px */
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
  }

  /* TITLE - COMPACT BUT READABLE */
  header.bg-gradient-to-r h1 {
    font-size: 1.125rem !important; /* 18px instead of 24px */
    line-height: 1.4 !important;
    margin-bottom: 0.25rem !important;
  }

  /* DESCRIPTION - HIDE on mobile (industry standard: reduce clutter) */
  header.bg-gradient-to-r p.text-sm.text-gray-600 {
    display: none !important; /* Too verbose for 375px screens */
  }

  /* Remove old code - no longer needed with single-row layout */

  /* NOTIFICATION BELL - COMPACT */
  header.bg-gradient-to-r .notification-icon,
  header.bg-gradient-to-r button[onclick*="Notification"],
  header.bg-gradient-to-r button[title*="Notification"] {
    padding: 0.5rem !important; /* 8px */
  }

  header.bg-gradient-to-r .notification-icon svg,
  header.bg-gradient-to-r button[onclick*="Notification"] svg,
  header.bg-gradient-to-r button[title*="Notification"] svg {
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important;
  }

  /* Notification Badge - Consistent for both SK and Youth pages */
  header.bg-gradient-to-r #notificationBadge,
  header.bg-gradient-to-r #notificationCount {
    width: 1rem !important; /* 16px */
    height: 1rem !important;
    font-size: 0.625rem !important; /* 10px */
    top: -0.25rem !important;
    right: -0.25rem !important;
  }

  /* PROFILE INFO - HIDE on mobile (industry standard: icon-only) */
  header.bg-gradient-to-r .text-right {
    display: none !important; /* Avatar only, no text */
  }

  /* PROFILE AVATAR - SMALLER (Generic for all pages) */
  header.bg-gradient-to-r #headerAvatar,
  header.bg-gradient-to-r button[onclick*="Profile"] .rounded-full,
  header.bg-gradient-to-r .flex.items-center .rounded-full {
    width: 2rem !important; /* 32px instead of 40px */
    height: 2rem !important;
    font-size: 0.6875rem !important; /* 11px */
  }

  /* PROFILE CLICK AREA - Icon only, minimal padding */
  header.bg-gradient-to-r .flex.items-center.space-x-3.cursor-pointer,
  header.bg-gradient-to-r button[onclick*="Profile"].flex.items-center {
    padding: 0.25rem !important; /* 4px - icon only */
    gap: 0 !important; /* No gap needed, avatar only */
  }

  /* ===== SK PROJECTS - BUTTON STAYS COMPACT ===== */
  #createProjectBtn {
    width: auto !important;
    max-width: max-content !important;
    flex-shrink: 0 !important;
  }
}

/* ===== NOTIFICATION BADGE OVERFLOW FIX (All screen sizes) ===== */
/* Ensure notification badge is never cut off by overflow clipping */
header.bg-gradient-to-r .relative,
header.bg-gradient-to-r button.notification-icon,
header.bg-gradient-to-r button[onclick*="Notification"],
header.bg-gradient-to-r button[title*="Notification"] {
  overflow: visible !important;
}

/* Ensure notification buttons get proper styling even without .notification-icon class */
header.bg-gradient-to-r button[onclick*="Notification"],
header.bg-gradient-to-r button[title*="Notification"] {
  position: relative;
}

/* ===== PHONE LARGE (430px - 767px) ===== */
@media (min-width: 430px) and (max-width: 767px) {

  /* Logo hidden globally - no phone-specific overrides needed */

  .mobile-nav span {
    font-size: 1.125rem !important; /* 18px for fallback text */
  }

  /* NOTIFICATION MODAL - FIX CUT OFF ON LARGE PHONES */
  /* TESTING - COMMENTED OUT   #notificationModal { */
  /* TESTING - COMMENTED OUT     position: fixed !important; */
  /* TESTING - COMMENTED OUT     top: 60px !important; /* Below mobile nav (56px + 4px gap) */ */
  /* TESTING - COMMENTED OUT     left: 0.75rem !important; /* 12px from left */ */
  /* TESTING - COMMENTED OUT     right: 0.75rem !important; /* 12px from right */ */
  /* TESTING - COMMENTED OUT     width: auto !important; /* Override w-96 (384px) */ */
  /* TESTING - COMMENTED OUT     max-width: calc(100vw - 1.5rem) !important; /* Ensure it fits */ */
  /* TESTING - COMMENTED OUT   } */
  /* TESTING - COMMENTED OUT  */
  /* TESTING - COMMENTED OUT   /* Notification list - standard height */ */
  /* TESTING - COMMENTED OUT   #notificationModal .max-h-96 { */
  /* TESTING - COMMENTED OUT     max-height: 20rem !important; /* 320px - slightly taller than small phones */ */
  /* TESTING - COMMENTED OUT   } */

  /* HEADER CONTAINER - MORE BREATHING ROOM */
  header.bg-gradient-to-r {
    padding: 0 !important;
  }

  header.bg-gradient-to-r > div {
    padding: 1.25rem 1.25rem !important; /* 20px all around */
  }

  /* HEADER LAYOUT - INDUSTRY STANDARD: Single row, icons only (same as small phones) */
  header.bg-gradient-to-r .flex.items-center.justify-between {
    flex-direction: row !important; /* CRITICAL: Keep horizontal */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important; /* More breathing room on 430px */
  }

  /* Title section - allow text truncation if needed */
  header.bg-gradient-to-r > div > div.flex.items-center.justify-between > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 110px) !important; /* Slightly more space for icons */
  }

  /* Actions section - compact icon-only layout */
  header.bg-gradient-to-r > div > div.flex.items-center.justify-between > div.flex.items-center {
    flex: 0 0 auto !important;
    gap: 0.5rem !important; /* 8px spacing between bell and avatar */
  }

  /* NOTIFICATION BUTTON - Generic selector for all notification buttons */
  header.bg-gradient-to-r button[onclick*="Notification"],
  header.bg-gradient-to-r .relative > button {
    padding: 0.625rem !important; /* 10px */
  }

  header.bg-gradient-to-r button[onclick*="Notification"] svg,
  header.bg-gradient-to-r .relative > button svg {
    width: 1.375rem !important; /* 22px */
    height: 1.375rem !important;
  }

  /* DATE TEXT - COMFORTABLE SIZE */
  header.bg-gradient-to-r p#currentDate {
    font-size: 0.75rem !important; /* 12px */
    margin-bottom: 0.375rem !important; /* 6px */
    font-weight: 600 !important;
  }

  /* TITLE - READABLE SIZE */
  header.bg-gradient-to-r h1 {
    font-size: 1.25rem !important; /* 20px instead of 24px */
    line-height: 1.4 !important;
    margin-bottom: 0.25rem !important;
  }

  /* DESCRIPTION - HIDE on mobile (industry standard: reduce clutter) */
  header.bg-gradient-to-r p.text-sm.text-gray-600 {
    display: none !important; /* Still too verbose for 430px screens */
  }

  /* Remove old code - no longer needed with single-row layout */

  /* NOTIFICATION BELL - STANDARD SIZE */
  header.bg-gradient-to-r .notification-icon,
  header.bg-gradient-to-r button[onclick*="Notification"],
  header.bg-gradient-to-r button[title*="Notification"] {
    padding: 0.625rem !important; /* 10px */
  }

  header.bg-gradient-to-r .notification-icon svg,
  header.bg-gradient-to-r button[onclick*="Notification"] svg,
  header.bg-gradient-to-r button[title*="Notification"] svg {
    width: 1.375rem !important; /* 22px */
    height: 1.375rem !important;
  }

  /* Notification Badge - Consistent for both SK and Youth pages */
  header.bg-gradient-to-r #notificationBadge,
  header.bg-gradient-to-r #notificationCount {
    width: 1.125rem !important; /* 18px */
    height: 1.125rem !important;
    font-size: 0.6875rem !important; /* 11px */
  }

  /* PROFILE INFO - HIDE on mobile (industry standard: icon-only) */
  header.bg-gradient-to-r .text-right {
    display: none !important; /* Avatar only, no text */
  }

  /* PROFILE AVATAR - STANDARD MOBILE SIZE (Generic for all pages) */
  header.bg-gradient-to-r #headerAvatar,
  header.bg-gradient-to-r button[onclick*="Profile"] .rounded-full,
  header.bg-gradient-to-r .flex.items-center .rounded-full {
    width: 2.25rem !important; /* 36px instead of 40px */
    height: 2.25rem !important;
    font-size: 0.75rem !important; /* 12px */
  }

  /* PROFILE CLICK AREA - Icon only, minimal padding */
  header.bg-gradient-to-r .flex.items-center.space-x-3.cursor-pointer,
  header.bg-gradient-to-r button[onclick*="Profile"].flex.items-center {
    padding: 0.375rem !important; /* 6px - icon only, slightly more comfortable than 375px */
    gap: 0 !important; /* No gap needed, avatar only */
  }

  /* ===== SK PROJECTS - BUTTON STAYS COMPACT ===== */
  #createProjectBtn {
    width: auto !important;
    max-width: max-content !important;
    flex-shrink: 0 !important;
  }
}

/* ========================================
   DESKTOP OVERRIDE - Keep Create Project button compact
======================================== */

@media (min-width: 768px) {
  /* Ensure Create Project button stays auto-width on desktop */
  #createProjectBtn {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* SK Dashboard & Youth Dashboard modals - Modern responsive pattern */
  /* Tablet/Desktop: sm:p-4 (16px) for comfortable spacing */
  #createModal,
  #editModal,
  #viewModal,
  #deleteModal,
  #budgetEditModal,
  #announcementModal,
  #profileModal,
  #testimonyConfirmModal,
  #confirmModal,
  #notificationModal,
  #decisionModal {
    padding: 1rem !important; /* sm:p-4 for tablet/desktop (matches sk-projects.html) */
  }

  /* Modal content max height - Desktop uses standard 90vh */
  #createModal > div,
  #editModal > div,
  #viewModal > div,
  #deleteModal > div,
  #budgetEditModal > div,
  #announcementModal > div,
  #profileModal > div,
  #testimonyConfirmModal > div,
  #confirmModal > div,
  #notificationModal > div,
  #decisionModal > div {
    max-height: 90vh !important; /* Standard height on larger screens */
  }

  /* Notification Dropdown Modal - Desktop positioning */
  #notificationModal {
    width: 384px !important; /* w-96 */
    right: 1.5rem !important;
    left: auto !important;
    top: 5rem !important;
    max-height: calc(100vh - 6rem) !important; /* Prevent overflow */
  }

  /* Notification modal content - desktop */
  #notificationModal #notificationList {
    max-height: 400px !important;
    overflow-y: auto !important;
  }
}

/* ========================================
   TABLET STYLES - Notification Modal Fix
   Handles tablets 768px - 1024px (Portrait & Landscape)
======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Notification Dropdown Modal - Tablet responsive */
  #notificationModal {
    width: 340px !important; /* Moderate width for tablets */
    right: 1rem !important;
    left: auto !important;
    top: 4rem !important; /* Below tablet nav */
    max-width: calc(100vw - 2rem) !important; /* Prevent overflow */
    max-height: calc(100vh - 5rem) !important; /* Account for nav */
  }

  /* Notification modal content - tablet */
  #notificationModal #notificationList {
    max-height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Tablet Landscape specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #notificationModal {
    top: 3.5rem !important; /* Closer to nav in landscape */
    max-height: calc(100vh - 4rem) !important;
  }

  #notificationModal #notificationList {
    max-height: calc(100vh - 200px) !important;
  }
}

/* ========================================
   SK TESTIMONIES - VIEW MODAL RESPONSIVE
======================================== */

/* Mobile (max-width: 767px) - All phones */
@media (max-width: 767px) {
  /* Modal container - better mobile sizing */
  #viewModal .bg-white.rounded-xl {
    max-width: 100% !important;
    margin: 0.5rem !important;
    max-height: calc(100vh - 1rem) !important;
  }

  /* Modal header - compact on mobile */
  #viewModal .p-6.border-b {
    padding: 1rem 1.25rem !important;
  }

  #viewModal .text-2xl {
    font-size: 1.25rem !important; /* 20px */
  }

  /* Modal content - compact padding */
  #viewModal .p-6.space-y-4 {
    padding: 1rem 1.25rem !important;
    gap: 1rem !important;
  }

  /* Avatar - smaller on mobile */
  #viewAvatar {
    width: 3rem !important; /* 48px */
    height: 3rem !important;
    font-size: 1rem !important; /* 16px */
  }

  /* Volunteer name and info */
  #viewVolunteerName {
    font-size: 1rem !important; /* 16px */
  }

  #viewProject {
    font-size: 0.8125rem !important; /* 13px */
  }

  #viewDate {
    font-size: 0.6875rem !important; /* 11px */
  }

  /* Featured badge - full width on mobile, bigger and more visible */
  #viewStatusBadge {
    margin-top: 0.5rem !important;
  }

  #viewStatusBadge span {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0.625rem 1rem !important; /* 10px 16px */
    font-size: 0.875rem !important; /* 14px */
  }

  #viewStatusBadge svg {
    width: 1.125rem !important; /* 18px */
    height: 1.125rem !important;
  }

  /* Testimony section */
  #viewTestimony {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
  }

  /* Rating section */
  #viewRating span {
    font-size: 1.25rem !important; /* 20px instead of 24px */
  }

  #viewRatingText {
    font-size: 0.8125rem !important; /* 13px */
  }

  /* Modal footer - horizontal buttons on mobile */
  .testimony-modal-footer {
    padding: 1rem 1.25rem !important;
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: center !important;
  }

  .testimony-modal-feature-btn,
  .testimony-modal-delete-btn {
    flex: 1 1 0% !important; /* Equal width */
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem !important; /* 14px */
  }

  /* Icon size on mobile */
  .testimony-modal-footer button svg {
    width: 1.125rem !important; /* 18px */
    height: 1.125rem !important;
  }
}

/* Small phones only (max-width: 429px) */
@media (max-width: 429px) {
  /* Even more compact on very small screens */
  #viewModal .p-6.border-b {
    padding: 0.875rem 1rem !important; /* 14px 16px */
  }

  #viewModal .p-6.space-y-4 {
    padding: 0.875rem 1rem !important;
  }

  #viewModal .text-2xl {
    font-size: 1.125rem !important; /* 18px */
  }

  /* Avatar - even smaller */
  #viewAvatar {
    width: 2.5rem !important; /* 40px */
    height: 2.5rem !important;
    font-size: 0.875rem !important; /* 14px */
  }

  /* Smaller text */
  #viewVolunteerName {
    font-size: 0.9375rem !important; /* 15px */
  }

  #viewProject {
    font-size: 0.75rem !important; /* 12px */
  }

  /* Featured badge - more compact */
  #viewStatusBadge span {
    padding: 0.5rem 0.875rem !important; /* 8px 14px */
    font-size: 0.8125rem !important; /* 13px */
  }

  /* Buttons more compact on small phones */
  .testimony-modal-feature-btn,
  .testimony-modal-delete-btn {
    padding: 0.625rem 0.375rem !important; /* 10px 6px */
    font-size: 0.8125rem !important; /* 13px */
  }

  .testimony-modal-footer button svg {
    width: 1rem !important; /* 16px */
    height: 1rem !important;
  }

  /* Hide button text on very small screens, show icon only */
  .testimony-modal-footer button span:not(#featureBtnText) {
    display: none !important;
  }

  #featureBtnText {
    display: none !important;
  }

  /* Make buttons more icon-focused */
  .testimony-modal-feature-btn,
  .testimony-modal-delete-btn {
    min-width: 3rem !important; /* 48px - good touch target */
  }
}

/* Large phones (430px - 767px) */
@media (min-width: 430px) and (max-width: 767px) {
  /* Slightly larger than small phones but still compact */
  #viewModal .bg-white.rounded-xl {
    margin: 1rem !important;
  }

  /* Avatar size */
  #viewAvatar {
    width: 3.5rem !important; /* 56px */
    height: 3.5rem !important;
    font-size: 1.125rem !important; /* 18px */
  }

  /* Featured badge - good size for large phones */
  #viewStatusBadge span {
    padding: 0.625rem 1rem !important;
    font-size: 0.9375rem !important; /* 15px */
  }

  /* Buttons good size for large phones */
  .testimony-modal-feature-btn,
  .testimony-modal-delete-btn {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.875rem !important; /* 14px */
  }

  .testimony-modal-footer button svg {
    width: 1.125rem !important; /* 18px */
    height: 1.125rem !important;
  }
}

/* ========================================
   SK TESTIMONIES - MOBILE FILTER BUTTONS FIX
======================================== */

/* Mobile (max-width: 767px) - All small and large phones */
@media (max-width: 767px) {
  /* Testimonies tabs container - make scrollable */
  .flex.items-center.gap-6.border-b:has(#filterAll) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    gap: 1rem !important; /* Reduce gap on mobile */
  }

  /* Testimonies filter tabs - ensure proper touch targets */
  #filterAll,
  #filterFeatured {
    min-height: 44px !important; /* iOS touch target requirement */
    touch-action: manipulation !important; /* Prevent double-tap zoom */
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
  }

  /* Tab icons - slightly smaller on mobile */
  #filterAll .w-10.h-10,
  #filterFeatured .w-10.h-10 {
    width: 2.25rem !important; /* 36px */
    height: 2.25rem !important;
  }

  #filterAll svg,
  #filterFeatured svg {
    width: 1.125rem !important; /* 18px */
    height: 1.125rem !important;
  }

  /* Tab text - smaller on mobile */
  #filterAll span:not([id*="Badge"]),
  #filterFeatured span:not([id*="Badge"]) {
    font-size: 0.875rem !important; /* 14px */
  }

  /* Count badges - compact on mobile */
  #allCountBadge,
  #featuredCountBadge {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important; /* 12px */
  }

  /* Filter container - proper mobile spacing */
  .bg-white.rounded-xl.shadow-sm.p-6:has(#testimoniesGrid)
  .flex.flex-col.md\:flex-row.md\:items-center.md\:justify-between.gap-4.mb-6 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  /* Search input on mobile - full width */
  #searchInput {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* Small phones only (max-width: 429px) */
@media (max-width: 429px) {
  /* Make tabs take full width - no scrolling needed */
  .flex.items-center.gap-6.border-b:has(#filterAll) {
    gap: 0.5rem !important;
    width: 100% !important;
    overflow-x: visible !important; /* Disable scrolling */
  }

  /* Each tab takes equal space */
  #filterAll,
  #filterFeatured {
    flex: 1 1 0% !important; /* Equal width distribution */
    gap: 0.375rem !important;
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Show short labels on small phones */
  .tab-label-full {
    display: none !important;
  }

  .tab-label-short {
    display: inline !important;
  }

  /* Compact icons */
  #filterAll .w-10.h-10,
  #filterFeatured .w-10.h-10 {
    width: 1.75rem !important; /* 28px */
    height: 1.75rem !important;
    flex-shrink: 0 !important;
  }

  #filterAll svg,
  #filterFeatured svg {
    width: 0.875rem !important; /* 14px */
    height: 0.875rem !important;
  }

  /* Compact text */
  .tab-label-short {
    font-size: 0.75rem !important; /* 12px */
    white-space: nowrap !important;
  }

  /* Tiny badges */
  #allCountBadge,
  #featuredCountBadge {
    padding: 0.125rem 0.3125rem !important; /* 2px 5px */
    font-size: 0.625rem !important; /* 10px */
    min-width: 1rem !important;
    flex-shrink: 0 !important;
  }
}

/* Large phones (430px - 767px) */
@media (min-width: 430px) and (max-width: 767px) {
  /* Make tabs take full width on large phones */
  .flex.items-center.gap-6.border-b:has(#filterAll) {
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* Each tab expands to fill available space equally */
  #filterAll,
  #filterFeatured {
    flex: 1 1 0% !important; /* Equal width distribution */
    gap: 0.5rem !important;
    padding-bottom: 0.625rem !important; /* 10px */
    justify-content: center !important; /* Center content within tab */
  }

  /* Smaller icons on large phones */
  #filterAll .w-10.h-10,
  #filterFeatured .w-10.h-10 {
    width: 2rem !important; /* 32px */
    height: 2rem !important;
    flex-shrink: 0 !important;
  }

  #filterAll svg,
  #filterFeatured svg {
    width: 1rem !important; /* 16px */
    height: 1rem !important;
  }

  /* Show short labels on large phones */
  .tab-label-full {
    display: none !important;
  }

  .tab-label-short {
    display: inline !important;
  }

  /* Compact text */
  .tab-label-short {
    font-size: 0.8125rem !important; /* 13px */
    white-space: nowrap !important;
  }

  /* Smaller badges */
  #allCountBadge,
  #featuredCountBadge {
    padding: 0.125rem 0.375rem !important; /* 2px 6px */
    font-size: 0.6875rem !important; /* 11px */
    min-width: 1.25rem !important; /* Minimum width for single digits */
    text-align: center !important;
    flex-shrink: 0 !important;
  }
}

/* ========================================
   REDUCED MOTION PREFERENCE
======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   LANDING PAGE, LOGIN & SIGNUP RESPONSIVE STYLES
======================================== */

/* ========================================
   SMALL PHONES: 360px - 480px
======================================== */
@media (max-width: 480px) {
  /* INDEX.HTML - Landing Page */

  /* Navigation */
  nav .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  nav .hidden.md\:flex {
    display: none !important;
  }

  nav .flex.items-center.space-x-3 {
    gap: 0.5rem !important;
  }

  nav .px-5,
  nav .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  nav .py-2\.5 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Logo */
  nav .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }

  nav .text-2xl {
    font-size: 1.25rem !important;
  }

  nav .text-sm {
    font-size: 0.75rem !important;
  }

  /* Hero Section */
  #home {
    padding-top: 6rem !important;
    padding-bottom: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #home .text-5xl,
  #home .md\:text-6xl,
  #home .lg\:text-7xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  #home .text-xl,
  #home .md\:text-2xl {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  #home .text-lg {
    font-size: 0.9rem !important;
  }

  #home .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  #home .inline-block.px-4.py-2 {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  /* Hero Buttons */
  #home .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #home .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  #home .text-lg {
    font-size: 0.9rem !important;
  }

  /* Stats Grid */
  #home .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  #home .text-4xl {
    font-size: 1.5rem !important;
  }

  #home .text-sm {
    font-size: 0.7rem !important;
  }

  /* Features Section */
  #features {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #features .text-4xl,
  #features .md\:text-5xl {
    font-size: 1.75rem !important;
  }

  #features .text-xl {
    font-size: 0.95rem !important;
  }

  #features .grid {
    gap: 1.5rem !important;
  }

  #features .p-8 {
    padding: 1.25rem !important;
  }

  #features .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }

  #features .w-8.h-8 {
    width: 2rem !important;
    height: 2rem !important;
  }

  #features .text-2xl {
    font-size: 1.25rem !important;
  }

  /* Projects Section */
  #projects {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #projects .text-4xl,
  #projects .md\:text-5xl {
    font-size: 1.75rem !important;
  }

  #projects .filter-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  #projects .h-48 {
    height: 10rem !important;
  }

  #projects .w-20.h-20 {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* Testimonials */
  #testimonials {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #testimonials .text-4xl,
  #testimonials .md\:text-5xl {
    font-size: 1.75rem !important;
  }

  #testimonials .p-8 {
    padding: 1.25rem !important;
  }

  #testimonials .w-14.h-14 {
    width: 3rem !important;
    height: 3rem !important;
  }

  #testimonials .text-xl {
    font-size: 1.125rem !important;
  }

  /* Arrow buttons */
  #testimonials button {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  #testimonials button svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Transparency Section */
  #transparency {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #transparency .text-4xl,
  #transparency .md\:text-5xl {
    font-size: 1.75rem !important;
  }

  #transparency .p-8 {
    padding: 1.25rem !important;
  }

  #transparency .text-2xl {
    font-size: 1.25rem !important;
  }

  #transparency .text-5xl {
    font-size: 2rem !important;
  }

  #transparency .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* Footer */
  footer {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  footer .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }

  footer .text-lg {
    font-size: 1rem !important;
  }

  /* LOGIN.HTML & SIGNUP.HTML */

  /* Hide left green panel on small phones */
  .md\:w-1\/2.bg-gradient-to-br {
    display: none !important;
  }

  /* Make form full width */
  .md\:w-1\/2.p-12 {
    width: 100% !important;
    padding: 1.5rem !important;
  }

  .min-h-\[600px\],
  .min-h-\[700px\] {
    min-height: auto !important;
  }

  /* Form elements */
  .text-3xl {
    font-size: 1.75rem !important;
  }

  .px-4.py-3 {
    padding: 0.625rem 0.75rem !important;
  }

  .py-3\.5 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Grid columns for name and password fields */
  .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================
   LARGE PHONES: 481px - 640px
======================================== */
@media (min-width: 481px) and (max-width: 640px) {
  /* INDEX.HTML - Landing Page */

  nav .hidden.md\:flex {
    display: none !important;
  }

  #home {
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
  }

  #home .text-5xl,
  #home .md\:text-6xl,
  #home .lg\:text-7xl {
    font-size: 2.5rem !important;
  }

  #home .text-xl,
  #home .md\:text-2xl {
    font-size: 1.125rem !important;
  }

  #features,
  #projects,
  #testimonials,
  #transparency {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  #features .text-4xl,
  #projects .text-4xl,
  #testimonials .text-4xl,
  #transparency .text-4xl,
  .md\:text-5xl {
    font-size: 2rem !important;
  }

  /* LOGIN.HTML & SIGNUP.HTML */

  /* Hide left panel on large phones too */
  .md\:w-1\/2.bg-gradient-to-br {
    display: none !important;
  }

  .md\:w-1\/2.p-12 {
    width: 100% !important;
    padding: 2rem !important;
  }
}

/* ========================================
   TABLET PORTRAIT: 641px - 768px
======================================== */
@media (min-width: 641px) and (max-width: 768px) {
  /* INDEX.HTML - Landing Page */

  #home {
    padding-top: 8rem !important;
  }

  #home .text-5xl,
  #home .md\:text-6xl,
  #home .lg\:text-7xl {
    font-size: 3rem !important;
  }

  #features .grid,
  #projects .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* LOGIN.HTML & SIGNUP.HTML */

  /* Show both panels on tablet portrait */
  .md\:flex-row {
    flex-direction: row !important;
  }

  .md\:w-1\/2 {
    width: 50% !important;
  }

  .md\:w-1\/2.p-12 {
    padding: 2rem !important;
  }

  .md\:w-1\/2.bg-gradient-to-br {
    display: flex !important;
    padding: 2rem !important;
  }
}

/* ========================================
   TABLET LANDSCAPE: 769px - 1024px
======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* INDEX.HTML - Landing Page */

  #home .text-5xl,
  #home .md\:text-6xl,
  #home .lg\:text-7xl {
    font-size: 3.5rem !important;
  }

  #features .grid,
  #projects .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #testimonials .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Budget cards on transparency section */
  #transparency .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* LOGIN.HTML & SIGNUP.HTML */

  .md\:w-1\/2.p-12 {
    padding: 2.5rem !important;
  }

  .md\:w-1\/2.bg-gradient-to-br {
    padding: 2.5rem !important;
  }
}

/* ========================================
   EXTRA SMALL PHONES: max-width 360px
======================================== */
@media (max-width: 360px) {
  /* Even more compact for very small devices */

  nav .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  nav .w-16.h-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  nav .text-2xl {
    font-size: 1.125rem !important;
  }

  #home .text-5xl,
  #home .md\:text-6xl,
  #home .lg\:text-7xl {
    font-size: 1.75rem !important;
  }

  #home .text-4xl {
    font-size: 1.25rem !important;
  }

  #home .grid-cols-3 {
    gap: 0.5rem !important;
  }

  #features .text-4xl,
  #projects .text-4xl,
  #testimonials .text-4xl,
  #transparency .text-4xl {
    font-size: 1.5rem !important;
  }

  .md\:w-1\/2.p-12 {
    padding: 1rem !important;
  }

  .text-3xl {
    font-size: 1.5rem !important;
  }
}

/* ========================================
   MOBILE MENU FOR INDEX.HTML (HAMBURGER)
======================================== */
@media (max-width: 768px) {
  /* Add hamburger menu styles if needed */
  nav .hidden.md\:flex {
    display: none !important;
  }

  /* Stack buttons vertically on very small screens */
  nav .flex.items-center.space-x-3 {
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION FIX FOR PHONES
======================================== */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce padding on hero section in landscape */
  #home {
    padding-top: 5rem !important;
    padding-bottom: 1rem !important;
  }

  #home .space-y-8 {
    gap: 1rem !important;
  }

  #home .space-y-6 {
    gap: 0.75rem !important;
  }

  /* Hide or reduce stats in landscape */
  #home .grid.grid-cols-3 {
    display: none !important;
  }

  /* LOGIN & SIGNUP landscape fix */
  .min-h-screen {
    min-height: auto !important;
  }

  .md\:w-1\/2.p-12 {
    padding: 1rem !important;
  }

  .space-y-6,
  .space-y-5 {
    gap: 0.75rem !important;
  }
}

/* ========================================
   PAGINATION DOTS - CONSISTENT SMALL SIZE ACROSS ALL DEVICES
======================================== */

/* Force small pagination dots on ALL screen sizes */
@media (max-width: 1024px) {
  /* All pagination dot containers */
  #filePaginationDots button,
  #paginationDots button,
  #announcementPaginationDots button,
  #testimonialDots button,
  #projectPaginationDots button,
  #archiveProjectPaginationDots button,
  #archiveFilePaginationDots button,
  #certPaginationDots button,
  [id*="PaginationDots"] button,
  [id*="paginationDots"] button {
    min-width: 8px !important;
    min-height: 8px !important;
    width: 8px !important;
    height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    border-radius: 9999px !important;
    transition: all 0.3s ease !important;
  }

  /* Active pagination dots - elongated pill shape */
  #filePaginationDots button.bg-\[#2f6e4e\],
  #paginationDots button.bg-\[#2f6e4e\],
  #announcementPaginationDots button.bg-\[#2f6e4e\],
  #testimonialDots button.bg-\[#2f6e4e\],
  #projectPaginationDots button.bg-\[#2f6e4e\],
  #archiveProjectPaginationDots button.bg-\[#2f6e4e\],
  #archiveFilePaginationDots button.bg-\[#2f6e4e\],
  #certPaginationDots button.bg-\[#2f6e4e\],
  [id*="PaginationDots"] button.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.bg-\[#2f6e4e\] {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
}

/* Small phones - extra compact */
@media (max-width: 480px) {
  #filePaginationDots,
  #paginationDots,
  #announcementPaginationDots,
  #testimonialDots,
  #projectPaginationDots,
  #archiveProjectPaginationDots,
  #archiveFilePaginationDots,
  #certPaginationDots,
  [id*="PaginationDots"],
  [id*="paginationDots"] {
    gap: 6px !important;
  }

  #filePaginationDots button,
  #paginationDots button,
  #announcementPaginationDots button,
  #testimonialDots button,
  #projectPaginationDots button,
  #archiveProjectPaginationDots button,
  #archiveFilePaginationDots button,
  #certPaginationDots button,
  [id*="PaginationDots"] button,
  [id*="paginationDots"] button {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
    max-width: 6px !important;
    max-height: 6px !important;
  }

  /* Active dots on small phones */
  #filePaginationDots button.bg-\[#2f6e4e\],
  #paginationDots button.bg-\[#2f6e4e\],
  #announcementPaginationDots button.bg-\[#2f6e4e\],
  #testimonialDots button.bg-\[#2f6e4e\],
  #projectPaginationDots button.bg-\[#2f6e4e\],
  #archiveProjectPaginationDots button.bg-\[#2f6e4e\],
  #archiveFilePaginationDots button.bg-\[#2f6e4e\],
  #certPaginationDots button.bg-\[#2f6e4e\],
  [id*="PaginationDots"] button.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.bg-\[#2f6e4e\] {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
  }
}

/* Large phones */
@media (min-width: 481px) and (max-width: 640px) {
  #filePaginationDots button,
  #paginationDots button,
  #announcementPaginationDots button,
  #testimonialDots button,
  #projectPaginationDots button,
  #archiveProjectPaginationDots button,
  #archiveFilePaginationDots button,
  #certPaginationDots button,
  [id*="PaginationDots"] button,
  [id*="paginationDots"] button {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
  }

  #filePaginationDots button.bg-\[#2f6e4e\],
  #paginationDots button.bg-\[#2f6e4e\],
  #announcementPaginationDots button.bg-\[#2f6e4e\],
  #testimonialDots button.bg-\[#2f6e4e\],
  #projectPaginationDots button.bg-\[#2f6e4e\],
  #archiveProjectPaginationDots button.bg-\[#2f6e4e\],
  #archiveFilePaginationDots button.bg-\[#2f6e4e\],
  #certPaginationDots button.bg-\[#2f6e4e\],
  [id*="PaginationDots"] button.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.bg-\[#2f6e4e\] {
    width: 28px !important;
    min-width: 28px !important;
  }
}

/* Tablets portrait */
@media (min-width: 641px) and (max-width: 768px) {
  #filePaginationDots button,
  #paginationDots button,
  #announcementPaginationDots button,
  #testimonialDots button,
  #projectPaginationDots button,
  #archiveProjectPaginationDots button,
  #archiveFilePaginationDots button,
  #certPaginationDots button,
  [id*="PaginationDots"] button,
  [id*="paginationDots"] button {
    width: 8px !important;
    height: 8px !important;
  }

  #filePaginationDots button.bg-\[#2f6e4e\],
  #paginationDots button.bg-\[#2f6e4e\],
  #announcementPaginationDots button.bg-\[#2f6e4e\],
  #testimonialDots button.bg-\[#2f6e4e\],
  #projectPaginationDots button.bg-\[#2f6e4e\],
  #archiveProjectPaginationDots button.bg-\[#2f6e4e\],
  #archiveFilePaginationDots button.bg-\[#2f6e4e\],
  #certPaginationDots button.bg-\[#2f6e4e\],
  [id*="PaginationDots"] button.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.bg-\[#2f6e4e\] {
    width: 32px !important;
  }
}

/* Tablets landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  #filePaginationDots button,
  #paginationDots button,
  #announcementPaginationDots button,
  #testimonialDots button,
  #projectPaginationDots button,
  #archiveProjectPaginationDots button,
  #archiveFilePaginationDots button,
  #certPaginationDots button,
  [id*="PaginationDots"] button,
  [id*="paginationDots"] button {
    width: 8px !important;
    height: 8px !important;
  }

  #filePaginationDots button.bg-\[#2f6e4e\],
  #paginationDots button.bg-\[#2f6e4e\],
  #announcementPaginationDots button.bg-\[#2f6e4e\],
  #testimonialDots button.bg-\[#2f6e4e\],
  #projectPaginationDots button.bg-\[#2f6e4e\],
  #archiveProjectPaginationDots button.bg-\[#2f6e4e\],
  #archiveFilePaginationDots button.bg-\[#2f6e4e\],
  #certPaginationDots button.bg-\[#2f6e4e\],
  [id*="PaginationDots"] button.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.bg-\[#2f6e4e\] {
    width: 32px !important;
  }
}

/* Override any Tailwind width/height classes on pagination dots */
@media (max-width: 1024px) {
  /* Override w-3, w-4, w-5, h-3, h-4, h-5 classes on pagination dots */
  [id*="PaginationDots"] button.w-3,
  [id*="PaginationDots"] button.w-4,
  [id*="PaginationDots"] button.w-5,
  [id*="paginationDots"] button.w-3,
  [id*="paginationDots"] button.w-4,
  [id*="paginationDots"] button.w-5,
  #filePaginationDots button.w-3,
  #filePaginationDots button.w-4,
  #paginationDots button.w-3,
  #paginationDots button.w-4,
  #testimonialDots button.w-3,
  #testimonialDots button.w-4 {
    width: 8px !important;
  }

  [id*="PaginationDots"] button.h-3,
  [id*="PaginationDots"] button.h-4,
  [id*="PaginationDots"] button.h-5,
  [id*="paginationDots"] button.h-3,
  [id*="paginationDots"] button.h-4,
  [id*="paginationDots"] button.h-5,
  #filePaginationDots button.h-3,
  #filePaginationDots button.h-4,
  #paginationDots button.h-3,
  #paginationDots button.h-4,
  #testimonialDots button.h-3,
  #testimonialDots button.h-4 {
    height: 8px !important;
  }

  /* Active dots should be wider (pill shape) */
  [id*="PaginationDots"] button.w-3.bg-\[#2f6e4e\],
  [id*="PaginationDots"] button.w-4.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.w-3.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.w-4.bg-\[#2f6e4e\],
  #filePaginationDots button.bg-\[#2f6e4e\].w-3,
  #filePaginationDots button.bg-\[#2f6e4e\].w-4,
  #paginationDots button.bg-\[#2f6e4e\].w-3,
  #paginationDots button.bg-\[#2f6e4e\].w-4,
  #testimonialDots button.bg-\[#2f6e4e\].w-3,
  #testimonialDots button.bg-\[#2f6e4e\].w-4 {
    width: 32px !important;
  }
}

/* Extra specific rules for small phones */
@media (max-width: 480px) {
  [id*="PaginationDots"] button,
  [id*="paginationDots"] button,
  .pagination-dot,
  button[onclick*="goToPage"],
  button[onclick*="goToSlide"],
  button[onclick*="goToFilePage"],
  button[onclick*="goToAnnouncementPage"],
  button[onclick*="goToProjectPage"] {
    width: 6px !important;
    height: 6px !important;
  }

  [id*="PaginationDots"] button.bg-\[#2f6e4e\],
  [id*="paginationDots"] button.bg-\[#2f6e4e\],
  button[onclick*="goToPage"].bg-\[#2f6e4e\],
  button[onclick*="goToSlide"].bg-\[#2f6e4e\],
  button[onclick*="goToFilePage"].bg-\[#2f6e4e\],
  button[onclick*="goToAnnouncementPage"].bg-\[#2f6e4e\],
  button[onclick*="goToProjectPage"].bg-\[#2f6e4e\] {
    width: 24px !important;
  }
}


/* ========================================
   CAPTAIN-DASHBOARD.HTML - PROFILE MODAL RESPONSIVE
   Small Phones (< 430px)
======================================== */
@media (max-width: 429px) {
  /* Profile Modal Container */
  #profileModal .max-w-4xl {
    max-width: 100% !important;
    margin: 0.5rem !important;
  }

  #profileModal .min-h-screen {
    padding: 0.5rem !important;
  }

  /* Modal Header */
  #profileModal .bg-gradient-to-r.from-blue-600 {
    padding: 1rem !important;
  }

  /* Header content - stack vertically on small phones */
  #profileModal .bg-gradient-to-r .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  #profileModal .bg-gradient-to-r .flex.items-center.gap-4 {
    flex-direction: row !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* Profile picture - smaller on mobile */
  #profileModal #profilePicturePreview {
    width: 3.5rem !important; /* 56px */
    height: 3.5rem !important;
    font-size: 1.25rem !important;
    border-width: 2px !important;
  }

  #profileModal #profilePicturePreview + label {
    padding: 0.375rem !important;
  }

  #profileModal #profilePicturePreview + label svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* Title and subtitle - smaller text */
  #profileModal h2 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.3 !important;
  }

  #profileModal .text-blue-100.text-sm {
    font-size: 0.75rem !important; /* 12px */
  }

  /* Close button - position in top right */
  #profileModal .bg-gradient-to-r button[onclick*="closeProfileModal"] {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.375rem !important;
  }

  #profileModal .bg-gradient-to-r button[onclick*="closeProfileModal"] svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Form content padding */
  #profileModal .p-6.space-y-6 {
    padding: 1rem !important;
    gap: 1.25rem !important;
  }

  /* Term information section */
  #profileModal .bg-gradient-to-br.from-blue-50 {
    padding: 1rem !important;
  }

  #profileModal .bg-gradient-to-br h3 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  #profileModal .bg-gradient-to-br h3 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Term info grid - single column */
  #profileModal .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  #profileModal .md\:col-span-3 {
    grid-column: span 1 !important;
  }

  /* Term info cards */
  #profileModal .bg-white.rounded-lg.p-4 {
    padding: 0.75rem !important;
  }

  #profileModal .bg-white.rounded-lg label {
    font-size: 0.625rem !important; /* 10px */
    margin-bottom: 0.25rem !important;
  }

  #profileModal .bg-white.rounded-lg p {
    font-size: 0.9375rem !important; /* 15px */
  }

  /* Section headers */
  #profileModal .text-lg.font-bold {
    font-size: 1rem !important;
  }

  #profileModal .text-lg.font-bold svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Form grids - all single column */
  #profileModal .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Input fields */
  #profileModal input,
  #profileModal textarea {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  #profileModal label {
    font-size: 0.8125rem !important;
    margin-bottom: 0.375rem !important;
  }

  #profileModal .text-xs {
    font-size: 0.6875rem !important; /* 11px */
  }

  /* Footer - stack buttons vertically */
  #profileModal .bg-gray-50.px-6.py-4 {
    padding: 1rem !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  #profileModal .bg-gray-50 button {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }

  #profileModal .bg-gray-50 .flex.gap-3 {
    width: 100% !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }

  #profileModal .bg-gray-50 button svg {
    width: 1rem !important;
    height: 1rem !important;
  }
}


/* ========================================
   CAPTAIN-DASHBOARD.HTML - PROFILE MODAL RESPONSIVE
   Large Phones (430px - 767px)
======================================== */
@media (min-width: 430px) and (max-width: 767px) {
  /* Profile Modal Container */
  #profileModal .max-w-4xl {
    max-width: calc(100% - 2rem) !important;
    margin: 1rem !important;
  }

  #profileModal .min-h-screen {
    padding: 1rem !important;
  }

  /* Modal Header */
  #profileModal .bg-gradient-to-r.from-blue-600 {
    padding: 1.25rem !important;
  }

  /* Header content - keep horizontal on large phones */
  #profileModal .bg-gradient-to-r .flex.items-center.gap-4 {
    gap: 1rem !important;
  }

  /* Profile picture */
  #profileModal #profilePicturePreview {
    width: 4rem !important; /* 64px */
    height: 4rem !important;
    font-size: 1.5rem !important;
    border-width: 3px !important;
  }

  #profileModal #profilePicturePreview + label {
    padding: 0.5rem !important;
  }

  #profileModal #profilePicturePreview + label svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Title and subtitle */
  #profileModal h2 {
    font-size: 1.5rem !important; /* 24px */
  }

  #profileModal .text-blue-100.text-sm {
    font-size: 0.8125rem !important; /* 13px */
  }

  /* Close button */
  #profileModal .bg-gradient-to-r button[onclick*="closeProfileModal"] svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
  }

  /* Form content padding */
  #profileModal .p-6.space-y-6 {
    padding: 1.25rem !important;
    gap: 1.5rem !important;
  }

  /* Term information section */
  #profileModal .bg-gradient-to-br.from-blue-50 {
    padding: 1.25rem !important;
  }

  #profileModal .bg-gradient-to-br h3 {
    font-size: 1.0625rem !important; /* 17px */
    margin-bottom: 1rem !important;
  }

  #profileModal .bg-gradient-to-br h3 svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
  }

  /* Term info grid - 2 columns on large phones */
  #profileModal .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  #profileModal .md\:col-span-3 {
    grid-column: span 2 !important;
  }

  /* Term info cards */
  #profileModal .bg-white.rounded-lg.p-4 {
    padding: 1rem !important;
  }

  #profileModal .bg-white.rounded-lg label {
    font-size: 0.6875rem !important; /* 11px */
  }

  #profileModal .bg-white.rounded-lg p {
    font-size: 1rem !important;
  }

  /* Section headers */
  #profileModal .text-lg.font-bold {
    font-size: 1.0625rem !important; /* 17px */
  }

  #profileModal .text-lg.font-bold svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
  }

  /* Form grids - 2 columns for account/contact info */
  #profileModal .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* Personal info - 2 columns */
  #profileModal .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  #profileModal .grid.grid-cols-1.md\:grid-cols-3 > div:nth-child(3) {
    grid-column: span 2 !important;
  }

  /* Input fields */
  #profileModal input,
  #profileModal textarea {
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
  }

  #profileModal label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }

  #profileModal .text-xs {
    font-size: 0.75rem !important;
  }

  /* Footer - keep horizontal but adjust spacing */
  #profileModal .bg-gray-50.px-6.py-4 {
    padding: 1rem 1.25rem !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* Change Password button - full width on its own row */
  #profileModal .bg-gray-50 > button:first-child {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Cancel and Save buttons container */
  #profileModal .bg-gray-50 .flex.gap-3 {
    width: 100% !important;
    gap: 0.75rem !important;
  }

  #profileModal .bg-gray-50 .flex.gap-3 button {
    flex: 1 !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
  }

  #profileModal .bg-gray-50 button svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }
}


/* ========================================
   SK-DASHBOARD.HTML - MODALS RESPONSIVE
   Small Phones (< 430px)
======================================== */
@media (max-width: 429px) {
  /* All dashboard modals */
  #createModal .max-w-2xl,
  #editModal .max-w-2xl,
  #viewModal .max-w-2xl,
  #budgetEditModal .max-w-2xl {
    max-width: 100% !important;
    margin: 0.5rem !important;
  }

  #createModal .p-4,
  #editModal .p-4,
  #viewModal .p-4,
  #budgetEditModal .p-4 {
    padding: 0.5rem !important;
  }

  /* Modal headers */
  #createModal .p-6.border-b,
  #editModal .p-6.border-b,
  #viewModal .p-6.border-b,
  #budgetEditModal .p-6.border-b {
    padding: 1rem !important;
  }

  #createModal h3,
  #editModal h3,
  #viewModal h3,
  #budgetEditModal h3 {
    font-size: 1.125rem !important; /* 18px */
  }

  /* Close buttons */
  #createModal button[onclick*="close"] svg,
  #editModal button[onclick*="close"] svg,
  #viewModal button[onclick*="close"] svg,
  #budgetEditModal button[onclick*="close"] svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Modal content */
  #createModal .p-6.space-y-4,
  #editModal .p-6.space-y-4,
  #viewModal .p-6.space-y-4,
  #budgetEditModal .p-6 {
    padding: 1rem !important;
  }

  /* Form labels */
  #createModal label,
  #editModal label,
  #budgetEditModal label {
    font-size: 0.8125rem !important;
    margin-bottom: 0.375rem !important;
  }

  /* Form inputs */
  #createModal input,
  #createModal textarea,
  #createModal select,
  #editModal input,
  #editModal textarea,
  #editModal select,
  #budgetEditModal input,
  #budgetEditModal select {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  /* Budget categories container */
  #budgetCategoriesContainer .grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* Footer buttons */
  #createModal .p-6.border-t,
  #editModal .p-6.border-t,
  #viewModal .p-6.border-t,
  #budgetEditModal .p-6.border-t {
    padding: 1rem !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }

  #createModal .p-6.border-t button,
  #editModal .p-6.border-t button,
  #viewModal .p-6.border-t button,
  #budgetEditModal .p-6.border-t button {
    width: 100% !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* Budget Edit specific */
  #budgetEditModal .bg-blue-50 {
    padding: 0.75rem !important;
  }

  #budgetEditModal .bg-blue-50 p {
    font-size: 0.75rem !important;
  }

  #budgetEditModal #editTotalBudget {
    font-size: 1.25rem !important;
  }
}


/* ========================================
   SK-DASHBOARD.HTML - MODALS RESPONSIVE
   Large Phones (430px - 767px)
======================================== */
@media (min-width: 430px) and (max-width: 767px) {
  /* All dashboard modals */
  #createModal .max-w-2xl,
  #editModal .max-w-2xl,
  #viewModal .max-w-2xl,
  #budgetEditModal .max-w-2xl {
    max-width: calc(100% - 2rem) !important;
    margin: 1rem !important;
  }

  #createModal .p-4,
  #editModal .p-4,
  #viewModal .p-4,
  #budgetEditModal .p-4 {
    padding: 1rem !important;
  }

  /* Modal headers */
  #createModal .p-6.border-b,
  #editModal .p-6.border-b,
  #viewModal .p-6.border-b,
  #budgetEditModal .p-6.border-b {
    padding: 1.25rem !important;
  }

  #createModal h3,
  #editModal h3,
  #viewModal h3,
  #budgetEditModal h3 {
    font-size: 1.25rem !important; /* 20px */
  }

  /* Modal content */
  #createModal .p-6.space-y-4,
  #editModal .p-6.space-y-4,
  #viewModal .p-6.space-y-4,
  #budgetEditModal .p-6 {
    padding: 1.25rem !important;
  }

  /* Form labels */
  #createModal label,
  #editModal label,
  #budgetEditModal label {
    font-size: 0.875rem !important;
  }

  /* Form inputs */
  #createModal input,
  #createModal textarea,
  #createModal select,
  #editModal input,
  #editModal textarea,
  #editModal select,
  #budgetEditModal input,
  #budgetEditModal select {
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
  }

  /* Budget categories container */
  #budgetCategoriesContainer .grid {
    grid-template-columns: 2fr 1fr auto !important;
  }

  /* Footer buttons */
  #createModal .p-6.border-t,
  #editModal .p-6.border-t,
  #viewModal .p-6.border-t,
  #budgetEditModal .p-6.border-t {
    padding: 1rem 1.25rem !important;
  }

  #createModal .p-6.border-t button,
  #editModal .p-6.border-t button,
  #viewModal .p-6.border-t button,
  #budgetEditModal .p-6.border-t button {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9375rem !important;
  }
}


/* ========================================
   YOUTH-DASHBOARD.HTML - PROFILE MODAL RESPONSIVE
   Small Phones (< 430px)
======================================== */
@media (max-width: 429px) {
  /* Youth dashboard profile modal - scoped to youth-dashboard only */
  body:has(#profileModal) #profileModal .max-w-2xl {
    max-width: 100% !important;
    margin: 0.5rem !important;
  }

  body:has(#profileModal) #profileModal .min-h-screen {
    padding: 0.5rem !important;
  }

  /* Green header */
  body:has(#profileModal) #profileModal .bg-gradient-to-r.from-\[#3d8b64\] {
    padding: 1rem !important;
    position: relative !important;
  }

  /* Header content - adjust layout */
  body:has(#profileModal) #profileModal .bg-gradient-to-r .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  body:has(#profileModal) #profileModal .bg-gradient-to-r .flex.items-center.gap-4 {
    width: 100% !important;
    gap: 0.75rem !important;
  }

  /* Profile picture */
  body:has(#profileModal) #profileModal #profilePicturePreview {
    width: 3.5rem !important; /* 56px */
    height: 3.5rem !important;
    font-size: 1.125rem !important;
  }

  body:has(#profileModal) #profileModal #profilePicturePreview + label {
    padding: 0.375rem !important;
  }

  body:has(#profileModal) #profileModal #profilePicturePreview + label svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  /* Title */
  body:has(#profileModal) #profileModal h2 {
    font-size: 1.125rem !important; /* 18px */
  }

  body:has(#profileModal) #profileModal .text-sm {
    font-size: 0.6875rem !important; /* 11px */
  }

  /* Close button - absolute position in top right */
  body:has(#profileModal) #profileModal .bg-gradient-to-r button[onclick*="closeProfileModal"] {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.375rem !important;
  }

  body:has(#profileModal) #profileModal .bg-gradient-to-r button[onclick*="closeProfileModal"] svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* Form content */
  body:has(#profileModal) #profileModal .p-6.max-h-\[calc\(100vh-300px\)\] {
    padding: 1rem !important;
    max-height: calc(100vh - 200px) !important;
  }

  body:has(#profileModal) #profileModal form .space-y-6 {
    gap: 1rem !important;
  }

  /* Section headers */
  body:has(#profileModal) #profileModal h3 {
    font-size: 0.9375rem !important; /* 15px */
  }

  body:has(#profileModal) #profileModal h3 svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* Form grids - single column */
  body:has(#profileModal) #profileModal .grid.grid-cols-1.md\:grid-cols-3,
  body:has(#profileModal) #profileModal .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Form inputs */
  body:has(#profileModal) #profileModal input,
  body:has(#profileModal) #profileModal textarea,
  body:has(#profileModal) #profileModal select {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  body:has(#profileModal) #profileModal label {
    font-size: 0.8125rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Footer */
  body:has(#profileModal) #profileModal .bg-gray-50.px-6.py-4 {
    padding: 1rem !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }

  body:has(#profileModal) #profileModal .bg-gray-50 button {
    width: 100% !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }

  body:has(#profileModal) #profileModal .bg-gray-50 button svg {
    width: 1rem !important;
    height: 1rem !important;
  }
}


/* ========================================
   YOUTH-DASHBOARD.HTML - PROFILE MODAL RESPONSIVE
   Large Phones (430px - 767px)
======================================== */
@media (min-width: 430px) and (max-width: 767px) {
  /* Youth dashboard profile modal */
  body:has(#profileModal) #profileModal .max-w-2xl {
    max-width: calc(100% - 2rem) !important;
    margin: 1rem !important;
  }

  body:has(#profileModal) #profileModal .min-h-screen {
    padding: 1rem !important;
  }

  /* Green header */
  body:has(#profileModal) #profileModal .bg-gradient-to-r.from-\[#3d8b64\] {
    padding: 1.25rem !important;
  }

  /* Profile picture */
  body:has(#profileModal) #profileModal #profilePicturePreview {
    width: 4rem !important; /* 64px */
    height: 4rem !important;
    font-size: 1.25rem !important;
  }

  body:has(#profileModal) #profileModal #profilePicturePreview + label svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* Title */
  body:has(#profileModal) #profileModal h2 {
    font-size: 1.375rem !important; /* 22px */
  }

  body:has(#profileModal) #profileModal .text-sm {
    font-size: 0.75rem !important; /* 12px */
  }

  /* Close button */
  body:has(#profileModal) #profileModal .bg-gradient-to-r button[onclick*="closeProfileModal"] svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Form content */
  body:has(#profileModal) #profileModal .p-6.max-h-\[calc\(100vh-300px\)\] {
    padding: 1.25rem !important;
    max-height: calc(100vh - 250px) !important;
  }

  /* Section headers */
  body:has(#profileModal) #profileModal h3 {
    font-size: 1rem !important;
  }

  body:has(#profileModal) #profileModal h3 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Form grids - 2 columns for most, single for personal info */
  body:has(#profileModal) #profileModal .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  body:has(#profileModal) #profileModal .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Form inputs */
  body:has(#profileModal) #profileModal input,
  body:has(#profileModal) #profileModal textarea,
  body:has(#profileModal) #profileModal select {
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
  }

  body:has(#profileModal) #profileModal label {
    font-size: 0.875rem !important;
  }

  /* Footer */
  body:has(#profileModal) #profileModal .bg-gray-50.px-6.py-4 {
    padding: 1rem 1.25rem !important;
  }

  body:has(#profileModal) #profileModal .bg-gray-50 button {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9375rem !important;
  }

  body:has(#profileModal) #profileModal .bg-gray-50 button svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }
}