:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-column: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --radius: 0.75rem;
    --font-sans: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-body);
    color: var(--text-main);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.app-header {
    height: 64px;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-main);
}

.logo-icon {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    outline: none;
}

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

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-main);
}

.btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--text-muted);
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s;
}

.icon-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

/* Board Layout */
.board-container {
    flex: 1;
    overflow: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Board Header (Columns Definition) */
.board-header {
    display: grid;
    /* Grid template set by JS */
    gap: 1.5rem;
    margin-bottom: 0.5rem;
    padding-right: 1.5rem;
    /* Scrollbar offset */
}

.header-spacer {
    /* Space for project info column */
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0 0.5rem;
}

/* Projects Rows */
#projects-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-row {
    display: grid;
    gap: 1.5rem;
}

.project-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.project-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-title {
    font-weight: 600;
    font-size: 1rem;
}

.project-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Kanban Columns & Cards */
.kanban-column {
    background: rgba(30, 41, 59, 0.5);
    border-radius: var(--radius);
    padding: 0.75rem;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}

.kanban-column.drag-over {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.task-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
}

.task-card:active {
    cursor: grabbing;
}

.task-title {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.task-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.add-task-ghost {
    border: 2px dashed var(--border);
    border-radius: 0.5rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.25rem;
    opacity: 0.5;
}

.add-task-ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
    opacity: 1;
}

/* Color Swatches */
.color-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.selected {
    border-color: #fff !important;
    box-shadow: 0 0 0 2px var(--primary);
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    /* Semi-transparent */
    backdrop-filter: blur(8px);
    display: block;
    /* Was flex */
    /* We handle centering or positioning manually now, but to keep 'default' center effective without JS coordinates, we can use flex properties on overlay if we wanted dynamic. 
       But plan says 'near click'. So overlay is just the canvas. */
    z-index: 50;
    opacity: 1;
    transition: opacity 0.2s;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal {
    position: absolute;
    /* Default fallback center if no coords set */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);

    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 450px;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    transition: transform 0.2s, top 0.2s, left 0.2s;
    /* Animate movement */
}

.modal.hidden {
    transform: scale(0.95);
    pointer-events: none;
    display: none;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.close-modal {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Form Extras */
.form-row {
    display: flex;
    gap: 1rem;
}

.form-group.half {
    flex: 1;
}

/* Comments */
.comments-section {
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.comments-list {
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comment-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
}

.comment-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
}

.add-comment-box {
    display: flex;
    gap: 0.5rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .app-header {
        padding: 0 1rem;
    }

    .board-container {
        padding: 1rem;
    }

    /* Stack Board Header (Columns) vertically or hide them and show inside project? 
       Actually, standard Kanban on mobile usually scrolls horizontally OR stacks.
       Let's clear the grid template to allow stacking if needed, or keeping scroll.
       For this specific layout (Row per project), mobile is tricky.
       Let's stack columns within each project row.
    */
    .board-header {
        display: none;
        /* Hide global header on mobile, columns are inside projects */
    }

    .project-row {
        grid-template-columns: 1fr !important;
        /* Stack everything */
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .kanban-column {
        min-height: 100px;
    }

    /* We might want to show column title inside column on mobile since header is gone */
    .kanban-column::before {
        content: attr(data-status);
        /* We need the title, but data-status is ID. */
        /* JS solution would be better to inject title, or just CSS content if we map it.
           Simpler: Just let them stack. Improving UX: Add labels via JS or CSS if possible.
        */
        display: block;
        font-weight: bold;
        margin-bottom: 0.5rem;
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 0.75rem;
    }

    .modal {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
}