:root {
    --badge-submitted-bg: #17a2b8;
    --badge-assigned-bg: #6f42c1;
    --badge-in_progress-bg: #fd7e14;
    --badge-resolved-bg: #28a745;
    --badge-reopened-bg: #dc3545;
    --badge-closed-bg: #6c757d;
    --badge-question-bg: #007bff;
    --badge-problem-bg: #dc3545;
    --badge-change-bg: #6f42c1;
    --badge-feature-bg: #28a745;
    --empty-state-bg: #f8f9fa;
}

/* Support module styling */
.support-container {
    padding: 2rem 0;
}

.support-title {
    margin-bottom: 2rem;
    color: var(--color-primary);
}

/* Button styling is now inherited from global buttons.css */
.action-button {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.1rem;
}

.action-button .material-symbols-outlined {
    margin-right: 0.5rem;
}

/* FAQ Styling */
.faq-search-container {
    margin-top: 2rem;
}

.faq-search-container h2 {
    margin-bottom: 1.5rem;
    color: var(--color-secondary);
}

.faq-search-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.faq-search-bar input {
    flex-grow: 3;
}

.faq-search-bar select {
    flex-grow: 1;
}

.faq-search-bar button {
    min-width: 80px;
}

.faq-search-bar #faq-clear-btn {
    background-color: var(--color-secondary-light, #e9ecef);
    color: var(--color-text-dark, #343a40);
    border: 1px solid var(--color-border, #ced4da);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: white;
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    padding: 1.2rem;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
    flex-grow: 1;
}

.faq-toggle {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: white;
}

.faq-item.active .faq-answer {
    padding: 1.2rem;
    max-height: 1000px;
}

.faq-category {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border-light);
}

.category-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 16px;
    background-color: var(--color-accent-light);
    color: var(--color-accent-dark);
    font-size: 0.85rem;
    font-weight: 500;
}

.faq-no-results {
    text-align: center;
    padding: 2rem;
    color: var(--color-gray);
    font-style: italic;
}

.support-cta-card {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border-light, #e9ecef);
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.support-cta-card p {
    margin: 0;
}

.support-cta-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* My Requests */
.my-requests-section {
    margin: 2rem 0;
}

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

.my-requests-header h2 {
    margin: 0;
    color: var(--color-secondary);
}

.my-requests-section .request-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.my-requests-section .request-card {
    background-color: white;
    border: 1px solid var(--color-border-light, #e9ecef);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.my-requests-section .request-card:hover {
    box-shadow: var(--shadow-md);
}

.my-requests-section .request-card.is-hidden {
    display: none;
}

.my-requests-section .request-card-header {
    background-color: var(--background-light, #f8f9fa);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--color-border-light, #e9ecef);
}

.my-requests-section .request-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.my-requests-section .request-id {
    font-weight: 600;
    color: var(--color-text-dark, #343a40);
}

.my-requests-section .request-time {
    color: var(--color-gray);
    font-size: 0.875rem;
}

.my-requests-section .request-card-body {
    padding: 1rem;
}

.my-requests-section .request-subject {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-dark, #343a40);
}

.my-requests-section .request-preview {
    color: var(--color-gray);
    line-height: 1.45;
}

.my-requests-section .request-card-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border-light, #e9ecef);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.my-requests-section .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1;
}

.my-requests-section .badge-type,
.my-requests-section .badge-status {
    border: none;
}

.my-requests-show-more-wrap {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.my-requests-section .badge-question {
    background-color: var(--badge-question-bg);
}
.my-requests-section .badge-problem {
    background-color: var(--badge-problem-bg);
}
.my-requests-section .badge-change {
    background-color: var(--badge-change-bg);
}
.my-requests-section .badge-feature {
    background-color: var(--badge-feature-bg);
}

.my-requests-section .badge-submitted {
    background-color: var(--badge-submitted-bg);
}
.my-requests-section .badge-assigned {
    background-color: var(--badge-assigned-bg);
}
.my-requests-section .badge-in_progress {
    background-color: var(--badge-in_progress-bg);
}
.my-requests-section .badge-resolved {
    background-color: var(--badge-resolved-bg);
}
.my-requests-section .badge-reopened {
    background-color: var(--badge-reopened-bg);
}
.my-requests-section .badge-closed {
    background-color: var(--badge-closed-bg);
}

/* Unread indicator */
.my-requests-section .request-card.unread {
    border-left: 3px solid #667eea;
}

.my-requests-section .unread-badge {
    color: #667eea;
    font-size: 0.8rem;
    font-weight: 600;
}

.my-requests-section .unread-badge .material-symbols-outlined {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .my-requests-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-requests-section .request-card-header,
    .my-requests-section .request-card-footer {
        flex-wrap: wrap;
    }

    .faq-search-bar {
        flex-direction: column;
    }
}