/*
FILE: web/css/runtime_flow_fields_perfect_compact_visual_v18_70.css
ROLE: flow fields/categories final compact visual polish
STATUS: active patch v18.70
DOES:
- makes flow categories visually cleaner and easier to scan
- keeps categories vertical
- makes internal fields compact, balanced, adaptive 2/3/4 columns where space allows
- improves labels, inputs, selects, textareas and action spacing
- keeps mobile one-column and scroll-safe
DOES NOT:
- touch backend, database, API, sessions, passwords, submit validation, storage
*/

:root{
  --abc-v1870-bg-panel: rgba(7, 18, 35, .72);
  --abc-v1870-bg-section: linear-gradient(180deg, rgba(10, 25, 47, .86), rgba(7, 16, 31, .94));
  --abc-v1870-bg-field: rgba(5, 15, 28, .72);
  --abc-v1870-border-soft: rgba(255, 215, 90, .24);
  --abc-v1870-client: rgba(74, 166, 255, .46);
  --abc-v1870-partner: rgba(188, 132, 255, .50);
  --abc-v1870-emergency: rgba(255, 82, 112, .58);
  --abc-v1870-text: #f6f9ff;
  --abc-v1870-muted: rgba(223, 234, 255, .72);
  --abc-v1870-gap-section: 8px;
  --abc-v1870-gap-field: 7px;
  --abc-v1870-field-min: 205px;
  --abc-v1870-field-min-wide: 185px;
}

/* Flow page base. */
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 flow motor surface: compact and readable. */
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){
  background: var(--abc-v1870-bg-panel) !important;
  border-width:1px !important;
  border-radius:18px !important;
  padding:8px !important;
  gap:var(--abc-v1870-gap-section) !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
}

/* Categories/modules: vertical, polished cards. */
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;
  margin:0 !important;
  padding:9px !important;
  border:1px solid var(--abc-v1870-border-soft) !important;
  border-radius:15px !important;
  background:var(--abc-v1870-bg-section) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 8px 20px rgba(0,0,0,.13) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Section header rhythm. */
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){
  display:block !important;
  width:100% !important;
  color:var(--abc-v1870-text) !important;
  font-size:clamp(16px,1.35vw,22px) !important;
  line-height:1.08 !important;
  font-weight:780 !important;
  letter-spacing:-.01em !important;
  margin:0 0 7px 0 !important;
  padding:0 0 6px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}

/* Internal field grids: smart compact. */
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-fields-grid-v18-68,
  .abc-flow-field-grid-v18-70,
  .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-v1870-field-min), 1fr)) !important;
  gap:var(--abc-v1870-gap-field) !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
}

/* Fields: compact and premium-looking, not oversized. */
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]
){
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:7px 8px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.075) !important;
  border-radius:11px !important;
  background:var(--abc-v1870-bg-field) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018) !important;
  box-sizing:border-box !important;
}

/* Labels: smaller but clear. */
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{
  color:var(--abc-v1870-muted) !important;
  font-size:12.5px !important;
  line-height:1.08 !important;
  font-weight:650 !important;
  margin:0 0 4px 0 !important;
  padding:0 !important;
}

/* Controls: compact, consistent, 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,textarea){
  width:100% !important;
  min-width:0 !important;
  min-height:31px !important;
  height:auto !important;
  padding:6px 8px !important;
  border-radius:9px !important;
  border:1px solid rgba(120,170,230,.18) !important;
  background:rgba(4,12,24,.84) !important;
  color:var(--abc-v1870-text) !important;
  box-sizing:border-box !important;
  font-size:13px !important;
  line-height:1.15 !important;
  outline:none !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):focus{
  border-color:rgba(74,166,255,.58) !important;
  box-shadow:0 0 0 2px rgba(74,166,255,.12) !important;
}

/* Textareas/legal/message: wider, but not giant. */
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:68px !important;
  resize:vertical !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(
  .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;
}

/* Actions in flow pages. */
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(.form-actions,.flow-actions,.request-actions,.button-row,.actions){
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin:8px 0 0 0 !important;
  padding: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(.form-actions,.flow-actions,.request-actions,.button-row,.actions) :is(a,button,input[type="submit"]){
  min-height:32px !important;
  padding:7px 11px !important;
  border-radius:10px !important;
  font-size:13px !important;
  line-height:1.1 !important;
}

/* Role colors per flow family. */
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-v1870-client) !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-v1870-partner) !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-v1870-emergency) !important;
}

/* Wide screens: allow denser 3/4/5 columns naturally. */
@media (min-width:1320px){
  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-fields-grid-v18-68,.abc-flow-field-grid-v18-70,.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-v1870-field-min-wide), 1fr)) !important;
  }
}

/* Tablet: keep good density but prevent cramped fields. */
@media (max-width:980px){
  :root{ --abc-v1870-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(.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: safe, clean, one column. */
@media (max-width:760px){
  :root{
    --abc-v1870-gap-section:7px;
    --abc-v1870-gap-field: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(.abc-fields-grid-v18-68,.abc-flow-field-grid-v18-70,.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;
  }

  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){
    font-size:16px !important; /* prevents iOS zoom */
  }
}