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

// Base Variables - can be customized
$kanban-radius-sm: 4px !default;
$kanban-radius-md: 6px !default;
$kanban-radius-lg: 8px !default;
$kanban-radius-pill: 12px !default;

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

// Color Variables - can be customized
$kanban-switcher-bg: var(--md-sys-color-surface, #fff) !default;
$kanban-switcher-border: var(--md-sys-color-outline-variant, #ddd) !default;
$kanban-button-color: var(--md-sys-color-on-surface, #212529) !default;
$kanban-button-hover-bg: var(--md-sys-color-surface-container-high, rgba(0, 0, 0, 0.05)) !default;
$kanban-button-active-bg: var(--md-sys-color-primary, #007bff) !default;
$kanban-button-active-color: var(--md-sys-color-on-primary, #fff) !default;

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

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

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

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

// Semantic accents
$kanban-todo-color: #6c757d !default;
$kanban-inprogress-color: #007bff !default;
$kanban-review-color: #ffc107 !default;
$kanban-done-color: #28a745 !default;

$kanban-priority-low: #28a745 !default;
$kanban-priority-medium: #ffc107 !default;
$kanban-priority-high: #dc3545 !default;

// Dark Theme Variables - can be customized
$kanban-shadow-sm-dark: 0 1px 3px rgba(0, 0, 0, 0.25) !default;
$kanban-shadow-md-dark: 0 4px 12px rgba(0, 0, 0, 0.5) !default;
$kanban-shadow-elevated-dark: 0 2px 8px rgba(0, 0, 0, 0.3) !default;

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

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

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

$kanban-tag-bg-dark: #444c56 !default;
$kanban-tag-border-dark: #565c64 !default;
$kanban-tag-color-dark: #d1d5da !default;

$kanban-table-bg-dark: #2d333b !default;
$kanban-table-header-bg-dark: #1c2128 !default;
$kanban-table-row-hover-dark: #343b45 !default;
$kanban-table-divider-dark: #444c56 !default;
$kanban-table-header-divider-dark: #444c56 !default;

// Emit CSS variables for theme customization
:root {
  --kanban-radius-sm: #{$kanban-radius-sm};
  --kanban-radius-md: #{$kanban-radius-md};
  --kanban-radius-lg: #{$kanban-radius-lg};
  --kanban-radius-pill: #{$kanban-radius-pill};

  --kanban-shadow-sm: #{$kanban-shadow-sm};
  --kanban-shadow-md: #{$kanban-shadow-md};
  --kanban-shadow-elevated: #{$kanban-shadow-elevated};

  --kanban-switcher-bg: #{$kanban-switcher-bg};
  --kanban-switcher-border: #{$kanban-switcher-border};
  --kanban-button-color: #{$kanban-button-color};
  --kanban-button-hover-bg: #{$kanban-button-hover-bg};
  --kanban-button-active-bg: #{$kanban-button-active-bg};
  --kanban-button-active-color: #{$kanban-button-active-color};

  --kanban-column-bg: #{$kanban-column-bg};
  --kanban-column-border: #{$kanban-column-border};
  --kanban-column-title: #{$kanban-column-title};
  --kanban-column-count-bg: #{$kanban-column-count-bg};
  --kanban-column-count-border: #{$kanban-column-count-border};
  --kanban-column-count-color: #{$kanban-column-count-color};

  --kanban-task-bg: #{$kanban-task-bg};
  --kanban-task-bg-hover: #{$kanban-task-bg-hover};
  --kanban-task-border: #{$kanban-task-border};
  --kanban-task-title: #{$kanban-task-title};
  --kanban-task-description: #{$kanban-task-description};

  --kanban-tag-bg: #{$kanban-tag-bg};
  --kanban-tag-border: #{$kanban-tag-border};
  --kanban-tag-color: #{$kanban-tag-color};

  --kanban-table-bg: #{$kanban-table-bg};
  --kanban-table-header-bg: #{$kanban-table-header-bg};
  --kanban-table-row-hover: #{$kanban-table-row-hover};
  --kanban-table-divider: #{$kanban-table-divider};
  --kanban-table-header-divider: #{$kanban-table-header-divider};
  --kanban-color: var(--kanban-column-border, #ddd);
}

body.dark {
  --kanban-shadow-sm: #{$kanban-shadow-sm-dark};
  --kanban-shadow-md: #{$kanban-shadow-md-dark};
  --kanban-shadow-elevated: #{$kanban-shadow-elevated-dark};

  --kanban-switcher-bg: #{$kanban-switcher-bg-dark};
  --kanban-switcher-border: #{$kanban-switcher-border-dark};
  --kanban-button-color: #{$kanban-button-color-dark};
  --kanban-button-hover-bg: #{$kanban-button-hover-bg-dark};
  --kanban-button-active-bg: #{$kanban-button-active-bg-dark};
  --kanban-button-active-color: #{$kanban-button-active-color-dark};

  --kanban-column-bg: #{$kanban-column-bg-dark};
  --kanban-column-border: #{$kanban-column-border-dark};
  --kanban-column-title: #{$kanban-column-title-dark};
  --kanban-column-count-bg: #{$kanban-column-count-bg-dark};
  --kanban-column-count-border: #{$kanban-column-count-border-dark};
  --kanban-column-count-color: #{$kanban-column-count-color-dark};

  --kanban-task-bg: #{$kanban-task-bg-dark};
  --kanban-task-bg-hover: #{$kanban-task-bg-hover-dark};
  --kanban-task-border: #{$kanban-task-border-dark};
  --kanban-task-title: #{$kanban-task-title-dark};
  --kanban-task-description: #{$kanban-task-description-dark};

  --kanban-tag-bg: #{$kanban-tag-bg-dark};
  --kanban-tag-border: #{$kanban-tag-border-dark};
  --kanban-tag-color: #{$kanban-tag-color-dark};

  --kanban-table-bg: #{$kanban-table-bg-dark};
  --kanban-table-header-bg: #{$kanban-table-header-bg-dark};
  --kanban-table-row-hover: #{$kanban-table-row-hover-dark};
  --kanban-table-divider: #{$kanban-table-divider-dark};
  --kanban-table-header-divider: #{$kanban-table-header-divider-dark};
}

// Header & View Switcher
.marked-extended-kanban-view-switcher {
  border-radius: var(--kanban-radius-md, $kanban-radius-md);
  border: 1px solid var(--kanban-switcher-border, $kanban-switcher-border);
  background: var(--kanban-switcher-bg, $kanban-switcher-bg);
}

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

  &:hover:not(.active) {
    background: var(--kanban-button-hover-bg, $kanban-button-hover-bg);
  }

  &.active {
    background: var(--kanban-button-active-bg, $kanban-button-active-bg);
    color: var(--kanban-button-active-color, $kanban-button-active-color);
    box-shadow: var(--kanban-shadow-sm, $kanban-shadow-sm);
  }
}

// Board View - Column Styles
.marked-extended-kanban[data-view-mode="board"] .marked-extended-kanban-column {
  border-radius: var(--kanban-radius-lg, $kanban-radius-lg);
  border: 1px solid var(--kanban-column-border, $kanban-column-border);
  background: var(--kanban-column-bg, $kanban-column-bg);
  box-shadow: var(--kanban-shadow-sm, $kanban-shadow-sm);
  transition: box-shadow 0.2s ease;

  &:hover {
    box-shadow: var(--kanban-shadow-md, $kanban-shadow-md);
  }
}

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

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

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

// Board View - Task Styles
.marked-extended-kanban-task {
  border-radius: var(--kanban-radius-md, $kanban-radius-md);
  border: 1px solid var(--kanban-task-border, $kanban-task-border);
  border-left: 4px solid;
  background: var(--kanban-task-bg, $kanban-task-bg);
  box-shadow: var(--kanban-shadow-sm, $kanban-shadow-sm);
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--kanban-shadow-md, $kanban-shadow-md);
  }
}

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

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

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

// Column-specific colors
.marked-extended-kanban-column[data-column-id*="todo"],
.marked-extended-kanban-column[data-column-id*="backlog"] {
  .marked-extended-kanban-column-header {
    border-bottom-color: $kanban-todo-color;
  }
  .marked-extended-kanban-task {
    border-left-color: $kanban-todo-color;
  }
}

.marked-extended-kanban-column[data-column-id*="progress"],
.marked-extended-kanban-column[data-column-id*="doing"] {
  .marked-extended-kanban-column-header {
    border-bottom-color: $kanban-inprogress-color;
  }
  .marked-extended-kanban-task {
    border-left-color: $kanban-inprogress-color;
  }
}

.marked-extended-kanban-column[data-column-id*="review"] {
  .marked-extended-kanban-column-header {
    border-bottom-color: $kanban-review-color;
  }
  .marked-extended-kanban-task {
    border-left-color: $kanban-review-color;
  }
}

.marked-extended-kanban-column[data-column-id*="done"],
.marked-extended-kanban-column[data-column-id*="complete"] {
  .marked-extended-kanban-column-header {
    border-bottom-color: $kanban-done-color;
  }
  .marked-extended-kanban-task {
    border-left-color: $kanban-done-color;
  }
}

// Task priority colors
.marked-extended-kanban-task[data-priority="low"] {
  border-left-color: $kanban-priority-low;
}

.marked-extended-kanban-task[data-priority="medium"] {
  border-left-color: $kanban-priority-medium;
}

.marked-extended-kanban-task[data-priority="high"] {
  border-left-color: $kanban-priority-high;
}

// Table View Styles
.marked-extended-kanban[data-view-mode="table"] {
  .marked-extended-kanban-container {
    border-radius: var(--kanban-radius-lg, $kanban-radius-lg);
    border: 1px solid var(--kanban-column-border, $kanban-column-border);
    background: var(--kanban-table-bg, $kanban-table-bg);
    box-shadow: var(--kanban-shadow-elevated, $kanban-shadow-elevated);
  }

  .marked-extended-kanban-table {
    background: var(--kanban-table-bg, $kanban-table-bg);

    th,
    td {
      border-bottom: 1px solid var(--kanban-table-divider, $kanban-table-divider);
    }

    th {
      font-weight: 700;
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--kanban-table-header-bg, $kanban-table-header-bg);
      color: var(--kanban-column-title, $kanban-column-title);
      border-bottom: 2px solid var(--kanban-table-header-divider, $kanban-table-header-divider);
    }

    td {
      font-size: 0.9375rem;
      color: var(--kanban-task-title, $kanban-task-title);
    }

    tbody tr {
      transition: background-color 0.15s ease;

      &:hover {
        background-color: var(--kanban-table-row-hover, $kanban-table-row-hover);
      }
    }
  }

  .marked-extended-kanban-column-label,
  .marked-extended-kanban-task-tag {
    border-radius: var(--kanban-radius-sm, $kanban-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem;
    margin: 0.1rem;
  }
}

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

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

  .marked-extended-kanban-task {
    background: var(--kanban-task-bg, $kanban-task-bg);
    border: 1px solid var(--kanban-task-border, $kanban-task-border);
    border-left: 3px solid;
    box-shadow: none;

    &:hover {
      transform: none;
      box-shadow: var(--kanban-shadow-sm, $kanban-shadow-sm);
      background: var(--kanban-task-bg-hover, $kanban-task-bg-hover);
    }
  }
}

.marked-extended-kanban-view-button:focus-visible,
.marked-extended-kanban-task:focus-visible {
  outline: 2px solid var(--kanban-button-active-bg, $kanban-button-active-bg);
  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;
  }
}