/* Shared panel grid. Presentation only; no player, print, data or permission rules. */
@media screen {
  body.ts2 #appScreen :is(#contactsSection,#unitsSection,#rentalAdministrationSection,#cashflowSection,#incomesSection,#purchaseNotesSection,#renditionsSection,#contactQueriesSection) {
    --panel-grid-gap:12px;
  }
  body.ts2 #appScreen :is(#contactsSection,#unitsSection,#rentalAdministrationSection,#incomesSection) :is(.contacts-toolbar,.un-filters,.ra-filters,.incomes-filters)[hidden] {
    display:none!important;
  }

  /* Keep the search on the same full-width grid as the table below it. */
  body.ts2 #appScreen #contactsSection .contacts-toolbar:not([hidden]) {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:var(--panel-grid-gap)!important;
    align-items:end!important;
  }
  body.ts2 #appScreen #contactsSection .contacts-search-label {
    min-width:0!important;width:100%!important;max-width:none!important;
  }
  body.ts2 #appScreen #contactsSection .contacts-toolbar-actions {
    grid-column:auto!important;justify-content:flex-end!important;
  }
  body.ts2 #appScreen #contactsSection .contacts-search-wrap {
    height:40px!important;
  }
  body.ts2 #appScreen #contactsSection .contacts-search-wrap svg {
    top:50%!important;transform:translateY(-50%)!important;
  }

  /* Search grows; the selectors and row actions have predictable columns. */
  body.ts2 #appScreen #rentalAdministrationSection .ra-filters:not([hidden]) {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) repeat(2,minmax(150px,200px)) auto!important;
    gap:var(--panel-grid-gap)!important;
  }
  body.ts2 #appScreen #unitsSection .un-filters:not([hidden]) {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:var(--panel-grid-gap)!important;
  }
  body.ts2 #appScreen #unitsSection .un-filters:has(>label:nth-of-type(2)) {
    grid-template-columns:minmax(0,1fr) repeat(2,minmax(150px,200px))!important;
  }
  body.ts2 #appScreen :is(#unitsSection .un-filters,#rentalAdministrationSection .ra-filters,#cashflowSection .cf-filters) > label {
    min-width:0!important;width:100%!important;max-width:none!important;
  }
  body.ts2 #appScreen #incomesSection .incomes-filters:not([hidden]) {
    display:grid!important;grid-template-columns:minmax(125px,1fr) minmax(175px,1fr)!important;
    gap:var(--panel-grid-gap)!important;
  }
  body.ts2 #appScreen :is(#contactsSection .contacts-toolbar,#rentalAdministrationSection .ra-filters,#unitsSection .un-filters,#cashflowSection .cf-filters,#incomesSection .incomes-filters) :is(input:not([type=checkbox]):not([type=radio]),select),
  body.ts2 #appScreen :is(#contactsSection .contacts-toolbar-actions,#rentalAdministrationSection .ra-filter-actions,#cashflowSection .cf-filters) > button {
    height:40px!important;min-height:40px!important;box-sizing:border-box!important;
  }

}

/* Identical header/body alignment, only for known desktop monetary columns. */
@media screen and (min-width:768px) {
  body.ts2 #appScreen #incomesSection .incomes-months-table :is(th,td):last-child,
  body.ts2 #appScreen #incomesSection .incomes-table :is(th,td):nth-child(5),
  body.ts2 #appScreen #rentalAdministrationSection .ra-table-wrap :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(8)),
  body.ts2 #appScreen #sentOrdersSection .orders-table :is(th,td):nth-child(5),
  body.ts2 #appScreen #reservationsSection .reservations-history-table :is(th,td):nth-child(5),
  body.ts2 #appScreen #renditionsSection .renditions-table :is(th,td):is(:nth-child(5),:nth-child(6)),
  body.ts2 #appScreen #cashflowSection .cf-scroll:not(.cf-matrix) :is(th,td):is(:nth-child(2),:nth-child(6)),
  body.ts2 #appScreen #cashflowSection .cf-matrix thead th:not(:first-child) {
    text-align:right!important;font-variant-numeric:tabular-nums;
  }
  body.ts2 #appScreen #cashflowSection .cf-matrix thead th:not(:first-child) button {
    text-align:right!important;width:100%;
  }
}

/* Preserve the existing mobile cards and labels instead of desktop alignment. */
@media screen and (max-width:1100px) {
  body.ts2 #appScreen #rentalAdministrationSection .ra-filters:not([hidden]) {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.ts2 #appScreen #rentalAdministrationSection .ra-filters .ra-search {
    grid-column:1/-1;
  }
  body.ts2 #appScreen #rentalAdministrationSection .ra-filter-actions {
    grid-column:1/-1;justify-content:flex-end;
  }
}
@media screen and (max-width:767px) {
  body.ts2 #appScreen #contactsSection .contacts-toolbar:not([hidden]) {
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.ts2 #appScreen #contactsSection .contacts-toolbar-actions {
    justify-content:flex-start!important;
  }
  body.ts2 #appScreen #contactsSection .contacts-search-wrap {
    height:44px!important;
  }
  body.ts2 #appScreen #unitsSection .un-filters:has(>label:nth-of-type(2)) {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.ts2 #appScreen #unitsSection .un-filters>label:first-child {
    grid-column:1/-1;
  }
  body.ts2 #appScreen #incomesSection .incomes-filters:not([hidden]) {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;
  }
  body.ts2 #appScreen #incomesSection .incomes-filters label {
    min-width:0!important;
  }
  body.ts2 #appScreen :is(#contactsSection .contacts-toolbar,#rentalAdministrationSection .ra-filters,#unitsSection .un-filters,#cashflowSection .cf-filters,#incomesSection .incomes-filters) :is(input:not([type=checkbox]):not([type=radio]),select),
  body.ts2 #appScreen :is(#contactsSection .contacts-toolbar-actions,#rentalAdministrationSection .ra-filter-actions,#cashflowSection .cf-filters)>button {
    height:44px!important;min-height:44px!important;
  }
}