/*
FILE: web/css/runtime_flow_fields_3_4_columns_v18_71.css
ROLE: force-desired flow input density on desktop
STATUS: active patch v18.71
DOES:
- makes flow input fields sit 3 or 4 consecutive per row on desktop where possible
- keeps flow sections/categories vertical
- keeps tablet safer at 2 columns
- keeps phone at 1 column
- wide fields/textareas/legal/message still span wider
DOES NOT:
- touch backend, database, API, sessions, passwords, submit validation, storage
*/

:root{
  --abc-v1871-flow-field-gap: 8px;
}

/* Keep categories vertical, only internal fields become columns. */
body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  [data-flow-page="1"],
  [data-account-flow],
  [data-flow-type]
) :is(
  .content-engine-panel,
  .clean-main-panel,
  .flow-shell,
  .flow-panel,
  .request-panel,
  .form-panel,
  .flow-sections,
  .request-sections,
  .module-sections,
  .account-flow-sections,
  form
){
  display:flex !important;
  flex-direction:column !important;
}

/* DESKTOP: 4 input fields per row when there is room. */
@media (min-width:1360px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    [data-flow-page="1"],
    [data-account-flow],
    [data-flow-type]
  ) :is(
    .abc-flow-field-grid-v18-70,
    .abc-fields-grid-v18-68,
    .fields,
    .field-grid,
    .form-grid,
    .flow-grid-fields,
    .request-fields,
    .profile-fields,
    .account-fields,
    .client-fields,
    .partner-fields,
    .job-fields,
    .contact-fields,
    .data-fields,
    .input-grid,
    .inputs-grid,
    [data-fields-grid]
  ){
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:var(--abc-v1871-flow-field-gap) !important;
    align-items:start !important;
    width:100% !important;
  }
}

/* NORMAL LAPTOP: 3 input fields per row. */
@media (min-width:1024px) and (max-width:1359px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    [data-flow-page="1"],
    [data-account-flow],
    [data-flow-type]
  ) :is(
    .abc-flow-field-grid-v18-70,
    .abc-fields-grid-v18-68,
    .fields,
    .field-grid,
    .form-grid,
    .flow-grid-fields,
    .request-fields,
    .profile-fields,
    .account-fields,
    .client-fields,
    .partner-fields,
    .job-fields,
    .contact-fields,
    .data-fields,
    .input-grid,
    .inputs-grid,
    [data-fields-grid]
  ){
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:var(--abc-v1871-flow-field-gap) !important;
    align-items:start !important;
    width:100% !important;
  }
}

/* TABLET: 2 columns. */
@media (min-width:761px) and (max-width:1023px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    [data-flow-page="1"],
    [data-account-flow],
    [data-flow-type]
  ) :is(
    .abc-flow-field-grid-v18-70,
    .abc-fields-grid-v18-68,
    .fields,
    .field-grid,
    .form-grid,
    .flow-grid-fields,
    .request-fields,
    .profile-fields,
    .account-fields,
    .client-fields,
    .partner-fields,
    .job-fields,
    .contact-fields,
    .data-fields,
    .input-grid,
    .inputs-grid,
    [data-fields-grid]
  ){
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
    align-items:start !important;
    width:100% !important;
  }
}

/* PHONE: 1 column safe. */
@media (max-width:760px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    [data-flow-page="1"],
    [data-account-flow],
    [data-flow-type]
  ) :is(
    .abc-flow-field-grid-v18-70,
    .abc-fields-grid-v18-68,
    .fields,
    .field-grid,
    .form-grid,
    .flow-grid-fields,
    .request-fields,
    .profile-fields,
    .account-fields,
    .client-fields,
    .partner-fields,
    .job-fields,
    .contact-fields,
    .data-fields,
    .input-grid,
    .inputs-grid,
    [data-fields-grid]
  ){
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    width:100% !important;
  }
}

/* Compact field boxes so 3/4 columns fit nicely. */
body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  [data-flow-page="1"],
  [data-account-flow],
  [data-flow-type]
) :is(
  .client-form-field,
  .partner-form-field,
  .profile-field,
  .account-field,
  .flow-field,
  .form-field,
  .request-field,
  .job-field,
  .contact-field,
  .data-field,
  .field,
  [data-flow-field],
  [data-form-field],
  [data-input-field]
){
  min-width:0 !important;
  padding:6px 7px !important;
  margin:0 !important;
}

/* Inputs slightly more compact, still usable. */
body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  [data-flow-page="1"],
  [data-account-flow],
  [data-flow-type]
) :is(input,select){
  min-height:30px !important;
  padding:6px 7px !important;
  font-size:13px !important;
}

body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  [data-flow-page="1"],
  [data-account-flow],
  [data-flow-type]
) label{
  font-size:12px !important;
  margin-bottom:4px !important;
}

/* Wide/legal/textarea/message fields span properly. */
@media (min-width:1024px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    [data-flow-page="1"],
    [data-account-flow],
    [data-flow-type]
  ) :is(
    textarea,
    .field-wide,
    .full-width,
    .span-2,
    .span-full,
    .legal-text,
    .consent-copy,
    .message-field,
    .description-field,
    [data-field-wide],
    [data-span="2"],
    [data-span="full"],
    [data-field-type="textarea"],
    [data-field-type="message"],
    [data-field-type="description"]
  ){
    grid-column:span 2 !important;
  }
}

@media (max-width:1023px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    [data-flow-page="1"],
    [data-account-flow],
    [data-flow-type]
  ) :is(
    textarea,
    .field-wide,
    .full-width,
    .span-2,
    .span-full,
    .legal-text,
    .consent-copy,
    .message-field,
    .description-field,
    [data-field-wide],
    [data-span="2"],
    [data-span="full"],
    [data-field-type="textarea"],
    [data-field-type="message"],
    [data-field-type="description"]
  ){
    grid-column:1 / -1 !important;
  }
}