/* ============================================================================
 *     Copyright (c) 2026 Broadcom. The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 *
 *     This software and all information contained therein is confidential and
 *     proprietary and shall not be duplicated, used, disclosed or disseminated in any
 *     way except as authorized by the applicable license agreement, without the
 *     express written permission of CA. All authorized reproductions must be marked
 *     with this language.
 *
 *     EXCEPT AS SET FORTH IN THE APPLICABLE LICENSE AGREEMENT, TO THE
 *     EXTENT PERMITTED BY APPLICABLE LAW, CA PROVIDES THIS SOFTWARE
 *     WITHOUT WARRANTY OF ANY KIND, INCLUDING WITHOUT LIMITATION, ANY
 *     IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR
 *     PURPOSE.  IN NO EVENT WILL CA BE LIABLE TO THE END USER OR ANY
 *     THIRD PARTY FOR ANY LOSS OR DAMAGE, DIRECT OR INDIRECT, FROM THE
 *     USE OF THIS SOFTWARE, INCLUDING WITHOUT LIMITATION, LOST PROFITS,
 *     BUSINESS INTERRUPTION, GOODWILL, OR LOST DATA, EVEN IF CA IS
 *     EXPRESSLY ADVISED OF SUCH LOSS OR DAMAGE.
 * ============================================================================ */

#flow_section_questions * {
  box-sizing: border-box;
}
#flow_section_questions {
  /* Block + clear: UCF (cloud native) uses floated .column1/.column2; inline-block
   * here lets the Flow box shrink when dep-dependent inputs are hidden (None) and
   * then sit beside those floats, so controls appear to jump above the Flow section. */
  display: block;
  clear: both;
  width: 100%;
  /* Override form.css .section_questions padding so inputs align with the Flow h2. */
  padding-left: 0;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 12px;
  color: #333840;
  overflow-x: auto;
}
/* Left column: full width under Flow title (matches UCF column; no card box). */
#flow_section_questions #nof_form.nof_panel {
  background: transparent;
  border: 0 none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 100%;
  flex: 1 1 auto;
  width: 100%;
}
#flow_section_questions .nof_sites_fpm_group {
  background: transparent;
  border: 0 none;
  border-radius: 0;
  padding: 0;
  margin-top: 4px;
}
.nof_header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #c4c5c7;
  margin-bottom: 16px;
}
.nof_header h1 {
  font-size: 18px;
  font-weight: normal;
  margin: 0;
  color: #333840;
}
.nof_layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.nof_panel {
  background: #fff;
  border: 1px solid #c4c5c7;
  border-radius: 2px;
  padding: 12px 14px 16px;
  max-width: 520px;
  flex: 1 1 360px;
}
.nof_panel.nof_results {
  max-width: min(100%, 1120px);
  flex: 2 1 480px;
}
.nof_panel h2 {
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 8px;
  color: #333840;
}
/* Scoped: must not override main form / UCF .section_* outside Flow. */
#flow_section_questions .section_class {
  display: block;
  background-color: transparent;
  margin-bottom: 12px;
}
#flow_section_questions .section_title {
  display: block;
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 8px;
  color: #333840;
  text-align: left;
  width: auto;
}
/* Single column under Flow h2 (no nested .section_questions — avoids double 18px indent vs UCF). */
#flow_section_questions .nof_section_inputs {
  margin-top: 0;
  padding-left: 0;
}
#flow_section_questions .nof_layout {
  width: 100%;
  max-width: 100%;
}
#flow_section_questions .ucf_subsection:first-child {
  margin-top: 0;
}
#flow_section_questions .ucf_subsection {
  display: block;
  margin-top: 12px;
}
#flow_section_questions .ucf_subsection_fields {
  margin-left: 0;
  margin-top: 8px;
}
/*
 * Subsection titles: UCF CaaS uses <strong style="font-size: smaller"> under the
 * form default (~16px), so "smaller" ~13px. Flow sets 12px on #flow_section_questions,
 * which shrinks "smaller" too much — use explicit size to match CaaS visually.
 */
#flow_section_questions strong.nof_flow_subsection_heading {
  font-size: 13px;
  font-weight: bold;
  color: #333840;
}

/* Wrapper div for subsection headings inside the Flow embed. */
.nof_subsection_heading_row {
  margin-top: 10px;
}

/*
 * HA Enabled / Deployment type labels: same tone as .section_desc (e.g. SNMP descriptions).
 */
#flow_section_questions .nof_flow_primary_controls label.nof_deployment_type_label {
  display: inline;
  font-size: 12px;
  font-weight: normal;
  color: #333840;
  margin-bottom: 0;
  margin-right: 8px;
  white-space: nowrap;
}

/*
 * Flex row wrapping each label+select pair in the primary controls block.
 */
.nof_control_row {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.nof_control_row--top {
  margin-top: 10px;
}

/*
 * Inline selects match getDropdown() for cloud_native_vna_section (flex row, 120px wide).
 */
#flow_section_questions .nof_flow_primary_controls select#nof_flow_ha_enabled,
#flow_section_questions .nof_flow_primary_controls select#nof_deployment {
  width: 120px;
  padding: 4px 6px;
  border: 1px solid #c4c5c7;
  border-radius: 2px;
}

