/* Tigersoft timeline overrides for GLPI ticket content.
   Keep these rules scoped: GLPI core sets timeline min-widths that can overflow
   on narrow screens when imported e-mails contain long preformatted lines.
   Page height and scrolling stay under GLPI core control. */

#itil-object-container .timeline-item {
  min-width: 0 !important;
  max-width: 100% !important;
}

#itil-object-container .timeline-item .timeline-content {
  min-width: 0 !important;
  max-width: min(820px, 100%) !important;
}

#itil-object-container .timeline-item .timeline-content::before,
#itil-object-container .timeline-item .timeline-content::after {
  content: none !important;
  display: none !important;
}

#itil-object-container .read-only-content pre {
  max-width: 100% !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#itil-object-container .read-only-content .long_text,
#itil-object-container .read-only-content table,
#itil-object-container .read-only-content tbody,
#itil-object-container .read-only-content tr,
#itil-object-container .read-only-content td {
  max-width: 100% !important;
}

#itil-object-container .read-only-content table {
  width: 100% !important;
  table-layout: fixed !important;
}

#itil-object-container .read-only-content td {
  width: auto !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#itil-object-container .read-only-content img {
  max-width: 100% !important;
  height: auto !important;
}

#new-itilobject-form {
  container: tigersoft-composer / inline-size;
  width: 100%;
  min-width: 0;
}

/* Flatpickr's fixed-width calendar includes a week-number column. */
@media (max-width: 575.98px) {
  body:has(#new-itilobject-form > .show) .flatpickr-calendar.open {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    animation: none !important;
  }

  body:has(#new-itilobject-form > .show) .flatpickr-calendar.open::before,
  body:has(#new-itilobject-form > .show) .flatpickr-calendar.open::after {
    display: none;
  }

  body:has(#new-itilobject-form > .show) .flatpickr-calendar .flatpickr-rContainer {
    flex: 1 1 auto;
    min-width: 0;
  }

  body:has(#new-itilobject-form > .show) .flatpickr-calendar :is(.flatpickr-days, .dayContainer) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body:has(#new-itilobject-form > .show) .flatpickr-calendar .flatpickr-day {
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
  }
}

:is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) {
  width: 100%;
  min-width: 0;
  scroll-margin-top: 16px;
}

