@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --font-sans-stack: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --tw-font-sans: var(--font-sans-stack);
}

html,
body {
    font-family: var(--font-sans-stack);
}

/* Landing page: scale fonts slightly on non-Apple devices to keep line counts consistent */
html.landing-page.non-apple-device {
    font-size: 90%;
}

@media (min-width: 640px) {
    html.landing-page.non-apple-device {
        font-size: 90%;
    }
}

@media (min-width: 768px) {
    html.landing-page.non-apple-device {
        font-size: 90%;
    }
}

@media (min-width: 1024px) {
    html.landing-page.non-apple-device {
        font-size: 90%;
    }
}

/* Non-Apple: explicitly tune hero heading and subtitle */
html.landing-page.non-apple-device .hero-headline {
    font-size: 2.5rem;
    /* down from 2.75rem */
    line-height: 1.1;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    html.landing-page.non-apple-device .hero-headline {
        font-size: 3.1rem;
        /* down from ~3.75rem */
    }
}

@media (min-width: 1024px) {
    html.landing-page.non-apple-device .hero-headline {
        font-size: 4.0rem;
        /* down from ~4.5rem */
    }
}

html.landing-page.non-apple-device .hero-subtitle {
    font-size: 1.1rem;
    /* down from 1.25rem */
    line-height: 1.5;
    letter-spacing: -0.003em;
}

@media (min-width: 768px) {
    html.landing-page.non-apple-device .hero-subtitle {
        font-size: 1.35rem;
        /* down from 1.5rem */
    }
}

/* 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;
}

/* Mobile-friendly action bar helpers */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.action-bar>* {
    display: inline-flex;
}

.primary-action {
    font-weight: 600;
}

@media (max-width: 640px) {
    .action-bar {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-bar>* {
        width: 100%;
        justify-content: center;
    }

    .action-bar>.primary-action,
    .action-bar>.btn-primary,
    .action-bar>a.btn-primary,
    .action-bar>button.btn-primary {
        grid-column: 1 / -1;
    }

    /* If there's only one secondary action, center it by using one column */
    .action-bar.single-secondary {
        grid-template-columns: 1fr;
    }
}

/* Mobile ergonomics: consistent control height and tap targets */
.mobile-form-control {
    width: 100%;
}

.mobile-primary-btn {
    width: auto;
}

@media (max-width: 640px) {
    .mobile-form-control {
        min-height: 44px;
        /* Better tap target */
        font-size: 16px;
        /* Prevent iOS zoom */
    }

    .mobile-primary-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* Narrower date width on small screens when desired */
    .mobile-date-sm {
        width: 11rem !important;
        /* ~176px */
    }

    /* Narrower time width on small screens */
    .mobile-time-sm {
        width: 8.5rem !important;
        /* ~136px */
    }
}

/* Horizontal scroll for long step indicators on small screens */
.scroll-steps {
    overflow-x: auto;
}

.scroll-steps .steps-inner {
    min-width: max-content;
}

/* 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: #000000;
    color: #ffffff;
    border-color: #374151;
}

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

.dark label {
    color: #ffffff;
}

/* 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: #000000;
}

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

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

.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;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        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(0, 0, 0, 0.9);
        /* Pure Black */
        border-top-color: rgba(255, 255, 255, 0.06);
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
}

/* Smooth scrolling handled above; removed duplicate/invalid block */

/* Dark mode zebra fix for attendance tables (robust override) */
.dark table.attendance-table tbody tr:nth-child(odd) {
    background-color: #000000 !important;
    /* Pure Black */
}

.dark table.attendance-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.5) !important;
    /* Pure Black/50 */
}

.dark table.attendance-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 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: #000000 !important;
    /* Pure Black */
    color: #ffffff !important;
    border-color: #374151 !important;
}

/* Testimonials alignment and arrow positioning */
#testi-track .grid {
    align-items: stretch;
}

#testi-track .grid>div {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 160px;
}

#testi-track .grid>div .mt-4 {
    margin-top: auto;
}

/* Move arrows slightly outside so they don't overlap card borders */
#testi-prev {
    transform: translateX(-60%);
}

#testi-next {
    transform: translateX(60%);
}

/* Hide extra slides peeking outside the viewport */
div.relative:has(#testi-track) {
    overflow: hidden;
}

@media (max-width: 640px) {
    #testi-prev {
        transform: translateX(-30%);
    }

    #testi-next {
        transform: translateX(30%);
    }
}