/* Custom button styles */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800;
}

/* GitHub-style Navigation Animations */
/* Enhanced mega menu animations with GitHub-like smoothness */
.mega-menu-group {
    position: relative;
}

/* GitHub-style dropdown animation */
.mega-menu-group > div {
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    will-change: transform, opacity, visibility;
}

.mega-menu-group:hover > div {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

/* GitHub-style button hover animations */
.mega-menu-group button,
.mega-menu-group a {
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

/* Subtle scale effect on hover */
.mega-menu-group button:hover,
.mega-menu-group a:hover {
    transform: translateY(-1px) translateZ(0);
}

/* Active state with GitHub-style underline */
.mega-menu-group button.active,
.mega-menu-group a.active {
    border-bottom-color: var(--brand-primary, #0ea5e9);
    color: var(--brand-primary, #0ea5e9);
}

/* GitHub-style dropdown content animations */
.mega-menu-group > div a {
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
}

/* Subtle slide effect on hover */
.mega-menu-group > div a:hover {
    transform: translateX(4px);
    color: var(--brand-primary, #0ea5e9);
}

/* GitHub-style chevron animation */
.mega-menu-group button span:last-child {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.mega-menu-group:hover button span:last-child {
    transform: rotate(180deg);
}

/* Remove backdrop blur effect from dropdown panels */
.mega-menu-group > div {
    /* Previously: blur(8px). Disabling to remove background blur when menus open. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* GitHub-style focus states */
.mega-menu-group button:focus,
.mega-menu-group a:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

/* Smooth color transitions */
.mega-menu-group * {
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GitHub-style mobile menu animations */
#mobile-menu {
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}

#mobile-menu.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Mobile menu button animation */
#mobile-menu-button .flex {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu-button.active .flex > div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#mobile-menu-button.active .flex > div:nth-child(2) {
    opacity: 0;
}

#mobile-menu-button.active .flex > div:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* GitHub-style dropdown link hover effects */
.mega-menu-group > div a {
    position: relative;
    overflow: hidden;
}

.mega-menu-group > div a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.1), transparent);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-group > div a:hover::before {
    width: 100%;
}

/* Enhanced section headers */
.mega-menu-group > div .text-xs {
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* GitHub-style badge animations */
.mega-menu-group .bg-red-600 {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Smooth transitions for all interactive elements */
.mega-menu-group *,
.dropdown-nav-link,
.mobile-nav-link-vercel {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GitHub-style loading states */
.mega-menu-group.loading > div {
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Enhanced accessibility */
.mega-menu-group:focus-within > div {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

/* GitHub-style responsive animations */
@media (max-width: 1024px) {
    .mega-menu-group > div {
        transform: translateY(-4px) scale(0.99);
    }
    
    .mega-menu-group:hover > div {
        transform: translateY(0) scale(1);
    }
}

/* Custom input styles */
.input-field {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white;
}

/* Dark mode form fields and placeholder text */
.dark input,
.dark select,
.dark textarea {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.dark label {
    color: #f3f4f6;
}

/* Ensure all text in dark mode is visible */
.dark {
    color: #f3f4f6;
}

.dark p {
    color: #f3f4f6;
}

.dark span {
    color: #f3f4f6;
}

.dark div {
    color: #f3f4f6;
}

/* Fix dark mode text in cards and containers */
.dark .bg-white {
    color: #f3f4f6;
}

.dark .bg-gray-50 {
    color: #f3f4f6;
}

.dark .bg-gray-100 {
    color: #f3f4f6;
}

/* Ensure dark mode text in mobile menu */
.dark .mobile-nav-link {
    color: #f3f4f6;
}

.dark .mobile-nav-section-title {
    color: #9ca3af;
}

/* Fix dark mode text in form elements */
.dark .text-gray-900 {
    color: #f3f4f6;
}

.dark .text-gray-700 {
    color: #f3f4f6;
}

.dark .text-gray-600 {
    color: #e5e7eb;
}

.dark .text-gray-500 {
    color: #d1d5db;
}

.dark .text-gray-400 {
    color: #9ca3af;
}

.dark .text-gray-300 {
    color: #d1d5db;
}

.dark .text-gray-200 {
    color: #e5e7eb;
}

.dark .text-gray-100 {
    color: #f3f4f6;
}

/* Fix specific dark mode text issues */
.dark .text-black {
    color: #f3f4f6;
}

.dark .text-gray-800 {
    color: #e5e7eb;
}

.dark .text-gray-700 {
    color: #d1d5db;
}

.dark .text-gray-600 {
    color: #9ca3af;
}

.dark .text-gray-500 {
    color: #9ca3af;
}

.dark .text-gray-400 {
    color: #9ca3af;
}

.dark .text-gray-300 {
    color: #d1d5db;
}

.dark .text-gray-200 {
    color: #e5e7eb;
}

/* Fix dark mode backgrounds */
.dark .bg-white {
    background-color: #1f2937;
}

.dark .bg-gray-50 {
    background-color: #374151;
}

.dark .bg-gray-100 {
    background-color: #374151;
}

.dark .bg-gray-200 {
    background-color: #4b5563;
}

/* Fix dark mode borders */
.dark .border-gray-200 {
    border-color: #374151;
}

.dark .border-gray-300 {
    border-color: #4b5563;
}

.dark .border-gray-400 {
    border-color: #6b7280;
}

/* Ensure dark mode text is always visible */
.dark * {
    color: inherit;
}

.dark .text-inherit {
    color: inherit;
}

/* Equal height feature cards */
.equal-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px; /* matches p-5 */
  min-height: 120px;
  height: 100%;
  border-radius: 1rem; /* rounded-2xl */
}
.equal-card .icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem; /* rounded-lg */
  color: #fff;
}

/* Custom table styles */
.table-header {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400;
}

.table-cell-primary {
    @apply px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white;
}

/* Custom badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-100;
}

.badge-yellow {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100;
}

.badge-blue {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100;
}

/* Custom card styles */
.card {
    @apply bg-white overflow-hidden shadow rounded-lg dark:bg-gray-800;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

.card-footer {
    @apply bg-gray-50 px-4 py-3 sm:px-6 dark:bg-gray-700;
}

/* Custom modal styles */
.modal {
    @apply fixed z-10 inset-0 overflow-y-auto;
}

.modal-backdrop {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-900 dark:bg-opacity-75;
}

.modal-content {
    @apply inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full dark:bg-gray-800;
}

/* Custom form styles */
.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}

.form-group {
    @apply space-y-1;
}

.form-help {
    @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
}

/* Custom alert styles */
.alert {
    @apply rounded-md p-4 mb-4;
}

.alert-success {
    @apply bg-green-50 border border-green-200 text-green-700 dark:bg-green-900 dark:border-green-800 dark:text-green-100;
}

.alert-error {
    @apply bg-red-50 border border-red-200 text-red-700 dark:bg-red-900 dark:border-red-800 dark:text-red-100;
}

.alert-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-700 dark:bg-yellow-900 dark:border-yellow-800 dark:text-yellow-100;
}

.alert-info {
    @apply bg-blue-50 border border-blue-200 text-blue-700 dark:bg-blue-900 dark:border-blue-800 dark:text-blue-100;
}

/* Custom navigation styles */
.nav-link {
    @apply text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium;
}

.nav-link-active {
    @apply bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-100 px-3 py-2 rounded-md text-sm font-medium;
}

/* Custom list styles */
.list-item {
    @apply py-4 flex items-center space-x-4;
}

.list-item-title {
    @apply text-sm font-medium text-gray-900 dark:text-white;
}

.list-item-subtitle {
    @apply text-sm text-gray-500 dark:text-gray-400;
}

/* Custom divider styles */
.divider {
    @apply border-t border-gray-200 dark:border-gray-700 my-4;
}

.divider-vertical {
    @apply border-l border-gray-200 dark:border-gray-700 mx-4;
}

/* Custom tooltip styles */
.tooltip {
    @apply absolute z-10 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-sm dark:bg-white dark:text-gray-900;
}

/* Custom scrollbar styles */
.custom-scrollbar {
    @apply scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800;
}

/* Custom transition styles */
.fade-enter {
    @apply opacity-0;
}

.fade-enter-active {
    @apply opacity-100 transition-opacity duration-300;
}

.fade-exit {
    @apply opacity-100;
}

.fade-exit-active {
    @apply opacity-0 transition-opacity duration-300;
}

/* Custom animation styles */
.spin {
    @apply animate-spin;
}

.pulse {
    @apply animate-pulse;
}

.bounce {
    @apply animate-bounce;
}

/* Custom utility classes */
.text-truncate {
    @apply truncate;
}

.text-break {
    @apply break-words;
}

.text-nowrap {
    @apply whitespace-nowrap;
}

/* Custom responsive styles */
@screen sm {
    .container-sm {
        @apply max-w-screen-sm;
    }
}

@screen md {
    .container-md {
        @apply max-w-screen-md;
    }
}

@screen lg {
    .container-lg {
        @apply max-w-screen-lg;
    }
}

@screen xl {
    .container-xl {
        @apply max-w-screen-xl;
    }
}

/* Custom print styles */
@media print {
    .no-print {
        @apply hidden;
    }

    .print-only {
        @apply block;
    }
}

.header-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* 4px spacing between text and icon */
}
.info-icon {
    font-size: 1em;
    vertical-align: middle;
    cursor: pointer;
    color: #6b7280; /* gray-400 for light mode */
}
.dark .info-icon {
    color: #d1d5db; /* gray-300 for dark mode, matches other table headers */
}

/* Mobile Navigation Styles */
.mobile-nav-link {
    @apply group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 transition-colors duration-200;
}

/* Remove any large placeholder elements */
.mobile-nav-link svg,
.mobile-nav-link img,
.mobile-nav-link div {
    @apply max-w-none max-h-none;
}

.mobile-nav-icon {
    @apply mr-3 flex-shrink-0 h-4 w-4 text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200;
}

.mobile-nav-section {
    @apply mt-4 mb-3;
}

.mobile-nav-section-title {
    @apply px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider dark:text-gray-400 mb-1;
}

.mobile-nav-badge {
    @apply inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-red-500 rounded-full ml-auto;
}

/* Improve mobile menu spacing */
#mobile-menu .flex-1 {
    @apply px-0;
}

#mobile-menu nav {
    @apply px-3;
}

/* Better mobile menu organization */
.mobile-nav-section:not(:last-child) {
    @apply border-b border-gray-200 dark:border-gray-700 pb-3;
}

/* Improve mobile menu spacing */
.mobile-nav-link {
    @apply py-2 px-3;
}

/* Better mobile menu header */
#mobile-menu .flex-shrink-0 {
    @apply border-b border-gray-200 dark:border-gray-700 pb-3;
}

/* Vercel-style dropdown navigation */
.dropdown-nav-link {
    @apply flex items-center py-2 px-3 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-200;
}

.dropdown-nav-icon {
    @apply w-5 h-5 mr-3 text-base;
}

.dropdown-nav-badge {
    @apply inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white bg-red-500 rounded-full ml-auto;
}

/* Vercel-style mobile navigation */
.mobile-nav-section-vercel {
    @apply border-b border-gray-200 dark:border-gray-700 pb-4 mb-4;
}

.mobile-nav-section-toggle {
    @apply flex items-center justify-between w-full text-left py-3 px-0 text-base font-semibold text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200;
}

.mobile-nav-chevron {
    @apply w-4 h-4 transition-transform duration-200;
}

.mobile-nav-section-toggle[aria-expanded="true"] .mobile-nav-chevron {
    @apply rotate-180;
}

.mobile-nav-subsection {
    @apply hidden mt-2 space-y-1;
}

.mobile-nav-subsection.expanded {
    @apply block;
}

.mobile-nav-link-vercel {
    @apply flex items-center py-2 px-4 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-200;
}

.mobile-nav-icon-vercel {
    @apply w-5 h-5 mr-3 text-base;
}

.mobile-nav-badge-vercel {
    @apply inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white bg-red-500 rounded-full ml-auto;
}

/* Simple mobile navigation style (Vercel-inspired) */
.mobile-nav-link-simple {
    @apply block w-full text-base font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white py-2 transition-colors duration-200;
}

.mobile-nav-badge-simple {
    @apply inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-red-500 rounded-full ml-2;
}

/* Remove old mobile nav styles */
.mobile-nav-submenu {
    @apply ml-4 mt-1 space-y-1;
}

.mobile-nav-submenu-item {
    @apply text-sm py-1 px-3 rounded-md;
}

.mobile-nav-submenu-item:hover {
    @apply bg-gray-100 dark:bg-gray-700;
}

/* Improve section spacing */
.mobile-nav-section {
    @apply mb-4;
}

.mobile-nav-section-title {
    @apply font-semibold text-gray-700 dark:text-gray-300 mb-2;
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
    /* Improve touch targets */
    .btn-primary, .btn-secondary {
        @apply min-h-[44px] px-4 py-3 text-base;
    }
    
    /* Better spacing for mobile */
    .py-6 {
        @apply py-4;
    }
    
    .px-4 {
        @apply px-3;
    }
    
    /* Improve form elements on mobile */
    input, select, textarea {
        @apply text-base;
    }
    
    /* Better table handling on mobile */
    .table-responsive {
        @apply overflow-x-auto;
    }
    
    /* Improve card spacing on mobile */
    .card-body {
        @apply px-3 py-4;
    }
    
    /* Better grid layouts for mobile */
    .grid-cols-1 {
        @apply gap-3;
    }
    
    /* Improve button spacing */
    .space-x-2 > * + * {
        @apply ml-2;
    }
    
    .space-x-4 > * + * {
        @apply ml-4;
    }
}

/* Mobile menu animations */
#mobile-menu {
    transition: opacity 0.3s ease-in-out;
}

#mobile-menu.hidden {
    opacity: 0;
    pointer-events: none;
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Scrollable mobile menu styles */
#mobile-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

#mobile-menu::-webkit-scrollbar {
    width: 4px;
}

#mobile-menu::-webkit-scrollbar-track {
    background: transparent;
}

