﻿/* ------------------ Base site (ok) ------------------ */
.main-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.table-wrapper {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-reservation {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

    .table-reservation th, .table-reservation td {
        padding: 1rem;
        border-bottom: 1px solid #f1f1f1;
        text-align: center;
        font-size: .95rem;
        color: #343a40;
    }

    .table-reservation thead {
        background: #e9f0ff;
        color: #2c3e50;
    }

        .table-reservation thead th {
            position: sticky;
            top: 0;
            background: #e9f0ff;
            z-index: 1;
            white-space: nowrap;
        }

.badge-success {
    background: #1cc88a;
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
}

.badge-danger {
    background: #e74a3b;
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
}

.badge-secondary {
    background: #858796;
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
}

.action-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

    .action-buttons a, .action-buttons form button {
        margin: 0 4px;
    }

.card {
    border-radius: 1rem;
}

    .card .badge {
        font-size: .85rem;
    }

/* ------------------ Guest Order (scopé) ------------------ */
/* Anti-overflow local à Order */
.go-order .card, .go-order .card-body {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.go-order img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Table Order : sticky header */
table.table.go-table thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 1;
}

.go-table .text-nowrap {
    white-space: nowrap;
}

/* ✅ Par défaut: aucun label dans les cellules (évite le doublon) */
table.table.go-table td::before {
    content: none !important;
}

/* Desktop/Tablet: sémantique table normale (sécurité contre CSS globaux) */
@media (min-width:768px) {
    table.table.go-table thead {
        display: table-header-group !important;
    }

    table.table.go-table tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    table.table.go-table tr {
        display: table-row !important;
        width: auto !important;
    }

    table.table.go-table td, table.table.go-table th {
        display: table-cell !important;
        width: auto !important;
    }
}

/* Mobile: activer le mode "stacked" SEULEMENT si .go-stacked est présent */
@media (max-width:767.98px) {
    table.table.go-table.go-stacked thead {
        display: none !important;
    }

    table.table.go-table.go-stacked tbody {
        display: block;
        width: 100%;
    }

    table.table.go-table.go-stacked tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: .75rem 1rem;
        border-bottom: 1px solid #e9ecef;
        background: #fff;
        border-radius: .75rem;
        margin-bottom: .75rem;
    }

    table.table.go-table.go-stacked td {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: .35rem 0 !important;
        border: 0;
    }

        table.table.go-table.go-stacked td::before {
            content: attr(data-label) !important;
            font-weight: 600;
            color: #6c757d;
            margin-right: 1rem;
            flex: 0 0 50%;
        }

        table.table.go-table.go-stacked td .go-cell {
            text-align: right;
            flex: 1 1 0;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        /* Neutralise les width inline éventuels */
        table.table.go-table.go-stacked th[style*="width"],
        table.table.go-table.go-stacked td[style*="width"] {
            width: auto !important;
        }
}

/* Barre d’actions */
.go-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.go-actions form {
    flex: 1 1 0;
}

.go-actions .btn {
    width: 100%;
    min-height: 44px;
}

/* barre limites Order */
.go-limits {
    min-width: 0;
}
/* autorise la flexbox à rétrécir */
.go-limits > * {
    min-width: 0;
}
/* enfants flex réductibles */
/* badges : autoriser le retour à la ligne */
.go-limits .badge {
    white-space: normal; 
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: anywhere; /* coupe les très longs mots si besoin */
}

/* micro-ajustements mobile */
@media (max-width: 576px) {
    .go-limits {
        gap: .4rem;
        padding: .5rem .75rem;
    }

    .go-limits .badge {
        font-size: .85rem;
        padding: .35rem .6rem;
    }
}

@media (max-width: 360px) {
    .go-limits .badge {
        font-size: .8rem;
    }
}


@media (max-width:380px) {
    .go-actions {
        flex-direction: column;
    }
}

@media (min-width:576px) {
    .go-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .go-actions form {
        flex: 0 0 auto;
    }

    .go-actions .btn {
        width: auto;
        min-width: 140px;
    }
}

@media (max-width:767.98px) {
    /* En mode stacked, les cellules couvrant plusieurs colonnes s’affichent en bloc centré */
    table.table.go-table.go-stacked td[colspan] {
        display: block !important;
        padding: .75rem 0 !important;
        text-align: center;
    }
    /* Pas de pseudo-label pour ces cellules */
    table.table.go-table.go-stacked td[colspan]::before {
        content: none !important;
    }
}



/* 🔹 Style propre pour la barre de limites */
.go-limits {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

    /* badges améliorés */
    .go-limits .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .45rem .75rem;
        border-radius: .6rem;
        font-weight: 600;
        font-size: .9rem;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }

        /* primaire clair */
        .go-limits .badge.bg-primary-subtle {
            background: #e3f0ff;
            color: #0d6efd;
        }

        /* vert clair harmonisé */
        .go-limits .badge.bg-success-subtle {
            background: #e7f6ec;
            color: #198754;
        }

        /* chiffres de ratio mis en avant */
        .go-limits .badge strong {
            font-weight: 700;
            margin: 0 .25rem;
        }

/* 🔹 Responsive */
@media (max-width: 576px) {
    .go-limits {
        gap: .4rem;
        justify-content: flex-start;
    }

        .go-limits .badge {
            font-size: .85rem;
            padding: .35rem .6rem;
        }
}
