/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Layout constants for staffing timeline */
:root {
  --layout-inset-width: 20px;
  --layout-nav-height: 64px;
  --layout-first-column-width: 175px;
  --layout-total-column-width: 204px;
  --layout-week-width-collapsed: 120px;
  --layout-week-width-stretched: 200px;
  --layout-page-bg: rgb(249, 250, 251);
  --layout-border-color: rgb(229, 231, 235);
  --layout-box-shadow-offset: -26px;

  /* Z-index layers - modals must be above nav (10002) */
  --z-modal: 10003;
  --z-modal-backdrop: 10003;
}

/* Reset default browser styles on <dialog> elements.
   Must be in @layer base so Tailwind utilities (max-w-sm, etc.) can override. */
@layer base {
  dialog {
    padding: 0;
    border: none;
    max-width: none;
    max-height: none;
  }
}

/* Disable vertical bounce on staffing timeline pages (expanded mode) */
body[data-expanded-mode] {
  overscroll-behavior-y: none;
}

/* On smaller screens in horizontal mode, kanban takes full height (chat/files hidden) */
/* Hide chat/files when viewport is below 1024px wide (matches Tailwind lg: breakpoint) */
/* This ensures the bottom panel only shows when there's enough width for chat (420px) + files (420px) + gaps */
@media (max-width: 1023px) {
  body[data-expanded-mode] [data-resizable-horizontal-split-target="top"] {
    height: 100% !important;
    flex: 1 !important;
    max-height: none !important;
  }
  body[data-expanded-mode] [data-resizable-horizontal-split-target="kanbanInner"] {
    padding-bottom: 1rem;
  }
  body[data-expanded-mode] [data-resizable-horizontal-split-target="handle"] {
    display: none !important;
  }
  body[data-expanded-mode] [data-resizable-horizontal-split-target="bottom"] {
    display: none !important;
  }
  /* Reset all kanban columns to equal flex widths on tablet/mobile */
  /* Desktop saved widths don't make sense at narrow viewport sizes */
  body[data-expanded-mode] [data-resizable-columns-target="column"] {
    flex: 1 1 0% !important;
  }
}

/* On large screens, apply max-height constraint to kanban so bottom panel has room */
@media (min-width: 1024px) {
  body[data-expanded-mode] [data-resizable-horizontal-split-target="top"]:not([data-horizontal-split-both-hidden="true"]) {
    max-height: calc(100% - 282px);
    min-height: 175px;
  }
}

/* Hide header buttons and column resize handles on narrow screens */
@media (max-width: 439px) {
  body[data-expanded-mode] [data-horizontal-header-hide] {
    display: none !important;
  }
  body[data-expanded-mode] [data-resizable-columns-target="handle"] {
    display: none !important;
  }
  /* Also hide responsive spacer handles added dynamically */
  body[data-expanded-mode] [data-responsive-spacer="true"] {
    display: none !important;
  }

  /* Make kanban columns full width for horizontal scrolling */
  body[data-expanded-mode] #kanban-board > .flex {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body[data-expanded-mode] [data-resizable-columns-target="column"] {
    flex: 0 0 calc(100vw - 2rem) !important;
    min-width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    scroll-snap-align: start;
  }

  /* Chat slot in kanban: show on portrait, hide on landscape (below lg breakpoint) */
  body[data-expanded-mode] #kanban-chat-slot {
    flex: 0 0 calc(100vw - 2rem) !important;
    min-width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    scroll-snap-align: start;
  }
}

/* Hide chat on mobile landscape orientation (horizontal phone layout is too cramped) */
/* Also hide Chat/Files badges in hidden indicator (can't show those panels on mobile landscape) */
/* Hide the entire hidden indicator if it only contains Chat/Files badges (no column badges) */
@media (max-width: 1023px) and (orientation: landscape) {
  #kanban-chat-slot {
    display: none !important;
  }
  /* Also hide the chat slot handle when chat slot is hidden */
  #kanban-chat-slot-handle {
    display: none !important;
  }
  [data-hidden-badge-chat],
  [data-hidden-badge-files] {
    display: none !important;
  }
  /* Hide indicator if it has no column priority badges (only Chat/Files which are hidden) */
  [data-resizable-horizontal-split-target="hiddenIndicator"]:not(:has([data-column-priority])) {
    display: none !important;
  }
}

