/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Investigation System Styles
 * Styling for clue discovery and display
 */

/* Investigation Container */
#investigation-clues-container {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    min-height: 200px;
    max-height: 600px;
    overflow-y: auto;

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

.clues-empty-state p {
    margin: var(--spacing-sm) 0;

.clues-hint {
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-dim);

/* Clue Groups */
.clue-group {
    margin-bottom: var(--spacing-xl);

.clue-group:last-child {
    margin-bottom: 0;

.clue-group-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 1px;

.clue-group-critical .clue-group-title {
    color: var(--color-failure);
    border-bottom-color: var(--color-failure);

.clue-group-major .clue-group-title {
    color: var(--color-warning);
    border-bottom-color: var(--color-warning);

.clue-group-normal .clue-group-title {
    color: var(--color-info);
    border-bottom-color: var(--color-info);

.clue-group-minor .clue-group-title {
    color: var(--color-success);
    border-bottom-color: var(--color-success);

/* Clues List */
.clues-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);

/* Clue Card */
.clue-card {
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

.clue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--spacing-sm);
    height: 100%;
    background: var(--color-border);
    transition: width var(--transition-base);

.clue-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-light);

.clue-card:hover::before {
    width: var(--spacing-sm);

/* Clue Importance Colors */
.clue-critical {
    border-left-color: var(--color-failure);

.clue-critical::before {
    background: var(--color-failure);

.clue-critical:hover {
    box-shadow: 0 0 20px rgba(217, 83, 79, 0.3);

.clue-major {
    border-left-color: var(--color-warning);

.clue-major::before {
    background: var(--color-warning);

.clue-major:hover {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);

.clue-normal {
    border-left-color: var(--color-info);

.clue-normal::before {
    background: var(--color-info);

.clue-normal:hover {
    box-shadow: 0 0 20px rgba(91, 192, 222, 0.3);

.clue-minor {
    border-left-color: var(--color-success);

.clue-minor::before {
    background: var(--color-success);

.clue-minor:hover {
    box-shadow: 0 0 20px rgba(92, 184, 92, 0.3);

/* Clue Header */
.clue-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);

.clue-importance-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;

.clue-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    flex: 1;

/* Clue Description */
.clue-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);

/* Clue Meta */
.clue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    margin-bottom: var(--spacing-xs);

.clue-location,
.clue-discoverer {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);

/* Clue Tags */
.clue-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);

.clue-tag {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: lowercase;

/* Clue Count Badge */
#clues-count-badge {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    background: var(--color-info);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-xs);

/* Investigation Tab/Section */
.investigation-section {
    margin: var(--spacing-lg) 0;

.investigation-section h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);

/* Responsive */
@media (max-width: 768px) {
    .clues-list {
        grid-template-columns: 1fr;

    #investigation-clues-container {
        max-height: 400px;

/**
 * Create `public/css/investigationSystem.css`
 * From docs/IMPROVEMENT-QUEUE.md (C1: Investigation System - COMPLETELY MISSING):

Create `public/css/investigationSystem.css`
 */

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}