/* Mobile Responsive Styles */

/* Ensure Bootstrap columns stack properly on mobile */
@media (max-width: 767px) {
    .col-md-6,
    .col-md-8,
    .col-md-4,
    .col-lg-8,
    .col-lg-10 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .row > [class*="col-"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Base mobile styles */
@media (max-width: 767px) {
    /* Layout adjustments */
    body {
        overflow-x: hidden;
    }

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

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Sidebar overlay backdrop */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Main content adjustments */
    main {
        width: 100%;
        padding-left: 0;
    }

    /* Header adjustments */
    header {
        padding: 1rem !important;
    }

    header .flex {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    header h2 {
        font-size: 1.25rem !important;
    }

    header p {
        font-size: 0.75rem !important;
        display: none; /* Hide subtitle on mobile */
    }

    /* Hide "New Application" button text on mobile, show icon only */
    .btn-primary i {
        margin-right: 0 !important;
    }

    .btn-primary span:not(.sr-only) {
        display: none;
    }

    /* Content padding */
    .p-6 {
        padding: 1rem !important;
    }

    /* Cards */
    .card {
        margin-bottom: 1rem;
        padding: 1rem !important;
    }

    /* Forms - make grid columns stack on mobile */
    .grid-cols-2,
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Bootstrap form rows - ensure proper spacing */
    .row .mb-3 {
        margin-bottom: 1rem !important;
    }

    /* Form inputs */
    .input-field,
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 14px;
    }

    /* Buttons - make touch-friendly */
    button,
    .btn,
    .btn-primary,
    a.btn-primary {
        min-height: 44px; /* Touch target size */
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* Tables - make scrollable */
    .table-responsive,
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Wrap tables that aren't in table-responsive */
    table.table:not(.table-responsive table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .table {
        min-width: 600px;
        font-size: 0.875rem;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    /* Action buttons in tables - stack on mobile */
    .table td .btn,
    .table td a.btn {
        display: inline-block;
        margin: 0.25rem 0.125rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Action button groups */
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }

    .d-flex.gap-2 > *,
    .d-flex.gap-3 > * {
        flex: 1 1 auto;
        min-width: calc(50% - 0.25rem);
    }

    /* Dashboard stats - stack cards */
    .stat-card {
        margin-bottom: 1rem;
    }

    /* Dashboard grid adjustments */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Pipeline columns - stack vertically */
    .pipeline-column {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* User menu dropdown */
    #logoutMenu {
        right: 0;
        left: auto;
        width: 200px;
    }

    /* Toast notifications - adjust for mobile */
    .toast-container {
        left: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
    }

    /* Login/Register pages */
    .max-w-md {
        max-width: 100%;
        padding: 0 1rem;
    }

    /* External login buttons - stack vertically */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Password requirements box */
    .bg-blue-50 {
        font-size: 0.75rem;
        padding: 0.75rem;
    }

    /* Hide less important elements on mobile */
    .hidden-mobile {
        display: none !important;
    }

    /* Show mobile-only elements */
    .show-mobile {
        display: block !important;
    }

    /* Form buttons - stack vertically on mobile */
    .flex.gap-3 {
        flex-direction: column;
    }

    .flex.gap-3 > * {
        width: 100%;
    }

    /* Card max-width adjustments */
    .max-w-2xl {
        max-width: 100%;
    }

    /* Dashboard title adjustments */
    h2 {
        font-size: 1.5rem !important;
    }

    /* Better spacing for form groups */
    .mb-4,
    .mb-6 {
        margin-bottom: 1rem !important;
    }

    /* Header action buttons - stack on mobile */
    .mb-6.flex.items-center.justify-between,
    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .mb-6.flex.items-center.justify-between > div:last-child,
    .d-flex.justify-content-between > div:last-child {
        width: 100%;
    }

    .mb-6.flex.items-center.justify-between .flex.gap-3,
    .d-flex.justify-content-between .d-flex.gap-2 {
        width: 100%;
        flex-wrap: wrap;
    }

    .mb-6.flex.items-center.justify-between .flex.gap-3 > *,
    .d-flex.justify-content-between .d-flex.gap-2 > * {
        flex: 1 1 auto;
        min-width: calc(50% - 0.375rem);
    }

    /* Page titles */
    h2.text-2xl,
    h2.fw-bold {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem;
    }

    /* Subtitle text */
    .text-muted,
    p.text-gray-500 {
        font-size: 0.875rem;
    }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        width: 240px;
    }

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

    .table-responsive {
        overflow-x: auto;
    }
}

/* Large mobile and small tablet */
@media (min-width: 480px) and (max-width: 767px) {
    .sidebar {
        width: 300px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    a,
    button,
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .nav-item:hover {
        transform: none;
    }

    /* Better tap feedback */
    button:active,
    .btn:active,
    a:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* Landscape mobile */
@media (max-width: 767px) and (orientation: landscape) {
    header {
        padding: 0.5rem 1rem !important;
    }

    header h2 {
        font-size: 1.125rem !important;
    }

    .p-6 {
        padding: 0.75rem !important;
    }
}

/* Utility classes for responsive display */
@media (max-width: 767px) {
    .md\:block {
        display: none !important;
    }

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

    .md\:hidden {
        display: block !important;
    }
}

/* Ensure proper scrolling */
html,
body {
    overflow-x: hidden;
    width: 100%;
}

/* Fix for iOS Safari viewport */
@supports (-webkit-touch-callout: none) {
    .sidebar {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Home Layout Mobile Menu Styles */
@media (max-width: 767px) {
    /* Hide desktop navigation on mobile */
    .hidden.md\:flex {
        display: none !important;
    }

    /* Show mobile menu button */
    .md\:hidden {
        display: block !important;
    }

    /* Mobile menu animation */
    #mobileMenu {
        animation: slideDown 0.3s ease-out;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    #mobileMenu.hidden {
        display: none !important;
    }

    /* Mobile menu button styling */
    #mobileMenuToggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    #mobileMenuToggle:active {
        transform: scale(0.95);
    }

    /* Mobile menu links */
    #mobileMenu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Desktop: Hide mobile menu button */
@media (min-width: 768px) {
    #mobileMenuToggle {
        display: none !important;
    }

    #mobileMenu {
        display: none !important;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Additional mobile optimizations */
@media (max-width: 767px) {
    /* Improve card readability */
    .card-body {
        padding: 1rem !important;
    }

    /* Better button spacing */
    .btn-group,
    .btn-toolbar {
        flex-direction: column;
        width: 100%;
    }

    .btn-group > .btn,
    .btn-toolbar > .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* Badge adjustments */
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Ensure images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Better list spacing */
    ul, ol {
        padding-left: 1.25rem;
    }

    /* Improve text readability */
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}