/* Targets & Attacks Styles */

.targets-container {

    padding: 20px;

}



.targets-header {

    margin-bottom: 30px;

}



.targets-header h2 {

    color: var(--text-color);

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.targets-header p {

    color: var(--text-muted);

}



.targets-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 20px;

    margin-bottom: 30px;

}



.target-card {

    background: var(--card-color);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 20px;

    transition: all 0.3s ease;

}



.target-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.target-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    font-size: 0.9rem;

}



.target-card.high-priority {

    border-left: 4px solid #ef4444;

}



.target-card.terrorist {

    border-left: 4px solid #f59e0b;

}



.target-card.fraud {

    border-left: 4px solid #10b981;

}



.target-card.high-priority .target-status {

    color: #ef4444;

}



.target-card.terrorist .target-status {

    color: #f59e0b;

}



.target-card.fraud .target-status {

    color: #10b981;

}



.target-info h3 {

    color: var(--text-color);

    margin-bottom: 10px;

    font-size: 1.2rem;

}



.target-info p {

    color: var(--text-muted);

    font-size: 0.9rem;

    margin-bottom: 15px;

}



.target-details {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

}



.target-details span {

    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--text-muted);

    font-size: 0.9rem;

}



.attack-stats {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    padding-top: 15px;

    border-top: 1px solid var(--border-color);

}



.stat {

    text-align: center;

}



.stat-value {

    display: block;

    font-size: 1.5rem;

    color: var(--text-color);

    margin-bottom: 5px;

}



.stat-label {

    font-size: 0.8rem;

    color: var(--text-muted);

}



.threat-timeline {

    background: var(--card-color);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 20px;

}



.threat-timeline h3 {

    color: var(--text-color);

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.timeline-container {

    position: relative;

    padding-left: 30px;

}



.timeline-container::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 2px;

    background: var(--border-color);

}



.timeline-entry {

    position: relative;

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--border-color);

    animation: slideIn 0.3s ease-out;

}



.timeline-entry::before {

    content: '';

    position: absolute;

    left: -34px;

    top: 0;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--primary-color);

    border: 2px solid var(--card-color);

}



.timeline-entry.critical::before {

    background: #ef4444;

}



.timeline-entry.high::before {

    background: #f59e0b;

}



.timeline-entry.medium::before {

    background: #fbbf24;

}



.timeline-date {

    font-size: 0.9rem;

    color: var(--text-muted);

    margin-bottom: 8px;

}



.timeline-content {

    color: var(--text-color);

}



.timeline-content h4 {

    margin-bottom: 5px;

}



.timeline-content p {

    color: var(--text-muted);

    font-size: 0.9rem;

}