@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');

/* LA CONGOLAISE — interface de gestion CHR */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, sans-serif;
    --font-display: 'Syne', 'Plus Jakarta Sans', sans-serif;

    --background: 38 33% 96%;
    --foreground: 172 24% 14%;
    --card: 0 0% 100%;
    --card-foreground: 172 24% 14%;
    --popover: 0 0% 100%;
    --popover-foreground: 172 24% 14%;
    --primary: 16 68% 43%;
    --primary-foreground: 0 0% 100%;
    --secondary: 37 22% 92%;
    --secondary-foreground: 172 20% 20%;
    --muted: 38 22% 93%;
    --muted-foreground: 171 10% 42%;
    --accent: 22 74% 94%;
    --accent-foreground: 16 66% 32%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --success: 152 60% 36%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 38 90% 16%;
    --info: 199 70% 42%;
    --border: 36 18% 86%;
    --input: 36 18% 82%;
    --ring: 16 68% 43%;
    --radius: 0.85rem;

    /* Legacy aliases used across templates */
    --dark: hsl(var(--foreground));
    --light: hsl(var(--muted));
    --white: hsl(var(--card));
    --shadow: 0 2px 8px hsl(172 24% 14% / 0.035), 0 14px 34px hsl(172 24% 14% / 0.045);
    --shadow-hover: 0 8px 30px hsl(172 24% 14% / 0.11);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background:
        radial-gradient(1200px 600px at 10% -10%, hsl(166 50% 92% / 0.7), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, hsl(40 40% 92% / 0.8), transparent 50%),
        hsl(var(--background));
    color: hsl(var(--foreground));
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

/* Navbar — shadcn header bar */
.navbar {
    background: hsl(var(--card) / 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--border));
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    min-width: max-content;
}

.logo {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--primary-foreground));
    background: hsl(var(--primary));
    width: 2.25rem;
    height: 2.25rem;
    border-radius: calc(var(--radius) - 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: hsl(var(--foreground));
}

.navbar-menu {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.navbar-menu a {
    text-decoration: none;
    color: hsl(var(--muted-foreground));
    padding: 0.45rem 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar-menu a:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.navbar-menu a.active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.navbar-toggle {
    display: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: hsl(var(--foreground));
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    padding: 0.4rem 0.75rem;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: max-content;
}

.user-badge {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.user-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Layout */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.page-header h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: hsl(var(--foreground));
}

.history-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Buttons — shadcn button */
.btn {
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background: hsl(166 72% 24%);
}

.btn-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--border));
}

.btn-secondary:hover {
    background: hsl(40 12% 90%);
}

.btn-success {
    background: hsl(var(--success));
    color: hsl(var(--success-foreground));
}

.btn-success:hover {
    filter: brightness(0.95);
}

.btn-danger {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

.btn-danger:hover {
    filter: brightness(0.95);
}

.btn-warning {
    background: hsl(var(--warning));
    color: hsl(var(--warning-foreground));
}

.btn-info {
    background: hsl(var(--info));
    color: #fff;
}

.btn-outline {
    background: transparent;
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

.btn-outline:hover {
    background: hsl(var(--accent));
}

.btn-ghost {
    background: transparent;
    color: hsl(var(--muted-foreground));
}

.btn-ghost:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.btn-block {
    width: 100%;
}

/* Cards */
.card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.card-header {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}

.card-header h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: hsl(var(--foreground));
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.45);
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.stat-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: fadeUp 0.45s ease both;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.stat-icon {
    font-size: 1.75rem;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) - 2px);
    background: hsl(var(--accent));
}

.stat-info h3 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: hsl(var(--foreground));
    margin-bottom: 0.15rem;
}

.stat-info p {
    color: hsl(var(--muted-foreground));
    font-size: 0.8rem;
    font-weight: 500;
}

.stat-card.success {
    border-left: 3px solid hsl(var(--success));
}

.stat-card.warning {
    border-left: 3px solid hsl(var(--warning));
}

.stat-card.info {
    border-left: 3px solid hsl(var(--info));
}

/* Tables */
.table-responsive {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table thead {
    background: hsl(var(--muted) / 0.6);
}

.table th {
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table th,
.table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border));
}

.table tbody tr {
    transition: background 0.12s ease;
}

.table tbody tr:hover {
    background: hsl(var(--muted) / 0.5);
}

.row-warning {
    background: hsl(38 92% 95%) !important;
}

/* Badges — shadcn badge */
.badge {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
}

