/* Mobile Responsive Styles for BPS Project */

/* General Mobile Optimizations */
@media (max-width: 768px) {
    /* Container and spacing adjustments */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Make all col-md-* classes stack on mobile */
    [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Form improvements */
    .bsp-form {
        padding: 1rem !important;
    }

    .form-label {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }

    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.6rem 0.8rem;
    }

    /* Button adjustments */
    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        margin: 0.25rem 0;
    }

    /* Table responsiveness */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }

    table {
        font-size: 0.85rem;
        min-width: 100%;
        width: max-content !important;
    }

    table th,
    table td {
        padding: 0.5rem !important;
        white-space: nowrap;
        min-width: 80px;
    }

    /* Make table action buttons visible and touch-friendly on mobile */
    table .btn-sm {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
        min-width: 60px;
        white-space: nowrap;
        margin: 0.2rem;
        display: inline-block;
    }

    /* Action column should have enough space */
    table td.text-center,
    table th.text-center {
        min-width: 120px !important;
        white-space: normal !important;
    }

    table td.text-center .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.25rem;
    }

    table td.text-center .btn:last-child {
        margin-bottom: 0;
    }

    /* Card adjustments */
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Dashboard adjustments */
    .actions-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .action-button {
        padding: 1rem;
    }

    .list-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .list-item {
        padding: 0.8rem;
    }

    /* Primary task card */
    .primary-task-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .task-details h3 {
        font-size: 1.1rem;
    }

    .task-details p {
        font-size: 0.9rem;
    }

    /* Formset (dynamic forms) */
    .formset-row {
        border: 1px solid #dee2e6;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* Navigation improvements */
    .navbar-brand {
        font-size: 1rem;
    }

    .navbar-brand .logo {
        width: 30px;
        height: auto;
    }

    .nav-link {
        padding: 0.5rem 0.75rem;
    }

    /* Hide long text, show icons */
    .hide-mobile-text {
        display: none;
    }

    /* Autocomplete results */
    .autocomplete-results {
        max-height: 200px;
        overflow-y: auto;
    }

    /* Detail pages */
    .detail-section {
        padding: 1rem;
    }

    .detail-row {
        flex-direction: column;
        margin-bottom: 1rem;
    }

    /* Status badges */
    .badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }

    /* Row spacing */
    .row.g-3 {
        gap: 0.75rem !important;
    }

    /* Header improvements */
    h1, h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 1rem;
    }

    /* Print button hide on mobile */
    .print-only {
        display: none;
    }

    /* Pagination improvements */
    .pagination {
        font-size: 0.9rem;
    }

    .page-link {
        padding: 0.4rem 0.7rem;
    }
}

/* Extra small devices (phones in portrait, less than 576px) */
@media (max-width: 576px) {
    body {
        font-size: 14px;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    h2 {
        font-size: 1.3rem;
    }

    .card {
        border-radius: 0.5rem;
    }

    /* Make action buttons smaller */
    .action-button span {
        font-size: 0.85rem;
    }

    .action-button i {
        font-size: 1.2rem;
    }

    /* Stack buttons vertically */
    .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Adjust table for very small screens */
    table {
        font-size: 0.75rem;
    }

    .table th,
    .table td {
        padding: 0.3rem !important;
    }
}

/* Landscape mode optimizations for mobile */
@media (max-width: 896px) and (orientation: landscape) {
    .navbar {
        padding: 0.25rem 0;
    }

    .primary-task-card {
        padding: 1rem;
    }

    .modal-dialog {
        max-width: 90%;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .nav-link,
    .list-item,
    .action-button {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Remove hover effects on touch devices */
    .btn:hover,
    .action-button:hover,
    .list-item:hover {
        transform: none;
    }

    /* Better spacing for touch */
    .form-check {
        padding: 0.5rem 0;
    }

    .form-check-input {
        width: 1.5em;
        height: 1.5em;
    }
}

/* Prevent horizontal scrolling */
body {
    overflow-x: hidden;
}

.container,
.container-fluid {
    overflow-x: hidden;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Better mobile scrolling */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Fix for iOS input zoom */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    font-size: 16px !important;
}