/* TranbjergDnD character creator mobile layout and stability patch */

#character-editor-modal {
  overscroll-behavior: contain;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
}

#character-editor-modal .card,
#character-editor-modal form,
#character-editor-modal section,
#character-editor-modal details,
#character-editor-modal .grid,
#character-editor-modal .flex,
#character-editor-modal div {
  min-width: 0;
}

#character-editor-modal p,
#character-editor-modal span,
#character-editor-modal label,
#character-editor-modal summary,
#character-editor-modal h2,
#character-editor-modal h3,
#character-editor-modal h4 {
  overflow-wrap: anywhere;
  word-break: normal;
}

#dnd-character-tab-bar {
  position: sticky;
  top: -0.45rem;
  z-index: 45;
  margin-inline: -0.25rem;
  padding: 0.5rem 0.25rem 0.65rem;
  background: color-mix(in srgb, var(--portal-theme-surface, #ffffff) 94%, transparent);
  backdrop-filter: blur(10px);
}

#dnd-character-tab-bar > [role="tablist"] {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.1rem 0.05rem 0.35rem;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

#dnd-character-tab-bar [data-dnd-character-tab] {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none;
  white-space: nowrap;
}

#character-editor-modal details > summary {
  line-height: 1.35;
}

#character-editor-modal table {
  max-width: 100%;
}

@media (max-width: 760px) {
  #character-editor-modal {
    padding: 0.35rem !important;
  }

  #character-editor-modal > .card,
  #character-editor-modal > div.card,
  #character-editor-modal .max-w-6xl {
    width: 100%;
    max-width: 100%;
    margin-block: 0.35rem !important;
    padding: 0.85rem !important;
    border-radius: 0.85rem !important;
  }

  #character-editor-modal .sheet-section {
    padding-top: 1rem;
  }

  #character-editor-modal .grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #character-editor-modal .two-column {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #character-editor-modal [class*="max-h-"] {
    max-height: none !important;
  }

  #character-editor-modal [class*="overflow-y-auto"] {
    overflow-y: visible !important;
  }

  #character-editor-modal input,
  #character-editor-modal select,
  #character-editor-modal textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }

  #character-editor-modal textarea {
    line-height: 1.5;
  }

  #character-editor-modal .btn-primary,
  #character-editor-modal .btn-secondary,
  #character-editor-modal .btn-danger {
    width: auto;
    max-width: 100%;
    padding: 0.72rem 0.95rem;
    line-height: 1.2;
    white-space: normal;
  }

  #character-editor-modal .calc-input {
    width: 3.4rem;
    min-width: 3.4rem;
    padding-inline: 0.2rem;
  }

  #character-editor-modal .sheet-check-row {
    grid-template-columns: 1.25rem 3.4rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
  }

  #character-editor-modal .spell-level-box {
    padding: 0.8rem;
  }

  #character-editor-modal details {
    scroll-margin-top: 5rem;
  }

  #character-editor-modal .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  #character-editor-modal table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  #character-editor-modal > .card,
  #character-editor-modal > div.card,
  #character-editor-modal .max-w-6xl {
    padding: 0.7rem !important;
  }

  #dnd-character-tab-bar {
    top: -0.35rem;
  }

  #dnd-character-tab-bar [data-dnd-character-tab] {
    padding: 0.58rem 0.75rem !important;
    font-size: 0.76rem !important;
  }

  #character-editor-modal h2 {
    font-size: 1.65rem !important;
  }

  #character-editor-modal h3 {
    font-size: 1.05rem !important;
  }
}

