/*
 * Trello-style Kanban board (Leads and Tasks). These views use hand-written
 * classes below instead of Tailwind utilities, since the Filament panel only
 * loads Filament's own bundled CSS -- registered as one small additional
 * stylesheet via FilamentAsset (see AdminPanelProvider::boot()), so it can't
 * rely on the project's Tailwind build.
 *
 * Visual theme: fixed dark/black board with green (primary-color) glass
 * cards -- intentionally does NOT follow the panel's light/dark toggle, so
 * it looks the same regardless of the user's chosen theme.
 */

.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.kanban-column {
    width: 18rem;
    flex-shrink: 0;
    background: #131417;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 2px solid var(--col, #585A5F);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.5rem;
}

.kanban-column-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background-color: var(--col, #585A5F);
}

.kanban-column-title {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #A9AAAF;
    flex: 1;
}

.kanban-column-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #b6c2cf;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 0.0625rem 0.5rem;
}

.kanban-column-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.5rem 0.75rem;
    overflow-y: auto;
}

.kanban-card {
    background: color-mix(in oklab, var(--primary-500) 16%, #08090a 84%);
    border: 1px solid color-mix(in oklab, var(--primary-500) 38%, transparent);
    border-radius: 0.625rem;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    cursor: grab;
    overflow: hidden;
    transition: box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.kanban-card:hover {
    box-shadow:
        0 0 0 1.5px color-mix(in oklab, var(--primary-500) 60%, transparent),
        0 6px 20px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

.kanban-card-label {
    height: 0.5rem;
}

.kanban-card-body {
    padding: 0.5rem 0.75rem 0.75rem;
}

.kanban-card-title {
    font-size: 0.9375rem;
    line-height: 1.3;
    color: #f4f7f5;
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.kanban-card-subtitle {
    font-size: 0.75rem;
    color: #cdd8d2;
    margin-bottom: 0.5rem;
}

.kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.kanban-card-badges {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.kanban-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dfe6e2;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
}

.kanban-badge-done {
    color: #7ee2b8;
    background: rgba(31, 132, 90, 0.3);
}

.kanban-avatars {
    display: flex;
}

.kanban-avatars > * {
    margin-left: -0.5rem;
    border: 2px solid #131417;
    border-radius: 9999px;
}

.kanban-avatars > *:first-child {
    margin-left: 0;
}

.kanban-label-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

.kanban-label-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.25rem;
    padding: 0.1875rem 0.4375rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.kanban-filter-input,
.kanban-filter-select {
    border: 1px solid rgba(242, 241, 234, 0.22);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    background: #1A1B1E;
    color: #F2F1EA;
}

.kanban-filter-input:focus,
.kanban-filter-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 18%, transparent);
}

.kanban-filter-input {
    min-width: 14rem;
}

.kanban-filter-select {
    min-height: 2.125rem;
}

.kanban-filter-clear {
    border: none;
    background: transparent;
    color: color-mix(in oklab, var(--primary-500) 80%, white 20%);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.375rem 0.5rem;
}

.kanban-filter-clear:hover {
    text-decoration: underline;
}

.kanban-filter-hint {
    font-size: 0.75rem;
    color: #8c9bab;
    margin: -0.5rem 0 0.75rem;
}

.kanban-comments {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #3d4657;
}

.kanban-comments-title {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #b6c2cf;
    margin-bottom: 0.5rem;
}

.kanban-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kanban-comment {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
}

.kanban-comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.kanban-comment-author {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #e6edf3;
}

.kanban-comment-date {
    font-size: 0.75rem;
    color: #8c9bab;
    flex: 1;
}

.kanban-comment-edit-toggle,
.kanban-comment-save,
.kanban-comment-add {
    border: none;
    background: transparent;
    color: color-mix(in oklab, var(--primary-500) 80%, white 20%);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.kanban-comment-edit-toggle:hover,
.kanban-comment-save:hover,
.kanban-comment-add:hover {
    text-decoration: underline;
}

.kanban-comment-body {
    font-size: 0.8125rem;
    color: #e6edf3;
    white-space: pre-wrap;
}

.kanban-comment-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.kanban-comment-textarea {
    border: 1px solid #3d4657;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    background: #1b1d22;
    color: #e6edf3;
    width: 100%;
    resize: vertical;
}

.kanban-comments-empty {
    font-size: 0.8125rem;
    color: #8c9bab;
}

.kanban-comment-new {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.kanban-comment-save,
.kanban-comment-add {
    align-self: flex-end;
}

[x-cloak] {
    display: none !important;
}

.kanban-badge-priority-gray {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    color: #A9AAAF;
    background: rgba(169, 170, 175, 0.14);
}

.kanban-badge-priority-info {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    color: #F2F1EA;
    background: rgba(242, 241, 234, 0.12);
}

.kanban-badge-priority-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    color: #DDDC33;
    background: rgba(221, 220, 51, 0.14);
}

.kanban-badge-priority-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    color: #E88A74;
    background: rgba(200, 85, 61, 0.22);
}

.kanban-badge-overdue {
    color: #E88A74;
    background: rgba(200, 85, 61, 0.22);
}

.kanban-badge-soon {
    color: #DDDC33;
    background: rgba(221, 220, 51, 0.14);
}

.kanban-column-empty {
    text-align: center;
    font-size: 0.8125rem;
    color: #8c9bab;
    padding: 1rem 0;
}

.kanban-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

.kanban-no-results-text {
    font-size: 0.9375rem;
    color: #8c9bab;
}

.kanban-card-dragging {
    opacity: 0.5;
}

.kanban-column-dragover {
    background: #1c2029;
}