/* app/static/style.css */

body {
    background-color: #f8f9fa;
}

.seat-card {
    border-radius: 0.75rem;
    min-height: 82px;
    transition: transform 0.12s ease-in-out;
}

.seat-card:hover {
    transform: translateY(-2px);
}

.legend-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0.25rem;
    margin-right: 0.35rem;
    vertical-align: -2px;
}

.seat-free {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.seat-vip {
    background-color: #cff4fc;
    border: 1px solid #9eeaf9;
    color: #055160;
}

.seat-reserved {
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    color: #664d03;
}

.seat-sold {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.seat-blocked {
    background-color: #e2e3e5;
    border: 1px solid #d3d6d8;
    color: #41464b;
}

.ticket-sheet {
    max-width: 820px;
}

.ticket-print {
    border-radius: 1rem;
}

@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .navbar-nav {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn {
        width: 100%;
    }

    .table-responsive {
        font-size: 0.92rem;
    }

    .seat-card {
        min-height: 72px;
        font-size: 0.9rem;
    }

    .ticket-print .display-6 {
        font-size: 1.8rem;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    nav,
    .btn,
    .alert,
    .d-print-none {
        display: none !important;
    }

    body {
        background: white;
    }

    .ticket-sheet {
        max-width: 100%;
    }

    .ticket-print {
        border: 2px solid #000 !important;
        box-shadow: none !important;
        break-inside: avoid;
        margin: 0;
    }
}