#mobile-menu::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 2px;
}

#mobile-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7);
}

.dark #mobile-menu::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5);
}

.dark #mobile-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.7);
}

/* Mobile menu button icon transitions */
#mobile-menu-button svg {
    transition: opacity 0.2s ease-in-out;
}

#mobile-menu-button svg.hidden {
    opacity: 0;
}

#mobile-menu-button svg:not(.hidden) {
    opacity: 1;
}

/* Improve mobile form layouts */
@media (max-width: 640px) {
    .grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4 {
        @apply grid-cols-1;
    }
    
    .grid-cols-1.lg\\:grid-cols-2 {
        @apply grid-cols-1;
    }
    
    /* Better mobile spacing */
    .space-y-3 > * + * {
        @apply mt-3;
    }
    
    .space-y-4 > * + * {
        @apply mt-4;
    }
    
    .space-y-6 > * + * {
        @apply mt-6;
    }
    
    /* Improve mobile text sizes */
    .text-2xl {
        @apply text-xl;
    }
    
    .text-lg {
        @apply text-base;
    }
    
    .text-sm {
        @apply text-sm;
    }
    
    /* Better mobile padding */
    .p-6 {
        @apply p-4;
    }
    
    .px-6 {
        @apply px-4;
    }
    
    .py-5 {
        @apply py-4;
    }
    
    /* Improve mobile form elements */
    select, input, textarea {
        @apply text-base;
    }
    
    /* Better mobile spacing for cards */
    .bg-white.dark\\:bg-gray-800.shadow.overflow-hidden.sm\\:rounded-lg {
        @apply rounded-lg;
    }
    
    /* Improve mobile button spacing */
    .space-x-2 > * + * {
        @apply ml-2;
    }
    
    .space-x-4 > * + * {
        @apply ml-4;
    }
    
    /* Better mobile text alignment */
    .text-center {
        @apply text-center;
    }
    
    /* Improve mobile grid gaps */
    .gap-5 {
        @apply gap-4;
    }
    
    .gap-6 {
        @apply gap-4;
    }
    
    /* Better mobile margins */
    .mb-6 {
        @apply mb-4;
    }
    
    .mt-8 {
        @apply mt-6;
    }
    
    /* Improve mobile form labels */
    .text-sm.font-medium {
        @apply text-base;
    }
    
    /* Better mobile icons */
    .w-5.h-5 {
        @apply w-6 h-6;
    }
    
    .w-6.h-6 {
        @apply w-7 h-7;
    }
    
    /* Improve touch targets for mobile */
    button, a, input[type="checkbox"], input[type="radio"] {
        @apply min-h-[44px] min-w-[44px];
    }
    
    /* Better mobile scrolling */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve mobile form focus states */
    input:focus, select:focus, textarea:focus {
        @apply ring-2 ring-primary-500 ring-offset-2;
    }
    
    /* Better mobile button states */
    .btn-primary:active, .btn-secondary:active {
        @apply transform scale-95;
    }
    
    /* Improve mobile table responsiveness */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better mobile card shadows */
    .shadow {
        @apply shadow-lg;
    }
    
    /* Improve mobile spacing for lists */
    .space-y-2 > * + * {
        @apply mt-2;
    }
    
    .space-y-3 > * + * {
        @apply mt-3;
    }
    
    .space-y-4 > * + * {
        @apply mt-4;
    }
    
    /* Better mobile text wrapping */
    .whitespace-nowrap {
        @apply break-words;
    }
    
    /* Improve mobile form validation */
    .text-red-600 {
        @apply text-red-500;
    }
    
    .text-green-600 {
        @apply text-green-500;
    }
} 

