/* ITDA mobile consistency layer v1.1.0
   Structural safety rules only: action alignment, compact search/filter rows,
   auto-height mobile cards, wrapping and touch spacing. Loaded after custom CSS. */

@media (max-width:760px){
  /* 1) Page-level actions: compact row. Creation/registration stays on the right. */
  .page-head,.itda-page-head,.lifeline-page-head,.sharing-page-head{
    min-width:0!important;
    max-width:100%!important;
  }
  .page-head .page-actions.mobile-page-actions-ready,
  .itda-page-head .page-actions.mobile-page-actions-ready,
  .lifeline-page-head .page-actions.mobile-page-actions-ready,
  .sharing-page-head .page-actions.mobile-page-actions-ready{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    grid-template-columns:none!important;
    overflow:visible!important;
  }
  .page-actions.mobile-page-actions-ready > *,
  .page-actions.mobile-page-actions-ready > form{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:0 0 auto!important;
    display:block!important;
  }
  .page-actions.mobile-page-actions-ready > .mobile-page-create-slot{
    margin-left:auto!important;
  }
  .page-actions.mobile-page-actions-ready > .mobile-page-create-slot ~ .mobile-page-create-slot{
    margin-left:0!important;
  }
  .page-actions.mobile-page-actions-ready .btn,
  .page-actions.mobile-page-actions-ready a,
  .page-actions.mobile-page-actions-ready button{
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
  }
  .page-actions.mobile-page-actions-ready .itda-mobile-icon-button{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    flex-basis:44px!important;
  }

  /* 2) Search/filter toolbars: search field first, then search icon + filter on one line. */
  .toolbar.mobile-consistency-toolbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:8px 10px!important;
    gap:7px!important;
    overflow:visible!important;
  }
  .toolbar.mobile-consistency-toolbar .toolbar-left{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:center!important;
  }
  .toolbar.mobile-consistency-toolbar .toolbar-left > .search-wrap,
  .toolbar.mobile-consistency-toolbar .toolbar-left > .search,
  .toolbar.mobile-consistency-toolbar .toolbar-left > input[type="search"],
  .toolbar.mobile-consistency-toolbar .toolbar-left > input[name="search_name"],
  .toolbar.mobile-consistency-toolbar .toolbar-left > input[name="q"],
  .toolbar.mobile-consistency-toolbar .toolbar-left > input[name="keyword"]{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .toolbar.mobile-consistency-toolbar .mobile-search-submit{
    grid-column:1!important;
    grid-row:auto!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    justify-self:start!important;
  }
  .toolbar.mobile-consistency-toolbar .mobile-filter-toggle{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:44px!important;
    margin:0!important;
  }
  .toolbar.mobile-consistency-toolbar.mobile-filter-open .mobile-filter-extra{
    min-width:0!important;
    max-width:100%!important;
  }
  .toolbar.mobile-consistency-toolbar.mobile-filter-open .toolbar-left > .mobile-filter-extra:not(.mobile-filter-toggle){
    grid-column:auto!important;
  }
  .toolbar.mobile-consistency-toolbar .toolbar-right{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
  }
  .toolbar.mobile-consistency-toolbar .toolbar-right .help{
    margin:0!important;
    line-height:1.35!important;
  }

  /* 3) Read-only table cards: never clip a value or force a fixed row height. */
  table.mobile-card-table,
  table.mobile-card-table tbody,
  table.mobile-card-table tr,
  table.mobile-card-table td{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty){
    overflow:visible!important;
    align-content:start!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td{
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
    box-sizing:border-box!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td > *,
  table.mobile-card-table tr:not(.mobile-card-empty) > td a,
  table.mobile-card-table tr:not(.mobile-card-empty) > td span,
  table.mobile-card-table tr:not(.mobile-card-empty) > td small,
  table.mobile-card-table tr:not(.mobile-card-empty) > td strong{
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td.mobile-card-primary{
    overflow:visible!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td.mobile-card-actions-cell{
    overflow:visible!important;
  }

  /* 4) Generic detail/read-only blocks also grow with their content. */
  .detail-meta > *,
  .event-modal-meta > *,
  .admin-event-setting-list > div,
  .schedule-detail-grid > *,
  .detail-value,
  .document-detail,
  .viewer-content{
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-wrap:anywhere!important;
  }
  /* 5) On mobile, the whole data card opens the same detail target as its title. */
  table.mobile-card-table tr.mobile-card-clickable{
    cursor:pointer!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(37,99,235,.08);
  }
  table.mobile-card-table tr.mobile-card-clickable:focus-visible{
    outline:2px solid #2563eb!important;
    outline-offset:2px!important;
  }
  table.mobile-card-table tr.mobile-card-clickable:active{
    background-color:rgba(37,99,235,.035)!important;
  }
  table.mobile-card-table tr.mobile-card-clickable td:not(.mobile-card-actions-cell){
    cursor:pointer!important;
  }
}

/* Phones: one information field per row for reliable readability. */
@media (max-width:520px){
  table.mobile-card-table tr:not(.mobile-card-empty){
    grid-template-columns:1fr!important;
    padding:0 0 4px!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td{
    grid-column:1 / -1!important;
    display:block!important;
    width:100%!important;
    padding:9px 12px!important;
    border:0!important;
    border-bottom:1px solid rgba(148,163,184,.20)!important;
    line-height:1.45!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td::before{
    display:block!important;
    margin:0 0 3px!important;
    font-size:11px!important;
    line-height:1.25!important;
    font-weight:850!important;
    color:#64748b!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td.mobile-card-primary{
    order:-2!important;
    padding:12px 50px 11px 12px!important;
    border-bottom:1px solid rgba(148,163,184,.24)!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td.mobile-card-primary::before,
  table.mobile-card-table tr:not(.mobile-card-empty) > td.mobile-card-actions-cell::before{
    display:none!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td:last-of-type{
    border-bottom:0!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) > td.mobile-card-actions-cell{
    padding:0!important;
    border:0!important;
  }
}