/* Susan Kare 1984 Macintosh Aesthetic */
/* Black & white, pixel-perfect, Chicago-style */

@font-face {
  font-family: 'Chicago';
  src: url('/assets/fonts/ChicagoFLF.woff2') format('woff2'),
       url('/assets/fonts/ChicagoFLF.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg: #fff;
  --fg: #000;
  --border: 2px solid #000;
  --font: 'Chicago', 'Geneva', 'Monaco', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 12px;
  background: var(--bg);
  color: var(--fg);
  /* Classic Mac desktop pattern */
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23000'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}

#app {
  height: 100%;
  padding: 8px;
}

/* Window */
.window {
  background: var(--bg);
  border: var(--border);
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.window-titlebar {
  background: var(--bg);
  border-bottom: var(--border);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Classic Mac title bar pattern */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    #000 1px,
    #000 2px
  );
}

.window-close {
  width: 12px;
  height: 12px;
  border: var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.window-title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  background: var(--bg);
  padding: 0 8px;
}

.window-resize {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Project Tabs */
.project-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-bottom: var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}

.project-tab {
  padding: 4px 12px;
  border: var(--border);
  background: var(--bg);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 12px;
  transition: background 100ms linear, color 100ms linear;
}

.project-tab.active {
  background: var(--fg);
  color: var(--bg);
}

/* Focus state for tabs */
.project-tab:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.project-tab:focus:not(:focus-visible) {
  box-shadow: none;
}

.project-tab:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.project-tab-add {
  padding: 4px 8px;
  border: 1px dashed #000;
  background: var(--bg);
  cursor: pointer;
  font-family: var(--font);
  transition: background 100ms linear, color 100ms linear;
}

/* Focus state for add project tab */
.project-tab-add:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.project-tab-add:focus:not(:focus-visible) {
  box-shadow: none;
}

.project-tab-add:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

/* Kanban Board */
.kanban-board {
  display: flex;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-height: 0;
}

.kanban-column {
  min-width: 160px;
  max-width: 200px;
  flex: 1;
  border: var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.column-header {
  padding: 6px;
  border-bottom: var(--border);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  /* Subtle pattern for headers */
}

/* Column collapse button - Susan Kare style */
.column-collapse {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: transform 100ms linear;
}

.column-collapse:hover {
  background: var(--fg);
  color: var(--bg);
}

.column-collapse:focus {
  outline: none;
  box-shadow: 
    0 0 0 1px var(--bg),
    0 0 0 2px var(--fg);
}

.column-collapse:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Collapsed column state */
.kanban-column.collapsed {
  min-width: 44px;
  max-width: 44px;
  transition: min-width 150ms linear, max-width 150ms linear;
}

.kanban-column.collapsed .column-header {
  flex-direction: column;
  padding: 8px 4px;
  border-bottom: none;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
}

.kanban-column.collapsed .column-collapse {
  transform: rotate(-90deg);
}

.kanban-column.collapsed .column-icon {
  margin-top: 8px;
}

.kanban-column.collapsed .column-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin-top: 8px;
  font-size: 11px;
}

.kanban-column.collapsed .column-count {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  background: var(--fg);
  color: var(--bg);
  padding: 2px 4px;
  min-width: 20px;
  text-align: center;
}

.kanban-column:not(.collapsed) .column-count {
  display: none;
}

.kanban-column.collapsed .column-tasks {
  display: none;
}

/* Smooth column transitions */
.kanban-column {
  transition: min-width 150ms linear, max-width 150ms linear;
}

.column-icon {
  font-size: 14px;
}

.column-tasks {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Smooth scrolling - subtle, not bouncy */
  scroll-behavior: smooth;
  /* Ensure lanes can scroll independently */
  min-height: 0;
}

/* Task Card */
.task-card {
  border: var(--border);
  padding: 6px;
  background: var(--bg);
  cursor: pointer;
  /* Crisp transitions - Mac-like, no mush */
  transition: 
    box-shadow 100ms linear,
    opacity 100ms linear,
    transform 100ms linear,
    border-color 100ms linear;
}

.task-card:hover {
  /* Subtle inset shadow effect - classic Mac */
  box-shadow: inset -1px -1px 0 #000;
}

.task-card:active {
  background: var(--fg);
  color: var(--bg);
}

/* Keyboard focus - classic Mac selection rectangle */
.task-card:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.task-card:focus:not(:focus-visible) {
  box-shadow: none;
}

.task-card:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.task-card.blocked {
  /* Diagonal stripes for blocked */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    #000 3px,
    #000 4px
  );
}

