/*
 * Core record details and workflow forms
 *
 * Equipment, project, and work-order records are populated after their
 * screens load.  This layer is deliberately scoped to those six screens so
 * that the dynamic markup has the same visual structure as a static page,
 * without changing IDs, handlers, or data bindings.
 */

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-container {
  width: min(100%, 1440px);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(16px, 2.25vw, 32px) clamp(16px, 2.5vw, 36px) 40px;
  scrollbar-gutter: stable both-edges;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-container > .loading-state {
  display: grid;
  min-height: min(46vh, 390px);
  place-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-workspace {
  width: 100%;
  min-width: 0;
  gap: clamp(16px, 1.8vw, 24px);
}

/* A generic legacy rule fixes every .detail-actions bar to the viewport.
   These are in-flow record actions, so keep them with the record they act on. */
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-workspace > .detail-quick-actions {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-quick-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-quick-actions .btn {
  min-height: 46px;
  min-width: min(100%, 148px);
  flex: 0 1 auto;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 30px);
  border-radius: clamp(22px, 2vw, 30px);
}

/* Small always-visible QR thumbnail next to the quick-action bar on the
   Work Order screen (Fiix shows one directly on the page, not only in a
   modal) — the canvas itself is rendered at 220px by renderQuickQrCanvas()
   then scaled down here since that function has no size parameter. */
#screen-task-detail .task-inline-qr {
  display: inline-flex;
  margin-top: 10px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--collection-line, #e4ebf1);
  border-radius: 10px;
  width: fit-content;
}
#screen-task-detail .task-inline-qr canvas,
#screen-task-detail .task-inline-qr img {
  width: 72px !important;
  height: 72px !important;
  display: block;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-main,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-copy,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-meta {
  min-width: 0;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-meta-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-summary-grid {
  grid-auto-rows: 1fr;
  gap: 12px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-summary-card {
  display: grid;
  grid-template-rows: auto minmax(0, auto) 1fr;
  align-content: start;
  min-width: 0;
  min-height: 122px;
  padding: 16px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-summary-value,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-summary-card__value {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-main-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-primary-column,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-aside {
  min-width: 0;
  gap: 16px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-tab-host {
  gap: 16px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-tab-bar {
  max-width: 100%;
  padding: 5px;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  scroll-padding-inline: 5px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-tab-btn {
  min-height: 44px;
  padding-inline: 15px;
  border-radius: 13px;
  box-shadow: none;
  white-space: nowrap;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-tab-panel.active,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-tab-body {
  display: grid;
  min-width: 0;
  gap: 16px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-section-heading {
  padding-inline: 2px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-section {
  min-width: 0;
  border-radius: 20px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-section-title {
  min-height: 52px;
  padding-inline: 18px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid .detail-field,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid .detail-info-field {
  min-width: 0;
  min-height: 92px;
  padding: 16px;
  border-bottom: 0;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid .detail-field span,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid .detail-info-field span {
  overflow-wrap: anywhere;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-side-card {
  min-width: 0;
  padding: 18px;
  border-radius: 20px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-context-list > div {
  grid-template-columns: minmax(88px, .72fr) minmax(0, 1.28fr);
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .linked-list,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .member-grid {
  gap: 12px;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .linked-item {
  min-height: 104px;
  padding: 15px 16px;
  text-align: start;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .linked-item-head {
  align-items: flex-start;
}

:is(#screen-detail, #screen-project-detail, #screen-task-detail) .linked-item-head strong,
:is(#screen-detail, #screen-project-detail, #screen-task-detail) .linked-item-meta {
  overflow-wrap: anywhere;
}

/* Task tab content is returned as sibling cards, rather than a wrapper. */
#screen-task-detail .task-comment-card + .task-comment-card,
#screen-task-detail .task-note-card + .task-note-card,
#screen-task-detail .task-timeline-item + .task-timeline-item,
#screen-task-detail .task-file-item-wrapper + .task-file-item-wrapper {
  margin-top: 10px;
}

#screen-task-detail .task-file-item-wrapper,
#screen-task-detail .task-file-item {
  min-width: 0;
}

#screen-task-detail .task-file-item strong,
#screen-task-detail .task-file-item small {
  overflow-wrap: anywhere;
}

/* Forms --------------------------------------------------------------- */

:is(#screen-form, #screen-project-form, #screen-task-form) .form-container {
  width: min(100%, 1280px);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(16px, 2.25vw, 30px) clamp(16px, 2.5vw, 34px) 136px;
  scrollbar-gutter: stable both-edges;
}

:is(#screen-form, #screen-project-form, #screen-task-form) .workflow-form {
  min-width: 0;
  gap: 20px;
}

:is(#screen-form, #screen-project-form, #screen-task-form) .form-card {
  min-width: 0;
  gap: 20px;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 24px;
}

:is(#screen-form, #screen-project-form, #screen-task-form) .form-card > * {
  min-width: 0;
}

:is(#screen-form, #screen-project-form, #screen-task-form) .form-card__heading {
  min-height: 40px;
  padding-bottom: 16px;
}

/* Summary and cost are direct children of the dynamically grouped equipment
   card.  Without an explicit span they occupy a single 12-column cell. */
#milestone-form .form-card > .form-group {
  grid-column: 1 / -1;
}

#milestone-form .form-card > .form-group:has(#field-cost) {
  grid-column: span 4;
  max-width: 320px;
}

#milestone-form .form-card > .form-row-2,
#milestone-form .form-card > .form-row-3,
#milestone-form .form-card > .form-row-4 {
  min-width: 0;
}

:is(#screen-form, #screen-project-form, #screen-task-form) .form-card .form-row-2,
:is(#screen-form, #screen-project-form, #screen-task-form) .form-card .form-row-3,
:is(#screen-form, #screen-project-form, #screen-task-form) .form-card .form-row-4 {
  column-gap: 18px;
  row-gap: 18px;
}

:is(#screen-form, #screen-project-form, #screen-task-form) .form-card .form-group {
  min-width: 0;
}

:is(#screen-form, #screen-project-form, #screen-task-form) .form-card .form-group > label {
  overflow-wrap: anywhere;
}

#task-form .task-assignees-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 12px;
}

#task-form .task-assignee-option {
  min-width: 0;
  min-height: 60px;
}

@media (min-width: 760px) {
  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 340px);
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero:has(.detail-hero-progress) {
    grid-template-columns: minmax(0, 1fr) minmax(236px, 276px);
    align-items: stretch;
    column-gap: clamp(20px, 2.4vw, 34px);
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero:has(.detail-hero-progress) .detail-hero-main {
    grid-column: 1;
    grid-row: 1;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero:has(.detail-hero-progress) .detail-hero-progress {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 720px) and (max-width: 1079px) {
  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-container {
    width: 100%;
    padding: 12px 12px calc(116px + env(safe-area-inset-bottom, 0px));
    scrollbar-gutter: auto;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-workspace {
    gap: 14px;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero {
    padding: 18px;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-main {
    flex-wrap: wrap;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-copy {
    flex-basis: calc(100% - 62px);
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-status {
    width: 100%;
    margin-inline-start: 62px;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-quick-actions .btn {
    width: 100%;
    min-width: 0;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-tab-bar {
    margin-inline: -2px;
    border-radius: 16px;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-tab-btn {
    min-height: 42px;
    padding-inline: 13px;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-summary-card {
    min-height: 114px;
    padding: 14px;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-section-title {
    min-height: 50px;
    padding-inline: 15px;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid {
    grid-template-columns: 1fr;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid .detail-field,
  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-grid .detail-info-field {
    min-height: 72px;
    padding: 14px 15px;
  }

  :is(#screen-form, #screen-project-form, #screen-task-form) .form-container {
    width: 100%;
    padding: 12px 12px calc(118px + env(safe-area-inset-bottom, 0px));
    scrollbar-gutter: auto;
  }

  :is(#screen-form, #screen-project-form, #screen-task-form) .workflow-form {
    gap: 14px;
  }

  :is(#screen-form, #screen-project-form, #screen-task-form) .form-card {
    gap: 16px;
    padding: 16px;
    border-radius: 20px;
  }

  #milestone-form .form-card > .form-group:has(#field-cost) {
    grid-column: 1 / -1;
    max-width: none;
  }

  #task-form .task-assignees-list {
    grid-template-columns: 1fr;
  }

  #screen-task-detail .task-file-item-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch !important;
  }

  #screen-task-detail .task-file-delete-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    opacity: 1;
  }
}

@media (max-width: 390px) {
  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-summary-grid,
  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-quick-actions {
    grid-template-columns: 1fr;
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-copy {
    flex-basis: calc(100% - 56px);
  }

  :is(#screen-detail, #screen-project-detail, #screen-task-detail) .detail-hero-status {
    margin-inline-start: 56px;
  }

  :is(#screen-form, #screen-project-form, #screen-task-form) .form-card {
    padding: 14px;
  }
}