@container tigersoft-composer (max-width: 820px) {
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) > .row {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .user-part {
    display: none !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .todo-list-state {
    display: none !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) form > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) form > .row > .order-first {
    order: -1 !important;
    padding-right: 12px !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .card-footer {
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .content-part {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .timeline-content,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .card-body,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) :is(.itilfollowup, .itiltask, .itilsolution),
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) :is(.itilfollowup, .itiltask, .itilsolution) form,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .tox-tinymce,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .fileupload,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .input-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .tox-tinymce,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .fileupload {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block),
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .card-body,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) :is(.itilfollowup, .itiltask, .itilsolution),
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) :is(.itilfollowup, .itiltask, .itilsolution) form {
    overflow: visible !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) :is(.itilfollowup, .itiltask, .itilsolution) form > .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) :is(.itilfollowup, .itiltask, .itilsolution) form .card-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .select2-container {
    min-width: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .form-check {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* Phone layout only. Keep the desktop/tablet form unchanged, but stop GLPI's
   two-column form grid from squeezing labels and controls into narrow strips. */
@container tigersoft-composer (max-width: 820px) {
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) {
    min-width: 0 !important;
    scroll-margin-top: 16px;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .form-field.row:not(.d-none) {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .form-field.row > .col-form-label,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .form-field.row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }


  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .form-field.row > .col-form-label {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .form-field.row > .col-form-label > i[title]::after {
    content: " " attr(title);
    margin-left: 4px;
    font-family: var(--tblr-font-sans-serif);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    white-space: normal;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .form-field.row > .col-form-label > i:not([title])[data-bs-original-title]::after {
    content: " " attr(data-bs-original-title);
    margin-left: 4px;
    font-family: var(--tblr-font-sans-serif);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    white-space: normal;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .tox-tinymce,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .tox-editor-container,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .tox-edit-area,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .fileupload,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .fileupload .input-group,
  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .fileupload .input-group {
    flex-wrap: wrap !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .fileupload .input-group > * {
    min-width: 0 !important;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .tigersofterp-mail-action-group {
    align-items: stretch;
  }

  :is(#new-ITILFollowup-block, #new-TicketTask-block, #new-ITILSolution-block, #new-Document_Item-block, #new-TicketValidation-block) .tigersofterp-mail-action-group > .btn {
    flex: 1 1 100%;
    white-space: normal;
  }
}

/* GLPI renders these three options as icon-only labels on wider screens.
   Stack only these compact rows so their existing tooltip text can be shown. */
@media (min-width: 576px) {
  #new-ITILFollowup-block .form-field.row:has(> .col-form-label[for^="dropdown_itilfollowuptemplates_id"]),
  #new-ITILFollowup-block .form-field.row:has(> .col-form-label[for^="is_private_"]),
  #new-ITILFollowup-block .form-field.row:has(> .col-form-label[for^="_fup_to_kb_"]),
  #new-ITILFollowup-block .form-field.row:has(> .field-container > button[name^="search_knowbaseitem_"]) {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #new-ITILFollowup-block .form-field.row > .col-form-label[for^="dropdown_itilfollowuptemplates_id"],
  #new-ITILFollowup-block .form-field.row > .col-form-label[for^="is_private_"],
  #new-ITILFollowup-block .form-field.row > .col-form-label[for^="_fup_to_kb_"],
  #new-ITILFollowup-block .form-field.row:has(> .field-container > button[name^="search_knowbaseitem_"]) > .col-form-label,
  #new-ITILFollowup-block .form-field.row:has(> .col-form-label[for^="dropdown_itilfollowuptemplates_id"]) > .field-container,
  #new-ITILFollowup-block .form-field.row:has(> .col-form-label[for^="is_private_"]) > .field-container,
  #new-ITILFollowup-block .form-field.row:has(> .col-form-label[for^="_fup_to_kb_"]) > .field-container,
  #new-ITILFollowup-block .form-field.row:has(> .field-container > button[name^="search_knowbaseitem_"]) > .field-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  #new-ITILFollowup-block .form-field.row > .col-form-label[for^="dropdown_itilfollowuptemplates_id"] > i[title]::after,
  #new-ITILFollowup-block .form-field.row > .col-form-label[for^="is_private_"] > i[title]::after {
    content: " " attr(title);
    margin-left: 4px;
    font-family: var(--tblr-font-sans-serif);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    white-space: normal;
  }

  #new-ITILFollowup-block .form-field.row > .col-form-label[for^="_fup_to_kb_"] > i[data-bs-original-title]::after {
    content: " " attr(data-bs-original-title);
    margin-left: 4px;
    font-family: var(--tblr-font-sans-serif);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    white-space: normal;
  }
}

:is(#new-ITILFollowup-block, #new-ITILSolution-block) .form-field.row:has(> .field-container > button[name^="search_knowbaseitem_"]) > .col-form-label {
  display: block !important;
}

:is(#new-ITILFollowup-block, #new-ITILSolution-block) .form-field.row:has(> .field-container > button[name^="search_knowbaseitem_"]) > .col-form-label::after {
  content: "Suche in der Knowledge Base";
  font-family: var(--tblr-font-sans-serif);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  white-space: normal;
}

#new-ITILFollowup-block .form-field:has(select[id^="dropdown_requesttypes_id"]) {
  display: none !important;
}

/* Bootstrap's negative checkbox margin otherwise protrudes from the ERP grid. */
#new-ITILFollowup-block .form-check:has(> input[name="_tigersofterp_billable"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0 !important;
}

#new-ITILFollowup-block input[name="_tigersofterp_billable"] {
  float: none;
  flex-shrink: 0;
  margin: 0;
}

#new-ITILFollowup-block .tigersofterp-inline-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
  color: #53637d;
  font-size: 12px;
  font-weight: 700;
}

#new-ITILFollowup-block .tigersofterp-inline-divider::before,
#new-ITILFollowup-block .tigersofterp-inline-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: #d8dee9;
}

#new-ITILFollowup-block .tigersofterp-recipient-group {
  border-top: 1px solid #d8dee9;
}

#new-ITILFollowup-block .tigersofterp-recipient-group-title {
  padding: 7px 0 4px;
  color: #111827;
  font-weight: 700;
}

#new-ITILFollowup-block .tigersofterp-recipient-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 5px 0;
  border-top: 1px solid #edf0f5;
}

#new-ITILFollowup-block .tigersofterp-recipient-row .form-check-input {
  position: static;
  justify-self: center;
  opacity: 1;
}

#new-ITILFollowup-block .tigersofterp-recipient-row .form-check-label {
  min-width: 0;
}

#new-ITILFollowup-block .tigersofterp-recipient-email {
  color: #8a6500;
}

#new-ITILFollowup-block .tigersofterp-mail-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#new-ITILFollowup-block .tigersofterp-mail-followup-submit {
  border-color: #f2b400;
  color: #111827;
  background: #fff7d6;
}

#new-ITILFollowup-block .tigersofterp-mail-followup-submit:hover,
#new-ITILFollowup-block .tigersofterp-mail-followup-submit.is-armed {
  border-color: #f2b400;
  color: #111827;
  background: #f2b400;
}

#new-ITILFollowup-block .tigersofterp-mail-followup-cancel {
  white-space: nowrap;
}

/* Keep portrait videos and their controls inside the PhotoSwipe viewport. */
.pswp__content > span:has(> video) {
  margin-top: 64px !important;
  height: calc(100vh - 96px);
  height: calc(100dvh - 96px);
}

.pswp__content video {
  display: block;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  object-fit: contain;
}