.task-card.blocked .task-title {
  background: var(--bg);
  padding: 2px 4px;
}

.task-title {
  font-weight: bold;
  font-size: 11px;
  word-break: break-word;
}

.task-desc {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.7;
  word-break: break-word;
  line-height: 1.3;
}

.task-blocker {
  font-size: 10px;
  margin-top: 4px;
  padding: 2px 4px;
  background: var(--fg);
  color: var(--bg);
}

/* Task Card - Priority Dot */
.task-priority {
  display: inline-block;
  margin-right: 4px;
  font-size: 8px;
}

.task-priority.high {
  color: #c00;
}

.task-priority.medium {
  color: #000;
}

.task-priority.low {
  opacity: 0.3;
}

/* Task Card - Meta (timestamps) */
.task-meta {
  font-size: 9px;
  margin-top: 4px;
  display: flex;
  gap: 8px;
  opacity: 0.7;
}

.task-due {
  display: flex;
  align-items: center;
  gap: 2px;
}

.task-due.overdue {
  color: #c00;
  font-weight: bold;
  opacity: 1;
}

.task-created {
  font-style: italic;
}

/* Overdue card indicator */
.task-card.overdue {
  border-left: 4px solid #c00;
}

/* Drag & Drop States */
.task-card {
  cursor: grab;
}

.task-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
  transform: scale(0.98);
  /* Inverted colors during drag - classic Mac selection */
  background: var(--fg);
  color: var(--bg);
}

.task-card.dragging .task-priority.high {
  color: #ff6b6b;
}

.column-tasks.drag-over {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    #000 3px,
    #000 4px
  );
  transition: background-image 100ms linear;
}

.task-card.drag-over-above {
  border-top: 3px solid #000;
  margin-top: -3px;
  transition: border-top 50ms linear, margin-top 50ms linear;
}

.task-card.drag-over-below {
  border-bottom: 3px solid #000;
  margin-bottom: -3px;
  transition: border-bottom 50ms linear, margin-bottom 50ms linear;
}

/* Drop placeholder */
.drop-placeholder {
  border: 2px dashed #000;
  background: var(--bg);
  min-height: 40px;
  margin: 4px 0;
  /* Gentle pulse to show drop target */
  animation: placeholder-pulse 0.6s steps(2) infinite;
}

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

/* Empty state for lanes */
.column-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 60px;
  border: 1px dashed #000;
  margin: 4px;
  opacity: 0.5;
}

.column-empty-text {
  font-size: 10px;
  font-style: italic;
  text-align: center;
  padding: 8px;
}

/* Add Task Button */
.add-task-btn {
  margin: 8px;
  padding: 8px 16px;
  border: var(--border);
  background: var(--bg);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 100ms linear, color 100ms linear;
}

.add-task-btn:active {
  background: var(--fg);
  color: var(--bg);
}

/* Focus state for add button */
.add-task-btn:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.add-task-btn:focus:not(:focus-visible) {
  box-shadow: none;
}

.add-task-btn:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
  opacity: 0;
  transition: opacity 100ms linear, background 100ms linear;
}

.modal-overlay.active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.3);
}

/* Crisp modal appearance */
.modal-overlay .modal {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 100ms linear, opacity 100ms linear;
}

