/**
 * Marked Extended Kanban - Theme Styles
 * Full visual theme layer with CSS variable customization.
 */

:root {
    --kanban-radius-sm: 4px;
    --kanban-radius-md: 6px;
    --kanban-radius-lg: 8px;
    --kanban-radius-pill: 12px;

    --kanban-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --kanban-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --kanban-shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.06);

    --kanban-switcher-bg: var(--md-sys-color-surface, #fff);
    --kanban-switcher-border: var(--md-sys-color-outline-variant, #ddd);
    --kanban-button-color: var(--md-sys-color-on-surface, #212529);
    --kanban-button-hover-bg: var(--md-sys-color-surface-container-high, rgba(0, 0, 0, 0.05));
    --kanban-button-active-bg: var(--md-sys-color-primary, #007bff);
    --kanban-button-active-color: var(--md-sys-color-on-primary, #fff);

    --kanban-column-bg: var(--md-sys-color-surface-container-low, #fafafa);
    --kanban-column-border: var(--md-sys-color-outline-variant, #e0e0e0);
    --kanban-column-title: var(--md-sys-color-on-surface, #212529);
    --kanban-column-count-bg: var(--md-sys-color-surface, #fff);
    --kanban-column-count-border: var(--md-sys-color-outline, #ddd);
    --kanban-column-count-color: var(--md-sys-color-on-surface-variant, #666);

    --kanban-task-bg: var(--md-sys-color-surface, #fff);
    --kanban-task-bg-hover: var(--md-sys-color-surface-container-lowest, #fefefe);
    --kanban-task-border: var(--md-sys-color-outline-variant, #e0e0e0);
    --kanban-task-title: var(--md-sys-color-on-surface, #212529);
    --kanban-task-description: var(--md-sys-color-on-surface-variant, #666);

    --kanban-tag-bg: var(--md-sys-color-surface-container, #f8f9fa);
    --kanban-tag-border: var(--md-sys-color-outline, #ddd);
    --kanban-tag-color: var(--md-sys-color-on-surface, #495057);

    --kanban-table-bg: var(--md-sys-color-surface, #fff);
    --kanban-table-header-bg: var(--md-sys-color-surface-container-low, #f8f9fa);
    --kanban-table-row-hover: var(--md-sys-color-surface-container-high, #f8f9fa);
    --kanban-table-divider: var(--md-sys-color-outline-variant, #e9ecef);
    --kanban-table-header-divider: var(--md-sys-color-outline, #dee2e6);
    --kanban-color: var(--kanban-column-border, #ddd);

    --kanban-todo-color: #6c757d;
    --kanban-inprogress-color: #007bff;
    --kanban-review-color: #ffc107;
    --kanban-done-color: #28a745;

    --kanban-priority-low: #28a745;
    --kanban-priority-medium: #ffc107;
    --kanban-priority-high: #dc3545;
}

body.dark {
    --kanban-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --kanban-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --kanban-shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.3);

    --kanban-switcher-bg: #1c2128;
    --kanban-switcher-border: #444c56;
    --kanban-button-color: #d1d5da;
    --kanban-button-hover-bg: #444c56;
    --kanban-button-active-bg: #3b4551;
    --kanban-button-active-color: #58a6ff;

    --kanban-column-bg: #22272e;
    --kanban-column-border: #444c56;
    --kanban-column-title: #d1d5da;
    --kanban-column-count-bg: #444c56;
    --kanban-column-count-border: #565c64;
    --kanban-column-count-color: #d1d5da;

    --kanban-task-bg: #2d333b;
    --kanban-task-bg-hover: #343b45;
    --kanban-task-border: #444c56;
    --kanban-task-title: #d1d5da;
    --kanban-task-description: #d6d6d6;

    --kanban-tag-bg: #444c56;
    --kanban-tag-border: #565c64;
    --kanban-tag-color: #d1d5da;

    --kanban-table-bg: #2d333b;
    --kanban-table-header-bg: #1c2128;
    --kanban-table-row-hover: #343b45;
    --kanban-table-divider: #444c56;
    --kanban-table-header-divider: #444c56;
}

.marked-extended-kanban-view-switcher {
    border-radius: var(--kanban-radius-md, 6px);
    border: 1px solid var(--kanban-switcher-border, #ddd);
    background: var(--kanban-switcher-bg, #fff);
}

.marked-extended-kanban-view-button {
    border-radius: var(--kanban-radius-sm, 4px);
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--kanban-button-color, #212529);
}

.marked-extended-kanban-view-button:hover:not(.active) {
    background: var(--kanban-button-hover-bg, rgba(0, 0, 0, 0.05));
}

.marked-extended-kanban-view-button.active {
    background: var(--kanban-button-active-bg, #007bff);
    color: var(--kanban-button-active-color, #fff);
    box-shadow: var(--kanban-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.marked-extended-kanban[data-view-mode="board"] .marked-extended-kanban-column {
    border-radius: var(--kanban-radius-lg, 8px);
    border: 1px solid var(--kanban-column-border, #e0e0e0);
    background: var(--kanban-column-bg, #fafafa);
    box-shadow: var(--kanban-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    transition: box-shadow 0.2s ease;
}

.marked-extended-kanban[data-view-mode="board"] .marked-extended-kanban-column:hover {
    box-shadow: var(--kanban-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.marked-extended-kanban-column-header {
    border-bottom: 3px solid var(--kanban-color, var(--kanban-column-border, #ddd));
}

.marked-extended-kanban-column-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--kanban-column-title, #212529);
}

.marked-extended-kanban-column-count {
    border-radius: var(--kanban-radius-pill, 12px);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--kanban-column-count-border, #ddd);
    color: var(--kanban-column-count-color, #666);
    background: var(--kanban-column-count-bg, #fff);
}

.marked-extended-kanban-task {
    border-radius: var(--kanban-radius-md, 6px);
    border: 1px solid var(--kanban-task-border, #e0e0e0);
    border-left: 4px solid;
    background: var(--kanban-task-bg, #fff);
    box-shadow: var(--kanban-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    transition: all 0.2s ease;
}

.marked-extended-kanban-task:hover {
    transform: translateY(-2px);
    box-shadow: var(--kanban-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.marked-extended-kanban-task-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--kanban-task-title, #212529);
}

.marked-extended-kanban-task-description {
    font-size: 0.8125rem;
    opacity: 0.85;
    color: var(--kanban-task-description, #666);
}

.marked-extended-kanban-task-tag {
    border-radius: var(--kanban-radius-sm, 4px);
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--kanban-tag-border, #ddd);
    color: var(--kanban-tag-color, #495057);
    background: var(--kanban-tag-bg, #f8f9fa);
}

.marked-extended-kanban-column[data-column-id*="todo"] .marked-extended-kanban-column-header,
.marked-extended-kanban-column[data-column-id*="backlog"] .marked-extended-kanban-column-header {
    border-bottom-color: var(--kanban-todo-color, #6c757d);
}

.marked-extended-kanban-column[data-column-id*="todo"] .marked-extended-kanban-task,
.marked-extended-kanban-column[data-column-id*="backlog"] .marked-extended-kanban-task {
    border-left-color: var(--kanban-todo-color, #6c757d);
}

.marked-extended-kanban-column[data-column-id*="progress"] .marked-extended-kanban-column-header,
.marked-extended-kanban-column[data-column-id*="doing"] .marked-extended-kanban-column-header {
    border-bottom-color: var(--kanban-inprogress-color, #007bff);
}

.marked-extended-kanban-column[data-column-id*="progress"] .marked-extended-kanban-task,
.marked-extended-kanban-column[data-column-id*="doing"] .marked-extended-kanban-task {
    border-left-color: var(--kanban-inprogress-color, #007bff);
}

.marked-extended-kanban-column[data-column-id*="review"] .marked-extended-kanban-column-header {
    border-bottom-color: var(--kanban-review-color, #ffc107);
}

.marked-extended-kanban-column[data-column-id*="review"] .marked-extended-kanban-task {
    border-left-color: var(--kanban-review-color, #ffc107);
}

.marked-extended-kanban-column[data-column-id*="done"] .marked-extended-kanban-column-header,
.marked-extended-kanban-column[data-column-id*="complete"] .marked-extended-kanban-column-header {
    border-bottom-color: var(--kanban-done-color, #28a745);
}

.marked-extended-kanban-column[data-column-id*="done"] .marked-extended-kanban-task,
.marked-extended-kanban-column[data-column-id*="complete"] .marked-extended-kanban-task {
    border-left-color: var(--kanban-done-color, #28a745);
}

.marked-extended-kanban-task[data-priority="low"] {
    border-left-color: var(--kanban-priority-low, #28a745);
}

.marked-extended-kanban-task[data-priority="medium"] {
    border-left-color: var(--kanban-priority-medium, #ffc107);
}

.marked-extended-kanban-task[data-priority="high"] {
    border-left-color: var(--kanban-priority-high, #dc3545);
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-container {
    border-radius: var(--kanban-radius-lg, 8px);
    border: 1px solid var(--kanban-column-border, #e0e0e0);
    background: var(--kanban-table-bg, #fff);
    box-shadow: var(--kanban-shadow-elevated, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table {
    background: var(--kanban-table-bg, #fff);
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table th,
.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table td {
    border-bottom: 1px solid var(--kanban-table-divider, #e9ecef);
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table th {
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--kanban-table-header-bg, #f8f9fa);
    color: var(--kanban-column-title, #495057);
    border-bottom: 2px solid var(--kanban-table-header-divider, #dee2e6);
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table td {
    font-size: 0.9375rem;
    color: var(--kanban-task-title, #212529);
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table tbody tr {
    transition: background-color 0.15s ease;
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table tbody tr:hover {
    background-color: var(--kanban-table-row-hover, #f8f9fa);
}

.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-column-label,
.marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-task-tag {
    border-radius: var(--kanban-radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem;
    margin: 0.1rem;
}

.marked-extended-kanban[data-view-mode="list"] .marked-extended-kanban-column {
    box-shadow: none;
    background: transparent;
    border: 1px solid var(--kanban-column-border, #e0e0e0);
    border-radius: var(--kanban-radius-lg, 8px);
}

.marked-extended-kanban[data-view-mode="list"] .marked-extended-kanban-column-header {
    border-bottom: 2px solid var(--kanban-color, var(--kanban-column-border, #ddd));
}

.marked-extended-kanban[data-view-mode="list"] .marked-extended-kanban-task {
    background: var(--kanban-task-bg, #fff);
    border: 1px solid var(--kanban-task-border, #e0e0e0);
    border-left: 3px solid;
    box-shadow: none;
}

.marked-extended-kanban[data-view-mode="list"] .marked-extended-kanban-task:hover {
    transform: none;
    box-shadow: var(--kanban-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    background: var(--kanban-task-bg-hover, #fefefe);
}

.marked-extended-kanban-view-button:focus-visible,
.marked-extended-kanban-task:focus-visible {
    outline: 2px solid var(--kanban-button-active-bg, #007bff);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .marked-extended-kanban-view-button,
    .marked-extended-kanban-task,
    .marked-extended-kanban[data-view-mode="table"] .marked-extended-kanban-table tbody tr {
        transition: none;
    }

    .marked-extended-kanban-task:hover {
        transform: none;
    }
}