/*
FILE: web/css/runtime_flow_vertical_groups_adaptive_fields_v18_68.css
ROLE: flow legal/function UI polish: vertical groups + adaptive inner fields
STATUS: active patch v18.68
DOES:
- keeps flow categories/modules/groups stacked vertically
- makes fields inside each group adaptive: 2/3/4 per row where space allows
- avoids forced horizontal category layout
- reduces dead space in input fields without making them unusable
- keeps mobile safe: one column
- keeps technical/admin info private
DOES NOT:
- touch backend, database, API, sessions, passwords, submit validation, storage
*/

:root{
  --abc-v1868-flow-gap: 9px;
  --abc-v1868-field-gap: 8px;
  --abc-v1868-field-min: 210px;
  --abc-v1868-field-min-wide: 190px;
  --abc-v1868-section-radius: 16px;
  --abc-v1868-field-radius: 11px;
  --abc-v1868-section-border: rgba(255,215,90,.28);
  --abc-v1868-client-border: rgba(74,166,255,.42);
  --abc-v1868-partner-border: rgba(188,132,255,.48);
  --abc-v1868-emergency-border: rgba(255,82,112,.55);
}

/* Flow pages targeted. */
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]
){
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* MAIN RULE:
   groups/categories/modules must stack vertically, not side-by-side. */
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;
  align-items:stretch !important;
  gap:var(--abc-v1868-flow-gap) !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* Each legal/functional block stays as its own vertical category. */
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(
  fieldset,
  .flow-section,
  .form-section,
  .request-section,
  .module-section,
  .account-section,
  .profile-section,
  .job-section,
  .client-section,
  .partner-section,
  .legal-section,
  .consent-section,
  .contact-section,
  .data-section,
  [data-flow-section],
  [data-form-section],
  [data-request-section],
  [data-section]
){
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:10px !important;
  border-width:1px !important;
  border-color:var(--abc-v1868-section-border) !important;
  border-radius:var(--abc-v1868-section-radius) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Internal fields inside a section can flow horizontally/adaptively. */
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(
  fieldset,
  .flow-section,
  .form-section,
  .request-section,
  .module-section,
  .account-section,
  .profile-section,
  .job-section,
  .client-section,
  .partner-section,
  .legal-section,
  .consent-section,
  .contact-section,
  .data-section,
  [data-flow-section],
  [data-form-section],
  [data-request-section],
  [data-section]
) > :is(
  .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(auto-fit, minmax(var(--abc-v1868-field-min), 1fr)) !important;
  gap:var(--abc-v1868-field-gap) !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
}

/* If no explicit field-grid wrapper exists, fields directly inside a section still align adaptively. */
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(
  fieldset,
  .flow-section,
  .form-section,
  .request-section,
  .module-section,
  .account-section,
  .profile-section,
  .job-section,
  .client-section,
  .partner-section,
  .contact-section,
  .data-section,
  [data-flow-section],
  [data-form-section],
  [data-request-section],
  [data-section]
){
  container-type:inline-size;
}

/* Direct field children get compact size. */
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;
  min-height:0 !important;
  padding:7px 9px !important;
  margin:0 !important;
  border-width:1px !important;
  border-radius:var(--abc-v1868-field-radius) !important;
  box-sizing:border-box !important;
}

/* Section titles compact but still clear/legal. */
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(
  legend,
  .section-title,
  .flow-section-title,
  .request-section-title,
  .module-title,
  .account-section-title,
  .job-section-title,
  h2,
  h3
){
  font-size:clamp(17px,1.55vw,24px) !important;
  line-height:1.08 !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  font-weight:750 !important;
}

/* Main flow title stays visible but not wasteful. */
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(
  .flow-title,
  .request-title,
  .client-flow-title,
  .partner-flow-title,
  .account-flow-title,
  [data-flow-title],
  h1
){
  font-size:clamp(25px,2.55vw,40px) !important;
  line-height:1.04 !important;
  margin:5px 0 8px 0 !important;
}

/* Field labels and controls. */
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:13px !important;
  line-height:1.08 !important;
  margin:0 0 5px 0 !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]
) :is(input,select,textarea){
  width:100% !important;
  min-width:0 !important;
  min-height:32px !important;
  padding:7px 9px !important;
  box-sizing:border-box !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]
) textarea{
  min-height:74px !important;
  resize:vertical !important;
}

/* Wide/multiline/legal fields should span more columns but stay inside the same vertical group. */
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;
}

/* Role borders stay correct. */
body.private-client-account-page :is(fieldset,.flow-section,.form-section,.request-section,.module-section,.account-section,[data-flow-section]),
body.business-client-account-page :is(fieldset,.flow-section,.form-section,.request-section,.module-section,.account-section,[data-flow-section]){
  border-color:var(--abc-v1868-client-border) !important;
}

body.private-partner-account-page :is(fieldset,.flow-section,.form-section,.request-section,.module-section,.account-section,[data-flow-section]),
body.business-partner-account-page :is(fieldset,.flow-section,.form-section,.request-section,.module-section,.account-section,[data-flow-section]){
  border-color:var(--abc-v1868-partner-border) !important;
}

body:is([data-flow-type="emergency"],[data-account-flow="emergency"]) :is(fieldset,.flow-section,.form-section,.request-section,.module-section,.account-section,[data-flow-section]){
  border-color:var(--abc-v1868-emergency-border) !important;
}

/* Admin technical remains private and not part of public consumer layout. */
body:not([data-page="admin"]):not([data-page="admin_control_panel"]):not([data-admin-view="1"]):not(.admin-private-page) :is(
  .admin-only,
  .admin-only-flow-card,
  .abc-admin-only-technical-copy,
  .technical,
  .technical-panel,
  .debug,
  .debug-panel,
  .diagnostic,
  .diagnostic-panel,
  [data-admin-only],
  [data-technical],
  [data-debug],
  [data-private-admin]
){
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Wider screens: allow denser 3/4/5 fields naturally. */
@media (min-width:1280px){
  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(
    .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]
  ){
    grid-template-columns:repeat(auto-fit, minmax(var(--abc-v1868-field-min-wide), 1fr)) !important;
  }
}

/* Tablet: 2 columns where possible. */
@media (max-width:980px){
  :root{
    --abc-v1868-field-min:180px;
  }

  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;
  }
}

/* Mobile: groups stay vertical, fields one column. */
@media (max-width:760px){
  :root{
    --abc-v1868-flow-gap:7px;
    --abc-v1868-field-gap:7px;
  }

  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(
    .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]
  ){
    grid-template-columns:1fr !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]
  ) :is(
    fieldset,
    .flow-section,
    .form-section,
    .request-section,
    .module-section,
    .account-section,
    .profile-section,
    .job-section,
    .client-section,
    .partner-section,
    .legal-section,
    .consent-section,
    .contact-section,
    .data-section,
    [data-flow-section],
    [data-form-section],
    [data-request-section],
    [data-section]
  ){
    padding:8px !important;
    border-radius:14px !important;
  }
}