.appsupport-overlay {

    position: fixed;

    inset: 0;

    background: var(--overlay, rgba(46, 20, 0, 0.55));

    z-index: 1050;

}



.appsupport-slide-panel {

    position: fixed;

    top: 0;

    right: -50vw;

    width: 50vw;

    min-width: 380px;

    max-width: 100vw;

    height: 100vh;

    z-index: 1055;

    background: var(--bg-1, #FFF7ED);

    border-left: 1px solid var(--border, #E8B870);

    box-shadow: -8px 0 28px var(--shadow-lg, rgba(74, 34, 0, 0.18));

    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.appsupport-slide-header {

    padding: 0.85rem 1rem;

    border-bottom: 1px solid var(--border, #E8B870);

    background: var(--gradient, linear-gradient(135deg, #9A5A17 0%, #C47A1E 58%, #E8B870 100%));

    color: var(--white, #fff);

    flex-shrink: 0;

}



.appsupport-slide-header h6 {

    color: var(--white, #fff);

    font-weight: 600;

    font-size: 1rem;

}



.appsupport-slide-header .btn-close-panel {

    width: 2rem;

    height: 2rem;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.2);

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s ease;

}



.appsupport-slide-header .btn-close-panel:hover {

    background: rgba(255, 255, 255, 0.35);

    color: #fff;

}



.appsupport-slide-body {

    flex: 1;

    overflow: auto;

    background: var(--bg-1, #FFF7ED);

    color: var(--text-1, #2E1400);

}



#appSupportTabs {
    border-bottom: 2px solid var(--border, #E8B870);
    background: var(--bg-3, #FAE0B8);
    padding: 0.5rem 0.75rem 0 !important;
}

#appSupportTabs .nav-item {
    margin-bottom: -2px;
}

#appSupportTabs .nav-link {
    color: var(--primary, #5C2E0A) !important;
    background: var(--bg-2, #fff) !important;
    border: 1px solid var(--border, #E8B870) !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    margin-right: 0.35rem;
    opacity: 1;
}

#appSupportTabs .nav-link:not(.active) {
    background: #fff !important;
    color: var(--primary, #5C2E0A) !important;
    box-shadow: 0 1px 3px rgba(46, 20, 0, 0.08);
}

#appSupportTabs .nav-link:hover:not(.active) {
    background: var(--primary-soft, #FAE0B8) !important;
    border-color: var(--primary, #5C2E0A) !important;
}

#appSupportTabs .nav-link.active {
    color: var(--white, #fff) !important;
    background: var(--primary, #5C2E0A) !important;
    border-color: var(--primary, #5C2E0A) !important;
    border-bottom-color: var(--primary, #5C2E0A) !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(46, 20, 0, 0.18);
}



.appsupport-form-card {

    background: var(--bg-2, #fff);

    border: 1px solid var(--border-light, #F0CC90);

    border-radius: var(--radius-lg, 12px);

    padding: 1rem;

    box-shadow: 0 2px 8px var(--shadow, rgba(46, 20, 0, 0.08));

}



.appsupport-slide-body .form-label {

    color: var(--text-2, #5C2E0A);

    font-weight: 500;

    margin-bottom: 0.35rem;

}



.appsupport-slide-body .form-control,

.appsupport-slide-body .form-select {

    background: var(--sinput-bg, #fff);

    border: 1px solid var(--border, #E8B870);

    color: var(--text-1, #2E1400);

    border-radius: var(--radius, 8px);

}



.appsupport-slide-body .form-control:focus,

.appsupport-slide-body .form-select:focus {

    border-color: var(--primary, #5C2E0A);

    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb, 92, 46, 10), 0.15);

}



.appsupport-slide-body .form-control[readonly] {

    background: var(--bg-3, #FAE0B8);

    opacity: 0.85;

}



.appsupport-url-row {

    display: flex;

    gap: 0.5rem;

    align-items: stretch;

}



.appsupport-url-row .form-control {

    flex: 1;

    min-width: 0;

}



.appsupport-url-row .btn-fill-url {

    flex-shrink: 0;

    white-space: nowrap;

    border-color: var(--border, #E8B870);

    color: var(--primary, #5C2E0A);

    background: var(--primary-soft, #FAE0B8);

    font-size: 0.8rem;

}



.appsupport-url-row .btn-fill-url:hover {

    background: var(--bg-4, #F5C98A);

    border-color: var(--primary, #5C2E0A);

    color: var(--primary-hover, #4A2200);

}



.appsupport-field-hint {

    font-size: 0.75rem;

    color: var(--text-3, #7A3E14);

    margin-top: 0.25rem;

}



#btnAppSupportSubmit {

    background: var(--gradient-primary-135, linear-gradient(135deg, #5C2E0A 0%, #C47A1E 100%));

    border: 1px solid var(--primary, #5C2E0A);

    color: var(--white, #fff);

    font-weight: 600;

    padding: 0.65rem 1rem;

    border-radius: var(--radius, 8px);

    transition: transform 0.15s ease, box-shadow 0.15s ease;

}



#btnAppSupportSubmit:hover:not(:disabled) {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(var(--primary-rgb, 92, 46, 10), 0.28);

    color: var(--white, #fff);

}



#btnAppSupportSubmit:disabled {

    opacity: 0.65;

}



#appSupportDevMsg {

    background: var(--primary-soft, #FAE0B8);

    border: 1px solid var(--border, #E8B870);

    color: var(--text-1, #2E1400);

}



#tblAppSupportMyTickets {

    background: var(--bg-2, #fff);

    border-radius: var(--radius, 8px);

    overflow: hidden;

}



#tblAppSupportMyTickets thead th {

    background: var(--bg-3, #FAE0B8);

    color: var(--text-2, #5C2E0A);

    border-bottom: 2px solid var(--border, #E8B870);

    font-weight: 600;

    font-size: 0.8rem;

}



#tblAppSupportMyTickets tbody td {

    color: var(--text-1, #2E1400);

    border-color: var(--border-light, #F0CC90);

    vertical-align: middle;

    font-size: 0.85rem;

}



.appsupport-thumb {

    width: 72px;

    height: 72px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid var(--border, #E8B870);

}



.appsupport-desc-cell {

    max-width: 180px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



[data-theme="dark"] .appsupport-slide-panel,

[data-theme="dark"] .appsupport-slide-body {

    background: var(--bg-2, #241003);

}



[data-theme="dark"] .appsupport-form-card {

    background: var(--bg-3, #351A07);

    border-color: var(--border, #7A3E14);

}



[data-theme="dark"] #appSupportTabs {

    background: var(--bg-3, #351A07);

}



@media (max-width: 991.98px) {

    .appsupport-slide-panel {

        width: 100vw;

        right: -100vw;

        min-width: 0;

    }



    .appsupport-url-row {

        flex-direction: column;

    }

}