/*
    Mon Repère — Café Restaurant
    Couche applicative posée sur Bootstrap 5.3 : uniquement ce que Bootstrap ne
    fournit pas, c'est-à-dire l'identité visuelle et les écrans tactiles (plan de
    salle, grille de produits, bons de production).
*/

:root {
    --mr-accent: #f59e0b;
    --mr-sombre: #0f172a;
}

body {
    background: #f1f5f9;
}

/* Identité --------------------------------------------------------------- */

.mr-navbar {
    background: rgba(15, 23, 42, .98);
}

.mr-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    color: var(--mr-sombre);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 11px;
    box-shadow: 0 5px 16px rgba(245, 158, 11, .22);
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.mr-app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    box-shadow: 0 6px 24px rgba(2, 6, 23, .12);
    backdrop-filter: blur(14px);
}

/* Bouton flottant qui masque l'en-tête sur la page de caisse. Il vit hors du
   <header>, en bas à droite, pour rester joignable et ne jamais chevaucher le
   compte utilisateur une fois l'en-tête caché. Position fixe dans les deux
   états : pas besoin de le retrouver ailleurs selon que le menu soit visible
   ou non. */
.mr-header-toggle {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1040;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(15, 23, 42, .7);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .25);
    backdrop-filter: blur(6px);
    transition: background-color .15s ease;
}

.mr-header-toggle:hover {
    background: rgba(15, 23, 42, .9);
}

body.mr-header-masque .mr-app-header {
    display: none;
}

.mr-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.mr-app-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: .7rem;
    color: #fff;
    text-decoration: none;
}

.mr-app-brand:hover { color: #fff; }

.mr-app-brand-text,
.mr-app-brand-text strong,
.mr-app-brand-text small {
    display: block;
    min-width: 0;
}

.mr-app-brand-text strong {
    overflow: hidden;
    max-width: 330px;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-app-brand-text small {
    overflow: hidden;
    max-width: 330px;
    margin-top: .14rem;
    color: #94a3b8;
    font-size: .64rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-app-account {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.mr-app-profile {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .45rem .3rem .3rem;
    color: #fff;
    border: 1px solid transparent;
    border-radius: .7rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.mr-app-profile:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .08);
}

.mr-app-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    color: #e9d5ff;
    background: linear-gradient(145deg, #6d28d9, #7c3aed);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .55rem;
    font-size: .7rem;
    font-weight: 850;
}

.mr-app-avatar i {
    position: absolute;
    right: -.12rem;
    bottom: -.12rem;
    width: .52rem;
    height: .52rem;
    background: #22c55e;
    border: 2px solid #0f172a;
    border-radius: 50%;
}

.mr-app-profile-text,
.mr-app-profile-text strong,
.mr-app-profile-text small { display: block; }
.mr-app-profile-text strong { max-width: 180px; overflow: hidden; font-size: .7rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.mr-app-profile-text small { margin-top: .1rem; color: #94a3b8; font-size: .58rem; }

.mr-app-logout { margin: 0; }
.mr-app-logout button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 34px;
    padding: .35rem .55rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: .58rem;
    font-size: .64rem;
    font-weight: 700;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.mr-app-logout button:hover {
    color: #fecaca;
    background: rgba(239, 68, 68, .08);
    border-color: rgba(248, 113, 113, .25);
}

.mr-app-logout button span { font-size: .9rem; transform: rotate(45deg); }
.mr-app-logout button em { font-style: normal; }

.mr-app-navigation {
    background: rgba(2, 6, 23, .24);
    border-top: 1px solid rgba(148, 163, 184, .1);
}

.mr-app-navigation .container-xl {
    overflow-x: auto;
    scrollbar-width: none;
}

.mr-app-navigation .container-xl::-webkit-scrollbar { display: none; }

.mr-nav {
    width: max-content;
    min-width: 100%;
    gap: .15rem;
    padding: .38rem 0;
}

.mr-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .42rem .62rem;
    color: #94a3b8;
    border: 1px solid transparent;
    border-radius: .5rem;
    font-size: .68rem;
    font-weight: 680;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.mr-nav .nav-link:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, .05);
}

.mr-nav .nav-link.active {
    color: #fff;
    background: rgba(245, 158, 11, .13);
    border-color: rgba(245, 158, 11, .18);
    box-shadow: inset 0 -2px 0 #f59e0b;
}

.mr-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    color: #64748b;
    font-size: .72rem;
    line-height: 1;
}

.mr-nav .nav-link.active .mr-nav-icon { color: #fbbf24; }

@media (max-width: 767.98px) {
    .mr-app-profile-text { display: none; }
    .mr-app-brand-text strong { max-width: 210px; }
    .mr-app-logout button em { display: none; }
    .mr-app-logout button { width: 34px; padding: .3rem; }
}

@media (max-width: 575.98px) {
    .mr-app-topbar { min-height: 58px; }
    .mr-logo { width: 36px; height: 36px; border-radius: 10px; }
    .mr-app-brand { gap: .55rem; }
    .mr-app-brand-text strong { max-width: 165px; font-size: .7rem; }
    .mr-app-brand-text small { max-width: 165px; font-size: .58rem; }
    .mr-app-account { gap: .3rem; }
    .mr-app-profile { padding-right: .3rem; }
    .mr-nav { padding: .32rem 0; }
    .mr-nav .nav-link { padding: .4rem .55rem; font-size: .64rem; }
}

.mr-acces {
    min-height: 100vh;
    background: var(--mr-sombre);
}

.mr-acces .mr-logo {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
    border-radius: 16px;
}

/* Plan de salle ---------------------------------------------------------- */

.mr-pos-floor {
    --mr-floor-ink: #172033;
    --mr-floor-muted: #667085;
    --mr-floor-line: #e5e9f0;
    --mr-floor-soft: #f8fafc;
    color: var(--mr-floor-ink);
}

.mr-pos-floor-hero {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 0%, rgba(245, 158, 11, .28), transparent 30%),
        linear-gradient(135deg, #111827 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.mr-pos-floor-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 1.5rem;
}

.mr-pos-floor-kicker {
    display: block;
    margin-bottom: .2rem;
    color: #fbbf24;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mr-pos-floor-hero h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 750;
    letter-spacing: -.03em;
}

.mr-pos-floor-hero p {
    /* Le sous-titre explicatif n'apporte rien à un poste utilisé toute la
       journée : autant rendre cet espace aux tables. */
    display: none;
}

.mr-pos-floor-actions {
    display: flex;
    align-items: stretch;
    gap: .75rem;
}

.mr-pos-floor-actions form {
    display: flex;
}

.mr-pos-cash-state {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 118px;
    padding: .55rem .8rem;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .75rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.mr-pos-cash-state:hover {
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .24);
}

.mr-pos-cash-state small,
.mr-pos-cash-state strong {
    display: block;
    line-height: 1.2;
}

.mr-pos-cash-state small {
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mr-pos-cash-state strong {
    margin-top: .18rem;
    font-size: .86rem;
}

.mr-pos-cash-dot {
    width: .65rem;
    height: .65rem;
    flex: 0 0 auto;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}

.mr-pos-cash-state.is-closed .mr-pos-cash-dot {
    background: #f87171;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, .14);
}

.mr-pos-takeaway-button {
    min-height: 100%;
    white-space: nowrap;
}

.mr-pos-floor-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(2, 6, 23, .24);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.mr-pos-floor-metrics > div {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.mr-pos-floor-metrics > div:last-child {
    border-right: 0;
}

.mr-pos-floor-metrics strong {
    color: #fbbf24;
    font-size: 1.05rem;
    line-height: 1;
}

.mr-pos-floor-metrics span {
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 600;
}

.mr-pos-session-warning {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    color: #78350f;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: .8rem;
}

.mr-pos-session-warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    color: #fff;
    background: #f59e0b;
    border-radius: 50%;
    font-weight: 800;
}

.mr-pos-session-warning strong,
.mr-pos-session-warning p {
    display: block;
}

.mr-pos-session-warning p {
    margin: .1rem 0 0;
    color: #92400e;
    font-size: .82rem;
}

.mr-pos-session-warning a {
    margin-left: auto;
    color: #92400e;
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-pos-floor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 .65rem;
}

.mr-pos-floor-toolbar > div:first-child {
    display: flex;
    align-items: baseline;
    gap: .55rem;
}

.mr-pos-floor-toolbar h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 750;
}

.mr-pos-floor-toolbar > div:first-child > span {
    color: var(--mr-floor-muted);
    font-size: .78rem;
}

.mr-pos-floor-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .9rem;
}

.mr-pos-floor-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--mr-floor-muted);
    font-size: .74rem;
    font-weight: 650;
}

.mr-pos-floor-legend i,
.mr-table-status i {
    display: inline-block;
    width: .48rem;
    height: .48rem;
    background: #22c55e;
    border-radius: 50%;
}

.mr-pos-floor-legend .is-occupied { background: #f59e0b; }
.mr-pos-floor-legend .is-reserved { background: #8b5cf6; }
.mr-pos-floor-legend .is-cleaning { background: #94a3b8; }

.mr-pos-room {
    margin-bottom: 1.6rem;
}

.mr-pos-room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.mr-pos-room-header > div {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mr-pos-room-header h2 {
    margin: 0;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mr-pos-room-header > span {
    color: var(--mr-floor-muted);
    font-size: .73rem;
}

.mr-pos-room-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    color: #475569;
    background: #e9eef5;
    border-radius: .45rem;
    font-size: .85rem;
}

.mr-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: .85rem;
}

.mr-table {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mr-floor-line);
    border-top: 3px solid #22c55e;
    border-radius: .85rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .045);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.mr-table:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .09);
}

.mr-table.is-occupied {
    background: linear-gradient(180deg, #fffbeb 0%, #fff 54%);
    border-top-color: #f59e0b;
}

.mr-table.is-reserved {
    background: linear-gradient(180deg, #faf7ff 0%, #fff 54%);
    border-top-color: #8b5cf6;
}

.mr-table.is-cleaning {
    background: #f8fafc;
    border-top-color: #94a3b8;
}

.mr-table-form {
    height: 100%;
    margin: 0;
}

.mr-table-lien {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    width: 100%;
    min-height: 178px;
    height: 100%;
    padding: .9rem 1rem;
    border: 0;
    background: none;
    text-align: left;
    text-decoration: none;
    color: inherit;
}

.mr-table-lien:hover {
    color: inherit;
}

.mr-table button.mr-table-lien {
    cursor: pointer;
}

.mr-table-topline,
.mr-table-order-meta,
.mr-table-footer,
.mr-table-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.mr-table-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #15803d;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.mr-table.is-occupied .mr-table-status { color: #b45309; }
.mr-table.is-occupied .mr-table-status i { background: #f59e0b; }
.mr-table.is-reserved .mr-table-status { color: #6d28d9; }
.mr-table.is-reserved .mr-table-status i { background: #8b5cf6; }
.mr-table.is-cleaning .mr-table-status { color: #64748b; }
.mr-table.is-cleaning .mr-table-status i { background: #94a3b8; }

.mr-table-time,
.mr-table-seats {
    color: var(--mr-floor-muted);
    font-size: .7rem;
    font-weight: 600;
}

.mr-table-id {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .1rem 0;
}

.mr-table-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    color: #15803d;
    background: linear-gradient(160deg, #ecfdf5 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: .65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.mr-table-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.mr-table.is-occupied .mr-table-icon {
    color: #b45309;
    background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.mr-table.is-reserved .mr-table-icon {
    color: #6d28d9;
    background: linear-gradient(160deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #e9d5ff;
}

.mr-table.is-cleaning .mr-table-icon {
    color: #64748b;
    background: linear-gradient(160deg, #f8fafc 0%, #eef2f6 100%);
    border-color: #e2e8f0;
}

.mr-table-numero {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.mr-table-order-meta {
    color: var(--mr-floor-muted);
    font-size: .77rem;
}

.mr-table-order-meta > span strong {
    color: var(--mr-floor-ink);
}

.mr-table-total {
    color: var(--mr-floor-ink);
    font-size: 1.02rem;
}

.mr-table-footer {
    margin: auto -1rem -.9rem;
    padding: .66rem 1rem;
    color: var(--mr-floor-muted);
    background: rgba(248, 250, 252, .88);
    border-top: 1px solid var(--mr-floor-line);
    font-size: .73rem;
}

.mr-table-footer strong {
    color: #b45309;
}

.mr-table-help {
    color: var(--mr-floor-muted);
    font-size: .75rem;
}

.mr-table-open {
    margin: auto -1rem -.9rem;
    padding: .66rem 1rem;
    color: #15803d;
    background: #f0fdf4;
    border-top: 1px solid #dcfce7;
    font-size: .73rem;
    font-weight: 750;
}

.mr-table.is-reserved .mr-table-open {
    color: #6d28d9;
    background: #faf5ff;
    border-top-color: #f3e8ff;
}

.mr-table-inline-form {
    margin: auto -1rem -.9rem;
}

.mr-table-inline-form button {
    width: 100%;
    padding: .66rem 1rem;
    color: #475569;
    background: #eef2f6;
    border: 0;
    border-top: 1px solid #e2e8f0;
    font-size: .73rem;
    font-weight: 750;
}

.mr-table-inline-form button:hover {
    color: #0f172a;
    background: #e2e8f0;
}

.mr-pos-floor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 2.5rem;
    color: var(--mr-floor-muted);
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: .85rem;
    text-align: center;
}

.mr-pos-floor-empty strong {
    color: var(--mr-floor-ink);
}

.mr-pos-takeaway {
    overflow: hidden;
    margin-top: 2rem;
    background: #fff;
    border: 1px solid var(--mr-floor-line);
    border-radius: 1rem;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .045);
}

.mr-pos-takeaway-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: #fbfcfe;
    border-bottom: 1px solid var(--mr-floor-line);
}

.mr-pos-takeaway-header > div,
.mr-pos-takeaway-ref {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.mr-pos-takeaway-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
}

.mr-pos-takeaway-header p {
    margin: .12rem 0 0;
    color: var(--mr-floor-muted);
    font-size: .72rem;
}

.mr-pos-takeaway-icon,
.mr-pos-takeaway-ref > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    color: #b45309;
    background: #fef3c7;
    border-radius: .6rem;
    font-style: normal;
    font-weight: 800;
}

.mr-pos-takeaway-count {
    padding: .33rem .62rem;
    color: #475569;
    background: #eef2f6;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 750;
}

.mr-pos-takeaway-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.35fr) minmax(100px, 1fr) 90px 100px minmax(110px, auto) 85px;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.15rem;
    color: inherit;
    border-bottom: 1px solid #edf0f4;
    text-decoration: none;
    transition: background .15s ease;
}

.mr-pos-takeaway-row:last-child {
    border-bottom: 0;
}

.mr-pos-takeaway-row:hover {
    color: inherit;
    background: #fffbeb;
}

.mr-pos-takeaway-ref > span,
.mr-pos-takeaway-ref strong,
.mr-pos-takeaway-ref small {
    display: block;
}

.mr-pos-takeaway-ref strong {
    font-size: .84rem;
}

.mr-pos-takeaway-ref small,
.mr-pos-takeaway-server,
.mr-pos-takeaway-items {
    color: var(--mr-floor-muted);
    font-size: .73rem;
}

.mr-pos-takeaway-ref small {
    margin-top: .1rem;
}

.mr-pos-takeaway-items strong {
    color: var(--mr-floor-ink);
}

.mr-pos-takeaway-total {
    text-align: right;
    font-size: .88rem;
}

.mr-pos-order-status {
    justify-self: start;
    padding: .3rem .55rem;
    color: #92400e;
    background: #fef3c7;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-pos-order-status.is-prete,
.mr-pos-order-status.is-servie {
    color: #166534;
    background: #dcfce7;
}

.mr-pos-order-status.is-partiellement_payee {
    color: #1e40af;
    background: #dbeafe;
}

.mr-pos-takeaway-resume {
    color: #b45309;
    font-size: .72rem;
    font-weight: 750;
    text-align: right;
}

.mr-pos-takeaway-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.4rem;
    color: var(--mr-floor-muted);
    font-size: .8rem;
}

.mr-pos-takeaway-empty form {
    margin: 0;
}

.mr-pos-takeaway-empty button {
    padding: .35rem .65rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: .45rem;
    font-size: .72rem;
    font-weight: 750;
}

@media (max-width: 991.98px) {
    .mr-pos-floor-hero-main {
        padding: 1.55rem;
    }

    .mr-pos-floor-actions {
        flex-direction: column;
    }

    .mr-pos-takeaway-row {
        grid-template-columns: minmax(170px, 1.3fr) 90px 95px minmax(105px, auto) 75px;
    }

    .mr-pos-takeaway-server {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .mr-pos-floor-hero-main {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.35rem;
    }

    .mr-pos-floor-actions {
        width: 100%;
        flex-direction: row;
    }

    .mr-pos-floor-actions form {
        flex: 1;
    }

    .mr-pos-takeaway-button {
        width: 100%;
    }

    .mr-pos-floor-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .mr-pos-floor-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .mr-pos-floor-metrics > div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .mr-pos-floor-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .mr-pos-floor-legend {
        justify-content: flex-start;
    }

    .mr-tables {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mr-pos-takeaway-row {
        grid-template-columns: minmax(160px, 1fr) 75px 90px;
        gap: .7rem;
    }

    .mr-pos-takeaway-items,
    .mr-pos-order-status {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .mr-pos-cash-state {
        min-width: auto;
    }

    .mr-pos-floor-metrics > div {
        display: block;
        padding: .8rem 1rem;
    }

    .mr-pos-floor-metrics span {
        display: block;
        margin-top: .25rem;
    }

    .mr-pos-session-warning {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mr-pos-session-warning a {
        width: 100%;
        margin-left: 2.85rem;
    }

    .mr-tables {
        grid-template-columns: 1fr;
    }

    .mr-table-lien {
        min-height: 164px;
    }

    .mr-pos-takeaway-row {
        grid-template-columns: 1fr auto;
    }

    .mr-pos-takeaway-total {
        text-align: right;
    }

    .mr-pos-takeaway-resume {
        display: none;
    }

    .mr-pos-takeaway-empty {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }
}

/* Grille de produits ----------------------------------------------------- */

.mr-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: .75rem;
}

.mr-produit {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
    min-height: 92px;
    padding: .85rem;
    text-align: left;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
}

.mr-produit:hover:not(:disabled) {
    border-color: var(--mr-accent);
    background: #fffdf5;
}

.mr-produit:disabled {
    opacity: .5;
}

.mr-produit-nom {
    font-weight: 600;
    line-height: 1.25;
}

.mr-produit-prix {
    margin-top: auto;
    font-size: 1.05rem;
    font-weight: 700;
    color: #495057;
}

/* Administration du catalogue ------------------------------------------- */

.mr-catalog-page {
    --mr-catalog-ink: #172033;
    --mr-catalog-muted: #667085;
    --mr-catalog-line: #e6e9ef;
    --mr-catalog-soft: #f8fafc;
    color: var(--mr-catalog-ink);
}

.mr-catalog-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 5%, rgba(245, 158, 11, .25), transparent 26%),
        linear-gradient(135deg, #111827 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.mr-catalog-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2rem 1.7rem;
}

.mr-catalog-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.mr-catalog-kicker {
    display: block;
    margin-bottom: .45rem;
    color: #fbbf24;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mr-catalog-hero h1 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 750;
    letter-spacing: -.035em;
}

.mr-catalog-hero p {
    max-width: 620px;
    margin: .55rem 0 0;
    color: #cbd5e1;
    font-size: .96rem;
}

.mr-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: .65rem 1rem;
    color: #111827;
    background: #fbbf24;
    border: 1px solid #fbbf24;
    border-radius: .65rem;
    font-weight: 700;
    box-shadow: 0 5px 18px rgba(245, 158, 11, .18);
}

.mr-btn-primary:hover,
.mr-btn-primary:focus {
    color: #111827;
    background: #f59e0b;
    border-color: #f59e0b;
}

.mr-catalog-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 58px;
    padding: 0 2rem;
    background: rgba(255, 255, 255, .045);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.mr-catalog-tabs {
    display: flex;
    align-self: stretch;
    gap: 1.4rem;
}

.mr-catalog-tabs a {
    display: flex;
    align-items: center;
    position: relative;
    color: #94a3b8;
    font-size: .9rem;
    font-weight: 650;
    text-decoration: none;
}

.mr-catalog-tabs a:hover {
    color: #fff;
}

.mr-catalog-tabs a.active {
    color: #fff;
}

.mr-catalog-tabs a.active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background: #fbbf24;
    border-radius: 3px 3px 0 0;
}

.mr-catalog-stats {
    display: flex;
    gap: 1.25rem;
    color: #94a3b8;
    font-size: .78rem;
}

.mr-catalog-stats span {
    white-space: nowrap;
}

.mr-catalog-stats strong {
    color: #f8fafc;
    font-size: .9rem;
}

.mr-catalog-editor {
    overflow: hidden;
    border: 1px solid var(--mr-catalog-line);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.mr-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    background: var(--mr-catalog-soft);
    border-bottom: 1px solid var(--mr-catalog-line);
}

.mr-editor-heading h2,
.mr-list-heading h2 {
    margin: 0;
    color: var(--mr-catalog-ink);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.01em;
}

.mr-editor-heading p,
.mr-list-heading p {
    margin: .3rem 0 0;
    color: var(--mr-catalog-muted);
    font-size: .82rem;
}

.mr-editor-heading .mr-catalog-kicker {
    color: #b45309;
    margin-bottom: .25rem;
}

.mr-editor-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #64748b;
    background: #fff;
    border: 1px solid #dce1e8;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
}

.mr-editor-close:hover {
    color: #111827;
    border-color: #94a3b8;
}

.mr-editor-body {
    padding: 1.5rem;
}

.mr-catalog-editor .form-label {
    color: #344054;
    font-size: .82rem;
    font-weight: 700;
}

.mr-catalog-editor .form-control,
.mr-catalog-editor .form-select,
.mr-catalog-toolbar .form-control,
.mr-catalog-toolbar .form-select {
    border-color: #d8dee8;
    border-radius: .6rem;
}

.mr-catalog-editor .form-control:focus,
.mr-catalog-editor .form-select:focus,
.mr-catalog-toolbar .form-control:focus,
.mr-catalog-toolbar .form-select:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 .22rem rgba(245, 158, 11, .13);
}

.mr-catalog-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--mr-catalog-line);
    border-radius: .85rem;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .035);
}

.mr-search-field {
    position: relative;
    flex: 1 1 300px;
}

.mr-search-field > span {
    position: absolute;
    top: 50%;
    left: .85rem;
    z-index: 2;
    color: #98a2b3;
    font-size: 1.2rem;
    transform: translateY(-52%);
    pointer-events: none;
}

.mr-search-field .form-control {
    padding-left: 2.45rem;
}

.mr-category-filter {
    flex: 0 1 230px;
}

.mr-toggle-filter {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 .25rem;
    color: #475467;
    font-size: .84rem;
    white-space: nowrap;
}

.mr-toggle-filter .form-check-input {
    margin: 0;
}

.mr-catalog-list {
    overflow: hidden;
    border: 1px solid var(--mr-catalog-line);
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgba(15, 23, 42, .055);
}

.mr-list-heading {
    padding: 1.1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--mr-catalog-line);
}

.mr-catalog-table {
    min-width: 820px;
    font-size: .87rem;
}

.mr-catalog-table thead th {
    padding: .78rem 1rem;
    color: #667085;
    background: #f8fafc;
    border-bottom-color: var(--mr-catalog-line);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mr-catalog-table tbody td {
    padding: .9rem 1rem;
    color: #475467;
    border-bottom-color: #edf0f4;
}

.mr-catalog-table tbody tr:last-child td {
    border-bottom: 0;
}

.mr-catalog-table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #fffcf4;
}

.mr-product-cell,
.mr-category-cell {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 180px;
}

.mr-product-cell strong,
.mr-category-cell strong {
    display: block;
    color: #1d2939;
    font-weight: 700;
}

.mr-product-cell small {
    display: block;
    margin-top: .12rem;
    color: #98a2b3;
    font-size: .72rem;
}

.mr-product-mark {
    position: relative;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    background: linear-gradient(145deg, #fff7df, #fde7ae);
    border: 1px solid #f5d784;
    border-radius: .65rem;
}

.mr-product-mark::before,
.mr-product-mark::after {
    position: absolute;
    content: "";
    border-radius: 50%;
}

.mr-product-mark::before {
    top: .65rem;
    left: .65rem;
    width: .72rem;
    height: .72rem;
    background: #d97706;
}

.mr-product-mark::after {
    top: .85rem;
    left: 1.25rem;
    width: .42rem;
    height: .42rem;
    background: #f59e0b;
}

.mr-category-swatch {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    background: #f8fafc;
    background: color-mix(in srgb, var(--category-color) 18%, white);
    border: 1px solid #e2e8f0;
    border: 1px solid color-mix(in srgb, var(--category-color) 42%, white);
    border-radius: .65rem;
    box-shadow: inset 4px 0 0 var(--category-color);
}

.mr-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-status i {
    width: .4rem;
    height: .4rem;
    background: currentColor;
    border-radius: 50%;
}

.mr-status-success {
    color: #18734b;
    background: #eaf8f0;
}

.mr-status-warning {
    color: #a15c05;
    background: #fff4d6;
}

.mr-status-muted {
    color: #667085;
    background: #eef1f5;
}

.mr-action-link {
    padding: .32rem .5rem;
    color: #475467;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .45rem;
    text-decoration: none;
}

.mr-action-link:hover {
    color: #111827;
    background: #f8fafc;
    border-color: #e4e7ec;
}

@media (max-width: 767.98px) {
    .mr-catalog-hero-main {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.5rem 1.25rem;
    }

    .mr-catalog-hero-main .mr-btn-primary {
        width: 100%;
    }

    .mr-catalog-hero-footer {
        display: block;
        min-height: 0;
        padding: 0 1.25rem;
    }

    .mr-catalog-tabs {
        height: 52px;
    }

    .mr-catalog-stats {
        overflow-x: auto;
        gap: 1rem;
        margin: 0 -1.25rem;
        padding: .75rem 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .mr-catalog-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .mr-search-field,
    .mr-category-filter {
        width: 100%;
        flex-basis: auto;
    }

    .mr-toggle-filter {
        min-height: 40px;
    }

    .mr-editor-heading,
    .mr-editor-body {
        padding: 1.15rem;
    }
}

/* Écran de commande POS -------------------------------------------------- */

.mr-pos-page {
    --mr-pos-ink: #172033;
    --mr-pos-muted: #667085;
    --mr-pos-line: #e5e9f0;
    --mr-pos-soft: #f7f9fc;
    color: var(--mr-pos-ink);
}

.mr-pos-commandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--mr-pos-line);
    border-radius: 1rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}

.mr-pos-command-main {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.mr-pos-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    color: #344054;
    background: var(--mr-pos-soft);
    border: 1px solid var(--mr-pos-line);
    border-radius: .75rem;
    font-size: 1.8rem;
    line-height: 1;
    text-decoration: none;
}

.mr-pos-back:hover {
    color: #111827;
    background: #fff7df;
    border-color: #f4cf70;
}

.mr-pos-kicker {
    display: block;
    margin-bottom: .15rem;
    color: #b45309;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mr-pos-commandbar h1 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.mr-pos-commandbar h1 span {
    margin-left: .4rem;
    color: #98a2b3;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: 0;
}

.mr-pos-commandbar p {
    overflow: hidden;
    margin: .16rem 0 0;
    color: var(--mr-pos-muted);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-pos-command-actions {
    display: flex;
    gap: .5rem;
    flex: 0 0 auto;
}

.mr-pos-command-actions .btn {
    border-radius: .6rem;
    font-size: .82rem;
    font-weight: 650;
}

.mr-pos-alert-action {
    color: #92400e;
    background: #fff8e7;
    border: 1px solid #f4d58a;
}

.mr-pos-alert-action span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: .2rem;
    color: #fff;
    background: #f59e0b;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 900;
}

.mr-pos-message .alert {
    margin-bottom: .75rem;
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}

.mr-pos-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, .8fr);
    align-items: start;
    gap: 1rem;
}

.mr-pos-catalog {
    min-width: 0;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid var(--mr-pos-line);
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgba(15, 23, 42, .05);
}

.mr-pos-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mr-pos-section-heading h2,
.mr-pos-cart-heading h2 {
    margin: 0;
    color: var(--mr-pos-ink);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.015em;
}