.modal-overlay.active .modal {
  transform: scale(1);
  opacity: 1;
}

.modal {
  background: var(--bg);
  border: var(--border);
  width: 100%;
  max-width: 320px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-titlebar {
  padding: 4px 6px;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    #000 1px,
    #000 2px
  );
}

.modal-title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  background: var(--bg);
  padding: 0 8px;
}

#modalClose {
  cursor: pointer;
  padding: 2px 4px;
  transition: background 100ms linear, color 100ms linear;
}

#modalClose:hover {
  background: var(--fg);
  color: var(--bg);
}

#modalClose:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

#modalClose:focus:not(:focus-visible) {
  box-shadow: none;
}

#modalClose:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

/* Form */
form {
  padding: 12px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 6px;
  border: var(--border);
  background: var(--bg);
  font-family: var(--font);
  font-size: 12px;
  transition: box-shadow 100ms linear;
}

/* Focus state for form inputs */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Priority Selector */
.priority-selector {
  display: flex;
  gap: 4px;
}

.priority-btn {
  flex: 1;
  padding: 4px 8px;
  border: var(--border);
  background: var(--bg);
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear;
}

.priority-btn:active,
.priority-btn.active {
  background: var(--fg);
  color: var(--bg);
}

/* Focus state for priority buttons */
.priority-btn:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
  z-index: 1;
  position: relative;
}

.priority-btn:focus:not(:focus-visible) {
  box-shadow: none;
}

.priority-btn:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
  z-index: 1;
  position: relative;
}

.priority-btn[data-priority="high"] {
  color: #c00;
}

.priority-btn[data-priority="high"].active {
  background: #c00;
  color: var(--bg);
  border-color: #c00;
}

/* Date input styling */
input[type="date"] {
  font-family: var(--font);
  font-size: 12px;
}

.btn {
  padding: 6px 16px;
  border: var(--border);
  background: var(--bg);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear;
}

.btn:active {
  background: var(--fg);
  color: var(--bg);
}

/* Focus state for buttons */
.btn:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.btn:focus:not(:focus-visible) {
  box-shadow: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.btn-primary {
  background: var(--fg);
  color: var(--bg);
}

.btn-primary:active {
  background: var(--bg);
  color: var(--fg);
}

.btn-primary:focus-visible {
  box-shadow: 
    0 0 0 2px var(--fg),
    0 0 0 4px var(--bg);
}

.btn-delete {
  margin-right: auto;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border: 1px solid #000;
}

::-webkit-scrollbar-thumb {
  background: var(--bg);
  border: 1px solid #000;
  /* Classic Mac scrollbar pattern */
  background-image: repeating-linear-gradient(
    0deg,
    #000 0px,
    #000 1px,
    transparent 1px,
    transparent 2px
  );
}

/* Loading State - Classic Mac Style */
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.loading-overlay.active {
  display: flex;
}

.loading-box {
  background: var(--bg);
  border: var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.loading-icon {
  width: 16px;
  height: 16px;
  display: flex;
  flex-wrap: wrap;
}

.loading-icon span {
  width: 8px;
  height: 8px;
  background: var(--fg);
}

/* Animate the 4 quadrants like classic Mac watch */
.loading-icon span:nth-child(1) { animation: loading-blink 0.8s infinite 0s; }
.loading-icon span:nth-child(2) { animation: loading-blink 0.8s infinite 0.2s; }
.loading-icon span:nth-child(3) { animation: loading-blink 0.8s infinite 0.6s; }
.loading-icon span:nth-child(4) { animation: loading-blink 0.8s infinite 0.4s; }

@keyframes loading-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.loading-text {
  font-weight: bold;
}

/* Disabled button state */
.btn:disabled,
.add-task-btn:disabled,
.project-tab:disabled,
.project-tab-add:disabled,
.priority-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  /* Subtle dither pattern for disabled */
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23888'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23888'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}

/* Button loading state - animated dither */
.btn.loading,
.project-tab-add.loading {
  opacity: 0.7;
  cursor: wait;
  animation: button-loading 0.5s steps(2) infinite;
}

@keyframes button-loading {
  0%, 49% { 
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-size: 2px 2px;
  }
  50%, 100% { 
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23000'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-size: 2px 2px;
  }
}

/* Inline loading indicator for columns */
.column-loading {
  text-align: center;
  padding: 8px;
  font-style: italic;
  opacity: 0.6;
}

/* Card loading state */
.task-card.saving {
  opacity: 0.5;
  pointer-events: none;
}

/* Offline Indicator - Susan Kare style */
.offline-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--fg);
  color: var(--bg);
  padding: 4px 8px;
  font-size: 11px;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Classic Mac alert pattern - invert of desktop */
  border-bottom: 2px solid var(--fg);
}