/* ------------------------------------------------------------
   Mobile card layout fix: option/spell/item cards
   ------------------------------------------------------------
   On narrow screens the action button was kept beside the text with
   shrink-0. That left the text column only a few characters wide and
   caused words to wrap like C-le-av-e. Stack the action below the text
   instead and keep card text wrapping by words whenever possible.
*/
@media (max-width: 760px) {
  #character-editor-modal #dnd-rules-automation-content,
  #character-editor-modal #dnd-available-spells-list,
  #character-editor-modal #dnd-selected-spells-list,
  #character-editor-modal #dnd-available-items-list,
  #character-editor-modal #dnd-character-items-list {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  #character-editor-modal #dnd-rules-automation-content .flex.items-start.justify-between.gap-3,
  #character-editor-modal #dnd-available-spells-list .flex.items-start.justify-between.gap-3,
  #character-editor-modal #dnd-selected-spells-list .flex.items-start.justify-between.gap-3,
  #character-editor-modal #dnd-available-items-list .flex.items-start.justify-between.gap-3,
  #character-editor-modal #dnd-character-items-list .flex.items-start.justify-between.gap-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    align-items: start !important;
    justify-content: stretch !important;
  }

  #character-editor-modal #dnd-rules-automation-content .flex.items-start.justify-between.gap-3 > .min-w-0,
  #character-editor-modal #dnd-available-spells-list .flex.items-start.justify-between.gap-3 > .min-w-0,
  #character-editor-modal #dnd-selected-spells-list .flex.items-start.justify-between.gap-3 > .min-w-0,
  #character-editor-modal #dnd-available-items-list .flex.items-start.justify-between.gap-3 > .min-w-0,
  #character-editor-modal #dnd-character-items-list .flex.items-start.justify-between.gap-3 > .min-w-0 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #character-editor-modal #dnd-rules-automation-content .flex.items-start.justify-between.gap-3 > button,
  #character-editor-modal #dnd-rules-automation-content .flex.items-start.justify-between.gap-3 > .shrink-0,
  #character-editor-modal #dnd-available-spells-list .flex.items-start.justify-between.gap-3 > button,
  #character-editor-modal #dnd-available-spells-list .flex.items-start.justify-between.gap-3 > .shrink-0,
  #character-editor-modal #dnd-selected-spells-list .flex.items-start.justify-between.gap-3 > button,
  #character-editor-modal #dnd-selected-spells-list .flex.items-start.justify-between.gap-3 > .shrink-0,
  #character-editor-modal #dnd-available-items-list .flex.items-start.justify-between.gap-3 > button,
  #character-editor-modal #dnd-available-items-list .flex.items-start.justify-between.gap-3 > .shrink-0,
  #character-editor-modal #dnd-character-items-list .flex.items-start.justify-between.gap-3 > button,
  #character-editor-modal #dnd-character-items-list .flex.items-start.justify-between.gap-3 > .shrink-0 {
    justify-self: start !important;
    align-self: start !important;
    width: auto !important;
    max-width: 100% !important;
  }

  #character-editor-modal #dnd-available-spells-list .flex.flex-col.gap-2.shrink-0,
  #character-editor-modal #dnd-selected-spells-list .flex.flex-col.gap-2.shrink-0 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #character-editor-modal #dnd-rules-automation-content p,
  #character-editor-modal #dnd-rules-automation-content span,
  #character-editor-modal #dnd-rules-automation-content summary,
  #character-editor-modal #dnd-available-spells-list p,
  #character-editor-modal #dnd-available-spells-list span,
  #character-editor-modal #dnd-selected-spells-list p,
  #character-editor-modal #dnd-selected-spells-list span,
  #character-editor-modal #dnd-available-items-list p,
  #character-editor-modal #dnd-available-items-list span,
  #character-editor-modal #dnd-character-items-list p,
  #character-editor-modal #dnd-character-items-list span {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto;
  }

  #character-editor-modal #dnd-rules-automation-content .whitespace-pre-wrap,
  #character-editor-modal #dnd-available-spells-list .whitespace-pre-wrap,
  #character-editor-modal #dnd-selected-spells-list .whitespace-pre-wrap,
  #character-editor-modal #dnd-available-items-list .whitespace-pre-wrap,
  #character-editor-modal #dnd-character-items-list .whitespace-pre-wrap {
    white-space: normal !important;
  }
}