/* general pp mobile enhancements*/
@media (max-width: 767px) {
  /* pp increase radio picklist size (mobile)*/
  .picklist.vertical label {
    max-width: 80%;
    padding-left: 1rem;
    margin: 0.5rem;
  }
  html[dir=ltr] .crmEntityFormView .cell .picklist input[type=radio] {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.65rem 0;
  }
  html[dir=ltr] .crmEntityFormView .cell div.control span.checkbox input[type=checkbox] {
    width: 1.2rem;
    height: 1.2rem;
  }

  /* pp dropdown action width (scoped to table-fluid) */
  .table-fluid .dropdown.action .btn.btn-default {
    width: 100%;
    display: block;
  }
  .table-fluid tr {
    overflow: hidden;
    border: none !important;
    border-bottom: solid #ddd .1rem !important;
    margin: 0.5rem 0;
    background: unset!important;
  }  
  .table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-accent-bg: none;
  }
}


/* pp-responsive-card-list classes */
@media (max-width: 768px) {

  .pp-responsive-card-list.pp-mobile-cards .entitylist.entity-grid thead {
    display: none !important;
  }

  .pp-responsive-card-list.pp-mobile-cards
  .table-striped > tbody > tr:nth-of-type(even) > *,
  .pp-responsive-card-list.pp-mobile-cards
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent !important;
    background-color: transparent !important;
  }

  .pp-responsive-card-list.pp-mobile-cards .entitylist.entity-grid tbody tr {
    display: block;
    margin: 0 0 0.5rem 0 !important;
    padding: 0.75rem !important;
    border: 1px solid rgba(0, 0, 0, 0.175) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  }

  .pp-responsive-card-list.pp-mobile-cards .entitylist.entity-grid tbody td {
    display: block;
    padding: 0.35rem 0 !important;
    border: none !important;
    white-space: normal !important;
    background: transparent !important;
  }

  .pp-responsive-card-list.pp-mobile-cards .entitylist.entity-grid tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(0,0,0,0.65);
    margin-bottom: 0.15rem;
  }

  /* Header fields (driven by JS) */
  .pp-responsive-card-list.pp-mobile-cards td.pp-card-header-field {
    cursor: pointer;
  }

  .pp-responsive-card-list.pp-mobile-cards td.pp-card-header-primary {
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    display: flex !important;
    align-items: flex-start;              /* badge aligns nicely when title wraps */
    gap: 0.5rem;                          /* space between title and badge */
    overflow-wrap: anywhere;              /* handles long tokens */
  }

  
  .pp-responsive-card-list.pp-mobile-cards td.pp-card-header-primary .pp-card-title {
      max-width: 100%;
      flex: 1 1 auto;
      min-width: 0;                 /* required for wrapping */
      overflow-wrap: anywhere;
    }

  .pp-responsive-card-list.pp-mobile-cards td.pp-card-header-primary .pp-card-badge {
    flex: 0 0 auto; 
    white-space: nowrap; /* Prevent badge wrapping or shrinking */
    font-weight: 500;
    background-color: #ebf5fb;
    color: var(--ha-navy, #10069f);
    border: none;
  }

  .pp-responsive-card-list.pp-mobile-cards td.pp-card-header-secondary {
    font-size: 0.9rem;
    color: rgba(0,0,0,0.75);
    position: relative;
  }

  /* Hide labels for header cells */
  .pp-responsive-card-list.pp-mobile-cards td.pp-card-header-field::before {
    display: none !important;
  }

  /* Divider under last header field 
  .pp-responsive-card-list.pp-mobile-cards .entitylist.entity-grid tbody td.pp-card-header-divider {
    padding-bottom: 0.55rem !important;
    margin-bottom: 0.55rem !important; 
    border-bottom: 1px solid var(--ha-navy, #10069f) !important;
  }
  */

  /* Animated body wrapper */
  .pp-responsive-card-list.pp-mobile-cards tr .pp-card-body {
    overflow: hidden;
    max-height: 1200px;
    opacity: 1;
    transition: max-height 220ms cubic-bezier(0, 1, 0, 1), opacity 180ms ease;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--ha-navy, #10069f);
  }

  .pp-responsive-card-list.pp-mobile-cards tr.pp-collapsed .pp-card-body {
    max-height: 0;
    opacity: 0;
  }

  /* Chevron cue on the primary header field */
  .pp-responsive-card-list.pp-mobile-cards td.pp-card-header-secondary::after {
    font-family: "Font Awesome 5 Free";
    content: "\f078"; /* PP FA Chevron Glyph "^" "▾"*/
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
    display: inline-block;
    line-height: 1;
    color: var(--ha-navy, #10069f);
    position: absolute;
    right: 12px;
    top: 50%;
    margin-left: 0.5rem;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    pointer-events: none;
  }

  .pp-responsive-card-list.pp-mobile-cards tr:not(.pp-collapsed) td.pp-card-header-secondary::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Expanded card */
  .pp-responsive-card-list.pp-mobile-cards .entitylist.entity-grid tbody tr[aria-expanded="true"] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--ha-navy, #10069f) !important;
  }

  /* Expanded card primary header */
  .pp-responsive-card-list.pp-mobile-cards .entitylist.entity-grid tbody tr[aria-expanded="true"] .pp-card-header-primary {
    color: var(--ha-navy, #10069f) !important;
  }

  /* Actions Dropdown */
  .pp-responsive-card-list.pp-mobile-cards .dropdown.action .btn {
    width: 100%;
  }

}

/*pp-notifications specific */
@media (max-width: 768px) {
  .pp-responsive-card-list.pp-notifications.pp-mobile-cards .entitylist.entity-grid .pp-card-body td {
    margin-left: 8rem;
  }

  .pp-responsive-card-list.pp-notifications.pp-mobile-cards .entitylist.entity-grid .pp-card-body td::before {
    float: left;
    margin-left: -8rem;
    width: 8rem;
  }
}