/* Hide chat hide button on mobile portrait (chat is forced visible there) */
@media (max-width: 1023px) and (orientation: portrait) {
  [data-chat-hide-button] {
    display: none !important;
  }
}

/* Nav collapse button - visible on mobile (both orientations) */
[data-nav-collapse-button] {
  display: none;
}
@media (max-width: 1023px) {
  [data-nav-collapse-button] {
    display: block;
  }
}

/* Make feature modal full viewport on mobile, overlaying nav */
@media (max-width: 439px) {
  body[data-expanded-mode] [data-feature-modal-target="modal"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10010 !important;
  }
  body[data-expanded-mode] [data-feature-modal-target="container"] {
    inset: 0.5rem !important;
  }
  body[data-expanded-mode] [data-feature-modal-target="title"] {
    font-size: 1rem !important;
  }
}

/* Hide files panel in horizontal mode based on visible panel count */
/* Users can still access files via the +file icon in chat header */
/* 3 panels visible (chat + files + popped): hide files below 1280px */
@media (max-width: 1279px) {
  body[data-expanded-mode] [data-bottom-panel-count="3"] [data-files-panel-split-target="chat"] {
    min-width: 0 !important;
    flex: 1 !important;
  }
  body[data-expanded-mode] [data-bottom-panel-count="3"] [data-files-panel-split-target="files"] {
    display: none !important;
  }
  body[data-expanded-mode] [data-bottom-panel-count="3"] [data-files-panel-split-target="handle"] {
    display: none !important;
  }
}

/* 2 panels visible (chat + files): hide files below 1024px (min widths: 420+420=840px + padding) */
@media (max-width: 1023px) {
  body[data-expanded-mode] [data-bottom-panel-count="2"] [data-files-panel-split-target="chat"] {
    min-width: 0 !important;
    flex: 1 !important;
  }
  body[data-expanded-mode] [data-bottom-panel-count="2"] [data-files-panel-split-target="files"] {
    display: none !important;
  }
  body[data-expanded-mode] [data-bottom-panel-count="2"] [data-files-panel-split-target="handle"] {
    display: none !important;
  }
}

/* 1 panel visible (files only): never hide via media query, only via explicit user action */
/* No CSS rule needed - files stays visible at all viewport widths */

