/**
 * TaskBuilder - dates on small screens.
 * Date chips across the SaaS screens use inline-flex + white-space:nowrap (and
 * often a fixed height). On phones their container gets narrower than a full
 * date/time, so the text spilled out of its pill/box. Below 782px (WordPress'
 * mobile breakpoint) dates may wrap and shrink to their container instead.
 * Desktop is untouched. !important is used because some screens enqueue their
 * stylesheet after this one (shortcodes load styles while rendering).
 */
@media (max-width: 782px) {

  /* ---------- Date chips / labels ---------- */
  #wppm_task_list_container .wppm-tl-date,
  #wppm_project_list_container .wppm-pl-date,
  #wppm_project_list_container .wppm-pl-kanban-card-date,
  .wppm-mt-due-date,
  .wppm-mt-due-hint,
  .wppm-mt-date,
  .wppm-db-shell .wppm-db-due,
  .wppm-db-shell .wppm-db-date,
  .wppm-fd-due,
  .wppm-fd-date,
  .wppm-kb-shell .wppm-kb-date,
  .wppm-kb-shell .wppm_task_due_date_grid_view.wppm-kb-date,
  .wppm-op-shell .wppm-op-rt-due,
  .wppm-op-shell .wppm-op-sidebar .wppm-op-deadline-date,
  .wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline-date,
  .wppm-ot-shell .wppm_thread.is-log .wppm_comment_date,
  .wppm-op-shell .wppm_proj_thread.is-log .wppm_comment_date,
  .wppm-op-shell .wppm_comment_date,
  .wppm-ot-shell .wppm_comment_date,
  .wppm-pt-date {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    row-gap: 2px;
  }

  /* Inner parts of split dates (day + time on separate lines) */
  #wppm_task_list_container .wppm-tl-date > *,
  #wppm_project_list_container .wppm-pl-date > *,
  .wppm-pt-date > *,
  .wppm-kb-shell .wppm-kb-date > *,
  .wppm-mt-due > * {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  /* Icons stay on the first line and never shrink */
  #wppm_task_list_container .wppm-tl-date .dashicons,
  #wppm_project_list_container .wppm-pl-date .dashicons,
  #wppm_project_list_container .wppm-pl-kanban-card-date .dashicons,
  .wppm-mt-due-date .dashicons,
  .wppm-mt-date .dashicons,
  .wppm-db-shell .wppm-db-due .dashicons,
  .wppm-kb-shell .wppm-kb-date .dashicons,
  .wppm-op-shell .wppm-op-sidebar .wppm-op-deadline .dashicons,
  .wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline .dashicons {
    flex-shrink: 0;
  }

  /* Containers that hold a date: let them shrink so the date can wrap */
  .wppm-mt-due,
  .wppm-op-shell .wppm-op-sidebar .wppm-op-deadline,
  .wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline,
  .wppm-op-shell #wppm_project_status_widget .wppm_sidebar_labels.wppm-op-deadline,
  .wppm-ot-shell #wppm_status_widget .wppm_sidebar_labels.wppm-ot-deadline,
  .wppm-ot-shell .wppm-op-fact,
  .wppm-op-shell .wppm-op-fact,
  .wppm-ot-shell .wppm-op-fact dd,
  .wppm-op-shell .wppm-op-fact dd {
    flex-wrap: wrap;
    min-width: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Frontend dashboard: the due column was a fixed 58px+ that could not shrink */
  .wppm-fd-due {
    flex: 0 1 auto !important;
    text-align: right;
  }

  /* Timeline / calendar day numbers */
  .wppm-tv-shell .wppm-tv-c-date span {
    min-width: 0 !important;
  }

  /* ---------- Date inputs ---------- */
  /* Phone browsers (iOS Safari especially) give <input type="date"> a built-in
     min-width that ignores width:100%, so it stuck out of filter panels. */
  .wppm_bootstrap input[type="date"],
  .wppm-mt input[type="date"],
  #tb-advanced-panel input[type="date"],
  .wppm_bootstrap input[type="datetime-local"],
  .wppm_bootstrap .flatpickr-input,
  .wppm-ot-shell .wppm-ot-due-input,
  .wppm-ot-shell #wppm_edit_tend_date,
  .wppm-op-shell #wppm_edit_pend_date {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .wppm_bootstrap input[type="date"],
  .wppm-mt input[type="date"],
  #tb-advanced-panel input[type="date"] {
    display: block;
    width: 100% !important;
    -webkit-appearance: none;
    appearance: none;
  }
  .wppm_bootstrap input[type="date"]::-webkit-date-and-time-value,
  .wppm-mt input[type="date"]::-webkit-date-and-time-value,
  #tb-advanced-panel input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }

  /* Two-column date rows in dialogs (Start | End) stack on narrow phones */
  .wppm-etd-grid:has(input[id*="date"]),
  .wppm-etd-grid:has(.flatpickr-input) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 480px) {
  /* Very small phones: slightly smaller date text so most dates fit on one line */
  #wppm_task_list_container .wppm-tl-date,
  #wppm_project_list_container .wppm-pl-date,
  .wppm-mt-due-date,
  .wppm-db-shell .wppm-db-due,
  .wppm-fd-due,
  .wppm-kb-shell .wppm-kb-date,
  .wppm-pt-date {
    font-size: 11.5px !important;
  }
}