/**
 * Main Application Styles
 */

/* Additional custom styles */
.ticket-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.timeline {
    position: relative;
    padding-left: var(--spacing-lg);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--win11-border);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--spacing-lg);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--win11-accent);
    border: 2px solid var(--win11-surface);
}

.timeline-content {
    background: var(--win11-surface);
    border: 1px solid var(--win11-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.timeline-time {
    font-size: var(--font-size-xs);
    color: var(--win11-text-secondary);
    margin-bottom: var(--spacing-xs);
}

/* Rich Text Editor */
.rich-editor {
    min-height: 200px;
    border: 1px solid var(--win11-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

/* Attachment Preview */
.attachment-preview {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--win11-surface-hover);
    border-radius: var(--radius-md);
    margin: var(--spacing-xs);
}

.attachment-preview img {
    max-width: 100px;
    max-height: 100px;
    border-radius: var(--radius-sm);
}

/* Filters */
.filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Search */
.search-box {
    position: relative;
    max-width: 400px;
}

.search-box input {
    padding-left: 40px;
}

.search-box::before {
    content: '🔍';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--win11-text-secondary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--win11-text-secondary);
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

/* Ticket Status Colors */
.ticket-status-open {
    border-left: 4px solid #1976d2;
}

.ticket-status-in-progress {
    border-left: 4px solid #f57c00;
}

.ticket-status-resolved {
    border-left: 4px solid #388e3c;
}

.ticket-status-closed {
    border-left: 4px solid #7b1fa2;
}

/* Priority Indicators */
.priority-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--spacing-xs);
}

.priority-low .priority-indicator {
    background: #2e7d32;
}

.priority-medium .priority-indicator {
    background: #f57f17;
}

.priority-high .priority-indicator {
    background: #ff6f00;
}

.priority-critical .priority-indicator {
    background: #c62828;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Collision Detection */
.collision-warning {
    background: #fff3cd;
    border: 1px solid var(--win11-warning);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.collision-warning::before {
    content: '⚠️';
    font-size: 20px;
}

/* Knowledge Base Suggestions */
.kb-suggestions {
    background: var(--win11-accent-light);
    border: 1px solid var(--win11-accent);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.kb-suggestion-item {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--win11-border);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.kb-suggestion-item:hover {
    background: var(--win11-surface);
}

.kb-suggestion-item:last-child {
    border-bottom: none;
}

/* CSAT Rating */
.csat-rating {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin: var(--spacing-md) 0;
}

.csat-star {
    font-size: 32px;
    color: #ddd;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.csat-star:hover,
.csat-star.active {
    color: #ffb900;
}

/* Print Styles */
@media print {
    .sidebar,
    .topbar,
    .btn,
    .filters {
        display: none;
    }
    
    .main-content {
        margin-left: 0;
    }
}