/*
 * Big Resto — Plan de salle CSS
 * Maquette 04 : tables rectangulaires/circulaires, zones, drawer commande.
 */

/* ─── Layout racine ─────────────────────────────────────────────────────────── */
.br-tables-wrap {
    display: flex;
    height: calc(100vh - 32px);
    overflow: hidden;
    font-family: var(--br-font-ui);
    background: var(--br-bg);
}

/* ─── Zone principale (plan) ────────────────────────────────────────────────── */
.br-tables-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: margin-right .25s cubic-bezier(.4,0,.2,1);
}
.br-tables-main.drawer-open { margin-right: 0; }

/* En-tête */
.br-tables-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--br-surface);
    border-bottom: 1px solid var(--br-border);
    flex-shrink: 0;
}
.br-tables-header-left h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--br-text-primary);
    margin: 0 0 2px;
}
.br-tables-header-left p {
    font-size: 12px;
    color: var(--br-text-secondary);
    margin: 0;
}
.br-tables-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Stats temps réel */
.br-tables-stats {
    display: flex;
    gap: 24px;
    padding: 10px 24px;
    background: var(--br-surface);
    border-bottom: 1px solid var(--br-border);
    flex-shrink: 0;
}
.br-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.br-stat-value {
    font-family: var(--br-font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--br-text-primary);
    line-height: 1;
}
.br-stat-value.red    { color: var(--br-red); }
.br-stat-value.green  { color: var(--br-green); }
.br-stat-value.orange { color: var(--br-orange); }
.br-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--br-text-muted);
}

/* ─── Onglets zones ──────────────────────────────────────────────────────────── */
.br-zones-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    background: var(--br-surface);
    border-bottom: 1px solid var(--br-border);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.br-zones-tabs::-webkit-scrollbar { display: none; }

.br-zone-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--br-text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    font-family: var(--br-font-ui);
    transition: all var(--br-transition);
}
.br-zone-tab:hover { color: var(--br-text-primary); }
.br-zone-tab.active {
    color: var(--br-text-primary);
    font-weight: 700;
    border-bottom-color: var(--br-red);
}
.br-zone-tab .tab-count {
    background: var(--br-border);
    color: var(--br-text-secondary);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    transition: all var(--br-transition);
}
.br-zone-tab.active .tab-count {
    background: var(--br-text-primary);
    color: #fff;
}

/* ─── Canvas du plan ────────────────────────────────────────────────────────── */
.br-floor-plan {
    flex: 1;
    overflow: auto;
    padding: 24px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--br-border) transparent;
}

.br-floor-canvas {
    position: relative;
    min-height: 500px;
    min-width: 600px;
    background: var(--br-surface);
    border: 1px solid var(--br-border);
    border-radius: var(--br-radius-lg);
    overflow: hidden;
}

/* Label entrée */
.br-floor-label {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--br-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.br-floor-label::before,
.br-floor-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--br-border);
}
.br-floor-label.top    { top: 16px; left: 24px; right: 24px; }
.br-floor-label.bottom { bottom: 16px; left: 24px; right: 24px; }
.br-floor-divider {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--br-border);
    border-left: 1px dashed var(--br-border);
}

/* ─── Grille tables (layout auto) ───────────────────────────────────────────── */
.br-tables-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 48px 24px 24px;
    align-items: flex-start;
    align-content: flex-start;
}

/* ─── Table individuelle ────────────────────────────────────────────────────── */
.br-table-item {
    position: relative;
    cursor: pointer;
    transition: transform var(--br-transition), box-shadow var(--br-transition);
    user-select: none;
}
.br-table-item:hover { transform: translateY(-3px); }
.br-table-item:active { transform: scale(.97); }

/* Forme rectangle */
.br-table-rect {
    width: 108px;
    height: 80px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    transition: all var(--br-transition);
}

/* Forme cercle */
.br-table-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    transition: all var(--br-transition);
}

