#view-product {

    $input-border: #b5bcc3;
    $checkbox-border: #6c757d;
    $primary: #4c8bf5;
    $row-odd: #f6f7f9;
    $row-even: #ffffff;

    .table {

        td {
            &.text-center {
                vertical-align: middle;
            }

            &:first-child {
                font-weight: 500;
                padding-left: 12px;
            }

            .form-control {
                display: inline-block;
                width: 60px;
                height: 28px;
                padding: 2px 6px;
                font-size: 12px;
                text-align: center;

                background-color: #fff;
                border: 1px solid $input-border;
                border-radius: 4px;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

                &:focus {
                    border-color: $primary;
                    box-shadow: 0 0 0 2px rgba($primary, 0.15);
                    outline: none;
                }
            }

            .form-check-input {
                display: inline-block;
                width: 16px;
                height: 16px;
                cursor: pointer;

                background-color: #fff;
                border: 1px solid $checkbox-border;

                &:checked {
                    background-color: $primary;
                    border-color: $primary;
                }
            }
        }

        th {
            text-align: center;
            font-weight: 600;

            &:first-child {
                text-align: left;
            }
        }
    }

    .table-striped > tbody > tr {
        &:nth-of-type(odd) {
            background-color: $row-odd;
        }

        &:nth-of-type(even) {
            background-color: $row-even;
        }
    }
}




#ticket-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;

    &.active {
        display: flex;
    }

    #ticket-lightbox-img {
        max-width: 90%;
        max-height: 90vh;
        border-radius: 6px;
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
    }
}

.ticket-attachment-thumbnail {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
    margin: 4px;
    transition: opacity 0.2s ease, transform 0.2s ease;

    &:hover {
        opacity: 0.85;
        transform: scale(1.05);
    }
}