/* Custom styles for admin interface */
.content-wrapper {
    background-color: #f4f6f9;
}

.card {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    margin-bottom: 1rem;
}

.card-header {
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: .75rem 1.25rem;
}

.btn-primary {
    background-color: #007bff;
    border-color: #0056b3;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #003d80;
}

.table thead th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

.table td, .table th {
    padding: .75rem;
    vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   Dashboard — extrait depuis resources/views/dashboard.blade.php
   (v5.2.0 : sorti du <style> inline pour mutualisation + cache)
   ════════════════════════════════════════════════════════════════ */
        .info-box {
            border-radius: var(--wz-card-radius, 4px);
            position: relative;
            display: block;
            min-height: 125px;
            background: #fff;
            width: 100%;
            box-shadow: var(--wz-card-shadow, 0 1px 1px rgba(0,0,0,0.1));
            margin-bottom: 15px;
        }
        .info-box.bg-primary { background-color: var(--wz-dashboard-primary, #4e73df) !important; }
        .info-box.bg-success { background-color: var(--wz-dashboard-success, #1cc88a) !important; }
        .info-box.bg-warning { background-color: var(--wz-dashboard-warning, #f6c23e) !important; }
        .info-box.bg-danger { background-color: var(--wz-dashboard-danger, #e74a3b) !important; }
        .info-box.bg-info { background-color: var(--wz-dashboard-info, #17a2b8) !important; }
        
        .info-box-content {
            padding: 5px 10px;
            margin-left: 0;
            text-align: center;
            color: #fff;
        }
        
        .info-box-text {
            display: block;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-transform: uppercase;
            margin-top: 10px;
        }
        
        .info-box-number {
            display: block;
            font-weight: bold;
            font-size: 24px;
            margin-top: 5px;
        }

        .more-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 3px 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            display: block;
            z-index: 10;
            background: rgba(0, 0, 0, 0.1);
            text-decoration: none;
        }
        
        .more-info:hover {
            color: #fff;
            background: rgba(0, 0, 0, 0.15);
            text-decoration: none;
        }

        @media (max-width: 575.98px) {
            .info-box-breakdown {
                grid-template-columns: 1fr;
            }

            .info-box-breakdown-item {
                text-align: center;
            }

            .info-box-breakdown-label {
                justify-content: center;
            }
        }

        @media (min-width: 992px) {
            .dashboard-top-row.has-ticket-card > .dashboard-top-card {
                -ms-flex: 0 0 20%;
                flex: 0 0 20%;
                max-width: 20%;
            }
            .dashboard-top-row.has-sms-card > .dashboard-top-card {
                -ms-flex: 0 0 16.666667%;
                flex: 0 0 16.666667%;
                max-width: 16.666667%;
            }
        }

        .tutorial-hint {
            border: 1px dashed rgba(18, 52, 86, 0.24);
            background: linear-gradient(135deg, rgba(18, 52, 86, 0.06), rgba(27, 143, 114, 0.08));
            border-radius: 14px;
            padding: 1rem 1.1rem;
            margin-bottom: 1rem;
        }

        .tutorial-hint-title {
            font-weight: 700;
            color: #123456;
            margin-bottom: .25rem;
        }

        .tutorial-hint p {
            margin: 0;
            color: #4b5b6b;
        }


/* ════════════════════════════════════════════════════════════════
   Routers index — extrait depuis resources/views/routers/index.blade.php
   ════════════════════════════════════════════════════════════════ */
.router-status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}
.router-status-indicator.online {
    background-color: #f59e0b;
    animation: pulse 2s infinite;
}
.router-status-indicator.offline {
    background-color: #dc3545;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.sync-progress {
    width: 20px;
    height: 20px;
}
.router-card {
    transition: all 0.3s ease;
}
.router-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.action-btn {
    margin: 1px;
}
.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}
.hotspot-config-cell .form-control {
    min-width: 180px;
}
.hotspot-config-actions {
    display: flex;
    gap: 6px;
}
.hotspot-config-actions .btn {
    min-width: 34px;
}
.router-kv {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 8px 12px;
}
.router-kv dt {
    margin: 0;
    font-weight: 600;
    color: #6c757d;
}
.router-kv dd {
    margin: 0;
}
.router-panel {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
    padding: 14px;
    margin-bottom: 14px;
}
.router-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.router-actions .btn {
    width: 100%;
}
.router-image-stage {
    margin-top: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    padding: 12px;
    text-align: center;
}
.router-image-stage .router-image {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
}
.router-image-placeholder {
    color: #6b7280;
    font-size: 12px;
    padding: 32px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
}
.router-monitoring-card {
    margin-top: 10px;
    background: #fff;
    border: 1px solid #d1ecf1;
    border-radius: 12px;
    padding: 10px;
}
.router-monitoring-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.router-monitoring-head h6 {
    margin: 0;
    color: #0c5460;
    font-weight: 600;
}
.router-monitoring-body .table td {
    padding: 0.15rem 0.25rem;
    font-size: 12px;
}
.router-monitoring-body .progress {
    height: 18px;
}
.ops-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.ops-health-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}
.ops-health-item .label {
    font-size: 12px;
    color: #6b7280;
    display: block;
}
.ops-health-item .value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}
@media (max-width: 992px) {
    .ops-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Ops health bar (refactor v5.3) ─────────────────────────────────── */
.ops-health-bar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.04);
}
.ops-health-bar__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border-left-width: 4px;
}
.kpi-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
}
.kpi-card__body {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.kpi-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 2px;
}
.kpi-card__value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}
.kpi-card--success { border-left-color: #16a34a; }
.kpi-card--success .kpi-card__icon { background: #dcfce7; color: #15803d; }
.kpi-card--warning { border-left-color: #f59e0b; }
.kpi-card--warning .kpi-card__icon { background: #fef3c7; color: #b45309; }
.kpi-card--danger { border-left-color: #dc2626; }
.kpi-card--danger .kpi-card__icon { background: #fee2e2; color: #b91c1c; }
.kpi-card--info { border-left-color: #2563eb; }
.kpi-card--info .kpi-card__icon { background: #dbeafe; color: #1d4ed8; }
.kpi-card--muted { border-left-color: #cbd5e1; }

/* ── Router panel (refactor v5.3) ───────────────────────────────────── */
.router-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.router-panel__head .router-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.router-panel__head .router-actions .btn {
    width: auto;
}
.router-panel__body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    margin-top: 12px;
}
@media (max-width: 992px) {
    .router-panel__body {
        grid-template-columns: 1fr;
    }
}

/* Hotspot sync bar */
.router-hotspot-sync {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}
.router-hotspot-sync__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.router-hotspot-sync__dest { color: #475569; font-size: 13px; }
.router-hotspot-sync__status { display: flex; align-items: center; gap: 6px; }
.router-hotspot-sync__form { display: flex; gap: 6px; margin: 0 0 0 auto; }

/* Info grid 3 cols */
.router-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1200px) {
    .router-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
    .router-info-grid { grid-template-columns: 1fr; }
}
.router-info-group {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
}
.router-info-group__title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.router-info-group dl {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 4px 8px;
    margin: 0;
    font-size: 13px;
}
.router-info-group dt {
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}
.router-info-group dd {
    margin: 0;
    color: #111827;
    word-break: break-word;
}

/* Router state (image + monitoring) */
.router-state {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.router-state__image {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    padding: 12px;
    text-align: center;
}
.router-state__image .router-image {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
}
.router-state__monitoring {
    background: #ffffff;
    border: 1px solid #d1ecf1;
    border-radius: 12px;
    padding: 10px 12px;
}


/* ════════════════════════════════════════════════════════════════
   Vouchers index (header tools) — extrait depuis vouchers/index.blade.php
   ════════════════════════════════════════════════════════════════ */
    .voucher-sort-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: inherit;
        text-decoration: none;
        white-space: nowrap;
    }
    .voucher-sort-link:hover {
        color: #007bff;
        text-decoration: none;
    }
    .voucher-summary-row .small-box {
        margin-bottom: 16px;
        border-radius: .25rem;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        overflow: hidden;
        min-height: 120px;
    }
    .voucher-summary-row .small-box .inner {
        padding: 12px;
        position: relative;
        z-index: 1;
    }
    .voucher-summary-row .small-box h3 {
        font-size: 1.6rem;
        margin-bottom: 4px;
        white-space: nowrap;
    }
    .voucher-summary-row .small-box p {
        margin-bottom: 0;
        font-size: .92rem;
    }
    .voucher-summary-row .small-box .icon {
        top: 14px;
        right: 14px;
        font-size: 38px;
        opacity: .28;
        max-width: 44%;
        overflow: hidden;
        color: rgba(255, 255, 255, .82);
    }
    .voucher-summary-row .small-box .icon i {
        transform: none;
        line-height: 1;
    }
    .voucher-low-stock {
        margin-bottom: 16px;
        border-radius: 12px;
        border: 1px solid rgba(246, 194, 62, 0.28);
        background: rgba(246, 194, 62, 0.08);
        padding: 12px 14px;
    }

/* ════════════════════════════════════════════════════════════════
   Vouchers index (ticket templates + print preview)
   ════════════════════════════════════════════════════════════════ */
    .voucher-code-container {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .voucher-code {
        position: relative;
        cursor: pointer;
        padding: 2px 6px;
        background: #f8f9fa;
        border-radius: 3px;
    }

    .voucher-code .dots {
        display: inline;
    }

    .voucher-code .actual-code {
        display: none;
        user-select: all;
    }

    .voucher-code:hover .dots {
        display: none;
    }

    .voucher-code:hover .actual-code {
        display: inline;
    }

    .voucher-code .dots,
    .voucher-code .actual-code {
        transition: all 0.2s ease;
    }

    .voucher-code:hover {
        background: #e9ecef;
    }

    .table-warning {
        background-color: #fff3cd !important;
    }

    .table-secondary {
        background-color: #e2e3e5 !important;
    }

    #showVoucherModal .modal-dialog {
        max-width: 760px;
    }

    #show-voucher-ticket-preview {
        min-height: 320px;
        width: 100%;
        align-items: flex-start !important;
    }

    #show-voucher-ticket-preview .ticket-template-preview-shell {
        padding: 1rem;
        border-radius: 22px;
        background: linear-gradient(180deg, #fffdf8 0%, #fff7ed 100%);
        border: 1px solid rgba(245, 158, 11, 0.18);
    }

    #show-voucher-ticket-preview .ticket-template-preview-card {
        width: 190px;
        margin: 0 auto;
        padding: 8px;
        border: 2px solid #111827;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        position: relative;
        font-family: Arial, sans-serif;
    }

    #show-voucher-ticket-preview .ticket-template-preview-badge {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--ticket-primary);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    #show-voucher-ticket-preview .ticket-template-preview-header {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 0 4px;
        background: #abb2b9;
        border-radius: 8px;
        margin-bottom: 8px;
        border-bottom: 2px solid var(--ticket-primary);
    }

    #show-voucher-ticket-preview .ticket-template-preview-logo {
        max-height: 72px;
        max-width: 100%;
        object-fit: contain;
        margin-bottom: 2px;
    }

    #show-voucher-ticket-preview .ticket-template-preview-number {
        font-size: 10px;
        color: #475569;
    }

    #show-voucher-ticket-preview .ticket-template-preview-credentials {
        background: #f8f8f8;
        padding: 6px;
        border-radius: 8px;
        margin: 6px 0;
        text-align: center;
    }

    #show-voucher-ticket-preview .ticket-template-preview-label,
    #show-voucher-ticket-preview .ticket-template-preview-mini-label {
        font-size: 10px;
        color: #111827;
        text-transform: uppercase;
        margin-bottom: 3px;
        font-weight: 700;
    }

    #show-voucher-ticket-preview .ticket-template-preview-value {
        padding: 6px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-weight: 700;
        font-size: 12px;
        background: #fff;
        margin-bottom: 6px;
        text-align: center;
        letter-spacing: 0.5px;
        font-family: monospace;
    }

    #show-voucher-ticket-preview .ticket-template-preview-qr {
        height: 72px;
        width: 72px;
        margin: 6px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
        font-size: 10px;
        font-weight: 700;
        color: #64748b;
    }

    #show-voucher-ticket-preview .ticket-template-preview-qr svg,
    #show-voucher-ticket-preview .ticket-template-preview-qr img {
        width: 100%;
        height: 100%;
        display: block;
    }

    #show-voucher-ticket-preview .ticket-template-preview-package {
        margin: 10px 0;
        padding: 8px;
        border: 1px solid var(--ticket-primary);
        border-radius: 8px;
        background: #fff;
    }

    #show-voucher-ticket-preview .ticket-template-preview-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 8px;
    }

    #show-voucher-ticket-preview .ticket-template-preview-grid > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 34px;
    }

    #show-voucher-ticket-preview .ticket-template-preview-mini-value {
        font-size: 10px;
        font-weight: 700;
        color: #111827;
        text-align: center;
        width: 100%;
    }

    #show-voucher-ticket-preview .ticket-template-preview-price {
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--ticket-primary);
        margin: 8px 0 2px;
    }

    #show-voucher-ticket-preview .ticket-template-preview-plan {
        text-align: center;
        font-size: 10px;
        font-weight: 600;
        color: #333;
    }

    #show-voucher-ticket-preview .ticket-template-preview-login {
        text-align: center;
        font-size: 10px;
        color: #000;
        padding: 6px;
        background: #f8f8f8;
        border-radius: 6px;
        margin: 8px 0;
        word-break: break-word;
    }

    #show-voucher-ticket-preview .ticket-template-preview-footer {
        text-align: center;
        font-size: 9px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed #ddd;
        color: #666;
    }

    #show-voucher-ticket-preview .ticket-template-preview-phone {
        color: var(--ticket-primary);
        font-weight: 700;
        margin-bottom: 4px;
    }

    /* Ticket Compact */
    #show-voucher-ticket-preview .ticket-compact-shell { padding: 1rem; border-radius: 16px; background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); }
    #show-voucher-ticket-preview .ticket-compact-card { width: 220px; padding: 8px 10px; border: 1.5px solid #333; border-radius: 4px; font-family: 'Courier New', monospace; background: #fff; margin: 0 auto; font-size: 10px; position: relative; }
    #show-voucher-ticket-preview .ticket-compact-used { opacity: 0.5; }
    #show-voucher-ticket-preview .ticket-compact-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #999; }
    #show-voucher-ticket-preview .ticket-compact-logo { max-height: 24px; max-width: 44px; object-fit: contain; }
    #show-voucher-ticket-preview .ticket-compact-plan { font-weight: 700; font-size: 11px; flex: 1; text-align: right; }
    #show-voucher-ticket-preview .ticket-compact-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
    #show-voucher-ticket-preview .ticket-compact-code { font-size: 15px; font-weight: 700; letter-spacing: 1px; flex: 1; }
    #show-voucher-ticket-preview .ticket-compact-qr { width: 56px; height: 56px; }
    #show-voucher-ticket-preview .ticket-compact-qr svg, #show-voucher-ticket-preview .ticket-compact-qr img { width: 100%; height: 100%; display: block; }
    #show-voucher-ticket-preview .ticket-compact-details { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-top: 1px dashed #999; border-bottom: 1px dashed #999; font-size: 9px; justify-content: center; }
    #show-voucher-ticket-preview .ticket-compact-sep { color: #ccc; }
    #show-voucher-ticket-preview .ticket-compact-price { font-weight: 700; }
    #show-voucher-ticket-preview .ticket-compact-footer { text-align: center; font-size: 8px; color: #666; margin-top: 4px; word-break: break-all; }

    /* Ticket Modern Card */
    #show-voucher-ticket-preview .ticket-modern-shell { padding: 1rem; border-radius: 16px; background: linear-gradient(180deg, #f0f0ff 0%, #e8e0f0 100%); }
    #show-voucher-ticket-preview .ticket-modern-card { width: 240px; border-radius: 12px; font-family: 'Segoe UI', Arial, sans-serif; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); margin: 0 auto; overflow: hidden; position: relative; }
    #show-voucher-ticket-preview .ticket-modern-used { opacity: 0.55; }
    #show-voucher-ticket-preview .ticket-modern-header { background: linear-gradient(135deg, var(--ticket-primary) 0%, color-mix(in srgb, var(--ticket-primary) 60%, #000) 100%); color: #fff; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
    #show-voucher-ticket-preview .ticket-modern-brand { display: flex; align-items: center; gap: 8px; }
    #show-voucher-ticket-preview .ticket-modern-logo { max-height: 30px; max-width: 48px; object-fit: contain; border-radius: 4px; }
    #show-voucher-ticket-preview .ticket-modern-plan-name { font-size: 12px; font-weight: 600; }
    #show-voucher-ticket-preview .ticket-modern-price-tag { text-align: right; }
    #show-voucher-ticket-preview .ticket-modern-price-amount { font-size: 18px; font-weight: 700; }
    #show-voucher-ticket-preview .ticket-modern-price-currency { font-size: 10px; opacity: 0.8; }
    #show-voucher-ticket-preview .ticket-modern-body { padding: 12px 14px; }
    #show-voucher-ticket-preview .ticket-modern-code-section { text-align: center; margin-bottom: 10px; }
    #show-voucher-ticket-preview .ticket-modern-code-label { font-size: 9px; text-transform: uppercase; color: #999; letter-spacing: 1px; }
    #show-voucher-ticket-preview .ticket-modern-code-value { font-size: 18px; font-weight: 700; font-family: 'Courier New', monospace; letter-spacing: 2px; color: #333; padding: 4px 0; border-bottom: 2px solid var(--ticket-primary); }
    #show-voucher-ticket-preview .ticket-modern-qr-section { text-align: center; }
    #show-voucher-ticket-preview .ticket-modern-qr { width: 76px; height: 76px; margin: 6px auto; }
    #show-voucher-ticket-preview .ticket-modern-qr svg, #show-voucher-ticket-preview .ticket-modern-qr img { width: 100%; height: 100%; display: block; }
    #show-voucher-ticket-preview .ticket-modern-qr-hint { font-size: 8px; color: #aaa; }
    #show-voucher-ticket-preview .ticket-modern-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 14px; background: #f7f8fc; }
    #show-voucher-ticket-preview .ticket-modern-spec { text-align: center; }
    #show-voucher-ticket-preview .ticket-modern-spec-icon { font-size: 14px; }
    #show-voucher-ticket-preview .ticket-modern-spec-label { font-size: 8px; color: #999; text-transform: uppercase; }
    #show-voucher-ticket-preview .ticket-modern-spec-value { font-size: 10px; font-weight: 600; color: #333; }
    #show-voucher-ticket-preview .ticket-modern-footer { padding: 8px 14px; text-align: center; font-size: 9px; color: #888; border-top: 1px solid #eee; }
    #show-voucher-ticket-preview .ticket-modern-login { word-break: break-all; }
    #show-voucher-ticket-preview .ticket-modern-support { color: var(--ticket-primary); font-weight: 600; margin-top: 2px; }
    #show-voucher-ticket-preview .ticket-modern-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); font-size: 28px; font-weight: 900; color: rgba(220,38,38,0.3); pointer-events: none; letter-spacing: 4px; }

    /* Ticket Recu Thermique */
    #show-voucher-ticket-preview .ticket-receipt-shell { padding: 1rem; border-radius: 16px; background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%); }
    #show-voucher-ticket-preview .ticket-receipt-card { width: 190px; padding: 10px; border: 1px solid #ddd; font-family: 'Courier New', monospace; background: #fff; margin: 0 auto; font-size: 10px; position: relative; }
    #show-voucher-ticket-preview .ticket-receipt-used { opacity: 0.5; }
    #show-voucher-ticket-preview .ticket-receipt-header { text-align: center; padding-bottom: 4px; }
    #show-voucher-ticket-preview .ticket-receipt-logo { max-height: 36px; max-width: 90px; object-fit: contain; margin: 0 auto 4px; display: block; }
    #show-voucher-ticket-preview .ticket-receipt-divider { text-align: center; color: #ccc; font-size: 9px; letter-spacing: -0.5px; margin: 4px 0; }
    #show-voucher-ticket-preview .ticket-receipt-section { text-align: center; padding: 4px 0; }
    #show-voucher-ticket-preview .ticket-receipt-plan { font-size: 12px; font-weight: 700; text-transform: uppercase; }
    #show-voucher-ticket-preview .ticket-receipt-price { font-size: 16px; font-weight: 700; margin-top: 2px; }
    #show-voucher-ticket-preview .ticket-receipt-code-section { text-align: center; padding: 6px 0; }
    #show-voucher-ticket-preview .ticket-receipt-code-label { font-size: 9px; text-transform: uppercase; color: #666; letter-spacing: 1px; }
    #show-voucher-ticket-preview .ticket-receipt-code { font-size: 17px; font-weight: 900; letter-spacing: 2px; padding: 4px; border: 1.5px dashed #333; margin-top: 2px; }
    #show-voucher-ticket-preview .ticket-receipt-qr { width: 70px; height: 70px; margin: 6px auto; }
    #show-voucher-ticket-preview .ticket-receipt-qr svg, #show-voucher-ticket-preview .ticket-receipt-qr img { width: 100%; height: 100%; display: block; }
    #show-voucher-ticket-preview .ticket-receipt-table { width: 100%; border-collapse: collapse; }
    #show-voucher-ticket-preview .ticket-receipt-td-label { font-size: 9px; color: #666; text-align: left; padding: 2px 0; }
    #show-voucher-ticket-preview .ticket-receipt-td-value { font-size: 10px; font-weight: 700; text-align: right; padding: 2px 0; }
    #show-voucher-ticket-preview .ticket-receipt-footer { text-align: center; padding-top: 4px; font-size: 9px; color: #666; }
    #show-voucher-ticket-preview .ticket-receipt-login { word-break: break-all; margin-bottom: 2px; }
    #show-voucher-ticket-preview .ticket-receipt-phone { font-weight: 700; color: #333; }
    #show-voucher-ticket-preview .ticket-receipt-thanks { font-style: italic; margin-top: 2px; }
    #show-voucher-ticket-preview .ticket-receipt-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 24px; font-weight: 900; color: rgba(220,38,38,0.25); pointer-events: none; letter-spacing: 3px; }