/* Numéro de table */
.br-table-num {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.br-table-couverts {
    font-size: 11px;
    font-weight: 500;
    opacity: .7;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Statuts couleurs ──────────────────────────────────────────────────────── */

/* Libre */
.br-table-item[data-statut="libre"] .br-table-rect,
.br-table-item[data-statut="libre"] .br-table-circle {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
}
.br-table-item[data-statut="libre"]:hover .br-table-rect,
.br-table-item[data-statut="libre"]:hover .br-table-circle {
    background: #DCFCE7;
    border-color: #86EFAC;
    box-shadow: 0 4px 14px rgba(34,197,94,.2);
}

/* Occupée */
.br-table-item[data-statut="occupee"] .br-table-rect,
.br-table-item[data-statut="occupee"] .br-table-circle {
    background: #FFF0F0;
    border-color: #FECACA;
    color: #991B1B;
}
.br-table-item[data-statut="occupee"]:hover .br-table-rect,
.br-table-item[data-statut="occupee"]:hover .br-table-circle {
    background: #FEE2E2;
    border-color: #FCA5A5;
    box-shadow: 0 4px 14px rgba(229,53,53,.2);
}

/* Addition demandée */
.br-table-item[data-statut="addition"] .br-table-rect,
.br-table-item[data-statut="addition"] .br-table-circle {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}
.br-table-item[data-statut="addition"]:hover .br-table-rect,
.br-table-item[data-statut="addition"]:hover .br-table-circle {
    background: #FEF3C7;
    border-color: #FCD34D;
    box-shadow: 0 4px 14px rgba(245,158,11,.2);
}

/* Réservée */
.br-table-item[data-statut="reservee"] .br-table-rect,
.br-table-item[data-statut="reservee"] .br-table-circle {
    background: #F9FAFB;
    border-color: #E5E7EB;
    color: #6B7280;
}

/* Table sélectionnée (active dans le drawer) */
.br-table-item.active-selected .br-table-rect,
.br-table-item.active-selected .br-table-circle {
    box-shadow: 0 0 0 3px rgba(229,53,53,.4);
}

/* Dot statut (coin haut-droite) */
.br-table-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 2;
}
.br-table-dot.libre    { background: var(--br-green); }
.br-table-dot.occupee  { background: var(--br-red); }
.br-table-dot.addition { background: var(--br-orange); }
.br-table-dot.reservee { background: var(--br-gray); }

/* ─── Légende ────────────────────────────────────────────────────────────────── */
.br-floor-legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--br-surface);
    border: 1px solid var(--br-border);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: var(--br-shadow-sm);
}
.br-legend-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--br-text-muted);
    margin-bottom: 8px;
}
.br-legend-items { display: flex; flex-direction: column; gap: 5px; }
.br-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--br-text-secondary);
}
.br-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}

/* ─── Drawer commande (droite fixe) ─────────────────────────────────────────── */
.br-table-drawer {
    width: 300px;
    flex-shrink: 0;
    background: var(--br-surface);
    border-left: 1px solid var(--br-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    position: absolute;
    top: 0; right: 0; bottom: 0;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 100;
    box-shadow: var(--br-shadow-lg);
}
.br-table-drawer.open {
    transform: translateX(0);
    position: relative;
}

/* Contenu scrollable du drawer : prend toute la hauteur restante,
   permet au scroll interne de fonctionner sans pousser les actions hors écran */
#br-drawer-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* En-tête drawer */
.br-drawer-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--br-border);
    flex-shrink: 0;
}
.br-drawer-table-num {
    width: 40px;
    height: 40px;
    background: var(--br-red);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.br-drawer-table-info { flex: 1; margin-left: 12px; }
.br-drawer-table-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--br-text-primary);
    margin: 0 0 2px;
}
.br-drawer-table-meta {
    font-size: 11px;
    color: var(--br-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.br-drawer-table-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--br-border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--br-text-muted);
    transition: all var(--br-transition);
    flex-shrink: 0;
}
.br-drawer-table-close:hover { background: var(--br-bg); color: var(--br-text-primary); }

/* Statut badge */
.br-drawer-statut-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
}
.br-drawer-statut-badge.en_cuisine { background: #FEE2E2; color: #991B1B; }
.br-drawer-statut-badge.en_attente { background: #FEF3C7; color: #92400E; }
.br-drawer-statut-badge.prete      { background: #DCFCE7; color: #166534; }
.br-drawer-statut-badge.servie     { background: #F3F4F6; color: #6B7280; }

/* Titre commande */
.br-drawer-commande-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--br-text-muted);
    padding: 12px 20px 8px;
    flex-shrink: 0;
}

/* Lignes commande */
.br-drawer-lignes {
    flex: 1;
    overflow-y: auto;
    min-height: 0;       /* nécessaire pour que flex+overflow fonctionne */
    scrollbar-width: thin;
    scrollbar-color: var(--br-border) transparent;
}

.br-drawer-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--br-border-light);
}
.br-drawer-ligne-thumb {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
}
.br-drawer-ligne-thumb img { width: 100%; height: 100%; object-fit: cover; }
.br-drawer-ligne-thumb .br-plat-thumb-placeholder { width: 100%; height: 100%; }

.br-drawer-ligne-info { flex: 1; min-width: 0; }
.br-drawer-ligne-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--br-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 1px;
}
.br-drawer-ligne-detail {
    font-size: 10px;
    color: var(--br-text-muted);
    font-family: var(--br-font-mono);
    margin: 0;
}
.br-drawer-ligne-total {
    font-family: var(--br-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--br-text-primary);
    flex-shrink: 0;
}

