/* ==========================================================================
   MOBILE OPTIMIZATION - Quản lý Hoạt Động & Tables
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Card Header - Stack vertically */
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .card-header .flex {
        width: 100%;
        flex-direction: column;
    }

    .card-header .btn {
        width: 100%;
        justify-content: center;
        font-size: 0.9375rem;
        height: 44px;
        padding: 0 1.25rem;
    }

    .card-header .btn .material-icons {
        font-size: 1.25rem;
    }

    /* Table - Card View on Mobile */
    .table-responsive {
        border: 1px solid var(--divider);
        border-radius: 8px;
    }

    .table {
        display: block;
    }

    .table thead {
        display: none;
    }

    .table tbody {
        display: block;
    }

    .table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: white;
        padding: 1rem;
    }

    .table td {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
        white-space: normal;
    }

    .table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6B7280;
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    /* Buttons in table */
    .table td .flex-gap,
    .table td .flex {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .table td .btn {
        flex: 1;
        justify-content: center;
    }

    /* Button text - Show by default */
    .btn .btn-text {
        display: inline;
    }

    /* Modal - Full screen on mobile */
    #modal-them {
        padding: 0 !important;
    }

    #modal-them .card {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    #modal-them .card-body {
        flex: 1;
        overflow-y: auto;
    }

    /* Form - Better spacing */
    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        font-size: 0.9375rem;
        margin-bottom: 0.5rem;
    }

    .form-control {
        font-size: 1rem;
        /* Prevent zoom on iOS */
    }

    /* Grid - Single column */
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Card Accent - Better mobile display */
    .card-accent {
        margin-bottom: 1rem;
    }

    .card-accent h3 {
        font-size: 1.125rem;
    }

    /* Badge - Larger touch target */
    .badge {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* Extra small screens - Icon only buttons */
@media (max-width: 374.98px) {
    .btn .btn-text {
        display: none;
    }

    .btn {
        padding: 0 0.75rem;
        min-width: 44px;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .table td {
        font-size: 0.875rem;
        padding: 0.875rem;
    }

    .btn-sm {
        padding: 0.5rem 0.75rem;
    }

    .card-header .btn {
        font-size: 0.875rem;
        height: 40px;
    }
}