/*
 * 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;
}

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

/* Fullscreen mode for wide tables */
main.fullscreen-mode {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem; /* px-5 */
  padding-right: 1.25rem; /* px-5 */
  /* max-width set dynamically via JavaScript */
}

/* Sortable drag-and-drop placeholder */
.sortable-ghost {
  opacity: 0.4;
  background: transparent !important;
  border: 2px dashed #3b82f6 !important;
  border-radius: 0.5rem;
}

.sortable-ghost * {
  visibility: hidden;
}

/* Keep grab cursor while dragging */
.sortable-drag {
  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;
  font-weight: bold;
}

/* Action links in features and containers: keep underline but remove bold (colors are already prominent) */
[data-feature-action-links] .shortcut-key[data-shortcut-active="true"],
[data-feature-action-links] [data-shortcut][data-shortcut-active="true"] .shortcut-key,
[data-navigable-item] .shortcut-key[data-shortcut-active="true"],
[data-navigable-item] [data-shortcut][data-shortcut-active="true"] .shortcut-key {
  font-weight: normal;
}

/* 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] {
  display: block !important;
  margin-left: auto !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;
  }
}