.mr-pos-count {
    padding: .32rem .58rem;
    color: #667085;
    background: #f2f4f7;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}

.mr-pos-search {
    position: relative;
    display: flex;
    align-items: center;
}

.mr-pos-search > span {
    position: absolute;
    left: .95rem;
    z-index: 2;
    color: #98a2b3;
    font-size: 1.35rem;
    pointer-events: none;
}

.mr-pos-search .form-control {
    min-height: 48px;
    padding-right: 5rem;
    padding-left: 2.65rem;
    background: #fafbfc;
    border-color: #dfe4eb;
    border-radius: .75rem;
    font-size: .92rem;
}

.mr-pos-search .form-control:focus {
    background: #fff;
    border-color: #f59e0b;
    box-shadow: 0 0 0 .22rem rgba(245, 158, 11, .12);
}

.mr-pos-search .btn {
    position: absolute;
    right: .35rem;
    z-index: 2;
    padding: .35rem .6rem;
    color: #667085;
    background: transparent;
    border: 0;
    font-size: .75rem;
}

.mr-pos-categories {
    display: flex;
    overflow-x: auto;
    gap: .45rem;
    padding-bottom: .2rem;
    scrollbar-width: thin;
}

.mr-pos-category {
    flex: 0 0 auto;
    padding: .48rem .78rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.mr-pos-category.btn-dark {
    color: #111827;
    background: #fbbf24;
    border-color: #fbbf24;
}

.mr-pos-category.btn-outline-secondary {
    color: #475467;
    background: #fff;
    border-color: #dfe4eb;
}

.mr-pos-page .mr-produits {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: .65rem;
}

.mr-pos-page .mr-produit {
    position: relative;
    min-height: 150px;
    gap: .55rem;
    overflow: hidden;
    padding: .8rem;
    color: #1d2939;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: .85rem;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .035);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.mr-pos-page .mr-produit:hover:not(:disabled),
.mr-pos-page .mr-produit:focus-visible:not(:disabled) {
    background: #fffefa;
    border-color: #f2c457;
    box-shadow: 0 9px 24px rgba(180, 83, 9, .1);
    transform: translateY(-2px);
}

.mr-pos-page .mr-produit:active:not(:disabled) {
    transform: translateY(0) scale(.985);
}

.mr-produit-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    color: #b45309;
    background: linear-gradient(145deg, #fff8e7, #fde9b4);
    border: 1px solid #f5d786;
    border-radius: .8rem;
}

.mr-produit-visual::before {
    width: 1.05rem;
    height: .8rem;
    content: "";
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 .5rem .5rem;
}

.mr-produit-visual::after {
    position: absolute;
    top: .78rem;
    right: .48rem;
    width: .4rem;
    height: .5rem;
    content: "";
    border: 2px solid currentColor;
    border-left: 0;
    border-radius: 0 .4rem .4rem 0;
}

.mr-produit-visual i {
    position: absolute;
    top: .55rem;
    left: .92rem;
    width: 2px;
    height: .45rem;
    background: currentColor;
    border-radius: 2px;
    box-shadow: .35rem -.08rem 0 currentColor;
}

.mr-pos-page .mr-produit-nom {
    min-height: 2.4em;
    color: #1d2939;
    font-size: .86rem;
    font-weight: 750;
    line-height: 1.2;
}

.mr-produit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
}

.mr-pos-page .mr-produit-prix {
    margin: 0;
    color: #111827;
    font-size: .95rem;
    font-weight: 800;
}

.mr-produit-ajouter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: #fff;
    background: #1f2937;
    border-radius: .55rem;
    font-size: 1rem;
    font-weight: 700;
}

.mr-produit-indisponible {
    position: absolute;
    top: .65rem;
    right: .65rem;
    padding: .2rem .42rem;
    color: #b42318;
    background: #feeceb;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
}

.mr-pos-page .mr-produit:disabled {
    background: #f8fafc;
    filter: grayscale(.35);
    opacity: .62;
}

.mr-pos-page .mr-produit:disabled .mr-produit-ajouter {
    display: none;
}

.mr-pos-cart {
    min-width: 0;
}

.mr-pos-page .mr-addition {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mr-pos-line);
    border-radius: 1rem;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .08);
}

.mr-pos-cart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--mr-pos-line);
}

.mr-pos-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .45rem;
    color: #111827;
    background: #fbbf24;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 850;
}

.mr-pos-cart-body {
    padding: 0 1.05rem;
}

#pos-lignes {
    min-height: 125px;
    max-height: clamp(210px, 38vh, 430px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.mr-pos-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 170px;
    padding: 1rem;
    color: #98a2b3;
    text-align: center;
}

.mr-pos-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .7rem;
    color: #b45309;
    background: #fff5db;
    border-radius: 50%;
    font-size: 1.25rem;
}

.mr-pos-empty strong {
    color: #475467;
    font-size: .82rem;
}

.mr-pos-empty p {
    margin: .2rem 0 0;
    font-size: .72rem;
}

.mr-cart-line {
    padding: .85rem 0;
    border-bottom: 1px solid #edf0f4;
}

.mr-cart-line:last-child {
    border-bottom: 0;
}

.mr-cart-line-top,
.mr-total-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.mr-cart-line-name {
    color: #344054;
    font-size: .83rem;
    font-weight: 700;
}

.mr-cart-line-price {
    color: #1d2939;
    font-size: .83rem;
    font-weight: 800;
    white-space: nowrap;
}

.mr-cart-controls {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
}

.mr-cart-quantity {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    background: #f7f8fa;
    border: 1px solid #e1e6ed;
    border-radius: .55rem;
}

.mr-cart-quantity .btn {
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    color: #475467;
    border: 0;
    border-radius: 0;
    line-height: 1;
}

.mr-cart-quantity .btn:hover {
    color: #111827;
    background: #e9edf2;
}

.mr-cart-quantity .mr-quantite {
    min-width: 1.8rem;
    color: #1d2939;
    font-size: .72rem;
}

.mr-cart-note {
    padding: .25rem .4rem;
    color: #667085;
    border: 0;
    font-size: .7rem;
}

.mr-cart-remove {
    width: 1.7rem;
    height: 1.7rem;
    margin-left: auto;
    padding: 0;
    color: #b42318;
    background: #fff1f0;
    border: 0;
    border-radius: .45rem;
    font-size: 1rem;
}

.mr-cart-note-text {
    margin: .5rem 0 0;
    padding: .45rem .55rem;
    color: #854d0e;
    background: #fff9e8;
    border-left: 3px solid #fbbf24;
    border-radius: .35rem;
    font-size: .7rem;
}

.mr-cart-sent {
    margin-top: .4rem;
    color: #667085;
    font-size: .69rem;
}

.mr-cart-sent span {
    color: #198754;
    font-weight: 900;
}

.mr-pos-totals {
    padding: .85rem 1.1rem;
    background: #f8fafc;
    border-top: 1px solid var(--mr-pos-line);
    border-bottom: 1px solid var(--mr-pos-line);
    font-size: .75rem;
}

.mr-total-row {
    align-items: baseline;
    padding: .16rem 0;
}

.mr-total-row.fs-5 {
    margin-top: .35rem;
    padding-top: .55rem !important;
    color: #111827;
    border-top: 1px dashed #d5dbe4;
    font-size: 1rem !important;
}

.mr-pos-cart-actions {
    display: grid;
    gap: .55rem;
    padding: .9rem 1.1rem 1.05rem;
}

.mr-pos-cart-actions .btn {
    min-height: 43px;
    border-radius: .65rem;
    font-size: .82rem;
    font-weight: 750;
}

.mr-pos-send {
    color: #fff;
    background: #1f2937;
    border-color: #1f2937;
}

.mr-pos-send:hover {
    color: #fff;
    background: #111827;
    border-color: #111827;
}

.mr-pos-pay {
    color: #fff;
    background: #198754;
    border-color: #198754;
}

.mr-pos-pay:hover {
    color: #fff;
    background: #146c43;
    border-color: #146c43;
}

.mr-pos-page .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.mr-pos-page .modal-header {
    padding: 1rem 1.2rem;
    background: #f8fafc;
    border-bottom-color: #e5e9f0;
}

.mr-pos-page .modal-title {
    color: #172033;
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 991.98px) {
    .mr-pos-commandbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .mr-pos-command-actions {
        width: 100%;
        overflow-x: auto;
    }

    .mr-pos-command-actions .btn {
        flex: 0 0 auto;
    }

    .mr-pos-workspace {
        grid-template-columns: 1fr;
    }

    .mr-pos-page .mr-addition {
        position: static;
    }

    #pos-lignes {
        max-height: 380px;
    }
}

@media (max-width: 575.98px) {
    .mr-pos-commandbar {
        padding: .85rem;
    }

    .mr-pos-command-actions {
        margin-right: -.85rem;
        margin-left: -.85rem;
        width: calc(100% + 1.7rem);
        padding: 0 .85rem .15rem;
    }

    .mr-pos-catalog {
        padding: .85rem;
    }

    .mr-pos-page .mr-produits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .mr-pos-page .mr-produit {
        min-height: 138px;
        padding: .7rem;
    }

    .mr-produit-visual {
        width: 2.3rem;
        height: 2.3rem;
    }
}

/* Addition --------------------------------------------------------------- */

.mr-addition {
    position: sticky;
    top: 1rem;
}

.mr-ligne-envoyee {
    opacity: .7;
}

.mr-quantite {
    min-width: 2rem;
    text-align: center;
    font-weight: 600;
}

/* Tableau de bord -------------------------------------------------------- */

.mr-dashboard-page {
    --dash-ink: #172033;
    --dash-muted: #667085;
    --dash-line: #e4e8ee;
    --dash-soft: #f8fafc;
    color: var(--dash-ink);
}

.mr-dashboard-hero {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 0%, rgba(245, 158, 11, .24), transparent 28%),
        radial-gradient(circle at 65% 130%, rgba(59, 130, 246, .15), transparent 34%),
        linear-gradient(135deg, #111827, #1e293b);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.mr-dashboard-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2rem 1.55rem;
}

.mr-dashboard-kicker {
    display: block;
    margin-bottom: .35rem;
    color: #fbbf24;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.mr-dashboard-hero h1 {
    margin: 0;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 770;
    letter-spacing: -.04em;
}

