/* =============================================================================
   BOARDS - Multi-board Kanban System Styles
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Custom Properties for Board Components
   ----------------------------------------------------------------------------- */

:root {
  /* Type colors */
  --type-task: #3B82F6;
  --type-deal: #22C55E;
  --type-project: #8B5CF6;
  --type-idea: #F59E0B;

  /* Label colors (Trello-like) */
  --label-green: #22C55E;
  --label-yellow: #EAB308;
  --label-orange: #F97316;
  --label-red: #EF4444;
  --label-purple: #8B5CF6;
  --label-blue: #3B82F6;
  --label-sky: #0EA5E9;
  --label-lime: #84CC16;
  --label-pink: #EC4899;
  --label-black: #1F2937;
}

/* Dark mode adjustments */
html.dark {
  --label-black: #E5E7EB;
}

/* -----------------------------------------------------------------------------
   Board Item Card (Trello-like)
   ----------------------------------------------------------------------------- */

.board-item-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.board-item-card:hover {
  transform: translateY(-2px);
}

/* Dragging state */
.board-item-card.sortable-ghost {
  opacity: 0.4;
}

.board-item-card.sortable-drag {
  opacity: 1;
  transform: rotate(3deg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* SortableJS custom states */
.board-ghost {
  opacity: 0.3;
  background: var(--accent-10);
}

.board-chosen {
  cursor: grabbing !important;
}

.board-drag {
  opacity: 1;
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
              0 10px 10px -5px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.board-fallback {
  opacity: 0.8;
}

/* Drop zone visual feedback */
.board-drop-zone {
  background: var(--accent-5);
  border: 2px dashed var(--accent);
  border-radius: 0.5rem;
}

/* Card cover */
.card-cover {
  background-size: cover;
  background-position: center;
  border-radius: 0.375rem 0.375rem 0 0;
}

/* Labels */
.board-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.board-card-label {
  min-width: 40px;
  border-radius: 4px;
  cursor: pointer;
  transition: height 0.1s ease;
  overflow: hidden;
}

.board-card-label:hover {
  height: 16px;
}

/* -----------------------------------------------------------------------------
   Phase Column
   ----------------------------------------------------------------------------- */

.board-phase-column {
  transition: box-shadow 0.2s ease;
}

.board-phase-column.drag-over {
  box-shadow: 0 0 0 2px var(--accent);
}

.phase-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Phase items container */
.phase-items {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.phase-items::-webkit-scrollbar {
  width: 6px;
}

.phase-items::-webkit-scrollbar-track {
  background: transparent;
}

.phase-items::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
  border-radius: 3px;
}

.phase-items::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
}

/* Empty phase state */
.empty-phase {
  min-height: 120px;
  border: 2px dashed var(--border-default);
  border-radius: 0.5rem;
  margin: 0.5rem;
}

/* Drop placeholder */
.sortable-fallback {
  opacity: 0;
}

/* -----------------------------------------------------------------------------
   Board Switcher
   ----------------------------------------------------------------------------- */

.board-switcher-dropdown {
  animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------------------
   List View
   ----------------------------------------------------------------------------- */

.board-list-view {
  min-height: calc(100vh - 200px);
}

.board-list-row {
  transition: background-color 0.15s ease;
}

.board-list-row:hover {
  background-color: var(--bg-surface-hover);
}

/* Sortable column headers */
.board-list-view th button {
  cursor: pointer;
  user-select: none;
}

.board-list-view th button:hover {
  color: var(--text-primary);
}

.board-list-view th button svg {
  transition: transform 0.15s ease;
}

/* Active sort indicator */
.board-list-view th button[data-active="true"] {
  color: var(--accent);
}

/* Phase dropdown positioning */
.board-list-view .phase-dropdown {
  animation: phaseDropdownFadeIn 0.15s ease-out;
}

@keyframes phaseDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Phase dropdown item hover */
.board-list-view .phase-dropdown button:hover {
  background-color: var(--bg-surface-hover);
}

/* Table horizontal scroll on mobile */
.board-list-view .overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.board-list-view .overflow-x-auto::-webkit-scrollbar {
  height: 6px;
}

.board-list-view .overflow-x-auto::-webkit-scrollbar-track {
  background: transparent;
}

.board-list-view .overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
  border-radius: 3px;
}

/* Table cell styles */
.board-list-view table {
  border-collapse: collapse;
}

.board-list-view tbody tr {
  transition: background-color 0.15s ease;
}

/* Clickable row effect */
.board-list-view tbody tr:hover {
  background-color: var(--bg-surface-hover);
}

/* Item title button */
.board-list-view .item-title {
  cursor: pointer;
}

.board-list-view .item-title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Action buttons always visible */
.board-list-view .action-btn {
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.board-list-view tbody tr:hover .action-btn,
.board-list-view .action-btn:focus {
  opacity: 1;
}

/* Due date colors */
.board-list-view .due-overdue {
  color: #EF4444;
  font-weight: 500;
}

.board-list-view .due-today {
  color: #F59E0B;
  font-weight: 500;
}

.board-list-view .due-upcoming {
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Board Cards (Index page)
   ----------------------------------------------------------------------------- */

.board-card-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .board-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .board-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .board-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -----------------------------------------------------------------------------
   Priority Icons
   ----------------------------------------------------------------------------- */

.priority-urgent {
  color: #EF4444;
  animation: pulse 2s infinite;
}

.priority-high {
  color: #F97316;
}

.priority-medium {
  color: #EAB308;
}

.priority-low {
  color: var(--text-tertiary);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* -----------------------------------------------------------------------------
   Type Badges
   ----------------------------------------------------------------------------- */

.type-badge-task {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.type-badge-deal {
  background: rgba(34, 197, 94, 0.1);
  color: #22C55E;
}

.type-badge-project {
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}

.type-badge-idea {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

/* Dark mode type badges */
html.dark .type-badge-task {
  background: rgba(59, 130, 246, 0.2);
}

html.dark .type-badge-deal {
  background: rgba(34, 197, 94, 0.2);
}

html.dark .type-badge-project {
  background: rgba(139, 92, 246, 0.2);
}

html.dark .type-badge-idea {
  background: rgba(245, 158, 11, 0.2);
}

/* -----------------------------------------------------------------------------
   Mobile Optimizations
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .board-item-card {
    font-size: 0.875rem;
  }

  /* FIX: Allow horizontal scroll - each column takes 80vw */
  .board-phase-column {
    min-width: 80vw;
    max-width: 80vw;
    flex-shrink: 0;
  }

  .phase-items {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
  }

  /* Ensure kanban container scrolls horizontally */
  .kanban-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Touch-friendly drag handles */
  .board-item-card {
    cursor: grab;
    touch-action: none;
  }

  .board-item-card:active {
    cursor: grabbing;
  }
}

/* -----------------------------------------------------------------------------
   Kanban View Specific
   ----------------------------------------------------------------------------- */

.kanban-container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}

.kanban-container > * {
  scroll-snap-align: start;
}

/* Smooth horizontal scroll on touch devices */
@media (hover: none) {
  .kanban-container {
    -webkit-overflow-scrolling: touch;
  }
}

/* Hide scrollbar but keep functionality */
.kanban-container::-webkit-scrollbar {
  height: 8px;
}

.kanban-container::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-container::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
  border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   Dark Mode Specific Fixes
   ----------------------------------------------------------------------------- */

html.dark .board-item-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.2);
}

html.dark .board-item-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4),
              0 2px 4px rgba(0, 0, 0, 0.3);
}

html.dark .board-phase-column {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Better contrast for completed items */
html.dark .board-item-card.completed {
  opacity: 0.7;
}

html.dark .board-item-card.completed .line-through {
  text-decoration-color: var(--text-tertiary);
}

/* Phase header dark mode */
html.dark .phase-header {
  background-color: var(--bg-surface);
}

/* Board index cards dark mode */
html.dark .board-card-cover {
  filter: brightness(0.9);
}

/* =============================================================================
   MOBILE UX ENHANCEMENTS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Bottom Sheet Modal for Mobile
   ----------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Modal transforms into bottom sheet on mobile */
  .modal-overlay[data-controller*="board-item-modal"] {
    align-items: flex-end;
  }

  .modal-overlay .modal-content {
    margin: 0;
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    border-radius: 1.5rem 1.5rem 0 0;
    animation: slideUp 0.3s ease-out;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  /* Bottom sheet drag handle */
  .modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-default);
    border-radius: 2px;
    margin: 0.5rem auto 0;
  }

  /* Ensure modal header is sticky */
  .modal-content > div:first-child > .px-5:first-child {
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
  }
}

