/* ============================================================
   MODERN MENU TABLE SYSTEM v2.0
   Prefix: mtable- (Menu Table)
   Purpose: Professional responsive tables with modern styling
   January 2026
   ============================================================ */

/* ===== TABLE CONTAINER ===== */
.mtable-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
}

/* ===== MAIN TABLE ===== */
.mtable-menu {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    display: table;
}

.mtable-menu th,
.mtable-menu td {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.mtable-menu th {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mtable-menu td {
    font-size: 14px;
    color: #374151;
    transition: background 0.2s ease;
}

.mtable-menu tbody tr {
    transition: all 0.2s ease;
}

.mtable-menu tbody tr:hover {
    background: #f9fafb;
    transform: scale(1.01);
}

/* ===== TABLE VARIANTS (Different Header Colors) ===== */

/* Green Header */
.mtable-green th {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Purple Header */
.mtable-purple th {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Red Header */
.mtable-red th {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Orange Header */
.mtable-orange th {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Dark Header */
.mtable-dark th {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

/* ===== IMAGE CONTROLS ===== */
.mtable-image-responsive {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    transition: transform 0.3s ease;
}

.mtable-image-responsive:hover {
    transform: scale(1.5);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mtable-owner-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #e5e7eb;
}

/* ===== RESPONSIVE DESIGN (Mobile) ===== */
@media (max-width: 768px) {
    .mtable-wrapper {
        padding: 16px;
    }
    
    .mtable-menu th,
    .mtable-menu td {
        padding: 10px 8px;
        font-size: 12px;
    }

    /* Hide specific columns on mobile */
    .mtable-menu td:nth-child(2), /* Description */
    .mtable-menu th:nth-child(2),
    .mtable-menu td:nth-child(5), /* Price */
    .mtable-menu th:nth-child(5),
    .mtable-menu td:nth-child(6), /* Status */
    .mtable-menu th:nth-child(6) {
        display: none;
    }

    /* Keep visible: Meal Name, Type, Quantity, Actions */
    .mtable-menu td:nth-child(1), /* Meal Name */
    .mtable-menu th:nth-child(1),
    .mtable-menu td:nth-child(3), /* Type */
    .mtable-menu th:nth-child(3),
    .mtable-menu td:nth-child(4), /* Quantity */
    .mtable-menu th:nth-child(4),
    .mtable-menu td:nth-child(7), /* Actions */
    .mtable-menu th:nth-child(7) {
        display: table-cell;
    }
    
    .mtable-image-responsive {
        width: 50px;
        height: 50px;
    }
}

/* ===== BACKWARD COMPATIBILITY ===== */
/* Support old class names */
.menu-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    display: table;
}

.menu-table th,
.menu-table td {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
}

.menu-table th {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.menu-table td {
    font-size: 14px;
    color: #374151;
}

.menu-table tbody tr:hover {
    background: #f9fafb;
}

@media (max-width: 768px) {
    .menu-table th,
    .menu-table td {
        padding: 10px 8px;
        font-size: 12px;
    }

    .menu-table td:nth-child(1),
    .menu-table th:nth-child(1),
    .menu-table td:nth-child(3),
    .menu-table th:nth-child(3),
    .menu-table td:nth-child(4),
    .menu-table th:nth-child(4),
    .menu-table td:nth-child(7),
    .menu-table th:nth-child(7) {
        display: table-cell;
    }

    .menu-table td:nth-child(2),
    .menu-table th:nth-child(2),
    .menu-table td:nth-child(5),
    .menu-table th:nth-child(5),
    .menu-table td:nth-child(6),
    .menu-table th:nth-child(6) {
        display: none;
    }
}

.image-responsive {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
}

.admenu-image-responsive {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
}

.owner-image-responsive {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #e5e7eb;
}

/* ============================================================
   END MODERN MENU TABLE
   All old class names still work for backward compatibility
   ============================================================ */