/* tenant Dashboard Ticket System Styles */

.recent-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.recent-ticket-item {
    background: var(--color-neutral-750);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-600);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: var(--transition-fast);
    position: relative;
}

.recent-ticket-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary-500);
}

.recent-ticket-item.priority-urgent::before {
    background: var(--color-red-500);
}

.recent-ticket-item.priority-high::before {
    background: var(--color-orange-500);
}

.recent-ticket-item.priority-medium::before {
    background: var(--color-yellow-500);
}

.recent-ticket-item.priority-low::before {
    background: var(--color-green-500);
}

.recent-ticket-item:hover {
    border-color: var(--color-primary-500);
    transform: translateY(-1px);
}

.ticket-info {
    flex: 1;
}

.ticket-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ticket-number a {
    color: var(--color-primary-400);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.ticket-number a:hover {
    color: var(--color-primary-300);
}

.ticket-priority,
.ticket-status {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-priority.priority-urgent {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-red-300);
}

.ticket-priority.priority-high {
    background: rgba(249, 115, 22, 0.2);
    color: var(--color-orange-300);
}

.ticket-priority.priority-medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-yellow-300);
}

.ticket-priority.priority-low {
    background: rgba(16, 185, 129, 0.2);
    color: var(--color-green-300);
}

.ticket-status.status-open {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-blue-300);
}

.ticket-status.status-in-progress {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-yellow-300);
}

.ticket-status.status-resolved {
    background: rgba(16, 185, 129, 0.2);
    color: var(--color-green-300);
}

.ticket-status.status-closed {
    background: rgba(107, 114, 128, 0.2);
    color: var(--color-neutral-400);
}

.ticket-subject {
    font-weight: 600;
    color: var(--color-neutral-100);
    margin-bottom: 0.25rem;
    font-size: var(--text-sm);
}

.ticket-meta {
    display: flex;
    gap: 1rem;
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}

.ticket-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.quick-action-btn,
.view-btn {
    padding: 0.375rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
}

.quick-action-btn {
    background: var(--color-primary-600);
    color: white;
}

.quick-action-btn:hover {
    background: var(--color-primary-700);
}

.view-btn {
    background: var(--color-neutral-600);
    color: var(--color-neutral-200);
}

.view-btn:hover {
    background: var(--color-neutral-500);
    color: var(--color-neutral-100);
}

.section-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-neutral-700);
    text-align: center;
}

.view-all-btn {
    color: var(--color-primary-400);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-fast);
}

.view-all-btn:hover {
    color: var(--color-primary-300);
}

.view-all-btn i {
    transition: var(--transition-fast);
}

.view-all-btn:hover i {
    transform: translateX(2px);
}

/* Pipeline stage error variant */
.pipeline-stage-error {
    background: linear-gradient(135deg, var(--color-neutral-800) 0%, var(--color-neutral-700) 100%);
    border: 1px solid var(--color-red-600);
}

/* Migrated from root.css to page: shared pipeline + chart card + metric tiles for tickets dashboard */
.pipeline-container {
    background: white;
    border: 1px solid var(--color-neutral-700);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    margin: 1rem 0;
}
.pipeline-title { font-weight: 700; margin-bottom: 0.75rem; }
.pipeline-stages { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pipeline-stage { flex: 1; min-width: 120px; text-align: center; padding: 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-700); background: var(--color-neutral-800); }
.pipeline-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.25rem; }
.pipeline-number { font-weight: 700; margin-bottom: 0.25rem; }
.pipeline-label { font-size: var(--text-xs); color: var(--color-neutral-300); }
.pipeline-btn { display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm); color: white; background: var(--color-primary-600); text-decoration: none; font-size: var(--text-xs); }
.pipeline-btn:hover { background: var(--color-primary-700); }

.chart-card { background: var(--color-neutral-800); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md); padding: 1rem; }
.chart-title { font-weight: 600; margin: 0 0 .5rem 0; }

.metric-card { width: 96px; background: var(--color-neutral-800); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md); padding: 0.5rem; text-align: center; }
.metric-card-error { background: rgba(239, 68, 68, 0.1); border-color: var(--color-red-700); }
.metric-number { font-weight: 700; }

.pipeline-stage-error::before {
    background: var(--color-red-500);
}

.pipeline-stage-error .pipeline-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-red-400);
}

.pipeline-stage-error .pipeline-number {
    color: var(--color-red-300);
}

.pipeline-stage-error .pipeline-button {
    background: var(--color-red-600);
}

.pipeline-stage-error .pipeline-button:hover {
    background: var(--color-red-700);
}

/* Responsive design */
@media (max-width: 768px) {
    .recent-ticket-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .ticket-header {
        flex-wrap: wrap;
    }
    
    .ticket-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .ticket-actions {
        align-self: flex-end;
    }
}