/* Issue List Page - Global CSS Variables and Styles */

:root {
    /* Issue Type Colors */
    --color-decision: #3b82f6;        /* blue */
    --color-criteria: #8b5cf6;        /* purple */
    --color-uncertainty: #f59e0b;     /* orange */
    --color-fact: #10b981;            /* green */
    --color-uncategorized: #6b7280;   /* gray */

    /* Card & Group Styling */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
    --card-radius: 10px;
    --group-radius: 10px;
    --badge-radius: 6px;

    /* Spacing */
    --card-padding: 16px;
    --group-padding: 14px;
    --card-gap: 10px;
    --group-gap: 16px;
}

/* Loading State */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    font-size: 18px;
    color: #6b7280;
}

/* Issue List Page Container */
.issueListPage {
    padding: 20px;
    max-width: 1800px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════
   Drag & Drop Visual States (global — JS adds these classes)
   ══════════════════════════════════════════════════════════════════ */

/* Card being dragged */
.issue-dragging {
    opacity: 0.4 !important;
    transform: scale(0.97) !important;
    box-shadow: none !important;
    border: 2px dashed #93c5fd !important;
    pointer-events: none;
}

/* Insertion indicator — before target card (vertical: top border) */
.issue-drop-before {
    border-top: 3px solid #3b82f6 !important;
    margin-top: -2px;
}

/* Insertion indicator — after target card (vertical: bottom border) */
.issue-drop-after {
    border-bottom: 3px solid #3b82f6 !important;
    margin-bottom: -2px;
}

/* Grid layout indicators — left/right instead of top/bottom */
.issue-drop-before.issue-drop-horizontal {
    border-top: none !important;
    margin-top: 0;
    border-left: 3px solid #3b82f6 !important;
    margin-left: -2px;
}

.issue-drop-after.issue-drop-horizontal {
    border-bottom: none !important;
    margin-bottom: 0;
    border-right: 3px solid #3b82f6 !important;
    margin-right: -2px;
}

/* Group highlighted as valid drop target */
.issue-drop-target {
    border-color: #3b82f6 !important;
    border-style: dashed !important;
    background: rgba(59, 130, 246, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

/* ── Dark mode overrides ─────────────────────────────────────── */

[data-bs-theme="dark"] .issue-dragging {
    border-color: #60a5fa !important;
}

[data-bs-theme="dark"] .issue-drop-before {
    border-top-color: #60a5fa !important;
}

[data-bs-theme="dark"] .issue-drop-after {
    border-bottom-color: #60a5fa !important;
}

[data-bs-theme="dark"] .issue-drop-before.issue-drop-horizontal {
    border-top-color: transparent !important;
    border-left-color: #60a5fa !important;
}

[data-bs-theme="dark"] .issue-drop-after.issue-drop-horizontal {
    border-bottom-color: transparent !important;
    border-right-color: #60a5fa !important;
}

[data-bs-theme="dark"] .issue-drop-target {
    border-color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.06) !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.12) !important;
}

/* Card arrival animation (after drop completes and Blazor re-renders) */
.issue-just-moved {
    animation: cardArrival 0.4s ease-out;
}

@keyframes cardArrival {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(-8px);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    }
    60% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        box-shadow: none;
    }
}