.badge-en_cours,
.badge-warning {
    background: hsl(38 92% 94%);
    color: hsl(38 80% 28%);
    border-color: hsl(38 80% 80%);
}

.badge-preparee,
.badge-info,
.badge-partielle {
    background: hsl(199 70% 94%);
    color: hsl(199 70% 28%);
    border-color: hsl(199 50% 80%);
}

.badge-payee,
.badge-success,
.badge-servie,
.badge-prete {
    background: hsl(152 50% 92%);
    color: hsl(152 60% 24%);
    border-color: hsl(152 40% 75%);
}

.badge-annulee,
.badge-danger {
    background: hsl(0 72% 95%);
    color: hsl(0 65% 35%);
    border-color: hsl(0 50% 82%);
}

.badge-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--border));
}

.badge-livraison {
    background: hsl(166 50% 92%);
    color: hsl(166 72% 22%);
    border-color: hsl(166 40% 72%);
}

/* Forms — shadcn input */
.form-group {
    margin-bottom: 1.15rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
}

.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid hsl(var(--input));
    border-radius: calc(var(--radius) - 2px);
    font-family: inherit;
    font-size: 0.875rem;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder,
input::placeholder {
    color: hsl(var(--muted-foreground));
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Alerts */
.alert {
    padding: 0.85rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.alert-success {
    background: hsl(152 50% 94%);
    color: hsl(152 60% 22%);
    border-color: hsl(152 40% 78%);
}

.alert-error {
    background: hsl(0 72% 96%);
    color: hsl(0 65% 32%);
    border-color: hsl(0 50% 84%);
}

.alert-info {
    background: hsl(199 70% 95%);
    color: hsl(199 70% 28%);
    border-color: hsl(199 50% 82%);
}

/* Modal — shadcn dialog */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    inset: 0;
    width: 100%;
    height: 100%;
    background: hsl(240 10% 8% / 0.45);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 2px);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px hsl(240 10% 8% / 0.2);
    animation: fadeUp 0.25s ease;
}

.modal-header {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid hsl(var(--border));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

.close {
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    border: none;
    background: transparent;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.close:hover {
    color: hsl(var(--destructive));
    background: hsl(0 72% 96%);
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid hsl(var(--border));
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Login — 21st-inspired card */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, hsl(166 55% 40% / 0.35), transparent),
        radial-gradient(ellipse 50% 40% at 100% 100%, hsl(40 50% 70% / 0.25), transparent),
        linear-gradient(160deg, hsl(166 30% 12%) 0%, hsl(240 10% 10%) 45%, hsl(166 20% 16%) 100%);
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(hsl(0 0% 100% / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, hsl(0 0% 100% / 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    pointer-events: none;
}

.login-container {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.55s ease both;
}

.login-box {
    background: hsl(0 0% 100% / 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid hsl(0 0% 100% / 0.2);
    padding: 2rem 1.75rem;
    border-radius: 1.25rem;
    box-shadow: 0 24px 64px hsl(0 0% 0% / 0.35);
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-brand .logo {
    width: 3rem;
    height: 3rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    animation: fadeUp 0.5s 0.05s ease both;
}

.login-box h1 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: hsl(var(--foreground));
    margin-bottom: 0.35rem;
    animation: fadeUp 0.5s 0.1s ease both;
}

.login-box .login-subtitle,
.login-box h2 {
    font-size: 0.9rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0;
    animation: fadeUp 0.5s 0.15s ease both;
}

.login-box form {
    margin-top: 1.75rem;
    animation: fadeUp 0.5s 0.2s ease both;
}

.login-box .btn-primary {
    margin-top: 0.5rem;
    height: 2.75rem;
    border-radius: calc(var(--radius) + 2px);
    font-size: 0.95rem;
}

.login-info {
    text-align: center;
    margin-top: 1.25rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.8rem;
}

/* Commandes */
.commandes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.commande-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: fadeUp 0.4s ease both;
}

.commande-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.commande-header {
    padding: 0.9rem 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid hsl(var(--border));
    gap: 0.5rem;
}

.commande-header.statut-en_cours {
    background: hsl(38 92% 95%);
}

.commande-header.statut-preparee,
.commande-header.statut-partielle {
    background: hsl(199 70% 95%);
}

.commande-header.statut-payee,
.commande-header.statut-servie {
    background: hsl(152 50% 94%);
}

.commande-body {
    padding: 1.15rem;
}

.commande-footer {
    padding: 0.85rem 1.15rem;
    border-top: 1px solid hsl(var(--border));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: hsl(var(--muted) / 0.35);
}

.commande-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Empty / loading */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: hsl(var(--muted-foreground));
    border: 1px dashed hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card) / 0.6);
}

.empty-state p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.loading {
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
    padding: 1.5rem;
    text-align: center;
}

.text-danger {
    color: hsl(var(--destructive));
}

.text-success {
    color: hsl(var(--success));
}

.text-muted {
    color: hsl(var(--muted-foreground));
}

.input-qty {
    width: 4rem;
    padding: 0.4rem 0.5rem;
    text-align: center;
}

.tot {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 1.05rem;
}

.mobile-payment-panel {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border));
}