/* -----------------------------------------------------------------------------
   Swipe Actions on Cards
   ----------------------------------------------------------------------------- */

.board-item-card-wrapper {
  position: relative;
  overflow: hidden;
}

.board-item-card-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  background: linear-gradient(90deg, transparent, var(--bg-surface-hover));
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.board-item-card-wrapper.swipe-active .board-item-card-actions {
  transform: translateX(0);
}

.board-item-card-actions button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease;
}

.board-item-card-actions button:active {
  transform: scale(0.95);
}

/* Archive action */
.swipe-action-archive {
  background: var(--label-orange);
  color: white;
}

/* Complete action */
.swipe-action-complete {
  background: var(--label-green);
  color: white;
}

/* Delete action */
.swipe-action-delete {
  background: var(--label-red);
  color: white;
}

/* -----------------------------------------------------------------------------
   Touch-Friendly Improvements
   ----------------------------------------------------------------------------- */

/* Minimum touch target size (48px recommended by WCAG) */
@media (hover: none) {
  .board-item-card {
    min-height: 60px;
    padding: 0.875rem;
  }

  /* Larger tap areas for interactive elements */
  .board-item-card button,
  .board-item-card a,
  .board-item-card [data-action] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tab buttons in modal */
  .modal-content button[data-action*="tabs#switch"] {
    min-height: 48px;
    padding: 0.875rem 1rem;
  }

  /* Checklist items */
  .checklist-item {
    min-height: 48px;
    padding: 0.75rem;
  }

  /* Comment actions */
  .comment-action-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* Form inputs */
  .modal-content input,
  .modal-content textarea,
  .modal-content select {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* -----------------------------------------------------------------------------
   Haptic Feedback Visual Indicators
   ----------------------------------------------------------------------------- */

/* Success feedback pulse */
@keyframes successPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.haptic-success {
  animation: successPulse 0.4s ease-out;
}

/* Error feedback shake */
@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.haptic-error {
  animation: errorShake 0.3s ease-out;
}

/* Touch press feedback */
.touch-feedback {
  position: relative;
  overflow: hidden;
}

.touch-feedback::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--accent);
  opacity: 0.2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.touch-feedback:active::after {
  width: 200%;
  height: 200%;
  opacity: 0;
}

/* -----------------------------------------------------------------------------
   Mobile Tab Navigation for Phases
   ----------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Phase tabs sticky at top */
  .mobile-phase-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-primary);
    padding: 0.5rem 0;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 0.5rem;
  }

  .mobile-phase-tabs::-webkit-scrollbar {
    display: none;
  }

  .mobile-phase-tab {
    flex-shrink: 0;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: all 0.15s ease;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
  }

  .mobile-phase-tab.active {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
  }

  .mobile-phase-tab .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    margin-left: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--bg-surface-hover);
  }

  .mobile-phase-tab.active .count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
  }
}

