: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 */
}



.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: 1rem;
    /* More padding */
    cursor: grab;
    /* Deeper shadow for pop */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -1px rgb(0 0 0 / 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -2px rgb(0 0 0 / 0.1);
    /* Removed border-color primary change to keep background color clean */
}

.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;
    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.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.1s, border-color 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

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

/* 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: fixed;
    /* Default fallback center if no coords set */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);

    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    width: 100%;
    max-width: 450px;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
    /* Stronger shadow */
    transition: transform 0.2s, top 0.2s, left 0.2s;
    z-index: 51;
}

.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;
    }
}