/* Dark mode text color overrides for better visibility */
.dark .text-red-600 {
    color: #fca5a5; /* red-300 */
}

.dark .text-red-700 {
    color: #fca5a5; /* red-300 */
}

.dark .text-red-800 {
    color: #fca5a5; /* red-300 */
}

.dark .text-green-600 {
    color: #86efac; /* green-300 */
}

.dark .text-green-700 {
    color: #86efac; /* green-300 */
}

.dark .text-green-800 {
    color: #86efac; /* green-300 */
}

.dark .text-blue-600 {
    color: #93c5fd; /* blue-300 */
}

.dark .text-blue-700 {
    color: #93c5fd; /* blue-300 */
}

.dark .text-blue-800 {
    color: #93c5fd; /* blue-300 */
}

/* Dark mode background color overrides for better contrast */
.dark .bg-red-50 {
    background-color: #7f1d1d; /* red-900 */
}

.dark .bg-green-50 {
    background-color: #14532d; /* green-900 */
}

.dark .bg-blue-50 {
    background-color: #1e3a8a; /* blue-900 */
}

.dark .border-red-200 {
    border-color: #dc2626; /* red-600 */
}

.dark .border-green-200 {
    border-color: #16a34a; /* green-600 */
}

.dark .border-blue-200 {
    border-color: #2563eb; /* blue-600 */
}