/* -----------------------------------------------------------------------------
   Pull to Refresh Indicator
   ----------------------------------------------------------------------------- */

.pull-to-refresh-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: 0.75rem 1.5rem;
  background: var(--bg-surface);
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  z-index: 100;
  transition: transform 0.2s ease;
}

.pull-to-refresh-indicator.pulling {
  transform: translateX(-50%) translateY(0);
}

.pull-to-refresh-indicator.refreshing .refresh-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* -----------------------------------------------------------------------------
   Quick Add Button (FAB)
   ----------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .quick-add-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .quick-add-fab:active {
    transform: scale(0.95);
  }

  .quick-add-fab:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }

  .quick-add-fab svg {
    width: 24px;
    height: 24px;
  }
}

/* -----------------------------------------------------------------------------
   Real-time Update Pulse Effect
   ----------------------------------------------------------------------------- */

@keyframes realTimeUpdate {
  0% {
    box-shadow: 0 0 0 0 var(--accent);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 255, 123, 84), 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 255, 123, 84), 0);
  }
}

.board-item-card.realtime-update {
  animation: realTimeUpdate 0.6s ease-out;
}

/* New item entrance animation */
@keyframes newItemSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.board-item-card.new-item {
  animation: newItemSlideIn 0.3s ease-out;
}

/* =============================================================================
   BOARD ACCENT COLOR SYSTEM
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Board Container with Accent Variables
   ----------------------------------------------------------------------------- */

.board-container {
  /* Default accent values (teal) - overridden via inline style */
  --board-accent-h: 175;
  --board-accent-s: 60%;
  --board-accent-l: 45%;

  /* Computed accent color */
  --board-accent: hsl(var(--board-accent-h), var(--board-accent-s), var(--board-accent-l));
  --board-accent-hover: hsl(var(--board-accent-h), var(--board-accent-s), calc(var(--board-accent-l) - 8%));
  --board-accent-active: hsl(var(--board-accent-h), var(--board-accent-s), calc(var(--board-accent-l) - 12%));

  /* Light variations for backgrounds */
  --board-accent-5: hsla(var(--board-accent-h), var(--board-accent-s), var(--board-accent-l), 0.05);
  --board-accent-10: hsla(var(--board-accent-h), var(--board-accent-s), var(--board-accent-l), 0.1);
  --board-accent-20: hsla(var(--board-accent-h), var(--board-accent-s), var(--board-accent-l), 0.2);

  /* Lighter shade for light mode backgrounds */
  --board-accent-light: hsl(var(--board-accent-h), calc(var(--board-accent-s) * 0.6), 95%);
  --board-accent-light-hover: hsl(var(--board-accent-h), calc(var(--board-accent-s) * 0.7), 90%);
}

/* Dark mode accent adjustments */
html.dark .board-container {
  --board-accent-light: hsl(var(--board-accent-h), calc(var(--board-accent-s) * 0.4), 15%);
  --board-accent-light-hover: hsl(var(--board-accent-h), calc(var(--board-accent-s) * 0.5), 20%);
}

