/*
 * 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.
 */

/* Account for fixed header in scroll behavior */
html { scroll-padding-top: 5rem; }

/* Task view mode switching via CSS inheritance */
[data-view-mode="list"] .task-card-view {
  display: none;
}

[data-view-mode="card"] .task-list-view {
  display: none;
}

[data-view-mode="matrix"] .task-list-view {
  display: none;
}

[data-view-mode="matrix"] .state-phase-pill {
  display: inline-flex;
}

/* Matrix view: hide card details in side column (On Hold, Done, Cancelled) */
[data-view-mode="matrix"] [data-task-organizer-target="matrixOnHoldSection"] [data-card-details],
[data-view-mode="matrix"] [data-task-organizer-target="matrixDoneSection"] [data-card-details],
[data-view-mode="matrix"] [data-task-organizer-target="matrixCancelledSection"] [data-card-details] {
  display: none;
}

/* Hide all card details when toggle is active */
[data-hide-details="true"] [data-card-details] {
  display: none;
}

/* Matrix view row labels - rotated 90 degrees counter-clockwise */
.matrix-row-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  white-space: nowrap;
}

.standup-task-widget [data-task-list-header] {
    display: none;
}

/* List view: indent state sections (Not Started, On Hold, Done, Cancelled) but not phase sections */
[data-view-mode="list"] [data-task-organizer-target="notStartedSection"] [data-task-section-target="content"],
[data-view-mode="list"] [data-task-organizer-target="onHoldSection"] [data-task-section-target="content"],
[data-view-mode="list"] [data-task-organizer-target="doneSection"] [data-task-section-target="content"],
[data-view-mode="list"] [data-task-organizer-target="cancelledSection"] [data-task-section-target="content"] {
  margin-left: 1rem;
}

/* Auto-grow Lexxy editor in standup form up to 50vh */
[id^="standup_form_area_"] lexxy-editor {
  --lexxy-editor-rows: 3lh;
  max-height: 50vh;
}

[id^="standup_form_area_"] lexxy-editor .ProseMirror {
  max-height: 50vh;
  overflow-y: auto;
}

/* Editor.js prose styling */
.codex-editor .ce-block--inserted { background-color: #fef3c7; transition: background-color 1s ease-out; }
.codex-editor .ce-block--inserted.fade { background-color: transparent; }
.codex-editor h1.ce-header { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.codex-editor h2.ce-header { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.codex-editor h3.ce-header { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.codex-editor h4.ce-header { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.codex-editor h5.ce-header { font-size: 0.875rem; font-weight: 600; line-height: 1.5; }
.codex-editor h6.ce-header { font-size: 0.75rem; font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.05em; }
.codex-editor .ce-paragraph { font-size: 1rem; line-height: 1.625; }
.codex-editor a { color: #2563eb; text-decoration: underline; }
.codex-editor a:hover { color: #1d4ed8; }
.codex-editor .cdx-marker { background-color: #fef08a; padding: 0.125rem 0; }
.codex-editor .inline-code { background-color: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: ui-monospace, monospace; font-size: 0.875em; }
.codex-editor .cdx-list { padding-left: 1.5rem; }
.codex-editor .cdx-quote { border-left: 4px solid #d1d5db; padding-left: 1rem; font-style: italic; color: #4b5563; }
.codex-editor .cdx-quote__caption { font-size: 0.875rem; color: #6b7280; font-style: normal; }
.codex-editor .ce-code__textarea { font-family: ui-monospace, monospace; font-size: 0.875rem; background-color: #1f2937; color: #f9fafb; border-radius: 0.5rem; padding: 1rem; }
.codex-editor .cdx-warning { background-color: #fef3c7; border-left: 4px solid #f59e0b; padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; }
.codex-editor .tc-table { border-collapse: collapse; width: 100%; }
.codex-editor .tc-table td { border: 1px solid #e5e7eb; padding: 0.5rem; }