/* Dashboards on a phone. The main stylesheet only holds the classes the templates used, so the phone rules live here.
   Used by: CRM overview (crm/dashboard), the period bar of every dashboard (partials/range-bar). */

/* a grid cell may shrink below its content, so one long line can no longer widen the whole page */
.dash-grid > * { min-width: 0; }

/* period bar: presets full width, the two dates side by side, the filters one under the other */
@media (max-width: 640px) {
    #ctl-filter { gap: .65rem; }
    #ctl-filter > nav { width: 100%; }
    #ctl-filter > nav a { flex: 1 1 auto; text-align: center; }
    #ctl-filter .range-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; width: 100%; }
    #ctl-filter .range-dates > * { min-width: 0; }
    #ctl-filter .range-dates .input, #ctl-filter .range-dates button { width: 100% !important; }
    #ctl-filter .range-selects { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr; gap: .5rem; }
    #ctl-filter .range-selects > div { width: 100%; }
    #ctl-filter .range-selects .range-select-box { min-width: 0; width: 100%; flex: 1 1 auto; }
}

/* list rows of "Recent activity" and "Biggest open opportunities" */
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dash-row .dash-main { min-width: 0; flex: 1 1 auto; }
@media (max-width: 640px) {
    .dash-row { flex-direction: column; align-items: stretch; gap: .35rem; }
    .dash-row .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }   /* names and notes wrap instead of being cut */
    .dash-row .dash-side { display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; }
    .dash-row .dash-side .block { display: inline; }
    .dash-row .dash-side .dash-late { margin-left: .5rem; }
}