/* Group all site FPM inputs (core + remotes) in one visual block */
.nof_sites_fpm_group {
  border: 1px solid #c4c5c7;
  border-radius: 4px;
  background: #fafbfc;
  padding: 12px 14px 14px;
  margin-top: 4px;
  max-width: 100%;
}
.nof_sites_fpm_group > .nof_field {
  margin-bottom: 12px;
}
.nof_remote_block_nested {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #dfe1e6;
}
.nof_remote_fpm_host_nested {
  margin-top: 4px;
}
.nof_remote_fpm_host_nested .nof_field {
  margin-bottom: 10px;
}
.nof_remote_site_row {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe1e6;
}
.nof_remote_site_row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.nof_remote_site_row input[readonly] {
  background: #f4f5f7;
  cursor: default;
}
#nof_next_remote_name_wrap {
  display: none;
  margin-top: 8px;
}

.nof_sites_fpm_group--distributed .nof_remote_block_nested {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.nof_field {
  margin-bottom: 10px;
}
.nof_field label {
  display: block;
  font-weight: normal;
  font-size: 12px;
  margin-bottom: 3px;
  color: #333840;
}
.nof_field input[type="number"],
.nof_field input[type="text"],
.nof_field select {
  width: 100%;
  max-width: 280px;
  padding: 4px 6px;
  border: 1px solid #c4c5c7;
  border-radius: 2px;
}
/* Match form.css input.error / label.error (jQuery Validate) for empty required fields e.g. snmp_devices */
#flow_section_questions #nof_next_remote_name.error,
#flow_section_questions #nof_next_remote_name.error:focus {
  border: 1px solid #990000;
  background: #ffe5e5;
}
/* Chrome autofill yellow overrides background; keep error tint when .error is applied after valid(). */
#flow_section_questions #nof_next_remote_name.error:-webkit-autofill,
#flow_section_questions #nof_next_remote_name.error:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffe5e5 inset;
  border: 1px solid #990000;
}
#flow_section_questions .nof_field_errmsg {
  display: none;
  max-width: 280px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: #990000;
}
.nof_hint {
  font-size: 11px;
  color: #5a6078;
  margin-top: 2px;
}
.nof_remote_count {
  font-weight: bold;
  margin-bottom: 8px;
  color: #333840;
}
.nof_remote_btn_row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}
/* Match UCF \"Add plugin instance\" (.form_buttons input in shared.css). */
#flow_section_questions .nof_remote_btn_row input.nof_remote_ucf_btn[type="button"] {
  border-radius: 3px;
  padding: 4px 8px;
  border: 0 none;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 12px;
  font-weight: bold;
  background: #376180;
  color: #ffffff;
  min-width: 80px;
}
#flow_section_questions .nof_remote_btn_row input.nof_remote_ucf_btn[type="button"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
button.nof_primary {
  background: #376180;
  color: #fff;
  border: 0 none;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 12px;
  font-weight: bold;
}
button.nof_primary:hover {
  background: #2d5268;
}
.nof_results {
  flex: 1 1 400px;
  min-width: 320px;
  overflow-x: auto;
}
/* Estimated resources breakdown summary: same table chrome as Recommended Cluster Deployment (.nof_rb-table). */
.nof_breakdown_wrap {
  margin-top: 6px;
  margin-bottom: 8px;
  max-width: 100%;
  width: 100%;
}
.nof_breakdown_wrap .nof_rb-scroll {
  overflow-x: auto;
}
#nof_breakdown_table tbody td.nof_bd_preline {
  white-space: pre-line;
  line-height: 1.35;
}
/* Cluster column: wide enough for longest site label on one line */
#nof_breakdown_table thead th:first-child,
#nof_breakdown_table tbody th.nof_bd_cluster {
  white-space: nowrap;
  width: 1%;
  min-width: max-content;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}