/* -----------------------------------------------------------------------------
   Board Header with Accent Gradient
   ----------------------------------------------------------------------------- */

.board-header-accent {
  background: linear-gradient(135deg,
    hsl(var(--board-accent-h), var(--board-accent-s), calc(var(--board-accent-l) + 35%)) 0%,
    hsl(var(--board-accent-h), var(--board-accent-s), calc(var(--board-accent-l) + 25%)) 100%);
  border-bottom: 1px solid hsl(var(--board-accent-h), var(--board-accent-s), calc(var(--board-accent-l) + 15%));
}

html.dark .board-header-accent {
  background: linear-gradient(135deg,
    hsl(var(--board-accent-h), calc(var(--board-accent-s) - 20%), 18%) 0%,
    hsl(var(--board-accent-h), calc(var(--board-accent-s) - 20%), 12%) 100%);
  border-bottom-color: hsl(var(--board-accent-h), calc(var(--board-accent-s) - 30%), 25%);
}

/* Accent colored bar at top of board */
.board-accent-bar {
  height: 4px;
  background: var(--board-accent);
  border-radius: 2px 2px 0 0;
}

/* -----------------------------------------------------------------------------
   Board Accent Badges & Buttons
   ----------------------------------------------------------------------------- */

.board-badge-accent {
  background: var(--board-accent-10);
  color: var(--board-accent);
  border: 1px solid var(--board-accent-20);
}

html.dark .board-badge-accent {
  background: var(--board-accent-20);
}

.btn-board-accent {
  background: var(--board-accent);
  color: white;
  transition: background-color 0.15s ease;
}

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

.btn-board-accent:active {
  background: var(--board-accent-active);
}

/* Outline variant */
.btn-board-accent-outline {
  background: transparent;
  color: var(--board-accent);
  border: 1px solid var(--board-accent);
}

.btn-board-accent-outline:hover {
  background: var(--board-accent-10);
}

/* -----------------------------------------------------------------------------
   Board Card with Accent (Index page)
   ----------------------------------------------------------------------------- */

.board-card-accent {
  border-left: 4px solid var(--board-accent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.board-card-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px var(--board-accent-10);
}

/* Accent dot indicator */
.board-accent-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--board-accent);
  box-shadow: 0 0 0 3px var(--board-accent-20);
}

/* -----------------------------------------------------------------------------
   Board Color Picker in Settings
   ----------------------------------------------------------------------------- */

.board-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.board-color-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.board-color-swatch.selected {
  border-color: white;
  box-shadow: 0 0 0 2px var(--text-primary), 0 0 0 4px var(--bg-surface);
}

/* Color swatch backgrounds */
.board-color-swatch[data-color="coral"] {
  background: hsl(15, 90%, 60%);
}
.board-color-swatch[data-color="teal"] {
  background: hsl(175, 60%, 45%);
}
.board-color-swatch[data-color="purple"] {
  background: hsl(270, 70%, 60%);
}
.board-color-swatch[data-color="blue"] {
  background: hsl(220, 80%, 55%);
}
.board-color-swatch[data-color="green"] {
  background: hsl(145, 65%, 45%);
}
.board-color-swatch[data-color="gold"] {
  background: hsl(45, 85%, 50%);
}
.board-color-swatch[data-color="rose"] {
  background: hsl(330, 70%, 60%);
}
.board-color-swatch[data-color="custom"] {
  background: conic-gradient(
    hsl(0, 80%, 60%),
    hsl(60, 80%, 60%),
    hsl(120, 80%, 60%),
    hsl(180, 80%, 60%),
    hsl(240, 80%, 60%),
    hsl(300, 80%, 60%),
    hsl(360, 80%, 60%)
  );
}

/* Custom color input */
.board-custom-color-input {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}

.board-custom-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.board-custom-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* -----------------------------------------------------------------------------
   Board Stats with Accent
   ----------------------------------------------------------------------------- */

.board-stat-accent {
  color: var(--board-accent);
  font-weight: 600;
}

.board-progress-accent {
  height: 4px;
  border-radius: 2px;
  background: var(--board-accent-10);
  overflow: hidden;
}

.board-progress-accent-bar {
  height: 100%;
  background: var(--board-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* -----------------------------------------------------------------------------
   Phase Column with Board Accent Integration
   ----------------------------------------------------------------------------- */

.board-container .board-phase-column.drag-over {
  box-shadow: 0 0 0 2px var(--board-accent);
}

.board-container .board-drop-zone {
  border-color: var(--board-accent);
  background: var(--board-accent-5);
}

/* Selected/Active phase indicator */
.board-phase-column.active-phase {
  box-shadow: inset 0 0 0 2px var(--board-accent);
}