.mr-dashboard-hero p { margin: .5rem 0 0; color: #cbd5e1; }

.mr-dashboard-hero-state {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.mr-dashboard-hero-state > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .65rem;
    color: #bbf7d0;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .2);
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 750;
}

.mr-dashboard-hero-state > span.is-closed { color: #fecaca; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .2); }
.mr-dashboard-hero-state i { width: .48rem; height: .48rem; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 4px rgba(34, 197, 94, .12); }
.mr-dashboard-hero-state .is-closed i { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
.mr-dashboard-hero-state > strong { padding: .4rem .55rem; color: #fbbf24; font-size: 1rem; }

.mr-dashboard-service-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(2, 6, 23, .24);
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.mr-dashboard-service-strip > span { padding: .82rem 1.35rem; border-right: 1px solid rgba(255, 255, 255, .08); }
.mr-dashboard-service-strip > span:last-child { border-right: 0; }
.mr-dashboard-service-strip small, .mr-dashboard-service-strip strong { display: block; }
.mr-dashboard-service-strip small { color: #94a3b8; font-size: .61rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mr-dashboard-service-strip strong { margin-top: .18rem; font-size: 1rem; }
.mr-dashboard-service-strip .has-warning strong { color: #fbbf24; }

.mr-dashboard-actions { margin: 1.25rem 0 1.75rem; }
.mr-dashboard-actions > header, .mr-dashboard-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.mr-dashboard-actions h2, .mr-dashboard-section-heading h2 { margin: 0; font-size: 1.08rem; font-weight: 780; letter-spacing: -.015em; }
.mr-dashboard-actions .mr-dashboard-kicker, .mr-dashboard-section-heading .mr-dashboard-kicker { color: #b45309; }
.mr-dashboard-actions > header > span, .mr-dashboard-section-heading > span { color: var(--dash-muted); font-size: .68rem; }
.mr-dashboard-actions > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .7rem; }
.mr-dashboard-actions article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .8rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: .75rem; }
.mr-dashboard-actions article.is-danger { background: #fef2f2; border-color: #fecaca; }
.mr-dashboard-alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; color: #fff; background: #f59e0b; border-radius: 50%; font-size: .75rem; font-weight: 800; }
.mr-dashboard-actions .is-danger .mr-dashboard-alert-icon { background: #ef4444; }
.mr-dashboard-actions article strong, .mr-dashboard-actions article small { display: block; }
.mr-dashboard-actions article strong { font-size: .73rem; }
.mr-dashboard-actions article small { overflow: hidden; margin-top: .1rem; color: #92400e; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.mr-dashboard-actions .is-danger small { color: #991b1b; }
.mr-dashboard-actions article a { color: #92400e; font-size: .65rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.mr-dashboard-actions .is-danger a { color: #991b1b; }

.mr-dashboard-sales { margin-bottom: 2rem; }
.mr-dashboard-section-heading nav { display: flex; padding: .2rem; background: #e9eef5; border-radius: .55rem; }
.mr-dashboard-section-heading nav a { padding: .35rem .65rem; color: #64748b; border-radius: .4rem; font-size: .66rem; font-weight: 750; text-decoration: none; }
.mr-dashboard-section-heading nav a.active { color: #fff; background: #172033; box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }

.mr-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.mr-dashboard-kpis article { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: 1rem; background: #fff; border: 1px solid var(--dash-line); border-radius: .85rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .04); }
.mr-dashboard-kpi-icon { position: relative; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; background: #dcfce7; border-radius: .65rem; }
.mr-dashboard-kpi-icon::before { position: absolute; top: .66rem; left: .6rem; width: 1.3rem; height: 1.1rem; border: 2px solid #15803d; border-radius: .2rem; content: ''; }
.mr-dashboard-kpi-icon::after { position: absolute; top: 1.02rem; left: 1.03rem; width: .45rem; height: .45rem; border: 2px solid #15803d; border-radius: 50%; content: ''; }
.mr-dashboard-kpis .is-tickets .mr-dashboard-kpi-icon { background: #dbeafe; }
.mr-dashboard-kpis .is-tickets .mr-dashboard-kpi-icon::before, .mr-dashboard-kpis .is-tickets .mr-dashboard-kpi-icon::after { border-color: #1d4ed8; }
.mr-dashboard-kpis .is-average .mr-dashboard-kpi-icon { background: #fef3c7; }
.mr-dashboard-kpis .is-average .mr-dashboard-kpi-icon::before, .mr-dashboard-kpis .is-average .mr-dashboard-kpi-icon::after { border-color: #b45309; }
.mr-dashboard-kpis .is-margin .mr-dashboard-kpi-icon { background: #ede9fe; }
.mr-dashboard-kpis .is-margin .mr-dashboard-kpi-icon::before, .mr-dashboard-kpis .is-margin .mr-dashboard-kpi-icon::after { border-color: #6d28d9; }
.mr-dashboard-kpis article > div { min-width: 0; }
.mr-dashboard-kpis small, .mr-dashboard-kpis strong, .mr-dashboard-kpis article > div > span { display: block; }
.mr-dashboard-kpis small { color: var(--dash-muted); font-size: .64rem; font-weight: 650; }
.mr-dashboard-kpis strong { overflow: hidden; margin-top: .18rem; font-size: 1.28rem; font-weight: 820; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.mr-dashboard-kpis strong em { color: var(--dash-muted); font-size: .55em; font-style: normal; font-weight: 700; }
.mr-dashboard-kpis article > div > span { overflow: hidden; margin-top: .2rem; color: var(--dash-muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.mr-dashboard-kpis span.is-up { color: #15803d; }
.mr-dashboard-kpis span.is-down { color: #dc2626; }
.mr-dashboard-refunds { margin: -.4rem 0 1rem; color: var(--dash-muted); font-size: .67rem; text-align: right; }

.mr-dashboard-trend { margin-bottom: 1rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--dash-line); border-radius: .85rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .04); }
.mr-dashboard-trend > header, .mr-dashboard-insights section > header, .mr-dashboard-secondary section > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mr-dashboard-trend h3, .mr-dashboard-insights h3, .mr-dashboard-secondary h3 { margin: 0; font-size: .78rem; font-weight: 780; }
.mr-dashboard-trend header span, .mr-dashboard-insights header span, .mr-dashboard-secondary header span { color: var(--dash-muted); font-size: .61rem; }
.mr-dashboard-trend header strong { font-size: .83rem; }
.mr-dashboard-chart { display: flex; align-items: flex-end; gap: .45rem; height: 165px; margin-top: 1rem; padding-top: .5rem; border-bottom: 1px solid var(--dash-line); background: repeating-linear-gradient(to bottom, #fff 0, #fff 39px, #edf0f4 40px); }
.mr-dashboard-chart > div { display: flex; align-items: center; flex: 1 1 0; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 10px; }
.mr-dashboard-chart > div > span { width: min(24px, 70%); min-height: 3px; background: linear-gradient(180deg, #f59e0b, #fbbf24); border-radius: .25rem .25rem 0 0; transition: height .2s ease; }
.mr-dashboard-chart small { margin: .35rem 0 -.95rem; color: var(--dash-muted); font-size: .52rem; white-space: nowrap; }

.mr-dashboard-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; }
.mr-dashboard-insights > section, .mr-dashboard-secondary > section { overflow: hidden; background: #fff; border: 1px solid var(--dash-line); border-radius: .85rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .04); }
.mr-dashboard-insights section > header, .mr-dashboard-secondary section > header { padding: .78rem .9rem; background: #fbfcfe; border-bottom: 1px solid var(--dash-line); }
.mr-dashboard-ranking article { display: grid; grid-template-columns: 20px minmax(0, 1fr) 45px 65px; align-items: center; gap: .5rem; padding: .6rem .75rem; border-bottom: 1px solid #edf0f4; }
.mr-dashboard-ranking article:last-child { border-bottom: 0; }
.mr-dashboard-ranking article > b { color: #94a3b8; font-size: .62rem; }
.mr-dashboard-ranking article > div { min-width: 0; }
.mr-dashboard-ranking article strong { display: block; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.mr-dashboard-ranking article > div > span { display: block; height: .22rem; margin-top: .26rem; overflow: hidden; background: #eef2f6; border-radius: 999px; }
.mr-dashboard-ranking article > div > span i { display: block; height: 100%; background: #f59e0b; border-radius: inherit; }
.mr-dashboard-ranking.is-categories article > div > span i { background: #8b5cf6; }
.mr-dashboard-ranking.is-payments article > div > span i { background: #3b82f6; }
.mr-dashboard-ranking article > small { color: var(--dash-muted); font-size: .58rem; text-align: right; }
.mr-dashboard-ranking article > em { font-size: .65rem; font-style: normal; font-weight: 750; text-align: right; }

.mr-dashboard-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.mr-dashboard-server { display: grid; grid-template-columns: auto minmax(0, 1fr) 55px 65px; align-items: center; gap: .55rem; padding: .6rem .75rem; border-bottom: 1px solid #edf0f4; }
.mr-dashboard-server:last-child { border-bottom: 0; }
.mr-dashboard-server-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; color: #5b21b6; background: #ede9fe; border-radius: .45rem; font-size: .62rem; font-weight: 800; }
.mr-dashboard-server > div { min-width: 0; }
.mr-dashboard-server > div strong { display: block; overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.mr-dashboard-server > div > span { display: block; height: .2rem; margin-top: .22rem; overflow: hidden; background: #eef2f6; border-radius: 999px; }
.mr-dashboard-server > div > span i { display: block; height: 100%; background: #8b5cf6; }
.mr-dashboard-server small { color: var(--dash-muted); font-size: .56rem; text-align: right; }
.mr-dashboard-server b { font-size: .64rem; text-align: right; }
.mr-dashboard-hours { display: flex; align-items: flex-end; gap: .45rem; height: 155px; padding: .9rem .9rem .5rem; }
.mr-dashboard-hours > div { display: flex; align-items: center; flex: 1; flex-direction: column; justify-content: flex-end; height: 100%; }
.mr-dashboard-hours > div > span { width: min(28px, 72%); min-height: 3px; background: linear-gradient(180deg, #3b82f6, #60a5fa); border-radius: .2rem .2rem 0 0; }
.mr-dashboard-hours small { margin-top: .3rem; color: var(--dash-muted); font-size: .53rem; }

.mr-dashboard-empty { display: flex; align-items: center; flex-direction: column; padding: 2.5rem; color: var(--dash-muted); background: #fff; border: 1px dashed #cbd5e1; border-radius: .85rem; text-align: center; }
.mr-dashboard-empty > span { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; color: #15803d; background: #dcfce7; border-radius: 50%; font-size: 1.2rem; }
.mr-dashboard-empty strong { color: var(--dash-ink); font-size: .83rem; }
.mr-dashboard-empty p { margin: .2rem 0 0; font-size: .68rem; }

.mr-dashboard-shortcuts { margin-top: 2rem; }
.mr-dashboard-shortcuts > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.mr-dashboard-shortcuts a { display: flex; align-items: center; gap: .7rem; padding: .8rem; color: inherit; background: #fff; border: 1px solid var(--dash-line); border-radius: .75rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.mr-dashboard-shortcuts a:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, .08); }
.mr-dashboard-shortcut-icon { position: relative; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; background: #fef3c7; border-radius: .58rem; }
.mr-dashboard-shortcut-icon::before { position: absolute; top: .58rem; left: .58rem; width: 1rem; height: 1rem; border: 2px solid #b45309; border-radius: .2rem; content: ''; }
.mr-dashboard-shortcuts .is-kds .mr-dashboard-shortcut-icon { background: #dbeafe; }
.mr-dashboard-shortcuts .is-kds .mr-dashboard-shortcut-icon::before { border-color: #1d4ed8; }
.mr-dashboard-shortcuts .is-stock .mr-dashboard-shortcut-icon { background: #dcfce7; }
.mr-dashboard-shortcuts .is-stock .mr-dashboard-shortcut-icon::before { border-color: #15803d; }
.mr-dashboard-shortcuts .is-users .mr-dashboard-shortcut-icon { background: #ede9fe; }
.mr-dashboard-shortcuts .is-users .mr-dashboard-shortcut-icon::before { border-color: #6d28d9; border-radius: 50%; }
.mr-dashboard-shortcuts a > div { min-width: 0; }
.mr-dashboard-shortcuts strong, .mr-dashboard-shortcuts small { display: block; }
.mr-dashboard-shortcuts strong { font-size: .72rem; }
.mr-dashboard-shortcuts small { margin-top: .1rem; color: var(--dash-muted); font-size: .61rem; }
.mr-dashboard-shortcuts a > b { margin-left: auto; color: #94a3b8; }

@media (max-width: 991.98px) {
    .mr-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-dashboard-insights { grid-template-columns: 1fr 1fr; }
    .mr-dashboard-insights > section:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .mr-dashboard-hero-main { flex-direction: column; gap: 1rem; padding: 1.35rem; }
    .mr-dashboard-hero-state { width: 100%; justify-content: space-between; }
    .mr-dashboard-service-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-dashboard-service-strip > span:nth-child(2) { border-right: 0; }
    .mr-dashboard-service-strip > span:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .mr-dashboard-secondary { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .mr-dashboard-actions > div, .mr-dashboard-insights { grid-template-columns: 1fr; }
    .mr-dashboard-insights > section:last-child { grid-column: auto; }
    .mr-dashboard-kpis { gap: .55rem; }
    .mr-dashboard-kpis article { gap: .45rem; padding: .7rem; }
    .mr-dashboard-kpi-icon { width: 2.1rem; height: 2.1rem; transform: scale(.82); transform-origin: left center; }
    .mr-dashboard-kpis strong { font-size: 1.02rem; }
    .mr-dashboard-chart { gap: .2rem; height: 135px; }
    .mr-dashboard-chart small { display: none; }
    .mr-dashboard-ranking article { grid-template-columns: 18px minmax(0, 1fr) 40px 58px; }
}

/* Gestion des utilisateurs ----------------------------------------------- */

.mr-users-page {
    --users-ink: #172033;
    --users-muted: #667085;
    --users-line: #e4e8ee;
    --users-soft: #f8fafc;
    color: var(--users-ink);
}

.mr-users-hero {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 87% 0%, rgba(139, 92, 246, .22), transparent 29%),
        radial-gradient(circle at 67% 130%, rgba(245, 158, 11, .14), transparent 33%),
        linear-gradient(135deg, #111827, #1e293b);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.mr-users-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2rem 1.6rem;
}

.mr-users-kicker {
    display: block;
    margin-bottom: .35rem;
    color: #fbbf24;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.mr-users-hero h1 {
    margin: 0;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 770;
    letter-spacing: -.04em;
}

.mr-users-hero p { max-width: 650px; margin: .52rem 0 0; color: #cbd5e1; }
.mr-users-hero-main > a { align-self: center; text-decoration: none; white-space: nowrap; }

.mr-users-hero-status {
    display: flex;
    gap: 1.5rem;
    padding: .82rem 2rem;
    color: #cbd5e1;
    background: rgba(2, 6, 23, .23);
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .74rem;
}

.mr-users-hero-status span { display: inline-flex; align-items: center; gap: .4rem; }
.mr-users-hero-status span:first-child { color: #fff; font-weight: 700; }
.mr-users-hero-status i { width: .48rem; height: .48rem; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 4px rgba(34, 197, 94, .12); }

.mr-users-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin: 1rem 0 1.5rem;
}

.mr-users-metrics article {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem;
    background: #fff;
    border: 1px solid var(--users-line);
    border-radius: .82rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.mr-users-metric-icon {
    position: relative;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    background: #ede9fe;
    border-radius: .65rem;
}

.mr-users-metric-icon::before { position: absolute; top: .53rem; left: .84rem; width: .76rem; height: .76rem; border: 2px solid #6d28d9; border-radius: 50%; content: ''; }
.mr-users-metric-icon::after { position: absolute; bottom: .48rem; left: .58rem; width: 1.3rem; height: .65rem; border: 2px solid #6d28d9; border-radius: .75rem .75rem .3rem .3rem; content: ''; }
.mr-users-metric-icon.is-active { background: #dcfce7; }
.mr-users-metric-icon.is-active::before, .mr-users-metric-icon.is-active::after { border-color: #15803d; }
.mr-users-metric-icon.is-blocked { background: #fee2e2; }
.mr-users-metric-icon.is-blocked::before, .mr-users-metric-icon.is-blocked::after { border-color: #b91c1c; }
.mr-users-metric-icon.is-role { background: #fef3c7; }
.mr-users-metric-icon.is-role::before, .mr-users-metric-icon.is-role::after { border-color: #b45309; }
.mr-users-metrics article > div { min-width: 0; }
.mr-users-metrics strong, .mr-users-metrics article > div > span { display: block; }
.mr-users-metrics strong { font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.mr-users-metrics article > div > span { overflow: hidden; margin-top: .2rem; color: var(--users-muted); font-size: .7rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.mr-user-editor,
.mr-role-editor {
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #d9dee7;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.mr-user-editor > header,
.mr-role-editor > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: #fbfcfe;
    border-bottom: 1px solid var(--users-line);
}

.mr-user-editor h2, .mr-role-editor h2, .mr-users-section-heading h2 { margin: 0; font-size: 1.08rem; font-weight: 780; }
.mr-user-editor .mr-users-kicker, .mr-role-editor .mr-users-kicker, .mr-users-section-heading .mr-users-kicker { color: #b45309; }
.mr-user-editor > header > a, .mr-role-editor > header > a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: #64748b; background: #eef2f6; border-radius: 50%; font-size: 1.2rem; text-decoration: none; }

.mr-user-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.1rem;
}

.mr-user-editor fieldset {
    min-width: 0;
    padding: 1rem;
    background: var(--users-soft);
    border: 1px solid var(--users-line);
    border-radius: .75rem;
}

.mr-user-editor legend { float: none; width: auto; margin: 0 0 .8rem; font-size: .78rem; font-weight: 800; }
.mr-user-editor label:not(.mr-user-active-switch), .mr-user-pin-pair label { display: block; margin: .72rem 0 .28rem; color: #475569; font-size: .69rem; font-weight: 750; }
.mr-user-editor fieldset > label:first-of-type { margin-top: 0; }
.mr-user-editor label span { color: var(--users-muted); font-weight: 500; }
.mr-user-editor fieldset > small { display: block; margin-top: .35rem; color: var(--users-muted); font-size: .64rem; }
.mr-user-pin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mr-user-field-error { margin: .25rem 0 0; color: #dc2626; font-size: .66rem; }

.mr-user-active-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 1.1rem 1.1rem;
    padding: .8rem 1rem;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: .7rem;
    cursor: pointer;
}

.mr-user-active-switch span, .mr-user-active-switch strong, .mr-user-active-switch small { display: block; }
.mr-user-active-switch strong { font-size: .75rem; }
.mr-user-active-switch small { margin-top: .1rem; color: var(--users-muted); font-size: .63rem; }
.mr-user-active-switch input, .mr-permission-groups input { width: 2.25rem; height: 1.2rem; flex: 0 0 auto; appearance: none; background: #cbd5e1; border-radius: 999px; cursor: pointer; }
.mr-user-active-switch input::before, .mr-permission-groups input::before { display: block; width: .9rem; height: .9rem; margin: .15rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(15, 23, 42, .25); content: ''; transition: transform .15s ease; }
.mr-user-active-switch input:checked, .mr-permission-groups input:checked { background: #22c55e; }
.mr-user-active-switch input:checked::before, .mr-permission-groups input:checked::before { transform: translateX(1.05rem); }
.mr-user-active-switch input:disabled { opacity: .55; cursor: not-allowed; }

.mr-user-editor form > footer, .mr-role-editor form > footer { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; padding: .85rem 1.1rem; background: #fbfcfe; border-top: 1px solid var(--users-line); }
.mr-user-editor form > footer a, .mr-role-editor form > footer a { padding: .5rem .7rem; color: #64748b; font-size: .72rem; font-weight: 700; text-decoration: none; }

.mr-users-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.5rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--users-line);
    border-radius: .82rem;
}

.mr-users-search { position: relative; flex: 1 1 320px; }
.mr-users-search span { position: absolute; top: 50%; left: .75rem; color: #94a3b8; transform: translateY(-50%); }
.mr-users-search input { padding-left: 2rem; }
.mr-users-toolbar select { flex: 0 1 180px; }
.mr-users-toolbar > a { color: #64748b; font-size: .7rem; font-weight: 700; text-decoration: none; }

.mr-users-section { margin-bottom: 2rem; }
.mr-users-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.mr-users-section-heading > span { color: var(--users-muted); font-size: .69rem; }

.mr-users-list { overflow: hidden; background: #fff; border: 1px solid var(--users-line); border-radius: .9rem; box-shadow: 0 5px 16px rgba(15, 23, 42, .04); }
.mr-user-row { display: grid; grid-template-columns: auto minmax(180px, 1.3fr) minmax(110px, .8fr) minmax(165px, 1fr) 80px 125px; align-items: center; gap: .8rem; padding: .78rem 1rem; border-bottom: 1px solid #edf0f4; }
.mr-user-row:last-child { border-bottom: 0; }
.mr-user-row.is-blocked { background: #fffafa; }
.mr-user-row.is-inactive { background: #fafafa; opacity: .76; }
.mr-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; color: #5b21b6; background: #ede9fe; border-radius: .65rem; font-size: .72rem; font-weight: 850; }
.mr-user-row.is-blocked .mr-user-avatar { color: #991b1b; background: #fee2e2; }
.mr-user-identity, .mr-user-identity strong, .mr-user-identity > span { min-width: 0; }
.mr-user-identity strong, .mr-user-identity > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-user-identity strong { font-size: .77rem; }
.mr-user-identity strong small { display: inline-block; margin-left: .3rem; padding: .12rem .35rem; color: #166534; background: #dcfce7; border-radius: 999px; font-size: .55rem; vertical-align: middle; }
.mr-user-identity > span { margin-top: .13rem; color: var(--users-muted); font-size: .66rem; }
.mr-user-role > span { display: inline-flex; padding: .27rem .5rem; color: #5b21b6; background: #ede9fe; border-radius: 999px; font-size: .63rem; font-weight: 750; }
.mr-user-role small { display: block; margin-top: .16rem; color: var(--users-muted); font-size: .56rem; }
.mr-user-login { color: var(--users-muted); font-size: .63rem; }
.mr-user-state { display: inline-flex; align-items: center; gap: .3rem; color: #166534; font-size: .65rem; font-weight: 750; }
.mr-user-state i { width: .45rem; height: .45rem; background: #22c55e; border-radius: 50%; }
.mr-user-row.is-blocked .mr-user-state { color: #991b1b; }
.mr-user-row.is-blocked .mr-user-state i { background: #ef4444; }
.mr-user-row.is-inactive .mr-user-state { color: #64748b; }
.mr-user-row.is-inactive .mr-user-state i { background: #94a3b8; }
.mr-user-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.mr-user-actions form { margin: 0; }
.mr-user-actions a, .mr-user-actions button { padding: 0; color: #475569; background: none; border: 0; font-size: .64rem; font-weight: 750; text-decoration: none; }
.mr-user-actions button.is-block { color: #b91c1c; }
.mr-user-actions button.is-unblock { color: #15803d; }

.mr-roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: .75rem; }
.mr-roles-grid > article { overflow: hidden; background: #fff; border: 1px solid var(--users-line); border-radius: .8rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .04); }
.mr-roles-grid > article.is-inactive { opacity: .65; }
.mr-roles-grid article > header { display: flex; align-items: center; gap: .6rem; padding: .85rem; }
.mr-role-icon { position: relative; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; background: #ede9fe; border-radius: .55rem; }
.mr-role-icon::before { position: absolute; top: .52rem; left: .7rem; width: .72rem; height: .72rem; border: 2px solid #6d28d9; border-radius: 50%; content: ''; }
.mr-role-icon::after { position: absolute; bottom: .4rem; left: .5rem; width: 1.12rem; height: .55rem; border: 2px solid #6d28d9; border-radius: 999px 999px .25rem .25rem; content: ''; }
.mr-roles-grid h3 { margin: 0; font-size: .78rem; font-weight: 770; }
.mr-roles-grid header div > span { color: var(--users-muted); font-size: .59rem; }
.mr-roles-grid header > small { margin-left: auto; padding: .2rem .4rem; color: #475569; background: #eef2f6; border-radius: 999px; font-size: .55rem; font-weight: 700; }
.mr-roles-grid article > div { display: flex; gap: 1rem; padding: .65rem .85rem; background: var(--users-soft); border-top: 1px solid var(--users-line); border-bottom: 1px solid var(--users-line); color: var(--users-muted); font-size: .63rem; }
.mr-roles-grid article > div strong { color: var(--users-ink); }
.mr-roles-grid article > footer { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: .6rem .85rem; }
.mr-roles-grid footer span { color: #166534; font-size: .58rem; font-weight: 700; }
.mr-roles-grid footer a { margin-left: auto; color: #6d28d9; font-size: .64rem; font-weight: 750; text-decoration: none; }

.mr-role-editor > header p { margin: .18rem 0 0; color: var(--users-muted); font-size: .68rem; }
.mr-permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 1rem; }
.mr-permission-groups fieldset { min-width: 0; overflow: hidden; border: 1px solid var(--users-line); border-radius: .7rem; }
.mr-permission-groups legend { display: flex; align-items: center; justify-content: space-between; float: none; width: 100%; margin: 0; padding: .65rem .75rem; background: var(--users-soft); border-bottom: 1px solid var(--users-line); font-size: .7rem; font-weight: 800; }
.mr-permission-groups legend small { color: var(--users-muted); font-size: .58rem; font-weight: 600; }
.mr-permission-groups fieldset > label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .75rem; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.mr-permission-groups fieldset > label:last-child { border-bottom: 0; }
.mr-permission-groups label strong, .mr-permission-groups label small { display: block; }
.mr-permission-groups label strong { font-size: .67rem; }
.mr-permission-groups label small { margin-top: .08rem; color: var(--users-muted); font-size: .56rem; }
.mr-permission-groups input { width: 2rem; height: 1.05rem; }
.mr-permission-groups input::before { width: .75rem; height: .75rem; }
.mr-permission-groups input:checked::before { transform: translateX(.95rem); }

.mr-users-empty { display: flex; align-items: center; flex-direction: column; gap: .2rem; padding: 2.2rem; color: var(--users-muted); text-align: center; }
.mr-users-empty strong { color: var(--users-ink); font-size: .82rem; }
.mr-users-empty span { font-size: .7rem; }

@media (max-width: 991.98px) {
    .mr-users-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-user-row { grid-template-columns: auto minmax(180px, 1fr) minmax(100px, .7fr) 75px 120px; }
    .mr-user-login { display: none; }
}

@media (max-width: 767.98px) {
    .mr-users-hero-main { flex-direction: column; gap: 1.1rem; padding: 1.35rem; }
    .mr-users-hero-main > a { width: 100%; }
    .mr-users-hero-status { align-items: flex-start; flex-direction: column; gap: .4rem; padding: .8rem 1.35rem; }
    .mr-user-editor-grid, .mr-permission-groups { grid-template-columns: 1fr; }
    .mr-users-toolbar { align-items: stretch; flex-wrap: wrap; }
    .mr-users-search { flex-basis: 100%; }
    .mr-users-toolbar select { flex: 1 1 150px; }
    .mr-user-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .mr-user-role, .mr-user-login { display: none; }
    .mr-user-state { justify-self: end; }
    .mr-user-actions { grid-column: 2 / 4; justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .mr-users-metrics { gap: .55rem; }
    .mr-users-metrics article { gap: .45rem; padding: .7rem; }
    .mr-users-metric-icon { width: 2.15rem; height: 2.15rem; transform: scale(.84); transform-origin: left center; }
    .mr-users-metrics strong { font-size: 1.05rem; }
    .mr-user-pin-pair { grid-template-columns: 1fr; gap: 0; }
    .mr-user-editor form > footer, .mr-role-editor form > footer { align-items: stretch; flex-direction: column-reverse; text-align: center; }
}

/* Gestion de la caisse --------------------------------------------------- */

.mr-cash-page {
    --cash-ink: #172033;
    --cash-muted: #667085;
    --cash-line: #e4e8ee;
    --cash-soft: #f8fafc;
    color: var(--cash-ink);
}

.mr-cash-hero {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 87% 0%, rgba(34, 197, 94, .2), transparent 29%),
        radial-gradient(circle at 66% 130%, rgba(245, 158, 11, .15), transparent 34%),
        linear-gradient(135deg, #111827, #1e293b);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.mr-cash-page.is-closed .mr-cash-hero {
    background:
        radial-gradient(circle at 87% 0%, rgba(148, 163, 184, .18), transparent 29%),
        radial-gradient(circle at 66% 130%, rgba(245, 158, 11, .12), transparent 34%),
        linear-gradient(135deg, #111827, #1e293b);
}

.mr-cash-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2rem 1.6rem;
}

.mr-cash-kicker {
    display: block;
    margin-bottom: .35rem;
    color: #fbbf24;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.mr-cash-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.55rem);
    font-weight: 770;
    letter-spacing: -.04em;
}

.mr-cash-hero p {
    max-width: 600px;
    margin: .5rem 0 0;
    color: #cbd5e1;
}

.mr-cash-hero-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.mr-cash-hero-actions > a {
    padding: .58rem .8rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .58rem;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.mr-cash-hero-actions > a:hover { background: rgba(255, 255, 255, .09); }

.mr-cash-session-state {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .42rem .65rem;
    color: #bbf7d0;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .2);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-cash-session-state i {
    width: .5rem;
    height: .5rem;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.mr-cash-page.is-closed .mr-cash-session-state {
    color: #cbd5e1;
    background: rgba(148, 163, 184, .1);
    border-color: rgba(148, 163, 184, .2);
}

.mr-cash-page.is-closed .mr-cash-session-state i {
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.mr-cash-hero-session {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(2, 6, 23, .23);
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.mr-cash-hero-session > span {
    padding: .8rem 1.35rem;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.mr-cash-hero-session > span:last-child { border-right: 0; }
.mr-cash-hero-session small, .mr-cash-hero-session strong { display: block; }
.mr-cash-hero-session small { color: #94a3b8; font-size: .61rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.mr-cash-hero-session strong { overflow: hidden; margin-top: .18rem; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }

.mr-cash-hero-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .82rem 2rem;
    color: #cbd5e1;
    background: rgba(2, 6, 23, .23);
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .75rem;
}

.mr-cash-hero-note i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    color: #0f172a;
    background: #fbbf24;
    border-radius: 50%;
    font-size: .65rem;
    font-style: normal;
    font-weight: 800;
}

.mr-cash-opening-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 1rem;
    max-width: 960px;
    margin: 1.25rem auto 2rem;
}

.mr-cash-opening-card,
.mr-cash-opening-guide,
.mr-cash-access-message {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--cash-line);
    border-radius: 1rem;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .05);
}

.mr-cash-opening-card > header,
.mr-cash-operation-card > header {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.mr-cash-opening-card h2,
.mr-cash-opening-guide h2,
.mr-cash-operation-card h2,
.mr-cash-section-heading h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 780;
    letter-spacing: -.015em;
}

.mr-cash-opening-card .mr-cash-kicker,
.mr-cash-opening-guide .mr-cash-kicker,
.mr-cash-operation-card .mr-cash-kicker,
.mr-cash-section-heading .mr-cash-kicker { color: #b45309; }

.mr-cash-opening-icon,
.mr-cash-operation-icon {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    background: #fef3c7;
    border-radius: .7rem;
}

.mr-cash-opening-icon::before {
    position: absolute;
    top: .6rem;
    left: .65rem;
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid #b45309;
    border-radius: .25rem;
    content: '';
}

.mr-cash-opening-icon::after {
    position: absolute;
    top: 1.18rem;
    left: .95rem;
    width: .7rem;
    border-top: 2px solid #b45309;
    content: '';
}

.mr-cash-opening-card > label,
.mr-cash-operation-card > label,
.mr-cash-form-grid label {
    display: block;
    margin: .85rem 0 .3rem;
    color: #475569;
    font-size: .7rem;
    font-weight: 750;
}

.mr-cash-opening-card label span,
.mr-cash-operation-card label span { color: var(--cash-muted); font-weight: 500; }
.mr-cash-opening-card > small { display: block; margin-top: .3rem; color: var(--cash-muted); font-size: .65rem; }
.mr-cash-opening-card > button { width: 100%; margin-top: 1.15rem; }

.mr-cash-amount-input { position: relative; }
.mr-cash-amount-input input { padding-right: 3rem; }
.mr-cash-amount-input > span {
    position: absolute;
    top: 50%;
    right: .8rem;
    color: #64748b;
    font-size: .69rem;
    font-weight: 800;
    transform: translateY(-50%);
}

.mr-cash-opening-guide {
    color: #fff;
    background: linear-gradient(150deg, #172033, #263349);
    border-color: #263349;
}

.mr-cash-opening-guide h2 { font-size: 1.2rem; }
.mr-cash-opening-guide ol { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.mr-cash-opening-guide li { display: flex; align-items: flex-start; gap: .7rem; }
.mr-cash-opening-guide li > span { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; color: #fbbf24; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .18); border-radius: 50%; font-size: .68rem; font-weight: 800; }
.mr-cash-opening-guide li strong, .mr-cash-opening-guide li small { display: block; }
.mr-cash-opening-guide li strong { font-size: .76rem; }
.mr-cash-opening-guide li small { margin-top: .15rem; color: #94a3b8; font-size: .67rem; line-height: 1.4; }

.mr-cash-access-message { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 300px; color: var(--cash-muted); text-align: center; }
.mr-cash-access-message strong { color: var(--cash-ink); }
.mr-cash-access-message span { margin-top: .25rem; font-size: .78rem; }

.mr-cash-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin: 1rem 0;
}

.mr-cash-metric {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--cash-line);
    border-radius: .85rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.mr-cash-metric-icon,
.mr-cash-payment-icon {
    position: relative;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    background: #dcfce7;
    border-radius: .68rem;
}

.mr-cash-metric-icon::before {
    position: absolute;
    top: .68rem;
    left: .62rem;
    width: 1.3rem;
    height: 1.18rem;
    border: 2px solid #15803d;
    border-radius: .22rem;
    content: '';
}

.mr-cash-metric-icon::after {
    position: absolute;
    top: 1.12rem;
    left: 1.08rem;
    width: .38rem;
    height: .38rem;
    border: 2px solid #15803d;
    border-radius: 50%;
    content: '';
}

.mr-cash-metric.is-card .mr-cash-metric-icon { background: #dbeafe; }
.mr-cash-metric.is-card .mr-cash-metric-icon::before { height: .9rem; border-color: #1d4ed8; }
.mr-cash-metric.is-card .mr-cash-metric-icon::after { top: 1rem; left: .62rem; width: 1.3rem; height: .18rem; background: #1d4ed8; border: 0; border-radius: 0; }
.mr-cash-metric.is-orders .mr-cash-metric-icon { background: #fef3c7; }
.mr-cash-metric.is-orders .mr-cash-metric-icon::before, .mr-cash-metric.is-orders .mr-cash-metric-icon::after { border-color: #b45309; }
.mr-cash-metric.is-orders .mr-cash-metric-icon::after { top: .95rem; left: .92rem; width: .65rem; height: .5rem; border: 0; border-top: 2px solid #b45309; border-bottom: 2px solid #b45309; border-radius: 0; }

.mr-cash-metric > div { min-width: 0; }
.mr-cash-metric strong, .mr-cash-metric > div > span { display: block; }
.mr-cash-metric strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.mr-cash-metric > div > span { overflow: hidden; margin-top: .2rem; color: var(--cash-muted); font-size: .7rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.mr-cash-session-info {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.mr-cash-session-info span { padding: .4rem .62rem; color: #64748b; background: #e9eef5; border-radius: 999px; font-size: .67rem; }
.mr-cash-session-info strong { color: #334155; }

.mr-cash-operations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.mr-cash-operations.is-single { grid-template-columns: minmax(0, 620px); }

.mr-cash-operation-card {
    padding: 1.1rem;
    background: #fff;
    border: 1px solid var(--cash-line);
    border-radius: .9rem;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
}

.mr-cash-operation-card.is-closing { background: linear-gradient(180deg, #fff 0%, #fffbeb 100%); border-color: #fde68a; }
.mr-cash-operation-icon.is-movement::before, .mr-cash-operation-icon.is-movement::after { position: absolute; top: .75rem; width: .65rem; height: .65rem; border-top: 2px solid #b45309; border-right: 2px solid #b45309; content: ''; }
.mr-cash-operation-icon.is-movement::before { left: .5rem; transform: rotate(45deg); }
.mr-cash-operation-icon.is-movement::after { right: .5rem; transform: rotate(-135deg); }
.mr-cash-operation-icon.is-close::before { position: absolute; top: .58rem; left: .58rem; width: 1.42rem; height: 1.42rem; border: 2px solid #b45309; border-radius: 50%; content: ''; }
.mr-cash-operation-icon.is-close::after { position: absolute; top: 1.26rem; left: .98rem; width: .65rem; border-top: 2px solid #b45309; content: ''; }

.mr-cash-form-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: .7rem; }
.mr-cash-form-grid label { margin-top: 0; }
.mr-cash-operation-card > p { margin: -.25rem 0 .75rem; color: var(--cash-muted); font-size: .7rem; }
.mr-cash-operation-card > button { width: 100%; margin-top: 1rem; }

.mr-cash-live-gap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    padding: .5rem .65rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: .5rem;
    font-size: .69rem;
}

.mr-cash-live-gap.is-ok { color: #166534; background: #dcfce7; }
.mr-cash-live-gap.is-negative { color: #991b1b; background: #fee2e2; }
.mr-cash-live-gap.is-positive { color: #92400e; background: #fef3c7; }

.mr-cash-section { margin-bottom: 2rem; }
.mr-cash-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.mr-cash-section-heading > span { color: var(--cash-muted); font-size: .69rem; }

.mr-cash-payments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .7rem;
}

.mr-cash-payments article {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem;
    background: #fff;
    border: 1px solid var(--cash-line);
    border-radius: .75rem;
}

.mr-cash-payment-icon { width: 2.25rem; height: 2.25rem; background: #eef2f6; }
.mr-cash-payment-icon::before { position: absolute; top: .6rem; left: .53rem; width: 1.2rem; height: .85rem; border: 2px solid #64748b; border-radius: .18rem; content: ''; }
.mr-cash-payment-icon.is-especes { background: #dcfce7; }
.mr-cash-payment-icon.is-especes::before { border-color: #15803d; }
.mr-cash-payment-icon.is-carte { background: #dbeafe; }
.mr-cash-payment-icon.is-carte::before { border-color: #1d4ed8; }
.mr-cash-payments article > div { min-width: 0; }
.mr-cash-payments strong, .mr-cash-payments small { display: block; }
.mr-cash-payments strong { font-size: .75rem; }
.mr-cash-payments small { margin-top: .1rem; color: var(--cash-muted); font-size: .64rem; }
.mr-cash-payments b { margin-left: auto; font-size: .8rem; white-space: nowrap; }

.mr-cash-movements,
.mr-cash-history-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cash-line);
    border-radius: .85rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.mr-cash-movements article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 55px 105px;
    align-items: center;
    gap: .7rem;
    padding: .68rem .85rem;
    border-bottom: 1px solid #edf0f4;
}

.mr-cash-movements article:last-child { border-bottom: 0; }
.mr-cash-movement-sign { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; color: #166534; background: #dcfce7; border-radius: 50%; font-weight: 800; }
.mr-cash-movement-sign.is-out { color: #991b1b; background: #fee2e2; }
.mr-cash-movements article > div { min-width: 0; }
.mr-cash-movements strong, .mr-cash-movements small { display: block; }
.mr-cash-movements strong { font-size: .73rem; }
.mr-cash-movements small { overflow: hidden; margin-top: .1rem; color: var(--cash-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.mr-cash-movements article > span:not(.mr-cash-movement-sign) { color: var(--cash-muted); font-size: .67rem; }
.mr-cash-movements b { font-size: .73rem; text-align: right; white-space: nowrap; }
.mr-cash-movements b.is-in { color: #15803d; }
.mr-cash-movements b.is-out { color: #dc2626; }

.mr-cash-history-card table { min-width: 760px; font-size: .75rem; }
.mr-cash-history-card thead th { padding: .7rem .85rem; color: #64748b; background: #f8fafc; border-bottom: 1px solid var(--cash-line); font-size: .62rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.mr-cash-history-card tbody td { padding: .72rem .85rem; border-color: #edf0f4; }
.mr-cash-history-card tbody td:first-child strong, .mr-cash-history-card tbody td:first-child small { display: block; }
.mr-cash-history-card tbody td:first-child small { margin-top: .1rem; color: var(--cash-muted); font-size: .61rem; }
.mr-cash-history-card a { color: #b45309; font-size: .67rem; font-weight: 750; text-decoration: none; }
.mr-cash-gap { display: inline-flex; padding: .27rem .5rem; border-radius: 999px; font-size: .65rem; font-weight: 750; }
.mr-cash-gap.is-ok { color: #166534; background: #dcfce7; }
.mr-cash-gap.is-negative { color: #991b1b; background: #fee2e2; }
.mr-cash-gap.is-positive { color: #92400e; background: #fef3c7; }

@media (max-width: 991.98px) {
    .mr-cash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-cash-operations { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .mr-cash-hero-main { flex-direction: column; gap: 1.1rem; padding: 1.35rem; }
    .mr-cash-hero-actions { width: 100%; justify-content: space-between; }
    .mr-cash-hero-session { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-cash-hero-session > span:nth-child(2) { border-right: 0; }
    .mr-cash-hero-session > span:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .mr-cash-hero-note { padding: .8rem 1.35rem; }
    .mr-cash-opening-layout { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .mr-cash-metrics { gap: .55rem; }
    .mr-cash-metric { gap: .5rem; padding: .72rem; }
    .mr-cash-metric-icon { width: 2.2rem; height: 2.2rem; transform: scale(.84); transform-origin: left center; }
    .mr-cash-metric strong { font-size: 1.02rem; }
    .mr-cash-form-grid { grid-template-columns: 1fr; }
    .mr-cash-movements article { grid-template-columns: auto minmax(0, 1fr) 90px; }
    .mr-cash-movements article > span:not(.mr-cash-movement-sign) { display: none; }
}

/* Centre d'impression ---------------------------------------------------- */

.mr-print-page {
    --print-ink: #172033;
    --print-muted: #667085;
    --print-line: #e4e8ee;
    --print-soft: #f8fafc;
    color: var(--print-ink);
}

.mr-print-hero {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 86% 0%, rgba(56, 189, 248, .19), transparent 29%),
        radial-gradient(circle at 68% 120%, rgba(245, 158, 11, .15), transparent 32%),
        linear-gradient(135deg, #111827, #1e293b);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.mr-print-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2rem 1.65rem;
}

.mr-print-kicker {
    display: block;
    margin-bottom: .35rem;
    color: #fbbf24;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.mr-print-hero h1 {
    margin: 0;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 760;
    letter-spacing: -.04em;
}

.mr-print-hero p {
    max-width: 620px;
    margin: .55rem 0 0;
    color: #cbd5e1;
}

.mr-print-dispatch {
    min-height: 46px;
    white-space: nowrap;
}

.mr-print-hero-status {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .85rem 2rem;
    color: #cbd5e1;
    background: rgba(2, 6, 23, .24);
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .76rem;
}

.mr-print-hero-status span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.mr-print-hero-status span:first-child {
    color: #fff;
    font-weight: 700;
}

.mr-print-hero-status i,
.mr-print-device-status i,
.mr-print-job-status i {
    display: inline-block;
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    background: #22c55e;
    border-radius: 50%;
}

.mr-print-hero-status i.is-live {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.mr-print-hero-status i.is-alert {
    background: #f87171;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, .12);
}

.mr-print-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin: 1rem 0 2rem;
}

.mr-print-metric {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--print-line);
    border-radius: .85rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.mr-print-metric-icon {
    position: relative;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    background: #e0f2fe;
    border-radius: .7rem;
}

.mr-print-metric-icon::before,
.mr-print-metric-icon::after {
    position: absolute;
    content: '';
}

.mr-print-metric-icon.is-printer::before {
    top: .85rem;
    left: .63rem;
    width: 1.4rem;
    height: .85rem;
    border: 2px solid #0369a1;
    border-radius: .2rem;
}

.mr-print-metric-icon.is-printer::after {
    top: .42rem;
    left: .83rem;
    width: 1rem;
    height: 1.75rem;
    border: 2px solid #0369a1;
    border-radius: .1rem;
}

.mr-print-metric-icon.is-online::before {
    top: .65rem;
    left: .65rem;
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid #0369a1;
    border-radius: 50%;
}

.mr-print-metric-icon.is-online::after {
    top: .98rem;
    left: 1.02rem;
    width: .65rem;
    height: .35rem;
    border-bottom: 2px solid #0369a1;
    border-left: 2px solid #0369a1;
    transform: rotate(-45deg);
}

.mr-print-metric-icon.is-queue::before {
    top: .68rem;
    left: .72rem;
    width: 1.2rem;
    height: 1.35rem;
    border: 2px solid #0369a1;
    border-radius: .15rem;
}

.mr-print-metric-icon.is-queue::after {
    top: 1rem;
    left: 1rem;
    width: .65rem;
    height: .5rem;
    border-top: 2px solid #0369a1;
    border-bottom: 2px solid #0369a1;
}

.mr-print-metric-icon.is-error::before {
    top: .58rem;
    left: 1.2rem;
    width: .25rem;
    height: 1.1rem;
    background: #0369a1;
    border-radius: 999px;
}

.mr-print-metric-icon.is-error::after {
    bottom: .55rem;
    left: 1.2rem;
    width: .25rem;
    height: .25rem;
    background: #0369a1;
    border-radius: 50%;
}

.mr-print-metric.has-warning .mr-print-metric-icon {
    background: #fef3c7;
}

.mr-print-metric.has-warning .mr-print-metric-icon::before,
.mr-print-metric.has-warning .mr-print-metric-icon::after {
    border-color: #b45309;
}

.mr-print-metric.has-danger .mr-print-metric-icon {
    background: #fee2e2;
}

.mr-print-metric.has-danger .mr-print-metric-icon::before,
.mr-print-metric.has-danger .mr-print-metric-icon::after {
    color: #b91c1c;
    background-color: #b91c1c;
    border-color: #b91c1c;
}

.mr-print-metric > div,
.mr-print-metric strong,
.mr-print-metric span {
    min-width: 0;
}

.mr-print-metric strong,
.mr-print-metric > div > span {
    display: block;
}

.mr-print-metric strong {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.mr-print-metric > div > span {
    overflow: hidden;
    margin-top: .2rem;
    color: var(--print-muted);
    font-size: .72rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-print-section {
    margin-bottom: 2rem;
}

.mr-print-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

.mr-print-section-heading .mr-print-kicker,
.mr-print-config .mr-print-kicker {
    color: #b45309;
}

.mr-print-section-heading h2,
.mr-print-config h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 780;
    letter-spacing: -.015em;
}

.mr-print-section-heading > span {
    color: var(--print-muted);
    font-size: .72rem;
}

.mr-print-printers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .85rem;
}

.mr-print-printer {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--print-line);
    border-top: 3px solid #f59e0b;
    border-radius: .9rem;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
}

.mr-print-printer.is-online { border-top-color: #22c55e; }
.mr-print-printer.is-offline { border-top-color: #ef4444; }
.mr-print-printer.is-inactive { border-top-color: #94a3b8; opacity: .82; }

.mr-print-printer > header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem;
}

.mr-print-printer > header > div {
    min-width: 0;
}

.mr-print-printer > header h3 {
    overflow: hidden;
    margin: 0;
    font-size: .92rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-print-printer > header > div > span {
    display: block;
    margin-top: .15rem;
    color: var(--print-muted);
    font-size: .7rem;
}

.mr-print-printer-icon {
    position: relative;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    background: #f1f5f9;
    border-radius: .65rem;
}

.mr-print-printer-icon::before,
.mr-print-printer-icon::after {
    position: absolute;
    left: .55rem;
    width: 1.35rem;
    content: '';
    border: 2px solid #475569;
}

.mr-print-printer-icon::before {
    top: .78rem;
    height: .85rem;
    border-radius: .2rem;
}

.mr-print-printer-icon::after {
    top: .38rem;
    left: .75rem;
    width: .95rem;
    height: 1.65rem;
    border-radius: .1rem;
}

.mr-print-device-status {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    margin-left: auto;
    padding: .28rem .5rem;
    color: #166534;
    background: #dcfce7;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-print-printer.is-offline .mr-print-device-status {
    color: #991b1b;
    background: #fee2e2;
}

.mr-print-printer.is-offline .mr-print-device-status i { background: #ef4444; }
.mr-print-printer.is-unknown .mr-print-device-status { color: #92400e; background: #fef3c7; }
.mr-print-printer.is-unknown .mr-print-device-status i { background: #f59e0b; }
.mr-print-printer.is-inactive .mr-print-device-status { color: #475569; background: #e2e8f0; }
.mr-print-printer.is-inactive .mr-print-device-status i { background: #94a3b8; }

.mr-print-printer-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 1rem;
    overflow: hidden;
    background: var(--print-line);
    border: 1px solid var(--print-line);
    border-radius: .65rem;
}

.mr-print-printer-details > span {
    min-width: 0;
    padding: .65rem .7rem;
    background: var(--print-soft);
}

.mr-print-printer-details small,
.mr-print-printer-details strong {
    display: block;
}

.mr-print-printer-details small {
    color: var(--print-muted);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mr-print-printer-details strong {
    overflow: hidden;
    margin-top: .16rem;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-print-fallback,
.mr-print-device-error {
    margin: .75rem 1rem 0;
    font-size: .7rem;
}

.mr-print-fallback {
    color: var(--print-muted);
}

.mr-print-device-error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    padding: .5rem .6rem;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: .5rem;
}

.mr-print-device-error span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: #fff;
    background: #ef4444;
    border-radius: 50%;
    font-size: .62rem;
    font-weight: 800;
}

.mr-print-printer > footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: .9rem;
    padding: .7rem 1rem;
    background: #fbfcfe;
    border-top: 1px solid var(--print-line);
}

.mr-print-printer > footer form { margin: 0; }

.mr-print-printer > footer a,
.mr-print-printer > footer button {
    padding: 0;
    color: #475569;
    background: none;
    border: 0;
    font-size: .7rem;
    font-weight: 750;
    text-decoration: none;
}

.mr-print-printer > footer a:hover,
.mr-print-printer > footer button:hover {
    color: #b45309;
}

.mr-print-config {
    overflow: hidden;
    margin-bottom: 2rem;
    background: #fff;
    border: 1px solid #d9dee7;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.mr-print-config > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fbfcfe;
    border-bottom: 1px solid var(--print-line);
}

.mr-print-config > header > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #64748b;
    background: #eef2f6;
    border-radius: 50%;
    font-size: 1.2rem;
    text-decoration: none;
}

.mr-print-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.15rem;
}

.mr-print-config fieldset {
    min-width: 0;
    padding: 1rem;
    background: var(--print-soft);
    border: 1px solid var(--print-line);
    border-radius: .75rem;
}

.mr-print-config legend {
    float: none;
    width: auto;
    margin: 0 0 .85rem;
    padding: 0;
    font-size: .78rem;
    font-weight: 800;
}

.mr-print-config fieldset > label:not(.mr-print-switch),
.mr-print-config-pair label {
    display: block;
    margin: .75rem 0 .3rem;
    color: #475569;
    font-size: .69rem;
    font-weight: 750;
}

.mr-print-config fieldset > label:first-of-type {
    margin-top: 0;
}

.mr-print-config fieldset > small {
    display: block;
    margin-top: .35rem;
    color: var(--print-muted);
    font-size: .65rem;
}

.mr-print-config-pair {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(105px, 1fr);
    gap: .7rem;
}

.mr-print-field-error {
    margin: .25rem 0 0;
    color: #dc2626;
    font-size: .67rem;
}

.mr-print-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--print-line);
    cursor: pointer;
}

.mr-print-switch:last-child { border-bottom: 0; }
.mr-print-switch span, .mr-print-switch strong, .mr-print-switch small { display: block; }
.mr-print-switch strong { font-size: .76rem; }
.mr-print-switch small { margin-top: .15rem; color: var(--print-muted); font-size: .64rem; }

.mr-print-switch input {
    width: 2.35rem;
    height: 1.25rem;
    flex: 0 0 auto;
    appearance: none;
    background: #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease;
}

.mr-print-switch input::before {
    display: block;
    width: .95rem;
    height: .95rem;
    margin: .15rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
    content: '';
    transition: transform .15s ease;
}

.mr-print-switch input:checked { background: #22c55e; }
.mr-print-switch input:checked::before { transform: translateX(1.1rem); }

.mr-print-config form > footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    padding: .85rem 1.15rem;
    background: #fbfcfe;
    border-top: 1px solid var(--print-line);
}

.mr-print-config form > footer > a {
    padding: .5rem .75rem;
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.mr-print-queue-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--print-line);
    border-radius: .9rem;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
}

.mr-print-queue table {
    min-width: 850px;
    font-size: .76rem;
}

.mr-print-queue thead th {
    padding: .7rem .85rem;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid var(--print-line);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mr-print-queue tbody td {
    padding: .72rem .85rem;
    border-color: #edf0f4;
}

.mr-print-queue tr.has-error td:first-child {
    border-left: 3px solid #ef4444;
}

.mr-print-job-document {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.mr-print-job-document > span {
    position: relative;
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    background: #eef2f6;
    border-radius: .45rem;
}

.mr-print-job-document > span::before {
    position: absolute;
    top: .38rem;
    left: .55rem;
    width: .72rem;
    height: 1rem;
    border: 1.5px solid #64748b;
    border-radius: .08rem;
    content: '';
}

.mr-print-job-document strong,
.mr-print-job-document small {
    display: block;
}

.mr-print-job-document strong,
.mr-print-job-printer { font-size: .75rem; }
.mr-print-job-document small { margin-top: .08rem; color: #b45309; font-size: .61rem; font-weight: 700; }

.mr-print-job-status {
    display: inline-flex;
    align-items: center;
    gap: .33rem;
    padding: .28rem .5rem;
    color: #475569;
    background: #eef2f6;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-print-job-status.is-success { color: #166534; background: #dcfce7; }
.mr-print-job-status.is-success i { background: #22c55e; }
.mr-print-job-status.is-danger { color: #991b1b; background: #fee2e2; }
.mr-print-job-status.is-danger i { background: #ef4444; }
.mr-print-job-status.is-progress { color: #1e40af; background: #dbeafe; }
.mr-print-job-status.is-progress i { background: #3b82f6; }
.mr-print-job-status.is-waiting { color: #92400e; background: #fef3c7; }
.mr-print-job-status.is-waiting i { background: #f59e0b; }

.mr-print-retry {
    padding: .32rem .58rem;
    color: #991b1b;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: .4rem;
    font-size: .65rem;
    font-weight: 750;
}

.mr-print-retry:hover { background: #fef2f2; }

.mr-print-job-error td {
    padding-top: 0 !important;
    color: #b91c1c;
    background: #fffafa;
    font-size: .67rem;
}

.mr-print-job-error span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .9rem;
    height: .9rem;
    margin-right: .35rem;
    color: #fff;
    background: #ef4444;
    border-radius: 50%;
    font-size: .55rem;
    font-weight: 800;
}

.mr-print-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 2.2rem;
    color: var(--print-muted);
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: .8rem;
    font-size: .76rem;
    text-align: center;
}

.mr-print-empty strong { color: var(--print-ink); font-size: .86rem; }
.mr-print-queue .mr-print-empty { border: 0; }

@media (max-width: 991.98px) {
    .mr-print-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-print-config-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .mr-print-hero-main {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.35rem;
    }

    .mr-print-hero-main form,
    .mr-print-dispatch { width: 100%; }

    .mr-print-hero-status {
        align-items: flex-start;
        flex-direction: column;
        gap: .45rem;
        padding: .8rem 1.35rem;
    }

    .mr-print-printers { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .mr-print-metrics { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .mr-print-metric { gap: .55rem; padding: .75rem; }
    .mr-print-metric-icon { width: 2.25rem; height: 2.25rem; transform: scale(.86); transform-origin: left center; }
    .mr-print-metric strong { font-size: 1.05rem; }
    .mr-print-config-grid { padding: .75rem; }
    .mr-print-config-pair { grid-template-columns: 1fr; gap: 0; }
    .mr-print-config form > footer { align-items: stretch; flex-direction: column-reverse; text-align: center; }
}

/* Gestion du stock ------------------------------------------------------- */

.mr-stock-page {
    --stock-ink: #172033;
    --stock-muted: #667085;
    --stock-line: #e4e8ee;
    color: var(--stock-ink);
}

.mr-stock-hero {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 86% 0%, rgba(34, 197, 94, .18), transparent 28%),
        radial-gradient(circle at 68% 120%, rgba(245, 158, 11, .15), transparent 32%),
        linear-gradient(135deg, #111827, #1e293b);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1.2rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
}

.mr-stock-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.7rem 1.8rem 1.5rem;
}

.mr-stock-kicker {
    display: block;
    margin-bottom: .35rem;
    color: #86efac;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mr-stock-hero h1 {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.mr-stock-hero p {
    max-width: 620px;
    margin: .45rem 0 0;
    color: #cbd5e1;
    font-size: .9rem;
}

.mr-stock-warehouse {
    min-width: 220px;
    padding: .7rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .75rem;
}

.mr-stock-warehouse label {
    display: block;
    margin-bottom: .3rem;
    color: #aeb8c8;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mr-stock-warehouse .form-select {
    color: #fff;
    background-color: rgba(15, 23, 42, .65);
    border-color: rgba(255, 255, 255, .14);
    border-radius: .55rem;
    font-size: .8rem;
    font-weight: 700;
}

.mr-stock-warehouse option {
    color: #111827;
    background: #fff;
}

.mr-stock-hero-footer {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    min-height: 50px;
    padding: .65rem 1.8rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, .04);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .68rem;
}

.mr-stock-hero-footer span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.mr-stock-hero-footer strong {
    color: #e2e8f0;
}

.mr-stock-hero-footer i.is-live {
    width: .45rem;
    height: .45rem;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .1);
}

.mr-stock-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
}

.mr-stock-metric {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--stock-line);
    border-radius: .85rem;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .045);
}

.mr-stock-metric-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 2.4rem;
    color: #475467;
    background: #f2f4f7;
    border-radius: .7rem;
}

.mr-stock-metric-icon::before {
    width: .9rem;
    height: .9rem;
    content: "";
    border: 2px solid currentColor;
    border-radius: .2rem;
}

.mr-stock-metric-icon.is-alert::before {
    border: 0;
    border-right: .5rem solid transparent;
    border-bottom: .9rem solid currentColor;
    border-left: .5rem solid transparent;
    border-radius: 0;
}

.mr-stock-metric-icon.is-empty::before {
    border-radius: 50%;
}

.mr-stock-metric-icon.is-value::before {
    width: 1rem;
    height: .72rem;
    border-radius: 999px;
}

.mr-stock-metric.has-warning .mr-stock-metric-icon {
    color: #b54708;
    background: #fff4d4;
}

.mr-stock-metric.has-danger .mr-stock-metric-icon {
    color: #d92d20;
    background: #fff0ef;
}

.mr-stock-metric > div {
    min-width: 0;
}

.mr-stock-metric strong,
.mr-stock-metric div > span {
    display: block;
}

.mr-stock-metric strong {
    overflow: hidden;
    color: #1d2939;
    font-size: 1.05rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-stock-metric div > span {
    margin-top: .1rem;
    color: #98a2b3;
    font-size: .66rem;
    font-weight: 650;
}

.mr-stock-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem;
    background: #fff;
    border: 1px solid var(--stock-line);
    border-radius: .85rem;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .035);
}

.mr-stock-search {
    position: relative;
    flex: 1;
}

.mr-stock-search > span {
    position: absolute;
    top: 50%;
    left: .85rem;
    z-index: 2;
    color: #98a2b3;
    font-size: 1.2rem;
    transform: translateY(-50%);
}

.mr-stock-search .form-control {
    padding-left: 2.4rem;
    border-color: #dfe4eb;
    border-radius: .6rem;
}

.mr-stock-search .form-control:focus {
    border-color: #22a55d;
    box-shadow: 0 0 0 .2rem rgba(34, 165, 93, .1);
}

.mr-stock-alert-filter {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 .25rem;
    color: #475467;
    font-size: .76rem;
    white-space: nowrap;
}

.mr-stock-alert-filter .form-check-input {
    margin: 0;
}

.mr-stock-list,
.mr-stock-history-card {
    overflow: hidden;
    border: 1px solid var(--stock-line);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.mr-stock-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border-bottom: 1px solid var(--stock-line);
}

.mr-stock-list-heading h2,
.mr-stock-history-heading h2 {
    margin: 0;
    color: #1d2939;
    font-size: 1rem;
    font-weight: 800;
}

.mr-stock-list-heading p {
    margin: .18rem 0 0;
    color: #98a2b3;
    font-size: .68rem;
}

.mr-stock-list-heading > a {
    color: #b54708;
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;
}

.mr-stock-table,
.mr-stock-history-table {
    min-width: 820px;
    font-size: .8rem;
}

.mr-stock-table thead th,
.mr-stock-history-table thead th {
    padding: .75rem .9rem;
    color: #667085;
    background: #f8fafc;
    border-bottom-color: #e6eaf0;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mr-stock-table tbody td,
.mr-stock-history-table tbody td {
    padding: .82rem .9rem;
    color: #475467;
    border-bottom-color: #edf0f4;
}

.mr-stock-table tbody tr:last-child td,
.mr-stock-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.mr-stock-table tbody tr.is-out > td:first-child {
    box-shadow: inset 3px 0 #f04438;
}

.mr-stock-table tbody tr.is-low > td:first-child {
    box-shadow: inset 3px 0 #f59e0b;
}

.mr-stock-item-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 190px;
}

.mr-stock-item-icon {
    position: relative;
    width: 2.05rem;
    height: 2.05rem;
    flex: 0 0 2.05rem;
    background: #eff8f2;
    border: 1px solid #cfe9d8;
    border-radius: .58rem;
}

.mr-stock-item-icon::before,
.mr-stock-item-icon::after {
    position: absolute;
    content: "";
    background: #238756;
}

.mr-stock-item-icon::before {
    top: .58rem;
    left: .55rem;
    width: .85rem;
    height: .85rem;
    border-radius: .18rem;
}

.mr-stock-item-icon::after {
    top: .4rem;
    left: .78rem;
    width: .4rem;
    height: .2rem;
    border-radius: .2rem .2rem 0 0;
}

.mr-stock-item-cell strong,
.mr-stock-item-cell small {
    display: block;
}

.mr-stock-item-cell strong {
    color: #1d2939;
    font-size: .8rem;
    font-weight: 750;
}

.mr-stock-item-cell small {
    margin-top: .1rem;
    color: #98a2b3;
    font-size: .62rem;
}

.mr-stock-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .5rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-stock-status i {
    width: .38rem;
    height: .38rem;
    background: currentColor;
    border-radius: 50%;
}

.mr-stock-status.is-success {
    color: #087443;
    background: #ecfdf3;
}

.mr-stock-status.is-warning {
    color: #b54708;
    background: #fff4d4;
}

.mr-stock-status.is-danger {
    color: #b42318;
    background: #fff0ef;
}

.mr-stock-movement {
    position: relative;
}

.mr-stock-movement > summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #344054;
    background: #fff;
    border: 1px solid #dfe4eb;
    border-radius: .5rem;
    font-size: .68rem;
    font-weight: 700;
    list-style: none;
}

.mr-stock-movement > summary::-webkit-details-marker {
    display: none;
}

.mr-stock-movement[open] > summary {
    color: #087443;
    background: #effaf3;
    border-color: #a8d8ba;
}

.mr-stock-movement[open] > summary span {
    transform: rotate(45deg);
}

.mr-stock-movement-panel {
    min-width: 680px;
    margin-top: .55rem;
    padding: .75rem;
    background: #f8fafc;
    border: 1px solid #dde3ea;
    border-radius: .7rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.mr-stock-action-form {
    display: grid;
    grid-template-columns: 80px repeat(3, minmax(100px, 1fr)) auto;
    align-items: center;
    gap: .45rem;
    padding: .55rem 0;
    border-bottom: 1px solid #e8ebf0;
}

.mr-stock-action-form:first-child {
    padding-top: 0;
}

.mr-stock-action-form:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.mr-stock-action-form strong {
    color: #475467;
    font-size: .66rem;
}

.mr-stock-action-form .form-control,
.mr-stock-action-form .form-select,
.mr-stock-action-form .btn {
    min-height: 36px;
    border-radius: .5rem;
    font-size: .7rem;
}

.mr-stock-action-form.is-exit {
    grid-template-columns: minmax(100px, .8fr) minmax(100px, .7fr) minmax(150px, 1.2fr) auto;
}

.mr-stock-action-form.is-transfer {
    grid-template-columns: 80px minmax(150px, 1fr) minmax(100px, .7fr) auto;
}

.mr-stock-history {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mr-stock-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    padding: 0 .1rem;
}

.mr-stock-history-heading .mr-stock-kicker {
    margin-bottom: .18rem;
    color: #238756;
}

.mr-stock-history-heading > span {
    color: #98a2b3;
    font-size: .67rem;
}

.mr-movement-type {
    display: inline-flex;
    padding: .25rem .45rem;
    color: #667085;
    background: #f2f4f7;
    border-radius: .4rem;
    font-size: .63rem;
    font-weight: 750;
}

.mr-movement-type.is-in {
    color: #087443;
    background: #ecfdf3;
}

.mr-movement-type.is-out {
    color: #175cd3;
    background: #eff8ff;
}

.mr-movement-type.is-loss {
    color: #b42318;
    background: #fff0ef;
}

.mr-movement-type.is-adjust {
    color: #b54708;
    background: #fff4d4;
}

.mr-movement-type.is-transfer {
    color: #6941c6;
    background: #f4f3ff;
}

@media (max-width: 991.98px) {
    .mr-stock-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mr-stock-hero-footer {
        overflow-x: auto;
    }

    .mr-stock-hero-footer span {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .mr-stock-hero-main {
        flex-direction: column;
        padding: 1.35rem 1.2rem;
    }

    .mr-stock-warehouse {
        width: 100%;
    }

    .mr-stock-hero-footer {
        padding-right: 1.2rem;
        padding-left: 1.2rem;
    }

    .mr-stock-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .mr-stock-alert-filter {
        min-height: 38px;
    }

    .mr-stock-movement-panel {
        min-width: 560px;
    }
}

@media (max-width: 480px) {
    .mr-stock-metrics {
        grid-template-columns: 1fr;
    }

    .mr-stock-metric {
        padding: .75rem .85rem;
    }
}

/* Fiches techniques ------------------------------------------------------ */

.mr-recipe-page {
    color: #182230;
}

.mr-recipe-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.mr-recipe-sidebar,
.mr-recipe-workspace {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
}

.mr-recipe-sidebar {
    position: sticky;
    top: 1rem;
}

.mr-recipe-search {
    position: relative;
    padding: .75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e8ebf0;
}

.mr-recipe-search span {
    position: absolute;
    top: 50%;
    left: 1.55rem;
    color: #98a2b3;
    font-size: 1.2rem;
    transform: translateY(-50%);
}

.mr-recipe-search input {
    width: 100%;
    min-height: 42px;
    padding: .55rem .7rem .55rem 2.3rem;
    background: #fff;
    border: 1px solid #dfe4eb;
    border-radius: .65rem;
    outline: 0;
    font-size: .82rem;
}

.mr-recipe-search input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .11);
}

.mr-recipe-product-list {
    max-height: calc(100vh - 305px);
    overflow-y: auto;
    padding: .45rem;
    scrollbar-width: thin;
}

.mr-recipe-product {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem;
    color: #344054;
    border: 1px solid transparent;
    border-radius: .65rem;
    text-decoration: none;
}

.mr-recipe-product:hover {
    color: #182230;
    background: #f8fafc;
}

.mr-recipe-product.active {
    color: #182230;
    background: #fff8e7;
    border-color: #f2d68c;
}

.mr-recipe-product-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    background: linear-gradient(145deg, #f8fafc, #e9edf3);
    border: 1px solid #dde2e9;
    border-radius: .55rem;
}

.mr-recipe-product.active .mr-recipe-product-icon {
    background: linear-gradient(145deg, #fff6dc, #f9dda0);
    border-color: #edc45d;
}

.mr-recipe-product-info {
    min-width: 0;
    flex: 1;
}

.mr-recipe-product-info strong,
.mr-recipe-product-info small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-recipe-product-info strong {
    font-size: .78rem;
    font-weight: 750;
}

.mr-recipe-product-info small {
    margin-top: .12rem;
    color: #98a2b3;
    font-size: .63rem;
}

.mr-recipe-product-state {
    width: .48rem;
    height: .48rem;
    flex: 0 0 .48rem;
    background: #d0d5dd;
    border-radius: 50%;
}

.mr-recipe-product-state.is-ready {
    background: #12b76a;
    box-shadow: 0 0 0 3px #ecfdf3;
}

.mr-recipe-welcome {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 540px;
    padding: 2rem;
    color: #667085;
    text-align: center;
}

.mr-recipe-welcome > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    color: #b45309;
    background: #fff5d8;
    border-radius: 1.2rem;
    font-size: 1.7rem;
    font-weight: 800;
}

.mr-recipe-welcome h2 {
    margin: 0;
    color: #344054;
    font-size: 1.05rem;
    font-weight: 800;
}

.mr-recipe-welcome p {
    max-width: 390px;
    margin: .4rem 0 0;
    font-size: .8rem;
}

.mr-recipe-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e6eaf0;
}

.mr-recipe-heading .mr-catalog-kicker {
    margin-bottom: .22rem;
    color: #b45309;
}

.mr-recipe-heading h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.mr-recipe-heading p {
    margin: .2rem 0 0;
    color: #667085;
    font-size: .72rem;
}

.mr-recipe-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #e6eaf0;
}

.mr-recipe-metrics > div {
    padding: .8rem 1rem;
    border-right: 1px solid #e6eaf0;
}

.mr-recipe-metrics > div:last-child {
    border-right: 0;
}

.mr-recipe-metrics span,
.mr-recipe-metrics strong {
    display: block;
}

.mr-recipe-metrics span {
    color: #98a2b3;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.mr-recipe-metrics strong {
    margin-top: .2rem;
    color: #1d2939;
    font-size: .95rem;
    font-weight: 850;
}

.mr-recipe-form-section {
    padding: 1.2rem 1.3rem;
    border-bottom: 1px solid #e8ebf0;
}

.mr-recipe-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.mr-recipe-section-title > div {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.mr-recipe-section-title > div > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    color: #92400e;
    background: #fff4d4;
    border-radius: .45rem;
    font-size: .62rem;
    font-weight: 850;
}

.mr-recipe-section-title h3 {
    margin: 0;
    font-size: .9rem;
    font-weight: 800;
}

.mr-recipe-section-title p {
    margin: 0;
    color: #98a2b3;
    font-size: .68rem;
}

.mr-recipe-yield {
    display: grid;
    grid-template-columns: minmax(150px, 240px);
    gap: .3rem;
}

.mr-recipe-yield label {
    color: #475467;
    font-size: .72rem;
    font-weight: 700;
}

.mr-recipe-page .form-control,
.mr-recipe-page .form-select {
    border-color: #dfe4eb;
    border-radius: .6rem;
    font-size: .8rem;
}

.mr-recipe-page .form-control:focus,
.mr-recipe-page .form-select:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .11);
}

.mr-recipe-items-head,
.mr-recipe-item {
    display: grid;
    grid-template-columns: minmax(190px, 2fr) minmax(120px, .8fr) minmax(95px, .6fr) minmax(75px, .55fr) 34px;
    gap: .55rem;
}

.mr-recipe-items-head {
    padding: 0 .25rem .4rem;
    color: #98a2b3;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.mr-recipe-item {
    position: relative;
    align-items: center;
    margin-bottom: .55rem;
    padding: .65rem;
    background: #f9fafb;
    border: 1px solid #e8ebf0;
    border-radius: .7rem;
}

.mr-recipe-quantity,
.mr-recipe-waste {
    position: relative;
}

.mr-recipe-quantity input,
.mr-recipe-waste input {
    padding-right: 2.2rem;
}

.mr-recipe-quantity > span,
.mr-recipe-waste > span {
    position: absolute;
    top: 50%;
    right: .65rem;
    color: #98a2b3;
    font-size: .65rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.mr-recipe-item output {
    color: #344054;
    font-size: .75rem;
    font-weight: 800;
    text-align: right;
}

.mr-recipe-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #b42318;
    background: #fff1f0;
    border: 0;
    border-radius: .5rem;
    font-size: 1rem;
}

.mr-recipe-optional {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: -.15rem;
    color: #667085;
    font-size: .66rem;
}

.mr-recipe-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.3rem;
    background: #f8fafc;
}

.mr-recipe-savebar span,
.mr-recipe-savebar strong {
    display: block;
}

.mr-recipe-savebar span {
    color: #667085;
    font-size: .67rem;
}

.mr-recipe-savebar strong {
    margin-top: .15rem;
    color: #182230;
    font-size: 1.05rem;
    font-weight: 850;
}

.mr-recipe-readonly {
    padding: 1.2rem;
}

.mr-recipe-notes {
    margin-top: 1rem;
    padding: .8rem;
    color: #475467;
    background: #fff9e8;
    border-left: 3px solid #fbbf24;
    border-radius: .5rem;
    font-size: .78rem;
}

.mr-recipe-notes p {
    margin: .3rem 0 0;
}

@media (max-width: 991.98px) {
    .mr-recipe-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .mr-recipe-items-head {
        display: none;
    }

    .mr-recipe-item {
        grid-template-columns: 1fr 1fr 34px;
    }

    .mr-recipe-item > div:first-child {
        grid-column: 1 / -1;
    }

    .mr-recipe-item output {
        grid-column: 1 / 3;
        text-align: left;
    }

    .mr-recipe-remove {
        grid-column: 3;
        grid-row: 2;
    }

    .mr-recipe-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .mr-recipe-layout {
        grid-template-columns: 1fr;
    }

    .mr-recipe-sidebar {
        position: static;
    }

    .mr-recipe-product-list {
        display: flex;
        overflow-x: auto;
        max-height: none;
    }

    .mr-recipe-product {
        min-width: 190px;
    }

    .mr-recipe-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .mr-recipe-savebar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Bons de production ----------------------------------------------------- */

.mr-kds-page {
    --kds-ink: #182230;
    --kds-muted: #667085;
    --kds-line: #e4e8ee;
    color: var(--kds-ink);
}

.mr-kds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
    padding: 1rem 1.2rem;
    color: #fff;
    background:
        radial-gradient(circle at 84% -20%, rgba(245, 158, 11, .3), transparent 32%),
        linear-gradient(135deg, #101827, #1d2939);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1rem;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
}

.mr-kds-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.mr-kds-station-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    flex: 0 0 2.85rem;
    color: #111827;
    background: #fbbf24;
    border-radius: .85rem;
    box-shadow: 0 8px 22px rgba(245, 158, 11, .22);
}

.mr-kds-station-icon::before {
    width: 1.35rem;
    height: .7rem;
    content: "";
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 .75rem .75rem;
}

.mr-kds-station-icon::after {
    position: absolute;
    bottom: .67rem;
    width: 1.7rem;
    height: 2px;
    content: "";
    background: currentColor;
    border-radius: 2px;
}

.mr-kds-station-icon i {
    position: absolute;
    top: .72rem;
    width: 2px;
    height: .65rem;
    background: currentColor;
    border-radius: 2px;
    box-shadow: -.42rem .16rem 0 currentColor, .42rem .16rem 0 currentColor;
}

.mr-kds-kicker {
    display: block;
    margin-bottom: .12rem;
    color: #fbbf24;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.mr-kds-header h1 {
    overflow: hidden;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-kds-header p {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .2rem 0 0;
    color: #aeb8c8;
    font-size: .7rem;
}

.mr-kds-live-dot {
    width: .45rem;
    height: .45rem;
    background: #39d98a;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(57, 217, 138, .12);
}

.mr-kds-live-dot.is-offline {
    background: #f97066;
    box-shadow: 0 0 0 4px rgba(249, 112, 102, .12);
}

.mr-kds-header-tools {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.mr-kds-clock {
    min-width: 4.25rem;
    color: #fff;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: center;
}

.mr-kds-sound {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .65rem;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .6rem;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}

.mr-kds-sound .form-check-input {
    margin: 0;
}

.mr-kds-fullscreen {
    color: #e2e8f0;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .6rem;
    font-size: .72rem;
    font-weight: 700;
}

.mr-kds-fullscreen:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .18);
}

.mr-kds-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem;
    background: #fff;
    border: 1px solid var(--kds-line);
    border-radius: .9rem;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .045);
}

.mr-kds-zones {
    display: flex;
    overflow-x: auto;
    gap: .35rem;
    min-width: 0;
    scrollbar-width: thin;
}

.mr-kds-zones a {
    flex: 0 0 auto;
    padding: .52rem .8rem;
    color: #667085;
    border: 1px solid transparent;
    border-radius: .6rem;
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
}

.mr-kds-zones a:hover {
    color: #1d2939;
    background: #f8fafc;
}

.mr-kds-zones a.active {
    color: #111827;
    background: #fff4d4;
    border-color: #f3d37e;
}

.mr-kds-summary {
    display: flex;
    flex: 0 0 auto;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: .7rem;
}

.mr-kds-summary > div {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 .3rem;
    min-width: 72px;
    padding: .38rem .55rem;
    border-right: 1px solid #e6eaf0;
}

.mr-kds-summary > div:last-child {
    border-right: 0;
}

.mr-kds-summary i {
    grid-row: 1 / span 2;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
}

.mr-kds-summary i.is-new { background: #2e90fa; }
.mr-kds-summary i.is-accepted { background: #f59e0b; }
.mr-kds-summary i.is-progress { background: #8b5cf6; }
.mr-kds-summary i.is-ready { background: #12b76a; }

.mr-kds-summary strong {
    color: #1d2939;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1;
}

.mr-kds-summary span {
    color: #98a2b3;
    font-size: .56rem;
    font-weight: 650;
    white-space: nowrap;
}

.mr-kds-summary-total {
    background: #1f2937;
}

.mr-kds-summary .mr-kds-summary-total strong,
.mr-kds-summary .mr-kds-summary-total span {
    color: #fff;
}

.mr-bons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    align-items: start;
    gap: .85rem;
}

.mr-bon {
    --bon-color: #2e90fa;
    --bon-soft: #eff8ff;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--kds-line);
    border-top: 4px solid var(--bon-color);
    border-radius: .9rem;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .065);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mr-bon-acceptee {
    --bon-color: #f59e0b;
    --bon-soft: #fff8e7;
}

.mr-bon-en_preparation {
    --bon-color: #8b5cf6;
    --bon-soft: #f5f3ff;
}

.mr-bon-prete {
    --bon-color: #12b76a;
    --bon-soft: #ecfdf3;
}

.mr-bon-retard {
    --bon-color: #f04438;
    --bon-soft: #fff1f0;
    border-color: #f5b7b2;
    box-shadow: 0 8px 28px rgba(240, 68, 56, .14);
}

.mr-bon-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .85rem;
    background: var(--bon-soft);
    border-bottom: 1px solid color-mix(in srgb, var(--bon-color) 22%, white);
}

.mr-bon-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bon-color);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.mr-bon-status::before {
    width: .45rem;
    height: .45rem;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

.mr-bon-number {
    color: #667085;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.mr-bon .card-body {
    padding: .9rem;
}

.mr-bon-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
}

.mr-bon-heading {
    min-width: 0;
}

.mr-bon-destination {
    display: block;
    overflow: hidden;
    color: #182230;
    font-size: 1.15rem;
    font-weight: 850;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-bon-meta {
    display: block;
    overflow: hidden;
    margin-top: .12rem;
    color: #98a2b3;
    font-size: .68rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-kds-chrono {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    padding: .34rem .5rem;
    color: #475467;
    background: #f5f7fa;
    border: 1px solid #e6eaf0;
    border-radius: .55rem;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.mr-kds-chrono i {
    position: relative;
    width: .66rem;
    height: .66rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.mr-kds-chrono i::after {
    position: absolute;
    top: .12rem;
    left: .27rem;
    width: 1px;
    height: .22rem;
    content: "";
    background: currentColor;
    transform-origin: bottom;
    transform: rotate(-25deg);
}

.mr-kds-chrono.is-late {
    color: #d92d20;
    background: #fff0ef;
    border-color: #f5b7b2;
}

.mr-bon-alert {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0 0 .55rem;
    padding: .48rem .6rem;
    color: #b42318;
    background: #fff0ef;
    border: 1px solid #f8c5c1;
    border-radius: .55rem;
    font-size: .68rem;
    font-weight: 750;
}

.mr-bon-alert > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: #fff;
    background: #f04438;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 900;
}

.mr-bon-allergy {
    color: #8c2f24;
    background: #fff8e7;
    border-color: #f5d78c;
}

.mr-bon-allergy > span {
    color: #b54708;
    background: transparent;
    font-size: .8rem;
}

.mr-bon-articles li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .62rem 0;
    border-bottom: 1px dashed #e1e6ed;
}

.mr-bon-articles li:last-child {
    border-bottom: 0;
}

.mr-bon-quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.65rem;
    padding: .15rem .35rem;
    color: #111827;
    background: #f2f4f7;
    border-radius: .45rem;
    font-size: .76rem;
    font-weight: 850;
}

.mr-bon-item {
    min-width: 0;
    color: #344054;
    font-size: .85rem;
    line-height: 1.3;
}

.mr-bon-item > strong {
    font-weight: 750;
}

.mr-bon-note {
    display: block;
    margin-top: .25rem;
    padding-left: .45rem;
    color: #9a5b05;
    border-left: 2px solid #fbbf24;
    font-size: .7rem;
    font-weight: 650;
}

.mr-bon-action {
    padding-top: .75rem;
    border-top: 1px solid #edf0f4;
}

.mr-bon-action .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 43px;
    padding: .6rem .75rem;
    color: #fff;
    background: var(--bon-color);
    border-color: var(--bon-color);
    border-radius: .6rem;
    font-size: .78rem;
    font-weight: 800;
}

.mr-bon-action .btn:hover,
.mr-bon-action .btn:focus {
    color: #fff;
    background: color-mix(in srgb, var(--bon-color) 88%, black);
    border-color: color-mix(in srgb, var(--bon-color) 88%, black);
}

.mr-bon-action .btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    background: rgba(255, 255, 255, .18);
    border-radius: .38rem;
    font-style: normal;
}

.mr-bon-action .btn:disabled {
    color: #98a2b3;
    background: #eaecf0;
    border-color: #eaecf0;
}

.mr-ligne-envoyee {
    opacity: .7;
}

.mr-kds-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 410px;
    padding: 3rem 1rem;
    color: #667085;
    background: #fff;
    border: 1px dashed #cfd6df;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .04);
}

.mr-kds-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    color: #087443;
    background: #dcfae6;
    border: 8px solid #ecfdf3;
    border-radius: 50%;
    font-size: 1.35rem;
    font-weight: 900;
}

.mr-kds-empty h2 {
    margin: 0;
    color: #344054;
    font-size: 1.05rem;
    font-weight: 800;
}

.mr-kds-empty p {
    margin: .35rem 0 0;
    font-size: .82rem;
}

.mr-kds-empty small {
    margin-top: .25rem;
    color: #98a2b3;
    font-size: .7rem;
}

@media (max-width: 991.98px) {
    .mr-kds-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .mr-kds-summary {
        align-self: stretch;
        overflow-x: auto;
    }

    .mr-kds-summary > div {
        flex: 1 0 72px;
    }
}

@media (max-width: 767.98px) {
    .mr-kds-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mr-kds-header-tools {
        width: 100%;
    }

    .mr-kds-clock {
        margin-right: auto;
        text-align: left;
    }

    .mr-bons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .mr-kds-fullscreen {
        padding-right: .55rem;
        padding-left: .55rem;
        font-size: 0;
    }

    .mr-kds-fullscreen span {
        font-size: 1rem;
    }

    .mr-kds-sound {
        padding-right: .5rem;
        padding-left: .5rem;
    }
}

:fullscreen body {
    background: #eef2f6;
}

:fullscreen .mr-navbar,
:fullscreen footer {
    display: none;
}

:fullscreen main.container-xl {
    max-width: none;
    padding: .75rem !important;
}

/* Divers ----------------------------------------------------------------- */

.mr-pin {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: .5em;
}

.mr-pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
}

.mr-pin-key {
    padding: .75rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #212529;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    transition: background-color .12s ease, transform .05s ease;
}

.mr-pin-key:hover {
    background: #e9ecef;
}

.mr-pin-key:active {
    transform: scale(.96);
    background: #dee2e6;
}

.mr-pin-key-muted {
    font-size: .85rem;
    color: #6c757d;
}

.mr-point-couleur {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Cibles tactiles : les postes de service travaillent au doigt. */
@media (pointer: coarse) {
    .btn, .form-control, .form-select {
        min-height: 44px;
    }
}

/* Graphiques du tableau de bord ------------------------------------------- */

.mr-dashboard-chart-svg {
    padding: .25rem .25rem 0;
}

.mr-dashboard-chart-svg svg {
    display: block;
}

/* La cible de survol dépasse la marque : viser au doigt reste facile. */
.mr-dashboard-chart-svg rect[fill="transparent"]:hover {
    fill: rgba(42, 120, 214, .06);
}

/* Plan de salle : disposition par glisser-déposer -------------------------- */

.mr-plan-canvas {
    position: relative;
    height: 460px;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    background-color: #fff;
    /* Trame discrète : elle aide à aligner sans concurrencer les tables. */
    background-image:
        linear-gradient(#f1f3f5 1px, transparent 1px),
        linear-gradient(90deg, #f1f3f5 1px, transparent 1px);
    background-size: 40px 40px;
    overflow: hidden;
    touch-action: none;
}

.mr-plan-table {
    position: absolute;
    width: 74px;
    height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    padding: 0;
    border: 2px solid #2a78d6;
    border-radius: .5rem;
    background: #eaf2fd;
    color: #0b0b0b;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.mr-plan-table strong { font-size: 1rem; line-height: 1; }
.mr-plan-table small { font-size: .7rem; color: #52514e; }

.mr-plan-table.is-ronde { border-radius: 50%; }
.mr-plan-table.is-rectangle { width: 110px; height: 62px; }

.mr-plan-table.is-inactive {
    border-color: #adb5bd;
    background: #f8f9fa;
    opacity: .65;
}

.mr-plan-table:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

.mr-plan-table.is-dragging {
    cursor: grabbing;
    box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .18);
    z-index: 5;
}

/* Plan de salle au POS : disposition réelle quand elle a été enregistrée ---- */

.mr-tables.is-plan {
    position: relative;
    display: block;
    min-height: 470px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    background-color: #fff;
    background-image:
        linear-gradient(#f1f3f5 1px, transparent 1px),
        linear-gradient(90deg, #f1f3f5 1px, transparent 1px);
    background-size: 40px 40px;
}

.mr-tables.is-plan .mr-table {
    position: absolute;
    width: 156px;
    margin: 0;
}

@media (max-width: 720px) {
    /* Sur téléphone, la grille reste plus lisible qu'un plan miniature. */
    .mr-tables.is-plan {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: .75rem;
        min-height: 0;
        border: 0;
        background: none;
        padding: 0;
    }

    .mr-tables.is-plan .mr-table {
        position: static;
        width: auto;
    }
}

/* ==========================================================================
   Paramètres — Salles et tables
   Le balisage existait sans feuille de style : les libellés touchaient leurs
   valeurs, et un bouton désactivé paraissait actif.
   ========================================================================== */

.mr-btn-primary:disabled,
.mr-btn-primary[disabled] {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #868e96;
    box-shadow: none;
    cursor: not-allowed;
}

.mr-settings-kicker {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #868e96;
    margin-bottom: .15rem;
}

.mr-settings-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.mr-settings-hero h1 { margin: 0; font-size: 1.85rem; font-weight: 700; }
.mr-settings-hero p { margin: .3rem 0 0; color: #52514e; max-width: 46rem; }

.mr-settings-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.mr-settings-secondary {
    display: inline-flex;
    align-items: center;
    padding: .65rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: .65rem;
    background: #fff;
    color: #343a40;
    font-weight: 600;
    text-decoration: none;
}

.mr-settings-secondary:hover { background: #f8f9fa; color: #111827; }

/* Compteurs : chaque article empile son libellé, sa valeur et sa précision. */
.mr-settings-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin: 1.5rem 0;
}

.mr-settings-metrics article {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .75rem;
}

.mr-settings-metrics article > span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #868e96;
}

.mr-settings-metrics article > strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.mr-settings-metrics article > small { font-size: .78rem; color: #52514e; }
.mr-settings-metrics article.is-busy > strong { color: #d03b3b; }

/* Éditeurs : salle, table, série ------------------------------------------ */

.mr-settings-editor {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.mr-settings-editor > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mr-settings-editor h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }

.mr-settings-editor > header > a {
    font-size: 1.4rem;
    line-height: 1;
    color: #868e96;
    text-decoration: none;
}

.mr-settings-editor > header > a:hover { color: #212529; }

.mr-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.mr-settings-form-grid label { display: flex; flex-direction: column; gap: .35rem; }

.mr-settings-form-grid label > span {
    font-size: .85rem;
    font-weight: 600;
    color: #343a40;
}

.mr-settings-switch {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .85rem;
    border: 1px solid #dee2e6;
    border-radius: .65rem;
    background: #f8f9fa;
}

.mr-settings-switch > span { display: flex; flex-direction: column; }
.mr-settings-switch strong { font-size: .9rem; }
.mr-settings-switch small { color: #52514e; font-size: .78rem; }
.mr-settings-switch input { width: 1.15rem; height: 1.15rem; accent-color: #f59e0b; }

.mr-settings-editor form > footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
}

.mr-settings-editor form > footer > a { color: #52514e; text-decoration: none; font-weight: 600; }

.mr-settings-error { display: block; margin-top: .25rem; color: #d03b3b; font-size: .8rem; }

/* Sections de liste -------------------------------------------------------- */

.mr-settings-section { margin: 2rem 0; }

.mr-settings-section > header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.mr-settings-section h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }

.mr-settings-list-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mr-settings-list-actions > a { color: #2a78d6; font-weight: 600; text-decoration: none; }

.mr-settings-empty {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 2rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: .75rem;
    color: #52514e;
}

.mr-settings-state {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #52514e;
    white-space: nowrap;
}

.mr-settings-state i {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #0ca30c;
}

.is-inactive .mr-settings-state i { background: #adb5bd; }

/* Cartes de salle ---------------------------------------------------------- */

.mr-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;
}

.mr-room-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
}

.mr-room-card.is-selected { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .18); }
.mr-room-card.is-inactive { opacity: .7; }

.mr-room-card > header { display: flex; align-items: center; gap: .65rem; }
.mr-room-card h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.mr-room-card header small { color: #868e96; font-size: .78rem; }
.mr-room-card header > div { flex: 1 1 auto; min-width: 0; }

.mr-room-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .55rem;
    background: #fff4e0;
    color: #b45309;
}

.mr-room-stats { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .82rem; color: #52514e; }
.mr-room-stats strong { color: #111827; }

.mr-room-card > footer { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; }
.mr-room-card > footer a { font-size: .85rem; font-weight: 600; color: #52514e; text-decoration: none; }
.mr-room-card > footer a:hover { color: #111827; }
.mr-room-card > footer a.is-primary { color: #b45309; }

/* Liste des tables --------------------------------------------------------- */

.mr-table-settings-list { display: flex; flex-direction: column; gap: .5rem; }

.mr-table-settings-list article {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .7rem;
}

.mr-table-settings-list article.is-inactive { opacity: .65; }
.mr-table-settings-list article > div { display: flex; flex-direction: column; }
.mr-table-settings-list small { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #868e96; }
.mr-table-settings-list a { font-size: .85rem; font-weight: 600; color: #2a78d6; text-decoration: none; }

.mr-table-settings-name { flex: 1 1 10rem; }
.mr-table-settings-name span { font-size: .8rem; color: #868e96; }

.mr-table-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    font-weight: 700;
    background: #eaf2fd;
    border: 2px solid #2a78d6;
    border-radius: .45rem;
}

.mr-table-shape.is-ronde { border-radius: 50%; }
.mr-table-shape.is-rectangle { width: 3.4rem; height: 2.2rem; }

.mr-table-settings-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; }
.mr-table-settings-status i { width: .5rem; height: .5rem; border-radius: 50%; background: #0ca30c; }
.mr-table-settings-status.is-occupee i { background: #f59e0b; }
.mr-table-settings-status.is-reservee i { background: #6610f2; }
.mr-table-settings-status.is-a_nettoyer i { background: #868e96; }

/* ==========================================================================
   Module commercial — achats, fournisseurs, factures
   Même vocabulaire visuel que le stock : un bandeau, des compteurs, des
   éditeurs repliés, et des listes qui restent lisibles à 1280 px comme à
   375 px. Les montants sont alignés à droite pour se comparer d'un coup d'oeil.
   ========================================================================== */

.mr-buy-page { display: flex; flex-direction: column; gap: 1.5rem; }

.mr-buy-hero {
    padding: 1.4rem 1.5rem;
    background: linear-gradient(135deg, #1f2937 0%, #263445 100%);
    border-radius: 1rem;
    color: #f8f9fa;
}

.mr-buy-hero-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mr-buy-kicker {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: .2rem;
}

.mr-buy-kicker a { color: inherit; text-decoration: none; }
.mr-buy-kicker a:hover { text-decoration: underline; }

.mr-buy-hero h1 { margin: 0; font-size: 1.8rem; font-weight: 700; }
.mr-buy-hero-main p { margin: .35rem 0 0; color: #ced4da; max-width: 44rem; }

.mr-buy-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mr-buy-hero-actions form { margin: 0; }

.mr-buy-secondary {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: .65rem;
    color: #f8f9fa;
    font-weight: 600;
    text-decoration: none;
}

.mr-buy-secondary:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.mr-buy-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}

.mr-buy-metrics article {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .75rem;
}

.mr-buy-metrics article > span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #adb5bd;
}

.mr-buy-metrics article > strong { font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.mr-buy-metrics article > small { font-size: .76rem; color: #ced4da; }
.mr-buy-metrics article.is-due > strong { color: #fbbf24; }
.mr-buy-metrics article.is-late > strong { color: #f87171; }

/* Sections et filtres ------------------------------------------------------ */

.mr-buy-section > header,
.mr-buy-side > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.mr-buy-section h2, .mr-buy-side h2, .mr-buy-editor h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.mr-buy-side > header > a { font-size: .85rem; font-weight: 600; color: #2a78d6; text-decoration: none; }

.mr-buy-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.mr-buy-filters .form-select { width: auto; min-width: 12rem; }

.mr-buy-chip {
    padding: .35rem .8rem;
    border: 1px solid #dee2e6;
    border-radius: 2rem;
    background: #fff;
    color: #52514e;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.mr-buy-chip:hover { background: #f8f9fa; color: #212529; }
.mr-buy-chip.is-active { background: #1f2937; border-color: #1f2937; color: #fff; }

.mr-buy-empty {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 2rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: .75rem;
    color: #52514e;
}

.mr-buy-note {
    padding: .75rem 1rem;
    background: #fff8e6;
    border-left: 3px solid #f59e0b;
    border-radius: .5rem;
    margin: 0;
}

.mr-buy-hint { font-size: .82rem; color: #52514e; }

/* Tableaux ----------------------------------------------------------------- */

.mr-buy-table { background: #fff; border-radius: .75rem; overflow: hidden; margin: 0; }

.mr-buy-table thead th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #868e96;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.mr-buy-table tbody th { font-weight: 600; }
.mr-buy-table tbody th small,
.mr-buy-table td small { display: block; font-size: .76rem; color: #868e96; font-weight: 400; }
.mr-buy-table tbody tr.is-complete { color: #868e96; }
.mr-buy-table tbody tr.is-late { background: #fff5f5; }
.mr-buy-table a { color: #2a78d6; font-weight: 600; text-decoration: none; }

.mr-buy-late { color: #d03b3b; font-weight: 600; }

.mr-buy-progress {
    display: block;
    width: 5rem;
    height: .4rem;
    background: #e9ecef;
    border-radius: 1rem;
    overflow: hidden;
}

.mr-buy-progress > i { display: block; height: 100%; background: #2a78d6; }

.mr-buy-state {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 2rem;
    font-size: .76rem;
    font-weight: 700;
    background: #e9ecef;
    color: #495057;
    white-space: nowrap;
}

.mr-buy-state.is-brouillon { background: #e9ecef; color: #495057; }
.mr-buy-state.is-envoyee { background: #e3f0ff; color: #1b5fae; }
.mr-buy-state.is-partiellement_recue,
.mr-buy-state.is-partiellement_payee { background: #fff1d6; color: #9a6400; }
.mr-buy-state.is-recue, .mr-buy-state.is-payee { background: #e2f6e2; color: #1c7a1c; }
.mr-buy-state.is-annulee, .mr-buy-state.is-impayee { background: #fde7e7; color: #a62828; }

/* Éditeurs ----------------------------------------------------------------- */

.mr-buy-editor {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.mr-buy-editor > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mr-buy-editor > header p { margin: .25rem 0 0; color: #52514e; font-size: .88rem; }
.mr-buy-editor > header > a { font-size: 1.4rem; line-height: 1; color: #868e96; text-decoration: none; }
.mr-buy-editor > header > a:hover { color: #212529; }

.mr-buy-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.mr-buy-form-grid label { display: flex; flex-direction: column; gap: .35rem; }
.mr-buy-form-grid label > span { font-size: .85rem; font-weight: 600; color: #343a40; }
.mr-buy-form-grid label > span small { font-weight: 400; color: #868e96; }
.mr-buy-wide { grid-column: 1 / -1; }

.mr-buy-switch {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .85rem;
    border: 1px solid #dee2e6;
    border-radius: .65rem;
    background: #f8f9fa;
}

.mr-buy-switch > span { display: flex; flex-direction: column; }
.mr-buy-switch strong { font-size: .9rem; }
.mr-buy-switch small { color: #52514e; font-size: .78rem; }
.mr-buy-switch input { width: 1.15rem; height: 1.15rem; accent-color: #f59e0b; }

.mr-buy-editor form > footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
}

.mr-buy-editor form > footer > .mr-buy-hint { margin-right: auto; }
.mr-buy-editor form > footer > a { color: #52514e; text-decoration: none; font-weight: 600; }

/* Lignes d'articles -------------------------------------------------------- */

.mr-buy-lines { margin-top: 1.25rem; }

.mr-buy-lines-head,
.mr-buy-line {
    display: grid;
    grid-template-columns: minmax(10rem, 3fr) 1fr 1fr .7fr 2.2rem;
    gap: .5rem;
    align-items: center;
}

.mr-buy-lines-head {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #868e96;
    padding: 0 .1rem .35rem;
}

.mr-buy-line { margin-bottom: .5rem; }

.mr-buy-line-remove {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    color: #868e96;
    font-size: 1.1rem;
    line-height: 1;
}

.mr-buy-line-remove:hover { background: #fde7e7; border-color: #f0b4b4; color: #a62828; }

.mr-buy-lines-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .5rem;
    border-top: 1px solid #e9ecef;
}

.mr-buy-lines-total { font-size: .9rem; color: #52514e; }
.mr-buy-lines-total strong { font-size: 1.15rem; color: #111827; margin-left: .35rem; }

.mr-buy-add {
    padding: .5rem .9rem;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    background: #fff;
    color: #343a40;
    font-weight: 600;
}

.mr-buy-add:hover { background: #f8f9fa; }

.mr-buy-inline-line {
    display: grid;
    grid-template-columns: minmax(10rem, 3fr) 1fr 1fr .7fr auto;
    gap: .5rem;
    align-items: center;
    margin-top: .85rem;
    padding: .85rem;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: .7rem;
}

.mr-buy-receipt .form-control { min-width: 6.5rem; }

/* Colonnes latérales et flux ------------------------------------------------ */

.mr-buy-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }

.mr-buy-side {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
}

.mr-buy-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

.mr-buy-feed li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #f1f3f5;
}

.mr-buy-feed li:last-child { border-bottom: 0; padding-bottom: 0; }
.mr-buy-feed li > span:nth-child(2) { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mr-buy-feed small { font-size: .76rem; color: #868e96; }
.mr-buy-feed-amount { margin-left: auto; white-space: nowrap; }

.mr-buy-feed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #e2f6e2;
    color: #1c7a1c;
    font-weight: 700;
}

.mr-buy-feed-icon.is-due { background: #fde7e7; color: #a62828; }

/* Fournisseurs -------------------------------------------------------------- */

.mr-buy-supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.mr-buy-supplier {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
}

.mr-buy-supplier.is-inactive { opacity: .7; }
.mr-buy-supplier > header { display: flex; align-items: center; gap: .65rem; }
.mr-buy-supplier h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.mr-buy-supplier header small { color: #868e96; font-size: .78rem; }
.mr-buy-supplier header > div { flex: 1 1 auto; min-width: 0; }

.mr-buy-supplier-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .55rem;
    background: #eaf2fd;
    color: #1b5fae;
    font-weight: 700;
}

.mr-buy-supplier-state { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: #52514e; }
.mr-buy-supplier-state i { width: .5rem; height: .5rem; border-radius: 50%; background: #0ca30c; }
.is-inactive .mr-buy-supplier-state i { background: #adb5bd; }

.mr-buy-supplier-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; }
.mr-buy-supplier-facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #868e96; font-weight: 700; }
.mr-buy-supplier-facts dd { margin: 0; font-size: .9rem; font-weight: 600; }

.mr-buy-supplier > footer { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: auto; }
.mr-buy-supplier > footer a { font-size: .85rem; font-weight: 600; color: #52514e; text-decoration: none; }
.mr-buy-supplier > footer a:hover { color: #111827; }
.mr-buy-supplier > footer form { margin: 0; }
.mr-buy-supplier > footer button { border: 0; background: none; padding: 0; font-size: .85rem; font-weight: 600; color: #a62828; }

/* Règlement en ligne -------------------------------------------------------- */

.mr-buy-pay { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.mr-buy-pay .form-control, .mr-buy-pay .form-select { width: auto; min-width: 5.5rem; font-size: .85rem; }

.mr-buy-pay button {
    padding: .35rem .8rem;
    border: 0;
    border-radius: .5rem;
    background: #1f2937;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}

.mr-buy-pay button:hover { background: #111827; }

.mr-buy-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    background: #fff5f5;
    border: 1px solid #f5d5d5;
    border-radius: .85rem;
}

.mr-buy-danger .form-control { flex: 1 1 14rem; }

.mr-buy-danger button {
    padding: .55rem 1rem;
    border: 1px solid #e0a3a3;
    border-radius: .6rem;
    background: #fff;
    color: #a62828;
    font-weight: 600;
}

.mr-buy-danger button:hover { background: #a62828; border-color: #a62828; color: #fff; }

@media (max-width: 991.98px) {
    .mr-buy-columns { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .mr-buy-lines-head { display: none; }

    .mr-buy-line,
    .mr-buy-inline-line {
        grid-template-columns: 1fr 1fr;
        padding: .75rem;
        background: #f8f9fa;
        border-radius: .6rem;
    }

    .mr-buy-line > select,
    .mr-buy-inline-line > select { grid-column: 1 / -1; }
    .mr-buy-line-remove { justify-self: end; }
    .mr-buy-supplier-facts { grid-template-columns: 1fr; }
    .mr-buy-pay { flex-direction: column; align-items: stretch; }
    .mr-buy-pay .form-control, .mr-buy-pay .form-select { width: 100%; }
}

/* ==========================================================================
   Fiches techniques — conversion d'unités, dérive de coût, historique
   Le coût figé dans une fiche vieillit à chaque réception d'achat : l'écran
   doit le dire, pas le cacher. D'où la bannière, la pastille de dérive dans
   la liste, et le bloc d'écart dans les compteurs.
   ========================================================================== */

/* Bannière de dérive ------------------------------------------------------- */

.mr-recipe-drift-banner {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.2rem;
    background: #fffaf0;
    border: 1px solid #f5dfae;
    border-radius: .85rem;
}

.mr-recipe-drift-banner > div:first-of-type { flex: 1 1 auto; min-width: 0; }
.mr-recipe-drift-banner strong { display: block; color: #8a5a00; }
.mr-recipe-drift-banner p { margin: .2rem 0 0; color: #6b5526; font-size: .85rem; max-width: 52rem; }

.mr-recipe-drift-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #f7e3b8;
    color: #8a5a00;
    font-size: 1.1rem;
    font-weight: 700;
}

.mr-recipe-drift-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.mr-recipe-drift-actions form { margin: 0; }
.mr-recipe-drift-actions > a { color: #8a5a00; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mr-recipe-drift-actions > a:hover { text-decoration: underline; }

.mr-recipe-drift-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .7rem 1.3rem;
    background: #fffaf0;
    border-bottom: 1px solid #e6eaf0;
    font-size: .85rem;
    color: #6b5526;
}

.mr-recipe-drift-inline > span { flex: 1 1 18rem; }

.mr-recipe-drift-inline button {
    padding: .4rem .9rem;
    border: 1px solid #e0c58a;
    border-radius: .55rem;
    background: #fff;
    color: #8a5a00;
    font-size: .82rem;
    font-weight: 700;
}

.mr-recipe-drift-inline button:hover { background: #8a5a00; border-color: #8a5a00; color: #fff; }

/* Filtres de la liste ------------------------------------------------------ */

.mr-recipe-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .6rem;
}

.mr-recipe-filters a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border: 1px solid #e4e7ec;
    border-radius: 2rem;
    color: #475467;
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
}

.mr-recipe-filters a:hover { background: #f9fafb; color: #1d2939; }
.mr-recipe-filters a.is-active { background: #1d2939; border-color: #1d2939; color: #fff; }

.mr-recipe-filters em {
    font-style: normal;
    font-weight: 800;
    font-size: .68rem;
    opacity: .7;
}

.mr-recipe-product-margin {
    flex: 0 0 auto;
    color: #12b76a;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.mr-recipe-product-margin.is-thin { color: #b54708; }

.mr-recipe-product-state.is-drift {
    background: #f79009;
    box-shadow: 0 0 0 3px #fffaeb;
}

/* Compteurs : nuances de marge et d'écart ---------------------------------- */

.mr-recipe-metrics small {
    display: block;
    margin-top: .15rem;
    color: #98a2b3;
    font-size: .66rem;
}

.mr-recipe-metrics > div.is-thin strong { color: #b54708; }
.mr-recipe-metrics > div.is-drift { background: #fffaf0; }
.mr-recipe-metrics > div.is-drift strong { color: #b54708; }

/* Ligne de composition : unité de saisie et conversion --------------------- */

.mr-recipe-items-head,
.mr-recipe-item {
    grid-template-columns: minmax(190px, 2fr) minmax(150px, 1fr) minmax(95px, .6fr) minmax(75px, .55fr) 72px;
}

.mr-recipe-quantity {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* L'unité n'est plus une étiquette collée dans le champ mais un choix :
   on saisit 150 g d'une farine stockée au kilo sans convertir de tête. */
.mr-recipe-quantity input[data-quantity] {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: .6rem;
}

.mr-recipe-unit {
    flex: 0 0 auto;
    width: auto;
    min-width: 4.2rem;
    padding: .3rem 1.6rem .3rem .5rem;
    font-size: .78rem;
    font-weight: 600;
}

.mr-recipe-unit:disabled { background-color: #f2f4f7; color: #667085; }

.mr-recipe-conversion {
    grid-column: 1 / -1;
    margin: .35rem 0 0;
    color: #667085;
    font-size: .72rem;
}

.mr-recipe-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.mr-recipe-usage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #475467;
    background: #eef2f6;
    border: 0;
    border-radius: .5rem;
    font-size: .9rem;
}

.mr-recipe-usage:hover { background: #dde3ea; color: #1d2939; }

.mr-recipe-usage-list { list-style: none; margin: 0; padding: 0; }

.mr-recipe-usage-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid #f2f4f7;
}

.mr-recipe-usage-list li:last-child { border-bottom: 0; }
.mr-recipe-usage-list a { color: #2a78d6; font-weight: 600; text-decoration: none; }
.mr-recipe-usage-list span { color: #667085; font-size: .82rem; white-space: nowrap; }

.mr-recipe-unit-hint {
    margin: 1rem 0 0;
    color: #667085;
    font-size: .78rem;
}

/* Barre d'enregistrement : coût et marge côte à côte ------------------------ */

.mr-recipe-savebar-margin { text-align: right; }
.mr-recipe-savebar-margin strong.is-thin { color: #b54708; }

/* Historique des versions --------------------------------------------------- */

.mr-recipe-history {
    margin-top: 1.25rem;
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: .85rem;
}

.mr-recipe-history > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.mr-recipe-history h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.mr-recipe-history > header > span { color: #98a2b3; font-size: .75rem; font-weight: 600; }

.mr-recipe-history thead th {
    color: #98a2b3;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mr-recipe-history tbody th { font-size: .85rem; font-weight: 800; white-space: nowrap; }
.mr-recipe-history tbody td { font-size: .85rem; color: #475467; }
.mr-recipe-history tr.is-current { background: #f6fbf8; }

.mr-recipe-history tbody th em {
    display: inline-block;
    margin-left: .3rem;
    padding: .05rem .4rem;
    border-radius: 2rem;
    background: #ecfdf3;
    color: #027a48;
    font-size: .6rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .mr-recipe-drift-banner { flex-direction: column; }
    .mr-recipe-drift-actions { width: 100%; }
}

@media (max-width: 767.98px) {
    .mr-recipe-items-head { display: none; }

    .mr-recipe-item { grid-template-columns: 1fr 1fr; }
    .mr-recipe-quantity { grid-column: 1 / -1; }
    .mr-recipe-row-actions { justify-content: flex-start; }
    .mr-recipe-conversion { margin-top: .2rem; }
}

/* ==========================================================================
   Demandes client (salle) et QR codes des tables
   L'écran des demandes est lu de loin, debout, entre deux services : cartes
   larges, quantités en gros, et une couleur qui vire quand un client attend.
   ========================================================================== */

.mr-req-page { display: flex; flex-direction: column; gap: 1.5rem; }

.mr-req-hero,
.mr-qr-hero {
    padding: 1.4rem 1.5rem;
    background: linear-gradient(135deg, #1f2937 0%, #263445 100%);
    border-radius: 1rem;
    color: #f8f9fa;
}

.mr-req-hero-main,
.mr-qr-hero-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mr-req-kicker,
.mr-qr-kicker {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: .2rem;
}

.mr-req-hero h1, .mr-qr-hero h1 { margin: 0; font-size: 1.8rem; font-weight: 700; }
.mr-req-hero-main p, .mr-qr-hero-main p { margin: .35rem 0 0; color: #ced4da; max-width: 44rem; }

.mr-req-hero-actions,
.mr-qr-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.mr-req-secondary,
.mr-qr-secondary {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: .65rem;
    color: #f8f9fa;
    font-weight: 600;
    text-decoration: none;
}

.mr-req-secondary:hover,
.mr-qr-secondary:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.mr-req-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .1);
    font-size: .82rem;
    font-weight: 600;
}

.mr-req-live i { width: .5rem; height: .5rem; border-radius: 50%; background: #12b76a; }
.mr-req-live.is-off i { background: #f87171; }

.mr-req-metrics,
.mr-qr-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}

.mr-req-metrics article,
.mr-qr-metrics article {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .75rem;
}

.mr-req-metrics article > span,
.mr-qr-metrics article > span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #adb5bd;
}

.mr-req-metrics article > strong,
.mr-qr-metrics article > strong { font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.mr-req-metrics article > small,
.mr-qr-metrics article > small { font-size: .76rem; color: #ced4da; }
.mr-req-metrics article.is-waiting > strong { color: #fbbf24; }
.mr-qr-metrics article.is-partial > strong { color: #fbbf24; }
.mr-qr-metrics article.is-off > strong { color: #f87171; }

/* Cartes de demande ---------------------------------------------------------- */

.mr-req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    align-items: start;
}

.mr-req-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid #2a78d6;
    border-radius: .85rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* Le client attend : la carte le dit avant qu'il ne vienne le demander. */
.mr-req-card.is-warm { border-left-color: #f59e0b; background: #fffdf7; }
.mr-req-card.is-urgent { border-left-color: #d03b3b; background: #fff7f7; }

.mr-req-card > header { display: flex; align-items: center; gap: .7rem; }
.mr-req-card > header > div { flex: 1 1 auto; min-width: 0; }
.mr-req-card > header strong { display: block; font-size: 1rem; }
.mr-req-card > header small { display: block; color: #868e96; font-size: .76rem; }

.mr-req-table {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.8rem;
    height: 2.8rem;
    padding: 0 .5rem;
    border-radius: .6rem;
    background: #eaf2fd;
    color: #1b5fae;
    font-size: 1.05rem;
    font-weight: 800;
}

.is-warm .mr-req-table { background: #fff1d6; color: #9a6400; }
.is-urgent .mr-req-table { background: #fde7e7; color: #a62828; }

.mr-req-wait { flex: 0 0 auto; text-align: right; }
.mr-req-wait strong { display: block; font-size: .9rem; }
.mr-req-wait small { display: block; color: #868e96; font-size: .74rem; }
.is-urgent .mr-req-wait strong { color: #a62828; }

.mr-req-context {
    margin: 0;
    padding: .55rem .75rem;
    background: #f1f6fd;
    border-radius: .55rem;
    font-size: .82rem;
    color: #1b5fae;
}

.mr-req-context a { color: inherit; font-weight: 700; }

.mr-req-items { list-style: none; margin: 0; padding: 0; }

.mr-req-items li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.mr-req-items li:last-child { border-bottom: 0; }
.mr-req-items li.is-unavailable { color: #a62828; text-decoration: line-through; }
.mr-req-items li.is-unavailable .mr-req-qty { background: #fde7e7; color: #a62828; }

.mr-req-qty {
    flex: 0 0 auto;
    min-width: 2.1rem;
    padding: .1rem .35rem;
    border-radius: .4rem;
    background: #f1f3f5;
    text-align: center;
    font-size: .85rem;
    font-weight: 800;
}

.mr-req-name { flex: 1 1 auto; min-width: 0; font-size: .92rem; }

.mr-req-name em {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: 2rem;
    background: #fde7e7;
    color: #a62828;
    font-size: .66rem;
    font-style: normal;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.mr-req-amount { flex: 0 0 auto; font-size: .88rem; font-weight: 600; }

.mr-req-note {
    margin: 0;
    padding: .6rem .75rem;
    background: #fff8e6;
    border-left: 3px solid #f59e0b;
    border-radius: .5rem;
    font-size: .85rem;
}

.mr-req-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding-top: .6rem;
    border-top: 1px solid #e9ecef;
}

.mr-req-total span { color: #868e96; font-size: .82rem; }
.mr-req-total strong { font-size: 1.25rem; font-weight: 800; }

/* Actions : accepter est le geste dominant, refuser reste discret. */

.mr-req-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.mr-req-actions form { margin: 0; flex: 1 1 auto; }

.mr-req-accept,
.mr-req-accept-send {
    width: 100%;
    padding: .7rem .9rem;
    border: 0;
    border-radius: .65rem;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.mr-req-accept { background: #12734a; color: #fff; }
.mr-req-accept:hover { background: #0f5c3b; }
.mr-req-accept-send { background: #1f2937; color: #fff; }
.mr-req-accept-send:hover { background: #111827; }
.mr-req-accept:disabled, .mr-req-accept-send:disabled { opacity: .6; cursor: progress; }

.mr-req-refuse-toggle {
    flex: 0 0 auto;
    padding: .7rem .9rem;
    border: 1px solid #e0a3a3;
    border-radius: .65rem;
    background: #fff;
    color: #a62828;
    font-size: .9rem;
    font-weight: 700;
}

.mr-req-refuse-toggle:hover { background: #fde7e7; }

.mr-req-refuse {
    margin: 0;
    padding: .85rem;
    background: #fff5f5;
    border: 1px solid #f5d5d5;
    border-radius: .7rem;
}

.mr-req-reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }

.mr-req-reasons button {
    padding: .3rem .65rem;
    border: 1px solid #f0c9c9;
    border-radius: 2rem;
    background: #fff;
    color: #a62828;
    font-size: .76rem;
    font-weight: 600;
}

.mr-req-reasons button:hover { background: #fde7e7; }

.mr-req-refuse-row { display: flex; gap: .4rem; }

.mr-req-refuse-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .75rem;
    border: 1px solid #e9d3d3;
    border-radius: .55rem;
    font-size: .88rem;
}

.mr-req-refuse-row button {
    flex: 0 0 auto;
    padding: .55rem .9rem;
    border: 0;
    border-radius: .55rem;
    background: #a62828;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.mr-req-readonly { margin: 0; color: #868e96; font-size: .84rem; }

.mr-req-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: .85rem;
    color: #52514e;
}

.mr-req-empty > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: #e2f6e2;
    color: #1c7a1c;
    font-size: 1.2rem;
}

.mr-req-empty strong { color: #111827; font-size: 1.05rem; }

/* Historique ------------------------------------------------------------------ */

.mr-req-history {
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
}

.mr-req-history > header { margin-bottom: .75rem; }
.mr-req-history h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }

.mr-req-history thead th {
    color: #868e96;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mr-req-history tbody th { font-size: .85rem; font-weight: 700; }
.mr-req-history tbody td { font-size: .85rem; }
.mr-req-history small { display: block; color: #868e96; font-size: .74rem; }

.mr-req-state {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 2rem;
    font-size: .74rem;
    font-weight: 800;
    background: #e9ecef;
    color: #495057;
}

.mr-req-state.is-acceptee { background: #e2f6e2; color: #1c7a1c; }
.mr-req-state.is-refusee { background: #fde7e7; color: #a62828; }
.mr-req-state.is-expiree { background: #fff1d6; color: #9a6400; }

/* ==========================================================================
   QR codes des tables
   ========================================================================== */

.mr-qr-page { display: flex; flex-direction: column; gap: 1.5rem; }

.mr-qr-editor,
.mr-qr-section {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
}

.mr-qr-editor > header,
.mr-qr-section > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.mr-qr-editor h2, .mr-qr-section h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.mr-qr-section > header form { margin: 0; }

.mr-qr-generate {
    padding: .55rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    background: #fff;
    color: #343a40;
    font-weight: 600;
}

.mr-qr-generate:hover { background: #f8f9fa; }

.mr-qr-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.mr-qr-form-grid label { display: flex; flex-direction: column; gap: .35rem; }
.mr-qr-form-grid label > span { font-size: .88rem; font-weight: 600; color: #343a40; }
.mr-qr-form-grid label > small { color: #868e96; font-size: .78rem; }
.mr-qr-wide { grid-column: 1 / -1; }

.mr-qr-switch {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .85rem;
    border: 1px solid #dee2e6;
    border-radius: .65rem;
    background: #f8f9fa;
}

.mr-qr-switch > span { display: flex; flex-direction: column; }
.mr-qr-switch strong { font-size: .9rem; }
.mr-qr-switch small { color: #52514e; font-size: .78rem; }
.mr-qr-switch input { width: 1.15rem; height: 1.15rem; accent-color: #f59e0b; }

.mr-qr-editor form > footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
}

.mr-qr-editor form > footer > .mr-qr-hint { margin-right: auto; }
.mr-qr-hint { color: #52514e; font-size: .82rem; }

.mr-qr-room { margin-bottom: 1.5rem; }
.mr-qr-room:last-of-type { margin-bottom: 0; }
.mr-qr-room h3 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 800; }

.mr-qr-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .85rem;
}

.mr-qr-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .9rem;
    background: #fbfbfa;
    border: 1px solid #e9ecef;
    border-radius: .75rem;
    text-align: center;
}

.mr-qr-card.is-missing { border-style: dashed; background: #fff; }
.mr-qr-card-head strong { display: block; font-size: 1.05rem; font-weight: 800; }
.mr-qr-card-head small { color: #868e96; font-size: .74rem; }

.mr-qr-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem;
    background: #fff;
    border-radius: .5rem;
}

.mr-qr-visual svg { width: 100%; height: auto; max-width: 8.5rem; display: block; }

.mr-qr-missing { margin: 1.2rem 0; color: #868e96; font-size: .82rem; }

.mr-qr-card-actions { display: flex; gap: .35rem; margin-top: auto; }
.mr-qr-card-actions form { flex: 1 1 auto; margin: 0; }

.mr-qr-card-actions button {
    width: 100%;
    padding: .4rem .5rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    color: #343a40;
    font-size: .78rem;
    font-weight: 600;
}

.mr-qr-card-actions button:hover { background: #f1f3f5; }
.mr-qr-card-actions button.is-danger { border-color: #e0a3a3; color: #a62828; }
.mr-qr-card-actions button.is-danger:hover { background: #fde7e7; }

.mr-qr-empty {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 2rem;
    text-align: center;
    background: #fbfbfa;
    border: 1px dashed #dee2e6;
    border-radius: .75rem;
    color: #52514e;
}

/* Fiches imprimables : invisibles à l'écran, une par page à l'impression. */

.mr-qr-print { display: none; }

@media print {
    .mr-app-header, .mr-qr-hero, .mr-qr-editor, .mr-qr-section,
    .alert, footer.container-xl { display: none !important; }

    .mr-qr-print { display: block; }

    .mr-qr-sheet {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 96vh;
        padding: 2rem;
        text-align: center;
        break-after: page;
        page-break-after: always;
    }

    .mr-qr-sheet-brand {
        margin: 0 0 .5rem;
        font-size: 11pt;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .mr-qr-sheet h2 { margin: 0 0 .35rem; font-size: 22pt; font-weight: 800; }
    .mr-qr-sheet-steps { margin: 0 0 1.5rem; font-size: 11pt; color: #444; }
    .mr-qr-sheet-code { width: 9cm; height: 9cm; }
    .mr-qr-sheet-code svg { width: 100%; height: 100%; }
    .mr-qr-sheet-table { margin: 1.2rem 0 0; font-size: 30pt; font-weight: 800; line-height: 1; }
    .mr-qr-sheet-room { margin: .2rem 0 0; font-size: 12pt; color: #555; }
    .mr-qr-sheet-note { margin: 1.5rem 0 0; font-size: 10pt; color: #666; }

    @page { margin: 1cm; }
}

@media (max-width: 767.98px) {
    .mr-req-grid { grid-template-columns: 1fr; }
    .mr-req-actions { flex-direction: column; }
    .mr-req-refuse-toggle { width: 100%; }
    .mr-req-refuse-row { flex-direction: column; }
}

/* Pastille de la navigation : nombre de demandes client en attente. */
.mr-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: 1rem;
    background: #f59e0b;
    color: #1f2937;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
}

/* Mot laissé par le client en commandant depuis sa table.
   Bleu, quand l'allergie est ambre et la priorité rouge : trois consignes,
   trois couleurs, aucune confusion possible à deux mètres de l'écran. */
.mr-bon-client {
    color: #1b4f8a;
    background: #eef5fd;
    border-color: #b8d4f0;
}

.mr-bon-client > span {
    color: #1b5fae;
    background: transparent;
    font-size: .85rem;
}

.mr-bon-client strong { letter-spacing: .04em; }

/* ==========================================================================
   Images du catalogue
   Une photo qui charge après le texte ne doit pas faire sauter la mise en
   page : chaque emplacement a une taille fixe, occupée par un aplat en
   attendant l'image.
   ========================================================================== */

/* Champ d'envoi, partagé par les formulaires produit et catégorie ---------- */

.mr-image-field {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem;
    background: #f9fafb;
    border: 1px solid #e8ebf0;
    border-radius: .75rem;
}

.mr-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 6.5rem;
    height: 6.5rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: .65rem;
}

.mr-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mr-image-preview.is-empty {
    flex-direction: column;
    gap: .25rem;
    border-style: dashed;
    color: #98a2b3;
}

.mr-image-preview.is-empty > span { font-size: 1.5rem; line-height: 1; }
.mr-image-preview.is-empty > small { font-size: .68rem; }

.mr-image-controls { flex: 1 1 auto; min-width: 0; }
.mr-image-hint { margin: .4rem 0 .5rem; color: #667085; font-size: .78rem; }

/* Listes d'administration -------------------------------------------------- */

.mr-product-thumb,
.mr-category-thumb {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    object-fit: cover;
    background: #f2f4f7;
    border-radius: .5rem;
    display: block;
}

.mr-category-thumb { border-radius: 50%; }

/* Tuiles de la caisse ------------------------------------------------------ */

.mr-produit-visual.has-photo {
    overflow: hidden;
    padding: 0;
    background: #f2f4f7;
}

.mr-produit-visual.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================================================
   Photos dans la prise de commande
   La bande image fait la meme hauteur sur toutes les tuiles, illustrees ou
   non : une seule tuile plus haute ferait grandir toute sa rangee et
   laisserait les voisines a moitie vides.
   ========================================================================== */

.mr-produit {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* La bande remplace la pastille : pleine largeur, en haut de la tuile. */
.mr-produit .mr-produit-visual {
    width: 100%;
    height: 4.25rem;
    flex: 0 0 auto;
    border: 0;
    border-bottom: 1px solid #f1e6c8;
    border-radius: 0;
}

.mr-produit .mr-produit-visual.has-photo {
    background: #f2f4f7;
    border-bottom-color: #e4e7ec;
}

.mr-produit .mr-produit-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le texte reprend la respiration que la tuile a perdue. */
.mr-produit .mr-produit-nom {
    padding: .6rem .7rem 0;
    font-size: .92rem;
}

.mr-produit .mr-produit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-top: auto;
    padding: .35rem .7rem .6rem;
}

.mr-produit .mr-produit-prix { margin-top: 0; }

.mr-produit .mr-produit-indisponible {
    position: absolute;
    top: .4rem;
    left: .4rem;
    padding: .1rem .45rem;
    border-radius: 2rem;
    background: rgba(166, 40, 40, .92);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mr-produit { position: relative; }

/* Vignette sur la ligne de l addition : le serveur confirme d un coup d oeil
   ce qu il vient de pointer. */
.mr-cart-line.has-photo .mr-cart-line-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .55rem;
}

.mr-cart-line-photo {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: cover;
    border-radius: .45rem;
    background: #f2f4f7;
    display: block;
}

@media (max-width: 991.98px) {
    .mr-produit .mr-produit-visual { height: 3.5rem; }
}
/* Puce de categorie illustree dans la prise de commande.
   La vignette remplace la pastille de couleur quand la categorie a une photo :
   les deux ensemble feraient doublon sur une puce de 12 mm de haut. */
.mr-pos-category.has-photo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .8rem .28rem .28rem;
}

.mr-pos-category.has-photo img {
    width: 1.55rem;
    height: 1.55rem;
    object-fit: cover;
    border-radius: 50%;
    background: #eef1f5;
    display: block;
}

/* Selectionnee, la puce jaunit : la vignette garde un lisere qui la detache. */
.mr-pos-category.has-photo.btn-dark img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .65); }

/* ==========================================================================
   Caisse tactile : téléphone et tablette
   Le serveur prend la commande debout, d'une main, entre deux tables.

   Deux seuils, et ils ne disent pas la même chose :

   — 992 px, c'est là que l'addition cesse de tenir à côté de la carte. Dès
     qu'elle passe dessous, elle devient un tiroir : sinon il faudrait faire
     défiler les 39 produits pour relire ce qu'on vient de saisir. Ce seuil
     couvre la tablette de salle, qui est l'appareil le plus courant.

   — 768 px, c'est le téléphone : on y resserre les espacements et on masque
     ce qui n'est pas indispensable.
   ========================================================================== */

/* Au-delà de 992 px, rien de ce mécanisme n'existe. */
.mr-pos-mobile-bar { display: none; }
.mr-pos-sheet-backdrop { display: none; }
.mr-pos-sheet-close { display: none; }

@media (max-width: 991.98px) {

    /* La carte occupe l'écran ; le bas est réservé à la barre fixe. */
    .mr-pos-page { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }

    /* Barre fixe : le raccourci permanent vers l'addition ------------------- */

    .mr-pos-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: block;
        padding: .6rem .75rem;
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
        background: linear-gradient(to top, #eef1f6 62%, rgba(238, 241, 246, 0));
        /* Le dégradé ne doit pas intercepter les touchers destinés aux tuiles
           qu'il survole : seul le bouton est cliquable. */
        pointer-events: none;
    }

    .mr-pos-mobile-bar button {
        display: flex;
        align-items: center;
        gap: .7rem;
        width: 100%;
        max-width: 34rem;
        margin: 0 auto;
        min-height: 3.25rem;
        padding: .7rem 1rem;
        border: 0;
        border-radius: .9rem;
        background: #172033;
        color: #fff;
        pointer-events: auto;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .28);
    }

    .mr-pos-mobile-count {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 1.85rem;
        height: 1.85rem;
        padding: 0 .4rem;
        border-radius: .55rem;
        background: #fbbf24;
        color: #172033;
        font-size: .92rem;
        font-weight: 800;
    }

    .mr-pos-mobile-label { flex: 1 1 auto; text-align: left; font-weight: 700; }
    .mr-pos-mobile-total { font-size: 1.1rem; font-weight: 800; white-space: nowrap; }

    /* Tiroir d'addition ---------------------------------------------------- */

    .mr-pos-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: block;
        background: rgba(15, 23, 42, .45);
    }

    .mr-pos-sheet-backdrop[hidden] { display: none; }

    .mr-pos-cart {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        max-width: 40rem;
        margin: 0 auto;
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(101%);
        transition: transform .22s ease;
    }

    body.mr-addition-ouverte .mr-pos-cart { transform: none; }

    /* Le fond ne défile plus derrière le tiroir ouvert. */
    body.mr-addition-ouverte { overflow: hidden; }

    .mr-pos-page .mr-addition {
        border-bottom: 0;
        border-radius: 1.1rem 1.1rem 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Poignée : le repère visuel d'un tiroir qu'on referme. */
    .mr-pos-cart .mr-pos-cart-heading {
        position: relative;
        padding-top: 1.45rem;
    }

    .mr-pos-cart .mr-pos-cart-heading::before {
        content: "";
        position: absolute;
        top: .55rem;
        left: 50%;
        width: 2.5rem;
        height: .25rem;
        border-radius: 1rem;
        background: #d7dce5;
        transform: translateX(-50%);
    }

    .mr-pos-sheet-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        margin-left: .4rem;
        border: 0;
        border-radius: 50%;
        background: #eef1f6;
        color: #475467;
        font-size: 1.5rem;
        line-height: 1;
    }

    /* Le tiroir défile déjà : la liste n'a plus besoin de sa propre limite. */
    #pos-lignes { max-height: none; }

    /* Recherche et catégories collantes ------------------------------------ */

    .mr-pos-catalog-sticky {
        position: sticky;
        top: var(--mr-entete-hauteur, 0px);
        z-index: 8;
        margin: 0 -1.2rem;
        padding: .55rem 1.2rem .45rem;
        background: #fff;
        box-shadow: 0 6px 12px -8px rgba(15, 23, 42, .25);
    }

    .mr-pos-catalog-sticky .mr-pos-categories { margin-bottom: 0 !important; }

    /* Cibles tactiles : 44 px au minimum, on commande au pouce -------------- */

    .mr-pos-category { min-height: 2.5rem; }

    .mr-cart-quantity button,
    .mr-cart-note,
    .mr-cart-remove { min-width: 2.5rem; min-height: 2.5rem; }
}

/* Téléphone : resserrage --------------------------------------------------- */

@media (max-width: 767.98px) {
    .mr-pos-catalog { padding: .75rem .7rem 1rem; }
    .mr-pos-catalog-sticky { margin: 0 -.7rem; padding: .55rem .7rem .45rem; }

    .mr-pos-category { padding: .4rem .85rem; font-size: .8rem; }
    .mr-pos-category.has-photo { padding: .3rem .85rem .3rem .3rem; }

    .mr-pos-page .mr-produit-ajouter {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.15rem;
    }

    .mr-pos-commandbar { padding: .7rem .75rem; gap: .6rem; border-radius: .85rem; }
    .mr-pos-commandbar h1 { font-size: 1.25rem; }
    .mr-pos-command-main { gap: .6rem; }

    .mr-pos-back { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }

    .mr-pos-command-actions .btn {
        min-height: 2.5rem;
        padding-top: .35rem;
        padding-bottom: .35rem;
        font-size: .82rem;
    }

    /* Plan de salle : le serveur ouvre cet écran pour toucher une table, pas
       pour lire un titre. Le bandeau se comprime, les tables remontent. */
    .mr-pos-floor-hero { padding: .9rem 1rem; border-radius: .9rem; }
    .mr-pos-floor-hero h1 { font-size: 1.35rem; }
    .mr-pos-floor-hero p { display: none; }
    .mr-pos-floor-kicker { font-size: .66rem; }

    .mr-pos-floor-metrics {
        display: flex;
        gap: .5rem;
        margin-top: .8rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .mr-pos-floor-metrics::-webkit-scrollbar { display: none; }

    .mr-pos-floor-metrics > div {
        flex: 0 0 auto;
        min-width: 7.5rem;
        padding: .55rem .7rem;
        border: 0;
        border-radius: .6rem;
        background: rgba(255, 255, 255, .08);
    }

    .mr-pos-floor-metrics strong { font-size: 1.25rem; }
    .mr-pos-floor-metrics span { font-size: .68rem; }

    .mr-pos-floor-actions { width: 100%; }
    .mr-pos-takeaway-button { width: 100%; min-height: 2.75rem; }
    .mr-pos-floor-toolbar { margin-top: 1rem; }

    .mr-tables:not(.is-plan) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .mr-table-lien { min-height: 6.25rem; }
}

/* En paysage sur un téléphone, la hauteur utile fond : on rend au tiroir ce
   qu'il reste réellement d'écran. */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px) {
    .mr-pos-cart { max-height: 94vh; max-height: 94dvh; }
}

/* ==========================================================================
   Tableau de bord — priorités
   Le bloc devient le premier regard du matin. Il doit se lire de loin et
   mener quelque part : une alerte sans porte de sortie ne fait qu inquieter.
   ========================================================================== */

/* Le lien passe SOUS le texte au lieu de lui disputer la largeur. Avec quatre
   cartes par rangee, la colonne de texte tombait a 150 px et coupait des
   phrases comme « 3 commande(s) envoyee(s) depuis une table, en… ». */
.mr-dashboard-actions > div { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.mr-dashboard-actions article {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    row-gap: .45rem;
    padding: .9rem;
}

.mr-dashboard-actions article small {
    white-space: normal;
    overflow: visible;
    font-size: .78rem;
    line-height: 1.4;
}

.mr-dashboard-actions article strong { font-size: .88rem; }

.mr-dashboard-actions article a {
    grid-column: 2;
    justify-self: start;
    padding: .25rem 0;
    font-size: .78rem;
    font-weight: 750;
}

.mr-dashboard-alert-icon { flex: 0 0 auto; margin-top: .1rem; }

/* Troisieme ton, pour ce qui merite un coup d oeil sans etre une urgence :
   des marges calculees sur d anciens prix, par exemple. */
.mr-dashboard-actions article.is-info { background: #eff6ff; border-color: #bfdbfe; }
.mr-dashboard-actions .is-info .mr-dashboard-alert-icon { background: #2a78d6; }
.mr-dashboard-actions .is-info small,
.mr-dashboard-actions .is-info a { color: #1e40af; }

.mr-dashboard-urgent { color: #b42318; font-weight: 800; }

/* Journee sans alerte : on le dit, plutot que de laisser un trou. */
.mr-dashboard-allclear {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .9rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: .75rem;
    color: #166534;
    font-size: .84rem;
}

.mr-dashboard-allclear > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}
/* ==========================================================================
   Plan de salle : cinq tables par ligne
   Demande explicite. La regle prime sur les anciens points de rupture, qui
   passaient a deux puis une colonne : ils sont neutralises ici.

   Le plan positionne a la main (.is-plan) garde ses coordonnees et n est pas
   concerne. Sur telephone, on revient a trois colonnes : cinq y laisseraient
   des tuiles illisibles.
   ========================================================================== */

.mr-tables:not(.is-plan) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Trois colonnes sur un telephone laissent environ 110 px par tuile : le
   contenu se resserre pour rester lisible. */
@media (max-width: 575.98px) {
    .mr-tables:not(.is-plan) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
    }

    .mr-table-lien { min-height: 5.75rem; padding: .5rem .45rem; }
    .mr-table-numero { font-size: 1.45rem; }
    .mr-table-status { font-size: .58rem; }
    .mr-table-status i { width: .34rem; height: .34rem; }
    .mr-table-time, .mr-table-seats { font-size: .56rem; }
    .mr-table-total { font-size: .78rem; }
    .mr-table-order-meta { font-size: .56rem; gap: .15rem; }
    .mr-table-footer { font-size: .55rem; }
    .mr-table-help, .mr-table-open { font-size: .58rem; }

    /* Le nom du serveur passe a la ligne plutot que de deborder. */
    .mr-table-footer { flex-wrap: wrap; row-gap: .1rem; }
}
/* ---------------------------------------------------------------------------
   Demandes venues de la borne

   Une commande de borne se traite autrement qu'une commande de table : le
   client n'est pas dans la salle, personne ne peut aller le chercher. La carte
   doit donc montrer d'un coup d'oeil comment le joindre et ou va la commande.
   --------------------------------------------------------------------------- */

.mr-req-card.is-borne { border-left-color: #7c3aed; }
.mr-req-card.is-borne.is-warm { border-left-color: #f59e0b; }
.mr-req-card.is-borne.is-urgent { border-left-color: #d03b3b; }

/* Le code de retrait est ce que le client annoncera au comptoir : il prend la
   place du numero de table, au meme endroit et dans le meme format. */
.mr-req-table.is-borne { background: #f3e8ff; color: #6d28d9; letter-spacing: .04em; }
.is-warm .mr-req-table.is-borne { background: #fff1d6; color: #9a6400; }
.is-urgent .mr-req-table.is-borne { background: #fde7e7; color: #a62828; }

.mr-req-borne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .45rem .9rem;
    margin: 0;
    padding: .6rem .75rem;
    background: #faf5ff;
    border-radius: .55rem;
}

.mr-req-borne > div { min-width: 0; }
.mr-req-borne > div.is-wide { grid-column: 1 / -1; }
.mr-req-borne dt { color: #6b7280; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mr-req-borne dd { margin: .1rem 0 0; font-size: .84rem; font-weight: 600; }
.mr-req-borne a { color: #6d28d9; text-decoration: none; }

.mr-req-origin {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .35rem;
    background: #f3e8ff;
    color: #6d28d9;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Reglages de la borne interactive
   -------------------------------------------------------------------------- */

.mr-qr-kiosk > header { align-items: center; }

.mr-qr-state {
    padding: .2rem .6rem;
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mr-qr-state.is-on { background: #e7f7ee; color: #1a7f4b; }
.mr-qr-state.is-off { background: #f1f3f5; color: #868e96; }

/* L'adresse de la borne se recopie sur une tablette : elle doit se lire en
   entier, sans troncature, meme sur un ecran etroit. */
.mr-qr-kiosk-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin: 0 1.1rem 1.1rem;
    padding: .9rem 1rem;
    background: #faf5ff;
    border: 1px dashed #d8b4fe;
    border-radius: .6rem;
}

.mr-qr-kiosk-link > p { flex: 1 1 16rem; margin: 0; font-size: .84rem; }
.mr-qr-kiosk-link small { display: block; color: #868e96; font-weight: 400; }
.mr-qr-kiosk-link form { margin-left: auto; }

.mr-qr-kiosk-url {
    flex: 1 1 100%;
    padding: .5rem .65rem;
    background: #fff;
    border: 1px solid #e9d5ff;
    border-radius: .45rem;
    color: #6d28d9;
    font-size: .8rem;
    word-break: break-all;
}

/* Categories montrees sur la borne ----------------------------------------- */

.mr-qr-cats {
    margin: 0 1.1rem 1.1rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: .6rem;
}

.mr-qr-cats legend {
    padding: 0 .4rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #868e96;
    width: auto;
}

.mr-qr-cats-empty { margin: 0; color: #868e96; font-size: .85rem; }

.mr-qr-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .5rem;
}

/* Toute l'etiquette est cliquable : viser une case a cocher de 13 px sur une
   tablette de gerance est une corvee. */
.mr-qr-cat {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 3.4rem;
    padding: .45rem .65rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    cursor: pointer;
}

.mr-qr-cat:has(input:checked) { border-color: #7c3aed; background: #faf5ff; }
.mr-qr-cat input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; accent-color: #7c3aed; }

.mr-qr-cat img,
.mr-qr-cat-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    object-fit: cover;
    border-radius: .4rem;
    background: #f1f3f5;
    color: #adb5bd;
}

.mr-qr-cat-text { min-width: 0; }
.mr-qr-cat-text strong { display: block; font-size: .88rem; font-weight: 700; }
.mr-qr-cat-text small { display: block; color: #868e96; font-size: .72rem; }

/* Cochee, elle n'afficherait qu'un titre et du vide sous le titre. */
.mr-qr-cat.is-empty .mr-qr-cat-text small { color: #b45309; font-weight: 700; }

/* Etat de l'impression depuis la caisse ------------------------------------ */

.mr-pos-print-state {
    margin: 0;
    padding: .5rem .7rem;
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 600;
}

.mr-pos-print-state.is-attente { background: #f1f3f5; color: #495057; }
.mr-pos-print-state.is-ok { background: #e7f7ee; color: #1a7f4b; }
.mr-pos-print-state.is-erreur { background: #fdecec; color: #a62828; }

/* Le ticket de caisse se reimprime rarement : le bouton reste discret a cote
   de l'addition, qu'on redemande sans cesse. */
.mr-pos-reprint { flex: 0 0 auto; }

/* Releve du terminal, affiche quand l'impression locale echoue -------------- */

.mr-pos-print-details {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Fait pour etre recopie ou photographie : selectionnable, non tronque. */
.mr-pos-print-diag {
    margin: .5rem 0 0;
    padding: .5rem .6rem;
    max-height: 14rem;
    overflow: auto;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .4rem;
    color: #343a40;
    font-size: .7rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

/* Choix du port de l'imprimante integree ----------------------------------- */

.mr-pos-print-ports {
    margin-top: .6rem;
    padding: .6rem .7rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .45rem;
}

.mr-pos-print-ports > strong { display: block; font-size: .82rem; }
.mr-pos-print-ports > span { display: block; margin-bottom: .5rem; color: #868e96; font-size: .74rem; font-weight: 400; }

.mr-pos-print-port {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem 0;
}

.mr-pos-print-port code {
    flex: 1 1 auto;
    min-width: 0;
    color: #343a40;
    font-size: .75rem;
    word-break: break-all;
}

/* ==========================================================================
   Detection de l'imprimante du terminal

   Une page qu'on ouvre une fois par appareil, souvent debout, sur un ecran de
   terminal etroit. D'ou les etapes numerotees et les verdicts lisibles de
   loin : celui qui la parcourt doit savoir sans lire ou il en est.
   ========================================================================== */

.mr-detect-step {
    margin-top: 1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.mr-detect-step.is-aside { background: #f8f9fa; }

.mr-detect-step > header {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #f1f3f5;
}

.mr-detect-step > header > div { flex: 1 1 auto; min-width: 0; }
.mr-detect-step h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.mr-detect-step h2 + p, .mr-detect-step > header p { margin: .2rem 0 0; color: #868e96; font-size: .84rem; }

.mr-detect-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #f1f3f5;
    color: #495057;
    font-size: .9rem;
    font-weight: 800;
}

.mr-detect-verdict {
    flex: 0 0 auto;
    padding: .25rem .65rem;
    border-radius: 2rem;
    background: #f1f3f5;
    color: #868e96;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.mr-detect-verdict.is-ok { background: #e7f7ee; color: #1a7f4b; }
.mr-detect-verdict.is-ko { background: #fdecec; color: #a62828; }
.mr-detect-verdict.is-attente { background: #fff4e0; color: #9a6400; }

.mr-detect-body { padding: 1rem 1.15rem; }

.mr-detect-message {
    margin: .6rem 0 0;
    padding: .55rem .7rem;
    border-radius: .45rem;
    background: #f1f3f5;
    color: #495057;
    font-size: .85rem;
}

.mr-detect-message.is-ok { background: #e7f7ee; color: #1a7f4b; }
.mr-detect-message.is-ko { background: #fdecec; color: #a62828; }
.mr-detect-message.is-attente { background: #fff4e0; color: #9a6400; }

/* Les ports : une ligne par candidat, deux gestes par ligne. */
.mr-detect-ports { display: grid; gap: .35rem; }

.mr-detect-port {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
}

.mr-detect-port.is-retenu { border-color: #1a7f4b; background: #f2fbf6; }
.mr-detect-port code { flex: 1 1 auto; min-width: 0; color: #343a40; font-size: .82rem; word-break: break-all; }

.mr-detect-largeur { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .7rem; }
.mr-detect-largeur label { display: block; }
.mr-detect-largeur label span { display: block; margin-bottom: .2rem; font-size: .8rem; font-weight: 700; }
.mr-detect-largeur input { width: 7rem; padding: .45rem .6rem; border: 1px solid #ced4da; border-radius: .4rem; }
.mr-detect-aide { margin: 0; color: #868e96; font-size: .78rem; }

.mr-detect-releve {
    margin-top: 1rem;
    padding: .85rem 1.15rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .85rem;
}

.mr-detect-releve summary { font-weight: 700; cursor: pointer; }
.mr-detect-releve > p { margin: .5rem 0; color: #868e96; font-size: .82rem; }

.mr-detect-releve pre {
    max-height: 22rem;
    margin: 0 0 .6rem;
    padding: .7rem;
    overflow: auto;
    background: #f8f9fa;
    border-radius: .45rem;
    font-size: .74rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

.mr-detect-reseau { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }

.mr-detect-reseau li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .45rem;
    font-size: .84rem;
}

.mr-detect-reseau li > strong { flex: 1 1 auto; min-width: 0; }
.mr-detect-reseau li > span { color: #868e96; font-size: .78rem; }

.mr-detect-reseau li > em {
    font-style: normal;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mr-detect-reseau li.is-ok > em { color: #1a7f4b; }
.mr-detect-reseau li.is-ko > em { color: #a62828; }

@media (max-width: 575.98px) {
    .mr-detect-step > header { flex-wrap: wrap; }
    .mr-detect-verdict { order: 3; width: 100%; text-align: center; }
    .mr-detect-port { flex-wrap: wrap; }
    .mr-detect-port code { flex: 1 1 100%; }
}

/* En-tete de rayon dans l'analyse d'impact --------------------------------- */

/* « Merguez » et « Alfredo » existent dans deux rayons : sans ce reperage, une
   liste de noms nus ne dit pas lequel on s'apprete a desequilibrer. */
.mr-recipe-usage-cat {
    margin-top: .6rem;
    padding: .3rem 0 .15rem;
    border-bottom: 1px solid #e9ecef;
    color: #868e96;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mr-recipe-usage-cat:first-child { margin-top: 0; }
.mr-recipe-usage-cat.is-off { color: #b45309; }

/* ==========================================================================
   Liste des ingredients
   ========================================================================== */

.mr-ing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}

.mr-ing-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 16rem;
    padding: .45rem .8rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 2rem;
}

.mr-ing-search span { color: #adb5bd; }
.mr-ing-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font-size: .9rem; }

.mr-ing-sorts { display: flex; flex-wrap: wrap; gap: .3rem; }

.mr-ing-sorts button {
    padding: .4rem .85rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 2rem;
    color: #868e96;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.mr-ing-sorts button.is-active { background: #1b2233; border-color: #1b2233; color: #fff; }

.mr-ing-table { background: #fff; border: 1px solid #e9ecef; border-radius: .75rem; }
.mr-ing-table thead th { color: #868e96; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mr-ing-table td small, .mr-ing-table th small { color: #adb5bd; font-size: .72rem; font-weight: 400; }
.mr-ing-table tr.is-off { opacity: .55; }
.mr-ing-nom { font-weight: 600; }

.mr-ing-tag {
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: .3rem;
    background: #f1f3f5;
    color: #868e96 !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* Le dernier prix paye s'ecarte du cout moyen des qu'une reception entre a un
   autre tarif. L'ecart se voit ici avant de se voir sur la marge. */
.mr-ing-ecart { display: block; font-size: .68rem !important; font-weight: 700 !important; }
.mr-ing-ecart.is-up { color: #a62828 !important; }
.mr-ing-ecart.is-down { color: #1a7f4b !important; }

.mr-ing-vide { color: #b45309; font-weight: 700; }
.mr-ing-orphelin { color: #adb5bd; font-size: .8rem; font-style: italic; }

/* Barre de part : le poids relatif se lit d'un coup d'oeil, sans comparer
   quarante nombres entre eux. */
.mr-ing-part {
    display: block;
    height: 3px;
    margin-top: .25rem;
    margin-left: auto;
    width: 4.5rem;
    background: #f1f3f5;
    border-radius: 2px;
    overflow: hidden;
}

.mr-ing-part i { display: block; height: 100%; width: var(--part, 0%); background: #2a78d6; }

.mr-ing-vide-message { margin-top: 1rem; color: #868e96; text-align: center; }

.mr-ing-orphelins {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    background: #fffdf7;
    border: 1px solid #ffe8b8;
    border-radius: .75rem;
}

.mr-ing-orphelins h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #9a6400; }
.mr-ing-orphelins > p { margin: .3rem 0 .7rem; color: #868e96; font-size: .84rem; }
.mr-ing-orphelins ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }

.mr-ing-orphelins li {
    padding: .2rem .6rem;
    background: #fff;
    border: 1px solid #ffe8b8;
    border-radius: 2rem;
    font-size: .8rem;
}

/* Le nom d'un ingredient ouvre son analyse d'impact ------------------------ */

/* Un bouton, pas un lien : il n'y a pas de page a atteindre, seulement une
   reponse a obtenir sur place. Mais il doit se voir comme cliquable. */
.mr-ing-nom {
    padding: 0;
    border: 0;
    background: none;
    color: #1b2233;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: #ced4da;
    text-underline-offset: 3px;
    cursor: pointer;
}

.mr-ing-nom:hover, .mr-ing-nom:focus-visible { color: #2a78d6; text-decoration-color: #2a78d6; }

/* Fusion de categories ------------------------------------------------------ */

.mr-fusion-resume { margin: 0 0 1rem; font-size: .95rem; }
.mr-fusion-resume span { color: #868e96; font-size: .85rem; }

.mr-fusion-champ { display: block; margin-bottom: 1rem; }
.mr-fusion-champ > span { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 700; }

.mr-fusion-effets {
    margin: 0 0 .9rem;
    padding: .7rem .9rem .7rem 2rem;
    background: #f8f9fa;
    border-radius: .5rem;
    color: #495057;
    font-size: .83rem;
}

.mr-fusion-effets li + li { margin-top: .25rem; }

/* L'avertissement n'est pas decoratif : la fusion ne se defait pas d'un clic. */
.mr-fusion-averto {
    margin: 0;
    padding: .55rem .75rem;
    background: #fdecec;
    border-radius: .45rem;
    color: #a62828;
    font-size: .83rem;
    font-weight: 600;
}

/* ==========================================================================
   Clavier virtuel
   Un poste tactile sans clavier physique n'ouvre pas toujours le clavier
   logiciel du système (navigateur en mode kiosque). Ce panneau le remplace
   pour tout champ marqué `.mr-clavier-virtuel` — voir clavier-virtuel.js.
   ========================================================================== */

.mr-clavier {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1080;
    padding: .5rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: #111827;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -12px 30px rgba(2, 6, 23, .35);
    transform: translateY(105%);
    transition: transform .22s ease;
}

.mr-clavier.is-ouvert { transform: translateY(0); }

.mr-clavier-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .45rem;
}

.mr-clavier-titre {
    overflow: hidden;
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.mr-clavier-masquer {
    padding: .3rem .7rem;
    color: #cbd5e1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .45rem;
    font-size: .75rem;
    font-weight: 700;
}

.mr-clavier-ligne {
    display: flex;
    gap: .35rem;
    margin-bottom: .35rem;
}

.mr-clavier-ligne:last-child { margin-bottom: 0; }

.mr-clavier-touche {
    flex: 1 1 0;
    min-height: 2.9rem;
    padding: .55rem 0;
    color: #e2e8f0;
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color .1s ease, transform .08s ease;
}

.mr-clavier-touche:hover { background: #334155; }
.mr-clavier-touche:active { background: #475569; transform: scale(.95); }
.mr-clavier-touche-large { flex: 1.4 1 0; }
.mr-clavier-touche-espace { flex: 3.5 1 0; }
.mr-clavier-touche-fonction { color: #94a3b8; background: #172033; }
.mr-clavier-touche-fonction.is-active { color: #111827; background: #fbbf24; }

.mr-clavier-touche-action {
    flex: 2 1 0;
    color: #111827;
    background: #fbbf24;
    font-weight: 800;
}

.mr-clavier-touche-action:hover { background: #f59e0b; }

/* Pavé numérique : centré et plus haut, comme un téléphone. */
.mr-clavier.is-numerique .mr-clavier-touches,
.mr-clavier.is-numerique .mr-clavier-entete {
    max-width: 26rem;
    margin-right: auto;
    margin-left: auto;
}

.mr-clavier.is-numerique .mr-clavier-touche { min-height: 3.4rem; font-size: 1.3rem; }
.mr-clavier.is-numerique .mr-clavier-touche-action { font-size: 1rem; }

body.mr-clavier-ouvert {
    padding-bottom: var(--mr-clavier-hauteur, 260px);
}

/* ==========================================================================
   Fiche technique — export PDF
   Pas de bibliothèque PDF côté serveur (le projet n'a ni Composer ni vendor/,
   voir bootstrap.php) : la feuille ci-dessous est masquée à l'écran et ne
   s'affiche qu'à l'impression. « Enregistrer au format PDF » dans la boîte de
   dialogue d'impression du navigateur produit le fichier — même mécanisme
   déjà utilisé pour les fiches de table QR (voir plus haut, .mr-qr-print).
   ========================================================================== */

.mr-recipe-heading-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mr-recipe-print { display: none; }

@media print {
    .mr-app-header, .mr-catalog-hero, .mr-recipe-layout,
    .alert, footer.container-xl { display: none !important; }

    .mr-recipe-print {
        display: block;
        color: #111;
    }

    .mr-recipe-print-head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.2rem;
        color: #555;
        font-size: 9.5pt;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .mr-recipe-print-brand { font-weight: 800; }

    .mr-recipe-print h1 {
        margin: 0 0 .3rem;
        font-size: 22pt;
        font-weight: 800;
    }

    .mr-recipe-print-sub {
        margin: 0 0 1.4rem;
        color: #444;
        font-size: 11pt;
    }

    .mr-recipe-print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11pt;
    }

    .mr-recipe-print-table th,
    .mr-recipe-print-table td {
        padding: .45rem .3rem;
        border-bottom: 1px solid #ccc;
        text-align: left;
    }

    .mr-recipe-print-table thead th {
        border-bottom: 2px solid #111;
        font-size: 9.5pt;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .mr-recipe-print-table tfoot th {
        border-top: 2px solid #111;
        border-bottom: 0;
        font-size: 12pt;
    }

    .mr-recipe-print-table .text-end { text-align: right; }
    .mr-recipe-print-table em { color: #777; font-size: 9pt; font-style: italic; }

    .mr-recipe-print-notes {
        margin-top: 1.4rem;
        padding-top: 1rem;
        border-top: 1px solid #ccc;
        font-size: 10.5pt;
    }

    .mr-recipe-print-notes strong {
        display: block;
        margin-bottom: .3rem;
        text-transform: uppercase;
        font-size: 9.5pt;
        letter-spacing: .05em;
        color: #555;
    }

    @page { margin: 1.5cm; }
}

/* ==========================================================================
   Export groupé des fiches techniques (layouts/print.php)
   Cette page n'a qu'un but : être imprimée ou enregistrée en PDF. Contrairement
   à la fiche unique ci-dessus, les feuilles y restent visibles à l'écran —
   c'est tout le contenu de la page, pas une couche cachée derrière l'UI.
   ========================================================================== */

.mr-print-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.5rem;
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mr-print-toolbar a {
    color: #cbd5e1;
    font-size: .85rem;
    text-decoration: none;
}

.mr-print-toolbar a:hover { color: #fff; }

.mr-print-toolbar button {
    padding: .5rem 1rem;
    color: #111827;
    background: #fbbf24;
    border: 0;
    border-radius: .5rem;
    font-weight: 700;
    font-size: .85rem;
}

.mr-print-toolbar button:hover { background: #f59e0b; }

@media print {
    .mr-print-toolbar { display: none !important; }
}

.mr-print-page .mr-recipe-print-list {
    max-width: 760px;
    margin: 1.5rem auto 3rem;
    padding: 0 1rem;
}

.mr-print-page .mr-recipe-print {
    display: block;
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: .75rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    color: #172033;
}

.mr-print-page .mr-recipe-print-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    color: #667085;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.mr-print-page .mr-recipe-print-brand { font-weight: 800; }
.mr-print-page .mr-recipe-print h1 { margin: 0 0 .3rem; font-size: 1.4rem; font-weight: 800; }
.mr-print-page .mr-recipe-print-sub { margin: 0 0 1.1rem; color: #445; font-size: .82rem; }

.mr-print-page .mr-recipe-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.mr-print-page .mr-recipe-print-table th,
.mr-print-page .mr-recipe-print-table td {
    padding: .4rem .3rem;
    border-bottom: 1px solid #e5e9f0;
    text-align: left;
}

.mr-print-page .mr-recipe-print-table thead th {
    border-bottom: 2px solid #172033;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #667085;
}

.mr-print-page .mr-recipe-print-table tfoot th {
    border-top: 2px solid #172033;
    border-bottom: 0;
}

.mr-print-page .mr-recipe-print-table .text-end { text-align: right; }
.mr-print-page .mr-recipe-print-table em { color: #94a3b8; font-size: .72rem; font-style: italic; }

.mr-print-page .mr-recipe-print-notes {
    margin-top: 1.1rem;
    padding-top: .85rem;
    border-top: 1px solid #e5e9f0;
    font-size: .82rem;
}

.mr-print-page .mr-recipe-print-notes strong {
    display: block;
    margin-bottom: .25rem;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .05em;
    color: #667085;
}

@media print {
    .mr-recipe-print-page {
        page-break-before: always;
    }

    .mr-print-page .mr-recipe-print {
        margin-bottom: 0;
        border: 0;
        box-shadow: none;
    }
}

/* ==========================================================================
   Barre latérale
   L'en-tête devient une colonne fixe à gauche sur bureau (≥ 992 px). En
   dessous, il reste la barre du haut d'origine : une colonne de 240 px
   mangerait trop de largeur sur tablette et téléphone.
   ========================================================================== */

.mr-shell {
    min-height: 100vh;
}

.mr-shell-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .mr-shell {
        display: flex;
        flex-direction: row;
    }

    .mr-sidebar {
        display: flex;
        flex: 0 0 15rem;
        flex-direction: column;
        width: 15rem;
        height: 100vh;
        overflow-y: auto;
        border-right: 1px solid rgba(148, 163, 184, .12);
        border-bottom: 0;
        box-shadow: 6px 0 24px rgba(2, 6, 23, .12);
        scrollbar-width: thin;
    }

    /* La barre du haut est dissoute : marque et compte deviennent des blocs
       de la colonne, que `order` range en haut, au milieu, en bas. */
    .mr-sidebar .mr-app-topbar {
        display: contents;
    }

    .mr-sidebar .mr-app-brand {
        order: 1;
        padding: 1.1rem 1.1rem 1rem;
        border-bottom: 1px solid rgba(148, 163, 184, .1);
    }

    .mr-sidebar .mr-app-brand-text strong,
    .mr-sidebar .mr-app-brand-text small {
        max-width: 9.5rem;
    }

    .mr-sidebar .mr-app-navigation {
        order: 2;
        flex: 1 1 auto;
        border-top: 0;
        background: transparent;
    }

    .mr-sidebar .mr-app-navigation .container-xl {
        max-width: none;
        padding: .75rem .65rem;
        overflow: visible;
    }

    .mr-sidebar .mr-nav {
        flex-direction: column;
        flex-wrap: nowrap !important;
        width: 100%;
        min-width: 0;
        gap: .2rem;
        padding: 0;
    }

    .mr-sidebar .mr-nav .nav-item { width: 100%; }

    .mr-sidebar .mr-nav .nav-link {
        width: 100%;
        gap: .7rem;
        padding: .6rem .75rem;
        font-size: .8rem;
    }

    .mr-sidebar .mr-nav .nav-link.active {
        box-shadow: inset 3px 0 0 #f59e0b;
    }

    .mr-sidebar .mr-nav-icon {
        width: 1.4rem;
        height: 1.4rem;
        font-size: .95rem;
    }

    .mr-sidebar .mr-nav-badge { margin-left: auto; }

    .mr-sidebar .mr-app-account {
        order: 3;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        padding: .85rem .75rem 1rem;
        border-top: 1px solid rgba(148, 163, 184, .1);
    }

    .mr-sidebar .mr-app-profile-text strong { max-width: 8.5rem; font-size: .78rem; }
    .mr-sidebar .mr-app-profile-text small { font-size: .66rem; }

    .mr-sidebar .mr-app-logout button {
        width: 100%;
        font-size: .72rem;
    }

    .mr-sidebar .mr-app-logout button em { display: inline; }
}

/* ==========================================================================
   Aperçu des tickets (centre d'impression)
   Le texte exact gardé dans la file, présenté comme un rouleau thermique :
   police à chasse fixe pour que les colonnes s'alignent comme sur le papier,
   bord dentelé en bas comme une coupe.
   ========================================================================== */

.mr-print-job-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

.mr-print-job-actions form { margin: 0; }

.mr-print-preview-btn {
    padding: .3rem .7rem;
    color: #334155;
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: .45rem;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.mr-print-preview-btn:hover { color: #0f172a; border-color: #f59e0b; background: #fffbeb; }

.mr-ticket-modal { max-width: min(36rem, 96vw); }

.mr-ticket-stage {
    display: flex;
    justify-content: center;
    padding: 1.75rem 1rem 2.25rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(245, 158, 11, .08), transparent 60%),
        #eef2f6;
}

.mr-ticket-paper {
    position: relative;
    max-width: 100%;
    padding: 1.4rem 1.25rem 1.6rem;
    background: #fffefb;
    border-radius: .3rem .3rem 0 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 18px 40px rgba(15, 23, 42, .16);
    animation: mr-ticket-sort .45s cubic-bezier(.22, .68, .28, 1.02) both;
}

/* Coupe en dents de scie, comme le massicot de l'imprimante. */
.mr-ticket-paper::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 10px;
    background:
        linear-gradient(-45deg, transparent 6px, #fffefb 0) 0 0 / 12px 10px repeat-x,
        linear-gradient(45deg, transparent 6px, #fffefb 0) 0 0 / 12px 10px repeat-x;
    filter: drop-shadow(0 3px 2px rgba(15, 23, 42, .08));
}

.mr-ticket-paper pre {
    margin: 0;
    overflow-x: auto;
    color: #111827;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre;
}

@keyframes mr-ticket-sort {
    from { opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 100% 0); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 -20px 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mr-ticket-paper { animation: none; }
}

/* ==========================================================================
   Écran Production — lecture à distance
   Un cuisinier lit ces bons à un ou deux mètres, en pleine action : on
   grossit ce qui se lit (destination, quantités, articles), on renforce les
   couleurs d'état, et on fait battre ce qui ne doit pas être manqué.
   ========================================================================== */

.mr-bon {
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 30px rgba(15, 23, 42, .08);
}

/* Bandeau d'état plein : la couleur se voit avant le texte. */
.mr-bon-statusbar {
    padding: .6rem .95rem;
    background: var(--bon-color);
    border-bottom: 0;
}

.mr-bon-status,
.mr-bon-number { color: #fff; }
.mr-bon-number { opacity: .85; font-size: .72rem; }
.mr-bon-status { font-size: .74rem; }

.mr-bon .card-body { padding: 1rem 1.05rem 1.05rem; }

.mr-bon-destination {
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.mr-bon-meta { font-size: .74rem; }

.mr-kds-chrono {
    padding: .4rem .6rem;
    font-size: .85rem;
}

.mr-kds-chrono strong { font-size: 1rem; }

.mr-kds-chrono.is-late {
    color: #fff;
    background: #f04438;
    border-color: #f04438;
    animation: mr-kds-battement 1.6s ease-in-out infinite;
}

.mr-bon-alert {
    padding: .6rem .7rem;
    font-size: .82rem;
}

.mr-bon-priority {
    color: #fff;
    background: linear-gradient(135deg, #f04438, #d92d20);
    border-color: transparent;
    letter-spacing: .06em;
}

.mr-bon-priority > span { color: #d92d20; background: #fff; }

.mr-bon-articles li {
    gap: .75rem;
    padding: .7rem 0;
    align-items: center;
}

.mr-bon-quantity {
    min-width: 2.6rem;
    min-height: 2.3rem;
    color: #fff;
    background: #182230;
    border-radius: .6rem;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.mr-bon-item { font-size: 1.12rem; color: #182230; }
.mr-bon-item > strong { font-weight: 800; }

.mr-bon-note {
    margin-top: .3rem;
    padding: .2rem .5rem;
    color: #92400e;
    background: #fff8e7;
    border-left-width: 3px;
    border-radius: 0 .35rem .35rem 0;
    font-size: .85rem;
    font-weight: 750;
}

.mr-bon-action .btn {
    min-height: 3.4rem;
    padding: .7rem 1rem;
    border-radius: .75rem;
    font-size: 1rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--bon-color) 30%, transparent);
}

.mr-bon-action .btn i { width: 1.8rem; height: 1.8rem; font-size: 1.05rem; }

/* Un bon en retard pulse doucement : on le repère dans une grille pleine. */
.mr-bon-retard {
    animation: mr-kds-alerte 2.4s ease-in-out infinite;
}

@keyframes mr-kds-battement {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, .45); }
    50% { box-shadow: 0 0 0 6px rgba(240, 68, 56, 0); }
}

@keyframes mr-kds-alerte {
    0%, 100% { box-shadow: 0 8px 28px rgba(240, 68, 56, .14); }
    50% { box-shadow: 0 0 0 2px rgba(240, 68, 56, .45), 0 12px 34px rgba(240, 68, 56, .28); }
}

@media (prefers-reduced-motion: reduce) {
    .mr-bon-retard, .mr-kds-chrono.is-late { animation: none; }
}

/* ==========================================================================
   Addition — lignes compactes
   Quantité à gauche, nom au centre, prix à droite, actions secondaires en
   petit dessous : sur un écran de 768 px de haut, on lit toute une table sans
   faire défiler l'addition.
   ========================================================================== */

.mr-cart-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .2rem .7rem;
    padding: .6rem 0;
}

.mr-cart-row-qty { padding-top: .05rem; }

.mr-cart-row .mr-cart-quantity { border-radius: .6rem; }
.mr-cart-row .mr-cart-quantity .btn { width: 1.9rem; height: 1.9rem; font-size: 1rem; }

.mr-cart-row .mr-cart-quantity .mr-quantite {
    min-width: 1.6rem;
    font-size: .85rem;
    font-weight: 850;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mr-cart-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 1.9rem;
    color: #fff;
    background: #475467;
    border-radius: .55rem;
    font-size: .85rem;
    font-weight: 850;
}

.mr-cart-row-info { min-width: 0; }

.mr-cart-row-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.9rem;
}

.mr-cart-row .mr-cart-line-photo { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; }

.mr-cart-row .mr-cart-line-name {
    color: #182230;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.2;
}

.mr-cart-row-sub {
    display: flex;
    align-items: center;
    min-height: 1.4rem;
}

.mr-cart-row .mr-cart-note {
    padding: .1rem .3rem;
    margin-left: -.3rem;
    color: #98a2b3;
    font-size: .72rem;
    font-weight: 650;
}

.mr-cart-row .mr-cart-note:hover { color: #b45309; }

.mr-cart-row .mr-cart-note-text { margin: .3rem 0 .1rem; }

.mr-cart-row .mr-cart-sent { margin: 0; font-size: .72rem; }

.mr-cart-row-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.mr-cart-row .mr-cart-line-price {
    min-height: 1.9rem;
    display: inline-flex;
    align-items: center;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.mr-cart-row .mr-cart-remove {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    color: #98a2b3;
    background: transparent;
    font-size: 1.05rem;
}

.mr-cart-row .mr-cart-remove:hover { color: #b42318; background: #fff1f0; }

/* Le total se lit en premier : plus grand, aligné sur des chiffres fixes. */
.mr-pos-totals { padding: .7rem 1.1rem; }

.mr-total-row.fs-5 {
    align-items: center;
    font-size: 1.25rem !important;
    font-variant-numeric: tabular-nums;
}

.mr-total-row.fs-5 span:last-child { color: #b45309; font-weight: 900; }

.mr-pos-cart-actions { gap: .45rem; padding: .75rem 1.1rem .9rem; }

/* Tablette : cibles tactiles plus larges, la règle d'origine visait l'ancien balisage. */
@media (max-width: 991.98px) {
    .mr-cart-row .mr-cart-quantity .btn { width: 2.5rem; height: 2.5rem; }
    .mr-cart-row .mr-cart-remove { width: 2.3rem; height: 2.3rem; min-width: 0; min-height: 0; }
    .mr-cart-row .mr-cart-note { min-height: 2rem; min-width: 0; }
}

/* ==========================================================================
   Caisse — prise de commande premium & pratique
   Objectif : voir un maximum de produits sans défiler, et que chaque geste
   soit confirmé à l'œil. En-tête resserré, rayonnage sans barre de défilement,
   tuiles compactes quand le catalogue n'a pas de photos, pastille de quantité
   sur les produits déjà pointés.
   ========================================================================== */

/* En-tête de commande plus bas : la place va aux produits. */
.mr-pos-page .mr-pos-commandbar { padding: .6rem .85rem; border-radius: .9rem; margin-bottom: .75rem !important; }
.mr-pos-page .mr-pos-commandbar .mr-pos-kicker { display: none; }
.mr-pos-page .mr-pos-commandbar h1 { font-size: 1.15rem; }
.mr-pos-page .mr-pos-back { width: 2.4rem; height: 2.4rem; flex-basis: 2.4rem; }

.mr-pos-page .mr-pos-catalog { padding: .85rem .95rem 1rem; }
.mr-pos-page .mr-pos-catalog > .mr-pos-section-heading { display: none; }
.mr-pos-page .mr-pos-search { margin-bottom: .6rem !important; }
.mr-pos-page .mr-pos-search .form-control { min-height: 44px; }

/* Rayonnage : défilement au doigt sans barre, fondu sur les bords. */
.mr-pos-page .mr-pos-categories {
    margin-bottom: .75rem !important;
    padding: .1rem .1rem .25rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.mr-pos-page .mr-pos-categories::-webkit-scrollbar { display: none; }
.mr-pos-page .mr-pos-category { min-height: 2.4rem; padding: .4rem .9rem; font-size: .8rem; }

.mr-pos-page .mr-pos-category.btn-dark {
    color: #fff;
    background: #111827;
    border-color: #111827;
    box-shadow: 0 6px 14px rgba(17, 24, 39, .18);
}

/* Tuiles compactes (catalogue sans photos) ------------------------------- */

.mr-pos-page .mr-produits.is-compact {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .55rem;
}

.mr-pos-page .mr-produits.is-compact .mr-produit {
    min-height: 5.9rem;
    height: auto;
    border-left: 4px solid var(--cat, #f59e0b);
}

.mr-pos-page .mr-produits.is-compact .mr-produit-visual { display: none; }
.mr-pos-page .mr-produits.is-compact .mr-produit-nom {
    display: -webkit-box;
    overflow: hidden;
    padding: .6rem .7rem 0;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mr-pos-page .mr-produits.is-compact .mr-produit-footer { padding: .2rem .55rem .5rem .7rem; }
.mr-pos-page .mr-produits.is-compact .mr-produit-indisponible { top: auto; bottom: .55rem; left: auto; right: 2.6rem; }

/* Pastille de quantité et retour visuel ------------------------------------ */

.mr-pos-page .mr-produit-qte {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 .35rem;
    color: #1a1204;
    background: #fbbf24;
    border-radius: 1rem;
    box-shadow: 0 3px 8px rgba(245, 158, 11, .4);
    font-size: .78rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.55rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mr-pos-page .mr-produit-qte[hidden] { display: none; }

.mr-pos-page .mr-produit.is-in-cart {
    background: #fffbeb;
    border-color: #fcd34d;
}

.mr-pos-page .mr-produits.is-compact .mr-produit.is-in-cart { border-left-color: #f59e0b; }

.mr-pos-page .mr-produit.is-pop { animation: mr-pos-pop .35s cubic-bezier(.22, .68, .28, 1.02); }

@keyframes mr-pos-pop {
    0% { transform: scale(1); }
    40% { transform: scale(.95); box-shadow: 0 0 0 3px rgba(245, 158, 11, .45); }
    100% { transform: scale(1); }
}

/* Le bouton de la barre latérale se range à gauche : à droite, il gênait
   le bouton « Encaisser » sur les écrans bas. */
.mr-header-toggle { right: auto; left: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
    .mr-pos-page .mr-produit.is-pop { animation: none; }
}

/* Écrans de service : toute la largeur disponible, plus de colonne bridée à
   1140 px — sur la caisse, chaque colonne gagnée est une rangée de produits. */
main.container-xl:has(> .mr-pos-page),
main.container-xl:has(> .mr-pos-floor),
main.container-xl:has(> .mr-kds-page) {
    max-width: none;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

/* Vider la file : action destructive, donc visuellement en retrait du bouton
   principal « Traiter la file », et rouge au survol. */
.mr-print-purge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 42px;
    padding: .55rem .9rem;
    color: #b42318;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #f5b7b2;
    border-radius: .7rem;
    font-size: .82rem;
    font-weight: 750;
}

.mr-print-purge:hover:not(:disabled) { color: #fff; background: #d92d20; border-color: #d92d20; }
.mr-print-purge:disabled { color: #98a2b3; background: rgba(255, 255, 255, .6); border-color: #e4e7ec; cursor: not-allowed; }

.mr-print-queue-tools { display: flex; align-items: center; gap: .75rem; }
.mr-print-queue-tools form { margin: 0; }
.mr-print-purge.is-small { min-height: 34px; padding: .35rem .7rem; font-size: .75rem; }

/* ==========================================================================
   À emporter — fenêtre du plan de salle
   La liste quitte le bas du plan (qu'elle repoussait hors de l'écran) pour
   une fenêtre : en cours et historique du jour, filtres, recherche, jours.
   ========================================================================== */

.mr-pos-takeaway-open {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 132px;
    padding: .5rem .8rem;
    color: #fff;
    text-align: left;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .75rem;
    transition: background .18s ease, border-color .18s ease;
}

.mr-pos-takeaway-open:hover { background: rgba(255, 255, 255, .14); border-color: rgba(251, 191, 36, .5); }
.mr-pos-takeaway-open small { display: block; color: #cbd5e1; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mr-pos-takeaway-open strong { display: block; font-size: .9rem; }

.mr-pos-takeaway-open-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #1a1204;
    background: #fbbf24;
    border-radius: .55rem;
    font-size: .95rem;
}

.mr-takeaway-modal .modal-content { overflow: hidden; border: 0; border-radius: 1rem; }
.mr-takeaway-modal .modal-header { align-items: flex-start; padding: 1rem 1.2rem .75rem; }
.mr-takeaway-modal .modal-title { margin: 0; font-size: 1.25rem; font-weight: 850; }

.mr-takeaway-head-actions { display: flex; align-items: center; gap: .75rem; }
.mr-takeaway-head-actions form { margin: 0; }
.mr-takeaway-head-actions .mr-btn-primary { min-height: 38px; padding: .4rem .85rem; font-size: .82rem; }

.mr-takeaway-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem 1.2rem;
    background: #f8fafc;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}

.mr-takeaway-filters { display: flex; flex-wrap: wrap; gap: .35rem; }

.mr-takeaway-filters button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    padding: .3rem .75rem;
    color: #475467;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 750;
}

.mr-takeaway-filters button em {
    min-width: 1.3rem;
    padding: 0 .3rem;
    color: #667085;
    background: #f2f4f7;
    border-radius: 1rem;
    font-size: .7rem;
    font-style: normal;
    text-align: center;
}

.mr-takeaway-filters button.is-active { color: #fff; background: #111827; border-color: #111827; }
.mr-takeaway-filters button.is-active em { color: #111827; background: #fbbf24; }

.mr-takeaway-search { display: flex; align-items: center; gap: .35rem; }

.mr-takeaway-search input {
    height: 34px;
    padding: 0 .6rem;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: .55rem;
    font-size: .8rem;
}

.mr-takeaway-search input[type="search"] { width: 13rem; }
.mr-takeaway-search input:focus { border-color: #f59e0b; outline: 0; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }

.mr-takeaway-day {
    width: 34px;
    height: 34px;
    color: #344054;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: .55rem;
    font-size: 1.1rem;
    line-height: 1;
}

.mr-takeaway-day:disabled { opacity: .4; }

.mr-takeaway-body { min-height: 16rem; max-height: 60vh; padding: .5rem 1.2rem; }

.mr-takeaway-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .2rem;
    border-bottom: 1px solid #f0f2f5;
    border-left: 3px solid transparent;
}

.mr-takeaway-row:last-child { border-bottom: 0; }
.mr-takeaway-row.is-en_cours { padding-left: .6rem; border-left-color: #f59e0b; }
.mr-takeaway-row.is-annulee { opacity: .65; }

.mr-takeaway-main { min-width: 0; }
.mr-takeaway-line1 { display: flex; align-items: center; gap: .5rem; }
.mr-takeaway-line1 strong { font-size: .95rem; font-weight: 850; }
.mr-takeaway-items { margin: .2rem 0 0; color: #344054; font-size: .84rem; }
.mr-takeaway-items em { color: #98a2b3; }
.mr-takeaway-meta { margin: .15rem 0 0; color: #98a2b3; font-size: .74rem; }
.mr-takeaway-motif { color: #b42318; }

.mr-takeaway-status {
    padding: .12rem .5rem;
    color: #b45309;
    background: #fff7e6;
    border-radius: 2rem;
    font-size: .68rem;
    font-weight: 800;
}

.mr-takeaway-status.is-payee { color: #067647; background: #ecfdf3; }
.mr-takeaway-status.is-annulee { color: #b42318; background: #fef3f2; }
.mr-takeaway-status.is-prete { color: #6d28d9; background: #f5f3ff; }

.mr-takeaway-end { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; }
.mr-takeaway-end b { font-size: 1rem; font-variant-numeric: tabular-nums; }

.mr-takeaway-action {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .3rem .8rem;
    color: #344054;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: .6rem;
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.mr-takeaway-action.is-primary { color: #1a1204; background: #fbbf24; border-color: #fbbf24; }
.mr-takeaway-action:hover { color: #111827; border-color: #f59e0b; }

.mr-takeaway-empty { margin: 3rem 0; color: #98a2b3; text-align: center; }

.mr-takeaway-foot { justify-content: space-between; color: #667085; font-size: .8rem; }
.mr-takeaway-print-state { margin: 0; font-weight: 700; }
.mr-takeaway-print-state.is-ok { color: #067647; }
.mr-takeaway-print-state.is-ko { color: #b42318; }

@media (max-width: 575.98px) {
    .mr-takeaway-search { width: 100%; }
    .mr-takeaway-search input[type="search"] { flex: 1 1 auto; width: auto; }
    .mr-takeaway-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .mr-takeaway-end { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   Plan de salle — beaucoup de tables
   Une salle qui grandit doit rester lisible sur un écran : grille qui
   s'adapte à la largeur, tuiles compactes par défaut, et une barre d'outils
   pour retrouver une table (numéro, état, salle) au lieu de faire défiler.
   ========================================================================== */

.mr-pos-floor .mr-table[hidden],
.mr-pos-floor .mr-pos-room[hidden] { display: none !important; }

/* Barre d'outils -------------------------------------------------------------- */

.mr-pos-floor .mr-pos-floor-toolbar { flex-wrap: wrap; gap: .75rem; margin: 1rem 0 .75rem; }

.mr-floor-tools {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.mr-floor-find {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.mr-floor-find span { position: absolute; left: .7rem; color: #98a2b3; font-size: 1.05rem; pointer-events: none; }

.mr-floor-find input {
    width: 9.5rem;
    height: 38px;
    padding: 0 .7rem 0 2rem;
    background: #fff;
    border: 1px solid #dfe4eb;
    border-radius: .7rem;
    font-size: .88rem;
    font-weight: 700;
}

.mr-floor-find input:focus { width: 11rem; border-color: #f59e0b; outline: 0; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); transition: width .15s ease; }

.mr-floor-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.mr-floor-chips button,
.mr-floor-rooms button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 38px;
    padding: .3rem .75rem;
    color: #475467;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 750;
    white-space: nowrap;
}

.mr-floor-chips i { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; }
.mr-floor-chips i.is-occupied { background: #f59e0b; }
.mr-floor-chips i.is-reserved { background: #8b5cf6; }
.mr-floor-chips i.is-cleaning { background: #94a3b8; }

.mr-floor-chips em,
.mr-floor-rooms em {
    min-width: 1.35rem;
    padding: 0 .35rem;
    color: #667085;
    background: #f2f4f7;
    border-radius: 1rem;
    font-size: .7rem;
    font-style: normal;
    text-align: center;
}

.mr-floor-chips button.is-active,
.mr-floor-rooms button.is-active { color: #fff; background: #111827; border-color: #111827; }

.mr-floor-chips button.is-active em,
.mr-floor-rooms button.is-active em { color: #111827; background: #fbbf24; }

.mr-floor-density {
    display: inline-flex;
    padding: .2rem;
    background: #eef1f5;
    border-radius: .7rem;
}

.mr-floor-density button {
    width: 2.1rem;
    height: 2rem;
    color: #667085;
    background: transparent;
    border: 0;
    border-radius: .5rem;
    font-size: 1rem;
}

.mr-floor-density button.is-active { color: #111827; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .1); }

.mr-floor-rooms {
    display: flex;
    gap: .4rem;
    margin: 0 0 1rem;
    padding-bottom: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.mr-floor-rooms::-webkit-scrollbar { display: none; }

.mr-floor-noresult { margin: 2.5rem 0; color: #98a2b3; text-align: center; font-weight: 600; }
.mr-floor-noresult[hidden] { display: none; }

.mr-pos-floor .mr-pos-room { margin-bottom: 1.1rem; }

/* Table trouvée par son numéro : elle s'allume. */
.mr-pos-floor .mr-table.is-match { box-shadow: 0 0 0 3px rgba(245, 158, 11, .55), 0 10px 24px rgba(245, 158, 11, .2); }

/* Grille : elle suit la largeur au lieu de 5 colonnes fixes. ---------------- */

.mr-pos-floor.is-confort .mr-tables:not(.is-plan) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .55rem; }

/* Tuile compacte : numéro, état, et l'essentiel de la commande. ------------- */

.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-lien {
    min-height: 0;
    gap: .3rem;
    padding: .55rem .65rem .6rem;
}

.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-help,
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-open,
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-footer { display: none; }

.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-status { font-size: .6rem; }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-time,
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-seats { font-size: .66rem; }

.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-id { gap: .45rem; margin: 0; }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-icon { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-icon svg { width: .95rem; height: .95rem; }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-numero { font-size: 1.35rem; }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-order-meta { font-size: .7rem; }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-total { font-size: .88rem; }

.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-inline-form { margin: .1rem -.65rem -.6rem; }
.mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-inline-form button { padding: .4rem .5rem; font-size: .68rem; }

@media (max-width: 767.98px) {
    .mr-floor-tools { justify-content: flex-start; }
    .mr-floor-find, .mr-floor-find input, .mr-floor-find input:focus { width: 100%; }
    .mr-floor-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .mr-pos-floor.is-compacte .mr-tables:not(.is-plan) { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* Téléphone : les actions de l'en-tête passent à la ligne au lieu d'être
   coupées, et les petites tuiles taisent le nombre de places. */
@media (max-width: 575.98px) {
    .mr-pos-floor .mr-pos-floor-actions { flex-wrap: wrap; width: 100%; }
    .mr-pos-floor .mr-pos-floor-actions > * { flex: 1 1 calc(50% - .5rem); }
    .mr-pos-floor .mr-pos-floor-actions form .mr-btn-primary { width: 100%; justify-content: center; }
    .mr-pos-floor.is-compacte .mr-tables:not(.is-plan) .mr-table-seats { display: none; }
}

/* ==========================================================================
   Réservations (plan de salle)
   ========================================================================== */

.mr-pos-takeaway-open.is-resa .mr-pos-takeaway-open-icon { background: #c4b5fd; }

/* Bouton 📅 sur une table libre : discret, dans le coin, sans gêner le toucher
   principal qui ouvre la table. */
.mr-pos-floor .mr-table { position: relative; }

.mr-table-reserve {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: .55rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    font-size: .85rem;
    opacity: .75;
    transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}

.mr-table-reserve:hover,
.mr-table-reserve:focus-visible { opacity: 1; border-color: #8b5cf6; transform: scale(1.06); }

/* Le bouton ne recouvre pas le pied « Nouvelle commande » en mode confort. */
.mr-pos-floor.is-confort .mr-table-reserve { bottom: auto; top: 2.2rem; }

/* Nom et heure de la réservation, sur la table réservée. */
.mr-table-resa {
    display: block;
    overflow: hidden;
    color: #6d28d9;
    font-size: .72rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fenêtre ---------------------------------------------------------------------- */

.mr-resa-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
    gap: 1.25rem;
    min-height: 22rem;
    padding: 1rem 1.2rem;
}

.mr-resa-list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.mr-resa-list-head strong { font-size: 1rem; font-weight: 850; text-transform: capitalize; }
.mr-resa-list-head span { color: #667085; font-size: .8rem; }

.mr-resa-row {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .75rem .25rem;
    border-bottom: 1px solid #f0f2f5;
}

.mr-resa-row:last-child { border-bottom: 0; }
.mr-resa-row.is-annulee,
.mr-resa-row.is-absente { opacity: .55; }

.mr-resa-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .4rem .2rem;
    background: #f5f3ff;
    border-radius: .65rem;
}

.mr-resa-time strong { color: #4c1d95; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mr-resa-time small { color: #8b5cf6; font-size: .66rem; font-weight: 700; }
.mr-resa-row.is-retard .mr-resa-time { background: #fef3f2; }
.mr-resa-row.is-retard .mr-resa-time strong { color: #b42318; }

.mr-resa-line1 { display: flex; align-items: center; gap: .5rem; }
.mr-resa-line1 strong { font-size: .95rem; }
.mr-resa-meta { margin: .15rem 0 0; color: #667085; font-size: .8rem; }
.mr-resa-meta a { color: #475467; font-weight: 700; text-decoration: none; }
.mr-resa-meta em { color: #b45309; }
.mr-resa-note { margin: .25rem 0 0; color: #92400e; font-size: .78rem; }

.mr-resa-status {
    padding: .12rem .5rem;
    color: #6d28d9;
    background: #f5f3ff;
    border-radius: 2rem;
    font-size: .66rem;
    font-weight: 800;
}

.mr-resa-status.is-bientot { color: #b45309; background: #fff7e6; }
.mr-resa-status.is-retard { color: #fff; background: #f04438; }
.mr-resa-status.is-arrivee { color: #067647; background: #ecfdf3; }
.mr-resa-status.is-annulee,
.mr-resa-status.is-absente { color: #667085; background: #f2f4f7; }

.mr-resa-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.mr-takeaway-action.is-danger { color: #b42318; border-color: #f5b7b2; }
.mr-takeaway-action.is-danger:hover { color: #fff; background: #d92d20; border-color: #d92d20; }

.mr-resa-form {
    display: grid;
    align-content: start;
    gap: .6rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: .9rem;
}

.mr-resa-form h6 { margin: 0 0 .2rem; font-size: .95rem; font-weight: 850; }
.mr-resa-form label { display: grid; gap: .2rem; margin: 0; }
.mr-resa-form label > span { color: #475467; font-size: .72rem; font-weight: 750; }

.mr-resa-form input,
.mr-resa-form select {
    height: 38px;
    padding: 0 .6rem;
    background: #fff;
    border: 1px solid #dfe4eb;
    border-radius: .55rem;
    font-size: .88rem;
}

.mr-resa-form input:focus,
.mr-resa-form select:focus { border-color: #8b5cf6; outline: 0; box-shadow: 0 0 0 3px rgba(139, 92, 246, .15); }
.mr-resa-form .mr-resa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mr-resa-form .mr-btn-primary { min-height: 42px; margin-top: .2rem; }
.mr-resa-error { margin: 0; color: #b42318; font-size: .8rem; font-weight: 700; }
.mr-resa-error[hidden] { display: none; }

@media (max-width: 991.98px) {
    .mr-resa-body { grid-template-columns: 1fr; }
    .mr-resa-form { order: -1; }
}

@media (max-width: 575.98px) {
    .mr-resa-row { grid-template-columns: 3.4rem minmax(0, 1fr); }
    .mr-resa-actions { grid-column: 1 / -1; justify-content: flex-start; }
}