.offline-banner.active {
  display: flex;
}

.offline-icon {
  font-size: 12px;
  /* Blink animation like classic Mac alert */
  animation: blink-icon 1s step-end infinite;
}

@keyframes blink-icon {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.offline-text {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Shift app down when offline banner shows */
body.offline #app {
  padding-top: 28px;
}

/* PWA Install Prompt - Susan Kare 1984 Mac Style */
.install-prompt {
  display: none;
  position: fixed;
  bottom: 12px;
  right: 12px;
  background: var(--bg);
  border: var(--border);
  padding: 6px 8px;
  font-size: 11px;
  z-index: 500;
  align-items: center;
  gap: 8px;
  /* Subtle shadow like classic Mac dialog */
  box-shadow: 2px 2px 0 #000;
}

.install-prompt.active {
  display: flex;
}

.install-icon {
  font-size: 14px;
  font-weight: bold;
}

.install-text {
  white-space: nowrap;
}

.install-btn {
  padding: 3px 10px;
  border: var(--border);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font);
  font-size: 10px;
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear;
}

.install-btn:hover {
  background: var(--bg);
  color: var(--fg);
}

.install-btn:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--fg),
    0 0 0 4px var(--bg);
}

.install-dismiss {
  padding: 2px 6px;
  border: 1px solid #000;
  background: var(--bg);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 100ms linear;
}

.install-dismiss:hover {
  opacity: 1;
}

.install-dismiss:focus {
  outline: none;
  opacity: 1;
}

/* Hide on very small screens - not enough room */
@media (max-width: 360px) {
  .install-prompt {
    left: 12px;
    right: 12px;
    bottom: 8px;
  }
  
  .install-text {
    flex: 1;
  }
}

/* Error flash for optimistic rollback */
.window-titlebar.error-flash {
  animation: error-flash 0.6s ease-out;
}