/* Mobile layout resilience for header/action bars */
@media (max-width: 640px) {
  /* When a container uses flex + items-center + justify-between, allow wrapping so CTA buttons remain visible */
  .flex.items-center.justify-between {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.5rem;
  }
  .flex.items-center.justify-between > * { min-width: 0; }
}

/* Prevent CTA buttons from shrinking or wrapping awkwardly */
a.btn-primary, button.btn-primary, .btn-primary,
a.btn-secondary, button.btn-secondary, .btn-secondary {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Utility: sticky action bar on mobile */
@media (max-width: 640px) {
  .mobile-sticky-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid rgba(0,0,0,0.05);
    z-index: 30;
  }
  .dark .mobile-sticky-actions {
    background: rgba(17, 24, 39, 0.9); /* gray-900/90 */
    border-top-color: rgba(255,255,255,0.08);
  }
}

/* Smooth scrolling and safe overflow on mobile */
@media (max-width: 640px) {
  .overflow-x-auto, .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
  img, svg, canvas { max-width: 100%; height: auto; }
}

/* Dark mode zebra fix for attendance tables (robust override) */
.dark table.attendance-table tbody tr:nth-child(odd) {
  background-color: #1f2937 !important; /* gray-800 */
}
.dark table.attendance-table tbody tr:nth-child(even) {
  background-color: rgba(17, 24, 39, 0.4) !important; /* gray-900/40 */
}
.dark table.attendance-table tbody tr:hover {
  background-color: rgba(17, 24, 39, 0.6) !important; /* gray-900/60 */
}

/* Ensure inputs inside attendance rows are dark in dark theme */
.dark table.attendance-table input[type="text"],
.dark table.attendance-table input.input-field,
.dark table.attendance-table .input-field,
.dark table.attendance-table input[type="date"] {
  background-color: #374151 !important; /* gray-700 */
  color: #e5e7eb !important; /* gray-200 */
  border-color: #4b5563 !important; /* gray-600 */
}