/* Import Inter Tight from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import "tailwindcss";

/* justsayin Design System - See /docs/design-system.md for full documentation */
@theme {
  /* Typography - Inter Tight as default sans font */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Base Colors */
  --color-primary: #222222;
  --color-secondary: #666666;
  --color-accent: #FA5D29;
  --color-background: #e9e9e9;
  --color-surface-1: #f9f9f9;
  --color-surface-2: #fdfdfd;
  --color-border: #d4d4d4;
}

/* Comment thread lines — all positions derived from these base values.
   Change --comment-avatar or --comment-indent and every thread line adapts. */
:root {
  --comment-avatar: 1.75rem;          /* avatar size, matches w-7 (28px) */
  --comment-indent: 1.5rem;           /* reply indentation, matches pl-6 (24px) */
  --comment-line-width: 2px;          /* thread line thickness */
  --comment-avatar-gap: 4px;          /* gap between avatar bottom and thread line start */
  --comment-sibling-gap: 0.75rem;     /* gap between sibling replies, matches space-y-3 (12px) */

  /* derived: parent's thread line */
  --thread-line-left: calc(var(--comment-avatar) / 2 - var(--comment-line-width) / 2);
  --thread-line-top: calc(var(--comment-avatar) + var(--comment-avatar-gap));

  /* derived: child connectors (L-curve + continuation line) */
  --thread-connector-left: calc(-1 * (var(--comment-indent) - var(--comment-avatar) / 2 + var(--comment-line-width) / 2));
  --thread-connector-width: calc(var(--comment-indent) - var(--comment-avatar) / 2 + var(--comment-line-width) / 2);
  --thread-connector-height: calc(var(--comment-avatar) / 2 + var(--comment-line-width) / 2);
  --thread-sibling-extend: calc(-1 * var(--comment-sibling-gap));
}

/* Custom Select Dropdown Styling */
/* Hide default arrow and add custom SVG chevron arrow with proper spacing */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem; /* Space for custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center; /* 12px from right edge, vertically centered */
  background-size: 14px 14px;
  cursor: pointer;
}

/* Number field styling */
input[type="number"] {
  cursor: pointer;
}

/* View Transitions — Kanban cards slide between columns on status change.
   The sidebar z-index keeps it above card groups in the flat overlay (fallback
   for browsers without nested groups). */
::view-transition-group(sidebar) {
  z-index: 100;
}

/* Nested view transition groups (Chrome 140+, Edge 140+).
   Nests card ::view-transition-group pseudo-elements inside the kanban scroll
   container's group, then clips them — cards can no longer bleed through the
   sidebar or escape the board during transitions.
   Key insight: the clip must be on the overflow-x-auto container (the actual
   scroll boundary), NOT on <main> — otherwise cards still bleed into the
   padding gap between sidebar and content area.
   Browsers without support ignore this block and get the flat-overlay fallback. */
@supports (view-transition-group: contain) {
  #kanban-board {
    view-transition-name: kanban-board;
    view-transition-group: contain;
  }

  /* Cards only get individual view-transition-names when the browser can
     also contain/clip them. match-element auto-generates unique names from
     element identity (works with Turbo morph since DOM nodes are reused). */
  #kanban-board [data-kanban-handle] {
    view-transition-name: match-element;
    view-transition-class: kanban-card;
  }

  ::view-transition-group-children(kanban-board) {
    overflow: clip;
  }

  ::view-transition-group(.kanban-card) {
    animation-duration: 0.15s;
  }

  ::view-transition-old(.kanban-card) {
    animation: kanban-fade-out 0.15s ease-out both;
  }

  ::view-transition-new(.kanban-card) {
    animation: kanban-fade-in 0.15s ease-in both;
  }
}

@keyframes kanban-fade-out {
  from { opacity: 1 }
  to   { opacity: 0.4 }
}

@keyframes kanban-fade-in {
  from { opacity: 0.4 }
  to   { opacity: 1 }
}