@keyframes error-flash {
  0%, 100% { background-color: transparent; }
  25%, 75% { background-color: #c00; }
  50% { background-color: transparent; }
}

.window-titlebar.error-flash .window-title {
  animation: title-flash 0.6s ease-out;
}

@keyframes title-flash {
  0%, 100% { color: #000; }
  25%, 75% { color: #fff; }
  50% { color: #000; }
}

/* Optimistic task styling (pending confirmation) */
.task-card.pending {
  opacity: 0.7;
}

/* New task creation animation - crisp Mac-like */
.task-card.just-created {
  animation: card-appear 150ms linear;
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Task moved animation */
.task-card.just-moved {
  animation: card-flash 200ms linear;
}

@keyframes card-flash {
  0% { 
    background: var(--fg); 
    color: var(--bg);
  }
  100% { 
    background: var(--bg); 
    color: var(--fg);
  }
}

/* Toast Notifications - Susan Kare Style */
.toast-container {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 8px 12px;
  border: var(--border);
  font-family: var(--font);
  font-size: 11px;
  max-width: 280px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-error {
  background: #c00;
  color: #fff;
  border-color: #000;
}

.toast-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
}

.toast-close {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 2px 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 10px;
  flex-shrink: 0;
}

.toast-close:hover {
  background: #fff;
  color: #c00;
}

/* Quick Add Input - Susan Kare minimal */
.quick-add {
  display: flex;
  margin: 4px;
  border: 1px dashed #000;
  background: var(--bg);
}

.quick-add-input {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 11px;
  outline: none;
}

.quick-add-input::placeholder {
  opacity: 0.4;
  font-style: italic;
}

.quick-add:focus-within {
  border-style: solid;
  border-width: 2px;
  margin: 3px; /* Compensate for border width change */
}

.quick-add-input:focus {
  outline: none;
}

/* Quick add loading state */
.quick-add.saving {
  opacity: 0.5;
  pointer-events: none;
}

.quick-add.saving .quick-add-input::placeholder {
  opacity: 1;
  font-style: normal;
}

/* Delete Confirmation Modal - Classic Mac Alert Dialog */
.confirm-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 150;
  opacity: 0;
  transition: opacity 100ms linear, background 100ms linear;
}

.confirm-overlay.active {
  display: flex;
  opacity: 1;
  background: rgba(0, 0, 0, 0.3);
}

.confirm-dialog {
  background: var(--bg);
  border: var(--border);
  display: flex;
  max-width: 320px;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 100ms linear, opacity 100ms linear;
  /* Classic Mac dialog shadow */
  box-shadow: 4px 4px 0 #000;
}

.confirm-overlay.active .confirm-dialog {
  transform: scale(1);
  opacity: 1;
}

/* Classic Mac Alert Icon - inverted box with caution symbol */
.confirm-icon {
  background: var(--fg);
  color: var(--bg);
  width: 48px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--border);
  flex-shrink: 0;
}

.confirm-icon-symbol {
  font-size: 28px;
  font-weight: bold;
  font-family: var(--font);
  /* Classic pixel-art caution look */
  text-shadow: 
    1px 0 0 var(--bg),
    -1px 0 0 var(--bg),
    0 1px 0 var(--bg),
    0 -1px 0 var(--bg);
}

.confirm-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.confirm-title {
  font-weight: bold;
  font-size: 12px;
}

.confirm-message {
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.9;
}

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Danger button - inverted with emphasis */
.btn-danger {
  background: var(--fg);
  color: var(--bg);
  border: var(--border);
  /* Extra border for emphasis - classic Mac default button */
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

.btn-danger:active {
  background: var(--bg);
  color: var(--fg);
}

.btn-danger:focus-visible {
  box-shadow: 
    0 0 0 2px var(--fg),
    0 0 0 4px var(--bg),
    0 0 0 6px var(--fg);
}

/* Touch Drag Ghost - Classic Mac floating selection */
.touch-drag-ghost {
  background: var(--fg) !important;
  color: var(--bg) !important;
  border: 3px solid var(--fg) !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  opacity: 0.95;
  transition: none !important;
}

.touch-drag-ghost .task-title {
  color: var(--bg);
}

.touch-drag-ghost .task-desc,
.touch-drag-ghost .task-meta {
  color: var(--bg);
  opacity: 0.8;
}

.touch-drag-ghost .task-priority.high {
  color: #ff6b6b;
}

.touch-drag-ghost .task-blocker {
  background: var(--bg);
  color: var(--fg);
}

/* Disable text selection during touch drag */
.task-card {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Touch device hover state fix */
@media (hover: none) and (pointer: coarse) {
  .task-card:hover {
    box-shadow: none;
  }
  
  .task-card:active:not(.dragging) {
    background: var(--fg);
    color: var(--bg);
  }
}

/* Mobile optimizations */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  
  .kanban-column {
    min-width: 140px;
  }
  
  .task-title {
    font-size: 12px;
  }
  
  /* Larger touch targets on mobile */
  .task-card {
    padding: 10px;
    min-height: 44px;
  }
  
  .column-tasks {
    gap: 6px;
    padding: 6px;
  }
}