.mobile-payment-panel h3 {
    margin-bottom: 0.65rem;
}

.mobile-payment-panel .form-row {
    margin: 0.9rem 0;
}

.mobile-payment-panel #mobile-payment-state {
    margin: 0.8rem 0 0.5rem;
    color: hsl(var(--muted-foreground));
}

/* Layout helpers */
.row-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.filters-form {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    padding: 1rem;
    border-radius: var(--radius);
}

.periode-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bg-warning {
    background: hsl(38 92% 95%) !important;
}

.bg-success {
    background: hsl(152 50% 94%) !important;
}

canvas {
    max-height: 400px;
}

/* Plan de salle — table tiles */
.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.85rem;
}

.table-tile {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.15rem 0.9rem;
    text-align: center;
    cursor: pointer;
    background: hsl(var(--card));
    box-shadow: var(--shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    animation: fadeUp 0.35s ease both;
}

.table-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.table-tile h3 {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.table-tile small {
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
}

.table-tile p {
    margin-top: 0.65rem;
    font-size: 0.8rem;
}

.table-tile.libre {
    border-color: hsl(152 45% 70%);
    background: linear-gradient(180deg, hsl(152 50% 97%), hsl(var(--card)));
}

.table-tile.libre p strong {
    color: hsl(var(--success));
}

.table-tile.occupee {
    border-color: hsl(38 80% 70%);
    background: linear-gradient(180deg, hsl(38 92% 96%), hsl(var(--card)));
}

.table-tile.occupee p strong {
    color: hsl(38 80% 32%);
}

.table-tile.attente_caisse {
    border-color: hsl(18 85% 60%);
    background: linear-gradient(180deg, hsl(18 90% 96%), hsl(var(--card)));
}

.table-tile.attente_caisse p strong {
    color: hsl(18 80% 35%);
}

/* Commande creation */
.commande-creation {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.produits-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.produit-item.produit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    transition: background 0.12s ease;
}

.produit-item.produit-row:first-child {
    border-radius: var(--radius) var(--radius) 0 0;
}

.produit-item.produit-row:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
    border-bottom: none;
}

.produit-row-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.produit-row-info .produit-nom {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.produit-row-info .produit-prix {
    color: hsl(var(--primary));
    font-weight: 600;
}

.produit-row-info .produit-stock {
    color: hsl(var(--muted-foreground));
    font-size: 0.85rem;
}

.produit-item.produit-row:hover {
    background: hsl(var(--muted) / 0.55);
}

.produit-row-action .btn {
    white-space: nowrap;
}

/* Notifications — toast shadcn-like */
.notification {
    padding: 0.85rem 1.15rem;
    border-radius: calc(var(--radius) - 2px);
    box-shadow: var(--shadow-hover);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    animation: slideInRight 0.3s ease-out;
    max-width: min(360px, calc(100vw - 2rem));
}

.notification-success {
    background: hsl(152 50% 94%);
    color: hsl(152 60% 22%);
    border-color: hsl(152 40% 75%);
}

.notification-error {
    background: hsl(0 72% 96%);
    color: hsl(0 65% 32%);
    border-color: hsl(0 50% 82%);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(-24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInMenu {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Progress */
.progress-bar {
    width: 100%;
    height: 1.25rem;
    background: hsl(var(--muted));
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.7rem;
    transition: width 0.5s ease;
    border-radius: 999px;
    background: hsl(var(--primary));
}

/* Legacy tenant cards (unused but kept) */
.tenants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tenant-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    width: 100%;
}

.tenant-card:hover {
    border-color: hsl(var(--primary));
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.badge-gratuit { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge-basique { background: hsl(199 70% 94%); color: hsl(199 70% 28%); }
.badge-premium { background: hsl(38 92% 94%); color: hsl(38 80% 28%); }

.hide-mobile { }
.show-mobile { display: none; }
.hide-tablet { }
.show-tablet { display: none; }

/* Responsive */
@media (max-width: 1024px) {
    .row-2-cols,
    .commande-creation {
        grid-template-columns: 1fr;
    }

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

    .produit-item.produit-row {
        flex-direction: column;
        align-items: flex-start;
        border: 1px solid hsl(var(--border));
        border-radius: var(--radius);
        padding: 0.9rem;
    }

    .produit-row-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .hide-tablet { display: none; }
    .show-tablet { display: block; margin-top: 0.3rem; }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .navbar {
        flex-wrap: wrap;
    }

    .navbar-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .navbar-menu {
        width: 100%;
        display: none;
        flex-direction: column;
        gap: 0.35rem;
        margin-top: 0.5rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    .navbar-menu.show {
        display: flex;
        max-height: 480px;
        opacity: 1;
    }

    .navbar-menu li {
        opacity: 0;
        animation: slideInMenu 0.25s ease forwards;
    }

    .navbar-menu.show li:nth-child(1) { animation-delay: 0.04s; }
    .navbar-menu.show li:nth-child(2) { animation-delay: 0.08s; }
    .navbar-menu.show li:nth-child(3) { animation-delay: 0.12s; }
    .navbar-menu.show li:nth-child(4) { animation-delay: 0.16s; }
    .navbar-menu.show li:nth-child(5) { animation-delay: 0.2s; }
    .navbar-menu.show li:nth-child(6) { animation-delay: 0.24s; }
    .navbar-menu.show li:nth-child(7) { animation-delay: 0.28s; }
    .navbar-menu.show li:nth-child(8) { animation-delay: 0.32s; }

    .navbar-user {
        width: 100%;
        justify-content: space-between;
    }

    .hide-mobile { display: none; }
    .show-mobile { display: inline; }

    .table-compact th,
    .table-compact td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h1 {
        font-size: 1.4rem;
    }

    .commandes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 1.25rem 1rem 2rem;
    }

    .periode-selector {
        flex-wrap: wrap;
    }

    .commande-actions {
        flex-direction: column;
        width: 100%;
    }

    .commande-actions .btn {
        width: 100%;
    }
}

/* Identité CHR : espace de travail */
body:not(.login-page) {
    background: hsl(var(--background));
}

body:not(.login-page) .navbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 264px;
    height: 100vh;
    height: 100dvh;
    padding: 1.75rem 1rem 1rem;
    background: #172b28;
    color: #f8f5ec;
    border: 0;
    box-shadow: 10px 0 32px rgb(20 38 35 / 0.08);
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    z-index: 1000;
}

body:not(.login-page) .navbar-brand {
    padding: 0.25rem 0.7rem 1.8rem;
    gap: 0.75rem;
    min-width: 0;
}

body:not(.login-page) .logo,
.login-brand .logo {
    background: #c8623a;
    color: #fff9f0;
    border-radius: 0.8rem;
    width: 2.7rem;
    height: 2.7rem;
    font-size: 0.82rem;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
}

body:not(.login-page) .brand-name {
    color: #fff9f0;
    font-size: 0.94rem;
    line-height: 1.2;
    letter-spacing: 0.015em;
    white-space: normal;
}

body:not(.login-page) .brand-name::after {
    content: 'GESTION CHR';
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    color: #99aaa1;
}

body:not(.login-page) .navbar-menu {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.1rem;
    padding: 0.65rem 0 1rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    overflow: visible;
    max-height: none;
    opacity: 1;
}

body:not(.login-page) .navbar-menu::before {
    content: 'ESPACE DE TRAVAIL';
    color: #91a49a;
    padding: 0.45rem 0.8rem 0.8rem;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

body:not(.login-page) .navbar-menu li {
    width: 100%;
    opacity: 1;
    animation: none;
}

body:not(.login-page) .navbar-menu a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.58rem 0.8rem;
    border-radius: 0.65rem;
    color: #cad5ce;
    font-size: 0.84rem;
    font-weight: 600;
}

/* Pictogrammes Lucide choisis dans le catalogue 21st.dev */
.ui-icon {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    vertical-align: -0.14em;
}

body:not(.login-page) .navbar-menu .ui-icon {
    width: 1.15rem;
    height: 1.15rem;
    opacity: 0.85;
}

body:not(.login-page) .navbar-menu a.active .ui-icon { opacity: 1; }

.stat-icon .ui-icon { width: 1.28rem; height: 1.28rem; }
.card-header h2 .ui-icon { margin-right: 0.5rem; }
.btn .ui-icon { margin-right: 0.3rem; }
.btn[aria-label] .ui-icon { margin-right: 0; }
.btn-icon {
    width: 2.6rem;
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0;
    gap: 0;
}
.btn-icon.btn-sm { width: 2.3rem; min-width: 2.3rem; min-height: 2.3rem; }
.btn-icon .ui-icon { width: 1.15rem; height: 1.15rem; margin: 0; }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.badge .ui-icon { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.login-box .btn .ui-icon { margin-left: 0.55rem; margin-right: 0; }

body:not(.login-page) .navbar-menu a:hover {
    background: rgb(255 255 255 / 0.09);
    color: #fff;
}

body:not(.login-page) .navbar-menu a.active {
    background: #c8623a;
    color: #fff;
    box-shadow: 0 7px 18px rgb(10 22 18 / 0.15);
}


body:not(.login-page) .navbar-user {
    width: 100%;
    min-width: 0;
    margin-top: auto;
    padding: 1rem 0.65rem 0;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
}

body:not(.login-page) .navbar-user::before {
    content: 'SESSION ACTIVE';
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #91a49a;
}

body:not(.login-page) .user-name {
    color: #f8f5ec;
    font-weight: 600;
    overflow-wrap: anywhere;
}

body:not(.login-page) .navbar-user .btn {
    width: 100%;
    justify-content: flex-start;
    background: rgb(255 255 255 / 0.08);
    color: #f7e5dd;
    border: 1px solid rgb(255 255 255 / 0.13);
}

body:not(.login-page) .navbar-user .btn:hover {
    background: rgb(255 255 255 / 0.16);
}

body:not(.login-page) .container {
    width: calc(100% - 264px);
    max-width: none;
    margin: 0 0 0 264px;
    padding: 2.3rem clamp(1.35rem, 3vw, 3.5rem) 4rem;
}

.page-header {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid hsl(var(--border));
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: clamp(1.65rem, 2.3vw, 2.15rem);
    letter-spacing: -0.045em;
}

.page-eyebrow {
    display: block;
    color: hsl(var(--primary));
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.page-description {
    color: hsl(var(--muted-foreground));
    font-size: 0.87rem;
    margin-top: 0.4rem;
}

.btn {
    min-height: 2.6rem;
    padding: 0.65rem 1rem;
    border-radius: 0.62rem;
}

.btn.btn-icon,
.btn.btn-icon.btn-sm {
    padding: 0;
    gap: 0;
}

.btn-primary:hover {
    background: #a94828;
}

.btn-secondary:hover {
    background: #e9e2d7;
}

.card,
.commande-card,
.table-tile,
.stat-card {
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.card-header {
    padding: 1.25rem 1.5rem;
    background: #fff;
}

.card-body {
    padding: 1.5rem;
}

.stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.stat-card {
    min-height: 158px;
    padding: 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    border-left: 1px solid hsl(var(--border));
}

.stat-card.success,
.stat-card.info,
.stat-card.warning {
    border-left: 1px solid hsl(var(--border));
}

.stat-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: #f7e9df;
    color: #b24f2d;
    font-size: 1.25rem;
}

.stat-card.success .stat-icon { background: #e6f3eb; color: #2e865a; }
.stat-card.warning .stat-icon { background: #fff0d6; color: #ab6a18; }
.stat-card.info .stat-icon { background: #e8eff3; color: #426b7c; }

.stat-info h3 {
    font-size: clamp(1.55rem, 2vw, 2rem);
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.stat-info p {
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.table thead { background: #f8f6f2; }
.table th { color: #758078; font-weight: 800; }
.table th,
.table td { padding: 0.95rem 1rem; }
.table tbody tr:hover { background: #fbf8f3; }

.table-tile {
    min-height: 145px;
    text-align: left;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.table-tile h3 { margin-bottom: 0.45rem; }
.table-tile p { margin-top: auto; padding-top: 0.8rem; }
.table-tile.libre { background: #fff; border-color: #d7e8da; }
.table-tile.occupee { background: #fffaf2; border-color: #ead8b5; }
.table-tile.attente_caisse { background: #fff5f0; border-color: #e9c5b3; }

.modal-content { border-radius: 1.1rem; }
.form-group input,
.form-group select,
.form-group textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
select,
textarea { min-height: 2.75rem; }

/* Connexion : accueil de la marque */
.login-page {
    display: grid;
    place-items: center;
    padding: clamp(1rem, 2.5vw, 2.5rem);
    background: #eeeae2;
    overflow: auto;
}

.login-page::before { display: none; }

.login-shell {
    width: min(1180px, 100%);
    min-height: min(690px, calc(100vh - 5rem));
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    overflow: hidden;
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 28px 80px rgb(24 43 40 / 0.16);
    position: relative;
    z-index: 1;
}

.login-showcase {
    position: relative;
    padding: clamp(2rem, 4vw, 3.8rem);
    color: #fff9ef;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at 90% 78%, #7c492e 0, transparent 33%), linear-gradient(145deg, #14362f 0%, #1b2c29 56%, #321e1b 100%);
}

.login-showcase::before {
    content: '';
    position: absolute;
    width: 540px;
    height: 540px;
    border: 1px solid rgb(255 255 255 / 0.13);
    border-radius: 50%;
    right: -235px;
    bottom: -250px;
    box-shadow: 0 0 0 65px rgb(255 255 255 / 0.025), 0 0 0 135px rgb(255 255 255 / 0.025);
    z-index: -1;
}

.showcase-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.showcase-brand-mark {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    background: #c8623a;
    color: #fff;
    font-size: 0.83rem;
    font-weight: 800;
}

.showcase-brand small {
    display: block;
    color: #b8c7bc;
    font-family: var(--font-sans);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-top: 0.25rem;
}

.showcase-copy { max-width: 510px; }
.showcase-copy .page-eyebrow { color: #e9a47a; }
.showcase-copy h2 {
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 4vw, 4.5rem);
    line-height: 1.06;
    letter-spacing: -0.055em;
    margin: 0.65rem 0 1.3rem;
}

.showcase-copy h2 em { color: #e9a47a; font-style: normal; }
.showcase-copy p { max-width: 390px; color: #c9d4cb; font-size: 0.95rem; line-height: 1.7; }
.showcase-modules { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.75rem; }
.showcase-modules span {
    border: 1px solid rgb(255 255 255 / 0.21);
    color: #f1e9db;
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.showcase-footer { color: #aebfb2; font-size: 0.75rem; letter-spacing: 0.02em; }

.login-container {
    width: 100%;
    max-width: none;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 5vw, 4.5rem);
    animation: none;
}

.login-box {
    width: min(390px, 100%);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.login-brand { align-items: flex-start; text-align: left; margin-bottom: 2rem; }
.login-brand .logo { width: 3rem; height: 3rem; margin-bottom: 1.7rem; }
.login-box h1 { font-size: 2.15rem; line-height: 1.15; animation: none; }
.login-box .login-subtitle { font-size: 0.9rem; line-height: 1.6; animation: none; }
.login-box form { margin-top: 2rem; animation: none; }
.login-box .btn-primary { height: 3rem; width: 100%; margin-top: 0.8rem; }
.login-box .form-group label { font-weight: 700; font-size: 0.78rem; }
.login-box input { background: #faf9f6; }
.login-note { margin-top: 1.6rem; color: #7d8980; font-size: 0.76rem; }

@media (max-width: 1100px) {
    body:not(.login-page) .navbar {
        position: sticky;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 4.8rem;
        padding: 0.65rem 1.2rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
    }

    body:not(.login-page) .navbar-brand { padding: 0; }
    body:not(.login-page) .navbar-toggle { display: inline-flex; margin-left: auto; color: #fff; background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.18); }
    body:not(.login-page) .navbar-menu {
        display: none;
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        right: 0;
        width: 100%;
        max-height: min(75vh, 620px);
        padding: 0.75rem 1.2rem 1.1rem;
        overflow-y: auto;
        margin: 0;
        background: #172b28;
        border-top: 1px solid rgb(255 255 255 / 0.12);
        box-shadow: 0 16px 26px rgb(13 28 24 / 0.24);
    }

    body:not(.login-page) .navbar-menu.show { display: flex; opacity: 1; }
    body:not(.login-page) .navbar-user { width: auto; padding: 0; margin: 0; border: 0; flex-direction: row; align-items: center; }
    body:not(.login-page) .navbar-user::before { display: none; }
    body:not(.login-page) .navbar-user .btn { width: auto; }
    body:not(.login-page) .container { width: 100%; margin-left: 0; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-showcase { min-height: 270px; padding: 1.6rem 2rem; }
    .showcase-copy h2 { font-size: 2rem; margin-bottom: 0.6rem; }
    .showcase-copy p,
    .showcase-footer { display: none; }
    .showcase-modules { margin-top: 0.8rem; }
    .login-container { padding: 2.2rem 2rem 2.6rem; }
    .login-brand .logo { display: none; }
}

@media (max-width: 620px) {
    body:not(.login-page) .navbar { flex-wrap: nowrap; gap: 0.6rem; padding: 0.6rem 0.9rem; }
    body:not(.login-page) .brand-name { font-size: 0.8rem; }
    body:not(.login-page) .brand-name::after { font-size: 0.52rem; }
    body:not(.login-page) .navbar-user .user-name { display: none; }
    body:not(.login-page) .navbar-user .btn { padding: 0.5rem 0.65rem; font-size: 0.72rem; }
    body:not(.login-page) .container { padding: 1.5rem 1rem 3rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 125px; }
    .page-header { align-items: stretch; }
    .page-header > div:last-child { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .login-page { padding: 0; background: #fff; }
    .login-shell { min-height: 100vh; border-radius: 0; box-shadow: none; }
    .login-showcase { min-height: 240px; padding: 1.5rem; }
    .showcase-copy h2 { font-size: 1.8rem; }
    .showcase-modules span { font-size: 0.57rem; padding: 0.34rem 0.55rem; }
    .login-container { padding: 2rem 1.5rem 2.5rem; }
    .login-box h1 { font-size: 1.8rem; }
}

/* MaishaPay waiting overlay (caisse) */
.maisha-pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 0% / 0.45);
  backdrop-filter: blur(2px);
}
.maisha-pay-overlay[hidden] { display: none !important; }
.maisha-pay-card {
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 20px 50px hsl(0 0% 0% / 0.2);
}
.maisha-pay-card h3 { margin: 1rem 0 0.4rem; font-size: 1.2rem; }
.maisha-pay-card p { margin: 0; color: hsl(var(--muted-foreground)); line-height: 1.45; }
.maisha-pay-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  animation: maishaSpin 0.8s linear infinite;
}
.maisha-pay-overlay.is-success .maisha-pay-spinner,
.maisha-pay-overlay.is-error .maisha-pay-spinner {
  animation: none;
  border: none;
  width: 48px;
  height: 48px;
  background: center / contain no-repeat;
}
.maisha-pay-overlay.is-success .maisha-pay-spinner {
  background-color: hsl(142 70% 40%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px #fff;
}
.maisha-pay-overlay.is-error .maisha-pay-spinner {
  background-color: hsl(0 70% 50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px #fff;
}
.mobile-payment-panel .btn-block { width: 100%; margin-top: 0.75rem; }
.mobile-payment-panel .help-text {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}
@keyframes maishaSpin {
  to { transform: rotate(360deg); }
}

/* ===== Espace caissier enrichi ===== */
.caisse-page {
  background:
    radial-gradient(1200px 480px at 8% -10%, hsl(16 68% 43% / 0.12), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, hsl(172 30% 28% / 0.08), transparent 55%),
    hsl(var(--background));
}
.caisse-shell { padding-bottom: 3.5rem; }
.caisse-hero {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: end;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.caisse-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  font-weight: 700;
}
.caisse-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
}
.caisse-lead {
  margin: 0.45rem 0 0;
  max-width: 36rem;
  color: hsl(var(--muted-foreground));
}
.caisse-hero-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
}
.caisse-search input {
  min-width: min(260px, 70vw);
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: hsl(var(--card));
}
.caisse-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: hsl(16 68% 43% / 0.12);
  color: hsl(var(--primary));
  font-size: 0.75rem;
  font-weight: 700;
}
.caisse-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.caisse-stat {
  background: hsl(var(--card) / 0.92);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  padding: 1rem 1.05rem;
  box-shadow: var(--shadow);
  animation: fadeUp 0.45s ease both;
}
.caisse-stat:nth-child(2) { animation-delay: 0.05s; }
.caisse-stat:nth-child(3) { animation-delay: 0.1s; }
.caisse-stat:nth-child(4) { animation-delay: 0.15s; }
.caisse-stat-label {
  display: block;
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.35rem;
}
.caisse-stat strong {
  display: block;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.caisse-stat small {
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}
.caisse-stat-muted { opacity: 0.92; }
.caisse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
  gap: 1.1rem;
  align-items: start;
}
.caisse-section-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.caisse-section-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.caisse-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.caisse-tab {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.caisse-tab.is-active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.caisse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
}
.caisse-grid.is-refreshing { opacity: 0.65; transition: opacity 0.2s ease; }
.caisse-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 168px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: fadeUp 0.4s ease both;
}
.caisse-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.caisse-card.is-urgent {
  border-color: hsl(16 68% 43% / 0.45);
  box-shadow: 0 10px 28px hsl(16 68% 43% / 0.12);
}
.caisse-card-head {
  padding: 1rem 1.05rem 0.7rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.caisse-card-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
.caisse-card-head h3 { margin: 0; font-size: 1.35rem; }
.caisse-card-head p { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.9rem; }
.caisse-card-foot {
  margin-top: auto;
  padding: 0.85rem 1.05rem 1rem;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.caisse-card-total span {
  display: block;
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
}
.caisse-card-total strong { font-size: 1.05rem; }
.caisse-side {
  background: hsl(var(--card) / 0.8);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 6px);
  padding: 1rem;
  box-shadow: var(--shadow);
  position: sticky;
  top: 5.5rem;
}
.caisse-recent { display: flex; flex-direction: column; gap: 0.55rem; }
.caisse-recent-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius);
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
}
.caisse-recent-item span,
.caisse-recent-meta span {
  display: block;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}
.caisse-recent-meta { text-align: right; }
.caisse-empty, .caisse-empty-side {
  padding: 1.5rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card) / 0.5);
}
.caisse-empty h3 { margin: 0 0 0.35rem; color: hsl(var(--foreground)); }
.caisse-ticket-modal { max-width: 720px; width: min(720px, 96vw); }
.caisse-ticket-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.caisse-ticket-table-wrap {
  max-height: 280px;
  overflow: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.caisse-ticket-total {
  margin: 0.9rem 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: hsl(16 68% 43% / 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.caisse-ticket-total strong { font-size: 1.2rem; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
@media (max-width: 980px) {
  .caisse-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caisse-layout { grid-template-columns: 1fr; }
  .caisse-side { position: static; }
}
@media (max-width: 560px) {
  .caisse-stats { grid-template-columns: 1fr; }
}

/* Caissier CHR — dashboard / historique / clôture */
.caisse-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.caisse-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 0.25rem;
}
.caisse-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  min-height: 180px;
  padding: 0.5rem 0.25rem 0;
  overflow-x: auto;
}
.caisse-bar-item {
  flex: 1 0 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 36px;
}
.caisse-bar-track {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  background: hsl(var(--muted) / 0.35);
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
}
.caisse-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, hsl(16 68% 48%), hsl(16 68% 38%));
  border-radius: 8px 8px 0 0;
  transition: height 0.35s ease;
}
.caisse-bar-item span { font-size: 0.72rem; font-weight: 600; }
.caisse-bar-item small { color: hsl(var(--muted-foreground)); font-size: 0.7rem; }
.caisse-filters {
  display: flex;
  gap: 0.75rem;
  align-items: end;
  flex-wrap: wrap;
  padding: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.caisse-filters .form-group { margin: 0; min-width: 160px; }
.caisse-cloture-sheet { margin-top: 0.5rem; }
.caisse-subtitle { margin: 1.4rem 0 0.7rem; font-size: 1.05rem; }
.caisse-alert {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: hsl(38 92% 94%);
  border: 1px solid hsl(38 80% 80%);
}
.caisse-ok {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: hsl(152 45% 94%);
  border: 1px solid hsl(152 35% 78%);
}
@media print {
  .navbar, .caisse-hero-actions, .page-header .caisse-hero-actions { display: none !important; }
  .caisse-page { background: #fff !important; }
  .content-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}
@media (max-width: 980px) {
  .caisse-dash-grid { grid-template-columns: 1fr; }
}

/* Caissier — profil / compte */
.caisse-profil-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.caisse-profil-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.35);
  border: 1px solid hsl(var(--border));
}
.caisse-profil-meta dt {
  margin: 0;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.caisse-profil-meta dd {
  margin: 0.2rem 0 0;
  font-weight: 600;
}
.caisse-profil-form .form-group { margin-bottom: 0.95rem; }
.caisse-profil-form .btn { margin-top: 0.25rem; }
a.caisse-user-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
a.caisse-user-link:hover { color: hsl(var(--primary)); text-decoration: underline; }
@media (max-width: 900px) {
  .caisse-profil-grid { grid-template-columns: 1fr; }
  .caisse-profil-meta { grid-template-columns: 1fr; }
}