/* Vertical layout: hide kanban and show chat full width below 768px */
@media (max-width: 767px) {
  /* Left panel (chat+files) takes full width on small screens */
  [data-vertical-left-panel] {
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* Add right padding to match left padding on small screens */
  [data-vertical-left-panel] [data-left-panel-inner] {
    padding-right: 1rem;
  }
  /* Hide kanban (right panel) and resize handle on small screens */
  [data-vertical-right-panel] {
    display: none !important;
  }
  [data-vertical-handle] {
    display: none !important;
  }
}

/* Nav content wrapper for expanded/fullscreen pages: when --nav-content-width
   is set (by staffing timeline), uses that width so the nav items align with
   the page content below. Otherwise no max-width constraint (full width). */
.nav-content-wrapper {
  max-width: var(--nav-content-width, none);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Fullscreen mode for wide tables - scrolls horizontally when wider than viewport.
   Horizontal padding is on the content div (px-5), not main, so the padding is part
   of the element's box and included in the scroll area for breathing room. */
main.fullscreen-mode {
  padding-left: 0;
  padding-right: 0;
}

/* Center content when viewport is wider than tables */
main.fullscreen-mode > div {
  margin-left: auto;
  margin-right: auto;
}

/* Pre-position freeze-container elements to prevent FOUC when JS upgrades them
   to position: fixed. Sticky + left keeps them at 20px inset during horizontal scroll.
   max-width constrains to viewport so elements don't push page wider before JS runs. */
main.fullscreen-mode [data-controller~="freeze-container"] {
  position: sticky;
  left: 20px;
  max-width: calc(100vw - 40px);
  overflow-x: clip;
  z-index: 100;
}


/* Sortable drag-and-drop placeholder (shows where item will drop) */
.sortable-ghost {
  opacity: 0.8;
  background: #dbeafe !important;
  border: 2px dashed #3b82f6 !important;
  border-radius: 0.5rem;
}

.sortable-ghost * {
  opacity: 0.7;
}

/* Source card that stays in place while dragging (faded) */
.sortable-source {
  opacity: 0.3 !important;
}

/* The fallback clone that follows the cursor (created by forceFallback) */
.sortable-fallback {
  cursor: grabbing !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
  z-index: 10000 !important;
  background: white !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
  /* CRITICAL: Disable transitions so the fallback snaps to cursor position instantly.
     Without this, cards with transition-all will animate their transform property,
     causing the dragged card to lag behind the cursor instead of following it. */
  transition: none !important;
}

/* Add a slight tilt for kanban cards when dragging */
.sortable-fallback.kanban-card {
  rotate: 2deg;
}

/* The item being dragged */
.sortable-drag {
  cursor: grabbing !important;
}

/* Selected item before drag starts */
.sortable-chosen {
  cursor: grabbing !important;
}

/* Grab cursor for draggable items */
.sortable-item,
[data-sortable-item] {
  cursor: grab;
}

.sortable-item:active,
[data-sortable-item]:active {
  cursor: grabbing;
}

/* Bulk drag: Clear fallback styling so our custom stack shows */
.bulk-drag-fallback {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

/* Bulk drag: Clear ghost styling for custom drop placeholder */
.bulk-drag-ghost {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
  /* Reset height to fit content (ghost inherits original card dimensions) */
  height: auto !important;
  min-height: 0 !important;
  /* Width is set dynamically by JS to match cards in target column */
  /* Fallback min-width if JS can't measure (empty column) */
  min-width: 200px;
  display: block !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Prevent ghost from growing beyond its set width in flex containers */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Bulk drag: Drop placeholder content styling */
.bulk-drop-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 80px;
  border: 2px dashed #60a5fa;
  border-radius: 0.5rem;
  background-color: #eff6ff;
  color: #2563eb;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 1rem;
  gap: 0.25rem;
  box-sizing: border-box;
}

/* Bulk drag: Stacked cards container */
.bulk-drag-stack {
  position: relative;
  background: transparent;
}

/* Bulk drag: Count badge */
.bulk-drag-badge {
  position: absolute;
  top: -10px;
  right: -12px;
  width: 24px;
  height: 24px;
  background: #3b82f6;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Bulk drag: Hide OTHER selected cards during drag (not the dragged card).
   display:none removes them from layout flow entirely so remaining cards
   reflow naturally and calculateLayout() measures accurate heights.
   The dragged card (SortableJS ghost) is never hidden — only other
   selected cards get this class, so SortableJS always has a valid ghost. */
.bulk-drag-hidden {
  display: none !important;
}

/* Bulk drag: Cloned card in stack */
.bulk-drag-clone {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 1;
  pointer-events: none;
  background-color: white !important;
  overflow: hidden;
}

/* Bulk drag: Hide individual card hours in stack (total is shown below) */
.bulk-drag-clone [data-card-hours] {
  display: none;
}

/* Bulk drag: Hours indicator below the dragging stack */
.bulk-drag-hours {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #3b82f6;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Bulk drag: All columns and dropzones get 2px dashed borders during drag */
.bulk-drag-column > div:first-child {
  /* Column header */
  border-width: 2px !important;
  border-style: dashed !important;
}

.bulk-drag-dropzone {
  border-width: 0 2px 2px 2px !important;
  border-style: dashed !important;
  overflow-x: hidden !important;
}

/* Bulk drag: Active column header gets thicker (3px) dashed border */
.bulk-drag-active-column > div:first-child {
  border-width: 3px !important;
  border-style: dashed !important;
}

/* Bulk drag: Active dropzone gets thicker (3px) dashed border, no top border (header has bottom) */
.bulk-drag-active-dropzone {
  border-width: 0 3px 3px 3px !important;
  border-style: dashed !important;
}

/* Bulk drag: Instant height changes during drag (no animation jitter).
   overflow:visible prevents clipping of dashed bottom borders when
   subpixel rounding makes the dropzone slightly taller than the column. */
[data-bulk-dragging] [data-kanban-rows-layout-target="column"] {
  transition: none !important;
  overflow: visible !important;
}

/* Bulk select: Use outline to avoid layout shift */
.kanban-card.bulk-selected {
  outline: 2px solid rgb(59 130 246); /* blue-500 */
  outline-offset: -2px; /* inset to cover the existing border */
  background-color: rgb(239 246 255); /* bg-blue-50 */
}

/* Kanban cards: Pointer cursor on hover (clickable to open details) */
.kanban-card:hover {
  cursor: pointer;
}

/* Bulk select: Selected cards show grab cursor (drag to move) */
.kanban-card.bulk-selected:hover {
  cursor: grab;
}

/* Grabbing cursor while actually dragging (sortable-fallback is the dragged ghost element) */
.sortable-fallback {
  cursor: grabbing !important;
}

/* During any kanban drag, force grabbing cursor on entire page */
[data-bulk-dragging="true"],
[data-bulk-dragging="true"] *,
body:has(.sortable-fallback),
body:has(.sortable-fallback) * {
  cursor: grabbing !important;
}

/* Prevent turbo-frame from expanding parent in flexbox layouts */
/* This allows wide gantt charts to scroll without forcing parent containers to expand */

/* Force overflow visible on all gantt cell right elements to allow text labels to overflow */
[data-gantt-cell-right] {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
turbo-frame {
  min-width: 0;
}

/* Global button cursor - excludes buttons with explicit cursor classes */
button:not([class*="cursor-"]) {
  cursor: pointer;
}

/* Force cursor during drag/resize operations - body class takes precedence */
body.cursor-ew-resize * {
  cursor: ew-resize !important;
}
body.cursor-grabbing * {
  cursor: grabbing !important;
}
body.cursor-crosshair * {
  cursor: crosshair !important;
}

/* Make drag handle lighter and non-interactive when feature is expanded (either disclosure or estimates panel) */
[data-controller*="feature-toggle"]:has(
    [data-feature-estimates-inline-target="expanded"]:not([hidden])
  )
  .drag-handle,
[data-controller*="feature-toggle"]:has(
    [data-feature-toggle-target="disclosure"]:not([hidden])
  )
  .drag-handle {
  color: #d1d5db !important; /* gray-300 - two shades lighter than gray-500 */
  pointer-events: none;
  cursor: default !important;
}

[data-controller*="feature-toggle"]:has(
    [data-feature-estimates-inline-target="expanded"]:not([hidden])
  )
  .drag-handle:hover,
[data-controller*="feature-toggle"]:has(
    [data-feature-toggle-target="disclosure"]:not([hidden])
  )
  .drag-handle:hover {
  color: #d1d5db !important; /* Keep same color on hover */
}

/* Show drag handle in collapsed mode (minimal mode) */
.feature-collapsed .drag-handle {
  /* Visible in minimal mode */
}

/* Remove negative margin from drag handle SVG in minimal mode */
.feature-collapsed .drag-handle svg {
  margin-left: 0 !important;
}

/* ===========================================
   Generic keyboard navigation focus indicators
   Used by all navigable nodes and containers
   =========================================== */

/* Primary focus state - bright blue ring */
.kbd-focus {
  outline: none !important;
  --tw-ring-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
  border-color: transparent !important;
}

/* Hidden focus state - subtle blue ring indicating position is preserved */
.kbd-focus-hidden {
  outline: none !important;
  --tw-ring-color: rgb(191 219 254); /* blue-200 */
  box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
  border-color: transparent !important;
}

/* Feature-specific scroll margins (features need extra space for expanded panels) */
.feature-focused {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 175px;
}

.feature-focus-hidden {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 175px;
}

/* Base padding for all role rows to prevent shifting */
[data-role-buttons] {
  padding: 0.25rem;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

.role-focused {
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 0.375rem;
}

.role-focused .button-focused {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  scroll-margin-top: 80px;
  scroll-margin-bottom: 175px;
}

/* Shortcut key indicators - only show when scope is active */
.shortcut-key {
  text-decoration: none;
  font-weight: inherit;
}

/* Show underlines when the shortcut is active */
.shortcut-key[data-shortcut-active="true"],
[data-shortcut][data-shortcut-active="true"] .shortcut-key {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Consistent underline styling on shortcut indicators */
.shortcut-key,
u {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Sidebar toggle: underline the right half of the chevron icon (the shortcut key half) */
.sidebar-shortcut-icon {
  position: relative;
  display: inline-flex;
}

[data-shortcut][data-shortcut-active="true"] .sidebar-shortcut-icon::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 50%;
  border-bottom: 1px solid currentColor;
}


/* Hide estimate button popovers when feature is expanded */
[data-feature-estimates-inline-target="collapsed"]:has(
    + [data-feature-estimates-inline-target="expanded"]:not([hidden])
  )
  [popover] {
  display: none !important;
}

/* Collapsed feature view - show only essentials */
.feature-collapsed {
  /* Fixed height to match role focus bar for popout alignment */
  height: 42px !important;
  /* Horizontal padding only - vertical centering via flexbox */
  padding: 0 0.5rem !important;
  /* Reduce bottom margin from 0.75rem/12px to 0.375rem/6px */
  margin-bottom: 0.375rem !important;
}

/* Ensure collapsed feature content is vertically centered */
.feature-collapsed > [data-feature-content-wrapper] {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
}

/* Make the first row (containing name and action links) fill the width */
.feature-collapsed > [data-feature-content-wrapper] > div:first-child {
  width: 100% !important;
}

/* Remove bottom margin from last feature */
.feature-collapsed:last-child {
  margin-bottom: 0 !important;
}

[id^="feature_"]:not(.feature-collapsed):last-child {
  margin-bottom: 0 !important;
}

.feature-collapsed [data-collapsible-content] {
  display: none !important;
}

/* Show only action links when feature is focused (keyboard navigation) */
.feature-collapsed.feature-focused [data-feature-action-links],
.feature-collapsed.kbd-focus [data-feature-action-links] {
  display: flex !important;
}

.feature-collapsed [data-feature-toggle-target="disclosure"] {
  display: none !important;
}

.feature-collapsed [data-collapsed-only] {
  display: flex !important;
}

/* Global form element styling */
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
  border: 1px solid rgb(156, 163, 175); /* gray-400 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus {
  outline: 2px solid rgb(37, 99, 235); /* blue-600 */
  outline-offset: 0;
}

/* Remove focus outline from popovers */
el-popover:focus,
[popovertarget]:focus {
  outline: none;
}

/* ===========================================
   Team Assignment keyboard navigation
   =========================================== */

/* Container hidden focus - shown when navigating inside team assignments */
[data-has-subnav].subnav-active [data-card-root] {
  --tw-ring-color: rgb(191 219 254); /* blue-200 */
  box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
}

/* Allocation matrix cell - remove native focus styling */
[data-half-day-cell] {
  outline: none !important;
}

[data-half-day-cell]:focus {
  outline: none !important;
}

[data-half-day-cell]:focus-visible {
  outline: none !important;
}

/* Allocation matrix cell focus - keyboard navigation */
[data-half-day-cell].allocation-cell-focused {
  outline: 2px solid #2563eb !important; /* blue-600 */
  outline-offset: 1px;
  z-index: 10;
  position: relative;
}

/* ===========================================
   Responsive Team Member Column
   Narrow column with vertical text on mobile
   =========================================== */

/* Team member column - narrow with vertical text on mobile, wide on sm+ */
/* Width is dynamically calculated by mobile_column_sync_controller.js below sm breakpoint */
.team-member-column {
  width: auto;
  min-width: 40px;
}

@media (min-width: 640px) {
  .team-member-column {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
}

/* Vertical text container - shown only on mobile */
.team-member-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  /* vertical-rl + rotate(180deg) = text reads bottom-to-top, lines wrap left-to-right (correct order) */
  white-space: normal; /* Allow wrapping */
  padding: 4px;
  font-size: 0.5rem; /* Smaller font (8px) on mobile for better fit */
  line-height: 0.625rem; /* Tight line height */
  /* Center horizontally within the column */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  /* Constrain height to fit within row - max 60px to fit in 68px row with padding */
  max-height: 60px;
  overflow: hidden;
}

/* Hide vertical content on sm+ screens */
@media (min-width: 640px) {
  .team-member-vertical {
    display: none;
  }
}

/* Full content container - hidden on mobile, shown on sm+ */
.team-member-full {
  display: none;
}

@media (min-width: 640px) {
  .team-member-full {
    display: block;
  }
}

/* ===========================================
   Container Queries for Timeline Controls
   Responsive layout based on container width
   =========================================== */

/* Define timeline controls as a container for container queries */
.timeline-controls-container {
  container-type: inline-size;
  container-name: timeline-controls;
}

/* Force stacked/wrapped layout when container is narrow */
/* This overrides the xl: breakpoint behavior based on container width */

/* At narrow widths, force the main flex container to column layout */
@container timeline-controls (max-width: 1000px) {
  .timeline-controls-row {
    flex-direction: column !important;
  }
}

/* At narrow widths, force buttons grid to single column */
@container timeline-controls (max-width: 700px) {
  .timeline-controls-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .timeline-controls-buttons > * {
    width: 100% !important;
  }

  /* Make direct child buttons fill their container, but not nested links in the view toggle */
  .timeline-controls-buttons > div > button,
  .timeline-controls-buttons > div > form > button {
    width: 100% !important;
  }
}

/* At medium widths, allow 2 columns for buttons */
@container timeline-controls (min-width: 701px) and (max-width: 1000px) {
  .timeline-controls-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .timeline-controls-buttons > * {
    width: 100% !important;
  }

  /* Make direct child buttons fill their container, but not nested links in the view toggle */
  .timeline-controls-buttons > div > button,
  .timeline-controls-buttons > div > form > button {
    width: 100% !important;
  }
}

/* Make view toggle links fill 50% each when in grid mode */
@container timeline-controls (max-width: 1000px) {
  .timeline-view-toggle {
    width: 100% !important;
  }

  .timeline-view-toggle a {
    flex: 1 !important;
  }
}

/* Force heading section to wrap when narrow */
@container timeline-controls (max-width: 500px) {
  .timeline-controls-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ===========================================
   Container Queries for Staffing Table Footer
   Responsive layout based on container width
   =========================================== */

/* Define staffing table card as a container for container queries */
.staffing-table-container {
  container-type: inline-size;
  container-name: staffing-table;
}

/* At narrow widths, stack footer vertically with controls on top, instructions below */
@container staffing-table (max-width: 700px) {
  /* Stack footer vertically */
  .staffing-table-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  /* Instructions take full width */
  .staffing-table-footer > .text-sm.text-gray-600 {
    width: 100% !important;
  }

  /* Stack controls vertically */
  .staffing-table-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .staffing-table-controls > * {
    width: 100% !important;
  }

  /* Make the save button full width */
  .staffing-table-controls input[type="submit"],
  .staffing-table-controls button[type="submit"] {
    width: 100% !important;
  }
}

/* At medium widths, show controls on top, instructions below */
@container staffing-table (min-width: 701px) and (max-width: 1000px) {
  .staffing-table-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  /* Instructions take full width */
  .staffing-table-footer > .text-sm.text-gray-600 {
    width: 100% !important;
  }

  .staffing-table-controls {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

/* At wide widths, show row layout with instructions left, controls right */
@container staffing-table (min-width: 1001px) {
  .staffing-table-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .staffing-table-controls {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* Staffing table header - force column layout at narrow widths */
@container staffing-table (max-width: 500px) {
  .staffing-table-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .staffing-table-header-buttons {
    width: 100% !important;
    flex-direction: column !important;
  }

  .staffing-table-header-buttons > form,
  .staffing-table-header-buttons > button {
    width: 100% !important;
  }

  .staffing-table-header-buttons > form > button,
  .staffing-table-header-buttons > form > input[type="submit"] {
    width: 100% !important;
  }
}

/* Staffing table header - row layout at medium widths */
@container staffing-table (min-width: 501px) {
  .staffing-table-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .staffing-table-header-buttons {
    flex-direction: row !important;
  }
}

/* ===========================================
   Chat @mention tags in messages
   =========================================== */

/* Feature mentions in chat messages - blue styling matching the input box */
.mention-tag-chat {
  display: inline;
  background-color: rgb(219 234 254); /* bg-blue-100 */
  color: rgb(30 64 175); /* text-blue-800 */
  padding: 0.125rem 0.5rem;
  margin: 0 0.125rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: inherit;
  white-space: nowrap;
  line-height: 1.75;
}

/* Document mentions in chat messages - amber/yellow styling */
.mention-tag-chat-document {
  display: inline;
  background-color: rgb(254 243 199); /* bg-amber-100 */
  color: rgb(146 64 14); /* text-amber-800 */
  padding: 0.125rem 0.5rem;
  margin: 0 0.125rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: inherit;
  white-space: nowrap;
  line-height: 1.75;
}

/* Role mentions in chat messages - purple styling */
.mention-tag-chat-role {
  display: inline;
  background-color: rgb(243 232 255); /* bg-purple-100 */
  color: rgb(107 33 168); /* text-purple-800 */
  padding: 0.125rem 0.5rem;
  margin: 0 0.125rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: inherit;
  white-space: nowrap;
  line-height: 1.75;
}

/* Clickable feature mentions - cursor pointer and hover effect */
.mention-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.mention-clickable:hover {
  background-color: rgb(191 219 254); /* bg-blue-200 */
  transform: translateY(-1px);
}

.mention-clickable:active {
  transform: translateY(0);
}

/* Highlight animation for kanban cards when mention is clicked */
.mention-highlight {
  animation: mention-pulse 2s ease-out;
}

@keyframes mention-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(59 130 246 / 0.7); /* blue-500 */
    background-color: rgb(219 234 254); /* bg-blue-100 */
  }
  25% {
    box-shadow: 0 0 0 8px rgb(59 130 246 / 0.4);
    background-color: rgb(191 219 254); /* bg-blue-200 */
  }
  50% {
    box-shadow: 0 0 0 12px rgb(59 130 246 / 0.2);
    background-color: rgb(219 234 254); /* bg-blue-100 */
  }
  100% {
    box-shadow: 0 0 0 0 rgb(59 130 246 / 0);
    background-color: white;
  }
}

/* ===========================================
   MoSCoW filter button hover effect
   Increases background opacity from 25% to 50% on hover
   =========================================== */

.moscow-filter-btn:hover {
  background-color: var(--hover-bg) !important;
}

/* ===========================================
   MoSCoW priority pill hover effect
   Increases background opacity from 25% to 50% on hover
   =========================================== */

.moscow-pill-btn:hover {
  background-color: var(--hover-bg) !important;
}

/* ===========================================
   Gantt estimate highlight animation
   Used when scrolling to newly scheduled estimate
   Applied to estimate container for visible bounding box effect
   =========================================== */

.estimate-highlight {
  z-index: 20 !important; /* Bring to front during highlight */
  animation: estimate-highlight-box 2s ease-out;
  pointer-events: none;
}

@keyframes estimate-highlight-box {
  0% {
    box-shadow: 0 0 0 2px rgb(34 197 94 / 0.9), 0 0 12px 4px rgb(34 197 94 / 0.4); /* green-500 */
    background-color: rgb(34 197 94 / 0.08);
  }
  50% {
    box-shadow: 0 0 0 3px rgb(34 197 94 / 0.7), 0 0 20px 8px rgb(34 197 94 / 0.3);
    background-color: rgb(34 197 94 / 0.12);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(34 197 94 / 0), 0 0 0 0 rgb(34 197 94 / 0);
    background-color: rgb(34 197 94 / 0);
  }
}

/* ===========================================
   Markdown preview in file preview modal
   Basic typography for rendered markdown
   =========================================== */

.markdown-preview h1 { font-size: 1.5rem; font-weight: 700; margin: 1.25rem 0 0.75rem; line-height: 1.3; }
.markdown-preview h2 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; line-height: 1.35; }
.markdown-preview h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75rem 0 0.5rem; line-height: 1.4; }
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.5rem; }
.markdown-preview p { margin: 0.5rem 0; line-height: 1.6; }
.markdown-preview ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
.markdown-preview ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
.markdown-preview li { margin: 0.25rem 0; line-height: 1.6; }
.markdown-preview code { background: rgb(243 244 246); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
.markdown-preview pre { background: rgb(243 244 246); padding: 0.75rem 1rem; border-radius: 0.375rem; overflow-x: auto; margin: 0.75rem 0; }
.markdown-preview pre code { background: none; padding: 0; }
.markdown-preview blockquote { border-left: 3px solid rgb(209 213 219); padding-left: 1rem; color: rgb(107 114 128); margin: 0.75rem 0; }
.markdown-preview a { color: rgb(37 99 235); text-decoration: underline; }
.markdown-preview a:hover { color: rgb(29 78 216); }
.markdown-preview hr { border: none; border-top: 1px solid rgb(229 231 235); margin: 1rem 0; }
.markdown-preview table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.markdown-preview th,
.markdown-preview td { border: 1px solid rgb(229 231 235); padding: 0.5rem 0.75rem; text-align: left; }
.markdown-preview th { background: rgb(249 250 251); font-weight: 600; }
.markdown-preview img { max-width: 100%; border-radius: 0.375rem; }