/* Mobile Responsive CSS for SleepOS */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Container adjustments */
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Card adjustments */
    .card {
        margin-bottom: 15px !important;
        border-radius: 8px !important;
    }

    .card-header {
        padding: 10px 15px !important;
        text-align: center !important;
    }

    .card-body {
        padding: 15px !important;
    }

    /* Page headings - ensure they're on their own line */
    .card-header h1,
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5 {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        font-size: clamp(1.2rem, 4vw, 2rem) !important;
        line-height: 1.2 !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }

    /* Fix search bars and buttons being pushed outside cards */
    .card-header .d-flex {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }

    .card-header .d-flex > * {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Ensure headings take full width and are centered */
    .card-header h1,
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5 {
        order: -1 !important; /* Put headings first */
        text-align: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    /* Search form adjustments - put on separate row */
    .card-header form {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        order: 1 !important; /* Put forms after headings */
    }

    .card-header .form-control {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .card-header .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Specific fix for search forms with buttons */
    .card-header form.d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .card-header form.d-flex .form-control {
        margin-bottom: 10px !important;
        order: 1 !important;
    }

    .card-header form.d-flex .btn {
        margin-top: 5px !important;
        order: 2 !important;
    }

    /* Fix for cards with d-flex justify-content-between align-items-center */
    .card-header.d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    /* Ensure all button groups in headers stack properly */
    .card-header .d-flex.align-items-center.gap-2 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Target specific card header layouts */
    .new-leads-header.d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .new-leads-header h2 {
        margin-bottom: 15px !important;
        order: -1 !important;
    }

    .new-leads-header .d-flex.align-items-center.gap-2 {
        width: 100% !important;
        order: 1 !important;
    }

    /* Fix accounting app button layouts */
    .container .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    .container .d-flex.justify-content-between.align-items-center > div:first-child {
        order: -1 !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .container .d-flex.justify-content-between.align-items-center > div:last-child {
        order: 1 !important;
        width: 100% !important;
    }

    /* Accounting button groups */
    .container .d-flex.justify-content-between.align-items-center .btn-group {
        width: 100% !important;
        flex-direction: column !important;
        margin-bottom: 8px !important;
    }

    .container .d-flex.justify-content-between.align-items-center .btn-group .btn {
        width: 100% !important;
        margin: 2px 0 !important;
    }

    .container .d-flex.justify-content-between.align-items-center .btn {
        width: 100% !important;
        margin: 4px 0 !important;
    }

    /* Button groups - stack vertically */
    .d-flex.gap-2,
    .d-flex.align-items-center.gap-2 {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .d-flex.gap-2 .btn,
    .d-flex.align-items-center.gap-2 .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Table responsiveness */
    .table-responsive {
        border: none !important;
        margin: 0 -15px !important;
        padding: 0 15px !important;
    }

    .table {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
    }

    .table th,
    .table td {
        padding: 8px 4px !important;
        vertical-align: middle !important;
        word-wrap: break-word !important;
        max-width: 150px !important;
    }

    /* Hide less important columns on mobile */
    .table .d-none-mobile {
        display: none !important;
    }

    /* Patient detail cards - stack vertically */
    .patient-detail-container .row > .col-md-4 {
        margin-bottom: 20px !important;
    }

    /* Key-value tables in patient details */
    .table.key-value td.key {
        width: 40% !important;
        font-size: 0.85rem !important;
        padding-right: 8px !important;
    }

    .table.key-value td.value {
        width: 60% !important;
        font-size: 0.85rem !important;
        padding-left: 8px !important;
    }

    /* Navigation adjustments */
    .navbar-nav {
        flex-direction: column !important;
    }

    .navbar-nav .nav-link {
        padding: 8px 0 !important;
        text-align: center !important;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    /* Form adjustments */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }

    /* Badge adjustments */
    .badge {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }

    /* Alert adjustments */
    .alert {
        margin: 10px 0 !important;
        padding: 10px !important;
        font-size: 0.9rem !important;
    }

    /* Footer adjustments */
    footer {
        text-align: center !important;
        margin-top: 30px !important;
    }

    #version {
        position: static !important;
        margin-top: 10px !important;
    }
}

/* Extra small devices (phones) */
@media (max-width: 576px) {
    .container, .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .card-header h1,
    .card-header h2 {
        font-size: 1.3rem !important;
    }

    .card-header h3,
    .card-header h4,
    .card-header h5 {
        font-size: 1.1rem !important;
    }

    .table {
        font-size: 0.75rem !important;
    }

    .table th,
    .table td {
        padding: 6px 2px !important;
        max-width: 100px !important;
    }

    .btn {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }

    .form-control,
    .form-select {
        padding: 10px !important;
    }
}

/* Pagination improvements for mobile */
@media (max-width: 768px) {
    .pagination {
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin: 20px 0 !important;
    }

    .pagination .page-item {
        margin: 2px !important;
    }

    .pagination .page-link {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
    }
}

/* Mobile-specific table layout for patients */
@media (max-width: 768px) {
    .mobile-patient-card {
        display: block !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
        background: white !important;
    }

    .mobile-patient-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #eee !important;
    }

    .mobile-patient-name {
        font-weight: bold !important;
        font-size: 1.1rem !important;
        color: #333 !important;
    }

    .mobile-patient-details {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .mobile-patient-detail {
        font-size: 0.85rem !important;
    }

    .mobile-patient-detail .label {
        font-weight: 600 !important;
        color: #666 !important;
    }

    .mobile-patient-actions {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .mobile-patient-actions .btn {
        flex: 1 !important;
        min-width: 100px !important;
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .card-header h1,
    .card-header h2 {
        font-size: 1.5rem !important;
    }

    .mobile-patient-details {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .table {
        font-size: 0.9rem !important;
    }
}

/* Patient Profile Navbar Mobile Fixes */
@media (max-width: 768px) {
    /* Patient navbar container */
    .navbar-patient-profile {
        padding: 0 !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Make sure navbar toggler is visible and properly styled as a menu button */
    .navbar-patient-profile .navbar-toggler {
        display: block !important;
        padding: 12px 16px !important;
        font-size: 1rem !important;
        border: 2px solid #007bff !important;
        border-radius: 8px !important;
        background-color: #007bff !important;
        color: white !important;
        margin: 0 auto 15px auto !important;
        position: relative !important;
        width: auto !important;
        min-width: 200px !important;
    }

    .navbar-patient-profile .navbar-toggler::before {
        content: "📋 Patient Menu " !important;
        font-size: 0.9rem !important;
        margin-right: 8px !important;
    }

    .navbar-patient-profile .navbar-toggler:hover {
        background-color: #0056b3 !important;
        border-color: #0056b3 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0,123,255,0.3) !important;
    }

    .navbar-patient-profile .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25) !important;
        outline: none !important;
    }

    .navbar-patient-profile .navbar-toggler-icon {
        width: 1.2em !important;
        height: 1.2em !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Ensure collapse content is properly styled */
    .navbar-patient-profile .navbar-collapse {
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin-top: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    .navbar-patient-profile .navbar-collapse.show {
        animation: slideDown 0.3s ease-out !important;
    }

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

    /* Stack nav items vertically on mobile */
    .navbar-patient-profile .navbar-nav {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .navbar-patient-profile .nav-item {
        width: 100% !important;
    }

    .navbar-patient-profile .nav-link {
        padding: 12px 16px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 6px !important;
        background-color: #f8f9fa !important;
        color: #495057 !important;
        text-align: center !important;
        font-weight: 500 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .navbar-patient-profile .nav-link:hover {
        background-color: #e9ecef !important;
        border-color: #adb5bd !important;
    }

    .navbar-patient-profile .nav-link.active,
    .navbar-patient-profile .nav-link:focus {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: white !important;
    }

    /* Button styling in navbar */
    .navbar-patient-profile .btn {
        width: 100% !important;
        margin: 4px 0 !important;
        min-height: 44px !important;
        border-radius: 6px !important;
    }

    /* Separator styling */
    .navbar-patient-profile .vr {
        display: none !important;
    }

    /* Make sure right-side nav items also stack properly */
    .navbar-patient-profile .navbar-nav:last-child {
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid #dee2e6 !important;
    }

    /* Upload file input styling */
    .navbar-patient-profile input[type="file"] + label {
        width: 100% !important;
        margin: 4px 0 !important;
    }

    /* Disabled nav links */
    .navbar-patient-profile .nav-link.disabled {
        background-color: #e9ecef !important;
        color: #6c757d !important;
        border-color: #dee2e6 !important;
        opacity: 0.65 !important;
    }
}

/* Ensure navbar is always visible */
@media (max-width: 768px) {
    .card-footer {
        padding: 15px !important;
    }

    /* Force navbar to be visible */
    .navbar-patient-profile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Make sure the navbar container is properly sized */
    .navbar-patient-profile .container-fluid {
        padding: 0 !important;
    }
}

/* Desktop navbar - always show navbar items */
@media (min-width: 769px) {
    .navbar-patient-profile .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-patient-profile .navbar-toggler {
        display: none !important;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .navbar-patient-profile {
        margin: 5px 0 !important;
        padding: 8px !important;
    }

    .navbar-patient-profile .navbar-collapse {
        padding: 10px !important;
    }

    .navbar-patient-profile .nav-link {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }

    .navbar-patient-profile .btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
    .btn, .form-control, .form-select {
        min-height: 44px !important; /* Apple's recommended touch target size */
    }

    .table th, .table td {
        min-height: 44px !important;
    }

    .pagination .page-link {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Ensure patient navbar elements are touch-friendly */
    .navbar-patient-profile .navbar-toggler {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    .navbar-patient-profile .nav-link {
        min-height: 44px !important;
    }
}