/* Resources breakdown per cluster + recommended deployment */
.nof_per_cluster_rb_host {
  margin-top: 8px;
}
.nof_rb-cluster {
  border: 1px solid #c4c5c7;
  border-radius: 4px;
  padding: 12px 14px 14px;
  margin-bottom: 16px;
  background: #fafbfc;
}
.nof_rb-cluster-h {
  font-size: 15px;
  font-weight: normal;
  margin: 0 0 6px;
  color: #333840;
}
.nof_rb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  align-items: stretch;
}
/* Per-cluster row: Cluster logical ~60%, Capacity notes ~40% (when side by side) */
.nof_rb-grid > .nof_rb-widget:has(.nof_rb-table-logical) {
  flex: 6 1 0;
  min-width: 0;
}
.nof_rb-grid > .nof_rb-widget:has(.nof_rb-table-capacity) {
  flex: 4 1 0;
  min-width: 0;
  max-width: 100%;
}
.nof_rb-widget {
  flex: 1 1 280px;
  background: #fff;
  border: 1px solid #dfe1e6;
  border-radius: 3px;
  overflow: hidden;
}
.nof_rb-widget-full {
  flex: 1 1 100%;
  margin-top: 4px;
}
.nof_rb-widget-h {
  font-size: 12px;
  font-weight: normal;
  padding: 8px 10px;
  background: #e0e0e0;
  border-bottom: 1px solid #d1d1d1;
  color: #333840;
}
.nof_rb-scroll {
  overflow-x: auto;
}
.nof_rb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.nof_rb-table th,
.nof_rb-table td {
  border: 1px solid #dfe1e6;
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
}
.nof_rb-th-num,
.nof_rb-td-num {
  text-align: right;
}
/* Keep count + vCPU / GB on one line in deployment and logical-resource tables */
.nof_rb-table td.nof_rb-td-stack,
.nof_rb-table td.nof_rb-td-logical.nof_rb-td-num {
  white-space: nowrap;
}
.nof_rb-td-logical {
  white-space: normal;
  vertical-align: top;
}
/* Cluster logical resources: same full width + label column rules as Summary (#nof_results_summary) */
.nof_rb-table-logical {
  width: 100%;
  table-layout: fixed;
}
.nof_rb-table-logical th:first-child,
.nof_rb-table-logical td:first-child {
  width: 42%;
  max-width: 22em;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.35;
  vertical-align: middle;
  padding: 5px 6px;
}
.nof_rb-table-logical th:nth-child(2),
.nof_rb-table-logical td:nth-child(2) {
  width: 17%;
  white-space: nowrap;
  vertical-align: middle;
  padding: 5px 4px 5px 6px;
}
.nof_rb-table-logical th:nth-child(3),
.nof_rb-table-logical td:nth-child(3) {
  width: 20%;
  min-width: 0;
  white-space: nowrap;
  vertical-align: middle;
  padding: 5px 4px 5px 6px;
}
.nof_rb-table-logical th:nth-child(4),
.nof_rb-table-logical td:nth-child(4) {
  width: 21%;
  white-space: nowrap;
  vertical-align: middle;
  padding: 5px 6px 5px 4px;
}
/* Capacity notes: fills ~40% panel; Item wraps; Value stays compact */
.nof_rb-table-capacity {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  font-size: 11px;
}
.nof_rb-table-capacity th,
.nof_rb-table-capacity td {
  padding: 4px 6px;
}
.nof_rb-table-capacity th:first-child,
.nof_rb-table-capacity td:first-child {
  width: 56%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.3;
}
.nof_rb-table-capacity th:nth-child(2),
.nof_rb-table-capacity td:nth-child(2) {
  width: 44%;
  white-space: nowrap;
  padding-left: 8px;
}
.nof_rb-logical-hint {
  display: inline;
  font-size: 11px;
  font-weight: normal;
  color: #5a6078;
}
.nof_rb-tr-even {
  background: #f4f5f7;
}
.nof_rb-tr-total td {
  font-weight: 700;
  background: #eaeef2;
}
.nof_rb-caption {
  font-size: 11px;
  color: #5a6078;
  margin: 6px 10px 0;
  line-height: 1.35;
  white-space: pre-line;
}
.nof_rb-footnote {
  font-size: 11px;
  color: #333840;
  margin-top: 10px;
  padding: 8px 10px;
  background: #fff7d6;
  border: 1px solid #e5d595;
  border-radius: 3px;
  line-height: 1.35;
}
.nof_flow_proxy_page_note {
  margin-top: 14px;
}
.nof_metallb_page_note {
  margin-top: 10px;
}
.nof_results h2 {
  margin-top: 0;
}
.nof_subheading {
  font-size: 13px;
  font-weight: bold;
  margin: 14px 0 6px;
  color: #333840;
}
.nof_subheading:first-of-type {
  margin-top: 0;
}
table.nof_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.nof_table th,
table.nof_table td {
  border: 1px solid #dfe1e6;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
table.nof_table th {
  background: #f4f5f7;
  font-weight: normal;
}
/* Two-column summary: keep label column from crowding values */
#nof_results_summary th[scope="row"] {
  width: 42%;
  max-width: 22em;
}
#nof_warnings {
  margin-top: 12px;
  color: #974f00;
  font-size: 12px;
}
#nof_warnings ul {
  margin: 0;
  padding-left: 18px;
}

/* Override .modal { display:none } when the native <dialog> is open (.show() sets [open]). */
#modal_netops_flow_resources[open] {
  display: block;
}

/* Reset browser-default <dialog> padding/border so it behaves like the prior <div> modal. */
#modal_netops_flow_resources {
  padding: 0;
  border: none;
  max-width: none;
  max-height: none;
}

/* Resources breakdown lives in #modal_netops_flow_resources (not under #flow_section_questions). */
#nof_flow_resources_modal_body .nof_panel.nof_results {
  max-width: none;
  flex: 1 1 auto;
  border: 0 none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
#modal_netops_flow_resources .modal-body--netops-flow-rb {
  max-height: 75vh;
}