/* Totaux drawer */
.br-drawer-totaux {
    padding: 12px 20px;
    border-top: 1px solid var(--br-border);
    background: var(--br-bg);
    flex-shrink: 0;
}
.br-drawer-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}
.br-drawer-total-row .label { color: var(--br-text-secondary); }
.br-drawer-total-row .amount {
    font-family: var(--br-font-mono);
    color: var(--br-text-secondary);
}
.br-drawer-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--br-border);
    margin-top: 6px;
}
.br-drawer-grand-total .label {
    font-size: 13px;
    font-weight: 700;
    color: var(--br-text-primary);
}
.br-drawer-grand-total .amount {
    font-family: var(--br-font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--br-text-primary);
    letter-spacing: -.02em;
}

/* Actions drawer */
.br-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px 16px;
    flex-shrink: 0;
    background: var(--br-surface);
    border-top: 1px solid var(--br-border);
}
.br-drawer-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--br-font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all var(--br-transition);
    border: none;
}
.br-drawer-btn.primary {
    background: var(--br-red);
    color: #fff;
}
.br-drawer-btn.primary:hover { background: var(--br-red-dark); }

.br-drawer-btn-row {
    display: flex;
    gap: 8px;
}
.br-drawer-btn-row .br-drawer-btn { flex: 1; }

.br-drawer-btn.secondary {
    background: var(--br-surface);
    color: var(--br-text-primary);
    border: 1px solid var(--br-border);
}
.br-drawer-btn.secondary:hover { background: var(--br-bg); }

.br-drawer-btn.danger {
    background: transparent;
    color: var(--br-red);
    border: 1px solid rgba(229,53,53,.3);
    font-size: 12px;
}
.br-drawer-btn.danger:hover { background: var(--br-red-light); }

/* Drawer table libre */
.br-drawer-libre {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 12px;
    color: var(--br-text-muted);
    text-align: center;
}
.br-drawer-libre svg { opacity: .25; }
.br-drawer-libre p { font-size: 13px; margin: 0; }

/* ─── Écran paiement inline (libérer la table) ───────────────────────────── */
.br-drawer-paiement {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px 20px;
    gap: 20px;
}

.br-drawer-paiement-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--br-text-muted);
    margin: 0;
    align-self: flex-start;
}

.br-drawer-paiement-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.br-paiement-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    border: 2px solid var(--br-border);
    background: var(--br-surface);
    font-family: var(--br-font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--br-text-primary);
    cursor: pointer;
    transition: all var(--br-transition);
    text-align: left;
}

.br-paiement-choice:hover {
    border-color: var(--br-red);
    background: var(--br-red-light);
    color: var(--br-red-dark);
}

.br-paiement-choice.selected {
    border-color: var(--br-red);
    background: var(--br-red);
    color: #fff;
}

.br-paiement-choice:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.br-paiement-choice svg {
    flex-shrink: 0;
    opacity: .7;
}

.br-paiement-choice.selected svg,
.br-paiement-choice:hover svg {
    opacity: 1;
}

/* ── Conteneur principal ───────────────────────────────────────────────────── */
.br-drawer-transfert {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 16px;
    gap: 16px;
    overflow-y: auto;
    min-height: 0;
}
 
/* ── Zones ─────────────────────────────────────────────────────────────────── */
.br-transfert-zones {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}
 
.br-transfert-zone-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--br-text-muted);
    margin: 0 0 8px;
}
 
/* ── Grille tables libres ──────────────────────────────────────────────────── */
.br-transfert-tables-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
 
/* ── Item table cliquable ──────────────────────────────────────────────────── */
.br-transfert-table-item {
    cursor: pointer;
    transition: transform var(--br-transition);
    user-select: none;
}
 
.br-transfert-table-item:hover  { transform: translateY(-2px); }
.br-transfert-table-item:active { transform: scale(.96); }
 
.br-transfert-table-item.selected .br-table-rect,
.br-transfert-table-item.selected .br-table-circle {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .5);
}
 
/* Les formes réutilisent les classes .br-table-rect / .br-table-circle
   déjà définies dans tables.css avec le modificateur .libre pour la couleur */
.br-transfert-table-item .br-table-rect.libre,
.br-transfert-table-item .br-table-circle.libre {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
    width: 76px;
    height: 60px;
}
 
.br-transfert-table-item .br-table-circle.libre {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
 
.br-transfert-table-item:hover .br-table-rect.libre,
.br-transfert-table-item:hover .br-table-circle.libre {
    background: #DCFCE7;
    border-color: #86EFAC;
    box-shadow: 0 4px 12px rgba(34, 197, 94, .2);
}