/* Tablets and small laptops (below 1280 px): list toolbars that fit one row, and record pages in one full-width column.
   The main stylesheet only holds the classes the templates used, so these rules live here. */

/* ---- list toolbar: search takes what is left, the secondary buttons are icons ---- */
@media (min-width: 768px) {
    .list-toolbar > form { flex-wrap: nowrap; }
    .list-toolbar > form > label { flex: 1 1 12rem; width: auto; min-width: 8rem; max-width: 24rem; }
    .list-toolbar .list-actions { flex-wrap: nowrap; flex-shrink: 0; }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .list-toolbar .list-actions .btn-secondary > span.hidden { display: none !important; }   /* Import, Export, View, Check customers: icon only */
}

/* ---- record page (lead, contact, opportunity, activity …): tabs and their content use the whole width; Record, sharing … follow ---- */
.show-grid { display: grid; gap: 1.5rem; }
.show-main, .show-side { min-width: 0; }
@media (min-width: 1280px) {
    .show-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .show-main { grid-column: span 2; }
}
@media (max-width: 1279px) {
    .show-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
    .show-side > * { margin-top: 0 !important; }
    .show-title { font-size: 1.5rem; line-height: 1.3; }
}
@media (max-width: 767px) {
    .show-side { grid-template-columns: minmax(0, 1fr); }
}