/* ============================================================
   Fuse CRM — form sizing
   ============================================================

   Loaded globally from header.php, after app.css and any per-page
   stylesheet, because the fault it corrects is in a layout several
   screens share.

   THE PROBLEM

   Edit grids are laid out as "grid-template-columns: 1fr 1fr". A 1fr
   column resolves to minmax(auto, 1fr), and "auto" as a minimum means
   min-content. For a text input that is small. For a <select> it is the
   width of the LONGEST OPTION IN THE LIST.

   The company picker lists every client, and several are recorded with
   their full postal address in the name. So one 140-character option
   forced that column wide enough to hold it, the other column collapsed,
   and Role and Email were left showing about twenty characters each.

   Nothing was wrong with the inputs. They were filling columns that had
   been pushed to absurd widths by an option nobody could see.
   ============================================================ */

/* minmax(0, 1fr) lets a column shrink below its content. Without the
   explicit zero minimum, a long option always wins. */
.ef-grid,
.np-grid,
.ld-grid,
.apf-grid{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
}

/* And the controls fill the cell rather than sizing to their content.
   min-width:0 is the other half of the same fix: a flex or grid item
   refuses to shrink past min-content unless it is told it may. */
.ef-grid input, .ef-grid select, .ef-grid textarea,
.np-grid input, .np-grid select, .np-grid textarea,
.ld-grid input, .ld-grid select, .ld-grid textarea,
.edit-form input, .edit-form select, .edit-form textarea{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.ef-grid label, .np-grid label, .ld-grid label, .edit-form label{min-width:0}

/* A select showing a 140-character company name is unreadable whatever
   the width, so it truncates rather than stretching. The full value is
   still there when the list is opened. */
.ef-grid select, .np-grid select, .edit-form select{
  text-overflow:ellipsis;
}

/* The notes field sits OUTSIDE the grid on the company and person forms,
   so grid-column would do nothing to it; it just needs to fill its parent.
   Only .ld-grid's wide labels are genuinely grid children. */
.ld-grid label.wide{grid-column:1 / -1}
.ef-full, .np-full{display:flex;flex-direction:column;gap:4px}
.ef-full input, .ef-full textarea,
.np-full input, .np-full textarea{width:100%;box-sizing:border-box}

/* One column on a narrow screen. Two columns of 160px each is worse than
   one of 340. */
@media (max-width: 760px){
  .ef-grid, .np-grid, .ld-grid, .apf-grid{grid-template-columns:1fr}
}